@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/buttons/effects/glass/kit.js

@@ -0,0 +1,39 @@
+// What the glass effects share: a pane behind the label that blurs whatever lies behind the button, a tint, a light
+// edge, and a sheen that fades in on hover. The pane sits in the `under` slot, so wear glass on a see-through face
+// (`variant="ghost"`, or `unstyled` with your own padding): a solid face covers it.
+import { EASE, at, layerOf, v, varName, whenOn } from "../kit.js";
+export function glassVars(id, options, defaults) {
+    return {
+        [varName(id, "tint")]: options.tint ?? "var(--color-sx-secondary)",
+        [varName(id, "strength")]: options.strength ?? defaults.strength,
+        [varName(id, "blur")]: options.blur ?? defaults.blur,
+        [varName(id, "light")]: options.highlight ?? "white",
+    };
+}
+export const GLASS_LAYERS = [
+    { slot: "under", part: "pane" },
+    { slot: "under", part: "sheen" },
+];
+/** `blur(…) saturate(…)` from an effect's vars. */
+export const frost = (id, saturate) => `blur(calc(${v(id, "blur")} * 1px)) saturate(${saturate})`;
+const mix = (id, name, percent) => `color-mix(in oklab, ${v(id, name)} ${percent}%, transparent)`;
+/** The pane and its sheen. `backdrop` is the pane's backdrop-filter. */
+export function glassCss(id, backdrop) {
+    const pane = layerOf(id, "pane");
+    const sheen = layerOf(id, "sheen");
+    return `  ${at(pane)} {
+    background: color-mix(in oklab, ${v(id, "tint")} calc(${v(id, "strength")} * 100%), transparent);
+    -webkit-backdrop-filter: ${backdrop};
+    backdrop-filter: ${backdrop};
+    box-shadow:
+      inset 0 1px 0 ${mix(id, "light", 45)},
+      inset 0 0 0 1px ${mix(id, "light", 16)},
+      0 8px 24px -10px color-mix(in oklab, var(--color-sx-ink) 40%, transparent);
+  }
+  ${at(sheen)} {
+    background: linear-gradient(to bottom, ${mix(id, "light", 28)}, transparent 65%);
+    opacity: 0;
+    transition: opacity 250ms ${EASE};
+  }
+${whenOn(id, sheen, "opacity: 1;")}`;
+}

package/dist/buttons/effects/glow/glowAura.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonEffect } from "../../types.js";
+import { type ButtonTrigger } from "../kit.js";
+export interface GlowAuraOptions {
+    /** Its two colours. Default the accent colour, twice. */
+    readonly colors?: readonly [string, string];
+    /** How far it reaches past the button, px. Default `16`. */
+    readonly spread?: number;
+    /** `"hover"`: it fades in while hovered. `"loop"`: always on and breathing; use one per screen. Default `"hover"`. */
+    readonly trigger?: ButtonTrigger;
+    /** Seconds it takes to fade in. Default `0.3`. */
+    readonly duration?: number;
+}
+/** A soft cloud of colour sits behind the button. */
+export declare function glowAura(options?: GlowAuraOptions): ButtonEffect;

package/dist/buttons/effects/glow/glowAura.js

@@ -0,0 +1,36 @@
+import { at, defineButton, layerOf, v, varName, whenOn } from "../kit.js";
+const ID = "glowAura";
+const LAYER = layerOf(ID);
+const BREATHE = "sx-btn-glowAura";
+// radial gradients, already soft: far cheaper than a filter: blur() on a sharp shape
+const CSS = `  ${at(LAYER)} {
+    inset: calc(${v(ID, "spread")} * -1px);
+    background:
+      radial-gradient(closest-side at 32% 50%, ${v(ID, "a")}, transparent),
+      radial-gradient(closest-side at 68% 50%, ${v(ID, "b")}, transparent);
+    opacity: ${v(ID, "shown")};
+    transition: opacity ${v(ID, "time")} ease-out;
+    animation: ${v(ID, "name")} 4s ease-in-out infinite alternate;
+  }
+${whenOn(ID, LAYER, "opacity: 1;")}
+  @keyframes ${BREATHE} {
+    from { scale: 0.96; }
+    to { scale: 1.06; }
+  }`;
+/** A soft cloud of colour sits behind the button. */
+export function glowAura(options = {}) {
+    const loop = options.trigger === "loop";
+    const [a, b] = options.colors ?? ["var(--color-sx-accent)", "var(--color-sx-accent)"];
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "a")]: a,
+            [varName(ID, "b")]: b,
+            [varName(ID, "spread")]: options.spread ?? 16,
+            [varName(ID, "time")]: `${options.duration ?? 0.3}s`,
+            [varName(ID, "name")]: loop ? BREATHE : "none",
+            [varName(ID, "shown")]: loop ? 1 : 0,
+        },
+        layers: [{ slot: "under" }],
+        needs: loop ? { inView: true } : {},
+    });
+}

