From 1864a33d95e5d1ce4b24d50eaa345e721dc69b28 Mon Sep 17 00:00:00 2001
From: Anatoliy Tsaryov <github@podolski.me>
Date: Tue, 7 Oct 2025 03:25:28 +0400
Subject: [PATCH 1/7] feat(Popover): add close prop to Popover slots

---
 docs/content/docs/2.components/popover.md |  6 +++++
 src/runtime/components/Popover.vue        | 32 ++++++++++++++++++-----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/docs/content/docs/2.components/popover.md b/docs/content/docs/2.components/popover.md
index 2d911808ef..da483c38ba 100644
--- a/docs/content/docs/2.components/popover.md
+++ b/docs/content/docs/2.components/popover.md
@@ -237,6 +237,12 @@ name: 'popover-anchor-slot-example'
 
 :component-slots
 
+::note
+`close` is only available when using the `click` mode due to Reka UI having it only for the [
+`Popover`](https://reka-ui.com/docs/components/popover#close-using-slot-props) but not the [
+`HoverCard`](https://reka-ui.com/docs/components/hover-card).
+::
+
 ### Emits
 
 :component-emits
diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index 31e3ce8808..b7e0b064a8 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -48,9 +48,27 @@ export interface PopoverEmits extends PopoverRootEmits {
 }
 
 export interface PopoverSlots {
-  default(props: { open: boolean }): any
-  content(props?: {}): any
-  anchor(props?: {}): any
+  default(props: {
+    open: boolean
+    /**
+     * Available only with mode 'click'
+     */
+    close?: () => void
+  }): any
+
+  content(props: {
+    /**
+     * Available only with mode 'click'
+     */
+    close?: () => void
+  }): any
+
+  anchor(props: {
+    /**
+     * Available only with mode 'click'
+     */
+    close?: () => void
+  }): any
 }
 </script>
 
@@ -106,18 +124,18 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
 </script>
 
 <template>
-  <Component.Root v-slot="{ open }" v-bind="rootProps">
+  <Component.Root v-slot="{ open, close }: { open: boolean, close?: () => void }" v-bind="rootProps">
     <Component.Trigger v-if="!!slots.default || !!reference" as-child :reference="reference" :class="props.class">
-      <slot :open="open" />
+      <slot :open="open" :close="close" />
     </Component.Trigger>
 
     <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
-      <slot name="anchor" />
+      <slot name="anchor" :close="close" />
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
       <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
-        <slot name="content" />
+        <slot name="content" :close="close" />
 
         <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
       </Component.Content>

From 742fbaa722cb98eab6f42ab18737bb802cfa52d9 Mon Sep 17 00:00:00 2001
From: Anatoliy Tsaryov <github@podolski.me>
Date: Tue, 7 Oct 2025 13:57:38 +0400
Subject: [PATCH 2/7] feat(Popover): improve Popover typing with generic mode
 param

---
 src/runtime/components/Popover.vue | 42 ++++++++++++++----------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index b7e0b064a8..23f9110232 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -6,13 +6,14 @@ import type { EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
 type Popover = ComponentConfig<typeof theme, AppConfig, 'popover'>
+type PopoverMode = 'click' | 'hover'
 
-export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+export interface PopoverProps<M extends PopoverMode = PopoverMode> extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
   /**
    * The display mode of the popover.
    * @defaultValue 'click'
    */
-  mode?: 'click' | 'hover'
+  mode?: M
   /**
    * The content of the popover.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
@@ -47,32 +48,23 @@ export interface PopoverEmits extends PopoverRootEmits {
   'close:prevent': []
 }
 
-export interface PopoverSlots {
+export interface PopoverSlots<M extends PopoverMode = PopoverMode> {
   default(props: {
     open: boolean
-    /**
-     * Available only with mode 'click'
-     */
-    close?: () => void
+    close: M extends 'click' ? (() => void) : never
   }): any
 
   content(props: {
-    /**
-     * Available only with mode 'click'
-     */
-    close?: () => void
+    close: M extends 'click' ? (() => void) : never
   }): any
 
   anchor(props: {
-    /**
-     * Available only with mode 'click'
-     */
-    close?: () => void
+    close: M extends 'click' ? (() => void) : never
   }): any
 }
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="M extends PopoverMode = PopoverMode">
 import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { useForwardPropsEmits } from 'reka-ui'
