[{"data":1,"prerenderedAt":2473},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-elements":543,"-docs-theme-elements-surround":2468},{"gettingStarted":4,"api":76,"theme":167},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,34,40,66,71],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"to":30,"target":31,"external":32,"icon":33},"Storybook","/docs/getting-started/storybook","docs/getting-started/04.storybook","https://storybook.styleframe.dev","_blank",true,"i-simple-icons-storybook",{"title":35,"path":36,"stem":37,"to":38,"target":31,"external":32,"icon":39},"Playground","/docs/getting-started/playground","docs/getting-started/05.playground","https://play.styleframe.dev","i-simple-icons-playwright",{"title":41,"icon":42,"path":43,"stem":44,"children":45,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/06.tooling",[46,51,56,61],{"title":47,"path":48,"stem":49,"icon":50},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/06.tooling/01.cli","i-lucide-square-terminal",{"title":52,"path":53,"stem":54,"icon":55},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/06.tooling/02.scanner","i-lucide-view",{"title":57,"path":58,"stem":59,"icon":60},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/06.tooling/03.figma-plugin","i-simple-icons-figma",{"title":62,"path":63,"stem":64,"icon":65},"DTCG","/docs/getting-started/tooling/dtcg","docs/getting-started/06.tooling/04.dtcg","i-lucide-square-code",{"title":67,"path":68,"stem":69,"icon":70},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/07.comparisons","i-lucide-file-diff",{"title":72,"path":73,"stem":74,"icon":75},"Licensing","/docs/getting-started/licensing","docs/getting-started/08.licensing","i-lucide-scale",[77],{"title":78,"path":79,"stem":80,"children":81,"icon":7},"API Reference","/docs/api","docs/api/00.index",[82,85,90,95,100,105,110,115,120,125,130,135,150,155,160,165],{"title":83,"path":79,"stem":80,"icon":84},"Overview","i-lucide-book-text",{"title":86,"path":87,"stem":88,"icon":89},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":91,"path":92,"stem":93,"icon":94},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":96,"path":97,"stem":98,"icon":99},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":101,"path":102,"stem":103,"icon":104},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":106,"path":107,"stem":108,"icon":109},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":111,"path":112,"stem":113,"icon":114},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":116,"path":117,"stem":118,"icon":119},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":121,"path":122,"stem":123,"icon":124},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":126,"path":127,"stem":128,"icon":129},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":131,"path":132,"stem":133,"icon":134},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":136,"path":137,"stem":138,"children":139,"icon":149},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[140,141,145],{"title":83,"path":137,"stem":138},{"title":142,"path":143,"stem":144},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":146,"path":147,"stem":148},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":151,"path":152,"stem":153,"icon":154},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":156,"path":157,"stem":158,"icon":159},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":161,"path":162,"stem":163,"icon":164},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":156,"path":157,"stem":166,"icon":159},"docs/api/14.imports",[168,241,335,425,498],{"title":169,"path":170,"stem":171,"children":172,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[173,174,179],{"title":83,"path":170,"stem":171,"icon":84},{"title":175,"path":176,"stem":177,"icon":178},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":151,"icon":154,"defaultOpen":7,"path":180,"stem":181,"children":182,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[183,187,191,195,199,203,207,211,225,229,233,237],{"title":184,"path":185,"stem":186,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":188,"path":189,"stem":190,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":192,"path":193,"stem":194,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":196,"path":197,"stem":198,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":200,"path":201,"stem":202,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":204,"path":205,"stem":206,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":208,"path":209,"stem":210,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":212,"path":213,"stem":214,"children":215,"icon":7,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[216,217,221],{"title":83,"path":213,"stem":214},{"title":218,"path":219,"stem":220},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":222,"path":223,"stem":224},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",{"title":226,"path":227,"stem":228,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":230,"path":231,"stem":232,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":234,"path":235,"stem":236,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":238,"path":239,"stem":240,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":242,"path":243,"stem":244,"children":245,"icon":7},"Elements","/docs/theme/elements","docs/theme/elements/00.index",[246,247,251],{"title":83,"path":243,"stem":244,"icon":84},{"title":248,"path":249,"stem":250,"icon":178},"Preset","/docs/theme/elements/preset","docs/theme/elements/01.preset",{"title":151,"icon":154,"defaultOpen":7,"path":252,"stem":253,"children":254,"page":7},"/docs/theme/elements/composables","docs/theme/elements/02.composables",[255,259,263,267,271,275,279,283,287,291,295,299,303,307,311,315,319,323,327,331],{"title":256,"path":257,"stem":258,"icon":7},"Abbreviation","/docs/theme/elements/composables/abbreviation","docs/theme/elements/02.composables/00.abbreviation",{"title":260,"path":261,"stem":262,"icon":7},"Address","/docs/theme/elements/composables/address","docs/theme/elements/02.composables/01.address",{"title":264,"path":265,"stem":266,"icon":7},"Body","/docs/theme/elements/composables/body","docs/theme/elements/02.composables/02.body",{"title":268,"path":269,"stem":270,"icon":7},"Caption","/docs/theme/elements/composables/caption","docs/theme/elements/02.composables/03.caption",{"title":272,"path":273,"stem":274,"icon":7},"Code","/docs/theme/elements/composables/code","docs/theme/elements/02.composables/04.code",{"title":276,"path":277,"stem":278,"icon":7},"Definition Lists","/docs/theme/elements/composables/definition-lists","docs/theme/elements/02.composables/05.definition-lists",{"title":280,"path":281,"stem":282,"icon":7},"Focus","/docs/theme/elements/composables/focus","docs/theme/elements/02.composables/06.focus",{"title":284,"path":285,"stem":286,"icon":7},"Headings","/docs/theme/elements/composables/headings","docs/theme/elements/02.composables/07.headings",{"title":288,"path":289,"stem":290,"icon":7},"Horizontal Rule","/docs/theme/elements/composables/horizontal-rule","docs/theme/elements/02.composables/08.horizontal-rule",{"title":292,"path":293,"stem":294,"icon":7},"Iframe","/docs/theme/elements/composables/iframe","docs/theme/elements/02.composables/09.iframe",{"title":296,"path":297,"stem":298,"icon":7},"Image","/docs/theme/elements/composables/image","docs/theme/elements/02.composables/10.image",{"title":300,"path":301,"stem":302,"icon":7},"Kbd","/docs/theme/elements/composables/kbd","docs/theme/elements/02.composables/11.kbd",{"title":304,"path":305,"stem":306,"icon":7},"Legend","/docs/theme/elements/composables/legend","docs/theme/elements/02.composables/12.legend",{"title":308,"path":309,"stem":310,"icon":7},"Links","/docs/theme/elements/composables/links","docs/theme/elements/02.composables/13.links",{"title":312,"path":313,"stem":314,"icon":7},"Lists","/docs/theme/elements/composables/lists","docs/theme/elements/02.composables/14.lists",{"title":316,"path":317,"stem":318,"icon":7},"Mark","/docs/theme/elements/composables/mark","docs/theme/elements/02.composables/15.mark",{"title":320,"path":321,"stem":322,"icon":7},"Output","/docs/theme/elements/composables/output","docs/theme/elements/02.composables/16.output",{"title":324,"path":325,"stem":326,"icon":7},"Paragraphs","/docs/theme/elements/composables/paragraphs","docs/theme/elements/02.composables/17.paragraphs",{"title":328,"path":329,"stem":330,"icon":7},"Selection","/docs/theme/elements/composables/selection","docs/theme/elements/02.composables/18.selection",{"title":332,"path":333,"stem":334,"icon":7},"Summary","/docs/theme/elements/composables/summary","docs/theme/elements/02.composables/19.summary",{"title":336,"path":337,"stem":338,"children":339,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[340,341],{"title":83,"path":337,"stem":338,"icon":84},{"title":151,"icon":154,"defaultOpen":32,"path":342,"stem":343,"children":344,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[345,349,353,357,361,365,369,373,377,381,385,389,393,397,401,405,409,413,417,421],{"title":346,"path":347,"stem":348},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":350,"path":351,"stem":352},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":354,"path":355,"stem":356},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":358,"path":359,"stem":360},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":362,"path":363,"stem":364},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":366,"path":367,"stem":368},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":370,"path":371,"stem":372},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":374,"path":375,"stem":376},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":378,"path":379,"stem":380},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":382,"path":383,"stem":384},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":386,"path":387,"stem":388},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":390,"path":391,"stem":392},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":394,"path":395,"stem":396},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":398,"path":399,"stem":400},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":402,"path":403,"stem":404},"Dropdown","/docs/theme/components/composables/dropdown","docs/theme/components/02.composables/14.dropdown",{"title":406,"path":407,"stem":408},"Hamburger Menu","/docs/theme/components/composables/hamburger-menu","docs/theme/components/02.composables/14.hamburger-menu",{"title":410,"path":411,"stem":412},"Breadcrumb","/docs/theme/components/composables/breadcrumb","docs/theme/components/02.composables/15.breadcrumb",{"title":414,"path":415,"stem":416},"Media","/docs/theme/components/composables/media","docs/theme/components/02.composables/15.media",{"title":418,"path":419,"stem":420},"PageHero","/docs/theme/components/composables/page-hero","docs/theme/components/02.composables/15.page-hero",{"title":422,"path":423,"stem":424},"Pagination","/docs/theme/components/composables/pagination","docs/theme/components/02.composables/15.pagination",{"title":121,"path":426,"stem":427,"children":428,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[429,430,433],{"title":83,"path":426,"stem":427,"icon":84},{"title":175,"path":431,"stem":432,"icon":178},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":151,"icon":154,"defaultOpen":7,"path":434,"stem":435,"children":436,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[437,441,445,449,452,456,460,464,468,472,476,479,483,487,491,495],{"title":438,"path":439,"stem":440,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":442,"path":443,"stem":444,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":446,"path":447,"stem":448,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":188,"path":450,"stem":451,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":453,"path":454,"stem":455,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":457,"path":458,"stem":459,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":461,"path":462,"stem":463,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":465,"path":466,"stem":467,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":469,"path":470,"stem":471,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":473,"path":474,"stem":475,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":230,"path":477,"stem":478,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":480,"path":481,"stem":482,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":484,"path":485,"stem":486,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":488,"path":489,"stem":490,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":492,"path":493,"stem":494,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":234,"path":496,"stem":497,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":499,"path":500,"stem":501,"children":502,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[503,504,507],{"title":83,"path":500,"stem":501,"icon":84},{"title":175,"path":505,"stem":506,"icon":178},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":151,"icon":154,"defaultOpen":7,"path":508,"stem":509,"children":510,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[511,515,519,523,527,531,535,539],{"title":512,"path":513,"stem":514,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":516,"path":517,"stem":518,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":520,"path":521,"stem":522,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":524,"path":525,"stem":526,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":528,"path":529,"stem":530,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":532,"path":533,"stem":534,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":536,"path":537,"stem":538,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":540,"path":541,"stem":542,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":544,"title":545,"body":546,"description":2460,"extension":2461,"links":2462,"meta":2463,"navigation":2464,"path":243,"seo":2465,"sitemap":2466,"stem":244,"__hash__":2467},"docs_theme/docs/theme/elements/00.index.md","Elements Overview",{"type":547,"value":548,"toc":2445},"minimark",[549,553,558,561,605,609,615,769,772,778,781,786,789,794,840,1001,1016,1019,1022,1026,1068,1203,1211,1215,1218,1222,1279,1414,1431,1435,1438,1442,1468,1603,1614,1618,1621,1625,1651,1781,1789,1793,1796,1800,1871,1888,1892,2335,2339,2393,2397,2441],[550,551,552],"p",{},"Element composables apply sensible default styles to native HTML elements — body, headings, paragraphs, links, lists, code blocks, and more. Each composable creates CSS custom properties that you can override per-theme, giving you a fully customizable foundation layer without writing raw CSS.",[554,555,557],"h2",{"id":556},"why-use-element-composables","Why Use Element Composables?",[550,559,560],{},"Element composables help you:",[562,563,564,572,583,589,595],"ul",{},[565,566,567,571],"li",{},[568,569,570],"strong",{},"Establish consistent base styles",": Apply typographic and spacing defaults to every HTML element in one place.",[565,573,574,577,578,582],{},[568,575,576],{},"Enable theme-aware overrides",": Each composable supports the ",[579,580,581],"code",{},"WithThemes\u003CConfig>"," pattern, so dark mode or brand themes can override any property.",[565,584,585,588],{},[568,586,587],{},"Customize with CSS variables",": Every style property is backed by a CSS custom property, making runtime overrides trivial.",[565,590,591,594],{},[568,592,593],{},"Avoid CSS resets from scratch",": Get opinionated but sensible defaults for all common HTML elements out of the box.",[565,596,597,600,601,604],{},[568,598,599],{},"Compose incrementally",": Use individual composables for fine-grained control, or ",[579,602,603],{},"useGlobalPreset"," to apply everything at once.",[554,606,608],{"id":607},"quick-start","Quick Start",[550,610,611,612,614],{},"The fastest way to style all HTML elements is with ",[579,613,603],{},":",[616,617,623],"pre",{"className":618,"code":619,"filename":620,"language":621,"meta":622,"style":622},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useGlobalPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { body, heading, link } = useGlobalPreset(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[579,624,625,661,684,690,711,716,750,755],{"__ignoreMap":622},[626,627,630,634,638,642,645,648,651,655,658],"span",{"class":628,"line":629},"line",1,[626,631,633],{"class":632},"s7zQu","import",[626,635,637],{"class":636},"sMK4o"," {",[626,639,641],{"class":640},"sTEyZ"," styleframe",[626,643,644],{"class":636}," }",[626,646,647],{"class":632}," from",[626,649,650],{"class":636}," '",[626,652,654],{"class":653},"sfazB","styleframe",[626,656,657],{"class":636},"'",[626,659,660],{"class":636},";\n",[626,662,664,666,668,671,673,675,677,680,682],{"class":628,"line":663},2,[626,665,633],{"class":632},[626,667,637],{"class":636},[626,669,670],{"class":640}," useGlobalPreset",[626,672,644],{"class":636},[626,674,647],{"class":632},[626,676,650],{"class":636},[626,678,679],{"class":653},"@styleframe/theme",[626,681,657],{"class":636},[626,683,660],{"class":636},[626,685,687],{"class":628,"line":686},3,[626,688,689],{"emptyLinePlaceholder":32},"\n",[626,691,693,697,700,703,706,709],{"class":628,"line":692},4,[626,694,696],{"class":695},"spNyl","const",[626,698,699],{"class":640}," s ",[626,701,702],{"class":636},"=",[626,704,641],{"class":705},"s2Zo4",[626,707,708],{"class":640},"()",[626,710,660],{"class":636},[626,712,714],{"class":628,"line":713},5,[626,715,689],{"emptyLinePlaceholder":32},[626,717,719,721,723,726,729,732,734,737,740,743,745,748],{"class":628,"line":718},6,[626,720,696],{"class":695},[626,722,637],{"class":636},[626,724,725],{"class":640}," body",[626,727,728],{"class":636},",",[626,730,731],{"class":640}," heading",[626,733,728],{"class":636},[626,735,736],{"class":640}," link ",[626,738,739],{"class":636},"}",[626,741,742],{"class":636}," =",[626,744,670],{"class":705},[626,746,747],{"class":640},"(s)",[626,749,660],{"class":636},[626,751,753],{"class":628,"line":752},7,[626,754,689],{"emptyLinePlaceholder":32},[626,756,758,761,764,767],{"class":628,"line":757},8,[626,759,760],{"class":632},"export",[626,762,763],{"class":632}," default",[626,765,766],{"class":640}," s",[626,768,660],{"class":636},[550,770,771],{},"This single call registers base styles for all HTML elements, focus outlines, and text selection — with sensible defaults that reference your design tokens.",[550,773,774],{},[775,776,777],"a",{"href":249},"Learn more about the Global Preset →",[554,779,151],{"id":780},"composables",[782,783,785],"h3",{"id":784},"text-content","Text Content",[550,787,788],{},"Style the core text elements that make up the majority of page content.",[550,790,791],{},[568,792,793],{},"Available composables:",[562,795,796,808,824,832],{},[565,797,798,803,804,807],{},[568,799,800],{},[579,801,802],{},"useBodyElement()",": Set the base font family, size, line height, color, and background for the ",[579,805,806],{},"body"," element",[565,809,810,815,816,819,820,823],{},[568,811,812],{},[579,813,814],{},"useHeadingElement()",": Configure typography for ",[579,817,818],{},"h1"," through ",[579,821,822],{},"h6"," with per-level font sizes",[565,825,826,831],{},[568,827,828],{},[579,829,830],{},"useParagraphElement()",": Control paragraph spacing with top and bottom margins",[565,833,834,839],{},[568,835,836],{},[579,837,838],{},"useLinkElement()",": Define link colors and text decoration, including hover states",[616,841,843],{"className":618,"code":842,"filename":620,"language":621,"meta":622,"style":622},"import { styleframe } from 'styleframe';\nimport { useBodyElement, useHeadingElement, useLinkElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { bodyColor, bodyBackground } = useBodyElement(s);\nconst { headingH1FontSize } = useHeadingElement(s);\nconst { linkColor, linkHoverColor } = useLinkElement(s);\n\nexport default s;\n",[579,844,845,865,896,900,914,918,942,961,985,990],{"__ignoreMap":622},[626,846,847,849,851,853,855,857,859,861,863],{"class":628,"line":629},[626,848,633],{"class":632},[626,850,637],{"class":636},[626,852,641],{"class":640},[626,854,644],{"class":636},[626,856,647],{"class":632},[626,858,650],{"class":636},[626,860,654],{"class":653},[626,862,657],{"class":636},[626,864,660],{"class":636},[626,866,867,869,871,874,876,879,881,884,886,888,890,892,894],{"class":628,"line":663},[626,868,633],{"class":632},[626,870,637],{"class":636},[626,872,873],{"class":640}," useBodyElement",[626,875,728],{"class":636},[626,877,878],{"class":640}," useHeadingElement",[626,880,728],{"class":636},[626,882,883],{"class":640}," useLinkElement",[626,885,644],{"class":636},[626,887,647],{"class":632},[626,889,650],{"class":636},[626,891,679],{"class":653},[626,893,657],{"class":636},[626,895,660],{"class":636},[626,897,898],{"class":628,"line":686},[626,899,689],{"emptyLinePlaceholder":32},[626,901,902,904,906,908,910,912],{"class":628,"line":692},[626,903,696],{"class":695},[626,905,699],{"class":640},[626,907,702],{"class":636},[626,909,641],{"class":705},[626,911,708],{"class":640},[626,913,660],{"class":636},[626,915,916],{"class":628,"line":713},[626,917,689],{"emptyLinePlaceholder":32},[626,919,920,922,924,927,929,932,934,936,938,940],{"class":628,"line":718},[626,921,696],{"class":695},[626,923,637],{"class":636},[626,925,926],{"class":640}," bodyColor",[626,928,728],{"class":636},[626,930,931],{"class":640}," bodyBackground ",[626,933,739],{"class":636},[626,935,742],{"class":636},[626,937,873],{"class":705},[626,939,747],{"class":640},[626,941,660],{"class":636},[626,943,944,946,948,951,953,955,957,959],{"class":628,"line":752},[626,945,696],{"class":695},[626,947,637],{"class":636},[626,949,950],{"class":640}," headingH1FontSize ",[626,952,739],{"class":636},[626,954,742],{"class":636},[626,956,878],{"class":705},[626,958,747],{"class":640},[626,960,660],{"class":636},[626,962,963,965,967,970,972,975,977,979,981,983],{"class":628,"line":757},[626,964,696],{"class":695},[626,966,637],{"class":636},[626,968,969],{"class":640}," linkColor",[626,971,728],{"class":636},[626,973,974],{"class":640}," linkHoverColor ",[626,976,739],{"class":636},[626,978,742],{"class":636},[626,980,883],{"class":705},[626,982,747],{"class":640},[626,984,660],{"class":636},[626,986,988],{"class":628,"line":987},9,[626,989,689],{"emptyLinePlaceholder":32},[626,991,993,995,997,999],{"class":628,"line":992},10,[626,994,760],{"class":632},[626,996,763],{"class":632},[626,998,766],{"class":640},[626,1000,660],{"class":636},[550,1002,1003,1006,1007,1006,1010,1006,1013],{},[775,1004,1005],{"href":265},"Learn more about Body →"," · ",[775,1008,1009],{"href":285},"Headings →",[775,1011,1012],{"href":325},"Paragraphs →",[775,1014,1015],{"href":309},"Links →",[782,1017,312],{"id":1018},"lists",[550,1020,1021],{},"Style ordered, unordered, and definition lists with consistent spacing.",[550,1023,1024],{},[568,1025,793],{},[562,1027,1028,1036,1044,1052,1060],{},[565,1029,1030,1035],{},[568,1031,1032],{},[579,1033,1034],{},"useOlElement()",": Configure ordered list margin and padding",[565,1037,1038,1043],{},[568,1039,1040],{},[579,1041,1042],{},"useUlElement()",": Configure unordered list margin and padding",[565,1045,1046,1051],{},[568,1047,1048],{},[579,1049,1050],{},"useDlElement()",": Set definition list bottom margin",[565,1053,1054,1059],{},[568,1055,1056],{},[579,1057,1058],{},"useDtElement()",": Control definition term font weight",[565,1061,1062,1067],{},[568,1063,1064],{},[579,1065,1066],{},"useDdElement()",": Set definition description margins",[616,1069,1071],{"className":618,"code":1070,"filename":620,"language":621,"meta":622,"style":622},"import { styleframe } from 'styleframe';\nimport { useOlElement, useUlElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { olMarginBottom, olPaddingLeft } = useOlElement(s);\nconst { ulMarginBottom, ulPaddingLeft } = useUlElement(s);\n\nexport default s;\n",[579,1072,1073,1093,1119,1123,1137,1141,1165,1189,1193],{"__ignoreMap":622},[626,1074,1075,1077,1079,1081,1083,1085,1087,1089,1091],{"class":628,"line":629},[626,1076,633],{"class":632},[626,1078,637],{"class":636},[626,1080,641],{"class":640},[626,1082,644],{"class":636},[626,1084,647],{"class":632},[626,1086,650],{"class":636},[626,1088,654],{"class":653},[626,1090,657],{"class":636},[626,1092,660],{"class":636},[626,1094,1095,1097,1099,1102,1104,1107,1109,1111,1113,1115,1117],{"class":628,"line":663},[626,1096,633],{"class":632},[626,1098,637],{"class":636},[626,1100,1101],{"class":640}," useOlElement",[626,1103,728],{"class":636},[626,1105,1106],{"class":640}," useUlElement",[626,1108,644],{"class":636},[626,1110,647],{"class":632},[626,1112,650],{"class":636},[626,1114,679],{"class":653},[626,1116,657],{"class":636},[626,1118,660],{"class":636},[626,1120,1121],{"class":628,"line":686},[626,1122,689],{"emptyLinePlaceholder":32},[626,1124,1125,1127,1129,1131,1133,1135],{"class":628,"line":692},[626,1126,696],{"class":695},[626,1128,699],{"class":640},[626,1130,702],{"class":636},[626,1132,641],{"class":705},[626,1134,708],{"class":640},[626,1136,660],{"class":636},[626,1138,1139],{"class":628,"line":713},[626,1140,689],{"emptyLinePlaceholder":32},[626,1142,1143,1145,1147,1150,1152,1155,1157,1159,1161,1163],{"class":628,"line":718},[626,1144,696],{"class":695},[626,1146,637],{"class":636},[626,1148,1149],{"class":640}," olMarginBottom",[626,1151,728],{"class":636},[626,1153,1154],{"class":640}," olPaddingLeft ",[626,1156,739],{"class":636},[626,1158,742],{"class":636},[626,1160,1101],{"class":705},[626,1162,747],{"class":640},[626,1164,660],{"class":636},[626,1166,1167,1169,1171,1174,1176,1179,1181,1183,1185,1187],{"class":628,"line":752},[626,1168,696],{"class":695},[626,1170,637],{"class":636},[626,1172,1173],{"class":640}," ulMarginBottom",[626,1175,728],{"class":636},[626,1177,1178],{"class":640}," ulPaddingLeft ",[626,1180,739],{"class":636},[626,1182,742],{"class":636},[626,1184,1106],{"class":705},[626,1186,747],{"class":640},[626,1188,660],{"class":636},[626,1190,1191],{"class":628,"line":757},[626,1192,689],{"emptyLinePlaceholder":32},[626,1194,1195,1197,1199,1201],{"class":628,"line":987},[626,1196,760],{"class":632},[626,1198,763],{"class":632},[626,1200,766],{"class":640},[626,1202,660],{"class":636},[550,1204,1205,1006,1208],{},[775,1206,1207],{"href":313},"Learn more about Lists →",[775,1209,1210],{"href":277},"Definition Lists →",[782,1212,1214],{"id":1213},"code-inline-text","Code & Inline Text",[550,1216,1217],{},"Style code blocks, keyboard input, sample output, abbreviations, and highlighted text.",[550,1219,1220],{},[568,1221,793],{},[562,1223,1224,1239,1247,1255,1263,1271],{},[565,1225,1226,1231,1232,1234,1235,1238],{},[568,1227,1228],{},[579,1229,1230],{},"useCodeElement()",": Set font family and size for inline ",[579,1233,579],{}," and ",[579,1236,1237],{},"samp"," elements",[565,1240,1241,1246],{},[568,1242,1243],{},[579,1244,1245],{},"usePreElement()",": Configure preformatted text blocks with scroll overflow",[565,1248,1249,1254],{},[568,1250,1251],{},[579,1252,1253],{},"useKbdElement()",": Style keyboard input elements with background, color, and padding",[565,1256,1257,1262],{},[568,1258,1259],{},[579,1260,1261],{},"useSampElement()",": Set the font family for sample output elements",[565,1264,1265,1270],{},[568,1266,1267],{},[579,1268,1269],{},"useAbbrElement()",": Configure abbreviation cursor and text decoration",[565,1272,1273,1278],{},[568,1274,1275],{},[579,1276,1277],{},"useMarkElement()",": Style highlighted text with background color and padding",[616,1280,1282],{"className":618,"code":1281,"filename":620,"language":621,"meta":622,"style":622},"import { styleframe } from 'styleframe';\nimport { useCodeElement, useKbdElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { codeFontFamily, codeFontSize } = useCodeElement(s);\nconst { kbdBackground, kbdColor } = useKbdElement(s);\n\nexport default s;\n",[579,1283,1284,1304,1330,1334,1348,1352,1376,1400,1404],{"__ignoreMap":622},[626,1285,1286,1288,1290,1292,1294,1296,1298,1300,1302],{"class":628,"line":629},[626,1287,633],{"class":632},[626,1289,637],{"class":636},[626,1291,641],{"class":640},[626,1293,644],{"class":636},[626,1295,647],{"class":632},[626,1297,650],{"class":636},[626,1299,654],{"class":653},[626,1301,657],{"class":636},[626,1303,660],{"class":636},[626,1305,1306,1308,1310,1313,1315,1318,1320,1322,1324,1326,1328],{"class":628,"line":663},[626,1307,633],{"class":632},[626,1309,637],{"class":636},[626,1311,1312],{"class":640}," useCodeElement",[626,1314,728],{"class":636},[626,1316,1317],{"class":640}," useKbdElement",[626,1319,644],{"class":636},[626,1321,647],{"class":632},[626,1323,650],{"class":636},[626,1325,679],{"class":653},[626,1327,657],{"class":636},[626,1329,660],{"class":636},[626,1331,1332],{"class":628,"line":686},[626,1333,689],{"emptyLinePlaceholder":32},[626,1335,1336,1338,1340,1342,1344,1346],{"class":628,"line":692},[626,1337,696],{"class":695},[626,1339,699],{"class":640},[626,1341,702],{"class":636},[626,1343,641],{"class":705},[626,1345,708],{"class":640},[626,1347,660],{"class":636},[626,1349,1350],{"class":628,"line":713},[626,1351,689],{"emptyLinePlaceholder":32},[626,1353,1354,1356,1358,1361,1363,1366,1368,1370,1372,1374],{"class":628,"line":718},[626,1355,696],{"class":695},[626,1357,637],{"class":636},[626,1359,1360],{"class":640}," codeFontFamily",[626,1362,728],{"class":636},[626,1364,1365],{"class":640}," codeFontSize ",[626,1367,739],{"class":636},[626,1369,742],{"class":636},[626,1371,1312],{"class":705},[626,1373,747],{"class":640},[626,1375,660],{"class":636},[626,1377,1378,1380,1382,1385,1387,1390,1392,1394,1396,1398],{"class":628,"line":752},[626,1379,696],{"class":695},[626,1381,637],{"class":636},[626,1383,1384],{"class":640}," kbdBackground",[626,1386,728],{"class":636},[626,1388,1389],{"class":640}," kbdColor ",[626,1391,739],{"class":636},[626,1393,742],{"class":636},[626,1395,1317],{"class":705},[626,1397,747],{"class":640},[626,1399,660],{"class":636},[626,1401,1402],{"class":628,"line":757},[626,1403,689],{"emptyLinePlaceholder":32},[626,1405,1406,1408,1410,1412],{"class":628,"line":987},[626,1407,760],{"class":632},[626,1409,763],{"class":632},[626,1411,766],{"class":640},[626,1413,660],{"class":636},[550,1415,1416,1006,1419,1006,1422,1006,1425,1006,1428],{},[775,1417,1418],{"href":273},"Learn more about Code →",[775,1420,1421],{"href":301},"Kbd →",[775,1423,1424],{"href":317},"Mark →",[775,1426,1427],{"href":257},"Abbreviation →",[775,1429,1430],{"href":321},"Sample Output →",[782,1432,1434],{"id":1433},"structural-elements","Structural Elements",[550,1436,1437],{},"Style dividers, table captions, addresses, and other structural HTML elements.",[550,1439,1440],{},[568,1441,793],{},[562,1443,1444,1452,1460],{},[565,1445,1446,1451],{},[568,1447,1448],{},[579,1449,1450],{},"useHrElement()",": Configure horizontal rule border style, color, and margin",[565,1453,1454,1459],{},[568,1455,1456],{},[579,1457,1458],{},"useCaptionElement()",": Set table caption color, padding, and text alignment",[565,1461,1462,1467],{},[568,1463,1464],{},[579,1465,1466],{},"useAddressElement()",": Control address element margins and font style",[616,1469,1471],{"className":618,"code":1470,"filename":620,"language":621,"meta":622,"style":622},"import { styleframe } from 'styleframe';\nimport { useHrElement, useCaptionElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { hrBorderColor, hrMargin } = useHrElement(s);\nconst { captionColor, captionTextAlign } = useCaptionElement(s);\n\nexport default s;\n",[579,1472,1473,1493,1519,1523,1537,1541,1565,1589,1593],{"__ignoreMap":622},[626,1474,1475,1477,1479,1481,1483,1485,1487,1489,1491],{"class":628,"line":629},[626,1476,633],{"class":632},[626,1478,637],{"class":636},[626,1480,641],{"class":640},[626,1482,644],{"class":636},[626,1484,647],{"class":632},[626,1486,650],{"class":636},[626,1488,654],{"class":653},[626,1490,657],{"class":636},[626,1492,660],{"class":636},[626,1494,1495,1497,1499,1502,1504,1507,1509,1511,1513,1515,1517],{"class":628,"line":663},[626,1496,633],{"class":632},[626,1498,637],{"class":636},[626,1500,1501],{"class":640}," useHrElement",[626,1503,728],{"class":636},[626,1505,1506],{"class":640}," useCaptionElement",[626,1508,644],{"class":636},[626,1510,647],{"class":632},[626,1512,650],{"class":636},[626,1514,679],{"class":653},[626,1516,657],{"class":636},[626,1518,660],{"class":636},[626,1520,1521],{"class":628,"line":686},[626,1522,689],{"emptyLinePlaceholder":32},[626,1524,1525,1527,1529,1531,1533,1535],{"class":628,"line":692},[626,1526,696],{"class":695},[626,1528,699],{"class":640},[626,1530,702],{"class":636},[626,1532,641],{"class":705},[626,1534,708],{"class":640},[626,1536,660],{"class":636},[626,1538,1539],{"class":628,"line":713},[626,1540,689],{"emptyLinePlaceholder":32},[626,1542,1543,1545,1547,1550,1552,1555,1557,1559,1561,1563],{"class":628,"line":718},[626,1544,696],{"class":695},[626,1546,637],{"class":636},[626,1548,1549],{"class":640}," hrBorderColor",[626,1551,728],{"class":636},[626,1553,1554],{"class":640}," hrMargin ",[626,1556,739],{"class":636},[626,1558,742],{"class":636},[626,1560,1501],{"class":705},[626,1562,747],{"class":640},[626,1564,660],{"class":636},[626,1566,1567,1569,1571,1574,1576,1579,1581,1583,1585,1587],{"class":628,"line":752},[626,1568,696],{"class":695},[626,1570,637],{"class":636},[626,1572,1573],{"class":640}," captionColor",[626,1575,728],{"class":636},[626,1577,1578],{"class":640}," captionTextAlign ",[626,1580,739],{"class":636},[626,1582,742],{"class":636},[626,1584,1506],{"class":705},[626,1586,747],{"class":640},[626,1588,660],{"class":636},[626,1590,1591],{"class":628,"line":757},[626,1592,689],{"emptyLinePlaceholder":32},[626,1594,1595,1597,1599,1601],{"class":628,"line":987},[626,1596,760],{"class":632},[626,1598,763],{"class":632},[626,1600,766],{"class":640},[626,1602,660],{"class":636},[550,1604,1605,1006,1608,1006,1611],{},[775,1606,1607],{"href":289},"Learn more about Horizontal Rule →",[775,1609,1610],{"href":269},"Caption →",[775,1612,1613],{"href":261},"Address →",[782,1615,1617],{"id":1616},"global-states","Global States",[550,1619,1620],{},"Apply consistent focus and selection styles across all elements.",[550,1622,1623],{},[568,1624,793],{},[562,1626,1627,1639],{},[565,1628,1629,1634,1635,1638],{},[568,1630,1631],{},[579,1632,1633],{},"useFocusState()",": Define the ",[579,1636,1637],{},":focus-visible"," outline color, width, style, and offset",[565,1640,1641,1646,1647,1650],{},[568,1642,1643],{},[579,1644,1645],{},"useSelectionState()",": Set ",[579,1648,1649],{},"::selection"," background and text color",[616,1652,1654],{"className":618,"code":1653,"filename":620,"language":621,"meta":622,"style":622},"import { styleframe } from 'styleframe';\nimport { useFocusState, useSelectionState } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { focusOutlineColor } = useFocusState(s);\nconst { selectionBackground, selectionColor } = useSelectionState(s);\n\nexport default s;\n",[579,1655,1656,1676,1702,1706,1720,1724,1743,1767,1771],{"__ignoreMap":622},[626,1657,1658,1660,1662,1664,1666,1668,1670,1672,1674],{"class":628,"line":629},[626,1659,633],{"class":632},[626,1661,637],{"class":636},[626,1663,641],{"class":640},[626,1665,644],{"class":636},[626,1667,647],{"class":632},[626,1669,650],{"class":636},[626,1671,654],{"class":653},[626,1673,657],{"class":636},[626,1675,660],{"class":636},[626,1677,1678,1680,1682,1685,1687,1690,1692,1694,1696,1698,1700],{"class":628,"line":663},[626,1679,633],{"class":632},[626,1681,637],{"class":636},[626,1683,1684],{"class":640}," useFocusState",[626,1686,728],{"class":636},[626,1688,1689],{"class":640}," useSelectionState",[626,1691,644],{"class":636},[626,1693,647],{"class":632},[626,1695,650],{"class":636},[626,1697,679],{"class":653},[626,1699,657],{"class":636},[626,1701,660],{"class":636},[626,1703,1704],{"class":628,"line":686},[626,1705,689],{"emptyLinePlaceholder":32},[626,1707,1708,1710,1712,1714,1716,1718],{"class":628,"line":692},[626,1709,696],{"class":695},[626,1711,699],{"class":640},[626,1713,702],{"class":636},[626,1715,641],{"class":705},[626,1717,708],{"class":640},[626,1719,660],{"class":636},[626,1721,1722],{"class":628,"line":713},[626,1723,689],{"emptyLinePlaceholder":32},[626,1725,1726,1728,1730,1733,1735,1737,1739,1741],{"class":628,"line":718},[626,1727,696],{"class":695},[626,1729,637],{"class":636},[626,1731,1732],{"class":640}," focusOutlineColor ",[626,1734,739],{"class":636},[626,1736,742],{"class":636},[626,1738,1684],{"class":705},[626,1740,747],{"class":640},[626,1742,660],{"class":636},[626,1744,1745,1747,1749,1752,1754,1757,1759,1761,1763,1765],{"class":628,"line":752},[626,1746,696],{"class":695},[626,1748,637],{"class":636},[626,1750,1751],{"class":640}," selectionBackground",[626,1753,728],{"class":636},[626,1755,1756],{"class":640}," selectionColor ",[626,1758,739],{"class":636},[626,1760,742],{"class":636},[626,1762,1689],{"class":705},[626,1764,747],{"class":640},[626,1766,660],{"class":636},[626,1768,1769],{"class":628,"line":757},[626,1770,689],{"emptyLinePlaceholder":32},[626,1772,1773,1775,1777,1779],{"class":628,"line":987},[626,1774,760],{"class":632},[626,1776,763],{"class":632},[626,1778,766],{"class":640},[626,1780,660],{"class":636},[550,1782,1783,1006,1786],{},[775,1784,1785],{"href":281},"Learn more about Focus →",[775,1787,1788],{"href":329},"Selection →",[782,1790,1792],{"id":1791},"simple-elements","Simple Elements",[550,1794,1795],{},"These composables apply fixed styles with no configuration options.",[550,1797,1798],{},[568,1799,793],{},[562,1801,1802,1820,1831,1845,1857],{},[565,1803,1804,1809,1810,1234,1813,1816,1817],{},[568,1805,1806],{},[579,1807,1808],{},"useImgElement()",": Aligns ",[579,1811,1812],{},"img",[579,1814,1815],{},"svg"," elements to ",[579,1818,1819],{},"vertical-align: middle",[565,1821,1822,1827,1828,1238],{},[568,1823,1824],{},[579,1825,1826],{},"useIframeElement()",": Removes the default border from ",[579,1829,1830],{},"iframe",[565,1832,1833,1838,1839,1816,1842],{},[568,1834,1835],{},[579,1836,1837],{},"useOutputElement()",": Sets ",[579,1840,1841],{},"output",[579,1843,1844],{},"display: inline-block",[565,1846,1847,1852,1853,1856],{},[568,1848,1849],{},[579,1850,1851],{},"useLegendElement()",": Styles ",[579,1854,1855],{},"legend"," elements for proper form layout",[565,1858,1859,1838,1864,1867,1868,1238],{},[568,1860,1861],{},[579,1862,1863],{},"useSummaryElement()",[579,1865,1866],{},"cursor: pointer"," on ",[579,1869,1870],{},"summary",[550,1872,1873,1006,1876,1006,1879,1006,1882,1006,1885],{},[775,1874,1875],{"href":297},"Learn more about Image →",[775,1877,1878],{"href":293},"Iframe →",[775,1880,1881],{"href":321},"Output →",[775,1883,1884],{"href":305},"Legend →",[775,1886,1887],{"href":333},"Summary →",[554,1889,1891],{"id":1890},"element-reference","Element Reference",[1893,1894,1895,1914],"table",{},[1896,1897,1898],"thead",{},[1899,1900,1901,1905,1908,1911],"tr",{},[1902,1903,1904],"th",{},"Category",[1902,1906,1907],{},"Composable",[1902,1909,1910],{},"HTML Element",[1902,1912,1913],{},"CSS Variables",[1915,1916,1917,1937,1956,1972,1988,2006,2021,2038,2054,2070,2088,2104,2121,2136,2155,2172,2190,2206,2222,2240,2255,2275,2290,2305,2320],"tbody",{},[1899,1918,1919,1925,1930,1934],{},[1920,1921,1922],"td",{},[568,1923,1924],{},"Text",[1920,1926,1927],{},[579,1928,1929],{},"useBodyElement",[1920,1931,1932],{},[579,1933,806],{},[1920,1935,1936],{},"5",[1899,1938,1939,1941,1946,1953],{},[1920,1940],{},[1920,1942,1943],{},[579,1944,1945],{},"useHeadingElement",[1920,1947,1948,1950,1951],{},[579,1949,818],{},"–",[579,1952,822],{},[1920,1954,1955],{},"10",[1899,1957,1958,1960,1965,1969],{},[1920,1959],{},[1920,1961,1962],{},[579,1963,1964],{},"useParagraphElement",[1920,1966,1967],{},[579,1968,550],{},[1920,1970,1971],{},"2",[1899,1973,1974,1976,1981,1985],{},[1920,1975],{},[1920,1977,1978],{},[579,1979,1980],{},"useLinkElement",[1920,1982,1983],{},[579,1984,775],{},[1920,1986,1987],{},"4",[1899,1989,1990,1994,1999,2004],{},[1920,1991,1992],{},[568,1993,312],{},[1920,1995,1996],{},[579,1997,1998],{},"useOlElement",[1920,2000,2001],{},[579,2002,2003],{},"ol",[1920,2005,1971],{},[1899,2007,2008,2010,2015,2019],{},[1920,2009],{},[1920,2011,2012],{},[579,2013,2014],{},"useUlElement",[1920,2016,2017],{},[579,2018,562],{},[1920,2020,1971],{},[1899,2022,2023,2025,2030,2035],{},[1920,2024],{},[1920,2026,2027],{},[579,2028,2029],{},"useDlElement",[1920,2031,2032],{},[579,2033,2034],{},"dl",[1920,2036,2037],{},"1",[1899,2039,2040,2042,2047,2052],{},[1920,2041],{},[1920,2043,2044],{},[579,2045,2046],{},"useDtElement",[1920,2048,2049],{},[579,2050,2051],{},"dt",[1920,2053,2037],{},[1899,2055,2056,2058,2063,2068],{},[1920,2057],{},[1920,2059,2060],{},[579,2061,2062],{},"useDdElement",[1920,2064,2065],{},[579,2066,2067],{},"dd",[1920,2069,1971],{},[1899,2071,2072,2076,2081,2086],{},[1920,2073,2074],{},[568,2075,272],{},[1920,2077,2078],{},[579,2079,2080],{},"useCodeElement",[1920,2082,2083],{},[579,2084,2085],{},"code, samp",[1920,2087,1971],{},[1899,2089,2090,2092,2097,2101],{},[1920,2091],{},[1920,2093,2094],{},[579,2095,2096],{},"usePreElement",[1920,2098,2099],{},[579,2100,616],{},[1920,2102,2103],{},"3",[1899,2105,2106,2108,2113,2118],{},[1920,2107],{},[1920,2109,2110],{},[579,2111,2112],{},"useKbdElement",[1920,2114,2115],{},[579,2116,2117],{},"kbd",[1920,2119,2120],{},"7",[1899,2122,2123,2125,2130,2134],{},[1920,2124],{},[1920,2126,2127],{},[579,2128,2129],{},"useSampElement",[1920,2131,2132],{},[579,2133,1237],{},[1920,2135,2037],{},[1899,2137,2138,2143,2148,2153],{},[1920,2139,2140],{},[568,2141,2142],{},"Inline",[1920,2144,2145],{},[579,2146,2147],{},"useAbbrElement",[1920,2149,2150],{},[579,2151,2152],{},"abbr[title]",[1920,2154,1971],{},[1899,2156,2157,2159,2164,2169],{},[1920,2158],{},[1920,2160,2161],{},[579,2162,2163],{},"useMarkElement",[1920,2165,2166],{},[579,2167,2168],{},"mark",[1920,2170,2171],{},"6",[1899,2173,2174,2178,2183,2188],{},[1920,2175,2176],{},[568,2177,540],{},[1920,2179,2180],{},[579,2181,2182],{},"useHrElement",[1920,2184,2185],{},[579,2186,2187],{},"hr",[1920,2189,1987],{},[1899,2191,2192,2194,2199,2204],{},[1920,2193],{},[1920,2195,2196],{},[579,2197,2198],{},"useCaptionElement",[1920,2200,2201],{},[579,2202,2203],{},"caption",[1920,2205,2171],{},[1899,2207,2208,2210,2215,2220],{},[1920,2209],{},[1920,2211,2212],{},[579,2213,2214],{},"useAddressElement",[1920,2216,2217],{},[579,2218,2219],{},"address",[1920,2221,2037],{},[1899,2223,2224,2229,2234,2238],{},[1920,2225,2226],{},[568,2227,2228],{},"States",[1920,2230,2231],{},[579,2232,2233],{},"useFocusState",[1920,2235,2236],{},[579,2237,1637],{},[1920,2239,1987],{},[1899,2241,2242,2244,2249,2253],{},[1920,2243],{},[1920,2245,2246],{},[579,2247,2248],{},"useSelectionState",[1920,2250,2251],{},[579,2252,1649],{},[1920,2254,1971],{},[1899,2256,2257,2262,2267,2272],{},[1920,2258,2259],{},[568,2260,2261],{},"Simple",[1920,2263,2264],{},[579,2265,2266],{},"useImgElement",[1920,2268,2269],{},[579,2270,2271],{},"img, svg",[1920,2273,2274],{},"0",[1899,2276,2277,2279,2284,2288],{},[1920,2278],{},[1920,2280,2281],{},[579,2282,2283],{},"useIframeElement",[1920,2285,2286],{},[579,2287,1830],{},[1920,2289,2274],{},[1899,2291,2292,2294,2299,2303],{},[1920,2293],{},[1920,2295,2296],{},[579,2297,2298],{},"useOutputElement",[1920,2300,2301],{},[579,2302,1841],{},[1920,2304,2274],{},[1899,2306,2307,2309,2314,2318],{},[1920,2308],{},[1920,2310,2311],{},[579,2312,2313],{},"useLegendElement",[1920,2315,2316],{},[579,2317,1855],{},[1920,2319,2274],{},[1899,2321,2322,2324,2329,2333],{},[1920,2323],{},[1920,2325,2326],{},[579,2327,2328],{},"useSummaryElement",[1920,2330,2331],{},[579,2332,1870],{},[1920,2334,2274],{},[554,2336,2338],{"id":2337},"best-practices","Best Practices",[562,2340,2341,2350,2360,2377,2387],{},[565,2342,2343,2349],{},[568,2344,2345,2346,2348],{},"Use ",[579,2347,603],{}," for new projects",": It applies all element styles in a single call with sensible defaults",[565,2351,2352,2355,2356,2359],{},[568,2353,2354],{},"Disable elements you don't need",": Pass ",[579,2357,2358],{},"false"," to any element in the preset config to skip it entirely",[565,2361,2362,2365,2366,2369,2370,1234,2373,2376],{},[568,2363,2364],{},"Reference design tokens",": Element defaults use ",[579,2367,2368],{},"@"," references like ",[579,2371,2372],{},"@color.primary",[579,2374,2375],{},"@spacing",", so they stay in sync with your token system",[565,2378,2379,2382,2383,2386],{},[568,2380,2381],{},"Override per-theme",": Use the ",[579,2384,2385],{},"themes"," option to customize element styles for dark mode or other themes without duplicating config",[565,2388,2389,2392],{},[568,2390,2391],{},"Compose individually when needed",": For fine-grained control, use individual composables instead of the preset",[554,2394,2396],{"id":2395},"next-steps","Next Steps",[562,2398,2399,2409,2423,2433],{},[565,2400,2401,2404,2405,2408],{},[568,2402,2403],{},"Quick setup?"," Start with the ",[775,2406,2407],{"href":249},"Global Preset"," to apply all element styles at once",[565,2410,2411,2414,2415,2417,2418,2420,2421],{},[568,2412,2413],{},"Customizing text?"," Check out ",[775,2416,264],{"href":265},", ",[775,2419,284],{"href":285},", and ",[775,2422,308],{"href":309},[565,2424,2425,2428,2429,1234,2431],{},[568,2426,2427],{},"Working with code?"," See ",[775,2430,272],{"href":273},[775,2432,300],{"href":301},[565,2434,2435,2438,2439],{},[568,2436,2437],{},"Need accessible focus styles?"," Learn about ",[775,2440,280],{"href":281},[2442,2443,2444],"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 .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);}",{"title":622,"searchDepth":663,"depth":663,"links":2446},[2447,2448,2449,2457,2458,2459],{"id":556,"depth":663,"text":557},{"id":607,"depth":663,"text":608},{"id":780,"depth":663,"text":151,"children":2450},[2451,2452,2453,2454,2455,2456],{"id":784,"depth":686,"text":785},{"id":1018,"depth":686,"text":312},{"id":1213,"depth":686,"text":1214},{"id":1433,"depth":686,"text":1434},{"id":1616,"depth":686,"text":1617},{"id":1791,"depth":686,"text":1792},{"id":1890,"depth":663,"text":1891},{"id":2337,"depth":663,"text":2338},{"id":2395,"depth":663,"text":2396},"Apply consistent, theme-aware base styles to HTML elements using Styleframe's element composables for body, headings, links, lists, and more.","md",null,{},{"title":83,"icon":84},{"title":545,"description":2460},{"loc":243},"fAkuNssuu6rXUHDNPbL9Bz_y30Ps4I40Ioz-0zbuH3Y",[2469,2471],{"title":238,"path":239,"stem":240,"description":2470,"icon":7,"children":-1},"Create and manage z-index design tokens with CSS variables for consistent stacking order across your application.",{"title":248,"path":249,"stem":250,"description":2472,"icon":178,"children":-1},"Apply all HTML element base styles in a single call with useGlobalPreset, including body, headings, links, lists, code, focus, and selection.",1778412258086]