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