@sharedex/ui 0.9.0 → 0.10.0

package/dist/forms/effects/file/filePage.schema.js

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

package/dist/forms/effects/file/filePreview.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface FilePreviewOptions {
+    /** Seconds a picture takes to fade in. Default `0.3`. */
+    readonly duration?: number;
+}
+/** Image files show a thumbnail in their card, fading in once it has loaded. */
+export declare function filePreview(options?: FilePreviewOptions): FormEffect;

package/dist/forms/effects/file/filePreview.js

@@ -0,0 +1,17 @@
+import { EASE, at, defineForm, fileOf, v, varName } from "../kit.js";
+const ID = "filePreview";
+const ROOT = fileOf(ID);
+const IMG = "[data-sx-file-thumb] > img";
+// Asks the FileDrop for pictures (needs.preview: an object URL per image file, let go when the file goes) and fades
+// each one in, settling from a little larger, once it has loaded (data-sx-loaded). Under reduced motion it just shows.
+const CSS = `  ${at(`${ROOT} ${IMG}`)} {
+    transition: opacity ${v(ID, "time")} ${EASE}, scale ${v(ID, "time")} ${EASE};
+  }
+  ${at(`${ROOT} ${IMG}:not([data-sx-loaded])`)} {
+    opacity: 0;
+    scale: 1.08;
+  }`;
+/** Image files show a thumbnail in their card, fading in once it has loaded. */
+export function filePreview(options = {}) {
+    return defineForm(ID, CSS, { fits: ["file"], needs: { preview: true }, vars: { [varName(ID, "time")]: `${options.duration ?? 0.3}s` } });
+}

package/dist/forms/effects/file/filePreview.schema.d.ts

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

package/dist/forms/effects/file/filePreview.schema.js

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

package/dist/forms/effects/file/fileProgress.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface FileProgressOptions {
+    /** A bar under the name, or a ring that fills. Either ends in a check. Default `"bar"`. */
+    readonly kind?: "bar" | "ring";
+    /** The colour of the progress. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+}
+/** Each file's upload fills a bar (or a ring) smoothly, which turns into a check drawn at the end. */
+export declare function fileProgress(options?: FileProgressOptions): FormEffect;

package/dist/forms/effects/file/fileProgress.js

@@ -0,0 +1,92 @@
+import { CARD, DIR, EASE, SPRING, at, defineForm, fileLayer, fileOf, v, varName } from "../kit.js";
+const ID = "fileProgress";
+const ROOT = fileOf(ID);
+const RING = fileLayer(ID, "ring");
+const DONE = "[data-sx-file-done]";
+// The FileDrop draws each file's progress as a bar from `progress` (0-1, on the card as --sx-file-progress) and a
+// check at 1. This makes the bar fill smoothly and the check draw itself; `ring` puts the progress in a ring that fills
+// round the card's end, then turns into the check. The bar stays for screen readers (role progressbar), unseen.
+const STATE = `  ${at(ROOT)} {
+    --sx-file-bar: ${v(ID, "color")};
+  }
+  ${at(`${ROOT} ${CARD}:has(${RING}) [data-sx-file-bar]`)} {
+    opacity: 0;
+  }
+  ${at(RING)} {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    color: ${v(ID, "color")};
+    opacity: 0;
+  }
+  ${at(`${ROOT} ${CARD}[data-sx-uploading] ${RING}`)} {
+    opacity: 1;
+  }
+  ${at(`${RING} > svg`)} {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    rotate: -90deg;
+    scale: ${DIR} 1;
+  }
+  ${at(`${RING} [data-sx-file-svg="track"]`)} {
+    opacity: 0.2;
+  }
+  ${at(`${RING} [data-sx-file-svg="arc"]`)} {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: calc((1 - var(--sx-file-progress)) * 1.01);
+  }`;
+const CSS = `  ${at(`${ROOT} [data-sx-file-fill]`)} {
+    transition: scale 0.3s ${EASE};
+  }
+  ${at(`${ROOT} [data-sx-file-bar]`)} {
+    transition: opacity 0.2s ${EASE} 0.2s;
+  }
+  ${at(`${RING} [data-sx-file-svg="arc"]`)} {
+    transition: stroke-dashoffset 0.3s ${EASE};
+  }
+  ${at(RING)} {
+    transition: opacity 0.2s ${EASE}, scale 0.2s ${EASE};
+  }
+  ${at(`${ROOT} ${CARD}[data-sx-done] ${RING}`)} {
+    scale: 0.6;
+  }
+  ${at(`${ROOT} ${CARD}[data-sx-done] ${DONE} path`)} {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+    animation: sx-form-fileProgress-draw 0.35s ${EASE} 0.1s forwards;
+  }
+  ${at(`${ROOT} ${CARD}[data-sx-done] ${DONE} svg`)} {
+    animation: sx-form-fileProgress-pop 0.35s ${SPRING};
+  }
+  @keyframes sx-form-fileProgress-draw {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+  @keyframes sx-form-fileProgress-pop {
+    from {
+      scale: 0.6;
+    }
+  }`;
+const RING_SVG = {
+    viewBox: "0 0 24 24",
+    children: [
+        { tag: "circle", part: "track", attrs: { cx: 12, cy: 12, r: 9 } },
+        { tag: "circle", part: "arc", attrs: { cx: 12, cy: 12, r: 9, pathLength: 1 } },
+    ],
+};
+/** Each file's upload fills a bar (or a ring) smoothly, which turns into a check drawn at the end. */
+export function fileProgress(options = {}) {
+    const ring = options.kind === "ring";
+    return defineForm(ID, CSS, {
+        fits: ["file"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)" },
+        layers: ring ? [{ slot: "card", part: "ring", keep: true, svg: RING_SVG }] : [],
+    });
+}

package/dist/forms/effects/file/fileProgress.schema.d.ts

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

package/dist/forms/effects/file/fileProgress.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FILE_PROGRESS_SCHEMA = defineSchema()({
+    id: "fileProgress",
+    family: "form",
+    factory: "fileProgress",
+    fields: {
+        kind: { kind: "choice", label: "Shape", values: ["bar", "ring"], labels: { bar: "Bar", ring: "Ring" }, default: "bar" },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-primary)" },
+    },
+});

