@sharedex/ui 0.9.0 → 0.10.0

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

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface ListHighlightOptions {
+    /** The highlight's colour. Default the primary colour, faint. */
+    readonly color?: string;
+    /** Seconds it takes to slide to the next option. Default `0.15`. */
+    readonly duration?: number;
+}
+/** One highlight slides from option to option as you move through the list. A Combobox's only. */
+export declare function listHighlight(options?: ListHighlightOptions): FormEffect;

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

@@ -0,0 +1,42 @@
+import { EASE, OPTION, POPUP, at, choiceLayer, defineForm, pickerOf, v, varName } from "../kit.js";
+const ID = "listHighlight";
+const BAR = choiceLayer(ID, "bar");
+// One highlight slides from option to option as the arrow keys or the mouse move through the list, in place of each
+// option lighting on its own. Anchor positioning ties it to the active option (its anchor name moves with
+// `data-active`), so options of any height work; Firefox moves it at once. All of it is motion: under reduced motion,
+// and without anchor positioning, the options light on their own again (`--sx-option-active` is the look's hook).
+const CSS = `  @supports (anchor-name: --a) {
+    ${at(pickerOf(ID))} {
+      --sx-option-active: transparent;
+    }
+    ${at(`${pickerOf(ID)} ${OPTION}[data-active]`)} {
+      anchor-name: ${v(ID, "anchor")};
+    }
+    ${at(`${pickerOf(ID)} ${BAR}`)} {
+      position-anchor: ${v(ID, "anchor")};
+      inset-block-start: anchor(start);
+      inset-block-end: anchor(end);
+      inset-inline-start: anchor(start);
+      inset-inline-end: anchor(end);
+      border-radius: var(--sx-option-radius, 0.375rem);
+      background: ${v(ID, "color")};
+      opacity: 0;
+      transition: inset-block-start ${v(ID, "time")} ${EASE}, inset-block-end ${v(ID, "time")} ${EASE}, opacity ${v(ID, "time")} ${EASE};
+    }
+    ${at(`${pickerOf(ID)} ${POPUP}:has(${OPTION}[data-active]) ${BAR}`)} {
+      opacity: 1;
+    }
+  }`;
+/** One highlight slides from option to option as you move through the list. A Combobox's only. */
+export function listHighlight(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["picker"],
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-primary) 14%, transparent)",
+            // one anchor name per combobox: `{uid}` becomes its own id
+            [varName(ID, "anchor")]: "--{uid}-active",
+            [varName(ID, "time")]: `${options.duration ?? 0.15}s`,
+        },
+        layers: [{ slot: "list", part: "bar" }],
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const LIST_HIGHLIGHT_SCHEMA = defineSchema()({
+    id: "listHighlight",
+    family: "form",
+    factory: "listHighlight",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-primary) 14%, transparent)" },
+        duration: { kind: "number", label: "Duration", min: 0.08, max: 0.4, step: 0.02, unit: "s", default: 0.15 },
+    },
+});

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

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface ListMatchOptions {
+    /** The marked text's background. Default the accent colour, soft. */
+    readonly color?: string;
+}
+/** The typed text is marked inside each option as you filter. A Combobox's only. */
+export declare function listMatch(options?: ListMatchOptions): FormEffect;

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

@@ -0,0 +1,21 @@
+import { at, defineForm, pickerOf, v, varName } from "../kit.js";
+const ID = "listMatch";
+// The Combobox marks where the typed text appears in each option's words with the Custom Highlight API (one highlight,
+// `sx-list-match`, shared by the page): no extra elements, so a screen reader still reads each option as one piece of
+// text. This paints the marks. It shows a state, not a motion: it holds under reduced motion. A browser without the
+// API marks nothing.
+const STATE = `  ${at(`${pickerOf(ID)} [data-sx-option-text]`)}::highlight(sx-list-match) {
+    background-color: ${v(ID, "color")};
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 0.2em;
+  }`;
+/** The typed text is marked inside each option as you filter. A Combobox's only. */
+export function listMatch(options = {}) {
+    return defineForm(ID, "", {
+        fits: ["picker"],
+        state: STATE,
+        needs: { match: true },
+        vars: { [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-accent, var(--color-sx-primary)) 30%, transparent)" },
+    });
+}

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

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

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

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const LIST_MATCH_SCHEMA = defineSchema()({
+    id: "listMatch",
+    family: "form",
+    factory: "listMatch",
+    fields: {
+        color: { kind: "color", label: "Mark colour", default: "color-mix(in oklab, var(--color-sx-accent, var(--color-sx-primary)) 30%, transparent)" },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface PickerArrowOptions {
+    /** How far the arrow turns while the list is open, in degrees. Default `180` (it points up). */
+    readonly turn?: number;
+    /** Seconds the turn takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The arrow turns over while the list is open, and back when it closes. */
+export declare function pickerArrow(options?: PickerArrowOptions): FormEffect;

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

@@ -0,0 +1,17 @@
+import { ARROW, OPEN, SPRING, at, defineForm, pickerOf, v, varName } from "../kit.js";
+const ID = "pickerArrow";
+// The turn shows the state (open or closed), so it holds under reduced motion; only the motion goes away there.
+const STATE = `  ${at(`${pickerOf(ID)}${OPEN} ${ARROW} > svg`)} {
+    rotate: ${v(ID, "turn")};
+  }`;
+const CSS = `  ${at(`${pickerOf(ID)} ${ARROW} > svg`)} {
+    transition: rotate ${v(ID, "time")} ${SPRING};
+  }`;
+/** The arrow turns over while the list is open, and back when it closes. */
+export function pickerArrow(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["picker"],
+        state: STATE,
+        vars: { [varName(ID, "turn")]: `${options.turn ?? 180}deg`, [varName(ID, "time")]: `${options.duration ?? 0.25}s` },
+    });
+}

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

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

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;