@sharedex/ui 0.9.0 → 0.10.0

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;

package/dist/forms/swap.js

@@ -0,0 +1,149 @@
+// The sheets of FormSwap: two views in one place, the other one unseen and inert. Three looks: success (the form gives
+// way to a message with a check), panel (two forms side by side, a coloured panel sliding over the one not in use;
+// stacked in a narrow box) and flip (a card turned over). Pure strings.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const VIEW = "[data-sx-swap-view]";
+const OFF = `${VIEW}:not([data-sx-active])`;
+const LOOK = (look) => `[data-sx-swap][data-sx-look="${look}"]`;
+const SWAPPED = "[data-sx-swap][data-sx-swapped]";
+export const SWAP_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-swap]) {
+    --sx-form-dir: 1;
+    position: relative;
+    min-inline-size: 0;
+    container-type: inline-size;
+  }
+  :where([data-sx-swap]:dir(rtl)) {
+    --sx-form-dir: -1;
+  }
+  :where([data-sx-swap-stage]) {
+    position: relative;
+    display: grid;
+    min-inline-size: 0;
+  }
+  :where(${VIEW}) {
+    grid-area: 1 / 1;
+    min-inline-size: 0;
+    outline: none;
+  }
+  :where(${OFF}) {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    visibility: hidden;
+  }
+  :where([data-sx-swap-check]) {
+    display: none;
+  }
+  :where(${LOOK("success")} [data-sx-swap-check]) {
+    display: grid;
+    justify-items: center;
+    margin-block-end: 0.75rem;
+  }
+  :where([data-sx-swap-check] > svg) {
+    inline-size: 3rem;
+    block-size: 3rem;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where(${LOOK("flip")}) {
+    perspective: 1400px;
+  }
+  :where(${LOOK("flip")} [data-sx-swap-stage]) {
+    transform-style: preserve-3d;
+  }
+  :where(${SWAPPED}${LOOK("flip")} [data-sx-swap-stage]) {
+    rotate: y calc(180deg * var(--sx-form-dir));
+  }
+  :where(${LOOK("flip")} ${VIEW}) {
+    position: relative;
+    visibility: visible;
+    backface-visibility: hidden;
+  }
+  :where(${LOOK("flip")} ${VIEW}[data-sx-swap-view="second"]) {
+    rotate: y 180deg;
+  }
+  :where([data-sx-swap-panel]) {
+    display: grid;
+    margin-block-start: 1rem;
+  }
+  :where([data-sx-swap-face]) {
+    grid-area: 1 / 1;
+    display: grid;
+    place-content: center;
+    gap: 0.75rem;
+    padding: 1.5rem;
+    text-align: center;
+  }
+  :where([data-sx-swap-face]:not([data-sx-active])) {
+    visibility: hidden;
+  }
+  @container (min-width: 36rem) {
+    :where(${LOOK("panel")} [data-sx-swap-stage]) {
+      grid-template-columns: 1fr 1fr;
+      overflow: clip;
+    }
+    :where(${LOOK("panel")} ${VIEW}) {
+      position: relative;
+      visibility: visible;
+      padding: 1.5rem;
+    }
+    :where(${LOOK("panel")} ${VIEW}[data-sx-swap-view="second"]) {
+      grid-area: 1 / 2;
+    }
+    :where(${LOOK("panel")} [data-sx-swap-panel]) {
+      position: absolute;
+      z-index: 1;
+      inset-block: 0;
+      inset-inline-start: 0;
+      inline-size: 50%;
+      margin: 0;
+      translate: calc(100% * var(--sx-form-dir)) 0;
+    }
+    :where(${SWAPPED}${LOOK("panel")} [data-sx-swap-panel]) {
+      translate: 0 0;
+    }
+  }
+}`;
+/**
+ * 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 const SWAP_MOTION = `@layer components {
+  :where(${VIEW}, [data-sx-swap-face]) {
+    transition: opacity 0.3s ease-out, scale 0.3s var(--ease-sx-out, ease-out), visibility 0s;
+  }
+  :where(${OFF}, [data-sx-swap-face]:not([data-sx-active])) {
+    opacity: 0;
+    transition-delay: 0s, 0s, 0.3s;
+  }
+  :where(${LOOK("success")} ${OFF}) {
+    scale: 0.97;
+  }
+  :where(${SWAPPED}[data-sx-moved] [data-sx-swap-check] path) {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+    animation: sx-form-swap-check 0.45s var(--ease-sx-out, ease-out) 0.2s forwards;
+  }
+  :where(${LOOK("flip")} [data-sx-swap-stage]) {
+    transition: rotate 0.6s cubic-bezier(0.4, 0.1, 0.2, 1);
+  }
+  :where(${LOOK("flip")} ${VIEW}) {
+    opacity: 1;
+    transition: none;
+  }
+  :where([data-sx-swap-panel]) {
+    transition: translate 0.6s cubic-bezier(0.65, 0, 0.35, 1);
+  }
+  @keyframes sx-form-swap-check {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+}`;

package/dist/forms/switch.d.ts

@@ -0,0 +1 @@
+export declare const SWITCH_BASE_CSS = "@layer components {\n  :where([data-sx-kind=\"switch\"]) {\n    --sx-switch-w: 2.75em;\n    --sx-switch-h: 1.5em;\n    --sx-switch-pad: 0.1875em;\n    --sx-switch-at: 0;\n  }\n  :where([data-sx-kind=\"switch\"]:has([data-sx-choice-control]:checked)) {\n    --sx-switch-at: 1;\n  }\n  :where([data-sx-kind=\"switch\"][data-sx-dragging]) {\n    --sx-switch-at: var(--sx-switch-drag, 0);\n  }\n  :where([data-sx-kind=\"switch\"] > [data-sx-choice-row]) {\n    grid-template-columns: var(--sx-switch-w) minmax(0, 1fr);\n  }\n  :where([data-sx-kind=\"switch\"] :is([data-sx-choice-box], [data-sx-choice-control])) {\n    inline-size: var(--sx-switch-w);\n    block-size: var(--sx-switch-h);\n    margin: calc((1.5em - var(--sx-switch-h)) / 2) 0 0;\n  }\n  :where([data-sx-kind=\"switch\"][data-sx-label-first] > [data-sx-choice-row]) {\n    grid-template-columns: minmax(0, 1fr) var(--sx-switch-w);\n  }\n  :where([data-sx-kind=\"switch\"][data-sx-label-first] > [data-sx-choice-row] > :is([data-sx-choice-box], [data-sx-choice-control])) {\n    grid-area: 1 / 2;\n  }\n  :where([data-sx-kind=\"switch\"][data-sx-label-first] [data-sx-choice-text]) {\n    grid-area: 1 / 1;\n  }\n  :where([data-sx-kind=\"switch\"][data-sx-label-first] [data-sx-choice-description]) {\n    grid-area: 2 / 1;\n  }\n  :where([data-sx-kind=\"switch\"][data-sx-label-first] > [data-sx-choice-message]) {\n    padding-inline-start: 0;\n  }\n  :where([data-sx-kind=\"switch\"] > [data-sx-choice-message]) {\n    padding-inline-start: calc(var(--sx-switch-w) + var(--sx-choice-gap));\n  }\n  :where([data-sx-switch-thumb]) {\n    position: absolute;\n    inset-block: var(--sx-switch-pad);\n    inset-inline-start: var(--sx-switch-pad);\n    aspect-ratio: 1;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n    translate: calc(var(--sx-switch-at) * (var(--sx-switch-w) - var(--sx-switch-h)) * var(--sx-form-dir)) 0;\n  }\n  :where([data-sx-switch-thumb] > [data-sx-choice-layer]) {\n    border-radius: inherit;\n  }\n  :where([data-sx-switch-spinner]) {\n    inline-size: 62%;\n    block-size: 62%;\n    box-sizing: border-box;\n    border: 2px solid currentColor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n  }\n  :where([data-sx-kind=\"switch\"][data-sx-pending] [data-sx-choice-row]) {\n    cursor: progress;\n  }\n  :where([data-sx-kind=\"switch\"][data-sx-drag] [data-sx-choice-control]) {\n    touch-action: pan-y;\n  }\n  :where([data-sx-kind=\"switch\"][data-sx-native] [data-sx-choice-control], [data-sx-kind=\"switch\"][data-sx-native] > [data-sx-choice-row]) {\n    inline-size: auto;\n    block-size: auto;\n  }\n  :where([data-sx-kind=\"switch\"][data-sx-native] > [data-sx-choice-row]) {\n    grid-template-columns: auto minmax(0, 1fr);\n  }\n  @media (forced-colors: active) {\n    :where([data-sx-kind=\"switch\"] [data-sx-choice-control]) {\n      inline-size: auto;\n      block-size: auto;\n    }\n    :where([data-sx-kind=\"switch\"] > [data-sx-choice-row]) {\n      grid-template-columns: auto minmax(0, 1fr);\n    }\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    :where([data-sx-switch-spinner]) {\n      animation: sx-form-switch-spin 0.8s linear infinite;\n    }\n    :where(html[data-sx-loops-paused] [data-sx-switch-spinner]) {\n      animation-play-state: paused;\n    }\n    @keyframes sx-form-switch-spin {\n      to { rotate: 1turn; }\n    }\n  }\n}";