@sharedex/ui 0.9.0 → 0.10.0

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

@@ -0,0 +1,93 @@
+import { attachVanish } from "../../runtime/vanish.js";
+import { FILLED, PAD_X, PAD_Y, START, at, controlOf, defineForm, fieldOf, layerOf, loopPaused, v, varName } from "../kit.js";
+const ID = "inputCycle";
+/** Phrases past this many are left out: a longer cycle is a slideshow, not a hint. */
+export const CYCLE_MAX = 8;
+const WORDS = ["Search anything", "Try “red shoes”", "Try “size 42”"];
+const LAYER = layerOf(ID, "cycle");
+const LINE = `${LAYER} > [data-sx-field-part="line"]`;
+/** Where a phrase comes in: 12% of its turn slides it in, 12% slides the last one out. */
+const MOVE = 0.12;
+// The phrases stack in one cell and take turns, each with its own delay, in one animation per count of phrases (picked
+// with :has(), so one stylesheet serves any list). Each slides up into place, stays, and slides up and out as the
+// next one comes in.
+const pct = (n) => `${Number(n.toFixed(3))}%`;
+const counts = Array.from({ length: CYCLE_MAX - 1 }, (_, k) => k + 2);
+const CSS = `${counts
+    .map((n) => `  ${at(`${LAYER}:has(> [data-sx-field-part="line"]:nth-child(${n}):last-child) > [data-sx-field-part="line"]`)} {
+    animation: sx-form-inputCycle-${n} calc(${v(ID, "hold")} * ${n}) ease-in-out calc((var(--sx-field-i) - ${MOVE}) * ${v(ID, "hold")}) infinite;
+  }
+  @keyframes sx-form-inputCycle-${n} {
+    0% {
+      translate: 0 100%;
+      opacity: 0;
+    }
+    ${pct((MOVE * 100) / n)}, ${pct(100 / n)} {
+      translate: 0 0;
+      opacity: 1;
+    }
+    ${pct(((1 + MOVE) * 100) / n)}, 100% {
+      translate: 0 -100%;
+      opacity: 0;
+    }
+  }`)
+    .join("\n")}
+${loopPaused(LINE)}
+  ${at(LAYER)} {
+    transition: opacity 0.2s ease-out;
+  }`;
+// What holds under reduced motion: the first phrase, still, where the placeholder would be, while the field is empty.
+// It steps aside while a floating label rests on the field, and while typed text turns to dust.
+const STATE = `  ${at(controlOf(ID))} {
+    --sx-field-placeholder: transparent;
+  }
+  ${at(LAYER)} {
+    display: grid;
+    align-items: start;
+    box-sizing: border-box;
+    padding-block: ${PAD_Y};
+    padding-inline: ${START} ${PAD_X};
+    color: var(--sx-field-placeholder, var(--color-sx-muted));
+    line-height: 1.5;
+    white-space: nowrap;
+    overflow: hidden;
+    opacity: 0;
+  }
+  ${at(LINE)} {
+    grid-area: 1 / 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0;
+  }
+  ${at(`${LINE}:first-child`)} {
+    opacity: 1;
+  }
+  ${at(`${fieldOf(ID)}:not(${FILLED}):not([data-sx-vanishing]) ${LAYER}`)} {
+    opacity: 1;
+  }
+  ${at(`${fieldOf(ID)}:is([data-sx-field~="inputFloat"], [data-sx-field~="inputNotch"], [data-sx-field~="inputAside"]):not(:focus-within) ${LAYER}`)} {
+    opacity: 0;
+  }
+  ${at(`${fieldOf(ID)}[data-sx-field~="inputFloat"] ${LAYER}`)} {
+    padding-block: calc(${PAD_Y} + 0.5rem) calc(${PAD_Y} - 0.25rem);
+  }
+  @media (pointer: coarse) {
+    ${at(LAYER)} {
+      font-size: max(16px, 1em);
+    }
+  }`;
+/**
+ * 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 function inputCycle(options = {}) {
+    const words = (options.words ?? WORDS).slice(0, CYCLE_MAX);
+    const vanish = options.vanish ?? true;
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: { [varName(ID, "hold")]: `${options.hold ?? 3}s` },
+        layers: [{ slot: "fill", part: "cycle", lines: words, keep: true }],
+        needs: { inView: true },
+        ...(vanish ? { program: { attach: attachVanish, signature: "vanish" } } : {}),
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_CYCLE_SCHEMA = defineSchema()({
+    id: "inputCycle",
+    family: "form",
+    factory: "inputCycle",
+    fields: {
+        words: { kind: "texts", label: "Phrases", min: 1, max: 8, default: ["Search anything", "Try “red shoes”", "Try “size 42”"], help: "Shown in turn while the field is empty." },
+        hold: { kind: "number", label: "Each phrase stays", min: 1.5, max: 8, step: 0.5, unit: "s", default: 3 },
+        vanish: { kind: "boolean", label: "Text turns to dust on send", default: true, help: "Runs code: the page needs \"use client\"." },
+    },
+});

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

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface InputDepthOptions {
+    /** `"sink"`: the field presses into the page (an inner shadow fades in). `"lift"`: a hard shadow slides out from behind it (brutalist). Default `"sink"`. */
+    readonly kind?: "sink" | "lift";
+    /** The shadow's colour. Default `var(--color-sx-ink)`. */
+    readonly color?: string;
+    /** Seconds it takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The field sinks into the page, or lifts off a hard shadow, on focus. */
+export declare function inputDepth(options?: InputDepthOptions): FormEffect;

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

