@sharedex/ui 0.0.0-stage → 0.10.0

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;

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

@@ -0,0 +1,18 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_UNDERLINE_SCHEMA = defineSchema()({
+    id: "inputUnderline",
+    family: "form",
+    factory: "inputUnderline",
+    fields: {
+        from: {
+            kind: "choice",
+            label: "Grows from",
+            values: ["start", "center", "end", "pointer"],
+            labels: { start: "Reading start", center: "Centre", end: "Reading end", pointer: "Where you click" },
+            default: "start",
+        },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-primary)" },
+        thickness: { kind: "number", label: "Thickness", min: 1, max: 6, step: 0.5, unit: "px", default: 2 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

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

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface InputWaveOptions {
+    /** How high each letter hops, in ems. Default `0.35`. */
+    readonly height?: number;
+    /** Seconds between one letter and the next. Default `0.04`. */
+    readonly stagger?: number;
+    /** Seconds one hop takes. Default `0.45`. */
+    readonly duration?: number;
+}
+/** The label's letters hop up one after another on focus. Needs a plain text label. */
+export declare function inputWave(options?: InputWaveOptions): FormEffect;

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

@@ -0,0 +1,23 @@
+import { FOCUSED, at, charOf, defineForm, inField, v, varName } from "../kit.js";
+const ID = "inputWave";
+// The letters are cut on the server (whole words in a joined script, so Arabic keeps its joins); each focus plays the
+// hop once, letter after letter. Screen readers get one plain copy of the label.
+const CSS = `  ${at(inField(ID, FOCUSED, charOf(ID)))} {
+    animation: sx-form-inputWave ${v(ID, "time")} ease-out both;
+    animation-delay: calc(var(--sx-field-i) * ${v(ID, "stagger")} * 1s);
+  }
+  @keyframes sx-form-inputWave {
+    0%, 100% { translate: 0 0; }
+    40% { translate: 0 calc(-1em * ${v(ID, "height")}); }
+  }`;
+/** The label's letters hop up one after another on focus. Needs a plain text label. */
+export function inputWave(options = {}) {
+    return defineForm(ID, CSS, {
+        vars: {
+            [varName(ID, "height")]: options.height ?? 0.35,
+            [varName(ID, "stagger")]: options.stagger ?? 0.04,
+            [varName(ID, "time")]: `${options.duration ?? 0.45}s`,
+        },
+        label: { split: true },
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_WAVE_SCHEMA = defineSchema()({
+    id: "inputWave",
+    family: "form",
+    factory: "inputWave",
+    fields: {
+        height: { kind: "number", label: "Hop height", min: 0.1, max: 0.8, step: 0.05, unit: "em", default: 0.35 },
+        stagger: { kind: "number", label: "Between letters", min: 0.01, max: 0.12, step: 0.01, unit: "s", default: 0.04 },
+        duration: { kind: "number", label: "One hop", min: 0.2, max: 1, step: 0.05, unit: "s", default: 0.45 },
+    },
+});

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

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface InputWavyOptions {
+    /** The line's colour while the field has the focus. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Its thickness, px. Default `2`. */
+    readonly thickness?: number;
+    /** Seconds the wobble lasts. Default `0.8`. */
+    readonly duration?: number;
+}
+/** The bottom line wobbles like jelly on focus, then settles flat (Codrops' Nao and Shoko). */
+export declare function inputWavy(options?: InputWavyOptions): FormEffect;

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

@@ -0,0 +1,53 @@
+import { at, defineForm, layerOf, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputWavy";
+const LAYER = layerOf(ID);
+const WAVE = `${LAYER} [data-sx-field-svg="wave"]`;
+/** A wave twice as wide as the field: sliding it by half (one viewBox) loops with no seam. */
+const HALF = 12.5;
+const WAVE_PATH = `M0 6 Q${HALF / 2} 1 ${HALF} 6${Array.from({ length: 63 }, (_, i) => ` T${(i + 2) * HALF} 6`).join("")}`;
+// The wave rests nearly flat (scale 0.02, never 0: a flat transform hides an SVG shape): an underline in the line's
+// colour. On focus it swells, flips, and settles flat again while it slides, like jelly. Only `scale` and `translate`
+// move, on one path.
+const CSS = `  ${at(LAYER)} {
+    inset-block: auto calc(-0.375rem - var(--sx-field-bw));
+    block-size: 0.75rem;
+    border-radius: 0;
+    clip-path: inset(-100% 0);
+  }
+  ${at(WAVE)} {
+    fill: none;
+    stroke: var(--sx-field-line, var(--color-sx-border));
+    stroke-width: calc(${v(ID, "thickness")} * 1px);
+    vector-effect: non-scaling-stroke;
+    transform-box: fill-box;
+    transform-origin: 50% 50%;
+    scale: 1 0.02;
+    transition: stroke 0.2s ease-out;
+  }
+${whenFocused(ID, WAVE, `stroke: ${v(ID, "color")}; animation: sx-form-inputWavy ${v(ID, "time")} ease-out;`)}
+  @keyframes sx-form-inputWavy {
+    0% { translate: 0 0; scale: 1 0.02; }
+    15% { scale: 1 1; }
+    35% { scale: 1 -0.7; }
+    55% { scale: 1 0.4; }
+    75% { scale: 1 -0.15; }
+    100% { translate: -50% 0; scale: 1 0.02; }
+  }`;
+/** The bottom line wobbles like jelly on focus, then settles flat (Codrops' Nao and Shoko). */
+export function inputWavy(options = {}) {
+    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, "time")]: `${options.duration ?? 0.8}s`,
+        },
+        layers: [
+            {
+                slot: "edge",
+                svg: { viewBox: "0 0 400 12", preserveAspectRatio: "none", children: [{ tag: "path", part: "wave", attrs: { d: WAVE_PATH } }] },
+            },
+        ],
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_WAVY_SCHEMA = defineSchema()({
+    id: "inputWavy",
+    family: "form",
+    factory: "inputWavy",
+    fields: {
+        color: { kind: "color", label: "Colour on focus", default: "var(--color-sx-primary)" },
+        thickness: { kind: "number", label: "Thickness", min: 1, max: 5, step: 0.5, unit: "px", default: 2 },
+        duration: { kind: "number", label: "Wobble", min: 0.3, max: 2, step: 0.1, unit: "s", default: 0.8 },
+    },
+});