[{"data":1,"prerenderedAt":3747},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-composables-accessibility":407,"-docs-theme-utilities-composables-accessibility-surround":3742},{"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":3734,"extension":3735,"links":3736,"meta":3737,"navigation":3738,"path":303,"seo":3739,"sitemap":3740,"stem":304,"__hash__":3741},"docs_theme/docs/theme/utilities/02.composables/00.accessibility.md","Accessibility Utilities",{"type":411,"value":412,"toc":3719},"minimark",[413,417,421,425,428,457,464,471,816,821,826,875,888,894,900,1327,1330,1336,1342,1348,1784,1787,1791,1795,1798,3011,3015,3488,3491,3622,3626,3664,3668,3715],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"Accessibility utilities help you create inclusive web experiences by controlling visibility for screen readers and managing forced color adjustments for high contrast modes.",[414,422,424],{"id":423},"why-use-accessibility-utilities","Why Use Accessibility Utilities?",[418,426,427],{},"Accessibility utilities help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Support assistive technologies",": Hide content visually while keeping it accessible to screen readers",[432,440,441,444],{},[435,442,443],{},"Honor user preferences",": Respect forced color modes for users who need high contrast",[432,446,447,450],{},[435,448,449],{},"Maintain semantic HTML",": Keep content accessible without compromising visual design",[432,452,453,456],{},[435,454,455],{},"Follow WCAG guidelines",": Meet accessibility standards with proven utility patterns",[414,458,460],{"id":459},"useforcedcoloradjustutility",[461,462,463],"code",{},"useForcedColorAdjustUtility",[418,465,466,467,470],{},"The ",[461,468,469],{},"useForcedColorAdjustUtility()"," function creates utility classes for controlling how elements render in forced color modes (like Windows High Contrast Mode).",[472,473,474,616,695],"tabs",{},[475,476,479],"tabs-item",{"icon":477,"label":478},"i-lucide-code","Code",[480,481,487],"pre",{"className":482,"code":483,"filename":484,"language":485,"meta":486,"style":486},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useForcedColorAdjustUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\n// Uses built-in defaults: auto, none\nuseForcedColorAdjustUtility(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[461,488,489,525,548,554,575,580,587,597,602],{"__ignoreMap":486},[490,491,494,498,502,506,509,512,515,519,522],"span",{"class":492,"line":493},"line",1,[490,495,497],{"class":496},"s7zQu","import",[490,499,501],{"class":500},"sMK4o"," {",[490,503,505],{"class":504},"sTEyZ"," styleframe",[490,507,508],{"class":500}," }",[490,510,511],{"class":496}," from",[490,513,514],{"class":500}," \"",[490,516,518],{"class":517},"sfazB","styleframe",[490,520,521],{"class":500},"\"",[490,523,524],{"class":500},";\n",[490,526,528,530,532,535,537,539,541,544,546],{"class":492,"line":527},2,[490,529,497],{"class":496},[490,531,501],{"class":500},[490,533,534],{"class":504}," useForcedColorAdjustUtility",[490,536,508],{"class":500},[490,538,511],{"class":496},[490,540,514],{"class":500},[490,542,543],{"class":517},"@styleframe/theme",[490,545,521],{"class":500},[490,547,524],{"class":500},[490,549,551],{"class":492,"line":550},3,[490,552,553],{"emptyLinePlaceholder":206},"\n",[490,555,557,561,564,567,570,573],{"class":492,"line":556},4,[490,558,560],{"class":559},"spNyl","const",[490,562,563],{"class":504}," s ",[490,565,566],{"class":500},"=",[490,568,505],{"class":569},"s2Zo4",[490,571,572],{"class":504},"()",[490,574,524],{"class":500},[490,576,578],{"class":492,"line":577},5,[490,579,553],{"emptyLinePlaceholder":206},[490,581,583],{"class":492,"line":582},6,[490,584,586],{"class":585},"sHwdD","// Uses built-in defaults: auto, none\n",[490,588,590,592,595],{"class":492,"line":589},7,[490,591,463],{"class":569},[490,593,594],{"class":504},"(s)",[490,596,524],{"class":500},[490,598,600],{"class":492,"line":599},8,[490,601,553],{"emptyLinePlaceholder":206},[490,603,605,608,611,614],{"class":492,"line":604},9,[490,606,607],{"class":496},"export",[490,609,610],{"class":496}," default",[490,612,613],{"class":504}," s",[490,615,524],{"class":500},[475,617,619],{"icon":140,"label":618},"Output",[480,620,625],{"className":621,"code":622,"filename":623,"language":624,"meta":486,"style":486},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._forced-color-adjust\\:auto {\n    forced-color-adjust: auto;\n}\n\n._forced-color-adjust\\:none {\n    forced-color-adjust: none;\n}\n","styleframe/index.css","css",[461,626,627,645,658,663,667,680,691],{"__ignoreMap":486},[490,628,629,632,636,639,642],{"class":492,"line":493},[490,630,631],{"class":500},".",[490,633,635],{"class":634},"sBMFI","_forced-color-adjust",[490,637,638],{"class":504},"\\:",[490,640,641],{"class":634},"auto",[490,643,644],{"class":500}," {\n",[490,646,647,650,653,656],{"class":492,"line":527},[490,648,649],{"class":504},"    forced-color-adjust",[490,651,652],{"class":500},":",[490,654,655],{"class":504}," auto",[490,657,524],{"class":500},[490,659,660],{"class":492,"line":550},[490,661,662],{"class":500},"}\n",[490,664,665],{"class":492,"line":556},[490,666,553],{"emptyLinePlaceholder":206},[490,668,669,671,673,675,678],{"class":492,"line":577},[490,670,631],{"class":500},[490,672,635],{"class":634},[490,674,638],{"class":504},[490,676,677],{"class":634},"none",[490,679,644],{"class":500},[490,681,682,684,686,689],{"class":492,"line":582},[490,683,649],{"class":504},[490,685,652],{"class":500},[490,687,688],{"class":504}," none",[490,690,524],{"class":500},[490,692,693],{"class":492,"line":589},[490,694,662],{"class":500},[475,696,699],{"icon":697,"label":698},"i-lucide-layout","Usage",[480,700,704],{"className":701,"code":702,"language":703,"meta":486,"style":486},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Preserve original colors in high contrast mode -->\n\u003Cdiv class=\"_forced-color-adjust:none\">\n    \u003Cspan style=\"color: red;\">Critical status indicator\u003C/span>\n\u003C/div>\n\n\u003C!-- Allow browser to adjust colors (default behavior) -->\n\u003Cdiv class=\"_forced-color-adjust:auto\">\n    Regular content\n\u003C/div>\n","html",[461,705,706,711,735,767,775,779,784,803,808],{"__ignoreMap":486},[490,707,708],{"class":492,"line":493},[490,709,710],{"class":585},"\u003C!-- Preserve original colors in high contrast mode -->\n",[490,712,713,716,720,723,725,727,730,732],{"class":492,"line":527},[490,714,715],{"class":500},"\u003C",[490,717,719],{"class":718},"swJcz","div",[490,721,722],{"class":559}," class",[490,724,566],{"class":500},[490,726,521],{"class":500},[490,728,729],{"class":517},"_forced-color-adjust:none",[490,731,521],{"class":500},[490,733,734],{"class":500},">\n",[490,736,737,740,742,745,747,749,752,754,757,760,763,765],{"class":492,"line":550},[490,738,739],{"class":500},"    \u003C",[490,741,490],{"class":718},[490,743,744],{"class":559}," style",[490,746,566],{"class":500},[490,748,521],{"class":500},[490,750,751],{"class":517},"color: red;",[490,753,521],{"class":500},[490,755,756],{"class":500},">",[490,758,759],{"class":504},"Critical status indicator",[490,761,762],{"class":500},"\u003C/",[490,764,490],{"class":718},[490,766,734],{"class":500},[490,768,769,771,773],{"class":492,"line":556},[490,770,762],{"class":500},[490,772,719],{"class":718},[490,774,734],{"class":500},[490,776,777],{"class":492,"line":577},[490,778,553],{"emptyLinePlaceholder":206},[490,780,781],{"class":492,"line":582},[490,782,783],{"class":585},"\u003C!-- Allow browser to adjust colors (default behavior) -->\n",[490,785,786,788,790,792,794,796,799,801],{"class":492,"line":589},[490,787,715],{"class":500},[490,789,719],{"class":718},[490,791,722],{"class":559},[490,793,566],{"class":500},[490,795,521],{"class":500},[490,797,798],{"class":517},"_forced-color-adjust:auto",[490,800,521],{"class":500},[490,802,734],{"class":500},[490,804,805],{"class":492,"line":599},[490,806,807],{"class":504},"    Regular content\n",[490,809,810,812,814],{"class":492,"line":604},[490,811,762],{"class":500},[490,813,719],{"class":718},[490,815,734],{"class":500},[817,818,820],"h3",{"id":819},"default-values","Default Values",[418,822,466,823,825],{},[461,824,463],{}," includes these default values:",[827,828,829,845],"table",{},[830,831,832],"thead",{},[833,834,835,839,842],"tr",{},[836,837,838],"th",{},"Key",[836,840,841],{},"Value",[836,843,844],{},"Description",[846,847,848,862],"tbody",{},[833,849,850,855,859],{},[851,852,853],"td",{},[461,854,641],{},[851,856,857],{},[461,858,641],{},[851,860,861],{},"Allow browser to adjust colors in forced color mode",[833,863,864,868,872],{},[851,865,866],{},[461,867,677],{},[851,869,870],{},[461,871,677],{},[851,873,874],{},"Prevent color adjustments, preserving original colors",[876,877,878,883,884,887],"tip",{},[435,879,880,881],{},"When to use ",[461,882,677],{},": Use ",[461,885,886],{},"forced-color-adjust: none"," sparingly on elements where color is essential for understanding (like data visualizations or status indicators).",[414,889,891],{"id":890},"usesronlyutility",[461,892,893],{},"useSrOnlyUtility",[418,895,466,896,899],{},[461,897,898],{},"useSrOnlyUtility()"," function creates a utility class that visually hides content while keeping it accessible to screen readers.",[472,901,902,999,1149],{},[475,903,904],{"icon":477,"label":478},[480,905,907],{"className":482,"code":906,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useSrOnlyUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\n// Creates sr-only class with default: true\nuseSrOnlyUtility(s);\n\nexport default s;\n",[461,908,909,929,950,954,968,972,977,985,989],{"__ignoreMap":486},[490,910,911,913,915,917,919,921,923,925,927],{"class":492,"line":493},[490,912,497],{"class":496},[490,914,501],{"class":500},[490,916,505],{"class":504},[490,918,508],{"class":500},[490,920,511],{"class":496},[490,922,514],{"class":500},[490,924,518],{"class":517},[490,926,521],{"class":500},[490,928,524],{"class":500},[490,930,931,933,935,938,940,942,944,946,948],{"class":492,"line":527},[490,932,497],{"class":496},[490,934,501],{"class":500},[490,936,937],{"class":504}," useSrOnlyUtility",[490,939,508],{"class":500},[490,941,511],{"class":496},[490,943,514],{"class":500},[490,945,543],{"class":517},[490,947,521],{"class":500},[490,949,524],{"class":500},[490,951,952],{"class":492,"line":550},[490,953,553],{"emptyLinePlaceholder":206},[490,955,956,958,960,962,964,966],{"class":492,"line":556},[490,957,560],{"class":559},[490,959,563],{"class":504},[490,961,566],{"class":500},[490,963,505],{"class":569},[490,965,572],{"class":504},[490,967,524],{"class":500},[490,969,970],{"class":492,"line":577},[490,971,553],{"emptyLinePlaceholder":206},[490,973,974],{"class":492,"line":582},[490,975,976],{"class":585},"// Creates sr-only class with default: true\n",[490,978,979,981,983],{"class":492,"line":589},[490,980,893],{"class":569},[490,982,594],{"class":504},[490,984,524],{"class":500},[490,986,987],{"class":492,"line":599},[490,988,553],{"emptyLinePlaceholder":206},[490,990,991,993,995,997],{"class":492,"line":604},[490,992,607],{"class":496},[490,994,610],{"class":496},[490,996,613],{"class":504},[490,998,524],{"class":500},[475,1000,1001],{"icon":140,"label":618},[480,1002,1004],{"className":621,"code":1003,"filename":623,"language":624,"meta":486,"style":486},"._sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n}\n",[461,1005,1006,1015,1028,1041,1052,1064,1076,1088,1120,1132,1144],{"__ignoreMap":486},[490,1007,1008,1010,1013],{"class":492,"line":493},[490,1009,631],{"class":500},[490,1011,1012],{"class":634},"_sr-only",[490,1014,644],{"class":500},[490,1016,1017,1021,1023,1026],{"class":492,"line":527},[490,1018,1020],{"class":1019},"sqsOY","    position",[490,1022,652],{"class":500},[490,1024,1025],{"class":504}," absolute",[490,1027,524],{"class":500},[490,1029,1030,1033,1035,1039],{"class":492,"line":550},[490,1031,1032],{"class":1019},"    width",[490,1034,652],{"class":500},[490,1036,1038],{"class":1037},"sbssI"," 1px",[490,1040,524],{"class":500},[490,1042,1043,1046,1048,1050],{"class":492,"line":556},[490,1044,1045],{"class":1019},"    height",[490,1047,652],{"class":500},[490,1049,1038],{"class":1037},[490,1051,524],{"class":500},[490,1053,1054,1057,1059,1062],{"class":492,"line":577},[490,1055,1056],{"class":1019},"    padding",[490,1058,652],{"class":500},[490,1060,1061],{"class":1037}," 0",[490,1063,524],{"class":500},[490,1065,1066,1069,1071,1074],{"class":492,"line":582},[490,1067,1068],{"class":1019},"    margin",[490,1070,652],{"class":500},[490,1072,1073],{"class":1037}," -1px",[490,1075,524],{"class":500},[490,1077,1078,1081,1083,1086],{"class":492,"line":589},[490,1079,1080],{"class":1019},"    overflow",[490,1082,652],{"class":500},[490,1084,1085],{"class":504}," hidden",[490,1087,524],{"class":500},[490,1089,1090,1093,1095,1098,1101,1104,1107,1109,1111,1113,1115,1117],{"class":492,"line":599},[490,1091,1092],{"class":1019},"    clip",[490,1094,652],{"class":500},[490,1096,1097],{"class":569}," rect",[490,1099,1100],{"class":500},"(",[490,1102,1103],{"class":1037},"0",[490,1105,1106],{"class":500},",",[490,1108,1061],{"class":1037},[490,1110,1106],{"class":500},[490,1112,1061],{"class":1037},[490,1114,1106],{"class":500},[490,1116,1061],{"class":1037},[490,1118,1119],{"class":500},");\n",[490,1121,1122,1125,1127,1130],{"class":492,"line":604},[490,1123,1124],{"class":1019},"    white-space",[490,1126,652],{"class":500},[490,1128,1129],{"class":504}," nowrap",[490,1131,524],{"class":500},[490,1133,1135,1138,1140,1142],{"class":492,"line":1134},10,[490,1136,1137],{"class":1019},"    border-width",[490,1139,652],{"class":500},[490,1141,1061],{"class":1037},[490,1143,524],{"class":500},[490,1145,1147],{"class":492,"line":1146},11,[490,1148,662],{"class":500},[475,1150,1151],{"icon":697,"label":698},[480,1152,1154],{"className":701,"code":1153,"language":703,"meta":486,"style":486},"\u003C!-- Hide text visually but keep accessible to screen readers -->\n\u003Cbutton>\n    \u003Csvg aria-hidden=\"true\">\u003C!-- icon -->\u003C/svg>\n    \u003Cspan class=\"_sr-only\">Close menu\u003C/span>\n\u003C/button>\n\n\u003C!-- Accessible form label -->\n\u003Clabel class=\"_sr-only\" for=\"search\">Search\u003C/label>\n\u003Cinput type=\"search\" id=\"search\" placeholder=\"Search...\">\n",[461,1155,1156,1161,1170,1200,1227,1235,1239,1244,1284],{"__ignoreMap":486},[490,1157,1158],{"class":492,"line":493},[490,1159,1160],{"class":585},"\u003C!-- Hide text visually but keep accessible to screen readers -->\n",[490,1162,1163,1165,1168],{"class":492,"line":527},[490,1164,715],{"class":500},[490,1166,1167],{"class":718},"button",[490,1169,734],{"class":500},[490,1171,1172,1174,1177,1180,1182,1184,1187,1189,1191,1194,1196,1198],{"class":492,"line":550},[490,1173,739],{"class":500},[490,1175,1176],{"class":718},"svg",[490,1178,1179],{"class":559}," aria-hidden",[490,1181,566],{"class":500},[490,1183,521],{"class":500},[490,1185,1186],{"class":517},"true",[490,1188,521],{"class":500},[490,1190,756],{"class":500},[490,1192,1193],{"class":585},"\u003C!-- icon -->",[490,1195,762],{"class":500},[490,1197,1176],{"class":718},[490,1199,734],{"class":500},[490,1201,1202,1204,1206,1208,1210,1212,1214,1216,1218,1221,1223,1225],{"class":492,"line":556},[490,1203,739],{"class":500},[490,1205,490],{"class":718},[490,1207,722],{"class":559},[490,1209,566],{"class":500},[490,1211,521],{"class":500},[490,1213,1012],{"class":517},[490,1215,521],{"class":500},[490,1217,756],{"class":500},[490,1219,1220],{"class":504},"Close menu",[490,1222,762],{"class":500},[490,1224,490],{"class":718},[490,1226,734],{"class":500},[490,1228,1229,1231,1233],{"class":492,"line":577},[490,1230,762],{"class":500},[490,1232,1167],{"class":718},[490,1234,734],{"class":500},[490,1236,1237],{"class":492,"line":582},[490,1238,553],{"emptyLinePlaceholder":206},[490,1240,1241],{"class":492,"line":589},[490,1242,1243],{"class":585},"\u003C!-- Accessible form label -->\n",[490,1245,1246,1248,1251,1253,1255,1257,1259,1261,1264,1266,1268,1271,1273,1275,1278,1280,1282],{"class":492,"line":599},[490,1247,715],{"class":500},[490,1249,1250],{"class":718},"label",[490,1252,722],{"class":559},[490,1254,566],{"class":500},[490,1256,521],{"class":500},[490,1258,1012],{"class":517},[490,1260,521],{"class":500},[490,1262,1263],{"class":559}," for",[490,1265,566],{"class":500},[490,1267,521],{"class":500},[490,1269,1270],{"class":517},"search",[490,1272,521],{"class":500},[490,1274,756],{"class":500},[490,1276,1277],{"class":504},"Search",[490,1279,762],{"class":500},[490,1281,1250],{"class":718},[490,1283,734],{"class":500},[490,1285,1286,1288,1291,1294,1296,1298,1300,1302,1305,1307,1309,1311,1313,1316,1318,1320,1323,1325],{"class":492,"line":604},[490,1287,715],{"class":500},[490,1289,1290],{"class":718},"input",[490,1292,1293],{"class":559}," type",[490,1295,566],{"class":500},[490,1297,521],{"class":500},[490,1299,1270],{"class":517},[490,1301,521],{"class":500},[490,1303,1304],{"class":559}," id",[490,1306,566],{"class":500},[490,1308,521],{"class":500},[490,1310,1270],{"class":517},[490,1312,521],{"class":500},[490,1314,1315],{"class":559}," placeholder",[490,1317,566],{"class":500},[490,1319,521],{"class":500},[490,1321,1322],{"class":517},"Search...",[490,1324,521],{"class":500},[490,1326,734],{"class":500},[418,1328,1329],{},"This pattern visually hides the element but keeps it in the accessibility tree so screen readers can announce it.",[876,1331,1332,1335],{},[435,1333,1334],{},"Pro tip",": Use sr-only for icon-only buttons, skip links, form labels that are visually implied, and any content that provides context for assistive technology users.",[414,1337,1339],{"id":1338},"usenotsronlyutility",[461,1340,1341],{},"useNotSrOnlyUtility",[418,1343,466,1344,1347],{},[461,1345,1346],{},"useNotSrOnlyUtility()"," function creates a utility class that undoes the sr-only styles, making content visible again.",[472,1349,1350,1454,1690],{},[475,1351,1352],{"icon":477,"label":478},[480,1353,1355],{"className":482,"code":1354,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useSrOnlyUtility, useNotSrOnlyUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseSrOnlyUtility(s);\nuseNotSrOnlyUtility(s);\n\nexport default s;\n",[461,1356,1357,1377,1402,1406,1420,1424,1432,1440,1444],{"__ignoreMap":486},[490,1358,1359,1361,1363,1365,1367,1369,1371,1373,1375],{"class":492,"line":493},[490,1360,497],{"class":496},[490,1362,501],{"class":500},[490,1364,505],{"class":504},[490,1366,508],{"class":500},[490,1368,511],{"class":496},[490,1370,514],{"class":500},[490,1372,518],{"class":517},[490,1374,521],{"class":500},[490,1376,524],{"class":500},[490,1378,1379,1381,1383,1385,1387,1390,1392,1394,1396,1398,1400],{"class":492,"line":527},[490,1380,497],{"class":496},[490,1382,501],{"class":500},[490,1384,937],{"class":504},[490,1386,1106],{"class":500},[490,1388,1389],{"class":504}," useNotSrOnlyUtility",[490,1391,508],{"class":500},[490,1393,511],{"class":496},[490,1395,514],{"class":500},[490,1397,543],{"class":517},[490,1399,521],{"class":500},[490,1401,524],{"class":500},[490,1403,1404],{"class":492,"line":550},[490,1405,553],{"emptyLinePlaceholder":206},[490,1407,1408,1410,1412,1414,1416,1418],{"class":492,"line":556},[490,1409,560],{"class":559},[490,1411,563],{"class":504},[490,1413,566],{"class":500},[490,1415,505],{"class":569},[490,1417,572],{"class":504},[490,1419,524],{"class":500},[490,1421,1422],{"class":492,"line":577},[490,1423,553],{"emptyLinePlaceholder":206},[490,1425,1426,1428,1430],{"class":492,"line":582},[490,1427,893],{"class":569},[490,1429,594],{"class":504},[490,1431,524],{"class":500},[490,1433,1434,1436,1438],{"class":492,"line":589},[490,1435,1341],{"class":569},[490,1437,594],{"class":504},[490,1439,524],{"class":500},[490,1441,1442],{"class":492,"line":599},[490,1443,553],{"emptyLinePlaceholder":206},[490,1445,1446,1448,1450,1452],{"class":492,"line":604},[490,1447,607],{"class":496},[490,1449,610],{"class":496},[490,1451,613],{"class":504},[490,1453,524],{"class":500},[475,1455,1456],{"icon":140,"label":618},[480,1457,1459],{"className":621,"code":1458,"filename":623,"language":624,"meta":486,"style":486},"._sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n}\n\n._not-sr-only {\n    position: static;\n    width: auto;\n    height: auto;\n    padding: 0;\n    margin: 0;\n    overflow: visible;\n    clip: auto;\n    white-space: normal;\n}\n",[461,1460,1461,1469,1479,1489,1499,1509,1519,1529,1555,1565,1575,1579,1584,1594,1606,1617,1628,1639,1650,1662,1673,1685],{"__ignoreMap":486},[490,1462,1463,1465,1467],{"class":492,"line":493},[490,1464,631],{"class":500},[490,1466,1012],{"class":634},[490,1468,644],{"class":500},[490,1470,1471,1473,1475,1477],{"class":492,"line":527},[490,1472,1020],{"class":1019},[490,1474,652],{"class":500},[490,1476,1025],{"class":504},[490,1478,524],{"class":500},[490,1480,1481,1483,1485,1487],{"class":492,"line":550},[490,1482,1032],{"class":1019},[490,1484,652],{"class":500},[490,1486,1038],{"class":1037},[490,1488,524],{"class":500},[490,1490,1491,1493,1495,1497],{"class":492,"line":556},[490,1492,1045],{"class":1019},[490,1494,652],{"class":500},[490,1496,1038],{"class":1037},[490,1498,524],{"class":500},[490,1500,1501,1503,1505,1507],{"class":492,"line":577},[490,1502,1056],{"class":1019},[490,1504,652],{"class":500},[490,1506,1061],{"class":1037},[490,1508,524],{"class":500},[490,1510,1511,1513,1515,1517],{"class":492,"line":582},[490,1512,1068],{"class":1019},[490,1514,652],{"class":500},[490,1516,1073],{"class":1037},[490,1518,524],{"class":500},[490,1520,1521,1523,1525,1527],{"class":492,"line":589},[490,1522,1080],{"class":1019},[490,1524,652],{"class":500},[490,1526,1085],{"class":504},[490,1528,524],{"class":500},[490,1530,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551,1553],{"class":492,"line":599},[490,1532,1092],{"class":1019},[490,1534,652],{"class":500},[490,1536,1097],{"class":569},[490,1538,1100],{"class":500},[490,1540,1103],{"class":1037},[490,1542,1106],{"class":500},[490,1544,1061],{"class":1037},[490,1546,1106],{"class":500},[490,1548,1061],{"class":1037},[490,1550,1106],{"class":500},[490,1552,1061],{"class":1037},[490,1554,1119],{"class":500},[490,1556,1557,1559,1561,1563],{"class":492,"line":604},[490,1558,1124],{"class":1019},[490,1560,652],{"class":500},[490,1562,1129],{"class":504},[490,1564,524],{"class":500},[490,1566,1567,1569,1571,1573],{"class":492,"line":1134},[490,1568,1137],{"class":1019},[490,1570,652],{"class":500},[490,1572,1061],{"class":1037},[490,1574,524],{"class":500},[490,1576,1577],{"class":492,"line":1146},[490,1578,662],{"class":500},[490,1580,1582],{"class":492,"line":1581},12,[490,1583,553],{"emptyLinePlaceholder":206},[490,1585,1587,1589,1592],{"class":492,"line":1586},13,[490,1588,631],{"class":500},[490,1590,1591],{"class":634},"_not-sr-only",[490,1593,644],{"class":500},[490,1595,1597,1599,1601,1604],{"class":492,"line":1596},14,[490,1598,1020],{"class":1019},[490,1600,652],{"class":500},[490,1602,1603],{"class":504}," static",[490,1605,524],{"class":500},[490,1607,1609,1611,1613,1615],{"class":492,"line":1608},15,[490,1610,1032],{"class":1019},[490,1612,652],{"class":500},[490,1614,655],{"class":504},[490,1616,524],{"class":500},[490,1618,1620,1622,1624,1626],{"class":492,"line":1619},16,[490,1621,1045],{"class":1019},[490,1623,652],{"class":500},[490,1625,655],{"class":504},[490,1627,524],{"class":500},[490,1629,1631,1633,1635,1637],{"class":492,"line":1630},17,[490,1632,1056],{"class":1019},[490,1634,652],{"class":500},[490,1636,1061],{"class":1037},[490,1638,524],{"class":500},[490,1640,1642,1644,1646,1648],{"class":492,"line":1641},18,[490,1643,1068],{"class":1019},[490,1645,652],{"class":500},[490,1647,1061],{"class":1037},[490,1649,524],{"class":500},[490,1651,1653,1655,1657,1660],{"class":492,"line":1652},19,[490,1654,1080],{"class":1019},[490,1656,652],{"class":500},[490,1658,1659],{"class":504}," visible",[490,1661,524],{"class":500},[490,1663,1665,1667,1669,1671],{"class":492,"line":1664},20,[490,1666,1092],{"class":1019},[490,1668,652],{"class":500},[490,1670,655],{"class":504},[490,1672,524],{"class":500},[490,1674,1676,1678,1680,1683],{"class":492,"line":1675},21,[490,1677,1124],{"class":1019},[490,1679,652],{"class":500},[490,1681,1682],{"class":504}," normal",[490,1684,524],{"class":500},[490,1686,1688],{"class":492,"line":1687},22,[490,1689,662],{"class":500},[475,1691,1692],{"icon":697,"label":698},[480,1693,1695],{"className":701,"code":1694,"language":703,"meta":486,"style":486},"\u003C!-- Make sr-only content visible again -->\n\u003Ca href=\"#main\" class=\"_sr-only _focus:not-sr-only\">\n    Skip to main content\n\u003C/a>\n\n\u003C!-- Toggle visibility based on state -->\n\u003Cspan class=\"_sr-only _not-sr-only\">Now visible\u003C/span>\n",[461,1696,1697,1702,1734,1739,1747,1751,1756],{"__ignoreMap":486},[490,1698,1699],{"class":492,"line":493},[490,1700,1701],{"class":585},"\u003C!-- Make sr-only content visible again -->\n",[490,1703,1704,1706,1709,1712,1714,1716,1719,1721,1723,1725,1727,1730,1732],{"class":492,"line":527},[490,1705,715],{"class":500},[490,1707,1708],{"class":718},"a",[490,1710,1711],{"class":559}," href",[490,1713,566],{"class":500},[490,1715,521],{"class":500},[490,1717,1718],{"class":517},"#main",[490,1720,521],{"class":500},[490,1722,722],{"class":559},[490,1724,566],{"class":500},[490,1726,521],{"class":500},[490,1728,1729],{"class":517},"_sr-only _focus:not-sr-only",[490,1731,521],{"class":500},[490,1733,734],{"class":500},[490,1735,1736],{"class":492,"line":550},[490,1737,1738],{"class":504},"    Skip to main content\n",[490,1740,1741,1743,1745],{"class":492,"line":556},[490,1742,762],{"class":500},[490,1744,1708],{"class":718},[490,1746,734],{"class":500},[490,1748,1749],{"class":492,"line":577},[490,1750,553],{"emptyLinePlaceholder":206},[490,1752,1753],{"class":492,"line":582},[490,1754,1755],{"class":585},"\u003C!-- Toggle visibility based on state -->\n",[490,1757,1758,1760,1762,1764,1766,1768,1771,1773,1775,1778,1780,1782],{"class":492,"line":589},[490,1759,715],{"class":500},[490,1761,490],{"class":718},[490,1763,722],{"class":559},[490,1765,566],{"class":500},[490,1767,521],{"class":500},[490,1769,1770],{"class":517},"_sr-only _not-sr-only",[490,1772,521],{"class":500},[490,1774,756],{"class":500},[490,1776,1777],{"class":504},"Now visible",[490,1779,762],{"class":500},[490,1781,490],{"class":718},[490,1783,734],{"class":500},[418,1785,1786],{},"This is useful when you want content to be screen-reader-only by default but visible on certain states (like focus).",[414,1788,1790],{"id":1789},"examples","Examples",[817,1792,1794],{"id":1793},"skip-link-pattern","Skip Link Pattern",[418,1796,1797],{},"A common accessibility pattern is a \"skip to content\" link that's only visible when focused:",[472,1799,1800,2499],{},[475,1801,1802],{"icon":477,"label":478},[480,1803,1805],{"className":482,"code":1804,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useSrOnlyUtility, useNotSrOnlyUtility } from \"@styleframe/theme\";\nimport { useColorDesignTokens } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { ref, selector, modifier } = s;\n\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\n\n// Create accessibility utilities\nuseSrOnlyUtility(s);\nuseNotSrOnlyUtility(s);\n\n// Create focus modifier\nconst focus = modifier('focus', ({ declarations }) => ({\n    '&:focus': declarations,\n}));\n\n// Apply not-sr-only on focus using a selector\nselector('.skip-link', {\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: '0',\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0, 0, 0, 0)',\n    whiteSpace: 'nowrap',\n    borderWidth: '0',\n    '&:focus': {\n        position: 'fixed',\n        top: '1rem',\n        left: '1rem',\n        width: 'auto',\n        height: 'auto',\n        padding: '1rem',\n        margin: '0',\n        overflow: 'visible',\n        clip: 'auto',\n        whiteSpace: 'normal',\n        backgroundColor: ref(colorPrimary),\n        color: 'white',\n        zIndex: '9999',\n    },\n});\n\nexport default s;\n",[461,1806,1807,1827,1851,1872,1876,1890,1919,1923,1972,1976,1981,1989,1997,2001,2006,2048,2065,2074,2078,2083,2101,2116,2131,2146,2161,2177,2193,2209,2226,2242,2255,2272,2289,2305,2321,2337,2353,2369,2386,2402,2419,2434,2451,2468,2474,2483,2488],{"__ignoreMap":486},[490,1808,1809,1811,1813,1815,1817,1819,1821,1823,1825],{"class":492,"line":493},[490,1810,497],{"class":496},[490,1812,501],{"class":500},[490,1814,505],{"class":504},[490,1816,508],{"class":500},[490,1818,511],{"class":496},[490,1820,514],{"class":500},[490,1822,518],{"class":517},[490,1824,521],{"class":500},[490,1826,524],{"class":500},[490,1828,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1849],{"class":492,"line":527},[490,1830,497],{"class":496},[490,1832,501],{"class":500},[490,1834,937],{"class":504},[490,1836,1106],{"class":500},[490,1838,1389],{"class":504},[490,1840,508],{"class":500},[490,1842,511],{"class":496},[490,1844,514],{"class":500},[490,1846,543],{"class":517},[490,1848,521],{"class":500},[490,1850,524],{"class":500},[490,1852,1853,1855,1857,1860,1862,1864,1866,1868,1870],{"class":492,"line":550},[490,1854,497],{"class":496},[490,1856,501],{"class":500},[490,1858,1859],{"class":504}," useColorDesignTokens",[490,1861,508],{"class":500},[490,1863,511],{"class":496},[490,1865,514],{"class":500},[490,1867,543],{"class":517},[490,1869,521],{"class":500},[490,1871,524],{"class":500},[490,1873,1874],{"class":492,"line":556},[490,1875,553],{"emptyLinePlaceholder":206},[490,1877,1878,1880,1882,1884,1886,1888],{"class":492,"line":577},[490,1879,560],{"class":559},[490,1881,563],{"class":504},[490,1883,566],{"class":500},[490,1885,505],{"class":569},[490,1887,572],{"class":504},[490,1889,524],{"class":500},[490,1891,1892,1894,1896,1899,1901,1904,1906,1909,1912,1915,1917],{"class":492,"line":582},[490,1893,560],{"class":559},[490,1895,501],{"class":500},[490,1897,1898],{"class":504}," ref",[490,1900,1106],{"class":500},[490,1902,1903],{"class":504}," selector",[490,1905,1106],{"class":500},[490,1907,1908],{"class":504}," modifier ",[490,1910,1911],{"class":500},"}",[490,1913,1914],{"class":500}," =",[490,1916,613],{"class":504},[490,1918,524],{"class":500},[490,1920,1921],{"class":492,"line":589},[490,1922,553],{"emptyLinePlaceholder":206},[490,1924,1925,1927,1929,1932,1934,1936,1938,1941,1943,1945,1948,1950,1953,1956,1959,1961,1964,1967,1970],{"class":492,"line":599},[490,1926,560],{"class":559},[490,1928,501],{"class":500},[490,1930,1931],{"class":504}," colorPrimary ",[490,1933,1911],{"class":500},[490,1935,1914],{"class":500},[490,1937,1859],{"class":569},[490,1939,1940],{"class":504},"(s",[490,1942,1106],{"class":500},[490,1944,501],{"class":500},[490,1946,1947],{"class":718}," primary",[490,1949,652],{"class":500},[490,1951,1952],{"class":500}," '",[490,1954,1955],{"class":517},"#006cff",[490,1957,1958],{"class":500},"'",[490,1960,508],{"class":500},[490,1962,1963],{"class":496}," as",[490,1965,1966],{"class":559}," const",[490,1968,1969],{"class":504},")",[490,1971,524],{"class":500},[490,1973,1974],{"class":492,"line":604},[490,1975,553],{"emptyLinePlaceholder":206},[490,1977,1978],{"class":492,"line":1134},[490,1979,1980],{"class":585},"// Create accessibility utilities\n",[490,1982,1983,1985,1987],{"class":492,"line":1146},[490,1984,893],{"class":569},[490,1986,594],{"class":504},[490,1988,524],{"class":500},[490,1990,1991,1993,1995],{"class":492,"line":1581},[490,1992,1341],{"class":569},[490,1994,594],{"class":504},[490,1996,524],{"class":500},[490,1998,1999],{"class":492,"line":1586},[490,2000,553],{"emptyLinePlaceholder":206},[490,2002,2003],{"class":492,"line":1596},[490,2004,2005],{"class":585},"// Create focus modifier\n",[490,2007,2008,2010,2013,2015,2018,2020,2022,2025,2027,2029,2032,2036,2039,2042,2045],{"class":492,"line":1608},[490,2009,560],{"class":559},[490,2011,2012],{"class":504}," focus ",[490,2014,566],{"class":500},[490,2016,2017],{"class":569}," modifier",[490,2019,1100],{"class":504},[490,2021,1958],{"class":500},[490,2023,2024],{"class":517},"focus",[490,2026,1958],{"class":500},[490,2028,1106],{"class":500},[490,2030,2031],{"class":500}," ({",[490,2033,2035],{"class":2034},"sHdIc"," declarations",[490,2037,2038],{"class":500}," })",[490,2040,2041],{"class":559}," =>",[490,2043,2044],{"class":504}," (",[490,2046,2047],{"class":500},"{\n",[490,2049,2050,2053,2056,2058,2060,2062],{"class":492,"line":1619},[490,2051,2052],{"class":500},"    '",[490,2054,2055],{"class":718},"&:focus",[490,2057,1958],{"class":500},[490,2059,652],{"class":500},[490,2061,2035],{"class":504},[490,2063,2064],{"class":500},",\n",[490,2066,2067,2069,2072],{"class":492,"line":1630},[490,2068,1911],{"class":500},[490,2070,2071],{"class":504},"))",[490,2073,524],{"class":500},[490,2075,2076],{"class":492,"line":1641},[490,2077,553],{"emptyLinePlaceholder":206},[490,2079,2080],{"class":492,"line":1652},[490,2081,2082],{"class":585},"// Apply not-sr-only on focus using a selector\n",[490,2084,2085,2088,2090,2092,2095,2097,2099],{"class":492,"line":1664},[490,2086,2087],{"class":569},"selector",[490,2089,1100],{"class":504},[490,2091,1958],{"class":500},[490,2093,2094],{"class":517},".skip-link",[490,2096,1958],{"class":500},[490,2098,1106],{"class":500},[490,2100,644],{"class":500},[490,2102,2103,2105,2107,2109,2112,2114],{"class":492,"line":1675},[490,2104,1020],{"class":718},[490,2106,652],{"class":500},[490,2108,1952],{"class":500},[490,2110,2111],{"class":517},"absolute",[490,2113,1958],{"class":500},[490,2115,2064],{"class":500},[490,2117,2118,2120,2122,2124,2127,2129],{"class":492,"line":1687},[490,2119,1032],{"class":718},[490,2121,652],{"class":500},[490,2123,1952],{"class":500},[490,2125,2126],{"class":517},"1px",[490,2128,1958],{"class":500},[490,2130,2064],{"class":500},[490,2132,2134,2136,2138,2140,2142,2144],{"class":492,"line":2133},23,[490,2135,1045],{"class":718},[490,2137,652],{"class":500},[490,2139,1952],{"class":500},[490,2141,2126],{"class":517},[490,2143,1958],{"class":500},[490,2145,2064],{"class":500},[490,2147,2149,2151,2153,2155,2157,2159],{"class":492,"line":2148},24,[490,2150,1056],{"class":718},[490,2152,652],{"class":500},[490,2154,1952],{"class":500},[490,2156,1103],{"class":517},[490,2158,1958],{"class":500},[490,2160,2064],{"class":500},[490,2162,2164,2166,2168,2170,2173,2175],{"class":492,"line":2163},25,[490,2165,1068],{"class":718},[490,2167,652],{"class":500},[490,2169,1952],{"class":500},[490,2171,2172],{"class":517},"-1px",[490,2174,1958],{"class":500},[490,2176,2064],{"class":500},[490,2178,2180,2182,2184,2186,2189,2191],{"class":492,"line":2179},26,[490,2181,1080],{"class":718},[490,2183,652],{"class":500},[490,2185,1952],{"class":500},[490,2187,2188],{"class":517},"hidden",[490,2190,1958],{"class":500},[490,2192,2064],{"class":500},[490,2194,2196,2198,2200,2202,2205,2207],{"class":492,"line":2195},27,[490,2197,1092],{"class":718},[490,2199,652],{"class":500},[490,2201,1952],{"class":500},[490,2203,2204],{"class":517},"rect(0, 0, 0, 0)",[490,2206,1958],{"class":500},[490,2208,2064],{"class":500},[490,2210,2212,2215,2217,2219,2222,2224],{"class":492,"line":2211},28,[490,2213,2214],{"class":718},"    whiteSpace",[490,2216,652],{"class":500},[490,2218,1952],{"class":500},[490,2220,2221],{"class":517},"nowrap",[490,2223,1958],{"class":500},[490,2225,2064],{"class":500},[490,2227,2229,2232,2234,2236,2238,2240],{"class":492,"line":2228},29,[490,2230,2231],{"class":718},"    borderWidth",[490,2233,652],{"class":500},[490,2235,1952],{"class":500},[490,2237,1103],{"class":517},[490,2239,1958],{"class":500},[490,2241,2064],{"class":500},[490,2243,2245,2247,2249,2251,2253],{"class":492,"line":2244},30,[490,2246,2052],{"class":500},[490,2248,2055],{"class":718},[490,2250,1958],{"class":500},[490,2252,652],{"class":500},[490,2254,644],{"class":500},[490,2256,2258,2261,2263,2265,2268,2270],{"class":492,"line":2257},31,[490,2259,2260],{"class":718},"        position",[490,2262,652],{"class":500},[490,2264,1952],{"class":500},[490,2266,2267],{"class":517},"fixed",[490,2269,1958],{"class":500},[490,2271,2064],{"class":500},[490,2273,2275,2278,2280,2282,2285,2287],{"class":492,"line":2274},32,[490,2276,2277],{"class":718},"        top",[490,2279,652],{"class":500},[490,2281,1952],{"class":500},[490,2283,2284],{"class":517},"1rem",[490,2286,1958],{"class":500},[490,2288,2064],{"class":500},[490,2290,2292,2295,2297,2299,2301,2303],{"class":492,"line":2291},33,[490,2293,2294],{"class":718},"        left",[490,2296,652],{"class":500},[490,2298,1952],{"class":500},[490,2300,2284],{"class":517},[490,2302,1958],{"class":500},[490,2304,2064],{"class":500},[490,2306,2308,2311,2313,2315,2317,2319],{"class":492,"line":2307},34,[490,2309,2310],{"class":718},"        width",[490,2312,652],{"class":500},[490,2314,1952],{"class":500},[490,2316,641],{"class":517},[490,2318,1958],{"class":500},[490,2320,2064],{"class":500},[490,2322,2324,2327,2329,2331,2333,2335],{"class":492,"line":2323},35,[490,2325,2326],{"class":718},"        height",[490,2328,652],{"class":500},[490,2330,1952],{"class":500},[490,2332,641],{"class":517},[490,2334,1958],{"class":500},[490,2336,2064],{"class":500},[490,2338,2340,2343,2345,2347,2349,2351],{"class":492,"line":2339},36,[490,2341,2342],{"class":718},"        padding",[490,2344,652],{"class":500},[490,2346,1952],{"class":500},[490,2348,2284],{"class":517},[490,2350,1958],{"class":500},[490,2352,2064],{"class":500},[490,2354,2356,2359,2361,2363,2365,2367],{"class":492,"line":2355},37,[490,2357,2358],{"class":718},"        margin",[490,2360,652],{"class":500},[490,2362,1952],{"class":500},[490,2364,1103],{"class":517},[490,2366,1958],{"class":500},[490,2368,2064],{"class":500},[490,2370,2372,2375,2377,2379,2382,2384],{"class":492,"line":2371},38,[490,2373,2374],{"class":718},"        overflow",[490,2376,652],{"class":500},[490,2378,1952],{"class":500},[490,2380,2381],{"class":517},"visible",[490,2383,1958],{"class":500},[490,2385,2064],{"class":500},[490,2387,2389,2392,2394,2396,2398,2400],{"class":492,"line":2388},39,[490,2390,2391],{"class":718},"        clip",[490,2393,652],{"class":500},[490,2395,1952],{"class":500},[490,2397,641],{"class":517},[490,2399,1958],{"class":500},[490,2401,2064],{"class":500},[490,2403,2405,2408,2410,2412,2415,2417],{"class":492,"line":2404},40,[490,2406,2407],{"class":718},"        whiteSpace",[490,2409,652],{"class":500},[490,2411,1952],{"class":500},[490,2413,2414],{"class":517},"normal",[490,2416,1958],{"class":500},[490,2418,2064],{"class":500},[490,2420,2422,2425,2427,2429,2432],{"class":492,"line":2421},41,[490,2423,2424],{"class":718},"        backgroundColor",[490,2426,652],{"class":500},[490,2428,1898],{"class":569},[490,2430,2431],{"class":504},"(colorPrimary)",[490,2433,2064],{"class":500},[490,2435,2437,2440,2442,2444,2447,2449],{"class":492,"line":2436},42,[490,2438,2439],{"class":718},"        color",[490,2441,652],{"class":500},[490,2443,1952],{"class":500},[490,2445,2446],{"class":517},"white",[490,2448,1958],{"class":500},[490,2450,2064],{"class":500},[490,2452,2454,2457,2459,2461,2464,2466],{"class":492,"line":2453},43,[490,2455,2456],{"class":718},"        zIndex",[490,2458,652],{"class":500},[490,2460,1952],{"class":500},[490,2462,2463],{"class":517},"9999",[490,2465,1958],{"class":500},[490,2467,2064],{"class":500},[490,2469,2471],{"class":492,"line":2470},44,[490,2472,2473],{"class":500},"    },\n",[490,2475,2477,2479,2481],{"class":492,"line":2476},45,[490,2478,1911],{"class":500},[490,2480,1969],{"class":504},[490,2482,524],{"class":500},[490,2484,2486],{"class":492,"line":2485},46,[490,2487,553],{"emptyLinePlaceholder":206},[490,2489,2491,2493,2495,2497],{"class":492,"line":2490},47,[490,2492,607],{"class":496},[490,2494,610],{"class":496},[490,2496,613],{"class":504},[490,2498,524],{"class":500},[475,2500,2501],{"icon":140,"label":618},[480,2502,2504],{"className":621,"code":2503,"filename":623,"language":624,"meta":486,"style":486},"._sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n}\n\n._not-sr-only {\n    position: static;\n    width: auto;\n    height: auto;\n    padding: 0;\n    margin: 0;\n    overflow: visible;\n    clip: auto;\n    white-space: normal;\n}\n\n.skip-link {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n}\n\n.skip-link:focus {\n    position: fixed;\n    top: 1rem;\n    left: 1rem;\n    width: auto;\n    height: auto;\n    padding: 1rem;\n    margin: 0;\n    overflow: visible;\n    clip: auto;\n    white-space: normal;\n    background-color: var(--color--primary);\n    color: white;\n    z-index: 9999;\n}\n",[461,2505,2506,2514,2524,2534,2544,2554,2564,2574,2600,2610,2620,2624,2628,2636,2646,2656,2666,2676,2686,2696,2706,2716,2720,2724,2733,2743,2753,2763,2773,2783,2793,2819,2829,2839,2843,2847,2859,2870,2882,2893,2903,2913,2923,2933,2943,2953,2963,2980,2993,3006],{"__ignoreMap":486},[490,2507,2508,2510,2512],{"class":492,"line":493},[490,2509,631],{"class":500},[490,2511,1012],{"class":634},[490,2513,644],{"class":500},[490,2515,2516,2518,2520,2522],{"class":492,"line":527},[490,2517,1020],{"class":1019},[490,2519,652],{"class":500},[490,2521,1025],{"class":504},[490,2523,524],{"class":500},[490,2525,2526,2528,2530,2532],{"class":492,"line":550},[490,2527,1032],{"class":1019},[490,2529,652],{"class":500},[490,2531,1038],{"class":1037},[490,2533,524],{"class":500},[490,2535,2536,2538,2540,2542],{"class":492,"line":556},[490,2537,1045],{"class":1019},[490,2539,652],{"class":500},[490,2541,1038],{"class":1037},[490,2543,524],{"class":500},[490,2545,2546,2548,2550,2552],{"class":492,"line":577},[490,2547,1056],{"class":1019},[490,2549,652],{"class":500},[490,2551,1061],{"class":1037},[490,2553,524],{"class":500},[490,2555,2556,2558,2560,2562],{"class":492,"line":582},[490,2557,1068],{"class":1019},[490,2559,652],{"class":500},[490,2561,1073],{"class":1037},[490,2563,524],{"class":500},[490,2565,2566,2568,2570,2572],{"class":492,"line":589},[490,2567,1080],{"class":1019},[490,2569,652],{"class":500},[490,2571,1085],{"class":504},[490,2573,524],{"class":500},[490,2575,2576,2578,2580,2582,2584,2586,2588,2590,2592,2594,2596,2598],{"class":492,"line":599},[490,2577,1092],{"class":1019},[490,2579,652],{"class":500},[490,2581,1097],{"class":569},[490,2583,1100],{"class":500},[490,2585,1103],{"class":1037},[490,2587,1106],{"class":500},[490,2589,1061],{"class":1037},[490,2591,1106],{"class":500},[490,2593,1061],{"class":1037},[490,2595,1106],{"class":500},[490,2597,1061],{"class":1037},[490,2599,1119],{"class":500},[490,2601,2602,2604,2606,2608],{"class":492,"line":604},[490,2603,1124],{"class":1019},[490,2605,652],{"class":500},[490,2607,1129],{"class":504},[490,2609,524],{"class":500},[490,2611,2612,2614,2616,2618],{"class":492,"line":1134},[490,2613,1137],{"class":1019},[490,2615,652],{"class":500},[490,2617,1061],{"class":1037},[490,2619,524],{"class":500},[490,2621,2622],{"class":492,"line":1146},[490,2623,662],{"class":500},[490,2625,2626],{"class":492,"line":1581},[490,2627,553],{"emptyLinePlaceholder":206},[490,2629,2630,2632,2634],{"class":492,"line":1586},[490,2631,631],{"class":500},[490,2633,1591],{"class":634},[490,2635,644],{"class":500},[490,2637,2638,2640,2642,2644],{"class":492,"line":1596},[490,2639,1020],{"class":1019},[490,2641,652],{"class":500},[490,2643,1603],{"class":504},[490,2645,524],{"class":500},[490,2647,2648,2650,2652,2654],{"class":492,"line":1608},[490,2649,1032],{"class":1019},[490,2651,652],{"class":500},[490,2653,655],{"class":504},[490,2655,524],{"class":500},[490,2657,2658,2660,2662,2664],{"class":492,"line":1619},[490,2659,1045],{"class":1019},[490,2661,652],{"class":500},[490,2663,655],{"class":504},[490,2665,524],{"class":500},[490,2667,2668,2670,2672,2674],{"class":492,"line":1630},[490,2669,1056],{"class":1019},[490,2671,652],{"class":500},[490,2673,1061],{"class":1037},[490,2675,524],{"class":500},[490,2677,2678,2680,2682,2684],{"class":492,"line":1641},[490,2679,1068],{"class":1019},[490,2681,652],{"class":500},[490,2683,1061],{"class":1037},[490,2685,524],{"class":500},[490,2687,2688,2690,2692,2694],{"class":492,"line":1652},[490,2689,1080],{"class":1019},[490,2691,652],{"class":500},[490,2693,1659],{"class":504},[490,2695,524],{"class":500},[490,2697,2698,2700,2702,2704],{"class":492,"line":1664},[490,2699,1092],{"class":1019},[490,2701,652],{"class":500},[490,2703,655],{"class":504},[490,2705,524],{"class":500},[490,2707,2708,2710,2712,2714],{"class":492,"line":1675},[490,2709,1124],{"class":1019},[490,2711,652],{"class":500},[490,2713,1682],{"class":504},[490,2715,524],{"class":500},[490,2717,2718],{"class":492,"line":1687},[490,2719,662],{"class":500},[490,2721,2722],{"class":492,"line":2133},[490,2723,553],{"emptyLinePlaceholder":206},[490,2725,2726,2728,2731],{"class":492,"line":2148},[490,2727,631],{"class":500},[490,2729,2730],{"class":634},"skip-link",[490,2732,644],{"class":500},[490,2734,2735,2737,2739,2741],{"class":492,"line":2163},[490,2736,1020],{"class":1019},[490,2738,652],{"class":500},[490,2740,1025],{"class":504},[490,2742,524],{"class":500},[490,2744,2745,2747,2749,2751],{"class":492,"line":2179},[490,2746,1032],{"class":1019},[490,2748,652],{"class":500},[490,2750,1038],{"class":1037},[490,2752,524],{"class":500},[490,2754,2755,2757,2759,2761],{"class":492,"line":2195},[490,2756,1045],{"class":1019},[490,2758,652],{"class":500},[490,2760,1038],{"class":1037},[490,2762,524],{"class":500},[490,2764,2765,2767,2769,2771],{"class":492,"line":2211},[490,2766,1056],{"class":1019},[490,2768,652],{"class":500},[490,2770,1061],{"class":1037},[490,2772,524],{"class":500},[490,2774,2775,2777,2779,2781],{"class":492,"line":2228},[490,2776,1068],{"class":1019},[490,2778,652],{"class":500},[490,2780,1073],{"class":1037},[490,2782,524],{"class":500},[490,2784,2785,2787,2789,2791],{"class":492,"line":2244},[490,2786,1080],{"class":1019},[490,2788,652],{"class":500},[490,2790,1085],{"class":504},[490,2792,524],{"class":500},[490,2794,2795,2797,2799,2801,2803,2805,2807,2809,2811,2813,2815,2817],{"class":492,"line":2257},[490,2796,1092],{"class":1019},[490,2798,652],{"class":500},[490,2800,1097],{"class":569},[490,2802,1100],{"class":500},[490,2804,1103],{"class":1037},[490,2806,1106],{"class":500},[490,2808,1061],{"class":1037},[490,2810,1106],{"class":500},[490,2812,1061],{"class":1037},[490,2814,1106],{"class":500},[490,2816,1061],{"class":1037},[490,2818,1119],{"class":500},[490,2820,2821,2823,2825,2827],{"class":492,"line":2274},[490,2822,1124],{"class":1019},[490,2824,652],{"class":500},[490,2826,1129],{"class":504},[490,2828,524],{"class":500},[490,2830,2831,2833,2835,2837],{"class":492,"line":2291},[490,2832,1137],{"class":1019},[490,2834,652],{"class":500},[490,2836,1061],{"class":1037},[490,2838,524],{"class":500},[490,2840,2841],{"class":492,"line":2307},[490,2842,662],{"class":500},[490,2844,2845],{"class":492,"line":2323},[490,2846,553],{"emptyLinePlaceholder":206},[490,2848,2849,2851,2853,2855,2857],{"class":492,"line":2339},[490,2850,631],{"class":500},[490,2852,2730],{"class":634},[490,2854,652],{"class":500},[490,2856,2024],{"class":559},[490,2858,644],{"class":500},[490,2860,2861,2863,2865,2868],{"class":492,"line":2355},[490,2862,1020],{"class":1019},[490,2864,652],{"class":500},[490,2866,2867],{"class":504}," fixed",[490,2869,524],{"class":500},[490,2871,2872,2875,2877,2880],{"class":492,"line":2371},[490,2873,2874],{"class":1019},"    top",[490,2876,652],{"class":500},[490,2878,2879],{"class":1037}," 1rem",[490,2881,524],{"class":500},[490,2883,2884,2887,2889,2891],{"class":492,"line":2388},[490,2885,2886],{"class":1019},"    left",[490,2888,652],{"class":500},[490,2890,2879],{"class":1037},[490,2892,524],{"class":500},[490,2894,2895,2897,2899,2901],{"class":492,"line":2404},[490,2896,1032],{"class":1019},[490,2898,652],{"class":500},[490,2900,655],{"class":504},[490,2902,524],{"class":500},[490,2904,2905,2907,2909,2911],{"class":492,"line":2421},[490,2906,1045],{"class":1019},[490,2908,652],{"class":500},[490,2910,655],{"class":504},[490,2912,524],{"class":500},[490,2914,2915,2917,2919,2921],{"class":492,"line":2436},[490,2916,1056],{"class":1019},[490,2918,652],{"class":500},[490,2920,2879],{"class":1037},[490,2922,524],{"class":500},[490,2924,2925,2927,2929,2931],{"class":492,"line":2453},[490,2926,1068],{"class":1019},[490,2928,652],{"class":500},[490,2930,1061],{"class":1037},[490,2932,524],{"class":500},[490,2934,2935,2937,2939,2941],{"class":492,"line":2470},[490,2936,1080],{"class":1019},[490,2938,652],{"class":500},[490,2940,1659],{"class":504},[490,2942,524],{"class":500},[490,2944,2945,2947,2949,2951],{"class":492,"line":2476},[490,2946,1092],{"class":1019},[490,2948,652],{"class":500},[490,2950,655],{"class":504},[490,2952,524],{"class":500},[490,2954,2955,2957,2959,2961],{"class":492,"line":2485},[490,2956,1124],{"class":1019},[490,2958,652],{"class":500},[490,2960,1682],{"class":504},[490,2962,524],{"class":500},[490,2964,2965,2968,2970,2973,2975,2978],{"class":492,"line":2490},[490,2966,2967],{"class":1019},"    background-color",[490,2969,652],{"class":500},[490,2971,2972],{"class":569}," var",[490,2974,1100],{"class":500},[490,2976,2977],{"class":504},"--color--primary",[490,2979,1119],{"class":500},[490,2981,2983,2986,2988,2991],{"class":492,"line":2982},48,[490,2984,2985],{"class":1019},"    color",[490,2987,652],{"class":500},[490,2989,2990],{"class":504}," white",[490,2992,524],{"class":500},[490,2994,2996,2999,3001,3004],{"class":492,"line":2995},49,[490,2997,2998],{"class":1019},"    z-index",[490,3000,652],{"class":500},[490,3002,3003],{"class":1037}," 9999",[490,3005,524],{"class":500},[490,3007,3009],{"class":492,"line":3008},50,[490,3010,662],{"class":500},[817,3012,3014],{"id":3013},"icon-button-with-accessible-label","Icon Button with Accessible Label",[472,3016,3017,3268],{},[475,3018,3019],{"icon":477,"label":478},[480,3020,3022],{"className":482,"code":3021,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useSrOnlyUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { selector } = s;\n\nuseSrOnlyUtility(s);\n\n// Style for icon button\nselector('.icon-button', {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: '0.5rem',\n    border: 'none',\n    borderRadius: '0.25rem',\n    cursor: 'pointer',\n});\n\nexport default s;\n",[461,3023,3024,3044,3064,3068,3082,3099,3103,3111,3115,3120,3137,3153,3169,3184,3199,3214,3230,3246,3254,3258],{"__ignoreMap":486},[490,3025,3026,3028,3030,3032,3034,3036,3038,3040,3042],{"class":492,"line":493},[490,3027,497],{"class":496},[490,3029,501],{"class":500},[490,3031,505],{"class":504},[490,3033,508],{"class":500},[490,3035,511],{"class":496},[490,3037,514],{"class":500},[490,3039,518],{"class":517},[490,3041,521],{"class":500},[490,3043,524],{"class":500},[490,3045,3046,3048,3050,3052,3054,3056,3058,3060,3062],{"class":492,"line":527},[490,3047,497],{"class":496},[490,3049,501],{"class":500},[490,3051,937],{"class":504},[490,3053,508],{"class":500},[490,3055,511],{"class":496},[490,3057,514],{"class":500},[490,3059,543],{"class":517},[490,3061,521],{"class":500},[490,3063,524],{"class":500},[490,3065,3066],{"class":492,"line":550},[490,3067,553],{"emptyLinePlaceholder":206},[490,3069,3070,3072,3074,3076,3078,3080],{"class":492,"line":556},[490,3071,560],{"class":559},[490,3073,563],{"class":504},[490,3075,566],{"class":500},[490,3077,505],{"class":569},[490,3079,572],{"class":504},[490,3081,524],{"class":500},[490,3083,3084,3086,3088,3091,3093,3095,3097],{"class":492,"line":577},[490,3085,560],{"class":559},[490,3087,501],{"class":500},[490,3089,3090],{"class":504}," selector ",[490,3092,1911],{"class":500},[490,3094,1914],{"class":500},[490,3096,613],{"class":504},[490,3098,524],{"class":500},[490,3100,3101],{"class":492,"line":582},[490,3102,553],{"emptyLinePlaceholder":206},[490,3104,3105,3107,3109],{"class":492,"line":589},[490,3106,893],{"class":569},[490,3108,594],{"class":504},[490,3110,524],{"class":500},[490,3112,3113],{"class":492,"line":599},[490,3114,553],{"emptyLinePlaceholder":206},[490,3116,3117],{"class":492,"line":604},[490,3118,3119],{"class":585},"// Style for icon button\n",[490,3121,3122,3124,3126,3128,3131,3133,3135],{"class":492,"line":1134},[490,3123,2087],{"class":569},[490,3125,1100],{"class":504},[490,3127,1958],{"class":500},[490,3129,3130],{"class":517},".icon-button",[490,3132,1958],{"class":500},[490,3134,1106],{"class":500},[490,3136,644],{"class":500},[490,3138,3139,3142,3144,3146,3149,3151],{"class":492,"line":1146},[490,3140,3141],{"class":718},"    display",[490,3143,652],{"class":500},[490,3145,1952],{"class":500},[490,3147,3148],{"class":517},"inline-flex",[490,3150,1958],{"class":500},[490,3152,2064],{"class":500},[490,3154,3155,3158,3160,3162,3165,3167],{"class":492,"line":1581},[490,3156,3157],{"class":718},"    alignItems",[490,3159,652],{"class":500},[490,3161,1952],{"class":500},[490,3163,3164],{"class":517},"center",[490,3166,1958],{"class":500},[490,3168,2064],{"class":500},[490,3170,3171,3174,3176,3178,3180,3182],{"class":492,"line":1586},[490,3172,3173],{"class":718},"    justifyContent",[490,3175,652],{"class":500},[490,3177,1952],{"class":500},[490,3179,3164],{"class":517},[490,3181,1958],{"class":500},[490,3183,2064],{"class":500},[490,3185,3186,3188,3190,3192,3195,3197],{"class":492,"line":1596},[490,3187,1056],{"class":718},[490,3189,652],{"class":500},[490,3191,1952],{"class":500},[490,3193,3194],{"class":517},"0.5rem",[490,3196,1958],{"class":500},[490,3198,2064],{"class":500},[490,3200,3201,3204,3206,3208,3210,3212],{"class":492,"line":1608},[490,3202,3203],{"class":718},"    border",[490,3205,652],{"class":500},[490,3207,1952],{"class":500},[490,3209,677],{"class":517},[490,3211,1958],{"class":500},[490,3213,2064],{"class":500},[490,3215,3216,3219,3221,3223,3226,3228],{"class":492,"line":1619},[490,3217,3218],{"class":718},"    borderRadius",[490,3220,652],{"class":500},[490,3222,1952],{"class":500},[490,3224,3225],{"class":517},"0.25rem",[490,3227,1958],{"class":500},[490,3229,2064],{"class":500},[490,3231,3232,3235,3237,3239,3242,3244],{"class":492,"line":1630},[490,3233,3234],{"class":718},"    cursor",[490,3236,652],{"class":500},[490,3238,1952],{"class":500},[490,3240,3241],{"class":517},"pointer",[490,3243,1958],{"class":500},[490,3245,2064],{"class":500},[490,3247,3248,3250,3252],{"class":492,"line":1641},[490,3249,1911],{"class":500},[490,3251,1969],{"class":504},[490,3253,524],{"class":500},[490,3255,3256],{"class":492,"line":1652},[490,3257,553],{"emptyLinePlaceholder":206},[490,3259,3260,3262,3264,3266],{"class":492,"line":1664},[490,3261,607],{"class":496},[490,3263,610],{"class":496},[490,3265,613],{"class":504},[490,3267,524],{"class":500},[475,3269,3270],{"icon":140,"label":618},[480,3271,3273],{"className":621,"code":3272,"filename":623,"language":624,"meta":486,"style":486},"._sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n}\n\n.icon-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.5rem;\n    border: none;\n    border-radius: 0.25rem;\n    cursor: pointer;\n}\n",[461,3274,3275,3283,3293,3303,3313,3323,3333,3343,3369,3379,3389,3393,3397,3406,3417,3429,3440,3451,3461,3473,3484],{"__ignoreMap":486},[490,3276,3277,3279,3281],{"class":492,"line":493},[490,3278,631],{"class":500},[490,3280,1012],{"class":634},[490,3282,644],{"class":500},[490,3284,3285,3287,3289,3291],{"class":492,"line":527},[490,3286,1020],{"class":1019},[490,3288,652],{"class":500},[490,3290,1025],{"class":504},[490,3292,524],{"class":500},[490,3294,3295,3297,3299,3301],{"class":492,"line":550},[490,3296,1032],{"class":1019},[490,3298,652],{"class":500},[490,3300,1038],{"class":1037},[490,3302,524],{"class":500},[490,3304,3305,3307,3309,3311],{"class":492,"line":556},[490,3306,1045],{"class":1019},[490,3308,652],{"class":500},[490,3310,1038],{"class":1037},[490,3312,524],{"class":500},[490,3314,3315,3317,3319,3321],{"class":492,"line":577},[490,3316,1056],{"class":1019},[490,3318,652],{"class":500},[490,3320,1061],{"class":1037},[490,3322,524],{"class":500},[490,3324,3325,3327,3329,3331],{"class":492,"line":582},[490,3326,1068],{"class":1019},[490,3328,652],{"class":500},[490,3330,1073],{"class":1037},[490,3332,524],{"class":500},[490,3334,3335,3337,3339,3341],{"class":492,"line":589},[490,3336,1080],{"class":1019},[490,3338,652],{"class":500},[490,3340,1085],{"class":504},[490,3342,524],{"class":500},[490,3344,3345,3347,3349,3351,3353,3355,3357,3359,3361,3363,3365,3367],{"class":492,"line":599},[490,3346,1092],{"class":1019},[490,3348,652],{"class":500},[490,3350,1097],{"class":569},[490,3352,1100],{"class":500},[490,3354,1103],{"class":1037},[490,3356,1106],{"class":500},[490,3358,1061],{"class":1037},[490,3360,1106],{"class":500},[490,3362,1061],{"class":1037},[490,3364,1106],{"class":500},[490,3366,1061],{"class":1037},[490,3368,1119],{"class":500},[490,3370,3371,3373,3375,3377],{"class":492,"line":604},[490,3372,1124],{"class":1019},[490,3374,652],{"class":500},[490,3376,1129],{"class":504},[490,3378,524],{"class":500},[490,3380,3381,3383,3385,3387],{"class":492,"line":1134},[490,3382,1137],{"class":1019},[490,3384,652],{"class":500},[490,3386,1061],{"class":1037},[490,3388,524],{"class":500},[490,3390,3391],{"class":492,"line":1146},[490,3392,662],{"class":500},[490,3394,3395],{"class":492,"line":1581},[490,3396,553],{"emptyLinePlaceholder":206},[490,3398,3399,3401,3404],{"class":492,"line":1586},[490,3400,631],{"class":500},[490,3402,3403],{"class":634},"icon-button",[490,3405,644],{"class":500},[490,3407,3408,3410,3412,3415],{"class":492,"line":1596},[490,3409,3141],{"class":1019},[490,3411,652],{"class":500},[490,3413,3414],{"class":504}," inline-flex",[490,3416,524],{"class":500},[490,3418,3419,3422,3424,3427],{"class":492,"line":1608},[490,3420,3421],{"class":1019},"    align-items",[490,3423,652],{"class":500},[490,3425,3426],{"class":504}," center",[490,3428,524],{"class":500},[490,3430,3431,3434,3436,3438],{"class":492,"line":1619},[490,3432,3433],{"class":1019},"    justify-content",[490,3435,652],{"class":500},[490,3437,3426],{"class":504},[490,3439,524],{"class":500},[490,3441,3442,3444,3446,3449],{"class":492,"line":1630},[490,3443,1056],{"class":1019},[490,3445,652],{"class":500},[490,3447,3448],{"class":1037}," 0.5rem",[490,3450,524],{"class":500},[490,3452,3453,3455,3457,3459],{"class":492,"line":1641},[490,3454,3203],{"class":1019},[490,3456,652],{"class":500},[490,3458,688],{"class":504},[490,3460,524],{"class":500},[490,3462,3463,3466,3468,3471],{"class":492,"line":1652},[490,3464,3465],{"class":1019},"    border-radius",[490,3467,652],{"class":500},[490,3469,3470],{"class":1037}," 0.25rem",[490,3472,524],{"class":500},[490,3474,3475,3477,3479,3482],{"class":492,"line":1664},[490,3476,3234],{"class":1019},[490,3478,652],{"class":500},[490,3480,3481],{"class":504}," pointer",[490,3483,524],{"class":500},[490,3485,3486],{"class":492,"line":1675},[490,3487,662],{"class":500},[418,3489,3490],{},"Usage in HTML:",[480,3492,3494],{"className":701,"code":3493,"language":703,"meta":486,"style":486},"\u003Cbutton class=\"icon-button\">\n    \u003Csvg aria-hidden=\"true\" width=\"24\" height=\"24\">\n        \u003Cpath d=\"...\" />\n    \u003C/svg>\n    \u003Cspan class=\"_sr-only\">Delete item\u003C/span>\n\u003C/button>\n",[461,3495,3496,3514,3555,3578,3587,3614],{"__ignoreMap":486},[490,3497,3498,3500,3502,3504,3506,3508,3510,3512],{"class":492,"line":493},[490,3499,715],{"class":500},[490,3501,1167],{"class":718},[490,3503,722],{"class":559},[490,3505,566],{"class":500},[490,3507,521],{"class":500},[490,3509,3403],{"class":517},[490,3511,521],{"class":500},[490,3513,734],{"class":500},[490,3515,3516,3518,3520,3522,3524,3526,3528,3530,3533,3535,3537,3540,3542,3545,3547,3549,3551,3553],{"class":492,"line":527},[490,3517,739],{"class":500},[490,3519,1176],{"class":718},[490,3521,1179],{"class":559},[490,3523,566],{"class":500},[490,3525,521],{"class":500},[490,3527,1186],{"class":517},[490,3529,521],{"class":500},[490,3531,3532],{"class":559}," width",[490,3534,566],{"class":500},[490,3536,521],{"class":500},[490,3538,3539],{"class":517},"24",[490,3541,521],{"class":500},[490,3543,3544],{"class":559}," height",[490,3546,566],{"class":500},[490,3548,521],{"class":500},[490,3550,3539],{"class":517},[490,3552,521],{"class":500},[490,3554,734],{"class":500},[490,3556,3557,3560,3563,3566,3568,3570,3573,3575],{"class":492,"line":550},[490,3558,3559],{"class":500},"        \u003C",[490,3561,3562],{"class":718},"path",[490,3564,3565],{"class":559}," d",[490,3567,566],{"class":500},[490,3569,521],{"class":500},[490,3571,3572],{"class":517},"...",[490,3574,521],{"class":500},[490,3576,3577],{"class":500}," />\n",[490,3579,3580,3583,3585],{"class":492,"line":556},[490,3581,3582],{"class":500},"    \u003C/",[490,3584,1176],{"class":718},[490,3586,734],{"class":500},[490,3588,3589,3591,3593,3595,3597,3599,3601,3603,3605,3608,3610,3612],{"class":492,"line":577},[490,3590,739],{"class":500},[490,3592,490],{"class":718},[490,3594,722],{"class":559},[490,3596,566],{"class":500},[490,3598,521],{"class":500},[490,3600,1012],{"class":517},[490,3602,521],{"class":500},[490,3604,756],{"class":500},[490,3606,3607],{"class":504},"Delete item",[490,3609,762],{"class":500},[490,3611,490],{"class":718},[490,3613,734],{"class":500},[490,3615,3616,3618,3620],{"class":492,"line":582},[490,3617,762],{"class":500},[490,3619,1167],{"class":718},[490,3621,734],{"class":500},[414,3623,3625],{"id":3624},"best-practices","Best Practices",[429,3627,3628,3634,3640,3646,3652,3658],{},[432,3629,3630,3633],{},[435,3631,3632],{},"Always provide text alternatives",": Icon buttons, images, and decorative elements should have accessible text",[432,3635,3636,3639],{},[435,3637,3638],{},"Use sr-only for context",": Add screen-reader-only text when visual context isn't available to assistive technology users",[432,3641,3642,3645],{},[435,3643,3644],{},"Test with screen readers",": Verify your sr-only content is announced correctly",[432,3647,3648,3651],{},[435,3649,3650],{},"Be careful with forced-color-adjust",": Only disable it when color is critical to understanding",[432,3653,3654,3657],{},[435,3655,3656],{},"Consider focus states",": Make sr-only content visible on focus when appropriate (like skip links)",[432,3659,3660,3663],{},[435,3661,3662],{},"Don't use display: none",": It removes content from the accessibility tree entirely",[414,3665,3667],{"id":3666},"faq","FAQ",[3669,3670,3671,3688,3700,3708],"accordion",{},[3672,3673,3676,3677,3680,3681,3684,3685,3687],"accordion-item",{"icon":3674,"label":3675},"i-lucide-circle-help","When should I use sr-only vs aria-label?","Use ",[461,3678,3679],{},"sr-only"," when you need full sentences or longer descriptions. Use ",[461,3682,3683],{},"aria-label"," for short, single-word or short-phrase labels. The ",[461,3686,3679],{}," technique is more flexible and can include complex content like instructions.",[3672,3689,3691,3692,3695,3696,3699],{"icon":3674,"label":3690},"Does sr-only affect SEO?","Content hidden with sr-only is still in the DOM and can be indexed by search engines. This is different from ",[461,3693,3694],{},"display: none"," or ",[461,3697,3698],{},"visibility: hidden",", which may be treated as hidden content by search engines.",[3672,3701,3703,3704,3707],{"icon":3674,"label":3702},"Can I animate sr-only content when it becomes visible?","Yes, when combined with ",[461,3705,3706],{},"not-sr-only"," or custom focus styles, you can transition properties like opacity, transform, or position to create smooth reveal animations for skip links and similar patterns.",[3672,3709,3711,3712,3714],{"icon":3674,"label":3710},"What is forced-color-adjust used for?","It controls whether the browser modifies colors when the user has enabled a forced color mode (like Windows High Contrast Mode). Setting it to ",[461,3713,677],{}," preserves your original colors, which is useful for elements where specific colors convey meaning.",[3716,3717,3718],"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 .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 .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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":486,"searchDepth":527,"depth":527,"links":3720},[3721,3722,3723,3726,3727,3728,3732,3733],{"id":416,"depth":527,"text":64},{"id":423,"depth":527,"text":424},{"id":459,"depth":527,"text":463,"children":3724},[3725],{"id":819,"depth":550,"text":820},{"id":890,"depth":527,"text":893},{"id":1338,"depth":527,"text":1341},{"id":1789,"depth":527,"text":1790,"children":3729},[3730,3731],{"id":1793,"depth":550,"text":1794},{"id":3013,"depth":550,"text":3014},{"id":3624,"depth":527,"text":3625},{"id":3666,"depth":527,"text":3667},"Create accessibility utilities for screen reader visibility and forced color adjustments with full type safety.","md",null,{},{"title":302,"icon":7},{"title":409,"description":3734},{"loc":303},"bZzp5XPEc3YvysgfKguRzUSzNB20zN2DWusqpb0TuSY",[3743,3745],{"title":156,"path":295,"stem":296,"description":3744,"icon":159,"children":-1},"Quickly register all utility factories with the useUtilitiesPreset composable for seamless recipe integration and comprehensive utility class generation.",{"title":306,"path":307,"stem":308,"description":3746,"icon":7,"children":-1},"Create animation utilities for continuous motion effects and keyframe-based animations with full type safety.",1776621146394]