@leavepulse/ui 0.69.0 → 0.70.0

package/src/components/LpCopyButton.vue

@@ -0,0 +1,185 @@
+<script lang="ts">
+// Attributes (class, aria-*, data-*) reach the button itself, merged by LpButton.
+export default { inheritAttrs: false }
+
+export interface CopyButtonLabels extends Record<string, string> {
+  copy: string
+  copied: string
+  failed: string
+}
+
+/**
+ * What to copy: the text, or a function that produces it when clicked. A
+ * `Blob` is copied as itself (an image as PNG, see useClipboard).
+ */
+export type CopyValue =
+  | string
+  | number
+  | Blob
+  | (() => string | number | Blob | Promise<string | number | Blob>)
+</script>
+
+<script setup lang="ts">
+/*
+ * The one copy button: an icon that turns into a tick for a moment, a tip
+ * that says "Copy" and then "Copied", and nothing thrown when the clipboard
+ * refuses.
+ *
+ * Several kit components drew their own (the code block's header, the
+ * toaster's message copy, the lightbox's image copy), each with its own icon
+ * swap that snapped from one glyph to the other. This one cross-fades the two
+ * glyphs in place — the copy icon shrinks and turns away as the tick grows in
+ * — so the confirmation reads as the button answering, not as a redraw.
+ *
+ * `value` may be a function, sync or async, for text that is expensive or
+ * secret enough to fetch only when someone actually asks for it (a token
+ * revealed by the server on demand). While it resolves the button shows its
+ * spinner. Note the browser's clipboard wants the write to stay close to the
+ * click; a getter that takes seconds may be refused, which surfaces as the
+ * `failed` state and the `error` event rather than as an exception.
+ */
+import { computed, ref, useAttrs } from "vue"
+import { useClipboard } from "../composables/useClipboard"
+import { useLabels } from "../composables/useLpConfig"
+import LpButton from "./LpButton.vue"
+import LpIcon from "./LpIcon.vue"
+import LpTooltip from "./LpTooltip.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** The text to copy, or a (possibly async) function that returns it on click. */
+    value: CopyValue
+    /** LpButton's sizes, so it sits in a toolbar of buttons at the same height. */
+    size?: "xs" | "sm" | "md" | "lg"
+    /**
+     * Glyph size in px, for a toolbar whose other icons are drawn at their
+     * own size (the lightbox's 18px row). Defaults to what suits `size`.
+     */
+    iconSize?: number
+    /** LpButton's look. `ghost` by default: a copy button is a helper beside something, not a call to action. */
+    variant?: "solid" | "action" | "outline" | "soft" | "ghost" | "muted"
+    /**
+     * Visible text beside the icon. Without it the button is a square icon
+     * button and the tip names it.
+     */
+    label?: string
+    /** A toast on success too, for a copy whose button is about to leave the screen (a menu, a closing dialog). */
+    toast?: string | false
+    /**
+     * Show the tick now, for a copy made some other way: a Ctrl+C shortcut on
+     * the row, a "Copy" item in its menu. The button then confirms it too, so
+     * there is one place that says the clipboard holds this value.
+     */
+    copied?: boolean
+    disabled?: boolean
+    /** Where the tip opens. */
+    side?: "top" | "right" | "bottom" | "left"
+    labels?: Partial<CopyButtonLabels>
+  }>(),
+  { size: "sm", variant: "ghost", toast: false, side: "top" },
+)
+
+const emit = defineEmits<{
+  /**
+   * The value reached the clipboard: its text, or for a `Blob` an empty
+   * string and the blob itself second, so handlers written for text keep
+   * their `(text: string)` shape.
+   */
+  (e: "copied", text: string, blob?: Blob): void
+  /** The getter threw or the clipboard refused. */
+  (e: "error", error: unknown): void
+}>()
+
+const text = useLabels<CopyButtonLabels>(
+  "copyButton",
+  { copy: "Copy", copied: "Copied", failed: "Couldn't copy" },
+  () => props.labels,
+)
+
+const { copy, copied: justCopied } = useClipboard()
+const busy = ref(false)
+const failed = ref(false)
+let failTimer: ReturnType<typeof setTimeout> | undefined
+
+const state = computed<"idle" | "copied" | "failed">(() =>
+  failed.value ? "failed" : justCopied.value || props.copied ? "copied" : "idle",
+)
+
+async function run() {
+  if (busy.value || props.disabled) return
+  let value: string | Blob
+  try {
+    let raw = props.value
+    if (typeof raw === "function") {
+      busy.value = true
+      raw = await raw()
+    }
+    value = raw instanceof Blob ? raw : String(raw)
+  } catch (error) {
+    busy.value = false
+    fail(error)
+    return
+  }
+  busy.value = false
+  if (await copy(value, { toast: props.toast })) {
+    failed.value = false
+    if (value instanceof Blob) emit("copied", "", value)
+    else emit("copied", value)
+  } else fail(new Error("Clipboard unavailable"))
+}
+
+function fail(error: unknown) {
+  failed.value = true
+  clearTimeout(failTimer)
+  failTimer = setTimeout(() => (failed.value = false), 1800)
+  emit("error", error)
+}
+
+const tip = computed(() =>
+  state.value === "copied" ? text.value.copied : state.value === "failed" ? text.value.failed : text.value.copy,
+)
+const iconSize = computed(() => props.iconSize ?? { xs: 13, sm: 14, md: 16, lg: 16 }[props.size])
+const attrs = useAttrs()
+</script>
+
+<template>
+  <LpTooltip :content="tip" :label="!label" :side="side">
+    <LpButton
+      v-bind="attrs"
+      :variant="variant"
+      :size="size"
+      :square="!label"
+      :disabled="disabled"
+      :loading="busy"
+      :data-state="state"
+      @click="run"
+    >
+      <span class="relative inline-grid shrink-0 place-items-center" :style="{ width: `${iconSize}px`, height: `${iconSize}px` }">
+        <!-- Both glyphs are always there and trade places, so the change is a
+             morph in one spot rather than one icon replacing another. -->
+        <LpIcon
+          name="lucide:copy"
+          :size="iconSize"
+          class="lp-glyph-swap col-start-1 row-start-1"
+          :data-on="state === 'idle' || undefined"
+        />
+        <LpIcon
+          name="lucide:check"
+          :size="iconSize"
+          class="lp-glyph-swap col-start-1 row-start-1 text-action"
+          :data-on="state === 'copied' || undefined"
+        />
+        <LpIcon
+          name="lucide:x"
+          :size="iconSize"
+          class="lp-glyph-swap col-start-1 row-start-1 text-danger"
+          :data-on="state === 'failed' || undefined"
+        />
+      </span>
+      <span v-if="label">{{ label }}</span>
+    </LpButton>
+  </LpTooltip>
+  <!-- The tip only speaks on hover/focus; the result is announced either way. -->
+  <span class="sr-only" role="status" aria-live="polite">{{ state === "idle" ? "" : tip }}</span>
+</template>
+

