[{"data":1,"prerenderedAt":1414},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fpopover":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fpopover":1409},[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":78,"badge":13,"body":189,"description":1404,"extension":1405,"meta":1406,"navigation":504,"path":79,"seo":1407,"status":13,"stem":80,"__hash__":1408},"docs\u002Fdocs\u002F2.components\u002F11.popover.md",{"type":190,"value":191,"toc":1387},"minimark",[192,201,221,234,238,243,268,310,341,345,359,387,391,663,686,690,755,759,765,785,792,867,871,883,889,943,947,950,961,965,1025,1028,1032,1038,1064,1069,1074,1184,1199,1203,1209,1265,1269,1279,1309,1313,1329,1333,1366,1371,1375,1383],[193,194,197],"playground",{"caption":195,"name":196},"Open it, then close it. The panel blooms from its own center.","popover",[198,199],"demo-popover",{"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, so APIs may still change. The popovers on this page are the real ",[209,218,219],{},"GoopPopover",", and the code below is exactly what you write.",[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\u002Fpopover",[231],"nofollow","reka-ui Popover"," primitive as shadcn-vue's Popover, with the same API. Focus handling, dismissal, and positioning 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,324,337,340],{},"The module auto-imports every ",[209,314,315],{},"GoopPopover*"," 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],{},"--popover",", ",[209,326,327],{},"--popover-foreground",[209,329,330],{},"--primary",[209,332,333],{},"--foreground",[209,335,336],{},"--ring",[209,338,339],{},"--radius",").",[239,342,344],{"id":343},"vue","Vue",[244,346,348],{"className":246,"code":347,"language":248,"meta":249,"style":249},"pnpm add @goopui\u002Fvue\n",[209,349,350],{"__ignoreMap":249},[253,351,352,354,356],{"class":255,"line":256},[253,353,260],{"class":259},[253,355,264],{"class":263},[253,357,358],{"class":263}," @goopui\u002Fvue\n",[244,360,365],{"className":361,"code":362,"filename":363,"language":364,"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,366,367,378],{"__ignoreMap":249},[253,368,369,372,375],{"class":255,"line":256},[253,370,371],{"class":280},"@import",[253,373,374],{"class":263}," \"tailwindcss\"",[253,376,377],{"class":290},";\n",[253,379,380,382,385],{"class":255,"line":294},[253,381,371],{"class":280},[253,383,384],{"class":263}," \"@goopui\u002Fvue\u002Fgoop.css\"",[253,386,377],{"class":290},[235,388,390],{"id":389},"usage","Usage",[244,392,395],{"className":393,"code":394,"language":343,"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  GoopPopover,\n  GoopPopoverContent,\n  GoopPopoverDescription,\n  GoopPopoverHeader,\n  GoopPopoverTitle,\n  GoopPopoverTrigger,\n} from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopPopover>\n    \u003CGoopPopoverTrigger as-child>\n      \u003CGoopButton variant=\"outline\">Open popover\u003C\u002FGoopButton>\n    \u003C\u002FGoopPopoverTrigger>\n    \u003CGoopPopoverContent>\n      \u003CGoopPopoverHeader>\n        \u003CGoopPopoverTitle>Dimensions\u003C\u002FGoopPopoverTitle>\n        \u003CGoopPopoverDescription>Set the dimensions for the layer.\u003C\u002FGoopPopoverDescription>\n      \u003C\u002FGoopPopoverHeader>\n    \u003C\u002FGoopPopoverContent>\n  \u003C\u002FGoopPopover>\n\u003C\u002Ftemplate>\n",[209,396,397,421,427,435,441,447,453,459,465,471,477,489,499,506,516,526,540,564,574,584,594,610,625,635,644,654],{"__ignoreMap":249},[253,398,399,402,406,409,412,415,418],{"class":255,"line":256},[253,400,401],{"class":290},"\u003C",[253,403,405],{"class":404},"s9eBZ","script",[253,407,408],{"class":259}," setup",[253,410,411],{"class":259}," lang",[253,413,414],{"class":290},"=",[253,416,417],{"class":263},"\"ts\"",[253,419,420],{"class":290},">\n",[253,422,423],{"class":255,"line":294},[253,424,426],{"class":425},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[253,428,429,432],{"class":255,"line":306},[253,430,431],{"class":280},"import",[253,433,434],{"class":290}," {\n",[253,436,438],{"class":255,"line":437},4,[253,439,440],{"class":290},"  GoopButton,\n",[253,442,444],{"class":255,"line":443},5,[253,445,446],{"class":290},"  GoopPopover,\n",[253,448,450],{"class":255,"line":449},6,[253,451,452],{"class":290},"  GoopPopoverContent,\n",[253,454,456],{"class":255,"line":455},7,[253,457,458],{"class":290},"  GoopPopoverDescription,\n",[253,460,462],{"class":255,"line":461},8,[253,463,464],{"class":290},"  GoopPopoverHeader,\n",[253,466,468],{"class":255,"line":467},9,[253,469,470],{"class":290},"  GoopPopoverTitle,\n",[253,472,474],{"class":255,"line":473},10,[253,475,476],{"class":290},"  GoopPopoverTrigger,\n",[253,478,480,483,486],{"class":255,"line":479},11,[253,481,482],{"class":290},"} ",[253,484,485],{"class":280},"from",[253,487,488],{"class":263}," '@goopui\u002Fvue'\n",[253,490,492,495,497],{"class":255,"line":491},12,[253,493,494],{"class":290},"\u003C\u002F",[253,496,405],{"class":404},[253,498,420],{"class":290},[253,500,502],{"class":255,"line":501},13,[253,503,505],{"emptyLinePlaceholder":504},true,"\n",[253,507,509,511,514],{"class":255,"line":508},14,[253,510,401],{"class":290},[253,512,513],{"class":404},"template",[253,515,420],{"class":290},[253,517,519,522,524],{"class":255,"line":518},15,[253,520,521],{"class":290},"  \u003C",[253,523,219],{"class":404},[253,525,420],{"class":290},[253,527,529,532,535,538],{"class":255,"line":528},16,[253,530,531],{"class":290},"    \u003C",[253,533,534],{"class":404},"GoopPopoverTrigger",[253,536,537],{"class":259}," as-child",[253,539,420],{"class":290},[253,541,543,546,549,552,554,557,560,562],{"class":255,"line":542},17,[253,544,545],{"class":290},"      \u003C",[253,547,548],{"class":404},"GoopButton",[253,550,551],{"class":259}," variant",[253,553,414],{"class":290},[253,555,556],{"class":263},"\"outline\"",[253,558,559],{"class":290},">Open popover\u003C\u002F",[253,561,548],{"class":404},[253,563,420],{"class":290},[253,565,567,570,572],{"class":255,"line":566},18,[253,568,569],{"class":290},"    \u003C\u002F",[253,571,534],{"class":404},[253,573,420],{"class":290},[253,575,577,579,582],{"class":255,"line":576},19,[253,578,531],{"class":290},[253,580,581],{"class":404},"GoopPopoverContent",[253,583,420],{"class":290},[253,585,587,589,592],{"class":255,"line":586},20,[253,588,545],{"class":290},[253,590,591],{"class":404},"GoopPopoverHeader",[253,593,420],{"class":290},[253,595,597,600,603,606,608],{"class":255,"line":596},21,[253,598,599],{"class":290},"        \u003C",[253,601,602],{"class":404},"GoopPopoverTitle",[253,604,605],{"class":290},">Dimensions\u003C\u002F",[253,607,602],{"class":404},[253,609,420],{"class":290},[253,611,613,615,618,621,623],{"class":255,"line":612},22,[253,614,599],{"class":290},[253,616,617],{"class":404},"GoopPopoverDescription",[253,619,620],{"class":290},">Set the dimensions for the layer.\u003C\u002F",[253,622,617],{"class":404},[253,624,420],{"class":290},[253,626,628,631,633],{"class":255,"line":627},23,[253,629,630],{"class":290},"      \u003C\u002F",[253,632,591],{"class":404},[253,634,420],{"class":290},[253,636,638,640,642],{"class":255,"line":637},24,[253,639,569],{"class":290},[253,641,581],{"class":404},[253,643,420],{"class":290},[253,645,647,650,652],{"class":255,"line":646},25,[253,648,649],{"class":290},"  \u003C\u002F",[253,651,219],{"class":404},[253,653,420],{"class":290},[253,655,657,659,661],{"class":255,"line":656},26,[253,658,494],{"class":290},[253,660,513],{"class":404},[253,662,420],{"class":290},[206,664,665,666,324,668,324,670,324,672,324,675,324,677,679,680,682,683,685],{},"The parts are ",[209,667,219],{},[209,669,534],{},[209,671,581],{},[209,673,674],{},"GoopPopoverAnchor",[209,676,591],{},[209,678,602],{},", and ",[209,681,617],{},". All the goo lives on ",[209,684,581],{},".",[235,687,689],{"id":688},"behavior","Behavior",[691,692,693,709,726,736,746],"ul",{},[694,695,696,700,701,704,705,708],"li",{},[697,698,699],"strong",{},"Open (bloom)."," A droplet swells at the panel's own center and spreads out in every direction with a lobed edge until it fills the panel. It overshoots and settles with a jelly wobble (",[209,702,703],{},"wobble","). ",[209,706,707],{},"bloomStart=\"merge\""," starts from a few drops that fuse instead of one.",[694,710,711,714,715,718,719,722,723,340],{},[697,712,713],{},"Slosh and splash."," Every edge bulges past rest, rebounds, and wobbles (",[209,716,717],{},"openSlosh","), each side a little differently (",[209,720,721],{},"sloshVariety","). Drops splash off all around, fall, and fade, and none land on the trigger (",[209,724,725],{},"openDrips",[694,727,728,731,732,735],{},[697,729,730],{},"Close."," The panel pulls in, wobbles (",[209,733,734],{},"closeSlosh","), and shrinks back to its center, faster than it opened.",[694,737,738,741,742,745],{},[697,739,740],{},"Content stays sharp."," Only the panel's background, ring, and shadow are goo. They're drawn on an ",[209,743,744],{},"aria-hidden"," surface behind your content, so text and inputs are never filtered.",[694,747,748,751,752,685],{},[697,749,750],{},"Layout"," never changes. The goo draws in an overlay with ",[209,753,754],{},"pointer-events: none",[235,756,758],{"id":757},"open-styles","Open styles",[206,760,761,764],{},[209,762,763],{},"flowStyle=\"bloom\""," is the default. Two older opens are still there:",[691,766,767,773],{},[694,768,769,772],{},[209,770,771],{},"flowStyle=\"neck\"",": goo bulges out of the trigger edge that faces the panel, runs across as a thick neck, swells into the panel, and pinches off. Close sucks it back into the trigger.",[694,774,775,778,779,324,782,340],{},[209,776,777],{},":flow=\"false\"",": a bulb swells at the trigger edge and the panel inflates out of it. The neck stretches and snaps (",[209,780,781],{},"bridge",[209,783,784],{},"momentum",[206,786,787,212,789,791],{},[209,788,781],{},[209,790,784],{}," only apply to these two. The bloom ignores them.",[244,793,795],{"className":393,"code":794,"language":343,"meta":249,"style":249},"\u003CGoopPopoverContent bloom-start=\"merge\">...\u003C\u002FGoopPopoverContent>\n\u003CGoopPopoverContent flow-style=\"neck\">...\u003C\u002FGoopPopoverContent>\n\u003CGoopPopoverContent :flow=\"false\">...\u003C\u002FGoopPopoverContent>\n",[209,796,797,818,838],{"__ignoreMap":249},[253,798,799,801,803,806,808,811,814,816],{"class":255,"line":256},[253,800,401],{"class":290},[253,802,581],{"class":404},[253,804,805],{"class":259}," bloom-start",[253,807,414],{"class":290},[253,809,810],{"class":263},"\"merge\"",[253,812,813],{"class":290},">...\u003C\u002F",[253,815,581],{"class":404},[253,817,420],{"class":290},[253,819,820,822,824,827,829,832,834,836],{"class":255,"line":294},[253,821,401],{"class":290},[253,823,581],{"class":404},[253,825,826],{"class":259}," flow-style",[253,828,414],{"class":290},[253,830,831],{"class":263},"\"neck\"",[253,833,813],{"class":290},[253,835,581],{"class":404},[253,837,420],{"class":290},[253,839,840,842,844,847,850,852,855,859,861,863,865],{"class":255,"line":306},[253,841,401],{"class":290},[253,843,581],{"class":404},[253,845,846],{"class":290}," :",[253,848,849],{"class":259},"flow",[253,851,414],{"class":290},[253,853,854],{"class":263},"\"",[253,856,858],{"class":857},"sj4cs","false",[253,860,854],{"class":263},[253,862,813],{"class":290},[253,864,581],{"class":404},[253,866,420],{"class":290},[235,868,870],{"id":869},"sides-and-alignment","Sides and alignment",[206,872,873,324,876,679,879,882],{},[209,874,875],{},"side",[209,877,878],{},"align",[209,880,881],{},"sideOffset"," are reka-ui's. The panel blooms wherever it lands, and the splash keeps off the trigger:",[884,885,886],"preview",{":controls":858},[198,887],{"set":888},"sides",[244,890,892],{"className":393,"code":891,"language":343,"meta":249,"style":249},"\u003CGoopPopoverContent side=\"left\" class=\"w-56\">...\u003C\u002FGoopPopoverContent>\n\u003CGoopPopoverContent align=\"end\">...\u003C\u002FGoopPopoverContent>\n",[209,893,894,922],{"__ignoreMap":249},[253,895,896,898,900,903,905,908,911,913,916,918,920],{"class":255,"line":256},[253,897,401],{"class":290},[253,899,581],{"class":404},[253,901,902],{"class":259}," side",[253,904,414],{"class":290},[253,906,907],{"class":263},"\"left\"",[253,909,910],{"class":259}," class",[253,912,414],{"class":290},[253,914,915],{"class":263},"\"w-56\"",[253,917,813],{"class":290},[253,919,581],{"class":404},[253,921,420],{"class":290},[253,923,924,926,928,932,934,937,939,941],{"class":255,"line":294},[253,925,401],{"class":290},[253,927,581],{"class":404},[253,929,931],{"class":930},"s7hpK"," align",[253,933,414],{"class":290},[253,935,936],{"class":263},"\"end\"",[253,938,813],{"class":290},[253,940,581],{"class":404},[253,942,420],{"class":290},[235,944,946],{"id":945},"surface-color","Surface color",[206,948,949],{},"By default the panel takes the trigger's color: the whole goo (panel, bridge, and drops) uses the trigger's background, and the content uses its text color. If the trigger has no background of its own, the theme's primary is used. Tokens inside the panel (muted text, borders, inputs) are retinted to match.",[206,951,952,953,956,957,960],{},"Set ",[209,954,955],{},"surface"," to change that. ",[209,958,959],{},"'popover'"," uses shadcn's popover tokens, so the panel looks like a normal shadcn popover. Any CSS color works too:",[884,962,963],{":controls":858},[198,964],{"set":955},[244,966,968],{"className":393,"code":967,"language":343,"meta":249,"style":249},"\u003CGoopPopoverContent>...\u003C\u002FGoopPopoverContent>                         \u003C!-- 'trigger' (default) -->\n\u003CGoopPopoverContent surface=\"popover\">...\u003C\u002FGoopPopoverContent>\n\u003CGoopPopoverContent surface=\"oklch(0.62 0.19 150)\">...\u003C\u002FGoopPopoverContent>\n",[209,969,970,986,1006],{"__ignoreMap":249},[253,971,972,974,976,978,980,983],{"class":255,"line":256},[253,973,401],{"class":290},[253,975,581],{"class":404},[253,977,813],{"class":290},[253,979,581],{"class":404},[253,981,982],{"class":290},">                         ",[253,984,985],{"class":425},"\u003C!-- 'trigger' (default) -->\n",[253,987,988,990,992,995,997,1000,1002,1004],{"class":255,"line":294},[253,989,401],{"class":290},[253,991,581],{"class":404},[253,993,994],{"class":259}," surface",[253,996,414],{"class":290},[253,998,999],{"class":263},"\"popover\"",[253,1001,813],{"class":290},[253,1003,581],{"class":404},[253,1005,420],{"class":290},[253,1007,1008,1010,1012,1014,1016,1019,1021,1023],{"class":255,"line":306},[253,1009,401],{"class":290},[253,1011,581],{"class":404},[253,1013,994],{"class":259},[253,1015,414],{"class":290},[253,1017,1018],{"class":263},"\"oklch(0.62 0.19 150)\"",[253,1020,813],{"class":290},[253,1022,581],{"class":404},[253,1024,420],{"class":290},[206,1026,1027],{},"The colors are read again on every open, so a theme or trigger change is picked up.",[235,1029,1031],{"id":1030},"burst-knobs","Burst knobs",[206,1033,1034,1035,1037],{},"On open, the panel sheds drops. Four numeric props shape the burst. They only matter while ",[209,1036,725],{}," is on:",[691,1039,1040,1046,1052,1058],{},[694,1041,1042,1045],{},[209,1043,1044],{},"openDripAmount"," (0 to 3): how many drops.",[694,1047,1048,1051],{},[209,1049,1050],{},"openDripSize"," (0.3 to 2.5): how big.",[694,1053,1054,1057],{},[209,1055,1056],{},"openDripFling"," (0 to 3): how far they fly.",[694,1059,1060,1063],{},[209,1061,1062],{},"openDripVariety"," (0 to 1): the mix of big globs and specks. 0 makes them all alike.",[206,1065,1066,1068],{},[209,1067,721],{}," (0 to 1, default 1) shapes the slosh instead: how differently each side bulges on open and close (off-centre, one or two lumps, staggered, re-rolled every open). 0 gives an even, centred bulge.",[884,1070,1071],{":controls":858},[198,1072],{"set":1073},"burst",[244,1075,1077],{"className":393,"code":1076,"language":343,"meta":249,"style":249},"\u003CGoopPopoverContent :open-drip-amount=\"2\" :open-drip-size=\"1.6\" :open-drip-fling=\"2\" :open-drip-variety=\"1\">\n  ...\n\u003C\u002FGoopPopoverContent>\n\n\u003CGoopPopoverContent :open-drips=\"false\">...\u003C\u002FGoopPopoverContent>\n",[209,1078,1079,1142,1147,1155,1159],{"__ignoreMap":249},[253,1080,1081,1083,1085,1087,1090,1092,1094,1097,1099,1101,1104,1106,1108,1111,1113,1115,1118,1120,1122,1124,1126,1128,1131,1133,1135,1138,1140],{"class":255,"line":256},[253,1082,401],{"class":290},[253,1084,581],{"class":404},[253,1086,846],{"class":290},[253,1088,1089],{"class":259},"open-drip-amount",[253,1091,414],{"class":290},[253,1093,854],{"class":263},[253,1095,1096],{"class":857},"2",[253,1098,854],{"class":263},[253,1100,846],{"class":290},[253,1102,1103],{"class":259},"open-drip-size",[253,1105,414],{"class":290},[253,1107,854],{"class":263},[253,1109,1110],{"class":857},"1.6",[253,1112,854],{"class":263},[253,1114,846],{"class":290},[253,1116,1117],{"class":259},"open-drip-fling",[253,1119,414],{"class":290},[253,1121,854],{"class":263},[253,1123,1096],{"class":857},[253,1125,854],{"class":263},[253,1127,846],{"class":290},[253,1129,1130],{"class":259},"open-drip-variety",[253,1132,414],{"class":290},[253,1134,854],{"class":263},[253,1136,1137],{"class":857},"1",[253,1139,854],{"class":263},[253,1141,420],{"class":290},[253,1143,1144],{"class":255,"line":294},[253,1145,1146],{"class":290},"  ...\n",[253,1148,1149,1151,1153],{"class":255,"line":306},[253,1150,494],{"class":290},[253,1152,581],{"class":404},[253,1154,420],{"class":290},[253,1156,1157],{"class":255,"line":437},[253,1158,505],{"emptyLinePlaceholder":504},[253,1160,1161,1163,1165,1167,1170,1172,1174,1176,1178,1180,1182],{"class":255,"line":443},[253,1162,401],{"class":290},[253,1164,581],{"class":404},[253,1166,846],{"class":290},[253,1168,1169],{"class":259},"open-drips",[253,1171,414],{"class":290},[253,1173,854],{"class":263},[253,1175,858],{"class":857},[253,1177,854],{"class":263},[253,1179,813],{"class":290},[253,1181,581],{"class":404},[253,1183,420],{"class":290},[206,1185,1186,324,1188,679,1190,1192,1193,324,1196,1198],{},[209,1187,717],{},[209,1189,725],{},[209,1191,734],{}," take ",[209,1194,1195],{},"true",[209,1197,858],{},", or a strength from 0 to 2.",[235,1200,1202],{"id":1201},"anchoring-somewhere-else","Anchoring somewhere else",[206,1204,1205,1206,1208],{},"Put a ",[209,1207,674],{}," around any element and the popover positions against it, and the goo emerges from it, instead of the trigger:",[244,1210,1212],{"className":393,"code":1211,"language":343,"meta":249,"style":249},"\u003CGoopPopover>\n  \u003CGoopPopoverAnchor as-child>\n    \u003Cdiv class=\"rounded-lg border p-3\">The goo comes out of this box\u003C\u002Fdiv>\n  \u003C\u002FGoopPopoverAnchor>\n  \u003CGoopPopoverTrigger as-child>\n    \u003CGoopButton>Open\u003C\u002FGoopButton>\n  \u003C\u002FGoopPopoverTrigger>\n  \u003CGoopPopoverContent>...\u003C\u002FGoopPopoverContent>\n\u003C\u002FGoopPopover>\n",[209,1213,1214,1222,1227,1232,1237,1242,1247,1252,1257],{"__ignoreMap":249},[253,1215,1216,1218,1220],{"class":255,"line":256},[253,1217,401],{"class":290},[253,1219,219],{"class":404},[253,1221,420],{"class":290},[253,1223,1224],{"class":255,"line":294},[253,1225,1226],{"class":290},"  \u003CGoopPopoverAnchor as-child>\n",[253,1228,1229],{"class":255,"line":306},[253,1230,1231],{"class":290},"    \u003Cdiv class=\"rounded-lg border p-3\">The goo comes out of this box\u003C\u002Fdiv>\n",[253,1233,1234],{"class":255,"line":437},[253,1235,1236],{"class":290},"  \u003C\u002FGoopPopoverAnchor>\n",[253,1238,1239],{"class":255,"line":443},[253,1240,1241],{"class":290},"  \u003CGoopPopoverTrigger as-child>\n",[253,1243,1244],{"class":255,"line":449},[253,1245,1246],{"class":290},"    \u003CGoopButton>Open\u003C\u002FGoopButton>\n",[253,1248,1249],{"class":255,"line":455},[253,1250,1251],{"class":290},"  \u003C\u002FGoopPopoverTrigger>\n",[253,1253,1254],{"class":255,"line":461},[253,1255,1256],{"class":290},"  \u003CGoopPopoverContent>...\u003C\u002FGoopPopoverContent>\n",[253,1258,1259,1261,1263],{"class":255,"line":467},[253,1260,494],{"class":290},[253,1262,219],{"class":404},[253,1264,420],{"class":290},[235,1266,1268],{"id":1267},"plain-shadcn","Plain shadcn",[206,1270,1271,1274,1275,1278],{},[209,1272,1273],{},":goo=\"false\""," renders exactly shadcn's ",[209,1276,1277],{},"PopoverContent",", with its own enter and exit animation:",[244,1280,1282],{"className":393,"code":1281,"language":343,"meta":249,"style":249},"\u003CGoopPopoverContent :goo=\"false\">...\u003C\u002FGoopPopoverContent>\n",[209,1283,1284],{"__ignoreMap":249},[253,1285,1286,1288,1290,1292,1295,1297,1299,1301,1303,1305,1307],{"class":255,"line":256},[253,1287,401],{"class":290},[253,1289,581],{"class":404},[253,1291,846],{"class":290},[253,1293,1294],{"class":259},"goo",[253,1296,414],{"class":290},[253,1298,854],{"class":263},[253,1300,858],{"class":857},[253,1302,854],{"class":263},[253,1304,813],{"class":290},[253,1306,581],{"class":404},[253,1308,420],{"class":290},[235,1310,1312],{"id":1311},"driving-it-from-code","Driving it from code",[206,1314,1315,1317,1318,1321,1322,1325,1326,1328],{},[209,1316,581],{}," exposes its engine handle as ",[209,1319,1320],{},"handle"," (",[209,1323,1324],{},"null"," before it mounts, or when ",[209,1327,1294],{}," is off). The panel only exists while open.",[235,1330,1332],{"id":1331},"props","Props",[206,1334,1335,1336,1338,1339,1341,1342,324,1344,324,1346,324,1348,324,1351,1354,1355,1358,1359,212,1362,1365],{},"The root, trigger, anchor, header, title, and description take shadcn-vue's props. ",[209,1337,581],{}," takes reka-ui's ",[209,1340,1277],{}," props (",[209,1343,875],{},[209,1345,878],{},[209,1347,881],{},[209,1349,1350],{},"alignOffset",[209,1352,1353],{},"collisionPadding",", and the rest), ",[209,1356,1357],{},"class",", and these goo props. Defaults are ",[209,1360,1361],{},"align=\"center\"",[209,1363,1364],{},"sideOffset=\"4\"",", like shadcn.",[1367,1368],"component-props",{"name":196,"part":1369},[1370],"content",[235,1372,1374],{"id":1373},"accessibility","Accessibility",[206,1376,1377,1378,1380,1381,685],{},"Focus handling, Escape and outside-click dismissal, and ARIA attributes come from reka-ui. The goo surface is ",[209,1379,744],{}," and can't be clicked, and your content is never filtered. Under reduced motion the popover opens and closes plainly: the panel keeps its goo shape and color, but the bloom, bridge, slosh, drops, and wobble are all turned off. See ",[227,1382,23],{"href":24},[1384,1385,1386],"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}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":249,"searchDepth":306,"depth":306,"links":1388},[1389,1393,1394,1395,1396,1397,1398,1399,1400,1401,1402,1403],{"id":237,"depth":294,"text":15,"children":1390},[1391,1392],{"id":241,"depth":306,"text":242},{"id":343,"depth":306,"text":344},{"id":389,"depth":294,"text":390},{"id":688,"depth":294,"text":689},{"id":757,"depth":294,"text":758},{"id":869,"depth":294,"text":870},{"id":945,"depth":294,"text":946},{"id":1030,"depth":294,"text":1031},{"id":1201,"depth":294,"text":1202},{"id":1267,"depth":294,"text":1268},{"id":1311,"depth":294,"text":1312},{"id":1331,"depth":294,"text":1332},{"id":1373,"depth":294,"text":1374},"shadcn's Popover with goo. The panel blooms out of a droplet, overshoots, and splashes all around.","md",{},{"title":78,"description":1404},"kpY86_cb1o9p_63_k8newxkEriamw1NzJfizuCdxwsg",[1410,1412],{"title":74,"path":75,"stem":76,"description":1411,"children":-1},"shadcn's Select with goo. The list blooms out of the value you picked, the highlight is a blob, and the check mark plops in.",{"title":82,"path":83,"stem":84,"description":1413,"children":-1},"shadcn's Dropdown Menu with goo. The menu blooms open, and the highlight is a blob that slides between items.",1793670386563]