package/dist/buttons/effects/glow/glowAura.schema.d.ts

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

package/dist/buttons/effects/glow/glowAura.schema.js

@@ -0,0 +1,14 @@
+import { colorsField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+const COLORS = ["var(--color-sx-accent)", "var(--color-sx-accent)"];
+export const GLOW_AURA_SCHEMA = defineSchema()({
+    id: "glowAura",
+    family: "button",
+    factory: "glowAura",
+    fields: {
+        trigger: { kind: "choice", label: "When it shows", values: ["hover", "loop"], labels: { hover: "While hovered", loop: "Always, breathing" }, help: "Use one always-moving button per screen.", default: "hover" },
+        colors: colorsField(COLORS, 2, 2),
+        spread: { kind: "number", label: "Reach", min: 4, max: 48, step: 1, unit: "px", default: 16 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

package/dist/buttons/effects/glow/glowGlare.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface GlowGlareOptions {
+    /** The highlight's colour. Default the label colour on a primary fill, half see-through. */
+    readonly color?: string;
+    /** The direction it runs, degrees. Default `115`. */
+    readonly angle?: number;
+    /** Seconds it takes to pass. Default `0.65`. */
+    readonly duration?: number;
+}
+/** A metallic highlight passes over the button as the pointer enters, and back as it leaves. */
+export declare function glowGlare(options?: GlowGlareOptions): ButtonEffect;

package/dist/buttons/effects/glow/glowGlare.js

@@ -0,0 +1,22 @@
+import { DIR, at, defineButton, layerOf, timed, v, varName, whenOn } from "../kit.js";
+const ID = "glowGlare";
+const LAYER = layerOf(ID);
+const CSS = `  ${at(LAYER)} {
+    inset-inline: -100%;
+    border-radius: 0;
+    background: linear-gradient(calc(${v(ID, "angle")} * 1deg), transparent 35%, ${v(ID, "color")} 50%, transparent 65%);
+    translate: calc(${DIR} * -34%) 0;
+    ${timed(ID, "translate")}
+  }
+${whenOn(ID, LAYER, `translate: calc(${DIR} * 34%) 0;`)}`;
+/** A metallic highlight passes over the button as the pointer enters, and back as it leaves. */
+export function glowGlare(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-on-primary) 50%, transparent)",
+            [varName(ID, "angle")]: options.angle ?? 115,
+            [varName(ID, "time")]: `${options.duration ?? 0.65}s`,
+        },
+        layers: [{ slot: "fill" }],
+    });
+}

package/dist/buttons/effects/glow/glowGlare.schema.d.ts

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

package/dist/buttons/effects/glow/glowGlare.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLOW_GLARE_SCHEMA = defineSchema()({
+    id: "glowGlare",
+    family: "button",
+    factory: "glowGlare",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-on-primary) 50%, transparent)" },
+        angle: { kind: "number", label: "Direction", min: 90, max: 150, step: 1, unit: "°", default: 115 },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 2, step: 0.05, unit: "s", default: 0.65 },
+    },
+});

