@sharedex/ui 0.0.0-stage → 0.10.0

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}";

package/dist/forms/switch.js

@@ -0,0 +1,99 @@
+// The switch's own sheet, on top of the choice base sheet (a switch is an option whose drawn box is a track): the
+// track's size, the thumb and its place, the pending spinner, the label first, the browser's own switch, forced
+// colours. Positioning only; the look is styles/form.css. See ./CLAUDE.md.
+const CONTROL = "[data-sx-choice-control]";
+const SWITCH = '[data-sx-kind="switch"]';
+export const SWITCH_BASE_CSS = `@layer components {
+  :where(${SWITCH}) {
+    --sx-switch-w: 2.75em;
+    --sx-switch-h: 1.5em;
+    --sx-switch-pad: 0.1875em;
+    --sx-switch-at: 0;
+  }
+  :where(${SWITCH}:has(${CONTROL}:checked)) {
+    --sx-switch-at: 1;
+  }
+  :where(${SWITCH}[data-sx-dragging]) {
+    --sx-switch-at: var(--sx-switch-drag, 0);
+  }
+  :where(${SWITCH} > [data-sx-choice-row]) {
+    grid-template-columns: var(--sx-switch-w) minmax(0, 1fr);
+  }
+  :where(${SWITCH} :is([data-sx-choice-box], ${CONTROL})) {
+    inline-size: var(--sx-switch-w);
+    block-size: var(--sx-switch-h);
+    margin: calc((1.5em - var(--sx-switch-h)) / 2) 0 0;
+  }
+  :where(${SWITCH}[data-sx-label-first] > [data-sx-choice-row]) {
+    grid-template-columns: minmax(0, 1fr) var(--sx-switch-w);
+  }
+  :where(${SWITCH}[data-sx-label-first] > [data-sx-choice-row] > :is([data-sx-choice-box], ${CONTROL})) {
+    grid-area: 1 / 2;
+  }
+  :where(${SWITCH}[data-sx-label-first] [data-sx-choice-text]) {
+    grid-area: 1 / 1;
+  }
+  :where(${SWITCH}[data-sx-label-first] [data-sx-choice-description]) {
+    grid-area: 2 / 1;
+  }
+  :where(${SWITCH}[data-sx-label-first] > [data-sx-choice-message]) {
+    padding-inline-start: 0;
+  }
+  :where(${SWITCH} > [data-sx-choice-message]) {
+    padding-inline-start: calc(var(--sx-switch-w) + var(--sx-choice-gap));
+  }
+  :where([data-sx-switch-thumb]) {
+    position: absolute;
+    inset-block: var(--sx-switch-pad);
+    inset-inline-start: var(--sx-switch-pad);
+    aspect-ratio: 1;
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+    translate: calc(var(--sx-switch-at) * (var(--sx-switch-w) - var(--sx-switch-h)) * var(--sx-form-dir)) 0;
+  }
+  :where([data-sx-switch-thumb] > [data-sx-choice-layer]) {
+    border-radius: inherit;
+  }
+  :where([data-sx-switch-spinner]) {
+    inline-size: 62%;
+    block-size: 62%;
+    box-sizing: border-box;
+    border: 2px solid currentColor;
+    border-block-start-color: transparent;
+    border-radius: 50%;
+  }
+  :where(${SWITCH}[data-sx-pending] [data-sx-choice-row]) {
+    cursor: progress;
+  }
+  :where(${SWITCH}[data-sx-drag] ${CONTROL}) {
+    touch-action: pan-y;
+  }
+  :where(${SWITCH}[data-sx-native] ${CONTROL}, ${SWITCH}[data-sx-native] > [data-sx-choice-row]) {
+    inline-size: auto;
+    block-size: auto;
+  }
+  :where(${SWITCH}[data-sx-native] > [data-sx-choice-row]) {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+  @media (forced-colors: active) {
+    :where(${SWITCH} ${CONTROL}) {
+      inline-size: auto;
+      block-size: auto;
+    }
+    :where(${SWITCH} > [data-sx-choice-row]) {
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-sx-switch-spinner]) {
+      animation: sx-form-switch-spin 0.8s linear infinite;
+    }
+    :where(html[data-sx-loops-paused] [data-sx-switch-spinner]) {
+      animation-play-state: paused;
+    }
+    @keyframes sx-form-switch-spin {
+      to { rotate: 1turn; }
+    }
+  }
+}`;

