[{"data":1,"prerenderedAt":2750},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-other-state":682,"-docs-theme-modifiers-other-state-surround":2745},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":2738,"extension":2739,"links":2740,"meta":2741,"navigation":2742,"path":664,"seo":2743,"stem":665,"__hash__":2744},"docs_theme\u002Fdocs\u002Ftheme\u002Fmodifiers\u002F06.other-state.md","Other State Modifiers",{"type":686,"value":687,"toc":2723},"minimark",[688,714,718,726,730,733,762,768,782,1352,1357,1387,1411,1417,1426,1871,1874,1897,1908,1913,1919,1924,1967,1971,1975,2309,2313,2612,2616,2665,2669,2719],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Modifiers Preset:"," ",[697,698,699],"code",{},"useOtherStateModifiers"," is included in the ",[702,703,704],"a",{"href":642},"Modifiers Preset"," (",[697,707,708],{},"useModifiersPreset",") and you can configure it through the preset's ",[697,711,712],{},"otherStates"," option. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721,722,725],"p",{},"Other state modifiers let you apply utility styles conditionally based on miscellaneous element states. They target elements that are open (like ",[697,723,724],{},"\u003Cdetails>"," and popovers) or inert (non-interactive), generating variant utility classes for these specific conditions.",[715,727,729],{"id":728},"why-use-other-state-modifiers","Why Use Other State Modifiers?",[719,731,732],{},"Other state modifiers help you:",[734,735,736,746,756],"ul",{},[737,738,739,742,743,745],"li",{},[692,740,741],{},"Style disclosure widgets",": Apply styles to open ",[697,744,724],{}," elements and popovers",[737,747,748,751,752,755],{},[692,749,750],{},"Handle inert state",": Style elements that are non-interactive due to the ",[697,753,754],{},"inert"," attribute",[737,757,758,761],{},[692,759,760],{},"Build accessible patterns",": Create visual feedback for native HTML patterns like disclosure and popover",[715,763,765],{"id":764},"useopenmodifier",[697,766,767],{},"useOpenModifier",[719,769,770,771,774,775,777,778,781],{},"The ",[697,772,773],{},"useOpenModifier()"," function creates a modifier that applies styles to elements that are in an open state. This includes ",[697,776,724],{}," elements with the ",[697,779,780],{},"open"," attribute and elements using the Popover API.",[783,784,785,1054,1221],"tabs",{},[786,787,789],"tabs-item",{"icon":788,"label":290},"i-lucide-code",[790,791,797],"pre",{"className":792,"code":793,"filename":794,"language":795,"meta":796,"style":796},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useRotateUtility, useDisplayUtility, useOpacityUtility } from \"@styleframe\u002Ftheme\";\nimport { useOpenModifier } from \"@styleframe\u002Ftheme\";\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","",[697,798,799,835,869,891,897,918,923,940,945,959,981,992,997,1009,1026,1035,1040],{"__ignoreMap":796},[800,801,804,808,812,816,819,822,825,829,832],"span",{"class":802,"line":803},"line",1,[800,805,807],{"class":806},"s7zQu","import",[800,809,811],{"class":810},"sMK4o"," {",[800,813,815],{"class":814},"sTEyZ"," styleframe",[800,817,818],{"class":810}," }",[800,820,821],{"class":806}," from",[800,823,824],{"class":810}," \"",[800,826,828],{"class":827},"sfazB","styleframe",[800,830,831],{"class":810},"\"",[800,833,834],{"class":810},";\n",[800,836,838,840,842,845,848,851,853,856,858,860,862,865,867],{"class":802,"line":837},2,[800,839,807],{"class":806},[800,841,811],{"class":810},[800,843,844],{"class":814}," useRotateUtility",[800,846,847],{"class":810},",",[800,849,850],{"class":814}," useDisplayUtility",[800,852,847],{"class":810},[800,854,855],{"class":814}," useOpacityUtility",[800,857,818],{"class":810},[800,859,821],{"class":806},[800,861,824],{"class":810},[800,863,864],{"class":827},"@styleframe\u002Ftheme",[800,866,831],{"class":810},[800,868,834],{"class":810},[800,870,872,874,876,879,881,883,885,887,889],{"class":802,"line":871},3,[800,873,807],{"class":806},[800,875,811],{"class":810},[800,877,878],{"class":814}," useOpenModifier",[800,880,818],{"class":810},[800,882,821],{"class":806},[800,884,824],{"class":810},[800,886,864],{"class":827},[800,888,831],{"class":810},[800,890,834],{"class":810},[800,892,894],{"class":802,"line":893},4,[800,895,896],{"emptyLinePlaceholder":223},"\n",[800,898,900,904,907,910,913,916],{"class":802,"line":899},5,[800,901,903],{"class":902},"spNyl","const",[800,905,906],{"class":814}," s ",[800,908,909],{"class":810},"=",[800,911,815],{"class":912},"s2Zo4",[800,914,915],{"class":814},"()",[800,917,834],{"class":810},[800,919,921],{"class":802,"line":920},6,[800,922,896],{"emptyLinePlaceholder":223},[800,924,926,928,931,933,935,938],{"class":802,"line":925},7,[800,927,903],{"class":902},[800,929,930],{"class":814}," open ",[800,932,909],{"class":810},[800,934,878],{"class":912},[800,936,937],{"class":814},"(s)",[800,939,834],{"class":810},[800,941,943],{"class":802,"line":942},8,[800,944,896],{"emptyLinePlaceholder":223},[800,946,948,951,954,956],{"class":802,"line":947},9,[800,949,950],{"class":912},"useRotateUtility",[800,952,953],{"class":814},"(s",[800,955,847],{"class":810},[800,957,958],{"class":810}," {\n",[800,960,962,966,969,972,975,978],{"class":802,"line":961},10,[800,963,965],{"class":964},"sbssI","    90",[800,967,968],{"class":810},":",[800,970,971],{"class":810}," '",[800,973,974],{"class":827},"90deg",[800,976,977],{"class":810},"'",[800,979,980],{"class":810},",\n",[800,982,984,987,990],{"class":802,"line":983},11,[800,985,986],{"class":810},"},",[800,988,989],{"class":814}," [open])",[800,991,834],{"class":810},[800,993,995],{"class":802,"line":994},12,[800,996,896],{"emptyLinePlaceholder":223},[800,998,1000,1003,1005,1007],{"class":802,"line":999},13,[800,1001,1002],{"class":912},"useOpacityUtility",[800,1004,953],{"class":814},[800,1006,847],{"class":810},[800,1008,958],{"class":810},[800,1010,1012,1015,1017,1019,1022,1024],{"class":802,"line":1011},14,[800,1013,1014],{"class":964},"    100",[800,1016,968],{"class":810},[800,1018,971],{"class":810},[800,1020,1021],{"class":827},"1",[800,1023,977],{"class":810},[800,1025,980],{"class":810},[800,1027,1029,1031,1033],{"class":802,"line":1028},15,[800,1030,986],{"class":810},[800,1032,989],{"class":814},[800,1034,834],{"class":810},[800,1036,1038],{"class":802,"line":1037},16,[800,1039,896],{"emptyLinePlaceholder":223},[800,1041,1043,1046,1049,1052],{"class":802,"line":1042},17,[800,1044,1045],{"class":806},"export",[800,1047,1048],{"class":806}," default",[800,1050,1051],{"class":814}," s",[800,1053,834],{"class":810},[786,1055,1056],{"icon":154,"label":326},[790,1057,1062],{"className":1058,"code":1059,"filename":1060,"language":1061,"meta":796,"style":796},"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\u002Findex.css","css",[697,1063,1064,1096,1122,1126,1144,1169,1174,1178,1195,1217],{"__ignoreMap":796},[800,1065,1066,1069,1073,1076,1079,1081,1085,1087,1090,1093],{"class":802,"line":803},[800,1067,1068],{"class":810},".",[800,1070,1072],{"class":1071},"sBMFI","_rotate",[800,1074,1075],{"class":814},"\\:",[800,1077,1078],{"class":1071},"90",[800,1080,811],{"class":810},[800,1082,1084],{"class":1083},"sqsOY"," rotate",[800,1086,968],{"class":810},[800,1088,1089],{"class":964}," 90deg",[800,1091,1092],{"class":810},";",[800,1094,1095],{"class":810}," }\n",[800,1097,1098,1100,1103,1105,1108,1110,1113,1115,1118,1120],{"class":802,"line":837},[800,1099,1068],{"class":810},[800,1101,1102],{"class":1071},"_opacity",[800,1104,1075],{"class":814},[800,1106,1107],{"class":1071},"100",[800,1109,811],{"class":810},[800,1111,1112],{"class":1083}," opacity",[800,1114,968],{"class":810},[800,1116,1117],{"class":964}," 1",[800,1119,1092],{"class":810},[800,1121,1095],{"class":810},[800,1123,1124],{"class":802,"line":871},[800,1125,896],{"emptyLinePlaceholder":223},[800,1127,1128,1130,1133,1135,1138,1140,1142],{"class":802,"line":893},[800,1129,1068],{"class":810},[800,1131,1132],{"class":1071},"_open",[800,1134,1075],{"class":814},[800,1136,1137],{"class":1071},"rotate",[800,1139,1075],{"class":814},[800,1141,1078],{"class":1071},[800,1143,958],{"class":810},[800,1145,1146,1149,1151,1154,1156,1159,1161,1163,1165,1167],{"class":802,"line":899},[800,1147,1148],{"class":814},"    &",[800,1150,968],{"class":810},[800,1152,1153],{"class":814},"is([open]",[800,1155,847],{"class":810},[800,1157,1158],{"class":814}," :popover-open) { ",[800,1160,1137],{"class":1083},[800,1162,968],{"class":810},[800,1164,1089],{"class":964},[800,1166,1092],{"class":810},[800,1168,1095],{"class":810},[800,1170,1171],{"class":802,"line":920},[800,1172,1173],{"class":814},"}\n",[800,1175,1176],{"class":802,"line":925},[800,1177,896],{"emptyLinePlaceholder":223},[800,1179,1180,1182,1184,1186,1189,1191,1193],{"class":802,"line":942},[800,1181,1068],{"class":810},[800,1183,1132],{"class":1071},[800,1185,1075],{"class":814},[800,1187,1188],{"class":1071},"opacity",[800,1190,1075],{"class":814},[800,1192,1107],{"class":1071},[800,1194,958],{"class":810},[800,1196,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215],{"class":802,"line":947},[800,1198,1148],{"class":814},[800,1200,968],{"class":810},[800,1202,1153],{"class":814},[800,1204,847],{"class":810},[800,1206,1158],{"class":814},[800,1208,1188],{"class":1083},[800,1210,968],{"class":810},[800,1212,1117],{"class":964},[800,1214,1092],{"class":810},[800,1216,1095],{"class":810},[800,1218,1219],{"class":802,"line":961},[800,1220,1173],{"class":814},[786,1222,1224],{"icon":520,"label":1223},"Usage",[790,1225,1229],{"className":1226,"code":1227,"language":1228,"meta":796,"style":796},"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\u002Fsummary>\n    \u003Cp>Expanded content here.\u003C\u002Fp>\n\u003C\u002Fdetails>\n\n\u003C!-- Style popover when open -->\n\u003Cdiv popover class=\"_opacity:100 _open:opacity:100\">\n    Popover content\n\u003C\u002Fdiv>\n","html",[697,1230,1231,1237,1261,1282,1299,1307,1311,1316,1339,1344],{"__ignoreMap":796},[800,1232,1233],{"class":802,"line":803},[800,1234,1236],{"class":1235},"sHwdD","\u003C!-- Rotate icon when details is open -->\n",[800,1238,1239,1242,1246,1249,1251,1253,1256,1258],{"class":802,"line":837},[800,1240,1241],{"class":810},"\u003C",[800,1243,1245],{"class":1244},"swJcz","details",[800,1247,1248],{"class":902}," class",[800,1250,909],{"class":810},[800,1252,831],{"class":810},[800,1254,1255],{"class":827},"_open:rotate:90",[800,1257,831],{"class":810},[800,1259,1260],{"class":810},">\n",[800,1262,1263,1266,1269,1272,1275,1278,1280],{"class":802,"line":871},[800,1264,1265],{"class":810},"    \u003C",[800,1267,1268],{"class":1244},"summary",[800,1270,1271],{"class":810},">",[800,1273,1274],{"class":814},"Click to expand",[800,1276,1277],{"class":810},"\u003C\u002F",[800,1279,1268],{"class":1244},[800,1281,1260],{"class":810},[800,1283,1284,1286,1288,1290,1293,1295,1297],{"class":802,"line":893},[800,1285,1265],{"class":810},[800,1287,719],{"class":1244},[800,1289,1271],{"class":810},[800,1291,1292],{"class":814},"Expanded content here.",[800,1294,1277],{"class":810},[800,1296,719],{"class":1244},[800,1298,1260],{"class":810},[800,1300,1301,1303,1305],{"class":802,"line":899},[800,1302,1277],{"class":810},[800,1304,1245],{"class":1244},[800,1306,1260],{"class":810},[800,1308,1309],{"class":802,"line":920},[800,1310,896],{"emptyLinePlaceholder":223},[800,1312,1313],{"class":802,"line":925},[800,1314,1315],{"class":1235},"\u003C!-- Style popover when open -->\n",[800,1317,1318,1320,1323,1326,1328,1330,1332,1335,1337],{"class":802,"line":942},[800,1319,1241],{"class":810},[800,1321,1322],{"class":1244},"div",[800,1324,1325],{"class":902}," popover",[800,1327,1248],{"class":902},[800,1329,909],{"class":810},[800,1331,831],{"class":810},[800,1333,1334],{"class":827},"_opacity:100 _open:opacity:100",[800,1336,831],{"class":810},[800,1338,1260],{"class":810},[800,1340,1341],{"class":802,"line":947},[800,1342,1343],{"class":814},"    Popover content\n",[800,1345,1346,1348,1350],{"class":802,"line":961},[800,1347,1277],{"class":810},[800,1349,1322],{"class":1244},[800,1351,1260],{"class":810},[1353,1354,1356],"h4",{"id":1355},"css-selector","CSS Selector",[1358,1359,1360,1372],"table",{},[1361,1362,1363],"thead",{},[1364,1365,1366,1370],"tr",{},[1367,1368,1369],"th",{},"Modifier Name",[1367,1371,1356],{},[1373,1374,1375],"tbody",{},[1364,1376,1377,1382],{},[1378,1379,1380],"td",{},[697,1381,780],{},[1378,1383,1384],{},[697,1385,1386],{},"&:is([open], :popover-open)",[1388,1389,1390,1393,1394,1396,1397,1400,1401,1403,1404,1406,1407,1410],"tip",{},[692,1391,1392],{},"Pro tip",": The ",[697,1395,780],{}," modifier uses ",[697,1398,1399],{},":is([open], :popover-open)"," to match both the ",[697,1402,724],{}," element's ",[697,1405,780],{}," attribute and the Popover API's ",[697,1408,1409],{},":popover-open"," pseudo-class, giving you a single modifier for both patterns.",[715,1412,1414],{"id":1413},"useinertmodifier",[697,1415,1416],{},"useInertModifier",[719,1418,770,1419,1422,1423,1425],{},[697,1420,1421],{},"useInertModifier()"," function creates a modifier that applies styles to inert elements and their descendants. The ",[697,1424,754],{}," HTML attribute makes an element and all its descendants non-interactive and invisible to assistive technology.",[783,1427,1428,1630,1782],{},[786,1429,1430],{"icon":788,"label":290},[790,1431,1433],{"className":792,"code":1432,"filename":794,"language":795,"meta":796,"style":796},"import { styleframe } from \"styleframe\";\nimport { useOpacityUtility, usePointerEventsUtility } from \"@styleframe\u002Ftheme\";\nimport { useInertModifier } from \"@styleframe\u002Ftheme\";\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",[697,1434,1435,1455,1480,1501,1505,1519,1523,1538,1542,1552,1568,1577,1581,1592,1608,1616,1620],{"__ignoreMap":796},[800,1436,1437,1439,1441,1443,1445,1447,1449,1451,1453],{"class":802,"line":803},[800,1438,807],{"class":806},[800,1440,811],{"class":810},[800,1442,815],{"class":814},[800,1444,818],{"class":810},[800,1446,821],{"class":806},[800,1448,824],{"class":810},[800,1450,828],{"class":827},[800,1452,831],{"class":810},[800,1454,834],{"class":810},[800,1456,1457,1459,1461,1463,1465,1468,1470,1472,1474,1476,1478],{"class":802,"line":837},[800,1458,807],{"class":806},[800,1460,811],{"class":810},[800,1462,855],{"class":814},[800,1464,847],{"class":810},[800,1466,1467],{"class":814}," usePointerEventsUtility",[800,1469,818],{"class":810},[800,1471,821],{"class":806},[800,1473,824],{"class":810},[800,1475,864],{"class":827},[800,1477,831],{"class":810},[800,1479,834],{"class":810},[800,1481,1482,1484,1486,1489,1491,1493,1495,1497,1499],{"class":802,"line":871},[800,1483,807],{"class":806},[800,1485,811],{"class":810},[800,1487,1488],{"class":814}," useInertModifier",[800,1490,818],{"class":810},[800,1492,821],{"class":806},[800,1494,824],{"class":810},[800,1496,864],{"class":827},[800,1498,831],{"class":810},[800,1500,834],{"class":810},[800,1502,1503],{"class":802,"line":893},[800,1504,896],{"emptyLinePlaceholder":223},[800,1506,1507,1509,1511,1513,1515,1517],{"class":802,"line":899},[800,1508,903],{"class":902},[800,1510,906],{"class":814},[800,1512,909],{"class":810},[800,1514,815],{"class":912},[800,1516,915],{"class":814},[800,1518,834],{"class":810},[800,1520,1521],{"class":802,"line":920},[800,1522,896],{"emptyLinePlaceholder":223},[800,1524,1525,1527,1530,1532,1534,1536],{"class":802,"line":925},[800,1526,903],{"class":902},[800,1528,1529],{"class":814}," inert ",[800,1531,909],{"class":810},[800,1533,1488],{"class":912},[800,1535,937],{"class":814},[800,1537,834],{"class":810},[800,1539,1540],{"class":802,"line":942},[800,1541,896],{"emptyLinePlaceholder":223},[800,1543,1544,1546,1548,1550],{"class":802,"line":947},[800,1545,1002],{"class":912},[800,1547,953],{"class":814},[800,1549,847],{"class":810},[800,1551,958],{"class":810},[800,1553,1554,1557,1559,1561,1564,1566],{"class":802,"line":961},[800,1555,1556],{"class":964},"    50",[800,1558,968],{"class":810},[800,1560,971],{"class":810},[800,1562,1563],{"class":827},"0.5",[800,1565,977],{"class":810},[800,1567,980],{"class":810},[800,1569,1570,1572,1575],{"class":802,"line":983},[800,1571,986],{"class":810},[800,1573,1574],{"class":814}," [inert])",[800,1576,834],{"class":810},[800,1578,1579],{"class":802,"line":994},[800,1580,896],{"emptyLinePlaceholder":223},[800,1582,1583,1586,1588,1590],{"class":802,"line":999},[800,1584,1585],{"class":912},"usePointerEventsUtility",[800,1587,953],{"class":814},[800,1589,847],{"class":810},[800,1591,958],{"class":810},[800,1593,1594,1597,1599,1601,1604,1606],{"class":802,"line":1011},[800,1595,1596],{"class":1244},"    none",[800,1598,968],{"class":810},[800,1600,971],{"class":810},[800,1602,1603],{"class":827},"none",[800,1605,977],{"class":810},[800,1607,980],{"class":810},[800,1609,1610,1612,1614],{"class":802,"line":1028},[800,1611,986],{"class":810},[800,1613,1574],{"class":814},[800,1615,834],{"class":810},[800,1617,1618],{"class":802,"line":1037},[800,1619,896],{"emptyLinePlaceholder":223},[800,1621,1622,1624,1626,1628],{"class":802,"line":1042},[800,1623,1045],{"class":806},[800,1625,1048],{"class":806},[800,1627,1051],{"class":814},[800,1629,834],{"class":810},[786,1631,1632],{"icon":154,"label":326},[790,1633,1635],{"className":1058,"code":1634,"filename":1060,"language":1061,"meta":796,"style":796},"._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",[697,1636,1637,1661,1686,1690,1707,1731,1735,1739,1756,1778],{"__ignoreMap":796},[800,1638,1639,1641,1643,1645,1648,1650,1652,1654,1657,1659],{"class":802,"line":803},[800,1640,1068],{"class":810},[800,1642,1102],{"class":1071},[800,1644,1075],{"class":814},[800,1646,1647],{"class":1071},"50",[800,1649,811],{"class":810},[800,1651,1112],{"class":1083},[800,1653,968],{"class":810},[800,1655,1656],{"class":964}," 0.5",[800,1658,1092],{"class":810},[800,1660,1095],{"class":810},[800,1662,1663,1665,1668,1670,1672,1674,1677,1679,1682,1684],{"class":802,"line":837},[800,1664,1068],{"class":810},[800,1666,1667],{"class":1071},"_pointer-events",[800,1669,1075],{"class":814},[800,1671,1603],{"class":1071},[800,1673,811],{"class":810},[800,1675,1676],{"class":1083}," pointer-events",[800,1678,968],{"class":810},[800,1680,1681],{"class":814}," none",[800,1683,1092],{"class":810},[800,1685,1095],{"class":810},[800,1687,1688],{"class":802,"line":871},[800,1689,896],{"emptyLinePlaceholder":223},[800,1691,1692,1694,1697,1699,1701,1703,1705],{"class":802,"line":893},[800,1693,1068],{"class":810},[800,1695,1696],{"class":1071},"_inert",[800,1698,1075],{"class":814},[800,1700,1188],{"class":1071},[800,1702,1075],{"class":814},[800,1704,1647],{"class":1071},[800,1706,958],{"class":810},[800,1708,1709,1711,1713,1716,1718,1721,1723,1725,1727,1729],{"class":802,"line":899},[800,1710,1148],{"class":814},[800,1712,968],{"class":810},[800,1714,1715],{"class":814},"is([inert]",[800,1717,847],{"class":810},[800,1719,1720],{"class":814}," [inert] *) { ",[800,1722,1188],{"class":1083},[800,1724,968],{"class":810},[800,1726,1656],{"class":964},[800,1728,1092],{"class":810},[800,1730,1095],{"class":810},[800,1732,1733],{"class":802,"line":920},[800,1734,1173],{"class":814},[800,1736,1737],{"class":802,"line":925},[800,1738,896],{"emptyLinePlaceholder":223},[800,1740,1741,1743,1745,1747,1750,1752,1754],{"class":802,"line":942},[800,1742,1068],{"class":810},[800,1744,1696],{"class":1071},[800,1746,1075],{"class":814},[800,1748,1749],{"class":1071},"pointer-events",[800,1751,1075],{"class":814},[800,1753,1603],{"class":1071},[800,1755,958],{"class":810},[800,1757,1758,1760,1762,1764,1766,1768,1770,1772,1774,1776],{"class":802,"line":947},[800,1759,1148],{"class":814},[800,1761,968],{"class":810},[800,1763,1715],{"class":814},[800,1765,847],{"class":810},[800,1767,1720],{"class":814},[800,1769,1749],{"class":1083},[800,1771,968],{"class":810},[800,1773,1681],{"class":814},[800,1775,1092],{"class":810},[800,1777,1095],{"class":810},[800,1779,1780],{"class":802,"line":961},[800,1781,1173],{"class":814},[786,1783,1784],{"icon":520,"label":1223},[790,1785,1787],{"className":1226,"code":1786,"language":1228,"meta":796,"style":796},"\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\u002Fbutton>\n    \u003Ca href=\"#\">This link is non-interactive\u003C\u002Fa>\n\u003C\u002Fdiv>\n",[697,1788,1789,1794,1816,1834,1863],{"__ignoreMap":796},[800,1790,1791],{"class":802,"line":803},[800,1792,1793],{"class":1235},"\u003C!-- Dim and disable interaction for inert content -->\n",[800,1795,1796,1798,1800,1803,1805,1807,1809,1812,1814],{"class":802,"line":837},[800,1797,1241],{"class":810},[800,1799,1322],{"class":1244},[800,1801,1802],{"class":902}," inert",[800,1804,1248],{"class":902},[800,1806,909],{"class":810},[800,1808,831],{"class":810},[800,1810,1811],{"class":827},"_inert:opacity:50 _inert:pointer-events:none",[800,1813,831],{"class":810},[800,1815,1260],{"class":810},[800,1817,1818,1820,1823,1825,1828,1830,1832],{"class":802,"line":871},[800,1819,1265],{"class":810},[800,1821,1822],{"class":1244},"button",[800,1824,1271],{"class":810},[800,1826,1827],{"class":814},"This button is non-interactive",[800,1829,1277],{"class":810},[800,1831,1822],{"class":1244},[800,1833,1260],{"class":810},[800,1835,1836,1838,1840,1843,1845,1847,1850,1852,1854,1857,1859,1861],{"class":802,"line":893},[800,1837,1265],{"class":810},[800,1839,702],{"class":1244},[800,1841,1842],{"class":902}," href",[800,1844,909],{"class":810},[800,1846,831],{"class":810},[800,1848,1849],{"class":827},"#",[800,1851,831],{"class":810},[800,1853,1271],{"class":810},[800,1855,1856],{"class":814},"This link is non-interactive",[800,1858,1277],{"class":810},[800,1860,702],{"class":1244},[800,1862,1260],{"class":810},[800,1864,1865,1867,1869],{"class":802,"line":899},[800,1866,1277],{"class":810},[800,1868,1322],{"class":1244},[800,1870,1260],{"class":810},[1353,1872,1356],{"id":1873},"css-selector-1",[1358,1875,1876,1884],{},[1361,1877,1878],{},[1364,1879,1880,1882],{},[1367,1881,1369],{},[1367,1883,1356],{},[1373,1885,1886],{},[1364,1887,1888,1892],{},[1378,1889,1890],{},[697,1891,754],{},[1378,1893,1894],{},[697,1895,1896],{},"&:is([inert], [inert] *)",[689,1898,1899,1393,1902,1904,1905,1907],{},[692,1900,1901],{},"Good to know",[697,1903,754],{}," modifier targets both the inert element itself and all its descendants using ",[697,1906,1896],{},". This ensures that styles are applied consistently throughout the entire inert subtree.",[715,1909,1911],{"id":1910},"useotherstatemodifiers",[697,1912,699],{},[719,1914,770,1915,1918],{},[697,1916,1917],{},"useOtherStateModifiers()"," function registers all other state modifiers at once and returns them as a destructurable object.",[1920,1921,1923],"h3",{"id":1922},"returned-modifiers","Returned Modifiers",[1358,1925,1926,1937],{},[1361,1927,1928],{},[1364,1929,1930,1933,1935],{},[1367,1931,1932],{},"Key",[1367,1934,1369],{},[1367,1936,1356],{},[1373,1938,1939,1953],{},[1364,1940,1941,1945,1949],{},[1378,1942,1943],{},[697,1944,780],{},[1378,1946,1947],{},[697,1948,780],{},[1378,1950,1951],{},[697,1952,1386],{},[1364,1954,1955,1959,1963],{},[1378,1956,1957],{},[697,1958,754],{},[1378,1960,1961],{},[697,1962,754],{},[1378,1964,1965],{},[697,1966,1896],{},[715,1968,1970],{"id":1969},"examples","Examples",[1920,1972,1974],{"id":1973},"animated-details-element","Animated Details Element",[783,1976,1977,2213],{},[786,1978,1979],{"icon":788,"label":290},[790,1980,1982],{"className":792,"code":1981,"filename":794,"language":795,"meta":796,"style":796},"import { styleframe } from \"styleframe\";\nimport { useRotateUtility, useTransitionDurationUtility } from \"@styleframe\u002Ftheme\";\nimport { useOpenModifier, useMotionSafeModifier } from \"@styleframe\u002Ftheme\";\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",[697,1983,1984,2004,2029,2054,2058,2072,2076,2090,2105,2109,2119,2135,2149,2157,2161,2172,2188,2197,2202],{"__ignoreMap":796},[800,1985,1986,1988,1990,1992,1994,1996,1998,2000,2002],{"class":802,"line":803},[800,1987,807],{"class":806},[800,1989,811],{"class":810},[800,1991,815],{"class":814},[800,1993,818],{"class":810},[800,1995,821],{"class":806},[800,1997,824],{"class":810},[800,1999,828],{"class":827},[800,2001,831],{"class":810},[800,2003,834],{"class":810},[800,2005,2006,2008,2010,2012,2014,2017,2019,2021,2023,2025,2027],{"class":802,"line":837},[800,2007,807],{"class":806},[800,2009,811],{"class":810},[800,2011,844],{"class":814},[800,2013,847],{"class":810},[800,2015,2016],{"class":814}," useTransitionDurationUtility",[800,2018,818],{"class":810},[800,2020,821],{"class":806},[800,2022,824],{"class":810},[800,2024,864],{"class":827},[800,2026,831],{"class":810},[800,2028,834],{"class":810},[800,2030,2031,2033,2035,2037,2039,2042,2044,2046,2048,2050,2052],{"class":802,"line":871},[800,2032,807],{"class":806},[800,2034,811],{"class":810},[800,2036,878],{"class":814},[800,2038,847],{"class":810},[800,2040,2041],{"class":814}," useMotionSafeModifier",[800,2043,818],{"class":810},[800,2045,821],{"class":806},[800,2047,824],{"class":810},[800,2049,864],{"class":827},[800,2051,831],{"class":810},[800,2053,834],{"class":810},[800,2055,2056],{"class":802,"line":893},[800,2057,896],{"emptyLinePlaceholder":223},[800,2059,2060,2062,2064,2066,2068,2070],{"class":802,"line":899},[800,2061,903],{"class":902},[800,2063,906],{"class":814},[800,2065,909],{"class":810},[800,2067,815],{"class":912},[800,2069,915],{"class":814},[800,2071,834],{"class":810},[800,2073,2074],{"class":802,"line":920},[800,2075,896],{"emptyLinePlaceholder":223},[800,2077,2078,2080,2082,2084,2086,2088],{"class":802,"line":925},[800,2079,903],{"class":902},[800,2081,930],{"class":814},[800,2083,909],{"class":810},[800,2085,878],{"class":912},[800,2087,937],{"class":814},[800,2089,834],{"class":810},[800,2091,2092,2094,2097,2099,2101,2103],{"class":802,"line":942},[800,2093,903],{"class":902},[800,2095,2096],{"class":814}," motionSafe ",[800,2098,909],{"class":810},[800,2100,2041],{"class":912},[800,2102,937],{"class":814},[800,2104,834],{"class":810},[800,2106,2107],{"class":802,"line":947},[800,2108,896],{"emptyLinePlaceholder":223},[800,2110,2111,2113,2115,2117],{"class":802,"line":961},[800,2112,950],{"class":912},[800,2114,953],{"class":814},[800,2116,847],{"class":810},[800,2118,958],{"class":810},[800,2120,2121,2124,2126,2128,2131,2133],{"class":802,"line":983},[800,2122,2123],{"class":964},"    0",[800,2125,968],{"class":810},[800,2127,971],{"class":810},[800,2129,2130],{"class":827},"0deg",[800,2132,977],{"class":810},[800,2134,980],{"class":810},[800,2136,2137,2139,2141,2143,2145,2147],{"class":802,"line":994},[800,2138,965],{"class":964},[800,2140,968],{"class":810},[800,2142,971],{"class":810},[800,2144,974],{"class":827},[800,2146,977],{"class":810},[800,2148,980],{"class":810},[800,2150,2151,2153,2155],{"class":802,"line":999},[800,2152,986],{"class":810},[800,2154,989],{"class":814},[800,2156,834],{"class":810},[800,2158,2159],{"class":802,"line":1011},[800,2160,896],{"emptyLinePlaceholder":223},[800,2162,2163,2166,2168,2170],{"class":802,"line":1028},[800,2164,2165],{"class":912},"useTransitionDurationUtility",[800,2167,953],{"class":814},[800,2169,847],{"class":810},[800,2171,958],{"class":810},[800,2173,2174,2177,2179,2181,2184,2186],{"class":802,"line":1037},[800,2175,2176],{"class":964},"    200",[800,2178,968],{"class":810},[800,2180,971],{"class":810},[800,2182,2183],{"class":827},"200ms",[800,2185,977],{"class":810},[800,2187,980],{"class":810},[800,2189,2190,2192,2195],{"class":802,"line":1042},[800,2191,986],{"class":810},[800,2193,2194],{"class":814}," [motionSafe])",[800,2196,834],{"class":810},[800,2198,2200],{"class":802,"line":2199},18,[800,2201,896],{"emptyLinePlaceholder":223},[800,2203,2205,2207,2209,2211],{"class":802,"line":2204},19,[800,2206,1045],{"class":806},[800,2208,1048],{"class":806},[800,2210,1051],{"class":814},[800,2212,834],{"class":810},[786,2214,2215],{"icon":520,"label":1223},[790,2216,2218],{"className":1226,"code":2217,"language":1228,"meta":796,"style":796},"\u003Cdetails>\n    \u003Csummary>\n        \u003Cspan class=\"_rotate:0 _open:rotate:90 _motion-safe:transition-duration:200\">\n            ▶\n        \u003C\u002Fspan>\n        Toggle section\n    \u003C\u002Fsummary>\n    \u003Cp>Section content revealed when opened.\u003C\u002Fp>\n\u003C\u002Fdetails>\n",[697,2219,2220,2228,2236,2256,2261,2270,2275,2284,2301],{"__ignoreMap":796},[800,2221,2222,2224,2226],{"class":802,"line":803},[800,2223,1241],{"class":810},[800,2225,1245],{"class":1244},[800,2227,1260],{"class":810},[800,2229,2230,2232,2234],{"class":802,"line":837},[800,2231,1265],{"class":810},[800,2233,1268],{"class":1244},[800,2235,1260],{"class":810},[800,2237,2238,2241,2243,2245,2247,2249,2252,2254],{"class":802,"line":871},[800,2239,2240],{"class":810},"        \u003C",[800,2242,800],{"class":1244},[800,2244,1248],{"class":902},[800,2246,909],{"class":810},[800,2248,831],{"class":810},[800,2250,2251],{"class":827},"_rotate:0 _open:rotate:90 _motion-safe:transition-duration:200",[800,2253,831],{"class":810},[800,2255,1260],{"class":810},[800,2257,2258],{"class":802,"line":893},[800,2259,2260],{"class":814},"            ▶\n",[800,2262,2263,2266,2268],{"class":802,"line":899},[800,2264,2265],{"class":810},"        \u003C\u002F",[800,2267,800],{"class":1244},[800,2269,1260],{"class":810},[800,2271,2272],{"class":802,"line":920},[800,2273,2274],{"class":814},"        Toggle section\n",[800,2276,2277,2280,2282],{"class":802,"line":925},[800,2278,2279],{"class":810},"    \u003C\u002F",[800,2281,1268],{"class":1244},[800,2283,1260],{"class":810},[800,2285,2286,2288,2290,2292,2295,2297,2299],{"class":802,"line":942},[800,2287,1265],{"class":810},[800,2289,719],{"class":1244},[800,2291,1271],{"class":810},[800,2293,2294],{"class":814},"Section content revealed when opened.",[800,2296,1277],{"class":810},[800,2298,719],{"class":1244},[800,2300,1260],{"class":810},[800,2302,2303,2305,2307],{"class":802,"line":947},[800,2304,1277],{"class":810},[800,2306,1245],{"class":1244},[800,2308,1260],{"class":810},[1920,2310,2312],{"id":2311},"modal-with-inert-background","Modal with Inert Background",[783,2314,2315,2512],{},[786,2316,2317],{"icon":788,"label":290},[790,2318,2320],{"className":792,"code":2319,"filename":794,"language":795,"meta":796,"style":796},"import { styleframe } from \"styleframe\";\nimport { useOpacityUtility, useBlurUtility } from \"@styleframe\u002Ftheme\";\nimport { useInertModifier } from \"@styleframe\u002Ftheme\";\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",[697,2321,2322,2342,2367,2387,2391,2405,2409,2423,2427,2437,2451,2459,2463,2474,2490,2498,2502],{"__ignoreMap":796},[800,2323,2324,2326,2328,2330,2332,2334,2336,2338,2340],{"class":802,"line":803},[800,2325,807],{"class":806},[800,2327,811],{"class":810},[800,2329,815],{"class":814},[800,2331,818],{"class":810},[800,2333,821],{"class":806},[800,2335,824],{"class":810},[800,2337,828],{"class":827},[800,2339,831],{"class":810},[800,2341,834],{"class":810},[800,2343,2344,2346,2348,2350,2352,2355,2357,2359,2361,2363,2365],{"class":802,"line":837},[800,2345,807],{"class":806},[800,2347,811],{"class":810},[800,2349,855],{"class":814},[800,2351,847],{"class":810},[800,2353,2354],{"class":814}," useBlurUtility",[800,2356,818],{"class":810},[800,2358,821],{"class":806},[800,2360,824],{"class":810},[800,2362,864],{"class":827},[800,2364,831],{"class":810},[800,2366,834],{"class":810},[800,2368,2369,2371,2373,2375,2377,2379,2381,2383,2385],{"class":802,"line":871},[800,2370,807],{"class":806},[800,2372,811],{"class":810},[800,2374,1488],{"class":814},[800,2376,818],{"class":810},[800,2378,821],{"class":806},[800,2380,824],{"class":810},[800,2382,864],{"class":827},[800,2384,831],{"class":810},[800,2386,834],{"class":810},[800,2388,2389],{"class":802,"line":893},[800,2390,896],{"emptyLinePlaceholder":223},[800,2392,2393,2395,2397,2399,2401,2403],{"class":802,"line":899},[800,2394,903],{"class":902},[800,2396,906],{"class":814},[800,2398,909],{"class":810},[800,2400,815],{"class":912},[800,2402,915],{"class":814},[800,2404,834],{"class":810},[800,2406,2407],{"class":802,"line":920},[800,2408,896],{"emptyLinePlaceholder":223},[800,2410,2411,2413,2415,2417,2419,2421],{"class":802,"line":925},[800,2412,903],{"class":902},[800,2414,1529],{"class":814},[800,2416,909],{"class":810},[800,2418,1488],{"class":912},[800,2420,937],{"class":814},[800,2422,834],{"class":810},[800,2424,2425],{"class":802,"line":942},[800,2426,896],{"emptyLinePlaceholder":223},[800,2428,2429,2431,2433,2435],{"class":802,"line":947},[800,2430,1002],{"class":912},[800,2432,953],{"class":814},[800,2434,847],{"class":810},[800,2436,958],{"class":810},[800,2438,2439,2441,2443,2445,2447,2449],{"class":802,"line":961},[800,2440,1556],{"class":964},[800,2442,968],{"class":810},[800,2444,971],{"class":810},[800,2446,1563],{"class":827},[800,2448,977],{"class":810},[800,2450,980],{"class":810},[800,2452,2453,2455,2457],{"class":802,"line":983},[800,2454,986],{"class":810},[800,2456,1574],{"class":814},[800,2458,834],{"class":810},[800,2460,2461],{"class":802,"line":994},[800,2462,896],{"emptyLinePlaceholder":223},[800,2464,2465,2468,2470,2472],{"class":802,"line":999},[800,2466,2467],{"class":912},"useBlurUtility",[800,2469,953],{"class":814},[800,2471,847],{"class":810},[800,2473,958],{"class":810},[800,2475,2476,2479,2481,2483,2486,2488],{"class":802,"line":1011},[800,2477,2478],{"class":1244},"    sm",[800,2480,968],{"class":810},[800,2482,971],{"class":810},[800,2484,2485],{"class":827},"4px",[800,2487,977],{"class":810},[800,2489,980],{"class":810},[800,2491,2492,2494,2496],{"class":802,"line":1028},[800,2493,986],{"class":810},[800,2495,1574],{"class":814},[800,2497,834],{"class":810},[800,2499,2500],{"class":802,"line":1037},[800,2501,896],{"emptyLinePlaceholder":223},[800,2503,2504,2506,2508,2510],{"class":802,"line":1042},[800,2505,1045],{"class":806},[800,2507,1048],{"class":806},[800,2509,1051],{"class":814},[800,2511,834],{"class":810},[786,2513,2514],{"icon":520,"label":1223},[790,2515,2517],{"className":1226,"code":2516,"language":1228,"meta":796,"style":796},"\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\u002Fp>\n\u003C\u002Fmain>\n\n\u003Cdialog open>\n    \u003Cp>Modal content (interactive)\u003C\u002Fp>\n\u003C\u002Fdialog>\n",[697,2518,2519,2524,2546,2563,2571,2575,2587,2604],{"__ignoreMap":796},[800,2520,2521],{"class":802,"line":803},[800,2522,2523],{"class":1235},"\u003C!-- Background content becomes inert when modal is open -->\n",[800,2525,2526,2528,2531,2533,2535,2537,2539,2542,2544],{"class":802,"line":837},[800,2527,1241],{"class":810},[800,2529,2530],{"class":1244},"main",[800,2532,1802],{"class":902},[800,2534,1248],{"class":902},[800,2536,909],{"class":810},[800,2538,831],{"class":810},[800,2540,2541],{"class":827},"_inert:opacity:50 _inert:blur:sm",[800,2543,831],{"class":810},[800,2545,1260],{"class":810},[800,2547,2548,2550,2552,2554,2557,2559,2561],{"class":802,"line":871},[800,2549,1265],{"class":810},[800,2551,719],{"class":1244},[800,2553,1271],{"class":810},[800,2555,2556],{"class":814},"Page content (disabled while modal is open)",[800,2558,1277],{"class":810},[800,2560,719],{"class":1244},[800,2562,1260],{"class":810},[800,2564,2565,2567,2569],{"class":802,"line":893},[800,2566,1277],{"class":810},[800,2568,2530],{"class":1244},[800,2570,1260],{"class":810},[800,2572,2573],{"class":802,"line":899},[800,2574,896],{"emptyLinePlaceholder":223},[800,2576,2577,2579,2582,2585],{"class":802,"line":920},[800,2578,1241],{"class":810},[800,2580,2581],{"class":1244},"dialog",[800,2583,2584],{"class":902}," open",[800,2586,1260],{"class":810},[800,2588,2589,2591,2593,2595,2598,2600,2602],{"class":802,"line":925},[800,2590,1265],{"class":810},[800,2592,719],{"class":1244},[800,2594,1271],{"class":810},[800,2596,2597],{"class":814},"Modal content (interactive)",[800,2599,1277],{"class":810},[800,2601,719],{"class":1244},[800,2603,1260],{"class":810},[800,2605,2606,2608,2610],{"class":802,"line":942},[800,2607,1277],{"class":810},[800,2609,2581],{"class":1244},[800,2611,1260],{"class":810},[715,2613,2615],{"id":2614},"best-practices","Best Practices",[734,2617,2618,2633,2644,2657],{},[737,2619,2620,2626,2627,2629,2630,2632],{},[692,2621,2622,2623,2625],{},"Use ",[697,2624,780],{}," for native disclosure patterns",": Style ",[697,2628,724],{}," and popover elements with the ",[697,2631,780],{}," modifier instead of JavaScript class toggling",[737,2634,2635,2640,2641,2643],{},[692,2636,2622,2637,2639],{},[697,2638,754],{}," for background content",": When showing modals or dialogs, apply ",[697,2642,754],{}," to background content for both accessibility and visual dimming",[737,2645,2646,2649,2650,2653,2654,2656],{},[692,2647,2648],{},"Combine with motion modifiers",": Use ",[697,2651,2652],{},"motion-safe"," with ",[697,2655,780],{}," transitions for accessible animated disclosure widgets",[737,2658,2659,1393,2662,2664],{},[692,2660,2661],{},"Test popover support",[697,2663,1409],{}," pseudo-class is a newer API; verify browser support for your target audience",[715,2666,2668],{"id":2667},"faq","FAQ",[2670,2671,2672,2690,2699],"accordion",{},[2673,2674,2677,2678,1396,2680,2682,2683,1403,2685,1406,2687,2689],"accordion-item",{"icon":2675,"label":2676},"i-lucide-circle-help","Does the open modifier work with the Popover API?","Yes! The ",[697,2679,780],{},[697,2681,1386],{}," which matches both the ",[697,2684,724],{},[697,2686,780],{},[697,2688,1409],{}," pseudo-class. This makes it work seamlessly with both patterns.",[2673,2691,770,2693,2695,2696,2698],{"icon":2675,"label":2692},"Why does the inert modifier target descendants too?",[697,2694,754],{}," attribute affects the entire subtree, making all descendants non-interactive. The modifier selector ",[697,2697,1896],{}," matches both the inert element and its children, ensuring consistent styling throughout the disabled region.",[2673,2700,2702,2703,2706,2707,2710,2711,2714,2715,2718],{"icon":2675,"label":2701},"Can I combine open with hover?","Yes! Passing ",[697,2704,2705],{},"[open, hover]"," generates ",[697,2708,2709],{},"_open:property:value",", ",[697,2712,2713],{},"_hover:property:value",", and ",[697,2716,2717],{},"_open:hover:property:value",". This allows for different hover effects when an element is open vs closed.",[2720,2721,2722],"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":796,"searchDepth":837,"depth":837,"links":2724},[2725,2726,2727,2728,2729,2732,2736,2737],{"id":717,"depth":837,"text":78},{"id":728,"depth":837,"text":729},{"id":764,"depth":837,"text":767},{"id":1413,"depth":837,"text":1416},{"id":1910,"depth":837,"text":699,"children":2730},[2731],{"id":1922,"depth":871,"text":1923},{"id":1969,"depth":837,"text":1970,"children":2733},[2734,2735],{"id":1973,"depth":871,"text":1974},{"id":2311,"depth":871,"text":2312},{"id":2614,"depth":837,"text":2615},{"id":2667,"depth":837,"text":2668},"Create other state modifiers for targeting open and inert elements with full type safety.","md",null,{},{"title":663,"icon":666},{"title":684,"description":2738},"MN_5kF0kCQMFU8KEIitd0iTy45viIN1kgo4o2K2ICcc",[2746,2748],{"title":658,"path":659,"stem":660,"description":2747,"icon":661,"children":-1},"Create media and preference modifiers for adaptive styling based on user preferences like dark mode, reduced motion, and more.",{"title":668,"path":669,"stem":670,"description":2749,"icon":671,"children":-1},"Create pseudo-element modifiers for targeting element sub-parts like before, after, placeholder, and selection with full type safety.",1781596356348]