@sharedex/ui 0.0.0-stage → 0.10.0

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

@@ -0,0 +1,42 @@
+import { at, defineButton, hitOf, labelOf, layerOf, timed, v, varName, whenPressed } from "../kit.js";
+const ID = "depthNeumorph";
+const SURFACE = layerOf(ID, "surface");
+const RAISED = layerOf(ID, "raised");
+const SUNK = layerOf(ID, "sunk");
+const D = v(ID, "depth");
+const DARK = `color-mix(in oklab, ${v(ID, "surface")} 82%, black)`;
+const LIGHT = `color-mix(in oklab, ${v(ID, "surface")} 82%, white)`;
+const shadows = (inset) => `box-shadow: ${inset} calc(${D} * 1px) calc(${D} * 1px) calc(${D} * 2px) ${DARK}, ${inset} calc(${D} * -1px) calc(${D} * -1px) calc(${D} * 2px) ${LIGHT};`;
+const PRESS = "transition: opacity 60ms ease-out;";
+// Both sets of shadows exist all the time, each on its own layer: pressing only swaps which layer shows.
+const CSS = `  ${at(hitOf(ID))} { --sx-btn-pressScale-scale: 1; }
+  ${at(SURFACE)} { background: ${v(ID, "surface")}; }
+  ${at(labelOf(ID))} { color: ${v(ID, "text")}; }
+  ${at(RAISED)} {
+    ${shadows("")}
+    ${timed(ID, "opacity")}
+  }
+  ${at(SUNK)} {
+    ${shadows("inset")}
+    opacity: 0;
+    ${timed(ID, "opacity")}
+  }
+${whenPressed(ID, RAISED, `opacity: 0; ${PRESS}`)}
+${whenPressed(ID, SUNK, `opacity: 1; ${PRESS}`)}`;
+/** Soft shadows lift the button out of its surface; a press sinks it in. */
+export function depthNeumorph(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "surface")]: options.surface ?? "var(--color-sx-secondary)",
+            [varName(ID, "text")]: options.textColor ?? "var(--color-sx-ink)",
+            [varName(ID, "depth")]: options.depth ?? 6,
+            [varName(ID, "time")]: `${options.duration ?? 0.15}s`,
+        },
+        layers: [
+            { slot: "under", part: "raised" },
+            { slot: "fill", part: "surface" },
+            { slot: "edge", part: "sunk" },
+        ],
+        claims: ["press"],
+    });
+}

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

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

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

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DEPTH_NEUMORPH_SCHEMA = defineSchema()({
+    id: "depthNeumorph",
+    family: "button",
+    factory: "depthNeumorph",
+    fields: {
+        surface: { kind: "color", label: "Surface", help: "Match what the button sits on.", default: "var(--color-sx-secondary)" },
+        textColor: { kind: "color", label: "Label colour", help: "Check its contrast: this look is low-contrast by nature.", default: "var(--color-sx-ink)" },
+        depth: { kind: "number", label: "Depth", min: 2, max: 16, step: 1, unit: "px", default: 6 },
+        duration: { kind: "number", label: "Duration", min: 0.05, max: 0.6, step: 0.05, unit: "s", default: 0.15 },
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { ButtonEffect } from "../../types.js";
+export interface DepthPushableOptions {
+    /** The colour of the block's side. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** How tall the block is, px. Default `6`. */
+    readonly height?: number;
+    /** How far it rises on hover, px. Default `2`. */
+    readonly lift?: number;
+    /** Seconds the hover takes to spring back. Default `0.4`. */
+    readonly duration?: number;
+}
+/** A 3D block: the front rises on hover with a spring and sinks into its side under a press. */
+export declare function depthPushable(options?: DepthPushableOptions): ButtonEffect;

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

@@ -0,0 +1,50 @@
+import { SPRING, at, bodyOf, defineButton, hitOf, layerOf, v, varName, whenOn, whenPressed } from "../kit.js";
+const ID = "depthPushable";
+const BODY = bodyOf(ID);
+const SIDE = layerOf(ID, "side");
+const SHADOW = layerOf(ID, "shadow");
+const H = v(ID, "height");
+const LIFT = v(ID, "lift");
+const MOVE = `transition: translate ${v(ID, "time")} ${SPRING};`;
+/** Fast on the way down (atlas rule 2), the spring on the way back. */
+const PRESS = "transition: translate 34ms ease-out;";
+// The side and the shadow sit inside the part that moves, so each moves the opposite way to stay on the ground. The
+// press lands on this effect's own travel, so the default shrink is off. The margin keeps the block's side in the layout.
+const CSS = `  ${at(hitOf(ID))} {
+    --sx-btn-pressScale-scale: 1;
+    margin-block-end: calc(${H} * 1px);
+  }
+  ${at(BODY)} { ${MOVE} }
+  ${at(SIDE)} {
+    background: ${v(ID, "color")};
+    translate: 0 calc(${H} * 1px);
+    ${MOVE}
+  }
+  ${at(SHADOW)} {
+    background: color-mix(in oklab, var(--color-sx-ink) 25%, transparent);
+    filter: blur(4px);
+    translate: 0 calc(${H} * 1.6px);
+    ${MOVE}
+  }
+${whenOn(ID, BODY, `translate: 0 calc(${LIFT} * -1px);`)}
+${whenOn(ID, SIDE, `translate: 0 calc((${H} + ${LIFT}) * 1px);`)}
+${whenOn(ID, SHADOW, `translate: 0 calc((${H} * 1.6 + ${LIFT}) * 1px);`)}
+${whenPressed(ID, BODY, `translate: 0 calc(${H} * 1px); ${PRESS}`)}
+${whenPressed(ID, SIDE, `translate: 0 0; ${PRESS}`)}
+${whenPressed(ID, SHADOW, `translate: 0 calc(${H} * 0.6px); ${PRESS}`)}`;
+/** A 3D block: the front rises on hover with a spring and sinks into its side under a press. */
+export function depthPushable(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "height")]: options.height ?? 6,
+            [varName(ID, "lift")]: options.lift ?? 2,
+            [varName(ID, "time")]: `${options.duration ?? 0.4}s`,
+        },
+        layers: [
+            { slot: "under", part: "shadow" },
+            { slot: "under", part: "side" },
+        ],
+        claims: ["press", "move"],
+    });
+}

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

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

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

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DEPTH_PUSHABLE_SCHEMA = defineSchema()({
+    id: "depthPushable",
+    family: "button",
+    factory: "depthPushable",
+    fields: {
+        color: { kind: "color", label: "Side colour", default: "var(--color-sx-accent)" },
+        height: { kind: "number", label: "Block height", min: 2, max: 16, step: 1, unit: "px", default: 6 },
+        lift: { kind: "number", label: "Hover lift", min: 0, max: 8, step: 1, unit: "px", default: 2 },
+        duration: { kind: "number", label: "Spring time", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.4 },
+    },
+});

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

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface DepthTiltOptions {
+    /** The most it leans, degrees. Default `12`. */
+    readonly max?: number;
+    /** How close the viewer stands, px. Smaller looks more dramatic. Default `500`. */
+    readonly perspective?: number;
+    /** Seconds it takes to settle back. Default `0.4`. */
+    readonly duration?: number;
+}
+/** The button leans towards the pointer in 3D. Only the visible part moves. Needs a mouse. */
+export declare function depthTilt(options?: DepthTiltOptions): ButtonEffect;

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

