[{"data":1,"prerenderedAt":2458},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-composables-other-state":407,"-docs-theme-modifiers-composables-other-state-surround":2453},{"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":2445,"extension":2446,"links":2447,"meta":2448,"navigation":2449,"path":393,"seo":2450,"sitemap":2451,"stem":394,"__hash__":2452},"docs_theme/docs/theme/modifiers/02.composables/04.other-state.md","Other State Modifiers",{"type":411,"value":412,"toc":2430},"minimark",[413,417,426,430,433,463,469,483,1056,1061,1091,1115,1121,1130,1576,1579,1602,1614,1620,1626,1631,1674,1678,1682,2016,2020,2319,2323,2372,2376,2426],[414,415,64],"h2",{"id":416},"overview",[418,419,420,421,425],"p",{},"Other state modifiers let you apply utility styles conditionally based on miscellaneous element states. They target elements that are open (like ",[422,423,424],"code",{},"\u003Cdetails>"," and popovers) or inert (non-interactive), generating variant utility classes for these specific conditions.",[414,427,429],{"id":428},"why-use-other-state-modifiers","Why Use Other State Modifiers?",[418,431,432],{},"Other state modifiers help you:",[434,435,436,447,457],"ul",{},[437,438,439,443,444,446],"li",{},[440,441,442],"strong",{},"Style disclosure widgets",": Apply styles to open ",[422,445,424],{}," elements and popovers",[437,448,449,452,453,456],{},[440,450,451],{},"Handle inert state",": Style elements that are non-interactive due to the ",[422,454,455],{},"inert"," attribute",[437,458,459,462],{},[440,460,461],{},"Build accessible patterns",": Create visual feedback for native HTML patterns like disclosure and popover",[414,464,466],{"id":465},"useopenmodifier",[422,467,468],{},"useOpenModifier",[418,470,471,472,475,476,478,479,482],{},"The ",[422,473,474],{},"useOpenModifier()"," function creates a modifier that applies styles to elements that are in an open state. This includes ",[422,477,424],{}," elements with the ",[422,480,481],{},"open"," attribute and elements using the Popover API.",[484,485,486,756,924],"tabs",{},[487,488,491],"tabs-item",{"icon":489,"label":490},"i-lucide-code","Code",[492,493,499],"pre",{"className":494,"code":495,"filename":496,"language":497,"meta":498,"style":498},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useRotateUtility, useDisplayUtility, useOpacityUtility } from \"@styleframe/theme\";\nimport { useOpenModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst open = useOpenModifier(s);\n\nuseRotateUtility(s, {\n    90: '90deg',\n}, [open]);\n\nuseOpacityUtility(s, {\n    100: '1',\n}, [open]);\n\nexport default s;\n","styleframe.config.ts","ts","",[422,500,501,537,571,593,599,620,625,642,647,661,683,694,699,711,728,737,742],{"__ignoreMap":498},[502,503,506,510,514,518,521,524,527,531,534],"span",{"class":504,"line":505},"line",1,[502,507,509],{"class":508},"s7zQu","import",[502,511,513],{"class":512},"sMK4o"," {",[502,515,517],{"class":516},"sTEyZ"," styleframe",[502,519,520],{"class":512}," }",[502,522,523],{"class":508}," from",[502,525,526],{"class":512}," \"",[502,528,530],{"class":529},"sfazB","styleframe",[502,532,533],{"class":512},"\"",[502,535,536],{"class":512},";\n",[502,538,540,542,544,547,550,553,555,558,560,562,564,567,569],{"class":504,"line":539},2,[502,541,509],{"class":508},[502,543,513],{"class":512},[502,545,546],{"class":516}," useRotateUtility",[502,548,549],{"class":512},",",[502,551,552],{"class":516}," useDisplayUtility",[502,554,549],{"class":512},[502,556,557],{"class":516}," useOpacityUtility",[502,559,520],{"class":512},[502,561,523],{"class":508},[502,563,526],{"class":512},[502,565,566],{"class":529},"@styleframe/theme",[502,568,533],{"class":512},[502,570,536],{"class":512},[502,572,574,576,578,581,583,585,587,589,591],{"class":504,"line":573},3,[502,575,509],{"class":508},[502,577,513],{"class":512},[502,579,580],{"class":516}," useOpenModifier",[502,582,520],{"class":512},[502,584,523],{"class":508},[502,586,526],{"class":512},[502,588,566],{"class":529},[502,590,533],{"class":512},[502,592,536],{"class":512},[502,594,596],{"class":504,"line":595},4,[502,597,598],{"emptyLinePlaceholder":206},"\n",[502,600,602,606,609,612,615,618],{"class":504,"line":601},5,[502,603,605],{"class":604},"spNyl","const",[502,607,608],{"class":516}," s ",[502,610,611],{"class":512},"=",[502,613,517],{"class":614},"s2Zo4",[502,616,617],{"class":516},"()",[502,619,536],{"class":512},[502,621,623],{"class":504,"line":622},6,[502,624,598],{"emptyLinePlaceholder":206},[502,626,628,630,633,635,637,640],{"class":504,"line":627},7,[502,629,605],{"class":604},[502,631,632],{"class":516}," open ",[502,634,611],{"class":512},[502,636,580],{"class":614},[502,638,639],{"class":516},"(s)",[502,641,536],{"class":512},[502,643,645],{"class":504,"line":644},8,[502,646,598],{"emptyLinePlaceholder":206},[502,648,650,653,656,658],{"class":504,"line":649},9,[502,651,652],{"class":614},"useRotateUtility",[502,654,655],{"class":516},"(s",[502,657,549],{"class":512},[502,659,660],{"class":512}," {\n",[502,662,664,668,671,674,677,680],{"class":504,"line":663},10,[502,665,667],{"class":666},"sbssI","    90",[502,669,670],{"class":512},":",[502,672,673],{"class":512}," '",[502,675,676],{"class":529},"90deg",[502,678,679],{"class":512},"'",[502,681,682],{"class":512},",\n",[502,684,686,689,692],{"class":504,"line":685},11,[502,687,688],{"class":512},"},",[502,690,691],{"class":516}," [open])",[502,693,536],{"class":512},[502,695,697],{"class":504,"line":696},12,[502,698,598],{"emptyLinePlaceholder":206},[502,700,702,705,707,709],{"class":504,"line":701},13,[502,703,704],{"class":614},"useOpacityUtility",[502,706,655],{"class":516},[502,708,549],{"class":512},[502,710,660],{"class":512},[502,712,714,717,719,721,724,726],{"class":504,"line":713},14,[502,715,716],{"class":666},"    100",[502,718,670],{"class":512},[502,720,673],{"class":512},[502,722,723],{"class":529},"1",[502,725,679],{"class":512},[502,727,682],{"class":512},[502,729,731,733,735],{"class":504,"line":730},15,[502,732,688],{"class":512},[502,734,691],{"class":516},[502,736,536],{"class":512},[502,738,740],{"class":504,"line":739},16,[502,741,598],{"emptyLinePlaceholder":206},[502,743,745,748,751,754],{"class":504,"line":744},17,[502,746,747],{"class":508},"export",[502,749,750],{"class":508}," default",[502,752,753],{"class":516}," s",[502,755,536],{"class":512},[487,757,759],{"icon":140,"label":758},"Output",[492,760,765],{"className":761,"code":762,"filename":763,"language":764,"meta":498,"style":498},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._rotate\\:90 { rotate: 90deg; }\n._opacity\\:100 { opacity: 1; }\n\n._open\\:rotate\\:90 {\n    &:is([open], :popover-open) { rotate: 90deg; }\n}\n\n._open\\:opacity\\:100 {\n    &:is([open], :popover-open) { opacity: 1; }\n}\n","styleframe/index.css","css",[422,766,767,799,825,829,847,872,877,881,898,920],{"__ignoreMap":498},[502,768,769,772,776,779,782,784,788,790,793,796],{"class":504,"line":505},[502,770,771],{"class":512},".",[502,773,775],{"class":774},"sBMFI","_rotate",[502,777,778],{"class":516},"\\:",[502,780,781],{"class":774},"90",[502,783,513],{"class":512},[502,785,787],{"class":786},"sqsOY"," rotate",[502,789,670],{"class":512},[502,791,792],{"class":666}," 90deg",[502,794,795],{"class":512},";",[502,797,798],{"class":512}," }\n",[502,800,801,803,806,808,811,813,816,818,821,823],{"class":504,"line":539},[502,802,771],{"class":512},[502,804,805],{"class":774},"_opacity",[502,807,778],{"class":516},[502,809,810],{"class":774},"100",[502,812,513],{"class":512},[502,814,815],{"class":786}," opacity",[502,817,670],{"class":512},[502,819,820],{"class":666}," 1",[502,822,795],{"class":512},[502,824,798],{"class":512},[502,826,827],{"class":504,"line":573},[502,828,598],{"emptyLinePlaceholder":206},[502,830,831,833,836,838,841,843,845],{"class":504,"line":595},[502,832,771],{"class":512},[502,834,835],{"class":774},"_open",[502,837,778],{"class":516},[502,839,840],{"class":774},"rotate",[502,842,778],{"class":516},[502,844,781],{"class":774},[502,846,660],{"class":512},[502,848,849,852,854,857,859,862,864,866,868,870],{"class":504,"line":601},[502,850,851],{"class":516},"    &",[502,853,670],{"class":512},[502,855,856],{"class":516},"is([open]",[502,858,549],{"class":512},[502,860,861],{"class":516}," :popover-open) { ",[502,863,840],{"class":786},[502,865,670],{"class":512},[502,867,792],{"class":666},[502,869,795],{"class":512},[502,871,798],{"class":512},[502,873,874],{"class":504,"line":622},[502,875,876],{"class":516},"}\n",[502,878,879],{"class":504,"line":627},[502,880,598],{"emptyLinePlaceholder":206},[502,882,883,885,887,889,892,894,896],{"class":504,"line":644},[502,884,771],{"class":512},[502,886,835],{"class":774},[502,888,778],{"class":516},[502,890,891],{"class":774},"opacity",[502,893,778],{"class":516},[502,895,810],{"class":774},[502,897,660],{"class":512},[502,899,900,902,904,906,908,910,912,914,916,918],{"class":504,"line":649},[502,901,851],{"class":516},[502,903,670],{"class":512},[502,905,856],{"class":516},[502,907,549],{"class":512},[502,909,861],{"class":516},[502,911,891],{"class":786},[502,913,670],{"class":512},[502,915,820],{"class":666},[502,917,795],{"class":512},[502,919,798],{"class":512},[502,921,922],{"class":504,"line":663},[502,923,876],{"class":516},[487,925,928],{"icon":926,"label":927},"i-lucide-layout","Usage",[492,929,933],{"className":930,"code":931,"language":932,"meta":498,"style":498},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Rotate icon when details is open -->\n\u003Cdetails class=\"_open:rotate:90\">\n    \u003Csummary>Click to expand\u003C/summary>\n    \u003Cp>Expanded content here.\u003C/p>\n\u003C/details>\n\n\u003C!-- Style popover when open -->\n\u003Cdiv popover class=\"_opacity:100 _open:opacity:100\">\n    Popover content\n\u003C/div>\n","html",[422,934,935,941,965,986,1003,1011,1015,1020,1043,1048],{"__ignoreMap":498},[502,936,937],{"class":504,"line":505},[502,938,940],{"class":939},"sHwdD","\u003C!-- Rotate icon when details is open -->\n",[502,942,943,946,950,953,955,957,960,962],{"class":504,"line":539},[502,944,945],{"class":512},"\u003C",[502,947,949],{"class":948},"swJcz","details",[502,951,952],{"class":604}," class",[502,954,611],{"class":512},[502,956,533],{"class":512},[502,958,959],{"class":529},"_open:rotate:90",[502,961,533],{"class":512},[502,963,964],{"class":512},">\n",[502,966,967,970,973,976,979,982,984],{"class":504,"line":573},[502,968,969],{"class":512},"    \u003C",[502,971,972],{"class":948},"summary",[502,974,975],{"class":512},">",[502,977,978],{"class":516},"Click to expand",[502,980,981],{"class":512},"\u003C/",[502,983,972],{"class":948},[502,985,964],{"class":512},[502,987,988,990,992,994,997,999,1001],{"class":504,"line":595},[502,989,969],{"class":512},[502,991,418],{"class":948},[502,993,975],{"class":512},[502,995,996],{"class":516},"Expanded content here.",[502,998,981],{"class":512},[502,1000,418],{"class":948},[502,1002,964],{"class":512},[502,1004,1005,1007,1009],{"class":504,"line":601},[502,1006,981],{"class":512},[502,1008,949],{"class":948},[502,1010,964],{"class":512},[502,1012,1013],{"class":504,"line":622},[502,1014,598],{"emptyLinePlaceholder":206},[502,1016,1017],{"class":504,"line":627},[502,1018,1019],{"class":939},"\u003C!-- Style popover when open -->\n",[502,1021,1022,1024,1027,1030,1032,1034,1036,1039,1041],{"class":504,"line":644},[502,1023,945],{"class":512},[502,1025,1026],{"class":948},"div",[502,1028,1029],{"class":604}," popover",[502,1031,952],{"class":604},[502,1033,611],{"class":512},[502,1035,533],{"class":512},[502,1037,1038],{"class":529},"_opacity:100 _open:opacity:100",[502,1040,533],{"class":512},[502,1042,964],{"class":512},[502,1044,1045],{"class":504,"line":649},[502,1046,1047],{"class":516},"    Popover content\n",[502,1049,1050,1052,1054],{"class":504,"line":663},[502,1051,981],{"class":512},[502,1053,1026],{"class":948},[502,1055,964],{"class":512},[1057,1058,1060],"h4",{"id":1059},"css-selector","CSS Selector",[1062,1063,1064,1076],"table",{},[1065,1066,1067],"thead",{},[1068,1069,1070,1074],"tr",{},[1071,1072,1073],"th",{},"Modifier Name",[1071,1075,1060],{},[1077,1078,1079],"tbody",{},[1068,1080,1081,1086],{},[1082,1083,1084],"td",{},[422,1085,481],{},[1082,1087,1088],{},[422,1089,1090],{},"&:is([open], :popover-open)",[1092,1093,1094,1097,1098,1100,1101,1104,1105,1107,1108,1110,1111,1114],"tip",{},[440,1095,1096],{},"Pro tip",": The ",[422,1099,481],{}," modifier uses ",[422,1102,1103],{},":is([open], :popover-open)"," to match both the ",[422,1106,424],{}," element's ",[422,1109,481],{}," attribute and the Popover API's ",[422,1112,1113],{},":popover-open"," pseudo-class, giving you a single modifier for both patterns.",[414,1116,1118],{"id":1117},"useinertmodifier",[422,1119,1120],{},"useInertModifier",[418,1122,471,1123,1126,1127,1129],{},[422,1124,1125],{},"useInertModifier()"," function creates a modifier that applies styles to inert elements and their descendants. The ",[422,1128,455],{}," HTML attribute makes an element and all its descendants non-interactive and invisible to assistive technology.",[484,1131,1132,1334,1486],{},[487,1133,1134],{"icon":489,"label":490},[492,1135,1137],{"className":494,"code":1136,"filename":496,"language":497,"meta":498,"style":498},"import { styleframe } from \"styleframe\";\nimport { useOpacityUtility, usePointerEventsUtility } from \"@styleframe/theme\";\nimport { useInertModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst inert = useInertModifier(s);\n\nuseOpacityUtility(s, {\n    50: '0.5',\n}, [inert]);\n\nusePointerEventsUtility(s, {\n    none: 'none',\n}, [inert]);\n\nexport default s;\n",[422,1138,1139,1159,1184,1205,1209,1223,1227,1242,1246,1256,1272,1281,1285,1296,1312,1320,1324],{"__ignoreMap":498},[502,1140,1141,1143,1145,1147,1149,1151,1153,1155,1157],{"class":504,"line":505},[502,1142,509],{"class":508},[502,1144,513],{"class":512},[502,1146,517],{"class":516},[502,1148,520],{"class":512},[502,1150,523],{"class":508},[502,1152,526],{"class":512},[502,1154,530],{"class":529},[502,1156,533],{"class":512},[502,1158,536],{"class":512},[502,1160,1161,1163,1165,1167,1169,1172,1174,1176,1178,1180,1182],{"class":504,"line":539},[502,1162,509],{"class":508},[502,1164,513],{"class":512},[502,1166,557],{"class":516},[502,1168,549],{"class":512},[502,1170,1171],{"class":516}," usePointerEventsUtility",[502,1173,520],{"class":512},[502,1175,523],{"class":508},[502,1177,526],{"class":512},[502,1179,566],{"class":529},[502,1181,533],{"class":512},[502,1183,536],{"class":512},[502,1185,1186,1188,1190,1193,1195,1197,1199,1201,1203],{"class":504,"line":573},[502,1187,509],{"class":508},[502,1189,513],{"class":512},[502,1191,1192],{"class":516}," useInertModifier",[502,1194,520],{"class":512},[502,1196,523],{"class":508},[502,1198,526],{"class":512},[502,1200,566],{"class":529},[502,1202,533],{"class":512},[502,1204,536],{"class":512},[502,1206,1207],{"class":504,"line":595},[502,1208,598],{"emptyLinePlaceholder":206},[502,1210,1211,1213,1215,1217,1219,1221],{"class":504,"line":601},[502,1212,605],{"class":604},[502,1214,608],{"class":516},[502,1216,611],{"class":512},[502,1218,517],{"class":614},[502,1220,617],{"class":516},[502,1222,536],{"class":512},[502,1224,1225],{"class":504,"line":622},[502,1226,598],{"emptyLinePlaceholder":206},[502,1228,1229,1231,1234,1236,1238,1240],{"class":504,"line":627},[502,1230,605],{"class":604},[502,1232,1233],{"class":516}," inert ",[502,1235,611],{"class":512},[502,1237,1192],{"class":614},[502,1239,639],{"class":516},[502,1241,536],{"class":512},[502,1243,1244],{"class":504,"line":644},[502,1245,598],{"emptyLinePlaceholder":206},[502,1247,1248,1250,1252,1254],{"class":504,"line":649},[502,1249,704],{"class":614},[502,1251,655],{"class":516},[502,1253,549],{"class":512},[502,1255,660],{"class":512},[502,1257,1258,1261,1263,1265,1268,1270],{"class":504,"line":663},[502,1259,1260],{"class":666},"    50",[502,1262,670],{"class":512},[502,1264,673],{"class":512},[502,1266,1267],{"class":529},"0.5",[502,1269,679],{"class":512},[502,1271,682],{"class":512},[502,1273,1274,1276,1279],{"class":504,"line":685},[502,1275,688],{"class":512},[502,1277,1278],{"class":516}," [inert])",[502,1280,536],{"class":512},[502,1282,1283],{"class":504,"line":696},[502,1284,598],{"emptyLinePlaceholder":206},[502,1286,1287,1290,1292,1294],{"class":504,"line":701},[502,1288,1289],{"class":614},"usePointerEventsUtility",[502,1291,655],{"class":516},[502,1293,549],{"class":512},[502,1295,660],{"class":512},[502,1297,1298,1301,1303,1305,1308,1310],{"class":504,"line":713},[502,1299,1300],{"class":948},"    none",[502,1302,670],{"class":512},[502,1304,673],{"class":512},[502,1306,1307],{"class":529},"none",[502,1309,679],{"class":512},[502,1311,682],{"class":512},[502,1313,1314,1316,1318],{"class":504,"line":730},[502,1315,688],{"class":512},[502,1317,1278],{"class":516},[502,1319,536],{"class":512},[502,1321,1322],{"class":504,"line":739},[502,1323,598],{"emptyLinePlaceholder":206},[502,1325,1326,1328,1330,1332],{"class":504,"line":744},[502,1327,747],{"class":508},[502,1329,750],{"class":508},[502,1331,753],{"class":516},[502,1333,536],{"class":512},[487,1335,1336],{"icon":140,"label":758},[492,1337,1339],{"className":761,"code":1338,"filename":763,"language":764,"meta":498,"style":498},"._opacity\\:50 { opacity: 0.5; }\n._pointer-events\\:none { pointer-events: none; }\n\n._inert\\:opacity\\:50 {\n    &:is([inert], [inert] *) { opacity: 0.5; }\n}\n\n._inert\\:pointer-events\\:none {\n    &:is([inert], [inert] *) { pointer-events: none; }\n}\n",[422,1340,1341,1365,1390,1394,1411,1435,1439,1443,1460,1482],{"__ignoreMap":498},[502,1342,1343,1345,1347,1349,1352,1354,1356,1358,1361,1363],{"class":504,"line":505},[502,1344,771],{"class":512},[502,1346,805],{"class":774},[502,1348,778],{"class":516},[502,1350,1351],{"class":774},"50",[502,1353,513],{"class":512},[502,1355,815],{"class":786},[502,1357,670],{"class":512},[502,1359,1360],{"class":666}," 0.5",[502,1362,795],{"class":512},[502,1364,798],{"class":512},[502,1366,1367,1369,1372,1374,1376,1378,1381,1383,1386,1388],{"class":504,"line":539},[502,1368,771],{"class":512},[502,1370,1371],{"class":774},"_pointer-events",[502,1373,778],{"class":516},[502,1375,1307],{"class":774},[502,1377,513],{"class":512},[502,1379,1380],{"class":786}," pointer-events",[502,1382,670],{"class":512},[502,1384,1385],{"class":516}," none",[502,1387,795],{"class":512},[502,1389,798],{"class":512},[502,1391,1392],{"class":504,"line":573},[502,1393,598],{"emptyLinePlaceholder":206},[502,1395,1396,1398,1401,1403,1405,1407,1409],{"class":504,"line":595},[502,1397,771],{"class":512},[502,1399,1400],{"class":774},"_inert",[502,1402,778],{"class":516},[502,1404,891],{"class":774},[502,1406,778],{"class":516},[502,1408,1351],{"class":774},[502,1410,660],{"class":512},[502,1412,1413,1415,1417,1420,1422,1425,1427,1429,1431,1433],{"class":504,"line":601},[502,1414,851],{"class":516},[502,1416,670],{"class":512},[502,1418,1419],{"class":516},"is([inert]",[502,1421,549],{"class":512},[502,1423,1424],{"class":516}," [inert] *) { ",[502,1426,891],{"class":786},[502,1428,670],{"class":512},[502,1430,1360],{"class":666},[502,1432,795],{"class":512},[502,1434,798],{"class":512},[502,1436,1437],{"class":504,"line":622},[502,1438,876],{"class":516},[502,1440,1441],{"class":504,"line":627},[502,1442,598],{"emptyLinePlaceholder":206},[502,1444,1445,1447,1449,1451,1454,1456,1458],{"class":504,"line":644},[502,1446,771],{"class":512},[502,1448,1400],{"class":774},[502,1450,778],{"class":516},[502,1452,1453],{"class":774},"pointer-events",[502,1455,778],{"class":516},[502,1457,1307],{"class":774},[502,1459,660],{"class":512},[502,1461,1462,1464,1466,1468,1470,1472,1474,1476,1478,1480],{"class":504,"line":649},[502,1463,851],{"class":516},[502,1465,670],{"class":512},[502,1467,1419],{"class":516},[502,1469,549],{"class":512},[502,1471,1424],{"class":516},[502,1473,1453],{"class":786},[502,1475,670],{"class":512},[502,1477,1385],{"class":516},[502,1479,795],{"class":512},[502,1481,798],{"class":512},[502,1483,1484],{"class":504,"line":663},[502,1485,876],{"class":516},[487,1487,1488],{"icon":926,"label":927},[492,1489,1491],{"className":930,"code":1490,"language":932,"meta":498,"style":498},"\u003C!-- Dim and disable interaction for inert content -->\n\u003Cdiv inert class=\"_inert:opacity:50 _inert:pointer-events:none\">\n    \u003Cbutton>This button is non-interactive\u003C/button>\n    \u003Ca href=\"#\">This link is non-interactive\u003C/a>\n\u003C/div>\n",[422,1492,1493,1498,1520,1538,1568],{"__ignoreMap":498},[502,1494,1495],{"class":504,"line":505},[502,1496,1497],{"class":939},"\u003C!-- Dim and disable interaction for inert content -->\n",[502,1499,1500,1502,1504,1507,1509,1511,1513,1516,1518],{"class":504,"line":539},[502,1501,945],{"class":512},[502,1503,1026],{"class":948},[502,1505,1506],{"class":604}," inert",[502,1508,952],{"class":604},[502,1510,611],{"class":512},[502,1512,533],{"class":512},[502,1514,1515],{"class":529},"_inert:opacity:50 _inert:pointer-events:none",[502,1517,533],{"class":512},[502,1519,964],{"class":512},[502,1521,1522,1524,1527,1529,1532,1534,1536],{"class":504,"line":573},[502,1523,969],{"class":512},[502,1525,1526],{"class":948},"button",[502,1528,975],{"class":512},[502,1530,1531],{"class":516},"This button is non-interactive",[502,1533,981],{"class":512},[502,1535,1526],{"class":948},[502,1537,964],{"class":512},[502,1539,1540,1542,1545,1548,1550,1552,1555,1557,1559,1562,1564,1566],{"class":504,"line":595},[502,1541,969],{"class":512},[502,1543,1544],{"class":948},"a",[502,1546,1547],{"class":604}," href",[502,1549,611],{"class":512},[502,1551,533],{"class":512},[502,1553,1554],{"class":529},"#",[502,1556,533],{"class":512},[502,1558,975],{"class":512},[502,1560,1561],{"class":516},"This link is non-interactive",[502,1563,981],{"class":512},[502,1565,1544],{"class":948},[502,1567,964],{"class":512},[502,1569,1570,1572,1574],{"class":504,"line":601},[502,1571,981],{"class":512},[502,1573,1026],{"class":948},[502,1575,964],{"class":512},[1057,1577,1060],{"id":1578},"css-selector-1",[1062,1580,1581,1589],{},[1065,1582,1583],{},[1068,1584,1585,1587],{},[1071,1586,1073],{},[1071,1588,1060],{},[1077,1590,1591],{},[1068,1592,1593,1597],{},[1082,1594,1595],{},[422,1596,455],{},[1082,1598,1599],{},[422,1600,1601],{},"&:is([inert], [inert] *)",[1603,1604,1605,1097,1608,1610,1611,1613],"note",{},[440,1606,1607],{},"Good to know",[422,1609,455],{}," modifier targets both the inert element itself and all its descendants using ",[422,1612,1601],{},". This ensures that styles are applied consistently throughout the entire inert subtree.",[414,1615,1617],{"id":1616},"useotherstatemodifiers",[422,1618,1619],{},"useOtherStateModifiers",[418,1621,471,1622,1625],{},[422,1623,1624],{},"useOtherStateModifiers()"," function registers all other state modifiers at once and returns them as a destructurable object.",[1627,1628,1630],"h3",{"id":1629},"returned-modifiers","Returned Modifiers",[1062,1632,1633,1644],{},[1065,1634,1635],{},[1068,1636,1637,1640,1642],{},[1071,1638,1639],{},"Key",[1071,1641,1073],{},[1071,1643,1060],{},[1077,1645,1646,1660],{},[1068,1647,1648,1652,1656],{},[1082,1649,1650],{},[422,1651,481],{},[1082,1653,1654],{},[422,1655,481],{},[1082,1657,1658],{},[422,1659,1090],{},[1068,1661,1662,1666,1670],{},[1082,1663,1664],{},[422,1665,455],{},[1082,1667,1668],{},[422,1669,455],{},[1082,1671,1672],{},[422,1673,1601],{},[414,1675,1677],{"id":1676},"examples","Examples",[1627,1679,1681],{"id":1680},"animated-details-element","Animated Details Element",[484,1683,1684,1920],{},[487,1685,1686],{"icon":489,"label":490},[492,1687,1689],{"className":494,"code":1688,"filename":496,"language":497,"meta":498,"style":498},"import { styleframe } from \"styleframe\";\nimport { useRotateUtility, useTransitionDurationUtility } from \"@styleframe/theme\";\nimport { useOpenModifier, useMotionSafeModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst open = useOpenModifier(s);\nconst motionSafe = useMotionSafeModifier(s);\n\nuseRotateUtility(s, {\n    0: '0deg',\n    90: '90deg',\n}, [open]);\n\nuseTransitionDurationUtility(s, {\n    200: '200ms',\n}, [motionSafe]);\n\nexport default s;\n",[422,1690,1691,1711,1736,1761,1765,1779,1783,1797,1812,1816,1826,1842,1856,1864,1868,1879,1895,1904,1909],{"__ignoreMap":498},[502,1692,1693,1695,1697,1699,1701,1703,1705,1707,1709],{"class":504,"line":505},[502,1694,509],{"class":508},[502,1696,513],{"class":512},[502,1698,517],{"class":516},[502,1700,520],{"class":512},[502,1702,523],{"class":508},[502,1704,526],{"class":512},[502,1706,530],{"class":529},[502,1708,533],{"class":512},[502,1710,536],{"class":512},[502,1712,1713,1715,1717,1719,1721,1724,1726,1728,1730,1732,1734],{"class":504,"line":539},[502,1714,509],{"class":508},[502,1716,513],{"class":512},[502,1718,546],{"class":516},[502,1720,549],{"class":512},[502,1722,1723],{"class":516}," useTransitionDurationUtility",[502,1725,520],{"class":512},[502,1727,523],{"class":508},[502,1729,526],{"class":512},[502,1731,566],{"class":529},[502,1733,533],{"class":512},[502,1735,536],{"class":512},[502,1737,1738,1740,1742,1744,1746,1749,1751,1753,1755,1757,1759],{"class":504,"line":573},[502,1739,509],{"class":508},[502,1741,513],{"class":512},[502,1743,580],{"class":516},[502,1745,549],{"class":512},[502,1747,1748],{"class":516}," useMotionSafeModifier",[502,1750,520],{"class":512},[502,1752,523],{"class":508},[502,1754,526],{"class":512},[502,1756,566],{"class":529},[502,1758,533],{"class":512},[502,1760,536],{"class":512},[502,1762,1763],{"class":504,"line":595},[502,1764,598],{"emptyLinePlaceholder":206},[502,1766,1767,1769,1771,1773,1775,1777],{"class":504,"line":601},[502,1768,605],{"class":604},[502,1770,608],{"class":516},[502,1772,611],{"class":512},[502,1774,517],{"class":614},[502,1776,617],{"class":516},[502,1778,536],{"class":512},[502,1780,1781],{"class":504,"line":622},[502,1782,598],{"emptyLinePlaceholder":206},[502,1784,1785,1787,1789,1791,1793,1795],{"class":504,"line":627},[502,1786,605],{"class":604},[502,1788,632],{"class":516},[502,1790,611],{"class":512},[502,1792,580],{"class":614},[502,1794,639],{"class":516},[502,1796,536],{"class":512},[502,1798,1799,1801,1804,1806,1808,1810],{"class":504,"line":644},[502,1800,605],{"class":604},[502,1802,1803],{"class":516}," motionSafe ",[502,1805,611],{"class":512},[502,1807,1748],{"class":614},[502,1809,639],{"class":516},[502,1811,536],{"class":512},[502,1813,1814],{"class":504,"line":649},[502,1815,598],{"emptyLinePlaceholder":206},[502,1817,1818,1820,1822,1824],{"class":504,"line":663},[502,1819,652],{"class":614},[502,1821,655],{"class":516},[502,1823,549],{"class":512},[502,1825,660],{"class":512},[502,1827,1828,1831,1833,1835,1838,1840],{"class":504,"line":685},[502,1829,1830],{"class":666},"    0",[502,1832,670],{"class":512},[502,1834,673],{"class":512},[502,1836,1837],{"class":529},"0deg",[502,1839,679],{"class":512},[502,1841,682],{"class":512},[502,1843,1844,1846,1848,1850,1852,1854],{"class":504,"line":696},[502,1845,667],{"class":666},[502,1847,670],{"class":512},[502,1849,673],{"class":512},[502,1851,676],{"class":529},[502,1853,679],{"class":512},[502,1855,682],{"class":512},[502,1857,1858,1860,1862],{"class":504,"line":701},[502,1859,688],{"class":512},[502,1861,691],{"class":516},[502,1863,536],{"class":512},[502,1865,1866],{"class":504,"line":713},[502,1867,598],{"emptyLinePlaceholder":206},[502,1869,1870,1873,1875,1877],{"class":504,"line":730},[502,1871,1872],{"class":614},"useTransitionDurationUtility",[502,1874,655],{"class":516},[502,1876,549],{"class":512},[502,1878,660],{"class":512},[502,1880,1881,1884,1886,1888,1891,1893],{"class":504,"line":739},[502,1882,1883],{"class":666},"    200",[502,1885,670],{"class":512},[502,1887,673],{"class":512},[502,1889,1890],{"class":529},"200ms",[502,1892,679],{"class":512},[502,1894,682],{"class":512},[502,1896,1897,1899,1902],{"class":504,"line":744},[502,1898,688],{"class":512},[502,1900,1901],{"class":516}," [motionSafe])",[502,1903,536],{"class":512},[502,1905,1907],{"class":504,"line":1906},18,[502,1908,598],{"emptyLinePlaceholder":206},[502,1910,1912,1914,1916,1918],{"class":504,"line":1911},19,[502,1913,747],{"class":508},[502,1915,750],{"class":508},[502,1917,753],{"class":516},[502,1919,536],{"class":512},[487,1921,1922],{"icon":926,"label":927},[492,1923,1925],{"className":930,"code":1924,"language":932,"meta":498,"style":498},"\u003Cdetails>\n    \u003Csummary>\n        \u003Cspan class=\"_rotate:0 _open:rotate:90 _motion-safe:transition-duration:200\">\n            ▶\n        \u003C/span>\n        Toggle section\n    \u003C/summary>\n    \u003Cp>Section content revealed when opened.\u003C/p>\n\u003C/details>\n",[422,1926,1927,1935,1943,1963,1968,1977,1982,1991,2008],{"__ignoreMap":498},[502,1928,1929,1931,1933],{"class":504,"line":505},[502,1930,945],{"class":512},[502,1932,949],{"class":948},[502,1934,964],{"class":512},[502,1936,1937,1939,1941],{"class":504,"line":539},[502,1938,969],{"class":512},[502,1940,972],{"class":948},[502,1942,964],{"class":512},[502,1944,1945,1948,1950,1952,1954,1956,1959,1961],{"class":504,"line":573},[502,1946,1947],{"class":512},"        \u003C",[502,1949,502],{"class":948},[502,1951,952],{"class":604},[502,1953,611],{"class":512},[502,1955,533],{"class":512},[502,1957,1958],{"class":529},"_rotate:0 _open:rotate:90 _motion-safe:transition-duration:200",[502,1960,533],{"class":512},[502,1962,964],{"class":512},[502,1964,1965],{"class":504,"line":595},[502,1966,1967],{"class":516},"            ▶\n",[502,1969,1970,1973,1975],{"class":504,"line":601},[502,1971,1972],{"class":512},"        \u003C/",[502,1974,502],{"class":948},[502,1976,964],{"class":512},[502,1978,1979],{"class":504,"line":622},[502,1980,1981],{"class":516},"        Toggle section\n",[502,1983,1984,1987,1989],{"class":504,"line":627},[502,1985,1986],{"class":512},"    \u003C/",[502,1988,972],{"class":948},[502,1990,964],{"class":512},[502,1992,1993,1995,1997,1999,2002,2004,2006],{"class":504,"line":644},[502,1994,969],{"class":512},[502,1996,418],{"class":948},[502,1998,975],{"class":512},[502,2000,2001],{"class":516},"Section content revealed when opened.",[502,2003,981],{"class":512},[502,2005,418],{"class":948},[502,2007,964],{"class":512},[502,2009,2010,2012,2014],{"class":504,"line":649},[502,2011,981],{"class":512},[502,2013,949],{"class":948},[502,2015,964],{"class":512},[1627,2017,2019],{"id":2018},"modal-with-inert-background","Modal with Inert Background",[484,2021,2022,2219],{},[487,2023,2024],{"icon":489,"label":490},[492,2025,2027],{"className":494,"code":2026,"filename":496,"language":497,"meta":498,"style":498},"import { styleframe } from \"styleframe\";\nimport { useOpacityUtility, useBlurUtility } from \"@styleframe/theme\";\nimport { useInertModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst inert = useInertModifier(s);\n\nuseOpacityUtility(s, {\n    50: '0.5',\n}, [inert]);\n\nuseBlurUtility(s, {\n    sm: '4px',\n}, [inert]);\n\nexport default s;\n",[422,2028,2029,2049,2074,2094,2098,2112,2116,2130,2134,2144,2158,2166,2170,2181,2197,2205,2209],{"__ignoreMap":498},[502,2030,2031,2033,2035,2037,2039,2041,2043,2045,2047],{"class":504,"line":505},[502,2032,509],{"class":508},[502,2034,513],{"class":512},[502,2036,517],{"class":516},[502,2038,520],{"class":512},[502,2040,523],{"class":508},[502,2042,526],{"class":512},[502,2044,530],{"class":529},[502,2046,533],{"class":512},[502,2048,536],{"class":512},[502,2050,2051,2053,2055,2057,2059,2062,2064,2066,2068,2070,2072],{"class":504,"line":539},[502,2052,509],{"class":508},[502,2054,513],{"class":512},[502,2056,557],{"class":516},[502,2058,549],{"class":512},[502,2060,2061],{"class":516}," useBlurUtility",[502,2063,520],{"class":512},[502,2065,523],{"class":508},[502,2067,526],{"class":512},[502,2069,566],{"class":529},[502,2071,533],{"class":512},[502,2073,536],{"class":512},[502,2075,2076,2078,2080,2082,2084,2086,2088,2090,2092],{"class":504,"line":573},[502,2077,509],{"class":508},[502,2079,513],{"class":512},[502,2081,1192],{"class":516},[502,2083,520],{"class":512},[502,2085,523],{"class":508},[502,2087,526],{"class":512},[502,2089,566],{"class":529},[502,2091,533],{"class":512},[502,2093,536],{"class":512},[502,2095,2096],{"class":504,"line":595},[502,2097,598],{"emptyLinePlaceholder":206},[502,2099,2100,2102,2104,2106,2108,2110],{"class":504,"line":601},[502,2101,605],{"class":604},[502,2103,608],{"class":516},[502,2105,611],{"class":512},[502,2107,517],{"class":614},[502,2109,617],{"class":516},[502,2111,536],{"class":512},[502,2113,2114],{"class":504,"line":622},[502,2115,598],{"emptyLinePlaceholder":206},[502,2117,2118,2120,2122,2124,2126,2128],{"class":504,"line":627},[502,2119,605],{"class":604},[502,2121,1233],{"class":516},[502,2123,611],{"class":512},[502,2125,1192],{"class":614},[502,2127,639],{"class":516},[502,2129,536],{"class":512},[502,2131,2132],{"class":504,"line":644},[502,2133,598],{"emptyLinePlaceholder":206},[502,2135,2136,2138,2140,2142],{"class":504,"line":649},[502,2137,704],{"class":614},[502,2139,655],{"class":516},[502,2141,549],{"class":512},[502,2143,660],{"class":512},[502,2145,2146,2148,2150,2152,2154,2156],{"class":504,"line":663},[502,2147,1260],{"class":666},[502,2149,670],{"class":512},[502,2151,673],{"class":512},[502,2153,1267],{"class":529},[502,2155,679],{"class":512},[502,2157,682],{"class":512},[502,2159,2160,2162,2164],{"class":504,"line":685},[502,2161,688],{"class":512},[502,2163,1278],{"class":516},[502,2165,536],{"class":512},[502,2167,2168],{"class":504,"line":696},[502,2169,598],{"emptyLinePlaceholder":206},[502,2171,2172,2175,2177,2179],{"class":504,"line":701},[502,2173,2174],{"class":614},"useBlurUtility",[502,2176,655],{"class":516},[502,2178,549],{"class":512},[502,2180,660],{"class":512},[502,2182,2183,2186,2188,2190,2193,2195],{"class":504,"line":713},[502,2184,2185],{"class":948},"    sm",[502,2187,670],{"class":512},[502,2189,673],{"class":512},[502,2191,2192],{"class":529},"4px",[502,2194,679],{"class":512},[502,2196,682],{"class":512},[502,2198,2199,2201,2203],{"class":504,"line":730},[502,2200,688],{"class":512},[502,2202,1278],{"class":516},[502,2204,536],{"class":512},[502,2206,2207],{"class":504,"line":739},[502,2208,598],{"emptyLinePlaceholder":206},[502,2210,2211,2213,2215,2217],{"class":504,"line":744},[502,2212,747],{"class":508},[502,2214,750],{"class":508},[502,2216,753],{"class":516},[502,2218,536],{"class":512},[487,2220,2221],{"icon":926,"label":927},[492,2222,2224],{"className":930,"code":2223,"language":932,"meta":498,"style":498},"\u003C!-- Background content becomes inert when modal is open -->\n\u003Cmain inert class=\"_inert:opacity:50 _inert:blur:sm\">\n    \u003Cp>Page content (disabled while modal is open)\u003C/p>\n\u003C/main>\n\n\u003Cdialog open>\n    \u003Cp>Modal content (interactive)\u003C/p>\n\u003C/dialog>\n",[422,2225,2226,2231,2253,2270,2278,2282,2294,2311],{"__ignoreMap":498},[502,2227,2228],{"class":504,"line":505},[502,2229,2230],{"class":939},"\u003C!-- Background content becomes inert when modal is open -->\n",[502,2232,2233,2235,2238,2240,2242,2244,2246,2249,2251],{"class":504,"line":539},[502,2234,945],{"class":512},[502,2236,2237],{"class":948},"main",[502,2239,1506],{"class":604},[502,2241,952],{"class":604},[502,2243,611],{"class":512},[502,2245,533],{"class":512},[502,2247,2248],{"class":529},"_inert:opacity:50 _inert:blur:sm",[502,2250,533],{"class":512},[502,2252,964],{"class":512},[502,2254,2255,2257,2259,2261,2264,2266,2268],{"class":504,"line":573},[502,2256,969],{"class":512},[502,2258,418],{"class":948},[502,2260,975],{"class":512},[502,2262,2263],{"class":516},"Page content (disabled while modal is open)",[502,2265,981],{"class":512},[502,2267,418],{"class":948},[502,2269,964],{"class":512},[502,2271,2272,2274,2276],{"class":504,"line":595},[502,2273,981],{"class":512},[502,2275,2237],{"class":948},[502,2277,964],{"class":512},[502,2279,2280],{"class":504,"line":601},[502,2281,598],{"emptyLinePlaceholder":206},[502,2283,2284,2286,2289,2292],{"class":504,"line":622},[502,2285,945],{"class":512},[502,2287,2288],{"class":948},"dialog",[502,2290,2291],{"class":604}," open",[502,2293,964],{"class":512},[502,2295,2296,2298,2300,2302,2305,2307,2309],{"class":504,"line":627},[502,2297,969],{"class":512},[502,2299,418],{"class":948},[502,2301,975],{"class":512},[502,2303,2304],{"class":516},"Modal content (interactive)",[502,2306,981],{"class":512},[502,2308,418],{"class":948},[502,2310,964],{"class":512},[502,2312,2313,2315,2317],{"class":504,"line":644},[502,2314,981],{"class":512},[502,2316,2288],{"class":948},[502,2318,964],{"class":512},[414,2320,2322],{"id":2321},"best-practices","Best Practices",[434,2324,2325,2340,2351,2364],{},[437,2326,2327,2333,2334,2336,2337,2339],{},[440,2328,2329,2330,2332],{},"Use ",[422,2331,481],{}," for native disclosure patterns",": Style ",[422,2335,424],{}," and popover elements with the ",[422,2338,481],{}," modifier instead of JavaScript class toggling",[437,2341,2342,2347,2348,2350],{},[440,2343,2329,2344,2346],{},[422,2345,455],{}," for background content",": When showing modals or dialogs, apply ",[422,2349,455],{}," to background content for both accessibility and visual dimming",[437,2352,2353,2356,2357,2360,2361,2363],{},[440,2354,2355],{},"Combine with motion modifiers",": Use ",[422,2358,2359],{},"motion-safe"," with ",[422,2362,481],{}," transitions for accessible animated disclosure widgets",[437,2365,2366,1097,2369,2371],{},[440,2367,2368],{},"Test popover support",[422,2370,1113],{}," pseudo-class is a newer API; verify browser support for your target audience",[414,2373,2375],{"id":2374},"faq","FAQ",[2377,2378,2379,2397,2406],"accordion",{},[2380,2381,2384,2385,1100,2387,2389,2390,1107,2392,1110,2394,2396],"accordion-item",{"icon":2382,"label":2383},"i-lucide-circle-help","Does the open modifier work with the Popover API?","Yes! The ",[422,2386,481],{},[422,2388,1090],{}," which matches both the ",[422,2391,424],{},[422,2393,481],{},[422,2395,1113],{}," pseudo-class. This makes it work seamlessly with both patterns.",[2380,2398,471,2400,2402,2403,2405],{"icon":2382,"label":2399},"Why does the inert modifier target descendants too?",[422,2401,455],{}," attribute affects the entire subtree, making all descendants non-interactive. The modifier selector ",[422,2404,1601],{}," matches both the inert element and its children, ensuring consistent styling throughout the disabled region.",[2380,2407,2409,2410,2413,2414,2417,2418,2421,2422,2425],{"icon":2382,"label":2408},"Can I combine open with hover?","Yes! Passing ",[422,2411,2412],{},"[open, hover]"," generates ",[422,2415,2416],{},"_open:property:value",", ",[422,2419,2420],{},"_hover:property:value",", and ",[422,2423,2424],{},"_open:hover:property:value",". This allows for different hover effects when an element is open vs closed.",[2427,2428,2429],"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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":498,"searchDepth":539,"depth":539,"links":2431},[2432,2433,2434,2435,2436,2439,2443,2444],{"id":416,"depth":539,"text":64},{"id":428,"depth":539,"text":429},{"id":465,"depth":539,"text":468},{"id":1117,"depth":539,"text":1120},{"id":1616,"depth":539,"text":1619,"children":2437},[2438],{"id":1629,"depth":573,"text":1630},{"id":1676,"depth":539,"text":1677,"children":2440},[2441,2442],{"id":1680,"depth":573,"text":1681},{"id":2018,"depth":573,"text":2019},{"id":2321,"depth":539,"text":2322},{"id":2374,"depth":539,"text":2375},"Create other state modifiers for targeting open and inert elements with full type safety.","md",null,{},{"title":392,"icon":7},{"title":409,"description":2445},{"loc":393},"ggoor1Q3O303iGQuELiAhPH1Z3OgMPO0Zfs5F8ercg0",[2454,2456],{"title":388,"path":389,"stem":390,"description":2455,"icon":7,"children":-1},"Create media and preference modifiers for adaptive styling based on user preferences like dark mode, reduced motion, and more.",{"title":396,"path":397,"stem":398,"description":2457,"icon":7,"children":-1},"Create pseudo-element modifiers for targeting element sub-parts like before, after, placeholder, and selection with full type safety.",1776621151732]