@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/forms/runtime/placePopup.js

@@ -0,0 +1,55 @@
+// Places a combobox's popup by hand in a browser without anchor positioning: under the box, as wide as it, flipped
+// above when the screen has no room below, kept in place on scroll and resize. Where anchor positioning exists (every
+// current engine), CSS does it all and this does nothing.
+/** Starts placing `popup` against `box`. Returns what stops it. */
+export function placeByHand(popup, box) {
+    if (typeof CSS === "undefined" || CSS.supports("position-area: block-end"))
+        return () => { };
+    const place = () => {
+        const r = box.getBoundingClientRect();
+        const high = popup.offsetHeight;
+        const below = innerHeight - r.bottom;
+        const up = below < high + 8 && r.top > below;
+        Object.assign(popup.style, {
+            position: "fixed",
+            margin: "0",
+            left: `${r.left}px`,
+            width: `${r.width}px`,
+            top: `${up ? r.top - high - 4 : r.bottom + 4}px`,
+        });
+    };
+    place();
+    addEventListener("scroll", place, true);
+    addEventListener("resize", place);
+    return () => {
+        removeEventListener("scroll", place, true);
+        removeEventListener("resize", place);
+    };
+}
+/**
+ * A popup docked at the bottom of a phone's screen (`pickerSheet`, which sets `--sx-picker-docked: 1` there) must not
+ * cover the box being typed into, nor sit behind the on-screen keyboard (a phone shrinks only the visible part of the
+ * page for it, so `bottom: 0` is behind the keys). So, while it is open: the box scrolls to the top of the screen once,
+ * the keyboard's height goes in `--sx-picker-keyboard`, and the room left between the box and the keyboard in
+ * `--sx-picker-room`, which caps the sheet. Elsewhere it does nothing. Returns what stops it.
+ */
+export function dockSheet(popup, box) {
+    const view = typeof visualViewport === "undefined" ? null : visualViewport;
+    if (!view || getComputedStyle(popup).getPropertyValue("--sx-picker-docked").trim() !== "1")
+        return () => { };
+    box.scrollIntoView({ block: "start", behavior: "instant" });
+    const place = () => {
+        const keys = Math.max(0, innerHeight - view.height - view.offsetTop);
+        popup.style.setProperty("--sx-picker-keyboard", `${keys}px`);
+        popup.style.setProperty("--sx-picker-room", `${Math.max(160, innerHeight - keys - box.getBoundingClientRect().bottom - 8)}px`);
+    };
+    place();
+    view.addEventListener("resize", place);
+    view.addEventListener("scroll", place);
+    addEventListener("scroll", place, true);
+    return () => {
+        view.removeEventListener("resize", place);
+        view.removeEventListener("scroll", place);
+        removeEventListener("scroll", place, true);
+    };
+}

package/dist/forms/runtime/useFlip.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from "react";
+/**
+ * FLIP for a row of items keyed by `data-key` (a combobox's chips): after each render, an item that moved starts where
+ * it was (an inline `translate` with no transition) and, one frame later, glides to its new place through the
+ * transition an effect gives it (`chipPop`). Items leaving (`data-sx-leaving`) stay put. Off unless `enabled`.
+ */
+export declare function useFlip(container: RefObject<HTMLElement | null>, enabled: boolean, selector: string): void;

package/dist/forms/runtime/useFlip.js

@@ -0,0 +1,38 @@
+"use client";
+import { useLayoutEffect, useRef } from "react";
+/**
+ * FLIP for a row of items keyed by `data-key` (a combobox's chips): after each render, an item that moved starts where
+ * it was (an inline `translate` with no transition) and, one frame later, glides to its new place through the
+ * transition an effect gives it (`chipPop`). Items leaving (`data-sx-leaving`) stay put. Off unless `enabled`.
+ */
+export function useFlip(container, enabled, selector) {
+    const last = useRef(new Map());
+    useLayoutEffect(() => {
+        const root = container.current;
+        if (!root || !enabled)
+            return;
+        const now = new Map();
+        for (const item of root.querySelectorAll(selector)) {
+            const key = item.dataset.key;
+            if (!key)
+                continue;
+            const rect = item.getBoundingClientRect();
+            now.set(key, rect);
+            const before = last.current.get(key);
+            if (!before || item.hasAttribute("data-sx-leaving"))
+                continue;
+            const dx = before.left - rect.left;
+            const dy = before.top - rect.top;
+            if (!dx && !dy)
+                continue;
+            item.style.transition = "none";
+            item.style.translate = `${dx}px ${dy}px`;
+            void item.offsetWidth;
+            requestAnimationFrame(() => {
+                item.style.transition = "";
+                item.style.translate = "";
+            });
+        }
+        last.current = now;
+    });
+}

