@hina-ui/vue 1.4.0 → 1.6.0

package/src/components/combobox/composables/useOptionLabels.ts

@@ -0,0 +1,20 @@
+import { reactive, watch } from 'vue'
+import { flattenOptions, type SelectItems, type SelectOption } from '../../select/types'
+
+export function useOptionLabels<T extends SelectOption>(
+  options: () => SelectItems<T>,
+  selectedOptions: () => T[] | undefined,
+) {
+  const labels = reactive(new Map<string | number, string>())
+
+  watch(
+    [options, selectedOptions],
+    ([items, selected]) => {
+      for (const option of flattenOptions(items)) labels.set(option.value, option.label)
+      for (const option of selected ?? []) labels.set(option.value, option.label)
+    },
+    { immediate: true, deep: true },
+  )
+
+  return labels
+}

package/src/components/dialog/Dialog.vue

@@ -15,6 +15,7 @@
   import Heading from '../heading/Heading.vue'
   import Text from '../text/Text.vue'
   import { useOverlayPortal } from '../../lib/overlay-portal'
+  import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'
   import { dialogWrapper, dialogCard, type DialogVariants } from './dialog.variants'
 
@@ -47,6 +48,9 @@
     if (props.locked) e.preventDefault()
   }
 
+  const { scrollArea, viewport } = useScrollViewport()
+  defineExpose({ viewport })
+
   const open = defineModel<boolean>('open')
   const { content, present } = useOverlayPortal(open)
 
@@ -117,7 +121,7 @@
                   <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
                 </DialogClose>
               </div>
-              <ScrollArea v-if="$slots.content" class="min-h-0">
+              <ScrollArea v-if="$slots.content" ref="scrollArea" class="min-h-0">
                 <div class="px-(--hn-panel-p) py-1">
                   <slot name="content" :close="close" />
                 </div>

package/src/components/drawer/Drawer.vue

@@ -14,8 +14,9 @@
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import Heading from '../heading/Heading.vue'
   import Text from '../text/Text.vue'
+  import { useOverlayPortal } from '../../lib/overlay-portal'
+  import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'
-  import { useUiLocale } from '../../locale'
   import { drawerCard } from './drawer.variants'
 
   defineOptions({ name: 'HnDrawer' })
@@ -26,18 +27,32 @@
       description?: string
       side?: 'start' | 'end'
       size?: 'sm' | 'md' | 'lg'
+      header?: boolean
+      closable?: boolean
       locked?: boolean
       class?: string
     }>(),
-    { side: 'end', size: 'md', locked: false },
+    { side: 'end', size: 'md', header: true, closable: true, locked: false },
   )
 
+  const slots = defineSlots<{
+    default?(): unknown
+    icon?(): unknown
+    title?(): unknown
+    body?(props: { close: () => void }): unknown
+    content?(props: { close: () => void }): unknown
+    footer?(props: { close: () => void }): unknown
+  }>()
+
   function guard(e: Event) {
     if (props.locked) e.preventDefault()
   }
 
+  const { scrollArea, viewport } = useScrollViewport()
+  defineExpose({ viewport })
+
   const open = defineModel<boolean>('open')
