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