[{"data":1,"prerenderedAt":4616},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-tabs":682,"-docs-theme-components-tabs-surround":4611},{"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":396,"body":684,"description":4605,"extension":1973,"links":4606,"meta":4607,"navigation":4608,"path":397,"seo":4609,"stem":398,"__hash__":4610},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs.md",{"type":685,"value":686,"toc":4573},"minimark",[687,691,733,744,748,751,802,806,2883,2886,2898,2903,2906,2911,2914,2978,2988,2992,3000,3003,3006,3009,3013,3016,3019,3023,3026,3029,3033,3044,3047,3051,3054,3143,3154,3158,3166,3169,3177,3180,3183,3231,3235,3238,3321,3528,3544,3547,3617,3621,3625,3628,3908,3912,3919,4086,4091,4094,4100,4103,4108,4160,4166,4169,4173,4257,4263,4269,4273,4357,4363,4366,4370,4402,4407,4411,4470,4474,4569],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,707,708,711,712,715,716,719,720,723,724,727,728,732],"p",{},"The ",[696,697,396],"strong",{}," component organizes related content into a set of panels, one of which is visible at a time. It is composed of four recipe parts: ",[700,701,702],"code",{},"useTabsRecipe()"," for the root wrapper that lays out the bar and the active panel, ",[700,705,706],{},"useTabsListRecipe()"," for the tab list (",[700,709,710],{},"role=\"tablist\"","), ",[700,713,714],{},"useTabsTriggerRecipe()"," for each individual tab button (",[700,717,718],{},"role=\"tab\"","), and ",[700,721,722],{},"useTabsContentRecipe()"," for the content panels (",[700,725,726],{},"role=\"tabpanel\"","). Each composable creates a fully configured ",[729,730,731],"a",{"href":132},"recipe"," with compound variants that handle the color-variant combinations — including the active-tab indicator and dark mode overrides — automatically.",[692,734,735,736,739,740,743],{},"The active tab is matched through the ",[700,737,738],{},"aria-selected"," attribute, so the selected styling is driven by accessible markup rather than an extra class. The Tabs recipes integrate directly with the default ",[729,741,742],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[688,745,747],{"id":746},"why-use-the-tabs-recipe","Why use the Tabs recipe?",[692,749,750],{},"The Tabs recipe helps you:",[752,753,754,761,778,784,790,796],"ul",{},[755,756,757,760],"li",{},[696,758,759],{},"Ship faster with sensible defaults",": Get 3 styles, 3 surfaces, 3 sizes, and 2 orientations out of the box with a single set of composable calls.",[755,762,763,766,767,770,771,770,774,777],{},[696,764,765],{},"Compose an accessible structure",": Four coordinated recipes (root, list, trigger, content) map cleanly onto the ",[700,768,769],{},"tablist"," \u002F ",[700,772,773],{},"tab",[700,775,776],{},"tabpanel"," roles.",[755,779,780,783],{},[696,781,782],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same rules, including the active indicator and dark mode overrides.",[755,785,786,789],{},[696,787,788],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[755,791,792,795],{},[696,793,794],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, size, or orientation values at compile time.",[755,797,798,801],{},[696,799,800],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[688,803,805],{"id":804},"usage","Usage",[807,808,810,815,822,1156,1160,1181,2875,2879],"steps",{"level":809},"4",[811,812,814],"h4",{"id":813},"register-the-recipes","Register the recipes",[692,816,817,818,821],{},"Add the Tabs recipes to a local Styleframe instance. The global ",[700,819,820],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[823,824,826,1049],"code-tree",{"default-value":825},"src\u002Fcomponents\u002Ftabs.styleframe.ts",[827,828,833],"pre",{"className":829,"code":830,"filename":825,"language":831,"meta":832,"style":832},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useTabsRecipe,\n    useTabsListRecipe,\n    useTabsTriggerRecipe,\n    useTabsContentRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst tabs = useTabsRecipe(s);\nconst tabsList = useTabsListRecipe(s);\nconst tabsTrigger = useTabsTriggerRecipe(s);\nconst tabsContent = useTabsContentRecipe(s);\n\nexport default s;\n","ts","",[700,834,835,871,879,888,896,904,912,929,935,956,961,979,996,1013,1030,1035],{"__ignoreMap":832},[836,837,840,844,848,852,855,858,861,865,868],"span",{"class":838,"line":839},"line",1,[836,841,843],{"class":842},"s7zQu","import",[836,845,847],{"class":846},"sMK4o"," {",[836,849,851],{"class":850},"sTEyZ"," styleframe",[836,853,854],{"class":846}," }",[836,856,857],{"class":842}," from",[836,859,860],{"class":846}," '",[836,862,864],{"class":863},"sfazB","virtual:styleframe",[836,866,867],{"class":846},"'",[836,869,870],{"class":846},";\n",[836,872,874,876],{"class":838,"line":873},2,[836,875,843],{"class":842},[836,877,878],{"class":846}," {\n",[836,880,882,885],{"class":838,"line":881},3,[836,883,884],{"class":850},"    useTabsRecipe",[836,886,887],{"class":846},",\n",[836,889,891,894],{"class":838,"line":890},4,[836,892,893],{"class":850},"    useTabsListRecipe",[836,895,887],{"class":846},[836,897,899,902],{"class":838,"line":898},5,[836,900,901],{"class":850},"    useTabsTriggerRecipe",[836,903,887],{"class":846},[836,905,907,910],{"class":838,"line":906},6,[836,908,909],{"class":850},"    useTabsContentRecipe",[836,911,887],{"class":846},[836,913,915,918,920,922,925,927],{"class":838,"line":914},7,[836,916,917],{"class":846},"}",[836,919,857],{"class":842},[836,921,860],{"class":846},[836,923,924],{"class":863},"@styleframe\u002Ftheme",[836,926,867],{"class":846},[836,928,870],{"class":846},[836,930,932],{"class":838,"line":931},8,[836,933,934],{"emptyLinePlaceholder":223},"\n",[836,936,938,942,945,948,951,954],{"class":838,"line":937},9,[836,939,941],{"class":940},"spNyl","const",[836,943,944],{"class":850}," s ",[836,946,947],{"class":846},"=",[836,949,851],{"class":950},"s2Zo4",[836,952,953],{"class":850},"()",[836,955,870],{"class":846},[836,957,959],{"class":838,"line":958},10,[836,960,934],{"emptyLinePlaceholder":223},[836,962,964,966,969,971,974,977],{"class":838,"line":963},11,[836,965,941],{"class":940},[836,967,968],{"class":850}," tabs ",[836,970,947],{"class":846},[836,972,973],{"class":950}," useTabsRecipe",[836,975,976],{"class":850},"(s)",[836,978,870],{"class":846},[836,980,982,984,987,989,992,994],{"class":838,"line":981},12,[836,983,941],{"class":940},[836,985,986],{"class":850}," tabsList ",[836,988,947],{"class":846},[836,990,991],{"class":950}," useTabsListRecipe",[836,993,976],{"class":850},[836,995,870],{"class":846},[836,997,999,1001,1004,1006,1009,1011],{"class":838,"line":998},13,[836,1000,941],{"class":940},[836,1002,1003],{"class":850}," tabsTrigger ",[836,1005,947],{"class":846},[836,1007,1008],{"class":950}," useTabsTriggerRecipe",[836,1010,976],{"class":850},[836,1012,870],{"class":846},[836,1014,1016,1018,1021,1023,1026,1028],{"class":838,"line":1015},14,[836,1017,941],{"class":940},[836,1019,1020],{"class":850}," tabsContent ",[836,1022,947],{"class":846},[836,1024,1025],{"class":950}," useTabsContentRecipe",[836,1027,976],{"class":850},[836,1029,870],{"class":846},[836,1031,1033],{"class":838,"line":1032},15,[836,1034,934],{"emptyLinePlaceholder":223},[836,1036,1038,1041,1044,1047],{"class":838,"line":1037},16,[836,1039,1040],{"class":842},"export",[836,1042,1043],{"class":842}," default",[836,1045,1046],{"class":850}," s",[836,1048,870],{"class":846},[827,1050,1052],{"className":829,"code":1051,"filename":820,"language":831,"meta":832,"style":832},"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,1053,1054,1075,1102,1106,1120,1124,1133,1142,1146],{"__ignoreMap":832},[836,1055,1056,1058,1060,1062,1064,1066,1068,1071,1073],{"class":838,"line":839},[836,1057,843],{"class":842},[836,1059,847],{"class":846},[836,1061,851],{"class":850},[836,1063,854],{"class":846},[836,1065,857],{"class":842},[836,1067,860],{"class":846},[836,1069,1070],{"class":863},"styleframe",[836,1072,867],{"class":846},[836,1074,870],{"class":846},[836,1076,1077,1079,1081,1084,1087,1090,1092,1094,1096,1098,1100],{"class":838,"line":873},[836,1078,843],{"class":842},[836,1080,847],{"class":846},[836,1082,1083],{"class":850}," useDesignTokensPreset",[836,1085,1086],{"class":846},",",[836,1088,1089],{"class":850}," useUtilitiesPreset",[836,1091,854],{"class":846},[836,1093,857],{"class":842},[836,1095,860],{"class":846},[836,1097,924],{"class":863},[836,1099,867],{"class":846},[836,1101,870],{"class":846},[836,1103,1104],{"class":838,"line":881},[836,1105,934],{"emptyLinePlaceholder":223},[836,1107,1108,1110,1112,1114,1116,1118],{"class":838,"line":890},[836,1109,941],{"class":940},[836,1111,944],{"class":850},[836,1113,947],{"class":846},[836,1115,851],{"class":950},[836,1117,953],{"class":850},[836,1119,870],{"class":846},[836,1121,1122],{"class":838,"line":898},[836,1123,934],{"emptyLinePlaceholder":223},[836,1125,1126,1129,1131],{"class":838,"line":906},[836,1127,1128],{"class":950},"useDesignTokensPreset",[836,1130,976],{"class":850},[836,1132,870],{"class":846},[836,1134,1135,1138,1140],{"class":838,"line":914},[836,1136,1137],{"class":950},"useUtilitiesPreset",[836,1139,976],{"class":850},[836,1141,870],{"class":846},[836,1143,1144],{"class":838,"line":931},[836,1145,934],{"emptyLinePlaceholder":223},[836,1147,1148,1150,1152,1154],{"class":838,"line":937},[836,1149,1040],{"class":842},[836,1151,1043],{"class":842},[836,1153,1046],{"class":850},[836,1155,870],{"class":846},[811,1157,1159],{"id":1158},"build-the-component","Build the component",[692,1161,1162,1163,1166,1167,1166,1170,1173,1174,1177,1178,1180],{},"Import the ",[700,1164,1165],{},"tabs",", ",[700,1168,1169],{},"tabsList",[700,1171,1172],{},"tabsTrigger",", and ",[700,1175,1176],{},"tabsContent"," runtime functions from the virtual module. Track the active value yourself and mark the selected trigger with ",[700,1179,738],{}," so the recipe paints the active state:",[1182,1183,1184,1730,2398],"framework-switcher",{},[1185,1186,1187],"template",{"v-slot:vue":832},[827,1188,1193],{"className":1189,"code":1190,"filename":1191,"language":1192,"meta":832,"style":832},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { tabs, tabsList, tabsTrigger, tabsContent } from \"virtual:styleframe\";\n\nconst items = [\n    { value: \"account\", label: \"Account\" },\n    { value: \"password\", label: \"Password\" },\n];\nconst active = ref(\"account\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"tabs({ orientation: 'horizontal', size: 'md' })\">\n        \u003Cdiv role=\"tablist\" :class=\"tabsList({ color: 'neutral', variant: 'line', size: 'md' })\">\n            \u003Cbutton\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                type=\"button\"\n                role=\"tab\"\n                :aria-selected=\"active === item.value\"\n                :class=\"tabsTrigger({ color: 'neutral', variant: 'line', size: 'md' })\"\n                @click=\"active = item.value\"\n            >\n                {{ item.label }}\n            \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n        \u003Cdiv\n            v-for=\"item in items\"\n            v-show=\"active === item.value\"\n            :key=\"item.value\"\n            role=\"tabpanel\"\n            :class=\"tabsContent({ size: 'md' })\"\n        >\n            {{ item.label }} panel\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FTabs.vue","vue",[700,1194,1195,1222,1244,1280,1284,1296,1331,1361,1368,1393,1402,1406,1414,1436,1467,1475,1490,1505,1520,1534,1549,1564,1579,1585,1591,1601,1611,1619,1633,1647,1661,1675,1690,1696,1702,1711,1721],{"__ignoreMap":832},[836,1196,1197,1200,1204,1207,1210,1212,1215,1217,1219],{"class":838,"line":839},[836,1198,1199],{"class":846},"\u003C",[836,1201,1203],{"class":1202},"swJcz","script",[836,1205,1206],{"class":940}," setup",[836,1208,1209],{"class":940}," lang",[836,1211,947],{"class":846},[836,1213,1214],{"class":846},"\"",[836,1216,831],{"class":863},[836,1218,1214],{"class":846},[836,1220,1221],{"class":846},">\n",[836,1223,1224,1226,1228,1231,1233,1235,1238,1240,1242],{"class":838,"line":873},[836,1225,843],{"class":842},[836,1227,847],{"class":846},[836,1229,1230],{"class":850}," ref",[836,1232,854],{"class":846},[836,1234,857],{"class":842},[836,1236,1237],{"class":846}," \"",[836,1239,1192],{"class":863},[836,1241,1214],{"class":846},[836,1243,870],{"class":846},[836,1245,1246,1248,1250,1253,1255,1258,1260,1263,1265,1268,1270,1272,1274,1276,1278],{"class":838,"line":881},[836,1247,843],{"class":842},[836,1249,847],{"class":846},[836,1251,1252],{"class":850}," tabs",[836,1254,1086],{"class":846},[836,1256,1257],{"class":850}," tabsList",[836,1259,1086],{"class":846},[836,1261,1262],{"class":850}," tabsTrigger",[836,1264,1086],{"class":846},[836,1266,1267],{"class":850}," tabsContent",[836,1269,854],{"class":846},[836,1271,857],{"class":842},[836,1273,1237],{"class":846},[836,1275,864],{"class":863},[836,1277,1214],{"class":846},[836,1279,870],{"class":846},[836,1281,1282],{"class":838,"line":890},[836,1283,934],{"emptyLinePlaceholder":223},[836,1285,1286,1288,1291,1293],{"class":838,"line":898},[836,1287,941],{"class":940},[836,1289,1290],{"class":850}," items ",[836,1292,947],{"class":846},[836,1294,1295],{"class":850}," [\n",[836,1297,1298,1301,1304,1307,1309,1312,1314,1316,1319,1321,1323,1326,1328],{"class":838,"line":906},[836,1299,1300],{"class":846},"    {",[836,1302,1303],{"class":1202}," value",[836,1305,1306],{"class":846},":",[836,1308,1237],{"class":846},[836,1310,1311],{"class":863},"account",[836,1313,1214],{"class":846},[836,1315,1086],{"class":846},[836,1317,1318],{"class":1202}," label",[836,1320,1306],{"class":846},[836,1322,1237],{"class":846},[836,1324,1325],{"class":863},"Account",[836,1327,1214],{"class":846},[836,1329,1330],{"class":846}," },\n",[836,1332,1333,1335,1337,1339,1341,1344,1346,1348,1350,1352,1354,1357,1359],{"class":838,"line":914},[836,1334,1300],{"class":846},[836,1336,1303],{"class":1202},[836,1338,1306],{"class":846},[836,1340,1237],{"class":846},[836,1342,1343],{"class":863},"password",[836,1345,1214],{"class":846},[836,1347,1086],{"class":846},[836,1349,1318],{"class":1202},[836,1351,1306],{"class":846},[836,1353,1237],{"class":846},[836,1355,1356],{"class":863},"Password",[836,1358,1214],{"class":846},[836,1360,1330],{"class":846},[836,1362,1363,1366],{"class":838,"line":931},[836,1364,1365],{"class":850},"]",[836,1367,870],{"class":846},[836,1369,1370,1372,1375,1377,1379,1382,1384,1386,1388,1391],{"class":838,"line":937},[836,1371,941],{"class":940},[836,1373,1374],{"class":850}," active ",[836,1376,947],{"class":846},[836,1378,1230],{"class":950},[836,1380,1381],{"class":850},"(",[836,1383,1214],{"class":846},[836,1385,1311],{"class":863},[836,1387,1214],{"class":846},[836,1389,1390],{"class":850},")",[836,1392,870],{"class":846},[836,1394,1395,1398,1400],{"class":838,"line":958},[836,1396,1397],{"class":846},"\u003C\u002F",[836,1399,1203],{"class":1202},[836,1401,1221],{"class":846},[836,1403,1404],{"class":838,"line":963},[836,1405,934],{"emptyLinePlaceholder":223},[836,1407,1408,1410,1412],{"class":838,"line":981},[836,1409,1199],{"class":846},[836,1411,1185],{"class":1202},[836,1413,1221],{"class":846},[836,1415,1416,1419,1422,1425,1427,1429,1432,1434],{"class":838,"line":998},[836,1417,1418],{"class":846},"    \u003C",[836,1420,1421],{"class":1202},"div",[836,1423,1424],{"class":940}," :class",[836,1426,947],{"class":846},[836,1428,1214],{"class":846},[836,1430,1431],{"class":863},"tabs({ orientation: 'horizontal', size: 'md' })",[836,1433,1214],{"class":846},[836,1435,1221],{"class":846},[836,1437,1438,1441,1443,1446,1448,1450,1452,1454,1456,1458,1460,1463,1465],{"class":838,"line":1015},[836,1439,1440],{"class":846},"        \u003C",[836,1442,1421],{"class":1202},[836,1444,1445],{"class":940}," role",[836,1447,947],{"class":846},[836,1449,1214],{"class":846},[836,1451,769],{"class":863},[836,1453,1214],{"class":846},[836,1455,1424],{"class":940},[836,1457,947],{"class":846},[836,1459,1214],{"class":846},[836,1461,1462],{"class":863},"tabsList({ color: 'neutral', variant: 'line', size: 'md' })",[836,1464,1214],{"class":846},[836,1466,1221],{"class":846},[836,1468,1469,1472],{"class":838,"line":1032},[836,1470,1471],{"class":846},"            \u003C",[836,1473,1474],{"class":1202},"button\n",[836,1476,1477,1480,1482,1484,1487],{"class":838,"line":1037},[836,1478,1479],{"class":940},"                v-for",[836,1481,947],{"class":846},[836,1483,1214],{"class":846},[836,1485,1486],{"class":863},"item in items",[836,1488,1489],{"class":846},"\"\n",[836,1491,1493,1496,1498,1500,1503],{"class":838,"line":1492},17,[836,1494,1495],{"class":940},"                :key",[836,1497,947],{"class":846},[836,1499,1214],{"class":846},[836,1501,1502],{"class":863},"item.value",[836,1504,1489],{"class":846},[836,1506,1508,1511,1513,1515,1518],{"class":838,"line":1507},18,[836,1509,1510],{"class":940},"                type",[836,1512,947],{"class":846},[836,1514,1214],{"class":846},[836,1516,1517],{"class":863},"button",[836,1519,1489],{"class":846},[836,1521,1523,1526,1528,1530,1532],{"class":838,"line":1522},19,[836,1524,1525],{"class":940},"                role",[836,1527,947],{"class":846},[836,1529,1214],{"class":846},[836,1531,773],{"class":863},[836,1533,1489],{"class":846},[836,1535,1537,1540,1542,1544,1547],{"class":838,"line":1536},20,[836,1538,1539],{"class":940},"                :aria-selected",[836,1541,947],{"class":846},[836,1543,1214],{"class":846},[836,1545,1546],{"class":863},"active === item.value",[836,1548,1489],{"class":846},[836,1550,1552,1555,1557,1559,1562],{"class":838,"line":1551},21,[836,1553,1554],{"class":940},"                :class",[836,1556,947],{"class":846},[836,1558,1214],{"class":846},[836,1560,1561],{"class":863},"tabsTrigger({ color: 'neutral', variant: 'line', size: 'md' })",[836,1563,1489],{"class":846},[836,1565,1567,1570,1572,1574,1577],{"class":838,"line":1566},22,[836,1568,1569],{"class":940},"                @click",[836,1571,947],{"class":846},[836,1573,1214],{"class":846},[836,1575,1576],{"class":863},"active = item.value",[836,1578,1489],{"class":846},[836,1580,1582],{"class":838,"line":1581},23,[836,1583,1584],{"class":846},"            >\n",[836,1586,1588],{"class":838,"line":1587},24,[836,1589,1590],{"class":850},"                {{ item.label }}\n",[836,1592,1594,1597,1599],{"class":838,"line":1593},25,[836,1595,1596],{"class":846},"            \u003C\u002F",[836,1598,1517],{"class":1202},[836,1600,1221],{"class":846},[836,1602,1604,1607,1609],{"class":838,"line":1603},26,[836,1605,1606],{"class":846},"        \u003C\u002F",[836,1608,1421],{"class":1202},[836,1610,1221],{"class":846},[836,1612,1614,1616],{"class":838,"line":1613},27,[836,1615,1440],{"class":846},[836,1617,1618],{"class":1202},"div\n",[836,1620,1622,1625,1627,1629,1631],{"class":838,"line":1621},28,[836,1623,1624],{"class":940},"            v-for",[836,1626,947],{"class":846},[836,1628,1214],{"class":846},[836,1630,1486],{"class":863},[836,1632,1489],{"class":846},[836,1634,1636,1639,1641,1643,1645],{"class":838,"line":1635},29,[836,1637,1638],{"class":940},"            v-show",[836,1640,947],{"class":846},[836,1642,1214],{"class":846},[836,1644,1546],{"class":863},[836,1646,1489],{"class":846},[836,1648,1650,1653,1655,1657,1659],{"class":838,"line":1649},30,[836,1651,1652],{"class":940},"            :key",[836,1654,947],{"class":846},[836,1656,1214],{"class":846},[836,1658,1502],{"class":863},[836,1660,1489],{"class":846},[836,1662,1664,1667,1669,1671,1673],{"class":838,"line":1663},31,[836,1665,1666],{"class":940},"            role",[836,1668,947],{"class":846},[836,1670,1214],{"class":846},[836,1672,776],{"class":863},[836,1674,1489],{"class":846},[836,1676,1678,1681,1683,1685,1688],{"class":838,"line":1677},32,[836,1679,1680],{"class":940},"            :class",[836,1682,947],{"class":846},[836,1684,1214],{"class":846},[836,1686,1687],{"class":863},"tabsContent({ size: 'md' })",[836,1689,1489],{"class":846},[836,1691,1693],{"class":838,"line":1692},33,[836,1694,1695],{"class":846},"        >\n",[836,1697,1699],{"class":838,"line":1698},34,[836,1700,1701],{"class":850},"            {{ item.label }} panel\n",[836,1703,1705,1707,1709],{"class":838,"line":1704},35,[836,1706,1606],{"class":846},[836,1708,1421],{"class":1202},[836,1710,1221],{"class":846},[836,1712,1714,1717,1719],{"class":838,"line":1713},36,[836,1715,1716],{"class":846},"    \u003C\u002F",[836,1718,1421],{"class":1202},[836,1720,1221],{"class":846},[836,1722,1724,1726,1728],{"class":838,"line":1723},37,[836,1725,1397],{"class":846},[836,1727,1185],{"class":1202},[836,1729,1221],{"class":846},[1185,1731,1732],{"v-slot:react":832},[827,1733,1736],{"className":829,"code":1734,"filename":1735,"language":831,"meta":832,"style":832},"import { useState } from \"react\";\nimport { tabs, tabsList, tabsTrigger, tabsContent } from \"virtual:styleframe\";\n\nconst items = [\n    { value: \"account\", label: \"Account\" },\n    { value: \"password\", label: \"Password\" },\n];\n\nexport function Tabs() {\n    const [active, setActive] = useState(\"account\");\n\n    return (\n        \u003Cdiv className={tabs({ orientation: \"horizontal\", size: \"md\" })}>\n            \u003Cdiv role=\"tablist\" className={tabsList({ color: \"neutral\", variant: \"line\", size: \"md\" })}>\n                {items.map((item) => (\n                    \u003Cbutton\n                        key={item.value}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={active === item.value}\n                        className={tabsTrigger({ color: \"neutral\", variant: \"line\", size: \"md\" })}\n                        onClick={() => setActive(item.value)}\n                    >\n                        {item.label}\n                    \u003C\u002Fbutton>\n                ))}\n            \u003C\u002Fdiv>\n            {items.map((item) =>\n                active === item.value ? (\n                    \u003Cdiv key={item.value} role=\"tabpanel\" className={tabsContent({ size: \"md\" })}>\n                        {item.label} panel\n                    \u003C\u002Fdiv>\n                ) : null,\n            )}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FTabs.tsx",[700,1737,1738,1760,1792,1796,1806,1834,1862,1868,1872,1886,1921,1925,1933,1979,2042,2071,2078,2094,2107,2120,2147,2195,2212,2217,2231,2240,2247,2255,2275,2292,2339,2354,2362,2372,2379,2387,2394],{"__ignoreMap":832},[836,1739,1740,1742,1744,1747,1749,1751,1753,1756,1758],{"class":838,"line":839},[836,1741,843],{"class":842},[836,1743,847],{"class":846},[836,1745,1746],{"class":850}," useState",[836,1748,854],{"class":846},[836,1750,857],{"class":842},[836,1752,1237],{"class":846},[836,1754,1755],{"class":863},"react",[836,1757,1214],{"class":846},[836,1759,870],{"class":846},[836,1761,1762,1764,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790],{"class":838,"line":873},[836,1763,843],{"class":842},[836,1765,847],{"class":846},[836,1767,1252],{"class":850},[836,1769,1086],{"class":846},[836,1771,1257],{"class":850},[836,1773,1086],{"class":846},[836,1775,1262],{"class":850},[836,1777,1086],{"class":846},[836,1779,1267],{"class":850},[836,1781,854],{"class":846},[836,1783,857],{"class":842},[836,1785,1237],{"class":846},[836,1787,864],{"class":863},[836,1789,1214],{"class":846},[836,1791,870],{"class":846},[836,1793,1794],{"class":838,"line":881},[836,1795,934],{"emptyLinePlaceholder":223},[836,1797,1798,1800,1802,1804],{"class":838,"line":890},[836,1799,941],{"class":940},[836,1801,1290],{"class":850},[836,1803,947],{"class":846},[836,1805,1295],{"class":850},[836,1807,1808,1810,1812,1814,1816,1818,1820,1822,1824,1826,1828,1830,1832],{"class":838,"line":898},[836,1809,1300],{"class":846},[836,1811,1303],{"class":1202},[836,1813,1306],{"class":846},[836,1815,1237],{"class":846},[836,1817,1311],{"class":863},[836,1819,1214],{"class":846},[836,1821,1086],{"class":846},[836,1823,1318],{"class":1202},[836,1825,1306],{"class":846},[836,1827,1237],{"class":846},[836,1829,1325],{"class":863},[836,1831,1214],{"class":846},[836,1833,1330],{"class":846},[836,1835,1836,1838,1840,1842,1844,1846,1848,1850,1852,1854,1856,1858,1860],{"class":838,"line":906},[836,1837,1300],{"class":846},[836,1839,1303],{"class":1202},[836,1841,1306],{"class":846},[836,1843,1237],{"class":846},[836,1845,1343],{"class":863},[836,1847,1214],{"class":846},[836,1849,1086],{"class":846},[836,1851,1318],{"class":1202},[836,1853,1306],{"class":846},[836,1855,1237],{"class":846},[836,1857,1356],{"class":863},[836,1859,1214],{"class":846},[836,1861,1330],{"class":846},[836,1863,1864,1866],{"class":838,"line":914},[836,1865,1365],{"class":850},[836,1867,870],{"class":846},[836,1869,1870],{"class":838,"line":931},[836,1871,934],{"emptyLinePlaceholder":223},[836,1873,1874,1876,1879,1882,1884],{"class":838,"line":937},[836,1875,1040],{"class":842},[836,1877,1878],{"class":940}," function",[836,1880,1881],{"class":950}," Tabs",[836,1883,953],{"class":846},[836,1885,878],{"class":846},[836,1887,1888,1891,1894,1897,1899,1902,1904,1907,1909,1911,1913,1915,1917,1919],{"class":838,"line":958},[836,1889,1890],{"class":940},"    const",[836,1892,1893],{"class":846}," [",[836,1895,1896],{"class":850},"active",[836,1898,1086],{"class":846},[836,1900,1901],{"class":850}," setActive",[836,1903,1365],{"class":846},[836,1905,1906],{"class":846}," =",[836,1908,1746],{"class":950},[836,1910,1381],{"class":1202},[836,1912,1214],{"class":846},[836,1914,1311],{"class":863},[836,1916,1214],{"class":846},[836,1918,1390],{"class":1202},[836,1920,870],{"class":846},[836,1922,1923],{"class":838,"line":963},[836,1924,934],{"emptyLinePlaceholder":223},[836,1926,1927,1930],{"class":838,"line":981},[836,1928,1929],{"class":842},"    return",[836,1931,1932],{"class":1202}," (\n",[836,1934,1935,1937,1939,1942,1945,1947,1950,1953,1955,1957,1960,1962,1964,1967,1969,1971,1974,1976],{"class":838,"line":998},[836,1936,1440],{"class":846},[836,1938,1421],{"class":850},[836,1940,1941],{"class":850}," className",[836,1943,1944],{"class":846},"={",[836,1946,1165],{"class":1202},[836,1948,1949],{"class":846},"({",[836,1951,1952],{"class":1202}," orientation",[836,1954,1306],{"class":846},[836,1956,1237],{"class":846},[836,1958,1959],{"class":863},"horizontal",[836,1961,1214],{"class":846},[836,1963,1086],{"class":846},[836,1965,1966],{"class":1202}," size",[836,1968,1306],{"class":846},[836,1970,1237],{"class":846},[836,1972,1973],{"class":863},"md",[836,1975,1214],{"class":846},[836,1977,1978],{"class":846}," })}>\n",[836,1980,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999,2001,2003,2006,2008,2010,2013,2015,2017,2020,2022,2024,2026,2028,2030,2032,2034,2036,2038,2040],{"class":838,"line":1015},[836,1982,1471],{"class":846},[836,1984,1421],{"class":850},[836,1986,1445],{"class":850},[836,1988,947],{"class":846},[836,1990,1214],{"class":846},[836,1992,769],{"class":863},[836,1994,1214],{"class":846},[836,1996,1941],{"class":850},[836,1998,1944],{"class":846},[836,2000,1169],{"class":1202},[836,2002,1949],{"class":846},[836,2004,2005],{"class":1202}," color",[836,2007,1306],{"class":846},[836,2009,1237],{"class":846},[836,2011,2012],{"class":863},"neutral",[836,2014,1214],{"class":846},[836,2016,1086],{"class":846},[836,2018,2019],{"class":1202}," variant",[836,2021,1306],{"class":846},[836,2023,1237],{"class":846},[836,2025,838],{"class":863},[836,2027,1214],{"class":846},[836,2029,1086],{"class":846},[836,2031,1966],{"class":1202},[836,2033,1306],{"class":846},[836,2035,1237],{"class":846},[836,2037,1973],{"class":863},[836,2039,1214],{"class":846},[836,2041,1978],{"class":846},[836,2043,2044,2047,2051,2054,2057,2060,2063,2066,2069],{"class":838,"line":1032},[836,2045,2046],{"class":846},"                {",[836,2048,2050],{"class":2049},"sHdIc","items",[836,2052,2053],{"class":1202},".",[836,2055,2056],{"class":2049},"map",[836,2058,2059],{"class":1202},"((",[836,2061,2062],{"class":2049},"item",[836,2064,2065],{"class":1202},") ",[836,2067,2068],{"class":846},"=>",[836,2070,1932],{"class":1202},[836,2072,2073,2076],{"class":838,"line":1037},[836,2074,2075],{"class":846},"                    \u003C",[836,2077,1474],{"class":2049},[836,2079,2080,2083,2085,2088,2091],{"class":838,"line":1492},[836,2081,2082],{"class":850},"                        key",[836,2084,1944],{"class":846},[836,2086,2087],{"class":1202},"item.",[836,2089,2090],{"class":850},"value",[836,2092,2093],{"class":846},"}\n",[836,2095,2096,2099,2101,2103,2105],{"class":838,"line":1507},[836,2097,2098],{"class":850},"                        type",[836,2100,947],{"class":846},[836,2102,1214],{"class":846},[836,2104,1517],{"class":863},[836,2106,1489],{"class":846},[836,2108,2109,2112,2114,2116,2118],{"class":838,"line":1522},[836,2110,2111],{"class":850},"                        role",[836,2113,947],{"class":846},[836,2115,1214],{"class":846},[836,2117,773],{"class":863},[836,2119,1489],{"class":846},[836,2121,2122,2125,2128,2131,2133,2135,2138,2141,2143,2145],{"class":838,"line":1536},[836,2123,2124],{"class":850},"                        aria",[836,2126,2127],{"class":846},"-",[836,2129,2130],{"class":850},"selected",[836,2132,1944],{"class":846},[836,2134,1896],{"class":850},[836,2136,2137],{"class":846}," ===",[836,2139,2140],{"class":850}," item",[836,2142,2053],{"class":846},[836,2144,2090],{"class":850},[836,2146,2093],{"class":846},[836,2148,2149,2152,2154,2156,2158,2160,2162,2164,2166,2168,2170,2172,2174,2176,2178,2180,2182,2184,2186,2188,2190,2192],{"class":838,"line":1551},[836,2150,2151],{"class":850},"                        className",[836,2153,1944],{"class":846},[836,2155,1172],{"class":1202},[836,2157,1949],{"class":846},[836,2159,2005],{"class":1202},[836,2161,1306],{"class":846},[836,2163,1237],{"class":846},[836,2165,2012],{"class":863},[836,2167,1214],{"class":846},[836,2169,1086],{"class":846},[836,2171,2019],{"class":1202},[836,2173,1306],{"class":846},[836,2175,1237],{"class":846},[836,2177,838],{"class":863},[836,2179,1214],{"class":846},[836,2181,1086],{"class":846},[836,2183,1966],{"class":1202},[836,2185,1306],{"class":846},[836,2187,1237],{"class":846},[836,2189,1973],{"class":863},[836,2191,1214],{"class":846},[836,2193,2194],{"class":846}," })}\n",[836,2196,2197,2200,2202,2205,2207,2209],{"class":838,"line":1566},[836,2198,2199],{"class":850},"                        onClick",[836,2201,1944],{"class":846},[836,2203,2204],{"class":1202},"() => setActive",[836,2206,1381],{"class":846},[836,2208,1502],{"class":1202},[836,2210,2211],{"class":846},")}\n",[836,2213,2214],{"class":838,"line":1581},[836,2215,2216],{"class":846},"                    >\n",[836,2218,2219,2222,2224,2226,2229],{"class":838,"line":1587},[836,2220,2221],{"class":846},"                        {",[836,2223,2062],{"class":2049},[836,2225,2053],{"class":1202},[836,2227,2228],{"class":2049},"label",[836,2230,2093],{"class":846},[836,2232,2233,2236,2238],{"class":838,"line":1593},[836,2234,2235],{"class":846},"                    \u003C\u002F",[836,2237,1517],{"class":850},[836,2239,1221],{"class":846},[836,2241,2242,2245],{"class":838,"line":1603},[836,2243,2244],{"class":1202},"                ))",[836,2246,2093],{"class":846},[836,2248,2249,2251,2253],{"class":838,"line":1613},[836,2250,1596],{"class":846},[836,2252,1421],{"class":850},[836,2254,1221],{"class":846},[836,2256,2257,2260,2262,2264,2266,2268,2270,2272],{"class":838,"line":1621},[836,2258,2259],{"class":846},"            {",[836,2261,2050],{"class":2049},[836,2263,2053],{"class":1202},[836,2265,2056],{"class":2049},[836,2267,2059],{"class":1202},[836,2269,2062],{"class":2049},[836,2271,2065],{"class":1202},[836,2273,2274],{"class":846},"=>\n",[836,2276,2277,2280,2283,2285,2287,2289],{"class":838,"line":1635},[836,2278,2279],{"class":2049},"                active",[836,2281,2282],{"class":1202}," === ",[836,2284,2062],{"class":2049},[836,2286,2053],{"class":1202},[836,2288,2090],{"class":2049},[836,2290,2291],{"class":1202}," ? (\n",[836,2293,2294,2296,2298,2301,2303,2305,2307,2309,2311,2313,2315,2317,2319,2321,2323,2325,2327,2329,2331,2333,2335,2337],{"class":838,"line":1649},[836,2295,2075],{"class":1202},[836,2297,1421],{"class":2049},[836,2299,2300],{"class":2049}," key",[836,2302,1944],{"class":846},[836,2304,2087],{"class":1202},[836,2306,2090],{"class":850},[836,2308,917],{"class":846},[836,2310,1445],{"class":850},[836,2312,947],{"class":846},[836,2314,1214],{"class":846},[836,2316,776],{"class":863},[836,2318,1214],{"class":846},[836,2320,1941],{"class":850},[836,2322,1944],{"class":846},[836,2324,1176],{"class":1202},[836,2326,1949],{"class":846},[836,2328,1966],{"class":1202},[836,2330,1306],{"class":846},[836,2332,1237],{"class":846},[836,2334,1973],{"class":863},[836,2336,1214],{"class":846},[836,2338,1978],{"class":846},[836,2340,2341,2343,2345,2347,2349,2351],{"class":838,"line":1663},[836,2342,2221],{"class":846},[836,2344,2062],{"class":2049},[836,2346,2053],{"class":1202},[836,2348,2228],{"class":2049},[836,2350,917],{"class":846},[836,2352,2353],{"class":2049}," panel\n",[836,2355,2356,2358,2360],{"class":838,"line":1677},[836,2357,2235],{"class":1202},[836,2359,1421],{"class":2049},[836,2361,1221],{"class":1202},[836,2363,2364,2367,2370],{"class":838,"line":1692},[836,2365,2366],{"class":1202},"                ) : ",[836,2368,2369],{"class":2049},"null",[836,2371,887],{"class":846},[836,2373,2374,2377],{"class":838,"line":1698},[836,2375,2376],{"class":1202},"            )",[836,2378,2093],{"class":846},[836,2380,2381,2383,2385],{"class":838,"line":1704},[836,2382,1606],{"class":846},[836,2384,1421],{"class":850},[836,2386,1221],{"class":846},[836,2388,2389,2392],{"class":838,"line":1713},[836,2390,2391],{"class":1202},"    )",[836,2393,870],{"class":846},[836,2395,2396],{"class":838,"line":1723},[836,2397,2093],{"class":846},[1185,2399,2400,2419,2667],{"v-slot:other":832},[692,2401,694,2402,1166,2405,1166,2408,1173,2411,2414,2415,2418],{},[700,2403,2404],{},"tabs()",[700,2406,2407],{},"tabsList()",[700,2409,2410],{},"tabsTrigger()",[700,2412,2413],{},"tabsContent()"," runtimes each return a class string. Apply them however your framework binds classes, and toggle ",[700,2416,2417],{},"aria-selected=\"true\""," on the active trigger:",[827,2420,2423],{"className":829,"code":2421,"filename":2422,"language":831,"meta":832,"style":832},"import { tabs, tabsList, tabsTrigger, tabsContent } from \"virtual:styleframe\";\n\nconst rootClasses = tabs({ orientation: \"horizontal\", size: \"md\" });\n\u002F\u002F → \"tabs _display:flex _flex-direction:column ...\"\nconst listClasses = tabsList({ color: \"neutral\", variant: \"line\", size: \"md\" });\n\u002F\u002F → \"tabs-list _display:flex _border-bottom-width:thin ...\"\nconst triggerClasses = tabsTrigger({ color: \"neutral\", variant: \"line\", size: \"md\" });\n\u002F\u002F → \"tabs-trigger _display:inline-flex _cursor:pointer ...\"\nconst contentClasses = tabsContent({ size: \"md\" });\n\u002F\u002F → \"tabs-content _color:text _padding-top:md ...\"\n","src\u002Fcomponents\u002Ftabs.ts",[700,2424,2425,2457,2461,2505,2511,2566,2571,2626,2631,2662],{"__ignoreMap":832},[836,2426,2427,2429,2431,2433,2435,2437,2439,2441,2443,2445,2447,2449,2451,2453,2455],{"class":838,"line":839},[836,2428,843],{"class":842},[836,2430,847],{"class":846},[836,2432,1252],{"class":850},[836,2434,1086],{"class":846},[836,2436,1257],{"class":850},[836,2438,1086],{"class":846},[836,2440,1262],{"class":850},[836,2442,1086],{"class":846},[836,2444,1267],{"class":850},[836,2446,854],{"class":846},[836,2448,857],{"class":842},[836,2450,1237],{"class":846},[836,2452,864],{"class":863},[836,2454,1214],{"class":846},[836,2456,870],{"class":846},[836,2458,2459],{"class":838,"line":873},[836,2460,934],{"emptyLinePlaceholder":223},[836,2462,2463,2465,2468,2470,2472,2474,2477,2479,2481,2483,2485,2487,2489,2491,2493,2495,2497,2499,2501,2503],{"class":838,"line":881},[836,2464,941],{"class":940},[836,2466,2467],{"class":850}," rootClasses ",[836,2469,947],{"class":846},[836,2471,1252],{"class":950},[836,2473,1381],{"class":850},[836,2475,2476],{"class":846},"{",[836,2478,1952],{"class":1202},[836,2480,1306],{"class":846},[836,2482,1237],{"class":846},[836,2484,1959],{"class":863},[836,2486,1214],{"class":846},[836,2488,1086],{"class":846},[836,2490,1966],{"class":1202},[836,2492,1306],{"class":846},[836,2494,1237],{"class":846},[836,2496,1973],{"class":863},[836,2498,1214],{"class":846},[836,2500,854],{"class":846},[836,2502,1390],{"class":850},[836,2504,870],{"class":846},[836,2506,2507],{"class":838,"line":890},[836,2508,2510],{"class":2509},"sHwdD","\u002F\u002F → \"tabs _display:flex _flex-direction:column ...\"\n",[836,2512,2513,2515,2518,2520,2522,2524,2526,2528,2530,2532,2534,2536,2538,2540,2542,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562,2564],{"class":838,"line":898},[836,2514,941],{"class":940},[836,2516,2517],{"class":850}," listClasses ",[836,2519,947],{"class":846},[836,2521,1257],{"class":950},[836,2523,1381],{"class":850},[836,2525,2476],{"class":846},[836,2527,2005],{"class":1202},[836,2529,1306],{"class":846},[836,2531,1237],{"class":846},[836,2533,2012],{"class":863},[836,2535,1214],{"class":846},[836,2537,1086],{"class":846},[836,2539,2019],{"class":1202},[836,2541,1306],{"class":846},[836,2543,1237],{"class":846},[836,2545,838],{"class":863},[836,2547,1214],{"class":846},[836,2549,1086],{"class":846},[836,2551,1966],{"class":1202},[836,2553,1306],{"class":846},[836,2555,1237],{"class":846},[836,2557,1973],{"class":863},[836,2559,1214],{"class":846},[836,2561,854],{"class":846},[836,2563,1390],{"class":850},[836,2565,870],{"class":846},[836,2567,2568],{"class":838,"line":906},[836,2569,2570],{"class":2509},"\u002F\u002F → \"tabs-list _display:flex _border-bottom-width:thin ...\"\n",[836,2572,2573,2575,2578,2580,2582,2584,2586,2588,2590,2592,2594,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618,2620,2622,2624],{"class":838,"line":914},[836,2574,941],{"class":940},[836,2576,2577],{"class":850}," triggerClasses ",[836,2579,947],{"class":846},[836,2581,1262],{"class":950},[836,2583,1381],{"class":850},[836,2585,2476],{"class":846},[836,2587,2005],{"class":1202},[836,2589,1306],{"class":846},[836,2591,1237],{"class":846},[836,2593,2012],{"class":863},[836,2595,1214],{"class":846},[836,2597,1086],{"class":846},[836,2599,2019],{"class":1202},[836,2601,1306],{"class":846},[836,2603,1237],{"class":846},[836,2605,838],{"class":863},[836,2607,1214],{"class":846},[836,2609,1086],{"class":846},[836,2611,1966],{"class":1202},[836,2613,1306],{"class":846},[836,2615,1237],{"class":846},[836,2617,1973],{"class":863},[836,2619,1214],{"class":846},[836,2621,854],{"class":846},[836,2623,1390],{"class":850},[836,2625,870],{"class":846},[836,2627,2628],{"class":838,"line":931},[836,2629,2630],{"class":2509},"\u002F\u002F → \"tabs-trigger _display:inline-flex _cursor:pointer ...\"\n",[836,2632,2633,2635,2638,2640,2642,2644,2646,2648,2650,2652,2654,2656,2658,2660],{"class":838,"line":937},[836,2634,941],{"class":940},[836,2636,2637],{"class":850}," contentClasses ",[836,2639,947],{"class":846},[836,2641,1267],{"class":950},[836,2643,1381],{"class":850},[836,2645,2476],{"class":846},[836,2647,1966],{"class":1202},[836,2649,1306],{"class":846},[836,2651,1237],{"class":846},[836,2653,1973],{"class":863},[836,2655,1214],{"class":846},[836,2657,854],{"class":846},[836,2659,1390],{"class":850},[836,2661,870],{"class":846},[836,2663,2664],{"class":838,"line":958},[836,2665,2666],{"class":2509},"\u002F\u002F → \"tabs-content _color:text _padding-top:md ...\"\n",[827,2668,2673],{"className":2669,"code":2670,"filename":2671,"language":2672,"meta":832,"style":832},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"tabs ...\">\n    \u003Cdiv role=\"tablist\" class=\"tabs-list ...\">\n        \u003Cbutton role=\"tab\" aria-selected=\"true\" class=\"tabs-trigger ...\">Account\u003C\u002Fbutton>\n        \u003Cbutton role=\"tab\" aria-selected=\"false\" class=\"tabs-trigger ...\">Password\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv role=\"tabpanel\" class=\"tabs-content ...\">Account panel\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Ftabs.html","html",[700,2674,2675,2695,2724,2774,2821,2829,2867],{"__ignoreMap":832},[836,2676,2677,2679,2681,2684,2686,2688,2691,2693],{"class":838,"line":839},[836,2678,1199],{"class":846},[836,2680,1421],{"class":1202},[836,2682,2683],{"class":940}," class",[836,2685,947],{"class":846},[836,2687,1214],{"class":846},[836,2689,2690],{"class":863},"tabs ...",[836,2692,1214],{"class":846},[836,2694,1221],{"class":846},[836,2696,2697,2699,2701,2703,2705,2707,2709,2711,2713,2715,2717,2720,2722],{"class":838,"line":873},[836,2698,1418],{"class":846},[836,2700,1421],{"class":1202},[836,2702,1445],{"class":940},[836,2704,947],{"class":846},[836,2706,1214],{"class":846},[836,2708,769],{"class":863},[836,2710,1214],{"class":846},[836,2712,2683],{"class":940},[836,2714,947],{"class":846},[836,2716,1214],{"class":846},[836,2718,2719],{"class":863},"tabs-list ...",[836,2721,1214],{"class":846},[836,2723,1221],{"class":846},[836,2725,2726,2728,2730,2732,2734,2736,2738,2740,2743,2745,2747,2750,2752,2754,2756,2758,2761,2763,2766,2768,2770,2772],{"class":838,"line":881},[836,2727,1440],{"class":846},[836,2729,1517],{"class":1202},[836,2731,1445],{"class":940},[836,2733,947],{"class":846},[836,2735,1214],{"class":846},[836,2737,773],{"class":863},[836,2739,1214],{"class":846},[836,2741,2742],{"class":940}," aria-selected",[836,2744,947],{"class":846},[836,2746,1214],{"class":846},[836,2748,2749],{"class":863},"true",[836,2751,1214],{"class":846},[836,2753,2683],{"class":940},[836,2755,947],{"class":846},[836,2757,1214],{"class":846},[836,2759,2760],{"class":863},"tabs-trigger ...",[836,2762,1214],{"class":846},[836,2764,2765],{"class":846},">",[836,2767,1325],{"class":850},[836,2769,1397],{"class":846},[836,2771,1517],{"class":1202},[836,2773,1221],{"class":846},[836,2775,2776,2778,2780,2782,2784,2786,2788,2790,2792,2794,2796,2799,2801,2803,2805,2807,2809,2811,2813,2815,2817,2819],{"class":838,"line":890},[836,2777,1440],{"class":846},[836,2779,1517],{"class":1202},[836,2781,1445],{"class":940},[836,2783,947],{"class":846},[836,2785,1214],{"class":846},[836,2787,773],{"class":863},[836,2789,1214],{"class":846},[836,2791,2742],{"class":940},[836,2793,947],{"class":846},[836,2795,1214],{"class":846},[836,2797,2798],{"class":863},"false",[836,2800,1214],{"class":846},[836,2802,2683],{"class":940},[836,2804,947],{"class":846},[836,2806,1214],{"class":846},[836,2808,2760],{"class":863},[836,2810,1214],{"class":846},[836,2812,2765],{"class":846},[836,2814,1356],{"class":850},[836,2816,1397],{"class":846},[836,2818,1517],{"class":1202},[836,2820,1221],{"class":846},[836,2822,2823,2825,2827],{"class":838,"line":898},[836,2824,1716],{"class":846},[836,2826,1421],{"class":1202},[836,2828,1221],{"class":846},[836,2830,2831,2833,2835,2837,2839,2841,2843,2845,2847,2849,2851,2854,2856,2858,2861,2863,2865],{"class":838,"line":906},[836,2832,1418],{"class":846},[836,2834,1421],{"class":1202},[836,2836,1445],{"class":940},[836,2838,947],{"class":846},[836,2840,1214],{"class":846},[836,2842,776],{"class":863},[836,2844,1214],{"class":846},[836,2846,2683],{"class":940},[836,2848,947],{"class":846},[836,2850,1214],{"class":846},[836,2852,2853],{"class":863},"tabs-content ...",[836,2855,1214],{"class":846},[836,2857,2765],{"class":846},[836,2859,2860],{"class":850},"Account panel",[836,2862,1397],{"class":846},[836,2864,1421],{"class":1202},[836,2866,1221],{"class":846},[836,2868,2869,2871,2873],{"class":838,"line":914},[836,2870,1397],{"class":846},[836,2872,1421],{"class":1202},[836,2874,1221],{"class":846},[811,2876,2878],{"id":2877},"see-it-in-action","See it in action",[2880,2881],"story-preview",{"story":2882,":panel":2749},"theme-recipes-navigation-tabs--default",[688,2884,195],{"id":2885},"colors",[692,2887,2888,2889,1166,2892,1173,2895,2897],{},"The Tabs recipe includes 3 color surfaces: ",[700,2890,2891],{},"light",[700,2893,2894],{},"dark",[700,2896,2012],{},". Like the Card recipe, Tabs use neutral-spectrum colors designed for content surfaces rather than status communication. The color controls the list track, the active-tab indicator, and the panel text, combined with every visual style through compound variants — including dark mode overrides.",[692,2899,694,2900,2902],{},[700,2901,2012],{}," color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose tabs.",[2880,2904],{"story":2905,":panel":2749},"theme-recipes-navigation-tabs--light",[2907,2908,2910],"h3",{"id":2909},"color-reference","Color Reference",[2880,2912],{"story":2913},"theme-recipes-navigation-tabs--all-variants",[2915,2916,2917,2933],"table",{},[2918,2919,2920],"thead",{},[2921,2922,2923,2927,2930],"tr",{},[2924,2925,2926],"th",{},"Color",[2924,2928,2929],{},"Active indicator",[2924,2931,2932],{},"Use Case",[2934,2935,2936,2952,2966],"tbody",{},[2921,2937,2938,2943,2949],{},[2939,2940,2941],"td",{},[700,2942,2891],{},[2939,2944,2945,2948],{},[700,2946,2947],{},"@color.gray-900"," text \u002F surface",[2939,2950,2951],{},"Light surfaces, stays light in dark mode",[2921,2953,2954,2958,2963],{},[2939,2955,2956],{},[700,2957,2894],{},[2939,2959,2960,2948],{},[700,2961,2962],{},"@color.white",[2939,2964,2965],{},"Dark surfaces, stays dark in light mode",[2921,2967,2968,2972,2975],{},[2939,2969,2970],{},[700,2971,2012],{},[2939,2973,2974],{},"Adaptive (light ↔ dark)",[2939,2976,2977],{},"Default color, adapts to the current color scheme",[2979,2980,2981,2984,2985,2987],"tip",{},[696,2982,2983],{},"Pro tip:"," Use ",[700,2986,2012],{}," as your default. It adapts automatically to the user's color scheme, so you don't need to manage light and dark surfaces separately.",[688,2989,2991],{"id":2990},"variants","Variants",[692,2993,2994,2995,2999],{},"Three visual style variants control how the active tab is rendered. Each variant is combined with the selected color through ",[729,2996,2998],{"href":2997},"\u002Fdocs\u002Fapi\u002Frecipes#compound-variants","compound variants",", so you always get the correct indicator, surface, and text colors for your chosen color.",[2907,3001,3002],{"id":838},"Line",[692,3004,3005],{},"A colored rule on the active edge (the bottom in horizontal orientation, the inline end in vertical), with a matching track on the list. The classic, low-chrome tabs style and the default.",[2880,3007],{"story":3008,":panel":2749},"theme-recipes-navigation-tabs--line",[2907,3010,3012],{"id":3011},"pill","Pill",[692,3014,3015],{},"A segmented bar: the list sits on a muted, rounded surface and the active tab is raised onto its own surface with a subtle shadow. Matches the shadcn\u002FRadix default look.",[2880,3017],{"story":3018,":panel":2749},"theme-recipes-navigation-tabs--pill",[2907,3020,3022],{"id":3021},"soft","Soft",[692,3024,3025],{},"The active tab gets a soft tinted fill with no underline or bar. A gentle style that works well in dense layouts.",[2880,3027],{"story":3028,":panel":2749},"theme-recipes-navigation-tabs--soft",[688,3030,3032],{"id":3031},"sizes","Sizes",[692,3034,3035,3036,3039,3040,3043],{},"Three size variants from ",[700,3037,3038],{},"sm"," to ",[700,3041,3042],{},"lg"," control the trigger's font size and padding, the list gap, and the panel padding.",[2880,3045],{"story":3046,":panel":2749},"theme-recipes-navigation-tabs--large",[2907,3048,3050],{"id":3049},"size-reference","Size Reference",[2880,3052],{"story":3053},"theme-recipes-navigation-tabs--all-sizes",[2915,3055,3056,3072],{},[2918,3057,3058],{},[2921,3059,3060,3063,3066,3069],{},[2924,3061,3062],{},"Size",[2924,3064,3065],{},"Trigger font",[2924,3067,3068],{},"Trigger padding (V \u002F H)",[2924,3070,3071],{},"Panel padding",[2934,3073,3074,3098,3120],{},[2921,3075,3076,3080,3085,3093],{},[2939,3077,3078],{},[700,3079,3038],{},[2939,3081,3082],{},[700,3083,3084],{},"@font-size.xs",[2939,3086,3087,770,3090],{},[700,3088,3089],{},"@0.375",[700,3091,3092],{},"@0.625",[2939,3094,3095],{},[700,3096,3097],{},"@0.5",[2921,3099,3100,3104,3109,3116],{},[2939,3101,3102],{},[700,3103,1973],{},[2939,3105,3106],{},[700,3107,3108],{},"@font-size.sm",[2939,3110,3111,770,3113],{},[700,3112,3097],{},[700,3114,3115],{},"@0.75",[2939,3117,3118],{},[700,3119,3115],{},[2921,3121,3122,3126,3131,3138],{},[2939,3123,3124],{},[700,3125,3042],{},[2939,3127,3128],{},[700,3129,3130],{},"@font-size.md",[2939,3132,3133,770,3135],{},[700,3134,3092],{},[700,3136,3137],{},"@0.875",[2939,3139,3140],{},[700,3141,3142],{},"@1",[3144,3145,3146,3149,3150,3153],"note",{},[696,3147,3148],{},"Good to know:"," The ",[700,3151,3152],{},"size"," prop must be passed to each part individually. The trigger controls its own font and padding, the list controls the gap, and the content controls the panel padding.",[688,3155,3157],{"id":3156},"orientation","Orientation",[692,3159,694,3160,3162,3163,3165],{},[700,3161,3156],{}," axis switches between a horizontal tab bar (the default) and a vertical one. In vertical orientation the root places the list beside the panels, the list stacks its triggers, and the ",[700,3164,838],{}," indicator moves from the bottom edge to the inline end.",[2880,3167],{"story":3168},"theme-recipes-navigation-tabs--orientations",[3144,3170,3171,3173,3174,3176],{},[696,3172,3148],{}," Pass the same ",[700,3175,3156],{}," value to the root, list, and trigger parts so the layout and the active-edge indicator stay in sync.",[688,3178,342],{"id":3179},"states",[692,3181,3182],{},"The trigger responds to the standard interactive states:",[752,3184,3185,3197,3203,3217],{},[755,3186,3187,3190,3191,3193,3194,3196],{},[696,3188,3189],{},"Active."," The selected trigger is matched through ",[700,3192,2417],{}," and receives the variant's active styling (indicator, surface, or fill). Always set ",[700,3195,738],{}," on the active tab.",[755,3198,3199,3202],{},[696,3200,3201],{},"Hover."," Inactive triggers lift toward the emphasis color on hover for affordance.",[755,3204,3205,3208,3209,3212,3213,3216],{},[696,3206,3207],{},"Focus."," Keyboard focus shows a 2px ",[700,3210,3211],{},"@color.primary"," outline ring via ",[700,3214,3215],{},":focus-visible",". The content panel shows the same ring when focused.",[755,3218,3219,3222,3223,3226,3227,3230],{},[696,3220,3221],{},"Disabled."," A disabled trigger (",[700,3224,3225],{},"\u003Cbutton disabled>",") is dimmed to 50% opacity with ",[700,3228,3229],{},"cursor: not-allowed"," and ignores pointer events.",[688,3232,3234],{"id":3233},"anatomy","Anatomy",[692,3236,3237],{},"The Tabs recipe is composed of four independent recipes that work together:",[2915,3239,3240,3253],{},[2918,3241,3242],{},[2921,3243,3244,3247,3250],{},[2924,3245,3246],{},"Part",[2924,3248,3249],{},"Recipe",[2924,3251,3252],{},"Role",[2934,3254,3255,3272,3288,3305],{},[2921,3256,3257,3262,3266],{},[2939,3258,3259],{},[696,3260,3261],{},"Root",[2939,3263,3264],{},[700,3265,702],{},[2939,3267,3268,3269,3271],{},"Wrapper that lays out the bar and panel; owns ",[700,3270,3156],{}," and the gap",[2921,3273,3274,3279,3283],{},[2939,3275,3276],{},[696,3277,3278],{},"List",[2939,3280,3281],{},[700,3282,706],{},[2939,3284,694,3285,3287],{},[700,3286,710],{}," bar; paints the track (line) or container (pill)",[2921,3289,3290,3295,3299],{},[2939,3291,3292],{},[696,3293,3294],{},"Trigger",[2939,3296,3297],{},[700,3298,714],{},[2939,3300,3301,3302,3304],{},"Each ",[700,3303,718],{}," button; renders the active indicator per variant",[2921,3306,3307,3312,3316],{},[2939,3308,3309],{},[696,3310,3311],{},"Content",[2939,3313,3314],{},[700,3315,722],{},[2939,3317,3301,3318,3320],{},[700,3319,726],{},"; the visible panel with size-based padding",[827,3322,3324],{"className":2669,"code":3323,"language":2672,"meta":832,"style":832},"\u003C!-- All four parts working together -->\n\u003Cdiv class=\"tabs(...)\">\n    \u003Cdiv role=\"tablist\" class=\"tabsList(...)\">\n        \u003Cbutton role=\"tab\" aria-selected=\"true\" class=\"tabsTrigger(...)\">Tab 1\u003C\u002Fbutton>\n        \u003Cbutton role=\"tab\" aria-selected=\"false\" class=\"tabsTrigger(...)\">Tab 2\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv role=\"tabpanel\" class=\"tabsContent(...)\">Panel 1\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[700,3325,3326,3331,3350,3379,3427,3474,3482,3520],{"__ignoreMap":832},[836,3327,3328],{"class":838,"line":839},[836,3329,3330],{"class":2509},"\u003C!-- All four parts working together -->\n",[836,3332,3333,3335,3337,3339,3341,3343,3346,3348],{"class":838,"line":873},[836,3334,1199],{"class":846},[836,3336,1421],{"class":1202},[836,3338,2683],{"class":940},[836,3340,947],{"class":846},[836,3342,1214],{"class":846},[836,3344,3345],{"class":863},"tabs(...)",[836,3347,1214],{"class":846},[836,3349,1221],{"class":846},[836,3351,3352,3354,3356,3358,3360,3362,3364,3366,3368,3370,3372,3375,3377],{"class":838,"line":881},[836,3353,1418],{"class":846},[836,3355,1421],{"class":1202},[836,3357,1445],{"class":940},[836,3359,947],{"class":846},[836,3361,1214],{"class":846},[836,3363,769],{"class":863},[836,3365,1214],{"class":846},[836,3367,2683],{"class":940},[836,3369,947],{"class":846},[836,3371,1214],{"class":846},[836,3373,3374],{"class":863},"tabsList(...)",[836,3376,1214],{"class":846},[836,3378,1221],{"class":846},[836,3380,3381,3383,3385,3387,3389,3391,3393,3395,3397,3399,3401,3403,3405,3407,3409,3411,3414,3416,3418,3421,3423,3425],{"class":838,"line":890},[836,3382,1440],{"class":846},[836,3384,1517],{"class":1202},[836,3386,1445],{"class":940},[836,3388,947],{"class":846},[836,3390,1214],{"class":846},[836,3392,773],{"class":863},[836,3394,1214],{"class":846},[836,3396,2742],{"class":940},[836,3398,947],{"class":846},[836,3400,1214],{"class":846},[836,3402,2749],{"class":863},[836,3404,1214],{"class":846},[836,3406,2683],{"class":940},[836,3408,947],{"class":846},[836,3410,1214],{"class":846},[836,3412,3413],{"class":863},"tabsTrigger(...)",[836,3415,1214],{"class":846},[836,3417,2765],{"class":846},[836,3419,3420],{"class":850},"Tab 1",[836,3422,1397],{"class":846},[836,3424,1517],{"class":1202},[836,3426,1221],{"class":846},[836,3428,3429,3431,3433,3435,3437,3439,3441,3443,3445,3447,3449,3451,3453,3455,3457,3459,3461,3463,3465,3468,3470,3472],{"class":838,"line":898},[836,3430,1440],{"class":846},[836,3432,1517],{"class":1202},[836,3434,1445],{"class":940},[836,3436,947],{"class":846},[836,3438,1214],{"class":846},[836,3440,773],{"class":863},[836,3442,1214],{"class":846},[836,3444,2742],{"class":940},[836,3446,947],{"class":846},[836,3448,1214],{"class":846},[836,3450,2798],{"class":863},[836,3452,1214],{"class":846},[836,3454,2683],{"class":940},[836,3456,947],{"class":846},[836,3458,1214],{"class":846},[836,3460,3413],{"class":863},[836,3462,1214],{"class":846},[836,3464,2765],{"class":846},[836,3466,3467],{"class":850},"Tab 2",[836,3469,1397],{"class":846},[836,3471,1517],{"class":1202},[836,3473,1221],{"class":846},[836,3475,3476,3478,3480],{"class":838,"line":906},[836,3477,1716],{"class":846},[836,3479,1421],{"class":1202},[836,3481,1221],{"class":846},[836,3483,3484,3486,3488,3490,3492,3494,3496,3498,3500,3502,3504,3507,3509,3511,3514,3516,3518],{"class":838,"line":914},[836,3485,1418],{"class":846},[836,3487,1421],{"class":1202},[836,3489,1445],{"class":940},[836,3491,947],{"class":846},[836,3493,1214],{"class":846},[836,3495,776],{"class":863},[836,3497,1214],{"class":846},[836,3499,2683],{"class":940},[836,3501,947],{"class":846},[836,3503,1214],{"class":846},[836,3505,3506],{"class":863},"tabsContent(...)",[836,3508,1214],{"class":846},[836,3510,2765],{"class":846},[836,3512,3513],{"class":850},"Panel 1",[836,3515,1397],{"class":846},[836,3517,1421],{"class":1202},[836,3519,1221],{"class":846},[836,3521,3522,3524,3526],{"class":838,"line":931},[836,3523,1397],{"class":846},[836,3525,1421],{"class":1202},[836,3527,1221],{"class":846},[2979,3529,3530,3532,3533,1166,3536,1173,3539,3541,3542,2053],{},[696,3531,2983],{}," Pass ",[700,3534,3535],{},"color",[700,3537,3538],{},"variant",[700,3540,3156],{}," consistently to the list and trigger so the track and the active indicator line up. The content panel only needs a ",[700,3543,3152],{},[688,3545,568],{"id":3546},"accessibility",[752,3548,3549,3567,3585,3603],{},[755,3550,3551,3554,3555,3557,3558,3560,3561,3563,3564,3566],{},[696,3552,3553],{},"Use the tab roles."," Wrap the triggers in an element with ",[700,3556,710],{},", give each trigger ",[700,3559,718],{},", and give each panel ",[700,3562,726],{},". Mark the active trigger with ",[700,3565,2417],{}," — the recipe relies on it for the active styling.",[755,3568,3569,3572,3573,3576,3577,3580,3581,3584],{},[696,3570,3571],{},"Wire up keyboard navigation."," A tablist should support arrow-key movement between tabs, with ",[700,3574,3575],{},"Home","\u002F",[700,3578,3579],{},"End"," jumping to the first\u002Flast tab. Set ",[700,3582,3583],{},"aria-orientation"," on the list to match the layout.",[755,3586,3587,3590,3591,3594,3595,3598,3599,3602],{},[696,3588,3589],{},"Connect triggers and panels."," Give each trigger an ",[700,3592,3593],{},"id"," and point its ",[700,3596,3597],{},"aria-controls"," at the panel, and give each panel ",[700,3600,3601],{},"aria-labelledby"," pointing back at its trigger.",[755,3604,3605,3149,3608,3610,3611,2053],{},[696,3606,3607],{},"Verify contrast ratios.",[700,3609,2894],{}," color places light text on a dark surface. Default tokens meet WCAG AA 4.5:1 contrast. If you override colors, verify with the ",[729,3612,3616],{"href":3613,"rel":3614},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[3615],"nofollow","WebAIM Contrast Checker",[688,3618,3620],{"id":3619},"customization","Customization",[2907,3622,3624],{"id":3623},"overriding-defaults","Overriding Defaults",[692,3626,3627],{},"Each tabs 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 what changes:",[827,3629,3631],{"className":829,"code":3630,"filename":825,"language":831,"meta":832,"style":832},"import { styleframe } from 'virtual:styleframe';\nimport { useTabsListRecipe, useTabsTriggerRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst tabsList = useTabsListRecipe(s, {\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'pill',\n        size: 'md',\n        orientation: 'horizontal',\n    },\n});\n\nconst tabsTrigger = useTabsTriggerRecipe(s, {\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'pill',\n        size: 'md',\n        orientation: 'horizontal',\n    },\n});\n\nexport default s;\n",[700,3632,3633,3653,3677,3681,3695,3699,3716,3725,3740,3755,3770,3785,3790,3798,3802,3818,3826,3840,3854,3868,3882,3886,3894,3898],{"__ignoreMap":832},[836,3634,3635,3637,3639,3641,3643,3645,3647,3649,3651],{"class":838,"line":839},[836,3636,843],{"class":842},[836,3638,847],{"class":846},[836,3640,851],{"class":850},[836,3642,854],{"class":846},[836,3644,857],{"class":842},[836,3646,860],{"class":846},[836,3648,864],{"class":863},[836,3650,867],{"class":846},[836,3652,870],{"class":846},[836,3654,3655,3657,3659,3661,3663,3665,3667,3669,3671,3673,3675],{"class":838,"line":873},[836,3656,843],{"class":842},[836,3658,847],{"class":846},[836,3660,991],{"class":850},[836,3662,1086],{"class":846},[836,3664,1008],{"class":850},[836,3666,854],{"class":846},[836,3668,857],{"class":842},[836,3670,860],{"class":846},[836,3672,924],{"class":863},[836,3674,867],{"class":846},[836,3676,870],{"class":846},[836,3678,3679],{"class":838,"line":881},[836,3680,934],{"emptyLinePlaceholder":223},[836,3682,3683,3685,3687,3689,3691,3693],{"class":838,"line":890},[836,3684,941],{"class":940},[836,3686,944],{"class":850},[836,3688,947],{"class":846},[836,3690,851],{"class":950},[836,3692,953],{"class":850},[836,3694,870],{"class":846},[836,3696,3697],{"class":838,"line":898},[836,3698,934],{"emptyLinePlaceholder":223},[836,3700,3701,3703,3705,3707,3709,3712,3714],{"class":838,"line":906},[836,3702,941],{"class":940},[836,3704,986],{"class":850},[836,3706,947],{"class":846},[836,3708,991],{"class":950},[836,3710,3711],{"class":850},"(s",[836,3713,1086],{"class":846},[836,3715,878],{"class":846},[836,3717,3718,3721,3723],{"class":838,"line":914},[836,3719,3720],{"class":1202},"    defaultVariants",[836,3722,1306],{"class":846},[836,3724,878],{"class":846},[836,3726,3727,3730,3732,3734,3736,3738],{"class":838,"line":931},[836,3728,3729],{"class":1202},"        color",[836,3731,1306],{"class":846},[836,3733,860],{"class":846},[836,3735,2012],{"class":863},[836,3737,867],{"class":846},[836,3739,887],{"class":846},[836,3741,3742,3745,3747,3749,3751,3753],{"class":838,"line":937},[836,3743,3744],{"class":1202},"        variant",[836,3746,1306],{"class":846},[836,3748,860],{"class":846},[836,3750,3011],{"class":863},[836,3752,867],{"class":846},[836,3754,887],{"class":846},[836,3756,3757,3760,3762,3764,3766,3768],{"class":838,"line":958},[836,3758,3759],{"class":1202},"        size",[836,3761,1306],{"class":846},[836,3763,860],{"class":846},[836,3765,1973],{"class":863},[836,3767,867],{"class":846},[836,3769,887],{"class":846},[836,3771,3772,3775,3777,3779,3781,3783],{"class":838,"line":963},[836,3773,3774],{"class":1202},"        orientation",[836,3776,1306],{"class":846},[836,3778,860],{"class":846},[836,3780,1959],{"class":863},[836,3782,867],{"class":846},[836,3784,887],{"class":846},[836,3786,3787],{"class":838,"line":981},[836,3788,3789],{"class":846},"    },\n",[836,3791,3792,3794,3796],{"class":838,"line":998},[836,3793,917],{"class":846},[836,3795,1390],{"class":850},[836,3797,870],{"class":846},[836,3799,3800],{"class":838,"line":1015},[836,3801,934],{"emptyLinePlaceholder":223},[836,3803,3804,3806,3808,3810,3812,3814,3816],{"class":838,"line":1032},[836,3805,941],{"class":940},[836,3807,1003],{"class":850},[836,3809,947],{"class":846},[836,3811,1008],{"class":950},[836,3813,3711],{"class":850},[836,3815,1086],{"class":846},[836,3817,878],{"class":846},[836,3819,3820,3822,3824],{"class":838,"line":1037},[836,3821,3720],{"class":1202},[836,3823,1306],{"class":846},[836,3825,878],{"class":846},[836,3827,3828,3830,3832,3834,3836,3838],{"class":838,"line":1492},[836,3829,3729],{"class":1202},[836,3831,1306],{"class":846},[836,3833,860],{"class":846},[836,3835,2012],{"class":863},[836,3837,867],{"class":846},[836,3839,887],{"class":846},[836,3841,3842,3844,3846,3848,3850,3852],{"class":838,"line":1507},[836,3843,3744],{"class":1202},[836,3845,1306],{"class":846},[836,3847,860],{"class":846},[836,3849,3011],{"class":863},[836,3851,867],{"class":846},[836,3853,887],{"class":846},[836,3855,3856,3858,3860,3862,3864,3866],{"class":838,"line":1522},[836,3857,3759],{"class":1202},[836,3859,1306],{"class":846},[836,3861,860],{"class":846},[836,3863,1973],{"class":863},[836,3865,867],{"class":846},[836,3867,887],{"class":846},[836,3869,3870,3872,3874,3876,3878,3880],{"class":838,"line":1536},[836,3871,3774],{"class":1202},[836,3873,1306],{"class":846},[836,3875,860],{"class":846},[836,3877,1959],{"class":863},[836,3879,867],{"class":846},[836,3881,887],{"class":846},[836,3883,3884],{"class":838,"line":1551},[836,3885,3789],{"class":846},[836,3887,3888,3890,3892],{"class":838,"line":1566},[836,3889,917],{"class":846},[836,3891,1390],{"class":850},[836,3893,870],{"class":846},[836,3895,3896],{"class":838,"line":1581},[836,3897,934],{"emptyLinePlaceholder":223},[836,3899,3900,3902,3904,3906],{"class":838,"line":1587},[836,3901,1040],{"class":842},[836,3903,1043],{"class":842},[836,3905,1046],{"class":850},[836,3907,870],{"class":846},[2907,3909,3911],{"id":3910},"filtering-variants","Filtering Variants",[692,3913,3914,3915,3918],{},"If you only need a subset of the available variants, use the ",[700,3916,3917],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[827,3920,3922],{"className":829,"code":3921,"filename":825,"language":831,"meta":832,"style":832},"import { styleframe } from 'virtual:styleframe';\nimport { useTabsTriggerRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the neutral color with the line and pill styles\nconst tabsTrigger = useTabsTriggerRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        variant: ['line', 'pill'],\n    },\n});\n\nexport default s;\n",[700,3923,3924,3944,3964,3968,3982,3986,3991,4007,4016,4034,4060,4064,4072,4076],{"__ignoreMap":832},[836,3925,3926,3928,3930,3932,3934,3936,3938,3940,3942],{"class":838,"line":839},[836,3927,843],{"class":842},[836,3929,847],{"class":846},[836,3931,851],{"class":850},[836,3933,854],{"class":846},[836,3935,857],{"class":842},[836,3937,860],{"class":846},[836,3939,864],{"class":863},[836,3941,867],{"class":846},[836,3943,870],{"class":846},[836,3945,3946,3948,3950,3952,3954,3956,3958,3960,3962],{"class":838,"line":873},[836,3947,843],{"class":842},[836,3949,847],{"class":846},[836,3951,1008],{"class":850},[836,3953,854],{"class":846},[836,3955,857],{"class":842},[836,3957,860],{"class":846},[836,3959,924],{"class":863},[836,3961,867],{"class":846},[836,3963,870],{"class":846},[836,3965,3966],{"class":838,"line":881},[836,3967,934],{"emptyLinePlaceholder":223},[836,3969,3970,3972,3974,3976,3978,3980],{"class":838,"line":890},[836,3971,941],{"class":940},[836,3973,944],{"class":850},[836,3975,947],{"class":846},[836,3977,851],{"class":950},[836,3979,953],{"class":850},[836,3981,870],{"class":846},[836,3983,3984],{"class":838,"line":898},[836,3985,934],{"emptyLinePlaceholder":223},[836,3987,3988],{"class":838,"line":906},[836,3989,3990],{"class":2509},"\u002F\u002F Only generate the neutral color with the line and pill styles\n",[836,3992,3993,3995,3997,3999,4001,4003,4005],{"class":838,"line":914},[836,3994,941],{"class":940},[836,3996,1003],{"class":850},[836,3998,947],{"class":846},[836,4000,1008],{"class":950},[836,4002,3711],{"class":850},[836,4004,1086],{"class":846},[836,4006,878],{"class":846},[836,4008,4009,4012,4014],{"class":838,"line":931},[836,4010,4011],{"class":1202},"    filter",[836,4013,1306],{"class":846},[836,4015,878],{"class":846},[836,4017,4018,4020,4022,4024,4026,4028,4030,4032],{"class":838,"line":937},[836,4019,3729],{"class":1202},[836,4021,1306],{"class":846},[836,4023,1893],{"class":850},[836,4025,867],{"class":846},[836,4027,2012],{"class":863},[836,4029,867],{"class":846},[836,4031,1365],{"class":850},[836,4033,887],{"class":846},[836,4035,4036,4038,4040,4042,4044,4046,4048,4050,4052,4054,4056,4058],{"class":838,"line":958},[836,4037,3744],{"class":1202},[836,4039,1306],{"class":846},[836,4041,1893],{"class":850},[836,4043,867],{"class":846},[836,4045,838],{"class":863},[836,4047,867],{"class":846},[836,4049,1086],{"class":846},[836,4051,860],{"class":846},[836,4053,3011],{"class":863},[836,4055,867],{"class":846},[836,4057,1365],{"class":850},[836,4059,887],{"class":846},[836,4061,4062],{"class":838,"line":963},[836,4063,3789],{"class":846},[836,4065,4066,4068,4070],{"class":838,"line":981},[836,4067,917],{"class":846},[836,4069,1390],{"class":850},[836,4071,870],{"class":846},[836,4073,4074],{"class":838,"line":998},[836,4075,934],{"emptyLinePlaceholder":223},[836,4077,4078,4080,4082,4084],{"class":838,"line":1015},[836,4079,1040],{"class":842},[836,4081,1043],{"class":842},[836,4083,1046],{"class":850},[836,4085,870],{"class":846},[3144,4087,4088,4090],{},[696,4089,3148],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,4092,73],{"id":4093},"api-reference",[2907,4095,4097],{"id":4096},"usetabsrecipes-options",[700,4098,4099],{},"useTabsRecipe(s, options?)",[692,4101,4102],{},"Creates the root wrapper recipe. Lays out the list and panel and owns the orientation.",[692,4104,4105],{},[696,4106,4107],{},"Variants:",[2915,4109,4110,4123],{},[2918,4111,4112],{},[2921,4113,4114,4117,4120],{},[2924,4115,4116],{},"Variant",[2924,4118,4119],{},"Options",[2924,4121,4122],{},"Default",[2934,4124,4125,4142],{},[2921,4126,4127,4131,4138],{},[2939,4128,4129],{},[700,4130,3156],{},[2939,4132,4133,1166,4135],{},[700,4134,1959],{},[700,4136,4137],{},"vertical",[2939,4139,4140],{},[700,4141,1959],{},[2921,4143,4144,4148,4156],{},[2939,4145,4146],{},[700,4147,3152],{},[2939,4149,4150,1166,4152,1166,4154],{},[700,4151,3038],{},[700,4153,1973],{},[700,4155,3042],{},[2939,4157,4158],{},[700,4159,1973],{},[2907,4161,4163],{"id":4162},"usetabslistrecipes-options",[700,4164,4165],{},"useTabsListRecipe(s, options?)",[692,4167,4168],{},"Creates the tab list recipe. Paints the line track or the pill container.",[692,4170,4171],{},[696,4172,4107],{},[2915,4174,4175,4185],{},[2918,4176,4177],{},[2921,4178,4179,4181,4183],{},[2924,4180,4116],{},[2924,4182,4119],{},[2924,4184,4122],{},[2934,4186,4187,4205,4223,4241],{},[2921,4188,4189,4193,4201],{},[2939,4190,4191],{},[700,4192,3535],{},[2939,4194,4195,1166,4197,1166,4199],{},[700,4196,2891],{},[700,4198,2894],{},[700,4200,2012],{},[2939,4202,4203],{},[700,4204,2012],{},[2921,4206,4207,4211,4219],{},[2939,4208,4209],{},[700,4210,3538],{},[2939,4212,4213,1166,4215,1166,4217],{},[700,4214,838],{},[700,4216,3011],{},[700,4218,3021],{},[2939,4220,4221],{},[700,4222,838],{},[2921,4224,4225,4229,4237],{},[2939,4226,4227],{},[700,4228,3152],{},[2939,4230,4231,1166,4233,1166,4235],{},[700,4232,3038],{},[700,4234,1973],{},[700,4236,3042],{},[2939,4238,4239],{},[700,4240,1973],{},[2921,4242,4243,4247,4253],{},[2939,4244,4245],{},[700,4246,3156],{},[2939,4248,4249,1166,4251],{},[700,4250,1959],{},[700,4252,4137],{},[2939,4254,4255],{},[700,4256,1959],{},[2907,4258,4260],{"id":4259},"usetabstriggerrecipes-options",[700,4261,4262],{},"useTabsTriggerRecipe(s, options?)",[692,4264,4265,4266,4268],{},"Creates the trigger recipe. Renders the active indicator per variant via the ",[700,4267,738],{}," modifier.",[692,4270,4271],{},[696,4272,4107],{},[2915,4274,4275,4285],{},[2918,4276,4277],{},[2921,4278,4279,4281,4283],{},[2924,4280,4116],{},[2924,4282,4119],{},[2924,4284,4122],{},[2934,4286,4287,4305,4323,4341],{},[2921,4288,4289,4293,4301],{},[2939,4290,4291],{},[700,4292,3535],{},[2939,4294,4295,1166,4297,1166,4299],{},[700,4296,2891],{},[700,4298,2894],{},[700,4300,2012],{},[2939,4302,4303],{},[700,4304,2012],{},[2921,4306,4307,4311,4319],{},[2939,4308,4309],{},[700,4310,3538],{},[2939,4312,4313,1166,4315,1166,4317],{},[700,4314,838],{},[700,4316,3011],{},[700,4318,3021],{},[2939,4320,4321],{},[700,4322,838],{},[2921,4324,4325,4329,4337],{},[2939,4326,4327],{},[700,4328,3152],{},[2939,4330,4331,1166,4333,1166,4335],{},[700,4332,3038],{},[700,4334,1973],{},[700,4336,3042],{},[2939,4338,4339],{},[700,4340,1973],{},[2921,4342,4343,4347,4353],{},[2939,4344,4345],{},[700,4346,3156],{},[2939,4348,4349,1166,4351],{},[700,4350,1959],{},[700,4352,4137],{},[2939,4354,4355],{},[700,4356,1959],{},[2907,4358,4360],{"id":4359},"usetabscontentrecipes-options",[700,4361,4362],{},"useTabsContentRecipe(s, options?)",[692,4364,4365],{},"Creates the content panel recipe with adaptive text color, a focus ring, and size-based padding.",[692,4367,4368],{},[696,4369,4107],{},[2915,4371,4372,4382],{},[2918,4373,4374],{},[2921,4375,4376,4378,4380],{},[2924,4377,4116],{},[2924,4379,4119],{},[2924,4381,4122],{},[2934,4383,4384],{},[2921,4385,4386,4390,4398],{},[2939,4387,4388],{},[700,4389,3152],{},[2939,4391,4392,1166,4394,1166,4396],{},[700,4393,3038],{},[700,4395,1973],{},[700,4397,3042],{},[2939,4399,4400],{},[700,4401,1973],{},[692,4403,4404],{},[729,4405,4406],{"href":132},"Learn more about recipes →",[688,4408,4410],{"id":4409},"best-practices","Best Practices",[752,4412,4413,4424,4437,4446,4461],{},[755,4414,4415,4420,4421,4423],{},[696,4416,4417,4418],{},"Always set ",[700,4419,738],{},": The active styling is driven by ",[700,4422,2417],{},". Without it, no tab appears selected.",[755,4425,4426,4436],{},[696,4427,4428,4429,1166,4431,1173,4433,4435],{},"Pass ",[700,4430,3535],{},[700,4432,3538],{},[700,4434,3156],{}," consistently",": The list track and the trigger indicator must share these values to line up.",[755,4438,4439,4445],{},[696,4440,4441,4442,4444],{},"Use ",[700,4443,2012],{}," for general-purpose tabs",": It adapts to light and dark mode automatically.",[755,4447,4448,4454,4455,4457,4458,4460],{},[696,4449,4450,4451,4453],{},"Pick ",[700,4452,3011],{}," for a segmented control feel",": Reserve ",[700,4456,838],{}," for low-chrome navigation and ",[700,4459,3021],{}," for dense layouts.",[755,4462,4463,4466,4467,4469],{},[696,4464,4465],{},"Filter what you don't need",": If your tabs only use one color, pass a ",[700,4468,3917],{}," option to reduce generated CSS.",[688,4471,4473],{"id":4472},"faq","FAQ",[4475,4476,4477,4489,4512,4526,4540,4551],"accordion",{},[4478,4479,4482,4483,770,4485,770,4487,777],"accordion-item",{"icon":4480,"label":4481},"i-lucide-circle-help","Why are there four separate recipes instead of one?","Tabs have distinct structural parts (the wrapper, the bar, the buttons, the panels) that need independent styling — different layout, indicators, and padding. Four separate recipes give each part its own base styles and compound variants while sharing the same variant vocabulary, and they map cleanly onto the ",[700,4484,769],{},[700,4486,773],{},[700,4488,776],{},[4478,4490,4492,4493,4495,4496,4499,4500,4502,4503,4505,4506,4508,4509,4511],{"icon":4480,"label":4491},"How does the active tab get styled?","The trigger recipe matches the active tab through the ",[700,4494,738],{}," modifier (",[700,4497,4498],{},"[aria-selected=\"true\"]","). Set ",[700,4501,2417],{}," on the selected trigger and the recipe paints the variant's active state — an underline for ",[700,4504,838],{},", a raised surface for ",[700,4507,3011],{},", or a tinted fill for ",[700,4510,3021],{},". This keeps the styling tied to accessible markup instead of an extra class.",[4478,4513,4515,4516,1166,4519,4522,4523,4525],{"icon":4480,"label":4514},"Does the recipe manage which tab is open?","No. The recipes are pure styling — they generate class names with zero runtime logic. You own the active value (a ",[700,4517,4518],{},"ref",[700,4520,4521],{},"useState",", signal, or attribute) and toggle ",[700,4524,738],{}," plus the panel visibility. This keeps the recipe framework-agnostic.",[4478,4527,4529,4530,4533,4534,4536,4537,4539],{"icon":4480,"label":4528},"How does vertical orientation work?","Setting ",[700,4531,4532],{},"orientation: 'vertical'"," flips the root to a row layout (list beside panels), stacks the list's triggers in a column, and moves the ",[700,4535,838],{}," indicator from the bottom edge to the inline end. Pass the same ",[700,4538,3156],{}," to the root, list, and trigger so everything stays aligned.",[4478,4541,4543,4544,1166,4546,1173,4548,4550],{"icon":4480,"label":4542},"Why doesn't the Tabs recipe include semantic colors like primary or success?","Tabs are navigation surfaces, not status indicators. Semantic colors communicate meaning and are better suited to badges, buttons, and callouts. Tabs use ",[700,4545,2891],{},[700,4547,2894],{},[700,4549,2012],{}," to provide surface variations that work across all content without implying a status.",[4478,4552,4554,4555,1166,4558,1173,4561,4564,4565,4568],{"icon":4480,"label":4553},"Can I use the Tabs recipe without the design tokens preset?","The Tabs recipes reference design tokens like ",[700,4556,4557],{},"@color.gray-200",[700,4559,4560],{},"@border-radius.lg",[700,4562,4563],{},"@box-shadow.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 ",[700,4566,4567],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[4570,4571,4572],"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 .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":832,"searchDepth":873,"depth":873,"links":4574},[4575,4576,4577,4578,4581,4586,4589,4590,4591,4592,4593,4597,4603,4604],{"id":690,"depth":873,"text":78},{"id":746,"depth":873,"text":747},{"id":804,"depth":873,"text":805},{"id":2885,"depth":873,"text":195,"children":4579},[4580],{"id":2909,"depth":881,"text":2910},{"id":2990,"depth":873,"text":2991,"children":4582},[4583,4584,4585],{"id":838,"depth":881,"text":3002},{"id":3011,"depth":881,"text":3012},{"id":3021,"depth":881,"text":3022},{"id":3031,"depth":873,"text":3032,"children":4587},[4588],{"id":3049,"depth":881,"text":3050},{"id":3156,"depth":873,"text":3157},{"id":3179,"depth":873,"text":342},{"id":3233,"depth":873,"text":3234},{"id":3546,"depth":873,"text":568},{"id":3619,"depth":873,"text":3620,"children":4594},[4595,4596],{"id":3623,"depth":881,"text":3624},{"id":3910,"depth":881,"text":3911},{"id":4093,"depth":873,"text":73,"children":4598},[4599,4600,4601,4602],{"id":4096,"depth":881,"text":4099},{"id":4162,"depth":881,"text":4165},{"id":4259,"depth":881,"text":4262},{"id":4359,"depth":881,"text":4362},{"id":4409,"depth":873,"text":4410},{"id":4472,"depth":873,"text":4473},"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.",null,{},{"icon":7},{"title":396,"description":4605},"eElyS-8i__-LWQ8lHYpEpl_Q3FGfCE5N1BZoL98xlYE",[4612,4614],{"title":392,"path":393,"stem":394,"description":4613,"icon":7,"children":-1},"A persistent navigation surface for application shells. Composed of fifteen coordinated recipes — panel, header, content, footer, groups, menus, interactive menu buttons, sub-menus, separators, actions, and badges — with three colors, three surface styles, three sizes, and a collapsible icon rail.",{"title":404,"path":405,"stem":406,"description":4615,"icon":7,"children":-1},"A compact labeling component for status indicators, counts, and categorization. Supports multiple colors, visual styles, and sizes through the recipe system.",1781596336464]