@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/buttons/effects/border/borderStar.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface BorderStarOptions {
+    /** The stars' colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** The ring's width, px. Default `1.5`. */
+    readonly width?: number;
+    /** Seconds for one pass. Default `4`. */
+    readonly duration?: number;
+}
+/** Two soft lights glide along the top and bottom edges, in opposite directions, all the time. Use one per screen. */
+export declare function borderStar(options?: BorderStarOptions): ButtonEffect;

package/dist/buttons/effects/border/borderStar.js

@@ -0,0 +1,36 @@
+import { DIR, at, childOf, defineButton, v, varName } from "../kit.js";
+import { ringCss } from "./ring.js";
+const ID = "borderStar";
+const TOP = childOf(ID, "top");
+const BOTTOM = childOf(ID, "bottom");
+const GLIDE = "sx-btn-borderStar";
+const star = (edge, direction) => `{
+    position: absolute;
+    ${edge}: -8px;
+    inset-inline-start: 20%;
+    inline-size: 60%;
+    block-size: 16px;
+    background: radial-gradient(closest-side, ${v(ID, "color")}, transparent);
+    animation: ${GLIDE} ${v(ID, "time")} linear infinite ${direction};
+  }`;
+const CSS = `${ringCss(ID)}
+  ${at(TOP)} ${star("inset-block-start", "normal")}
+  ${at(BOTTOM)} ${star("inset-block-end", "reverse")}
+  @keyframes ${GLIDE} {
+    from { translate: calc(${DIR} * -100%) 0; opacity: 0; }
+    20% { opacity: 1; }
+    80% { opacity: 1; }
+    to { translate: calc(${DIR} * 100%) 0; opacity: 0; }
+  }`;
+/** Two soft lights glide along the top and bottom edges, in opposite directions, all the time. Use one per screen. */
+export function borderStar(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "width")]: options.width ?? 1.5,
+            [varName(ID, "time")]: `${options.duration ?? 4}s`,
+        },
+        layers: [{ slot: "edge", children: ["top", "bottom"] }],
+        needs: { inView: true },
+    });
+}

package/dist/buttons/effects/border/borderStar.schema.d.ts

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

package/dist/buttons/effects/border/borderStar.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_STAR_SCHEMA = defineSchema()({
+    id: "borderStar",
+    family: "button",
+    factory: "borderStar",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        width: { kind: "number", label: "Ring width", min: 1, max: 6, step: 0.5, unit: "px", default: 1.5 },
+        duration: { kind: "number", label: "Pass time", min: 1, max: 12, step: 0.5, unit: "s", default: 4 },
+    },
+});