package/dist/forms/runtime/useMorph.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from "react";
+/**
+ * A box that eases from its old height to its new one when `key` changes (a step, a swapped view), instead of jumping:
+ * the old height is kept from the last commit (and from a ResizeObserver as the content changes in between), the box
+ * is held there before the browser paints, then let go to the new height through a transition of `block-size`, the one
+ * repaint the plan allows for this. Nothing under reduced motion, or with `on` false.
+ */
+export declare function useMorph(ref: RefObject<HTMLElement | null>, key: unknown, on: boolean): void;

package/dist/forms/runtime/useMorph.js

@@ -0,0 +1,56 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { stillMotion } from "../../buttons/runtime/press.js";
+/**
+ * A box that eases from its old height to its new one when `key` changes (a step, a swapped view), instead of jumping:
+ * the old height is kept from the last commit (and from a ResizeObserver as the content changes in between), the box
+ * is held there before the browser paints, then let go to the new height through a transition of `block-size`, the one
+ * repaint the plan allows for this. Nothing under reduced motion, or with `on` false.
+ */
+export function useMorph(ref, key, on) {
+    const last = useRef(0);
+    const busy = useRef(false);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const to = el.offsetHeight;
+        const from = last.current;
+        last.current = to;
+        if (!on || !from || Math.abs(to - from) < 2 || stillMotion())
+            return;
+        busy.current = true;
+        el.style.overflow = "clip";
+        el.style.blockSize = `${from}px`;
+        void el.offsetHeight;
+        el.style.transition = "block-size var(--sx-morph-time, 0.32s) var(--ease-sx-out, ease-out)";
+        el.style.blockSize = `${to}px`;
+        let timer = 0;
+        const done = (e) => {
+            if (e && (e.target !== el || e.propertyName !== "block-size"))
+                return;
+            window.clearTimeout(timer);
+            el.removeEventListener("transitionend", done);
+            el.style.blockSize = "";
+            el.style.transition = "";
+            el.style.overflow = "";
+            busy.current = false;
+            last.current = el.offsetHeight;
+        };
+        el.addEventListener("transitionend", done);
+        timer = window.setTimeout(done, 700);
+        return () => done();
+    }, [key]); // eslint-disable-line react-hooks/exhaustive-deps
+    // the content grows and shrinks between changes (a message opens, a textarea grows): keep the height fresh
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        const watch = new ResizeObserver(() => {
+            if (!busy.current)
+                last.current = el.offsetHeight;
+        });
+        watch.observe(el);
+        return () => watch.disconnect();
+    }, [ref]);
+}

package/dist/forms/runtime/useOffScreen.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from "react";
+/** Marks a control `data-sx-field-off` while it is off screen, so CSS pauses its endless effects. */
+export declare function useOffScreen(ref: RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/forms/runtime/useOffScreen.js

@@ -0,0 +1,16 @@
+"use client";
+import { useEffect } from "react";
+/** Marks a control `data-sx-field-off` while it is off screen, so CSS pauses its endless effects. */
+export function useOffScreen(ref, enabled) {
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !enabled || typeof IntersectionObserver === "undefined")
+            return;
+        const io = new IntersectionObserver((entries) => {
+            for (const entry of entries)
+                el.toggleAttribute("data-sx-field-off", !entry.isIntersecting);
+        });
+        io.observe(el);
+        return () => io.disconnect();
+    }, [ref, enabled]);
+}