-  const t = useUiLocale()
+  const { content, present } = useOverlayPortal(open)
 
   function close() {
     open.value = false
@@ -49,45 +64,67 @@
     <DialogTrigger v-if="$slots.default" as-child>
       <slot />
     </DialogTrigger>
-    <DialogPortal>
+    <DialogPortal v-if="present">
       <DialogOverlay class="hn-scrim" />
       <DialogContent as-child @escape-key-down="guard" @interact-outside="guard">
         <Card
+          ref="content"
+          v-bind="props.description ? {} : { 'aria-describedby': undefined }"
           :data-hn-side="props.side"
           :padded="false"
           :class="
-            cn(
-              'hn-anim-drawer pointer-events-auto fixed inset-y-0 z-(--hn-z-overlay) flex flex-col gap-4',
-              'max-w-[calc(100vw-3rem)] rounded-none py-(--hn-panel-p) shadow-lg outline-none',
-              drawerCard({ side: props.side, size: props.size }),
-              props.class,
-            )
+            cn(drawerCard({ side: props.side, size: props.size, padded: !slots.body }), props.class)
           "
         >
-          <div class="flex shrink-0 items-start justify-between gap-4 px-(--hn-panel-p)">
-            <div class="flex min-w-0 flex-col gap-1.5">
-              <DialogTitle as-child>
-                <Heading :level="2" size="lg">{{ props.title }}</Heading>
-              </DialogTitle>
-              <DialogDescription v-if="props.description" as-child>
-                <Text tone="muted">{{ props.description }}</Text>
-              </DialogDescription>
+          <template v-if="!props.header || slots.body">
+            <DialogTitle as-child>
+              <Heading :level="2" class="sr-only">{{ props.title }}</Heading>
+            </DialogTitle>
+            <DialogDescription v-if="props.description" class="sr-only">
+              {{ props.description }}
+            </DialogDescription>
+          </template>
+          <slot v-if="slots.body" name="body" :close="close" />
+          <template v-else>
+            <div
+              v-if="props.header"
+              class="flex shrink-0 items-start justify-between gap-4 px-(--hn-panel-p)"
+            >
+              <div class="flex min-w-0 flex-col gap-1.5">
+                <div class="flex min-w-0 items-center gap-2">
+                  <span
+                    v-if="slots.icon"
+                    class="text-muted flex shrink-0 [&_svg]:size-5"
+                    aria-hidden="true"
+                  >
+                    <slot name="icon" />
+                  </span>
+                  <DialogTitle as-child>
+                    <Heading :level="2" size="lg" class="min-w-0">
+                      <slot name="title">{{ props.title }}</slot>
+                    </Heading>
+                  </DialogTitle>
+                </div>
+                <DialogDescription v-if="props.description" as-child>
+                  <Text tone="muted">{{ props.description }}</Text>
+                </DialogDescription>
+              </div>
+              <DialogClose v-if="props.closable" as-child>
+                <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
+              </DialogClose>
             </div>
-            <DialogClose as-child>
-              <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
-            </DialogClose>
-          </div>
-          <ScrollArea v-if="$slots.content" class="min-h-0 grow">
-            <div class="px-(--hn-panel-p) py-1">
-              <slot name="content" :close="close" />
+            <ScrollArea v-if="$slots.content" ref="scrollArea" class="min-h-0 grow">
+              <div class="px-(--hn-panel-p) py-1">
+                <slot name="content" :close="close" />
+              </div>
+            </ScrollArea>
+            <div
+              v-if="$slots.footer"
+              class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
+            >
+              <slot name="footer" :close="close" />
             </div>
-          </ScrollArea>
-          <div
-            v-if="$slots.footer"
-            class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
-          >
-            <slot name="footer" :close="close" />
-          </div>
+          </template>
         </Card>
       </DialogContent>
     </DialogPortal>

package/src/components/drawer/drawer.variants.ts

@@ -1,8 +1,12 @@
 import { tv, type VariantProps } from '../../lib/tv'
 
 export const drawerCard = tv({
-  base: '',
+  base: [
+    'hn-anim-drawer pointer-events-auto fixed inset-y-0 z-(--hn-z-overlay) flex flex-col',
+    'max-w-[calc(100vw-3rem)] rounded-none shadow-lg outline-none',
+  ],
   variants: {
+    padded: { true: 'gap-4 py-(--hn-panel-p)' },
     side: {
       start: 'start-0',
       end: 'end-0',
@@ -13,7 +17,7 @@ export const drawerCard = tv({
       lg: 'w-120',
     },
   },
-  defaultVariants: { side: 'end', size: 'md' },
+  defaultVariants: { side: 'end', size: 'md', padded: true },
 })
 
 export type DrawerVariants = VariantProps<typeof drawerCard>

package/src/components/dropdown-menu/DropdownMenu.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import type { OverlayAnchor, OverlayPositionStrategy } from '../../lib/overlay-anchor'
   import { computed } from 'vue'
   import {
     DropdownMenuRoot,
@@ -16,7 +17,8 @@
   const props = withDefaults(
     defineProps<{
       label?: string
-      anchor?: HTMLElement | null
+      anchor?: OverlayAnchor | null
+      updatePositionStrategy?: OverlayPositionStrategy
       modal?: boolean
       dir?: 'ltr' | 'rtl'
       side?: 'top' | 'right' | 'bottom' | 'left'
@@ -24,13 +26,23 @@
       sideOffset?: number
       class?: string
     }>(),
-    { side: 'bottom', align: 'center', sideOffset: 8, modal: true },
+    {
+      updatePositionStrategy: 'optimized',
+      side: 'bottom',
+      align: 'center',
+      sideOffset: 8,
+      modal: true,
+    },
   )
 
   const open = defineModel<boolean>('open')
   const emit = defineEmits<DropdownMenuContentEmits>()
   defineSlots<{ default?(): unknown; content?(): unknown }>()
-  const { trigger, reference, visible, events } = useAnchoredOverlay(props, open, emit)
+  const { trigger, content, present, reference, visible, events } = useAnchoredOverlay(
+    props,
+    open,
+    emit,
+  )
 
   const pressOrigin = computed(() => {
     if (props.side === 'left') return 'right'
@@ -52,17 +64,18 @@
     >
       <slot />
     </DropdownMenuTrigger>
-    <DropdownMenuPortal>
+    <DropdownMenuPortal v-if="present">
       <DropdownMenuContent
-        v-if="reference"
         v-bind="{ 'aria-label': props.label, ...$attrs, ...events }"
         :reference="reference"
+        :update-position-strategy="props.updatePositionStrategy"
         as-child
         :side="props.side"
         :align="props.align"
         :side-offset="props.sideOffset"
       >
         <Card
+          ref="content"
           :padded="false"
           :class="
             cn(

package/src/components/hover-card/HoverCard.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import type { OverlayAnchor, OverlayPositionStrategy } from '../../lib/overlay-anchor'
   import { HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import Card from '../card/Card.vue'
@@ -8,7 +9,8 @@
 
   const props = withDefaults(
     defineProps<{
-      anchor?: HTMLElement | null
+      anchor?: OverlayAnchor | null
+      updatePositionStrategy?: OverlayPositionStrategy
       side?: 'top' | 'right' | 'bottom' | 'left'
       align?: 'start' | 'center' | 'end'
       sideOffset?: number
@@ -19,6 +21,7 @@
       positionerClass?: string
     }>(),
     {
+      updatePositionStrategy: 'optimized',
       side: 'bottom',
       align: 'center',
       sideOffset: 8,
@@ -41,6 +44,7 @@
     <HoverCardAnchor
       v-slot="{ reference, contentRef, present }"
       :anchor="props.anchor"
+      :update-position-strategy="props.updatePositionStrategy"
       :external="!$slots.default"
       :close-delay="props.closeDelay"
       :positioner-class="props.positionerClass"
@@ -48,6 +52,7 @@
       <HoverCardPortal v-if="present">
         <HoverCardContent
           :reference="reference"
+          :update-position-strategy="props.updatePositionStrategy"
           as-child
           :side="props.side"
           :align="props.align"

package/src/components/hover-card/HoverCardAnchor.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+  import type { OverlayAnchor, OverlayPositionStrategy } from '../../lib/overlay-anchor'
   import { useHoverCardAnchor } from './composables/useHoverCardAnchor'
 
   defineOptions({ name: 'HnHoverCardAnchor' })
   const props = defineProps<{
-    anchor?: HTMLElement | null
+    anchor?: OverlayAnchor | null
+    updatePositionStrategy: OverlayPositionStrategy
     external: boolean
     closeDelay: number
     positionerClass?: string

package/src/components/hover-card/composables/useHoverCardAnchor.ts

@@ -1,12 +1,19 @@
-import { computed, onScopeDispose, shallowRef, watch, type ComponentPublicInstance } from 'vue'
+import { computed, onScopeDispose, watch, type ComponentPublicInstance } from 'vue'
 import { useEventListener, useRafFn } from '@vueuse/core'
 import { injectHoverCardRootContext } from 'reka-ui'
+import {
+  overlayAnchorElement,
+  useOverlayAnchor,
+  type OverlayAnchor,
+  type OverlayPositionStrategy,
+} from '../../../lib/overlay-anchor'
 import { useOverlayPortal } from '../../../lib/overlay-portal'
 import { useOverlayPositionerClass } from '../../../lib/overlay-positioner'
 import { inPointerCorridor } from '../../../lib/pointer-corridor'
 
 interface HoverCardAnchorOptions {
-  anchor?: HTMLElement | null
+  anchor?: OverlayAnchor | null
+  updatePositionStrategy: OverlayPositionStrategy
   external: boolean
   closeDelay: number
   positionerClass?: string
@@ -16,18 +23,18 @@ export function useHoverCardAnchor(props: HoverCardAnchorOptions) {
   const root = injectHoverCardRootContext()
   const original = { onOpen: root.onOpen, onClose: root.onClose, onDismiss: root.onDismiss }
   const anchor = computed(() => (props.external ? (props.anchor ?? undefined) : undefined))
+  const element = computed(() => overlayAnchorElement(anchor.value))
+  const virtual = computed(() => !!anchor.value && !element.value)
   const { content, present } = useOverlayPortal(root.open)
   useOverlayPositionerClass(content, () => props.positionerClass)
   const panel = computed(() =>
     props.external ? (content.value?.$el as HTMLElement | undefined) : undefined,
   )
-  const liveAnchor = shallowRef<HTMLElement>()
-  const retained = shallowRef<{
-    getBoundingClientRect: () => DOMRect
-    contextElement: HTMLElement
-  }>()
-  const reference = computed(() =>
-    props.external ? (liveAnchor.value ?? retained.value) : undefined,
+  const reference = useOverlayAnchor(
+    () => (props.external ? anchor.value : root.triggerElement.value),
+    root.open,
+    present,
+    () => props.updatePositionStrategy,
   )
   let timer: ReturnType<typeof setTimeout> | undefined
   let tracking = false
@@ -45,6 +52,7 @@ export function useHoverCardAnchor(props: HoverCardAnchorOptions) {
 
   function close() {
     if (
+      virtual.value ||
       timer !== undefined ||
       !root.open.value ||
       root.hasSelectionRef.value ||
@@ -63,8 +71,8 @@ export function useHoverCardAnchor(props: HoverCardAnchorOptions) {
     const pointer = event as PointerEvent
     if (!root.open.value || !tracking || pointer.pointerType === 'touch') return
     const target = pointer.target as Node | null
-    if (target && (anchor.value?.contains(target) || panel.value?.contains(target))) return keep()
-    const a = anchor.value?.getBoundingClientRect()
+    if (target && (element.value?.contains(target) || panel.value?.contains(target))) return keep()
+    const a = element.value?.getBoundingClientRect()
     const b = panel.value?.getBoundingClientRect()
     if (a && b && inPointerCorridor({ x: pointer.clientX, y: pointer.clientY }, a, b)) cancel()
     else close()
@@ -72,33 +80,20 @@ export function useHoverCardAnchor(props: HoverCardAnchorOptions) {
 
   function leave(event: Event) {
     const pointer = event as PointerEvent
-    if (pointer.pointerType === 'touch' || !root.open.value) return
+    if (virtual.value || pointer.pointerType === 'touch' || !root.open.value) return
     tracking = true
-    const a = anchor.value?.getBoundingClientRect()
+    const a = element.value?.getBoundingClientRect()
     const b = panel.value?.getBoundingClientRect()
     if (a && b && inPointerCorridor({ x: pointer.clientX, y: pointer.clientY }, a, b)) cancel()
     else close()
   }
 
   function measure() {
-    const element = anchor.value
-    if (!element?.isConnected) {
-      liveAnchor.value = undefined
+    if (!anchor.value || (element.value && !element.value.isConnected)) {
       if (root.open.value) dismiss()
       return
     }
-    liveAnchor.value = element
-    const rect = element.getBoundingClientRect()
-    const previous = retained.value?.getBoundingClientRect()
-    if (
-      !previous ||
-      retained.value?.contextElement !== element ||
-      rect.x !== previous.x ||
-      rect.y !== previous.y ||
-      rect.width !== previous.width ||
-      rect.height !== previous.height
-    )
-      retained.value = { getBoundingClientRect: () => rect, contextElement: element }
+    reference.value?.getBoundingClientRect()
   }
 
   const { pause, resume } = useRafFn(measure, { immediate: false })
@@ -112,35 +107,32 @@ export function useHoverCardAnchor(props: HoverCardAnchorOptions) {
       cancel()
       tracking = false
       pause()
-      if (!props.external || !mounted) {
-        liveAnchor.value = undefined
-        return
-      }
+      if (!props.external || !mounted) return
       if (element !== previous?.[0]) {
         root.hasSelectionRef.value = false
         root.isPointerDownOnContentRef.value = false
       }
       measure()
-      resume()
+      if (!virtual.value) resume()
     },
     { immediate: true, flush: 'post' },
   )
 
-  useEventListener(anchor, 'pointerenter', keep)
-  useEventListener(anchor, 'pointerleave', leave)
-  useEventListener(anchor, 'focusin', keep)
-  useEventListener(anchor, 'focusout', event => {
+  useEventListener(element, 'pointerenter', keep)
+  useEventListener(element, 'pointerleave', leave)
+  useEventListener(element, 'focusin', keep)
+  useEventListener(element, 'focusout', event => {
     const target = (event as FocusEvent).relatedTarget as Node | null
-    if (!target || (!anchor.value?.contains(target) && !panel.value?.contains(target))) close()
+    if (!target || (!element.value?.contains(target) && !panel.value?.contains(target))) close()
   })
   useEventListener(panel, 'pointerenter', keep)
   useEventListener(panel, 'pointerleave', leave)
-  useEventListener(() => anchor.value?.ownerDocument, 'pointermove', track)
+  useEventListener(() => element.value?.ownerDocument, 'pointermove', track)
   useEventListener(
-    () => anchor.value?.ownerDocument,
+    () => element.value?.ownerDocument,
     'scroll',
     event => {
-      if (root.open.value && (event.target as Node | null)?.contains(anchor.value ?? null))
+      if (root.open.value && (event.target as Node | null)?.contains(element.value ?? null))
         dismiss()
     },
     { capture: true, passive: true },
@@ -153,7 +145,6 @@ export function useHoverCardAnchor(props: HoverCardAnchorOptions) {
 
   function contentRef(value: Element | ComponentPublicInstance | null) {
     content.value = value as ComponentPublicInstance | null
-    if (!value && !root.open.value) retained.value = undefined
   }
 
   return { reference, contentRef, present }

package/src/components/multi-combobox/MultiCombobox.vue

@@ -33,6 +33,7 @@
   const props = withDefaults(
     defineProps<{
       options: SelectItems<T>
+      selectedOptions?: T[]
       placeholder?: string
       ignoreFilter?: boolean
       loading?: boolean
@@ -69,6 +70,7 @@
   const { selected, keyboard, input, remove, clear, onHostClick, onInputKeydown } =
     useMultiCombobox({
       options: () => props.options,
+      selectedOptions: () => props.selectedOptions,
       model,
       open,
       disabled: () => disabled.value,

package/src/components/multi-combobox/composables/useMultiCombobox.ts

@@ -1,9 +1,11 @@
-import { computed, reactive, ref, shallowRef, watch, type Ref } from 'vue'
+import { computed, ref, shallowRef, watch, type Ref } from 'vue'
 import { focusFieldFrom } from '../../../lib/field-focus'
-import { flattenOptions, type SelectItems, type SelectOption } from '../../select/types'
+import type { SelectItems, SelectOption } from '../../select/types'
+import { useOptionLabels } from '../../combobox/composables/useOptionLabels'
 
 interface MultiComboboxOptions<T extends SelectOption> {
   options: () => SelectItems<T>
+  selectedOptions: () => T[] | undefined
   model: Ref<Array<string | number>>
   open: Ref<boolean>
   disabled: () => boolean
@@ -14,14 +16,7 @@ export function useMultiCombobox<T extends SelectOption>(options: MultiComboboxO
   const { model, open } = options
   const keyboard = ref(false)
   const input = shallowRef<{ $el: HTMLInputElement } | null>(null)
-  const labels = reactive(new Map<string | number, string>())
-  watch(
-    options.options,
-    options => {
-      for (const option of flattenOptions(options)) labels.set(option.value, option.label)
-    },
-    { immediate: true, deep: true },
-  )
+  const labels = useOptionLabels(options.options, options.selectedOptions)
 
   const selected = computed(() =>
     model.value.map(value => ({ value, label: labels.get(value) ?? String(value) })),

package/src/components/nav-link/NavLink.vue

@@ -42,7 +42,13 @@
       :class="cn(navLink({ active: props.active }), props.class)"
     >
       <slot name="icon" />
-      <span :aria-hidden="rail ? 'true' : undefined" data-hn-label :class="navLinkLabel({ rail })">
+      <span
+        :aria-hidden="rail ? 'true' : undefined"
+        :inert="rail"
+        :data-collapsed="rail ? '' : undefined"
+        data-hn-label
+        :class="navLinkLabel()"
+      >
         <slot />
       </span>
     </Primitive>

package/src/components/nav-link/nav-link.variants.ts

@@ -17,14 +17,5 @@ export const navLink = tv({
 })
 
 export const navLinkLabel = tv({
-  base: 'shrink-0 whitespace-nowrap',
-  variants: {
-    rail: {
-      true: 'opacity-0 [transition:opacity_calc(var(--hn-duration-fast)/2)_var(--hn-ease-exit)]',
-      false: 'opacity-100 [transition:opacity_var(--hn-duration-fast)_var(--hn-ease-enter)]',
-    },
-  },
-  defaultVariants: { rail: false },
+  base: 'hn-sidebar-label shrink-0 whitespace-nowrap',
 })
-
-export type NavLinkVariants = VariantProps<typeof navLink>

package/src/components/popover/Popover.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
+  import type { OverlayAnchor, OverlayPositionStrategy } from '../../lib/overlay-anchor'
   import { computed } from 'vue'
   import { PopoverRoot, PopoverTrigger, PopoverPortal, type PopoverContentEmits } from 'reka-ui'
   import PopoverContent from './PopoverContent.vue'
   import { useAnchoredOverlay } from '../../lib/anchored-overlay'
   import Card from '../card/Card.vue'
-  import { useOverlayPortal } from '../../lib/overlay-portal'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnPopover', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
-      anchor?: HTMLElement | null
+      anchor?: OverlayAnchor | null
+      updatePositionStrategy?: OverlayPositionStrategy
       modal?: boolean
       side?: 'top' | 'right' | 'bottom' | 'left'
       align?: 'start' | 'center' | 'end'
@@ -19,18 +20,26 @@
       padded?: boolean
       class?: string
     }>(),
-    { side: 'bottom', align: 'center', sideOffset: 8, padded: true, modal: true },
+    {
+      updatePositionStrategy: 'optimized',
+      side: 'bottom',
+      align: 'center',
+      sideOffset: 8,
+      padded: true,
+      modal: true,
+    },
   )
 
   const open = defineModel<boolean>('open')
   const emit = defineEmits<PopoverContentEmits>()
   defineSlots<{ default?(): unknown; content?(): unknown }>()
-  const { trigger, reference, visible, events } = useAnchoredOverlay(props, open, emit, event =>
-    emit('openAutoFocus', event),
+  const { trigger, content, present, reference, visible, events } = useAnchoredOverlay(
+    props,
+    open,
+    emit,
+    event => emit('openAutoFocus', event),
   )
 
-  const { content, present } = useOverlayPortal(visible)
-
   const pressOrigin = computed(() => {
     if (props.side === 'left') return 'right'
     if (props.side === 'right') return 'left'
@@ -54,6 +63,7 @@
       <PopoverContent
         v-bind="{ ...$attrs, ...events }"
         :reference="reference"
+        :update-position-strategy="props.updatePositionStrategy"
         as-child
         :side="props.side"
         :align="props.align"