@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/forms/effects/picker/pickerArrow.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const PICKER_ARROW_SCHEMA = defineSchema()({
+    id: "pickerArrow",
+    family: "form",
+    factory: "pickerArrow",
+    fields: {
+        turn: { kind: "number", label: "Turn", min: 90, max: 180, step: 15, unit: "°", default: 180 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.6, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

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

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface PickerCheckOptions {
+    /** Seconds the tick takes to draw. Default `0.2`. */
+    readonly duration?: number;
+}
+/** The chosen option's tick draws itself in, at the end of the option. */
+export declare function pickerCheck(options?: PickerCheckOptions): FormEffect;

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

@@ -0,0 +1,31 @@
+import { EASE, OPTION, SELECT, SPRING, at, defineForm, pickerOf, v, varName } from "../kit.js";
+const ID = "pickerCheck";
+const CHECK = "[data-sx-option-check]";
+// A Combobox's tick is a path with a dash (the base sheet hides it, a chosen option shows it): here it draws itself
+// and grows into place. A `<select>`'s own tick (`::checkmark`, where the picker can be styled) moves to the end, as
+// in the Combobox, takes the primary colour and grows in. Its place and colour are the state.
+const STATE = `  ${at(`${pickerOf(ID)} ${SELECT} option`)}::checkmark {
+    order: 1;
+    margin-inline-start: auto;
+    color: var(--color-sx-primary, currentColor);
+  }`;
+const CSS = `  ${at(`${pickerOf(ID)} ${CHECK} path`)} {
+    transition: stroke-dashoffset ${v(ID, "time")} ${EASE};
+  }
+  ${at(`${pickerOf(ID)} ${CHECK}`)} {
+    transition: scale ${v(ID, "time")} ${SPRING};
+  }
+  ${at(`${pickerOf(ID)} ${OPTION}:not([aria-selected="true"]) ${CHECK}`)} {
+    scale: 0.5;
+  }
+  ${at(`${pickerOf(ID)} ${SELECT} option`)}::checkmark {
+    transition: scale ${v(ID, "time")} ${SPRING}, opacity ${v(ID, "time")} ${EASE};
+  }
+  ${at(`${pickerOf(ID)} ${SELECT} option:not(:checked)`)}::checkmark {
+    scale: 0.5;
+    opacity: 0;
+  }`;
+/** The chosen option's tick draws itself in, at the end of the option. */
+export function pickerCheck(options = {}) {
+    return defineForm(ID, CSS, { fits: ["picker"], state: STATE, vars: { [varName(ID, "time")]: `${options.duration ?? 0.2}s` } });
+}

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

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

package/dist/forms/effects/picker/pickerCheck.schema.js

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

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

@@ -0,0 +1,12 @@
+import type { FormEffect } from "../../types.js";
+export interface PickerOpenOptions {
+    /**
+     * How the list arrives: `"scale"` grows from a little smaller, `"fade"` fades in as it drops a few pixels,
+     * `"unroll"` opens downward like a blind. Default `"scale"`.
+     */
+    readonly kind?: "scale" | "fade" | "unroll";
+    /** Seconds it takes. Default `0.18` (rule 8: 200 ms or less). */
+    readonly duration?: number;
+}
+/** The list grows, fades or unrolls into view as it opens, and back as it closes. */
+export declare function pickerOpen(options?: PickerOpenOptions): FormEffect;

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

@@ -0,0 +1,34 @@
+import { at, defineForm, pickerOf, v, varName } from "../kit.js";
+const ID = "pickerOpen";
+/** Per kind: the starting scale, the starting shift, the clip it opens from and the clip it opens to. */
+const KINDS = {
+    scale: { scale: 0.95, shift: "0px", from: "none", to: "none" },
+    fade: { scale: 1, shift: "-0.375rem", from: "none", to: "none" },
+    // the clip leaves room around the list, so its shadow is not cut off once it is open
+    unroll: { scale: 1, shift: "0px", from: "inset(-3rem -3rem 100% -3rem)", to: "inset(-3rem)" },
+};
+// The base sheet holds the transition (opacity, scale, translate, clip-path, and display / overlay so the list stays
+// in the top layer until it has faded out); this sets where it starts. The same variables reach the Combobox's popup
+// and a `<select>`'s own picker, where the browser lets it be styled. Closing plays it backwards.
+const CSS = `  ${at(pickerOf(ID))} {
+    --sx-picker-time: ${v(ID, "time")};
+    --sx-picker-from-opacity: 0;
+    --sx-picker-from-scale: ${v(ID, "scale")};
+    --sx-picker-from-shift: 0 ${v(ID, "shift")};
+    --sx-picker-from-clip: ${v(ID, "from")};
+    --sx-picker-clip: ${v(ID, "to")};
+  }`;
+/** The list grows, fades or unrolls into view as it opens, and back as it closes. */
+export function pickerOpen(options = {}) {
+    const kind = KINDS[options.kind ?? "scale"];
+    return defineForm(ID, CSS, {
+        fits: ["picker"],
+        vars: {
+            [varName(ID, "time")]: `${options.duration ?? 0.18}s`,
+            [varName(ID, "scale")]: kind.scale,
+            [varName(ID, "shift")]: kind.shift,
+            [varName(ID, "from")]: kind.from,
+            [varName(ID, "to")]: kind.to,
+        },
+    });
+}

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

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

package/dist/forms/effects/picker/pickerOpen.schema.js

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+export const PICKER_OPEN_SCHEMA = defineSchema()({
+    id: "pickerOpen",
+    family: "form",
+    factory: "pickerOpen",
+    fields: {
+        kind: {
+            kind: "choice",
+            label: "Kind",
+            values: ["scale", "fade", "unroll"],
+            labels: { scale: "Scale up", fade: "Fade and drop", unroll: "Unroll" },
+            default: "scale",
+        },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.2, step: 0.01, unit: "s", default: 0.18 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface PickerSheetOptions {
+    /** The sheet's tallest, as a share of the screen's height. Default `0.6`. */
+    readonly height?: number;
+    /** Seconds it takes to slide up. Default `0.25`. */
+    readonly duration?: number;
+}
+/** On a phone the list docks at the bottom of the screen and slides up, within reach of a thumb. */
+export declare function pickerSheet(options?: PickerSheetOptions): FormEffect;

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

@@ -0,0 +1,47 @@
+import { POPUP, SELECT, at, defineForm, pickerOf, v, varName } from "../kit.js";
+const ID = "pickerSheet";
+/** A phone: a narrow screen with a finger, not a narrow desktop window. */
+const PHONE = "@media (max-width: 40rem) and (pointer: coarse)";
+/** The Combobox's popup, and a `<select>`'s own picker where it can be styled: one rule each (see the base sheet). */
+const LISTS = [`${at(`${pickerOf(ID)} ${POPUP}`)}`, `${at(`${pickerOf(ID)} ${SELECT}`)}::picker(select)`];
+// On a phone the list leaves the box and docks at the bottom of the screen, full width, with a dimmed page behind it,
+// where a thumb reaches it. The Combobox (`needs.sheet`) sees it docked (`--sx-picker-docked`), scrolls its box to the
+// top of the screen so the sheet never covers it, and keeps the sheet between the box and the on-screen keyboard.
+// The place is the state; the slide up is the motion, set on the popup itself so it wins over `pickerOpen` on a phone.
+const STATE = `  ${PHONE} {
+${LISTS.map((list) => `    ${list} {
+      position-area: none;
+      position-try-fallbacks: none;
+      inset-inline: 0;
+      inset-block: auto var(--sx-picker-keyboard, 0px);
+      inline-size: auto;
+      max-block-size: min(${v(ID, "height")}, var(--sx-picker-room, 100dvh));
+      margin: 0;
+      padding: 0.5rem;
+      padding-block-end: calc(0.5rem + env(safe-area-inset-bottom, 0px));
+      --sx-picker-radius: 1rem 1rem 0 0;
+      --sx-picker-docked: 1;
+    }`).join("\n")}
+    ${at(`${pickerOf(ID)} ${POPUP}`)}::backdrop {
+      background: color-mix(in oklab, var(--color-sx-ink, currentColor) 35%, transparent);
+    }
+  }`;
+const CSS = `  ${PHONE} {
+    ${at(`${pickerOf(ID)} ${POPUP}`)}, ${at(`${pickerOf(ID)} ${SELECT}`)} {
+      --sx-picker-time: ${v(ID, "time")};
+      --sx-picker-from-opacity: 1;
+      --sx-picker-from-scale: 1;
+      --sx-picker-from-shift: 0 100%;
+      --sx-picker-from-clip: none;
+      --sx-picker-clip: none;
+    }
+  }`;
+/** On a phone the list docks at the bottom of the screen and slides up, within reach of a thumb. */
+export function pickerSheet(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["picker"],
+        state: STATE,
+        needs: { sheet: true },
+        vars: { [varName(ID, "height")]: `${Math.round((options.height ?? 0.6) * 100)}dvh`, [varName(ID, "time")]: `${options.duration ?? 0.25}s` },
+    });
+}

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

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

package/dist/forms/effects/picker/pickerSheet.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const PICKER_SHEET_SCHEMA = defineSchema()({
+    id: "pickerSheet",
+    family: "form",
+    factory: "pickerSheet",
+    fields: {
+        height: { kind: "number", label: "Tallest", min: 0.3, max: 0.9, step: 0.05, default: 0.6, help: "A share of the screen's height." },
+        duration: { kind: "number", label: "Duration", min: 0.15, max: 0.5, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface PickerStaggerOptions {
+    /** Seconds between one option and the next. Default `0.03`. */
+    readonly step?: number;
+    /** Seconds each option takes to arrive. Default `0.18`. */
+    readonly duration?: number;
+}
+/** The options drop into the list one after another as it opens. */
+export declare function pickerStagger(options?: PickerStaggerOptions): FormEffect;

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

@@ -0,0 +1,31 @@
+import { EASE, OPTION, POPUP, SELECT, at, defineForm, pickerOf, v, varName } from "../kit.js";
+const ID = "pickerStagger";
+/** Past the eighth option, the rest arrive together: a long list never keeps anyone waiting. */
+const MOST = 8;
+const arrive = (delay) => `transition: opacity ${v(ID, "time")} ${EASE} ${delay}, translate ${v(ID, "time")} ${EASE} ${delay};`;
+const START = `opacity: 0;
+      translate: 0 -0.375rem;`;
+// The options drop in one after another as the list opens (and as filtering brings new ones in). A Combobox numbers
+// its options (`--sx-option-i`); a `<select>`'s count themselves with `sibling-index()` where the browser has it, and
+// arrive together elsewhere (the declaration is dropped, so nothing waits).
+const CSS = `  ${at(`${pickerOf(ID)} ${POPUP} ${OPTION}`)} {
+    ${arrive(`calc(min(var(--sx-option-i, 0), ${MOST}) * ${v(ID, "step")})`)}
+  }
+  ${at(`${pickerOf(ID)} ${SELECT} option`)} {
+    ${arrive(`calc(min(sibling-index() - 1, ${MOST}) * ${v(ID, "step")})`)}
+  }
+  @starting-style {
+    ${at(`${pickerOf(ID)} ${POPUP}:popover-open ${OPTION}`)} {
+      ${START}
+    }
+    ${at(`${pickerOf(ID)} ${SELECT}:open option`)} {
+      ${START}
+    }
+  }`;
+/** The options drop into the list one after another as it opens. */
+export function pickerStagger(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["picker"],
+        vars: { [varName(ID, "step")]: `${options.step ?? 0.03}s`, [varName(ID, "time")]: `${options.duration ?? 0.18}s` },
+    });
+}

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

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

package/dist/forms/effects/picker/pickerStagger.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const PICKER_STAGGER_SCHEMA = defineSchema()({
+    id: "pickerStagger",
+    family: "form",
+    factory: "pickerStagger",
+    fields: {
+        step: { kind: "number", label: "Step", min: 0.01, max: 0.08, step: 0.01, unit: "s", default: 0.03 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.4, step: 0.02, unit: "s", default: 0.18 },
+    },
+});

package/dist/forms/effects/radio/radioCard.d.ts

@@ -0,0 +1,10 @@
+import type { FormEffect } from "../../types.js";
+export interface RadioCardOptions {
+    /** Seconds each change takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/**
+ * Each option becomes a card holding the circle, the words and the help (a plan, a delivery speed): the chosen one lit
+ * and outlined, all of them lifted a little under the mouse. Side by side with `orientation="horizontal"`.
+ */
+export declare function radioCard(options?: RadioCardOptions): FormEffect;

package/dist/forms/effects/radio/radioCard.js

@@ -0,0 +1,15 @@
+import { CARD_LAYER, cardMotion, cardState } from "../cards.js";
+import { defineForm, radiosOf, varName } from "../kit.js";
+const ID = "radioCard";
+/**
+ * Each option becomes a card holding the circle, the words and the help (a plan, a delivery speed): the chosen one lit
+ * and outlined, all of them lifted a little under the mouse. Side by side with `orientation="horizontal"`.
+ */
+export function radioCard(options = {}) {
+    return defineForm(ID, cardMotion(radiosOf(ID), ID), {
+        fits: ["radio"],
+        state: cardState(radiosOf(ID), ID),
+        vars: { [varName(ID, "time")]: `${options.duration ?? 0.2}s` },
+        layers: [CARD_LAYER],
+    });
+}

package/dist/forms/effects/radio/radioCard.schema.d.ts

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

package/dist/forms/effects/radio/radioCard.schema.js

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

package/dist/forms/effects/radio/radioCircle.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface RadioCircleOptions {
+    /** The pen's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Seconds to draw it. Default `0.5`. */
+    readonly duration?: number;
+}
+/** A pen circles the chosen option's words, like an answer marked on paper. */
+export declare function radioCircle(options?: RadioCircleOptions): FormEffect;

package/dist/forms/effects/radio/radioCircle.js

@@ -0,0 +1,49 @@
+import { CHECKED, TEXT, at, choiceLayer, defineForm, inItem, radiosOf, v, varName } from "../kit.js";
+const ID = "radioCircle";
+const ROOT = radiosOf(ID);
+const LOOP = choiceLayer(ID);
+const PEN = `${LOOP} [data-sx-choice-svg="loop"]`;
+// A loose loop, drawn once round the chosen option's words and a little past where it started, like a pen circling an
+// answer on paper. It stretches to the words (the words stop at their own width). No `vector-effect: non-scaling-stroke`:
+// with it, Chromium measures the dash in screen pixels instead of the path's length of 1, and every option showed a dotted
+// loop (found in Phase 3). The view box has a label's usual shape instead, so the stroke stays nearly even. The loop is
+// the state: it holds under reduced motion.
+const STATE = `  ${at(`${ROOT} ${TEXT}`)} {
+    justify-self: start;
+  }
+  ${at(LOOP)} {
+    inset: -0.35em -0.7em;
+  }
+  ${at(PEN)} {
+    fill: none;
+    stroke: ${v(ID, "color")};
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+  }
+  ${at(inItem(ROOT, CHECKED, PEN))} {
+    stroke-dashoffset: 0;
+  }`;
+const CSS = `  ${at(PEN)} {
+    transition: stroke-dashoffset ${v(ID, "time")} ease-in-out;
+  }`;
+/** A pen circles the chosen option's words, like an answer marked on paper. */
+export function radioCircle(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["radio"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)", [varName(ID, "time")]: `${options.duration ?? 0.5}s` },
+        layers: [
+            {
+                slot: "text",
+                keep: true,
+                svg: {
+                    viewBox: "0 0 120 32",
+                    preserveAspectRatio: "none",
+                    children: [{ tag: "path", part: "loop", attrs: { pathLength: 1, d: "M65 3.6C34 2.4 4.5 7.6 5 16.8S30 29.6 60 29.2 115 24.8 114.6 16 91 2.8 54 5.2" } }],
+                },
+            },
+        ],
+    });
+}

package/dist/forms/effects/radio/radioCircle.schema.d.ts

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

package/dist/forms/effects/radio/radioCircle.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RADIO_CIRCLE_SCHEMA = defineSchema()({
+    id: "radioCircle",
+    family: "form",
+    factory: "radioCircle",
+    fields: {
+        color: { kind: "color", label: "Pen colour", default: "var(--color-sx-primary)" },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 1, step: 0.05, unit: "s", default: 0.5 },
+    },
+});

package/dist/forms/effects/radio/radioDot.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface RadioDotOptions {
+    /** Seconds it takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** The dot springs in on the chosen radio and shrinks away on the one left. */
+export declare function radioDot(options?: RadioDotOptions): FormEffect;

package/dist/forms/effects/radio/radioDot.js

@@ -0,0 +1,10 @@
+import { SPRING, at, defineForm, radiosOf, v, varName } from "../kit.js";
+const ID = "radioDot";
+// The chosen radio's dot grows in with a little overshoot, and the one left behind shrinks away.
+const CSS = `  ${at(`${radiosOf(ID)} [data-sx-mark="dot"]`)} {
+    transition: scale ${v(ID, "time")} ${SPRING};
+  }`;
+/** The dot springs in on the chosen radio and shrinks away on the one left. */
+export function radioDot(options = {}) {
+    return defineForm(ID, CSS, { fits: ["radio"], vars: { [varName(ID, "time")]: `${options.duration ?? 0.3}s` } });
+}

package/dist/forms/effects/radio/radioDot.schema.d.ts

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

package/dist/forms/effects/radio/radioDot.schema.js

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

package/dist/forms/effects/radio/radioEmoji.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface RadioEmojiOptions {
+    /** The chosen face's colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** Seconds each change takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** A rating in five faces, frown to smile: the chosen face lights up and wobbles. */
+export declare function radioEmoji(options?: RadioEmojiOptions): FormEffect;

package/dist/forms/effects/radio/radioEmoji.js

@@ -0,0 +1,94 @@
+import { CHANGED, CHECKED, ITEM, MARK, OPTIONS, SPRING, at, choiceLayer, defineForm, inItem, radiosOf, v, varName, whenItemHover } from "../kit.js";
+import { quietWords } from "./shape.js";
+const ID = "radioEmoji";
+const ROOT = radiosOf(ID);
+const FACE = choiceLayer(ID, "face");
+const svg = (part) => `${FACE} [data-sx-choice-svg="${part}"]`;
+/** Five mouths, from a deep frown to a wide smile: our own faces, a circle, two eyes and a line. */
+const MOUTHS = ["M8 17.2q4-4.4 8 0", "M8.5 16.5q3.5-2.2 7 0", "M8.5 15.6h7", "M8.5 14.6q3.5 2.4 7 0", "M8 14q4 5.2 8 0"];
+// A rating in faces: give it five options ("Very unhappy" … "Very happy": their words are the radios' names, read but
+// not shown). Option n wears mouth n. The faces wait grey; the chosen one takes the colour and grows a little (a state:
+// it holds under reduced motion); chosen by hand, it wobbles once.
+const STATE = `${quietWords(ROOT)}
+  ${at(`${ROOT} > ${OPTIONS}`)} {
+    flex-direction: row;
+    gap: 0.375rem;
+  }
+  ${at(`${ROOT} ${ITEM}`)} {
+    --sx-choice-size: 2.25em;
+    --sx-choice-edge: transparent;
+    --sx-choice-bg: transparent;
+  }
+  ${at(`${ROOT} ${MARK}, ${ROOT} [data-sx-mark]`)} {
+    display: none;
+  }
+  ${at(svg("face"))} {
+    fill: color-mix(in oklab, var(--color-sx-ink) 6%, transparent);
+    stroke: var(--color-sx-muted, currentColor);
+    stroke-width: 1.4;
+  }
+  ${at(svg("eyes"))} {
+    fill: var(--color-sx-muted, currentColor);
+  }
+  ${at(`${FACE} [data-sx-choice-svg^="m"]`)} {
+    display: none;
+    fill: none;
+    stroke: var(--color-sx-muted, currentColor);
+    stroke-width: 1.6;
+    stroke-linecap: round;
+  }
+${MOUTHS.map((_, i) => `  ${at(`${ROOT} ${ITEM}:nth-child(${i + 1} of ${ITEM}) ${svg(`m${i + 1}`)}`)} { display: inline; }`).join("\n")}
+  ${at(inItem(ROOT, CHECKED, svg("face")))} {
+    fill: ${v(ID, "color")};
+    stroke: var(--color-sx-ink, currentColor);
+  }
+  ${at(`${inItem(ROOT, CHECKED, svg("eyes"))}, ${inItem(ROOT, CHECKED, `${FACE} [data-sx-choice-svg^="m"]`)}`)} {
+    fill: var(--color-sx-ink, currentColor);
+    stroke: var(--color-sx-ink, currentColor);
+  }
+  ${at(inItem(ROOT, CHECKED, `${FACE} [data-sx-choice-svg^="m"]`))} {
+    fill: none;
+  }
+  ${at(inItem(ROOT, CHECKED, FACE))} {
+    scale: 1.12;
+  }`;
+const CSS = `  ${at(FACE)} {
+    transition: scale ${v(ID, "time")} ${SPRING};
+  }
+  ${at(svg("face"))} {
+    transition: fill ${v(ID, "time")}, stroke ${v(ID, "time")};
+  }
+${whenItemHover(ROOT, FACE, "scale: 1.08;")}
+  ${at(inItem(ROOT, `${CHECKED}${CHANGED}`, FACE))} {
+    animation: sx-form-radioEmoji calc(${v(ID, "time")} * 2) ease-in-out;
+  }
+  @keyframes sx-form-radioEmoji {
+    0%, 100% { rotate: 0deg; }
+    25% { rotate: -12deg; }
+    50% { rotate: 10deg; }
+    75% { rotate: -5deg; }
+  }`;
+/** A rating in five faces, frown to smile: the chosen face lights up and wobbles. */
+export function radioEmoji(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["radio"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)", [varName(ID, "time")]: `${options.duration ?? 0.25}s` },
+        layers: [
+            {
+                slot: "box",
+                part: "face",
+                keep: true,
+                svg: {
+                    viewBox: "0 0 24 24",
+                    children: [
+                        { tag: "circle", part: "face", attrs: { cx: 12, cy: 12, r: 10 } },
+                        { tag: "path", part: "eyes", attrs: { d: "M9 10.2a1.2 1.2 0 1 0 0-.01zM15 10.2a1.2 1.2 0 1 0 0-.01z" } },
+                        ...MOUTHS.map((d, i) => ({ tag: "path", part: `m${i + 1}`, attrs: { d } })),
+                    ],
+                },
+            },
+        ],
+        claims: ["mark"],
+    });
+}

package/dist/forms/effects/radio/radioEmoji.schema.d.ts

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

package/dist/forms/effects/radio/radioEmoji.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RADIO_EMOJI_SCHEMA = defineSchema()({
+    id: "radioEmoji",
+    family: "form",
+    factory: "radioEmoji",
+    fields: {
+        color: { kind: "color", label: "Chosen face", default: "var(--color-sx-accent)" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.6, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

package/dist/forms/effects/radio/radioPulse.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface RadioPulseOptions {
+    /** The ring's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Seconds the ring takes to spread and fade. Default `0.6`. */
+    readonly duration?: number;
+}
+/** A ring pulses out once from the radio the user chose. */
+export declare function radioPulse(options?: RadioPulseOptions): FormEffect;

package/dist/forms/effects/radio/radioPulse.js

@@ -0,0 +1,24 @@
+import { CHANGED, CHECKED, at, choiceLayer, defineForm, inItem, radiosOf, v, varName } from "../kit.js";
+const ID = "radioPulse";
+const RING = choiceLayer(ID);
+// A ring leaves the radio the user chose, once: it spreads and fades. Never on load (CHANGED), and never on a loop:
+// one pulse says "this one", a looping one would only nag (and need a pause control, WCAG 2.2.2).
+const CSS = `  ${at(RING)} {
+    border: 2px solid ${v(ID, "color")};
+    opacity: 0;
+  }
+  ${at(inItem(radiosOf(ID), `${CHECKED}${CHANGED}`, RING))} {
+    animation: sx-form-radioPulse ${v(ID, "time")} ease-out;
+  }
+  @keyframes sx-form-radioPulse {
+    0% { scale: 0.55; opacity: 0.7; }
+    100% { scale: 1.5; opacity: 0; }
+  }`;
+/** A ring pulses out once from the radio the user chose. */
+export function radioPulse(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["radio"],
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)", [varName(ID, "time")]: `${options.duration ?? 0.6}s` },
+        layers: [{ slot: "halo" }],
+    });
+}

package/dist/forms/effects/radio/radioPulse.schema.d.ts

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

package/dist/forms/effects/radio/radioPulse.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RADIO_PULSE_SCHEMA = defineSchema()({
+    id: "radioPulse",
+    family: "form",
+    factory: "radioPulse",
+    fields: {
+        color: { kind: "color", label: "Ring colour", default: "var(--color-sx-primary)" },
+        duration: { kind: "number", label: "Duration", min: 0.3, max: 1.2, step: 0.05, unit: "s", default: 0.6 },
+    },
+});

package/dist/forms/effects/radio/radioScale.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface RadioScaleOptions {
+    /** A bar under each number in its group's colour: 0-6 red, 7-8 amber, 9-10 green (a Net Promoter Score). Default `true`. */
+    readonly tint?: boolean;
+    /** Seconds each change takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/** A 0-10 scale of numbered cells (a Net Promoter Score): the chosen number fills, groups marked by a quiet bar. */
+export declare function radioScale(options?: RadioScaleOptions): FormEffect;