@@ -82,15 +74,15 @@ import { useAppConfig } from '#imports'
 import { usePortal } from '../composables/usePortal'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<PopoverProps>(), {
+const props = withDefaults(defineProps<PopoverProps<M>>(), {
   portal: true,
-  mode: 'click',
+  mode: 'click' as never,
   openDelay: 0,
   closeDelay: 0,
   dismissible: true
 })
 const emits = defineEmits<PopoverEmits>()
-const slots = defineSlots<PopoverSlots>()
+const slots = defineSlots<PopoverSlots<M>>()
 
 const appConfig = useAppConfig() as Popover['AppConfig']
 
@@ -121,21 +113,25 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.popover || {
 }))
 
 const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
+type ComponentRootContext = {
+  open: boolean
+  close: M extends 'click' ? (() => void) : never
+}
 </script>
 
 <template>
-  <Component.Root v-slot="{ open, close }: { open: boolean, close?: () => void }" v-bind="rootProps">
+  <Component.Root v-slot="{ open, close }: {open: boolean, close?: () => void}" v-bind="rootProps">
     <Component.Trigger v-if="!!slots.default || !!reference" as-child :reference="reference" :class="props.class">
-      <slot :open="open" :close="close" />
+      <slot v-bind="{ open, close } as ComponentRootContext" />
     </Component.Trigger>
 
     <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
-      <slot name="anchor" :close="close" />
+      <slot name="anchor" v-bind="{ open, close } as ComponentRootContext" />
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
       <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
-        <slot name="content" :close="close" />
+        <slot name="content" v-bind="{ open, close } as ComponentRootContext" />
 
         <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
       </Component.Content>

From 834d2594287e77acb6e8162e27264dc10d5c1d0c Mon Sep 17 00:00:00 2001
From: Anatoliy Tsaryov <6647438+KazimirPodolski@users.noreply.github.com>
Date: Wed, 8 Oct 2025 14:40:42 +0400
Subject: [PATCH 3/7] feat(Popover): fix Popover generic default

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 src/runtime/components/Popover.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index 23f9110232..fdde982a29 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -64,7 +64,7 @@ export interface PopoverSlots<M extends PopoverMode = PopoverMode> {
 }
 </script>
 
-<script setup lang="ts" generic="M extends PopoverMode = PopoverMode">
+<script setup lang="ts" generic="M extends PopoverMode">
 import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { useForwardPropsEmits } from 'reka-ui'

From 6bc78cbdee61f40e5e1c2ce72da0aab3a2cdd3b8 Mon Sep 17 00:00:00 2001
From: Anatoliy Tsaryov <github@podolski.me>
Date: Wed, 8 Oct 2025 15:05:57 +0400
Subject: [PATCH 4/7] feat(Popover): improve Popover slot types

---
 src/runtime/components/Popover.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index fdde982a29..b4a6a96c75 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -113,25 +113,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.popover || {
 }))
 
 const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
-type ComponentRootContext = {
-  open: boolean
-  close: M extends 'click' ? (() => void) : never
-}
 </script>
 
 <template>
   <Component.Root v-slot="{ open, close }: {open: boolean, close?: () => void}" v-bind="rootProps">
     <Component.Trigger v-if="!!slots.default || !!reference" as-child :reference="reference" :class="props.class">
-      <slot v-bind="{ open, close } as ComponentRootContext" />
+      <slot v-bind="{ open, close } as Parameters<typeof slots.default>[0]" />
     </Component.Trigger>
 
     <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
-      <slot name="anchor" v-bind="{ open, close } as ComponentRootContext" />
+      <slot name="anchor" v-bind="{ close } as Parameters<typeof slots.anchor>[0]" />
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
       <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
-        <slot name="content" v-bind="{ open, close } as ComponentRootContext" />
+        <slot name="content" v-bind="{ close } as Parameters<typeof slots.content>[0]" />
 
         <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
       </Component.Content>

From 298a1580f34bce0331e95280a7405d1a4ba618c4 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 9 Oct 2025 12:09:04 +0200
Subject: [PATCH 5/7] improve types

---
 .../nuxt/app/pages/components/popover.vue     |  6 +++--
 src/runtime/components/Popover.vue            | 25 +++++++------------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/playgrounds/nuxt/app/pages/components/popover.vue b/playgrounds/nuxt/app/pages/components/popover.vue