package/src/components/LpCountdown.vue

@@ -0,0 +1,308 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * Time left until something: "resend the code in 0:42", "maintenance in
+ * 2d 3h", "the lobby closes in 4:59".
+ *
+ *   Resend in <LpCountdown :seconds="45" @done="canResend = true" />
+ *   <LpCountdown :to="window.startsAt" format="units" />
+ *   <LpCountdown :seconds="300" progress="ring" :urgent-at="30" />
+ *
+ * What it takes care of so the app does not:
+ *
+ *   - the format adapts: a clock under an hour, the two largest units above
+ *     it (timeSpan.ts), and it rounds up, so 0:00 means "now", not "nearly";
+ *   - no drift: the remaining time is always deadline − now, read from the
+ *     clock on each tick (useNow), and ticks land on the second boundary; a
+ *     tab left in the background stops ticking and is right again the
+ *     moment it is looked at;
+ *   - digits roll individually (LpRollingText), so 0:42 → 0:41 moves one
+ *     digit and a minute rolling over moves three;
+ *   - role="timer", which is silent by design, plus a polite announcement at
+ *     round marks (10 minutes, 1 minute, 10 seconds…) and at the end — a
+ *     screen reader hears the countdown matter, not every second of it.
+ */
+import { computed, ref, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useNow } from "../composables/useNow"
+import LpProgress from "./LpProgress.vue"
+import LpRollingText from "./LpRollingText.vue"
+import LpShift from "./LpShift.vue"
+import {
+  ceilToSecond,
+  crossedMilestone,
+  DEFAULT_MILESTONES,
+  DEFAULT_UNIT_LABELS,
+  formatTime,
+  msToNextSecond,
+  padPart,
+  resolveFormat,
+  timeParts,
+  toEpoch,
+  type TimeFormat,
+  type TimeUnitLabels,
+} from "./timeSpan"
+
+export type CountdownLabels = {
+  /** Spoken at a milestone; `{time}` is the time left in words. */
+  left: string
+  /** Spoken when the time is up, and the timer's name from then on. */
+  done: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** The moment to count down to. Takes precedence over `seconds`. */
+    to?: Date | string | number
+    /**
+     * Count down this many seconds from when the countdown mounts — or from
+     * when this value changes, or `restart()` is called. For "try again in 45
+     * s", where the app has a wait rather than a moment.
+     */
+    seconds?: number
+    /**
+     * `to` only: when the wait began, so the ring or bar can show how much of
+     * it is left. Without it a `to` countdown draws no progress.
+     */
+    from?: Date | string | number
+    /** `auto` is a clock under an hour and units above it. */
+    format?: TimeFormat
+    /** Units format: how many places to keep ("2d 3h" is 2). */
+    places?: number
+    /**
+     * Freeze the count. A `seconds` countdown resumes where it stopped; a `to`
+     * countdown is tied to a real moment, so it resumes at the true time left.
+     */
+    paused?: boolean
+    /** Draw the time left as a ring around the digits, or a bar under them. */
+    progress?: "ring" | "bar"
+    /** Ring only: outer diameter in px. */
+    ringSize?: number
+    /** Seconds left at which it turns danger: the end is close enough to act on. */
+    urgentAt?: number
+    /**
+     * Announce the time left at these marks (ms remaining) and at the end.
+     * `false` keeps it silent apart from what the timer role itself offers.
+     */
+    announce?: boolean | number[]
+    labels?: Partial<CountdownLabels>
+  }>(),
+  { format: "auto", places: 2, ringSize: 56, announce: true },
+)
+
+const emit = defineEmits<{
+  /** The time is up. Fires once per countdown (again after a restart). */
+  done: []
+}>()
+
+defineSlots<{
+  /** Replaces the digits once the time is up: a "Resend" button, "Live now". */
+  done?: () => unknown
+}>()
+
+const text = useLabels<CountdownLabels>("countdown", { left: "{time} left", done: "Time is up" }, () => props.labels)
+const units = useLabels<TimeUnitLabels>("time", DEFAULT_UNIT_LABELS)
+
+/* What the polite live region last said. */
+const announcement = ref("")
+
+/* ── The deadline, and the start it is measured from. */
+const startedAt = ref(Date.now())
+
+const deadline = computed(() => {
+  const to = toEpoch(props.to)
+  if (!Number.isNaN(to)) return to
+  if (typeof props.seconds === "number" && Number.isFinite(props.seconds)) return startedAt.value + props.seconds * 1000
+  return Number.NaN
+})
+
+const total = computed(() => {
+  if (!Number.isNaN(toEpoch(props.to))) {
+    const from = toEpoch(props.from)
+    return Number.isNaN(from) ? Number.NaN : deadline.value - from
+  }
+  return typeof props.seconds === "number" ? props.seconds * 1000 : Number.NaN
+})
+
+/*
+ * Pausing freezes the remaining time; resuming a `seconds` countdown moves
+ * its start forward by the pause, so the wait continues where it stood.
+ */
+const frozen = ref<number | null>(null)
+let pausedAt = 0
+
+watch(
+  () => props.paused,
+  (paused) => {
+    if (paused) {
+      pausedAt = Date.now()
+      frozen.value = Math.max(0, deadline.value - pausedAt)
+    } else if (frozen.value !== null) {
+      if (Number.isNaN(toEpoch(props.to))) startedAt.value += Date.now() - pausedAt
+      frozen.value = null
+    }
+  },
+  { immediate: true },
+)
+
+const running = ref(true)
+const now = useNow(() => running.value && !props.paused && Number.isFinite(deadline.value), {
+  nextIn: (at) => msToNextSecond(deadline.value - at),
+})
+
+const remaining = computed(() => {
+  if (frozen.value !== null) return frozen.value
+  const left = deadline.value - now.value
+  return Number.isFinite(left) ? Math.max(0, left) : 0
+})
+
+const shown = computed(() => ceilToSecond(remaining.value))
+const isDone = computed(() => !Number.isNaN(deadline.value) && remaining.value <= 0)
+
+watch(isDone, (done) => { running.value = !done }, { immediate: true })
+
+/* ── The end, once per countdown. */
+let fired = false
+watch(
+  isDone,
+  (done) => {
+    if (!done) { fired = false; return }
+    if (fired) return
+    fired = true
+    emit("done")
+    if (props.announce !== false) announcement.value = text.value.done
+  },
+  { immediate: true },
+)
+
+/** Starts a `seconds` countdown again from the full wait. */
+function restart() {
+  // Cleared so the next "time is up" is a change the live region announces.
+  announcement.value = ""
+  startedAt.value = Date.now()
+  now.value = startedAt.value
+  if (props.paused) {
+    pausedAt = startedAt.value
+    frozen.value = Math.max(0, deadline.value - pausedAt)
+  }
+}
+
+watch(() => props.seconds, () => { if (Number.isNaN(toEpoch(props.to))) restart() })
+
+defineExpose({ restart, remaining })
+
+/* ── What is printed and what is said. */
+const parts = computed(() => timeParts(shown.value, props.format, units.value, props.places))
+const clock = computed(() => resolveFormat(shown.value, props.format) === "clock")
+
+/*
+ * Each part's digits, keyed from the right: a part that gains a digit (9:59 →
+ * 10:00) grows it on the left without re-keying the ones that were there.
+ */
+const cells = computed(() =>
+  parts.value.map((part) => {
+    const digits = padPart(part).split("")
+    return { part, digits: digits.map((d, i) => ({ d, key: `${part.unit}${digits.length - i}` })) }
+  }),
+)
+
+const spokenTime = computed(() => formatTime(shown.value, "units", units.value, 2))
+
+const milestones = computed(() => (Array.isArray(props.announce) ? props.announce : DEFAULT_MILESTONES))
+
+watch(remaining, (after, before) => {
+  if (props.announce === false || before === undefined || props.paused) return
+  const mark = crossedMilestone(before, after, milestones.value)
+  if (mark !== null && after > 0) {
+    announcement.value = text.value.left.replace("{time}", formatTime(ceilToSecond(after), "units", units.value, 2))
+  }
+})
+
+const urgent = computed(() =>
+  props.urgentAt !== undefined && !isDone.value && remaining.value <= props.urgentAt * 1000,
+)
+
+const fraction = computed(() => {
+  if (!(total.value > 0)) return null
+  return Math.max(0, Math.min(1, remaining.value / total.value))
+})
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  props.progress === "bar"
+    ? "flex w-full min-w-0 flex-col gap-1.5"
+    : "relative inline-flex items-center justify-center align-baseline",
+)
+</script>
+
+<template>
+  <span
+    :class="rootClass"
+    :data-urgent="urgent || undefined"
+    :data-done="isDone || undefined"
+    v-bind="rest"
+  >
+    <LpProgress
+      v-if="progress === 'ring' && fraction !== null"
+      variant="ring"
+      :value="fraction * 100"
+      :size="ringSize"
+      :thickness="Math.max(3, Math.round(ringSize / 14))"
+      :tone="urgent ? 'danger' : 'brand'"
+      :animate-on-mount="false"
+      :duration="1000"
+      aria-hidden="true"
+    />
+    <span
+      role="timer"
+      :aria-label="isDone ? text.done : spokenTime"
+      class="inline-flex items-baseline font-mono tabular-nums transition-colors duration-(--duration-medium) motion-reduce:transition-none"
+      :class="[
+        urgent ? 'text-danger' : '',
+        progress === 'ring' && fraction !== null ? 'absolute text-xs font-medium' : '',
+      ]"
+    >
+      <LpShift axis="width">
+        <Transition
+          mode="out-in"
+          enter-active-class="transition-opacity duration-(--duration-fast) ease-(--ease-emphasized) motion-reduce:transition-none"
+          enter-from-class="opacity-0"
+          leave-active-class="transition-opacity duration-(--duration-fast) ease-out motion-reduce:transition-none"
+          leave-to-class="opacity-0"
+        >
+          <span v-if="isDone && $slots.done" key="done" class="inline-flex font-sans">
+            <slot name="done" />
+          </span>
+          <span v-else key="time" class="inline-flex items-baseline whitespace-nowrap" aria-hidden="true">
+            <template v-for="(cell, ci) in cells" :key="cell.part.unit">
+              <LpRollingText
+                v-for="digit in cell.digits"
+                :key="digit.key"
+                :value="digit.d"
+                direction="down"
+                :duration="260"
+              />
+              <span v-if="clock" class="px-px">{{ cell.part.after }}</span>
+              <span v-else class="font-sans text-[0.85em] text-muted" :class="ci < cells.length - 1 && 'mr-[0.35em]'">{{ cell.part.after }}</span>
+            </template>
+          </span>
+        </Transition>
+      </LpShift>
+    </span>
+    <LpProgress
+      v-if="progress === 'bar' && fraction !== null"
+      :value="fraction * 100"
+      :tone="urgent ? 'danger' : 'brand'"
+      :animate-on-mount="false"
+      :duration="1000"
+      aria-hidden="true"
+    />
+    <span v-if="announce !== false" class="sr-only" aria-live="polite" aria-atomic="true">{{ announcement }}</span>
+  </span>
+</template>

