[{"data":1,"prerenderedAt":438},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fgetting-started\u002Faccessibility":187,"docs-surround:\u002Fdocs\u002Fgetting-started\u002Faccessibility":433},[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":23,"badge":13,"body":189,"description":427,"extension":428,"meta":429,"navigation":430,"path":24,"seo":431,"status":13,"stem":25,"__hash__":432},"docs\u002Fdocs\u002F1.getting-started\u002F4.accessibility.md",{"type":190,"value":191,"toc":417},"minimark",[192,197,206,239,242,249,275,278,281,296,301,304,348,352,374,378,406,410,413],[193,194,196],"h2",{"id":195},"reduced-motion","Reduced motion",[198,199,200,201,205],"p",{},"Every goopUI component honors ",[202,203,204],"code",{},"prefers-reduced-motion: reduce",". It doesn't drop the goo. It switches to a still version:",[207,208,209,217,227,233],"ul",{},[210,211,212,216],"li",{},[213,214,215],"strong",{},"Kept:"," the goo body shape and any resting drips. A reduced-motion button still looks like a goopUI button.",[210,218,219,222,223,226],{},[213,220,221],{},"Turned off:"," the drip simulation, wobble, squish, momentum and flow, reach, taffy, label ride, idle breathing, scroll slosh, splashes, shockwaves, and puddles. This holds for every preset, including ",[202,224,225],{},"wild",".",[210,228,229,232],{},[213,230,231],{},"Oil finish:"," the sheen holds still.",[210,234,235,238],{},[213,236,237],{},"State changes:"," instant, or a short fade.",[198,240,241],{},"The engine watches the setting live. If someone turns it on while the page is open, running drips clear and the body snaps back to rest.",[198,243,244,245,248],{},"You can also force it from your app by setting an attribute on ",[202,246,247],{},"\u003Chtml>",". The engine watches that attribute as well:",[250,251,256],"pre",{"className":252,"code":253,"language":254,"meta":255,"style":255},"language-ts shiki shiki-themes github-light github-dark","document.documentElement.dataset.reducedMotion = 'true'\n","ts","",[202,257,258],{"__ignoreMap":255},[259,260,263,267,271],"span",{"class":261,"line":262},"line",1,[259,264,266],{"class":265},"sVt8B","document.documentElement.dataset.reducedMotion ",[259,268,270],{"class":269},"szBVR","=",[259,272,274],{"class":273},"sZZnC"," 'true'\n",[198,276,277],{},"That's what the switch below does. It also turns off this site's smooth scrolling and scroll reveals, and stops the splashes that fly across the home page.",[279,280],"reduced-motion-demo",{},[198,282,283,284,287,288,291,292,295],{},"Per element, ",[202,285,286],{},"attachGoop(el, { reducedMotion: true })"," forces the still mode and ",[202,289,290],{},"false"," ignores the setting. The default, ",[202,293,294],{},"'auto'",", follows the OS setting and the attribute.",[297,298,300],"h3",{"id":299},"what-stays-on-per-component","What stays on, per component",[198,302,303],{},"The still version keeps each component's shape and turns off its goo motion.",[207,305,306,312,318,324,330,336,342],{},[210,307,308,311],{},[213,309,310],{},"Button:"," the body and resting drips stay. Drips, squish, and shockwaves go.",[210,313,314,317],{},[213,315,316],{},"Switch, Checkbox, Radio group:"," the fill and the thumb or dot jump to the new state.",[210,319,320,323],{},[213,321,322],{},"Slider:"," the fill and thumbs follow the value. No jelly, slosh, stretch, or splat.",[210,325,326,329],{},[213,327,328],{},"Progress:"," the front moves straight to the value. No slosh, wobble, or drips. An indeterminate bar is a still segment.",[210,331,332,335],{},[213,333,334],{},"Spinner:"," a still pose of the blobs.",[210,337,338,341],{},[213,339,340],{},"Popover, Dropdown menu, Tooltip, Tabs:"," the surface or indicator appears without the ooze, necks, and sloshes.",[210,343,344,347],{},[213,345,346],{},"Toaster:"," the toasts keep their goo bodies. No drop in, stretching necks, or drips.",[193,349,351],{"id":350},"assistive-tech","Assistive tech",[207,353,354,365,368,371],{},[210,355,356,357,360,361,364],{},"The goo layer has ",[202,358,359],{},"aria-hidden=\"true\""," and ",[202,362,363],{},"pointer-events: none",". Screen readers, hit-testing, and focus only ever see your real element.",[210,366,367],{},"Labels and icons sit above the goo layer, unfiltered, so text stays sharp and keeps its contrast.",[210,369,370],{},"Roles, keyboard handling, and focus management come from reka-ui. They're the same primitives shadcn-vue uses.",[210,372,373],{},"Focus styles come from your theme. The goo doesn't replace or cover your focus ring.",[193,375,377],{"id":376},"touch-and-pointers","Touch and pointers",[207,379,380,387,390,393,400,403],{},[210,381,382,383,386],{},"Hover drips only run when ",[202,384,385],{},"(hover: hover)"," matches and the pointer is a mouse. A tap on a touch screen never leaves drips running.",[210,388,389],{},"Touch and pen get a squish on press and one drip per tap.",[210,391,392],{},"A right click doesn't squish.",[210,394,395,396,399],{},"Space and Enter on a focused component give the same squish and shockwave as a click, so keyboard users get the same feedback. Set ",[202,397,398],{},"keyboard: false"," to turn that off.",[210,401,402],{},"Escape splashes fly in an overlay that ignores the pointer, so they never block a click.",[210,404,405],{},"Disabled components ignore interaction. Drips already running finish, and nothing new starts.",[193,407,409],{"id":408},"layout","Layout",[198,411,412],{},"Drips never change layout. The goo layer is absolutely positioned and padded outside the element, so content around a dripping button doesn't move.",[414,415,416],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}",{"title":255,"searchDepth":418,"depth":418,"links":419},3,[420,424,425,426],{"id":195,"depth":421,"text":196,"children":422},2,[423],{"id":299,"depth":418,"text":300},{"id":350,"depth":421,"text":351},{"id":376,"depth":421,"text":377},{"id":408,"depth":421,"text":409},"The goo is decoration, so it stays out of the way of assistive tech. Reduced motion keeps the goo shape and turns the motion off.","md",{},true,{"title":23,"description":427},"jThLMIF21TUOkZThtLdczEeY2ebooZ-1b9FZ7_n3aGE",[434,436],{"title":19,"path":20,"stem":21,"description":435,"children":-1},"Colors come from your shadcn tokens. The goo is tuned with a preset and --goop-* CSS variables, globally or per component.",{"title":27,"path":28,"stem":29,"description":437,"children":-1},"Opt-in interaction sounds from Cuelume. Off by default, one prop per component or one switch for the whole app.",1793670386291]