[{"data":1,"prerenderedAt":3283},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-badge":682,"-docs-theme-components-badge-surround":3278},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":404,"body":684,"description":3272,"extension":1960,"links":3273,"meta":3274,"navigation":3275,"path":405,"seo":3276,"stem":406,"__hash__":3277},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge.md",{"type":685,"value":686,"toc":3245},"minimark",[687,691,709,716,720,723,757,761,1620,1623,1655,1658,1663,1666,1817,1824,1828,1836,1839,1842,1845,1849,1852,1855,1859,1862,1865,1869,1877,1880,1884,1895,1898,1902,1905,2002,2005,2020,2150,2166,2185,2189,2193,2198,2397,2401,2408,2585,2592,2595,2601,2604,2609,2730,2735,2826,2831,2835,2894,2898,3241],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,708],"p",{},"The ",[696,697,404],"strong",{}," is a compact UI element used for status indicators, counts, labels, and categorization. The ",[700,701,702],"code",{},"useBadgeRecipe()"," composable creates a fully configured ",[705,706,707],"a",{"href":132},"recipe"," with color, variant, and size options — plus compound variants that handle the color-variant combinations automatically.",[692,710,711,712,715],{},"The Badge recipe integrates directly with the default ",[705,713,714],{"href":171},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[688,717,719],{"id":718},"why-use-the-badge-recipe","Why use the Badge recipe?",[692,721,722],{},"The Badge recipe helps you:",[724,725,726,733,739,745,751],"ul",{},[727,728,729,732],"li",{},[696,730,731],{},"Ship faster with sensible defaults",": Get 9 colors, 4 visual styles, and 5 sizes out of the box with a single composable call.",[727,734,735,738],{},[696,736,737],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules.",[727,740,741,744],{},[696,742,743],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[727,746,747,750],{},[696,748,749],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, or size values at compile time.",[727,752,753,756],{},[696,754,755],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[688,758,760],{"id":759},"usage","Usage",[762,763,765,770,777,1025,1029,1036,1611,1615],"steps",{"level":764},"4",[766,767,769],"h4",{"id":768},"register-the-recipe","Register the recipe",[692,771,772,773,776],{},"Add the Badge recipe to a local Styleframe instance. The global ",[700,774,775],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[778,779,781,917],"code-tree",{"default-value":780},"src\u002Fcomponents\u002Fbadge.styleframe.ts",[782,783,788],"pre",{"className":784,"code":785,"filename":780,"language":786,"meta":787,"style":787},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useBadgeRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst badge = useBadgeRecipe(s);\n\nexport default s;\n","ts","",[700,789,790,826,849,855,876,881,898,903],{"__ignoreMap":787},[791,792,795,799,803,807,810,813,816,820,823],"span",{"class":793,"line":794},"line",1,[791,796,798],{"class":797},"s7zQu","import",[791,800,802],{"class":801},"sMK4o"," {",[791,804,806],{"class":805},"sTEyZ"," styleframe",[791,808,809],{"class":801}," }",[791,811,812],{"class":797}," from",[791,814,815],{"class":801}," '",[791,817,819],{"class":818},"sfazB","virtual:styleframe",[791,821,822],{"class":801},"'",[791,824,825],{"class":801},";\n",[791,827,829,831,833,836,838,840,842,845,847],{"class":793,"line":828},2,[791,830,798],{"class":797},[791,832,802],{"class":801},[791,834,835],{"class":805}," useBadgeRecipe",[791,837,809],{"class":801},[791,839,812],{"class":797},[791,841,815],{"class":801},[791,843,844],{"class":818},"@styleframe\u002Ftheme",[791,846,822],{"class":801},[791,848,825],{"class":801},[791,850,852],{"class":793,"line":851},3,[791,853,854],{"emptyLinePlaceholder":223},"\n",[791,856,858,862,865,868,871,874],{"class":793,"line":857},4,[791,859,861],{"class":860},"spNyl","const",[791,863,864],{"class":805}," s ",[791,866,867],{"class":801},"=",[791,869,806],{"class":870},"s2Zo4",[791,872,873],{"class":805},"()",[791,875,825],{"class":801},[791,877,879],{"class":793,"line":878},5,[791,880,854],{"emptyLinePlaceholder":223},[791,882,884,886,889,891,893,896],{"class":793,"line":883},6,[791,885,861],{"class":860},[791,887,888],{"class":805}," badge ",[791,890,867],{"class":801},[791,892,835],{"class":870},[791,894,895],{"class":805},"(s)",[791,897,825],{"class":801},[791,899,901],{"class":793,"line":900},7,[791,902,854],{"emptyLinePlaceholder":223},[791,904,906,909,912,915],{"class":793,"line":905},8,[791,907,908],{"class":797},"export",[791,910,911],{"class":797}," default",[791,913,914],{"class":805}," s",[791,916,825],{"class":801},[782,918,920],{"className":784,"code":919,"filename":775,"language":786,"meta":787,"style":787},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[700,921,922,943,970,974,988,992,1001,1010,1014],{"__ignoreMap":787},[791,923,924,926,928,930,932,934,936,939,941],{"class":793,"line":794},[791,925,798],{"class":797},[791,927,802],{"class":801},[791,929,806],{"class":805},[791,931,809],{"class":801},[791,933,812],{"class":797},[791,935,815],{"class":801},[791,937,938],{"class":818},"styleframe",[791,940,822],{"class":801},[791,942,825],{"class":801},[791,944,945,947,949,952,955,958,960,962,964,966,968],{"class":793,"line":828},[791,946,798],{"class":797},[791,948,802],{"class":801},[791,950,951],{"class":805}," useDesignTokensPreset",[791,953,954],{"class":801},",",[791,956,957],{"class":805}," useUtilitiesPreset",[791,959,809],{"class":801},[791,961,812],{"class":797},[791,963,815],{"class":801},[791,965,844],{"class":818},[791,967,822],{"class":801},[791,969,825],{"class":801},[791,971,972],{"class":793,"line":851},[791,973,854],{"emptyLinePlaceholder":223},[791,975,976,978,980,982,984,986],{"class":793,"line":857},[791,977,861],{"class":860},[791,979,864],{"class":805},[791,981,867],{"class":801},[791,983,806],{"class":870},[791,985,873],{"class":805},[791,987,825],{"class":801},[791,989,990],{"class":793,"line":878},[791,991,854],{"emptyLinePlaceholder":223},[791,993,994,997,999],{"class":793,"line":883},[791,995,996],{"class":870},"useDesignTokensPreset",[791,998,895],{"class":805},[791,1000,825],{"class":801},[791,1002,1003,1006,1008],{"class":793,"line":900},[791,1004,1005],{"class":870},"useUtilitiesPreset",[791,1007,895],{"class":805},[791,1009,825],{"class":801},[791,1011,1012],{"class":793,"line":905},[791,1013,854],{"emptyLinePlaceholder":223},[791,1015,1017,1019,1021,1023],{"class":793,"line":1016},9,[791,1018,908],{"class":797},[791,1020,911],{"class":797},[791,1022,914],{"class":805},[791,1024,825],{"class":801},[766,1026,1028],{"id":1027},"build-the-component","Build the component",[692,1030,1031,1032,1035],{},"Import the ",[700,1033,1034],{},"badge"," runtime function from the virtual module and pass variant props to compute class names:",[1037,1038,1039,1250,1474],"framework-switcher",{},[1040,1041,1042],"template",{"v-slot:vue":787},[782,1043,1048],{"className":1044,"code":1045,"filename":1046,"language":1047,"meta":787,"style":787},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { badge, type BadgeProps } from \"virtual:styleframe\";\n\nconst { color = \"neutral\", variant = \"solid\", size = \"sm\" } = defineProps\u003CBadgeProps>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cspan :class=\"badge({ color, variant, size })\">\n        \u003Cslot \u002F>\n    \u003C\u002Fspan>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FBadge.vue","vue",[700,1049,1050,1077,1107,1111,1178,1187,1191,1199,1220,1231,1241],{"__ignoreMap":787},[791,1051,1052,1055,1059,1062,1065,1067,1070,1072,1074],{"class":793,"line":794},[791,1053,1054],{"class":801},"\u003C",[791,1056,1058],{"class":1057},"swJcz","script",[791,1060,1061],{"class":860}," setup",[791,1063,1064],{"class":860}," lang",[791,1066,867],{"class":801},[791,1068,1069],{"class":801},"\"",[791,1071,786],{"class":818},[791,1073,1069],{"class":801},[791,1075,1076],{"class":801},">\n",[791,1078,1079,1081,1083,1086,1088,1091,1094,1096,1098,1101,1103,1105],{"class":793,"line":828},[791,1080,798],{"class":797},[791,1082,802],{"class":801},[791,1084,1085],{"class":805}," badge",[791,1087,954],{"class":801},[791,1089,1090],{"class":797}," type",[791,1092,1093],{"class":805}," BadgeProps",[791,1095,809],{"class":801},[791,1097,812],{"class":797},[791,1099,1100],{"class":801}," \"",[791,1102,819],{"class":818},[791,1104,1069],{"class":801},[791,1106,825],{"class":801},[791,1108,1109],{"class":793,"line":851},[791,1110,854],{"emptyLinePlaceholder":223},[791,1112,1113,1115,1117,1120,1122,1124,1127,1129,1131,1134,1136,1138,1141,1143,1145,1148,1150,1152,1155,1157,1159,1162,1165,1167,1171,1174,1176],{"class":793,"line":857},[791,1114,861],{"class":860},[791,1116,802],{"class":801},[791,1118,1119],{"class":805}," color ",[791,1121,867],{"class":801},[791,1123,1100],{"class":801},[791,1125,1126],{"class":818},"neutral",[791,1128,1069],{"class":801},[791,1130,954],{"class":801},[791,1132,1133],{"class":805}," variant ",[791,1135,867],{"class":801},[791,1137,1100],{"class":801},[791,1139,1140],{"class":818},"solid",[791,1142,1069],{"class":801},[791,1144,954],{"class":801},[791,1146,1147],{"class":805}," size ",[791,1149,867],{"class":801},[791,1151,1100],{"class":801},[791,1153,1154],{"class":818},"sm",[791,1156,1069],{"class":801},[791,1158,809],{"class":801},[791,1160,1161],{"class":801}," =",[791,1163,1164],{"class":870}," defineProps",[791,1166,1054],{"class":801},[791,1168,1170],{"class":1169},"sBMFI","BadgeProps",[791,1172,1173],{"class":801},">",[791,1175,873],{"class":805},[791,1177,825],{"class":801},[791,1179,1180,1183,1185],{"class":793,"line":878},[791,1181,1182],{"class":801},"\u003C\u002F",[791,1184,1058],{"class":1057},[791,1186,1076],{"class":801},[791,1188,1189],{"class":793,"line":883},[791,1190,854],{"emptyLinePlaceholder":223},[791,1192,1193,1195,1197],{"class":793,"line":900},[791,1194,1054],{"class":801},[791,1196,1040],{"class":1057},[791,1198,1076],{"class":801},[791,1200,1201,1204,1206,1209,1211,1213,1216,1218],{"class":793,"line":905},[791,1202,1203],{"class":801},"    \u003C",[791,1205,791],{"class":1057},[791,1207,1208],{"class":860}," :class",[791,1210,867],{"class":801},[791,1212,1069],{"class":801},[791,1214,1215],{"class":818},"badge({ color, variant, size })",[791,1217,1069],{"class":801},[791,1219,1076],{"class":801},[791,1221,1222,1225,1228],{"class":793,"line":1016},[791,1223,1224],{"class":801},"        \u003C",[791,1226,1227],{"class":1057},"slot",[791,1229,1230],{"class":801}," \u002F>\n",[791,1232,1234,1237,1239],{"class":793,"line":1233},10,[791,1235,1236],{"class":801},"    \u003C\u002F",[791,1238,791],{"class":1057},[791,1240,1076],{"class":801},[791,1242,1244,1246,1248],{"class":793,"line":1243},11,[791,1245,1182],{"class":801},[791,1247,1040],{"class":1057},[791,1249,1076],{"class":801},[1040,1251,1252],{"v-slot:react":787},[782,1253,1256],{"className":784,"code":1254,"filename":1255,"language":786,"meta":787,"style":787},"import { badge, type BadgeProps } from \"virtual:styleframe\";\n\nexport function Badge({\n    color = \"neutral\",\n    variant = \"solid\",\n    size = \"sm\",\n    children,\n}: BadgeProps & { children?: React.ReactNode }) {\n    const classes = badge({ color, variant, size });\n\n    return \u003Cspan className={classes}>{children}\u003C\u002Fspan>;\n}\n","src\u002Fcomponents\u002FBadge.tsx",[700,1257,1258,1284,1288,1301,1318,1333,1348,1355,1388,1426,1430,1468],{"__ignoreMap":787},[791,1259,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282],{"class":793,"line":794},[791,1261,798],{"class":797},[791,1263,802],{"class":801},[791,1265,1085],{"class":805},[791,1267,954],{"class":801},[791,1269,1090],{"class":797},[791,1271,1093],{"class":805},[791,1273,809],{"class":801},[791,1275,812],{"class":797},[791,1277,1100],{"class":801},[791,1279,819],{"class":818},[791,1281,1069],{"class":801},[791,1283,825],{"class":801},[791,1285,1286],{"class":793,"line":828},[791,1287,854],{"emptyLinePlaceholder":223},[791,1289,1290,1292,1295,1298],{"class":793,"line":851},[791,1291,908],{"class":797},[791,1293,1294],{"class":860}," function",[791,1296,1297],{"class":870}," Badge",[791,1299,1300],{"class":801},"({\n",[791,1302,1303,1307,1309,1311,1313,1315],{"class":793,"line":857},[791,1304,1306],{"class":1305},"sHdIc","    color",[791,1308,1161],{"class":801},[791,1310,1100],{"class":801},[791,1312,1126],{"class":818},[791,1314,1069],{"class":801},[791,1316,1317],{"class":801},",\n",[791,1319,1320,1323,1325,1327,1329,1331],{"class":793,"line":878},[791,1321,1322],{"class":1305},"    variant",[791,1324,1161],{"class":801},[791,1326,1100],{"class":801},[791,1328,1140],{"class":818},[791,1330,1069],{"class":801},[791,1332,1317],{"class":801},[791,1334,1335,1338,1340,1342,1344,1346],{"class":793,"line":883},[791,1336,1337],{"class":1305},"    size",[791,1339,1161],{"class":801},[791,1341,1100],{"class":801},[791,1343,1154],{"class":818},[791,1345,1069],{"class":801},[791,1347,1317],{"class":801},[791,1349,1350,1353],{"class":793,"line":900},[791,1351,1352],{"class":1305},"    children",[791,1354,1317],{"class":801},[791,1356,1357,1360,1362,1365,1367,1370,1373,1376,1379,1382,1385],{"class":793,"line":905},[791,1358,1359],{"class":801},"}:",[791,1361,1093],{"class":1169},[791,1363,1364],{"class":801}," &",[791,1366,802],{"class":801},[791,1368,1369],{"class":1057}," children",[791,1371,1372],{"class":801},"?:",[791,1374,1375],{"class":1169}," React",[791,1377,1378],{"class":801},".",[791,1380,1381],{"class":1169},"ReactNode",[791,1383,1384],{"class":801}," })",[791,1386,1387],{"class":801}," {\n",[791,1389,1390,1393,1396,1398,1400,1403,1406,1409,1411,1414,1416,1419,1421,1424],{"class":793,"line":1016},[791,1391,1392],{"class":860},"    const",[791,1394,1395],{"class":805}," classes",[791,1397,1161],{"class":801},[791,1399,1085],{"class":870},[791,1401,1402],{"class":1057},"(",[791,1404,1405],{"class":801},"{",[791,1407,1408],{"class":805}," color",[791,1410,954],{"class":801},[791,1412,1413],{"class":805}," variant",[791,1415,954],{"class":801},[791,1417,1418],{"class":805}," size",[791,1420,809],{"class":801},[791,1422,1423],{"class":1057},")",[791,1425,825],{"class":801},[791,1427,1428],{"class":793,"line":1233},[791,1429,854],{"emptyLinePlaceholder":223},[791,1431,1432,1435,1438,1440,1443,1445,1447,1450,1453,1455,1457,1460,1463,1465],{"class":793,"line":1243},[791,1433,1434],{"class":797},"    return",[791,1436,1437],{"class":1057}," \u003C",[791,1439,791],{"class":1169},[791,1441,1442],{"class":1169}," className",[791,1444,867],{"class":1057},[791,1446,1405],{"class":801},[791,1448,1449],{"class":1057},"classes",[791,1451,1452],{"class":801},"}",[791,1454,1173],{"class":1057},[791,1456,1405],{"class":801},[791,1458,1459],{"class":805},"children",[791,1461,1462],{"class":801},"}\u003C\u002F",[791,1464,791],{"class":805},[791,1466,1467],{"class":801},">;\n",[791,1469,1471],{"class":793,"line":1470},12,[791,1472,1473],{"class":801},"}\n",[1040,1475,1476,1482,1574],{"v-slot:other":787},[692,1477,694,1478,1481],{},[700,1479,1480],{},"badge()"," runtime returns a class string. Apply it however your framework binds classes:",[782,1483,1486],{"className":784,"code":1484,"filename":1485,"language":786,"meta":787,"style":787},"import { badge } from \"virtual:styleframe\";\n\nconst classes = badge({ color: \"neutral\", variant: \"solid\", size: \"sm\" });\n\u002F\u002F → \"badge _background:neutral _color:white _padding:xs ...\"\n","src\u002Fcomponents\u002Fbadge.ts",[700,1487,1488,1508,1512,1568],{"__ignoreMap":787},[791,1489,1490,1492,1494,1496,1498,1500,1502,1504,1506],{"class":793,"line":794},[791,1491,798],{"class":797},[791,1493,802],{"class":801},[791,1495,1085],{"class":805},[791,1497,809],{"class":801},[791,1499,812],{"class":797},[791,1501,1100],{"class":801},[791,1503,819],{"class":818},[791,1505,1069],{"class":801},[791,1507,825],{"class":801},[791,1509,1510],{"class":793,"line":828},[791,1511,854],{"emptyLinePlaceholder":223},[791,1513,1514,1516,1519,1521,1523,1525,1527,1529,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566],{"class":793,"line":851},[791,1515,861],{"class":860},[791,1517,1518],{"class":805}," classes ",[791,1520,867],{"class":801},[791,1522,1085],{"class":870},[791,1524,1402],{"class":805},[791,1526,1405],{"class":801},[791,1528,1408],{"class":1057},[791,1530,1531],{"class":801},":",[791,1533,1100],{"class":801},[791,1535,1126],{"class":818},[791,1537,1069],{"class":801},[791,1539,954],{"class":801},[791,1541,1413],{"class":1057},[791,1543,1531],{"class":801},[791,1545,1100],{"class":801},[791,1547,1140],{"class":818},[791,1549,1069],{"class":801},[791,1551,954],{"class":801},[791,1553,1418],{"class":1057},[791,1555,1531],{"class":801},[791,1557,1100],{"class":801},[791,1559,1154],{"class":818},[791,1561,1069],{"class":801},[791,1563,809],{"class":801},[791,1565,1423],{"class":805},[791,1567,825],{"class":801},[791,1569,1570],{"class":793,"line":857},[791,1571,1573],{"class":1572},"sHwdD","\u002F\u002F → \"badge _background:neutral _color:white _padding:xs ...\"\n",[782,1575,1580],{"className":1576,"code":1577,"filename":1578,"language":1579,"meta":787,"style":787},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cspan class=\"badge _background:neutral _color:white _padding:xs ...\">Status\u003C\u002Fspan>\n","src\u002Fcomponents\u002Fbadge.html","html",[700,1581,1582],{"__ignoreMap":787},[791,1583,1584,1586,1588,1591,1593,1595,1598,1600,1602,1605,1607,1609],{"class":793,"line":794},[791,1585,1054],{"class":801},[791,1587,791],{"class":1057},[791,1589,1590],{"class":860}," class",[791,1592,867],{"class":801},[791,1594,1069],{"class":801},[791,1596,1597],{"class":818},"badge _background:neutral _color:white _padding:xs ...",[791,1599,1069],{"class":801},[791,1601,1173],{"class":801},[791,1603,1604],{"class":805},"Status",[791,1606,1182],{"class":801},[791,1608,791],{"class":1057},[791,1610,1076],{"class":801},[766,1612,1614],{"id":1613},"see-it-in-action","See it in action",[1616,1617],"story-preview",{"story":1618,":panel":1619},"theme-recipes-feedback-badge--default","true",[688,1621,195],{"id":1622},"colors",[692,1624,1625,1626,1629,1630,1629,1633,1629,1636,1629,1639,1629,1642,1645,1646,1629,1649,1629,1652,1654],{},"The Badge recipe includes 9 color variants: 6 semantic colors (",[700,1627,1628],{},"primary",", ",[700,1631,1632],{},"secondary",[700,1634,1635],{},"success",[700,1637,1638],{},"info",[700,1640,1641],{},"warning",[700,1643,1644],{},"error",") plus 3 neutral-scale colors (",[700,1647,1648],{},"light",[700,1650,1651],{},"dark",[700,1653,1126],{},"). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations.",[1616,1656],{"story":1657,":panel":1619},"theme-recipes-feedback-badge--success",[1659,1660,1662],"h3",{"id":1661},"color-reference","Color Reference",[1616,1664],{"story":1665},"theme-recipes-feedback-badge--all-variants",[1667,1668,1669,1685],"table",{},[1670,1671,1672],"thead",{},[1673,1674,1675,1679,1682],"tr",{},[1676,1677,1678],"th",{},"Color",[1676,1680,1681],{},"Token",[1676,1683,1684],{},"Use Case",[1686,1687,1688,1703,1717,1731,1745,1759,1773,1791,1805],"tbody",{},[1673,1689,1690,1695,1700],{},[1691,1692,1693],"td",{},[700,1694,1628],{},[1691,1696,1697],{},[700,1698,1699],{},"@color.primary",[1691,1701,1702],{},"Default actions, links, key information",[1673,1704,1705,1709,1714],{},[1691,1706,1707],{},[700,1708,1632],{},[1691,1710,1711],{},[700,1712,1713],{},"@color.secondary",[1691,1715,1716],{},"Secondary information, neutral states",[1673,1718,1719,1723,1728],{},[1691,1720,1721],{},[700,1722,1635],{},[1691,1724,1725],{},[700,1726,1727],{},"@color.success",[1691,1729,1730],{},"Positive states, confirmations, completions",[1673,1732,1733,1737,1742],{},[1691,1734,1735],{},[700,1736,1638],{},[1691,1738,1739],{},[700,1740,1741],{},"@color.info",[1691,1743,1744],{},"Informational messages, tips, highlights",[1673,1746,1747,1751,1756],{},[1691,1748,1749],{},[700,1750,1641],{},[1691,1752,1753],{},[700,1754,1755],{},"@color.warning",[1691,1757,1758],{},"Caution states, pending actions",[1673,1760,1761,1765,1770],{},[1691,1762,1763],{},[700,1764,1644],{},[1691,1766,1767],{},[700,1768,1769],{},"@color.error",[1691,1771,1772],{},"Error states, destructive actions, alerts",[1673,1774,1775,1779,1788],{},[1691,1776,1777],{},[700,1778,1648],{},[1691,1780,1781,1784,1785],{},[700,1782,1783],{},"@color.white"," \u002F ",[700,1786,1787],{},"@color.gray-*",[1691,1789,1790],{},"Light surfaces, stays light in dark mode",[1673,1792,1793,1797,1802],{},[1691,1794,1795],{},[700,1796,1651],{},[1691,1798,1799],{},[700,1800,1801],{},"@color.gray-900",[1691,1803,1804],{},"Dark surfaces, stays dark in light mode",[1673,1806,1807,1811,1814],{},[1691,1808,1809],{},[700,1810,1126],{},[1691,1812,1813],{},"Adaptive (light ↔ dark)",[1691,1815,1816],{},"Default color, adapts to the current color scheme",[1818,1819,1820,1823],"tip",{},[696,1821,1822],{},"Pro tip:"," Use semantic color names that describe purpose, not appearance. This makes it easier to update your palette without touching component code.",[688,1825,1827],{"id":1826},"variants","Variants",[692,1829,1830,1831,1835],{},"Four visual style variants control how the badge is rendered. Each variant is combined with the selected color through ",[705,1832,1834],{"href":1833},"\u002Fdocs\u002Fapi\u002Frecipes#compound-variants","compound variants",", so you always get the correct background, text, and border colors for your chosen color.",[1659,1837,1838],{"id":1140},"Solid",[692,1840,1841],{},"Filled background with light text. The most prominent style, ideal for primary actions and key status indicators.",[1616,1843],{"story":1844,":panel":1619},"theme-recipes-feedback-badge--solid",[1659,1846,1848],{"id":1847},"outline","Outline",[692,1850,1851],{},"Transparent background with colored border and text. Useful for secondary indicators that shouldn't dominate the visual hierarchy.",[1616,1853],{"story":1854,":panel":1619},"theme-recipes-feedback-badge--outline",[1659,1856,1858],{"id":1857},"soft","Soft",[692,1860,1861],{},"Light tinted background with colored text. A subtle but visible style that works well for categorization and tags.",[1616,1863],{"story":1864,":panel":1619},"theme-recipes-feedback-badge--soft",[1659,1866,1868],{"id":1867},"subtle","Subtle",[692,1870,1871,1872,1874,1875,1378],{},"Light tinted background with colored text and a matching border. Combines the softness of the ",[700,1873,1857],{}," variant with the definition of ",[700,1876,1847],{},[1616,1878],{"story":1879,":panel":1619},"theme-recipes-feedback-badge--subtle",[688,1881,1883],{"id":1882},"sizes","Sizes",[692,1885,1886,1887,1890,1891,1894],{},"Five size variants from ",[700,1888,1889],{},"xs"," to ",[700,1892,1893],{},"xl"," control the font size, padding, gap, and border radius of the badge.",[1616,1896],{"story":1897,":panel":1619},"theme-recipes-feedback-badge--extra-large",[1659,1899,1901],{"id":1900},"size-reference","Size Reference",[1616,1903],{"story":1904},"theme-recipes-feedback-badge--all-sizes",[1667,1906,1907,1920],{},[1670,1908,1909],{},[1673,1910,1911,1914,1917],{},[1676,1912,1913],{},"Size",[1676,1915,1916],{},"Font Size",[1676,1918,1919],{},"Border Radius",[1686,1921,1922,1938,1954,1970,1986],{},[1673,1923,1924,1928,1933],{},[1691,1925,1926],{},[700,1927,1889],{},[1691,1929,1930],{},[700,1931,1932],{},"@font-size.2xs",[1691,1934,1935],{},[700,1936,1937],{},"@border-radius.sm",[1673,1939,1940,1944,1949],{},[1691,1941,1942],{},[700,1943,1154],{},[1691,1945,1946],{},[700,1947,1948],{},"@font-size.xs",[1691,1950,1951],{},[700,1952,1953],{},"@border-radius.md",[1673,1955,1956,1961,1966],{},[1691,1957,1958],{},[700,1959,1960],{},"md",[1691,1962,1963],{},[700,1964,1965],{},"@font-size.sm",[1691,1967,1968],{},[700,1969,1953],{},[1673,1971,1972,1977,1982],{},[1691,1973,1974],{},[700,1975,1976],{},"lg",[1691,1978,1979],{},[700,1980,1981],{},"@font-size.md",[1691,1983,1984],{},[700,1985,1953],{},[1673,1987,1988,1992,1997],{},[1691,1989,1990],{},[700,1991,1893],{},[1691,1993,1994],{},[700,1995,1996],{},"@font-size.lg",[1691,1998,1999],{},[700,2000,2001],{},"@border-radius.lg",[688,2003,568],{"id":2004},"accessibility",[724,2006,2007],{},[727,2008,2009,2012,2013,2019],{},[696,2010,2011],{},"Pair color with text labels."," Don't rely on color alone to convey meaning (",[705,2014,2018],{"href":2015,"rel":2016},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fuse-of-color.html",[2017],"nofollow","WCAG 1.4.1","). Always include a descriptive label like \"Active\" or \"Error\".",[782,2021,2023],{"className":1576,"code":2022,"language":1579,"meta":787,"style":787},"\u003C!-- Correct: color + descriptive text label -->\n\u003CBadge color=\"success\" variant=\"soft\">Active\u003C\u002FBadge>\n\u003CBadge color=\"error\" variant=\"soft\">Error\u003C\u002FBadge>\n\n\u003C!-- Avoid: color alone with ambiguous text -->\n\u003CBadge color=\"success\" variant=\"solid\">3\u003C\u002FBadge>\n",[700,2024,2025,2030,2067,2104,2108,2113],{"__ignoreMap":787},[791,2026,2027],{"class":793,"line":794},[791,2028,2029],{"class":1572},"\u003C!-- Correct: color + descriptive text label -->\n",[791,2031,2032,2034,2036,2038,2040,2042,2044,2046,2048,2050,2052,2054,2056,2058,2061,2063,2065],{"class":793,"line":828},[791,2033,1054],{"class":801},[791,2035,404],{"class":1057},[791,2037,1408],{"class":860},[791,2039,867],{"class":801},[791,2041,1069],{"class":801},[791,2043,1635],{"class":818},[791,2045,1069],{"class":801},[791,2047,1413],{"class":860},[791,2049,867],{"class":801},[791,2051,1069],{"class":801},[791,2053,1857],{"class":818},[791,2055,1069],{"class":801},[791,2057,1173],{"class":801},[791,2059,2060],{"class":805},"Active",[791,2062,1182],{"class":801},[791,2064,404],{"class":1057},[791,2066,1076],{"class":801},[791,2068,2069,2071,2073,2075,2077,2079,2081,2083,2085,2087,2089,2091,2093,2095,2098,2100,2102],{"class":793,"line":851},[791,2070,1054],{"class":801},[791,2072,404],{"class":1057},[791,2074,1408],{"class":860},[791,2076,867],{"class":801},[791,2078,1069],{"class":801},[791,2080,1644],{"class":818},[791,2082,1069],{"class":801},[791,2084,1413],{"class":860},[791,2086,867],{"class":801},[791,2088,1069],{"class":801},[791,2090,1857],{"class":818},[791,2092,1069],{"class":801},[791,2094,1173],{"class":801},[791,2096,2097],{"class":805},"Error",[791,2099,1182],{"class":801},[791,2101,404],{"class":1057},[791,2103,1076],{"class":801},[791,2105,2106],{"class":793,"line":857},[791,2107,854],{"emptyLinePlaceholder":223},[791,2109,2110],{"class":793,"line":878},[791,2111,2112],{"class":1572},"\u003C!-- Avoid: color alone with ambiguous text -->\n",[791,2114,2115,2117,2119,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2144,2146,2148],{"class":793,"line":883},[791,2116,1054],{"class":801},[791,2118,404],{"class":1057},[791,2120,1408],{"class":860},[791,2122,867],{"class":801},[791,2124,1069],{"class":801},[791,2126,1635],{"class":818},[791,2128,1069],{"class":801},[791,2130,1413],{"class":860},[791,2132,867],{"class":801},[791,2134,1069],{"class":801},[791,2136,1140],{"class":818},[791,2138,1069],{"class":801},[791,2140,1173],{"class":801},[791,2142,2143],{"class":805},"3",[791,2145,1182],{"class":801},[791,2147,404],{"class":1057},[791,2149,1076],{"class":801},[724,2151,2152],{},[727,2153,2154,2157,2158,2160,2161,1378],{},[696,2155,2156],{},"Verify contrast ratios."," The ",[700,2159,1140],{}," variant places light text on a colored background. Default tokens meet WCAG AA 4.5:1 contrast. If you override colors, verify with the ",[705,2162,2165],{"href":2163,"rel":2164},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[2017],"WebAIM Contrast Checker",[1818,2167,2168,2171,2172,2175,2176,2178,2179,2181,2182,2184],{},[696,2169,2170],{},"Good practice:"," When badges appear next to each other in a list or table, use the ",[700,2173,2174],{},"variant"," prop to create visual hierarchy rather than relying solely on color differences. For example, use ",[700,2177,1140],{}," for the primary status and ",[700,2180,1857],{}," or ",[700,2183,1847],{}," for secondary information.",[688,2186,2188],{"id":2187},"customization","Customization",[1659,2190,2192],{"id":2191},"overriding-defaults","Overriding Defaults",[692,2194,694,2195,2197],{},[700,2196,702],{}," composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[782,2199,2201],{"className":784,"code":2200,"filename":780,"language":786,"meta":787,"style":787},"import { styleframe } from 'virtual:styleframe';\nimport { useBadgeRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst badge = useBadgeRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.full',\n    },\n    defaultVariants: {\n        color: 'success',\n        variant: 'soft',\n        size: 'md',\n    },\n});\n\nexport default s;\n",[700,2202,2203,2223,2243,2247,2261,2265,2282,2291,2307,2312,2321,2336,2351,2367,2372,2381,2386],{"__ignoreMap":787},[791,2204,2205,2207,2209,2211,2213,2215,2217,2219,2221],{"class":793,"line":794},[791,2206,798],{"class":797},[791,2208,802],{"class":801},[791,2210,806],{"class":805},[791,2212,809],{"class":801},[791,2214,812],{"class":797},[791,2216,815],{"class":801},[791,2218,819],{"class":818},[791,2220,822],{"class":801},[791,2222,825],{"class":801},[791,2224,2225,2227,2229,2231,2233,2235,2237,2239,2241],{"class":793,"line":828},[791,2226,798],{"class":797},[791,2228,802],{"class":801},[791,2230,835],{"class":805},[791,2232,809],{"class":801},[791,2234,812],{"class":797},[791,2236,815],{"class":801},[791,2238,844],{"class":818},[791,2240,822],{"class":801},[791,2242,825],{"class":801},[791,2244,2245],{"class":793,"line":851},[791,2246,854],{"emptyLinePlaceholder":223},[791,2248,2249,2251,2253,2255,2257,2259],{"class":793,"line":857},[791,2250,861],{"class":860},[791,2252,864],{"class":805},[791,2254,867],{"class":801},[791,2256,806],{"class":870},[791,2258,873],{"class":805},[791,2260,825],{"class":801},[791,2262,2263],{"class":793,"line":878},[791,2264,854],{"emptyLinePlaceholder":223},[791,2266,2267,2269,2271,2273,2275,2278,2280],{"class":793,"line":883},[791,2268,861],{"class":860},[791,2270,888],{"class":805},[791,2272,867],{"class":801},[791,2274,835],{"class":870},[791,2276,2277],{"class":805},"(s",[791,2279,954],{"class":801},[791,2281,1387],{"class":801},[791,2283,2284,2287,2289],{"class":793,"line":900},[791,2285,2286],{"class":1057},"    base",[791,2288,1531],{"class":801},[791,2290,1387],{"class":801},[791,2292,2293,2296,2298,2300,2303,2305],{"class":793,"line":905},[791,2294,2295],{"class":1057},"        borderRadius",[791,2297,1531],{"class":801},[791,2299,815],{"class":801},[791,2301,2302],{"class":818},"@border-radius.full",[791,2304,822],{"class":801},[791,2306,1317],{"class":801},[791,2308,2309],{"class":793,"line":1016},[791,2310,2311],{"class":801},"    },\n",[791,2313,2314,2317,2319],{"class":793,"line":1233},[791,2315,2316],{"class":1057},"    defaultVariants",[791,2318,1531],{"class":801},[791,2320,1387],{"class":801},[791,2322,2323,2326,2328,2330,2332,2334],{"class":793,"line":1243},[791,2324,2325],{"class":1057},"        color",[791,2327,1531],{"class":801},[791,2329,815],{"class":801},[791,2331,1635],{"class":818},[791,2333,822],{"class":801},[791,2335,1317],{"class":801},[791,2337,2338,2341,2343,2345,2347,2349],{"class":793,"line":1470},[791,2339,2340],{"class":1057},"        variant",[791,2342,1531],{"class":801},[791,2344,815],{"class":801},[791,2346,1857],{"class":818},[791,2348,822],{"class":801},[791,2350,1317],{"class":801},[791,2352,2354,2357,2359,2361,2363,2365],{"class":793,"line":2353},13,[791,2355,2356],{"class":1057},"        size",[791,2358,1531],{"class":801},[791,2360,815],{"class":801},[791,2362,1960],{"class":818},[791,2364,822],{"class":801},[791,2366,1317],{"class":801},[791,2368,2370],{"class":793,"line":2369},14,[791,2371,2311],{"class":801},[791,2373,2375,2377,2379],{"class":793,"line":2374},15,[791,2376,1452],{"class":801},[791,2378,1423],{"class":805},[791,2380,825],{"class":801},[791,2382,2384],{"class":793,"line":2383},16,[791,2385,854],{"emptyLinePlaceholder":223},[791,2387,2389,2391,2393,2395],{"class":793,"line":2388},17,[791,2390,908],{"class":797},[791,2392,911],{"class":797},[791,2394,914],{"class":805},[791,2396,825],{"class":801},[1659,2398,2400],{"id":2399},"filtering-variants","Filtering Variants",[692,2402,2403,2404,2407],{},"If you only need a subset of the available variants, use the ",[700,2405,2406],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[782,2409,2411],{"className":784,"code":2410,"filename":780,"language":786,"meta":787,"style":787},"import { styleframe } from 'virtual:styleframe';\nimport { useBadgeRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate primary and error colors, with solid and outline styles\nconst badge = useBadgeRecipe(s, {\n    filter: {\n        color: ['primary', 'error'],\n        variant: ['solid', 'outline'],\n    },\n});\n\nexport default s;\n",[700,2412,2413,2433,2453,2457,2471,2475,2480,2496,2505,2533,2559,2563,2571,2575],{"__ignoreMap":787},[791,2414,2415,2417,2419,2421,2423,2425,2427,2429,2431],{"class":793,"line":794},[791,2416,798],{"class":797},[791,2418,802],{"class":801},[791,2420,806],{"class":805},[791,2422,809],{"class":801},[791,2424,812],{"class":797},[791,2426,815],{"class":801},[791,2428,819],{"class":818},[791,2430,822],{"class":801},[791,2432,825],{"class":801},[791,2434,2435,2437,2439,2441,2443,2445,2447,2449,2451],{"class":793,"line":828},[791,2436,798],{"class":797},[791,2438,802],{"class":801},[791,2440,835],{"class":805},[791,2442,809],{"class":801},[791,2444,812],{"class":797},[791,2446,815],{"class":801},[791,2448,844],{"class":818},[791,2450,822],{"class":801},[791,2452,825],{"class":801},[791,2454,2455],{"class":793,"line":851},[791,2456,854],{"emptyLinePlaceholder":223},[791,2458,2459,2461,2463,2465,2467,2469],{"class":793,"line":857},[791,2460,861],{"class":860},[791,2462,864],{"class":805},[791,2464,867],{"class":801},[791,2466,806],{"class":870},[791,2468,873],{"class":805},[791,2470,825],{"class":801},[791,2472,2473],{"class":793,"line":878},[791,2474,854],{"emptyLinePlaceholder":223},[791,2476,2477],{"class":793,"line":883},[791,2478,2479],{"class":1572},"\u002F\u002F Only generate primary and error colors, with solid and outline styles\n",[791,2481,2482,2484,2486,2488,2490,2492,2494],{"class":793,"line":900},[791,2483,861],{"class":860},[791,2485,888],{"class":805},[791,2487,867],{"class":801},[791,2489,835],{"class":870},[791,2491,2277],{"class":805},[791,2493,954],{"class":801},[791,2495,1387],{"class":801},[791,2497,2498,2501,2503],{"class":793,"line":905},[791,2499,2500],{"class":1057},"    filter",[791,2502,1531],{"class":801},[791,2504,1387],{"class":801},[791,2506,2507,2509,2511,2514,2516,2518,2520,2522,2524,2526,2528,2531],{"class":793,"line":1016},[791,2508,2325],{"class":1057},[791,2510,1531],{"class":801},[791,2512,2513],{"class":805}," [",[791,2515,822],{"class":801},[791,2517,1628],{"class":818},[791,2519,822],{"class":801},[791,2521,954],{"class":801},[791,2523,815],{"class":801},[791,2525,1644],{"class":818},[791,2527,822],{"class":801},[791,2529,2530],{"class":805},"]",[791,2532,1317],{"class":801},[791,2534,2535,2537,2539,2541,2543,2545,2547,2549,2551,2553,2555,2557],{"class":793,"line":1233},[791,2536,2340],{"class":1057},[791,2538,1531],{"class":801},[791,2540,2513],{"class":805},[791,2542,822],{"class":801},[791,2544,1140],{"class":818},[791,2546,822],{"class":801},[791,2548,954],{"class":801},[791,2550,815],{"class":801},[791,2552,1847],{"class":818},[791,2554,822],{"class":801},[791,2556,2530],{"class":805},[791,2558,1317],{"class":801},[791,2560,2561],{"class":793,"line":1243},[791,2562,2311],{"class":801},[791,2564,2565,2567,2569],{"class":793,"line":1470},[791,2566,1452],{"class":801},[791,2568,1423],{"class":805},[791,2570,825],{"class":801},[791,2572,2573],{"class":793,"line":2353},[791,2574,854],{"emptyLinePlaceholder":223},[791,2576,2577,2579,2581,2583],{"class":793,"line":2369},[791,2578,908],{"class":797},[791,2580,911],{"class":797},[791,2582,914],{"class":805},[791,2584,825],{"class":801},[2586,2587,2588,2591],"note",{},[696,2589,2590],{},"Good to know:"," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,2593,73],{"id":2594},"api-reference",[1659,2596,2598],{"id":2597},"usebadgerecipes-options",[700,2599,2600],{},"useBadgeRecipe(s, options?)",[692,2602,2603],{},"Creates a full badge recipe with all variants and compound variant styling.",[692,2605,2606],{},[696,2607,2608],{},"Parameters:",[1667,2610,2611,2624],{},[1670,2612,2613],{},[1673,2614,2615,2618,2621],{},[1676,2616,2617],{},"Parameter",[1676,2619,2620],{},"Type",[1676,2622,2623],{},"Description",[1686,2625,2626,2641,2656,2671,2685,2700,2715],{},[1673,2627,2628,2633,2638],{},[1691,2629,2630],{},[700,2631,2632],{},"s",[1691,2634,2635],{},[700,2636,2637],{},"Styleframe",[1691,2639,2640],{},"The Styleframe instance",[1673,2642,2643,2648,2653],{},[1691,2644,2645],{},[700,2646,2647],{},"options",[1691,2649,2650],{},[700,2651,2652],{},"DeepPartial\u003CRecipeConfig>",[1691,2654,2655],{},"Optional overrides for the recipe configuration",[1673,2657,2658,2663,2668],{},[1691,2659,2660],{},[700,2661,2662],{},"options.base",[1691,2664,2665],{},[700,2666,2667],{},"VariantDeclarationsBlock",[1691,2669,2670],{},"Custom base styles for the badge",[1673,2672,2673,2678,2682],{},[1691,2674,2675],{},[700,2676,2677],{},"options.variants",[1691,2679,2680],{},[700,2681,1827],{},[1691,2683,2684],{},"Custom variant definitions for the recipe",[1673,2686,2687,2692,2697],{},[1691,2688,2689],{},[700,2690,2691],{},"options.defaultVariants",[1691,2693,2694],{},[700,2695,2696],{},"Record\u003Ckeyof Variants, string>",[1691,2698,2699],{},"Default variant values for the recipe",[1673,2701,2702,2707,2712],{},[1691,2703,2704],{},[700,2705,2706],{},"options.compoundVariants",[1691,2708,2709],{},[700,2710,2711],{},"CompoundVariant[]",[1691,2713,2714],{},"Custom compound variant definitions for the recipe",[1673,2716,2717,2722,2727],{},[1691,2718,2719],{},[700,2720,2721],{},"options.filter",[1691,2723,2724],{},[700,2725,2726],{},"Record\u003Cstring, string[]>",[1691,2728,2729],{},"Limit which variant values are generated",[692,2731,2732],{},[696,2733,2734],{},"Variants:",[1667,2736,2737,2750],{},[1670,2738,2739],{},[1673,2740,2741,2744,2747],{},[1676,2742,2743],{},"Variant",[1676,2745,2746],{},"Options",[1676,2748,2749],{},"Default",[1686,2751,2752,2783,2803],{},[1673,2753,2754,2759,2779],{},[1691,2755,2756],{},[700,2757,2758],{},"color",[1691,2760,2761,1629,2763,1629,2765,1629,2767,1629,2769,1629,2771,1629,2773,1629,2775,1629,2777],{},[700,2762,1628],{},[700,2764,1632],{},[700,2766,1635],{},[700,2768,1638],{},[700,2770,1641],{},[700,2772,1644],{},[700,2774,1648],{},[700,2776,1651],{},[700,2778,1126],{},[1691,2780,2781],{},[700,2782,1126],{},[1673,2784,2785,2789,2799],{},[1691,2786,2787],{},[700,2788,2174],{},[1691,2790,2791,1629,2793,1629,2795,1629,2797],{},[700,2792,1140],{},[700,2794,1847],{},[700,2796,1857],{},[700,2798,1867],{},[1691,2800,2801],{},[700,2802,1140],{},[1673,2804,2805,2810,2822],{},[1691,2806,2807],{},[700,2808,2809],{},"size",[1691,2811,2812,1629,2814,1629,2816,1629,2818,1629,2820],{},[700,2813,1889],{},[700,2815,1154],{},[700,2817,1960],{},[700,2819,1976],{},[700,2821,1893],{},[1691,2823,2824],{},[700,2825,1154],{},[692,2827,2828],{},[705,2829,2830],{"href":132},"Learn more about recipes →",[688,2832,2834],{"id":2833},"best-practices","Best Practices",[724,2836,2837,2849,2855,2869,2878,2888],{},[727,2838,2839,2842,2843,2845,2846,2848],{},[696,2840,2841],{},"Choose colors by meaning, not appearance",": Use ",[700,2844,1635],{}," for positive states and ",[700,2847,1644],{}," for errors — this keeps your UI consistent when tokens change.",[727,2850,2851,2854],{},[696,2852,2853],{},"Stick to one or two sizes per context",": Mixing too many sizes in the same area creates visual noise. Pick a default size and use alternatives sparingly.",[727,2856,2857,2865,2866,2868],{},[696,2858,2859,2860,2181,2862,2864],{},"Prefer ",[700,2861,1857],{},[700,2863,1867],{}," for dense layouts",": Solid badges can be overwhelming when there are many on screen. Reserve ",[700,2867,1140],{}," for high-importance items.",[727,2870,2871,2874,2875,2877],{},[696,2872,2873],{},"Filter what you don't need",": If your component only uses a few colors, pass a ",[700,2876,2406],{}," option to reduce generated CSS.",[727,2879,2880,2883,2884,2887],{},[696,2881,2882],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[700,2885,2886],{},"defaultVariants"," so component consumers write less code.",[727,2889,2890,2893],{},[696,2891,2892],{},"Pair color with text",": Badges should not rely on color alone to convey meaning. Always include a descriptive label so the information is accessible to users who cannot distinguish colors.",[688,2895,2897],{"id":2896},"faq","FAQ",[2899,2900,2901,2937,3179,3192,3211,3224],"accordion",{},[2902,2903,2906,2932],"accordion-item",{"icon":2904,"label":2905},"i-lucide-circle-help","How do compound variants work in the Badge recipe?",[692,2907,2908,2909,2911,2912,2914,2915,2911,2917,2919,2920,2914,2923,2926,2927,2914,2929,2931],{},"The Badge recipe uses compound variants to map each color-variant combination to specific styles. For example, when ",[700,2910,2758],{}," is ",[700,2913,1628],{}," and ",[700,2916,2174],{},[700,2918,1140],{},", the compound variant applies ",[700,2921,2922],{},"background: @color.primary",[700,2924,2925],{},"color: @color.light",". This approach keeps the individual ",[700,2928,2758],{},[700,2930,2174],{}," definitions clean while handling all 36 combinations (9 colors × 4 variants) automatically.",[692,2933,2934],{},[705,2935,2936],{"href":1833},"Learn more about compound variants →",[2902,2938,2940,2950],{"icon":2904,"label":2939},"Can I add custom colors beyond the default six?",[692,2941,2942,2943,2914,2946,2949],{},"Yes. Override the ",[700,2944,2945],{},"variants.color",[700,2947,2948],{},"compoundVariants"," options to add new colors. You'll need to define the empty color variant and add compound variants for each visual style:",[782,2951,2953],{"className":784,"code":2952,"filename":780,"language":786,"meta":787,"style":787},"const badge = useBadgeRecipe(s, {\n    variants: {\n        color: {\n            brand: {},\n        },\n    },\n    compoundVariants: [\n        { match: { color: 'brand', variant: 'solid' }, css: { background: '@color.brand', color: '@color.light' } },\n        { match: { color: 'brand', variant: 'outline' }, css: { color: '@color.brand', borderColor: '@color.brand' } },\n        \u002F\u002F ... soft and subtle\n    ],\n});\n",[700,2954,2955,2971,2980,2988,2998,3003,3007,3017,3092,3159,3164,3171],{"__ignoreMap":787},[791,2956,2957,2959,2961,2963,2965,2967,2969],{"class":793,"line":794},[791,2958,861],{"class":860},[791,2960,888],{"class":805},[791,2962,867],{"class":801},[791,2964,835],{"class":870},[791,2966,2277],{"class":805},[791,2968,954],{"class":801},[791,2970,1387],{"class":801},[791,2972,2973,2976,2978],{"class":793,"line":828},[791,2974,2975],{"class":1057},"    variants",[791,2977,1531],{"class":801},[791,2979,1387],{"class":801},[791,2981,2982,2984,2986],{"class":793,"line":851},[791,2983,2325],{"class":1057},[791,2985,1531],{"class":801},[791,2987,1387],{"class":801},[791,2989,2990,2993,2995],{"class":793,"line":857},[791,2991,2992],{"class":1057},"            brand",[791,2994,1531],{"class":801},[791,2996,2997],{"class":801}," {},\n",[791,2999,3000],{"class":793,"line":878},[791,3001,3002],{"class":801},"        },\n",[791,3004,3005],{"class":793,"line":883},[791,3006,2311],{"class":801},[791,3008,3009,3012,3014],{"class":793,"line":900},[791,3010,3011],{"class":1057},"    compoundVariants",[791,3013,1531],{"class":801},[791,3015,3016],{"class":805}," [\n",[791,3018,3019,3022,3025,3027,3029,3031,3033,3035,3038,3040,3042,3044,3046,3048,3050,3052,3055,3058,3060,3062,3065,3067,3069,3072,3074,3076,3078,3080,3082,3085,3087,3089],{"class":793,"line":905},[791,3020,3021],{"class":801},"        {",[791,3023,3024],{"class":1057}," match",[791,3026,1531],{"class":801},[791,3028,802],{"class":801},[791,3030,1408],{"class":1057},[791,3032,1531],{"class":801},[791,3034,815],{"class":801},[791,3036,3037],{"class":818},"brand",[791,3039,822],{"class":801},[791,3041,954],{"class":801},[791,3043,1413],{"class":1057},[791,3045,1531],{"class":801},[791,3047,815],{"class":801},[791,3049,1140],{"class":818},[791,3051,822],{"class":801},[791,3053,3054],{"class":801}," },",[791,3056,3057],{"class":1057}," css",[791,3059,1531],{"class":801},[791,3061,802],{"class":801},[791,3063,3064],{"class":1057}," background",[791,3066,1531],{"class":801},[791,3068,815],{"class":801},[791,3070,3071],{"class":818},"@color.brand",[791,3073,822],{"class":801},[791,3075,954],{"class":801},[791,3077,1408],{"class":1057},[791,3079,1531],{"class":801},[791,3081,815],{"class":801},[791,3083,3084],{"class":818},"@color.light",[791,3086,822],{"class":801},[791,3088,809],{"class":801},[791,3090,3091],{"class":801}," },\n",[791,3093,3094,3096,3098,3100,3102,3104,3106,3108,3110,3112,3114,3116,3118,3120,3122,3124,3126,3128,3130,3132,3134,3136,3138,3140,3142,3144,3147,3149,3151,3153,3155,3157],{"class":793,"line":1016},[791,3095,3021],{"class":801},[791,3097,3024],{"class":1057},[791,3099,1531],{"class":801},[791,3101,802],{"class":801},[791,3103,1408],{"class":1057},[791,3105,1531],{"class":801},[791,3107,815],{"class":801},[791,3109,3037],{"class":818},[791,3111,822],{"class":801},[791,3113,954],{"class":801},[791,3115,1413],{"class":1057},[791,3117,1531],{"class":801},[791,3119,815],{"class":801},[791,3121,1847],{"class":818},[791,3123,822],{"class":801},[791,3125,3054],{"class":801},[791,3127,3057],{"class":1057},[791,3129,1531],{"class":801},[791,3131,802],{"class":801},[791,3133,1408],{"class":1057},[791,3135,1531],{"class":801},[791,3137,815],{"class":801},[791,3139,3071],{"class":818},[791,3141,822],{"class":801},[791,3143,954],{"class":801},[791,3145,3146],{"class":1057}," borderColor",[791,3148,1531],{"class":801},[791,3150,815],{"class":801},[791,3152,3071],{"class":818},[791,3154,822],{"class":801},[791,3156,809],{"class":801},[791,3158,3091],{"class":801},[791,3160,3161],{"class":793,"line":1233},[791,3162,3163],{"class":1572},"        \u002F\u002F ... soft and subtle\n",[791,3165,3166,3169],{"class":793,"line":1243},[791,3167,3168],{"class":805},"    ]",[791,3170,1317],{"class":801},[791,3172,3173,3175,3177],{"class":793,"line":1470},[791,3174,1452],{"class":801},[791,3176,1423],{"class":805},[791,3178,825],{"class":801},[2902,3180,3182,3183,3185,3186,3188,3189,3191],{"icon":2904,"label":3181},"What's the difference between the soft and subtle variants?","Both use a light tinted background with colored text. The difference is that ",[700,3184,1867],{}," also adds a matching colored border, giving the badge more visual definition. Use ",[700,3187,1857],{}," when you want a gentler appearance, and ",[700,3190,1867],{}," when the badge needs slightly more structure.",[2902,3193,3195,3196,3198,3199,3201,3202,3205,3206,2181,3208,3210],{"icon":2904,"label":3194},"How does filtering affect compound variants?","When you use the ",[700,3197,2406],{}," option, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[700,3200,2174],{}," to only ",[700,3203,3204],{},"['solid', 'outline']",", all compound variants matching ",[700,3207,1857],{},[700,3209,1867],{}," are excluded from the generated output. Default variants are also adjusted if they reference a removed value.",[2902,3212,3214,3215,3217,3218,3220,3221,1378],{"icon":2904,"label":3213},"How do I ensure badges are accessible?","Follow WCAG 1.4.1 by never relying on color alone to convey information. Always include a descriptive text label inside the badge. All default ",[700,3216,1140],{}," variant colors meet the WCAG AA 4.5:1 contrast ratio for normal text against ",[700,3219,3084],{},". If you customize colors, verify contrast using a tool like ",[705,3222,2165],{"href":2163,"rel":3223},[2017],[2902,3225,3227,3228,1629,3230,3232,3233,3236,3237,3240],{"icon":2904,"label":3226},"Can I use the Badge recipe without the design tokens preset?","The Badge recipe references design tokens like ",[700,3229,1699],{},[700,3231,1948],{},", and ",[700,3234,3235],{},"@spacing.sm"," 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 ",[700,3238,3239],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[3242,3243,3244],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":787,"searchDepth":828,"depth":828,"links":3246},[3247,3248,3249,3250,3253,3259,3262,3263,3267,3270,3271],{"id":690,"depth":828,"text":78},{"id":718,"depth":828,"text":719},{"id":759,"depth":828,"text":760},{"id":1622,"depth":828,"text":195,"children":3251},[3252],{"id":1661,"depth":851,"text":1662},{"id":1826,"depth":828,"text":1827,"children":3254},[3255,3256,3257,3258],{"id":1140,"depth":851,"text":1838},{"id":1847,"depth":851,"text":1848},{"id":1857,"depth":851,"text":1858},{"id":1867,"depth":851,"text":1868},{"id":1882,"depth":828,"text":1883,"children":3260},[3261],{"id":1900,"depth":851,"text":1901},{"id":2004,"depth":828,"text":568},{"id":2187,"depth":828,"text":2188,"children":3264},[3265,3266],{"id":2191,"depth":851,"text":2192},{"id":2399,"depth":851,"text":2400},{"id":2594,"depth":828,"text":73,"children":3268},[3269],{"id":2597,"depth":851,"text":2600},{"id":2833,"depth":828,"text":2834},{"id":2896,"depth":828,"text":2897},"A compact labeling component for status indicators, counts, and categorization. Supports multiple colors, visual styles, and sizes through the recipe system.",null,{},{"icon":7},{"title":404,"description":3272},"DI6B9pu1dSkTUtboRU7eybAUN9aYFwkiwt4H3ftocBw",[3279,3281],{"title":396,"path":397,"stem":398,"description":3280,"icon":7,"children":-1},"An accessible tabbed interface for organizing content into selectable panels. Composed of a root wrapper, a tab list, individual triggers, and content panels — with line, pill, and soft styles, light\u002Fdark\u002Fneutral surfaces, three sizes, and horizontal or vertical orientation.",{"title":408,"path":409,"stem":410,"description":3282,"icon":7,"children":-1},"A contextual feedback component for alerts, notifications, and inline messages. Supports multiple colors, visual styles, sizes, and orientations through the recipe system.",1781596334543]