@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/LpProgress.vue

@@ -17,11 +17,12 @@ export default { inheritAttrs: false }
  * value either way).
  */
 import { ProgressIndicator, ProgressRoot } from "reka-ui"
-import { computed, onBeforeUnmount, ref, watch } from "vue"
-import { easeOut, prefersReducedMotion } from "../composables/easing"
+import { computed } from "vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
-import { useReveal } from "../composables/useReveal"
+import { useRevealedValue } from "../composables/useRevealedValue"
 import LpNumberFlow from "./LpNumberFlow.vue"
+import { capacityThresholds, METER_HEADER, METER_TRACK, meterFraction, toneAt } from "./meter"
+import { toneLook, type ToneName } from "./tone"
 
 const props = withDefaults(
   defineProps<{
@@ -35,8 +36,11 @@ const props = withDefaults(
      * different at 92% than at 12%, and consumers were each re-deriving that
      * with their own palette — which also put raw colours back into components
      * the theme can no longer reach.
+     *
+     * Any of the kit's tone names works (tone.ts): `success`/`warning` read the
+     * same as `action`/`accent`.
      */
-    tone?: "brand" | "action" | "danger" | "accent" | "auto"
+    tone?: ToneName | "auto"
     /** `auto` tone: the fill fraction, 0–1, where the bar turns accent. */
     warnAt?: number
     /** `auto` tone: the fill fraction, 0–1, where it turns danger. */
@@ -105,44 +109,9 @@ const props = withDefaults(
  * gap to the other end. Interpolating here and handing both the same number
  * keeps them exactly level, because there is only one number.
  */
-/*
- * `shown` is the position on screen, and it is the thing that is animated —
- * not a phase that something else multiplies by.
- *
- * The earlier shape kept an eased 0..1 and derived the position from it and a
- * `from` captured in the watcher. That could not work: `from` was read off a
- * computed over `props.value`, so by the time the watcher ran it already
- * reported the DESTINATION, and every sweep after the first interpolated from
- * the answer to the answer. The entrance still animated, which is what made
- * the bug look like a decision — the bar filled beautifully once and jumped
- * forever after.
- *
- * Animating the position directly removes the question. Wherever the bar is is
- * where the next sweep starts, including one that interrupts another midway.
- */
-const shown = ref(props.animateOnMount ? 0 : props.value)
-let raf = 0
-
-const runSweep = (to: number, ms: number) => {
-  if (raf) cancelAnimationFrame(raf)
-  const from = shown.value
-  if (prefersReducedMotion() || ms <= 0 || from === to) {
-    shown.value = to
-    return
-  }
-  const t0 = performance.now()
-  const step = (now: number) => {
-    const t = Math.min(1, (now - t0) / ms)
-    // The kit's shared curve — the same function LpNumberFlow eases on, so the
-    // arc and the counter agree by construction rather than by comment.
-    shown.value = from + (to - from) * easeOut(t)
-    raf = t < 1 ? requestAnimationFrame(step) : 0
-  }
-  raf = requestAnimationFrame(step)
-}
-
-onBeforeUnmount(() => {
-  if (raf) cancelAnimationFrame(raf)
+const { el: revealAnchor, shown } = useRevealedValue(() => props.value, {
+  animateOnMount: () => props.animateOnMount,
+  duration: () => props.duration,
 })
 
 /*
@@ -154,26 +123,10 @@ onBeforeUnmount(() => {
  * reka's ProgressRoot is a component, so the ref holds an instance; take its
  * host element to observe.
  */
-const { el: revealAnchor, revealed } = useReveal({ immediate: () => !props.animateOnMount })
-
 const bindReveal = (instance: unknown) => {
   revealAnchor.value = (instance as { $el?: Element } | null)?.$el ?? null
 }
 
-watch(
-  revealed,
-  (visible) => {
-    if (visible && props.animateOnMount) runSweep(props.value, props.duration)
-  },
-  { immediate: true },
-)
-
-/* A later change eases to the new value from wherever the bar stands. */
-watch(
-  () => [props.value, props.max],
-  () => runSweep(props.value, props.duration),
-)
-
 // A zero or missing max (no quota known yet) reads as empty, not as NaN%.
 const pct = computed(() => {
   const ratio = props.max > 0 ? (shown.value / props.max) * 100 : 0
@@ -181,19 +134,18 @@ const pct = computed(() => {
 })
 
 /*
- * The tone actually painted. `auto` reads the fill and crosses two thresholds;
- * every other value passes straight through.
+ * The tone actually painted. `auto` reads the fill against the capacity scale
+ * LpGauge and LpQuota use (meter.ts), so a bar and a gauge showing one disk
+ * turn amber at the same point; every other value passes straight through.
  *
  * Thresholds are compared against the TARGET, not the animated position, so a
  * bar does not change colour partway through its own sweep — it fills in the
  * colour its reading warrants.
  */
 const paintedTone = computed(() => {
-  if (props.tone !== "auto") return props.tone
-  const fraction = props.max > 0 ? props.value / props.max : 0
-  if (fraction >= props.dangerAt) return "danger"
-  if (fraction >= props.warnAt) return "accent"
-  return "action"
+  if (props.tone !== "auto") return toneLook(props.tone)
+  const fraction = meterFraction(props.value, 0, props.max)
+  return toneLook(toneAt(fraction, capacityThresholds(0, 1, props.warnAt, props.dangerAt)))
 })
 
 const captionText = computed(() => {
@@ -201,20 +153,6 @@ const captionText = computed(() => {
   return typeof props.caption === "string" ? props.caption : `${Math.round(pct.value)}%`
 })
 
-const bar: Record<string, string> = {
-  brand: "bg-brand",
-  action: "bg-action",
-  danger: "bg-danger",
-  accent: "bg-accent",
-}
-
-const stroke: Record<string, string> = {
-  brand: "var(--color-brand)",
-  action: "var(--color-action)",
-  danger: "var(--color-danger)",
-  accent: "var(--color-accent)",
-}
-
 /*
  * The arc is drawn by dashing the circumference: one dash as long as the filled
  * fraction, one gap covering the rest. Rotated -90° so it starts at twelve
@@ -235,7 +173,7 @@ const dash = computed(() => {
   return Math.min(raw, full - props.thickness * 1.5)
 })
 
-const BAR_TRACK = "h-1.5 w-full overflow-hidden rounded-pill bg-surface-soft"
+const BAR_TRACK = `${METER_TRACK} overflow-hidden`
 
 /*
  * The consumer's class lands on whichever element is the outside of the
@@ -280,7 +218,7 @@ const staticCaption = computed(() =>
         :cy="size / 2"
         :r="radius"
         fill="none"
-        :stroke="stroke[paintedTone]"
+        :stroke="paintedTone.color"
         :stroke-width="thickness"
         stroke-linecap="round"
         :stroke-dasharray="`${dash} ${circumference - dash}`"
@@ -307,7 +245,7 @@ const staticCaption = computed(() =>
   <!-- Wrapped only when there is a header to carry. A bare bar stays the single
        element it has always been, so an existing caller's layout is untouched. -->
   <div v-else-if="title || captionText" :class="rootClass" v-bind="rest">
-    <div class="flex items-baseline justify-between gap-2 text-xs">
+    <div :class="METER_HEADER" class="gap-2 text-xs">
       <span class="text-muted">{{ title }}</span>
       <!-- Tabular, so a figure ticking upward doesn't shuffle its own width. -->
       <span class="font-mono tabular-nums text-muted-strong">{{ captionText }}</span>
@@ -320,7 +258,7 @@ const staticCaption = computed(() =>
     >
       <ProgressIndicator
         class="h-full rounded-pill transition-colors duration-medium"
-        :class="bar[paintedTone]"
+        :class="paintedTone.bg"
         :style="{ width: `${pct}%` }"
       />
     </ProgressRoot>
@@ -336,7 +274,7 @@ const staticCaption = computed(() =>
   >
     <ProgressIndicator
       class="h-full rounded-pill transition-colors duration-medium"
-      :class="bar[paintedTone]"
+      :class="paintedTone.bg"
       :style="{ width: `${pct}%` }"
     />
   </ProgressRoot>

package/src/components/LpQuota.vue

@@ -0,0 +1,197 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own rather than appended to
+// it, so opt out of the automatic pass-through that would add it unmerged.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * "Used of limit": storage, seats, API calls. A header with the reading, a bar,
+ * and a line saying what is left, with the tone rising as the limit nears.
+ *
+ * The bar is drawn here rather than borrowed from LpProgress. LpProgress shows
+ * one fraction clamped to full, which is right for progress and wrong for a
+ * quota on two counts: a quota is often made of parts (a stacked bar), and an
+ * exceeded quota has to SHOW the excess. Here the bar stretches to hold what is
+ * used and the limit becomes a mark along it, so 12 of 10 GB reads as a bar
+ * running past a line instead of as a full bar indistinguishable from 10 of 10.
+ * The tone scale, the track and the header row are LpProgress's (meter.ts), so
+ * the two agree on one disk and look like one family.
+ */
+import { computed } from "vue"
+import { useLabels } from "../composables/useLpConfig"
+import { useLocale } from "../composables/useLocale"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useRevealedValue } from "../composables/useRevealedValue"
+import LpIcon from "./LpIcon.vue"
+import LpNumberFlow from "./LpNumberFlow.vue"
+import LpRollingText from "./LpRollingText.vue"
+import { METER_HEADER, METER_TRACK } from "./meter"
+import { formatAmount, quotaSegments, quotaState, type QuotaPart, type QuotaUnit } from "./quota"
+import { toneLook } from "./tone"
+
+export type QuotaLabels = {
+  /** `{amount}` is what remains. */
+  left: string
+  /** `{amount}` is the excess. */
+  over: string
+  /** Shown instead of what remains when there is no limit. */
+  unlimited: string
+  /** The spoken reading, followed by what is left or over. `{used}`, `{limit}`. */
+  reading: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    used: number
+    /** Unset, zero or Infinity means unlimited: the reading stays, the bar and "left" go. */
+    limit?: number | null
+    /** What is counted ("Storage", "Seats"). Also the accessible name. */
+    label?: string
+    /** `"bytes"`, a plain suffix ("seats"), or a formatter. See `formatAmount`. */
+    unit?: QuotaUnit
+    /**
+     * What the used amount is made of. The bar stacks them and a legend names
+     * them; their sum need not equal `used` (a part can be left unlisted), but
+     * the bar shows the parts, so list them all if the bar should add up.
+     */
+    parts?: QuotaPart[]
+    /** Share of the limit (0–1) where the quota turns warning. */
+    warnAt?: number
+    /** Share of the limit where it turns danger. Over the limit is always danger. */
+    dangerAt?: number
+    /** Hide the legend under a stacked bar, for a compact row where the tooltip of the page says enough. */
+    hideLegend?: boolean
+    /** Fill from empty when first seen. */
+    animateOnMount?: boolean
+    locale?: string
+    labels?: Partial<QuotaLabels>
+  }>(),
+  { limit: null, warnAt: 0.8, dangerAt: 0.9, hideLegend: false, animateOnMount: true },
+)
+
+const text = useLabels<QuotaLabels>(
+  "quota",
+  {
+    left: "{amount} left",
+    over: "{amount} over the limit",
+    unlimited: "No limit",
+    reading: "{used} of {limit} used",
+  },
+  () => props.labels,
+)
+const locale = useLocale(() => props.locale)
+
+const state = computed(() => quotaState(props.used, props.limit, props.warnAt, props.dangerAt))
+const look = computed(() => toneLook(state.value.tone))
+const fmt = (v: number) => formatAmount(v, props.unit, locale.value)
+
+/*
+ * Without parts the used amount is one part in the tone it earns, so a single
+ * bar and a stacked one share the layout, the overflow mark and the motion.
+ */
+const layout = computed(() =>
+  quotaSegments(
+    props.parts?.length ? props.parts : [{ label: props.label ?? "", value: props.used, color: look.value.color }],
+    props.limit,
+  ),
+)
+
+// The bar's segments ease in CSS and the figure rolls in LpNumberFlow, so only the held value is needed here.
+const { el: revealAnchor, revealed, target: shownUsed } = useRevealedValue(() => props.used, {
+  animateOnMount: () => props.animateOnMount,
+})
+
+const footer = computed(() => {
+  const s = state.value
+  if (!s.limited) return text.value.unlimited
+  if (s.over > 0) return text.value.over.replace("{amount}", fmt(s.over))
+  return text.value.left.replace("{amount}", fmt(s.remaining))
+})
+
+/* Spoken: the reading, then the same verdict the footer shows. */
+const valueText = computed(() =>
+  state.value.limited
+    ? `${text.value.reading.replace("{used}", fmt(props.used)).replace("{limit}", fmt(props.limit as number))}, ${footer.value}`
+    : `${fmt(props.used)}, ${text.value.unlimited}`,
+)
+
+// Ink while the reading is fine: a calm quota should not be coloured at all.
+const readingTone = computed(() => (state.value.tone === "ok" ? "text-ink" : look.value.text))
+
+const { class: rootClass, attrs: rest } = useMergedAttrs("flex w-full flex-col gap-1.5")
+</script>
+
+<template>
+  <div
+    :ref="(el) => (revealAnchor = el as Element | null)"
+    :role="state.limited ? 'meter' : 'group'"
+    :aria-valuenow="state.limited ? used : undefined"
+    :aria-valuemin="state.limited ? 0 : undefined"
+    :aria-valuemax="state.limited ? (limit as number) : undefined"
+    :aria-valuetext="state.limited ? valueText : undefined"
+    :aria-label="label"
+    :class="rootClass"
+    v-bind="rest"
+  >
+    <div :class="METER_HEADER" class="gap-3 text-sm">
+      <span v-if="label" class="truncate text-ink">{{ label }}</span>
+      <span class="ml-auto shrink-0 font-mono text-xs tabular-nums text-muted">
+        <LpNumberFlow
+          :value="shownUsed"
+          :format="fmt"
+          :animate-on-mount="false"
+          class="transition-colors duration-(--duration-medium)"
+          :class="readingTone"
+        />
+        <template v-if="state.limited">
+          <span class="px-1">/</span>
+          <LpNumberFlow :value="limit as number" :format="fmt" :animate-on-mount="false" />
+        </template>
+      </span>
+    </div>
+
+    <div
+      v-if="state.limited || parts?.length"
+      class="relative"
+      :class="METER_TRACK"
+      aria-hidden="true"
+    >
+      <div class="flex h-full w-full gap-px overflow-hidden rounded-pill">
+        <span
+          v-for="seg in layout.segments"
+          :key="seg.label"
+          class="h-full shrink-0 transition-[width,background-color] duration-700 ease-(--ease-emphasized) motion-reduce:transition-none"
+          :style="{ width: revealed ? `${seg.share * 100}%` : '0%', backgroundColor: seg.color }"
+        />
+      </div>
+      <!-- The limit, once the bar has run past it. Taller than the track so it
+           reads as a line across the bar, not as one more part. -->
+      <span
+        class="absolute -inset-y-1 w-0.5 -translate-x-1/2 rounded-pill bg-ink transition-[left,opacity] duration-700 ease-(--ease-emphasized) motion-reduce:transition-none"
+        :style="{ left: `${(layout.limitAt ?? 1) * 100}%`, opacity: layout.limitAt != null && revealed ? 1 : 0 }"
+      />
+    </div>
+
+    <div
+      class="flex items-center gap-1 text-xs transition-colors duration-(--duration-medium)"
+      :class="state.over > 0 ? look.text : 'text-muted'"
+    >
+      <LpIcon
+        name="lucide:triangle-alert"
+        :size="12"
+        class="shrink-0 transition-[opacity,width] duration-(--duration-medium)"
+        :class="state.over > 0 ? 'w-3 opacity-100' : 'w-0 opacity-0'"
+      />
+      <LpRollingText :value="footer" align="start" />
+    </div>
+
+    <ul v-if="parts?.length && !hideLegend" class="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted">
+      <li v-for="seg in layout.segments" :key="seg.label" class="flex items-center gap-1.5">
+        <span class="size-2 shrink-0 rounded-full" :style="{ backgroundColor: seg.color }" />
+        <span>{{ seg.label }}</span>
+        <span class="font-mono tabular-nums text-muted-strong">{{ fmt(seg.value) }}</span>
+      </li>
+    </ul>
+  </div>
+</template>

package/src/components/LpRangeSlider.vue

@@ -16,6 +16,7 @@ export default { inheritAttrs: false }
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui"
 import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { SLIDER_GLIDE, useSliderDrag } from "./slider"
 
 const props = withDefaults(
   defineProps<{
@@ -56,8 +57,9 @@ function onCommit(v: number[] | undefined) {
 const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
 
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55",
+  `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`,
 )
+const { dragging, onPointerDown } = useSliderDrag()
 
 const thumbClass =
   "group/thumb relative block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
@@ -75,6 +77,8 @@ const labelClass =
     :disabled="field.disabled"
     :class="rootClass"
     v-bind="rest"
+    :data-dragging="dragging || undefined"
+    @pointerdown="onPointerDown"
     @update:model-value="onUpdate"
     @value-commit="onCommit"
   >

package/src/components/LpRelativeTime.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own rather than appended to
+// it, so opt out of the automatic pass-through that would add it unmerged.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * A date said the way people say it ("3 min ago", "in 2 h"), kept true as time
+ * passes, with the exact date one hover away.
+ *
+ * Each instance sleeps until its own text would change (useNow with the
+ * formatter's `refreshIn`): a "just now" wakes in seconds, a "last month" once
+ * an hour, so a table of old rows costs almost nothing between changes. When
+ * the text does change it rolls to the new one, so "4 min ago" becoming
+ * "5 min ago" is seen as the same clock moving.
+ */
+import { computed } from "vue"
+import { useLocale } from "../composables/useLocale"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useNow } from "../composables/useNow"
+import LpRollingText from "./LpRollingText.vue"
+import LpTooltip from "./LpTooltip.vue"
+import { formatRelativeTime } from "./relativeTime"
+import { toEpoch } from "./timeSpan"
+
+const props = withDefaults(
+  defineProps<{
+    /** A Date, an ISO string or epoch milliseconds. */
+    date: Date | string | number
+    /** Intl's width: `long` "3 minutes ago", `short` "3 min. ago", `narrow` "3m ago". */
+    format?: Intl.RelativeTimeFormatStyle
+    /** Within this many ms of now it reads "now" rather than counting seconds. */
+    nowWithin?: number
+    /**
+     * Show the exact date on hover and focus. Off, it moves to the native
+     * `title` instead, for a dense log where tooltips would get in the way of
+     * reading; it is never shown both ways at once, which would stack two
+     * hints on one hover.
+     */
+    tooltip?: boolean
+    /** How the exact date is written. Defaults to the full date with the time. */
+    absolute?: Intl.DateTimeFormatOptions
+    locale?: string
+  }>(),
+  { format: "long", tooltip: true, nowWithin: 45_000 },
+)
+
+const locale = useLocale(() => props.locale)
+const at = computed(() => toEpoch(props.date))
+const options = computed(() => ({ locale: locale.value, style: props.format, nowWithin: props.nowWithin }))
+
+/*
+ * The clock wakes only when this text would change (`refreshIn`): a "just
+ * now" in seconds, a "last month" once an hour, nothing while the tab is
+ * hidden. A new date or wording reschedules it, since the wait planned for the
+ * old one may be far too long for the new.
+ */
+const now = useNow(true, {
+  nextIn: (t) => formatRelativeTime(at.value, t, options.value).refreshIn,
+  restartOn: () => [at.value, locale.value, props.format, props.nowWithin],
+})
+const reading = computed(() => formatRelativeTime(at.value, now.value, options.value))
+
+const exact = computed(() => {
+  if (!Number.isFinite(at.value)) return ""
+  return new Intl.DateTimeFormat(locale.value, props.absolute ?? { dateStyle: "full", timeStyle: "short" }).format(at.value)
+})
+const iso = computed(() => (Number.isFinite(at.value) ? new Date(at.value).toISOString() : undefined))
+
+const { class: rootClass, attrs: rest } = useMergedAttrs("inline-flex whitespace-nowrap tabular-nums")
+</script>
+
+<template>
+  <LpTooltip v-if="tooltip && exact" :content="exact">
+    <!-- Focusable, so the exact date is reachable from the keyboard too; the
+         tooltip is a description, the relative text stays the name. -->
+    <time
+      :datetime="iso"
+      tabindex="0"
+      :class="[rootClass, 'rounded-[3px] outline-none focus-visible:ring-2 focus-visible:ring-ring']"
+      v-bind="rest"
+    >
+      <LpRollingText :value="reading.text" align="start" />
+    </time>
+  </LpTooltip>
+  <time v-else :datetime="iso" :title="exact || undefined" :class="rootClass" v-bind="rest">
+    <LpRollingText :value="reading.text" align="start" />
+  </time>
+</template>

package/src/components/LpRepeater.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts" generic="T extends object">
+import { nextTick, ref } from "vue"
+import { useFieldControl } from "../composables/useField"
+import { useLabels } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useRepeater, type RepeaterItemKey } from "../composables/useRepeater"
+import LpButton from "./LpButton.vue"
+import LpIcon from "./LpIcon.vue"
+
+defineOptions({ inheritAttrs: false })
+const props = defineProps<{
+  /** Return a fresh item when Add is pressed. Data and validation remain the caller's. */
+  createItem: () => T
+  /** Stable business key for immutable reloads; omitted, object identity keeps unsaved rows stable. */
+  itemKey?: RepeaterItemKey<T>
+  label?: string
+  disabled?: boolean
+  labels?: Partial<{ add: string; remove: string; empty: string }>
+}>()
+const model = defineModel<T[]>({ default: () => [] })
+defineSlots<{
+  default?(props: { item: T; index: number; disabled: boolean; update: (item: T) => void; remove: () => void }): unknown
+  empty?(): unknown
+}>()
+
+const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+const text = useLabels("repeater", { add: "Add item", remove: "Remove item {index}", empty: "No items" }, () => props.labels)
+const list = useRepeater({
+  value: () => model.value,
+  set: (items) => { model.value = items },
+  createItem: () => props.createItem(),
+  itemKey: () => props.itemKey,
+  disabled: () => field.value.disabled,
+})
+const { rows } = list
+const root = ref<HTMLElement | null>(null)
+const addButton = ref<InstanceType<typeof LpButton> | null>(null)
+const focusable = 'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex="0"], [contenteditable="true"]'
+function focusRow(index: number) {
+  root.value?.querySelectorAll<HTMLElement>("[data-lp-repeater-row]")[index]?.querySelector<HTMLElement>(focusable)?.focus()
+}
+async function add() {
+  if (field.value.disabled) return
+  list.add()
+  await nextTick()
+  focusRow(model.value.length - 1)
+}
+async function remove(index: number) {
+  if (field.value.disabled) return
+  const row = root.value?.querySelectorAll<HTMLElement>("[data-lp-repeater-row]")[index]
+  const restore = row?.contains(row.ownerDocument.activeElement)
+  list.remove(index)
+  if (!restore) return
+  await nextTick()
+  if (model.value.length) focusRow(Math.min(index, model.value.length - 1))
+  else (addButton.value?.$el as HTMLElement | undefined)?.focus()
+}
+defineExpose({ add, remove, update: list.update })
+const { class: rootClass, attrs: rest } = useMergedAttrs("flex min-w-0 flex-col gap-2")
+</script>
+
+<template>
+  <div ref="root" v-bind="rest" :class="rootClass">
+    <div class="flex items-center justify-between gap-2">
+      <span v-if="label" class="text-sm font-medium text-ink">{{ label }}</span>
+      <LpButton ref="addButton" size="xs" variant="ghost" :disabled="field.disabled" @click="add">
+        <LpIcon name="lucide:plus" :size="14" />{{ text.add }}
+      </LpButton>
+    </div>
+    <div v-for="({ item, key }, index) in rows" :key="key" data-lp-repeater-row class="flex min-w-0 items-start gap-2">
+      <div class="min-w-0 flex-1">
+        <slot :item="item" :index="index" :disabled="field.disabled" :update="(next: T) => list.update(index, next)" :remove="() => remove(index)" />
+      </div>
+      <LpButton variant="ghost" size="sm" square :disabled="field.disabled" :aria-label="text.remove.replace('{index}', String(index + 1))" @click="remove(index)">
+        <LpIcon name="lucide:x" :size="14" />
+      </LpButton>
+    </div>
+    <div v-if="!rows.length" class="text-xs text-muted"><slot name="empty">{{ text.empty }}</slot></div>
+  </div>
+</template>