[{"data":1,"prerenderedAt":1343},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fdialog":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fdialog":1338},[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":98,"badge":48,"body":189,"description":1333,"extension":1334,"meta":1335,"navigation":513,"path":99,"seo":1336,"status":13,"stem":100,"__hash__":1337},"docs\u002Fdocs\u002F2.components\u002F16.dialog.md",{"type":190,"value":191,"toc":1318},"minimark",[192,201,221,234,238,243,268,310,338,342,356,384,388,775,802,806,860,864,875,881,936,950,954,965,970,1030,1034,1043,1069,1075,1080,1171,1186,1190,1200,1230,1234,1250,1254,1272,1275,1302,1306,1314],[193,194,197],"playground",{"caption":195,"name":196},"Open it, then close it with Escape, the X, or a button.","dialog",[198,199],"demo-dialog",{"set":200},"basic",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,220],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha. Dialog is new and experimental: its goo props may still change before 1.0. The dialogs on this page are the real ",[209,218,219],{},"GoopDialog",".",[206,222,223,225,226,233],{},[209,224,219],{}," wraps the same ",[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fdialog",[231],"nofollow","reka-ui Dialog"," primitive as shadcn-vue's Dialog, with the same API. Focus trapping, scroll locking, and dismissal work the same. Swap the imports and you're done.",[235,236,15],"h2",{"id":237},"installation",[239,240,242],"h3",{"id":241},"nuxt","Nuxt",[244,245,250],"pre",{"className":246,"code":247,"language":248,"meta":249,"style":249},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[209,251,252],{"__ignoreMap":249},[253,254,257,261,265],"span",{"class":255,"line":256},"line",1,[253,258,260],{"class":259},"sScJk","pnpm",[253,262,264],{"class":263},"sZZnC"," add",[253,266,267],{"class":263}," @goopui\u002Fnuxt\n",[244,269,274],{"className":270,"code":271,"filename":272,"language":273,"meta":249,"style":249},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[209,275,276,292,304],{"__ignoreMap":249},[253,277,278,282,285,288],{"class":255,"line":256},[253,279,281],{"class":280},"szBVR","export",[253,283,284],{"class":280}," default",[253,286,287],{"class":259}," defineNuxtConfig",[253,289,291],{"class":290},"sVt8B","({\n",[253,293,295,298,301],{"class":255,"line":294},2,[253,296,297],{"class":290},"  modules: [",[253,299,300],{"class":263},"'@goopui\u002Fnuxt'",[253,302,303],{"class":290},"],\n",[253,305,307],{"class":255,"line":306},3,[253,308,309],{"class":290},"})\n",[206,311,312,313,316,317,320,321,324,325,324,328,324,331,324,334,337],{},"The module auto-imports every ",[209,314,315],{},"GoopDialog*"," part, adds ",[209,318,319],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (",[209,322,323],{},"--background",", ",[209,326,327],{},"--foreground",[209,329,330],{},"--muted-foreground",[209,332,333],{},"--ring",[209,335,336],{},"--radius",").",[239,339,341],{"id":340},"vue","Vue",[244,343,345],{"className":246,"code":344,"language":248,"meta":249,"style":249},"pnpm add @goopui\u002Fvue\n",[209,346,347],{"__ignoreMap":249},[253,348,349,351,353],{"class":255,"line":256},[253,350,260],{"class":259},[253,352,264],{"class":263},[253,354,355],{"class":263}," @goopui\u002Fvue\n",[244,357,362],{"className":358,"code":359,"filename":360,"language":361,"meta":249,"style":249},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[209,363,364,375],{"__ignoreMap":249},[253,365,366,369,372],{"class":255,"line":256},[253,367,368],{"class":280},"@import",[253,370,371],{"class":263}," \"tailwindcss\"",[253,373,374],{"class":290},";\n",[253,376,377,379,382],{"class":255,"line":294},[253,378,368],{"class":280},[253,380,381],{"class":263}," \"@goopui\u002Fvue\u002Fgoop.css\"",[253,383,374],{"class":290},[235,385,387],{"id":386},"usage","Usage",[244,389,392],{"className":390,"code":391,"language":340,"meta":249,"style":249},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\nimport {\n  GoopButton,\n  GoopDialog,\n  GoopDialogClose,\n  GoopDialogContent,\n  GoopDialogDescription,\n  GoopDialogFooter,\n  GoopDialogHeader,\n  GoopDialogTitle,\n  GoopDialogTrigger,\n} from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopDialog>\n    \u003CGoopDialogTrigger as-child>\n      \u003CGoopButton variant=\"outline\">Edit profile\u003C\u002FGoopButton>\n    \u003C\u002FGoopDialogTrigger>\n    \u003CGoopDialogContent class=\"sm:max-w-md\">\n      \u003CGoopDialogHeader>\n        \u003CGoopDialogTitle>Edit profile\u003C\u002FGoopDialogTitle>\n        \u003CGoopDialogDescription>Make changes to your profile here.\u003C\u002FGoopDialogDescription>\n      \u003C\u002FGoopDialogHeader>\n      \u003CGoopDialogFooter>\n        \u003CGoopDialogClose as-child>\n          \u003CGoopButton variant=\"outline\">Cancel\u003C\u002FGoopButton>\n        \u003C\u002FGoopDialogClose>\n        \u003CGoopDialogClose as-child>\n          \u003CGoopButton>Save changes\u003C\u002FGoopButton>\n        \u003C\u002FGoopDialogClose>\n      \u003C\u002FGoopDialogFooter>\n    \u003C\u002FGoopDialogContent>\n  \u003C\u002FGoopDialog>\n\u003C\u002Ftemplate>\n",[209,393,394,418,424,432,438,444,450,456,462,468,474,480,486,498,508,515,525,535,549,573,583,601,611,626,641,651,661,673,694,704,715,729,738,747,756,766],{"__ignoreMap":249},[253,395,396,399,403,406,409,412,415],{"class":255,"line":256},[253,397,398],{"class":290},"\u003C",[253,400,402],{"class":401},"s9eBZ","script",[253,404,405],{"class":259}," setup",[253,407,408],{"class":259}," lang",[253,410,411],{"class":290},"=",[253,413,414],{"class":263},"\"ts\"",[253,416,417],{"class":290},">\n",[253,419,420],{"class":255,"line":294},[253,421,423],{"class":422},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[253,425,426,429],{"class":255,"line":306},[253,427,428],{"class":280},"import",[253,430,431],{"class":290}," {\n",[253,433,435],{"class":255,"line":434},4,[253,436,437],{"class":290},"  GoopButton,\n",[253,439,441],{"class":255,"line":440},5,[253,442,443],{"class":290},"  GoopDialog,\n",[253,445,447],{"class":255,"line":446},6,[253,448,449],{"class":290},"  GoopDialogClose,\n",[253,451,453],{"class":255,"line":452},7,[253,454,455],{"class":290},"  GoopDialogContent,\n",[253,457,459],{"class":255,"line":458},8,[253,460,461],{"class":290},"  GoopDialogDescription,\n",[253,463,465],{"class":255,"line":464},9,[253,466,467],{"class":290},"  GoopDialogFooter,\n",[253,469,471],{"class":255,"line":470},10,[253,472,473],{"class":290},"  GoopDialogHeader,\n",[253,475,477],{"class":255,"line":476},11,[253,478,479],{"class":290},"  GoopDialogTitle,\n",[253,481,483],{"class":255,"line":482},12,[253,484,485],{"class":290},"  GoopDialogTrigger,\n",[253,487,489,492,495],{"class":255,"line":488},13,[253,490,491],{"class":290},"} ",[253,493,494],{"class":280},"from",[253,496,497],{"class":263}," '@goopui\u002Fvue'\n",[253,499,501,504,506],{"class":255,"line":500},14,[253,502,503],{"class":290},"\u003C\u002F",[253,505,402],{"class":401},[253,507,417],{"class":290},[253,509,511],{"class":255,"line":510},15,[253,512,514],{"emptyLinePlaceholder":513},true,"\n",[253,516,518,520,523],{"class":255,"line":517},16,[253,519,398],{"class":290},[253,521,522],{"class":401},"template",[253,524,417],{"class":290},[253,526,528,531,533],{"class":255,"line":527},17,[253,529,530],{"class":290},"  \u003C",[253,532,219],{"class":401},[253,534,417],{"class":290},[253,536,538,541,544,547],{"class":255,"line":537},18,[253,539,540],{"class":290},"    \u003C",[253,542,543],{"class":401},"GoopDialogTrigger",[253,545,546],{"class":259}," as-child",[253,548,417],{"class":290},[253,550,552,555,558,561,563,566,569,571],{"class":255,"line":551},19,[253,553,554],{"class":290},"      \u003C",[253,556,557],{"class":401},"GoopButton",[253,559,560],{"class":259}," variant",[253,562,411],{"class":290},[253,564,565],{"class":263},"\"outline\"",[253,567,568],{"class":290},">Edit profile\u003C\u002F",[253,570,557],{"class":401},[253,572,417],{"class":290},[253,574,576,579,581],{"class":255,"line":575},20,[253,577,578],{"class":290},"    \u003C\u002F",[253,580,543],{"class":401},[253,582,417],{"class":290},[253,584,586,588,591,594,596,599],{"class":255,"line":585},21,[253,587,540],{"class":290},[253,589,590],{"class":401},"GoopDialogContent",[253,592,593],{"class":259}," class",[253,595,411],{"class":290},[253,597,598],{"class":263},"\"sm:max-w-md\"",[253,600,417],{"class":290},[253,602,604,606,609],{"class":255,"line":603},22,[253,605,554],{"class":290},[253,607,608],{"class":401},"GoopDialogHeader",[253,610,417],{"class":290},[253,612,614,617,620,622,624],{"class":255,"line":613},23,[253,615,616],{"class":290},"        \u003C",[253,618,619],{"class":401},"GoopDialogTitle",[253,621,568],{"class":290},[253,623,619],{"class":401},[253,625,417],{"class":290},[253,627,629,631,634,637,639],{"class":255,"line":628},24,[253,630,616],{"class":290},[253,632,633],{"class":401},"GoopDialogDescription",[253,635,636],{"class":290},">Make changes to your profile here.\u003C\u002F",[253,638,633],{"class":401},[253,640,417],{"class":290},[253,642,644,647,649],{"class":255,"line":643},25,[253,645,646],{"class":290},"      \u003C\u002F",[253,648,608],{"class":401},[253,650,417],{"class":290},[253,652,654,656,659],{"class":255,"line":653},26,[253,655,554],{"class":290},[253,657,658],{"class":401},"GoopDialogFooter",[253,660,417],{"class":290},[253,662,664,666,669,671],{"class":255,"line":663},27,[253,665,616],{"class":290},[253,667,668],{"class":401},"GoopDialogClose",[253,670,546],{"class":259},[253,672,417],{"class":290},[253,674,676,679,681,683,685,687,690,692],{"class":255,"line":675},28,[253,677,678],{"class":290},"          \u003C",[253,680,557],{"class":401},[253,682,560],{"class":259},[253,684,411],{"class":290},[253,686,565],{"class":263},[253,688,689],{"class":290},">Cancel\u003C\u002F",[253,691,557],{"class":401},[253,693,417],{"class":290},[253,695,697,700,702],{"class":255,"line":696},29,[253,698,699],{"class":290},"        \u003C\u002F",[253,701,668],{"class":401},[253,703,417],{"class":290},[253,705,707,709,711,713],{"class":255,"line":706},30,[253,708,616],{"class":290},[253,710,668],{"class":401},[253,712,546],{"class":259},[253,714,417],{"class":290},[253,716,718,720,722,725,727],{"class":255,"line":717},31,[253,719,678],{"class":290},[253,721,557],{"class":401},[253,723,724],{"class":290},">Save changes\u003C\u002F",[253,726,557],{"class":401},[253,728,417],{"class":290},[253,730,732,734,736],{"class":255,"line":731},32,[253,733,699],{"class":290},[253,735,668],{"class":401},[253,737,417],{"class":290},[253,739,741,743,745],{"class":255,"line":740},33,[253,742,646],{"class":290},[253,744,658],{"class":401},[253,746,417],{"class":290},[253,748,750,752,754],{"class":255,"line":749},34,[253,751,578],{"class":290},[253,753,590],{"class":401},[253,755,417],{"class":290},[253,757,759,762,764],{"class":255,"line":758},35,[253,760,761],{"class":290},"  \u003C\u002F",[253,763,219],{"class":401},[253,765,417],{"class":290},[253,767,769,771,773],{"class":255,"line":768},36,[253,770,503],{"class":290},[253,772,522],{"class":401},[253,774,417],{"class":290},[206,776,777,778,324,780,324,782,324,784,324,787,324,789,324,791,324,793,795,796,798,799,801],{},"The parts are ",[209,779,219],{},[209,781,543],{},[209,783,590],{},[209,785,786],{},"GoopDialogOverlay",[209,788,608],{},[209,790,658],{},[209,792,619],{},[209,794,633],{},", and ",[209,797,668],{},". All the goo lives on ",[209,800,590],{},", which renders its own overlay and portal, like shadcn's.",[235,803,805],{"id":804},"behavior","Behavior",[807,808,809,817,829,838,851],"ul",{},[810,811,812,816],"li",{},[813,814,815],"strong",{},"Open."," A dialog has no trigger to grow out of, so the panel pools from its own center. A droplet swells, spreads with a lobed edge, and fills the panel.",[810,818,819,822,823,324,826,337],{},[813,820,821],{},"Slosh and splash."," Every side overshoots past rest, rebounds, and wobbles. Then the big all-around splash: globs, drops, and specks fling off every side, fall, and fade (",[209,824,825],{},"openSlosh",[209,827,828],{},"openDrips",[810,830,831,834,835,337],{},[813,832,833],{},"Close."," The panel pulls in, wobbles, and shrinks back to its center (",[209,836,837],{},"closeSlosh",[810,839,840,843,844,847,848,337],{},[813,841,842],{},"Content stays sharp."," Only the panel's background and shadow are goo. They're drawn on an ",[209,845,846],{},"aria-hidden"," surface behind your content, so text and inputs are never filtered. The content fades in once the goo has mostly spread (",[209,849,850],{},"fade",[810,852,853,856,857,220],{},[813,854,855],{},"Layout"," never changes. The goo draws in an overlay with ",[209,858,859],{},"pointer-events: none",[235,861,863],{"id":862},"goo-overlay","Goo overlay",[206,865,866,867,870,871,874],{},"The overlay is shadcn's fading backdrop by default. Set ",[209,868,869],{},"overlay"," to make it goo: the dimmed backdrop pours down over the page with a drippy leading edge, and drains off the bottom on close. ",[209,872,873],{},"overlayDrips"," shapes that edge:",[876,877,879],"preview",{":controls":878},"false",[198,880],{"set":869},[244,882,884],{"className":390,"code":883,"language":340,"meta":249,"style":249},"\u003CGoopDialogContent overlay>...\u003C\u002FGoopDialogContent>\n\u003CGoopDialogContent overlay :overlay-drips=\"false\">...\u003C\u002FGoopDialogContent>  \u003C!-- a straight edge -->\n",[209,885,886,902],{"__ignoreMap":249},[253,887,888,890,892,895,898,900],{"class":255,"line":256},[253,889,398],{"class":290},[253,891,590],{"class":401},[253,893,894],{"class":259}," overlay",[253,896,897],{"class":290},">...\u003C\u002F",[253,899,590],{"class":401},[253,901,417],{"class":290},[253,903,904,906,908,910,913,916,918,921,924,926,928,930,933],{"class":255,"line":294},[253,905,398],{"class":290},[253,907,590],{"class":401},[253,909,894],{"class":259},[253,911,912],{"class":290}," :",[253,914,915],{"class":259},"overlay-drips",[253,917,411],{"class":290},[253,919,920],{"class":263},"\"",[253,922,878],{"class":923},"sj4cs",[253,925,920],{"class":263},[253,927,897],{"class":290},[253,929,590],{"class":401},[253,931,932],{"class":290},">  ",[253,934,935],{"class":422},"\u003C!-- a straight edge -->\n",[206,937,938,939,942,943,946,947,337],{},"The overlay's color and dim come from ",[209,940,941],{},"--goop-backdrop-color"," (default black) and ",[209,944,945],{},"--goop-backdrop-opacity"," (default ",[209,948,949],{},"0.5",[235,951,953],{"id":952},"surface-color","Surface color",[206,955,956,957,960,961,964],{},"By default the panel uses the content's own shadcn background (",[209,958,959],{},"'popover'","), so it looks like a normal shadcn dialog. ",[209,962,963],{},"'trigger'"," takes the trigger's background and text color, and any CSS color works too:",[876,966,967],{":controls":878},[198,968],{"set":969},"surface",[244,971,973],{"className":390,"code":972,"language":340,"meta":249,"style":249},"\u003CGoopDialogContent>...\u003C\u002FGoopDialogContent>                          \u003C!-- 'popover' (default) -->\n\u003CGoopDialogContent surface=\"trigger\">...\u003C\u002FGoopDialogContent>\n\u003CGoopDialogContent surface=\"oklch(0.62 0.19 150)\">...\u003C\u002FGoopDialogContent>\n",[209,974,975,991,1011],{"__ignoreMap":249},[253,976,977,979,981,983,985,988],{"class":255,"line":256},[253,978,398],{"class":290},[253,980,590],{"class":401},[253,982,897],{"class":290},[253,984,590],{"class":401},[253,986,987],{"class":290},">                          ",[253,989,990],{"class":422},"\u003C!-- 'popover' (default) -->\n",[253,992,993,995,997,1000,1002,1005,1007,1009],{"class":255,"line":294},[253,994,398],{"class":290},[253,996,590],{"class":401},[253,998,999],{"class":259}," surface",[253,1001,411],{"class":290},[253,1003,1004],{"class":263},"\"trigger\"",[253,1006,897],{"class":290},[253,1008,590],{"class":401},[253,1010,417],{"class":290},[253,1012,1013,1015,1017,1019,1021,1024,1026,1028],{"class":255,"line":306},[253,1014,398],{"class":290},[253,1016,590],{"class":401},[253,1018,999],{"class":259},[253,1020,411],{"class":290},[253,1022,1023],{"class":263},"\"oklch(0.62 0.19 150)\"",[253,1025,897],{"class":290},[253,1027,590],{"class":401},[253,1029,417],{"class":290},[235,1031,1033],{"id":1032},"splash-knobs","Splash knobs",[206,1035,1036,1039,1040,1042],{},[209,1037,1038],{},"bloomStart=\"merge\""," starts the bloom from a few drops that fuse instead of one. Four numeric props shape the splash. They only matter while ",[209,1041,828],{}," is on:",[807,1044,1045,1051,1057,1063],{},[810,1046,1047,1050],{},[209,1048,1049],{},"openDripAmount"," (0 to 3): how many drops.",[810,1052,1053,1056],{},[209,1054,1055],{},"openDripSize"," (0.3 to 2.5): how big.",[810,1058,1059,1062],{},[209,1060,1061],{},"openDripFling"," (0 to 3): how far they fly.",[810,1064,1065,1068],{},[209,1066,1067],{},"openDripVariety"," (0 to 1): the mix of big globs and specks. 0 makes them all alike.",[206,1070,1071,1074],{},[209,1072,1073],{},"sloshVariety"," (0 to 1) sets how differently each side bulges on open and close. 0 is an even, centred bulge.",[876,1076,1077],{":controls":878},[198,1078],{"set":1079},"splash",[244,1081,1083],{"className":390,"code":1082,"language":340,"meta":249,"style":249},"\u003CGoopDialogContent bloom-start=\"merge\" :open-drip-amount=\"2\" :open-drip-size=\"1.4\">\n  ...\n\u003C\u002FGoopDialogContent>\n\n\u003CGoopDialogContent :open-drips=\"false\">...\u003C\u002FGoopDialogContent>\n",[209,1084,1085,1129,1134,1142,1146],{"__ignoreMap":249},[253,1086,1087,1089,1091,1094,1096,1099,1101,1104,1106,1108,1111,1113,1115,1118,1120,1122,1125,1127],{"class":255,"line":256},[253,1088,398],{"class":290},[253,1090,590],{"class":401},[253,1092,1093],{"class":259}," bloom-start",[253,1095,411],{"class":290},[253,1097,1098],{"class":263},"\"merge\"",[253,1100,912],{"class":290},[253,1102,1103],{"class":259},"open-drip-amount",[253,1105,411],{"class":290},[253,1107,920],{"class":263},[253,1109,1110],{"class":923},"2",[253,1112,920],{"class":263},[253,1114,912],{"class":290},[253,1116,1117],{"class":259},"open-drip-size",[253,1119,411],{"class":290},[253,1121,920],{"class":263},[253,1123,1124],{"class":923},"1.4",[253,1126,920],{"class":263},[253,1128,417],{"class":290},[253,1130,1131],{"class":255,"line":294},[253,1132,1133],{"class":290},"  ...\n",[253,1135,1136,1138,1140],{"class":255,"line":306},[253,1137,503],{"class":290},[253,1139,590],{"class":401},[253,1141,417],{"class":290},[253,1143,1144],{"class":255,"line":434},[253,1145,514],{"emptyLinePlaceholder":513},[253,1147,1148,1150,1152,1154,1157,1159,1161,1163,1165,1167,1169],{"class":255,"line":440},[253,1149,398],{"class":290},[253,1151,590],{"class":401},[253,1153,912],{"class":290},[253,1155,1156],{"class":259},"open-drips",[253,1158,411],{"class":290},[253,1160,920],{"class":263},[253,1162,878],{"class":923},[253,1164,920],{"class":263},[253,1166,897],{"class":290},[253,1168,590],{"class":401},[253,1170,417],{"class":290},[206,1172,1173,324,1175,795,1177,1179,1180,324,1183,1185],{},[209,1174,825],{},[209,1176,828],{},[209,1178,837],{}," take ",[209,1181,1182],{},"true",[209,1184,878],{},", or a strength from 0 to 2.",[235,1187,1189],{"id":1188},"plain-shadcn","Plain shadcn",[206,1191,1192,1195,1196,1199],{},[209,1193,1194],{},":goo=\"false\""," renders exactly shadcn's ",[209,1197,1198],{},"DialogContent"," and overlay, with their own enter and exit animation:",[244,1201,1203],{"className":390,"code":1202,"language":340,"meta":249,"style":249},"\u003CGoopDialogContent :goo=\"false\">...\u003C\u002FGoopDialogContent>\n",[209,1204,1205],{"__ignoreMap":249},[253,1206,1207,1209,1211,1213,1216,1218,1220,1222,1224,1226,1228],{"class":255,"line":256},[253,1208,398],{"class":290},[253,1210,590],{"class":401},[253,1212,912],{"class":290},[253,1214,1215],{"class":259},"goo",[253,1217,411],{"class":290},[253,1219,920],{"class":263},[253,1221,878],{"class":923},[253,1223,920],{"class":263},[253,1225,897],{"class":290},[253,1227,590],{"class":401},[253,1229,417],{"class":290},[235,1231,1233],{"id":1232},"driving-it-from-code","Driving it from code",[206,1235,1236,1238,1239,1242,1243,1246,1247,1249],{},[209,1237,590],{}," exposes its engine handle as ",[209,1240,1241],{},"handle"," (",[209,1244,1245],{},"null"," before it mounts, or when ",[209,1248,1215],{}," is off). The panel only exists while open.",[235,1251,1253],{"id":1252},"props","Props",[206,1255,1256,1257,1259,1260,1262,1263,324,1266,946,1269,1271],{},"The root, trigger, close, header, footer, title, and description take shadcn-vue's props. ",[209,1258,590],{}," takes reka-ui's ",[209,1261,1198],{}," props, ",[209,1264,1265],{},"class",[209,1267,1268],{},"showCloseButton",[209,1270,1182],{},", the corner X), and these goo props:",[1273,1274],"component-props",{"name":196},[206,1276,1277,1279,1280,1262,1283,795,1285,946,1287,1289,1290,324,1293,324,1296,795,1299,220],{},[209,1278,786],{}," is only needed in a custom portal. It takes reka-ui's ",[209,1281,1282],{},"DialogOverlay",[209,1284,1265],{},[209,1286,1215],{},[209,1288,878],{},": shadcn's fade), ",[209,1291,1292],{},"drips",[209,1294,1295],{},"speed",[209,1297,1298],{},"preset",[209,1300,1301],{},"renderer",[235,1303,1305],{"id":1304},"accessibility","Accessibility",[206,1307,1308,1309,1311,1312,220],{},"Focus trapping, Escape and outside-click dismissal, scroll locking, and ARIA attributes come from reka-ui. The goo surface is ",[209,1310,846],{}," and can't be clicked, and your content is never filtered. Under reduced motion the dialog opens and closes plainly: the panel keeps its goo shape and color, but the bloom, slosh, splash, and wobble are all turned off, and the goo overlay appears without pouring. See ",[227,1313,23],{"href":24},[1315,1316,1317],"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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":249,"searchDepth":306,"depth":306,"links":1319},[1320,1324,1325,1326,1327,1328,1329,1330,1331,1332],{"id":237,"depth":294,"text":15,"children":1321},[1322,1323],{"id":241,"depth":306,"text":242},{"id":340,"depth":306,"text":341},{"id":386,"depth":294,"text":387},{"id":804,"depth":294,"text":805},{"id":862,"depth":294,"text":863},{"id":952,"depth":294,"text":953},{"id":1032,"depth":294,"text":1033},{"id":1188,"depth":294,"text":1189},{"id":1232,"depth":294,"text":1233},{"id":1252,"depth":294,"text":1253},{"id":1304,"depth":294,"text":1305},"shadcn's Dialog with goo. The panel blooms out of its own center, overshoots every side, and splashes.","md",{},{"title":98,"description":1333},"v5S2UAGyg395g0BDoWspA2M6EWMOWPN2RIg5pwHl5Bg",[1339,1341],{"title":94,"path":95,"stem":96,"description":1340,"children":-1},"shadcn's Accordion and Collapsible with goo. The open row floods with goo from where you clicked, and the content springs open.",{"title":102,"path":103,"stem":104,"description":1342,"children":-1},"shadcn's AlertDialog with goo. It blooms like the Dialog, but lighter, because an alert is the serious one.",1793670386828]