@hina-ui/vue 1.4.0 → 1.5.0

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/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"

package/src/components/sheet/Sheet.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { computed, shallowRef } from 'vue'
+  import { computed } from 'vue'
   import {
     DialogClose,
     DialogContent,
@@ -10,8 +10,9 @@
     DialogTitle,
     DialogTrigger,
   } from 'reka-ui'
+  import { useOverlayPortal } from '../../lib/overlay-portal'
+  import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'
-  import { useUiLocale } from '../../locale'
   import Card from '../card/Card.vue'
   import CloseButton from '../close-button/CloseButton.vue'
   import Heading from '../heading/Heading.vue'
@@ -26,16 +27,29 @@
     defineProps<{
       title: string
       description?: string
+      header?: boolean
+      closable?: boolean
       handle?: boolean
       locked?: boolean
       class?: string
     }>(),
-    { handle: true, locked: false },
+    { header: true, closable: true, handle: 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
+  }>()
+
+  const { scrollArea, viewport } = useScrollViewport()
+  defineExpose({ viewport })
+
   const open = defineModel<boolean>('open')
-  const t = useUiLocale()
-  const panel = shallowRef<{ $el: HTMLElement } | null>(null)
+  const { content: panel, present } = useOverlayPortal(open)
 
   const { dragging, offset, onPointerDown } = useDragToDismiss(() => panel.value?.$el ?? null, {
     enabled: () => !props.locked,
@@ -63,54 +77,83 @@
     <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="panel"
+          v-bind="props.description ? {} : { 'aria-describedby': undefined }"
           data-hn-sheet
           :data-dragging="dragging ? '' : undefined"
           :padded="false"
           :style="style"
-          :class="cn(sheetPanel(), props.class)"
+          :class="
+            cn(sheetPanel({ grip: props.header || props.handle, padded: !slots.body }), props.class)
+          "
         >
+          <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>
           <div
+            v-if="props.handle || (props.header && !slots.body)"
             data-hn-sheet-grip
             :data-dragging="dragging ? '' : undefined"
-            :class="sheetGrip()"
+            :class="sheetGrip({ standalone: !!slots.body })"
             @pointerdown="onPointerDown"
           >
             <div
               v-if="props.handle"
               aria-hidden="true"
               :data-disabled="props.locked ? '' : undefined"
-              :class="sheetHandle()"
+              :class="sheetHandle({ header: props.header && !slots.body })"
             />
-            <div class="flex items-start justify-between gap-4 px-(--hn-panel-p)">
+            <div
+              v-if="props.header && !slots.body"
+              class="flex 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>
+                <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.handle" as-child>
+              <DialogClose v-if="!props.handle && props.closable" as-child>
                 <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
               </DialogClose>
             </div>
           </div>
-          <ScrollArea v-if="$slots.content" class="min-h-0 grow">
-            <div class="px-(--hn-panel-p) py-1">
-              <slot name="content" :close="close" />
+          <slot v-if="slots.body" name="body" :close="close" />
+          <template v-else>
+            <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>