@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/container/UiSectionHeader.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { SemanticStatus } from '../../composables/semanticColors'
+import type { UiIcon as UiIconName } from '../../shared/ui-icons'
+import type { EjectChat, EjectLink, EjectMcp } from '../element/eject-menu'
+import { computed, useSlots } from 'vue'
+import { UiChip, UiEjectMenu, UiIcon, UiNavIcon, UiTooltip, ULink } from '#components'
+// Within-a-page section title: icon + heading, optional status badge, info
+// tooltip, description, and a trailing actions area (defaults to a "View all"
+// link when `to` is set), plus optional eject targets.
+const {
+  title,
+  description,
+  icon,
+  badge,
+  badgeStatus = 'neutral',
+  tooltip,
+  to,
+  actionLabel = 'View all',
+  chat,
+  mcp,
+  schema,
+} = defineProps<{
+  title: string
+  description?: string
+  icon?: UiIconName
+  /** Status count/label chip beside the title. */
+  badge?: string | number
+  badgeStatus?: SemanticStatus
+  /** Info tooltip beside the title. */
+  tooltip?: string
+  /** Trailing "View all"-style link target. Overridden by the #actions slot. */
+  to?: string
+  actionLabel?: string
+  /** Optional eject targets rendered beside the caller's actions. */
+  chat?: EjectChat
+  mcp?: EjectMcp
+  schema?: EjectLink
+}>()
+
+const slots = useSlots()
+const hasEject = computed(() => !!(chat || mcp || schema))
+</script>
+
+<template>
+  <div class="flex items-center justify-between gap-3 mb-3">
+    <div class="flex items-center gap-2 min-w-0">
+      <!-- A section that reads through one Source passes its mark here, in
+           place of the decorative icon. -->
+      <slot name="mark">
+        <UiNavIcon v-if="icon" :icon="icon" />
+      </slot>
+      <div class="min-w-0">
+        <h2 class="text-heading text-default flex items-center gap-2">
+          <slot name="title">
+            {{ title }}
+          </slot>
+          <UiChip v-if="badge != null" purpose="status" :status="badgeStatus" tabular>
+            {{ badge }}
+          </UiChip>
+          <UiTooltip v-if="tooltip" :text="tooltip" trigger-as="button">
+            <UiIcon name="note" class="size-3 text-dimmed" aria-hidden="true" />
+          </UiTooltip>
+          <slot name="after-title" />
+        </h2>
+        <p v-if="description" class="text-mini text-muted mt-0.5 leading-snug">
+          {{ description }}
+        </p>
+      </div>
+    </div>
+    <div class="flex items-center gap-2 shrink-0">
+      <slot v-if="slots.actions" name="actions" />
+      <ULink
+        v-else-if="to && !hasEject"
+        :to="to"
+        class="text-xs text-muted hover:text-default transition-colors inline-flex items-center gap-1"
+      >
+        {{ actionLabel }}
+        <UiIcon name="next" class="size-3" aria-hidden="true" />
+      </ULink>
+      <UiEjectMenu v-if="hasEject" :chat="chat" :mcp="mcp" :schema="schema" />
+    </div>
+  </div>
+</template>

