@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/LpShinyText.vue

@@ -0,0 +1,139 @@
+<script lang="ts">
+// The root class is merged with the consumer's (useMergedAttrs).
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * Accent text with light moving through it.
+ *
+ * Two looks, for two jobs:
+ *
+ *   "shine"    — the text keeps its tone and a soft band sweeps across it now
+ *     and then. Draws the eye to one word without changing what it says: a
+ *     "New" next to a menu item, the plan name on an upgrade card, a status
+ *     that is still working ("Deploying…").
+ *   "gradient" — the text is painted with the theme's brand, accent and action
+ *     colours drifting across it. A display headline, a logo word.
+ *
+ *   <LpShinyText>Pro</LpShinyText>
+ *   <LpShinyText variant="gradient" as="h1" class="text-4xl font-bold">Leave Pulse</LpShinyText>
+ *
+ * Pure CSS: the text is clipped to an animated background. The sheen moves
+ * toward the theme's ink, not toward white, so it lightens the text on a dark
+ * theme and darkens it on a light one and the word never washes out into the
+ * page. The loop pauses while the text is off screen or the tab is hidden;
+ * under reduced motion it stands still (the gradient stays, the sheen goes).
+ */
+import { computed } from "vue"
+import { useInView } from "../composables/useInView"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { toneLook, type ToneName } from "./tone"
+
+const props = withDefaults(
+  defineProps<{
+    /** `shine` sweeps a band over toned text; `gradient` paints it with drifting theme colours. */
+    variant?: "shine" | "gradient"
+    /** Base colour for `shine`. `ink` sweeps the brand colour over plain text. */
+    tone?: ToneName | "ink"
+    /** Seconds per sweep. Slower reads as ambient; under ~1.5 s it starts to nag. */
+    speed?: number
+    /** Stop the motion (keeps the look). For a word that should only shine while something is happening. */
+    paused?: boolean
+    /** Element to render. */
+    as?: string
+  }>(),
+  { variant: "shine", tone: "brand", speed: 3, paused: false, as: "span" },
+)
+
+const { el, inView } = useInView()
+const { class: rootClass, attrs: rest } = useMergedAttrs(() => `lp-shiny lp-shiny--${props.variant}`)
+
+const style = computed(() => {
+  const base = props.tone === "ink" ? "var(--color-ink)" : toneLook(props.tone).color
+  return {
+    "--lp-shiny-base": base,
+    // Toward ink, so the band is the contrast direction in either theme; plain
+    // ink text gets a brand band instead, since ink toward ink is no band.
+    "--lp-shiny-sheen":
+      props.tone === "ink" ? "var(--color-brand)" : `color-mix(in oklab, ${base}, var(--color-ink) 65%)`,
+    "--lp-shiny-speed": `${Math.max(0.3, props.speed)}s`,
+    animationPlayState: props.paused || !inView.value ? "paused" : "running",
+  }
+})
+</script>
+
+<template>
+  <component :is="as" ref="el" :class="rootClass" :style="style" v-bind="rest">
+    <slot />
+  </component>
+</template>
+
+<style>
+.lp-shiny {
+  color: var(--lp-shiny-base);
+  background-repeat: repeat-x;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  /* Descenders and italics poke out of the content box; the clip follows the
+     background box, so give it room instead of cutting a tail off. */
+  padding-block: 0.08em;
+  animation: lp-shiny-move var(--lp-shiny-speed) linear infinite;
+}
+
+.lp-shiny--shine {
+  /* The band is a third of a 300% wide image; the image moves by its own
+     width, so the band crosses the text and then rests off to the side for
+     a while, which is what makes it an occasional glint and not a strobe. */
+  background-image: linear-gradient(
+    105deg,
+    var(--lp-shiny-base) 0%,
+    var(--lp-shiny-base) 40%,
+    var(--lp-shiny-sheen) 50%,
+    var(--lp-shiny-base) 60%,
+    var(--lp-shiny-base) 100%
+  );
+  background-size: 300% 100%;
+}
+
+.lp-shiny--gradient {
+  /* First and last stops match, so the repeat has no seam as it drifts. */
+  background-image: linear-gradient(
+    90deg,
+    var(--color-brand),
+    var(--color-accent),
+    var(--color-action),
+    var(--color-brand)
+  );
+  background-size: 200% 100%;
+}
+
+@keyframes lp-shiny-move {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.lp-shiny--gradient {
+  animation-name: lp-shiny-drift;
+}
+
+@keyframes lp-shiny-drift {
+  from {
+    background-position: 0% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lp-shiny {
+    animation: none;
+  }
+}
+</style>

package/src/components/LpSidebar.vue

@@ -320,6 +320,7 @@ defineOptions({ inheritAttrs: false })
       v-model="query"
       size="sm"
       icon="lucide:search"
+      clearable
       class="mb-2 shrink-0"
       :placeholder="placeholder"
       :aria-label="placeholder"
@@ -380,6 +381,7 @@ defineOptions({ inheritAttrs: false })
         v-model="query"
         size="sm"
         icon="lucide:search"
+        clearable
         class="mb-2 shrink-0"
         :placeholder="placeholder"
         :aria-label="placeholder"

package/src/components/LpSlider.vue

@@ -11,6 +11,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<{
@@ -43,8 +44,9 @@ const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled
 
 // A slider is full-width by default; putting one in a toolbar means constraining it, and a fixed h-5 has to yield to a denser row.
 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()
 </script>
 
 <template>
@@ -56,6 +58,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     :disabled="field.disabled"
     :class="rootClass"
     v-bind="rest"
+    :data-dragging="dragging || undefined"
+    @pointerdown="onPointerDown"
     @update:model-value="onUpdate"
     @value-commit="onCommit"
   >

package/src/components/LpSparkline.vue

@@ -19,8 +19,10 @@ import LpSkeleton from "./LpSkeleton.vue"
 import { sampleValues } from "./chartSkeleton"
 import { useSample } from "../composables/useSample"
 import { useReveal } from "../composables/useReveal"
+import { mixValues, useTween } from "../composables/useTween"
 import { useLabels } from "../composables/useLpConfig"
 import { areaPath, extent, linePath, normalise, type Box } from "./chart"
+import { toneLook, type ToneName } from "./tone"
 
 const props = withDefaults(
   defineProps<{
@@ -32,7 +34,7 @@ const props = withDefaults(
     /** Any CSS colour. Defaults to the brand token. */
     color?: string
     /** Named theme tones, for callers that don't want to spell a var(). */
-    tone?: "brand" | "action" | "danger" | "accent" | "muted"
+    tone?: ToneName
     /** Fill under the line. */
     area?: boolean
     /** Curve tension, as in LpChart. 0 draws a polyline. */
@@ -77,15 +79,23 @@ const props = withDefaults(
   { width: 84, height: 24, tone: "brand", smooth: 0.9, animate: true, duration: 900, sample: true },
 )
 
-const TONE: Record<string, string> = {
-  brand: "var(--color-brand)",
-  action: "var(--color-action)",
-  danger: "var(--color-danger)",
-  accent: "var(--color-accent)",
-  muted: "var(--color-muted)",
-}
+const stroke = computed(() => props.color ?? toneLook(props.tone).color)
+
+/*
+ * The sweep is held until the svg is actually on screen. Forty of these sit in
+ * a list, most of them below the fold; started on mount they would all have
+ * finished before the rows carrying them were ever scrolled to.
+ */
+const { el, revealed } = useReveal({ immediate: () => !props.animate })
 
-const stroke = computed(() => props.color ?? TONE[props.tone])
+// The stub holds the place when there is nothing to draw, so the sample can
+// still find the hint it sits in.
+const stub = ref<Element | null>(null)
+const sampling = useSample(
+  computed(() => el.value ?? stub.value),
+  () => !props.loading && !props.data.some((v) => v != null),
+  () => props.sample,
+)
 
 const data = computed(() => (sampling.value ? sampleValues(props.data.length || 12) : props.data))
 
@@ -116,32 +126,56 @@ const bounds = computed(() => {
   return { min: props.min ?? auto.min, max: props.max ?? auto.max }
 })
 
+/*
+ * What is DRAWN: each reading as its height in the box, 0 at the bottom and 1
+ * at the top, travelling from the last line to the new one.
+ *
+ * Heights, not raw values, because the range moves with the data. New values
+ * on the old range overshoot the box and old values on the new range redraw the
+ * line at another height, and tweening values and range side by side has a
+ * blind spot of its own: when the new range collapses (a flat series), values
+ * and range shrink in proportion, the line holds its old shape the whole way
+ * and then drops on the last frame. Heights are already on the range, so a
+ * frame partway is a line partway, whatever happened to the scale.
+ */
+const heights = computed(() => {
+  const { min, max } = bounds.value
+  const span = max - min || 1
+  return series.value[0].values.map((v) => (v == null ? null : (v - min) / span))
+})
+
+const shown = useTween(() => heights.value, mixValues, {
+  /*
+   * Only a line already on screen morphs. Before it is revealed the draw-on
+   * is still to come, and while the loading band or the stub stands in (`el`
+   * unset) the line will mount fresh and draw itself in — a morph from
+   * readings nobody saw would only blur that entrance.
+   */
+  enabled: () => props.animate && revealed.value && !!el.value,
+})
+
 const geo = computed(() => ({
-  min: bounds.value.min,
-  max: bounds.value.max,
+  min: 0,
+  max: 1,
   box: box.value,
-  count: data.value.length,
+  count: shown.value.length,
   banded: false,
 }))
 
-const d = computed(() => linePath(series.value[0].values, geo.value, props.smooth))
-const fill = computed(() =>
-  props.area ? areaPath(series.value[0].values, geo.value, props.smooth) : "",
-)
+const d = computed(() => linePath(shown.value, geo.value, props.smooth))
+const fill = computed(() => (props.area ? areaPath(shown.value, geo.value, props.smooth) : ""))
 
 /** Last point that actually has a value — the dot goes there, not on a gap. */
 const lastPoint = computed(() => {
-  const values = series.value[0].values
+  const values = shown.value
   for (let i = values.length - 1; i >= 0; i--) {
     const v = values[i]
     if (v == null) continue
-    const span = bounds.value.max - bounds.value.min || 1
     const w = props.width - PAD * 2
     const h = props.height - PAD * 2
     return {
-      x: data.value.length <= 1 ? PAD + w / 2 : PAD + (w / (data.value.length - 1)) * i,
-      y: PAD + h - ((v - bounds.value.min) / span) * h,
-      v,
+      x: values.length <= 1 ? PAD + w / 2 : PAD + (w / (values.length - 1)) * i,
+      y: PAD + h - v * h,
     }
   }
   return null
@@ -186,22 +220,6 @@ const pathLength = computed(() => {
   return Math.ceil(segment * n + 4)
 })
 
-/*
- * The sweep is held until the svg is actually on screen. Forty of these sit in
- * a list, most of them below the fold; started on mount they would all have
- * finished before the rows carrying them were ever scrolled to.
- */
-const { el, revealed } = useReveal({ immediate: () => !props.animate })
-
-// The stub holds the place when there is nothing to draw, so the sample can
-// still find the hint it sits in.
-const stub = ref<Element | null>(null)
-const sampling = useSample(
-  computed(() => el.value ?? stub.value),
-  () => !props.loading && !props.data.some((v) => v != null),
-  () => props.sample,
-)
-
 const revealStyle = computed(() =>
   props.animate
     ? {

package/src/components/LpSpotlight.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * LpSpotlight — a soft glow that follows the pointer inside whatever it wraps.
+ *
+ *   <LpSpotlight class="rounded-card"><MyTile /></LpSpotlight>
+ *
+ * For a grid of tiles the eye should scan with the mouse: the lit one is the
+ * one about to be clicked, without a hover border shouting it. LpCard has the
+ * same effect as its `spotlight` prop; reach for this wrapper around anything
+ * that is not a card. Mouse only; reduced motion draws nothing. The glow is
+ * painted by `.lp-spotlight` in tokens/effects.css.
+ */
+import { computed } from "vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useSpotlight } from "../composables/useSpotlight"
+
+const props = withDefaults(
+  defineProps<{
+    /** Any CSS colour. Defaults to the brand colour, so it follows the theme. */
+    color?: string
+    /** Diameter of the lit circle, in px. Larger reads as ambient, smaller as a torch. */
+    size?: number
+    /** How much of the colour mixes in, 0–100. Keep it low on text-heavy surfaces. */
+    strength?: number
+    /** Keep the wrapper but draw nothing — for a tile that is disabled or busy. */
+    disabled?: boolean
+    /** Element to render as. */
+    as?: string
+  }>(),
+  { size: 280, strength: 18, disabled: false, as: "div" },
+)
+
+const { el } = useSpotlight({ disabled: () => props.disabled })
+const { class: classes, attrs: rest } = useMergedAttrs(() => "lp-spotlight rounded-card")
+
+const style = computed(() => ({
+  "--lp-spot-size": `${props.size}px`,
+  "--lp-spot-strength": `${Math.min(100, Math.max(0, props.strength))}%`,
+  ...(props.color ? { "--lp-spot-color": props.color } : {}),
+}))
+</script>
+
+<template>
+  <component :is="as" ref="el" :class="classes" :style="style" v-bind="rest">
+    <slot />
+  </component>
+</template>

package/src/components/LpStat.vue

@@ -12,7 +12,9 @@ import { computed } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpNumberFlow from "./LpNumberFlow.vue"
 import LpSkeleton from "./LpSkeleton.vue"
+import LpStatus from "./LpStatus.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { TONES } from "./tone"
 
 const props = withDefaults(
   defineProps<{
@@ -77,7 +79,7 @@ const trendIcon = computed(() =>
 const trendColor = computed(() => {
   if (dir.value === "flat") return "text-muted"
   const good = props.invertTrend ? dir.value === "down" : dir.value === "up"
-  return good ? "text-action" : "text-danger"
+  return good ? TONES.success.text : TONES.danger.text
 })
 
 // Numeric delta gets an explicit sign; string deltas are shown as given.
@@ -128,7 +130,9 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     :class="rootClass"
     v-bind="rest">
     <div class="flex items-center gap-2">
-      <span v-if="online" class="size-1.5 rounded-full bg-action" />
+      <!-- The kit's own "online" light, so a live tile reads (and is spoken)
+           the same as a live server row elsewhere on the page. -->
+      <LpStatus v-if="online" state="online" size="sm" hide-label />
       <LpIcon v-if="icon" :name="icon" :size="14" class="text-muted" />
       <span class="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted">
         <Transition v-bind="FADE">

package/src/components/LpStatus.vue

@@ -0,0 +1,127 @@
+<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">
+/*
+ * What state something is in, as a light and a word: a server online, a bot
+ * starting, a region degraded.
+ *
+ * Not LpBadge with a dot. A badge is a label whose text is the point and whose
+ * dot is decoration; here the STATE is the point and the caller passes a state,
+ * not a colour and a word. The light, the word, the pulse and the spoken text
+ * all follow from it, so every status in an app looks and sounds the same, and
+ * a change of state (starting → online) reads as one thing changing: the light
+ * crossfades, the word rolls, the pulse starts or stops.
+ */
+import { computed } from "vue"
+import { useLabels } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import LpBadge from "./LpBadge.vue"
+import LpRollingText from "./LpRollingText.vue"
+import LpShift from "./LpShift.vue"
+import { TONE_COLOR, type MeterTone } from "./meter"
+import { STATUS_LABELS, STATUS_LOOK, type StatusKind } from "./status"
+
+const props = withDefaults(
+  defineProps<{
+    state: StatusKind
+    /** The word shown, when the state's own name is not the right one ("Ready", "In a match"). */
+    label?: string
+    /** Overrides the state's tone, for an app whose "offline" is an alarm rather than a rest state. */
+    tone?: MeterTone
+    /** Overrides whether the light pulses. */
+    pulse?: boolean
+    /**
+     * `inline` (default) is a light and a word in running text or a table cell;
+     * `pill` puts them on a chip, which is LpBadge's own: the chip is the
+     * badge, the state (light, word, pulse, tone) is what this adds to it.
+     */
+    variant?: "inline" | "pill"
+    size?: "sm" | "md"
+    /**
+     * Light only. The word is still there for screen readers and as a native
+     * hint on hover, so a dense list can drop it visually without going silent.
+     */
+    hideLabel?: boolean
+    /**
+     * Speak changes as they happen (`role="status"`). Off by default: a table
+     * of twenty servers announcing each flip would drown everything else.
+     * Turn it on for the one status the user is waiting on.
+     */
+    announce?: boolean
+    labels?: Partial<Record<StatusKind, string>>
+  }>(),
+  { variant: "inline", size: "md", hideLabel: false, announce: false, pulse: undefined },
+)
+
+const names = useLabels<Record<StatusKind, string>>("status", STATUS_LABELS, () => props.labels)
+
+const look = computed(() => STATUS_LOOK[props.state] ?? STATUS_LOOK.unknown)
+const tone = computed(() => props.tone ?? look.value.tone)
+const pulsing = computed(() => props.pulse ?? look.value.pulse)
+const word = computed(() => props.label ?? names.value[props.state] ?? props.state)
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  props.variant === "pill"
+    ? ""
+    : [
+        "inline-flex shrink-0 items-center align-middle font-medium leading-[1.2] whitespace-nowrap text-muted-strong",
+        props.size === "sm" ? "gap-1.5 text-[11px]" : "gap-2 text-xs",
+      ].join(" "),
+)
+
+
+const dotSize = computed(() => (props.size === "sm" ? "size-1.5" : "size-2"))
+</script>
+
+<template>
+  <component
+    :is="variant === 'pill' ? LpBadge : 'span'"
+    :role="announce ? 'status' : undefined"
+    :title="hideLabel ? word : undefined"
+    :class="rootClass"
+    v-bind="variant === 'pill' ? { ...rest, tone, size } : rest"
+  >
+    <span class="relative inline-flex shrink-0" :class="dotSize" aria-hidden="true">
+      <!-- The halo is the same colour as the light and scales out from it, so
+           it stays in step with a tone change instead of lagging a beat. -->
+      <span
+        class="lp-status-halo absolute inset-0 rounded-full transition-[background-color,opacity] duration-(--duration-medium)"
+        :class="pulsing ? 'lp-status-halo--on' : 'opacity-0'"
+        :style="{ backgroundColor: TONE_COLOR[tone] }"
+      />
+      <span
+        class="relative inline-flex size-full rounded-full transition-[background-color] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none"
+        :style="{ backgroundColor: TONE_COLOR[tone] }"
+      />
+    </span>
+    <span v-if="hideLabel" class="sr-only">{{ word }}</span>
+    <LpRollingText v-else-if="variant === 'pill'" :value="word" align="start" />
+    <LpShift v-else axis="width">
+      <LpRollingText :value="word" align="start" />
+    </LpShift>
+  </component>
+</template>
+
+<style>
+/*
+ * Unscoped and namespaced, like LpSkeleton's pulse. The keyframe is the kit's
+ * halo (tokens.css): one animation name keeps every live light on a page
+ * breathing in phase, because CSS animations are timed against the document
+ * rather than against when each one mounted. A column of servers pulsing out
+ * of step reads as flicker. A small light swells to 2.6x, the halo's default.
+ */
+.lp-status-halo--on {
+  animation: lp-halo 2s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lp-status-halo--on {
+    animation: none;
+    opacity: 0;
+  }
+}
+</style>

package/src/components/LpStepMark.vue

@@ -0,0 +1,138 @@
+<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">
+/*
+ * The state of one job as a round glyph: hollow while it waits, spinning while
+ * it runs, a tick, a cross, a dash for skipped, a slash for cancelled.
+ *
+ * LpPipeline draws its steps with it, and it stands alone wherever a single
+ * job's state sits next to its name: a row in a deploys table, a check in a
+ * list, a toast about a build. A change of status is a change the viewer is
+ * waiting for, so it shows as one: the colours ease, the glyph flips to the
+ * new one (LpRollingText), and a running mark breathes a halo so it reads as
+ * live even while the spinner is small.
+ *
+ * Decorative by default (the text next to it says the state); pass `label`
+ * when the mark is all there is.
+ *
+ * `variant="step"` is the same mark as a wizard draws it (LpStepper): the
+ * step you are on is a brand ring with its number (`status="current"`), a
+ * finished one is filled with the brand colour rather than the "passed"
+ * green, and the ones ahead are a quiet ring with no fill of their own.
+ */
+import { computed } from "vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import LpIcon from "./LpIcon.vue"
+import LpLoader from "./LpLoader.vue"
+import LpRollingText from "./LpRollingText.vue"
+import type { StepStatus } from "./pipeline"
+import { TONES } from "./tone"
+
+/** A job's state, plus `current`: the step a person is on in a flow they drive. */
+export type StepMarkStatus = StepStatus | "current"
+
+const props = withDefaults(
+  defineProps<{
+    status: StepMarkStatus
+    /** `status` (default) colours a job's outcome; `step` is a wizard's step (see above). */
+    variant?: "status" | "step"
+    size?: "sm" | "md" | "lg"
+    /** Shown inside a pending mark: the step's number in a numbered flow. */
+    number?: number | string
+    /** Shown inside a pending mark instead of the number. */
+    icon?: string
+    /** Accessible name; without it the mark is hidden from assistive tech. */
+    label?: string
+  }>(),
+  { variant: "status", size: "md" },
+)
+
+const BOX = { sm: "size-4 text-[9px]", md: "size-6 text-[11px]", lg: "size-8 text-xs" }
+const GLYPH = { sm: 10, md: 14, lg: 18 }
+
+// Outcomes in the kit's tones (tone.ts): a ring for what is under way, a solid
+// disc for what is decided. The quiet states are greys, not tones.
+const TONE: Record<StepMarkStatus, string> = {
+  pending: "border-line-strong bg-surface text-muted",
+  current: `bg-surface ${TONES.brand.border} ${TONES.brand.text}`,
+  running: `${TONES.brand.border} ${TONES.brand.chip}`,
+  success: `border-transparent text-ink-inverse ${TONES.success.bg}`,
+  failed: `border-transparent text-ink-inverse ${TONES.danger.bg}`,
+  skipped: "border-dashed border-line-strong bg-surface text-muted",
+  cancelled: "border-line-strong bg-surface-soft text-muted-strong",
+}
+
+// A wizard's step sits on whatever surface the form has, so only its ring and number are its own.
+const STEP_TONE: Partial<Record<StepMarkStatus, string>> = {
+  pending: "border-line text-muted",
+  current: `${TONES.brand.border} ${TONES.brand.text}`,
+  success: `border-transparent text-ink-inverse ${TONES.brand.bg}`,
+}
+
+const ICON: Partial<Record<StepMarkStatus, string>> = {
+  success: "lucide:check",
+  failed: "lucide:x",
+  skipped: "lucide:minus",
+  cancelled: "lucide:slash",
+}
+
+/*
+ * What the glyph shows, as one value the roll keys on: a status change flips
+ * it, a pending step's number changing (a reordered flow) flips it too.
+ */
+const glyph = computed(() => {
+  // Pending and current show the same thing, so arriving at a step keeps its number in place.
+  if (props.status !== "pending" && props.status !== "current") return props.status
+  if (props.icon) return "icon"
+  return props.number !== undefined ? `n:${props.number}` : "pending"
+})
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  `relative inline-flex shrink-0 items-center justify-center rounded-pill border font-semibold tabular-nums transition-[color,background-color,border-color] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none ${BOX[props.size]} ${(props.variant === "step" && STEP_TONE[props.status]) || TONE[props.status]}`,
+)
+</script>
+
+<template>
+  <span
+    :class="rootClass"
+    :role="label ? 'img' : undefined"
+    :aria-label="label || undefined"
+    :aria-hidden="label ? undefined : 'true'"
+    :data-status="status"
+    v-bind="rest"
+  >
+    <span v-if="status === 'running'" class="lp-step-halo pointer-events-none absolute -inset-px rounded-pill border border-brand" />
+    <LpRollingText mode="flip" :duration="260" :value="glyph">
+      <template #default="{ value }">
+        <LpLoader
+          v-if="value === 'running'"
+          :delay="0"
+          :min-visible="0"
+          size="inline"
+          :class="size === 'sm' ? 'text-[10px]' : size === 'md' ? 'text-sm' : 'text-lg'"
+        />
+        <LpIcon v-else-if="ICON[value as StepMarkStatus]" :name="ICON[value as StepMarkStatus]!" :size="GLYPH[size]" />
+        <LpIcon v-else-if="value === 'icon' && icon" :name="icon" :size="variant === 'step' ? GLYPH[size] : GLYPH[size] - 2" />
+        <template v-else-if="String(value).startsWith('n:')">{{ number }}</template>
+        <!-- An empty slot would fall back to printing the raw key. -->
+        <span v-else class="block size-0" />
+      </template>
+    </LpRollingText>
+  </span>
+</template>
+
+<style>
+/* The kit's halo (tokens.css), swelling less: this ring already starts at the mark's own size. */
+.lp-step-halo {
+  --halo-scale: 1.6;
+  animation: lp-halo 1.6s var(--ease-emphasized, ease-out) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .lp-step-halo { animation: none; opacity: 0; }
+}
+</style>