@sharedex/ui 0.0.0-stage → 0.10.0

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 },
+    },
+});

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

@@ -0,0 +1,13 @@
+/**
+ * Options with no circle: the box goes and its column closes, the words take the row. The focus ring moves to the
+ * option itself, and the words read quiet until chosen. The real radio stays in the label, so a click anywhere on the
+ * option still chooses it.
+ */
+export declare function bareOptions(root: string): string;
+/**
+ * The words leave the screen but stay for screen readers (a star's "4 stars", a face's "Happy"): the option's name is
+ * still its words. Under forced colours they come back beside the browser's own radio.
+ */
+export declare function quietWords(root: string): string;
+/** The option chosen, and every one before it in the group (a rating fills up to the choice). */
+export declare const UP_TO_CHOSEN: (root: string, target: string) => string;

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

@@ -0,0 +1,61 @@
+// What several radio group effects share: options with no drawn circle (a segment, a tab, a number cell), and words
+// only screen readers read (a star, a face). Under forced colours both give the browser's own radio and words back.
+import { BOX, CHECKED, CHOICE, ITEM, KEYED, ROW, TEXT, at, inItem } from "../kit.js";
+/**
+ * Options with no circle: the box goes and its column closes, the words take the row. The focus ring moves to the
+ * option itself, and the words read quiet until chosen. The real radio stays in the label, so a click anywhere on the
+ * option still chooses it.
+ */
+export function bareOptions(root) {
+    return `  ${at(`${root} ${ITEM}`)} {
+    --sx-choice-size: 0px;
+    --sx-choice-gap: 0px;
+    --sx-choice-text: var(--color-sx-muted);
+  }
+  ${at(inItem(root, CHECKED))} {
+    --sx-choice-text: var(--color-sx-ink);
+  }
+  ${at(`${root} ${BOX}`)} {
+    display: none;
+  }
+  ${at(inItem(root, KEYED, ROW))} {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+  @media (forced-colors: active) {
+    ${at(`${root} ${ITEM}`)} {
+      --sx-choice-size: 1.25em;
+      --sx-choice-gap: 0.5rem;
+    }
+  }`;
+}
+/**
+ * The words leave the screen but stay for screen readers (a star's "4 stars", a face's "Happy"): the option's name is
+ * still its words. Under forced colours they come back beside the browser's own radio.
+ */
+export function quietWords(root) {
+    return `  ${at(`${root} ${TEXT}`)} {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  ${at(`${root} ${ITEM}`)} {
+    --sx-choice-gap: 0px;
+  }
+  @media (forced-colors: active) {
+    ${at(`${root} ${TEXT}`)} {
+      position: static;
+      inline-size: auto;
+      block-size: auto;
+      clip-path: none;
+    }
+    ${at(`${root} ${ITEM}`)} {
+      --sx-choice-gap: 0.5rem;
+    }
+  }`;
+}
+/** The option chosen, and every one before it in the group (a rating fills up to the choice). */
+export const UP_TO_CHOSEN = (root, target) => `${root} ${ITEM}${CHECKED} ${target}, ${root} ${ITEM}:has(~ ${ITEM} ${CHOICE}:checked) ${target}`;

package/dist/forms/effects/range/rangeBubble.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface RangeBubbleOptions {
+    /** When the bubble shows: `"drag"` while a thumb is dragged or has the keyboard's focus, or `"always"`. Default `"drag"`. */
+    readonly show?: "drag" | "always";
+    /** Seconds it takes to pop up. Default `0.2`. */
+    readonly duration?: number;
+}
+/** A bubble above the thumb shows the value while you drag (or always). */
+export declare function rangeBubble(options?: RangeBubbleOptions): FormEffect;

package/dist/forms/effects/range/rangeBubble.js

@@ -0,0 +1,54 @@
+import { SPRING, at, defineForm, draggedKnob, keyedKnob, rangeOf, v, varName } from "../kit.js";
+const ID = "rangeBubble";
+const ROOT = rangeOf(ID);
+const SAYS = "[data-sx-range-says]";
+// Each thumb carries its value's words (`[data-sx-range-says]`, hidden by the base sheet); this shows them in a bubble
+// above the thumb (beside it, upright), the value as the Range formats it. Whether it shows is the state; the pop is the
+// motion.
+const STATE = `  ${at(`${ROOT} ${SAYS}`)} {
+    display: block;
+    position: absolute;
+    inset-block-end: calc(100% + 0.5rem);
+    inset-inline-start: 50%;
+    translate: calc(-50% * var(--sx-form-dir)) 0;
+    padding: 0.125rem 0.5rem;
+    border-radius: 0.375rem;
+    background: var(--color-sx-ink, CanvasText);
+    color: var(--color-sx-secondary, Canvas);
+    font-size: 0.75rem;
+    line-height: 1.5;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+    transform-origin: 50% 100%;
+    opacity: ${v(ID, "rest")};
+  }
+  ${at(`${ROOT}[data-sx-vertical] ${SAYS}`)} {
+    inset-block-end: auto;
+    inset-block-start: 50%;
+    inset-inline-start: calc(100% + 0.5rem);
+    translate: 0 -50%;
+    transform-origin: 0 50%;
+  }
+  ${at(`${draggedKnob(ROOT, SAYS)}, ${keyedKnob(ROOT, SAYS)}`)} {
+    opacity: 1;
+  }`;
+const CSS = `  ${at(`${ROOT} ${SAYS}`)} {
+    scale: ${v(ID, "from")};
+    transition: opacity ${v(ID, "time")} var(--ease-sx-out, ease-out), scale ${v(ID, "time")} ${SPRING};
+  }
+  ${at(`${draggedKnob(ROOT, SAYS)}, ${keyedKnob(ROOT, SAYS)}`)} {
+    scale: 1;
+  }`;
+/** A bubble above the thumb shows the value while you drag (or always). */
+export function rangeBubble(options = {}) {
+    const always = options.show === "always";
+    return defineForm(ID, CSS, {
+        fits: ["range"],
+        state: STATE,
+        vars: {
+            [varName(ID, "rest")]: always ? 1 : 0,
+            [varName(ID, "from")]: always ? 1 : 0.6,
+            [varName(ID, "time")]: `${options.duration ?? 0.2}s`,
+        },
+    });
+}

package/dist/forms/effects/range/rangeBubble.schema.d.ts

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

package/dist/forms/effects/range/rangeBubble.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RANGE_BUBBLE_SCHEMA = defineSchema()({
+    id: "rangeBubble",
+    family: "form",
+    factory: "rangeBubble",
+    fields: {
+        show: { kind: "choice", label: "Shows", values: ["drag", "always"], labels: { drag: "While dragged or focused", always: "Always" }, default: "drag" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.4, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/forms/effects/range/rangeElastic.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface RangeElasticOptions {
+    /** How far the rail may stretch past its end, as a share of its length. Default `0.12`. */
+    readonly stretch?: number;
+    /** How springy the way back is: 0 settles at once, 1 wobbles. Default `0.5`. */
+    readonly bounce?: number;
+}
+/** Pull past the end and the rail stretches after the finger, then springs back. Runs code: the page needs "use client". */
+export declare function rangeElastic(options?: RangeElasticOptions): FormEffect;