[{"data":1,"prerenderedAt":1372},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-elements-composables-output":543,"-docs-theme-elements-composables-output-surround":1367},{"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":1359,"extension":1360,"links":1361,"meta":1362,"navigation":1363,"path":321,"seo":1364,"sitemap":1365,"stem":322,"__hash__":1366},"docs_theme/docs/theme/elements/02.composables/16.output.md","Output Elements",{"type":547,"value":548,"toc":1350},"minimark",[549,553,574,579,584,627,788,802,807,861,864,889,1063,1068,1115,1119,1323,1327,1346],[550,551,83],"h2",{"id":552},"overview",[554,555,556,557,561,562,565,566,569,570,573],"p",{},"The output composables style HTML elements that represent program output. The ",[558,559,560],"code",{},"useOutputElement"," composable sets the display mode of the ",[558,563,564],{},"output"," element, while ",[558,567,568],{},"useSampElement"," configures the font family for ",[558,571,572],{},"samp"," (sample output) elements.",[575,576],"story-preview",{":panel":577,"story":578},"true","theme-elements-output--default",[550,580,582],{"id":581},"useoutputelement",[558,583,560],{},[585,586,591],"pre",{"className":587,"code":588,"language":589,"meta":590,"style":590},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useOutputElement(s: Styleframe): void\n","ts","",[558,592,593],{"__ignoreMap":590},[594,595,598,602,606,610,614,617,621,624],"span",{"class":596,"line":597},"line",1,[594,599,601],{"class":600},"spNyl","function",[594,603,605],{"class":604},"s2Zo4"," useOutputElement",[594,607,609],{"class":608},"sMK4o","(",[594,611,613],{"class":612},"sHdIc","s",[594,615,616],{"class":608},":",[594,618,620],{"class":619},"sBMFI"," Styleframe",[594,622,623],{"class":608},"):",[594,625,626],{"class":619}," void\n",[628,629,630,753],"tabs",{},[631,632,634],"tabs-item",{"icon":633,"label":272},"i-lucide-code",[585,635,638],{"className":587,"code":636,"filename":637,"language":589,"meta":590,"style":590},"import { styleframe } from 'styleframe';\nimport { useOutputElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseOutputElement(s);\n\nexport default s;\n","styleframe.config.ts",[558,639,640,672,694,700,719,724,734,739],{"__ignoreMap":590},[594,641,642,646,649,653,656,659,662,666,669],{"class":596,"line":597},[594,643,645],{"class":644},"s7zQu","import",[594,647,648],{"class":608}," {",[594,650,652],{"class":651},"sTEyZ"," styleframe",[594,654,655],{"class":608}," }",[594,657,658],{"class":644}," from",[594,660,661],{"class":608}," '",[594,663,665],{"class":664},"sfazB","styleframe",[594,667,668],{"class":608},"'",[594,670,671],{"class":608},";\n",[594,673,675,677,679,681,683,685,687,690,692],{"class":596,"line":674},2,[594,676,645],{"class":644},[594,678,648],{"class":608},[594,680,605],{"class":651},[594,682,655],{"class":608},[594,684,658],{"class":644},[594,686,661],{"class":608},[594,688,689],{"class":664},"@styleframe/theme",[594,691,668],{"class":608},[594,693,671],{"class":608},[594,695,697],{"class":596,"line":696},3,[594,698,699],{"emptyLinePlaceholder":32},"\n",[594,701,703,706,709,712,714,717],{"class":596,"line":702},4,[594,704,705],{"class":600},"const",[594,707,708],{"class":651}," s ",[594,710,711],{"class":608},"=",[594,713,652],{"class":604},[594,715,716],{"class":651},"()",[594,718,671],{"class":608},[594,720,722],{"class":596,"line":721},5,[594,723,699],{"emptyLinePlaceholder":32},[594,725,727,729,732],{"class":596,"line":726},6,[594,728,560],{"class":604},[594,730,731],{"class":651},"(s)",[594,733,671],{"class":608},[594,735,737],{"class":596,"line":736},7,[594,738,699],{"emptyLinePlaceholder":32},[594,740,742,745,748,751],{"class":596,"line":741},8,[594,743,744],{"class":644},"export",[594,746,747],{"class":644}," default",[594,749,750],{"class":651}," s",[594,752,671],{"class":608},[631,754,755],{"icon":159,"label":320},[585,756,761],{"className":757,"code":758,"filename":759,"language":760,"meta":590,"style":590},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","output {\n    display: inline-block;\n}\n","styleframe/index.css","css",[558,762,763,770,783],{"__ignoreMap":590},[594,764,765,767],{"class":596,"line":597},[594,766,564],{"class":619},[594,768,769],{"class":608}," {\n",[594,771,772,776,778,781],{"class":596,"line":674},[594,773,775],{"class":774},"sqsOY","    display",[594,777,616],{"class":608},[594,779,780],{"class":651}," inline-block",[594,782,671],{"class":608},[594,784,785],{"class":596,"line":696},[594,786,787],{"class":608},"}\n",[554,789,790,791,794,795,798,799,801],{},"This composable takes no configuration options, creates no CSS custom properties, and returns ",[558,792,793],{},"void",". It sets ",[558,796,797],{},"display: inline-block"," on ",[558,800,564],{}," elements, giving them block-level sizing while allowing them to flow inline.",[550,803,805],{"id":804},"usesampelement",[558,806,568],{},[585,808,810],{"className":587,"code":809,"language":589,"meta":590,"style":590},"function useSampElement(\n    s: Styleframe,\n    options?: WithThemes\u003CSampElementConfig>\n): SampElementResult\n",[558,811,812,822,834,854],{"__ignoreMap":590},[594,813,814,816,819],{"class":596,"line":597},[594,815,601],{"class":600},[594,817,818],{"class":604}," useSampElement",[594,820,821],{"class":608},"(\n",[594,823,824,827,829,831],{"class":596,"line":674},[594,825,826],{"class":612},"    s",[594,828,616],{"class":608},[594,830,620],{"class":619},[594,832,833],{"class":608},",\n",[594,835,836,839,842,845,848,851],{"class":596,"line":696},[594,837,838],{"class":612},"    options",[594,840,841],{"class":608},"?:",[594,843,844],{"class":619}," WithThemes",[594,846,847],{"class":608},"\u003C",[594,849,850],{"class":619},"SampElementConfig",[594,852,853],{"class":608},">\n",[594,855,856,858],{"class":596,"line":702},[594,857,623],{"class":608},[594,859,860],{"class":619}," SampElementResult\n",[575,862],{":panel":577,"story":863},"theme-elements-samp--default",[865,866,867,871,872,875,876,878,879,882,883,885,886,888],"note",{},[868,869,870],"strong",{},"Good to know:"," The ",[558,873,874],{},"useCodeElement"," composable also applies styles to ",[558,877,572],{}," elements via its ",[558,880,881],{},"code, samp"," selector. Use ",[558,884,568],{}," only when you need separate control over the ",[558,887,572],{}," element's font family.",[628,890,891,995],{},[631,892,893],{"icon":633,"label":272},[585,894,896],{"className":587,"code":895,"filename":637,"language":589,"meta":590,"style":590},"import { styleframe } from 'styleframe';\nimport { useSampElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { sampFontFamily } = useSampElement(s);\n\nexport default s;\n",[558,897,898,918,938,942,956,960,981,985],{"__ignoreMap":590},[594,899,900,902,904,906,908,910,912,914,916],{"class":596,"line":597},[594,901,645],{"class":644},[594,903,648],{"class":608},[594,905,652],{"class":651},[594,907,655],{"class":608},[594,909,658],{"class":644},[594,911,661],{"class":608},[594,913,665],{"class":664},[594,915,668],{"class":608},[594,917,671],{"class":608},[594,919,920,922,924,926,928,930,932,934,936],{"class":596,"line":674},[594,921,645],{"class":644},[594,923,648],{"class":608},[594,925,818],{"class":651},[594,927,655],{"class":608},[594,929,658],{"class":644},[594,931,661],{"class":608},[594,933,689],{"class":664},[594,935,668],{"class":608},[594,937,671],{"class":608},[594,939,940],{"class":596,"line":696},[594,941,699],{"emptyLinePlaceholder":32},[594,943,944,946,948,950,952,954],{"class":596,"line":702},[594,945,705],{"class":600},[594,947,708],{"class":651},[594,949,711],{"class":608},[594,951,652],{"class":604},[594,953,716],{"class":651},[594,955,671],{"class":608},[594,957,958],{"class":596,"line":721},[594,959,699],{"emptyLinePlaceholder":32},[594,961,962,964,966,969,972,975,977,979],{"class":596,"line":726},[594,963,705],{"class":600},[594,965,648],{"class":608},[594,967,968],{"class":651}," sampFontFamily ",[594,970,971],{"class":608},"}",[594,973,974],{"class":608}," =",[594,976,818],{"class":604},[594,978,731],{"class":651},[594,980,671],{"class":608},[594,982,983],{"class":596,"line":736},[594,984,699],{"emptyLinePlaceholder":32},[594,986,987,989,991,993],{"class":596,"line":741},[594,988,744],{"class":644},[594,990,747],{"class":644},[594,992,750],{"class":651},[594,994,671],{"class":608},[631,996,997],{"icon":159,"label":320},[585,998,1000],{"className":757,"code":999,"filename":759,"language":760,"meta":590,"style":590},":root {\n    --samp--font-family: var(--font-family--mono);\n}\n\nsamp {\n    font-family: var(--samp--font-family);\n}\n",[558,1001,1002,1011,1029,1033,1037,1043,1059],{"__ignoreMap":590},[594,1003,1004,1006,1009],{"class":596,"line":597},[594,1005,616],{"class":608},[594,1007,1008],{"class":600},"root",[594,1010,769],{"class":608},[594,1012,1013,1016,1018,1021,1023,1026],{"class":596,"line":674},[594,1014,1015],{"class":651},"    --samp--font-family",[594,1017,616],{"class":608},[594,1019,1020],{"class":604}," var",[594,1022,609],{"class":608},[594,1024,1025],{"class":651},"--font-family--mono",[594,1027,1028],{"class":608},");\n",[594,1030,1031],{"class":596,"line":696},[594,1032,787],{"class":608},[594,1034,1035],{"class":596,"line":702},[594,1036,699],{"emptyLinePlaceholder":32},[594,1038,1039,1041],{"class":596,"line":721},[594,1040,572],{"class":619},[594,1042,769],{"class":608},[594,1044,1045,1048,1050,1052,1054,1057],{"class":596,"line":726},[594,1046,1047],{"class":774},"    font-family",[594,1049,616],{"class":608},[594,1051,1020],{"class":604},[594,1053,609],{"class":608},[594,1055,1056],{"class":651},"--samp--font-family",[594,1058,1028],{"class":608},[594,1060,1061],{"class":596,"line":736},[594,1062,787],{"class":608},[1064,1065,1067],"h3",{"id":1066},"default-values","Default Values",[1069,1070,1071,1090],"table",{},[1072,1073,1074],"thead",{},[1075,1076,1077,1081,1084,1087],"tr",{},[1078,1079,1080],"th",{},"Option",[1078,1082,1083],{},"Default",[1078,1085,1086],{},"Variable",[1078,1088,1089],{},"Export",[1091,1092,1093],"tbody",{},[1075,1094,1095,1101,1106,1110],{},[1096,1097,1098],"td",{},[558,1099,1100],{},"fontFamily",[1096,1102,1103],{},[558,1104,1105],{},"\"@font-family.mono\"",[1096,1107,1108],{},[558,1109,1056],{},[1096,1111,1112],{},[558,1113,1114],{},"sampFontFamily",[1064,1116,1118],{"id":1117},"custom-values","Custom Values",[628,1120,1121,1254],{},[631,1122,1123],{"icon":633,"label":272},[585,1124,1126],{"className":587,"code":1125,"filename":637,"language":589,"meta":590,"style":590},"import { styleframe } from 'styleframe';\nimport { useSampElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { sampFontFamily } = useSampElement(s, {\n    fontFamily: '\"Fira Code\", monospace',\n});\n\nexport default s;\n",[558,1127,1128,1148,1168,1172,1186,1190,1212,1229,1238,1243],{"__ignoreMap":590},[594,1129,1130,1132,1134,1136,1138,1140,1142,1144,1146],{"class":596,"line":597},[594,1131,645],{"class":644},[594,1133,648],{"class":608},[594,1135,652],{"class":651},[594,1137,655],{"class":608},[594,1139,658],{"class":644},[594,1141,661],{"class":608},[594,1143,665],{"class":664},[594,1145,668],{"class":608},[594,1147,671],{"class":608},[594,1149,1150,1152,1154,1156,1158,1160,1162,1164,1166],{"class":596,"line":674},[594,1151,645],{"class":644},[594,1153,648],{"class":608},[594,1155,818],{"class":651},[594,1157,655],{"class":608},[594,1159,658],{"class":644},[594,1161,661],{"class":608},[594,1163,689],{"class":664},[594,1165,668],{"class":608},[594,1167,671],{"class":608},[594,1169,1170],{"class":596,"line":696},[594,1171,699],{"emptyLinePlaceholder":32},[594,1173,1174,1176,1178,1180,1182,1184],{"class":596,"line":702},[594,1175,705],{"class":600},[594,1177,708],{"class":651},[594,1179,711],{"class":608},[594,1181,652],{"class":604},[594,1183,716],{"class":651},[594,1185,671],{"class":608},[594,1187,1188],{"class":596,"line":721},[594,1189,699],{"emptyLinePlaceholder":32},[594,1191,1192,1194,1196,1198,1200,1202,1204,1207,1210],{"class":596,"line":726},[594,1193,705],{"class":600},[594,1195,648],{"class":608},[594,1197,968],{"class":651},[594,1199,971],{"class":608},[594,1201,974],{"class":608},[594,1203,818],{"class":604},[594,1205,1206],{"class":651},"(s",[594,1208,1209],{"class":608},",",[594,1211,769],{"class":608},[594,1213,1214,1218,1220,1222,1225,1227],{"class":596,"line":736},[594,1215,1217],{"class":1216},"swJcz","    fontFamily",[594,1219,616],{"class":608},[594,1221,661],{"class":608},[594,1223,1224],{"class":664},"\"Fira Code\", monospace",[594,1226,668],{"class":608},[594,1228,833],{"class":608},[594,1230,1231,1233,1236],{"class":596,"line":741},[594,1232,971],{"class":608},[594,1234,1235],{"class":651},")",[594,1237,671],{"class":608},[594,1239,1241],{"class":596,"line":1240},9,[594,1242,699],{"emptyLinePlaceholder":32},[594,1244,1246,1248,1250,1252],{"class":596,"line":1245},10,[594,1247,744],{"class":644},[594,1249,747],{"class":644},[594,1251,750],{"class":651},[594,1253,671],{"class":608},[631,1255,1256],{"icon":159,"label":320},[585,1257,1259],{"className":757,"code":1258,"filename":759,"language":760,"meta":590,"style":590},":root {\n    --samp--font-family: \"Fira Code\", monospace;\n}\n\nsamp {\n    font-family: var(--samp--font-family);\n}\n",[558,1260,1261,1269,1291,1295,1299,1305,1319],{"__ignoreMap":590},[594,1262,1263,1265,1267],{"class":596,"line":597},[594,1264,616],{"class":608},[594,1266,1008],{"class":600},[594,1268,769],{"class":608},[594,1270,1271,1273,1275,1278,1281,1284,1286,1289],{"class":596,"line":674},[594,1272,1015],{"class":651},[594,1274,616],{"class":608},[594,1276,1277],{"class":608}," \"",[594,1279,1280],{"class":664},"Fira Code",[594,1282,1283],{"class":608},"\"",[594,1285,1209],{"class":608},[594,1287,1288],{"class":651}," monospace",[594,1290,671],{"class":608},[594,1292,1293],{"class":596,"line":696},[594,1294,787],{"class":608},[594,1296,1297],{"class":596,"line":702},[594,1298,699],{"emptyLinePlaceholder":32},[594,1300,1301,1303],{"class":596,"line":721},[594,1302,572],{"class":619},[594,1304,769],{"class":608},[594,1306,1307,1309,1311,1313,1315,1317],{"class":596,"line":726},[594,1308,1047],{"class":774},[594,1310,616],{"class":608},[594,1312,1020],{"class":604},[594,1314,609],{"class":608},[594,1316,1056],{"class":651},[594,1318,1028],{"class":608},[594,1320,1321],{"class":596,"line":736},[594,1322,787],{"class":608},[550,1324,1326],{"id":1325},"best-practices","Best Practices",[1328,1329,1330,1337],"ul",{},[1331,1332,1333,1336],"li",{},[868,1334,1335],{},"Use a monospace font",": Sample output should use a monospace font to distinguish it from regular prose text.",[1331,1338,1339,1342,1343,1345],{},[868,1340,1341],{},"Keep consistent with code",": When customizing the font family, use the same value as ",[558,1344,874],{}," for visual consistency across code-related elements.",[1347,1348,1349],"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 .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":590,"searchDepth":674,"depth":674,"links":1351},[1352,1353,1354,1358],{"id":552,"depth":674,"text":83},{"id":581,"depth":674,"text":560},{"id":804,"depth":674,"text":568,"children":1355},[1356,1357],{"id":1066,"depth":696,"text":1067},{"id":1117,"depth":696,"text":1118},{"id":1325,"depth":674,"text":1326},"Style output and sample output elements using the useOutputElement and useSampElement composables.","md",null,{},{"title":320,"icon":7},{"title":545,"description":1359},{"loc":321},"p3vCaPOFD749OLbLCcQNWBSZ8Rr-93dHXFFa17vCTlQ",[1368,1370],{"title":316,"path":317,"stem":318,"description":1369,"icon":7,"children":-1},"Style highlighted text elements with configurable background, color, and padding using the useMarkElement composable.",{"title":324,"path":325,"stem":326,"description":1371,"icon":7,"children":-1},"Style paragraph elements with configurable top and bottom margins using the useParagraphElement composable.",1778412269922]