@sharedex/ui 0.9.0 → 0.10.0

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

@@ -0,0 +1,70 @@
+import { DIR, PAD_Y, RAISED, START, at, controlOf, defineForm, fieldOf, inField, labelOf, layerOf, timed, v, varName } from "../kit.js";
+const ID = "inputNotch";
+const LABEL = labelOf(ID);
+const LINE = layerOf(ID);
+const GAP = `${LINE} > legend`;
+// The outline is a <fieldset> drawn over the box: its <legend> holds a hidden copy of the label at the raised size,
+// and the browser cuts the border open exactly that wide. No measuring. The box's own border steps aside (the look
+// reads --sx-field-edge), and the fieldset takes the look's colour for each state (--sx-field-line).
+const STATE = `  ${at(fieldOf(ID))} {
+    --sx-field-edge: transparent;
+    --sx-field-label-size: 1em;
+  }
+  ${at(LINE)} {
+    inset-block-start: calc(-0.5em * ${v(ID, "scale")} - var(--sx-field-bw) / 2);
+    padding-inline: calc(${START} - var(--sx-field-bw) - 0.25em * ${v(ID, "scale")});
+    border: max(var(--sx-field-bw), 1px) solid var(--sx-field-line, var(--color-sx-border));
+  }
+  ${at(GAP)} {
+    float: none;
+    padding: 0;
+    font-size: calc(${v(ID, "scale")} * 1em);
+    font-weight: var(--sx-field-label-weight, 500);
+    line-height: 1;
+    white-space: nowrap;
+    visibility: hidden;
+    max-inline-size: 0.01px;
+  }
+  ${at(`${GAP} > span`)} {
+    display: inline-block;
+    padding-inline: 0.25em;
+  }
+  ${at(inField(ID, RAISED, GAP))} {
+    max-inline-size: 100%;
+  }
+  ${at(LABEL)} {
+    grid-area: box;
+    align-self: start;
+    z-index: 1;
+    margin: ${PAD_Y} 0 0;
+    margin-inline-start: ${START};
+    line-height: 1.5;
+    pointer-events: none;
+    transform-origin: calc(50% - 50% * ${DIR}) 0;
+  }
+  ${at(inField(ID, ":not(:focus-within)", controlOf(ID)))} {
+    --sx-field-placeholder: transparent;
+  }
+  ${at(inField(ID, RAISED, LABEL))} {
+    translate: 0 calc(-1 * (${PAD_Y} + ${v(ID, "scale")} * 0.75em));
+    scale: ${v(ID, "scale")};
+  }`;
+// The gap's width is the one thing that re-lays out (a legend can only open by its own size): one small element.
+const CSS = `  ${at(LABEL)} {
+    ${timed(ID, "translate, scale")}
+  }
+  ${at(GAP)} {
+    transition: max-inline-size ${v(ID, "time")} ease-out;
+  }`;
+/** The label floats onto the border, which opens a gap exactly its width (Material's outlined field). */
+export function inputNotch(options = {}) {
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: {
+            [varName(ID, "scale")]: options.scale ?? 0.75,
+            [varName(ID, "time")]: `${options.duration ?? 0.2}s`,
+        },
+        layers: [{ slot: "edge", legend: true, keep: true }],
+        claims: ["label"],
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_NOTCH_SCHEMA = defineSchema()({
+    id: "inputNotch",
+    family: "form",
+    factory: "inputNotch",
+    fields: {
+        scale: { kind: "number", label: "Label size on the border", min: 0.6, max: 0.9, step: 0.05, default: 0.75 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.6, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

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

@@ -0,0 +1,15 @@
+import type { FormEffect } from "../../types.js";
+export interface InputRevealOptions {
+    /**
+     * `"eye"`: the eye blinks open and a stroke crosses it out. `"flashlight"`: the field goes dark and the eye shines a
+     * beam across the password (Ryan Mulligan's idea). Default `"eye"`.
+     */
+    readonly kind?: "eye" | "flashlight";
+    /** Seconds it takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/**
+ * The show-password button comes alive (`reveal` on the field): the eye blinks and a stroke crosses it out, or the
+ * field goes dark and the eye lights the password like a torch. Under reduced motion it just swaps.
+ */
+export declare function inputReveal(options?: InputRevealOptions): FormEffect;

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

@@ -0,0 +1,56 @@
+import { DIR, at, childOf, defineForm, fieldOf, inField, layerOf, timed, v, varName } from "../kit.js";
+const ID = "inputReveal";
+const FIELD = fieldOf(ID);
+const SHOWN = "[data-sx-revealed]";
+const SLASH = `${FIELD} [data-sx-field-reveal] [data-sx-tool-part="slash"]`;
+const EYE = `${FIELD} [data-sx-field-reveal] [data-sx-tool-eye]`;
+const DARK = layerOf(ID);
+const BEAM = childOf(ID, "beam");
+/** The beam comes from the end of the field, where the button is. */
+const END = `calc(50% + 50% * ${DIR})`;
+// Both kinds share one sheet: the beam's layer exists only on a flashlight, and the eye is the field's own button.
+const CSS = `  ${at(SLASH)} {
+    ${timed(ID, "stroke-dashoffset")}
+  }
+  ${at(EYE)} {
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  ${at(inField(ID, SHOWN, EYE))} {
+    animation: sx-form-inputReveal-blink ${v(ID, "time")} ease-in-out;
+  }
+  ${at(DARK)} {
+    background: var(--color-sx-ink);
+    opacity: 0;
+    ${timed(ID, "opacity")}
+  }
+  ${at(BEAM)} {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse 125% 170% at ${END} 50%, var(--color-sx-secondary) 58%, transparent 61%);
+    scale: 0;
+    transform-origin: ${END} 50%;
+    ${timed(ID, "scale")}
+  }
+  ${at(inField(ID, SHOWN, DARK))} {
+    opacity: 1;
+  }
+  ${at(inField(ID, SHOWN, BEAM))} {
+    scale: 1;
+  }
+  @keyframes sx-form-inputReveal-blink {
+    0%, 100% { scale: 1 1; }
+    45% { scale: 1 0.1; }
+  }`;
+/**
+ * The show-password button comes alive (`reveal` on the field): the eye blinks and a stroke crosses it out, or the
+ * field goes dark and the eye lights the password like a torch. Under reduced motion it just swaps.
+ */
+export function inputReveal(options = {}) {
+    const kind = options.kind ?? "eye";
+    return defineForm(ID, CSS, {
+        vars: { [varName(ID, "time")]: `${options.duration ?? 0.3}s` },
+        layers: kind === "flashlight" ? [{ slot: "fill", children: ["beam"] }] : [],
+        needs: { tool: "reveal" },
+    });
+}

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

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

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

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_REVEAL_SCHEMA = defineSchema()({
+    id: "inputReveal",
+    family: "form",
+    factory: "inputReveal",
+    fields: {
+        kind: {
+            kind: "choice",
+            label: "Look",
+            values: ["eye", "flashlight"],
+            labels: { eye: "Eye blinks, crossed out", flashlight: "Flashlight beam" },
+            default: "eye",
+        },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.8, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { FormEffect } from "../../types.js";
+export interface InputRingOptions {
+    /** The ring's colour. Default the accent at 80%. */
+    readonly color?: string;
+    /** Its width, px. Default `4`. */
+    readonly width?: number;
+    /** `"grow"`: it grows out from the field. `"shrink"`: it starts wide and shrinks onto it (macOS). Default `"grow"`. */
+    readonly kind?: "grow" | "shrink";
+    /** Seconds it takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** A soft ring grows out from the field, or shrinks onto it, on focus. */
+export declare function inputRing(options?: InputRingOptions): FormEffect;

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

@@ -0,0 +1,27 @@
+import { at, defineForm, layerOf, timed, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputRing";
+const LAYER = layerOf(ID);
+// A soft ring outside the box, beside the base focus outline (never in place of it). It moves with `scale` and fades
+// with `opacity`: the ring's width itself never animates (atlas: no animated box-shadow).
+const CSS = `  ${at(LAYER)} {
+    inset: calc(-1 * (var(--sx-field-bw) + ${v(ID, "width")} * 1px));
+    border: calc(${v(ID, "width")} * 1px) solid ${v(ID, "color")};
+    opacity: 0;
+    scale: ${v(ID, "from")};
+    ${timed(ID, "opacity, scale")}
+  }
+${whenFocused(ID, LAYER, "opacity: 1; scale: 1;")}`;
+/** A soft ring grows out from the field, or shrinks onto it, on focus. */
+export function inputRing(options = {}) {
+    return defineForm(ID, CSS, {
+        marksFocus: ringOff(ID),
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-accent) 80%, transparent)",
+            [varName(ID, "width")]: options.width ?? 4,
+            [varName(ID, "from")]: (options.kind ?? "grow") === "grow" ? 0.97 : 1.06,
+            [varName(ID, "time")]: `${options.duration ?? 0.25}s`,
+        },
+        layers: [{ slot: "edge" }],
+    });
+}

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

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

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

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_RING_SCHEMA = defineSchema()({
+    id: "inputRing",
+    family: "form",
+    factory: "inputRing",
+    fields: {
+        kind: { kind: "choice", label: "Motion", values: ["grow", "shrink"], labels: { grow: "Grows out", shrink: "Shrinks on" }, default: "grow" },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-accent) 80%, transparent)" },
+        width: { kind: "number", label: "Width", min: 2, max: 8, step: 1, unit: "px", default: 4 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.6, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface InputRiseOptions {
+    /** The colour that rises. Keep it light: the text sits on it. Default the accent at 45%. */
+    readonly color?: string;
+    /** Seconds it takes. Default `0.35`. */
+    readonly duration?: number;
+}
+/** A colour rises from the bottom and fills the field on focus (Codrops' Jiro). */
+export declare function inputRise(options?: InputRiseOptions): FormEffect;

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

@@ -0,0 +1,22 @@
+import { at, defineForm, layerOf, timed, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputRise";
+const LAYER = layerOf(ID);
+const CSS = `  ${at(LAYER)} {
+    background: ${v(ID, "color")};
+    scale: 1 0;
+    transform-origin: 50% 100%;
+    ${timed(ID, "scale")}
+  }
+${whenFocused(ID, LAYER, "scale: 1 1;")}`;
+/** A colour rises from the bottom and fills the field on focus (Codrops' Jiro). */
+export function inputRise(options = {}) {
+    return defineForm(ID, CSS, {
+        marksFocus: ringOff(ID),
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-accent) 45%, transparent)",
+            [varName(ID, "time")]: `${options.duration ?? 0.35}s`,
+        },
+        layers: [{ slot: "fill" }],
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_RISE_SCHEMA = defineSchema()({
+    id: "inputRise",
+    family: "form",
+    factory: "inputRise",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-accent) 45%, transparent)" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.35 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface InputSearchOptions {
+    /** The closed field's width, rem: about its icon and padding. Default `2.75`. */
+    readonly closed?: number;
+    /** Seconds it takes to open. Default `0.35`. */
+    readonly duration?: number;
+}
+/** A search icon opens into a full field on focus, and closes again when left empty. Give the field an `icon`. */
+export declare function inputSearch(options?: InputSearchOptions): FormEffect;

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

@@ -0,0 +1,37 @@
+import { RAISED, at, boxOf, defineForm, inField, labelOf, timed, v, varName } from "../kit.js";
+const ID = "inputSearch";
+const BOX = boxOf(ID);
+// The box is as wide as its icon until the field has the focus or text, inside the field's own width (so a width you
+// set on the field still holds the room). The label is only for screen readers: the icon says "search". The width
+// changes, which re-lays out one box: the atlas accepts it.
+const STATE = `  ${at(BOX)} {
+    justify-self: start;
+    inline-size: calc(${v(ID, "closed")} * 1rem);
+    max-inline-size: 100%;
+  }
+  ${at(inField(ID, RAISED, BOX))} {
+    inline-size: 100%;
+  }
+  ${at(labelOf(ID))} {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }`;
+const CSS = `  ${at(BOX)} {
+    ${timed(ID, "inline-size")}
+  }`;
+/** A search icon opens into a full field on focus, and closes again when left empty. Give the field an `icon`. */
+export function inputSearch(options = {}) {
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: {
+            [varName(ID, "closed")]: options.closed ?? 2.75,
+            [varName(ID, "time")]: `${options.duration ?? 0.35}s`,
+        },
+        claims: ["label"],
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_SEARCH_SCHEMA = defineSchema()({
+    id: "inputSearch",
+    family: "form",
+    factory: "inputSearch",
+    fields: {
+        closed: { kind: "number", label: "Closed width", min: 2, max: 6, step: 0.25, unit: "rem", default: 2.75 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.35 },
+    },
+});

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

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface InputSkeletonOptions {
+    /** Seconds for one sweep of the shine. Default `1.4`. */
+    readonly duration?: number;
+}
+/** A shimmering placeholder covers the field while its value loads: set `busy` on the field. */
+export declare function inputSkeleton(options?: InputSkeletonOptions): FormEffect;

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

@@ -0,0 +1,41 @@
+import { BUSY, DIR, at, childOf, defineForm, inField, layerOf, loopPaused, v, varName } from "../kit.js";
+const ID = "inputSkeleton";
+const LAYER = layerOf(ID);
+const SHINE = childOf(ID, "shine");
+// The grey placeholder is a state: while `busy`, it covers the field even under reduced motion. Only the shine moves:
+// a band half the field wide crosses it in reading direction with `translate`.
+const STATE = `  ${at(LAYER)} {
+    overflow: hidden;
+    background: color-mix(in oklab, var(--color-sx-ink) 8%, var(--color-sx-secondary));
+    opacity: 0;
+    visibility: hidden;
+  }
+  ${at(inField(ID, BUSY, LAYER))} {
+    opacity: 1;
+    visibility: visible;
+  }
+  ${at(SHINE)} {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 50%;
+    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-sx-secondary) 75%, transparent), transparent);
+    translate: calc(-100% * ${DIR}) 0;
+  }`;
+const CSS = `  ${at(inField(ID, BUSY, SHINE))} {
+    animation: sx-form-inputSkeleton ${v(ID, "time")} linear infinite;
+  }
+${loopPaused(SHINE)}
+  @keyframes sx-form-inputSkeleton {
+    from { translate: calc(-100% * ${DIR}) 0; }
+    to { translate: calc(200% * ${DIR}) 0; }
+  }`;
+/** A shimmering placeholder covers the field while its value loads: set `busy` on the field. */
+export function inputSkeleton(options = {}) {
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: { [varName(ID, "time")]: `${options.duration ?? 1.4}s` },
+        layers: [{ slot: "edge", children: ["shine"], keep: true }],
+        needs: { inView: true },
+    });
+}

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

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

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

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_SKELETON_SCHEMA = defineSchema()({
+    id: "inputSkeleton",
+    family: "form",
+    factory: "inputSkeleton",
+    fields: {
+        duration: { kind: "number", label: "One sweep", min: 0.6, max: 3, step: 0.1, unit: "s", default: 1.4 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface InputSpotlightOptions {
+    /** How visible the other fields stay, 0.2 to 0.8. Default `0.4`. */
+    readonly dim?: number;
+    /** Seconds it takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** The other fields of the form dim while one has the focus (Codrops' Kyo). Put it on every field of the form. */
+export declare function inputSpotlight(options?: InputSpotlightOptions): FormEffect;

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

@@ -0,0 +1,20 @@
+import { at, defineForm, fieldOf, timed, v, varName } from "../kit.js";
+const ID = "inputSpotlight";
+const SELF = fieldOf(ID);
+// The fields that wear it dim while another one in the same form (or fieldset, or `data-sx-spotlight` box) has the
+// focus. Opacity only.
+const CSS = `  ${at(SELF)} {
+    ${timed(ID, "opacity")}
+  }
+  :where(:is(form, fieldset, [data-sx-spotlight]):has(${SELF}:focus-within) ${SELF}:not(:focus-within)) {
+    opacity: ${v(ID, "dim")};
+  }`;
+/** The other fields of the form dim while one has the focus (Codrops' Kyo). Put it on every field of the form. */
+export function inputSpotlight(options = {}) {
+    return defineForm(ID, CSS, {
+        vars: {
+            [varName(ID, "dim")]: options.dim ?? 0.4,
+            [varName(ID, "time")]: `${options.duration ?? 0.3}s`,
+        },
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_SPOTLIGHT_SCHEMA = defineSchema()({
+    id: "inputSpotlight",
+    family: "form",
+    factory: "inputSpotlight",
+    fields: {
+        dim: { kind: "number", label: "Others stay at", min: 0.2, max: 0.8, step: 0.05, default: 0.4 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface InputStrengthOptions {
+    /** Seconds each bar takes to fill. Default `0.35`. */
+    readonly duration?: number;
+    /** Seconds between one bar and the next. Default `0.06`. */
+    readonly stagger?: number;
+}
+/** The strength meter's bars fill one after another, with a little overshoot, and the new word drops in (`strength`). */
+export declare function inputStrength(options?: InputStrengthOptions): FormEffect;

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

@@ -0,0 +1,29 @@
+import { SPRING, at, defineForm, fieldOf, timed, v, varName } from "../kit.js";
+const ID = "inputStrength";
+const FIELD = fieldOf(ID);
+const FILL = `${FIELD} [data-sx-field-bar] > span`;
+const WORD = `${FIELD} [data-sx-field-level] > span`;
+// The bars and their colours are the field's (`strength`), so the meter reads the same under reduced motion. This
+// effect only moves them: each bar fills one after another with a little overshoot, and a new word drops in.
+const CSS = `  ${at(FILL)} {
+    ${timed(ID, "scale", SPRING)}
+    transition-delay: calc(var(--sx-field-i, 0) * ${v(ID, "stagger")});
+  }
+  ${at(WORD)} {
+    transition: opacity ${v(ID, "time")} ease-out, translate ${v(ID, "time")} ease-out;
+  }
+  @starting-style {
+    ${at(WORD)} {
+      opacity: 0;
+      translate: 0 0.5em;
+    }
+  }`;
+/** The strength meter's bars fill one after another, with a little overshoot, and the new word drops in (`strength`). */
+export function inputStrength(options = {}) {
+    return defineForm(ID, CSS, {
+        vars: {
+            [varName(ID, "time")]: `${options.duration ?? 0.35}s`,
+            [varName(ID, "stagger")]: `${options.stagger ?? 0.06}s`,
+        },
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_STRENGTH_SCHEMA = defineSchema()({
+    id: "inputStrength",
+    family: "form",
+    factory: "inputStrength",
+    fields: {
+        duration: { kind: "number", label: "Each bar", min: 0.1, max: 0.8, step: 0.05, unit: "s", default: 0.35 },
+        stagger: { kind: "number", label: "Between bars", min: 0, max: 0.2, step: 0.01, unit: "s", default: 0.06 },
+    },
+});

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

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface InputSwapOptions {
+    /** The words that roll in. Default the label again, in the new colour. */
+    readonly text?: string;
+    /** Their colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Seconds it takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** The label's words roll up, and other words (or a coloured copy) roll in, on focus (Codrops' Isao, Yoshiko, Chisato). */
+export declare function inputSwap(options?: InputSwapOptions): FormEffect;

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

@@ -0,0 +1,39 @@
+import { at, defineForm, labelOf, layerOf, textOf, timed, v, varName, whenFocused } from "../kit.js";
+const ID = "inputSwap";
+const LABEL = labelOf(ID);
+const TEXT = textOf(ID);
+const ALT = layerOf(ID);
+// The label's words and the second copy share one grid cell, clipped: the words roll up out of it while the copy rolls
+// up into it. The copy is hidden from screen readers, so the field's name never changes. Its resting place is in the
+// motion sheet, not the state sheet: the state sheet loads after it and would beat the focus rule. Under reduced motion
+// the copy is hidden anyway.
+const STATE = `  ${at(LABEL)} {
+    display: inline-grid;
+    overflow: clip;
+  }
+  ${at(`${TEXT}, ${ALT}`)} {
+    grid-area: 1 / 1;
+  }
+  ${at(ALT)} {
+    color: ${v(ID, "color")};
+  }`;
+const CSS = `  ${at(ALT)} {
+    translate: 0 110%;
+  }
+  ${at(`${TEXT}, ${ALT}`)} {
+    ${timed(ID, "translate")}
+  }
+${whenFocused(ID, TEXT, "translate: 0 -110%;")}
+${whenFocused(ID, ALT, "translate: 0 0;")}`;
+/** The label's words roll up, and other words (or a coloured copy) roll in, on focus (Codrops' Isao, Yoshiko, Chisato). */
+export function inputSwap(options = {}) {
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            [varName(ID, "time")]: `${options.duration ?? 0.3}s`,
+        },
+        layers: [options.text === undefined ? { slot: "label", copy: true } : { slot: "label", text: options.text }],
+        label: { wrap: true },
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_SWAP_SCHEMA = defineSchema()({
+    id: "inputSwap",
+    family: "form",
+    factory: "inputSwap",
+    fields: {
+        text: { kind: "text", label: "Words that roll in", autoNote: "the label again, in the new colour" },
+        color: { kind: "color", label: "Their 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/input/inputUnderline.d.ts

@@ -0,0 +1,13 @@
+import type { FormEffect } from "../../types.js";
+export interface InputUnderlineOptions {
+    /** The line's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Its thickness, px. Default `2`. */
+    readonly thickness?: number;
+    /** Where it grows from, in reading direction, or from where the field was clicked (`"pointer"`). Default `"start"`. */
+    readonly from?: "start" | "center" | "end" | "pointer";
+    /** Seconds it takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** A line grows along the bottom edge on focus (Codrops' Hoshi; Material's line ripple with `from: "pointer"`). */
+export declare function inputUnderline(options?: InputUnderlineOptions): FormEffect;

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

@@ -0,0 +1,36 @@
+import { DIR, at, defineForm, layerOf, timed, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputUnderline";
+const LAYER = layerOf(ID);
+const CSS = `  ${at(LAYER)} {
+    inset-block-start: auto;
+    block-size: calc(${v(ID, "thickness")} * 1px);
+    border-radius: 0;
+    background: ${v(ID, "color")};
+    scale: 0 1;
+    transform-origin: ${v(ID, "origin")} 50%;
+    ${timed(ID, "scale")}
+  }
+${whenFocused(ID, LAYER, "scale: 1 1;")}`;
+/** Where the line grows from: a side in reading direction, the centre, or the press (keyboard focus: the centre). */
+function originOf(from) {
+    if (from === "pointer")
+        return "calc(var(--sx-field-ox, 0.5) * 100%)";
+    const at = from === "start" ? 0 : from === "end" ? 1 : 0.5;
+    return `calc(50% + ${DIR} * ${at - 0.5} * 100%)`;
+}
+/** A line grows along the bottom edge on focus (Codrops' Hoshi; Material's line ripple with `from: "pointer"`). */
+export function inputUnderline(options = {}) {
+    const from = options.from ?? "start";
+    return defineForm(ID, CSS, {
+        marksFocus: ringOff(ID),
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            [varName(ID, "thickness")]: options.thickness ?? 2,
+            [varName(ID, "origin")]: originOf(from),
+            [varName(ID, "time")]: `${options.duration ?? 0.3}s`,
+        },
+        layers: [{ slot: "edge" }],
+        needs: from === "pointer" ? { origin: true } : {},
+    });
+}

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

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