[{"data":1,"prerenderedAt":6824},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-select":682,"-docs-theme-components-select-surround":6819},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":468,"body":684,"description":6813,"extension":1431,"links":6814,"meta":6815,"navigation":6816,"path":469,"seo":6817,"stem":470,"__hash__":6818},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select.md",{"type":685,"value":686,"toc":6773},"minimark",[687,691,699,768,776,783,787,790,828,832,3771,3774,3786,3791,3794,3799,3803,3870,3880,3884,3891,3975,3985,3988,3993,3996,3999,4002,4005,4008,4013,4016,4020,4033,4036,4040,4130,4134,4150,4152,4287,4291,4301,4304,4318,4401,4414,4417,4437,4439,4676,4690,4693,4700,4703,4720,4724,4737,4748,4752,4755,4920,5317,5337,5342,5345,5423,5427,5431,5434,5628,5632,5639,5808,5813,5816,5822,5835,5840,5960,5965,6086,6092,6107,6111,6179,6185,6201,6205,6273,6279,6290,6294,6364,6370,6391,6395,6427,6433,6446,6450,6500,6506,6517,6521,6553,6558,6562,6641,6645,6769],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698],"p",{},"The ",[696,697,468],"strong",{}," is a composite form control for choosing one or many values from a list. It is composed of seven recipe parts:",[700,701,702,716,728,736,744,752,760],"ul",{},[703,704,705,711,712,715],"li",{},[696,706,707],{},[708,709,710],"code",{},"useSelectRecipe()"," — the trigger that owns the visual field (border, background, padding, ",[708,713,714],{},":focus-within"," ring) and lays its contents out in a wrapping row so value chips and the chevron flow together.",[703,717,718,723,724,727],{},[696,719,720],{},[708,721,722],{},"useSelectPanelRecipe()"," — the floating ",[708,725,726],{},"listbox"," panel that holds the options, with a built-in scroll boundary for long lists.",[703,729,730,735],{},[696,731,732],{},[708,733,734],{},"useSelectOptionRecipe()"," — a selectable row with hover, focus, active, selected, and disabled states driven by ARIA attributes.",[703,737,738,743],{},[696,739,740],{},[708,741,742],{},"useSelectChipRecipe()"," — a dismissable tag rendered in the trigger for each selected value in multi-select mode, with a nested remove button.",[703,745,746,751],{},[696,747,748],{},[708,749,750],{},"useSelectArrowRecipe()"," — the chevron indicator that rotates when the panel is open.",[703,753,754,759],{},[696,755,756],{},[708,757,758],{},"useSelectLabelRecipe()"," — an uppercase heading for grouping options inside the panel.",[703,761,762,767],{},[696,763,764],{},[708,765,766],{},"useSelectSeparatorRecipe()"," — a thin rule for dividing option groups.",[692,769,770,771,775],{},"Each composable creates a fully configured ",[772,773,774],"a",{"href":132},"recipe"," with color and size options — plus compound variants that handle every color-variant combination, including dark mode overrides, automatically.",[692,777,778,779,782],{},"The Select recipes integrate directly with the default ",[772,780,781],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[688,784,786],{"id":785},"why-use-the-select-recipe","Why use the Select recipe?",[692,788,789],{},"The Select recipe helps you:",[700,791,792,798,804,810,816,822],{},[703,793,794,797],{},[696,795,796],{},"Ship faster with sensible defaults",": Get a trigger, panel, options, chips, chevron, labels, and separators out of the box with a single set of composable calls.",[703,799,800,803],{},[696,801,802],{},"Support multi-selection",": Render each selected value as a dismissable chip directly in the trigger, modeled on the Badge recipe.",[703,805,806,809],{},[696,807,808],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules across all seven parts, including dark mode.",[703,811,812,815],{},[696,813,814],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[703,817,818,821],{},[696,819,820],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, or size values at compile time.",[703,823,824,827],{},[696,825,826],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[688,829,831],{"id":830},"usage","Usage",[833,834,836,841,848,1257,1261,1276,3763,3767],"steps",{"level":835},"4",[837,838,840],"h4",{"id":839},"register-the-recipes","Register the recipes",[692,842,843,844,847],{},"Add the Select recipes to a local Styleframe instance. The global ",[708,845,846],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[849,850,852,1150],"code-tree",{"default-value":851},"src\u002Fcomponents\u002Fselect.styleframe.ts",[853,854,859],"pre",{"className":855,"code":856,"filename":851,"language":857,"meta":858,"style":858},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useSelectRecipe,\n    useSelectPanelRecipe,\n    useSelectOptionRecipe,\n    useSelectChipRecipe,\n    useSelectArrowRecipe,\n    useSelectLabelRecipe,\n    useSelectSeparatorRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst select = useSelectRecipe(s);\nconst selectPanel = useSelectPanelRecipe(s);\nconst selectOption = useSelectOptionRecipe(s);\nconst selectChip = useSelectChipRecipe(s);\nconst selectArrow = useSelectArrowRecipe(s);\nconst selectLabel = useSelectLabelRecipe(s);\nconst selectSeparator = useSelectSeparatorRecipe(s);\n\nexport default s;\n","ts","",[708,860,861,897,905,914,922,930,938,946,954,962,979,985,1006,1011,1029,1046,1063,1080,1097,1114,1131,1136],{"__ignoreMap":858},[862,863,866,870,874,878,881,884,887,891,894],"span",{"class":864,"line":865},"line",1,[862,867,869],{"class":868},"s7zQu","import",[862,871,873],{"class":872},"sMK4o"," {",[862,875,877],{"class":876},"sTEyZ"," styleframe",[862,879,880],{"class":872}," }",[862,882,883],{"class":868}," from",[862,885,886],{"class":872}," '",[862,888,890],{"class":889},"sfazB","virtual:styleframe",[862,892,893],{"class":872},"'",[862,895,896],{"class":872},";\n",[862,898,900,902],{"class":864,"line":899},2,[862,901,869],{"class":868},[862,903,904],{"class":872}," {\n",[862,906,908,911],{"class":864,"line":907},3,[862,909,910],{"class":876},"    useSelectRecipe",[862,912,913],{"class":872},",\n",[862,915,917,920],{"class":864,"line":916},4,[862,918,919],{"class":876},"    useSelectPanelRecipe",[862,921,913],{"class":872},[862,923,925,928],{"class":864,"line":924},5,[862,926,927],{"class":876},"    useSelectOptionRecipe",[862,929,913],{"class":872},[862,931,933,936],{"class":864,"line":932},6,[862,934,935],{"class":876},"    useSelectChipRecipe",[862,937,913],{"class":872},[862,939,941,944],{"class":864,"line":940},7,[862,942,943],{"class":876},"    useSelectArrowRecipe",[862,945,913],{"class":872},[862,947,949,952],{"class":864,"line":948},8,[862,950,951],{"class":876},"    useSelectLabelRecipe",[862,953,913],{"class":872},[862,955,957,960],{"class":864,"line":956},9,[862,958,959],{"class":876},"    useSelectSeparatorRecipe",[862,961,913],{"class":872},[862,963,965,968,970,972,975,977],{"class":864,"line":964},10,[862,966,967],{"class":872},"}",[862,969,883],{"class":868},[862,971,886],{"class":872},[862,973,974],{"class":889},"@styleframe\u002Ftheme",[862,976,893],{"class":872},[862,978,896],{"class":872},[862,980,982],{"class":864,"line":981},11,[862,983,984],{"emptyLinePlaceholder":223},"\n",[862,986,988,992,995,998,1001,1004],{"class":864,"line":987},12,[862,989,991],{"class":990},"spNyl","const",[862,993,994],{"class":876}," s ",[862,996,997],{"class":872},"=",[862,999,877],{"class":1000},"s2Zo4",[862,1002,1003],{"class":876},"()",[862,1005,896],{"class":872},[862,1007,1009],{"class":864,"line":1008},13,[862,1010,984],{"emptyLinePlaceholder":223},[862,1012,1014,1016,1019,1021,1024,1027],{"class":864,"line":1013},14,[862,1015,991],{"class":990},[862,1017,1018],{"class":876}," select ",[862,1020,997],{"class":872},[862,1022,1023],{"class":1000}," useSelectRecipe",[862,1025,1026],{"class":876},"(s)",[862,1028,896],{"class":872},[862,1030,1032,1034,1037,1039,1042,1044],{"class":864,"line":1031},15,[862,1033,991],{"class":990},[862,1035,1036],{"class":876}," selectPanel ",[862,1038,997],{"class":872},[862,1040,1041],{"class":1000}," useSelectPanelRecipe",[862,1043,1026],{"class":876},[862,1045,896],{"class":872},[862,1047,1049,1051,1054,1056,1059,1061],{"class":864,"line":1048},16,[862,1050,991],{"class":990},[862,1052,1053],{"class":876}," selectOption ",[862,1055,997],{"class":872},[862,1057,1058],{"class":1000}," useSelectOptionRecipe",[862,1060,1026],{"class":876},[862,1062,896],{"class":872},[862,1064,1066,1068,1071,1073,1076,1078],{"class":864,"line":1065},17,[862,1067,991],{"class":990},[862,1069,1070],{"class":876}," selectChip ",[862,1072,997],{"class":872},[862,1074,1075],{"class":1000}," useSelectChipRecipe",[862,1077,1026],{"class":876},[862,1079,896],{"class":872},[862,1081,1083,1085,1088,1090,1093,1095],{"class":864,"line":1082},18,[862,1084,991],{"class":990},[862,1086,1087],{"class":876}," selectArrow ",[862,1089,997],{"class":872},[862,1091,1092],{"class":1000}," useSelectArrowRecipe",[862,1094,1026],{"class":876},[862,1096,896],{"class":872},[862,1098,1100,1102,1105,1107,1110,1112],{"class":864,"line":1099},19,[862,1101,991],{"class":990},[862,1103,1104],{"class":876}," selectLabel ",[862,1106,997],{"class":872},[862,1108,1109],{"class":1000}," useSelectLabelRecipe",[862,1111,1026],{"class":876},[862,1113,896],{"class":872},[862,1115,1117,1119,1122,1124,1127,1129],{"class":864,"line":1116},20,[862,1118,991],{"class":990},[862,1120,1121],{"class":876}," selectSeparator ",[862,1123,997],{"class":872},[862,1125,1126],{"class":1000}," useSelectSeparatorRecipe",[862,1128,1026],{"class":876},[862,1130,896],{"class":872},[862,1132,1134],{"class":864,"line":1133},21,[862,1135,984],{"emptyLinePlaceholder":223},[862,1137,1139,1142,1145,1148],{"class":864,"line":1138},22,[862,1140,1141],{"class":868},"export",[862,1143,1144],{"class":868}," default",[862,1146,1147],{"class":876}," s",[862,1149,896],{"class":872},[853,1151,1153],{"className":855,"code":1152,"filename":846,"language":857,"meta":858,"style":858},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[708,1154,1155,1176,1203,1207,1221,1225,1234,1243,1247],{"__ignoreMap":858},[862,1156,1157,1159,1161,1163,1165,1167,1169,1172,1174],{"class":864,"line":865},[862,1158,869],{"class":868},[862,1160,873],{"class":872},[862,1162,877],{"class":876},[862,1164,880],{"class":872},[862,1166,883],{"class":868},[862,1168,886],{"class":872},[862,1170,1171],{"class":889},"styleframe",[862,1173,893],{"class":872},[862,1175,896],{"class":872},[862,1177,1178,1180,1182,1185,1188,1191,1193,1195,1197,1199,1201],{"class":864,"line":899},[862,1179,869],{"class":868},[862,1181,873],{"class":872},[862,1183,1184],{"class":876}," useDesignTokensPreset",[862,1186,1187],{"class":872},",",[862,1189,1190],{"class":876}," useUtilitiesPreset",[862,1192,880],{"class":872},[862,1194,883],{"class":868},[862,1196,886],{"class":872},[862,1198,974],{"class":889},[862,1200,893],{"class":872},[862,1202,896],{"class":872},[862,1204,1205],{"class":864,"line":907},[862,1206,984],{"emptyLinePlaceholder":223},[862,1208,1209,1211,1213,1215,1217,1219],{"class":864,"line":916},[862,1210,991],{"class":990},[862,1212,994],{"class":876},[862,1214,997],{"class":872},[862,1216,877],{"class":1000},[862,1218,1003],{"class":876},[862,1220,896],{"class":872},[862,1222,1223],{"class":864,"line":924},[862,1224,984],{"emptyLinePlaceholder":223},[862,1226,1227,1230,1232],{"class":864,"line":932},[862,1228,1229],{"class":1000},"useDesignTokensPreset",[862,1231,1026],{"class":876},[862,1233,896],{"class":872},[862,1235,1236,1239,1241],{"class":864,"line":940},[862,1237,1238],{"class":1000},"useUtilitiesPreset",[862,1240,1026],{"class":876},[862,1242,896],{"class":872},[862,1244,1245],{"class":864,"line":948},[862,1246,984],{"emptyLinePlaceholder":223},[862,1248,1249,1251,1253,1255],{"class":864,"line":956},[862,1250,1141],{"class":868},[862,1252,1144],{"class":868},[862,1254,1147],{"class":876},[862,1256,896],{"class":872},[837,1258,1260],{"id":1259},"build-the-component","Build the component",[692,1262,1263,1264,1267,1268,1271,1272,1275],{},"Import the runtime functions from the virtual module. The trigger paints the field; the panel, options, chips, and chevron compose inside or below it. Selected and disabled options are driven by ",[708,1265,1266],{},"aria-selected"," and ",[708,1269,1270],{},"aria-disabled",", and the chevron rotates when the trigger carries the ",[708,1273,1274],{},"-open"," class:",[1277,1278,1279,2188,3067],"framework-switcher",{},[1280,1281,1282],"template",{"v-slot:vue":858},[853,1283,1288],{"className":1284,"code":1285,"filename":1286,"language":1287,"meta":858,"style":858},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n    select,\n    selectPanel,\n    selectOption,\n    selectChip,\n    selectArrow,\n} from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    size = \"md\",\n    open = false,\n    values = [],\n    options = [],\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    open?: boolean;\n    values?: string[];\n    options?: string[];\n}>();\n\nconst trigger = computed(() => [\n    select({ color, variant: \"solid\", size }),\n    { \"-open\": open },\n]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cdiv role=\"combobox\" aria-haspopup=\"listbox\" :aria-expanded=\"open\" :class=\"trigger\">\n            \u003Cspan\n                v-for=\"value in values\"\n                :key=\"value\"\n                :class=\"selectChip({ color, variant: 'soft', size })\"\n            >\n                {{ value }}\n                \u003Cbutton type=\"button\" class=\"select-chip-remove\" aria-label=\"Remove\">×\u003C\u002Fbutton>\n            \u003C\u002Fspan>\n            \u003Cspan :class=\"selectArrow({ size })\" aria-hidden=\"true\">▾\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n\n        \u003Cul v-if=\"open\" role=\"listbox\" :class=\"selectPanel({ color, variant: 'solid', size })\">\n            \u003Cli\n                v-for=\"option in options\"\n                :key=\"option\"\n                role=\"option\"\n                :aria-selected=\"values.includes(option)\"\n                :class=\"selectOption({ color, variant: 'solid', size })\"\n            >\n                \u003Cspan class=\"select-option-check\" aria-hidden=\"true\">✓\u003C\u002Fspan>\n                {{ option }}\n            \u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FSelect.vue","vue",[708,1289,1290,1317,1339,1345,1352,1359,1366,1373,1380,1394,1398,1404,1420,1436,1449,1461,1472,1485,1520,1553,1566,1581,1594,1604,1609,1632,1672,1692,1700,1710,1715,1724,1735,1792,1801,1817,1832,1847,1853,1859,1915,1925,1966,1976,1981,2022,2030,2044,2058,2072,2087,2101,2106,2145,2151,2160,2169,2179],{"__ignoreMap":858},[862,1291,1292,1295,1299,1302,1305,1307,1310,1312,1314],{"class":864,"line":865},[862,1293,1294],{"class":872},"\u003C",[862,1296,1298],{"class":1297},"swJcz","script",[862,1300,1301],{"class":990}," setup",[862,1303,1304],{"class":990}," lang",[862,1306,997],{"class":872},[862,1308,1309],{"class":872},"\"",[862,1311,857],{"class":889},[862,1313,1309],{"class":872},[862,1315,1316],{"class":872},">\n",[862,1318,1319,1321,1323,1326,1328,1330,1333,1335,1337],{"class":864,"line":899},[862,1320,869],{"class":868},[862,1322,873],{"class":872},[862,1324,1325],{"class":876}," computed",[862,1327,880],{"class":872},[862,1329,883],{"class":868},[862,1331,1332],{"class":872}," \"",[862,1334,1287],{"class":889},[862,1336,1309],{"class":872},[862,1338,896],{"class":872},[862,1340,1341,1343],{"class":864,"line":907},[862,1342,869],{"class":868},[862,1344,904],{"class":872},[862,1346,1347,1350],{"class":864,"line":916},[862,1348,1349],{"class":876},"    select",[862,1351,913],{"class":872},[862,1353,1354,1357],{"class":864,"line":924},[862,1355,1356],{"class":876},"    selectPanel",[862,1358,913],{"class":872},[862,1360,1361,1364],{"class":864,"line":932},[862,1362,1363],{"class":876},"    selectOption",[862,1365,913],{"class":872},[862,1367,1368,1371],{"class":864,"line":940},[862,1369,1370],{"class":876},"    selectChip",[862,1372,913],{"class":872},[862,1374,1375,1378],{"class":864,"line":948},[862,1376,1377],{"class":876},"    selectArrow",[862,1379,913],{"class":872},[862,1381,1382,1384,1386,1388,1390,1392],{"class":864,"line":956},[862,1383,967],{"class":872},[862,1385,883],{"class":868},[862,1387,1332],{"class":872},[862,1389,890],{"class":889},[862,1391,1309],{"class":872},[862,1393,896],{"class":872},[862,1395,1396],{"class":864,"line":964},[862,1397,984],{"emptyLinePlaceholder":223},[862,1399,1400,1402],{"class":864,"line":981},[862,1401,991],{"class":990},[862,1403,904],{"class":872},[862,1405,1406,1409,1411,1413,1416,1418],{"class":864,"line":987},[862,1407,1408],{"class":876},"    color ",[862,1410,997],{"class":872},[862,1412,1332],{"class":872},[862,1414,1415],{"class":889},"neutral",[862,1417,1309],{"class":872},[862,1419,913],{"class":872},[862,1421,1422,1425,1427,1429,1432,1434],{"class":864,"line":1008},[862,1423,1424],{"class":876},"    size ",[862,1426,997],{"class":872},[862,1428,1332],{"class":872},[862,1430,1431],{"class":889},"md",[862,1433,1309],{"class":872},[862,1435,913],{"class":872},[862,1437,1438,1441,1443,1447],{"class":864,"line":1013},[862,1439,1440],{"class":876},"    open ",[862,1442,997],{"class":872},[862,1444,1446],{"class":1445},"sfNiH"," false",[862,1448,913],{"class":872},[862,1450,1451,1454,1456,1459],{"class":864,"line":1031},[862,1452,1453],{"class":876},"    values ",[862,1455,997],{"class":872},[862,1457,1458],{"class":876}," []",[862,1460,913],{"class":872},[862,1462,1463,1466,1468,1470],{"class":864,"line":1048},[862,1464,1465],{"class":876},"    options ",[862,1467,997],{"class":872},[862,1469,1458],{"class":876},[862,1471,913],{"class":872},[862,1473,1474,1476,1479,1482],{"class":864,"line":1065},[862,1475,967],{"class":872},[862,1477,1478],{"class":872}," =",[862,1480,1481],{"class":1000}," defineProps",[862,1483,1484],{"class":872},"\u003C{\n",[862,1486,1487,1490,1493,1495,1498,1500,1503,1505,1508,1510,1512,1514,1516,1518],{"class":864,"line":1082},[862,1488,1489],{"class":1297},"    color",[862,1491,1492],{"class":872},"?:",[862,1494,1332],{"class":872},[862,1496,1497],{"class":889},"light",[862,1499,1309],{"class":872},[862,1501,1502],{"class":872}," |",[862,1504,1332],{"class":872},[862,1506,1507],{"class":889},"dark",[862,1509,1309],{"class":872},[862,1511,1502],{"class":872},[862,1513,1332],{"class":872},[862,1515,1415],{"class":889},[862,1517,1309],{"class":872},[862,1519,896],{"class":872},[862,1521,1522,1525,1527,1529,1532,1534,1536,1538,1540,1542,1544,1546,1549,1551],{"class":864,"line":1099},[862,1523,1524],{"class":1297},"    size",[862,1526,1492],{"class":872},[862,1528,1332],{"class":872},[862,1530,1531],{"class":889},"sm",[862,1533,1309],{"class":872},[862,1535,1502],{"class":872},[862,1537,1332],{"class":872},[862,1539,1431],{"class":889},[862,1541,1309],{"class":872},[862,1543,1502],{"class":872},[862,1545,1332],{"class":872},[862,1547,1548],{"class":889},"lg",[862,1550,1309],{"class":872},[862,1552,896],{"class":872},[862,1554,1555,1558,1560,1564],{"class":864,"line":1116},[862,1556,1557],{"class":1297},"    open",[862,1559,1492],{"class":872},[862,1561,1563],{"class":1562},"sBMFI"," boolean",[862,1565,896],{"class":872},[862,1567,1568,1571,1573,1576,1579],{"class":864,"line":1133},[862,1569,1570],{"class":1297},"    values",[862,1572,1492],{"class":872},[862,1574,1575],{"class":1562}," string",[862,1577,1578],{"class":876},"[]",[862,1580,896],{"class":872},[862,1582,1583,1586,1588,1590,1592],{"class":864,"line":1138},[862,1584,1585],{"class":1297},"    options",[862,1587,1492],{"class":872},[862,1589,1575],{"class":1562},[862,1591,1578],{"class":876},[862,1593,896],{"class":872},[862,1595,1597,1600,1602],{"class":864,"line":1596},23,[862,1598,1599],{"class":872},"}>",[862,1601,1003],{"class":876},[862,1603,896],{"class":872},[862,1605,1607],{"class":864,"line":1606},24,[862,1608,984],{"emptyLinePlaceholder":223},[862,1610,1612,1614,1617,1619,1621,1624,1626,1629],{"class":864,"line":1611},25,[862,1613,991],{"class":990},[862,1615,1616],{"class":876}," trigger ",[862,1618,997],{"class":872},[862,1620,1325],{"class":1000},[862,1622,1623],{"class":876},"(",[862,1625,1003],{"class":872},[862,1627,1628],{"class":990}," =>",[862,1630,1631],{"class":876}," [\n",[862,1633,1635,1637,1639,1642,1645,1647,1650,1653,1655,1658,1660,1662,1665,1667,1670],{"class":864,"line":1634},26,[862,1636,1349],{"class":1000},[862,1638,1623],{"class":876},[862,1640,1641],{"class":872},"{",[862,1643,1644],{"class":876}," color",[862,1646,1187],{"class":872},[862,1648,1649],{"class":1297}," variant",[862,1651,1652],{"class":872},":",[862,1654,1332],{"class":872},[862,1656,1657],{"class":889},"solid",[862,1659,1309],{"class":872},[862,1661,1187],{"class":872},[862,1663,1664],{"class":876}," size ",[862,1666,967],{"class":872},[862,1668,1669],{"class":876},")",[862,1671,913],{"class":872},[862,1673,1675,1678,1680,1682,1684,1686,1689],{"class":864,"line":1674},27,[862,1676,1677],{"class":872},"    {",[862,1679,1332],{"class":872},[862,1681,1274],{"class":1297},[862,1683,1309],{"class":872},[862,1685,1652],{"class":872},[862,1687,1688],{"class":876}," open ",[862,1690,1691],{"class":872},"},\n",[862,1693,1695,1698],{"class":864,"line":1694},28,[862,1696,1697],{"class":876},"])",[862,1699,896],{"class":872},[862,1701,1703,1706,1708],{"class":864,"line":1702},29,[862,1704,1705],{"class":872},"\u003C\u002F",[862,1707,1298],{"class":1297},[862,1709,1316],{"class":872},[862,1711,1713],{"class":864,"line":1712},30,[862,1714,984],{"emptyLinePlaceholder":223},[862,1716,1718,1720,1722],{"class":864,"line":1717},31,[862,1719,1294],{"class":872},[862,1721,1280],{"class":1297},[862,1723,1316],{"class":872},[862,1725,1727,1730,1733],{"class":864,"line":1726},32,[862,1728,1729],{"class":872},"    \u003C",[862,1731,1732],{"class":1297},"div",[862,1734,1316],{"class":872},[862,1736,1738,1741,1743,1746,1748,1750,1753,1755,1758,1760,1762,1764,1766,1769,1771,1773,1776,1778,1781,1783,1785,1788,1790],{"class":864,"line":1737},33,[862,1739,1740],{"class":872},"        \u003C",[862,1742,1732],{"class":1297},[862,1744,1745],{"class":990}," role",[862,1747,997],{"class":872},[862,1749,1309],{"class":872},[862,1751,1752],{"class":889},"combobox",[862,1754,1309],{"class":872},[862,1756,1757],{"class":990}," aria-haspopup",[862,1759,997],{"class":872},[862,1761,1309],{"class":872},[862,1763,726],{"class":889},[862,1765,1309],{"class":872},[862,1767,1768],{"class":990}," :aria-expanded",[862,1770,997],{"class":872},[862,1772,1309],{"class":872},[862,1774,1775],{"class":889},"open",[862,1777,1309],{"class":872},[862,1779,1780],{"class":990}," :class",[862,1782,997],{"class":872},[862,1784,1309],{"class":872},[862,1786,1787],{"class":889},"trigger",[862,1789,1309],{"class":872},[862,1791,1316],{"class":872},[862,1793,1795,1798],{"class":864,"line":1794},34,[862,1796,1797],{"class":872},"            \u003C",[862,1799,1800],{"class":1297},"span\n",[862,1802,1804,1807,1809,1811,1814],{"class":864,"line":1803},35,[862,1805,1806],{"class":990},"                v-for",[862,1808,997],{"class":872},[862,1810,1309],{"class":872},[862,1812,1813],{"class":889},"value in values",[862,1815,1816],{"class":872},"\"\n",[862,1818,1820,1823,1825,1827,1830],{"class":864,"line":1819},36,[862,1821,1822],{"class":990},"                :key",[862,1824,997],{"class":872},[862,1826,1309],{"class":872},[862,1828,1829],{"class":889},"value",[862,1831,1816],{"class":872},[862,1833,1835,1838,1840,1842,1845],{"class":864,"line":1834},37,[862,1836,1837],{"class":990},"                :class",[862,1839,997],{"class":872},[862,1841,1309],{"class":872},[862,1843,1844],{"class":889},"selectChip({ color, variant: 'soft', size })",[862,1846,1816],{"class":872},[862,1848,1850],{"class":864,"line":1849},38,[862,1851,1852],{"class":872},"            >\n",[862,1854,1856],{"class":864,"line":1855},39,[862,1857,1858],{"class":876},"                {{ value }}\n",[862,1860,1862,1865,1868,1871,1873,1875,1877,1879,1882,1884,1886,1889,1891,1894,1896,1898,1901,1903,1906,1909,1911,1913],{"class":864,"line":1861},40,[862,1863,1864],{"class":872},"                \u003C",[862,1866,1867],{"class":1297},"button",[862,1869,1870],{"class":990}," type",[862,1872,997],{"class":872},[862,1874,1309],{"class":872},[862,1876,1867],{"class":889},[862,1878,1309],{"class":872},[862,1880,1881],{"class":990}," class",[862,1883,997],{"class":872},[862,1885,1309],{"class":872},[862,1887,1888],{"class":889},"select-chip-remove",[862,1890,1309],{"class":872},[862,1892,1893],{"class":990}," aria-label",[862,1895,997],{"class":872},[862,1897,1309],{"class":872},[862,1899,1900],{"class":889},"Remove",[862,1902,1309],{"class":872},[862,1904,1905],{"class":872},">",[862,1907,1908],{"class":876},"×",[862,1910,1705],{"class":872},[862,1912,1867],{"class":1297},[862,1914,1316],{"class":872},[862,1916,1918,1921,1923],{"class":864,"line":1917},41,[862,1919,1920],{"class":872},"            \u003C\u002F",[862,1922,862],{"class":1297},[862,1924,1316],{"class":872},[862,1926,1928,1930,1932,1934,1936,1938,1941,1943,1946,1948,1950,1953,1955,1957,1960,1962,1964],{"class":864,"line":1927},42,[862,1929,1797],{"class":872},[862,1931,862],{"class":1297},[862,1933,1780],{"class":990},[862,1935,997],{"class":872},[862,1937,1309],{"class":872},[862,1939,1940],{"class":889},"selectArrow({ size })",[862,1942,1309],{"class":872},[862,1944,1945],{"class":990}," aria-hidden",[862,1947,997],{"class":872},[862,1949,1309],{"class":872},[862,1951,1952],{"class":889},"true",[862,1954,1309],{"class":872},[862,1956,1905],{"class":872},[862,1958,1959],{"class":876},"▾",[862,1961,1705],{"class":872},[862,1963,862],{"class":1297},[862,1965,1316],{"class":872},[862,1967,1969,1972,1974],{"class":864,"line":1968},43,[862,1970,1971],{"class":872},"        \u003C\u002F",[862,1973,1732],{"class":1297},[862,1975,1316],{"class":872},[862,1977,1979],{"class":864,"line":1978},44,[862,1980,984],{"emptyLinePlaceholder":223},[862,1982,1984,1986,1988,1991,1993,1995,1997,1999,2001,2003,2005,2007,2009,2011,2013,2015,2018,2020],{"class":864,"line":1983},45,[862,1985,1740],{"class":872},[862,1987,700],{"class":1297},[862,1989,1990],{"class":990}," v-if",[862,1992,997],{"class":872},[862,1994,1309],{"class":872},[862,1996,1775],{"class":889},[862,1998,1309],{"class":872},[862,2000,1745],{"class":990},[862,2002,997],{"class":872},[862,2004,1309],{"class":872},[862,2006,726],{"class":889},[862,2008,1309],{"class":872},[862,2010,1780],{"class":990},[862,2012,997],{"class":872},[862,2014,1309],{"class":872},[862,2016,2017],{"class":889},"selectPanel({ color, variant: 'solid', size })",[862,2019,1309],{"class":872},[862,2021,1316],{"class":872},[862,2023,2025,2027],{"class":864,"line":2024},46,[862,2026,1797],{"class":872},[862,2028,2029],{"class":1297},"li\n",[862,2031,2033,2035,2037,2039,2042],{"class":864,"line":2032},47,[862,2034,1806],{"class":990},[862,2036,997],{"class":872},[862,2038,1309],{"class":872},[862,2040,2041],{"class":889},"option in options",[862,2043,1816],{"class":872},[862,2045,2047,2049,2051,2053,2056],{"class":864,"line":2046},48,[862,2048,1822],{"class":990},[862,2050,997],{"class":872},[862,2052,1309],{"class":872},[862,2054,2055],{"class":889},"option",[862,2057,1816],{"class":872},[862,2059,2061,2064,2066,2068,2070],{"class":864,"line":2060},49,[862,2062,2063],{"class":990},"                role",[862,2065,997],{"class":872},[862,2067,1309],{"class":872},[862,2069,2055],{"class":889},[862,2071,1816],{"class":872},[862,2073,2075,2078,2080,2082,2085],{"class":864,"line":2074},50,[862,2076,2077],{"class":990},"                :aria-selected",[862,2079,997],{"class":872},[862,2081,1309],{"class":872},[862,2083,2084],{"class":889},"values.includes(option)",[862,2086,1816],{"class":872},[862,2088,2090,2092,2094,2096,2099],{"class":864,"line":2089},51,[862,2091,1837],{"class":990},[862,2093,997],{"class":872},[862,2095,1309],{"class":872},[862,2097,2098],{"class":889},"selectOption({ color, variant: 'solid', size })",[862,2100,1816],{"class":872},[862,2102,2104],{"class":864,"line":2103},52,[862,2105,1852],{"class":872},[862,2107,2109,2111,2113,2115,2117,2119,2122,2124,2126,2128,2130,2132,2134,2136,2139,2141,2143],{"class":864,"line":2108},53,[862,2110,1864],{"class":872},[862,2112,862],{"class":1297},[862,2114,1881],{"class":990},[862,2116,997],{"class":872},[862,2118,1309],{"class":872},[862,2120,2121],{"class":889},"select-option-check",[862,2123,1309],{"class":872},[862,2125,1945],{"class":990},[862,2127,997],{"class":872},[862,2129,1309],{"class":872},[862,2131,1952],{"class":889},[862,2133,1309],{"class":872},[862,2135,1905],{"class":872},[862,2137,2138],{"class":876},"✓",[862,2140,1705],{"class":872},[862,2142,862],{"class":1297},[862,2144,1316],{"class":872},[862,2146,2148],{"class":864,"line":2147},54,[862,2149,2150],{"class":876},"                {{ option }}\n",[862,2152,2154,2156,2158],{"class":864,"line":2153},55,[862,2155,1920],{"class":872},[862,2157,703],{"class":1297},[862,2159,1316],{"class":872},[862,2161,2163,2165,2167],{"class":864,"line":2162},56,[862,2164,1971],{"class":872},[862,2166,700],{"class":1297},[862,2168,1316],{"class":872},[862,2170,2172,2175,2177],{"class":864,"line":2171},57,[862,2173,2174],{"class":872},"    \u003C\u002F",[862,2176,1732],{"class":1297},[862,2178,1316],{"class":872},[862,2180,2182,2184,2186],{"class":864,"line":2181},58,[862,2183,1705],{"class":872},[862,2185,1280],{"class":1297},[862,2187,1316],{"class":872},[1280,2189,2190],{"v-slot:react":858},[853,2191,2194],{"className":855,"code":2192,"filename":2193,"language":857,"meta":858,"style":858},"import {\n    select,\n    selectPanel,\n    selectOption,\n    selectChip,\n    selectArrow,\n} from \"virtual:styleframe\";\n\ninterface SelectProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    open?: boolean;\n    values?: string[];\n    options?: string[];\n}\n\nexport function Select({\n    color = \"neutral\",\n    size = \"md\",\n    open = false,\n    values = [],\n    options = [],\n}: SelectProps) {\n    const trigger = `${select({ color, variant: \"solid\", size })}${open ? \" -open\" : \"\"}`;\n\n    return (\n        \u003Cdiv>\n            \u003Cdiv role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded={open} className={trigger}>\n                {values.map((value) => (\n                    \u003Cspan key={value} className={selectChip({ color, variant: \"soft\", size })}>\n                        {value}\n                        \u003Cbutton type=\"button\" className=\"select-chip-remove\" aria-label=\"Remove\">\n                            ×\n                        \u003C\u002Fbutton>\n                    \u003C\u002Fspan>\n                ))}\n                \u003Cspan className={selectArrow({ size })} aria-hidden>▾\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n\n            {open && (\n                \u003Cul role=\"listbox\" className={selectPanel({ color, variant: \"solid\", size })}>\n                    {options.map((option) => (\n                        \u003Cli\n                            key={option}\n                            role=\"option\"\n                            aria-selected={values.includes(option)}\n                            className={selectOption({ color, variant: \"solid\", size })}\n                        >\n                            \u003Cspan className=\"select-option-check\" aria-hidden>\n                                ✓\n                            \u003C\u002Fspan>\n                            {option}\n                        \u003C\u002Fli>\n                    ))}\n                \u003C\u002Ful>\n            )}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FSelect.tsx",[708,2195,2196,2202,2208,2214,2220,2226,2232,2246,2250,2260,2290,2320,2330,2342,2354,2359,2363,2376,2391,2405,2415,2425,2435,2446,2512,2516,2524,2532,2589,2616,2665,2674,2718,2728,2737,2746,2753,2790,2798,2802,2812,2857,2879,2885,2896,2909,2925,2958,2963,2988,2998,3007,3016,3024,3031,3040,3047,3055,3062],{"__ignoreMap":858},[862,2197,2198,2200],{"class":864,"line":865},[862,2199,869],{"class":868},[862,2201,904],{"class":872},[862,2203,2204,2206],{"class":864,"line":899},[862,2205,1349],{"class":876},[862,2207,913],{"class":872},[862,2209,2210,2212],{"class":864,"line":907},[862,2211,1356],{"class":876},[862,2213,913],{"class":872},[862,2215,2216,2218],{"class":864,"line":916},[862,2217,1363],{"class":876},[862,2219,913],{"class":872},[862,2221,2222,2224],{"class":864,"line":924},[862,2223,1370],{"class":876},[862,2225,913],{"class":872},[862,2227,2228,2230],{"class":864,"line":932},[862,2229,1377],{"class":876},[862,2231,913],{"class":872},[862,2233,2234,2236,2238,2240,2242,2244],{"class":864,"line":940},[862,2235,967],{"class":872},[862,2237,883],{"class":868},[862,2239,1332],{"class":872},[862,2241,890],{"class":889},[862,2243,1309],{"class":872},[862,2245,896],{"class":872},[862,2247,2248],{"class":864,"line":948},[862,2249,984],{"emptyLinePlaceholder":223},[862,2251,2252,2255,2258],{"class":864,"line":956},[862,2253,2254],{"class":990},"interface",[862,2256,2257],{"class":1562}," SelectProps",[862,2259,904],{"class":872},[862,2261,2262,2264,2266,2268,2270,2272,2274,2276,2278,2280,2282,2284,2286,2288],{"class":864,"line":964},[862,2263,1489],{"class":1297},[862,2265,1492],{"class":872},[862,2267,1332],{"class":872},[862,2269,1497],{"class":889},[862,2271,1309],{"class":872},[862,2273,1502],{"class":872},[862,2275,1332],{"class":872},[862,2277,1507],{"class":889},[862,2279,1309],{"class":872},[862,2281,1502],{"class":872},[862,2283,1332],{"class":872},[862,2285,1415],{"class":889},[862,2287,1309],{"class":872},[862,2289,896],{"class":872},[862,2291,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310,2312,2314,2316,2318],{"class":864,"line":981},[862,2293,1524],{"class":1297},[862,2295,1492],{"class":872},[862,2297,1332],{"class":872},[862,2299,1531],{"class":889},[862,2301,1309],{"class":872},[862,2303,1502],{"class":872},[862,2305,1332],{"class":872},[862,2307,1431],{"class":889},[862,2309,1309],{"class":872},[862,2311,1502],{"class":872},[862,2313,1332],{"class":872},[862,2315,1548],{"class":889},[862,2317,1309],{"class":872},[862,2319,896],{"class":872},[862,2321,2322,2324,2326,2328],{"class":864,"line":987},[862,2323,1557],{"class":1297},[862,2325,1492],{"class":872},[862,2327,1563],{"class":1562},[862,2329,896],{"class":872},[862,2331,2332,2334,2336,2338,2340],{"class":864,"line":1008},[862,2333,1570],{"class":1297},[862,2335,1492],{"class":872},[862,2337,1575],{"class":1562},[862,2339,1578],{"class":876},[862,2341,896],{"class":872},[862,2343,2344,2346,2348,2350,2352],{"class":864,"line":1013},[862,2345,1585],{"class":1297},[862,2347,1492],{"class":872},[862,2349,1575],{"class":1562},[862,2351,1578],{"class":876},[862,2353,896],{"class":872},[862,2355,2356],{"class":864,"line":1031},[862,2357,2358],{"class":872},"}\n",[862,2360,2361],{"class":864,"line":1048},[862,2362,984],{"emptyLinePlaceholder":223},[862,2364,2365,2367,2370,2373],{"class":864,"line":1065},[862,2366,1141],{"class":868},[862,2368,2369],{"class":990}," function",[862,2371,2372],{"class":1000}," Select",[862,2374,2375],{"class":872},"({\n",[862,2377,2378,2381,2383,2385,2387,2389],{"class":864,"line":1082},[862,2379,1489],{"class":2380},"sHdIc",[862,2382,1478],{"class":872},[862,2384,1332],{"class":872},[862,2386,1415],{"class":889},[862,2388,1309],{"class":872},[862,2390,913],{"class":872},[862,2392,2393,2395,2397,2399,2401,2403],{"class":864,"line":1099},[862,2394,1524],{"class":2380},[862,2396,1478],{"class":872},[862,2398,1332],{"class":872},[862,2400,1431],{"class":889},[862,2402,1309],{"class":872},[862,2404,913],{"class":872},[862,2406,2407,2409,2411,2413],{"class":864,"line":1116},[862,2408,1557],{"class":2380},[862,2410,1478],{"class":872},[862,2412,1446],{"class":1445},[862,2414,913],{"class":872},[862,2416,2417,2419,2421,2423],{"class":864,"line":1133},[862,2418,1570],{"class":2380},[862,2420,1478],{"class":872},[862,2422,1458],{"class":876},[862,2424,913],{"class":872},[862,2426,2427,2429,2431,2433],{"class":864,"line":1138},[862,2428,1585],{"class":2380},[862,2430,1478],{"class":872},[862,2432,1458],{"class":876},[862,2434,913],{"class":872},[862,2436,2437,2440,2442,2444],{"class":864,"line":1596},[862,2438,2439],{"class":872},"}:",[862,2441,2257],{"class":1562},[862,2443,1669],{"class":872},[862,2445,904],{"class":872},[862,2447,2448,2451,2454,2456,2459,2462,2464,2466,2468,2470,2472,2474,2476,2478,2480,2482,2484,2486,2488,2491,2494,2497,2499,2502,2504,2507,2510],{"class":864,"line":1606},[862,2449,2450],{"class":990},"    const",[862,2452,2453],{"class":876}," trigger",[862,2455,1478],{"class":872},[862,2457,2458],{"class":872}," `${",[862,2460,2461],{"class":1000},"select",[862,2463,1623],{"class":876},[862,2465,1641],{"class":872},[862,2467,1644],{"class":876},[862,2469,1187],{"class":872},[862,2471,1649],{"class":1297},[862,2473,1652],{"class":872},[862,2475,1332],{"class":872},[862,2477,1657],{"class":889},[862,2479,1309],{"class":872},[862,2481,1187],{"class":872},[862,2483,1664],{"class":876},[862,2485,967],{"class":872},[862,2487,1669],{"class":876},[862,2489,2490],{"class":872},"}${",[862,2492,2493],{"class":876},"open ",[862,2495,2496],{"class":872},"?",[862,2498,1332],{"class":872},[862,2500,2501],{"class":889}," -open",[862,2503,1309],{"class":872},[862,2505,2506],{"class":872}," :",[862,2508,2509],{"class":872}," \"\"}`",[862,2511,896],{"class":872},[862,2513,2514],{"class":864,"line":1611},[862,2515,984],{"emptyLinePlaceholder":223},[862,2517,2518,2521],{"class":864,"line":1634},[862,2519,2520],{"class":868},"    return",[862,2522,2523],{"class":1297}," (\n",[862,2525,2526,2528,2530],{"class":864,"line":1674},[862,2527,1740],{"class":1297},[862,2529,1732],{"class":1562},[862,2531,1316],{"class":1297},[862,2533,2534,2536,2538,2540,2542,2544,2546,2548,2551,2554,2557,2559,2561,2563,2565,2567,2569,2572,2575,2577,2579,2582,2584,2586],{"class":864,"line":1694},[862,2535,1797],{"class":872},[862,2537,1732],{"class":876},[862,2539,1745],{"class":876},[862,2541,997],{"class":872},[862,2543,1309],{"class":872},[862,2545,1752],{"class":889},[862,2547,1309],{"class":872},[862,2549,2550],{"class":876}," aria",[862,2552,2553],{"class":872},"-",[862,2555,2556],{"class":876},"haspopup",[862,2558,997],{"class":872},[862,2560,1309],{"class":872},[862,2562,726],{"class":889},[862,2564,1309],{"class":872},[862,2566,2550],{"class":876},[862,2568,2553],{"class":872},[862,2570,2571],{"class":876},"expanded",[862,2573,2574],{"class":872},"={",[862,2576,1775],{"class":876},[862,2578,967],{"class":872},[862,2580,2581],{"class":876}," className",[862,2583,2574],{"class":872},[862,2585,1787],{"class":876},[862,2587,2588],{"class":872},"}>\n",[862,2590,2591,2594,2597,2600,2603,2606,2608,2611,2614],{"class":864,"line":1702},[862,2592,2593],{"class":872},"                {",[862,2595,2596],{"class":2380},"values",[862,2598,2599],{"class":1297},".",[862,2601,2602],{"class":2380},"map",[862,2604,2605],{"class":1297},"((",[862,2607,1829],{"class":2380},[862,2609,2610],{"class":1297},") ",[862,2612,2613],{"class":872},"=>",[862,2615,2523],{"class":1297},[862,2617,2618,2621,2623,2626,2628,2630,2632,2634,2636,2639,2642,2644,2646,2648,2650,2652,2655,2657,2659,2662],{"class":864,"line":1712},[862,2619,2620],{"class":872},"                    \u003C",[862,2622,862],{"class":876},[862,2624,2625],{"class":876}," key",[862,2627,2574],{"class":872},[862,2629,1829],{"class":876},[862,2631,967],{"class":872},[862,2633,2581],{"class":876},[862,2635,2574],{"class":872},[862,2637,2638],{"class":1297},"selectChip",[862,2640,2641],{"class":872},"({",[862,2643,1644],{"class":2380},[862,2645,1187],{"class":872},[862,2647,1649],{"class":1297},[862,2649,1652],{"class":872},[862,2651,1332],{"class":872},[862,2653,2654],{"class":889},"soft",[862,2656,1309],{"class":872},[862,2658,1187],{"class":872},[862,2660,2661],{"class":2380}," size",[862,2663,2664],{"class":872}," })}>\n",[862,2666,2667,2670,2672],{"class":864,"line":1717},[862,2668,2669],{"class":872},"                        {",[862,2671,1829],{"class":2380},[862,2673,2358],{"class":872},[862,2675,2676,2679,2681,2683,2685,2687,2689,2691,2693,2695,2697,2699,2701,2703,2705,2708,2710,2712,2714,2716],{"class":864,"line":1726},[862,2677,2678],{"class":872},"                        \u003C",[862,2680,1867],{"class":876},[862,2682,1870],{"class":876},[862,2684,997],{"class":872},[862,2686,1309],{"class":872},[862,2688,1867],{"class":889},[862,2690,1309],{"class":872},[862,2692,2581],{"class":876},[862,2694,997],{"class":872},[862,2696,1309],{"class":872},[862,2698,1888],{"class":889},[862,2700,1309],{"class":872},[862,2702,2550],{"class":876},[862,2704,2553],{"class":872},[862,2706,2707],{"class":876},"label",[862,2709,997],{"class":872},[862,2711,1309],{"class":872},[862,2713,1900],{"class":889},[862,2715,1309],{"class":872},[862,2717,1316],{"class":872},[862,2719,2720,2723,2726],{"class":864,"line":1737},[862,2721,2722],{"class":872},"                            &",[862,2724,2725],{"class":876},"times",[862,2727,896],{"class":1297},[862,2729,2730,2733,2735],{"class":864,"line":1794},[862,2731,2732],{"class":872},"                        \u003C\u002F",[862,2734,1867],{"class":876},[862,2736,1316],{"class":872},[862,2738,2739,2742,2744],{"class":864,"line":1803},[862,2740,2741],{"class":872},"                    \u003C\u002F",[862,2743,862],{"class":876},[862,2745,1316],{"class":872},[862,2747,2748,2751],{"class":864,"line":1819},[862,2749,2750],{"class":1297},"                ))",[862,2752,2358],{"class":872},[862,2754,2755,2757,2759,2761,2763,2766,2768,2770,2773,2775,2777,2780,2782,2784,2786,2788],{"class":864,"line":1834},[862,2756,1864],{"class":872},[862,2758,862],{"class":876},[862,2760,2581],{"class":876},[862,2762,2574],{"class":872},[862,2764,2765],{"class":1297},"selectArrow",[862,2767,2641],{"class":872},[862,2769,2661],{"class":2380},[862,2771,2772],{"class":872}," })}",[862,2774,2550],{"class":876},[862,2776,2553],{"class":872},[862,2778,2779],{"class":876},"hidden",[862,2781,1905],{"class":872},[862,2783,1959],{"class":1297},[862,2785,1705],{"class":872},[862,2787,862],{"class":876},[862,2789,1316],{"class":872},[862,2791,2792,2794,2796],{"class":864,"line":1849},[862,2793,1920],{"class":872},[862,2795,1732],{"class":876},[862,2797,1316],{"class":872},[862,2799,2800],{"class":864,"line":1855},[862,2801,984],{"emptyLinePlaceholder":223},[862,2803,2804,2807,2809],{"class":864,"line":1861},[862,2805,2806],{"class":872},"            {",[862,2808,1775],{"class":2380},[862,2810,2811],{"class":1297}," && (\n",[862,2813,2814,2816,2818,2820,2822,2824,2826,2828,2830,2832,2835,2837,2839,2841,2843,2845,2847,2849,2851,2853,2855],{"class":864,"line":1917},[862,2815,1864],{"class":1297},[862,2817,700],{"class":2380},[862,2819,1745],{"class":2380},[862,2821,997],{"class":872},[862,2823,1309],{"class":872},[862,2825,726],{"class":889},[862,2827,1309],{"class":872},[862,2829,2581],{"class":876},[862,2831,2574],{"class":872},[862,2833,2834],{"class":1297},"selectPanel",[862,2836,2641],{"class":872},[862,2838,1644],{"class":2380},[862,2840,1187],{"class":872},[862,2842,1649],{"class":1297},[862,2844,1652],{"class":872},[862,2846,1332],{"class":872},[862,2848,1657],{"class":889},[862,2850,1309],{"class":872},[862,2852,1187],{"class":872},[862,2854,2661],{"class":2380},[862,2856,2664],{"class":872},[862,2858,2859,2862,2865,2867,2869,2871,2873,2875,2877],{"class":864,"line":1927},[862,2860,2861],{"class":872},"                    {",[862,2863,2864],{"class":2380},"options",[862,2866,2599],{"class":1297},[862,2868,2602],{"class":2380},[862,2870,2605],{"class":1297},[862,2872,2055],{"class":2380},[862,2874,2610],{"class":1297},[862,2876,2613],{"class":872},[862,2878,2523],{"class":1297},[862,2880,2881,2883],{"class":864,"line":1968},[862,2882,2678],{"class":872},[862,2884,2029],{"class":2380},[862,2886,2887,2890,2892,2894],{"class":864,"line":1978},[862,2888,2889],{"class":876},"                            key",[862,2891,2574],{"class":872},[862,2893,2055],{"class":876},[862,2895,2358],{"class":872},[862,2897,2898,2901,2903,2905,2907],{"class":864,"line":1983},[862,2899,2900],{"class":876},"                            role",[862,2902,997],{"class":872},[862,2904,1309],{"class":872},[862,2906,2055],{"class":889},[862,2908,1816],{"class":872},[862,2910,2911,2914,2916,2919,2921,2923],{"class":864,"line":2024},[862,2912,2913],{"class":876},"                            aria",[862,2915,2553],{"class":872},[862,2917,2918],{"class":876},"selected",[862,2920,2574],{"class":872},[862,2922,2084],{"class":1297},[862,2924,2358],{"class":872},[862,2926,2927,2930,2932,2935,2937,2939,2941,2943,2945,2947,2949,2951,2953,2955],{"class":864,"line":2032},[862,2928,2929],{"class":876},"                            className",[862,2931,2574],{"class":872},[862,2933,2934],{"class":1297},"selectOption",[862,2936,2641],{"class":872},[862,2938,1644],{"class":2380},[862,2940,1187],{"class":872},[862,2942,1649],{"class":1297},[862,2944,1652],{"class":872},[862,2946,1332],{"class":872},[862,2948,1657],{"class":889},[862,2950,1309],{"class":872},[862,2952,1187],{"class":872},[862,2954,2661],{"class":2380},[862,2956,2957],{"class":872}," })}\n",[862,2959,2960],{"class":864,"line":2046},[862,2961,2962],{"class":872},"                        >\n",[862,2964,2965,2968,2970,2972,2974,2976,2978,2980,2982,2984,2986],{"class":864,"line":2060},[862,2966,2967],{"class":872},"                            \u003C",[862,2969,862],{"class":876},[862,2971,2581],{"class":876},[862,2973,997],{"class":872},[862,2975,1309],{"class":872},[862,2977,2121],{"class":889},[862,2979,1309],{"class":872},[862,2981,2550],{"class":876},[862,2983,2553],{"class":872},[862,2985,2779],{"class":876},[862,2987,1316],{"class":872},[862,2989,2990,2993,2996],{"class":864,"line":2074},[862,2991,2992],{"class":872},"                                &",[862,2994,2995],{"class":876},"checkmark",[862,2997,896],{"class":1297},[862,2999,3000,3003,3005],{"class":864,"line":2089},[862,3001,3002],{"class":872},"                            \u003C\u002F",[862,3004,862],{"class":876},[862,3006,1316],{"class":872},[862,3008,3009,3012,3014],{"class":864,"line":2103},[862,3010,3011],{"class":872},"                            {",[862,3013,2055],{"class":2380},[862,3015,2358],{"class":872},[862,3017,3018,3020,3022],{"class":864,"line":2108},[862,3019,2732],{"class":872},[862,3021,703],{"class":876},[862,3023,1316],{"class":872},[862,3025,3026,3029],{"class":864,"line":2147},[862,3027,3028],{"class":1297},"                    ))",[862,3030,2358],{"class":872},[862,3032,3033,3036,3038],{"class":864,"line":2153},[862,3034,3035],{"class":1297},"                \u003C\u002F",[862,3037,700],{"class":2380},[862,3039,1316],{"class":1297},[862,3041,3042,3045],{"class":864,"line":2162},[862,3043,3044],{"class":1297},"            )",[862,3046,2358],{"class":872},[862,3048,3049,3051,3053],{"class":864,"line":2171},[862,3050,1971],{"class":872},[862,3052,1732],{"class":876},[862,3054,1316],{"class":872},[862,3056,3057,3060],{"class":864,"line":2181},[862,3058,3059],{"class":1297},"    )",[862,3061,896],{"class":872},[862,3063,3065],{"class":864,"line":3064},59,[862,3066,2358],{"class":872},[1280,3068,3069,3079,3378],{"v-slot:other":858},[692,3070,3071,3072,1267,3075,3078],{},"Each runtime returns a class string. Apply the result however your framework binds classes. The nested ",[708,3073,3074],{},".select-chip-remove",[708,3076,3077],{},".select-option-check"," selectors are registered by the chip and option recipes:",[853,3080,3083],{"className":855,"code":3081,"filename":3082,"language":857,"meta":858,"style":858},"import { select, selectPanel, selectOption, selectChip } from \"virtual:styleframe\";\n\nconst triggerClasses = select({ color: \"neutral\", variant: \"solid\", size: \"md\" });\n\u002F\u002F → \"select _display:inline-flex _flex-wrap:wrap ...\"\n\nconst panelClasses = selectPanel({ color: \"neutral\", variant: \"solid\", size: \"md\" });\n\u002F\u002F → \"select-panel _overflow-y:auto _box-shadow:md ...\"\n\nconst optionClasses = selectOption({ color: \"neutral\", variant: \"solid\", size: \"md\" });\n\u002F\u002F → \"select-option _cursor:pointer ...\"\n\nconst chipClasses = selectChip({ color: \"neutral\", variant: \"soft\", size: \"sm\" });\n\u002F\u002F → \"select-chip _display:inline-flex ...\"\n","src\u002Fcomponents\u002Fselect.ts",[708,3084,3085,3121,3125,3180,3186,3190,3245,3250,3254,3309,3314,3318,3373],{"__ignoreMap":858},[862,3086,3087,3089,3091,3094,3096,3099,3101,3104,3106,3109,3111,3113,3115,3117,3119],{"class":864,"line":865},[862,3088,869],{"class":868},[862,3090,873],{"class":872},[862,3092,3093],{"class":876}," select",[862,3095,1187],{"class":872},[862,3097,3098],{"class":876}," selectPanel",[862,3100,1187],{"class":872},[862,3102,3103],{"class":876}," selectOption",[862,3105,1187],{"class":872},[862,3107,3108],{"class":876}," selectChip",[862,3110,880],{"class":872},[862,3112,883],{"class":868},[862,3114,1332],{"class":872},[862,3116,890],{"class":889},[862,3118,1309],{"class":872},[862,3120,896],{"class":872},[862,3122,3123],{"class":864,"line":899},[862,3124,984],{"emptyLinePlaceholder":223},[862,3126,3127,3129,3132,3134,3136,3138,3140,3142,3144,3146,3148,3150,3152,3154,3156,3158,3160,3162,3164,3166,3168,3170,3172,3174,3176,3178],{"class":864,"line":907},[862,3128,991],{"class":990},[862,3130,3131],{"class":876}," triggerClasses ",[862,3133,997],{"class":872},[862,3135,3093],{"class":1000},[862,3137,1623],{"class":876},[862,3139,1641],{"class":872},[862,3141,1644],{"class":1297},[862,3143,1652],{"class":872},[862,3145,1332],{"class":872},[862,3147,1415],{"class":889},[862,3149,1309],{"class":872},[862,3151,1187],{"class":872},[862,3153,1649],{"class":1297},[862,3155,1652],{"class":872},[862,3157,1332],{"class":872},[862,3159,1657],{"class":889},[862,3161,1309],{"class":872},[862,3163,1187],{"class":872},[862,3165,2661],{"class":1297},[862,3167,1652],{"class":872},[862,3169,1332],{"class":872},[862,3171,1431],{"class":889},[862,3173,1309],{"class":872},[862,3175,880],{"class":872},[862,3177,1669],{"class":876},[862,3179,896],{"class":872},[862,3181,3182],{"class":864,"line":916},[862,3183,3185],{"class":3184},"sHwdD","\u002F\u002F → \"select _display:inline-flex _flex-wrap:wrap ...\"\n",[862,3187,3188],{"class":864,"line":924},[862,3189,984],{"emptyLinePlaceholder":223},[862,3191,3192,3194,3197,3199,3201,3203,3205,3207,3209,3211,3213,3215,3217,3219,3221,3223,3225,3227,3229,3231,3233,3235,3237,3239,3241,3243],{"class":864,"line":932},[862,3193,991],{"class":990},[862,3195,3196],{"class":876}," panelClasses ",[862,3198,997],{"class":872},[862,3200,3098],{"class":1000},[862,3202,1623],{"class":876},[862,3204,1641],{"class":872},[862,3206,1644],{"class":1297},[862,3208,1652],{"class":872},[862,3210,1332],{"class":872},[862,3212,1415],{"class":889},[862,3214,1309],{"class":872},[862,3216,1187],{"class":872},[862,3218,1649],{"class":1297},[862,3220,1652],{"class":872},[862,3222,1332],{"class":872},[862,3224,1657],{"class":889},[862,3226,1309],{"class":872},[862,3228,1187],{"class":872},[862,3230,2661],{"class":1297},[862,3232,1652],{"class":872},[862,3234,1332],{"class":872},[862,3236,1431],{"class":889},[862,3238,1309],{"class":872},[862,3240,880],{"class":872},[862,3242,1669],{"class":876},[862,3244,896],{"class":872},[862,3246,3247],{"class":864,"line":940},[862,3248,3249],{"class":3184},"\u002F\u002F → \"select-panel _overflow-y:auto _box-shadow:md ...\"\n",[862,3251,3252],{"class":864,"line":948},[862,3253,984],{"emptyLinePlaceholder":223},[862,3255,3256,3258,3261,3263,3265,3267,3269,3271,3273,3275,3277,3279,3281,3283,3285,3287,3289,3291,3293,3295,3297,3299,3301,3303,3305,3307],{"class":864,"line":956},[862,3257,991],{"class":990},[862,3259,3260],{"class":876}," optionClasses ",[862,3262,997],{"class":872},[862,3264,3103],{"class":1000},[862,3266,1623],{"class":876},[862,3268,1641],{"class":872},[862,3270,1644],{"class":1297},[862,3272,1652],{"class":872},[862,3274,1332],{"class":872},[862,3276,1415],{"class":889},[862,3278,1309],{"class":872},[862,3280,1187],{"class":872},[862,3282,1649],{"class":1297},[862,3284,1652],{"class":872},[862,3286,1332],{"class":872},[862,3288,1657],{"class":889},[862,3290,1309],{"class":872},[862,3292,1187],{"class":872},[862,3294,2661],{"class":1297},[862,3296,1652],{"class":872},[862,3298,1332],{"class":872},[862,3300,1431],{"class":889},[862,3302,1309],{"class":872},[862,3304,880],{"class":872},[862,3306,1669],{"class":876},[862,3308,896],{"class":872},[862,3310,3311],{"class":864,"line":964},[862,3312,3313],{"class":3184},"\u002F\u002F → \"select-option _cursor:pointer ...\"\n",[862,3315,3316],{"class":864,"line":981},[862,3317,984],{"emptyLinePlaceholder":223},[862,3319,3320,3322,3325,3327,3329,3331,3333,3335,3337,3339,3341,3343,3345,3347,3349,3351,3353,3355,3357,3359,3361,3363,3365,3367,3369,3371],{"class":864,"line":987},[862,3321,991],{"class":990},[862,3323,3324],{"class":876}," chipClasses ",[862,3326,997],{"class":872},[862,3328,3108],{"class":1000},[862,3330,1623],{"class":876},[862,3332,1641],{"class":872},[862,3334,1644],{"class":1297},[862,3336,1652],{"class":872},[862,3338,1332],{"class":872},[862,3340,1415],{"class":889},[862,3342,1309],{"class":872},[862,3344,1187],{"class":872},[862,3346,1649],{"class":1297},[862,3348,1652],{"class":872},[862,3350,1332],{"class":872},[862,3352,2654],{"class":889},[862,3354,1309],{"class":872},[862,3356,1187],{"class":872},[862,3358,2661],{"class":1297},[862,3360,1652],{"class":872},[862,3362,1332],{"class":872},[862,3364,1531],{"class":889},[862,3366,1309],{"class":872},[862,3368,880],{"class":872},[862,3370,1669],{"class":876},[862,3372,896],{"class":872},[862,3374,3375],{"class":864,"line":1008},[862,3376,3377],{"class":3184},"\u002F\u002F → \"select-chip _display:inline-flex ...\"\n",[853,3379,3384],{"className":3380,"code":3381,"filename":3382,"language":3383,"meta":858,"style":858},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"select ...\" role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded=\"true\">\n    \u003Cspan class=\"select-chip ...\">Apple\u003Cbutton class=\"select-chip-remove\" aria-label=\"Remove\">×\u003C\u002Fbutton>\u003C\u002Fspan>\n    \u003Cspan class=\"select-chip ...\">Banana\u003Cbutton class=\"select-chip-remove\" aria-label=\"Remove\">×\u003C\u002Fbutton>\u003C\u002Fspan>\n    \u003Cspan class=\"select-arrow ...\" aria-hidden=\"true\">▾\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cul class=\"select-panel ...\" role=\"listbox\">\n    \u003Cli class=\"select-option ...\" role=\"option\" aria-selected=\"true\">\n        \u003Cspan class=\"select-option-check\" aria-hidden=\"true\">✓\u003C\u002Fspan>Apple\n    \u003C\u002Fli>\n    \u003Cli class=\"select-option ...\" role=\"option\">Cherry\u003C\u002Fli>\n\u003C\u002Ful>\n","src\u002Fcomponents\u002Fselect.html","html",[708,3385,3386,3436,3497,3556,3593,3601,3630,3670,3710,3718,3755],{"__ignoreMap":858},[862,3387,3388,3390,3392,3394,3396,3398,3401,3403,3405,3407,3409,3411,3413,3415,3417,3419,3421,3423,3426,3428,3430,3432,3434],{"class":864,"line":865},[862,3389,1294],{"class":872},[862,3391,1732],{"class":1297},[862,3393,1881],{"class":990},[862,3395,997],{"class":872},[862,3397,1309],{"class":872},[862,3399,3400],{"class":889},"select ...",[862,3402,1309],{"class":872},[862,3404,1745],{"class":990},[862,3406,997],{"class":872},[862,3408,1309],{"class":872},[862,3410,1752],{"class":889},[862,3412,1309],{"class":872},[862,3414,1757],{"class":990},[862,3416,997],{"class":872},[862,3418,1309],{"class":872},[862,3420,726],{"class":889},[862,3422,1309],{"class":872},[862,3424,3425],{"class":990}," aria-expanded",[862,3427,997],{"class":872},[862,3429,1309],{"class":872},[862,3431,1952],{"class":889},[862,3433,1309],{"class":872},[862,3435,1316],{"class":872},[862,3437,3438,3440,3442,3444,3446,3448,3451,3453,3455,3458,3460,3462,3464,3466,3468,3470,3472,3474,3476,3478,3480,3482,3484,3486,3488,3490,3493,3495],{"class":864,"line":899},[862,3439,1729],{"class":872},[862,3441,862],{"class":1297},[862,3443,1881],{"class":990},[862,3445,997],{"class":872},[862,3447,1309],{"class":872},[862,3449,3450],{"class":889},"select-chip ...",[862,3452,1309],{"class":872},[862,3454,1905],{"class":872},[862,3456,3457],{"class":876},"Apple",[862,3459,1294],{"class":872},[862,3461,1867],{"class":1297},[862,3463,1881],{"class":990},[862,3465,997],{"class":872},[862,3467,1309],{"class":872},[862,3469,1888],{"class":889},[862,3471,1309],{"class":872},[862,3473,1893],{"class":990},[862,3475,997],{"class":872},[862,3477,1309],{"class":872},[862,3479,1900],{"class":889},[862,3481,1309],{"class":872},[862,3483,1905],{"class":872},[862,3485,1908],{"class":876},[862,3487,1705],{"class":872},[862,3489,1867],{"class":1297},[862,3491,3492],{"class":872},">\u003C\u002F",[862,3494,862],{"class":1297},[862,3496,1316],{"class":872},[862,3498,3499,3501,3503,3505,3507,3509,3511,3513,3515,3518,3520,3522,3524,3526,3528,3530,3532,3534,3536,3538,3540,3542,3544,3546,3548,3550,3552,3554],{"class":864,"line":907},[862,3500,1729],{"class":872},[862,3502,862],{"class":1297},[862,3504,1881],{"class":990},[862,3506,997],{"class":872},[862,3508,1309],{"class":872},[862,3510,3450],{"class":889},[862,3512,1309],{"class":872},[862,3514,1905],{"class":872},[862,3516,3517],{"class":876},"Banana",[862,3519,1294],{"class":872},[862,3521,1867],{"class":1297},[862,3523,1881],{"class":990},[862,3525,997],{"class":872},[862,3527,1309],{"class":872},[862,3529,1888],{"class":889},[862,3531,1309],{"class":872},[862,3533,1893],{"class":990},[862,3535,997],{"class":872},[862,3537,1309],{"class":872},[862,3539,1900],{"class":889},[862,3541,1309],{"class":872},[862,3543,1905],{"class":872},[862,3545,1908],{"class":876},[862,3547,1705],{"class":872},[862,3549,1867],{"class":1297},[862,3551,3492],{"class":872},[862,3553,862],{"class":1297},[862,3555,1316],{"class":872},[862,3557,3558,3560,3562,3564,3566,3568,3571,3573,3575,3577,3579,3581,3583,3585,3587,3589,3591],{"class":864,"line":916},[862,3559,1729],{"class":872},[862,3561,862],{"class":1297},[862,3563,1881],{"class":990},[862,3565,997],{"class":872},[862,3567,1309],{"class":872},[862,3569,3570],{"class":889},"select-arrow ...",[862,3572,1309],{"class":872},[862,3574,1945],{"class":990},[862,3576,997],{"class":872},[862,3578,1309],{"class":872},[862,3580,1952],{"class":889},[862,3582,1309],{"class":872},[862,3584,1905],{"class":872},[862,3586,1959],{"class":876},[862,3588,1705],{"class":872},[862,3590,862],{"class":1297},[862,3592,1316],{"class":872},[862,3594,3595,3597,3599],{"class":864,"line":924},[862,3596,1705],{"class":872},[862,3598,1732],{"class":1297},[862,3600,1316],{"class":872},[862,3602,3603,3605,3607,3609,3611,3613,3616,3618,3620,3622,3624,3626,3628],{"class":864,"line":932},[862,3604,1294],{"class":872},[862,3606,700],{"class":1297},[862,3608,1881],{"class":990},[862,3610,997],{"class":872},[862,3612,1309],{"class":872},[862,3614,3615],{"class":889},"select-panel ...",[862,3617,1309],{"class":872},[862,3619,1745],{"class":990},[862,3621,997],{"class":872},[862,3623,1309],{"class":872},[862,3625,726],{"class":889},[862,3627,1309],{"class":872},[862,3629,1316],{"class":872},[862,3631,3632,3634,3636,3638,3640,3642,3645,3647,3649,3651,3653,3655,3657,3660,3662,3664,3666,3668],{"class":864,"line":940},[862,3633,1729],{"class":872},[862,3635,703],{"class":1297},[862,3637,1881],{"class":990},[862,3639,997],{"class":872},[862,3641,1309],{"class":872},[862,3643,3644],{"class":889},"select-option ...",[862,3646,1309],{"class":872},[862,3648,1745],{"class":990},[862,3650,997],{"class":872},[862,3652,1309],{"class":872},[862,3654,2055],{"class":889},[862,3656,1309],{"class":872},[862,3658,3659],{"class":990}," aria-selected",[862,3661,997],{"class":872},[862,3663,1309],{"class":872},[862,3665,1952],{"class":889},[862,3667,1309],{"class":872},[862,3669,1316],{"class":872},[862,3671,3672,3674,3676,3678,3680,3682,3684,3686,3688,3690,3692,3694,3696,3698,3701,3703,3705,3707],{"class":864,"line":948},[862,3673,1740],{"class":872},[862,3675,862],{"class":1297},[862,3677,1881],{"class":990},[862,3679,997],{"class":872},[862,3681,1309],{"class":872},[862,3683,2121],{"class":889},[862,3685,1309],{"class":872},[862,3687,1945],{"class":990},[862,3689,997],{"class":872},[862,3691,1309],{"class":872},[862,3693,1952],{"class":889},[862,3695,1309],{"class":872},[862,3697,1905],{"class":872},[862,3699,3700],{"class":876},"✓",[862,3702,1705],{"class":872},[862,3704,862],{"class":1297},[862,3706,1905],{"class":872},[862,3708,3709],{"class":876},"Apple\n",[862,3711,3712,3714,3716],{"class":864,"line":956},[862,3713,2174],{"class":872},[862,3715,703],{"class":1297},[862,3717,1316],{"class":872},[862,3719,3720,3722,3724,3726,3728,3730,3732,3734,3736,3738,3740,3742,3744,3746,3749,3751,3753],{"class":864,"line":964},[862,3721,1729],{"class":872},[862,3723,703],{"class":1297},[862,3725,1881],{"class":990},[862,3727,997],{"class":872},[862,3729,1309],{"class":872},[862,3731,3644],{"class":889},[862,3733,1309],{"class":872},[862,3735,1745],{"class":990},[862,3737,997],{"class":872},[862,3739,1309],{"class":872},[862,3741,2055],{"class":889},[862,3743,1309],{"class":872},[862,3745,1905],{"class":872},[862,3747,3748],{"class":876},"Cherry",[862,3750,1705],{"class":872},[862,3752,703],{"class":1297},[862,3754,1316],{"class":872},[862,3756,3757,3759,3761],{"class":864,"line":981},[862,3758,1705],{"class":872},[862,3760,700],{"class":1297},[862,3762,1316],{"class":872},[837,3764,3766],{"id":3765},"see-it-in-action","See it in action",[3768,3769],"story-preview",{"story":3770,":panel":1952},"theme-recipes-forms-select--default",[688,3772,195],{"id":3773},"colors",[692,3775,3776,3777,3779,3780,3782,3783,3785],{},"The Select recipe includes 3 color variants: ",[708,3778,1497],{},", ",[708,3781,1507],{},", and ",[708,3784,1415],{},". Like the Input and Card recipes, Select uses neutral-spectrum colors designed for content surfaces rather than status communication — the control's color reflects its surface, not a state. Every part shares the same color axis so the trigger, panel, options, and chips read as one control.",[692,3787,694,3788,3790],{},[708,3789,1415],{}," color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose forms.",[3768,3792],{"story":3793,":panel":1952},"theme-recipes-forms-select--neutral",[3795,3796,3798],"h3",{"id":3797},"color-reference","Color Reference",[3768,3800],{"story":3801,":height":3802},"theme-recipes-forms-select--all-variants","420",[3804,3805,3806,3822],"table",{},[3807,3808,3809],"thead",{},[3810,3811,3812,3816,3819],"tr",{},[3813,3814,3815],"th",{},"Color",[3813,3817,3818],{},"Token",[3813,3820,3821],{},"Use Case",[3823,3824,3825,3844,3858],"tbody",{},[3810,3826,3827,3832,3841],{},[3828,3829,3830],"td",{},[708,3831,1497],{},[3828,3833,3834,3837,3838],{},[708,3835,3836],{},"@color.white"," \u002F ",[708,3839,3840],{},"@color.gray-*",[3828,3842,3843],{},"Light surfaces, stays light in dark mode",[3810,3845,3846,3850,3855],{},[3828,3847,3848],{},[708,3849,1507],{},[3828,3851,3852],{},[708,3853,3854],{},"@color.gray-900",[3828,3856,3857],{},"Dark surfaces, stays dark in light mode",[3810,3859,3860,3864,3867],{},[3828,3861,3862],{},[708,3863,1415],{},[3828,3865,3866],{},"Adaptive (light ↔ dark)",[3828,3868,3869],{},"Default color, adapts to the current color scheme",[3871,3872,3873,3876,3877,3879],"tip",{},[696,3874,3875],{},"Pro tip:"," Use ",[708,3878,1415],{}," as your default select color. It adapts to the user's color scheme automatically, so you don't need to manage light and dark variants separately.",[688,3881,3883],{"id":3882},"variants","Variants",[692,3885,3886,3887,3890],{},"Select uses ",[696,3888,3889],{},"two visual-style vocabularies",", each faithful to the recipe it is modeled on. Pass the right value to each part:",[3804,3892,3893,3905],{},[3807,3894,3895],{},[3810,3896,3897,3900,3902],{},[3813,3898,3899],{},"Parts",[3813,3901,3883],{},[3813,3903,3904],{},"Modeled on",[3823,3906,3907,3928,3952],{},[3810,3908,3909,3915,3924],{},[3828,3910,3911,3912,1669],{},"Trigger (",[708,3913,3914],{},"useSelectRecipe",[3828,3916,3917,3779,3919,3779,3921],{},[708,3918,1657],{},[708,3920,2654],{},[708,3922,3923],{},"ghost",[3828,3925,3926],{},[772,3927,452],{"href":453},[3810,3929,3930,3939,3948],{},[3828,3931,3932,3933,3779,3936,1669],{},"Panel + Option (",[708,3934,3935],{},"useSelectPanelRecipe",[708,3937,3938],{},"useSelectOptionRecipe",[3828,3940,3941,3779,3943,3779,3945],{},[708,3942,1657],{},[708,3944,2654],{},[708,3946,3947],{},"subtle",[3828,3949,3950],{},[772,3951,503],{"href":504},[3810,3953,3954,3960,3971],{},[3828,3955,3956,3957,1669],{},"Chip (",[708,3958,3959],{},"useSelectChipRecipe",[3828,3961,3962,3779,3964,3779,3967,3779,3969],{},[708,3963,1657],{},[708,3965,3966],{},"outline",[708,3968,2654],{},[708,3970,3947],{},[3828,3972,3973],{},[772,3974,404],{"href":405},[692,3976,3977,3978,3980,3981,2599],{},"The stories below vary the ",[696,3979,1787],{}," style. Each value is combined with the selected color through ",[772,3982,3984],{"href":3983},"\u002Fdocs\u002Fapi\u002Frecipes#compound-variants","compound variants",[3795,3986,3987],{"id":1657},"Solid",[692,3989,3990,3991,2599],{},"Opaque surface with a visible border — the standard bordered control. Reveals a primary-colored focus ring on ",[708,3992,714],{},[3768,3994],{"story":3995,":panel":1952},"theme-recipes-forms-select--solid",[3795,3997,3998],{"id":2654},"Soft",[692,4000,4001],{},"Tinted gray background with a matching border — a gentler, lower-contrast control that blends into dense forms.",[3768,4003],{"story":4004,":panel":1952},"theme-recipes-forms-select--soft",[3795,4006,4007],{"id":3923},"Ghost",[692,4009,4010,4011,2599],{},"No background and no border until interaction — the control shows only the focus ring, ideal for inline and toolbar selects. On the panel and options, the matching value is ",[708,4012,3947],{},[3768,4014],{"story":4015,":panel":1952},"theme-recipes-forms-select--ghost",[688,4017,4019],{"id":4018},"sizes","Sizes",[692,4021,4022,4023,4025,4026,4028,4029,4032],{},"Three size variants from ",[708,4024,1531],{}," to ",[708,4027,1548],{}," control font size, padding, and border radius. Pass the same ",[708,4030,4031],{},"size"," to every part — the trigger, panel, options, chips, and chevron all scale together.",[3768,4034],{"story":4035,":height":3802},"theme-recipes-forms-select--all-sizes",[3795,4037,4039],{"id":4038},"size-reference","Size Reference",[3804,4041,4042,4058],{},[3807,4043,4044],{},[3810,4045,4046,4049,4052,4055],{},[3813,4047,4048],{},"Size",[3813,4050,4051],{},"Trigger Font",[3813,4053,4054],{},"Trigger Padding (V \u002F H)",[3813,4056,4057],{},"Border Radius",[3823,4059,4060,4084,4108],{},[3810,4061,4062,4066,4071,4079],{},[3828,4063,4064],{},[708,4065,1531],{},[3828,4067,4068],{},[708,4069,4070],{},"@font-size.xs",[3828,4072,4073,3837,4076],{},[708,4074,4075],{},"@0.375",[708,4077,4078],{},"@0.625",[3828,4080,4081],{},[708,4082,4083],{},"@border-radius.sm",[3810,4085,4086,4090,4095,4103],{},[3828,4087,4088],{},[708,4089,1431],{},[3828,4091,4092],{},[708,4093,4094],{},"@font-size.sm",[3828,4096,4097,3837,4100],{},[708,4098,4099],{},"@0.5",[708,4101,4102],{},"@0.75",[3828,4104,4105],{},[708,4106,4107],{},"@border-radius.md",[3810,4109,4110,4114,4119,4126],{},[3828,4111,4112],{},[708,4113,1548],{},[3828,4115,4116],{},[708,4117,4118],{},"@font-size.md",[3828,4120,4121,3837,4123],{},[708,4122,4078],{},[708,4124,4125],{},"@0.875",[3828,4127,4128],{},[708,4129,4107],{},[688,4131,4133],{"id":4132},"single-selection","Single selection",[692,4135,4136,4137,4140,4141,4145,4146,4149],{},"For a single-value control, render the chosen value directly in the trigger instead of chips — optionally with a leading icon via the shared ",[708,4138,4139],{},".select-icon"," slot (see ",[772,4142,4144],{"href":4143},"#icons","Icons","). The active option carries ",[708,4147,4148],{},"aria-selected=\"true\"",", and the trigger reflects the current value. The same recipes power single- and multi-select; the trigger simply renders one value instead of a row of chips. A country selector is the canonical example:",[3768,4151],{"story":3770,":panel":1952},[853,4153,4155],{"className":3380,"code":4154,"language":3383,"meta":858,"style":858},"\u003Cdiv class=\"select(...)\" role=\"combobox\" aria-expanded=\"true\">\n    \u003Cspan class=\"select-icon\">🇺🇸\u003C\u002Fspan>\n    \u003Cspan class=\"select-value\">United States\u003C\u002Fspan>\n    \u003Cspan class=\"selectArrow(...)\">▾\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[708,4156,4157,4196,4224,4252,4279],{"__ignoreMap":858},[862,4158,4159,4161,4163,4165,4167,4169,4172,4174,4176,4178,4180,4182,4184,4186,4188,4190,4192,4194],{"class":864,"line":865},[862,4160,1294],{"class":872},[862,4162,1732],{"class":1297},[862,4164,1881],{"class":990},[862,4166,997],{"class":872},[862,4168,1309],{"class":872},[862,4170,4171],{"class":889},"select(...)",[862,4173,1309],{"class":872},[862,4175,1745],{"class":990},[862,4177,997],{"class":872},[862,4179,1309],{"class":872},[862,4181,1752],{"class":889},[862,4183,1309],{"class":872},[862,4185,3425],{"class":990},[862,4187,997],{"class":872},[862,4189,1309],{"class":872},[862,4191,1952],{"class":889},[862,4193,1309],{"class":872},[862,4195,1316],{"class":872},[862,4197,4198,4200,4202,4204,4206,4208,4211,4213,4215,4218,4220,4222],{"class":864,"line":899},[862,4199,1729],{"class":872},[862,4201,862],{"class":1297},[862,4203,1881],{"class":990},[862,4205,997],{"class":872},[862,4207,1309],{"class":872},[862,4209,4210],{"class":889},"select-icon",[862,4212,1309],{"class":872},[862,4214,1905],{"class":872},[862,4216,4217],{"class":876},"🇺🇸",[862,4219,1705],{"class":872},[862,4221,862],{"class":1297},[862,4223,1316],{"class":872},[862,4225,4226,4228,4230,4232,4234,4236,4239,4241,4243,4246,4248,4250],{"class":864,"line":907},[862,4227,1729],{"class":872},[862,4229,862],{"class":1297},[862,4231,1881],{"class":990},[862,4233,997],{"class":872},[862,4235,1309],{"class":872},[862,4237,4238],{"class":889},"select-value",[862,4240,1309],{"class":872},[862,4242,1905],{"class":872},[862,4244,4245],{"class":876},"United States",[862,4247,1705],{"class":872},[862,4249,862],{"class":1297},[862,4251,1316],{"class":872},[862,4253,4254,4256,4258,4260,4262,4264,4267,4269,4271,4273,4275,4277],{"class":864,"line":916},[862,4255,1729],{"class":872},[862,4257,862],{"class":1297},[862,4259,1881],{"class":990},[862,4261,997],{"class":872},[862,4263,1309],{"class":872},[862,4265,4266],{"class":889},"selectArrow(...)",[862,4268,1309],{"class":872},[862,4270,1905],{"class":872},[862,4272,1959],{"class":876},[862,4274,1705],{"class":872},[862,4276,862],{"class":1297},[862,4278,1316],{"class":872},[862,4280,4281,4283,4285],{"class":864,"line":924},[862,4282,1705],{"class":872},[862,4284,1732],{"class":1297},[862,4286,1316],{"class":872},[688,4288,4290],{"id":4289},"multi-selection","Multi-selection",[692,4292,4293,4294,4297,4298,4300],{},"The headline feature: render each selected value as a dismissable ",[696,4295,4296],{},"chip"," inside the trigger. Chips are modeled on the ",[772,4299,404],{"href":405}," recipe but scoped to the container palette so they match the control surface. The trigger wraps its contents, so chips flow onto multiple rows as the selection grows, and the chevron stays pinned to the trailing edge.",[3768,4302],{"story":4303,":panel":1952},"theme-recipes-forms-select--multiselect",[692,4305,4306,4307,4309,4310,4313,4314,4317],{},"Each chip registers a nested ",[708,4308,3074],{}," button that inherits the chip's text color and is sized in ",[708,4311,4312],{},"em"," so it scales with the chip. Supply the dismiss glyph (an ",[708,4315,4316],{},"×"," or an icon) and wire the click handler to remove the value:",[853,4319,4321],{"className":3380,"code":4320,"language":3383,"meta":858,"style":858},"\u003Cspan class=\"select-chip ...\">\n    Engineering\n    \u003Cbutton type=\"button\" class=\"select-chip-remove\" aria-label=\"Remove Engineering\">×\u003C\u002Fbutton>\n\u003C\u002Fspan>\n",[708,4322,4323,4341,4346,4393],{"__ignoreMap":858},[862,4324,4325,4327,4329,4331,4333,4335,4337,4339],{"class":864,"line":865},[862,4326,1294],{"class":872},[862,4328,862],{"class":1297},[862,4330,1881],{"class":990},[862,4332,997],{"class":872},[862,4334,1309],{"class":872},[862,4336,3450],{"class":889},[862,4338,1309],{"class":872},[862,4340,1316],{"class":872},[862,4342,4343],{"class":864,"line":899},[862,4344,4345],{"class":876},"    Engineering\n",[862,4347,4348,4350,4352,4354,4356,4358,4360,4362,4364,4366,4368,4370,4372,4374,4376,4378,4381,4383,4385,4387,4389,4391],{"class":864,"line":907},[862,4349,1729],{"class":872},[862,4351,1867],{"class":1297},[862,4353,1870],{"class":990},[862,4355,997],{"class":872},[862,4357,1309],{"class":872},[862,4359,1867],{"class":889},[862,4361,1309],{"class":872},[862,4363,1881],{"class":990},[862,4365,997],{"class":872},[862,4367,1309],{"class":872},[862,4369,1888],{"class":889},[862,4371,1309],{"class":872},[862,4373,1893],{"class":990},[862,4375,997],{"class":872},[862,4377,1309],{"class":872},[862,4379,4380],{"class":889},"Remove Engineering",[862,4382,1309],{"class":872},[862,4384,1905],{"class":872},[862,4386,1908],{"class":876},[862,4388,1705],{"class":872},[862,4390,1867],{"class":1297},[862,4392,1316],{"class":872},[862,4394,4395,4397,4399],{"class":864,"line":916},[862,4396,1705],{"class":872},[862,4398,862],{"class":1297},[862,4400,1316],{"class":872},[3871,4402,4403,4405,4406,4409,4410,4413],{},[696,4404,3875],{}," Give each remove button a descriptive ",[708,4407,4408],{},"aria-label"," that includes the value (for example, ",[708,4411,4412],{},"\"Remove Engineering\"",") so screen-reader users know exactly which selection they are dismissing.",[688,4415,4144],{"id":4416},"icons",[692,4418,4419,4420,4422,4423,4426,4427,4429,4430,3779,4433,4436],{},"A shared ",[708,4421,4139],{}," slot adds a leading icon or media element — a country flag, an avatar, a status dot — to the trigger's selected value, to options, and to chips. It is a small flex box with ",[708,4424,4425],{},"flex-shrink: 0"," so a long label never squashes it, sized in ",[708,4428,4312],{}," so it scales with the surrounding font. Drop any ",[708,4431,4432],{},"\u003Cimg>",[708,4434,4435],{},"\u003Csvg>",", or emoji inside.",[3768,4438],{"story":3770,":panel":1952},[853,4440,4442],{"className":3380,"code":4441,"language":3383,"meta":858,"style":858},"\u003C!-- In an option: leading icon, trailing selected check -->\n\u003Cli class=\"selectOption(...)\" role=\"option\" aria-selected=\"true\">\n    \u003Cspan class=\"select-icon\">🇺🇸\u003C\u002Fspan>\n    United States\n    \u003Cspan class=\"select-option-check\">✓\u003C\u002Fspan>\n\u003C\u002Fli>\n\n\u003C!-- In the trigger's selected value -->\n\u003Cdiv class=\"select(...)\" role=\"combobox\">\n    \u003Cspan class=\"select-icon\">🇺🇸\u003C\u002Fspan>\n    \u003Cspan class=\"select-value\">United States\u003C\u002Fspan>\n    \u003Cspan class=\"selectArrow(...)\">▾\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[708,4443,4444,4449,4488,4514,4519,4545,4553,4557,4562,4590,4616,4642,4668],{"__ignoreMap":858},[862,4445,4446],{"class":864,"line":865},[862,4447,4448],{"class":3184},"\u003C!-- In an option: leading icon, trailing selected check -->\n",[862,4450,4451,4453,4455,4457,4459,4461,4464,4466,4468,4470,4472,4474,4476,4478,4480,4482,4484,4486],{"class":864,"line":899},[862,4452,1294],{"class":872},[862,4454,703],{"class":1297},[862,4456,1881],{"class":990},[862,4458,997],{"class":872},[862,4460,1309],{"class":872},[862,4462,4463],{"class":889},"selectOption(...)",[862,4465,1309],{"class":872},[862,4467,1745],{"class":990},[862,4469,997],{"class":872},[862,4471,1309],{"class":872},[862,4473,2055],{"class":889},[862,4475,1309],{"class":872},[862,4477,3659],{"class":990},[862,4479,997],{"class":872},[862,4481,1309],{"class":872},[862,4483,1952],{"class":889},[862,4485,1309],{"class":872},[862,4487,1316],{"class":872},[862,4489,4490,4492,4494,4496,4498,4500,4502,4504,4506,4508,4510,4512],{"class":864,"line":907},[862,4491,1729],{"class":872},[862,4493,862],{"class":1297},[862,4495,1881],{"class":990},[862,4497,997],{"class":872},[862,4499,1309],{"class":872},[862,4501,4210],{"class":889},[862,4503,1309],{"class":872},[862,4505,1905],{"class":872},[862,4507,4217],{"class":876},[862,4509,1705],{"class":872},[862,4511,862],{"class":1297},[862,4513,1316],{"class":872},[862,4515,4516],{"class":864,"line":916},[862,4517,4518],{"class":876},"    United States\n",[862,4520,4521,4523,4525,4527,4529,4531,4533,4535,4537,4539,4541,4543],{"class":864,"line":924},[862,4522,1729],{"class":872},[862,4524,862],{"class":1297},[862,4526,1881],{"class":990},[862,4528,997],{"class":872},[862,4530,1309],{"class":872},[862,4532,2121],{"class":889},[862,4534,1309],{"class":872},[862,4536,1905],{"class":872},[862,4538,3700],{"class":876},[862,4540,1705],{"class":872},[862,4542,862],{"class":1297},[862,4544,1316],{"class":872},[862,4546,4547,4549,4551],{"class":864,"line":932},[862,4548,1705],{"class":872},[862,4550,703],{"class":1297},[862,4552,1316],{"class":872},[862,4554,4555],{"class":864,"line":940},[862,4556,984],{"emptyLinePlaceholder":223},[862,4558,4559],{"class":864,"line":948},[862,4560,4561],{"class":3184},"\u003C!-- In the trigger's selected value -->\n",[862,4563,4564,4566,4568,4570,4572,4574,4576,4578,4580,4582,4584,4586,4588],{"class":864,"line":956},[862,4565,1294],{"class":872},[862,4567,1732],{"class":1297},[862,4569,1881],{"class":990},[862,4571,997],{"class":872},[862,4573,1309],{"class":872},[862,4575,4171],{"class":889},[862,4577,1309],{"class":872},[862,4579,1745],{"class":990},[862,4581,997],{"class":872},[862,4583,1309],{"class":872},[862,4585,1752],{"class":889},[862,4587,1309],{"class":872},[862,4589,1316],{"class":872},[862,4591,4592,4594,4596,4598,4600,4602,4604,4606,4608,4610,4612,4614],{"class":864,"line":964},[862,4593,1729],{"class":872},[862,4595,862],{"class":1297},[862,4597,1881],{"class":990},[862,4599,997],{"class":872},[862,4601,1309],{"class":872},[862,4603,4210],{"class":889},[862,4605,1309],{"class":872},[862,4607,1905],{"class":872},[862,4609,4217],{"class":876},[862,4611,1705],{"class":872},[862,4613,862],{"class":1297},[862,4615,1316],{"class":872},[862,4617,4618,4620,4622,4624,4626,4628,4630,4632,4634,4636,4638,4640],{"class":864,"line":981},[862,4619,1729],{"class":872},[862,4621,862],{"class":1297},[862,4623,1881],{"class":990},[862,4625,997],{"class":872},[862,4627,1309],{"class":872},[862,4629,4238],{"class":889},[862,4631,1309],{"class":872},[862,4633,1905],{"class":872},[862,4635,4245],{"class":876},[862,4637,1705],{"class":872},[862,4639,862],{"class":1297},[862,4641,1316],{"class":872},[862,4643,4644,4646,4648,4650,4652,4654,4656,4658,4660,4662,4664,4666],{"class":864,"line":987},[862,4645,1729],{"class":872},[862,4647,862],{"class":1297},[862,4649,1881],{"class":990},[862,4651,997],{"class":872},[862,4653,1309],{"class":872},[862,4655,4266],{"class":889},[862,4657,1309],{"class":872},[862,4659,1905],{"class":872},[862,4661,1959],{"class":876},[862,4663,1705],{"class":872},[862,4665,862],{"class":1297},[862,4667,1316],{"class":872},[862,4669,4670,4672,4674],{"class":864,"line":1008},[862,4671,1705],{"class":872},[862,4673,1732],{"class":1297},[862,4675,1316],{"class":872},[4677,4678,4679,4682,4683,4685,4686,4689],"note",{},[696,4680,4681],{},"Good to know:"," ",[708,4684,4139],{}," is a styling slot, not a recipe — it has no color, variant, or size props. Apply the class directly and size the icon content with your own CSS if you need something other than the ",[708,4687,4688],{},"1.25em"," default.",[688,4691,4692],{"id":2864},"Options",[692,4694,4695,4696,4699],{},"Options live inside the panel as ",[708,4697,4698],{},"\u003Cli role=\"option\">"," rows. Their interactive states are driven by ARIA attributes rather than recipe axes, so a single source of truth controls both styling and semantics.",[3795,4701,4702],{"id":2918},"Selected",[692,4704,4705,4706,4708,4709,4711,4712,4715,4716,2599],{},"Set ",[708,4707,4148],{}," to apply a subtle tinted background, a medium font weight, and reveal the trailing ",[708,4710,3077],{}," indicator (pinned to the option's far edge via ",[708,4713,4714],{},"margin-left: auto","). The check slot is always present in the markup but hidden until the option is selected, so rows stay aligned. The leading edge is free for an optional ",[772,4717,4718],{"href":4143},[708,4719,4139],{},[3795,4721,4723],{"id":4722},"disabled","Disabled",[692,4725,4705,4726,4729,4730,4732,4733,4736],{},[708,4727,4728],{},"aria-disabled=\"true\""," (or the native ",[708,4731,4722],{}," attribute on a button-based option) to dim the row, switch the cursor to ",[708,4734,4735],{},"not-allowed",", and block pointer interaction.",[4677,4738,4739,4741,4742,4744,4745,4747],{},[696,4740,4681],{}," Because selected and disabled are attribute-driven, you set them once on the element and both the visuals and assistive-technology semantics stay in sync — no separate ",[708,4743,2918],{}," or ",[708,4746,4722],{}," prop to keep aligned.",[688,4749,4751],{"id":4750},"anatomy","Anatomy",[692,4753,4754],{},"The Select is composed of seven independent recipes. The trigger holds the value chips and chevron; the panel holds the options, labels, and separators:",[3804,4756,4757,4770],{},[3807,4758,4759],{},[3810,4760,4761,4764,4767],{},[3813,4762,4763],{},"Part",[3813,4765,4766],{},"Recipe",[3813,4768,4769],{},"Role",[3823,4771,4772,4798,4818,4844,4863,4886,4903],{},[3810,4773,4774,4779,4783],{},[3828,4775,4776],{},[696,4777,4778],{},"Trigger",[3828,4780,4781],{},[708,4782,710],{},[3828,4784,694,4785,4788,4789,3837,4792,3837,4794,4797],{},[708,4786,4787],{},".select"," control — owns the visual field, wraps value chips, and exposes ",[708,4790,4791],{},"invalid",[708,4793,4722],{},[708,4795,4796],{},"readonly"," states",[3810,4799,4800,4805,4809],{},[3828,4801,4802],{},[696,4803,4804],{},"Panel",[3828,4806,4807],{},[708,4808,722],{},[3828,4810,694,4811,4814,4815,4817],{},[708,4812,4813],{},".select-panel"," floating ",[708,4816,726],{}," — scrollable, elevated surface for the options",[3810,4819,4820,4825,4829],{},[3828,4821,4822],{},[696,4823,4824],{},"Option",[3828,4826,4827],{},[708,4828,734],{},[3828,4830,4831,4832,4835,4836,4838,4839,4841,4842],{},"A ",[708,4833,4834],{},".select-option"," row — hover \u002F focus \u002F active plus ",[708,4837,1266],{}," (trailing check) and ",[708,4840,1270],{}," states; an optional leading ",[708,4843,4139],{},[3810,4845,4846,4850,4854],{},[3828,4847,4848],{},[696,4849,412],{},[3828,4851,4852],{},[708,4853,742],{},[3828,4855,4831,4856,4859,4860,4862],{},[708,4857,4858],{},".select-chip"," dismissable tag for each selected value, with a nested ",[708,4861,3074],{}," button",[3810,4864,4865,4870,4874],{},[3828,4866,4867],{},[696,4868,4869],{},"Arrow",[3828,4871,4872],{},[708,4873,750],{},[3828,4875,694,4876,4879,4880,4883,4884],{},[708,4877,4878],{},".select-arrow"," chevron — inherits ",[708,4881,4882],{},"currentColor",", rotates when the trigger is ",[708,4885,1274],{},[3810,4887,4888,4893,4897],{},[3828,4889,4890],{},[696,4891,4892],{},"Label",[3828,4894,4895],{},[708,4896,758],{},[3828,4898,4831,4899,4902],{},[708,4900,4901],{},".select-label"," uppercase heading for grouping options",[3810,4904,4905,4910,4914],{},[3828,4906,4907],{},[696,4908,4909],{},"Separator",[3828,4911,4912],{},[708,4913,766],{},[3828,4915,4831,4916,4919],{},[708,4917,4918],{},".select-separator"," rule for dividing option groups",[853,4921,4923],{"className":3380,"code":4922,"language":3383,"meta":858,"style":858},"\u003C!-- Trigger with value chips and chevron -->\n\u003Cdiv class=\"select(...)\" role=\"combobox\" aria-expanded=\"true\">\n    \u003Cspan class=\"selectChip(...)\">Apple\u003Cbutton class=\"select-chip-remove\">×\u003C\u002Fbutton>\u003C\u002Fspan>\n    \u003Cspan class=\"selectArrow(...)\">▾\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\n\u003C!-- Panel with grouped, selectable options -->\n\u003Cul class=\"selectPanel(...)\" role=\"listbox\">\n    \u003Cli class=\"selectLabel(...)\" role=\"presentation\">Fruits\u003C\u002Fli>\n    \u003Cli class=\"selectOption(...)\" role=\"option\" aria-selected=\"true\">\n        \u003Cspan class=\"select-icon\">🍎\u003C\u002Fspan>Apple\u003Cspan class=\"select-option-check\">✓\u003C\u002Fspan>\n    \u003C\u002Fli>\n    \u003Cli class=\"selectSeparator(...)\" role=\"separator\">\u003C\u002Fli>\n    \u003Cli class=\"selectOption(...)\" role=\"option\" aria-disabled=\"true\">Durian\u003C\u002Fli>\n\u003C\u002Ful>\n",[708,4924,4925,4930,4968,5017,5043,5051,5055,5060,5089,5128,5166,5219,5227,5261,5309],{"__ignoreMap":858},[862,4926,4927],{"class":864,"line":865},[862,4928,4929],{"class":3184},"\u003C!-- Trigger with value chips and chevron -->\n",[862,4931,4932,4934,4936,4938,4940,4942,4944,4946,4948,4950,4952,4954,4956,4958,4960,4962,4964,4966],{"class":864,"line":899},[862,4933,1294],{"class":872},[862,4935,1732],{"class":1297},[862,4937,1881],{"class":990},[862,4939,997],{"class":872},[862,4941,1309],{"class":872},[862,4943,4171],{"class":889},[862,4945,1309],{"class":872},[862,4947,1745],{"class":990},[862,4949,997],{"class":872},[862,4951,1309],{"class":872},[862,4953,1752],{"class":889},[862,4955,1309],{"class":872},[862,4957,3425],{"class":990},[862,4959,997],{"class":872},[862,4961,1309],{"class":872},[862,4963,1952],{"class":889},[862,4965,1309],{"class":872},[862,4967,1316],{"class":872},[862,4969,4970,4972,4974,4976,4978,4980,4983,4985,4987,4989,4991,4993,4995,4997,4999,5001,5003,5005,5007,5009,5011,5013,5015],{"class":864,"line":907},[862,4971,1729],{"class":872},[862,4973,862],{"class":1297},[862,4975,1881],{"class":990},[862,4977,997],{"class":872},[862,4979,1309],{"class":872},[862,4981,4982],{"class":889},"selectChip(...)",[862,4984,1309],{"class":872},[862,4986,1905],{"class":872},[862,4988,3457],{"class":876},[862,4990,1294],{"class":872},[862,4992,1867],{"class":1297},[862,4994,1881],{"class":990},[862,4996,997],{"class":872},[862,4998,1309],{"class":872},[862,5000,1888],{"class":889},[862,5002,1309],{"class":872},[862,5004,1905],{"class":872},[862,5006,1908],{"class":876},[862,5008,1705],{"class":872},[862,5010,1867],{"class":1297},[862,5012,3492],{"class":872},[862,5014,862],{"class":1297},[862,5016,1316],{"class":872},[862,5018,5019,5021,5023,5025,5027,5029,5031,5033,5035,5037,5039,5041],{"class":864,"line":916},[862,5020,1729],{"class":872},[862,5022,862],{"class":1297},[862,5024,1881],{"class":990},[862,5026,997],{"class":872},[862,5028,1309],{"class":872},[862,5030,4266],{"class":889},[862,5032,1309],{"class":872},[862,5034,1905],{"class":872},[862,5036,1959],{"class":876},[862,5038,1705],{"class":872},[862,5040,862],{"class":1297},[862,5042,1316],{"class":872},[862,5044,5045,5047,5049],{"class":864,"line":924},[862,5046,1705],{"class":872},[862,5048,1732],{"class":1297},[862,5050,1316],{"class":872},[862,5052,5053],{"class":864,"line":932},[862,5054,984],{"emptyLinePlaceholder":223},[862,5056,5057],{"class":864,"line":940},[862,5058,5059],{"class":3184},"\u003C!-- Panel with grouped, selectable options -->\n",[862,5061,5062,5064,5066,5068,5070,5072,5075,5077,5079,5081,5083,5085,5087],{"class":864,"line":948},[862,5063,1294],{"class":872},[862,5065,700],{"class":1297},[862,5067,1881],{"class":990},[862,5069,997],{"class":872},[862,5071,1309],{"class":872},[862,5073,5074],{"class":889},"selectPanel(...)",[862,5076,1309],{"class":872},[862,5078,1745],{"class":990},[862,5080,997],{"class":872},[862,5082,1309],{"class":872},[862,5084,726],{"class":889},[862,5086,1309],{"class":872},[862,5088,1316],{"class":872},[862,5090,5091,5093,5095,5097,5099,5101,5104,5106,5108,5110,5112,5115,5117,5119,5122,5124,5126],{"class":864,"line":956},[862,5092,1729],{"class":872},[862,5094,703],{"class":1297},[862,5096,1881],{"class":990},[862,5098,997],{"class":872},[862,5100,1309],{"class":872},[862,5102,5103],{"class":889},"selectLabel(...)",[862,5105,1309],{"class":872},[862,5107,1745],{"class":990},[862,5109,997],{"class":872},[862,5111,1309],{"class":872},[862,5113,5114],{"class":889},"presentation",[862,5116,1309],{"class":872},[862,5118,1905],{"class":872},[862,5120,5121],{"class":876},"Fruits",[862,5123,1705],{"class":872},[862,5125,703],{"class":1297},[862,5127,1316],{"class":872},[862,5129,5130,5132,5134,5136,5138,5140,5142,5144,5146,5148,5150,5152,5154,5156,5158,5160,5162,5164],{"class":864,"line":964},[862,5131,1729],{"class":872},[862,5133,703],{"class":1297},[862,5135,1881],{"class":990},[862,5137,997],{"class":872},[862,5139,1309],{"class":872},[862,5141,4463],{"class":889},[862,5143,1309],{"class":872},[862,5145,1745],{"class":990},[862,5147,997],{"class":872},[862,5149,1309],{"class":872},[862,5151,2055],{"class":889},[862,5153,1309],{"class":872},[862,5155,3659],{"class":990},[862,5157,997],{"class":872},[862,5159,1309],{"class":872},[862,5161,1952],{"class":889},[862,5163,1309],{"class":872},[862,5165,1316],{"class":872},[862,5167,5168,5170,5172,5174,5176,5178,5180,5182,5184,5187,5189,5191,5193,5195,5197,5199,5201,5203,5205,5207,5209,5211,5213,5215,5217],{"class":864,"line":981},[862,5169,1740],{"class":872},[862,5171,862],{"class":1297},[862,5173,1881],{"class":990},[862,5175,997],{"class":872},[862,5177,1309],{"class":872},[862,5179,4210],{"class":889},[862,5181,1309],{"class":872},[862,5183,1905],{"class":872},[862,5185,5186],{"class":876},"🍎",[862,5188,1705],{"class":872},[862,5190,862],{"class":1297},[862,5192,1905],{"class":872},[862,5194,3457],{"class":876},[862,5196,1294],{"class":872},[862,5198,862],{"class":1297},[862,5200,1881],{"class":990},[862,5202,997],{"class":872},[862,5204,1309],{"class":872},[862,5206,2121],{"class":889},[862,5208,1309],{"class":872},[862,5210,1905],{"class":872},[862,5212,3700],{"class":876},[862,5214,1705],{"class":872},[862,5216,862],{"class":1297},[862,5218,1316],{"class":872},[862,5220,5221,5223,5225],{"class":864,"line":987},[862,5222,2174],{"class":872},[862,5224,703],{"class":1297},[862,5226,1316],{"class":872},[862,5228,5229,5231,5233,5235,5237,5239,5242,5244,5246,5248,5250,5253,5255,5257,5259],{"class":864,"line":1008},[862,5230,1729],{"class":872},[862,5232,703],{"class":1297},[862,5234,1881],{"class":990},[862,5236,997],{"class":872},[862,5238,1309],{"class":872},[862,5240,5241],{"class":889},"selectSeparator(...)",[862,5243,1309],{"class":872},[862,5245,1745],{"class":990},[862,5247,997],{"class":872},[862,5249,1309],{"class":872},[862,5251,5252],{"class":889},"separator",[862,5254,1309],{"class":872},[862,5256,3492],{"class":872},[862,5258,703],{"class":1297},[862,5260,1316],{"class":872},[862,5262,5263,5265,5267,5269,5271,5273,5275,5277,5279,5281,5283,5285,5287,5290,5292,5294,5296,5298,5300,5303,5305,5307],{"class":864,"line":1013},[862,5264,1729],{"class":872},[862,5266,703],{"class":1297},[862,5268,1881],{"class":990},[862,5270,997],{"class":872},[862,5272,1309],{"class":872},[862,5274,4463],{"class":889},[862,5276,1309],{"class":872},[862,5278,1745],{"class":990},[862,5280,997],{"class":872},[862,5282,1309],{"class":872},[862,5284,2055],{"class":889},[862,5286,1309],{"class":872},[862,5288,5289],{"class":990}," aria-disabled",[862,5291,997],{"class":872},[862,5293,1309],{"class":872},[862,5295,1952],{"class":889},[862,5297,1309],{"class":872},[862,5299,1905],{"class":872},[862,5301,5302],{"class":876},"Durian",[862,5304,1705],{"class":872},[862,5306,703],{"class":1297},[862,5308,1316],{"class":872},[862,5310,5311,5313,5315],{"class":864,"line":1031},[862,5312,1705],{"class":872},[862,5314,700],{"class":1297},[862,5316,1316],{"class":872},[692,5318,5319,5320,5323,5324,5327,5328,5330,5331,5333,5334,5336],{},"Alongside the seven recipes, a few ",[696,5321,5322],{},"setup-registered helper slots"," carry no props of their own — apply the class directly: ",[708,5325,5326],{},".select-value"," (trigger value text), ",[708,5329,4139],{}," (shared leading media slot), ",[708,5332,3077],{}," (trailing selected indicator), and ",[708,5335,3074],{}," (chip dismiss button).",[3871,5338,5339,5341],{},[696,5340,3875],{}," You don't need every part. A single-select with no grouping needs only the trigger, panel, and option recipes — reach for chips, labels, and separators when the control calls for them.",[688,5343,568],{"id":5344},"accessibility",[700,5346,5347,5371,5384,5396,5408],{},[703,5348,5349,5352,5353,3779,5356,3782,5359,5362,5363,5366,5367,5370],{},[696,5350,5351],{},"Wire the ARIA combobox pattern."," The trigger should carry ",[708,5354,5355],{},"role=\"combobox\"",[708,5357,5358],{},"aria-haspopup=\"listbox\"",[708,5360,5361],{},"aria-expanded","; the panel ",[708,5364,5365],{},"role=\"listbox\"","; and each option ",[708,5368,5369],{},"role=\"option\"",". The recipe styles the surfaces but does not manage the interaction — pair it with your framework's combobox logic or a headless library.",[703,5372,5373,5376,5377,1267,5379,5381,5382,2599],{},[696,5374,5375],{},"Drive selected and disabled with ARIA."," Set ",[708,5378,1266],{},[708,5380,1270],{}," on options so the visuals and the accessibility tree stay in sync. The selected tint and check indicator key off ",[708,5383,4148],{},[703,5385,5386,5389,5390,5392,5393,5395],{},[696,5387,5388],{},"Label each remove button."," Give every ",[708,5391,3074],{}," an ",[708,5394,4408],{}," that names the value it dismisses, so the action is unambiguous to assistive technology.",[703,5397,5398,5401,5402,5405,5406,2599],{},[696,5399,5400],{},"Keep the chevron decorative."," Mark the chevron ",[708,5403,5404],{},"aria-hidden=\"true\""," — it is a visual affordance, and the open state is already conveyed by ",[708,5407,5361],{},[703,5409,5410,5413,5414,5416,5417,2599],{},[696,5411,5412],{},"Verify contrast ratios."," The ",[708,5415,1507],{}," color places light text on a dark surface. Default tokens meet WCAG AA 4.5:1 contrast. If you override colors, verify with the ",[772,5418,5422],{"href":5419,"rel":5420},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[5421],"nofollow","WebAIM Contrast Checker",[688,5424,5426],{"id":5425},"customization","Customization",[3795,5428,5430],{"id":5429},"overriding-defaults","Overriding Defaults",[692,5432,5433],{},"Each select composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify what you want to change:",[853,5435,5437],{"className":855,"code":5436,"filename":851,"language":857,"meta":858,"style":858},"import { styleframe } from 'virtual:styleframe';\nimport { useSelectRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst select = useSelectRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.lg',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'soft',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[708,5438,5439,5459,5479,5483,5497,5501,5518,5527,5543,5548,5557,5572,5587,5602,5606,5614,5618],{"__ignoreMap":858},[862,5440,5441,5443,5445,5447,5449,5451,5453,5455,5457],{"class":864,"line":865},[862,5442,869],{"class":868},[862,5444,873],{"class":872},[862,5446,877],{"class":876},[862,5448,880],{"class":872},[862,5450,883],{"class":868},[862,5452,886],{"class":872},[862,5454,890],{"class":889},[862,5456,893],{"class":872},[862,5458,896],{"class":872},[862,5460,5461,5463,5465,5467,5469,5471,5473,5475,5477],{"class":864,"line":899},[862,5462,869],{"class":868},[862,5464,873],{"class":872},[862,5466,1023],{"class":876},[862,5468,880],{"class":872},[862,5470,883],{"class":868},[862,5472,886],{"class":872},[862,5474,974],{"class":889},[862,5476,893],{"class":872},[862,5478,896],{"class":872},[862,5480,5481],{"class":864,"line":907},[862,5482,984],{"emptyLinePlaceholder":223},[862,5484,5485,5487,5489,5491,5493,5495],{"class":864,"line":916},[862,5486,991],{"class":990},[862,5488,994],{"class":876},[862,5490,997],{"class":872},[862,5492,877],{"class":1000},[862,5494,1003],{"class":876},[862,5496,896],{"class":872},[862,5498,5499],{"class":864,"line":924},[862,5500,984],{"emptyLinePlaceholder":223},[862,5502,5503,5505,5507,5509,5511,5514,5516],{"class":864,"line":932},[862,5504,991],{"class":990},[862,5506,1018],{"class":876},[862,5508,997],{"class":872},[862,5510,1023],{"class":1000},[862,5512,5513],{"class":876},"(s",[862,5515,1187],{"class":872},[862,5517,904],{"class":872},[862,5519,5520,5523,5525],{"class":864,"line":940},[862,5521,5522],{"class":1297},"    base",[862,5524,1652],{"class":872},[862,5526,904],{"class":872},[862,5528,5529,5532,5534,5536,5539,5541],{"class":864,"line":948},[862,5530,5531],{"class":1297},"        borderRadius",[862,5533,1652],{"class":872},[862,5535,886],{"class":872},[862,5537,5538],{"class":889},"@border-radius.lg",[862,5540,893],{"class":872},[862,5542,913],{"class":872},[862,5544,5545],{"class":864,"line":956},[862,5546,5547],{"class":872},"    },\n",[862,5549,5550,5553,5555],{"class":864,"line":964},[862,5551,5552],{"class":1297},"    defaultVariants",[862,5554,1652],{"class":872},[862,5556,904],{"class":872},[862,5558,5559,5562,5564,5566,5568,5570],{"class":864,"line":981},[862,5560,5561],{"class":1297},"        color",[862,5563,1652],{"class":872},[862,5565,886],{"class":872},[862,5567,1415],{"class":889},[862,5569,893],{"class":872},[862,5571,913],{"class":872},[862,5573,5574,5577,5579,5581,5583,5585],{"class":864,"line":987},[862,5575,5576],{"class":1297},"        variant",[862,5578,1652],{"class":872},[862,5580,886],{"class":872},[862,5582,2654],{"class":889},[862,5584,893],{"class":872},[862,5586,913],{"class":872},[862,5588,5589,5592,5594,5596,5598,5600],{"class":864,"line":1008},[862,5590,5591],{"class":1297},"        size",[862,5593,1652],{"class":872},[862,5595,886],{"class":872},[862,5597,1548],{"class":889},[862,5599,893],{"class":872},[862,5601,913],{"class":872},[862,5603,5604],{"class":864,"line":1013},[862,5605,5547],{"class":872},[862,5607,5608,5610,5612],{"class":864,"line":1031},[862,5609,967],{"class":872},[862,5611,1669],{"class":876},[862,5613,896],{"class":872},[862,5615,5616],{"class":864,"line":1048},[862,5617,984],{"emptyLinePlaceholder":223},[862,5619,5620,5622,5624,5626],{"class":864,"line":1065},[862,5621,1141],{"class":868},[862,5623,1144],{"class":868},[862,5625,1147],{"class":876},[862,5627,896],{"class":872},[3795,5629,5631],{"id":5630},"filtering-variants","Filtering Variants",[692,5633,5634,5635,5638],{},"If you only need a subset of the available variants, use the ",[708,5636,5637],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[853,5640,5642],{"className":855,"code":5641,"filename":851,"language":857,"meta":858,"style":858},"import { styleframe } from 'virtual:styleframe';\nimport { useSelectRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the neutral color with the solid and soft styles\nconst select = useSelectRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        variant: ['solid', 'soft'],\n    },\n});\n\nexport default s;\n",[708,5643,5644,5664,5684,5688,5702,5706,5711,5727,5736,5756,5782,5786,5794,5798],{"__ignoreMap":858},[862,5645,5646,5648,5650,5652,5654,5656,5658,5660,5662],{"class":864,"line":865},[862,5647,869],{"class":868},[862,5649,873],{"class":872},[862,5651,877],{"class":876},[862,5653,880],{"class":872},[862,5655,883],{"class":868},[862,5657,886],{"class":872},[862,5659,890],{"class":889},[862,5661,893],{"class":872},[862,5663,896],{"class":872},[862,5665,5666,5668,5670,5672,5674,5676,5678,5680,5682],{"class":864,"line":899},[862,5667,869],{"class":868},[862,5669,873],{"class":872},[862,5671,1023],{"class":876},[862,5673,880],{"class":872},[862,5675,883],{"class":868},[862,5677,886],{"class":872},[862,5679,974],{"class":889},[862,5681,893],{"class":872},[862,5683,896],{"class":872},[862,5685,5686],{"class":864,"line":907},[862,5687,984],{"emptyLinePlaceholder":223},[862,5689,5690,5692,5694,5696,5698,5700],{"class":864,"line":916},[862,5691,991],{"class":990},[862,5693,994],{"class":876},[862,5695,997],{"class":872},[862,5697,877],{"class":1000},[862,5699,1003],{"class":876},[862,5701,896],{"class":872},[862,5703,5704],{"class":864,"line":924},[862,5705,984],{"emptyLinePlaceholder":223},[862,5707,5708],{"class":864,"line":932},[862,5709,5710],{"class":3184},"\u002F\u002F Only generate the neutral color with the solid and soft styles\n",[862,5712,5713,5715,5717,5719,5721,5723,5725],{"class":864,"line":940},[862,5714,991],{"class":990},[862,5716,1018],{"class":876},[862,5718,997],{"class":872},[862,5720,1023],{"class":1000},[862,5722,5513],{"class":876},[862,5724,1187],{"class":872},[862,5726,904],{"class":872},[862,5728,5729,5732,5734],{"class":864,"line":948},[862,5730,5731],{"class":1297},"    filter",[862,5733,1652],{"class":872},[862,5735,904],{"class":872},[862,5737,5738,5740,5742,5745,5747,5749,5751,5754],{"class":864,"line":956},[862,5739,5561],{"class":1297},[862,5741,1652],{"class":872},[862,5743,5744],{"class":876}," [",[862,5746,893],{"class":872},[862,5748,1415],{"class":889},[862,5750,893],{"class":872},[862,5752,5753],{"class":876},"]",[862,5755,913],{"class":872},[862,5757,5758,5760,5762,5764,5766,5768,5770,5772,5774,5776,5778,5780],{"class":864,"line":964},[862,5759,5576],{"class":1297},[862,5761,1652],{"class":872},[862,5763,5744],{"class":876},[862,5765,893],{"class":872},[862,5767,1657],{"class":889},[862,5769,893],{"class":872},[862,5771,1187],{"class":872},[862,5773,886],{"class":872},[862,5775,2654],{"class":889},[862,5777,893],{"class":872},[862,5779,5753],{"class":876},[862,5781,913],{"class":872},[862,5783,5784],{"class":864,"line":981},[862,5785,5547],{"class":872},[862,5787,5788,5790,5792],{"class":864,"line":987},[862,5789,967],{"class":872},[862,5791,1669],{"class":876},[862,5793,896],{"class":872},[862,5795,5796],{"class":864,"line":1008},[862,5797,984],{"emptyLinePlaceholder":223},[862,5799,5800,5802,5804,5806],{"class":864,"line":1013},[862,5801,1141],{"class":868},[862,5803,1144],{"class":868},[862,5805,1147],{"class":876},[862,5807,896],{"class":872},[4677,5809,5810,5812],{},[696,5811,4681],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,5814,73],{"id":5815},"api-reference",[3795,5817,5819],{"id":5818},"useselectrecipes-options",[708,5820,5821],{},"useSelectRecipe(s, options?)",[692,5823,5824,5825,5827,5828,5830,5831,5834],{},"Creates the trigger recipe — the ",[708,5826,4787],{}," control that owns the visual field. Registers a nested ",[708,5829,5326],{}," selector (the placeholder\u002Fvalue slot) and a ",[708,5832,5833],{},".select.-open"," selector (the open-state focus ring). Owns the full compound matrix: 9 color-variant combinations plus 3 state overrides.",[692,5836,5837],{},[696,5838,5839],{},"Parameters:",[3804,5841,5842,5855],{},[3807,5843,5844],{},[3810,5845,5846,5849,5852],{},[3813,5847,5848],{},"Parameter",[3813,5850,5851],{},"Type",[3813,5853,5854],{},"Description",[3823,5856,5857,5872,5886,5901,5915,5930,5945],{},[3810,5858,5859,5864,5869],{},[3828,5860,5861],{},[708,5862,5863],{},"s",[3828,5865,5866],{},[708,5867,5868],{},"Styleframe",[3828,5870,5871],{},"The Styleframe instance",[3810,5873,5874,5878,5883],{},[3828,5875,5876],{},[708,5877,2864],{},[3828,5879,5880],{},[708,5881,5882],{},"DeepPartial\u003CRecipeConfig>",[3828,5884,5885],{},"Optional overrides for the recipe configuration",[3810,5887,5888,5893,5898],{},[3828,5889,5890],{},[708,5891,5892],{},"options.base",[3828,5894,5895],{},[708,5896,5897],{},"VariantDeclarationsBlock",[3828,5899,5900],{},"Custom base styles for the trigger",[3810,5902,5903,5908,5912],{},[3828,5904,5905],{},[708,5906,5907],{},"options.variants",[3828,5909,5910],{},[708,5911,3883],{},[3828,5913,5914],{},"Custom variant definitions for the recipe",[3810,5916,5917,5922,5927],{},[3828,5918,5919],{},[708,5920,5921],{},"options.defaultVariants",[3828,5923,5924],{},[708,5925,5926],{},"Record\u003Ckeyof Variants, string>",[3828,5928,5929],{},"Default variant values for the recipe",[3810,5931,5932,5937,5942],{},[3828,5933,5934],{},[708,5935,5936],{},"options.compoundVariants",[3828,5938,5939],{},[708,5940,5941],{},"CompoundVariant[]",[3828,5943,5944],{},"Custom compound variant definitions for the recipe",[3810,5946,5947,5952,5957],{},[3828,5948,5949],{},[708,5950,5951],{},"options.filter",[3828,5953,5954],{},[708,5955,5956],{},"Record\u003Cstring, string[]>",[3828,5958,5959],{},"Limit which variant values are generated",[692,5961,5962],{},[696,5963,5964],{},"Variants:",[3804,5966,5967,5979],{},[3807,5968,5969],{},[3810,5970,5971,5974,5976],{},[3813,5972,5973],{},"Variant",[3813,5975,4692],{},[3813,5977,5978],{},"Default",[3823,5980,5981,6000,6019,6037,6054,6070],{},[3810,5982,5983,5988,5996],{},[3828,5984,5985],{},[708,5986,5987],{},"color",[3828,5989,5990,3779,5992,3779,5994],{},[708,5991,1497],{},[708,5993,1507],{},[708,5995,1415],{},[3828,5997,5998],{},[708,5999,1415],{},[3810,6001,6002,6007,6015],{},[3828,6003,6004],{},[708,6005,6006],{},"variant",[3828,6008,6009,3779,6011,3779,6013],{},[708,6010,1657],{},[708,6012,2654],{},[708,6014,3923],{},[3828,6016,6017],{},[708,6018,1657],{},[3810,6020,6021,6025,6033],{},[3828,6022,6023],{},[708,6024,4031],{},[3828,6026,6027,3779,6029,3779,6031],{},[708,6028,1531],{},[708,6030,1431],{},[708,6032,1548],{},[3828,6034,6035],{},[708,6036,1431],{},[3810,6038,6039,6043,6050],{},[3828,6040,6041],{},[708,6042,4791],{},[3828,6044,6045,3779,6047],{},[708,6046,1952],{},[708,6048,6049],{},"false",[3828,6051,6052],{},[708,6053,6049],{},[3810,6055,6056,6060,6066],{},[3828,6057,6058],{},[708,6059,4722],{},[3828,6061,6062,3779,6064],{},[708,6063,1952],{},[708,6065,6049],{},[3828,6067,6068],{},[708,6069,6049],{},[3810,6071,6072,6076,6082],{},[3828,6073,6074],{},[708,6075,4796],{},[3828,6077,6078,3779,6080],{},[708,6079,1952],{},[708,6081,6049],{},[3828,6083,6084],{},[708,6085,6049],{},[3795,6087,6089],{"id":6088},"useselectpanelrecipes-options",[708,6090,6091],{},"useSelectPanelRecipe(s, options?)",[692,6093,6094,6095,6097,6098,1267,6101,6104,6105,2599],{},"Creates the panel recipe — the ",[708,6096,4813],{}," floating listbox. Adds a ",[708,6099,6100],{},"maxHeight",[708,6102,6103],{},"overflowY: auto"," so long option lists scroll. Accepts the same parameters as ",[708,6106,3914],{},[692,6108,6109],{},[696,6110,5964],{},[3804,6112,6113,6123],{},[3807,6114,6115],{},[3810,6116,6117,6119,6121],{},[3813,6118,5973],{},[3813,6120,4692],{},[3813,6122,5978],{},[3823,6124,6125,6143,6161],{},[3810,6126,6127,6131,6139],{},[3828,6128,6129],{},[708,6130,5987],{},[3828,6132,6133,3779,6135,3779,6137],{},[708,6134,1497],{},[708,6136,1507],{},[708,6138,1415],{},[3828,6140,6141],{},[708,6142,1415],{},[3810,6144,6145,6149,6157],{},[3828,6146,6147],{},[708,6148,6006],{},[3828,6150,6151,3779,6153,3779,6155],{},[708,6152,1657],{},[708,6154,2654],{},[708,6156,3947],{},[3828,6158,6159],{},[708,6160,1657],{},[3810,6162,6163,6167,6175],{},[3828,6164,6165],{},[708,6166,4031],{},[3828,6168,6169,3779,6171,3779,6173],{},[708,6170,1531],{},[708,6172,1431],{},[708,6174,1548],{},[3828,6176,6177],{},[708,6178,1431],{},[3795,6180,6182],{"id":6181},"useselectoptionrecipes-options",[708,6183,6184],{},"useSelectOptionRecipe(s, options?)",[692,6186,6187,6188,6190,6191,1267,6193,6195,6196,6198,6199,2599],{},"Creates the option recipe — a ",[708,6189,4834],{}," row with hover, focus, and active states per color-variant, plus ",[708,6192,1266],{},[708,6194,1270],{}," handling. Registers a nested ",[708,6197,3077],{}," slot revealed when the option is selected. Accepts the same parameters as ",[708,6200,3914],{},[692,6202,6203],{},[696,6204,5964],{},[3804,6206,6207,6217],{},[3807,6208,6209],{},[3810,6210,6211,6213,6215],{},[3813,6212,5973],{},[3813,6214,4692],{},[3813,6216,5978],{},[3823,6218,6219,6237,6255],{},[3810,6220,6221,6225,6233],{},[3828,6222,6223],{},[708,6224,5987],{},[3828,6226,6227,3779,6229,3779,6231],{},[708,6228,1497],{},[708,6230,1507],{},[708,6232,1415],{},[3828,6234,6235],{},[708,6236,1415],{},[3810,6238,6239,6243,6251],{},[3828,6240,6241],{},[708,6242,6006],{},[3828,6244,6245,3779,6247,3779,6249],{},[708,6246,1657],{},[708,6248,2654],{},[708,6250,3947],{},[3828,6252,6253],{},[708,6254,1657],{},[3810,6256,6257,6261,6269],{},[3828,6258,6259],{},[708,6260,4031],{},[3828,6262,6263,3779,6265,3779,6267],{},[708,6264,1531],{},[708,6266,1431],{},[708,6268,1548],{},[3828,6270,6271],{},[708,6272,1431],{},[3795,6274,6276],{"id":6275},"useselectchiprecipes-options",[708,6277,6278],{},"useSelectChipRecipe(s, options?)",[692,6280,6281,6282,6284,6285,6287,6288,2599],{},"Creates the chip recipe — a ",[708,6283,4858],{}," dismissable tag scoped to the container palette. Registers a nested ",[708,6286,3074],{}," button. Accepts the same parameters as ",[708,6289,3914],{},[692,6291,6292],{},[696,6293,5964],{},[3804,6295,6296,6306],{},[3807,6297,6298],{},[3810,6299,6300,6302,6304],{},[3813,6301,5973],{},[3813,6303,4692],{},[3813,6305,5978],{},[3823,6307,6308,6326,6346],{},[3810,6309,6310,6314,6322],{},[3828,6311,6312],{},[708,6313,5987],{},[3828,6315,6316,3779,6318,3779,6320],{},[708,6317,1497],{},[708,6319,1507],{},[708,6321,1415],{},[3828,6323,6324],{},[708,6325,1415],{},[3810,6327,6328,6332,6342],{},[3828,6329,6330],{},[708,6331,6006],{},[3828,6333,6334,3779,6336,3779,6338,3779,6340],{},[708,6335,1657],{},[708,6337,3966],{},[708,6339,2654],{},[708,6341,3947],{},[3828,6343,6344],{},[708,6345,2654],{},[3810,6347,6348,6352,6360],{},[3828,6349,6350],{},[708,6351,4031],{},[3828,6353,6354,3779,6356,3779,6358],{},[708,6355,1531],{},[708,6357,1431],{},[708,6359,1548],{},[3828,6361,6362],{},[708,6363,1531],{},[3795,6365,6367],{"id":6366},"useselectarrowrecipes-options",[708,6368,6369],{},"useSelectArrowRecipe(s, options?)",[692,6371,6372,6373,6375,6376,6378,6379,6382,6383,6385,6386,6388,6389,2599],{},"Creates the chevron recipe — a ",[708,6374,4878],{}," indicator that inherits ",[708,6377,4882],{}," and rotates 180° when its ",[708,6380,6381],{},"data-open=\"true\""," attribute is set or its parent trigger carries ",[708,6384,1274],{},". Has only a ",[708,6387,4031],{}," axis. Accepts the same parameters as ",[708,6390,3914],{},[692,6392,6393],{},[696,6394,5964],{},[3804,6396,6397,6407],{},[3807,6398,6399],{},[3810,6400,6401,6403,6405],{},[3813,6402,5973],{},[3813,6404,4692],{},[3813,6406,5978],{},[3823,6408,6409],{},[3810,6410,6411,6415,6423],{},[3828,6412,6413],{},[708,6414,4031],{},[3828,6416,6417,3779,6419,3779,6421],{},[708,6418,1531],{},[708,6420,1431],{},[708,6422,1548],{},[3828,6424,6425],{},[708,6426,1431],{},[3795,6428,6430],{"id":6429},"useselectlabelrecipes-options",[708,6431,6432],{},"useSelectLabelRecipe(s, options?)",[692,6434,6435,6436,6438,6439,1267,6441,6443,6444,2599],{},"Creates the label recipe — a ",[708,6437,4901],{}," uppercase heading for grouping options. Has ",[708,6440,5987],{},[708,6442,4031],{}," axes and no variant axis. Accepts the same parameters as ",[708,6445,3914],{},[692,6447,6448],{},[696,6449,5964],{},[3804,6451,6452,6462],{},[3807,6453,6454],{},[3810,6455,6456,6458,6460],{},[3813,6457,5973],{},[3813,6459,4692],{},[3813,6461,5978],{},[3823,6463,6464,6482],{},[3810,6465,6466,6470,6478],{},[3828,6467,6468],{},[708,6469,5987],{},[3828,6471,6472,3779,6474,3779,6476],{},[708,6473,1497],{},[708,6475,1507],{},[708,6477,1415],{},[3828,6479,6480],{},[708,6481,1415],{},[3810,6483,6484,6488,6496],{},[3828,6485,6486],{},[708,6487,4031],{},[3828,6489,6490,3779,6492,3779,6494],{},[708,6491,1531],{},[708,6493,1431],{},[708,6495,1548],{},[3828,6497,6498],{},[708,6499,1431],{},[3795,6501,6503],{"id":6502},"useselectseparatorrecipes-options",[708,6504,6505],{},"useSelectSeparatorRecipe(s, options?)",[692,6507,6508,6509,6511,6512,6514,6515,2599],{},"Creates the separator recipe — a ",[708,6510,4918],{}," rule for dividing option groups. Has a ",[708,6513,5987],{}," axis only. Accepts the same parameters as ",[708,6516,3914],{},[692,6518,6519],{},[696,6520,5964],{},[3804,6522,6523,6533],{},[3807,6524,6525],{},[3810,6526,6527,6529,6531],{},[3813,6528,5973],{},[3813,6530,4692],{},[3813,6532,5978],{},[3823,6534,6535],{},[3810,6536,6537,6541,6549],{},[3828,6538,6539],{},[708,6540,5987],{},[3828,6542,6543,3779,6545,3779,6547],{},[708,6544,1497],{},[708,6546,1507],{},[708,6548,1415],{},[3828,6550,6551],{},[708,6552,1415],{},[692,6554,6555],{},[772,6556,6557],{"href":132},"Learn more about recipes →",[688,6559,6561],{"id":6560},"best-practices","Best Practices",[700,6563,6564,6580,6601,6612,6623,6632],{},[703,6565,6566,6574,6575,1267,6577,6579],{},[696,6567,6568,6569,1267,6571,6573],{},"Pass ",[708,6570,5987],{},[708,6572,4031],{}," consistently",": Spread the same ",[708,6576,5987],{},[708,6578,4031],{}," to every part so the whole control scales and themes together.",[703,6581,6582,6585,6586,6588,6589,6588,6591,6593,6594,6588,6596,6588,6598,6600],{},[696,6583,6584],{},"Use the right variant per part",": ",[708,6587,1657],{},"\u002F",[708,6590,2654],{},[708,6592,3923],{}," for the trigger, ",[708,6595,1657],{},[708,6597,2654],{},[708,6599,3947],{}," for the panel and options, and the badge vocabulary for chips.",[703,6602,6603,6606,6607,1267,6609,6611],{},[696,6604,6605],{},"Drive option state with ARIA",": Set ",[708,6608,1266],{},[708,6610,1270],{}," on options instead of toggling classes by hand.",[703,6613,6614,6617,6618,5392,6620,6622],{},[696,6615,6616],{},"Label remove buttons",": Give each ",[708,6619,3074],{},[708,6621,4408],{}," that names the value it dismisses.",[703,6624,6625,6631],{},[696,6626,6627,6628,6630],{},"Use ",[708,6629,1415],{}," for general forms",": The neutral color adapts to light and dark mode automatically, making it the safest default.",[703,6633,6634,6637,6638,6640],{},[696,6635,6636],{},"Filter what you don't need",": If your control uses only one color or two variants, pass a ",[708,6639,5637],{}," option to reduce generated CSS.",[688,6642,6644],{"id":6643},"faq","FAQ",[6646,6647,6648,6692,6706,6719,6739,6753],"accordion",{},[6649,6650,6653,6654,6656,6657,6659,6660,6663,6664,3779,6666,3779,6668,6670,6671,6673,6674,3779,6676,3779,6678,6680,6681,4744,6683,6685,6686,6688,6689,6691],"accordion-item",{"icon":6651,"label":6652},"i-lucide-circle-help","Why does the trigger use different variants than the panel?","The Select is the visual union of three existing recipes. The trigger follows the ",[772,6655,452],{"href":453}," recipe's structure but names its opaque style ",[708,6658,1657],{}," (Input itself uses ",[708,6661,6662],{},"default","), so the trigger axis is ",[708,6665,1657],{},[708,6667,2654],{},[708,6669,3923],{},"; the panel and options mirror the ",[772,6672,503],{"href":504}," recipe (",[708,6675,1657],{},[708,6677,2654],{},[708,6679,3947],{},"). Pass ",[708,6682,1657],{},[708,6684,2654],{}," to keep both vocabularies aligned; use ",[708,6687,3923],{}," on the trigger with ",[708,6690,3947],{}," on the panel for a borderless look.",[6649,6693,6695,6696,6698,6699,6701,6702,6705],{"icon":6651,"label":6694},"How do I render selected values as chips?","In multi-select mode, render a ",[708,6697,4858],{}," for each selected value inside the trigger instead of plain text. Each chip carries a nested ",[708,6700,3074],{}," button for dismissal. The trigger wraps its contents, so chips flow onto new rows as the selection grows. See the ",[772,6703,4290],{"href":6704},"#multi-selection"," section.",[6649,6707,6709,6710,6712,6713,6715,6716,6718],{"icon":6651,"label":6708},"How are the selected and disabled option states styled?","They key off ARIA attributes, not recipe axes. ",[708,6711,4148],{}," applies a tinted background, a medium font weight, and reveals the leading ",[708,6714,3077],{}," indicator. ",[708,6717,4728],{}," dims the row and blocks interaction. Setting the attribute keeps styling and accessibility semantics in sync from a single source.",[6649,6720,694,6722,6724,6725,6728,6729,6732,6733,6735,6736,6738],{"icon":6651,"label":6721},"How does the chevron rotation work?",[708,6723,4878],{}," recipe registers two rotation selectors in its setup callback: one for ",[708,6726,6727],{},".select-arrow[data-open=\"true\"]"," and one for ",[708,6730,6731],{},".select.-open .select-arrow",". Add the ",[708,6734,1274],{}," class to the trigger (or ",[708,6737,6381],{}," to the arrow) when the panel opens, and the chevron flips 180° with a transition.",[6649,6740,6742,6743,3779,6745,3782,6747,6749,6750,6752],{"icon":6651,"label":6741},"Why doesn't the Select include semantic colors like primary or success?","A form control's color reflects its surface, not a status. Semantic colors communicate meaning and are better suited to badges, buttons, and callouts. Select uses ",[708,6744,1497],{},[708,6746,1507],{},[708,6748,1415],{}," for surface variations that work across all forms; error communication is handled by the trigger's dedicated ",[708,6751,4791],{}," state.",[6649,6754,6756,6757,3779,6759,3782,6761,6764,6765,6768],{"icon":6651,"label":6755},"Can I use the Select recipe without the design tokens preset?","The Select recipes reference design tokens like ",[708,6758,3836],{},[708,6760,4107],{},[708,6762,6763],{},"@color.primary"," through string refs. These tokens need to be defined in your Styleframe instance for the recipes to generate valid CSS. The easiest way is ",[708,6766,6767],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[6770,6771,6772],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":858,"searchDepth":899,"depth":899,"links":6774},[6775,6776,6777,6778,6781,6786,6789,6790,6791,6792,6796,6797,6798,6802,6811,6812],{"id":690,"depth":899,"text":78},{"id":785,"depth":899,"text":786},{"id":830,"depth":899,"text":831},{"id":3773,"depth":899,"text":195,"children":6779},[6780],{"id":3797,"depth":907,"text":3798},{"id":3882,"depth":899,"text":3883,"children":6782},[6783,6784,6785],{"id":1657,"depth":907,"text":3987},{"id":2654,"depth":907,"text":3998},{"id":3923,"depth":907,"text":4007},{"id":4018,"depth":899,"text":4019,"children":6787},[6788],{"id":4038,"depth":907,"text":4039},{"id":4132,"depth":899,"text":4133},{"id":4289,"depth":899,"text":4290},{"id":4416,"depth":899,"text":4144},{"id":2864,"depth":899,"text":4692,"children":6793},[6794,6795],{"id":2918,"depth":907,"text":4702},{"id":4722,"depth":907,"text":4723},{"id":4750,"depth":899,"text":4751},{"id":5344,"depth":899,"text":568},{"id":5425,"depth":899,"text":5426,"children":6799},[6800,6801],{"id":5429,"depth":907,"text":5430},{"id":5630,"depth":907,"text":5631},{"id":5815,"depth":899,"text":73,"children":6803},[6804,6805,6806,6807,6808,6809,6810],{"id":5818,"depth":907,"text":5821},{"id":6088,"depth":907,"text":6091},{"id":6181,"depth":907,"text":6184},{"id":6275,"depth":907,"text":6278},{"id":6366,"depth":907,"text":6369},{"id":6429,"depth":907,"text":6432},{"id":6502,"depth":907,"text":6505},{"id":6560,"depth":899,"text":6561},{"id":6643,"depth":899,"text":6644},"A multi-select form control composed of a trigger, a floating listbox panel, selectable options, dismissable value chips, a chevron indicator, group labels, and separators. Supports light, dark, and neutral colors, per-part visual styles, and three sizes through the recipe system.",null,{},{"icon":7},{"title":468,"description":6813},"XAly572GJjTvKC4Jp4o0a8JiMOqoPkJbCh6U8UuxtsE",[6820,6822],{"title":464,"path":465,"stem":466,"description":6821,"icon":7,"children":-1},"A layout component for arranging a set of radios with shared orientation and spacing. Supports vertical and horizontal layouts and three gap sizes through the recipe system.",{"title":472,"path":473,"stem":474,"description":6823,"icon":7,"children":-1},"An input control for selecting a value from a range by dragging a thumb along a track. Composed of a root, track, range, and thumb recipe, with color, size, and orientation options through the recipe system.",1781596340760]