[{"data":1,"prerenderedAt":1165},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fsheet":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fsheet":1160},[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":106,"badge":48,"body":189,"description":1155,"extension":1156,"meta":1157,"navigation":507,"path":107,"seo":1158,"status":13,"stem":108,"__hash__":1159},"docs\u002Fdocs\u002F2.components\u002F18.sheet.md",{"type":190,"value":191,"toc":1141},"minimark",[192,201,221,234,238,243,268,310,332,336,350,378,382,722,746,750,803,807,813,819,864,868,881,907,913,918,1025,1040,1044,1054,1084,1088,1104,1108,1122,1125,1129,1137],[193,194,197],"playground",{"caption":195,"name":196},"Open it, then close it. The goo pools at the edge and spreads to fill the sheet.","sheet",[198,199],"demo-sheet",{"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. Sheet is new and experimental: its props may still change. The sheets on this page are the real ",[209,218,219],{},"GoopSheet",".",[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 Sheet, 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,331],{},"The module auto-imports every ",[209,314,315],{},"GoopSheet*"," 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],{},"--ring",").",[239,333,335],{"id":334},"vue","Vue",[244,337,339],{"className":246,"code":338,"language":248,"meta":249,"style":249},"pnpm add @goopui\u002Fvue\n",[209,340,341],{"__ignoreMap":249},[253,342,343,345,347],{"class":255,"line":256},[253,344,260],{"class":259},[253,346,264],{"class":263},[253,348,349],{"class":263}," @goopui\u002Fvue\n",[244,351,356],{"className":352,"code":353,"filename":354,"language":355,"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,357,358,369],{"__ignoreMap":249},[253,359,360,363,366],{"class":255,"line":256},[253,361,362],{"class":280},"@import",[253,364,365],{"class":263}," \"tailwindcss\"",[253,367,368],{"class":290},";\n",[253,370,371,373,376],{"class":255,"line":294},[253,372,362],{"class":280},[253,374,375],{"class":263}," \"@goopui\u002Fvue\u002Fgoop.css\"",[253,377,368],{"class":290},[235,379,381],{"id":380},"usage","Usage",[244,383,386],{"className":384,"code":385,"language":334,"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  GoopSheet,\n  GoopSheetClose,\n  GoopSheetContent,\n  GoopSheetDescription,\n  GoopSheetFooter,\n  GoopSheetHeader,\n  GoopSheetTitle,\n  GoopSheetTrigger,\n} from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopSheet>\n    \u003CGoopSheetTrigger as-child>\n      \u003CGoopButton variant=\"outline\">Open sheet\u003C\u002FGoopButton>\n    \u003C\u002FGoopSheetTrigger>\n    \u003CGoopSheetContent>\n      \u003CGoopSheetHeader>\n        \u003CGoopSheetTitle>Edit profile\u003C\u002FGoopSheetTitle>\n        \u003CGoopSheetDescription>Make changes to your profile here.\u003C\u002FGoopSheetDescription>\n      \u003C\u002FGoopSheetHeader>\n      \u003CGoopSheetFooter>\n        \u003CGoopSheetClose as-child>\n          \u003CGoopButton>Save changes\u003C\u002FGoopButton>\n        \u003C\u002FGoopSheetClose>\n      \u003C\u002FGoopSheetFooter>\n    \u003C\u002FGoopSheetContent>\n  \u003C\u002FGoopSheet>\n\u003C\u002Ftemplate>\n",[209,387,388,412,418,426,432,438,444,450,456,462,468,474,480,492,502,509,519,529,543,567,577,587,597,613,628,638,648,660,675,685,694,703,713],{"__ignoreMap":249},[253,389,390,393,397,400,403,406,409],{"class":255,"line":256},[253,391,392],{"class":290},"\u003C",[253,394,396],{"class":395},"s9eBZ","script",[253,398,399],{"class":259}," setup",[253,401,402],{"class":259}," lang",[253,404,405],{"class":290},"=",[253,407,408],{"class":263},"\"ts\"",[253,410,411],{"class":290},">\n",[253,413,414],{"class":255,"line":294},[253,415,417],{"class":416},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[253,419,420,423],{"class":255,"line":306},[253,421,422],{"class":280},"import",[253,424,425],{"class":290}," {\n",[253,427,429],{"class":255,"line":428},4,[253,430,431],{"class":290},"  GoopButton,\n",[253,433,435],{"class":255,"line":434},5,[253,436,437],{"class":290},"  GoopSheet,\n",[253,439,441],{"class":255,"line":440},6,[253,442,443],{"class":290},"  GoopSheetClose,\n",[253,445,447],{"class":255,"line":446},7,[253,448,449],{"class":290},"  GoopSheetContent,\n",[253,451,453],{"class":255,"line":452},8,[253,454,455],{"class":290},"  GoopSheetDescription,\n",[253,457,459],{"class":255,"line":458},9,[253,460,461],{"class":290},"  GoopSheetFooter,\n",[253,463,465],{"class":255,"line":464},10,[253,466,467],{"class":290},"  GoopSheetHeader,\n",[253,469,471],{"class":255,"line":470},11,[253,472,473],{"class":290},"  GoopSheetTitle,\n",[253,475,477],{"class":255,"line":476},12,[253,478,479],{"class":290},"  GoopSheetTrigger,\n",[253,481,483,486,489],{"class":255,"line":482},13,[253,484,485],{"class":290},"} ",[253,487,488],{"class":280},"from",[253,490,491],{"class":263}," '@goopui\u002Fvue'\n",[253,493,495,498,500],{"class":255,"line":494},14,[253,496,497],{"class":290},"\u003C\u002F",[253,499,396],{"class":395},[253,501,411],{"class":290},[253,503,505],{"class":255,"line":504},15,[253,506,508],{"emptyLinePlaceholder":507},true,"\n",[253,510,512,514,517],{"class":255,"line":511},16,[253,513,392],{"class":290},[253,515,516],{"class":395},"template",[253,518,411],{"class":290},[253,520,522,525,527],{"class":255,"line":521},17,[253,523,524],{"class":290},"  \u003C",[253,526,219],{"class":395},[253,528,411],{"class":290},[253,530,532,535,538,541],{"class":255,"line":531},18,[253,533,534],{"class":290},"    \u003C",[253,536,537],{"class":395},"GoopSheetTrigger",[253,539,540],{"class":259}," as-child",[253,542,411],{"class":290},[253,544,546,549,552,555,557,560,563,565],{"class":255,"line":545},19,[253,547,548],{"class":290},"      \u003C",[253,550,551],{"class":395},"GoopButton",[253,553,554],{"class":259}," variant",[253,556,405],{"class":290},[253,558,559],{"class":263},"\"outline\"",[253,561,562],{"class":290},">Open sheet\u003C\u002F",[253,564,551],{"class":395},[253,566,411],{"class":290},[253,568,570,573,575],{"class":255,"line":569},20,[253,571,572],{"class":290},"    \u003C\u002F",[253,574,537],{"class":395},[253,576,411],{"class":290},[253,578,580,582,585],{"class":255,"line":579},21,[253,581,534],{"class":290},[253,583,584],{"class":395},"GoopSheetContent",[253,586,411],{"class":290},[253,588,590,592,595],{"class":255,"line":589},22,[253,591,548],{"class":290},[253,593,594],{"class":395},"GoopSheetHeader",[253,596,411],{"class":290},[253,598,600,603,606,609,611],{"class":255,"line":599},23,[253,601,602],{"class":290},"        \u003C",[253,604,605],{"class":395},"GoopSheetTitle",[253,607,608],{"class":290},">Edit profile\u003C\u002F",[253,610,605],{"class":395},[253,612,411],{"class":290},[253,614,616,618,621,624,626],{"class":255,"line":615},24,[253,617,602],{"class":290},[253,619,620],{"class":395},"GoopSheetDescription",[253,622,623],{"class":290},">Make changes to your profile here.\u003C\u002F",[253,625,620],{"class":395},[253,627,411],{"class":290},[253,629,631,634,636],{"class":255,"line":630},25,[253,632,633],{"class":290},"      \u003C\u002F",[253,635,594],{"class":395},[253,637,411],{"class":290},[253,639,641,643,646],{"class":255,"line":640},26,[253,642,548],{"class":290},[253,644,645],{"class":395},"GoopSheetFooter",[253,647,411],{"class":290},[253,649,651,653,656,658],{"class":255,"line":650},27,[253,652,602],{"class":290},[253,654,655],{"class":395},"GoopSheetClose",[253,657,540],{"class":259},[253,659,411],{"class":290},[253,661,663,666,668,671,673],{"class":255,"line":662},28,[253,664,665],{"class":290},"          \u003C",[253,667,551],{"class":395},[253,669,670],{"class":290},">Save changes\u003C\u002F",[253,672,551],{"class":395},[253,674,411],{"class":290},[253,676,678,681,683],{"class":255,"line":677},29,[253,679,680],{"class":290},"        \u003C\u002F",[253,682,655],{"class":395},[253,684,411],{"class":290},[253,686,688,690,692],{"class":255,"line":687},30,[253,689,633],{"class":290},[253,691,645],{"class":395},[253,693,411],{"class":290},[253,695,697,699,701],{"class":255,"line":696},31,[253,698,572],{"class":290},[253,700,584],{"class":395},[253,702,411],{"class":290},[253,704,706,709,711],{"class":255,"line":705},32,[253,707,708],{"class":290},"  \u003C\u002F",[253,710,219],{"class":395},[253,712,411],{"class":290},[253,714,716,718,720],{"class":255,"line":715},33,[253,717,497],{"class":290},[253,719,516],{"class":395},[253,721,411],{"class":290},[206,723,724,725,324,727,324,729,324,731,324,733,324,735,324,737,739,740,742,743,745],{},"The parts are ",[209,726,219],{},[209,728,537],{},[209,730,584],{},[209,732,594],{},[209,734,645],{},[209,736,605],{},[209,738,620],{},", and ",[209,741,655],{},". All the goo lives on ",[209,744,584],{},", which also renders the overlay and the close button.",[235,747,749],{"id":748},"behavior","Behavior",[751,752,753,767,777,787,797],"ul",{},[754,755,756,760,761,324,764,331],"li",{},[757,758,759],"strong",{},"Open."," A blob appears at the middle of the sheet's screen edge and spreads in lobes until it fills the sheet. It overshoots the inner edge and wobbles to rest (",[209,762,763],{},"wobble",[209,765,766],{},"openSlosh",[754,768,769,772,773,776],{},[757,770,771],{},"Splash."," Globs, drops, and specks fling off the inner edge and the sides, fall, and fade. None are thrown off-screen (",[209,774,775],{},"openDrips","). Then nothing moves.",[754,778,779,782,783,786],{},[757,780,781],{},"Close."," The goo pulls in, wobbles, and shrinks back into the edge (",[209,784,785],{},"closeSlosh","). The overlay fades out over the same time.",[754,788,789,792,793,796],{},[757,790,791],{},"Content stays sharp."," Only the sheet's background, border, and shadow are goo. They're drawn on an ",[209,794,795],{},"aria-hidden"," surface behind your content, so text and inputs are never filtered.",[754,798,799,802],{},[757,800,801],{},"Canvas by default."," A sheet is a big surface, so it draws with the canvas renderer unless a prop or the app config says otherwise.",[235,804,806],{"id":805},"sides","Sides",[206,808,809,812],{},[209,810,811],{},"side"," picks the edge, like shadcn. The bloom always starts from the middle of that edge:",[814,815,817],"preview",{":controls":816},"false",[198,818],{"set":805},[244,820,822],{"className":384,"code":821,"language":334,"meta":249,"style":249},"\u003CGoopSheetContent side=\"top\">...\u003C\u002FGoopSheetContent>\n\u003CGoopSheetContent side=\"left\">...\u003C\u002FGoopSheetContent>\n",[209,823,824,845],{"__ignoreMap":249},[253,825,826,828,830,833,835,838,841,843],{"class":255,"line":256},[253,827,392],{"class":290},[253,829,584],{"class":395},[253,831,832],{"class":259}," side",[253,834,405],{"class":290},[253,836,837],{"class":263},"\"top\"",[253,839,840],{"class":290},">...\u003C\u002F",[253,842,584],{"class":395},[253,844,411],{"class":290},[253,846,847,849,851,853,855,858,860,862],{"class":255,"line":294},[253,848,392],{"class":290},[253,850,584],{"class":395},[253,852,832],{"class":259},[253,854,405],{"class":290},[253,856,857],{"class":263},"\"left\"",[253,859,840],{"class":290},[253,861,584],{"class":395},[253,863,411],{"class":290},[235,865,867],{"id":866},"splash-knobs","Splash knobs",[206,869,870,871,873,874,877,878,880],{},"The bloom and its splash take the same knobs as ",[227,872,98],{"href":99},". ",[209,875,876],{},"bloomStart=\"merge\""," starts from a few drops that fuse instead of one. The four numeric props only matter while ",[209,879,775],{}," is on:",[751,882,883,889,895,901],{},[754,884,885,888],{},[209,886,887],{},"openDripAmount"," (0 to 3): how many drops.",[754,890,891,894],{},[209,892,893],{},"openDripSize"," (0.3 to 2.5): how big.",[754,896,897,900],{},[209,898,899],{},"openDripFling"," (0 to 3): how far they fly.",[754,902,903,906],{},[209,904,905],{},"openDripVariety"," (0 to 1): the mix of big globs and specks. 0 makes them all alike.",[206,908,909,912],{},[209,910,911],{},"sloshVariety"," (0 to 1) sets how differently each side bulges. 0 is an even, centred bulge.",[814,914,915],{":controls":816},[198,916],{"set":917},"splash",[244,919,921],{"className":384,"code":920,"language":334,"meta":249,"style":249},"\u003CGoopSheetContent bloom-start=\"merge\" :open-drip-amount=\"2\" :open-drip-size=\"1.6\" :open-drip-fling=\"2\">\n  ...\n\u003C\u002FGoopSheetContent>\n\n\u003CGoopSheetContent :open-drips=\"false\">...\u003C\u002FGoopSheetContent>\n",[209,922,923,983,988,996,1000],{"__ignoreMap":249},[253,924,925,927,929,932,934,937,940,943,945,948,952,954,956,959,961,963,966,968,970,973,975,977,979,981],{"class":255,"line":256},[253,926,392],{"class":290},[253,928,584],{"class":395},[253,930,931],{"class":259}," bloom-start",[253,933,405],{"class":290},[253,935,936],{"class":263},"\"merge\"",[253,938,939],{"class":290}," :",[253,941,942],{"class":259},"open-drip-amount",[253,944,405],{"class":290},[253,946,947],{"class":263},"\"",[253,949,951],{"class":950},"sj4cs","2",[253,953,947],{"class":263},[253,955,939],{"class":290},[253,957,958],{"class":259},"open-drip-size",[253,960,405],{"class":290},[253,962,947],{"class":263},[253,964,965],{"class":950},"1.6",[253,967,947],{"class":263},[253,969,939],{"class":290},[253,971,972],{"class":259},"open-drip-fling",[253,974,405],{"class":290},[253,976,947],{"class":263},[253,978,951],{"class":950},[253,980,947],{"class":263},[253,982,411],{"class":290},[253,984,985],{"class":255,"line":294},[253,986,987],{"class":290},"  ...\n",[253,989,990,992,994],{"class":255,"line":306},[253,991,497],{"class":290},[253,993,584],{"class":395},[253,995,411],{"class":290},[253,997,998],{"class":255,"line":428},[253,999,508],{"emptyLinePlaceholder":507},[253,1001,1002,1004,1006,1008,1011,1013,1015,1017,1019,1021,1023],{"class":255,"line":434},[253,1003,392],{"class":290},[253,1005,584],{"class":395},[253,1007,939],{"class":290},[253,1009,1010],{"class":259},"open-drips",[253,1012,405],{"class":290},[253,1014,947],{"class":263},[253,1016,816],{"class":950},[253,1018,947],{"class":263},[253,1020,840],{"class":290},[253,1022,584],{"class":395},[253,1024,411],{"class":290},[206,1026,1027,324,1029,739,1031,1033,1034,324,1037,1039],{},[209,1028,766],{},[209,1030,775],{},[209,1032,785],{}," take ",[209,1035,1036],{},"true",[209,1038,816],{},", or a strength from 0 to 2.",[235,1041,1043],{"id":1042},"plain-shadcn","Plain shadcn",[206,1045,1046,1049,1050,1053],{},[209,1047,1048],{},":goo=\"false\""," renders exactly shadcn's ",[209,1051,1052],{},"SheetContent",", with its own slide in and out:",[244,1055,1057],{"className":384,"code":1056,"language":334,"meta":249,"style":249},"\u003CGoopSheetContent :goo=\"false\">...\u003C\u002FGoopSheetContent>\n",[209,1058,1059],{"__ignoreMap":249},[253,1060,1061,1063,1065,1067,1070,1072,1074,1076,1078,1080,1082],{"class":255,"line":256},[253,1062,392],{"class":290},[253,1064,584],{"class":395},[253,1066,939],{"class":290},[253,1068,1069],{"class":259},"goo",[253,1071,405],{"class":290},[253,1073,947],{"class":263},[253,1075,816],{"class":950},[253,1077,947],{"class":263},[253,1079,840],{"class":290},[253,1081,584],{"class":395},[253,1083,411],{"class":290},[235,1085,1087],{"id":1086},"driving-it-from-code","Driving it from code",[206,1089,1090,1092,1093,1096,1097,1100,1101,1103],{},[209,1091,584],{}," exposes its engine handle as ",[209,1094,1095],{},"handle"," (",[209,1098,1099],{},"null"," before it mounts, or when ",[209,1102,1069],{}," is off). The panel only exists while open.",[235,1105,1107],{"id":1106},"props","Props",[206,1109,1110,1111,1113,1114,1117,1118,1121],{},"The root, trigger, close, header, footer, title, and description take shadcn-vue's props. ",[209,1112,584],{}," takes reka-ui's ",[209,1115,1116],{},"DialogContent"," props, ",[209,1119,1120],{},"class",", and these:",[1123,1124],"component-props",{"name":196},[235,1126,1128],{"id":1127},"accessibility","Accessibility",[206,1130,1131,1132,1134,1135,220],{},"Focus trapping, scroll locking, Escape and outside-click dismissal, and ARIA attributes come from reka-ui. The goo surface is ",[209,1133,795],{}," and can't be clicked, and your content is never filtered. Under reduced motion the sheet opens and closes plainly: it keeps its goo color, but the bloom, slosh, splash, and wobble are all turned off. See ",[227,1136,23],{"href":24},[1138,1139,1140],"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":1142},[1143,1147,1148,1149,1150,1151,1152,1153,1154],{"id":237,"depth":294,"text":15,"children":1144},[1145,1146],{"id":241,"depth":306,"text":242},{"id":334,"depth":306,"text":335},{"id":380,"depth":294,"text":381},{"id":748,"depth":294,"text":749},{"id":805,"depth":294,"text":806},{"id":866,"depth":294,"text":867},{"id":1042,"depth":294,"text":1043},{"id":1086,"depth":294,"text":1087},{"id":1106,"depth":294,"text":1107},{"id":1127,"depth":294,"text":1128},"shadcn's Sheet with goo. The panel blooms out of its screen edge, wobbles, and splashes.","md",{},{"title":106,"description":1155},"WJ8dbQP-sx7V10uxeYQLvjrRosxX5mO-d6zryrKX4bs",[1161,1163],{"title":102,"path":103,"stem":104,"description":1162,"children":-1},"shadcn's AlertDialog with goo. It blooms like the Dialog, but lighter, because an alert is the serious one.",{"title":110,"path":111,"stem":112,"description":1164,"children":-1},"shadcn's Drawer with goo. The edge trails, sloshes, and splashes as you drag and fling it.",1793670386947]