package/dist/forms/runtime/useSwitchDrag.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from "react";
+/**
+ * Drag a switch's thumb with a finger or the mouse; let go past halfway and it toggles, short of it and it snaps back.
+ * A tap still toggles as always, and the value still commits on the click, never on the press: the drag only decides
+ * whether that click goes through. While dragging, the root carries `data-sx-dragging` and `--sx-switch-drag` (0-1),
+ * which the base sheet turns into the thumb's place.
+ */
+export declare function useSwitchDrag(root: RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/forms/runtime/useSwitchDrag.js

@@ -0,0 +1,83 @@
+"use client";
+import { useEffect } from "react";
+/** Moves under this many pixels are a tap, not a drag. */
+const TAP = 4;
+/**
+ * Drag a switch's thumb with a finger or the mouse; let go past halfway and it toggles, short of it and it snaps back.
+ * A tap still toggles as always, and the value still commits on the click, never on the press: the drag only decides
+ * whether that click goes through. While dragging, the root carries `data-sx-dragging` and `--sx-switch-drag` (0-1),
+ * which the base sheet turns into the thumb's place.
+ */
+export function useSwitchDrag(root, enabled) {
+    useEffect(() => {
+        const el = root.current;
+        const input = el?.querySelector("[data-sx-choice-control]");
+        if (!enabled || !el || !input)
+            return;
+        let start = null;
+        let moved = false;
+        let at = 0;
+        /** What the click that ends a drag must leave the switch at; undefined after a tap. */
+        let aim;
+        const down = (e) => {
+            if (e.button !== 0 || input.disabled || el.hasAttribute("data-sx-pending"))
+                return;
+            const box = el.querySelector("[data-sx-choice-box]")?.getBoundingClientRect();
+            if (!box)
+                return;
+            start = { x: e.clientX, at: input.checked ? 1 : 0, travel: Math.max(1, box.width - box.height), dir: getComputedStyle(el).direction === "rtl" ? -1 : 1 };
+            moved = false;
+            aim = undefined;
+            input.setPointerCapture(e.pointerId);
+        };
+        const move = (e) => {
+            if (!start)
+                return;
+            const dx = (e.clientX - start.x) * start.dir;
+            if (!moved && Math.abs(dx) < TAP)
+                return;
+            moved = true;
+            at = Math.min(1, Math.max(0, start.at + dx / start.travel));
+            el.style.setProperty("--sx-switch-drag", String(at));
+            el.setAttribute("data-sx-dragging", "");
+        };
+        const up = () => {
+            if (!start)
+                return;
+            start = null;
+            el.removeAttribute("data-sx-dragging");
+            el.style.removeProperty("--sx-switch-drag");
+            if (!moved)
+                return;
+            aim = at > 0.5;
+            // an engine that sends no click after a long drag: click for it, so the drag still counts (once)
+            setTimeout(() => {
+                if (aim !== undefined && input.checked !== aim)
+                    input.click();
+                aim = undefined;
+            });
+        };
+        // the click that follows the release: let it toggle only when the drag ended on the other side. A checkbox has
+        // already flipped when its click listeners run (preventing the click flips it back), so `checked` here is the
+        // state the click would leave.
+        const click = (e) => {
+            if (aim === undefined)
+                return;
+            if (input.checked !== aim)
+                e.preventDefault();
+            aim = undefined;
+        };
+        input.addEventListener("pointerdown", down);
+        input.addEventListener("pointermove", move);
+        input.addEventListener("pointerup", up);
+        input.addEventListener("pointercancel", up);
+        input.addEventListener("click", click);
+        return () => {
+            input.removeEventListener("pointerdown", down);
+            input.removeEventListener("pointermove", move);
+            input.removeEventListener("pointerup", up);
+            input.removeEventListener("pointercancel", up);
+            input.removeEventListener("click", click);
+        };
+    }, [root, enabled]);
+}

package/dist/forms/runtime/vanish.d.ts

@@ -0,0 +1,6 @@
+/**
+ * On the form's submit (or Enter in a field with no form): reads the text where it is, waits a moment for a form that
+ * checks itself after the submit (React Hook Form with Zod) to flag its fields, and unless one is flagged, empties the
+ * field and turns the text it had to dust. Under reduced motion it only empties the field.
+ */
+export declare function attachVanish(root: HTMLElement): () => void;

package/dist/forms/runtime/vanish.js

@@ -0,0 +1,185 @@
+// inputCycle's vanish: the text you send breaks into dust and the field empties. A short-lived canvas of its own over
+// the field (the text's pixels are far more than the page's shared burst canvas holds), removed when the dust settles.
+// Only inputCycle imports it.
+import { stillMotion } from "../../buttons/runtime/press.js";
+import { setNativeValue } from "../controls/fieldTools.js";
+/** Room around the field for the dust to drift into. */
+const PAD = 48;
+/** At most this many motes: a long line samples more sparsely. */
+const MOST = 2600;
+const LIFT = 0.45;
+const FLY = 0.5;
+/** The text's pixels, read now, while it sits where it is. */
+function snapshot(el, box, text) {
+    const cs = getComputedStyle(el);
+    const color = cs.color;
+    const b = box.getBoundingClientRect();
+    const r = el.getBoundingClientRect();
+    // room for the drift, but never past the window's sides or the page's end: a canvas sticking out would make the page
+    // scroll for a second
+    const left = Math.max(0, Math.min(PAD, b.left));
+    const right = Math.max(0, Math.min(PAD, document.documentElement.clientWidth - b.right));
+    const top = PAD;
+    const bottom = Math.max(0, Math.min(PAD, document.documentElement.scrollHeight - (b.bottom + window.scrollY)));
+    const w = Math.ceil(b.width + left + right);
+    const h = Math.ceil(b.height + top + bottom);
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.ceil(w * dpr);
+    canvas.height = Math.ceil(h * dpr);
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx)
+        return null;
+    ctx.scale(dpr, dpr);
+    ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+    if ("letterSpacing" in ctx && cs.letterSpacing !== "normal")
+        ctx.letterSpacing = cs.letterSpacing;
+    ctx.fillStyle = "#000";
+    const rtl = cs.direction === "rtl";
+    ctx.direction = rtl ? "rtl" : "ltr";
+    ctx.textAlign = rtl ? "right" : "left";
+    ctx.textBaseline = "middle";
+    const x = rtl ? r.right - parseFloat(cs.paddingRight) + el.scrollLeft : r.left + parseFloat(cs.paddingLeft) - el.scrollLeft;
+    const shown = el instanceof HTMLInputElement && el.type === "password" ? "•".repeat([...text].length) : text;
+    const lines = el instanceof HTMLTextAreaElement ? shown.split("\n") : [shown];
+    const line = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.5;
+    lines.forEach((t, i) => {
+        const y = el instanceof HTMLTextAreaElement ? r.top + parseFloat(cs.paddingTop) + line * (i + 0.5) - el.scrollTop : r.top + r.height / 2;
+        ctx.fillText(t, x - b.left + left, y - b.top + top);
+    });
+    const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+    let inked = 0;
+    for (let i = 3; i < data.length; i += 4)
+        if (data[i] > 96)
+            inked++;
+    const step = Math.max(Math.round(2 * dpr), Math.ceil(Math.sqrt(inked / MOST)));
+    const found = [];
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (let py = 0; py < canvas.height; py += step) {
+        for (let px = 0; px < canvas.width; px += step) {
+            const a = data[(py * canvas.width + px) * 4 + 3];
+            if (a <= 96)
+                continue;
+            const mx = px / dpr;
+            found.push({ x: mx, y: py / dpr, a: a / 255 });
+            lo = Math.min(lo, mx);
+            hi = Math.max(hi, mx);
+        }
+    }
+    if (found.length === 0)
+        return null;
+    const span = hi - lo || 1;
+    const ahead = rtl ? -1 : 1;
+    const motes = found.map((m) => ({
+        ...m,
+        wait: ((rtl ? m.x - lo : hi - m.x) / span) * LIFT,
+        vx: ahead * (18 + Math.random() * 70),
+        vy: (Math.random() - 0.6) * 70,
+    }));
+    return { motes, color, x: -left - box.clientLeft, y: -top - box.clientTop, w, h };
+}
+/** Plays the dust on a canvas over the box; calls `done` once it has settled. */
+function play(box, shot, done) {
+    const canvas = document.createElement("canvas");
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.width = Math.ceil(shot.w * dpr);
+    canvas.height = Math.ceil(shot.h * dpr);
+    canvas.setAttribute("aria-hidden", "true");
+    canvas.setAttribute("data-sx-field-vanish", "");
+    Object.assign(canvas.style, {
+        position: "absolute",
+        left: `${shot.x}px`,
+        top: `${shot.y}px`,
+        width: `${shot.w}px`,
+        height: `${shot.h}px`,
+        pointerEvents: "none",
+        zIndex: "2",
+    });
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+        done();
+        return () => { };
+    }
+    box.appendChild(canvas);
+    ctx.scale(dpr, dpr);
+    ctx.fillStyle = shot.color;
+    const start = performance.now();
+    let frame = 0;
+    const tick = (now) => {
+        const t = (now - start) / 1000;
+        ctx.clearRect(0, 0, shot.w, shot.h);
+        let alive = false;
+        for (const m of shot.motes) {
+            const age = t - m.wait;
+            if (age >= FLY)
+                continue;
+            alive = true;
+            const k = Math.max(0, age) / FLY;
+            const size = 1.4 * (1 - 0.6 * k);
+            ctx.globalAlpha = m.a * (1 - k * k);
+            const lift = Math.max(0, age);
+            ctx.fillRect(m.x + m.vx * lift - size / 2, m.y + m.vy * lift - size / 2, size, size);
+        }
+        if (alive)
+            frame = requestAnimationFrame(tick);
+        else
+            stop();
+    };
+    const stop = () => {
+        cancelAnimationFrame(frame);
+        canvas.remove();
+        done();
+    };
+    frame = requestAnimationFrame(tick);
+    return stop;
+}
+/**
+ * On the form's submit (or Enter in a field with no form): reads the text where it is, waits a moment for a form that
+ * checks itself after the submit (React Hook Form with Zod) to flag its fields, and unless one is flagged, empties the
+ * field and turns the text it had to dust. Under reduced motion it only empties the field.
+ */
+export function attachVanish(root) {
+    const el = root.querySelector("[data-sx-field-control]");
+    const box = root.querySelector("[data-sx-field-box]");
+    if (!el || !box)
+        return () => { };
+    let wait = 0;
+    let stop = null;
+    const go = () => {
+        const text = el.value;
+        if (!text.trim())
+            return;
+        const shot = stillMotion() ? null : snapshot(el, box, text);
+        window.clearTimeout(wait);
+        wait = window.setTimeout(() => {
+            if ((el.form ?? root).querySelector('[aria-invalid="true"]'))
+                return;
+            stop?.();
+            // the app may have emptied it already (a form reset): then there is nothing to clear
+            if (el.value === text)
+                setNativeValue(el, "");
+            if (!shot)
+                return;
+            root.setAttribute("data-sx-vanishing", "");
+            stop = play(box, shot, () => {
+                root.removeAttribute("data-sx-vanishing");
+                stop = null;
+            });
+        }, 80);
+    };
+    const enter = (e) => {
+        const k = e;
+        if (k.key === "Enter" && !k.isComposing && !el.form && el instanceof HTMLInputElement)
+            go();
+    };
+    const form = el.form;
+    form?.addEventListener("submit", go);
+    el.addEventListener("keydown", enter);
+    return () => {
+        window.clearTimeout(wait);
+        stop?.();
+        form?.removeEventListener("submit", go);
+        el.removeEventListener("keydown", enter);
+    };
+}

