@sharedex/ui 0.9.0 → 0.10.0

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;

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

@@ -0,0 +1,73 @@
+import { CHANGED, CHECKED, ITEM, OPTIONS, ROW, SPRING, at, choiceLayer, defineForm, inItem, radiosOf, v, varName, whenItemHover } from "../kit.js";
+import { bareOptions } from "./shape.js";
+const ID = "radioScale";
+const ROOT = radiosOf(ID);
+const CELL = choiceLayer(ID, "cell");
+const FILL = `${CELL} > [data-sx-choice-part="fill"]`;
+// A 0-10 scale (give it eleven options): each number a square cell, the chosen one filled. The fill is a layer that
+// fades, so no background colour is animated; the number's colour follows. The bars only say which group a number is
+// in (the numbers themselves say everything), so they stay quiet, under the cell.
+const STATE = `${bareOptions(ROOT)}
+  ${at(`${ROOT} > ${OPTIONS}`)} {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+  ${at(`${ROOT} ${ROW}`)} {
+    place-items: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    min-block-size: 0;
+    font-variant-numeric: tabular-nums;
+  }
+  ${at(inItem(ROOT, "", CELL))} {
+    border: 1px solid var(--color-sx-border, currentColor);
+    border-radius: var(--radius-sx-control, 0.375rem);
+    background: var(--color-sx-secondary, Canvas);
+    box-shadow: inset 0 calc(-3px * ${v(ID, "tint")}) 0 var(--sx-radios-tint, transparent);
+  }
+  ${at(`${ROOT} ${ITEM}:nth-child(-n + 7 of ${ITEM})`)} {
+    --sx-radios-tint: var(--color-sx-danger);
+  }
+  ${at(`${ROOT} ${ITEM}:nth-child(n + 8 of ${ITEM}):nth-child(-n + 9 of ${ITEM})`)} {
+    --sx-radios-tint: color-mix(in oklab, var(--color-sx-danger) 50%, var(--color-sx-success));
+  }
+  ${at(`${ROOT} ${ITEM}:nth-child(n + 10 of ${ITEM})`)} {
+    --sx-radios-tint: var(--color-sx-success);
+  }
+  ${at(inItem(ROOT, "", FILL))} {
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    background: var(--color-sx-primary, Highlight);
+    opacity: 0;
+  }
+  ${at(inItem(ROOT, CHECKED))} {
+    --sx-choice-text: var(--color-sx-on-primary);
+  }
+  ${at(inItem(ROOT, CHECKED, FILL))} {
+    opacity: 1;
+  }`;
+const CSS = `  ${at(inItem(ROOT, "", FILL))} {
+    transition: opacity ${v(ID, "time")} ease-out;
+  }
+  ${at(inItem(ROOT, "", ROW))} {
+    transition: translate ${v(ID, "time")} ease-out;
+  }
+${whenItemHover(ROOT, ROW, "translate: 0 -2px;")}
+  ${at(inItem(ROOT, `${CHECKED}${CHANGED}`, CELL))} {
+    animation: sx-form-radioScale calc(${v(ID, "time")} * 2) ${SPRING};
+  }
+  @keyframes sx-form-radioScale {
+    0% { scale: 0.85; }
+    100% { scale: 1; }
+  }`;
+/** A 0-10 scale of numbered cells (a Net Promoter Score): the chosen number fills, groups marked by a quiet bar. */
+export function radioScale(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["radio"],
+        state: STATE,
+        vars: { [varName(ID, "tint")]: options.tint === false ? 0 : 1, [varName(ID, "time")]: `${options.duration ?? 0.2}s` },
+        layers: [{ slot: "row", part: "cell", children: ["fill"], keep: true }],
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RADIO_SCALE_SCHEMA = defineSchema()({
+    id: "radioScale",
+    family: "form",
+    factory: "radioScale",
+    fields: {
+        tint: { kind: "boolean", label: "Group bars (red, amber, green)", default: true },
+        duration: { kind: "number", label: "Duration", min: 0.05, max: 0.6, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

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

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface RadioSegmentOptions {
+    /** Seconds the thumb takes to slide. Default `0.3`. */
+    readonly duration?: number;
+}
+/** A segmented control: options in a tray, a thumb sliding under the chosen one (up to 12 options). */
+export declare function radioSegment(options?: RadioSegmentOptions): FormEffect;

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

@@ -0,0 +1,52 @@
+import { CHOICE, DIR, ITEM, OPTIONS, ROW, at, choiceLayer, defineForm, radiosOf, v, varName } from "../kit.js";
+import { bareOptions } from "./shape.js";
+const ID = "radioSegment";
+const ROOT = radiosOf(ID);
+const THUMB = choiceLayer(ID, "thumb");
+/** Groups of up to this many options get a thumb that knows its place. */
+const MOST = 12;
+// A segmented control: the options share a tray in equal columns, and one thumb slides under the chosen one. Equal
+// columns let the thumb's place come from CSS alone (`:nth-child(n of …)` sets `--sx-radios-at`) and move by
+// `translate`, so nothing is measured and nothing re-lays out. The thumb is the state: it holds under reduced motion.
+const STATE = `${bareOptions(ROOT)}
+  ${at(`${ROOT} > ${OPTIONS}`)} {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 0;
+    padding: 0.25rem;
+    border-radius: var(--radius-sx-control, 0.5rem);
+    background: color-mix(in oklab, var(--color-sx-ink) 7%, var(--color-sx-secondary));
+  }
+  ${at(`${ROOT} ${ROW}`)} {
+    justify-items: center;
+    padding: 0.375rem 0.75rem;
+    border-radius: calc(var(--radius-sx-control, 0.5rem) - 0.125rem);
+    text-align: center;
+  }
+  ${at(THUMB)} {
+    inset-block: 0.25rem;
+    inset-inline: 0.25rem auto;
+    inline-size: calc((100% - 0.5rem) / var(--sx-radios-n, 1));
+    border-radius: calc(var(--radius-sx-control, 0.5rem) - 0.125rem);
+    background: var(--color-sx-secondary, Canvas);
+    box-shadow: 0 1px 3px color-mix(in oklab, var(--color-sx-ink) 22%, transparent);
+    translate: calc(var(--sx-radios-at, 0) * 100% * ${DIR}) 0;
+    opacity: 0;
+  }
+  ${at(`${ROOT}:has(${CHOICE}:checked) ${THUMB}`)} {
+    opacity: 1;
+  }
+${Array.from({ length: MOST }, (_, i) => `  ${at(`${ROOT}:has(${ITEM}:nth-child(${i + 1} of ${ITEM}) ${CHOICE}:checked)`)} { --sx-radios-at: ${i}; }`).join("\n")}`;
+const CSS = `  ${at(THUMB)} {
+    transition: translate ${v(ID, "time")} var(--ease-sx-out, ease-out), opacity ${v(ID, "time")};
+  }`;
+/** A segmented control: options in a tray, a thumb sliding under the chosen one (up to 12 options). */
+export function radioSegment(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["radio"],
+        state: STATE,
+        vars: { [varName(ID, "time")]: `${options.duration ?? 0.3}s` },
+        layers: [{ slot: "track", part: "thumb", keep: true }],
+    });
+}

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

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

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

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RADIO_SEGMENT_SCHEMA = defineSchema()({
+    id: "radioSegment",
+    family: "form",
+    factory: "radioSegment",
+    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/radioStars.d.ts

@@ -0,0 +1,15 @@
+import type { FormEffect } from "../../types.js";
+export interface RadioStarsOptions {
+    /** The stars' colour. Default `var(--color-sx-accent)` (pass a gold, say, for the classic look). */
+    readonly color?: string;
+    /** Half stars: give it ten options (0.5, 1 … 5); each is one half of a star. Default `false`. */
+    readonly half?: boolean;
+    /** Under the mouse, the stars up to the pointer rise one after another, a wave toward it. Default `false`. */
+    readonly wave?: boolean;
+    /** A ring of sparks leaves the star the user chose. Default `false`. */
+    readonly burst?: boolean;
+    /** Seconds each change takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** A star rating whose stars fill up to the choice; with half stars, a wave under the mouse, or a burst of sparks. */
+export declare function radioStars(options?: RadioStarsOptions): FormEffect;

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

@@ -0,0 +1,125 @@
+import { BOX, CHANGED, CHECKED, CHOICE, ITEM, MARK, OPTIONS, ROW, SPRING, at, choiceLayer, defineForm, inItem, radiosOf, v, varName } from "../kit.js";
+import { UP_TO_CHOSEN, quietWords } from "./shape.js";
+const ID = "radioStars";
+const ROOT = radiosOf(ID);
+const STAR = choiceLayer(ID, "star");
+const SHAPE = `${STAR} [data-sx-choice-svg="star"]`;
+const SPARKS = choiceLayer(ID, "sparks");
+const SPARK = `${SPARKS} > [data-sx-choice-part]`;
+const ANGLES = [-90, -30, 30, 90, 150, 210];
+const HALF = v(ID, "half");
+// A star rating: give it options 1 to 5 ("1 star" … "5 stars": their words are the radios' names, read but not
+// shown). The chosen star and every one before it fill; under the mouse, the ones up to the pointer fill instead.
+// Half stars: ten options, each box half a star wide, each showing its own half (logical sides, so a right-to-left
+// page fills from the right). Only half stars are clipped to their box, so a whole star can grow past it. The arrow
+// keys move along the stars, as with any radios.
+const STATE = `${quietWords(ROOT)}
+  ${at(`${ROOT} > ${OPTIONS}`)} {
+    flex-direction: row;
+    gap: calc(0.125rem * (1 - ${HALF}));
+  }
+  ${at(`${ROOT} ${ITEM}`)} {
+    --sx-choice-size: 1.75em;
+    --sx-choice-edge: transparent;
+    --sx-choice-bg: transparent;
+  }
+  ${at(`${ROOT} ${ROW}`)} {
+    grid-template-columns: calc(var(--sx-choice-size) * (1 - 0.5 * ${HALF})) 0;
+  }
+  ${at(`${ROOT} :is(${BOX}, ${CHOICE})`)} {
+    inline-size: calc(var(--sx-choice-size) * (1 - 0.5 * ${HALF}));
+  }
+  ${at(`${ROOT} ${BOX}`)} {
+    border-radius: 0;
+    clip-path: inset(calc(-60% * (1 - ${HALF})));
+  }
+  ${at(`${ROOT} ${MARK}, ${ROOT} [data-sx-mark]`)} {
+    display: none;
+  }
+  ${at(STAR)} {
+    inset-block: 0;
+    inset-inline: 0 auto;
+    inline-size: var(--sx-choice-size);
+  }
+  ${at(`${ROOT} ${ITEM}:nth-child(even of ${ITEM}) ${STAR}`)} {
+    inset-inline-start: calc(var(--sx-choice-size) * -0.5 * ${HALF});
+  }
+  ${at(SHAPE)} {
+    fill: color-mix(in oklab, var(--color-sx-ink) 16%, transparent);
+  }
+  ${at(UP_TO_CHOSEN(ROOT, SHAPE))} {
+    fill: ${v(ID, "color")};
+  }
+  @media (hover: hover) and (pointer: fine) {
+    ${at(`${ROOT} ${ITEM}:hover ${SHAPE}, ${ROOT} ${ITEM}:has(~ ${ITEM}:hover) ${SHAPE}`)} {
+      fill: ${v(ID, "color")};
+    }
+    ${at(`${ROOT} ${ITEM}:hover ~ ${ITEM} ${SHAPE}`)} {
+      fill: color-mix(in oklab, var(--color-sx-ink) 16%, transparent);
+    }
+  }`;
+const CSS = `  ${at(SHAPE)} {
+    transition: fill ${v(ID, "time")} ease-out;
+  }
+  ${at(STAR)} {
+    transition: scale ${v(ID, "time")} ${SPRING};
+    transition-delay: calc(var(--sx-choice-i, 0) * 35ms * ${v(ID, "wave")});
+  }
+  @media (hover: hover) and (pointer: fine) {
+    ${at(`${ROOT} ${ITEM}:hover ${STAR}, ${ROOT} ${ITEM}:has(~ ${ITEM}:hover) ${STAR}`)} {
+      scale: calc(1 + 0.18 * ${v(ID, "wave")});
+    }
+  }
+  ${at(inItem(ROOT, `${CHECKED}${CHANGED}`, STAR))} {
+    animation: sx-form-radioStars calc(${v(ID, "time")} * 1.6) ${SPRING};
+  }
+  ${at(SPARK)} {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: 0.2em;
+    block-size: 0.2em;
+    margin: -0.1em;
+    border-radius: 50%;
+    background: ${v(ID, "color")};
+    opacity: 0;
+  }
+${ANGLES.map((a, i) => `  ${at(`${SPARKS} > [data-sx-choice-part="s${i + 1}"]`)} { --sx-form-radioStars-a: ${a}deg; }`).join("\n")}
+  ${at(inItem(ROOT, `${CHECKED}${CHANGED}`, SPARK))} {
+    animation: sx-form-radioStars-burst calc(${v(ID, "time")} * 2) ease-out;
+  }
+  @keyframes sx-form-radioStars {
+    0% { scale: 0.7; }
+    60% { scale: 1.3; }
+    100% { scale: 1; }
+  }
+  @keyframes sx-form-radioStars-burst {
+    0% { translate: 0 0; opacity: 1; }
+    100% { translate: calc(cos(var(--sx-form-radioStars-a)) * 1.3em) calc(sin(var(--sx-form-radioStars-a)) * 1.3em); opacity: 0; }
+  }`;
+/** A star rating whose stars fill up to the choice; with half stars, a wave under the mouse, or a burst of sparks. */
+export function radioStars(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["radio"],
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "half")]: options.half ? 1 : 0,
+            [varName(ID, "wave")]: options.wave ? 1 : 0,
+            [varName(ID, "time")]: `${options.duration ?? 0.25}s`,
+        },
+        layers: [
+            {
+                slot: "box",
+                part: "star",
+                keep: true,
+                svg: {
+                    viewBox: "0 0 24 24",
+                    children: [{ tag: "path", part: "star", attrs: { d: "M12 2.4l2.95 6.1 6.7.95-4.85 4.7 1.15 6.65L12 17.65 6.05 20.8 7.2 14.15 2.35 9.45l6.7-.95z" } }],
+                },
+            },
+            ...(options.burst ? [{ slot: "halo", part: "sparks", children: ANGLES.map((_, i) => `s${i + 1}`) }] : []),
+        ],
+        claims: ["mark"],
+    });
+}

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

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

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

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RADIO_STARS_SCHEMA = defineSchema()({
+    id: "radioStars",
+    family: "form",
+    factory: "radioStars",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        half: { kind: "boolean", label: "Half stars (ten options)", default: false },
+        wave: { kind: "boolean", label: "Wave under the mouse", default: false },
+        burst: { kind: "boolean", label: "Burst of sparks", default: false },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.6, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface RadioTravelOptions {
+    /** The dot's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Seconds the dot takes to travel. Default `0.4`. */
+    readonly duration?: number;
+}
+/** One dot travels from the old choice to the new one. */
+export declare function radioTravel(options?: RadioTravelOptions): FormEffect;

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

@@ -0,0 +1,49 @@
+import { BOX, CHECKED, CHOICE, SPRING, at, choiceLayer, defineForm, inItem, radiosOf, v, varName } from "../kit.js";
+const ID = "radioTravel";
+const ROOT = radiosOf(ID);
+const DOT = choiceLayer(ID, "dot");
+// One dot for the whole group, travelling from the old choice to the new one instead of one dot fading and another
+// appearing. Anchor positioning sets it in the chosen circle's centre; Chromium and WebKit glide it there with a little
+// overshoot, Firefox moves it at once. Without anchor positioning each circle keeps its own dot. The dot is the state:
+// it holds under reduced motion.
+const STATE = `  ${at(DOT)} {
+    display: none;
+  }
+  @supports (anchor-name: --a) {
+    ${at(`${ROOT} [data-sx-mark="dot"]`)} {
+      opacity: 0;
+    }
+    ${at(inItem(ROOT, CHECKED, BOX))} {
+      anchor-name: ${v(ID, "anchor")};
+    }
+    ${at(`${ROOT}:has(${CHOICE}:checked) ${DOT}`)} {
+      display: block;
+      position-anchor: ${v(ID, "anchor")};
+      inset: auto;
+      inset-block-start: anchor(center);
+      inset-inline-start: anchor(center);
+      inline-size: 0.625em;
+      block-size: 0.625em;
+      margin-block-start: -0.3125em;
+      margin-inline-start: -0.3125em;
+      border-radius: 50%;
+      background: ${v(ID, "color")};
+      z-index: 1;
+    }
+  }`;
+const CSS = `  ${at(DOT)} {
+    transition: inset-block-start ${v(ID, "time")} ${SPRING}, inset-inline-start ${v(ID, "time")} ${SPRING};
+  }`;
+/** One dot travels from the old choice to the new one. */
+export function radioTravel(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["radio"],
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            [varName(ID, "anchor")]: "--{uid}-dot",
+            [varName(ID, "time")]: `${options.duration ?? 0.4}s`,
+        },
+        layers: [{ slot: "track", part: "dot", keep: true }],
+    });
+}

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

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

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

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

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface RadioUnderlineOptions {
+    /** The line's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Seconds it takes to follow. Default `0.3`. */
+    readonly duration?: number;
+}
+/** Tabs: the options in a row, an underline following the chosen one from tab to tab. */
+export declare function radioUnderline(options?: RadioUnderlineOptions): FormEffect;

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

