@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/buttons/claims.d.ts

@@ -0,0 +1,8 @@
+/** The channels two or more of these effects write, each with who claims it. Pure; `Button` and `Text` warn about them in dev. */
+export declare function claimConflicts<C extends string>(effects: readonly {
+    readonly id: string;
+    readonly claims: readonly C[];
+}[]): {
+    readonly claim: C;
+    readonly ids: readonly string[];
+}[];

package/dist/buttons/claims.js

@@ -0,0 +1,9 @@
+/** The channels two or more of these effects write, each with who claims it. Pure; `Button` and `Text` warn about them in dev. */
+export function claimConflicts(effects) {
+    const byClaim = new Map();
+    for (const effect of effects) {
+        for (const claim of effect.claims)
+            byClaim.set(claim, [...(byClaim.get(claim) ?? []), effect.id]);
+    }
+    return [...byClaim].filter(([, ids]) => ids.length > 1).map(([claim, ids]) => ({ claim, ids }));
+}

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

@@ -0,0 +1,15 @@
+import type { ButtonEffect } from "../../types.js";
+export interface BorderAntsOptions {
+    /** The dashes' colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** One dash's length, px. Default `6`. */
+    readonly dash?: number;
+    /** The line's thickness, px. Default `1.5`. */
+    readonly thickness?: number;
+    /** The corner radius it follows. An SVG can't read the button's own. Default `var(--radius-sx-control)`. */
+    readonly radius?: string;
+    /** Seconds per dash and gap. Default `0.6`. */
+    readonly duration?: number;
+}
+/** A dashed line marches around the edge, all the time. Good for drop zones. Use one per screen. */
+export declare function borderAnts(options?: BorderAntsOptions): ButtonEffect;

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

@@ -0,0 +1,30 @@
+import { at, defineButton, layerOf, v, varName } from "../kit.js";
+const ID = "borderAnts";
+const LINE = `${layerOf(ID)} [data-sx-btn-svg="line"]`;
+const MARCH = "sx-btn-borderAnts";
+const DASH = `calc(${v(ID, "dash")} * 1px)`;
+const CSS = `  ${at(LINE)} {
+    fill: none;
+    stroke: ${v(ID, "color")};
+    stroke-width: calc(${v(ID, "thickness")} * 1px);
+    rx: ${v(ID, "radius")};
+    stroke-dasharray: ${DASH} ${DASH};
+    animation: ${MARCH} ${v(ID, "time")} linear infinite;
+  }
+  @keyframes ${MARCH} {
+    to { stroke-dashoffset: calc(${v(ID, "dash")} * -2px); }
+  }`;
+/** A dashed line marches around the edge, all the time. Good for drop zones. Use one per screen. */
+export function borderAnts(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "dash")]: options.dash ?? 6,
+            [varName(ID, "thickness")]: options.thickness ?? 1.5,
+            [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%" } }] } }],
+        needs: { inView: true },
+    });
+}

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

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

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

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_ANTS_SCHEMA = defineSchema()({
+    id: "borderAnts",
+    family: "button",
+    factory: "borderAnts",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        dash: { kind: "number", label: "Dash length", min: 2, max: 20, step: 1, unit: "px", default: 6 },
+        thickness: { kind: "number", label: "Thickness", min: 1, max: 4, step: 0.5, unit: "px", default: 1.5 },
+        radius: { kind: "text", label: "Corner radius", help: "Match the button's corners: a CSS length or a token.", default: "var(--radius-sx-control)" },
+        duration: { kind: "number", label: "Speed", min: 0.2, max: 3, step: 0.1, unit: "s", help: "Seconds per dash and gap.", default: 0.6 },
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { ButtonEffect } from "../../types.js";
+export interface BorderBeamOptions {
+    /** The beam's colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** How much of the way round it reaches, 0 to 1. Default `0.25`. */
+    readonly length?: number;
+    /** The ring's width, px. Default `2`. */
+    readonly width?: number;
+    /** Seconds for one lap. Default `4`. */
+    readonly duration?: number;
+}
+/** A beam of light with a fading tail circles the edge, all the time. Use one per screen. */
+export declare function borderBeam(options?: BorderBeamOptions): ButtonEffect;

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

@@ -0,0 +1,19 @@
+import { defineButton, v, varName } from "../kit.js";
+import { ringCss, spinnerCss } from "./ring.js";
+const ID = "borderBeam";
+const CSS = `${ringCss(ID)}
+${spinnerCss(ID, "spin", `conic-gradient(transparent calc((1 - ${v(ID, "length")}) * 100%), ${v(ID, "color")})`, "sx-btn-borderBeam")}`;
+/** A beam of light with a fading tail circles the edge, all the time. Use one per screen. */
+export function borderBeam(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "length")]: options.length ?? 0.25,
+            [varName(ID, "width")]: options.width ?? 2,
+            [varName(ID, "time")]: `${options.duration ?? 4}s`,
+            [varName(ID, "rest")]: "running",
+        },
+        layers: [{ slot: "edge", children: ["spin"] }],
+        needs: { inView: true },
+    });
+}

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

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

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

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_BEAM_SCHEMA = defineSchema()({
+    id: "borderBeam",
+    family: "button",
+    factory: "borderBeam",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        length: { kind: "number", label: "Length", min: 0.05, max: 0.9, step: 0.05, help: "How much of the way round it reaches.", default: 0.25 },
+        width: { kind: "number", label: "Ring width", min: 1, max: 6, step: 0.5, unit: "px", default: 2 },
+        duration: { kind: "number", label: "Lap time", min: 1, max: 12, step: 0.5, unit: "s", default: 4 },
+    },
+});

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