package/dist/buttons/effects/glow/glowHover.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface GlowHoverOptions {
+    /** The glow's colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** How far it reaches, px. Default `24`. */
+    readonly size?: number;
+    /** Seconds it takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** A soft glow fades in around the button: a fixed shadow on a layer that fades, so nothing repaints. */
+export declare function glowHover(options?: GlowHoverOptions): ButtonEffect;

package/dist/buttons/effects/glow/glowHover.js

@@ -0,0 +1,20 @@
+import { at, defineButton, layerOf, timed, v, varName, whenOn } from "../kit.js";
+const ID = "glowHover";
+const LAYER = layerOf(ID);
+const CSS = `  ${at(LAYER)} {
+    box-shadow: 0 0 calc(${v(ID, "size")} * 1px) ${v(ID, "color")};
+    opacity: 0;
+    ${timed(ID, "opacity")}
+  }
+${whenOn(ID, LAYER, "opacity: 1;")}`;
+/** A soft glow fades in around the button: a fixed shadow on a layer that fades, so nothing repaints. */
+export function glowHover(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "size")]: options.size ?? 24,
+            [varName(ID, "time")]: `${options.duration ?? 0.25}s`,
+        },
+        layers: [{ slot: "under" }],
+    });
+}

package/dist/buttons/effects/glow/glowHover.schema.d.ts

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

package/dist/buttons/effects/glow/glowHover.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLOW_HOVER_SCHEMA = defineSchema()({
+    id: "glowHover",
+    family: "button",
+    factory: "glowHover",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        size: { kind: "number", label: "Reach", min: 4, max: 64, step: 1, unit: "px", default: 24 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

package/dist/buttons/effects/glow/glowLift.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface GlowLiftOptions {
+    /** How far it rises, px. Default `3`. */
+    readonly lift?: number;
+    /** The shadow's colour. Default the text colour, faint. */
+    readonly color?: string;
+    /** Seconds it takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The button rises and a shadow fades in under it. The calm default for a professional look. */
+export declare function glowLift(options?: GlowLiftOptions): ButtonEffect;

package/dist/buttons/effects/glow/glowLift.js

@@ -0,0 +1,25 @@
+import { at, bodyOf, defineButton, layerOf, timed, v, varName, whenOn } from "../kit.js";
+const ID = "glowLift";
+const BODY = bodyOf(ID);
+const SHADOW = layerOf(ID);
+const LIFT = v(ID, "lift");
+const CSS = `  ${at(BODY)} { ${timed(ID, "translate")} }
+${whenOn(ID, BODY, `translate: 0 calc(${LIFT} * -1px);`)}
+  ${at(SHADOW)} {
+    box-shadow: 0 calc(${LIFT} * 3px) calc(${LIFT} * 5px) ${v(ID, "color")};
+    opacity: 0;
+    ${timed(ID, "opacity")}
+  }
+${whenOn(ID, SHADOW, "opacity: 1;")}`;
+/** The button rises and a shadow fades in under it. The calm default for a professional look. */
+export function glowLift(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "lift")]: options.lift ?? 3,
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-ink) 30%, transparent)",
+            [varName(ID, "time")]: `${options.duration ?? 0.25}s`,
+        },
+        layers: [{ slot: "under" }],
+        claims: ["move"],
+    });
+}

package/dist/buttons/effects/glow/glowLift.schema.d.ts

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

