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