[{"data":1,"prerenderedAt":3482},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-switch":682,"-docs-theme-components-switch-surround":3477},{"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":476,"body":684,"description":3471,"extension":1246,"links":3472,"meta":3473,"navigation":3474,"path":477,"seo":3475,"stem":478,"__hash__":3476},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch.md",{"type":685,"value":686,"toc":3444},"minimark",[687,691,699,720,766,774,778,781,826,830,2214,2217,2239,2244,2247,2252,2256,2319,2329,2333,2350,2354,2358,2432,2453,2456,2463,2467,2481,2484,2487,2507,2510,2514,2517,2574,2661,2668,2671,2748,2752,2756,2759,2909,2913,2920,3063,3068,3071,3077,3085,3090,3197,3202,3237,3243,3254,3258,3308,3313,3317,3358,3362,3440],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698],"p",{},"The ",[696,697,476],"strong",{}," is a binary form control that lets users switch an option on or off, rendered as a sliding switch. It is composed of two recipe parts:",[700,701,702,712],"ul",{},[703,704,705,711],"li",{},[696,706,707],{},[708,709,710],"code",{},"useSwitchRecipe()"," — the label wrapper that owns the inline layout (gap, alignment), label typography, and dims itself when the field is disabled.",[703,713,714,719],{},[696,715,716],{},[708,717,718],{},"useSwitchFieldRecipe()"," — the native styled input rendered as a pill track with a white knob, plus the on (checked), focus, and disabled states.",[692,721,722,723,726,727,730,731,734,735,738,739,742,743,746,747,751,752,755,756,755,759,762,763,765],{},"The field is the real native ",[708,724,725],{},"\u003Cinput type=\"checkbox\" role=\"switch\">",", so every state is driven by the browser: ",[708,728,729],{},":checked"," recolors the track to ",[708,732,733],{},"@color.primary"," and slides the knob to the right, ",[708,736,737],{},":focus-visible"," shows a focus ring, and ",[708,740,741],{},":disabled"," dims it. The ",[708,744,745],{},"color"," axis sets the ",[748,749,750],"em",{},"off"," track surface (",[708,753,754],{},"light",", ",[708,757,758],{},"dark",[708,760,761],{},"neutral",") and the on-track fill stays ",[708,764,733],{}," across all three.",[692,767,768,769,773],{},"The Switch recipes integrate directly with the default ",[770,771,772],"a",{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[688,775,777],{"id":776},"why-use-the-switch-recipe","Why use the Switch recipe?",[692,779,780],{},"The Switch recipe helps you:",[700,782,783,789,802,808,814,820],{},[703,784,785,788],{},[696,786,787],{},"Ship faster with sensible defaults",": Get 3 surface colors and 3 sizes out of the box with a single set of composable calls.",[703,790,791,794,795,755,797,755,799,801],{},[696,792,793],{},"Build on the native input",": States ride on native pseudo-classes (",[708,796,729],{},[708,798,741],{},[708,800,737],{},"), so the control stays keyboard-accessible and form-associated with zero runtime JavaScript.",[703,803,804,807],{},[696,805,806],{},"Maintain consistency",": The on-track fill, knob, focus ring, and dark-mode surfaces follow the same design rules everywhere.",[703,809,810,813],{},[696,811,812],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[703,815,816,819],{},[696,817,818],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color or size values at compile time.",[703,821,822,825],{},[696,823,824],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[688,827,829],{"id":828},"usage","Usage",[831,832,834,839,846,1114,1118,1140,2205,2209],"steps",{"level":833},"4",[835,836,838],"h4",{"id":837},"register-the-recipes","Register the recipes",[692,840,841,842,845],{},"Add the Switch recipes to a local Styleframe instance. The global ",[708,843,844],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[847,848,850,1008],"code-tree",{"default-value":849},"src\u002Fcomponents\u002Fswitch.styleframe.ts",[851,852,857],"pre",{"className":853,"code":854,"filename":849,"language":855,"meta":856,"style":856},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useSwitchRecipe, useSwitchFieldRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst switchRecipe = useSwitchRecipe(s);\nconst switchField = useSwitchFieldRecipe(s);\n\nexport default s;\n","ts","",[708,858,859,895,924,930,951,956,973,989,994],{"__ignoreMap":856},[860,861,864,868,872,876,879,882,885,889,892],"span",{"class":862,"line":863},"line",1,[860,865,867],{"class":866},"s7zQu","import",[860,869,871],{"class":870},"sMK4o"," {",[860,873,875],{"class":874},"sTEyZ"," styleframe",[860,877,878],{"class":870}," }",[860,880,881],{"class":866}," from",[860,883,884],{"class":870}," '",[860,886,888],{"class":887},"sfazB","virtual:styleframe",[860,890,891],{"class":870},"'",[860,893,894],{"class":870},";\n",[860,896,898,900,902,905,908,911,913,915,917,920,922],{"class":862,"line":897},2,[860,899,867],{"class":866},[860,901,871],{"class":870},[860,903,904],{"class":874}," useSwitchRecipe",[860,906,907],{"class":870},",",[860,909,910],{"class":874}," useSwitchFieldRecipe",[860,912,878],{"class":870},[860,914,881],{"class":866},[860,916,884],{"class":870},[860,918,919],{"class":887},"@styleframe\u002Ftheme",[860,921,891],{"class":870},[860,923,894],{"class":870},[860,925,927],{"class":862,"line":926},3,[860,928,929],{"emptyLinePlaceholder":223},"\n",[860,931,933,937,940,943,946,949],{"class":862,"line":932},4,[860,934,936],{"class":935},"spNyl","const",[860,938,939],{"class":874}," s ",[860,941,942],{"class":870},"=",[860,944,875],{"class":945},"s2Zo4",[860,947,948],{"class":874},"()",[860,950,894],{"class":870},[860,952,954],{"class":862,"line":953},5,[860,955,929],{"emptyLinePlaceholder":223},[860,957,959,961,964,966,968,971],{"class":862,"line":958},6,[860,960,936],{"class":935},[860,962,963],{"class":874}," switchRecipe ",[860,965,942],{"class":870},[860,967,904],{"class":945},[860,969,970],{"class":874},"(s)",[860,972,894],{"class":870},[860,974,976,978,981,983,985,987],{"class":862,"line":975},7,[860,977,936],{"class":935},[860,979,980],{"class":874}," switchField ",[860,982,942],{"class":870},[860,984,910],{"class":945},[860,986,970],{"class":874},[860,988,894],{"class":870},[860,990,992],{"class":862,"line":991},8,[860,993,929],{"emptyLinePlaceholder":223},[860,995,997,1000,1003,1006],{"class":862,"line":996},9,[860,998,999],{"class":866},"export",[860,1001,1002],{"class":866}," default",[860,1004,1005],{"class":874}," s",[860,1007,894],{"class":870},[851,1009,1011],{"className":853,"code":1010,"filename":844,"language":855,"meta":856,"style":856},"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,1012,1013,1034,1060,1064,1078,1082,1091,1100,1104],{"__ignoreMap":856},[860,1014,1015,1017,1019,1021,1023,1025,1027,1030,1032],{"class":862,"line":863},[860,1016,867],{"class":866},[860,1018,871],{"class":870},[860,1020,875],{"class":874},[860,1022,878],{"class":870},[860,1024,881],{"class":866},[860,1026,884],{"class":870},[860,1028,1029],{"class":887},"styleframe",[860,1031,891],{"class":870},[860,1033,894],{"class":870},[860,1035,1036,1038,1040,1043,1045,1048,1050,1052,1054,1056,1058],{"class":862,"line":897},[860,1037,867],{"class":866},[860,1039,871],{"class":870},[860,1041,1042],{"class":874}," useDesignTokensPreset",[860,1044,907],{"class":870},[860,1046,1047],{"class":874}," useUtilitiesPreset",[860,1049,878],{"class":870},[860,1051,881],{"class":866},[860,1053,884],{"class":870},[860,1055,919],{"class":887},[860,1057,891],{"class":870},[860,1059,894],{"class":870},[860,1061,1062],{"class":862,"line":926},[860,1063,929],{"emptyLinePlaceholder":223},[860,1065,1066,1068,1070,1072,1074,1076],{"class":862,"line":932},[860,1067,936],{"class":935},[860,1069,939],{"class":874},[860,1071,942],{"class":870},[860,1073,875],{"class":945},[860,1075,948],{"class":874},[860,1077,894],{"class":870},[860,1079,1080],{"class":862,"line":953},[860,1081,929],{"emptyLinePlaceholder":223},[860,1083,1084,1087,1089],{"class":862,"line":958},[860,1085,1086],{"class":945},"useDesignTokensPreset",[860,1088,970],{"class":874},[860,1090,894],{"class":870},[860,1092,1093,1096,1098],{"class":862,"line":975},[860,1094,1095],{"class":945},"useUtilitiesPreset",[860,1097,970],{"class":874},[860,1099,894],{"class":870},[860,1101,1102],{"class":862,"line":991},[860,1103,929],{"emptyLinePlaceholder":223},[860,1105,1106,1108,1110,1112],{"class":862,"line":996},[860,1107,999],{"class":866},[860,1109,1002],{"class":866},[860,1111,1005],{"class":874},[860,1113,894],{"class":870},[835,1115,1117],{"id":1116},"build-the-component","Build the component",[692,1119,1120,1121,1124,1125,1128,1129,1132,1133,1135,1136,1139],{},"Put the ",[708,1122,1123],{},"switchRecipe"," wrapper on the ",[708,1126,1127],{},"\u003Clabel>"," and the ",[708,1130,1131],{},"switchField"," switch on a native ",[708,1134,725],{},". The ",[708,1137,1138],{},"role=\"switch\""," tells assistive technology to announce the control as on\u002Foff rather than checked\u002Funchecked:",[1141,1142,1143,1589,1972],"framework-switcher",{},[1144,1145,1146],"template",{"v-slot:vue":856},[851,1147,1152],{"className":1148,"code":1149,"filename":1150,"language":1151,"meta":856,"style":856},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { switchRecipe, switchField } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    size = \"md\",\n    checked = false,\n    disabled = false,\n    label,\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    checked?: boolean;\n    disabled?: boolean;\n    label?: string;\n}>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Clabel :class=\"switchRecipe({ size })\">\n        \u003Cinput\n            type=\"checkbox\"\n            role=\"switch\"\n            :class=\"switchField({ color, size })\"\n            :checked=\"checked\"\n            :disabled=\"disabled\"\n        \u002F>\n        \u003Cspan>{{ label }}\u003C\u002Fspan>\n    \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FSwitch.vue","vue",[708,1153,1154,1181,1208,1212,1219,1235,1251,1264,1275,1282,1297,1331,1365,1379,1391,1403,1413,1423,1428,1437,1460,1469,1485,1500,1515,1530,1545,1551,1570,1580],{"__ignoreMap":856},[860,1155,1156,1159,1163,1166,1169,1171,1174,1176,1178],{"class":862,"line":863},[860,1157,1158],{"class":870},"\u003C",[860,1160,1162],{"class":1161},"swJcz","script",[860,1164,1165],{"class":935}," setup",[860,1167,1168],{"class":935}," lang",[860,1170,942],{"class":870},[860,1172,1173],{"class":870},"\"",[860,1175,855],{"class":887},[860,1177,1173],{"class":870},[860,1179,1180],{"class":870},">\n",[860,1182,1183,1185,1187,1190,1192,1195,1197,1199,1202,1204,1206],{"class":862,"line":897},[860,1184,867],{"class":866},[860,1186,871],{"class":870},[860,1188,1189],{"class":874}," switchRecipe",[860,1191,907],{"class":870},[860,1193,1194],{"class":874}," switchField",[860,1196,878],{"class":870},[860,1198,881],{"class":866},[860,1200,1201],{"class":870}," \"",[860,1203,888],{"class":887},[860,1205,1173],{"class":870},[860,1207,894],{"class":870},[860,1209,1210],{"class":862,"line":926},[860,1211,929],{"emptyLinePlaceholder":223},[860,1213,1214,1216],{"class":862,"line":932},[860,1215,936],{"class":935},[860,1217,1218],{"class":870}," {\n",[860,1220,1221,1224,1226,1228,1230,1232],{"class":862,"line":953},[860,1222,1223],{"class":874},"    color ",[860,1225,942],{"class":870},[860,1227,1201],{"class":870},[860,1229,761],{"class":887},[860,1231,1173],{"class":870},[860,1233,1234],{"class":870},",\n",[860,1236,1237,1240,1242,1244,1247,1249],{"class":862,"line":958},[860,1238,1239],{"class":874},"    size ",[860,1241,942],{"class":870},[860,1243,1201],{"class":870},[860,1245,1246],{"class":887},"md",[860,1248,1173],{"class":870},[860,1250,1234],{"class":870},[860,1252,1253,1256,1258,1262],{"class":862,"line":975},[860,1254,1255],{"class":874},"    checked ",[860,1257,942],{"class":870},[860,1259,1261],{"class":1260},"sfNiH"," false",[860,1263,1234],{"class":870},[860,1265,1266,1269,1271,1273],{"class":862,"line":991},[860,1267,1268],{"class":874},"    disabled ",[860,1270,942],{"class":870},[860,1272,1261],{"class":1260},[860,1274,1234],{"class":870},[860,1276,1277,1280],{"class":862,"line":996},[860,1278,1279],{"class":874},"    label",[860,1281,1234],{"class":870},[860,1283,1285,1288,1291,1294],{"class":862,"line":1284},10,[860,1286,1287],{"class":870},"}",[860,1289,1290],{"class":870}," =",[860,1292,1293],{"class":945}," defineProps",[860,1295,1296],{"class":870},"\u003C{\n",[860,1298,1300,1303,1306,1308,1310,1312,1315,1317,1319,1321,1323,1325,1327,1329],{"class":862,"line":1299},11,[860,1301,1302],{"class":1161},"    color",[860,1304,1305],{"class":870},"?:",[860,1307,1201],{"class":870},[860,1309,754],{"class":887},[860,1311,1173],{"class":870},[860,1313,1314],{"class":870}," |",[860,1316,1201],{"class":870},[860,1318,758],{"class":887},[860,1320,1173],{"class":870},[860,1322,1314],{"class":870},[860,1324,1201],{"class":870},[860,1326,761],{"class":887},[860,1328,1173],{"class":870},[860,1330,894],{"class":870},[860,1332,1334,1337,1339,1341,1344,1346,1348,1350,1352,1354,1356,1358,1361,1363],{"class":862,"line":1333},12,[860,1335,1336],{"class":1161},"    size",[860,1338,1305],{"class":870},[860,1340,1201],{"class":870},[860,1342,1343],{"class":887},"sm",[860,1345,1173],{"class":870},[860,1347,1314],{"class":870},[860,1349,1201],{"class":870},[860,1351,1246],{"class":887},[860,1353,1173],{"class":870},[860,1355,1314],{"class":870},[860,1357,1201],{"class":870},[860,1359,1360],{"class":887},"lg",[860,1362,1173],{"class":870},[860,1364,894],{"class":870},[860,1366,1368,1371,1373,1377],{"class":862,"line":1367},13,[860,1369,1370],{"class":1161},"    checked",[860,1372,1305],{"class":870},[860,1374,1376],{"class":1375},"sBMFI"," boolean",[860,1378,894],{"class":870},[860,1380,1382,1385,1387,1389],{"class":862,"line":1381},14,[860,1383,1384],{"class":1161},"    disabled",[860,1386,1305],{"class":870},[860,1388,1376],{"class":1375},[860,1390,894],{"class":870},[860,1392,1394,1396,1398,1401],{"class":862,"line":1393},15,[860,1395,1279],{"class":1161},[860,1397,1305],{"class":870},[860,1399,1400],{"class":1375}," string",[860,1402,894],{"class":870},[860,1404,1406,1409,1411],{"class":862,"line":1405},16,[860,1407,1408],{"class":870},"}>",[860,1410,948],{"class":874},[860,1412,894],{"class":870},[860,1414,1416,1419,1421],{"class":862,"line":1415},17,[860,1417,1418],{"class":870},"\u003C\u002F",[860,1420,1162],{"class":1161},[860,1422,1180],{"class":870},[860,1424,1426],{"class":862,"line":1425},18,[860,1427,929],{"emptyLinePlaceholder":223},[860,1429,1431,1433,1435],{"class":862,"line":1430},19,[860,1432,1158],{"class":870},[860,1434,1144],{"class":1161},[860,1436,1180],{"class":870},[860,1438,1440,1443,1446,1449,1451,1453,1456,1458],{"class":862,"line":1439},20,[860,1441,1442],{"class":870},"    \u003C",[860,1444,1445],{"class":1161},"label",[860,1447,1448],{"class":935}," :class",[860,1450,942],{"class":870},[860,1452,1173],{"class":870},[860,1454,1455],{"class":887},"switchRecipe({ size })",[860,1457,1173],{"class":870},[860,1459,1180],{"class":870},[860,1461,1463,1466],{"class":862,"line":1462},21,[860,1464,1465],{"class":870},"        \u003C",[860,1467,1468],{"class":1161},"input\n",[860,1470,1472,1475,1477,1479,1482],{"class":862,"line":1471},22,[860,1473,1474],{"class":935},"            type",[860,1476,942],{"class":870},[860,1478,1173],{"class":870},[860,1480,1481],{"class":887},"checkbox",[860,1483,1484],{"class":870},"\"\n",[860,1486,1488,1491,1493,1495,1498],{"class":862,"line":1487},23,[860,1489,1490],{"class":935},"            role",[860,1492,942],{"class":870},[860,1494,1173],{"class":870},[860,1496,1497],{"class":887},"switch",[860,1499,1484],{"class":870},[860,1501,1503,1506,1508,1510,1513],{"class":862,"line":1502},24,[860,1504,1505],{"class":935},"            :class",[860,1507,942],{"class":870},[860,1509,1173],{"class":870},[860,1511,1512],{"class":887},"switchField({ color, size })",[860,1514,1484],{"class":870},[860,1516,1518,1521,1523,1525,1528],{"class":862,"line":1517},25,[860,1519,1520],{"class":935},"            :checked",[860,1522,942],{"class":870},[860,1524,1173],{"class":870},[860,1526,1527],{"class":887},"checked",[860,1529,1484],{"class":870},[860,1531,1533,1536,1538,1540,1543],{"class":862,"line":1532},26,[860,1534,1535],{"class":935},"            :disabled",[860,1537,942],{"class":870},[860,1539,1173],{"class":870},[860,1541,1542],{"class":887},"disabled",[860,1544,1484],{"class":870},[860,1546,1548],{"class":862,"line":1547},27,[860,1549,1550],{"class":870},"        \u002F>\n",[860,1552,1554,1556,1558,1561,1564,1566,1568],{"class":862,"line":1553},28,[860,1555,1465],{"class":870},[860,1557,860],{"class":1161},[860,1559,1560],{"class":870},">",[860,1562,1563],{"class":874},"{{ label }}",[860,1565,1418],{"class":870},[860,1567,860],{"class":1161},[860,1569,1180],{"class":870},[860,1571,1573,1576,1578],{"class":862,"line":1572},29,[860,1574,1575],{"class":870},"    \u003C\u002F",[860,1577,1445],{"class":1161},[860,1579,1180],{"class":870},[860,1581,1583,1585,1587],{"class":862,"line":1582},30,[860,1584,1418],{"class":870},[860,1586,1144],{"class":1161},[860,1588,1180],{"class":870},[1144,1590,1591],{"v-slot:react":856},[851,1592,1595],{"className":853,"code":1593,"filename":1594,"language":855,"meta":856,"style":856},"import { switchRecipe, switchField } from \"virtual:styleframe\";\n\ninterface SwitchProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    checked?: boolean;\n    disabled?: boolean;\n    label?: string;\n}\n\nexport function Switch({\n    color = \"neutral\",\n    size = \"md\",\n    checked = false,\n    disabled = false,\n    label,\n}: SwitchProps) {\n    return (\n        \u003Clabel className={switchRecipe({ size })}>\n            \u003Cinput\n                type=\"checkbox\"\n                role=\"switch\"\n                className={switchField({ color, size })}\n                checked={checked}\n                disabled={disabled}\n                readOnly\n            \u002F>\n            \u003Cspan>{label}\u003C\u002Fspan>\n        \u003C\u002Flabel>\n    );\n}\n","src\u002Fcomponents\u002FSwitch.tsx",[708,1596,1597,1621,1625,1635,1665,1695,1705,1715,1725,1730,1734,1747,1762,1776,1786,1796,1802,1814,1822,1845,1852,1865,1878,1899,1910,1921,1926,1931,1951,1960,1967],{"__ignoreMap":856},[860,1598,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1619],{"class":862,"line":863},[860,1600,867],{"class":866},[860,1602,871],{"class":870},[860,1604,1189],{"class":874},[860,1606,907],{"class":870},[860,1608,1194],{"class":874},[860,1610,878],{"class":870},[860,1612,881],{"class":866},[860,1614,1201],{"class":870},[860,1616,888],{"class":887},[860,1618,1173],{"class":870},[860,1620,894],{"class":870},[860,1622,1623],{"class":862,"line":897},[860,1624,929],{"emptyLinePlaceholder":223},[860,1626,1627,1630,1633],{"class":862,"line":926},[860,1628,1629],{"class":935},"interface",[860,1631,1632],{"class":1375}," SwitchProps",[860,1634,1218],{"class":870},[860,1636,1637,1639,1641,1643,1645,1647,1649,1651,1653,1655,1657,1659,1661,1663],{"class":862,"line":932},[860,1638,1302],{"class":1161},[860,1640,1305],{"class":870},[860,1642,1201],{"class":870},[860,1644,754],{"class":887},[860,1646,1173],{"class":870},[860,1648,1314],{"class":870},[860,1650,1201],{"class":870},[860,1652,758],{"class":887},[860,1654,1173],{"class":870},[860,1656,1314],{"class":870},[860,1658,1201],{"class":870},[860,1660,761],{"class":887},[860,1662,1173],{"class":870},[860,1664,894],{"class":870},[860,1666,1667,1669,1671,1673,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693],{"class":862,"line":953},[860,1668,1336],{"class":1161},[860,1670,1305],{"class":870},[860,1672,1201],{"class":870},[860,1674,1343],{"class":887},[860,1676,1173],{"class":870},[860,1678,1314],{"class":870},[860,1680,1201],{"class":870},[860,1682,1246],{"class":887},[860,1684,1173],{"class":870},[860,1686,1314],{"class":870},[860,1688,1201],{"class":870},[860,1690,1360],{"class":887},[860,1692,1173],{"class":870},[860,1694,894],{"class":870},[860,1696,1697,1699,1701,1703],{"class":862,"line":958},[860,1698,1370],{"class":1161},[860,1700,1305],{"class":870},[860,1702,1376],{"class":1375},[860,1704,894],{"class":870},[860,1706,1707,1709,1711,1713],{"class":862,"line":975},[860,1708,1384],{"class":1161},[860,1710,1305],{"class":870},[860,1712,1376],{"class":1375},[860,1714,894],{"class":870},[860,1716,1717,1719,1721,1723],{"class":862,"line":991},[860,1718,1279],{"class":1161},[860,1720,1305],{"class":870},[860,1722,1400],{"class":1375},[860,1724,894],{"class":870},[860,1726,1727],{"class":862,"line":996},[860,1728,1729],{"class":870},"}\n",[860,1731,1732],{"class":862,"line":1284},[860,1733,929],{"emptyLinePlaceholder":223},[860,1735,1736,1738,1741,1744],{"class":862,"line":1299},[860,1737,999],{"class":866},[860,1739,1740],{"class":935}," function",[860,1742,1743],{"class":945}," Switch",[860,1745,1746],{"class":870},"({\n",[860,1748,1749,1752,1754,1756,1758,1760],{"class":862,"line":1333},[860,1750,1302],{"class":1751},"sHdIc",[860,1753,1290],{"class":870},[860,1755,1201],{"class":870},[860,1757,761],{"class":887},[860,1759,1173],{"class":870},[860,1761,1234],{"class":870},[860,1763,1764,1766,1768,1770,1772,1774],{"class":862,"line":1367},[860,1765,1336],{"class":1751},[860,1767,1290],{"class":870},[860,1769,1201],{"class":870},[860,1771,1246],{"class":887},[860,1773,1173],{"class":870},[860,1775,1234],{"class":870},[860,1777,1778,1780,1782,1784],{"class":862,"line":1381},[860,1779,1370],{"class":1751},[860,1781,1290],{"class":870},[860,1783,1261],{"class":1260},[860,1785,1234],{"class":870},[860,1787,1788,1790,1792,1794],{"class":862,"line":1393},[860,1789,1384],{"class":1751},[860,1791,1290],{"class":870},[860,1793,1261],{"class":1260},[860,1795,1234],{"class":870},[860,1797,1798,1800],{"class":862,"line":1405},[860,1799,1279],{"class":1751},[860,1801,1234],{"class":870},[860,1803,1804,1807,1809,1812],{"class":862,"line":1415},[860,1805,1806],{"class":870},"}:",[860,1808,1632],{"class":1375},[860,1810,1811],{"class":870},")",[860,1813,1218],{"class":870},[860,1815,1816,1819],{"class":862,"line":1425},[860,1817,1818],{"class":866},"    return",[860,1820,1821],{"class":1161}," (\n",[860,1823,1824,1826,1828,1831,1834,1836,1839,1842],{"class":862,"line":1430},[860,1825,1465],{"class":870},[860,1827,1445],{"class":874},[860,1829,1830],{"class":874}," className",[860,1832,1833],{"class":870},"={",[860,1835,1123],{"class":1161},[860,1837,1838],{"class":870},"({",[860,1840,1841],{"class":1751}," size",[860,1843,1844],{"class":870}," })}>\n",[860,1846,1847,1850],{"class":862,"line":1439},[860,1848,1849],{"class":870},"            \u003C",[860,1851,1468],{"class":1751},[860,1853,1854,1857,1859,1861,1863],{"class":862,"line":1462},[860,1855,1856],{"class":874},"                type",[860,1858,942],{"class":870},[860,1860,1173],{"class":870},[860,1862,1481],{"class":887},[860,1864,1484],{"class":870},[860,1866,1867,1870,1872,1874,1876],{"class":862,"line":1471},[860,1868,1869],{"class":874},"                role",[860,1871,942],{"class":870},[860,1873,1173],{"class":870},[860,1875,1497],{"class":887},[860,1877,1484],{"class":870},[860,1879,1880,1883,1885,1887,1889,1892,1894,1896],{"class":862,"line":1487},[860,1881,1882],{"class":874},"                className",[860,1884,1833],{"class":870},[860,1886,1131],{"class":1161},[860,1888,1838],{"class":870},[860,1890,1891],{"class":1751}," color",[860,1893,907],{"class":870},[860,1895,1841],{"class":1751},[860,1897,1898],{"class":870}," })}\n",[860,1900,1901,1904,1906,1908],{"class":862,"line":1502},[860,1902,1903],{"class":874},"                checked",[860,1905,1833],{"class":870},[860,1907,1527],{"class":874},[860,1909,1729],{"class":870},[860,1911,1912,1915,1917,1919],{"class":862,"line":1517},[860,1913,1914],{"class":874},"                disabled",[860,1916,1833],{"class":870},[860,1918,1542],{"class":874},[860,1920,1729],{"class":870},[860,1922,1923],{"class":862,"line":1532},[860,1924,1925],{"class":1751},"                readOnly\n",[860,1927,1928],{"class":862,"line":1547},[860,1929,1930],{"class":870},"            \u002F>\n",[860,1932,1933,1935,1937,1939,1942,1944,1947,1949],{"class":862,"line":1553},[860,1934,1849],{"class":1161},[860,1936,860],{"class":1375},[860,1938,1560],{"class":1161},[860,1940,1941],{"class":870},"{",[860,1943,1445],{"class":874},[860,1945,1946],{"class":870},"}\u003C\u002F",[860,1948,860],{"class":874},[860,1950,1180],{"class":870},[860,1952,1953,1956,1958],{"class":862,"line":1572},[860,1954,1955],{"class":870},"        \u003C\u002F",[860,1957,1445],{"class":874},[860,1959,1180],{"class":870},[860,1961,1962,1965],{"class":862,"line":1582},[860,1963,1964],{"class":1161},"    )",[860,1966,894],{"class":870},[860,1968,1970],{"class":862,"line":1969},31,[860,1971,1729],{"class":870},[1144,1973,1974,1984,2109],{"v-slot:other":856},[692,1975,694,1976,1979,1980,1983],{},[708,1977,1978],{},"switchRecipe()"," and ",[708,1981,1982],{},"switchField()"," runtimes each return a class string. Apply them however your framework binds classes:",[851,1985,1988],{"className":853,"code":1986,"filename":1987,"language":855,"meta":856,"style":856},"import { switchRecipe, switchField } from \"virtual:styleframe\";\n\nconst wrapperClasses = switchRecipe({ size: \"md\" });\n\u002F\u002F → \"switch _display:inline-flex _align-items:center ...\"\n\nconst fieldClasses = switchField({ color: \"neutral\", size: \"md\" });\n\u002F\u002F → \"switch-field _appearance:none _border-radius:full ...\"\n","src\u002Fcomponents\u002Fswitch.ts",[708,1989,1990,2014,2018,2051,2057,2061,2104],{"__ignoreMap":856},[860,1991,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012],{"class":862,"line":863},[860,1993,867],{"class":866},[860,1995,871],{"class":870},[860,1997,1189],{"class":874},[860,1999,907],{"class":870},[860,2001,1194],{"class":874},[860,2003,878],{"class":870},[860,2005,881],{"class":866},[860,2007,1201],{"class":870},[860,2009,888],{"class":887},[860,2011,1173],{"class":870},[860,2013,894],{"class":870},[860,2015,2016],{"class":862,"line":897},[860,2017,929],{"emptyLinePlaceholder":223},[860,2019,2020,2022,2025,2027,2029,2032,2034,2036,2039,2041,2043,2045,2047,2049],{"class":862,"line":926},[860,2021,936],{"class":935},[860,2023,2024],{"class":874}," wrapperClasses ",[860,2026,942],{"class":870},[860,2028,1189],{"class":945},[860,2030,2031],{"class":874},"(",[860,2033,1941],{"class":870},[860,2035,1841],{"class":1161},[860,2037,2038],{"class":870},":",[860,2040,1201],{"class":870},[860,2042,1246],{"class":887},[860,2044,1173],{"class":870},[860,2046,878],{"class":870},[860,2048,1811],{"class":874},[860,2050,894],{"class":870},[860,2052,2053],{"class":862,"line":932},[860,2054,2056],{"class":2055},"sHwdD","\u002F\u002F → \"switch _display:inline-flex _align-items:center ...\"\n",[860,2058,2059],{"class":862,"line":953},[860,2060,929],{"emptyLinePlaceholder":223},[860,2062,2063,2065,2068,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102],{"class":862,"line":958},[860,2064,936],{"class":935},[860,2066,2067],{"class":874}," fieldClasses ",[860,2069,942],{"class":870},[860,2071,1194],{"class":945},[860,2073,2031],{"class":874},[860,2075,1941],{"class":870},[860,2077,1891],{"class":1161},[860,2079,2038],{"class":870},[860,2081,1201],{"class":870},[860,2083,761],{"class":887},[860,2085,1173],{"class":870},[860,2087,907],{"class":870},[860,2089,1841],{"class":1161},[860,2091,2038],{"class":870},[860,2093,1201],{"class":870},[860,2095,1246],{"class":887},[860,2097,1173],{"class":870},[860,2099,878],{"class":870},[860,2101,1811],{"class":874},[860,2103,894],{"class":870},[860,2105,2106],{"class":862,"line":975},[860,2107,2108],{"class":2055},"\u002F\u002F → \"switch-field _appearance:none _border-radius:full ...\"\n",[851,2110,2115],{"className":2111,"code":2112,"filename":2113,"language":2114,"meta":856,"style":856},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Clabel class=\"switch _display:inline-flex _align-items:center ...\">\n    \u003Cinput type=\"checkbox\" role=\"switch\" class=\"switch-field _appearance:none ...\" \u002F>\n    \u003Cspan>Enable notifications\u003C\u002Fspan>\n\u003C\u002Flabel>\n","src\u002Fcomponents\u002Fswitch.html","html",[708,2116,2117,2137,2180,2197],{"__ignoreMap":856},[860,2118,2119,2121,2123,2126,2128,2130,2133,2135],{"class":862,"line":863},[860,2120,1158],{"class":870},[860,2122,1445],{"class":1161},[860,2124,2125],{"class":935}," class",[860,2127,942],{"class":870},[860,2129,1173],{"class":870},[860,2131,2132],{"class":887},"switch _display:inline-flex _align-items:center ...",[860,2134,1173],{"class":870},[860,2136,1180],{"class":870},[860,2138,2139,2141,2144,2147,2149,2151,2153,2155,2158,2160,2162,2164,2166,2168,2170,2172,2175,2177],{"class":862,"line":897},[860,2140,1442],{"class":870},[860,2142,2143],{"class":1161},"input",[860,2145,2146],{"class":935}," type",[860,2148,942],{"class":870},[860,2150,1173],{"class":870},[860,2152,1481],{"class":887},[860,2154,1173],{"class":870},[860,2156,2157],{"class":935}," role",[860,2159,942],{"class":870},[860,2161,1173],{"class":870},[860,2163,1497],{"class":887},[860,2165,1173],{"class":870},[860,2167,2125],{"class":935},[860,2169,942],{"class":870},[860,2171,1173],{"class":870},[860,2173,2174],{"class":887},"switch-field _appearance:none ...",[860,2176,1173],{"class":870},[860,2178,2179],{"class":870}," \u002F>\n",[860,2181,2182,2184,2186,2188,2191,2193,2195],{"class":862,"line":926},[860,2183,1442],{"class":870},[860,2185,860],{"class":1161},[860,2187,1560],{"class":870},[860,2189,2190],{"class":874},"Enable notifications",[860,2192,1418],{"class":870},[860,2194,860],{"class":1161},[860,2196,1180],{"class":870},[860,2198,2199,2201,2203],{"class":862,"line":932},[860,2200,1418],{"class":870},[860,2202,1445],{"class":1161},[860,2204,1180],{"class":870},[835,2206,2208],{"id":2207},"see-it-in-action","See it in action",[2210,2211],"story-preview",{"story":2212,":panel":2213},"theme-recipes-forms-switch--default","true",[688,2215,195],{"id":2216},"colors",[692,2218,2219,2220,755,2222,2224,2225,2227,2228,1979,2230,2232,2233,2235,2236,2238],{},"The Switch field includes 3 color variants: ",[708,2221,754],{},[708,2223,758],{},", and ",[708,2226,761],{},". Like the ",[770,2229,436],{"href":437},[770,2231,452],{"href":453}," recipes, these are neutral-spectrum surface colors rather than status colors — the color sets the ",[748,2234,750],{}," track background, while the white knob and the on-track fill (",[708,2237,733],{},") stay the same across all three.",[692,2240,694,2241,2243],{},[708,2242,761],{}," color adapts automatically: a light track in light mode and a dark track in dark mode, making it the safest default for general-purpose forms.",[2210,2245],{"story":2246,":panel":2213},"theme-recipes-forms-switch--neutral",[2248,2249,2251],"h3",{"id":2250},"color-reference","Color Reference",[2210,2253],{"story":2254,":height":2255},"theme-recipes-forms-switch--all-states","420",[2257,2258,2259,2275],"table",{},[2260,2261,2262],"thead",{},[2263,2264,2265,2269,2272],"tr",{},[2266,2267,2268],"th",{},"Color",[2266,2270,2271],{},"Token",[2266,2273,2274],{},"Use Case",[2276,2277,2278,2293,2307],"tbody",{},[2263,2279,2280,2285,2290],{},[2281,2282,2283],"td",{},[708,2284,754],{},[2281,2286,2287],{},[708,2288,2289],{},"@color.gray-300",[2281,2291,2292],{},"Light surfaces, stays light in dark mode",[2263,2294,2295,2299,2304],{},[2281,2296,2297],{},[708,2298,758],{},[2281,2300,2301],{},[708,2302,2303],{},"@color.gray-700",[2281,2305,2306],{},"Dark surfaces, stays dark in light mode",[2263,2308,2309,2313,2316],{},[2281,2310,2311],{},[708,2312,761],{},[2281,2314,2315],{},"Adaptive (light ↔ dark)",[2281,2317,2318],{},"Default color, adapts to the current color scheme",[2320,2321,2322,2325,2326,2328],"tip",{},[696,2323,2324],{},"Pro tip:"," Use ",[708,2327,761],{}," as your default switch color. It adapts to the user's color scheme automatically, so you don't need to manage light and dark tracks separately.",[688,2330,2332],{"id":2331},"sizes","Sizes",[692,2334,2335,2336,2338,2339,2341,2342,2345,2346,2349],{},"Three size variants from ",[708,2337,1343],{}," to ",[708,2340,1360],{}," control the track dimensions and the knob. The knob is a white SVG ",[708,2343,2344],{},"background-image"," that slides from the left of the track to the right when the switch turns on, with the travel expressed as ",[708,2347,2348],{},"calc(100% - 2px)"," so it stays a uniform inset at every size.",[2210,2351],{"story":2352,":height":2353},"theme-recipes-forms-switch--all-sizes","320",[2248,2355,2357],{"id":2356},"size-reference","Size Reference",[2257,2359,2360,2373],{},[2260,2361,2362],{},[2263,2363,2364,2367,2370],{},[2266,2365,2366],{},"Size",[2266,2368,2369],{},"Track (W×H)",[2266,2371,2372],{},"Knob",[2276,2374,2375,2395,2414],{},[2263,2376,2377,2381,2390],{},[2281,2378,2379],{},[708,2380,1343],{},[2281,2382,2383,2386,2387],{},[708,2384,2385],{},"32px"," × ",[708,2388,2389],{},"18px",[2281,2391,2392],{},[708,2393,2394],{},"14px",[2263,2396,2397,2401,2409],{},[2281,2398,2399],{},[708,2400,1246],{},[2281,2402,2403,2386,2406],{},[708,2404,2405],{},"36px",[708,2407,2408],{},"20px",[2281,2410,2411],{},[708,2412,2413],{},"16px",[2263,2415,2416,2420,2428],{},[2281,2417,2418],{},[708,2419,1360],{},[2281,2421,2422,2386,2425],{},[708,2423,2424],{},"44px",[708,2426,2427],{},"24px",[2281,2429,2430],{},[708,2431,2408],{},[2433,2434,2435,2438,2439,2442,2443,2445,2446,2448,2449,2452],"note",{},[696,2436,2437],{},"Good to know:"," Pass the same ",[708,2440,2441],{},"size"," to the ",[708,2444,1123],{}," wrapper and the ",[708,2447,1131],{}," switch so the label typography, gap, and track scale together. The track radius is always ",[708,2450,2451],{},"@border-radius.full",", so it stays a pill at every size.",[688,2454,342],{"id":2455},"states",[692,2457,2458,2459,2462],{},"The field's states ride on native pseudo-classes, so they reflect the real ",[708,2460,2461],{},"\u003Cinput>"," without extra wiring.",[2248,2464,2466],{"id":2465},"on","On",[692,2468,2469,730,2471,2473,2474,2476,2477,2480],{},[708,2470,729],{},[708,2472,733],{}," and slides the white knob to the right. Bind the native ",[708,2475,1527],{}," attribute (or ",[708,2478,2479],{},"v-model"," \u002F controlled value) as usual.",[2210,2482],{"story":2483,":panel":2213},"theme-recipes-forms-switch--checked",[2248,2485,2486],{"id":1542},"Disabled",[692,2488,2489,2491,2492,2495,2496,2499,2500,2503,2504,2506],{},[708,2490,741],{}," dims the switch to ",[708,2493,2494],{},"0.5"," opacity and switches the cursor to ",[708,2497,2498],{},"not-allowed","; the wrapper dims its label to match via ",[708,2501,2502],{},":has()",". Mirror it with the native ",[708,2505,1542],{}," attribute so the input is also removed from the tab order.",[2210,2508],{"story":2509,":panel":2213},"theme-recipes-forms-switch--disabled",[688,2511,2513],{"id":2512},"anatomy","Anatomy",[692,2515,2516],{},"The Switch is composed of two independent recipes: a label wrapper and the native input switch.",[2257,2518,2519,2532],{},[2260,2520,2521],{},[2263,2522,2523,2526,2529],{},[2266,2524,2525],{},"Part",[2266,2527,2528],{},"Recipe",[2266,2530,2531],{},"Role",[2276,2533,2534,2554],{},[2263,2535,2536,2541,2545],{},[2281,2537,2538],{},[696,2539,2540],{},"Wrapper",[2281,2542,2543],{},[708,2544,710],{},[2281,2546,694,2547,2550,2551,2553],{},[708,2548,2549],{},".switch"," ",[708,2552,1127],{}," — owns inline layout (gap, alignment), label typography, and disabled-label dimming",[2263,2555,2556,2561,2565],{},[2281,2557,2558],{},[696,2559,2560],{},"Field",[2281,2562,2563],{},[708,2564,718],{},[2281,2566,694,2567,2570,2571,2573],{},[708,2568,2569],{},".switch-field"," native ",[708,2572,725],{}," — owns the track, knob, color surface, and on \u002F disabled \u002F focus states",[851,2575,2577],{"className":2111,"code":2576,"language":2114,"meta":856,"style":856},"\u003Clabel class=\"switchRecipe(...)\">\n    \u003Cinput type=\"checkbox\" role=\"switch\" class=\"switchField(...)\" \u002F>\n    \u003Cspan>Enable notifications\u003C\u002Fspan>\n\u003C\u002Flabel>\n",[708,2578,2579,2598,2637,2653],{"__ignoreMap":856},[860,2580,2581,2583,2585,2587,2589,2591,2594,2596],{"class":862,"line":863},[860,2582,1158],{"class":870},[860,2584,1445],{"class":1161},[860,2586,2125],{"class":935},[860,2588,942],{"class":870},[860,2590,1173],{"class":870},[860,2592,2593],{"class":887},"switchRecipe(...)",[860,2595,1173],{"class":870},[860,2597,1180],{"class":870},[860,2599,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618,2620,2622,2624,2626,2628,2630,2633,2635],{"class":862,"line":897},[860,2601,1442],{"class":870},[860,2603,2143],{"class":1161},[860,2605,2146],{"class":935},[860,2607,942],{"class":870},[860,2609,1173],{"class":870},[860,2611,1481],{"class":887},[860,2613,1173],{"class":870},[860,2615,2157],{"class":935},[860,2617,942],{"class":870},[860,2619,1173],{"class":870},[860,2621,1497],{"class":887},[860,2623,1173],{"class":870},[860,2625,2125],{"class":935},[860,2627,942],{"class":870},[860,2629,1173],{"class":870},[860,2631,2632],{"class":887},"switchField(...)",[860,2634,1173],{"class":870},[860,2636,2179],{"class":870},[860,2638,2639,2641,2643,2645,2647,2649,2651],{"class":862,"line":926},[860,2640,1442],{"class":870},[860,2642,860],{"class":1161},[860,2644,1560],{"class":870},[860,2646,2190],{"class":874},[860,2648,1418],{"class":870},[860,2650,860],{"class":1161},[860,2652,1180],{"class":870},[860,2654,2655,2657,2659],{"class":862,"line":932},[860,2656,1418],{"class":870},[860,2658,1445],{"class":1161},[860,2660,1180],{"class":870},[692,2662,2663,2664,2667],{},"The wrapper dims its own label when it contains a disabled field, using ",[708,2665,2666],{},":has(.switch-field:disabled)",", so a disabled switch and its text fade together without extra props.",[688,2669,568],{"id":2670},"accessibility",[700,2672,2673,2686,2695,2709,2721,2734],{},[703,2674,2675,2678,2679,2681,2682,2685],{},[696,2676,2677],{},"Label every switch."," Wrap the input and its text in the ",[708,2680,1127],{}," (as the wrapper does) or associate a separate ",[708,2683,2684],{},"\u003Clabel for=\"...\">",". The recipe styles the control but does not provide a name.",[703,2687,2688,2694],{},[696,2689,2690,2691,2693],{},"Add ",[708,2692,1138],{},"."," It keeps the native checkbox semantics (Space toggles, form submission) while telling assistive technology to announce \"on \u002F off\" rather than \"checked \u002F unchecked\".",[703,2696,2697,2700,2701,2704,2705,2708],{},[696,2698,2699],{},"Keep the native input."," Styling the real ",[708,2702,2703],{},"\u003Cinput type=\"checkbox\">"," with ",[708,2706,2707],{},"appearance: none"," preserves keyboard operation, focus order, and form submission for free.",[703,2710,2711,2717,2718,2720],{},[696,2712,2713,2714,2716],{},"Mirror ",[708,2715,1542],{}," on the input."," Set the real ",[708,2719,1542],{}," attribute in addition to the recipe state so the field leaves the tab order.",[703,2722,2723,2726,2727,2733],{},[696,2724,2725],{},"Don't rely on color alone."," The on state is conveyed by the knob's position, not just the track fill, satisfying ",[770,2728,2732],{"href":2729,"rel":2730},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fuse-of-color.html",[2731],"nofollow","WCAG 1.4.1",". Keep the adjacent label text descriptive.",[703,2735,2736,2739,2740,2742,2743,2693],{},[696,2737,2738],{},"Verify contrast."," The on-track is ",[708,2741,733],{}," under a white knob. Default tokens meet WCAG AA; if you override the primary color, verify with the ",[770,2744,2747],{"href":2745,"rel":2746},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[2731],"WebAIM Contrast Checker",[688,2749,2751],{"id":2750},"customization","Customization",[2248,2753,2755],{"id":2754},"overriding-defaults","Overriding Defaults",[692,2757,2758],{},"Each switch 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 the properties you want to change:",[851,2760,2762],{"className":853,"code":2761,"filename":849,"language":855,"meta":856,"style":856},"import { styleframe } from 'virtual:styleframe';\nimport { useSwitchFieldRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst switchField = useSwitchFieldRecipe(s, {\n    defaultVariants: {\n        color: 'neutral',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[708,2763,2764,2784,2804,2808,2822,2826,2843,2852,2867,2882,2887,2895,2899],{"__ignoreMap":856},[860,2765,2766,2768,2770,2772,2774,2776,2778,2780,2782],{"class":862,"line":863},[860,2767,867],{"class":866},[860,2769,871],{"class":870},[860,2771,875],{"class":874},[860,2773,878],{"class":870},[860,2775,881],{"class":866},[860,2777,884],{"class":870},[860,2779,888],{"class":887},[860,2781,891],{"class":870},[860,2783,894],{"class":870},[860,2785,2786,2788,2790,2792,2794,2796,2798,2800,2802],{"class":862,"line":897},[860,2787,867],{"class":866},[860,2789,871],{"class":870},[860,2791,910],{"class":874},[860,2793,878],{"class":870},[860,2795,881],{"class":866},[860,2797,884],{"class":870},[860,2799,919],{"class":887},[860,2801,891],{"class":870},[860,2803,894],{"class":870},[860,2805,2806],{"class":862,"line":926},[860,2807,929],{"emptyLinePlaceholder":223},[860,2809,2810,2812,2814,2816,2818,2820],{"class":862,"line":932},[860,2811,936],{"class":935},[860,2813,939],{"class":874},[860,2815,942],{"class":870},[860,2817,875],{"class":945},[860,2819,948],{"class":874},[860,2821,894],{"class":870},[860,2823,2824],{"class":862,"line":953},[860,2825,929],{"emptyLinePlaceholder":223},[860,2827,2828,2830,2832,2834,2836,2839,2841],{"class":862,"line":958},[860,2829,936],{"class":935},[860,2831,980],{"class":874},[860,2833,942],{"class":870},[860,2835,910],{"class":945},[860,2837,2838],{"class":874},"(s",[860,2840,907],{"class":870},[860,2842,1218],{"class":870},[860,2844,2845,2848,2850],{"class":862,"line":975},[860,2846,2847],{"class":1161},"    defaultVariants",[860,2849,2038],{"class":870},[860,2851,1218],{"class":870},[860,2853,2854,2857,2859,2861,2863,2865],{"class":862,"line":991},[860,2855,2856],{"class":1161},"        color",[860,2858,2038],{"class":870},[860,2860,884],{"class":870},[860,2862,761],{"class":887},[860,2864,891],{"class":870},[860,2866,1234],{"class":870},[860,2868,2869,2872,2874,2876,2878,2880],{"class":862,"line":996},[860,2870,2871],{"class":1161},"        size",[860,2873,2038],{"class":870},[860,2875,884],{"class":870},[860,2877,1360],{"class":887},[860,2879,891],{"class":870},[860,2881,1234],{"class":870},[860,2883,2884],{"class":862,"line":1284},[860,2885,2886],{"class":870},"    },\n",[860,2888,2889,2891,2893],{"class":862,"line":1299},[860,2890,1287],{"class":870},[860,2892,1811],{"class":874},[860,2894,894],{"class":870},[860,2896,2897],{"class":862,"line":1333},[860,2898,929],{"emptyLinePlaceholder":223},[860,2900,2901,2903,2905,2907],{"class":862,"line":1367},[860,2902,999],{"class":866},[860,2904,1002],{"class":866},[860,2906,1005],{"class":874},[860,2908,894],{"class":870},[2248,2910,2912],{"id":2911},"filtering-variants","Filtering Variants",[692,2914,2915,2916,2919],{},"If you only need a subset of the available variants, use the ",[708,2917,2918],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[851,2921,2923],{"className":853,"code":2922,"filename":849,"language":855,"meta":856,"style":856},"import { styleframe } from 'virtual:styleframe';\nimport { useSwitchFieldRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the neutral color\nconst switchField = useSwitchFieldRecipe(s, {\n    filter: {\n        color: ['neutral'],\n    },\n});\n\nexport default s;\n",[708,2924,2925,2945,2965,2969,2983,2987,2992,3008,3017,3037,3041,3049,3053],{"__ignoreMap":856},[860,2926,2927,2929,2931,2933,2935,2937,2939,2941,2943],{"class":862,"line":863},[860,2928,867],{"class":866},[860,2930,871],{"class":870},[860,2932,875],{"class":874},[860,2934,878],{"class":870},[860,2936,881],{"class":866},[860,2938,884],{"class":870},[860,2940,888],{"class":887},[860,2942,891],{"class":870},[860,2944,894],{"class":870},[860,2946,2947,2949,2951,2953,2955,2957,2959,2961,2963],{"class":862,"line":897},[860,2948,867],{"class":866},[860,2950,871],{"class":870},[860,2952,910],{"class":874},[860,2954,878],{"class":870},[860,2956,881],{"class":866},[860,2958,884],{"class":870},[860,2960,919],{"class":887},[860,2962,891],{"class":870},[860,2964,894],{"class":870},[860,2966,2967],{"class":862,"line":926},[860,2968,929],{"emptyLinePlaceholder":223},[860,2970,2971,2973,2975,2977,2979,2981],{"class":862,"line":932},[860,2972,936],{"class":935},[860,2974,939],{"class":874},[860,2976,942],{"class":870},[860,2978,875],{"class":945},[860,2980,948],{"class":874},[860,2982,894],{"class":870},[860,2984,2985],{"class":862,"line":953},[860,2986,929],{"emptyLinePlaceholder":223},[860,2988,2989],{"class":862,"line":958},[860,2990,2991],{"class":2055},"\u002F\u002F Only generate the neutral color\n",[860,2993,2994,2996,2998,3000,3002,3004,3006],{"class":862,"line":975},[860,2995,936],{"class":935},[860,2997,980],{"class":874},[860,2999,942],{"class":870},[860,3001,910],{"class":945},[860,3003,2838],{"class":874},[860,3005,907],{"class":870},[860,3007,1218],{"class":870},[860,3009,3010,3013,3015],{"class":862,"line":991},[860,3011,3012],{"class":1161},"    filter",[860,3014,2038],{"class":870},[860,3016,1218],{"class":870},[860,3018,3019,3021,3023,3026,3028,3030,3032,3035],{"class":862,"line":996},[860,3020,2856],{"class":1161},[860,3022,2038],{"class":870},[860,3024,3025],{"class":874}," [",[860,3027,891],{"class":870},[860,3029,761],{"class":887},[860,3031,891],{"class":870},[860,3033,3034],{"class":874},"]",[860,3036,1234],{"class":870},[860,3038,3039],{"class":862,"line":1284},[860,3040,2886],{"class":870},[860,3042,3043,3045,3047],{"class":862,"line":1299},[860,3044,1287],{"class":870},[860,3046,1811],{"class":874},[860,3048,894],{"class":870},[860,3050,3051],{"class":862,"line":1333},[860,3052,929],{"emptyLinePlaceholder":223},[860,3054,3055,3057,3059,3061],{"class":862,"line":1367},[860,3056,999],{"class":866},[860,3058,1002],{"class":866},[860,3060,1005],{"class":874},[860,3062,894],{"class":870},[2433,3064,3065,3067],{},[696,3066,2437],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,3069,73],{"id":3070},"api-reference",[2248,3072,3074],{"id":3073},"useswitchrecipes-options",[708,3075,3076],{},"useSwitchRecipe(s, options?)",[692,3078,3079,3080,2550,3082,3084],{},"Creates the switch wrapper recipe — the ",[708,3081,2549],{},[708,3083,1127],{}," that lays out the switch and label and dims the label when the nested field is disabled.",[692,3086,3087],{},[696,3088,3089],{},"Parameters:",[2257,3091,3092,3105],{},[2260,3093,3094],{},[2263,3095,3096,3099,3102],{},[2266,3097,3098],{},"Parameter",[2266,3100,3101],{},"Type",[2266,3103,3104],{},"Description",[2276,3106,3107,3122,3137,3152,3167,3182],{},[2263,3108,3109,3114,3119],{},[2281,3110,3111],{},[708,3112,3113],{},"s",[2281,3115,3116],{},[708,3117,3118],{},"Styleframe",[2281,3120,3121],{},"The Styleframe instance",[2263,3123,3124,3129,3134],{},[2281,3125,3126],{},[708,3127,3128],{},"options",[2281,3130,3131],{},[708,3132,3133],{},"DeepPartial\u003CRecipeConfig>",[2281,3135,3136],{},"Optional overrides for the recipe configuration",[2263,3138,3139,3144,3149],{},[2281,3140,3141],{},[708,3142,3143],{},"options.base",[2281,3145,3146],{},[708,3147,3148],{},"VariantDeclarationsBlock",[2281,3150,3151],{},"Custom base styles for the wrapper",[2263,3153,3154,3159,3164],{},[2281,3155,3156],{},[708,3157,3158],{},"options.variants",[2281,3160,3161],{},[708,3162,3163],{},"Variants",[2281,3165,3166],{},"Custom variant definitions for the recipe",[2263,3168,3169,3174,3179],{},[2281,3170,3171],{},[708,3172,3173],{},"options.defaultVariants",[2281,3175,3176],{},[708,3177,3178],{},"Record\u003Ckeyof Variants, string>",[2281,3180,3181],{},"Default variant values for the recipe",[2263,3183,3184,3189,3194],{},[2281,3185,3186],{},[708,3187,3188],{},"options.filter",[2281,3190,3191],{},[708,3192,3193],{},"Record\u003Cstring, string[]>",[2281,3195,3196],{},"Limit which variant values are generated",[692,3198,3199],{},[696,3200,3201],{},"Variants:",[2257,3203,3204,3217],{},[2260,3205,3206],{},[2263,3207,3208,3211,3214],{},[2266,3209,3210],{},"Variant",[2266,3212,3213],{},"Options",[2266,3215,3216],{},"Default",[2276,3218,3219],{},[2263,3220,3221,3225,3233],{},[2281,3222,3223],{},[708,3224,2441],{},[2281,3226,3227,755,3229,755,3231],{},[708,3228,1343],{},[708,3230,1246],{},[708,3232,1360],{},[2281,3234,3235],{},[708,3236,1246],{},[2248,3238,3240],{"id":3239},"useswitchfieldrecipes-options",[708,3241,3242],{},"useSwitchFieldRecipe(s, options?)",[692,3244,3245,3246,2570,3248,3250,3251,2693],{},"Creates the switch field recipe — the ",[708,3247,2569],{},[708,3249,725],{}," that owns the track, sliding knob, surface color, and native states. Accepts the same parameters as ",[708,3252,3253],{},"useSwitchRecipe",[692,3255,3256],{},[696,3257,3201],{},[2257,3259,3260,3270],{},[2260,3261,3262],{},[2263,3263,3264,3266,3268],{},[2266,3265,3210],{},[2266,3267,3213],{},[2266,3269,3216],{},[2276,3271,3272,3290],{},[2263,3273,3274,3278,3286],{},[2281,3275,3276],{},[708,3277,745],{},[2281,3279,3280,755,3282,755,3284],{},[708,3281,754],{},[708,3283,758],{},[708,3285,761],{},[2281,3287,3288],{},[708,3289,761],{},[2263,3291,3292,3296,3304],{},[2281,3293,3294],{},[708,3295,2441],{},[2281,3297,3298,755,3300,755,3302],{},[708,3299,1343],{},[708,3301,1246],{},[708,3303,1360],{},[2281,3305,3306],{},[708,3307,1246],{},[692,3309,3310],{},[770,3311,3312],{"href":132},"Learn more about recipes →",[688,3314,3316],{"id":3315},"best-practices","Best Practices",[700,3318,3319,3331,3340,3349],{},[703,3320,3321,3327,3328,3330],{},[696,3322,3323,3324,3326],{},"Pass ",[708,3325,2441],{}," to both parts",": Spread the same ",[708,3329,2441],{}," to the wrapper and the field so the label and switch scale together.",[703,3332,3333,3339],{},[696,3334,3335,3336,3338],{},"Use ",[708,3337,761],{}," for general forms",": The neutral color adapts to light and dark mode automatically, making it the safest default.",[703,3341,3342,3345,3346,3348],{},[696,3343,3344],{},"Reach for a switch, not a checkbox, for instant actions",": Use a switch when flipping it takes effect immediately (settings); use a ",[770,3347,436],{"href":437}," when the choice is submitted with a form.",[703,3350,3351,3354,3355,3357],{},[696,3352,3353],{},"Mirror state on the native input",": Set the real ",[708,3356,1542],{}," attribute in addition to styling.",[688,3359,3361],{"id":3360},"faq","FAQ",[3363,3364,3365,3388,3395,3412,3433],"accordion",{},[3366,3367,3370,3371,2704,3373,3375,3376,3378,3379,3378,3381,3383,3384,3387],"accordion-item",{"icon":3368,"label":3369},"i-lucide-circle-help","Why style the native input instead of a custom element?","Applying the recipe to the real ",[708,3372,725],{},[708,3374,2707],{}," keeps the control fully native: Space toggles it, it participates in form submission, and ",[708,3377,729],{}," \u002F ",[708,3380,741],{},[708,3382,737],{}," drive the styling with zero runtime JavaScript. A custom ",[708,3385,3386],{},"\u003Cdiv>"," would need ARIA roles and keyboard handlers to match.",[3366,3389,3391,3392,3394],{"icon":3368,"label":3390},"When should I use a Switch instead of a Checkbox?","Use a Switch for a setting that takes effect immediately, like turning a feature on or off. Use a ",[770,3393,436],{"href":437}," for a choice that is submitted with a form, or when you need an indeterminate \"mixed\" state — switches are strictly on or off.",[3366,3396,694,3398,3400,3401,3403,3404,3406,3407,1979,3409,3411],{"icon":3368,"label":3397},"Why is the color light\u002Fdark\u002Fneutral instead of primary\u002Fsuccess\u002Ferror?",[708,3399,745],{}," axis controls the ",[748,3402,750],{}," track surface, which reflects the form's surface rather than a status. The on-track fill is always ",[708,3405,733],{},", the conventional accent for an active control. This mirrors the ",[770,3408,436],{"href":437},[770,3410,452],{"href":453}," recipes' color model.",[3366,3413,694,3415,3417,3418,3421,3422,3425,3426,3428,3429,3432],{"icon":3368,"label":3414},"How does the on-fill stay correct in dark mode?",[708,3416,761],{}," color sets a dark off-track under ",[708,3419,3420],{},"&:dark",", which gains attribute-selector specificity when you toggle a ",[708,3423,3424],{},"[data-theme=\"dark\"]"," theme. To keep the on-track ",[708,3427,733],{}," in that case, the recipe re-asserts the fill under ",[708,3430,3431],{},"&:dark:checked",", so the accent always wins over the dark surface.",[3366,3434,3436,3437,3439],{"icon":3368,"label":3435},"How does filtering affect the recipe?","When you use the ",[708,3438,2918],{}," option, compound variants that reference filtered-out colors are automatically removed, and default variants are adjusted if they reference a removed value — so the recipe stays consistent and only emits the CSS you use.",[3441,3442,3443],"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":856,"searchDepth":897,"depth":897,"links":3445},[3446,3447,3448,3449,3452,3455,3459,3460,3461,3465,3469,3470],{"id":690,"depth":897,"text":78},{"id":776,"depth":897,"text":777},{"id":828,"depth":897,"text":829},{"id":2216,"depth":897,"text":195,"children":3450},[3451],{"id":2250,"depth":926,"text":2251},{"id":2331,"depth":897,"text":2332,"children":3453},[3454],{"id":2356,"depth":926,"text":2357},{"id":2455,"depth":897,"text":342,"children":3456},[3457,3458],{"id":2465,"depth":926,"text":2466},{"id":1542,"depth":926,"text":2486},{"id":2512,"depth":897,"text":2513},{"id":2670,"depth":897,"text":568},{"id":2750,"depth":897,"text":2751,"children":3462},[3463,3464],{"id":2754,"depth":926,"text":2755},{"id":2911,"depth":926,"text":2912},{"id":3070,"depth":897,"text":73,"children":3466},[3467,3468],{"id":3073,"depth":926,"text":3076},{"id":3239,"depth":926,"text":3242},{"id":3315,"depth":897,"text":3316},{"id":3360,"depth":897,"text":3361},"A switch built on the native checkbox input, with a sliding knob, on, disabled, and focus states, light, dark, and neutral track colors, and three sizes through the recipe system.",null,{},{"icon":7},{"title":476,"description":3471},"o44DIOriOSgpMKQYnc7H3Kzh9WoOqieXNYm-2iQZxEI",[3478,3480],{"title":472,"path":473,"stem":474,"description":3479,"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.",{"title":480,"path":481,"stem":482,"description":3481,"icon":7,"children":-1},"A multi-line text-field component with a wrapper-owned visual surface, inline prefix\u002Fsuffix addons, a resize axis, and invalid\u002Fdisabled\u002Freadonly states. Supports light, dark, and neutral colors, default\u002Fsoft\u002Fghost styles, and three sizes through the recipe system.",1781596341489]