package/dist/buttons/effects/glow/glowLift.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLOW_LIFT_SCHEMA = defineSchema()({
+    id: "glowLift",
+    family: "button",
+    factory: "glowLift",
+    fields: {
+        lift: { kind: "number", label: "Lift", min: 1, max: 12, step: 1, unit: "px", default: 3 },
+        color: { kind: "color", label: "Shadow colour", default: "color-mix(in oklab, var(--color-sx-ink) 30%, transparent)" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

package/dist/buttons/effects/glow/glowNeon.d.ts

@@ -0,0 +1,12 @@
+import type { ButtonEffect } from "../../types.js";
+import { type ButtonTrigger } from "../kit.js";
+export interface GlowNeonOptions {
+    /** The tube's colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** `"hover"`: it lights up while hovered. `"loop"`: all the time; use one per screen. Default `"hover"`. */
+    readonly trigger?: ButtonTrigger;
+    /** Seconds between flickers. Keep it slow. Default `4`. */
+    readonly duration?: number;
+}
+/** The button lights up like a neon tube, with the odd flicker. */
+export declare function glowNeon(options?: GlowNeonOptions): ButtonEffect;

package/dist/buttons/effects/glow/glowNeon.js

@@ -0,0 +1,46 @@
+import { at, defineButton, labelOf, layerOf, v, varName, whenOn } from "../kit.js";
+const ID = "glowNeon";
+const GLOW = layerOf(ID, "glow");
+const TUBE = layerOf(ID, "tube");
+const FLICKER = "sx-btn-glowNeon";
+const COLOR = v(ID, "color");
+const NAME = v(ID, "name");
+// the shadows stay fixed: only the layers' opacity flickers, so nothing repaints
+const LAYER = `opacity: ${v(ID, "shown")};
+    transition: opacity 0.2s ease-out;
+    animation: ${NAME} ${v(ID, "time")} linear infinite;`;
+const ON = `opacity: 1; animation-name: ${FLICKER};`;
+const CSS = `  ${at(GLOW)} {
+    box-shadow: 0 0 6px ${COLOR}, 0 0 18px ${COLOR}, 0 0 42px ${COLOR};
+    ${LAYER}
+  }
+  ${at(TUBE)} {
+    border: 1px solid ${COLOR};
+    box-shadow: inset 0 0 8px ${COLOR};
+    ${LAYER}
+  }
+${whenOn(ID, GLOW, ON)}
+${whenOn(ID, TUBE, ON)}
+${whenOn(ID, labelOf(ID), `text-shadow: 0 0 8px ${COLOR};`)}
+  @keyframes ${FLICKER} {
+    0%, 91%, 94%, 97%, 100% { opacity: 1; }
+    92% { opacity: 0.45; }
+    95.5% { opacity: 0.65; }
+  }`;
+/** The button lights up like a neon tube, with the odd flicker. */
+export function glowNeon(options = {}) {
+    const loop = options.trigger === "loop";
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "time")]: `${options.duration ?? 4}s`,
+            [varName(ID, "name")]: loop ? FLICKER : "none",
+            [varName(ID, "shown")]: loop ? 1 : 0,
+        },
+        layers: [
+            { slot: "under", part: "glow" },
+            { slot: "edge", part: "tube" },
+        ],
+        needs: loop ? { inView: true } : {},
+    });
+}

package/dist/buttons/effects/glow/glowNeon.schema.d.ts

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

package/dist/buttons/effects/glow/glowNeon.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLOW_NEON_SCHEMA = defineSchema()({
+    id: "glowNeon",
+    family: "button",
+    factory: "glowNeon",
+    fields: {
+        trigger: { kind: "choice", label: "When it lights", values: ["hover", "loop"], labels: { hover: "While hovered", loop: "All the time" }, help: "Use one always-moving button per screen.", default: "hover" },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        duration: { kind: "number", label: "Flicker every", min: 1, max: 12, step: 0.5, unit: "s", default: 4 },
+    },
+});

package/dist/buttons/effects/glow/glowRainbow.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonEffect } from "../../types.js";
+export interface GlowRainbowOptions {
+    /** The rainbow's colours, 2 to 7. Default five bright hues. */
+    readonly colors?: readonly string[];
+    /** The ring's width, px. Default `2`. */
+    readonly width?: number;
+    /** How soft the glow below is, px. Default `12`. */
+    readonly blur?: number;
+    /** Seconds for one drift. Default `3`. */
+    readonly duration?: number;
+}
+export declare const RAINBOW_COLORS: readonly ["oklch(0.72 0.2 25)", "oklch(0.82 0.17 85)", "oklch(0.78 0.2 150)", "oklch(0.72 0.17 240)", "oklch(0.68 0.24 310)"];
+/** A rainbow drifts around the edge, with a blurred copy glowing below the button, all the time. Use one per screen. */
+export declare function glowRainbow(options?: GlowRainbowOptions): ButtonEffect;

package/dist/buttons/effects/glow/glowRainbow.js