package/dist/forms/effects/file/fileReject.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface FileRejectOptions {
+    /** How far the zone shakes, in rem. Default `0.375`. */
+    readonly distance?: number;
+}
+/** A refused file shakes the zone once and turns its line red; so do files it won't take, while dragged over it. */
+export declare function fileReject(options?: FileRejectOptions): FormEffect;

package/dist/forms/effects/file/fileReject.js

@@ -0,0 +1,24 @@
+import { OVER_REJECT, REJECTED, ZONE, at, defineForm, fileOf, v, varName } from "../kit.js";
+const ID = "fileReject";
+const ROOT = fileOf(ID);
+// A file the zone refuses (a kind it won't take, too big, too many, a twin) shakes the zone once, and its line turns
+// red while it does; the words of why are the FileDrop's own, under the zone. Files of a kind it won't take turn the
+// line red while they are dragged over it, where the browser tells the kind.
+const STATE = `  ${at(`${ROOT}:is(${REJECTED}, ${OVER_REJECT})`)} {
+    --sx-file-line: var(--color-sx-danger);
+  }`;
+const CSS = `  ${at(`${ROOT}${REJECTED} ${ZONE}`)} {
+    animation: sx-form-fileReject-shake 0.4s ease-in-out;
+  }
+  @keyframes sx-form-fileReject-shake {
+    20%, 60% {
+      translate: calc(${v(ID, "distance")} * -1) 0;
+    }
+    40%, 80% {
+      translate: ${v(ID, "distance")} 0;
+    }
+  }`;
+/** A refused file shakes the zone once and turns its line red; so do files it won't take, while dragged over it. */
+export function fileReject(options = {}) {
+    return defineForm(ID, CSS, { fits: ["file"], state: STATE, vars: { [varName(ID, "distance")]: `${options.distance ?? 0.375}rem` } });
+}

package/dist/forms/effects/file/fileReject.schema.d.ts

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

package/dist/forms/effects/file/fileReject.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FILE_REJECT_SCHEMA = defineSchema()({
+    id: "fileReject",
+    family: "form",
+    factory: "fileReject",
+    fields: {
+        distance: { kind: "number", label: "Shake", min: 0.125, max: 1, step: 0.125, unit: "rem", default: 0.375 },
+    },
+});