@@ -0,0 +1,15 @@
+import type { ButtonEffect } from "../../types.js";
+import { type ButtonTrigger } from "../kit.js";
+export interface BorderConicOptions {
+    /** The gradient's colours, 2 to 5. Default the accent and primary colours. */
+    readonly colors?: readonly string[];
+    /** The ring's width, px. Default `2`. */
+    readonly width?: number;
+    /** `"hover"`: it shows and turns while hovered. `"loop"`: all the time; use one per screen. Default `"hover"`. */
+    readonly trigger?: ButtonTrigger;
+    /** Seconds for one turn. Default `3`. */
+    readonly duration?: number;
+}
+export declare const BORDER_CONIC_COLORS: readonly ["var(--color-sx-accent)", "var(--color-sx-primary)"];
+/** A gradient ring turns around the button. Pure CSS: a conic square spun inside a masked ring, no JavaScript. */
+export declare function borderConic(options?: BorderConicOptions): ButtonEffect;

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

@@ -0,0 +1,30 @@
+import { at, defineButton, layerOf, v, varName, whenOn, childOf } from "../kit.js";
+import { ringCss, spinnerCss } from "./ring.js";
+const ID = "borderConic";
+const LAYER = layerOf(ID);
+const SPIN = childOf(ID, "spin");
+export const BORDER_CONIC_COLORS = ["var(--color-sx-accent)", "var(--color-sx-primary)"];
+const CSS = `${ringCss(ID)}
+  ${at(LAYER)} {
+    opacity: ${v(ID, "shown")};
+    transition: opacity 0.25s ease-out;
+  }
+${whenOn(ID, LAYER, "opacity: 1;")}
+${spinnerCss(ID, "spin", `conic-gradient(${v(ID, "stops")})`, "sx-btn-borderConic")}
+${whenOn(ID, SPIN, "animation-play-state: running;")}`;
+/** A gradient ring turns around the button. Pure CSS: a conic square spun inside a masked ring, no JavaScript. */
+export function borderConic(options = {}) {
+    const colors = options.colors ?? BORDER_CONIC_COLORS;
+    const loop = (options.trigger ?? "hover") === "loop";
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "stops")]: [...colors, colors[0]].join(", "),
+            [varName(ID, "width")]: options.width ?? 2,
+            [varName(ID, "time")]: `${options.duration ?? 3}s`,
+            [varName(ID, "rest")]: loop ? "running" : "paused",
+            [varName(ID, "shown")]: loop ? 1 : 0,
+        },
+        layers: [{ slot: "edge", children: ["spin"] }],
+        needs: loop ? { inView: true } : {},
+    });
+}

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

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

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