@@ -0,0 +1,44 @@
+import { DIR, at, childOf, defineButton, layerOf, v, varName } from "../kit.js";
+import { ringCss } from "../border/ring.js";
+const ID = "glowRainbow";
+const AURA = layerOf(ID, "aura");
+const DRIFT = "sx-btn-glowRainbow";
+export const RAINBOW_COLORS = ["oklch(0.72 0.2 25)", "oklch(0.82 0.17 85)", "oklch(0.78 0.2 150)", "oklch(0.72 0.17 240)", "oklch(0.68 0.24 310)"];
+const STRIP = `{
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 200%;
+    background: linear-gradient(90deg, ${v(ID, "stops")});
+    animation: ${DRIFT} ${v(ID, "time")} linear infinite;
+  }`;
+const CSS = `${ringCss(ID, "ring")}
+  ${at(childOf(ID, "strip", "ring"))} ${STRIP}
+  ${at(AURA)} {
+    inset-block: 55% -5px;
+    inset-inline: 6%;
+    overflow: hidden;
+    filter: blur(calc(${v(ID, "blur")} * 1px));
+  }
+  ${at(childOf(ID, "strip", "aura"))} ${STRIP}
+  @keyframes ${DRIFT} {
+    to { translate: calc(${DIR} * -50%) 0; }
+  }`;
+/** A rainbow drifts around the edge, with a blurred copy glowing below the button, all the time. Use one per screen. */
+export function glowRainbow(options = {}) {
+    const colors = options.colors ?? RAINBOW_COLORS;
+    return defineButton(ID, CSS, {
+        vars: {
+            // the colours twice and back to the first, so sliding by half the strip loops without a seam
+            [varName(ID, "stops")]: [...colors, ...colors, colors[0]].join(", "),
+            [varName(ID, "width")]: options.width ?? 2,
+            [varName(ID, "blur")]: options.blur ?? 12,
+            [varName(ID, "time")]: `${options.duration ?? 3}s`,
+        },
+        layers: [
+            { slot: "under", part: "aura", children: ["strip"] },
+            { slot: "edge", part: "ring", children: ["strip"] },
+        ],
+        needs: { inView: true },
+    });
+}

package/dist/buttons/effects/glow/glowRainbow.schema.d.ts

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

package/dist/buttons/effects/glow/glowRainbow.schema.js

@@ -0,0 +1,13 @@
+import { colorsField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const GLOW_RAINBOW_SCHEMA = defineSchema()({
+    id: "glowRainbow",
+    family: "button",
+    factory: "glowRainbow",
+    fields: {
+        colors: colorsField(["oklch(0.72 0.2 25)", "oklch(0.82 0.17 85)", "oklch(0.78 0.2 150)", "oklch(0.72 0.17 240)", "oklch(0.68 0.24 310)"], 2, 7),
+        width: { kind: "number", label: "Ring width", min: 1, max: 6, step: 0.5, unit: "px", default: 2 },
+        blur: { kind: "number", label: "Glow softness", min: 4, max: 24, step: 1, unit: "px", default: 12 },
+        duration: { kind: "number", label: "Drift time", min: 1, max: 10, step: 0.5, unit: "s", default: 3 },
+    },
+});

package/dist/buttons/effects/glow/glowShimmer.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface GlowShimmerOptions {
+    /** The spark's colour. Default the label colour on a primary fill. */
+    readonly color?: string;
+    /** The ring's width, px. Default `1.5`. */
+    readonly width?: number;
+    /** Seconds for one lap. Default `3`. */
+    readonly duration?: number;
+}
+/** A spark of light circles just inside the edge, over a faint glow from below, all the time. Use one per screen. */
+export declare function glowShimmer(options?: GlowShimmerOptions): ButtonEffect;

package/dist/buttons/effects/glow/glowShimmer.js

@@ -0,0 +1,25 @@
+import { at, defineButton, layerOf, v, varName } from "../kit.js";
+import { ringCss, spinnerCss } from "../border/ring.js";
+const ID = "glowShimmer";
+const SHEEN = layerOf(ID, "sheen");
+const CSS = `${ringCss(ID, "ring")}
+${spinnerCss(ID, "spin", `conic-gradient(transparent 80%, ${v(ID, "color")})`, "sx-btn-glowShimmer", "ring")}
+  ${at(SHEEN)} {
+    box-shadow: inset 0 -8px 12px -8px ${v(ID, "color")};
+  }`;
+/** A spark of light circles just inside the edge, over a faint glow from below, all the time. Use one per screen. */
+export function glowShimmer(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-on-primary)",
+            [varName(ID, "width")]: options.width ?? 1.5,
+            [varName(ID, "time")]: `${options.duration ?? 3}s`,
+            [varName(ID, "rest")]: "running",
+        },
+        layers: [
+            { slot: "fill", part: "sheen" },
+            { slot: "edge", part: "ring", children: ["spin"] },
+        ],
+        needs: { inView: true },
+    });
+}