index ba9086ade2..3a70fd29bd 100644
--- a/playgrounds/nuxt/app/pages/components/popover.vue
+++ b/playgrounds/nuxt/app/pages/components/popover.vue
@@ -21,8 +21,10 @@ function send() {
       <UPopover arrow :content="{ side: 'top' }">
         <UButton label="Click me top" color="neutral" variant="outline" />
 
-        <template #content>
-          <div class="w-48 h-16" />
+        <template #content="{ close }">
+          <div class="flex justify-center gap-2 p-4 w-48">
+            <UButton label="Close" color="neutral" @click="close" />
+          </div>
         </template>
       </UPopover>
 
diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index b4a6a96c75..6f7e140c54 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -48,19 +48,12 @@ export interface PopoverEmits extends PopoverRootEmits {
   'close:prevent': []
 }
 
+type SlotProps<M extends PopoverMode = PopoverMode> = [M] extends ['hover'] ? {} : { close: () => void }
+
 export interface PopoverSlots<M extends PopoverMode = PopoverMode> {
-  default(props: {
-    open: boolean
-    close: M extends 'click' ? (() => void) : never
-  }): any
-
-  content(props: {
-    close: M extends 'click' ? (() => void) : never
-  }): any
-
-  anchor(props: {
-    close: M extends 'click' ? (() => void) : never
-  }): any
+  default(props: { open: boolean }): any
+  content(props: SlotProps<M>): any
+  anchor(props: SlotProps<M>): any
 }
 </script>
 
@@ -116,18 +109,18 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
 </script>
 
 <template>
-  <Component.Root v-slot="{ open, close }: {open: boolean, close?: () => void}" v-bind="rootProps">
+  <Component.Root v-slot="{ open, close }: { open: boolean, close?: () => void }" v-bind="rootProps">
     <Component.Trigger v-if="!!slots.default || !!reference" as-child :reference="reference" :class="props.class">
-      <slot v-bind="{ open, close } as Parameters<typeof slots.default>[0]" />
+      <slot :open="open" />
     </Component.Trigger>
 
     <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
-      <slot name="anchor" v-bind="{ close } as Parameters<typeof slots.anchor>[0]" />
+      <slot name="anchor" v-bind="(close ? { close } : {}) as SlotProps<M>" />
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
       <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
-        <slot name="content" v-bind="{ close } as Parameters<typeof slots.content>[0]" />
+        <slot name="content" v-bind="(close ? { close } : {}) as SlotProps<M>" />
 
         <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
       </Component.Content>

From d1a516c59a55c3d2022e9e102b683cf4036bffa3 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 9 Oct 2025 12:31:48 +0200
Subject: [PATCH 6/7] up

---
 src/runtime/components/Popover.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index 6f7e140c54..3e58f8f491 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -115,12 +115,12 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
     </Component.Trigger>
 
     <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
-      <slot name="anchor" v-bind="(close ? { close } : {}) as SlotProps<M>" />
+      <slot name="anchor" v-bind="((close ? { close } : {}) as SlotProps<M>)" />
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
       <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
-        <slot name="content" v-bind="(close ? { close } : {}) as SlotProps<M>" />
+        <slot name="content" v-bind="((close ? { close } : {}) as SlotProps<M>)" />
 
         <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
       </Component.Content>

From 826e9c4da27e7734fc393a17385ad281988f8d5c Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 9 Oct 2025 12:33:48 +0200
Subject: [PATCH 7/7] improve docs

---
 docs/content/docs/2.components/popover.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/content/docs/2.components/popover.md b/docs/content/docs/2.components/popover.md
index da483c38ba..46aae47f60 100644
--- a/docs/content/docs/2.components/popover.md
+++ b/docs/content/docs/2.components/popover.md
@@ -238,9 +238,7 @@ name: 'popover-anchor-slot-example'
 :component-slots
 
 ::note
-`close` is only available when using the `click` mode due to Reka UI having it only for the [
-`Popover`](https://reka-ui.com/docs/components/popover#close-using-slot-props) but not the [
-`HoverCard`](https://reka-ui.com/docs/components/hover-card).
+The `close` function is only available when `mode` is set to `click` because Reka UI exposes this for [`Popover`](https://reka-ui.com/docs/components/popover#close-using-slot-props) but not for [`HoverCard`](https://reka-ui.com/docs/components/hover-card).
 ::
 
 ### Emits