package/app/components/container/UiSummaryStrip.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { SemanticStatus } from '../../composables/semanticColors'
+import { NuxtLink, UiIcon } from '#components'
+import { semanticColors } from '../../composables/semanticColors'
+
+// One-line diagnosis rollup — the "collapse a card to a sentence" overflow
+// move (DESIGN.md Composition rules). A dot carries the status, the sentence
+// carries the diagnosis, `to` carries the drill-in. Deliberately one signal
+// per line: no icon container, no eyebrow, no second metadata row. If the
+// content needs more than a sentence + counts, it has outgrown the strip and
+// wants a card or its own page.
+
+const { status = 'neutral', title, to, linkLabel = 'View all' } = defineProps<{
+  status?: SemanticStatus
+  /** The diagnosis sentence — lead with the noun and the number ("7 broken internal links"). */
+  title: string
+  /** Drill-in destination. When set the whole row is a NuxtLink with a trailing chevron (canonical clickable-row pattern). */
+  to?: string
+  linkLabel?: string
+}>()
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLink : 'div'"
+    :to="to || undefined"
+    class="group flex items-center gap-2.5 rounded-lg border border-default bg-[var(--ui-bg-elevated)]/5 px-3 py-2 min-h-11 sm:min-h-0"
+    :class="to && 'hover:bg-[var(--ui-bg-elevated)]/50 transition-colors focus-visible:ring-2 focus-visible:ring-primary outline-none'"
+  >
+    <span class="size-2 rounded-full shrink-0" :class="semanticColors[status].dot" aria-hidden="true" />
+    <slot name="leading" />
+    <span class="text-sm text-default truncate">{{ title }}</span>
+    <span class="flex-1" />
+    <slot name="meta" />
+    <template v-if="to">
+      <span class="text-xs text-muted group-hover:text-default transition-colors shrink-0">{{ linkLabel }}</span>
+      <UiIcon name="chevron-right" class="size-3.5 text-dimmed group-hover:text-default transition-colors shrink-0" aria-hidden="true" />
+    </template>
+  </component>
+</template>

