@hina-ui/vue 1.3.1 → 1.5.0

package/src/components/pagination/composables/usePaginationPageTooltip.ts

@@ -0,0 +1,23 @@
+import { computed, ref, type Ref } from 'vue'
+import { useEventListener, useMutationObserver, useResizeObserver } from '@vueuse/core'
+
+export function usePaginationPageTooltip(
+  label: Readonly<Ref<HTMLElement | null>>,
+  blocked: Readonly<Ref<boolean>>,
+) {
+  const content = ref('')
+
+  function measure() {
+    const element = label.value
+    content.value =
+      element && element.scrollWidth > element.clientWidth
+        ? (element.textContent?.trim() ?? '')
+        : ''
+  }
+
+  useResizeObserver(label, measure)
+  useMutationObserver(label, measure, { childList: true, characterData: true, subtree: true })
+  useEventListener(() => label.value?.ownerDocument.fonts, 'loadingdone', measure)
+
+  return computed(() => (blocked.value ? false : content.value))
+}

package/src/components/pagination/composables/usePaginationWindow.ts

@@ -0,0 +1,116 @@
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
+import type ScrollArea from '../../scroll-area/ScrollArea.vue'
+import type { PaginationEllipsisController } from './usePaginationEllipsis'
+
+export function usePaginationWindow(controller: PaginationEllipsisController) {
+  const scroll = shallowRef<InstanceType<typeof ScrollArea>>()
+  const rowsHost = shallowRef<HTMLElement>()
+  const viewport = computed(() => scroll.value?.viewport)
+  const top = ref(0)
+  const height = ref(224)
+  const rowHeight = ref(36)
+  const rowGap = ref(0)
+  const rowStep = computed(() => rowHeight.value + rowGap.value)
+  const activePage = ref(1)
+  const range = controller.displayRange
+  const count = computed(() => (range.value ? range.value.to - range.value.from + 1 : 0))
+  const extent = computed(() => Math.max(0, count.value * rowStep.value - rowGap.value))
+  const rows = computed(() => {
+    if (!range.value) return []
+    const start = Math.max(0, Math.floor(top.value / rowStep.value) - 3)
+    const end = Math.min(count.value, start + Math.ceil(height.value / rowStep.value) + 7)
+    const values = Array.from(
+      { length: Math.max(0, end - start) },
+      (_, i) => start + i + range.value!.from,
+    )
+    if (
+      activePage.value >= range.value.from &&
+      activePage.value <= range.value.to &&
+      !values.includes(activePage.value)
+    )
+      values.push(activePage.value)
+    return values.map(page => ({ page, top: (page - range.value!.from) * rowStep.value }))
+  })
+
+  function measure() {
+    if (viewport.value) height.value = viewport.value.clientHeight || 224
+    const button = rowsHost.value?.querySelector<HTMLElement>('[data-hn-pagination-choice]')
+    if (button) {
+      rowHeight.value = button.offsetHeight
+      rowGap.value = Number.parseFloat(getComputedStyle(rowsHost.value!).rowGap) || 0
+    }
+  }
+
+  async function focusPage(page: number) {
+    if (!range.value || !controller.open.value) return
+    activePage.value = Math.min(range.value.to, Math.max(range.value.from, page))
+    const element = viewport.value
+    if (element) {
+      const offset = (activePage.value - range.value.from) * rowStep.value
+      if (offset < element.scrollTop) element.scrollTop = offset
+      else if (offset + rowHeight.value > element.scrollTop + element.clientHeight)
+        element.scrollTop = offset + rowHeight.value - element.clientHeight
+      top.value = element.scrollTop
+    }
+    await nextTick()
+    rowsHost.value
+      ?.querySelector<HTMLElement>('[data-hn-pagination-choice="' + activePage.value + '"]')
+      ?.focus({ preventScroll: true })
+  }
+
+  function keydown(event: KeyboardEvent) {
+    if (!range.value) return
+    const step = Math.max(1, Math.floor(height.value / rowStep.value))
+    const targets: Record<string, number> = {
+      ArrowDown: activePage.value + 1,
+      ArrowUp: activePage.value - 1,
+      Home: range.value.from,
+      End: range.value.to,
+      PageDown: activePage.value + step,
+      PageUp: activePage.value - step,
+    }
+    const target = targets[event.key]
+    if (target === undefined) return
+    event.preventDefault()
+    event.stopPropagation()
+    void focusPage(target)
+  }
+
+  watch(
+    [range, controller.open],
+    () => {
+      if (!controller.open.value || !range.value) return
+      activePage.value = range.value.from
+      top.value = 0
+      if (viewport.value) viewport.value.scrollTop = 0
+    },
+    { immediate: true },
+  )
+  watch(
+    [controller.focusRequest, viewport],
+    async ([request, element]) => {
+      if (!request || !element || !range.value) return
+      await nextTick()
+      measure()
+      await focusPage(request.edge === 'first' ? range.value.from : range.value.to)
+      controller.focusRequest.value = undefined
+    },
+    { flush: 'post' },
+  )
+  useResizeObserver(
+    () => rowsHost.value?.querySelector<HTMLElement>('[data-hn-pagination-choice]'),
+    measure,
+  )
+  useResizeObserver(rowsHost, measure)
+  useResizeObserver(viewport, measure)
+  useEventListener(
+    viewport,
+    'scroll',
+    () => {
+      top.value = viewport.value?.scrollTop ?? 0
+    },
+    { passive: true },
+  )
+  return { scroll, rowsHost, activePage, extent, rows, keydown }
+}

