@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/sparkline/sparkline.module.css

@@ -0,0 +1,26 @@
+.figure { display: grid; min-width: 0; gap: var(--space-group); margin: 0; color: var(--foreground); }.caption { display: flex; align-items: baseline; gap: var(--space-related); min-width: 0; color: var(--text-secondary); font-size: var(--text-sm); }.label { min-width: 0; overflow: hidden; white-space: nowrap; }.caption strong { margin-left: auto; color: var(--foreground); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); font-variant-numeric: tabular-nums; }.caption small { flex: none; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; transition: color var(--duration-standard) var(--ease-standard); }
+.accent { color: var(--accent-strong); stroke: var(--accent); }.success { color: var(--success); stroke: var(--success); }.warning { color: var(--warning); stroke: var(--warning); }.danger { color: var(--danger); stroke: var(--danger); }
+/* The scrubbed date is context, not a change, so it stays neutral whatever the tone. */
+.point { color: var(--text-secondary); }
+
+/* Changing text rolls in place. Outgoing pieces are popped out of flow, so the wrapper never holds both widths; numbers stay anchored to their right edge. */
+.roll { position: relative; display: inline-flex; max-width: 100%; overflow-x: clip; white-space: pre; vertical-align: top; }
+.roll[data-end] { justify-content: flex-end; }
+.track, .slot, .glyph { position: relative; display: inline-block; white-space: pre; }
+.roll[data-whole] .track, .roll[data-whole] .slot, .roll[data-whole] .glyph { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
+.sizer { position: absolute; top: 0; left: 0; visibility: hidden; white-space: pre; pointer-events: none; }
+
+/* The plot is the scrubber: hover or drag across it, or focus it and use the arrow keys. Vertical swipes still scroll the page. */
+.plot { position: relative; min-width: 0; border-radius: calc(var(--radius-control) / 2); outline: none; -webkit-tap-highlight-color: transparent; }
+.plot[data-interactive] { touch-action: pan-y; cursor: default; user-select: none; }
+.plot:focus-visible { --focus-outline-offset: 8px; }
+.chart { display: block; width: 100%; height: auto; overflow: visible; }
+.baseline { stroke: var(--border); stroke-width: 1; }
+/* The area under the line carries a faint wash of the line tone. */
+.area.area { fill: color-mix(in oklab, currentColor 9%, transparent); stroke: none; }
+.line, .trail { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
+.line { transition: stroke var(--duration-standard) var(--ease-standard); }
+.trail { stroke: var(--border-strong); }
+.cursor { stroke: var(--border-strong); stroke-width: 1; }
+.end { transition: stroke var(--duration-standard) var(--ease-standard); }
+@media (prefers-reduced-motion: reduce) { .line, .end, .caption small { transition: none; } }

package/components/split-button/split-button.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export interface SplitButtonAction {
+    label: string;
+    onSelect?: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+    icon?: ReactNode;
+}
+export interface SplitButtonProps {
+    label: string;
+    actions: SplitButtonAction[];
+    onClick?: () => void;
+    disabled?: boolean;
+    icon?: ReactNode;
+    variant?: "primary" | "secondary";
+}
+/** The main action morphs its icon and label in place while its width follows on a spring; the menu half never scales, so the menu opens from a still anchor. */
+export declare function SplitButton({ label, actions, onClick, disabled, icon, variant }: SplitButtonProps): import("react").JSX.Element;
+export default SplitButton;

package/components/split-button/split-button.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import * as DropdownPrimitive from "@radix-ui/react-dropdown-menu";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ChevronDown } from "lucide-react";
+import { MenuHighlight, useMenuHighlight } from "../../lib/menu-highlight.js";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import { TextMorph } from "../text-morph/text-morph.js";
+import styles from "./split-button.module.css";
+const rest = { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" };
+const fadeIn = { ...rest, opacity: 0 };
+const fadeOut = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+const iconIn = { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` };
+const iconOut = { ...iconIn, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } };
+/** Scale rides the spring; opacity and blur tween so blur never overshoots below zero. */
+const iconEnter = { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] }, filter: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } };
+/** Names the icon element, so swapping Copy for Check morphs while a re-render of the same icon stays still. */
+function iconKey(node) {
+    if (!isValidElement(node))
+        return node == null || typeof node === "boolean" ? "" : String(node);
+    const type = node.type;
+    return typeof type === "string" ? type : type?.displayName ?? type?.name ?? "icon";
+}
+/** The main action morphs its icon and label in place while its width follows on a spring; the menu half never scales, so the menu opens from a still anchor. */
+export function SplitButton({ label, actions, onClick, disabled, icon, variant = "primary" }) {
+    const reduced = useReducedMotion() ?? false;
+    const { highlight, reset, contentProps } = useMenuHighlight();
+    const glyph = iconKey(icon);
+    return _jsxs(DropdownPrimitive.Root, { onOpenChange: open => { if (open)
+            reset(); }, children: [_jsxs("div", { className: [styles.group, variant === "secondary" ? styles.secondary : ""].filter(Boolean).join(" "), children: [_jsxs("button", { className: styles.primary, type: "button", onClick: onClick, disabled: disabled, children: [_jsx("span", { className: styles.primarySlot, "aria-hidden": "true", children: _jsxs("span", { className: styles.primaryContent, children: [icon ? _jsx("span", { className: styles.mainIcon, children: _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { className: styles.iconPhase, initial: reduced ? fadeIn : iconIn, animate: rest, exit: reduced ? fadeOut : iconOut, transition: reduced ? { duration: motionTokens.duration.instant } : iconEnter, children: icon }, glyph) }) }) : null, _jsx(TextMorph, { children: label })] }) }), _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: label })] }), _jsx(DropdownPrimitive.Trigger, { className: styles.trigger, type: "button", "aria-label": `${label} more actions`, disabled: disabled, children: _jsx(ChevronDown, { className: styles.chevron, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsx(DropdownPrimitive.Portal, { children: _jsxs(DropdownPrimitive.Content, { className: styles.menu, sideOffset: 4, align: "end", collisionPadding: 12, loop: true, ...contentProps, children: [_jsx(MenuHighlight, { state: highlight, className: styles.highlight }), actions.map((action, index) => _jsxs(DropdownPrimitive.Item, { className: [styles.item, action.destructive ? styles.destructive : ""].filter(Boolean).join(" "), "data-tone": action.destructive ? "danger" : undefined, style: { "--i": index }, disabled: action.disabled, onSelect: action.onSelect, children: [action.icon ? _jsx("span", { className: styles.icon, "aria-hidden": "true", children: action.icon }) : null, action.label] }, action.label))] }) })] });
+}
+export default SplitButton;

package/components/split-button/split-button.module.css

@@ -0,0 +1,51 @@
+/* One pill, two actions. The whole pill presses in for the main action; the menu half answers in color only, because Radix measures it on pointerdown to place the menu. */
+.group { display: inline-flex; align-items: stretch; border: 1px solid var(--foreground); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--foreground); transition: transform var(--duration-spring) var(--ease-spring); }
+.group:has(> .primary:active:not(:disabled)) { transform: scale(.97); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
+.primary, .trigger { border: 0; background: var(--foreground); color: var(--background); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
+.primary { position: relative; display: inline-grid; min-height: var(--control-height-md); place-items: center; padding: 0 var(--space-inset); border-radius: calc(var(--radius-control) - 1px) 0 0 calc(var(--radius-control) - 1px); corner-shape: var(--corner-shape); font-size: var(--text-sm); font-weight: 500; }
+/* TextMorph springs the label's width, so the main half grows and shrinks with its text. */
+.primarySlot { display: inline-flex; min-width: 0; align-items: center; }
+.primaryContent { display: inline-flex; flex: none; align-items: center; gap: var(--space-related); white-space: nowrap; }
+.mainIcon { display: inline-grid; flex: none; place-items: center; }
+.iconPhase { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; }
+.trigger { display: grid; width: 38px; min-height: var(--control-height-md); place-items: center; border-left: 1px solid color-mix(in oklab, var(--background) 18%, var(--foreground)); border-radius: 0 calc(var(--radius-control) - 1px) calc(var(--radius-control) - 1px) 0; corner-shape: var(--corner-shape); }
+.chevron { transition: transform var(--duration-spring) var(--ease-spring); }
+.trigger[data-state="open"] .chevron { transform: rotate(180deg); }
+@media (hover: hover) and (pointer: fine) {
+  .primary:hover:not(:disabled), .trigger:hover:not(:disabled) { background: color-mix(in oklab, var(--foreground) 88%, var(--background)); }
+  .secondary .primary:hover:not(:disabled), .secondary .trigger:hover:not(:disabled) { background: var(--surface-muted); }
+}
+.primary:active:not(:disabled), .trigger:active:not(:disabled), .trigger[data-state="open"] { background: color-mix(in oklab, var(--foreground) 80%, var(--background)); }
+.primary:disabled, .trigger:disabled { cursor: not-allowed; opacity: .52; }
+.secondary { border-color: var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); }
+.secondary .primary, .secondary .trigger { min-height: var(--control-height-sm); background: var(--surface); color: var(--foreground); }
+.secondary .primary { min-width: 142px; border-radius: var(--radius-full) 0 0 var(--radius-full); corner-shape: round; padding-inline: var(--space-group); font-size: var(--text-xs); }
+.secondary .trigger { width: 32px; border-left-color: var(--border-subtle); border-radius: 0 var(--radius-full) var(--radius-full) 0; corner-shape: round; }
+.secondary .primary:active:not(:disabled), .secondary .trigger:active:not(:disabled), .secondary .trigger[data-state="open"] { background: color-mix(in oklab, var(--surface-muted), var(--border) 55%); }
+.icon { display: inline-flex; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+/* The menu grows from the trigger edge: offset toward the trigger, scale from the Radix origin, fade quickly; it leaves faster than it arrives.
+   Transitions instead of keyframes, so a close that interrupts the open reverses from where the menu is instead of snapping to rest first. */
+.menu { --menu-x: 0px; --menu-y: -5px; position: relative; z-index: 60; min-width: min(12rem, var(--radix-dropdown-menu-content-available-width)); max-width: var(--radix-dropdown-menu-content-available-width); padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); transform-origin: var(--radix-dropdown-menu-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring); }
+.menu[data-side="top"] { --menu-y: 5px; }
+.menu[data-side="left"] { --menu-x: 5px; --menu-y: 0px; }
+.menu[data-side="right"] { --menu-x: -5px; --menu-y: 0px; }
+@starting-style {
+  .menu[data-state="open"] { opacity: 0; transform: translate(var(--menu-x), var(--menu-y)) scale(.97); }
+  .menu[data-state="open"] .item { opacity: 0; transform: translate(calc(var(--menu-x) * .4), calc(var(--menu-y) * .4)); }
+}
+/* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */
+.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard); animation: menu-exit 130ms linear both; pointer-events: none; }
+.highlight { position: absolute; top: 0; right: 5px; left: 5px; border-radius: calc(var(--radius-container) - 6px); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
+.highlight[data-tone="danger"] { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); }
+/* One highlight glides between items for the pointer and jumps instantly for the keyboard (lib/menu-highlight). */
+.item { position: relative; display: flex; min-height: var(--control-height-sm); align-items: center; gap: 10px; padding: 0 11px; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); font-size: var(--text-sm); cursor: pointer; outline: none; transition: opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms), transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms); }
+.item[data-disabled] { cursor: default; opacity: .45; }
+.destructive { color: var(--danger); }
+@keyframes menu-exit { to { --menu-exit: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .group, .primary, .trigger, .chevron { transition: none; }
+  .group:has(> .primary:active:not(:disabled)) { transform: none; }
+  .item { transition: none; }
+  .menu, .menu[data-state="closed"] { transform: none; transition: opacity var(--duration-instant) linear; }
+}

package/components/stepper/stepper.d.ts

@@ -0,0 +1,36 @@
+export type StepperOrientation = "horizontal" | "vertical";
+export type StepperStatus = "complete" | "current" | "upcoming" | "error";
+export interface StepperStep {
+    /** Stable key, so each step keeps its own motion when the list changes. */
+    id: string;
+    label: string;
+    /** A short hint under the label. */
+    description?: string;
+    /** Marks the step as failed: the marker morphs into an alert and this message replaces the description. */
+    error?: string;
+}
+/**
+ * A steps indicator for onboarding, checkout, and setup flows. Place it above (horizontal) or beside (vertical) the step
+ * content and drive it with `current`; set `current` to `steps.length` once every step is done. Pass `onStepSelect` to let
+ * people return to completed steps by click or keyboard. For a multi-step form that owns its own content, use MultiStepForm.
+ */
+export interface StepperProps {
+    steps: StepperStep[];
+    /** Index of the step in progress. `steps.length` marks the whole flow complete. */
+    current: number;
+    orientation?: StepperOrientation;
+    /** Called with the index of a completed step when it is chosen. Without it the stepper is a read-only indicator. */
+    onStepSelect?: (index: number) => void;
+    /** `current` shows only the active step's description, for tight spaces. Errors always show. */
+    details?: "all" | "current";
+    /** Markers only; labels stay available to assistive tech. Horizontal steppers switch to this below 30rem on their own
+     *  and show the current step's label underneath. */
+    compact?: boolean;
+    /** Accessible name for the stepper. */
+    label?: string;
+    /** Announced, and shown in the compact caption, once every step is complete. */
+    completeLabel?: string;
+    className?: string;
+}
+export declare function Stepper({ steps, current, orientation, onStepSelect, details, compact, label, completeLabel, className }: StepperProps): import("react").JSX.Element;
+export default Stepper;

package/components/stepper/stepper.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./stepper.module.css";
+const blur = (radius) => `blur(${radius}px)`;
+const still = { duration: 0 };
+const leave = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const settle = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+const textFrom = { opacity: 0, y: "0.3em", filter: blur(motionTokens.blur.soft) };
+const textRest = { opacity: 1, y: 0, filter: blur(0) };
+const textGone = { opacity: 0, y: "-0.3em", filter: blur(motionTokens.blur.subtle) };
+const glyphFrom = { opacity: 0, scale: .5, filter: blur(motionTokens.blur.subtle) };
+const glyphRest = { opacity: 1, scale: 1, filter: blur(0) };
+/** Text that rises in with a small blur when it changes. Its slot springs to the new height, so a message that wraps
+ *  eases the steps below it down instead of pushing them; unrelated resizes (fonts, container width) follow exactly. */
+function SwapText({ text, className, reduced }) {
+    const inner = useRef(null);
+    const armedUntil = useRef(0);
+    const height = useMotionValue("auto");
+    useLayoutEffect(() => { armedUntil.current = performance.now() + 700; }, [text]);
+    useEffect(() => {
+        const node = inner.current, slot = node?.parentElement;
+        if (!node || !slot || typeof ResizeObserver === "undefined")
+            return;
+        let measured = false;
+        const observer = new ResizeObserver(() => {
+            const next = node.offsetHeight;
+            if (!measured || reduced || performance.now() > armedUntil.current) {
+                measured = true;
+                height.jump(next);
+                return;
+            }
+            animate(height, next, motionTokens.spring.smooth);
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [height, reduced]);
+    return _jsx(motion.span, { className: styles.slot, style: { height }, children: _jsx("span", { ref: inner, className: styles.slotInner, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: text ? _jsx(motion.span, { className: className, initial: textFrom, animate: textRest, exit: { ...textGone, transition: reduced ? still : leave }, transition: reduced ? still : settle, children: text }, `${className}:${text}`) : null }) }) });
+}
+/** The number, check, and alert share one spot: the outgoing glyph shrinks away while the next one pops in and draws its stroke. */
+function Glyph({ kind, number, delay, reduced }) {
+    const pop = reduced ? still : { scale: { ...motionTokens.spring.snappy, delay }, opacity: { duration: motionTokens.duration.fast, delay }, filter: { duration: motionTokens.duration.fast, delay } };
+    const exit = { ...glyphFrom, transition: reduced ? still : leave };
+    const draw = reduced ? still : { duration: motionTokens.duration.standard, ease: motionTokens.ease.enter, delay: delay + .04 };
+    if (kind === "number")
+        return _jsx(motion.span, { className: styles.glyph, initial: glyphFrom, animate: glyphRest, exit: exit, transition: pop, children: number });
+    return _jsx(motion.svg, { className: `${styles.glyph} ${styles.icon}`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", initial: glyphFrom, animate: glyphRest, exit: exit, transition: pop, children: kind === "check"
+            ? _jsx(motion.path, { d: "M5.5 12.5l4.25 4.25L18.5 8", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: draw })
+            : _jsxs(_Fragment, { children: [_jsx(motion.path, { d: "M12 6.75v6.5", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: draw }), _jsx(motion.circle, { cx: 12, cy: 17.4, r: 1.4, fill: "currentColor", stroke: "none", initial: { scale: 0 }, animate: { scale: 1 }, transition: reduced ? still : { ...motionTokens.spring.snappy, delay: delay + .16 } })] }) });
+}
+/** The ring grows out from behind the disc once progress arrives, so the eye lands on the new step after the connector fills. */
+function Marker({ number, kind, current, glyphDelay, ringDelay, reduced }) {
+    return _jsxs("span", { className: styles.marker, "aria-hidden": "true", children: [_jsx(AnimatePresence, { initial: false, children: current ? _jsx(motion.span, { className: styles.ring, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: reduced ? still : leave }, transition: reduced ? still : { scale: { ...motionTokens.spring.snappy, delay: ringDelay }, opacity: { duration: motionTokens.duration.fast, delay: ringDelay } } }, "ring") : null }), _jsx("span", { className: styles.disc, children: _jsx(AnimatePresence, { initial: false, children: _jsx(Glyph, { kind: kind, number: number, delay: glyphDelay, reduced: reduced }, kind) }) })] });
+}
+const statusText = { complete: "Completed", current: "", upcoming: "Not started", error: "Error" };
+export function Stepper({ steps, current, orientation = "horizontal", onStepSelect, details = "all", compact = false, label = "Progress", completeLabel = "All steps complete", className }) {
+    const reduced = useReducedMotion() ?? false;
+    const count = steps.length;
+    const active = Math.min(Math.max(Math.round(current), 0), count);
+    // Remember where progress came from, so a jump across several steps fills or drains its connectors one after another.
+    const [travel, setTravel] = useState({ to: active, from: active });
+    if (travel.to !== active)
+        setTravel({ to: active, from: travel.to });
+    const from = travel.from;
+    const gap = motionTokens.stagger.line;
+    const delayAt = (index) => {
+        if (reduced)
+            return 0;
+        if (active > from)
+            return index >= from && index < active ? (index - from) * gap : 0;
+        return index >= active && index < from ? (from - 1 - index) * gap : 0;
+    };
+    const ringDelay = reduced ? 0 : Math.max(0, Math.abs(active - from) - 1) * gap + .12;
+    const interactive = Boolean(onStepSelect);
+    const vertical = orientation === "vertical";
+    const done = active >= count;
+    const now = done ? undefined : steps[active];
+    /** Arrow keys move between the steps you can reach; Home and End jump to the first and the current one. */
+    function onKeyDown(event) {
+        const rtl = !vertical && getComputedStyle(event.currentTarget).direction === "rtl";
+        const back = ["ArrowUp", rtl ? "ArrowRight" : "ArrowLeft"], ahead = ["ArrowDown", rtl ? "ArrowLeft" : "ArrowRight"];
+        if (![...back, ...ahead, "Home", "End"].includes(event.key))
+            return;
+        const targets = Array.from(event.currentTarget.querySelectorAll("button[data-reachable]"));
+        const at = targets.indexOf(event.target);
+        if (at < 0)
+            return;
+        event.preventDefault();
+        const next = event.key === "Home" ? 0 : event.key === "End" ? targets.length - 1 : back.includes(event.key) ? Math.max(0, at - 1) : Math.min(targets.length - 1, at + 1);
+        targets[next]?.focus();
+    }
+    const Root = interactive ? "nav" : "div";
+    const classes = [styles.root, vertical ? styles.vertical : styles.horizontal, compact ? styles.compact : "", className].filter(Boolean).join(" ");
+    return _jsxs(Root, { className: classes, "aria-label": label, role: interactive ? undefined : "group", children: [_jsx("ol", { className: styles.list, style: vertical ? undefined : { gridTemplateColumns: count > 1 ? `repeat(${count - 1}, minmax(0, 1fr)) auto` : "auto" }, onKeyDown: interactive ? onKeyDown : undefined, children: steps.map((step, index) => {
+                    const isCurrent = index === active;
+                    const status = step.error ? "error" : index < active ? "complete" : isCurrent ? "current" : "upcoming";
+                    const clickable = interactive && index < active;
+                    const detail = step.error ?? (details === "all" || isCurrent ? step.description : undefined);
+                    const kind = step.error ? "error" : index < active ? "check" : "number";
+                    const content = _jsxs(_Fragment, { children: [_jsx(Marker, { number: index + 1, kind: kind, current: isCurrent, glyphDelay: delayAt(index), ringDelay: ringDelay, reduced: reduced }), _jsxs("span", { className: styles.text, children: [_jsx("span", { className: styles.label, children: step.label }), statusText[status] ? _jsxs("span", { className: styles.srOnly, children: [", ", statusText[status]] }) : null, _jsx(SwapText, { text: detail, className: step.error ? styles.error : styles.description, reduced: reduced })] })] });
+                    return _jsxs("li", { className: styles.item, "data-status": status, children: [index < count - 1 ? _jsx("span", { className: styles.connector, "aria-hidden": "true", children: _jsx(motion.span, { className: styles.fill, initial: false, animate: vertical ? { scaleY: index < active ? 1 : 0 } : { scaleX: index < active ? 1 : 0 }, transition: reduced ? still : { ...motionTokens.spring.smooth, delay: delayAt(index) } }, orientation) }) : null, interactive
+                                ? _jsx("button", { type: "button", className: styles.head, "data-clickable": clickable || undefined, "data-reachable": index <= active || undefined, "aria-current": isCurrent ? "step" : undefined, "aria-disabled": clickable ? undefined : true, tabIndex: clickable ? undefined : -1, onClick: clickable ? () => onStepSelect?.(index) : undefined, children: content })
+                                : _jsx("span", { className: styles.head, "aria-current": isCurrent ? "step" : undefined, children: content })] }, step.id);
+                }) }), vertical ? null : _jsxs("span", { className: styles.caption, "aria-hidden": "true", children: [_jsx(SwapText, { text: now?.label ?? completeLabel, className: styles.captionLabel, reduced: reduced }), _jsx(SwapText, { text: now?.error ?? now?.description, className: now?.error ? styles.error : styles.description, reduced: reduced })] }), _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: now ? `Step ${active + 1} of ${count}: ${now.label}` : completeLabel })] });
+}
+export default Stepper;

package/components/stepper/stepper.module.css

@@ -0,0 +1,74 @@
+.root { --marker: 1.75rem; --halo: 4px; min-width: 0; color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
+/* A horizontal stepper spans its container, so it can safely measure itself and fold into markers when space runs out. */
+.horizontal { width: 100%; container: stepper / inline-size; }
+.list { display: grid; margin: 0; padding: 0; list-style: none; }
+.item { position: relative; min-width: 0; }
+.horizontal .item:not(:last-child) { padding-inline-end: var(--space-inset); }
+.vertical .item:not(:last-child) { padding-bottom: var(--space-comfort); }
+.compact.vertical .item:not(:last-child) { padding-bottom: var(--space-section); }
+
+/* Buttons and spans share one head, so a chosen step keeps focus as it becomes the current one. */
+.head { display: grid; margin: 0; padding: 0; border: 0; border-radius: var(--space-related); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: start; cursor: default; -webkit-tap-highlight-color: transparent; }
+.head[data-clickable] { cursor: pointer; }
+.horizontal .head { width: fit-content; max-width: 100%; justify-items: start; row-gap: var(--space-group); }
+.vertical .head { width: 100%; grid-template-columns: var(--marker) minmax(0, 1fr); column-gap: var(--space-group); align-items: start; }
+.compact.vertical .head { grid-template-columns: var(--marker); column-gap: 0; }
+.head:focus-visible { --focus-outline-offset: 4px; }
+.head:focus:not(:focus-visible) { outline: none; }
+
+/* The ring sits behind the disc and grows out of it; the disc carries the state color and the glyph. */
+.marker { position: relative; display: grid; width: var(--marker); height: var(--marker); flex: none; place-items: center; }
+.ring { position: absolute; inset: calc(var(--halo) * -1); border-radius: var(--radius-full); corner-shape: round; background: var(--accent-subtle); transition: background-color var(--duration-standard) var(--ease-standard); }
+.disc { position: relative; display: grid; width: 100%; height: 100%; place-items: center; border-radius: var(--radius-full); corner-shape: round; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; transition: background-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.glyph { display: grid; grid-area: 1 / 1; place-items: center; }
+.icon { width: .875rem; height: .875rem; }
+.item[data-status="current"] .disc { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--foreground); }
+.item[data-status="complete"] .disc { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-foreground); }
+.item[data-status="error"] .disc { background: color-mix(in oklab, var(--danger) 10%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--danger); }
+.item[data-status="error"] .ring { background: color-mix(in oklab, var(--danger) 16%, transparent); }
+
+/* The track stays put; only the fill scales along it on a spring, from the step that was just finished. */
+.connector { position: absolute; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); pointer-events: none; }
+.horizontal .connector { top: calc(var(--marker) / 2 - 1px); inset-inline: calc(var(--marker) + var(--halo) + var(--space-tight)) calc(var(--halo) + var(--space-tight)); height: 2px; }
+/* Both ends keep a clear gap from the markers, and from the current step's ring. */
+.vertical .connector { top: calc(var(--marker) + var(--halo) + 2px); bottom: calc(var(--halo) + 2px); inset-inline-start: calc(var(--marker) / 2 - 1px); width: 2px; }
+.fill { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: var(--accent); }
+.horizontal .fill { transform-origin: left center; }
+.horizontal .fill:dir(rtl) { transform-origin: right center; }
+.vertical .fill { transform-origin: center top; }
+
+.text { display: grid; min-width: 0; }
+/* Centers the first line of the label on the marker. */
+.vertical .text { padding-top: .25rem; }
+.label { display: block; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; line-height: 1.25rem; overflow-wrap: break-word; transition: color var(--duration-standard) var(--ease-standard); }
+.item[data-status="complete"] .label { color: var(--text-secondary); }
+.item[data-status="current"] .label, .item[data-status="error"] .label { color: var(--foreground); }
+/* Changing text pops out of flow against this box while it leaves, so it must be the positioned parent. */
+.slot { display: block; }
+.slotInner { position: relative; display: block; }
+.description, .error { display: block; padding-top: 2px; font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-body); overflow-wrap: break-word; }
+.description { color: var(--text-muted); }
+.error { color: var(--danger); }
+
+.caption { display: none; margin-top: var(--space-group); }
+.captionLabel { display: block; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: 1.25rem; }
+
+@media (hover: hover) and (pointer: fine) {
+  .head[data-clickable]:hover .label { color: var(--foreground); }
+  .item[data-status="complete"] .head[data-clickable]:hover .disc { background: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
+  .item[data-status="error"] .head[data-clickable]:hover .disc { background: color-mix(in oklab, var(--danger) 18%, var(--surface)); }
+}
+.head[data-clickable]:active .disc { transform: scale(.92); }
+
+.srOnly, .compact .text { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.compact.horizontal .caption { display: grid; }
+/* Four labels no longer fit side by side: keep the markers and name the current step underneath. */
+@container stepper (max-width: 30rem) {
+  .horizontal .text { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+  .horizontal .caption { display: grid; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .disc, .ring, .label { transition: none; }
+  .head[data-clickable]:active .disc { transform: none; }
+}

package/components/streamgraph/streamgraph.d.ts

@@ -0,0 +1,51 @@
+import { type Ref } from "react";
+export interface StreamgraphSeries {
+    /** Stable identity. A layer keeps its place and color across data changes, so switching datasets morphs it. */
+    key: string;
+    /** Name in the legend, the direct label, the tooltip, and the data table. */
+    label: string;
+    /** Any CSS color. Defaults to the chart series for the first four layers (the first in the accent), then neutral steps. */
+    color?: string;
+}
+export interface StreamgraphDatum {
+    /** Stable identity, such as an ISO week. */
+    key: string;
+    /** Full label for the tooltip and screen readers, such as "Week of Sep 14". */
+    label: string;
+    /** Short label on the time axis. Leave it out to keep the axis quiet at that point. */
+    axisLabel?: string;
+    /** One value per series key. Missing values count as zero; negatives are treated as zero. */
+    values: Record<string, number | undefined>;
+}
+/** Use a streamgraph for how the mix of several parts changes over time, when the overall shape matters more than exact values. */
+export interface StreamgraphProps {
+    data: StreamgraphDatum[];
+    /** Layers from the centre out: the first runs through the middle of the stream, the rest alternate above and below it. */
+    series: StreamgraphSeries[];
+    /** What is measured, such as "Support tickets by topic". Names the chart for assistive technology. */
+    label: string;
+    /** Unit after each value, such as "tickets". */
+    unit?: string;
+    /** Plot height in pixels. The width follows the container. */
+    height?: number;
+    /** "wiggle" minimises layer slopes for a flowing stream, "silhouette" centres the stack, "zero" stacks from a flat baseline. */
+    offset?: "wiggle" | "silhouette" | "zero";
+    formatValue?: (value: number, series: StreamgraphSeries) => string;
+    /** Controlled hidden layer keys. A hidden layer thins to nothing and the rest reflow. */
+    hiddenSeries?: string[];
+    defaultHiddenSeries?: string[];
+    onHiddenSeriesChange?: (hidden: string[]) => void;
+    /** Called as the reading moves, and with nulls when it leaves. */
+    onActiveChange?: (index: number | null, seriesKey: string | null) => void;
+    /** Layer toggles above the plot. */
+    legend?: boolean;
+    /** Names each layer inside its widest stretch when it is thick enough to hold the text. */
+    directLabels?: boolean;
+    /** Header of the first column in the screen reader table. */
+    categoryLabel?: string;
+    emptyLabel?: string;
+    ref?: Ref<HTMLElement>;
+    className?: string;
+}
+export declare function Streamgraph({ data, series, label, unit, height, offset, formatValue, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, onActiveChange, legend, directLabels, categoryLabel, emptyLabel, ref, className }: StreamgraphProps): import("react").JSX.Element;
+export default Streamgraph;