package/dist/forms/tools.d.ts

@@ -0,0 +1,3 @@
+export declare const FORM_TOOLS_CSS: string;
+/** The tools' movement: dropped under reduced motion, where they just appear. */
+export declare const FORM_TOOLS_MOTION = "@layer components {\n  :where([data-sx-field-clear]) {\n    transition: opacity 120ms ease-out, scale 120ms ease-out, visibility 0s 120ms;\n  }\n  :where([data-sx-field]:is(:has([data-sx-field-control]:not(:placeholder-shown)), :has([data-sx-field-control]:autofill)) [data-sx-field-clear]) {\n    transition: opacity 150ms ease-out, scale 220ms linear(0, 0.45 12%, 0.85 25%, 1.08 38%, 1.1 46%, 1.03 62%, 0.99 78%, 1), visibility 0s;\n  }\n  :where([data-sx-status=\"checking\"] [data-sx-field-status] > svg) {\n    animation: sx-form-spin 0.8s linear infinite;\n  }\n  :where(html[data-sx-loops-paused] [data-sx-field-status] > svg) {\n    animation-play-state: paused;\n  }\n  :where([data-sx-field-note] > span) {\n    transition: opacity 150ms ease-out, translate 150ms ease-out;\n  }\n  :where([data-sx-field-hint]) {\n    opacity: 0;\n    translate: 0 0.25rem;\n    transition: opacity 150ms ease-out, translate 150ms ease-out, display 150ms allow-discrete, overlay 150ms allow-discrete;\n  }\n  :where([data-sx-field-hint]:popover-open) {\n    opacity: 1;\n    translate: 0 0;\n  }\n  @starting-style {\n    :where([data-sx-field-hint]:popover-open) {\n      opacity: 0;\n      translate: 0 0.25rem;\n    }\n    :where([data-sx-field-note] > span) {\n      opacity: 0;\n      translate: 0 -0.25rem;\n    }\n  }\n  @keyframes sx-form-spin {\n    to { rotate: 1turn; }\n  }\n}";

package/dist/forms/tools.js