@@ -0,0 +1,22 @@
+import { at, bodyOf, defineButton, timed, v, varName, whenOn } from "../kit.js";
+const ID = "depthTilt";
+const BODY = bodyOf(ID);
+const MAX = v(ID, "max");
+const P = `perspective(calc(${v(ID, "perspective")} * 1px))`;
+const CSS = `  ${at(BODY)} {
+    transform: ${P} rotateX(0deg) rotateY(0deg);
+    ${timed(ID, "transform")}
+  }
+${whenOn(ID, BODY, `transform: ${P} rotateX(calc(var(--sx-btn-dy, 0) * ${MAX} * -1deg)) rotateY(calc(var(--sx-btn-dx, 0) * ${MAX} * 1deg)); transition: transform 0.1s ease-out;`)}`;
+/** The button leans towards the pointer in 3D. Only the visible part moves. Needs a mouse. */
+export function depthTilt(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "max")]: options.max ?? 12,
+            [varName(ID, "perspective")]: options.perspective ?? 500,
+            [varName(ID, "time")]: `${options.duration ?? 0.4}s`,
+        },
+        claims: ["turn"],
+        needs: { pointer: true },
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DEPTH_TILT_SCHEMA = defineSchema()({
+    id: "depthTilt",
+    family: "button",
+    factory: "depthTilt",
+    fields: {
+        max: { kind: "number", label: "Most it leans", min: 2, max: 30, step: 1, unit: "°", default: 12 },
+        perspective: { kind: "number", label: "Perspective", min: 200, max: 1500, step: 50, unit: "px", advanced: true, default: 500 },
+        duration: { kind: "number", label: "Settle time", min: 0.1, max: 1.5, step: 0.05, unit: "s", default: 0.4 },
+    },
+});