package/app/components/container/UiToast.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { SemanticStatus } from '../../composables/semanticColors'
+import { useElementSize } from '@vueuse/core'
+import { computed, useTemplateRef, watch } from 'vue'
+import { UiButton, UiIcon } from '#components'
+import { semanticColors } from '../../composables/semanticColors'
+
+// A single toast card. Pure presentation: owns our chrome (neutral surface;
+// semantic accent rides the icon + 1px top bar + corner bloom only, per the
+// color-budget rule — mirrors UiAlert) plus the auto-dismiss progress bar.
+// All positioning / stacking / motion / timers / drag live in UiToaster, which
+// renders this inside a `<motion.li>`. Rendered exclusively from the shared
+// useToast() queue, so every existing `toast.add(...)` call site keeps working.
+
+export interface ToastAction {
+  label: string
+  icon?: string
+  to?: string
+  onClick?: (e: MouseEvent) => void
+  /** Visual emphasis. `primary` = filled, `neutral` = quiet. */
+  color?: 'primary' | 'neutral'
+}
+
+export interface UiToastProps {
+  /** Heading text (string or a render component). */
+  title?: string | Component
+  /** Body text (string or a render component). */
+  description?: string | Component
+  /** Semantic status — drives accent + default icon. Wins over `color`. */
+  status?: SemanticStatus
+  /** Nuxt UI color compatibility for existing `toast.add({ color })` call sites. */
+  color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+  /** Icon override. Defaults to the status icon. */
+  icon?: string
+  /** Inline action buttons. */
+  actions?: ToastAction[]
+  /**
+   * Bug-report handler. When set, failure toasts (error/warning) that carry no
+   * action of their own get a "Report bug" button. Wired by the app (the
+   * design system must not reach for the feedback drawer itself).
+   */
+  reportBug?: (toast: { title?: string, description?: string }) => void
+  /** Show the close button. */
+  close?: boolean
+  /** Auto-dismiss progress 0..1 (remaining), or false to hide the bar. */
+  progress?: number | false
+  /** Collapsed back card — fade content so the deck reads as peeking cards. */
+  peek?: boolean
+}
+
+const {
+  title,
+  description,
+  status,
+  color,
+  icon,
+  actions,
+  reportBug,
+  close = true,
+  progress = false,
+  peek = false,
+} = defineProps<UiToastProps>()
+
+const emit = defineEmits<{
+  close: []
+  /** Reports the card's natural height to the toaster for fan-out offsets. */
+  measure: [number]
+}>()
+
+// Map legacy Nuxt UI `color` to our semantic vocabulary. `status` wins if set.
+const COLOR_TO_STATUS: Record<NonNullable<UiToastProps['color']>, SemanticStatus> = {
+  success: 'success',
+  info: 'info',
+  warning: 'warning',
+  error: 'error',
+  neutral: 'neutral',
+  primary: 'info',
+  secondary: 'neutral',
+}
+
+const defaultIcons: Record<SemanticStatus, string> = {
+  error: 'caution',
+  warning: 'warning',
+  info: 'note',
+  success: 'success',
+  neutral: 'circle-dash',
+}
+
+const resolvedStatus = computed<SemanticStatus>(() => status ?? (color ? COLOR_TO_STATUS[color] : 'neutral'))
+const colors = computed(() => semanticColors[resolvedStatus.value])
+const resolvedIcon = computed(() => icon || defaultIcons[resolvedStatus.value])
+
+// Anything the user sees fail should be one click from a bug report, same as
+// the page-level error boundary. A toast that already carries its own action
+// (Upgrade, Retry) keeps it — one CTA per toast, per the color/action budget.
+const resolvedActions = computed<ToastAction[]>(() => {
+  if (actions?.length)
+    return actions
+  if (!reportBug || (resolvedStatus.value !== 'error' && resolvedStatus.value !== 'warning'))
+    return []
+  return [{
+    label: 'Report bug',
+    icon: 'bug',
+    color: 'neutral',
+    onClick: () => reportBug({
+      title: typeof title === 'string' ? title : undefined,
+      description: typeof description === 'string' ? description : undefined,
+    }),
+  }]
+})
+
+// Measure natural height reactively (ResizeObserver) so the toaster's fan-out
+// offsets stay correct even after fonts load / content reflows. A one-shot
+// onMounted getBoundingClientRect reads 0 inside the portal and collapses the
+// fan — useElementSize avoids that.
+const root = useTemplateRef<HTMLElement>('root')
+const { height } = useElementSize(root)
+watch(height, (h) => {
+  if (h)
+    emit('measure', h)
+}, { immediate: true })
+
+function onAction(action: ToastAction, e: MouseEvent) {
+  e.stopPropagation()
+  action.onClick?.(e)
+}
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="group relative w-full overflow-hidden rounded-xl border border-default bg-default/90 ring-1 ring-black/5 backdrop-blur-md dark:ring-white/5"
+    style="box-shadow: var(--elevation-overlay)"
+  >
+    <!-- Gradient accent bar — top edge, crisp at left, fades right (mirrors UiAlert). -->
+    <div
+      class="pointer-events-none absolute inset-x-0 top-0 h-px opacity-40"
+      :class="colors.dot"
+      style="mask-image: linear-gradient(to right, black 0%, black 20%, transparent 80%); -webkit-mask-image: linear-gradient(to right, black 0%, black 20%, transparent 80%);"
+      aria-hidden="true"
+    />
+    <!-- Corner bloom — faint radial light source. -->
+    <div
+      class="pointer-events-none absolute -right-8 -top-8 size-24 rounded-full opacity-10 blur-2xl"
+      :class="colors.dot"
+      aria-hidden="true"
+    />
+
+    <!-- Content — fades out on collapsed back cards so the deck reads as a tidy stack. -->
+    <div
+      class="flex items-start gap-3 p-3.5 pr-9 transition-opacity duration-200"
+      :class="peek ? 'opacity-0' : 'opacity-100'"
+    >
+      <UiIcon
+        v-if="resolvedIcon"
+        :name="resolvedIcon"
+        class="mt-0.5 size-4 shrink-0"
+        :class="colors.text"
+        aria-hidden="true"
+      />
+
+      <div class="min-w-0 flex-1">
+        <p
+          v-if="title"
+          class="text-sm font-medium leading-snug text-default"
+        >
+          <component :is="title" v-if="typeof title === 'object'" />
+          <template v-else>
+            {{ title }}
+          </template>
+        </p>
+        <div
+          v-if="description"
+          class="text-xs leading-snug text-muted"
+          :class="{ 'mt-0.5': title }"
+        >
+          <component :is="description" v-if="typeof description === 'object'" />
+          <template v-else>
+            {{ description }}
+          </template>
+        </div>
+
+        <div
+          v-if="resolvedActions.length"
+          class="mt-2.5 flex flex-wrap gap-2"
+        >
+          <UiButton
+            v-for="(action, index) in resolvedActions"
+            :key="index"
+            size="xs"
+            :purpose="action.color === 'primary' ? 'cta' : 'secondary'"
+            :icon="action.icon"
+            :label="action.label"
+            :to="action.to"
+            class="min-h-11 sm:min-h-0"
+            @pointerdown.stop
+            @click="onAction(action, $event)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Dismiss — a plain control (not the motion UiButton, whose width-measure +
+         overflow clip mis-render a tiny absolute icon). 24px hit target, icon
+         centered; it rests at text-dimmed and strengthens on hover/focus. No
+         rest opacity: at 60% the icon measured 2.7:1, under the 3:1 a control
+         needs (WCAG 1.4.11). The focus ring is primary for the same reason. `pointerdown.stop` so it never starts a card drag;
+         `click.stop` so it never triggers the card's onClick. -->
+    <button
+      v-if="close && !peek"
+      type="button"
+      class="absolute right-1.5 top-1.5 inline-flex size-6 items-center justify-center rounded-md text-dimmed transition hover:bg-elevated hover:text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+      aria-label="Dismiss"
+      @pointerdown.stop
+      @click.stop="emit('close')"
+    >
+      <UiIcon name="close" class="size-3.5" aria-hidden="true" />
+    </button>
+
+    <!-- Auto-dismiss progress — width = remaining fraction; hidden on back cards. -->
+    <div
+      v-if="progress !== false && !peek"
+      class="pointer-events-none absolute inset-x-0 bottom-0 h-0.5 origin-left opacity-50"
+      :class="colors.dot"
+      :style="{ width: `${Math.max(0, Math.min(1, progress)) * 100}%` }"
+      aria-hidden="true"
+    />
+  </div>
+</template>