package/dist/buttons/effects/glow/glowShimmer.schema.d.ts

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

package/dist/buttons/effects/glow/glowShimmer.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLOW_SHIMMER_SCHEMA = defineSchema()({
+    id: "glowShimmer",
+    family: "button",
+    factory: "glowShimmer",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-on-primary)" },
+        width: { kind: "number", label: "Ring width", min: 1, max: 6, step: 0.5, unit: "px", default: 1.5 },
+        duration: { kind: "number", label: "Lap time", min: 1, max: 10, step: 0.5, unit: "s", default: 3 },
+    },
+});

package/dist/buttons/effects/glow/glowShine.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonEffect } from "../../types.js";
+import { type ButtonTrigger } from "../kit.js";
+export interface GlowShineOptions {
+    /** The light's colour. Default the label colour on a primary fill, half see-through. */
+    readonly color?: string;
+    /** Degrees the light leans. Default `20`. */
+    readonly angle?: number;
+    /** `"hover"`: it crosses once on hover. `"loop"`: also every few seconds; use one per screen. Default `"hover"`. */
+    readonly trigger?: ButtonTrigger;
+    /** Seconds one crossing takes. Default `0.7`. */
+    readonly duration?: number;
+    /** With `"loop"`: seconds between crossings. Default `4`. */
+    readonly every?: number;
+}
+/** A diagonal light crosses the button: on hover, or every few seconds on the main call to action. */
+export declare function glowShine(options?: GlowShineOptions): ButtonEffect;

package/dist/buttons/effects/glow/glowShine.js

@@ -0,0 +1,41 @@
+import { DIR, at, defineButton, layerOf, v, varName, whenOn } from "../kit.js";
+const ID = "glowShine";
+const LAYER = layerOf(ID);
+const PASS = "sx-btn-glowShine";
+const REPEAT = "sx-btn-glowShine-repeat";
+const OFF = `translate: calc(${DIR} * -180%) 0;`;
+const PAST = `translate: calc(${DIR} * 420%) 0;`;
+const CSS = `  ${at(LAYER)} {
+    inset-inline: 0 auto;
+    inline-size: 35%;
+    border-radius: 0;
+    background: linear-gradient(90deg, transparent, ${v(ID, "color")}, transparent);
+    transform: skewX(calc(${DIR} * ${v(ID, "angle")} * -1deg));
+    ${OFF}
+    animation: ${v(ID, "name")} ${v(ID, "every")} linear infinite;
+  }
+${whenOn(ID, LAYER, `animation: ${PASS} ${v(ID, "time")} ease-out;`)}
+  @keyframes ${PASS} {
+    from { ${OFF} }
+    to { ${PAST} }
+  }
+  @keyframes ${REPEAT} {
+    0% { ${OFF} }
+    18% { ${PAST} }
+    100% { ${PAST} }
+  }`;
+/** A diagonal light crosses the button: on hover, or every few seconds on the main call to action. */
+export function glowShine(options = {}) {
+    const loop = options.trigger === "loop";
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-on-primary) 50%, transparent)",
+            [varName(ID, "angle")]: options.angle ?? 20,
+            [varName(ID, "time")]: `${options.duration ?? 0.7}s`,
+            [varName(ID, "every")]: `${options.every ?? 4}s`,
+            [varName(ID, "name")]: loop ? REPEAT : "none",
+        },
+        layers: [{ slot: "fill" }],
+        needs: loop ? { inView: true } : {},
+    });
+}