package/dist/buttons/effects/fill/fillDirectional.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonEffect } from "../../types.js";
+import { type FillOptions } from "./kit.js";
+export type FillDirectionalOptions = FillOptions;
+/** The colour slides in from the edge the pointer came through, and out by the edge it left by. Needs a mouse. */
+export declare function fillDirectional(options?: FillDirectionalOptions): ButtonEffect;

package/dist/buttons/effects/fill/fillDirectional.js

@@ -0,0 +1,21 @@
+import { at, defineButton, layerOf, v, whenOn } from "../kit.js";
+import { fillTransition, fillVars, labelFollows } from "./kit.js";
+const ID = "fillDirectional";
+const LAYER = layerOf(ID);
+// --sx-btn-sx / -sy come from the runtime, physical like the pointer: 0 and 1 mean "below" before the first hover and
+// without a mouse. Hover moves the layer on; while data-sx-btn-jump is set it waits on the entry side with no transition.
+const CSS = `  ${at(LAYER)} {
+    background: ${v(ID, "color")};
+    translate: calc(var(--sx-btn-sx, 0) * 101%) calc(var(--sx-btn-sy, 1) * 101%);
+    ${fillTransition(ID, "translate")}
+  }
+${whenOn(ID, LAYER, "translate: 0 0;")}
+  ${at(`[data-sx-btn~="${ID}"][data-sx-btn-jump] ${LAYER}`)} {
+    translate: calc(var(--sx-btn-sx, 0) * 101%) calc(var(--sx-btn-sy, 1) * 101%);
+    transition: none;
+  }
+${labelFollows(ID)}`;
+/** The colour slides in from the edge the pointer came through, and out by the edge it left by. Needs a mouse. */
+export function fillDirectional(options = {}) {
+    return defineButton(ID, CSS, { vars: fillVars(ID, options), layers: [{ slot: "fill" }], needs: { pointer: true } });
+}

package/dist/buttons/effects/fill/fillDirectional.schema.d.ts

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

package/dist/buttons/effects/fill/fillDirectional.schema.js

@@ -0,0 +1,8 @@
+import { buttonFillFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const FILL_DIRECTIONAL_SCHEMA = defineSchema()({
+    id: "fillDirectional",
+    family: "button",
+    factory: "fillDirectional",
+    fields: buttonFillFields(),
+});

package/dist/buttons/effects/fill/fillFade.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonEffect } from "../../types.js";
+import { type FillOptions } from "./kit.js";
+export type FillFadeOptions = FillOptions;
+/** A second colour fades in over the button: a layer's opacity, not `background-color`, so it never repaints. */
+export declare function fillFade(options?: FillFadeOptions): ButtonEffect;

package/dist/buttons/effects/fill/fillFade.js

@@ -0,0 +1,15 @@
+import { at, defineButton, layerOf, v, whenOn } from "../kit.js";
+import { fillTransition, fillVars, labelFollows } from "./kit.js";
+const ID = "fillFade";
+const LAYER = layerOf(ID);
+const CSS = `  ${at(LAYER)} {
+    background: ${v(ID, "color")};
+    opacity: 0;
+    ${fillTransition(ID, "opacity")}
+  }
+${whenOn(ID, LAYER, "opacity: 1;")}
+${labelFollows(ID)}`;
+/** A second colour fades in over the button: a layer's opacity, not `background-color`, so it never repaints. */
+export function fillFade(options = {}) {
+    return defineButton(ID, CSS, { vars: fillVars(ID, options), layers: [{ slot: "fill" }] });
+}

package/dist/buttons/effects/fill/fillFade.schema.d.ts

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

package/dist/buttons/effects/fill/fillFade.schema.js