package/dist/forms/steps.d.ts

@@ -0,0 +1 @@
+export declare const STEPS_CSS = "@layer theme, base, components, utilities;\n@layer components {\n  :where([data-sx-steps]) {\n    --sx-form-dir: 1;\n    --sx-steps-way: 1;\n    display: grid;\n    gap: 1.25rem;\n    min-inline-size: 0;\n  }\n  :where([data-sx-steps]:dir(rtl)) {\n    --sx-form-dir: -1;\n  }\n  :where([data-sx-steps-view]) {\n    position: relative;\n    display: grid;\n    min-inline-size: 0;\n  }\n  :where([data-sx-step]) {\n    grid-area: 1 / 1;\n    display: grid;\n    gap: 1rem;\n    align-content: start;\n    min-inline-size: 0;\n  }\n  :where([data-sx-step]:not([data-sx-active], [data-sx-leaving])) {\n    display: none;\n  }\n  :where([data-sx-step][data-sx-leaving]) {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline: 0;\n    pointer-events: none;\n  }\n  :where([data-sx-steps][data-sx-mode=\"focus\"]) {\n    --sx-field-label-size: 1.25rem;\n    font-size: 1.125rem;\n  }\n  :where([data-sx-steps-progress]) {\n    position: relative;\n    isolation: isolate;\n  }\n  :where([data-sx-steps-progress] > ol) {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: minmax(0, 1fr);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  :where([data-sx-step-mark]) {\n    display: grid;\n    justify-items: center;\n    gap: 0.375rem;\n    min-inline-size: 0;\n    text-align: center;\n  }\n  :where([data-sx-step-dot]) {\n    display: grid;\n    place-items: center;\n    inline-size: 2rem;\n    block-size: 2rem;\n    box-sizing: border-box;\n    border-radius: 50%;\n    font-size: 0.875rem;\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n  }\n  :where([data-sx-step-dot] > *) {\n    grid-area: 1 / 1;\n  }\n  :where([data-sx-step-dot] > svg) {\n    inline-size: 1rem;\n    block-size: 1rem;\n    overflow: visible;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.5;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n  :where([data-sx-step-dot] path) {\n    stroke-dasharray: 1 2;\n    stroke-dashoffset: 1.01;\n  }\n  :where([data-sx-step-mark][data-sx-done] [data-sx-step-dot] path) {\n    stroke-dashoffset: 0;\n  }\n  :where([data-sx-step-mark][data-sx-done] [data-sx-step-number]) {\n    opacity: 0;\n  }\n  :where([data-sx-step-name]) {\n    font-size: 0.8125rem;\n    overflow-wrap: anywhere;\n  }\n  :where([data-sx-steps-rail]) {\n    position: absolute;\n    z-index: -1;\n    inset-block-start: 1rem;\n    inset-inline: calc(50% / var(--sx-steps-count, 1));\n    block-size: 2px;\n    translate: 0 -50%;\n  }\n  :where([data-sx-steps-fill]) {\n    display: block;\n    block-size: 100%;\n    transform-origin: calc(50% - 50% * var(--sx-form-dir)) 50%;\n    scale: var(--sx-steps-fill, 0) 1;\n    background: currentColor;\n  }\n  :where([data-sx-steps-rail] > [data-sx-steps-layer]) {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n  :where([data-sx-steps-back][hidden]) {\n    display: none;\n  }\n  :where([data-sx-steps-sr]) {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    :where([data-sx-steps] [data-sx-steps-layer]:not([data-sx-steps-keep])) {\n      display: none;\n    }\n  }\n  @media (forced-colors: active) {\n    :where([data-sx-step-dot]) {\n      border: 2px solid CanvasText;\n    }\n    :where([data-sx-step-mark][aria-current=\"step\"] [data-sx-step-dot]) {\n      border-color: Highlight;\n    }\n    :where([data-sx-steps-fill]) {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n  }\n}";

