[{"data":1,"prerenderedAt":4032},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-accessibility":682,"-docs-theme-utilities-accessibility-surround":4027},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":4020,"extension":4021,"links":4022,"meta":4023,"navigation":4024,"path":569,"seo":4025,"stem":570,"__hash__":4026},"docs_theme\u002Fdocs\u002Ftheme\u002Futilities\u002F02.accessibility.md","Accessibility Utilities",{"type":686,"value":687,"toc":4005},"minimark",[688,706,710,714,718,721,749,755,762,1104,1109,1114,1163,1176,1182,1188,1615,1618,1624,1630,1636,2071,2074,2078,2082,2085,3297,3301,3774,3777,3908,3912,3950,3954,4001],[689,690,691,695,696,700,701,705],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Utilities Preset:"," The utilities on this page are registered by the ",[697,698,699],"a",{"href":565},"Utilities Preset"," (",[702,703,704],"code",{},"useUtilitiesPreset","). For most projects, applying them via the preset is the recommended approach.",[707,708,78],"h2",{"id":709},"overview",[711,712,713],"p",{},"Accessibility utilities help you create inclusive web experiences by controlling visibility for screen readers and managing forced color adjustments for high contrast modes.",[707,715,717],{"id":716},"why-use-accessibility-utilities","Why Use Accessibility Utilities?",[711,719,720],{},"Accessibility utilities help you:",[722,723,724,731,737,743],"ul",{},[725,726,727,730],"li",{},[692,728,729],{},"Support assistive technologies",": Hide content visually while keeping it accessible to screen readers",[725,732,733,736],{},[692,734,735],{},"Honor user preferences",": Respect forced color modes for users who need high contrast",[725,738,739,742],{},[692,740,741],{},"Maintain semantic HTML",": Keep content accessible without compromising visual design",[725,744,745,748],{},[692,746,747],{},"Follow WCAG guidelines",": Meet accessibility standards with proven utility patterns",[707,750,752],{"id":751},"useforcedcoloradjustutility",[702,753,754],{},"useForcedColorAdjustUtility",[711,756,757,758,761],{},"The ",[702,759,760],{},"useForcedColorAdjustUtility()"," function creates utility classes for controlling how elements render in forced color modes (like Windows High Contrast Mode).",[763,764,765,906,984],"tabs",{},[766,767,769],"tabs-item",{"icon":768,"label":290},"i-lucide-code",[770,771,777],"pre",{"className":772,"code":773,"filename":774,"language":775,"meta":776,"style":776},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useForcedColorAdjustUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\n\u002F\u002F Uses built-in defaults: auto, none\nuseForcedColorAdjustUtility(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[702,778,779,815,838,844,865,870,877,887,892],{"__ignoreMap":776},[780,781,784,788,792,796,799,802,805,809,812],"span",{"class":782,"line":783},"line",1,[780,785,787],{"class":786},"s7zQu","import",[780,789,791],{"class":790},"sMK4o"," {",[780,793,795],{"class":794},"sTEyZ"," styleframe",[780,797,798],{"class":790}," }",[780,800,801],{"class":786}," from",[780,803,804],{"class":790}," \"",[780,806,808],{"class":807},"sfazB","styleframe",[780,810,811],{"class":790},"\"",[780,813,814],{"class":790},";\n",[780,816,818,820,822,825,827,829,831,834,836],{"class":782,"line":817},2,[780,819,787],{"class":786},[780,821,791],{"class":790},[780,823,824],{"class":794}," useForcedColorAdjustUtility",[780,826,798],{"class":790},[780,828,801],{"class":786},[780,830,804],{"class":790},[780,832,833],{"class":807},"@styleframe\u002Ftheme",[780,835,811],{"class":790},[780,837,814],{"class":790},[780,839,841],{"class":782,"line":840},3,[780,842,843],{"emptyLinePlaceholder":223},"\n",[780,845,847,851,854,857,860,863],{"class":782,"line":846},4,[780,848,850],{"class":849},"spNyl","const",[780,852,853],{"class":794}," s ",[780,855,856],{"class":790},"=",[780,858,795],{"class":859},"s2Zo4",[780,861,862],{"class":794},"()",[780,864,814],{"class":790},[780,866,868],{"class":782,"line":867},5,[780,869,843],{"emptyLinePlaceholder":223},[780,871,873],{"class":782,"line":872},6,[780,874,876],{"class":875},"sHwdD","\u002F\u002F Uses built-in defaults: auto, none\n",[780,878,880,882,885],{"class":782,"line":879},7,[780,881,754],{"class":859},[780,883,884],{"class":794},"(s)",[780,886,814],{"class":790},[780,888,890],{"class":782,"line":889},8,[780,891,843],{"emptyLinePlaceholder":223},[780,893,895,898,901,904],{"class":782,"line":894},9,[780,896,897],{"class":786},"export",[780,899,900],{"class":786}," default",[780,902,903],{"class":794}," s",[780,905,814],{"class":790},[766,907,908],{"icon":154,"label":326},[770,909,914],{"className":910,"code":911,"filename":912,"language":913,"meta":776,"style":776},"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\u002Findex.css","css",[702,915,916,934,947,952,956,969,980],{"__ignoreMap":776},[780,917,918,921,925,928,931],{"class":782,"line":783},[780,919,920],{"class":790},".",[780,922,924],{"class":923},"sBMFI","_forced-color-adjust",[780,926,927],{"class":794},"\\:",[780,929,930],{"class":923},"auto",[780,932,933],{"class":790}," {\n",[780,935,936,939,942,945],{"class":782,"line":817},[780,937,938],{"class":794},"    forced-color-adjust",[780,940,941],{"class":790},":",[780,943,944],{"class":794}," auto",[780,946,814],{"class":790},[780,948,949],{"class":782,"line":840},[780,950,951],{"class":790},"}\n",[780,953,954],{"class":782,"line":846},[780,955,843],{"emptyLinePlaceholder":223},[780,957,958,960,962,964,967],{"class":782,"line":867},[780,959,920],{"class":790},[780,961,924],{"class":923},[780,963,927],{"class":794},[780,965,966],{"class":923},"none",[780,968,933],{"class":790},[780,970,971,973,975,978],{"class":782,"line":872},[780,972,938],{"class":794},[780,974,941],{"class":790},[780,976,977],{"class":794}," none",[780,979,814],{"class":790},[780,981,982],{"class":782,"line":879},[780,983,951],{"class":790},[766,985,987],{"icon":520,"label":986},"Usage",[770,988,992],{"className":989,"code":990,"language":991,"meta":776,"style":776},"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\u002Fspan>\n\u003C\u002Fdiv>\n\n\u003C!-- Allow browser to adjust colors (default behavior) -->\n\u003Cdiv class=\"_forced-color-adjust:auto\">\n    Regular content\n\u003C\u002Fdiv>\n","html",[702,993,994,999,1023,1055,1063,1067,1072,1091,1096],{"__ignoreMap":776},[780,995,996],{"class":782,"line":783},[780,997,998],{"class":875},"\u003C!-- Preserve original colors in high contrast mode -->\n",[780,1000,1001,1004,1008,1011,1013,1015,1018,1020],{"class":782,"line":817},[780,1002,1003],{"class":790},"\u003C",[780,1005,1007],{"class":1006},"swJcz","div",[780,1009,1010],{"class":849}," class",[780,1012,856],{"class":790},[780,1014,811],{"class":790},[780,1016,1017],{"class":807},"_forced-color-adjust:none",[780,1019,811],{"class":790},[780,1021,1022],{"class":790},">\n",[780,1024,1025,1028,1030,1033,1035,1037,1040,1042,1045,1048,1051,1053],{"class":782,"line":840},[780,1026,1027],{"class":790},"    \u003C",[780,1029,780],{"class":1006},[780,1031,1032],{"class":849}," style",[780,1034,856],{"class":790},[780,1036,811],{"class":790},[780,1038,1039],{"class":807},"color: red;",[780,1041,811],{"class":790},[780,1043,1044],{"class":790},">",[780,1046,1047],{"class":794},"Critical status indicator",[780,1049,1050],{"class":790},"\u003C\u002F",[780,1052,780],{"class":1006},[780,1054,1022],{"class":790},[780,1056,1057,1059,1061],{"class":782,"line":846},[780,1058,1050],{"class":790},[780,1060,1007],{"class":1006},[780,1062,1022],{"class":790},[780,1064,1065],{"class":782,"line":867},[780,1066,843],{"emptyLinePlaceholder":223},[780,1068,1069],{"class":782,"line":872},[780,1070,1071],{"class":875},"\u003C!-- Allow browser to adjust colors (default behavior) -->\n",[780,1073,1074,1076,1078,1080,1082,1084,1087,1089],{"class":782,"line":879},[780,1075,1003],{"class":790},[780,1077,1007],{"class":1006},[780,1079,1010],{"class":849},[780,1081,856],{"class":790},[780,1083,811],{"class":790},[780,1085,1086],{"class":807},"_forced-color-adjust:auto",[780,1088,811],{"class":790},[780,1090,1022],{"class":790},[780,1092,1093],{"class":782,"line":889},[780,1094,1095],{"class":794},"    Regular content\n",[780,1097,1098,1100,1102],{"class":782,"line":894},[780,1099,1050],{"class":790},[780,1101,1007],{"class":1006},[780,1103,1022],{"class":790},[1105,1106,1108],"h3",{"id":1107},"default-values","Default Values",[711,1110,757,1111,1113],{},[702,1112,754],{}," includes these default values:",[1115,1116,1117,1133],"table",{},[1118,1119,1120],"thead",{},[1121,1122,1123,1127,1130],"tr",{},[1124,1125,1126],"th",{},"Key",[1124,1128,1129],{},"Value",[1124,1131,1132],{},"Description",[1134,1135,1136,1150],"tbody",{},[1121,1137,1138,1143,1147],{},[1139,1140,1141],"td",{},[702,1142,930],{},[1139,1144,1145],{},[702,1146,930],{},[1139,1148,1149],{},"Allow browser to adjust colors in forced color mode",[1121,1151,1152,1156,1160],{},[1139,1153,1154],{},[702,1155,966],{},[1139,1157,1158],{},[702,1159,966],{},[1139,1161,1162],{},"Prevent color adjustments, preserving original colors",[1164,1165,1166,1171,1172,1175],"tip",{},[692,1167,1168,1169],{},"When to use ",[702,1170,966],{},": Use ",[702,1173,1174],{},"forced-color-adjust: none"," sparingly on elements where color is essential for understanding (like data visualizations or status indicators).",[707,1177,1179],{"id":1178},"usesronlyutility",[702,1180,1181],{},"useSrOnlyUtility",[711,1183,757,1184,1187],{},[702,1185,1186],{},"useSrOnlyUtility()"," function creates a utility class that visually hides content while keeping it accessible to screen readers.",[763,1189,1190,1287,1437],{},[766,1191,1192],{"icon":768,"label":290},[770,1193,1195],{"className":772,"code":1194,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useSrOnlyUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\n\u002F\u002F Creates sr-only class with default: true\nuseSrOnlyUtility(s);\n\nexport default s;\n",[702,1196,1197,1217,1238,1242,1256,1260,1265,1273,1277],{"__ignoreMap":776},[780,1198,1199,1201,1203,1205,1207,1209,1211,1213,1215],{"class":782,"line":783},[780,1200,787],{"class":786},[780,1202,791],{"class":790},[780,1204,795],{"class":794},[780,1206,798],{"class":790},[780,1208,801],{"class":786},[780,1210,804],{"class":790},[780,1212,808],{"class":807},[780,1214,811],{"class":790},[780,1216,814],{"class":790},[780,1218,1219,1221,1223,1226,1228,1230,1232,1234,1236],{"class":782,"line":817},[780,1220,787],{"class":786},[780,1222,791],{"class":790},[780,1224,1225],{"class":794}," useSrOnlyUtility",[780,1227,798],{"class":790},[780,1229,801],{"class":786},[780,1231,804],{"class":790},[780,1233,833],{"class":807},[780,1235,811],{"class":790},[780,1237,814],{"class":790},[780,1239,1240],{"class":782,"line":840},[780,1241,843],{"emptyLinePlaceholder":223},[780,1243,1244,1246,1248,1250,1252,1254],{"class":782,"line":846},[780,1245,850],{"class":849},[780,1247,853],{"class":794},[780,1249,856],{"class":790},[780,1251,795],{"class":859},[780,1253,862],{"class":794},[780,1255,814],{"class":790},[780,1257,1258],{"class":782,"line":867},[780,1259,843],{"emptyLinePlaceholder":223},[780,1261,1262],{"class":782,"line":872},[780,1263,1264],{"class":875},"\u002F\u002F Creates sr-only class with default: true\n",[780,1266,1267,1269,1271],{"class":782,"line":879},[780,1268,1181],{"class":859},[780,1270,884],{"class":794},[780,1272,814],{"class":790},[780,1274,1275],{"class":782,"line":889},[780,1276,843],{"emptyLinePlaceholder":223},[780,1278,1279,1281,1283,1285],{"class":782,"line":894},[780,1280,897],{"class":786},[780,1282,900],{"class":786},[780,1284,903],{"class":794},[780,1286,814],{"class":790},[766,1288,1289],{"icon":154,"label":326},[770,1290,1292],{"className":910,"code":1291,"filename":912,"language":913,"meta":776,"style":776},"._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",[702,1293,1294,1303,1316,1329,1340,1352,1364,1376,1408,1420,1432],{"__ignoreMap":776},[780,1295,1296,1298,1301],{"class":782,"line":783},[780,1297,920],{"class":790},[780,1299,1300],{"class":923},"_sr-only",[780,1302,933],{"class":790},[780,1304,1305,1309,1311,1314],{"class":782,"line":817},[780,1306,1308],{"class":1307},"sqsOY","    position",[780,1310,941],{"class":790},[780,1312,1313],{"class":794}," absolute",[780,1315,814],{"class":790},[780,1317,1318,1321,1323,1327],{"class":782,"line":840},[780,1319,1320],{"class":1307},"    width",[780,1322,941],{"class":790},[780,1324,1326],{"class":1325},"sbssI"," 1px",[780,1328,814],{"class":790},[780,1330,1331,1334,1336,1338],{"class":782,"line":846},[780,1332,1333],{"class":1307},"    height",[780,1335,941],{"class":790},[780,1337,1326],{"class":1325},[780,1339,814],{"class":790},[780,1341,1342,1345,1347,1350],{"class":782,"line":867},[780,1343,1344],{"class":1307},"    padding",[780,1346,941],{"class":790},[780,1348,1349],{"class":1325}," 0",[780,1351,814],{"class":790},[780,1353,1354,1357,1359,1362],{"class":782,"line":872},[780,1355,1356],{"class":1307},"    margin",[780,1358,941],{"class":790},[780,1360,1361],{"class":1325}," -1px",[780,1363,814],{"class":790},[780,1365,1366,1369,1371,1374],{"class":782,"line":879},[780,1367,1368],{"class":1307},"    overflow",[780,1370,941],{"class":790},[780,1372,1373],{"class":794}," hidden",[780,1375,814],{"class":790},[780,1377,1378,1381,1383,1386,1389,1392,1395,1397,1399,1401,1403,1405],{"class":782,"line":889},[780,1379,1380],{"class":1307},"    clip",[780,1382,941],{"class":790},[780,1384,1385],{"class":859}," rect",[780,1387,1388],{"class":790},"(",[780,1390,1391],{"class":1325},"0",[780,1393,1394],{"class":790},",",[780,1396,1349],{"class":1325},[780,1398,1394],{"class":790},[780,1400,1349],{"class":1325},[780,1402,1394],{"class":790},[780,1404,1349],{"class":1325},[780,1406,1407],{"class":790},");\n",[780,1409,1410,1413,1415,1418],{"class":782,"line":894},[780,1411,1412],{"class":1307},"    white-space",[780,1414,941],{"class":790},[780,1416,1417],{"class":794}," nowrap",[780,1419,814],{"class":790},[780,1421,1423,1426,1428,1430],{"class":782,"line":1422},10,[780,1424,1425],{"class":1307},"    border-width",[780,1427,941],{"class":790},[780,1429,1349],{"class":1325},[780,1431,814],{"class":790},[780,1433,1435],{"class":782,"line":1434},11,[780,1436,951],{"class":790},[766,1438,1439],{"icon":520,"label":986},[770,1440,1442],{"className":989,"code":1441,"language":991,"meta":776,"style":776},"\u003C!-- Hide text visually but keep accessible to screen readers -->\n\u003Cbutton>\n    \u003Csvg aria-hidden=\"true\">\u003C!-- icon -->\u003C\u002Fsvg>\n    \u003Cspan class=\"_sr-only\">Close menu\u003C\u002Fspan>\n\u003C\u002Fbutton>\n\n\u003C!-- Accessible form label -->\n\u003Clabel class=\"_sr-only\" for=\"search\">Search\u003C\u002Flabel>\n\u003Cinput type=\"search\" id=\"search\" placeholder=\"Search...\">\n",[702,1443,1444,1449,1458,1488,1515,1523,1527,1532,1572],{"__ignoreMap":776},[780,1445,1446],{"class":782,"line":783},[780,1447,1448],{"class":875},"\u003C!-- Hide text visually but keep accessible to screen readers -->\n",[780,1450,1451,1453,1456],{"class":782,"line":817},[780,1452,1003],{"class":790},[780,1454,1455],{"class":1006},"button",[780,1457,1022],{"class":790},[780,1459,1460,1462,1465,1468,1470,1472,1475,1477,1479,1482,1484,1486],{"class":782,"line":840},[780,1461,1027],{"class":790},[780,1463,1464],{"class":1006},"svg",[780,1466,1467],{"class":849}," aria-hidden",[780,1469,856],{"class":790},[780,1471,811],{"class":790},[780,1473,1474],{"class":807},"true",[780,1476,811],{"class":790},[780,1478,1044],{"class":790},[780,1480,1481],{"class":875},"\u003C!-- icon -->",[780,1483,1050],{"class":790},[780,1485,1464],{"class":1006},[780,1487,1022],{"class":790},[780,1489,1490,1492,1494,1496,1498,1500,1502,1504,1506,1509,1511,1513],{"class":782,"line":846},[780,1491,1027],{"class":790},[780,1493,780],{"class":1006},[780,1495,1010],{"class":849},[780,1497,856],{"class":790},[780,1499,811],{"class":790},[780,1501,1300],{"class":807},[780,1503,811],{"class":790},[780,1505,1044],{"class":790},[780,1507,1508],{"class":794},"Close menu",[780,1510,1050],{"class":790},[780,1512,780],{"class":1006},[780,1514,1022],{"class":790},[780,1516,1517,1519,1521],{"class":782,"line":867},[780,1518,1050],{"class":790},[780,1520,1455],{"class":1006},[780,1522,1022],{"class":790},[780,1524,1525],{"class":782,"line":872},[780,1526,843],{"emptyLinePlaceholder":223},[780,1528,1529],{"class":782,"line":879},[780,1530,1531],{"class":875},"\u003C!-- Accessible form label -->\n",[780,1533,1534,1536,1539,1541,1543,1545,1547,1549,1552,1554,1556,1559,1561,1563,1566,1568,1570],{"class":782,"line":889},[780,1535,1003],{"class":790},[780,1537,1538],{"class":1006},"label",[780,1540,1010],{"class":849},[780,1542,856],{"class":790},[780,1544,811],{"class":790},[780,1546,1300],{"class":807},[780,1548,811],{"class":790},[780,1550,1551],{"class":849}," for",[780,1553,856],{"class":790},[780,1555,811],{"class":790},[780,1557,1558],{"class":807},"search",[780,1560,811],{"class":790},[780,1562,1044],{"class":790},[780,1564,1565],{"class":794},"Search",[780,1567,1050],{"class":790},[780,1569,1538],{"class":1006},[780,1571,1022],{"class":790},[780,1573,1574,1576,1579,1582,1584,1586,1588,1590,1593,1595,1597,1599,1601,1604,1606,1608,1611,1613],{"class":782,"line":894},[780,1575,1003],{"class":790},[780,1577,1578],{"class":1006},"input",[780,1580,1581],{"class":849}," type",[780,1583,856],{"class":790},[780,1585,811],{"class":790},[780,1587,1558],{"class":807},[780,1589,811],{"class":790},[780,1591,1592],{"class":849}," id",[780,1594,856],{"class":790},[780,1596,811],{"class":790},[780,1598,1558],{"class":807},[780,1600,811],{"class":790},[780,1602,1603],{"class":849}," placeholder",[780,1605,856],{"class":790},[780,1607,811],{"class":790},[780,1609,1610],{"class":807},"Search...",[780,1612,811],{"class":790},[780,1614,1022],{"class":790},[711,1616,1617],{},"This pattern visually hides the element but keeps it in the accessibility tree so screen readers can announce it.",[1164,1619,1620,1623],{},[692,1621,1622],{},"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.",[707,1625,1627],{"id":1626},"usenotsronlyutility",[702,1628,1629],{},"useNotSrOnlyUtility",[711,1631,757,1632,1635],{},[702,1633,1634],{},"useNotSrOnlyUtility()"," function creates a utility class that undoes the sr-only styles, making content visible again.",[763,1637,1638,1742,1978],{},[766,1639,1640],{"icon":768,"label":290},[770,1641,1643],{"className":772,"code":1642,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useSrOnlyUtility, useNotSrOnlyUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseSrOnlyUtility(s);\nuseNotSrOnlyUtility(s);\n\nexport default s;\n",[702,1644,1645,1665,1690,1694,1708,1712,1720,1728,1732],{"__ignoreMap":776},[780,1646,1647,1649,1651,1653,1655,1657,1659,1661,1663],{"class":782,"line":783},[780,1648,787],{"class":786},[780,1650,791],{"class":790},[780,1652,795],{"class":794},[780,1654,798],{"class":790},[780,1656,801],{"class":786},[780,1658,804],{"class":790},[780,1660,808],{"class":807},[780,1662,811],{"class":790},[780,1664,814],{"class":790},[780,1666,1667,1669,1671,1673,1675,1678,1680,1682,1684,1686,1688],{"class":782,"line":817},[780,1668,787],{"class":786},[780,1670,791],{"class":790},[780,1672,1225],{"class":794},[780,1674,1394],{"class":790},[780,1676,1677],{"class":794}," useNotSrOnlyUtility",[780,1679,798],{"class":790},[780,1681,801],{"class":786},[780,1683,804],{"class":790},[780,1685,833],{"class":807},[780,1687,811],{"class":790},[780,1689,814],{"class":790},[780,1691,1692],{"class":782,"line":840},[780,1693,843],{"emptyLinePlaceholder":223},[780,1695,1696,1698,1700,1702,1704,1706],{"class":782,"line":846},[780,1697,850],{"class":849},[780,1699,853],{"class":794},[780,1701,856],{"class":790},[780,1703,795],{"class":859},[780,1705,862],{"class":794},[780,1707,814],{"class":790},[780,1709,1710],{"class":782,"line":867},[780,1711,843],{"emptyLinePlaceholder":223},[780,1713,1714,1716,1718],{"class":782,"line":872},[780,1715,1181],{"class":859},[780,1717,884],{"class":794},[780,1719,814],{"class":790},[780,1721,1722,1724,1726],{"class":782,"line":879},[780,1723,1629],{"class":859},[780,1725,884],{"class":794},[780,1727,814],{"class":790},[780,1729,1730],{"class":782,"line":889},[780,1731,843],{"emptyLinePlaceholder":223},[780,1733,1734,1736,1738,1740],{"class":782,"line":894},[780,1735,897],{"class":786},[780,1737,900],{"class":786},[780,1739,903],{"class":794},[780,1741,814],{"class":790},[766,1743,1744],{"icon":154,"label":326},[770,1745,1747],{"className":910,"code":1746,"filename":912,"language":913,"meta":776,"style":776},"._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",[702,1748,1749,1757,1767,1777,1787,1797,1807,1817,1843,1853,1863,1867,1872,1882,1894,1905,1916,1927,1938,1950,1961,1973],{"__ignoreMap":776},[780,1750,1751,1753,1755],{"class":782,"line":783},[780,1752,920],{"class":790},[780,1754,1300],{"class":923},[780,1756,933],{"class":790},[780,1758,1759,1761,1763,1765],{"class":782,"line":817},[780,1760,1308],{"class":1307},[780,1762,941],{"class":790},[780,1764,1313],{"class":794},[780,1766,814],{"class":790},[780,1768,1769,1771,1773,1775],{"class":782,"line":840},[780,1770,1320],{"class":1307},[780,1772,941],{"class":790},[780,1774,1326],{"class":1325},[780,1776,814],{"class":790},[780,1778,1779,1781,1783,1785],{"class":782,"line":846},[780,1780,1333],{"class":1307},[780,1782,941],{"class":790},[780,1784,1326],{"class":1325},[780,1786,814],{"class":790},[780,1788,1789,1791,1793,1795],{"class":782,"line":867},[780,1790,1344],{"class":1307},[780,1792,941],{"class":790},[780,1794,1349],{"class":1325},[780,1796,814],{"class":790},[780,1798,1799,1801,1803,1805],{"class":782,"line":872},[780,1800,1356],{"class":1307},[780,1802,941],{"class":790},[780,1804,1361],{"class":1325},[780,1806,814],{"class":790},[780,1808,1809,1811,1813,1815],{"class":782,"line":879},[780,1810,1368],{"class":1307},[780,1812,941],{"class":790},[780,1814,1373],{"class":794},[780,1816,814],{"class":790},[780,1818,1819,1821,1823,1825,1827,1829,1831,1833,1835,1837,1839,1841],{"class":782,"line":889},[780,1820,1380],{"class":1307},[780,1822,941],{"class":790},[780,1824,1385],{"class":859},[780,1826,1388],{"class":790},[780,1828,1391],{"class":1325},[780,1830,1394],{"class":790},[780,1832,1349],{"class":1325},[780,1834,1394],{"class":790},[780,1836,1349],{"class":1325},[780,1838,1394],{"class":790},[780,1840,1349],{"class":1325},[780,1842,1407],{"class":790},[780,1844,1845,1847,1849,1851],{"class":782,"line":894},[780,1846,1412],{"class":1307},[780,1848,941],{"class":790},[780,1850,1417],{"class":794},[780,1852,814],{"class":790},[780,1854,1855,1857,1859,1861],{"class":782,"line":1422},[780,1856,1425],{"class":1307},[780,1858,941],{"class":790},[780,1860,1349],{"class":1325},[780,1862,814],{"class":790},[780,1864,1865],{"class":782,"line":1434},[780,1866,951],{"class":790},[780,1868,1870],{"class":782,"line":1869},12,[780,1871,843],{"emptyLinePlaceholder":223},[780,1873,1875,1877,1880],{"class":782,"line":1874},13,[780,1876,920],{"class":790},[780,1878,1879],{"class":923},"_not-sr-only",[780,1881,933],{"class":790},[780,1883,1885,1887,1889,1892],{"class":782,"line":1884},14,[780,1886,1308],{"class":1307},[780,1888,941],{"class":790},[780,1890,1891],{"class":794}," static",[780,1893,814],{"class":790},[780,1895,1897,1899,1901,1903],{"class":782,"line":1896},15,[780,1898,1320],{"class":1307},[780,1900,941],{"class":790},[780,1902,944],{"class":794},[780,1904,814],{"class":790},[780,1906,1908,1910,1912,1914],{"class":782,"line":1907},16,[780,1909,1333],{"class":1307},[780,1911,941],{"class":790},[780,1913,944],{"class":794},[780,1915,814],{"class":790},[780,1917,1919,1921,1923,1925],{"class":782,"line":1918},17,[780,1920,1344],{"class":1307},[780,1922,941],{"class":790},[780,1924,1349],{"class":1325},[780,1926,814],{"class":790},[780,1928,1930,1932,1934,1936],{"class":782,"line":1929},18,[780,1931,1356],{"class":1307},[780,1933,941],{"class":790},[780,1935,1349],{"class":1325},[780,1937,814],{"class":790},[780,1939,1941,1943,1945,1948],{"class":782,"line":1940},19,[780,1942,1368],{"class":1307},[780,1944,941],{"class":790},[780,1946,1947],{"class":794}," visible",[780,1949,814],{"class":790},[780,1951,1953,1955,1957,1959],{"class":782,"line":1952},20,[780,1954,1380],{"class":1307},[780,1956,941],{"class":790},[780,1958,944],{"class":794},[780,1960,814],{"class":790},[780,1962,1964,1966,1968,1971],{"class":782,"line":1963},21,[780,1965,1412],{"class":1307},[780,1967,941],{"class":790},[780,1969,1970],{"class":794}," normal",[780,1972,814],{"class":790},[780,1974,1976],{"class":782,"line":1975},22,[780,1977,951],{"class":790},[766,1979,1980],{"icon":520,"label":986},[770,1981,1983],{"className":989,"code":1982,"language":991,"meta":776,"style":776},"\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\u002Fa>\n\n\u003C!-- Toggle visibility based on state -->\n\u003Cspan class=\"_sr-only _not-sr-only\">Now visible\u003C\u002Fspan>\n",[702,1984,1985,1990,2021,2026,2034,2038,2043],{"__ignoreMap":776},[780,1986,1987],{"class":782,"line":783},[780,1988,1989],{"class":875},"\u003C!-- Make sr-only content visible again -->\n",[780,1991,1992,1994,1996,1999,2001,2003,2006,2008,2010,2012,2014,2017,2019],{"class":782,"line":817},[780,1993,1003],{"class":790},[780,1995,697],{"class":1006},[780,1997,1998],{"class":849}," href",[780,2000,856],{"class":790},[780,2002,811],{"class":790},[780,2004,2005],{"class":807},"#main",[780,2007,811],{"class":790},[780,2009,1010],{"class":849},[780,2011,856],{"class":790},[780,2013,811],{"class":790},[780,2015,2016],{"class":807},"_sr-only _focus:not-sr-only",[780,2018,811],{"class":790},[780,2020,1022],{"class":790},[780,2022,2023],{"class":782,"line":840},[780,2024,2025],{"class":794},"    Skip to main content\n",[780,2027,2028,2030,2032],{"class":782,"line":846},[780,2029,1050],{"class":790},[780,2031,697],{"class":1006},[780,2033,1022],{"class":790},[780,2035,2036],{"class":782,"line":867},[780,2037,843],{"emptyLinePlaceholder":223},[780,2039,2040],{"class":782,"line":872},[780,2041,2042],{"class":875},"\u003C!-- Toggle visibility based on state -->\n",[780,2044,2045,2047,2049,2051,2053,2055,2058,2060,2062,2065,2067,2069],{"class":782,"line":879},[780,2046,1003],{"class":790},[780,2048,780],{"class":1006},[780,2050,1010],{"class":849},[780,2052,856],{"class":790},[780,2054,811],{"class":790},[780,2056,2057],{"class":807},"_sr-only _not-sr-only",[780,2059,811],{"class":790},[780,2061,1044],{"class":790},[780,2063,2064],{"class":794},"Now visible",[780,2066,1050],{"class":790},[780,2068,780],{"class":1006},[780,2070,1022],{"class":790},[711,2072,2073],{},"This is useful when you want content to be screen-reader-only by default but visible on certain states (like focus).",[707,2075,2077],{"id":2076},"examples","Examples",[1105,2079,2081],{"id":2080},"skip-link-pattern","Skip Link Pattern",[711,2083,2084],{},"A common accessibility pattern is a \"skip to content\" link that's only visible when focused:",[763,2086,2087,2785],{},[766,2088,2089],{"icon":768,"label":290},[770,2090,2092],{"className":772,"code":2091,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useSrOnlyUtility, useNotSrOnlyUtility } from \"@styleframe\u002Ftheme\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref, selector, modifier } = s;\n\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\n\n\u002F\u002F Create accessibility utilities\nuseSrOnlyUtility(s);\nuseNotSrOnlyUtility(s);\n\n\u002F\u002F Create focus modifier\nconst focus = modifier('focus', ({ declarations }) => ({\n    '&:focus': declarations,\n}));\n\n\u002F\u002F 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",[702,2093,2094,2114,2138,2159,2163,2177,2206,2210,2259,2263,2268,2276,2284,2288,2293,2334,2351,2360,2364,2369,2387,2402,2417,2432,2447,2463,2479,2495,2512,2528,2541,2558,2575,2591,2607,2623,2639,2655,2672,2688,2705,2720,2737,2754,2760,2769,2774],{"__ignoreMap":776},[780,2095,2096,2098,2100,2102,2104,2106,2108,2110,2112],{"class":782,"line":783},[780,2097,787],{"class":786},[780,2099,791],{"class":790},[780,2101,795],{"class":794},[780,2103,798],{"class":790},[780,2105,801],{"class":786},[780,2107,804],{"class":790},[780,2109,808],{"class":807},[780,2111,811],{"class":790},[780,2113,814],{"class":790},[780,2115,2116,2118,2120,2122,2124,2126,2128,2130,2132,2134,2136],{"class":782,"line":817},[780,2117,787],{"class":786},[780,2119,791],{"class":790},[780,2121,1225],{"class":794},[780,2123,1394],{"class":790},[780,2125,1677],{"class":794},[780,2127,798],{"class":790},[780,2129,801],{"class":786},[780,2131,804],{"class":790},[780,2133,833],{"class":807},[780,2135,811],{"class":790},[780,2137,814],{"class":790},[780,2139,2140,2142,2144,2147,2149,2151,2153,2155,2157],{"class":782,"line":840},[780,2141,787],{"class":786},[780,2143,791],{"class":790},[780,2145,2146],{"class":794}," useColorDesignTokens",[780,2148,798],{"class":790},[780,2150,801],{"class":786},[780,2152,804],{"class":790},[780,2154,833],{"class":807},[780,2156,811],{"class":790},[780,2158,814],{"class":790},[780,2160,2161],{"class":782,"line":846},[780,2162,843],{"emptyLinePlaceholder":223},[780,2164,2165,2167,2169,2171,2173,2175],{"class":782,"line":867},[780,2166,850],{"class":849},[780,2168,853],{"class":794},[780,2170,856],{"class":790},[780,2172,795],{"class":859},[780,2174,862],{"class":794},[780,2176,814],{"class":790},[780,2178,2179,2181,2183,2186,2188,2191,2193,2196,2199,2202,2204],{"class":782,"line":872},[780,2180,850],{"class":849},[780,2182,791],{"class":790},[780,2184,2185],{"class":794}," ref",[780,2187,1394],{"class":790},[780,2189,2190],{"class":794}," selector",[780,2192,1394],{"class":790},[780,2194,2195],{"class":794}," modifier ",[780,2197,2198],{"class":790},"}",[780,2200,2201],{"class":790}," =",[780,2203,903],{"class":794},[780,2205,814],{"class":790},[780,2207,2208],{"class":782,"line":879},[780,2209,843],{"emptyLinePlaceholder":223},[780,2211,2212,2214,2216,2219,2221,2223,2225,2228,2230,2232,2235,2237,2240,2243,2246,2248,2251,2254,2257],{"class":782,"line":889},[780,2213,850],{"class":849},[780,2215,791],{"class":790},[780,2217,2218],{"class":794}," colorPrimary ",[780,2220,2198],{"class":790},[780,2222,2201],{"class":790},[780,2224,2146],{"class":859},[780,2226,2227],{"class":794},"(s",[780,2229,1394],{"class":790},[780,2231,791],{"class":790},[780,2233,2234],{"class":1006}," primary",[780,2236,941],{"class":790},[780,2238,2239],{"class":790}," '",[780,2241,2242],{"class":807},"#006cff",[780,2244,2245],{"class":790},"'",[780,2247,798],{"class":790},[780,2249,2250],{"class":786}," as",[780,2252,2253],{"class":849}," const",[780,2255,2256],{"class":794},")",[780,2258,814],{"class":790},[780,2260,2261],{"class":782,"line":894},[780,2262,843],{"emptyLinePlaceholder":223},[780,2264,2265],{"class":782,"line":1422},[780,2266,2267],{"class":875},"\u002F\u002F Create accessibility utilities\n",[780,2269,2270,2272,2274],{"class":782,"line":1434},[780,2271,1181],{"class":859},[780,2273,884],{"class":794},[780,2275,814],{"class":790},[780,2277,2278,2280,2282],{"class":782,"line":1869},[780,2279,1629],{"class":859},[780,2281,884],{"class":794},[780,2283,814],{"class":790},[780,2285,2286],{"class":782,"line":1874},[780,2287,843],{"emptyLinePlaceholder":223},[780,2289,2290],{"class":782,"line":1884},[780,2291,2292],{"class":875},"\u002F\u002F Create focus modifier\n",[780,2294,2295,2297,2300,2302,2305,2307,2309,2312,2314,2316,2319,2323,2326,2329,2331],{"class":782,"line":1896},[780,2296,850],{"class":849},[780,2298,2299],{"class":794}," focus ",[780,2301,856],{"class":790},[780,2303,2304],{"class":859}," modifier",[780,2306,1388],{"class":794},[780,2308,2245],{"class":790},[780,2310,2311],{"class":807},"focus",[780,2313,2245],{"class":790},[780,2315,1394],{"class":790},[780,2317,2318],{"class":790}," ({",[780,2320,2322],{"class":2321},"sHdIc"," declarations",[780,2324,2325],{"class":790}," })",[780,2327,2328],{"class":849}," =>",[780,2330,700],{"class":794},[780,2332,2333],{"class":790},"{\n",[780,2335,2336,2339,2342,2344,2346,2348],{"class":782,"line":1907},[780,2337,2338],{"class":790},"    '",[780,2340,2341],{"class":1006},"&:focus",[780,2343,2245],{"class":790},[780,2345,941],{"class":790},[780,2347,2322],{"class":794},[780,2349,2350],{"class":790},",\n",[780,2352,2353,2355,2358],{"class":782,"line":1918},[780,2354,2198],{"class":790},[780,2356,2357],{"class":794},"))",[780,2359,814],{"class":790},[780,2361,2362],{"class":782,"line":1929},[780,2363,843],{"emptyLinePlaceholder":223},[780,2365,2366],{"class":782,"line":1940},[780,2367,2368],{"class":875},"\u002F\u002F Apply not-sr-only on focus using a selector\n",[780,2370,2371,2374,2376,2378,2381,2383,2385],{"class":782,"line":1952},[780,2372,2373],{"class":859},"selector",[780,2375,1388],{"class":794},[780,2377,2245],{"class":790},[780,2379,2380],{"class":807},".skip-link",[780,2382,2245],{"class":790},[780,2384,1394],{"class":790},[780,2386,933],{"class":790},[780,2388,2389,2391,2393,2395,2398,2400],{"class":782,"line":1963},[780,2390,1308],{"class":1006},[780,2392,941],{"class":790},[780,2394,2239],{"class":790},[780,2396,2397],{"class":807},"absolute",[780,2399,2245],{"class":790},[780,2401,2350],{"class":790},[780,2403,2404,2406,2408,2410,2413,2415],{"class":782,"line":1975},[780,2405,1320],{"class":1006},[780,2407,941],{"class":790},[780,2409,2239],{"class":790},[780,2411,2412],{"class":807},"1px",[780,2414,2245],{"class":790},[780,2416,2350],{"class":790},[780,2418,2420,2422,2424,2426,2428,2430],{"class":782,"line":2419},23,[780,2421,1333],{"class":1006},[780,2423,941],{"class":790},[780,2425,2239],{"class":790},[780,2427,2412],{"class":807},[780,2429,2245],{"class":790},[780,2431,2350],{"class":790},[780,2433,2435,2437,2439,2441,2443,2445],{"class":782,"line":2434},24,[780,2436,1344],{"class":1006},[780,2438,941],{"class":790},[780,2440,2239],{"class":790},[780,2442,1391],{"class":807},[780,2444,2245],{"class":790},[780,2446,2350],{"class":790},[780,2448,2450,2452,2454,2456,2459,2461],{"class":782,"line":2449},25,[780,2451,1356],{"class":1006},[780,2453,941],{"class":790},[780,2455,2239],{"class":790},[780,2457,2458],{"class":807},"-1px",[780,2460,2245],{"class":790},[780,2462,2350],{"class":790},[780,2464,2466,2468,2470,2472,2475,2477],{"class":782,"line":2465},26,[780,2467,1368],{"class":1006},[780,2469,941],{"class":790},[780,2471,2239],{"class":790},[780,2473,2474],{"class":807},"hidden",[780,2476,2245],{"class":790},[780,2478,2350],{"class":790},[780,2480,2482,2484,2486,2488,2491,2493],{"class":782,"line":2481},27,[780,2483,1380],{"class":1006},[780,2485,941],{"class":790},[780,2487,2239],{"class":790},[780,2489,2490],{"class":807},"rect(0, 0, 0, 0)",[780,2492,2245],{"class":790},[780,2494,2350],{"class":790},[780,2496,2498,2501,2503,2505,2508,2510],{"class":782,"line":2497},28,[780,2499,2500],{"class":1006},"    whiteSpace",[780,2502,941],{"class":790},[780,2504,2239],{"class":790},[780,2506,2507],{"class":807},"nowrap",[780,2509,2245],{"class":790},[780,2511,2350],{"class":790},[780,2513,2515,2518,2520,2522,2524,2526],{"class":782,"line":2514},29,[780,2516,2517],{"class":1006},"    borderWidth",[780,2519,941],{"class":790},[780,2521,2239],{"class":790},[780,2523,1391],{"class":807},[780,2525,2245],{"class":790},[780,2527,2350],{"class":790},[780,2529,2531,2533,2535,2537,2539],{"class":782,"line":2530},30,[780,2532,2338],{"class":790},[780,2534,2341],{"class":1006},[780,2536,2245],{"class":790},[780,2538,941],{"class":790},[780,2540,933],{"class":790},[780,2542,2544,2547,2549,2551,2554,2556],{"class":782,"line":2543},31,[780,2545,2546],{"class":1006},"        position",[780,2548,941],{"class":790},[780,2550,2239],{"class":790},[780,2552,2553],{"class":807},"fixed",[780,2555,2245],{"class":790},[780,2557,2350],{"class":790},[780,2559,2561,2564,2566,2568,2571,2573],{"class":782,"line":2560},32,[780,2562,2563],{"class":1006},"        top",[780,2565,941],{"class":790},[780,2567,2239],{"class":790},[780,2569,2570],{"class":807},"1rem",[780,2572,2245],{"class":790},[780,2574,2350],{"class":790},[780,2576,2578,2581,2583,2585,2587,2589],{"class":782,"line":2577},33,[780,2579,2580],{"class":1006},"        left",[780,2582,941],{"class":790},[780,2584,2239],{"class":790},[780,2586,2570],{"class":807},[780,2588,2245],{"class":790},[780,2590,2350],{"class":790},[780,2592,2594,2597,2599,2601,2603,2605],{"class":782,"line":2593},34,[780,2595,2596],{"class":1006},"        width",[780,2598,941],{"class":790},[780,2600,2239],{"class":790},[780,2602,930],{"class":807},[780,2604,2245],{"class":790},[780,2606,2350],{"class":790},[780,2608,2610,2613,2615,2617,2619,2621],{"class":782,"line":2609},35,[780,2611,2612],{"class":1006},"        height",[780,2614,941],{"class":790},[780,2616,2239],{"class":790},[780,2618,930],{"class":807},[780,2620,2245],{"class":790},[780,2622,2350],{"class":790},[780,2624,2626,2629,2631,2633,2635,2637],{"class":782,"line":2625},36,[780,2627,2628],{"class":1006},"        padding",[780,2630,941],{"class":790},[780,2632,2239],{"class":790},[780,2634,2570],{"class":807},[780,2636,2245],{"class":790},[780,2638,2350],{"class":790},[780,2640,2642,2645,2647,2649,2651,2653],{"class":782,"line":2641},37,[780,2643,2644],{"class":1006},"        margin",[780,2646,941],{"class":790},[780,2648,2239],{"class":790},[780,2650,1391],{"class":807},[780,2652,2245],{"class":790},[780,2654,2350],{"class":790},[780,2656,2658,2661,2663,2665,2668,2670],{"class":782,"line":2657},38,[780,2659,2660],{"class":1006},"        overflow",[780,2662,941],{"class":790},[780,2664,2239],{"class":790},[780,2666,2667],{"class":807},"visible",[780,2669,2245],{"class":790},[780,2671,2350],{"class":790},[780,2673,2675,2678,2680,2682,2684,2686],{"class":782,"line":2674},39,[780,2676,2677],{"class":1006},"        clip",[780,2679,941],{"class":790},[780,2681,2239],{"class":790},[780,2683,930],{"class":807},[780,2685,2245],{"class":790},[780,2687,2350],{"class":790},[780,2689,2691,2694,2696,2698,2701,2703],{"class":782,"line":2690},40,[780,2692,2693],{"class":1006},"        whiteSpace",[780,2695,941],{"class":790},[780,2697,2239],{"class":790},[780,2699,2700],{"class":807},"normal",[780,2702,2245],{"class":790},[780,2704,2350],{"class":790},[780,2706,2708,2711,2713,2715,2718],{"class":782,"line":2707},41,[780,2709,2710],{"class":1006},"        backgroundColor",[780,2712,941],{"class":790},[780,2714,2185],{"class":859},[780,2716,2717],{"class":794},"(colorPrimary)",[780,2719,2350],{"class":790},[780,2721,2723,2726,2728,2730,2733,2735],{"class":782,"line":2722},42,[780,2724,2725],{"class":1006},"        color",[780,2727,941],{"class":790},[780,2729,2239],{"class":790},[780,2731,2732],{"class":807},"white",[780,2734,2245],{"class":790},[780,2736,2350],{"class":790},[780,2738,2740,2743,2745,2747,2750,2752],{"class":782,"line":2739},43,[780,2741,2742],{"class":1006},"        zIndex",[780,2744,941],{"class":790},[780,2746,2239],{"class":790},[780,2748,2749],{"class":807},"9999",[780,2751,2245],{"class":790},[780,2753,2350],{"class":790},[780,2755,2757],{"class":782,"line":2756},44,[780,2758,2759],{"class":790},"    },\n",[780,2761,2763,2765,2767],{"class":782,"line":2762},45,[780,2764,2198],{"class":790},[780,2766,2256],{"class":794},[780,2768,814],{"class":790},[780,2770,2772],{"class":782,"line":2771},46,[780,2773,843],{"emptyLinePlaceholder":223},[780,2775,2777,2779,2781,2783],{"class":782,"line":2776},47,[780,2778,897],{"class":786},[780,2780,900],{"class":786},[780,2782,903],{"class":794},[780,2784,814],{"class":790},[766,2786,2787],{"icon":154,"label":326},[770,2788,2790],{"className":910,"code":2789,"filename":912,"language":913,"meta":776,"style":776},"._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",[702,2791,2792,2800,2810,2820,2830,2840,2850,2860,2886,2896,2906,2910,2914,2922,2932,2942,2952,2962,2972,2982,2992,3002,3006,3010,3019,3029,3039,3049,3059,3069,3079,3105,3115,3125,3129,3133,3145,3156,3168,3179,3189,3199,3209,3219,3229,3239,3249,3266,3279,3292],{"__ignoreMap":776},[780,2793,2794,2796,2798],{"class":782,"line":783},[780,2795,920],{"class":790},[780,2797,1300],{"class":923},[780,2799,933],{"class":790},[780,2801,2802,2804,2806,2808],{"class":782,"line":817},[780,2803,1308],{"class":1307},[780,2805,941],{"class":790},[780,2807,1313],{"class":794},[780,2809,814],{"class":790},[780,2811,2812,2814,2816,2818],{"class":782,"line":840},[780,2813,1320],{"class":1307},[780,2815,941],{"class":790},[780,2817,1326],{"class":1325},[780,2819,814],{"class":790},[780,2821,2822,2824,2826,2828],{"class":782,"line":846},[780,2823,1333],{"class":1307},[780,2825,941],{"class":790},[780,2827,1326],{"class":1325},[780,2829,814],{"class":790},[780,2831,2832,2834,2836,2838],{"class":782,"line":867},[780,2833,1344],{"class":1307},[780,2835,941],{"class":790},[780,2837,1349],{"class":1325},[780,2839,814],{"class":790},[780,2841,2842,2844,2846,2848],{"class":782,"line":872},[780,2843,1356],{"class":1307},[780,2845,941],{"class":790},[780,2847,1361],{"class":1325},[780,2849,814],{"class":790},[780,2851,2852,2854,2856,2858],{"class":782,"line":879},[780,2853,1368],{"class":1307},[780,2855,941],{"class":790},[780,2857,1373],{"class":794},[780,2859,814],{"class":790},[780,2861,2862,2864,2866,2868,2870,2872,2874,2876,2878,2880,2882,2884],{"class":782,"line":889},[780,2863,1380],{"class":1307},[780,2865,941],{"class":790},[780,2867,1385],{"class":859},[780,2869,1388],{"class":790},[780,2871,1391],{"class":1325},[780,2873,1394],{"class":790},[780,2875,1349],{"class":1325},[780,2877,1394],{"class":790},[780,2879,1349],{"class":1325},[780,2881,1394],{"class":790},[780,2883,1349],{"class":1325},[780,2885,1407],{"class":790},[780,2887,2888,2890,2892,2894],{"class":782,"line":894},[780,2889,1412],{"class":1307},[780,2891,941],{"class":790},[780,2893,1417],{"class":794},[780,2895,814],{"class":790},[780,2897,2898,2900,2902,2904],{"class":782,"line":1422},[780,2899,1425],{"class":1307},[780,2901,941],{"class":790},[780,2903,1349],{"class":1325},[780,2905,814],{"class":790},[780,2907,2908],{"class":782,"line":1434},[780,2909,951],{"class":790},[780,2911,2912],{"class":782,"line":1869},[780,2913,843],{"emptyLinePlaceholder":223},[780,2915,2916,2918,2920],{"class":782,"line":1874},[780,2917,920],{"class":790},[780,2919,1879],{"class":923},[780,2921,933],{"class":790},[780,2923,2924,2926,2928,2930],{"class":782,"line":1884},[780,2925,1308],{"class":1307},[780,2927,941],{"class":790},[780,2929,1891],{"class":794},[780,2931,814],{"class":790},[780,2933,2934,2936,2938,2940],{"class":782,"line":1896},[780,2935,1320],{"class":1307},[780,2937,941],{"class":790},[780,2939,944],{"class":794},[780,2941,814],{"class":790},[780,2943,2944,2946,2948,2950],{"class":782,"line":1907},[780,2945,1333],{"class":1307},[780,2947,941],{"class":790},[780,2949,944],{"class":794},[780,2951,814],{"class":790},[780,2953,2954,2956,2958,2960],{"class":782,"line":1918},[780,2955,1344],{"class":1307},[780,2957,941],{"class":790},[780,2959,1349],{"class":1325},[780,2961,814],{"class":790},[780,2963,2964,2966,2968,2970],{"class":782,"line":1929},[780,2965,1356],{"class":1307},[780,2967,941],{"class":790},[780,2969,1349],{"class":1325},[780,2971,814],{"class":790},[780,2973,2974,2976,2978,2980],{"class":782,"line":1940},[780,2975,1368],{"class":1307},[780,2977,941],{"class":790},[780,2979,1947],{"class":794},[780,2981,814],{"class":790},[780,2983,2984,2986,2988,2990],{"class":782,"line":1952},[780,2985,1380],{"class":1307},[780,2987,941],{"class":790},[780,2989,944],{"class":794},[780,2991,814],{"class":790},[780,2993,2994,2996,2998,3000],{"class":782,"line":1963},[780,2995,1412],{"class":1307},[780,2997,941],{"class":790},[780,2999,1970],{"class":794},[780,3001,814],{"class":790},[780,3003,3004],{"class":782,"line":1975},[780,3005,951],{"class":790},[780,3007,3008],{"class":782,"line":2419},[780,3009,843],{"emptyLinePlaceholder":223},[780,3011,3012,3014,3017],{"class":782,"line":2434},[780,3013,920],{"class":790},[780,3015,3016],{"class":923},"skip-link",[780,3018,933],{"class":790},[780,3020,3021,3023,3025,3027],{"class":782,"line":2449},[780,3022,1308],{"class":1307},[780,3024,941],{"class":790},[780,3026,1313],{"class":794},[780,3028,814],{"class":790},[780,3030,3031,3033,3035,3037],{"class":782,"line":2465},[780,3032,1320],{"class":1307},[780,3034,941],{"class":790},[780,3036,1326],{"class":1325},[780,3038,814],{"class":790},[780,3040,3041,3043,3045,3047],{"class":782,"line":2481},[780,3042,1333],{"class":1307},[780,3044,941],{"class":790},[780,3046,1326],{"class":1325},[780,3048,814],{"class":790},[780,3050,3051,3053,3055,3057],{"class":782,"line":2497},[780,3052,1344],{"class":1307},[780,3054,941],{"class":790},[780,3056,1349],{"class":1325},[780,3058,814],{"class":790},[780,3060,3061,3063,3065,3067],{"class":782,"line":2514},[780,3062,1356],{"class":1307},[780,3064,941],{"class":790},[780,3066,1361],{"class":1325},[780,3068,814],{"class":790},[780,3070,3071,3073,3075,3077],{"class":782,"line":2530},[780,3072,1368],{"class":1307},[780,3074,941],{"class":790},[780,3076,1373],{"class":794},[780,3078,814],{"class":790},[780,3080,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101,3103],{"class":782,"line":2543},[780,3082,1380],{"class":1307},[780,3084,941],{"class":790},[780,3086,1385],{"class":859},[780,3088,1388],{"class":790},[780,3090,1391],{"class":1325},[780,3092,1394],{"class":790},[780,3094,1349],{"class":1325},[780,3096,1394],{"class":790},[780,3098,1349],{"class":1325},[780,3100,1394],{"class":790},[780,3102,1349],{"class":1325},[780,3104,1407],{"class":790},[780,3106,3107,3109,3111,3113],{"class":782,"line":2560},[780,3108,1412],{"class":1307},[780,3110,941],{"class":790},[780,3112,1417],{"class":794},[780,3114,814],{"class":790},[780,3116,3117,3119,3121,3123],{"class":782,"line":2577},[780,3118,1425],{"class":1307},[780,3120,941],{"class":790},[780,3122,1349],{"class":1325},[780,3124,814],{"class":790},[780,3126,3127],{"class":782,"line":2593},[780,3128,951],{"class":790},[780,3130,3131],{"class":782,"line":2609},[780,3132,843],{"emptyLinePlaceholder":223},[780,3134,3135,3137,3139,3141,3143],{"class":782,"line":2625},[780,3136,920],{"class":790},[780,3138,3016],{"class":923},[780,3140,941],{"class":790},[780,3142,2311],{"class":849},[780,3144,933],{"class":790},[780,3146,3147,3149,3151,3154],{"class":782,"line":2641},[780,3148,1308],{"class":1307},[780,3150,941],{"class":790},[780,3152,3153],{"class":794}," fixed",[780,3155,814],{"class":790},[780,3157,3158,3161,3163,3166],{"class":782,"line":2657},[780,3159,3160],{"class":1307},"    top",[780,3162,941],{"class":790},[780,3164,3165],{"class":1325}," 1rem",[780,3167,814],{"class":790},[780,3169,3170,3173,3175,3177],{"class":782,"line":2674},[780,3171,3172],{"class":1307},"    left",[780,3174,941],{"class":790},[780,3176,3165],{"class":1325},[780,3178,814],{"class":790},[780,3180,3181,3183,3185,3187],{"class":782,"line":2690},[780,3182,1320],{"class":1307},[780,3184,941],{"class":790},[780,3186,944],{"class":794},[780,3188,814],{"class":790},[780,3190,3191,3193,3195,3197],{"class":782,"line":2707},[780,3192,1333],{"class":1307},[780,3194,941],{"class":790},[780,3196,944],{"class":794},[780,3198,814],{"class":790},[780,3200,3201,3203,3205,3207],{"class":782,"line":2722},[780,3202,1344],{"class":1307},[780,3204,941],{"class":790},[780,3206,3165],{"class":1325},[780,3208,814],{"class":790},[780,3210,3211,3213,3215,3217],{"class":782,"line":2739},[780,3212,1356],{"class":1307},[780,3214,941],{"class":790},[780,3216,1349],{"class":1325},[780,3218,814],{"class":790},[780,3220,3221,3223,3225,3227],{"class":782,"line":2756},[780,3222,1368],{"class":1307},[780,3224,941],{"class":790},[780,3226,1947],{"class":794},[780,3228,814],{"class":790},[780,3230,3231,3233,3235,3237],{"class":782,"line":2762},[780,3232,1380],{"class":1307},[780,3234,941],{"class":790},[780,3236,944],{"class":794},[780,3238,814],{"class":790},[780,3240,3241,3243,3245,3247],{"class":782,"line":2771},[780,3242,1412],{"class":1307},[780,3244,941],{"class":790},[780,3246,1970],{"class":794},[780,3248,814],{"class":790},[780,3250,3251,3254,3256,3259,3261,3264],{"class":782,"line":2776},[780,3252,3253],{"class":1307},"    background-color",[780,3255,941],{"class":790},[780,3257,3258],{"class":859}," var",[780,3260,1388],{"class":790},[780,3262,3263],{"class":794},"--color--primary",[780,3265,1407],{"class":790},[780,3267,3269,3272,3274,3277],{"class":782,"line":3268},48,[780,3270,3271],{"class":1307},"    color",[780,3273,941],{"class":790},[780,3275,3276],{"class":794}," white",[780,3278,814],{"class":790},[780,3280,3282,3285,3287,3290],{"class":782,"line":3281},49,[780,3283,3284],{"class":1307},"    z-index",[780,3286,941],{"class":790},[780,3288,3289],{"class":1325}," 9999",[780,3291,814],{"class":790},[780,3293,3295],{"class":782,"line":3294},50,[780,3296,951],{"class":790},[1105,3298,3300],{"id":3299},"icon-button-with-accessible-label","Icon Button with Accessible Label",[763,3302,3303,3554],{},[766,3304,3305],{"icon":768,"label":290},[770,3306,3308],{"className":772,"code":3307,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useSrOnlyUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { selector } = s;\n\nuseSrOnlyUtility(s);\n\n\u002F\u002F 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",[702,3309,3310,3330,3350,3354,3368,3385,3389,3397,3401,3406,3423,3439,3455,3470,3485,3500,3516,3532,3540,3544],{"__ignoreMap":776},[780,3311,3312,3314,3316,3318,3320,3322,3324,3326,3328],{"class":782,"line":783},[780,3313,787],{"class":786},[780,3315,791],{"class":790},[780,3317,795],{"class":794},[780,3319,798],{"class":790},[780,3321,801],{"class":786},[780,3323,804],{"class":790},[780,3325,808],{"class":807},[780,3327,811],{"class":790},[780,3329,814],{"class":790},[780,3331,3332,3334,3336,3338,3340,3342,3344,3346,3348],{"class":782,"line":817},[780,3333,787],{"class":786},[780,3335,791],{"class":790},[780,3337,1225],{"class":794},[780,3339,798],{"class":790},[780,3341,801],{"class":786},[780,3343,804],{"class":790},[780,3345,833],{"class":807},[780,3347,811],{"class":790},[780,3349,814],{"class":790},[780,3351,3352],{"class":782,"line":840},[780,3353,843],{"emptyLinePlaceholder":223},[780,3355,3356,3358,3360,3362,3364,3366],{"class":782,"line":846},[780,3357,850],{"class":849},[780,3359,853],{"class":794},[780,3361,856],{"class":790},[780,3363,795],{"class":859},[780,3365,862],{"class":794},[780,3367,814],{"class":790},[780,3369,3370,3372,3374,3377,3379,3381,3383],{"class":782,"line":867},[780,3371,850],{"class":849},[780,3373,791],{"class":790},[780,3375,3376],{"class":794}," selector ",[780,3378,2198],{"class":790},[780,3380,2201],{"class":790},[780,3382,903],{"class":794},[780,3384,814],{"class":790},[780,3386,3387],{"class":782,"line":872},[780,3388,843],{"emptyLinePlaceholder":223},[780,3390,3391,3393,3395],{"class":782,"line":879},[780,3392,1181],{"class":859},[780,3394,884],{"class":794},[780,3396,814],{"class":790},[780,3398,3399],{"class":782,"line":889},[780,3400,843],{"emptyLinePlaceholder":223},[780,3402,3403],{"class":782,"line":894},[780,3404,3405],{"class":875},"\u002F\u002F Style for icon button\n",[780,3407,3408,3410,3412,3414,3417,3419,3421],{"class":782,"line":1422},[780,3409,2373],{"class":859},[780,3411,1388],{"class":794},[780,3413,2245],{"class":790},[780,3415,3416],{"class":807},".icon-button",[780,3418,2245],{"class":790},[780,3420,1394],{"class":790},[780,3422,933],{"class":790},[780,3424,3425,3428,3430,3432,3435,3437],{"class":782,"line":1434},[780,3426,3427],{"class":1006},"    display",[780,3429,941],{"class":790},[780,3431,2239],{"class":790},[780,3433,3434],{"class":807},"inline-flex",[780,3436,2245],{"class":790},[780,3438,2350],{"class":790},[780,3440,3441,3444,3446,3448,3451,3453],{"class":782,"line":1869},[780,3442,3443],{"class":1006},"    alignItems",[780,3445,941],{"class":790},[780,3447,2239],{"class":790},[780,3449,3450],{"class":807},"center",[780,3452,2245],{"class":790},[780,3454,2350],{"class":790},[780,3456,3457,3460,3462,3464,3466,3468],{"class":782,"line":1874},[780,3458,3459],{"class":1006},"    justifyContent",[780,3461,941],{"class":790},[780,3463,2239],{"class":790},[780,3465,3450],{"class":807},[780,3467,2245],{"class":790},[780,3469,2350],{"class":790},[780,3471,3472,3474,3476,3478,3481,3483],{"class":782,"line":1884},[780,3473,1344],{"class":1006},[780,3475,941],{"class":790},[780,3477,2239],{"class":790},[780,3479,3480],{"class":807},"0.5rem",[780,3482,2245],{"class":790},[780,3484,2350],{"class":790},[780,3486,3487,3490,3492,3494,3496,3498],{"class":782,"line":1896},[780,3488,3489],{"class":1006},"    border",[780,3491,941],{"class":790},[780,3493,2239],{"class":790},[780,3495,966],{"class":807},[780,3497,2245],{"class":790},[780,3499,2350],{"class":790},[780,3501,3502,3505,3507,3509,3512,3514],{"class":782,"line":1907},[780,3503,3504],{"class":1006},"    borderRadius",[780,3506,941],{"class":790},[780,3508,2239],{"class":790},[780,3510,3511],{"class":807},"0.25rem",[780,3513,2245],{"class":790},[780,3515,2350],{"class":790},[780,3517,3518,3521,3523,3525,3528,3530],{"class":782,"line":1918},[780,3519,3520],{"class":1006},"    cursor",[780,3522,941],{"class":790},[780,3524,2239],{"class":790},[780,3526,3527],{"class":807},"pointer",[780,3529,2245],{"class":790},[780,3531,2350],{"class":790},[780,3533,3534,3536,3538],{"class":782,"line":1929},[780,3535,2198],{"class":790},[780,3537,2256],{"class":794},[780,3539,814],{"class":790},[780,3541,3542],{"class":782,"line":1940},[780,3543,843],{"emptyLinePlaceholder":223},[780,3545,3546,3548,3550,3552],{"class":782,"line":1952},[780,3547,897],{"class":786},[780,3549,900],{"class":786},[780,3551,903],{"class":794},[780,3553,814],{"class":790},[766,3555,3556],{"icon":154,"label":326},[770,3557,3559],{"className":910,"code":3558,"filename":912,"language":913,"meta":776,"style":776},"._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",[702,3560,3561,3569,3579,3589,3599,3609,3619,3629,3655,3665,3675,3679,3683,3692,3703,3715,3726,3737,3747,3759,3770],{"__ignoreMap":776},[780,3562,3563,3565,3567],{"class":782,"line":783},[780,3564,920],{"class":790},[780,3566,1300],{"class":923},[780,3568,933],{"class":790},[780,3570,3571,3573,3575,3577],{"class":782,"line":817},[780,3572,1308],{"class":1307},[780,3574,941],{"class":790},[780,3576,1313],{"class":794},[780,3578,814],{"class":790},[780,3580,3581,3583,3585,3587],{"class":782,"line":840},[780,3582,1320],{"class":1307},[780,3584,941],{"class":790},[780,3586,1326],{"class":1325},[780,3588,814],{"class":790},[780,3590,3591,3593,3595,3597],{"class":782,"line":846},[780,3592,1333],{"class":1307},[780,3594,941],{"class":790},[780,3596,1326],{"class":1325},[780,3598,814],{"class":790},[780,3600,3601,3603,3605,3607],{"class":782,"line":867},[780,3602,1344],{"class":1307},[780,3604,941],{"class":790},[780,3606,1349],{"class":1325},[780,3608,814],{"class":790},[780,3610,3611,3613,3615,3617],{"class":782,"line":872},[780,3612,1356],{"class":1307},[780,3614,941],{"class":790},[780,3616,1361],{"class":1325},[780,3618,814],{"class":790},[780,3620,3621,3623,3625,3627],{"class":782,"line":879},[780,3622,1368],{"class":1307},[780,3624,941],{"class":790},[780,3626,1373],{"class":794},[780,3628,814],{"class":790},[780,3630,3631,3633,3635,3637,3639,3641,3643,3645,3647,3649,3651,3653],{"class":782,"line":889},[780,3632,1380],{"class":1307},[780,3634,941],{"class":790},[780,3636,1385],{"class":859},[780,3638,1388],{"class":790},[780,3640,1391],{"class":1325},[780,3642,1394],{"class":790},[780,3644,1349],{"class":1325},[780,3646,1394],{"class":790},[780,3648,1349],{"class":1325},[780,3650,1394],{"class":790},[780,3652,1349],{"class":1325},[780,3654,1407],{"class":790},[780,3656,3657,3659,3661,3663],{"class":782,"line":894},[780,3658,1412],{"class":1307},[780,3660,941],{"class":790},[780,3662,1417],{"class":794},[780,3664,814],{"class":790},[780,3666,3667,3669,3671,3673],{"class":782,"line":1422},[780,3668,1425],{"class":1307},[780,3670,941],{"class":790},[780,3672,1349],{"class":1325},[780,3674,814],{"class":790},[780,3676,3677],{"class":782,"line":1434},[780,3678,951],{"class":790},[780,3680,3681],{"class":782,"line":1869},[780,3682,843],{"emptyLinePlaceholder":223},[780,3684,3685,3687,3690],{"class":782,"line":1874},[780,3686,920],{"class":790},[780,3688,3689],{"class":923},"icon-button",[780,3691,933],{"class":790},[780,3693,3694,3696,3698,3701],{"class":782,"line":1884},[780,3695,3427],{"class":1307},[780,3697,941],{"class":790},[780,3699,3700],{"class":794}," inline-flex",[780,3702,814],{"class":790},[780,3704,3705,3708,3710,3713],{"class":782,"line":1896},[780,3706,3707],{"class":1307},"    align-items",[780,3709,941],{"class":790},[780,3711,3712],{"class":794}," center",[780,3714,814],{"class":790},[780,3716,3717,3720,3722,3724],{"class":782,"line":1907},[780,3718,3719],{"class":1307},"    justify-content",[780,3721,941],{"class":790},[780,3723,3712],{"class":794},[780,3725,814],{"class":790},[780,3727,3728,3730,3732,3735],{"class":782,"line":1918},[780,3729,1344],{"class":1307},[780,3731,941],{"class":790},[780,3733,3734],{"class":1325}," 0.5rem",[780,3736,814],{"class":790},[780,3738,3739,3741,3743,3745],{"class":782,"line":1929},[780,3740,3489],{"class":1307},[780,3742,941],{"class":790},[780,3744,977],{"class":794},[780,3746,814],{"class":790},[780,3748,3749,3752,3754,3757],{"class":782,"line":1940},[780,3750,3751],{"class":1307},"    border-radius",[780,3753,941],{"class":790},[780,3755,3756],{"class":1325}," 0.25rem",[780,3758,814],{"class":790},[780,3760,3761,3763,3765,3768],{"class":782,"line":1952},[780,3762,3520],{"class":1307},[780,3764,941],{"class":790},[780,3766,3767],{"class":794}," pointer",[780,3769,814],{"class":790},[780,3771,3772],{"class":782,"line":1963},[780,3773,951],{"class":790},[711,3775,3776],{},"Usage in HTML:",[770,3778,3780],{"className":989,"code":3779,"language":991,"meta":776,"style":776},"\u003Cbutton class=\"icon-button\">\n    \u003Csvg aria-hidden=\"true\" width=\"24\" height=\"24\">\n        \u003Cpath d=\"...\" \u002F>\n    \u003C\u002Fsvg>\n    \u003Cspan class=\"_sr-only\">Delete item\u003C\u002Fspan>\n\u003C\u002Fbutton>\n",[702,3781,3782,3800,3841,3864,3873,3900],{"__ignoreMap":776},[780,3783,3784,3786,3788,3790,3792,3794,3796,3798],{"class":782,"line":783},[780,3785,1003],{"class":790},[780,3787,1455],{"class":1006},[780,3789,1010],{"class":849},[780,3791,856],{"class":790},[780,3793,811],{"class":790},[780,3795,3689],{"class":807},[780,3797,811],{"class":790},[780,3799,1022],{"class":790},[780,3801,3802,3804,3806,3808,3810,3812,3814,3816,3819,3821,3823,3826,3828,3831,3833,3835,3837,3839],{"class":782,"line":817},[780,3803,1027],{"class":790},[780,3805,1464],{"class":1006},[780,3807,1467],{"class":849},[780,3809,856],{"class":790},[780,3811,811],{"class":790},[780,3813,1474],{"class":807},[780,3815,811],{"class":790},[780,3817,3818],{"class":849}," width",[780,3820,856],{"class":790},[780,3822,811],{"class":790},[780,3824,3825],{"class":807},"24",[780,3827,811],{"class":790},[780,3829,3830],{"class":849}," height",[780,3832,856],{"class":790},[780,3834,811],{"class":790},[780,3836,3825],{"class":807},[780,3838,811],{"class":790},[780,3840,1022],{"class":790},[780,3842,3843,3846,3849,3852,3854,3856,3859,3861],{"class":782,"line":840},[780,3844,3845],{"class":790},"        \u003C",[780,3847,3848],{"class":1006},"path",[780,3850,3851],{"class":849}," d",[780,3853,856],{"class":790},[780,3855,811],{"class":790},[780,3857,3858],{"class":807},"...",[780,3860,811],{"class":790},[780,3862,3863],{"class":790}," \u002F>\n",[780,3865,3866,3869,3871],{"class":782,"line":846},[780,3867,3868],{"class":790},"    \u003C\u002F",[780,3870,1464],{"class":1006},[780,3872,1022],{"class":790},[780,3874,3875,3877,3879,3881,3883,3885,3887,3889,3891,3894,3896,3898],{"class":782,"line":867},[780,3876,1027],{"class":790},[780,3878,780],{"class":1006},[780,3880,1010],{"class":849},[780,3882,856],{"class":790},[780,3884,811],{"class":790},[780,3886,1300],{"class":807},[780,3888,811],{"class":790},[780,3890,1044],{"class":790},[780,3892,3893],{"class":794},"Delete item",[780,3895,1050],{"class":790},[780,3897,780],{"class":1006},[780,3899,1022],{"class":790},[780,3901,3902,3904,3906],{"class":782,"line":872},[780,3903,1050],{"class":790},[780,3905,1455],{"class":1006},[780,3907,1022],{"class":790},[707,3909,3911],{"id":3910},"best-practices","Best Practices",[722,3913,3914,3920,3926,3932,3938,3944],{},[725,3915,3916,3919],{},[692,3917,3918],{},"Always provide text alternatives",": Icon buttons, images, and decorative elements should have accessible text",[725,3921,3922,3925],{},[692,3923,3924],{},"Use sr-only for context",": Add screen-reader-only text when visual context isn't available to assistive technology users",[725,3927,3928,3931],{},[692,3929,3930],{},"Test with screen readers",": Verify your sr-only content is announced correctly",[725,3933,3934,3937],{},[692,3935,3936],{},"Be careful with forced-color-adjust",": Only disable it when color is critical to understanding",[725,3939,3940,3943],{},[692,3941,3942],{},"Consider focus states",": Make sr-only content visible on focus when appropriate (like skip links)",[725,3945,3946,3949],{},[692,3947,3948],{},"Don't use display: none",": It removes content from the accessibility tree entirely",[707,3951,3953],{"id":3952},"faq","FAQ",[3955,3956,3957,3974,3986,3994],"accordion",{},[3958,3959,3962,3963,3966,3967,3970,3971,3973],"accordion-item",{"icon":3960,"label":3961},"i-lucide-circle-help","When should I use sr-only vs aria-label?","Use ",[702,3964,3965],{},"sr-only"," when you need full sentences or longer descriptions. Use ",[702,3968,3969],{},"aria-label"," for short, single-word or short-phrase labels. The ",[702,3972,3965],{}," technique is more flexible and can include complex content like instructions.",[3958,3975,3977,3978,3981,3982,3985],{"icon":3960,"label":3976},"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 ",[702,3979,3980],{},"display: none"," or ",[702,3983,3984],{},"visibility: hidden",", which may be treated as hidden content by search engines.",[3958,3987,3989,3990,3993],{"icon":3960,"label":3988},"Can I animate sr-only content when it becomes visible?","Yes, when combined with ",[702,3991,3992],{},"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.",[3958,3995,3997,3998,4000],{"icon":3960,"label":3996},"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 ",[702,3999,966],{}," preserves your original colors, which is useful for elements where specific colors convey meaning.",[4002,4003,4004],"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":776,"searchDepth":817,"depth":817,"links":4006},[4007,4008,4009,4012,4013,4014,4018,4019],{"id":709,"depth":817,"text":78},{"id":716,"depth":817,"text":717},{"id":751,"depth":817,"text":754,"children":4010},[4011],{"id":1107,"depth":840,"text":1108},{"id":1178,"depth":817,"text":1181},{"id":1626,"depth":817,"text":1629},{"id":2076,"depth":817,"text":2077,"children":4015},[4016,4017],{"id":2080,"depth":840,"text":2081},{"id":3299,"depth":840,"text":3300},{"id":3910,"depth":817,"text":3911},{"id":3952,"depth":817,"text":3953},"Create accessibility utilities for screen reader visibility and forced color adjustments with full type safety.","md",null,{},{"title":568,"icon":571},{"title":684,"description":4020},"L709KS92OrYCG9hPBScrZxKOueHqvhOGZcZW4tVGjBg",[4028,4030],{"title":564,"path":565,"stem":566,"description":4029,"icon":173,"children":-1},"Quickly register all utility factories with the useUtilitiesPreset composable for seamless recipe integration and comprehensive utility class generation.",{"title":573,"path":574,"stem":575,"description":4031,"icon":576,"children":-1},"Create animation utilities for continuous motion effects and keyframe-based animations with full type safety.",1781596350612]