@sharedex/ui 0.0.0-stage → 0.10.0

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;

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;