[{"data":1,"prerenderedAt":1111},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Falert-dialog":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Falert-dialog":1106},[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":102,"badge":48,"body":189,"description":1101,"extension":1102,"meta":1103,"navigation":502,"path":103,"seo":1104,"status":13,"stem":104,"__hash__":1105},"docs\u002Fdocs\u002F2.components\u002F17.alert-dialog.md",{"type":190,"value":191,"toc":1089},"minimark",[192,201,221,234,238,243,268,310,321,325,339,367,371,710,739,759,763,769,831,834,841,971,975,990,994,1004,1033,1049,1053,1066,1069,1073,1085],[193,194,197],"playground",{"caption":195,"name":196},"Open it. Cancel gets the focus, and an outside click won't close it: it waits for an answer.","alert-dialog",[198,199],"demo-alert-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. Alert 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],{},"GoopAlertDialog",".",[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\u002Falert-dialog",[231],"nofollow","reka-ui AlertDialog"," primitive as shadcn-vue's AlertDialog, with the same API. It interrupts the user and waits for a response. 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],{},"The module auto-imports every ",[209,314,315],{},"GoopAlertDialog*"," part, adds ",[209,318,319],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens.",[239,322,324],{"id":323},"vue","Vue",[244,326,328],{"className":246,"code":327,"language":248,"meta":249,"style":249},"pnpm add @goopui\u002Fvue\n",[209,329,330],{"__ignoreMap":249},[253,331,332,334,336],{"class":255,"line":256},[253,333,260],{"class":259},[253,335,264],{"class":263},[253,337,338],{"class":263}," @goopui\u002Fvue\n",[244,340,345],{"className":341,"code":342,"filename":343,"language":344,"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,346,347,358],{"__ignoreMap":249},[253,348,349,352,355],{"class":255,"line":256},[253,350,351],{"class":280},"@import",[253,353,354],{"class":263}," \"tailwindcss\"",[253,356,357],{"class":290},";\n",[253,359,360,362,365],{"class":255,"line":294},[253,361,351],{"class":280},[253,363,364],{"class":263}," \"@goopui\u002Fvue\u002Fgoop.css\"",[253,366,357],{"class":290},[235,368,370],{"id":369},"usage","Usage",[244,372,375],{"className":373,"code":374,"language":323,"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  GoopAlertDialog,\n  GoopAlertDialogAction,\n  GoopAlertDialogCancel,\n  GoopAlertDialogContent,\n  GoopAlertDialogDescription,\n  GoopAlertDialogFooter,\n  GoopAlertDialogHeader,\n  GoopAlertDialogTitle,\n  GoopAlertDialogTrigger,\n  GoopButton,\n} from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopAlertDialog>\n    \u003CGoopAlertDialogTrigger as-child>\n      \u003CGoopButton variant=\"outline\">Delete account\u003C\u002FGoopButton>\n    \u003C\u002FGoopAlertDialogTrigger>\n    \u003CGoopAlertDialogContent>\n      \u003CGoopAlertDialogHeader>\n        \u003CGoopAlertDialogTitle>Are you absolutely sure?\u003C\u002FGoopAlertDialogTitle>\n        \u003CGoopAlertDialogDescription>This action cannot be undone.\u003C\u002FGoopAlertDialogDescription>\n      \u003C\u002FGoopAlertDialogHeader>\n      \u003CGoopAlertDialogFooter>\n        \u003CGoopAlertDialogCancel>Cancel\u003C\u002FGoopAlertDialogCancel>\n        \u003CGoopAlertDialogAction>Continue\u003C\u002FGoopAlertDialogAction>\n      \u003C\u002FGoopAlertDialogFooter>\n    \u003C\u002FGoopAlertDialogContent>\n  \u003C\u002FGoopAlertDialog>\n\u003C\u002Ftemplate>\n",[209,376,377,401,407,415,421,427,433,439,445,451,457,463,469,475,487,497,504,514,524,538,562,572,582,592,608,623,633,643,658,673,682,691,701],{"__ignoreMap":249},[253,378,379,382,386,389,392,395,398],{"class":255,"line":256},[253,380,381],{"class":290},"\u003C",[253,383,385],{"class":384},"s9eBZ","script",[253,387,388],{"class":259}," setup",[253,390,391],{"class":259}," lang",[253,393,394],{"class":290},"=",[253,396,397],{"class":263},"\"ts\"",[253,399,400],{"class":290},">\n",[253,402,403],{"class":255,"line":294},[253,404,406],{"class":405},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[253,408,409,412],{"class":255,"line":306},[253,410,411],{"class":280},"import",[253,413,414],{"class":290}," {\n",[253,416,418],{"class":255,"line":417},4,[253,419,420],{"class":290},"  GoopAlertDialog,\n",[253,422,424],{"class":255,"line":423},5,[253,425,426],{"class":290},"  GoopAlertDialogAction,\n",[253,428,430],{"class":255,"line":429},6,[253,431,432],{"class":290},"  GoopAlertDialogCancel,\n",[253,434,436],{"class":255,"line":435},7,[253,437,438],{"class":290},"  GoopAlertDialogContent,\n",[253,440,442],{"class":255,"line":441},8,[253,443,444],{"class":290},"  GoopAlertDialogDescription,\n",[253,446,448],{"class":255,"line":447},9,[253,449,450],{"class":290},"  GoopAlertDialogFooter,\n",[253,452,454],{"class":255,"line":453},10,[253,455,456],{"class":290},"  GoopAlertDialogHeader,\n",[253,458,460],{"class":255,"line":459},11,[253,461,462],{"class":290},"  GoopAlertDialogTitle,\n",[253,464,466],{"class":255,"line":465},12,[253,467,468],{"class":290},"  GoopAlertDialogTrigger,\n",[253,470,472],{"class":255,"line":471},13,[253,473,474],{"class":290},"  GoopButton,\n",[253,476,478,481,484],{"class":255,"line":477},14,[253,479,480],{"class":290},"} ",[253,482,483],{"class":280},"from",[253,485,486],{"class":263}," '@goopui\u002Fvue'\n",[253,488,490,493,495],{"class":255,"line":489},15,[253,491,492],{"class":290},"\u003C\u002F",[253,494,385],{"class":384},[253,496,400],{"class":290},[253,498,500],{"class":255,"line":499},16,[253,501,503],{"emptyLinePlaceholder":502},true,"\n",[253,505,507,509,512],{"class":255,"line":506},17,[253,508,381],{"class":290},[253,510,511],{"class":384},"template",[253,513,400],{"class":290},[253,515,517,520,522],{"class":255,"line":516},18,[253,518,519],{"class":290},"  \u003C",[253,521,219],{"class":384},[253,523,400],{"class":290},[253,525,527,530,533,536],{"class":255,"line":526},19,[253,528,529],{"class":290},"    \u003C",[253,531,532],{"class":384},"GoopAlertDialogTrigger",[253,534,535],{"class":259}," as-child",[253,537,400],{"class":290},[253,539,541,544,547,550,552,555,558,560],{"class":255,"line":540},20,[253,542,543],{"class":290},"      \u003C",[253,545,546],{"class":384},"GoopButton",[253,548,549],{"class":259}," variant",[253,551,394],{"class":290},[253,553,554],{"class":263},"\"outline\"",[253,556,557],{"class":290},">Delete account\u003C\u002F",[253,559,546],{"class":384},[253,561,400],{"class":290},[253,563,565,568,570],{"class":255,"line":564},21,[253,566,567],{"class":290},"    \u003C\u002F",[253,569,532],{"class":384},[253,571,400],{"class":290},[253,573,575,577,580],{"class":255,"line":574},22,[253,576,529],{"class":290},[253,578,579],{"class":384},"GoopAlertDialogContent",[253,581,400],{"class":290},[253,583,585,587,590],{"class":255,"line":584},23,[253,586,543],{"class":290},[253,588,589],{"class":384},"GoopAlertDialogHeader",[253,591,400],{"class":290},[253,593,595,598,601,604,606],{"class":255,"line":594},24,[253,596,597],{"class":290},"        \u003C",[253,599,600],{"class":384},"GoopAlertDialogTitle",[253,602,603],{"class":290},">Are you absolutely sure?\u003C\u002F",[253,605,600],{"class":384},[253,607,400],{"class":290},[253,609,611,613,616,619,621],{"class":255,"line":610},25,[253,612,597],{"class":290},[253,614,615],{"class":384},"GoopAlertDialogDescription",[253,617,618],{"class":290},">This action cannot be undone.\u003C\u002F",[253,620,615],{"class":384},[253,622,400],{"class":290},[253,624,626,629,631],{"class":255,"line":625},26,[253,627,628],{"class":290},"      \u003C\u002F",[253,630,589],{"class":384},[253,632,400],{"class":290},[253,634,636,638,641],{"class":255,"line":635},27,[253,637,543],{"class":290},[253,639,640],{"class":384},"GoopAlertDialogFooter",[253,642,400],{"class":290},[253,644,646,648,651,654,656],{"class":255,"line":645},28,[253,647,597],{"class":290},[253,649,650],{"class":384},"GoopAlertDialogCancel",[253,652,653],{"class":290},">Cancel\u003C\u002F",[253,655,650],{"class":384},[253,657,400],{"class":290},[253,659,661,663,666,669,671],{"class":255,"line":660},29,[253,662,597],{"class":290},[253,664,665],{"class":384},"GoopAlertDialogAction",[253,667,668],{"class":290},">Continue\u003C\u002F",[253,670,665],{"class":384},[253,672,400],{"class":290},[253,674,676,678,680],{"class":255,"line":675},30,[253,677,628],{"class":290},[253,679,640],{"class":384},[253,681,400],{"class":290},[253,683,685,687,689],{"class":255,"line":684},31,[253,686,567],{"class":290},[253,688,579],{"class":384},[253,690,400],{"class":290},[253,692,694,697,699],{"class":255,"line":693},32,[253,695,696],{"class":290},"  \u003C\u002F",[253,698,219],{"class":384},[253,700,400],{"class":290},[253,702,704,706,708],{"class":255,"line":703},33,[253,705,492],{"class":290},[253,707,511],{"class":384},[253,709,400],{"class":290},[206,711,712,713,715,716,715,718,715,720,715,723,715,725,715,727,715,729,715,731,733,734,736,737,220],{},"The parts are ",[209,714,219],{},", ",[209,717,532],{},[209,719,579],{},[209,721,722],{},"GoopAlertDialogOverlay",[209,724,589],{},[209,726,640],{},[209,728,600],{},[209,730,615],{},[209,732,665],{},", and ",[209,735,650],{},". All the panel's goo lives on ",[209,738,579],{},[206,740,741,212,743,745,746,748,749,715,752,733,755,758],{},[209,742,665],{},[209,744,650],{}," render as a ",[209,747,546],{}," (default and outline variants), so they drip too. ",[209,750,751],{},"variant",[209,753,754],{},"size",[209,756,757],{},"goo"," pass through to the button.",[235,760,762],{"id":761},"behavior","Behavior",[206,764,765,766,768],{},"The panel blooms from its own center, exactly like the ",[227,767,98],{"href":99},"'s, with every toggle and knob the Dialog has. Only the defaults differ:",[770,771,772,798,821],"ul",{},[773,774,775,779,780,783,784,212,787,783,790,793,794,797],"li",{},[776,777,778],"strong",{},"A lighter slosh."," ",[209,781,782],{},"openSlosh"," is ",[209,785,786],{},"0.6",[209,788,789],{},"closeSlosh",[209,791,792],{},"0.7"," when you leave them alone (or pass ",[209,795,796],{},"true",").",[773,799,800,803,804,779,807,715,810,779,813,715,816,779,819,220],{},[776,801,802],{},"A smaller splash."," A few small drops, flung a short way: ",[209,805,806],{},"openDripAmount",[209,808,809],{},"0.35",[209,811,812],{},"openDripSize",[209,814,815],{},"0.75",[209,817,818],{},"openDripFling",[209,820,786],{},[773,822,823,826,827,830],{},[776,824,825],{},"Content stays sharp."," The goo is drawn on an ",[209,828,829],{},"aria-hidden"," surface behind your content.",[206,832,833],{},"Turn any of it up, or off:",[835,836,838],"preview",{":controls":837},"false",[198,839],{"set":840},"louder",[244,842,844],{"className":373,"code":843,"language":323,"meta":249,"style":249},"\u003CGoopAlertDialogContent>...\u003C\u002FGoopAlertDialogContent>   \u003C!-- light defaults -->\n\n\u003CGoopAlertDialogContent\n  :open-slosh=\"1\" :close-slosh=\"1\"\n  :open-drip-amount=\"1\" :open-drip-size=\"1\" :open-drip-fling=\"1\"\n  overlay\n>\n  ...\n\u003C\u002FGoopAlertDialogContent>\n",[209,845,846,863,867,874,908,949,954,958,963],{"__ignoreMap":249},[253,847,848,850,852,855,857,860],{"class":255,"line":256},[253,849,381],{"class":290},[253,851,579],{"class":384},[253,853,854],{"class":290},">...\u003C\u002F",[253,856,579],{"class":384},[253,858,859],{"class":290},">   ",[253,861,862],{"class":405},"\u003C!-- light defaults -->\n",[253,864,865],{"class":255,"line":294},[253,866,503],{"emptyLinePlaceholder":502},[253,868,869,871],{"class":255,"line":306},[253,870,381],{"class":290},[253,872,873],{"class":384},"GoopAlertDialogContent\n",[253,875,876,879,882,884,887,891,893,896,899,901,903,905],{"class":255,"line":417},[253,877,878],{"class":290},"  :",[253,880,881],{"class":259},"open-slosh",[253,883,394],{"class":290},[253,885,886],{"class":263},"\"",[253,888,890],{"class":889},"sj4cs","1",[253,892,886],{"class":263},[253,894,895],{"class":290}," :",[253,897,898],{"class":259},"close-slosh",[253,900,394],{"class":290},[253,902,886],{"class":263},[253,904,890],{"class":889},[253,906,907],{"class":263},"\"\n",[253,909,910,912,915,917,919,921,923,925,928,930,932,934,936,938,941,943,945,947],{"class":255,"line":423},[253,911,878],{"class":290},[253,913,914],{"class":259},"open-drip-amount",[253,916,394],{"class":290},[253,918,886],{"class":263},[253,920,890],{"class":889},[253,922,886],{"class":263},[253,924,895],{"class":290},[253,926,927],{"class":259},"open-drip-size",[253,929,394],{"class":290},[253,931,886],{"class":263},[253,933,890],{"class":889},[253,935,886],{"class":263},[253,937,895],{"class":290},[253,939,940],{"class":259},"open-drip-fling",[253,942,394],{"class":290},[253,944,886],{"class":263},[253,946,890],{"class":889},[253,948,907],{"class":263},[253,950,951],{"class":255,"line":429},[253,952,953],{"class":259},"  overlay\n",[253,955,956],{"class":255,"line":435},[253,957,400],{"class":290},[253,959,960],{"class":255,"line":441},[253,961,962],{"class":290},"  ...\n",[253,964,965,967,969],{"class":255,"line":447},[253,966,492],{"class":290},[253,968,579],{"class":384},[253,970,400],{"class":290},[235,972,974],{"id":973},"goo-overlay","Goo overlay",[206,976,977,978,981,982,985,986,220],{},"Like the Dialog's, the goo overlay is opt-in: set ",[209,979,980],{},"overlay"," and the backdrop pours down over the page and drains off on close. ",[209,983,984],{},"overlayDrips"," shapes its leading edge. See ",[227,987,989],{"href":988},"\u002Fdocs\u002Fcomponents\u002Fdialog#goo-overlay","Dialog: Goo overlay",[235,991,993],{"id":992},"plain-shadcn","Plain shadcn",[206,995,996,999,1000,1003],{},[209,997,998],{},":goo=\"false\""," renders exactly shadcn's ",[209,1001,1002],{},"AlertDialogContent"," and overlay:",[244,1005,1007],{"className":373,"code":1006,"language":323,"meta":249,"style":249},"\u003CGoopAlertDialogContent :goo=\"false\">...\u003C\u002FGoopAlertDialogContent>\n",[209,1008,1009],{"__ignoreMap":249},[253,1010,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031],{"class":255,"line":256},[253,1012,381],{"class":290},[253,1014,579],{"class":384},[253,1016,895],{"class":290},[253,1018,757],{"class":259},[253,1020,394],{"class":290},[253,1022,886],{"class":263},[253,1024,837],{"class":889},[253,1026,886],{"class":263},[253,1028,854],{"class":290},[253,1030,579],{"class":384},[253,1032,400],{"class":290},[206,1034,1035,1037,1038,1041,1042,1045,1046,1048],{},[209,1036,579],{}," exposes its engine handle as ",[209,1039,1040],{},"handle"," (",[209,1043,1044],{},"null"," before it mounts, or when ",[209,1047,757],{}," is off).",[235,1050,1052],{"id":1051},"props","Props",[206,1054,1055,1056,1058,1059,1061,1062,1065],{},"The root, trigger, header, footer, title, and description take shadcn-vue's props. ",[209,1057,579],{}," takes reka-ui's ",[209,1060,1002],{}," props, ",[209,1063,1064],{},"class",", and these goo props. The defaults shown are the alert dialog's:",[1067,1068],"component-props",{"name":196},[235,1070,1072],{"id":1071},"accessibility","Accessibility",[206,1074,1075,1076,1079,1080,1082,1083,220],{},"Focus trapping (Cancel gets the initial focus), scroll locking, and the ",[209,1077,1078],{},"alertdialog"," role come from reka-ui. The goo surface is ",[209,1081,829],{}," and can't be clicked, and your content is never filtered. Under reduced motion it 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,1084,23],{"href":24},[1086,1087,1088],"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":1090},[1091,1095,1096,1097,1098,1099,1100],{"id":237,"depth":294,"text":15,"children":1092},[1093,1094],{"id":241,"depth":306,"text":242},{"id":323,"depth":306,"text":324},{"id":369,"depth":294,"text":370},{"id":761,"depth":294,"text":762},{"id":973,"depth":294,"text":974},{"id":992,"depth":294,"text":993},{"id":1051,"depth":294,"text":1052},{"id":1071,"depth":294,"text":1072},"shadcn's AlertDialog with goo. It blooms like the Dialog, but lighter, because an alert is the serious one.","md",{},{"title":102,"description":1101},"k8c8dpWQyP3zz-vj4EgiXHYQM7qMeotVFdte_453cJQ",[1107,1109],{"title":98,"path":99,"stem":100,"description":1108,"children":-1},"shadcn's Dialog with goo. The panel blooms out of its own center, overshoots every side, and splashes.",{"title":106,"path":107,"stem":108,"description":1110,"children":-1},"shadcn's Sheet with goo. The panel blooms out of its screen edge, wobbles, and splashes.",1793670386939]