@@ -0,0 +1,8 @@
+import { buttonFillFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const FILL_FADE_SCHEMA = defineSchema()({
+    id: "fillFade",
+    family: "button",
+    factory: "fillFade",
+    fields: buttonFillFields(),
+});

package/dist/buttons/effects/fill/fillGoo.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+import { type FillOptions } from "./kit.js";
+export interface FillGooOptions extends FillOptions {
+    /** How soft the blobs melt together, px of blur. Default `7`. */
+    readonly melt?: number;
+}
+/**
+ * Blobs rise from below and melt into each other until they fill the button (an SVG goo filter). Mid tier: a weaker
+ * device gets the same blobs without the melting (`fillGoo-lite`).
+ */
+export declare function fillGoo(options?: FillGooOptions): ButtonEffect;

package/dist/buttons/effects/fill/fillGoo.js

@@ -0,0 +1,74 @@
+import { DIR, at, defineButton, layerOf, varName, whenOn } from "../kit.js";
+import { fillTransition, fillVars, labelFollows } from "./kit.js";
+const ID = "fillGoo";
+const BLOBS = ["b1", "b2", "b3", "b4"];
+/** The filter that melts the blobs: blur, then a steep alpha curve. A wide region, so the edges don't erode. */
+const filterLayer = (melt) => ({
+    slot: "fill",
+    part: "defs",
+    svg: {
+        children: [
+            {
+                tag: "filter",
+                attrs: { id: "{uid}-goo", x: "-50%", y: "-50%", width: "200%", height: "200%", "color-interpolation-filters": "sRGB" },
+                children: [
+                    { tag: "feGaussianBlur", attrs: { in: "SourceGraphic", "std-deviation": melt, result: "blur" } },
+                    { tag: "feColorMatrix", attrs: { in: "blur", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -9" } },
+                ],
+            },
+        ],
+    },
+});
+// Four blobs rise from below, one after another, and a sheet rises behind them, so the fill ends whole. Each blob is
+// big enough to reach the corners from its quarter: max(150cqh, 40cqw) across, centred on the button's middle line.
+function css(id, filter) {
+    const goo = layerOf(id, "goo");
+    const blob = `${goo} > [data-sx-btn-part^="b"]`;
+    const sheet = `${goo} > [data-sx-btn-part="sheet"]`;
+    return `  ${at(layerOf(id, "defs"))} { inset: auto; inline-size: 0; block-size: 0; overflow: hidden; }
+  ${at(goo)} {${filter ? `\n    filter: var(${varName(id, "filter")});` : ""}
+  }
+  ${at(blob)} {
+    position: absolute;
+    inset-block-start: 100%;
+    inline-size: max(150cqh, 40cqw);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(${varName(id, "color")});
+    translate: calc(${DIR} * -50%) 0;
+    ${fillTransition(id, "translate")}
+  }
+${BLOBS.map((b, i) => `  ${at(`${goo} > [data-sx-btn-part="${b}"]`)} { inset-inline-start: ${12.5 + i * 25}%; transition-delay: calc(var(${varName(id, "time")}) * ${[0.1, 0, 0.2, 0.05][i]}); }`).join("\n")}
+${whenOn(id, blob, `translate: calc(${DIR} * -50%) calc(-50% - 50cqh);`)}
+  ${at(sheet)} {
+    position: absolute;
+    inset: 0;
+    background: var(${varName(id, "color")});
+    translate: 0 101%;
+    ${fillTransition(id, "translate")}
+    transition-delay: calc(var(${varName(id, "time")}) * 0.35);
+  }
+${whenOn(id, sheet, "translate: 0 0;")}
+${labelFollows(id)}`;
+}
+function make(id, options, filter, fallback) {
+    return defineButton(id, css(id, filter), {
+        vars: {
+            ...fillVars(id, { ...options, duration: options.duration ?? 0.6 }),
+            ...(filter ? { [varName(id, "filter")]: "url(#{uid}-goo)" } : {}),
+        },
+        layers: [
+            ...(filter ? [filterLayer(options.melt ?? 7)] : []),
+            { slot: "fill", part: "goo", children: [...BLOBS, "sheet"] },
+        ],
+        ...(filter ? { tier: "mid" } : {}),
+        ...(fallback ? { fallback } : {}),
+    });
+}
+/**
+ * Blobs rise from below and melt into each other until they fill the button (an SVG goo filter). Mid tier: a weaker
+ * device gets the same blobs without the melting (`fillGoo-lite`).
+ */
+export function fillGoo(options = {}) {
+    return make(ID, options, true, make(`${ID}-lite`, options, false));
+}

package/dist/buttons/effects/fill/fillGoo.schema.d.ts

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

package/dist/buttons/effects/fill/fillGoo.schema.js

@@ -0,0 +1,11 @@
+import { buttonFillFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const FILL_GOO_SCHEMA = defineSchema()({
+    id: "fillGoo",
+    family: "button",
+    factory: "fillGoo",
+    fields: {
+        ...buttonFillFields(0.6),
+        melt: { kind: "number", label: "Melt", min: 2, max: 16, step: 1, unit: "px", help: "How softly the blobs run together.", default: 7 },
+    },
+});

package/dist/buttons/effects/fill/fillGradient.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonEffect } from "../../types.js";
+export interface FillGradientOptions {
+    /** The gradient's colours, 2 to 4. Default the primary colour and a mix of it with the accent. */
+    readonly colors?: readonly string[];
+    /** The label's colour. Default `var(--color-sx-on-primary)`. */
+    readonly textColor?: string;
+    /** `"hover"`: it drifts while hovered. `"loop"`: all the time; use one per screen. Default `"hover"`. */
+    readonly trigger?: "hover" | "loop";
+    /** Seconds for one full drift. Default `4`. */
+    readonly duration?: number;
+}
+export declare const FILL_GRADIENT_COLORS: readonly ["var(--color-sx-primary)", "color-mix(in oklab, var(--color-sx-primary) 70%, var(--color-sx-accent))"];
+/** A long gradient drifts sideways behind the label: the button's whole colour, on hover or all the time. */
+export declare function fillGradient(options?: FillGradientOptions): ButtonEffect;

package/dist/buttons/effects/fill/fillGradient.js

@@ -0,0 +1,34 @@
+import { DIR, at, defineButton, labelOf, layerOf, v, varName, whenOn } from "../kit.js";
+const ID = "fillGradient";
+const LAYER = layerOf(ID);
+const DRIFT = "sx-btn-fillGradient";
+export const FILL_GRADIENT_COLORS = ["var(--color-sx-primary)", "color-mix(in oklab, var(--color-sx-primary) 70%, var(--color-sx-accent))"];
+// `translate` over a layer twice the button's width, not `background-position`, which repaints every frame
+const CSS = `  ${at(LAYER)} {
+    inset-inline: 0 auto;
+    inline-size: 200%;
+    background: linear-gradient(90deg, ${v(ID, "stops")});
+    animation: ${DRIFT} ${v(ID, "time")} linear infinite;
+    animation-play-state: ${v(ID, "rest")};
+  }
+  ${at(labelOf(ID))} { color: ${v(ID, "text")}; }
+${whenOn(ID, LAYER, "animation-play-state: running;")}
+  @keyframes ${DRIFT} {
+    to { translate: calc(${DIR} * -50%) 0; }
+  }`;
+/** A long gradient drifts sideways behind the label: the button's whole colour, on hover or all the time. */
+export function fillGradient(options = {}) {
+    const colors = options.colors ?? FILL_GRADIENT_COLORS;
+    const trigger = options.trigger ?? "hover";
+    return defineButton(ID, CSS, {
+        vars: {
+            // the colours twice and back to the first, so sliding by half the layer loops without a seam
+            [varName(ID, "stops")]: [...colors, ...colors, colors[0]].join(", "),
+            [varName(ID, "text")]: options.textColor ?? "var(--color-sx-on-primary)",
+            [varName(ID, "time")]: `${options.duration ?? 4}s`,
+            [varName(ID, "rest")]: trigger === "loop" ? "running" : "paused",
+        },
+        layers: [{ slot: "fill" }],
+        needs: trigger === "loop" ? { inView: true } : {},
+    });
+}

package/dist/buttons/effects/fill/fillGradient.schema.d.ts

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

package/dist/buttons/effects/fill/fillGradient.schema.js

@@ -0,0 +1,13 @@
+import { colorsField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const FILL_GRADIENT_SCHEMA = defineSchema()({
+    id: "fillGradient",
+    family: "button",
+    factory: "fillGradient",
+    fields: {
+        trigger: { kind: "choice", label: "When it moves", values: ["hover", "loop"], labels: { hover: "While hovered", loop: "All the time" }, help: "Use one always-moving button per screen.", default: "hover" },
+        colors: colorsField(["var(--color-sx-primary)", "color-mix(in oklab, var(--color-sx-primary) 70%, var(--color-sx-accent))"], 2, 4),
+        textColor: { kind: "color", label: "Label colour", default: "var(--color-sx-on-primary)" },
+        duration: { kind: "number", label: "Drift time", min: 1, max: 12, step: 0.5, unit: "s", default: 4 },
+    },
+});

package/dist/buttons/effects/fill/fillRadial.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonEffect } from "../../types.js";
+import { type FillOptions } from "./kit.js";
+export interface FillRadialOptions extends FillOptions {
+    /** `"out"`: a circle grows from the centre. `"in"`: the colour closes in from the edges. Default `"out"`. */
+    readonly direction?: "out" | "in";
+}
+/** A circle of colour grows from the centre (a scaled round layer), or closes in from the edges (a hole in a mask). */
+export declare function fillRadial(options?: FillRadialOptions): ButtonEffect;

package/dist/buttons/effects/fill/fillRadial.js

@@ -0,0 +1,36 @@
+import { EASE, at, defineButton, layerOf, v, varName, whenOn } from "../kit.js";
+import { fillTransition, fillVars, labelFollows } from "./kit.js";
+const ID = "fillRadial";
+const OUT = layerOf(ID, "out");
+const IN = layerOf(ID, "in");
+const HOLE = varName(ID, "hole");
+const CSS = `  ${at(OUT)} {
+    inset: calc(50cqh - 75cqmax) calc(50cqw - 75cqmax);
+    border-radius: 50%;
+    background: ${v(ID, "color")};
+    scale: 0;
+    ${fillTransition(ID, "scale")}
+  }
+${whenOn(ID, OUT, "scale: 1;")}
+  ${at(IN)} {
+    background: ${v(ID, "color")};
+    ${HOLE}: 100%;
+    mask-image: radial-gradient(circle farthest-corner, transparent var(${HOLE}), black calc(var(${HOLE}) + 1%));
+    transition: ${HOLE} ${v(ID, "time")} ${EASE};
+  }
+${whenOn(ID, IN, `${HOLE}: 0%;`)}
+${labelFollows(ID)}`;
+// a registered <percentage>, or the hole's size could not be transitioned
+const HEAD = `@property ${HOLE} {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}`;
+/** A circle of colour grows from the centre (a scaled round layer), or closes in from the edges (a hole in a mask). */
+export function fillRadial(options = {}) {
+    return defineButton(ID, CSS, {
+        head: HEAD,
+        vars: fillVars(ID, options),
+        layers: [{ slot: "fill", part: options.direction ?? "out" }],
+    });
+}

package/dist/buttons/effects/fill/fillRadial.schema.d.ts

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

package/dist/buttons/effects/fill/fillRadial.schema.js

@@ -0,0 +1,11 @@
+import { buttonFillFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const FILL_RADIAL_SCHEMA = defineSchema()({
+    id: "fillRadial",
+    family: "button",
+    factory: "fillRadial",
+    fields: {
+        direction: { kind: "choice", label: "Direction", values: ["out", "in"], labels: { out: "Out from the centre", in: "In from the edges" }, default: "out" },
+        ...buttonFillFields(),
+    },
+});

package/dist/buttons/effects/fill/fillShutter.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonEffect } from "../../types.js";
+import { type FillOptions } from "./kit.js";
+export interface FillShutterOptions extends FillOptions {
+    /** `"shutter"`: two halves meet in the middle. `"rectangle"`: a box closes in from all four edges. Default `"shutter"`. */
+    readonly shape?: "shutter" | "rectangle";
+    /** With `"shutter"`: `"x"` closes sideways, `"y"` from top and bottom. Default `"x"`. */
+    readonly axis?: "x" | "y";
+}
+/** Two halves slide in and meet in the middle, or a rectangle of colour closes in from all four edges. */
+export declare function fillShutter(options?: FillShutterOptions): ButtonEffect;

package/dist/buttons/effects/fill/fillShutter.js

@@ -0,0 +1,43 @@
+import { at, defineButton, layerOf, v, varName, whenOn } from "../kit.js";
+import { fillTransition, fillVars, labelFollows } from "./kit.js";
+const ID = "fillShutter";
+const A = layerOf(ID, "a");
+const B = layerOf(ID, "b");
+const BOX = layerOf(ID, "box");
+const H = v(ID, "h");
+/** A filled rectangle with a rectangular hole (even-odd): the hole is the whole box at rest, nothing when filled. */
+const holed = (hole) => `polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${hole})`;
+const NO_FILL = holed("0 0, 100% 0, 100% 100%, 0 100%, 0 0");
+const FILLED = holed("50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%");
+// the halves overlap by half a pixel, so no hairline shows where they meet
+const CSS = `  ${at(`${A}, ${B}`)} {
+    background: ${v(ID, "color")};
+    scale: calc(1 - ${H}) ${H};
+    ${fillTransition(ID, "scale")}
+  }
+  ${at(A)} {
+    inset: 0 calc(${H} * 50% - ${H} * 0.5px) calc((1 - ${H}) * 50% - (1 - ${H}) * 0.5px) 0;
+    transform-origin: 0 0;
+  }
+  ${at(B)} {
+    inset: calc((1 - ${H}) * 50% - (1 - ${H}) * 0.5px) 0 0 calc(${H} * 50% - ${H} * 0.5px);
+    transform-origin: 100% 100%;
+  }
+${whenOn(ID, A, "scale: 1 1;")}
+${whenOn(ID, B, "scale: 1 1;")}
+  ${at(BOX)} {
+    background: ${v(ID, "color")};
+    clip-path: ${NO_FILL};
+    ${fillTransition(ID, "clip-path")}
+  }
+${whenOn(ID, BOX, `clip-path: ${FILLED};`)}
+${labelFollows(ID)}`;
+const HALVES = [{ slot: "fill", part: "a" }, { slot: "fill", part: "b" }];
+const RECTANGLE = [{ slot: "fill", part: "box" }];
+/** Two halves slide in and meet in the middle, or a rectangle of colour closes in from all four edges. */
+export function fillShutter(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: { ...fillVars(ID, options), [varName(ID, "h")]: (options.axis ?? "x") === "x" ? 1 : 0 },
+        layers: (options.shape ?? "shutter") === "rectangle" ? RECTANGLE : HALVES,
+    });
+}

package/dist/buttons/effects/fill/fillShutter.schema.d.ts

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

package/dist/buttons/effects/fill/fillShutter.schema.js

@@ -0,0 +1,12 @@
+import { buttonFillFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const FILL_SHUTTER_SCHEMA = defineSchema()({
+    id: "fillShutter",
+    family: "button",
+    factory: "fillShutter",
+    fields: {
+        shape: { kind: "choice", label: "Shape", values: ["shutter", "rectangle"], labels: { shutter: "Two halves", rectangle: "Box closing in" }, default: "shutter" },
+        axis: { kind: "choice", label: "Axis", values: ["x", "y"], labels: { x: "Sideways", y: "Top and bottom" }, help: "For the two halves.", default: "x" },
+        ...buttonFillFields(),
+    },
+});

package/dist/buttons/effects/fill/fillSlash.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonEffect } from "../../types.js";
+import { type FillOptions } from "./kit.js";
+export interface FillSlashOptions extends FillOptions {
+    /** Degrees the block leans. Default `20`. */
+    readonly angle?: number;
+    /** The side it comes from, in reading direction. Default `"start"`. */
+    readonly from?: "start" | "end";
+}
+/** A slanted block slides across the button. */
+export declare function fillSlash(options?: FillSlashOptions): ButtonEffect;

package/dist/buttons/effects/fill/fillSlash.js

@@ -0,0 +1,26 @@
+import { DIR, at, defineButton, layerOf, v, varName, whenOn } from "../kit.js";
+import { fillTransition, fillVars, labelFollows } from "./kit.js";
+const ID = "fillSlash";
+const LAYER = layerOf(ID);
+const SIDE = v(ID, "side");
+// wider than the button, so the slanted ends stay outside it when it has arrived
+const CSS = `  ${at(LAYER)} {
+    inset-inline: -35%;
+    background: ${v(ID, "color")};
+    transform: skewX(calc(${DIR} * ${SIDE} * ${v(ID, "angle")} * -1deg));
+    translate: calc(${DIR} * ${SIDE} * -105%) 0;
+    ${fillTransition(ID, "translate")}
+  }
+${whenOn(ID, LAYER, "translate: 0 0;")}
+${labelFollows(ID)}`;
+/** A slanted block slides across the button. */
+export function fillSlash(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            ...fillVars(ID, options),
+            [varName(ID, "angle")]: options.angle ?? 20,
+            [varName(ID, "side")]: (options.from ?? "start") === "start" ? 1 : -1,
+        },
+        layers: [{ slot: "fill" }],
+    });
+}

package/dist/buttons/effects/fill/fillSlash.schema.d.ts

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