@@ -0,0 +1,13 @@
+import { colorsField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_CONIC_SCHEMA = defineSchema()({
+    id: "borderConic",
+    family: "button",
+    factory: "borderConic",
+    fields: {
+        trigger: { kind: "choice", label: "When it shows", 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-accent)", "var(--color-sx-primary)"], 2, 5),
+        width: { kind: "number", label: "Ring width", min: 1, max: 6, step: 0.5, unit: "px", default: 2 },
+        duration: { kind: "number", label: "Turn time", min: 1, max: 10, step: 0.5, unit: "s", default: 3 },
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { ButtonEffect } from "../../types.js";
+export interface BorderDrawOptions {
+    /** The line's colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** Its thickness, px. Default `2`. */
+    readonly thickness?: number;
+    /** The corner radius it follows. An SVG can't read the button'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 button: an SVG rectangle's dash, so it follows rounded corners. */
+export declare function borderDraw(options?: BorderDrawOptions): ButtonEffect;

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

@@ -0,0 +1,27 @@
+import { at, defineButton, layerOf, timed, v, varName, whenOn } from "../kit.js";
+const ID = "borderDraw";
+const LINE = `${layerOf(ID)} [data-sx-btn-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 1;
+    stroke-dashoffset: 1;
+    ${timed(ID, "stroke-dashoffset")}
+  }
+${whenOn(ID, LINE, "stroke-dashoffset: 0;")}`;
+/** The outline draws itself around the button: an SVG rectangle's dash, so it follows rounded corners. */
+export function borderDraw(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [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/buttons/effects/border/borderDraw.schema.d.ts

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

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

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_DRAW_SCHEMA = defineSchema()({
+    id: "borderDraw",
+    family: "button",
+    factory: "borderDraw",
+    fields: {
+        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 },
+        radius: { kind: "text", label: "Corner radius", help: "Match the button's corners: a CSS length or a token.", default: "var(--radius-sx-control)" },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 2, step: 0.05, unit: "s", default: 0.6 },
+    },
+});

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

@@ -0,0 +1,16 @@
+import type { ButtonEffect } from "../../types.js";
+export interface BorderElectricOptions {
+    /** The current's colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** The line's thickness, px. Default `2`. */
+    readonly width?: number;
+    /** How far the line jumps off the edge, px. Default `6`. */
+    readonly jitter?: number;
+    /** Seconds the three shapes of the line take to flicker through. Default `0.45`. */
+    readonly duration?: number;
+}
+/**
+ * The edge crackles like a live wire: the ring, bent by three SVG noise filters it flickers through. Runs all the time,
+ * so use one per screen. Mid tier: a weaker device gets a flickering glowing ring (`borderElectric-lite`).
+ */
+export declare function borderElectric(options?: BorderElectricOptions): ButtonEffect;

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

@@ -0,0 +1,68 @@
+import { at, childOf, defineButton, layerOf, varName } from "../kit.js";
+const ID = "borderElectric";
+const SPARKS = ["s1", "s2", "s3"];
+/** One crackle: the ring pushed about by its own noise. Three seeds give three shapes to flicker through. */
+const crackle = (n, jitter) => ({
+    tag: "filter",
+    attrs: { id: `{uid}-e${n}`, x: "-20%", y: "-50%", width: "140%", height: "200%" },
+    children: [
+        { tag: "feTurbulence", attrs: { type: "turbulence", "base-frequency": "0.035 0.06", "num-octaves": 3, seed: n * 7, result: "noise" } },
+        {
+            tag: "feDisplacementMap",
+            attrs: { in: "SourceGraphic", in2: "noise", scale: jitter, "x-channel-selector": "R", "y-channel-selector": "G" },
+        },
+    ],
+});
+const defs = (jitter) => ({ slot: "edge", part: "defs", svg: { children: SPARKS.map((_, i) => crackle(i + 1, jitter)) } });
+// The filters never change, so each shape is drawn once; the animation only flips their opacity, a step at a time.
+// The glow is the plain ring, blurred. Without the filters (`-lite`), the plain ring flickers on its own.
+function css(id, filter) {
+    const ring = `border: calc(var(${varName(id, "width")}) * 1px) solid var(${varName(id, "color")}); border-radius: inherit;`;
+    const flick = `sx-btn-${id}`;
+    return `  ${at(layerOf(id, "defs"))} { inset: auto; inline-size: 0; block-size: 0; overflow: hidden; }
+  ${at(`${layerOf(id, "line")} > [data-sx-btn-part]`)} {
+    position: absolute;
+    inset: 0;
+    ${ring}
+  }
+  ${at(childOf(id, "glow", "line"))} {
+    filter: blur(4px);
+    opacity: 0.6;
+  }
+${filter
+        ? SPARKS.map((s, i) => `  ${at(childOf(id, s, "line"))} {
+    filter: var(${varName(id, s)});
+    opacity: 0;
+    animation: ${flick} var(${varName(id, "time")}) steps(1) infinite;
+    animation-delay: calc(var(${varName(id, "time")}) * ${-i / 3});
+  }`).join("\n")
+        : `  ${at(childOf(id, "s1", "line"))} {
+    animation: ${flick} var(${varName(id, "time")}) steps(1) infinite;
+  }`}
+  @keyframes ${flick} {
+    0% { opacity: 1; }
+    ${filter ? "33.3%" : "50%"} { opacity: ${filter ? 0 : 0.55}; }
+  }`;
+}
+function make(id, options, filter, fallback) {
+    const jitter = options.jitter ?? 6;
+    return defineButton(id, css(id, filter), {
+        vars: {
+            [varName(id, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(id, "width")]: options.width ?? 2,
+            [varName(id, "time")]: `${options.duration ?? 0.45}s`,
+            ...(filter ? Object.fromEntries(SPARKS.map((s, i) => [varName(id, s), `url(#{uid}-e${i + 1})`])) : {}),
+        },
+        layers: [...(filter ? [defs(jitter)] : []), { slot: "edge", part: "line", children: filter ? ["glow", ...SPARKS] : ["glow", "s1"] }],
+        needs: { inView: true },
+        ...(filter ? { tier: "mid" } : {}),
+        ...(fallback ? { fallback } : {}),
+    });
+}
+/**
+ * The edge crackles like a live wire: the ring, bent by three SVG noise filters it flickers through. Runs all the time,
+ * so use one per screen. Mid tier: a weaker device gets a flickering glowing ring (`borderElectric-lite`).
+ */
+export function borderElectric(options = {}) {
+    return make(ID, options, true, make(`${ID}-lite`, options, false));
+}

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

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

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

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_ELECTRIC_SCHEMA = defineSchema()({
+    id: "borderElectric",
+    family: "button",
+    factory: "borderElectric",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        width: { kind: "number", label: "Thickness", min: 1, max: 6, step: 0.5, unit: "px", default: 2 },
+        jitter: { kind: "number", label: "Jitter", min: 1, max: 16, step: 1, unit: "px", help: "How far the line jumps off the edge.", default: 6 },
+        duration: { kind: "number", label: "Flicker", min: 0.15, max: 2, step: 0.05, unit: "s", help: "Seconds for the three shapes. Use one always-moving button per screen.", default: 0.45 },
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { ButtonEffect } from "../../types.js";
+export interface BorderOutlineOptions {
+    /** `"out"`: a second outline moves away from the button. `"ripple"`: it spreads and fades, once. `"trim"`: it sits inside the edge. Default `"out"`. */
+    readonly kind?: "out" | "ripple" | "trim";
+    /** Its colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** How far it sits from the edge, px. Default `4`. */
+    readonly gap?: number;
+    /** Seconds it takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** A second outline moves out from the edge, spreads and fades, or sits inside it. */
+export declare function borderOutline(options?: BorderOutlineOptions): ButtonEffect;

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

@@ -0,0 +1,45 @@
+import { at, defineButton, layerOf, v, varName, whenOn } from "../kit.js";
+const ID = "borderOutline";
+const OUT = layerOf(ID, "out");
+const RIPPLE = layerOf(ID, "ripple");
+const TRIM = layerOf(ID, "trim");
+const SPREAD = "sx-btn-borderOutline";
+const GAP = `calc(${v(ID, "gap")} * 1px)`;
+const LINE = `border: 2px solid ${v(ID, "color")};`;
+const MOVE = `transition: opacity ${v(ID, "time")} ease-out, scale ${v(ID, "time")} var(--ease-sx-out, ease-out);`;
+const CSS = `  ${at(OUT)} {
+    inset: calc(${GAP} * -1);
+    ${LINE}
+    opacity: 0;
+    scale: 0.96;
+    ${MOVE}
+  }
+  ${at(TRIM)} {
+    inset: ${GAP};
+    ${LINE}
+    opacity: 0;
+    scale: 1.04;
+    ${MOVE}
+  }
+${whenOn(ID, OUT, "opacity: 1; scale: 1;")}
+${whenOn(ID, TRIM, "opacity: 1; scale: 1;")}
+  ${at(RIPPLE)} {
+    ${LINE}
+    opacity: 0;
+  }
+${whenOn(ID, RIPPLE, `animation: ${SPREAD} calc(${v(ID, "time")} * 2) ease-out;`)}
+  @keyframes ${SPREAD} {
+    from { opacity: 1; scale: 1; }
+    to { opacity: 0; scale: 1.08 1.3; }
+  }`;
+/** A second outline moves out from the edge, spreads and fades, or sits inside it. */
+export function borderOutline(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "gap")]: options.gap ?? 4,
+            [varName(ID, "time")]: `${options.duration ?? 0.3}s`,
+        },
+        layers: [{ slot: "edge", part: options.kind ?? "out" }],
+    });
+}

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

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

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

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_OUTLINE_SCHEMA = defineSchema()({
+    id: "borderOutline",
+    family: "button",
+    factory: "borderOutline",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["out", "ripple", "trim"], labels: { out: "Moves out", ripple: "Ripples away", trim: "Inside the edge" }, default: "out" },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        gap: { kind: "number", label: "Gap", min: 1, max: 12, step: 1, unit: "px", default: 4 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { ButtonEffect } from "../../types.js";
+export interface BorderRoundOptions {
+    /** The corner radius while hovered. Default `"999px"`: a pill. */
+    readonly radius?: string;
+    /** Seconds it takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The corners round off: a square button turns into a pill. */
+export declare function borderRound(options?: BorderRoundOptions): ButtonEffect;

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

@@ -0,0 +1,18 @@
+import { at, defineButton, faceOf, v, varName, whenOn } from "../kit.js";
+const ID = "borderRound";
+const FACE = faceOf(ID);
+// !important: the only effect that has to change the face itself, so it beats both the default look (later in the
+// page at equal specificity) and a `rounded-*` class. Everything inside the face inherits the radius and follows.
+const CSS = `  ${at(FACE)} {
+    transition: border-radius ${v(ID, "time")} var(--ease-sx-out, ease-out), background-color 200ms ease-out, border-color 200ms ease-out !important;
+  }
+${whenOn(ID, FACE, `border-radius: ${v(ID, "radius")} !important;`)}`;
+/** The corners round off: a square button turns into a pill. */
+export function borderRound(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "radius")]: options.radius ?? "999px",
+            [varName(ID, "time")]: `${options.duration ?? 0.25}s`,
+        },
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_ROUND_SCHEMA = defineSchema()({
+    id: "borderRound",
+    family: "button",
+    factory: "borderRound",
+    fields: {
+        radius: { kind: "text", label: "Corner radius", help: "While hovered: a CSS length or a token.", default: "999px" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { ButtonEffect } from "../../types.js";
+export interface BorderRunnerOptions {
+    /** The light's colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** Its size, px. Default `28`. */
+    readonly size?: number;
+    /** The corner radius of its path. Default `var(--radius-sx-control)`. */
+    readonly radius?: string;
+    /** Seconds for one lap. Default `3`. */
+    readonly duration?: number;
+}
+/** A bright dot travels along the edge, all the time. Use one per screen. */
+export declare function borderRunner(options?: BorderRunnerOptions): ButtonEffect;

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

@@ -0,0 +1,37 @@
+import { at, childOf, defineButton, v, varName } from "../kit.js";
+const ID = "borderRunner";
+const DOT = childOf(ID, "dot");
+const RUN = "sx-btn-borderRunner";
+// a browser that can't follow a rectangle would park the light in a corner, so it stays hidden there
+const CSS = `  ${at(DOT)} {
+    position: absolute;
+    inset: 0 auto auto 0;
+    inline-size: calc(${v(ID, "size")} * 1px);
+    block-size: calc(${v(ID, "size")} * 1px);
+    border-radius: 50%;
+    background: radial-gradient(closest-side, ${v(ID, "color")}, transparent);
+    opacity: 0;
+    offset-path: rect(0 100% 100% 0 round ${v(ID, "radius")});
+    offset-rotate: 0deg;
+    animation: ${RUN} ${v(ID, "time")} linear infinite;
+  }
+  @supports (offset-path: rect(0 0 0 0)) {
+    ${at(DOT)} { opacity: 1; }
+  }
+  @keyframes ${RUN} {
+    from { offset-distance: 0%; }
+    to { offset-distance: 100%; }
+  }`;
+/** A bright dot travels along the edge, all the time. Use one per screen. */
+export function borderRunner(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "size")]: options.size ?? 28,
+            [varName(ID, "radius")]: options.radius ?? "var(--radius-sx-control)",
+            [varName(ID, "time")]: `${options.duration ?? 3}s`,
+        },
+        layers: [{ slot: "edge", children: ["dot"] }],
+        needs: { inView: true },
+    });
+}

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

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

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

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_RUNNER_SCHEMA = defineSchema()({
+    id: "borderRunner",
+    family: "button",
+    factory: "borderRunner",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        size: { kind: "number", label: "Size", min: 8, max: 64, step: 1, unit: "px", default: 28 },
+        radius: { kind: "text", label: "Corner radius", help: "Match the button's corners: a CSS length or a token.", default: "var(--radius-sx-control)" },
+        duration: { kind: "number", label: "Lap time", min: 1, max: 10, step: 0.5, unit: "s", default: 3 },
+    },
+});

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

@@ -0,0 +1,12 @@
+import type { ButtonEffect } from "../../types.js";
+export interface BorderSpreadOptions {
+    /** The gradient's colours, centre outwards, 1 to 3. Default the accent colour and a mix of it with the primary. */
+    readonly colors?: readonly string[];
+    /** The ring's width, px. Default `1.5`. */
+    readonly width?: number;
+    /** Seconds it takes. Default `0.45`. */
+    readonly duration?: number;
+}
+export declare const BORDER_SPREAD_COLORS: readonly ["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 60%, var(--color-sx-primary))"];
+/** A short arc of gradient sits on the top edge; on hover it spreads around the whole button. */
+export declare function borderSpread(options?: BorderSpreadOptions): ButtonEffect;

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

@@ -0,0 +1,28 @@
+import { at, childOf, defineButton, timed, v, varName, whenOn } from "../kit.js";
+import { ringCss } from "./ring.js";
+const ID = "borderSpread";
+const GLOW = childOf(ID, "glow");
+export const BORDER_SPREAD_COLORS = ["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 60%, var(--color-sx-primary))"];
+const CSS = `${ringCss(ID)}
+  ${at(GLOW)} {
+    position: absolute;
+    inset-block-start: -75cqmax;
+    inset-inline: calc(50cqw - 75cqmax);
+    block-size: 150cqmax;
+    border-radius: 50%;
+    background: radial-gradient(closest-side, ${v(ID, "stops")}, transparent);
+    scale: 0.25;
+    ${timed(ID, "scale")}
+  }
+${whenOn(ID, GLOW, "scale: 2.2;")}`;
+/** A short arc of gradient sits on the top edge; on hover it spreads around the whole button. */
+export function borderSpread(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "stops")]: (options.colors ?? BORDER_SPREAD_COLORS).join(", "),
+            [varName(ID, "width")]: options.width ?? 1.5,
+            [varName(ID, "time")]: `${options.duration ?? 0.45}s`,
+        },
+        layers: [{ slot: "edge", children: ["glow"] }],
+    });
+}

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

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

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

@@ -0,0 +1,12 @@
+import { colorsField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const BORDER_SPREAD_SCHEMA = defineSchema()({
+    id: "borderSpread",
+    family: "button",
+    factory: "borderSpread",
+    fields: {
+        colors: colorsField(["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 60%, var(--color-sx-primary))"], 1, 3),
+        width: { kind: "number", label: "Ring width", min: 1, max: 6, step: 0.5, unit: "px", default: 1.5 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1.5, step: 0.05, unit: "s", default: 0.45 },
+    },
+});