[{"data":1,"prerenderedAt":4578},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-composables-pseudo-state":407,"-docs-theme-modifiers-composables-pseudo-state-surround":4573},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":4565,"extension":4566,"links":4567,"meta":4568,"navigation":4569,"path":401,"seo":4570,"sitemap":4571,"stem":402,"__hash__":4572},"docs_theme/docs/theme/modifiers/02.composables/06.pseudo-state.md","Pseudo-State Modifiers",{"type":411,"value":412,"toc":4545},"minimark",[413,417,434,438,441,474,480,487,1064,1069,1100,1106,1112,1428,1431,1455,1461,1467,1803,1806,1830,1836,1842,2133,2136,2159,2172,2178,2184,2461,2464,2488,2494,2500,2792,2795,2819,2825,2831,3135,3138,3162,3168,3174,3687,3692,3807,3811,3815,4188,4192,4429,4433,4482,4486,4541],[414,415,64],"h2",{"id":416},"overview",[418,419,420,421,425,426,429,430,433],"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 ",[422,423,424],"code",{},":hover",", ",[422,427,428],{},":focus",", and ",[422,431,432],{},":active",", generating variant utility classes that respond to user behavior.",[414,435,437],{"id":436},"why-use-pseudo-state-modifiers","Why Use Pseudo-State Modifiers?",[418,439,440],{},"Pseudo-state modifiers help you:",[442,443,444,452,462,468],"ul",{},[445,446,447,451],"li",{},[448,449,450],"strong",{},"Create interactive UIs",": Apply styles when users hover, focus, or click on elements",[445,453,454,457,458,461],{},[448,455,456],{},"Build accessible interfaces",": Use ",[422,459,460],{},"focus-visible"," for keyboard-only focus indicators",[445,463,464,467],{},[448,465,466],{},"Generate state variants",": Automatically create hover, focus, and active versions of any utility",[445,469,470,473],{},[448,471,472],{},"Keep styling declarative",": Express interactive states directly in your HTML class names",[414,475,477],{"id":476},"usehovermodifier",[422,478,479],{},"useHoverModifier",[418,481,482,483,486],{},"The ",[422,484,485],{},"useHoverModifier()"," function creates a modifier that applies styles when the user hovers over an element.",[488,489,490,843,1010],"tabs",{},[491,492,495],"tabs-item",{"icon":493,"label":494},"i-lucide-code","Code",[496,497,503],"pre",{"className":498,"code":499,"filename":500,"language":501,"meta":502,"style":502},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe/theme\";\nimport { useBackgroundColorUtility } from \"@styleframe/theme\";\nimport { useHoverModifier } from \"@styleframe/theme\";\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","",[422,504,505,541,564,586,608,614,635,656,661,691,713,730,746,751,768,773,785,800,814,825,830],{"__ignoreMap":502},[506,507,510,514,518,522,525,528,531,535,538],"span",{"class":508,"line":509},"line",1,[506,511,513],{"class":512},"s7zQu","import",[506,515,517],{"class":516},"sMK4o"," {",[506,519,521],{"class":520},"sTEyZ"," styleframe",[506,523,524],{"class":516}," }",[506,526,527],{"class":512}," from",[506,529,530],{"class":516}," \"",[506,532,534],{"class":533},"sfazB","styleframe",[506,536,537],{"class":516},"\"",[506,539,540],{"class":516},";\n",[506,542,544,546,548,551,553,555,557,560,562],{"class":508,"line":543},2,[506,545,513],{"class":512},[506,547,517],{"class":516},[506,549,550],{"class":520}," useColorDesignTokens",[506,552,524],{"class":516},[506,554,527],{"class":512},[506,556,530],{"class":516},[506,558,559],{"class":533},"@styleframe/theme",[506,561,537],{"class":516},[506,563,540],{"class":516},[506,565,567,569,571,574,576,578,580,582,584],{"class":508,"line":566},3,[506,568,513],{"class":512},[506,570,517],{"class":516},[506,572,573],{"class":520}," useBackgroundColorUtility",[506,575,524],{"class":516},[506,577,527],{"class":512},[506,579,530],{"class":516},[506,581,559],{"class":533},[506,583,537],{"class":516},[506,585,540],{"class":516},[506,587,589,591,593,596,598,600,602,604,606],{"class":508,"line":588},4,[506,590,513],{"class":512},[506,592,517],{"class":516},[506,594,595],{"class":520}," useHoverModifier",[506,597,524],{"class":516},[506,599,527],{"class":512},[506,601,530],{"class":516},[506,603,559],{"class":533},[506,605,537],{"class":516},[506,607,540],{"class":516},[506,609,611],{"class":508,"line":610},5,[506,612,613],{"emptyLinePlaceholder":206},"\n",[506,615,617,621,624,627,630,633],{"class":508,"line":616},6,[506,618,620],{"class":619},"spNyl","const",[506,622,623],{"class":520}," s ",[506,625,626],{"class":516},"=",[506,628,521],{"class":629},"s2Zo4",[506,631,632],{"class":520},"()",[506,634,540],{"class":516},[506,636,638,640,642,645,648,651,654],{"class":508,"line":637},7,[506,639,620],{"class":619},[506,641,517],{"class":516},[506,643,644],{"class":520}," ref ",[506,646,647],{"class":516},"}",[506,649,650],{"class":516}," =",[506,652,653],{"class":520}," s",[506,655,540],{"class":516},[506,657,659],{"class":508,"line":658},8,[506,660,613],{"emptyLinePlaceholder":206},[506,662,664,666,668,671,674,677,679,681,683,686,688],{"class":508,"line":663},9,[506,665,620],{"class":619},[506,667,517],{"class":516},[506,669,670],{"class":520}," colorPrimary",[506,672,673],{"class":516},",",[506,675,676],{"class":520}," colorSecondary ",[506,678,647],{"class":516},[506,680,650],{"class":516},[506,682,550],{"class":629},[506,684,685],{"class":520},"(s",[506,687,673],{"class":516},[506,689,690],{"class":516}," {\n",[506,692,694,698,701,704,707,710],{"class":508,"line":693},10,[506,695,697],{"class":696},"swJcz","    primary",[506,699,700],{"class":516},":",[506,702,703],{"class":516}," '",[506,705,706],{"class":533},"#006cff",[506,708,709],{"class":516},"'",[506,711,712],{"class":516},",\n",[506,714,716,719,721,723,726,728],{"class":508,"line":715},11,[506,717,718],{"class":696},"    secondary",[506,720,700],{"class":516},[506,722,703],{"class":516},[506,724,725],{"class":533},"#6c757d",[506,727,709],{"class":516},[506,729,712],{"class":516},[506,731,733,735,738,741,744],{"class":508,"line":732},12,[506,734,647],{"class":516},[506,736,737],{"class":512}," as",[506,739,740],{"class":619}," const",[506,742,743],{"class":520},")",[506,745,540],{"class":516},[506,747,749],{"class":508,"line":748},13,[506,750,613],{"emptyLinePlaceholder":206},[506,752,754,756,759,761,763,766],{"class":508,"line":753},14,[506,755,620],{"class":619},[506,757,758],{"class":520}," hover ",[506,760,626],{"class":516},[506,762,595],{"class":629},[506,764,765],{"class":520},"(s)",[506,767,540],{"class":516},[506,769,771],{"class":508,"line":770},15,[506,772,613],{"emptyLinePlaceholder":206},[506,774,776,779,781,783],{"class":508,"line":775},16,[506,777,778],{"class":629},"useBackgroundColorUtility",[506,780,685],{"class":520},[506,782,673],{"class":516},[506,784,690],{"class":516},[506,786,788,790,792,795,798],{"class":508,"line":787},17,[506,789,697],{"class":696},[506,791,700],{"class":516},[506,793,794],{"class":629}," ref",[506,796,797],{"class":520},"(colorPrimary)",[506,799,712],{"class":516},[506,801,803,805,807,809,812],{"class":508,"line":802},18,[506,804,718],{"class":696},[506,806,700],{"class":516},[506,808,794],{"class":629},[506,810,811],{"class":520},"(colorSecondary)",[506,813,712],{"class":516},[506,815,817,820,823],{"class":508,"line":816},19,[506,818,819],{"class":516},"},",[506,821,822],{"class":520}," [hover])",[506,824,540],{"class":516},[506,826,828],{"class":508,"line":827},20,[506,829,613],{"emptyLinePlaceholder":206},[506,831,833,836,839,841],{"class":508,"line":832},21,[506,834,835],{"class":512},"export",[506,837,838],{"class":512}," default",[506,840,653],{"class":520},[506,842,540],{"class":516},[491,844,846],{"icon":140,"label":845},"Output",[496,847,852],{"className":848,"code":849,"filename":850,"language":851,"meta":502,"style":502},"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/index.css","css",[422,853,854,892,920,924,942,963,968,972,988,1006],{"__ignoreMap":502},[506,855,856,859,863,866,869,871,875,877,880,883,886,889],{"class":508,"line":509},[506,857,858],{"class":516},".",[506,860,862],{"class":861},"sBMFI","_background-color",[506,864,865],{"class":520},"\\:",[506,867,868],{"class":861},"primary",[506,870,517],{"class":516},[506,872,874],{"class":873},"sqsOY"," background-color",[506,876,700],{"class":516},[506,878,879],{"class":629}," var",[506,881,882],{"class":516},"(",[506,884,885],{"class":520},"--color--primary",[506,887,888],{"class":516},");",[506,890,891],{"class":516}," }\n",[506,893,894,896,898,900,903,905,907,909,911,913,916,918],{"class":508,"line":543},[506,895,858],{"class":516},[506,897,862],{"class":861},[506,899,865],{"class":520},[506,901,902],{"class":861},"secondary",[506,904,517],{"class":516},[506,906,874],{"class":873},[506,908,700],{"class":516},[506,910,879],{"class":629},[506,912,882],{"class":516},[506,914,915],{"class":520},"--color--secondary",[506,917,888],{"class":516},[506,919,891],{"class":516},[506,921,922],{"class":508,"line":566},[506,923,613],{"emptyLinePlaceholder":206},[506,925,926,928,931,933,936,938,940],{"class":508,"line":588},[506,927,858],{"class":516},[506,929,930],{"class":861},"_hover",[506,932,865],{"class":520},[506,934,935],{"class":861},"background-color",[506,937,865],{"class":520},[506,939,868],{"class":861},[506,941,690],{"class":516},[506,943,944,947,949,952,955,957,959,961],{"class":508,"line":610},[506,945,946],{"class":520},"    &",[506,948,700],{"class":516},[506,950,951],{"class":520},"hover { background-color: ",[506,953,954],{"class":629},"var",[506,956,882],{"class":516},[506,958,885],{"class":520},[506,960,888],{"class":516},[506,962,891],{"class":516},[506,964,965],{"class":508,"line":616},[506,966,967],{"class":520},"}\n",[506,969,970],{"class":508,"line":637},[506,971,613],{"emptyLinePlaceholder":206},[506,973,974,976,978,980,982,984,986],{"class":508,"line":658},[506,975,858],{"class":516},[506,977,930],{"class":861},[506,979,865],{"class":520},[506,981,935],{"class":861},[506,983,865],{"class":520},[506,985,902],{"class":861},[506,987,690],{"class":516},[506,989,990,992,994,996,998,1000,1002,1004],{"class":508,"line":663},[506,991,946],{"class":520},[506,993,700],{"class":516},[506,995,951],{"class":520},[506,997,954],{"class":629},[506,999,882],{"class":516},[506,1001,915],{"class":520},[506,1003,888],{"class":516},[506,1005,891],{"class":516},[506,1007,1008],{"class":508,"line":693},[506,1009,967],{"class":520},[491,1011,1014],{"icon":1012,"label":1013},"i-lucide-layout","Usage",[496,1015,1019],{"className":1016,"code":1017,"language":1018,"meta":502,"style":502},"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/button>\n","html",[422,1020,1021,1027,1050,1055],{"__ignoreMap":502},[506,1022,1023],{"class":508,"line":509},[506,1024,1026],{"class":1025},"sHwdD","\u003C!-- Change background on hover -->\n",[506,1028,1029,1032,1035,1038,1040,1042,1045,1047],{"class":508,"line":543},[506,1030,1031],{"class":516},"\u003C",[506,1033,1034],{"class":696},"button",[506,1036,1037],{"class":619}," class",[506,1039,626],{"class":516},[506,1041,537],{"class":516},[506,1043,1044],{"class":533},"_background-color:secondary _hover:background-color:primary",[506,1046,537],{"class":516},[506,1048,1049],{"class":516},">\n",[506,1051,1052],{"class":508,"line":566},[506,1053,1054],{"class":520},"    Hover me\n",[506,1056,1057,1060,1062],{"class":508,"line":588},[506,1058,1059],{"class":516},"\u003C/",[506,1061,1034],{"class":696},[506,1063,1049],{"class":516},[1065,1066,1068],"h4",{"id":1067},"css-selector","CSS Selector",[1070,1071,1072,1084],"table",{},[1073,1074,1075],"thead",{},[1076,1077,1078,1082],"tr",{},[1079,1080,1081],"th",{},"Modifier Name",[1079,1083,1068],{},[1085,1086,1087],"tbody",{},[1076,1088,1089,1095],{},[1090,1091,1092],"td",{},[422,1093,1094],{},"hover",[1090,1096,1097],{},[422,1098,1099],{},"&:hover",[414,1101,1103],{"id":1102},"usefocusmodifier",[422,1104,1105],{},"useFocusModifier",[418,1107,482,1108,1111],{},[422,1109,1110],{},"useFocusModifier()"," function creates a modifier that applies styles when an element receives focus.",[488,1113,1114,1273,1372],{},[491,1115,1116],{"icon":493,"label":494},[496,1117,1119],{"className":498,"code":1118,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from \"styleframe\";\nimport { useRingUtility } from \"@styleframe/theme\";\nimport { useFocusModifier } from \"@styleframe/theme\";\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",[422,1120,1121,1141,1162,1183,1187,1201,1205,1220,1224,1235,1250,1259,1263],{"__ignoreMap":502},[506,1122,1123,1125,1127,1129,1131,1133,1135,1137,1139],{"class":508,"line":509},[506,1124,513],{"class":512},[506,1126,517],{"class":516},[506,1128,521],{"class":520},[506,1130,524],{"class":516},[506,1132,527],{"class":512},[506,1134,530],{"class":516},[506,1136,534],{"class":533},[506,1138,537],{"class":516},[506,1140,540],{"class":516},[506,1142,1143,1145,1147,1150,1152,1154,1156,1158,1160],{"class":508,"line":543},[506,1144,513],{"class":512},[506,1146,517],{"class":516},[506,1148,1149],{"class":520}," useRingUtility",[506,1151,524],{"class":516},[506,1153,527],{"class":512},[506,1155,530],{"class":516},[506,1157,559],{"class":533},[506,1159,537],{"class":516},[506,1161,540],{"class":516},[506,1163,1164,1166,1168,1171,1173,1175,1177,1179,1181],{"class":508,"line":566},[506,1165,513],{"class":512},[506,1167,517],{"class":516},[506,1169,1170],{"class":520}," useFocusModifier",[506,1172,524],{"class":516},[506,1174,527],{"class":512},[506,1176,530],{"class":516},[506,1178,559],{"class":533},[506,1180,537],{"class":516},[506,1182,540],{"class":516},[506,1184,1185],{"class":508,"line":588},[506,1186,613],{"emptyLinePlaceholder":206},[506,1188,1189,1191,1193,1195,1197,1199],{"class":508,"line":610},[506,1190,620],{"class":619},[506,1192,623],{"class":520},[506,1194,626],{"class":516},[506,1196,521],{"class":629},[506,1198,632],{"class":520},[506,1200,540],{"class":516},[506,1202,1203],{"class":508,"line":616},[506,1204,613],{"emptyLinePlaceholder":206},[506,1206,1207,1209,1212,1214,1216,1218],{"class":508,"line":637},[506,1208,620],{"class":619},[506,1210,1211],{"class":520}," focus ",[506,1213,626],{"class":516},[506,1215,1170],{"class":629},[506,1217,765],{"class":520},[506,1219,540],{"class":516},[506,1221,1222],{"class":508,"line":658},[506,1223,613],{"emptyLinePlaceholder":206},[506,1225,1226,1229,1231,1233],{"class":508,"line":663},[506,1227,1228],{"class":629},"useRingUtility",[506,1230,685],{"class":520},[506,1232,673],{"class":516},[506,1234,690],{"class":516},[506,1236,1237,1239,1241,1243,1246,1248],{"class":508,"line":693},[506,1238,697],{"class":696},[506,1240,700],{"class":516},[506,1242,703],{"class":516},[506,1244,1245],{"class":533},"0 0 0 2px #006cff",[506,1247,709],{"class":516},[506,1249,712],{"class":516},[506,1251,1252,1254,1257],{"class":508,"line":715},[506,1253,819],{"class":516},[506,1255,1256],{"class":520}," [focus])",[506,1258,540],{"class":516},[506,1260,1261],{"class":508,"line":732},[506,1262,613],{"emptyLinePlaceholder":206},[506,1264,1265,1267,1269,1271],{"class":508,"line":748},[506,1266,835],{"class":512},[506,1268,838],{"class":512},[506,1270,653],{"class":520},[506,1272,540],{"class":516},[491,1274,1275],{"icon":140,"label":845},[496,1276,1278],{"className":848,"code":1277,"filename":850,"language":851,"meta":502,"style":502},"._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",[422,1279,1280,1320,1324,1342,1368],{"__ignoreMap":502},[506,1281,1282,1284,1287,1289,1291,1293,1296,1298,1302,1304,1306,1309,1312,1315,1318],{"class":508,"line":509},[506,1283,858],{"class":516},[506,1285,1286],{"class":861},"_ring",[506,1288,865],{"class":520},[506,1290,868],{"class":861},[506,1292,517],{"class":516},[506,1294,1295],{"class":873}," box-shadow",[506,1297,700],{"class":516},[506,1299,1301],{"class":1300},"sbssI"," 0",[506,1303,1301],{"class":1300},[506,1305,1301],{"class":1300},[506,1307,1308],{"class":1300}," 2px",[506,1310,1311],{"class":516}," #",[506,1313,1314],{"class":520},"006cff",[506,1316,1317],{"class":516},";",[506,1319,891],{"class":516},[506,1321,1322],{"class":508,"line":543},[506,1323,613],{"emptyLinePlaceholder":206},[506,1325,1326,1328,1331,1333,1336,1338,1340],{"class":508,"line":566},[506,1327,858],{"class":516},[506,1329,1330],{"class":861},"_focus",[506,1332,865],{"class":520},[506,1334,1335],{"class":861},"ring",[506,1337,865],{"class":520},[506,1339,868],{"class":861},[506,1341,690],{"class":516},[506,1343,1344,1346,1348,1351,1354,1356,1358,1360,1362,1364,1366],{"class":508,"line":588},[506,1345,946],{"class":520},[506,1347,700],{"class":516},[506,1349,1350],{"class":520},"focus { box-shadow: ",[506,1352,1353],{"class":1300},"0",[506,1355,1301],{"class":1300},[506,1357,1301],{"class":1300},[506,1359,1308],{"class":1300},[506,1361,1311],{"class":516},[506,1363,1314],{"class":520},[506,1365,1317],{"class":516},[506,1367,891],{"class":516},[506,1369,1370],{"class":508,"line":610},[506,1371,967],{"class":520},[491,1373,1374],{"icon":1012,"label":1013},[496,1375,1377],{"className":1016,"code":1376,"language":1018,"meta":502,"style":502},"\u003C!-- Add focus ring on focus -->\n\u003Cinput class=\"_focus:ring:primary\" type=\"text\" placeholder=\"Focus me\">\n",[422,1378,1379,1384],{"__ignoreMap":502},[506,1380,1381],{"class":508,"line":509},[506,1382,1383],{"class":1025},"\u003C!-- Add focus ring on focus -->\n",[506,1385,1386,1388,1391,1393,1395,1397,1400,1402,1405,1407,1409,1412,1414,1417,1419,1421,1424,1426],{"class":508,"line":543},[506,1387,1031],{"class":516},[506,1389,1390],{"class":696},"input",[506,1392,1037],{"class":619},[506,1394,626],{"class":516},[506,1396,537],{"class":516},[506,1398,1399],{"class":533},"_focus:ring:primary",[506,1401,537],{"class":516},[506,1403,1404],{"class":619}," type",[506,1406,626],{"class":516},[506,1408,537],{"class":516},[506,1410,1411],{"class":533},"text",[506,1413,537],{"class":516},[506,1415,1416],{"class":619}," placeholder",[506,1418,626],{"class":516},[506,1420,537],{"class":516},[506,1422,1423],{"class":533},"Focus me",[506,1425,537],{"class":516},[506,1427,1049],{"class":516},[1065,1429,1068],{"id":1430},"css-selector-1",[1070,1432,1433,1441],{},[1073,1434,1435],{},[1076,1436,1437,1439],{},[1079,1438,1081],{},[1079,1440,1068],{},[1085,1442,1443],{},[1076,1444,1445,1450],{},[1090,1446,1447],{},[422,1448,1449],{},"focus",[1090,1451,1452],{},[422,1453,1454],{},"&:focus",[414,1456,1458],{"id":1457},"usefocuswithinmodifier",[422,1459,1460],{},"useFocusWithinModifier",[418,1462,482,1463,1466],{},[422,1464,1465],{},"useFocusWithinModifier()"," function creates a modifier that applies styles when any child element receives focus.",[488,1468,1469,1627,1704],{},[491,1470,1471],{"icon":493,"label":494},[496,1472,1474],{"className":498,"code":1473,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from \"styleframe\";\nimport { useBorderColorUtility } from \"@styleframe/theme\";\nimport { useFocusWithinModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst focusWithin = useFocusWithinModifier(s);\n\nuseBorderColorUtility(s, {\n    primary: '#006cff',\n}, [focusWithin]);\n\nexport default s;\n",[422,1475,1476,1496,1517,1538,1542,1556,1560,1575,1579,1590,1604,1613,1617],{"__ignoreMap":502},[506,1477,1478,1480,1482,1484,1486,1488,1490,1492,1494],{"class":508,"line":509},[506,1479,513],{"class":512},[506,1481,517],{"class":516},[506,1483,521],{"class":520},[506,1485,524],{"class":516},[506,1487,527],{"class":512},[506,1489,530],{"class":516},[506,1491,534],{"class":533},[506,1493,537],{"class":516},[506,1495,540],{"class":516},[506,1497,1498,1500,1502,1505,1507,1509,1511,1513,1515],{"class":508,"line":543},[506,1499,513],{"class":512},[506,1501,517],{"class":516},[506,1503,1504],{"class":520}," useBorderColorUtility",[506,1506,524],{"class":516},[506,1508,527],{"class":512},[506,1510,530],{"class":516},[506,1512,559],{"class":533},[506,1514,537],{"class":516},[506,1516,540],{"class":516},[506,1518,1519,1521,1523,1526,1528,1530,1532,1534,1536],{"class":508,"line":566},[506,1520,513],{"class":512},[506,1522,517],{"class":516},[506,1524,1525],{"class":520}," useFocusWithinModifier",[506,1527,524],{"class":516},[506,1529,527],{"class":512},[506,1531,530],{"class":516},[506,1533,559],{"class":533},[506,1535,537],{"class":516},[506,1537,540],{"class":516},[506,1539,1540],{"class":508,"line":588},[506,1541,613],{"emptyLinePlaceholder":206},[506,1543,1544,1546,1548,1550,1552,1554],{"class":508,"line":610},[506,1545,620],{"class":619},[506,1547,623],{"class":520},[506,1549,626],{"class":516},[506,1551,521],{"class":629},[506,1553,632],{"class":520},[506,1555,540],{"class":516},[506,1557,1558],{"class":508,"line":616},[506,1559,613],{"emptyLinePlaceholder":206},[506,1561,1562,1564,1567,1569,1571,1573],{"class":508,"line":637},[506,1563,620],{"class":619},[506,1565,1566],{"class":520}," focusWithin ",[506,1568,626],{"class":516},[506,1570,1525],{"class":629},[506,1572,765],{"class":520},[506,1574,540],{"class":516},[506,1576,1577],{"class":508,"line":658},[506,1578,613],{"emptyLinePlaceholder":206},[506,1580,1581,1584,1586,1588],{"class":508,"line":663},[506,1582,1583],{"class":629},"useBorderColorUtility",[506,1585,685],{"class":520},[506,1587,673],{"class":516},[506,1589,690],{"class":516},[506,1591,1592,1594,1596,1598,1600,1602],{"class":508,"line":693},[506,1593,697],{"class":696},[506,1595,700],{"class":516},[506,1597,703],{"class":516},[506,1599,706],{"class":533},[506,1601,709],{"class":516},[506,1603,712],{"class":516},[506,1605,1606,1608,1611],{"class":508,"line":715},[506,1607,819],{"class":516},[506,1609,1610],{"class":520}," [focusWithin])",[506,1612,540],{"class":516},[506,1614,1615],{"class":508,"line":732},[506,1616,613],{"emptyLinePlaceholder":206},[506,1618,1619,1621,1623,1625],{"class":508,"line":748},[506,1620,835],{"class":512},[506,1622,838],{"class":512},[506,1624,653],{"class":520},[506,1626,540],{"class":516},[491,1628,1629],{"icon":140,"label":845},[496,1630,1632],{"className":848,"code":1631,"filename":850,"language":851,"meta":502,"style":502},"._border-color\\:primary { border-color: #006cff; }\n\n._focus-within\\:border-color\\:primary {\n    &:focus-within { border-color: #006cff; }\n}\n",[422,1633,1634,1660,1664,1682,1700],{"__ignoreMap":502},[506,1635,1636,1638,1641,1643,1645,1647,1650,1652,1654,1656,1658],{"class":508,"line":509},[506,1637,858],{"class":516},[506,1639,1640],{"class":861},"_border-color",[506,1642,865],{"class":520},[506,1644,868],{"class":861},[506,1646,517],{"class":516},[506,1648,1649],{"class":873}," border-color",[506,1651,700],{"class":516},[506,1653,1311],{"class":516},[506,1655,1314],{"class":520},[506,1657,1317],{"class":516},[506,1659,891],{"class":516},[506,1661,1662],{"class":508,"line":543},[506,1663,613],{"emptyLinePlaceholder":206},[506,1665,1666,1668,1671,1673,1676,1678,1680],{"class":508,"line":566},[506,1667,858],{"class":516},[506,1669,1670],{"class":861},"_focus-within",[506,1672,865],{"class":520},[506,1674,1675],{"class":861},"border-color",[506,1677,865],{"class":520},[506,1679,868],{"class":861},[506,1681,690],{"class":516},[506,1683,1684,1686,1688,1691,1694,1696,1698],{"class":508,"line":588},[506,1685,946],{"class":520},[506,1687,700],{"class":516},[506,1689,1690],{"class":520},"focus-within { border-color: ",[506,1692,1693],{"class":516},"#",[506,1695,1314],{"class":520},[506,1697,1317],{"class":516},[506,1699,891],{"class":516},[506,1701,1702],{"class":508,"line":610},[506,1703,967],{"class":520},[491,1705,1706],{"icon":1012,"label":1013},[496,1707,1709],{"className":1016,"code":1708,"language":1018,"meta":502,"style":502},"\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/div>\n",[422,1710,1711,1716,1736,1766,1795],{"__ignoreMap":502},[506,1712,1713],{"class":508,"line":509},[506,1714,1715],{"class":1025},"\u003C!-- Highlight form group when any input is focused -->\n",[506,1717,1718,1720,1723,1725,1727,1729,1732,1734],{"class":508,"line":543},[506,1719,1031],{"class":516},[506,1721,1722],{"class":696},"div",[506,1724,1037],{"class":619},[506,1726,626],{"class":516},[506,1728,537],{"class":516},[506,1730,1731],{"class":533},"_focus-within:border-color:primary",[506,1733,537],{"class":516},[506,1735,1049],{"class":516},[506,1737,1738,1741,1743,1745,1747,1749,1751,1753,1755,1757,1759,1762,1764],{"class":508,"line":566},[506,1739,1740],{"class":516},"    \u003C",[506,1742,1390],{"class":696},[506,1744,1404],{"class":619},[506,1746,626],{"class":516},[506,1748,537],{"class":516},[506,1750,1411],{"class":533},[506,1752,537],{"class":516},[506,1754,1416],{"class":619},[506,1756,626],{"class":516},[506,1758,537],{"class":516},[506,1760,1761],{"class":533},"Focus any input",[506,1763,537],{"class":516},[506,1765,1049],{"class":516},[506,1767,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1791,1793],{"class":508,"line":588},[506,1769,1740],{"class":516},[506,1771,1390],{"class":696},[506,1773,1404],{"class":619},[506,1775,626],{"class":516},[506,1777,537],{"class":516},[506,1779,1411],{"class":533},[506,1781,537],{"class":516},[506,1783,1416],{"class":619},[506,1785,626],{"class":516},[506,1787,537],{"class":516},[506,1789,1790],{"class":533},"Or this one",[506,1792,537],{"class":516},[506,1794,1049],{"class":516},[506,1796,1797,1799,1801],{"class":508,"line":610},[506,1798,1059],{"class":516},[506,1800,1722],{"class":696},[506,1802,1049],{"class":516},[1065,1804,1068],{"id":1805},"css-selector-2",[1070,1807,1808,1816],{},[1073,1809,1810],{},[1076,1811,1812,1814],{},[1079,1813,1081],{},[1079,1815,1068],{},[1085,1817,1818],{},[1076,1819,1820,1825],{},[1090,1821,1822],{},[422,1823,1824],{},"focus-within",[1090,1826,1827],{},[422,1828,1829],{},"&:focus-within",[414,1831,1833],{"id":1832},"usefocusvisiblemodifier",[422,1834,1835],{},"useFocusVisibleModifier",[418,1837,482,1838,1841],{},[422,1839,1840],{},"useFocusVisibleModifier()"," function creates a modifier that applies styles only when focus is visible (typically keyboard navigation).",[488,1843,1844,2003,2089],{},[491,1845,1846],{"icon":493,"label":494},[496,1847,1849],{"className":498,"code":1848,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from \"styleframe\";\nimport { useOutlineUtility } from \"@styleframe/theme\";\nimport { useFocusVisibleModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst focusVisible = useFocusVisibleModifier(s);\n\nuseOutlineUtility(s, {\n    primary: '2px solid #006cff',\n}, [focusVisible]);\n\nexport default s;\n",[422,1850,1851,1871,1892,1913,1917,1931,1935,1950,1954,1965,1980,1989,1993],{"__ignoreMap":502},[506,1852,1853,1855,1857,1859,1861,1863,1865,1867,1869],{"class":508,"line":509},[506,1854,513],{"class":512},[506,1856,517],{"class":516},[506,1858,521],{"class":520},[506,1860,524],{"class":516},[506,1862,527],{"class":512},[506,1864,530],{"class":516},[506,1866,534],{"class":533},[506,1868,537],{"class":516},[506,1870,540],{"class":516},[506,1872,1873,1875,1877,1880,1882,1884,1886,1888,1890],{"class":508,"line":543},[506,1874,513],{"class":512},[506,1876,517],{"class":516},[506,1878,1879],{"class":520}," useOutlineUtility",[506,1881,524],{"class":516},[506,1883,527],{"class":512},[506,1885,530],{"class":516},[506,1887,559],{"class":533},[506,1889,537],{"class":516},[506,1891,540],{"class":516},[506,1893,1894,1896,1898,1901,1903,1905,1907,1909,1911],{"class":508,"line":566},[506,1895,513],{"class":512},[506,1897,517],{"class":516},[506,1899,1900],{"class":520}," useFocusVisibleModifier",[506,1902,524],{"class":516},[506,1904,527],{"class":512},[506,1906,530],{"class":516},[506,1908,559],{"class":533},[506,1910,537],{"class":516},[506,1912,540],{"class":516},[506,1914,1915],{"class":508,"line":588},[506,1916,613],{"emptyLinePlaceholder":206},[506,1918,1919,1921,1923,1925,1927,1929],{"class":508,"line":610},[506,1920,620],{"class":619},[506,1922,623],{"class":520},[506,1924,626],{"class":516},[506,1926,521],{"class":629},[506,1928,632],{"class":520},[506,1930,540],{"class":516},[506,1932,1933],{"class":508,"line":616},[506,1934,613],{"emptyLinePlaceholder":206},[506,1936,1937,1939,1942,1944,1946,1948],{"class":508,"line":637},[506,1938,620],{"class":619},[506,1940,1941],{"class":520}," focusVisible ",[506,1943,626],{"class":516},[506,1945,1900],{"class":629},[506,1947,765],{"class":520},[506,1949,540],{"class":516},[506,1951,1952],{"class":508,"line":658},[506,1953,613],{"emptyLinePlaceholder":206},[506,1955,1956,1959,1961,1963],{"class":508,"line":663},[506,1957,1958],{"class":629},"useOutlineUtility",[506,1960,685],{"class":520},[506,1962,673],{"class":516},[506,1964,690],{"class":516},[506,1966,1967,1969,1971,1973,1976,1978],{"class":508,"line":693},[506,1968,697],{"class":696},[506,1970,700],{"class":516},[506,1972,703],{"class":516},[506,1974,1975],{"class":533},"2px solid #006cff",[506,1977,709],{"class":516},[506,1979,712],{"class":516},[506,1981,1982,1984,1987],{"class":508,"line":715},[506,1983,819],{"class":516},[506,1985,1986],{"class":520}," [focusVisible])",[506,1988,540],{"class":516},[506,1990,1991],{"class":508,"line":732},[506,1992,613],{"emptyLinePlaceholder":206},[506,1994,1995,1997,1999,2001],{"class":508,"line":748},[506,1996,835],{"class":512},[506,1998,838],{"class":512},[506,2000,653],{"class":520},[506,2002,540],{"class":516},[491,2004,2005],{"icon":140,"label":845},[496,2006,2008],{"className":848,"code":2007,"filename":850,"language":851,"meta":502,"style":502},"._outline\\:primary { outline: 2px solid #006cff; }\n\n._focus-visible\\:outline\\:primary {\n    &:focus-visible { outline: 2px solid #006cff; }\n}\n",[422,2009,2010,2041,2045,2063,2085],{"__ignoreMap":502},[506,2011,2012,2014,2017,2019,2021,2023,2026,2028,2030,2033,2035,2037,2039],{"class":508,"line":509},[506,2013,858],{"class":516},[506,2015,2016],{"class":861},"_outline",[506,2018,865],{"class":520},[506,2020,868],{"class":861},[506,2022,517],{"class":516},[506,2024,2025],{"class":873}," outline",[506,2027,700],{"class":516},[506,2029,1308],{"class":1300},[506,2031,2032],{"class":520}," solid ",[506,2034,1693],{"class":516},[506,2036,1314],{"class":520},[506,2038,1317],{"class":516},[506,2040,891],{"class":516},[506,2042,2043],{"class":508,"line":543},[506,2044,613],{"emptyLinePlaceholder":206},[506,2046,2047,2049,2052,2054,2057,2059,2061],{"class":508,"line":566},[506,2048,858],{"class":516},[506,2050,2051],{"class":861},"_focus-visible",[506,2053,865],{"class":520},[506,2055,2056],{"class":861},"outline",[506,2058,865],{"class":520},[506,2060,868],{"class":861},[506,2062,690],{"class":516},[506,2064,2065,2067,2069,2072,2075,2077,2079,2081,2083],{"class":508,"line":588},[506,2066,946],{"class":520},[506,2068,700],{"class":516},[506,2070,2071],{"class":520},"focus-visible { outline: ",[506,2073,2074],{"class":1300},"2px",[506,2076,2032],{"class":520},[506,2078,1693],{"class":516},[506,2080,1314],{"class":520},[506,2082,1317],{"class":516},[506,2084,891],{"class":516},[506,2086,2087],{"class":508,"line":610},[506,2088,967],{"class":520},[491,2090,2091],{"icon":1012,"label":1013},[496,2092,2094],{"className":1016,"code":2093,"language":1018,"meta":502,"style":502},"\u003C!-- Show outline only for keyboard focus -->\n\u003Cbutton class=\"_focus-visible:outline:primary\">\n    Tab to me\n\u003C/button>\n",[422,2095,2096,2101,2120,2125],{"__ignoreMap":502},[506,2097,2098],{"class":508,"line":509},[506,2099,2100],{"class":1025},"\u003C!-- Show outline only for keyboard focus -->\n",[506,2102,2103,2105,2107,2109,2111,2113,2116,2118],{"class":508,"line":543},[506,2104,1031],{"class":516},[506,2106,1034],{"class":696},[506,2108,1037],{"class":619},[506,2110,626],{"class":516},[506,2112,537],{"class":516},[506,2114,2115],{"class":533},"_focus-visible:outline:primary",[506,2117,537],{"class":516},[506,2119,1049],{"class":516},[506,2121,2122],{"class":508,"line":566},[506,2123,2124],{"class":520},"    Tab to me\n",[506,2126,2127,2129,2131],{"class":508,"line":588},[506,2128,1059],{"class":516},[506,2130,1034],{"class":696},[506,2132,1049],{"class":516},[1065,2134,1068],{"id":2135},"css-selector-3",[1070,2137,2138,2146],{},[1073,2139,2140],{},[1076,2141,2142,2144],{},[1079,2143,1081],{},[1079,2145,1068],{},[1085,2147,2148],{},[1076,2149,2150,2154],{},[1090,2151,2152],{},[422,2153,460],{},[1090,2155,2156],{},[422,2157,2158],{},"&:focus-visible",[2160,2161,2162,2165,2166,2168,2169,2171],"tip",{},[448,2163,2164],{},"Pro tip",": Prefer ",[422,2167,1835],{}," over ",[422,2170,1105],{}," for focus indicators. It only shows the indicator for keyboard navigation, not mouse clicks, providing a cleaner user experience.",[414,2173,2175],{"id":2174},"useactivemodifier",[422,2176,2177],{},"useActiveModifier",[418,2179,482,2180,2183],{},[422,2181,2182],{},"useActiveModifier()"," function creates a modifier that applies styles when an element is being activated (clicked/pressed).",[488,2185,2186,2346,2420],{},[491,2187,2188],{"icon":493,"label":494},[496,2189,2191],{"className":498,"code":2190,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from \"styleframe\";\nimport { useScaleUtility } from \"@styleframe/theme\";\nimport { useActiveModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst active = useActiveModifier(s);\n\nuseScaleUtility(s, {\n    95: '0.95',\n}, [active]);\n\nexport default s;\n",[422,2192,2193,2213,2234,2255,2259,2273,2277,2292,2296,2307,2323,2332,2336],{"__ignoreMap":502},[506,2194,2195,2197,2199,2201,2203,2205,2207,2209,2211],{"class":508,"line":509},[506,2196,513],{"class":512},[506,2198,517],{"class":516},[506,2200,521],{"class":520},[506,2202,524],{"class":516},[506,2204,527],{"class":512},[506,2206,530],{"class":516},[506,2208,534],{"class":533},[506,2210,537],{"class":516},[506,2212,540],{"class":516},[506,2214,2215,2217,2219,2222,2224,2226,2228,2230,2232],{"class":508,"line":543},[506,2216,513],{"class":512},[506,2218,517],{"class":516},[506,2220,2221],{"class":520}," useScaleUtility",[506,2223,524],{"class":516},[506,2225,527],{"class":512},[506,2227,530],{"class":516},[506,2229,559],{"class":533},[506,2231,537],{"class":516},[506,2233,540],{"class":516},[506,2235,2236,2238,2240,2243,2245,2247,2249,2251,2253],{"class":508,"line":566},[506,2237,513],{"class":512},[506,2239,517],{"class":516},[506,2241,2242],{"class":520}," useActiveModifier",[506,2244,524],{"class":516},[506,2246,527],{"class":512},[506,2248,530],{"class":516},[506,2250,559],{"class":533},[506,2252,537],{"class":516},[506,2254,540],{"class":516},[506,2256,2257],{"class":508,"line":588},[506,2258,613],{"emptyLinePlaceholder":206},[506,2260,2261,2263,2265,2267,2269,2271],{"class":508,"line":610},[506,2262,620],{"class":619},[506,2264,623],{"class":520},[506,2266,626],{"class":516},[506,2268,521],{"class":629},[506,2270,632],{"class":520},[506,2272,540],{"class":516},[506,2274,2275],{"class":508,"line":616},[506,2276,613],{"emptyLinePlaceholder":206},[506,2278,2279,2281,2284,2286,2288,2290],{"class":508,"line":637},[506,2280,620],{"class":619},[506,2282,2283],{"class":520}," active ",[506,2285,626],{"class":516},[506,2287,2242],{"class":629},[506,2289,765],{"class":520},[506,2291,540],{"class":516},[506,2293,2294],{"class":508,"line":658},[506,2295,613],{"emptyLinePlaceholder":206},[506,2297,2298,2301,2303,2305],{"class":508,"line":663},[506,2299,2300],{"class":629},"useScaleUtility",[506,2302,685],{"class":520},[506,2304,673],{"class":516},[506,2306,690],{"class":516},[506,2308,2309,2312,2314,2316,2319,2321],{"class":508,"line":693},[506,2310,2311],{"class":1300},"    95",[506,2313,700],{"class":516},[506,2315,703],{"class":516},[506,2317,2318],{"class":533},"0.95",[506,2320,709],{"class":516},[506,2322,712],{"class":516},[506,2324,2325,2327,2330],{"class":508,"line":715},[506,2326,819],{"class":516},[506,2328,2329],{"class":520}," [active])",[506,2331,540],{"class":516},[506,2333,2334],{"class":508,"line":732},[506,2335,613],{"emptyLinePlaceholder":206},[506,2337,2338,2340,2342,2344],{"class":508,"line":748},[506,2339,835],{"class":512},[506,2341,838],{"class":512},[506,2343,653],{"class":520},[506,2345,540],{"class":516},[491,2347,2348],{"icon":140,"label":845},[496,2349,2351],{"className":848,"code":2350,"filename":850,"language":851,"meta":502,"style":502},"._scale\\:95 { scale: 0.95; }\n\n._active\\:scale\\:95 {\n    &:active { scale: 0.95; }\n}\n",[422,2352,2353,2379,2383,2401,2416],{"__ignoreMap":502},[506,2354,2355,2357,2360,2362,2365,2367,2370,2372,2375,2377],{"class":508,"line":509},[506,2356,858],{"class":516},[506,2358,2359],{"class":861},"_scale",[506,2361,865],{"class":520},[506,2363,2364],{"class":861},"95",[506,2366,517],{"class":516},[506,2368,2369],{"class":873}," scale",[506,2371,700],{"class":516},[506,2373,2374],{"class":1300}," 0.95",[506,2376,1317],{"class":516},[506,2378,891],{"class":516},[506,2380,2381],{"class":508,"line":543},[506,2382,613],{"emptyLinePlaceholder":206},[506,2384,2385,2387,2390,2392,2395,2397,2399],{"class":508,"line":566},[506,2386,858],{"class":516},[506,2388,2389],{"class":861},"_active",[506,2391,865],{"class":520},[506,2393,2394],{"class":861},"scale",[506,2396,865],{"class":520},[506,2398,2364],{"class":861},[506,2400,690],{"class":516},[506,2402,2403,2405,2407,2410,2412,2414],{"class":508,"line":588},[506,2404,946],{"class":520},[506,2406,700],{"class":516},[506,2408,2409],{"class":520},"active { scale: ",[506,2411,2318],{"class":1300},[506,2413,1317],{"class":516},[506,2415,891],{"class":516},[506,2417,2418],{"class":508,"line":610},[506,2419,967],{"class":520},[491,2421,2422],{"icon":1012,"label":1013},[496,2423,2425],{"className":1016,"code":2424,"language":1018,"meta":502,"style":502},"\u003C!-- Scale down on click -->\n\u003Cbutton class=\"_active:scale:95\">Press me\u003C/button>\n",[422,2426,2427,2432],{"__ignoreMap":502},[506,2428,2429],{"class":508,"line":509},[506,2430,2431],{"class":1025},"\u003C!-- Scale down on click -->\n",[506,2433,2434,2436,2438,2440,2442,2444,2447,2449,2452,2455,2457,2459],{"class":508,"line":543},[506,2435,1031],{"class":516},[506,2437,1034],{"class":696},[506,2439,1037],{"class":619},[506,2441,626],{"class":516},[506,2443,537],{"class":516},[506,2445,2446],{"class":533},"_active:scale:95",[506,2448,537],{"class":516},[506,2450,2451],{"class":516},">",[506,2453,2454],{"class":520},"Press me",[506,2456,1059],{"class":516},[506,2458,1034],{"class":696},[506,2460,1049],{"class":516},[1065,2462,1068],{"id":2463},"css-selector-4",[1070,2465,2466,2474],{},[1073,2467,2468],{},[1076,2469,2470,2472],{},[1079,2471,1081],{},[1079,2473,1068],{},[1085,2475,2476],{},[1076,2477,2478,2483],{},[1090,2479,2480],{},[422,2481,2482],{},"active",[1090,2484,2485],{},[422,2486,2487],{},"&:active",[414,2489,2491],{"id":2490},"usevisitedmodifier",[422,2492,2493],{},"useVisitedModifier",[418,2495,482,2496,2499],{},[422,2497,2498],{},"useVisitedModifier()"," function creates a modifier that applies styles to visited links.",[488,2501,2502,2661,2739],{},[491,2503,2504],{"icon":493,"label":494},[496,2505,2507],{"className":498,"code":2506,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from \"styleframe\";\nimport { useTextColorUtility } from \"@styleframe/theme\";\nimport { useVisitedModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst visited = useVisitedModifier(s);\n\nuseTextColorUtility(s, {\n    muted: '#6c757d',\n}, [visited]);\n\nexport default s;\n",[422,2508,2509,2529,2550,2571,2575,2589,2593,2608,2612,2623,2638,2647,2651],{"__ignoreMap":502},[506,2510,2511,2513,2515,2517,2519,2521,2523,2525,2527],{"class":508,"line":509},[506,2512,513],{"class":512},[506,2514,517],{"class":516},[506,2516,521],{"class":520},[506,2518,524],{"class":516},[506,2520,527],{"class":512},[506,2522,530],{"class":516},[506,2524,534],{"class":533},[506,2526,537],{"class":516},[506,2528,540],{"class":516},[506,2530,2531,2533,2535,2538,2540,2542,2544,2546,2548],{"class":508,"line":543},[506,2532,513],{"class":512},[506,2534,517],{"class":516},[506,2536,2537],{"class":520}," useTextColorUtility",[506,2539,524],{"class":516},[506,2541,527],{"class":512},[506,2543,530],{"class":516},[506,2545,559],{"class":533},[506,2547,537],{"class":516},[506,2549,540],{"class":516},[506,2551,2552,2554,2556,2559,2561,2563,2565,2567,2569],{"class":508,"line":566},[506,2553,513],{"class":512},[506,2555,517],{"class":516},[506,2557,2558],{"class":520}," useVisitedModifier",[506,2560,524],{"class":516},[506,2562,527],{"class":512},[506,2564,530],{"class":516},[506,2566,559],{"class":533},[506,2568,537],{"class":516},[506,2570,540],{"class":516},[506,2572,2573],{"class":508,"line":588},[506,2574,613],{"emptyLinePlaceholder":206},[506,2576,2577,2579,2581,2583,2585,2587],{"class":508,"line":610},[506,2578,620],{"class":619},[506,2580,623],{"class":520},[506,2582,626],{"class":516},[506,2584,521],{"class":629},[506,2586,632],{"class":520},[506,2588,540],{"class":516},[506,2590,2591],{"class":508,"line":616},[506,2592,613],{"emptyLinePlaceholder":206},[506,2594,2595,2597,2600,2602,2604,2606],{"class":508,"line":637},[506,2596,620],{"class":619},[506,2598,2599],{"class":520}," visited ",[506,2601,626],{"class":516},[506,2603,2558],{"class":629},[506,2605,765],{"class":520},[506,2607,540],{"class":516},[506,2609,2610],{"class":508,"line":658},[506,2611,613],{"emptyLinePlaceholder":206},[506,2613,2614,2617,2619,2621],{"class":508,"line":663},[506,2615,2616],{"class":629},"useTextColorUtility",[506,2618,685],{"class":520},[506,2620,673],{"class":516},[506,2622,690],{"class":516},[506,2624,2625,2628,2630,2632,2634,2636],{"class":508,"line":693},[506,2626,2627],{"class":696},"    muted",[506,2629,700],{"class":516},[506,2631,703],{"class":516},[506,2633,725],{"class":533},[506,2635,709],{"class":516},[506,2637,712],{"class":516},[506,2639,2640,2642,2645],{"class":508,"line":715},[506,2641,819],{"class":516},[506,2643,2644],{"class":520}," [visited])",[506,2646,540],{"class":516},[506,2648,2649],{"class":508,"line":732},[506,2650,613],{"emptyLinePlaceholder":206},[506,2652,2653,2655,2657,2659],{"class":508,"line":748},[506,2654,835],{"class":512},[506,2656,838],{"class":512},[506,2658,653],{"class":520},[506,2660,540],{"class":516},[491,2662,2663],{"icon":140,"label":845},[496,2664,2666],{"className":848,"code":2665,"filename":850,"language":851,"meta":502,"style":502},"._text-color\\:muted { color: #6c757d; }\n\n._visited\\:text-color\\:muted {\n    &:visited { color: #6c757d; }\n}\n",[422,2667,2668,2696,2700,2718,2735],{"__ignoreMap":502},[506,2669,2670,2672,2675,2677,2680,2682,2685,2687,2689,2692,2694],{"class":508,"line":509},[506,2671,858],{"class":516},[506,2673,2674],{"class":861},"_text-color",[506,2676,865],{"class":520},[506,2678,2679],{"class":861},"muted",[506,2681,517],{"class":516},[506,2683,2684],{"class":873}," color",[506,2686,700],{"class":516},[506,2688,1311],{"class":516},[506,2690,2691],{"class":520},"6c757d",[506,2693,1317],{"class":516},[506,2695,891],{"class":516},[506,2697,2698],{"class":508,"line":543},[506,2699,613],{"emptyLinePlaceholder":206},[506,2701,2702,2704,2707,2709,2712,2714,2716],{"class":508,"line":566},[506,2703,858],{"class":516},[506,2705,2706],{"class":861},"_visited",[506,2708,865],{"class":520},[506,2710,2711],{"class":861},"text-color",[506,2713,865],{"class":520},[506,2715,2679],{"class":861},[506,2717,690],{"class":516},[506,2719,2720,2722,2724,2727,2729,2731,2733],{"class":508,"line":588},[506,2721,946],{"class":520},[506,2723,700],{"class":516},[506,2725,2726],{"class":520},"visited { color: ",[506,2728,1693],{"class":516},[506,2730,2691],{"class":520},[506,2732,1317],{"class":516},[506,2734,891],{"class":516},[506,2736,2737],{"class":508,"line":610},[506,2738,967],{"class":520},[491,2740,2741],{"icon":1012,"label":1013},[496,2742,2744],{"className":1016,"code":2743,"language":1018,"meta":502,"style":502},"\u003C!-- Style visited links -->\n\u003Ca href=\"/page\" class=\"_visited:text-color:muted\">Visited link\u003C/a>\n",[422,2745,2746,2751],{"__ignoreMap":502},[506,2747,2748],{"class":508,"line":509},[506,2749,2750],{"class":1025},"\u003C!-- Style visited links -->\n",[506,2752,2753,2755,2758,2761,2763,2765,2768,2770,2772,2774,2776,2779,2781,2783,2786,2788,2790],{"class":508,"line":543},[506,2754,1031],{"class":516},[506,2756,2757],{"class":696},"a",[506,2759,2760],{"class":619}," href",[506,2762,626],{"class":516},[506,2764,537],{"class":516},[506,2766,2767],{"class":533},"/page",[506,2769,537],{"class":516},[506,2771,1037],{"class":619},[506,2773,626],{"class":516},[506,2775,537],{"class":516},[506,2777,2778],{"class":533},"_visited:text-color:muted",[506,2780,537],{"class":516},[506,2782,2451],{"class":516},[506,2784,2785],{"class":520},"Visited link",[506,2787,1059],{"class":516},[506,2789,2757],{"class":696},[506,2791,1049],{"class":516},[1065,2793,1068],{"id":2794},"css-selector-5",[1070,2796,2797,2805],{},[1073,2798,2799],{},[1076,2800,2801,2803],{},[1079,2802,1081],{},[1079,2804,1068],{},[1085,2806,2807],{},[1076,2808,2809,2814],{},[1090,2810,2811],{},[422,2812,2813],{},"visited",[1090,2815,2816],{},[422,2817,2818],{},"&:visited",[414,2820,2822],{"id":2821},"usetargetmodifier",[422,2823,2824],{},"useTargetModifier",[418,2826,482,2827,2830],{},[422,2828,2829],{},"useTargetModifier()"," function creates a modifier that applies styles when the element is the target of the current URL fragment.",[488,2832,2833,2991,3066],{},[491,2834,2835],{"icon":493,"label":494},[496,2836,2838],{"className":498,"code":2837,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from \"styleframe\";\nimport { useBackgroundColorUtility } from \"@styleframe/theme\";\nimport { useTargetModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst target = useTargetModifier(s);\n\nuseBackgroundColorUtility(s, {\n    highlight: '#fff3cd',\n}, [target]);\n\nexport default s;\n",[422,2839,2840,2860,2880,2901,2905,2919,2923,2938,2942,2952,2968,2977,2981],{"__ignoreMap":502},[506,2841,2842,2844,2846,2848,2850,2852,2854,2856,2858],{"class":508,"line":509},[506,2843,513],{"class":512},[506,2845,517],{"class":516},[506,2847,521],{"class":520},[506,2849,524],{"class":516},[506,2851,527],{"class":512},[506,2853,530],{"class":516},[506,2855,534],{"class":533},[506,2857,537],{"class":516},[506,2859,540],{"class":516},[506,2861,2862,2864,2866,2868,2870,2872,2874,2876,2878],{"class":508,"line":543},[506,2863,513],{"class":512},[506,2865,517],{"class":516},[506,2867,573],{"class":520},[506,2869,524],{"class":516},[506,2871,527],{"class":512},[506,2873,530],{"class":516},[506,2875,559],{"class":533},[506,2877,537],{"class":516},[506,2879,540],{"class":516},[506,2881,2882,2884,2886,2889,2891,2893,2895,2897,2899],{"class":508,"line":566},[506,2883,513],{"class":512},[506,2885,517],{"class":516},[506,2887,2888],{"class":520}," useTargetModifier",[506,2890,524],{"class":516},[506,2892,527],{"class":512},[506,2894,530],{"class":516},[506,2896,559],{"class":533},[506,2898,537],{"class":516},[506,2900,540],{"class":516},[506,2902,2903],{"class":508,"line":588},[506,2904,613],{"emptyLinePlaceholder":206},[506,2906,2907,2909,2911,2913,2915,2917],{"class":508,"line":610},[506,2908,620],{"class":619},[506,2910,623],{"class":520},[506,2912,626],{"class":516},[506,2914,521],{"class":629},[506,2916,632],{"class":520},[506,2918,540],{"class":516},[506,2920,2921],{"class":508,"line":616},[506,2922,613],{"emptyLinePlaceholder":206},[506,2924,2925,2927,2930,2932,2934,2936],{"class":508,"line":637},[506,2926,620],{"class":619},[506,2928,2929],{"class":520}," target ",[506,2931,626],{"class":516},[506,2933,2888],{"class":629},[506,2935,765],{"class":520},[506,2937,540],{"class":516},[506,2939,2940],{"class":508,"line":658},[506,2941,613],{"emptyLinePlaceholder":206},[506,2943,2944,2946,2948,2950],{"class":508,"line":663},[506,2945,778],{"class":629},[506,2947,685],{"class":520},[506,2949,673],{"class":516},[506,2951,690],{"class":516},[506,2953,2954,2957,2959,2961,2964,2966],{"class":508,"line":693},[506,2955,2956],{"class":696},"    highlight",[506,2958,700],{"class":516},[506,2960,703],{"class":516},[506,2962,2963],{"class":533},"#fff3cd",[506,2965,709],{"class":516},[506,2967,712],{"class":516},[506,2969,2970,2972,2975],{"class":508,"line":715},[506,2971,819],{"class":516},[506,2973,2974],{"class":520}," [target])",[506,2976,540],{"class":516},[506,2978,2979],{"class":508,"line":732},[506,2980,613],{"emptyLinePlaceholder":206},[506,2982,2983,2985,2987,2989],{"class":508,"line":748},[506,2984,835],{"class":512},[506,2986,838],{"class":512},[506,2988,653],{"class":520},[506,2990,540],{"class":516},[491,2992,2993],{"icon":140,"label":845},[496,2994,2996],{"className":848,"code":2995,"filename":850,"language":851,"meta":502,"style":502},"._background-color\\:highlight { background-color: #fff3cd; }\n\n._target\\:background-color\\:highlight {\n    &:target { background-color: #fff3cd; }\n}\n",[422,2997,2998,3024,3028,3045,3062],{"__ignoreMap":502},[506,2999,3000,3002,3004,3006,3009,3011,3013,3015,3017,3020,3022],{"class":508,"line":509},[506,3001,858],{"class":516},[506,3003,862],{"class":861},[506,3005,865],{"class":520},[506,3007,3008],{"class":861},"highlight",[506,3010,517],{"class":516},[506,3012,874],{"class":873},[506,3014,700],{"class":516},[506,3016,1311],{"class":516},[506,3018,3019],{"class":520},"fff3cd",[506,3021,1317],{"class":516},[506,3023,891],{"class":516},[506,3025,3026],{"class":508,"line":543},[506,3027,613],{"emptyLinePlaceholder":206},[506,3029,3030,3032,3035,3037,3039,3041,3043],{"class":508,"line":566},[506,3031,858],{"class":516},[506,3033,3034],{"class":861},"_target",[506,3036,865],{"class":520},[506,3038,935],{"class":861},[506,3040,865],{"class":520},[506,3042,3008],{"class":861},[506,3044,690],{"class":516},[506,3046,3047,3049,3051,3054,3056,3058,3060],{"class":508,"line":588},[506,3048,946],{"class":520},[506,3050,700],{"class":516},[506,3052,3053],{"class":520},"target { background-color: ",[506,3055,1693],{"class":516},[506,3057,3019],{"class":520},[506,3059,1317],{"class":516},[506,3061,891],{"class":516},[506,3063,3064],{"class":508,"line":610},[506,3065,967],{"class":520},[491,3067,3068],{"icon":1012,"label":1013},[496,3069,3071],{"className":1016,"code":3070,"language":1018,"meta":502,"style":502},"\u003C!-- Highlight section when navigated to via anchor -->\n\u003Csection id=\"section-1\" class=\"_target:background-color:highlight\">\n    \u003Ch2>Section 1\u003C/h2>\n\u003C/section>\n",[422,3072,3073,3078,3110,3127],{"__ignoreMap":502},[506,3074,3075],{"class":508,"line":509},[506,3076,3077],{"class":1025},"\u003C!-- Highlight section when navigated to via anchor -->\n",[506,3079,3080,3082,3085,3088,3090,3092,3095,3097,3099,3101,3103,3106,3108],{"class":508,"line":543},[506,3081,1031],{"class":516},[506,3083,3084],{"class":696},"section",[506,3086,3087],{"class":619}," id",[506,3089,626],{"class":516},[506,3091,537],{"class":516},[506,3093,3094],{"class":533},"section-1",[506,3096,537],{"class":516},[506,3098,1037],{"class":619},[506,3100,626],{"class":516},[506,3102,537],{"class":516},[506,3104,3105],{"class":533},"_target:background-color:highlight",[506,3107,537],{"class":516},[506,3109,1049],{"class":516},[506,3111,3112,3114,3116,3118,3121,3123,3125],{"class":508,"line":566},[506,3113,1740],{"class":516},[506,3115,414],{"class":696},[506,3117,2451],{"class":516},[506,3119,3120],{"class":520},"Section 1",[506,3122,1059],{"class":516},[506,3124,414],{"class":696},[506,3126,1049],{"class":516},[506,3128,3129,3131,3133],{"class":508,"line":588},[506,3130,1059],{"class":516},[506,3132,3084],{"class":696},[506,3134,1049],{"class":516},[1065,3136,1068],{"id":3137},"css-selector-6",[1070,3139,3140,3148],{},[1073,3141,3142],{},[1076,3143,3144,3146],{},[1079,3145,1081],{},[1079,3147,1068],{},[1085,3149,3150],{},[1076,3151,3152,3157],{},[1090,3153,3154],{},[422,3155,3156],{},"target",[1090,3158,3159],{},[422,3160,3161],{},"&:target",[414,3163,3165],{"id":3164},"usepseudostatemodifiers",[422,3166,3167],{},"usePseudoStateModifiers",[418,3169,482,3170,3173],{},[422,3171,3172],{},"usePseudoStateModifiers()"," function registers all pseudo-state modifiers at once and returns them as a destructurable object.",[488,3175,3176,3394,3648],{},[491,3177,3178],{"icon":493,"label":494},[496,3179,3181],{"className":498,"code":3180,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe/theme\";\nimport { useOpacityUtility } from \"@styleframe/theme\";\nimport { usePseudoStateModifiers } from \"@styleframe/theme\";\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",[422,3182,3183,3203,3223,3244,3265,3269,3283,3287,3315,3319,3330,3346,3362,3380,3384],{"__ignoreMap":502},[506,3184,3185,3187,3189,3191,3193,3195,3197,3199,3201],{"class":508,"line":509},[506,3186,513],{"class":512},[506,3188,517],{"class":516},[506,3190,521],{"class":520},[506,3192,524],{"class":516},[506,3194,527],{"class":512},[506,3196,530],{"class":516},[506,3198,534],{"class":533},[506,3200,537],{"class":516},[506,3202,540],{"class":516},[506,3204,3205,3207,3209,3211,3213,3215,3217,3219,3221],{"class":508,"line":543},[506,3206,513],{"class":512},[506,3208,517],{"class":516},[506,3210,550],{"class":520},[506,3212,524],{"class":516},[506,3214,527],{"class":512},[506,3216,530],{"class":516},[506,3218,559],{"class":533},[506,3220,537],{"class":516},[506,3222,540],{"class":516},[506,3224,3225,3227,3229,3232,3234,3236,3238,3240,3242],{"class":508,"line":566},[506,3226,513],{"class":512},[506,3228,517],{"class":516},[506,3230,3231],{"class":520}," useOpacityUtility",[506,3233,524],{"class":516},[506,3235,527],{"class":512},[506,3237,530],{"class":516},[506,3239,559],{"class":533},[506,3241,537],{"class":516},[506,3243,540],{"class":516},[506,3245,3246,3248,3250,3253,3255,3257,3259,3261,3263],{"class":508,"line":588},[506,3247,513],{"class":512},[506,3249,517],{"class":516},[506,3251,3252],{"class":520}," usePseudoStateModifiers",[506,3254,524],{"class":516},[506,3256,527],{"class":512},[506,3258,530],{"class":516},[506,3260,559],{"class":533},[506,3262,537],{"class":516},[506,3264,540],{"class":516},[506,3266,3267],{"class":508,"line":610},[506,3268,613],{"emptyLinePlaceholder":206},[506,3270,3271,3273,3275,3277,3279,3281],{"class":508,"line":616},[506,3272,620],{"class":619},[506,3274,623],{"class":520},[506,3276,626],{"class":516},[506,3278,521],{"class":629},[506,3280,632],{"class":520},[506,3282,540],{"class":516},[506,3284,3285],{"class":508,"line":637},[506,3286,613],{"emptyLinePlaceholder":206},[506,3288,3289,3291,3293,3296,3298,3301,3303,3305,3307,3309,3311,3313],{"class":508,"line":658},[506,3290,620],{"class":619},[506,3292,517],{"class":516},[506,3294,3295],{"class":520}," hover",[506,3297,673],{"class":516},[506,3299,3300],{"class":520}," focus",[506,3302,673],{"class":516},[506,3304,2283],{"class":520},[506,3306,647],{"class":516},[506,3308,650],{"class":516},[506,3310,3252],{"class":629},[506,3312,765],{"class":520},[506,3314,540],{"class":516},[506,3316,3317],{"class":508,"line":663},[506,3318,613],{"emptyLinePlaceholder":206},[506,3320,3321,3324,3326,3328],{"class":508,"line":693},[506,3322,3323],{"class":629},"useOpacityUtility",[506,3325,685],{"class":520},[506,3327,673],{"class":516},[506,3329,690],{"class":516},[506,3331,3332,3335,3337,3339,3342,3344],{"class":508,"line":715},[506,3333,3334],{"class":1300},"    75",[506,3336,700],{"class":516},[506,3338,703],{"class":516},[506,3340,3341],{"class":533},"0.75",[506,3343,709],{"class":516},[506,3345,712],{"class":516},[506,3347,3348,3351,3353,3355,3358,3360],{"class":508,"line":732},[506,3349,3350],{"class":1300},"    50",[506,3352,700],{"class":516},[506,3354,703],{"class":516},[506,3356,3357],{"class":533},"0.5",[506,3359,709],{"class":516},[506,3361,712],{"class":516},[506,3363,3364,3366,3369,3371,3373,3375,3378],{"class":508,"line":748},[506,3365,819],{"class":516},[506,3367,3368],{"class":520}," [hover",[506,3370,673],{"class":516},[506,3372,3300],{"class":520},[506,3374,673],{"class":516},[506,3376,3377],{"class":520}," active])",[506,3379,540],{"class":516},[506,3381,3382],{"class":508,"line":753},[506,3383,613],{"emptyLinePlaceholder":206},[506,3385,3386,3388,3390,3392],{"class":508,"line":770},[506,3387,835],{"class":512},[506,3389,838],{"class":512},[506,3391,653],{"class":520},[506,3393,540],{"class":516},[491,3395,3396],{"icon":140,"label":845},[496,3397,3399],{"className":848,"code":3398,"filename":850,"language":851,"meta":502,"style":502},"._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",[422,3400,3401,3427,3451,3455,3488,3518,3522,3553,3583,3587,3618],{"__ignoreMap":502},[506,3402,3403,3405,3408,3410,3413,3415,3418,3420,3423,3425],{"class":508,"line":509},[506,3404,858],{"class":516},[506,3406,3407],{"class":861},"_opacity",[506,3409,865],{"class":520},[506,3411,3412],{"class":861},"75",[506,3414,517],{"class":516},[506,3416,3417],{"class":873}," opacity",[506,3419,700],{"class":516},[506,3421,3422],{"class":1300}," 0.75",[506,3424,1317],{"class":516},[506,3426,891],{"class":516},[506,3428,3429,3431,3433,3435,3438,3440,3442,3444,3447,3449],{"class":508,"line":543},[506,3430,858],{"class":516},[506,3432,3407],{"class":861},[506,3434,865],{"class":520},[506,3436,3437],{"class":861},"50",[506,3439,517],{"class":516},[506,3441,3417],{"class":873},[506,3443,700],{"class":516},[506,3445,3446],{"class":1300}," 0.5",[506,3448,1317],{"class":516},[506,3450,891],{"class":516},[506,3452,3453],{"class":508,"line":566},[506,3454,613],{"emptyLinePlaceholder":206},[506,3456,3457,3459,3461,3463,3466,3468,3470,3472,3475,3477,3480,3482,3484,3486],{"class":508,"line":588},[506,3458,858],{"class":516},[506,3460,930],{"class":861},[506,3462,865],{"class":520},[506,3464,3465],{"class":861},"opacity",[506,3467,865],{"class":520},[506,3469,3412],{"class":861},[506,3471,517],{"class":516},[506,3473,3474],{"class":520}," &",[506,3476,700],{"class":516},[506,3478,3479],{"class":520},"hover { opacity: ",[506,3481,3341],{"class":1300},[506,3483,1317],{"class":516},[506,3485,524],{"class":516},[506,3487,891],{"class":520},[506,3489,3490,3492,3494,3496,3498,3500,3502,3504,3506,3508,3510,3512,3514,3516],{"class":508,"line":610},[506,3491,858],{"class":516},[506,3493,930],{"class":861},[506,3495,865],{"class":520},[506,3497,3465],{"class":861},[506,3499,865],{"class":520},[506,3501,3437],{"class":861},[506,3503,517],{"class":516},[506,3505,3474],{"class":520},[506,3507,700],{"class":516},[506,3509,3479],{"class":520},[506,3511,3357],{"class":1300},[506,3513,1317],{"class":516},[506,3515,524],{"class":516},[506,3517,891],{"class":520},[506,3519,3520],{"class":508,"line":616},[506,3521,613],{"emptyLinePlaceholder":206},[506,3523,3524,3526,3528,3530,3532,3534,3536,3538,3540,3542,3545,3547,3549,3551],{"class":508,"line":637},[506,3525,858],{"class":516},[506,3527,1330],{"class":861},[506,3529,865],{"class":520},[506,3531,3465],{"class":861},[506,3533,865],{"class":520},[506,3535,3412],{"class":861},[506,3537,517],{"class":516},[506,3539,3474],{"class":520},[506,3541,700],{"class":516},[506,3543,3544],{"class":520},"focus { opacity: ",[506,3546,3341],{"class":1300},[506,3548,1317],{"class":516},[506,3550,524],{"class":516},[506,3552,891],{"class":520},[506,3554,3555,3557,3559,3561,3563,3565,3567,3569,3571,3573,3575,3577,3579,3581],{"class":508,"line":658},[506,3556,858],{"class":516},[506,3558,1330],{"class":861},[506,3560,865],{"class":520},[506,3562,3465],{"class":861},[506,3564,865],{"class":520},[506,3566,3437],{"class":861},[506,3568,517],{"class":516},[506,3570,3474],{"class":520},[506,3572,700],{"class":516},[506,3574,3544],{"class":520},[506,3576,3357],{"class":1300},[506,3578,1317],{"class":516},[506,3580,524],{"class":516},[506,3582,891],{"class":520},[506,3584,3585],{"class":508,"line":663},[506,3586,613],{"emptyLinePlaceholder":206},[506,3588,3589,3591,3593,3595,3597,3599,3601,3603,3605,3607,3610,3612,3614,3616],{"class":508,"line":693},[506,3590,858],{"class":516},[506,3592,2389],{"class":861},[506,3594,865],{"class":520},[506,3596,3465],{"class":861},[506,3598,865],{"class":520},[506,3600,3412],{"class":861},[506,3602,517],{"class":516},[506,3604,3474],{"class":520},[506,3606,700],{"class":516},[506,3608,3609],{"class":520},"active { opacity: ",[506,3611,3341],{"class":1300},[506,3613,1317],{"class":516},[506,3615,524],{"class":516},[506,3617,891],{"class":520},[506,3619,3620,3622,3624,3626,3628,3630,3632,3634,3636,3638,3640,3642,3644,3646],{"class":508,"line":715},[506,3621,858],{"class":516},[506,3623,2389],{"class":861},[506,3625,865],{"class":520},[506,3627,3465],{"class":861},[506,3629,865],{"class":520},[506,3631,3437],{"class":861},[506,3633,517],{"class":516},[506,3635,3474],{"class":520},[506,3637,700],{"class":516},[506,3639,3609],{"class":520},[506,3641,3357],{"class":1300},[506,3643,1317],{"class":516},[506,3645,524],{"class":516},[506,3647,891],{"class":520},[491,3649,3650],{"icon":1012,"label":1013},[496,3651,3653],{"className":1016,"code":3652,"language":1018,"meta":502,"style":502},"\u003Cbutton class=\"_opacity:75 _hover:opacity:50 _active:opacity:50\">\n    Interactive button\n\u003C/button>\n",[422,3654,3655,3674,3679],{"__ignoreMap":502},[506,3656,3657,3659,3661,3663,3665,3667,3670,3672],{"class":508,"line":509},[506,3658,1031],{"class":516},[506,3660,1034],{"class":696},[506,3662,1037],{"class":619},[506,3664,626],{"class":516},[506,3666,537],{"class":516},[506,3668,3669],{"class":533},"_opacity:75 _hover:opacity:50 _active:opacity:50",[506,3671,537],{"class":516},[506,3673,1049],{"class":516},[506,3675,3676],{"class":508,"line":543},[506,3677,3678],{"class":520},"    Interactive button\n",[506,3680,3681,3683,3685],{"class":508,"line":566},[506,3682,1059],{"class":516},[506,3684,1034],{"class":696},[506,3686,1049],{"class":516},[3688,3689,3691],"h3",{"id":3690},"returned-modifiers","Returned Modifiers",[1070,3693,3694,3705],{},[1073,3695,3696],{},[1076,3697,3698,3701,3703],{},[1079,3699,3700],{},"Key",[1079,3702,1081],{},[1079,3704,1068],{},[1085,3706,3707,3721,3735,3750,3765,3779,3793],{},[1076,3708,3709,3713,3717],{},[1090,3710,3711],{},[422,3712,1094],{},[1090,3714,3715],{},[422,3716,1094],{},[1090,3718,3719],{},[422,3720,1099],{},[1076,3722,3723,3727,3731],{},[1090,3724,3725],{},[422,3726,1449],{},[1090,3728,3729],{},[422,3730,1449],{},[1090,3732,3733],{},[422,3734,1454],{},[1076,3736,3737,3742,3746],{},[1090,3738,3739],{},[422,3740,3741],{},"focusWithin",[1090,3743,3744],{},[422,3745,1824],{},[1090,3747,3748],{},[422,3749,1829],{},[1076,3751,3752,3757,3761],{},[1090,3753,3754],{},[422,3755,3756],{},"focusVisible",[1090,3758,3759],{},[422,3760,460],{},[1090,3762,3763],{},[422,3764,2158],{},[1076,3766,3767,3771,3775],{},[1090,3768,3769],{},[422,3770,2482],{},[1090,3772,3773],{},[422,3774,2482],{},[1090,3776,3777],{},[422,3778,2487],{},[1076,3780,3781,3785,3789],{},[1090,3782,3783],{},[422,3784,2813],{},[1090,3786,3787],{},[422,3788,2813],{},[1090,3790,3791],{},[422,3792,2818],{},[1076,3794,3795,3799,3803],{},[1090,3796,3797],{},[422,3798,3156],{},[1090,3800,3801],{},[422,3802,3156],{},[1090,3804,3805],{},[422,3806,3161],{},[414,3808,3810],{"id":3809},"examples","Examples",[3688,3812,3814],{"id":3813},"interactive-button","Interactive Button",[488,3816,3817,4149],{},[491,3818,3819],{"icon":493,"label":494},[496,3820,3822],{"className":498,"code":3821,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe/theme\";\nimport { useBackgroundColorUtility, useScaleUtility, useOpacityUtility } from \"@styleframe/theme\";\nimport { usePseudoStateModifiers } from \"@styleframe/theme\";\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",[422,3823,3824,3844,3864,3892,3912,3916,3930,3946,3950,3992,3996,4023,4027,4037,4049,4057,4061,4071,4087,4095,4099,4109,4124,4133,4138],{"__ignoreMap":502},[506,3825,3826,3828,3830,3832,3834,3836,3838,3840,3842],{"class":508,"line":509},[506,3827,513],{"class":512},[506,3829,517],{"class":516},[506,3831,521],{"class":520},[506,3833,524],{"class":516},[506,3835,527],{"class":512},[506,3837,530],{"class":516},[506,3839,534],{"class":533},[506,3841,537],{"class":516},[506,3843,540],{"class":516},[506,3845,3846,3848,3850,3852,3854,3856,3858,3860,3862],{"class":508,"line":543},[506,3847,513],{"class":512},[506,3849,517],{"class":516},[506,3851,550],{"class":520},[506,3853,524],{"class":516},[506,3855,527],{"class":512},[506,3857,530],{"class":516},[506,3859,559],{"class":533},[506,3861,537],{"class":516},[506,3863,540],{"class":516},[506,3865,3866,3868,3870,3872,3874,3876,3878,3880,3882,3884,3886,3888,3890],{"class":508,"line":566},[506,3867,513],{"class":512},[506,3869,517],{"class":516},[506,3871,573],{"class":520},[506,3873,673],{"class":516},[506,3875,2221],{"class":520},[506,3877,673],{"class":516},[506,3879,3231],{"class":520},[506,3881,524],{"class":516},[506,3883,527],{"class":512},[506,3885,530],{"class":516},[506,3887,559],{"class":533},[506,3889,537],{"class":516},[506,3891,540],{"class":516},[506,3893,3894,3896,3898,3900,3902,3904,3906,3908,3910],{"class":508,"line":588},[506,3895,513],{"class":512},[506,3897,517],{"class":516},[506,3899,3252],{"class":520},[506,3901,524],{"class":516},[506,3903,527],{"class":512},[506,3905,530],{"class":516},[506,3907,559],{"class":533},[506,3909,537],{"class":516},[506,3911,540],{"class":516},[506,3913,3914],{"class":508,"line":610},[506,3915,613],{"emptyLinePlaceholder":206},[506,3917,3918,3920,3922,3924,3926,3928],{"class":508,"line":616},[506,3919,620],{"class":619},[506,3921,623],{"class":520},[506,3923,626],{"class":516},[506,3925,521],{"class":629},[506,3927,632],{"class":520},[506,3929,540],{"class":516},[506,3931,3932,3934,3936,3938,3940,3942,3944],{"class":508,"line":637},[506,3933,620],{"class":619},[506,3935,517],{"class":516},[506,3937,644],{"class":520},[506,3939,647],{"class":516},[506,3941,650],{"class":516},[506,3943,653],{"class":520},[506,3945,540],{"class":516},[506,3947,3948],{"class":508,"line":658},[506,3949,613],{"emptyLinePlaceholder":206},[506,3951,3952,3954,3956,3959,3961,3963,3965,3967,3969,3971,3974,3976,3978,3980,3982,3984,3986,3988,3990],{"class":508,"line":663},[506,3953,620],{"class":619},[506,3955,517],{"class":516},[506,3957,3958],{"class":520}," colorPrimary ",[506,3960,647],{"class":516},[506,3962,650],{"class":516},[506,3964,550],{"class":629},[506,3966,685],{"class":520},[506,3968,673],{"class":516},[506,3970,517],{"class":516},[506,3972,3973],{"class":696}," primary",[506,3975,700],{"class":516},[506,3977,703],{"class":516},[506,3979,706],{"class":533},[506,3981,709],{"class":516},[506,3983,524],{"class":516},[506,3985,737],{"class":512},[506,3987,740],{"class":619},[506,3989,743],{"class":520},[506,3991,540],{"class":516},[506,3993,3994],{"class":508,"line":693},[506,3995,613],{"emptyLinePlaceholder":206},[506,3997,3998,4000,4002,4004,4006,4009,4011,4013,4015,4017,4019,4021],{"class":508,"line":715},[506,3999,620],{"class":619},[506,4001,517],{"class":516},[506,4003,3295],{"class":520},[506,4005,673],{"class":516},[506,4007,4008],{"class":520}," active",[506,4010,673],{"class":516},[506,4012,1941],{"class":520},[506,4014,647],{"class":516},[506,4016,650],{"class":516},[506,4018,3252],{"class":629},[506,4020,765],{"class":520},[506,4022,540],{"class":516},[506,4024,4025],{"class":508,"line":732},[506,4026,613],{"emptyLinePlaceholder":206},[506,4028,4029,4031,4033,4035],{"class":508,"line":748},[506,4030,778],{"class":629},[506,4032,685],{"class":520},[506,4034,673],{"class":516},[506,4036,690],{"class":516},[506,4038,4039,4041,4043,4045,4047],{"class":508,"line":753},[506,4040,697],{"class":696},[506,4042,700],{"class":516},[506,4044,794],{"class":629},[506,4046,797],{"class":520},[506,4048,712],{"class":516},[506,4050,4051,4053,4055],{"class":508,"line":770},[506,4052,819],{"class":516},[506,4054,822],{"class":520},[506,4056,540],{"class":516},[506,4058,4059],{"class":508,"line":775},[506,4060,613],{"emptyLinePlaceholder":206},[506,4062,4063,4065,4067,4069],{"class":508,"line":787},[506,4064,3323],{"class":629},[506,4066,685],{"class":520},[506,4068,673],{"class":516},[506,4070,690],{"class":516},[506,4072,4073,4076,4078,4080,4083,4085],{"class":508,"line":802},[506,4074,4075],{"class":1300},"    90",[506,4077,700],{"class":516},[506,4079,703],{"class":516},[506,4081,4082],{"class":533},"0.9",[506,4084,709],{"class":516},[506,4086,712],{"class":516},[506,4088,4089,4091,4093],{"class":508,"line":816},[506,4090,819],{"class":516},[506,4092,822],{"class":520},[506,4094,540],{"class":516},[506,4096,4097],{"class":508,"line":827},[506,4098,613],{"emptyLinePlaceholder":206},[506,4100,4101,4103,4105,4107],{"class":508,"line":832},[506,4102,2300],{"class":629},[506,4104,685],{"class":520},[506,4106,673],{"class":516},[506,4108,690],{"class":516},[506,4110,4112,4114,4116,4118,4120,4122],{"class":508,"line":4111},22,[506,4113,2311],{"class":1300},[506,4115,700],{"class":516},[506,4117,703],{"class":516},[506,4119,2318],{"class":533},[506,4121,709],{"class":516},[506,4123,712],{"class":516},[506,4125,4127,4129,4131],{"class":508,"line":4126},23,[506,4128,819],{"class":516},[506,4130,2329],{"class":520},[506,4132,540],{"class":516},[506,4134,4136],{"class":508,"line":4135},24,[506,4137,613],{"emptyLinePlaceholder":206},[506,4139,4141,4143,4145,4147],{"class":508,"line":4140},25,[506,4142,835],{"class":512},[506,4144,838],{"class":512},[506,4146,653],{"class":520},[506,4148,540],{"class":516},[491,4150,4151],{"icon":1012,"label":1013},[496,4152,4154],{"className":1016,"code":4153,"language":1018,"meta":502,"style":502},"\u003Cbutton class=\"_background-color:primary _hover:opacity:90 _active:scale:95\">\n    Click me\n\u003C/button>\n",[422,4155,4156,4175,4180],{"__ignoreMap":502},[506,4157,4158,4160,4162,4164,4166,4168,4171,4173],{"class":508,"line":509},[506,4159,1031],{"class":516},[506,4161,1034],{"class":696},[506,4163,1037],{"class":619},[506,4165,626],{"class":516},[506,4167,537],{"class":516},[506,4169,4170],{"class":533},"_background-color:primary _hover:opacity:90 _active:scale:95",[506,4172,537],{"class":516},[506,4174,1049],{"class":516},[506,4176,4177],{"class":508,"line":543},[506,4178,4179],{"class":520},"    Click me\n",[506,4181,4182,4184,4186],{"class":508,"line":566},[506,4183,1059],{"class":516},[506,4185,1034],{"class":696},[506,4187,1049],{"class":516},[3688,4189,4191],{"id":4190},"focus-ring-with-focus-visible","Focus Ring with Focus-Visible",[488,4193,4194,4390],{},[491,4195,4196],{"icon":493,"label":494},[496,4197,4199],{"className":498,"code":4198,"filename":500,"language":501,"meta":502,"style":502},"import { styleframe } from \"styleframe\";\nimport { useRingUtility, useOutlineUtility } from \"@styleframe/theme\";\nimport { useFocusVisibleModifier } from \"@styleframe/theme\";\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",[422,4200,4201,4221,4245,4265,4269,4283,4287,4301,4305,4315,4330,4338,4342,4352,4368,4376,4380],{"__ignoreMap":502},[506,4202,4203,4205,4207,4209,4211,4213,4215,4217,4219],{"class":508,"line":509},[506,4204,513],{"class":512},[506,4206,517],{"class":516},[506,4208,521],{"class":520},[506,4210,524],{"class":516},[506,4212,527],{"class":512},[506,4214,530],{"class":516},[506,4216,534],{"class":533},[506,4218,537],{"class":516},[506,4220,540],{"class":516},[506,4222,4223,4225,4227,4229,4231,4233,4235,4237,4239,4241,4243],{"class":508,"line":543},[506,4224,513],{"class":512},[506,4226,517],{"class":516},[506,4228,1149],{"class":520},[506,4230,673],{"class":516},[506,4232,1879],{"class":520},[506,4234,524],{"class":516},[506,4236,527],{"class":512},[506,4238,530],{"class":516},[506,4240,559],{"class":533},[506,4242,537],{"class":516},[506,4244,540],{"class":516},[506,4246,4247,4249,4251,4253,4255,4257,4259,4261,4263],{"class":508,"line":566},[506,4248,513],{"class":512},[506,4250,517],{"class":516},[506,4252,1900],{"class":520},[506,4254,524],{"class":516},[506,4256,527],{"class":512},[506,4258,530],{"class":516},[506,4260,559],{"class":533},[506,4262,537],{"class":516},[506,4264,540],{"class":516},[506,4266,4267],{"class":508,"line":588},[506,4268,613],{"emptyLinePlaceholder":206},[506,4270,4271,4273,4275,4277,4279,4281],{"class":508,"line":610},[506,4272,620],{"class":619},[506,4274,623],{"class":520},[506,4276,626],{"class":516},[506,4278,521],{"class":629},[506,4280,632],{"class":520},[506,4282,540],{"class":516},[506,4284,4285],{"class":508,"line":616},[506,4286,613],{"emptyLinePlaceholder":206},[506,4288,4289,4291,4293,4295,4297,4299],{"class":508,"line":637},[506,4290,620],{"class":619},[506,4292,1941],{"class":520},[506,4294,626],{"class":516},[506,4296,1900],{"class":629},[506,4298,765],{"class":520},[506,4300,540],{"class":516},[506,4302,4303],{"class":508,"line":658},[506,4304,613],{"emptyLinePlaceholder":206},[506,4306,4307,4309,4311,4313],{"class":508,"line":663},[506,4308,1228],{"class":629},[506,4310,685],{"class":520},[506,4312,673],{"class":516},[506,4314,690],{"class":516},[506,4316,4317,4319,4321,4323,4326,4328],{"class":508,"line":693},[506,4318,697],{"class":696},[506,4320,700],{"class":516},[506,4322,703],{"class":516},[506,4324,4325],{"class":533},"0 0 0 3px rgba(0, 108, 255, 0.5)",[506,4327,709],{"class":516},[506,4329,712],{"class":516},[506,4331,4332,4334,4336],{"class":508,"line":715},[506,4333,819],{"class":516},[506,4335,1986],{"class":520},[506,4337,540],{"class":516},[506,4339,4340],{"class":508,"line":732},[506,4341,613],{"emptyLinePlaceholder":206},[506,4343,4344,4346,4348,4350],{"class":508,"line":748},[506,4345,1958],{"class":629},[506,4347,685],{"class":520},[506,4349,673],{"class":516},[506,4351,690],{"class":516},[506,4353,4354,4357,4359,4361,4364,4366],{"class":508,"line":753},[506,4355,4356],{"class":696},"    none",[506,4358,700],{"class":516},[506,4360,703],{"class":516},[506,4362,4363],{"class":533},"none",[506,4365,709],{"class":516},[506,4367,712],{"class":516},[506,4369,4370,4372,4374],{"class":508,"line":770},[506,4371,819],{"class":516},[506,4373,1986],{"class":520},[506,4375,540],{"class":516},[506,4377,4378],{"class":508,"line":775},[506,4379,613],{"emptyLinePlaceholder":206},[506,4381,4382,4384,4386,4388],{"class":508,"line":787},[506,4383,835],{"class":512},[506,4385,838],{"class":512},[506,4387,653],{"class":520},[506,4389,540],{"class":516},[491,4391,4392],{"icon":1012,"label":1013},[496,4393,4395],{"className":1016,"code":4394,"language":1018,"meta":502,"style":502},"\u003Cbutton class=\"_focus-visible:ring:primary _focus-visible:outline:none\">\n    Keyboard accessible\n\u003C/button>\n",[422,4396,4397,4416,4421],{"__ignoreMap":502},[506,4398,4399,4401,4403,4405,4407,4409,4412,4414],{"class":508,"line":509},[506,4400,1031],{"class":516},[506,4402,1034],{"class":696},[506,4404,1037],{"class":619},[506,4406,626],{"class":516},[506,4408,537],{"class":516},[506,4410,4411],{"class":533},"_focus-visible:ring:primary _focus-visible:outline:none",[506,4413,537],{"class":516},[506,4415,1049],{"class":516},[506,4417,4418],{"class":508,"line":543},[506,4419,4420],{"class":520},"    Keyboard accessible\n",[506,4422,4423,4425,4427],{"class":508,"line":566},[506,4424,1059],{"class":516},[506,4426,1034],{"class":696},[506,4428,1049],{"class":516},[414,4430,4432],{"id":4431},"best-practices","Best Practices",[442,4434,4435,4447,4458,4467,4473],{},[445,4436,4437,457,4444,4446],{},[448,4438,4439,4440,2168,4442],{},"Prefer ",[422,4441,460],{},[422,4443,1449],{},[422,4445,1835],{}," for focus indicators to avoid showing focus rings on mouse clicks",[445,4448,4449,4457],{},[448,4450,4451,4452,4454,4455],{},"Combine ",[422,4453,1094],{}," and ",[422,4456,2482],{},": Create buttons that respond to both hover and press states for better feedback",[445,4459,4460,4466],{},[448,4461,4462,4463,4465],{},"Use ",[422,4464,1824],{}," for form groups",": Highlight parent containers when any child input is focused",[445,4468,4469,4472],{},[448,4470,4471],{},"Limit modifier count",": Only generate the state variants your design requires to keep CSS bundle size small",[445,4474,4475,4478,4479,4481],{},[448,4476,4477],{},"Test touch devices",": ",[422,4480,424],{}," may behave unexpectedly on touch devices; design fallbacks accordingly",[414,4483,4485],{"id":4484},"faq","FAQ",[4487,4488,4489,4507,4524,4531],"accordion",{},[4490,4491,4494,4496,4497,4500,4501,4503,4504,4506],"accordion-item",{"icon":4492,"label":4493},"i-lucide-circle-help","What's the difference between focus and focus-visible?",[422,4495,428],{}," triggers on all focus events (mouse click, keyboard navigation, programmatic focus). ",[422,4498,4499],{},":focus-visible"," only triggers when the browser determines focus should be visible, typically during keyboard navigation. Use ",[422,4502,460],{}," for focus indicators and ",[422,4505,1449],{}," for functional styling changes.",[4490,4508,4510,4511,4514,4515,425,4518,429,4521,858],{"icon":4492,"label":4509},"Can I combine hover with other modifiers?","Yes! When you pass multiple modifiers to a utility, Styleframe generates all combinations. For example, passing ",[422,4512,4513],{},"[hover, dark]"," generates ",[422,4516,4517],{},"_hover:property:value",[422,4519,4520],{},"_dark:property:value",[422,4522,4523],{},"_dark:hover:property:value",[4490,4525,4527,4528,4530],{"icon":4492,"label":4526},"Does hover work on mobile?","On touch devices, ",[422,4529,424],{}," is typically triggered on tap and persists until the user taps elsewhere. For touch-specific behavior, consider using JavaScript event handlers instead.",[4490,4532,4534,4536,4537,4540],{"icon":4492,"label":4533},"How does focus-within differ from focus?",[422,4535,428],{}," applies to the focused element itself. ",[422,4538,4539],{},":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.",[4542,4543,4544],"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":502,"searchDepth":543,"depth":543,"links":4546},[4547,4548,4549,4550,4551,4552,4553,4554,4555,4556,4559,4563,4564],{"id":416,"depth":543,"text":64},{"id":436,"depth":543,"text":437},{"id":476,"depth":543,"text":479},{"id":1102,"depth":543,"text":1105},{"id":1457,"depth":543,"text":1460},{"id":1832,"depth":543,"text":1835},{"id":2174,"depth":543,"text":2177},{"id":2490,"depth":543,"text":2493},{"id":2821,"depth":543,"text":2824},{"id":3164,"depth":543,"text":3167,"children":4557},[4558],{"id":3690,"depth":566,"text":3691},{"id":3809,"depth":543,"text":3810,"children":4560},[4561,4562],{"id":3813,"depth":566,"text":3814},{"id":4190,"depth":566,"text":4191},{"id":4431,"depth":543,"text":4432},{"id":4484,"depth":543,"text":4485},"Create pseudo-state modifiers for interactive states like hover, focus, active, and more with full type safety.","md",null,{},{"title":400,"icon":7},{"title":409,"description":4565},{"loc":401},"x2M1O4CDfzPD6ESirelYSjPtHOctvs29z9klpE4RkW0",[4574,4576],{"title":396,"path":397,"stem":398,"description":4575,"icon":7,"children":-1},"Create pseudo-element modifiers for targeting element sub-parts like before, after, placeholder, and selection with full type safety.",{"title":404,"path":405,"stem":406,"description":4577,"icon":7,"children":-1},"Create structural modifiers for targeting elements by their position in the DOM tree with full type safety.",1776621151934]