@@ -0,0 +1,248 @@
+// The field's own tools: the clear and show-password buttons, the character counter, the strength meter, the async
+// check mark, the hint popover, the Caps Lock note and the auto-growing textarea. Every `Field` ships these sheets right
+// after the base sheet, so they always sit before the effects that restyle the tools. The state sheet holds what must
+// show under reduced motion too; the motion sheet goes through `motionOnly()`. Colours come from sx tokens, with system colours behind them for a page without theme.css.
+// Effects (`inputReveal`, `inputCounter`, `inputStrength`, `validAsync`) add the motion on top. Under forced colours the
+// browser paints backgrounds over in its own colours, so the strength bars get a border and a fill it leaves alone.
+// See ./CLAUDE.md.
+import { FILLED, SPRING } from "./effects/kit.js";
+const CONTROL = "[data-sx-field-control]";
+const PART = "data-sx-tool-part";
+const BARS = [1, 2, 3, 4].map((n) => `[data-sx-strength="${n}"] [data-sx-field-bar]:nth-child(-n + ${n}) > span`).join(", ");
+const ICON = "[data-sx-field-tool] > svg, [data-sx-field-status] > svg, [data-sx-field-note] svg";
+export const FORM_TOOLS_CSS = `@layer components {
+  :where([data-sx-field-end] > [data-sx-field-layer]) {
+    position: relative;
+    inset: auto;
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: 1.25em;
+    block-size: 1.25em;
+  }
+  :where([data-sx-field-box]:has(> textarea${CONTROL})) {
+    flex-wrap: wrap;
+  }
+  :where(textarea${CONTROL}) {
+    flex-basis: 100%;
+  }
+  :where(textarea${CONTROL} + [data-sx-field-end]) {
+    margin: calc(-1 * var(--sx-field-py)) 0 0 auto;
+  }
+  :where([data-sx-field-tool]) {
+    all: unset;
+    border-radius: var(--radius-sx-control, 0.25rem);
+    cursor: pointer;
+  }
+  :where([data-sx-field-tool], [data-sx-field-status], [data-sx-field-counter]) {
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: 2rem;
+    block-size: 2rem;
+  }
+  :where([data-sx-field-tool]:focus-visible) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: -2px;
+  }
+  :where(${ICON}) {
+    display: block;
+    inline-size: 1.125em;
+    block-size: 1.125em;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where([${PART}]) {
+    stroke-dasharray: 1 2;
+  }
+  :where([data-sx-field-clear]) {
+    visibility: hidden;
+    opacity: 0;
+    scale: 0.5;
+  }
+  :where([data-sx-field]${FILLED}:not(:has(${CONTROL}:disabled, ${CONTROL}:read-only)) [data-sx-field-clear]) {
+    visibility: visible;
+    opacity: 1;
+    scale: 1;
+  }
+  :where([data-sx-field-reveal] [${PART}="slash"]) {
+    stroke-dashoffset: 1.01;
+  }
+  :where([data-sx-revealed] [data-sx-field-reveal] [${PART}="slash"]) {
+    stroke-dashoffset: 0;
+  }
+  :where([data-sx-field-status] [${PART}]) {
+    stroke-dashoffset: 1.01;
+  }
+  :where([data-sx-status="checking"] [${PART}="ring"]) {
+    stroke-dashoffset: 0.7;
+  }
+  :where([data-sx-status="valid"] [${PART}="check"], [data-sx-status="invalid"] [${PART}="cross"]) {
+    stroke-dashoffset: 0;
+  }
+  :where([data-sx-status="valid"] [data-sx-field-status]) {
+    color: var(--color-sx-success, currentColor);
+  }
+  :where([data-sx-status="invalid"] [data-sx-field-status]) {
+    color: var(--color-sx-danger, currentColor);
+  }
+  :where([data-sx-field-counter]) {
+    position: relative;
+    inline-size: auto;
+    min-inline-size: 2rem;
+    padding-inline: 0.25rem;
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+  :where([data-sx-field-counter] > span) {
+    grid-area: 1 / 1;
+  }
+  :where([data-sx-field-counter] > [data-sx-field-layer]) {
+    inset: 0;
+  }
+  :where([data-sx-field-left]) {
+    display: none;
+  }
+  :where([data-sx-field-strength]) {
+    grid-area: meter;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-block-start: 0.5rem;
+    font-size: 0.75rem;
+  }
+  :where([data-sx-field-bars]) {
+    flex: 1 1 auto;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 0.25rem;
+  }
+  :where([data-sx-field-bar]) {
+    display: block;
+    block-size: 0.25rem;
+    overflow: hidden;
+    border-radius: 999px;
+    background: color-mix(in oklab, currentColor 15%, transparent);
+  }
+  :where([data-sx-field-bar] > span) {
+    display: block;
+    block-size: 100%;
+    background: var(--sx-field-strength, currentColor);
+    scale: 0 1;
+    transform-origin: calc(50% - 50% * var(--sx-form-dir)) 50%;
+  }
+  :where(${BARS}) {
+    scale: 1 1;
+  }
+  :where([data-sx-strength="0"], [data-sx-strength="1"]) {
+    --sx-field-strength: var(--color-sx-danger);
+  }
+  :where([data-sx-strength="2"]) {
+    --sx-field-strength: color-mix(in oklab, var(--color-sx-danger) 50%, var(--color-sx-success));
+  }
+  :where([data-sx-strength="3"]) {
+    --sx-field-strength: color-mix(in oklab, var(--color-sx-danger) 20%, var(--color-sx-success));
+  }
+  :where([data-sx-strength="4"]) {
+    --sx-field-strength: var(--color-sx-success);
+  }
+  :where([data-sx-field-level]) {
+    flex: none;
+    min-inline-size: 6em;
+    text-align: end;
+  }
+  :where([data-sx-field-level] > span) {
+    display: inline-block;
+  }
+  :where([data-sx-field-note]) {
+    grid-area: note;
+    margin: 0;
+  }
+  :where([data-sx-field-note] > span) {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding-block-start: 0.375rem;
+    font-size: 0.875rem;
+  }
+  :where([data-sx-field-hint]) {
+    inset: auto;
+    margin: 0.375rem 0;
+    position-area: block-start span-inline-start;
+    position-try-fallbacks: flip-block;
+    inline-size: max-content;
+    max-inline-size: min(20rem, calc(100vw - 2rem));
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--color-sx-border, currentColor);
+    border-radius: var(--radius-sx-control, 0.375rem);
+    background: var(--color-sx-secondary, Canvas);
+    color: var(--color-sx-ink, CanvasText);
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+  @supports not (position-area: block-start) {
+    :where([data-sx-field-hint]) {
+      inset: auto 1rem 1rem;
+      margin: 0 auto;
+    }
+  }
+  :where([data-sx-field-grow] textarea${CONTROL}) {
+    field-sizing: content;
+    resize: none;
+    min-block-size: calc(var(--sx-field-rows, 2) * 1lh + 2 * var(--sx-field-py));
+    max-block-size: calc(var(--sx-field-rows-max) * 1lh + 2 * var(--sx-field-py));
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-field-bar]) {
+      border: 1px solid CanvasText;
+    }
+    :where([data-sx-field-bar] > span) {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+  }
+}`;
+/** The tools' movement: dropped under reduced motion, where they just appear. */
+export const FORM_TOOLS_MOTION = `@layer components {
+  :where([data-sx-field-clear]) {
+    transition: opacity 120ms ease-out, scale 120ms ease-out, visibility 0s 120ms;
+  }
+  :where([data-sx-field]${FILLED} [data-sx-field-clear]) {
+    transition: opacity 150ms ease-out, scale 220ms ${SPRING}, visibility 0s;
+  }
+  :where([data-sx-status="checking"] [data-sx-field-status] > svg) {
+    animation: sx-form-spin 0.8s linear infinite;
+  }
+  :where(html[data-sx-loops-paused] [data-sx-field-status] > svg) {
+    animation-play-state: paused;
+  }
+  :where([data-sx-field-note] > span) {
+    transition: opacity 150ms ease-out, translate 150ms ease-out;
+  }
+  :where([data-sx-field-hint]) {
+    opacity: 0;
+    translate: 0 0.25rem;
+    transition: opacity 150ms ease-out, translate 150ms ease-out, display 150ms allow-discrete, overlay 150ms allow-discrete;
+  }
+  :where([data-sx-field-hint]:popover-open) {
+    opacity: 1;
+    translate: 0 0;
+  }
+  @starting-style {
+    :where([data-sx-field-hint]:popover-open) {
+      opacity: 0;
+      translate: 0 0.25rem;
+    }
+    :where([data-sx-field-note] > span) {
+      opacity: 0;
+      translate: 0 -0.25rem;
+    }
+  }
+  @keyframes sx-form-spin {
+    to { rotate: 1turn; }
+  }
+}`;

