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