[{"data":1,"prerenderedAt":3145},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-composables-hamburger-menu":415,"-docs-theme-components-composables-hamburger-menu-surround":3140},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,297,370],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":290,"path":291,"stem":292},"Dropdown","/docs/theme/components/composables/dropdown","docs/theme/components/02.composables/14.dropdown",{"title":294,"path":295,"stem":296},"Hamburger Menu","/docs/theme/components/composables/hamburger-menu","docs/theme/components/02.composables/14.hamburger-menu",{"title":102,"path":298,"stem":299,"children":300,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[301,302,305],{"title":64,"path":298,"stem":299,"icon":65},{"title":156,"path":303,"stem":304,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":306,"stem":307,"children":308,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[309,313,317,321,324,328,332,336,340,344,348,351,355,359,363,367],{"title":310,"path":311,"stem":312,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":314,"path":315,"stem":316,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":318,"path":319,"stem":320,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":322,"stem":323,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":325,"path":326,"stem":327,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":329,"path":330,"stem":331,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":333,"path":334,"stem":335,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":337,"path":338,"stem":339,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":341,"path":342,"stem":343,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":345,"path":346,"stem":347,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":349,"stem":350,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":352,"path":353,"stem":354,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":356,"path":357,"stem":358,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":360,"path":361,"stem":362,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":364,"path":365,"stem":366,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":368,"stem":369,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":371,"path":372,"stem":373,"children":374,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[375,376,379],{"title":64,"path":372,"stem":373,"icon":65},{"title":156,"path":377,"stem":378,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":380,"stem":381,"children":382,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[383,387,391,395,399,403,407,411],{"title":384,"path":385,"stem":386,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":388,"path":389,"stem":390,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":392,"path":393,"stem":394,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":396,"path":397,"stem":398,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":400,"path":401,"stem":402,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":404,"path":405,"stem":406,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":408,"path":409,"stem":410,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":412,"path":413,"stem":414,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":416,"title":294,"body":417,"description":3134,"extension":1222,"links":3135,"meta":3136,"navigation":206,"path":295,"seo":3137,"sitemap":3138,"stem":296,"__hash__":3139},"docs_theme/docs/theme/components/02.composables/14.hamburger-menu.md",{"type":418,"value":419,"toc":3107},"minimark",[420,424,459,467,471,474,514,518,1744,1747,1764,1769,1772,1777,1780,1844,1854,1858,1861,1864,1964,1967,1984,1987,1990,1993,1997,2008,2011,2014,2018,2021,2024,2027,2030,2033,2036,2039,2046,2049,2053,2066,2069,2085,2089,2107,2186,2242,2245,2306,2424,2428,2432,2438,2614,2618,2625,2768,2773,2776,2782,2785,2790,2912,2917,3012,3017,3021,3103],[421,422,64],"h2",{"id":423},"overview",[425,426,427,428,431,432,436,437,440,441,444,445,448,449,448,452,455,456,458],"p",{},"The ",[429,430,294],"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 ",[433,434,435],"code",{},"active"," state is set to ",[433,438,439],{},"true",". The styling is provided by ",[433,442,443],{},"useHamburgerMenuRecipe()",", which exposes ",[433,446,447],{},"color",", ",[433,450,451],{},"size",[433,453,454],{},"animation",", and ",[433,457,435],{}," axes.",[425,460,461,462,466],{},"The Hamburger Menu recipe integrates directly with the default ",[463,464,465],"a",{"href":157},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS. Visual state (open/closed) is driven by modifier classes, so transitions are pure CSS.",[421,468,470],{"id":469},"why-use-the-hamburger-menu-recipe","Why use the Hamburger Menu recipe?",[425,472,473],{},"The Hamburger Menu recipe helps you:",[475,476,477,484,490,496,502,508],"ul",{},[478,479,480,483],"li",{},[429,481,482],{},"Ship faster with sensible defaults",": Get 3 colors, 3 sizes, and 7 open-state animations out of the box with a single composable call.",[478,485,486,489],{},[429,487,488],{},"Keep transitions smooth",": CSS-driven transforms with staggered timings produce polished open-close animations without JavaScript.",[478,491,492,495],{},[429,493,494],{},"Swap animations freely",": Pick the glyph that fits your UI — X for close, arrows for directional menus, plus/minus for expand/collapse affordances.",[478,497,498,501],{},[429,499,500],{},"Maintain consistency",": Compound variants ensure every color adapts correctly across light and dark modes.",[478,503,504,507],{},[429,505,506],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[478,509,510,513],{},[429,511,512],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, size, animation, or active values at compile time.",[421,515,517],{"id":516},"usage","Usage",[519,520,522,527,534,782,786,804,1736,1740],"steps",{"level":521},"4",[523,524,526],"h4",{"id":525},"register-the-recipe","Register the recipe",[425,528,529,530,533],{},"Add the Hamburger Menu recipe to a local Styleframe instance. The global ",[433,531,532],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[535,536,538,674],"code-tree",{"default-value":537},"src/components/hamburger-menu.styleframe.ts",[539,540,545],"pre",{"className":541,"code":542,"filename":537,"language":543,"meta":544,"style":544},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useHamburgerMenuRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst hamburgerMenu = useHamburgerMenuRecipe(s);\n\nexport default s;\n","ts","",[433,546,547,583,606,612,633,638,655,660],{"__ignoreMap":544},[548,549,552,556,560,564,567,570,573,577,580],"span",{"class":550,"line":551},"line",1,[548,553,555],{"class":554},"s7zQu","import",[548,557,559],{"class":558},"sMK4o"," {",[548,561,563],{"class":562},"sTEyZ"," styleframe",[548,565,566],{"class":558}," }",[548,568,569],{"class":554}," from",[548,571,572],{"class":558}," '",[548,574,576],{"class":575},"sfazB","virtual:styleframe",[548,578,579],{"class":558},"'",[548,581,582],{"class":558},";\n",[548,584,586,588,590,593,595,597,599,602,604],{"class":550,"line":585},2,[548,587,555],{"class":554},[548,589,559],{"class":558},[548,591,592],{"class":562}," useHamburgerMenuRecipe",[548,594,566],{"class":558},[548,596,569],{"class":554},[548,598,572],{"class":558},[548,600,601],{"class":575},"@styleframe/theme",[548,603,579],{"class":558},[548,605,582],{"class":558},[548,607,609],{"class":550,"line":608},3,[548,610,611],{"emptyLinePlaceholder":206},"\n",[548,613,615,619,622,625,628,631],{"class":550,"line":614},4,[548,616,618],{"class":617},"spNyl","const",[548,620,621],{"class":562}," s ",[548,623,624],{"class":558},"=",[548,626,563],{"class":627},"s2Zo4",[548,629,630],{"class":562},"()",[548,632,582],{"class":558},[548,634,636],{"class":550,"line":635},5,[548,637,611],{"emptyLinePlaceholder":206},[548,639,641,643,646,648,650,653],{"class":550,"line":640},6,[548,642,618],{"class":617},[548,644,645],{"class":562}," hamburgerMenu ",[548,647,624],{"class":558},[548,649,592],{"class":627},[548,651,652],{"class":562},"(s)",[548,654,582],{"class":558},[548,656,658],{"class":550,"line":657},7,[548,659,611],{"emptyLinePlaceholder":206},[548,661,663,666,669,672],{"class":550,"line":662},8,[548,664,665],{"class":554},"export",[548,667,668],{"class":554}," default",[548,670,671],{"class":562}," s",[548,673,582],{"class":558},[539,675,677],{"className":541,"code":676,"filename":532,"language":543,"meta":544,"style":544},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[433,678,679,700,727,731,745,749,758,767,771],{"__ignoreMap":544},[548,680,681,683,685,687,689,691,693,696,698],{"class":550,"line":551},[548,682,555],{"class":554},[548,684,559],{"class":558},[548,686,563],{"class":562},[548,688,566],{"class":558},[548,690,569],{"class":554},[548,692,572],{"class":558},[548,694,695],{"class":575},"styleframe",[548,697,579],{"class":558},[548,699,582],{"class":558},[548,701,702,704,706,709,712,715,717,719,721,723,725],{"class":550,"line":585},[548,703,555],{"class":554},[548,705,559],{"class":558},[548,707,708],{"class":562}," useDesignTokensPreset",[548,710,711],{"class":558},",",[548,713,714],{"class":562}," useUtilitiesPreset",[548,716,566],{"class":558},[548,718,569],{"class":554},[548,720,572],{"class":558},[548,722,601],{"class":575},[548,724,579],{"class":558},[548,726,582],{"class":558},[548,728,729],{"class":550,"line":608},[548,730,611],{"emptyLinePlaceholder":206},[548,732,733,735,737,739,741,743],{"class":550,"line":614},[548,734,618],{"class":617},[548,736,621],{"class":562},[548,738,624],{"class":558},[548,740,563],{"class":627},[548,742,630],{"class":562},[548,744,582],{"class":558},[548,746,747],{"class":550,"line":635},[548,748,611],{"emptyLinePlaceholder":206},[548,750,751,754,756],{"class":550,"line":640},[548,752,753],{"class":627},"useDesignTokensPreset",[548,755,652],{"class":562},[548,757,582],{"class":558},[548,759,760,763,765],{"class":550,"line":657},[548,761,762],{"class":627},"useUtilitiesPreset",[548,764,652],{"class":562},[548,766,582],{"class":558},[548,768,769],{"class":550,"line":662},[548,770,611],{"emptyLinePlaceholder":206},[548,772,774,776,778,780],{"class":550,"line":773},9,[548,775,665],{"class":554},[548,777,668],{"class":554},[548,779,671],{"class":562},[548,781,582],{"class":558},[523,783,785],{"id":784},"build-the-component","Build the component",[425,787,788,789,792,793,795,796,799,800,803],{},"Import the ",[433,790,791],{},"hamburgerMenu"," runtime function from the virtual module, manage ",[433,794,435],{}," state locally, and render a ",[433,797,798],{},"\u003Cbutton>"," with a single ",[433,801,802],{},".hamburger-menu-inner"," child — the pseudo-elements render the top and bottom bars automatically:",[805,806,807,1096],"tabs",{},[808,809,812],"tabs-item",{"icon":810,"label":811},"i-devicon-react","React",[539,813,818],{"className":814,"code":815,"filename":816,"language":817,"meta":544,"style":544},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useState } from \"react\";\nimport { hamburgerMenu } from \"virtual:styleframe\";\n\ninterface HamburgerMenuProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    animation?:\n        | \"close\"\n        | \"arrow-up\"\n        | \"arrow-down\"\n        | \"arrow-left\"\n        | \"arrow-right\"\n        | \"minus\"\n        | \"plus\";\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}: HamburgerMenuProps) {\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\" />\n        \u003C/button>\n    );\n}\n","src/components/HamburgerMenu.tsx","tsx",[433,819,820,825,830,834,839,844,849,854,859,864,870,876,882,888,894,900,906,912,917,923,929,935,941,947,953,959,965,971,977,983,989,995,1001,1007,1013,1019,1025,1031,1037,1043,1049,1055,1061,1067,1073,1079,1085,1091],{"__ignoreMap":544},[548,821,822],{"class":550,"line":551},[548,823,824],{},"import { useState } from \"react\";\n",[548,826,827],{"class":550,"line":585},[548,828,829],{},"import { hamburgerMenu } from \"virtual:styleframe\";\n",[548,831,832],{"class":550,"line":608},[548,833,611],{"emptyLinePlaceholder":206},[548,835,836],{"class":550,"line":614},[548,837,838],{},"interface HamburgerMenuProps {\n",[548,840,841],{"class":550,"line":635},[548,842,843],{},"    color?: \"light\" | \"dark\" | \"neutral\";\n",[548,845,846],{"class":550,"line":640},[548,847,848],{},"    size?: \"sm\" | \"md\" | \"lg\";\n",[548,850,851],{"class":550,"line":657},[548,852,853],{},"    animation?:\n",[548,855,856],{"class":550,"line":662},[548,857,858],{},"        | \"close\"\n",[548,860,861],{"class":550,"line":773},[548,862,863],{},"        | \"arrow-up\"\n",[548,865,867],{"class":550,"line":866},10,[548,868,869],{},"        | \"arrow-down\"\n",[548,871,873],{"class":550,"line":872},11,[548,874,875],{},"        | \"arrow-left\"\n",[548,877,879],{"class":550,"line":878},12,[548,880,881],{},"        | \"arrow-right\"\n",[548,883,885],{"class":550,"line":884},13,[548,886,887],{},"        | \"minus\"\n",[548,889,891],{"class":550,"line":890},14,[548,892,893],{},"        | \"plus\";\n",[548,895,897],{"class":550,"line":896},15,[548,898,899],{},"    label?: string;\n",[548,901,903],{"class":550,"line":902},16,[548,904,905],{},"    onToggle?: (active: boolean) => void;\n",[548,907,909],{"class":550,"line":908},17,[548,910,911],{},"}\n",[548,913,915],{"class":550,"line":914},18,[548,916,611],{"emptyLinePlaceholder":206},[548,918,920],{"class":550,"line":919},19,[548,921,922],{},"export function HamburgerMenu({\n",[548,924,926],{"class":550,"line":925},20,[548,927,928],{},"    color = \"neutral\",\n",[548,930,932],{"class":550,"line":931},21,[548,933,934],{},"    size = \"md\",\n",[548,936,938],{"class":550,"line":937},22,[548,939,940],{},"    animation = \"close\",\n",[548,942,944],{"class":550,"line":943},23,[548,945,946],{},"    label = \"Toggle menu\",\n",[548,948,950],{"class":550,"line":949},24,[548,951,952],{},"    onToggle,\n",[548,954,956],{"class":550,"line":955},25,[548,957,958],{},"}: HamburgerMenuProps) {\n",[548,960,962],{"class":550,"line":961},26,[548,963,964],{},"    const [active, setActive] = useState(false);\n",[548,966,968],{"class":550,"line":967},27,[548,969,970],{},"    const toggle = () => {\n",[548,972,974],{"class":550,"line":973},28,[548,975,976],{},"        const next = !active;\n",[548,978,980],{"class":550,"line":979},29,[548,981,982],{},"        setActive(next);\n",[548,984,986],{"class":550,"line":985},30,[548,987,988],{},"        onToggle?.(next);\n",[548,990,992],{"class":550,"line":991},31,[548,993,994],{},"    };\n",[548,996,998],{"class":550,"line":997},32,[548,999,1000],{},"    return (\n",[548,1002,1004],{"class":550,"line":1003},33,[548,1005,1006],{},"        \u003Cbutton\n",[548,1008,1010],{"class":550,"line":1009},34,[548,1011,1012],{},"            type=\"button\"\n",[548,1014,1016],{"class":550,"line":1015},35,[548,1017,1018],{},"            className={hamburgerMenu({\n",[548,1020,1022],{"class":550,"line":1021},36,[548,1023,1024],{},"                color,\n",[548,1026,1028],{"class":550,"line":1027},37,[548,1029,1030],{},"                size,\n",[548,1032,1034],{"class":550,"line":1033},38,[548,1035,1036],{},"                animation,\n",[548,1038,1040],{"class":550,"line":1039},39,[548,1041,1042],{},"                active: active ? \"true\" : \"false\",\n",[548,1044,1046],{"class":550,"line":1045},40,[548,1047,1048],{},"            })}\n",[548,1050,1052],{"class":550,"line":1051},41,[548,1053,1054],{},"            aria-expanded={active}\n",[548,1056,1058],{"class":550,"line":1057},42,[548,1059,1060],{},"            aria-label={label}\n",[548,1062,1064],{"class":550,"line":1063},43,[548,1065,1066],{},"            onClick={toggle}\n",[548,1068,1070],{"class":550,"line":1069},44,[548,1071,1072],{},"        >\n",[548,1074,1076],{"class":550,"line":1075},45,[548,1077,1078],{},"            \u003Cspan className=\"hamburger-menu-inner\" />\n",[548,1080,1082],{"class":550,"line":1081},46,[548,1083,1084],{},"        \u003C/button>\n",[548,1086,1088],{"class":550,"line":1087},47,[548,1089,1090],{},"    );\n",[548,1092,1094],{"class":550,"line":1093},48,[548,1095,911],{},[808,1097,1100],{"icon":1098,"label":1099},"i-devicon-vuejs","Vue",[539,1101,1106],{"className":1102,"code":1103,"filename":1104,"language":1105,"meta":544,"style":544},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { hamburgerMenu } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    size = \"md\",\n    animation = \"close\",\n    label = \"Toggle menu\",\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    animation?:\n        | \"close\"\n        | \"arrow-up\"\n        | \"arrow-down\"\n        | \"arrow-left\"\n        | \"arrow-right\"\n        | \"minus\"\n        | \"plus\";\n    label?: string;\n}>();\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/script>\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\" />\n    \u003C/button>\n\u003C/template>\n","src/components/HamburgerMenu.vue","vue",[433,1107,1108,1135,1162,1183,1187,1194,1211,1227,1243,1259,1273,1308,1341,1349,1361,1372,1383,1394,1405,1416,1429,1442,1451,1455,1478,1496,1506,1513,1520,1527,1564,1573,1579,1588,1592,1601,1609,1623,1640,1655,1671,1692,1697,1719,1728],{"__ignoreMap":544},[548,1109,1110,1113,1117,1120,1123,1125,1128,1130,1132],{"class":550,"line":551},[548,1111,1112],{"class":558},"\u003C",[548,1114,1116],{"class":1115},"swJcz","script",[548,1118,1119],{"class":617}," setup",[548,1121,1122],{"class":617}," lang",[548,1124,624],{"class":558},[548,1126,1127],{"class":558},"\"",[548,1129,543],{"class":575},[548,1131,1127],{"class":558},[548,1133,1134],{"class":558},">\n",[548,1136,1137,1139,1141,1144,1146,1149,1151,1153,1156,1158,1160],{"class":550,"line":585},[548,1138,555],{"class":554},[548,1140,559],{"class":558},[548,1142,1143],{"class":562}," computed",[548,1145,711],{"class":558},[548,1147,1148],{"class":562}," ref",[548,1150,566],{"class":558},[548,1152,569],{"class":554},[548,1154,1155],{"class":558}," \"",[548,1157,1105],{"class":575},[548,1159,1127],{"class":558},[548,1161,582],{"class":558},[548,1163,1164,1166,1168,1171,1173,1175,1177,1179,1181],{"class":550,"line":608},[548,1165,555],{"class":554},[548,1167,559],{"class":558},[548,1169,1170],{"class":562}," hamburgerMenu",[548,1172,566],{"class":558},[548,1174,569],{"class":554},[548,1176,1155],{"class":558},[548,1178,576],{"class":575},[548,1180,1127],{"class":558},[548,1182,582],{"class":558},[548,1184,1185],{"class":550,"line":614},[548,1186,611],{"emptyLinePlaceholder":206},[548,1188,1189,1191],{"class":550,"line":635},[548,1190,618],{"class":617},[548,1192,1193],{"class":558}," {\n",[548,1195,1196,1199,1201,1203,1206,1208],{"class":550,"line":640},[548,1197,1198],{"class":562},"    color ",[548,1200,624],{"class":558},[548,1202,1155],{"class":558},[548,1204,1205],{"class":575},"neutral",[548,1207,1127],{"class":558},[548,1209,1210],{"class":558},",\n",[548,1212,1213,1216,1218,1220,1223,1225],{"class":550,"line":657},[548,1214,1215],{"class":562},"    size ",[548,1217,624],{"class":558},[548,1219,1155],{"class":558},[548,1221,1222],{"class":575},"md",[548,1224,1127],{"class":558},[548,1226,1210],{"class":558},[548,1228,1229,1232,1234,1236,1239,1241],{"class":550,"line":662},[548,1230,1231],{"class":562},"    animation ",[548,1233,624],{"class":558},[548,1235,1155],{"class":558},[548,1237,1238],{"class":575},"close",[548,1240,1127],{"class":558},[548,1242,1210],{"class":558},[548,1244,1245,1248,1250,1252,1255,1257],{"class":550,"line":773},[548,1246,1247],{"class":562},"    label ",[548,1249,624],{"class":558},[548,1251,1155],{"class":558},[548,1253,1254],{"class":575},"Toggle menu",[548,1256,1127],{"class":558},[548,1258,1210],{"class":558},[548,1260,1261,1264,1267,1270],{"class":550,"line":866},[548,1262,1263],{"class":558},"}",[548,1265,1266],{"class":558}," =",[548,1268,1269],{"class":627}," defineProps",[548,1271,1272],{"class":558},"\u003C{\n",[548,1274,1275,1278,1281,1283,1286,1288,1291,1293,1296,1298,1300,1302,1304,1306],{"class":550,"line":872},[548,1276,1277],{"class":1115},"    color",[548,1279,1280],{"class":558},"?:",[548,1282,1155],{"class":558},[548,1284,1285],{"class":575},"light",[548,1287,1127],{"class":558},[548,1289,1290],{"class":558}," |",[548,1292,1155],{"class":558},[548,1294,1295],{"class":575},"dark",[548,1297,1127],{"class":558},[548,1299,1290],{"class":558},[548,1301,1155],{"class":558},[548,1303,1205],{"class":575},[548,1305,1127],{"class":558},[548,1307,582],{"class":558},[548,1309,1310,1313,1315,1317,1320,1322,1324,1326,1328,1330,1332,1334,1337,1339],{"class":550,"line":878},[548,1311,1312],{"class":1115},"    size",[548,1314,1280],{"class":558},[548,1316,1155],{"class":558},[548,1318,1319],{"class":575},"sm",[548,1321,1127],{"class":558},[548,1323,1290],{"class":558},[548,1325,1155],{"class":558},[548,1327,1222],{"class":575},[548,1329,1127],{"class":558},[548,1331,1290],{"class":558},[548,1333,1155],{"class":558},[548,1335,1336],{"class":575},"lg",[548,1338,1127],{"class":558},[548,1340,582],{"class":558},[548,1342,1343,1346],{"class":550,"line":884},[548,1344,1345],{"class":1115},"    animation",[548,1347,1348],{"class":558},"?:\n",[548,1350,1351,1354,1356,1358],{"class":550,"line":890},[548,1352,1353],{"class":558},"        |",[548,1355,1155],{"class":558},[548,1357,1238],{"class":575},[548,1359,1360],{"class":558},"\"\n",[548,1362,1363,1365,1367,1370],{"class":550,"line":896},[548,1364,1353],{"class":558},[548,1366,1155],{"class":558},[548,1368,1369],{"class":575},"arrow-up",[548,1371,1360],{"class":558},[548,1373,1374,1376,1378,1381],{"class":550,"line":902},[548,1375,1353],{"class":558},[548,1377,1155],{"class":558},[548,1379,1380],{"class":575},"arrow-down",[548,1382,1360],{"class":558},[548,1384,1385,1387,1389,1392],{"class":550,"line":908},[548,1386,1353],{"class":558},[548,1388,1155],{"class":558},[548,1390,1391],{"class":575},"arrow-left",[548,1393,1360],{"class":558},[548,1395,1396,1398,1400,1403],{"class":550,"line":914},[548,1397,1353],{"class":558},[548,1399,1155],{"class":558},[548,1401,1402],{"class":575},"arrow-right",[548,1404,1360],{"class":558},[548,1406,1407,1409,1411,1414],{"class":550,"line":919},[548,1408,1353],{"class":558},[548,1410,1155],{"class":558},[548,1412,1413],{"class":575},"minus",[548,1415,1360],{"class":558},[548,1417,1418,1420,1422,1425,1427],{"class":550,"line":925},[548,1419,1353],{"class":558},[548,1421,1155],{"class":558},[548,1423,1424],{"class":575},"plus",[548,1426,1127],{"class":558},[548,1428,582],{"class":558},[548,1430,1431,1434,1436,1440],{"class":550,"line":931},[548,1432,1433],{"class":1115},"    label",[548,1435,1280],{"class":558},[548,1437,1439],{"class":1438},"sBMFI"," string",[548,1441,582],{"class":558},[548,1443,1444,1447,1449],{"class":550,"line":937},[548,1445,1446],{"class":558},"}>",[548,1448,630],{"class":562},[548,1450,582],{"class":558},[548,1452,1453],{"class":550,"line":943},[548,1454,611],{"emptyLinePlaceholder":206},[548,1456,1457,1459,1462,1464,1466,1469,1473,1476],{"class":550,"line":949},[548,1458,618],{"class":617},[548,1460,1461],{"class":562}," active ",[548,1463,624],{"class":558},[548,1465,1148],{"class":627},[548,1467,1468],{"class":562},"(",[548,1470,1472],{"class":1471},"sfNiH","false",[548,1474,1475],{"class":562},")",[548,1477,582],{"class":558},[548,1479,1480,1482,1485,1487,1489,1491,1493],{"class":550,"line":955},[548,1481,618],{"class":617},[548,1483,1484],{"class":562}," classes ",[548,1486,624],{"class":558},[548,1488,1143],{"class":627},[548,1490,1468],{"class":562},[548,1492,630],{"class":558},[548,1494,1495],{"class":617}," =>\n",[548,1497,1498,1501,1503],{"class":550,"line":961},[548,1499,1500],{"class":627},"    hamburgerMenu",[548,1502,1468],{"class":562},[548,1504,1505],{"class":558},"{\n",[548,1507,1508,1511],{"class":550,"line":967},[548,1509,1510],{"class":562},"        color",[548,1512,1210],{"class":558},[548,1514,1515,1518],{"class":550,"line":973},[548,1516,1517],{"class":562},"        size",[548,1519,1210],{"class":558},[548,1521,1522,1525],{"class":550,"line":979},[548,1523,1524],{"class":562},"        animation",[548,1526,1210],{"class":558},[548,1528,1529,1532,1535,1538,1541,1544,1547,1549,1551,1553,1556,1558,1560,1562],{"class":550,"line":985},[548,1530,1531],{"class":1115},"        active",[548,1533,1534],{"class":558},":",[548,1536,1537],{"class":562}," active",[548,1539,1540],{"class":558},".",[548,1542,1543],{"class":562},"value ",[548,1545,1546],{"class":558},"?",[548,1548,1155],{"class":558},[548,1550,439],{"class":575},[548,1552,1127],{"class":558},[548,1554,1555],{"class":558}," :",[548,1557,1155],{"class":558},[548,1559,1472],{"class":575},[548,1561,1127],{"class":558},[548,1563,1210],{"class":558},[548,1565,1566,1569,1571],{"class":550,"line":991},[548,1567,1568],{"class":558},"    }",[548,1570,1475],{"class":562},[548,1572,1210],{"class":558},[548,1574,1575,1577],{"class":550,"line":997},[548,1576,1475],{"class":562},[548,1578,582],{"class":558},[548,1580,1581,1584,1586],{"class":550,"line":1003},[548,1582,1583],{"class":558},"\u003C/",[548,1585,1116],{"class":1115},[548,1587,1134],{"class":558},[548,1589,1590],{"class":550,"line":1009},[548,1591,611],{"emptyLinePlaceholder":206},[548,1593,1594,1596,1599],{"class":550,"line":1015},[548,1595,1112],{"class":558},[548,1597,1598],{"class":1115},"template",[548,1600,1134],{"class":558},[548,1602,1603,1606],{"class":550,"line":1021},[548,1604,1605],{"class":558},"    \u003C",[548,1607,1608],{"class":1115},"button\n",[548,1610,1611,1614,1616,1618,1621],{"class":550,"line":1027},[548,1612,1613],{"class":617},"        type",[548,1615,624],{"class":558},[548,1617,1127],{"class":558},[548,1619,1620],{"class":575},"button",[548,1622,1360],{"class":558},[548,1624,1625,1628,1631,1633,1635,1638],{"class":550,"line":1033},[548,1626,1627],{"class":558},"        :",[548,1629,1630],{"class":617},"class",[548,1632,624],{"class":558},[548,1634,1127],{"class":558},[548,1636,1637],{"class":562},"classes",[548,1639,1360],{"class":558},[548,1641,1642,1644,1647,1649,1651,1653],{"class":550,"line":1039},[548,1643,1627],{"class":558},[548,1645,1646],{"class":617},"aria-expanded",[548,1648,624],{"class":558},[548,1650,1127],{"class":558},[548,1652,435],{"class":562},[548,1654,1360],{"class":558},[548,1656,1657,1659,1662,1664,1666,1669],{"class":550,"line":1045},[548,1658,1627],{"class":558},[548,1660,1661],{"class":617},"aria-label",[548,1663,624],{"class":558},[548,1665,1127],{"class":558},[548,1667,1668],{"class":562},"label",[548,1670,1360],{"class":558},[548,1672,1673,1676,1679,1681,1683,1685,1688,1690],{"class":550,"line":1051},[548,1674,1675],{"class":558},"        @",[548,1677,1678],{"class":617},"click",[548,1680,624],{"class":558},[548,1682,1127],{"class":558},[548,1684,435],{"class":562},[548,1686,1687],{"class":558}," = !",[548,1689,435],{"class":562},[548,1691,1360],{"class":558},[548,1693,1694],{"class":550,"line":1057},[548,1695,1696],{"class":558},"    >\n",[548,1698,1699,1702,1704,1707,1709,1711,1714,1716],{"class":550,"line":1063},[548,1700,1701],{"class":558},"        \u003C",[548,1703,548],{"class":1115},[548,1705,1706],{"class":617}," class",[548,1708,624],{"class":558},[548,1710,1127],{"class":558},[548,1712,1713],{"class":575},"hamburger-menu-inner",[548,1715,1127],{"class":558},[548,1717,1718],{"class":558}," />\n",[548,1720,1721,1724,1726],{"class":550,"line":1069},[548,1722,1723],{"class":558},"    \u003C/",[548,1725,1620],{"class":1115},[548,1727,1134],{"class":558},[548,1729,1730,1732,1734],{"class":550,"line":1075},[548,1731,1583],{"class":558},[548,1733,1598],{"class":1115},[548,1735,1134],{"class":558},[523,1737,1739],{"id":1738},"see-it-in-action","See it in action",[1741,1742],"story-preview",{"story":1743,":panel":439},"theme-recipes-hamburgermenu--default",[421,1745,181],{"id":1746},"colors",[425,1748,1749,1750,448,1752,455,1754,1756,1757,1759,1760,1763],{},"The Hamburger Menu recipe includes 3 color variants: ",[433,1751,1285],{},[433,1753,1295],{},[433,1755,1205],{},". The color value drives the bar color via the button's ",[433,1758,447],{}," CSS property (the inner bars use ",[433,1761,1762],{},"currentColor",").",[425,1765,427,1766,1768],{},[433,1767,1205],{}," color adapts automatically: dark bars in light mode, light bars in dark mode, making it the safest default.",[1741,1770],{"story":1771,":panel":439},"theme-recipes-hamburgermenu--neutral",[1773,1774,1776],"h3",{"id":1775},"color-reference","Color Reference",[1741,1778],{"story":1779},"theme-recipes-hamburgermenu--all-variants",[1781,1782,1783,1799],"table",{},[1784,1785,1786],"thead",{},[1787,1788,1789,1793,1796],"tr",{},[1790,1791,1792],"th",{},"Color",[1790,1794,1795],{},"Token",[1790,1797,1798],{},"Use Case",[1800,1801,1802,1818,1832],"tbody",{},[1787,1803,1804,1809,1815],{},[1805,1806,1807],"td",{},[433,1808,1285],{},[1805,1810,1811,1814],{},[433,1812,1813],{},"@color.gray-900"," (fixed)",[1805,1816,1817],{},"Dark bars on light surfaces, stays light in dark mode",[1787,1819,1820,1824,1829],{},[1805,1821,1822],{},[433,1823,1295],{},[1805,1825,1826,1814],{},[433,1827,1828],{},"@color.white",[1805,1830,1831],{},"Light bars on dark surfaces, stays dark in light mode",[1787,1833,1834,1838,1841],{},[1805,1835,1836],{},[433,1837,1205],{},[1805,1839,1840],{},"Adaptive (light ↔ dark)",[1805,1842,1843],{},"Default color, adapts to the current color scheme",[1845,1846,1847,1850,1851,1853],"tip",{},[429,1848,1849],{},"Pro tip:"," Use ",[433,1852,1205],{}," as your default color. It adapts automatically to the user's color scheme without requiring separate light- and dark-mode props.",[421,1855,1857],{"id":1856},"sizes","Sizes",[425,1859,1860],{},"Three size variants control the bar dimensions (width, height, vertical offset) and the button's padding:",[1741,1862],{"story":1863},"theme-recipes-hamburgermenu--all-sizes",[1781,1865,1866,1885],{},[1784,1867,1868],{},[1787,1869,1870,1873,1876,1879,1882],{},[1790,1871,1872],{},"Size",[1790,1874,1875],{},"Bar Width",[1790,1877,1878],{},"Bar Height",[1790,1880,1881],{},"Offset",[1790,1883,1884],{},"Button Padding",[1800,1886,1887,1913,1938],{},[1787,1888,1889,1893,1898,1903,1908],{},[1805,1890,1891],{},[433,1892,1319],{},[1805,1894,1895],{},[433,1896,1897],{},"14px",[1805,1899,1900],{},[433,1901,1902],{},"2px",[1805,1904,1905],{},[433,1906,1907],{},"5px",[1805,1909,1910],{},[433,1911,1912],{},"@0.375",[1787,1914,1915,1919,1924,1928,1933],{},[1805,1916,1917],{},[433,1918,1222],{},[1805,1920,1921],{},[433,1922,1923],{},"20px",[1805,1925,1926],{},[433,1927,1902],{},[1805,1929,1930],{},[433,1931,1932],{},"6px",[1805,1934,1935],{},[433,1936,1937],{},"@0.5",[1787,1939,1940,1944,1949,1954,1959],{},[1805,1941,1942],{},[433,1943,1336],{},[1805,1945,1946],{},[433,1947,1948],{},"26px",[1805,1950,1951],{},[433,1952,1953],{},"3px",[1805,1955,1956],{},[433,1957,1958],{},"8px",[1805,1960,1961],{},[433,1962,1963],{},"@0.625",[421,1965,314],{"id":1966},"animations",[425,1968,1969,1970,1972,1973,1975,1976,1978,1979,1975,1981,1983],{},"Seven ",[433,1971,454],{}," values control how the bars morph when ",[433,1974,435],{}," is ",[433,1977,439],{},". When ",[433,1980,435],{},[433,1982,1472],{}," the button renders as three static horizontal bars regardless of which animation is selected.",[1773,1985,1986],{"id":1238},"Close",[425,1988,1989],{},"The classic hamburger → X transition. Top and bottom bars pivot in and the middle bar fades out, forming an X.",[1741,1991],{"story":1992,":panel":439},"theme-recipes-hamburgermenu--close",[1773,1994,1996],{"id":1995},"arrow-left-right","Arrow Left / Right",[425,1998,1999,2000,2003,2004,2007],{},"Bars scale down and rotate to form a ",[433,2001,2002],{},"‹"," (left) or ",[433,2005,2006],{},"›"," (right). Useful for drawers that slide horizontally.",[1741,2009],{"story":2010,":panel":439},"theme-recipes-hamburgermenu--arrow-left",[1741,2012],{"story":2013,":panel":439},"theme-recipes-hamburgermenu--arrow-right",[1773,2015,2017],{"id":2016},"arrow-up-down","Arrow Up / Down",[425,2019,2020],{},"Like the horizontal arrows, but the entire icon rotates ±90° so the arrow points up or down.",[1741,2022],{"story":2023,":panel":439},"theme-recipes-hamburgermenu--arrow-up",[1741,2025],{"story":2026,":panel":439},"theme-recipes-hamburgermenu--arrow-down",[1773,2028,2029],{"id":1413},"Minus",[425,2031,2032],{},"All bars collapse into a single horizontal line — a subtle transition that suggests \"collapsed\" rather than \"closed\".",[1741,2034],{"story":2035,":panel":439},"theme-recipes-hamburgermenu--minus",[1773,2037,2038],{"id":1424},"Plus",[425,2040,2041,2042,2045],{},"The middle bar stays horizontal while the top bar rotates 90° to form a vertical bar, producing a ",[433,2043,2044],{},"+"," glyph. The bottom bar fades out. Pairs well with expand/collapse interactions.",[1741,2047],{"story":2048,":panel":439},"theme-recipes-hamburgermenu--plus",[421,2050,2052],{"id":2051},"active-state","Active State",[425,2054,427,2055,2057,2058,2061,2062,2065],{},[433,2056,435],{}," axis is a boolean (",[433,2059,2060],{},"\"true\""," / ",[433,2063,2064],{},"\"false\"",") that drives the open-state transform. Consumers are responsible for tracking the open state and toggling it on click.",[1741,2067],{"story":2068,":panel":439},"theme-recipes-hamburgermenu--active",[2070,2071,2072,2075,2076,2078,2079,2081,2082,2084],"note",{},[429,2073,2074],{},"Good to know:"," Pass ",[433,2077,435],{}," as a string (",[433,2080,2060],{}," or ",[433,2083,2064],{},") when calling the runtime function — recipes stringify boolean variant values.",[421,2086,2088],{"id":2087},"anatomy","Anatomy",[425,2090,2091,2092,2094,2095,2098,2099,2102,2103,2106],{},"The Hamburger Menu renders as a single ",[433,2093,798],{}," element with one child ",[433,2096,2097],{},"\u003Cspan>"," that represents the middle bar; the span's ",[433,2100,2101],{},"::before"," and ",[433,2104,2105],{},"::after"," pseudo-elements render the top and bottom bars:",[539,2108,2112],{"className":2109,"code":2110,"language":2111,"meta":544,"style":544},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"hamburger-menu(...)\" aria-expanded=\"false\" aria-label=\"Toggle menu\">\n    \u003Cspan class=\"hamburger-menu-inner\">\u003C/span>\n\u003C/button>\n","html",[433,2113,2114,2155,2178],{"__ignoreMap":544},[548,2115,2116,2118,2120,2122,2124,2126,2129,2131,2134,2136,2138,2140,2142,2145,2147,2149,2151,2153],{"class":550,"line":551},[548,2117,1112],{"class":558},[548,2119,1620],{"class":1115},[548,2121,1706],{"class":617},[548,2123,624],{"class":558},[548,2125,1127],{"class":558},[548,2127,2128],{"class":575},"hamburger-menu(...)",[548,2130,1127],{"class":558},[548,2132,2133],{"class":617}," aria-expanded",[548,2135,624],{"class":558},[548,2137,1127],{"class":558},[548,2139,1472],{"class":575},[548,2141,1127],{"class":558},[548,2143,2144],{"class":617}," aria-label",[548,2146,624],{"class":558},[548,2148,1127],{"class":558},[548,2150,1254],{"class":575},[548,2152,1127],{"class":558},[548,2154,1134],{"class":558},[548,2156,2157,2159,2161,2163,2165,2167,2169,2171,2174,2176],{"class":550,"line":585},[548,2158,1605],{"class":558},[548,2160,548],{"class":1115},[548,2162,1706],{"class":617},[548,2164,624],{"class":558},[548,2166,1127],{"class":558},[548,2168,1713],{"class":575},[548,2170,1127],{"class":558},[548,2172,2173],{"class":558},">\u003C/",[548,2175,548],{"class":1115},[548,2177,1134],{"class":558},[548,2179,2180,2182,2184],{"class":550,"line":608},[548,2181,1583],{"class":558},[548,2183,1620],{"class":1115},[548,2185,1134],{"class":558},[1781,2187,2188,2198],{},[1784,2189,2190],{},[1787,2191,2192,2195],{},[1790,2193,2194],{},"Part",[1790,2196,2197],{},"Role",[1800,2199,2200,2210,2222,2232],{},[1787,2201,2202,2207],{},[1805,2203,2204],{},[433,2205,2206],{},".hamburger-menu",[1805,2208,2209],{},"Outer button; owns hover, focus ring, disabled state, padding, and color",[1787,2211,2212,2216],{},[1805,2213,2214],{},[433,2215,802],{},[1805,2217,2218,2219,2221],{},"Middle bar; also hosts the transform when ",[433,2220,435],{}," is true",[1787,2223,2224,2229],{},[1805,2225,2226],{},[433,2227,2228],{},".hamburger-menu-inner::before",[1805,2230,2231],{},"Top bar (pseudo-element)",[1787,2233,2234,2239],{},[1805,2235,2236],{},[433,2237,2238],{},".hamburger-menu-inner::after",[1805,2240,2241],{},"Bottom bar (pseudo-element)",[421,2243,310],{"id":2244},"accessibility",[475,2246,2247,2257,2267,2281,2296],{},[478,2248,2249,2252,2253,2256],{},[429,2250,2251],{},"Expose the toggle state."," Always set ",[433,2254,2255],{},"aria-expanded=\"true|false\""," on the button so assistive technologies know whether the menu is open.",[478,2258,2259,2262,2263,2266],{},[429,2260,2261],{},"Provide an accessible name."," Set ",[433,2264,2265],{},"aria-label=\"Toggle menu\""," (or localized equivalent) since the button has no visible text.",[478,2268,2269,2272,2273,2276,2277,2280],{},[429,2270,2271],{},"Focus visibility."," The recipe applies a keyboard-only focus ring via ",[433,2274,2275],{},"&:focus-visible"," using ",[433,2278,2279],{},"@color.primary",". Do not remove it.",[478,2282,2283,2286,2287,2289,2290,2292,2293,2295],{},[429,2284,2285],{},"Hit target size."," Default ",[433,2288,1222],{}," padding (",[433,2291,1937],{},") combined with ",[433,2294,1923],{}," 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.",[478,2297,2298,2301,2302,2305],{},[429,2299,2300],{},"Disable carefully."," The recipe supports ",[433,2303,2304],{},":disabled"," styling; when disabled, pointer events are ignored and opacity drops to 0.5.",[539,2307,2309],{"className":2109,"code":2308,"language":2111,"meta":544,"style":544},"\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/span>\n\u003C/button>\n",[433,2310,2311,2317,2323,2336,2349,2362,2376,2390,2394,2416],{"__ignoreMap":544},[548,2312,2313],{"class":550,"line":551},[548,2314,2316],{"class":2315},"sHwdD","\u003C!-- Correct: accessible hamburger menu -->\n",[548,2318,2319,2321],{"class":550,"line":585},[548,2320,1112],{"class":558},[548,2322,1608],{"class":1115},[548,2324,2325,2328,2330,2332,2334],{"class":550,"line":608},[548,2326,2327],{"class":617},"    class",[548,2329,624],{"class":558},[548,2331,1127],{"class":558},[548,2333,2128],{"class":575},[548,2335,1360],{"class":558},[548,2337,2338,2341,2343,2345,2347],{"class":550,"line":614},[548,2339,2340],{"class":617},"    type",[548,2342,624],{"class":558},[548,2344,1127],{"class":558},[548,2346,1620],{"class":575},[548,2348,1360],{"class":558},[548,2350,2351,2354,2356,2358,2360],{"class":550,"line":635},[548,2352,2353],{"class":617},"    aria-expanded",[548,2355,624],{"class":558},[548,2357,1127],{"class":558},[548,2359,439],{"class":575},[548,2361,1360],{"class":558},[548,2363,2364,2367,2369,2371,2374],{"class":550,"line":640},[548,2365,2366],{"class":617},"    aria-controls",[548,2368,624],{"class":558},[548,2370,1127],{"class":558},[548,2372,2373],{"class":575},"main-nav",[548,2375,1360],{"class":558},[548,2377,2378,2381,2383,2385,2388],{"class":550,"line":657},[548,2379,2380],{"class":617},"    aria-label",[548,2382,624],{"class":558},[548,2384,1127],{"class":558},[548,2386,2387],{"class":575},"Close menu",[548,2389,1360],{"class":558},[548,2391,2392],{"class":550,"line":662},[548,2393,1134],{"class":558},[548,2395,2396,2398,2400,2402,2404,2406,2408,2410,2412,2414],{"class":550,"line":773},[548,2397,1605],{"class":558},[548,2399,548],{"class":1115},[548,2401,1706],{"class":617},[548,2403,624],{"class":558},[548,2405,1127],{"class":558},[548,2407,1713],{"class":575},[548,2409,1127],{"class":558},[548,2411,2173],{"class":558},[548,2413,548],{"class":1115},[548,2415,1134],{"class":558},[548,2417,2418,2420,2422],{"class":550,"line":866},[548,2419,1583],{"class":558},[548,2421,1620],{"class":1115},[548,2423,1134],{"class":558},[421,2425,2427],{"id":2426},"customization","Customization",[1773,2429,2431],{"id":2430},"overriding-defaults","Overriding Defaults",[425,2433,427,2434,2437],{},[433,2435,2436],{},"useHamburgerMenuRecipe"," composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults:",[539,2439,2441],{"className":541,"code":2440,"filename":537,"language":543,"meta":544,"style":544},"import { styleframe } from 'virtual:styleframe';\nimport { useHamburgerMenuRecipe } from '@styleframe/theme';\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",[433,2442,2443,2463,2483,2487,2501,2505,2522,2531,2545,2559,2573,2587,2592,2600,2604],{"__ignoreMap":544},[548,2444,2445,2447,2449,2451,2453,2455,2457,2459,2461],{"class":550,"line":551},[548,2446,555],{"class":554},[548,2448,559],{"class":558},[548,2450,563],{"class":562},[548,2452,566],{"class":558},[548,2454,569],{"class":554},[548,2456,572],{"class":558},[548,2458,576],{"class":575},[548,2460,579],{"class":558},[548,2462,582],{"class":558},[548,2464,2465,2467,2469,2471,2473,2475,2477,2479,2481],{"class":550,"line":585},[548,2466,555],{"class":554},[548,2468,559],{"class":558},[548,2470,592],{"class":562},[548,2472,566],{"class":558},[548,2474,569],{"class":554},[548,2476,572],{"class":558},[548,2478,601],{"class":575},[548,2480,579],{"class":558},[548,2482,582],{"class":558},[548,2484,2485],{"class":550,"line":608},[548,2486,611],{"emptyLinePlaceholder":206},[548,2488,2489,2491,2493,2495,2497,2499],{"class":550,"line":614},[548,2490,618],{"class":617},[548,2492,621],{"class":562},[548,2494,624],{"class":558},[548,2496,563],{"class":627},[548,2498,630],{"class":562},[548,2500,582],{"class":558},[548,2502,2503],{"class":550,"line":635},[548,2504,611],{"emptyLinePlaceholder":206},[548,2506,2507,2509,2511,2513,2515,2518,2520],{"class":550,"line":640},[548,2508,618],{"class":617},[548,2510,645],{"class":562},[548,2512,624],{"class":558},[548,2514,592],{"class":627},[548,2516,2517],{"class":562},"(s",[548,2519,711],{"class":558},[548,2521,1193],{"class":558},[548,2523,2524,2527,2529],{"class":550,"line":657},[548,2525,2526],{"class":1115},"    defaultVariants",[548,2528,1534],{"class":558},[548,2530,1193],{"class":558},[548,2532,2533,2535,2537,2539,2541,2543],{"class":550,"line":662},[548,2534,1510],{"class":1115},[548,2536,1534],{"class":558},[548,2538,572],{"class":558},[548,2540,1295],{"class":575},[548,2542,579],{"class":558},[548,2544,1210],{"class":558},[548,2546,2547,2549,2551,2553,2555,2557],{"class":550,"line":773},[548,2548,1517],{"class":1115},[548,2550,1534],{"class":558},[548,2552,572],{"class":558},[548,2554,1336],{"class":575},[548,2556,579],{"class":558},[548,2558,1210],{"class":558},[548,2560,2561,2563,2565,2567,2569,2571],{"class":550,"line":866},[548,2562,1524],{"class":1115},[548,2564,1534],{"class":558},[548,2566,572],{"class":558},[548,2568,1391],{"class":575},[548,2570,579],{"class":558},[548,2572,1210],{"class":558},[548,2574,2575,2577,2579,2581,2583,2585],{"class":550,"line":872},[548,2576,1531],{"class":1115},[548,2578,1534],{"class":558},[548,2580,572],{"class":558},[548,2582,1472],{"class":575},[548,2584,579],{"class":558},[548,2586,1210],{"class":558},[548,2588,2589],{"class":550,"line":878},[548,2590,2591],{"class":558},"    },\n",[548,2593,2594,2596,2598],{"class":550,"line":884},[548,2595,1263],{"class":558},[548,2597,1475],{"class":562},[548,2599,582],{"class":558},[548,2601,2602],{"class":550,"line":890},[548,2603,611],{"emptyLinePlaceholder":206},[548,2605,2606,2608,2610,2612],{"class":550,"line":896},[548,2607,665],{"class":554},[548,2609,668],{"class":554},[548,2611,671],{"class":562},[548,2613,582],{"class":558},[1773,2615,2617],{"id":2616},"filtering-variants","Filtering Variants",[425,2619,2620,2621,2624],{},"If you only need a subset of the available animations, use the ",[433,2622,2623],{},"filter"," option to limit which values are generated. This reduces the output CSS:",[539,2626,2628],{"className":541,"code":2627,"filename":537,"language":543,"meta":544,"style":544},"import { styleframe } from 'virtual:styleframe';\nimport { useHamburgerMenuRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// 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",[433,2629,2630,2650,2670,2674,2688,2692,2697,2713,2722,2742,2746,2754,2758],{"__ignoreMap":544},[548,2631,2632,2634,2636,2638,2640,2642,2644,2646,2648],{"class":550,"line":551},[548,2633,555],{"class":554},[548,2635,559],{"class":558},[548,2637,563],{"class":562},[548,2639,566],{"class":558},[548,2641,569],{"class":554},[548,2643,572],{"class":558},[548,2645,576],{"class":575},[548,2647,579],{"class":558},[548,2649,582],{"class":558},[548,2651,2652,2654,2656,2658,2660,2662,2664,2666,2668],{"class":550,"line":585},[548,2653,555],{"class":554},[548,2655,559],{"class":558},[548,2657,592],{"class":562},[548,2659,566],{"class":558},[548,2661,569],{"class":554},[548,2663,572],{"class":558},[548,2665,601],{"class":575},[548,2667,579],{"class":558},[548,2669,582],{"class":558},[548,2671,2672],{"class":550,"line":608},[548,2673,611],{"emptyLinePlaceholder":206},[548,2675,2676,2678,2680,2682,2684,2686],{"class":550,"line":614},[548,2677,618],{"class":617},[548,2679,621],{"class":562},[548,2681,624],{"class":558},[548,2683,563],{"class":627},[548,2685,630],{"class":562},[548,2687,582],{"class":558},[548,2689,2690],{"class":550,"line":635},[548,2691,611],{"emptyLinePlaceholder":206},[548,2693,2694],{"class":550,"line":640},[548,2695,2696],{"class":2315},"// Only generate the close animation in all three colors\n",[548,2698,2699,2701,2703,2705,2707,2709,2711],{"class":550,"line":657},[548,2700,618],{"class":617},[548,2702,645],{"class":562},[548,2704,624],{"class":558},[548,2706,592],{"class":627},[548,2708,2517],{"class":562},[548,2710,711],{"class":558},[548,2712,1193],{"class":558},[548,2714,2715,2718,2720],{"class":550,"line":662},[548,2716,2717],{"class":1115},"    filter",[548,2719,1534],{"class":558},[548,2721,1193],{"class":558},[548,2723,2724,2726,2728,2731,2733,2735,2737,2740],{"class":550,"line":773},[548,2725,1524],{"class":1115},[548,2727,1534],{"class":558},[548,2729,2730],{"class":562}," [",[548,2732,579],{"class":558},[548,2734,1238],{"class":575},[548,2736,579],{"class":558},[548,2738,2739],{"class":562},"]",[548,2741,1210],{"class":558},[548,2743,2744],{"class":550,"line":866},[548,2745,2591],{"class":558},[548,2747,2748,2750,2752],{"class":550,"line":872},[548,2749,1263],{"class":558},[548,2751,1475],{"class":562},[548,2753,582],{"class":558},[548,2755,2756],{"class":550,"line":878},[548,2757,611],{"emptyLinePlaceholder":206},[548,2759,2760,2762,2764,2766],{"class":550,"line":884},[548,2761,665],{"class":554},[548,2763,668],{"class":554},[548,2765,671],{"class":562},[548,2767,582],{"class":558},[2070,2769,2770,2772],{},[429,2771,2074],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[421,2774,59],{"id":2775},"api-reference",[1773,2777,2779],{"id":2778},"usehamburgermenurecipes-options",[433,2780,2781],{},"useHamburgerMenuRecipe(s, options?)",[425,2783,2784],{},"Creates the hamburger menu recipe with button, bar, and animation styling.",[425,2786,2787],{},[429,2788,2789],{},"Parameters:",[1781,2791,2792,2805],{},[1784,2793,2794],{},[1787,2795,2796,2799,2802],{},[1790,2797,2798],{},"Parameter",[1790,2800,2801],{},"Type",[1790,2803,2804],{},"Description",[1800,2806,2807,2822,2837,2852,2867,2882,2897],{},[1787,2808,2809,2814,2819],{},[1805,2810,2811],{},[433,2812,2813],{},"s",[1805,2815,2816],{},[433,2817,2818],{},"Styleframe",[1805,2820,2821],{},"The Styleframe instance",[1787,2823,2824,2829,2834],{},[1805,2825,2826],{},[433,2827,2828],{},"options",[1805,2830,2831],{},[433,2832,2833],{},"DeepPartial\u003CRecipeConfig>",[1805,2835,2836],{},"Optional overrides for the recipe configuration",[1787,2838,2839,2844,2849],{},[1805,2840,2841],{},[433,2842,2843],{},"options.base",[1805,2845,2846],{},[433,2847,2848],{},"VariantDeclarationsBlock",[1805,2850,2851],{},"Custom base styles for the button",[1787,2853,2854,2859,2864],{},[1805,2855,2856],{},[433,2857,2858],{},"options.variants",[1805,2860,2861],{},[433,2862,2863],{},"Variants",[1805,2865,2866],{},"Custom variant definitions for the recipe",[1787,2868,2869,2874,2879],{},[1805,2870,2871],{},[433,2872,2873],{},"options.defaultVariants",[1805,2875,2876],{},[433,2877,2878],{},"Record\u003Ckeyof Variants, string>",[1805,2880,2881],{},"Default variant values for the recipe",[1787,2883,2884,2889,2894],{},[1805,2885,2886],{},[433,2887,2888],{},"options.compoundVariants",[1805,2890,2891],{},[433,2892,2893],{},"CompoundVariant[]",[1805,2895,2896],{},"Custom compound variant definitions for the recipe",[1787,2898,2899,2904,2909],{},[1805,2900,2901],{},[433,2902,2903],{},"options.filter",[1805,2905,2906],{},[433,2907,2908],{},"Record\u003Cstring, string[]>",[1805,2910,2911],{},"Limit which variant values are generated",[425,2913,2914],{},[429,2915,2916],{},"Variants:",[1781,2918,2919,2932],{},[1784,2920,2921],{},[1787,2922,2923,2926,2929],{},[1790,2924,2925],{},"Variant",[1790,2927,2928],{},"Options",[1790,2930,2931],{},"Default",[1800,2933,2934,2952,2970,2996],{},[1787,2935,2936,2940,2948],{},[1805,2937,2938],{},[433,2939,447],{},[1805,2941,2942,448,2944,448,2946],{},[433,2943,1285],{},[433,2945,1295],{},[433,2947,1205],{},[1805,2949,2950],{},[433,2951,1205],{},[1787,2953,2954,2958,2966],{},[1805,2955,2956],{},[433,2957,451],{},[1805,2959,2960,448,2962,448,2964],{},[433,2961,1319],{},[433,2963,1222],{},[433,2965,1336],{},[1805,2967,2968],{},[433,2969,1222],{},[1787,2971,2972,2976,2992],{},[1805,2973,2974],{},[433,2975,454],{},[1805,2977,2978,448,2980,448,2982,448,2984,448,2986,448,2988,448,2990],{},[433,2979,1238],{},[433,2981,1369],{},[433,2983,1380],{},[433,2985,1391],{},[433,2987,1402],{},[433,2989,1413],{},[433,2991,1424],{},[1805,2993,2994],{},[433,2995,1238],{},[1787,2997,2998,3002,3008],{},[1805,2999,3000],{},[433,3001,435],{},[1805,3003,3004,448,3006],{},[433,3005,439],{},[433,3007,1472],{},[1805,3009,3010],{},[433,3011,1472],{},[425,3013,3014],{},[463,3015,3016],{"href":118},"Learn more about recipes →",[421,3018,3020],{"id":3019},"best-practices","Best Practices",[475,3022,3023,3040,3057,3075,3089],{},[478,3024,3025,3031,3032,3035,3036,3039],{},[429,3026,3027,3028,3030],{},"Track ",[433,3029,435],{}," state in the consumer."," The recipe provides the CSS; the open/closed state lives in your app (React ",[433,3033,3034],{},"useState",", Vue ",[433,3037,3038],{},"ref",", etc.).",[478,3041,3042,3050,3051,3053,3054,3056],{},[429,3043,3044,3045,3047,3048,1540],{},"Pair ",[433,3046,1646],{}," with ",[433,3049,435],{}," Mirror the ",[433,3052,435],{}," prop onto ",[433,3055,1646],{}," so screen readers announce state changes.",[478,3058,3059,1850,3062,3064,3065,3068,3069,3071,3072,3074],{},[429,3060,3061],{},"Pick the animation that matches the affordance.",[433,3063,1238],{}," for a classic menu toggle, ",[433,3066,3067],{},"arrow-*"," for directional drawers, ",[433,3070,1424],{},"/",[433,3073,1413],{}," for expand/collapse interactions.",[478,3076,3077,3083,3084,2081,3086,3088],{},[429,3078,3079,3080,3082],{},"Prefer ",[433,3081,1205],{}," color."," It adapts to light and dark modes automatically; only reach for ",[433,3085,1285],{},[433,3087,1295],{}," when the button sits on a surface that conflicts with the user's theme.",[478,3090,3091,3094,3095,3097,3098,3071,3100,3102],{},[429,3092,3093],{},"Keep the HTML minimal."," The recipe expects exactly one ",[433,3096,802],{}," child — don't wrap it or add siblings, or the ",[433,3099,2101],{},[433,3101,2105],{}," pseudo-elements won't line up.",[3104,3105,3106],"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 .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":544,"searchDepth":585,"depth":585,"links":3108},[3109,3110,3111,3112,3115,3116,3123,3124,3125,3126,3130,3133],{"id":423,"depth":585,"text":64},{"id":469,"depth":585,"text":470},{"id":516,"depth":585,"text":517},{"id":1746,"depth":585,"text":181,"children":3113},[3114],{"id":1775,"depth":608,"text":1776},{"id":1856,"depth":585,"text":1857},{"id":1966,"depth":585,"text":314,"children":3117},[3118,3119,3120,3121,3122],{"id":1238,"depth":608,"text":1986},{"id":1995,"depth":608,"text":1996},{"id":2016,"depth":608,"text":2017},{"id":1413,"depth":608,"text":2029},{"id":1424,"depth":608,"text":2038},{"id":2051,"depth":585,"text":2052},{"id":2087,"depth":585,"text":2088},{"id":2244,"depth":585,"text":310},{"id":2426,"depth":585,"text":2427,"children":3127},[3128,3129],{"id":2430,"depth":608,"text":2431},{"id":2616,"depth":608,"text":2617},{"id":2775,"depth":585,"text":59,"children":3131},[3132],{"id":2778,"depth":608,"text":2781},{"id":3019,"depth":585,"text":3020},"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,{},{"title":294,"description":3134},{"loc":295},"e-3cT4ZO4wB7woFNMk5ZLibMJ_KtdKRBN1jpGAgbGYc",[3141,3143],{"title":290,"path":291,"stem":292,"description":3142,"children":-1},"A menu-style floating panel for presenting actions or navigation options. Composed of five coordinated recipes (panel, item, separator, label, arrow) with three colors, three visual styles, and three sizes through the recipe system.",{"title":64,"path":151,"stem":152,"description":3144,"icon":65,"children":-1},"Explore Styleframe's comprehensive design token system. Create consistent, scalable design systems with composable functions for colors, typography, spacing, and more.",1777196426268]