[{"data":1,"prerenderedAt":1997},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fbutton":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fbutton":1992},[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":37,"badge":13,"body":189,"description":1987,"extension":1988,"meta":1989,"navigation":430,"path":38,"seo":1990,"status":13,"stem":39,"__hash__":1991},"docs\u002Fdocs\u002F2.components\u002F01.button.md",{"type":190,"value":191,"toc":1966},"minimark",[192,200,220,224,229,254,296,335,339,353,381,480,484,597,601,604,609,726,730,837,841,852,857,984,988,1006,1012,1041,1045,1064,1109,1121,1125,1135,1140,1287,1294,1342,1346,1360,1365,1498,1502,1511,1516,1626,1630,1641,1646,1725,1729,1734,1859,1907,1911,1914,1917,1921,1938,1943,1947,1962],[193,194,197],"playground",{"caption":195,"name":196},"Hover, swipe through fast, click. Try Let it fly.","button",[198,199],"demo-buttons",{"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 buttons on this page are the real ",[208,217,218],{},"GoopButton",", and the code below is exactly what you write.",[221,222,15],"h2",{"id":223},"installation",[225,226,228],"h3",{"id":227},"nuxt","Nuxt",[230,231,236],"pre",{"className":232,"code":233,"language":234,"meta":235,"style":235},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[208,237,238],{"__ignoreMap":235},[239,240,243,247,251],"span",{"class":241,"line":242},"line",1,[239,244,246],{"class":245},"sScJk","pnpm",[239,248,250],{"class":249},"sZZnC"," add",[239,252,253],{"class":249}," @goopui\u002Fnuxt\n",[230,255,260],{"className":256,"code":257,"filename":258,"language":259,"meta":235,"style":235},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[208,261,262,278,290],{"__ignoreMap":235},[239,263,264,268,271,274],{"class":241,"line":242},[239,265,267],{"class":266},"szBVR","export",[239,269,270],{"class":266}," default",[239,272,273],{"class":245}," defineNuxtConfig",[239,275,277],{"class":276},"sVt8B","({\n",[239,279,281,284,287],{"class":241,"line":280},2,[239,282,283],{"class":276},"  modules: [",[239,285,286],{"class":249},"'@goopui\u002Fnuxt'",[239,288,289],{"class":276},"],\n",[239,291,293],{"class":241,"line":292},3,[239,294,295],{"class":276},"})\n",[205,297,298,299,301,302,305,306,309,310,309,313,309,316,309,319,309,322,309,325,309,328,309,331,334],{},"The module auto-imports ",[208,300,218],{},", adds ",[208,303,304],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (",[208,307,308],{},"--primary",", ",[208,311,312],{},"--secondary",[208,314,315],{},"--destructive",[208,317,318],{},"--border",[208,320,321],{},"--input",[208,323,324],{},"--background",[208,326,327],{},"--muted",[208,329,330],{},"--ring",[208,332,333],{},"--radius",").",[225,336,338],{"id":337},"vue","Vue",[230,340,342],{"className":232,"code":341,"language":234,"meta":235,"style":235},"pnpm add @goopui\u002Fvue\n",[208,343,344],{"__ignoreMap":235},[239,345,346,348,350],{"class":241,"line":242},[239,347,246],{"class":245},[239,349,250],{"class":249},[239,351,352],{"class":249}," @goopui\u002Fvue\n",[230,354,359],{"className":355,"code":356,"filename":357,"language":358,"meta":235,"style":235},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[208,360,361,372],{"__ignoreMap":235},[239,362,363,366,369],{"class":241,"line":242},[239,364,365],{"class":266},"@import",[239,367,368],{"class":249}," \"tailwindcss\"",[239,370,371],{"class":276},";\n",[239,373,374,376,379],{"class":241,"line":280},[239,375,365],{"class":266},[239,377,378],{"class":249}," \"@goopui\u002Fvue\u002Fgoop.css\"",[239,380,371],{"class":276},[230,382,385],{"className":256,"code":383,"filename":384,"language":259,"meta":235,"style":235},"import { createApp } from 'vue'\nimport { GoopPlugin } from '@goopui\u002Fvue'\nimport App from '.\u002FApp.vue'\n\ncreateApp(App)\n  .use(GoopPlugin, { preset: 'playful' }) \u002F\u002F optional: app-wide defaults\n  .mount('#app')\n","main.ts",[208,386,387,401,413,425,432,441,463],{"__ignoreMap":235},[239,388,389,392,395,398],{"class":241,"line":242},[239,390,391],{"class":266},"import",[239,393,394],{"class":276}," { createApp } ",[239,396,397],{"class":266},"from",[239,399,400],{"class":249}," 'vue'\n",[239,402,403,405,408,410],{"class":241,"line":280},[239,404,391],{"class":266},[239,406,407],{"class":276}," { GoopPlugin } ",[239,409,397],{"class":266},[239,411,412],{"class":249}," '@goopui\u002Fvue'\n",[239,414,415,417,420,422],{"class":241,"line":292},[239,416,391],{"class":266},[239,418,419],{"class":276}," App ",[239,421,397],{"class":266},[239,423,424],{"class":249}," '.\u002FApp.vue'\n",[239,426,428],{"class":241,"line":427},4,[239,429,431],{"emptyLinePlaceholder":430},true,"\n",[239,433,435,438],{"class":241,"line":434},5,[239,436,437],{"class":245},"createApp",[239,439,440],{"class":276},"(App)\n",[239,442,444,447,450,453,456,459],{"class":241,"line":443},6,[239,445,446],{"class":276},"  .",[239,448,449],{"class":245},"use",[239,451,452],{"class":276},"(GoopPlugin, { preset: ",[239,454,455],{"class":249},"'playful'",[239,457,458],{"class":276}," }) ",[239,460,462],{"class":461},"sJ8bj","\u002F\u002F optional: app-wide defaults\n",[239,464,466,468,471,474,477],{"class":241,"line":465},7,[239,467,446],{"class":276},[239,469,470],{"class":245},"mount",[239,472,473],{"class":276},"(",[239,475,476],{"class":249},"'#app'",[239,478,479],{"class":276},")\n",[221,481,483],{"id":482},"usage","Usage",[230,485,488],{"className":486,"code":487,"language":337,"meta":235,"style":235},"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 { GoopButton } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopButton>Save\u003C\u002FGoopButton>\n  \u003CGoopButton variant=\"destructive\">Delete\u003C\u002FGoopButton>\n\u003C\u002Ftemplate>\n",[208,489,490,514,519,530,539,543,552,566,588],{"__ignoreMap":235},[239,491,492,495,499,502,505,508,511],{"class":241,"line":242},[239,493,494],{"class":276},"\u003C",[239,496,498],{"class":497},"s9eBZ","script",[239,500,501],{"class":245}," setup",[239,503,504],{"class":245}," lang",[239,506,507],{"class":276},"=",[239,509,510],{"class":249},"\"ts\"",[239,512,513],{"class":276},">\n",[239,515,516],{"class":241,"line":280},[239,517,518],{"class":461},"\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\n",[239,520,521,523,526,528],{"class":241,"line":292},[239,522,391],{"class":266},[239,524,525],{"class":276}," { GoopButton } ",[239,527,397],{"class":266},[239,529,412],{"class":249},[239,531,532,535,537],{"class":241,"line":427},[239,533,534],{"class":276},"\u003C\u002F",[239,536,498],{"class":497},[239,538,513],{"class":276},[239,540,541],{"class":241,"line":434},[239,542,431],{"emptyLinePlaceholder":430},[239,544,545,547,550],{"class":241,"line":443},[239,546,494],{"class":276},[239,548,549],{"class":497},"template",[239,551,513],{"class":276},[239,553,554,557,559,562,564],{"class":241,"line":465},[239,555,556],{"class":276},"  \u003C",[239,558,218],{"class":497},[239,560,561],{"class":276},">Save\u003C\u002F",[239,563,218],{"class":497},[239,565,513],{"class":276},[239,567,569,571,573,576,578,581,584,586],{"class":241,"line":568},8,[239,570,556],{"class":276},[239,572,218],{"class":497},[239,574,575],{"class":245}," variant",[239,577,507],{"class":276},[239,579,580],{"class":249},"\"destructive\"",[239,582,583],{"class":276},">Delete\u003C\u002F",[239,585,218],{"class":497},[239,587,513],{"class":276},[239,589,591,593,595],{"class":241,"line":590},9,[239,592,534],{"class":276},[239,594,549],{"class":497},[239,596,513],{"class":276},[221,598,600],{"id":599},"variants","Variants",[205,602,603],{},"The same variants as shadcn. The goo takes each variant's color: solid for default and secondary, a true tint for destructive, a 1px goo stroke for outline, and hover-only goo for ghost. Link has no goo, since a text link has no surface to drip from.",[605,606,607],"preview",{},[198,608],{"set":599},[230,610,612],{"className":486,"code":611,"language":337,"meta":235,"style":235},"\u003CGoopButton>Default\u003C\u002FGoopButton>\n\u003CGoopButton variant=\"secondary\">Secondary\u003C\u002FGoopButton>\n\u003CGoopButton variant=\"destructive\">Destructive\u003C\u002FGoopButton>\n\u003CGoopButton variant=\"outline\">Outline\u003C\u002FGoopButton>\n\u003CGoopButton variant=\"ghost\">Ghost\u003C\u002FGoopButton>\n\u003CGoopButton variant=\"link\">Link\u003C\u002FGoopButton>\n",[208,613,614,627,647,666,686,706],{"__ignoreMap":235},[239,615,616,618,620,623,625],{"class":241,"line":242},[239,617,494],{"class":276},[239,619,218],{"class":497},[239,621,622],{"class":276},">Default\u003C\u002F",[239,624,218],{"class":497},[239,626,513],{"class":276},[239,628,629,631,633,635,637,640,643,645],{"class":241,"line":280},[239,630,494],{"class":276},[239,632,218],{"class":497},[239,634,575],{"class":245},[239,636,507],{"class":276},[239,638,639],{"class":249},"\"secondary\"",[239,641,642],{"class":276},">Secondary\u003C\u002F",[239,644,218],{"class":497},[239,646,513],{"class":276},[239,648,649,651,653,655,657,659,662,664],{"class":241,"line":292},[239,650,494],{"class":276},[239,652,218],{"class":497},[239,654,575],{"class":245},[239,656,507],{"class":276},[239,658,580],{"class":249},[239,660,661],{"class":276},">Destructive\u003C\u002F",[239,663,218],{"class":497},[239,665,513],{"class":276},[239,667,668,670,672,674,676,679,682,684],{"class":241,"line":427},[239,669,494],{"class":276},[239,671,218],{"class":497},[239,673,575],{"class":245},[239,675,507],{"class":276},[239,677,678],{"class":249},"\"outline\"",[239,680,681],{"class":276},">Outline\u003C\u002F",[239,683,218],{"class":497},[239,685,513],{"class":276},[239,687,688,690,692,694,696,699,702,704],{"class":241,"line":434},[239,689,494],{"class":276},[239,691,218],{"class":497},[239,693,575],{"class":245},[239,695,507],{"class":276},[239,697,698],{"class":249},"\"ghost\"",[239,700,701],{"class":276},">Ghost\u003C\u002F",[239,703,218],{"class":497},[239,705,513],{"class":276},[239,707,708,710,712,714,716,719,722,724],{"class":241,"line":443},[239,709,494],{"class":276},[239,711,218],{"class":497},[239,713,575],{"class":245},[239,715,507],{"class":276},[239,717,718],{"class":249},"\"link\"",[239,720,721],{"class":276},">Link\u003C\u002F",[239,723,218],{"class":497},[239,725,513],{"class":276},[221,727,729],{"id":728},"behavior","Behavior",[731,732,733,744,760,773,790,806,815,821,827],"ul",{},[734,735,736,740,741,334],"li",{},[737,738,739],"strong",{},"Hover"," spawns drips off the bottom edge. They swell and neck. If you keep hovering they detach, fall, shrink, and fade; if the pointer leaves first, they get pulled back up. Resting the pointer keeps a slow drip going (",[208,742,743],{},"--goop-drip-interval",[734,745,746,749,750,309,753,309,756,759],{},[737,747,748],{},"Reach."," Before the pointer even arrives, one to three lumps swell out of the edge toward it (",[208,751,752],{},"--goop-reach",[208,754,755],{},"--goop-reach-globs",[208,757,758],{},"--goop-reach-size","). Come in slowly from below to see them.",[734,761,762,765,766,769,770,334],{},[737,763,764],{},"Speed"," matters. A fast entry spawns more drips in a tighter cluster, and a fast hit (past ",[208,767,768],{},"--goop-splash-min-speed",") fires a click-like shockwave aimed along the motion (",[208,771,772],{},"--goop-hit-effect",[734,774,775,778,779,782,783,786,787,334],{},[737,776,777],{},"Momentum."," The body leans and wobbles with the pointer, hanging drips swing with its acceleration (",[208,780,781],{},"--goop-inertia",") and creep along the edge toward the cursor (",[208,784,785],{},"--goop-flow-to-cursor","), and fast page scrolls make them slosh (",[208,788,789],{},"--goop-scroll-slosh",[734,791,792,795,796,309,799,309,802,805],{},[737,793,794],{},"Taffy."," Press and drag off the button to pull a stretchy string of goo, with a couple of extra strands, until it snaps (",[208,797,798],{},"--goop-taffy",[208,800,801],{},"--goop-taffy-length",[208,803,804],{},"--goop-taffy-strands","). On touch it starts after a long press, so scrolling still works.",[734,807,808,811,812,334],{},[737,809,810],{},"Label ride."," The label moves and squishes with the body; transforms only, so the text stays sharp (",[208,813,814],{},"--goop-label-ride",[734,816,817,820],{},[737,818,819],{},"Click"," squishes the body, then on release adds goo (it swells and drips faster) and fires a shockwave from the click point. Space and Enter do the same from the top.",[734,822,823,826],{},[737,824,825],{},"Touch"," gives a squish, a drip, and a shockwave per tap. Hover drips only run on devices with a real hover.",[734,828,829,832,833,836],{},[737,830,831],{},"Layout"," never changes. Drips and particles draw in an absolutely positioned overlay with ",[208,834,835],{},"pointer-events: none",".",[221,838,840],{"id":839},"sizes-and-shapes","Sizes and shapes",[205,842,843,844,847,848,851],{},"The sizes are shadcn's. The goo follows the element's own box and ",[208,845,846],{},"border-radius",", so a pill is just ",[208,849,850],{},"rounded-full",":",[605,853,854],{},[198,855],{"set":856},"sizes",[230,858,860],{"className":486,"code":859,"language":337,"meta":235,"style":235},"\u003CGoopButton size=\"xs\">Extra small\u003C\u002FGoopButton>\n\u003CGoopButton size=\"sm\">Small\u003C\u002FGoopButton>\n\u003CGoopButton>Default\u003C\u002FGoopButton>\n\u003CGoopButton size=\"lg\">Large\u003C\u002FGoopButton>\n\u003CGoopButton size=\"icon\" aria-label=\"Next\">\u003CArrowRight \u002F>\u003C\u002FGoopButton>\n\u003CGoopButton class=\"rounded-full\">Pill\u003C\u002FGoopButton>\n",[208,861,862,883,903,915,935,963],{"__ignoreMap":235},[239,863,864,866,868,871,873,876,879,881],{"class":241,"line":242},[239,865,494],{"class":276},[239,867,218],{"class":497},[239,869,870],{"class":245}," size",[239,872,507],{"class":276},[239,874,875],{"class":249},"\"xs\"",[239,877,878],{"class":276},">Extra small\u003C\u002F",[239,880,218],{"class":497},[239,882,513],{"class":276},[239,884,885,887,889,891,893,896,899,901],{"class":241,"line":280},[239,886,494],{"class":276},[239,888,218],{"class":497},[239,890,870],{"class":245},[239,892,507],{"class":276},[239,894,895],{"class":249},"\"sm\"",[239,897,898],{"class":276},">Small\u003C\u002F",[239,900,218],{"class":497},[239,902,513],{"class":276},[239,904,905,907,909,911,913],{"class":241,"line":292},[239,906,494],{"class":276},[239,908,218],{"class":497},[239,910,622],{"class":276},[239,912,218],{"class":497},[239,914,513],{"class":276},[239,916,917,919,921,923,925,928,931,933],{"class":241,"line":427},[239,918,494],{"class":276},[239,920,218],{"class":497},[239,922,870],{"class":245},[239,924,507],{"class":276},[239,926,927],{"class":249},"\"lg\"",[239,929,930],{"class":276},">Large\u003C\u002F",[239,932,218],{"class":497},[239,934,513],{"class":276},[239,936,937,939,941,943,945,948,951,953,956,959,961],{"class":241,"line":434},[239,938,494],{"class":276},[239,940,218],{"class":497},[239,942,870],{"class":245},[239,944,507],{"class":276},[239,946,947],{"class":249},"\"icon\"",[239,949,950],{"class":245}," aria-label",[239,952,507],{"class":276},[239,954,955],{"class":249},"\"Next\"",[239,957,958],{"class":276},">\u003CArrowRight \u002F>\u003C\u002F",[239,960,218],{"class":497},[239,962,513],{"class":276},[239,964,965,967,969,972,974,977,980,982],{"class":241,"line":443},[239,966,494],{"class":276},[239,968,218],{"class":497},[239,970,971],{"class":245}," class",[239,973,507],{"class":276},[239,975,976],{"class":249},"\"rounded-full\"",[239,978,979],{"class":276},">Pill\u003C\u002F",[239,981,218],{"class":497},[239,983,513],{"class":276},[221,985,987],{"id":986},"as-a-link","As a link",[205,989,990,993,994,997,998,1001,1002,1005],{},[208,991,992],{},"asChild"," renders your element instead of a ",[208,995,996],{},"\u003Cbutton>",", with the same classes and goo. Use it with ",[208,999,1000],{},"NuxtLink"," (or ",[208,1003,1004],{},"RouterLink","):",[605,1007,1009],{":controls":1008},"false",[198,1010],{"set":1011},"link",[230,1013,1015],{"className":486,"code":1014,"language":337,"meta":235,"style":235},"\u003CGoopButton as-child>\n  \u003CNuxtLink to=\"\u002Fdocs\u002Fgetting-started\u002Finstallation\">Installation guide\u003C\u002FNuxtLink>\n\u003C\u002FGoopButton>\n",[208,1016,1017,1028,1033],{"__ignoreMap":235},[239,1018,1019,1021,1023,1026],{"class":241,"line":242},[239,1020,494],{"class":276},[239,1022,218],{"class":497},[239,1024,1025],{"class":245}," as-child",[239,1027,513],{"class":276},[239,1029,1030],{"class":241,"line":280},[239,1031,1032],{"class":276},"  \u003CNuxtLink to=\"\u002Fdocs\u002Fgetting-started\u002Finstallation\">Installation guide\u003C\u002FNuxtLink>\n",[239,1034,1035,1037,1039],{"class":241,"line":292},[239,1036,534],{"class":276},[239,1038,218],{"class":497},[239,1040,513],{"class":276},[221,1042,1044],{"id":1043},"presets","Presets",[205,1046,1047,309,1050,1053,1054,1057,1058,1060,1061,1063],{},[208,1048,1049],{},"subtle",[208,1051,1052],{},"playful"," (default), and ",[208,1055,1056],{},"wild"," set every feature at once. Use ",[208,1059,1049],{}," in dense UIs, ",[208,1062,1056],{}," for a hero CTA:",[230,1065,1067],{"className":486,"code":1066,"language":337,"meta":235,"style":235},"\u003CGoopButton preset=\"subtle\">Save\u003C\u002FGoopButton>\n\u003CGoopButton preset=\"wild\">Get started\u003C\u002FGoopButton>\n",[208,1068,1069,1089],{"__ignoreMap":235},[239,1070,1071,1073,1075,1078,1080,1083,1085,1087],{"class":241,"line":242},[239,1072,494],{"class":276},[239,1074,218],{"class":497},[239,1076,1077],{"class":245}," preset",[239,1079,507],{"class":276},[239,1081,1082],{"class":249},"\"subtle\"",[239,1084,561],{"class":276},[239,1086,218],{"class":497},[239,1088,513],{"class":276},[239,1090,1091,1093,1095,1097,1099,1102,1105,1107],{"class":241,"line":280},[239,1092,494],{"class":276},[239,1094,218],{"class":497},[239,1096,1077],{"class":245},[239,1098,507],{"class":276},[239,1100,1101],{"class":249},"\"wild\"",[239,1103,1104],{"class":276},">Get started\u003C\u002F",[239,1106,218],{"class":497},[239,1108,513],{"class":276},[205,1110,1111,1112,1115,1116,1120],{},"Or from CSS: ",[208,1113,1114],{},"--goop-preset: wild",". The ",[1117,1118,19],"a",{"href":1119},"\u002Fdocs\u002Fgetting-started\u002Ftheming#presets"," page lists everything each preset changes. To try them on these buttons, use the tuner there.",[221,1122,1124],{"id":1123},"feature-toggles","Feature toggles",[205,1126,1127,1128,1130,1131,1134],{},"Every engine feature is a prop. A boolean switches it off (",[208,1129,1008],{},") or on at the preset's strength (",[208,1132,1133],{},"true","), and a number tunes it. Leave it out and the CSS vars and the preset decide.",[605,1136,1137],{},[198,1138],{"set":1139},"features",[230,1141,1143],{"className":486,"code":1142,"language":337,"meta":235,"style":235},"\u003CGoopButton :shockwave=\"false\" taffy>Taffy, no shockwave\u003C\u002FGoopButton>\n\u003CGoopButton gloss reach>Gloss and reach\u003C\u002FGoopButton>\n\u003CGoopButton preset=\"wild\" variant=\"secondary\">Wild\u003C\u002FGoopButton>\n\u003CGoopButton preset=\"subtle\" variant=\"outline\">Subtle\u003C\u002FGoopButton>\n\u003CGoopButton :drip-size=\"12\" :inertia=\"0.4\">Tuned with numbers\u003C\u002FGoopButton>\n",[208,1144,1145,1177,1196,1221,1246],{"__ignoreMap":235},[239,1146,1147,1149,1151,1154,1157,1159,1162,1165,1167,1170,1173,1175],{"class":241,"line":242},[239,1148,494],{"class":276},[239,1150,218],{"class":497},[239,1152,1153],{"class":276}," :",[239,1155,1156],{"class":245},"shockwave",[239,1158,507],{"class":276},[239,1160,1161],{"class":249},"\"",[239,1163,1008],{"class":1164},"sj4cs",[239,1166,1161],{"class":249},[239,1168,1169],{"class":245}," taffy",[239,1171,1172],{"class":276},">Taffy, no shockwave\u003C\u002F",[239,1174,218],{"class":497},[239,1176,513],{"class":276},[239,1178,1179,1181,1183,1186,1189,1192,1194],{"class":241,"line":280},[239,1180,494],{"class":276},[239,1182,218],{"class":497},[239,1184,1185],{"class":245}," gloss",[239,1187,1188],{"class":245}," reach",[239,1190,1191],{"class":276},">Gloss and reach\u003C\u002F",[239,1193,218],{"class":497},[239,1195,513],{"class":276},[239,1197,1198,1200,1202,1204,1206,1208,1210,1212,1214,1217,1219],{"class":241,"line":292},[239,1199,494],{"class":276},[239,1201,218],{"class":497},[239,1203,1077],{"class":245},[239,1205,507],{"class":276},[239,1207,1101],{"class":249},[239,1209,575],{"class":245},[239,1211,507],{"class":276},[239,1213,639],{"class":249},[239,1215,1216],{"class":276},">Wild\u003C\u002F",[239,1218,218],{"class":497},[239,1220,513],{"class":276},[239,1222,1223,1225,1227,1229,1231,1233,1235,1237,1239,1242,1244],{"class":241,"line":427},[239,1224,494],{"class":276},[239,1226,218],{"class":497},[239,1228,1077],{"class":245},[239,1230,507],{"class":276},[239,1232,1082],{"class":249},[239,1234,575],{"class":245},[239,1236,507],{"class":276},[239,1238,678],{"class":249},[239,1240,1241],{"class":276},">Subtle\u003C\u002F",[239,1243,218],{"class":497},[239,1245,513],{"class":276},[239,1247,1248,1250,1252,1254,1257,1259,1261,1264,1266,1268,1271,1273,1275,1278,1280,1283,1285],{"class":241,"line":434},[239,1249,494],{"class":276},[239,1251,218],{"class":497},[239,1253,1153],{"class":276},[239,1255,1256],{"class":245},"drip-size",[239,1258,507],{"class":276},[239,1260,1161],{"class":249},[239,1262,1263],{"class":1164},"12",[239,1265,1161],{"class":249},[239,1267,1153],{"class":276},[239,1269,1270],{"class":245},"inertia",[239,1272,507],{"class":276},[239,1274,1161],{"class":249},[239,1276,1277],{"class":1164},"0.4",[239,1279,1161],{"class":249},[239,1281,1282],{"class":276},">Tuned with numbers\u003C\u002F",[239,1284,218],{"class":497},[239,1286,513],{"class":276},[205,1288,1289,1290,1293],{},"For anything not covered by a prop, the ",[208,1291,1292],{},"goop"," prop takes a whole options object, and explicit props win over it:",[230,1295,1297],{"className":486,"code":1296,"language":337,"meta":235,"style":235},"\u003CGoopButton :goop=\"{ splash: 'escape', restingDrips: [0.3, 0.7] }\">Escape artist\u003C\u002FGoopButton>\n",[208,1298,1299],{"__ignoreMap":235},[239,1300,1301,1303,1305,1307,1309,1311,1313,1316,1319,1322,1325,1327,1330,1333,1335,1338,1340],{"class":241,"line":242},[239,1302,494],{"class":276},[239,1304,218],{"class":497},[239,1306,1153],{"class":276},[239,1308,1292],{"class":245},[239,1310,507],{"class":276},[239,1312,1161],{"class":249},[239,1314,1315],{"class":276},"{ splash: ",[239,1317,1318],{"class":249},"'escape'",[239,1320,1321],{"class":276},", restingDrips: [",[239,1323,1324],{"class":1164},"0.3",[239,1326,309],{"class":276},[239,1328,1329],{"class":1164},"0.7",[239,1331,1332],{"class":276},"] }",[239,1334,1161],{"class":249},[239,1336,1337],{"class":276},">Escape artist\u003C\u002F",[239,1339,218],{"class":497},[239,1341,513],{"class":276},[221,1343,1345],{"id":1344},"resting-drips","Resting drips",[205,1347,1348,1351,1352,1355,1356,1359],{},[208,1349,1350],{},"restingDrips"," hangs still drips off the edge, and they breathe very slowly (",[208,1353,1354],{},"--goop-idle","). Give it a count, or place them as fractions of the width, or as ",[208,1357,1358],{},"{ x, size, length }"," objects for an organic, uneven edge. They're also what's left in reduced-motion mode:",[605,1361,1362],{":controls":1008},[198,1363],{"set":1364},"resting",[230,1366,1368],{"className":486,"code":1367,"language":337,"meta":235,"style":235},"\u003CGoopButton :resting-drips=\"1\">One drip\u003C\u002FGoopButton>\n\u003CGoopButton variant=\"destructive\" :resting-drips=\"2\">Two drips\u003C\u002FGoopButton>\n\u003CGoopButton class=\"rounded-full\" :resting-drips=\"[0.2, 0.32, 0.8]\" :drip-length=\"20\">\n  Placed: 0.2, 0.32, 0.8\n\u003C\u002FGoopButton>\n",[208,1369,1370,1396,1428,1485,1490],{"__ignoreMap":235},[239,1371,1372,1374,1376,1378,1380,1382,1384,1387,1389,1392,1394],{"class":241,"line":242},[239,1373,494],{"class":276},[239,1375,218],{"class":497},[239,1377,1153],{"class":276},[239,1379,1344],{"class":245},[239,1381,507],{"class":276},[239,1383,1161],{"class":249},[239,1385,1386],{"class":1164},"1",[239,1388,1161],{"class":249},[239,1390,1391],{"class":276},">One drip\u003C\u002F",[239,1393,218],{"class":497},[239,1395,513],{"class":276},[239,1397,1398,1400,1402,1404,1406,1408,1410,1412,1414,1416,1419,1421,1424,1426],{"class":241,"line":280},[239,1399,494],{"class":276},[239,1401,218],{"class":497},[239,1403,575],{"class":245},[239,1405,507],{"class":276},[239,1407,580],{"class":249},[239,1409,1153],{"class":276},[239,1411,1344],{"class":245},[239,1413,507],{"class":276},[239,1415,1161],{"class":249},[239,1417,1418],{"class":1164},"2",[239,1420,1161],{"class":249},[239,1422,1423],{"class":276},">Two drips\u003C\u002F",[239,1425,218],{"class":497},[239,1427,513],{"class":276},[239,1429,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448,1451,1454,1456,1459,1461,1464,1467,1469,1471,1474,1476,1478,1481,1483],{"class":241,"line":292},[239,1431,494],{"class":276},[239,1433,218],{"class":497},[239,1435,971],{"class":245},[239,1437,507],{"class":276},[239,1439,976],{"class":249},[239,1441,1153],{"class":276},[239,1443,1344],{"class":245},[239,1445,507],{"class":276},[239,1447,1161],{"class":249},[239,1449,1450],{"class":276},"[",[239,1452,1453],{"class":1164},"0.2",[239,1455,309],{"class":276},[239,1457,1458],{"class":1164},"0.32",[239,1460,309],{"class":276},[239,1462,1463],{"class":1164},"0.8",[239,1465,1466],{"class":276},"]",[239,1468,1161],{"class":249},[239,1470,1153],{"class":276},[239,1472,1473],{"class":245},"drip-length",[239,1475,507],{"class":276},[239,1477,1161],{"class":249},[239,1479,1480],{"class":1164},"20",[239,1482,1161],{"class":249},[239,1484,513],{"class":276},[239,1486,1487],{"class":241,"line":427},[239,1488,1489],{"class":276},"  Placed: 0.2, 0.32, 0.8\n",[239,1491,1492,1494,1496],{"class":241,"line":434},[239,1493,534],{"class":276},[239,1495,218],{"class":497},[239,1497,513],{"class":276},[221,1499,1501],{"id":1500},"oil-finish","Oil finish",[205,1503,1504,1001,1507,1510],{},[208,1505,1506],{},"finish=\"oil\"",[208,1508,1509],{},"--goop-finish: oil",") gives the goo a thin-film sheen. It works on any color, and is strongest on dark ink:",[605,1512,1513],{},[198,1514],{"set":1515},"oil",[230,1517,1519],{"className":486,"code":1518,"language":337,"meta":235,"style":235},"\u003CGoopButton\n  size=\"lg\"\n  finish=\"oil\"\n  :oil-intensity=\"0.6\"\n  class=\"bg-neutral-950 text-white [--goop-color:var(--color-neutral-950)]\"\n>\n  Crude oil\n\u003C\u002FGoopButton>\n\u003CGoopButton size=\"lg\" variant=\"destructive\" finish=\"oil\">Oil on red\u003C\u002FGoopButton>\n",[208,1520,1521,1528,1538,1548,1566,1576,1580,1585,1593],{"__ignoreMap":235},[239,1522,1523,1525],{"class":241,"line":242},[239,1524,494],{"class":276},[239,1526,1527],{"class":497},"GoopButton\n",[239,1529,1530,1533,1535],{"class":241,"line":280},[239,1531,1532],{"class":245},"  size",[239,1534,507],{"class":276},[239,1536,1537],{"class":249},"\"lg\"\n",[239,1539,1540,1543,1545],{"class":241,"line":292},[239,1541,1542],{"class":245},"  finish",[239,1544,507],{"class":276},[239,1546,1547],{"class":249},"\"oil\"\n",[239,1549,1550,1553,1556,1558,1560,1563],{"class":241,"line":427},[239,1551,1552],{"class":276},"  :",[239,1554,1555],{"class":245},"oil-intensity",[239,1557,507],{"class":276},[239,1559,1161],{"class":249},[239,1561,1562],{"class":1164},"0.6",[239,1564,1565],{"class":249},"\"\n",[239,1567,1568,1571,1573],{"class":241,"line":434},[239,1569,1570],{"class":245},"  class",[239,1572,507],{"class":276},[239,1574,1575],{"class":249},"\"bg-neutral-950 text-white [--goop-color:var(--color-neutral-950)]\"\n",[239,1577,1578],{"class":241,"line":443},[239,1579,513],{"class":276},[239,1581,1582],{"class":241,"line":465},[239,1583,1584],{"class":276},"  Crude oil\n",[239,1586,1587,1589,1591],{"class":241,"line":568},[239,1588,534],{"class":276},[239,1590,218],{"class":497},[239,1592,513],{"class":276},[239,1594,1595,1597,1599,1601,1603,1605,1607,1609,1611,1614,1616,1619,1622,1624],{"class":241,"line":590},[239,1596,494],{"class":276},[239,1598,218],{"class":497},[239,1600,870],{"class":245},[239,1602,507],{"class":276},[239,1604,927],{"class":249},[239,1606,575],{"class":245},[239,1608,507],{"class":276},[239,1610,580],{"class":249},[239,1612,1613],{"class":245}," finish",[239,1615,507],{"class":276},[239,1617,1618],{"class":249},"\"oil\"",[239,1620,1621],{"class":276},">Oil on red\u003C\u002F",[239,1623,218],{"class":497},[239,1625,513],{"class":276},[221,1627,1629],{"id":1628},"disabled-and-drip-free","Disabled and drip-free",[205,1631,1632,1633,1636,1637,1640],{},"A disabled button ignores the pointer. Drips already running finish, and nothing new starts. ",[208,1634,1635],{},":drips=\"false\""," keeps the press squish, and ",[208,1638,1639],{},":goo=\"false\""," renders a plain shadcn Button:",[605,1642,1643],{":controls":1008},[198,1644],{"set":1645},"disabled",[230,1647,1649],{"className":486,"code":1648,"language":337,"meta":235,"style":235},"\u003CGoopButton disabled>Disabled\u003C\u002FGoopButton>\n\u003CGoopButton :drips=\"false\">No drips, squish only\u003C\u002FGoopButton>\n\u003CGoopButton :goo=\"false\" variant=\"outline\">Plain shadcn (goo off)\u003C\u002FGoopButton>\n",[208,1650,1651,1667,1693],{"__ignoreMap":235},[239,1652,1653,1655,1657,1660,1663,1665],{"class":241,"line":242},[239,1654,494],{"class":276},[239,1656,218],{"class":497},[239,1658,1659],{"class":245}," disabled",[239,1661,1662],{"class":276},">Disabled\u003C\u002F",[239,1664,218],{"class":497},[239,1666,513],{"class":276},[239,1668,1669,1671,1673,1675,1678,1680,1682,1684,1686,1689,1691],{"class":241,"line":280},[239,1670,494],{"class":276},[239,1672,218],{"class":497},[239,1674,1153],{"class":276},[239,1676,1677],{"class":245},"drips",[239,1679,507],{"class":276},[239,1681,1161],{"class":249},[239,1683,1008],{"class":1164},[239,1685,1161],{"class":249},[239,1687,1688],{"class":276},">No drips, squish only\u003C\u002F",[239,1690,218],{"class":497},[239,1692,513],{"class":276},[239,1694,1695,1697,1699,1701,1704,1706,1708,1710,1712,1714,1716,1718,1721,1723],{"class":241,"line":292},[239,1696,494],{"class":276},[239,1698,218],{"class":497},[239,1700,1153],{"class":276},[239,1702,1703],{"class":245},"goo",[239,1705,507],{"class":276},[239,1707,1161],{"class":249},[239,1709,1008],{"class":1164},[239,1711,1161],{"class":249},[239,1713,575],{"class":245},[239,1715,507],{"class":276},[239,1717,678],{"class":249},[239,1719,1720],{"class":276},">Plain shadcn (goo off)\u003C\u002F",[239,1722,218],{"class":497},[239,1724,513],{"class":276},[221,1726,1728],{"id":1727},"driving-it-from-code","Driving it from code",[205,1730,1731,1733],{},[208,1732,218],{}," exposes the engine handle and its methods, so you can drip or splash it from a script, like the Drip button under the demos above does:",[230,1735,1737],{"className":486,"code":1736,"language":337,"meta":235,"style":235},"\u003Cscript setup lang=\"ts\">\nconst btn = useTemplateRef('btn')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopButton ref=\"btn\" :time-scale=\"0.3\">Slow\u003C\u002FGoopButton>\n  \u003Cbutton @click=\"btn?.drip()\">Drip it\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[208,1738,1739,1755,1776,1784,1788,1796,1830,1851],{"__ignoreMap":235},[239,1740,1741,1743,1745,1747,1749,1751,1753],{"class":241,"line":242},[239,1742,494],{"class":276},[239,1744,498],{"class":497},[239,1746,501],{"class":245},[239,1748,504],{"class":245},[239,1750,507],{"class":276},[239,1752,510],{"class":249},[239,1754,513],{"class":276},[239,1756,1757,1760,1763,1766,1769,1771,1774],{"class":241,"line":280},[239,1758,1759],{"class":266},"const",[239,1761,1762],{"class":1164}," btn",[239,1764,1765],{"class":266}," =",[239,1767,1768],{"class":245}," useTemplateRef",[239,1770,473],{"class":276},[239,1772,1773],{"class":249},"'btn'",[239,1775,479],{"class":276},[239,1777,1778,1780,1782],{"class":241,"line":292},[239,1779,534],{"class":276},[239,1781,498],{"class":497},[239,1783,513],{"class":276},[239,1785,1786],{"class":241,"line":427},[239,1787,431],{"emptyLinePlaceholder":430},[239,1789,1790,1792,1794],{"class":241,"line":434},[239,1791,494],{"class":276},[239,1793,549],{"class":497},[239,1795,513],{"class":276},[239,1797,1798,1800,1802,1805,1807,1810,1812,1815,1817,1819,1821,1823,1826,1828],{"class":241,"line":443},[239,1799,556],{"class":276},[239,1801,218],{"class":497},[239,1803,1804],{"class":245}," ref",[239,1806,507],{"class":276},[239,1808,1809],{"class":249},"\"btn\"",[239,1811,1153],{"class":276},[239,1813,1814],{"class":245},"time-scale",[239,1816,507],{"class":276},[239,1818,1161],{"class":249},[239,1820,1324],{"class":1164},[239,1822,1161],{"class":249},[239,1824,1825],{"class":276},">Slow\u003C\u002F",[239,1827,218],{"class":497},[239,1829,513],{"class":276},[239,1831,1832,1834,1836,1839,1841,1844,1847,1849],{"class":241,"line":465},[239,1833,556],{"class":276},[239,1835,196],{"class":497},[239,1837,1838],{"class":245}," @click",[239,1840,507],{"class":276},[239,1842,1843],{"class":249},"\"btn?.drip()\"",[239,1845,1846],{"class":276},">Drip it\u003C\u002F",[239,1848,196],{"class":497},[239,1850,513],{"class":276},[239,1852,1853,1855,1857],{"class":241,"line":568},[239,1854,534],{"class":276},[239,1856,549],{"class":497},[239,1858,513],{"class":276},[205,1860,1861,1862,309,1865,309,1868,309,1871,309,1874,309,1877,309,1880,309,1883,309,1886,309,1889,309,1892,1895,1896,1899,1900,1903,1904,1906],{},"It exposes ",[208,1863,1864],{},"handle",[208,1866,1867],{},"el",[208,1869,1870],{},"refresh()",[208,1872,1873],{},"press()",[208,1875,1876],{},"release()",[208,1878,1879],{},"hover(on, x?)",[208,1881,1882],{},"drip(x?)",[208,1884,1885],{},"addGoop()",[208,1887,1888],{},"shockwave()",[208,1890,1891],{},"splashThrough()",[208,1893,1894],{},"feedPointer()",", and ",[208,1897,1898],{},"inspect()",". After changing ",[208,1901,1902],{},"--goop-*"," vars on an ancestor, call ",[208,1905,1870],{}," so the button re-reads them.",[221,1908,1910],{"id":1909},"props","Props",[205,1912,1913],{},"GoopButton keeps the shadcn-vue Button API and adds the goo props.",[1915,1916],"component-props",{"name":196},[225,1918,1920],{"id":1919},"engine-props","Engine props",[205,1922,1923,1924,1927,1928,1931,1932,1934,1935,1937],{},"Every engine option is a prop, in camelCase (",[208,1925,1926],{},"dripSize"," becomes ",[208,1929,1930],{},":drip-size","). This table is generated from the engine's own metadata, so it always matches the version of the docs you're reading. Each prop is also a ",[208,1933,1902],{}," CSS variable. Precedence, high to low: prop, then the ",[208,1936,1292],{}," object, then CSS var, then preset, then default.",[1939,1940],"goop-button-props",{"part":1941},[1942],"engine",[221,1944,1946],{"id":1945},"accessibility","Accessibility",[205,1948,1949,1950,1952,1953,1955,1956,1959,1960,836],{},"It's a real ",[208,1951,996],{}," (or your ",[208,1954,992],{}," element). The goo layer is ",[208,1957,1958],{},"aria-hidden"," and can't be clicked, the label is never filtered, and your focus ring isn't covered. Space and Enter get the same squish and shockwave as a click. Under reduced motion the shape and resting drips stay; drips, squish, momentum, reach, taffy, splashes, and shockwaves turn off, and an oil sheen holds still. See ",[1117,1961,23],{"href":24},[1963,1964,1965],"style",{},"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 .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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":235,"searchDepth":292,"depth":292,"links":1967},[1968,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1986],{"id":223,"depth":280,"text":15,"children":1969},[1970,1971],{"id":227,"depth":292,"text":228},{"id":337,"depth":292,"text":338},{"id":482,"depth":280,"text":483},{"id":599,"depth":280,"text":600},{"id":728,"depth":280,"text":729},{"id":839,"depth":280,"text":840},{"id":986,"depth":280,"text":987},{"id":1043,"depth":280,"text":1044},{"id":1123,"depth":280,"text":1124},{"id":1344,"depth":280,"text":1345},{"id":1500,"depth":280,"text":1501},{"id":1628,"depth":280,"text":1629},{"id":1727,"depth":280,"text":1728},{"id":1909,"depth":280,"text":1910,"children":1984},[1985],{"id":1919,"depth":292,"text":1920},{"id":1945,"depth":280,"text":1946},"shadcn's Button with goo. Hover to drip, press to squish, tap for a single drip.","md",{},{"title":37,"description":1987},"zhF-Ve04ifgxRByagyNtdlDz95cGUDrsMKgRJTU84_M",[1993,1995],{"title":27,"path":28,"stem":29,"description":1994,"children":-1},"Opt-in interaction sounds from Cuelume. Off by default, one prop per component or one switch for the whole app.",{"title":41,"path":42,"stem":43,"description":1996,"children":-1},"shadcn's Spinner, drawn in goo. Blobs chase, merge, and split. Poke it and it sloshes.",1793670386527]