@sharedex/ui 0.9.0 → 0.10.0

package/dist/forms/effects/input/inputUnderline.schema.js

@@ -0,0 +1,18 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_UNDERLINE_SCHEMA = defineSchema()({
+    id: "inputUnderline",
+    family: "form",
+    factory: "inputUnderline",
+    fields: {
+        from: {
+            kind: "choice",
+            label: "Grows from",
+            values: ["start", "center", "end", "pointer"],
+            labels: { start: "Reading start", center: "Centre", end: "Reading end", pointer: "Where you click" },
+            default: "start",
+        },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-primary)" },
+        thickness: { kind: "number", label: "Thickness", min: 1, max: 6, step: 0.5, unit: "px", default: 2 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

package/dist/forms/effects/input/inputWave.d.ts

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface InputWaveOptions {
+    /** How high each letter hops, in ems. Default `0.35`. */
+    readonly height?: number;
+    /** Seconds between one letter and the next. Default `0.04`. */
+    readonly stagger?: number;
+    /** Seconds one hop takes. Default `0.45`. */
+    readonly duration?: number;
+}
+/** The label's letters hop up one after another on focus. Needs a plain text label. */
+export declare function inputWave(options?: InputWaveOptions): FormEffect;

package/dist/forms/effects/input/inputWave.js

@@ -0,0 +1,23 @@
+import { FOCUSED, at, charOf, defineForm, inField, v, varName } from "../kit.js";
+const ID = "inputWave";
+// The letters are cut on the server (whole words in a joined script, so Arabic keeps its joins); each focus plays the
+// hop once, letter after letter. Screen readers get one plain copy of the label.
+const CSS = `  ${at(inField(ID, FOCUSED, charOf(ID)))} {
+    animation: sx-form-inputWave ${v(ID, "time")} ease-out both;
+    animation-delay: calc(var(--sx-field-i) * ${v(ID, "stagger")} * 1s);
+  }
+  @keyframes sx-form-inputWave {
+    0%, 100% { translate: 0 0; }
+    40% { translate: 0 calc(-1em * ${v(ID, "height")}); }
+  }`;
+/** The label's letters hop up one after another on focus. Needs a plain text label. */
+export function inputWave(options = {}) {
+    return defineForm(ID, CSS, {
+        vars: {
+            [varName(ID, "height")]: options.height ?? 0.35,
+            [varName(ID, "stagger")]: options.stagger ?? 0.04,
+            [varName(ID, "time")]: `${options.duration ?? 0.45}s`,
+        },
+        label: { split: true },
+    });
+}

package/dist/forms/effects/input/inputWave.schema.d.ts

@@ -0,0 +1 @@
+export declare const INPUT_WAVE_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/input/inputWave.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_WAVE_SCHEMA = defineSchema()({
+    id: "inputWave",
+    family: "form",
+    factory: "inputWave",
+    fields: {
+        height: { kind: "number", label: "Hop height", min: 0.1, max: 0.8, step: 0.05, unit: "em", default: 0.35 },
+        stagger: { kind: "number", label: "Between letters", min: 0.01, max: 0.12, step: 0.01, unit: "s", default: 0.04 },
+        duration: { kind: "number", label: "One hop", min: 0.2, max: 1, step: 0.05, unit: "s", default: 0.45 },
+    },
+});

package/dist/forms/effects/input/inputWavy.d.ts

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface InputWavyOptions {
+    /** The line's colour while the field has the focus. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Its thickness, px. Default `2`. */
+    readonly thickness?: number;
+    /** Seconds the wobble lasts. Default `0.8`. */
+    readonly duration?: number;
+}
+/** The bottom line wobbles like jelly on focus, then settles flat (Codrops' Nao and Shoko). */
+export declare function inputWavy(options?: InputWavyOptions): FormEffect;

package/dist/forms/effects/input/inputWavy.js

@@ -0,0 +1,53 @@
+import { at, defineForm, layerOf, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputWavy";
+const LAYER = layerOf(ID);
+const WAVE = `${LAYER} [data-sx-field-svg="wave"]`;
+/** A wave twice as wide as the field: sliding it by half (one viewBox) loops with no seam. */
+const HALF = 12.5;
+const WAVE_PATH = `M0 6 Q${HALF / 2} 1 ${HALF} 6${Array.from({ length: 63 }, (_, i) => ` T${(i + 2) * HALF} 6`).join("")}`;
+// The wave rests nearly flat (scale 0.02, never 0: a flat transform hides an SVG shape): an underline in the line's
+// colour. On focus it swells, flips, and settles flat again while it slides, like jelly. Only `scale` and `translate`
+// move, on one path.
+const CSS = `  ${at(LAYER)} {
+    inset-block: auto calc(-0.375rem - var(--sx-field-bw));
+    block-size: 0.75rem;
+    border-radius: 0;
+    clip-path: inset(-100% 0);
+  }
+  ${at(WAVE)} {
+    fill: none;
+    stroke: var(--sx-field-line, var(--color-sx-border));
+    stroke-width: calc(${v(ID, "thickness")} * 1px);
+    vector-effect: non-scaling-stroke;
+    transform-box: fill-box;
+    transform-origin: 50% 50%;
+    scale: 1 0.02;
+    transition: stroke 0.2s ease-out;
+  }
+${whenFocused(ID, WAVE, `stroke: ${v(ID, "color")}; animation: sx-form-inputWavy ${v(ID, "time")} ease-out;`)}
+  @keyframes sx-form-inputWavy {
+    0% { translate: 0 0; scale: 1 0.02; }
+    15% { scale: 1 1; }
+    35% { scale: 1 -0.7; }
+    55% { scale: 1 0.4; }
+    75% { scale: 1 -0.15; }
+    100% { translate: -50% 0; scale: 1 0.02; }
+  }`;
+/** The bottom line wobbles like jelly on focus, then settles flat (Codrops' Nao and Shoko). */
+export function inputWavy(options = {}) {
+    return defineForm(ID, CSS, {
+        marksFocus: ringOff(ID),
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            [varName(ID, "thickness")]: options.thickness ?? 2,
+            [varName(ID, "time")]: `${options.duration ?? 0.8}s`,
+        },
+        layers: [
+            {
+                slot: "edge",
+                svg: { viewBox: "0 0 400 12", preserveAspectRatio: "none", children: [{ tag: "path", part: "wave", attrs: { d: WAVE_PATH } }] },
+            },
+        ],
+    });
+}

package/dist/forms/effects/input/inputWavy.schema.d.ts

@@ -0,0 +1 @@
+export declare const INPUT_WAVY_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/input/inputWavy.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_WAVY_SCHEMA = defineSchema()({
+    id: "inputWavy",
+    family: "form",
+    factory: "inputWavy",
+    fields: {
+        color: { kind: "color", label: "Colour on focus", default: "var(--color-sx-primary)" },
+        thickness: { kind: "number", label: "Thickness", min: 1, max: 5, step: 0.5, unit: "px", default: 2 },
+        duration: { kind: "number", label: "Wobble", min: 0.3, max: 2, step: 0.1, unit: "s", default: 0.8 },
+    },
+});

package/dist/forms/effects/kit.d.ts

@@ -0,0 +1,213 @@
+import type { FormClaim, FormControl, FormEffect, FormLabelPlan, FormLayer, FormNeeds, FormProgram, FormTier, FormVars } from "../types.js";
+/** An effect's option as a custom property: `--sx-form-inputFloat-scale`. */
+export declare const varName: (id: string, name: string) => `--${string}`;
+/** Read it. */
+export declare const v: (id: string, name: string) => string;
+/** 1, or -1 in a right-to-left field. Physical values multiply by it. */
+export declare const DIR = "var(--sx-form-dir)";
+/** The text's start inside the box: the padding, plus the icon when there is one (base sheet). */
+export declare const START = "var(--sx-field-start)";
+/** The box's padding, block and inline (base sheet; the default look and the developer may change them). */
+export declare const PAD_Y = "var(--sx-field-py)";
+export declare const PAD_X = "var(--sx-field-px)";
+/** Wrap a raw selector. */
+export declare const at: (raw: string) => string;
+/** A field wearing this effect, as a raw selector. */
+export declare const fieldOf: (id: string) => string;
+/** Its box (what you see: border, background), as a raw selector. */
+export declare const boxOf: (id: string) => string;
+/** Its label, as a raw selector. */
+export declare const labelOf: (id: string) => string;
+/** The label's text span (`label.wrap`), as a raw selector. */
+export declare const textOf: (id: string) => string;
+/** One letter of the label (`label.split`), as a raw selector. `--sx-field-i` is its position. */
+export declare const charOf: (id: string) => string;
+/** The input or textarea, as a raw selector. */
+export declare const controlOf: (id: string) => string;
+/** The icon, as a raw selector. */
+export declare const iconOf: (id: string) => string;
+/** An effect's layer, as a raw selector. */
+export declare const layerOf: (id: string, part?: string) => string;
+/** A named span inside an effect's layer, as a raw selector. */
+export declare const childOf: (id: string, part: string, layerPart?: string) => string;
+/** The field holds the focus (the input, or a button in its end slot). */
+export declare const FOCUSED = ":focus-within";
+/** The field has text in it (typed or autofilled). */
+export declare const FILLED = ":is(:has([data-sx-field-control]:not(:placeholder-shown)), :has([data-sx-field-control]:autofill))";
+/** Focused or filled: where a floating label goes up. Autofill counts, so the label never sits on the text (atlas rule 5). */
+export declare const RAISED = ":is(:focus-within, :has([data-sx-field-control]:not(:placeholder-shown)), :has([data-sx-field-control]:autofill))";
+/** The field is loading its value (`busy`). */
+export declare const BUSY = ":has([data-sx-field-control][aria-busy=\"true\"])";
+/**
+ * The field is wrong: the browser's own check once the user has left it or tried to submit (`:user-invalid`, never
+ * `:invalid`, which fires while typing), or the app's (`aria-invalid`, which `error`, `invalid` and `status` set).
+ */
+export declare const INVALID = ":has([data-sx-field-control]:user-invalid, [data-sx-field-control][aria-invalid=\"true\"])";
+/**
+ * The field is right: an async check said so (`status="valid"`), or the user filled it, left it, and neither the browser
+ * nor the app found a fault. An empty optional field stays neutral.
+ */
+export declare const VALID = ":is([data-sx-status=\"valid\"], :has([data-sx-field-control]:user-valid:not([aria-invalid=\"true\"])):is(:has([data-sx-field-control]:not(:placeholder-shown)), :has([data-sx-field-control]:autofill))):not(:has([data-sx-field-control]:user-invalid, [data-sx-field-control][aria-invalid=\"true\"]))";
+/** The field was just sent to (`focusFirstError`, an error summary's link): it flashes once. */
+export declare const FLASH = "[data-sx-flash]";
+/** A checkbox wearing this effect (the option's root), as a raw selector. */
+export declare const choiceOf: (id: string) => string;
+/** A Select or a Combobox wearing this effect (its root), as a raw selector. */
+export declare const pickerOf: (id: string) => string;
+/**
+ * The picker is open: a Combobox says so (`data-sx-open`), a `<select>` with `:open`. Inside `:is()`, so a browser
+ * that doesn't know `:open` drops only that part.
+ */
+export declare const OPEN = ":is([data-sx-open], :has(select:open))";
+/** A Combobox's popup, and a `<select>`'s own picker where it can be styled. */
+export declare const POPUP = "[data-sx-picker-popup]";
+/** A Select's real `<select>`. */
+export declare const SELECT = "select[data-sx-picker-control]";
+/** The arrow at the box's end: a span in a Select, a button in a Combobox. Its `svg` turns. */
+export declare const ARROW = "[data-sx-picker-arrow]";
+/** A Combobox option. A `<select>`'s are `option` elements. */
+export declare const OPTION = "[data-sx-option]";
+/** A chosen value of a `multiple` Combobox; `data-sx-leaving` while it plays its way out. */
+export declare const CHIP = "[data-sx-chip]";
+/** A Range wearing this effect (its root), as a raw selector. */
+export declare const rangeOf: (id: string) => string;
+/** A Range's drawn rail, and its drawn thumbs (`[data-sx-thumb="a"]`, and `"b"` with two). */
+export declare const RAIL = "[data-sx-range-track]";
+export declare const KNOB = "[data-sx-range-thumb]";
+/**
+ * A Range's thumb while it is being dragged (by its own thumb or from the rail), as a raw selector. Each drawn thumb
+ * carries its place, `--sx-at` (0-1); the root carries the filled stretch, `--sx-range-from` / `--sx-range-to`.
+ */
+export declare const draggedKnob: (root: string, target?: string) => string;
+/** A Range's thumb while its input holds the keyboard's focus, as a raw selector. */
+export declare const keyedKnob: (root: string, target?: string) => string;
+/** A ChipGroup wearing this effect (the group's `<fieldset>`), as a raw selector. */
+export declare const chipsOf: (id: string) => string;
+/** One filter chip: a label round its real checkbox (or radio), which lies over the whole chip at opacity 0. */
+export declare const CHIP_OPTION = "[data-sx-chip-option]";
+export declare const CHIP_CONTROL = "[data-sx-chip-control]";
+/** The chip's check, before its words: a column that opens when the chip is on; its `path` is the tick. */
+export declare const CHIP_CHECK = "[data-sx-chip-check]";
+/** The chip is on. */
+export declare const CHIP_ON = ":has([data-sx-chip-control]:checked)";
+/** A chip's layer, as a raw selector. */
+export declare const chipLayer: (id: string, part?: string) => string;
+/** A FileDrop wearing this effect (its root), as a raw selector. */
+export declare const fileOf: (id: string) => string;
+/** The drop zone (it holds the real file input), and each file's card in the list. */
+export declare const ZONE = "[data-sx-file-zone]";
+export declare const CARD = "[data-sx-file-card]";
+/**
+ * Files are dragged over the zone (`data-sx-over="ok"`), or files it won't take (`"reject"`, where the browser tells the
+ * types while dragging). The zone just refused a file: `data-sx-rejected`, for a moment.
+ */
+export declare const OVER = "[data-sx-over=\"ok\"]";
+export declare const OVER_REJECT = "[data-sx-over=\"reject\"]";
+export declare const REJECTED = "[data-sx-rejected]";
+/** A FileDrop's layer, as a raw selector. */
+export declare const fileLayer: (id: string, part?: string) => string;
+/** FormSteps wearing this effect (its root), as a raw selector. */
+export declare const stepsOf: (id: string) => string;
+/**
+ * One step (`data-sx-active` on the current one, `data-sx-leaving` on the one playing its way out), and the progress's
+ * marks (`data-sx-done` on each step done, `aria-current="step"` on the current one). The root carries the way it moves,
+ * `--sx-steps-way` (1 forward, -1 back), and `data-sx-moved` once the user has moved (nothing plays on load).
+ */
+export declare const STEP = "[data-sx-step]";
+export declare const STEP_MARK = "[data-sx-step-mark]";
+/** A switch wearing this effect (its root), as a raw selector. */
+export declare const switchOf: (id: string) => string;
+/** A switch's thumb. Its place: `--sx-switch-at` (0 off, 1 on, the finger's place while dragged). */
+export declare const THUMB = "[data-sx-switch-thumb]";
+/** How far the thumb travels, as a length: the track's width less its height. */
+export declare const TRAVEL = "(var(--sx-switch-w) - var(--sx-switch-h))";
+/** A radio group wearing this effect, as a raw selector. */
+export declare const radiosOf: (id: string) => string;
+/** One option: a checkbox's root, or one radio of a group. */
+export declare const ITEM = "[data-sx-choice]";
+/** The real checkbox or radio, at opacity 0 on top of the drawn box. */
+export declare const CHOICE = "[data-sx-choice-control]";
+/** The parts of an option. */
+export declare const BOX = "[data-sx-choice-box]";
+export declare const MARK = "[data-sx-choice-mark]";
+export declare const TEXT = "[data-sx-choice-text]";
+export declare const ROW = "[data-sx-choice-row]";
+/** The options' box of a group (where `track` layers go). */
+export declare const OPTIONS = "[data-sx-group-options]";
+/** An option's layer, as a raw selector. */
+export declare const choiceLayer: (id: string, part?: string) => string;
+/** A named span inside an option's layer. */
+export declare const choiceChild: (id: string, part: string, layerPart?: string) => string;
+/** The option is checked (for a mixed checkbox, see MIXED). */
+export declare const CHECKED = ":has([data-sx-choice-control]:checked)";
+/** The checkbox is mixed: `indeterminate` (the attribute stands in on the server, before the property is set). */
+export declare const MIXED = ":is(:has([data-sx-choice-control]:indeterminate), [data-sx-mixed])";
+/**
+ * The user changed this option (it is `:user-valid` or `:user-invalid` from then on, in every engine): a pop, a jelly, a
+ * pulse or a burst plays when it is checked by hand, never for an option that loads checked.
+ */
+export declare const CHANGED = ":has([data-sx-choice-control]:is(:user-valid, :user-invalid))";
+/** The option holds the keyboard focus. */
+export declare const KEYED = ":has([data-sx-choice-control]:focus-visible)";
+/** An option that can't be used. */
+export declare const IDLE = ":has([data-sx-choice-control]:disabled)";
+/**
+ * `target` (raw, inside the option) while the option is in `state`. `root` is the effect's own root: a checkbox
+ * (`choiceOf`) or a radio group (`radiosOf`, then the state applies to each option in it).
+ */
+export declare function inItem(root: string, state: string, target?: string): string;
+/** A rule for an option's `target` while the option is hovered, where hover exists. A disabled option stays still. */
+export declare function whenItemHover(root: string, target: string, body: string): string;
+/** `target` (a raw selector inside a field wearing `id`, or the field itself) while the field is in `state`. */
+export declare function inField(id: string, state: string, target: string): string;
+/** A rule for `target` while the field holds the focus. */
+export declare const whenFocused: (id: string, target: string, body: string) => string;
+/** A rule for `target` while the field is focused or has text. */
+export declare const whenRaised: (id: string, target: string, body: string) => string;
+/** A rule for `target` while the field is loading its value. */
+export declare const whenBusy: (id: string, target: string, body: string) => string;
+/**
+ * A rule for `target` while the field is hovered, where hover exists: `:hover` sits inside the media query, so a tap
+ * never leaves it stuck on a phone. A disabled field stays still.
+ */
+export declare function whenHover(id: string, target: string, body: string): string;
+/** The easing most effects use. */
+export declare const EASE = "var(--ease-sx-out, ease-out)";
+/** A springy curve that overshoots and settles. */
+export declare const SPRING = "linear(0, 0.45 12%, 0.85 25%, 1.08 38%, 1.1 46%, 1.03 62%, 0.99 78%, 1)";
+/** A `transition` for some properties at an effect's duration (its `time` var). */
+export declare const timed: (id: string, properties: string, ease?: string) => string;
+/**
+ * A loop stops while the page pauses its loops (`usePauseLoops`, WCAG 2.2.2). Off screen, the base sheet pauses every
+ * animation in the field (`data-sx-field-off`).
+ */
+export declare const loopPaused: (target: string) => string;
+export interface FormParts {
+    readonly vars?: FormVars;
+    readonly layers?: readonly FormLayer[];
+    readonly claims?: readonly FormClaim[];
+    readonly needs?: FormNeeds;
+    /** The controls it fits. Default `["field"]`. */
+    readonly fits?: readonly FormControl[];
+    /** The weakest device that runs it, as in the registry (tested). Default `"all"`. */
+    readonly tier?: FormTier;
+    /** At-rules that can't sit inside a layer (`@property`). */
+    readonly head?: string;
+    /** Rules that show a state, not a motion: they apply under reduced motion too. */
+    readonly state?: string;
+    readonly label?: FormLabelPlan;
+    /** What a device below `tier` wears instead. Required for a `mid` / `high` effect (tested). */
+    readonly fallback?: FormEffect;
+    /** Code it runs on the control (confetti): the page needs `"use client"`. */
+    readonly program?: FormProgram;
+    /**
+     * It shows the focus by itself: `ringOff(id)` from `./ring.js`, the rule that drops the field's outline (see
+     * `FormEffect.marksFocus`). A separate module, so effects that don't mark the focus don't carry its text.
+     */
+    readonly marksFocus?: string;
+}
+/**
+ * A form effect from its registry id, its rules and its parts. Rules go in `@layer components`. It doesn't read the
+ * registry: that would put every effect's label and description in the download of any page with one field.
+ */
+export declare function defineForm(id: string, css: string, parts?: FormParts): FormEffect;

package/dist/forms/effects/kit.js

@@ -0,0 +1,226 @@
+// Helpers for form effects: selectors keyed on `data-sx-field`, the state rules (focused, raised, hovered, busy) and
+// defineForm(). Pure strings; no React, no DOM.
+/** An effect's option as a custom property: `--sx-form-inputFloat-scale`. */
+export const varName = (id, name) => `--sx-form-${id}-${name}`;
+/** Read it. */
+export const v = (id, name) => `var(${varName(id, name)})`;
+/** 1, or -1 in a right-to-left field. Physical values multiply by it. */
+export const DIR = "var(--sx-form-dir)";
+/** The text's start inside the box: the padding, plus the icon when there is one (base sheet). */
+export const START = "var(--sx-field-start)";
+/** The box's padding, block and inline (base sheet; the default look and the developer may change them). */
+export const PAD_Y = "var(--sx-field-py)";
+export const PAD_X = "var(--sx-field-px)";
+/** Wrap a raw selector. */
+export const at = (raw) => `:where(${raw})`;
+const CONTROL = "[data-sx-field-control]";
+/** A field wearing this effect, as a raw selector. */
+export const fieldOf = (id) => `[data-sx-field~="${id}"]`;
+/** Its box (what you see: border, background), as a raw selector. */
+export const boxOf = (id) => `${fieldOf(id)} [data-sx-field-box]`;
+/** Its label, as a raw selector. */
+export const labelOf = (id) => `${fieldOf(id)} [data-sx-field-label]`;
+/** The label's text span (`label.wrap`), as a raw selector. */
+export const textOf = (id) => `${fieldOf(id)} [data-sx-field-text]`;
+/** One letter of the label (`label.split`), as a raw selector. `--sx-field-i` is its position. */
+export const charOf = (id) => `${fieldOf(id)} [data-sx-field-char]`;
+/** The input or textarea, as a raw selector. */
+export const controlOf = (id) => `${fieldOf(id)} ${CONTROL}`;
+/** The icon, as a raw selector. */
+export const iconOf = (id) => `${fieldOf(id)} [data-sx-field-icon]`;
+/** An effect's layer, as a raw selector. */
+export const layerOf = (id, part) => part ? `[data-sx-field-layer="${id}"][data-sx-field-part="${part}"]` : `[data-sx-field-layer="${id}"]`;
+/** A named span inside an effect's layer, as a raw selector. */
+export const childOf = (id, part, layerPart) => `${layerOf(id, layerPart)} > [data-sx-field-part="${part}"]`;
+/** The field holds the focus (the input, or a button in its end slot). */
+export const FOCUSED = ":focus-within";
+/** The field has text in it (typed or autofilled). */
+export const FILLED = `:is(:has(${CONTROL}:not(:placeholder-shown)), :has(${CONTROL}:autofill))`;
+/** Focused or filled: where a floating label goes up. Autofill counts, so the label never sits on the text (atlas rule 5). */
+export const RAISED = `:is(:focus-within, :has(${CONTROL}:not(:placeholder-shown)), :has(${CONTROL}:autofill))`;
+/** The field is loading its value (`busy`). */
+export const BUSY = `:has(${CONTROL}[aria-busy="true"])`;
+/**
+ * The field is wrong: the browser's own check once the user has left it or tried to submit (`:user-invalid`, never
+ * `:invalid`, which fires while typing), or the app's (`aria-invalid`, which `error`, `invalid` and `status` set).
+ */
+export const INVALID = `:has(${CONTROL}:user-invalid, ${CONTROL}[aria-invalid="true"])`;
+/**
+ * The field is right: an async check said so (`status="valid"`), or the user filled it, left it, and neither the browser
+ * nor the app found a fault. An empty optional field stays neutral.
+ */
+export const VALID = `:is([data-sx-status="valid"], :has(${CONTROL}:user-valid:not([aria-invalid="true"]))${FILLED}):not(${INVALID})`;
+/** The field was just sent to (`focusFirstError`, an error summary's link): it flashes once. */
+export const FLASH = "[data-sx-flash]";
+// --- choices: a checkbox (effects on each option's root) or a radio group (effects on the group, options inside) ---
+/** A checkbox wearing this effect (the option's root), as a raw selector. */
+export const choiceOf = (id) => `[data-sx-choice~="${id}"]`;
+/** A Select or a Combobox wearing this effect (its root), as a raw selector. */
+export const pickerOf = (id) => `[data-sx-picker~="${id}"]`;
+/**
+ * The picker is open: a Combobox says so (`data-sx-open`), a `<select>` with `:open`. Inside `:is()`, so a browser
+ * that doesn't know `:open` drops only that part.
+ */
+export const OPEN = ':is([data-sx-open], :has(select:open))';
+/** A Combobox's popup, and a `<select>`'s own picker where it can be styled. */
+export const POPUP = "[data-sx-picker-popup]";
+/** A Select's real `<select>`. */
+export const SELECT = "select[data-sx-picker-control]";
+/** The arrow at the box's end: a span in a Select, a button in a Combobox. Its `svg` turns. */
+export const ARROW = "[data-sx-picker-arrow]";
+/** A Combobox option. A `<select>`'s are `option` elements. */
+export const OPTION = "[data-sx-option]";
+/** A chosen value of a `multiple` Combobox; `data-sx-leaving` while it plays its way out. */
+export const CHIP = "[data-sx-chip]";
+/** A Range wearing this effect (its root), as a raw selector. */
+export const rangeOf = (id) => `[data-sx-range~="${id}"]`;
+/** A Range's drawn rail, and its drawn thumbs (`[data-sx-thumb="a"]`, and `"b"` with two). */
+export const RAIL = "[data-sx-range-track]";
+export const KNOB = "[data-sx-range-thumb]";
+/**
+ * A Range's thumb while it is being dragged (by its own thumb or from the rail), as a raw selector. Each drawn thumb
+ * carries its place, `--sx-at` (0-1); the root carries the filled stretch, `--sx-range-from` / `--sx-range-to`.
+ */
+export const draggedKnob = (root, target = "") => ["a", "b"].map((t) => `${root}[data-sx-dragging="${t}"] ${KNOB}[data-sx-thumb="${t}"]${target ? ` ${target}` : ""}`).join(", ");
+/** A Range's thumb while its input holds the keyboard's focus, as a raw selector. */
+export const keyedKnob = (root, target = "") => ["a", "b"].map((t) => `${root}:has([data-sx-range-control][data-sx-thumb="${t}"]:focus-visible) ${KNOB}[data-sx-thumb="${t}"]${target ? ` ${target}` : ""}`).join(", ");
+/** A ChipGroup wearing this effect (the group's `<fieldset>`), as a raw selector. */
+export const chipsOf = (id) => `[data-sx-chips~="${id}"]`;
+/** One filter chip: a label round its real checkbox (or radio), which lies over the whole chip at opacity 0. */
+export const CHIP_OPTION = "[data-sx-chip-option]";
+export const CHIP_CONTROL = "[data-sx-chip-control]";
+/** The chip's check, before its words: a column that opens when the chip is on; its `path` is the tick. */
+export const CHIP_CHECK = "[data-sx-chip-check]";
+/** The chip is on. */
+export const CHIP_ON = `:has(${CHIP_CONTROL}:checked)`;
+/** A chip's layer, as a raw selector. */
+export const chipLayer = (id, part) => part ? `[data-sx-chip-layer="${id}"][data-sx-chip-part="${part}"]` : `[data-sx-chip-layer="${id}"]`;
+/** A FileDrop wearing this effect (its root), as a raw selector. */
+export const fileOf = (id) => `[data-sx-file~="${id}"]`;
+/** The drop zone (it holds the real file input), and each file's card in the list. */
+export const ZONE = "[data-sx-file-zone]";
+export const CARD = "[data-sx-file-card]";
+/**
+ * Files are dragged over the zone (`data-sx-over="ok"`), or files it won't take (`"reject"`, where the browser tells the
+ * types while dragging). The zone just refused a file: `data-sx-rejected`, for a moment.
+ */
+export const OVER = '[data-sx-over="ok"]';
+export const OVER_REJECT = '[data-sx-over="reject"]';
+export const REJECTED = "[data-sx-rejected]";
+/** A FileDrop's layer, as a raw selector. */
+export const fileLayer = (id, part) => part ? `[data-sx-file-layer="${id}"][data-sx-file-part="${part}"]` : `[data-sx-file-layer="${id}"]`;
+/** FormSteps wearing this effect (its root), as a raw selector. */
+export const stepsOf = (id) => `[data-sx-steps~="${id}"]`;
+/**
+ * One step (`data-sx-active` on the current one, `data-sx-leaving` on the one playing its way out), and the progress's
+ * marks (`data-sx-done` on each step done, `aria-current="step"` on the current one). The root carries the way it moves,
+ * `--sx-steps-way` (1 forward, -1 back), and `data-sx-moved` once the user has moved (nothing plays on load).
+ */
+export const STEP = "[data-sx-step]";
+export const STEP_MARK = "[data-sx-step-mark]";
+/** A switch wearing this effect (its root), as a raw selector. */
+export const switchOf = (id) => `[data-sx-switch~="${id}"]`;
+/** A switch's thumb. Its place: `--sx-switch-at` (0 off, 1 on, the finger's place while dragged). */
+export const THUMB = "[data-sx-switch-thumb]";
+/** How far the thumb travels, as a length: the track's width less its height. */
+export const TRAVEL = "(var(--sx-switch-w) - var(--sx-switch-h))";
+/** A radio group wearing this effect, as a raw selector. */
+export const radiosOf = (id) => `[data-sx-radios~="${id}"]`;
+/** One option: a checkbox's root, or one radio of a group. */
+export const ITEM = "[data-sx-choice]";
+/** The real checkbox or radio, at opacity 0 on top of the drawn box. */
+export const CHOICE = "[data-sx-choice-control]";
+/** The parts of an option. */
+export const BOX = "[data-sx-choice-box]";
+export const MARK = "[data-sx-choice-mark]";
+export const TEXT = "[data-sx-choice-text]";
+export const ROW = "[data-sx-choice-row]";
+/** The options' box of a group (where `track` layers go). */
+export const OPTIONS = "[data-sx-group-options]";
+/** An option's layer, as a raw selector. */
+export const choiceLayer = (id, part) => part ? `[data-sx-choice-layer="${id}"][data-sx-choice-part="${part}"]` : `[data-sx-choice-layer="${id}"]`;
+/** A named span inside an option's layer. */
+export const choiceChild = (id, part, layerPart) => `${choiceLayer(id, layerPart)} > [data-sx-choice-part="${part}"]`;
+/** The option is checked (for a mixed checkbox, see MIXED). */
+export const CHECKED = `:has(${CHOICE}:checked)`;
+/** The checkbox is mixed: `indeterminate` (the attribute stands in on the server, before the property is set). */
+export const MIXED = `:is(:has(${CHOICE}:indeterminate), [data-sx-mixed])`;
+/**
+ * The user changed this option (it is `:user-valid` or `:user-invalid` from then on, in every engine): a pop, a jelly, a
+ * pulse or a burst plays when it is checked by hand, never for an option that loads checked.
+ */
+export const CHANGED = `:has(${CHOICE}:is(:user-valid, :user-invalid))`;
+/** The option holds the keyboard focus. */
+export const KEYED = `:has(${CHOICE}:focus-visible)`;
+/** An option that can't be used. */
+export const IDLE = `:has(${CHOICE}:disabled)`;
+/**
+ * `target` (raw, inside the option) while the option is in `state`. `root` is the effect's own root: a checkbox
+ * (`choiceOf`) or a radio group (`radiosOf`, then the state applies to each option in it).
+ */
+export function inItem(root, state, target = "") {
+    const item = root.startsWith("[data-sx-radios") ? `${root} ${ITEM}${state}` : `${root}${state}`;
+    return target ? `${item} ${target}` : item;
+}
+/** A rule for an option's `target` while the option is hovered, where hover exists. A disabled option stays still. */
+export function whenItemHover(root, target, body) {
+    return `  @media (hover: hover) and (pointer: fine) {
+    ${at(inItem(root, `:not(${IDLE}):hover`, target))} { ${body} }
+  }`;
+}
+/** The field is disabled. */
+const ENABLED = `:not(:has(${CONTROL}:disabled))`;
+/** `target` (a raw selector inside a field wearing `id`, or the field itself) while the field is in `state`. */
+export function inField(id, state, target) {
+    const field = fieldOf(id);
+    return target.startsWith(field) ? `${field}${state}${target.slice(field.length)}` : `${field}${state} ${target}`;
+}
+/** A rule for `target` while the field holds the focus. */
+export const whenFocused = (id, target, body) => `  ${at(inField(id, FOCUSED, target))} { ${body} }`;
+/** A rule for `target` while the field is focused or has text. */
+export const whenRaised = (id, target, body) => `  ${at(inField(id, RAISED, target))} { ${body} }`;
+/** A rule for `target` while the field is loading its value. */
+export const whenBusy = (id, target, body) => `  ${at(inField(id, BUSY, target))} { ${body} }`;
+/**
+ * A rule for `target` while the field is hovered, where hover exists: `:hover` sits inside the media query, so a tap
+ * never leaves it stuck on a phone. A disabled field stays still.
+ */
+export function whenHover(id, target, body) {
+    return `  @media (hover: hover) and (pointer: fine) {
+    ${at(inField(id, `${ENABLED}:hover`, target))} { ${body} }
+  }`;
+}
+/** The easing most effects use. */
+export const EASE = "var(--ease-sx-out, ease-out)";
+/** A springy curve that overshoots and settles. */
+export const SPRING = "linear(0, 0.45 12%, 0.85 25%, 1.08 38%, 1.1 46%, 1.03 62%, 0.99 78%, 1)";
+/** A `transition` for some properties at an effect's duration (its `time` var). */
+export const timed = (id, properties, ease = EASE) => `transition: ${properties.split(",").map((p) => `${p.trim()} ${v(id, "time")} ${ease}`).join(", ")};`;
+/**
+ * A loop stops while the page pauses its loops (`usePauseLoops`, WCAG 2.2.2). Off screen, the base sheet pauses every
+ * animation in the field (`data-sx-field-off`).
+ */
+export const loopPaused = (target) => `  :where(html[data-sx-loops-paused] ${target}) { animation-play-state: paused; }`;
+/**
+ * A form effect from its registry id, its rules and its parts. Rules go in `@layer components`. It doesn't read the
+ * registry: that would put every effect's label and description in the download of any page with one field.
+ */
+export function defineForm(id, css, parts = {}) {
+    const head = parts.head ? `${parts.head}\n` : "";
+    const state = [parts.state, parts.marksFocus].filter(Boolean).join("\n");
+    return {
+        id,
+        tier: parts.tier ?? "all",
+        fits: parts.fits ?? ["field"],
+        css: css ? `${head}@layer components {\n${css}\n}` : "",
+        vars: parts.vars ?? {},
+        layers: parts.layers ?? [],
+        claims: parts.claims ?? [],
+        needs: parts.needs ?? {},
+        ...(state ? { stateCss: `@layer components {\n${state}\n}` } : {}),
+        ...(parts.label ? { label: parts.label } : {}),
+        ...(parts.program ? { program: parts.program } : {}),
+        ...(parts.marksFocus ? { marksFocus: true } : {}),
+        ...(parts.fallback ? { fallback: parts.fallback } : {}),
+    };
+}

package/dist/forms/effects/picker/chipPop.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface ChipPopOptions {
+    /** Seconds a chip takes to pop in or out. Default `0.2`. */
+    readonly duration?: number;
+}
+/** Chips pop in when picked and shrink away when removed; the others glide into place. A Combobox's only. */
+export declare function chipPop(options?: ChipPopOptions): FormEffect;

package/dist/forms/effects/picker/chipPop.js

@@ -0,0 +1,28 @@
+import { CHIP, EASE, SPRING, at, defineForm, pickerOf, v, varName } from "../kit.js";
+const ID = "chipPop";
+// A chip picked in a `multiple` Combobox pops in; a removed one shrinks away before it leaves (the Combobox keeps it,
+// marked `data-sx-leaving`, until this animation ends: `needs.flip`), and the chips after it glide into the gap (the
+// Combobox's FLIP: an inline `translate` this transition takes back to nothing). Chips only pop while the combobox
+// has the focus, so the ones a page loads with stay still.
+const CSS = `  ${at(`${pickerOf(ID)} ${CHIP}`)} {
+    transition: translate ${v(ID, "time")} ${SPRING}, scale ${v(ID, "time")} ${SPRING}, opacity ${v(ID, "time")} ${EASE};
+  }
+  @starting-style {
+    ${at(`${pickerOf(ID)}:focus-within ${CHIP}`)} {
+      scale: 0.6;
+      opacity: 0;
+    }
+  }
+  ${at(`${pickerOf(ID)} ${CHIP}[data-sx-leaving]`)} {
+    animation: sx-form-chipPop-out ${v(ID, "time")} ${EASE} forwards;
+  }
+  @keyframes sx-form-chipPop-out {
+    to {
+      scale: 0.6;
+      opacity: 0;
+    }
+  }`;
+/** Chips pop in when picked and shrink away when removed; the others glide into place. A Combobox's only. */
+export function chipPop(options = {}) {
+    return defineForm(ID, CSS, { fits: ["picker"], needs: { flip: true }, vars: { [varName(ID, "time")]: `${options.duration ?? 0.2}s` } });
+}

package/dist/forms/effects/picker/chipPop.schema.d.ts

@@ -0,0 +1 @@
+export declare const CHIP_POP_SCHEMA: import("../../../schema/types.js").Schema;