package/src/components/LpDataList.vue

@@ -0,0 +1,154 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+
+export interface DataListItem {
+  /** Stable key, used for slots (`#value-<key>`, `#label-<key>`) and list identity. Defaults to the label. */
+  key?: string
+  label: string
+  /** The value. Empty (`null`, `undefined`, `""`) shows the placeholder. */
+  value?: string | number | null
+  /** Offer a copy button for this value. */
+  copyable?: boolean
+  /** Monospace, for ids, addresses, hashes, versions. */
+  mono?: boolean
+  /** A note on what the label means, behind an info icon. */
+  hint?: string
+}
+
+export interface DataListLabels extends Record<string, string> {
+  empty: string
+}
+</script>
+
+<script setup lang="ts">
+/*
+ * Facts about one thing, as label and value pairs: a server's address,
+ * region, uptime and version; an account's id, plan and creation date.
+ *
+ *   <LpDataList :items="[
+ *     { label: 'Address', value: '10.0.4.12:25565', mono: true, copyable: true },
+ *     { label: 'Region', value: 'Frankfurt' },
+ *     { label: 'Players', value: online },
+ *   ]" />
+ *
+ * Rendered as a real description list (<dl>/<dt>/<dd>), so assistive tech
+ * reads each value with its label.
+ *
+ * Side by side when there is room, label above value when there is not —
+ * decided by the list's OWN width (a container query), not the window's: the
+ * same list sits in a wide page and in a narrow side panel, and only its own
+ * width says which reads better. Labels share one column, so values line up.
+ *
+ * Values are watched things — a player count, a status — so a short value
+ * that changes rolls to the new one (LpRollingText) instead of flicking.
+ */
+import { computed, useSlots } from "vue"
+import { useLabels } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import LpCopyButton from "./LpCopyButton.vue"
+import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
+import LpTooltip from "./LpTooltip.vue"
+
+const props = withDefaults(
+  defineProps<{
+    items: DataListItem[]
+    /**
+     * `auto` (default) is side by side, stacking when the list itself is
+     * narrower than ~20rem. `horizontal` and `stacked` fix one.
+     */
+    layout?: "auto" | "horizontal" | "stacked"
+    /** Hairlines between rows, for a long list read as a table. */
+    divided?: boolean
+    size?: "sm" | "md"
+    labels?: Partial<DataListLabels>
+  }>(),
+  { layout: "auto", size: "md" },
+)
+
+const text = useLabels<DataListLabels>("dataList", { empty: "—" }, () => props.labels)
+const slots = useSlots()
+
+const keyOf = (item: DataListItem) => item.key ?? item.label
+const isEmpty = (value: DataListItem["value"]) => value === null || value === undefined || value === ""
+// Long text wraps; rolling a paragraph would clip it to one line.
+const rolls = (value: DataListItem["value"]) => !isEmpty(value) && String(value).length <= 48
+
+/*
+ * Literal classes per layout: the consuming app's Tailwind scans this file as
+ * text, so container variants built at runtime would never be emitted.
+ *   - the list is a two-column grid, each row a subgrid, so every label
+ *     shares the first column and every value starts on one line;
+ *   - stacked collapses it to one column.
+ */
+const GRID = {
+  auto: "grid-cols-1 @xs:grid-cols-[fit-content(40%)_minmax(0,1fr)]",
+  horizontal: "grid-cols-[fit-content(40%)_minmax(0,1fr)]",
+  stacked: "grid-cols-1",
+} as const
+const ROW = {
+  auto: "gap-0.5 @xs:col-span-2 @xs:grid-cols-subgrid @xs:gap-x-6",
+  horizontal: "col-span-2 grid-cols-subgrid gap-x-6",
+  stacked: "gap-0.5",
+} as const
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() => "@container w-full")
+const pad = computed(() => (props.size === "sm" ? "py-1.5 text-xs" : "py-2.5 text-sm"))
+</script>
+
+<template>
+  <div :class="rootClass" v-bind="rest">
+    <TransitionGroup
+      tag="dl"
+      class="grid"
+      :class="GRID[layout]"
+      move-class="transition-transform duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none"
+      enter-active-class="transition-opacity duration-(--duration-medium) motion-reduce:transition-none"
+      enter-from-class="opacity-0"
+      leave-active-class="hidden"
+    >
+      <div
+        v-for="(item, i) in items"
+        :key="keyOf(item)"
+        class="group/row grid items-baseline"
+        :class="[ROW[layout], pad, divided && i > 0 ? 'border-t border-line' : '']"
+      >
+        <dt class="flex min-w-0 items-center gap-1 text-muted">
+          <slot :name="`label-${keyOf(item)}`" :item="item">
+            <slot name="label" :item="item">{{ item.label }}</slot>
+          </slot>
+          <LpTooltip v-if="item.hint" :content="item.hint">
+            <button
+              type="button"
+              class="grid size-4 shrink-0 place-items-center rounded-full text-muted/80 outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+              :aria-label="item.hint"
+            >
+              <LpIcon name="lucide:info" :size="12" />
+            </button>
+          </LpTooltip>
+        </dt>
+        <dd class="flex min-w-0 items-center gap-1.5 text-ink" :class="item.mono ? 'font-mono' : ''">
+          <span class="min-w-0 break-words">
+            <slot
+              v-if="slots[`value-${keyOf(item)}`] || slots.value"
+              :name="slots[`value-${keyOf(item)}`] ? `value-${keyOf(item)}` : 'value'"
+              :item="item"
+              :value="item.value"
+            />
+            <span v-else-if="isEmpty(item.value)" class="text-muted">{{ text.empty }}</span>
+            <LpRollingText v-else-if="rolls(item.value)" :value="item.value!" align="start" />
+            <template v-else>{{ item.value }}</template>
+          </span>
+          <!-- Quiet until the row is hovered or focused; always there on touch,
+               where nothing hovers. -->
+          <LpCopyButton
+            v-if="item.copyable && !isEmpty(item.value)"
+            :value="String(item.value)"
+            size="xs"
+            class="-my-1 size-6 shrink-0 opacity-0 transition-opacity duration-(--duration-fast) group-hover/row:opacity-100 focus-visible:opacity-100 data-[state=copied]:opacity-100 [@media(hover:none)]:opacity-100"
+          />
+        </dd>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>