package/src/components/pagination/context.ts

@@ -0,0 +1,23 @@
+import { inject, provide, type InjectionKey, type Ref } from 'vue'
+import type { PaginationState } from './types'
+
+export interface PaginationContext {
+  state: Readonly<Ref<PaginationState>>
+  blocked: Readonly<Ref<boolean>>
+  size: Readonly<Ref<'sm' | 'md' | 'lg'>>
+  direction: Readonly<Ref<'ltr' | 'rtl'>>
+  siblingCount: Readonly<Ref<number>>
+  showFirstLast: Readonly<Ref<boolean>>
+  options: Readonly<Ref<Array<{ value: number; label: string }>>>
+  update: (page: number) => void
+  resize: (pageSize: number) => void
+}
+
+const key: InjectionKey<PaginationContext> = Symbol('HnPagination')
+
+export const providePagination = (context: PaginationContext) => provide(key, context)
+export function usePaginationContext() {
+  const context = inject(key)
+  if (!context) throw new Error('Pagination parts require a Pagination parent')
+  return context
+}

package/src/components/pagination/pagination.variants.ts

@@ -0,0 +1,32 @@
+import { tv } from '../../lib/tv'
+
+export const pagination = tv({
+  base: 'flex w-full shrink-0 flex-wrap items-center gap-x-4 gap-y-3',
+  variants: {
+    align: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+    },
+  },
+})
+
+export const paginationList = tv({
+  base: 'relative isolate flex max-w-full flex-wrap items-center gap-1',
+})
+
+export const paginationItem = tv({
+  base: 'min-w-0 px-0 tabular-nums [&>span]:min-w-0',
+  variants: {
+    size: {
+      sm: 'size-[var(--hn-control-h-sm)]',
+      md: 'size-[var(--hn-control-h-md)]',
+      lg: 'size-[var(--hn-control-h-lg)]',
+    },
+    selected: { true: 'bg-accent text-accent-on' },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const paginationArrow = tv({ variants: { dir: { ltr: '', rtl: 'rotate-180' } } })

package/src/components/pagination/types.ts

@@ -0,0 +1,19 @@
+export interface PaginationChange {
+  page: number
+  pageSize: number
+}
+
+export interface PaginationState extends PaginationChange {
+  total: number
+  pageCount: number
+  from: number
+  to: number
+}
+
+export type PaginationEntry = { type: 'page'; value: number } | { type: 'ellipsis' }
+export type PaginationSide = 'prev' | 'next'
+export interface PaginationRange {
+  side: PaginationSide
+  from: number
+  to: number
+}

package/src/components/pagination/utils/ranges.ts

@@ -0,0 +1,12 @@
+import type { PaginationEntry, PaginationRange } from '../types'
+
+export function paginationRanges(items: PaginationEntry[]): PaginationRange[] {
+  return items.flatMap((item, index) => {
+    if (item.type !== 'ellipsis') return []
+    const previous = items[index - 1]
+    const next = items[index + 1]
+    if (previous?.type !== 'page' || next?.type !== 'page' || next.value <= previous.value + 1)
+      return []
+    return [{ side: index === 1 ? 'prev' : 'next', from: previous.value + 1, to: next.value - 1 }]
+  })
+}

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/range-slider/RangeSlider.vue

@@ -5,6 +5,7 @@
   import { useFieldControl } from '../form-field/context'
   import { useUiLocale } from '../../locale'
   import { useSliderChrome } from '../slider/composables/useSliderChrome'
+  import { useDirection } from '../../lib/useDirection'
   import SliderHandle from '../slider/SliderHandle.vue'
   import SliderMarks from '../slider/SliderMarks.vue'
   import {
@@ -22,6 +23,7 @@
       min?: number
       max?: number
       step?: number
+      dir?: 'ltr' | 'rtl'
       minSteps?: number
       marks?: Array<{ value: number; label?: string }>
       label?: 'auto' | 'always' | 'none'
@@ -37,6 +39,7 @@
 
   const model = defineModel<[number, number]>()
 
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
   const t = useUiLocale()
   const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
     disabled: () => props.disabled,
@@ -66,6 +69,7 @@
 
 <template>
   <span
+    ref="root"
     data-hn-range-slider
     data-hn-state-group
     role="group"
@@ -73,6 +77,7 @@
     :aria-labelledby="labelledBy"
     :aria-describedby="describedBy"
     :aria-invalid="invalid || undefined"
+    :dir="rootDirection"
     :data-disabled="disabled ? '' : undefined"
     :data-dragging="dragging ? '' : undefined"
     :style="position"
@@ -81,6 +86,7 @@
     v-on="listeners"
   >
     <SliderRoot
+      :dir="direction"
       :model-value="values"
       :min="props.min"
       :max="props.max"

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>

package/src/components/sheet/sheet.variants.ts

@@ -3,17 +3,30 @@ import { tv } from '../../lib/tv'
 export const sheetPanel = tv({
   base: [
     'hn-anim-sheet-bottom hn-transition pointer-events-auto fixed inset-x-0 bottom-0 z-(--hn-z-overlay)',
-    'mx-auto flex max-h-[calc(100dvh-3rem)] w-full flex-col gap-4 sm:max-w-xl',
-    'rounded-t-xl rounded-b-none border-b-0 pt-2 shadow-lg outline-none',
-    'pb-[max(var(--hn-panel-p),env(safe-area-inset-bottom))]',
+    'mx-auto flex max-h-[calc(100dvh-3rem)] w-full flex-col sm:max-w-xl',
+    'rounded-t-xl rounded-b-none border-b-0 shadow-lg outline-none',
     'data-dragging:transition-none',
   ],
+  variants: {
+    padded: { true: 'gap-4 pb-[max(var(--hn-panel-p),env(safe-area-inset-bottom))]' },
+    grip: { true: '', false: '' },
+  },
+  compoundVariants: [
+    { padded: true, grip: true, class: 'pt-2' },
+    { padded: true, grip: false, class: 'pt-(--hn-panel-p)' },
+  ],
+  defaultVariants: { grip: true, padded: true },
 })
 
 export const sheetGrip = tv({
   base: 'flex shrink-0 cursor-grab touch-none flex-col select-none data-dragging:cursor-grabbing',
+  variants: { standalone: { true: 'py-2' } },
 })
 
 export const sheetHandle = tv({
-  base: 'bg-line-strong hn-transition-base mx-auto mb-3 h-1.5 w-10 rounded-full data-disabled:opacity-50',
+  base: 'bg-line-strong hn-transition-base mx-auto h-1.5 w-10 rounded-full data-disabled:opacity-50',
+  variants: {
+    header: { true: 'mb-3', false: '' },
+  },
+  defaultVariants: { header: true },
 })

package/src/components/slider/Slider.vue

@@ -5,6 +5,7 @@
   import { useFieldControl } from '../form-field/context'
   import { useUiLocale } from '../../locale'
   import { useSliderChrome } from './composables/useSliderChrome'
+  import { useDirection } from '../../lib/useDirection'
   import SliderHandle from './SliderHandle.vue'
   import SliderMarks from './SliderMarks.vue'
   import {
@@ -22,6 +23,7 @@
       min?: number
       max?: number
       step?: number
+      dir?: 'ltr' | 'rtl'
       marks?: Array<{ value: number; label?: string }>
       label?: 'auto' | 'always' | 'none'
       format?: (value: number) => string
@@ -36,6 +38,7 @@
 
   const model = defineModel<number>()
 
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
   const t = useUiLocale()
   const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
     disabled: () => props.disabled,
@@ -60,8 +63,10 @@
 
 <template>
   <span
+    ref="root"
     data-hn-slider
     data-hn-state-group
+    :dir="rootDirection"
     :data-disabled="disabled ? '' : undefined"
     :data-dragging="dragging ? '' : undefined"
     :style="position"
@@ -70,6 +75,7 @@
     v-on="listeners"
   >
     <SliderRoot
+      :dir="direction"
       :model-value="values"
       :min="props.min"
       :max="props.max"

package/src/components/slider/slider.variants.ts

@@ -18,6 +18,7 @@ export const sliderRoot = tv({
   base: [
     'bg-line-strong relative flex h-[var(--hn-slider-h)] w-full cursor-pointer touch-none rounded-full select-none',
     'data-disabled:pointer-events-none',
+    '[&[dir=rtl]>[role=slider]]:[--reka-slider-thumb-transform:translateX(50%)]',
   ],
 })
 

package/src/components/tooltip/Tooltip.vue

@@ -1,21 +1,14 @@
 <script setup lang="ts">
-  import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow } from 'reka-ui'
-  import { cn } from '../../lib/cn'
+  import { TooltipRoot, TooltipTrigger } from 'reka-ui'
+  import TooltipBubble from './TooltipBubble.vue'
+  import type { TooltipProps } from './types'
 
   defineOptions({ name: 'HnTooltip' })
 
-  const props = withDefaults(
-    defineProps<{
-      content?: string
-      side?: 'top' | 'right' | 'bottom' | 'left'
-      align?: 'start' | 'center' | 'end'
-      sideOffset?: number
-      open?: boolean
-      disabled?: boolean
-      class?: string
-    }>(),
-    { side: 'top', align: 'center', sideOffset: 8, open: undefined, disabled: false },
-  )
+  const props = withDefaults(defineProps<TooltipProps>(), {
+    open: undefined,
+    disabled: false,
+  })
 </script>
 
 <template>
@@ -23,24 +16,8 @@
     <TooltipTrigger as-child>
       <slot />
     </TooltipTrigger>
-    <TooltipPortal>
-      <TooltipContent
-        :side="props.side"
-        :align="props.align"
-        :side-offset="props.sideOffset"
-        :aria-label="props.content"
-        :update-position-strategy="props.open === undefined ? 'optimized' : 'always'"
-        :class="
-          cn(
-            'hn-anim-pop [--hn-pop-in:var(--hn-duration-fast)] bg-neutral-solid text-neutral-solid-on z-(--hn-z-overlay)',
-            'max-w-xs rounded-md px-2.5 py-1 text-xs shadow-md',
-            props.class,
-          )
-        "
-      >
-        <slot name="content">{{ props.content }}</slot>
-        <TooltipArrow :width="10" :height="5" class="fill-neutral-solid" />
-      </TooltipContent>
-    </TooltipPortal>
+    <TooltipBubble v-bind="props">
+      <slot name="content">{{ props.content }}</slot>
+    </TooltipBubble>
   </TooltipRoot>
 </template>

package/src/components/tooltip/TooltipBubble.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+  import { TooltipPortal, TooltipContent, TooltipArrow } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import type { TooltipProps } from './types'
+
+  defineOptions({ name: 'HnTooltipBubble' })
+
+  const props = withDefaults(defineProps<TooltipProps>(), {
+    side: 'top',
+    align: 'center',
+    sideOffset: 8,
+    open: undefined,
+  })
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      :side="props.side"
+      :align="props.align"
+      :side-offset="props.sideOffset"
+      :aria-label="props.content"
+      :update-position-strategy="props.open === undefined ? 'optimized' : 'always'"
+      :class="
+        cn(
+          'hn-anim-pop [--hn-pop-in:var(--hn-duration-fast)] bg-neutral-solid text-neutral-solid-on z-(--hn-z-overlay)',
+          'max-w-xs rounded-md px-2.5 py-1 text-xs shadow-md',
+          props.class,
+        )
+      "
+    >
+      <slot>{{ props.content }}</slot>
+      <TooltipArrow :width="10" :height="5" class="fill-neutral-solid" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>