package/dist/buttons/effects/glow/glowShine.schema.d.ts

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

package/dist/buttons/effects/glow/glowShine.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLOW_SHINE_SCHEMA = defineSchema()({
+    id: "glowShine",
+    family: "button",
+    factory: "glowShine",
+    fields: {
+        trigger: { kind: "choice", label: "When it plays", values: ["hover", "loop"], labels: { hover: "On hover", loop: "Also every few seconds" }, help: "Use one always-moving button per screen.", default: "hover" },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-on-primary) 50%, transparent)" },
+        angle: { kind: "number", label: "Lean", min: 0, max: 40, step: 1, unit: "°", default: 20 },
+        duration: { kind: "number", label: "Crossing time", min: 0.2, max: 2, step: 0.05, unit: "s", default: 0.7 },
+        every: { kind: "number", label: "Repeats every", min: 2, max: 15, step: 0.5, unit: "s", help: "When it also plays by itself.", default: 4 },
+    },
+});

package/dist/buttons/effects/glow/glowShiny.d.ts

@@ -0,0 +1,12 @@
+import type { ButtonEffect } from "../../types.js";
+import { type ButtonTrigger } from "../kit.js";
+export interface GlowShinyOptions {
+    /** The sheen's colour. Default the label colour on a primary fill, faint. */
+    readonly color?: string;
+    /** `"hover"`: it slides while hovered. `"loop"`: all the time; use one per screen. Default `"hover"`. */
+    readonly trigger?: ButtonTrigger;
+    /** Seconds for one pass. Default `2.5`. */
+    readonly duration?: number;
+}
+/** A broad, soft sheen slides slowly across the whole button. */
+export declare function glowShiny(options?: GlowShinyOptions): ButtonEffect;

package/dist/buttons/effects/glow/glowShiny.js

@@ -0,0 +1,30 @@
+import { DIR, at, defineButton, layerOf, v, varName, whenOn } from "../kit.js";
+const ID = "glowShiny";
+const LAYER = layerOf(ID);
+const SLIDE = "sx-btn-glowShiny";
+const OFF = `translate: calc(${DIR} * -33.4%) 0;`;
+const CSS = `  ${at(LAYER)} {
+    inset-inline: -100%;
+    border-radius: 0;
+    background: linear-gradient(105deg, transparent 40%, ${v(ID, "color")} 50%, transparent 60%);
+    ${OFF}
+    animation: ${v(ID, "name")} ${v(ID, "time")} linear infinite;
+  }
+${whenOn(ID, LAYER, `animation-name: ${SLIDE};`)}
+  @keyframes ${SLIDE} {
+    from { ${OFF} }
+    to { translate: calc(${DIR} * 33.4%) 0; }
+  }`;
+/** A broad, soft sheen slides slowly across the whole button. */
+export function glowShiny(options = {}) {
+    const loop = options.trigger === "loop";
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-on-primary) 35%, transparent)",
+            [varName(ID, "time")]: `${options.duration ?? 2.5}s`,
+            [varName(ID, "name")]: loop ? SLIDE : "none",
+        },
+        layers: [{ slot: "fill" }],
+        needs: loop ? { inView: true } : {},
+    });
+}

package/dist/buttons/effects/glow/glowShiny.schema.d.ts

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

package/dist/buttons/effects/glow/glowShiny.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLOW_SHINY_SCHEMA = defineSchema()({
+    id: "glowShiny",
+    family: "button",
+    factory: "glowShiny",
+    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" },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-on-primary) 35%, transparent)" },
+        duration: { kind: "number", label: "Pass time", min: 0.5, max: 8, step: 0.5, unit: "s", default: 2.5 },
+    },
+});

package/dist/buttons/effects/icon/iconExpand.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonEffect } from "../../types.js";
+export interface IconExpandOptions {
+    /** Seconds it takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** An icon-only button grows to show its label. Screen readers always read the label; on a phone it always shows. */
+export declare function iconExpand(options?: IconExpandOptions): ButtonEffect;