[{"data":1,"prerenderedAt":970},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fhover-card":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fhover-card":965},[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":143,"badge":48,"body":189,"description":960,"extension":961,"meta":962,"navigation":447,"path":144,"seo":963,"status":13,"stem":145,"__hash__":964},"docs\u002Fdocs\u002F2.components\u002F27.hover-card.md",{"type":190,"value":191,"toc":946},"minimark",[192,201,221,234,238,243,268,310,332,336,350,378,382,610,623,627,670,674,688,694,740,744,754,758,761,851,861,865,882,886,925,930,934,942],[193,194,197],"playground",{"caption":195,"name":196},"Hover the link (or focus it with the keyboard).","hover-card",[198,199],"demo-hover-card",{"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. Hover Card is new and experimental: its props may still change. The cards on this page are the real ",[209,218,219],{},"GoopHoverCard",".",[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\u002Fhover-card",[231],"nofollow","reka-ui Hover Card"," primitive as shadcn-vue's HoverCard, with the same API. Open and close delays, keyboard focus, touch handling, 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,331],{},"The module auto-imports every ",[209,314,315],{},"GoopHoverCard*"," 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],{},"--radius",").",[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 { GoopHoverCard, GoopHoverCardContent, GoopHoverCardTrigger } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopHoverCard :open-delay=\"200\">\n    \u003CGoopHoverCardTrigger href=\"https:\u002F\u002Fnuxt.com\" class=\"underline underline-offset-4\">\n      @nuxt\n    \u003C\u002FGoopHoverCardTrigger>\n    \u003CGoopHoverCardContent>\n      \u003Cp class=\"text-sm font-semibold\">@nuxt\u003C\u002Fp>\n      \u003Cp class=\"text-sm\">The intuitive Vue framework.\u003C\u002Fp>\n    \u003C\u002FGoopHoverCardContent>\n  \u003C\u002FGoopHoverCard>\n\u003C\u002Ftemplate>\n",[209,387,388,412,418,432,442,449,459,486,513,519,529,539,561,582,591,601],{"__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,426,429],{"class":255,"line":306},[253,421,422],{"class":280},"import",[253,424,425],{"class":290}," { GoopHoverCard, GoopHoverCardContent, GoopHoverCardTrigger } ",[253,427,428],{"class":280},"from",[253,430,431],{"class":263}," '@goopui\u002Fvue'\n",[253,433,435,438,440],{"class":255,"line":434},4,[253,436,437],{"class":290},"\u003C\u002F",[253,439,396],{"class":395},[253,441,411],{"class":290},[253,443,445],{"class":255,"line":444},5,[253,446,448],{"emptyLinePlaceholder":447},true,"\n",[253,450,452,454,457],{"class":255,"line":451},6,[253,453,392],{"class":290},[253,455,456],{"class":395},"template",[253,458,411],{"class":290},[253,460,462,465,467,470,473,475,478,482,484],{"class":255,"line":461},7,[253,463,464],{"class":290},"  \u003C",[253,466,219],{"class":395},[253,468,469],{"class":290}," :",[253,471,472],{"class":259},"open-delay",[253,474,405],{"class":290},[253,476,477],{"class":263},"\"",[253,479,481],{"class":480},"sj4cs","200",[253,483,477],{"class":263},[253,485,411],{"class":290},[253,487,489,492,495,498,500,503,506,508,511],{"class":255,"line":488},8,[253,490,491],{"class":290},"    \u003C",[253,493,494],{"class":395},"GoopHoverCardTrigger",[253,496,497],{"class":259}," href",[253,499,405],{"class":290},[253,501,502],{"class":263},"\"https:\u002F\u002Fnuxt.com\"",[253,504,505],{"class":259}," class",[253,507,405],{"class":290},[253,509,510],{"class":263},"\"underline underline-offset-4\"",[253,512,411],{"class":290},[253,514,516],{"class":255,"line":515},9,[253,517,518],{"class":290},"      @nuxt\n",[253,520,522,525,527],{"class":255,"line":521},10,[253,523,524],{"class":290},"    \u003C\u002F",[253,526,494],{"class":395},[253,528,411],{"class":290},[253,530,532,534,537],{"class":255,"line":531},11,[253,533,491],{"class":290},[253,535,536],{"class":395},"GoopHoverCardContent",[253,538,411],{"class":290},[253,540,542,545,547,549,551,554,557,559],{"class":255,"line":541},12,[253,543,544],{"class":290},"      \u003C",[253,546,206],{"class":395},[253,548,505],{"class":259},[253,550,405],{"class":290},[253,552,553],{"class":263},"\"text-sm font-semibold\"",[253,555,556],{"class":290},">@nuxt\u003C\u002F",[253,558,206],{"class":395},[253,560,411],{"class":290},[253,562,564,566,568,570,572,575,578,580],{"class":255,"line":563},13,[253,565,544],{"class":290},[253,567,206],{"class":395},[253,569,505],{"class":259},[253,571,405],{"class":290},[253,573,574],{"class":263},"\"text-sm\"",[253,576,577],{"class":290},">The intuitive Vue framework.\u003C\u002F",[253,579,206],{"class":395},[253,581,411],{"class":290},[253,583,585,587,589],{"class":255,"line":584},14,[253,586,524],{"class":290},[253,588,536],{"class":395},[253,590,411],{"class":290},[253,592,594,597,599],{"class":255,"line":593},15,[253,595,596],{"class":290},"  \u003C\u002F",[253,598,219],{"class":395},[253,600,411],{"class":290},[253,602,604,606,608],{"class":255,"line":603},16,[253,605,437],{"class":290},[253,607,456],{"class":395},[253,609,411],{"class":290},[206,611,612,613,324,615,617,618,620,621,220],{},"The parts are ",[209,614,219],{},[209,616,494],{},", and ",[209,619,536],{},". All the goo lives on ",[209,622,536],{},[235,624,626],{"id":625},"behavior","Behavior",[628,629,630,648,657],"ul",{},[631,632,633,637,638,324,641,644,645,331],"li",{},[634,635,636],"strong",{},"Bloom from the trigger."," The card pools from a droplet on its edge facing the link, spreads out with a lobed edge, overshoots, and wobbles to rest (",[209,639,640],{},"wobble",[209,642,643],{},"openSlosh","). Then it splashes a few drops all around, kept off the link (",[209,646,647],{},"openDrips",[631,649,650,653,654,331],{},[634,651,652],{},"Close."," The card pulls in, wobbles, and shrinks back into the edge it grew from (",[209,655,656],{},"closeSlosh",[631,658,659,662,663,666,667,331],{},[634,660,661],{},"Content stays sharp."," The card's background, ring, and shadow are drawn on an ",[209,664,665],{},"aria-hidden"," surface behind the content, so the text is never filtered. The content fades in once the goo settles (",[209,668,669],{},"fade",[235,671,673],{"id":672},"bloom-origin","Bloom origin",[206,675,676,679,680,683,684,687],{},[209,677,678],{},"bloomFrom"," picks where the bloom starts: ",[209,681,682],{},"'trigger'"," (the default, the card's edge facing its link) or ",[209,685,686],{},"'center'"," (the card's own center, like Popover).",[689,690,692],"preview",{":controls":691},"false",[198,693],{"set":428},[244,695,697],{"className":384,"code":696,"language":334,"meta":249,"style":249},"\u003CGoopHoverCardContent>...\u003C\u002FGoopHoverCardContent>                     \u003C!-- from the edge facing the link -->\n\u003CGoopHoverCardContent bloom-from=\"center\">...\u003C\u002FGoopHoverCardContent> \u003C!-- from its center -->\n",[209,698,699,716],{"__ignoreMap":249},[253,700,701,703,705,708,710,713],{"class":255,"line":256},[253,702,392],{"class":290},[253,704,536],{"class":395},[253,706,707],{"class":290},">...\u003C\u002F",[253,709,536],{"class":395},[253,711,712],{"class":290},">                     ",[253,714,715],{"class":416},"\u003C!-- from the edge facing the link -->\n",[253,717,718,720,722,725,727,730,732,734,737],{"class":255,"line":294},[253,719,392],{"class":290},[253,721,536],{"class":395},[253,723,724],{"class":259}," bloom-from",[253,726,405],{"class":290},[253,728,729],{"class":263},"\"center\"",[253,731,707],{"class":290},[253,733,536],{"class":395},[253,735,736],{"class":290},"> ",[253,738,739],{"class":416},"\u003C!-- from its center -->\n",[235,741,743],{"id":742},"surface-color","Surface color",[206,745,746,747,750,751,753],{},"A hover card's trigger is usually a link with no background, so the card defaults to ",[209,748,749],{},"surface=\"popover\"",": shadcn's popover tokens. ",[209,752,682],{}," takes the trigger's colors, and any CSS color works too.",[235,755,757],{"id":756},"turning-parts-off","Turning parts off",[206,759,760],{},"Every effect is its own toggle, and they all default to on:",[244,762,764],{"className":384,"code":763,"language":334,"meta":249,"style":249},"\u003CGoopHoverCardContent :open-drips=\"false\">...\u003C\u002FGoopHoverCardContent>  \u003C!-- no splash -->\n\u003CGoopHoverCardContent :wobble=\"false\">...\u003C\u002FGoopHoverCardContent>      \u003C!-- no overshoot -->\n\u003CGoopHoverCardContent :close-slosh=\"false\">...\u003C\u002FGoopHoverCardContent> \u003C!-- a plain shrink on close -->\n",[209,765,766,795,823],{"__ignoreMap":249},[253,767,768,770,772,774,777,779,781,783,785,787,789,792],{"class":255,"line":256},[253,769,392],{"class":290},[253,771,536],{"class":395},[253,773,469],{"class":290},[253,775,776],{"class":259},"open-drips",[253,778,405],{"class":290},[253,780,477],{"class":263},[253,782,691],{"class":480},[253,784,477],{"class":263},[253,786,707],{"class":290},[253,788,536],{"class":395},[253,790,791],{"class":290},">  ",[253,793,794],{"class":416},"\u003C!-- no splash -->\n",[253,796,797,799,801,803,805,807,809,811,813,815,817,820],{"class":255,"line":294},[253,798,392],{"class":290},[253,800,536],{"class":395},[253,802,469],{"class":290},[253,804,640],{"class":259},[253,806,405],{"class":290},[253,808,477],{"class":263},[253,810,691],{"class":480},[253,812,477],{"class":263},[253,814,707],{"class":290},[253,816,536],{"class":395},[253,818,819],{"class":290},">      ",[253,821,822],{"class":416},"\u003C!-- no overshoot -->\n",[253,824,825,827,829,831,834,836,838,840,842,844,846,848],{"class":255,"line":306},[253,826,392],{"class":290},[253,828,536],{"class":395},[253,830,469],{"class":290},[253,832,833],{"class":259},"close-slosh",[253,835,405],{"class":290},[253,837,477],{"class":263},[253,839,691],{"class":480},[253,841,477],{"class":263},[253,843,707],{"class":290},[253,845,536],{"class":395},[253,847,736],{"class":290},[253,849,850],{"class":416},"\u003C!-- a plain shrink on close -->\n",[206,852,853,856,857,860],{},[209,854,855],{},":goo=\"false\""," renders exactly shadcn's ",[209,858,859],{},"HoverCardContent",", with its own enter and exit animation.",[235,862,864],{"id":863},"driving-it-from-code","Driving it from code",[206,866,867,869,870,873,874,877,878,881],{},[209,868,536],{}," exposes its engine handle as ",[209,871,872],{},"handle"," (",[209,875,876],{},"null"," before it mounts, or when ",[209,879,880],{},"goo"," is off). The card only exists while open.",[235,883,885],{"id":884},"props","Props",[206,887,888,889,324,892,324,895,898,899,901,902,904,905,324,908,324,911,914,915,918,919,212,922,924],{},"The root and trigger take shadcn-vue's props (",[209,890,891],{},"openDelay",[209,893,894],{},"closeDelay",[209,896,897],{},"asChild",", ...). ",[209,900,536],{}," takes reka-ui's ",[209,903,859],{}," props (",[209,906,907],{},"side",[209,909,910],{},"align",[209,912,913],{},"sideOffset",", and the rest), ",[209,916,917],{},"class",", and these goo props. Defaults are ",[209,920,921],{},"align=\"center\"",[209,923,913],{}," 4.",[926,927],"component-props",{"name":196,"part":928},[929],"content",[235,931,933],{"id":932},"accessibility","Accessibility",[206,935,936,937,939,940,220],{},"Focus handling and dismissal come from reka-ui; like shadcn's, a hover card is for sighted mouse and keyboard users and its content shouldn't be the only way to reach information. The goo surface is ",[209,938,665],{}," and can't be clicked, and the content is never filtered. Under reduced motion the card opens and closes plainly: it keeps its goo shape and color, but the bloom, slosh, and splash are off. See ",[227,941,23],{"href":24},[943,944,945],"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":947},[948,952,953,954,955,956,957,958,959],{"id":237,"depth":294,"text":15,"children":949},[950,951],{"id":241,"depth":306,"text":242},{"id":334,"depth":306,"text":335},{"id":380,"depth":294,"text":381},{"id":625,"depth":294,"text":626},{"id":672,"depth":294,"text":673},{"id":742,"depth":294,"text":743},{"id":756,"depth":294,"text":757},{"id":863,"depth":294,"text":864},{"id":884,"depth":294,"text":885},{"id":932,"depth":294,"text":933},"shadcn's Hover Card with goo. The card blooms out of the edge facing its link, splashes, and shrinks back into it.","md",{},{"title":143,"description":960},"ngaKaRWT-J7dlJTqUMuTsg6yGuPIOKFbyglu9F_KQJs",[966,968],{"title":139,"path":140,"stem":141,"description":967,"children":-1},"shadcn's one-time-code input where the focus is a pool of goo. It flows from cell to cell as you type, back on Backspace, with a small pulse as each digit lands.",{"title":147,"path":148,"stem":149,"description":969,"children":-1},"shadcn's Context Menu with goo. The menu blooms out of the spot you right-clicked, the highlight is a blob that glides between items, and submenus bloom out of their item.",1793670386975]