package/app/components/container/UiToaster.vue

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import type { UiToastProps } from './UiToast.vue'
+import { useMounted, useRafFn } from '@vueuse/core'
+import { AnimatePresence, motion, useReducedMotion } from 'motion-v'
+import { computed, reactive, ref, watch } from 'vue'
+import { useToast } from '#imports'
+import { springs } from '../../shared/motion'
+import UiToast from './UiToast.vue'
+
+// Sonner/Linear-style toaster. Resting state is a COLLAPSED peek-deck: only the
+// newest card is fully readable, the rest scale down + peek a few px behind it.
+// Hovering the deck fans it into a readable list and pauses every timer. motion-v
+// drives the per-depth transforms (enter / make-room / exit / fan) off reactive
+// targets, so adding/removing a toast re-stacks the deck automatically. We reuse
+// Nuxt UI's shared useToast() queue, so every existing `toast.add(...)` keeps
+// working unchanged. (Interaction model: brand-kit /toasts → "Fire 5 at once".)
+
+export interface UiToasterProps {
+  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+  /** Max cards rendered in the deck (older ones collapse into a "+N" pill). */
+  max?: number
+  /** Default auto-dismiss in ms; a per-toast `duration` overrides. 0 = sticky. */
+  duration?: number
+  /** Passed to every card: adds "Report bug" to failure toasts. See UiToast. */
+  reportBug?: UiToastProps['reportBug']
+}
+
+const {
+  position = 'bottom-right',
+  max = 3,
+  duration = 5000,
+  reportBug,
+} = defineProps<UiToasterProps>()
+
+const { toasts, remove } = useToast()
+const mounted = useMounted()
+const reduced = useReducedMotion()
+
+// Deck geometry.
+const PEEK = 14 // px each back card peeks above the front
+const SCALE_STEP = 0.05 // scale shrink per depth
+const GAP = 14 // px gap between cards when fanned
+const FALLBACK_H = 72 // height used before a card has been measured
+
+const isTop = computed(() => position.startsWith('top'))
+const expanded = ref(false)
+
+// Newest last in the queue; cap to `max` (keep the most recent). Within
+// `visible`, index 0 = oldest, last = newest = deck front (depth 0).
+const visible = computed(() => toasts.value.slice(-max))
+const overflow = computed(() => Math.max(0, toasts.value.length - visible.value.length))
+
+// Per-id measured natural heights, reported by each UiToast.
+const heights = reactive<Record<string, number>>({})
+function setHeight(id: string | number, h: number) {
+  heights[String(id)] = h
+}
+function heightOf(id: string | number | undefined): number {
+  return (id != null && heights[String(id)]) || FALLBACK_H
+}
+
+// Placement (transform target + chrome flags) per visible toast. motion-v tweens
+// between successive targets, so a queue change animates the whole deck.
+const placements = computed(() => {
+  const list = visible.value
+  const n = list.length
+  // depth 0 = front (newest = last). heightAtDepth indexes by depth.
+  const heightAtDepth = (depth: number) => heightOf(list[n - 1 - depth]?.id)
+
+  // Cumulative bottom offsets for the fanned (expanded) state.
+  const expandedOffset: number[] = []
+  let acc = 0
+  for (let d = 0; d < n; d++) {
+    expandedOffset[d] = acc
+    acc += heightAtDepth(d) + GAP
+  }
+  const frontH = heightAtDepth(0)
+  const dir = isTop.value ? 1 : -1 // grow downward for top-anchored, upward otherwise
+
+  return list.map((t, idx) => {
+    const depth = n - 1 - idx
+    const ownH = heightOf(t.id)
+    if (expanded.value) {
+      return {
+        depth,
+        peek: false,
+        z: 100 - depth,
+        target: {
+          y: dir * expandedOffset[depth]!,
+          scale: 1,
+          opacity: 1,
+          height: ownH,
+        },
+      }
+    }
+    return {
+      depth,
+      peek: depth > 0,
+      z: 100 - depth,
+      target: {
+        y: dir * depth * PEEK,
+        scale: Number((1 - depth * SCALE_STEP).toFixed(3)),
+        opacity: depth < max ? 1 : 0,
+        height: depth > 0 ? frontH : ownH,
+      },
+    }
+  })
+})
+
+// Region height — sized so the whole deck/fan is one continuous hover zone
+// (prevents fan-out flicker as cards reposition out from under the pointer).
+const regionHeight = computed(() => {
+  const n = visible.value.length
+  if (!n)
+    return 0
+  if (expanded.value) {
+    return visible.value.reduce((sum, t) => sum + heightOf(t.id) + GAP, 0)
+  }
+  const front = heightOf(visible.value[n - 1]!.id)
+  return front + (Math.min(n, max) - 1) * PEEK
+})
+
+// ── Timers — one rAF loop, pauses entirely while the deck is fanned/hovered ──
+const elapsed = reactive<Record<string, number>>({})
+const progress = reactive<Record<string, number>>({})
+const dragging = reactive<Record<string, boolean>>({})
+
+function durationOf(t: (typeof toasts.value)[number]): number {
+  const d = (t as { duration?: number }).duration
+  return typeof d === 'number' ? d : duration
+}
+
+useRafFn(({ delta }) => {
+  if (expanded.value)
+    return // fanned → all timers paused
+  // Only the front (primary) toast counts down. Buried cards hold their full
+  // duration and start their own timer once promoted to the front — so a toast
+  // never expires while hidden behind the deck (timers stack, they don't race).
+  const list = visible.value
+  const front = list.at(-1)
+  if (!front)
+    return
+  const id = String(front.id)
+  const total = durationOf(front)
+  if (!total || total <= 0 || dragging[id])
+    return
+  elapsed[id] = (elapsed[id] || 0) + delta
+  progress[id] = Math.max(0, 1 - elapsed[id]! / total)
+  if (elapsed[id]! >= total)
+    remove(front.id)
+})
+
+// Prune timer bookkeeping for toasts that have left the queue.
+watch(visible, (list) => {
+  const live = new Set(list.map(t => String(t.id)))
+  for (const id of Object.keys(elapsed)) {
+    if (!live.has(id)) {
+      delete elapsed[id]
+      delete progress[id]
+      delete dragging[id]
+      delete heights[id]
+    }
+  }
+})
+
+function progressFor(t: (typeof toasts.value)[number]): number | false {
+  return durationOf(t) > 0 ? (progress[String(t.id)] ?? 1) : false
+}
+
+// ── Drag to dismiss ──
+function canDrag(depth: number): boolean {
+  return expanded.value || depth === 0
+}
+function onDragStart(id: string | number) {
+  dragging[String(id)] = true
+}
+function onDragEnd(id: string | number, info: { offset: { x: number }, velocity: { x: number } }) {
+  dragging[String(id)] = false
+  if (info.offset.x > 100 || info.velocity.x > 600)
+    remove(id)
+}
+
+// Whitelist the fields UiToast consumes so queue bookkeeping never hits the DOM.
+function toastBind(t: (typeof toasts.value)[number]): Partial<UiToastProps> {
+  const x = t as unknown as Record<string, unknown>
+  return {
+    title: x.title as UiToastProps['title'],
+    description: x.description as UiToastProps['description'],
+    icon: x.icon as UiToastProps['icon'],
+    color: x.color as UiToastProps['color'],
+    status: x.status as UiToastProps['status'],
+    actions: x.actions as UiToastProps['actions'],
+    close: x.close as UiToastProps['close'],
+  }
+}
+
+const stackTransition = computed(() =>
+  reduced.value
+    ? { duration: 0 }
+    : { default: springs.snappy, opacity: { duration: 0.25 }, height: springs.smooth },
+)
+
+const posClass = computed(() => ({
+  'top-left': 'top-4 left-4',
+  'top-center': 'top-4 left-1/2 -translate-x-1/2',
+  'top-right': 'top-4 right-4',
+  'bottom-left': 'bottom-4 left-4',
+  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+  'bottom-right': 'bottom-4 right-4',
+}[position]))
+</script>
+
+<template>
+  <Teleport v-if="mounted" to="body">
+    <!-- Region wrapper owns the hover zone + landmark role; keeping `role` off the
+         <ol> preserves its list semantics so the <li> aren't orphaned (a11y). -->
+    <div
+      class="pointer-events-auto fixed z-[100] w-[calc(100vw-2rem)] sm:w-96"
+      :class="posClass"
+      :style="{ height: `${regionHeight}px` }"
+      role="region"
+      aria-label="Notifications"
+      @mouseenter="expanded = true"
+      @mouseleave="expanded = false"
+      @focusin="expanded = true"
+      @focusout="(e: FocusEvent) => { if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node | null)) expanded = false }"
+    >
+      <ol class="absolute inset-0 m-0 list-none p-0" aria-live="polite">
+        <AnimatePresence :initial="false">
+          <motion.li
+            v-for="(t, idx) in visible"
+            :key="t.id"
+            class="absolute inset-x-0 overflow-hidden"
+            :class="isTop ? 'top-0' : 'bottom-0'"
+            style="transform-origin: bottom center; will-change: transform;"
+            :style="{ zIndex: placements[idx]!.z }"
+            :initial="reduced ? false : { opacity: 0, y: isTop ? -40 : 40, scale: 0.9, height: placements[idx]!.target.height }"
+            :animate="placements[idx]!.target"
+            :exit="reduced ? { opacity: 0 } : { opacity: 0, scale: 0.9, transition: { duration: 0.2 } }"
+            :transition="stackTransition"
+            :drag="canDrag(placements[idx]!.depth) ? 'x' : false"
+            :drag-snap-to-origin="true"
+            :drag-elastic="{ left: 0.15, right: 0.6 }"
+            :drag-constraints="{ left: 0, right: 0 }"
+            @drag-start="onDragStart(t.id)"
+            @drag-end="(_e: PointerEvent, info: { offset: { x: number }, velocity: { x: number } }) => onDragEnd(t.id, info)"
+          >
+            <UiToast
+              v-bind="toastBind(t)"
+              :report-bug="reportBug"
+              :peek="placements[idx]!.peek"
+              :progress="progressFor(t)"
+              @measure="(h: number) => setHeight(t.id, h)"
+              @close="remove(t.id)"
+            />
+          </motion.li>
+        </AnimatePresence>
+      </ol>
+
+      <!-- "+N more" pill — sibling of the <ol> (never inside it). Sits just clear
+           of the deck: above it for bottom-anchored, below it for top-anchored. -->
+      <div
+        v-if="overflow > 0 && !expanded"
+        class="pointer-events-none absolute right-2 text-mini font-medium text-dimmed"
+        :class="isTop ? 'bottom-0 translate-y-full pt-1' : 'top-0 -translate-y-full pb-1'"
+      >
+        +{{ overflow }} more
+      </div>
+    </div>
+  </Teleport>
+</template>