[{"data":1,"prerenderedAt":3913},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-z-index":682,"-docs-theme-design-tokens-z-index-surround":3908},{"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":684,"body":685,"description":3902,"extension":3866,"links":3903,"meta":3904,"navigation":3905,"path":240,"seo":3906,"stem":241,"__hash__":3907},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index.md","Z-Index Design Tokens",{"type":686,"value":687,"toc":3888},"minimark",[688,714,718,722,726,729,763,768,771,1176,1179,1291,1303,1308,1315,1596,1600,1607,1904,1918,1922,1925,2926,2933,2937,2941,2944,3729,3733,3791,3796,3800,3884],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," ",[697,698,699],"code",{},"useZIndexDesignTokens"," is included in the ",[702,703,704],"a",{"href":171},"Design Tokens Preset"," (",[697,707,708],{},"useDesignTokensPreset",") and you can configure it through the preset's ",[697,711,712],{},"zIndex"," option. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721],"p",{},"The z-index composable helps you create a consistent stacking order system with minimal code. It generates z-index variables that can be easily referenced throughout your application, preventing the #1 source of CSS stacking bugs — conflicting arbitrary z-index values.",[715,723,725],{"id":724},"why-use-z-index-composables","Why use z-index composables?",[719,727,728],{},"Z-index composables help you:",[730,731,732,739,745,751,757],"ul",{},[733,734,735,738],"li",{},[692,736,737],{},"Prevent stacking conflicts",": Use a predefined scale instead of inventing arbitrary values that inevitably collide.",[733,740,741,744],{},[692,742,743],{},"Establish semantic layers",": Name your z-index levels by purpose (dropdown, modal, toast) rather than magic numbers.",[733,746,747,750],{},[692,748,749],{},"Enable flexible theming",": Override z-index variables to adjust stacking order across your application.",[733,752,753,756],{},[692,754,755],{},"Maintain consistency",": Ensure every developer on the team uses the same stacking scale.",[733,758,759,762],{},[692,760,761],{},"Pair with elevation",": Align z-index levels with box-shadow elevation for a coherent visual hierarchy.",[715,764,766],{"id":765},"usezindexdesigntokens",[697,767,699],{},[719,769,770],{},"Styleframe provides a set of carefully crafted default z-index values that you can use out of the box:",[772,773,774,1011],"tabs",{},[775,776,778],"tabs-item",{"icon":777,"label":290},"i-lucide-code",[779,780,786],"pre",{"className":781,"code":782,"filename":783,"language":784,"meta":785,"style":785},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    zIndex,\n    zIndexHide,\n    zIndexBase,\n    zIndexDropdown,\n    zIndexSticky,\n    zIndexOverlay,\n    zIndexModal,\n    zIndexPopover,\n    zIndexToast,\n    zIndexMax,\n    zIndexAuto,\n} = useZIndexDesignTokens(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,787,788,824,847,853,874,879,887,896,904,912,920,928,936,944,952,960,968,976,992,997],{"__ignoreMap":785},[789,790,793,797,801,805,808,811,814,818,821],"span",{"class":791,"line":792},"line",1,[789,794,796],{"class":795},"s7zQu","import",[789,798,800],{"class":799},"sMK4o"," {",[789,802,804],{"class":803},"sTEyZ"," styleframe",[789,806,807],{"class":799}," }",[789,809,810],{"class":795}," from",[789,812,813],{"class":799}," '",[789,815,817],{"class":816},"sfazB","styleframe",[789,819,820],{"class":799},"'",[789,822,823],{"class":799},";\n",[789,825,827,829,831,834,836,838,840,843,845],{"class":791,"line":826},2,[789,828,796],{"class":795},[789,830,800],{"class":799},[789,832,833],{"class":803}," useZIndexDesignTokens",[789,835,807],{"class":799},[789,837,810],{"class":795},[789,839,813],{"class":799},[789,841,842],{"class":816},"@styleframe\u002Ftheme",[789,844,820],{"class":799},[789,846,823],{"class":799},[789,848,850],{"class":791,"line":849},3,[789,851,852],{"emptyLinePlaceholder":223},"\n",[789,854,856,860,863,866,869,872],{"class":791,"line":855},4,[789,857,859],{"class":858},"spNyl","const",[789,861,862],{"class":803}," s ",[789,864,865],{"class":799},"=",[789,867,804],{"class":868},"s2Zo4",[789,870,871],{"class":803},"()",[789,873,823],{"class":799},[789,875,877],{"class":791,"line":876},5,[789,878,852],{"emptyLinePlaceholder":223},[789,880,882,884],{"class":791,"line":881},6,[789,883,859],{"class":858},[789,885,886],{"class":799}," {\n",[789,888,890,893],{"class":791,"line":889},7,[789,891,892],{"class":803},"    zIndex",[789,894,895],{"class":799},",\n",[789,897,899,902],{"class":791,"line":898},8,[789,900,901],{"class":803},"    zIndexHide",[789,903,895],{"class":799},[789,905,907,910],{"class":791,"line":906},9,[789,908,909],{"class":803},"    zIndexBase",[789,911,895],{"class":799},[789,913,915,918],{"class":791,"line":914},10,[789,916,917],{"class":803},"    zIndexDropdown",[789,919,895],{"class":799},[789,921,923,926],{"class":791,"line":922},11,[789,924,925],{"class":803},"    zIndexSticky",[789,927,895],{"class":799},[789,929,931,934],{"class":791,"line":930},12,[789,932,933],{"class":803},"    zIndexOverlay",[789,935,895],{"class":799},[789,937,939,942],{"class":791,"line":938},13,[789,940,941],{"class":803},"    zIndexModal",[789,943,895],{"class":799},[789,945,947,950],{"class":791,"line":946},14,[789,948,949],{"class":803},"    zIndexPopover",[789,951,895],{"class":799},[789,953,955,958],{"class":791,"line":954},15,[789,956,957],{"class":803},"    zIndexToast",[789,959,895],{"class":799},[789,961,963,966],{"class":791,"line":962},16,[789,964,965],{"class":803},"    zIndexMax",[789,967,895],{"class":799},[789,969,971,974],{"class":791,"line":970},17,[789,972,973],{"class":803},"    zIndexAuto",[789,975,895],{"class":799},[789,977,979,982,985,987,990],{"class":791,"line":978},18,[789,980,981],{"class":799},"}",[789,983,984],{"class":799}," =",[789,986,833],{"class":868},[789,988,989],{"class":803},"(s)",[789,991,823],{"class":799},[789,993,995],{"class":791,"line":994},19,[789,996,852],{"emptyLinePlaceholder":223},[789,998,1000,1003,1006,1009],{"class":791,"line":999},20,[789,1001,1002],{"class":795},"export",[789,1004,1005],{"class":795}," default",[789,1007,1008],{"class":803}," s",[789,1010,823],{"class":799},[775,1012,1013],{"icon":154,"label":326},[779,1014,1019],{"className":1015,"code":1016,"filename":1017,"language":1018,"meta":785,"style":785},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --z-index--hide: -1;\n    --z-index--base: 0;\n    --z-index--dropdown: 100;\n    --z-index--sticky: 200;\n    --z-index--overlay: 300;\n    --z-index--modal: 400;\n    --z-index--popover: 500;\n    --z-index--toast: 600;\n    --z-index--max: 9999;\n    --z-index--auto: auto;\n    --z-index: var(--z-index--base);\n}\n","styleframe\u002Findex.css","css",[697,1020,1021,1031,1044,1056,1068,1080,1092,1104,1116,1128,1140,1152,1171],{"__ignoreMap":785},[789,1022,1023,1026,1029],{"class":791,"line":792},[789,1024,1025],{"class":799},":",[789,1027,1028],{"class":858},"root",[789,1030,886],{"class":799},[789,1032,1033,1036,1038,1042],{"class":791,"line":826},[789,1034,1035],{"class":803},"    --z-index--hide",[789,1037,1025],{"class":799},[789,1039,1041],{"class":1040},"sbssI"," -1",[789,1043,823],{"class":799},[789,1045,1046,1049,1051,1054],{"class":791,"line":849},[789,1047,1048],{"class":803},"    --z-index--base",[789,1050,1025],{"class":799},[789,1052,1053],{"class":1040}," 0",[789,1055,823],{"class":799},[789,1057,1058,1061,1063,1066],{"class":791,"line":855},[789,1059,1060],{"class":803},"    --z-index--dropdown",[789,1062,1025],{"class":799},[789,1064,1065],{"class":1040}," 100",[789,1067,823],{"class":799},[789,1069,1070,1073,1075,1078],{"class":791,"line":876},[789,1071,1072],{"class":803},"    --z-index--sticky",[789,1074,1025],{"class":799},[789,1076,1077],{"class":1040}," 200",[789,1079,823],{"class":799},[789,1081,1082,1085,1087,1090],{"class":791,"line":881},[789,1083,1084],{"class":803},"    --z-index--overlay",[789,1086,1025],{"class":799},[789,1088,1089],{"class":1040}," 300",[789,1091,823],{"class":799},[789,1093,1094,1097,1099,1102],{"class":791,"line":889},[789,1095,1096],{"class":803},"    --z-index--modal",[789,1098,1025],{"class":799},[789,1100,1101],{"class":1040}," 400",[789,1103,823],{"class":799},[789,1105,1106,1109,1111,1114],{"class":791,"line":898},[789,1107,1108],{"class":803},"    --z-index--popover",[789,1110,1025],{"class":799},[789,1112,1113],{"class":1040}," 500",[789,1115,823],{"class":799},[789,1117,1118,1121,1123,1126],{"class":791,"line":906},[789,1119,1120],{"class":803},"    --z-index--toast",[789,1122,1025],{"class":799},[789,1124,1125],{"class":1040}," 600",[789,1127,823],{"class":799},[789,1129,1130,1133,1135,1138],{"class":791,"line":914},[789,1131,1132],{"class":803},"    --z-index--max",[789,1134,1025],{"class":799},[789,1136,1137],{"class":1040}," 9999",[789,1139,823],{"class":799},[789,1141,1142,1145,1147,1150],{"class":791,"line":922},[789,1143,1144],{"class":803},"    --z-index--auto",[789,1146,1025],{"class":799},[789,1148,1149],{"class":803}," auto",[789,1151,823],{"class":799},[789,1153,1154,1157,1159,1162,1165,1168],{"class":791,"line":930},[789,1155,1156],{"class":803},"    --z-index",[789,1158,1025],{"class":799},[789,1160,1161],{"class":868}," var",[789,1163,1164],{"class":799},"(",[789,1166,1167],{"class":803},"--z-index--base",[789,1169,1170],{"class":799},");\n",[789,1172,1173],{"class":791,"line":938},[789,1174,1175],{"class":799},"}\n",[719,1177,1178],{},"The default values include:",[730,1180,1181,1193,1204,1215,1226,1237,1248,1259,1270,1281],{},[733,1182,1183,1188,1189,1192],{},[692,1184,1185],{},[697,1186,1187],{},"hide",": Behind base content (",[697,1190,1191],{},"-1",")",[733,1194,1195,1200,1201,1192],{},[692,1196,1197],{},[697,1198,1199],{},"base"," (default): Default stacking level (",[697,1202,1203],{},"0",[733,1205,1206,1211,1212,1192],{},[692,1207,1208],{},[697,1209,1210],{},"dropdown",": Dropdowns and select menus (",[697,1213,1214],{},"100",[733,1216,1217,1222,1223,1192],{},[692,1218,1219],{},[697,1220,1221],{},"sticky",": Sticky headers and columns (",[697,1224,1225],{},"200",[733,1227,1228,1233,1234,1192],{},[692,1229,1230],{},[697,1231,1232],{},"overlay",": Overlays and backdrops (",[697,1235,1236],{},"300",[733,1238,1239,1244,1245,1192],{},[692,1240,1241],{},[697,1242,1243],{},"modal",": Modals and dialogs (",[697,1246,1247],{},"400",[733,1249,1250,1255,1256,1192],{},[692,1251,1252],{},[697,1253,1254],{},"popover",": Popovers and tooltips (",[697,1257,1258],{},"500",[733,1260,1261,1266,1267,1192],{},[692,1262,1263],{},[697,1264,1265],{},"toast",": Toasts and notifications (",[697,1268,1269],{},"600",[733,1271,1272,1277,1278,1192],{},[692,1273,1274],{},[697,1275,1276],{},"max",": Escape hatch for highest priority (",[697,1279,1280],{},"9999",[733,1282,1283,1288,1289,1192],{},[692,1284,1285],{},[697,1286,1287],{},"auto",": Browser default (",[697,1290,1287],{},[689,1292,1293,1296,1297,1299,1300,1302],{},[692,1294,1295],{},"Good to know:"," The scale uses increments of 100 between semantic levels, leaving room for intermediate values if needed. The ",[697,1298,1276],{}," token (",[697,1301,1280],{},") acts as an escape hatch for edge cases.",[1304,1305,1307],"h3",{"id":1306},"extending-the-default-z-index-values","Extending the Default Z-Index Values",[719,1309,1310,1311,1314],{},"You can customize which z-index is used as the default while keeping all other standard values. Use the ",[697,1312,1313],{},"@"," prefix to reference another key in the values object:",[772,1316,1317,1462],{},[775,1318,1319],{"icon":777,"label":290},[779,1320,1322],{"className":781,"code":1321,"filename":783,"language":784,"meta":785,"style":785},"import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens, zIndexValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { zIndex } = useZIndexDesignTokens(s, {\n    ...zIndexValues,\n    default: '@z-index.dropdown'\n});\n\nexport default s;\n",[697,1323,1324,1344,1370,1374,1388,1392,1414,1424,1440,1448,1452],{"__ignoreMap":785},[789,1325,1326,1328,1330,1332,1334,1336,1338,1340,1342],{"class":791,"line":792},[789,1327,796],{"class":795},[789,1329,800],{"class":799},[789,1331,804],{"class":803},[789,1333,807],{"class":799},[789,1335,810],{"class":795},[789,1337,813],{"class":799},[789,1339,817],{"class":816},[789,1341,820],{"class":799},[789,1343,823],{"class":799},[789,1345,1346,1348,1350,1352,1355,1358,1360,1362,1364,1366,1368],{"class":791,"line":826},[789,1347,796],{"class":795},[789,1349,800],{"class":799},[789,1351,833],{"class":803},[789,1353,1354],{"class":799},",",[789,1356,1357],{"class":803}," zIndexValues",[789,1359,807],{"class":799},[789,1361,810],{"class":795},[789,1363,813],{"class":799},[789,1365,842],{"class":816},[789,1367,820],{"class":799},[789,1369,823],{"class":799},[789,1371,1372],{"class":791,"line":849},[789,1373,852],{"emptyLinePlaceholder":223},[789,1375,1376,1378,1380,1382,1384,1386],{"class":791,"line":855},[789,1377,859],{"class":858},[789,1379,862],{"class":803},[789,1381,865],{"class":799},[789,1383,804],{"class":868},[789,1385,871],{"class":803},[789,1387,823],{"class":799},[789,1389,1390],{"class":791,"line":876},[789,1391,852],{"emptyLinePlaceholder":223},[789,1393,1394,1396,1398,1401,1403,1405,1407,1410,1412],{"class":791,"line":881},[789,1395,859],{"class":858},[789,1397,800],{"class":799},[789,1399,1400],{"class":803}," zIndex ",[789,1402,981],{"class":799},[789,1404,984],{"class":799},[789,1406,833],{"class":868},[789,1408,1409],{"class":803},"(s",[789,1411,1354],{"class":799},[789,1413,886],{"class":799},[789,1415,1416,1419,1422],{"class":791,"line":889},[789,1417,1418],{"class":799},"    ...",[789,1420,1421],{"class":803},"zIndexValues",[789,1423,895],{"class":799},[789,1425,1426,1430,1432,1434,1437],{"class":791,"line":898},[789,1427,1429],{"class":1428},"swJcz","    default",[789,1431,1025],{"class":799},[789,1433,813],{"class":799},[789,1435,1436],{"class":816},"@z-index.dropdown",[789,1438,1439],{"class":799},"'\n",[789,1441,1442,1444,1446],{"class":791,"line":906},[789,1443,981],{"class":799},[789,1445,1192],{"class":803},[789,1447,823],{"class":799},[789,1449,1450],{"class":791,"line":914},[789,1451,852],{"emptyLinePlaceholder":223},[789,1453,1454,1456,1458,1460],{"class":791,"line":922},[789,1455,1002],{"class":795},[789,1457,1005],{"class":795},[789,1459,1008],{"class":803},[789,1461,823],{"class":799},[775,1463,1464],{"icon":154,"label":326},[779,1465,1467],{"className":1015,"code":1466,"filename":1017,"language":1018,"meta":785,"style":785},":root {\n    --z-index--hide: -1;\n    --z-index--base: 0;\n    --z-index--dropdown: 100;\n    --z-index--sticky: 200;\n    --z-index--overlay: 300;\n    --z-index--modal: 400;\n    --z-index--popover: 500;\n    --z-index--toast: 600;\n    --z-index--max: 9999;\n    --z-index--auto: auto;\n    --z-index: var(--z-index--dropdown);\n}\n",[697,1468,1469,1477,1487,1497,1507,1517,1527,1537,1547,1557,1567,1577,1592],{"__ignoreMap":785},[789,1470,1471,1473,1475],{"class":791,"line":792},[789,1472,1025],{"class":799},[789,1474,1028],{"class":858},[789,1476,886],{"class":799},[789,1478,1479,1481,1483,1485],{"class":791,"line":826},[789,1480,1035],{"class":803},[789,1482,1025],{"class":799},[789,1484,1041],{"class":1040},[789,1486,823],{"class":799},[789,1488,1489,1491,1493,1495],{"class":791,"line":849},[789,1490,1048],{"class":803},[789,1492,1025],{"class":799},[789,1494,1053],{"class":1040},[789,1496,823],{"class":799},[789,1498,1499,1501,1503,1505],{"class":791,"line":855},[789,1500,1060],{"class":803},[789,1502,1025],{"class":799},[789,1504,1065],{"class":1040},[789,1506,823],{"class":799},[789,1508,1509,1511,1513,1515],{"class":791,"line":876},[789,1510,1072],{"class":803},[789,1512,1025],{"class":799},[789,1514,1077],{"class":1040},[789,1516,823],{"class":799},[789,1518,1519,1521,1523,1525],{"class":791,"line":881},[789,1520,1084],{"class":803},[789,1522,1025],{"class":799},[789,1524,1089],{"class":1040},[789,1526,823],{"class":799},[789,1528,1529,1531,1533,1535],{"class":791,"line":889},[789,1530,1096],{"class":803},[789,1532,1025],{"class":799},[789,1534,1101],{"class":1040},[789,1536,823],{"class":799},[789,1538,1539,1541,1543,1545],{"class":791,"line":898},[789,1540,1108],{"class":803},[789,1542,1025],{"class":799},[789,1544,1113],{"class":1040},[789,1546,823],{"class":799},[789,1548,1549,1551,1553,1555],{"class":791,"line":906},[789,1550,1120],{"class":803},[789,1552,1025],{"class":799},[789,1554,1125],{"class":1040},[789,1556,823],{"class":799},[789,1558,1559,1561,1563,1565],{"class":791,"line":914},[789,1560,1132],{"class":803},[789,1562,1025],{"class":799},[789,1564,1137],{"class":1040},[789,1566,823],{"class":799},[789,1568,1569,1571,1573,1575],{"class":791,"line":922},[789,1570,1144],{"class":803},[789,1572,1025],{"class":799},[789,1574,1149],{"class":803},[789,1576,823],{"class":799},[789,1578,1579,1581,1583,1585,1587,1590],{"class":791,"line":930},[789,1580,1156],{"class":803},[789,1582,1025],{"class":799},[789,1584,1161],{"class":868},[789,1586,1164],{"class":799},[789,1588,1589],{"class":803},"--z-index--dropdown",[789,1591,1170],{"class":799},[789,1593,1594],{"class":791,"line":938},[789,1595,1175],{"class":799},[1304,1597,1599],{"id":1598},"creating-custom-z-index-variables","Creating Custom Z-Index Variables",[719,1601,1602,1603,1606],{},"The ",[697,1604,1605],{},"useZIndexDesignTokens()"," function creates a set of z-index variables for establishing stacking order in your interface.",[772,1608,1609,1828],{},[775,1610,1611],{"icon":777,"label":290},[779,1612,1614],{"className":781,"code":1613,"filename":783,"language":784,"meta":785,"style":785},"import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    zIndex,\n    zIndexBase,\n    zIndexDropdown,\n    zIndexModal,\n    zIndexToast,\n} = useZIndexDesignTokens(s, {\n    default: '@z-index.base',\n    base: '0',\n    dropdown: '1000',\n    modal: '2000',\n    toast: '3000',\n});\n\nexport default s;\n",[697,1615,1616,1636,1656,1660,1674,1678,1684,1690,1696,1702,1708,1714,1728,1743,1758,1774,1790,1806,1814,1818],{"__ignoreMap":785},[789,1617,1618,1620,1622,1624,1626,1628,1630,1632,1634],{"class":791,"line":792},[789,1619,796],{"class":795},[789,1621,800],{"class":799},[789,1623,804],{"class":803},[789,1625,807],{"class":799},[789,1627,810],{"class":795},[789,1629,813],{"class":799},[789,1631,817],{"class":816},[789,1633,820],{"class":799},[789,1635,823],{"class":799},[789,1637,1638,1640,1642,1644,1646,1648,1650,1652,1654],{"class":791,"line":826},[789,1639,796],{"class":795},[789,1641,800],{"class":799},[789,1643,833],{"class":803},[789,1645,807],{"class":799},[789,1647,810],{"class":795},[789,1649,813],{"class":799},[789,1651,842],{"class":816},[789,1653,820],{"class":799},[789,1655,823],{"class":799},[789,1657,1658],{"class":791,"line":849},[789,1659,852],{"emptyLinePlaceholder":223},[789,1661,1662,1664,1666,1668,1670,1672],{"class":791,"line":855},[789,1663,859],{"class":858},[789,1665,862],{"class":803},[789,1667,865],{"class":799},[789,1669,804],{"class":868},[789,1671,871],{"class":803},[789,1673,823],{"class":799},[789,1675,1676],{"class":791,"line":876},[789,1677,852],{"emptyLinePlaceholder":223},[789,1679,1680,1682],{"class":791,"line":881},[789,1681,859],{"class":858},[789,1683,886],{"class":799},[789,1685,1686,1688],{"class":791,"line":889},[789,1687,892],{"class":803},[789,1689,895],{"class":799},[789,1691,1692,1694],{"class":791,"line":898},[789,1693,909],{"class":803},[789,1695,895],{"class":799},[789,1697,1698,1700],{"class":791,"line":906},[789,1699,917],{"class":803},[789,1701,895],{"class":799},[789,1703,1704,1706],{"class":791,"line":914},[789,1705,941],{"class":803},[789,1707,895],{"class":799},[789,1709,1710,1712],{"class":791,"line":922},[789,1711,957],{"class":803},[789,1713,895],{"class":799},[789,1715,1716,1718,1720,1722,1724,1726],{"class":791,"line":930},[789,1717,981],{"class":799},[789,1719,984],{"class":799},[789,1721,833],{"class":868},[789,1723,1409],{"class":803},[789,1725,1354],{"class":799},[789,1727,886],{"class":799},[789,1729,1730,1732,1734,1736,1739,1741],{"class":791,"line":938},[789,1731,1429],{"class":1428},[789,1733,1025],{"class":799},[789,1735,813],{"class":799},[789,1737,1738],{"class":816},"@z-index.base",[789,1740,820],{"class":799},[789,1742,895],{"class":799},[789,1744,1745,1748,1750,1752,1754,1756],{"class":791,"line":946},[789,1746,1747],{"class":1428},"    base",[789,1749,1025],{"class":799},[789,1751,813],{"class":799},[789,1753,1203],{"class":816},[789,1755,820],{"class":799},[789,1757,895],{"class":799},[789,1759,1760,1763,1765,1767,1770,1772],{"class":791,"line":954},[789,1761,1762],{"class":1428},"    dropdown",[789,1764,1025],{"class":799},[789,1766,813],{"class":799},[789,1768,1769],{"class":816},"1000",[789,1771,820],{"class":799},[789,1773,895],{"class":799},[789,1775,1776,1779,1781,1783,1786,1788],{"class":791,"line":962},[789,1777,1778],{"class":1428},"    modal",[789,1780,1025],{"class":799},[789,1782,813],{"class":799},[789,1784,1785],{"class":816},"2000",[789,1787,820],{"class":799},[789,1789,895],{"class":799},[789,1791,1792,1795,1797,1799,1802,1804],{"class":791,"line":970},[789,1793,1794],{"class":1428},"    toast",[789,1796,1025],{"class":799},[789,1798,813],{"class":799},[789,1800,1801],{"class":816},"3000",[789,1803,820],{"class":799},[789,1805,895],{"class":799},[789,1807,1808,1810,1812],{"class":791,"line":978},[789,1809,981],{"class":799},[789,1811,1192],{"class":803},[789,1813,823],{"class":799},[789,1815,1816],{"class":791,"line":994},[789,1817,852],{"emptyLinePlaceholder":223},[789,1819,1820,1822,1824,1826],{"class":791,"line":999},[789,1821,1002],{"class":795},[789,1823,1005],{"class":795},[789,1825,1008],{"class":803},[789,1827,823],{"class":799},[775,1829,1830],{"icon":154,"label":326},[779,1831,1833],{"className":1015,"code":1832,"filename":1017,"language":1018,"meta":785,"style":785},":root {\n    --z-index--base: 0;\n    --z-index--dropdown: 1000;\n    --z-index--modal: 2000;\n    --z-index--toast: 3000;\n    --z-index: var(--z-index--base);\n}\n",[697,1834,1835,1843,1853,1864,1875,1886,1900],{"__ignoreMap":785},[789,1836,1837,1839,1841],{"class":791,"line":792},[789,1838,1025],{"class":799},[789,1840,1028],{"class":858},[789,1842,886],{"class":799},[789,1844,1845,1847,1849,1851],{"class":791,"line":826},[789,1846,1048],{"class":803},[789,1848,1025],{"class":799},[789,1850,1053],{"class":1040},[789,1852,823],{"class":799},[789,1854,1855,1857,1859,1862],{"class":791,"line":849},[789,1856,1060],{"class":803},[789,1858,1025],{"class":799},[789,1860,1861],{"class":1040}," 1000",[789,1863,823],{"class":799},[789,1865,1866,1868,1870,1873],{"class":791,"line":855},[789,1867,1096],{"class":803},[789,1869,1025],{"class":799},[789,1871,1872],{"class":1040}," 2000",[789,1874,823],{"class":799},[789,1876,1877,1879,1881,1884],{"class":791,"line":876},[789,1878,1120],{"class":803},[789,1880,1025],{"class":799},[789,1882,1883],{"class":1040}," 3000",[789,1885,823],{"class":799},[789,1887,1888,1890,1892,1894,1896,1898],{"class":791,"line":881},[789,1889,1156],{"class":803},[789,1891,1025],{"class":799},[789,1893,1161],{"class":868},[789,1895,1164],{"class":799},[789,1897,1167],{"class":803},[789,1899,1170],{"class":799},[789,1901,1902],{"class":791,"line":889},[789,1903,1175],{"class":799},[719,1905,1906,1907,1910,1911,1913,1914,1917],{},"The function creates variables for each stacking level you define. Each key in the object becomes a z-index variable with the prefix ",[697,1908,1909],{},"z-index--",", and the export name is automatically converted to camelCase (e.g., ",[697,1912,1210],{}," → ",[697,1915,1916],{},"zIndexDropdown",").",[715,1919,1921],{"id":1920},"pairing-z-index-with-box-shadow","Pairing Z-Index with Box Shadow",[719,1923,1924],{},"Z-index and box shadow should work together — higher elevation elements should have both higher z-index and more prominent shadows:",[772,1926,1927,2377],{},[775,1928,1929],{"icon":777,"label":290},[779,1930,1932],{"className":781,"code":1931,"filename":783,"language":784,"meta":785,"style":785},"import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens, useBoxShadowDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\n\u002F\u002F Create z-index scale\nconst {\n    zIndexDropdown,\n    zIndexOverlay,\n    zIndexModal,\n    zIndexToast,\n} = useZIndexDesignTokens(s);\n\n\u002F\u002F Create matching shadow scale\nconst {\n    boxShadowMd,\n    boxShadowLg,\n    boxShadowXl,\n    boxShadow2xl,\n} = useBoxShadowDesignTokens(s);\n\n\u002F\u002F Pair elevation with stacking order\nselector('.dropdown', {\n    zIndex: ref(zIndexDropdown),\n    boxShadow: ref(boxShadowMd),\n});\n\nselector('.overlay', {\n    zIndex: ref(zIndexOverlay),\n});\n\nselector('.modal', {\n    zIndex: ref(zIndexModal),\n    boxShadow: ref(boxShadowXl),\n});\n\nselector('.toast', {\n    zIndex: ref(zIndexToast),\n    boxShadow: ref(boxShadow2xl),\n});\n\nexport default s;\n",[697,1933,1934,1954,1979,1983,1997,2019,2023,2029,2035,2041,2047,2053,2059,2071,2075,2080,2086,2093,2100,2107,2114,2127,2132,2138,2157,2171,2186,2195,2200,2218,2232,2241,2246,2264,2278,2292,2301,2306,2324,2338,2352,2361,2366],{"__ignoreMap":785},[789,1935,1936,1938,1940,1942,1944,1946,1948,1950,1952],{"class":791,"line":792},[789,1937,796],{"class":795},[789,1939,800],{"class":799},[789,1941,804],{"class":803},[789,1943,807],{"class":799},[789,1945,810],{"class":795},[789,1947,813],{"class":799},[789,1949,817],{"class":816},[789,1951,820],{"class":799},[789,1953,823],{"class":799},[789,1955,1956,1958,1960,1962,1964,1967,1969,1971,1973,1975,1977],{"class":791,"line":826},[789,1957,796],{"class":795},[789,1959,800],{"class":799},[789,1961,833],{"class":803},[789,1963,1354],{"class":799},[789,1965,1966],{"class":803}," useBoxShadowDesignTokens",[789,1968,807],{"class":799},[789,1970,810],{"class":795},[789,1972,813],{"class":799},[789,1974,842],{"class":816},[789,1976,820],{"class":799},[789,1978,823],{"class":799},[789,1980,1981],{"class":791,"line":849},[789,1982,852],{"emptyLinePlaceholder":223},[789,1984,1985,1987,1989,1991,1993,1995],{"class":791,"line":855},[789,1986,859],{"class":858},[789,1988,862],{"class":803},[789,1990,865],{"class":799},[789,1992,804],{"class":868},[789,1994,871],{"class":803},[789,1996,823],{"class":799},[789,1998,1999,2001,2003,2006,2008,2011,2013,2015,2017],{"class":791,"line":876},[789,2000,859],{"class":858},[789,2002,800],{"class":799},[789,2004,2005],{"class":803}," ref",[789,2007,1354],{"class":799},[789,2009,2010],{"class":803}," selector ",[789,2012,981],{"class":799},[789,2014,984],{"class":799},[789,2016,1008],{"class":803},[789,2018,823],{"class":799},[789,2020,2021],{"class":791,"line":881},[789,2022,852],{"emptyLinePlaceholder":223},[789,2024,2025],{"class":791,"line":889},[789,2026,2028],{"class":2027},"sHwdD","\u002F\u002F Create z-index scale\n",[789,2030,2031,2033],{"class":791,"line":898},[789,2032,859],{"class":858},[789,2034,886],{"class":799},[789,2036,2037,2039],{"class":791,"line":906},[789,2038,917],{"class":803},[789,2040,895],{"class":799},[789,2042,2043,2045],{"class":791,"line":914},[789,2044,933],{"class":803},[789,2046,895],{"class":799},[789,2048,2049,2051],{"class":791,"line":922},[789,2050,941],{"class":803},[789,2052,895],{"class":799},[789,2054,2055,2057],{"class":791,"line":930},[789,2056,957],{"class":803},[789,2058,895],{"class":799},[789,2060,2061,2063,2065,2067,2069],{"class":791,"line":938},[789,2062,981],{"class":799},[789,2064,984],{"class":799},[789,2066,833],{"class":868},[789,2068,989],{"class":803},[789,2070,823],{"class":799},[789,2072,2073],{"class":791,"line":946},[789,2074,852],{"emptyLinePlaceholder":223},[789,2076,2077],{"class":791,"line":954},[789,2078,2079],{"class":2027},"\u002F\u002F Create matching shadow scale\n",[789,2081,2082,2084],{"class":791,"line":962},[789,2083,859],{"class":858},[789,2085,886],{"class":799},[789,2087,2088,2091],{"class":791,"line":970},[789,2089,2090],{"class":803},"    boxShadowMd",[789,2092,895],{"class":799},[789,2094,2095,2098],{"class":791,"line":978},[789,2096,2097],{"class":803},"    boxShadowLg",[789,2099,895],{"class":799},[789,2101,2102,2105],{"class":791,"line":994},[789,2103,2104],{"class":803},"    boxShadowXl",[789,2106,895],{"class":799},[789,2108,2109,2112],{"class":791,"line":999},[789,2110,2111],{"class":803},"    boxShadow2xl",[789,2113,895],{"class":799},[789,2115,2117,2119,2121,2123,2125],{"class":791,"line":2116},21,[789,2118,981],{"class":799},[789,2120,984],{"class":799},[789,2122,1966],{"class":868},[789,2124,989],{"class":803},[789,2126,823],{"class":799},[789,2128,2130],{"class":791,"line":2129},22,[789,2131,852],{"emptyLinePlaceholder":223},[789,2133,2135],{"class":791,"line":2134},23,[789,2136,2137],{"class":2027},"\u002F\u002F Pair elevation with stacking order\n",[789,2139,2141,2144,2146,2148,2151,2153,2155],{"class":791,"line":2140},24,[789,2142,2143],{"class":868},"selector",[789,2145,1164],{"class":803},[789,2147,820],{"class":799},[789,2149,2150],{"class":816},".dropdown",[789,2152,820],{"class":799},[789,2154,1354],{"class":799},[789,2156,886],{"class":799},[789,2158,2160,2162,2164,2166,2169],{"class":791,"line":2159},25,[789,2161,892],{"class":1428},[789,2163,1025],{"class":799},[789,2165,2005],{"class":868},[789,2167,2168],{"class":803},"(zIndexDropdown)",[789,2170,895],{"class":799},[789,2172,2174,2177,2179,2181,2184],{"class":791,"line":2173},26,[789,2175,2176],{"class":1428},"    boxShadow",[789,2178,1025],{"class":799},[789,2180,2005],{"class":868},[789,2182,2183],{"class":803},"(boxShadowMd)",[789,2185,895],{"class":799},[789,2187,2189,2191,2193],{"class":791,"line":2188},27,[789,2190,981],{"class":799},[789,2192,1192],{"class":803},[789,2194,823],{"class":799},[789,2196,2198],{"class":791,"line":2197},28,[789,2199,852],{"emptyLinePlaceholder":223},[789,2201,2203,2205,2207,2209,2212,2214,2216],{"class":791,"line":2202},29,[789,2204,2143],{"class":868},[789,2206,1164],{"class":803},[789,2208,820],{"class":799},[789,2210,2211],{"class":816},".overlay",[789,2213,820],{"class":799},[789,2215,1354],{"class":799},[789,2217,886],{"class":799},[789,2219,2221,2223,2225,2227,2230],{"class":791,"line":2220},30,[789,2222,892],{"class":1428},[789,2224,1025],{"class":799},[789,2226,2005],{"class":868},[789,2228,2229],{"class":803},"(zIndexOverlay)",[789,2231,895],{"class":799},[789,2233,2235,2237,2239],{"class":791,"line":2234},31,[789,2236,981],{"class":799},[789,2238,1192],{"class":803},[789,2240,823],{"class":799},[789,2242,2244],{"class":791,"line":2243},32,[789,2245,852],{"emptyLinePlaceholder":223},[789,2247,2249,2251,2253,2255,2258,2260,2262],{"class":791,"line":2248},33,[789,2250,2143],{"class":868},[789,2252,1164],{"class":803},[789,2254,820],{"class":799},[789,2256,2257],{"class":816},".modal",[789,2259,820],{"class":799},[789,2261,1354],{"class":799},[789,2263,886],{"class":799},[789,2265,2267,2269,2271,2273,2276],{"class":791,"line":2266},34,[789,2268,892],{"class":1428},[789,2270,1025],{"class":799},[789,2272,2005],{"class":868},[789,2274,2275],{"class":803},"(zIndexModal)",[789,2277,895],{"class":799},[789,2279,2281,2283,2285,2287,2290],{"class":791,"line":2280},35,[789,2282,2176],{"class":1428},[789,2284,1025],{"class":799},[789,2286,2005],{"class":868},[789,2288,2289],{"class":803},"(boxShadowXl)",[789,2291,895],{"class":799},[789,2293,2295,2297,2299],{"class":791,"line":2294},36,[789,2296,981],{"class":799},[789,2298,1192],{"class":803},[789,2300,823],{"class":799},[789,2302,2304],{"class":791,"line":2303},37,[789,2305,852],{"emptyLinePlaceholder":223},[789,2307,2309,2311,2313,2315,2318,2320,2322],{"class":791,"line":2308},38,[789,2310,2143],{"class":868},[789,2312,1164],{"class":803},[789,2314,820],{"class":799},[789,2316,2317],{"class":816},".toast",[789,2319,820],{"class":799},[789,2321,1354],{"class":799},[789,2323,886],{"class":799},[789,2325,2327,2329,2331,2333,2336],{"class":791,"line":2326},39,[789,2328,892],{"class":1428},[789,2330,1025],{"class":799},[789,2332,2005],{"class":868},[789,2334,2335],{"class":803},"(zIndexToast)",[789,2337,895],{"class":799},[789,2339,2341,2343,2345,2347,2350],{"class":791,"line":2340},40,[789,2342,2176],{"class":1428},[789,2344,1025],{"class":799},[789,2346,2005],{"class":868},[789,2348,2349],{"class":803},"(boxShadow2xl)",[789,2351,895],{"class":799},[789,2353,2355,2357,2359],{"class":791,"line":2354},41,[789,2356,981],{"class":799},[789,2358,1192],{"class":803},[789,2360,823],{"class":799},[789,2362,2364],{"class":791,"line":2363},42,[789,2365,852],{"emptyLinePlaceholder":223},[789,2367,2369,2371,2373,2375],{"class":791,"line":2368},43,[789,2370,1002],{"class":795},[789,2372,1005],{"class":795},[789,2374,1008],{"class":803},[789,2376,823],{"class":799},[775,2378,2379],{"icon":154,"label":326},[779,2380,2382],{"className":1015,"code":2381,"filename":1017,"language":1018,"meta":785,"style":785},":root {\n    --z-index--dropdown: 100;\n    --z-index--overlay: 300;\n    --z-index--modal: 400;\n    --z-index--toast: 600;\n    --box-shadow--md: 0 2px 4px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.16), 0 8px 16px -4px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.10);\n    --box-shadow--lg: 0 4px 8px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.18), 0 16px 24px -8px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.12);\n    --box-shadow--xl: 0 8px 12px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.20), 0 24px 48px -12px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.14);\n    --box-shadow--2xl: 0 12px 16px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.22), 0 32px 64px -16px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.16);\n}\n\n.dropdown {\n    z-index: var(--z-index--dropdown);\n    box-shadow: var(--box-shadow--md);\n}\n\n.overlay {\n    z-index: var(--z-index--overlay);\n}\n\n.modal {\n    z-index: var(--z-index--modal);\n    box-shadow: var(--box-shadow--xl);\n}\n\n.toast {\n    z-index: var(--z-index--toast);\n    box-shadow: var(--box-shadow--2xl);\n}\n",[697,2383,2384,2392,2402,2412,2422,2432,2517,2594,2672,2749,2753,2757,2767,2783,2799,2803,2807,2815,2830,2834,2838,2846,2861,2876,2880,2884,2892,2907,2922],{"__ignoreMap":785},[789,2385,2386,2388,2390],{"class":791,"line":792},[789,2387,1025],{"class":799},[789,2389,1028],{"class":858},[789,2391,886],{"class":799},[789,2393,2394,2396,2398,2400],{"class":791,"line":826},[789,2395,1060],{"class":803},[789,2397,1025],{"class":799},[789,2399,1065],{"class":1040},[789,2401,823],{"class":799},[789,2403,2404,2406,2408,2410],{"class":791,"line":849},[789,2405,1084],{"class":803},[789,2407,1025],{"class":799},[789,2409,1089],{"class":1040},[789,2411,823],{"class":799},[789,2413,2414,2416,2418,2420],{"class":791,"line":855},[789,2415,1096],{"class":803},[789,2417,1025],{"class":799},[789,2419,1101],{"class":1040},[789,2421,823],{"class":799},[789,2423,2424,2426,2428,2430],{"class":791,"line":876},[789,2425,1120],{"class":803},[789,2427,1025],{"class":799},[789,2429,1125],{"class":1040},[789,2431,823],{"class":799},[789,2433,2434,2437,2439,2441,2444,2447,2450,2452,2455,2457,2460,2462,2464,2466,2468,2470,2473,2476,2479,2481,2484,2487,2490,2492,2494,2496,2498,2500,2502,2504,2506,2508,2510,2512,2515],{"class":791,"line":881},[789,2435,2436],{"class":803},"    --box-shadow--md",[789,2438,1025],{"class":799},[789,2440,1053],{"class":1040},[789,2442,2443],{"class":1040}," 2px",[789,2445,2446],{"class":1040}," 4px",[789,2448,2449],{"class":868}," oklch",[789,2451,1164],{"class":799},[789,2453,2454],{"class":868},"var",[789,2456,1164],{"class":799},[789,2458,2459],{"class":803},"--box-shadow-color",[789,2461,1354],{"class":799},[789,2463,1053],{"class":1040},[789,2465,1053],{"class":1040},[789,2467,1053],{"class":1040},[789,2469,1192],{"class":799},[789,2471,2472],{"class":803}," \u002F ",[789,2474,2475],{"class":1040},"0.16",[789,2477,2478],{"class":799},"),",[789,2480,1053],{"class":1040},[789,2482,2483],{"class":1040}," 8px",[789,2485,2486],{"class":1040}," 16px",[789,2488,2489],{"class":1040}," -4px",[789,2491,2449],{"class":868},[789,2493,1164],{"class":799},[789,2495,2454],{"class":868},[789,2497,1164],{"class":799},[789,2499,2459],{"class":803},[789,2501,1354],{"class":799},[789,2503,1053],{"class":1040},[789,2505,1053],{"class":1040},[789,2507,1053],{"class":1040},[789,2509,1192],{"class":799},[789,2511,2472],{"class":803},[789,2513,2514],{"class":1040},"0.10",[789,2516,1170],{"class":799},[789,2518,2519,2522,2524,2526,2528,2530,2532,2534,2536,2538,2540,2542,2544,2546,2548,2550,2552,2555,2557,2559,2561,2564,2567,2569,2571,2573,2575,2577,2579,2581,2583,2585,2587,2589,2592],{"class":791,"line":889},[789,2520,2521],{"class":803},"    --box-shadow--lg",[789,2523,1025],{"class":799},[789,2525,1053],{"class":1040},[789,2527,2446],{"class":1040},[789,2529,2483],{"class":1040},[789,2531,2449],{"class":868},[789,2533,1164],{"class":799},[789,2535,2454],{"class":868},[789,2537,1164],{"class":799},[789,2539,2459],{"class":803},[789,2541,1354],{"class":799},[789,2543,1053],{"class":1040},[789,2545,1053],{"class":1040},[789,2547,1053],{"class":1040},[789,2549,1192],{"class":799},[789,2551,2472],{"class":803},[789,2553,2554],{"class":1040},"0.18",[789,2556,2478],{"class":799},[789,2558,1053],{"class":1040},[789,2560,2486],{"class":1040},[789,2562,2563],{"class":1040}," 24px",[789,2565,2566],{"class":1040}," -8px",[789,2568,2449],{"class":868},[789,2570,1164],{"class":799},[789,2572,2454],{"class":868},[789,2574,1164],{"class":799},[789,2576,2459],{"class":803},[789,2578,1354],{"class":799},[789,2580,1053],{"class":1040},[789,2582,1053],{"class":1040},[789,2584,1053],{"class":1040},[789,2586,1192],{"class":799},[789,2588,2472],{"class":803},[789,2590,2591],{"class":1040},"0.12",[789,2593,1170],{"class":799},[789,2595,2596,2599,2601,2603,2605,2608,2610,2612,2614,2616,2618,2620,2622,2624,2626,2628,2630,2633,2635,2637,2639,2642,2645,2647,2649,2651,2653,2655,2657,2659,2661,2663,2665,2667,2670],{"class":791,"line":898},[789,2597,2598],{"class":803},"    --box-shadow--xl",[789,2600,1025],{"class":799},[789,2602,1053],{"class":1040},[789,2604,2483],{"class":1040},[789,2606,2607],{"class":1040}," 12px",[789,2609,2449],{"class":868},[789,2611,1164],{"class":799},[789,2613,2454],{"class":868},[789,2615,1164],{"class":799},[789,2617,2459],{"class":803},[789,2619,1354],{"class":799},[789,2621,1053],{"class":1040},[789,2623,1053],{"class":1040},[789,2625,1053],{"class":1040},[789,2627,1192],{"class":799},[789,2629,2472],{"class":803},[789,2631,2632],{"class":1040},"0.20",[789,2634,2478],{"class":799},[789,2636,1053],{"class":1040},[789,2638,2563],{"class":1040},[789,2640,2641],{"class":1040}," 48px",[789,2643,2644],{"class":1040}," -12px",[789,2646,2449],{"class":868},[789,2648,1164],{"class":799},[789,2650,2454],{"class":868},[789,2652,1164],{"class":799},[789,2654,2459],{"class":803},[789,2656,1354],{"class":799},[789,2658,1053],{"class":1040},[789,2660,1053],{"class":1040},[789,2662,1053],{"class":1040},[789,2664,1192],{"class":799},[789,2666,2472],{"class":803},[789,2668,2669],{"class":1040},"0.14",[789,2671,1170],{"class":799},[789,2673,2674,2677,2679,2681,2683,2685,2687,2689,2691,2693,2695,2697,2699,2701,2703,2705,2707,2710,2712,2714,2717,2720,2723,2725,2727,2729,2731,2733,2735,2737,2739,2741,2743,2745,2747],{"class":791,"line":906},[789,2675,2676],{"class":803},"    --box-shadow--2xl",[789,2678,1025],{"class":799},[789,2680,1053],{"class":1040},[789,2682,2607],{"class":1040},[789,2684,2486],{"class":1040},[789,2686,2449],{"class":868},[789,2688,1164],{"class":799},[789,2690,2454],{"class":868},[789,2692,1164],{"class":799},[789,2694,2459],{"class":803},[789,2696,1354],{"class":799},[789,2698,1053],{"class":1040},[789,2700,1053],{"class":1040},[789,2702,1053],{"class":1040},[789,2704,1192],{"class":799},[789,2706,2472],{"class":803},[789,2708,2709],{"class":1040},"0.22",[789,2711,2478],{"class":799},[789,2713,1053],{"class":1040},[789,2715,2716],{"class":1040}," 32px",[789,2718,2719],{"class":1040}," 64px",[789,2721,2722],{"class":1040}," -16px",[789,2724,2449],{"class":868},[789,2726,1164],{"class":799},[789,2728,2454],{"class":868},[789,2730,1164],{"class":799},[789,2732,2459],{"class":803},[789,2734,1354],{"class":799},[789,2736,1053],{"class":1040},[789,2738,1053],{"class":1040},[789,2740,1053],{"class":1040},[789,2742,1192],{"class":799},[789,2744,2472],{"class":803},[789,2746,2475],{"class":1040},[789,2748,1170],{"class":799},[789,2750,2751],{"class":791,"line":914},[789,2752,1175],{"class":799},[789,2754,2755],{"class":791,"line":922},[789,2756,852],{"emptyLinePlaceholder":223},[789,2758,2759,2762,2765],{"class":791,"line":930},[789,2760,2761],{"class":799},".",[789,2763,1210],{"class":2764},"sBMFI",[789,2766,886],{"class":799},[789,2768,2769,2773,2775,2777,2779,2781],{"class":791,"line":938},[789,2770,2772],{"class":2771},"sqsOY","    z-index",[789,2774,1025],{"class":799},[789,2776,1161],{"class":868},[789,2778,1164],{"class":799},[789,2780,1589],{"class":803},[789,2782,1170],{"class":799},[789,2784,2785,2788,2790,2792,2794,2797],{"class":791,"line":946},[789,2786,2787],{"class":2771},"    box-shadow",[789,2789,1025],{"class":799},[789,2791,1161],{"class":868},[789,2793,1164],{"class":799},[789,2795,2796],{"class":803},"--box-shadow--md",[789,2798,1170],{"class":799},[789,2800,2801],{"class":791,"line":954},[789,2802,1175],{"class":799},[789,2804,2805],{"class":791,"line":962},[789,2806,852],{"emptyLinePlaceholder":223},[789,2808,2809,2811,2813],{"class":791,"line":970},[789,2810,2761],{"class":799},[789,2812,1232],{"class":2764},[789,2814,886],{"class":799},[789,2816,2817,2819,2821,2823,2825,2828],{"class":791,"line":978},[789,2818,2772],{"class":2771},[789,2820,1025],{"class":799},[789,2822,1161],{"class":868},[789,2824,1164],{"class":799},[789,2826,2827],{"class":803},"--z-index--overlay",[789,2829,1170],{"class":799},[789,2831,2832],{"class":791,"line":994},[789,2833,1175],{"class":799},[789,2835,2836],{"class":791,"line":999},[789,2837,852],{"emptyLinePlaceholder":223},[789,2839,2840,2842,2844],{"class":791,"line":2116},[789,2841,2761],{"class":799},[789,2843,1243],{"class":2764},[789,2845,886],{"class":799},[789,2847,2848,2850,2852,2854,2856,2859],{"class":791,"line":2129},[789,2849,2772],{"class":2771},[789,2851,1025],{"class":799},[789,2853,1161],{"class":868},[789,2855,1164],{"class":799},[789,2857,2858],{"class":803},"--z-index--modal",[789,2860,1170],{"class":799},[789,2862,2863,2865,2867,2869,2871,2874],{"class":791,"line":2134},[789,2864,2787],{"class":2771},[789,2866,1025],{"class":799},[789,2868,1161],{"class":868},[789,2870,1164],{"class":799},[789,2872,2873],{"class":803},"--box-shadow--xl",[789,2875,1170],{"class":799},[789,2877,2878],{"class":791,"line":2140},[789,2879,1175],{"class":799},[789,2881,2882],{"class":791,"line":2159},[789,2883,852],{"emptyLinePlaceholder":223},[789,2885,2886,2888,2890],{"class":791,"line":2173},[789,2887,2761],{"class":799},[789,2889,1265],{"class":2764},[789,2891,886],{"class":799},[789,2893,2894,2896,2898,2900,2902,2905],{"class":791,"line":2188},[789,2895,2772],{"class":2771},[789,2897,1025],{"class":799},[789,2899,1161],{"class":868},[789,2901,1164],{"class":799},[789,2903,2904],{"class":803},"--z-index--toast",[789,2906,1170],{"class":799},[789,2908,2909,2911,2913,2915,2917,2920],{"class":791,"line":2197},[789,2910,2787],{"class":2771},[789,2912,1025],{"class":799},[789,2914,1161],{"class":868},[789,2916,1164],{"class":799},[789,2918,2919],{"class":803},"--box-shadow--2xl",[789,2921,1170],{"class":799},[789,2923,2924],{"class":791,"line":2202},[789,2925,1175],{"class":799},[2927,2928,2929,2932],"tip",{},[692,2930,2931],{},"Pro tip:"," Establish a convention where elevation and stacking always increase together. For example: dropdown (z-index 100, shadow md), modal (z-index 400, shadow xl), toast (z-index 600, shadow 2xl). This creates a consistent mental model for your team.",[715,2934,2936],{"id":2935},"examples","Examples",[1304,2938,2940],{"id":2939},"application-shell","Application Shell",[719,2942,2943],{},"Here's how to create a complete stacking system for a typical application layout:",[772,2945,2946,3433],{},[775,2947,2948],{"icon":777,"label":290},[779,2949,2951],{"className":781,"code":2950,"filename":783,"language":784,"meta":785,"style":785},"import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\nconst {\n    zIndexSticky,\n    zIndexDropdown,\n    zIndexOverlay,\n    zIndexModal,\n    zIndexToast,\n} = useZIndexDesignTokens(s);\n\n\u002F\u002F Sticky navigation\nselector('.navbar', {\n    position: 'sticky',\n    top: '0',\n    zIndex: ref(zIndexSticky),\n});\n\n\u002F\u002F Dropdown menus sit above sticky elements\nselector('.dropdown-menu', {\n    position: 'absolute',\n    zIndex: ref(zIndexDropdown),\n});\n\n\u002F\u002F Full-screen overlay behind modals\nselector('.backdrop', {\n    position: 'fixed',\n    inset: '0',\n    zIndex: ref(zIndexOverlay),\n});\n\n\u002F\u002F Modal sits above the overlay\nselector('.modal', {\n    position: 'fixed',\n    zIndex: ref(zIndexModal),\n});\n\n\u002F\u002F Toasts appear above everything\nselector('.toast', {\n    position: 'fixed',\n    zIndex: ref(zIndexToast),\n});\n\nexport default s;\n",[697,2952,2953,2973,2993,2997,3011,3031,3035,3041,3047,3053,3059,3065,3071,3083,3087,3092,3109,3124,3139,3152,3160,3164,3169,3186,3201,3213,3221,3225,3230,3247,3262,3277,3289,3297,3301,3306,3322,3336,3348,3356,3360,3365,3381,3395,3408,3417,3422],{"__ignoreMap":785},[789,2954,2955,2957,2959,2961,2963,2965,2967,2969,2971],{"class":791,"line":792},[789,2956,796],{"class":795},[789,2958,800],{"class":799},[789,2960,804],{"class":803},[789,2962,807],{"class":799},[789,2964,810],{"class":795},[789,2966,813],{"class":799},[789,2968,817],{"class":816},[789,2970,820],{"class":799},[789,2972,823],{"class":799},[789,2974,2975,2977,2979,2981,2983,2985,2987,2989,2991],{"class":791,"line":826},[789,2976,796],{"class":795},[789,2978,800],{"class":799},[789,2980,833],{"class":803},[789,2982,807],{"class":799},[789,2984,810],{"class":795},[789,2986,813],{"class":799},[789,2988,842],{"class":816},[789,2990,820],{"class":799},[789,2992,823],{"class":799},[789,2994,2995],{"class":791,"line":849},[789,2996,852],{"emptyLinePlaceholder":223},[789,2998,2999,3001,3003,3005,3007,3009],{"class":791,"line":855},[789,3000,859],{"class":858},[789,3002,862],{"class":803},[789,3004,865],{"class":799},[789,3006,804],{"class":868},[789,3008,871],{"class":803},[789,3010,823],{"class":799},[789,3012,3013,3015,3017,3019,3021,3023,3025,3027,3029],{"class":791,"line":876},[789,3014,859],{"class":858},[789,3016,800],{"class":799},[789,3018,2005],{"class":803},[789,3020,1354],{"class":799},[789,3022,2010],{"class":803},[789,3024,981],{"class":799},[789,3026,984],{"class":799},[789,3028,1008],{"class":803},[789,3030,823],{"class":799},[789,3032,3033],{"class":791,"line":881},[789,3034,852],{"emptyLinePlaceholder":223},[789,3036,3037,3039],{"class":791,"line":889},[789,3038,859],{"class":858},[789,3040,886],{"class":799},[789,3042,3043,3045],{"class":791,"line":898},[789,3044,925],{"class":803},[789,3046,895],{"class":799},[789,3048,3049,3051],{"class":791,"line":906},[789,3050,917],{"class":803},[789,3052,895],{"class":799},[789,3054,3055,3057],{"class":791,"line":914},[789,3056,933],{"class":803},[789,3058,895],{"class":799},[789,3060,3061,3063],{"class":791,"line":922},[789,3062,941],{"class":803},[789,3064,895],{"class":799},[789,3066,3067,3069],{"class":791,"line":930},[789,3068,957],{"class":803},[789,3070,895],{"class":799},[789,3072,3073,3075,3077,3079,3081],{"class":791,"line":938},[789,3074,981],{"class":799},[789,3076,984],{"class":799},[789,3078,833],{"class":868},[789,3080,989],{"class":803},[789,3082,823],{"class":799},[789,3084,3085],{"class":791,"line":946},[789,3086,852],{"emptyLinePlaceholder":223},[789,3088,3089],{"class":791,"line":954},[789,3090,3091],{"class":2027},"\u002F\u002F Sticky navigation\n",[789,3093,3094,3096,3098,3100,3103,3105,3107],{"class":791,"line":962},[789,3095,2143],{"class":868},[789,3097,1164],{"class":803},[789,3099,820],{"class":799},[789,3101,3102],{"class":816},".navbar",[789,3104,820],{"class":799},[789,3106,1354],{"class":799},[789,3108,886],{"class":799},[789,3110,3111,3114,3116,3118,3120,3122],{"class":791,"line":970},[789,3112,3113],{"class":1428},"    position",[789,3115,1025],{"class":799},[789,3117,813],{"class":799},[789,3119,1221],{"class":816},[789,3121,820],{"class":799},[789,3123,895],{"class":799},[789,3125,3126,3129,3131,3133,3135,3137],{"class":791,"line":978},[789,3127,3128],{"class":1428},"    top",[789,3130,1025],{"class":799},[789,3132,813],{"class":799},[789,3134,1203],{"class":816},[789,3136,820],{"class":799},[789,3138,895],{"class":799},[789,3140,3141,3143,3145,3147,3150],{"class":791,"line":994},[789,3142,892],{"class":1428},[789,3144,1025],{"class":799},[789,3146,2005],{"class":868},[789,3148,3149],{"class":803},"(zIndexSticky)",[789,3151,895],{"class":799},[789,3153,3154,3156,3158],{"class":791,"line":999},[789,3155,981],{"class":799},[789,3157,1192],{"class":803},[789,3159,823],{"class":799},[789,3161,3162],{"class":791,"line":2116},[789,3163,852],{"emptyLinePlaceholder":223},[789,3165,3166],{"class":791,"line":2129},[789,3167,3168],{"class":2027},"\u002F\u002F Dropdown menus sit above sticky elements\n",[789,3170,3171,3173,3175,3177,3180,3182,3184],{"class":791,"line":2134},[789,3172,2143],{"class":868},[789,3174,1164],{"class":803},[789,3176,820],{"class":799},[789,3178,3179],{"class":816},".dropdown-menu",[789,3181,820],{"class":799},[789,3183,1354],{"class":799},[789,3185,886],{"class":799},[789,3187,3188,3190,3192,3194,3197,3199],{"class":791,"line":2140},[789,3189,3113],{"class":1428},[789,3191,1025],{"class":799},[789,3193,813],{"class":799},[789,3195,3196],{"class":816},"absolute",[789,3198,820],{"class":799},[789,3200,895],{"class":799},[789,3202,3203,3205,3207,3209,3211],{"class":791,"line":2159},[789,3204,892],{"class":1428},[789,3206,1025],{"class":799},[789,3208,2005],{"class":868},[789,3210,2168],{"class":803},[789,3212,895],{"class":799},[789,3214,3215,3217,3219],{"class":791,"line":2173},[789,3216,981],{"class":799},[789,3218,1192],{"class":803},[789,3220,823],{"class":799},[789,3222,3223],{"class":791,"line":2188},[789,3224,852],{"emptyLinePlaceholder":223},[789,3226,3227],{"class":791,"line":2197},[789,3228,3229],{"class":2027},"\u002F\u002F Full-screen overlay behind modals\n",[789,3231,3232,3234,3236,3238,3241,3243,3245],{"class":791,"line":2202},[789,3233,2143],{"class":868},[789,3235,1164],{"class":803},[789,3237,820],{"class":799},[789,3239,3240],{"class":816},".backdrop",[789,3242,820],{"class":799},[789,3244,1354],{"class":799},[789,3246,886],{"class":799},[789,3248,3249,3251,3253,3255,3258,3260],{"class":791,"line":2220},[789,3250,3113],{"class":1428},[789,3252,1025],{"class":799},[789,3254,813],{"class":799},[789,3256,3257],{"class":816},"fixed",[789,3259,820],{"class":799},[789,3261,895],{"class":799},[789,3263,3264,3267,3269,3271,3273,3275],{"class":791,"line":2234},[789,3265,3266],{"class":1428},"    inset",[789,3268,1025],{"class":799},[789,3270,813],{"class":799},[789,3272,1203],{"class":816},[789,3274,820],{"class":799},[789,3276,895],{"class":799},[789,3278,3279,3281,3283,3285,3287],{"class":791,"line":2243},[789,3280,892],{"class":1428},[789,3282,1025],{"class":799},[789,3284,2005],{"class":868},[789,3286,2229],{"class":803},[789,3288,895],{"class":799},[789,3290,3291,3293,3295],{"class":791,"line":2248},[789,3292,981],{"class":799},[789,3294,1192],{"class":803},[789,3296,823],{"class":799},[789,3298,3299],{"class":791,"line":2266},[789,3300,852],{"emptyLinePlaceholder":223},[789,3302,3303],{"class":791,"line":2280},[789,3304,3305],{"class":2027},"\u002F\u002F Modal sits above the overlay\n",[789,3307,3308,3310,3312,3314,3316,3318,3320],{"class":791,"line":2294},[789,3309,2143],{"class":868},[789,3311,1164],{"class":803},[789,3313,820],{"class":799},[789,3315,2257],{"class":816},[789,3317,820],{"class":799},[789,3319,1354],{"class":799},[789,3321,886],{"class":799},[789,3323,3324,3326,3328,3330,3332,3334],{"class":791,"line":2303},[789,3325,3113],{"class":1428},[789,3327,1025],{"class":799},[789,3329,813],{"class":799},[789,3331,3257],{"class":816},[789,3333,820],{"class":799},[789,3335,895],{"class":799},[789,3337,3338,3340,3342,3344,3346],{"class":791,"line":2308},[789,3339,892],{"class":1428},[789,3341,1025],{"class":799},[789,3343,2005],{"class":868},[789,3345,2275],{"class":803},[789,3347,895],{"class":799},[789,3349,3350,3352,3354],{"class":791,"line":2326},[789,3351,981],{"class":799},[789,3353,1192],{"class":803},[789,3355,823],{"class":799},[789,3357,3358],{"class":791,"line":2340},[789,3359,852],{"emptyLinePlaceholder":223},[789,3361,3362],{"class":791,"line":2354},[789,3363,3364],{"class":2027},"\u002F\u002F Toasts appear above everything\n",[789,3366,3367,3369,3371,3373,3375,3377,3379],{"class":791,"line":2363},[789,3368,2143],{"class":868},[789,3370,1164],{"class":803},[789,3372,820],{"class":799},[789,3374,2317],{"class":816},[789,3376,820],{"class":799},[789,3378,1354],{"class":799},[789,3380,886],{"class":799},[789,3382,3383,3385,3387,3389,3391,3393],{"class":791,"line":2368},[789,3384,3113],{"class":1428},[789,3386,1025],{"class":799},[789,3388,813],{"class":799},[789,3390,3257],{"class":816},[789,3392,820],{"class":799},[789,3394,895],{"class":799},[789,3396,3398,3400,3402,3404,3406],{"class":791,"line":3397},44,[789,3399,892],{"class":1428},[789,3401,1025],{"class":799},[789,3403,2005],{"class":868},[789,3405,2335],{"class":803},[789,3407,895],{"class":799},[789,3409,3411,3413,3415],{"class":791,"line":3410},45,[789,3412,981],{"class":799},[789,3414,1192],{"class":803},[789,3416,823],{"class":799},[789,3418,3420],{"class":791,"line":3419},46,[789,3421,852],{"emptyLinePlaceholder":223},[789,3423,3425,3427,3429,3431],{"class":791,"line":3424},47,[789,3426,1002],{"class":795},[789,3428,1005],{"class":795},[789,3430,1008],{"class":803},[789,3432,823],{"class":799},[775,3434,3435],{"icon":154,"label":326},[779,3436,3438],{"className":1015,"code":3437,"filename":1017,"language":1018,"meta":785,"style":785},":root {\n    --z-index--sticky: 200;\n    --z-index--dropdown: 100;\n    --z-index--overlay: 300;\n    --z-index--modal: 400;\n    --z-index--toast: 600;\n}\n\n.navbar {\n    position: sticky;\n    top: 0;\n    z-index: var(--z-index--sticky);\n}\n\n.dropdown-menu {\n    position: absolute;\n    z-index: var(--z-index--dropdown);\n}\n\n.backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: var(--z-index--overlay);\n}\n\n.modal {\n    position: fixed;\n    z-index: var(--z-index--modal);\n}\n\n.toast {\n    position: fixed;\n    z-index: var(--z-index--toast);\n}\n",[697,3439,3440,3448,3458,3468,3478,3488,3498,3502,3506,3515,3526,3536,3551,3555,3559,3568,3579,3593,3597,3601,3610,3621,3631,3645,3649,3653,3661,3671,3685,3689,3693,3701,3711,3725],{"__ignoreMap":785},[789,3441,3442,3444,3446],{"class":791,"line":792},[789,3443,1025],{"class":799},[789,3445,1028],{"class":858},[789,3447,886],{"class":799},[789,3449,3450,3452,3454,3456],{"class":791,"line":826},[789,3451,1072],{"class":803},[789,3453,1025],{"class":799},[789,3455,1077],{"class":1040},[789,3457,823],{"class":799},[789,3459,3460,3462,3464,3466],{"class":791,"line":849},[789,3461,1060],{"class":803},[789,3463,1025],{"class":799},[789,3465,1065],{"class":1040},[789,3467,823],{"class":799},[789,3469,3470,3472,3474,3476],{"class":791,"line":855},[789,3471,1084],{"class":803},[789,3473,1025],{"class":799},[789,3475,1089],{"class":1040},[789,3477,823],{"class":799},[789,3479,3480,3482,3484,3486],{"class":791,"line":876},[789,3481,1096],{"class":803},[789,3483,1025],{"class":799},[789,3485,1101],{"class":1040},[789,3487,823],{"class":799},[789,3489,3490,3492,3494,3496],{"class":791,"line":881},[789,3491,1120],{"class":803},[789,3493,1025],{"class":799},[789,3495,1125],{"class":1040},[789,3497,823],{"class":799},[789,3499,3500],{"class":791,"line":889},[789,3501,1175],{"class":799},[789,3503,3504],{"class":791,"line":898},[789,3505,852],{"emptyLinePlaceholder":223},[789,3507,3508,3510,3513],{"class":791,"line":906},[789,3509,2761],{"class":799},[789,3511,3512],{"class":2764},"navbar",[789,3514,886],{"class":799},[789,3516,3517,3519,3521,3524],{"class":791,"line":914},[789,3518,3113],{"class":2771},[789,3520,1025],{"class":799},[789,3522,3523],{"class":803}," sticky",[789,3525,823],{"class":799},[789,3527,3528,3530,3532,3534],{"class":791,"line":922},[789,3529,3128],{"class":2771},[789,3531,1025],{"class":799},[789,3533,1053],{"class":1040},[789,3535,823],{"class":799},[789,3537,3538,3540,3542,3544,3546,3549],{"class":791,"line":930},[789,3539,2772],{"class":2771},[789,3541,1025],{"class":799},[789,3543,1161],{"class":868},[789,3545,1164],{"class":799},[789,3547,3548],{"class":803},"--z-index--sticky",[789,3550,1170],{"class":799},[789,3552,3553],{"class":791,"line":938},[789,3554,1175],{"class":799},[789,3556,3557],{"class":791,"line":946},[789,3558,852],{"emptyLinePlaceholder":223},[789,3560,3561,3563,3566],{"class":791,"line":954},[789,3562,2761],{"class":799},[789,3564,3565],{"class":2764},"dropdown-menu",[789,3567,886],{"class":799},[789,3569,3570,3572,3574,3577],{"class":791,"line":962},[789,3571,3113],{"class":2771},[789,3573,1025],{"class":799},[789,3575,3576],{"class":803}," absolute",[789,3578,823],{"class":799},[789,3580,3581,3583,3585,3587,3589,3591],{"class":791,"line":970},[789,3582,2772],{"class":2771},[789,3584,1025],{"class":799},[789,3586,1161],{"class":868},[789,3588,1164],{"class":799},[789,3590,1589],{"class":803},[789,3592,1170],{"class":799},[789,3594,3595],{"class":791,"line":978},[789,3596,1175],{"class":799},[789,3598,3599],{"class":791,"line":994},[789,3600,852],{"emptyLinePlaceholder":223},[789,3602,3603,3605,3608],{"class":791,"line":999},[789,3604,2761],{"class":799},[789,3606,3607],{"class":2764},"backdrop",[789,3609,886],{"class":799},[789,3611,3612,3614,3616,3619],{"class":791,"line":2116},[789,3613,3113],{"class":2771},[789,3615,1025],{"class":799},[789,3617,3618],{"class":803}," fixed",[789,3620,823],{"class":799},[789,3622,3623,3625,3627,3629],{"class":791,"line":2129},[789,3624,3266],{"class":2771},[789,3626,1025],{"class":799},[789,3628,1053],{"class":1040},[789,3630,823],{"class":799},[789,3632,3633,3635,3637,3639,3641,3643],{"class":791,"line":2134},[789,3634,2772],{"class":2771},[789,3636,1025],{"class":799},[789,3638,1161],{"class":868},[789,3640,1164],{"class":799},[789,3642,2827],{"class":803},[789,3644,1170],{"class":799},[789,3646,3647],{"class":791,"line":2140},[789,3648,1175],{"class":799},[789,3650,3651],{"class":791,"line":2159},[789,3652,852],{"emptyLinePlaceholder":223},[789,3654,3655,3657,3659],{"class":791,"line":2173},[789,3656,2761],{"class":799},[789,3658,1243],{"class":2764},[789,3660,886],{"class":799},[789,3662,3663,3665,3667,3669],{"class":791,"line":2188},[789,3664,3113],{"class":2771},[789,3666,1025],{"class":799},[789,3668,3618],{"class":803},[789,3670,823],{"class":799},[789,3672,3673,3675,3677,3679,3681,3683],{"class":791,"line":2197},[789,3674,2772],{"class":2771},[789,3676,1025],{"class":799},[789,3678,1161],{"class":868},[789,3680,1164],{"class":799},[789,3682,2858],{"class":803},[789,3684,1170],{"class":799},[789,3686,3687],{"class":791,"line":2202},[789,3688,1175],{"class":799},[789,3690,3691],{"class":791,"line":2220},[789,3692,852],{"emptyLinePlaceholder":223},[789,3694,3695,3697,3699],{"class":791,"line":2234},[789,3696,2761],{"class":799},[789,3698,1265],{"class":2764},[789,3700,886],{"class":799},[789,3702,3703,3705,3707,3709],{"class":791,"line":2243},[789,3704,3113],{"class":2771},[789,3706,1025],{"class":799},[789,3708,3618],{"class":803},[789,3710,823],{"class":799},[789,3712,3713,3715,3717,3719,3721,3723],{"class":791,"line":2248},[789,3714,2772],{"class":2771},[789,3716,1025],{"class":799},[789,3718,1161],{"class":868},[789,3720,1164],{"class":799},[789,3722,2904],{"class":803},[789,3724,1170],{"class":799},[789,3726,3727],{"class":791,"line":2266},[789,3728,1175],{"class":799},[715,3730,3732],{"id":3731},"best-practices","Best Practices",[730,3734,3735,3741,3747,3753,3759,3771,3785],{},[733,3736,3737,3740],{},[692,3738,3739],{},"Always use tokens",": Never write raw z-index numbers. Use the token scale so the entire team stays consistent.",[733,3742,3743,3746],{},[692,3744,3745],{},"Match elevation with shadows",": Higher z-index should correspond to higher box-shadow. This creates visual coherence.",[733,3748,3749,3752],{},[692,3750,3751],{},"Use semantic names",": Name tokens by purpose (modal, toast) not by number. This makes intent clear when reading code.",[733,3754,3755,3758],{},[692,3756,3757],{},"Leave gaps between levels",": The default 100-increment scale leaves room for intermediate values without reshuffling.",[733,3760,3761,3767,3768,3770],{},[692,3762,3763,3764,3766],{},"Use ",[697,3765,1187],{}," sparingly",": Negative z-index (",[697,3769,1191],{},") can cause elements to become unreachable. Reserve it for decorative elements.",[733,3772,3773,3776,3777,3780,3781,3784],{},[692,3774,3775],{},"Mind stacking contexts",": Remember that ",[697,3778,3779],{},"z-index"," only works within the same stacking context. A modal inside a ",[697,3782,3783],{},"z-index: 1"," container can't escape it.",[733,3786,3787,3790],{},[692,3788,3789],{},"Keep the scale small",": Most applications need 5-8 z-index levels. More than that usually signals a stacking context issue.",[2927,3792,3793,3795],{},[692,3794,2931],{}," If you find yourself needing z-index values between levels, reconsider your DOM structure first. Flattening nested stacking contexts often eliminates the need for intermediate values.",[715,3797,3799],{"id":3798},"faq","FAQ",[3801,3802,3803,3823,3831,3856,3876],"accordion",{},[3804,3805,3808,3809,3811,3812,3814,3815,3818,3819,3822],"accordion-item",{"icon":3806,"label":3807},"i-lucide-circle-help","Why use semantic names instead of numbers?","Semantic names like ",[697,3810,1243],{}," and ",[697,3813,1265],{}," communicate intent. When a developer reads ",[697,3816,3817],{},"zIndex: ref(zIndexModal)",", they immediately understand the stacking purpose. Raw numbers like ",[697,3820,3821],{},"z-index: 400"," require tribal knowledge and are prone to conflicts when multiple developers pick different values for similar purposes.",[3804,3824,3826,3827,3830],{"icon":3806,"label":3825},"What if I need a z-index between two levels?","The default scale uses increments of 100, so you can add custom levels between them (e.g., ",[697,3828,3829],{},"150"," between dropdown and sticky). However, if you frequently need intermediate values, consider whether your DOM structure can be simplified. Flattening stacking contexts often removes the need for extra levels.",[3804,3832,3834,3835,3838,3839,3838,3842,3838,3845,3848,3849,3851,3852,3855],{"icon":3806,"label":3833},"How does z-index interact with stacking contexts?","Z-index only works within the same stacking context. Elements that create new stacking contexts (via ",[697,3836,3837],{},"position",", ",[697,3840,3841],{},"opacity \u003C 1",[697,3843,3844],{},"transform",[697,3846,3847],{},"filter",", etc.) isolate their children's z-index from the outside. If a modal is inside a ",[697,3850,3783],{}," container, it can never appear above a ",[697,3853,3854],{},"z-index: 2"," sibling — no matter how high its own z-index is. Solution: keep high-elevation elements (modals, toasts) at the top of the DOM tree.",[3804,3857,3859,3860,3863,3864,3867,3868,3871,3872,3875],{"icon":3806,"label":3858},"Should z-index tokens match box-shadow tokens?","Not directly — they serve different purposes. Box shadows use a size scale (xs through 2xl) while z-index uses semantic names (dropdown, modal, toast). However, they should work together conceptually: higher-elevation elements should have both higher z-index and more prominent shadows. The box shadow documentation suggests pairing ",[697,3861,3862],{},"xs"," with cards, ",[697,3865,3866],{},"md"," with popovers, ",[697,3869,3870],{},"lg"," with modals, and ",[697,3873,3874],{},"2xl"," with toasts.",[3804,3877,1602,3879,1299,3881,3883],{"icon":3806,"label":3878},"What's the max token for?",[697,3880,1276],{},[697,3882,1280],{},") is an escape hatch for truly exceptional cases — like a debug overlay or a critical system notification that must appear above everything. If you find yourself using it regularly, your stacking architecture likely needs refactoring.",[3885,3886,3887],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":785,"searchDepth":826,"depth":826,"links":3889},[3890,3891,3892,3896,3897,3900,3901],{"id":717,"depth":826,"text":78},{"id":724,"depth":826,"text":725},{"id":765,"depth":826,"text":699,"children":3893},[3894,3895],{"id":1306,"depth":849,"text":1307},{"id":1598,"depth":849,"text":1599},{"id":1920,"depth":826,"text":1921},{"id":2935,"depth":826,"text":2936,"children":3898},[3899],{"id":2939,"depth":849,"text":2940},{"id":3731,"depth":826,"text":3732},{"id":3798,"depth":826,"text":3799},"Create and manage z-index design tokens with CSS variables for consistent stacking order across your application.",null,{},{"title":239,"icon":242},{"title":684,"description":3902},"0DxmLAL9uA-i1xruracx_NvGxWC4gFUMLc4jCGJu52s",[3909,3911],{"title":234,"path":235,"stem":236,"description":3910,"icon":237,"children":-1},"Create and manage typography design tokens with CSS variables for consistent text styling across your application.",{"title":78,"path":245,"stem":246,"description":3912,"icon":79,"children":-1},"Apply consistent, theme-aware base styles to HTML elements using Styleframe's element composables for body, headings, links, lists, and more.",1781596324937]