package/dist/forms/effects/input/inputAside.d.ts

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface InputAsideOptions {
+    /** How much of the field the label keeps once it moves aside, 0.25 to 0.6. Default `0.4`. */
+    readonly size?: number;
+    /** The panel's colour. Default the accent, mixed into the surface. */
+    readonly color?: string;
+    /** Seconds it takes. Default `0.35`. */
+    readonly duration?: number;
+}
+/** The label's panel covers the field, then shrinks to its start side so you can type (Codrops' Kaede). */
+export declare function inputAside(options?: InputAsideOptions): FormEffect;

package/dist/forms/effects/input/inputAside.js

@@ -0,0 +1,42 @@
+import { DIR, PAD_X, RAISED, at, controlOf, defineForm, inField, labelOf, layerOf, timed, v, varName } from "../kit.js";
+const ID = "inputAside";
+const LABEL = labelOf(ID);
+const PANEL = layerOf(ID);
+// The label always sits at the start; the input always leaves it that much room. Only the panel moves: it covers the
+// whole field at rest and shrinks behind the label on focus, so nothing but a scale animates.
+const STATE = `  ${at(LABEL)} {
+    grid-area: box;
+    align-self: center;
+    z-index: 1;
+    margin: 0;
+    margin-inline-start: ${PAD_X};
+    max-inline-size: calc(${v(ID, "size")} * 100% - 2 * ${PAD_X});
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+  ${at(controlOf(ID))} {
+    padding-inline-start: calc(${v(ID, "size")} * 100% + ${PAD_X});
+  }`;
+const CSS = `  ${at(PANEL)} {
+    background: ${v(ID, "color")};
+    transform-origin: calc(50% - 50% * ${DIR}) 50%;
+    ${timed(ID, "scale")}
+  }
+  ${at(inField(ID, RAISED, PANEL))} {
+    scale: ${v(ID, "size")} 1;
+  }`;
+/** The label's panel covers the field, then shrinks to its start side so you can type (Codrops' Kaede). */
+export function inputAside(options = {}) {
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: {
+            [varName(ID, "size")]: options.size ?? 0.4,
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-accent) 55%, var(--color-sx-secondary))",
+            [varName(ID, "time")]: `${options.duration ?? 0.35}s`,
+        },
+        layers: [{ slot: "edge" }],
+        claims: ["label"],
+    });
+}

package/dist/forms/effects/input/inputAside.schema.d.ts

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

package/dist/forms/effects/input/inputAside.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_ASIDE_SCHEMA = defineSchema()({
+    id: "inputAside",
+    family: "form",
+    factory: "inputAside",
+    fields: {
+        size: { kind: "number", label: "Label's share", min: 0.25, max: 0.6, step: 0.05, default: 0.4, help: "How much of the field the label keeps once you type." },
+        color: { kind: "color", label: "Panel colour", default: "color-mix(in oklab, var(--color-sx-accent) 55%, var(--color-sx-secondary))" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.35 },
+    },
+});

package/dist/forms/effects/input/inputBeam.d.ts

@@ -0,0 +1,14 @@
+import type { FormEffect } from "../../types.js";
+export interface InputBeamOptions {
+    /** The beam's colours, head last, 1 to 4. Default the accent and primary colours. */
+    readonly colors?: readonly string[];
+    /** The ring's width, px. Default `2`. */
+    readonly width?: number;
+    /** `"focus"`: it runs while the field has the focus. `"always"`: all the time (a field the page is waiting on); one per screen. Default `"focus"`. */
+    readonly trigger?: "focus" | "always";
+    /** Seconds for one lap. Default `2.5`. */
+    readonly duration?: number;
+}
+export declare const INPUT_BEAM_COLORS: readonly ["var(--color-sx-accent)", "var(--color-sx-primary)"];
+/** A light with a tail runs around the edge while the field has the focus, or all the time ("AI glow"). */
+export declare function inputBeam(options?: InputBeamOptions): FormEffect;

package/dist/forms/effects/input/inputBeam.js

