[{"data":1,"prerenderedAt":1442},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fdrawer":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fdrawer":1437},[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":110,"badge":48,"body":189,"description":1432,"extension":1433,"meta":1434,"navigation":513,"path":111,"seo":1435,"status":13,"stem":112,"__hash__":1436},"docs\u002Fdocs\u002F2.components\u002F19.drawer.md",{"type":190,"value":191,"toc":1412},"minimark",[192,201,221,238,242,247,272,314,338,342,356,384,388,748,781,785,856,860,866,872,898,902,920,925,1146,1150,1157,1216,1239,1243,1253,1257,1284,1288,1294,1324,1328,1346,1350,1353,1360,1365,1368,1385,1389,1392,1396,1408],[193,194,197],"playground",{"caption":195,"name":196},"Drag it, flick it away, or pull it past full open.","drawer",[198,199],"demo-drawer",{"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. Drawer is new and experimental: its props may still change. The drawers on this page are the real ",[209,218,219],{},"GoopDrawer",".",[206,222,223,225,226,233,234,237],{},[209,224,219],{}," has the API of shadcn-vue's Drawer, which is built on ",[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fvaul-vue",[231],"nofollow","vaul-vue",". goopUI doesn't use vaul: it's a rebuild on reka-ui's Dialog (focus trapping, scroll locking, dismissal) with goopUI's own drag engine. The drag, snap points, springs, and goo all run in one frame, so the goo moves with the panel exactly. The root takes vaul's props, emits, and ",[209,235,236],{},"v-model","s, so you can swap the imports and keep your code.",[239,240,15],"h2",{"id":241},"installation",[243,244,246],"h3",{"id":245},"nuxt","Nuxt",[248,249,254],"pre",{"className":250,"code":251,"language":252,"meta":253,"style":253},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[209,255,256],{"__ignoreMap":253},[257,258,261,265,269],"span",{"class":259,"line":260},"line",1,[257,262,264],{"class":263},"sScJk","pnpm",[257,266,268],{"class":267},"sZZnC"," add",[257,270,271],{"class":267}," @goopui\u002Fnuxt\n",[248,273,278],{"className":274,"code":275,"filename":276,"language":277,"meta":253,"style":253},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[209,279,280,296,308],{"__ignoreMap":253},[257,281,282,286,289,292],{"class":259,"line":260},[257,283,285],{"class":284},"szBVR","export",[257,287,288],{"class":284}," default",[257,290,291],{"class":263}," defineNuxtConfig",[257,293,295],{"class":294},"sVt8B","({\n",[257,297,299,302,305],{"class":259,"line":298},2,[257,300,301],{"class":294},"  modules: [",[257,303,304],{"class":267},"'@goopui\u002Fnuxt'",[257,306,307],{"class":294},"],\n",[257,309,311],{"class":259,"line":310},3,[257,312,313],{"class":294},"})\n",[206,315,316,317,320,321,324,325,328,329,328,332,335,336,220],{},"The module auto-imports every ",[209,318,319],{},"GoopDrawer*"," part, adds ",[209,322,323],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (",[209,326,327],{},"--background",", ",[209,330,331],{},"--muted",[209,333,334],{},"--foreground","). You don't install ",[209,337,232],{},[243,339,341],{"id":340},"vue","Vue",[248,343,345],{"className":250,"code":344,"language":252,"meta":253,"style":253},"pnpm add @goopui\u002Fvue\n",[209,346,347],{"__ignoreMap":253},[257,348,349,351,353],{"class":259,"line":260},[257,350,264],{"class":263},[257,352,268],{"class":267},[257,354,355],{"class":267}," @goopui\u002Fvue\n",[248,357,362],{"className":358,"code":359,"filename":360,"language":361,"meta":253,"style":253},"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":253},[257,365,366,369,372],{"class":259,"line":260},[257,367,368],{"class":284},"@import",[257,370,371],{"class":267}," \"tailwindcss\"",[257,373,374],{"class":294},";\n",[257,376,377,379,382],{"class":259,"line":298},[257,378,368],{"class":284},[257,380,381],{"class":267}," \"@goopui\u002Fvue\u002Fgoop.css\"",[257,383,374],{"class":294},[239,385,387],{"id":386},"usage","Usage",[248,389,392],{"className":390,"code":391,"language":340,"meta":253,"style":253},"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  GoopDrawer,\n  GoopDrawerClose,\n  GoopDrawerContent,\n  GoopDrawerDescription,\n  GoopDrawerFooter,\n  GoopDrawerHeader,\n  GoopDrawerTitle,\n  GoopDrawerTrigger,\n} from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopDrawer>\n    \u003CGoopDrawerTrigger as-child>\n      \u003CGoopButton variant=\"outline\">Open drawer\u003C\u002FGoopButton>\n    \u003C\u002FGoopDrawerTrigger>\n    \u003CGoopDrawerContent>\n      \u003CGoopDrawerHeader>\n        \u003CGoopDrawerTitle>Move goal\u003C\u002FGoopDrawerTitle>\n        \u003CGoopDrawerDescription>Set your daily activity goal.\u003C\u002FGoopDrawerDescription>\n      \u003C\u002FGoopDrawerHeader>\n      \u003CGoopDrawerFooter>\n        \u003CGoopButton>Submit\u003C\u002FGoopButton>\n        \u003CGoopDrawerClose as-child>\n          \u003CGoopButton variant=\"outline\">Cancel\u003C\u002FGoopButton>\n        \u003C\u002FGoopDrawerClose>\n      \u003C\u002FGoopDrawerFooter>\n    \u003C\u002FGoopDrawerContent>\n  \u003C\u002FGoopDrawer>\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,593,603,619,634,644,654,668,680,701,711,720,729,739],{"__ignoreMap":253},[257,395,396,399,403,406,409,412,415],{"class":259,"line":260},[257,397,398],{"class":294},"\u003C",[257,400,402],{"class":401},"s9eBZ","script",[257,404,405],{"class":263}," setup",[257,407,408],{"class":263}," lang",[257,410,411],{"class":294},"=",[257,413,414],{"class":267},"\"ts\"",[257,416,417],{"class":294},">\n",[257,419,420],{"class":259,"line":298},[257,421,423],{"class":422},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[257,425,426,429],{"class":259,"line":310},[257,427,428],{"class":284},"import",[257,430,431],{"class":294}," {\n",[257,433,435],{"class":259,"line":434},4,[257,436,437],{"class":294},"  GoopButton,\n",[257,439,441],{"class":259,"line":440},5,[257,442,443],{"class":294},"  GoopDrawer,\n",[257,445,447],{"class":259,"line":446},6,[257,448,449],{"class":294},"  GoopDrawerClose,\n",[257,451,453],{"class":259,"line":452},7,[257,454,455],{"class":294},"  GoopDrawerContent,\n",[257,457,459],{"class":259,"line":458},8,[257,460,461],{"class":294},"  GoopDrawerDescription,\n",[257,463,465],{"class":259,"line":464},9,[257,466,467],{"class":294},"  GoopDrawerFooter,\n",[257,469,471],{"class":259,"line":470},10,[257,472,473],{"class":294},"  GoopDrawerHeader,\n",[257,475,477],{"class":259,"line":476},11,[257,478,479],{"class":294},"  GoopDrawerTitle,\n",[257,481,483],{"class":259,"line":482},12,[257,484,485],{"class":294},"  GoopDrawerTrigger,\n",[257,487,489,492,495],{"class":259,"line":488},13,[257,490,491],{"class":294},"} ",[257,493,494],{"class":284},"from",[257,496,497],{"class":267}," '@goopui\u002Fvue'\n",[257,499,501,504,506],{"class":259,"line":500},14,[257,502,503],{"class":294},"\u003C\u002F",[257,505,402],{"class":401},[257,507,417],{"class":294},[257,509,511],{"class":259,"line":510},15,[257,512,514],{"emptyLinePlaceholder":513},true,"\n",[257,516,518,520,523],{"class":259,"line":517},16,[257,519,398],{"class":294},[257,521,522],{"class":401},"template",[257,524,417],{"class":294},[257,526,528,531,533],{"class":259,"line":527},17,[257,529,530],{"class":294},"  \u003C",[257,532,219],{"class":401},[257,534,417],{"class":294},[257,536,538,541,544,547],{"class":259,"line":537},18,[257,539,540],{"class":294},"    \u003C",[257,542,543],{"class":401},"GoopDrawerTrigger",[257,545,546],{"class":263}," as-child",[257,548,417],{"class":294},[257,550,552,555,558,561,563,566,569,571],{"class":259,"line":551},19,[257,553,554],{"class":294},"      \u003C",[257,556,557],{"class":401},"GoopButton",[257,559,560],{"class":263}," variant",[257,562,411],{"class":294},[257,564,565],{"class":267},"\"outline\"",[257,567,568],{"class":294},">Open drawer\u003C\u002F",[257,570,557],{"class":401},[257,572,417],{"class":294},[257,574,576,579,581],{"class":259,"line":575},20,[257,577,578],{"class":294},"    \u003C\u002F",[257,580,543],{"class":401},[257,582,417],{"class":294},[257,584,586,588,591],{"class":259,"line":585},21,[257,587,540],{"class":294},[257,589,590],{"class":401},"GoopDrawerContent",[257,592,417],{"class":294},[257,594,596,598,601],{"class":259,"line":595},22,[257,597,554],{"class":294},[257,599,600],{"class":401},"GoopDrawerHeader",[257,602,417],{"class":294},[257,604,606,609,612,615,617],{"class":259,"line":605},23,[257,607,608],{"class":294},"        \u003C",[257,610,611],{"class":401},"GoopDrawerTitle",[257,613,614],{"class":294},">Move goal\u003C\u002F",[257,616,611],{"class":401},[257,618,417],{"class":294},[257,620,622,624,627,630,632],{"class":259,"line":621},24,[257,623,608],{"class":294},[257,625,626],{"class":401},"GoopDrawerDescription",[257,628,629],{"class":294},">Set your daily activity goal.\u003C\u002F",[257,631,626],{"class":401},[257,633,417],{"class":294},[257,635,637,640,642],{"class":259,"line":636},25,[257,638,639],{"class":294},"      \u003C\u002F",[257,641,600],{"class":401},[257,643,417],{"class":294},[257,645,647,649,652],{"class":259,"line":646},26,[257,648,554],{"class":294},[257,650,651],{"class":401},"GoopDrawerFooter",[257,653,417],{"class":294},[257,655,657,659,661,664,666],{"class":259,"line":656},27,[257,658,608],{"class":294},[257,660,557],{"class":401},[257,662,663],{"class":294},">Submit\u003C\u002F",[257,665,557],{"class":401},[257,667,417],{"class":294},[257,669,671,673,676,678],{"class":259,"line":670},28,[257,672,608],{"class":294},[257,674,675],{"class":401},"GoopDrawerClose",[257,677,546],{"class":263},[257,679,417],{"class":294},[257,681,683,686,688,690,692,694,697,699],{"class":259,"line":682},29,[257,684,685],{"class":294},"          \u003C",[257,687,557],{"class":401},[257,689,560],{"class":263},[257,691,411],{"class":294},[257,693,565],{"class":267},[257,695,696],{"class":294},">Cancel\u003C\u002F",[257,698,557],{"class":401},[257,700,417],{"class":294},[257,702,704,707,709],{"class":259,"line":703},30,[257,705,706],{"class":294},"        \u003C\u002F",[257,708,675],{"class":401},[257,710,417],{"class":294},[257,712,714,716,718],{"class":259,"line":713},31,[257,715,639],{"class":294},[257,717,651],{"class":401},[257,719,417],{"class":294},[257,721,723,725,727],{"class":259,"line":722},32,[257,724,578],{"class":294},[257,726,590],{"class":401},[257,728,417],{"class":294},[257,730,732,735,737],{"class":259,"line":731},33,[257,733,734],{"class":294},"  \u003C\u002F",[257,736,219],{"class":401},[257,738,417],{"class":294},[257,740,742,744,746],{"class":259,"line":741},34,[257,743,503],{"class":294},[257,745,522],{"class":401},[257,747,417],{"class":294},[206,749,750,751,328,753,328,755,328,757,328,759,328,761,328,763,328,765,328,767,770,771,774,775,777,778,780],{},"The parts are ",[209,752,219],{},[209,754,543],{},[209,756,590],{},[209,758,600],{},[209,760,651],{},[209,762,611],{},[209,764,626],{},[209,766,675],{},[209,768,769],{},"GoopDrawerOverlay",", and ",[209,772,773],{},"GoopDrawerPortal",". The vaul props go on ",[209,776,219],{},". All the goo lives on ",[209,779,590],{},", which also renders the overlay and, on bottom drawers, the drag handle.",[239,782,784],{"id":783},"behavior","Behavior",[786,787,788,796,806,819,828,837,846],"ul",{},[789,790,791,795],"li",{},[792,793,794],"strong",{},"Drag."," The panel follows your finger, with a rubber band past full open. Release, and it snaps open, to a snap point, or closed, with vaul's thresholds. Opens and snaps travel fast and land with a small overshoot. Closes fall away.",[789,797,798,801,802,805],{},[792,799,800],{},"Lag."," The leading edge trails behind fast motion. A quick pull stretches it out behind the panel (",[209,803,804],{},"lag",").",[789,807,808,811,812,815,816,805],{},[792,809,810],{},"Slosh and rise."," When the panel stops (release, a snap point, landing), the edge overshoots and wobbles (",[209,813,814],{},"slosh","). Opening adds an extra jelly overshoot as it lands (",[209,817,818],{},"rise",[789,820,821,824,825,805],{},[792,822,823],{},"Stretch."," Dragging past full open pulls a globby bump toward your finger (",[209,826,827],{},"stretch",[789,829,830,833,834,805],{},[792,831,832],{},"Handle."," The drag handle is a goo blob. It swells when you grab it, stretches along the drag, and trails a droplet (",[209,835,836],{},"handle",[789,838,839,842,843,805],{},[792,840,841],{},"Splash."," Fling it away and a splash of drops tears off the leading edge, flies, falls, and fades (",[209,844,845],{},"splash",[789,847,848,851,852,855],{},[792,849,850],{},"Content stays sharp."," Only the panel's background is goo, drawn on an ",[209,853,854],{},"aria-hidden"," surface behind your content. Like the sheet, it draws with the canvas renderer by default.",[239,857,859],{"id":858},"directions","Directions",[206,861,862,865],{},[209,863,864],{},"direction"," is vaul's. The goo edge is whichever side faces the middle of the screen:",[867,868,870],"preview",{":controls":869},"false",[198,871],{"set":858},[248,873,875],{"className":390,"code":874,"language":340,"meta":253,"style":253},"\u003CGoopDrawer direction=\"right\">...\u003C\u002FGoopDrawer>\n",[209,876,877],{"__ignoreMap":253},[257,878,879,881,883,886,888,891,894,896],{"class":259,"line":260},[257,880,398],{"class":294},[257,882,219],{"class":401},[257,884,885],{"class":263}," direction",[257,887,411],{"class":294},[257,889,890],{"class":267},"\"right\"",[257,892,893],{"class":294},">...\u003C\u002F",[257,895,219],{"class":401},[257,897,417],{"class":294},[239,899,901],{"id":900},"snap-points","Snap points",[206,903,904,907,908,911,912,915,916,919],{},[209,905,906],{},"snapPoints"," takes viewport fractions (0 to 1) or px strings (",[209,909,910],{},"'300px'","), least visible first. Bind the current one with ",[209,913,914],{},"v-model:active-snap-point",". The edge sloshes every time it lands on one. ",[209,917,918],{},"fadeFromIndex"," sets the snap point from which the overlay is fully shown.",[867,921,922],{":controls":869},[198,923],{"set":924},"snap",[248,926,928],{"className":390,"code":927,"language":340,"meta":253,"style":253},"\u003Cscript setup lang=\"ts\">\nconst snapPoints = [0.35, 0.65, 1]\nconst snap = ref\u003Cnumber | string | null>(snapPoints[0])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopDrawer v-model:active-snap-point=\"snap\" :snap-points=\"snapPoints\">\n    \u003CGoopDrawerTrigger as-child>\n      \u003CGoopButton variant=\"outline\">Snap points\u003C\u002FGoopButton>\n    \u003C\u002FGoopDrawerTrigger>\n    \u003CGoopDrawerContent class=\"h-full max-h-[97%]\">...\u003C\u002FGoopDrawerContent>\n  \u003C\u002FGoopDrawer>\n\u003C\u002Ftemplate>\n",[209,929,930,946,977,1014,1022,1026,1034,1073,1083,1102,1110,1130,1138],{"__ignoreMap":253},[257,931,932,934,936,938,940,942,944],{"class":259,"line":260},[257,933,398],{"class":294},[257,935,402],{"class":401},[257,937,405],{"class":263},[257,939,408],{"class":263},[257,941,411],{"class":294},[257,943,414],{"class":267},[257,945,417],{"class":294},[257,947,948,951,955,958,961,964,966,969,971,974],{"class":259,"line":298},[257,949,950],{"class":284},"const",[257,952,954],{"class":953},"sj4cs"," snapPoints",[257,956,957],{"class":284}," =",[257,959,960],{"class":294}," [",[257,962,963],{"class":953},"0.35",[257,965,328],{"class":294},[257,967,968],{"class":953},"0.65",[257,970,328],{"class":294},[257,972,973],{"class":953},"1",[257,975,976],{"class":294},"]\n",[257,978,979,981,984,986,989,991,994,997,1000,1002,1005,1008,1011],{"class":259,"line":310},[257,980,950],{"class":284},[257,982,983],{"class":953}," snap",[257,985,957],{"class":284},[257,987,988],{"class":263}," ref",[257,990,398],{"class":294},[257,992,993],{"class":953},"number",[257,995,996],{"class":284}," |",[257,998,999],{"class":953}," string",[257,1001,996],{"class":284},[257,1003,1004],{"class":953}," null",[257,1006,1007],{"class":294},">(snapPoints[",[257,1009,1010],{"class":953},"0",[257,1012,1013],{"class":294},"])\n",[257,1015,1016,1018,1020],{"class":259,"line":434},[257,1017,503],{"class":294},[257,1019,402],{"class":401},[257,1021,417],{"class":294},[257,1023,1024],{"class":259,"line":440},[257,1025,514],{"emptyLinePlaceholder":513},[257,1027,1028,1030,1032],{"class":259,"line":446},[257,1029,398],{"class":294},[257,1031,522],{"class":401},[257,1033,417],{"class":294},[257,1035,1036,1038,1040,1043,1046,1049,1051,1054,1056,1058,1061,1063,1065,1067,1069,1071],{"class":259,"line":452},[257,1037,530],{"class":294},[257,1039,219],{"class":401},[257,1041,1042],{"class":263}," v-model",[257,1044,1045],{"class":294},":",[257,1047,1048],{"class":263},"active-snap-point",[257,1050,411],{"class":294},[257,1052,1053],{"class":267},"\"",[257,1055,924],{"class":294},[257,1057,1053],{"class":267},[257,1059,1060],{"class":294}," :",[257,1062,900],{"class":263},[257,1064,411],{"class":294},[257,1066,1053],{"class":267},[257,1068,906],{"class":294},[257,1070,1053],{"class":267},[257,1072,417],{"class":294},[257,1074,1075,1077,1079,1081],{"class":259,"line":458},[257,1076,540],{"class":294},[257,1078,543],{"class":401},[257,1080,546],{"class":263},[257,1082,417],{"class":294},[257,1084,1085,1087,1089,1091,1093,1095,1098,1100],{"class":259,"line":464},[257,1086,554],{"class":294},[257,1088,557],{"class":401},[257,1090,560],{"class":263},[257,1092,411],{"class":294},[257,1094,565],{"class":267},[257,1096,1097],{"class":294},">Snap points\u003C\u002F",[257,1099,557],{"class":401},[257,1101,417],{"class":294},[257,1103,1104,1106,1108],{"class":259,"line":470},[257,1105,578],{"class":294},[257,1107,543],{"class":401},[257,1109,417],{"class":294},[257,1111,1112,1114,1116,1119,1121,1124,1126,1128],{"class":259,"line":476},[257,1113,540],{"class":294},[257,1115,590],{"class":401},[257,1117,1118],{"class":263}," class",[257,1120,411],{"class":294},[257,1122,1123],{"class":267},"\"h-full max-h-[97%]\"",[257,1125,893],{"class":294},[257,1127,590],{"class":401},[257,1129,417],{"class":294},[257,1131,1132,1134,1136],{"class":259,"line":482},[257,1133,734],{"class":294},[257,1135,219],{"class":401},[257,1137,417],{"class":294},[257,1139,1140,1142,1144],{"class":259,"line":488},[257,1141,503],{"class":294},[257,1143,522],{"class":401},[257,1145,417],{"class":294},[239,1147,1149],{"id":1148},"background-scale","Background scale",[206,1151,1152,1153,1156],{},"Like vaul, an open drawer scales the page behind it back, with rounded corners, and paints ",[209,1154,1155],{},"\u003Cbody>"," black behind it. Mark the element that wraps your page:",[248,1158,1161],{"className":390,"code":1159,"filename":1160,"language":340,"meta":253,"style":253},"\u003Ctemplate>\n  \u003Cdiv data-vaul-drawer-wrapper class=\"min-h-dvh bg-background\">\n    \u003CNuxtPage \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","app.vue",[209,1162,1163,1171,1190,1200,1208],{"__ignoreMap":253},[257,1164,1165,1167,1169],{"class":259,"line":260},[257,1166,398],{"class":294},[257,1168,522],{"class":401},[257,1170,417],{"class":294},[257,1172,1173,1175,1178,1181,1183,1185,1188],{"class":259,"line":298},[257,1174,530],{"class":294},[257,1176,1177],{"class":401},"div",[257,1179,1180],{"class":263}," data-vaul-drawer-wrapper",[257,1182,1118],{"class":263},[257,1184,411],{"class":294},[257,1186,1187],{"class":267},"\"min-h-dvh bg-background\"",[257,1189,417],{"class":294},[257,1191,1192,1194,1197],{"class":259,"line":310},[257,1193,540],{"class":294},[257,1195,1196],{"class":401},"NuxtPage",[257,1198,1199],{"class":294}," \u002F>\n",[257,1201,1202,1204,1206],{"class":259,"line":434},[257,1203,734],{"class":294},[257,1205,1177],{"class":401},[257,1207,417],{"class":294},[257,1209,1210,1212,1214],{"class":259,"line":440},[257,1211,503],{"class":294},[257,1213,522],{"class":401},[257,1215,417],{"class":294},[206,1217,1218,1219,1222,1223,1226,1227,1230,1231,1234,1235,1238],{},"The engine looks for ",[209,1220,1221],{},"[data-vaul-drawer-wrapper]"," first, then ",[209,1224,1225],{},"[data-goop-drawer-wrapper]",", so an app already set up for vaul works as it is. The scale follows the drag every frame, and the wrapper's own styles are put back when the drawer closes. Without a wrapper nothing is scaled. Turn it off with ",[209,1228,1229],{},":should-scale-background=\"false\"",", or keep the scale but skip the black body with ",[209,1232,1233],{},":set-background-color-on-scale=\"false\""," (or ",[209,1236,1237],{},"no-body-styles","). This site has no wrapper, so the demos above don't scale it.",[239,1240,1242],{"id":1241},"nested-drawers","Nested drawers",[206,1244,1245,1246,1248,1249,1252],{},"Open a ",[209,1247,219],{}," with ",[209,1250,1251],{},"nested"," inside another one and the parent recedes while the child is open, following the child as you drag it.",[239,1254,1256],{"id":1255},"events","Events",[206,1258,1259,1261,1262,328,1265,328,1268,1271,1272,1275,1276,1279,1280,1283],{},[209,1260,219],{}," emits vaul's events: ",[209,1263,1264],{},"update:open",[209,1266,1267],{},"update:activeSnapPoint",[209,1269,1270],{},"drag"," (the share of the panel dragged), ",[209,1273,1274],{},"release"," (whether it stays open), ",[209,1277,1278],{},"close"," (it started closing), and ",[209,1281,1282],{},"animationEnd"," (an open or close finished).",[239,1285,1287],{"id":1286},"plain-shadcn","Plain shadcn",[206,1289,1290,1293],{},[209,1291,1292],{},":goo=\"false\""," gives exactly shadcn's DrawerContent look. It's still driven by goopUI's drag engine, so the vaul props keep working:",[248,1295,1297],{"className":390,"code":1296,"language":340,"meta":253,"style":253},"\u003CGoopDrawerContent :goo=\"false\">...\u003C\u002FGoopDrawerContent>\n",[209,1298,1299],{"__ignoreMap":253},[257,1300,1301,1303,1305,1307,1310,1312,1314,1316,1318,1320,1322],{"class":259,"line":260},[257,1302,398],{"class":294},[257,1304,590],{"class":401},[257,1306,1060],{"class":294},[257,1308,1309],{"class":263},"goo",[257,1311,411],{"class":294},[257,1313,1053],{"class":267},[257,1315,869],{"class":953},[257,1317,1053],{"class":267},[257,1319,893],{"class":294},[257,1321,590],{"class":401},[257,1323,417],{"class":294},[239,1325,1327],{"id":1326},"driving-it-from-code","Driving it from code",[206,1329,1330,1332,1333,1335,1336,1339,1340,1343,1344,220],{},[209,1331,590],{}," exposes the live drawer controller as ",[209,1334,836],{}," (",[209,1337,1338],{},"null"," while closed). Open and close it with ",[209,1341,1342],{},"v-model:open"," on ",[209,1345,219],{},[239,1347,1349],{"id":1348},"props","Props",[243,1351,219],{"id":1352},"goopdrawer",[206,1354,1355,1356,1359],{},"vaul-vue's ",[209,1357,1358],{},"DrawerRoot"," props, with the same names and defaults:",[1361,1362],"component-props",{"name":196,"part":1363},[1364],"root",[243,1366,590],{"id":1367},"goopdrawercontent",[206,1369,1370,1371,1374,1375,1378,1379,328,1382,1384],{},"Takes reka-ui's ",[209,1372,1373],{},"DialogContent"," props, ",[209,1376,1377],{},"class",", and these goo props. The effect props take ",[209,1380,1381],{},"true",[209,1383,869],{},", or a strength from 0 to 2:",[1361,1386],{"name":196,"part":1387},[1388],"content",[206,1390,1391],{},"The trigger, close, header, footer, title, description, overlay, and portal take shadcn-vue's props.",[239,1393,1395],{"id":1394},"accessibility","Accessibility",[206,1397,1398,1399,1402,1403,1405,1406,220],{},"Focus trapping, scroll locking, Escape and outside-click dismissal, and ARIA attributes come from reka-ui. With ",[209,1400,1401],{},"dismissible"," off, Escape and outside clicks don't close it, so give it a close button. The goo surface and the handle are ",[209,1404,854],{},". Under reduced motion you can still drag it and it still snaps, but there's no goo motion: no lag, slosh, rise, stretch, or splash, and snaps land without the wobble. See ",[227,1407,23],{"href":24},[1409,1410,1411],"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":253,"searchDepth":310,"depth":310,"links":1413},[1414,1418,1419,1420,1421,1422,1423,1424,1425,1426,1427,1431],{"id":241,"depth":298,"text":15,"children":1415},[1416,1417],{"id":245,"depth":310,"text":246},{"id":340,"depth":310,"text":341},{"id":386,"depth":298,"text":387},{"id":783,"depth":298,"text":784},{"id":858,"depth":298,"text":859},{"id":900,"depth":298,"text":901},{"id":1148,"depth":298,"text":1149},{"id":1241,"depth":298,"text":1242},{"id":1255,"depth":298,"text":1256},{"id":1286,"depth":298,"text":1287},{"id":1326,"depth":298,"text":1327},{"id":1348,"depth":298,"text":1349,"children":1428},[1429,1430],{"id":1352,"depth":310,"text":219},{"id":1367,"depth":310,"text":590},{"id":1394,"depth":298,"text":1395},"shadcn's Drawer with goo. The edge trails, sloshes, and splashes as you drag and fling it.","md",{},{"title":110,"description":1432},"0vtva-iaMWVjhReQiD9unSPxTEe3Mbkwf-ei_l3qhGI",[1438,1440],{"title":106,"path":107,"stem":108,"description":1439,"children":-1},"shadcn's Sheet with goo. The panel blooms out of its screen edge, wobbles, and splashes.",{"title":114,"path":115,"stem":116,"description":1441,"children":-1},"shadcn's Sonner with goo. Toasts drop in as blobs, merge when stacked, and drip away when they leave.",1793670386968]