[{"data":1,"prerenderedAt":1965},["ShallowReactive",2],{"navigation_docs":3,"-docs-components-composables-placeholder":410,"-docs-components-composables-placeholder-surround":1960},[4,45,134,150,165,239,293,366],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/docs/getting-started","docs/01.getting-started",[10,15,35,40],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/docs/getting-started/introduction","docs/01.getting-started/01.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"children":19,"icon":34},"Installation","/docs/getting-started/installation","docs/01.getting-started/02.installation/00.index",[20,22,26,30],{"title":21,"path":17,"stem":18},"Overview",{"title":23,"path":24,"stem":25},"Vite Installation","/docs/getting-started/installation/vite","docs/01.getting-started/02.installation/01.vite",{"title":27,"path":28,"stem":29},"Nuxt Installation","/docs/getting-started/installation/nuxt","docs/01.getting-started/02.installation/02.nuxt",{"title":31,"path":32,"stem":33},"Custom Installation","/docs/getting-started/installation/custom","docs/01.getting-started/02.installation/03.custom","i-lucide-download",{"title":36,"path":37,"stem":38,"icon":39},"Licensing","/docs/getting-started/licensing","docs/01.getting-started/03.licensing","i-lucide-scale",{"title":41,"path":42,"stem":43,"icon":44},"CLI Reference","/docs/getting-started/cli","docs/01.getting-started/04.cli","i-lucide-square-terminal",{"title":46,"path":47,"stem":48,"children":49,"icon":6},"API Essentials","/docs/api","docs/02.api/00.index",[50,52,57,62,67,72,77,82,87,92,97,102,117,122,127,132],{"title":21,"path":47,"stem":48,"icon":51},"i-lucide-book-text",{"title":53,"path":54,"stem":55,"icon":56},"Instance","/docs/api/instance","docs/02.api/01.instance","i-lucide-cloud-lightning",{"title":58,"path":59,"stem":60,"icon":61},"Variables","/docs/api/variables","docs/02.api/02.variables","i-lucide-variable",{"title":63,"path":64,"stem":65,"icon":66},"Selectors","/docs/api/selectors","docs/02.api/03.selectors","i-lucide-scan-text",{"title":68,"path":69,"stem":70,"icon":71},"At-Rules","/docs/api/at-rules","docs/02.api/04.at-rules","i-lucide-at-sign",{"title":73,"path":74,"stem":75,"icon":76},"Media Queries","/docs/api/media-queries","docs/02.api/05.media-queries","i-lucide-image-upscale",{"title":78,"path":79,"stem":80,"icon":81},"Keyframes","/docs/api/keyframes","docs/02.api/06.keyframes","i-lucide-square-play",{"title":83,"path":84,"stem":85,"icon":86},"Interpolation","/docs/api/interpolation","docs/02.api/07.interpolation","i-lucide-wrap-text",{"title":88,"path":89,"stem":90,"icon":91},"Utilities","/docs/api/utilities","docs/02.api/08.utilities","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Utility Modifiers","/docs/api/utility-modifiers","docs/02.api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":98,"path":99,"stem":100,"icon":101},"Themes","/docs/api/themes","docs/02.api/10.themes","i-lucide-paintbrush",{"title":103,"path":104,"stem":105,"children":106,"icon":116},"Recipes","/docs/api/recipes","docs/02.api/11.recipes/00.index",[107,108,112],{"title":21,"path":104,"stem":105},{"title":109,"path":110,"stem":111},"Runtime","/docs/api/recipes/runtime","docs/02.api/11.recipes/01.runtime",{"title":113,"path":114,"stem":115},"Output Format","/docs/api/recipes/output-format","docs/02.api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":118,"path":119,"stem":120,"icon":121},"Composables","/docs/api/composables","docs/02.api/12.composables","i-lucide-component",{"title":123,"path":124,"stem":125,"icon":126},"Imports","/docs/api/imports","docs/02.api/13.imports","i-lucide-file-input",{"title":128,"path":129,"stem":130,"icon":131},"Merging","/docs/api/merging","docs/02.api/13.merging","i-lucide-squares-intersect",{"title":123,"path":124,"stem":133,"icon":126},"docs/02.api/14.imports",{"title":135,"path":136,"stem":137,"children":138,"icon":6},"Tooling","/docs/tooling","docs/03.tooling/00.index",[139,140,145],{"title":21,"path":136,"stem":137,"icon":51},{"title":141,"path":142,"stem":143,"icon":144},"Utility Scanner","/docs/tooling/scanner","docs/03.tooling/01.scanner","i-lucide-view",{"title":146,"path":147,"stem":148,"icon":149},"Figma Plugin","/docs/tooling/figma-plugin","docs/03.tooling/02.figma-plugin","i-simple-icons-figma",{"title":151,"icon":6,"path":152,"stem":153,"children":154,"page":6},"Resources","/docs/resources","docs/04.resources",[155,160],{"title":156,"path":157,"stem":158,"icon":159},"Guides","/docs/resources/guides","docs/04.resources/01.guides","i-lucide-book-open",{"title":161,"path":162,"stem":163,"icon":164},"Comparisons","/docs/resources/comparisons","docs/04.resources/02.comparisons","i-lucide-file-diff",{"title":166,"path":167,"stem":168,"children":169,"icon":6},"Design Tokens","/docs/design-tokens","docs/05.design-tokens/00.index",[170,171,176],{"title":21,"path":167,"stem":168,"icon":51},{"title":172,"path":173,"stem":174,"icon":175},"Presets","/docs/design-tokens/presets","docs/05.design-tokens/01.presets","i-lucide-package",{"title":118,"icon":61,"defaultOpen":177,"path":178,"stem":179,"children":180,"page":6},true,"/docs/design-tokens/composables","docs/05.design-tokens/02.composables",[181,185,189,193,197,201,205,209,223,227,231,235],{"title":182,"path":183,"stem":184,"icon":6},"Border Radiuses","/docs/design-tokens/composables/border-radiuses","docs/05.design-tokens/02.composables/00.border-radiuses",{"title":186,"path":187,"stem":188,"icon":6},"Borders","/docs/design-tokens/composables/borders","docs/05.design-tokens/02.composables/01.borders",{"title":190,"path":191,"stem":192,"icon":6},"Box Shadows","/docs/design-tokens/composables/box-shadows","docs/05.design-tokens/02.composables/02.box-shadows",{"title":194,"path":195,"stem":196,"icon":6},"Breakpoints","/docs/design-tokens/composables/breakpoints","docs/05.design-tokens/02.composables/03.breakpoints",{"title":198,"path":199,"stem":200,"icon":6},"Colors","/docs/design-tokens/composables/colors","docs/05.design-tokens/02.composables/04.colors",{"title":202,"path":203,"stem":204,"icon":6},"Duration","/docs/design-tokens/composables/duration","docs/05.design-tokens/02.composables/05.duration",{"title":206,"path":207,"stem":208,"icon":6},"Easing","/docs/design-tokens/composables/easing","docs/05.design-tokens/02.composables/06.easing",{"title":210,"path":211,"stem":212,"children":213,"icon":6,"pro":177,"defaultOpen":6},"Fluid Design","/docs/design-tokens/composables/fluid-design","docs/05.design-tokens/02.composables/07.fluid-design/01.index",[214,215,219],{"title":21,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","/docs/design-tokens/composables/fluid-design/viewport","docs/05.design-tokens/02.composables/07.fluid-design/02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","/docs/design-tokens/composables/fluid-design/typography","docs/05.design-tokens/02.composables/07.fluid-design/03.typography",{"title":224,"path":225,"stem":226,"icon":6},"Scales","/docs/design-tokens/composables/scales","docs/05.design-tokens/02.composables/08.scales",{"title":228,"path":229,"stem":230,"icon":6},"Spacing","/docs/design-tokens/composables/spacing","docs/05.design-tokens/02.composables/09.spacing",{"title":232,"path":233,"stem":234,"icon":6},"Typography","/docs/design-tokens/composables/typography","docs/05.design-tokens/02.composables/10.typography",{"title":236,"path":237,"stem":238,"icon":6,"children":-1},"Z-Index","/docs/design-tokens/composables/z-index","docs/05.design-tokens/02.composables/11.z-index",{"title":240,"path":241,"stem":242,"children":243,"icon":6},"Components","/docs/components","docs/06.components/00.index",[244,245],{"title":21,"path":241,"stem":242,"icon":51},{"title":118,"icon":116,"defaultOpen":177,"path":246,"stem":247,"children":248,"page":6},"/docs/components/composables","docs/06.components/02.composables",[249,253,257,261,265,269,273,277,281,285,289],{"title":250,"path":251,"stem":252},"Badge","/docs/components/composables/badge","docs/06.components/02.composables/01.badge",{"title":254,"path":255,"stem":256},"Button","/docs/components/composables/button","docs/06.components/02.composables/02.button",{"title":258,"path":259,"stem":260},"Button Group","/docs/components/composables/button-group","docs/06.components/02.composables/03.button-group",{"title":262,"path":263,"stem":264},"Callout","/docs/components/composables/callout","docs/06.components/02.composables/04.callout",{"title":266,"path":267,"stem":268},"Card","/docs/components/composables/card","docs/06.components/02.composables/05.card",{"title":270,"path":271,"stem":272},"Nav","/docs/components/composables/nav","docs/06.components/02.composables/06.nav",{"title":274,"path":275,"stem":276},"Modal","/docs/components/composables/modal","docs/06.components/02.composables/07.modal",{"title":278,"path":279,"stem":280},"Skeleton","/docs/components/composables/skeleton","docs/06.components/02.composables/08.skeleton",{"title":282,"path":283,"stem":284},"Tooltip","/docs/components/composables/tooltip","docs/06.components/02.composables/08.tooltip",{"title":286,"path":287,"stem":288},"Placeholder","/docs/components/composables/placeholder","docs/06.components/02.composables/09.placeholder",{"title":290,"path":291,"stem":292},"Progress","/docs/components/composables/progress","docs/06.components/02.composables/10.progress",{"title":88,"path":294,"stem":295,"children":296,"icon":6},"/docs/utilities","docs/07.utilities/00.index",[297,298,301],{"title":21,"path":294,"stem":295,"icon":51},{"title":172,"path":299,"stem":300,"icon":175},"/docs/utilities/presets","docs/07.utilities/01.presets",{"title":118,"icon":91,"defaultOpen":177,"path":302,"stem":303,"children":304,"page":6},"/docs/utilities/composables","docs/07.utilities/02.composables",[305,309,313,317,320,324,328,332,336,340,344,347,351,355,359,363],{"title":306,"path":307,"stem":308,"icon":6},"Accessibility","/docs/utilities/composables/accessibility","docs/07.utilities/02.composables/00.accessibility",{"title":310,"path":311,"stem":312,"icon":6},"Animations","/docs/utilities/composables/animations","docs/07.utilities/02.composables/01.animations",{"title":314,"path":315,"stem":316,"icon":6},"Backgrounds","/docs/utilities/composables/backgrounds","docs/07.utilities/02.composables/02.backgrounds",{"title":186,"path":318,"stem":319,"icon":6},"/docs/utilities/composables/borders","docs/07.utilities/02.composables/03.borders",{"title":321,"path":322,"stem":323,"icon":6},"Effects","/docs/utilities/composables/effects","docs/07.utilities/02.composables/04.effects",{"title":325,"path":326,"stem":327,"icon":6},"Filters","/docs/utilities/composables/filters","docs/07.utilities/02.composables/05.filters",{"title":329,"path":330,"stem":331,"icon":6},"Flexbox & Grid","/docs/utilities/composables/flexbox-grid","docs/07.utilities/02.composables/06.flexbox-grid",{"title":333,"path":334,"stem":335,"icon":6},"Interactivity","/docs/utilities/composables/interactivity","docs/07.utilities/02.composables/07.interactivity",{"title":337,"path":338,"stem":339,"icon":6},"Layout","/docs/utilities/composables/layout","docs/07.utilities/02.composables/08.layout",{"title":341,"path":342,"stem":343,"icon":6},"Sizing","/docs/utilities/composables/sizing","docs/07.utilities/02.composables/09.sizing",{"title":228,"path":345,"stem":346,"icon":6},"/docs/utilities/composables/spacing","docs/07.utilities/02.composables/10.spacing",{"title":348,"path":349,"stem":350,"icon":6},"SVG","/docs/utilities/composables/svg","docs/07.utilities/02.composables/11.svg",{"title":352,"path":353,"stem":354,"icon":6},"Tables","/docs/utilities/composables/tables","docs/07.utilities/02.composables/12.tables",{"title":356,"path":357,"stem":358,"icon":6},"Transforms","/docs/utilities/composables/transforms","docs/07.utilities/02.composables/13.transforms",{"title":360,"path":361,"stem":362,"icon":6},"Transitions","/docs/utilities/composables/transitions","docs/07.utilities/02.composables/14.transitions",{"title":232,"path":364,"stem":365,"icon":6},"/docs/utilities/composables/typography","docs/07.utilities/02.composables/15.typography",{"title":93,"path":367,"stem":368,"children":369,"icon":6},"/docs/modifiers","docs/08.modifiers/00.index",[370,371,374],{"title":21,"path":367,"stem":368,"icon":51},{"title":172,"path":372,"stem":373,"icon":175},"/docs/modifiers/presets","docs/08.modifiers/01.presets",{"title":118,"icon":96,"defaultOpen":177,"path":375,"stem":376,"children":377,"page":6},"/docs/modifiers/composables","docs/08.modifiers/02.composables",[378,382,386,390,394,398,402,406],{"title":379,"path":380,"stem":381,"icon":6},"ARIA State","/docs/modifiers/composables/aria-state","docs/08.modifiers/02.composables/00.aria-state",{"title":383,"path":384,"stem":385,"icon":6},"Directional","/docs/modifiers/composables/directional","docs/08.modifiers/02.composables/01.directional",{"title":387,"path":388,"stem":389,"icon":6},"Form State","/docs/modifiers/composables/form-state","docs/08.modifiers/02.composables/02.form-state",{"title":391,"path":392,"stem":393,"icon":6},"Media & Preferences","/docs/modifiers/composables/media-preferences","docs/08.modifiers/02.composables/03.media-preferences",{"title":395,"path":396,"stem":397,"icon":6},"Other State","/docs/modifiers/composables/other-state","docs/08.modifiers/02.composables/04.other-state",{"title":399,"path":400,"stem":401,"icon":6},"Pseudo-Elements","/docs/modifiers/composables/pseudo-elements","docs/08.modifiers/02.composables/05.pseudo-elements",{"title":403,"path":404,"stem":405,"icon":6},"Pseudo-State","/docs/modifiers/composables/pseudo-state","docs/08.modifiers/02.composables/06.pseudo-state",{"title":407,"path":408,"stem":409,"icon":6},"Structural","/docs/modifiers/composables/structural","docs/08.modifiers/02.composables/07.structural",{"id":411,"title":286,"body":412,"description":1953,"extension":1954,"links":1955,"meta":1956,"navigation":177,"path":287,"seo":1957,"sitemap":1958,"stem":288,"__hash__":1959},"docs/docs/06.components/02.composables/09.placeholder.md",{"type":413,"value":414,"toc":1937},"minimark",[415,419,432,440,444,447,487,491,1131,1135,1138,1184,1195,1210,1214,1217,1254,1297,1304,1307,1325,1329,1334,1337,1507,1511,1517,1520,1525,1587,1592,1595,1614,1619,1793,1798,1840,1845,1849,1879,1883,1933],[416,417,21],"h2",{"id":418},"overview",[420,421,422,423,426,427,431],"p",{},"The ",[424,425,286],"strong",{}," is a visual container element used for layout prototyping, wireframing, and representing areas where content will eventually appear. It uses a single recipe: ",[428,429,430],"code",{},"usePlaceholderRecipe()"," which creates a centered flex container with a dashed border and a subtle hatch background pattern. The recipe has no variant axes — it provides a single, consistent appearance with automatic dark mode support.",[420,433,434,435,439],{},"The Placeholder recipe integrates directly with the default ",[436,437,438],"a",{"href":173},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[416,441,443],{"id":442},"why-use-the-placeholder-recipe","Why use the Placeholder recipe?",[420,445,446],{},"The Placeholder recipe helps you:",[448,449,450,457,463,469,475,481],"ul",{},[451,452,453,456],"li",{},[424,454,455],{},"Prototype layouts quickly",": Drop in a placeholder container to visualize spacing and structure before real content is ready.",[451,458,459,462],{},[424,460,461],{},"Communicate intent",": The dashed border and hatch pattern make it visually obvious that the area is a placeholder, not final content.",[451,464,465,468],{},[424,466,467],{},"Support dark mode automatically",": The hatch pattern and border color adapt to dark mode without any extra configuration.",[451,470,471,474],{},[424,472,473],{},"Customize without forking",": Override base styles through the options API to adjust the appearance for your specific use case.",[451,476,477,480],{},[424,478,479],{},"Stay type-safe",": Full TypeScript support with the Styleframe recipe system.",[451,482,483,486],{},[424,484,485],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[416,488,490],{"id":489},"usage","Usage",[492,493,495,500,507,755,759,766,1122,1126],"steps",{"level":494},"4",[496,497,499],"h4",{"id":498},"register-the-recipe","Register the recipe",[420,501,502,503,506],{},"Add the Placeholder recipe to a local Styleframe instance. The global ",[428,504,505],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[508,509,511,647],"code-tree",{"default-value":510},"src/components/placeholder.styleframe.ts",[512,513,518],"pre",{"className":514,"code":515,"filename":510,"language":516,"meta":517,"style":517},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { usePlaceholderRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst placeholder = usePlaceholderRecipe(s);\n\nexport default s;\n","ts","",[428,519,520,556,579,585,606,611,628,633],{"__ignoreMap":517},[521,522,525,529,533,537,540,543,546,550,553],"span",{"class":523,"line":524},"line",1,[521,526,528],{"class":527},"s7zQu","import",[521,530,532],{"class":531},"sMK4o"," {",[521,534,536],{"class":535},"sTEyZ"," styleframe",[521,538,539],{"class":531}," }",[521,541,542],{"class":527}," from",[521,544,545],{"class":531}," '",[521,547,549],{"class":548},"sfazB","virtual:styleframe",[521,551,552],{"class":531},"'",[521,554,555],{"class":531},";\n",[521,557,559,561,563,566,568,570,572,575,577],{"class":523,"line":558},2,[521,560,528],{"class":527},[521,562,532],{"class":531},[521,564,565],{"class":535}," usePlaceholderRecipe",[521,567,539],{"class":531},[521,569,542],{"class":527},[521,571,545],{"class":531},[521,573,574],{"class":548},"@styleframe/theme",[521,576,552],{"class":531},[521,578,555],{"class":531},[521,580,582],{"class":523,"line":581},3,[521,583,584],{"emptyLinePlaceholder":177},"\n",[521,586,588,592,595,598,601,604],{"class":523,"line":587},4,[521,589,591],{"class":590},"spNyl","const",[521,593,594],{"class":535}," s ",[521,596,597],{"class":531},"=",[521,599,536],{"class":600},"s2Zo4",[521,602,603],{"class":535},"()",[521,605,555],{"class":531},[521,607,609],{"class":523,"line":608},5,[521,610,584],{"emptyLinePlaceholder":177},[521,612,614,616,619,621,623,626],{"class":523,"line":613},6,[521,615,591],{"class":590},[521,617,618],{"class":535}," placeholder ",[521,620,597],{"class":531},[521,622,565],{"class":600},[521,624,625],{"class":535},"(s)",[521,627,555],{"class":531},[521,629,631],{"class":523,"line":630},7,[521,632,584],{"emptyLinePlaceholder":177},[521,634,636,639,642,645],{"class":523,"line":635},8,[521,637,638],{"class":527},"export",[521,640,641],{"class":527}," default",[521,643,644],{"class":535}," s",[521,646,555],{"class":531},[512,648,650],{"className":514,"code":649,"filename":505,"language":516,"meta":517,"style":517},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[428,651,652,673,700,704,718,722,731,740,744],{"__ignoreMap":517},[521,653,654,656,658,660,662,664,666,669,671],{"class":523,"line":524},[521,655,528],{"class":527},[521,657,532],{"class":531},[521,659,536],{"class":535},[521,661,539],{"class":531},[521,663,542],{"class":527},[521,665,545],{"class":531},[521,667,668],{"class":548},"styleframe",[521,670,552],{"class":531},[521,672,555],{"class":531},[521,674,675,677,679,682,685,688,690,692,694,696,698],{"class":523,"line":558},[521,676,528],{"class":527},[521,678,532],{"class":531},[521,680,681],{"class":535}," useDesignTokensPreset",[521,683,684],{"class":531},",",[521,686,687],{"class":535}," useUtilitiesPreset",[521,689,539],{"class":531},[521,691,542],{"class":527},[521,693,545],{"class":531},[521,695,574],{"class":548},[521,697,552],{"class":531},[521,699,555],{"class":531},[521,701,702],{"class":523,"line":581},[521,703,584],{"emptyLinePlaceholder":177},[521,705,706,708,710,712,714,716],{"class":523,"line":587},[521,707,591],{"class":590},[521,709,594],{"class":535},[521,711,597],{"class":531},[521,713,536],{"class":600},[521,715,603],{"class":535},[521,717,555],{"class":531},[521,719,720],{"class":523,"line":608},[521,721,584],{"emptyLinePlaceholder":177},[521,723,724,727,729],{"class":523,"line":613},[521,725,726],{"class":600},"useDesignTokensPreset",[521,728,625],{"class":535},[521,730,555],{"class":531},[521,732,733,736,738],{"class":523,"line":630},[521,734,735],{"class":600},"useUtilitiesPreset",[521,737,625],{"class":535},[521,739,555],{"class":531},[521,741,742],{"class":523,"line":635},[521,743,584],{"emptyLinePlaceholder":177},[521,745,747,749,751,753],{"class":523,"line":746},9,[521,748,638],{"class":527},[521,750,641],{"class":527},[521,752,644],{"class":535},[521,754,555],{"class":531},[496,756,758],{"id":757},"build-the-component","Build the component",[420,760,761,762,765],{},"Import the ",[428,763,764],{},"placeholder"," runtime function from the virtual module and call it with no arguments to compute the class name:",[767,768,769,974],"tabs",{},[770,771,774],"tabs-item",{"icon":772,"label":773},"i-devicon-react","React",[512,775,778],{"className":514,"code":776,"filename":777,"language":516,"meta":517,"style":517},"import { placeholder } from \"virtual:styleframe\";\n\ninterface PlaceholderProps {\n    children?: React.ReactNode;\n    className?: string;\n}\n\nexport function Placeholder({ children, className }: PlaceholderProps) {\n    return (\n        \u003Cdiv className={`${placeholder()} ${className ?? \"\"}`}>\n            {children}\n        \u003C/div>\n    );\n}\n","src/components/Placeholder.tsx",[428,779,780,803,807,819,839,851,856,860,892,900,939,950,961,969],{"__ignoreMap":517},[521,781,782,784,786,789,791,793,796,798,801],{"class":523,"line":524},[521,783,528],{"class":527},[521,785,532],{"class":531},[521,787,788],{"class":535}," placeholder",[521,790,539],{"class":531},[521,792,542],{"class":527},[521,794,795],{"class":531}," \"",[521,797,549],{"class":548},[521,799,800],{"class":531},"\"",[521,802,555],{"class":531},[521,804,805],{"class":523,"line":558},[521,806,584],{"emptyLinePlaceholder":177},[521,808,809,812,816],{"class":523,"line":581},[521,810,811],{"class":590},"interface",[521,813,815],{"class":814},"sBMFI"," PlaceholderProps",[521,817,818],{"class":531}," {\n",[521,820,821,825,828,831,834,837],{"class":523,"line":587},[521,822,824],{"class":823},"swJcz","    children",[521,826,827],{"class":531},"?:",[521,829,830],{"class":814}," React",[521,832,833],{"class":531},".",[521,835,836],{"class":814},"ReactNode",[521,838,555],{"class":531},[521,840,841,844,846,849],{"class":523,"line":608},[521,842,843],{"class":823},"    className",[521,845,827],{"class":531},[521,847,848],{"class":814}," string",[521,850,555],{"class":531},[521,852,853],{"class":523,"line":613},[521,854,855],{"class":531},"}\n",[521,857,858],{"class":523,"line":630},[521,859,584],{"emptyLinePlaceholder":177},[521,861,862,864,867,870,873,877,879,882,885,887,890],{"class":523,"line":635},[521,863,638],{"class":527},[521,865,866],{"class":590}," function",[521,868,869],{"class":600}," Placeholder",[521,871,872],{"class":531},"({",[521,874,876],{"class":875},"sHdIc"," children",[521,878,684],{"class":531},[521,880,881],{"class":875}," className",[521,883,884],{"class":531}," }:",[521,886,815],{"class":814},[521,888,889],{"class":531},")",[521,891,818],{"class":531},[521,893,894,897],{"class":523,"line":746},[521,895,896],{"class":527},"    return",[521,898,899],{"class":823}," (\n",[521,901,903,906,909,911,914,917,919,921,924,927,930,933,936],{"class":523,"line":902},10,[521,904,905],{"class":531},"        \u003C",[521,907,908],{"class":535},"div",[521,910,881],{"class":535},[521,912,913],{"class":531},"={",[521,915,916],{"class":531},"`${",[521,918,764],{"class":600},[521,920,603],{"class":535},[521,922,923],{"class":531},"}",[521,925,926],{"class":531}," ${",[521,928,929],{"class":535},"className ",[521,931,932],{"class":531},"??",[521,934,935],{"class":531}," \"\"}`",[521,937,938],{"class":531},"}>\n",[521,940,942,945,948],{"class":523,"line":941},11,[521,943,944],{"class":531},"            {",[521,946,947],{"class":875},"children",[521,949,855],{"class":531},[521,951,953,956,958],{"class":523,"line":952},12,[521,954,955],{"class":531},"        \u003C/",[521,957,908],{"class":535},[521,959,960],{"class":531},">\n",[521,962,964,967],{"class":523,"line":963},13,[521,965,966],{"class":823},"    )",[521,968,555],{"class":531},[521,970,972],{"class":523,"line":971},14,[521,973,855],{"class":531},[770,975,978],{"icon":976,"label":977},"i-devicon-vuejs","Vue",[512,979,984],{"className":980,"code":981,"filename":982,"language":983,"meta":517,"style":517},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { placeholder } from \"virtual:styleframe\";\n\nconst classes = placeholder();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"classes\">\n        \u003Cslot />\n    \u003C/div>\n\u003C/template>\n","src/components/Placeholder.vue","vue",[428,985,986,1010,1030,1034,1049,1058,1062,1071,1095,1105,1114],{"__ignoreMap":517},[521,987,988,991,994,997,1000,1002,1004,1006,1008],{"class":523,"line":524},[521,989,990],{"class":531},"\u003C",[521,992,993],{"class":823},"script",[521,995,996],{"class":590}," setup",[521,998,999],{"class":590}," lang",[521,1001,597],{"class":531},[521,1003,800],{"class":531},[521,1005,516],{"class":548},[521,1007,800],{"class":531},[521,1009,960],{"class":531},[521,1011,1012,1014,1016,1018,1020,1022,1024,1026,1028],{"class":523,"line":558},[521,1013,528],{"class":527},[521,1015,532],{"class":531},[521,1017,788],{"class":535},[521,1019,539],{"class":531},[521,1021,542],{"class":527},[521,1023,795],{"class":531},[521,1025,549],{"class":548},[521,1027,800],{"class":531},[521,1029,555],{"class":531},[521,1031,1032],{"class":523,"line":581},[521,1033,584],{"emptyLinePlaceholder":177},[521,1035,1036,1038,1041,1043,1045,1047],{"class":523,"line":587},[521,1037,591],{"class":590},[521,1039,1040],{"class":535}," classes ",[521,1042,597],{"class":531},[521,1044,788],{"class":600},[521,1046,603],{"class":535},[521,1048,555],{"class":531},[521,1050,1051,1054,1056],{"class":523,"line":608},[521,1052,1053],{"class":531},"\u003C/",[521,1055,993],{"class":823},[521,1057,960],{"class":531},[521,1059,1060],{"class":523,"line":613},[521,1061,584],{"emptyLinePlaceholder":177},[521,1063,1064,1066,1069],{"class":523,"line":630},[521,1065,990],{"class":531},[521,1067,1068],{"class":823},"template",[521,1070,960],{"class":531},[521,1072,1073,1076,1078,1081,1084,1086,1088,1091,1093],{"class":523,"line":635},[521,1074,1075],{"class":531},"    \u003C",[521,1077,908],{"class":823},[521,1079,1080],{"class":531}," :",[521,1082,1083],{"class":590},"class",[521,1085,597],{"class":531},[521,1087,800],{"class":531},[521,1089,1090],{"class":535},"classes",[521,1092,800],{"class":531},[521,1094,960],{"class":531},[521,1096,1097,1099,1102],{"class":523,"line":746},[521,1098,905],{"class":531},[521,1100,1101],{"class":823},"slot",[521,1103,1104],{"class":531}," />\n",[521,1106,1107,1110,1112],{"class":523,"line":902},[521,1108,1109],{"class":531},"    \u003C/",[521,1111,908],{"class":823},[521,1113,960],{"class":531},[521,1115,1116,1118,1120],{"class":523,"line":941},[521,1117,1053],{"class":531},[521,1119,1068],{"class":823},[521,1121,960],{"class":531},[496,1123,1125],{"id":1124},"see-it-in-action","See it in action",[1127,1128],"story-preview",{":panel":1129,"story":1130},"true","theme-recipes-placeholder--default",[416,1132,1134],{"id":1133},"appearance","Appearance",[420,1136,1137],{},"The Placeholder recipe has a single, fixed appearance with no color, variant, or size axes. It renders as a centered flex container with:",[448,1139,1140,1155,1161,1170,1176],{},[451,1141,1142,1143,1146,1147,1150,1151,1154],{},"A ",[424,1144,1145],{},"dashed border"," using ",[428,1148,1149],{},"@color.gray-300"," (light mode) or ",[428,1152,1153],{},"@color.gray-600"," (dark mode)",[451,1156,1142,1157,1160],{},[424,1158,1159],{},"hatch background pattern"," created with a repeating 45° linear gradient",[451,1162,1163,1166,1167,889],{},[424,1164,1165],{},"Medium border radius"," (",[428,1168,1169],{},"@border-radius.md",[451,1171,1172,1175],{},[424,1173,1174],{},"Reduced opacity"," (0.75) to visually distinguish it from real content",[451,1177,1178,1166,1181,889],{},[424,1179,1180],{},"One unit of padding",[428,1182,1183],{},"@1",[420,1185,1186,1187,1190,1191,1194],{},"The hatch pattern uses semi-transparent diagonal lines (",[428,1188,1189],{},"rgba(0, 0, 0, 0.04)"," in light mode, ",[428,1192,1193],{},"rgba(255, 255, 255, 0.04)"," in dark mode) so it works on any background color.",[1196,1197,1198,1201,1202,1205,1206,1209],"note",{},[424,1199,1200],{},"Good to know:"," The Placeholder recipe does not include size variants. To control dimensions, apply size utilities or inline styles directly on the element (e.g., ",[428,1203,1204],{},"class=\"_height:8\""," or ",[428,1207,1208],{},"style=\"height: 200px\"",").",[416,1211,1213],{"id":1212},"anatomy","Anatomy",[420,1215,1216],{},"The Placeholder recipe is a single recipe with no sub-parts:",[1218,1219,1220,1236],"table",{},[1221,1222,1223],"thead",{},[1224,1225,1226,1230,1233],"tr",{},[1227,1228,1229],"th",{},"Part",[1227,1231,1232],{},"Recipe",[1227,1234,1235],{},"Role",[1237,1238,1239],"tbody",{},[1224,1240,1241,1247,1251],{},[1242,1243,1244],"td",{},[424,1245,1246],{},"Container",[1242,1248,1249],{},[428,1250,430],{},[1242,1252,1253],{},"Centered flex container with dashed border and hatch pattern",[512,1255,1259],{"className":1256,"code":1257,"language":1258,"meta":517,"style":517},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Single-part recipe -->\n\u003Cdiv class=\"placeholder()\">Placeholder content\u003C/div>\n","html",[428,1260,1261,1267],{"__ignoreMap":517},[521,1262,1263],{"class":523,"line":524},[521,1264,1266],{"class":1265},"sHwdD","\u003C!-- Single-part recipe -->\n",[521,1268,1269,1271,1273,1276,1278,1280,1283,1285,1288,1291,1293,1295],{"class":523,"line":558},[521,1270,990],{"class":531},[521,1272,908],{"class":823},[521,1274,1275],{"class":590}," class",[521,1277,597],{"class":531},[521,1279,800],{"class":531},[521,1281,1282],{"class":548},"placeholder()",[521,1284,800],{"class":531},[521,1286,1287],{"class":531},">",[521,1289,1290],{"class":535},"Placeholder content",[521,1292,1053],{"class":531},[521,1294,908],{"class":823},[521,1296,960],{"class":531},[1298,1299,1300,1303],"tip",{},[424,1301,1302],{},"Pro tip:"," Since the Placeholder has no inherent dimensions, set a height or width on the element to define the space it occupies. This makes it useful for previewing different layout configurations.",[416,1305,306],{"id":1306},"accessibility",[448,1308,1309,1319],{},[451,1310,1311,1314,1315,1318],{},[424,1312,1313],{},"Decorative element."," Placeholders are visual aids for development and prototyping. If they appear in production, ensure they have ",[428,1316,1317],{},"aria-hidden=\"true\""," or are replaced with meaningful content before shipping.",[451,1320,1321,1324],{},[424,1322,1323],{},"Verify contrast ratios."," The default opacity of 0.75 combined with the dashed border provides sufficient visual distinction. If you override the opacity or colors, verify the placeholder remains distinguishable from surrounding content.",[416,1326,1328],{"id":1327},"customization","Customization",[1330,1331,1333],"h3",{"id":1332},"overriding-defaults","Overriding Defaults",[420,1335,1336],{},"The composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[512,1338,1340],{"className":514,"code":1339,"filename":510,"language":516,"meta":517,"style":517},"import { styleframe } from 'virtual:styleframe';\nimport { usePlaceholderRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst placeholder = usePlaceholderRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.lg',\n        borderColor: '@color.gray-400',\n        opacity: '0.5',\n    },\n});\n\nexport default s;\n",[428,1341,1342,1362,1382,1386,1400,1404,1421,1431,1448,1464,1480,1485,1493,1497],{"__ignoreMap":517},[521,1343,1344,1346,1348,1350,1352,1354,1356,1358,1360],{"class":523,"line":524},[521,1345,528],{"class":527},[521,1347,532],{"class":531},[521,1349,536],{"class":535},[521,1351,539],{"class":531},[521,1353,542],{"class":527},[521,1355,545],{"class":531},[521,1357,549],{"class":548},[521,1359,552],{"class":531},[521,1361,555],{"class":531},[521,1363,1364,1366,1368,1370,1372,1374,1376,1378,1380],{"class":523,"line":558},[521,1365,528],{"class":527},[521,1367,532],{"class":531},[521,1369,565],{"class":535},[521,1371,539],{"class":531},[521,1373,542],{"class":527},[521,1375,545],{"class":531},[521,1377,574],{"class":548},[521,1379,552],{"class":531},[521,1381,555],{"class":531},[521,1383,1384],{"class":523,"line":581},[521,1385,584],{"emptyLinePlaceholder":177},[521,1387,1388,1390,1392,1394,1396,1398],{"class":523,"line":587},[521,1389,591],{"class":590},[521,1391,594],{"class":535},[521,1393,597],{"class":531},[521,1395,536],{"class":600},[521,1397,603],{"class":535},[521,1399,555],{"class":531},[521,1401,1402],{"class":523,"line":608},[521,1403,584],{"emptyLinePlaceholder":177},[521,1405,1406,1408,1410,1412,1414,1417,1419],{"class":523,"line":613},[521,1407,591],{"class":590},[521,1409,618],{"class":535},[521,1411,597],{"class":531},[521,1413,565],{"class":600},[521,1415,1416],{"class":535},"(s",[521,1418,684],{"class":531},[521,1420,818],{"class":531},[521,1422,1423,1426,1429],{"class":523,"line":630},[521,1424,1425],{"class":823},"    base",[521,1427,1428],{"class":531},":",[521,1430,818],{"class":531},[521,1432,1433,1436,1438,1440,1443,1445],{"class":523,"line":635},[521,1434,1435],{"class":823},"        borderRadius",[521,1437,1428],{"class":531},[521,1439,545],{"class":531},[521,1441,1442],{"class":548},"@border-radius.lg",[521,1444,552],{"class":531},[521,1446,1447],{"class":531},",\n",[521,1449,1450,1453,1455,1457,1460,1462],{"class":523,"line":746},[521,1451,1452],{"class":823},"        borderColor",[521,1454,1428],{"class":531},[521,1456,545],{"class":531},[521,1458,1459],{"class":548},"@color.gray-400",[521,1461,552],{"class":531},[521,1463,1447],{"class":531},[521,1465,1466,1469,1471,1473,1476,1478],{"class":523,"line":902},[521,1467,1468],{"class":823},"        opacity",[521,1470,1428],{"class":531},[521,1472,545],{"class":531},[521,1474,1475],{"class":548},"0.5",[521,1477,552],{"class":531},[521,1479,1447],{"class":531},[521,1481,1482],{"class":523,"line":941},[521,1483,1484],{"class":531},"    },\n",[521,1486,1487,1489,1491],{"class":523,"line":952},[521,1488,923],{"class":531},[521,1490,889],{"class":535},[521,1492,555],{"class":531},[521,1494,1495],{"class":523,"line":963},[521,1496,584],{"emptyLinePlaceholder":177},[521,1498,1499,1501,1503,1505],{"class":523,"line":971},[521,1500,638],{"class":527},[521,1502,641],{"class":527},[521,1504,644],{"class":535},[521,1506,555],{"class":531},[416,1508,1510],{"id":1509},"api-reference","API Reference",[1330,1512,1514],{"id":1513},"useplaceholderrecipes-options",[428,1515,1516],{},"usePlaceholderRecipe(s, options?)",[420,1518,1519],{},"Creates the placeholder container recipe with a dashed border, hatch background pattern, and centered flex layout.",[420,1521,1522],{},[424,1523,1524],{},"Parameters:",[1218,1526,1527,1540],{},[1221,1528,1529],{},[1224,1530,1531,1534,1537],{},[1227,1532,1533],{},"Parameter",[1227,1535,1536],{},"Type",[1227,1538,1539],{},"Description",[1237,1541,1542,1557,1572],{},[1224,1543,1544,1549,1554],{},[1242,1545,1546],{},[428,1547,1548],{},"s",[1242,1550,1551],{},[428,1552,1553],{},"Styleframe",[1242,1555,1556],{},"The Styleframe instance",[1224,1558,1559,1564,1569],{},[1242,1560,1561],{},[428,1562,1563],{},"options",[1242,1565,1566],{},[428,1567,1568],{},"DeepPartial\u003CRecipeConfig>",[1242,1570,1571],{},"Optional overrides for the recipe configuration",[1224,1573,1574,1579,1584],{},[1242,1575,1576],{},[428,1577,1578],{},"options.base",[1242,1580,1581],{},[428,1582,1583],{},"VariantDeclarationsBlock",[1242,1585,1586],{},"Custom base styles for the placeholder container",[420,1588,1589],{},[424,1590,1591],{},"Variants:",[420,1593,1594],{},"The Placeholder recipe has no variant axes. The runtime function is called with no arguments:",[512,1596,1598],{"className":514,"code":1597,"language":516,"meta":517,"style":517},"const classes = placeholder();\n",[428,1599,1600],{"__ignoreMap":517},[521,1601,1602,1604,1606,1608,1610,1612],{"class":523,"line":524},[521,1603,591],{"class":590},[521,1605,1040],{"class":535},[521,1607,597],{"class":531},[521,1609,788],{"class":600},[521,1611,603],{"class":535},[521,1613,555],{"class":531},[420,1615,1616],{},[424,1617,1618],{},"Base styles:",[1218,1620,1621,1633],{},[1221,1622,1623],{},[1224,1624,1625,1628,1631],{},[1227,1626,1627],{},"Property",[1227,1629,1630],{},"Value",[1227,1632,1539],{},[1237,1634,1635,1650,1665,1679,1694,1709,1723,1736,1751,1766,1780],{},[1224,1636,1637,1642,1647],{},[1242,1638,1639],{},[428,1640,1641],{},"display",[1242,1643,1644],{},[428,1645,1646],{},"flex",[1242,1648,1649],{},"Flex container",[1224,1651,1652,1657,1662],{},[1242,1653,1654],{},[428,1655,1656],{},"alignItems",[1242,1658,1659],{},[428,1660,1661],{},"center",[1242,1663,1664],{},"Vertically center content",[1224,1666,1667,1672,1676],{},[1242,1668,1669],{},[428,1670,1671],{},"justifyContent",[1242,1673,1674],{},[428,1675,1661],{},[1242,1677,1678],{},"Horizontally center content",[1224,1680,1681,1686,1691],{},[1242,1682,1683],{},[428,1684,1685],{},"borderWidth",[1242,1687,1688],{},[428,1689,1690],{},"@border-width.thin",[1242,1692,1693],{},"Thin border",[1224,1695,1696,1701,1706],{},[1242,1697,1698],{},[428,1699,1700],{},"borderStyle",[1242,1702,1703],{},[428,1704,1705],{},"@border-style.dashed",[1242,1707,1708],{},"Dashed border style",[1224,1710,1711,1716,1720],{},[1242,1712,1713],{},[428,1714,1715],{},"borderColor",[1242,1717,1718],{},[428,1719,1149],{},[1242,1721,1722],{},"Light gray border (light mode)",[1224,1724,1725,1730,1734],{},[1242,1726,1727],{},[428,1728,1729],{},"borderRadius",[1242,1731,1732],{},[428,1733,1169],{},[1242,1735,1165],{},[1224,1737,1738,1743,1748],{},[1242,1739,1740],{},[428,1741,1742],{},"overflow",[1242,1744,1745],{},[428,1746,1747],{},"hidden",[1242,1749,1750],{},"Clip overflowing content",[1224,1752,1753,1758,1763],{},[1242,1754,1755],{},[428,1756,1757],{},"opacity",[1242,1759,1760],{},[428,1761,1762],{},"0.75",[1242,1764,1765],{},"Slightly transparent",[1224,1767,1768,1773,1777],{},[1242,1769,1770],{},[428,1771,1772],{},"padding",[1242,1774,1775],{},[428,1776,1183],{},[1242,1778,1779],{},"One spacing unit of padding",[1224,1781,1782,1787,1790],{},[1242,1783,1784],{},[428,1785,1786],{},"backgroundImage",[1242,1788,1789],{},"Crosshatch pattern",[1242,1791,1792],{},"45° repeating linear gradients",[420,1794,1795],{},[424,1796,1797],{},"Dark mode overrides:",[1218,1799,1800,1810],{},[1221,1801,1802],{},[1224,1803,1804,1806,1808],{},[1227,1805,1627],{},[1227,1807,1630],{},[1227,1809,1539],{},[1237,1811,1812,1825],{},[1224,1813,1814,1818,1822],{},[1242,1815,1816],{},[428,1817,1715],{},[1242,1819,1820],{},[428,1821,1153],{},[1242,1823,1824],{},"Lighter gray border for dark backgrounds",[1224,1826,1827,1831,1834],{},[1242,1828,1829],{},[428,1830,1786],{},[1242,1832,1833],{},"Crosshatch pattern (white)",[1242,1835,1836,1837,1839],{},"Same pattern with ",[428,1838,1193],{}," stripes",[420,1841,1842],{},[436,1843,1844],{"href":104},"Learn more about recipes →",[416,1846,1848],{"id":1847},"best-practices","Best Practices",[448,1850,1851,1857,1863,1873],{},[451,1852,1853,1856],{},[424,1854,1855],{},"Set explicit dimensions",": The Placeholder has no inherent width or height. Always set dimensions using utility classes or inline styles so the placeholder represents the space it's standing in for.",[451,1858,1859,1862],{},[424,1860,1861],{},"Use for prototyping, not production",": Placeholders are development aids. Replace them with real content or meaningful empty states before shipping to users.",[451,1864,1865,1868,1869,1872],{},[424,1866,1867],{},"Override base styles for branding",": If your design system uses a different placeholder convention (e.g., dotted borders, different colors), override the ",[428,1870,1871],{},"base"," styles in the recipe options rather than wrapping with extra CSS.",[451,1874,1875,1878],{},[424,1876,1877],{},"Combine with text labels",": Add descriptive text inside the placeholder (e.g., \"Hero Image\" or \"Sidebar Widget\") to communicate what content belongs in each area.",[416,1880,1882],{"id":1881},"faq","FAQ",[1884,1885,1886,1895,1903,1920],"accordion",{},[1887,1888,1891,1892,1894],"accordion-item",{"icon":1889,"label":1890},"i-lucide-circle-help","Why doesn't the Placeholder recipe have size or color variants?","Placeholders are visual aids with a single, recognizable appearance. Adding variants would complicate a component whose purpose is to be a simple stand-in. Control dimensions through utility classes or inline styles, and override colors through the ",[428,1893,1871],{}," option if needed.",[1887,1896,1898,1899,1902],{"icon":1889,"label":1897},"How do I control the size of a placeholder?","Apply size utilities directly on the element. For example, use ",[428,1900,1901],{},"class=\"_height:8 _width:full\""," to set the height to 8 spacing units and the width to 100%. You can also use inline styles for specific pixel or percentage values.",[1887,1904,1906,1907,1909,1910,1912,1913,1915,1916,1919],{"icon":1889,"label":1905},"Can I use the Placeholder recipe without the design tokens preset?","The Placeholder recipe references design tokens like ",[428,1908,1149],{},", ",[428,1911,1169],{},", and ",[428,1914,1690],{}," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[428,1917,1918],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[1887,1921,1923,1924,1927,1928,1190,1930,1932],{"icon":1889,"label":1922},"How does the hatch pattern work?","The pattern is created with a single ",[428,1925,1926],{},"repeating-linear-gradient"," at 45°. The gradient alternates between transparent and a semi-transparent stripe (",[428,1929,1189],{},[428,1931,1193],{}," in dark mode), producing diagonal lines across the container.",[1934,1935,1936],"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);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":517,"searchDepth":558,"depth":558,"links":1938},[1939,1940,1941,1942,1943,1944,1945,1948,1951,1952],{"id":418,"depth":558,"text":21},{"id":442,"depth":558,"text":443},{"id":489,"depth":558,"text":490},{"id":1133,"depth":558,"text":1134},{"id":1212,"depth":558,"text":1213},{"id":1306,"depth":558,"text":306},{"id":1327,"depth":558,"text":1328,"children":1946},[1947],{"id":1332,"depth":581,"text":1333},{"id":1509,"depth":558,"text":1510,"children":1949},[1950],{"id":1513,"depth":581,"text":1516},{"id":1847,"depth":558,"text":1848},{"id":1881,"depth":558,"text":1882},"A visual placeholder container with a dashed border and hatch pattern for layout prototyping, wireframing, and empty states. Uses the recipe system with dark mode support.","md",null,{},{"title":286,"description":1953},{"loc":287},"IYXK09nhJV6c9XQt8YkLuBhlP6XEwW6sv30E7gnowqw",[1961,1963],{"title":282,"path":283,"stem":284,"description":1962,"children":-1},"A floating label component for supplementary information, composed of a content bubble and directional arrow. Supports multiple colors, visual styles, and sizes through the recipe system.",{"title":290,"path":291,"stem":292,"description":1964,"children":-1},"A progress indicator component with a track and fill bar. Supports multiple colors, sizes, orientations, inverted fill direction, and indeterminate animations through the recipe system.",1775666110868]