@@ -0,0 +1,51 @@
+import { at, childOf, defineForm, layerOf, loopPaused, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputBeam";
+const LAYER = layerOf(ID);
+const SPIN = childOf(ID, "spin");
+export const INPUT_BEAM_COLORS = ["var(--color-sx-accent)", "var(--color-sx-primary)"];
+// A ring: the layer's middle is masked away, so the square that turns inside it shows only along the field's edge, and
+// follows its corners. The square is wider than the field's diagonal (the layer is a size container), so it covers the
+// ring at every angle. It turns with `rotate`: the compositor runs it, nothing repaints.
+const CSS = `  ${at(LAYER)} {
+    box-sizing: border-box;
+    padding: calc(${v(ID, "width")} * 1px);
+    overflow: hidden;
+    container-type: size;
+    mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
+    mask-composite: exclude;
+    -webkit-mask-composite: xor;
+    opacity: ${v(ID, "shown")};
+    transition: opacity 0.25s ease-out;
+  }
+${whenFocused(ID, LAYER, "opacity: 1;")}
+  ${at(SPIN)} {
+    position: absolute;
+    inset: calc(50cqh - 75cqmax) calc(50cqw - 75cqmax);
+    background: conic-gradient(from 0deg, transparent 0 55%, ${v(ID, "stops")});
+    animation: sx-form-inputBeam ${v(ID, "time")} linear infinite;
+    animation-play-state: ${v(ID, "rest")};
+  }
+${whenFocused(ID, SPIN, "animation-play-state: running;")}
+${loopPaused(SPIN)}
+  @keyframes sx-form-inputBeam {
+    to { rotate: 360deg; }
+  }`;
+/** A light with a tail runs around the edge while the field has the focus, or all the time ("AI glow"). */
+export function inputBeam(options = {}) {
+    const colors = options.colors ?? INPUT_BEAM_COLORS;
+    const always = (options.trigger ?? "focus") === "always";
+    return defineForm(ID, CSS, {
+        // a beam that runs all the time says nothing about the focus
+        marksFocus: always ? undefined : ringOff(ID),
+        vars: {
+            [varName(ID, "stops")]: colors.join(", "),
+            [varName(ID, "width")]: options.width ?? 2,
+            [varName(ID, "time")]: `${options.duration ?? 2.5}s`,
+            [varName(ID, "rest")]: always ? "running" : "paused",
+            [varName(ID, "shown")]: always ? 1 : 0,
+        },
+        layers: [{ slot: "edge", children: ["spin"] }],
+        needs: always ? { inView: true } : {},
+    });
+}

package/dist/forms/effects/input/inputBeam.schema.d.ts

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

package/dist/forms/effects/input/inputBeam.schema.js

@@ -0,0 +1,18 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_BEAM_SCHEMA = defineSchema()({
+    id: "inputBeam",
+    family: "form",
+    factory: "inputBeam",
+    fields: {
+        trigger: {
+            kind: "choice",
+            label: "Runs",
+            values: ["focus", "always"],
+            labels: { focus: "While focused", always: "All the time (one per screen)" },
+            default: "focus",
+        },
+        colors: { kind: "colors", label: "Colours", min: 1, max: 4, default: ["var(--color-sx-accent)", "var(--color-sx-primary)"] },
+        width: { kind: "number", label: "Width", min: 1, max: 5, step: 0.5, unit: "px", default: 2 },
+        duration: { kind: "number", label: "One lap", min: 1, max: 8, step: 0.5, unit: "s", default: 2.5 },
+    },
+});

package/dist/forms/effects/input/inputCaret.d.ts

@@ -0,0 +1,13 @@
+import type { FormEffect } from "../../types.js";
+export interface InputCaretOptions {
+    /** The caret's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Its shape: the usual bar, a block over the next letter, or an underscore (Chrome only). Default `"auto"`. */
+    readonly shape?: "auto" | "bar" | "block" | "underscore";
+    /** `"native"`: the browser's blink. `"smooth"`: it fades in and out. `"steady"`: it never blinks (Chrome only, for both). Default `"native"`. */
+    readonly blink?: "native" | "smooth" | "steady";
+    /** Seconds for one smooth blink. Default `1.1`. */
+    readonly duration?: number;
+}
+/** A coloured caret, a block or underscore shape, a soft or steady blink. */
+export declare function inputCaret(options?: InputCaretOptions): FormEffect;

package/dist/forms/effects/input/inputCaret.js

@@ -0,0 +1,33 @@
+import { at, controlOf, defineForm, inField, loopPaused, v, varName } from "../kit.js";
+const ID = "inputCaret";
+const CONTROL = controlOf(ID);
+// The colour and the shape are a state. The blink is the browser's unless `caret-animation: manual` hands it to us: then
+// the smooth blink is a loop on `caret-color`, run only while focused. Browsers without caret-shape / caret-animation
+// keep the colour and their own caret.
+const STATE = `  ${at(CONTROL)} {
+    caret-color: ${v(ID, "color")};
+    caret-shape: ${v(ID, "shape")};
+    caret-animation: ${v(ID, "manual")};
+  }`;
+const CSS = `  ${at(inField(ID, ":focus-within", CONTROL))} {
+    animation: ${v(ID, "blink")} ${v(ID, "time")} ease-in-out infinite;
+  }
+${loopPaused(CONTROL)}
+  @keyframes sx-form-inputCaret {
+    0%, 100% { caret-color: ${v(ID, "color")}; }
+    50% { caret-color: transparent; }
+  }`;
+/** A coloured caret, a block or underscore shape, a soft or steady blink. */
+export function inputCaret(options = {}) {
+    const blink = options.blink ?? "native";
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            [varName(ID, "shape")]: options.shape ?? "auto",
+            [varName(ID, "manual")]: blink === "native" ? "auto" : "manual",
+            [varName(ID, "blink")]: blink === "smooth" ? "sx-form-inputCaret" : "none",
+            [varName(ID, "time")]: `${options.duration ?? 1.1}s`,
+        },
+    });
+}

