[{"data":1,"prerenderedAt":1808},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-elements-focus":682,"-docs-theme-elements-focus-surround":1803},{"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":1796,"extension":1797,"links":1798,"meta":1799,"navigation":1800,"path":347,"seo":1801,"stem":348,"__hash__":1802},"docs_theme\u002Fdocs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus.md","Focus State",{"type":686,"value":687,"toc":1789},"minimark",[688,714,718,729,734,739,812,1142,1146,1255,1259,1740,1744,1785],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Global Preset:"," ",[697,698,699],"code",{},"useFocusState"," is included in the ",[702,703,704],"a",{"href":250},"Global Preset"," (",[697,707,708],{},"useGlobalPreset",") and you can configure it through the preset's ",[697,711,712],{},"focus"," option. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721,722,724,725,728],"p",{},"The ",[697,723,699],{}," composable applies a consistent ",[697,726,727],{},":focus-visible"," outline to all focusable elements. It creates CSS custom properties for the outline color, width, style, and offset, making focus indicators easy to customize per-theme.",[730,731],"story-preview",{":panel":732,"story":733},"true","theme-states-focus--default",[715,735,737],{"id":736},"usefocusstate",[697,738,699],{},[740,741,746],"pre",{"className":742,"code":743,"language":744,"meta":745,"style":745},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useFocusState(\n    s: Styleframe,\n    options?: WithThemes\u003CFocusStateConfig>\n): FocusStateResult\n","ts","",[697,747,748,765,782,803],{"__ignoreMap":745},[749,750,753,757,761],"span",{"class":751,"line":752},"line",1,[749,754,756],{"class":755},"spNyl","function",[749,758,760],{"class":759},"s2Zo4"," useFocusState",[749,762,764],{"class":763},"sMK4o","(\n",[749,766,768,772,775,779],{"class":751,"line":767},2,[749,769,771],{"class":770},"sHdIc","    s",[749,773,774],{"class":763},":",[749,776,778],{"class":777},"sBMFI"," Styleframe",[749,780,781],{"class":763},",\n",[749,783,785,788,791,794,797,800],{"class":751,"line":784},3,[749,786,787],{"class":770},"    options",[749,789,790],{"class":763},"?:",[749,792,793],{"class":777}," WithThemes",[749,795,796],{"class":763},"\u003C",[749,798,799],{"class":777},"FocusStateConfig",[749,801,802],{"class":763},">\n",[749,804,806,809],{"class":751,"line":805},4,[749,807,808],{"class":763},"):",[749,810,811],{"class":777}," FocusStateResult\n",[813,814,815,981],"tabs",{},[816,817,819],"tabs-item",{"icon":818,"label":290},"i-lucide-code",[740,820,823],{"className":742,"code":821,"filename":822,"language":744,"meta":745,"style":745},"import { styleframe } from 'styleframe';\nimport { useFocusState } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    focusOutlineColor,\n    focusOutlineWidth,\n    focusOutlineStyle,\n    focusOutlineOffset,\n} = useFocusState(s);\n\nexport default s;\n","styleframe.config.ts",[697,824,825,857,878,883,901,906,914,922,930,938,946,962,967],{"__ignoreMap":745},[749,826,827,831,834,838,841,844,847,851,854],{"class":751,"line":752},[749,828,830],{"class":829},"s7zQu","import",[749,832,833],{"class":763}," {",[749,835,837],{"class":836},"sTEyZ"," styleframe",[749,839,840],{"class":763}," }",[749,842,843],{"class":829}," from",[749,845,846],{"class":763}," '",[749,848,850],{"class":849},"sfazB","styleframe",[749,852,853],{"class":763},"'",[749,855,856],{"class":763},";\n",[749,858,859,861,863,865,867,869,871,874,876],{"class":751,"line":767},[749,860,830],{"class":829},[749,862,833],{"class":763},[749,864,760],{"class":836},[749,866,840],{"class":763},[749,868,843],{"class":829},[749,870,846],{"class":763},[749,872,873],{"class":849},"@styleframe\u002Ftheme",[749,875,853],{"class":763},[749,877,856],{"class":763},[749,879,880],{"class":751,"line":784},[749,881,882],{"emptyLinePlaceholder":223},"\n",[749,884,885,888,891,894,896,899],{"class":751,"line":805},[749,886,887],{"class":755},"const",[749,889,890],{"class":836}," s ",[749,892,893],{"class":763},"=",[749,895,837],{"class":759},[749,897,898],{"class":836},"()",[749,900,856],{"class":763},[749,902,904],{"class":751,"line":903},5,[749,905,882],{"emptyLinePlaceholder":223},[749,907,909,911],{"class":751,"line":908},6,[749,910,887],{"class":755},[749,912,913],{"class":763}," {\n",[749,915,917,920],{"class":751,"line":916},7,[749,918,919],{"class":836},"    focusOutlineColor",[749,921,781],{"class":763},[749,923,925,928],{"class":751,"line":924},8,[749,926,927],{"class":836},"    focusOutlineWidth",[749,929,781],{"class":763},[749,931,933,936],{"class":751,"line":932},9,[749,934,935],{"class":836},"    focusOutlineStyle",[749,937,781],{"class":763},[749,939,941,944],{"class":751,"line":940},10,[749,942,943],{"class":836},"    focusOutlineOffset",[749,945,781],{"class":763},[749,947,949,952,955,957,960],{"class":751,"line":948},11,[749,950,951],{"class":763},"}",[749,953,954],{"class":763}," =",[749,956,760],{"class":759},[749,958,959],{"class":836},"(s)",[749,961,856],{"class":763},[749,963,965],{"class":751,"line":964},12,[749,966,882],{"emptyLinePlaceholder":223},[749,968,970,973,976,979],{"class":751,"line":969},13,[749,971,972],{"class":829},"export",[749,974,975],{"class":829}," default",[749,977,978],{"class":836}," s",[749,980,856],{"class":763},[816,982,983],{"icon":154,"label":326},[740,984,989],{"className":985,"code":986,"filename":987,"language":988,"meta":745,"style":745},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --focus--outline-color: var(--color--primary);\n    --focus--outline-width: 2px;\n    --focus--outline-style: solid;\n    --focus--outline-offset: 2px;\n}\n\n:focus-visible {\n    outline-color: var(--focus--outline-color);\n    outline-width: var(--focus--outline-width);\n    outline-style: var(--focus--outline-style);\n    outline-offset: var(--focus--outline-offset);\n}\n","styleframe\u002Findex.css","css",[697,990,991,1000,1019,1032,1044,1055,1060,1064,1073,1090,1106,1122,1138],{"__ignoreMap":745},[749,992,993,995,998],{"class":751,"line":752},[749,994,774],{"class":763},[749,996,997],{"class":755},"root",[749,999,913],{"class":763},[749,1001,1002,1005,1007,1010,1013,1016],{"class":751,"line":767},[749,1003,1004],{"class":836},"    --focus--outline-color",[749,1006,774],{"class":763},[749,1008,1009],{"class":759}," var",[749,1011,1012],{"class":763},"(",[749,1014,1015],{"class":836},"--color--primary",[749,1017,1018],{"class":763},");\n",[749,1020,1021,1024,1026,1030],{"class":751,"line":784},[749,1022,1023],{"class":836},"    --focus--outline-width",[749,1025,774],{"class":763},[749,1027,1029],{"class":1028},"sbssI"," 2px",[749,1031,856],{"class":763},[749,1033,1034,1037,1039,1042],{"class":751,"line":805},[749,1035,1036],{"class":836},"    --focus--outline-style",[749,1038,774],{"class":763},[749,1040,1041],{"class":836}," solid",[749,1043,856],{"class":763},[749,1045,1046,1049,1051,1053],{"class":751,"line":903},[749,1047,1048],{"class":836},"    --focus--outline-offset",[749,1050,774],{"class":763},[749,1052,1029],{"class":1028},[749,1054,856],{"class":763},[749,1056,1057],{"class":751,"line":908},[749,1058,1059],{"class":763},"}\n",[749,1061,1062],{"class":751,"line":916},[749,1063,882],{"emptyLinePlaceholder":223},[749,1065,1066,1068,1071],{"class":751,"line":924},[749,1067,774],{"class":763},[749,1069,1070],{"class":755},"focus-visible",[749,1072,913],{"class":763},[749,1074,1075,1079,1081,1083,1085,1088],{"class":751,"line":932},[749,1076,1078],{"class":1077},"sqsOY","    outline-color",[749,1080,774],{"class":763},[749,1082,1009],{"class":759},[749,1084,1012],{"class":763},[749,1086,1087],{"class":836},"--focus--outline-color",[749,1089,1018],{"class":763},[749,1091,1092,1095,1097,1099,1101,1104],{"class":751,"line":940},[749,1093,1094],{"class":1077},"    outline-width",[749,1096,774],{"class":763},[749,1098,1009],{"class":759},[749,1100,1012],{"class":763},[749,1102,1103],{"class":836},"--focus--outline-width",[749,1105,1018],{"class":763},[749,1107,1108,1111,1113,1115,1117,1120],{"class":751,"line":948},[749,1109,1110],{"class":1077},"    outline-style",[749,1112,774],{"class":763},[749,1114,1009],{"class":759},[749,1116,1012],{"class":763},[749,1118,1119],{"class":836},"--focus--outline-style",[749,1121,1018],{"class":763},[749,1123,1124,1127,1129,1131,1133,1136],{"class":751,"line":964},[749,1125,1126],{"class":1077},"    outline-offset",[749,1128,774],{"class":763},[749,1130,1009],{"class":759},[749,1132,1012],{"class":763},[749,1134,1135],{"class":836},"--focus--outline-offset",[749,1137,1018],{"class":763},[749,1139,1140],{"class":751,"line":969},[749,1141,1059],{"class":763},[715,1143,1145],{"id":1144},"default-values","Default Values",[1147,1148,1149,1168],"table",{},[1150,1151,1152],"thead",{},[1153,1154,1155,1159,1162,1165],"tr",{},[1156,1157,1158],"th",{},"Option",[1156,1160,1161],{},"Default",[1156,1163,1164],{},"Variable",[1156,1166,1167],{},"Export",[1169,1170,1171,1193,1214,1235],"tbody",{},[1153,1172,1173,1179,1184,1188],{},[1174,1175,1176],"td",{},[697,1177,1178],{},"outlineColor",[1174,1180,1181],{},[697,1182,1183],{},"\"@color.primary\"",[1174,1185,1186],{},[697,1187,1087],{},[1174,1189,1190],{},[697,1191,1192],{},"focusOutlineColor",[1153,1194,1195,1200,1205,1209],{},[1174,1196,1197],{},[697,1198,1199],{},"outlineWidth",[1174,1201,1202],{},[697,1203,1204],{},"\"2px\"",[1174,1206,1207],{},[697,1208,1103],{},[1174,1210,1211],{},[697,1212,1213],{},"focusOutlineWidth",[1153,1215,1216,1221,1226,1230],{},[1174,1217,1218],{},[697,1219,1220],{},"outlineStyle",[1174,1222,1223],{},[697,1224,1225],{},"\"solid\"",[1174,1227,1228],{},[697,1229,1119],{},[1174,1231,1232],{},[697,1233,1234],{},"focusOutlineStyle",[1153,1236,1237,1242,1246,1250],{},[1174,1238,1239],{},[697,1240,1241],{},"outlineOffset",[1174,1243,1244],{},[697,1245,1204],{},[1174,1247,1248],{},[697,1249,1135],{},[1174,1251,1252],{},[697,1253,1254],{},"focusOutlineOffset",[715,1256,1258],{"id":1257},"custom-values","Custom Values",[813,1260,1261,1429,1603],{},[816,1262,1263],{"icon":818,"label":290},[740,1264,1266],{"className":742,"code":1265,"filename":822,"language":744,"meta":745,"style":745},"import { styleframe } from 'styleframe';\nimport { useFocusState } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { focusOutlineColor, focusOutlineWidth } = useFocusState(s, {\n    outlineColor: '@color.info',\n    outlineWidth: '3px',\n    outlineOffset: '3px',\n});\n\nexport default s;\n",[697,1267,1268,1288,1308,1312,1326,1330,1358,1375,1391,1406,1415,1419],{"__ignoreMap":745},[749,1269,1270,1272,1274,1276,1278,1280,1282,1284,1286],{"class":751,"line":752},[749,1271,830],{"class":829},[749,1273,833],{"class":763},[749,1275,837],{"class":836},[749,1277,840],{"class":763},[749,1279,843],{"class":829},[749,1281,846],{"class":763},[749,1283,850],{"class":849},[749,1285,853],{"class":763},[749,1287,856],{"class":763},[749,1289,1290,1292,1294,1296,1298,1300,1302,1304,1306],{"class":751,"line":767},[749,1291,830],{"class":829},[749,1293,833],{"class":763},[749,1295,760],{"class":836},[749,1297,840],{"class":763},[749,1299,843],{"class":829},[749,1301,846],{"class":763},[749,1303,873],{"class":849},[749,1305,853],{"class":763},[749,1307,856],{"class":763},[749,1309,1310],{"class":751,"line":784},[749,1311,882],{"emptyLinePlaceholder":223},[749,1313,1314,1316,1318,1320,1322,1324],{"class":751,"line":805},[749,1315,887],{"class":755},[749,1317,890],{"class":836},[749,1319,893],{"class":763},[749,1321,837],{"class":759},[749,1323,898],{"class":836},[749,1325,856],{"class":763},[749,1327,1328],{"class":751,"line":903},[749,1329,882],{"emptyLinePlaceholder":223},[749,1331,1332,1334,1336,1339,1342,1345,1347,1349,1351,1354,1356],{"class":751,"line":908},[749,1333,887],{"class":755},[749,1335,833],{"class":763},[749,1337,1338],{"class":836}," focusOutlineColor",[749,1340,1341],{"class":763},",",[749,1343,1344],{"class":836}," focusOutlineWidth ",[749,1346,951],{"class":763},[749,1348,954],{"class":763},[749,1350,760],{"class":759},[749,1352,1353],{"class":836},"(s",[749,1355,1341],{"class":763},[749,1357,913],{"class":763},[749,1359,1360,1364,1366,1368,1371,1373],{"class":751,"line":916},[749,1361,1363],{"class":1362},"swJcz","    outlineColor",[749,1365,774],{"class":763},[749,1367,846],{"class":763},[749,1369,1370],{"class":849},"@color.info",[749,1372,853],{"class":763},[749,1374,781],{"class":763},[749,1376,1377,1380,1382,1384,1387,1389],{"class":751,"line":924},[749,1378,1379],{"class":1362},"    outlineWidth",[749,1381,774],{"class":763},[749,1383,846],{"class":763},[749,1385,1386],{"class":849},"3px",[749,1388,853],{"class":763},[749,1390,781],{"class":763},[749,1392,1393,1396,1398,1400,1402,1404],{"class":751,"line":932},[749,1394,1395],{"class":1362},"    outlineOffset",[749,1397,774],{"class":763},[749,1399,846],{"class":763},[749,1401,1386],{"class":849},[749,1403,853],{"class":763},[749,1405,781],{"class":763},[749,1407,1408,1410,1413],{"class":751,"line":940},[749,1409,951],{"class":763},[749,1411,1412],{"class":836},")",[749,1414,856],{"class":763},[749,1416,1417],{"class":751,"line":948},[749,1418,882],{"emptyLinePlaceholder":223},[749,1420,1421,1423,1425,1427],{"class":751,"line":964},[749,1422,972],{"class":829},[749,1424,975],{"class":829},[749,1426,978],{"class":836},[749,1428,856],{"class":763},[816,1430,1432],{"icon":173,"label":1431},"Via the preset",[740,1433,1435],{"className":742,"code":1434,"filename":822,"language":744,"meta":745,"style":745},"import { styleframe } from 'styleframe';\nimport { useGlobalPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { focus } = useGlobalPreset(s, {\n    focus: {\n        outlineColor: '@color.info',\n        outlineWidth: '3px',\n        outlineOffset: '3px',\n    },\n});\n\nexport default s;\n",[697,1436,1437,1457,1478,1482,1496,1500,1521,1530,1545,1560,1575,1580,1588,1592],{"__ignoreMap":745},[749,1438,1439,1441,1443,1445,1447,1449,1451,1453,1455],{"class":751,"line":752},[749,1440,830],{"class":829},[749,1442,833],{"class":763},[749,1444,837],{"class":836},[749,1446,840],{"class":763},[749,1448,843],{"class":829},[749,1450,846],{"class":763},[749,1452,850],{"class":849},[749,1454,853],{"class":763},[749,1456,856],{"class":763},[749,1458,1459,1461,1463,1466,1468,1470,1472,1474,1476],{"class":751,"line":767},[749,1460,830],{"class":829},[749,1462,833],{"class":763},[749,1464,1465],{"class":836}," useGlobalPreset",[749,1467,840],{"class":763},[749,1469,843],{"class":829},[749,1471,846],{"class":763},[749,1473,873],{"class":849},[749,1475,853],{"class":763},[749,1477,856],{"class":763},[749,1479,1480],{"class":751,"line":784},[749,1481,882],{"emptyLinePlaceholder":223},[749,1483,1484,1486,1488,1490,1492,1494],{"class":751,"line":805},[749,1485,887],{"class":755},[749,1487,890],{"class":836},[749,1489,893],{"class":763},[749,1491,837],{"class":759},[749,1493,898],{"class":836},[749,1495,856],{"class":763},[749,1497,1498],{"class":751,"line":903},[749,1499,882],{"emptyLinePlaceholder":223},[749,1501,1502,1504,1506,1509,1511,1513,1515,1517,1519],{"class":751,"line":908},[749,1503,887],{"class":755},[749,1505,833],{"class":763},[749,1507,1508],{"class":836}," focus ",[749,1510,951],{"class":763},[749,1512,954],{"class":763},[749,1514,1465],{"class":759},[749,1516,1353],{"class":836},[749,1518,1341],{"class":763},[749,1520,913],{"class":763},[749,1522,1523,1526,1528],{"class":751,"line":916},[749,1524,1525],{"class":1362},"    focus",[749,1527,774],{"class":763},[749,1529,913],{"class":763},[749,1531,1532,1535,1537,1539,1541,1543],{"class":751,"line":924},[749,1533,1534],{"class":1362},"        outlineColor",[749,1536,774],{"class":763},[749,1538,846],{"class":763},[749,1540,1370],{"class":849},[749,1542,853],{"class":763},[749,1544,781],{"class":763},[749,1546,1547,1550,1552,1554,1556,1558],{"class":751,"line":932},[749,1548,1549],{"class":1362},"        outlineWidth",[749,1551,774],{"class":763},[749,1553,846],{"class":763},[749,1555,1386],{"class":849},[749,1557,853],{"class":763},[749,1559,781],{"class":763},[749,1561,1562,1565,1567,1569,1571,1573],{"class":751,"line":940},[749,1563,1564],{"class":1362},"        outlineOffset",[749,1566,774],{"class":763},[749,1568,846],{"class":763},[749,1570,1386],{"class":849},[749,1572,853],{"class":763},[749,1574,781],{"class":763},[749,1576,1577],{"class":751,"line":948},[749,1578,1579],{"class":763},"    },\n",[749,1581,1582,1584,1586],{"class":751,"line":964},[749,1583,951],{"class":763},[749,1585,1412],{"class":836},[749,1587,856],{"class":763},[749,1589,1590],{"class":751,"line":969},[749,1591,882],{"emptyLinePlaceholder":223},[749,1593,1595,1597,1599,1601],{"class":751,"line":1594},14,[749,1596,972],{"class":829},[749,1598,975],{"class":829},[749,1600,978],{"class":836},[749,1602,856],{"class":763},[816,1604,1605],{"icon":154,"label":326},[740,1606,1608],{"className":985,"code":1607,"filename":987,"language":988,"meta":745,"style":745},":root {\n    --focus--outline-color: var(--color--info);\n    --focus--outline-width: 3px;\n    --focus--outline-style: solid;\n    --focus--outline-offset: 3px;\n}\n\n:focus-visible {\n    outline-color: var(--focus--outline-color);\n    outline-width: var(--focus--outline-width);\n    outline-style: var(--focus--outline-style);\n    outline-offset: var(--focus--outline-offset);\n}\n",[697,1609,1610,1618,1633,1644,1654,1664,1668,1672,1680,1694,1708,1722,1736],{"__ignoreMap":745},[749,1611,1612,1614,1616],{"class":751,"line":752},[749,1613,774],{"class":763},[749,1615,997],{"class":755},[749,1617,913],{"class":763},[749,1619,1620,1622,1624,1626,1628,1631],{"class":751,"line":767},[749,1621,1004],{"class":836},[749,1623,774],{"class":763},[749,1625,1009],{"class":759},[749,1627,1012],{"class":763},[749,1629,1630],{"class":836},"--color--info",[749,1632,1018],{"class":763},[749,1634,1635,1637,1639,1642],{"class":751,"line":784},[749,1636,1023],{"class":836},[749,1638,774],{"class":763},[749,1640,1641],{"class":1028}," 3px",[749,1643,856],{"class":763},[749,1645,1646,1648,1650,1652],{"class":751,"line":805},[749,1647,1036],{"class":836},[749,1649,774],{"class":763},[749,1651,1041],{"class":836},[749,1653,856],{"class":763},[749,1655,1656,1658,1660,1662],{"class":751,"line":903},[749,1657,1048],{"class":836},[749,1659,774],{"class":763},[749,1661,1641],{"class":1028},[749,1663,856],{"class":763},[749,1665,1666],{"class":751,"line":908},[749,1667,1059],{"class":763},[749,1669,1670],{"class":751,"line":916},[749,1671,882],{"emptyLinePlaceholder":223},[749,1673,1674,1676,1678],{"class":751,"line":924},[749,1675,774],{"class":763},[749,1677,1070],{"class":755},[749,1679,913],{"class":763},[749,1681,1682,1684,1686,1688,1690,1692],{"class":751,"line":932},[749,1683,1078],{"class":1077},[749,1685,774],{"class":763},[749,1687,1009],{"class":759},[749,1689,1012],{"class":763},[749,1691,1087],{"class":836},[749,1693,1018],{"class":763},[749,1695,1696,1698,1700,1702,1704,1706],{"class":751,"line":940},[749,1697,1094],{"class":1077},[749,1699,774],{"class":763},[749,1701,1009],{"class":759},[749,1703,1012],{"class":763},[749,1705,1103],{"class":836},[749,1707,1018],{"class":763},[749,1709,1710,1712,1714,1716,1718,1720],{"class":751,"line":948},[749,1711,1110],{"class":1077},[749,1713,774],{"class":763},[749,1715,1009],{"class":759},[749,1717,1012],{"class":763},[749,1719,1119],{"class":836},[749,1721,1018],{"class":763},[749,1723,1724,1726,1728,1730,1732,1734],{"class":751,"line":964},[749,1725,1126],{"class":1077},[749,1727,774],{"class":763},[749,1729,1009],{"class":759},[749,1731,1012],{"class":763},[749,1733,1135],{"class":836},[749,1735,1018],{"class":763},[749,1737,1738],{"class":751,"line":969},[749,1739,1059],{"class":763},[715,1741,1743],{"id":1742},"best-practices","Best Practices",[1745,1746,1747,1763,1769,1779],"ul",{},[1748,1749,1750,1759,1760,1762],"li",{},[692,1751,1752,1753,1755,1756],{},"Use ",[697,1754,727],{}," over ",[697,1757,1758],{},":focus",": The composable targets ",[697,1761,727],{}," to show outlines only for keyboard navigation, not mouse clicks.",[1748,1764,1765,1768],{},[692,1766,1767],{},"Keep outlines visible",": Use your primary or info color for outlines to meet WCAG 2.1 focus indicator requirements.",[1748,1770,1771,1774,1775,1778],{},[692,1772,1773],{},"Add offset for spacing",": The default ",[697,1776,1777],{},"2px"," offset prevents the outline from overlapping element borders.",[1748,1780,1781,1784],{},[692,1782,1783],{},"Customize per-theme",": Use theme overrides to adjust outline color for dark mode, ensuring focus indicators remain visible against darker backgrounds.",[1786,1787,1788],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":745,"searchDepth":767,"depth":767,"links":1790},[1791,1792,1793,1794,1795],{"id":717,"depth":767,"text":78},{"id":736,"depth":767,"text":699},{"id":1144,"depth":767,"text":1145},{"id":1257,"depth":767,"text":1258},{"id":1742,"depth":767,"text":1743},"Apply consistent focus-visible outline styles across all elements with configurable color, width, style, and offset using the useFocusState composable.","md",null,{},{"title":346,"icon":7},{"title":684,"description":1796},"u9TUMQDUi__Z6x3QtqtwEF8Z3lFmMNTuQXBiWBMKMjo",[1804,1806],{"title":338,"path":339,"stem":340,"description":1805,"icon":7,"children":-1},"Style horizontal rule elements with configurable border color, width, style, and margin using the useHrElement composable.",{"title":350,"path":351,"stem":352,"description":1807,"icon":7,"children":-1},"Style text selection with configurable background and text color using the useSelectionState composable.",1781596349218]