@@ -0,0 +1,31 @@
+import { DIR, at, defineForm, layerOf, timed, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputDepth";
+const SINK = layerOf(ID, "sink");
+const LIFT = layerOf(ID, "lift");
+// Both kinds in one sheet, keyed on the layer's part. The shadows are fixed and never animate: the inner one fades in
+// on a layer behind the text, the hard one slides out from behind the box.
+const CSS = `  ${at(SINK)} {
+    box-shadow: inset 0 2px 6px color-mix(in oklab, ${v(ID, "color")} 30%, transparent);
+    opacity: 0;
+    ${timed(ID, "opacity")}
+  }
+${whenFocused(ID, SINK, "opacity: 1;")}
+  ${at(LIFT)} {
+    background: ${v(ID, "color")};
+    opacity: 0;
+    ${timed(ID, "opacity, translate")}
+  }
+${whenFocused(ID, LIFT, `opacity: 1; translate: calc(${DIR} * 0.25rem) 0.25rem;`)}`;
+/** The field sinks into the page, or lifts off a hard shadow, on focus. */
+export function inputDepth(options = {}) {
+    const kind = options.kind ?? "sink";
+    return defineForm(ID, CSS, {
+        marksFocus: ringOff(ID),
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-ink)",
+            [varName(ID, "time")]: `${options.duration ?? 0.25}s`,
+        },
+        layers: [kind === "sink" ? { slot: "under", part: "sink" } : { slot: "behind", part: "lift" }],
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_DEPTH_SCHEMA = defineSchema()({
+    id: "inputDepth",
+    family: "form",
+    factory: "inputDepth",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["sink", "lift"], labels: { sink: "Sinks in", lift: "Lifts off a hard shadow" }, default: "sink" },
+        color: { kind: "color", label: "Shadow colour", default: "var(--color-sx-ink)" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.6, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { FormEffect } from "../../types.js";
+export interface InputDrawOptions {
+    /** The line's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Its thickness, px. Default `2`. */
+    readonly thickness?: number;
+    /** The corner radius it follows. An SVG can't read the box's own. Default `var(--radius-sx-control)`. */
+    readonly radius?: string;
+    /** Seconds to draw it all the way round. Default `0.6`. */
+    readonly duration?: number;
+}
+/** The outline draws itself around the field on focus (Codrops' Madoka): an SVG rectangle's dash, so it follows the corners. */
+export declare function inputDraw(options?: InputDrawOptions): FormEffect;

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

@@ -0,0 +1,27 @@
+import { at, defineForm, layerOf, timed, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputDraw";
+const LINE = `${layerOf(ID)} [data-sx-field-svg="line"]`;
+const CSS = `  ${at(LINE)} {
+    fill: none;
+    stroke: ${v(ID, "color")};
+    stroke-width: calc(${v(ID, "thickness")} * 1px);
+    rx: ${v(ID, "radius")};
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+    ${timed(ID, "stroke-dashoffset")}
+  }
+${whenFocused(ID, LINE, "stroke-dashoffset: 0;")}`;
+/** The outline draws itself around the field on focus (Codrops' Madoka): an SVG rectangle's dash, so it follows the corners. */
+export function inputDraw(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, "radius")]: options.radius ?? "var(--radius-sx-control)",
+            [varName(ID, "time")]: `${options.duration ?? 0.6}s`,
+        },
+        layers: [{ slot: "edge", svg: { children: [{ tag: "rect", part: "line", attrs: { width: "100%", height: "100%", pathLength: 1 } }] } }],
+    });
+}

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

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

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

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_DRAW_SCHEMA = defineSchema()({
+    id: "inputDraw",
+    family: "form",
+    factory: "inputDraw",
+    fields: {
+        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 },
+        radius: { kind: "text", label: "Corner radius", help: "The field's own corners, as CSS (`0.75rem`, `9999px`).", default: "var(--radius-sx-control)" },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 2, step: 0.1, unit: "s", default: 0.6 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface InputFlapOptions {
+    /** The flap's colour. Keep it light: the text sits on it. Default the accent at 45%. */
+    readonly color?: string;
+    /** Seconds it takes. Default `0.4`. */
+    readonly duration?: number;
+}
+/** A coloured flap swings down from the top edge on focus (Codrops' Yoko). */
+export declare function inputFlap(options?: InputFlapOptions): FormEffect;

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

@@ -0,0 +1,24 @@
+import { at, defineForm, layerOf, timed, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputFlap";
+const LAYER = layerOf(ID);
+// A panel behind the text, folded flat along the top edge (turned 90° away from the reader), swings down on focus.
+const CSS = `  ${at(LAYER)} {
+    background: ${v(ID, "color")};
+    transform-origin: 50% 0;
+    transform: perspective(30rem) rotateX(-90deg);
+    backface-visibility: hidden;
+    ${timed(ID, "transform")}
+  }
+${whenFocused(ID, LAYER, "transform: perspective(30rem) rotateX(0deg);")}`;
+/** A coloured flap swings down from the top edge on focus (Codrops' Yoko). */
+export function inputFlap(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.4}s`,
+        },
+        layers: [{ slot: "under" }],
+    });
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+import type { FormEffect } from "../../types.js";
+export interface InputFloatOptions {
+    /** How small the label gets once it moves up, 0.5 to 1. Default `0.75`. */
+    readonly scale?: number;
+    /** Seconds it takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/**
+ * The label sits in the field and moves up, smaller, on focus, once there is text, and when the browser autofills it,
+ * so it never covers the text. A placeholder shows only while the field has the focus.
+ */
+export declare function inputFloat(options?: InputFloatOptions): FormEffect;

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

@@ -0,0 +1,46 @@
+import { DIR, PAD_Y, RAISED, START, at, controlOf, defineForm, fieldOf, inField, labelOf, timed, v, varName } from "../kit.js";
+const ID = "inputFloat";
+const LABEL = labelOf(ID);
+const CONTROL = controlOf(ID);
+// Where everything sits is a state, so it holds under reduced motion too: there the label just jumps. The label rests
+// on the input's first line, at the input's size; the input makes room above its text for it.
+const STATE = `  ${at(fieldOf(ID))} {
+    --sx-field-label-size: 1em;
+  }
+  ${at(LABEL)} {
+    grid-area: box;
+    align-self: start;
+    z-index: 1;
+    margin: calc(${PAD_Y} + 0.5rem) 0 0;
+    margin-inline-start: ${START};
+    line-height: 1.5;
+    pointer-events: none;
+    transform-origin: calc(50% - 50% * ${DIR}) 0;
+  }
+  ${at(CONTROL)} {
+    padding-block: calc(${PAD_Y} + 0.5rem) calc(${PAD_Y} - 0.25rem);
+  }
+  ${at(inField(ID, ":not(:focus-within)", CONTROL))} {
+    --sx-field-placeholder: transparent;
+  }
+  ${at(inField(ID, RAISED, LABEL))} {
+    translate: 0 calc(0.3rem - ${PAD_Y} - 0.5rem);
+    scale: ${v(ID, "scale")};
+  }`;
+const CSS = `  ${at(LABEL)} {
+    ${timed(ID, "translate, scale")}
+  }`;
+/**
+ * The label sits in the field and moves up, smaller, on focus, once there is text, and when the browser autofills it,
+ * so it never covers the text. A placeholder shows only while the field has the focus.
+ */
+export function inputFloat(options = {}) {
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: {
+            [varName(ID, "scale")]: options.scale ?? 0.75,
+            [varName(ID, "time")]: `${options.duration ?? 0.2}s`,
+        },
+        claims: ["label"],
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_FLOAT_SCHEMA = defineSchema()({
+    id: "inputFloat",
+    family: "form",
+    factory: "inputFloat",
+    fields: {
+        scale: { kind: "number", label: "Raised size", min: 0.5, max: 1, 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/inputFlood.d.ts

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface InputFloodOptions {
+    /** The flood's colour. Keep it light: the text sits on it. Default the accent at 40%. */
+    readonly color?: string;
+    /** How far the circle grows: enough to cover a field this many times its own size. Default `40`. */
+    readonly scale?: number;
+    /** Seconds it takes. Default `0.5`. */
+    readonly duration?: number;
+}
+/** A circle grows out of the icon until it floods the field, on focus (Codrops' Makiko). Give the field an `icon`. */
+export declare function inputFlood(options?: InputFloodOptions): FormEffect;

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

@@ -0,0 +1,30 @@
+import { PAD_X, at, childOf, defineForm, timed, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputFlood";
+const DOT = childOf(ID, "dot");
+// A circle sits behind the icon (2rem across, centred on it) and grows until it covers the whole field: one scale,
+// inside the clip that follows the field's corners.
+const CSS = `  ${at(DOT)} {
+    position: absolute;
+    inset-block-start: calc(50% - 1rem);
+    inset-inline-start: calc(${PAD_X} + 0.625em - 1rem);
+    inline-size: 2rem;
+    block-size: 2rem;
+    border-radius: 50%;
+    background: ${v(ID, "color")};
+    scale: 0;
+    ${timed(ID, "scale")}
+  }
+${whenFocused(ID, DOT, `scale: ${v(ID, "scale")};`)}`;
+/** A circle grows out of the icon until it floods the field, on focus (Codrops' Makiko). Give the field an `icon`. */
+export function inputFlood(options = {}) {
+    return defineForm(ID, CSS, {
+        marksFocus: ringOff(ID),
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-accent) 40%, transparent)",
+            [varName(ID, "scale")]: options.scale ?? 40,
+            [varName(ID, "time")]: `${options.duration ?? 0.5}s`,
+        },
+        layers: [{ slot: "fill", children: ["dot"] }],
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_FLOOD_SCHEMA = defineSchema()({
+    id: "inputFlood",
+    family: "form",
+    factory: "inputFlood",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-accent) 40%, transparent)" },
+        scale: { kind: "number", label: "Grows to", min: 10, max: 80, step: 5, default: 40, help: "Times the circle's own size: raise it for very wide fields." },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 1.2, step: 0.05, unit: "s", default: 0.5 },
+    },
+});

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

@@ -0,0 +1,18 @@
+import type { FormEffect } from "../../types.js";
+export interface InputFrameOptions {
+    /**
+     * `"bars"`: two bars meet in the middle and slide apart to frame the field (Codrops' Haruki). `"brackets"`: the
+     * field's outline is two halves that pull apart (Codrops' Kuro). Default `"bars"`.
+     */
+    readonly kind?: "bars" | "brackets";
+    /** The lines' colour. Default the look's line for the field's state (grey at rest, the primary on focus). */
+    readonly color?: string;
+    /** Their thickness, px. Default `2`. */
+    readonly thickness?: number;
+    /** How far the halves pull apart, rem (brackets). Default `0.375`. */
+    readonly spread?: number;
+    /** Seconds it takes. Default `0.35`. */
+    readonly duration?: number;
+}
+/** Bars meet and slide apart to frame the field, or its outline's two halves pull apart, on focus. */
+export declare function inputFrame(options?: InputFrameOptions): FormEffect;

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

@@ -0,0 +1,77 @@
+import { DIR, at, childOf, defineForm, fieldOf, layerOf, timed, v, varName, whenFocused } from "../kit.js";
+import { ringOff } from "../ring.js";
+const ID = "inputFrame";
+const BARS = layerOf(ID, "bars");
+const BRACKETS = layerOf(ID, "brackets");
+const BAR_A = childOf(ID, "a", "bars");
+const BAR_B = childOf(ID, "b", "bars");
+const HALF_A = childOf(ID, "a", "brackets");
+const HALF_B = childOf(ID, "b", "brackets");
+const LINE = `calc(${v(ID, "thickness")} * 1px) solid ${v(ID, "color")}`;
+// Both kinds in one sheet, keyed on the layer's part, so fields with either share it. The brackets ARE the outline
+// (the box's own border steps aside), so they are a state: they stay under reduced motion, only their pulling apart
+// goes. The bars are pure motion: they meet at the middle (the layer is a size container, 50cqh is half the field)
+// and slide out to the edges. Only translate and scale move.
+const STATE = `  ${at(`${fieldOf(ID)}:has(${BRACKETS})`)} {
+    --sx-field-edge: transparent;
+  }
+  ${at(`${HALF_A}, ${HALF_B}`)} {
+    position: absolute;
+    inset-block: 0;
+    inline-size: 50%;
+    box-sizing: border-box;
+    border-block: ${LINE};
+  }
+  ${at(HALF_A)} {
+    inset-inline-start: 0;
+    border-inline-start: ${LINE};
+    border-start-start-radius: inherit;
+    border-end-start-radius: inherit;
+  }
+  ${at(HALF_B)} {
+    inset-inline-end: 0;
+    border-inline-end: ${LINE};
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
+  }`;
+const CSS = `  ${at(BARS)} {
+    container-type: size;
+  }
+  ${at(`${BAR_A}, ${BAR_B}`)} {
+    position: absolute;
+    inset-inline: 0;
+    block-size: calc(${v(ID, "thickness")} * 1px);
+    background: ${v(ID, "color")};
+    scale: 0 1;
+    ${timed(ID, "translate, scale")}
+  }
+  ${at(BAR_A)} {
+    inset-block-start: 0;
+    translate: 0 calc(50cqh - ${v(ID, "thickness")} * 1px);
+  }
+  ${at(BAR_B)} {
+    inset-block-end: 0;
+    translate: 0 calc(${v(ID, "thickness")} * 1px - 50cqh);
+  }
+${whenFocused(ID, BAR_A, "translate: 0 0; scale: 1 1;")}
+${whenFocused(ID, BAR_B, "translate: 0 0; scale: 1 1;")}
+  ${at(`${HALF_A}, ${HALF_B}`)} {
+    ${timed(ID, "translate")}
+  }
+${whenFocused(ID, HALF_A, `translate: calc(-1 * ${DIR} * ${v(ID, "spread")} * 1rem) 0;`)}
+${whenFocused(ID, HALF_B, `translate: calc(${DIR} * ${v(ID, "spread")} * 1rem) 0;`)}`;
+/** Bars meet and slide apart to frame the field, or its outline's two halves pull apart, on focus. */
+export function inputFrame(options = {}) {
+    const kind = options.kind ?? "bars";
+    return defineForm(ID, CSS, {
+        marksFocus: ringOff(ID),
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--sx-field-line, var(--color-sx-primary))",
+            [varName(ID, "thickness")]: options.thickness ?? 2,
+            [varName(ID, "spread")]: options.spread ?? 0.375,
+            [varName(ID, "time")]: `${options.duration ?? 0.35}s`,
+        },
+        layers: [{ slot: "edge", part: kind, children: ["a", "b"], keep: kind === "brackets" }],
+    });
+}

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

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

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

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_FRAME_SCHEMA = defineSchema()({
+    id: "inputFrame",
+    family: "form",
+    factory: "inputFrame",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["bars", "brackets"], labels: { bars: "Bars split", brackets: "Brackets pull apart" }, default: "bars" },
+        color: { kind: "color", label: "Colour", default: "var(--sx-field-line, var(--color-sx-primary))" },
+        thickness: { kind: "number", label: "Thickness", min: 1, max: 8, step: 0.5, unit: "px", default: 2 },
+        spread: { kind: "number", label: "Pull apart", min: 0.125, max: 1, step: 0.125, unit: "rem", default: 0.375, help: "Brackets only." },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.35 },
+    },
+});

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

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface InputIconOptions {
+    /** The icon's colour while the field has the focus. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** How much it grows, 1 to 1.4. Default `1.15`. */
+    readonly scale?: number;
+    /** Seconds it takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/** The field's icon (`icon` prop) takes the colour and grows a little on focus. */
+export declare function inputIcon(options?: InputIconOptions): FormEffect;

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

@@ -0,0 +1,18 @@
+import { at, defineForm, iconOf, timed, v, varName, whenFocused } from "../kit.js";
+const ID = "inputIcon";
+const ICON = iconOf(ID);
+const CSS = `  ${at(ICON)} {
+    ${timed(ID, "color, scale")}
+  }
+${whenFocused(ID, ICON, `color: ${v(ID, "color")}; scale: ${v(ID, "scale")};`)}`;
+/** The field's icon (`icon` prop) takes the colour and grows a little on focus. */
+export function inputIcon(options = {}) {
+    return defineForm(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            [varName(ID, "scale")]: options.scale ?? 1.15,
+            [varName(ID, "time")]: `${options.duration ?? 0.2}s`,
+        },
+        claims: ["icon"],
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INPUT_ICON_SCHEMA = defineSchema()({
+    id: "inputIcon",
+    family: "form",
+    factory: "inputIcon",
+    fields: {
+        color: { kind: "color", label: "Colour on focus", default: "var(--color-sx-primary)" },
+        scale: { kind: "number", label: "Grows to", min: 1, max: 1.4, step: 0.05, default: 1.15 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.6, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface InputNotchOptions {
+    /** How small the label gets on the border, 0.6 to 0.9. Default `0.75`. */
+    readonly scale?: number;
+    /** Seconds it takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/** The label floats onto the border, which opens a gap exactly its width (Material's outlined field). */
+export declare function inputNotch(options?: InputNotchOptions): FormEffect;