package/dist/forms/types.d.ts

@@ -0,0 +1,161 @@
+import type { SvgElement } from "../backgrounds/types.js";
+/** The atlas's groups. */
+export declare const FORM_GROUPS: readonly ["input", "valid", "check", "radio", "switch", "select", "range", "file", "flow"];
+export type FormGroup = (typeof FORM_GROUPS)[number];
+/** The controls an effect can sit on. */
+export type FormControl = "field" | "checkbox" | "radio" | "switch" | "picker" | "range" | "file" | "steps" | "chip";
+/** When an effect fires: the cursor enters, the value changes, a choice is made, a check runs, a drag, a submit. */
+export type FormFires = "focus" | "typing" | "change" | "validate" | "drag" | "submit" | "idle";
+/** What it is built with. */
+export type FormTech = "css" | "native" | "svg" | "js" | "canvas";
+/** The lowest device tier that runs it (same scale as backgrounds, transitions and buttons). */
+export type FormTier = "all" | "mid" | "high";
+/**
+ * What two effects on one control can't both write. Layers never clash (each effect has its own span); these do.
+ * - `label`: where the label sits and how it moves (`translate`, `scale`, its grid area).
+ * - `box`: a `translate` / `transform` on the box (a lift, a shake).
+ * - `icon`: the icon's `translate` / `scale`.
+ * - `mark`: a choice's mark: an effect that hides the tick or dot and draws its own (a scribble, a heart, a morph);
+ *   a switch's thumb face (an icon, a sun, a face).
+ * - `thumb`: a switch's thumb: its `scale`, `rotate`, corners or visibility.
+ */
+export type FormClaim = "label" | "box" | "icon" | "mark" | "thumb";
+/** CSS custom properties, written inline on the control's root. Names start with `--sx-form-<id>-`. */
+export type FormVars = Readonly<Record<`--${string}`, string | number>>;
+/**
+ * Where a layer sits in a field.
+ * - `under`: behind the input text, on the box's background (a tint, a flap).
+ * - `fill`: like `under`, clipped to the box's corners (a fill that rises, a flood).
+ * - `edge`: above everything, not clipped (lines, outlines, rings); never takes the pointer.
+ * - `label`: inside the label, after its text (a second copy that rolls in).
+ * - `behind`: behind the whole box, in its grid cell (a hard shadow the box lifts off).
+ * - `end`: in the box's end row, before the field's own buttons, taking its own room (a check that draws in).
+ * - `counter`: inside the character counter, around its number (`counter` on the field; a ring that fills).
+ *
+ * A checkbox or a radio (each option of a group):
+ * - `box`: inside the drawn box, over its mark (a scribble, a heart, a star, a face).
+ * - `halo`: behind the box, centred on it and larger (a state layer, a pulse ring, a burst).
+ * - `text`: over the option's words (a strike line, a hand-drawn circle).
+ * - `row`: behind the whole option, its words included (a card, a pill that merges with the next).
+ *
+ * A radio group (once, not per option):
+ * - `track`: in the options' box, behind them (a segment's thumb, a travelling dot, a tab underline).
+ *
+ * A switch uses `box` for its track (behind the thumb: a sky, words, a neon tube, a goo) and:
+ * - `thumb`: inside the thumb (an icon, a sun turning moon, a face).
+ *
+ * A combobox's list:
+ * - `list`: in the list, behind the options (a highlight that glides to the active one).
+ *
+ * A ChipGroup's chip uses `row`: behind the chip's words, inside it (a pill, a bridge to the next chip).
+ *
+ * A FileDrop:
+ * - `zone`: in the drop zone, behind its words (a tint, a frame that answers a drag).
+ * - `card`: in each file's card (a ring that fills with the upload).
+ * - `page`: in the page-wide overlay (`page`), behind its words.
+ *
+ * FormSteps use `track`: in the progress, along its rail (a fill, a glow).
+ */
+export type FormSlot = "under" | "fill" | "edge" | "label" | "behind" | "end" | "counter" | "box" | "halo" | "text" | "row" | "track" | "thumb" | "list" | "zone" | "card" | "page";
+/** A generated span. An effect never uses pseudo-elements, or two effects on one control would fight over them. */
+export interface FormLayer {
+    readonly slot: FormSlot;
+    /** Tells an effect's layers apart in its CSS (`data-sx-field-part`). */
+    readonly part?: string;
+    /** Empty spans inside the layer, named by part. */
+    readonly children?: readonly string[];
+    /** Words inside the layer. Hidden from screen readers, like every layer. */
+    readonly text?: string;
+    /** Repeats the label's text inside the layer, when there is no `text`. */
+    readonly copy?: boolean;
+    /** Lines of words, one span each (`data-sx-field-part="line"`, `--sx-field-i` its place): phrases that take turns. */
+    readonly lines?: readonly string[];
+    /** An inline `<svg>` inside the layer. Colours come from the CSS, never attributes. */
+    readonly svg?: {
+        readonly viewBox?: string;
+        readonly preserveAspectRatio?: string;
+        readonly children: readonly SvgElement[];
+    };
+    /**
+     * Render the layer as a `<fieldset>` whose `<legend>` holds a hidden copy of the label: the browser cuts a gap in the
+     * fieldset's border exactly as wide as the label (the notched outline), with no measuring.
+     */
+    readonly legend?: boolean;
+    /** It shows a state, so it stays under reduced motion, when every other layer goes. */
+    readonly keep?: boolean;
+}
+/** Plain flags the control reads. */
+export interface FormNeeds {
+    /** It runs without end: pause it off screen and when the page pauses its loops (WCAG 2.2.2). */
+    readonly inView?: boolean;
+    /** It grows from where the field was clicked: the control writes `--sx-field-ox` (0-1) on each press. */
+    readonly origin?: boolean;
+    /** It styles one of the field's own tools, so the field warns in development when that tool is off. */
+    readonly tool?: "counter" | "reveal";
+    /** Removed chips stay until their exit animation ends, and the others glide into place (a combobox's `multiple`). */
+    readonly flip?: boolean;
+    /** The combobox marks the typed text in each option with the Custom Highlight API (`sx-list-match`). */
+    readonly match?: boolean;
+    /** It docks the popup at the bottom of a phone's screen: the combobox keeps its box in view and the sheet above the keyboard. */
+    readonly sheet?: boolean;
+    /** A FileDrop shows a picture's thumbnail (an object URL, let go when the file goes). */
+    readonly preview?: boolean;
+}
+/** What an effect needs from the label. Effects that ask for the same thing share it. */
+export interface FormLabelPlan {
+    /** Cut a text label into letters (`data-sx-field-char`), or whole words in a joined script. */
+    readonly split?: boolean;
+    /** Keep the label's text in its own span (`data-sx-field-text`). */
+    readonly wrap?: boolean;
+}
+export interface FormMeta {
+    /** The factory's name in the barrel (`inputFloat`, `checkDraw` …). */
+    readonly id: string;
+    readonly label: string;
+    readonly group: FormGroup;
+    /** The controls it fits. */
+    readonly fits: readonly FormControl[];
+    readonly fires: readonly FormFires[];
+    readonly tech: FormTech;
+    readonly tier: FormTier;
+    /** One line for the docs table. */
+    readonly description: string;
+    /** It relies on a feature some browsers lack; they get the plain control (`caret-shape` …). */
+    readonly limited?: string;
+}
+/**
+ * Code an effect runs on its control (confetti on the page's burst canvas). It makes the page need `"use client"`.
+ */
+export interface FormProgram {
+    /** Starts it on the control's root. Returns what stops it. */
+    readonly attach: (root: HTMLElement) => () => void;
+    /** Its options as a stable string: the control restarts it only when this changes. */
+    readonly signature: string;
+}
+/** One effect on a control: plain data (unless it has a `program`), so a Server Component can pass it. */
+export interface FormEffect {
+    /** The `data-sx-field` value its stylesheet is keyed on: its registry id. */
+    readonly id: string;
+    readonly tier: FormTier;
+    /** The controls it fits: a control warns in development when given one that doesn't fit it. */
+    readonly fits: readonly FormControl[];
+    /** Its stylesheet, one per id. */
+    readonly css: string;
+    readonly vars: FormVars;
+    readonly layers: readonly FormLayer[];
+    readonly claims: readonly FormClaim[];
+    readonly needs: FormNeeds;
+    /** Rules that show a state rather than a motion, shipped under reduced motion too. */
+    readonly stateCss?: string;
+    readonly label?: FormLabelPlan;
+    /** Code it runs on the control. Only the few effects that need one have it. */
+    readonly program?: FormProgram;
+    /**
+     * It shows where the focus is by itself (a line, an outline, a ring, a fill that stays while focused), so the field
+     * drops its own focus outline (`focusRing="auto"`): its state sheet carries the rule. The outline comes back under
+     * reduced motion and forced colours, where the effect's layers may not show.
+     */
+    readonly marksFocus?: true;
+    /** What a weaker device wears instead (every `mid` / `high` effect has one). Its id ends in `-lite`. */
+    readonly fallback?: FormEffect;
+}

package/dist/forms/types.js

@@ -0,0 +1,5 @@
+// ---------------------------------------------------------------------------
+// Form effect descriptors and their metadata. See ./CLAUDE.md.
+// ---------------------------------------------------------------------------
+/** The atlas's groups. */
+export const FORM_GROUPS = ["input", "valid", "check", "radio", "switch", "select", "range", "file", "flow"];