[{"data":1,"prerenderedAt":3175},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-spinner":682,"-docs-theme-components-spinner-surround":3170},{"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":424,"body":684,"description":3164,"extension":1198,"links":3165,"meta":3166,"navigation":3167,"path":425,"seo":3168,"stem":426,"__hash__":3169},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner.md",{"type":685,"value":686,"toc":3141},"minimark",[687,691,717,724,728,731,765,769,2132,2135,2148,2151,2156,2160,2240,2250,2254,2257,2260,2351,2354,2360,2363,2367,2373,2514,2517,2550,2554,2558,2622,2626,2698,2705,2708,2714,2717,2722,2844,2849,2908,2914,2917,2921,2955,2961,2964,2969,2973,3022,3026,3137],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,708,709,712,713,716],"p",{},"The ",[696,697,424],"strong",{}," is a visual indicator used to communicate that an action is in progress. The ",[700,701,702],"code",{},"useSpinnerRecipe()"," composable creates a fully configured ",[705,706,707],"a",{"href":132},"recipe"," with color and size options, while ",[700,710,711],{},"useSpinnerCircleRecipe()"," handles the SVG spinner animation and ",[700,714,715],{},"useSpinnerOverlayRecipe()"," provides an optional backdrop overlay.",[692,718,719,720,723],{},"The Spinner recipe integrates directly with the default ",[705,721,722],{"href":171},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[688,725,727],{"id":726},"why-use-the-spinner-recipe","Why use the Spinner recipe?",[692,729,730],{},"The Spinner recipe helps you:",[732,733,734,741,747,753,759],"ul",{},[735,736,737,740],"li",{},[696,738,739],{},"Ship faster with sensible defaults",": Get 4 colors and 3 sizes out of the box with a single composable call.",[735,742,743,746],{},[696,744,745],{},"Maintain consistency",": The SVG-based spinner animation is consistent across all color and size combinations.",[735,748,749,752],{},[696,750,751],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[735,754,755,758],{},[696,756,757],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color or size values at compile time.",[735,760,761,764],{},[696,762,763],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[688,766,768],{"id":767},"usage","Usage",[770,771,773,778,785,1074,1078,1089,2123,2127],"steps",{"level":772},"4",[774,775,777],"h4",{"id":776},"register-the-recipes","Register the recipes",[692,779,780,781,784],{},"Add the Spinner recipes to a local Styleframe instance. The global ",[700,782,783],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[786,787,789,968],"code-tree",{"default-value":788},"src\u002Fcomponents\u002Fspinner.styleframe.ts",[790,791,796],"pre",{"className":792,"code":793,"filename":788,"language":794,"meta":795,"style":795},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useSpinnerRecipe, useSpinnerCircleRecipe, useSpinnerOverlayRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst spinner = useSpinnerRecipe(s);\nconst spinnerCircle = useSpinnerCircleRecipe(s);\nconst spinnerOverlay = useSpinnerOverlayRecipe(s);\n\nexport default s;\n","ts","",[700,797,798,834,868,874,895,900,917,933,949,954],{"__ignoreMap":795},[799,800,803,807,811,815,818,821,824,828,831],"span",{"class":801,"line":802},"line",1,[799,804,806],{"class":805},"s7zQu","import",[799,808,810],{"class":809},"sMK4o"," {",[799,812,814],{"class":813},"sTEyZ"," styleframe",[799,816,817],{"class":809}," }",[799,819,820],{"class":805}," from",[799,822,823],{"class":809}," '",[799,825,827],{"class":826},"sfazB","virtual:styleframe",[799,829,830],{"class":809},"'",[799,832,833],{"class":809},";\n",[799,835,837,839,841,844,847,850,852,855,857,859,861,864,866],{"class":801,"line":836},2,[799,838,806],{"class":805},[799,840,810],{"class":809},[799,842,843],{"class":813}," useSpinnerRecipe",[799,845,846],{"class":809},",",[799,848,849],{"class":813}," useSpinnerCircleRecipe",[799,851,846],{"class":809},[799,853,854],{"class":813}," useSpinnerOverlayRecipe",[799,856,817],{"class":809},[799,858,820],{"class":805},[799,860,823],{"class":809},[799,862,863],{"class":826},"@styleframe\u002Ftheme",[799,865,830],{"class":809},[799,867,833],{"class":809},[799,869,871],{"class":801,"line":870},3,[799,872,873],{"emptyLinePlaceholder":223},"\n",[799,875,877,881,884,887,890,893],{"class":801,"line":876},4,[799,878,880],{"class":879},"spNyl","const",[799,882,883],{"class":813}," s ",[799,885,886],{"class":809},"=",[799,888,814],{"class":889},"s2Zo4",[799,891,892],{"class":813},"()",[799,894,833],{"class":809},[799,896,898],{"class":801,"line":897},5,[799,899,873],{"emptyLinePlaceholder":223},[799,901,903,905,908,910,912,915],{"class":801,"line":902},6,[799,904,880],{"class":879},[799,906,907],{"class":813}," spinner ",[799,909,886],{"class":809},[799,911,843],{"class":889},[799,913,914],{"class":813},"(s)",[799,916,833],{"class":809},[799,918,920,922,925,927,929,931],{"class":801,"line":919},7,[799,921,880],{"class":879},[799,923,924],{"class":813}," spinnerCircle ",[799,926,886],{"class":809},[799,928,849],{"class":889},[799,930,914],{"class":813},[799,932,833],{"class":809},[799,934,936,938,941,943,945,947],{"class":801,"line":935},8,[799,937,880],{"class":879},[799,939,940],{"class":813}," spinnerOverlay ",[799,942,886],{"class":809},[799,944,854],{"class":889},[799,946,914],{"class":813},[799,948,833],{"class":809},[799,950,952],{"class":801,"line":951},9,[799,953,873],{"emptyLinePlaceholder":223},[799,955,957,960,963,966],{"class":801,"line":956},10,[799,958,959],{"class":805},"export",[799,961,962],{"class":805}," default",[799,964,965],{"class":813}," s",[799,967,833],{"class":809},[790,969,971],{"className":792,"code":970,"filename":783,"language":794,"meta":795,"style":795},"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,972,973,994,1020,1024,1038,1042,1051,1060,1064],{"__ignoreMap":795},[799,974,975,977,979,981,983,985,987,990,992],{"class":801,"line":802},[799,976,806],{"class":805},[799,978,810],{"class":809},[799,980,814],{"class":813},[799,982,817],{"class":809},[799,984,820],{"class":805},[799,986,823],{"class":809},[799,988,989],{"class":826},"styleframe",[799,991,830],{"class":809},[799,993,833],{"class":809},[799,995,996,998,1000,1003,1005,1008,1010,1012,1014,1016,1018],{"class":801,"line":836},[799,997,806],{"class":805},[799,999,810],{"class":809},[799,1001,1002],{"class":813}," useDesignTokensPreset",[799,1004,846],{"class":809},[799,1006,1007],{"class":813}," useUtilitiesPreset",[799,1009,817],{"class":809},[799,1011,820],{"class":805},[799,1013,823],{"class":809},[799,1015,863],{"class":826},[799,1017,830],{"class":809},[799,1019,833],{"class":809},[799,1021,1022],{"class":801,"line":870},[799,1023,873],{"emptyLinePlaceholder":223},[799,1025,1026,1028,1030,1032,1034,1036],{"class":801,"line":876},[799,1027,880],{"class":879},[799,1029,883],{"class":813},[799,1031,886],{"class":809},[799,1033,814],{"class":889},[799,1035,892],{"class":813},[799,1037,833],{"class":809},[799,1039,1040],{"class":801,"line":897},[799,1041,873],{"emptyLinePlaceholder":223},[799,1043,1044,1047,1049],{"class":801,"line":902},[799,1045,1046],{"class":889},"useDesignTokensPreset",[799,1048,914],{"class":813},[799,1050,833],{"class":809},[799,1052,1053,1056,1058],{"class":801,"line":919},[799,1054,1055],{"class":889},"useUtilitiesPreset",[799,1057,914],{"class":813},[799,1059,833],{"class":809},[799,1061,1062],{"class":801,"line":935},[799,1063,873],{"emptyLinePlaceholder":223},[799,1065,1066,1068,1070,1072],{"class":801,"line":951},[799,1067,959],{"class":805},[799,1069,962],{"class":805},[799,1071,965],{"class":813},[799,1073,833],{"class":809},[774,1075,1077],{"id":1076},"build-the-component","Build the component",[692,1079,1080,1081,1084,1085,1088],{},"Import the ",[700,1082,1083],{},"spinner"," and ",[700,1086,1087],{},"spinnerCircle"," runtime functions from the virtual module and pass variant props to compute class names:",[1090,1091,1092,1446,1849],"framework-switcher",{},[1093,1094,1095],"template",{"v-slot:vue":795},[790,1096,1101],{"className":1097,"code":1098,"filename":1099,"language":1100,"meta":795,"style":795},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { spinner, spinnerCircle, type SpinnerProps } from \"virtual:styleframe\";\n\nconst { color = \"primary\", size = \"md\", label } = defineProps\u003CSpinnerProps & { label?: string }>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"spinner({ color, size })\" role=\"status\">\n        \u003Csvg :class=\"spinnerCircle({ size })\" viewBox=\"0 0 50 50\">\n            \u003Ccircle cx=\"25\" cy=\"25\" r=\"20\" \u002F>\n        \u003C\u002Fsvg>\n        \u003Cspan v-if=\"label\">{{ label }}\u003C\u002Fspan>\n        \u003Cslot \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FSpinner.vue","vue",[700,1102,1103,1130,1165,1169,1242,1251,1255,1263,1297,1330,1376,1386,1417,1427,1437],{"__ignoreMap":795},[799,1104,1105,1108,1112,1115,1118,1120,1123,1125,1127],{"class":801,"line":802},[799,1106,1107],{"class":809},"\u003C",[799,1109,1111],{"class":1110},"swJcz","script",[799,1113,1114],{"class":879}," setup",[799,1116,1117],{"class":879}," lang",[799,1119,886],{"class":809},[799,1121,1122],{"class":809},"\"",[799,1124,794],{"class":826},[799,1126,1122],{"class":809},[799,1128,1129],{"class":809},">\n",[799,1131,1132,1134,1136,1139,1141,1144,1146,1149,1152,1154,1156,1159,1161,1163],{"class":801,"line":836},[799,1133,806],{"class":805},[799,1135,810],{"class":809},[799,1137,1138],{"class":813}," spinner",[799,1140,846],{"class":809},[799,1142,1143],{"class":813}," spinnerCircle",[799,1145,846],{"class":809},[799,1147,1148],{"class":805}," type",[799,1150,1151],{"class":813}," SpinnerProps",[799,1153,817],{"class":809},[799,1155,820],{"class":805},[799,1157,1158],{"class":809}," \"",[799,1160,827],{"class":826},[799,1162,1122],{"class":809},[799,1164,833],{"class":809},[799,1166,1167],{"class":801,"line":870},[799,1168,873],{"emptyLinePlaceholder":223},[799,1170,1171,1173,1175,1178,1180,1182,1185,1187,1189,1192,1194,1196,1199,1201,1203,1206,1209,1212,1215,1217,1221,1224,1226,1229,1232,1235,1238,1240],{"class":801,"line":876},[799,1172,880],{"class":879},[799,1174,810],{"class":809},[799,1176,1177],{"class":813}," color ",[799,1179,886],{"class":809},[799,1181,1158],{"class":809},[799,1183,1184],{"class":826},"primary",[799,1186,1122],{"class":809},[799,1188,846],{"class":809},[799,1190,1191],{"class":813}," size ",[799,1193,886],{"class":809},[799,1195,1158],{"class":809},[799,1197,1198],{"class":826},"md",[799,1200,1122],{"class":809},[799,1202,846],{"class":809},[799,1204,1205],{"class":813}," label ",[799,1207,1208],{"class":809},"}",[799,1210,1211],{"class":809}," =",[799,1213,1214],{"class":889}," defineProps",[799,1216,1107],{"class":809},[799,1218,1220],{"class":1219},"sBMFI","SpinnerProps",[799,1222,1223],{"class":809}," &",[799,1225,810],{"class":809},[799,1227,1228],{"class":1110}," label",[799,1230,1231],{"class":809},"?:",[799,1233,1234],{"class":1219}," string",[799,1236,1237],{"class":809}," }>",[799,1239,892],{"class":813},[799,1241,833],{"class":809},[799,1243,1244,1247,1249],{"class":801,"line":897},[799,1245,1246],{"class":809},"\u003C\u002F",[799,1248,1111],{"class":1110},[799,1250,1129],{"class":809},[799,1252,1253],{"class":801,"line":902},[799,1254,873],{"emptyLinePlaceholder":223},[799,1256,1257,1259,1261],{"class":801,"line":919},[799,1258,1107],{"class":809},[799,1260,1093],{"class":1110},[799,1262,1129],{"class":809},[799,1264,1265,1268,1271,1274,1276,1278,1281,1283,1286,1288,1290,1293,1295],{"class":801,"line":935},[799,1266,1267],{"class":809},"    \u003C",[799,1269,1270],{"class":1110},"div",[799,1272,1273],{"class":879}," :class",[799,1275,886],{"class":809},[799,1277,1122],{"class":809},[799,1279,1280],{"class":826},"spinner({ color, size })",[799,1282,1122],{"class":809},[799,1284,1285],{"class":879}," role",[799,1287,886],{"class":809},[799,1289,1122],{"class":809},[799,1291,1292],{"class":826},"status",[799,1294,1122],{"class":809},[799,1296,1129],{"class":809},[799,1298,1299,1302,1305,1307,1309,1311,1314,1316,1319,1321,1323,1326,1328],{"class":801,"line":951},[799,1300,1301],{"class":809},"        \u003C",[799,1303,1304],{"class":1110},"svg",[799,1306,1273],{"class":879},[799,1308,886],{"class":809},[799,1310,1122],{"class":809},[799,1312,1313],{"class":826},"spinnerCircle({ size })",[799,1315,1122],{"class":809},[799,1317,1318],{"class":879}," viewBox",[799,1320,886],{"class":809},[799,1322,1122],{"class":809},[799,1324,1325],{"class":826},"0 0 50 50",[799,1327,1122],{"class":809},[799,1329,1129],{"class":809},[799,1331,1332,1335,1338,1341,1343,1345,1348,1350,1353,1355,1357,1359,1361,1364,1366,1368,1371,1373],{"class":801,"line":956},[799,1333,1334],{"class":809},"            \u003C",[799,1336,1337],{"class":1110},"circle",[799,1339,1340],{"class":879}," cx",[799,1342,886],{"class":809},[799,1344,1122],{"class":809},[799,1346,1347],{"class":826},"25",[799,1349,1122],{"class":809},[799,1351,1352],{"class":879}," cy",[799,1354,886],{"class":809},[799,1356,1122],{"class":809},[799,1358,1347],{"class":826},[799,1360,1122],{"class":809},[799,1362,1363],{"class":879}," r",[799,1365,886],{"class":809},[799,1367,1122],{"class":809},[799,1369,1370],{"class":826},"20",[799,1372,1122],{"class":809},[799,1374,1375],{"class":809}," \u002F>\n",[799,1377,1379,1382,1384],{"class":801,"line":1378},11,[799,1380,1381],{"class":809},"        \u003C\u002F",[799,1383,1304],{"class":1110},[799,1385,1129],{"class":809},[799,1387,1389,1391,1393,1396,1398,1400,1403,1405,1408,1411,1413,1415],{"class":801,"line":1388},12,[799,1390,1301],{"class":809},[799,1392,799],{"class":1110},[799,1394,1395],{"class":879}," v-if",[799,1397,886],{"class":809},[799,1399,1122],{"class":809},[799,1401,1402],{"class":826},"label",[799,1404,1122],{"class":809},[799,1406,1407],{"class":809},">",[799,1409,1410],{"class":813},"{{ label }}",[799,1412,1246],{"class":809},[799,1414,799],{"class":1110},[799,1416,1129],{"class":809},[799,1418,1420,1422,1425],{"class":801,"line":1419},13,[799,1421,1301],{"class":809},[799,1423,1424],{"class":1110},"slot",[799,1426,1375],{"class":809},[799,1428,1430,1433,1435],{"class":801,"line":1429},14,[799,1431,1432],{"class":809},"    \u003C\u002F",[799,1434,1270],{"class":1110},[799,1436,1129],{"class":809},[799,1438,1440,1442,1444],{"class":801,"line":1439},15,[799,1441,1246],{"class":809},[799,1443,1093],{"class":1110},[799,1445,1129],{"class":809},[1093,1447,1448],{"v-slot:react":795},[790,1449,1452],{"className":792,"code":1450,"filename":1451,"language":794,"meta":795,"style":795},"import { spinner, spinnerCircle, type SpinnerProps } from \"virtual:styleframe\";\n\ninterface SpinnerComponentProps extends SpinnerProps {\n    label?: string;\n    children?: React.ReactNode;\n}\n\nexport function Spinner({\n    color = \"primary\",\n    size = \"md\",\n    label,\n    children,\n}: SpinnerComponentProps) {\n    const containerClasses = spinner({ color, size });\n    const circleClasses = spinnerCircle({ size });\n\n    return (\n        \u003Cdiv className={containerClasses} role=\"status\">\n            \u003Csvg className={circleClasses} viewBox=\"0 0 50 50\">\n                \u003Ccircle cx=\"25\" cy=\"25\" r=\"20\" \u002F>\n            \u003C\u002Fsvg>\n            {label && \u003Cspan>{label}\u003C\u002Fspan>}\n            {children}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FSpinner.tsx",[700,1453,1454,1484,1488,1504,1515,1533,1538,1542,1555,1572,1587,1593,1599,1611,1643,1666,1671,1680,1710,1738,1778,1788,1817,1827,1836,1844],{"__ignoreMap":795},[799,1455,1456,1458,1460,1462,1464,1466,1468,1470,1472,1474,1476,1478,1480,1482],{"class":801,"line":802},[799,1457,806],{"class":805},[799,1459,810],{"class":809},[799,1461,1138],{"class":813},[799,1463,846],{"class":809},[799,1465,1143],{"class":813},[799,1467,846],{"class":809},[799,1469,1148],{"class":805},[799,1471,1151],{"class":813},[799,1473,817],{"class":809},[799,1475,820],{"class":805},[799,1477,1158],{"class":809},[799,1479,827],{"class":826},[799,1481,1122],{"class":809},[799,1483,833],{"class":809},[799,1485,1486],{"class":801,"line":836},[799,1487,873],{"emptyLinePlaceholder":223},[799,1489,1490,1493,1496,1499,1501],{"class":801,"line":870},[799,1491,1492],{"class":879},"interface",[799,1494,1495],{"class":1219}," SpinnerComponentProps",[799,1497,1498],{"class":879}," extends",[799,1500,1151],{"class":1219},[799,1502,1503],{"class":809}," {\n",[799,1505,1506,1509,1511,1513],{"class":801,"line":876},[799,1507,1508],{"class":1110},"    label",[799,1510,1231],{"class":809},[799,1512,1234],{"class":1219},[799,1514,833],{"class":809},[799,1516,1517,1520,1522,1525,1528,1531],{"class":801,"line":897},[799,1518,1519],{"class":1110},"    children",[799,1521,1231],{"class":809},[799,1523,1524],{"class":1219}," React",[799,1526,1527],{"class":809},".",[799,1529,1530],{"class":1219},"ReactNode",[799,1532,833],{"class":809},[799,1534,1535],{"class":801,"line":902},[799,1536,1537],{"class":809},"}\n",[799,1539,1540],{"class":801,"line":919},[799,1541,873],{"emptyLinePlaceholder":223},[799,1543,1544,1546,1549,1552],{"class":801,"line":935},[799,1545,959],{"class":805},[799,1547,1548],{"class":879}," function",[799,1550,1551],{"class":889}," Spinner",[799,1553,1554],{"class":809},"({\n",[799,1556,1557,1561,1563,1565,1567,1569],{"class":801,"line":951},[799,1558,1560],{"class":1559},"sHdIc","    color",[799,1562,1211],{"class":809},[799,1564,1158],{"class":809},[799,1566,1184],{"class":826},[799,1568,1122],{"class":809},[799,1570,1571],{"class":809},",\n",[799,1573,1574,1577,1579,1581,1583,1585],{"class":801,"line":956},[799,1575,1576],{"class":1559},"    size",[799,1578,1211],{"class":809},[799,1580,1158],{"class":809},[799,1582,1198],{"class":826},[799,1584,1122],{"class":809},[799,1586,1571],{"class":809},[799,1588,1589,1591],{"class":801,"line":1378},[799,1590,1508],{"class":1559},[799,1592,1571],{"class":809},[799,1594,1595,1597],{"class":801,"line":1388},[799,1596,1519],{"class":1559},[799,1598,1571],{"class":809},[799,1600,1601,1604,1606,1609],{"class":801,"line":1419},[799,1602,1603],{"class":809},"}:",[799,1605,1495],{"class":1219},[799,1607,1608],{"class":809},")",[799,1610,1503],{"class":809},[799,1612,1613,1616,1619,1621,1623,1626,1629,1632,1634,1637,1639,1641],{"class":801,"line":1429},[799,1614,1615],{"class":879},"    const",[799,1617,1618],{"class":813}," containerClasses",[799,1620,1211],{"class":809},[799,1622,1138],{"class":889},[799,1624,1625],{"class":1110},"(",[799,1627,1628],{"class":809},"{",[799,1630,1631],{"class":813}," color",[799,1633,846],{"class":809},[799,1635,1636],{"class":813}," size",[799,1638,817],{"class":809},[799,1640,1608],{"class":1110},[799,1642,833],{"class":809},[799,1644,1645,1647,1650,1652,1654,1656,1658,1660,1662,1664],{"class":801,"line":1439},[799,1646,1615],{"class":879},[799,1648,1649],{"class":813}," circleClasses",[799,1651,1211],{"class":809},[799,1653,1143],{"class":889},[799,1655,1625],{"class":1110},[799,1657,1628],{"class":809},[799,1659,1636],{"class":813},[799,1661,817],{"class":809},[799,1663,1608],{"class":1110},[799,1665,833],{"class":809},[799,1667,1669],{"class":801,"line":1668},16,[799,1670,873],{"emptyLinePlaceholder":223},[799,1672,1674,1677],{"class":801,"line":1673},17,[799,1675,1676],{"class":805},"    return",[799,1678,1679],{"class":1110}," (\n",[799,1681,1683,1685,1687,1690,1693,1696,1698,1700,1702,1704,1706,1708],{"class":801,"line":1682},18,[799,1684,1301],{"class":809},[799,1686,1270],{"class":813},[799,1688,1689],{"class":813}," className",[799,1691,1692],{"class":809},"={",[799,1694,1695],{"class":813},"containerClasses",[799,1697,1208],{"class":809},[799,1699,1285],{"class":813},[799,1701,886],{"class":809},[799,1703,1122],{"class":809},[799,1705,1292],{"class":826},[799,1707,1122],{"class":809},[799,1709,1129],{"class":809},[799,1711,1713,1715,1717,1719,1721,1724,1726,1728,1730,1732,1734,1736],{"class":801,"line":1712},19,[799,1714,1334],{"class":809},[799,1716,1304],{"class":813},[799,1718,1689],{"class":813},[799,1720,1692],{"class":809},[799,1722,1723],{"class":813},"circleClasses",[799,1725,1208],{"class":809},[799,1727,1318],{"class":813},[799,1729,886],{"class":809},[799,1731,1122],{"class":809},[799,1733,1325],{"class":826},[799,1735,1122],{"class":809},[799,1737,1129],{"class":809},[799,1739,1741,1744,1746,1748,1750,1752,1754,1756,1758,1760,1762,1764,1766,1768,1770,1772,1774,1776],{"class":801,"line":1740},20,[799,1742,1743],{"class":809},"                \u003C",[799,1745,1337],{"class":813},[799,1747,1340],{"class":813},[799,1749,886],{"class":809},[799,1751,1122],{"class":809},[799,1753,1347],{"class":826},[799,1755,1122],{"class":809},[799,1757,1352],{"class":813},[799,1759,886],{"class":809},[799,1761,1122],{"class":809},[799,1763,1347],{"class":826},[799,1765,1122],{"class":809},[799,1767,1363],{"class":813},[799,1769,886],{"class":809},[799,1771,1122],{"class":809},[799,1773,1370],{"class":826},[799,1775,1122],{"class":809},[799,1777,1375],{"class":809},[799,1779,1781,1784,1786],{"class":801,"line":1780},21,[799,1782,1783],{"class":809},"            \u003C\u002F",[799,1785,1304],{"class":813},[799,1787,1129],{"class":809},[799,1789,1791,1794,1796,1799,1801,1803,1805,1807,1809,1811,1813,1815],{"class":801,"line":1790},22,[799,1792,1793],{"class":809},"            {",[799,1795,1402],{"class":1559},[799,1797,1798],{"class":1110}," && \u003C",[799,1800,799],{"class":1559},[799,1802,1407],{"class":1110},[799,1804,1628],{"class":809},[799,1806,1402],{"class":1559},[799,1808,1208],{"class":809},[799,1810,1246],{"class":1110},[799,1812,799],{"class":1559},[799,1814,1407],{"class":1110},[799,1816,1537],{"class":809},[799,1818,1820,1822,1825],{"class":801,"line":1819},23,[799,1821,1793],{"class":809},[799,1823,1824],{"class":1559},"children",[799,1826,1537],{"class":809},[799,1828,1830,1832,1834],{"class":801,"line":1829},24,[799,1831,1381],{"class":809},[799,1833,1270],{"class":813},[799,1835,1129],{"class":809},[799,1837,1839,1842],{"class":801,"line":1838},25,[799,1840,1841],{"class":1110},"    )",[799,1843,833],{"class":809},[799,1845,1847],{"class":801,"line":1846},26,[799,1848,1537],{"class":809},[1093,1850,1851,1860,1980],{"v-slot:other":795},[692,1852,694,1853,1084,1856,1859],{},[700,1854,1855],{},"spinner()",[700,1857,1858],{},"spinnerCircle()"," runtimes each return a class string. Apply them however your framework binds classes:",[790,1861,1864],{"className":792,"code":1862,"filename":1863,"language":794,"meta":795,"style":795},"import { spinner, spinnerCircle } from \"virtual:styleframe\";\n\nconst containerClasses = spinner({ color: \"primary\", size: \"md\" });\n\u002F\u002F → \"spinner _color:primary _display:inline-flex ...\"\nconst circleClasses = spinnerCircle({ size: \"md\" });\n\u002F\u002F → \"spinner-circle _width:3 _height:3 _animation:rotate ...\"\n","src\u002Fcomponents\u002Fspinner.ts",[700,1865,1866,1890,1894,1938,1944,1975],{"__ignoreMap":795},[799,1867,1868,1870,1872,1874,1876,1878,1880,1882,1884,1886,1888],{"class":801,"line":802},[799,1869,806],{"class":805},[799,1871,810],{"class":809},[799,1873,1138],{"class":813},[799,1875,846],{"class":809},[799,1877,1143],{"class":813},[799,1879,817],{"class":809},[799,1881,820],{"class":805},[799,1883,1158],{"class":809},[799,1885,827],{"class":826},[799,1887,1122],{"class":809},[799,1889,833],{"class":809},[799,1891,1892],{"class":801,"line":836},[799,1893,873],{"emptyLinePlaceholder":223},[799,1895,1896,1898,1901,1903,1905,1907,1909,1911,1914,1916,1918,1920,1922,1924,1926,1928,1930,1932,1934,1936],{"class":801,"line":870},[799,1897,880],{"class":879},[799,1899,1900],{"class":813}," containerClasses ",[799,1902,886],{"class":809},[799,1904,1138],{"class":889},[799,1906,1625],{"class":813},[799,1908,1628],{"class":809},[799,1910,1631],{"class":1110},[799,1912,1913],{"class":809},":",[799,1915,1158],{"class":809},[799,1917,1184],{"class":826},[799,1919,1122],{"class":809},[799,1921,846],{"class":809},[799,1923,1636],{"class":1110},[799,1925,1913],{"class":809},[799,1927,1158],{"class":809},[799,1929,1198],{"class":826},[799,1931,1122],{"class":809},[799,1933,817],{"class":809},[799,1935,1608],{"class":813},[799,1937,833],{"class":809},[799,1939,1940],{"class":801,"line":876},[799,1941,1943],{"class":1942},"sHwdD","\u002F\u002F → \"spinner _color:primary _display:inline-flex ...\"\n",[799,1945,1946,1948,1951,1953,1955,1957,1959,1961,1963,1965,1967,1969,1971,1973],{"class":801,"line":897},[799,1947,880],{"class":879},[799,1949,1950],{"class":813}," circleClasses ",[799,1952,886],{"class":809},[799,1954,1143],{"class":889},[799,1956,1625],{"class":813},[799,1958,1628],{"class":809},[799,1960,1636],{"class":1110},[799,1962,1913],{"class":809},[799,1964,1158],{"class":809},[799,1966,1198],{"class":826},[799,1968,1122],{"class":809},[799,1970,817],{"class":809},[799,1972,1608],{"class":813},[799,1974,833],{"class":809},[799,1976,1977],{"class":801,"line":902},[799,1978,1979],{"class":1942},"\u002F\u002F → \"spinner-circle _width:3 _height:3 _animation:rotate ...\"\n",[790,1981,1986],{"className":1982,"code":1983,"filename":1984,"language":1985,"meta":795,"style":795},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"spinner _color:primary _display:inline-flex ...\" role=\"status\">\n    \u003Csvg class=\"spinner-circle _animation:rotate ...\" viewBox=\"0 0 50 50\">\n        \u003Ccircle cx=\"25\" cy=\"25\" r=\"20\">\u003C\u002Fcircle>\n    \u003C\u002Fsvg>\n    \u003Cspan>Loading…\u003C\u002Fspan>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Fspinner.html","html",[700,1987,1988,2018,2047,2090,2098,2115],{"__ignoreMap":795},[799,1989,1990,1992,1994,1997,1999,2001,2004,2006,2008,2010,2012,2014,2016],{"class":801,"line":802},[799,1991,1107],{"class":809},[799,1993,1270],{"class":1110},[799,1995,1996],{"class":879}," class",[799,1998,886],{"class":809},[799,2000,1122],{"class":809},[799,2002,2003],{"class":826},"spinner _color:primary _display:inline-flex ...",[799,2005,1122],{"class":809},[799,2007,1285],{"class":879},[799,2009,886],{"class":809},[799,2011,1122],{"class":809},[799,2013,1292],{"class":826},[799,2015,1122],{"class":809},[799,2017,1129],{"class":809},[799,2019,2020,2022,2024,2026,2028,2030,2033,2035,2037,2039,2041,2043,2045],{"class":801,"line":836},[799,2021,1267],{"class":809},[799,2023,1304],{"class":1110},[799,2025,1996],{"class":879},[799,2027,886],{"class":809},[799,2029,1122],{"class":809},[799,2031,2032],{"class":826},"spinner-circle _animation:rotate ...",[799,2034,1122],{"class":809},[799,2036,1318],{"class":879},[799,2038,886],{"class":809},[799,2040,1122],{"class":809},[799,2042,1325],{"class":826},[799,2044,1122],{"class":809},[799,2046,1129],{"class":809},[799,2048,2049,2051,2053,2055,2057,2059,2061,2063,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083,2086,2088],{"class":801,"line":870},[799,2050,1301],{"class":809},[799,2052,1337],{"class":1110},[799,2054,1340],{"class":879},[799,2056,886],{"class":809},[799,2058,1122],{"class":809},[799,2060,1347],{"class":826},[799,2062,1122],{"class":809},[799,2064,1352],{"class":879},[799,2066,886],{"class":809},[799,2068,1122],{"class":809},[799,2070,1347],{"class":826},[799,2072,1122],{"class":809},[799,2074,1363],{"class":879},[799,2076,886],{"class":809},[799,2078,1122],{"class":809},[799,2080,1370],{"class":826},[799,2082,1122],{"class":809},[799,2084,2085],{"class":809},">\u003C\u002F",[799,2087,1337],{"class":1110},[799,2089,1129],{"class":809},[799,2091,2092,2094,2096],{"class":801,"line":876},[799,2093,1432],{"class":809},[799,2095,1304],{"class":1110},[799,2097,1129],{"class":809},[799,2099,2100,2102,2104,2106,2109,2111,2113],{"class":801,"line":897},[799,2101,1267],{"class":809},[799,2103,799],{"class":1110},[799,2105,1407],{"class":809},[799,2107,2108],{"class":813},"Loading…",[799,2110,1246],{"class":809},[799,2112,799],{"class":1110},[799,2114,1129],{"class":809},[799,2116,2117,2119,2121],{"class":801,"line":902},[799,2118,1246],{"class":809},[799,2120,1270],{"class":1110},[799,2122,1129],{"class":809},[774,2124,2126],{"id":2125},"see-it-in-action","See it in action",[2128,2129],"story-preview",{"story":2130,":panel":2131},"theme-recipes-feedback-spinner--default","true",[688,2133,195],{"id":2134},"colors",[692,2136,2137,2138,2141,2142,2144,2145,1527],{},"The Spinner supports 4 color options. The ",[700,2139,2140],{},"color"," variant sets the CSS ",[700,2143,2140],{}," property on the container, which cascades to the SVG spinner via ",[700,2146,2147],{},"currentColor",[2128,2149],{"story":2150,":panel":2131},"theme-recipes-feedback-spinner--primary",[2152,2153,2155],"h3",{"id":2154},"color-reference","Color Reference",[2128,2157],{"story":2158,":height":2159},"theme-recipes-feedback-spinner--all-variants","320",[2161,2162,2163,2179],"table",{},[2164,2165,2166],"thead",{},[2167,2168,2169,2173,2176],"tr",{},[2170,2171,2172],"th",{},"Color",[2170,2174,2175],{},"Token",[2170,2177,2178],{},"Use Case",[2180,2181,2182,2197,2212,2227],"tbody",{},[2167,2183,2184,2189,2194],{},[2185,2186,2187],"td",{},[700,2188,1184],{},[2185,2190,2191],{},[700,2192,2193],{},"@color.primary",[2185,2195,2196],{},"Default loading state, primary actions",[2167,2198,2199,2204,2209],{},[2185,2200,2201],{},[700,2202,2203],{},"light",[2185,2205,2206],{},[700,2207,2208],{},"@color.gray-700",[2185,2210,2211],{},"Loading on dark backgrounds, stays fixed in dark mode",[2167,2213,2214,2219,2224],{},[2185,2215,2216],{},[700,2217,2218],{},"dark",[2185,2220,2221],{},[700,2222,2223],{},"@color.white",[2185,2225,2226],{},"Loading on light backgrounds, stays fixed in dark mode",[2167,2228,2229,2234,2237],{},[2185,2230,2231],{},[700,2232,2233],{},"neutral",[2185,2235,2236],{},"Adaptive (light ↔ dark)",[2185,2238,2239],{},"Default adaptive color, adjusts to the current color scheme",[2241,2242,2243,2246,2247,2249],"tip",{},[696,2244,2245],{},"Pro tip:"," Use ",[700,2248,2233],{}," for general-purpose loading states that need to adapt to both light and dark mode automatically.",[688,2251,2253],{"id":2252},"sizes","Sizes",[692,2255,2256],{},"The Spinner comes in 3 sizes that control both the spinner dimensions and the label text size.",[2128,2258],{"story":2259,":height":2159},"theme-recipes-feedback-spinner--all-sizes",[2161,2261,2262,2275],{},[2164,2263,2264],{},[2167,2265,2266,2269,2272],{},[2170,2267,2268],{},"Size",[2170,2270,2271],{},"Spinner Dimensions",[2170,2273,2274],{},"Font Size",[2180,2276,2277,2295,2314,2332],{},[2167,2278,2279,2284,2292],{},[2185,2280,2281],{},[700,2282,2283],{},"auto",[2185,2285,2286,2289,2290],{},[700,2287,2288],{},"100%"," × ",[700,2291,2288],{},[2185,2293,2294],{},"Inherits base",[2167,2296,2297,2302,2309],{},[2185,2298,2299],{},[700,2300,2301],{},"sm",[2185,2303,2304,2289,2307],{},[700,2305,2306],{},"@2",[700,2308,2306],{},[2185,2310,2311],{},[700,2312,2313],{},"@font-size.xs",[2167,2315,2316,2320,2327],{},[2185,2317,2318],{},[700,2319,1198],{},[2185,2321,2322,2289,2325],{},[700,2323,2324],{},"@3",[700,2326,2324],{},[2185,2328,2329],{},[700,2330,2331],{},"@font-size.sm",[2167,2333,2334,2339,2346],{},[2185,2335,2336],{},[700,2337,2338],{},"lg",[2185,2340,2341,2289,2344],{},[700,2342,2343],{},"@4",[700,2345,2343],{},[2185,2347,2348],{},[700,2349,2350],{},"@font-size.md",[688,2352,2353],{"id":1402},"Label",[692,2355,2356,2357,2359],{},"You can display optional text below the spinner using the ",[700,2358,1402],{}," prop.",[2128,2361],{"story":2362,":panel":2131},"theme-recipes-feedback-spinner--with-label",[688,2364,2366],{"id":2365},"overlay","Overlay",[692,2368,2369,2370,2372],{},"Use ",[700,2371,715],{}," to create a fixed overlay backdrop for full-page or container-level loading states.",[790,2374,2377],{"className":1097,"code":2375,"filename":2376,"language":1100,"meta":795,"style":795},"\u003Cscript setup lang=\"ts\">\nimport { spinnerOverlay } from \"virtual:styleframe\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"spinnerOverlay({})\">\n        \u003CSpinner color=\"dark\" size=\"lg\" label=\"Loading...\" \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FSpinnerOverlay.vue",[700,2378,2379,2399,2420,2428,2432,2440,2459,2498,2506],{"__ignoreMap":795},[799,2380,2381,2383,2385,2387,2389,2391,2393,2395,2397],{"class":801,"line":802},[799,2382,1107],{"class":809},[799,2384,1111],{"class":1110},[799,2386,1114],{"class":879},[799,2388,1117],{"class":879},[799,2390,886],{"class":809},[799,2392,1122],{"class":809},[799,2394,794],{"class":826},[799,2396,1122],{"class":809},[799,2398,1129],{"class":809},[799,2400,2401,2403,2405,2408,2410,2412,2414,2416,2418],{"class":801,"line":836},[799,2402,806],{"class":805},[799,2404,810],{"class":809},[799,2406,2407],{"class":813}," spinnerOverlay",[799,2409,817],{"class":809},[799,2411,820],{"class":805},[799,2413,1158],{"class":809},[799,2415,827],{"class":826},[799,2417,1122],{"class":809},[799,2419,833],{"class":809},[799,2421,2422,2424,2426],{"class":801,"line":870},[799,2423,1246],{"class":809},[799,2425,1111],{"class":1110},[799,2427,1129],{"class":809},[799,2429,2430],{"class":801,"line":876},[799,2431,873],{"emptyLinePlaceholder":223},[799,2433,2434,2436,2438],{"class":801,"line":897},[799,2435,1107],{"class":809},[799,2437,1093],{"class":1110},[799,2439,1129],{"class":809},[799,2441,2442,2444,2446,2448,2450,2452,2455,2457],{"class":801,"line":902},[799,2443,1267],{"class":809},[799,2445,1270],{"class":1110},[799,2447,1273],{"class":879},[799,2449,886],{"class":809},[799,2451,1122],{"class":809},[799,2453,2454],{"class":826},"spinnerOverlay({})",[799,2456,1122],{"class":809},[799,2458,1129],{"class":809},[799,2460,2461,2463,2465,2467,2469,2471,2473,2475,2477,2479,2481,2483,2485,2487,2489,2491,2494,2496],{"class":801,"line":919},[799,2462,1301],{"class":809},[799,2464,424],{"class":1110},[799,2466,1631],{"class":879},[799,2468,886],{"class":809},[799,2470,1122],{"class":809},[799,2472,2218],{"class":826},[799,2474,1122],{"class":809},[799,2476,1636],{"class":879},[799,2478,886],{"class":809},[799,2480,1122],{"class":809},[799,2482,2338],{"class":826},[799,2484,1122],{"class":809},[799,2486,1228],{"class":879},[799,2488,886],{"class":809},[799,2490,1122],{"class":809},[799,2492,2493],{"class":826},"Loading...",[799,2495,1122],{"class":809},[799,2497,1375],{"class":809},[799,2499,2500,2502,2504],{"class":801,"line":935},[799,2501,1432],{"class":809},[799,2503,1270],{"class":1110},[799,2505,1129],{"class":809},[799,2507,2508,2510,2512],{"class":801,"line":951},[799,2509,1246],{"class":809},[799,2511,1093],{"class":1110},[799,2513,1129],{"class":809},[688,2515,568],{"id":2516},"accessibility",[732,2518,2519,2528,2541],{},[735,2520,2521,2527],{},[696,2522,2523,2524],{},"Always include ",[700,2525,2526],{},"role=\"status\""," on the spinner container to announce loading state to screen readers.",[735,2529,2530,2533,2534,2536,2537,2540],{},[696,2531,2532],{},"Provide descriptive text"," via the ",[700,2535,1402],{}," prop or a visually hidden ",[700,2538,2539],{},"\u003Cspan>"," for screen readers when no visible label is shown.",[735,2542,2543,2549],{},[696,2544,2545,2546],{},"Animation respects ",[700,2547,2548],{},"prefers-reduced-motion",": The design tokens preset automatically disables animations when the user has reduced motion enabled.",[688,2551,2553],{"id":2552},"customization","Customization",[2152,2555,2557],{"id":2556},"overriding-defaults","Overriding Defaults",[790,2559,2561],{"className":792,"code":2560,"filename":788,"language":794,"meta":795,"style":795},"const spinner = useSpinnerRecipe(s, {\n    defaultVariants: { color: 'neutral', size: 'lg' },\n});\n",[700,2562,2563,2580,2614],{"__ignoreMap":795},[799,2564,2565,2567,2569,2571,2573,2576,2578],{"class":801,"line":802},[799,2566,880],{"class":879},[799,2568,907],{"class":813},[799,2570,886],{"class":809},[799,2572,843],{"class":889},[799,2574,2575],{"class":813},"(s",[799,2577,846],{"class":809},[799,2579,1503],{"class":809},[799,2581,2582,2585,2587,2589,2591,2593,2595,2597,2599,2601,2603,2605,2607,2609,2611],{"class":801,"line":836},[799,2583,2584],{"class":1110},"    defaultVariants",[799,2586,1913],{"class":809},[799,2588,810],{"class":809},[799,2590,1631],{"class":1110},[799,2592,1913],{"class":809},[799,2594,823],{"class":809},[799,2596,2233],{"class":826},[799,2598,830],{"class":809},[799,2600,846],{"class":809},[799,2602,1636],{"class":1110},[799,2604,1913],{"class":809},[799,2606,823],{"class":809},[799,2608,2338],{"class":826},[799,2610,830],{"class":809},[799,2612,2613],{"class":809}," },\n",[799,2615,2616,2618,2620],{"class":801,"line":870},[799,2617,1208],{"class":809},[799,2619,1608],{"class":813},[799,2621,833],{"class":809},[2152,2623,2625],{"id":2624},"filtering-variants","Filtering Variants",[790,2627,2629],{"className":792,"code":2628,"filename":788,"language":794,"meta":795,"style":795},"const spinner = useSpinnerRecipe(s, {\n    filter: {\n        color: ['primary', 'neutral'],\n    },\n});\n",[700,2630,2631,2647,2656,2685,2690],{"__ignoreMap":795},[799,2632,2633,2635,2637,2639,2641,2643,2645],{"class":801,"line":802},[799,2634,880],{"class":879},[799,2636,907],{"class":813},[799,2638,886],{"class":809},[799,2640,843],{"class":889},[799,2642,2575],{"class":813},[799,2644,846],{"class":809},[799,2646,1503],{"class":809},[799,2648,2649,2652,2654],{"class":801,"line":836},[799,2650,2651],{"class":1110},"    filter",[799,2653,1913],{"class":809},[799,2655,1503],{"class":809},[799,2657,2658,2661,2663,2666,2668,2670,2672,2674,2676,2678,2680,2683],{"class":801,"line":870},[799,2659,2660],{"class":1110},"        color",[799,2662,1913],{"class":809},[799,2664,2665],{"class":813}," [",[799,2667,830],{"class":809},[799,2669,1184],{"class":826},[799,2671,830],{"class":809},[799,2673,846],{"class":809},[799,2675,823],{"class":809},[799,2677,2233],{"class":826},[799,2679,830],{"class":809},[799,2681,2682],{"class":813},"]",[799,2684,1571],{"class":809},[799,2686,2687],{"class":801,"line":876},[799,2688,2689],{"class":809},"    },\n",[799,2691,2692,2694,2696],{"class":801,"line":897},[799,2693,1208],{"class":809},[799,2695,1608],{"class":813},[799,2697,833],{"class":809},[2699,2700,2701,2704],"note",{},[696,2702,2703],{},"Good to know:"," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,2706,73],{"id":2707},"api-reference",[2152,2709,2711],{"id":2710},"usespinnerrecipes-options",[700,2712,2713],{},"useSpinnerRecipe(s, options?)",[692,2715,2716],{},"Creates the spinner container recipe with color and size variants.",[692,2718,2719],{},[696,2720,2721],{},"Parameters:",[2161,2723,2724,2737],{},[2164,2725,2726],{},[2167,2727,2728,2731,2734],{},[2170,2729,2730],{},"Parameter",[2170,2732,2733],{},"Type",[2170,2735,2736],{},"Description",[2180,2738,2739,2754,2769,2784,2799,2814,2829],{},[2167,2740,2741,2746,2751],{},[2185,2742,2743],{},[700,2744,2745],{},"s",[2185,2747,2748],{},[700,2749,2750],{},"Styleframe",[2185,2752,2753],{},"The Styleframe instance",[2167,2755,2756,2761,2766],{},[2185,2757,2758],{},[700,2759,2760],{},"options",[2185,2762,2763],{},[700,2764,2765],{},"DeepPartial\u003CRecipeConfig>",[2185,2767,2768],{},"Optional overrides for the recipe configuration",[2167,2770,2771,2776,2781],{},[2185,2772,2773],{},[700,2774,2775],{},"options.base",[2185,2777,2778],{},[700,2779,2780],{},"VariantDeclarationsBlock",[2185,2782,2783],{},"Custom base styles",[2167,2785,2786,2791,2796],{},[2185,2787,2788],{},[700,2789,2790],{},"options.variants",[2185,2792,2793],{},[700,2794,2795],{},"Variants",[2185,2797,2798],{},"Custom variant definitions",[2167,2800,2801,2806,2811],{},[2185,2802,2803],{},[700,2804,2805],{},"options.defaultVariants",[2185,2807,2808],{},[700,2809,2810],{},"Record\u003Ckeyof Variants, string>",[2185,2812,2813],{},"Default variant values",[2167,2815,2816,2821,2826],{},[2185,2817,2818],{},[700,2819,2820],{},"options.compoundVariants",[2185,2822,2823],{},[700,2824,2825],{},"CompoundVariant[]",[2185,2827,2828],{},"Custom compound variant definitions",[2167,2830,2831,2836,2841],{},[2185,2832,2833],{},[700,2834,2835],{},"options.filter",[2185,2837,2838],{},[700,2839,2840],{},"Record\u003Cstring, string[]>",[2185,2842,2843],{},"Limit which variant values are generated",[692,2845,2846],{},[696,2847,2848],{},"Variants:",[2161,2850,2851,2864],{},[2164,2852,2853],{},[2167,2854,2855,2858,2861],{},[2170,2856,2857],{},"Variant",[2170,2859,2860],{},"Options",[2170,2862,2863],{},"Default",[2180,2865,2866,2887],{},[2167,2867,2868,2872,2883],{},[2185,2869,2870],{},[700,2871,2140],{},[2185,2873,2874,2876,2877,2876,2879,2876,2881],{},[700,2875,1184],{},", ",[700,2878,2203],{},[700,2880,2218],{},[700,2882,2233],{},[2185,2884,2885],{},[700,2886,1184],{},[2167,2888,2889,2894,2904],{},[2185,2890,2891],{},[700,2892,2893],{},"size",[2185,2895,2896,2876,2898,2876,2900,2876,2902],{},[700,2897,2283],{},[700,2899,2301],{},[700,2901,1198],{},[700,2903,2338],{},[2185,2905,2906],{},[700,2907,1198],{},[2152,2909,2911],{"id":2910},"usespinnercirclerecipes-options",[700,2912,2913],{},"useSpinnerCircleRecipe(s, options?)",[692,2915,2916],{},"Creates the SVG spinner recipe with size variants and animation keyframes.",[692,2918,2919],{},[696,2920,2848],{},[2161,2922,2923,2933],{},[2164,2924,2925],{},[2167,2926,2927,2929,2931],{},[2170,2928,2857],{},[2170,2930,2860],{},[2170,2932,2863],{},[2180,2934,2935],{},[2167,2936,2937,2941,2951],{},[2185,2938,2939],{},[700,2940,2893],{},[2185,2942,2943,2876,2945,2876,2947,2876,2949],{},[700,2944,2283],{},[700,2946,2301],{},[700,2948,1198],{},[700,2950,2338],{},[2185,2952,2953],{},[700,2954,1198],{},[2152,2956,2958],{"id":2957},"usespinneroverlayrecipes-options",[700,2959,2960],{},"useSpinnerOverlayRecipe(s, options?)",[692,2962,2963],{},"Creates the overlay backdrop recipe. No variants — provides a fixed full-screen backdrop.",[692,2965,2966],{},[705,2967,2968],{"href":132},"Learn more about recipes ->",[688,2970,2972],{"id":2971},"best-practices","Best Practices",[732,2974,2975,2982,2988,3006,3016],{},[735,2976,2977,2981],{},[696,2978,2369,2979],{},[700,2980,2526],{}," on the spinner element for accessibility.",[735,2983,2984,2987],{},[696,2985,2986],{},"Provide a label"," for longer loading operations so users know what's happening.",[735,2989,2990,2993,2994,2996,2997,2999,3000,3002,3003,3005],{},[696,2991,2992],{},"Choose the right color",": Use ",[700,2995,1184],{}," for brand-colored spinners, ",[700,2998,2233],{}," for general use, and ",[700,3001,2203],{},"\u002F",[700,3004,2218],{}," for specific background contexts.",[735,3007,3008,3011,3012,3015],{},[696,3009,3010],{},"Filter what you don't need",": Pass a ",[700,3013,3014],{},"filter"," option to reduce generated CSS.",[735,3017,3018,3021],{},[696,3019,3020],{},"Use the overlay sparingly",": Full-page overlays block interaction — prefer inline spinners when possible.",[688,3023,3025],{"id":3024},"faq","FAQ",[3027,3028,3029,3045,3062,3069],"accordion",{},[3030,3031,3034,3035,3038,3039,3042,3043,1527],"accordion-item",{"icon":3032,"label":3033},"i-lucide-circle-help","How does the SVG spinner animation work?","The spinner uses two CSS keyframe animations: ",[700,3036,3037],{},"spinner-rotate"," for continuous rotation and ",[700,3040,3041],{},"spinner-dash"," for the stroke dash effect that creates the \"chasing\" appearance. These are registered automatically when you call ",[700,3044,711],{},[3030,3046,694,3048,3051,3052,3054,3055,3058,3059,3061],{"icon":3032,"label":3047},"How does color inheritance work?",[700,3049,3050],{},"useSpinnerRecipe"," sets the CSS ",[700,3053,2140],{}," property via compound variants. The SVG circle's ",[700,3056,3057],{},"stroke"," is set to ",[700,3060,2147],{}," via a selector in the spinner circle recipe's setup function. This means the spinner color automatically inherits from the container — no extra wiring needed.",[3030,3063,3065,3066,3068],{"icon":3032,"label":3064},"How does filtering affect compound variants?","When you use the ",[700,3067,3014],{}," option, compound variants that reference filtered-out values are automatically removed. Default variants are also adjusted if they reference a removed value.",[3030,3070,3072,3086],{"icon":3032,"label":3071},"Can I use the overlay with a container instead of full-page?",[692,3073,3074,3075,3078,3079,3082,3083,1913],{},"Yes! Override the overlay's ",[700,3076,3077],{},"position"," to ",[700,3080,3081],{},"absolute"," and ensure the parent container has ",[700,3084,3085],{},"position: relative",[790,3087,3089],{"className":792,"code":3088,"language":794,"meta":795,"style":795},"const spinnerOverlay = useSpinnerOverlayRecipe(s, {\n    base: { position: 'absolute' },\n});\n",[700,3090,3091,3107,3129],{"__ignoreMap":795},[799,3092,3093,3095,3097,3099,3101,3103,3105],{"class":801,"line":802},[799,3094,880],{"class":879},[799,3096,940],{"class":813},[799,3098,886],{"class":809},[799,3100,854],{"class":889},[799,3102,2575],{"class":813},[799,3104,846],{"class":809},[799,3106,1503],{"class":809},[799,3108,3109,3112,3114,3116,3119,3121,3123,3125,3127],{"class":801,"line":836},[799,3110,3111],{"class":1110},"    base",[799,3113,1913],{"class":809},[799,3115,810],{"class":809},[799,3117,3118],{"class":1110}," position",[799,3120,1913],{"class":809},[799,3122,823],{"class":809},[799,3124,3081],{"class":826},[799,3126,830],{"class":809},[799,3128,2613],{"class":809},[799,3130,3131,3133,3135],{"class":801,"line":870},[799,3132,1208],{"class":809},[799,3134,1608],{"class":813},[799,3136,833],{"class":809},[3138,3139,3140],"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 .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":795,"searchDepth":836,"depth":836,"links":3142},[3143,3144,3145,3146,3149,3150,3151,3152,3153,3157,3162,3163],{"id":690,"depth":836,"text":78},{"id":726,"depth":836,"text":727},{"id":767,"depth":836,"text":768},{"id":2134,"depth":836,"text":195,"children":3147},[3148],{"id":2154,"depth":870,"text":2155},{"id":2252,"depth":836,"text":2253},{"id":1402,"depth":836,"text":2353},{"id":2365,"depth":836,"text":2366},{"id":2516,"depth":836,"text":568},{"id":2552,"depth":836,"text":2553,"children":3154},[3155,3156],{"id":2556,"depth":870,"text":2557},{"id":2624,"depth":870,"text":2625},{"id":2707,"depth":836,"text":73,"children":3158},[3159,3160,3161],{"id":2710,"depth":870,"text":2713},{"id":2910,"depth":870,"text":2913},{"id":2957,"depth":870,"text":2960},{"id":2971,"depth":836,"text":2972},{"id":3024,"depth":836,"text":3025},"A loading spinner component with color, size, and optional overlay — built as a multi-part recipe system with SVG-based animation.",null,{},{"icon":7},{"title":424,"description":3164},"FvYlU_YsxI4jppG5CivgNS3SoLNvwlk2Xh_pGx2Z8DA",[3171,3173],{"title":420,"path":421,"stem":422,"description":3172,"icon":7,"children":-1},"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.",{"title":432,"path":433,"stem":434,"description":3174,"icon":7,"children":-1},"A date-grid styling recipe with selected, today, range, booked, disabled, and outside-month day states, week numbers, month\u002Fyear selectors, presets and a time-picker footer, plus a custom cell size through the recipe system.",1781596338072]