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