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