@sharedex/ui 0.9.0 → 0.10.0

package/dist/forms/effects/switch/switchGoo.js

@@ -0,0 +1,95 @@
+import { CHANGED, CHECKED, SPRING, THUMB, TRAVEL, at, choiceChild, choiceLayer, defineForm, inItem, switchOf, v, varName } from "../kit.js";
+const ID = "switchGoo";
+const ROOT = switchOf(ID);
+const GOO = choiceLayer(ID, "goo");
+const DROP = `${GOO} > [data-sx-choice-part]`;
+const TAIL = choiceChild(ID, "tail", "goo");
+const PLACE = `translate: calc(var(--sx-switch-at) * ${TRAVEL} * var(--sx-form-dir)) 0;`;
+/** Two drops where the thumb is: the lead crosses quickly, the tail lags, and a blur-then-sharpen filter melts them into one liquid. */
+const DROPS = `  ${at(DROP)} {
+    position: absolute;
+    inset-block: var(--sx-switch-pad);
+    inset-inline-start: var(--sx-switch-pad);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--sx-switch-thumb, var(--color-sx-muted));
+    ${PLACE}
+  }
+  ${at(inItem(ROOT, CHECKED, DROP))} {
+    background: var(--sx-switch-thumb-on, var(--color-sx-on-primary));
+  }
+  ${at(`${ROOT} ${THUMB}`)} {
+    opacity: 0;
+  }`;
+// The liquid look is the costly part (an SVG filter over the drops on every frame of the move), so it starts at the
+// mid tier; weaker devices get the lite version below. The drops' places are the state.
+const STATE = `${DROPS}
+  ${at(GOO)} {
+    filter: ${v(ID, "filter")};
+  }`;
+const CSS = `  ${at(`${ROOT}:not([data-sx-dragging]) ${DROP}`)} {
+    transition: translate ${v(ID, "time")} ${SPRING};
+  }
+  ${at(`${ROOT}:not([data-sx-dragging]) ${TAIL}`)} {
+    transition-duration: calc(${v(ID, "time")} * 1.6);
+  }`;
+const LITE = "switchGoo-lite";
+const LITE_ROOT = switchOf(LITE);
+/** The lite version: the thumb squashes like a drop as it lands, with no filter. */
+function switchGooLite(time) {
+    const css = `  ${at(`${LITE_ROOT}:not([data-sx-dragging]) ${THUMB}`)} {
+    transition: translate ${v(LITE, "time")} ${SPRING};
+  }
+  ${at(inItem(LITE_ROOT, CHANGED, THUMB))} {
+    animation: sx-form-switchGoo-lite ${v(LITE, "time")} ease-out;
+  }
+  ${at(inItem(LITE_ROOT, `${CHECKED}${CHANGED}`, THUMB))} {
+    animation: sx-form-switchGoo-lite-on ${v(LITE, "time")} ease-out;
+  }
+  @keyframes sx-form-switchGoo-lite {
+    0%, 100% { scale: 1 1; }
+    40% { scale: 1.35 0.8; }
+  }
+  @keyframes sx-form-switchGoo-lite-on {
+    0%, 100% { scale: 1 1; }
+    40% { scale: 1.35 0.8; }
+  }`;
+    return defineForm(LITE, css, { fits: ["switch"], vars: { [varName(LITE, "time")]: time }, claims: ["thumb"] });
+}
+/** The thumb is a drop of liquid: it stretches into a bridge as it crosses and snaps round on the other side. */
+export function switchGoo(options = {}) {
+    const time = `${options.duration ?? 0.5}s`;
+    return defineForm(ID, CSS, {
+        fits: ["switch"],
+        tier: "mid",
+        state: STATE,
+        vars: { [varName(ID, "filter")]: "url(#{uid}-goo)", [varName(ID, "time")]: time },
+        layers: [
+            {
+                slot: "box",
+                part: "goo",
+                children: ["lead", "tail"],
+                keep: true,
+                svg: {
+                    children: [
+                        {
+                            tag: "defs",
+                            children: [
+                                {
+                                    tag: "filter",
+                                    attrs: { id: "{uid}-goo" },
+                                    children: [
+                                        { tag: "feGaussianBlur", attrs: { in: "SourceGraphic", stdDeviation: 3 } },
+                                        { tag: "feColorMatrix", attrs: { mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" } },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
+                },
+            },
+        ],
+        claims: ["thumb"],
+        fallback: switchGooLite(time),
+    });
+}

package/dist/forms/effects/switch/switchGoo.schema.d.ts

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

package/dist/forms/effects/switch/switchGoo.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_GOO_SCHEMA = defineSchema()({
+    id: "switchGoo",
+    family: "form",
+    factory: "switchGoo",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 1, step: 0.05, unit: "s", default: 0.5 },
+    },
+});

package/dist/forms/effects/switch/switchIcon.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchIconOptions {
+    /** Show a cross on the small thumb while off. Default `true`. */
+    readonly off?: boolean;
+    /** Seconds it takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The thumb grows when on and shows a tick; off, it shrinks and shows a cross (Material 3). */
+export declare function switchIcon(options?: SwitchIconOptions): FormEffect;

package/dist/forms/effects/switch/switchIcon.js

@@ -0,0 +1,63 @@
+import { CHECKED, SPRING, THUMB, at, choiceLayer, defineForm, inItem, switchOf, v, varName } from "../kit.js";
+const ID = "switchIcon";
+const ROOT = switchOf(ID);
+const ICON = choiceLayer(ID);
+const TICK = `${ICON} [data-sx-choice-svg="tick"]`;
+const CROSS = `${ICON} [data-sx-choice-svg="cross"]`;
+// Material 3's switch: off, a small thumb (with a cross); on, a full thumb with a tick. Sizes and signs are the state
+// (they hold under reduced motion); the grow, the draw and the pressed swell are motion.
+const STATE = `  ${at(`${ROOT} ${THUMB}`)} {
+    scale: 0.7;
+  }
+  ${at(inItem(ROOT, CHECKED, THUMB))} {
+    scale: 1;
+  }
+  ${at(`${TICK}, ${CROSS}`)} {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 3;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+  }
+  ${at(inItem(ROOT, CHECKED, TICK))} {
+    stroke-dashoffset: 0;
+  }
+  ${at(`${ROOT}:not(${CHECKED}) ${CROSS}`)} {
+    stroke-dashoffset: calc(1.01 - 1.01 * ${v(ID, "off")});
+  }
+  ${at(ICON)} {
+    inset: 18%;
+  }`;
+const CSS = `  ${at(`${ROOT} ${THUMB}`)} {
+    transition: scale ${v(ID, "time")} ${SPRING};
+  }
+  ${at(`${ROOT}:not([data-sx-pending]):active ${THUMB}`)} {
+    scale: 1.1;
+  }
+  ${at(`${TICK}, ${CROSS}`)} {
+    transition: stroke-dashoffset ${v(ID, "time")} ease-out;
+  }`;
+/** The thumb grows when on and shows a tick; off, it shrinks and shows a cross (Material 3). */
+export function switchIcon(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["switch"],
+        state: STATE,
+        vars: { [varName(ID, "off")]: options.off === false ? 0 : 1, [varName(ID, "time")]: `${options.duration ?? 0.25}s` },
+        layers: [
+            {
+                slot: "thumb",
+                keep: true,
+                svg: {
+                    viewBox: "0 0 24 24",
+                    children: [
+                        { tag: "path", part: "tick", attrs: { pathLength: 1, d: "m5.5 12.5 4.25 4.25L18.5 7.5" } },
+                        { tag: "path", part: "cross", attrs: { pathLength: 1, d: "m7 7 10 10M17 7 7 17" } },
+                    ],
+                },
+            },
+        ],
+        claims: ["thumb", "mark"],
+    });
+}

package/dist/forms/effects/switch/switchIcon.schema.d.ts

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

package/dist/forms/effects/switch/switchIcon.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_ICON_SCHEMA = defineSchema()({
+    id: "switchIcon",
+    family: "form",
+    factory: "switchIcon",
+    fields: {
+        off: { kind: "boolean", label: "A cross while off", default: true },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.6, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

package/dist/forms/effects/switch/switchLabels.d.ts

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchLabelsOptions {
+    /** The word on the free side while on. Default `"ON"`. */
+    readonly on?: string;
+    /** The word while off. Default `"OFF"`. */
+    readonly off?: string;
+    /** Seconds the words take to swap. Default `0.2`. */
+    readonly duration?: number;
+}
+/** A short word inside the track, ON or OFF, on the side the thumb has left. */
+export declare function switchLabels(options?: SwitchLabelsOptions): FormEffect;

package/dist/forms/effects/switch/switchLabels.js

@@ -0,0 +1,55 @@
+import { CHECKED, at, choiceLayer, defineForm, inItem, switchOf, v, varName } from "../kit.js";
+const ID = "switchLabels";
+const ROOT = switchOf(ID);
+const ON = choiceLayer(ID, "on");
+const OFF = choiceLayer(ID, "off");
+// The track widens to hold a short word on its free side: the "on" word where the thumb has left (the start), the
+// "off" word at the end. The words are decoration (hidden from screen readers, which hear "switch, on"); which one shows
+// is the state. Pass your own words for another language.
+const STATE = `  ${at(ROOT)} {
+    --sx-switch-w: 3.75em;
+  }
+  ${at(`${ON}, ${OFF}`)} {
+    display: grid;
+    align-items: center;
+    inline-size: calc(100% - var(--sx-switch-h));
+    padding-inline: 0.4em;
+    box-sizing: border-box;
+    font-size: 0.6em;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    opacity: 0;
+  }
+  ${at(ON)} {
+    inset-inline: 0 auto;
+    justify-items: center;
+    color: var(--color-sx-on-primary, Canvas);
+  }
+  ${at(OFF)} {
+    inset-inline: auto 0;
+    justify-items: center;
+    color: var(--color-sx-muted, CanvasText);
+  }
+  ${at(inItem(ROOT, CHECKED, ON))} {
+    opacity: 1;
+  }
+  ${at(`${ROOT}:not(${CHECKED}) ${OFF}`)} {
+    opacity: 1;
+  }`;
+const CSS = `  ${at(`${ON}, ${OFF}`)} {
+    transition: opacity ${v(ID, "time")} ease-out;
+  }`;
+/** A short word inside the track, ON or OFF, on the side the thumb has left. */
+export function switchLabels(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["switch"],
+        state: STATE,
+        vars: { [varName(ID, "time")]: `${options.duration ?? 0.2}s` },
+        layers: [
+            { slot: "box", part: "on", text: options.on ?? "ON", keep: true },
+            { slot: "box", part: "off", text: options.off ?? "OFF", keep: true },
+        ],
+    });
+}

package/dist/forms/effects/switch/switchLabels.schema.d.ts

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

package/dist/forms/effects/switch/switchLabels.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_LABELS_SCHEMA = defineSchema()({
+    id: "switchLabels",
+    family: "form",
+    factory: "switchLabels",
+    fields: {
+        on: { kind: "text", label: "On word", default: "ON" },
+        off: { kind: "text", label: "Off word", default: "OFF" },
+        duration: { kind: "number", label: "Duration", min: 0.05, max: 0.5, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/forms/effects/switch/switchMorph.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchMorphOptions {
+    /** The thumb's corners when on, as a share of its size: 0 a square, 50 a circle. Default `22`. */
+    readonly corner?: number;
+    /** Seconds it takes. Default `0.4`. */
+    readonly duration?: number;
+}
+/** The thumb morphs from a circle into a rounded square, turning as it crosses. */
+export declare function switchMorph(options?: SwitchMorphOptions): FormEffect;

package/dist/forms/effects/switch/switchMorph.js

@@ -0,0 +1,22 @@
+import { CHECKED, SPRING, THUMB, at, defineForm, inItem, switchOf, v, varName } from "../kit.js";
+const ID = "switchMorph";
+const ROOT = switchOf(ID);
+// The thumb changes shape as it crosses: a circle when off, a rounded square when on, turning a half turn on the way so
+// the change reads as one gesture. The shape is the state (it holds under reduced motion); the turn and the morph are
+// motion. Corners animate on one small element: cheap.
+const STATE = `  ${at(inItem(ROOT, CHECKED, THUMB))} {
+    border-radius: calc(${v(ID, "corner")} * 1%);
+    rotate: 180deg;
+  }`;
+const CSS = `  ${at(`${ROOT} ${THUMB}`)} {
+    transition: border-radius ${v(ID, "time")} ease-in-out, rotate ${v(ID, "time")} ${SPRING};
+  }`;
+/** The thumb morphs from a circle into a rounded square, turning as it crosses. */
+export function switchMorph(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["switch"],
+        state: STATE,
+        vars: { [varName(ID, "corner")]: options.corner ?? 22, [varName(ID, "time")]: `${options.duration ?? 0.4}s` },
+        claims: ["thumb"],
+    });
+}

package/dist/forms/effects/switch/switchMorph.schema.d.ts

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

package/dist/forms/effects/switch/switchMorph.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_MORPH_SCHEMA = defineSchema()({
+    id: "switchMorph",
+    family: "form",
+    factory: "switchMorph",
+    fields: {
+        corner: { kind: "number", label: "Corners when on", min: 0, max: 50, step: 1, unit: "%", default: 22 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.4 },
+    },
+});

package/dist/forms/effects/switch/switchNeon.d.ts

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchNeonOptions {
+    /** The tube's colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** The dark glass behind the tube, the same in light and dark themes. Default a near-black. */
+    readonly glass?: string;
+    /** Seconds the switch-on flicker takes. Default `0.6`. */
+    readonly duration?: number;
+}
+/** A neon tube: on, it strikes with a flicker and then hums softly (an endless glow: it pauses off screen). */
+export declare function switchNeon(options?: SwitchNeonOptions): FormEffect;

package/dist/forms/effects/switch/switchNeon.js

@@ -0,0 +1,53 @@
+import { CHANGED, CHECKED, at, choiceLayer, defineForm, inItem, loopPaused, switchOf, v, varName } from "../kit.js";
+const ID = "switchNeon";
+const ROOT = switchOf(ID);
+const TUBE = choiceLayer(ID, "tube");
+// A neon sign: off, the tube is dark glass; on, it lights (its glow is a fixed shadow on a layer whose opacity moves,
+// never an animated shadow), flickers as it strikes, then hums: a slow, slight breathing that never stops while it is
+// on. That hum is an endless loop: it pauses off screen and with the page's pause switch (WCAG 2.2.2).
+const STATE = `  ${at(ROOT)} {
+    --sx-choice-bg: ${v(ID, "glass")};
+    --sx-choice-fill: ${v(ID, "glass")};
+    --sx-choice-edge: color-mix(in oklab, ${v(ID, "color")} 35%, transparent);
+    --sx-switch-thumb-on: ${v(ID, "color")};
+  }
+  ${at(TUBE)} {
+    inset: -2px;
+    border: 2px solid ${v(ID, "color")};
+    border-radius: inherit;
+    box-shadow: 0 0 0.5em ${v(ID, "color")}, inset 0 0 0.35em ${v(ID, "color")};
+    opacity: 0;
+  }
+  ${at(inItem(ROOT, CHECKED, TUBE))} {
+    opacity: 1;
+  }`;
+const CSS = `  ${at(inItem(ROOT, CHECKED, TUBE))} {
+    animation: sx-form-switchNeon-hum 3s ease-in-out infinite;
+  }
+  ${at(inItem(ROOT, `${CHECKED}${CHANGED}`, TUBE))} {
+    animation: sx-form-switchNeon ${v(ID, "time")} linear, sx-form-switchNeon-hum 3s ease-in-out ${v(ID, "time")} infinite;
+  }
+${loopPaused(TUBE)}
+  @keyframes sx-form-switchNeon {
+    0%, 20%, 40%, 100% { opacity: 1; }
+    10%, 30% { opacity: 0.2; }
+    35% { opacity: 0.6; }
+  }
+  @keyframes sx-form-switchNeon-hum {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.82; }
+  }`;
+/** A neon tube: on, it strikes with a flicker and then hums softly (an endless glow: it pauses off screen). */
+export function switchNeon(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["switch"],
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "glass")]: options.glass ?? "#15151d",
+            [varName(ID, "time")]: `${options.duration ?? 0.6}s`,
+        },
+        layers: [{ slot: "box", part: "tube", keep: true }],
+        needs: { inView: true },
+    });
+}

package/dist/forms/effects/switch/switchNeon.schema.d.ts

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

package/dist/forms/effects/switch/switchNeon.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_NEON_SCHEMA = defineSchema()({
+    id: "switchNeon",
+    family: "form",
+    factory: "switchNeon",
+    fields: {
+        color: { kind: "color", label: "Tube colour", default: "var(--color-sx-accent)" },
+        glass: { kind: "color", label: "Glass", default: "#15151d" },
+        duration: { kind: "number", label: "Flicker", min: 0.2, max: 1.2, step: 0.05, unit: "s", default: 0.6 },
+    },
+});

package/dist/forms/effects/switch/switchSlide.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchSlideOptions {
+    /** Seconds the thumb takes to cross. Default `0.3`. */
+    readonly duration?: number;
+}
+/** The thumb slides across with a little overshoot, as on a phone. */
+export declare function switchSlide(options?: SwitchSlideOptions): FormEffect;

package/dist/forms/effects/switch/switchSlide.js

@@ -0,0 +1,11 @@
+import { SPRING, THUMB, at, defineForm, switchOf, v, varName } from "../kit.js";
+const ID = "switchSlide";
+// Without it the thumb jumps; with it the thumb slides across with a little overshoot, and the track's colour fades
+// (the look's own transition). A dragged thumb follows the finger with no lag: the transition waits for the release.
+const CSS = `  ${at(`${switchOf(ID)}:not([data-sx-dragging]) ${THUMB}`)} {
+    transition: translate ${v(ID, "time")} ${SPRING};
+  }`;
+/** The thumb slides across with a little overshoot, as on a phone. */
+export function switchSlide(options = {}) {
+    return defineForm(ID, CSS, { fits: ["switch"], vars: { [varName(ID, "time")]: `${options.duration ?? 0.3}s` } });
+}

package/dist/forms/effects/switch/switchSlide.schema.d.ts

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

package/dist/forms/effects/switch/switchSlide.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_SLIDE_SCHEMA = defineSchema()({
+    id: "switchSlide",
+    family: "form",
+    factory: "switchSlide",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.8, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

package/dist/forms/effects/switch/switchStretch.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchStretchOptions {
+    /** How wide the thumb gets while pressed, 1 to 1.6. Default `1.3`. */
+    readonly stretch?: number;
+    /** Seconds it takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The thumb stretches toward the other side while pressed, then springs back. */
+export declare function switchStretch(options?: SwitchStretchOptions): FormEffect;

package/dist/forms/effects/switch/switchStretch.js

@@ -0,0 +1,21 @@
+import { DIR, SPRING, THUMB, at, defineForm, switchOf, v, varName } from "../kit.js";
+const ID = "switchStretch";
+const ROOT = switchOf(ID);
+// Pressed, the thumb widens toward where it would go, anchored on the side it sits on (start when off, end when on,
+// in reading direction), and springs back when let go: the switch feels like it is about to move.
+const CSS = `  ${at(`${ROOT} ${THUMB}`)} {
+    transform-origin: calc(50% + 50% * ${DIR} * (2 * var(--sx-switch-at) - 1)) 50%;
+    transition: scale ${v(ID, "time")} ${SPRING};
+  }
+  ${at(`${ROOT}:not([data-sx-pending]):active ${THUMB}`)} {
+    scale: ${v(ID, "stretch")} 1;
+    transition-duration: 120ms;
+  }`;
+/** The thumb stretches toward the other side while pressed, then springs back. */
+export function switchStretch(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["switch"],
+        vars: { [varName(ID, "stretch")]: options.stretch ?? 1.3, [varName(ID, "time")]: `${options.duration ?? 0.25}s` },
+        claims: ["thumb"],
+    });
+}

package/dist/forms/effects/switch/switchStretch.schema.d.ts

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

package/dist/forms/effects/switch/switchStretch.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_STRETCH_SCHEMA = defineSchema()({
+    id: "switchStretch",
+    family: "form",
+    factory: "switchStretch",
+    fields: {
+        stretch: { kind: "number", label: "Stretch", min: 1, max: 1.6, step: 0.05, default: 1.3 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.6, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

package/dist/forms/effects/valid/validAsync.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface ValidAsyncOptions {
+    /** Seconds the ring takes to close and the mark to draw. Default `0.3`. */
+    readonly duration?: number;
+}
+/** The async check's spinner closes into a ring, then a check (or a cross) draws inside it and the mark pops (`status`). */
+export declare function validAsync(options?: ValidAsyncOptions): FormEffect;

package/dist/forms/effects/valid/validAsync.js

@@ -0,0 +1,36 @@
+import { SPRING, at, defineForm, fieldOf, inField, v, varName } from "../kit.js";
+const ID = "validAsync";
+const FIELD = fieldOf(ID);
+const MARK = `${FIELD} [data-sx-field-status] > svg`;
+const RING = `${FIELD} [data-sx-field-status] [data-sx-tool-part="ring"]`;
+const SIGN = `${FIELD} [data-sx-field-status] :is([data-sx-tool-part="check"], [data-sx-tool-part="cross"])`;
+const DONE = ':is([data-sx-status="valid"], [data-sx-status="invalid"])';
+// The field's own mark (`status`) swaps a spinner for a check or a cross. This turns the swap into one gesture: the
+// spinning arc closes into a full ring, then the sign draws inside it and the whole mark pops. The closed ring is a
+// state (it holds under reduced motion); the rest is motion.
+const STATE = `  ${at(RING)} {
+    transform-box: fill-box;
+    transform-origin: center;
+    rotate: -90deg;
+  }
+  ${at(inField(ID, DONE, RING))} {
+    stroke-dashoffset: 0;
+  }`;
+const CSS = `  ${at(RING)} {
+    transition: stroke-dashoffset ${v(ID, "time")} ease-out;
+  }
+  ${at(inField(ID, DONE, SIGN))} {
+    transition: stroke-dashoffset ${v(ID, "time")} ease-out calc(${v(ID, "time")} * 0.6);
+  }
+  ${at(inField(ID, DONE, MARK))} {
+    animation: sx-form-validAsync calc(${v(ID, "time")} * 2) ${SPRING};
+  }
+  @keyframes sx-form-validAsync {
+    0%, 50% { scale: 1; }
+    75% { scale: 1.2; }
+    100% { scale: 1; }
+  }`;
+/** The async check's spinner closes into a ring, then a check (or a cross) draws inside it and the mark pops (`status`). */
+export function validAsync(options = {}) {
+    return defineForm(ID, CSS, { state: STATE, vars: { [varName(ID, "time")]: `${options.duration ?? 0.3}s` } });
+}

package/dist/forms/effects/valid/validAsync.schema.d.ts

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

package/dist/forms/effects/valid/validAsync.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const VALID_ASYNC_SCHEMA = defineSchema()({
+    id: "validAsync",
+    family: "form",
+    factory: "validAsync",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.8, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

package/dist/forms/effects/valid/validBubble.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface ValidBubbleOptions {
+    /** Seconds it takes to pop up. Default `0.18`. */
+    readonly duration?: number;
+}
+/** The error pops up in a bubble tied to the field, over the page, instead of pushing the form down. */
+export declare function validBubble(options?: ValidBubbleOptions): FormEffect;

package/dist/forms/effects/valid/validBubble.js

@@ -0,0 +1,61 @@
+import { EASE, at, boxOf, defineForm, fieldOf, inField, v, varName } from "../kit.js";
+const ID = "validBubble";
+const FIELD = fieldOf(ID);
+const MESSAGE = `${FIELD} > [data-sx-field-message]`;
+const SAYS = `${FIELD} [data-sx-field-says]`;
+const SAYING = ":has([data-sx-field-error]:not(:empty))";
+// The error leaves the flow and floats in a bubble under the box, so nothing below moves (atlas rule 7). Anchor
+// positioning ties it to the box, fixed, so a scroll box around the form can't clip it. It never flips above: a
+// `flip-block` fallback flipped it on a scrolled page in Chromium, WebKit and Firefox alike, with room to spare below
+// (found in Phase 2). A browser without anchor positioning puts the bubble under the whole field. The field rises over
+// the next one while it speaks: the field root isolates its stacking, so the bubble alone could never cover a later field.
+const STATE = `  ${at(boxOf(ID))} {
+    anchor-name: ${v(ID, "anchor")};
+  }
+  ${at(MESSAGE)} {
+    position: absolute;
+    z-index: 2;
+    inset-block-start: calc(100% + 0.25rem);
+    inset-inline-start: 0;
+    inline-size: max-content;
+    max-inline-size: min(20rem, 100%);
+  }
+  @supports (anchor-name: --a) {
+    ${at(MESSAGE)} {
+      position: fixed;
+      inset: auto;
+      margin-block: 0.375rem;
+      position-anchor: ${v(ID, "anchor")};
+      position-area: block-end span-inline-end;
+    }
+  }
+  ${at(inField(ID, SAYING, FIELD))} {
+    z-index: 3;
+  }
+  ${at(SAYS)} {
+    padding: 0.375rem 0.625rem;
+    border: 1px solid currentColor;
+    border-radius: var(--radius-sx-control, 0.375rem);
+    background: var(--color-sx-secondary, Canvas);
+  }`;
+const CSS = `  ${at(SAYS)} {
+    transform-origin: calc(50% - 50% * var(--sx-form-dir)) 0;
+    transition: opacity ${v(ID, "time")} ${EASE}, scale ${v(ID, "time")} ${EASE};
+  }
+  @starting-style {
+    ${at(SAYS)} {
+      opacity: 0;
+      scale: 0.92;
+    }
+  }`;
+/** The error pops up in a bubble tied to the field, over the page, instead of pushing the form down. */
+export function validBubble(options = {}) {
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: {
+            // one anchor name per field: `{uid}` becomes the field's own id
+            [varName(ID, "anchor")]: "--{uid}-bubble",
+            [varName(ID, "time")]: `${options.duration ?? 0.18}s`,
+        },
+    });
+}

package/dist/forms/effects/valid/validBubble.schema.d.ts

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

package/dist/forms/effects/valid/validBubble.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const VALID_BUBBLE_SCHEMA = defineSchema()({
+    id: "validBubble",
+    family: "form",
+    factory: "validBubble",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.05, max: 0.5, step: 0.05, unit: "s", default: 0.18 },
+    },
+});