[{"data":1,"prerenderedAt":5618},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-accordion":682,"-docs-theme-components-accordion-surround":5613},{"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":523,"body":684,"description":5607,"extension":1369,"links":5608,"meta":5609,"navigation":5610,"path":524,"seo":5611,"stem":525,"__hash__":5612},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion.md",{"type":685,"value":686,"toc":5577},"minimark",[687,691,725,748,752,755,798,802,3571,3574,3588,3593,3596,3600,3603,3670,3680,3684,3691,3694,3697,3700,3704,3707,3710,3714,3724,3727,3731,3734,3852,3863,3867,3870,3975,3994,4189,4201,4204,4211,4277,4365,4382,4386,4390,4396,4630,4634,4641,4800,4805,4808,4814,4817,4822,4943,4948,5019,5025,5034,5038,5104,5110,5125,5129,5195,5201,5219,5223,5289,5295,5309,5313,5379,5384,5388,5460,5464,5573],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,707,708,711,712,715,716,719,720,724],"p",{},"The ",[696,697,523],"strong",{}," is a vertically stacked set of disclosure panels — each one expands to reveal its content and collapses to hide it. It is composed of five recipe parts: ",[700,701,702],"code",{},"useAccordionRecipe()"," for the root container, ",[700,705,706],{},"useAccordionItemRecipe()"," for each panel and its divider, ",[700,709,710],{},"useAccordionTriggerRecipe()"," for the clickable header button, ",[700,713,714],{},"useAccordionContentRecipe()"," for the animated height wrapper, and ",[700,717,718],{},"useAccordionBodyRecipe()"," for the padded inner content. Each composable creates a fully configured ",[721,722,723],"a",{"href":132},"recipe"," with color, variant, and size options — plus compound variants that handle the color-variant combinations automatically.",[692,726,727,728,731,732,735,736,739,740,743,744,747],{},"The Accordion recipes integrate directly with the default ",[721,729,730],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS. The open\u002Fclose animation is pure CSS — the content wrapper animates ",[700,733,734],{},"grid-template-rows"," from ",[700,737,738],{},"0fr"," to ",[700,741,742],{},"1fr"," based on a ",[700,745,746],{},"data-state"," attribute, so there is no JavaScript height measurement.",[688,749,751],{"id":750},"why-use-the-accordion-recipe","Why use the Accordion recipe?",[692,753,754],{},"The Accordion recipe helps you:",[756,757,758,765,771,780,786,792],"ul",{},[759,760,761,764],"li",{},[696,762,763],{},"Ship faster with sensible defaults",": Get 3 colors, 2 visual styles, and 3 sizes out of the box with a single set of composable calls.",[759,766,767,770],{},[696,768,769],{},"Compose disclosure layouts",": Five coordinated recipes (root, item, trigger, content, body) share the same variant axes, so your accordions stay internally consistent.",[759,772,773,776,777,779],{},[696,774,775],{},"Animate without JavaScript",": The content wrapper animates height with a pure-CSS grid-rows transition driven by ",[700,778,746],{}," — no measuring, no layout thrash.",[759,781,782,785],{},[696,783,784],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules, including divider colors and dark mode overrides.",[759,787,788,791],{},[696,789,790],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[759,793,794,797],{},[696,795,796],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, or size values at compile time.",[688,799,801],{"id":800},"usage","Usage",[803,804,806,811,818,1177,1181,1194,3563,3567],"steps",{"level":805},"4",[807,808,810],"h4",{"id":809},"register-the-recipes","Register the recipes",[692,812,813,814,817],{},"Add the Accordion recipes to a local Styleframe instance. The global ",[700,815,816],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[819,820,822,1070],"code-tree",{"default-value":821},"src\u002Fcomponents\u002Faccordion.styleframe.ts",[823,824,829],"pre",{"className":825,"code":826,"filename":821,"language":827,"meta":828,"style":828},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useAccordionRecipe,\n    useAccordionItemRecipe,\n    useAccordionTriggerRecipe,\n    useAccordionContentRecipe,\n    useAccordionBodyRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst accordion = useAccordionRecipe(s);\nconst accordionItem = useAccordionItemRecipe(s);\nconst accordionTrigger = useAccordionTriggerRecipe(s);\nconst accordionContent = useAccordionContentRecipe(s);\nconst accordionBody = useAccordionBodyRecipe(s);\n\nexport default s;\n","ts","",[700,830,831,867,875,884,892,900,908,916,933,939,960,965,983,1000,1017,1034,1051,1056],{"__ignoreMap":828},[832,833,836,840,844,848,851,854,857,861,864],"span",{"class":834,"line":835},"line",1,[832,837,839],{"class":838},"s7zQu","import",[832,841,843],{"class":842},"sMK4o"," {",[832,845,847],{"class":846},"sTEyZ"," styleframe",[832,849,850],{"class":842}," }",[832,852,853],{"class":838}," from",[832,855,856],{"class":842}," '",[832,858,860],{"class":859},"sfazB","virtual:styleframe",[832,862,863],{"class":842},"'",[832,865,866],{"class":842},";\n",[832,868,870,872],{"class":834,"line":869},2,[832,871,839],{"class":838},[832,873,874],{"class":842}," {\n",[832,876,878,881],{"class":834,"line":877},3,[832,879,880],{"class":846},"    useAccordionRecipe",[832,882,883],{"class":842},",\n",[832,885,887,890],{"class":834,"line":886},4,[832,888,889],{"class":846},"    useAccordionItemRecipe",[832,891,883],{"class":842},[832,893,895,898],{"class":834,"line":894},5,[832,896,897],{"class":846},"    useAccordionTriggerRecipe",[832,899,883],{"class":842},[832,901,903,906],{"class":834,"line":902},6,[832,904,905],{"class":846},"    useAccordionContentRecipe",[832,907,883],{"class":842},[832,909,911,914],{"class":834,"line":910},7,[832,912,913],{"class":846},"    useAccordionBodyRecipe",[832,915,883],{"class":842},[832,917,919,922,924,926,929,931],{"class":834,"line":918},8,[832,920,921],{"class":842},"}",[832,923,853],{"class":838},[832,925,856],{"class":842},[832,927,928],{"class":859},"@styleframe\u002Ftheme",[832,930,863],{"class":842},[832,932,866],{"class":842},[832,934,936],{"class":834,"line":935},9,[832,937,938],{"emptyLinePlaceholder":223},"\n",[832,940,942,946,949,952,955,958],{"class":834,"line":941},10,[832,943,945],{"class":944},"spNyl","const",[832,947,948],{"class":846}," s ",[832,950,951],{"class":842},"=",[832,953,847],{"class":954},"s2Zo4",[832,956,957],{"class":846},"()",[832,959,866],{"class":842},[832,961,963],{"class":834,"line":962},11,[832,964,938],{"emptyLinePlaceholder":223},[832,966,968,970,973,975,978,981],{"class":834,"line":967},12,[832,969,945],{"class":944},[832,971,972],{"class":846}," accordion ",[832,974,951],{"class":842},[832,976,977],{"class":954}," useAccordionRecipe",[832,979,980],{"class":846},"(s)",[832,982,866],{"class":842},[832,984,986,988,991,993,996,998],{"class":834,"line":985},13,[832,987,945],{"class":944},[832,989,990],{"class":846}," accordionItem ",[832,992,951],{"class":842},[832,994,995],{"class":954}," useAccordionItemRecipe",[832,997,980],{"class":846},[832,999,866],{"class":842},[832,1001,1003,1005,1008,1010,1013,1015],{"class":834,"line":1002},14,[832,1004,945],{"class":944},[832,1006,1007],{"class":846}," accordionTrigger ",[832,1009,951],{"class":842},[832,1011,1012],{"class":954}," useAccordionTriggerRecipe",[832,1014,980],{"class":846},[832,1016,866],{"class":842},[832,1018,1020,1022,1025,1027,1030,1032],{"class":834,"line":1019},15,[832,1021,945],{"class":944},[832,1023,1024],{"class":846}," accordionContent ",[832,1026,951],{"class":842},[832,1028,1029],{"class":954}," useAccordionContentRecipe",[832,1031,980],{"class":846},[832,1033,866],{"class":842},[832,1035,1037,1039,1042,1044,1047,1049],{"class":834,"line":1036},16,[832,1038,945],{"class":944},[832,1040,1041],{"class":846}," accordionBody ",[832,1043,951],{"class":842},[832,1045,1046],{"class":954}," useAccordionBodyRecipe",[832,1048,980],{"class":846},[832,1050,866],{"class":842},[832,1052,1054],{"class":834,"line":1053},17,[832,1055,938],{"emptyLinePlaceholder":223},[832,1057,1059,1062,1065,1068],{"class":834,"line":1058},18,[832,1060,1061],{"class":838},"export",[832,1063,1064],{"class":838}," default",[832,1066,1067],{"class":846}," s",[832,1069,866],{"class":842},[823,1071,1073],{"className":825,"code":1072,"filename":816,"language":827,"meta":828,"style":828},"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,1074,1075,1096,1123,1127,1141,1145,1154,1163,1167],{"__ignoreMap":828},[832,1076,1077,1079,1081,1083,1085,1087,1089,1092,1094],{"class":834,"line":835},[832,1078,839],{"class":838},[832,1080,843],{"class":842},[832,1082,847],{"class":846},[832,1084,850],{"class":842},[832,1086,853],{"class":838},[832,1088,856],{"class":842},[832,1090,1091],{"class":859},"styleframe",[832,1093,863],{"class":842},[832,1095,866],{"class":842},[832,1097,1098,1100,1102,1105,1108,1111,1113,1115,1117,1119,1121],{"class":834,"line":869},[832,1099,839],{"class":838},[832,1101,843],{"class":842},[832,1103,1104],{"class":846}," useDesignTokensPreset",[832,1106,1107],{"class":842},",",[832,1109,1110],{"class":846}," useUtilitiesPreset",[832,1112,850],{"class":842},[832,1114,853],{"class":838},[832,1116,856],{"class":842},[832,1118,928],{"class":859},[832,1120,863],{"class":842},[832,1122,866],{"class":842},[832,1124,1125],{"class":834,"line":877},[832,1126,938],{"emptyLinePlaceholder":223},[832,1128,1129,1131,1133,1135,1137,1139],{"class":834,"line":886},[832,1130,945],{"class":944},[832,1132,948],{"class":846},[832,1134,951],{"class":842},[832,1136,847],{"class":954},[832,1138,957],{"class":846},[832,1140,866],{"class":842},[832,1142,1143],{"class":834,"line":894},[832,1144,938],{"emptyLinePlaceholder":223},[832,1146,1147,1150,1152],{"class":834,"line":902},[832,1148,1149],{"class":954},"useDesignTokensPreset",[832,1151,980],{"class":846},[832,1153,866],{"class":842},[832,1155,1156,1159,1161],{"class":834,"line":910},[832,1157,1158],{"class":954},"useUtilitiesPreset",[832,1160,980],{"class":846},[832,1162,866],{"class":842},[832,1164,1165],{"class":834,"line":918},[832,1166,938],{"emptyLinePlaceholder":223},[832,1168,1169,1171,1173,1175],{"class":834,"line":935},[832,1170,1061],{"class":838},[832,1172,1064],{"class":838},[832,1174,1067],{"class":846},[832,1176,866],{"class":842},[807,1178,1180],{"id":1179},"build-the-component","Build the component",[692,1182,1183,1184,1190,1191,1193],{},"Import the runtime functions from the virtual module and pass variant props to compute class names. The accordion is a ",[721,1185,1189],{"href":1186,"rel":1187},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002Fpatterns\u002Faccordion\u002F",[1188],"nofollow","disclosure widget",", so you own a small amount of open\u002Fclose state and reflect it on each trigger and content wrapper with a ",[700,1192,746],{}," attribute:",[1195,1196,1197,2176,3059],"framework-switcher",{},[1198,1199,1200],"template",{"v-slot:vue":828},[823,1201,1206],{"className":1202,"code":1203,"filename":1204,"language":1205,"meta":828,"style":828},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport {\n    accordion,\n    accordionItem,\n    accordionTrigger,\n    accordionContent,\n    accordionBody,\n    type AccordionProps,\n} from \"virtual:styleframe\";\n\nconst { color = \"neutral\", variant = \"solid\", size = \"md\" } =\n    defineProps\u003CAccordionProps>();\n\nconst items = [\n    { value: \"item-1\", label: \"Is it accessible?\", content: \"Yes. It follows the WAI-ARIA disclosure pattern.\" },\n    { value: \"item-2\", label: \"Is it animated?\", content: \"Yes. Height animates with a pure-CSS grid transition.\" },\n];\n\nconst open = ref\u003Cstring | null>(\"item-1\");\nconst toggle = (value: string) => (open.value = open.value === value ? null : value);\nconst stateOf = (value: string) => (open.value === value ? \"open\" : \"closed\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"accordion({ color, variant, size })\">\n        \u003Cdiv\n            v-for=\"item in items\"\n            :key=\"item.value\"\n            :class=\"accordionItem({ color, variant, size })\"\n        >\n            \u003C!-- A heading wraps the trigger for the WAI-ARIA accordion pattern -->\n            \u003Ch3>\n                \u003Cbutton\n                    type=\"button\"\n                    :class=\"accordionTrigger({ color, variant, size })\"\n                    :data-state=\"stateOf(item.value)\"\n                    :aria-expanded=\"open === item.value\"\n                    @click=\"toggle(item.value)\"\n                >\n                    {{ item.label }}\n                    \u003Csvg class=\"accordion-trigger-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n                        \u003Cpath d=\"m6 9 6 6 6-6\" \u002F>\n                    \u003C\u002Fsvg>\n                \u003C\u002Fbutton>\n            \u003C\u002Fh3>\n            \u003Cdiv :class=\"accordionContent({ size })\" :data-state=\"stateOf(item.value)\">\n                \u003C!-- The grid child is the overflow clip; padding lives on the body inside it -->\n                \u003Cdiv>\n                    \u003Cdiv :class=\"accordionBody({ size })\">{{ item.content }}\u003C\u002Fdiv>\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FAccordion.vue","vue",[700,1207,1208,1235,1257,1263,1270,1277,1284,1291,1298,1308,1322,1326,1377,1395,1399,1411,1460,1503,1510,1515,1554,1618,1672,1682,1687,1696,1719,1728,1744,1759,1774,1780,1787,1798,1807,1822,1837,1852,1867,1882,1888,1894,2000,2024,2034,2044,2054,2085,2091,2100,2129,2138,2147,2157,2167],{"__ignoreMap":828},[832,1209,1210,1213,1217,1220,1223,1225,1228,1230,1232],{"class":834,"line":835},[832,1211,1212],{"class":842},"\u003C",[832,1214,1216],{"class":1215},"swJcz","script",[832,1218,1219],{"class":944}," setup",[832,1221,1222],{"class":944}," lang",[832,1224,951],{"class":842},[832,1226,1227],{"class":842},"\"",[832,1229,827],{"class":859},[832,1231,1227],{"class":842},[832,1233,1234],{"class":842},">\n",[832,1236,1237,1239,1241,1244,1246,1248,1251,1253,1255],{"class":834,"line":869},[832,1238,839],{"class":838},[832,1240,843],{"class":842},[832,1242,1243],{"class":846}," ref",[832,1245,850],{"class":842},[832,1247,853],{"class":838},[832,1249,1250],{"class":842}," \"",[832,1252,1205],{"class":859},[832,1254,1227],{"class":842},[832,1256,866],{"class":842},[832,1258,1259,1261],{"class":834,"line":877},[832,1260,839],{"class":838},[832,1262,874],{"class":842},[832,1264,1265,1268],{"class":834,"line":886},[832,1266,1267],{"class":846},"    accordion",[832,1269,883],{"class":842},[832,1271,1272,1275],{"class":834,"line":894},[832,1273,1274],{"class":846},"    accordionItem",[832,1276,883],{"class":842},[832,1278,1279,1282],{"class":834,"line":902},[832,1280,1281],{"class":846},"    accordionTrigger",[832,1283,883],{"class":842},[832,1285,1286,1289],{"class":834,"line":910},[832,1287,1288],{"class":846},"    accordionContent",[832,1290,883],{"class":842},[832,1292,1293,1296],{"class":834,"line":918},[832,1294,1295],{"class":846},"    accordionBody",[832,1297,883],{"class":842},[832,1299,1300,1303,1306],{"class":834,"line":935},[832,1301,1302],{"class":838},"    type",[832,1304,1305],{"class":846}," AccordionProps",[832,1307,883],{"class":842},[832,1309,1310,1312,1314,1316,1318,1320],{"class":834,"line":941},[832,1311,921],{"class":842},[832,1313,853],{"class":838},[832,1315,1250],{"class":842},[832,1317,860],{"class":859},[832,1319,1227],{"class":842},[832,1321,866],{"class":842},[832,1323,1324],{"class":834,"line":962},[832,1325,938],{"emptyLinePlaceholder":223},[832,1327,1328,1330,1332,1335,1337,1339,1342,1344,1346,1349,1351,1353,1356,1358,1360,1363,1365,1367,1370,1372,1374],{"class":834,"line":967},[832,1329,945],{"class":944},[832,1331,843],{"class":842},[832,1333,1334],{"class":846}," color ",[832,1336,951],{"class":842},[832,1338,1250],{"class":842},[832,1340,1341],{"class":859},"neutral",[832,1343,1227],{"class":842},[832,1345,1107],{"class":842},[832,1347,1348],{"class":846}," variant ",[832,1350,951],{"class":842},[832,1352,1250],{"class":842},[832,1354,1355],{"class":859},"solid",[832,1357,1227],{"class":842},[832,1359,1107],{"class":842},[832,1361,1362],{"class":846}," size ",[832,1364,951],{"class":842},[832,1366,1250],{"class":842},[832,1368,1369],{"class":859},"md",[832,1371,1227],{"class":842},[832,1373,850],{"class":842},[832,1375,1376],{"class":842}," =\n",[832,1378,1379,1382,1384,1388,1391,1393],{"class":834,"line":985},[832,1380,1381],{"class":954},"    defineProps",[832,1383,1212],{"class":842},[832,1385,1387],{"class":1386},"sBMFI","AccordionProps",[832,1389,1390],{"class":842},">",[832,1392,957],{"class":846},[832,1394,866],{"class":842},[832,1396,1397],{"class":834,"line":1002},[832,1398,938],{"emptyLinePlaceholder":223},[832,1400,1401,1403,1406,1408],{"class":834,"line":1019},[832,1402,945],{"class":944},[832,1404,1405],{"class":846}," items ",[832,1407,951],{"class":842},[832,1409,1410],{"class":846}," [\n",[832,1412,1413,1416,1419,1422,1424,1427,1429,1431,1434,1436,1438,1441,1443,1445,1448,1450,1452,1455,1457],{"class":834,"line":1036},[832,1414,1415],{"class":842},"    {",[832,1417,1418],{"class":1215}," value",[832,1420,1421],{"class":842},":",[832,1423,1250],{"class":842},[832,1425,1426],{"class":859},"item-1",[832,1428,1227],{"class":842},[832,1430,1107],{"class":842},[832,1432,1433],{"class":1215}," label",[832,1435,1421],{"class":842},[832,1437,1250],{"class":842},[832,1439,1440],{"class":859},"Is it accessible?",[832,1442,1227],{"class":842},[832,1444,1107],{"class":842},[832,1446,1447],{"class":1215}," content",[832,1449,1421],{"class":842},[832,1451,1250],{"class":842},[832,1453,1454],{"class":859},"Yes. It follows the WAI-ARIA disclosure pattern.",[832,1456,1227],{"class":842},[832,1458,1459],{"class":842}," },\n",[832,1461,1462,1464,1466,1468,1470,1473,1475,1477,1479,1481,1483,1486,1488,1490,1492,1494,1496,1499,1501],{"class":834,"line":1053},[832,1463,1415],{"class":842},[832,1465,1418],{"class":1215},[832,1467,1421],{"class":842},[832,1469,1250],{"class":842},[832,1471,1472],{"class":859},"item-2",[832,1474,1227],{"class":842},[832,1476,1107],{"class":842},[832,1478,1433],{"class":1215},[832,1480,1421],{"class":842},[832,1482,1250],{"class":842},[832,1484,1485],{"class":859},"Is it animated?",[832,1487,1227],{"class":842},[832,1489,1107],{"class":842},[832,1491,1447],{"class":1215},[832,1493,1421],{"class":842},[832,1495,1250],{"class":842},[832,1497,1498],{"class":859},"Yes. Height animates with a pure-CSS grid transition.",[832,1500,1227],{"class":842},[832,1502,1459],{"class":842},[832,1504,1505,1508],{"class":834,"line":1058},[832,1506,1507],{"class":846},"]",[832,1509,866],{"class":842},[832,1511,1513],{"class":834,"line":1512},19,[832,1514,938],{"emptyLinePlaceholder":223},[832,1516,1518,1520,1523,1525,1527,1529,1532,1535,1538,1540,1543,1545,1547,1549,1552],{"class":834,"line":1517},20,[832,1519,945],{"class":944},[832,1521,1522],{"class":846}," open ",[832,1524,951],{"class":842},[832,1526,1243],{"class":954},[832,1528,1212],{"class":842},[832,1530,1531],{"class":1386},"string",[832,1533,1534],{"class":842}," |",[832,1536,1537],{"class":1386}," null",[832,1539,1390],{"class":842},[832,1541,1542],{"class":846},"(",[832,1544,1227],{"class":842},[832,1546,1426],{"class":859},[832,1548,1227],{"class":842},[832,1550,1551],{"class":846},")",[832,1553,866],{"class":842},[832,1555,1557,1559,1562,1564,1567,1571,1573,1576,1578,1581,1584,1587,1590,1592,1595,1597,1599,1602,1605,1608,1610,1613,1616],{"class":834,"line":1556},21,[832,1558,945],{"class":944},[832,1560,1561],{"class":846}," toggle ",[832,1563,951],{"class":842},[832,1565,1566],{"class":842}," (",[832,1568,1570],{"class":1569},"sHdIc","value",[832,1572,1421],{"class":842},[832,1574,1575],{"class":1386}," string",[832,1577,1551],{"class":842},[832,1579,1580],{"class":944}," =>",[832,1582,1583],{"class":846}," (open",[832,1585,1586],{"class":842},".",[832,1588,1589],{"class":846},"value ",[832,1591,951],{"class":842},[832,1593,1594],{"class":846}," open",[832,1596,1586],{"class":842},[832,1598,1589],{"class":846},[832,1600,1601],{"class":842},"===",[832,1603,1604],{"class":846}," value ",[832,1606,1607],{"class":842},"?",[832,1609,1537],{"class":842},[832,1611,1612],{"class":842}," :",[832,1614,1615],{"class":846}," value)",[832,1617,866],{"class":842},[832,1619,1621,1623,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652,1654,1657,1659,1661,1663,1666,1668,1670],{"class":834,"line":1620},22,[832,1622,945],{"class":944},[832,1624,1625],{"class":846}," stateOf ",[832,1627,951],{"class":842},[832,1629,1566],{"class":842},[832,1631,1570],{"class":1569},[832,1633,1421],{"class":842},[832,1635,1575],{"class":1386},[832,1637,1551],{"class":842},[832,1639,1580],{"class":944},[832,1641,1583],{"class":846},[832,1643,1586],{"class":842},[832,1645,1589],{"class":846},[832,1647,1601],{"class":842},[832,1649,1604],{"class":846},[832,1651,1607],{"class":842},[832,1653,1250],{"class":842},[832,1655,1656],{"class":859},"open",[832,1658,1227],{"class":842},[832,1660,1612],{"class":842},[832,1662,1250],{"class":842},[832,1664,1665],{"class":859},"closed",[832,1667,1227],{"class":842},[832,1669,1551],{"class":846},[832,1671,866],{"class":842},[832,1673,1675,1678,1680],{"class":834,"line":1674},23,[832,1676,1677],{"class":842},"\u003C\u002F",[832,1679,1216],{"class":1215},[832,1681,1234],{"class":842},[832,1683,1685],{"class":834,"line":1684},24,[832,1686,938],{"emptyLinePlaceholder":223},[832,1688,1690,1692,1694],{"class":834,"line":1689},25,[832,1691,1212],{"class":842},[832,1693,1198],{"class":1215},[832,1695,1234],{"class":842},[832,1697,1699,1702,1705,1708,1710,1712,1715,1717],{"class":834,"line":1698},26,[832,1700,1701],{"class":842},"    \u003C",[832,1703,1704],{"class":1215},"div",[832,1706,1707],{"class":944}," :class",[832,1709,951],{"class":842},[832,1711,1227],{"class":842},[832,1713,1714],{"class":859},"accordion({ color, variant, size })",[832,1716,1227],{"class":842},[832,1718,1234],{"class":842},[832,1720,1722,1725],{"class":834,"line":1721},27,[832,1723,1724],{"class":842},"        \u003C",[832,1726,1727],{"class":1215},"div\n",[832,1729,1731,1734,1736,1738,1741],{"class":834,"line":1730},28,[832,1732,1733],{"class":944},"            v-for",[832,1735,951],{"class":842},[832,1737,1227],{"class":842},[832,1739,1740],{"class":859},"item in items",[832,1742,1743],{"class":842},"\"\n",[832,1745,1747,1750,1752,1754,1757],{"class":834,"line":1746},29,[832,1748,1749],{"class":944},"            :key",[832,1751,951],{"class":842},[832,1753,1227],{"class":842},[832,1755,1756],{"class":859},"item.value",[832,1758,1743],{"class":842},[832,1760,1762,1765,1767,1769,1772],{"class":834,"line":1761},30,[832,1763,1764],{"class":944},"            :class",[832,1766,951],{"class":842},[832,1768,1227],{"class":842},[832,1770,1771],{"class":859},"accordionItem({ color, variant, size })",[832,1773,1743],{"class":842},[832,1775,1777],{"class":834,"line":1776},31,[832,1778,1779],{"class":842},"        >\n",[832,1781,1783],{"class":834,"line":1782},32,[832,1784,1786],{"class":1785},"sHwdD","            \u003C!-- A heading wraps the trigger for the WAI-ARIA accordion pattern -->\n",[832,1788,1790,1793,1796],{"class":834,"line":1789},33,[832,1791,1792],{"class":842},"            \u003C",[832,1794,1795],{"class":1215},"h3",[832,1797,1234],{"class":842},[832,1799,1801,1804],{"class":834,"line":1800},34,[832,1802,1803],{"class":842},"                \u003C",[832,1805,1806],{"class":1215},"button\n",[832,1808,1810,1813,1815,1817,1820],{"class":834,"line":1809},35,[832,1811,1812],{"class":944},"                    type",[832,1814,951],{"class":842},[832,1816,1227],{"class":842},[832,1818,1819],{"class":859},"button",[832,1821,1743],{"class":842},[832,1823,1825,1828,1830,1832,1835],{"class":834,"line":1824},36,[832,1826,1827],{"class":944},"                    :class",[832,1829,951],{"class":842},[832,1831,1227],{"class":842},[832,1833,1834],{"class":859},"accordionTrigger({ color, variant, size })",[832,1836,1743],{"class":842},[832,1838,1840,1843,1845,1847,1850],{"class":834,"line":1839},37,[832,1841,1842],{"class":944},"                    :data-state",[832,1844,951],{"class":842},[832,1846,1227],{"class":842},[832,1848,1849],{"class":859},"stateOf(item.value)",[832,1851,1743],{"class":842},[832,1853,1855,1858,1860,1862,1865],{"class":834,"line":1854},38,[832,1856,1857],{"class":944},"                    :aria-expanded",[832,1859,951],{"class":842},[832,1861,1227],{"class":842},[832,1863,1864],{"class":859},"open === item.value",[832,1866,1743],{"class":842},[832,1868,1870,1873,1875,1877,1880],{"class":834,"line":1869},39,[832,1871,1872],{"class":944},"                    @click",[832,1874,951],{"class":842},[832,1876,1227],{"class":842},[832,1878,1879],{"class":859},"toggle(item.value)",[832,1881,1743],{"class":842},[832,1883,1885],{"class":834,"line":1884},40,[832,1886,1887],{"class":842},"                >\n",[832,1889,1891],{"class":834,"line":1890},41,[832,1892,1893],{"class":846},"                    {{ item.label }}\n",[832,1895,1897,1900,1903,1906,1908,1910,1913,1915,1918,1920,1922,1925,1927,1930,1932,1934,1936,1938,1941,1943,1945,1948,1950,1953,1955,1957,1960,1962,1965,1967,1969,1972,1974,1977,1979,1981,1984,1986,1989,1991,1993,1996,1998],{"class":834,"line":1896},42,[832,1898,1899],{"class":842},"                    \u003C",[832,1901,1902],{"class":1215},"svg",[832,1904,1905],{"class":944}," class",[832,1907,951],{"class":842},[832,1909,1227],{"class":842},[832,1911,1912],{"class":859},"accordion-trigger-icon",[832,1914,1227],{"class":842},[832,1916,1917],{"class":944}," width",[832,1919,951],{"class":842},[832,1921,1227],{"class":842},[832,1923,1924],{"class":859},"16",[832,1926,1227],{"class":842},[832,1928,1929],{"class":944}," height",[832,1931,951],{"class":842},[832,1933,1227],{"class":842},[832,1935,1924],{"class":859},[832,1937,1227],{"class":842},[832,1939,1940],{"class":944}," viewBox",[832,1942,951],{"class":842},[832,1944,1227],{"class":842},[832,1946,1947],{"class":859},"0 0 24 24",[832,1949,1227],{"class":842},[832,1951,1952],{"class":944}," fill",[832,1954,951],{"class":842},[832,1956,1227],{"class":842},[832,1958,1959],{"class":859},"none",[832,1961,1227],{"class":842},[832,1963,1964],{"class":944}," stroke",[832,1966,951],{"class":842},[832,1968,1227],{"class":842},[832,1970,1971],{"class":859},"currentColor",[832,1973,1227],{"class":842},[832,1975,1976],{"class":944}," stroke-width",[832,1978,951],{"class":842},[832,1980,1227],{"class":842},[832,1982,1983],{"class":859},"2",[832,1985,1227],{"class":842},[832,1987,1988],{"class":944}," aria-hidden",[832,1990,951],{"class":842},[832,1992,1227],{"class":842},[832,1994,1995],{"class":859},"true",[832,1997,1227],{"class":842},[832,1999,1234],{"class":842},[832,2001,2003,2006,2009,2012,2014,2016,2019,2021],{"class":834,"line":2002},43,[832,2004,2005],{"class":842},"                        \u003C",[832,2007,2008],{"class":1215},"path",[832,2010,2011],{"class":944}," d",[832,2013,951],{"class":842},[832,2015,1227],{"class":842},[832,2017,2018],{"class":859},"m6 9 6 6 6-6",[832,2020,1227],{"class":842},[832,2022,2023],{"class":842}," \u002F>\n",[832,2025,2027,2030,2032],{"class":834,"line":2026},44,[832,2028,2029],{"class":842},"                    \u003C\u002F",[832,2031,1902],{"class":1215},[832,2033,1234],{"class":842},[832,2035,2037,2040,2042],{"class":834,"line":2036},45,[832,2038,2039],{"class":842},"                \u003C\u002F",[832,2041,1819],{"class":1215},[832,2043,1234],{"class":842},[832,2045,2047,2050,2052],{"class":834,"line":2046},46,[832,2048,2049],{"class":842},"            \u003C\u002F",[832,2051,1795],{"class":1215},[832,2053,1234],{"class":842},[832,2055,2057,2059,2061,2063,2065,2067,2070,2072,2075,2077,2079,2081,2083],{"class":834,"line":2056},47,[832,2058,1792],{"class":842},[832,2060,1704],{"class":1215},[832,2062,1707],{"class":944},[832,2064,951],{"class":842},[832,2066,1227],{"class":842},[832,2068,2069],{"class":859},"accordionContent({ size })",[832,2071,1227],{"class":842},[832,2073,2074],{"class":944}," :data-state",[832,2076,951],{"class":842},[832,2078,1227],{"class":842},[832,2080,1849],{"class":859},[832,2082,1227],{"class":842},[832,2084,1234],{"class":842},[832,2086,2088],{"class":834,"line":2087},48,[832,2089,2090],{"class":1785},"                \u003C!-- The grid child is the overflow clip; padding lives on the body inside it -->\n",[832,2092,2094,2096,2098],{"class":834,"line":2093},49,[832,2095,1803],{"class":842},[832,2097,1704],{"class":1215},[832,2099,1234],{"class":842},[832,2101,2103,2105,2107,2109,2111,2113,2116,2118,2120,2123,2125,2127],{"class":834,"line":2102},50,[832,2104,1899],{"class":842},[832,2106,1704],{"class":1215},[832,2108,1707],{"class":944},[832,2110,951],{"class":842},[832,2112,1227],{"class":842},[832,2114,2115],{"class":859},"accordionBody({ size })",[832,2117,1227],{"class":842},[832,2119,1390],{"class":842},[832,2121,2122],{"class":846},"{{ item.content }}",[832,2124,1677],{"class":842},[832,2126,1704],{"class":1215},[832,2128,1234],{"class":842},[832,2130,2132,2134,2136],{"class":834,"line":2131},51,[832,2133,2039],{"class":842},[832,2135,1704],{"class":1215},[832,2137,1234],{"class":842},[832,2139,2141,2143,2145],{"class":834,"line":2140},52,[832,2142,2049],{"class":842},[832,2144,1704],{"class":1215},[832,2146,1234],{"class":842},[832,2148,2150,2153,2155],{"class":834,"line":2149},53,[832,2151,2152],{"class":842},"        \u003C\u002F",[832,2154,1704],{"class":1215},[832,2156,1234],{"class":842},[832,2158,2160,2163,2165],{"class":834,"line":2159},54,[832,2161,2162],{"class":842},"    \u003C\u002F",[832,2164,1704],{"class":1215},[832,2166,1234],{"class":842},[832,2168,2170,2172,2174],{"class":834,"line":2169},55,[832,2171,1677],{"class":842},[832,2173,1198],{"class":1215},[832,2175,1234],{"class":842},[1198,2177,2178],{"v-slot:react":828},[823,2179,2182],{"className":825,"code":2180,"filename":2181,"language":827,"meta":828,"style":828},"import { useState } from \"react\";\nimport {\n    accordion,\n    accordionItem,\n    accordionTrigger,\n    accordionContent,\n    accordionBody,\n    type AccordionProps,\n} from \"virtual:styleframe\";\n\nconst items = [\n    { value: \"item-1\", label: \"Is it accessible?\", content: \"Yes. It follows the WAI-ARIA disclosure pattern.\" },\n    { value: \"item-2\", label: \"Is it animated?\", content: \"Yes. Height animates with a pure-CSS grid transition.\" },\n];\n\nexport function Accordion({ color = \"neutral\", variant = \"solid\", size = \"md\" }: AccordionProps) {\n    const [open, setOpen] = useState\u003Cstring | null>(\"item-1\");\n    const stateOf = (value: string) => (open === value ? \"open\" : \"closed\");\n\n    return (\n        \u003Cdiv className={accordion({ color, variant, size })}>\n            {items.map((item) => (\n                \u003Cdiv key={item.value} className={accordionItem({ color, variant, size })}>\n                    \u003Ch3>\n                        \u003Cbutton\n                            type=\"button\"\n                            className={accordionTrigger({ color, variant, size })}\n                            data-state={stateOf(item.value)}\n                            aria-expanded={open === item.value}\n                            onClick={() => setOpen(open === item.value ? null : item.value)}\n                        >\n                            {item.label}\n                            \u003Csvg className=\"accordion-trigger-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden=\"true\">\n                                \u003Cpath d=\"m6 9 6 6 6-6\" \u002F>\n                            \u003C\u002Fsvg>\n                        \u003C\u002Fbutton>\n                    \u003C\u002Fh3>\n                    \u003Cdiv className={accordionContent({ size })} data-state={stateOf(item.value)}>\n                        {\u002F* The grid child is the overflow clip; padding lives on the body inside it *\u002F}\n                        \u003Cdiv>\n                            \u003Cdiv className={accordionBody({ size })}>{item.content}\u003C\u002Fdiv>\n                        \u003C\u002Fdiv>\n                    \u003C\u002Fdiv>\n                \u003C\u002Fdiv>\n            ))}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FAccordion.tsx",[700,2183,2184,2206,2212,2218,2224,2230,2236,2242,2250,2264,2268,2278,2318,2358,2364,2368,2428,2471,2522,2526,2534,2564,2591,2630,2638,2644,2657,2682,2705,2731,2761,2766,2780,2876,2895,2904,2913,2921,2959,2969,2977,3009,3017,3025,3033,3040,3048,3055],{"__ignoreMap":828},[832,2185,2186,2188,2190,2193,2195,2197,2199,2202,2204],{"class":834,"line":835},[832,2187,839],{"class":838},[832,2189,843],{"class":842},[832,2191,2192],{"class":846}," useState",[832,2194,850],{"class":842},[832,2196,853],{"class":838},[832,2198,1250],{"class":842},[832,2200,2201],{"class":859},"react",[832,2203,1227],{"class":842},[832,2205,866],{"class":842},[832,2207,2208,2210],{"class":834,"line":869},[832,2209,839],{"class":838},[832,2211,874],{"class":842},[832,2213,2214,2216],{"class":834,"line":877},[832,2215,1267],{"class":846},[832,2217,883],{"class":842},[832,2219,2220,2222],{"class":834,"line":886},[832,2221,1274],{"class":846},[832,2223,883],{"class":842},[832,2225,2226,2228],{"class":834,"line":894},[832,2227,1281],{"class":846},[832,2229,883],{"class":842},[832,2231,2232,2234],{"class":834,"line":902},[832,2233,1288],{"class":846},[832,2235,883],{"class":842},[832,2237,2238,2240],{"class":834,"line":910},[832,2239,1295],{"class":846},[832,2241,883],{"class":842},[832,2243,2244,2246,2248],{"class":834,"line":918},[832,2245,1302],{"class":838},[832,2247,1305],{"class":846},[832,2249,883],{"class":842},[832,2251,2252,2254,2256,2258,2260,2262],{"class":834,"line":935},[832,2253,921],{"class":842},[832,2255,853],{"class":838},[832,2257,1250],{"class":842},[832,2259,860],{"class":859},[832,2261,1227],{"class":842},[832,2263,866],{"class":842},[832,2265,2266],{"class":834,"line":941},[832,2267,938],{"emptyLinePlaceholder":223},[832,2269,2270,2272,2274,2276],{"class":834,"line":962},[832,2271,945],{"class":944},[832,2273,1405],{"class":846},[832,2275,951],{"class":842},[832,2277,1410],{"class":846},[832,2279,2280,2282,2284,2286,2288,2290,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310,2312,2314,2316],{"class":834,"line":967},[832,2281,1415],{"class":842},[832,2283,1418],{"class":1215},[832,2285,1421],{"class":842},[832,2287,1250],{"class":842},[832,2289,1426],{"class":859},[832,2291,1227],{"class":842},[832,2293,1107],{"class":842},[832,2295,1433],{"class":1215},[832,2297,1421],{"class":842},[832,2299,1250],{"class":842},[832,2301,1440],{"class":859},[832,2303,1227],{"class":842},[832,2305,1107],{"class":842},[832,2307,1447],{"class":1215},[832,2309,1421],{"class":842},[832,2311,1250],{"class":842},[832,2313,1454],{"class":859},[832,2315,1227],{"class":842},[832,2317,1459],{"class":842},[832,2319,2320,2322,2324,2326,2328,2330,2332,2334,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354,2356],{"class":834,"line":985},[832,2321,1415],{"class":842},[832,2323,1418],{"class":1215},[832,2325,1421],{"class":842},[832,2327,1250],{"class":842},[832,2329,1472],{"class":859},[832,2331,1227],{"class":842},[832,2333,1107],{"class":842},[832,2335,1433],{"class":1215},[832,2337,1421],{"class":842},[832,2339,1250],{"class":842},[832,2341,1485],{"class":859},[832,2343,1227],{"class":842},[832,2345,1107],{"class":842},[832,2347,1447],{"class":1215},[832,2349,1421],{"class":842},[832,2351,1250],{"class":842},[832,2353,1498],{"class":859},[832,2355,1227],{"class":842},[832,2357,1459],{"class":842},[832,2359,2360,2362],{"class":834,"line":1002},[832,2361,1507],{"class":846},[832,2363,866],{"class":842},[832,2365,2366],{"class":834,"line":1019},[832,2367,938],{"emptyLinePlaceholder":223},[832,2369,2370,2372,2375,2378,2381,2384,2387,2389,2391,2393,2395,2398,2400,2402,2404,2406,2408,2411,2413,2415,2417,2419,2422,2424,2426],{"class":834,"line":1036},[832,2371,1061],{"class":838},[832,2373,2374],{"class":944}," function",[832,2376,2377],{"class":954}," Accordion",[832,2379,2380],{"class":842},"({",[832,2382,2383],{"class":1569}," color",[832,2385,2386],{"class":842}," =",[832,2388,1250],{"class":842},[832,2390,1341],{"class":859},[832,2392,1227],{"class":842},[832,2394,1107],{"class":842},[832,2396,2397],{"class":1569}," variant",[832,2399,2386],{"class":842},[832,2401,1250],{"class":842},[832,2403,1355],{"class":859},[832,2405,1227],{"class":842},[832,2407,1107],{"class":842},[832,2409,2410],{"class":1569}," size",[832,2412,2386],{"class":842},[832,2414,1250],{"class":842},[832,2416,1369],{"class":859},[832,2418,1227],{"class":842},[832,2420,2421],{"class":842}," }:",[832,2423,1305],{"class":1386},[832,2425,1551],{"class":842},[832,2427,874],{"class":842},[832,2429,2430,2433,2436,2438,2440,2443,2445,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469],{"class":834,"line":1053},[832,2431,2432],{"class":944},"    const",[832,2434,2435],{"class":842}," [",[832,2437,1656],{"class":846},[832,2439,1107],{"class":842},[832,2441,2442],{"class":846}," setOpen",[832,2444,1507],{"class":842},[832,2446,2386],{"class":842},[832,2448,2192],{"class":954},[832,2450,1212],{"class":842},[832,2452,1531],{"class":1386},[832,2454,1534],{"class":842},[832,2456,1537],{"class":1386},[832,2458,1390],{"class":842},[832,2460,1542],{"class":1215},[832,2462,1227],{"class":842},[832,2464,1426],{"class":859},[832,2466,1227],{"class":842},[832,2468,1551],{"class":1215},[832,2470,866],{"class":842},[832,2472,2473,2475,2478,2480,2482,2484,2486,2488,2490,2492,2494,2496,2499,2501,2504,2506,2508,2510,2512,2514,2516,2518,2520],{"class":834,"line":1058},[832,2474,2432],{"class":944},[832,2476,2477],{"class":846}," stateOf",[832,2479,2386],{"class":842},[832,2481,1566],{"class":842},[832,2483,1570],{"class":1569},[832,2485,1421],{"class":842},[832,2487,1575],{"class":1386},[832,2489,1551],{"class":842},[832,2491,1580],{"class":944},[832,2493,1566],{"class":1215},[832,2495,1656],{"class":846},[832,2497,2498],{"class":842}," ===",[832,2500,1418],{"class":846},[832,2502,2503],{"class":842}," ?",[832,2505,1250],{"class":842},[832,2507,1656],{"class":859},[832,2509,1227],{"class":842},[832,2511,1612],{"class":842},[832,2513,1250],{"class":842},[832,2515,1665],{"class":859},[832,2517,1227],{"class":842},[832,2519,1551],{"class":1215},[832,2521,866],{"class":842},[832,2523,2524],{"class":834,"line":1512},[832,2525,938],{"emptyLinePlaceholder":223},[832,2527,2528,2531],{"class":834,"line":1517},[832,2529,2530],{"class":838},"    return",[832,2532,2533],{"class":1215}," (\n",[832,2535,2536,2538,2540,2543,2546,2549,2551,2553,2555,2557,2559,2561],{"class":834,"line":1556},[832,2537,1724],{"class":842},[832,2539,1704],{"class":846},[832,2541,2542],{"class":846}," className",[832,2544,2545],{"class":842},"={",[832,2547,2548],{"class":1215},"accordion",[832,2550,2380],{"class":842},[832,2552,2383],{"class":1569},[832,2554,1107],{"class":842},[832,2556,2397],{"class":1569},[832,2558,1107],{"class":842},[832,2560,2410],{"class":1569},[832,2562,2563],{"class":842}," })}>\n",[832,2565,2566,2569,2572,2574,2577,2580,2583,2586,2589],{"class":834,"line":1620},[832,2567,2568],{"class":842},"            {",[832,2570,2571],{"class":1569},"items",[832,2573,1586],{"class":1215},[832,2575,2576],{"class":1569},"map",[832,2578,2579],{"class":1215},"((",[832,2581,2582],{"class":1569},"item",[832,2584,2585],{"class":1215},") ",[832,2587,2588],{"class":842},"=>",[832,2590,2533],{"class":1215},[832,2592,2593,2595,2597,2600,2602,2605,2607,2609,2611,2613,2616,2618,2620,2622,2624,2626,2628],{"class":834,"line":1674},[832,2594,1803],{"class":842},[832,2596,1704],{"class":846},[832,2598,2599],{"class":846}," key",[832,2601,2545],{"class":842},[832,2603,2604],{"class":1215},"item.",[832,2606,1570],{"class":846},[832,2608,921],{"class":842},[832,2610,2542],{"class":846},[832,2612,2545],{"class":842},[832,2614,2615],{"class":1215},"accordionItem",[832,2617,2380],{"class":842},[832,2619,2383],{"class":1569},[832,2621,1107],{"class":842},[832,2623,2397],{"class":1569},[832,2625,1107],{"class":842},[832,2627,2410],{"class":1569},[832,2629,2563],{"class":842},[832,2631,2632,2634,2636],{"class":834,"line":1684},[832,2633,1899],{"class":1215},[832,2635,1795],{"class":1386},[832,2637,1234],{"class":1215},[832,2639,2640,2642],{"class":834,"line":1689},[832,2641,2005],{"class":842},[832,2643,1806],{"class":1569},[832,2645,2646,2649,2651,2653,2655],{"class":834,"line":1698},[832,2647,2648],{"class":846},"                            type",[832,2650,951],{"class":842},[832,2652,1227],{"class":842},[832,2654,1819],{"class":859},[832,2656,1743],{"class":842},[832,2658,2659,2662,2664,2667,2669,2671,2673,2675,2677,2679],{"class":834,"line":1721},[832,2660,2661],{"class":846},"                            className",[832,2663,2545],{"class":842},[832,2665,2666],{"class":1215},"accordionTrigger",[832,2668,2380],{"class":842},[832,2670,2383],{"class":1569},[832,2672,1107],{"class":842},[832,2674,2397],{"class":1569},[832,2676,1107],{"class":842},[832,2678,2410],{"class":1569},[832,2680,2681],{"class":842}," })}\n",[832,2683,2684,2687,2690,2693,2695,2698,2700,2702],{"class":834,"line":1730},[832,2685,2686],{"class":846},"                            data",[832,2688,2689],{"class":842},"-",[832,2691,2692],{"class":846},"state",[832,2694,2545],{"class":842},[832,2696,2697],{"class":1215},"stateOf",[832,2699,1542],{"class":842},[832,2701,1756],{"class":1215},[832,2703,2704],{"class":842},")}\n",[832,2706,2707,2710,2712,2715,2717,2719,2721,2724,2726,2728],{"class":834,"line":1746},[832,2708,2709],{"class":846},"                            aria",[832,2711,2689],{"class":842},[832,2713,2714],{"class":846},"expanded",[832,2716,2545],{"class":842},[832,2718,1656],{"class":846},[832,2720,2498],{"class":842},[832,2722,2723],{"class":846}," item",[832,2725,1586],{"class":842},[832,2727,1570],{"class":846},[832,2729,2730],{"class":842},"}\n",[832,2732,2733,2736,2738,2741,2743,2745,2748,2751,2753,2755,2757,2759],{"class":834,"line":1761},[832,2734,2735],{"class":846},"                            onClick",[832,2737,2545],{"class":842},[832,2739,2740],{"class":1215},"() => setOpen",[832,2742,1542],{"class":842},[832,2744,1656],{"class":1569},[832,2746,2747],{"class":1215}," === item.value ? ",[832,2749,2750],{"class":1569},"null",[832,2752,1612],{"class":842},[832,2754,2723],{"class":1386},[832,2756,1586],{"class":842},[832,2758,1570],{"class":1386},[832,2760,2704],{"class":842},[832,2762,2763],{"class":834,"line":1776},[832,2764,2765],{"class":842},"                        >\n",[832,2767,2768,2771,2773,2775,2778],{"class":834,"line":1782},[832,2769,2770],{"class":842},"                            {",[832,2772,2582],{"class":1569},[832,2774,1586],{"class":1215},[832,2776,2777],{"class":1569},"label",[832,2779,2730],{"class":842},[832,2781,2782,2785,2787,2789,2791,2793,2795,2797,2799,2801,2803,2805,2807,2809,2811,2813,2815,2817,2819,2821,2823,2825,2827,2829,2831,2833,2835,2837,2839,2841,2843,2845,2847,2850,2852,2854,2856,2858,2861,2863,2866,2868,2870,2872,2874],{"class":834,"line":1789},[832,2783,2784],{"class":842},"                            \u003C",[832,2786,1902],{"class":846},[832,2788,2542],{"class":846},[832,2790,951],{"class":842},[832,2792,1227],{"class":842},[832,2794,1912],{"class":859},[832,2796,1227],{"class":842},[832,2798,1917],{"class":846},[832,2800,951],{"class":842},[832,2802,1227],{"class":842},[832,2804,1924],{"class":859},[832,2806,1227],{"class":842},[832,2808,1929],{"class":846},[832,2810,951],{"class":842},[832,2812,1227],{"class":842},[832,2814,1924],{"class":859},[832,2816,1227],{"class":842},[832,2818,1940],{"class":846},[832,2820,951],{"class":842},[832,2822,1227],{"class":842},[832,2824,1947],{"class":859},[832,2826,1227],{"class":842},[832,2828,1952],{"class":846},[832,2830,951],{"class":842},[832,2832,1227],{"class":842},[832,2834,1959],{"class":859},[832,2836,1227],{"class":842},[832,2838,1964],{"class":846},[832,2840,951],{"class":842},[832,2842,1227],{"class":842},[832,2844,1971],{"class":859},[832,2846,1227],{"class":842},[832,2848,2849],{"class":846}," strokeWidth",[832,2851,951],{"class":842},[832,2853,1227],{"class":842},[832,2855,1983],{"class":859},[832,2857,1227],{"class":842},[832,2859,2860],{"class":846}," aria",[832,2862,2689],{"class":842},[832,2864,2865],{"class":846},"hidden",[832,2867,951],{"class":842},[832,2869,1227],{"class":842},[832,2871,1995],{"class":859},[832,2873,1227],{"class":842},[832,2875,1234],{"class":842},[832,2877,2878,2881,2883,2885,2887,2889,2891,2893],{"class":834,"line":1800},[832,2879,2880],{"class":842},"                                \u003C",[832,2882,2008],{"class":846},[832,2884,2011],{"class":846},[832,2886,951],{"class":842},[832,2888,1227],{"class":842},[832,2890,2018],{"class":859},[832,2892,1227],{"class":842},[832,2894,2023],{"class":842},[832,2896,2897,2900,2902],{"class":834,"line":1809},[832,2898,2899],{"class":842},"                            \u003C\u002F",[832,2901,1902],{"class":846},[832,2903,1234],{"class":842},[832,2905,2906,2909,2911],{"class":834,"line":1824},[832,2907,2908],{"class":842},"                        \u003C\u002F",[832,2910,1819],{"class":846},[832,2912,1234],{"class":842},[832,2914,2915,2917,2919],{"class":834,"line":1839},[832,2916,2029],{"class":842},[832,2918,1795],{"class":846},[832,2920,1234],{"class":842},[832,2922,2923,2925,2927,2929,2931,2934,2936,2938,2941,2944,2946,2948,2950,2952,2954,2956],{"class":834,"line":1854},[832,2924,1899],{"class":842},[832,2926,1704],{"class":846},[832,2928,2542],{"class":846},[832,2930,2545],{"class":842},[832,2932,2933],{"class":1215},"accordionContent",[832,2935,2380],{"class":842},[832,2937,2410],{"class":1569},[832,2939,2940],{"class":842}," })}",[832,2942,2943],{"class":846}," data",[832,2945,2689],{"class":842},[832,2947,2692],{"class":846},[832,2949,2545],{"class":842},[832,2951,2697],{"class":1215},[832,2953,1542],{"class":842},[832,2955,1756],{"class":1215},[832,2957,2958],{"class":842},")}>\n",[832,2960,2961,2964,2967],{"class":834,"line":1869},[832,2962,2963],{"class":842},"                        {",[832,2965,2966],{"class":1785},"\u002F* The grid child is the overflow clip; padding lives on the body inside it *\u002F",[832,2968,2730],{"class":842},[832,2970,2971,2973,2975],{"class":834,"line":1884},[832,2972,2005],{"class":1215},[832,2974,1704],{"class":1386},[832,2976,1234],{"class":1215},[832,2978,2979,2981,2983,2985,2987,2990,2992,2994,2997,2999,3002,3005,3007],{"class":834,"line":1890},[832,2980,2784],{"class":842},[832,2982,1704],{"class":846},[832,2984,2542],{"class":846},[832,2986,2545],{"class":842},[832,2988,2989],{"class":1215},"accordionBody",[832,2991,2380],{"class":842},[832,2993,2410],{"class":1569},[832,2995,2996],{"class":842}," })}>{",[832,2998,2604],{"class":1215},[832,3000,3001],{"class":846},"content",[832,3003,3004],{"class":842},"}\u003C\u002F",[832,3006,1704],{"class":846},[832,3008,1234],{"class":842},[832,3010,3011,3013,3015],{"class":834,"line":1896},[832,3012,2908],{"class":842},[832,3014,1704],{"class":846},[832,3016,1234],{"class":842},[832,3018,3019,3021,3023],{"class":834,"line":2002},[832,3020,2029],{"class":842},[832,3022,1704],{"class":846},[832,3024,1234],{"class":842},[832,3026,3027,3029,3031],{"class":834,"line":2026},[832,3028,2039],{"class":842},[832,3030,1704],{"class":846},[832,3032,1234],{"class":842},[832,3034,3035,3038],{"class":834,"line":2036},[832,3036,3037],{"class":1215},"            ))",[832,3039,2730],{"class":842},[832,3041,3042,3044,3046],{"class":834,"line":2046},[832,3043,2152],{"class":842},[832,3045,1704],{"class":846},[832,3047,1234],{"class":842},[832,3049,3050,3053],{"class":834,"line":2056},[832,3051,3052],{"class":1215},"    )",[832,3054,866],{"class":842},[832,3056,3057],{"class":834,"line":2087},[832,3058,2730],{"class":842},[1198,3060,3061,3067,3311],{"v-slot:other":828},[692,3062,3063,3064,3066],{},"Each runtime returns a class string. The trigger and content wrappers read open\u002Fclose state from a ",[700,3065,746],{}," attribute you toggle:",[823,3068,3071],{"className":825,"code":3069,"filename":3070,"language":827,"meta":828,"style":828},"import { accordion, accordionItem, accordionTrigger, accordionContent, accordionBody } from \"virtual:styleframe\";\n\nconst variants = { color: \"neutral\", variant: \"solid\", size: \"md\" } as const;\n\nconst rootClasses = accordion(variants);\n\u002F\u002F → \"accordion _background:neutral _border-radius:md ...\"\nconst itemClasses = accordionItem(variants);\n\u002F\u002F → \"accordion-item _border-bottom-width:thin ...\"\nconst triggerClasses = accordionTrigger(variants);\n\u002F\u002F → \"accordion-trigger _display:flex _justify-content:space-between ...\"\nconst contentClasses = accordionContent({ size: \"md\" });\n\u002F\u002F → \"accordion-content _display:grid _grid-template-rows:0fr ...\"\nconst bodyClasses = accordionBody({ size: \"md\" });\n\u002F\u002F → \"accordion-body _overflow:hidden _padding:md ...\"\n","src\u002Fcomponents\u002Faccordion.ts",[700,3072,3073,3114,3118,3173,3177,3193,3198,3213,3218,3233,3238,3270,3275,3306],{"__ignoreMap":828},[832,3074,3075,3077,3079,3082,3084,3087,3089,3092,3094,3097,3099,3102,3104,3106,3108,3110,3112],{"class":834,"line":835},[832,3076,839],{"class":838},[832,3078,843],{"class":842},[832,3080,3081],{"class":846}," accordion",[832,3083,1107],{"class":842},[832,3085,3086],{"class":846}," accordionItem",[832,3088,1107],{"class":842},[832,3090,3091],{"class":846}," accordionTrigger",[832,3093,1107],{"class":842},[832,3095,3096],{"class":846}," accordionContent",[832,3098,1107],{"class":842},[832,3100,3101],{"class":846}," accordionBody",[832,3103,850],{"class":842},[832,3105,853],{"class":838},[832,3107,1250],{"class":842},[832,3109,860],{"class":859},[832,3111,1227],{"class":842},[832,3113,866],{"class":842},[832,3115,3116],{"class":834,"line":869},[832,3117,938],{"emptyLinePlaceholder":223},[832,3119,3120,3122,3125,3127,3129,3131,3133,3135,3137,3139,3141,3143,3145,3147,3149,3151,3153,3155,3157,3159,3161,3163,3165,3168,3171],{"class":834,"line":877},[832,3121,945],{"class":944},[832,3123,3124],{"class":846}," variants ",[832,3126,951],{"class":842},[832,3128,843],{"class":842},[832,3130,2383],{"class":1215},[832,3132,1421],{"class":842},[832,3134,1250],{"class":842},[832,3136,1341],{"class":859},[832,3138,1227],{"class":842},[832,3140,1107],{"class":842},[832,3142,2397],{"class":1215},[832,3144,1421],{"class":842},[832,3146,1250],{"class":842},[832,3148,1355],{"class":859},[832,3150,1227],{"class":842},[832,3152,1107],{"class":842},[832,3154,2410],{"class":1215},[832,3156,1421],{"class":842},[832,3158,1250],{"class":842},[832,3160,1369],{"class":859},[832,3162,1227],{"class":842},[832,3164,850],{"class":842},[832,3166,3167],{"class":838}," as",[832,3169,3170],{"class":944}," const",[832,3172,866],{"class":842},[832,3174,3175],{"class":834,"line":886},[832,3176,938],{"emptyLinePlaceholder":223},[832,3178,3179,3181,3184,3186,3188,3191],{"class":834,"line":894},[832,3180,945],{"class":944},[832,3182,3183],{"class":846}," rootClasses ",[832,3185,951],{"class":842},[832,3187,3081],{"class":954},[832,3189,3190],{"class":846},"(variants)",[832,3192,866],{"class":842},[832,3194,3195],{"class":834,"line":902},[832,3196,3197],{"class":1785},"\u002F\u002F → \"accordion _background:neutral _border-radius:md ...\"\n",[832,3199,3200,3202,3205,3207,3209,3211],{"class":834,"line":910},[832,3201,945],{"class":944},[832,3203,3204],{"class":846}," itemClasses ",[832,3206,951],{"class":842},[832,3208,3086],{"class":954},[832,3210,3190],{"class":846},[832,3212,866],{"class":842},[832,3214,3215],{"class":834,"line":918},[832,3216,3217],{"class":1785},"\u002F\u002F → \"accordion-item _border-bottom-width:thin ...\"\n",[832,3219,3220,3222,3225,3227,3229,3231],{"class":834,"line":935},[832,3221,945],{"class":944},[832,3223,3224],{"class":846}," triggerClasses ",[832,3226,951],{"class":842},[832,3228,3091],{"class":954},[832,3230,3190],{"class":846},[832,3232,866],{"class":842},[832,3234,3235],{"class":834,"line":941},[832,3236,3237],{"class":1785},"\u002F\u002F → \"accordion-trigger _display:flex _justify-content:space-between ...\"\n",[832,3239,3240,3242,3245,3247,3249,3251,3254,3256,3258,3260,3262,3264,3266,3268],{"class":834,"line":962},[832,3241,945],{"class":944},[832,3243,3244],{"class":846}," contentClasses ",[832,3246,951],{"class":842},[832,3248,3096],{"class":954},[832,3250,1542],{"class":846},[832,3252,3253],{"class":842},"{",[832,3255,2410],{"class":1215},[832,3257,1421],{"class":842},[832,3259,1250],{"class":842},[832,3261,1369],{"class":859},[832,3263,1227],{"class":842},[832,3265,850],{"class":842},[832,3267,1551],{"class":846},[832,3269,866],{"class":842},[832,3271,3272],{"class":834,"line":967},[832,3273,3274],{"class":1785},"\u002F\u002F → \"accordion-content _display:grid _grid-template-rows:0fr ...\"\n",[832,3276,3277,3279,3282,3284,3286,3288,3290,3292,3294,3296,3298,3300,3302,3304],{"class":834,"line":985},[832,3278,945],{"class":944},[832,3280,3281],{"class":846}," bodyClasses ",[832,3283,951],{"class":842},[832,3285,3101],{"class":954},[832,3287,1542],{"class":846},[832,3289,3253],{"class":842},[832,3291,2410],{"class":1215},[832,3293,1421],{"class":842},[832,3295,1250],{"class":842},[832,3297,1369],{"class":859},[832,3299,1227],{"class":842},[832,3301,850],{"class":842},[832,3303,1551],{"class":846},[832,3305,866],{"class":842},[832,3307,3308],{"class":834,"line":1002},[832,3309,3310],{"class":1785},"\u002F\u002F → \"accordion-body _overflow:hidden _padding:md ...\"\n",[823,3312,3317],{"className":3313,"code":3314,"filename":3315,"language":3316,"meta":828,"style":828},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"accordion _background:neutral _border-radius:md ...\">\n    \u003Cdiv class=\"accordion-item _border-bottom-width:thin ...\">\n        \u003Ch3>\n            \u003Cbutton class=\"accordion-trigger ...\" data-state=\"open\" aria-expanded=\"true\">\n                Is it accessible?\n                \u003Csvg class=\"accordion-trigger-icon\" aria-hidden=\"true\">...\u003C\u002Fsvg>\n            \u003C\u002Fbutton>\n        \u003C\u002Fh3>\n        \u003Cdiv class=\"accordion-content ...\" data-state=\"open\">\n            \u003Cdiv>\u003C!-- overflow clip -->\n                \u003Cdiv class=\"accordion-body ...\">Yes. It follows the WAI-ARIA disclosure pattern.\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Faccordion.html","html",[700,3318,3319,3338,3357,3365,3406,3411,3448,3456,3464,3493,3504,3531,3539,3547,3555],{"__ignoreMap":828},[832,3320,3321,3323,3325,3327,3329,3331,3334,3336],{"class":834,"line":835},[832,3322,1212],{"class":842},[832,3324,1704],{"class":1215},[832,3326,1905],{"class":944},[832,3328,951],{"class":842},[832,3330,1227],{"class":842},[832,3332,3333],{"class":859},"accordion _background:neutral _border-radius:md ...",[832,3335,1227],{"class":842},[832,3337,1234],{"class":842},[832,3339,3340,3342,3344,3346,3348,3350,3353,3355],{"class":834,"line":869},[832,3341,1701],{"class":842},[832,3343,1704],{"class":1215},[832,3345,1905],{"class":944},[832,3347,951],{"class":842},[832,3349,1227],{"class":842},[832,3351,3352],{"class":859},"accordion-item _border-bottom-width:thin ...",[832,3354,1227],{"class":842},[832,3356,1234],{"class":842},[832,3358,3359,3361,3363],{"class":834,"line":877},[832,3360,1724],{"class":842},[832,3362,1795],{"class":1215},[832,3364,1234],{"class":842},[832,3366,3367,3369,3371,3373,3375,3377,3380,3382,3385,3387,3389,3391,3393,3396,3398,3400,3402,3404],{"class":834,"line":886},[832,3368,1792],{"class":842},[832,3370,1819],{"class":1215},[832,3372,1905],{"class":944},[832,3374,951],{"class":842},[832,3376,1227],{"class":842},[832,3378,3379],{"class":859},"accordion-trigger ...",[832,3381,1227],{"class":842},[832,3383,3384],{"class":944}," data-state",[832,3386,951],{"class":842},[832,3388,1227],{"class":842},[832,3390,1656],{"class":859},[832,3392,1227],{"class":842},[832,3394,3395],{"class":944}," aria-expanded",[832,3397,951],{"class":842},[832,3399,1227],{"class":842},[832,3401,1995],{"class":859},[832,3403,1227],{"class":842},[832,3405,1234],{"class":842},[832,3407,3408],{"class":834,"line":894},[832,3409,3410],{"class":846},"                Is it accessible?\n",[832,3412,3413,3415,3417,3419,3421,3423,3425,3427,3429,3431,3433,3435,3437,3439,3442,3444,3446],{"class":834,"line":902},[832,3414,1803],{"class":842},[832,3416,1902],{"class":1215},[832,3418,1905],{"class":944},[832,3420,951],{"class":842},[832,3422,1227],{"class":842},[832,3424,1912],{"class":859},[832,3426,1227],{"class":842},[832,3428,1988],{"class":944},[832,3430,951],{"class":842},[832,3432,1227],{"class":842},[832,3434,1995],{"class":859},[832,3436,1227],{"class":842},[832,3438,1390],{"class":842},[832,3440,3441],{"class":846},"...",[832,3443,1677],{"class":842},[832,3445,1902],{"class":1215},[832,3447,1234],{"class":842},[832,3449,3450,3452,3454],{"class":834,"line":910},[832,3451,2049],{"class":842},[832,3453,1819],{"class":1215},[832,3455,1234],{"class":842},[832,3457,3458,3460,3462],{"class":834,"line":918},[832,3459,2152],{"class":842},[832,3461,1795],{"class":1215},[832,3463,1234],{"class":842},[832,3465,3466,3468,3470,3472,3474,3476,3479,3481,3483,3485,3487,3489,3491],{"class":834,"line":935},[832,3467,1724],{"class":842},[832,3469,1704],{"class":1215},[832,3471,1905],{"class":944},[832,3473,951],{"class":842},[832,3475,1227],{"class":842},[832,3477,3478],{"class":859},"accordion-content ...",[832,3480,1227],{"class":842},[832,3482,3384],{"class":944},[832,3484,951],{"class":842},[832,3486,1227],{"class":842},[832,3488,1656],{"class":859},[832,3490,1227],{"class":842},[832,3492,1234],{"class":842},[832,3494,3495,3497,3499,3501],{"class":834,"line":941},[832,3496,1792],{"class":842},[832,3498,1704],{"class":1215},[832,3500,1390],{"class":842},[832,3502,3503],{"class":1785},"\u003C!-- overflow clip -->\n",[832,3505,3506,3508,3510,3512,3514,3516,3519,3521,3523,3525,3527,3529],{"class":834,"line":962},[832,3507,1803],{"class":842},[832,3509,1704],{"class":1215},[832,3511,1905],{"class":944},[832,3513,951],{"class":842},[832,3515,1227],{"class":842},[832,3517,3518],{"class":859},"accordion-body ...",[832,3520,1227],{"class":842},[832,3522,1390],{"class":842},[832,3524,1454],{"class":846},[832,3526,1677],{"class":842},[832,3528,1704],{"class":1215},[832,3530,1234],{"class":842},[832,3532,3533,3535,3537],{"class":834,"line":967},[832,3534,2049],{"class":842},[832,3536,1704],{"class":1215},[832,3538,1234],{"class":842},[832,3540,3541,3543,3545],{"class":834,"line":985},[832,3542,2152],{"class":842},[832,3544,1704],{"class":1215},[832,3546,1234],{"class":842},[832,3548,3549,3551,3553],{"class":834,"line":1002},[832,3550,2162],{"class":842},[832,3552,1704],{"class":1215},[832,3554,1234],{"class":842},[832,3556,3557,3559,3561],{"class":834,"line":1019},[832,3558,1677],{"class":842},[832,3560,1704],{"class":1215},[832,3562,1234],{"class":842},[807,3564,3566],{"id":3565},"see-it-in-action","See it in action",[3568,3569],"story-preview",{"story":3570,":panel":1995},"theme-recipes-layout-accordion--default",[688,3572,195],{"id":3573},"colors",[692,3575,3576,3577,3580,3581,3584,3585,3587],{},"The Accordion recipe includes 3 color variants: ",[700,3578,3579],{},"light",", ",[700,3582,3583],{},"dark",", and ",[700,3586,1341],{},". Like the Card, the Accordion uses neutral-spectrum colors designed for content surfaces rather than status communication. Each color sets the surface background, outer border, and divider color, with dark mode overrides handled by compound variants.",[692,3589,694,3590,3592],{},[700,3591,1341],{}," 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 accordions.",[3568,3594],{"story":3595,":panel":1995},"theme-recipes-layout-accordion--light",[1795,3597,3599],{"id":3598},"color-reference","Color Reference",[3568,3601],{"story":3602},"theme-recipes-layout-accordion--all-variants",[3604,3605,3606,3622],"table",{},[3607,3608,3609],"thead",{},[3610,3611,3612,3616,3619],"tr",{},[3613,3614,3615],"th",{},"Color",[3613,3617,3618],{},"Token",[3613,3620,3621],{},"Use Case",[3623,3624,3625,3644,3658],"tbody",{},[3610,3626,3627,3632,3641],{},[3628,3629,3630],"td",{},[700,3631,3579],{},[3628,3633,3634,3637,3638],{},[700,3635,3636],{},"@color.white"," \u002F ",[700,3639,3640],{},"@color.gray-*",[3628,3642,3643],{},"Light surfaces, stays light in dark mode",[3610,3645,3646,3650,3655],{},[3628,3647,3648],{},[700,3649,3583],{},[3628,3651,3652],{},[700,3653,3654],{},"@color.gray-900",[3628,3656,3657],{},"Dark surfaces, stays dark in light mode",[3610,3659,3660,3664,3667],{},[3628,3661,3662],{},[700,3663,1341],{},[3628,3665,3666],{},"Adaptive (light ↔ dark)",[3628,3668,3669],{},"Default color, adapts to the current color scheme",[3671,3672,3673,3676,3677,3679],"tip",{},[696,3674,3675],{},"Pro tip:"," Use ",[700,3678,1341],{}," as your default accordion color. It adapts automatically to the user's color scheme, so you don't need to manage light and dark variants separately.",[688,3681,3683],{"id":3682},"variants","Variants",[692,3685,3686,3687,1586],{},"Two visual style variants control how the accordion surface is rendered. Each variant is combined with the selected color through ",[721,3688,3690],{"href":3689},"\u002Fdocs\u002Fapi\u002Frecipes#compound-variants","compound variants",[1795,3692,3693],{"id":1355},"Solid",[692,3695,3696],{},"An enclosed, card-like surface: a filled background, an outer border, and rounded corners that clip the panels. Ideal when the accordion is a self-contained block on the page.",[3568,3698],{"story":3699,":panel":1995},"theme-recipes-layout-accordion--solid",[1795,3701,3703],{"id":3702},"ghost","Ghost",[692,3705,3706],{},"Chromeless: no outer border or background, just the dividers between items. Ideal for embedding an accordion inside an existing surface (a card, a sidebar, a settings page) without nesting boxes.",[3568,3708],{"story":3709,":panel":1995},"theme-recipes-layout-accordion--ghost",[688,3711,3713],{"id":3712},"sizes","Sizes",[692,3715,3716,3717,739,3720,3723],{},"Three size variants from ",[700,3718,3719],{},"sm",[700,3721,3722],{},"lg"," control the border radius of the container plus the padding and type scale of the trigger and body.",[3568,3725],{"story":3726,":panel":1995},"theme-recipes-layout-accordion--large",[1795,3728,3730],{"id":3729},"size-reference","Size Reference",[3568,3732],{"story":3733},"theme-recipes-layout-accordion--all-sizes",[3604,3735,3736,3755],{},[3607,3737,3738],{},[3610,3739,3740,3743,3746,3749,3752],{},[3613,3741,3742],{},"Size",[3613,3744,3745],{},"Border Radius",[3613,3747,3748],{},"Trigger Padding (V \u002F H)",[3613,3750,3751],{},"Trigger Font",[3613,3753,3754],{},"Body Padding (T \u002F B \u002F H)",[3623,3756,3757,3790,3821],{},[3610,3758,3759,3763,3768,3776,3781],{},[3628,3760,3761],{},[700,3762,3719],{},[3628,3764,3765],{},[700,3766,3767],{},"@border-radius.sm",[3628,3769,3770,3637,3773],{},[700,3771,3772],{},"@0.5",[700,3774,3775],{},"@0.75",[3628,3777,3778],{},[700,3779,3780],{},"@font-size.sm",[3628,3782,3783,3637,3786,3637,3788],{},[700,3784,3785],{},"@0.25",[700,3787,3772],{},[700,3789,3775],{},[3610,3791,3792,3796,3801,3808,3813],{},[3628,3793,3794],{},[700,3795,1369],{},[3628,3797,3798],{},[700,3799,3800],{},"@border-radius.md",[3628,3802,3803,3637,3805],{},[700,3804,3775],{},[700,3806,3807],{},"@1",[3628,3809,3810],{},[700,3811,3812],{},"@font-size.md",[3628,3814,3815,3637,3817,3637,3819],{},[700,3816,3772],{},[700,3818,3775],{},[700,3820,3807],{},[3610,3822,3823,3827,3832,3839,3844],{},[3628,3824,3825],{},[700,3826,3722],{},[3628,3828,3829],{},[700,3830,3831],{},"@border-radius.lg",[3628,3833,3834,3637,3836],{},[700,3835,3807],{},[700,3837,3838],{},"@1.25",[3628,3840,3841],{},[700,3842,3843],{},"@font-size.lg",[3628,3845,3846,3637,3848,3637,3850],{},[700,3847,3775],{},[700,3849,3807],{},[700,3851,3838],{},[3853,3854,3855,3858,3859,3862],"note",{},[696,3856,3857],{},"Good to know:"," Pass the ",[700,3860,3861],{},"size"," prop to each sub-recipe so the trigger and body padding stay in step with the container's border radius.",[688,3864,3866],{"id":3865},"anatomy","Anatomy",[692,3868,3869],{},"The Accordion recipe is composed of five independent recipes that work together to form a disclosure stack:",[3604,3871,3872,3885],{},[3607,3873,3874],{},[3610,3875,3876,3879,3882],{},[3613,3877,3878],{},"Part",[3613,3880,3881],{},"Recipe",[3613,3883,3884],{},"Role",[3623,3886,3887,3906,3920,3938,3962],{},[3610,3888,3889,3894,3898],{},[3628,3890,3891],{},[696,3892,3893],{},"Root",[3628,3895,3896],{},[700,3897,702],{},[3628,3899,3900,3901,3903,3904,1551],{},"Outer wrapper; surface background, border, and radius (",[700,3902,1355],{},") or chromeless (",[700,3905,3702],{},[3610,3907,3908,3913,3917],{},[3628,3909,3910],{},[696,3911,3912],{},"Item",[3628,3914,3915],{},[700,3916,706],{},[3628,3918,3919],{},"A single panel with a bottom divider (suppressed on the last item)",[3610,3921,3922,3927,3931],{},[3628,3923,3924],{},[696,3925,3926],{},"Trigger",[3628,3928,3929],{},[700,3930,710],{},[3628,3932,3933,3934,3937],{},"The full-width header ",[700,3935,3936],{},"\u003Cbutton>","; hover\u002Ffocus\u002Fdisabled states and the chevron that rotates on open",[3610,3939,3940,3945,3949],{},[3628,3941,3942],{},[696,3943,3944],{},"Content",[3628,3946,3947],{},[700,3948,714],{},[3628,3950,3951,3952,3954,3955,3957,3958,3961],{},"The height animator; transitions ",[700,3953,734],{}," based on ",[700,3956,746],{},". Styles its grid child as an ",[700,3959,3960],{},"overflow: hidden"," clip",[3610,3963,3964,3968,3972],{},[3628,3965,3966],{},[696,3967,256],{},[3628,3969,3970],{},[700,3971,718],{},[3628,3973,3974],{},"The padded inner content, nested inside the content's overflow clip",[692,3976,3977,3978,3980,3981,3983,3984,3580,3986,3989,3990,3993],{},"The content\u002Fbody split is what makes the pure-CSS animation work: the content wrapper is a CSS grid whose single row animates between ",[700,3979,738],{}," and ",[700,3982,742],{},". Its grid child is an overflow clip (",[700,3985,3960],{},[700,3987,3988],{},"min-height: 0",", no padding) and the padded body sits inside that clip. Keeping the padding off the grid child is what lets the row collapse all the way to ",[700,3991,3992],{},"0"," instead of stopping at the padding height and leaving the panel partially visible when closed.",[823,3995,3997],{"className":3313,"code":3996,"language":3316,"meta":828,"style":828},"\u003Cdiv class=\"accordion(...)\">\n    \u003Cdiv class=\"accordionItem(...)\">\n        \u003Ch3>\n            \u003Cbutton class=\"accordionTrigger(...)\" data-state=\"open\">Trigger\u003C\u002Fbutton>\n        \u003C\u002Fh3>\n        \u003Cdiv class=\"accordionContent(...)\" data-state=\"open\">\n            \u003Cdiv>\u003C!-- overflow clip -->\n                \u003Cdiv class=\"accordionBody(...)\">Body content\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[700,3998,3999,4018,4037,4045,4082,4090,4119,4129,4157,4165,4173,4181],{"__ignoreMap":828},[832,4000,4001,4003,4005,4007,4009,4011,4014,4016],{"class":834,"line":835},[832,4002,1212],{"class":842},[832,4004,1704],{"class":1215},[832,4006,1905],{"class":944},[832,4008,951],{"class":842},[832,4010,1227],{"class":842},[832,4012,4013],{"class":859},"accordion(...)",[832,4015,1227],{"class":842},[832,4017,1234],{"class":842},[832,4019,4020,4022,4024,4026,4028,4030,4033,4035],{"class":834,"line":869},[832,4021,1701],{"class":842},[832,4023,1704],{"class":1215},[832,4025,1905],{"class":944},[832,4027,951],{"class":842},[832,4029,1227],{"class":842},[832,4031,4032],{"class":859},"accordionItem(...)",[832,4034,1227],{"class":842},[832,4036,1234],{"class":842},[832,4038,4039,4041,4043],{"class":834,"line":877},[832,4040,1724],{"class":842},[832,4042,1795],{"class":1215},[832,4044,1234],{"class":842},[832,4046,4047,4049,4051,4053,4055,4057,4060,4062,4064,4066,4068,4070,4072,4074,4076,4078,4080],{"class":834,"line":886},[832,4048,1792],{"class":842},[832,4050,1819],{"class":1215},[832,4052,1905],{"class":944},[832,4054,951],{"class":842},[832,4056,1227],{"class":842},[832,4058,4059],{"class":859},"accordionTrigger(...)",[832,4061,1227],{"class":842},[832,4063,3384],{"class":944},[832,4065,951],{"class":842},[832,4067,1227],{"class":842},[832,4069,1656],{"class":859},[832,4071,1227],{"class":842},[832,4073,1390],{"class":842},[832,4075,3926],{"class":846},[832,4077,1677],{"class":842},[832,4079,1819],{"class":1215},[832,4081,1234],{"class":842},[832,4083,4084,4086,4088],{"class":834,"line":894},[832,4085,2152],{"class":842},[832,4087,1795],{"class":1215},[832,4089,1234],{"class":842},[832,4091,4092,4094,4096,4098,4100,4102,4105,4107,4109,4111,4113,4115,4117],{"class":834,"line":902},[832,4093,1724],{"class":842},[832,4095,1704],{"class":1215},[832,4097,1905],{"class":944},[832,4099,951],{"class":842},[832,4101,1227],{"class":842},[832,4103,4104],{"class":859},"accordionContent(...)",[832,4106,1227],{"class":842},[832,4108,3384],{"class":944},[832,4110,951],{"class":842},[832,4112,1227],{"class":842},[832,4114,1656],{"class":859},[832,4116,1227],{"class":842},[832,4118,1234],{"class":842},[832,4120,4121,4123,4125,4127],{"class":834,"line":910},[832,4122,1792],{"class":842},[832,4124,1704],{"class":1215},[832,4126,1390],{"class":842},[832,4128,3503],{"class":1785},[832,4130,4131,4133,4135,4137,4139,4141,4144,4146,4148,4151,4153,4155],{"class":834,"line":918},[832,4132,1803],{"class":842},[832,4134,1704],{"class":1215},[832,4136,1905],{"class":944},[832,4138,951],{"class":842},[832,4140,1227],{"class":842},[832,4142,4143],{"class":859},"accordionBody(...)",[832,4145,1227],{"class":842},[832,4147,1390],{"class":842},[832,4149,4150],{"class":846},"Body content",[832,4152,1677],{"class":842},[832,4154,1704],{"class":1215},[832,4156,1234],{"class":842},[832,4158,4159,4161,4163],{"class":834,"line":935},[832,4160,2049],{"class":842},[832,4162,1704],{"class":1215},[832,4164,1234],{"class":842},[832,4166,4167,4169,4171],{"class":834,"line":941},[832,4168,2152],{"class":842},[832,4170,1704],{"class":1215},[832,4172,1234],{"class":842},[832,4174,4175,4177,4179],{"class":834,"line":962},[832,4176,2162],{"class":842},[832,4178,1704],{"class":1215},[832,4180,1234],{"class":842},[832,4182,4183,4185,4187],{"class":834,"line":967},[832,4184,1677],{"class":842},[832,4186,1704],{"class":1215},[832,4188,1234],{"class":842},[3671,4190,4191,4193,4194,4197,4198,4200],{},[696,4192,3675],{}," The chevron icon rotates 180° automatically when the trigger carries ",[700,4195,4196],{},"data-state=\"open\"",". Give your icon element the ",[700,4199,1912],{}," class and the recipe handles the rotation and its transition.",[688,4202,568],{"id":4203},"accessibility",[692,4205,4206,4207,1421],{},"The Accordion follows the ",[721,4208,4210],{"href":1186,"rel":4209},[1188],"WAI-ARIA Accordion pattern",[756,4212,4213,4230,4245,4265],{},[759,4214,4215,4218,4219,4221,4222,4225,4226,4229],{},[696,4216,4217],{},"Wrap each trigger in a heading."," Place the trigger ",[700,4220,3936],{}," inside an ",[700,4223,4224],{},"\u003Ch2>","–",[700,4227,4228],{},"\u003Ch6>"," appropriate to the page outline so assistive technology can navigate panels by heading.",[759,4231,4232,4237,4238,3980,4242,1586],{},[696,4233,4234,4235,1586],{},"Use a real ",[700,4236,3936],{}," The trigger must be a button so it is focusable and operable with both ",[4239,4240,4241],"kbd",{},"Enter",[4239,4243,4244],{},"Space",[759,4246,4247,4253,4254,4257,4258,4261,4262,4264],{},[696,4248,4249,4250,1586],{},"Reflect state with ",[700,4251,4252],{},"aria-expanded"," Set ",[700,4255,4256],{},"aria-expanded=\"true\""," on the trigger when its panel is open and ",[700,4259,4260],{},"\"false\""," when closed. Mirror the same state on ",[700,4263,746],{}," so the recipe can animate the panel and chevron.",[759,4266,4267,4273,4274,4276],{},[696,4268,4269,4270,1586],{},"Respect ",[700,4271,4272],{},"disabled"," A disabled item's trigger gets ",[700,4275,4272],{}," on the button; the recipe dims it and removes pointer interactions.",[823,4278,4280],{"className":3313,"code":4279,"language":3316,"meta":828,"style":828},"\u003C!-- Correct: heading-wrapped button with state reflected on aria-expanded -->\n\u003Ch3>\n    \u003Cbutton type=\"button\" class=\"accordionTrigger(...)\" aria-expanded=\"true\" data-state=\"open\">\n        Shipping & returns\n    \u003C\u002Fbutton>\n\u003C\u002Fh3>\n",[700,4281,4282,4287,4295,4344,4349,4357],{"__ignoreMap":828},[832,4283,4284],{"class":834,"line":835},[832,4285,4286],{"class":1785},"\u003C!-- Correct: heading-wrapped button with state reflected on aria-expanded -->\n",[832,4288,4289,4291,4293],{"class":834,"line":869},[832,4290,1212],{"class":842},[832,4292,1795],{"class":1215},[832,4294,1234],{"class":842},[832,4296,4297,4299,4301,4304,4306,4308,4310,4312,4314,4316,4318,4320,4322,4324,4326,4328,4330,4332,4334,4336,4338,4340,4342],{"class":834,"line":877},[832,4298,1701],{"class":842},[832,4300,1819],{"class":1215},[832,4302,4303],{"class":944}," type",[832,4305,951],{"class":842},[832,4307,1227],{"class":842},[832,4309,1819],{"class":859},[832,4311,1227],{"class":842},[832,4313,1905],{"class":944},[832,4315,951],{"class":842},[832,4317,1227],{"class":842},[832,4319,4059],{"class":859},[832,4321,1227],{"class":842},[832,4323,3395],{"class":944},[832,4325,951],{"class":842},[832,4327,1227],{"class":842},[832,4329,1995],{"class":859},[832,4331,1227],{"class":842},[832,4333,3384],{"class":944},[832,4335,951],{"class":842},[832,4337,1227],{"class":842},[832,4339,1656],{"class":859},[832,4341,1227],{"class":842},[832,4343,1234],{"class":842},[832,4345,4346],{"class":834,"line":886},[832,4347,4348],{"class":846},"        Shipping & returns\n",[832,4350,4351,4353,4355],{"class":834,"line":894},[832,4352,2162],{"class":842},[832,4354,1819],{"class":1215},[832,4356,1234],{"class":842},[832,4358,4359,4361,4363],{"class":834,"line":902},[832,4360,1677],{"class":842},[832,4362,1795],{"class":1215},[832,4364,1234],{"class":842},[3853,4366,4367,4370,4371,4373,4374,4377,4378,4381],{},[696,4368,4369],{},"Reduced motion:"," The expand\u002Fcollapse transition animates ",[700,4372,734],{},". If you support users who prefer reduced motion, gate the transition behind a ",[700,4375,4376],{},"motion-safe"," modifier or remove it in a ",[700,4379,4380],{},"prefers-reduced-motion"," media query.",[688,4383,4385],{"id":4384},"customization","Customization",[1795,4387,4389],{"id":4388},"overriding-defaults","Overriding Defaults",[692,4391,4392,4393,4395],{},"Each accordion composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change. For example, default to the chromeless ",[700,4394,3702],{}," look:",[823,4397,4399],{"className":825,"code":4398,"filename":821,"language":827,"meta":828,"style":828},"import { styleframe } from 'virtual:styleframe';\nimport {\n    useAccordionRecipe,\n    useAccordionTriggerRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst accordion = useAccordionRecipe(s, {\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'ghost',\n        size: 'md',\n    },\n});\n\nconst accordionTrigger = useAccordionTriggerRecipe(s, {\n    base: {\n        fontWeight: '@font-weight.semibold',\n    },\n});\n\nexport default s;\n",[700,4400,4401,4421,4427,4433,4439,4453,4457,4471,4475,4492,4501,4516,4531,4546,4551,4559,4563,4579,4588,4604,4608,4616,4620],{"__ignoreMap":828},[832,4402,4403,4405,4407,4409,4411,4413,4415,4417,4419],{"class":834,"line":835},[832,4404,839],{"class":838},[832,4406,843],{"class":842},[832,4408,847],{"class":846},[832,4410,850],{"class":842},[832,4412,853],{"class":838},[832,4414,856],{"class":842},[832,4416,860],{"class":859},[832,4418,863],{"class":842},[832,4420,866],{"class":842},[832,4422,4423,4425],{"class":834,"line":869},[832,4424,839],{"class":838},[832,4426,874],{"class":842},[832,4428,4429,4431],{"class":834,"line":877},[832,4430,880],{"class":846},[832,4432,883],{"class":842},[832,4434,4435,4437],{"class":834,"line":886},[832,4436,897],{"class":846},[832,4438,883],{"class":842},[832,4440,4441,4443,4445,4447,4449,4451],{"class":834,"line":894},[832,4442,921],{"class":842},[832,4444,853],{"class":838},[832,4446,856],{"class":842},[832,4448,928],{"class":859},[832,4450,863],{"class":842},[832,4452,866],{"class":842},[832,4454,4455],{"class":834,"line":902},[832,4456,938],{"emptyLinePlaceholder":223},[832,4458,4459,4461,4463,4465,4467,4469],{"class":834,"line":910},[832,4460,945],{"class":944},[832,4462,948],{"class":846},[832,4464,951],{"class":842},[832,4466,847],{"class":954},[832,4468,957],{"class":846},[832,4470,866],{"class":842},[832,4472,4473],{"class":834,"line":918},[832,4474,938],{"emptyLinePlaceholder":223},[832,4476,4477,4479,4481,4483,4485,4488,4490],{"class":834,"line":935},[832,4478,945],{"class":944},[832,4480,972],{"class":846},[832,4482,951],{"class":842},[832,4484,977],{"class":954},[832,4486,4487],{"class":846},"(s",[832,4489,1107],{"class":842},[832,4491,874],{"class":842},[832,4493,4494,4497,4499],{"class":834,"line":941},[832,4495,4496],{"class":1215},"    defaultVariants",[832,4498,1421],{"class":842},[832,4500,874],{"class":842},[832,4502,4503,4506,4508,4510,4512,4514],{"class":834,"line":962},[832,4504,4505],{"class":1215},"        color",[832,4507,1421],{"class":842},[832,4509,856],{"class":842},[832,4511,1341],{"class":859},[832,4513,863],{"class":842},[832,4515,883],{"class":842},[832,4517,4518,4521,4523,4525,4527,4529],{"class":834,"line":967},[832,4519,4520],{"class":1215},"        variant",[832,4522,1421],{"class":842},[832,4524,856],{"class":842},[832,4526,3702],{"class":859},[832,4528,863],{"class":842},[832,4530,883],{"class":842},[832,4532,4533,4536,4538,4540,4542,4544],{"class":834,"line":985},[832,4534,4535],{"class":1215},"        size",[832,4537,1421],{"class":842},[832,4539,856],{"class":842},[832,4541,1369],{"class":859},[832,4543,863],{"class":842},[832,4545,883],{"class":842},[832,4547,4548],{"class":834,"line":1002},[832,4549,4550],{"class":842},"    },\n",[832,4552,4553,4555,4557],{"class":834,"line":1019},[832,4554,921],{"class":842},[832,4556,1551],{"class":846},[832,4558,866],{"class":842},[832,4560,4561],{"class":834,"line":1036},[832,4562,938],{"emptyLinePlaceholder":223},[832,4564,4565,4567,4569,4571,4573,4575,4577],{"class":834,"line":1053},[832,4566,945],{"class":944},[832,4568,1007],{"class":846},[832,4570,951],{"class":842},[832,4572,1012],{"class":954},[832,4574,4487],{"class":846},[832,4576,1107],{"class":842},[832,4578,874],{"class":842},[832,4580,4581,4584,4586],{"class":834,"line":1058},[832,4582,4583],{"class":1215},"    base",[832,4585,1421],{"class":842},[832,4587,874],{"class":842},[832,4589,4590,4593,4595,4597,4600,4602],{"class":834,"line":1512},[832,4591,4592],{"class":1215},"        fontWeight",[832,4594,1421],{"class":842},[832,4596,856],{"class":842},[832,4598,4599],{"class":859},"@font-weight.semibold",[832,4601,863],{"class":842},[832,4603,883],{"class":842},[832,4605,4606],{"class":834,"line":1517},[832,4607,4550],{"class":842},[832,4609,4610,4612,4614],{"class":834,"line":1556},[832,4611,921],{"class":842},[832,4613,1551],{"class":846},[832,4615,866],{"class":842},[832,4617,4618],{"class":834,"line":1620},[832,4619,938],{"emptyLinePlaceholder":223},[832,4621,4622,4624,4626,4628],{"class":834,"line":1674},[832,4623,1061],{"class":838},[832,4625,1064],{"class":838},[832,4627,1067],{"class":846},[832,4629,866],{"class":842},[1795,4631,4633],{"id":4632},"filtering-variants","Filtering Variants",[692,4635,4636,4637,4640],{},"If you only need a subset of the available variants, use the ",[700,4638,4639],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[823,4642,4644],{"className":825,"code":4643,"filename":821,"language":827,"meta":828,"style":828},"import { styleframe } from 'virtual:styleframe';\nimport { useAccordionRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the neutral color in the ghost style\nconst accordion = useAccordionRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        variant: ['ghost'],\n    },\n});\n\nexport default s;\n",[700,4645,4646,4666,4686,4690,4704,4708,4713,4729,4738,4756,4774,4778,4786,4790],{"__ignoreMap":828},[832,4647,4648,4650,4652,4654,4656,4658,4660,4662,4664],{"class":834,"line":835},[832,4649,839],{"class":838},[832,4651,843],{"class":842},[832,4653,847],{"class":846},[832,4655,850],{"class":842},[832,4657,853],{"class":838},[832,4659,856],{"class":842},[832,4661,860],{"class":859},[832,4663,863],{"class":842},[832,4665,866],{"class":842},[832,4667,4668,4670,4672,4674,4676,4678,4680,4682,4684],{"class":834,"line":869},[832,4669,839],{"class":838},[832,4671,843],{"class":842},[832,4673,977],{"class":846},[832,4675,850],{"class":842},[832,4677,853],{"class":838},[832,4679,856],{"class":842},[832,4681,928],{"class":859},[832,4683,863],{"class":842},[832,4685,866],{"class":842},[832,4687,4688],{"class":834,"line":877},[832,4689,938],{"emptyLinePlaceholder":223},[832,4691,4692,4694,4696,4698,4700,4702],{"class":834,"line":886},[832,4693,945],{"class":944},[832,4695,948],{"class":846},[832,4697,951],{"class":842},[832,4699,847],{"class":954},[832,4701,957],{"class":846},[832,4703,866],{"class":842},[832,4705,4706],{"class":834,"line":894},[832,4707,938],{"emptyLinePlaceholder":223},[832,4709,4710],{"class":834,"line":902},[832,4711,4712],{"class":1785},"\u002F\u002F Only generate the neutral color in the ghost style\n",[832,4714,4715,4717,4719,4721,4723,4725,4727],{"class":834,"line":910},[832,4716,945],{"class":944},[832,4718,972],{"class":846},[832,4720,951],{"class":842},[832,4722,977],{"class":954},[832,4724,4487],{"class":846},[832,4726,1107],{"class":842},[832,4728,874],{"class":842},[832,4730,4731,4734,4736],{"class":834,"line":918},[832,4732,4733],{"class":1215},"    filter",[832,4735,1421],{"class":842},[832,4737,874],{"class":842},[832,4739,4740,4742,4744,4746,4748,4750,4752,4754],{"class":834,"line":935},[832,4741,4505],{"class":1215},[832,4743,1421],{"class":842},[832,4745,2435],{"class":846},[832,4747,863],{"class":842},[832,4749,1341],{"class":859},[832,4751,863],{"class":842},[832,4753,1507],{"class":846},[832,4755,883],{"class":842},[832,4757,4758,4760,4762,4764,4766,4768,4770,4772],{"class":834,"line":941},[832,4759,4520],{"class":1215},[832,4761,1421],{"class":842},[832,4763,2435],{"class":846},[832,4765,863],{"class":842},[832,4767,3702],{"class":859},[832,4769,863],{"class":842},[832,4771,1507],{"class":846},[832,4773,883],{"class":842},[832,4775,4776],{"class":834,"line":962},[832,4777,4550],{"class":842},[832,4779,4780,4782,4784],{"class":834,"line":967},[832,4781,921],{"class":842},[832,4783,1551],{"class":846},[832,4785,866],{"class":842},[832,4787,4788],{"class":834,"line":985},[832,4789,938],{"emptyLinePlaceholder":223},[832,4791,4792,4794,4796,4798],{"class":834,"line":1002},[832,4793,1061],{"class":838},[832,4795,1064],{"class":838},[832,4797,1067],{"class":846},[832,4799,866],{"class":842},[3853,4801,4802,4804],{},[696,4803,3857],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,4806,73],{"id":4807},"api-reference",[1795,4809,4811],{"id":4810},"useaccordionrecipes-options",[700,4812,4813],{},"useAccordionRecipe(s, options?)",[692,4815,4816],{},"Creates the accordion root container recipe with the surface background, border, and radius.",[692,4818,4819],{},[696,4820,4821],{},"Parameters:",[3604,4823,4824,4837],{},[3607,4825,4826],{},[3610,4827,4828,4831,4834],{},[3613,4829,4830],{},"Parameter",[3613,4832,4833],{},"Type",[3613,4835,4836],{},"Description",[3623,4838,4839,4854,4869,4884,4898,4913,4928],{},[3610,4840,4841,4846,4851],{},[3628,4842,4843],{},[700,4844,4845],{},"s",[3628,4847,4848],{},[700,4849,4850],{},"Styleframe",[3628,4852,4853],{},"The Styleframe instance",[3610,4855,4856,4861,4866],{},[3628,4857,4858],{},[700,4859,4860],{},"options",[3628,4862,4863],{},[700,4864,4865],{},"DeepPartial\u003CRecipeConfig>",[3628,4867,4868],{},"Optional overrides for the recipe configuration",[3610,4870,4871,4876,4881],{},[3628,4872,4873],{},[700,4874,4875],{},"options.base",[3628,4877,4878],{},[700,4879,4880],{},"VariantDeclarationsBlock",[3628,4882,4883],{},"Custom base styles for the container",[3610,4885,4886,4891,4895],{},[3628,4887,4888],{},[700,4889,4890],{},"options.variants",[3628,4892,4893],{},[700,4894,3683],{},[3628,4896,4897],{},"Custom variant definitions for the recipe",[3610,4899,4900,4905,4910],{},[3628,4901,4902],{},[700,4903,4904],{},"options.defaultVariants",[3628,4906,4907],{},[700,4908,4909],{},"Record\u003Ckeyof Variants, string>",[3628,4911,4912],{},"Default variant values for the recipe",[3610,4914,4915,4920,4925],{},[3628,4916,4917],{},[700,4918,4919],{},"options.compoundVariants",[3628,4921,4922],{},[700,4923,4924],{},"CompoundVariant[]",[3628,4926,4927],{},"Custom compound variant definitions for the recipe",[3610,4929,4930,4935,4940],{},[3628,4931,4932],{},[700,4933,4934],{},"options.filter",[3628,4936,4937],{},[700,4938,4939],{},"Record\u003Cstring, string[]>",[3628,4941,4942],{},"Limit which variant values are generated",[692,4944,4945],{},[696,4946,4947],{},"Variants:",[3604,4949,4950,4963],{},[3607,4951,4952],{},[3610,4953,4954,4957,4960],{},[3613,4955,4956],{},"Variant",[3613,4958,4959],{},"Options",[3613,4961,4962],{},"Default",[3623,4964,4965,4984,5001],{},[3610,4966,4967,4972,4980],{},[3628,4968,4969],{},[700,4970,4971],{},"color",[3628,4973,4974,3580,4976,3580,4978],{},[700,4975,3579],{},[700,4977,3583],{},[700,4979,1341],{},[3628,4981,4982],{},[700,4983,1341],{},[3610,4985,4986,4991,4997],{},[3628,4987,4988],{},[700,4989,4990],{},"variant",[3628,4992,4993,3580,4995],{},[700,4994,1355],{},[700,4996,3702],{},[3628,4998,4999],{},[700,5000,1355],{},[3610,5002,5003,5007,5015],{},[3628,5004,5005],{},[700,5006,3861],{},[3628,5008,5009,3580,5011,3580,5013],{},[700,5010,3719],{},[700,5012,1369],{},[700,5014,3722],{},[3628,5016,5017],{},[700,5018,1369],{},[1795,5020,5022],{"id":5021},"useaccordionitemrecipes-options",[700,5023,5024],{},"useAccordionItemRecipe(s, options?)",[692,5026,5027,5028,5030,5031,1586],{},"Creates the item recipe with a bottom divider whose color tracks the ",[700,5029,4971],{}," axis. The divider is suppressed on the last item. Accepts the same parameters and variant axes as ",[700,5032,5033],{},"useAccordionRecipe",[692,5035,5036],{},[696,5037,4947],{},[3604,5039,5040,5050],{},[3607,5041,5042],{},[3610,5043,5044,5046,5048],{},[3613,5045,4956],{},[3613,5047,4959],{},[3613,5049,4962],{},[3623,5051,5052,5070,5086],{},[3610,5053,5054,5058,5066],{},[3628,5055,5056],{},[700,5057,4971],{},[3628,5059,5060,3580,5062,3580,5064],{},[700,5061,3579],{},[700,5063,3583],{},[700,5065,1341],{},[3628,5067,5068],{},[700,5069,1341],{},[3610,5071,5072,5076,5082],{},[3628,5073,5074],{},[700,5075,4990],{},[3628,5077,5078,3580,5080],{},[700,5079,1355],{},[700,5081,3702],{},[3628,5083,5084],{},[700,5085,1355],{},[3610,5087,5088,5092,5100],{},[3628,5089,5090],{},[700,5091,3861],{},[3628,5093,5094,3580,5096,3580,5098],{},[700,5095,3719],{},[700,5097,1369],{},[700,5099,3722],{},[3628,5101,5102],{},[700,5103,1369],{},[1795,5105,5107],{"id":5106},"useaccordiontriggerrecipes-options",[700,5108,5109],{},"useAccordionTriggerRecipe(s, options?)",[692,5111,5112,5113,5115,5116,5118,5119,5122,5123,1586],{},"Creates the trigger recipe — a full-width, reset ",[700,5114,3936],{}," with hover, focus-visible, and disabled states. Its ",[700,5117,4971],{}," axis drives the hover\u002Factive background; text color is inherited from the surface. The trailing ",[700,5120,5121],{},".accordion-trigger-icon"," rotates 180° when the trigger has ",[700,5124,4196],{},[692,5126,5127],{},[696,5128,4947],{},[3604,5130,5131,5141],{},[3607,5132,5133],{},[3610,5134,5135,5137,5139],{},[3613,5136,4956],{},[3613,5138,4959],{},[3613,5140,4962],{},[3623,5142,5143,5161,5177],{},[3610,5144,5145,5149,5157],{},[3628,5146,5147],{},[700,5148,4971],{},[3628,5150,5151,3580,5153,3580,5155],{},[700,5152,3579],{},[700,5154,3583],{},[700,5156,1341],{},[3628,5158,5159],{},[700,5160,1341],{},[3610,5162,5163,5167,5173],{},[3628,5164,5165],{},[700,5166,4990],{},[3628,5168,5169,3580,5171],{},[700,5170,1355],{},[700,5172,3702],{},[3628,5174,5175],{},[700,5176,1355],{},[3610,5178,5179,5183,5191],{},[3628,5180,5181],{},[700,5182,3861],{},[3628,5184,5185,3580,5187,3580,5189],{},[700,5186,3719],{},[700,5188,1369],{},[700,5190,3722],{},[3628,5192,5193],{},[700,5194,1369],{},[1795,5196,5198],{"id":5197},"useaccordioncontentrecipes-options",[700,5199,5200],{},"useAccordionContentRecipe(s, options?)",[692,5202,5203,5204,735,5206,739,5208,5210,5211,5213,5214,5216,5217,1586],{},"Creates the content recipe — a CSS grid wrapper that animates ",[700,5205,734],{},[700,5207,738],{},[700,5209,742],{}," when it has ",[700,5212,4196],{},". Its single grid child is styled as an ",[700,5215,3960],{}," clip so the padded body inside can collapse fully. Accepts the same parameters as ",[700,5218,5033],{},[692,5220,5221],{},[696,5222,4947],{},[3604,5224,5225,5235],{},[3607,5226,5227],{},[3610,5228,5229,5231,5233],{},[3613,5230,4956],{},[3613,5232,4959],{},[3613,5234,4962],{},[3623,5236,5237,5255,5271],{},[3610,5238,5239,5243,5251],{},[3628,5240,5241],{},[700,5242,4971],{},[3628,5244,5245,3580,5247,3580,5249],{},[700,5246,3579],{},[700,5248,3583],{},[700,5250,1341],{},[3628,5252,5253],{},[700,5254,1341],{},[3610,5256,5257,5261,5267],{},[3628,5258,5259],{},[700,5260,4990],{},[3628,5262,5263,3580,5265],{},[700,5264,1355],{},[700,5266,3702],{},[3628,5268,5269],{},[700,5270,1355],{},[3610,5272,5273,5277,5285],{},[3628,5274,5275],{},[700,5276,3861],{},[3628,5278,5279,3580,5281,3580,5283],{},[700,5280,3719],{},[700,5282,1369],{},[700,5284,3722],{},[3628,5286,5287],{},[700,5288,1369],{},[1795,5290,5292],{"id":5291},"useaccordionbodyrecipes-options",[700,5293,5294],{},"useAccordionBodyRecipe(s, options?)",[692,5296,5297,5298,5300,5301,5304,5305,5308],{},"Creates the body recipe for the padded inner content. It sits inside the content recipe's overflow clip, so it carries only padding and typography (scaled by the ",[700,5299,3861],{}," axis) — never ",[700,5302,5303],{},"overflow"," or ",[700,5306,5307],{},"min-height",", which on the grid child would stop the panel from collapsing fully.",[692,5310,5311],{},[696,5312,4947],{},[3604,5314,5315,5325],{},[3607,5316,5317],{},[3610,5318,5319,5321,5323],{},[3613,5320,4956],{},[3613,5322,4959],{},[3613,5324,4962],{},[3623,5326,5327,5345,5361],{},[3610,5328,5329,5333,5341],{},[3628,5330,5331],{},[700,5332,4971],{},[3628,5334,5335,3580,5337,3580,5339],{},[700,5336,3579],{},[700,5338,3583],{},[700,5340,1341],{},[3628,5342,5343],{},[700,5344,1341],{},[3610,5346,5347,5351,5357],{},[3628,5348,5349],{},[700,5350,4990],{},[3628,5352,5353,3580,5355],{},[700,5354,1355],{},[700,5356,3702],{},[3628,5358,5359],{},[700,5360,1355],{},[3610,5362,5363,5367,5375],{},[3628,5364,5365],{},[700,5366,3861],{},[3628,5368,5369,3580,5371,3580,5373],{},[700,5370,3719],{},[700,5372,1369],{},[700,5374,3722],{},[3628,5376,5377],{},[700,5378,1369],{},[692,5380,5381],{},[721,5382,5383],{"href":132},"Learn more about recipes →",[688,5385,5387],{"id":5386},"best-practices","Best Practices",[756,5389,5390,5401,5412,5423,5436,5451],{},[759,5391,5392,5400],{},[696,5393,5394,5395,3980,5397,5399],{},"Pass ",[700,5396,4971],{},[700,5398,4990],{}," consistently",": The root, item, and trigger share these axes so the surface, dividers, and hover states stay coherent.",[759,5402,5403,5408,5409,5411],{},[696,5404,5394,5405,5407],{},[700,5406,3861],{}," to each sub-recipe",": The root controls border radius, but the trigger and body manage their own padding from the ",[700,5410,3861],{}," prop.",[759,5413,5414,5417,5418,3637,5420,5422],{},[696,5415,5416],{},"Own the open state",": The recipes are stateless and style off ",[700,5419,746],{},[700,5421,4252],{},". Keep open\u002Fclosed state in your component and reflect it on both attributes.",[759,5424,5425,5428,5429,5432,5433,5435],{},[696,5426,5427],{},"Keep content mounted",": The grid-rows animation needs the body in the DOM to collapse. Avoid ",[700,5430,5431],{},"v-if","\u002Funmounting the content if you want the transition; toggle ",[700,5434,746],{}," instead.",[759,5437,5438,5444,5445,5447,5448,5450],{},[696,5439,5440,5441,5443],{},"Use ",[700,5442,3702],{}," when nesting",": Reach for ",[700,5446,3702],{}," inside an existing surface and ",[700,5449,1355],{}," when the accordion is a standalone block.",[759,5452,5453,5456,5457,5459],{},[696,5454,5455],{},"Filter what you don't need",": If your accordion only uses one color or style, pass a ",[700,5458,4639],{}," option to reduce generated CSS.",[688,5461,5463],{"id":5462},"faq","FAQ",[2548,5465,5466,5479,5503,5518,5529,5540,5550],{},[5467,5468,5471,5472,5474,5475,5478],"accordion-item",{"icon":5469,"label":5470},"i-lucide-circle-help","Why are there five separate recipes instead of one?","An accordion has distinct structural parts — the container surface, the per-item divider, the interactive header button, the animated height wrapper, and the padded body. Five separate recipes give each part its own base styles and compound variants while sharing the same variant axes. In particular, splitting ",[700,5473,3001],{}," (the grid animator) from ",[700,5476,5477],{},"body"," (the padded inner) is what makes the pure-CSS height animation collapse cleanly.",[5467,5480,5482,5483,735,5485,5487,5488,5490,5491,5493,5494,5496,5497,5499,5500,5502],{"icon":5469,"label":5481},"How does the open\u002Fclose animation work without JavaScript?","The content wrapper is a CSS grid with a single row. It animates ",[700,5484,734],{},[700,5486,738],{}," (collapsed) to ",[700,5489,742],{}," (expanded) when it carries ",[700,5492,4196],{},". Its grid child is an ",[700,5495,3960],{}," clip with ",[700,5498,3988],{},", and the padded body sits inside that clip — so the row collapses to exactly zero (padding on the grid child would floor it at the padding height). You only toggle the ",[700,5501,746],{}," attribute; the browser interpolates the height with no measurement.",[5467,5504,5506,5508,5509,5511,5512,5514,5515,5517],{"icon":5469,"label":5505},"What's the difference between the solid and ghost variants?",[700,5507,1355],{}," renders an enclosed, card-like surface with a background, an outer border, and rounded corners. ",[700,5510,3702],{}," is chromeless — no background or border, just the dividers between items. Use ",[700,5513,1355],{}," for a standalone block and ",[700,5516,3702],{}," when embedding the accordion inside an existing surface.",[5467,5519,5521,5522,3580,5524,3584,5526,5528],{"icon":5469,"label":5520},"Why doesn't the Accordion include semantic colors like primary or success?","The accordion is a content container, not a status indicator. Semantic colors communicate meaning and are better suited to smaller, focused elements like badges, buttons, and callouts. The accordion uses ",[700,5523,3579],{},[700,5525,3583],{},[700,5527,1341],{}," to provide surface variations that work across all content types.",[5467,5530,5532,5533,4221,5535,4225,5537,5539],{"icon":5469,"label":5531},"Do I need to wrap the trigger in a heading?","For the WAI-ARIA accordion pattern, yes — place the trigger ",[700,5534,3936],{},[700,5536,4224],{},[700,5538,4228],{}," appropriate to your page outline so assistive technology can navigate panels by heading. The heading carries no styling of its own; the recipe styles the button.",[5467,5541,5543,5544,5546,5547,5549],{"icon":5469,"label":5542},"How do I allow multiple panels open at once?","That's a state concern, not a styling one. The recipes style off ",[700,5545,746],{}," regardless of how many panels are open, so keep an array (or set) of open values in your component and let more than one item be ",[700,5548,1656],{}," at a time.",[5467,5551,5553,5568],{"icon":5469,"label":5552},"How does filtering affect compound variants?",[692,5554,5555,5556,5558,5559,739,5561,5564,5565,5567],{},"When you use the ",[700,5557,4639],{}," option, compound variants that reference filtered-out values are automatically removed, and default variants are adjusted if they reference a removed value. For example, filtering ",[700,5560,4990],{},[700,5562,5563],{},"['ghost']"," drops the ",[700,5566,1355],{}," surface compounds from the generated output.",[692,5569,5570],{},[721,5571,5572],{"href":3689},"Learn more about compound variants →",[5574,5575,5576],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":828,"searchDepth":869,"depth":869,"links":5578},[5579,5580,5581,5582,5585,5589,5592,5593,5594,5598,5605,5606],{"id":690,"depth":869,"text":78},{"id":750,"depth":869,"text":751},{"id":800,"depth":869,"text":801},{"id":3573,"depth":869,"text":195,"children":5583},[5584],{"id":3598,"depth":877,"text":3599},{"id":3682,"depth":869,"text":3683,"children":5586},[5587,5588],{"id":1355,"depth":877,"text":3693},{"id":3702,"depth":877,"text":3703},{"id":3712,"depth":869,"text":3713,"children":5590},[5591],{"id":3729,"depth":877,"text":3730},{"id":3865,"depth":869,"text":3866},{"id":4203,"depth":869,"text":568},{"id":4384,"depth":869,"text":4385,"children":5595},[5596,5597],{"id":4388,"depth":877,"text":4389},{"id":4632,"depth":877,"text":4633},{"id":4807,"depth":869,"text":73,"children":5599},[5600,5601,5602,5603,5604],{"id":4810,"depth":877,"text":4813},{"id":5021,"depth":877,"text":5024},{"id":5106,"depth":877,"text":5109},{"id":5197,"depth":877,"text":5200},{"id":5291,"depth":877,"text":5294},{"id":5386,"depth":869,"text":5387},{"id":5462,"depth":869,"text":5463},"A stacked set of collapsible disclosure panels for progressively revealing content. Supports multiple colors, an enclosed or chromeless style, and sizes through the recipe system.",null,{},{"icon":7},{"title":523,"description":5607},"cLKuG9KDvKu1h9KglKTqiyvcTHEpXtv8ne4jKKoA-Sc",[5614,5616],{"title":515,"path":516,"stem":517,"description":5615,"icon":7,"children":-1},"A floating label component for supplementary information, composed of a content bubble and directional arrow. Supports multiple colors, visual styles, and sizes through the recipe system.",{"title":527,"path":528,"stem":529,"description":5617,"icon":7,"children":-1},"A user avatar with an image and an automatic initials fallback — circular or square, with an optional status badge — built as a multi-part recipe system.",1781596343744]