package/dist/forms/steps.js

@@ -0,0 +1,149 @@
+// The structural sheet of FormSteps: the steps stacked in one cell (only the current one shown; the one leaving lies
+// over it, out of the flow, while it plays its way out), the progress (numbered marks on a rail that fills, a check on
+// each step done), the status line for screen readers, and the one-question-at-a-time mode. Positioning and states
+// only; the look is styles/form.css. Pure string. See ./CLAUDE.md.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const MARK = "[data-sx-step-mark]";
+export const STEPS_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-steps]) {
+    --sx-form-dir: 1;
+    --sx-steps-way: 1;
+    display: grid;
+    gap: 1.25rem;
+    min-inline-size: 0;
+  }
+  :where([data-sx-steps]:dir(rtl)) {
+    --sx-form-dir: -1;
+  }
+  :where([data-sx-steps-view]) {
+    position: relative;
+    display: grid;
+    min-inline-size: 0;
+  }
+  :where([data-sx-step]) {
+    grid-area: 1 / 1;
+    display: grid;
+    gap: 1rem;
+    align-content: start;
+    min-inline-size: 0;
+  }
+  :where([data-sx-step]:not([data-sx-active], [data-sx-leaving])) {
+    display: none;
+  }
+  :where([data-sx-step][data-sx-leaving]) {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    pointer-events: none;
+  }
+  :where([data-sx-steps][data-sx-mode="focus"]) {
+    --sx-field-label-size: 1.25rem;
+    font-size: 1.125rem;
+  }
+  :where([data-sx-steps-progress]) {
+    position: relative;
+    isolation: isolate;
+  }
+  :where([data-sx-steps-progress] > ol) {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  :where(${MARK}) {
+    display: grid;
+    justify-items: center;
+    gap: 0.375rem;
+    min-inline-size: 0;
+    text-align: center;
+  }
+  :where([data-sx-step-dot]) {
+    display: grid;
+    place-items: center;
+    inline-size: 2rem;
+    block-size: 2rem;
+    box-sizing: border-box;
+    border-radius: 50%;
+    font-size: 0.875rem;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+  :where([data-sx-step-dot] > *) {
+    grid-area: 1 / 1;
+  }
+  :where([data-sx-step-dot] > svg) {
+    inline-size: 1rem;
+    block-size: 1rem;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where([data-sx-step-dot] path) {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+  }
+  :where(${MARK}[data-sx-done] [data-sx-step-dot] path) {
+    stroke-dashoffset: 0;
+  }
+  :where(${MARK}[data-sx-done] [data-sx-step-number]) {
+    opacity: 0;
+  }
+  :where([data-sx-step-name]) {
+    font-size: 0.8125rem;
+    overflow-wrap: anywhere;
+  }
+  :where([data-sx-steps-rail]) {
+    position: absolute;
+    z-index: -1;
+    inset-block-start: 1rem;
+    inset-inline: calc(50% / var(--sx-steps-count, 1));
+    block-size: 2px;
+    translate: 0 -50%;
+  }
+  :where([data-sx-steps-fill]) {
+    display: block;
+    block-size: 100%;
+    transform-origin: calc(50% - 50% * var(--sx-form-dir)) 50%;
+    scale: var(--sx-steps-fill, 0) 1;
+    background: currentColor;
+  }
+  :where([data-sx-steps-rail] > [data-sx-steps-layer]) {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  :where([data-sx-steps-back][hidden]) {
+    display: none;
+  }
+  :where([data-sx-steps-sr]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-sx-steps] [data-sx-steps-layer]:not([data-sx-steps-keep])) {
+      display: none;
+    }
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-step-dot]) {
+      border: 2px solid CanvasText;
+    }
+    :where(${MARK}[aria-current="step"] [data-sx-step-dot]) {
+      border-color: Highlight;
+    }
+    :where([data-sx-steps-fill]) {
+      forced-color-adjust: none;
+      background: Highlight;
+    }
+  }
+}`;

package/dist/forms/swap.d.ts

@@ -0,0 +1,7 @@
+export declare const SWAP_CSS: string;
+/**
+ * What moves: success fades the form out and the message in, settling, its check drawing; panel slides the panel across;
+ * flip turns the card. Views hide only once their way out has played (visibility after a delay). The box's height
+ * eases between views (FormSwap's own morph). Dropped under reduced motion: the views just change.
+ */
+export declare const SWAP_MOTION: string;