[{"data":1,"prerenderedAt":4701},["ShallowReactive",2],{"navigation_docs":3,"-docs-components-composables-nav":394,"-docs-components-composables-nav-surround":4696},[4,45,134,150,165,239,277,350],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/docs/getting-started","docs/01.getting-started",[10,15,35,40],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/docs/getting-started/introduction","docs/01.getting-started/01.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"children":19,"icon":34},"Installation","/docs/getting-started/installation","docs/01.getting-started/02.installation/00.index",[20,22,26,30],{"title":21,"path":17,"stem":18},"Overview",{"title":23,"path":24,"stem":25},"Vite Installation","/docs/getting-started/installation/vite","docs/01.getting-started/02.installation/01.vite",{"title":27,"path":28,"stem":29},"Nuxt Installation","/docs/getting-started/installation/nuxt","docs/01.getting-started/02.installation/02.nuxt",{"title":31,"path":32,"stem":33},"Custom Installation","/docs/getting-started/installation/custom","docs/01.getting-started/02.installation/03.custom","i-lucide-download",{"title":36,"path":37,"stem":38,"icon":39},"Licensing","/docs/getting-started/licensing","docs/01.getting-started/03.licensing","i-lucide-scale",{"title":41,"path":42,"stem":43,"icon":44},"CLI Reference","/docs/getting-started/cli","docs/01.getting-started/04.cli","i-lucide-square-terminal",{"title":46,"path":47,"stem":48,"children":49,"icon":6},"API Essentials","/docs/api","docs/02.api/00.index",[50,52,57,62,67,72,77,82,87,92,97,102,117,122,127,132],{"title":21,"path":47,"stem":48,"icon":51},"i-lucide-book-text",{"title":53,"path":54,"stem":55,"icon":56},"Instance","/docs/api/instance","docs/02.api/01.instance","i-lucide-cloud-lightning",{"title":58,"path":59,"stem":60,"icon":61},"Variables","/docs/api/variables","docs/02.api/02.variables","i-lucide-variable",{"title":63,"path":64,"stem":65,"icon":66},"Selectors","/docs/api/selectors","docs/02.api/03.selectors","i-lucide-scan-text",{"title":68,"path":69,"stem":70,"icon":71},"At-Rules","/docs/api/at-rules","docs/02.api/04.at-rules","i-lucide-at-sign",{"title":73,"path":74,"stem":75,"icon":76},"Media Queries","/docs/api/media-queries","docs/02.api/05.media-queries","i-lucide-image-upscale",{"title":78,"path":79,"stem":80,"icon":81},"Keyframes","/docs/api/keyframes","docs/02.api/06.keyframes","i-lucide-square-play",{"title":83,"path":84,"stem":85,"icon":86},"Interpolation","/docs/api/interpolation","docs/02.api/07.interpolation","i-lucide-wrap-text",{"title":88,"path":89,"stem":90,"icon":91},"Utilities","/docs/api/utilities","docs/02.api/08.utilities","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Utility Modifiers","/docs/api/utility-modifiers","docs/02.api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":98,"path":99,"stem":100,"icon":101},"Themes","/docs/api/themes","docs/02.api/10.themes","i-lucide-paintbrush",{"title":103,"path":104,"stem":105,"children":106,"icon":116},"Recipes","/docs/api/recipes","docs/02.api/11.recipes/00.index",[107,108,112],{"title":21,"path":104,"stem":105},{"title":109,"path":110,"stem":111},"Runtime","/docs/api/recipes/runtime","docs/02.api/11.recipes/01.runtime",{"title":113,"path":114,"stem":115},"Output Format","/docs/api/recipes/output-format","docs/02.api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":118,"path":119,"stem":120,"icon":121},"Composables","/docs/api/composables","docs/02.api/12.composables","i-lucide-component",{"title":123,"path":124,"stem":125,"icon":126},"Imports","/docs/api/imports","docs/02.api/13.imports","i-lucide-file-input",{"title":128,"path":129,"stem":130,"icon":131},"Merging","/docs/api/merging","docs/02.api/13.merging","i-lucide-squares-intersect",{"title":123,"path":124,"stem":133,"icon":126},"docs/02.api/14.imports",{"title":135,"path":136,"stem":137,"children":138,"icon":6},"Tooling","/docs/tooling","docs/03.tooling/00.index",[139,140,145],{"title":21,"path":136,"stem":137,"icon":51},{"title":141,"path":142,"stem":143,"icon":144},"Utility Scanner","/docs/tooling/scanner","docs/03.tooling/01.scanner","i-lucide-view",{"title":146,"path":147,"stem":148,"icon":149},"Figma Plugin","/docs/tooling/figma-plugin","docs/03.tooling/02.figma-plugin","i-simple-icons-figma",{"title":151,"icon":6,"path":152,"stem":153,"children":154,"page":6},"Resources","/docs/resources","docs/04.resources",[155,160],{"title":156,"path":157,"stem":158,"icon":159},"Guides","/docs/resources/guides","docs/04.resources/01.guides","i-lucide-book-open",{"title":161,"path":162,"stem":163,"icon":164},"Comparisons","/docs/resources/comparisons","docs/04.resources/02.comparisons","i-lucide-file-diff",{"title":166,"path":167,"stem":168,"children":169,"icon":6},"Design Tokens","/docs/design-tokens","docs/05.design-tokens/00.index",[170,171,176],{"title":21,"path":167,"stem":168,"icon":51},{"title":172,"path":173,"stem":174,"icon":175},"Presets","/docs/design-tokens/presets","docs/05.design-tokens/01.presets","i-lucide-package",{"title":118,"icon":61,"defaultOpen":177,"path":178,"stem":179,"children":180,"page":6},true,"/docs/design-tokens/composables","docs/05.design-tokens/02.composables",[181,185,189,193,197,201,205,209,223,227,231,235],{"title":182,"path":183,"stem":184,"icon":6},"Border Radiuses","/docs/design-tokens/composables/border-radiuses","docs/05.design-tokens/02.composables/00.border-radiuses",{"title":186,"path":187,"stem":188,"icon":6},"Borders","/docs/design-tokens/composables/borders","docs/05.design-tokens/02.composables/01.borders",{"title":190,"path":191,"stem":192,"icon":6},"Box Shadows","/docs/design-tokens/composables/box-shadows","docs/05.design-tokens/02.composables/02.box-shadows",{"title":194,"path":195,"stem":196,"icon":6},"Breakpoints","/docs/design-tokens/composables/breakpoints","docs/05.design-tokens/02.composables/03.breakpoints",{"title":198,"path":199,"stem":200,"icon":6},"Colors","/docs/design-tokens/composables/colors","docs/05.design-tokens/02.composables/04.colors",{"title":202,"path":203,"stem":204,"icon":6},"Duration","/docs/design-tokens/composables/duration","docs/05.design-tokens/02.composables/05.duration",{"title":206,"path":207,"stem":208,"icon":6},"Easing","/docs/design-tokens/composables/easing","docs/05.design-tokens/02.composables/06.easing",{"title":210,"path":211,"stem":212,"children":213,"icon":6,"pro":177,"defaultOpen":6},"Fluid Design","/docs/design-tokens/composables/fluid-design","docs/05.design-tokens/02.composables/07.fluid-design/01.index",[214,215,219],{"title":21,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","/docs/design-tokens/composables/fluid-design/viewport","docs/05.design-tokens/02.composables/07.fluid-design/02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","/docs/design-tokens/composables/fluid-design/typography","docs/05.design-tokens/02.composables/07.fluid-design/03.typography",{"title":224,"path":225,"stem":226,"icon":6},"Scales","/docs/design-tokens/composables/scales","docs/05.design-tokens/02.composables/08.scales",{"title":228,"path":229,"stem":230,"icon":6},"Spacing","/docs/design-tokens/composables/spacing","docs/05.design-tokens/02.composables/09.spacing",{"title":232,"path":233,"stem":234,"icon":6},"Typography","/docs/design-tokens/composables/typography","docs/05.design-tokens/02.composables/10.typography",{"title":236,"path":237,"stem":238,"icon":6,"children":-1},"Z-Index","/docs/design-tokens/composables/z-index","docs/05.design-tokens/02.composables/11.z-index",{"title":240,"path":241,"stem":242,"children":243,"icon":6},"Components","/docs/components","docs/06.components/00.index",[244,245],{"title":21,"path":241,"stem":242,"icon":51},{"title":118,"icon":116,"defaultOpen":177,"path":246,"stem":247,"children":248,"page":6},"/docs/components/composables","docs/06.components/02.composables",[249,253,257,261,265,269,273],{"title":250,"path":251,"stem":252},"Badge","/docs/components/composables/badge","docs/06.components/02.composables/01.badge",{"title":254,"path":255,"stem":256},"Button","/docs/components/composables/button","docs/06.components/02.composables/02.button",{"title":258,"path":259,"stem":260},"Button Group","/docs/components/composables/button-group","docs/06.components/02.composables/03.button-group",{"title":262,"path":263,"stem":264},"Callout","/docs/components/composables/callout","docs/06.components/02.composables/04.callout",{"title":266,"path":267,"stem":268},"Card","/docs/components/composables/card","docs/06.components/02.composables/05.card",{"title":270,"path":271,"stem":272},"Nav","/docs/components/composables/nav","docs/06.components/02.composables/06.nav",{"title":274,"path":275,"stem":276},"Modal","/docs/components/composables/modal","docs/06.components/02.composables/07.modal",{"title":88,"path":278,"stem":279,"children":280,"icon":6},"/docs/utilities","docs/07.utilities/00.index",[281,282,285],{"title":21,"path":278,"stem":279,"icon":51},{"title":172,"path":283,"stem":284,"icon":175},"/docs/utilities/presets","docs/07.utilities/01.presets",{"title":118,"icon":91,"defaultOpen":177,"path":286,"stem":287,"children":288,"page":6},"/docs/utilities/composables","docs/07.utilities/02.composables",[289,293,297,301,304,308,312,316,320,324,328,331,335,339,343,347],{"title":290,"path":291,"stem":292,"icon":6},"Accessibility","/docs/utilities/composables/accessibility","docs/07.utilities/02.composables/00.accessibility",{"title":294,"path":295,"stem":296,"icon":6},"Animations","/docs/utilities/composables/animations","docs/07.utilities/02.composables/01.animations",{"title":298,"path":299,"stem":300,"icon":6},"Backgrounds","/docs/utilities/composables/backgrounds","docs/07.utilities/02.composables/02.backgrounds",{"title":186,"path":302,"stem":303,"icon":6},"/docs/utilities/composables/borders","docs/07.utilities/02.composables/03.borders",{"title":305,"path":306,"stem":307,"icon":6},"Effects","/docs/utilities/composables/effects","docs/07.utilities/02.composables/04.effects",{"title":309,"path":310,"stem":311,"icon":6},"Filters","/docs/utilities/composables/filters","docs/07.utilities/02.composables/05.filters",{"title":313,"path":314,"stem":315,"icon":6},"Flexbox & Grid","/docs/utilities/composables/flexbox-grid","docs/07.utilities/02.composables/06.flexbox-grid",{"title":317,"path":318,"stem":319,"icon":6},"Interactivity","/docs/utilities/composables/interactivity","docs/07.utilities/02.composables/07.interactivity",{"title":321,"path":322,"stem":323,"icon":6},"Layout","/docs/utilities/composables/layout","docs/07.utilities/02.composables/08.layout",{"title":325,"path":326,"stem":327,"icon":6},"Sizing","/docs/utilities/composables/sizing","docs/07.utilities/02.composables/09.sizing",{"title":228,"path":329,"stem":330,"icon":6},"/docs/utilities/composables/spacing","docs/07.utilities/02.composables/10.spacing",{"title":332,"path":333,"stem":334,"icon":6},"SVG","/docs/utilities/composables/svg","docs/07.utilities/02.composables/11.svg",{"title":336,"path":337,"stem":338,"icon":6},"Tables","/docs/utilities/composables/tables","docs/07.utilities/02.composables/12.tables",{"title":340,"path":341,"stem":342,"icon":6},"Transforms","/docs/utilities/composables/transforms","docs/07.utilities/02.composables/13.transforms",{"title":344,"path":345,"stem":346,"icon":6},"Transitions","/docs/utilities/composables/transitions","docs/07.utilities/02.composables/14.transitions",{"title":232,"path":348,"stem":349,"icon":6},"/docs/utilities/composables/typography","docs/07.utilities/02.composables/15.typography",{"title":93,"path":351,"stem":352,"children":353,"icon":6},"/docs/modifiers","docs/08.modifiers/00.index",[354,355,358],{"title":21,"path":351,"stem":352,"icon":51},{"title":172,"path":356,"stem":357,"icon":175},"/docs/modifiers/presets","docs/08.modifiers/01.presets",{"title":118,"icon":96,"defaultOpen":177,"path":359,"stem":360,"children":361,"page":6},"/docs/modifiers/composables","docs/08.modifiers/02.composables",[362,366,370,374,378,382,386,390],{"title":363,"path":364,"stem":365,"icon":6},"ARIA State","/docs/modifiers/composables/aria-state","docs/08.modifiers/02.composables/00.aria-state",{"title":367,"path":368,"stem":369,"icon":6},"Directional","/docs/modifiers/composables/directional","docs/08.modifiers/02.composables/01.directional",{"title":371,"path":372,"stem":373,"icon":6},"Form State","/docs/modifiers/composables/form-state","docs/08.modifiers/02.composables/02.form-state",{"title":375,"path":376,"stem":377,"icon":6},"Media & Preferences","/docs/modifiers/composables/media-preferences","docs/08.modifiers/02.composables/03.media-preferences",{"title":379,"path":380,"stem":381,"icon":6},"Other State","/docs/modifiers/composables/other-state","docs/08.modifiers/02.composables/04.other-state",{"title":383,"path":384,"stem":385,"icon":6},"Pseudo-Elements","/docs/modifiers/composables/pseudo-elements","docs/08.modifiers/02.composables/05.pseudo-elements",{"title":387,"path":388,"stem":389,"icon":6},"Pseudo-State","/docs/modifiers/composables/pseudo-state","docs/08.modifiers/02.composables/06.pseudo-state",{"title":391,"path":392,"stem":393,"icon":6},"Structural","/docs/modifiers/composables/structural","docs/08.modifiers/02.composables/07.structural",{"id":395,"title":270,"body":396,"description":4690,"extension":922,"links":4691,"meta":4692,"navigation":177,"path":271,"seo":4693,"sitemap":4694,"stem":272,"__hash__":4695},"docs/docs/06.components/02.composables/06.nav.md",{"type":397,"value":398,"toc":4658},"minimark",[399,403,425,432,436,439,479,483,2271,2274,2277,2280,2285,2348,2361,2364,2375,2380,2383,2387,2391,2451,2458,2462,2470,2473,2476,2479,2482,2485,2488,2492,2504,2507,2511,2515,2520,2585,2590,2655,2665,2668,2678,2681,2755,2765,2768,2790,2793,2861,2865,2868,2913,2924,3071,3076,3079,3101,3319,3385,3492,3503,3507,3511,3514,3808,3812,3819,4002,4007,4011,4017,4020,4025,4146,4151,4202,4208,4211,4215,4314,4318,4416,4421,4425,4499,4503,4654],[400,401,21],"h2",{"id":402},"overview",[404,405,406,407,410,411,415,416,419,420,424],"p",{},"The ",[408,409,270],"strong",{}," is a navigation component used for building horizontal and vertical link lists such as navbars, sidebars, and tab bars. It is composed of two recipe parts: ",[412,413,414],"code",{},"useNavRecipe()"," for the container that controls layout direction and spacing, and ",[412,417,418],{},"useNavItemRecipe()"," for individual navigation links with color, variant, and interactive state options. Each composable creates a fully configured ",[421,422,423],"a",{"href":104},"recipe"," with compound variants that handle the color-variant combinations automatically.",[404,426,427,428,431],{},"The Nav recipes integrate directly with the default ",[421,429,430],{"href":173},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[400,433,435],{"id":434},"why-use-the-nav-recipe","Why use the Nav recipe?",[404,437,438],{},"The Nav recipe helps you:",[440,441,442,449,455,461,467,473],"ul",{},[443,444,445,448],"li",{},[408,446,447],{},"Ship faster with sensible defaults",": Get 2 orientations, 3 colors, 2 visual styles, and 3 sizes out of the box with a pair of composable calls.",[443,450,451,454],{},[408,452,453],{},"Compose flexible layouts",": Two coordinated recipes (container + item) share the size axis, so your navigation stays internally consistent.",[443,456,457,460],{},[408,458,459],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules, including hover, focus, active, and dark mode states.",[443,462,463,466],{},[408,464,465],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[443,468,469,472],{},[408,470,471],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, or size values at compile time.",[443,474,475,478],{},[408,476,477],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[400,480,482],{"id":481},"usage","Usage",[484,485,487,492,499,767,771,782,2263,2267],"steps",{"level":486},"4",[488,489,491],"h4",{"id":490},"register-the-recipes","Register the recipes",[404,493,494,495,498],{},"Add the Nav recipes to a local Styleframe instance. The global ",[412,496,497],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[500,501,503,661],"code-tree",{"default-value":502},"src/components/nav.styleframe.ts",[504,505,510],"pre",{"className":506,"code":507,"filename":502,"language":508,"meta":509,"style":509},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useNavRecipe, useNavItemRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst nav = useNavRecipe(s);\nconst navItem = useNavItemRecipe(s);\n\nexport default s;\n","ts","",[412,511,512,548,577,583,604,609,626,642,647],{"__ignoreMap":509},[513,514,517,521,525,529,532,535,538,542,545],"span",{"class":515,"line":516},"line",1,[513,518,520],{"class":519},"s7zQu","import",[513,522,524],{"class":523},"sMK4o"," {",[513,526,528],{"class":527},"sTEyZ"," styleframe",[513,530,531],{"class":523}," }",[513,533,534],{"class":519}," from",[513,536,537],{"class":523}," '",[513,539,541],{"class":540},"sfazB","virtual:styleframe",[513,543,544],{"class":523},"'",[513,546,547],{"class":523},";\n",[513,549,551,553,555,558,561,564,566,568,570,573,575],{"class":515,"line":550},2,[513,552,520],{"class":519},[513,554,524],{"class":523},[513,556,557],{"class":527}," useNavRecipe",[513,559,560],{"class":523},",",[513,562,563],{"class":527}," useNavItemRecipe",[513,565,531],{"class":523},[513,567,534],{"class":519},[513,569,537],{"class":523},[513,571,572],{"class":540},"@styleframe/theme",[513,574,544],{"class":523},[513,576,547],{"class":523},[513,578,580],{"class":515,"line":579},3,[513,581,582],{"emptyLinePlaceholder":177},"\n",[513,584,586,590,593,596,599,602],{"class":515,"line":585},4,[513,587,589],{"class":588},"spNyl","const",[513,591,592],{"class":527}," s ",[513,594,595],{"class":523},"=",[513,597,528],{"class":598},"s2Zo4",[513,600,601],{"class":527},"()",[513,603,547],{"class":523},[513,605,607],{"class":515,"line":606},5,[513,608,582],{"emptyLinePlaceholder":177},[513,610,612,614,617,619,621,624],{"class":515,"line":611},6,[513,613,589],{"class":588},[513,615,616],{"class":527}," nav ",[513,618,595],{"class":523},[513,620,557],{"class":598},[513,622,623],{"class":527},"(s)",[513,625,547],{"class":523},[513,627,629,631,634,636,638,640],{"class":515,"line":628},7,[513,630,589],{"class":588},[513,632,633],{"class":527}," navItem ",[513,635,595],{"class":523},[513,637,563],{"class":598},[513,639,623],{"class":527},[513,641,547],{"class":523},[513,643,645],{"class":515,"line":644},8,[513,646,582],{"emptyLinePlaceholder":177},[513,648,650,653,656,659],{"class":515,"line":649},9,[513,651,652],{"class":519},"export",[513,654,655],{"class":519}," default",[513,657,658],{"class":527}," s",[513,660,547],{"class":523},[504,662,664],{"className":506,"code":663,"filename":497,"language":508,"meta":509,"style":509},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[412,665,666,687,713,717,731,735,744,753,757],{"__ignoreMap":509},[513,667,668,670,672,674,676,678,680,683,685],{"class":515,"line":516},[513,669,520],{"class":519},[513,671,524],{"class":523},[513,673,528],{"class":527},[513,675,531],{"class":523},[513,677,534],{"class":519},[513,679,537],{"class":523},[513,681,682],{"class":540},"styleframe",[513,684,544],{"class":523},[513,686,547],{"class":523},[513,688,689,691,693,696,698,701,703,705,707,709,711],{"class":515,"line":550},[513,690,520],{"class":519},[513,692,524],{"class":523},[513,694,695],{"class":527}," useDesignTokensPreset",[513,697,560],{"class":523},[513,699,700],{"class":527}," useUtilitiesPreset",[513,702,531],{"class":523},[513,704,534],{"class":519},[513,706,537],{"class":523},[513,708,572],{"class":540},[513,710,544],{"class":523},[513,712,547],{"class":523},[513,714,715],{"class":515,"line":579},[513,716,582],{"emptyLinePlaceholder":177},[513,718,719,721,723,725,727,729],{"class":515,"line":585},[513,720,589],{"class":588},[513,722,592],{"class":527},[513,724,595],{"class":523},[513,726,528],{"class":598},[513,728,601],{"class":527},[513,730,547],{"class":523},[513,732,733],{"class":515,"line":606},[513,734,582],{"emptyLinePlaceholder":177},[513,736,737,740,742],{"class":515,"line":611},[513,738,739],{"class":598},"useDesignTokensPreset",[513,741,623],{"class":527},[513,743,547],{"class":523},[513,745,746,749,751],{"class":515,"line":628},[513,747,748],{"class":598},"useUtilitiesPreset",[513,750,623],{"class":527},[513,752,547],{"class":523},[513,754,755],{"class":515,"line":644},[513,756,582],{"emptyLinePlaceholder":177},[513,758,759,761,763,765],{"class":515,"line":649},[513,760,652],{"class":519},[513,762,655],{"class":519},[513,764,658],{"class":527},[513,766,547],{"class":523},[488,768,770],{"id":769},"build-the-component","Build the component",[404,772,773,774,777,778,781],{},"Import the ",[412,775,776],{},"nav"," and ",[412,779,780],{},"navItem"," runtime functions from the virtual module and pass variant props to compute class names:",[783,784,785,1556],"tabs",{},[786,787,790],"tabs-item",{"icon":788,"label":789},"i-devicon-react","React",[504,791,794],{"className":506,"code":792,"filename":793,"language":508,"meta":509,"style":509},"import { nav, navItem } from \"virtual:styleframe\";\n\ninterface NavItemProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"ghost\" | \"link\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    active?: boolean;\n    disabled?: boolean;\n    href?: string;\n    children?: React.ReactNode;\n}\n\ninterface NavProps {\n    orientation?: \"horizontal\" | \"vertical\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    children?: React.ReactNode;\n}\n\nexport function Nav({\n    orientation = \"horizontal\",\n    size = \"md\",\n    children,\n}: NavProps) {\n    return (\n        \u003Cnav className={nav({ orientation, size })}>\n            {children}\n        \u003C/nav>\n    );\n}\n\nexport function NavItem({\n    color = \"neutral\",\n    variant = \"ghost\",\n    size = \"md\",\n    active = false,\n    disabled = false,\n    href,\n    children,\n}: NavItemProps) {\n    return (\n        \u003Ca\n            href={href}\n            className={navItem({\n                color,\n                variant,\n                size,\n                active: active ? \"true\" : \"false\",\n                disabled: disabled ? \"true\" : \"false\",\n            })}\n            aria-disabled={disabled || undefined}\n            tabIndex={disabled ? -1 : undefined}\n        >\n            {children}\n        \u003C/a>\n    );\n}\n","src/components/Nav.tsx",[412,795,796,824,828,840,877,902,936,948,959,971,990,996,1001,1011,1037,1068,1083,1088,1093,1107,1125,1140,1147,1160,1169,1199,1210,1221,1229,1234,1239,1251,1266,1281,1296,1309,1320,1327,1334,1345,1352,1360,1373,1385,1393,1401,1409,1443,1472,1478,1500,1520,1526,1535,1544,1551],{"__ignoreMap":509},[513,797,798,800,802,805,807,810,812,814,817,819,822],{"class":515,"line":516},[513,799,520],{"class":519},[513,801,524],{"class":523},[513,803,804],{"class":527}," nav",[513,806,560],{"class":523},[513,808,809],{"class":527}," navItem",[513,811,531],{"class":523},[513,813,534],{"class":519},[513,815,816],{"class":523}," \"",[513,818,541],{"class":540},[513,820,821],{"class":523},"\"",[513,823,547],{"class":523},[513,825,826],{"class":515,"line":550},[513,827,582],{"emptyLinePlaceholder":177},[513,829,830,833,837],{"class":515,"line":579},[513,831,832],{"class":588},"interface",[513,834,836],{"class":835},"sBMFI"," NavItemProps",[513,838,839],{"class":523}," {\n",[513,841,842,846,849,851,854,856,859,861,864,866,868,870,873,875],{"class":515,"line":585},[513,843,845],{"class":844},"swJcz","    color",[513,847,848],{"class":523},"?:",[513,850,816],{"class":523},[513,852,853],{"class":540},"light",[513,855,821],{"class":523},[513,857,858],{"class":523}," |",[513,860,816],{"class":523},[513,862,863],{"class":540},"dark",[513,865,821],{"class":523},[513,867,858],{"class":523},[513,869,816],{"class":523},[513,871,872],{"class":540},"neutral",[513,874,821],{"class":523},[513,876,547],{"class":523},[513,878,879,882,884,886,889,891,893,895,898,900],{"class":515,"line":606},[513,880,881],{"class":844},"    variant",[513,883,848],{"class":523},[513,885,816],{"class":523},[513,887,888],{"class":540},"ghost",[513,890,821],{"class":523},[513,892,858],{"class":523},[513,894,816],{"class":523},[513,896,897],{"class":540},"link",[513,899,821],{"class":523},[513,901,547],{"class":523},[513,903,904,907,909,911,914,916,918,920,923,925,927,929,932,934],{"class":515,"line":611},[513,905,906],{"class":844},"    size",[513,908,848],{"class":523},[513,910,816],{"class":523},[513,912,913],{"class":540},"sm",[513,915,821],{"class":523},[513,917,858],{"class":523},[513,919,816],{"class":523},[513,921,922],{"class":540},"md",[513,924,821],{"class":523},[513,926,858],{"class":523},[513,928,816],{"class":523},[513,930,931],{"class":540},"lg",[513,933,821],{"class":523},[513,935,547],{"class":523},[513,937,938,941,943,946],{"class":515,"line":628},[513,939,940],{"class":844},"    active",[513,942,848],{"class":523},[513,944,945],{"class":835}," boolean",[513,947,547],{"class":523},[513,949,950,953,955,957],{"class":515,"line":644},[513,951,952],{"class":844},"    disabled",[513,954,848],{"class":523},[513,956,945],{"class":835},[513,958,547],{"class":523},[513,960,961,964,966,969],{"class":515,"line":649},[513,962,963],{"class":844},"    href",[513,965,848],{"class":523},[513,967,968],{"class":835}," string",[513,970,547],{"class":523},[513,972,974,977,979,982,985,988],{"class":515,"line":973},10,[513,975,976],{"class":844},"    children",[513,978,848],{"class":523},[513,980,981],{"class":835}," React",[513,983,984],{"class":523},".",[513,986,987],{"class":835},"ReactNode",[513,989,547],{"class":523},[513,991,993],{"class":515,"line":992},11,[513,994,995],{"class":523},"}\n",[513,997,999],{"class":515,"line":998},12,[513,1000,582],{"emptyLinePlaceholder":177},[513,1002,1004,1006,1009],{"class":515,"line":1003},13,[513,1005,832],{"class":588},[513,1007,1008],{"class":835}," NavProps",[513,1010,839],{"class":523},[513,1012,1014,1017,1019,1021,1024,1026,1028,1030,1033,1035],{"class":515,"line":1013},14,[513,1015,1016],{"class":844},"    orientation",[513,1018,848],{"class":523},[513,1020,816],{"class":523},[513,1022,1023],{"class":540},"horizontal",[513,1025,821],{"class":523},[513,1027,858],{"class":523},[513,1029,816],{"class":523},[513,1031,1032],{"class":540},"vertical",[513,1034,821],{"class":523},[513,1036,547],{"class":523},[513,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066],{"class":515,"line":1039},15,[513,1041,906],{"class":844},[513,1043,848],{"class":523},[513,1045,816],{"class":523},[513,1047,913],{"class":540},[513,1049,821],{"class":523},[513,1051,858],{"class":523},[513,1053,816],{"class":523},[513,1055,922],{"class":540},[513,1057,821],{"class":523},[513,1059,858],{"class":523},[513,1061,816],{"class":523},[513,1063,931],{"class":540},[513,1065,821],{"class":523},[513,1067,547],{"class":523},[513,1069,1071,1073,1075,1077,1079,1081],{"class":515,"line":1070},16,[513,1072,976],{"class":844},[513,1074,848],{"class":523},[513,1076,981],{"class":835},[513,1078,984],{"class":523},[513,1080,987],{"class":835},[513,1082,547],{"class":523},[513,1084,1086],{"class":515,"line":1085},17,[513,1087,995],{"class":523},[513,1089,1091],{"class":515,"line":1090},18,[513,1092,582],{"emptyLinePlaceholder":177},[513,1094,1096,1098,1101,1104],{"class":515,"line":1095},19,[513,1097,652],{"class":519},[513,1099,1100],{"class":588}," function",[513,1102,1103],{"class":598}," Nav",[513,1105,1106],{"class":523},"({\n",[513,1108,1110,1113,1116,1118,1120,1122],{"class":515,"line":1109},20,[513,1111,1016],{"class":1112},"sHdIc",[513,1114,1115],{"class":523}," =",[513,1117,816],{"class":523},[513,1119,1023],{"class":540},[513,1121,821],{"class":523},[513,1123,1124],{"class":523},",\n",[513,1126,1128,1130,1132,1134,1136,1138],{"class":515,"line":1127},21,[513,1129,906],{"class":1112},[513,1131,1115],{"class":523},[513,1133,816],{"class":523},[513,1135,922],{"class":540},[513,1137,821],{"class":523},[513,1139,1124],{"class":523},[513,1141,1143,1145],{"class":515,"line":1142},22,[513,1144,976],{"class":1112},[513,1146,1124],{"class":523},[513,1148,1150,1153,1155,1158],{"class":515,"line":1149},23,[513,1151,1152],{"class":523},"}:",[513,1154,1008],{"class":835},[513,1156,1157],{"class":523},")",[513,1159,839],{"class":523},[513,1161,1163,1166],{"class":515,"line":1162},24,[513,1164,1165],{"class":519},"    return",[513,1167,1168],{"class":844}," (\n",[513,1170,1172,1175,1177,1180,1183,1185,1188,1191,1193,1196],{"class":515,"line":1171},25,[513,1173,1174],{"class":523},"        \u003C",[513,1176,776],{"class":527},[513,1178,1179],{"class":527}," className",[513,1181,1182],{"class":523},"={",[513,1184,776],{"class":844},[513,1186,1187],{"class":523},"({",[513,1189,1190],{"class":1112}," orientation",[513,1192,560],{"class":523},[513,1194,1195],{"class":1112}," size",[513,1197,1198],{"class":523}," })}>\n",[513,1200,1202,1205,1208],{"class":515,"line":1201},26,[513,1203,1204],{"class":523},"            {",[513,1206,1207],{"class":1112},"children",[513,1209,995],{"class":523},[513,1211,1213,1216,1218],{"class":515,"line":1212},27,[513,1214,1215],{"class":523},"        \u003C/",[513,1217,776],{"class":527},[513,1219,1220],{"class":523},">\n",[513,1222,1224,1227],{"class":515,"line":1223},28,[513,1225,1226],{"class":844},"    )",[513,1228,547],{"class":523},[513,1230,1232],{"class":515,"line":1231},29,[513,1233,995],{"class":523},[513,1235,1237],{"class":515,"line":1236},30,[513,1238,582],{"emptyLinePlaceholder":177},[513,1240,1242,1244,1246,1249],{"class":515,"line":1241},31,[513,1243,652],{"class":519},[513,1245,1100],{"class":588},[513,1247,1248],{"class":598}," NavItem",[513,1250,1106],{"class":523},[513,1252,1254,1256,1258,1260,1262,1264],{"class":515,"line":1253},32,[513,1255,845],{"class":1112},[513,1257,1115],{"class":523},[513,1259,816],{"class":523},[513,1261,872],{"class":540},[513,1263,821],{"class":523},[513,1265,1124],{"class":523},[513,1267,1269,1271,1273,1275,1277,1279],{"class":515,"line":1268},33,[513,1270,881],{"class":1112},[513,1272,1115],{"class":523},[513,1274,816],{"class":523},[513,1276,888],{"class":540},[513,1278,821],{"class":523},[513,1280,1124],{"class":523},[513,1282,1284,1286,1288,1290,1292,1294],{"class":515,"line":1283},34,[513,1285,906],{"class":1112},[513,1287,1115],{"class":523},[513,1289,816],{"class":523},[513,1291,922],{"class":540},[513,1293,821],{"class":523},[513,1295,1124],{"class":523},[513,1297,1299,1301,1303,1307],{"class":515,"line":1298},35,[513,1300,940],{"class":1112},[513,1302,1115],{"class":523},[513,1304,1306],{"class":1305},"sfNiH"," false",[513,1308,1124],{"class":523},[513,1310,1312,1314,1316,1318],{"class":515,"line":1311},36,[513,1313,952],{"class":1112},[513,1315,1115],{"class":523},[513,1317,1306],{"class":1305},[513,1319,1124],{"class":523},[513,1321,1323,1325],{"class":515,"line":1322},37,[513,1324,963],{"class":1112},[513,1326,1124],{"class":523},[513,1328,1330,1332],{"class":515,"line":1329},38,[513,1331,976],{"class":1112},[513,1333,1124],{"class":523},[513,1335,1337,1339,1341,1343],{"class":515,"line":1336},39,[513,1338,1152],{"class":523},[513,1340,836],{"class":835},[513,1342,1157],{"class":523},[513,1344,839],{"class":523},[513,1346,1348,1350],{"class":515,"line":1347},40,[513,1349,1165],{"class":519},[513,1351,1168],{"class":844},[513,1353,1355,1357],{"class":515,"line":1354},41,[513,1356,1174],{"class":523},[513,1358,1359],{"class":1112},"a\n",[513,1361,1363,1366,1368,1371],{"class":515,"line":1362},42,[513,1364,1365],{"class":527},"            href",[513,1367,1182],{"class":523},[513,1369,1370],{"class":527},"href",[513,1372,995],{"class":523},[513,1374,1376,1379,1381,1383],{"class":515,"line":1375},43,[513,1377,1378],{"class":527},"            className",[513,1380,1182],{"class":523},[513,1382,780],{"class":844},[513,1384,1106],{"class":523},[513,1386,1388,1391],{"class":515,"line":1387},44,[513,1389,1390],{"class":1112},"                color",[513,1392,1124],{"class":523},[513,1394,1396,1399],{"class":515,"line":1395},45,[513,1397,1398],{"class":1112},"                variant",[513,1400,1124],{"class":523},[513,1402,1404,1407],{"class":515,"line":1403},46,[513,1405,1406],{"class":1112},"                size",[513,1408,1124],{"class":523},[513,1410,1412,1415,1418,1421,1424,1426,1429,1431,1434,1436,1439,1441],{"class":515,"line":1411},47,[513,1413,1414],{"class":844},"                active",[513,1416,1417],{"class":523},":",[513,1419,1420],{"class":1112}," active",[513,1422,1423],{"class":844}," ? ",[513,1425,821],{"class":523},[513,1427,1428],{"class":540},"true",[513,1430,821],{"class":523},[513,1432,1433],{"class":523}," :",[513,1435,816],{"class":523},[513,1437,1438],{"class":540},"false",[513,1440,821],{"class":523},[513,1442,1124],{"class":523},[513,1444,1446,1449,1451,1454,1456,1458,1460,1462,1464,1466,1468,1470],{"class":515,"line":1445},48,[513,1447,1448],{"class":844},"                disabled",[513,1450,1417],{"class":523},[513,1452,1453],{"class":1112}," disabled",[513,1455,1423],{"class":844},[513,1457,821],{"class":523},[513,1459,1428],{"class":540},[513,1461,821],{"class":523},[513,1463,1433],{"class":523},[513,1465,816],{"class":523},[513,1467,1438],{"class":540},[513,1469,821],{"class":523},[513,1471,1124],{"class":523},[513,1473,1475],{"class":515,"line":1474},49,[513,1476,1477],{"class":523},"            })}\n",[513,1479,1481,1484,1487,1490,1492,1495,1498],{"class":515,"line":1480},50,[513,1482,1483],{"class":527},"            aria",[513,1485,1486],{"class":523},"-",[513,1488,1489],{"class":527},"disabled",[513,1491,1182],{"class":523},[513,1493,1494],{"class":844},"disabled || ",[513,1496,1497],{"class":527},"undefined",[513,1499,995],{"class":523},[513,1501,1503,1506,1508,1511,1515,1517],{"class":515,"line":1502},51,[513,1504,1505],{"class":527},"            tabIndex",[513,1507,1182],{"class":523},[513,1509,1510],{"class":844},"disabled ? -",[513,1512,1514],{"class":1513},"sbssI","1",[513,1516,1433],{"class":523},[513,1518,1519],{"class":523}," undefined}\n",[513,1521,1523],{"class":515,"line":1522},52,[513,1524,1525],{"class":523},"        >\n",[513,1527,1529,1531,1533],{"class":515,"line":1528},53,[513,1530,1204],{"class":523},[513,1532,1207],{"class":1112},[513,1534,995],{"class":523},[513,1536,1538,1540,1542],{"class":515,"line":1537},54,[513,1539,1215],{"class":523},[513,1541,421],{"class":527},[513,1543,1220],{"class":523},[513,1545,1547,1549],{"class":515,"line":1546},55,[513,1548,1226],{"class":844},[513,1550,547],{"class":523},[513,1552,1554],{"class":515,"line":1553},56,[513,1555,995],{"class":523},[786,1557,1560,1812],{"icon":1558,"label":1559},"i-devicon-vuejs","Vue",[504,1561,1566],{"className":1562,"code":1563,"filename":1564,"language":1565,"meta":509,"style":509},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { nav } from \"virtual:styleframe\";\n\nconst {\n    orientation = \"horizontal\",\n    size = \"md\",\n} = defineProps\u003C{\n    orientation?: \"horizontal\" | \"vertical\";\n    size?: \"sm\" | \"md\" | \"lg\";\n}>();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cnav :class=\"nav({ orientation, size })\">\n        \u003Cslot />\n    \u003C/nav>\n\u003C/template>\n","src/components/Nav.vue","vue",[412,1567,1568,1592,1612,1616,1622,1637,1652,1665,1687,1717,1726,1735,1739,1748,1785,1795,1804],{"__ignoreMap":509},[513,1569,1570,1573,1576,1579,1582,1584,1586,1588,1590],{"class":515,"line":516},[513,1571,1572],{"class":523},"\u003C",[513,1574,1575],{"class":844},"script",[513,1577,1578],{"class":588}," setup",[513,1580,1581],{"class":588}," lang",[513,1583,595],{"class":523},[513,1585,821],{"class":523},[513,1587,508],{"class":540},[513,1589,821],{"class":523},[513,1591,1220],{"class":523},[513,1593,1594,1596,1598,1600,1602,1604,1606,1608,1610],{"class":515,"line":550},[513,1595,520],{"class":519},[513,1597,524],{"class":523},[513,1599,804],{"class":527},[513,1601,531],{"class":523},[513,1603,534],{"class":519},[513,1605,816],{"class":523},[513,1607,541],{"class":540},[513,1609,821],{"class":523},[513,1611,547],{"class":523},[513,1613,1614],{"class":515,"line":579},[513,1615,582],{"emptyLinePlaceholder":177},[513,1617,1618,1620],{"class":515,"line":585},[513,1619,589],{"class":588},[513,1621,839],{"class":523},[513,1623,1624,1627,1629,1631,1633,1635],{"class":515,"line":606},[513,1625,1626],{"class":527},"    orientation ",[513,1628,595],{"class":523},[513,1630,816],{"class":523},[513,1632,1023],{"class":540},[513,1634,821],{"class":523},[513,1636,1124],{"class":523},[513,1638,1639,1642,1644,1646,1648,1650],{"class":515,"line":611},[513,1640,1641],{"class":527},"    size ",[513,1643,595],{"class":523},[513,1645,816],{"class":523},[513,1647,922],{"class":540},[513,1649,821],{"class":523},[513,1651,1124],{"class":523},[513,1653,1654,1657,1659,1662],{"class":515,"line":628},[513,1655,1656],{"class":523},"}",[513,1658,1115],{"class":523},[513,1660,1661],{"class":598}," defineProps",[513,1663,1664],{"class":523},"\u003C{\n",[513,1666,1667,1669,1671,1673,1675,1677,1679,1681,1683,1685],{"class":515,"line":644},[513,1668,1016],{"class":844},[513,1670,848],{"class":523},[513,1672,816],{"class":523},[513,1674,1023],{"class":540},[513,1676,821],{"class":523},[513,1678,858],{"class":523},[513,1680,816],{"class":523},[513,1682,1032],{"class":540},[513,1684,821],{"class":523},[513,1686,547],{"class":523},[513,1688,1689,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711,1713,1715],{"class":515,"line":649},[513,1690,906],{"class":844},[513,1692,848],{"class":523},[513,1694,816],{"class":523},[513,1696,913],{"class":540},[513,1698,821],{"class":523},[513,1700,858],{"class":523},[513,1702,816],{"class":523},[513,1704,922],{"class":540},[513,1706,821],{"class":523},[513,1708,858],{"class":523},[513,1710,816],{"class":523},[513,1712,931],{"class":540},[513,1714,821],{"class":523},[513,1716,547],{"class":523},[513,1718,1719,1722,1724],{"class":515,"line":973},[513,1720,1721],{"class":523},"}>",[513,1723,601],{"class":527},[513,1725,547],{"class":523},[513,1727,1728,1731,1733],{"class":515,"line":992},[513,1729,1730],{"class":523},"\u003C/",[513,1732,1575],{"class":844},[513,1734,1220],{"class":523},[513,1736,1737],{"class":515,"line":998},[513,1738,582],{"emptyLinePlaceholder":177},[513,1740,1741,1743,1746],{"class":515,"line":1003},[513,1742,1572],{"class":523},[513,1744,1745],{"class":844},"template",[513,1747,1220],{"class":523},[513,1749,1750,1753,1755,1757,1760,1762,1764,1766,1769,1772,1775,1778,1781,1783],{"class":515,"line":1013},[513,1751,1752],{"class":523},"    \u003C",[513,1754,776],{"class":844},[513,1756,1433],{"class":523},[513,1758,1759],{"class":588},"class",[513,1761,595],{"class":523},[513,1763,821],{"class":523},[513,1765,776],{"class":598},[513,1767,1768],{"class":523},"({ ",[513,1770,1771],{"class":527},"orientation",[513,1773,1774],{"class":523},", ",[513,1776,1777],{"class":527},"size",[513,1779,1780],{"class":523}," })",[513,1782,821],{"class":523},[513,1784,1220],{"class":523},[513,1786,1787,1789,1792],{"class":515,"line":1039},[513,1788,1174],{"class":523},[513,1790,1791],{"class":844},"slot",[513,1793,1794],{"class":523}," />\n",[513,1796,1797,1800,1802],{"class":515,"line":1070},[513,1798,1799],{"class":523},"    \u003C/",[513,1801,776],{"class":844},[513,1803,1220],{"class":523},[513,1805,1806,1808,1810],{"class":515,"line":1085},[513,1807,1730],{"class":523},[513,1809,1745],{"class":844},[513,1811,1220],{"class":523},[504,1813,1816],{"className":1562,"code":1814,"filename":1815,"language":1565,"meta":509,"style":509},"\u003Cscript setup lang=\"ts\">\nimport { navItem } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    variant = \"ghost\",\n    size = \"md\",\n    active = false,\n    disabled = false,\n    href,\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"ghost\" | \"link\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    active?: boolean;\n    disabled?: boolean;\n    href?: string;\n}>();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Ca\n        :href=\"href\"\n        :class=\"navItem({ color, variant, size, active: active ? 'true' : 'false', disabled: disabled ? 'true' : 'false' })\"\n        :aria-disabled=\"disabled || undefined\"\n        :tabindex=\"disabled ? -1 : undefined\"\n    >\n        \u003Cslot />\n    \u003C/a>\n\u003C/template>\n","src/components/NavItem.vue",[412,1817,1818,1838,1858,1862,1868,1883,1898,1912,1923,1934,1940,1950,1980,2002,2032,2042,2052,2062,2070,2078,2082,2090,2096,2112,2193,2211,2234,2239,2247,2255],{"__ignoreMap":509},[513,1819,1820,1822,1824,1826,1828,1830,1832,1834,1836],{"class":515,"line":516},[513,1821,1572],{"class":523},[513,1823,1575],{"class":844},[513,1825,1578],{"class":588},[513,1827,1581],{"class":588},[513,1829,595],{"class":523},[513,1831,821],{"class":523},[513,1833,508],{"class":540},[513,1835,821],{"class":523},[513,1837,1220],{"class":523},[513,1839,1840,1842,1844,1846,1848,1850,1852,1854,1856],{"class":515,"line":550},[513,1841,520],{"class":519},[513,1843,524],{"class":523},[513,1845,809],{"class":527},[513,1847,531],{"class":523},[513,1849,534],{"class":519},[513,1851,816],{"class":523},[513,1853,541],{"class":540},[513,1855,821],{"class":523},[513,1857,547],{"class":523},[513,1859,1860],{"class":515,"line":579},[513,1861,582],{"emptyLinePlaceholder":177},[513,1863,1864,1866],{"class":515,"line":585},[513,1865,589],{"class":588},[513,1867,839],{"class":523},[513,1869,1870,1873,1875,1877,1879,1881],{"class":515,"line":606},[513,1871,1872],{"class":527},"    color ",[513,1874,595],{"class":523},[513,1876,816],{"class":523},[513,1878,872],{"class":540},[513,1880,821],{"class":523},[513,1882,1124],{"class":523},[513,1884,1885,1888,1890,1892,1894,1896],{"class":515,"line":611},[513,1886,1887],{"class":527},"    variant ",[513,1889,595],{"class":523},[513,1891,816],{"class":523},[513,1893,888],{"class":540},[513,1895,821],{"class":523},[513,1897,1124],{"class":523},[513,1899,1900,1902,1904,1906,1908,1910],{"class":515,"line":628},[513,1901,1641],{"class":527},[513,1903,595],{"class":523},[513,1905,816],{"class":523},[513,1907,922],{"class":540},[513,1909,821],{"class":523},[513,1911,1124],{"class":523},[513,1913,1914,1917,1919,1921],{"class":515,"line":644},[513,1915,1916],{"class":527},"    active ",[513,1918,595],{"class":523},[513,1920,1306],{"class":1305},[513,1922,1124],{"class":523},[513,1924,1925,1928,1930,1932],{"class":515,"line":649},[513,1926,1927],{"class":527},"    disabled ",[513,1929,595],{"class":523},[513,1931,1306],{"class":1305},[513,1933,1124],{"class":523},[513,1935,1936,1938],{"class":515,"line":973},[513,1937,963],{"class":527},[513,1939,1124],{"class":523},[513,1941,1942,1944,1946,1948],{"class":515,"line":992},[513,1943,1656],{"class":523},[513,1945,1115],{"class":523},[513,1947,1661],{"class":598},[513,1949,1664],{"class":523},[513,1951,1952,1954,1956,1958,1960,1962,1964,1966,1968,1970,1972,1974,1976,1978],{"class":515,"line":998},[513,1953,845],{"class":844},[513,1955,848],{"class":523},[513,1957,816],{"class":523},[513,1959,853],{"class":540},[513,1961,821],{"class":523},[513,1963,858],{"class":523},[513,1965,816],{"class":523},[513,1967,863],{"class":540},[513,1969,821],{"class":523},[513,1971,858],{"class":523},[513,1973,816],{"class":523},[513,1975,872],{"class":540},[513,1977,821],{"class":523},[513,1979,547],{"class":523},[513,1981,1982,1984,1986,1988,1990,1992,1994,1996,1998,2000],{"class":515,"line":1003},[513,1983,881],{"class":844},[513,1985,848],{"class":523},[513,1987,816],{"class":523},[513,1989,888],{"class":540},[513,1991,821],{"class":523},[513,1993,858],{"class":523},[513,1995,816],{"class":523},[513,1997,897],{"class":540},[513,1999,821],{"class":523},[513,2001,547],{"class":523},[513,2003,2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2024,2026,2028,2030],{"class":515,"line":1013},[513,2005,906],{"class":844},[513,2007,848],{"class":523},[513,2009,816],{"class":523},[513,2011,913],{"class":540},[513,2013,821],{"class":523},[513,2015,858],{"class":523},[513,2017,816],{"class":523},[513,2019,922],{"class":540},[513,2021,821],{"class":523},[513,2023,858],{"class":523},[513,2025,816],{"class":523},[513,2027,931],{"class":540},[513,2029,821],{"class":523},[513,2031,547],{"class":523},[513,2033,2034,2036,2038,2040],{"class":515,"line":1039},[513,2035,940],{"class":844},[513,2037,848],{"class":523},[513,2039,945],{"class":835},[513,2041,547],{"class":523},[513,2043,2044,2046,2048,2050],{"class":515,"line":1070},[513,2045,952],{"class":844},[513,2047,848],{"class":523},[513,2049,945],{"class":835},[513,2051,547],{"class":523},[513,2053,2054,2056,2058,2060],{"class":515,"line":1085},[513,2055,963],{"class":844},[513,2057,848],{"class":523},[513,2059,968],{"class":835},[513,2061,547],{"class":523},[513,2063,2064,2066,2068],{"class":515,"line":1090},[513,2065,1721],{"class":523},[513,2067,601],{"class":527},[513,2069,547],{"class":523},[513,2071,2072,2074,2076],{"class":515,"line":1095},[513,2073,1730],{"class":523},[513,2075,1575],{"class":844},[513,2077,1220],{"class":523},[513,2079,2080],{"class":515,"line":1109},[513,2081,582],{"emptyLinePlaceholder":177},[513,2083,2084,2086,2088],{"class":515,"line":1127},[513,2085,1572],{"class":523},[513,2087,1745],{"class":844},[513,2089,1220],{"class":523},[513,2091,2092,2094],{"class":515,"line":1142},[513,2093,1752],{"class":523},[513,2095,1359],{"class":844},[513,2097,2098,2101,2103,2105,2107,2109],{"class":515,"line":1149},[513,2099,2100],{"class":523},"        :",[513,2102,1370],{"class":588},[513,2104,595],{"class":523},[513,2106,821],{"class":523},[513,2108,1370],{"class":527},[513,2110,2111],{"class":523},"\"\n",[513,2113,2114,2116,2118,2120,2122,2124,2126,2129,2131,2134,2136,2138,2140,2143,2146,2148,2150,2152,2154,2156,2159,2161,2163,2165,2167,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187,2189,2191],{"class":515,"line":1162},[513,2115,2100],{"class":523},[513,2117,1759],{"class":588},[513,2119,595],{"class":523},[513,2121,821],{"class":523},[513,2123,780],{"class":598},[513,2125,1768],{"class":523},[513,2127,2128],{"class":527},"color",[513,2130,1774],{"class":523},[513,2132,2133],{"class":527},"variant",[513,2135,1774],{"class":523},[513,2137,1777],{"class":527},[513,2139,1774],{"class":523},[513,2141,2142],{"class":844},"active",[513,2144,2145],{"class":523},": ",[513,2147,2142],{"class":527},[513,2149,1423],{"class":523},[513,2151,544],{"class":523},[513,2153,1428],{"class":540},[513,2155,544],{"class":523},[513,2157,2158],{"class":523}," : ",[513,2160,544],{"class":523},[513,2162,1438],{"class":540},[513,2164,544],{"class":523},[513,2166,1774],{"class":523},[513,2168,1489],{"class":844},[513,2170,2145],{"class":523},[513,2172,1489],{"class":527},[513,2174,1423],{"class":523},[513,2176,544],{"class":523},[513,2178,1428],{"class":540},[513,2180,544],{"class":523},[513,2182,2158],{"class":523},[513,2184,544],{"class":523},[513,2186,1438],{"class":540},[513,2188,544],{"class":523},[513,2190,1780],{"class":523},[513,2192,2111],{"class":523},[513,2194,2195,2197,2200,2202,2204,2206,2209],{"class":515,"line":1171},[513,2196,2100],{"class":523},[513,2198,2199],{"class":588},"aria-disabled",[513,2201,595],{"class":523},[513,2203,821],{"class":523},[513,2205,1489],{"class":527},[513,2207,2208],{"class":523}," || undefined",[513,2210,2111],{"class":523},[513,2212,2213,2215,2218,2220,2222,2224,2227,2229,2232],{"class":515,"line":1201},[513,2214,2100],{"class":523},[513,2216,2217],{"class":588},"tabindex",[513,2219,595],{"class":523},[513,2221,821],{"class":523},[513,2223,1489],{"class":527},[513,2225,2226],{"class":523}," ? -",[513,2228,1514],{"class":1513},[513,2230,2231],{"class":523}," : undefined",[513,2233,2111],{"class":523},[513,2235,2236],{"class":515,"line":1212},[513,2237,2238],{"class":523},"    >\n",[513,2240,2241,2243,2245],{"class":515,"line":1223},[513,2242,1174],{"class":523},[513,2244,1791],{"class":844},[513,2246,1794],{"class":523},[513,2248,2249,2251,2253],{"class":515,"line":1231},[513,2250,1799],{"class":523},[513,2252,421],{"class":844},[513,2254,1220],{"class":523},[513,2256,2257,2259,2261],{"class":515,"line":1236},[513,2258,1730],{"class":523},[513,2260,1745],{"class":844},[513,2262,1220],{"class":523},[488,2264,2266],{"id":2265},"see-it-in-action","See it in action",[2268,2269],"story-preview",{"story":2270,":panel":1428},"theme-recipes-nav--default",[400,2272,2273],{"id":1771},"Orientation",[404,2275,2276],{},"The Nav container recipe supports two orientations that control the flex layout direction. Horizontal arranges items in a row (ideal for top navbars and tab bars), while vertical stacks items in a column (ideal for sidebars and dropdown menus).",[2268,2278],{"story":2279,":panel":1428},"theme-recipes-nav--vertical",[2281,2282,2284],"h3",{"id":2283},"orientation-reference","Orientation Reference",[2286,2287,2288,2306],"table",{},[2289,2290,2291],"thead",{},[2292,2293,2294,2297,2300,2303],"tr",{},[2295,2296,2273],"th",{},[2295,2298,2299],{},"Flex Direction",[2295,2301,2302],{},"Alignment",[2295,2304,2305],{},"Use Case",[2307,2308,2309,2329],"tbody",{},[2292,2310,2311,2316,2321,2326],{},[2312,2313,2314],"td",{},[412,2315,1023],{},[2312,2317,2318],{},[412,2319,2320],{},"row",[2312,2322,2323],{},[412,2324,2325],{},"center",[2312,2327,2328],{},"Top-level navbars, tab bars, breadcrumbs",[2292,2330,2331,2335,2340,2345],{},[2312,2332,2333],{},[412,2334,1032],{},[2312,2336,2337],{},[412,2338,2339],{},"column",[2312,2341,2342],{},[412,2343,2344],{},"flex-start",[2312,2346,2347],{},"Sidebars, dropdown menus, stacked navigation",[2349,2350,2351,2354,2355,2357,2358,2360],"tip",{},[408,2352,2353],{},"Pro tip:"," Use ",[412,2356,1023],{}," for top-level navigation and ",[412,2359,1032],{}," for sidebar navigation. The orientation only affects the container — individual items render the same regardless of direction.",[400,2362,198],{"id":2363},"colors",[404,2365,2366,2367,1774,2369,2371,2372,2374],{},"The Nav item recipe includes 3 color variants: ",[412,2368,853],{},[412,2370,863],{},", and ",[412,2373,872],{},". Like the Card recipe, Nav uses neutral-spectrum colors designed for structural navigation elements rather than status communication. Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including dark mode overrides.",[404,2376,406,2377,2379],{},[412,2378,872],{}," color adapts automatically: it uses dark text in light mode and light text in dark mode, making it the safest default for general-purpose navigation.",[2268,2381],{"story":2382,":panel":1428},"theme-recipes-nav--dark",[2281,2384,2386],{"id":2385},"color-reference","Color Reference",[2268,2388],{"story":2389,":height":2390},"theme-recipes-nav--all-variants","420",[2286,2392,2393,2405],{},[2289,2394,2395],{},[2292,2396,2397,2400,2403],{},[2295,2398,2399],{},"Color",[2295,2401,2402],{},"Token",[2295,2404,2305],{},[2307,2406,2407,2425,2439],{},[2292,2408,2409,2413,2422],{},[2312,2410,2411],{},[412,2412,853],{},[2312,2414,2415,2418,2419],{},[412,2416,2417],{},"@color.text"," / ",[412,2420,2421],{},"@color.gray-*",[2312,2423,2424],{},"Navigation on light backgrounds, stays light-text in dark mode",[2292,2426,2427,2431,2436],{},[2312,2428,2429],{},[412,2430,863],{},[2312,2432,2433],{},[412,2434,2435],{},"@color.gray-200",[2312,2437,2438],{},"Navigation on dark backgrounds, stays dark appearance in light mode",[2292,2440,2441,2445,2448],{},[2312,2442,2443],{},[412,2444,872],{},[2312,2446,2447],{},"Adaptive (light ↔ dark)",[2312,2449,2450],{},"Default color, adapts to the current color scheme",[2349,2452,2453,2354,2455,2457],{},[408,2454,2353],{},[412,2456,872],{}," as your default nav item color. It adapts automatically to the user's color scheme, so you don't need to manage light and dark variants separately.",[400,2459,2461],{"id":2460},"variants","Variants",[404,2463,2464,2465,2469],{},"Two visual style variants control how nav items are rendered. Each variant is combined with the selected color through ",[421,2466,2468],{"href":2467},"/docs/api/recipes#compound-variants","compound variants",", so you always get the correct text color and hover behavior for your chosen color.",[2281,2471,2472],{"id":888},"Ghost",[404,2474,2475],{},"Transparent background that reveals a tinted background on hover. The most common style for navigation, ideal for navbars and sidebars where items should be subtle at rest but clearly interactive on hover.",[2268,2477],{"story":2478,":panel":1428},"theme-recipes-nav--ghost",[2281,2480,2481],{"id":897},"Link",[404,2483,2484],{},"Transparent background with colored text that gains an underline on hover. Use for secondary navigation, inline link lists, or when items should look like standard hyperlinks.",[2268,2486],{"story":2487,":panel":1428},"theme-recipes-nav--link",[400,2489,2491],{"id":2490},"sizes","Sizes",[404,2493,2494,2495,2497,2498,2500,2501,2503],{},"Three size variants from ",[412,2496,913],{}," to ",[412,2499,931],{}," control the font size, gap, and padding of the navigation. The ",[412,2502,1777],{}," prop affects both the container (font size and gap between items) and individual items (font size and padding).",[2268,2505],{"story":2506,":panel":1428},"theme-recipes-nav--large",[2281,2508,2510],{"id":2509},"size-reference","Size Reference",[2268,2512],{"story":2513,":height":2514},"theme-recipes-nav--all-sizes","480",[404,2516,2517],{},[408,2518,2519],{},"Nav Container:",[2286,2521,2522,2535],{},[2289,2523,2524],{},[2292,2525,2526,2529,2532],{},[2295,2527,2528],{},"Size",[2295,2530,2531],{},"Font Size",[2295,2533,2534],{},"Gap",[2307,2536,2537,2553,2569],{},[2292,2538,2539,2543,2548],{},[2312,2540,2541],{},[412,2542,913],{},[2312,2544,2545],{},[412,2546,2547],{},"@font-size.xs",[2312,2549,2550],{},[412,2551,2552],{},"@0.25",[2292,2554,2555,2559,2564],{},[2312,2556,2557],{},[412,2558,922],{},[2312,2560,2561],{},[412,2562,2563],{},"@font-size.sm",[2312,2565,2566],{},[412,2567,2568],{},"@0.5",[2292,2570,2571,2575,2580],{},[2312,2572,2573],{},[412,2574,931],{},[2312,2576,2577],{},[412,2578,2579],{},"@font-size.md",[2312,2581,2582],{},[412,2583,2584],{},"@0.75",[404,2586,2587],{},[408,2588,2589],{},"Nav Item:",[2286,2591,2592,2603],{},[2289,2593,2594],{},[2292,2595,2596,2598,2600],{},[2295,2597,2528],{},[2295,2599,2531],{},[2295,2601,2602],{},"Padding (V / H)",[2307,2604,2605,2621,2638],{},[2292,2606,2607,2611,2615],{},[2312,2608,2609],{},[412,2610,913],{},[2312,2612,2613],{},[412,2614,2547],{},[2312,2616,2617,2418,2619],{},[412,2618,2552],{},[412,2620,2568],{},[2292,2622,2623,2627,2631],{},[2312,2624,2625],{},[412,2626,922],{},[2312,2628,2629],{},[412,2630,2563],{},[2312,2632,2633,2418,2636],{},[412,2634,2635],{},"@0.375",[412,2637,2584],{},[2292,2639,2640,2644,2648],{},[2312,2641,2642],{},[412,2643,931],{},[2312,2645,2646],{},[412,2647,2579],{},[2312,2649,2650,2418,2652],{},[412,2651,2568],{},[412,2653,2654],{},"@1",[2656,2657,2658,2661,2662,2664],"note",{},[408,2659,2660],{},"Good to know:"," The ",[412,2663,1777],{}," prop must be passed to both the nav container and each nav item individually. The container controls font size and gap between items, while items control their own padding.",[400,2666,2667],{"id":2142},"Active",[404,2669,2670,2671,2673,2674,2677],{},"The Nav item recipe includes an ",[412,2672,2142],{}," boolean variant. Active items receive ",[412,2675,2676],{},"font-weight: semibold"," to visually distinguish the current page or section from other navigation links.",[2268,2679],{"story":2680,":panel":1428},"theme-recipes-nav--active",[504,2682,2684],{"className":506,"code":2683,"language":508,"meta":509,"style":509},"// Active item via variant prop\nnavItem({ color: \"neutral\", variant: \"ghost\", size: \"md\", active: \"true\" })\n",[412,2685,2686,2692],{"__ignoreMap":509},[513,2687,2688],{"class":515,"line":516},[513,2689,2691],{"class":2690},"sHwdD","// Active item via variant prop\n",[513,2693,2694,2696,2699,2702,2705,2707,2709,2711,2713,2715,2718,2720,2722,2724,2726,2728,2730,2732,2734,2736,2738,2740,2742,2744,2746,2748,2750,2752],{"class":515,"line":550},[513,2695,780],{"class":598},[513,2697,2698],{"class":527},"(",[513,2700,2701],{"class":523},"{",[513,2703,2704],{"class":844}," color",[513,2706,1417],{"class":523},[513,2708,816],{"class":523},[513,2710,872],{"class":540},[513,2712,821],{"class":523},[513,2714,560],{"class":523},[513,2716,2717],{"class":844}," variant",[513,2719,1417],{"class":523},[513,2721,816],{"class":523},[513,2723,888],{"class":540},[513,2725,821],{"class":523},[513,2727,560],{"class":523},[513,2729,1195],{"class":844},[513,2731,1417],{"class":523},[513,2733,816],{"class":523},[513,2735,922],{"class":540},[513,2737,821],{"class":523},[513,2739,560],{"class":523},[513,2741,1420],{"class":844},[513,2743,1417],{"class":523},[513,2745,816],{"class":523},[513,2747,1428],{"class":540},[513,2749,821],{"class":523},[513,2751,531],{"class":523},[513,2753,2754],{"class":527},")\n",[2349,2756,2757,2760,2761,2764],{},[408,2758,2759],{},"Good practice:"," Always pair the active variant with ",[412,2762,2763],{},"aria-current=\"page\""," so both sighted users and screen reader users know which page is currently active.",[400,2766,2767],{"id":1489},"Disabled",[404,2769,2770,2771,2774,2775,2778,2779,2781,2782,2785,2786,2789],{},"The Nav item recipe includes a built-in disabled state through two mechanisms: the ",[412,2772,2773],{},"&:disabled"," pseudo-class for native ",[412,2776,2777],{},"\u003Cbutton>"," elements, and the ",[412,2780,1489],{}," boolean variant for ",[412,2783,2784],{},"\u003Ca>"," elements. Both reduce opacity to 0.5, set ",[412,2787,2788],{},"cursor: not-allowed",", and disable pointer events.",[2268,2791],{"story":2792,":panel":1428},"theme-recipes-nav--disabled",[504,2794,2796],{"className":506,"code":2795,"language":508,"meta":509,"style":509},"// Disabled item via variant prop\nnavItem({ color: \"neutral\", variant: \"ghost\", size: \"md\", disabled: \"true\" })\n",[412,2797,2798,2803],{"__ignoreMap":509},[513,2799,2800],{"class":515,"line":516},[513,2801,2802],{"class":2690},"// Disabled item via variant prop\n",[513,2804,2805,2807,2809,2811,2813,2815,2817,2819,2821,2823,2825,2827,2829,2831,2833,2835,2837,2839,2841,2843,2845,2847,2849,2851,2853,2855,2857,2859],{"class":515,"line":550},[513,2806,780],{"class":598},[513,2808,2698],{"class":527},[513,2810,2701],{"class":523},[513,2812,2704],{"class":844},[513,2814,1417],{"class":523},[513,2816,816],{"class":523},[513,2818,872],{"class":540},[513,2820,821],{"class":523},[513,2822,560],{"class":523},[513,2824,2717],{"class":844},[513,2826,1417],{"class":523},[513,2828,816],{"class":523},[513,2830,888],{"class":540},[513,2832,821],{"class":523},[513,2834,560],{"class":523},[513,2836,1195],{"class":844},[513,2838,1417],{"class":523},[513,2840,816],{"class":523},[513,2842,922],{"class":540},[513,2844,821],{"class":523},[513,2846,560],{"class":523},[513,2848,1453],{"class":844},[513,2850,1417],{"class":523},[513,2852,816],{"class":523},[513,2854,1428],{"class":540},[513,2856,821],{"class":523},[513,2858,531],{"class":523},[513,2860,2754],{"class":527},[400,2862,2864],{"id":2863},"anatomy","Anatomy",[404,2866,2867],{},"The Nav recipe is composed of two independent recipes that work together to form a navigation layout:",[2286,2869,2870,2883],{},[2289,2871,2872],{},[2292,2873,2874,2877,2880],{},[2295,2875,2876],{},"Part",[2295,2878,2879],{},"Recipe",[2295,2881,2882],{},"Role",[2307,2884,2885,2899],{},[2292,2886,2887,2892,2896],{},[2312,2888,2889],{},[408,2890,2891],{},"Container",[2312,2893,2894],{},[412,2895,414],{},[2312,2897,2898],{},"Outer wrapper with flex layout, orientation, and gap",[2292,2900,2901,2906,2910],{},[2312,2902,2903],{},[408,2904,2905],{},"Item",[2312,2907,2908],{},[412,2909,418],{},[2312,2911,2912],{},"Individual navigation link with color, variant, and interactive states",[404,2914,2915,2916,2918,2919,777,2921,2923],{},"Each part is a standalone recipe with its own set of variants. The ",[412,2917,1777],{}," prop should be passed consistently to both the container and each item so that font sizes and spacing stay coordinated. The ",[412,2920,2128],{},[412,2922,2133],{}," props only apply to items.",[504,2925,2929],{"className":2926,"code":2927,"language":2928,"meta":509,"style":509},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Both parts working together -->\n\u003Cnav class=\"nav(...)\">\n    \u003Ca class=\"navItem(...)\">Home\u003C/a>\n    \u003Ca class=\"navItem({ active: 'true' })\" aria-current=\"page\">About\u003C/a>\n    \u003Ca class=\"navItem({ disabled: 'true' })\" aria-disabled=\"true\">Disabled\u003C/a>\n\u003C/nav>\n","html",[412,2930,2931,2936,2956,2985,3025,3063],{"__ignoreMap":509},[513,2932,2933],{"class":515,"line":516},[513,2934,2935],{"class":2690},"\u003C!-- Both parts working together -->\n",[513,2937,2938,2940,2942,2945,2947,2949,2952,2954],{"class":515,"line":550},[513,2939,1572],{"class":523},[513,2941,776],{"class":844},[513,2943,2944],{"class":588}," class",[513,2946,595],{"class":523},[513,2948,821],{"class":523},[513,2950,2951],{"class":540},"nav(...)",[513,2953,821],{"class":523},[513,2955,1220],{"class":523},[513,2957,2958,2960,2962,2964,2966,2968,2971,2973,2976,2979,2981,2983],{"class":515,"line":579},[513,2959,1752],{"class":523},[513,2961,421],{"class":844},[513,2963,2944],{"class":588},[513,2965,595],{"class":523},[513,2967,821],{"class":523},[513,2969,2970],{"class":540},"navItem(...)",[513,2972,821],{"class":523},[513,2974,2975],{"class":523},">",[513,2977,2978],{"class":527},"Home",[513,2980,1730],{"class":523},[513,2982,421],{"class":844},[513,2984,1220],{"class":523},[513,2986,2987,2989,2991,2993,2995,2997,3000,3002,3005,3007,3009,3012,3014,3016,3019,3021,3023],{"class":515,"line":585},[513,2988,1752],{"class":523},[513,2990,421],{"class":844},[513,2992,2944],{"class":588},[513,2994,595],{"class":523},[513,2996,821],{"class":523},[513,2998,2999],{"class":540},"navItem({ active: 'true' })",[513,3001,821],{"class":523},[513,3003,3004],{"class":588}," aria-current",[513,3006,595],{"class":523},[513,3008,821],{"class":523},[513,3010,3011],{"class":540},"page",[513,3013,821],{"class":523},[513,3015,2975],{"class":523},[513,3017,3018],{"class":527},"About",[513,3020,1730],{"class":523},[513,3022,421],{"class":844},[513,3024,1220],{"class":523},[513,3026,3027,3029,3031,3033,3035,3037,3040,3042,3045,3047,3049,3051,3053,3055,3057,3059,3061],{"class":515,"line":606},[513,3028,1752],{"class":523},[513,3030,421],{"class":844},[513,3032,2944],{"class":588},[513,3034,595],{"class":523},[513,3036,821],{"class":523},[513,3038,3039],{"class":540},"navItem({ disabled: 'true' })",[513,3041,821],{"class":523},[513,3043,3044],{"class":588}," aria-disabled",[513,3046,595],{"class":523},[513,3048,821],{"class":523},[513,3050,1428],{"class":540},[513,3052,821],{"class":523},[513,3054,2975],{"class":523},[513,3056,2767],{"class":527},[513,3058,1730],{"class":523},[513,3060,421],{"class":844},[513,3062,1220],{"class":523},[513,3064,3065,3067,3069],{"class":515,"line":611},[513,3066,1730],{"class":523},[513,3068,776],{"class":844},[513,3070,1220],{"class":523},[2349,3072,3073,3075],{},[408,3074,2353],{}," The container recipe controls layout (direction, spacing) while the item recipe controls appearance (color, hover states, active/disabled states). You don't have to use the container — nav items work perfectly well on their own if you manage the layout yourself.",[400,3077,290],{"id":3078},"accessibility",[440,3080,3081],{},[443,3082,3083,3086,3087,3090,3091,3094,3095,3097,3098,3100],{},[408,3084,3085],{},"Use semantic HTML."," Render the container as a ",[412,3088,3089],{},"\u003Cnav>"," element with an ",[412,3092,3093],{},"aria-label"," to identify the navigation landmark. Use ",[412,3096,2784],{}," elements for items that navigate and ",[412,3099,2777],{}," for items that trigger actions.",[504,3102,3104],{"className":2926,"code":3103,"language":2928,"meta":509,"style":509},"\u003C!-- Correct: semantic nav landmark with label -->\n\u003Cnav aria-label=\"Main navigation\" class=\"...\">\n    \u003Ca href=\"/\" class=\"...\">Home\u003C/a>\n    \u003Ca href=\"/about\" class=\"navItem({ active: 'true' })\" aria-current=\"page\">About\u003C/a>\n\u003C/nav>\n\n\u003C!-- Avoid: non-semantic container -->\n\u003Cdiv class=\"...\">\n    \u003Cspan class=\"...\" onclick=\"navigate('/')\">Home\u003C/span>\n\u003C/div>\n",[412,3105,3106,3111,3142,3180,3227,3235,3239,3244,3263,3311],{"__ignoreMap":509},[513,3107,3108],{"class":515,"line":516},[513,3109,3110],{"class":2690},"\u003C!-- Correct: semantic nav landmark with label -->\n",[513,3112,3113,3115,3117,3120,3122,3124,3127,3129,3131,3133,3135,3138,3140],{"class":515,"line":550},[513,3114,1572],{"class":523},[513,3116,776],{"class":844},[513,3118,3119],{"class":588}," aria-label",[513,3121,595],{"class":523},[513,3123,821],{"class":523},[513,3125,3126],{"class":540},"Main navigation",[513,3128,821],{"class":523},[513,3130,2944],{"class":588},[513,3132,595],{"class":523},[513,3134,821],{"class":523},[513,3136,3137],{"class":540},"...",[513,3139,821],{"class":523},[513,3141,1220],{"class":523},[513,3143,3144,3146,3148,3151,3153,3155,3158,3160,3162,3164,3166,3168,3170,3172,3174,3176,3178],{"class":515,"line":579},[513,3145,1752],{"class":523},[513,3147,421],{"class":844},[513,3149,3150],{"class":588}," href",[513,3152,595],{"class":523},[513,3154,821],{"class":523},[513,3156,3157],{"class":540},"/",[513,3159,821],{"class":523},[513,3161,2944],{"class":588},[513,3163,595],{"class":523},[513,3165,821],{"class":523},[513,3167,3137],{"class":540},[513,3169,821],{"class":523},[513,3171,2975],{"class":523},[513,3173,2978],{"class":527},[513,3175,1730],{"class":523},[513,3177,421],{"class":844},[513,3179,1220],{"class":523},[513,3181,3182,3184,3186,3188,3190,3192,3195,3197,3199,3201,3203,3205,3207,3209,3211,3213,3215,3217,3219,3221,3223,3225],{"class":515,"line":585},[513,3183,1752],{"class":523},[513,3185,421],{"class":844},[513,3187,3150],{"class":588},[513,3189,595],{"class":523},[513,3191,821],{"class":523},[513,3193,3194],{"class":540},"/about",[513,3196,821],{"class":523},[513,3198,2944],{"class":588},[513,3200,595],{"class":523},[513,3202,821],{"class":523},[513,3204,2999],{"class":540},[513,3206,821],{"class":523},[513,3208,3004],{"class":588},[513,3210,595],{"class":523},[513,3212,821],{"class":523},[513,3214,3011],{"class":540},[513,3216,821],{"class":523},[513,3218,2975],{"class":523},[513,3220,3018],{"class":527},[513,3222,1730],{"class":523},[513,3224,421],{"class":844},[513,3226,1220],{"class":523},[513,3228,3229,3231,3233],{"class":515,"line":606},[513,3230,1730],{"class":523},[513,3232,776],{"class":844},[513,3234,1220],{"class":523},[513,3236,3237],{"class":515,"line":611},[513,3238,582],{"emptyLinePlaceholder":177},[513,3240,3241],{"class":515,"line":628},[513,3242,3243],{"class":2690},"\u003C!-- Avoid: non-semantic container -->\n",[513,3245,3246,3248,3251,3253,3255,3257,3259,3261],{"class":515,"line":644},[513,3247,1572],{"class":523},[513,3249,3250],{"class":844},"div",[513,3252,2944],{"class":588},[513,3254,595],{"class":523},[513,3256,821],{"class":523},[513,3258,3137],{"class":540},[513,3260,821],{"class":523},[513,3262,1220],{"class":523},[513,3264,3265,3267,3269,3271,3273,3275,3277,3279,3282,3284,3286,3289,3291,3293,3295,3297,3299,3301,3303,3305,3307,3309],{"class":515,"line":649},[513,3266,1752],{"class":523},[513,3268,513],{"class":844},[513,3270,2944],{"class":588},[513,3272,595],{"class":523},[513,3274,821],{"class":523},[513,3276,3137],{"class":540},[513,3278,821],{"class":523},[513,3280,3281],{"class":588}," onclick",[513,3283,595],{"class":523},[513,3285,821],{"class":523},[513,3287,3288],{"class":598},"navigate",[513,3290,2698],{"class":540},[513,3292,544],{"class":523},[513,3294,3157],{"class":540},[513,3296,544],{"class":523},[513,3298,1157],{"class":540},[513,3300,821],{"class":523},[513,3302,2975],{"class":523},[513,3304,2978],{"class":527},[513,3306,1730],{"class":523},[513,3308,513],{"class":844},[513,3310,1220],{"class":523},[513,3312,3313,3315,3317],{"class":515,"line":973},[513,3314,1730],{"class":523},[513,3316,3250],{"class":844},[513,3318,1220],{"class":523},[440,3320,3321,3343,3358],{},[443,3322,3323,3328,3329,3331,3332,3335,3336,3342],{},[408,3324,3325,3326,984],{},"Mark the current page with ",[412,3327,2763],{}," When a nav item represents the active page, add ",[412,3330,2763],{}," alongside the ",[412,3333,3334],{},"active: \"true\""," variant so screen readers announce it as the current location (",[421,3337,3341],{"href":3338,"rel":3339},"https://www.w3.org/WAI/WCAG21/Understanding/location.html",[3340],"nofollow","WCAG 2.4.8",").",[443,3344,3345,3348,3349,3352,3353,3342],{},[408,3346,3347],{},"Focus visibility."," The nav item recipe includes a ",[412,3350,3351],{},":focus-visible"," outline (2px solid, primary color, 2px offset) that appears only during keyboard navigation (",[421,3354,3357],{"href":3355,"rel":3356},"https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html",[3340],"WCAG 2.4.7",[443,3359,3360,3363,3364,3366,3367,3370,3371,777,3374,3377,3378,3381,3382,3384],{},[408,3361,3362],{},"Disabled state."," For ",[412,3365,2784],{}," elements, pass ",[412,3368,3369],{},"disabled: \"true\""," and add ",[412,3372,3373],{},"aria-disabled=\"true\"",[412,3375,3376],{},"tabindex=\"-1\""," to remove the link from the tab order. The ",[412,3379,3380],{},":disabled"," pseudo-class handles ",[412,3383,2777],{}," elements automatically.",[504,3386,3388],{"className":2926,"code":3387,"language":2928,"meta":509,"style":509},"\u003C!-- Correct: disabled link with ARIA attributes -->\n\u003Ca href=\"#\" class=\"navItem({ disabled: 'true' })\" aria-disabled=\"true\" tabindex=\"-1\">Disabled\u003C/a>\n\n\u003C!-- Correct: disabled button element -->\n\u003Cbutton class=\"...\" disabled>Disabled\u003C/button>\n",[412,3389,3390,3395,3454,3458,3463],{"__ignoreMap":509},[513,3391,3392],{"class":515,"line":516},[513,3393,3394],{"class":2690},"\u003C!-- Correct: disabled link with ARIA attributes -->\n",[513,3396,3397,3399,3401,3403,3405,3407,3410,3412,3414,3416,3418,3420,3422,3424,3426,3428,3430,3432,3435,3437,3439,3442,3444,3446,3448,3450,3452],{"class":515,"line":550},[513,3398,1572],{"class":523},[513,3400,421],{"class":844},[513,3402,3150],{"class":588},[513,3404,595],{"class":523},[513,3406,821],{"class":523},[513,3408,3409],{"class":540},"#",[513,3411,821],{"class":523},[513,3413,2944],{"class":588},[513,3415,595],{"class":523},[513,3417,821],{"class":523},[513,3419,3039],{"class":540},[513,3421,821],{"class":523},[513,3423,3044],{"class":588},[513,3425,595],{"class":523},[513,3427,821],{"class":523},[513,3429,1428],{"class":540},[513,3431,821],{"class":523},[513,3433,3434],{"class":588}," tabindex",[513,3436,595],{"class":523},[513,3438,821],{"class":523},[513,3440,3441],{"class":540},"-1",[513,3443,821],{"class":523},[513,3445,2975],{"class":523},[513,3447,2767],{"class":527},[513,3449,1730],{"class":523},[513,3451,421],{"class":844},[513,3453,1220],{"class":523},[513,3455,3456],{"class":515,"line":579},[513,3457,582],{"emptyLinePlaceholder":177},[513,3459,3460],{"class":515,"line":585},[513,3461,3462],{"class":2690},"\u003C!-- Correct: disabled button element -->\n",[513,3464,3465,3467,3470,3472,3474,3476,3478,3480,3482,3484,3486,3488,3490],{"class":515,"line":606},[513,3466,1572],{"class":523},[513,3468,3469],{"class":844},"button",[513,3471,2944],{"class":588},[513,3473,595],{"class":523},[513,3475,821],{"class":523},[513,3477,3137],{"class":540},[513,3479,821],{"class":523},[513,3481,1453],{"class":588},[513,3483,2975],{"class":523},[513,3485,2767],{"class":527},[513,3487,1730],{"class":523},[513,3489,3469],{"class":844},[513,3491,1220],{"class":523},[2349,3493,3494,3496,3497,3499,3500,3502],{},[408,3495,2759],{}," If your page has multiple ",[412,3498,3089],{}," elements, give each one a distinct ",[412,3501,3093],{}," (e.g., \"Main navigation\", \"Footer navigation\") so screen reader users can tell them apart.",[400,3504,3506],{"id":3505},"customization","Customization",[2281,3508,3510],{"id":3509},"overriding-defaults","Overriding Defaults",[404,3512,3513],{},"Each nav composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[504,3515,3517],{"className":506,"code":3516,"filename":502,"language":508,"meta":509,"style":509},"import { styleframe } from 'virtual:styleframe';\nimport { useNavRecipe, useNavItemRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst nav = useNavRecipe(s, {\n    base: {\n        gap: '@1',\n    },\n    defaultVariants: {\n        orientation: 'vertical',\n        size: 'lg',\n    },\n});\n\nconst navItem = useNavItemRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.full',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'ghost',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[412,3518,3519,3539,3563,3567,3581,3585,3602,3611,3626,3631,3640,3655,3670,3674,3682,3686,3702,3710,3726,3730,3738,3753,3768,3782,3786,3794,3798],{"__ignoreMap":509},[513,3520,3521,3523,3525,3527,3529,3531,3533,3535,3537],{"class":515,"line":516},[513,3522,520],{"class":519},[513,3524,524],{"class":523},[513,3526,528],{"class":527},[513,3528,531],{"class":523},[513,3530,534],{"class":519},[513,3532,537],{"class":523},[513,3534,541],{"class":540},[513,3536,544],{"class":523},[513,3538,547],{"class":523},[513,3540,3541,3543,3545,3547,3549,3551,3553,3555,3557,3559,3561],{"class":515,"line":550},[513,3542,520],{"class":519},[513,3544,524],{"class":523},[513,3546,557],{"class":527},[513,3548,560],{"class":523},[513,3550,563],{"class":527},[513,3552,531],{"class":523},[513,3554,534],{"class":519},[513,3556,537],{"class":523},[513,3558,572],{"class":540},[513,3560,544],{"class":523},[513,3562,547],{"class":523},[513,3564,3565],{"class":515,"line":579},[513,3566,582],{"emptyLinePlaceholder":177},[513,3568,3569,3571,3573,3575,3577,3579],{"class":515,"line":585},[513,3570,589],{"class":588},[513,3572,592],{"class":527},[513,3574,595],{"class":523},[513,3576,528],{"class":598},[513,3578,601],{"class":527},[513,3580,547],{"class":523},[513,3582,3583],{"class":515,"line":606},[513,3584,582],{"emptyLinePlaceholder":177},[513,3586,3587,3589,3591,3593,3595,3598,3600],{"class":515,"line":611},[513,3588,589],{"class":588},[513,3590,616],{"class":527},[513,3592,595],{"class":523},[513,3594,557],{"class":598},[513,3596,3597],{"class":527},"(s",[513,3599,560],{"class":523},[513,3601,839],{"class":523},[513,3603,3604,3607,3609],{"class":515,"line":628},[513,3605,3606],{"class":844},"    base",[513,3608,1417],{"class":523},[513,3610,839],{"class":523},[513,3612,3613,3616,3618,3620,3622,3624],{"class":515,"line":644},[513,3614,3615],{"class":844},"        gap",[513,3617,1417],{"class":523},[513,3619,537],{"class":523},[513,3621,2654],{"class":540},[513,3623,544],{"class":523},[513,3625,1124],{"class":523},[513,3627,3628],{"class":515,"line":649},[513,3629,3630],{"class":523},"    },\n",[513,3632,3633,3636,3638],{"class":515,"line":973},[513,3634,3635],{"class":844},"    defaultVariants",[513,3637,1417],{"class":523},[513,3639,839],{"class":523},[513,3641,3642,3645,3647,3649,3651,3653],{"class":515,"line":992},[513,3643,3644],{"class":844},"        orientation",[513,3646,1417],{"class":523},[513,3648,537],{"class":523},[513,3650,1032],{"class":540},[513,3652,544],{"class":523},[513,3654,1124],{"class":523},[513,3656,3657,3660,3662,3664,3666,3668],{"class":515,"line":998},[513,3658,3659],{"class":844},"        size",[513,3661,1417],{"class":523},[513,3663,537],{"class":523},[513,3665,931],{"class":540},[513,3667,544],{"class":523},[513,3669,1124],{"class":523},[513,3671,3672],{"class":515,"line":1003},[513,3673,3630],{"class":523},[513,3675,3676,3678,3680],{"class":515,"line":1013},[513,3677,1656],{"class":523},[513,3679,1157],{"class":527},[513,3681,547],{"class":523},[513,3683,3684],{"class":515,"line":1039},[513,3685,582],{"emptyLinePlaceholder":177},[513,3687,3688,3690,3692,3694,3696,3698,3700],{"class":515,"line":1070},[513,3689,589],{"class":588},[513,3691,633],{"class":527},[513,3693,595],{"class":523},[513,3695,563],{"class":598},[513,3697,3597],{"class":527},[513,3699,560],{"class":523},[513,3701,839],{"class":523},[513,3703,3704,3706,3708],{"class":515,"line":1085},[513,3705,3606],{"class":844},[513,3707,1417],{"class":523},[513,3709,839],{"class":523},[513,3711,3712,3715,3717,3719,3722,3724],{"class":515,"line":1090},[513,3713,3714],{"class":844},"        borderRadius",[513,3716,1417],{"class":523},[513,3718,537],{"class":523},[513,3720,3721],{"class":540},"@border-radius.full",[513,3723,544],{"class":523},[513,3725,1124],{"class":523},[513,3727,3728],{"class":515,"line":1095},[513,3729,3630],{"class":523},[513,3731,3732,3734,3736],{"class":515,"line":1109},[513,3733,3635],{"class":844},[513,3735,1417],{"class":523},[513,3737,839],{"class":523},[513,3739,3740,3743,3745,3747,3749,3751],{"class":515,"line":1127},[513,3741,3742],{"class":844},"        color",[513,3744,1417],{"class":523},[513,3746,537],{"class":523},[513,3748,872],{"class":540},[513,3750,544],{"class":523},[513,3752,1124],{"class":523},[513,3754,3755,3758,3760,3762,3764,3766],{"class":515,"line":1142},[513,3756,3757],{"class":844},"        variant",[513,3759,1417],{"class":523},[513,3761,537],{"class":523},[513,3763,888],{"class":540},[513,3765,544],{"class":523},[513,3767,1124],{"class":523},[513,3769,3770,3772,3774,3776,3778,3780],{"class":515,"line":1149},[513,3771,3659],{"class":844},[513,3773,1417],{"class":523},[513,3775,537],{"class":523},[513,3777,931],{"class":540},[513,3779,544],{"class":523},[513,3781,1124],{"class":523},[513,3783,3784],{"class":515,"line":1162},[513,3785,3630],{"class":523},[513,3787,3788,3790,3792],{"class":515,"line":1171},[513,3789,1656],{"class":523},[513,3791,1157],{"class":527},[513,3793,547],{"class":523},[513,3795,3796],{"class":515,"line":1201},[513,3797,582],{"emptyLinePlaceholder":177},[513,3799,3800,3802,3804,3806],{"class":515,"line":1212},[513,3801,652],{"class":519},[513,3803,655],{"class":519},[513,3805,658],{"class":527},[513,3807,547],{"class":523},[2281,3809,3811],{"id":3810},"filtering-variants","Filtering Variants",[404,3813,3814,3815,3818],{},"If you only need a subset of the available variants, use the ",[412,3816,3817],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[504,3820,3822],{"className":506,"code":3821,"filename":502,"language":508,"meta":509,"style":509},"import { styleframe } from 'virtual:styleframe';\nimport { useNavRecipe, useNavItemRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst nav = useNavRecipe(s);\n\n// Only generate neutral color with ghost style\nconst navItem = useNavItemRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        variant: ['ghost'],\n    },\n});\n\nexport default s;\n",[412,3823,3824,3844,3868,3872,3886,3890,3904,3908,3913,3929,3938,3958,3976,3980,3988,3992],{"__ignoreMap":509},[513,3825,3826,3828,3830,3832,3834,3836,3838,3840,3842],{"class":515,"line":516},[513,3827,520],{"class":519},[513,3829,524],{"class":523},[513,3831,528],{"class":527},[513,3833,531],{"class":523},[513,3835,534],{"class":519},[513,3837,537],{"class":523},[513,3839,541],{"class":540},[513,3841,544],{"class":523},[513,3843,547],{"class":523},[513,3845,3846,3848,3850,3852,3854,3856,3858,3860,3862,3864,3866],{"class":515,"line":550},[513,3847,520],{"class":519},[513,3849,524],{"class":523},[513,3851,557],{"class":527},[513,3853,560],{"class":523},[513,3855,563],{"class":527},[513,3857,531],{"class":523},[513,3859,534],{"class":519},[513,3861,537],{"class":523},[513,3863,572],{"class":540},[513,3865,544],{"class":523},[513,3867,547],{"class":523},[513,3869,3870],{"class":515,"line":579},[513,3871,582],{"emptyLinePlaceholder":177},[513,3873,3874,3876,3878,3880,3882,3884],{"class":515,"line":585},[513,3875,589],{"class":588},[513,3877,592],{"class":527},[513,3879,595],{"class":523},[513,3881,528],{"class":598},[513,3883,601],{"class":527},[513,3885,547],{"class":523},[513,3887,3888],{"class":515,"line":606},[513,3889,582],{"emptyLinePlaceholder":177},[513,3891,3892,3894,3896,3898,3900,3902],{"class":515,"line":611},[513,3893,589],{"class":588},[513,3895,616],{"class":527},[513,3897,595],{"class":523},[513,3899,557],{"class":598},[513,3901,623],{"class":527},[513,3903,547],{"class":523},[513,3905,3906],{"class":515,"line":628},[513,3907,582],{"emptyLinePlaceholder":177},[513,3909,3910],{"class":515,"line":644},[513,3911,3912],{"class":2690},"// Only generate neutral color with ghost style\n",[513,3914,3915,3917,3919,3921,3923,3925,3927],{"class":515,"line":649},[513,3916,589],{"class":588},[513,3918,633],{"class":527},[513,3920,595],{"class":523},[513,3922,563],{"class":598},[513,3924,3597],{"class":527},[513,3926,560],{"class":523},[513,3928,839],{"class":523},[513,3930,3931,3934,3936],{"class":515,"line":973},[513,3932,3933],{"class":844},"    filter",[513,3935,1417],{"class":523},[513,3937,839],{"class":523},[513,3939,3940,3942,3944,3947,3949,3951,3953,3956],{"class":515,"line":992},[513,3941,3742],{"class":844},[513,3943,1417],{"class":523},[513,3945,3946],{"class":527}," [",[513,3948,544],{"class":523},[513,3950,872],{"class":540},[513,3952,544],{"class":523},[513,3954,3955],{"class":527},"]",[513,3957,1124],{"class":523},[513,3959,3960,3962,3964,3966,3968,3970,3972,3974],{"class":515,"line":998},[513,3961,3757],{"class":844},[513,3963,1417],{"class":523},[513,3965,3946],{"class":527},[513,3967,544],{"class":523},[513,3969,888],{"class":540},[513,3971,544],{"class":523},[513,3973,3955],{"class":527},[513,3975,1124],{"class":523},[513,3977,3978],{"class":515,"line":1003},[513,3979,3630],{"class":523},[513,3981,3982,3984,3986],{"class":515,"line":1013},[513,3983,1656],{"class":523},[513,3985,1157],{"class":527},[513,3987,547],{"class":523},[513,3989,3990],{"class":515,"line":1039},[513,3991,582],{"emptyLinePlaceholder":177},[513,3993,3994,3996,3998,4000],{"class":515,"line":1070},[513,3995,652],{"class":519},[513,3997,655],{"class":519},[513,3999,658],{"class":527},[513,4001,547],{"class":523},[2656,4003,4004,4006],{},[408,4005,2660],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[400,4008,4010],{"id":4009},"api-reference","API Reference",[2281,4012,4014],{"id":4013},"usenavrecipes-options",[412,4015,4016],{},"useNavRecipe(s, options?)",[404,4018,4019],{},"Creates the nav container recipe with flex layout, orientation, and gap styling.",[404,4021,4022],{},[408,4023,4024],{},"Parameters:",[2286,4026,4027,4040],{},[2289,4028,4029],{},[2292,4030,4031,4034,4037],{},[2295,4032,4033],{},"Parameter",[2295,4035,4036],{},"Type",[2295,4038,4039],{},"Description",[2307,4041,4042,4057,4072,4087,4101,4116,4131],{},[2292,4043,4044,4049,4054],{},[2312,4045,4046],{},[412,4047,4048],{},"s",[2312,4050,4051],{},[412,4052,4053],{},"Styleframe",[2312,4055,4056],{},"The Styleframe instance",[2292,4058,4059,4064,4069],{},[2312,4060,4061],{},[412,4062,4063],{},"options",[2312,4065,4066],{},[412,4067,4068],{},"DeepPartial\u003CRecipeConfig>",[2312,4070,4071],{},"Optional overrides for the recipe configuration",[2292,4073,4074,4079,4084],{},[2312,4075,4076],{},[412,4077,4078],{},"options.base",[2312,4080,4081],{},[412,4082,4083],{},"VariantDeclarationsBlock",[2312,4085,4086],{},"Custom base styles for the nav container",[2292,4088,4089,4094,4098],{},[2312,4090,4091],{},[412,4092,4093],{},"options.variants",[2312,4095,4096],{},[412,4097,2461],{},[2312,4099,4100],{},"Custom variant definitions for the recipe",[2292,4102,4103,4108,4113],{},[2312,4104,4105],{},[412,4106,4107],{},"options.defaultVariants",[2312,4109,4110],{},[412,4111,4112],{},"Record\u003Ckeyof Variants, string>",[2312,4114,4115],{},"Default variant values for the recipe",[2292,4117,4118,4123,4128],{},[2312,4119,4120],{},[412,4121,4122],{},"options.compoundVariants",[2312,4124,4125],{},[412,4126,4127],{},"CompoundVariant[]",[2312,4129,4130],{},"Custom compound variant definitions for the recipe",[2292,4132,4133,4138,4143],{},[2312,4134,4135],{},[412,4136,4137],{},"options.filter",[2312,4139,4140],{},[412,4141,4142],{},"Record\u003Cstring, string[]>",[2312,4144,4145],{},"Limit which variant values are generated",[404,4147,4148],{},[408,4149,4150],{},"Variants:",[2286,4152,4153,4166],{},[2289,4154,4155],{},[2292,4156,4157,4160,4163],{},[2295,4158,4159],{},"Variant",[2295,4161,4162],{},"Options",[2295,4164,4165],{},"Default",[2307,4167,4168,4184],{},[2292,4169,4170,4174,4180],{},[2312,4171,4172],{},[412,4173,1771],{},[2312,4175,4176,1774,4178],{},[412,4177,1023],{},[412,4179,1032],{},[2312,4181,4182],{},[412,4183,1023],{},[2292,4185,4186,4190,4198],{},[2312,4187,4188],{},[412,4189,1777],{},[2312,4191,4192,1774,4194,1774,4196],{},[412,4193,913],{},[412,4195,922],{},[412,4197,931],{},[2312,4199,4200],{},[412,4201,922],{},[2281,4203,4205],{"id":4204},"usenavitemrecipes-options",[412,4206,4207],{},"useNavItemRecipe(s, options?)",[404,4209,4210],{},"Creates the nav item recipe with color, variant, interactive states, and active/disabled boolean variants.",[404,4212,4213],{},[408,4214,4024],{},[2286,4216,4217,4227],{},[2289,4218,4219],{},[2292,4220,4221,4223,4225],{},[2295,4222,4033],{},[2295,4224,4036],{},[2295,4226,4039],{},[2307,4228,4229,4241,4253,4266,4278,4290,4302],{},[2292,4230,4231,4235,4239],{},[2312,4232,4233],{},[412,4234,4048],{},[2312,4236,4237],{},[412,4238,4053],{},[2312,4240,4056],{},[2292,4242,4243,4247,4251],{},[2312,4244,4245],{},[412,4246,4063],{},[2312,4248,4249],{},[412,4250,4068],{},[2312,4252,4071],{},[2292,4254,4255,4259,4263],{},[2312,4256,4257],{},[412,4258,4078],{},[2312,4260,4261],{},[412,4262,4083],{},[2312,4264,4265],{},"Custom base styles for the nav item",[2292,4267,4268,4272,4276],{},[2312,4269,4270],{},[412,4271,4093],{},[2312,4273,4274],{},[412,4275,2461],{},[2312,4277,4100],{},[2292,4279,4280,4284,4288],{},[2312,4281,4282],{},[412,4283,4107],{},[2312,4285,4286],{},[412,4287,4112],{},[2312,4289,4115],{},[2292,4291,4292,4296,4300],{},[2312,4293,4294],{},[412,4295,4122],{},[2312,4297,4298],{},[412,4299,4127],{},[2312,4301,4130],{},[2292,4303,4304,4308,4312],{},[2312,4305,4306],{},[412,4307,4137],{},[2312,4309,4310],{},[412,4311,4142],{},[2312,4313,4145],{},[404,4315,4316],{},[408,4317,4150],{},[2286,4319,4320,4330],{},[2289,4321,4322],{},[2292,4323,4324,4326,4328],{},[2295,4325,4159],{},[2295,4327,4162],{},[2295,4329,4165],{},[2307,4331,4332,4350,4366,4384,4400],{},[2292,4333,4334,4338,4346],{},[2312,4335,4336],{},[412,4337,2128],{},[2312,4339,4340,1774,4342,1774,4344],{},[412,4341,853],{},[412,4343,863],{},[412,4345,872],{},[2312,4347,4348],{},[412,4349,872],{},[2292,4351,4352,4356,4362],{},[2312,4353,4354],{},[412,4355,2133],{},[2312,4357,4358,1774,4360],{},[412,4359,888],{},[412,4361,897],{},[2312,4363,4364],{},[412,4365,888],{},[2292,4367,4368,4372,4380],{},[2312,4369,4370],{},[412,4371,1777],{},[2312,4373,4374,1774,4376,1774,4378],{},[412,4375,913],{},[412,4377,922],{},[412,4379,931],{},[2312,4381,4382],{},[412,4383,922],{},[2292,4385,4386,4390,4396],{},[2312,4387,4388],{},[412,4389,2142],{},[2312,4391,4392,1774,4394],{},[412,4393,1428],{},[412,4395,1438],{},[2312,4397,4398],{},[412,4399,1438],{},[2292,4401,4402,4406,4412],{},[2312,4403,4404],{},[412,4405,1489],{},[2312,4407,4408,1774,4410],{},[412,4409,1428],{},[412,4411,1438],{},[2312,4413,4414],{},[412,4415,1438],{},[404,4417,4418],{},[421,4419,4420],{"href":104},"Learn more about recipes →",[400,4422,4424],{"id":4423},"best-practices","Best Practices",[440,4426,4427,4436,4445,4457,4469,4480,4489],{},[443,4428,4429,4435],{},[408,4430,4431,4432,4434],{},"Pass ",[412,4433,1777],{}," consistently to both recipes",": The container controls gap and font size, while items control their own padding. Mismatched sizes create visual inconsistency.",[443,4437,4438,4444],{},[408,4439,4440,4441,4443],{},"Use ",[412,4442,872],{}," for general-purpose navigation",": The neutral color adapts to light and dark mode automatically, making it the safest default.",[443,4446,4447,4453,4454,4456],{},[408,4448,4449,4450,4452],{},"Prefer ",[412,4451,888],{}," for primary navigation bars",": The transparent resting state keeps the nav clean while hover states confirm interactivity. Use ",[412,4455,897],{}," for secondary or inline navigation.",[443,4458,4459,4462,4463,4465,4466,4468],{},[408,4460,4461],{},"Always mark the current page as active",": Pass ",[412,4464,3334],{}," alongside ",[412,4467,2763],{}," so both visual and assistive technology users know where they are.",[443,4470,4471,4479],{},[408,4472,4440,4473,4475,4476,4478],{},[412,4474,1023],{}," for top navbars, ",[412,4477,1032],{}," for sidebars",": Match the orientation to the layout context rather than mixing orientations within the same navigation level.",[443,4481,4482,4485,4486,4488],{},[408,4483,4484],{},"Filter what you don't need",": If your component only uses one variant, pass a ",[412,4487,3817],{}," option to reduce generated CSS.",[443,4490,4491,4494,4495,4498],{},[408,4492,4493],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[412,4496,4497],{},"defaultVariants"," so component consumers write less code.",[400,4500,4502],{"id":4501},"faq","FAQ",[4504,4505,4506,4512,4523,4539,4562,4586,4620,4637],"accordion",{},[4507,4508,4511],"accordion-item",{"icon":4509,"label":4510},"i-lucide-circle-help","Why are there two separate recipes instead of one?","Navigation has two distinct concerns: the container manages layout (flex direction, gap, alignment) while items manage appearance (color, hover states, active/disabled modifiers). Two separate recipes keep each concern focused and let you customize them independently. You can also use nav items without the container recipe if you manage the layout yourself.",[4507,4513,4515,4516,1774,4518,2371,4520,4522],{"icon":4509,"label":4514},"Why doesn't the Nav recipe include semantic colors like primary or success?","Navigation items are structural elements, not status indicators. Semantic colors (primary, success, error) communicate meaning through color, which is better suited to smaller, focused elements like badges, buttons, and callouts. Nav uses ",[412,4517,853],{},[412,4519,863],{},[412,4521,872],{}," to provide surface-appropriate text colors without implying a specific status.",[4507,4524,4526,4527,4529,4530,4532,4533,4535,4536,4538],{"icon":4509,"label":4525},"What's the difference between ghost and link variants?","Both have a transparent resting state. The difference is that ",[412,4528,888],{}," reveals a tinted background on hover (like a toolbar button), while ",[412,4531,897],{}," adds an underline on hover (like a hyperlink). Use ",[412,4534,888],{}," for primary navigation bars and ",[412,4537,897],{}," for secondary or inline navigation lists.",[4507,4540,4542,4543,4545,4546,2418,4549,4552,4553,4555,4556,4558,4559,4561],{"icon":4509,"label":4541},"How does the active state work?","The active state is controlled by the ",[412,4544,2142],{}," boolean variant (",[412,4547,4548],{},"\"true\"",[412,4550,4551],{},"\"false\"","). It sets ",[412,4554,2676],{}," to visually distinguish the current page. Pass ",[412,4557,3334],{}," as a variant prop and always pair it with ",[412,4560,2763],{}," for accessibility.",[4507,4563,4565,4566,4568,4569,4571,4572,4574,4575,4577,4578,4580,4581,777,4583,4585],{"icon":4509,"label":4564},"How does the disabled state work for links?","HTML ",[412,4567,2784],{}," elements do not support the native ",[412,4570,1489],{}," attribute. The Nav item recipe provides a ",[412,4573,1489],{}," boolean variant that applies the same styles as the ",[412,4576,3380],{}," pseudo-class (reduced opacity, not-allowed cursor, no pointer events). Pass ",[412,4579,3369],{}," as a variant prop and pair it with ",[412,4582,3373],{},[412,4584,3376],{}," to ensure the link is also inaccessible to keyboard and assistive technology users.",[4507,4587,4589,4615],{"icon":4509,"label":4588},"How do compound variants work in the Nav item recipe?",[404,4590,4591,4592,4594,4595,777,4597,4594,4599,4601,4602,4605,4606,4609,4610,777,4612,4614],{},"The Nav item recipe uses compound variants to map each color-variant combination to specific styles. For example, when ",[412,4593,2128],{}," is ",[412,4596,872],{},[412,4598,2133],{},[412,4600,888],{},", the compound variant applies ",[412,4603,4604],{},"color: @color.text"," in light mode and ",[412,4607,4608],{},"color: @color.gray-200"," in dark mode, along with hover, focus, and active state overrides. This approach keeps the individual ",[412,4611,2128],{},[412,4613,2133],{}," definitions clean while handling all 6 combinations (3 colors × 2 variants) automatically.",[404,4616,4617],{},[421,4618,4619],{"href":2467},"Learn more about compound variants →",[4507,4621,4623,4624,4626,4627,4629,4630,4633,4634,4636],{"icon":4509,"label":4622},"How does filtering affect compound variants?","When you use the ",[412,4625,3817],{}," option, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[412,4628,2133],{}," to only ",[412,4631,4632],{},"['ghost']",", all compound variants matching ",[412,4635,897],{}," are excluded from the generated output. Default variants are also adjusted if they reference a removed value.",[4507,4638,4640,4641,1774,4644,2371,4646,4649,4650,4653],{"icon":4509,"label":4639},"Can I use the Nav recipe without the design tokens preset?","The Nav recipe references design tokens like ",[412,4642,4643],{},"@color.primary",[412,4645,2563],{},[412,4647,4648],{},"@border-radius.md"," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[412,4651,4652],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[4655,4656,4657],"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":509,"searchDepth":550,"depth":550,"links":4659},[4660,4661,4662,4663,4666,4669,4673,4676,4677,4678,4679,4680,4684,4688,4689],{"id":402,"depth":550,"text":21},{"id":434,"depth":550,"text":435},{"id":481,"depth":550,"text":482},{"id":1771,"depth":550,"text":2273,"children":4664},[4665],{"id":2283,"depth":579,"text":2284},{"id":2363,"depth":550,"text":198,"children":4667},[4668],{"id":2385,"depth":579,"text":2386},{"id":2460,"depth":550,"text":2461,"children":4670},[4671,4672],{"id":888,"depth":579,"text":2472},{"id":897,"depth":579,"text":2481},{"id":2490,"depth":550,"text":2491,"children":4674},[4675],{"id":2509,"depth":579,"text":2510},{"id":2142,"depth":550,"text":2667},{"id":1489,"depth":550,"text":2767},{"id":2863,"depth":550,"text":2864},{"id":3078,"depth":550,"text":290},{"id":3505,"depth":550,"text":3506,"children":4681},[4682,4683],{"id":3509,"depth":579,"text":3510},{"id":3810,"depth":579,"text":3811},{"id":4009,"depth":550,"text":4010,"children":4685},[4686,4687],{"id":4013,"depth":579,"text":4016},{"id":4204,"depth":579,"text":4207},{"id":4423,"depth":550,"text":4424},{"id":4501,"depth":550,"text":4502},"A navigation component for horizontal and vertical link lists. Supports multiple colors, visual styles, sizes, and active/disabled states through a two-part recipe system.",null,{},{"title":270,"description":4690},{"loc":271},"w5U0Qd319dfMUlt96-AEaLe_e79LNVhLry4BCwf7cdY",[4697,4699],{"title":266,"path":267,"stem":268,"description":4698,"children":-1},"A structured container component for grouping related content with header, body, and footer sections. Supports multiple colors, visual styles, and sizes through the recipe system.",{"title":274,"path":275,"stem":276,"description":4700,"children":-1},"A dialog component for focused interactions, composed of overlay, container, header, body, and footer sections. Supports multiple colors, visual styles, and sizes through the recipe system.",1775401501451]