[{"data":1,"prerenderedAt":4033},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-media-preferences":682,"-docs-theme-modifiers-media-preferences-surround":4028},{"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":4021,"extension":4022,"links":4023,"meta":4024,"navigation":4025,"path":659,"seo":4026,"stem":660,"__hash__":4027},"docs_theme\u002Fdocs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences.md","Media & Preferences Modifiers",{"type":686,"value":687,"toc":3999},"minimark",[688,714,718,746,750,753,793,799,813,829,1448,1455,1545,1550,1580,1586,1592,1901,1904,1929,1935,1941,2291,2294,2318,2324,2330,2333,2357,2363,2369,2372,2396,2402,2408,2411,2435,2441,2447,2450,2474,2480,2486,2855,2858,2882,2888,2894,2897,2921,2926,2932,2937,3083,3087,3091,3465,3469,3869,3873,3929,3933,3995],[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",{},"useMediaPreferenceModifiers"," 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],{},"mediaPreferences"," 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,726,729,730,733,734,737,738,741,742,745],"p",{},"Media and preference modifiers let you apply utility styles conditionally based on user preferences and media conditions. Most wrap utility declarations in CSS ",[697,723,724],{},"@media"," queries like ",[697,727,728],{},"prefers-reduced-motion"," and ",[697,731,732],{},"prefers-contrast","; the ",[697,735,736],{},"dark"," modifier is theme-driven and instead targets the ",[697,739,740],{},".dark-theme"," \u002F ",[697,743,744],{},"[data-theme=\"dark\"]"," selector. Together they generate variant utility classes that adapt to the user's environment.",[715,747,749],{"id":748},"why-use-media-preference-modifiers","Why Use Media & Preference Modifiers?",[719,751,752],{},"Media and preference modifiers help you:",[754,755,756,763,769,775,781,787],"ul",{},[757,758,759,762],"li",{},[692,760,761],{},"Support dark mode",": Automatically switch colors and styles based on the user's color scheme preference",[757,764,765,768],{},[692,766,767],{},"Respect motion preferences",": Disable or reduce animations for users who prefer reduced motion",[757,770,771,774],{},[692,772,773],{},"Handle contrast preferences",": Increase or decrease contrast for users who need it",[757,776,777,780],{},[692,778,779],{},"Target orientation",": Adapt layouts for portrait and landscape orientations",[757,782,783,786],{},[692,784,785],{},"Support print styles",": Apply print-specific styling without separate stylesheets",[757,788,789,792],{},[692,790,791],{},"Handle forced colors",": Adapt to Windows High Contrast Mode and similar settings",[715,794,796],{"id":795},"usedarkmodifier",[697,797,798],{},"useDarkModifier",[719,800,801,802,805,806,809,810,812],{},"The ",[697,803,804],{},"useDarkModifier()"," function creates a modifier that applies styles when the dark theme is active. It generates a single ",[697,807,808],{},":is(.dark-theme, [data-theme=\"dark\"])"," class\u002Fattribute selector — the same selector the ",[697,811,736],{}," theme's token values use — and forwards variables and children through it.",[719,814,815,816,819,820,823,824,828],{},"To follow the operating-system preference, mirror it into ",[697,817,818],{},"data-theme"," from JavaScript (",[697,821,822],{},"window.matchMedia('(prefers-color-scheme: dark)')","); see the ",[702,825,827],{"href":826},"\u002Fdocs\u002Fgetting-started\u002Fguides\u002Ftheme-switcher","Theme Switcher Guide",".",[830,831,832,1139,1388],"tabs",{},[833,834,836],"tabs-item",{"icon":835,"label":290},"i-lucide-code",[837,838,844],"pre",{"className":839,"code":840,"filename":841,"language":842,"meta":843,"style":843},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useBackgroundColorUtility, useTextColorUtility } from \"@styleframe\u002Ftheme\";\nimport { useDarkModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst dark = useDarkModifier(s);\n\nuseBackgroundColorUtility(s, {\n    surface: '#ffffff',\n    'surface-dark': '#1a1a2e',\n}, [dark]);\n\nuseTextColorUtility(s, {\n    body: '#212529',\n    'body-light': '#e2e8f0',\n}, [dark]);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,845,846,882,911,933,939,960,965,982,987,1001,1023,1045,1056,1061,1073,1090,1111,1120,1125],{"__ignoreMap":843},[847,848,851,855,859,863,866,869,872,876,879],"span",{"class":849,"line":850},"line",1,[847,852,854],{"class":853},"s7zQu","import",[847,856,858],{"class":857},"sMK4o"," {",[847,860,862],{"class":861},"sTEyZ"," styleframe",[847,864,865],{"class":857}," }",[847,867,868],{"class":853}," from",[847,870,871],{"class":857}," \"",[847,873,875],{"class":874},"sfazB","styleframe",[847,877,878],{"class":857},"\"",[847,880,881],{"class":857},";\n",[847,883,885,887,889,892,895,898,900,902,904,907,909],{"class":849,"line":884},2,[847,886,854],{"class":853},[847,888,858],{"class":857},[847,890,891],{"class":861}," useBackgroundColorUtility",[847,893,894],{"class":857},",",[847,896,897],{"class":861}," useTextColorUtility",[847,899,865],{"class":857},[847,901,868],{"class":853},[847,903,871],{"class":857},[847,905,906],{"class":874},"@styleframe\u002Ftheme",[847,908,878],{"class":857},[847,910,881],{"class":857},[847,912,914,916,918,921,923,925,927,929,931],{"class":849,"line":913},3,[847,915,854],{"class":853},[847,917,858],{"class":857},[847,919,920],{"class":861}," useDarkModifier",[847,922,865],{"class":857},[847,924,868],{"class":853},[847,926,871],{"class":857},[847,928,906],{"class":874},[847,930,878],{"class":857},[847,932,881],{"class":857},[847,934,936],{"class":849,"line":935},4,[847,937,938],{"emptyLinePlaceholder":223},"\n",[847,940,942,946,949,952,955,958],{"class":849,"line":941},5,[847,943,945],{"class":944},"spNyl","const",[847,947,948],{"class":861}," s ",[847,950,951],{"class":857},"=",[847,953,862],{"class":954},"s2Zo4",[847,956,957],{"class":861},"()",[847,959,881],{"class":857},[847,961,963],{"class":849,"line":962},6,[847,964,938],{"emptyLinePlaceholder":223},[847,966,968,970,973,975,977,980],{"class":849,"line":967},7,[847,969,945],{"class":944},[847,971,972],{"class":861}," dark ",[847,974,951],{"class":857},[847,976,920],{"class":954},[847,978,979],{"class":861},"(s)",[847,981,881],{"class":857},[847,983,985],{"class":849,"line":984},8,[847,986,938],{"emptyLinePlaceholder":223},[847,988,990,993,996,998],{"class":849,"line":989},9,[847,991,992],{"class":954},"useBackgroundColorUtility",[847,994,995],{"class":861},"(s",[847,997,894],{"class":857},[847,999,1000],{"class":857}," {\n",[847,1002,1004,1008,1011,1014,1017,1020],{"class":849,"line":1003},10,[847,1005,1007],{"class":1006},"swJcz","    surface",[847,1009,1010],{"class":857},":",[847,1012,1013],{"class":857}," '",[847,1015,1016],{"class":874},"#ffffff",[847,1018,1019],{"class":857},"'",[847,1021,1022],{"class":857},",\n",[847,1024,1026,1029,1032,1034,1036,1038,1041,1043],{"class":849,"line":1025},11,[847,1027,1028],{"class":857},"    '",[847,1030,1031],{"class":1006},"surface-dark",[847,1033,1019],{"class":857},[847,1035,1010],{"class":857},[847,1037,1013],{"class":857},[847,1039,1040],{"class":874},"#1a1a2e",[847,1042,1019],{"class":857},[847,1044,1022],{"class":857},[847,1046,1048,1051,1054],{"class":849,"line":1047},12,[847,1049,1050],{"class":857},"},",[847,1052,1053],{"class":861}," [dark])",[847,1055,881],{"class":857},[847,1057,1059],{"class":849,"line":1058},13,[847,1060,938],{"emptyLinePlaceholder":223},[847,1062,1064,1067,1069,1071],{"class":849,"line":1063},14,[847,1065,1066],{"class":954},"useTextColorUtility",[847,1068,995],{"class":861},[847,1070,894],{"class":857},[847,1072,1000],{"class":857},[847,1074,1076,1079,1081,1083,1086,1088],{"class":849,"line":1075},15,[847,1077,1078],{"class":1006},"    body",[847,1080,1010],{"class":857},[847,1082,1013],{"class":857},[847,1084,1085],{"class":874},"#212529",[847,1087,1019],{"class":857},[847,1089,1022],{"class":857},[847,1091,1093,1095,1098,1100,1102,1104,1107,1109],{"class":849,"line":1092},16,[847,1094,1028],{"class":857},[847,1096,1097],{"class":1006},"body-light",[847,1099,1019],{"class":857},[847,1101,1010],{"class":857},[847,1103,1013],{"class":857},[847,1105,1106],{"class":874},"#e2e8f0",[847,1108,1019],{"class":857},[847,1110,1022],{"class":857},[847,1112,1114,1116,1118],{"class":849,"line":1113},17,[847,1115,1050],{"class":857},[847,1117,1053],{"class":861},[847,1119,881],{"class":857},[847,1121,1123],{"class":849,"line":1122},18,[847,1124,938],{"emptyLinePlaceholder":223},[847,1126,1128,1131,1134,1137],{"class":849,"line":1127},19,[847,1129,1130],{"class":853},"export",[847,1132,1133],{"class":853}," default",[847,1135,1136],{"class":861}," s",[847,1138,881],{"class":857},[833,1140,1141],{"icon":154,"label":326},[837,1142,1147],{"className":1143,"code":1144,"filename":1145,"language":1146,"meta":843,"style":843},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._background-color\\:surface { background-color: #ffffff; }\n._background-color\\:surface-dark { background-color: #1a1a2e; }\n._text-color\\:body { color: #212529; }\n._text-color\\:body-light { color: #e2e8f0; }\n\n._dark\\:background-color\\:surface-dark {\n    :is(.dark-theme, [data-theme=\"dark\"]) & {\n        background-color: #1a1a2e;\n    }\n}\n\n._dark\\:text-color\\:body-light {\n    :is(.dark-theme, [data-theme=\"dark\"]) & {\n        color: #e2e8f0;\n    }\n}\n","styleframe\u002Findex.css","css",[697,1148,1149,1183,1208,1236,1261,1265,1283,1305,1318,1323,1328,1332,1349,1367,1380,1384],{"__ignoreMap":843},[847,1150,1151,1153,1157,1160,1163,1165,1169,1171,1174,1177,1180],{"class":849,"line":850},[847,1152,828],{"class":857},[847,1154,1156],{"class":1155},"sBMFI","_background-color",[847,1158,1159],{"class":861},"\\:",[847,1161,1162],{"class":1155},"surface",[847,1164,858],{"class":857},[847,1166,1168],{"class":1167},"sqsOY"," background-color",[847,1170,1010],{"class":857},[847,1172,1173],{"class":857}," #",[847,1175,1176],{"class":861},"ffffff",[847,1178,1179],{"class":857},";",[847,1181,1182],{"class":857}," }\n",[847,1184,1185,1187,1189,1191,1193,1195,1197,1199,1201,1204,1206],{"class":849,"line":884},[847,1186,828],{"class":857},[847,1188,1156],{"class":1155},[847,1190,1159],{"class":861},[847,1192,1031],{"class":1155},[847,1194,858],{"class":857},[847,1196,1168],{"class":1167},[847,1198,1010],{"class":857},[847,1200,1173],{"class":857},[847,1202,1203],{"class":861},"1a1a2e",[847,1205,1179],{"class":857},[847,1207,1182],{"class":857},[847,1209,1210,1212,1215,1217,1220,1222,1225,1227,1229,1232,1234],{"class":849,"line":913},[847,1211,828],{"class":857},[847,1213,1214],{"class":1155},"_text-color",[847,1216,1159],{"class":861},[847,1218,1219],{"class":1155},"body",[847,1221,858],{"class":857},[847,1223,1224],{"class":1167}," color",[847,1226,1010],{"class":857},[847,1228,1173],{"class":857},[847,1230,1231],{"class":861},"212529",[847,1233,1179],{"class":857},[847,1235,1182],{"class":857},[847,1237,1238,1240,1242,1244,1246,1248,1250,1252,1254,1257,1259],{"class":849,"line":935},[847,1239,828],{"class":857},[847,1241,1214],{"class":1155},[847,1243,1159],{"class":861},[847,1245,1097],{"class":1155},[847,1247,858],{"class":857},[847,1249,1224],{"class":1167},[847,1251,1010],{"class":857},[847,1253,1173],{"class":857},[847,1255,1256],{"class":861},"e2e8f0",[847,1258,1179],{"class":857},[847,1260,1182],{"class":857},[847,1262,1263],{"class":849,"line":941},[847,1264,938],{"emptyLinePlaceholder":223},[847,1266,1267,1269,1272,1274,1277,1279,1281],{"class":849,"line":962},[847,1268,828],{"class":857},[847,1270,1271],{"class":1155},"_dark",[847,1273,1159],{"class":861},[847,1275,1276],{"class":1155},"background-color",[847,1278,1159],{"class":861},[847,1280,1031],{"class":1155},[847,1282,1000],{"class":857},[847,1284,1285,1288,1291,1293,1296,1298,1300,1302],{"class":849,"line":967},[847,1286,1287],{"class":857},"    :",[847,1289,1290],{"class":861},"is(.dark-theme",[847,1292,894],{"class":857},[847,1294,1295],{"class":861}," [data-theme=",[847,1297,878],{"class":857},[847,1299,736],{"class":874},[847,1301,878],{"class":857},[847,1303,1304],{"class":861},"]) & {\n",[847,1306,1307,1310,1312,1314,1316],{"class":849,"line":984},[847,1308,1309],{"class":1167},"        background-color",[847,1311,1010],{"class":857},[847,1313,1173],{"class":857},[847,1315,1203],{"class":861},[847,1317,881],{"class":857},[847,1319,1320],{"class":849,"line":989},[847,1321,1322],{"class":857},"    }\n",[847,1324,1325],{"class":849,"line":1003},[847,1326,1327],{"class":861},"}\n",[847,1329,1330],{"class":849,"line":1025},[847,1331,938],{"emptyLinePlaceholder":223},[847,1333,1334,1336,1338,1340,1343,1345,1347],{"class":849,"line":1047},[847,1335,828],{"class":857},[847,1337,1271],{"class":1155},[847,1339,1159],{"class":861},[847,1341,1342],{"class":1155},"text-color",[847,1344,1159],{"class":861},[847,1346,1097],{"class":1155},[847,1348,1000],{"class":857},[847,1350,1351,1353,1355,1357,1359,1361,1363,1365],{"class":849,"line":1058},[847,1352,1287],{"class":857},[847,1354,1290],{"class":861},[847,1356,894],{"class":857},[847,1358,1295],{"class":861},[847,1360,878],{"class":857},[847,1362,736],{"class":874},[847,1364,878],{"class":857},[847,1366,1304],{"class":861},[847,1368,1369,1372,1374,1376,1378],{"class":849,"line":1063},[847,1370,1371],{"class":1167},"        color",[847,1373,1010],{"class":857},[847,1375,1173],{"class":857},[847,1377,1256],{"class":861},[847,1379,881],{"class":857},[847,1381,1382],{"class":849,"line":1075},[847,1383,1322],{"class":857},[847,1385,1386],{"class":849,"line":1092},[847,1387,1327],{"class":861},[833,1389,1391],{"icon":520,"label":1390},"Usage",[837,1392,1396],{"className":1393,"code":1394,"language":1395,"meta":843,"style":843},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbody class=\"_background-color:surface _dark:background-color:surface-dark _text-color:body _dark:text-color:body-light\">\n    \u003Cp>This text adapts when the dark theme is active (data-theme=\"dark\").\u003C\u002Fp>\n\u003C\u002Fbody>\n","html",[697,1397,1398,1420,1440],{"__ignoreMap":843},[847,1399,1400,1403,1405,1408,1410,1412,1415,1417],{"class":849,"line":850},[847,1401,1402],{"class":857},"\u003C",[847,1404,1219],{"class":1006},[847,1406,1407],{"class":944}," class",[847,1409,951],{"class":857},[847,1411,878],{"class":857},[847,1413,1414],{"class":874},"_background-color:surface _dark:background-color:surface-dark _text-color:body _dark:text-color:body-light",[847,1416,878],{"class":857},[847,1418,1419],{"class":857},">\n",[847,1421,1422,1425,1427,1430,1433,1436,1438],{"class":849,"line":884},[847,1423,1424],{"class":857},"    \u003C",[847,1426,719],{"class":1006},[847,1428,1429],{"class":857},">",[847,1431,1432],{"class":861},"This text adapts when the dark theme is active (data-theme=\"dark\").",[847,1434,1435],{"class":857},"\u003C\u002F",[847,1437,719],{"class":1006},[847,1439,1419],{"class":857},[847,1441,1442,1444,1446],{"class":849,"line":913},[847,1443,1435],{"class":857},[847,1445,1219],{"class":1006},[847,1447,1419],{"class":857},[719,1449,1450,1451,1454],{},"The dark modifier composes with other modifiers. When combined (e.g., ",[697,1452,1453],{},"[dark, hover]","), modifiers nest inside-out — dark wraps hover:",[830,1456,1457],{},[833,1458,1460],{"icon":154,"label":1459},"Output for [dark, hover]",[837,1461,1463],{"className":1143,"code":1462,"filename":1145,"language":1146,"meta":843,"style":843},"._dark\\:hover\\:background-color\\:primary {\n    :is(.dark-theme, [data-theme=\"dark\"]) & {\n        &:hover {\n            background-color: var(--color--primary);\n        }\n    }\n}\n",[697,1464,1465,1487,1505,1515,1532,1537,1541],{"__ignoreMap":843},[847,1466,1467,1469,1471,1473,1476,1478,1480,1482,1485],{"class":849,"line":850},[847,1468,828],{"class":857},[847,1470,1271],{"class":1155},[847,1472,1159],{"class":861},[847,1474,1475],{"class":1155},"hover",[847,1477,1159],{"class":861},[847,1479,1276],{"class":1155},[847,1481,1159],{"class":861},[847,1483,1484],{"class":1155},"primary",[847,1486,1000],{"class":857},[847,1488,1489,1491,1493,1495,1497,1499,1501,1503],{"class":849,"line":884},[847,1490,1287],{"class":857},[847,1492,1290],{"class":861},[847,1494,894],{"class":857},[847,1496,1295],{"class":861},[847,1498,878],{"class":857},[847,1500,736],{"class":874},[847,1502,878],{"class":857},[847,1504,1304],{"class":861},[847,1506,1507,1510,1512],{"class":849,"line":913},[847,1508,1509],{"class":861},"        &",[847,1511,1010],{"class":857},[847,1513,1514],{"class":861},"hover {\n",[847,1516,1517,1520,1523,1526,1529],{"class":849,"line":935},[847,1518,1519],{"class":861},"            background-color: ",[847,1521,1522],{"class":954},"var",[847,1524,1525],{"class":857},"(",[847,1527,1528],{"class":861},"--color--primary",[847,1530,1531],{"class":857},");\n",[847,1533,1534],{"class":849,"line":941},[847,1535,1536],{"class":857},"        }\n",[847,1538,1539],{"class":849,"line":962},[847,1540,1322],{"class":861},[847,1542,1543],{"class":849,"line":967},[847,1544,1327],{"class":861},[1546,1547,1549],"h4",{"id":1548},"css-selector","CSS Selector",[1551,1552,1553,1565],"table",{},[1554,1555,1556],"thead",{},[1557,1558,1559,1563],"tr",{},[1560,1561,1562],"th",{},"Modifier Name",[1560,1564,91],{},[1566,1567,1568],"tbody",{},[1557,1569,1570,1575],{},[1571,1572,1573],"td",{},[697,1574,736],{},[1571,1576,1577],{},[697,1578,1579],{},":is(.dark-theme, [data-theme=\"dark\"]) &",[715,1581,1583],{"id":1582},"usemotionsafemodifier",[697,1584,1585],{},"useMotionSafeModifier",[719,1587,801,1588,1591],{},[697,1589,1590],{},"useMotionSafeModifier()"," function creates a modifier that applies styles only when the user has not requested reduced motion.",[830,1593,1594,1771,1855],{},[833,1595,1596],{"icon":835,"label":290},[837,1597,1599],{"className":839,"code":1598,"filename":841,"language":842,"meta":843,"style":843},"import { styleframe } from \"styleframe\";\nimport { useTransitionDurationUtility } from \"@styleframe\u002Ftheme\";\nimport { useMotionSafeModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst motionSafe = useMotionSafeModifier(s);\n\nuseTransitionDurationUtility(s, {\n    300: '300ms',\n    500: '500ms',\n}, [motionSafe]);\n\nexport default s;\n",[697,1600,1601,1621,1642,1663,1667,1681,1685,1700,1704,1715,1732,1748,1757,1761],{"__ignoreMap":843},[847,1602,1603,1605,1607,1609,1611,1613,1615,1617,1619],{"class":849,"line":850},[847,1604,854],{"class":853},[847,1606,858],{"class":857},[847,1608,862],{"class":861},[847,1610,865],{"class":857},[847,1612,868],{"class":853},[847,1614,871],{"class":857},[847,1616,875],{"class":874},[847,1618,878],{"class":857},[847,1620,881],{"class":857},[847,1622,1623,1625,1627,1630,1632,1634,1636,1638,1640],{"class":849,"line":884},[847,1624,854],{"class":853},[847,1626,858],{"class":857},[847,1628,1629],{"class":861}," useTransitionDurationUtility",[847,1631,865],{"class":857},[847,1633,868],{"class":853},[847,1635,871],{"class":857},[847,1637,906],{"class":874},[847,1639,878],{"class":857},[847,1641,881],{"class":857},[847,1643,1644,1646,1648,1651,1653,1655,1657,1659,1661],{"class":849,"line":913},[847,1645,854],{"class":853},[847,1647,858],{"class":857},[847,1649,1650],{"class":861}," useMotionSafeModifier",[847,1652,865],{"class":857},[847,1654,868],{"class":853},[847,1656,871],{"class":857},[847,1658,906],{"class":874},[847,1660,878],{"class":857},[847,1662,881],{"class":857},[847,1664,1665],{"class":849,"line":935},[847,1666,938],{"emptyLinePlaceholder":223},[847,1668,1669,1671,1673,1675,1677,1679],{"class":849,"line":941},[847,1670,945],{"class":944},[847,1672,948],{"class":861},[847,1674,951],{"class":857},[847,1676,862],{"class":954},[847,1678,957],{"class":861},[847,1680,881],{"class":857},[847,1682,1683],{"class":849,"line":962},[847,1684,938],{"emptyLinePlaceholder":223},[847,1686,1687,1689,1692,1694,1696,1698],{"class":849,"line":967},[847,1688,945],{"class":944},[847,1690,1691],{"class":861}," motionSafe ",[847,1693,951],{"class":857},[847,1695,1650],{"class":954},[847,1697,979],{"class":861},[847,1699,881],{"class":857},[847,1701,1702],{"class":849,"line":984},[847,1703,938],{"emptyLinePlaceholder":223},[847,1705,1706,1709,1711,1713],{"class":849,"line":989},[847,1707,1708],{"class":954},"useTransitionDurationUtility",[847,1710,995],{"class":861},[847,1712,894],{"class":857},[847,1714,1000],{"class":857},[847,1716,1717,1721,1723,1725,1728,1730],{"class":849,"line":1003},[847,1718,1720],{"class":1719},"sbssI","    300",[847,1722,1010],{"class":857},[847,1724,1013],{"class":857},[847,1726,1727],{"class":874},"300ms",[847,1729,1019],{"class":857},[847,1731,1022],{"class":857},[847,1733,1734,1737,1739,1741,1744,1746],{"class":849,"line":1025},[847,1735,1736],{"class":1719},"    500",[847,1738,1010],{"class":857},[847,1740,1013],{"class":857},[847,1742,1743],{"class":874},"500ms",[847,1745,1019],{"class":857},[847,1747,1022],{"class":857},[847,1749,1750,1752,1755],{"class":849,"line":1047},[847,1751,1050],{"class":857},[847,1753,1754],{"class":861}," [motionSafe])",[847,1756,881],{"class":857},[847,1758,1759],{"class":849,"line":1058},[847,1760,938],{"emptyLinePlaceholder":223},[847,1762,1763,1765,1767,1769],{"class":849,"line":1063},[847,1764,1130],{"class":853},[847,1766,1133],{"class":853},[847,1768,1136],{"class":861},[847,1770,881],{"class":857},[833,1772,1773],{"icon":154,"label":326},[837,1774,1776],{"className":1143,"code":1775,"filename":1145,"language":1146,"meta":843,"style":843},"._transition-duration\\:300 { transition-duration: 300ms; }\n\n._motion-safe\\:transition-duration\\:300 {\n    @media (prefers-reduced-motion: no-preference) {\n        transition-duration: 300ms;\n    }\n}\n",[697,1777,1778,1804,1808,1826,1836,1847,1851],{"__ignoreMap":843},[847,1779,1780,1782,1785,1787,1790,1792,1795,1797,1800,1802],{"class":849,"line":850},[847,1781,828],{"class":857},[847,1783,1784],{"class":1155},"_transition-duration",[847,1786,1159],{"class":861},[847,1788,1789],{"class":1155},"300",[847,1791,858],{"class":857},[847,1793,1794],{"class":1167}," transition-duration",[847,1796,1010],{"class":857},[847,1798,1799],{"class":1719}," 300ms",[847,1801,1179],{"class":857},[847,1803,1182],{"class":857},[847,1805,1806],{"class":849,"line":884},[847,1807,938],{"emptyLinePlaceholder":223},[847,1809,1810,1812,1815,1817,1820,1822,1824],{"class":849,"line":913},[847,1811,828],{"class":857},[847,1813,1814],{"class":1155},"_motion-safe",[847,1816,1159],{"class":861},[847,1818,1819],{"class":1155},"transition-duration",[847,1821,1159],{"class":861},[847,1823,1789],{"class":1155},[847,1825,1000],{"class":857},[847,1827,1828,1831,1833],{"class":849,"line":935},[847,1829,1830],{"class":861},"    @media (prefers-reduced-motion",[847,1832,1010],{"class":857},[847,1834,1835],{"class":861}," no-preference) {\n",[847,1837,1838,1841,1843,1845],{"class":849,"line":941},[847,1839,1840],{"class":1167},"        transition-duration",[847,1842,1010],{"class":857},[847,1844,1799],{"class":1719},[847,1846,881],{"class":857},[847,1848,1849],{"class":849,"line":962},[847,1850,1322],{"class":857},[847,1852,1853],{"class":849,"line":967},[847,1854,1327],{"class":861},[833,1856,1857],{"icon":520,"label":1390},[837,1858,1860],{"className":1393,"code":1859,"language":1395,"meta":843,"style":843},"\u003C!-- Only animate when motion is allowed -->\n\u003Cdiv class=\"_motion-safe:transition-duration:300\">\n    Animated content\n\u003C\u002Fdiv>\n",[697,1861,1862,1868,1888,1893],{"__ignoreMap":843},[847,1863,1864],{"class":849,"line":850},[847,1865,1867],{"class":1866},"sHwdD","\u003C!-- Only animate when motion is allowed -->\n",[847,1869,1870,1872,1875,1877,1879,1881,1884,1886],{"class":849,"line":884},[847,1871,1402],{"class":857},[847,1873,1874],{"class":1006},"div",[847,1876,1407],{"class":944},[847,1878,951],{"class":857},[847,1880,878],{"class":857},[847,1882,1883],{"class":874},"_motion-safe:transition-duration:300",[847,1885,878],{"class":857},[847,1887,1419],{"class":857},[847,1889,1890],{"class":849,"line":913},[847,1891,1892],{"class":861},"    Animated content\n",[847,1894,1895,1897,1899],{"class":849,"line":935},[847,1896,1435],{"class":857},[847,1898,1874],{"class":1006},[847,1900,1419],{"class":857},[1546,1902,1549],{"id":1903},"css-selector-1",[1551,1905,1906,1915],{},[1554,1907,1908],{},[1557,1909,1910,1912],{},[1560,1911,1562],{},[1560,1913,1914],{},"Media Query",[1566,1916,1917],{},[1557,1918,1919,1924],{},[1571,1920,1921],{},[697,1922,1923],{},"motion-safe",[1571,1925,1926],{},[697,1927,1928],{},"@media (prefers-reduced-motion: no-preference)",[715,1930,1932],{"id":1931},"usemotionreducemodifier",[697,1933,1934],{},"useMotionReduceModifier",[719,1936,801,1937,1940],{},[697,1938,1939],{},"useMotionReduceModifier()"," function creates a modifier that applies styles when the user prefers reduced motion.",[830,1942,1943,2145,2247],{},[833,1944,1945],{"icon":835,"label":290},[837,1946,1948],{"className":839,"code":1947,"filename":841,"language":842,"meta":843,"style":843},"import { styleframe } from \"styleframe\";\nimport { useTransitionDurationUtility, useAnimationUtility } from \"@styleframe\u002Ftheme\";\nimport { useMotionReduceModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst motionReduce = useMotionReduceModifier(s);\n\nuseTransitionDurationUtility(s, {\n    0: '0ms',\n}, [motionReduce]);\n\nuseAnimationUtility(s, {\n    none: 'none',\n}, [motionReduce]);\n\nexport default s;\n",[697,1949,1950,1970,1995,2016,2020,2034,2038,2053,2057,2067,2083,2092,2096,2107,2123,2131,2135],{"__ignoreMap":843},[847,1951,1952,1954,1956,1958,1960,1962,1964,1966,1968],{"class":849,"line":850},[847,1953,854],{"class":853},[847,1955,858],{"class":857},[847,1957,862],{"class":861},[847,1959,865],{"class":857},[847,1961,868],{"class":853},[847,1963,871],{"class":857},[847,1965,875],{"class":874},[847,1967,878],{"class":857},[847,1969,881],{"class":857},[847,1971,1972,1974,1976,1978,1980,1983,1985,1987,1989,1991,1993],{"class":849,"line":884},[847,1973,854],{"class":853},[847,1975,858],{"class":857},[847,1977,1629],{"class":861},[847,1979,894],{"class":857},[847,1981,1982],{"class":861}," useAnimationUtility",[847,1984,865],{"class":857},[847,1986,868],{"class":853},[847,1988,871],{"class":857},[847,1990,906],{"class":874},[847,1992,878],{"class":857},[847,1994,881],{"class":857},[847,1996,1997,1999,2001,2004,2006,2008,2010,2012,2014],{"class":849,"line":913},[847,1998,854],{"class":853},[847,2000,858],{"class":857},[847,2002,2003],{"class":861}," useMotionReduceModifier",[847,2005,865],{"class":857},[847,2007,868],{"class":853},[847,2009,871],{"class":857},[847,2011,906],{"class":874},[847,2013,878],{"class":857},[847,2015,881],{"class":857},[847,2017,2018],{"class":849,"line":935},[847,2019,938],{"emptyLinePlaceholder":223},[847,2021,2022,2024,2026,2028,2030,2032],{"class":849,"line":941},[847,2023,945],{"class":944},[847,2025,948],{"class":861},[847,2027,951],{"class":857},[847,2029,862],{"class":954},[847,2031,957],{"class":861},[847,2033,881],{"class":857},[847,2035,2036],{"class":849,"line":962},[847,2037,938],{"emptyLinePlaceholder":223},[847,2039,2040,2042,2045,2047,2049,2051],{"class":849,"line":967},[847,2041,945],{"class":944},[847,2043,2044],{"class":861}," motionReduce ",[847,2046,951],{"class":857},[847,2048,2003],{"class":954},[847,2050,979],{"class":861},[847,2052,881],{"class":857},[847,2054,2055],{"class":849,"line":984},[847,2056,938],{"emptyLinePlaceholder":223},[847,2058,2059,2061,2063,2065],{"class":849,"line":989},[847,2060,1708],{"class":954},[847,2062,995],{"class":861},[847,2064,894],{"class":857},[847,2066,1000],{"class":857},[847,2068,2069,2072,2074,2076,2079,2081],{"class":849,"line":1003},[847,2070,2071],{"class":1719},"    0",[847,2073,1010],{"class":857},[847,2075,1013],{"class":857},[847,2077,2078],{"class":874},"0ms",[847,2080,1019],{"class":857},[847,2082,1022],{"class":857},[847,2084,2085,2087,2090],{"class":849,"line":1025},[847,2086,1050],{"class":857},[847,2088,2089],{"class":861}," [motionReduce])",[847,2091,881],{"class":857},[847,2093,2094],{"class":849,"line":1047},[847,2095,938],{"emptyLinePlaceholder":223},[847,2097,2098,2101,2103,2105],{"class":849,"line":1058},[847,2099,2100],{"class":954},"useAnimationUtility",[847,2102,995],{"class":861},[847,2104,894],{"class":857},[847,2106,1000],{"class":857},[847,2108,2109,2112,2114,2116,2119,2121],{"class":849,"line":1063},[847,2110,2111],{"class":1006},"    none",[847,2113,1010],{"class":857},[847,2115,1013],{"class":857},[847,2117,2118],{"class":874},"none",[847,2120,1019],{"class":857},[847,2122,1022],{"class":857},[847,2124,2125,2127,2129],{"class":849,"line":1075},[847,2126,1050],{"class":857},[847,2128,2089],{"class":861},[847,2130,881],{"class":857},[847,2132,2133],{"class":849,"line":1092},[847,2134,938],{"emptyLinePlaceholder":223},[847,2136,2137,2139,2141,2143],{"class":849,"line":1113},[847,2138,1130],{"class":853},[847,2140,1133],{"class":853},[847,2142,1136],{"class":861},[847,2144,881],{"class":857},[833,2146,2147],{"icon":154,"label":326},[837,2148,2150],{"className":1143,"code":2149,"filename":1145,"language":1146,"meta":843,"style":843},"._motion-reduce\\:transition-duration\\:0 {\n    @media (prefers-reduced-motion: reduce) {\n        transition-duration: 0ms;\n    }\n}\n\n._motion-reduce\\:animation\\:none {\n    @media (prefers-reduced-motion: reduce) {\n        animation: none;\n    }\n}\n",[697,2151,2152,2170,2179,2190,2194,2198,2202,2219,2227,2239,2243],{"__ignoreMap":843},[847,2153,2154,2156,2159,2161,2163,2165,2168],{"class":849,"line":850},[847,2155,828],{"class":857},[847,2157,2158],{"class":1155},"_motion-reduce",[847,2160,1159],{"class":861},[847,2162,1819],{"class":1155},[847,2164,1159],{"class":861},[847,2166,2167],{"class":1155},"0",[847,2169,1000],{"class":857},[847,2171,2172,2174,2176],{"class":849,"line":884},[847,2173,1830],{"class":861},[847,2175,1010],{"class":857},[847,2177,2178],{"class":861}," reduce) {\n",[847,2180,2181,2183,2185,2188],{"class":849,"line":913},[847,2182,1840],{"class":1167},[847,2184,1010],{"class":857},[847,2186,2187],{"class":1719}," 0ms",[847,2189,881],{"class":857},[847,2191,2192],{"class":849,"line":935},[847,2193,1322],{"class":857},[847,2195,2196],{"class":849,"line":941},[847,2197,1327],{"class":861},[847,2199,2200],{"class":849,"line":962},[847,2201,938],{"emptyLinePlaceholder":223},[847,2203,2204,2206,2208,2210,2213,2215,2217],{"class":849,"line":967},[847,2205,828],{"class":857},[847,2207,2158],{"class":1155},[847,2209,1159],{"class":861},[847,2211,2212],{"class":1155},"animation",[847,2214,1159],{"class":861},[847,2216,2118],{"class":1155},[847,2218,1000],{"class":857},[847,2220,2221,2223,2225],{"class":849,"line":984},[847,2222,1830],{"class":861},[847,2224,1010],{"class":857},[847,2226,2178],{"class":861},[847,2228,2229,2232,2234,2237],{"class":849,"line":989},[847,2230,2231],{"class":1167},"        animation",[847,2233,1010],{"class":857},[847,2235,2236],{"class":861}," none",[847,2238,881],{"class":857},[847,2240,2241],{"class":849,"line":1003},[847,2242,1322],{"class":857},[847,2244,2245],{"class":849,"line":1025},[847,2246,1327],{"class":861},[833,2248,2249],{"icon":520,"label":1390},[837,2250,2252],{"className":1393,"code":2251,"language":1395,"meta":843,"style":843},"\u003C!-- Disable animation for users who prefer reduced motion -->\n\u003Cdiv class=\"_motion-reduce:animation:none _motion-reduce:transition-duration:0\">\n    Accessible content\n\u003C\u002Fdiv>\n",[697,2253,2254,2259,2278,2283],{"__ignoreMap":843},[847,2255,2256],{"class":849,"line":850},[847,2257,2258],{"class":1866},"\u003C!-- Disable animation for users who prefer reduced motion -->\n",[847,2260,2261,2263,2265,2267,2269,2271,2274,2276],{"class":849,"line":884},[847,2262,1402],{"class":857},[847,2264,1874],{"class":1006},[847,2266,1407],{"class":944},[847,2268,951],{"class":857},[847,2270,878],{"class":857},[847,2272,2273],{"class":874},"_motion-reduce:animation:none _motion-reduce:transition-duration:0",[847,2275,878],{"class":857},[847,2277,1419],{"class":857},[847,2279,2280],{"class":849,"line":913},[847,2281,2282],{"class":861},"    Accessible content\n",[847,2284,2285,2287,2289],{"class":849,"line":935},[847,2286,1435],{"class":857},[847,2288,1874],{"class":1006},[847,2290,1419],{"class":857},[1546,2292,1549],{"id":2293},"css-selector-2",[1551,2295,2296,2304],{},[1554,2297,2298],{},[1557,2299,2300,2302],{},[1560,2301,1562],{},[1560,2303,1914],{},[1566,2305,2306],{},[1557,2307,2308,2313],{},[1571,2309,2310],{},[697,2311,2312],{},"motion-reduce",[1571,2314,2315],{},[697,2316,2317],{},"@media (prefers-reduced-motion: reduce)",[715,2319,2321],{"id":2320},"usecontrastmoremodifier",[697,2322,2323],{},"useContrastMoreModifier",[719,2325,801,2326,2329],{},[697,2327,2328],{},"useContrastMoreModifier()"," function creates a modifier that applies styles when the user prefers more contrast.",[1546,2331,1549],{"id":2332},"css-selector-3",[1551,2334,2335,2343],{},[1554,2336,2337],{},[1557,2338,2339,2341],{},[1560,2340,1562],{},[1560,2342,1914],{},[1566,2344,2345],{},[1557,2346,2347,2352],{},[1571,2348,2349],{},[697,2350,2351],{},"contrast-more",[1571,2353,2354],{},[697,2355,2356],{},"@media (prefers-contrast: more)",[715,2358,2360],{"id":2359},"usecontrastlessmodifier",[697,2361,2362],{},"useContrastLessModifier",[719,2364,801,2365,2368],{},[697,2366,2367],{},"useContrastLessModifier()"," function creates a modifier that applies styles when the user prefers less contrast.",[1546,2370,1549],{"id":2371},"css-selector-4",[1551,2373,2374,2382],{},[1554,2375,2376],{},[1557,2377,2378,2380],{},[1560,2379,1562],{},[1560,2381,1914],{},[1566,2383,2384],{},[1557,2385,2386,2391],{},[1571,2387,2388],{},[697,2389,2390],{},"contrast-less",[1571,2392,2393],{},[697,2394,2395],{},"@media (prefers-contrast: less)",[715,2397,2399],{"id":2398},"useportraitmodifier",[697,2400,2401],{},"usePortraitModifier",[719,2403,801,2404,2407],{},[697,2405,2406],{},"usePortraitModifier()"," function creates a modifier that applies styles in portrait orientation.",[1546,2409,1549],{"id":2410},"css-selector-5",[1551,2412,2413,2421],{},[1554,2414,2415],{},[1557,2416,2417,2419],{},[1560,2418,1562],{},[1560,2420,1914],{},[1566,2422,2423],{},[1557,2424,2425,2430],{},[1571,2426,2427],{},[697,2428,2429],{},"portrait",[1571,2431,2432],{},[697,2433,2434],{},"@media (orientation: portrait)",[715,2436,2438],{"id":2437},"uselandscapemodifier",[697,2439,2440],{},"useLandscapeModifier",[719,2442,801,2443,2446],{},[697,2444,2445],{},"useLandscapeModifier()"," function creates a modifier that applies styles in landscape orientation.",[1546,2448,1549],{"id":2449},"css-selector-6",[1551,2451,2452,2460],{},[1554,2453,2454],{},[1557,2455,2456,2458],{},[1560,2457,1562],{},[1560,2459,1914],{},[1566,2461,2462],{},[1557,2463,2464,2469],{},[1571,2465,2466],{},[697,2467,2468],{},"landscape",[1571,2470,2471],{},[697,2472,2473],{},"@media (orientation: landscape)",[715,2475,2477],{"id":2476},"useprintmodifier",[697,2478,2479],{},"usePrintModifier",[719,2481,801,2482,2485],{},[697,2483,2484],{},"usePrintModifier()"," function creates a modifier that applies styles for print media.",[830,2487,2488,2687,2772],{},[833,2489,2490],{"icon":835,"label":290},[837,2491,2493],{"className":839,"code":2492,"filename":841,"language":842,"meta":843,"style":843},"import { styleframe } from \"styleframe\";\nimport { useDisplayUtility, useBackgroundColorUtility } from \"@styleframe\u002Ftheme\";\nimport { usePrintModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst print = usePrintModifier(s);\n\nuseDisplayUtility(s, {\n    none: 'none',\n}, [print]);\n\nuseBackgroundColorUtility(s, {\n    white: '#ffffff',\n}, [print]);\n\nexport default s;\n",[697,2494,2495,2515,2540,2561,2565,2579,2583,2598,2602,2613,2627,2636,2640,2650,2665,2673,2677],{"__ignoreMap":843},[847,2496,2497,2499,2501,2503,2505,2507,2509,2511,2513],{"class":849,"line":850},[847,2498,854],{"class":853},[847,2500,858],{"class":857},[847,2502,862],{"class":861},[847,2504,865],{"class":857},[847,2506,868],{"class":853},[847,2508,871],{"class":857},[847,2510,875],{"class":874},[847,2512,878],{"class":857},[847,2514,881],{"class":857},[847,2516,2517,2519,2521,2524,2526,2528,2530,2532,2534,2536,2538],{"class":849,"line":884},[847,2518,854],{"class":853},[847,2520,858],{"class":857},[847,2522,2523],{"class":861}," useDisplayUtility",[847,2525,894],{"class":857},[847,2527,891],{"class":861},[847,2529,865],{"class":857},[847,2531,868],{"class":853},[847,2533,871],{"class":857},[847,2535,906],{"class":874},[847,2537,878],{"class":857},[847,2539,881],{"class":857},[847,2541,2542,2544,2546,2549,2551,2553,2555,2557,2559],{"class":849,"line":913},[847,2543,854],{"class":853},[847,2545,858],{"class":857},[847,2547,2548],{"class":861}," usePrintModifier",[847,2550,865],{"class":857},[847,2552,868],{"class":853},[847,2554,871],{"class":857},[847,2556,906],{"class":874},[847,2558,878],{"class":857},[847,2560,881],{"class":857},[847,2562,2563],{"class":849,"line":935},[847,2564,938],{"emptyLinePlaceholder":223},[847,2566,2567,2569,2571,2573,2575,2577],{"class":849,"line":941},[847,2568,945],{"class":944},[847,2570,948],{"class":861},[847,2572,951],{"class":857},[847,2574,862],{"class":954},[847,2576,957],{"class":861},[847,2578,881],{"class":857},[847,2580,2581],{"class":849,"line":962},[847,2582,938],{"emptyLinePlaceholder":223},[847,2584,2585,2587,2590,2592,2594,2596],{"class":849,"line":967},[847,2586,945],{"class":944},[847,2588,2589],{"class":861}," print ",[847,2591,951],{"class":857},[847,2593,2548],{"class":954},[847,2595,979],{"class":861},[847,2597,881],{"class":857},[847,2599,2600],{"class":849,"line":984},[847,2601,938],{"emptyLinePlaceholder":223},[847,2603,2604,2607,2609,2611],{"class":849,"line":989},[847,2605,2606],{"class":954},"useDisplayUtility",[847,2608,995],{"class":861},[847,2610,894],{"class":857},[847,2612,1000],{"class":857},[847,2614,2615,2617,2619,2621,2623,2625],{"class":849,"line":1003},[847,2616,2111],{"class":1006},[847,2618,1010],{"class":857},[847,2620,1013],{"class":857},[847,2622,2118],{"class":874},[847,2624,1019],{"class":857},[847,2626,1022],{"class":857},[847,2628,2629,2631,2634],{"class":849,"line":1025},[847,2630,1050],{"class":857},[847,2632,2633],{"class":861}," [print])",[847,2635,881],{"class":857},[847,2637,2638],{"class":849,"line":1047},[847,2639,938],{"emptyLinePlaceholder":223},[847,2641,2642,2644,2646,2648],{"class":849,"line":1058},[847,2643,992],{"class":954},[847,2645,995],{"class":861},[847,2647,894],{"class":857},[847,2649,1000],{"class":857},[847,2651,2652,2655,2657,2659,2661,2663],{"class":849,"line":1063},[847,2653,2654],{"class":1006},"    white",[847,2656,1010],{"class":857},[847,2658,1013],{"class":857},[847,2660,1016],{"class":874},[847,2662,1019],{"class":857},[847,2664,1022],{"class":857},[847,2666,2667,2669,2671],{"class":849,"line":1075},[847,2668,1050],{"class":857},[847,2670,2633],{"class":861},[847,2672,881],{"class":857},[847,2674,2675],{"class":849,"line":1092},[847,2676,938],{"emptyLinePlaceholder":223},[847,2678,2679,2681,2683,2685],{"class":849,"line":1113},[847,2680,1130],{"class":853},[847,2682,1133],{"class":853},[847,2684,1136],{"class":861},[847,2686,881],{"class":857},[833,2688,2689],{"icon":154,"label":326},[837,2690,2692],{"className":1143,"code":2691,"filename":1145,"language":1146,"meta":843,"style":843},"._print\\:display\\:none {\n    @media print { display: none; }\n}\n\n._print\\:background-color\\:white {\n    @media print { background-color: #ffffff; }\n}\n",[697,2693,2694,2712,2727,2731,2735,2752,2768],{"__ignoreMap":843},[847,2695,2696,2698,2701,2703,2706,2708,2710],{"class":849,"line":850},[847,2697,828],{"class":857},[847,2699,2700],{"class":1155},"_print",[847,2702,1159],{"class":861},[847,2704,2705],{"class":1155},"display",[847,2707,1159],{"class":861},[847,2709,2118],{"class":1155},[847,2711,1000],{"class":857},[847,2713,2714,2717,2719,2721,2723,2725],{"class":849,"line":884},[847,2715,2716],{"class":861},"    @media print { ",[847,2718,2705],{"class":1167},[847,2720,1010],{"class":857},[847,2722,2236],{"class":861},[847,2724,1179],{"class":857},[847,2726,1182],{"class":857},[847,2728,2729],{"class":849,"line":913},[847,2730,1327],{"class":861},[847,2732,2733],{"class":849,"line":935},[847,2734,938],{"emptyLinePlaceholder":223},[847,2736,2737,2739,2741,2743,2745,2747,2750],{"class":849,"line":941},[847,2738,828],{"class":857},[847,2740,2700],{"class":1155},[847,2742,1159],{"class":861},[847,2744,1276],{"class":1155},[847,2746,1159],{"class":861},[847,2748,2749],{"class":1155},"white",[847,2751,1000],{"class":857},[847,2753,2754,2756,2758,2760,2762,2764,2766],{"class":849,"line":962},[847,2755,2716],{"class":861},[847,2757,1276],{"class":1167},[847,2759,1010],{"class":857},[847,2761,1173],{"class":857},[847,2763,1176],{"class":861},[847,2765,1179],{"class":857},[847,2767,1182],{"class":857},[847,2769,2770],{"class":849,"line":967},[847,2771,1327],{"class":861},[833,2773,2774],{"icon":520,"label":1390},[837,2775,2777],{"className":1393,"code":2776,"language":1395,"meta":843,"style":843},"\u003C!-- Hide navigation when printing -->\n\u003Cnav class=\"_print:display:none\">Site Navigation\u003C\u002Fnav>\n\n\u003C!-- White background for print -->\n\u003Cmain class=\"_print:background-color:white\">\n    Printable content\n\u003C\u002Fmain>\n",[697,2778,2779,2784,2813,2817,2822,2842,2847],{"__ignoreMap":843},[847,2780,2781],{"class":849,"line":850},[847,2782,2783],{"class":1866},"\u003C!-- Hide navigation when printing -->\n",[847,2785,2786,2788,2791,2793,2795,2797,2800,2802,2804,2807,2809,2811],{"class":849,"line":884},[847,2787,1402],{"class":857},[847,2789,2790],{"class":1006},"nav",[847,2792,1407],{"class":944},[847,2794,951],{"class":857},[847,2796,878],{"class":857},[847,2798,2799],{"class":874},"_print:display:none",[847,2801,878],{"class":857},[847,2803,1429],{"class":857},[847,2805,2806],{"class":861},"Site Navigation",[847,2808,1435],{"class":857},[847,2810,2790],{"class":1006},[847,2812,1419],{"class":857},[847,2814,2815],{"class":849,"line":913},[847,2816,938],{"emptyLinePlaceholder":223},[847,2818,2819],{"class":849,"line":935},[847,2820,2821],{"class":1866},"\u003C!-- White background for print -->\n",[847,2823,2824,2826,2829,2831,2833,2835,2838,2840],{"class":849,"line":941},[847,2825,1402],{"class":857},[847,2827,2828],{"class":1006},"main",[847,2830,1407],{"class":944},[847,2832,951],{"class":857},[847,2834,878],{"class":857},[847,2836,2837],{"class":874},"_print:background-color:white",[847,2839,878],{"class":857},[847,2841,1419],{"class":857},[847,2843,2844],{"class":849,"line":962},[847,2845,2846],{"class":861},"    Printable content\n",[847,2848,2849,2851,2853],{"class":849,"line":967},[847,2850,1435],{"class":857},[847,2852,2828],{"class":1006},[847,2854,1419],{"class":857},[1546,2856,1549],{"id":2857},"css-selector-7",[1551,2859,2860,2868],{},[1554,2861,2862],{},[1557,2863,2864,2866],{},[1560,2865,1562],{},[1560,2867,1914],{},[1566,2869,2870],{},[1557,2871,2872,2877],{},[1571,2873,2874],{},[697,2875,2876],{},"print",[1571,2878,2879],{},[697,2880,2881],{},"@media print",[715,2883,2885],{"id":2884},"useforcedcolorsmodifier",[697,2886,2887],{},"useForcedColorsModifier",[719,2889,801,2890,2893],{},[697,2891,2892],{},"useForcedColorsModifier()"," function creates a modifier that applies styles when forced colors mode is active (e.g., Windows High Contrast Mode).",[1546,2895,1549],{"id":2896},"css-selector-8",[1551,2898,2899,2907],{},[1554,2900,2901],{},[1557,2902,2903,2905],{},[1560,2904,1562],{},[1560,2906,1914],{},[1566,2908,2909],{},[1557,2910,2911,2916],{},[1571,2912,2913],{},[697,2914,2915],{},"forced-colors",[1571,2917,2918],{},[697,2919,2920],{},"@media (forced-colors: active)",[715,2922,2924],{"id":2923},"usemediapreferencemodifiers",[697,2925,699],{},[719,2927,801,2928,2931],{},[697,2929,2930],{},"useMediaPreferenceModifiers()"," function registers all media and preference modifiers at once and returns them as a destructurable object.",[2933,2934,2936],"h3",{"id":2935},"returned-modifiers","Returned Modifiers",[1551,2938,2939,2950],{},[1554,2940,2941],{},[1557,2942,2943,2946,2948],{},[1560,2944,2945],{},"Key",[1560,2947,1562],{},[1560,2949,1914],{},[1566,2951,2952,2966,2981,2996,3011,3026,3040,3054,3068],{},[1557,2953,2954,2958,2962],{},[1571,2955,2956],{},[697,2957,736],{},[1571,2959,2960],{},[697,2961,736],{},[1571,2963,2964],{},[697,2965,1579],{},[1557,2967,2968,2973,2977],{},[1571,2969,2970],{},[697,2971,2972],{},"motionSafe",[1571,2974,2975],{},[697,2976,1923],{},[1571,2978,2979],{},[697,2980,1928],{},[1557,2982,2983,2988,2992],{},[1571,2984,2985],{},[697,2986,2987],{},"motionReduce",[1571,2989,2990],{},[697,2991,2312],{},[1571,2993,2994],{},[697,2995,2317],{},[1557,2997,2998,3003,3007],{},[1571,2999,3000],{},[697,3001,3002],{},"contrastMore",[1571,3004,3005],{},[697,3006,2351],{},[1571,3008,3009],{},[697,3010,2356],{},[1557,3012,3013,3018,3022],{},[1571,3014,3015],{},[697,3016,3017],{},"contrastLess",[1571,3019,3020],{},[697,3021,2390],{},[1571,3023,3024],{},[697,3025,2395],{},[1557,3027,3028,3032,3036],{},[1571,3029,3030],{},[697,3031,2429],{},[1571,3033,3034],{},[697,3035,2429],{},[1571,3037,3038],{},[697,3039,2434],{},[1557,3041,3042,3046,3050],{},[1571,3043,3044],{},[697,3045,2468],{},[1571,3047,3048],{},[697,3049,2468],{},[1571,3051,3052],{},[697,3053,2473],{},[1557,3055,3056,3060,3064],{},[1571,3057,3058],{},[697,3059,2876],{},[1571,3061,3062],{},[697,3063,2876],{},[1571,3065,3066],{},[697,3067,2881],{},[1557,3069,3070,3075,3079],{},[1571,3071,3072],{},[697,3073,3074],{},"forcedColors",[1571,3076,3077],{},[697,3078,2915],{},[1571,3080,3081],{},[697,3082,2920],{},[715,3084,3086],{"id":3085},"examples","Examples",[2933,3088,3090],{"id":3089},"dark-mode-with-accessible-motion","Dark Mode with Accessible Motion",[830,3092,3093,3426],{},[833,3094,3095],{"icon":835,"label":290},[837,3096,3098],{"className":839,"code":3097,"filename":841,"language":842,"meta":843,"style":843},"import { styleframe } from \"styleframe\";\nimport {\n    useBackgroundColorUtility,\n    useTextColorUtility,\n    useTransitionDurationUtility,\n} from \"@styleframe\u002Ftheme\";\nimport { useMediaPreferenceModifiers } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst { dark, motionSafe, motionReduce } = useMediaPreferenceModifiers(s);\n\nuseBackgroundColorUtility(s, {\n    surface: '#ffffff',\n    'surface-dark': '#0f172a',\n}, [dark]);\n\nuseTextColorUtility(s, {\n    body: '#1e293b',\n    'body-dark': '#e2e8f0',\n}, [dark]);\n\nuseTransitionDurationUtility(s, {\n    200: '200ms',\n    0: '0ms',\n}, [motionSafe, motionReduce]);\n\nexport default s;\n",[697,3099,3100,3120,3126,3133,3140,3147,3162,3183,3187,3201,3205,3234,3238,3248,3262,3281,3289,3293,3303,3318,3338,3347,3352,3363,3380,3395,3410,3415],{"__ignoreMap":843},[847,3101,3102,3104,3106,3108,3110,3112,3114,3116,3118],{"class":849,"line":850},[847,3103,854],{"class":853},[847,3105,858],{"class":857},[847,3107,862],{"class":861},[847,3109,865],{"class":857},[847,3111,868],{"class":853},[847,3113,871],{"class":857},[847,3115,875],{"class":874},[847,3117,878],{"class":857},[847,3119,881],{"class":857},[847,3121,3122,3124],{"class":849,"line":884},[847,3123,854],{"class":853},[847,3125,1000],{"class":857},[847,3127,3128,3131],{"class":849,"line":913},[847,3129,3130],{"class":861},"    useBackgroundColorUtility",[847,3132,1022],{"class":857},[847,3134,3135,3138],{"class":849,"line":935},[847,3136,3137],{"class":861},"    useTextColorUtility",[847,3139,1022],{"class":857},[847,3141,3142,3145],{"class":849,"line":941},[847,3143,3144],{"class":861},"    useTransitionDurationUtility",[847,3146,1022],{"class":857},[847,3148,3149,3152,3154,3156,3158,3160],{"class":849,"line":962},[847,3150,3151],{"class":857},"}",[847,3153,868],{"class":853},[847,3155,871],{"class":857},[847,3157,906],{"class":874},[847,3159,878],{"class":857},[847,3161,881],{"class":857},[847,3163,3164,3166,3168,3171,3173,3175,3177,3179,3181],{"class":849,"line":967},[847,3165,854],{"class":853},[847,3167,858],{"class":857},[847,3169,3170],{"class":861}," useMediaPreferenceModifiers",[847,3172,865],{"class":857},[847,3174,868],{"class":853},[847,3176,871],{"class":857},[847,3178,906],{"class":874},[847,3180,878],{"class":857},[847,3182,881],{"class":857},[847,3184,3185],{"class":849,"line":984},[847,3186,938],{"emptyLinePlaceholder":223},[847,3188,3189,3191,3193,3195,3197,3199],{"class":849,"line":989},[847,3190,945],{"class":944},[847,3192,948],{"class":861},[847,3194,951],{"class":857},[847,3196,862],{"class":954},[847,3198,957],{"class":861},[847,3200,881],{"class":857},[847,3202,3203],{"class":849,"line":1003},[847,3204,938],{"emptyLinePlaceholder":223},[847,3206,3207,3209,3211,3214,3216,3219,3221,3223,3225,3228,3230,3232],{"class":849,"line":1025},[847,3208,945],{"class":944},[847,3210,858],{"class":857},[847,3212,3213],{"class":861}," dark",[847,3215,894],{"class":857},[847,3217,3218],{"class":861}," motionSafe",[847,3220,894],{"class":857},[847,3222,2044],{"class":861},[847,3224,3151],{"class":857},[847,3226,3227],{"class":857}," =",[847,3229,3170],{"class":954},[847,3231,979],{"class":861},[847,3233,881],{"class":857},[847,3235,3236],{"class":849,"line":1047},[847,3237,938],{"emptyLinePlaceholder":223},[847,3239,3240,3242,3244,3246],{"class":849,"line":1058},[847,3241,992],{"class":954},[847,3243,995],{"class":861},[847,3245,894],{"class":857},[847,3247,1000],{"class":857},[847,3249,3250,3252,3254,3256,3258,3260],{"class":849,"line":1063},[847,3251,1007],{"class":1006},[847,3253,1010],{"class":857},[847,3255,1013],{"class":857},[847,3257,1016],{"class":874},[847,3259,1019],{"class":857},[847,3261,1022],{"class":857},[847,3263,3264,3266,3268,3270,3272,3274,3277,3279],{"class":849,"line":1075},[847,3265,1028],{"class":857},[847,3267,1031],{"class":1006},[847,3269,1019],{"class":857},[847,3271,1010],{"class":857},[847,3273,1013],{"class":857},[847,3275,3276],{"class":874},"#0f172a",[847,3278,1019],{"class":857},[847,3280,1022],{"class":857},[847,3282,3283,3285,3287],{"class":849,"line":1092},[847,3284,1050],{"class":857},[847,3286,1053],{"class":861},[847,3288,881],{"class":857},[847,3290,3291],{"class":849,"line":1113},[847,3292,938],{"emptyLinePlaceholder":223},[847,3294,3295,3297,3299,3301],{"class":849,"line":1122},[847,3296,1066],{"class":954},[847,3298,995],{"class":861},[847,3300,894],{"class":857},[847,3302,1000],{"class":857},[847,3304,3305,3307,3309,3311,3314,3316],{"class":849,"line":1127},[847,3306,1078],{"class":1006},[847,3308,1010],{"class":857},[847,3310,1013],{"class":857},[847,3312,3313],{"class":874},"#1e293b",[847,3315,1019],{"class":857},[847,3317,1022],{"class":857},[847,3319,3321,3323,3326,3328,3330,3332,3334,3336],{"class":849,"line":3320},20,[847,3322,1028],{"class":857},[847,3324,3325],{"class":1006},"body-dark",[847,3327,1019],{"class":857},[847,3329,1010],{"class":857},[847,3331,1013],{"class":857},[847,3333,1106],{"class":874},[847,3335,1019],{"class":857},[847,3337,1022],{"class":857},[847,3339,3341,3343,3345],{"class":849,"line":3340},21,[847,3342,1050],{"class":857},[847,3344,1053],{"class":861},[847,3346,881],{"class":857},[847,3348,3350],{"class":849,"line":3349},22,[847,3351,938],{"emptyLinePlaceholder":223},[847,3353,3355,3357,3359,3361],{"class":849,"line":3354},23,[847,3356,1708],{"class":954},[847,3358,995],{"class":861},[847,3360,894],{"class":857},[847,3362,1000],{"class":857},[847,3364,3366,3369,3371,3373,3376,3378],{"class":849,"line":3365},24,[847,3367,3368],{"class":1719},"    200",[847,3370,1010],{"class":857},[847,3372,1013],{"class":857},[847,3374,3375],{"class":874},"200ms",[847,3377,1019],{"class":857},[847,3379,1022],{"class":857},[847,3381,3383,3385,3387,3389,3391,3393],{"class":849,"line":3382},25,[847,3384,2071],{"class":1719},[847,3386,1010],{"class":857},[847,3388,1013],{"class":857},[847,3390,2078],{"class":874},[847,3392,1019],{"class":857},[847,3394,1022],{"class":857},[847,3396,3398,3400,3403,3405,3408],{"class":849,"line":3397},26,[847,3399,1050],{"class":857},[847,3401,3402],{"class":861}," [motionSafe",[847,3404,894],{"class":857},[847,3406,3407],{"class":861}," motionReduce])",[847,3409,881],{"class":857},[847,3411,3413],{"class":849,"line":3412},27,[847,3414,938],{"emptyLinePlaceholder":223},[847,3416,3418,3420,3422,3424],{"class":849,"line":3417},28,[847,3419,1130],{"class":853},[847,3421,1133],{"class":853},[847,3423,1136],{"class":861},[847,3425,881],{"class":857},[833,3427,3428],{"icon":520,"label":1390},[837,3429,3431],{"className":1393,"code":3430,"language":1395,"meta":843,"style":843},"\u003Cdiv class=\"_background-color:surface _dark:background-color:surface-dark _text-color:body _dark:text-color:body-dark _motion-safe:transition-duration:200 _motion-reduce:transition-duration:0\">\n    Adaptive content\n\u003C\u002Fdiv>\n",[697,3432,3433,3452,3457],{"__ignoreMap":843},[847,3434,3435,3437,3439,3441,3443,3445,3448,3450],{"class":849,"line":850},[847,3436,1402],{"class":857},[847,3438,1874],{"class":1006},[847,3440,1407],{"class":944},[847,3442,951],{"class":857},[847,3444,878],{"class":857},[847,3446,3447],{"class":874},"_background-color:surface _dark:background-color:surface-dark _text-color:body _dark:text-color:body-dark _motion-safe:transition-duration:200 _motion-reduce:transition-duration:0",[847,3449,878],{"class":857},[847,3451,1419],{"class":857},[847,3453,3454],{"class":849,"line":884},[847,3455,3456],{"class":861},"    Adaptive content\n",[847,3458,3459,3461,3463],{"class":849,"line":913},[847,3460,1435],{"class":857},[847,3462,1874],{"class":1006},[847,3464,1419],{"class":857},[2933,3466,3468],{"id":3467},"print-friendly-layout","Print-Friendly Layout",[830,3470,3471,3735],{},[833,3472,3473],{"icon":835,"label":290},[837,3474,3476],{"className":839,"code":3475,"filename":841,"language":842,"meta":843,"style":843},"import { styleframe } from \"styleframe\";\nimport {\n    useDisplayUtility,\n    useBackgroundColorUtility,\n    useTextColorUtility,\n} from \"@styleframe\u002Ftheme\";\nimport { usePrintModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst print = usePrintModifier(s);\n\nuseDisplayUtility(s, {\n    none: 'none',\n    block: 'block',\n}, [print]);\n\nuseBackgroundColorUtility(s, {\n    transparent: 'transparent',\n}, [print]);\n\nuseTextColorUtility(s, {\n    black: '#000000',\n}, [print]);\n\nexport default s;\n",[697,3477,3478,3498,3504,3511,3517,3523,3537,3557,3561,3575,3579,3593,3597,3607,3621,3637,3645,3649,3659,3675,3683,3687,3697,3713,3721,3725],{"__ignoreMap":843},[847,3479,3480,3482,3484,3486,3488,3490,3492,3494,3496],{"class":849,"line":850},[847,3481,854],{"class":853},[847,3483,858],{"class":857},[847,3485,862],{"class":861},[847,3487,865],{"class":857},[847,3489,868],{"class":853},[847,3491,871],{"class":857},[847,3493,875],{"class":874},[847,3495,878],{"class":857},[847,3497,881],{"class":857},[847,3499,3500,3502],{"class":849,"line":884},[847,3501,854],{"class":853},[847,3503,1000],{"class":857},[847,3505,3506,3509],{"class":849,"line":913},[847,3507,3508],{"class":861},"    useDisplayUtility",[847,3510,1022],{"class":857},[847,3512,3513,3515],{"class":849,"line":935},[847,3514,3130],{"class":861},[847,3516,1022],{"class":857},[847,3518,3519,3521],{"class":849,"line":941},[847,3520,3137],{"class":861},[847,3522,1022],{"class":857},[847,3524,3525,3527,3529,3531,3533,3535],{"class":849,"line":962},[847,3526,3151],{"class":857},[847,3528,868],{"class":853},[847,3530,871],{"class":857},[847,3532,906],{"class":874},[847,3534,878],{"class":857},[847,3536,881],{"class":857},[847,3538,3539,3541,3543,3545,3547,3549,3551,3553,3555],{"class":849,"line":967},[847,3540,854],{"class":853},[847,3542,858],{"class":857},[847,3544,2548],{"class":861},[847,3546,865],{"class":857},[847,3548,868],{"class":853},[847,3550,871],{"class":857},[847,3552,906],{"class":874},[847,3554,878],{"class":857},[847,3556,881],{"class":857},[847,3558,3559],{"class":849,"line":984},[847,3560,938],{"emptyLinePlaceholder":223},[847,3562,3563,3565,3567,3569,3571,3573],{"class":849,"line":989},[847,3564,945],{"class":944},[847,3566,948],{"class":861},[847,3568,951],{"class":857},[847,3570,862],{"class":954},[847,3572,957],{"class":861},[847,3574,881],{"class":857},[847,3576,3577],{"class":849,"line":1003},[847,3578,938],{"emptyLinePlaceholder":223},[847,3580,3581,3583,3585,3587,3589,3591],{"class":849,"line":1025},[847,3582,945],{"class":944},[847,3584,2589],{"class":861},[847,3586,951],{"class":857},[847,3588,2548],{"class":954},[847,3590,979],{"class":861},[847,3592,881],{"class":857},[847,3594,3595],{"class":849,"line":1047},[847,3596,938],{"emptyLinePlaceholder":223},[847,3598,3599,3601,3603,3605],{"class":849,"line":1058},[847,3600,2606],{"class":954},[847,3602,995],{"class":861},[847,3604,894],{"class":857},[847,3606,1000],{"class":857},[847,3608,3609,3611,3613,3615,3617,3619],{"class":849,"line":1063},[847,3610,2111],{"class":1006},[847,3612,1010],{"class":857},[847,3614,1013],{"class":857},[847,3616,2118],{"class":874},[847,3618,1019],{"class":857},[847,3620,1022],{"class":857},[847,3622,3623,3626,3628,3630,3633,3635],{"class":849,"line":1075},[847,3624,3625],{"class":1006},"    block",[847,3627,1010],{"class":857},[847,3629,1013],{"class":857},[847,3631,3632],{"class":874},"block",[847,3634,1019],{"class":857},[847,3636,1022],{"class":857},[847,3638,3639,3641,3643],{"class":849,"line":1092},[847,3640,1050],{"class":857},[847,3642,2633],{"class":861},[847,3644,881],{"class":857},[847,3646,3647],{"class":849,"line":1113},[847,3648,938],{"emptyLinePlaceholder":223},[847,3650,3651,3653,3655,3657],{"class":849,"line":1122},[847,3652,992],{"class":954},[847,3654,995],{"class":861},[847,3656,894],{"class":857},[847,3658,1000],{"class":857},[847,3660,3661,3664,3666,3668,3671,3673],{"class":849,"line":1127},[847,3662,3663],{"class":1006},"    transparent",[847,3665,1010],{"class":857},[847,3667,1013],{"class":857},[847,3669,3670],{"class":874},"transparent",[847,3672,1019],{"class":857},[847,3674,1022],{"class":857},[847,3676,3677,3679,3681],{"class":849,"line":3320},[847,3678,1050],{"class":857},[847,3680,2633],{"class":861},[847,3682,881],{"class":857},[847,3684,3685],{"class":849,"line":3340},[847,3686,938],{"emptyLinePlaceholder":223},[847,3688,3689,3691,3693,3695],{"class":849,"line":3349},[847,3690,1066],{"class":954},[847,3692,995],{"class":861},[847,3694,894],{"class":857},[847,3696,1000],{"class":857},[847,3698,3699,3702,3704,3706,3709,3711],{"class":849,"line":3354},[847,3700,3701],{"class":1006},"    black",[847,3703,1010],{"class":857},[847,3705,1013],{"class":857},[847,3707,3708],{"class":874},"#000000",[847,3710,1019],{"class":857},[847,3712,1022],{"class":857},[847,3714,3715,3717,3719],{"class":849,"line":3365},[847,3716,1050],{"class":857},[847,3718,2633],{"class":861},[847,3720,881],{"class":857},[847,3722,3723],{"class":849,"line":3382},[847,3724,938],{"emptyLinePlaceholder":223},[847,3726,3727,3729,3731,3733],{"class":849,"line":3397},[847,3728,1130],{"class":853},[847,3730,1133],{"class":853},[847,3732,1136],{"class":861},[847,3734,881],{"class":857},[833,3736,3737],{"icon":520,"label":1390},[837,3738,3740],{"className":1393,"code":3739,"language":1395,"meta":843,"style":843},"\u003Cheader class=\"_print:display:none\">Site Header\u003C\u002Fheader>\n\u003Cnav class=\"_print:display:none\">Navigation\u003C\u002Fnav>\n\u003Cmain class=\"_print:background-color:transparent _print:text-color:black\">\n    \u003Carticle>Printable article content\u003C\u002Farticle>\n\u003C\u002Fmain>\n\u003Cfooter class=\"_print:display:none\">Site Footer\u003C\u002Ffooter>\n",[697,3741,3742,3770,3796,3815,3833,3841],{"__ignoreMap":843},[847,3743,3744,3746,3749,3751,3753,3755,3757,3759,3761,3764,3766,3768],{"class":849,"line":850},[847,3745,1402],{"class":857},[847,3747,3748],{"class":1006},"header",[847,3750,1407],{"class":944},[847,3752,951],{"class":857},[847,3754,878],{"class":857},[847,3756,2799],{"class":874},[847,3758,878],{"class":857},[847,3760,1429],{"class":857},[847,3762,3763],{"class":861},"Site Header",[847,3765,1435],{"class":857},[847,3767,3748],{"class":1006},[847,3769,1419],{"class":857},[847,3771,3772,3774,3776,3778,3780,3782,3784,3786,3788,3790,3792,3794],{"class":849,"line":884},[847,3773,1402],{"class":857},[847,3775,2790],{"class":1006},[847,3777,1407],{"class":944},[847,3779,951],{"class":857},[847,3781,878],{"class":857},[847,3783,2799],{"class":874},[847,3785,878],{"class":857},[847,3787,1429],{"class":857},[847,3789,376],{"class":861},[847,3791,1435],{"class":857},[847,3793,2790],{"class":1006},[847,3795,1419],{"class":857},[847,3797,3798,3800,3802,3804,3806,3808,3811,3813],{"class":849,"line":913},[847,3799,1402],{"class":857},[847,3801,2828],{"class":1006},[847,3803,1407],{"class":944},[847,3805,951],{"class":857},[847,3807,878],{"class":857},[847,3809,3810],{"class":874},"_print:background-color:transparent _print:text-color:black",[847,3812,878],{"class":857},[847,3814,1419],{"class":857},[847,3816,3817,3819,3822,3824,3827,3829,3831],{"class":849,"line":935},[847,3818,1424],{"class":857},[847,3820,3821],{"class":1006},"article",[847,3823,1429],{"class":857},[847,3825,3826],{"class":861},"Printable article content",[847,3828,1435],{"class":857},[847,3830,3821],{"class":1006},[847,3832,1419],{"class":857},[847,3834,3835,3837,3839],{"class":849,"line":941},[847,3836,1435],{"class":857},[847,3838,2828],{"class":1006},[847,3840,1419],{"class":857},[847,3842,3843,3845,3848,3850,3852,3854,3856,3858,3860,3863,3865,3867],{"class":849,"line":962},[847,3844,1402],{"class":857},[847,3846,3847],{"class":1006},"footer",[847,3849,1407],{"class":944},[847,3851,951],{"class":857},[847,3853,878],{"class":857},[847,3855,2799],{"class":874},[847,3857,878],{"class":857},[847,3859,1429],{"class":857},[847,3861,3862],{"class":861},"Site Footer",[847,3864,1435],{"class":857},[847,3866,3847],{"class":1006},[847,3868,1419],{"class":857},[715,3870,3872],{"id":3871},"best-practices","Best Practices",[754,3874,3875,3884,3893,3904,3913,3923],{},[757,3876,3877,3883],{},[692,3878,3879,3880,3882],{},"Use ",[697,3881,736],{}," for color scheme adaptation",": Provide alternative colors for dark mode without JavaScript",[757,3885,3886,3889,3890,3892],{},[692,3887,3888],{},"Always handle reduced motion",": Use ",[697,3891,2312],{}," to disable animations for users who need it",[757,3894,3895,3889,3898,3900,3901,3903],{},[692,3896,3897],{},"Choose between motion-safe and motion-reduce",[697,3899,1923],{}," to add animations (opt-in) or ",[697,3902,2312],{}," to remove them (opt-out)",[757,3905,3906,3909,3910,3912],{},[692,3907,3908],{},"Test print styles",": Use browser print preview to verify ",[697,3911,2876],{}," modifier results",[757,3914,3915,3889,3918,729,3920,3922],{},[692,3916,3917],{},"Consider contrast preferences",[697,3919,2351],{},[697,3921,2390],{}," for users with visual needs",[757,3924,3925,3928],{},[692,3926,3927],{},"Use forced-colors sparingly",": Only override forced colors mode when absolutely necessary for content comprehension",[715,3930,3932],{"id":3931},"faq","FAQ",[3934,3935,3936,3950,3961,3991],"accordion",{},[3937,3938,3879,3941,3943,3944,3946,3947,3949],"accordion-item",{"icon":3939,"label":3940},"i-lucide-circle-help","Should I use motion-safe or motion-reduce?",[697,3942,1923],{}," if you want animations to be opt-in (only animate when the user hasn't restricted motion). Use ",[697,3945,2312],{}," if you want to override specific animations when reduced motion is preferred. The ",[697,3948,1923],{}," approach is generally safer as it starts without animation and adds it when allowed.",[3937,3951,3953,3954,3956,3957,3960],{"icon":3939,"label":3952},"Can I combine dark with hover?","Yes! Use a nested array ",[697,3955,1453],{}," to generate a combined variant. The dark modifier wraps hover, producing nested selectors: ",[697,3958,3959],{},":is(.dark-theme, [data-theme=\"dark\"]) & { &:hover { ... } }",". This lets you create different hover effects for dark mode.",[3937,3962,3964,3965,3967,3968,3970,3971,3973,3974,3976,3977,3980,3981,3984,3985,3987,3988,3990],{"icon":3939,"label":3963},"Does the dark modifier work with data-theme?","Yes — ",[697,3966,818],{}," is exactly what it responds to. The ",[697,3969,798],{}," generates a single ",[697,3972,1579],{}," selector, matching the values set by the ",[697,3975,736],{}," theme. It does ",[692,3978,3979],{},"not"," emit ",[697,3982,3983],{},"@media (prefers-color-scheme: dark)","; to follow the operating-system preference, mirror it into ",[697,3986,818],{}," (see the ",[702,3989,827],{"href":826},").",[3937,3992,3994],{"icon":3939,"label":3993},"How do I test orientation modifiers?","Use browser developer tools to simulate different device orientations. In Chrome DevTools, toggle the device toolbar and rotate the viewport to test portrait and landscape modifiers.",[3996,3997,3998],"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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":843,"searchDepth":884,"depth":884,"links":4000},[4001,4002,4003,4004,4005,4006,4007,4008,4009,4010,4011,4012,4015,4019,4020],{"id":717,"depth":884,"text":78},{"id":748,"depth":884,"text":749},{"id":795,"depth":884,"text":798},{"id":1582,"depth":884,"text":1585},{"id":1931,"depth":884,"text":1934},{"id":2320,"depth":884,"text":2323},{"id":2359,"depth":884,"text":2362},{"id":2398,"depth":884,"text":2401},{"id":2437,"depth":884,"text":2440},{"id":2476,"depth":884,"text":2479},{"id":2884,"depth":884,"text":2887},{"id":2923,"depth":884,"text":699,"children":4013},[4014],{"id":2935,"depth":913,"text":2936},{"id":3085,"depth":884,"text":3086,"children":4016},[4017,4018],{"id":3089,"depth":913,"text":3090},{"id":3467,"depth":913,"text":3468},{"id":3871,"depth":884,"text":3872},{"id":3931,"depth":884,"text":3932},"Create media and preference modifiers for adaptive styling based on user preferences like dark mode, reduced motion, and more.","md",null,{},{"title":658,"icon":661},{"title":684,"description":4021},"h81kkH2B089Nj-SGS50mtcPAFOdp9PhsHgmmuygH0-U",[4029,4031],{"title":654,"path":655,"stem":656,"description":4030,"icon":429,"children":-1},"Create form state modifiers for styling form elements based on their validation and interaction states with full type safety.",{"title":663,"path":664,"stem":665,"description":4032,"icon":666,"children":-1},"Create other state modifiers for targeting open and inert elements with full type safety.",1781596356345]