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