@sharedex/ui 0.9.0 → 0.10.0

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;

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

@@ -0,0 +1,101 @@
+import { stillMotion } from "../../../buttons/runtime/press.js";
+import { KNOB, RAIL, at, defineForm, rangeOf } from "../kit.js";
+const ID = "rangeElastic";
+const ROOT = rangeOf(ID);
+// Pull a thumb past the end and the rail stretches after the finger, thinning a little as it goes, with the thumb on
+// its end; let go and it springs back. The program writes `--sx-range-stretch` (the rail's scale) and `--sx-range-origin`
+// (the end that stays put) on the rail, and `--sx-range-pull` (px) on the thumb, which the base sheet adds to its place.
+const CSS = `  ${at(`${ROOT} ${RAIL}`)} {
+    scale: var(--sx-range-stretch, 1) calc(2 - var(--sx-range-stretch, 1));
+    transform-origin: var(--sx-range-origin, 50%) 50%;
+  }
+  ${at(`${ROOT}[data-sx-vertical] ${RAIL}`)} {
+    scale: calc(2 - var(--sx-range-stretch, 1)) var(--sx-range-stretch, 1);
+    transform-origin: 50% var(--sx-range-origin, 50%);
+  }`;
+/** The program: the stretch follows the finger past the end, then a small spring of our own brings it back. */
+function elastic(stretch, bounce) {
+    return {
+        signature: JSON.stringify({ stretch, bounce }),
+        attach: (root) => {
+            const box = root.querySelector("[data-sx-range-box]");
+            const rail = root.querySelector(RAIL);
+            if (!box || !rail)
+                return () => { };
+            let pull = 0;
+            let speed = 0;
+            let frame = 0;
+            let knob = null;
+            const upright = () => root.hasAttribute("data-sx-vertical");
+            const length = () => (upright() ? rail.offsetHeight : rail.offsetWidth) || 1;
+            const write = () => {
+                const s = 1 + Math.abs(pull) / length();
+                const rtl = getComputedStyle(root).direction === "rtl";
+                // the end away from the pull stays put
+                const towardStart = pull < 0;
+                const origin = upright() ? (towardStart ? "0%" : "100%") : towardStart !== rtl ? "100%" : "0%";
+                rail.style.setProperty("--sx-range-stretch", String(s));
+                rail.style.setProperty("--sx-range-origin", origin);
+                knob?.style.setProperty("--sx-range-pull", `${pull}px`);
+            };
+            const clear = () => {
+                rail.style.removeProperty("--sx-range-stretch");
+                rail.style.removeProperty("--sx-range-origin");
+                knob?.style.removeProperty("--sx-range-pull");
+            };
+            const move = (e) => {
+                const which = root.getAttribute("data-sx-dragging");
+                if (!which || stillMotion())
+                    return;
+                knob = root.querySelector(`${KNOB}[data-sx-thumb="${which}"]`);
+                const place = Number(knob?.style.getPropertyValue("--sx-at") || 0);
+                const r = box.getBoundingClientRect();
+                const rtl = getComputedStyle(root).direction === "rtl";
+                const along = upright() ? r.bottom - e.clientY : rtl ? r.right - e.clientX : e.clientX - r.left;
+                const end = upright() ? r.height : r.width;
+                // only past the end the thumb already sits on
+                const over = along > end && place >= 0.999 ? along - end : along < 0 && place <= 0.001 ? along : 0;
+                const most = stretch * length();
+                cancelAnimationFrame(frame);
+                pull = Math.sign(over) * most * (1 - Math.exp(-Math.abs(over) / most));
+                speed = 0;
+                write();
+            };
+            const release = () => {
+                if (pull === 0)
+                    return;
+                const k = 420;
+                const damping = 2 * Math.sqrt(k) * (1 - 0.7 * Math.min(1, Math.max(0, bounce)));
+                let last = performance.now();
+                const step = (now) => {
+                    const dt = Math.min(0.032, (now - last) / 1000);
+                    last = now;
+                    speed += (-k * pull - damping * speed) * dt;
+                    pull += speed * dt;
+                    if (Math.abs(pull) < 0.2 && Math.abs(speed) < 2) {
+                        pull = 0;
+                        clear();
+                        return;
+                    }
+                    write();
+                    frame = requestAnimationFrame(step);
+                };
+                frame = requestAnimationFrame(step);
+            };
+            addEventListener("pointermove", move);
+            addEventListener("pointerup", release);
+            addEventListener("pointercancel", release);
+            return () => {
+                cancelAnimationFrame(frame);
+                removeEventListener("pointermove", move);
+                removeEventListener("pointerup", release);
+                removeEventListener("pointercancel", release);
+                clear();
+            };
+        },
+    };
+}
+/** Pull past the end and the rail stretches after the finger, then springs back. Runs code: the page needs "use client". */
+export function rangeElastic(options = {}) {
+    return defineForm(ID, CSS, { fits: ["range"], program: elastic(options.stretch ?? 0.12, options.bounce ?? 0.5) });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RANGE_ELASTIC_SCHEMA = defineSchema()({
+    id: "rangeElastic",
+    family: "form",
+    factory: "rangeElastic",
+    fields: {
+        stretch: { kind: "number", label: "Stretch", min: 0.04, max: 0.3, step: 0.01, default: 0.12, help: "How far past its end the rail may stretch, as a share of its length." },
+        bounce: { kind: "number", label: "Bounce", min: 0, max: 1, step: 0.1, default: 0.5 },
+    },
+});

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

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface RangeFaceOptions {
+    /** The face's size, rem: the thumb grows to it. Default `2`. */
+    readonly size?: number;
+    /** The face's colour at the low end. Default `var(--color-sx-danger)`. */
+    readonly low?: string;
+    /** Its colour at the high end. Default `var(--color-sx-success)`. */
+    readonly high?: string;
+}
+/** The thumb is a face that frowns at the low end and smiles at the high end. */
+export declare function rangeFace(options?: RangeFaceOptions): FormEffect;

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

@@ -0,0 +1,68 @@
+import { KNOB, at, choiceLayer, defineForm, rangeOf, v, varName } from "../kit.js";
+const ID = "rangeFace";
+const ROOT = rangeOf(ID);
+const FACE = choiceLayer(ID, "face");
+const PART = (part) => `${FACE} [data-sx-choice-svg="${part}"]`;
+// The thumb is a face, our own drawing, that frowns at the low end and smiles at the high end. The mouth is one curve
+// scaled upside down and back by the thumb's place (`--sx-at`), never quite flat to nothing (a scale of 0 draws nothing);
+// its line keeps its width at any scale. The colour mixes from `low` to `high` the same way. It shows the value: it
+// holds under reduced motion.
+const STATE = `  ${at(ROOT)} {
+    --sx-range-thumb: ${v(ID, "size")};
+    --sx-range-knob: transparent;
+  }
+  ${at(`${ROOT} ${KNOB}`)} {
+    box-shadow: none;
+  }
+  ${at(`${ROOT} ${FACE}`)} {
+    inset: 0;
+  }
+  ${at(`${ROOT} ${FACE} > svg`)} {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  ${at(`${ROOT} ${PART("head")}`)} {
+    fill: color-mix(in oklab, ${v(ID, "high")} calc(var(--sx-at) * 100%), ${v(ID, "low")});
+  }
+  ${at(`${ROOT} ${PART("eyes")}`)} {
+    fill: var(--color-sx-ink, currentColor);
+  }
+  ${at(`${ROOT} ${PART("mouth")}`)} {
+    fill: none;
+    stroke: var(--color-sx-ink, currentColor);
+    stroke-width: 2;
+    stroke-linecap: round;
+    vector-effect: non-scaling-stroke;
+    transform-box: fill-box;
+    transform-origin: center;
+    scale: 1 calc(var(--sx-at) * 2 - 0.999);
+  }`;
+/** The thumb is a face that frowns at the low end and smiles at the high end. */
+export function rangeFace(options = {}) {
+    return defineForm(ID, "", {
+        fits: ["range"],
+        state: STATE,
+        vars: {
+            [varName(ID, "size")]: `${options.size ?? 2}rem`,
+            [varName(ID, "low")]: options.low ?? "var(--color-sx-danger)",
+            [varName(ID, "high")]: options.high ?? "var(--color-sx-success)",
+        },
+        layers: [
+            {
+                slot: "thumb",
+                part: "face",
+                keep: true,
+                svg: {
+                    viewBox: "0 0 24 24",
+                    children: [
+                        { tag: "circle", part: "head", attrs: { cx: 12, cy: 12, r: 11 } },
+                        { tag: "path", part: "eyes", attrs: { d: "M8.5 10a1.4 1.4 0 1 0 0-.01zM15.5 10a1.4 1.4 0 1 0 0-.01z" } },
+                        { tag: "path", part: "mouth", attrs: { d: "M8 15q4 3.5 8 0" } },
+                    ],
+                },
+            },
+        ],
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RANGE_FACE_SCHEMA = defineSchema()({
+    id: "rangeFace",
+    family: "form",
+    factory: "rangeFace",
+    fields: {
+        size: { kind: "number", label: "Size", min: 1.5, max: 3, step: 0.25, unit: "rem", default: 2 },
+        low: { kind: "color", label: "Low colour", default: "var(--color-sx-danger)" },
+        high: { kind: "color", label: "High colour", default: "var(--color-sx-success)" },
+    },
+});

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

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface RangeFillOptions {
+    /** The filled part's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+}
+/** The rail fills up to the thumb, or between the two thumbs. */
+export declare function rangeFill(options?: RangeFillOptions): FormEffect;

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

@@ -0,0 +1,29 @@
+import { RAIL, at, choiceLayer, defineForm, rangeOf, v, varName } from "../kit.js";
+const ID = "rangeFill";
+const ROOT = rangeOf(ID);
+const FILL = `${RAIL} > ${choiceLayer(ID, "fill")}`;
+// The rail fills from its start to the thumb (between the two thumbs with two). The fill is the whole rail, scaled to
+// the filled share from the start side and moved to the low thumb (`--sx-range-from` / `-to`): a transform, so it glides
+// with the thumbs (the base sheet's transition). It shows the value: it holds under reduced motion.
+const STATE = `  ${at(`${ROOT} ${FILL}`)} {
+    inset: 0;
+    border-radius: inherit;
+    background: ${v(ID, "color")};
+    transform-origin: calc(50% - 50% * var(--sx-form-dir)) 50%;
+    translate: calc(var(--sx-range-from) * 100% * var(--sx-form-dir)) 0;
+    scale: calc(var(--sx-range-to) - var(--sx-range-from)) 1;
+  }
+  ${at(`${ROOT}[data-sx-vertical] ${FILL}`)} {
+    transform-origin: 50% 100%;
+    translate: 0 calc(var(--sx-range-from) * -100%);
+    scale: 1 calc(var(--sx-range-to) - var(--sx-range-from));
+  }`;
+/** The rail fills up to the thumb, or between the two thumbs. */
+export function rangeFill(options = {}) {
+    return defineForm(ID, "", {
+        fits: ["range"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)" },
+        layers: [{ slot: "track", part: "fill", keep: true }],
+    });
+}

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

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

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

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RANGE_FILL_SCHEMA = defineSchema()({
+    id: "rangeFill",
+    family: "form",
+    factory: "rangeFill",
+    fields: {
+        color: { kind: "color", label: "Fill colour", default: "var(--color-sx-primary)" },
+    },
+});

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

@@ -0,0 +1,14 @@
+import type { SvgElement } from "../../../backgrounds/types.js";
+import type { FormEffect } from "../../types.js";
+export interface RangeHistogramOptions {
+    /** One bar per value, left to right (the lowest values first): how many items each stretch holds. Default a sample bell. */
+    readonly values?: readonly number[];
+    /** The bars' height, rem. Default `2.5`. */
+    readonly height?: number;
+    /** The colour of the bars inside the chosen stretch. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+}
+/** The bars as SVG rectangles in a box `values.length` wide and 100 tall, tallest at the top. */
+export declare function histogramBars(values: readonly number[]): SvgElement[];
+/** Bars above the rail show how the values spread; the ones inside the chosen stretch light up. */
+export declare function rangeHistogram(options?: RangeHistogramOptions): FormEffect;

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

@@ -0,0 +1,65 @@
+import { RAIL, at, choiceLayer, defineForm, rangeOf, v, varName } from "../kit.js";
+const ID = "rangeHistogram";
+const ROOT = rangeOf(ID);
+const BARS = `${RAIL} > ${choiceLayer(ID, "bars")}`;
+const LIT = `${RAIL} > ${choiceLayer(ID, "lit")}`;
+/** A sample to show the effect before real data arrives: a gentle bell with a second hump. */
+const SAMPLE = [2, 3, 5, 8, 12, 17, 22, 26, 28, 27, 23, 19, 15, 13, 14, 16, 15, 12, 9, 6, 4, 3, 2, 1];
+/** The bars as SVG rectangles in a box `values.length` wide and 100 tall, tallest at the top. */
+export function histogramBars(values) {
+    const top = Math.max(1, ...values.map((n) => (Number.isFinite(n) && n > 0 ? n : 0)));
+    return values.map((n, i) => {
+        const h = Math.max(0, Math.min(100, ((Number.isFinite(n) && n > 0 ? n : 0) / top) * 100));
+        return { tag: "rect", attrs: { x: i + 0.12, y: 100 - h, width: 0.76, height: h } };
+    });
+}
+// The spread of what the slider filters (prices, sizes), as bars above the rail: two copies, a quiet one, and a lit one
+// clipped to the chosen stretch (`--sx-range-from` / `-to`, mirrored right to left), which glides with the thumbs. The
+// bars show data: they hold under reduced motion. Across only: an upright Range hides them.
+const STATE = `  ${at(`${ROOT} [data-sx-range-box]`)} {
+    margin-block-start: calc(${v(ID, "height")} + 0.5rem);
+  }
+  ${at(`${ROOT} ${BARS}, ${ROOT} ${LIT}`)} {
+    inset-inline: 0;
+    inset-block-end: calc(100% + (max(1.5rem, var(--sx-range-thumb)) - var(--sx-range-h)) / 2 + 0.25rem);
+    block-size: ${v(ID, "height")};
+  }
+  ${at(`${ROOT} ${BARS} > svg, ${ROOT} ${LIT} > svg`)} {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    fill: currentColor;
+  }
+  ${at(`${ROOT}:dir(rtl) ${BARS} > svg, ${ROOT}:dir(rtl) ${LIT} > svg`)} {
+    scale: -1 1;
+  }
+  ${at(`${ROOT} ${BARS}`)} {
+    color: color-mix(in oklab, var(--color-sx-muted, currentColor) 35%, transparent);
+  }
+  ${at(`${ROOT} ${LIT}`)} {
+    color: ${v(ID, "color")};
+    clip-path: inset(0 calc((1 - var(--sx-range-to)) * 100%) 0 calc(var(--sx-range-from) * 100%));
+  }
+  ${at(`${ROOT}:dir(rtl) ${LIT}`)} {
+    clip-path: inset(0 calc(var(--sx-range-from) * 100%) 0 calc((1 - var(--sx-range-to)) * 100%));
+  }
+  ${at(`${ROOT}[data-sx-vertical] ${BARS}, ${ROOT}[data-sx-vertical] ${LIT}`)} {
+    display: none;
+  }
+  ${at(`${ROOT}[data-sx-vertical] [data-sx-range-box]`)} {
+    margin-block-start: 0;
+  }`;
+/** Bars above the rail show how the values spread; the ones inside the chosen stretch light up. */
+export function rangeHistogram(options = {}) {
+    const bars = histogramBars(options.values ?? SAMPLE);
+    const svg = { viewBox: `0 0 ${Math.max(1, bars.length)} 100`, preserveAspectRatio: "none", children: bars };
+    return defineForm(ID, "", {
+        fits: ["range"],
+        state: STATE,
+        vars: { [varName(ID, "height")]: `${options.height ?? 2.5}rem`, [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)" },
+        layers: [
+            { slot: "track", part: "bars", keep: true, svg },
+            { slot: "track", part: "lit", keep: true, svg },
+        ],
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RANGE_HISTOGRAM_SCHEMA = defineSchema()({
+    id: "rangeHistogram",
+    family: "form",
+    factory: "rangeHistogram",
+    fields: {
+        height: { kind: "number", label: "Height", min: 1.5, max: 5, step: 0.25, unit: "rem", default: 2.5 },
+        color: { kind: "color", label: "Lit colour", default: "var(--color-sx-primary)" },
+    },
+    code: ["values"],
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface RangeThumbOptions {
+    /** How big the thumb grows while dragged. Default `1.3`. */
+    readonly scale?: number;
+    /** The halo's colour around a dragged thumb. Default the primary colour, faint. */
+    readonly color?: string;
+}
+/** The thumb grows under the finger, with a soft halo round it. */
+export declare function rangeThumb(options?: RangeThumbOptions): FormEffect;

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

@@ -0,0 +1,39 @@
+import { KNOB, at, choiceLayer, defineForm, draggedKnob, rangeOf, v, varName } from "../kit.js";
+const ID = "rangeThumb";
+const ROOT = rangeOf(ID);
+const HALO = choiceLayer(ID, "halo");
+// The thumb grows under the finger (a third of the way on a mouse's hover) and a soft halo opens round it, so you see
+// what you hold. The base sheet owns the transition (`--sx-range-grow`); this only says how big. All motion: under
+// reduced motion the thumb stays its size, and its place still shows the value.
+const CSS = `  ${at(`${ROOT} ${HALO}`)} {
+    inset: -0.5rem;
+    z-index: -1;
+    border-radius: 50%;
+    background: ${v(ID, "color")};
+    scale: 0.5;
+    opacity: 0;
+    transition: scale 0.2s var(--ease-sx-out, ease-out), opacity 0.2s var(--ease-sx-out, ease-out);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    ${at(`${ROOT}:not(:has(:disabled)) [data-sx-range-box]:hover ${KNOB}`)} {
+      scale: calc(1 + (${v(ID, "scale")} - 1) / 3);
+    }
+  }
+  ${at(draggedKnob(ROOT))} {
+    scale: ${v(ID, "scale")};
+  }
+  ${at(draggedKnob(ROOT, HALO))} {
+    scale: 1;
+    opacity: 1;
+  }`;
+/** The thumb grows under the finger, with a soft halo round it. */
+export function rangeThumb(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["range"],
+        vars: {
+            [varName(ID, "scale")]: options.scale ?? 1.3,
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-primary) 20%, transparent)",
+        },
+        layers: [{ slot: "thumb", part: "halo" }],
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RANGE_THUMB_SCHEMA = defineSchema()({
+    id: "rangeThumb",
+    family: "form",
+    factory: "rangeThumb",
+    fields: {
+        scale: { kind: "number", label: "Grow to", min: 1, max: 1.8, step: 0.05, unit: "×", default: 1.3 },
+        color: { kind: "color", label: "Halo colour", default: "color-mix(in oklab, var(--color-sx-primary) 20%, transparent)" },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface RangeTicksOptions {
+    /** How many gaps between ticks. Default: every step up to 20 steps, else the most up to 20 that land on steps. */
+    readonly count?: number;
+    /** The ticks' colour. Default `var(--color-sx-muted)`. */
+    readonly color?: string;
+}
+/** Ticks under the rail, one per step; the thumb springs from tick to tick. */
+export declare function rangeTicks(options?: RangeTicksOptions): FormEffect;

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

@@ -0,0 +1,44 @@
+import { RAIL, at, choiceLayer, defineForm, rangeOf, v, varName } from "../kit.js";
+const ID = "rangeTicks";
+const ROOT = rangeOf(ID);
+const TICKS = `${RAIL} > ${choiceLayer(ID, "ticks")}`;
+const COUNT = `var(${varName(ID, "count")}, var(--sx-range-ticks, 10))`;
+// A row of ticks under the rail, one per step (the Range writes the count it suits, `--sx-range-ticks`), drawn as one
+// repeating gradient, so a hundred ticks cost one layer. The ticks are the state; the motion is the thumb springing
+// from tick to tick while dragged (the base sheet's glide, switched on during a drag).
+const STATE = `  ${at(`${ROOT} [data-sx-range-box]`)} {
+    margin-block-end: 0.75rem;
+  }
+  ${at(`${ROOT} ${TICKS}`)} {
+    inset-inline: 0 -1px;
+    inset-block-start: calc(100% + 0.375rem);
+    block-size: 0.375rem;
+    color: ${v(ID, "color")};
+    background: repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px calc((100% - 1px) / ${COUNT}));
+  }
+  ${at(`${ROOT}[data-sx-vertical] [data-sx-range-box]`)} {
+    margin-block-end: 0;
+    margin-inline-end: 0.75rem;
+  }
+  ${at(`${ROOT}[data-sx-vertical] ${TICKS}`)} {
+    inset-inline: calc(100% + 0.375rem) auto;
+    inset-block: -1px 0;
+    inline-size: 0.375rem;
+    block-size: auto;
+    background: repeating-linear-gradient(to top, currentColor 0 1px, transparent 1px calc((100% - 1px) / ${COUNT}));
+  }`;
+const CSS = `  ${at(ROOT)} {
+    --sx-range-drag-glide: 0.12s;
+  }`;
+/** Ticks under the rail, one per step; the thumb springs from tick to tick. */
+export function rangeTicks(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["range"],
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-muted)",
+            ...(options.count === undefined ? {} : { [varName(ID, "count")]: Math.max(1, Math.round(options.count)) }),
+        },
+        layers: [{ slot: "track", part: "ticks", keep: true }],
+    });
+}