@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/tilt-card/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "tilt-card",
+  title: "Tilt Card",
+  description:
+    "A card that tilts in 3D toward the pointer, with a glare that follows it and layers that float at their own depth, springing back flat on leave.",
+  category: "display",
+  status: "beta",
+  dependencies: [],
+  registryDependencies: ["card"],
+  files: ["tilt-card.tsx"],
+  a11y:
+    "The tilt is decoration on an ordinary Card: it adds no role, name or tab stop, so a card that acts as a link " +
+    "should contain a real link (the stories stretch one over the card). The glare layer is aria-hidden and ignores the pointer. " +
+    "The card stays flat for touch and coarse pointers and under prefers-reduced-motion. Keyboard focus on the card or " +
+    "anything inside it shows a small static lift instead of a tilt, and a focusable card gets the standard focus ring.",
+});

package/src/components/tilt-card/tilt-card.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+// Original design (pattern inspired by bencho Tilt card; no code referenced).
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type PointerEvent,
+  type Ref,
+} from "react";
+
+import { Card } from "@/components/card";
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * How it moves
+ *
+ * Pointer position is written straight to the element — its transform, and a
+ * handful of custom properties the glare and the layers read — so a pointer
+ * move costs no React render. CSS transitions do all the easing: a short
+ * ease-out while following smooths the steps between pointer events, and an
+ * overshooting ease on leave is the spring back to flat.
+ *
+ * Parallax layers are shifted with the `translate` property rather than
+ * translateZ. A true 3D layer needs `preserve-3d`, which `overflow: hidden`
+ * anywhere in the card silently flattens, and it changes size the moment the
+ * perspective appears. A 2D shift proportional to the tilt reads the same and
+ * cannot be broken by a consumer's class.
+ *
+ * Keyboard focus never tilts — a focused card has no pointer to lean toward —
+ * it lifts, statically, using `translate` so it composes with any tilt a mouse
+ * is applying at the same moment.
+ */
+
+const surface = cn(
+  "group/tilt relative isolate",
+  "transition-[transform,translate,box-shadow]",
+  "duration-[var(--duration-slow),var(--duration-normal),var(--duration-normal)]",
+  "ease-[var(--ease-overshoot),var(--ease-out-quint),var(--ease-out-quint)]",
+  "data-[tilt=follow]:duration-[var(--duration-fast),var(--duration-normal),var(--duration-normal)]",
+  "data-[tilt=follow]:ease-[var(--ease-out-quint)]",
+  "data-[tilt=follow]:shadow-lg",
+  focusRing,
+  "focus-visible:-translate-y-1 focus-visible:shadow-md",
+  "has-focus-visible:-translate-y-1 has-focus-visible:shadow-md",
+);
+
+const glareLayer = cn(
+  "pointer-events-none absolute inset-0 z-10 rounded-[inherit] opacity-0",
+  "transition-opacity duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+  "group-data-[tilt=follow]/tilt:opacity-100",
+);
+
+const glareStyle: CSSProperties = {
+  backgroundImage:
+    "radial-gradient(circle at var(--tilt-glare-x, 50%) var(--tilt-glare-y, 50%), " +
+    "color-mix(in oklab, var(--color-background) 55%, transparent), transparent 65%)",
+};
+
+const layerDrift = cn(
+  "relative transition-[translate] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]",
+  "group-data-[tilt=follow]/tilt:duration-[var(--duration-fast)] group-data-[tilt=follow]/tilt:ease-[var(--ease-out-quint)]",
+);
+
+/** Whether the tilt may run: never for touch, coarse pointers or reduced motion. */
+function motionAllowed(pointerType: string): boolean {
+  if (pointerType === "touch") return false;
+  if (typeof window.matchMedia !== "function") return true;
+  return !(
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches ||
+    window.matchMedia("(pointer: coarse)").matches
+  );
+}
+
+function assignRef<T>(ref: Ref<T> | undefined, node: T | null) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+
+/** Rounds away float noise so the written transform stays short and stable. */
+function round(value: number): number {
+  return Math.round(value * 100) / 100 || 0;
+}
+
+export interface TiltCardProps extends ComponentPropsWithRef<"div"> {
+  /** The largest tilt, in degrees, reached with the pointer at an edge. 0 keeps the card flat. */
+  maxTilt?: number;
+  /** Distance, in pixels, of the viewer from the card. Smaller is more dramatic. */
+  perspective?: number;
+  /** How much the card grows while tilting. 1 keeps its size. */
+  scale?: number;
+  /** A soft highlight that follows the pointer across the surface. */
+  glare?: boolean;
+  /** Keeps the card flat, as if the pointer were elsewhere. */
+  disabled?: boolean;
+}
+
+/**
+ * A card that tilts in 3D toward the pointer and springs back flat when it
+ * leaves.
+ *
+ * Decoration on an ordinary Card: it never moves for touch, coarse pointers or
+ * users who prefer reduced motion. Mark children with `TiltCardLayer` to have
+ * them drift further than the surface, for depth.
+ */
+export function TiltCard({
+  className,
+  maxTilt = 10,
+  perspective = 800,
+  scale = 1.02,
+  glare = true,
+  disabled = false,
+  children,
+  ref,
+  onPointerMove,
+  onPointerLeave,
+  ...props
+}: TiltCardProps) {
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  // The card's box, measured on the first move of a hover, while it is still
+  // flat. A tilted card's bounding box is its projection, so measuring on
+  // every move would have the card chase its own lean.
+  const box = useRef<DOMRect | null>(null);
+  const tilted = useRef(false);
+  const inert = disabled || maxTilt === 0;
+
+  const setRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      cardRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref],
+  );
+
+  const flatten = useCallback(() => {
+    box.current = null;
+    const element = cardRef.current;
+    if (!element || !tilted.current) return;
+    tilted.current = false;
+    element.dataset.tilt = "rest";
+    element.style.transform = "";
+    element.style.setProperty("--tilt-px", "0");
+    element.style.setProperty("--tilt-py", "0");
+  }, []);
+
+  const lean = useCallback(
+    (clientX: number, clientY: number, pointerType: string) => {
+      const element = cardRef.current;
+      if (!element || inert || !motionAllowed(pointerType)) {
+        flatten();
+        return;
+      }
+      box.current ??= element.getBoundingClientRect();
+      const { left, top, width, height } = box.current;
+      if (width === 0 || height === 0) return;
+
+      // -1 at the start edge, 1 at the end edge, clamped for pointers that
+      // slip past a rounded corner before `pointerleave` arrives.
+      const x = Math.min(1, Math.max(-1, ((clientX - left) / width) * 2 - 1));
+      const y = Math.min(1, Math.max(-1, ((clientY - top) / height) * 2 - 1));
+
+      // The side under the pointer presses away from the viewer: rotateY
+      // positive sends the right edge back, rotateX negative the bottom edge.
+      tilted.current = true;
+      element.dataset.tilt = "follow";
+      element.style.transform =
+        `perspective(${String(perspective)}px) ` +
+        `rotateX(${String(round(-y * maxTilt))}deg) ` +
+        `rotateY(${String(round(x * maxTilt))}deg) ` +
+        `scale3d(${String(scale)}, ${String(scale)}, 1)`;
+      element.style.setProperty("--tilt-px", String(round(x)));
+      element.style.setProperty("--tilt-py", String(round(y)));
+      element.style.setProperty("--tilt-glare-x", `${String(round(((x + 1) / 2) * 100))}%`);
+      element.style.setProperty("--tilt-glare-y", `${String(round(((y + 1) / 2) * 100))}%`);
+    },
+    [flatten, inert, maxTilt, perspective, scale],
+  );
+
+  // Scrolling moves the card under a still pointer; the cached box is stale.
+  useEffect(() => {
+    const forget = () => {
+      box.current = null;
+    };
+    window.addEventListener("scroll", forget, { passive: true, capture: true });
+    window.addEventListener("resize", forget, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", forget, { capture: true });
+      window.removeEventListener("resize", forget);
+    };
+  }, []);
+
+  // Becoming disabled mid-tilt should not leave the card stranded at an angle.
+  useEffect(() => {
+    if (inert) flatten();
+  }, [inert, flatten]);
+
+  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
+    onPointerMove?.(event);
+    lean(event.clientX, event.clientY, event.pointerType);
+  }
+
+  function handlePointerLeave(event: PointerEvent<HTMLDivElement>) {
+    onPointerLeave?.(event);
+    flatten();
+  }
+
+  return (
+    <Card
+      ref={setRef}
+      data-slot="tilt-card"
+      data-tilt="rest"
+      className={cn(surface, className)}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerLeave}
+      {...props}
+    >
+      {children}
+      {glare ? (
+        <span
+          aria-hidden="true"
+          data-slot="tilt-card-glare"
+          className={glareLayer}
+          style={glareStyle}
+        />
+      ) : null}
+    </Card>
+  );
+}
+
+export interface TiltCardLayerProps extends ComponentPropsWithRef<"div"> {
+  /**
+   * How far, in pixels, the layer drifts toward the pointer at full tilt —
+   * on top of the card's own lean. Larger reads as nearer the viewer; a
+   * negative depth sinks the layer behind the surface.
+   */
+  depth?: number;
+}
+
+/** Content inside a TiltCard that floats at its own depth. */
+export function TiltCardLayer({ className, depth = 12, style, ...props }: TiltCardLayerProps) {
+  const d = String(depth);
+  return (
+    <div
+      data-slot="tilt-card-layer"
+      className={cn(layerDrift, className)}
+      style={{
+        translate: `calc(var(--tilt-px, 0) * ${d}px) calc(var(--tilt-py, 0) * ${d}px)`,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/time-stack/index.ts

@@ -0,0 +1,6 @@
+export {
+  TimeStack,
+  timeStackVariants,
+  type TimeStackItem,
+  type TimeStackProps,
+} from "./time-stack";

package/src/components/time-stack/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "time-stack",
+  title: "Time Stack",
+  description:
+    "Cards receding in depth, stepped through with a timeline scrubber, the mouse wheel or the arrow keys.",
+  category: "display",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: [],
+  files: ["time-stack.tsx"],
+  a11y:
+    'The scrubber is a vertical role="slider" whose aria-valuetext names the moment ("1w ago: Forest Trail"). ' +
+    "Newest is at the bottom, so ArrowUp/ArrowRight go back in time as a vertical slider requires; ArrowDown/Left, " +
+    "Page Up/Down, Home and End work too. Only the current card is exposed (a labelled group); the cards behind " +
+    "and before it are inert. Wheel steps are announced through a polite status, and the wheel only captures " +
+    "scrolling while there is a card to step to. Motion stops under reduced motion.",
+});

package/src/components/time-stack/time-stack.tsx

@@ -0,0 +1,385 @@
+"use client";
+
+// Ported from amicro Time Machine Stack (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  Fragment,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactNode,
+} from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * Cards recede in depth behind the current one; the ones already passed fall
+ * forward and fade. A timeline scrubber at the inline end picks the moment.
+ *
+ * The scrubber is a vertical role="slider" with the newest entry at the bottom
+ * and history rising above it, as in macOS Time Machine — so ArrowUp, which a
+ * vertical slider must use to increase, goes back in time and moves the thumb
+ * up. amicro stacks the newest at the top; that order would make the keys
+ * contradict the picture.
+ *
+ * Motion is CSS transitions on transform and opacity. The source's gooey SVG
+ * filter is dropped: it softened every card edge and could not be themed.
+ */
+
+const timeStackVariants = cva(
+  "relative flex w-full items-center justify-center gap-6 overflow-hidden rounded-2xl p-4",
+  {
+    variants: {
+      /** Card width. The stack's depth and height derive from it. */
+      size: {
+        sm: "[--ts-card:10rem]",
+        md: "[--ts-card:13.75rem]",
+        lg: "[--ts-card:18rem]",
+      },
+      tone: {
+        media: "",
+        mono: "",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "media",
+    },
+  },
+);
+
+export interface TimeStackItem {
+  /** Names the card. */
+  title: string;
+  /** The moment on the timeline: "Today", "1w ago", a date. */
+  label: string;
+  /** Image URL for the card when `tone="media"` and no `content` is given. */
+  image?: string;
+  /** Alternative text for `image`. Defaults to empty: the title names the card. */
+  alt?: string;
+  /** Custom card content. Replaces the image or the numbered tile. */
+  content?: ReactNode;
+}
+
+export interface TimeStackProps
+  extends
+    Omit<ComponentPropsWithRef<"section">, "children">,
+    VariantProps<typeof timeStackVariants> {
+  /** Newest first: index 0 is the front of the stack and the bottom of the timeline. */
+  items: TimeStackItem[];
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Step through with the mouse wheel over the stack. */
+  wheel?: boolean;
+  /** Select as the pointer moves over the timeline, as in the source, rather than on press. */
+  hoverScrub?: boolean;
+  /** Accessible name of the scrubber. */
+  scrubberLabel?: string;
+}
+
+/** Placement of one card by its distance from the current one. */
+function cardStyle(offset: number, count: number, i: number): CSSProperties {
+  const past = offset < 0;
+  return {
+    zIndex: count - i,
+    opacity: past ? 0 : Math.max(0, 1 - offset * 0.2),
+    transform: past
+      ? "translate3d(0, calc(var(--ts-card) * 1.35), calc(var(--ts-card) * 0.9)) rotateX(-20deg) scale(1.3)"
+      : [
+          `translate3d(0, calc(var(--ts-card) * ${String(-offset * 0.055)}),`,
+          `calc(var(--ts-card) * ${String(-offset * 0.27)}))`,
+          `rotateX(${String(offset * 2)}deg)`,
+        ].join(" "),
+  };
+}
+
+const WHEEL_STEP = 60;
+
+/** A depth stack of moments with a timeline scrubber — amicro's Time Machine. */
+export function TimeStack({
+  className,
+  items,
+  index: indexProp,
+  defaultIndex = 0,
+  onIndexChange,
+  wheel = true,
+  hoverScrub = false,
+  scrubberLabel = "Timeline",
+  size,
+  tone,
+  ref,
+  "aria-label": ariaLabel,
+  ...props
+}: TimeStackProps) {
+  const count = items.length;
+  const last = Math.max(0, count - 1);
+  const clamp = (value: number) => Math.min(last, Math.max(0, value));
+  const [uncontrolled, setUncontrolled] = useState(() => clamp(defaultIndex));
+  const index = clamp(indexProp ?? uncontrolled);
+  const [hovered, setHovered] = useState<number | null>(null);
+  const [announcement, setAnnouncement] = useState("");
+  const id = useId();
+  const stackRef = useRef<HTMLDivElement>(null);
+  const tickRefs = useRef<(HTMLSpanElement | null)[]>([]);
+  const pressing = useRef<number | null>(null);
+
+  function goTo(next: number, announce = false) {
+    const target = clamp(next);
+    if (target === index) return;
+    if (indexProp === undefined) setUncontrolled(target);
+    onIndexChange?.(target);
+    const item = items[target];
+    if (announce && item) setAnnouncement(`${item.label}: ${item.title}`);
+  }
+
+  // The latest goTo for the native wheel listener, which is bound once.
+  const goToRef = useRef(goTo);
+  const indexRef = useRef(index);
+  useEffect(() => {
+    goToRef.current = goTo;
+    indexRef.current = index;
+  });
+
+  // React's wheel listener is passive and cannot stop the page scrolling, so
+  // bind natively. The page still scrolls once the stack is at either end.
+  useEffect(() => {
+    const stack = stackRef.current;
+    if (!stack || !wheel) return;
+    let accumulated = 0;
+    function onWheel(event: WheelEvent) {
+      const direction = Math.sign(event.deltaY);
+      const next = indexRef.current + direction;
+      if (direction === 0 || next < 0 || next > last) return;
+      event.preventDefault();
+      accumulated += event.deltaY;
+      if (Math.abs(accumulated) < WHEEL_STEP) return;
+      accumulated = 0;
+      goToRef.current(next, true);
+    }
+    stack.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      stack.removeEventListener("wheel", onWheel);
+    };
+  }, [wheel, last]);
+
+  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    const steps: Record<string, number> = {
+      ArrowUp: index + 1,
+      ArrowRight: index + 1,
+      ArrowDown: index - 1,
+      ArrowLeft: index - 1,
+      PageUp: index + 2,
+      PageDown: index - 2,
+      Home: 0,
+      End: last,
+    };
+    const next = steps[event.key];
+    if (next === undefined) return;
+    event.preventDefault();
+    goTo(next);
+  }
+
+  /** The tick nearest the pointer, by measured geometry. */
+  function nearest(clientY: number) {
+    let best: number | null = null;
+    let distance = Infinity;
+    tickRefs.current.forEach((tick, i) => {
+      if (!tick) return;
+      const rect = tick.getBoundingClientRect();
+      const d = Math.abs(clientY - (rect.top + rect.height / 2));
+      if (d < distance) {
+        distance = d;
+        best = i;
+      }
+    });
+    return best;
+  }
+
+  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
+    if (event.button !== 0) return;
+    pressing.current = event.pointerId;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const at = nearest(event.clientY);
+    if (at !== null) goTo(at);
+  }
+
+  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
+    const at = nearest(event.clientY);
+    setHovered(at);
+    if (at !== null && (hoverScrub || pressing.current === event.pointerId)) goTo(at);
+  }
+
+  function release(event: PointerEvent<HTMLDivElement>) {
+    if (pressing.current !== event.pointerId) return;
+    pressing.current = null;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+  }
+
+  const current = items[index];
+  const card = cn(
+    "grid size-full place-items-center overflow-hidden rounded-2xl border border-border shadow-lg",
+    tone === "mono"
+      ? "bg-muted text-sm font-bold text-muted-foreground"
+      : "bg-card text-card-foreground",
+  );
+
+  return (
+    <section
+      ref={ref}
+      data-slot="time-stack"
+      aria-roledescription="time stack"
+      aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : "Time stack")}
+      className={cn(timeStackVariants({ size, tone }), className)}
+      {...props}
+    >
+      <div
+        ref={stackRef}
+        id={`${id}-stack`}
+        data-slot="time-stack-stack"
+        className="relative grid flex-1 place-items-center"
+        style={{
+          maxWidth: "calc(var(--ts-card) * 1.32)",
+          aspectRatio: "4 / 3",
+          perspective: "calc(var(--ts-card) * 3.6)",
+          transformStyle: "preserve-3d",
+        }}
+      >
+        {items.map((item, i) => {
+          const offset = i - index;
+          const isCurrent = offset === 0;
+          return (
+            <div
+              key={i}
+              role={isCurrent ? "group" : undefined}
+              aria-roledescription={isCurrent ? "slide" : undefined}
+              aria-label={isCurrent ? `${item.label}: ${item.title}` : undefined}
+              aria-hidden={isCurrent ? undefined : true}
+              inert={!isCurrent}
+              data-slot="time-stack-card"
+              data-state={offset < 0 ? "past" : isCurrent ? "current" : "future"}
+              className={cn(
+                "col-start-1 row-start-1 origin-center will-change-transform",
+                "transition-[transform,opacity] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]",
+              )}
+              style={{
+                width: "var(--ts-card)",
+                aspectRatio: "220 / 135",
+                ...cardStyle(offset, count, i),
+              }}
+            >
+              <div className={card}>
+                {item.content ??
+                  (tone !== "mono" && item.image ? (
+                    <img
+                      src={item.image}
+                      alt={item.alt ?? ""}
+                      draggable={false}
+                      className="size-full object-cover"
+                    />
+                  ) : (
+                    <span aria-hidden="true">{i + 1}</span>
+                  ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div
+        role="slider"
+        tabIndex={0}
+        aria-label={scrubberLabel}
+        aria-orientation="vertical"
+        aria-valuemin={0}
+        aria-valuemax={last}
+        aria-valuenow={index}
+        aria-valuetext={current ? `${current.label}: ${current.title}` : undefined}
+        aria-controls={`${id}-stack`}
+        data-slot="time-stack-scrubber"
+        className={cn(
+          "group/scrub relative z-10 flex cursor-pointer touch-none flex-col-reverse items-end rounded-md px-1 py-2 select-none",
+          "[--ts-origin:right] rtl:[--ts-origin:left]",
+          focusRing,
+        )}
+        onKeyDown={handleKeyDown}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={release}
+        onPointerCancel={release}
+        onPointerLeave={() => {
+          setHovered(null);
+        }}
+      >
+        {items.map((item, i) => {
+          const selected = i === index;
+          const showLabel = hovered === i || (selected && hovered === null);
+          const near = hovered !== null && Math.abs(i - hovered) < 1;
+          return (
+            <Fragment key={i}>
+              {i > 0
+                ? [0, 1].map((sub) => (
+                    <span
+                      key={sub}
+                      aria-hidden="true"
+                      data-slot="time-stack-subtick"
+                      className="flex w-20 justify-end py-px"
+                    >
+                      <span
+                        className={cn(
+                          "h-[3px] w-6 rounded-full bg-foreground/20 transition-[scale,opacity] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+                          near ? "scale-x-115 opacity-50" : "opacity-30",
+                        )}
+                        style={{ transformOrigin: "var(--ts-origin)" }}
+                      />
+                    </span>
+                  ))
+                : null}
+              <span
+                ref={(node) => {
+                  tickRefs.current[i] = node;
+                }}
+                aria-hidden="true"
+                data-slot="time-stack-tick"
+                data-state={selected ? "active" : "inactive"}
+                className="relative flex w-20 items-center justify-end py-px"
+              >
+                <span
+                  data-slot="time-stack-tick-label"
+                  className={cn(
+                    "absolute end-10 text-[10px] font-semibold whitespace-nowrap",
+                    "transition-[opacity,scale,filter] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+                    selected ? "text-primary" : "text-foreground/90",
+                    !showLabel && "scale-80 opacity-0 blur-[2px]",
+                  )}
+                >
+                  {item.label}
+                </span>
+                <span
+                  className={cn(
+                    "h-[3px] w-6 rounded-full transition-[scale,background-color] duration-[var(--duration-fast)] ease-[var(--ease-overshoot)]",
+                    selected ? "bg-primary" : "bg-foreground/50",
+                    hovered !== null && (selected ? "scale-x-140" : near ? "scale-x-125" : ""),
+                  )}
+                  style={{ transformOrigin: "var(--ts-origin)" }}
+                />
+              </span>
+            </Fragment>
+          );
+        })}
+      </div>
+
+      <p role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+        {announcement}
+      </p>
+    </section>
+  );
+}
+
+export { timeStackVariants };

package/src/components/toast/meta.ts

@@ -14,5 +14,6 @@ export const meta = defineMeta({
     "(foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, " +
     "focus and window blur, and F8 moves focus into the toast list from anywhere. An action " +
     "must carry altText describing how to do the same thing without the toast, since it may " +
-    "be gone before a screen reader user reaches it.",
+    "be gone before a screen reader user reaches it. The optional spring entrance stops under " +
+    "reduced motion.",
 });