[{"data":1,"prerenderedAt":4871},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-pseudo-state":682,"-docs-theme-modifiers-pseudo-state-surround":4866},{"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":4859,"extension":4860,"links":4861,"meta":4862,"navigation":4863,"path":674,"seo":4864,"stem":675,"__hash__":4865},"docs_theme\u002Fdocs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state.md","Pseudo-State Modifiers",{"type":686,"value":687,"toc":4839},"minimark",[688,714,718,734,738,741,773,779,786,1360,1365,1396,1402,1408,1724,1727,1751,1757,1763,2099,2102,2126,2132,2138,2429,2432,2455,2468,2474,2480,2757,2760,2784,2790,2796,3087,3090,3114,3120,3126,3430,3433,3457,3462,3468,3981,3986,4101,4105,4109,4482,4486,4723,4727,4776,4780,4835],[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",{},"usePseudoStateModifiers"," 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],{},"pseudoStates"," 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],"p",{},"Pseudo-state modifiers let you apply utility styles conditionally based on user interaction states. They wrap utility declarations in CSS pseudo-class selectors like ",[697,723,724],{},":hover",", ",[697,727,728],{},":focus",", and ",[697,731,732],{},":active",", generating variant utility classes that respond to user behavior.",[715,735,737],{"id":736},"why-use-pseudo-state-modifiers","Why Use Pseudo-State Modifiers?",[719,739,740],{},"Pseudo-state modifiers help you:",[742,743,744,751,761,767],"ul",{},[745,746,747,750],"li",{},[692,748,749],{},"Create interactive UIs",": Apply styles when users hover, focus, or click on elements",[745,752,753,756,757,760],{},[692,754,755],{},"Build accessible interfaces",": Use ",[697,758,759],{},"focus-visible"," for keyboard-only focus indicators",[745,762,763,766],{},[692,764,765],{},"Generate state variants",": Automatically create hover, focus, and active versions of any utility",[745,768,769,772],{},[692,770,771],{},"Keep styling declarative",": Express interactive states directly in your HTML class names",[715,774,776],{"id":775},"usehovermodifier",[697,777,778],{},"useHoverModifier",[719,780,781,782,785],{},"The ",[697,783,784],{},"useHoverModifier()"," function creates a modifier that applies styles when the user hovers over an element.",[787,788,789,1141,1307],"tabs",{},[790,791,793],"tabs-item",{"icon":792,"label":290},"i-lucide-code",[794,795,801],"pre",{"className":796,"code":797,"filename":798,"language":799,"meta":800,"style":800},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useBackgroundColorUtility } from \"@styleframe\u002Ftheme\";\nimport { useHoverModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { colorPrimary, colorSecondary } = useColorDesignTokens(s, {\n    primary: '#006cff',\n    secondary: '#6c757d',\n} as const);\n\nconst hover = useHoverModifier(s);\n\nuseBackgroundColorUtility(s, {\n    primary: ref(colorPrimary),\n    secondary: ref(colorSecondary),\n}, [hover]);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,802,803,839,862,884,906,912,933,954,959,989,1011,1028,1044,1049,1066,1071,1083,1098,1112,1123,1128],{"__ignoreMap":800},[804,805,808,812,816,820,823,826,829,833,836],"span",{"class":806,"line":807},"line",1,[804,809,811],{"class":810},"s7zQu","import",[804,813,815],{"class":814},"sMK4o"," {",[804,817,819],{"class":818},"sTEyZ"," styleframe",[804,821,822],{"class":814}," }",[804,824,825],{"class":810}," from",[804,827,828],{"class":814}," \"",[804,830,832],{"class":831},"sfazB","styleframe",[804,834,835],{"class":814},"\"",[804,837,838],{"class":814},";\n",[804,840,842,844,846,849,851,853,855,858,860],{"class":806,"line":841},2,[804,843,811],{"class":810},[804,845,815],{"class":814},[804,847,848],{"class":818}," useColorDesignTokens",[804,850,822],{"class":814},[804,852,825],{"class":810},[804,854,828],{"class":814},[804,856,857],{"class":831},"@styleframe\u002Ftheme",[804,859,835],{"class":814},[804,861,838],{"class":814},[804,863,865,867,869,872,874,876,878,880,882],{"class":806,"line":864},3,[804,866,811],{"class":810},[804,868,815],{"class":814},[804,870,871],{"class":818}," useBackgroundColorUtility",[804,873,822],{"class":814},[804,875,825],{"class":810},[804,877,828],{"class":814},[804,879,857],{"class":831},[804,881,835],{"class":814},[804,883,838],{"class":814},[804,885,887,889,891,894,896,898,900,902,904],{"class":806,"line":886},4,[804,888,811],{"class":810},[804,890,815],{"class":814},[804,892,893],{"class":818}," useHoverModifier",[804,895,822],{"class":814},[804,897,825],{"class":810},[804,899,828],{"class":814},[804,901,857],{"class":831},[804,903,835],{"class":814},[804,905,838],{"class":814},[804,907,909],{"class":806,"line":908},5,[804,910,911],{"emptyLinePlaceholder":223},"\n",[804,913,915,919,922,925,928,931],{"class":806,"line":914},6,[804,916,918],{"class":917},"spNyl","const",[804,920,921],{"class":818}," s ",[804,923,924],{"class":814},"=",[804,926,819],{"class":927},"s2Zo4",[804,929,930],{"class":818},"()",[804,932,838],{"class":814},[804,934,936,938,940,943,946,949,952],{"class":806,"line":935},7,[804,937,918],{"class":917},[804,939,815],{"class":814},[804,941,942],{"class":818}," ref ",[804,944,945],{"class":814},"}",[804,947,948],{"class":814}," =",[804,950,951],{"class":818}," s",[804,953,838],{"class":814},[804,955,957],{"class":806,"line":956},8,[804,958,911],{"emptyLinePlaceholder":223},[804,960,962,964,966,969,972,975,977,979,981,984,986],{"class":806,"line":961},9,[804,963,918],{"class":917},[804,965,815],{"class":814},[804,967,968],{"class":818}," colorPrimary",[804,970,971],{"class":814},",",[804,973,974],{"class":818}," colorSecondary ",[804,976,945],{"class":814},[804,978,948],{"class":814},[804,980,848],{"class":927},[804,982,983],{"class":818},"(s",[804,985,971],{"class":814},[804,987,988],{"class":814}," {\n",[804,990,992,996,999,1002,1005,1008],{"class":806,"line":991},10,[804,993,995],{"class":994},"swJcz","    primary",[804,997,998],{"class":814},":",[804,1000,1001],{"class":814}," '",[804,1003,1004],{"class":831},"#006cff",[804,1006,1007],{"class":814},"'",[804,1009,1010],{"class":814},",\n",[804,1012,1014,1017,1019,1021,1024,1026],{"class":806,"line":1013},11,[804,1015,1016],{"class":994},"    secondary",[804,1018,998],{"class":814},[804,1020,1001],{"class":814},[804,1022,1023],{"class":831},"#6c757d",[804,1025,1007],{"class":814},[804,1027,1010],{"class":814},[804,1029,1031,1033,1036,1039,1042],{"class":806,"line":1030},12,[804,1032,945],{"class":814},[804,1034,1035],{"class":810}," as",[804,1037,1038],{"class":917}," const",[804,1040,1041],{"class":818},")",[804,1043,838],{"class":814},[804,1045,1047],{"class":806,"line":1046},13,[804,1048,911],{"emptyLinePlaceholder":223},[804,1050,1052,1054,1057,1059,1061,1064],{"class":806,"line":1051},14,[804,1053,918],{"class":917},[804,1055,1056],{"class":818}," hover ",[804,1058,924],{"class":814},[804,1060,893],{"class":927},[804,1062,1063],{"class":818},"(s)",[804,1065,838],{"class":814},[804,1067,1069],{"class":806,"line":1068},15,[804,1070,911],{"emptyLinePlaceholder":223},[804,1072,1074,1077,1079,1081],{"class":806,"line":1073},16,[804,1075,1076],{"class":927},"useBackgroundColorUtility",[804,1078,983],{"class":818},[804,1080,971],{"class":814},[804,1082,988],{"class":814},[804,1084,1086,1088,1090,1093,1096],{"class":806,"line":1085},17,[804,1087,995],{"class":994},[804,1089,998],{"class":814},[804,1091,1092],{"class":927}," ref",[804,1094,1095],{"class":818},"(colorPrimary)",[804,1097,1010],{"class":814},[804,1099,1101,1103,1105,1107,1110],{"class":806,"line":1100},18,[804,1102,1016],{"class":994},[804,1104,998],{"class":814},[804,1106,1092],{"class":927},[804,1108,1109],{"class":818},"(colorSecondary)",[804,1111,1010],{"class":814},[804,1113,1115,1118,1121],{"class":806,"line":1114},19,[804,1116,1117],{"class":814},"},",[804,1119,1120],{"class":818}," [hover])",[804,1122,838],{"class":814},[804,1124,1126],{"class":806,"line":1125},20,[804,1127,911],{"emptyLinePlaceholder":223},[804,1129,1131,1134,1137,1139],{"class":806,"line":1130},21,[804,1132,1133],{"class":810},"export",[804,1135,1136],{"class":810}," default",[804,1138,951],{"class":818},[804,1140,838],{"class":814},[790,1142,1143],{"icon":154,"label":326},[794,1144,1149],{"className":1145,"code":1146,"filename":1147,"language":1148,"meta":800,"style":800},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._background-color\\:primary { background-color: var(--color--primary); }\n._background-color\\:secondary { background-color: var(--color--secondary); }\n\n._hover\\:background-color\\:primary {\n    &:hover { background-color: var(--color--primary); }\n}\n\n._hover\\:background-color\\:secondary {\n    &:hover { background-color: var(--color--secondary); }\n}\n","styleframe\u002Findex.css","css",[697,1150,1151,1189,1217,1221,1239,1260,1265,1269,1285,1303],{"__ignoreMap":800},[804,1152,1153,1156,1160,1163,1166,1168,1172,1174,1177,1180,1183,1186],{"class":806,"line":807},[804,1154,1155],{"class":814},".",[804,1157,1159],{"class":1158},"sBMFI","_background-color",[804,1161,1162],{"class":818},"\\:",[804,1164,1165],{"class":1158},"primary",[804,1167,815],{"class":814},[804,1169,1171],{"class":1170},"sqsOY"," background-color",[804,1173,998],{"class":814},[804,1175,1176],{"class":927}," var",[804,1178,1179],{"class":814},"(",[804,1181,1182],{"class":818},"--color--primary",[804,1184,1185],{"class":814},");",[804,1187,1188],{"class":814}," }\n",[804,1190,1191,1193,1195,1197,1200,1202,1204,1206,1208,1210,1213,1215],{"class":806,"line":841},[804,1192,1155],{"class":814},[804,1194,1159],{"class":1158},[804,1196,1162],{"class":818},[804,1198,1199],{"class":1158},"secondary",[804,1201,815],{"class":814},[804,1203,1171],{"class":1170},[804,1205,998],{"class":814},[804,1207,1176],{"class":927},[804,1209,1179],{"class":814},[804,1211,1212],{"class":818},"--color--secondary",[804,1214,1185],{"class":814},[804,1216,1188],{"class":814},[804,1218,1219],{"class":806,"line":864},[804,1220,911],{"emptyLinePlaceholder":223},[804,1222,1223,1225,1228,1230,1233,1235,1237],{"class":806,"line":886},[804,1224,1155],{"class":814},[804,1226,1227],{"class":1158},"_hover",[804,1229,1162],{"class":818},[804,1231,1232],{"class":1158},"background-color",[804,1234,1162],{"class":818},[804,1236,1165],{"class":1158},[804,1238,988],{"class":814},[804,1240,1241,1244,1246,1249,1252,1254,1256,1258],{"class":806,"line":908},[804,1242,1243],{"class":818},"    &",[804,1245,998],{"class":814},[804,1247,1248],{"class":818},"hover { background-color: ",[804,1250,1251],{"class":927},"var",[804,1253,1179],{"class":814},[804,1255,1182],{"class":818},[804,1257,1185],{"class":814},[804,1259,1188],{"class":814},[804,1261,1262],{"class":806,"line":914},[804,1263,1264],{"class":818},"}\n",[804,1266,1267],{"class":806,"line":935},[804,1268,911],{"emptyLinePlaceholder":223},[804,1270,1271,1273,1275,1277,1279,1281,1283],{"class":806,"line":956},[804,1272,1155],{"class":814},[804,1274,1227],{"class":1158},[804,1276,1162],{"class":818},[804,1278,1232],{"class":1158},[804,1280,1162],{"class":818},[804,1282,1199],{"class":1158},[804,1284,988],{"class":814},[804,1286,1287,1289,1291,1293,1295,1297,1299,1301],{"class":806,"line":961},[804,1288,1243],{"class":818},[804,1290,998],{"class":814},[804,1292,1248],{"class":818},[804,1294,1251],{"class":927},[804,1296,1179],{"class":814},[804,1298,1212],{"class":818},[804,1300,1185],{"class":814},[804,1302,1188],{"class":814},[804,1304,1305],{"class":806,"line":991},[804,1306,1264],{"class":818},[790,1308,1310],{"icon":520,"label":1309},"Usage",[794,1311,1315],{"className":1312,"code":1313,"language":1314,"meta":800,"style":800},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Change background on hover -->\n\u003Cbutton class=\"_background-color:secondary _hover:background-color:primary\">\n    Hover me\n\u003C\u002Fbutton>\n","html",[697,1316,1317,1323,1346,1351],{"__ignoreMap":800},[804,1318,1319],{"class":806,"line":807},[804,1320,1322],{"class":1321},"sHwdD","\u003C!-- Change background on hover -->\n",[804,1324,1325,1328,1331,1334,1336,1338,1341,1343],{"class":806,"line":841},[804,1326,1327],{"class":814},"\u003C",[804,1329,1330],{"class":994},"button",[804,1332,1333],{"class":917}," class",[804,1335,924],{"class":814},[804,1337,835],{"class":814},[804,1339,1340],{"class":831},"_background-color:secondary _hover:background-color:primary",[804,1342,835],{"class":814},[804,1344,1345],{"class":814},">\n",[804,1347,1348],{"class":806,"line":864},[804,1349,1350],{"class":818},"    Hover me\n",[804,1352,1353,1356,1358],{"class":806,"line":886},[804,1354,1355],{"class":814},"\u003C\u002F",[804,1357,1330],{"class":994},[804,1359,1345],{"class":814},[1361,1362,1364],"h4",{"id":1363},"css-selector","CSS Selector",[1366,1367,1368,1380],"table",{},[1369,1370,1371],"thead",{},[1372,1373,1374,1378],"tr",{},[1375,1376,1377],"th",{},"Modifier Name",[1375,1379,1364],{},[1381,1382,1383],"tbody",{},[1372,1384,1385,1391],{},[1386,1387,1388],"td",{},[697,1389,1390],{},"hover",[1386,1392,1393],{},[697,1394,1395],{},"&:hover",[715,1397,1399],{"id":1398},"usefocusmodifier",[697,1400,1401],{},"useFocusModifier",[719,1403,781,1404,1407],{},[697,1405,1406],{},"useFocusModifier()"," function creates a modifier that applies styles when an element receives focus.",[787,1409,1410,1569,1668],{},[790,1411,1412],{"icon":792,"label":290},[794,1413,1415],{"className":796,"code":1414,"filename":798,"language":799,"meta":800,"style":800},"import { styleframe } from \"styleframe\";\nimport { useRingUtility } from \"@styleframe\u002Ftheme\";\nimport { useFocusModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst focus = useFocusModifier(s);\n\nuseRingUtility(s, {\n    primary: '0 0 0 2px #006cff',\n}, [focus]);\n\nexport default s;\n",[697,1416,1417,1437,1458,1479,1483,1497,1501,1516,1520,1531,1546,1555,1559],{"__ignoreMap":800},[804,1418,1419,1421,1423,1425,1427,1429,1431,1433,1435],{"class":806,"line":807},[804,1420,811],{"class":810},[804,1422,815],{"class":814},[804,1424,819],{"class":818},[804,1426,822],{"class":814},[804,1428,825],{"class":810},[804,1430,828],{"class":814},[804,1432,832],{"class":831},[804,1434,835],{"class":814},[804,1436,838],{"class":814},[804,1438,1439,1441,1443,1446,1448,1450,1452,1454,1456],{"class":806,"line":841},[804,1440,811],{"class":810},[804,1442,815],{"class":814},[804,1444,1445],{"class":818}," useRingUtility",[804,1447,822],{"class":814},[804,1449,825],{"class":810},[804,1451,828],{"class":814},[804,1453,857],{"class":831},[804,1455,835],{"class":814},[804,1457,838],{"class":814},[804,1459,1460,1462,1464,1467,1469,1471,1473,1475,1477],{"class":806,"line":864},[804,1461,811],{"class":810},[804,1463,815],{"class":814},[804,1465,1466],{"class":818}," useFocusModifier",[804,1468,822],{"class":814},[804,1470,825],{"class":810},[804,1472,828],{"class":814},[804,1474,857],{"class":831},[804,1476,835],{"class":814},[804,1478,838],{"class":814},[804,1480,1481],{"class":806,"line":886},[804,1482,911],{"emptyLinePlaceholder":223},[804,1484,1485,1487,1489,1491,1493,1495],{"class":806,"line":908},[804,1486,918],{"class":917},[804,1488,921],{"class":818},[804,1490,924],{"class":814},[804,1492,819],{"class":927},[804,1494,930],{"class":818},[804,1496,838],{"class":814},[804,1498,1499],{"class":806,"line":914},[804,1500,911],{"emptyLinePlaceholder":223},[804,1502,1503,1505,1508,1510,1512,1514],{"class":806,"line":935},[804,1504,918],{"class":917},[804,1506,1507],{"class":818}," focus ",[804,1509,924],{"class":814},[804,1511,1466],{"class":927},[804,1513,1063],{"class":818},[804,1515,838],{"class":814},[804,1517,1518],{"class":806,"line":956},[804,1519,911],{"emptyLinePlaceholder":223},[804,1521,1522,1525,1527,1529],{"class":806,"line":961},[804,1523,1524],{"class":927},"useRingUtility",[804,1526,983],{"class":818},[804,1528,971],{"class":814},[804,1530,988],{"class":814},[804,1532,1533,1535,1537,1539,1542,1544],{"class":806,"line":991},[804,1534,995],{"class":994},[804,1536,998],{"class":814},[804,1538,1001],{"class":814},[804,1540,1541],{"class":831},"0 0 0 2px #006cff",[804,1543,1007],{"class":814},[804,1545,1010],{"class":814},[804,1547,1548,1550,1553],{"class":806,"line":1013},[804,1549,1117],{"class":814},[804,1551,1552],{"class":818}," [focus])",[804,1554,838],{"class":814},[804,1556,1557],{"class":806,"line":1030},[804,1558,911],{"emptyLinePlaceholder":223},[804,1560,1561,1563,1565,1567],{"class":806,"line":1046},[804,1562,1133],{"class":810},[804,1564,1136],{"class":810},[804,1566,951],{"class":818},[804,1568,838],{"class":814},[790,1570,1571],{"icon":154,"label":326},[794,1572,1574],{"className":1145,"code":1573,"filename":1147,"language":1148,"meta":800,"style":800},"._ring\\:primary { box-shadow: 0 0 0 2px #006cff; }\n\n._focus\\:ring\\:primary {\n    &:focus { box-shadow: 0 0 0 2px #006cff; }\n}\n",[697,1575,1576,1616,1620,1638,1664],{"__ignoreMap":800},[804,1577,1578,1580,1583,1585,1587,1589,1592,1594,1598,1600,1602,1605,1608,1611,1614],{"class":806,"line":807},[804,1579,1155],{"class":814},[804,1581,1582],{"class":1158},"_ring",[804,1584,1162],{"class":818},[804,1586,1165],{"class":1158},[804,1588,815],{"class":814},[804,1590,1591],{"class":1170}," box-shadow",[804,1593,998],{"class":814},[804,1595,1597],{"class":1596},"sbssI"," 0",[804,1599,1597],{"class":1596},[804,1601,1597],{"class":1596},[804,1603,1604],{"class":1596}," 2px",[804,1606,1607],{"class":814}," #",[804,1609,1610],{"class":818},"006cff",[804,1612,1613],{"class":814},";",[804,1615,1188],{"class":814},[804,1617,1618],{"class":806,"line":841},[804,1619,911],{"emptyLinePlaceholder":223},[804,1621,1622,1624,1627,1629,1632,1634,1636],{"class":806,"line":864},[804,1623,1155],{"class":814},[804,1625,1626],{"class":1158},"_focus",[804,1628,1162],{"class":818},[804,1630,1631],{"class":1158},"ring",[804,1633,1162],{"class":818},[804,1635,1165],{"class":1158},[804,1637,988],{"class":814},[804,1639,1640,1642,1644,1647,1650,1652,1654,1656,1658,1660,1662],{"class":806,"line":886},[804,1641,1243],{"class":818},[804,1643,998],{"class":814},[804,1645,1646],{"class":818},"focus { box-shadow: ",[804,1648,1649],{"class":1596},"0",[804,1651,1597],{"class":1596},[804,1653,1597],{"class":1596},[804,1655,1604],{"class":1596},[804,1657,1607],{"class":814},[804,1659,1610],{"class":818},[804,1661,1613],{"class":814},[804,1663,1188],{"class":814},[804,1665,1666],{"class":806,"line":908},[804,1667,1264],{"class":818},[790,1669,1670],{"icon":520,"label":1309},[794,1671,1673],{"className":1312,"code":1672,"language":1314,"meta":800,"style":800},"\u003C!-- Add focus ring on focus -->\n\u003Cinput class=\"_focus:ring:primary\" type=\"text\" placeholder=\"Focus me\">\n",[697,1674,1675,1680],{"__ignoreMap":800},[804,1676,1677],{"class":806,"line":807},[804,1678,1679],{"class":1321},"\u003C!-- Add focus ring on focus -->\n",[804,1681,1682,1684,1687,1689,1691,1693,1696,1698,1701,1703,1705,1708,1710,1713,1715,1717,1720,1722],{"class":806,"line":841},[804,1683,1327],{"class":814},[804,1685,1686],{"class":994},"input",[804,1688,1333],{"class":917},[804,1690,924],{"class":814},[804,1692,835],{"class":814},[804,1694,1695],{"class":831},"_focus:ring:primary",[804,1697,835],{"class":814},[804,1699,1700],{"class":917}," type",[804,1702,924],{"class":814},[804,1704,835],{"class":814},[804,1706,1707],{"class":831},"text",[804,1709,835],{"class":814},[804,1711,1712],{"class":917}," placeholder",[804,1714,924],{"class":814},[804,1716,835],{"class":814},[804,1718,1719],{"class":831},"Focus me",[804,1721,835],{"class":814},[804,1723,1345],{"class":814},[1361,1725,1364],{"id":1726},"css-selector-1",[1366,1728,1729,1737],{},[1369,1730,1731],{},[1372,1732,1733,1735],{},[1375,1734,1377],{},[1375,1736,1364],{},[1381,1738,1739],{},[1372,1740,1741,1746],{},[1386,1742,1743],{},[697,1744,1745],{},"focus",[1386,1747,1748],{},[697,1749,1750],{},"&:focus",[715,1752,1754],{"id":1753},"usefocuswithinmodifier",[697,1755,1756],{},"useFocusWithinModifier",[719,1758,781,1759,1762],{},[697,1760,1761],{},"useFocusWithinModifier()"," function creates a modifier that applies styles when any child element receives focus.",[787,1764,1765,1923,2000],{},[790,1766,1767],{"icon":792,"label":290},[794,1768,1770],{"className":796,"code":1769,"filename":798,"language":799,"meta":800,"style":800},"import { styleframe } from \"styleframe\";\nimport { useBorderColorUtility } from \"@styleframe\u002Ftheme\";\nimport { useFocusWithinModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst focusWithin = useFocusWithinModifier(s);\n\nuseBorderColorUtility(s, {\n    primary: '#006cff',\n}, [focusWithin]);\n\nexport default s;\n",[697,1771,1772,1792,1813,1834,1838,1852,1856,1871,1875,1886,1900,1909,1913],{"__ignoreMap":800},[804,1773,1774,1776,1778,1780,1782,1784,1786,1788,1790],{"class":806,"line":807},[804,1775,811],{"class":810},[804,1777,815],{"class":814},[804,1779,819],{"class":818},[804,1781,822],{"class":814},[804,1783,825],{"class":810},[804,1785,828],{"class":814},[804,1787,832],{"class":831},[804,1789,835],{"class":814},[804,1791,838],{"class":814},[804,1793,1794,1796,1798,1801,1803,1805,1807,1809,1811],{"class":806,"line":841},[804,1795,811],{"class":810},[804,1797,815],{"class":814},[804,1799,1800],{"class":818}," useBorderColorUtility",[804,1802,822],{"class":814},[804,1804,825],{"class":810},[804,1806,828],{"class":814},[804,1808,857],{"class":831},[804,1810,835],{"class":814},[804,1812,838],{"class":814},[804,1814,1815,1817,1819,1822,1824,1826,1828,1830,1832],{"class":806,"line":864},[804,1816,811],{"class":810},[804,1818,815],{"class":814},[804,1820,1821],{"class":818}," useFocusWithinModifier",[804,1823,822],{"class":814},[804,1825,825],{"class":810},[804,1827,828],{"class":814},[804,1829,857],{"class":831},[804,1831,835],{"class":814},[804,1833,838],{"class":814},[804,1835,1836],{"class":806,"line":886},[804,1837,911],{"emptyLinePlaceholder":223},[804,1839,1840,1842,1844,1846,1848,1850],{"class":806,"line":908},[804,1841,918],{"class":917},[804,1843,921],{"class":818},[804,1845,924],{"class":814},[804,1847,819],{"class":927},[804,1849,930],{"class":818},[804,1851,838],{"class":814},[804,1853,1854],{"class":806,"line":914},[804,1855,911],{"emptyLinePlaceholder":223},[804,1857,1858,1860,1863,1865,1867,1869],{"class":806,"line":935},[804,1859,918],{"class":917},[804,1861,1862],{"class":818}," focusWithin ",[804,1864,924],{"class":814},[804,1866,1821],{"class":927},[804,1868,1063],{"class":818},[804,1870,838],{"class":814},[804,1872,1873],{"class":806,"line":956},[804,1874,911],{"emptyLinePlaceholder":223},[804,1876,1877,1880,1882,1884],{"class":806,"line":961},[804,1878,1879],{"class":927},"useBorderColorUtility",[804,1881,983],{"class":818},[804,1883,971],{"class":814},[804,1885,988],{"class":814},[804,1887,1888,1890,1892,1894,1896,1898],{"class":806,"line":991},[804,1889,995],{"class":994},[804,1891,998],{"class":814},[804,1893,1001],{"class":814},[804,1895,1004],{"class":831},[804,1897,1007],{"class":814},[804,1899,1010],{"class":814},[804,1901,1902,1904,1907],{"class":806,"line":1013},[804,1903,1117],{"class":814},[804,1905,1906],{"class":818}," [focusWithin])",[804,1908,838],{"class":814},[804,1910,1911],{"class":806,"line":1030},[804,1912,911],{"emptyLinePlaceholder":223},[804,1914,1915,1917,1919,1921],{"class":806,"line":1046},[804,1916,1133],{"class":810},[804,1918,1136],{"class":810},[804,1920,951],{"class":818},[804,1922,838],{"class":814},[790,1924,1925],{"icon":154,"label":326},[794,1926,1928],{"className":1145,"code":1927,"filename":1147,"language":1148,"meta":800,"style":800},"._border-color\\:primary { border-color: #006cff; }\n\n._focus-within\\:border-color\\:primary {\n    &:focus-within { border-color: #006cff; }\n}\n",[697,1929,1930,1956,1960,1978,1996],{"__ignoreMap":800},[804,1931,1932,1934,1937,1939,1941,1943,1946,1948,1950,1952,1954],{"class":806,"line":807},[804,1933,1155],{"class":814},[804,1935,1936],{"class":1158},"_border-color",[804,1938,1162],{"class":818},[804,1940,1165],{"class":1158},[804,1942,815],{"class":814},[804,1944,1945],{"class":1170}," border-color",[804,1947,998],{"class":814},[804,1949,1607],{"class":814},[804,1951,1610],{"class":818},[804,1953,1613],{"class":814},[804,1955,1188],{"class":814},[804,1957,1958],{"class":806,"line":841},[804,1959,911],{"emptyLinePlaceholder":223},[804,1961,1962,1964,1967,1969,1972,1974,1976],{"class":806,"line":864},[804,1963,1155],{"class":814},[804,1965,1966],{"class":1158},"_focus-within",[804,1968,1162],{"class":818},[804,1970,1971],{"class":1158},"border-color",[804,1973,1162],{"class":818},[804,1975,1165],{"class":1158},[804,1977,988],{"class":814},[804,1979,1980,1982,1984,1987,1990,1992,1994],{"class":806,"line":886},[804,1981,1243],{"class":818},[804,1983,998],{"class":814},[804,1985,1986],{"class":818},"focus-within { border-color: ",[804,1988,1989],{"class":814},"#",[804,1991,1610],{"class":818},[804,1993,1613],{"class":814},[804,1995,1188],{"class":814},[804,1997,1998],{"class":806,"line":908},[804,1999,1264],{"class":818},[790,2001,2002],{"icon":520,"label":1309},[794,2003,2005],{"className":1312,"code":2004,"language":1314,"meta":800,"style":800},"\u003C!-- Highlight form group when any input is focused -->\n\u003Cdiv class=\"_focus-within:border-color:primary\">\n    \u003Cinput type=\"text\" placeholder=\"Focus any input\">\n    \u003Cinput type=\"text\" placeholder=\"Or this one\">\n\u003C\u002Fdiv>\n",[697,2006,2007,2012,2032,2062,2091],{"__ignoreMap":800},[804,2008,2009],{"class":806,"line":807},[804,2010,2011],{"class":1321},"\u003C!-- Highlight form group when any input is focused -->\n",[804,2013,2014,2016,2019,2021,2023,2025,2028,2030],{"class":806,"line":841},[804,2015,1327],{"class":814},[804,2017,2018],{"class":994},"div",[804,2020,1333],{"class":917},[804,2022,924],{"class":814},[804,2024,835],{"class":814},[804,2026,2027],{"class":831},"_focus-within:border-color:primary",[804,2029,835],{"class":814},[804,2031,1345],{"class":814},[804,2033,2034,2037,2039,2041,2043,2045,2047,2049,2051,2053,2055,2058,2060],{"class":806,"line":864},[804,2035,2036],{"class":814},"    \u003C",[804,2038,1686],{"class":994},[804,2040,1700],{"class":917},[804,2042,924],{"class":814},[804,2044,835],{"class":814},[804,2046,1707],{"class":831},[804,2048,835],{"class":814},[804,2050,1712],{"class":917},[804,2052,924],{"class":814},[804,2054,835],{"class":814},[804,2056,2057],{"class":831},"Focus any input",[804,2059,835],{"class":814},[804,2061,1345],{"class":814},[804,2063,2064,2066,2068,2070,2072,2074,2076,2078,2080,2082,2084,2087,2089],{"class":806,"line":886},[804,2065,2036],{"class":814},[804,2067,1686],{"class":994},[804,2069,1700],{"class":917},[804,2071,924],{"class":814},[804,2073,835],{"class":814},[804,2075,1707],{"class":831},[804,2077,835],{"class":814},[804,2079,1712],{"class":917},[804,2081,924],{"class":814},[804,2083,835],{"class":814},[804,2085,2086],{"class":831},"Or this one",[804,2088,835],{"class":814},[804,2090,1345],{"class":814},[804,2092,2093,2095,2097],{"class":806,"line":908},[804,2094,1355],{"class":814},[804,2096,2018],{"class":994},[804,2098,1345],{"class":814},[1361,2100,1364],{"id":2101},"css-selector-2",[1366,2103,2104,2112],{},[1369,2105,2106],{},[1372,2107,2108,2110],{},[1375,2109,1377],{},[1375,2111,1364],{},[1381,2113,2114],{},[1372,2115,2116,2121],{},[1386,2117,2118],{},[697,2119,2120],{},"focus-within",[1386,2122,2123],{},[697,2124,2125],{},"&:focus-within",[715,2127,2129],{"id":2128},"usefocusvisiblemodifier",[697,2130,2131],{},"useFocusVisibleModifier",[719,2133,781,2134,2137],{},[697,2135,2136],{},"useFocusVisibleModifier()"," function creates a modifier that applies styles only when focus is visible (typically keyboard navigation).",[787,2139,2140,2299,2385],{},[790,2141,2142],{"icon":792,"label":290},[794,2143,2145],{"className":796,"code":2144,"filename":798,"language":799,"meta":800,"style":800},"import { styleframe } from \"styleframe\";\nimport { useOutlineUtility } from \"@styleframe\u002Ftheme\";\nimport { useFocusVisibleModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst focusVisible = useFocusVisibleModifier(s);\n\nuseOutlineUtility(s, {\n    primary: '2px solid #006cff',\n}, [focusVisible]);\n\nexport default s;\n",[697,2146,2147,2167,2188,2209,2213,2227,2231,2246,2250,2261,2276,2285,2289],{"__ignoreMap":800},[804,2148,2149,2151,2153,2155,2157,2159,2161,2163,2165],{"class":806,"line":807},[804,2150,811],{"class":810},[804,2152,815],{"class":814},[804,2154,819],{"class":818},[804,2156,822],{"class":814},[804,2158,825],{"class":810},[804,2160,828],{"class":814},[804,2162,832],{"class":831},[804,2164,835],{"class":814},[804,2166,838],{"class":814},[804,2168,2169,2171,2173,2176,2178,2180,2182,2184,2186],{"class":806,"line":841},[804,2170,811],{"class":810},[804,2172,815],{"class":814},[804,2174,2175],{"class":818}," useOutlineUtility",[804,2177,822],{"class":814},[804,2179,825],{"class":810},[804,2181,828],{"class":814},[804,2183,857],{"class":831},[804,2185,835],{"class":814},[804,2187,838],{"class":814},[804,2189,2190,2192,2194,2197,2199,2201,2203,2205,2207],{"class":806,"line":864},[804,2191,811],{"class":810},[804,2193,815],{"class":814},[804,2195,2196],{"class":818}," useFocusVisibleModifier",[804,2198,822],{"class":814},[804,2200,825],{"class":810},[804,2202,828],{"class":814},[804,2204,857],{"class":831},[804,2206,835],{"class":814},[804,2208,838],{"class":814},[804,2210,2211],{"class":806,"line":886},[804,2212,911],{"emptyLinePlaceholder":223},[804,2214,2215,2217,2219,2221,2223,2225],{"class":806,"line":908},[804,2216,918],{"class":917},[804,2218,921],{"class":818},[804,2220,924],{"class":814},[804,2222,819],{"class":927},[804,2224,930],{"class":818},[804,2226,838],{"class":814},[804,2228,2229],{"class":806,"line":914},[804,2230,911],{"emptyLinePlaceholder":223},[804,2232,2233,2235,2238,2240,2242,2244],{"class":806,"line":935},[804,2234,918],{"class":917},[804,2236,2237],{"class":818}," focusVisible ",[804,2239,924],{"class":814},[804,2241,2196],{"class":927},[804,2243,1063],{"class":818},[804,2245,838],{"class":814},[804,2247,2248],{"class":806,"line":956},[804,2249,911],{"emptyLinePlaceholder":223},[804,2251,2252,2255,2257,2259],{"class":806,"line":961},[804,2253,2254],{"class":927},"useOutlineUtility",[804,2256,983],{"class":818},[804,2258,971],{"class":814},[804,2260,988],{"class":814},[804,2262,2263,2265,2267,2269,2272,2274],{"class":806,"line":991},[804,2264,995],{"class":994},[804,2266,998],{"class":814},[804,2268,1001],{"class":814},[804,2270,2271],{"class":831},"2px solid #006cff",[804,2273,1007],{"class":814},[804,2275,1010],{"class":814},[804,2277,2278,2280,2283],{"class":806,"line":1013},[804,2279,1117],{"class":814},[804,2281,2282],{"class":818}," [focusVisible])",[804,2284,838],{"class":814},[804,2286,2287],{"class":806,"line":1030},[804,2288,911],{"emptyLinePlaceholder":223},[804,2290,2291,2293,2295,2297],{"class":806,"line":1046},[804,2292,1133],{"class":810},[804,2294,1136],{"class":810},[804,2296,951],{"class":818},[804,2298,838],{"class":814},[790,2300,2301],{"icon":154,"label":326},[794,2302,2304],{"className":1145,"code":2303,"filename":1147,"language":1148,"meta":800,"style":800},"._outline\\:primary { outline: 2px solid #006cff; }\n\n._focus-visible\\:outline\\:primary {\n    &:focus-visible { outline: 2px solid #006cff; }\n}\n",[697,2305,2306,2337,2341,2359,2381],{"__ignoreMap":800},[804,2307,2308,2310,2313,2315,2317,2319,2322,2324,2326,2329,2331,2333,2335],{"class":806,"line":807},[804,2309,1155],{"class":814},[804,2311,2312],{"class":1158},"_outline",[804,2314,1162],{"class":818},[804,2316,1165],{"class":1158},[804,2318,815],{"class":814},[804,2320,2321],{"class":1170}," outline",[804,2323,998],{"class":814},[804,2325,1604],{"class":1596},[804,2327,2328],{"class":818}," solid ",[804,2330,1989],{"class":814},[804,2332,1610],{"class":818},[804,2334,1613],{"class":814},[804,2336,1188],{"class":814},[804,2338,2339],{"class":806,"line":841},[804,2340,911],{"emptyLinePlaceholder":223},[804,2342,2343,2345,2348,2350,2353,2355,2357],{"class":806,"line":864},[804,2344,1155],{"class":814},[804,2346,2347],{"class":1158},"_focus-visible",[804,2349,1162],{"class":818},[804,2351,2352],{"class":1158},"outline",[804,2354,1162],{"class":818},[804,2356,1165],{"class":1158},[804,2358,988],{"class":814},[804,2360,2361,2363,2365,2368,2371,2373,2375,2377,2379],{"class":806,"line":886},[804,2362,1243],{"class":818},[804,2364,998],{"class":814},[804,2366,2367],{"class":818},"focus-visible { outline: ",[804,2369,2370],{"class":1596},"2px",[804,2372,2328],{"class":818},[804,2374,1989],{"class":814},[804,2376,1610],{"class":818},[804,2378,1613],{"class":814},[804,2380,1188],{"class":814},[804,2382,2383],{"class":806,"line":908},[804,2384,1264],{"class":818},[790,2386,2387],{"icon":520,"label":1309},[794,2388,2390],{"className":1312,"code":2389,"language":1314,"meta":800,"style":800},"\u003C!-- Show outline only for keyboard focus -->\n\u003Cbutton class=\"_focus-visible:outline:primary\">\n    Tab to me\n\u003C\u002Fbutton>\n",[697,2391,2392,2397,2416,2421],{"__ignoreMap":800},[804,2393,2394],{"class":806,"line":807},[804,2395,2396],{"class":1321},"\u003C!-- Show outline only for keyboard focus -->\n",[804,2398,2399,2401,2403,2405,2407,2409,2412,2414],{"class":806,"line":841},[804,2400,1327],{"class":814},[804,2402,1330],{"class":994},[804,2404,1333],{"class":917},[804,2406,924],{"class":814},[804,2408,835],{"class":814},[804,2410,2411],{"class":831},"_focus-visible:outline:primary",[804,2413,835],{"class":814},[804,2415,1345],{"class":814},[804,2417,2418],{"class":806,"line":864},[804,2419,2420],{"class":818},"    Tab to me\n",[804,2422,2423,2425,2427],{"class":806,"line":886},[804,2424,1355],{"class":814},[804,2426,1330],{"class":994},[804,2428,1345],{"class":814},[1361,2430,1364],{"id":2431},"css-selector-3",[1366,2433,2434,2442],{},[1369,2435,2436],{},[1372,2437,2438,2440],{},[1375,2439,1377],{},[1375,2441,1364],{},[1381,2443,2444],{},[1372,2445,2446,2450],{},[1386,2447,2448],{},[697,2449,759],{},[1386,2451,2452],{},[697,2453,2454],{},"&:focus-visible",[2456,2457,2458,2461,2462,2464,2465,2467],"tip",{},[692,2459,2460],{},"Pro tip",": Prefer ",[697,2463,2131],{}," over ",[697,2466,1401],{}," for focus indicators. It only shows the indicator for keyboard navigation, not mouse clicks, providing a cleaner user experience.",[715,2469,2471],{"id":2470},"useactivemodifier",[697,2472,2473],{},"useActiveModifier",[719,2475,781,2476,2479],{},[697,2477,2478],{},"useActiveModifier()"," function creates a modifier that applies styles when an element is being activated (clicked\u002Fpressed).",[787,2481,2482,2642,2716],{},[790,2483,2484],{"icon":792,"label":290},[794,2485,2487],{"className":796,"code":2486,"filename":798,"language":799,"meta":800,"style":800},"import { styleframe } from \"styleframe\";\nimport { useScaleUtility } from \"@styleframe\u002Ftheme\";\nimport { useActiveModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst active = useActiveModifier(s);\n\nuseScaleUtility(s, {\n    95: '0.95',\n}, [active]);\n\nexport default s;\n",[697,2488,2489,2509,2530,2551,2555,2569,2573,2588,2592,2603,2619,2628,2632],{"__ignoreMap":800},[804,2490,2491,2493,2495,2497,2499,2501,2503,2505,2507],{"class":806,"line":807},[804,2492,811],{"class":810},[804,2494,815],{"class":814},[804,2496,819],{"class":818},[804,2498,822],{"class":814},[804,2500,825],{"class":810},[804,2502,828],{"class":814},[804,2504,832],{"class":831},[804,2506,835],{"class":814},[804,2508,838],{"class":814},[804,2510,2511,2513,2515,2518,2520,2522,2524,2526,2528],{"class":806,"line":841},[804,2512,811],{"class":810},[804,2514,815],{"class":814},[804,2516,2517],{"class":818}," useScaleUtility",[804,2519,822],{"class":814},[804,2521,825],{"class":810},[804,2523,828],{"class":814},[804,2525,857],{"class":831},[804,2527,835],{"class":814},[804,2529,838],{"class":814},[804,2531,2532,2534,2536,2539,2541,2543,2545,2547,2549],{"class":806,"line":864},[804,2533,811],{"class":810},[804,2535,815],{"class":814},[804,2537,2538],{"class":818}," useActiveModifier",[804,2540,822],{"class":814},[804,2542,825],{"class":810},[804,2544,828],{"class":814},[804,2546,857],{"class":831},[804,2548,835],{"class":814},[804,2550,838],{"class":814},[804,2552,2553],{"class":806,"line":886},[804,2554,911],{"emptyLinePlaceholder":223},[804,2556,2557,2559,2561,2563,2565,2567],{"class":806,"line":908},[804,2558,918],{"class":917},[804,2560,921],{"class":818},[804,2562,924],{"class":814},[804,2564,819],{"class":927},[804,2566,930],{"class":818},[804,2568,838],{"class":814},[804,2570,2571],{"class":806,"line":914},[804,2572,911],{"emptyLinePlaceholder":223},[804,2574,2575,2577,2580,2582,2584,2586],{"class":806,"line":935},[804,2576,918],{"class":917},[804,2578,2579],{"class":818}," active ",[804,2581,924],{"class":814},[804,2583,2538],{"class":927},[804,2585,1063],{"class":818},[804,2587,838],{"class":814},[804,2589,2590],{"class":806,"line":956},[804,2591,911],{"emptyLinePlaceholder":223},[804,2593,2594,2597,2599,2601],{"class":806,"line":961},[804,2595,2596],{"class":927},"useScaleUtility",[804,2598,983],{"class":818},[804,2600,971],{"class":814},[804,2602,988],{"class":814},[804,2604,2605,2608,2610,2612,2615,2617],{"class":806,"line":991},[804,2606,2607],{"class":1596},"    95",[804,2609,998],{"class":814},[804,2611,1001],{"class":814},[804,2613,2614],{"class":831},"0.95",[804,2616,1007],{"class":814},[804,2618,1010],{"class":814},[804,2620,2621,2623,2626],{"class":806,"line":1013},[804,2622,1117],{"class":814},[804,2624,2625],{"class":818}," [active])",[804,2627,838],{"class":814},[804,2629,2630],{"class":806,"line":1030},[804,2631,911],{"emptyLinePlaceholder":223},[804,2633,2634,2636,2638,2640],{"class":806,"line":1046},[804,2635,1133],{"class":810},[804,2637,1136],{"class":810},[804,2639,951],{"class":818},[804,2641,838],{"class":814},[790,2643,2644],{"icon":154,"label":326},[794,2645,2647],{"className":1145,"code":2646,"filename":1147,"language":1148,"meta":800,"style":800},"._scale\\:95 { scale: 0.95; }\n\n._active\\:scale\\:95 {\n    &:active { scale: 0.95; }\n}\n",[697,2648,2649,2675,2679,2697,2712],{"__ignoreMap":800},[804,2650,2651,2653,2656,2658,2661,2663,2666,2668,2671,2673],{"class":806,"line":807},[804,2652,1155],{"class":814},[804,2654,2655],{"class":1158},"_scale",[804,2657,1162],{"class":818},[804,2659,2660],{"class":1158},"95",[804,2662,815],{"class":814},[804,2664,2665],{"class":1170}," scale",[804,2667,998],{"class":814},[804,2669,2670],{"class":1596}," 0.95",[804,2672,1613],{"class":814},[804,2674,1188],{"class":814},[804,2676,2677],{"class":806,"line":841},[804,2678,911],{"emptyLinePlaceholder":223},[804,2680,2681,2683,2686,2688,2691,2693,2695],{"class":806,"line":864},[804,2682,1155],{"class":814},[804,2684,2685],{"class":1158},"_active",[804,2687,1162],{"class":818},[804,2689,2690],{"class":1158},"scale",[804,2692,1162],{"class":818},[804,2694,2660],{"class":1158},[804,2696,988],{"class":814},[804,2698,2699,2701,2703,2706,2708,2710],{"class":806,"line":886},[804,2700,1243],{"class":818},[804,2702,998],{"class":814},[804,2704,2705],{"class":818},"active { scale: ",[804,2707,2614],{"class":1596},[804,2709,1613],{"class":814},[804,2711,1188],{"class":814},[804,2713,2714],{"class":806,"line":908},[804,2715,1264],{"class":818},[790,2717,2718],{"icon":520,"label":1309},[794,2719,2721],{"className":1312,"code":2720,"language":1314,"meta":800,"style":800},"\u003C!-- Scale down on click -->\n\u003Cbutton class=\"_active:scale:95\">Press me\u003C\u002Fbutton>\n",[697,2722,2723,2728],{"__ignoreMap":800},[804,2724,2725],{"class":806,"line":807},[804,2726,2727],{"class":1321},"\u003C!-- Scale down on click -->\n",[804,2729,2730,2732,2734,2736,2738,2740,2743,2745,2748,2751,2753,2755],{"class":806,"line":841},[804,2731,1327],{"class":814},[804,2733,1330],{"class":994},[804,2735,1333],{"class":917},[804,2737,924],{"class":814},[804,2739,835],{"class":814},[804,2741,2742],{"class":831},"_active:scale:95",[804,2744,835],{"class":814},[804,2746,2747],{"class":814},">",[804,2749,2750],{"class":818},"Press me",[804,2752,1355],{"class":814},[804,2754,1330],{"class":994},[804,2756,1345],{"class":814},[1361,2758,1364],{"id":2759},"css-selector-4",[1366,2761,2762,2770],{},[1369,2763,2764],{},[1372,2765,2766,2768],{},[1375,2767,1377],{},[1375,2769,1364],{},[1381,2771,2772],{},[1372,2773,2774,2779],{},[1386,2775,2776],{},[697,2777,2778],{},"active",[1386,2780,2781],{},[697,2782,2783],{},"&:active",[715,2785,2787],{"id":2786},"usevisitedmodifier",[697,2788,2789],{},"useVisitedModifier",[719,2791,781,2792,2795],{},[697,2793,2794],{},"useVisitedModifier()"," function creates a modifier that applies styles to visited links.",[787,2797,2798,2957,3035],{},[790,2799,2800],{"icon":792,"label":290},[794,2801,2803],{"className":796,"code":2802,"filename":798,"language":799,"meta":800,"style":800},"import { styleframe } from \"styleframe\";\nimport { useTextColorUtility } from \"@styleframe\u002Ftheme\";\nimport { useVisitedModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst visited = useVisitedModifier(s);\n\nuseTextColorUtility(s, {\n    muted: '#6c757d',\n}, [visited]);\n\nexport default s;\n",[697,2804,2805,2825,2846,2867,2871,2885,2889,2904,2908,2919,2934,2943,2947],{"__ignoreMap":800},[804,2806,2807,2809,2811,2813,2815,2817,2819,2821,2823],{"class":806,"line":807},[804,2808,811],{"class":810},[804,2810,815],{"class":814},[804,2812,819],{"class":818},[804,2814,822],{"class":814},[804,2816,825],{"class":810},[804,2818,828],{"class":814},[804,2820,832],{"class":831},[804,2822,835],{"class":814},[804,2824,838],{"class":814},[804,2826,2827,2829,2831,2834,2836,2838,2840,2842,2844],{"class":806,"line":841},[804,2828,811],{"class":810},[804,2830,815],{"class":814},[804,2832,2833],{"class":818}," useTextColorUtility",[804,2835,822],{"class":814},[804,2837,825],{"class":810},[804,2839,828],{"class":814},[804,2841,857],{"class":831},[804,2843,835],{"class":814},[804,2845,838],{"class":814},[804,2847,2848,2850,2852,2855,2857,2859,2861,2863,2865],{"class":806,"line":864},[804,2849,811],{"class":810},[804,2851,815],{"class":814},[804,2853,2854],{"class":818}," useVisitedModifier",[804,2856,822],{"class":814},[804,2858,825],{"class":810},[804,2860,828],{"class":814},[804,2862,857],{"class":831},[804,2864,835],{"class":814},[804,2866,838],{"class":814},[804,2868,2869],{"class":806,"line":886},[804,2870,911],{"emptyLinePlaceholder":223},[804,2872,2873,2875,2877,2879,2881,2883],{"class":806,"line":908},[804,2874,918],{"class":917},[804,2876,921],{"class":818},[804,2878,924],{"class":814},[804,2880,819],{"class":927},[804,2882,930],{"class":818},[804,2884,838],{"class":814},[804,2886,2887],{"class":806,"line":914},[804,2888,911],{"emptyLinePlaceholder":223},[804,2890,2891,2893,2896,2898,2900,2902],{"class":806,"line":935},[804,2892,918],{"class":917},[804,2894,2895],{"class":818}," visited ",[804,2897,924],{"class":814},[804,2899,2854],{"class":927},[804,2901,1063],{"class":818},[804,2903,838],{"class":814},[804,2905,2906],{"class":806,"line":956},[804,2907,911],{"emptyLinePlaceholder":223},[804,2909,2910,2913,2915,2917],{"class":806,"line":961},[804,2911,2912],{"class":927},"useTextColorUtility",[804,2914,983],{"class":818},[804,2916,971],{"class":814},[804,2918,988],{"class":814},[804,2920,2921,2924,2926,2928,2930,2932],{"class":806,"line":991},[804,2922,2923],{"class":994},"    muted",[804,2925,998],{"class":814},[804,2927,1001],{"class":814},[804,2929,1023],{"class":831},[804,2931,1007],{"class":814},[804,2933,1010],{"class":814},[804,2935,2936,2938,2941],{"class":806,"line":1013},[804,2937,1117],{"class":814},[804,2939,2940],{"class":818}," [visited])",[804,2942,838],{"class":814},[804,2944,2945],{"class":806,"line":1030},[804,2946,911],{"emptyLinePlaceholder":223},[804,2948,2949,2951,2953,2955],{"class":806,"line":1046},[804,2950,1133],{"class":810},[804,2952,1136],{"class":810},[804,2954,951],{"class":818},[804,2956,838],{"class":814},[790,2958,2959],{"icon":154,"label":326},[794,2960,2962],{"className":1145,"code":2961,"filename":1147,"language":1148,"meta":800,"style":800},"._text-color\\:muted { color: #6c757d; }\n\n._visited\\:text-color\\:muted {\n    &:visited { color: #6c757d; }\n}\n",[697,2963,2964,2992,2996,3014,3031],{"__ignoreMap":800},[804,2965,2966,2968,2971,2973,2976,2978,2981,2983,2985,2988,2990],{"class":806,"line":807},[804,2967,1155],{"class":814},[804,2969,2970],{"class":1158},"_text-color",[804,2972,1162],{"class":818},[804,2974,2975],{"class":1158},"muted",[804,2977,815],{"class":814},[804,2979,2980],{"class":1170}," color",[804,2982,998],{"class":814},[804,2984,1607],{"class":814},[804,2986,2987],{"class":818},"6c757d",[804,2989,1613],{"class":814},[804,2991,1188],{"class":814},[804,2993,2994],{"class":806,"line":841},[804,2995,911],{"emptyLinePlaceholder":223},[804,2997,2998,3000,3003,3005,3008,3010,3012],{"class":806,"line":864},[804,2999,1155],{"class":814},[804,3001,3002],{"class":1158},"_visited",[804,3004,1162],{"class":818},[804,3006,3007],{"class":1158},"text-color",[804,3009,1162],{"class":818},[804,3011,2975],{"class":1158},[804,3013,988],{"class":814},[804,3015,3016,3018,3020,3023,3025,3027,3029],{"class":806,"line":886},[804,3017,1243],{"class":818},[804,3019,998],{"class":814},[804,3021,3022],{"class":818},"visited { color: ",[804,3024,1989],{"class":814},[804,3026,2987],{"class":818},[804,3028,1613],{"class":814},[804,3030,1188],{"class":814},[804,3032,3033],{"class":806,"line":908},[804,3034,1264],{"class":818},[790,3036,3037],{"icon":520,"label":1309},[794,3038,3040],{"className":1312,"code":3039,"language":1314,"meta":800,"style":800},"\u003C!-- Style visited links -->\n\u003Ca href=\"\u002Fpage\" class=\"_visited:text-color:muted\">Visited link\u003C\u002Fa>\n",[697,3041,3042,3047],{"__ignoreMap":800},[804,3043,3044],{"class":806,"line":807},[804,3045,3046],{"class":1321},"\u003C!-- Style visited links -->\n",[804,3048,3049,3051,3053,3056,3058,3060,3063,3065,3067,3069,3071,3074,3076,3078,3081,3083,3085],{"class":806,"line":841},[804,3050,1327],{"class":814},[804,3052,702],{"class":994},[804,3054,3055],{"class":917}," href",[804,3057,924],{"class":814},[804,3059,835],{"class":814},[804,3061,3062],{"class":831},"\u002Fpage",[804,3064,835],{"class":814},[804,3066,1333],{"class":917},[804,3068,924],{"class":814},[804,3070,835],{"class":814},[804,3072,3073],{"class":831},"_visited:text-color:muted",[804,3075,835],{"class":814},[804,3077,2747],{"class":814},[804,3079,3080],{"class":818},"Visited link",[804,3082,1355],{"class":814},[804,3084,702],{"class":994},[804,3086,1345],{"class":814},[1361,3088,1364],{"id":3089},"css-selector-5",[1366,3091,3092,3100],{},[1369,3093,3094],{},[1372,3095,3096,3098],{},[1375,3097,1377],{},[1375,3099,1364],{},[1381,3101,3102],{},[1372,3103,3104,3109],{},[1386,3105,3106],{},[697,3107,3108],{},"visited",[1386,3110,3111],{},[697,3112,3113],{},"&:visited",[715,3115,3117],{"id":3116},"usetargetmodifier",[697,3118,3119],{},"useTargetModifier",[719,3121,781,3122,3125],{},[697,3123,3124],{},"useTargetModifier()"," function creates a modifier that applies styles when the element is the target of the current URL fragment.",[787,3127,3128,3286,3361],{},[790,3129,3130],{"icon":792,"label":290},[794,3131,3133],{"className":796,"code":3132,"filename":798,"language":799,"meta":800,"style":800},"import { styleframe } from \"styleframe\";\nimport { useBackgroundColorUtility } from \"@styleframe\u002Ftheme\";\nimport { useTargetModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst target = useTargetModifier(s);\n\nuseBackgroundColorUtility(s, {\n    highlight: '#fff3cd',\n}, [target]);\n\nexport default s;\n",[697,3134,3135,3155,3175,3196,3200,3214,3218,3233,3237,3247,3263,3272,3276],{"__ignoreMap":800},[804,3136,3137,3139,3141,3143,3145,3147,3149,3151,3153],{"class":806,"line":807},[804,3138,811],{"class":810},[804,3140,815],{"class":814},[804,3142,819],{"class":818},[804,3144,822],{"class":814},[804,3146,825],{"class":810},[804,3148,828],{"class":814},[804,3150,832],{"class":831},[804,3152,835],{"class":814},[804,3154,838],{"class":814},[804,3156,3157,3159,3161,3163,3165,3167,3169,3171,3173],{"class":806,"line":841},[804,3158,811],{"class":810},[804,3160,815],{"class":814},[804,3162,871],{"class":818},[804,3164,822],{"class":814},[804,3166,825],{"class":810},[804,3168,828],{"class":814},[804,3170,857],{"class":831},[804,3172,835],{"class":814},[804,3174,838],{"class":814},[804,3176,3177,3179,3181,3184,3186,3188,3190,3192,3194],{"class":806,"line":864},[804,3178,811],{"class":810},[804,3180,815],{"class":814},[804,3182,3183],{"class":818}," useTargetModifier",[804,3185,822],{"class":814},[804,3187,825],{"class":810},[804,3189,828],{"class":814},[804,3191,857],{"class":831},[804,3193,835],{"class":814},[804,3195,838],{"class":814},[804,3197,3198],{"class":806,"line":886},[804,3199,911],{"emptyLinePlaceholder":223},[804,3201,3202,3204,3206,3208,3210,3212],{"class":806,"line":908},[804,3203,918],{"class":917},[804,3205,921],{"class":818},[804,3207,924],{"class":814},[804,3209,819],{"class":927},[804,3211,930],{"class":818},[804,3213,838],{"class":814},[804,3215,3216],{"class":806,"line":914},[804,3217,911],{"emptyLinePlaceholder":223},[804,3219,3220,3222,3225,3227,3229,3231],{"class":806,"line":935},[804,3221,918],{"class":917},[804,3223,3224],{"class":818}," target ",[804,3226,924],{"class":814},[804,3228,3183],{"class":927},[804,3230,1063],{"class":818},[804,3232,838],{"class":814},[804,3234,3235],{"class":806,"line":956},[804,3236,911],{"emptyLinePlaceholder":223},[804,3238,3239,3241,3243,3245],{"class":806,"line":961},[804,3240,1076],{"class":927},[804,3242,983],{"class":818},[804,3244,971],{"class":814},[804,3246,988],{"class":814},[804,3248,3249,3252,3254,3256,3259,3261],{"class":806,"line":991},[804,3250,3251],{"class":994},"    highlight",[804,3253,998],{"class":814},[804,3255,1001],{"class":814},[804,3257,3258],{"class":831},"#fff3cd",[804,3260,1007],{"class":814},[804,3262,1010],{"class":814},[804,3264,3265,3267,3270],{"class":806,"line":1013},[804,3266,1117],{"class":814},[804,3268,3269],{"class":818}," [target])",[804,3271,838],{"class":814},[804,3273,3274],{"class":806,"line":1030},[804,3275,911],{"emptyLinePlaceholder":223},[804,3277,3278,3280,3282,3284],{"class":806,"line":1046},[804,3279,1133],{"class":810},[804,3281,1136],{"class":810},[804,3283,951],{"class":818},[804,3285,838],{"class":814},[790,3287,3288],{"icon":154,"label":326},[794,3289,3291],{"className":1145,"code":3290,"filename":1147,"language":1148,"meta":800,"style":800},"._background-color\\:highlight { background-color: #fff3cd; }\n\n._target\\:background-color\\:highlight {\n    &:target { background-color: #fff3cd; }\n}\n",[697,3292,3293,3319,3323,3340,3357],{"__ignoreMap":800},[804,3294,3295,3297,3299,3301,3304,3306,3308,3310,3312,3315,3317],{"class":806,"line":807},[804,3296,1155],{"class":814},[804,3298,1159],{"class":1158},[804,3300,1162],{"class":818},[804,3302,3303],{"class":1158},"highlight",[804,3305,815],{"class":814},[804,3307,1171],{"class":1170},[804,3309,998],{"class":814},[804,3311,1607],{"class":814},[804,3313,3314],{"class":818},"fff3cd",[804,3316,1613],{"class":814},[804,3318,1188],{"class":814},[804,3320,3321],{"class":806,"line":841},[804,3322,911],{"emptyLinePlaceholder":223},[804,3324,3325,3327,3330,3332,3334,3336,3338],{"class":806,"line":864},[804,3326,1155],{"class":814},[804,3328,3329],{"class":1158},"_target",[804,3331,1162],{"class":818},[804,3333,1232],{"class":1158},[804,3335,1162],{"class":818},[804,3337,3303],{"class":1158},[804,3339,988],{"class":814},[804,3341,3342,3344,3346,3349,3351,3353,3355],{"class":806,"line":886},[804,3343,1243],{"class":818},[804,3345,998],{"class":814},[804,3347,3348],{"class":818},"target { background-color: ",[804,3350,1989],{"class":814},[804,3352,3314],{"class":818},[804,3354,1613],{"class":814},[804,3356,1188],{"class":814},[804,3358,3359],{"class":806,"line":908},[804,3360,1264],{"class":818},[790,3362,3363],{"icon":520,"label":1309},[794,3364,3366],{"className":1312,"code":3365,"language":1314,"meta":800,"style":800},"\u003C!-- Highlight section when navigated to via anchor -->\n\u003Csection id=\"section-1\" class=\"_target:background-color:highlight\">\n    \u003Ch2>Section 1\u003C\u002Fh2>\n\u003C\u002Fsection>\n",[697,3367,3368,3373,3405,3422],{"__ignoreMap":800},[804,3369,3370],{"class":806,"line":807},[804,3371,3372],{"class":1321},"\u003C!-- Highlight section when navigated to via anchor -->\n",[804,3374,3375,3377,3380,3383,3385,3387,3390,3392,3394,3396,3398,3401,3403],{"class":806,"line":841},[804,3376,1327],{"class":814},[804,3378,3379],{"class":994},"section",[804,3381,3382],{"class":917}," id",[804,3384,924],{"class":814},[804,3386,835],{"class":814},[804,3388,3389],{"class":831},"section-1",[804,3391,835],{"class":814},[804,3393,1333],{"class":917},[804,3395,924],{"class":814},[804,3397,835],{"class":814},[804,3399,3400],{"class":831},"_target:background-color:highlight",[804,3402,835],{"class":814},[804,3404,1345],{"class":814},[804,3406,3407,3409,3411,3413,3416,3418,3420],{"class":806,"line":864},[804,3408,2036],{"class":814},[804,3410,715],{"class":994},[804,3412,2747],{"class":814},[804,3414,3415],{"class":818},"Section 1",[804,3417,1355],{"class":814},[804,3419,715],{"class":994},[804,3421,1345],{"class":814},[804,3423,3424,3426,3428],{"class":806,"line":886},[804,3425,1355],{"class":814},[804,3427,3379],{"class":994},[804,3429,1345],{"class":814},[1361,3431,1364],{"id":3432},"css-selector-6",[1366,3434,3435,3443],{},[1369,3436,3437],{},[1372,3438,3439,3441],{},[1375,3440,1377],{},[1375,3442,1364],{},[1381,3444,3445],{},[1372,3446,3447,3452],{},[1386,3448,3449],{},[697,3450,3451],{},"target",[1386,3453,3454],{},[697,3455,3456],{},"&:target",[715,3458,3460],{"id":3459},"usepseudostatemodifiers",[697,3461,699],{},[719,3463,781,3464,3467],{},[697,3465,3466],{},"usePseudoStateModifiers()"," function registers all pseudo-state modifiers at once and returns them as a destructurable object.",[787,3469,3470,3688,3942],{},[790,3471,3472],{"icon":792,"label":290},[794,3473,3475],{"className":796,"code":3474,"filename":798,"language":799,"meta":800,"style":800},"import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useOpacityUtility } from \"@styleframe\u002Ftheme\";\nimport { usePseudoStateModifiers } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst { hover, focus, active } = usePseudoStateModifiers(s);\n\nuseOpacityUtility(s, {\n    75: '0.75',\n    50: '0.5',\n}, [hover, focus, active]);\n\nexport default s;\n",[697,3476,3477,3497,3517,3538,3559,3563,3577,3581,3609,3613,3624,3640,3656,3674,3678],{"__ignoreMap":800},[804,3478,3479,3481,3483,3485,3487,3489,3491,3493,3495],{"class":806,"line":807},[804,3480,811],{"class":810},[804,3482,815],{"class":814},[804,3484,819],{"class":818},[804,3486,822],{"class":814},[804,3488,825],{"class":810},[804,3490,828],{"class":814},[804,3492,832],{"class":831},[804,3494,835],{"class":814},[804,3496,838],{"class":814},[804,3498,3499,3501,3503,3505,3507,3509,3511,3513,3515],{"class":806,"line":841},[804,3500,811],{"class":810},[804,3502,815],{"class":814},[804,3504,848],{"class":818},[804,3506,822],{"class":814},[804,3508,825],{"class":810},[804,3510,828],{"class":814},[804,3512,857],{"class":831},[804,3514,835],{"class":814},[804,3516,838],{"class":814},[804,3518,3519,3521,3523,3526,3528,3530,3532,3534,3536],{"class":806,"line":864},[804,3520,811],{"class":810},[804,3522,815],{"class":814},[804,3524,3525],{"class":818}," useOpacityUtility",[804,3527,822],{"class":814},[804,3529,825],{"class":810},[804,3531,828],{"class":814},[804,3533,857],{"class":831},[804,3535,835],{"class":814},[804,3537,838],{"class":814},[804,3539,3540,3542,3544,3547,3549,3551,3553,3555,3557],{"class":806,"line":886},[804,3541,811],{"class":810},[804,3543,815],{"class":814},[804,3545,3546],{"class":818}," usePseudoStateModifiers",[804,3548,822],{"class":814},[804,3550,825],{"class":810},[804,3552,828],{"class":814},[804,3554,857],{"class":831},[804,3556,835],{"class":814},[804,3558,838],{"class":814},[804,3560,3561],{"class":806,"line":908},[804,3562,911],{"emptyLinePlaceholder":223},[804,3564,3565,3567,3569,3571,3573,3575],{"class":806,"line":914},[804,3566,918],{"class":917},[804,3568,921],{"class":818},[804,3570,924],{"class":814},[804,3572,819],{"class":927},[804,3574,930],{"class":818},[804,3576,838],{"class":814},[804,3578,3579],{"class":806,"line":935},[804,3580,911],{"emptyLinePlaceholder":223},[804,3582,3583,3585,3587,3590,3592,3595,3597,3599,3601,3603,3605,3607],{"class":806,"line":956},[804,3584,918],{"class":917},[804,3586,815],{"class":814},[804,3588,3589],{"class":818}," hover",[804,3591,971],{"class":814},[804,3593,3594],{"class":818}," focus",[804,3596,971],{"class":814},[804,3598,2579],{"class":818},[804,3600,945],{"class":814},[804,3602,948],{"class":814},[804,3604,3546],{"class":927},[804,3606,1063],{"class":818},[804,3608,838],{"class":814},[804,3610,3611],{"class":806,"line":961},[804,3612,911],{"emptyLinePlaceholder":223},[804,3614,3615,3618,3620,3622],{"class":806,"line":991},[804,3616,3617],{"class":927},"useOpacityUtility",[804,3619,983],{"class":818},[804,3621,971],{"class":814},[804,3623,988],{"class":814},[804,3625,3626,3629,3631,3633,3636,3638],{"class":806,"line":1013},[804,3627,3628],{"class":1596},"    75",[804,3630,998],{"class":814},[804,3632,1001],{"class":814},[804,3634,3635],{"class":831},"0.75",[804,3637,1007],{"class":814},[804,3639,1010],{"class":814},[804,3641,3642,3645,3647,3649,3652,3654],{"class":806,"line":1030},[804,3643,3644],{"class":1596},"    50",[804,3646,998],{"class":814},[804,3648,1001],{"class":814},[804,3650,3651],{"class":831},"0.5",[804,3653,1007],{"class":814},[804,3655,1010],{"class":814},[804,3657,3658,3660,3663,3665,3667,3669,3672],{"class":806,"line":1046},[804,3659,1117],{"class":814},[804,3661,3662],{"class":818}," [hover",[804,3664,971],{"class":814},[804,3666,3594],{"class":818},[804,3668,971],{"class":814},[804,3670,3671],{"class":818}," active])",[804,3673,838],{"class":814},[804,3675,3676],{"class":806,"line":1051},[804,3677,911],{"emptyLinePlaceholder":223},[804,3679,3680,3682,3684,3686],{"class":806,"line":1068},[804,3681,1133],{"class":810},[804,3683,1136],{"class":810},[804,3685,951],{"class":818},[804,3687,838],{"class":814},[790,3689,3690],{"icon":154,"label":326},[794,3691,3693],{"className":1145,"code":3692,"filename":1147,"language":1148,"meta":800,"style":800},"._opacity\\:75 { opacity: 0.75; }\n._opacity\\:50 { opacity: 0.5; }\n\n._hover\\:opacity\\:75 { &:hover { opacity: 0.75; } }\n._hover\\:opacity\\:50 { &:hover { opacity: 0.5; } }\n\n._focus\\:opacity\\:75 { &:focus { opacity: 0.75; } }\n._focus\\:opacity\\:50 { &:focus { opacity: 0.5; } }\n\n._active\\:opacity\\:75 { &:active { opacity: 0.75; } }\n._active\\:opacity\\:50 { &:active { opacity: 0.5; } }\n",[697,3694,3695,3721,3745,3749,3782,3812,3816,3847,3877,3881,3912],{"__ignoreMap":800},[804,3696,3697,3699,3702,3704,3707,3709,3712,3714,3717,3719],{"class":806,"line":807},[804,3698,1155],{"class":814},[804,3700,3701],{"class":1158},"_opacity",[804,3703,1162],{"class":818},[804,3705,3706],{"class":1158},"75",[804,3708,815],{"class":814},[804,3710,3711],{"class":1170}," opacity",[804,3713,998],{"class":814},[804,3715,3716],{"class":1596}," 0.75",[804,3718,1613],{"class":814},[804,3720,1188],{"class":814},[804,3722,3723,3725,3727,3729,3732,3734,3736,3738,3741,3743],{"class":806,"line":841},[804,3724,1155],{"class":814},[804,3726,3701],{"class":1158},[804,3728,1162],{"class":818},[804,3730,3731],{"class":1158},"50",[804,3733,815],{"class":814},[804,3735,3711],{"class":1170},[804,3737,998],{"class":814},[804,3739,3740],{"class":1596}," 0.5",[804,3742,1613],{"class":814},[804,3744,1188],{"class":814},[804,3746,3747],{"class":806,"line":864},[804,3748,911],{"emptyLinePlaceholder":223},[804,3750,3751,3753,3755,3757,3760,3762,3764,3766,3769,3771,3774,3776,3778,3780],{"class":806,"line":886},[804,3752,1155],{"class":814},[804,3754,1227],{"class":1158},[804,3756,1162],{"class":818},[804,3758,3759],{"class":1158},"opacity",[804,3761,1162],{"class":818},[804,3763,3706],{"class":1158},[804,3765,815],{"class":814},[804,3767,3768],{"class":818}," &",[804,3770,998],{"class":814},[804,3772,3773],{"class":818},"hover { opacity: ",[804,3775,3635],{"class":1596},[804,3777,1613],{"class":814},[804,3779,822],{"class":814},[804,3781,1188],{"class":818},[804,3783,3784,3786,3788,3790,3792,3794,3796,3798,3800,3802,3804,3806,3808,3810],{"class":806,"line":908},[804,3785,1155],{"class":814},[804,3787,1227],{"class":1158},[804,3789,1162],{"class":818},[804,3791,3759],{"class":1158},[804,3793,1162],{"class":818},[804,3795,3731],{"class":1158},[804,3797,815],{"class":814},[804,3799,3768],{"class":818},[804,3801,998],{"class":814},[804,3803,3773],{"class":818},[804,3805,3651],{"class":1596},[804,3807,1613],{"class":814},[804,3809,822],{"class":814},[804,3811,1188],{"class":818},[804,3813,3814],{"class":806,"line":914},[804,3815,911],{"emptyLinePlaceholder":223},[804,3817,3818,3820,3822,3824,3826,3828,3830,3832,3834,3836,3839,3841,3843,3845],{"class":806,"line":935},[804,3819,1155],{"class":814},[804,3821,1626],{"class":1158},[804,3823,1162],{"class":818},[804,3825,3759],{"class":1158},[804,3827,1162],{"class":818},[804,3829,3706],{"class":1158},[804,3831,815],{"class":814},[804,3833,3768],{"class":818},[804,3835,998],{"class":814},[804,3837,3838],{"class":818},"focus { opacity: ",[804,3840,3635],{"class":1596},[804,3842,1613],{"class":814},[804,3844,822],{"class":814},[804,3846,1188],{"class":818},[804,3848,3849,3851,3853,3855,3857,3859,3861,3863,3865,3867,3869,3871,3873,3875],{"class":806,"line":956},[804,3850,1155],{"class":814},[804,3852,1626],{"class":1158},[804,3854,1162],{"class":818},[804,3856,3759],{"class":1158},[804,3858,1162],{"class":818},[804,3860,3731],{"class":1158},[804,3862,815],{"class":814},[804,3864,3768],{"class":818},[804,3866,998],{"class":814},[804,3868,3838],{"class":818},[804,3870,3651],{"class":1596},[804,3872,1613],{"class":814},[804,3874,822],{"class":814},[804,3876,1188],{"class":818},[804,3878,3879],{"class":806,"line":961},[804,3880,911],{"emptyLinePlaceholder":223},[804,3882,3883,3885,3887,3889,3891,3893,3895,3897,3899,3901,3904,3906,3908,3910],{"class":806,"line":991},[804,3884,1155],{"class":814},[804,3886,2685],{"class":1158},[804,3888,1162],{"class":818},[804,3890,3759],{"class":1158},[804,3892,1162],{"class":818},[804,3894,3706],{"class":1158},[804,3896,815],{"class":814},[804,3898,3768],{"class":818},[804,3900,998],{"class":814},[804,3902,3903],{"class":818},"active { opacity: ",[804,3905,3635],{"class":1596},[804,3907,1613],{"class":814},[804,3909,822],{"class":814},[804,3911,1188],{"class":818},[804,3913,3914,3916,3918,3920,3922,3924,3926,3928,3930,3932,3934,3936,3938,3940],{"class":806,"line":1013},[804,3915,1155],{"class":814},[804,3917,2685],{"class":1158},[804,3919,1162],{"class":818},[804,3921,3759],{"class":1158},[804,3923,1162],{"class":818},[804,3925,3731],{"class":1158},[804,3927,815],{"class":814},[804,3929,3768],{"class":818},[804,3931,998],{"class":814},[804,3933,3903],{"class":818},[804,3935,3651],{"class":1596},[804,3937,1613],{"class":814},[804,3939,822],{"class":814},[804,3941,1188],{"class":818},[790,3943,3944],{"icon":520,"label":1309},[794,3945,3947],{"className":1312,"code":3946,"language":1314,"meta":800,"style":800},"\u003Cbutton class=\"_opacity:75 _hover:opacity:50 _active:opacity:50\">\n    Interactive button\n\u003C\u002Fbutton>\n",[697,3948,3949,3968,3973],{"__ignoreMap":800},[804,3950,3951,3953,3955,3957,3959,3961,3964,3966],{"class":806,"line":807},[804,3952,1327],{"class":814},[804,3954,1330],{"class":994},[804,3956,1333],{"class":917},[804,3958,924],{"class":814},[804,3960,835],{"class":814},[804,3962,3963],{"class":831},"_opacity:75 _hover:opacity:50 _active:opacity:50",[804,3965,835],{"class":814},[804,3967,1345],{"class":814},[804,3969,3970],{"class":806,"line":841},[804,3971,3972],{"class":818},"    Interactive button\n",[804,3974,3975,3977,3979],{"class":806,"line":864},[804,3976,1355],{"class":814},[804,3978,1330],{"class":994},[804,3980,1345],{"class":814},[3982,3983,3985],"h3",{"id":3984},"returned-modifiers","Returned Modifiers",[1366,3987,3988,3999],{},[1369,3989,3990],{},[1372,3991,3992,3995,3997],{},[1375,3993,3994],{},"Key",[1375,3996,1377],{},[1375,3998,1364],{},[1381,4000,4001,4015,4029,4044,4059,4073,4087],{},[1372,4002,4003,4007,4011],{},[1386,4004,4005],{},[697,4006,1390],{},[1386,4008,4009],{},[697,4010,1390],{},[1386,4012,4013],{},[697,4014,1395],{},[1372,4016,4017,4021,4025],{},[1386,4018,4019],{},[697,4020,1745],{},[1386,4022,4023],{},[697,4024,1745],{},[1386,4026,4027],{},[697,4028,1750],{},[1372,4030,4031,4036,4040],{},[1386,4032,4033],{},[697,4034,4035],{},"focusWithin",[1386,4037,4038],{},[697,4039,2120],{},[1386,4041,4042],{},[697,4043,2125],{},[1372,4045,4046,4051,4055],{},[1386,4047,4048],{},[697,4049,4050],{},"focusVisible",[1386,4052,4053],{},[697,4054,759],{},[1386,4056,4057],{},[697,4058,2454],{},[1372,4060,4061,4065,4069],{},[1386,4062,4063],{},[697,4064,2778],{},[1386,4066,4067],{},[697,4068,2778],{},[1386,4070,4071],{},[697,4072,2783],{},[1372,4074,4075,4079,4083],{},[1386,4076,4077],{},[697,4078,3108],{},[1386,4080,4081],{},[697,4082,3108],{},[1386,4084,4085],{},[697,4086,3113],{},[1372,4088,4089,4093,4097],{},[1386,4090,4091],{},[697,4092,3451],{},[1386,4094,4095],{},[697,4096,3451],{},[1386,4098,4099],{},[697,4100,3456],{},[715,4102,4104],{"id":4103},"examples","Examples",[3982,4106,4108],{"id":4107},"interactive-button","Interactive Button",[787,4110,4111,4443],{},[790,4112,4113],{"icon":792,"label":290},[794,4114,4116],{"className":796,"code":4115,"filename":798,"language":799,"meta":800,"style":800},"import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useBackgroundColorUtility, useScaleUtility, useOpacityUtility } from \"@styleframe\u002Ftheme\";\nimport { usePseudoStateModifiers } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\n\nconst { hover, active, focusVisible } = usePseudoStateModifiers(s);\n\nuseBackgroundColorUtility(s, {\n    primary: ref(colorPrimary),\n}, [hover]);\n\nuseOpacityUtility(s, {\n    90: '0.9',\n}, [hover]);\n\nuseScaleUtility(s, {\n    95: '0.95',\n}, [active]);\n\nexport default s;\n",[697,4117,4118,4138,4158,4186,4206,4210,4224,4240,4244,4286,4290,4317,4321,4331,4343,4351,4355,4365,4381,4389,4393,4403,4418,4427,4432],{"__ignoreMap":800},[804,4119,4120,4122,4124,4126,4128,4130,4132,4134,4136],{"class":806,"line":807},[804,4121,811],{"class":810},[804,4123,815],{"class":814},[804,4125,819],{"class":818},[804,4127,822],{"class":814},[804,4129,825],{"class":810},[804,4131,828],{"class":814},[804,4133,832],{"class":831},[804,4135,835],{"class":814},[804,4137,838],{"class":814},[804,4139,4140,4142,4144,4146,4148,4150,4152,4154,4156],{"class":806,"line":841},[804,4141,811],{"class":810},[804,4143,815],{"class":814},[804,4145,848],{"class":818},[804,4147,822],{"class":814},[804,4149,825],{"class":810},[804,4151,828],{"class":814},[804,4153,857],{"class":831},[804,4155,835],{"class":814},[804,4157,838],{"class":814},[804,4159,4160,4162,4164,4166,4168,4170,4172,4174,4176,4178,4180,4182,4184],{"class":806,"line":864},[804,4161,811],{"class":810},[804,4163,815],{"class":814},[804,4165,871],{"class":818},[804,4167,971],{"class":814},[804,4169,2517],{"class":818},[804,4171,971],{"class":814},[804,4173,3525],{"class":818},[804,4175,822],{"class":814},[804,4177,825],{"class":810},[804,4179,828],{"class":814},[804,4181,857],{"class":831},[804,4183,835],{"class":814},[804,4185,838],{"class":814},[804,4187,4188,4190,4192,4194,4196,4198,4200,4202,4204],{"class":806,"line":886},[804,4189,811],{"class":810},[804,4191,815],{"class":814},[804,4193,3546],{"class":818},[804,4195,822],{"class":814},[804,4197,825],{"class":810},[804,4199,828],{"class":814},[804,4201,857],{"class":831},[804,4203,835],{"class":814},[804,4205,838],{"class":814},[804,4207,4208],{"class":806,"line":908},[804,4209,911],{"emptyLinePlaceholder":223},[804,4211,4212,4214,4216,4218,4220,4222],{"class":806,"line":914},[804,4213,918],{"class":917},[804,4215,921],{"class":818},[804,4217,924],{"class":814},[804,4219,819],{"class":927},[804,4221,930],{"class":818},[804,4223,838],{"class":814},[804,4225,4226,4228,4230,4232,4234,4236,4238],{"class":806,"line":935},[804,4227,918],{"class":917},[804,4229,815],{"class":814},[804,4231,942],{"class":818},[804,4233,945],{"class":814},[804,4235,948],{"class":814},[804,4237,951],{"class":818},[804,4239,838],{"class":814},[804,4241,4242],{"class":806,"line":956},[804,4243,911],{"emptyLinePlaceholder":223},[804,4245,4246,4248,4250,4253,4255,4257,4259,4261,4263,4265,4268,4270,4272,4274,4276,4278,4280,4282,4284],{"class":806,"line":961},[804,4247,918],{"class":917},[804,4249,815],{"class":814},[804,4251,4252],{"class":818}," colorPrimary ",[804,4254,945],{"class":814},[804,4256,948],{"class":814},[804,4258,848],{"class":927},[804,4260,983],{"class":818},[804,4262,971],{"class":814},[804,4264,815],{"class":814},[804,4266,4267],{"class":994}," primary",[804,4269,998],{"class":814},[804,4271,1001],{"class":814},[804,4273,1004],{"class":831},[804,4275,1007],{"class":814},[804,4277,822],{"class":814},[804,4279,1035],{"class":810},[804,4281,1038],{"class":917},[804,4283,1041],{"class":818},[804,4285,838],{"class":814},[804,4287,4288],{"class":806,"line":991},[804,4289,911],{"emptyLinePlaceholder":223},[804,4291,4292,4294,4296,4298,4300,4303,4305,4307,4309,4311,4313,4315],{"class":806,"line":1013},[804,4293,918],{"class":917},[804,4295,815],{"class":814},[804,4297,3589],{"class":818},[804,4299,971],{"class":814},[804,4301,4302],{"class":818}," active",[804,4304,971],{"class":814},[804,4306,2237],{"class":818},[804,4308,945],{"class":814},[804,4310,948],{"class":814},[804,4312,3546],{"class":927},[804,4314,1063],{"class":818},[804,4316,838],{"class":814},[804,4318,4319],{"class":806,"line":1030},[804,4320,911],{"emptyLinePlaceholder":223},[804,4322,4323,4325,4327,4329],{"class":806,"line":1046},[804,4324,1076],{"class":927},[804,4326,983],{"class":818},[804,4328,971],{"class":814},[804,4330,988],{"class":814},[804,4332,4333,4335,4337,4339,4341],{"class":806,"line":1051},[804,4334,995],{"class":994},[804,4336,998],{"class":814},[804,4338,1092],{"class":927},[804,4340,1095],{"class":818},[804,4342,1010],{"class":814},[804,4344,4345,4347,4349],{"class":806,"line":1068},[804,4346,1117],{"class":814},[804,4348,1120],{"class":818},[804,4350,838],{"class":814},[804,4352,4353],{"class":806,"line":1073},[804,4354,911],{"emptyLinePlaceholder":223},[804,4356,4357,4359,4361,4363],{"class":806,"line":1085},[804,4358,3617],{"class":927},[804,4360,983],{"class":818},[804,4362,971],{"class":814},[804,4364,988],{"class":814},[804,4366,4367,4370,4372,4374,4377,4379],{"class":806,"line":1100},[804,4368,4369],{"class":1596},"    90",[804,4371,998],{"class":814},[804,4373,1001],{"class":814},[804,4375,4376],{"class":831},"0.9",[804,4378,1007],{"class":814},[804,4380,1010],{"class":814},[804,4382,4383,4385,4387],{"class":806,"line":1114},[804,4384,1117],{"class":814},[804,4386,1120],{"class":818},[804,4388,838],{"class":814},[804,4390,4391],{"class":806,"line":1125},[804,4392,911],{"emptyLinePlaceholder":223},[804,4394,4395,4397,4399,4401],{"class":806,"line":1130},[804,4396,2596],{"class":927},[804,4398,983],{"class":818},[804,4400,971],{"class":814},[804,4402,988],{"class":814},[804,4404,4406,4408,4410,4412,4414,4416],{"class":806,"line":4405},22,[804,4407,2607],{"class":1596},[804,4409,998],{"class":814},[804,4411,1001],{"class":814},[804,4413,2614],{"class":831},[804,4415,1007],{"class":814},[804,4417,1010],{"class":814},[804,4419,4421,4423,4425],{"class":806,"line":4420},23,[804,4422,1117],{"class":814},[804,4424,2625],{"class":818},[804,4426,838],{"class":814},[804,4428,4430],{"class":806,"line":4429},24,[804,4431,911],{"emptyLinePlaceholder":223},[804,4433,4435,4437,4439,4441],{"class":806,"line":4434},25,[804,4436,1133],{"class":810},[804,4438,1136],{"class":810},[804,4440,951],{"class":818},[804,4442,838],{"class":814},[790,4444,4445],{"icon":520,"label":1309},[794,4446,4448],{"className":1312,"code":4447,"language":1314,"meta":800,"style":800},"\u003Cbutton class=\"_background-color:primary _hover:opacity:90 _active:scale:95\">\n    Click me\n\u003C\u002Fbutton>\n",[697,4449,4450,4469,4474],{"__ignoreMap":800},[804,4451,4452,4454,4456,4458,4460,4462,4465,4467],{"class":806,"line":807},[804,4453,1327],{"class":814},[804,4455,1330],{"class":994},[804,4457,1333],{"class":917},[804,4459,924],{"class":814},[804,4461,835],{"class":814},[804,4463,4464],{"class":831},"_background-color:primary _hover:opacity:90 _active:scale:95",[804,4466,835],{"class":814},[804,4468,1345],{"class":814},[804,4470,4471],{"class":806,"line":841},[804,4472,4473],{"class":818},"    Click me\n",[804,4475,4476,4478,4480],{"class":806,"line":864},[804,4477,1355],{"class":814},[804,4479,1330],{"class":994},[804,4481,1345],{"class":814},[3982,4483,4485],{"id":4484},"focus-ring-with-focus-visible","Focus Ring with Focus-Visible",[787,4487,4488,4684],{},[790,4489,4490],{"icon":792,"label":290},[794,4491,4493],{"className":796,"code":4492,"filename":798,"language":799,"meta":800,"style":800},"import { styleframe } from \"styleframe\";\nimport { useRingUtility, useOutlineUtility } from \"@styleframe\u002Ftheme\";\nimport { useFocusVisibleModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst focusVisible = useFocusVisibleModifier(s);\n\nuseRingUtility(s, {\n    primary: '0 0 0 3px rgba(0, 108, 255, 0.5)',\n}, [focusVisible]);\n\nuseOutlineUtility(s, {\n    none: 'none',\n}, [focusVisible]);\n\nexport default s;\n",[697,4494,4495,4515,4539,4559,4563,4577,4581,4595,4599,4609,4624,4632,4636,4646,4662,4670,4674],{"__ignoreMap":800},[804,4496,4497,4499,4501,4503,4505,4507,4509,4511,4513],{"class":806,"line":807},[804,4498,811],{"class":810},[804,4500,815],{"class":814},[804,4502,819],{"class":818},[804,4504,822],{"class":814},[804,4506,825],{"class":810},[804,4508,828],{"class":814},[804,4510,832],{"class":831},[804,4512,835],{"class":814},[804,4514,838],{"class":814},[804,4516,4517,4519,4521,4523,4525,4527,4529,4531,4533,4535,4537],{"class":806,"line":841},[804,4518,811],{"class":810},[804,4520,815],{"class":814},[804,4522,1445],{"class":818},[804,4524,971],{"class":814},[804,4526,2175],{"class":818},[804,4528,822],{"class":814},[804,4530,825],{"class":810},[804,4532,828],{"class":814},[804,4534,857],{"class":831},[804,4536,835],{"class":814},[804,4538,838],{"class":814},[804,4540,4541,4543,4545,4547,4549,4551,4553,4555,4557],{"class":806,"line":864},[804,4542,811],{"class":810},[804,4544,815],{"class":814},[804,4546,2196],{"class":818},[804,4548,822],{"class":814},[804,4550,825],{"class":810},[804,4552,828],{"class":814},[804,4554,857],{"class":831},[804,4556,835],{"class":814},[804,4558,838],{"class":814},[804,4560,4561],{"class":806,"line":886},[804,4562,911],{"emptyLinePlaceholder":223},[804,4564,4565,4567,4569,4571,4573,4575],{"class":806,"line":908},[804,4566,918],{"class":917},[804,4568,921],{"class":818},[804,4570,924],{"class":814},[804,4572,819],{"class":927},[804,4574,930],{"class":818},[804,4576,838],{"class":814},[804,4578,4579],{"class":806,"line":914},[804,4580,911],{"emptyLinePlaceholder":223},[804,4582,4583,4585,4587,4589,4591,4593],{"class":806,"line":935},[804,4584,918],{"class":917},[804,4586,2237],{"class":818},[804,4588,924],{"class":814},[804,4590,2196],{"class":927},[804,4592,1063],{"class":818},[804,4594,838],{"class":814},[804,4596,4597],{"class":806,"line":956},[804,4598,911],{"emptyLinePlaceholder":223},[804,4600,4601,4603,4605,4607],{"class":806,"line":961},[804,4602,1524],{"class":927},[804,4604,983],{"class":818},[804,4606,971],{"class":814},[804,4608,988],{"class":814},[804,4610,4611,4613,4615,4617,4620,4622],{"class":806,"line":991},[804,4612,995],{"class":994},[804,4614,998],{"class":814},[804,4616,1001],{"class":814},[804,4618,4619],{"class":831},"0 0 0 3px rgba(0, 108, 255, 0.5)",[804,4621,1007],{"class":814},[804,4623,1010],{"class":814},[804,4625,4626,4628,4630],{"class":806,"line":1013},[804,4627,1117],{"class":814},[804,4629,2282],{"class":818},[804,4631,838],{"class":814},[804,4633,4634],{"class":806,"line":1030},[804,4635,911],{"emptyLinePlaceholder":223},[804,4637,4638,4640,4642,4644],{"class":806,"line":1046},[804,4639,2254],{"class":927},[804,4641,983],{"class":818},[804,4643,971],{"class":814},[804,4645,988],{"class":814},[804,4647,4648,4651,4653,4655,4658,4660],{"class":806,"line":1051},[804,4649,4650],{"class":994},"    none",[804,4652,998],{"class":814},[804,4654,1001],{"class":814},[804,4656,4657],{"class":831},"none",[804,4659,1007],{"class":814},[804,4661,1010],{"class":814},[804,4663,4664,4666,4668],{"class":806,"line":1068},[804,4665,1117],{"class":814},[804,4667,2282],{"class":818},[804,4669,838],{"class":814},[804,4671,4672],{"class":806,"line":1073},[804,4673,911],{"emptyLinePlaceholder":223},[804,4675,4676,4678,4680,4682],{"class":806,"line":1085},[804,4677,1133],{"class":810},[804,4679,1136],{"class":810},[804,4681,951],{"class":818},[804,4683,838],{"class":814},[790,4685,4686],{"icon":520,"label":1309},[794,4687,4689],{"className":1312,"code":4688,"language":1314,"meta":800,"style":800},"\u003Cbutton class=\"_focus-visible:ring:primary _focus-visible:outline:none\">\n    Keyboard accessible\n\u003C\u002Fbutton>\n",[697,4690,4691,4710,4715],{"__ignoreMap":800},[804,4692,4693,4695,4697,4699,4701,4703,4706,4708],{"class":806,"line":807},[804,4694,1327],{"class":814},[804,4696,1330],{"class":994},[804,4698,1333],{"class":917},[804,4700,924],{"class":814},[804,4702,835],{"class":814},[804,4704,4705],{"class":831},"_focus-visible:ring:primary _focus-visible:outline:none",[804,4707,835],{"class":814},[804,4709,1345],{"class":814},[804,4711,4712],{"class":806,"line":841},[804,4713,4714],{"class":818},"    Keyboard accessible\n",[804,4716,4717,4719,4721],{"class":806,"line":864},[804,4718,1355],{"class":814},[804,4720,1330],{"class":994},[804,4722,1345],{"class":814},[715,4724,4726],{"id":4725},"best-practices","Best Practices",[742,4728,4729,4741,4752,4761,4767],{},[745,4730,4731,756,4738,4740],{},[692,4732,4733,4734,2464,4736],{},"Prefer ",[697,4735,759],{},[697,4737,1745],{},[697,4739,2131],{}," for focus indicators to avoid showing focus rings on mouse clicks",[745,4742,4743,4751],{},[692,4744,4745,4746,4748,4749],{},"Combine ",[697,4747,1390],{}," and ",[697,4750,2778],{},": Create buttons that respond to both hover and press states for better feedback",[745,4753,4754,4760],{},[692,4755,4756,4757,4759],{},"Use ",[697,4758,2120],{}," for form groups",": Highlight parent containers when any child input is focused",[745,4762,4763,4766],{},[692,4764,4765],{},"Limit modifier count",": Only generate the state variants your design requires to keep CSS bundle size small",[745,4768,4769,4772,4773,4775],{},[692,4770,4771],{},"Test touch devices",": ",[697,4774,724],{}," may behave unexpectedly on touch devices; design fallbacks accordingly",[715,4777,4779],{"id":4778},"faq","FAQ",[4781,4782,4783,4801,4818,4825],"accordion",{},[4784,4785,4788,4790,4791,4794,4795,4797,4798,4800],"accordion-item",{"icon":4786,"label":4787},"i-lucide-circle-help","What's the difference between focus and focus-visible?",[697,4789,728],{}," triggers on all focus events (mouse click, keyboard navigation, programmatic focus). ",[697,4792,4793],{},":focus-visible"," only triggers when the browser determines focus should be visible, typically during keyboard navigation. Use ",[697,4796,759],{}," for focus indicators and ",[697,4799,1745],{}," for functional styling changes.",[4784,4802,4804,4805,4808,4809,725,4812,729,4815,1155],{"icon":4786,"label":4803},"Can I combine hover with other modifiers?","Yes! When you pass multiple modifiers to a utility, Styleframe generates all combinations. For example, passing ",[697,4806,4807],{},"[hover, dark]"," generates ",[697,4810,4811],{},"_hover:property:value",[697,4813,4814],{},"_dark:property:value",[697,4816,4817],{},"_dark:hover:property:value",[4784,4819,4821,4822,4824],{"icon":4786,"label":4820},"Does hover work on mobile?","On touch devices, ",[697,4823,724],{}," is typically triggered on tap and persists until the user taps elsewhere. For touch-specific behavior, consider using JavaScript event handlers instead.",[4784,4826,4828,4830,4831,4834],{"icon":4786,"label":4827},"How does focus-within differ from focus?",[697,4829,728],{}," applies to the focused element itself. ",[697,4832,4833],{},":focus-within"," applies to an element when it or any of its descendants receive focus. This is useful for highlighting parent containers, form groups, or dropdown menus when a child element is focused.",[4836,4837,4838],"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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":800,"searchDepth":841,"depth":841,"links":4840},[4841,4842,4843,4844,4845,4846,4847,4848,4849,4850,4853,4857,4858],{"id":717,"depth":841,"text":78},{"id":736,"depth":841,"text":737},{"id":775,"depth":841,"text":778},{"id":1398,"depth":841,"text":1401},{"id":1753,"depth":841,"text":1756},{"id":2128,"depth":841,"text":2131},{"id":2470,"depth":841,"text":2473},{"id":2786,"depth":841,"text":2789},{"id":3116,"depth":841,"text":3119},{"id":3459,"depth":841,"text":699,"children":4851},[4852],{"id":3984,"depth":864,"text":3985},{"id":4103,"depth":841,"text":4104,"children":4854},[4855,4856],{"id":4107,"depth":864,"text":4108},{"id":4484,"depth":864,"text":4485},{"id":4725,"depth":841,"text":4726},{"id":4778,"depth":841,"text":4779},"Create pseudo-state modifiers for interactive states like hover, focus, active, and more with full type safety.","md",null,{},{"title":673,"icon":676},{"title":684,"description":4859},"ZCx3UZzMN--hdX2UI906U_xoea95L0PAKAU7GI85kRM",[4867,4869],{"title":668,"path":669,"stem":670,"description":4868,"icon":671,"children":-1},"Create pseudo-element modifiers for targeting element sub-parts like before, after, placeholder, and selection with full type safety.",{"title":678,"path":679,"stem":680,"description":4870,"icon":681,"children":-1},"Create structural modifiers for targeting elements by their position in the DOM tree with full type safety.",1781596357348]