@@ -0,0 +1,61 @@
+import { CHECKED, CHOICE, OPTIONS, ROW, at, choiceLayer, defineForm, inItem, radiosOf, v, varName } from "../kit.js";
+import { bareOptions } from "./shape.js";
+const ID = "radioUnderline";
+const ROOT = radiosOf(ID);
+const LINE = choiceLayer(ID, "line");
+// Tabs: options in a row over a hairline, one line under the chosen one, as wide as it. Anchor positioning ties the
+// line to the chosen option (its anchor name moves with `:checked`), so options of any width work; Chromium and WebKit
+// glide it across, Firefox moves it at once. A browser without anchor positioning underlines the chosen option itself.
+// The line is the state: it holds under reduced motion.
+const STATE = `${bareOptions(ROOT)}
+  ${at(`${ROOT} > ${OPTIONS}`)} {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0 1.25rem;
+    border-block-end: 1px solid var(--color-sx-border, currentColor);
+  }
+  ${at(`${ROOT} ${ROW}`)} {
+    padding: 0.5rem 0.125rem;
+  }
+  ${at(LINE)} {
+    display: none;
+  }
+  @supports (anchor-name: --a) {
+    ${at(inItem(ROOT, CHECKED, ROW))} {
+      anchor-name: ${v(ID, "anchor")};
+    }
+    ${at(`${ROOT}:has(${CHOICE}:checked) ${LINE}`)} {
+      display: block;
+      position-anchor: ${v(ID, "anchor")};
+      inset: auto;
+      inset-inline-start: anchor(start);
+      inset-inline-end: anchor(end);
+      inset-block-start: anchor(end);
+      block-size: 2px;
+      margin-block-start: -1px;
+      border-radius: 1px;
+      background: ${v(ID, "color")};
+    }
+  }
+  @supports not (anchor-name: --a) {
+    ${at(inItem(ROOT, CHECKED, ROW))} {
+      box-shadow: inset 0 -2px 0 ${v(ID, "color")};
+    }
+  }`;
+const CSS = `  ${at(LINE)} {
+    transition: inset-inline-start ${v(ID, "time")} var(--ease-sx-out, ease-out), inset-inline-end ${v(ID, "time")} var(--ease-sx-out, ease-out);
+  }`;
+/** Tabs: the options in a row, an underline following the chosen one from tab to tab. */
+export function radioUnderline(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["radio"],
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            // one anchor name per group: `{uid}` becomes the group's own id
+            [varName(ID, "anchor")]: "--{uid}-tab",
+            [varName(ID, "time")]: `${options.duration ?? 0.3}s`,
+        },
+        layers: [{ slot: "track", part: "line", keep: true }],
+    });
+}

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

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

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

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