[{"data":1,"prerenderedAt":2906},["ShallowReactive",2],{"navigation_docs":3,"-docs-components-composables-skeleton":406,"-docs-components-composables-skeleton-surround":2901},[4,45,134,150,165,239,289,362],{"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],{"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":88,"path":290,"stem":291,"children":292,"icon":6},"/docs/utilities","docs/07.utilities/00.index",[293,294,297],{"title":21,"path":290,"stem":291,"icon":51},{"title":172,"path":295,"stem":296,"icon":175},"/docs/utilities/presets","docs/07.utilities/01.presets",{"title":118,"icon":91,"defaultOpen":177,"path":298,"stem":299,"children":300,"page":6},"/docs/utilities/composables","docs/07.utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":6},"Accessibility","/docs/utilities/composables/accessibility","docs/07.utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":6},"Animations","/docs/utilities/composables/animations","docs/07.utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":6},"Backgrounds","/docs/utilities/composables/backgrounds","docs/07.utilities/02.composables/02.backgrounds",{"title":186,"path":314,"stem":315,"icon":6},"/docs/utilities/composables/borders","docs/07.utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":6},"Effects","/docs/utilities/composables/effects","docs/07.utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":6},"Filters","/docs/utilities/composables/filters","docs/07.utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":6},"Flexbox & Grid","/docs/utilities/composables/flexbox-grid","docs/07.utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":6},"Interactivity","/docs/utilities/composables/interactivity","docs/07.utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":6},"Layout","/docs/utilities/composables/layout","docs/07.utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":6},"Sizing","/docs/utilities/composables/sizing","docs/07.utilities/02.composables/09.sizing",{"title":228,"path":341,"stem":342,"icon":6},"/docs/utilities/composables/spacing","docs/07.utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":6},"SVG","/docs/utilities/composables/svg","docs/07.utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":6},"Tables","/docs/utilities/composables/tables","docs/07.utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":6},"Transforms","/docs/utilities/composables/transforms","docs/07.utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":6},"Transitions","/docs/utilities/composables/transitions","docs/07.utilities/02.composables/14.transitions",{"title":232,"path":360,"stem":361,"icon":6},"/docs/utilities/composables/typography","docs/07.utilities/02.composables/15.typography",{"title":93,"path":363,"stem":364,"children":365,"icon":6},"/docs/modifiers","docs/08.modifiers/00.index",[366,367,370],{"title":21,"path":363,"stem":364,"icon":51},{"title":172,"path":368,"stem":369,"icon":175},"/docs/modifiers/presets","docs/08.modifiers/01.presets",{"title":118,"icon":96,"defaultOpen":177,"path":371,"stem":372,"children":373,"page":6},"/docs/modifiers/composables","docs/08.modifiers/02.composables",[374,378,382,386,390,394,398,402],{"title":375,"path":376,"stem":377,"icon":6},"ARIA State","/docs/modifiers/composables/aria-state","docs/08.modifiers/02.composables/00.aria-state",{"title":379,"path":380,"stem":381,"icon":6},"Directional","/docs/modifiers/composables/directional","docs/08.modifiers/02.composables/01.directional",{"title":383,"path":384,"stem":385,"icon":6},"Form State","/docs/modifiers/composables/form-state","docs/08.modifiers/02.composables/02.form-state",{"title":387,"path":388,"stem":389,"icon":6},"Media & Preferences","/docs/modifiers/composables/media-preferences","docs/08.modifiers/02.composables/03.media-preferences",{"title":391,"path":392,"stem":393,"icon":6},"Other State","/docs/modifiers/composables/other-state","docs/08.modifiers/02.composables/04.other-state",{"title":395,"path":396,"stem":397,"icon":6},"Pseudo-Elements","/docs/modifiers/composables/pseudo-elements","docs/08.modifiers/02.composables/05.pseudo-elements",{"title":399,"path":400,"stem":401,"icon":6},"Pseudo-State","/docs/modifiers/composables/pseudo-state","docs/08.modifiers/02.composables/06.pseudo-state",{"title":403,"path":404,"stem":405,"icon":6},"Structural","/docs/modifiers/composables/structural","docs/08.modifiers/02.composables/07.structural",{"id":407,"title":278,"body":408,"description":2895,"extension":861,"links":2896,"meta":2897,"navigation":177,"path":279,"seo":2898,"sitemap":2899,"stem":280,"__hash__":2900},"docs/docs/06.components/02.composables/08.skeleton.md",{"type":409,"value":410,"toc":2875},"minimark",[411,415,433,440,444,447,497,501,1373,1377,1386,1389,1394,1398,1491,1509,1512,1521,1524,1567,1581,1585,1592,1656,1669,1672,1684,1734,1749,1910,1918,2009,2013,2017,2022,2217,2221,2228,2379,2384,2388,2394,2397,2402,2509,2514,2569,2574,2578,2641,2645,2871],[412,413,21],"h2",{"id":414},"overview",[416,417,418,419,422,423,427,428,432],"p",{},"The ",[420,421,278],"strong",{}," is a loading placeholder element used to indicate that content is being fetched or processed. The ",[424,425,426],"code",{},"useSkeletonRecipe()"," composable creates a fully configured ",[429,430,431],"a",{"href":104},"recipe"," with size and rounded options, plus a built-in pulse animation via keyframes — no additional CSS required.",[416,434,435,436,439],{},"The Skeleton recipe integrates directly with the default ",[429,437,438],{"href":173},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[412,441,443],{"id":442},"why-use-the-skeleton-recipe","Why use the Skeleton recipe?",[416,445,446],{},"The Skeleton recipe helps you:",[448,449,450,457,467,473,479,485,491],"ul",{},[451,452,453,456],"li",{},[420,454,455],{},"Ship faster with sensible defaults",": Get 5 sizes and a rounded option out of the box with a single composable call.",[451,458,459,462,463,466],{},[420,460,461],{},"Animate without extra CSS",": The pulse keyframes animation is registered automatically when you use the recipe — no manual ",[424,464,465],{},"@keyframes"," definition needed.",[451,468,469,472],{},[420,470,471],{},"Maintain consistency",": All skeleton placeholders share the same animation timing, colors, and border radius across your application.",[451,474,475,478],{},[420,476,477],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[451,480,481,484],{},[420,482,483],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid size values at compile time.",[451,486,487,490],{},[420,488,489],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[451,492,493,496],{},[420,494,495],{},"Support dark mode",": Background colors adapt automatically between light and dark color schemes.",[412,498,500],{"id":499},"usage","Usage",[502,503,505,510,517,765,769,776,1364,1368],"steps",{"level":504},"4",[506,507,509],"h4",{"id":508},"register-the-recipe","Register the recipe",[416,511,512,513,516],{},"Add the Skeleton recipe to a local Styleframe instance. The global ",[424,514,515],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[518,519,521,657],"code-tree",{"default-value":520},"src/components/skeleton.styleframe.ts",[522,523,528],"pre",{"className":524,"code":525,"filename":520,"language":526,"meta":527,"style":527},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useSkeletonRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst skeleton = useSkeletonRecipe(s);\n\nexport default s;\n","ts","",[424,529,530,566,589,595,616,621,638,643],{"__ignoreMap":527},[531,532,535,539,543,547,550,553,556,560,563],"span",{"class":533,"line":534},"line",1,[531,536,538],{"class":537},"s7zQu","import",[531,540,542],{"class":541},"sMK4o"," {",[531,544,546],{"class":545},"sTEyZ"," styleframe",[531,548,549],{"class":541}," }",[531,551,552],{"class":537}," from",[531,554,555],{"class":541}," '",[531,557,559],{"class":558},"sfazB","virtual:styleframe",[531,561,562],{"class":541},"'",[531,564,565],{"class":541},";\n",[531,567,569,571,573,576,578,580,582,585,587],{"class":533,"line":568},2,[531,570,538],{"class":537},[531,572,542],{"class":541},[531,574,575],{"class":545}," useSkeletonRecipe",[531,577,549],{"class":541},[531,579,552],{"class":537},[531,581,555],{"class":541},[531,583,584],{"class":558},"@styleframe/theme",[531,586,562],{"class":541},[531,588,565],{"class":541},[531,590,592],{"class":533,"line":591},3,[531,593,594],{"emptyLinePlaceholder":177},"\n",[531,596,598,602,605,608,611,614],{"class":533,"line":597},4,[531,599,601],{"class":600},"spNyl","const",[531,603,604],{"class":545}," s ",[531,606,607],{"class":541},"=",[531,609,546],{"class":610},"s2Zo4",[531,612,613],{"class":545},"()",[531,615,565],{"class":541},[531,617,619],{"class":533,"line":618},5,[531,620,594],{"emptyLinePlaceholder":177},[531,622,624,626,629,631,633,636],{"class":533,"line":623},6,[531,625,601],{"class":600},[531,627,628],{"class":545}," skeleton ",[531,630,607],{"class":541},[531,632,575],{"class":610},[531,634,635],{"class":545},"(s)",[531,637,565],{"class":541},[531,639,641],{"class":533,"line":640},7,[531,642,594],{"emptyLinePlaceholder":177},[531,644,646,649,652,655],{"class":533,"line":645},8,[531,647,648],{"class":537},"export",[531,650,651],{"class":537}," default",[531,653,654],{"class":545}," s",[531,656,565],{"class":541},[522,658,660],{"className":524,"code":659,"filename":515,"language":526,"meta":527,"style":527},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[424,661,662,683,710,714,728,732,741,750,754],{"__ignoreMap":527},[531,663,664,666,668,670,672,674,676,679,681],{"class":533,"line":534},[531,665,538],{"class":537},[531,667,542],{"class":541},[531,669,546],{"class":545},[531,671,549],{"class":541},[531,673,552],{"class":537},[531,675,555],{"class":541},[531,677,678],{"class":558},"styleframe",[531,680,562],{"class":541},[531,682,565],{"class":541},[531,684,685,687,689,692,695,698,700,702,704,706,708],{"class":533,"line":568},[531,686,538],{"class":537},[531,688,542],{"class":541},[531,690,691],{"class":545}," useDesignTokensPreset",[531,693,694],{"class":541},",",[531,696,697],{"class":545}," useUtilitiesPreset",[531,699,549],{"class":541},[531,701,552],{"class":537},[531,703,555],{"class":541},[531,705,584],{"class":558},[531,707,562],{"class":541},[531,709,565],{"class":541},[531,711,712],{"class":533,"line":591},[531,713,594],{"emptyLinePlaceholder":177},[531,715,716,718,720,722,724,726],{"class":533,"line":597},[531,717,601],{"class":600},[531,719,604],{"class":545},[531,721,607],{"class":541},[531,723,546],{"class":610},[531,725,613],{"class":545},[531,727,565],{"class":541},[531,729,730],{"class":533,"line":618},[531,731,594],{"emptyLinePlaceholder":177},[531,733,734,737,739],{"class":533,"line":623},[531,735,736],{"class":610},"useDesignTokensPreset",[531,738,635],{"class":545},[531,740,565],{"class":541},[531,742,743,746,748],{"class":533,"line":640},[531,744,745],{"class":610},"useUtilitiesPreset",[531,747,635],{"class":545},[531,749,565],{"class":541},[531,751,752],{"class":533,"line":645},[531,753,594],{"emptyLinePlaceholder":177},[531,755,757,759,761,763],{"class":533,"line":756},9,[531,758,648],{"class":537},[531,760,651],{"class":537},[531,762,654],{"class":545},[531,764,565],{"class":541},[506,766,768],{"id":767},"build-the-component","Build the component",[416,770,771,772,775],{},"Import the ",[424,773,774],{},"skeleton"," runtime function from the virtual module and pass variant props to compute class names:",[777,778,779,1098],"tabs",{},[780,781,784],"tabs-item",{"icon":782,"label":783},"i-devicon-react","React",[522,785,788],{"className":524,"code":786,"filename":787,"language":526,"meta":527,"style":527},"import { skeleton } from \"virtual:styleframe\";\n\ninterface SkeletonProps {\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n    rounded?: boolean;\n    className?: string;\n}\n\nexport function Skeleton({\n    size = \"md\",\n    rounded = false,\n    className,\n}: SkeletonProps) {\n    return (\n        \u003Cdiv\n            className={`${skeleton({ size, rounded: String(rounded) })} ${className ?? \"\"}`}\n            aria-hidden=\"true\"\n        />\n    );\n}\n","src/components/Skeleton.tsx",[424,789,790,813,817,829,884,896,908,913,917,930,948,961,968,981,990,999,1057,1079,1085,1093],{"__ignoreMap":527},[531,791,792,794,796,799,801,803,806,808,811],{"class":533,"line":534},[531,793,538],{"class":537},[531,795,542],{"class":541},[531,797,798],{"class":545}," skeleton",[531,800,549],{"class":541},[531,802,552],{"class":537},[531,804,805],{"class":541}," \"",[531,807,559],{"class":558},[531,809,810],{"class":541},"\"",[531,812,565],{"class":541},[531,814,815],{"class":533,"line":568},[531,816,594],{"emptyLinePlaceholder":177},[531,818,819,822,826],{"class":533,"line":591},[531,820,821],{"class":600},"interface",[531,823,825],{"class":824},"sBMFI"," SkeletonProps",[531,827,828],{"class":541}," {\n",[531,830,831,835,838,840,843,845,848,850,853,855,857,859,862,864,866,868,871,873,875,877,880,882],{"class":533,"line":597},[531,832,834],{"class":833},"swJcz","    size",[531,836,837],{"class":541},"?:",[531,839,805],{"class":541},[531,841,842],{"class":558},"xs",[531,844,810],{"class":541},[531,846,847],{"class":541}," |",[531,849,805],{"class":541},[531,851,852],{"class":558},"sm",[531,854,810],{"class":541},[531,856,847],{"class":541},[531,858,805],{"class":541},[531,860,861],{"class":558},"md",[531,863,810],{"class":541},[531,865,847],{"class":541},[531,867,805],{"class":541},[531,869,870],{"class":558},"lg",[531,872,810],{"class":541},[531,874,847],{"class":541},[531,876,805],{"class":541},[531,878,879],{"class":558},"xl",[531,881,810],{"class":541},[531,883,565],{"class":541},[531,885,886,889,891,894],{"class":533,"line":618},[531,887,888],{"class":833},"    rounded",[531,890,837],{"class":541},[531,892,893],{"class":824}," boolean",[531,895,565],{"class":541},[531,897,898,901,903,906],{"class":533,"line":623},[531,899,900],{"class":833},"    className",[531,902,837],{"class":541},[531,904,905],{"class":824}," string",[531,907,565],{"class":541},[531,909,910],{"class":533,"line":640},[531,911,912],{"class":541},"}\n",[531,914,915],{"class":533,"line":645},[531,916,594],{"emptyLinePlaceholder":177},[531,918,919,921,924,927],{"class":533,"line":756},[531,920,648],{"class":537},[531,922,923],{"class":600}," function",[531,925,926],{"class":610}," Skeleton",[531,928,929],{"class":541},"({\n",[531,931,933,936,939,941,943,945],{"class":533,"line":932},10,[531,934,834],{"class":935},"sHdIc",[531,937,938],{"class":541}," =",[531,940,805],{"class":541},[531,942,861],{"class":558},[531,944,810],{"class":541},[531,946,947],{"class":541},",\n",[531,949,951,953,955,959],{"class":533,"line":950},11,[531,952,888],{"class":935},[531,954,938],{"class":541},[531,956,958],{"class":957},"sfNiH"," false",[531,960,947],{"class":541},[531,962,964,966],{"class":533,"line":963},12,[531,965,900],{"class":935},[531,967,947],{"class":541},[531,969,971,974,976,979],{"class":533,"line":970},13,[531,972,973],{"class":541},"}:",[531,975,825],{"class":824},[531,977,978],{"class":541},")",[531,980,828],{"class":541},[531,982,984,987],{"class":533,"line":983},14,[531,985,986],{"class":537},"    return",[531,988,989],{"class":833}," (\n",[531,991,993,996],{"class":533,"line":992},15,[531,994,995],{"class":541},"        \u003C",[531,997,998],{"class":935},"div\n",[531,1000,1002,1005,1008,1011,1013,1016,1019,1022,1024,1027,1030,1033,1036,1039,1041,1043,1046,1049,1052,1055],{"class":533,"line":1001},16,[531,1003,1004],{"class":545},"            className",[531,1006,1007],{"class":541},"={",[531,1009,1010],{"class":541},"`${",[531,1012,774],{"class":610},[531,1014,1015],{"class":545},"(",[531,1017,1018],{"class":541},"{",[531,1020,1021],{"class":545}," size",[531,1023,694],{"class":541},[531,1025,1026],{"class":833}," rounded",[531,1028,1029],{"class":541},":",[531,1031,1032],{"class":610}," String",[531,1034,1035],{"class":545},"(rounded) ",[531,1037,1038],{"class":541},"}",[531,1040,978],{"class":545},[531,1042,1038],{"class":541},[531,1044,1045],{"class":541}," ${",[531,1047,1048],{"class":545},"className ",[531,1050,1051],{"class":541},"??",[531,1053,1054],{"class":541}," \"\"}`",[531,1056,912],{"class":541},[531,1058,1060,1063,1066,1069,1071,1073,1076],{"class":533,"line":1059},17,[531,1061,1062],{"class":545},"            aria",[531,1064,1065],{"class":541},"-",[531,1067,1068],{"class":545},"hidden",[531,1070,607],{"class":541},[531,1072,810],{"class":541},[531,1074,1075],{"class":558},"true",[531,1077,1078],{"class":541},"\"\n",[531,1080,1082],{"class":533,"line":1081},18,[531,1083,1084],{"class":541},"        />\n",[531,1086,1088,1091],{"class":533,"line":1087},19,[531,1089,1090],{"class":833},"    )",[531,1092,565],{"class":541},[531,1094,1096],{"class":533,"line":1095},20,[531,1097,912],{"class":541},[780,1099,1102],{"icon":1100,"label":1101},"i-devicon-vuejs","Vue",[522,1103,1108],{"className":1104,"code":1105,"filename":1106,"language":1107,"meta":527,"style":527},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { skeleton } from \"virtual:styleframe\";\n\nconst {\n    size = \"md\",\n    rounded = false,\n} = defineProps\u003C{\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n    rounded?: boolean;\n}>();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv\n        :class=\"skeleton({ size, rounded: String(rounded) })\"\n        aria-hidden=\"true\"\n    />\n\u003C/template>\n","src/components/Skeleton.vue","vue",[424,1109,1110,1135,1155,1159,1165,1180,1191,1203,1249,1259,1268,1277,1281,1290,1297,1338,1351,1356],{"__ignoreMap":527},[531,1111,1112,1115,1118,1121,1124,1126,1128,1130,1132],{"class":533,"line":534},[531,1113,1114],{"class":541},"\u003C",[531,1116,1117],{"class":833},"script",[531,1119,1120],{"class":600}," setup",[531,1122,1123],{"class":600}," lang",[531,1125,607],{"class":541},[531,1127,810],{"class":541},[531,1129,526],{"class":558},[531,1131,810],{"class":541},[531,1133,1134],{"class":541},">\n",[531,1136,1137,1139,1141,1143,1145,1147,1149,1151,1153],{"class":533,"line":568},[531,1138,538],{"class":537},[531,1140,542],{"class":541},[531,1142,798],{"class":545},[531,1144,549],{"class":541},[531,1146,552],{"class":537},[531,1148,805],{"class":541},[531,1150,559],{"class":558},[531,1152,810],{"class":541},[531,1154,565],{"class":541},[531,1156,1157],{"class":533,"line":591},[531,1158,594],{"emptyLinePlaceholder":177},[531,1160,1161,1163],{"class":533,"line":597},[531,1162,601],{"class":600},[531,1164,828],{"class":541},[531,1166,1167,1170,1172,1174,1176,1178],{"class":533,"line":618},[531,1168,1169],{"class":545},"    size ",[531,1171,607],{"class":541},[531,1173,805],{"class":541},[531,1175,861],{"class":558},[531,1177,810],{"class":541},[531,1179,947],{"class":541},[531,1181,1182,1185,1187,1189],{"class":533,"line":623},[531,1183,1184],{"class":545},"    rounded ",[531,1186,607],{"class":541},[531,1188,958],{"class":957},[531,1190,947],{"class":541},[531,1192,1193,1195,1197,1200],{"class":533,"line":640},[531,1194,1038],{"class":541},[531,1196,938],{"class":541},[531,1198,1199],{"class":610}," defineProps",[531,1201,1202],{"class":541},"\u003C{\n",[531,1204,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241,1243,1245,1247],{"class":533,"line":645},[531,1206,834],{"class":833},[531,1208,837],{"class":541},[531,1210,805],{"class":541},[531,1212,842],{"class":558},[531,1214,810],{"class":541},[531,1216,847],{"class":541},[531,1218,805],{"class":541},[531,1220,852],{"class":558},[531,1222,810],{"class":541},[531,1224,847],{"class":541},[531,1226,805],{"class":541},[531,1228,861],{"class":558},[531,1230,810],{"class":541},[531,1232,847],{"class":541},[531,1234,805],{"class":541},[531,1236,870],{"class":558},[531,1238,810],{"class":541},[531,1240,847],{"class":541},[531,1242,805],{"class":541},[531,1244,879],{"class":558},[531,1246,810],{"class":541},[531,1248,565],{"class":541},[531,1250,1251,1253,1255,1257],{"class":533,"line":756},[531,1252,888],{"class":833},[531,1254,837],{"class":541},[531,1256,893],{"class":824},[531,1258,565],{"class":541},[531,1260,1261,1264,1266],{"class":533,"line":932},[531,1262,1263],{"class":541},"}>",[531,1265,613],{"class":545},[531,1267,565],{"class":541},[531,1269,1270,1273,1275],{"class":533,"line":950},[531,1271,1272],{"class":541},"\u003C/",[531,1274,1117],{"class":833},[531,1276,1134],{"class":541},[531,1278,1279],{"class":533,"line":963},[531,1280,594],{"emptyLinePlaceholder":177},[531,1282,1283,1285,1288],{"class":533,"line":970},[531,1284,1114],{"class":541},[531,1286,1287],{"class":833},"template",[531,1289,1134],{"class":541},[531,1291,1292,1295],{"class":533,"line":983},[531,1293,1294],{"class":541},"    \u003C",[531,1296,998],{"class":833},[531,1298,1299,1302,1305,1307,1309,1311,1314,1317,1320,1323,1326,1329,1331,1333,1336],{"class":533,"line":992},[531,1300,1301],{"class":541},"        :",[531,1303,1304],{"class":600},"class",[531,1306,607],{"class":541},[531,1308,810],{"class":541},[531,1310,774],{"class":610},[531,1312,1313],{"class":541},"({ ",[531,1315,1316],{"class":545},"size",[531,1318,1319],{"class":541},", ",[531,1321,1322],{"class":833},"rounded",[531,1324,1325],{"class":541},": ",[531,1327,1328],{"class":610},"String",[531,1330,1015],{"class":541},[531,1332,1322],{"class":545},[531,1334,1335],{"class":541},") })",[531,1337,1078],{"class":541},[531,1339,1340,1343,1345,1347,1349],{"class":533,"line":1001},[531,1341,1342],{"class":600},"        aria-hidden",[531,1344,607],{"class":541},[531,1346,810],{"class":541},[531,1348,1075],{"class":558},[531,1350,1078],{"class":541},[531,1352,1353],{"class":533,"line":1059},[531,1354,1355],{"class":541},"    />\n",[531,1357,1358,1360,1362],{"class":533,"line":1081},[531,1359,1272],{"class":541},[531,1361,1287],{"class":833},[531,1363,1134],{"class":541},[506,1365,1367],{"id":1366},"see-it-in-action","See it in action",[1369,1370],"story-preview",{"story":1371,":panel":1372},"theme-recipes-skeleton--default","false",[412,1374,1376],{"id":1375},"sizes","Sizes",[416,1378,1379,1380,1382,1383,1385],{},"Five size variants from ",[424,1381,842],{}," to ",[424,1384,879],{}," control the height of the skeleton placeholder. The width is not set by the recipe — use utility classes or CSS to control it based on the content being loaded.",[1369,1387],{"story":1388,":panel":1075},"theme-recipes-skeleton--medium",[1390,1391,1393],"h3",{"id":1392},"size-reference","Size Reference",[1369,1395],{"story":1396,":height":1397},"theme-recipes-skeleton--all-sizes","400",[1399,1400,1401,1417],"table",{},[1402,1403,1404],"thead",{},[1405,1406,1407,1411,1414],"tr",{},[1408,1409,1410],"th",{},"Size",[1408,1412,1413],{},"Height Token",[1408,1415,1416],{},"Use Case",[1418,1419,1420,1435,1449,1463,1477],"tbody",{},[1405,1421,1422,1427,1432],{},[1423,1424,1425],"td",{},[424,1426,842],{},[1423,1428,1429],{},[424,1430,1431],{},"@0.5",[1423,1433,1434],{},"Single-line metadata, small labels",[1405,1436,1437,1441,1446],{},[1423,1438,1439],{},[424,1440,852],{},[1423,1442,1443],{},[424,1444,1445],{},"@0.75",[1423,1447,1448],{},"Body text lines, descriptions",[1405,1450,1451,1455,1460],{},[1423,1452,1453],{},[424,1454,861],{},[1423,1456,1457],{},[424,1458,1459],{},"@1",[1423,1461,1462],{},"Default. Standard content lines",[1405,1464,1465,1469,1474],{},[1423,1466,1467],{},[424,1468,870],{},[1423,1470,1471],{},[424,1472,1473],{},"@1.5",[1423,1475,1476],{},"Headings, larger text blocks",[1405,1478,1479,1483,1488],{},[1423,1480,1481],{},[424,1482,879],{},[1423,1484,1485],{},[424,1486,1487],{},"@2",[1423,1489,1490],{},"Titles, prominent content areas",[1492,1493,1494,1497,1498,1500,1501,1504,1505,1508],"note",{},[420,1495,1496],{},"Good to know:"," The ",[424,1499,1316],{}," variant only controls the height. Set the width using utility classes like ",[424,1502,1503],{},"_width:[250px]"," or ",[424,1506,1507],{},"_width:full"," to match the shape of the content being loaded.",[412,1510,1511],{"id":1322},"Rounded",[416,1513,418,1514,1516,1517,1520],{},[424,1515,1322],{}," variant applies a fully circular border radius (",[424,1518,1519],{},"@border-radius.full","), turning the skeleton into a pill or circle shape. This is useful for placeholder avatars and circular icons.",[1369,1522],{"story":1523,":panel":1075},"theme-recipes-skeleton--rounded",[1399,1525,1526,1538],{},[1402,1527,1528],{},[1405,1529,1530,1533,1536],{},[1408,1531,1532],{},"Value",[1408,1534,1535],{},"Border Radius",[1408,1537,1416],{},[1418,1539,1540,1554],{},[1405,1541,1542,1546,1551],{},[1423,1543,1544],{},[424,1545,1372],{},[1423,1547,1548],{},[424,1549,1550],{},"@border-radius.md",[1423,1552,1553],{},"Default. Rectangular placeholders for text and content blocks",[1405,1555,1556,1560,1564],{},[1423,1557,1558],{},[424,1559,1075],{},[1423,1561,1562],{},[424,1563,1519],{},[1423,1565,1566],{},"Circular or pill-shaped placeholders for avatars and icons",[1568,1569,1570,1573,1574,1576,1577,1580],"tip",{},[420,1571,1572],{},"Pro tip:"," Combine ",[424,1575,1322],{}," with equal width and height utility classes to create a perfect circle placeholder: ",[424,1578,1579],{},"\u003CSkeleton size=\"xl\" :rounded=\"true\" class=\"_width:3 _height:3\" />",".",[412,1582,1584],{"id":1583},"animation","Animation",[416,1586,1587,1588,1591],{},"The Skeleton recipe includes a built-in ",[424,1589,1590],{},"skeleton-pulse"," keyframes animation that fades the element between full and half opacity on a 2-second loop. The keyframes are registered automatically when the recipe is used — no additional setup is needed.",[1399,1593,1594,1606],{},[1402,1595,1596],{},[1405,1597,1598,1601,1603],{},[1408,1599,1600],{},"Property",[1408,1602,1532],{},[1408,1604,1605],{},"Token",[1418,1607,1608,1620,1631,1644],{},[1405,1609,1610,1613,1617],{},[1423,1611,1612],{},"Animation name",[1423,1614,1615],{},[424,1616,1590],{},[1423,1618,1619],{},"—",[1405,1621,1622,1624,1629],{},[1423,1623,202],{},[1423,1625,1626],{},[424,1627,1628],{},"2s",[1423,1630,1619],{},[1405,1632,1633,1636,1639],{},[1423,1634,1635],{},"Timing function",[1423,1637,1638],{},"ease-in-out",[1423,1640,1641],{},[424,1642,1643],{},"@easing.ease-in-out",[1405,1645,1646,1649,1654],{},[1423,1647,1648],{},"Iteration count",[1423,1650,1651],{},[424,1652,1653],{},"infinite",[1423,1655,1619],{},[416,1657,418,1658,1660,1661,1664,1665,1668],{},[424,1659,1590],{}," keyframes cycle between ",[424,1662,1663],{},"opacity: 1"," at 0% and 100%, and ",[424,1666,1667],{},"opacity: 0.5"," at 50%.",[412,1670,302],{"id":1671},"accessibility",[448,1673,1674],{},[451,1675,1676,1679,1680,1683],{},[420,1677,1678],{},"Hide skeleton placeholders from screen readers."," Skeleton elements are purely visual and carry no meaningful content. Add ",[424,1681,1682],{},"aria-hidden=\"true\""," to each skeleton element so assistive technology ignores them.",[522,1685,1689],{"className":1686,"code":1687,"language":1688,"meta":527,"style":527},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Correct: hidden from assistive technology -->\n\u003Cdiv class=\"...\" aria-hidden=\"true\">\u003C/div>\n","html",[424,1690,1691,1697],{"__ignoreMap":527},[531,1692,1693],{"class":533,"line":534},[531,1694,1696],{"class":1695},"sHwdD","\u003C!-- Correct: hidden from assistive technology -->\n",[531,1698,1699,1701,1704,1707,1709,1711,1714,1716,1719,1721,1723,1725,1727,1730,1732],{"class":533,"line":568},[531,1700,1114],{"class":541},[531,1702,1703],{"class":833},"div",[531,1705,1706],{"class":600}," class",[531,1708,607],{"class":541},[531,1710,810],{"class":541},[531,1712,1713],{"class":558},"...",[531,1715,810],{"class":541},[531,1717,1718],{"class":600}," aria-hidden",[531,1720,607],{"class":541},[531,1722,810],{"class":541},[531,1724,1075],{"class":558},[531,1726,810],{"class":541},[531,1728,1729],{"class":541},">\u003C/",[531,1731,1703],{"class":833},[531,1733,1134],{"class":541},[448,1735,1736],{},[451,1737,1738,1744,1745,1748],{},[420,1739,1740,1741,1580],{},"Mark the loading container with ",[424,1742,1743],{},"aria-busy"," Wrap skeleton placeholders in a container with ",[424,1746,1747],{},"aria-busy=\"true\""," while loading, and remove it when real content appears. This tells screen readers the region is updating.",[522,1750,1752],{"className":1686,"code":1751,"language":1688,"meta":527,"style":527},"\u003C!-- While loading -->\n\u003Cdiv aria-busy=\"true\">\n    \u003Cdiv class=\"...\" aria-hidden=\"true\">\u003C/div>\n    \u003Cdiv class=\"...\" aria-hidden=\"true\">\u003C/div>\n\u003C/div>\n\n\u003C!-- After loading -->\n\u003Cdiv>\n    \u003Ch2>Actual content\u003C/h2>\n    \u003Cp>Real description text.\u003C/p>\n\u003C/div>\n",[424,1753,1754,1759,1778,1810,1842,1850,1854,1859,1867,1885,1902],{"__ignoreMap":527},[531,1755,1756],{"class":533,"line":534},[531,1757,1758],{"class":1695},"\u003C!-- While loading -->\n",[531,1760,1761,1763,1765,1768,1770,1772,1774,1776],{"class":533,"line":568},[531,1762,1114],{"class":541},[531,1764,1703],{"class":833},[531,1766,1767],{"class":600}," aria-busy",[531,1769,607],{"class":541},[531,1771,810],{"class":541},[531,1773,1075],{"class":558},[531,1775,810],{"class":541},[531,1777,1134],{"class":541},[531,1779,1780,1782,1784,1786,1788,1790,1792,1794,1796,1798,1800,1802,1804,1806,1808],{"class":533,"line":591},[531,1781,1294],{"class":541},[531,1783,1703],{"class":833},[531,1785,1706],{"class":600},[531,1787,607],{"class":541},[531,1789,810],{"class":541},[531,1791,1713],{"class":558},[531,1793,810],{"class":541},[531,1795,1718],{"class":600},[531,1797,607],{"class":541},[531,1799,810],{"class":541},[531,1801,1075],{"class":558},[531,1803,810],{"class":541},[531,1805,1729],{"class":541},[531,1807,1703],{"class":833},[531,1809,1134],{"class":541},[531,1811,1812,1814,1816,1818,1820,1822,1824,1826,1828,1830,1832,1834,1836,1838,1840],{"class":533,"line":597},[531,1813,1294],{"class":541},[531,1815,1703],{"class":833},[531,1817,1706],{"class":600},[531,1819,607],{"class":541},[531,1821,810],{"class":541},[531,1823,1713],{"class":558},[531,1825,810],{"class":541},[531,1827,1718],{"class":600},[531,1829,607],{"class":541},[531,1831,810],{"class":541},[531,1833,1075],{"class":558},[531,1835,810],{"class":541},[531,1837,1729],{"class":541},[531,1839,1703],{"class":833},[531,1841,1134],{"class":541},[531,1843,1844,1846,1848],{"class":533,"line":618},[531,1845,1272],{"class":541},[531,1847,1703],{"class":833},[531,1849,1134],{"class":541},[531,1851,1852],{"class":533,"line":623},[531,1853,594],{"emptyLinePlaceholder":177},[531,1855,1856],{"class":533,"line":640},[531,1857,1858],{"class":1695},"\u003C!-- After loading -->\n",[531,1860,1861,1863,1865],{"class":533,"line":645},[531,1862,1114],{"class":541},[531,1864,1703],{"class":833},[531,1866,1134],{"class":541},[531,1868,1869,1871,1873,1876,1879,1881,1883],{"class":533,"line":756},[531,1870,1294],{"class":541},[531,1872,412],{"class":833},[531,1874,1875],{"class":541},">",[531,1877,1878],{"class":545},"Actual content",[531,1880,1272],{"class":541},[531,1882,412],{"class":833},[531,1884,1134],{"class":541},[531,1886,1887,1889,1891,1893,1896,1898,1900],{"class":533,"line":932},[531,1888,1294],{"class":541},[531,1890,416],{"class":833},[531,1892,1875],{"class":541},[531,1894,1895],{"class":545},"Real description text.",[531,1897,1272],{"class":541},[531,1899,416],{"class":833},[531,1901,1134],{"class":541},[531,1903,1904,1906,1908],{"class":533,"line":950},[531,1905,1272],{"class":541},[531,1907,1703],{"class":833},[531,1909,1134],{"class":541},[448,1911,1912],{},[451,1913,1914,1917],{},[420,1915,1916],{},"Provide a screen-reader-only loading message."," Since skeleton elements are hidden, add a visually hidden text element that announces the loading state to assistive technology.",[522,1919,1921],{"className":1686,"code":1920,"language":1688,"meta":527,"style":527},"\u003Cdiv aria-busy=\"true\">\n    \u003Cspan class=\"_sr-only\">Loading content...\u003C/span>\n    \u003Cdiv class=\"...\" aria-hidden=\"true\">\u003C/div>\n\u003C/div>\n",[424,1922,1923,1941,1969,2001],{"__ignoreMap":527},[531,1924,1925,1927,1929,1931,1933,1935,1937,1939],{"class":533,"line":534},[531,1926,1114],{"class":541},[531,1928,1703],{"class":833},[531,1930,1767],{"class":600},[531,1932,607],{"class":541},[531,1934,810],{"class":541},[531,1936,1075],{"class":558},[531,1938,810],{"class":541},[531,1940,1134],{"class":541},[531,1942,1943,1945,1947,1949,1951,1953,1956,1958,1960,1963,1965,1967],{"class":533,"line":568},[531,1944,1294],{"class":541},[531,1946,531],{"class":833},[531,1948,1706],{"class":600},[531,1950,607],{"class":541},[531,1952,810],{"class":541},[531,1954,1955],{"class":558},"_sr-only",[531,1957,810],{"class":541},[531,1959,1875],{"class":541},[531,1961,1962],{"class":545},"Loading content...",[531,1964,1272],{"class":541},[531,1966,531],{"class":833},[531,1968,1134],{"class":541},[531,1970,1971,1973,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999],{"class":533,"line":591},[531,1972,1294],{"class":541},[531,1974,1703],{"class":833},[531,1976,1706],{"class":600},[531,1978,607],{"class":541},[531,1980,810],{"class":541},[531,1982,1713],{"class":558},[531,1984,810],{"class":541},[531,1986,1718],{"class":600},[531,1988,607],{"class":541},[531,1990,810],{"class":541},[531,1992,1075],{"class":558},[531,1994,810],{"class":541},[531,1996,1729],{"class":541},[531,1998,1703],{"class":833},[531,2000,1134],{"class":541},[531,2002,2003,2005,2007],{"class":533,"line":597},[531,2004,1272],{"class":541},[531,2006,1703],{"class":833},[531,2008,1134],{"class":541},[412,2010,2012],{"id":2011},"customization","Customization",[1390,2014,2016],{"id":2015},"overriding-defaults","Overriding Defaults",[416,2018,418,2019,2021],{},[424,2020,426],{}," 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:",[522,2023,2025],{"className":524,"code":2024,"filename":520,"language":526,"meta":527,"style":527},"import { styleframe } from 'virtual:styleframe';\nimport { useSkeletonRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst skeleton = useSkeletonRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.lg',\n        animationDuration: '1.5s',\n    },\n    defaultVariants: {\n        size: 'sm',\n        rounded: 'false',\n    },\n});\n\nexport default s;\n",[424,2026,2027,2047,2067,2071,2085,2089,2106,2115,2131,2147,2152,2161,2176,2191,2195,2203,2207],{"__ignoreMap":527},[531,2028,2029,2031,2033,2035,2037,2039,2041,2043,2045],{"class":533,"line":534},[531,2030,538],{"class":537},[531,2032,542],{"class":541},[531,2034,546],{"class":545},[531,2036,549],{"class":541},[531,2038,552],{"class":537},[531,2040,555],{"class":541},[531,2042,559],{"class":558},[531,2044,562],{"class":541},[531,2046,565],{"class":541},[531,2048,2049,2051,2053,2055,2057,2059,2061,2063,2065],{"class":533,"line":568},[531,2050,538],{"class":537},[531,2052,542],{"class":541},[531,2054,575],{"class":545},[531,2056,549],{"class":541},[531,2058,552],{"class":537},[531,2060,555],{"class":541},[531,2062,584],{"class":558},[531,2064,562],{"class":541},[531,2066,565],{"class":541},[531,2068,2069],{"class":533,"line":591},[531,2070,594],{"emptyLinePlaceholder":177},[531,2072,2073,2075,2077,2079,2081,2083],{"class":533,"line":597},[531,2074,601],{"class":600},[531,2076,604],{"class":545},[531,2078,607],{"class":541},[531,2080,546],{"class":610},[531,2082,613],{"class":545},[531,2084,565],{"class":541},[531,2086,2087],{"class":533,"line":618},[531,2088,594],{"emptyLinePlaceholder":177},[531,2090,2091,2093,2095,2097,2099,2102,2104],{"class":533,"line":623},[531,2092,601],{"class":600},[531,2094,628],{"class":545},[531,2096,607],{"class":541},[531,2098,575],{"class":610},[531,2100,2101],{"class":545},"(s",[531,2103,694],{"class":541},[531,2105,828],{"class":541},[531,2107,2108,2111,2113],{"class":533,"line":640},[531,2109,2110],{"class":833},"    base",[531,2112,1029],{"class":541},[531,2114,828],{"class":541},[531,2116,2117,2120,2122,2124,2127,2129],{"class":533,"line":645},[531,2118,2119],{"class":833},"        borderRadius",[531,2121,1029],{"class":541},[531,2123,555],{"class":541},[531,2125,2126],{"class":558},"@border-radius.lg",[531,2128,562],{"class":541},[531,2130,947],{"class":541},[531,2132,2133,2136,2138,2140,2143,2145],{"class":533,"line":756},[531,2134,2135],{"class":833},"        animationDuration",[531,2137,1029],{"class":541},[531,2139,555],{"class":541},[531,2141,2142],{"class":558},"1.5s",[531,2144,562],{"class":541},[531,2146,947],{"class":541},[531,2148,2149],{"class":533,"line":932},[531,2150,2151],{"class":541},"    },\n",[531,2153,2154,2157,2159],{"class":533,"line":950},[531,2155,2156],{"class":833},"    defaultVariants",[531,2158,1029],{"class":541},[531,2160,828],{"class":541},[531,2162,2163,2166,2168,2170,2172,2174],{"class":533,"line":963},[531,2164,2165],{"class":833},"        size",[531,2167,1029],{"class":541},[531,2169,555],{"class":541},[531,2171,852],{"class":558},[531,2173,562],{"class":541},[531,2175,947],{"class":541},[531,2177,2178,2181,2183,2185,2187,2189],{"class":533,"line":970},[531,2179,2180],{"class":833},"        rounded",[531,2182,1029],{"class":541},[531,2184,555],{"class":541},[531,2186,1372],{"class":558},[531,2188,562],{"class":541},[531,2190,947],{"class":541},[531,2192,2193],{"class":533,"line":983},[531,2194,2151],{"class":541},[531,2196,2197,2199,2201],{"class":533,"line":992},[531,2198,1038],{"class":541},[531,2200,978],{"class":545},[531,2202,565],{"class":541},[531,2204,2205],{"class":533,"line":1001},[531,2206,594],{"emptyLinePlaceholder":177},[531,2208,2209,2211,2213,2215],{"class":533,"line":1059},[531,2210,648],{"class":537},[531,2212,651],{"class":537},[531,2214,654],{"class":545},[531,2216,565],{"class":541},[1390,2218,2220],{"id":2219},"filtering-variants","Filtering Variants",[416,2222,2223,2224,2227],{},"If you only need a subset of the available sizes, use the ",[424,2225,2226],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[522,2229,2231],{"className":524,"code":2230,"filename":520,"language":526,"meta":527,"style":527},"import { styleframe } from 'virtual:styleframe';\nimport { useSkeletonRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Only generate sm and md sizes\nconst skeleton = useSkeletonRecipe(s, {\n    filter: {\n        size: ['sm', 'md'],\n    },\n});\n\nexport default s;\n",[424,2232,2233,2253,2273,2277,2291,2295,2300,2316,2325,2353,2357,2365,2369],{"__ignoreMap":527},[531,2234,2235,2237,2239,2241,2243,2245,2247,2249,2251],{"class":533,"line":534},[531,2236,538],{"class":537},[531,2238,542],{"class":541},[531,2240,546],{"class":545},[531,2242,549],{"class":541},[531,2244,552],{"class":537},[531,2246,555],{"class":541},[531,2248,559],{"class":558},[531,2250,562],{"class":541},[531,2252,565],{"class":541},[531,2254,2255,2257,2259,2261,2263,2265,2267,2269,2271],{"class":533,"line":568},[531,2256,538],{"class":537},[531,2258,542],{"class":541},[531,2260,575],{"class":545},[531,2262,549],{"class":541},[531,2264,552],{"class":537},[531,2266,555],{"class":541},[531,2268,584],{"class":558},[531,2270,562],{"class":541},[531,2272,565],{"class":541},[531,2274,2275],{"class":533,"line":591},[531,2276,594],{"emptyLinePlaceholder":177},[531,2278,2279,2281,2283,2285,2287,2289],{"class":533,"line":597},[531,2280,601],{"class":600},[531,2282,604],{"class":545},[531,2284,607],{"class":541},[531,2286,546],{"class":610},[531,2288,613],{"class":545},[531,2290,565],{"class":541},[531,2292,2293],{"class":533,"line":618},[531,2294,594],{"emptyLinePlaceholder":177},[531,2296,2297],{"class":533,"line":623},[531,2298,2299],{"class":1695},"// Only generate sm and md sizes\n",[531,2301,2302,2304,2306,2308,2310,2312,2314],{"class":533,"line":640},[531,2303,601],{"class":600},[531,2305,628],{"class":545},[531,2307,607],{"class":541},[531,2309,575],{"class":610},[531,2311,2101],{"class":545},[531,2313,694],{"class":541},[531,2315,828],{"class":541},[531,2317,2318,2321,2323],{"class":533,"line":645},[531,2319,2320],{"class":833},"    filter",[531,2322,1029],{"class":541},[531,2324,828],{"class":541},[531,2326,2327,2329,2331,2334,2336,2338,2340,2342,2344,2346,2348,2351],{"class":533,"line":756},[531,2328,2165],{"class":833},[531,2330,1029],{"class":541},[531,2332,2333],{"class":545}," [",[531,2335,562],{"class":541},[531,2337,852],{"class":558},[531,2339,562],{"class":541},[531,2341,694],{"class":541},[531,2343,555],{"class":541},[531,2345,861],{"class":558},[531,2347,562],{"class":541},[531,2349,2350],{"class":545},"]",[531,2352,947],{"class":541},[531,2354,2355],{"class":533,"line":932},[531,2356,2151],{"class":541},[531,2358,2359,2361,2363],{"class":533,"line":950},[531,2360,1038],{"class":541},[531,2362,978],{"class":545},[531,2364,565],{"class":541},[531,2366,2367],{"class":533,"line":963},[531,2368,594],{"emptyLinePlaceholder":177},[531,2370,2371,2373,2375,2377],{"class":533,"line":970},[531,2372,648],{"class":537},[531,2374,651],{"class":537},[531,2376,654],{"class":545},[531,2378,565],{"class":541},[1492,2380,2381,2383],{},[420,2382,1496],{}," Filtering adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[412,2385,2387],{"id":2386},"api-reference","API Reference",[1390,2389,2391],{"id":2390},"useskeletonrecipes-options",[424,2392,2393],{},"useSkeletonRecipe(s, options?)",[416,2395,2396],{},"Creates a skeleton loading placeholder recipe with a pulse animation, size variants, and a rounded option.",[416,2398,2399],{},[420,2400,2401],{},"Parameters:",[1399,2403,2404,2417],{},[1402,2405,2406],{},[1405,2407,2408,2411,2414],{},[1408,2409,2410],{},"Parameter",[1408,2412,2413],{},"Type",[1408,2415,2416],{},"Description",[1418,2418,2419,2434,2449,2464,2479,2494],{},[1405,2420,2421,2426,2431],{},[1423,2422,2423],{},[424,2424,2425],{},"s",[1423,2427,2428],{},[424,2429,2430],{},"Styleframe",[1423,2432,2433],{},"The Styleframe instance",[1405,2435,2436,2441,2446],{},[1423,2437,2438],{},[424,2439,2440],{},"options",[1423,2442,2443],{},[424,2444,2445],{},"DeepPartial\u003CRecipeConfig>",[1423,2447,2448],{},"Optional overrides for the recipe configuration",[1405,2450,2451,2456,2461],{},[1423,2452,2453],{},[424,2454,2455],{},"options.base",[1423,2457,2458],{},[424,2459,2460],{},"VariantDeclarationsBlock",[1423,2462,2463],{},"Custom base styles for the skeleton",[1405,2465,2466,2471,2476],{},[1423,2467,2468],{},[424,2469,2470],{},"options.variants",[1423,2472,2473],{},[424,2474,2475],{},"Variants",[1423,2477,2478],{},"Custom variant definitions for the recipe",[1405,2480,2481,2486,2491],{},[1423,2482,2483],{},[424,2484,2485],{},"options.defaultVariants",[1423,2487,2488],{},[424,2489,2490],{},"Record\u003Ckeyof Variants, string>",[1423,2492,2493],{},"Default variant values for the recipe",[1405,2495,2496,2501,2506],{},[1423,2497,2498],{},[424,2499,2500],{},"options.filter",[1423,2502,2503],{},[424,2504,2505],{},"Record\u003Cstring, string[]>",[1423,2507,2508],{},"Limit which variant values are generated",[416,2510,2511],{},[420,2512,2513],{},"Variants:",[1399,2515,2516,2529],{},[1402,2517,2518],{},[1405,2519,2520,2523,2526],{},[1408,2521,2522],{},"Variant",[1408,2524,2525],{},"Options",[1408,2527,2528],{},"Default",[1418,2530,2531,2553],{},[1405,2532,2533,2537,2549],{},[1423,2534,2535],{},[424,2536,1316],{},[1423,2538,2539,1319,2541,1319,2543,1319,2545,1319,2547],{},[424,2540,842],{},[424,2542,852],{},[424,2544,861],{},[424,2546,870],{},[424,2548,879],{},[1423,2550,2551],{},[424,2552,861],{},[1405,2554,2555,2559,2565],{},[1423,2556,2557],{},[424,2558,1322],{},[1423,2560,2561,1319,2563],{},[424,2562,1075],{},[424,2564,1372],{},[1423,2566,2567],{},[424,2568,1372],{},[416,2570,2571],{},[429,2572,2573],{"href":104},"Learn more about recipes →",[412,2575,2577],{"id":2576},"best-practices","Best Practices",[448,2579,2580,2586,2598,2607,2616,2625,2635],{},[451,2581,2582,2585],{},[420,2583,2584],{},"Match the shape of real content",": Size and position skeleton elements to approximate the layout of the content they replace. This reduces layout shift when content loads.",[451,2587,2588,2594,2595,2597],{},[420,2589,2590,2591,2593],{},"Use ",[424,2592,1322],{}," for avatar placeholders",": Combine ",[424,2596,1322],{}," with equal width and height to create circular placeholders that match avatar shapes.",[451,2599,2600,2603,2604,2606],{},[420,2601,2602],{},"Set width with utility classes",": The recipe controls height through ",[424,2605,1316],{},", but width should be set per-instance to match the expected content width.",[451,2608,2609,2612,2613,2615],{},[420,2610,2611],{},"Group skeletons in a container",": Wrap related skeleton elements together and use ",[424,2614,1747],{}," on the container for accessibility.",[451,2617,2618,2621,2622,2624],{},[420,2619,2620],{},"Filter what you don't need",": If your component only uses a few sizes, pass a ",[424,2623,2226],{}," option to reduce generated CSS.",[451,2626,2627,2630,2631,2634],{},[420,2628,2629],{},"Override defaults at the recipe level",": Set your most common size as ",[424,2632,2633],{},"defaultVariants"," so component consumers write less code.",[451,2636,2637,2640],{},[420,2638,2639],{},"Avoid animating too fast",": The default 2-second pulse is designed to feel natural. Faster animations can feel aggressive and slower ones can seem broken.",[412,2642,2644],{"id":2643},"faq","FAQ",[2646,2647,2648,2666,2687,2766,2836,2852],"accordion",{},[2649,2650,2653,2654,2657,2658,2661,2662,2665],"accordion-item",{"icon":2651,"label":2652},"i-lucide-circle-help","Why doesn't the Skeleton recipe include color variants?","Skeleton placeholders are neutral by design. They use ",[424,2655,2656],{},"@color.gray-200"," in light mode and ",[424,2659,2660],{},"@color.gray-800"," in dark mode to blend with any surrounding content. Adding color variants would imply semantic meaning (success, error, etc.) that doesn't apply to loading states. If you need a different background color, override the ",[424,2663,2664],{},"base.background"," property in the options.",[2649,2667,2669,2670,2672,2673,2676,2677,2680,2681,2683,2684,2686],{"icon":2651,"label":2668},"How does the pulse animation work?","The recipe registers a ",[424,2671,1590],{}," keyframes animation during setup. It cycles the element's opacity between ",[424,2674,2675],{},"1"," (at 0% and 100%) and ",[424,2678,2679],{},"0.5"," (at 50%) over 2 seconds, using an ease-in-out timing function. The animation runs infinitely. The keyframes are registered automatically when you call ",[424,2682,426],{}," — no manual ",[424,2685,465],{}," definition is needed.",[2649,2688,2690,2707],{"icon":2651,"label":2689},"Can I disable or change the animation?",[416,2691,2692,2693,2696,2697,1382,2700,2703,2704,1029],{},"Override the animation properties in the ",[424,2694,2695],{},"base"," option. To disable the animation entirely, set ",[424,2698,2699],{},"animationName",[424,2701,2702],{},"none",". To change the speed, override ",[424,2705,2706],{},"animationDuration",[522,2708,2710],{"className":524,"code":2709,"filename":520,"language":526,"meta":527,"style":527},"const skeleton = useSkeletonRecipe(s, {\n    base: {\n        animationDuration: '1s', // Faster pulse\n    },\n});\n",[424,2711,2712,2728,2736,2754,2758],{"__ignoreMap":527},[531,2713,2714,2716,2718,2720,2722,2724,2726],{"class":533,"line":534},[531,2715,601],{"class":600},[531,2717,628],{"class":545},[531,2719,607],{"class":541},[531,2721,575],{"class":610},[531,2723,2101],{"class":545},[531,2725,694],{"class":541},[531,2727,828],{"class":541},[531,2729,2730,2732,2734],{"class":533,"line":568},[531,2731,2110],{"class":833},[531,2733,1029],{"class":541},[531,2735,828],{"class":541},[531,2737,2738,2740,2742,2744,2747,2749,2751],{"class":533,"line":591},[531,2739,2135],{"class":833},[531,2741,1029],{"class":541},[531,2743,555],{"class":541},[531,2745,2746],{"class":558},"1s",[531,2748,562],{"class":541},[531,2750,694],{"class":541},[531,2752,2753],{"class":1695}," // Faster pulse\n",[531,2755,2756],{"class":533,"line":597},[531,2757,2151],{"class":541},[531,2759,2760,2762,2764],{"class":533,"line":618},[531,2761,1038],{"class":541},[531,2763,978],{"class":545},[531,2765,565],{"class":541},[2649,2767,2769,2774,2802,2808],{"icon":2651,"label":2768},"How do I create a skeleton that matches specific content dimensions?",[416,2770,418,2771,2773],{},[424,2772,1316],{}," variant controls the height. Set the width using utility classes on the element itself. For example, to simulate a text line of a specific width:",[522,2775,2777],{"className":1686,"code":2776,"language":1688,"meta":527,"style":527},"\u003Cdiv class=\"skeleton({ size: 'sm' }) _width:[200px]\">\u003C/div>\n",[424,2778,2779],{"__ignoreMap":527},[531,2780,2781,2783,2785,2787,2789,2791,2794,2796,2798,2800],{"class":533,"line":534},[531,2782,1114],{"class":541},[531,2784,1703],{"class":833},[531,2786,1706],{"class":600},[531,2788,607],{"class":541},[531,2790,810],{"class":541},[531,2792,2793],{"class":558},"skeleton({ size: 'sm' }) _width:[200px]",[531,2795,810],{"class":541},[531,2797,1729],{"class":541},[531,2799,1703],{"class":833},[531,2801,1134],{"class":541},[416,2803,2804,2805,2807],{},"For a circular avatar placeholder, combine ",[424,2806,1322],{}," with equal width and height:",[522,2809,2811],{"className":1686,"code":2810,"language":1688,"meta":527,"style":527},"\u003Cdiv class=\"skeleton({ size: 'xl', rounded: 'true' }) _width:3 _height:3\">\u003C/div>\n",[424,2812,2813],{"__ignoreMap":527},[531,2814,2815,2817,2819,2821,2823,2825,2828,2830,2832,2834],{"class":533,"line":534},[531,2816,1114],{"class":541},[531,2818,1703],{"class":833},[531,2820,1706],{"class":600},[531,2822,607],{"class":541},[531,2824,810],{"class":541},[531,2826,2827],{"class":558},"skeleton({ size: 'xl', rounded: 'true' }) _width:3 _height:3",[531,2829,810],{"class":541},[531,2831,1729],{"class":541},[531,2833,1703],{"class":833},[531,2835,1134],{"class":541},[2649,2837,2839,2840,1319,2842,2844,2845,2847,2848,2851],{"icon":2651,"label":2838},"Can I use the Skeleton recipe without the design tokens preset?","The Skeleton recipe references design tokens like ",[424,2841,2656],{},[424,2843,1550],{},", and ",[424,2846,1643],{}," 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 ",[424,2849,2850],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[2649,2853,2855,2856,2858,2859,2862,2863,2866,2867,2870],{"icon":2651,"label":2854},"Why does the rounded variant use string keys instead of a boolean?","Recipe variant values are always strings in the configuration object. The ",[424,2857,1322],{}," variant uses ",[424,2860,2861],{},"\"true\""," and ",[424,2864,2865],{},"\"false\""," as string keys internally, but your component can accept a boolean prop and convert it with ",[424,2868,2869],{},"String(rounded)"," when passing it to the recipe function.",[2872,2873,2874],"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":527,"searchDepth":568,"depth":568,"links":2876},[2877,2878,2879,2880,2883,2884,2885,2886,2890,2893,2894],{"id":414,"depth":568,"text":21},{"id":442,"depth":568,"text":443},{"id":499,"depth":568,"text":500},{"id":1375,"depth":568,"text":1376,"children":2881},[2882],{"id":1392,"depth":591,"text":1393},{"id":1322,"depth":568,"text":1511},{"id":1583,"depth":568,"text":1584},{"id":1671,"depth":568,"text":302},{"id":2011,"depth":568,"text":2012,"children":2887},[2888,2889],{"id":2015,"depth":591,"text":2016},{"id":2219,"depth":591,"text":2220},{"id":2386,"depth":568,"text":2387,"children":2891},[2892],{"id":2390,"depth":591,"text":2393},{"id":2576,"depth":568,"text":2577},{"id":2643,"depth":568,"text":2644},"A loading placeholder component that displays a pulsing gray block to indicate content is being loaded. Supports multiple sizes and a rounded option through the recipe system.",null,{},{"title":278,"description":2895},{"loc":279},"uEXjIwVXCsE-rKLybkXlivE3f6ajtd5jSmWlXVvqBnE",[2902,2904],{"title":274,"path":275,"stem":276,"description":2903,"children":-1},"A dialog component for focused interactions, composed of overlay, container, header, body, and footer sections. Supports multiple colors, visual styles, and sizes through the recipe system.",{"title":282,"path":283,"stem":284,"description":2905,"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.",1775659502207]