package/dist/forms/effects/input/inputCaret.schema.d.ts

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

package/dist/forms/effects/input/inputCaret.schema.js

@@ -0,0 +1,26 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_CARET_SCHEMA = defineSchema()({
+    id: "inputCaret",
+    family: "form",
+    factory: "inputCaret",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-primary)" },
+        shape: {
+            kind: "choice",
+            label: "Shape",
+            values: ["auto", "bar", "block", "underscore"],
+            labels: { auto: "Browser's own", bar: "Bar", block: "Block", underscore: "Underscore" },
+            default: "auto",
+            help: "Chrome only; other browsers keep their bar.",
+        },
+        blink: {
+            kind: "choice",
+            label: "Blink",
+            values: ["native", "smooth", "steady"],
+            labels: { native: "Browser's own", smooth: "Soft fade", steady: "No blink" },
+            default: "native",
+            help: "Soft and steady: Chrome only.",
+        },
+        duration: { kind: "number", label: "One soft blink", min: 0.6, max: 2, step: 0.1, unit: "s", default: 1.1 },
+    },
+});

package/dist/forms/effects/input/inputCounter.d.ts

@@ -0,0 +1,16 @@
+import type { FormEffect } from "../../types.js";
+export interface InputCounterOptions {
+    /** The ring's colour while there is room. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Its colour near the limit. Default halfway between danger and success: an amber. */
+    readonly near?: string;
+    /** Its colour past a soft limit. Default `var(--color-sx-danger)`. */
+    readonly over?: string;
+    /** Seconds each change takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/**
+ * A ring fills as you type, turns amber near the limit, red past it, and grows a little to show the number left
+ * (`counter` on the field). Without it, the field shows "12/280".
+ */
+export declare function inputCounter(options?: InputCounterOptions): FormEffect;

package/dist/forms/effects/input/inputCounter.js

@@ -0,0 +1,84 @@
+import { DIR, at, defineForm, fieldOf, layerOf, timed, v, varName } from "../kit.js";
+const ID = "inputCounter";
+const FIELD = fieldOf(ID);
+const LAYER = `${FIELD} ${layerOf(ID)}`;
+const TRACK = `${LAYER} [data-sx-field-svg="track"]`;
+const FILL = `${LAYER} [data-sx-field-svg="fill"]`;
+// The ring and which number shows are the field's state: they hold under reduced motion. The ring fills with the
+// length (`--sx-field-used`, 0-1, written by the field), starting at the top and turning with reading direction.
+const STATE = `  ${at(`${FIELD} [data-sx-field-used]`)} {
+    display: none;
+  }
+  ${at(`${FIELD}[data-sx-count] [data-sx-field-left]`)} {
+    display: block;
+    font-size: 0.625rem;
+  }
+  ${at(TRACK)} {
+    fill: none;
+    stroke: color-mix(in oklab, currentColor 15%, transparent);
+    stroke-width: 2.5;
+  }
+  ${at(FILL)} {
+    fill: none;
+    stroke: ${v(ID, "color")};
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: calc(1.01 - var(--sx-field-used, 0) * 1.01);
+    transform-box: fill-box;
+    transform-origin: center;
+    rotate: -90deg;
+    scale: ${DIR} 1;
+  }
+  ${at(`${FIELD}[data-sx-count="near"] [data-sx-field-svg="fill"]`)} {
+    stroke: ${v(ID, "near")};
+  }
+  ${at(`${FIELD}[data-sx-count="over"] [data-sx-field-svg="fill"]`)} {
+    stroke: ${v(ID, "over")};
+  }
+  ${at(`${FIELD}[data-sx-count] ${layerOf(ID)}`)} {
+    scale: 1.2;
+  }
+  @media (forced-colors: active) {
+    ${at(TRACK)} {
+      stroke: GrayText;
+    }
+    ${at(`${FILL}, ${FIELD}[data-sx-count] [data-sx-field-svg="fill"]`)} {
+      stroke: Highlight;
+    }
+  }`;
+const CSS = `  ${at(FILL)} {
+    ${timed(ID, "stroke-dashoffset, stroke")}
+  }
+  ${at(LAYER)} {
+    ${timed(ID, "scale")}
+  }`;
+/**
+ * A ring fills as you type, turns amber near the limit, red past it, and grows a little to show the number left
+ * (`counter` on the field). Without it, the field shows "12/280".
+ */
+export function inputCounter(options = {}) {
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            [varName(ID, "near")]: options.near ?? "color-mix(in oklab, var(--color-sx-danger) 50%, var(--color-sx-success))",
+            [varName(ID, "over")]: options.over ?? "var(--color-sx-danger)",
+            [varName(ID, "time")]: `${options.duration ?? 0.2}s`,
+        },
+        layers: [
+            {
+                slot: "counter",
+                keep: true,
+                svg: {
+                    viewBox: "0 0 24 24",
+                    children: [
+                        { tag: "circle", part: "track", attrs: { cx: 12, cy: 12, r: 10 } },
+                        { tag: "circle", part: "fill", attrs: { cx: 12, cy: 12, r: 10, pathLength: 1 } },
+                    ],
+                },
+            },
+        ],
+        needs: { tool: "counter" },
+    });
+}

