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