package/dist/buttons/effects/border/borderUnderline.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonEffect } from "../../types.js";
+export interface BorderUnderlineOptions {
+    /** The line's colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** Its thickness, px. Default `2`. */
+    readonly thickness?: number;
+    /** Where it grows from, in reading direction. Default `"start"`. */
+    readonly from?: "start" | "center" | "end";
+    /** Seconds it takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** A line grows along the bottom edge. Best on text buttons and nav links (`variant="ghost"`). */
+export declare function borderUnderline(options?: BorderUnderlineOptions): ButtonEffect;

package/dist/buttons/effects/border/borderUnderline.js

@@ -0,0 +1,26 @@
+import { DIR, at, defineButton, layerOf, timed, v, varName, whenOn } from "../kit.js";
+const ID = "borderUnderline";
+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: calc(50% + ${DIR} * (${v(ID, "from")} - 0.5) * 100%) 50%;
+    ${timed(ID, "scale")}
+  }
+${whenOn(ID, LAYER, "scale: 1 1;")}`;
+/** A line grows along the bottom edge. Best on text buttons and nav links (`variant="ghost"`). */
+export function borderUnderline(options = {}) {
+    const from = options.from ?? "start";
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "thickness")]: options.thickness ?? 2,
+            [varName(ID, "from")]: from === "start" ? 0 : from === "end" ? 1 : 0.5,
+            [varName(ID, "time")]: `${options.duration ?? 0.3}s`,
+        },
+        layers: [{ slot: "edge" }],
+    });
+}

package/dist/buttons/effects/border/borderUnderline.schema.d.ts

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

package/dist/buttons/effects/border/borderUnderline.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_UNDERLINE_SCHEMA = defineSchema()({
+    id: "borderUnderline",
+    family: "button",
+    factory: "borderUnderline",
+    fields: {
+        from: { kind: "choice", label: "Grows from", values: ["start", "center", "end"], labels: { start: "Reading start", center: "Centre", end: "Reading end" }, default: "start" },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        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/buttons/effects/border/ring.d.ts

@@ -0,0 +1,4 @@
+/** The layer as a ring, `width` var wide. Cq units inside it measure the button. */
+export declare function ringCss(id: string, layerPart?: string): string;
+/** A square wider than the button's diagonal, centred, turning: it covers the ring at every angle. */
+export declare function spinnerCss(id: string, part: string, background: string, keyframes: string, layerPart?: string): string;

package/dist/buttons/effects/border/ring.js

@@ -0,0 +1,29 @@
+// A ring: a layer whose middle is masked away, so what moves inside it shows only along the button's edge. The mask
+// follows the corners. What moves is a child, turned or slid with `rotate` / `translate`, so the browser's compositor
+// runs it and nothing repaints.
+import { at, childOf, layerOf, v } from "../kit.js";
+/** The layer as a ring, `width` var wide. Cq units inside it measure the button. */
+export function ringCss(id, layerPart) {
+    return `  ${at(layerOf(id, layerPart))} {
+    box-sizing: border-box;
+    padding: calc(${v(id, "width")} * 1px);
+    overflow: hidden;
+    container-type: size;
+    mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
+    mask-composite: exclude;
+    -webkit-mask-composite: xor;
+  }`;
+}
+/** A square wider than the button's diagonal, centred, turning: it covers the ring at every angle. */
+export function spinnerCss(id, part, background, keyframes, layerPart) {
+    return `  ${at(childOf(id, part, layerPart))} {
+    position: absolute;
+    inset: calc(50cqh - 75cqmax) calc(50cqw - 75cqmax);
+    background: ${background};
+    animation: ${keyframes} ${v(id, "time")} linear infinite;
+    animation-play-state: ${v(id, "rest")};
+  }
+  @keyframes ${keyframes} {
+    to { rotate: 360deg; }
+  }`;
+}

package/dist/buttons/effects/cursor/cursorBlob.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonEffect } from "../../types.js";
+export interface CursorBlobOptions {
+    /** The blob's colour. It sits under the label, so keep it see-through. Default the accent colour, half see-through. */
+    readonly color?: string;
+    /** Its size, px. Default `56`. */
+    readonly size?: number;
+    /** Seconds it lags behind the pointer. Default `0.18`. */
+    readonly lag?: number;
+    /** Seconds it takes to appear. Default `0.25`. */
+    readonly duration?: number;
+}
+/** A soft circle inside the button follows the pointer, a little behind. Needs a mouse; from the keyboard it sits in the middle. */
+export declare function cursorBlob(options?: CursorBlobOptions): ButtonEffect;

package/dist/buttons/effects/cursor/cursorBlob.js

@@ -0,0 +1,30 @@
+import { at, defineButton, layerOf, v, varName, whenOn } from "../kit.js";
+const ID = "cursorBlob";
+const LAYER = layerOf(ID);
+const SIZE = `calc(${v(ID, "size")} * 1px)`;
+const HALF = `calc(${v(ID, "size")} * 0.5px)`;
+// a physical corner and physical numbers: the pointer is where it is, also in a right-to-left page
+const CSS = `  ${at(LAYER)} {
+    inset: 0 auto auto 0;
+    inline-size: ${SIZE};
+    block-size: ${SIZE};
+    border-radius: 50%;
+    background: radial-gradient(closest-side, ${v(ID, "color")} 70%, transparent);
+    translate: calc(var(--sx-btn-x, 50cqw) - ${HALF}) calc(var(--sx-btn-y, 50cqh) - ${HALF});
+    scale: 0;
+    transition: translate ${v(ID, "lag")} ease-out, scale ${v(ID, "time")} var(--ease-sx-out, ease-out);
+  }
+${whenOn(ID, LAYER, "scale: 1;")}`;
+/** A soft circle inside the button follows the pointer, a little behind. Needs a mouse; from the keyboard it sits in the middle. */
+export function cursorBlob(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-accent) 50%, transparent)",
+            [varName(ID, "size")]: options.size ?? 56,
+            [varName(ID, "lag")]: `${options.lag ?? 0.18}s`,
+            [varName(ID, "time")]: `${options.duration ?? 0.25}s`,
+        },
+        layers: [{ slot: "fill" }],
+        needs: { pointer: true },
+    });
+}

package/dist/buttons/effects/cursor/cursorBlob.schema.d.ts

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

package/dist/buttons/effects/cursor/cursorBlob.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CURSOR_BLOB_SCHEMA = defineSchema()({
+    id: "cursorBlob",
+    family: "button",
+    factory: "cursorBlob",
+    fields: {
+        color: { kind: "color", label: "Colour", help: "It sits under the label, so keep it see-through.", default: "color-mix(in oklab, var(--color-sx-accent) 50%, transparent)" },
+        size: { kind: "number", label: "Size", min: 16, max: 160, step: 2, unit: "px", default: 56 },
+        lag: { kind: "number", label: "Lag", min: 0, max: 0.6, step: 0.02, unit: "s", help: "How far it trails behind the pointer.", default: 0.18 },
+        duration: { kind: "number", label: "Appear time", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

package/dist/buttons/effects/cursor/cursorMagnet.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface CursorMagnetOptions {
+    /** How much of the pointer's distance from the centre the button follows, 0 to 1. Default `0.25`. */
+    readonly strength?: number;
+    /** How much further the label follows, 0 to 1, for a sense of depth. `0` keeps it with the button. Default `0`. */
+    readonly labelShift?: number;
+    /** Seconds it takes to spring back. Default `0.6`. */
+    readonly duration?: number;
+}
+/** The button leans towards the pointer and springs back when it leaves. Only the visible part moves. Needs a mouse. */
+export declare function cursorMagnet(options?: CursorMagnetOptions): ButtonEffect;

package/dist/buttons/effects/cursor/cursorMagnet.js

@@ -0,0 +1,25 @@
+import { SPRING, at, bodyOf, defineButton, labelOf, v, varName, whenOn } from "../kit.js";
+const ID = "cursorMagnet";
+const BODY = bodyOf(ID);
+const LABEL = labelOf(ID);
+const pull = (amount) => `translate: calc(var(--sx-btn-cx, 0px) * ${amount}) calc(var(--sx-btn-cy, 0px) * ${amount});`;
+const FOLLOW = "transition: translate 0.12s ease-out;";
+const BACK = `transition: translate ${v(ID, "time")} ${SPRING};`;
+const CSS = `  ${at(BODY)} { ${BACK} }
+  ${at(LABEL)} { ${BACK} }
+${whenOn(ID, BODY, `${pull(v(ID, "strength"))} ${FOLLOW}`)}
+${whenOn(ID, LABEL, `${pull(v(ID, "label"))} ${FOLLOW}`)}`;
+/** The button leans towards the pointer and springs back when it leaves. Only the visible part moves. Needs a mouse. */
+export function cursorMagnet(options = {}) {
+    const labelShift = options.labelShift ?? 0;
+    const claims = labelShift > 0 ? ["move", "label"] : ["move"];
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "strength")]: options.strength ?? 0.25,
+            [varName(ID, "label")]: labelShift,
+            [varName(ID, "time")]: `${options.duration ?? 0.6}s`,
+        },
+        claims,
+        needs: { pointer: true },
+    });
+}

package/dist/buttons/effects/cursor/cursorMagnet.schema.d.ts

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

package/dist/buttons/effects/cursor/cursorMagnet.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CURSOR_MAGNET_SCHEMA = defineSchema()({
+    id: "cursorMagnet",
+    family: "button",
+    factory: "cursorMagnet",
+    fields: {
+        strength: { kind: "number", label: "Pull", min: 0.05, max: 0.8, step: 0.05, default: 0.25 },
+        labelShift: { kind: "number", label: "Label depth", min: 0, max: 0.5, step: 0.05, help: "How much further the label follows.", default: 0 },
+        duration: { kind: "number", label: "Spring time", min: 0.2, max: 1.5, step: 0.05, unit: "s", default: 0.6 },
+    },
+});

package/dist/buttons/effects/depth/depthCube.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface DepthCubeOptions {
+    /** The words on the next face of the box. Default the button's own label. */
+    readonly to?: string;
+    /** How close the viewer stands, px. Default `300`. */
+    readonly perspective?: number;
+    /** Seconds it takes. Default `0.4`. */
+    readonly duration?: number;
+}
+/** The label sits on a 3D box that rolls a quarter turn to show the next face. The button itself stays still. */
+export declare function depthCube(options?: DepthCubeOptions): ButtonEffect;

package/dist/buttons/effects/depth/depthCube.js

@@ -0,0 +1,32 @@
+import { at, defineButton, labelOf, layerOf, timed, v, varName, whenOn } from "../kit.js";
+const ID = "depthCube";
+const LABEL = labelOf(ID);
+const NEXT = layerOf(ID);
+/** A face of a box one line tall, turned to `deg`. The box turns around its middle, so the front face keeps its size. */
+const face = (deg) => `transform: perspective(calc(${v(ID, "perspective")} * 1px)) translateZ(-0.6lh) rotateX(${deg}deg) translateZ(0.6lh);`;
+// each face turns on its own, with no shared 3D parent: nothing else on the button has to stay flat for it
+const CSS = `  ${at(LABEL)} {
+    backface-visibility: hidden;
+    ${face(0)}
+    ${timed(ID, "transform")}
+  }
+  ${at(NEXT)} {
+    display: grid;
+    place-items: center;
+    backface-visibility: hidden;
+    ${face(-90)}
+    ${timed(ID, "transform")}
+  }
+${whenOn(ID, LABEL, face(90))}
+${whenOn(ID, NEXT, face(0))}`;
+/** The label sits on a 3D box that rolls a quarter turn to show the next face. The button itself stays still. */
+export function depthCube(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "perspective")]: options.perspective ?? 300,
+            [varName(ID, "time")]: `${options.duration ?? 0.4}s`,
+        },
+        layers: [options.to ? { slot: "edge", text: options.to } : { slot: "edge", copy: true }],
+        claims: ["label"],
+    });
+}

package/dist/buttons/effects/depth/depthCube.schema.d.ts

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

package/dist/buttons/effects/depth/depthCube.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DEPTH_CUBE_SCHEMA = defineSchema()({
+    id: "depthCube",
+    family: "button",
+    factory: "depthCube",
+    fields: {
+        to: { kind: "text", label: "Words on the next face", autoNote: "the button's own label", placeholder: "Let's go" },
+        perspective: { kind: "number", label: "Perspective", min: 100, max: 1000, step: 50, unit: "px", advanced: true, default: 300 },
+        duration: { kind: "number", label: "Duration", min: 0.15, max: 1, step: 0.05, unit: "s", default: 0.4 },
+    },
+});

package/dist/buttons/effects/depth/depthFlip.d.ts

@@ -0,0 +1,17 @@
+import type { ButtonEffect } from "../../types.js";
+export interface DepthFlipOptions {
+    /** The words on the back: another label, a price. Default the button's own label. */
+    readonly back?: string;
+    /** The back's colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** The back's text colour. Default `var(--color-sx-ink)`. */
+    readonly textColor?: string;
+    /** The back's corner radius. It can't read the face's. Default `var(--radius-sx-control)`. */
+    readonly radius?: string;
+    /** How close the viewer stands, px. Smaller looks more dramatic. Default `600`. */
+    readonly perspective?: number;
+    /** Seconds it takes. Default `0.5`. */
+    readonly duration?: number;
+}
+/** The button flips over around its long axis; the back can say something else. */
+export declare function depthFlip(options?: DepthFlipOptions): ButtonEffect;

package/dist/buttons/effects/depth/depthFlip.js

@@ -0,0 +1,42 @@
+import { at, bodyOf, defineButton, faceOf, hitOf, layerOf, timed, v, varName, whenOn } from "../kit.js";
+const ID = "depthFlip";
+const BODY = bodyOf(ID);
+const BACK = layerOf(ID);
+const turn = (deg) => `transform: perspective(calc(${v(ID, "perspective")} * 1px)) rotateX(${deg}deg);`;
+// The back sits beside the face inside the body, each with its back turned away. The body's isolation would flatten
+// the 3D, and preserve-3d makes its own stacking context anyway. The ring goes on the back too: keyboard focus flips it.
+const CSS = `  ${at(BODY)} {
+    isolation: auto;
+    transform-style: preserve-3d;
+    ${turn(0)}
+    ${timed(ID, "transform")}
+  }
+  ${at(faceOf(ID))} { backface-visibility: hidden; }
+  ${at(BACK)} {
+    display: grid;
+    place-items: center;
+    border-radius: ${v(ID, "radius")};
+    background: ${v(ID, "color")};
+    color: ${v(ID, "text")};
+    backface-visibility: hidden;
+    transform: rotateX(180deg);
+  }
+  ${at(`${hitOf(ID)}:focus-visible ${BACK}`)} {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+${whenOn(ID, BODY, turn(180))}`;
+/** The button flips over around its long axis; the back can say something else. */
+export function depthFlip(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "text")]: options.textColor ?? "var(--color-sx-ink)",
+            [varName(ID, "radius")]: options.radius ?? "var(--radius-sx-control)",
+            [varName(ID, "perspective")]: options.perspective ?? 600,
+            [varName(ID, "time")]: `${options.duration ?? 0.5}s`,
+        },
+        layers: [options.back ? { slot: "body", text: options.back } : { slot: "body", copy: true }],
+        claims: ["turn"],
+    });
+}

package/dist/buttons/effects/depth/depthFlip.schema.d.ts

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

package/dist/buttons/effects/depth/depthFlip.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DEPTH_FLIP_SCHEMA = defineSchema()({
+    id: "depthFlip",
+    family: "button",
+    factory: "depthFlip",
+    fields: {
+        back: { kind: "text", label: "Words on the back", autoNote: "the button's own label", placeholder: "From 9 €" },
+        color: { kind: "color", label: "Back colour", default: "var(--color-sx-accent)" },
+        textColor: { kind: "color", label: "Back text colour", default: "var(--color-sx-ink)" },
+        radius: { kind: "text", label: "Back corner radius", help: "Match the button's corners: a CSS length or a token.", default: "var(--radius-sx-control)" },
+        perspective: { kind: "number", label: "Perspective", min: 200, max: 1500, step: 50, unit: "px", advanced: true, default: 600 },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 1.5, step: 0.05, unit: "s", default: 0.5 },
+    },
+});

package/dist/buttons/effects/depth/depthFloat.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface DepthFloatOptions {
+    /** `"float"` rises, `"sink"` drops. `"bob"` and `"hang"` do the same, then keep moving while hovered. Default `"float"`. */
+    readonly kind?: "float" | "sink" | "bob" | "hang";
+    /** How far it moves, px. Default `6`. */
+    readonly distance?: number;
+    /** Seconds it takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** The button rises or drops under the pointer; `bob` and `hang` keep moving while it stays there. */
+export declare function depthFloat(options?: DepthFloatOptions): ButtonEffect;

package/dist/buttons/effects/depth/depthFloat.js

@@ -0,0 +1,24 @@
+import { at, bodyOf, defineButton, timed, v, varName, whenOn } from "../kit.js";
+const ID = "depthFloat";
+const BODY = bodyOf(ID);
+const SWAY = "sx-btn-depthFloat";
+const TO = `calc(${v(ID, "to")} * 1px)`;
+const CSS = `  ${at(BODY)} { ${timed(ID, "translate")} }
+${whenOn(ID, BODY, `translate: 0 ${TO}; animation: ${v(ID, "name")} calc(${v(ID, "time")} * 4) ease-in-out infinite;`)}
+  @keyframes ${SWAY} {
+    0%, 100% { translate: 0 ${TO}; }
+    50% { translate: 0 calc(${v(ID, "to")} * 0.5px); }
+  }`;
+/** The button rises or drops under the pointer; `bob` and `hang` keep moving while it stays there. */
+export function depthFloat(options = {}) {
+    const kind = options.kind ?? "float";
+    const distance = options.distance ?? 6;
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "to")]: kind === "float" || kind === "bob" ? -distance : distance,
+            [varName(ID, "name")]: kind === "bob" || kind === "hang" ? SWAY : "none",
+            [varName(ID, "time")]: `${options.duration ?? 0.3}s`,
+        },
+        claims: ["move"],
+    });
+}

package/dist/buttons/effects/depth/depthFloat.schema.d.ts

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

package/dist/buttons/effects/depth/depthFloat.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DEPTH_FLOAT_SCHEMA = defineSchema()({
+    id: "depthFloat",
+    family: "button",
+    factory: "depthFloat",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["float", "sink", "bob", "hang"], labels: { float: "Float up", sink: "Sink down", bob: "Bob above", hang: "Hang below" }, default: "float" },
+        distance: { kind: "number", label: "Distance", min: 1, max: 16, step: 1, unit: "px", default: 6 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

package/dist/buttons/effects/depth/depthGrow.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface DepthGrowOptions {
+    /** `"grow"` / `"shrink"`: it changes size and stays. `"pop"`: it bumps once. `"pulse"`: it beats while hovered. Default `"grow"`. */
+    readonly kind?: "grow" | "shrink" | "pop" | "pulse";
+    /** How large it gets. `shrink` goes as far the other way. Default `1.06`. */
+    readonly amount?: number;
+    /** Seconds it takes. A pulse's beat is three times this. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The button grows, shrinks, pops or pulses under the pointer. */
+export declare function depthGrow(options?: DepthGrowOptions): ButtonEffect;

package/dist/buttons/effects/depth/depthGrow.js

@@ -0,0 +1,30 @@
+import { at, bodyOf, defineButton, timed, v, varName, whenOn } from "../kit.js";
+const ID = "depthGrow";
+const BODY = bodyOf(ID);
+const POP = "sx-btn-depthGrow-pop";
+const PULSE = "sx-btn-depthGrow-pulse";
+const AMOUNT = v(ID, "amount");
+const CSS = `  ${at(BODY)} { ${timed(ID, "scale")} }
+${whenOn(ID, BODY, `scale: ${v(ID, "to")}; animation: ${v(ID, "name")} ${v(ID, "time")} ease-out ${v(ID, "count")};`)}
+  @keyframes ${POP} {
+    50% { scale: calc(${AMOUNT} + (${AMOUNT} - 1)); }
+  }
+  @keyframes ${PULSE} {
+    50% { scale: ${AMOUNT}; }
+  }`;
+/** The button grows, shrinks, pops or pulses under the pointer. */
+export function depthGrow(options = {}) {
+    const kind = options.kind ?? "grow";
+    const amount = options.amount ?? 1.06;
+    const duration = options.duration ?? 0.25;
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "amount")]: amount,
+            [varName(ID, "to")]: kind === "grow" ? amount : kind === "shrink" ? Math.round((2 - amount) * 1000) / 1000 : 1,
+            [varName(ID, "name")]: kind === "pop" ? POP : kind === "pulse" ? PULSE : "none",
+            [varName(ID, "count")]: kind === "pulse" ? "infinite" : 1,
+            [varName(ID, "time")]: `${kind === "pulse" ? duration * 3 : duration}s`,
+        },
+        claims: ["grow"],
+    });
+}

package/dist/buttons/effects/depth/depthGrow.schema.d.ts

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

package/dist/buttons/effects/depth/depthGrow.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DEPTH_GROW_SCHEMA = defineSchema()({
+    id: "depthGrow",
+    family: "button",
+    factory: "depthGrow",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["grow", "shrink", "pop", "pulse"], labels: { grow: "Grow", shrink: "Shrink", pop: "Pop once", pulse: "Pulse while hovered" }, default: "grow" },
+        amount: { kind: "number", label: "Amount", min: 1.01, max: 1.2, step: 0.01, default: 1.06 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

package/dist/buttons/effects/depth/depthJiggle.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface DepthJiggleOptions {
+    /** `"skew"` leans and stays. `"wobble"` rocks once. `"buzz"` trembles while hovered. Default `"wobble"`. */
+    readonly kind?: "skew" | "wobble" | "buzz";
+    /** How strong, degrees. Default `6`. */
+    readonly amount?: number;
+    /** Seconds it takes. Keep it short: too much wobble looks cheap. Default `0.5`. */
+    readonly duration?: number;
+}
+/** The button leans, rocks or trembles. Playful; keep it short. */
+export declare function depthJiggle(options?: DepthJiggleOptions): ButtonEffect;

package/dist/buttons/effects/depth/depthJiggle.js

@@ -0,0 +1,36 @@
+import { DIR, at, bodyOf, defineButton, timed, v, varName, whenOn } from "../kit.js";
+const ID = "depthJiggle";
+const BODY = bodyOf(ID);
+const WOBBLE = "sx-btn-depthJiggle-wobble";
+const BUZZ = "sx-btn-depthJiggle-buzz";
+const A = v(ID, "amount");
+const skew = (share) => `transform: skewX(calc(${DIR} * ${A} * ${share}deg));`;
+const CSS = `  ${at(BODY)} { ${timed(ID, "transform")} }
+${whenOn(ID, BODY, `transform: skewX(calc(${DIR} * ${A} * ${v(ID, "lean")} * -1deg)); animation: ${v(ID, "name")} ${v(ID, "time")} ease-in-out ${v(ID, "count")};`)}
+  @keyframes ${WOBBLE} {
+    16% { ${skew(-1)} }
+    33% { ${skew(0.7)} }
+    50% { ${skew(-0.4)} }
+    66% { ${skew(0.2)} }
+    83% { ${skew(-0.1)} }
+    100% { transform: none; }
+  }
+  @keyframes ${BUZZ} {
+    25% { transform: translateX(1px) rotate(calc(${A} * 0.15deg)); }
+    75% { transform: translateX(-1px) rotate(calc(${A} * -0.15deg)); }
+  }`;
+/** The button leans, rocks or trembles. Playful; keep it short. */
+export function depthJiggle(options = {}) {
+    const kind = options.kind ?? "wobble";
+    const duration = options.duration ?? 0.5;
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "amount")]: options.amount ?? 6,
+            [varName(ID, "lean")]: kind === "skew" ? 1 : 0,
+            [varName(ID, "name")]: kind === "wobble" ? WOBBLE : kind === "buzz" ? BUZZ : "none",
+            [varName(ID, "count")]: kind === "buzz" ? "infinite" : 1,
+            [varName(ID, "time")]: `${kind === "buzz" ? duration / 3 : duration}s`,
+        },
+        claims: ["turn"],
+    });
+}

package/dist/buttons/effects/depth/depthJiggle.schema.d.ts

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

package/dist/buttons/effects/depth/depthJiggle.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DEPTH_JIGGLE_SCHEMA = defineSchema()({
+    id: "depthJiggle",
+    family: "button",
+    factory: "depthJiggle",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["skew", "wobble", "buzz"], labels: { skew: "Lean", wobble: "Rock once", buzz: "Tremble while hovered" }, default: "wobble" },
+        amount: { kind: "number", label: "Strength", min: 1, max: 20, step: 1, unit: "°", default: 6 },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 1.5, step: 0.05, unit: "s", default: 0.5 },
+    },
+});

package/dist/buttons/effects/depth/depthNeumorph.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonEffect } from "../../types.js";
+export interface DepthNeumorphOptions {
+    /** The surface: match what the button sits on. Default `var(--color-sx-secondary)`. */
+    readonly surface?: string;
+    /** The label's colour. Check its contrast: this look is low-contrast by nature. Default `var(--color-sx-ink)`. */
+    readonly textColor?: string;
+    /** How far the shadows reach, px. Default `6`. */
+    readonly depth?: number;
+    /** Seconds to come back up. Default `0.15`. */
+    readonly duration?: number;
+}
+/** Soft shadows lift the button out of its surface; a press sinks it in. */
+export declare function depthNeumorph(options?: DepthNeumorphOptions): ButtonEffect;