[{"data":1,"prerenderedAt":3619},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-composables-z-index":407,"-docs-theme-design-tokens-composables-z-index-surround":3614},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":3607,"extension":3571,"links":3608,"meta":3609,"navigation":3610,"path":221,"seo":3611,"sitemap":3612,"stem":222,"__hash__":3613},"docs_theme/docs/theme/design-tokens/02.composables/11.z-index.md","Z-Index Design Tokens",{"type":411,"value":412,"toc":3593},"minimark",[413,417,421,425,428,463,470,473,880,883,995,1008,1013,1020,1301,1305,1312,1609,1623,1627,1630,2631,2638,2642,2646,2649,3434,3438,3496,3501,3505,3589],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"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.",[414,422,424],{"id":423},"why-use-z-index-composables","Why use z-index composables?",[418,426,427],{},"Z-index composables help you:",[429,430,431,439,445,451,457],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Prevent stacking conflicts",": Use a predefined scale instead of inventing arbitrary values that inevitably collide.",[432,440,441,444],{},[435,442,443],{},"Establish semantic layers",": Name your z-index levels by purpose (dropdown, modal, toast) rather than magic numbers.",[432,446,447,450],{},[435,448,449],{},"Enable flexible theming",": Override z-index variables to adjust stacking order across your application.",[432,452,453,456],{},[435,454,455],{},"Maintain consistency",": Ensure every developer on the team uses the same stacking scale.",[432,458,459,462],{},[435,460,461],{},"Pair with elevation",": Align z-index levels with box-shadow elevation for a coherent visual hierarchy.",[414,464,466],{"id":465},"usezindexdesigntokens",[467,468,469],"code",{},"useZIndexDesignTokens",[418,471,472],{},"Styleframe provides a set of carefully crafted default z-index values that you can use out of the box:",[474,475,476,714],"tabs",{},[477,478,481],"tabs-item",{"icon":479,"label":480},"i-lucide-code","Code",[482,483,489],"pre",{"className":484,"code":485,"filename":486,"language":487,"meta":488,"style":488},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens } from '@styleframe/theme';\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","",[467,490,491,527,550,556,577,582,590,599,607,615,623,631,639,647,655,663,671,679,695,700],{"__ignoreMap":488},[492,493,496,500,504,508,511,514,517,521,524],"span",{"class":494,"line":495},"line",1,[492,497,499],{"class":498},"s7zQu","import",[492,501,503],{"class":502},"sMK4o"," {",[492,505,507],{"class":506},"sTEyZ"," styleframe",[492,509,510],{"class":502}," }",[492,512,513],{"class":498}," from",[492,515,516],{"class":502}," '",[492,518,520],{"class":519},"sfazB","styleframe",[492,522,523],{"class":502},"'",[492,525,526],{"class":502},";\n",[492,528,530,532,534,537,539,541,543,546,548],{"class":494,"line":529},2,[492,531,499],{"class":498},[492,533,503],{"class":502},[492,535,536],{"class":506}," useZIndexDesignTokens",[492,538,510],{"class":502},[492,540,513],{"class":498},[492,542,516],{"class":502},[492,544,545],{"class":519},"@styleframe/theme",[492,547,523],{"class":502},[492,549,526],{"class":502},[492,551,553],{"class":494,"line":552},3,[492,554,555],{"emptyLinePlaceholder":206},"\n",[492,557,559,563,566,569,572,575],{"class":494,"line":558},4,[492,560,562],{"class":561},"spNyl","const",[492,564,565],{"class":506}," s ",[492,567,568],{"class":502},"=",[492,570,507],{"class":571},"s2Zo4",[492,573,574],{"class":506},"()",[492,576,526],{"class":502},[492,578,580],{"class":494,"line":579},5,[492,581,555],{"emptyLinePlaceholder":206},[492,583,585,587],{"class":494,"line":584},6,[492,586,562],{"class":561},[492,588,589],{"class":502}," {\n",[492,591,593,596],{"class":494,"line":592},7,[492,594,595],{"class":506},"    zIndex",[492,597,598],{"class":502},",\n",[492,600,602,605],{"class":494,"line":601},8,[492,603,604],{"class":506},"    zIndexHide",[492,606,598],{"class":502},[492,608,610,613],{"class":494,"line":609},9,[492,611,612],{"class":506},"    zIndexBase",[492,614,598],{"class":502},[492,616,618,621],{"class":494,"line":617},10,[492,619,620],{"class":506},"    zIndexDropdown",[492,622,598],{"class":502},[492,624,626,629],{"class":494,"line":625},11,[492,627,628],{"class":506},"    zIndexSticky",[492,630,598],{"class":502},[492,632,634,637],{"class":494,"line":633},12,[492,635,636],{"class":506},"    zIndexOverlay",[492,638,598],{"class":502},[492,640,642,645],{"class":494,"line":641},13,[492,643,644],{"class":506},"    zIndexModal",[492,646,598],{"class":502},[492,648,650,653],{"class":494,"line":649},14,[492,651,652],{"class":506},"    zIndexPopover",[492,654,598],{"class":502},[492,656,658,661],{"class":494,"line":657},15,[492,659,660],{"class":506},"    zIndexToast",[492,662,598],{"class":502},[492,664,666,669],{"class":494,"line":665},16,[492,667,668],{"class":506},"    zIndexMax",[492,670,598],{"class":502},[492,672,674,677],{"class":494,"line":673},17,[492,675,676],{"class":506},"    zIndexAuto",[492,678,598],{"class":502},[492,680,682,685,688,690,693],{"class":494,"line":681},18,[492,683,684],{"class":502},"}",[492,686,687],{"class":502}," =",[492,689,536],{"class":571},[492,691,692],{"class":506},"(s)",[492,694,526],{"class":502},[492,696,698],{"class":494,"line":697},19,[492,699,555],{"emptyLinePlaceholder":206},[492,701,703,706,709,712],{"class":494,"line":702},20,[492,704,705],{"class":498},"export",[492,707,708],{"class":498}," default",[492,710,711],{"class":506}," s",[492,713,526],{"class":502},[477,715,717],{"icon":140,"label":716},"Output",[482,718,723],{"className":719,"code":720,"filename":721,"language":722,"meta":488,"style":488},"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/index.css","css",[467,724,725,735,748,760,772,784,796,808,820,832,844,856,875],{"__ignoreMap":488},[492,726,727,730,733],{"class":494,"line":495},[492,728,729],{"class":502},":",[492,731,732],{"class":561},"root",[492,734,589],{"class":502},[492,736,737,740,742,746],{"class":494,"line":529},[492,738,739],{"class":506},"    --z-index--hide",[492,741,729],{"class":502},[492,743,745],{"class":744},"sbssI"," -1",[492,747,526],{"class":502},[492,749,750,753,755,758],{"class":494,"line":552},[492,751,752],{"class":506},"    --z-index--base",[492,754,729],{"class":502},[492,756,757],{"class":744}," 0",[492,759,526],{"class":502},[492,761,762,765,767,770],{"class":494,"line":558},[492,763,764],{"class":506},"    --z-index--dropdown",[492,766,729],{"class":502},[492,768,769],{"class":744}," 100",[492,771,526],{"class":502},[492,773,774,777,779,782],{"class":494,"line":579},[492,775,776],{"class":506},"    --z-index--sticky",[492,778,729],{"class":502},[492,780,781],{"class":744}," 200",[492,783,526],{"class":502},[492,785,786,789,791,794],{"class":494,"line":584},[492,787,788],{"class":506},"    --z-index--overlay",[492,790,729],{"class":502},[492,792,793],{"class":744}," 300",[492,795,526],{"class":502},[492,797,798,801,803,806],{"class":494,"line":592},[492,799,800],{"class":506},"    --z-index--modal",[492,802,729],{"class":502},[492,804,805],{"class":744}," 400",[492,807,526],{"class":502},[492,809,810,813,815,818],{"class":494,"line":601},[492,811,812],{"class":506},"    --z-index--popover",[492,814,729],{"class":502},[492,816,817],{"class":744}," 500",[492,819,526],{"class":502},[492,821,822,825,827,830],{"class":494,"line":609},[492,823,824],{"class":506},"    --z-index--toast",[492,826,729],{"class":502},[492,828,829],{"class":744}," 600",[492,831,526],{"class":502},[492,833,834,837,839,842],{"class":494,"line":617},[492,835,836],{"class":506},"    --z-index--max",[492,838,729],{"class":502},[492,840,841],{"class":744}," 9999",[492,843,526],{"class":502},[492,845,846,849,851,854],{"class":494,"line":625},[492,847,848],{"class":506},"    --z-index--auto",[492,850,729],{"class":502},[492,852,853],{"class":506}," auto",[492,855,526],{"class":502},[492,857,858,861,863,866,869,872],{"class":494,"line":633},[492,859,860],{"class":506},"    --z-index",[492,862,729],{"class":502},[492,864,865],{"class":571}," var",[492,867,868],{"class":502},"(",[492,870,871],{"class":506},"--z-index--base",[492,873,874],{"class":502},");\n",[492,876,877],{"class":494,"line":641},[492,878,879],{"class":502},"}\n",[418,881,882],{},"The default values include:",[429,884,885,897,908,919,930,941,952,963,974,985],{},[432,886,887,892,893,896],{},[435,888,889],{},[467,890,891],{},"hide",": Behind base content (",[467,894,895],{},"-1",")",[432,898,899,904,905,896],{},[435,900,901],{},[467,902,903],{},"base"," (default): Default stacking level (",[467,906,907],{},"0",[432,909,910,915,916,896],{},[435,911,912],{},[467,913,914],{},"dropdown",": Dropdowns and select menus (",[467,917,918],{},"100",[432,920,921,926,927,896],{},[435,922,923],{},[467,924,925],{},"sticky",": Sticky headers and columns (",[467,928,929],{},"200",[432,931,932,937,938,896],{},[435,933,934],{},[467,935,936],{},"overlay",": Overlays and backdrops (",[467,939,940],{},"300",[432,942,943,948,949,896],{},[435,944,945],{},[467,946,947],{},"modal",": Modals and dialogs (",[467,950,951],{},"400",[432,953,954,959,960,896],{},[435,955,956],{},[467,957,958],{},"popover",": Popovers and tooltips (",[467,961,962],{},"500",[432,964,965,970,971,896],{},[435,966,967],{},[467,968,969],{},"toast",": Toasts and notifications (",[467,972,973],{},"600",[432,975,976,981,982,896],{},[435,977,978],{},[467,979,980],{},"max",": Escape hatch for highest priority (",[467,983,984],{},"9999",[432,986,987,992,993,896],{},[435,988,989],{},[467,990,991],{},"auto",": Browser default (",[467,994,991],{},[996,997,998,1001,1002,1004,1005,1007],"note",{},[435,999,1000],{},"Good to know:"," The scale uses increments of 100 between semantic levels, leaving room for intermediate values if needed. The ",[467,1003,980],{}," token (",[467,1006,984],{},") acts as an escape hatch for edge cases.",[1009,1010,1012],"h3",{"id":1011},"extending-the-default-z-index-values","Extending the Default Z-Index Values",[418,1014,1015,1016,1019],{},"You can customize which z-index is used as the default while keeping all other standard values. Use the ",[467,1017,1018],{},"@"," prefix to reference another key in the values object:",[474,1021,1022,1167],{},[477,1023,1024],{"icon":479,"label":480},[482,1025,1027],{"className":484,"code":1026,"filename":486,"language":487,"meta":488,"style":488},"import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens, zIndexValues } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { zIndex } = useZIndexDesignTokens(s, {\n    ...zIndexValues,\n    default: '@z-index.dropdown'\n});\n\nexport default s;\n",[467,1028,1029,1049,1075,1079,1093,1097,1119,1129,1145,1153,1157],{"__ignoreMap":488},[492,1030,1031,1033,1035,1037,1039,1041,1043,1045,1047],{"class":494,"line":495},[492,1032,499],{"class":498},[492,1034,503],{"class":502},[492,1036,507],{"class":506},[492,1038,510],{"class":502},[492,1040,513],{"class":498},[492,1042,516],{"class":502},[492,1044,520],{"class":519},[492,1046,523],{"class":502},[492,1048,526],{"class":502},[492,1050,1051,1053,1055,1057,1060,1063,1065,1067,1069,1071,1073],{"class":494,"line":529},[492,1052,499],{"class":498},[492,1054,503],{"class":502},[492,1056,536],{"class":506},[492,1058,1059],{"class":502},",",[492,1061,1062],{"class":506}," zIndexValues",[492,1064,510],{"class":502},[492,1066,513],{"class":498},[492,1068,516],{"class":502},[492,1070,545],{"class":519},[492,1072,523],{"class":502},[492,1074,526],{"class":502},[492,1076,1077],{"class":494,"line":552},[492,1078,555],{"emptyLinePlaceholder":206},[492,1080,1081,1083,1085,1087,1089,1091],{"class":494,"line":558},[492,1082,562],{"class":561},[492,1084,565],{"class":506},[492,1086,568],{"class":502},[492,1088,507],{"class":571},[492,1090,574],{"class":506},[492,1092,526],{"class":502},[492,1094,1095],{"class":494,"line":579},[492,1096,555],{"emptyLinePlaceholder":206},[492,1098,1099,1101,1103,1106,1108,1110,1112,1115,1117],{"class":494,"line":584},[492,1100,562],{"class":561},[492,1102,503],{"class":502},[492,1104,1105],{"class":506}," zIndex ",[492,1107,684],{"class":502},[492,1109,687],{"class":502},[492,1111,536],{"class":571},[492,1113,1114],{"class":506},"(s",[492,1116,1059],{"class":502},[492,1118,589],{"class":502},[492,1120,1121,1124,1127],{"class":494,"line":592},[492,1122,1123],{"class":502},"    ...",[492,1125,1126],{"class":506},"zIndexValues",[492,1128,598],{"class":502},[492,1130,1131,1135,1137,1139,1142],{"class":494,"line":601},[492,1132,1134],{"class":1133},"swJcz","    default",[492,1136,729],{"class":502},[492,1138,516],{"class":502},[492,1140,1141],{"class":519},"@z-index.dropdown",[492,1143,1144],{"class":502},"'\n",[492,1146,1147,1149,1151],{"class":494,"line":609},[492,1148,684],{"class":502},[492,1150,896],{"class":506},[492,1152,526],{"class":502},[492,1154,1155],{"class":494,"line":617},[492,1156,555],{"emptyLinePlaceholder":206},[492,1158,1159,1161,1163,1165],{"class":494,"line":625},[492,1160,705],{"class":498},[492,1162,708],{"class":498},[492,1164,711],{"class":506},[492,1166,526],{"class":502},[477,1168,1169],{"icon":140,"label":716},[482,1170,1172],{"className":719,"code":1171,"filename":721,"language":722,"meta":488,"style":488},":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",[467,1173,1174,1182,1192,1202,1212,1222,1232,1242,1252,1262,1272,1282,1297],{"__ignoreMap":488},[492,1175,1176,1178,1180],{"class":494,"line":495},[492,1177,729],{"class":502},[492,1179,732],{"class":561},[492,1181,589],{"class":502},[492,1183,1184,1186,1188,1190],{"class":494,"line":529},[492,1185,739],{"class":506},[492,1187,729],{"class":502},[492,1189,745],{"class":744},[492,1191,526],{"class":502},[492,1193,1194,1196,1198,1200],{"class":494,"line":552},[492,1195,752],{"class":506},[492,1197,729],{"class":502},[492,1199,757],{"class":744},[492,1201,526],{"class":502},[492,1203,1204,1206,1208,1210],{"class":494,"line":558},[492,1205,764],{"class":506},[492,1207,729],{"class":502},[492,1209,769],{"class":744},[492,1211,526],{"class":502},[492,1213,1214,1216,1218,1220],{"class":494,"line":579},[492,1215,776],{"class":506},[492,1217,729],{"class":502},[492,1219,781],{"class":744},[492,1221,526],{"class":502},[492,1223,1224,1226,1228,1230],{"class":494,"line":584},[492,1225,788],{"class":506},[492,1227,729],{"class":502},[492,1229,793],{"class":744},[492,1231,526],{"class":502},[492,1233,1234,1236,1238,1240],{"class":494,"line":592},[492,1235,800],{"class":506},[492,1237,729],{"class":502},[492,1239,805],{"class":744},[492,1241,526],{"class":502},[492,1243,1244,1246,1248,1250],{"class":494,"line":601},[492,1245,812],{"class":506},[492,1247,729],{"class":502},[492,1249,817],{"class":744},[492,1251,526],{"class":502},[492,1253,1254,1256,1258,1260],{"class":494,"line":609},[492,1255,824],{"class":506},[492,1257,729],{"class":502},[492,1259,829],{"class":744},[492,1261,526],{"class":502},[492,1263,1264,1266,1268,1270],{"class":494,"line":617},[492,1265,836],{"class":506},[492,1267,729],{"class":502},[492,1269,841],{"class":744},[492,1271,526],{"class":502},[492,1273,1274,1276,1278,1280],{"class":494,"line":625},[492,1275,848],{"class":506},[492,1277,729],{"class":502},[492,1279,853],{"class":506},[492,1281,526],{"class":502},[492,1283,1284,1286,1288,1290,1292,1295],{"class":494,"line":633},[492,1285,860],{"class":506},[492,1287,729],{"class":502},[492,1289,865],{"class":571},[492,1291,868],{"class":502},[492,1293,1294],{"class":506},"--z-index--dropdown",[492,1296,874],{"class":502},[492,1298,1299],{"class":494,"line":641},[492,1300,879],{"class":502},[1009,1302,1304],{"id":1303},"creating-custom-z-index-variables","Creating Custom Z-Index Variables",[418,1306,1307,1308,1311],{},"The ",[467,1309,1310],{},"useZIndexDesignTokens()"," function creates a set of z-index variables for establishing stacking order in your interface.",[474,1313,1314,1533],{},[477,1315,1316],{"icon":479,"label":480},[482,1317,1319],{"className":484,"code":1318,"filename":486,"language":487,"meta":488,"style":488},"import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens } from '@styleframe/theme';\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",[467,1320,1321,1341,1361,1365,1379,1383,1389,1395,1401,1407,1413,1419,1433,1448,1463,1479,1495,1511,1519,1523],{"__ignoreMap":488},[492,1322,1323,1325,1327,1329,1331,1333,1335,1337,1339],{"class":494,"line":495},[492,1324,499],{"class":498},[492,1326,503],{"class":502},[492,1328,507],{"class":506},[492,1330,510],{"class":502},[492,1332,513],{"class":498},[492,1334,516],{"class":502},[492,1336,520],{"class":519},[492,1338,523],{"class":502},[492,1340,526],{"class":502},[492,1342,1343,1345,1347,1349,1351,1353,1355,1357,1359],{"class":494,"line":529},[492,1344,499],{"class":498},[492,1346,503],{"class":502},[492,1348,536],{"class":506},[492,1350,510],{"class":502},[492,1352,513],{"class":498},[492,1354,516],{"class":502},[492,1356,545],{"class":519},[492,1358,523],{"class":502},[492,1360,526],{"class":502},[492,1362,1363],{"class":494,"line":552},[492,1364,555],{"emptyLinePlaceholder":206},[492,1366,1367,1369,1371,1373,1375,1377],{"class":494,"line":558},[492,1368,562],{"class":561},[492,1370,565],{"class":506},[492,1372,568],{"class":502},[492,1374,507],{"class":571},[492,1376,574],{"class":506},[492,1378,526],{"class":502},[492,1380,1381],{"class":494,"line":579},[492,1382,555],{"emptyLinePlaceholder":206},[492,1384,1385,1387],{"class":494,"line":584},[492,1386,562],{"class":561},[492,1388,589],{"class":502},[492,1390,1391,1393],{"class":494,"line":592},[492,1392,595],{"class":506},[492,1394,598],{"class":502},[492,1396,1397,1399],{"class":494,"line":601},[492,1398,612],{"class":506},[492,1400,598],{"class":502},[492,1402,1403,1405],{"class":494,"line":609},[492,1404,620],{"class":506},[492,1406,598],{"class":502},[492,1408,1409,1411],{"class":494,"line":617},[492,1410,644],{"class":506},[492,1412,598],{"class":502},[492,1414,1415,1417],{"class":494,"line":625},[492,1416,660],{"class":506},[492,1418,598],{"class":502},[492,1420,1421,1423,1425,1427,1429,1431],{"class":494,"line":633},[492,1422,684],{"class":502},[492,1424,687],{"class":502},[492,1426,536],{"class":571},[492,1428,1114],{"class":506},[492,1430,1059],{"class":502},[492,1432,589],{"class":502},[492,1434,1435,1437,1439,1441,1444,1446],{"class":494,"line":641},[492,1436,1134],{"class":1133},[492,1438,729],{"class":502},[492,1440,516],{"class":502},[492,1442,1443],{"class":519},"@z-index.base",[492,1445,523],{"class":502},[492,1447,598],{"class":502},[492,1449,1450,1453,1455,1457,1459,1461],{"class":494,"line":649},[492,1451,1452],{"class":1133},"    base",[492,1454,729],{"class":502},[492,1456,516],{"class":502},[492,1458,907],{"class":519},[492,1460,523],{"class":502},[492,1462,598],{"class":502},[492,1464,1465,1468,1470,1472,1475,1477],{"class":494,"line":657},[492,1466,1467],{"class":1133},"    dropdown",[492,1469,729],{"class":502},[492,1471,516],{"class":502},[492,1473,1474],{"class":519},"1000",[492,1476,523],{"class":502},[492,1478,598],{"class":502},[492,1480,1481,1484,1486,1488,1491,1493],{"class":494,"line":665},[492,1482,1483],{"class":1133},"    modal",[492,1485,729],{"class":502},[492,1487,516],{"class":502},[492,1489,1490],{"class":519},"2000",[492,1492,523],{"class":502},[492,1494,598],{"class":502},[492,1496,1497,1500,1502,1504,1507,1509],{"class":494,"line":673},[492,1498,1499],{"class":1133},"    toast",[492,1501,729],{"class":502},[492,1503,516],{"class":502},[492,1505,1506],{"class":519},"3000",[492,1508,523],{"class":502},[492,1510,598],{"class":502},[492,1512,1513,1515,1517],{"class":494,"line":681},[492,1514,684],{"class":502},[492,1516,896],{"class":506},[492,1518,526],{"class":502},[492,1520,1521],{"class":494,"line":697},[492,1522,555],{"emptyLinePlaceholder":206},[492,1524,1525,1527,1529,1531],{"class":494,"line":702},[492,1526,705],{"class":498},[492,1528,708],{"class":498},[492,1530,711],{"class":506},[492,1532,526],{"class":502},[477,1534,1535],{"icon":140,"label":716},[482,1536,1538],{"className":719,"code":1537,"filename":721,"language":722,"meta":488,"style":488},":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",[467,1539,1540,1548,1558,1569,1580,1591,1605],{"__ignoreMap":488},[492,1541,1542,1544,1546],{"class":494,"line":495},[492,1543,729],{"class":502},[492,1545,732],{"class":561},[492,1547,589],{"class":502},[492,1549,1550,1552,1554,1556],{"class":494,"line":529},[492,1551,752],{"class":506},[492,1553,729],{"class":502},[492,1555,757],{"class":744},[492,1557,526],{"class":502},[492,1559,1560,1562,1564,1567],{"class":494,"line":552},[492,1561,764],{"class":506},[492,1563,729],{"class":502},[492,1565,1566],{"class":744}," 1000",[492,1568,526],{"class":502},[492,1570,1571,1573,1575,1578],{"class":494,"line":558},[492,1572,800],{"class":506},[492,1574,729],{"class":502},[492,1576,1577],{"class":744}," 2000",[492,1579,526],{"class":502},[492,1581,1582,1584,1586,1589],{"class":494,"line":579},[492,1583,824],{"class":506},[492,1585,729],{"class":502},[492,1587,1588],{"class":744}," 3000",[492,1590,526],{"class":502},[492,1592,1593,1595,1597,1599,1601,1603],{"class":494,"line":584},[492,1594,860],{"class":506},[492,1596,729],{"class":502},[492,1598,865],{"class":571},[492,1600,868],{"class":502},[492,1602,871],{"class":506},[492,1604,874],{"class":502},[492,1606,1607],{"class":494,"line":592},[492,1608,879],{"class":502},[418,1610,1611,1612,1615,1616,1618,1619,1622],{},"The function creates variables for each stacking level you define. Each key in the object becomes a z-index variable with the prefix ",[467,1613,1614],{},"z-index--",", and the export name is automatically converted to camelCase (e.g., ",[467,1617,914],{}," → ",[467,1620,1621],{},"zIndexDropdown",").",[414,1624,1626],{"id":1625},"pairing-z-index-with-box-shadow","Pairing Z-Index with Box Shadow",[418,1628,1629],{},"Z-index and box shadow should work together — higher elevation elements should have both higher z-index and more prominent shadows:",[474,1631,1632,2082],{},[477,1633,1634],{"icon":479,"label":480},[482,1635,1637],{"className":484,"code":1636,"filename":486,"language":487,"meta":488,"style":488},"import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens, useBoxShadowDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\n// Create z-index scale\nconst {\n    zIndexDropdown,\n    zIndexOverlay,\n    zIndexModal,\n    zIndexToast,\n} = useZIndexDesignTokens(s);\n\n// Create matching shadow scale\nconst {\n    boxShadowMd,\n    boxShadowLg,\n    boxShadowXl,\n    boxShadow2xl,\n} = useBoxShadowDesignTokens(s);\n\n// 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",[467,1638,1639,1659,1684,1688,1702,1724,1728,1734,1740,1746,1752,1758,1764,1776,1780,1785,1791,1798,1805,1812,1819,1832,1837,1843,1862,1876,1891,1900,1905,1923,1937,1946,1951,1969,1983,1997,2006,2011,2029,2043,2057,2066,2071],{"__ignoreMap":488},[492,1640,1641,1643,1645,1647,1649,1651,1653,1655,1657],{"class":494,"line":495},[492,1642,499],{"class":498},[492,1644,503],{"class":502},[492,1646,507],{"class":506},[492,1648,510],{"class":502},[492,1650,513],{"class":498},[492,1652,516],{"class":502},[492,1654,520],{"class":519},[492,1656,523],{"class":502},[492,1658,526],{"class":502},[492,1660,1661,1663,1665,1667,1669,1672,1674,1676,1678,1680,1682],{"class":494,"line":529},[492,1662,499],{"class":498},[492,1664,503],{"class":502},[492,1666,536],{"class":506},[492,1668,1059],{"class":502},[492,1670,1671],{"class":506}," useBoxShadowDesignTokens",[492,1673,510],{"class":502},[492,1675,513],{"class":498},[492,1677,516],{"class":502},[492,1679,545],{"class":519},[492,1681,523],{"class":502},[492,1683,526],{"class":502},[492,1685,1686],{"class":494,"line":552},[492,1687,555],{"emptyLinePlaceholder":206},[492,1689,1690,1692,1694,1696,1698,1700],{"class":494,"line":558},[492,1691,562],{"class":561},[492,1693,565],{"class":506},[492,1695,568],{"class":502},[492,1697,507],{"class":571},[492,1699,574],{"class":506},[492,1701,526],{"class":502},[492,1703,1704,1706,1708,1711,1713,1716,1718,1720,1722],{"class":494,"line":579},[492,1705,562],{"class":561},[492,1707,503],{"class":502},[492,1709,1710],{"class":506}," ref",[492,1712,1059],{"class":502},[492,1714,1715],{"class":506}," selector ",[492,1717,684],{"class":502},[492,1719,687],{"class":502},[492,1721,711],{"class":506},[492,1723,526],{"class":502},[492,1725,1726],{"class":494,"line":584},[492,1727,555],{"emptyLinePlaceholder":206},[492,1729,1730],{"class":494,"line":592},[492,1731,1733],{"class":1732},"sHwdD","// Create z-index scale\n",[492,1735,1736,1738],{"class":494,"line":601},[492,1737,562],{"class":561},[492,1739,589],{"class":502},[492,1741,1742,1744],{"class":494,"line":609},[492,1743,620],{"class":506},[492,1745,598],{"class":502},[492,1747,1748,1750],{"class":494,"line":617},[492,1749,636],{"class":506},[492,1751,598],{"class":502},[492,1753,1754,1756],{"class":494,"line":625},[492,1755,644],{"class":506},[492,1757,598],{"class":502},[492,1759,1760,1762],{"class":494,"line":633},[492,1761,660],{"class":506},[492,1763,598],{"class":502},[492,1765,1766,1768,1770,1772,1774],{"class":494,"line":641},[492,1767,684],{"class":502},[492,1769,687],{"class":502},[492,1771,536],{"class":571},[492,1773,692],{"class":506},[492,1775,526],{"class":502},[492,1777,1778],{"class":494,"line":649},[492,1779,555],{"emptyLinePlaceholder":206},[492,1781,1782],{"class":494,"line":657},[492,1783,1784],{"class":1732},"// Create matching shadow scale\n",[492,1786,1787,1789],{"class":494,"line":665},[492,1788,562],{"class":561},[492,1790,589],{"class":502},[492,1792,1793,1796],{"class":494,"line":673},[492,1794,1795],{"class":506},"    boxShadowMd",[492,1797,598],{"class":502},[492,1799,1800,1803],{"class":494,"line":681},[492,1801,1802],{"class":506},"    boxShadowLg",[492,1804,598],{"class":502},[492,1806,1807,1810],{"class":494,"line":697},[492,1808,1809],{"class":506},"    boxShadowXl",[492,1811,598],{"class":502},[492,1813,1814,1817],{"class":494,"line":702},[492,1815,1816],{"class":506},"    boxShadow2xl",[492,1818,598],{"class":502},[492,1820,1822,1824,1826,1828,1830],{"class":494,"line":1821},21,[492,1823,684],{"class":502},[492,1825,687],{"class":502},[492,1827,1671],{"class":571},[492,1829,692],{"class":506},[492,1831,526],{"class":502},[492,1833,1835],{"class":494,"line":1834},22,[492,1836,555],{"emptyLinePlaceholder":206},[492,1838,1840],{"class":494,"line":1839},23,[492,1841,1842],{"class":1732},"// Pair elevation with stacking order\n",[492,1844,1846,1849,1851,1853,1856,1858,1860],{"class":494,"line":1845},24,[492,1847,1848],{"class":571},"selector",[492,1850,868],{"class":506},[492,1852,523],{"class":502},[492,1854,1855],{"class":519},".dropdown",[492,1857,523],{"class":502},[492,1859,1059],{"class":502},[492,1861,589],{"class":502},[492,1863,1865,1867,1869,1871,1874],{"class":494,"line":1864},25,[492,1866,595],{"class":1133},[492,1868,729],{"class":502},[492,1870,1710],{"class":571},[492,1872,1873],{"class":506},"(zIndexDropdown)",[492,1875,598],{"class":502},[492,1877,1879,1882,1884,1886,1889],{"class":494,"line":1878},26,[492,1880,1881],{"class":1133},"    boxShadow",[492,1883,729],{"class":502},[492,1885,1710],{"class":571},[492,1887,1888],{"class":506},"(boxShadowMd)",[492,1890,598],{"class":502},[492,1892,1894,1896,1898],{"class":494,"line":1893},27,[492,1895,684],{"class":502},[492,1897,896],{"class":506},[492,1899,526],{"class":502},[492,1901,1903],{"class":494,"line":1902},28,[492,1904,555],{"emptyLinePlaceholder":206},[492,1906,1908,1910,1912,1914,1917,1919,1921],{"class":494,"line":1907},29,[492,1909,1848],{"class":571},[492,1911,868],{"class":506},[492,1913,523],{"class":502},[492,1915,1916],{"class":519},".overlay",[492,1918,523],{"class":502},[492,1920,1059],{"class":502},[492,1922,589],{"class":502},[492,1924,1926,1928,1930,1932,1935],{"class":494,"line":1925},30,[492,1927,595],{"class":1133},[492,1929,729],{"class":502},[492,1931,1710],{"class":571},[492,1933,1934],{"class":506},"(zIndexOverlay)",[492,1936,598],{"class":502},[492,1938,1940,1942,1944],{"class":494,"line":1939},31,[492,1941,684],{"class":502},[492,1943,896],{"class":506},[492,1945,526],{"class":502},[492,1947,1949],{"class":494,"line":1948},32,[492,1950,555],{"emptyLinePlaceholder":206},[492,1952,1954,1956,1958,1960,1963,1965,1967],{"class":494,"line":1953},33,[492,1955,1848],{"class":571},[492,1957,868],{"class":506},[492,1959,523],{"class":502},[492,1961,1962],{"class":519},".modal",[492,1964,523],{"class":502},[492,1966,1059],{"class":502},[492,1968,589],{"class":502},[492,1970,1972,1974,1976,1978,1981],{"class":494,"line":1971},34,[492,1973,595],{"class":1133},[492,1975,729],{"class":502},[492,1977,1710],{"class":571},[492,1979,1980],{"class":506},"(zIndexModal)",[492,1982,598],{"class":502},[492,1984,1986,1988,1990,1992,1995],{"class":494,"line":1985},35,[492,1987,1881],{"class":1133},[492,1989,729],{"class":502},[492,1991,1710],{"class":571},[492,1993,1994],{"class":506},"(boxShadowXl)",[492,1996,598],{"class":502},[492,1998,2000,2002,2004],{"class":494,"line":1999},36,[492,2001,684],{"class":502},[492,2003,896],{"class":506},[492,2005,526],{"class":502},[492,2007,2009],{"class":494,"line":2008},37,[492,2010,555],{"emptyLinePlaceholder":206},[492,2012,2014,2016,2018,2020,2023,2025,2027],{"class":494,"line":2013},38,[492,2015,1848],{"class":571},[492,2017,868],{"class":506},[492,2019,523],{"class":502},[492,2021,2022],{"class":519},".toast",[492,2024,523],{"class":502},[492,2026,1059],{"class":502},[492,2028,589],{"class":502},[492,2030,2032,2034,2036,2038,2041],{"class":494,"line":2031},39,[492,2033,595],{"class":1133},[492,2035,729],{"class":502},[492,2037,1710],{"class":571},[492,2039,2040],{"class":506},"(zIndexToast)",[492,2042,598],{"class":502},[492,2044,2046,2048,2050,2052,2055],{"class":494,"line":2045},40,[492,2047,1881],{"class":1133},[492,2049,729],{"class":502},[492,2051,1710],{"class":571},[492,2053,2054],{"class":506},"(boxShadow2xl)",[492,2056,598],{"class":502},[492,2058,2060,2062,2064],{"class":494,"line":2059},41,[492,2061,684],{"class":502},[492,2063,896],{"class":506},[492,2065,526],{"class":502},[492,2067,2069],{"class":494,"line":2068},42,[492,2070,555],{"emptyLinePlaceholder":206},[492,2072,2074,2076,2078,2080],{"class":494,"line":2073},43,[492,2075,705],{"class":498},[492,2077,708],{"class":498},[492,2079,711],{"class":506},[492,2081,526],{"class":502},[477,2083,2084],{"icon":140,"label":716},[482,2085,2087],{"className":719,"code":2086,"filename":721,"language":722,"meta":488,"style":488},":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) / 0.16), 0 8px 16px -4px oklch(var(--box-shadow-color, 0 0 0) / 0.10);\n    --box-shadow--lg: 0 4px 8px oklch(var(--box-shadow-color, 0 0 0) / 0.18), 0 16px 24px -8px oklch(var(--box-shadow-color, 0 0 0) / 0.12);\n    --box-shadow--xl: 0 8px 12px oklch(var(--box-shadow-color, 0 0 0) / 0.20), 0 24px 48px -12px oklch(var(--box-shadow-color, 0 0 0) / 0.14);\n    --box-shadow--2xl: 0 12px 16px oklch(var(--box-shadow-color, 0 0 0) / 0.22), 0 32px 64px -16px oklch(var(--box-shadow-color, 0 0 0) / 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",[467,2088,2089,2097,2107,2117,2127,2137,2222,2299,2377,2454,2458,2462,2472,2488,2504,2508,2512,2520,2535,2539,2543,2551,2566,2581,2585,2589,2597,2612,2627],{"__ignoreMap":488},[492,2090,2091,2093,2095],{"class":494,"line":495},[492,2092,729],{"class":502},[492,2094,732],{"class":561},[492,2096,589],{"class":502},[492,2098,2099,2101,2103,2105],{"class":494,"line":529},[492,2100,764],{"class":506},[492,2102,729],{"class":502},[492,2104,769],{"class":744},[492,2106,526],{"class":502},[492,2108,2109,2111,2113,2115],{"class":494,"line":552},[492,2110,788],{"class":506},[492,2112,729],{"class":502},[492,2114,793],{"class":744},[492,2116,526],{"class":502},[492,2118,2119,2121,2123,2125],{"class":494,"line":558},[492,2120,800],{"class":506},[492,2122,729],{"class":502},[492,2124,805],{"class":744},[492,2126,526],{"class":502},[492,2128,2129,2131,2133,2135],{"class":494,"line":579},[492,2130,824],{"class":506},[492,2132,729],{"class":502},[492,2134,829],{"class":744},[492,2136,526],{"class":502},[492,2138,2139,2142,2144,2146,2149,2152,2155,2157,2160,2162,2165,2167,2169,2171,2173,2175,2178,2181,2184,2186,2189,2192,2195,2197,2199,2201,2203,2205,2207,2209,2211,2213,2215,2217,2220],{"class":494,"line":584},[492,2140,2141],{"class":506},"    --box-shadow--md",[492,2143,729],{"class":502},[492,2145,757],{"class":744},[492,2147,2148],{"class":744}," 2px",[492,2150,2151],{"class":744}," 4px",[492,2153,2154],{"class":571}," oklch",[492,2156,868],{"class":502},[492,2158,2159],{"class":571},"var",[492,2161,868],{"class":502},[492,2163,2164],{"class":506},"--box-shadow-color",[492,2166,1059],{"class":502},[492,2168,757],{"class":744},[492,2170,757],{"class":744},[492,2172,757],{"class":744},[492,2174,896],{"class":502},[492,2176,2177],{"class":506}," / ",[492,2179,2180],{"class":744},"0.16",[492,2182,2183],{"class":502},"),",[492,2185,757],{"class":744},[492,2187,2188],{"class":744}," 8px",[492,2190,2191],{"class":744}," 16px",[492,2193,2194],{"class":744}," -4px",[492,2196,2154],{"class":571},[492,2198,868],{"class":502},[492,2200,2159],{"class":571},[492,2202,868],{"class":502},[492,2204,2164],{"class":506},[492,2206,1059],{"class":502},[492,2208,757],{"class":744},[492,2210,757],{"class":744},[492,2212,757],{"class":744},[492,2214,896],{"class":502},[492,2216,2177],{"class":506},[492,2218,2219],{"class":744},"0.10",[492,2221,874],{"class":502},[492,2223,2224,2227,2229,2231,2233,2235,2237,2239,2241,2243,2245,2247,2249,2251,2253,2255,2257,2260,2262,2264,2266,2269,2272,2274,2276,2278,2280,2282,2284,2286,2288,2290,2292,2294,2297],{"class":494,"line":592},[492,2225,2226],{"class":506},"    --box-shadow--lg",[492,2228,729],{"class":502},[492,2230,757],{"class":744},[492,2232,2151],{"class":744},[492,2234,2188],{"class":744},[492,2236,2154],{"class":571},[492,2238,868],{"class":502},[492,2240,2159],{"class":571},[492,2242,868],{"class":502},[492,2244,2164],{"class":506},[492,2246,1059],{"class":502},[492,2248,757],{"class":744},[492,2250,757],{"class":744},[492,2252,757],{"class":744},[492,2254,896],{"class":502},[492,2256,2177],{"class":506},[492,2258,2259],{"class":744},"0.18",[492,2261,2183],{"class":502},[492,2263,757],{"class":744},[492,2265,2191],{"class":744},[492,2267,2268],{"class":744}," 24px",[492,2270,2271],{"class":744}," -8px",[492,2273,2154],{"class":571},[492,2275,868],{"class":502},[492,2277,2159],{"class":571},[492,2279,868],{"class":502},[492,2281,2164],{"class":506},[492,2283,1059],{"class":502},[492,2285,757],{"class":744},[492,2287,757],{"class":744},[492,2289,757],{"class":744},[492,2291,896],{"class":502},[492,2293,2177],{"class":506},[492,2295,2296],{"class":744},"0.12",[492,2298,874],{"class":502},[492,2300,2301,2304,2306,2308,2310,2313,2315,2317,2319,2321,2323,2325,2327,2329,2331,2333,2335,2338,2340,2342,2344,2347,2350,2352,2354,2356,2358,2360,2362,2364,2366,2368,2370,2372,2375],{"class":494,"line":601},[492,2302,2303],{"class":506},"    --box-shadow--xl",[492,2305,729],{"class":502},[492,2307,757],{"class":744},[492,2309,2188],{"class":744},[492,2311,2312],{"class":744}," 12px",[492,2314,2154],{"class":571},[492,2316,868],{"class":502},[492,2318,2159],{"class":571},[492,2320,868],{"class":502},[492,2322,2164],{"class":506},[492,2324,1059],{"class":502},[492,2326,757],{"class":744},[492,2328,757],{"class":744},[492,2330,757],{"class":744},[492,2332,896],{"class":502},[492,2334,2177],{"class":506},[492,2336,2337],{"class":744},"0.20",[492,2339,2183],{"class":502},[492,2341,757],{"class":744},[492,2343,2268],{"class":744},[492,2345,2346],{"class":744}," 48px",[492,2348,2349],{"class":744}," -12px",[492,2351,2154],{"class":571},[492,2353,868],{"class":502},[492,2355,2159],{"class":571},[492,2357,868],{"class":502},[492,2359,2164],{"class":506},[492,2361,1059],{"class":502},[492,2363,757],{"class":744},[492,2365,757],{"class":744},[492,2367,757],{"class":744},[492,2369,896],{"class":502},[492,2371,2177],{"class":506},[492,2373,2374],{"class":744},"0.14",[492,2376,874],{"class":502},[492,2378,2379,2382,2384,2386,2388,2390,2392,2394,2396,2398,2400,2402,2404,2406,2408,2410,2412,2415,2417,2419,2422,2425,2428,2430,2432,2434,2436,2438,2440,2442,2444,2446,2448,2450,2452],{"class":494,"line":609},[492,2380,2381],{"class":506},"    --box-shadow--2xl",[492,2383,729],{"class":502},[492,2385,757],{"class":744},[492,2387,2312],{"class":744},[492,2389,2191],{"class":744},[492,2391,2154],{"class":571},[492,2393,868],{"class":502},[492,2395,2159],{"class":571},[492,2397,868],{"class":502},[492,2399,2164],{"class":506},[492,2401,1059],{"class":502},[492,2403,757],{"class":744},[492,2405,757],{"class":744},[492,2407,757],{"class":744},[492,2409,896],{"class":502},[492,2411,2177],{"class":506},[492,2413,2414],{"class":744},"0.22",[492,2416,2183],{"class":502},[492,2418,757],{"class":744},[492,2420,2421],{"class":744}," 32px",[492,2423,2424],{"class":744}," 64px",[492,2426,2427],{"class":744}," -16px",[492,2429,2154],{"class":571},[492,2431,868],{"class":502},[492,2433,2159],{"class":571},[492,2435,868],{"class":502},[492,2437,2164],{"class":506},[492,2439,1059],{"class":502},[492,2441,757],{"class":744},[492,2443,757],{"class":744},[492,2445,757],{"class":744},[492,2447,896],{"class":502},[492,2449,2177],{"class":506},[492,2451,2180],{"class":744},[492,2453,874],{"class":502},[492,2455,2456],{"class":494,"line":617},[492,2457,879],{"class":502},[492,2459,2460],{"class":494,"line":625},[492,2461,555],{"emptyLinePlaceholder":206},[492,2463,2464,2467,2470],{"class":494,"line":633},[492,2465,2466],{"class":502},".",[492,2468,914],{"class":2469},"sBMFI",[492,2471,589],{"class":502},[492,2473,2474,2478,2480,2482,2484,2486],{"class":494,"line":641},[492,2475,2477],{"class":2476},"sqsOY","    z-index",[492,2479,729],{"class":502},[492,2481,865],{"class":571},[492,2483,868],{"class":502},[492,2485,1294],{"class":506},[492,2487,874],{"class":502},[492,2489,2490,2493,2495,2497,2499,2502],{"class":494,"line":649},[492,2491,2492],{"class":2476},"    box-shadow",[492,2494,729],{"class":502},[492,2496,865],{"class":571},[492,2498,868],{"class":502},[492,2500,2501],{"class":506},"--box-shadow--md",[492,2503,874],{"class":502},[492,2505,2506],{"class":494,"line":657},[492,2507,879],{"class":502},[492,2509,2510],{"class":494,"line":665},[492,2511,555],{"emptyLinePlaceholder":206},[492,2513,2514,2516,2518],{"class":494,"line":673},[492,2515,2466],{"class":502},[492,2517,936],{"class":2469},[492,2519,589],{"class":502},[492,2521,2522,2524,2526,2528,2530,2533],{"class":494,"line":681},[492,2523,2477],{"class":2476},[492,2525,729],{"class":502},[492,2527,865],{"class":571},[492,2529,868],{"class":502},[492,2531,2532],{"class":506},"--z-index--overlay",[492,2534,874],{"class":502},[492,2536,2537],{"class":494,"line":697},[492,2538,879],{"class":502},[492,2540,2541],{"class":494,"line":702},[492,2542,555],{"emptyLinePlaceholder":206},[492,2544,2545,2547,2549],{"class":494,"line":1821},[492,2546,2466],{"class":502},[492,2548,947],{"class":2469},[492,2550,589],{"class":502},[492,2552,2553,2555,2557,2559,2561,2564],{"class":494,"line":1834},[492,2554,2477],{"class":2476},[492,2556,729],{"class":502},[492,2558,865],{"class":571},[492,2560,868],{"class":502},[492,2562,2563],{"class":506},"--z-index--modal",[492,2565,874],{"class":502},[492,2567,2568,2570,2572,2574,2576,2579],{"class":494,"line":1839},[492,2569,2492],{"class":2476},[492,2571,729],{"class":502},[492,2573,865],{"class":571},[492,2575,868],{"class":502},[492,2577,2578],{"class":506},"--box-shadow--xl",[492,2580,874],{"class":502},[492,2582,2583],{"class":494,"line":1845},[492,2584,879],{"class":502},[492,2586,2587],{"class":494,"line":1864},[492,2588,555],{"emptyLinePlaceholder":206},[492,2590,2591,2593,2595],{"class":494,"line":1878},[492,2592,2466],{"class":502},[492,2594,969],{"class":2469},[492,2596,589],{"class":502},[492,2598,2599,2601,2603,2605,2607,2610],{"class":494,"line":1893},[492,2600,2477],{"class":2476},[492,2602,729],{"class":502},[492,2604,865],{"class":571},[492,2606,868],{"class":502},[492,2608,2609],{"class":506},"--z-index--toast",[492,2611,874],{"class":502},[492,2613,2614,2616,2618,2620,2622,2625],{"class":494,"line":1902},[492,2615,2492],{"class":2476},[492,2617,729],{"class":502},[492,2619,865],{"class":571},[492,2621,868],{"class":502},[492,2623,2624],{"class":506},"--box-shadow--2xl",[492,2626,874],{"class":502},[492,2628,2629],{"class":494,"line":1907},[492,2630,879],{"class":502},[2632,2633,2634,2637],"tip",{},[435,2635,2636],{},"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.",[414,2639,2641],{"id":2640},"examples","Examples",[1009,2643,2645],{"id":2644},"application-shell","Application Shell",[418,2647,2648],{},"Here's how to create a complete stacking system for a typical application layout:",[474,2650,2651,3138],{},[477,2652,2653],{"icon":479,"label":480},[482,2654,2656],{"className":484,"code":2655,"filename":486,"language":487,"meta":488,"style":488},"import { styleframe } from 'styleframe';\nimport { useZIndexDesignTokens } from '@styleframe/theme';\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// Sticky navigation\nselector('.navbar', {\n    position: 'sticky',\n    top: '0',\n    zIndex: ref(zIndexSticky),\n});\n\n// Dropdown menus sit above sticky elements\nselector('.dropdown-menu', {\n    position: 'absolute',\n    zIndex: ref(zIndexDropdown),\n});\n\n// Full-screen overlay behind modals\nselector('.backdrop', {\n    position: 'fixed',\n    inset: '0',\n    zIndex: ref(zIndexOverlay),\n});\n\n// Modal sits above the overlay\nselector('.modal', {\n    position: 'fixed',\n    zIndex: ref(zIndexModal),\n});\n\n// Toasts appear above everything\nselector('.toast', {\n    position: 'fixed',\n    zIndex: ref(zIndexToast),\n});\n\nexport default s;\n",[467,2657,2658,2678,2698,2702,2716,2736,2740,2746,2752,2758,2764,2770,2776,2788,2792,2797,2814,2829,2844,2857,2865,2869,2874,2891,2906,2918,2926,2930,2935,2952,2967,2982,2994,3002,3006,3011,3027,3041,3053,3061,3065,3070,3086,3100,3113,3122,3127],{"__ignoreMap":488},[492,2659,2660,2662,2664,2666,2668,2670,2672,2674,2676],{"class":494,"line":495},[492,2661,499],{"class":498},[492,2663,503],{"class":502},[492,2665,507],{"class":506},[492,2667,510],{"class":502},[492,2669,513],{"class":498},[492,2671,516],{"class":502},[492,2673,520],{"class":519},[492,2675,523],{"class":502},[492,2677,526],{"class":502},[492,2679,2680,2682,2684,2686,2688,2690,2692,2694,2696],{"class":494,"line":529},[492,2681,499],{"class":498},[492,2683,503],{"class":502},[492,2685,536],{"class":506},[492,2687,510],{"class":502},[492,2689,513],{"class":498},[492,2691,516],{"class":502},[492,2693,545],{"class":519},[492,2695,523],{"class":502},[492,2697,526],{"class":502},[492,2699,2700],{"class":494,"line":552},[492,2701,555],{"emptyLinePlaceholder":206},[492,2703,2704,2706,2708,2710,2712,2714],{"class":494,"line":558},[492,2705,562],{"class":561},[492,2707,565],{"class":506},[492,2709,568],{"class":502},[492,2711,507],{"class":571},[492,2713,574],{"class":506},[492,2715,526],{"class":502},[492,2717,2718,2720,2722,2724,2726,2728,2730,2732,2734],{"class":494,"line":579},[492,2719,562],{"class":561},[492,2721,503],{"class":502},[492,2723,1710],{"class":506},[492,2725,1059],{"class":502},[492,2727,1715],{"class":506},[492,2729,684],{"class":502},[492,2731,687],{"class":502},[492,2733,711],{"class":506},[492,2735,526],{"class":502},[492,2737,2738],{"class":494,"line":584},[492,2739,555],{"emptyLinePlaceholder":206},[492,2741,2742,2744],{"class":494,"line":592},[492,2743,562],{"class":561},[492,2745,589],{"class":502},[492,2747,2748,2750],{"class":494,"line":601},[492,2749,628],{"class":506},[492,2751,598],{"class":502},[492,2753,2754,2756],{"class":494,"line":609},[492,2755,620],{"class":506},[492,2757,598],{"class":502},[492,2759,2760,2762],{"class":494,"line":617},[492,2761,636],{"class":506},[492,2763,598],{"class":502},[492,2765,2766,2768],{"class":494,"line":625},[492,2767,644],{"class":506},[492,2769,598],{"class":502},[492,2771,2772,2774],{"class":494,"line":633},[492,2773,660],{"class":506},[492,2775,598],{"class":502},[492,2777,2778,2780,2782,2784,2786],{"class":494,"line":641},[492,2779,684],{"class":502},[492,2781,687],{"class":502},[492,2783,536],{"class":571},[492,2785,692],{"class":506},[492,2787,526],{"class":502},[492,2789,2790],{"class":494,"line":649},[492,2791,555],{"emptyLinePlaceholder":206},[492,2793,2794],{"class":494,"line":657},[492,2795,2796],{"class":1732},"// Sticky navigation\n",[492,2798,2799,2801,2803,2805,2808,2810,2812],{"class":494,"line":665},[492,2800,1848],{"class":571},[492,2802,868],{"class":506},[492,2804,523],{"class":502},[492,2806,2807],{"class":519},".navbar",[492,2809,523],{"class":502},[492,2811,1059],{"class":502},[492,2813,589],{"class":502},[492,2815,2816,2819,2821,2823,2825,2827],{"class":494,"line":673},[492,2817,2818],{"class":1133},"    position",[492,2820,729],{"class":502},[492,2822,516],{"class":502},[492,2824,925],{"class":519},[492,2826,523],{"class":502},[492,2828,598],{"class":502},[492,2830,2831,2834,2836,2838,2840,2842],{"class":494,"line":681},[492,2832,2833],{"class":1133},"    top",[492,2835,729],{"class":502},[492,2837,516],{"class":502},[492,2839,907],{"class":519},[492,2841,523],{"class":502},[492,2843,598],{"class":502},[492,2845,2846,2848,2850,2852,2855],{"class":494,"line":697},[492,2847,595],{"class":1133},[492,2849,729],{"class":502},[492,2851,1710],{"class":571},[492,2853,2854],{"class":506},"(zIndexSticky)",[492,2856,598],{"class":502},[492,2858,2859,2861,2863],{"class":494,"line":702},[492,2860,684],{"class":502},[492,2862,896],{"class":506},[492,2864,526],{"class":502},[492,2866,2867],{"class":494,"line":1821},[492,2868,555],{"emptyLinePlaceholder":206},[492,2870,2871],{"class":494,"line":1834},[492,2872,2873],{"class":1732},"// Dropdown menus sit above sticky elements\n",[492,2875,2876,2878,2880,2882,2885,2887,2889],{"class":494,"line":1839},[492,2877,1848],{"class":571},[492,2879,868],{"class":506},[492,2881,523],{"class":502},[492,2883,2884],{"class":519},".dropdown-menu",[492,2886,523],{"class":502},[492,2888,1059],{"class":502},[492,2890,589],{"class":502},[492,2892,2893,2895,2897,2899,2902,2904],{"class":494,"line":1845},[492,2894,2818],{"class":1133},[492,2896,729],{"class":502},[492,2898,516],{"class":502},[492,2900,2901],{"class":519},"absolute",[492,2903,523],{"class":502},[492,2905,598],{"class":502},[492,2907,2908,2910,2912,2914,2916],{"class":494,"line":1864},[492,2909,595],{"class":1133},[492,2911,729],{"class":502},[492,2913,1710],{"class":571},[492,2915,1873],{"class":506},[492,2917,598],{"class":502},[492,2919,2920,2922,2924],{"class":494,"line":1878},[492,2921,684],{"class":502},[492,2923,896],{"class":506},[492,2925,526],{"class":502},[492,2927,2928],{"class":494,"line":1893},[492,2929,555],{"emptyLinePlaceholder":206},[492,2931,2932],{"class":494,"line":1902},[492,2933,2934],{"class":1732},"// Full-screen overlay behind modals\n",[492,2936,2937,2939,2941,2943,2946,2948,2950],{"class":494,"line":1907},[492,2938,1848],{"class":571},[492,2940,868],{"class":506},[492,2942,523],{"class":502},[492,2944,2945],{"class":519},".backdrop",[492,2947,523],{"class":502},[492,2949,1059],{"class":502},[492,2951,589],{"class":502},[492,2953,2954,2956,2958,2960,2963,2965],{"class":494,"line":1925},[492,2955,2818],{"class":1133},[492,2957,729],{"class":502},[492,2959,516],{"class":502},[492,2961,2962],{"class":519},"fixed",[492,2964,523],{"class":502},[492,2966,598],{"class":502},[492,2968,2969,2972,2974,2976,2978,2980],{"class":494,"line":1939},[492,2970,2971],{"class":1133},"    inset",[492,2973,729],{"class":502},[492,2975,516],{"class":502},[492,2977,907],{"class":519},[492,2979,523],{"class":502},[492,2981,598],{"class":502},[492,2983,2984,2986,2988,2990,2992],{"class":494,"line":1948},[492,2985,595],{"class":1133},[492,2987,729],{"class":502},[492,2989,1710],{"class":571},[492,2991,1934],{"class":506},[492,2993,598],{"class":502},[492,2995,2996,2998,3000],{"class":494,"line":1953},[492,2997,684],{"class":502},[492,2999,896],{"class":506},[492,3001,526],{"class":502},[492,3003,3004],{"class":494,"line":1971},[492,3005,555],{"emptyLinePlaceholder":206},[492,3007,3008],{"class":494,"line":1985},[492,3009,3010],{"class":1732},"// Modal sits above the overlay\n",[492,3012,3013,3015,3017,3019,3021,3023,3025],{"class":494,"line":1999},[492,3014,1848],{"class":571},[492,3016,868],{"class":506},[492,3018,523],{"class":502},[492,3020,1962],{"class":519},[492,3022,523],{"class":502},[492,3024,1059],{"class":502},[492,3026,589],{"class":502},[492,3028,3029,3031,3033,3035,3037,3039],{"class":494,"line":2008},[492,3030,2818],{"class":1133},[492,3032,729],{"class":502},[492,3034,516],{"class":502},[492,3036,2962],{"class":519},[492,3038,523],{"class":502},[492,3040,598],{"class":502},[492,3042,3043,3045,3047,3049,3051],{"class":494,"line":2013},[492,3044,595],{"class":1133},[492,3046,729],{"class":502},[492,3048,1710],{"class":571},[492,3050,1980],{"class":506},[492,3052,598],{"class":502},[492,3054,3055,3057,3059],{"class":494,"line":2031},[492,3056,684],{"class":502},[492,3058,896],{"class":506},[492,3060,526],{"class":502},[492,3062,3063],{"class":494,"line":2045},[492,3064,555],{"emptyLinePlaceholder":206},[492,3066,3067],{"class":494,"line":2059},[492,3068,3069],{"class":1732},"// Toasts appear above everything\n",[492,3071,3072,3074,3076,3078,3080,3082,3084],{"class":494,"line":2068},[492,3073,1848],{"class":571},[492,3075,868],{"class":506},[492,3077,523],{"class":502},[492,3079,2022],{"class":519},[492,3081,523],{"class":502},[492,3083,1059],{"class":502},[492,3085,589],{"class":502},[492,3087,3088,3090,3092,3094,3096,3098],{"class":494,"line":2073},[492,3089,2818],{"class":1133},[492,3091,729],{"class":502},[492,3093,516],{"class":502},[492,3095,2962],{"class":519},[492,3097,523],{"class":502},[492,3099,598],{"class":502},[492,3101,3103,3105,3107,3109,3111],{"class":494,"line":3102},44,[492,3104,595],{"class":1133},[492,3106,729],{"class":502},[492,3108,1710],{"class":571},[492,3110,2040],{"class":506},[492,3112,598],{"class":502},[492,3114,3116,3118,3120],{"class":494,"line":3115},45,[492,3117,684],{"class":502},[492,3119,896],{"class":506},[492,3121,526],{"class":502},[492,3123,3125],{"class":494,"line":3124},46,[492,3126,555],{"emptyLinePlaceholder":206},[492,3128,3130,3132,3134,3136],{"class":494,"line":3129},47,[492,3131,705],{"class":498},[492,3133,708],{"class":498},[492,3135,711],{"class":506},[492,3137,526],{"class":502},[477,3139,3140],{"icon":140,"label":716},[482,3141,3143],{"className":719,"code":3142,"filename":721,"language":722,"meta":488,"style":488},":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",[467,3144,3145,3153,3163,3173,3183,3193,3203,3207,3211,3220,3231,3241,3256,3260,3264,3273,3284,3298,3302,3306,3315,3326,3336,3350,3354,3358,3366,3376,3390,3394,3398,3406,3416,3430],{"__ignoreMap":488},[492,3146,3147,3149,3151],{"class":494,"line":495},[492,3148,729],{"class":502},[492,3150,732],{"class":561},[492,3152,589],{"class":502},[492,3154,3155,3157,3159,3161],{"class":494,"line":529},[492,3156,776],{"class":506},[492,3158,729],{"class":502},[492,3160,781],{"class":744},[492,3162,526],{"class":502},[492,3164,3165,3167,3169,3171],{"class":494,"line":552},[492,3166,764],{"class":506},[492,3168,729],{"class":502},[492,3170,769],{"class":744},[492,3172,526],{"class":502},[492,3174,3175,3177,3179,3181],{"class":494,"line":558},[492,3176,788],{"class":506},[492,3178,729],{"class":502},[492,3180,793],{"class":744},[492,3182,526],{"class":502},[492,3184,3185,3187,3189,3191],{"class":494,"line":579},[492,3186,800],{"class":506},[492,3188,729],{"class":502},[492,3190,805],{"class":744},[492,3192,526],{"class":502},[492,3194,3195,3197,3199,3201],{"class":494,"line":584},[492,3196,824],{"class":506},[492,3198,729],{"class":502},[492,3200,829],{"class":744},[492,3202,526],{"class":502},[492,3204,3205],{"class":494,"line":592},[492,3206,879],{"class":502},[492,3208,3209],{"class":494,"line":601},[492,3210,555],{"emptyLinePlaceholder":206},[492,3212,3213,3215,3218],{"class":494,"line":609},[492,3214,2466],{"class":502},[492,3216,3217],{"class":2469},"navbar",[492,3219,589],{"class":502},[492,3221,3222,3224,3226,3229],{"class":494,"line":617},[492,3223,2818],{"class":2476},[492,3225,729],{"class":502},[492,3227,3228],{"class":506}," sticky",[492,3230,526],{"class":502},[492,3232,3233,3235,3237,3239],{"class":494,"line":625},[492,3234,2833],{"class":2476},[492,3236,729],{"class":502},[492,3238,757],{"class":744},[492,3240,526],{"class":502},[492,3242,3243,3245,3247,3249,3251,3254],{"class":494,"line":633},[492,3244,2477],{"class":2476},[492,3246,729],{"class":502},[492,3248,865],{"class":571},[492,3250,868],{"class":502},[492,3252,3253],{"class":506},"--z-index--sticky",[492,3255,874],{"class":502},[492,3257,3258],{"class":494,"line":641},[492,3259,879],{"class":502},[492,3261,3262],{"class":494,"line":649},[492,3263,555],{"emptyLinePlaceholder":206},[492,3265,3266,3268,3271],{"class":494,"line":657},[492,3267,2466],{"class":502},[492,3269,3270],{"class":2469},"dropdown-menu",[492,3272,589],{"class":502},[492,3274,3275,3277,3279,3282],{"class":494,"line":665},[492,3276,2818],{"class":2476},[492,3278,729],{"class":502},[492,3280,3281],{"class":506}," absolute",[492,3283,526],{"class":502},[492,3285,3286,3288,3290,3292,3294,3296],{"class":494,"line":673},[492,3287,2477],{"class":2476},[492,3289,729],{"class":502},[492,3291,865],{"class":571},[492,3293,868],{"class":502},[492,3295,1294],{"class":506},[492,3297,874],{"class":502},[492,3299,3300],{"class":494,"line":681},[492,3301,879],{"class":502},[492,3303,3304],{"class":494,"line":697},[492,3305,555],{"emptyLinePlaceholder":206},[492,3307,3308,3310,3313],{"class":494,"line":702},[492,3309,2466],{"class":502},[492,3311,3312],{"class":2469},"backdrop",[492,3314,589],{"class":502},[492,3316,3317,3319,3321,3324],{"class":494,"line":1821},[492,3318,2818],{"class":2476},[492,3320,729],{"class":502},[492,3322,3323],{"class":506}," fixed",[492,3325,526],{"class":502},[492,3327,3328,3330,3332,3334],{"class":494,"line":1834},[492,3329,2971],{"class":2476},[492,3331,729],{"class":502},[492,3333,757],{"class":744},[492,3335,526],{"class":502},[492,3337,3338,3340,3342,3344,3346,3348],{"class":494,"line":1839},[492,3339,2477],{"class":2476},[492,3341,729],{"class":502},[492,3343,865],{"class":571},[492,3345,868],{"class":502},[492,3347,2532],{"class":506},[492,3349,874],{"class":502},[492,3351,3352],{"class":494,"line":1845},[492,3353,879],{"class":502},[492,3355,3356],{"class":494,"line":1864},[492,3357,555],{"emptyLinePlaceholder":206},[492,3359,3360,3362,3364],{"class":494,"line":1878},[492,3361,2466],{"class":502},[492,3363,947],{"class":2469},[492,3365,589],{"class":502},[492,3367,3368,3370,3372,3374],{"class":494,"line":1893},[492,3369,2818],{"class":2476},[492,3371,729],{"class":502},[492,3373,3323],{"class":506},[492,3375,526],{"class":502},[492,3377,3378,3380,3382,3384,3386,3388],{"class":494,"line":1902},[492,3379,2477],{"class":2476},[492,3381,729],{"class":502},[492,3383,865],{"class":571},[492,3385,868],{"class":502},[492,3387,2563],{"class":506},[492,3389,874],{"class":502},[492,3391,3392],{"class":494,"line":1907},[492,3393,879],{"class":502},[492,3395,3396],{"class":494,"line":1925},[492,3397,555],{"emptyLinePlaceholder":206},[492,3399,3400,3402,3404],{"class":494,"line":1939},[492,3401,2466],{"class":502},[492,3403,969],{"class":2469},[492,3405,589],{"class":502},[492,3407,3408,3410,3412,3414],{"class":494,"line":1948},[492,3409,2818],{"class":2476},[492,3411,729],{"class":502},[492,3413,3323],{"class":506},[492,3415,526],{"class":502},[492,3417,3418,3420,3422,3424,3426,3428],{"class":494,"line":1953},[492,3419,2477],{"class":2476},[492,3421,729],{"class":502},[492,3423,865],{"class":571},[492,3425,868],{"class":502},[492,3427,2609],{"class":506},[492,3429,874],{"class":502},[492,3431,3432],{"class":494,"line":1971},[492,3433,879],{"class":502},[414,3435,3437],{"id":3436},"best-practices","Best Practices",[429,3439,3440,3446,3452,3458,3464,3476,3490],{},[432,3441,3442,3445],{},[435,3443,3444],{},"Always use tokens",": Never write raw z-index numbers. Use the token scale so the entire team stays consistent.",[432,3447,3448,3451],{},[435,3449,3450],{},"Match elevation with shadows",": Higher z-index should correspond to higher box-shadow. This creates visual coherence.",[432,3453,3454,3457],{},[435,3455,3456],{},"Use semantic names",": Name tokens by purpose (modal, toast) not by number. This makes intent clear when reading code.",[432,3459,3460,3463],{},[435,3461,3462],{},"Leave gaps between levels",": The default 100-increment scale leaves room for intermediate values without reshuffling.",[432,3465,3466,3472,3473,3475],{},[435,3467,3468,3469,3471],{},"Use ",[467,3470,891],{}," sparingly",": Negative z-index (",[467,3474,895],{},") can cause elements to become unreachable. Reserve it for decorative elements.",[432,3477,3478,3481,3482,3485,3486,3489],{},[435,3479,3480],{},"Mind stacking contexts",": Remember that ",[467,3483,3484],{},"z-index"," only works within the same stacking context. A modal inside a ",[467,3487,3488],{},"z-index: 1"," container can't escape it.",[432,3491,3492,3495],{},[435,3493,3494],{},"Keep the scale small",": Most applications need 5-8 z-index levels. More than that usually signals a stacking context issue.",[2632,3497,3498,3500],{},[435,3499,2636],{}," 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.",[414,3502,3504],{"id":3503},"faq","FAQ",[3506,3507,3508,3528,3536,3561,3581],"accordion",{},[3509,3510,3513,3514,3516,3517,3519,3520,3523,3524,3527],"accordion-item",{"icon":3511,"label":3512},"i-lucide-circle-help","Why use semantic names instead of numbers?","Semantic names like ",[467,3515,947],{}," and ",[467,3518,969],{}," communicate intent. When a developer reads ",[467,3521,3522],{},"zIndex: ref(zIndexModal)",", they immediately understand the stacking purpose. Raw numbers like ",[467,3525,3526],{},"z-index: 400"," require tribal knowledge and are prone to conflicts when multiple developers pick different values for similar purposes.",[3509,3529,3531,3532,3535],{"icon":3511,"label":3530},"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., ",[467,3533,3534],{},"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.",[3509,3537,3539,3540,3543,3544,3543,3547,3543,3550,3553,3554,3556,3557,3560],{"icon":3511,"label":3538},"How does z-index interact with stacking contexts?","Z-index only works within the same stacking context. Elements that create new stacking contexts (via ",[467,3541,3542],{},"position",", ",[467,3545,3546],{},"opacity \u003C 1",[467,3548,3549],{},"transform",[467,3551,3552],{},"filter",", etc.) isolate their children's z-index from the outside. If a modal is inside a ",[467,3555,3488],{}," container, it can never appear above a ",[467,3558,3559],{},"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.",[3509,3562,3564,3565,3568,3569,3572,3573,3576,3577,3580],{"icon":3511,"label":3563},"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 ",[467,3566,3567],{},"xs"," with cards, ",[467,3570,3571],{},"md"," with popovers, ",[467,3574,3575],{},"lg"," with modals, and ",[467,3578,3579],{},"2xl"," with toasts.",[3509,3582,1307,3584,1004,3586,3588],{"icon":3511,"label":3583},"What's the max token for?",[467,3585,980],{},[467,3587,984],{},") 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.",[3590,3591,3592],"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":488,"searchDepth":529,"depth":529,"links":3594},[3595,3596,3597,3601,3602,3605,3606],{"id":416,"depth":529,"text":64},{"id":423,"depth":529,"text":424},{"id":465,"depth":529,"text":469,"children":3598},[3599,3600],{"id":1011,"depth":552,"text":1012},{"id":1303,"depth":552,"text":1304},{"id":1625,"depth":529,"text":1626},{"id":2640,"depth":529,"text":2641,"children":3603},[3604],{"id":2644,"depth":552,"text":2645},{"id":3436,"depth":529,"text":3437},{"id":3503,"depth":529,"text":3504},"Create and manage z-index design tokens with CSS variables for consistent stacking order across your application.",null,{},{"title":220,"icon":7},{"title":409,"description":3607},{"loc":221},"TD9AZa1UKpy0KGFQfzodX14w7S76g06LAxvzfApBNWw",[3615,3617],{"title":216,"path":217,"stem":218,"description":3616,"icon":7,"children":-1},"Create and manage typography design tokens with CSS variables for consistent text styling across your application.",{"title":64,"path":364,"stem":365,"description":3618,"icon":65,"children":-1},"Explore Styleframe's utility modifier composables for generating state-based, responsive, and structural variants of your utility classes with full type safety.",1776621133964]