[{"data":1,"prerenderedAt":964},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fspinner":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fspinner":959},[4,31,178],{"title":5,"path":6,"stem":7,"children":8,"page":30},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[9,14,18,22,26],{"title":10,"path":11,"stem":12,"status":13,"badge":13},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,{"title":15,"path":16,"stem":17,"status":13,"badge":13},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21,"status":13,"badge":13},"Theming","\u002Fdocs\u002Fgetting-started\u002Ftheming","docs\u002F1.getting-started\u002F3.theming",{"title":23,"path":24,"stem":25,"status":13,"badge":13},"Accessibility & reduced motion","\u002Fdocs\u002Fgetting-started\u002Faccessibility","docs\u002F1.getting-started\u002F4.accessibility",{"title":27,"path":28,"stem":29,"status":13,"badge":13},"Sound","\u002Fdocs\u002Fgetting-started\u002Fsound","docs\u002F1.getting-started\u002F5.sound",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[36,40,44,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,126,130,134,138,142,146,150,154,158,162,166,170,174],{"title":37,"path":38,"stem":39,"status":13,"badge":13},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002F01.button",{"title":41,"path":42,"stem":43,"status":13,"badge":13},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002F2.components\u002F02.spinner",{"title":45,"path":46,"stem":47,"status":13,"badge":48},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002F2.components\u002F03.toggle","experimental",{"title":50,"path":51,"stem":52,"status":13,"badge":13},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002F04.switch",{"title":54,"path":55,"stem":56,"status":13,"badge":13},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002F05.checkbox",{"title":58,"path":59,"stem":60,"status":13,"badge":13},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002F06.radio-group",{"title":62,"path":63,"stem":64,"status":13,"badge":48},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002F07.input",{"title":66,"path":67,"stem":68,"status":13,"badge":13},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002F08.slider",{"title":70,"path":71,"stem":72,"status":13,"badge":13},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002F09.progress",{"title":74,"path":75,"stem":76,"status":13,"badge":48},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002F10.select",{"title":78,"path":79,"stem":80,"status":13,"badge":13},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002F11.popover",{"title":82,"path":83,"stem":84,"status":13,"badge":13},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002F12.dropdown-menu",{"title":86,"path":87,"stem":88,"status":13,"badge":13},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002F13.tooltip",{"title":90,"path":91,"stem":92,"status":13,"badge":13},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002F14.tabs",{"title":94,"path":95,"stem":96,"status":13,"badge":48},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002F15.accordion",{"title":98,"path":99,"stem":100,"status":13,"badge":48},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002F2.components\u002F16.dialog",{"title":102,"path":103,"stem":104,"status":13,"badge":48},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002F2.components\u002F17.alert-dialog",{"title":106,"path":107,"stem":108,"status":13,"badge":48},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002F2.components\u002F18.sheet",{"title":110,"path":111,"stem":112,"status":13,"badge":48},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002F19.drawer",{"title":114,"path":115,"stem":116,"status":13,"badge":13},"Toaster","\u002Fdocs\u002Fcomponents\u002Ftoaster","docs\u002F2.components\u002F20.toaster",{"title":118,"path":119,"stem":120,"status":13,"badge":48},"Page transition","\u002Fdocs\u002Fcomponents\u002Fpage-transition","docs\u002F2.components\u002F21.page-transition",{"title":122,"path":123,"stem":124,"status":125,"badge":13},"Blob","\u002Fdocs\u002Fcomponents\u002Fblob","docs\u002F2.components\u002F22.blob","soon",{"title":127,"path":128,"stem":129,"status":13,"badge":48},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002F2.components\u002F23.command",{"title":131,"path":132,"stem":133,"status":13,"badge":48},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002F2.components\u002F24.combobox",{"title":135,"path":136,"stem":137,"status":13,"badge":48},"NumberField","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002F2.components\u002F25.number-field",{"title":139,"path":140,"stem":141,"status":13,"badge":48},"InputOTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002F2.components\u002F26.input-otp",{"title":143,"path":144,"stem":145,"status":13,"badge":48},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002F2.components\u002F27.hover-card",{"title":147,"path":148,"stem":149,"status":13,"badge":48},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002F28.context-menu",{"title":151,"path":152,"stem":153,"status":13,"badge":48},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002F29.skeleton",{"title":155,"path":156,"stem":157,"status":13,"badge":48},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002F30.badge",{"title":159,"path":160,"stem":161,"status":13,"badge":48},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002F31.card",{"title":163,"path":164,"stem":165,"status":13,"badge":48},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002F32.avatar",{"title":167,"path":168,"stem":169,"status":13,"badge":48},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002F33.separator",{"title":171,"path":172,"stem":173,"status":13,"badge":48},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002F2.components\u002F34.label",{"title":175,"path":176,"stem":177,"status":13,"badge":48},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002F35.sidebar",{"title":179,"path":180,"stem":181,"children":182,"page":30},"Core","\u002Fdocs\u002Fcore","docs\u002F3.core",[183],{"title":184,"path":185,"stem":186,"status":13,"badge":13},"API reference","\u002Fdocs\u002Fcore\u002Fapi","docs\u002F3.core\u002F1.api",{"id":188,"title":41,"badge":13,"body":189,"description":954,"extension":955,"meta":956,"navigation":347,"path":42,"seo":957,"status":13,"stem":43,"__hash__":958},"docs\u002Fdocs\u002F2.components\u002F02.spinner.md",{"type":190,"value":191,"toc":944},"minimark",[192,200,220,241,245,266,270,387,404,411,505,509,516,549,630,634,641,646,715,719,722,728,828,832,838,869,888,892,899,902,916,919,923,935,940],[193,194,197],"playground",{"caption":195,"name":196},"Move the pointer over it, press and drag, click.","spinner",[198,199],"demo-spinner",{"set":193},[201,202,204],"callout",{"type":203},"alpha",[205,206,207,211,212,215,216,219],"p",{},[208,209,210],"code",{},"@goopui\u002Fvue"," and ",[208,213,214],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The spinners on this page are the real ",[208,217,218],{},"GoopSpinner",", and the code below is exactly what you write.",[205,221,222,224,225,228,229,232,233,236,237,240],{},[208,223,218],{}," keeps the shadcn-vue Spinner API: a ",[208,226,227],{},"role=\"status\""," element with ",[208,230,231],{},"aria-label=\"Loading\"",", sized with classes like ",[208,234,235],{},"size-6",", colored with ",[208,238,239],{},"currentColor",". shadcn's spinner is a lucide icon, so there is no reka-ui primitive underneath. The goo is added on top.",[242,243,15],"h2",{"id":244},"installation",[205,246,247,248,250,251,253,254,259,260,262,263,265],{},"Install ",[208,249,214],{}," or ",[208,252,210],{}," as shown on the ",[255,256,258],"a",{"href":257},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports ",[208,261,218],{},". In plain Vue, import it from ",[208,264,210],{},".",[242,267,269],{"id":268},"usage","Usage",[271,272,277],"pre",{"className":273,"code":274,"language":275,"meta":276,"style":276},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\nimport { GoopSpinner } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopSpinner class=\"size-6\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[208,278,279,309,316,332,342,349,359,378],{"__ignoreMap":276},[280,281,284,288,292,296,299,302,306],"span",{"class":282,"line":283},"line",1,[280,285,287],{"class":286},"sVt8B","\u003C",[280,289,291],{"class":290},"s9eBZ","script",[280,293,295],{"class":294},"sScJk"," setup",[280,297,298],{"class":294}," lang",[280,300,301],{"class":286},"=",[280,303,305],{"class":304},"sZZnC","\"ts\"",[280,307,308],{"class":286},">\n",[280,310,312],{"class":282,"line":311},2,[280,313,315],{"class":314},"sJ8bj","\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\n",[280,317,319,323,326,329],{"class":282,"line":318},3,[280,320,322],{"class":321},"szBVR","import",[280,324,325],{"class":286}," { GoopSpinner } ",[280,327,328],{"class":321},"from",[280,330,331],{"class":304}," '@goopui\u002Fvue'\n",[280,333,335,338,340],{"class":282,"line":334},4,[280,336,337],{"class":286},"\u003C\u002F",[280,339,291],{"class":290},[280,341,308],{"class":286},[280,343,345],{"class":282,"line":344},5,[280,346,348],{"emptyLinePlaceholder":347},true,"\n",[280,350,352,354,357],{"class":282,"line":351},6,[280,353,287],{"class":286},[280,355,356],{"class":290},"template",[280,358,308],{"class":286},[280,360,362,365,367,370,372,375],{"class":282,"line":361},7,[280,363,364],{"class":286},"  \u003C",[280,366,218],{"class":290},[280,368,369],{"class":294}," class",[280,371,301],{"class":286},[280,373,374],{"class":304},"\"size-6\"",[280,376,377],{"class":286}," \u002F>\n",[280,379,381,383,385],{"class":282,"line":380},8,[280,382,337],{"class":286},[280,384,356],{"class":290},[280,386,308],{"class":286},[205,388,389,390,393,394,396,397,250,400,403],{},"The default size is ",[208,391,392],{},"size-4",", like shadcn's. Set any size with a class. The color is ",[208,395,239],{},", so ",[208,398,399],{},"text-primary",[208,401,402],{},"text-destructive"," recolors it.",[405,406,408],"preview",{":controls":407},"false",[198,409],{"set":410},"sizes",[271,412,414],{"className":273,"code":413,"language":275,"meta":276,"style":276},"\u003CGoopSpinner class=\"size-4\" \u002F>\n\u003CGoopSpinner class=\"size-6\" \u002F>\n\u003CGoopSpinner class=\"size-8\" \u002F>\n\u003CGoopSpinner class=\"size-12\" \u002F>\n\u003CGoopSpinner class=\"size-6 text-primary\" \u002F>\n\u003CGoopSpinner class=\"size-6 text-destructive\" \u002F>\n",[208,415,416,431,445,460,475,490],{"__ignoreMap":276},[280,417,418,420,422,424,426,429],{"class":282,"line":283},[280,419,287],{"class":286},[280,421,218],{"class":290},[280,423,369],{"class":294},[280,425,301],{"class":286},[280,427,428],{"class":304},"\"size-4\"",[280,430,377],{"class":286},[280,432,433,435,437,439,441,443],{"class":282,"line":311},[280,434,287],{"class":286},[280,436,218],{"class":290},[280,438,369],{"class":294},[280,440,301],{"class":286},[280,442,374],{"class":304},[280,444,377],{"class":286},[280,446,447,449,451,453,455,458],{"class":282,"line":318},[280,448,287],{"class":286},[280,450,218],{"class":290},[280,452,369],{"class":294},[280,454,301],{"class":286},[280,456,457],{"class":304},"\"size-8\"",[280,459,377],{"class":286},[280,461,462,464,466,468,470,473],{"class":282,"line":334},[280,463,287],{"class":286},[280,465,218],{"class":290},[280,467,369],{"class":294},[280,469,301],{"class":286},[280,471,472],{"class":304},"\"size-12\"",[280,474,377],{"class":286},[280,476,477,479,481,483,485,488],{"class":282,"line":344},[280,478,287],{"class":286},[280,480,218],{"class":290},[280,482,369],{"class":294},[280,484,301],{"class":286},[280,486,487],{"class":304},"\"size-6 text-primary\"",[280,489,377],{"class":286},[280,491,492,494,496,498,500,503],{"class":282,"line":351},[280,493,287],{"class":286},[280,495,218],{"class":290},[280,497,369],{"class":294},[280,499,301],{"class":286},[280,501,502],{"class":304},"\"size-6 text-destructive\"",[280,504,377],{"class":286},[242,506,508],{"id":507},"variants","Variants",[205,510,511,512,515],{},"Five shapes. ",[208,513,514],{},"orbit"," is the default.",[517,518,519,525,531,537,543],"ul",{},[520,521,522,524],"li",{},[208,523,514],{},": blobs chase each other round a circle. They surge apart and catch up, so they merge and split.",[520,526,527,530],{},[208,528,529],{},"comet",": a spinning arc with a tail.",[520,532,533,536],{},[208,534,535],{},"ring",": a bead rolling round a donut.",[520,538,539,542],{},[208,540,541],{},"dots",": a bead rolling along three dots.",[520,544,545,548],{},[208,546,547],{},"pulse",": a core that buds satellites.",[271,550,552],{"className":273,"code":551,"language":275,"meta":276,"style":276},"\u003CGoopSpinner variant=\"orbit\" \u002F>\n\u003CGoopSpinner variant=\"comet\" \u002F>\n\u003CGoopSpinner variant=\"ring\" \u002F>\n\u003CGoopSpinner variant=\"dots\" \u002F>\n\u003CGoopSpinner variant=\"pulse\" \u002F>\n",[208,553,554,570,585,600,615],{"__ignoreMap":276},[280,555,556,558,560,563,565,568],{"class":282,"line":283},[280,557,287],{"class":286},[280,559,218],{"class":290},[280,561,562],{"class":294}," variant",[280,564,301],{"class":286},[280,566,567],{"class":304},"\"orbit\"",[280,569,377],{"class":286},[280,571,572,574,576,578,580,583],{"class":282,"line":311},[280,573,287],{"class":286},[280,575,218],{"class":290},[280,577,562],{"class":294},[280,579,301],{"class":286},[280,581,582],{"class":304},"\"comet\"",[280,584,377],{"class":286},[280,586,587,589,591,593,595,598],{"class":282,"line":318},[280,588,287],{"class":286},[280,590,218],{"class":290},[280,592,562],{"class":294},[280,594,301],{"class":286},[280,596,597],{"class":304},"\"ring\"",[280,599,377],{"class":286},[280,601,602,604,606,608,610,613],{"class":282,"line":334},[280,603,287],{"class":286},[280,605,218],{"class":290},[280,607,562],{"class":294},[280,609,301],{"class":286},[280,611,612],{"class":304},"\"dots\"",[280,614,377],{"class":286},[280,616,617,619,621,623,625,628],{"class":282,"line":344},[280,618,287],{"class":286},[280,620,218],{"class":290},[280,622,562],{"class":294},[280,624,301],{"class":286},[280,626,627],{"class":304},"\"pulse\"",[280,629,377],{"class":286},[242,631,633],{"id":632},"in-a-button","In a button",[205,635,636,637,640],{},"Put it in a disabled ",[208,638,639],{},"GoopButton",", the same way shadcn does:",[405,642,643],{":controls":407},[198,644],{"set":645},"button",[271,647,649],{"className":273,"code":648,"language":275,"meta":276,"style":276},"\u003CGoopButton disabled>\n  \u003CGoopSpinner data-icon=\"inline-start\" \u002F>\n  Saving\n\u003C\u002FGoopButton>\n\u003CGoopButton variant=\"outline\" disabled>\n  \u003CGoopSpinner data-icon=\"inline-start\" variant=\"comet\" \u002F>\n  Loading\n\u003C\u002FGoopButton>\n",[208,650,651,662,667,672,680,697,702,707],{"__ignoreMap":276},[280,652,653,655,657,660],{"class":282,"line":283},[280,654,287],{"class":286},[280,656,639],{"class":290},[280,658,659],{"class":294}," disabled",[280,661,308],{"class":286},[280,663,664],{"class":282,"line":311},[280,665,666],{"class":286},"  \u003CGoopSpinner data-icon=\"inline-start\" \u002F>\n",[280,668,669],{"class":282,"line":318},[280,670,671],{"class":286},"  Saving\n",[280,673,674,676,678],{"class":282,"line":334},[280,675,337],{"class":286},[280,677,639],{"class":290},[280,679,308],{"class":286},[280,681,682,684,686,688,690,693,695],{"class":282,"line":344},[280,683,287],{"class":286},[280,685,639],{"class":290},[280,687,562],{"class":294},[280,689,301],{"class":286},[280,691,692],{"class":304},"\"outline\"",[280,694,659],{"class":294},[280,696,308],{"class":286},[280,698,699],{"class":282,"line":351},[280,700,701],{"class":286},"  \u003CGoopSpinner data-icon=\"inline-start\" variant=\"comet\" \u002F>\n",[280,703,704],{"class":282,"line":361},[280,705,706],{"class":286},"  Loading\n",[280,708,709,711,713],{"class":282,"line":380},[280,710,337],{"class":286},[280,712,639],{"class":290},[280,714,308],{"class":286},[242,716,718],{"id":717},"tuning","Tuning",[205,720,721],{},"Props change the feel. A preset sets the base, and the props override it.",[405,723,725],{":controls":407,"caption":724},"blobs 6, speed 2, drips, wild, not interactive.",[198,726],{"set":727},"options",[271,729,731],{"className":273,"code":730,"language":275,"meta":276,"style":276},"\u003CGoopSpinner :blobs=\"6\" \u002F>\n\u003CGoopSpinner :speed=\"2\" \u002F>\n\u003CGoopSpinner drips \u002F>\n\u003CGoopSpinner preset=\"wild\" \u002F>\n\u003CGoopSpinner :interactive=\"false\" \u002F>\n",[208,732,733,758,780,791,807],{"__ignoreMap":276},[280,734,735,737,739,742,745,747,750,754,756],{"class":282,"line":283},[280,736,287],{"class":286},[280,738,218],{"class":290},[280,740,741],{"class":286}," :",[280,743,744],{"class":294},"blobs",[280,746,301],{"class":286},[280,748,749],{"class":304},"\"",[280,751,753],{"class":752},"sj4cs","6",[280,755,749],{"class":304},[280,757,377],{"class":286},[280,759,760,762,764,766,769,771,773,776,778],{"class":282,"line":311},[280,761,287],{"class":286},[280,763,218],{"class":290},[280,765,741],{"class":286},[280,767,768],{"class":294},"speed",[280,770,301],{"class":286},[280,772,749],{"class":304},[280,774,775],{"class":752},"2",[280,777,749],{"class":304},[280,779,377],{"class":286},[280,781,782,784,786,789],{"class":282,"line":318},[280,783,287],{"class":286},[280,785,218],{"class":290},[280,787,788],{"class":294}," drips",[280,790,377],{"class":286},[280,792,793,795,797,800,802,805],{"class":282,"line":334},[280,794,287],{"class":286},[280,796,218],{"class":290},[280,798,799],{"class":294}," preset",[280,801,301],{"class":286},[280,803,804],{"class":304},"\"wild\"",[280,806,377],{"class":286},[280,808,809,811,813,815,818,820,822,824,826],{"class":282,"line":344},[280,810,287],{"class":286},[280,812,218],{"class":290},[280,814,741],{"class":286},[280,816,817],{"class":294},"interactive",[280,819,301],{"class":286},[280,821,749],{"class":304},[280,823,407],{"class":752},[280,825,749],{"class":304},[280,827,377],{"class":286},[242,829,831],{"id":830},"play","Play",[205,833,834,835,837],{},"A spinner is playful by default (",[208,836,817],{},"):",[517,839,840,851,860],{},[520,841,842,846,847,850],{},[843,844,845],"strong",{},"Move"," the pointer over it and the goo sloshes (",[208,848,849],{},"slosh",").",[520,852,853,856,857,850],{},[843,854,855],{},"Press and drag"," to pull it out in lumps. Release and it snaps back (",[208,858,859],{},"grab",[520,861,862,865,866,850],{},[843,863,864],{},"Click or tap"," to squish it. It swells back with a ripple (",[208,867,868],{},"pop",[205,870,871,874,875,878,879,881,882,884,885,887],{},[208,872,873],{},":interactive=\"false\""," turns all three off and makes the spinner ",[208,876,877],{},"pointer-events: none"," again. Use it for a spinner that sits on top of something clickable. ",[208,880,849],{},", ",[208,883,859],{},", and ",[208,886,868],{}," each turn off on their own.",[242,889,891],{"id":890},"props","Props",[205,893,894,895,898],{},"GoopSpinner keeps the shadcn-vue Spinner API (",[208,896,897],{},"class",") and adds the goo props.",[900,901],"component-props",{"name":196},[205,903,904,905,908,909,912,913,265],{},"It exposes ",[208,906,907],{},"handle"," (the live spinner handle, ",[208,910,911],{},"null"," before mount) and ",[208,914,915],{},"el",[205,917,918],{},"Before it mounts, and during SSR, the spinner renders a static inline SVG of its merged pose. First paint and hydration match, and nothing shifts when the live version takes over. It pauses when it is offscreen or the tab is hidden.",[242,920,922],{"id":921},"accessibility","Accessibility",[205,924,925,926,928,929,931,932,265],{},"The root is ",[208,927,227],{}," with ",[208,930,231],{},", the same as shadcn's. Override the label with ",[208,933,934],{},"aria-label",[205,936,937,938,265],{},"Reduced motion keeps the goo shape and turns off the simulation: the spinner shows a still, merged pose, and the slosh, grab, and pop interactions are off. See ",[255,939,23],{"href":24},[941,942,943],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":276,"searchDepth":318,"depth":318,"links":945},[946,947,948,949,950,951,952,953],{"id":244,"depth":311,"text":15},{"id":268,"depth":311,"text":269},{"id":507,"depth":311,"text":508},{"id":632,"depth":311,"text":633},{"id":717,"depth":311,"text":718},{"id":830,"depth":311,"text":831},{"id":890,"depth":311,"text":891},{"id":921,"depth":311,"text":922},"shadcn's Spinner, drawn in goo. Blobs chase, merge, and split. Poke it and it sloshes.","md",{},{"title":41,"description":954},"Sp9O7e9QlBxzJWmG0s4PvHQ1d-rlvFXZ-aEOP3CMVt8",[960,962],{"title":37,"path":38,"stem":39,"description":961,"children":-1},"shadcn's Button with goo. Hover to drip, press to squish, tap for a single drip.",{"title":45,"path":46,"stem":47,"description":963,"children":-1},"shadcn's Toggle and ToggleGroup with a goo fill. Pressing floods the button from where you pressed, and in a group the goo flows from one item to the next.",1793670387015]