package/dist/forms/effects/input/inputCounter.schema.d.ts

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

package/dist/forms/effects/input/inputCounter.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_COUNTER_SCHEMA = defineSchema()({
+    id: "inputCounter",
+    family: "form",
+    factory: "inputCounter",
+    fields: {
+        color: { kind: "color", label: "Ring colour", default: "var(--color-sx-primary)" },
+        near: { kind: "color", label: "Near the limit", default: "color-mix(in oklab, var(--color-sx-danger) 50%, var(--color-sx-success))" },
+        over: { kind: "color", label: "Past the limit", default: "var(--color-sx-danger)" },
+        duration: { kind: "number", label: "Duration", min: 0.05, max: 0.6, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/forms/effects/input/inputCycle.d.ts

@@ -0,0 +1,19 @@
+import type { FormEffect } from "../../types.js";
+export interface InputCycleOptions {
+    /** The phrases the empty field shows in turn (up to 8). */
+    readonly words?: readonly string[];
+    /** Seconds each phrase stays. Default `3`. */
+    readonly hold?: number;
+    /**
+     * When the form is sent (or Enter is pressed in a field with no form), the typed text breaks into dust and the field
+     * empties. It waits until nothing in the form is flagged wrong. Runs code: the page needs `"use client"`. Default `true`.
+     */
+    readonly vanish?: boolean;
+}
+/** Phrases past this many are left out: a longer cycle is a slideshow, not a hint. */
+export declare const CYCLE_MAX = 8;
+/**
+ * The empty field's placeholder cycles through phrases, each sliding up into place; with `vanish`, the text you send
+ * breaks into dust and the field empties.
+ */
+export declare function inputCycle(options?: InputCycleOptions): FormEffect;