[{"data":1,"prerenderedAt":2880},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-toggle-group":682,"-docs-theme-components-toggle-group-surround":2875},{"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":488,"body":684,"description":2869,"extension":1150,"links":2870,"meta":2871,"navigation":2872,"path":489,"seo":2873,"stem":490,"__hash__":2874},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group.md",{"type":685,"value":686,"toc":2846},"minimark",[687,691,713,720,724,727,755,759,1858,1862,1865,1869,1872,1875,1878,1881,1884,1888,1891,1944,1948,1955,2002,2019,2023,2042,2045,2174,2184,2188,2198,2201,2204,2242,2246,2250,2255,2405,2409,2416,2559,2564,2567,2573,2576,2581,2688,2693,2745,2750,2754,2792,2796,2842],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,708,709,712],"p",{},"The ",[696,697,488],"strong",{}," is a layout component that arranges related ",[700,701,702],"a",{"href":485},"toggles"," into a single, consistently spaced set — the foundation of a toolbar or a segmented control. The ",[705,706,707],"code",{},"useToggleGroupRecipe()"," composable creates a fully configured ",[700,710,711],{"href":132},"recipe"," with orientation and size options — a flex container that lays toggles out in a wrapping row or stacks them in a column.",[692,714,715,716,719],{},"The Toggle Group recipe integrates directly with the ",[700,717,718],{"href":485},"Toggle recipe"," and generates type-safe utility classes at build time with zero runtime CSS.",[688,721,723],{"id":722},"why-use-the-toggle-group-recipe","Why use the Toggle Group recipe?",[692,725,726],{},"The Toggle Group recipe helps you:",[728,729,730,737,743,749],"ul",{},[731,732,733,736],"li",{},[696,734,735],{},"Lay out sets consistently",": Lay toggles out in a wrapping row or stack them in a column with a single orientation prop.",[731,738,739,742],{},[696,740,741],{},"Control spacing with one axis",": The size variant sets the gap between items, so a whole group scales together.",[731,744,745,748],{},[696,746,747],{},"Compose, don't couple",": The group only handles layout; each child toggle keeps its own color, variant, size, and pressed state.",[731,750,751,754],{},[696,752,753],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid orientation or size values at compile time.",[688,756,758],{"id":757},"usage","Usage",[760,761,763,768,775,1043,1047,1054,1850,1854],"steps",{"level":762},"4",[764,765,767],"h4",{"id":766},"register-the-recipe","Register the recipe",[692,769,770,771,774],{},"Add the Toggle Group recipe to a local Styleframe instance alongside the toggle recipe. The global ",[705,772,773],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[776,777,779,937],"code-tree",{"default-value":778},"src\u002Fcomponents\u002Ftoggle-group.styleframe.ts",[780,781,786],"pre",{"className":782,"code":783,"filename":778,"language":784,"meta":785,"style":785},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useToggleRecipe, useToggleGroupRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst toggle = useToggleRecipe(s);\nconst toggleGroup = useToggleGroupRecipe(s);\n\nexport default s;\n","ts","",[705,787,788,824,853,859,880,885,902,918,923],{"__ignoreMap":785},[789,790,793,797,801,805,808,811,814,818,821],"span",{"class":791,"line":792},"line",1,[789,794,796],{"class":795},"s7zQu","import",[789,798,800],{"class":799},"sMK4o"," {",[789,802,804],{"class":803},"sTEyZ"," styleframe",[789,806,807],{"class":799}," }",[789,809,810],{"class":795}," from",[789,812,813],{"class":799}," '",[789,815,817],{"class":816},"sfazB","virtual:styleframe",[789,819,820],{"class":799},"'",[789,822,823],{"class":799},";\n",[789,825,827,829,831,834,837,840,842,844,846,849,851],{"class":791,"line":826},2,[789,828,796],{"class":795},[789,830,800],{"class":799},[789,832,833],{"class":803}," useToggleRecipe",[789,835,836],{"class":799},",",[789,838,839],{"class":803}," useToggleGroupRecipe",[789,841,807],{"class":799},[789,843,810],{"class":795},[789,845,813],{"class":799},[789,847,848],{"class":816},"@styleframe\u002Ftheme",[789,850,820],{"class":799},[789,852,823],{"class":799},[789,854,856],{"class":791,"line":855},3,[789,857,858],{"emptyLinePlaceholder":223},"\n",[789,860,862,866,869,872,875,878],{"class":791,"line":861},4,[789,863,865],{"class":864},"spNyl","const",[789,867,868],{"class":803}," s ",[789,870,871],{"class":799},"=",[789,873,804],{"class":874},"s2Zo4",[789,876,877],{"class":803},"()",[789,879,823],{"class":799},[789,881,883],{"class":791,"line":882},5,[789,884,858],{"emptyLinePlaceholder":223},[789,886,888,890,893,895,897,900],{"class":791,"line":887},6,[789,889,865],{"class":864},[789,891,892],{"class":803}," toggle ",[789,894,871],{"class":799},[789,896,833],{"class":874},[789,898,899],{"class":803},"(s)",[789,901,823],{"class":799},[789,903,905,907,910,912,914,916],{"class":791,"line":904},7,[789,906,865],{"class":864},[789,908,909],{"class":803}," toggleGroup ",[789,911,871],{"class":799},[789,913,839],{"class":874},[789,915,899],{"class":803},[789,917,823],{"class":799},[789,919,921],{"class":791,"line":920},8,[789,922,858],{"emptyLinePlaceholder":223},[789,924,926,929,932,935],{"class":791,"line":925},9,[789,927,928],{"class":795},"export",[789,930,931],{"class":795}," default",[789,933,934],{"class":803}," s",[789,936,823],{"class":799},[780,938,940],{"className":782,"code":939,"filename":773,"language":784,"meta":785,"style":785},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[705,941,942,963,989,993,1007,1011,1020,1029,1033],{"__ignoreMap":785},[789,943,944,946,948,950,952,954,956,959,961],{"class":791,"line":792},[789,945,796],{"class":795},[789,947,800],{"class":799},[789,949,804],{"class":803},[789,951,807],{"class":799},[789,953,810],{"class":795},[789,955,813],{"class":799},[789,957,958],{"class":816},"styleframe",[789,960,820],{"class":799},[789,962,823],{"class":799},[789,964,965,967,969,972,974,977,979,981,983,985,987],{"class":791,"line":826},[789,966,796],{"class":795},[789,968,800],{"class":799},[789,970,971],{"class":803}," useDesignTokensPreset",[789,973,836],{"class":799},[789,975,976],{"class":803}," useUtilitiesPreset",[789,978,807],{"class":799},[789,980,810],{"class":795},[789,982,813],{"class":799},[789,984,848],{"class":816},[789,986,820],{"class":799},[789,988,823],{"class":799},[789,990,991],{"class":791,"line":855},[789,992,858],{"emptyLinePlaceholder":223},[789,994,995,997,999,1001,1003,1005],{"class":791,"line":861},[789,996,865],{"class":864},[789,998,868],{"class":803},[789,1000,871],{"class":799},[789,1002,804],{"class":874},[789,1004,877],{"class":803},[789,1006,823],{"class":799},[789,1008,1009],{"class":791,"line":882},[789,1010,858],{"emptyLinePlaceholder":223},[789,1012,1013,1016,1018],{"class":791,"line":887},[789,1014,1015],{"class":874},"useDesignTokensPreset",[789,1017,899],{"class":803},[789,1019,823],{"class":799},[789,1021,1022,1025,1027],{"class":791,"line":904},[789,1023,1024],{"class":874},"useUtilitiesPreset",[789,1026,899],{"class":803},[789,1028,823],{"class":799},[789,1030,1031],{"class":791,"line":920},[789,1032,858],{"emptyLinePlaceholder":223},[789,1034,1035,1037,1039,1041],{"class":791,"line":925},[789,1036,928],{"class":795},[789,1038,931],{"class":795},[789,1040,934],{"class":803},[789,1042,823],{"class":799},[764,1044,1046],{"id":1045},"build-the-component","Build the component",[692,1048,1049,1050,1053],{},"Import the ",[705,1051,1052],{},"toggleGroup"," runtime function from the virtual module and wrap your toggles in the container:",[1055,1056,1057,1320,1615],"framework-switcher",{},[1058,1059,1060],"template",{"v-slot:vue":785},[780,1061,1066],{"className":1062,"code":1063,"filename":1064,"language":1065,"meta":785,"style":785},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { toggleGroup } from \"virtual:styleframe\";\n\nconst { orientation = \"horizontal\", size = \"md\" } = defineProps\u003C{\n    orientation?: \"horizontal\" | \"vertical\";\n    size?: \"sm\" | \"md\" | \"lg\";\n}>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"toggleGroup({ orientation, size })\" role=\"group\">\n        \u003Cslot \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FToggleGroup.vue","vue",[705,1067,1068,1095,1117,1121,1164,1190,1223,1232,1241,1245,1254,1289,1301,1311],{"__ignoreMap":785},[789,1069,1070,1073,1077,1080,1083,1085,1088,1090,1092],{"class":791,"line":792},[789,1071,1072],{"class":799},"\u003C",[789,1074,1076],{"class":1075},"swJcz","script",[789,1078,1079],{"class":864}," setup",[789,1081,1082],{"class":864}," lang",[789,1084,871],{"class":799},[789,1086,1087],{"class":799},"\"",[789,1089,784],{"class":816},[789,1091,1087],{"class":799},[789,1093,1094],{"class":799},">\n",[789,1096,1097,1099,1101,1104,1106,1108,1111,1113,1115],{"class":791,"line":826},[789,1098,796],{"class":795},[789,1100,800],{"class":799},[789,1102,1103],{"class":803}," toggleGroup",[789,1105,807],{"class":799},[789,1107,810],{"class":795},[789,1109,1110],{"class":799}," \"",[789,1112,817],{"class":816},[789,1114,1087],{"class":799},[789,1116,823],{"class":799},[789,1118,1119],{"class":791,"line":855},[789,1120,858],{"emptyLinePlaceholder":223},[789,1122,1123,1125,1127,1130,1132,1134,1137,1139,1141,1144,1146,1148,1151,1153,1155,1158,1161],{"class":791,"line":861},[789,1124,865],{"class":864},[789,1126,800],{"class":799},[789,1128,1129],{"class":803}," orientation ",[789,1131,871],{"class":799},[789,1133,1110],{"class":799},[789,1135,1136],{"class":816},"horizontal",[789,1138,1087],{"class":799},[789,1140,836],{"class":799},[789,1142,1143],{"class":803}," size ",[789,1145,871],{"class":799},[789,1147,1110],{"class":799},[789,1149,1150],{"class":816},"md",[789,1152,1087],{"class":799},[789,1154,807],{"class":799},[789,1156,1157],{"class":799}," =",[789,1159,1160],{"class":874}," defineProps",[789,1162,1163],{"class":799},"\u003C{\n",[789,1165,1166,1169,1172,1174,1176,1178,1181,1183,1186,1188],{"class":791,"line":882},[789,1167,1168],{"class":1075},"    orientation",[789,1170,1171],{"class":799},"?:",[789,1173,1110],{"class":799},[789,1175,1136],{"class":816},[789,1177,1087],{"class":799},[789,1179,1180],{"class":799}," |",[789,1182,1110],{"class":799},[789,1184,1185],{"class":816},"vertical",[789,1187,1087],{"class":799},[789,1189,823],{"class":799},[789,1191,1192,1195,1197,1199,1202,1204,1206,1208,1210,1212,1214,1216,1219,1221],{"class":791,"line":887},[789,1193,1194],{"class":1075},"    size",[789,1196,1171],{"class":799},[789,1198,1110],{"class":799},[789,1200,1201],{"class":816},"sm",[789,1203,1087],{"class":799},[789,1205,1180],{"class":799},[789,1207,1110],{"class":799},[789,1209,1150],{"class":816},[789,1211,1087],{"class":799},[789,1213,1180],{"class":799},[789,1215,1110],{"class":799},[789,1217,1218],{"class":816},"lg",[789,1220,1087],{"class":799},[789,1222,823],{"class":799},[789,1224,1225,1228,1230],{"class":791,"line":904},[789,1226,1227],{"class":799},"}>",[789,1229,877],{"class":803},[789,1231,823],{"class":799},[789,1233,1234,1237,1239],{"class":791,"line":920},[789,1235,1236],{"class":799},"\u003C\u002F",[789,1238,1076],{"class":1075},[789,1240,1094],{"class":799},[789,1242,1243],{"class":791,"line":925},[789,1244,858],{"emptyLinePlaceholder":223},[789,1246,1248,1250,1252],{"class":791,"line":1247},10,[789,1249,1072],{"class":799},[789,1251,1058],{"class":1075},[789,1253,1094],{"class":799},[789,1255,1257,1260,1263,1266,1268,1270,1273,1275,1278,1280,1282,1285,1287],{"class":791,"line":1256},11,[789,1258,1259],{"class":799},"    \u003C",[789,1261,1262],{"class":1075},"div",[789,1264,1265],{"class":864}," :class",[789,1267,871],{"class":799},[789,1269,1087],{"class":799},[789,1271,1272],{"class":816},"toggleGroup({ orientation, size })",[789,1274,1087],{"class":799},[789,1276,1277],{"class":864}," role",[789,1279,871],{"class":799},[789,1281,1087],{"class":799},[789,1283,1284],{"class":816},"group",[789,1286,1087],{"class":799},[789,1288,1094],{"class":799},[789,1290,1292,1295,1298],{"class":791,"line":1291},12,[789,1293,1294],{"class":799},"        \u003C",[789,1296,1297],{"class":1075},"slot",[789,1299,1300],{"class":799}," \u002F>\n",[789,1302,1304,1307,1309],{"class":791,"line":1303},13,[789,1305,1306],{"class":799},"    \u003C\u002F",[789,1308,1262],{"class":1075},[789,1310,1094],{"class":799},[789,1312,1314,1316,1318],{"class":791,"line":1313},14,[789,1315,1236],{"class":799},[789,1317,1058],{"class":1075},[789,1319,1094],{"class":799},[1058,1321,1322],{"v-slot:react":785},[780,1323,1326],{"className":782,"code":1324,"filename":1325,"language":784,"meta":785,"style":785},"import { toggleGroup } from \"virtual:styleframe\";\n\ninterface ToggleGroupProps {\n    orientation?: \"horizontal\" | \"vertical\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    children?: React.ReactNode;\n}\n\nexport function ToggleGroup({\n    orientation = \"horizontal\",\n    size = \"md\",\n    children,\n}: ToggleGroupProps) {\n    const classes = toggleGroup({ orientation, size });\n\n    return (\n        \u003Cdiv className={classes} role=\"group\">\n            {children}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FToggleGroup.tsx",[705,1327,1328,1348,1352,1364,1386,1416,1434,1439,1443,1456,1472,1486,1492,1504,1536,1541,1550,1581,1592,1602,1610],{"__ignoreMap":785},[789,1329,1330,1332,1334,1336,1338,1340,1342,1344,1346],{"class":791,"line":792},[789,1331,796],{"class":795},[789,1333,800],{"class":799},[789,1335,1103],{"class":803},[789,1337,807],{"class":799},[789,1339,810],{"class":795},[789,1341,1110],{"class":799},[789,1343,817],{"class":816},[789,1345,1087],{"class":799},[789,1347,823],{"class":799},[789,1349,1350],{"class":791,"line":826},[789,1351,858],{"emptyLinePlaceholder":223},[789,1353,1354,1357,1361],{"class":791,"line":855},[789,1355,1356],{"class":864},"interface",[789,1358,1360],{"class":1359},"sBMFI"," ToggleGroupProps",[789,1362,1363],{"class":799}," {\n",[789,1365,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384],{"class":791,"line":861},[789,1367,1168],{"class":1075},[789,1369,1171],{"class":799},[789,1371,1110],{"class":799},[789,1373,1136],{"class":816},[789,1375,1087],{"class":799},[789,1377,1180],{"class":799},[789,1379,1110],{"class":799},[789,1381,1185],{"class":816},[789,1383,1087],{"class":799},[789,1385,823],{"class":799},[789,1387,1388,1390,1392,1394,1396,1398,1400,1402,1404,1406,1408,1410,1412,1414],{"class":791,"line":882},[789,1389,1194],{"class":1075},[789,1391,1171],{"class":799},[789,1393,1110],{"class":799},[789,1395,1201],{"class":816},[789,1397,1087],{"class":799},[789,1399,1180],{"class":799},[789,1401,1110],{"class":799},[789,1403,1150],{"class":816},[789,1405,1087],{"class":799},[789,1407,1180],{"class":799},[789,1409,1110],{"class":799},[789,1411,1218],{"class":816},[789,1413,1087],{"class":799},[789,1415,823],{"class":799},[789,1417,1418,1421,1423,1426,1429,1432],{"class":791,"line":887},[789,1419,1420],{"class":1075},"    children",[789,1422,1171],{"class":799},[789,1424,1425],{"class":1359}," React",[789,1427,1428],{"class":799},".",[789,1430,1431],{"class":1359},"ReactNode",[789,1433,823],{"class":799},[789,1435,1436],{"class":791,"line":904},[789,1437,1438],{"class":799},"}\n",[789,1440,1441],{"class":791,"line":920},[789,1442,858],{"emptyLinePlaceholder":223},[789,1444,1445,1447,1450,1453],{"class":791,"line":925},[789,1446,928],{"class":795},[789,1448,1449],{"class":864}," function",[789,1451,1452],{"class":874}," ToggleGroup",[789,1454,1455],{"class":799},"({\n",[789,1457,1458,1461,1463,1465,1467,1469],{"class":791,"line":1247},[789,1459,1168],{"class":1460},"sHdIc",[789,1462,1157],{"class":799},[789,1464,1110],{"class":799},[789,1466,1136],{"class":816},[789,1468,1087],{"class":799},[789,1470,1471],{"class":799},",\n",[789,1473,1474,1476,1478,1480,1482,1484],{"class":791,"line":1256},[789,1475,1194],{"class":1460},[789,1477,1157],{"class":799},[789,1479,1110],{"class":799},[789,1481,1150],{"class":816},[789,1483,1087],{"class":799},[789,1485,1471],{"class":799},[789,1487,1488,1490],{"class":791,"line":1291},[789,1489,1420],{"class":1460},[789,1491,1471],{"class":799},[789,1493,1494,1497,1499,1502],{"class":791,"line":1303},[789,1495,1496],{"class":799},"}:",[789,1498,1360],{"class":1359},[789,1500,1501],{"class":799},")",[789,1503,1363],{"class":799},[789,1505,1506,1509,1512,1514,1516,1519,1522,1525,1527,1530,1532,1534],{"class":791,"line":1313},[789,1507,1508],{"class":864},"    const",[789,1510,1511],{"class":803}," classes",[789,1513,1157],{"class":799},[789,1515,1103],{"class":874},[789,1517,1518],{"class":1075},"(",[789,1520,1521],{"class":799},"{",[789,1523,1524],{"class":803}," orientation",[789,1526,836],{"class":799},[789,1528,1529],{"class":803}," size",[789,1531,807],{"class":799},[789,1533,1501],{"class":1075},[789,1535,823],{"class":799},[789,1537,1539],{"class":791,"line":1538},15,[789,1540,858],{"emptyLinePlaceholder":223},[789,1542,1544,1547],{"class":791,"line":1543},16,[789,1545,1546],{"class":795},"    return",[789,1548,1549],{"class":1075}," (\n",[789,1551,1553,1555,1557,1560,1563,1566,1569,1571,1573,1575,1577,1579],{"class":791,"line":1552},17,[789,1554,1294],{"class":799},[789,1556,1262],{"class":803},[789,1558,1559],{"class":803}," className",[789,1561,1562],{"class":799},"={",[789,1564,1565],{"class":803},"classes",[789,1567,1568],{"class":799},"}",[789,1570,1277],{"class":803},[789,1572,871],{"class":799},[789,1574,1087],{"class":799},[789,1576,1284],{"class":816},[789,1578,1087],{"class":799},[789,1580,1094],{"class":799},[789,1582,1584,1587,1590],{"class":791,"line":1583},18,[789,1585,1586],{"class":799},"            {",[789,1588,1589],{"class":1460},"children",[789,1591,1438],{"class":799},[789,1593,1595,1598,1600],{"class":791,"line":1594},19,[789,1596,1597],{"class":799},"        \u003C\u002F",[789,1599,1262],{"class":803},[789,1601,1094],{"class":799},[789,1603,1605,1608],{"class":791,"line":1604},20,[789,1606,1607],{"class":1075},"    )",[789,1609,823],{"class":799},[789,1611,1613],{"class":791,"line":1612},21,[789,1614,1438],{"class":799},[1058,1616,1617,1623,1703],{"v-slot:other":785},[692,1618,694,1619,1622],{},[705,1620,1621],{},"toggleGroup()"," runtime returns a class string. Apply it however your framework binds classes:",[780,1624,1627],{"className":782,"code":1625,"filename":1626,"language":784,"meta":785,"style":785},"import { toggleGroup } from \"virtual:styleframe\";\n\nconst classes = toggleGroup({ orientation: \"horizontal\", size: \"md\" });\n\u002F\u002F → \"toggle-group _display:flex _flex-direction:row _flex-wrap:wrap ...\"\n","src\u002Fcomponents\u002Ftoggle-group.ts",[705,1628,1629,1649,1653,1697],{"__ignoreMap":785},[789,1630,1631,1633,1635,1637,1639,1641,1643,1645,1647],{"class":791,"line":792},[789,1632,796],{"class":795},[789,1634,800],{"class":799},[789,1636,1103],{"class":803},[789,1638,807],{"class":799},[789,1640,810],{"class":795},[789,1642,1110],{"class":799},[789,1644,817],{"class":816},[789,1646,1087],{"class":799},[789,1648,823],{"class":799},[789,1650,1651],{"class":791,"line":826},[789,1652,858],{"emptyLinePlaceholder":223},[789,1654,1655,1657,1660,1662,1664,1666,1668,1670,1673,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695],{"class":791,"line":855},[789,1656,865],{"class":864},[789,1658,1659],{"class":803}," classes ",[789,1661,871],{"class":799},[789,1663,1103],{"class":874},[789,1665,1518],{"class":803},[789,1667,1521],{"class":799},[789,1669,1524],{"class":1075},[789,1671,1672],{"class":799},":",[789,1674,1110],{"class":799},[789,1676,1136],{"class":816},[789,1678,1087],{"class":799},[789,1680,836],{"class":799},[789,1682,1529],{"class":1075},[789,1684,1672],{"class":799},[789,1686,1110],{"class":799},[789,1688,1150],{"class":816},[789,1690,1087],{"class":799},[789,1692,807],{"class":799},[789,1694,1501],{"class":803},[789,1696,823],{"class":799},[789,1698,1699],{"class":791,"line":861},[789,1700,1702],{"class":1701},"sHwdD","\u002F\u002F → \"toggle-group _display:flex _flex-direction:row _flex-wrap:wrap ...\"\n",[780,1704,1709],{"className":1705,"code":1706,"filename":1707,"language":1708,"meta":785,"style":785},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"toggle-group _display:flex _flex-direction:row ...\" role=\"group\">\n    \u003Cbutton type=\"button\" class=\"toggle ...\" aria-pressed=\"true\">Left\u003C\u002Fbutton>\n    \u003Cbutton type=\"button\" class=\"toggle ...\" aria-pressed=\"false\">Center\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Ftoggle-group.html","html",[705,1710,1711,1741,1794,1842],{"__ignoreMap":785},[789,1712,1713,1715,1717,1720,1722,1724,1727,1729,1731,1733,1735,1737,1739],{"class":791,"line":792},[789,1714,1072],{"class":799},[789,1716,1262],{"class":1075},[789,1718,1719],{"class":864}," class",[789,1721,871],{"class":799},[789,1723,1087],{"class":799},[789,1725,1726],{"class":816},"toggle-group _display:flex _flex-direction:row ...",[789,1728,1087],{"class":799},[789,1730,1277],{"class":864},[789,1732,871],{"class":799},[789,1734,1087],{"class":799},[789,1736,1284],{"class":816},[789,1738,1087],{"class":799},[789,1740,1094],{"class":799},[789,1742,1743,1745,1748,1751,1753,1755,1757,1759,1761,1763,1765,1768,1770,1773,1775,1777,1780,1782,1785,1788,1790,1792],{"class":791,"line":826},[789,1744,1259],{"class":799},[789,1746,1747],{"class":1075},"button",[789,1749,1750],{"class":864}," type",[789,1752,871],{"class":799},[789,1754,1087],{"class":799},[789,1756,1747],{"class":816},[789,1758,1087],{"class":799},[789,1760,1719],{"class":864},[789,1762,871],{"class":799},[789,1764,1087],{"class":799},[789,1766,1767],{"class":816},"toggle ...",[789,1769,1087],{"class":799},[789,1771,1772],{"class":864}," aria-pressed",[789,1774,871],{"class":799},[789,1776,1087],{"class":799},[789,1778,1779],{"class":816},"true",[789,1781,1087],{"class":799},[789,1783,1784],{"class":799},">",[789,1786,1787],{"class":803},"Left",[789,1789,1236],{"class":799},[789,1791,1747],{"class":1075},[789,1793,1094],{"class":799},[789,1795,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816,1818,1820,1822,1824,1826,1829,1831,1833,1836,1838,1840],{"class":791,"line":855},[789,1797,1259],{"class":799},[789,1799,1747],{"class":1075},[789,1801,1750],{"class":864},[789,1803,871],{"class":799},[789,1805,1087],{"class":799},[789,1807,1747],{"class":816},[789,1809,1087],{"class":799},[789,1811,1719],{"class":864},[789,1813,871],{"class":799},[789,1815,1087],{"class":799},[789,1817,1767],{"class":816},[789,1819,1087],{"class":799},[789,1821,1772],{"class":864},[789,1823,871],{"class":799},[789,1825,1087],{"class":799},[789,1827,1828],{"class":816},"false",[789,1830,1087],{"class":799},[789,1832,1784],{"class":799},[789,1834,1835],{"class":803},"Center",[789,1837,1236],{"class":799},[789,1839,1747],{"class":1075},[789,1841,1094],{"class":799},[789,1843,1844,1846,1848],{"class":791,"line":861},[789,1845,1236],{"class":799},[789,1847,1262],{"class":1075},[789,1849,1094],{"class":799},[764,1851,1853],{"id":1852},"see-it-in-action","See it in action",[1855,1856],"story-preview",{"story":1857,":panel":1779},"theme-recipes-forms-toggle-group--default",[688,1859,1861],{"id":1860},"orientation","Orientation",[692,1863,1864],{},"The Toggle Group supports two orientation variants that control the layout direction.",[1866,1867,1868],"h3",{"id":1136},"Horizontal",[692,1870,1871],{},"The default orientation. Toggles are laid out left-to-right in a wrapping row, aligned to the center — the common layout for toolbars and segmented controls.",[1855,1873],{"story":1874,":panel":1779},"theme-recipes-forms-toggle-group--horizontal",[1866,1876,1877],{"id":1185},"Vertical",[692,1879,1880],{},"Toggles are stacked top-to-bottom in a column. Useful for a sidebar of view options.",[1855,1882],{"story":1883,":panel":1779},"theme-recipes-forms-toggle-group--vertical",[1866,1885,1887],{"id":1886},"orientation-reference","Orientation Reference",[1855,1889],{"story":1890},"theme-recipes-forms-toggle-group--all-orientations",[1892,1893,1894,1909],"table",{},[1895,1896,1897],"thead",{},[1898,1899,1900,1903,1906],"tr",{},[1901,1902,1861],"th",{},[1901,1904,1905],{},"Direction",[1901,1907,1908],{},"Notes",[1910,1911,1912,1929],"tbody",{},[1898,1913,1914,1919,1926],{},[1915,1916,1917],"td",{},[705,1918,1136],{},[1915,1920,1921,1922,1925],{},"Left to right (",[705,1923,1924],{},"row",", wraps)",[1915,1927,1928],{},"Default; center-aligned, wraps to the next line when out of space",[1898,1930,1931,1935,1941],{},[1915,1932,1933],{},[705,1934,1185],{},[1915,1936,1937,1938,1501],{},"Top to bottom (",[705,1939,1940],{},"column",[1915,1942,1943],{},"One toggle per line",[688,1945,1947],{"id":1946},"sizes","Sizes",[692,1949,1950,1951,1954],{},"Three size variants control the gap between toggles, letting you tighten or loosen a group to match its surroundings. Set the same ",[705,1952,1953],{},"size"," on each child toggle so the controls and the spacing scale together.",[1892,1956,1957,1967],{},[1895,1958,1959],{},[1898,1960,1961,1964],{},[1901,1962,1963],{},"Size",[1901,1965,1966],{},"Gap",[1910,1968,1969,1980,1991],{},[1898,1970,1971,1975],{},[1915,1972,1973],{},[705,1974,1201],{},[1915,1976,1977],{},[705,1978,1979],{},"@0.5",[1898,1981,1982,1986],{},[1915,1983,1984],{},[705,1985,1150],{},[1915,1987,1988],{},[705,1989,1990],{},"@0.75",[1898,1992,1993,1997],{},[1915,1994,1995],{},[705,1996,1218],{},[1915,1998,1999],{},[705,2000,2001],{},"@1",[2003,2004,2005,2008,2009,2011,2012,2014,2015,2018],"note",{},[696,2006,2007],{},"Good to know:"," The group's ",[705,2010,1953],{}," controls only the gap between items. Pass the same ",[705,2013,1953],{}," to each child ",[705,2016,2017],{},"\u003CToggle>"," so the buttons and the spacing scale as a set.",[688,2020,2022],{"id":2021},"connected-segmented-control","Connected segmented control",[692,2024,2025,2026,2030,2031,2033,2034,2037,2038,2041],{},"The Toggle Group spaces its toggles apart. For a ",[2027,2028,2029],"em",{},"connected"," segmented control — toggles joined at the seams with no gap — wrap them in the ",[700,2032,448],{"href":449}," recipe instead. It merges adjacent border radii and inner borders on any bordered child, so a row of ",[705,2035,2036],{},"outline"," toggles reads as one continuous control. There is no ",[705,2039,2040],{},"attached"," axis on the Toggle Group; the two layouts are separate, composable tools.",[1855,2043],{"story":2044,":panel":1779},"theme-recipes-forms-toggle-group--connected",[780,2046,2049],{"className":1062,"code":2047,"filename":2048,"language":1065,"meta":785,"style":785},"\u003Ctemplate>\n    \u003CFieldGroup>\n        \u003CToggle variant=\"outline\" aria-pressed=\"true\">Left\u003C\u002FToggle>\n        \u003CToggle variant=\"outline\">Center\u003C\u002FToggle>\n        \u003CToggle variant=\"outline\">Right\u003C\u002FToggle>\n    \u003C\u002FFieldGroup>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FSegmentedControl.vue",[705,2050,2051,2059,2068,2105,2131,2158,2166],{"__ignoreMap":785},[789,2052,2053,2055,2057],{"class":791,"line":792},[789,2054,1072],{"class":799},[789,2056,1058],{"class":1075},[789,2058,1094],{"class":799},[789,2060,2061,2063,2066],{"class":791,"line":826},[789,2062,1259],{"class":799},[789,2064,2065],{"class":1075},"FieldGroup",[789,2067,1094],{"class":799},[789,2069,2070,2072,2074,2077,2079,2081,2083,2085,2087,2089,2091,2093,2095,2097,2099,2101,2103],{"class":791,"line":855},[789,2071,1294],{"class":799},[789,2073,484],{"class":1075},[789,2075,2076],{"class":864}," variant",[789,2078,871],{"class":799},[789,2080,1087],{"class":799},[789,2082,2036],{"class":816},[789,2084,1087],{"class":799},[789,2086,1772],{"class":864},[789,2088,871],{"class":799},[789,2090,1087],{"class":799},[789,2092,1779],{"class":816},[789,2094,1087],{"class":799},[789,2096,1784],{"class":799},[789,2098,1787],{"class":803},[789,2100,1236],{"class":799},[789,2102,484],{"class":1075},[789,2104,1094],{"class":799},[789,2106,2107,2109,2111,2113,2115,2117,2119,2121,2123,2125,2127,2129],{"class":791,"line":861},[789,2108,1294],{"class":799},[789,2110,484],{"class":1075},[789,2112,2076],{"class":864},[789,2114,871],{"class":799},[789,2116,1087],{"class":799},[789,2118,2036],{"class":816},[789,2120,1087],{"class":799},[789,2122,1784],{"class":799},[789,2124,1835],{"class":803},[789,2126,1236],{"class":799},[789,2128,484],{"class":1075},[789,2130,1094],{"class":799},[789,2132,2133,2135,2137,2139,2141,2143,2145,2147,2149,2152,2154,2156],{"class":791,"line":882},[789,2134,1294],{"class":799},[789,2136,484],{"class":1075},[789,2138,2076],{"class":864},[789,2140,871],{"class":799},[789,2142,1087],{"class":799},[789,2144,2036],{"class":816},[789,2146,1087],{"class":799},[789,2148,1784],{"class":799},[789,2150,2151],{"class":803},"Right",[789,2153,1236],{"class":799},[789,2155,484],{"class":1075},[789,2157,1094],{"class":799},[789,2159,2160,2162,2164],{"class":791,"line":887},[789,2161,1306],{"class":799},[789,2163,2065],{"class":1075},[789,2165,1094],{"class":799},[789,2167,2168,2170,2172],{"class":791,"line":904},[789,2169,1236],{"class":799},[789,2171,1058],{"class":1075},[789,2173,1094],{"class":799},[2175,2176,2177,2180,2181,2183],"tip",{},[696,2178,2179],{},"Pro tip:"," Use ",[705,2182,2036],{}," toggles inside a Field Group so every segment carries the border tokens the seam-merging relies on.",[688,2185,2187],{"id":2186},"custom","Custom",[692,2189,2190,2191,2193,2194,2197],{},"The toggle's content is a slot, so a segmented control can hold richer cells than plain labels. This font-weight picker joins ",[705,2192,2036],{}," toggles with a Field Group and renders an ",[705,2195,2196],{},"Aa"," glyph at each weight above a caption — the pressed cell carries the engaged fill.",[1855,2199],{"story":2200,":panel":1779},"theme-recipes-forms-toggle-group--custom",[688,2202,568],{"id":2203},"accessibility",[728,2205,2206,2224,2233],{},[731,2207,2208,2211,2212,2215,2216,2219,2220,2223],{},[696,2209,2210],{},"Group related toggles."," Wrap the toggles in an element with ",[705,2213,2214],{},"role=\"group\""," and an ",[705,2217,2218],{},"aria-label"," (or ",[705,2221,2222],{},"aria-labelledby",") describing the set, so assistive technology announces the context.",[731,2225,2226,2229,2230,1428],{},[696,2227,2228],{},"Choose single or multiple in your logic."," The group is layout only; whether one toggle stays pressed (a segmented, radio-like control) or several can be pressed at once (a checkbox-like set) is behavior you implement, reflected through each toggle's ",[705,2231,2232],{},"aria-pressed",[731,2234,2235,2238,2239,2241],{},[696,2236,2237],{},"Keep each toggle labelled."," Every child still needs its own accessible name (see the ",[700,2240,484],{"href":485}," recipe).",[688,2243,2245],{"id":2244},"customization","Customization",[1866,2247,2249],{"id":2248},"overriding-defaults","Overriding Defaults",[692,2251,694,2252,2254],{},[705,2253,707],{}," 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:",[780,2256,2258],{"className":782,"code":2257,"filename":778,"language":784,"meta":785,"style":785},"import { styleframe } from 'virtual:styleframe';\nimport { useToggleGroupRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst toggleGroup = useToggleGroupRecipe(s, {\n    defaultVariants: {\n        orientation: 'vertical',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[705,2259,2260,2280,2300,2304,2318,2322,2339,2348,2363,2378,2383,2391,2395],{"__ignoreMap":785},[789,2261,2262,2264,2266,2268,2270,2272,2274,2276,2278],{"class":791,"line":792},[789,2263,796],{"class":795},[789,2265,800],{"class":799},[789,2267,804],{"class":803},[789,2269,807],{"class":799},[789,2271,810],{"class":795},[789,2273,813],{"class":799},[789,2275,817],{"class":816},[789,2277,820],{"class":799},[789,2279,823],{"class":799},[789,2281,2282,2284,2286,2288,2290,2292,2294,2296,2298],{"class":791,"line":826},[789,2283,796],{"class":795},[789,2285,800],{"class":799},[789,2287,839],{"class":803},[789,2289,807],{"class":799},[789,2291,810],{"class":795},[789,2293,813],{"class":799},[789,2295,848],{"class":816},[789,2297,820],{"class":799},[789,2299,823],{"class":799},[789,2301,2302],{"class":791,"line":855},[789,2303,858],{"emptyLinePlaceholder":223},[789,2305,2306,2308,2310,2312,2314,2316],{"class":791,"line":861},[789,2307,865],{"class":864},[789,2309,868],{"class":803},[789,2311,871],{"class":799},[789,2313,804],{"class":874},[789,2315,877],{"class":803},[789,2317,823],{"class":799},[789,2319,2320],{"class":791,"line":882},[789,2321,858],{"emptyLinePlaceholder":223},[789,2323,2324,2326,2328,2330,2332,2335,2337],{"class":791,"line":887},[789,2325,865],{"class":864},[789,2327,909],{"class":803},[789,2329,871],{"class":799},[789,2331,839],{"class":874},[789,2333,2334],{"class":803},"(s",[789,2336,836],{"class":799},[789,2338,1363],{"class":799},[789,2340,2341,2344,2346],{"class":791,"line":904},[789,2342,2343],{"class":1075},"    defaultVariants",[789,2345,1672],{"class":799},[789,2347,1363],{"class":799},[789,2349,2350,2353,2355,2357,2359,2361],{"class":791,"line":920},[789,2351,2352],{"class":1075},"        orientation",[789,2354,1672],{"class":799},[789,2356,813],{"class":799},[789,2358,1185],{"class":816},[789,2360,820],{"class":799},[789,2362,1471],{"class":799},[789,2364,2365,2368,2370,2372,2374,2376],{"class":791,"line":925},[789,2366,2367],{"class":1075},"        size",[789,2369,1672],{"class":799},[789,2371,813],{"class":799},[789,2373,1218],{"class":816},[789,2375,820],{"class":799},[789,2377,1471],{"class":799},[789,2379,2380],{"class":791,"line":1247},[789,2381,2382],{"class":799},"    },\n",[789,2384,2385,2387,2389],{"class":791,"line":1256},[789,2386,1568],{"class":799},[789,2388,1501],{"class":803},[789,2390,823],{"class":799},[789,2392,2393],{"class":791,"line":1291},[789,2394,858],{"emptyLinePlaceholder":223},[789,2396,2397,2399,2401,2403],{"class":791,"line":1303},[789,2398,928],{"class":795},[789,2400,931],{"class":795},[789,2402,934],{"class":803},[789,2404,823],{"class":799},[1866,2406,2408],{"id":2407},"filtering-variants","Filtering Variants",[692,2410,2411,2412,2415],{},"If you only need a subset of the available variants, use the ",[705,2413,2414],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[780,2417,2419],{"className":782,"code":2418,"filename":778,"language":784,"meta":785,"style":785},"import { styleframe } from 'virtual:styleframe';\nimport { useToggleGroupRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the horizontal orientation\nconst toggleGroup = useToggleGroupRecipe(s, {\n    filter: {\n        orientation: ['horizontal'],\n    },\n});\n\nexport default s;\n",[705,2420,2421,2441,2461,2465,2479,2483,2488,2504,2513,2533,2537,2545,2549],{"__ignoreMap":785},[789,2422,2423,2425,2427,2429,2431,2433,2435,2437,2439],{"class":791,"line":792},[789,2424,796],{"class":795},[789,2426,800],{"class":799},[789,2428,804],{"class":803},[789,2430,807],{"class":799},[789,2432,810],{"class":795},[789,2434,813],{"class":799},[789,2436,817],{"class":816},[789,2438,820],{"class":799},[789,2440,823],{"class":799},[789,2442,2443,2445,2447,2449,2451,2453,2455,2457,2459],{"class":791,"line":826},[789,2444,796],{"class":795},[789,2446,800],{"class":799},[789,2448,839],{"class":803},[789,2450,807],{"class":799},[789,2452,810],{"class":795},[789,2454,813],{"class":799},[789,2456,848],{"class":816},[789,2458,820],{"class":799},[789,2460,823],{"class":799},[789,2462,2463],{"class":791,"line":855},[789,2464,858],{"emptyLinePlaceholder":223},[789,2466,2467,2469,2471,2473,2475,2477],{"class":791,"line":861},[789,2468,865],{"class":864},[789,2470,868],{"class":803},[789,2472,871],{"class":799},[789,2474,804],{"class":874},[789,2476,877],{"class":803},[789,2478,823],{"class":799},[789,2480,2481],{"class":791,"line":882},[789,2482,858],{"emptyLinePlaceholder":223},[789,2484,2485],{"class":791,"line":887},[789,2486,2487],{"class":1701},"\u002F\u002F Only generate the horizontal orientation\n",[789,2489,2490,2492,2494,2496,2498,2500,2502],{"class":791,"line":904},[789,2491,865],{"class":864},[789,2493,909],{"class":803},[789,2495,871],{"class":799},[789,2497,839],{"class":874},[789,2499,2334],{"class":803},[789,2501,836],{"class":799},[789,2503,1363],{"class":799},[789,2505,2506,2509,2511],{"class":791,"line":920},[789,2507,2508],{"class":1075},"    filter",[789,2510,1672],{"class":799},[789,2512,1363],{"class":799},[789,2514,2515,2517,2519,2522,2524,2526,2528,2531],{"class":791,"line":925},[789,2516,2352],{"class":1075},[789,2518,1672],{"class":799},[789,2520,2521],{"class":803}," [",[789,2523,820],{"class":799},[789,2525,1136],{"class":816},[789,2527,820],{"class":799},[789,2529,2530],{"class":803},"]",[789,2532,1471],{"class":799},[789,2534,2535],{"class":791,"line":1247},[789,2536,2382],{"class":799},[789,2538,2539,2541,2543],{"class":791,"line":1256},[789,2540,1568],{"class":799},[789,2542,1501],{"class":803},[789,2544,823],{"class":799},[789,2546,2547],{"class":791,"line":1291},[789,2548,858],{"emptyLinePlaceholder":223},[789,2550,2551,2553,2555,2557],{"class":791,"line":1303},[789,2552,928],{"class":795},[789,2554,931],{"class":795},[789,2556,934],{"class":803},[789,2558,823],{"class":799},[2003,2560,2561,2563],{},[696,2562,2007],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,2565,73],{"id":2566},"api-reference",[1866,2568,2570],{"id":2569},"usetogglegrouprecipes-options",[705,2571,2572],{},"useToggleGroupRecipe(s, options?)",[692,2574,2575],{},"Creates a toggle group recipe — a flex container with orientation and size (gap) variants.",[692,2577,2578],{},[696,2579,2580],{},"Parameters:",[1892,2582,2583,2596],{},[1895,2584,2585],{},[1898,2586,2587,2590,2593],{},[1901,2588,2589],{},"Parameter",[1901,2591,2592],{},"Type",[1901,2594,2595],{},"Description",[1910,2597,2598,2613,2628,2643,2658,2673],{},[1898,2599,2600,2605,2610],{},[1915,2601,2602],{},[705,2603,2604],{},"s",[1915,2606,2607],{},[705,2608,2609],{},"Styleframe",[1915,2611,2612],{},"The Styleframe instance",[1898,2614,2615,2620,2625],{},[1915,2616,2617],{},[705,2618,2619],{},"options",[1915,2621,2622],{},[705,2623,2624],{},"DeepPartial\u003CRecipeConfig>",[1915,2626,2627],{},"Optional overrides for the recipe configuration",[1898,2629,2630,2635,2640],{},[1915,2631,2632],{},[705,2633,2634],{},"options.base",[1915,2636,2637],{},[705,2638,2639],{},"VariantDeclarationsBlock",[1915,2641,2642],{},"Custom base styles for the group",[1898,2644,2645,2650,2655],{},[1915,2646,2647],{},[705,2648,2649],{},"options.variants",[1915,2651,2652],{},[705,2653,2654],{},"Variants",[1915,2656,2657],{},"Custom variant definitions for the recipe",[1898,2659,2660,2665,2670],{},[1915,2661,2662],{},[705,2663,2664],{},"options.defaultVariants",[1915,2666,2667],{},[705,2668,2669],{},"Record\u003Ckeyof Variants, string>",[1915,2671,2672],{},"Default variant values for the recipe",[1898,2674,2675,2680,2685],{},[1915,2676,2677],{},[705,2678,2679],{},"options.filter",[1915,2681,2682],{},[705,2683,2684],{},"Record\u003Cstring, string[]>",[1915,2686,2687],{},"Limit which variant values are generated",[692,2689,2690],{},[696,2691,2692],{},"Variants:",[1892,2694,2695,2708],{},[1895,2696,2697],{},[1898,2698,2699,2702,2705],{},[1901,2700,2701],{},"Variant",[1901,2703,2704],{},"Options",[1901,2706,2707],{},"Default",[1910,2709,2710,2727],{},[1898,2711,2712,2716,2723],{},[1915,2713,2714],{},[705,2715,1860],{},[1915,2717,2718,2720,2721],{},[705,2719,1136],{},", ",[705,2722,1185],{},[1915,2724,2725],{},[705,2726,1136],{},[1898,2728,2729,2733,2741],{},[1915,2730,2731],{},[705,2732,1953],{},[1915,2734,2735,2720,2737,2720,2739],{},[705,2736,1201],{},[705,2738,1150],{},[705,2740,1218],{},[1915,2742,2743],{},[705,2744,1150],{},[692,2746,2747],{},[700,2748,2749],{"href":132},"Learn more about recipes →",[688,2751,2753],{"id":2752},"best-practices","Best Practices",[728,2755,2756,2765,2774,2783],{},[731,2757,2758,2761,2762,2764],{},[696,2759,2760],{},"Pair with the Toggle recipe",": The group handles layout; each child should use the ",[700,2763,484],{"href":485}," recipe for consistent controls.",[731,2766,2767,2770,2771,2773],{},[696,2768,2769],{},"Match sizes",": Use the same ",[705,2772,1953],{}," on the group and its child toggles so spacing and buttons scale together.",[731,2775,2776,2779,2780,2782],{},[696,2777,2778],{},"Reach for Field Group when segments should touch",": Use the ",[700,2781,448],{"href":449}," recipe for a connected segmented control; use the Toggle Group when the toggles should stay spaced apart.",[731,2784,2785,2788,2789,2791],{},[696,2786,2787],{},"Label the set",": Always describe the group's purpose with ",[705,2790,2218],{}," so screen readers communicate the relationship between options.",[688,2793,2795],{"id":2794},"faq","FAQ",[2797,2798,2799,2817,2827,2835],"accordion",{},[2800,2801,2804,2805,2720,2808,2720,2811,2813,2814,2816],"accordion-item",{"icon":2802,"label":2803},"i-lucide-circle-help","Does the group propagate color or size to its toggles?","No. The group is a pure layout container — it sets the flex direction and the gap between items. Each child toggle keeps its own ",[705,2806,2807],{},"color",[705,2809,2810],{},"variant",[705,2812,1953],{},", and pressed state. Pass the same ",[705,2815,1953],{}," to the group and its children if you want the spacing and the buttons to scale together.",[2800,2818,2820,2821,2823,2824,2826],{"icon":2802,"label":2819},"How do I make the toggles touch (a segmented control)?","The Toggle Group always spaces its items apart. For a connected segmented control, wrap ",[705,2822,2036],{}," toggles in the ",[700,2825,448],{"href":449}," recipe instead — it flattens adjacent radii and inner borders so the segments read as one control.",[2800,2828,2830,2831,2834],{"icon":2802,"label":2829},"How do I make it single-select like a radio group?","Selection behavior lives in your component logic, not the CSS. For single-select, keep one toggle's ",[705,2832,2833],{},"aria-pressed=\"true\""," and clear the others when a new one is pressed; for multi-select, let several be pressed at once. The recipe only lays the toggles out.",[2800,2836,2838,2839,2841],{"icon":2802,"label":2837},"How does filtering affect the recipe?","When you use the ",[705,2840,2414],{}," option, variant values you exclude are not generated, and default variants are adjusted if they reference a removed value — so the recipe stays consistent and only emits the CSS you use.",[2843,2844,2845],"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 .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":785,"searchDepth":826,"depth":826,"links":2847},[2848,2849,2850,2851,2856,2857,2858,2859,2860,2864,2867,2868],{"id":690,"depth":826,"text":78},{"id":722,"depth":826,"text":723},{"id":757,"depth":826,"text":758},{"id":1860,"depth":826,"text":1861,"children":2852},[2853,2854,2855],{"id":1136,"depth":855,"text":1868},{"id":1185,"depth":855,"text":1877},{"id":1886,"depth":855,"text":1887},{"id":1946,"depth":826,"text":1947},{"id":2021,"depth":826,"text":2022},{"id":2186,"depth":826,"text":2187},{"id":2203,"depth":826,"text":568},{"id":2244,"depth":826,"text":2245,"children":2861},[2862,2863],{"id":2248,"depth":855,"text":2249},{"id":2407,"depth":855,"text":2408},{"id":2566,"depth":826,"text":73,"children":2865},[2866],{"id":2569,"depth":855,"text":2572},{"id":2752,"depth":826,"text":2753},{"id":2794,"depth":826,"text":2795},"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.",null,{},{"icon":7},{"title":488,"description":2869},"_Eg9-ms10IcMqnuquO85EafKg6Ni_Lx_ybZMEARMC_0",[2876,2878],{"title":484,"path":485,"stem":486,"description":2877,"icon":7,"children":-1},"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.",{"title":495,"path":496,"stem":497,"description":2879,"icon":7,"children":-1},"A right-click menu surface for contextual actions. Composed of six coordinated recipes (panel, item, separator, label, shortcut, sub-trigger) with inset, destructive, checkbox\u002Fradio, and submenu support across three colors, three visual styles, and three sizes.",1781596342186]