@mkbabb/glass-ui 3.8.0 → 3.10.0

package/dist/composables/glass/createGPUCanvas.d.ts

@@ -1,40 +0,0 @@
-/** The per-frame hooks a consumer's WebGPU `setup` returns (mirrors WebGLCanvasFrame). */
-export interface GPUCanvasFrame {
-    frame: (timeSec: number) => void;
-    shouldContinue: () => boolean;
-    resize: () => void;
-    time?: (elapsedSec: number) => number;
-    teardown?: () => void;
-}
-export interface GPUCanvasSetupArgs {
-    device: GPUDevice;
-    context: GPUCanvasContext;
-    /** The swapchain format (`navigator.gpu.getPreferredCanvasFormat()`). */
-    format: GPUTextureFormat;
-}
-export interface GPUCanvasOptions {
-    /** The pre-acquired `GPUDevice` (from `resolveRenderModeAsync`'s adapter→device). */
-    device: GPUDevice;
-    /** Alpha mode for the swapchain (premultiplied to match the WebGL2 premultiply). */
-    alphaMode?: GPUCanvasAlphaMode;
-    mode?: "live" | "capture";
-    respectReducedMotion?: boolean;
-    /** Build the pipeline + bind group on the configured context. Returns frame hooks. */
-    setup: (args: GPUCanvasSetupArgs) => GPUCanvasFrame;
-}
-export interface GPUCanvasHandle {
-    arm: () => void;
-    suspend: (reason?: "tab-hidden" | "off-screen" | "manual") => void;
-    resume: (reason?: "tab-hidden" | "off-screen" | "manual") => void;
-    wake: () => void;
-    renderAt: (timeSec: number) => void;
-    dispose: () => void;
-    readonly device: GPUDevice | null;
-    readonly reducedMotion: boolean;
-}
-/**
- * Build a WebGPU canvas over the shared lifecycle core. The `GPUDevice` is acquired
- * by `resolveRenderModeAsync` (the probe) and passed in — `createGPUCanvas` configures
- * the canvas context + threads the consumer `setup` through the agnostic schedule.
- */
-export declare function createGPUCanvas(canvas: HTMLCanvasElement, options: GPUCanvasOptions): GPUCanvasHandle;

package/dist/disco-glyph.d.ts

@@ -1 +0,0 @@
-export * from "./components/custom/disco-glyph";

package/dist/disco-glyph.js

@@ -1,2 +0,0 @@
-import { t as e } from "./DiscoGlyph-CG0F410s.js";
-export { e as DiscoGlyph };

package/dist/glass-carousel.d.ts

@@ -1 +0,0 @@
-export * from "./components/custom/glass-carousel";

package/dist/glass-carousel.js

@@ -1,219 +0,0 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./_plugin-vue_export-helper-ok8pgSl5.js";
-import { computed as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, nextTick as s, normalizeClass as c, normalizeStyle as l, onMounted as u, onUnmounted as d, openBlock as f, ref as p, renderSlot as m, unref as h, useTemplateRef as g, watch as _, withCtx as v } from "vue";
-import { ScrollAreaRoot as y, ScrollAreaViewport as b } from "reka-ui";
-//#region src/components/custom/glass-carousel/useGlassCarousel.ts
-function x() {
-	return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("container-type", "scroll-state") && !CSS.supports("container-type", "gl-not-a-real-container-type");
-}
-function S(e) {
-	let { orientation: t, expanded: n, rootEl: r, viewportEl: i, fadeMs: a = 60 } = e, o = x();
-	function c() {
-		return o && t.value === "vertical";
-	}
-	let l = p(!1), f = p(!1);
-	function m() {
-		let e = i.value;
-		if (!e) {
-			l.value = !1, f.value = !1;
-			return;
-		}
-		t.value === "vertical" ? (l.value = e.scrollTop > 1, f.value = e.scrollTop < e.scrollHeight - e.clientHeight - 1) : (l.value = e.scrollLeft > 1, f.value = e.scrollLeft < e.scrollWidth - e.clientWidth - 1);
-	}
-	let h = null, g = null;
-	function v() {
-		if (y(), c()) return;
-		let e = i.value;
-		if (!e) {
-			m();
-			return;
-		}
-		h = m, g = e, e.addEventListener("scroll", h, { passive: !0 }), m();
-	}
-	function y() {
-		h && g && g.removeEventListener("scroll", h), h = null, g = null;
-	}
-	_([i, t], v), u(v), d(y);
-	function b(e) {
-		let t = i.value;
-		if (!t) return;
-		let n = t.children[e];
-		n && n.scrollIntoView({
-			behavior: "smooth",
-			block: "nearest",
-			inline: "nearest"
-		});
-	}
-	let S = p(n.value), C = p(!1), w = p(null), T = p(!1), E = null, D = null, O = 0;
-	function k() {
-		E &&= (clearTimeout(E), null), D &&= (clearTimeout(D), null);
-	}
-	_(n, () => {
-		let e = r.value;
-		if (!e) {
-			S.value = n.value;
-			return;
-		}
-		k();
-		let i = ++O, o = t.value === "vertical", c = e.getBoundingClientRect(), l = o ? c.height : c.width;
-		T.value = !0, w.value = `${l}px`, C.value = !0, E = setTimeout(() => {
-			E = null, i === O && (S.value = n.value, s(() => {
-				i === O && (w.value = null, s(() => {
-					if (i !== O) return;
-					let t = e.getBoundingClientRect(), n = o ? t.height : t.width;
-					if (Math.abs(l - n) < 1) {
-						T.value = !1, w.value = null, C.value = !1;
-						return;
-					}
-					w.value = `${l}px`, s(() => {
-						i === O && (e.offsetWidth, T.value = !1, requestAnimationFrame(() => {
-							if (i !== O) return;
-							w.value = `${n}px`;
-							let t = parseFloat(getComputedStyle(e).transitionDuration) * 1e3 || 300;
-							D = setTimeout(() => {
-								i === O && (C.value = !1);
-							}, t * .55);
-						}));
-					});
-				}));
-			}));
-		}, a);
-	});
-	function A(e) {
-		e.target === r.value && (e.propertyName === "height" || e.propertyName === "width") && (w.value = null, C.value = !1);
-	}
-	d(k);
-	function j() {
-		return c() ? "" : l.value && f.value ? t.value === "vertical" ? "scroll-fade-y" : "scroll-fade-mask" : l.value ? t.value === "vertical" ? "scroll-fade-top" : "scroll-fade-mask" : f.value ? t.value === "vertical" ? "scroll-fade-bottom" : "scroll-fade-mask" : "";
-	}
-	return {
-		canScrollStart: l,
-		canScrollEnd: f,
-		getOverflowFadeClass: j,
-		updateOverflow: m,
-		scrollToItem: b,
-		visualExpanded: S,
-		isTransitioning: C,
-		transitionSize: w,
-		suppressTransition: T,
-		onTransitionEnd: A
-	};
-}
-//#endregion
-//#region src/components/custom/glass-carousel/GlassCarousel.vue
-var C = /* @__PURE__ */ t(/* @__PURE__ */ o({
-	__name: "GlassCarousel",
-	props: {
-		orientation: { default: "vertical" },
-		expanded: {
-			type: Boolean,
-			default: !0
-		},
-		snap: {
-			type: [Boolean, String],
-			default: !1
-		},
-		fadeOverflow: {
-			type: Boolean,
-			default: !0
-		},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(t, { expose: o }) {
-		let s = t, u = g("rootEl"), d = p(null), { canScrollStart: x, canScrollEnd: C, getOverflowFadeClass: w, updateOverflow: T, scrollToItem: E, visualExpanded: D, isTransitioning: O, transitionSize: k, suppressTransition: A, onTransitionEnd: j } = S({
-			orientation: n(() => s.orientation),
-			expanded: n(() => s.expanded),
-			rootEl: u,
-			viewportEl: d
-		});
-		_(g("scrollViewport"), (e) => {
-			d.value = e?.$el ?? null, T();
-		}, { immediate: !0 });
-		let M = n(() => {
-			if (!s.snap) return "";
-			let e = s.snap === !0 ? "proximity" : s.snap;
-			return `[scroll-snap-type:${s.orientation === "vertical" ? "y" : "x"}_${e}]`;
-		}), N = n(() => {
-			if (k.value != null) return s.orientation === "vertical" ? { height: k.value } : { width: k.value };
-		});
-		return o({
-			canScrollStart: x,
-			canScrollEnd: C,
-			scrollToItem: E,
-			isTransitioning: O,
-			visualExpanded: D
-		}), (n, o) => (f(), r("div", {
-			ref_key: "rootEl",
-			ref: u,
-			"data-slot": "glass-carousel",
-			class: c(h(e)("glass-carousel glass-wash", {
-				"glass-carousel--vertical": t.orientation === "vertical",
-				"glass-carousel--horizontal": t.orientation === "horizontal",
-				"glass-carousel--expanded": h(D),
-				"glass-carousel--collapsed": !h(D),
-				"glass-carousel--animating": h(O),
-				"glass-carousel--no-transition": h(A)
-			}, s.class)),
-			style: l(N.value),
-			onTransitionend: o[0] ||= (...e) => h(j) && h(j)(...e)
-		}, [a(h(y), { class: "glass-carousel__scroll-root" }, {
-			default: v(() => [a(h(b), {
-				ref: "scrollViewport",
-				class: c([
-					"glass-carousel__viewport",
-					M.value,
-					t.fadeOverflow ? h(w)() : ""
-				])
-			}, {
-				default: v(() => [i("div", { class: c(["glass-carousel__content", {
-					"glass-carousel__content--vertical": t.orientation === "vertical",
-					"glass-carousel__content--horizontal": t.orientation === "horizontal"
-				}]) }, [m(n.$slots, "default", {}, void 0, !0)], 2)]),
-				_: 3
-			}, 8, ["class"])]),
-			_: 3
-		})], 38));
-	}
-}), [["__scopeId", "data-v-f114b9d9"]]), w = ["data-state", "aria-pressed"], T = /* @__PURE__ */ t(/* @__PURE__ */ o({
-	__name: "GlassCarouselItem",
-	props: {
-		active: {
-			type: Boolean,
-			default: !1
-		},
-		expandable: {
-			type: Boolean,
-			default: !0
-		},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	emits: ["click"],
-	setup(t, { emit: n }) {
-		let i = t, a = n;
-		return (n, o) => (f(), r("button", {
-			type: "button",
-			"data-slot": "glass-carousel-item",
-			"data-state": t.active ? "active" : "inactive",
-			"aria-pressed": t.active,
-			class: c(h(e)("glass-carousel-item focus-ring tap-squish", {
-				"glass-carousel-item--active": t.active,
-				"glass-carousel-item--expandable": t.expandable
-			}, i.class)),
-			onClick: o[0] ||= (e) => a("click", e)
-		}, [m(n.$slots, "default", {}, void 0, !0)], 10, w));
-	}
-}), [["__scopeId", "data-v-a2ca29d1"]]);
-//#endregion
-export { C as GlassCarousel, T as GlassCarouselItem, S as useGlassCarousel };

package/dist/glyph-face.d.ts

@@ -1 +0,0 @@
-export * from "./components/custom/glyph-face";

package/dist/glyph-face.js

@@ -1,3 +0,0 @@
-import { n as e, r as t, t as n } from "./keys-BsYjEFOW.js";
-import { t as r } from "./GlyphFace-DRjDkB0s.js";
-export { n as GLYPH_FACE_SILHOUETTE_KEY, r as GlyphFace, e as provideGlyphFaceSilhouette, t as useOptionalGlyphFaceSilhouette };

package/dist/keys-BsYjEFOW.js

@@ -1,9 +0,0 @@
-import { t as e } from "./createContext-B44Sah_H.js";
-//#region src/components/custom/glyph-face/keys.ts
-var t = e("glass-ui:glyph-face-silhouette"), n = t.KEY;
-function r(e) {
-	t.provide(e);
-}
-var i = t.use;
-//#endregion
-export { r as n, i as r, n as t };

package/dist/responsive-tabs.d.ts

@@ -1 +0,0 @@
-export * from "./components/custom/responsive-tabs";

package/dist/responsive-tabs.js

@@ -1,95 +0,0 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { a as t, i as n, o as r, r as i, s as a } from "./SelectScrollDownButton-C7TRe-ep.js";
-import { t as o } from "./UnderlineTabs-Uxn-R3MT.js";
-import { Fragment as s, computed as c, createBlock as l, createElementBlock as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, onBeforeUnmount as g, onMounted as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useModel as C, withCtx as w } from "vue";
-//#endregion
-//#region src/components/custom/responsive-tabs/ResponsiveTabs.vue
-var T = /* @__PURE__ */ p({
-	__name: "ResponsiveTabs",
-	props: /* @__PURE__ */ m({
-		options: {},
-		desktopOptions: { default: null },
-		breakpoint: { default: "640px" },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		desktopClass: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		mobileTriggerClass: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		ariaLabel: {}
-	}, {
-		modelValue: { required: !0 },
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(p) {
-		let m = p, T = C(p, "modelValue"), E = y(!0), D = null;
-		function O(e) {
-			E.value = e.matches;
-		}
-		_(() => {
-			typeof window > "u" || !window.matchMedia || (D = window.matchMedia(`(min-width: ${m.breakpoint})`), E.value = D.matches, D.addEventListener("change", O));
-		}), g(() => {
-			D?.removeEventListener("change", O), D = null;
-		});
-		let k = c(() => m.desktopOptions ?? m.options), A = c(() => {
-			let e = k.value;
-			return e.some((e) => e.value === T.value) ? T.value : e[0]?.value ?? T.value;
-		}), j = c(() => m.ariaLabel ?? m.options.find((e) => e.value === T.value)?.label ?? "Select");
-		function M(e) {
-			typeof e == "string" && (T.value = e);
-		}
-		return (c, g) => E.value ? (v(), l(S(o), {
-			key: 0,
-			options: k.value,
-			"model-value": A.value,
-			class: h(S(e)("responsive-tabs__desktop text-body", m.class, p.desktopClass)),
-			"onUpdate:modelValue": M
-		}, null, 8, [
-			"options",
-			"model-value",
-			"class"
-		])) : (v(), u("div", {
-			key: 1,
-			class: h(S(e)("responsive-tabs__mobile w-fit", m.class))
-		}, [f(S(a), {
-			"model-value": T.value,
-			"onUpdate:modelValue": M
-		}, {
-			default: w(() => [f(S(t), {
-				"aria-label": j.value,
-				class: h(S(e)("responsive-tabs__trigger text-small w-auto min-w-input-sm", p.mobileTriggerClass))
-			}, {
-				default: w(() => [f(S(r))]),
-				_: 1
-			}, 8, ["aria-label", "class"]), f(S(n), null, {
-				default: w(() => [(v(!0), u(s, null, b(p.options, (e) => (v(), l(S(i), {
-					key: e.value,
-					value: e.value
-				}, {
-					default: w(() => [d(x(e.label), 1)]),
-					_: 2
-				}, 1032, ["value"]))), 128))]),
-				_: 1
-			})]),
-			_: 1
-		}, 8, ["model-value"])], 2));
-	}
-});
-//#endregion
-export { T as ResponsiveTabs };

package/dist/styles/disco-glyph.css

@@ -1,26 +0,0 @@
-/* disco-glyph.css — host rule for <DiscoGlyph>.
- *
- * Per P.W3 sub-B. The component renders an inline <svg> with a faceted
- * gradient + specular cap painted over the silhouette path. The host
- * rule scopes layout (block flow, inherit colour) and exposes a
- * minimal opt-in selector for phase-tinted state styling.
- *
- * Self-contained sheet; no token additions. Consumers may override
- * via the `--phase-color` cascade established by the chassis layer.
- */
-
-@layer components {
-    .disco-glyph {
-        display: inline-block;
-        width: 100%;
-        height: 100%;
-        color: currentColor;
-        line-height: 0;
-    }
-
-    .disco-glyph--phase-tinted {
-        /* Hook for consumers that animate hue under phase changes;
-         * the gradient stops already read currentColor or an explicit
-         * phaseColor prop, so this class stays empty by default. */
-    }
-}

package/dist/styles/glyph-face.css

@@ -1,92 +0,0 @@
-/* glyph-face.css — three-layer composition for <GlyphFace>.
- *
- * Per W2.7 §19 and Q.W3 §F2 + §F8. Wraps a slotted glyph (lucide stroke
- * or DiscoGlyph SVG) with a phase-tinted radial backplate (visible only
- * when [data-active="true"]) and a 165° linear-gradient catch-light cap.
- * The slotted silhouette stays `currentColor` — Vignelli-clean — while
- * the disco punch lives in the surrounding layers.
- *
- * Q.W3.A.1 inversion: when no silhouette resolves, the cap renders
- * nothing (rather than a wrapper-rectangle fallback). Consumers passing
- * `silhouette` continue to consume `clip-path: path(var(--gf-silhouette))`;
- * the lucide consumer sites in ActionCluster + SettingsCog publish via
- * the silhouette table from `@src/components/speedtest/icons/lucide-silhouettes.ts`,
- * and DiscoGlyph hands its silhouette upward via provide/inject for
- * disco wrappers. The fail-safe is now "no cap" not "wrong cap".
- *
- * Q.W3.A.2 default raise: --gf-cap-strength 0.35 → 0.55, mix-blend-mode
- * overlay → screen. `screen` composes correctly against the translucent
- * dock substrates (`--card` at 50–60% opacity); `overlay` collapses
- * there because its contrast lift requires an opaque underlay. Consumers
- * needing the metallic-overlay punch declare `mix-blend-mode: overlay`
- * via class or `--gf-cap-blend` override.
- *
- * Self-contained sheet; no token additions beyond what's already in
- * `tokens.css`. Consumers may override the cap blend mode and backplate
- * radius with the documented `--gf-*` custom properties.
- */
-
-@layer components {
-    .glyph-face {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        isolation: isolate;
-        --gf-tint: transparent;
-        --gf-cap-strength: 0.55;
-        --gf-cap-blend: screen;
-        --gf-cap-radius: 50%;
-    }
-
-    .glyph-face-backplate {
-        position: absolute;
-        inset: -25%;
-        border-radius: 50%;
-        background: radial-gradient(
-            ellipse at 30% 30%,
-            var(--gf-tint) 0%,
-            transparent 70%
-        );
-        opacity: 0;
-        transition: opacity var(--duration-fast) var(--spring-snappy);
-        z-index: -1;
-        pointer-events: none;
-    }
-
-    .glyph-face[data-active="true"] .glyph-face-backplate {
-        opacity: 1;
-    }
-
-    /* Cap fail-safe: by default render nothing. The cap only paints
-       when --gf-silhouette resolves (via prop or provide/inject from
-       a DiscoGlyph descendant). This closes the wrapper-rectangle
-       leak the lucide consumers in ActionCluster + SettingsCog hit
-       under the prior opt-in path. */
-    .glyph-face-cap {
-        position: absolute;
-        inset: 0;
-        background: transparent;
-        pointer-events: none;
-        mix-blend-mode: var(--gf-cap-blend);
-    }
-
-    .glyph-face[style*="--gf-silhouette"] .glyph-face-cap {
-        background: linear-gradient(
-            165deg,
-            rgba(255, 255, 255, var(--gf-cap-strength, 0.55)) 0%,
-            transparent 40%
-        );
-        clip-path: var(--gf-silhouette);
-    }
-
-    .dark .glyph-face {
-        --gf-cap-strength: 0.32;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        .glyph-face-backplate {
-            transition: none;
-        }
-    }
-}

package/dist/vReveal-CqaCz_mC.js

@@ -1,44 +0,0 @@
-//#region src/utils/moveBefore.ts
-function e(e, t, n) {
-	let r = e;
-	typeof r.moveBefore == "function" ? r.moveBefore(t, n) : e.insertBefore(t, n);
-}
-function t() {
-	return typeof Element < "u" && "moveBefore" in Element.prototype;
-}
-//#endregion
-//#region src/utils/platformSupport.ts
-function n() {
-	return typeof globalThis.scheduler?.postTask == "function";
-}
-//#endregion
-//#region src/composables/motion/useViewTransition.ts
-function r() {
-	return typeof document < "u" && typeof document.startViewTransition == "function";
-}
-function i(e, t) {
-	let n = typeof document > "u" ? void 0 : document;
-	if (!n || typeof n.startViewTransition != "function") return e(), {
-		finished: Promise.resolve(),
-		transitioned: !1
-	};
-	let r = t?.types && t.types.length > 0 ? n.startViewTransition({
-		update: () => e(),
-		types: t.types
-	}) : n.startViewTransition(() => e());
-	return r.ready?.catch(() => {}), {
-		finished: r.finished.then(() => void 0, () => void 0),
-		transitioned: !0
-	};
-}
-//#endregion
-//#region src/composables/motion/vReveal.ts
-function a(e, t) {
-	e.setAttribute("data-reveal", t.arg === "fade" ? "fade" : ""), e.style.setProperty("--d", String(t.value ?? 0));
-}
-var o = {
-	mounted: a,
-	updated: a
-};
-//#endregion
-export { e as a, n as i, i as n, t as o, r, o as t };

package/src/styles/disco-glyph.css

@@ -1,26 +0,0 @@
-/* disco-glyph.css — host rule for <DiscoGlyph>.
- *
- * Per P.W3 sub-B. The component renders an inline <svg> with a faceted
- * gradient + specular cap painted over the silhouette path. The host
- * rule scopes layout (block flow, inherit colour) and exposes a
- * minimal opt-in selector for phase-tinted state styling.
- *
- * Self-contained sheet; no token additions. Consumers may override
- * via the `--phase-color` cascade established by the chassis layer.
- */
-
-@layer components {
-    .disco-glyph {
-        display: inline-block;
-        width: 100%;
-        height: 100%;
-        color: currentColor;
-        line-height: 0;
-    }
-
-    .disco-glyph--phase-tinted {
-        /* Hook for consumers that animate hue under phase changes;
-         * the gradient stops already read currentColor or an explicit
-         * phaseColor prop, so this class stays empty by default. */
-    }
-}

package/src/styles/glyph-face.css

@@ -1,92 +0,0 @@
-/* glyph-face.css — three-layer composition for <GlyphFace>.
- *
- * Per W2.7 §19 and Q.W3 §F2 + §F8. Wraps a slotted glyph (lucide stroke
- * or DiscoGlyph SVG) with a phase-tinted radial backplate (visible only
- * when [data-active="true"]) and a 165° linear-gradient catch-light cap.
- * The slotted silhouette stays `currentColor` — Vignelli-clean — while
- * the disco punch lives in the surrounding layers.
- *
- * Q.W3.A.1 inversion: when no silhouette resolves, the cap renders
- * nothing (rather than a wrapper-rectangle fallback). Consumers passing
- * `silhouette` continue to consume `clip-path: path(var(--gf-silhouette))`;
- * the lucide consumer sites in ActionCluster + SettingsCog publish via
- * the silhouette table from `@src/components/speedtest/icons/lucide-silhouettes.ts`,
- * and DiscoGlyph hands its silhouette upward via provide/inject for
- * disco wrappers. The fail-safe is now "no cap" not "wrong cap".
- *
- * Q.W3.A.2 default raise: --gf-cap-strength 0.35 → 0.55, mix-blend-mode
- * overlay → screen. `screen` composes correctly against the translucent
- * dock substrates (`--card` at 50–60% opacity); `overlay` collapses
- * there because its contrast lift requires an opaque underlay. Consumers
- * needing the metallic-overlay punch declare `mix-blend-mode: overlay`
- * via class or `--gf-cap-blend` override.
- *
- * Self-contained sheet; no token additions beyond what's already in
- * `tokens.css`. Consumers may override the cap blend mode and backplate
- * radius with the documented `--gf-*` custom properties.
- */
-
-@layer components {
-    .glyph-face {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        isolation: isolate;
-        --gf-tint: transparent;
-        --gf-cap-strength: 0.55;
-        --gf-cap-blend: screen;
-        --gf-cap-radius: 50%;
-    }
-
-    .glyph-face-backplate {
-        position: absolute;
-        inset: -25%;
-        border-radius: 50%;
-        background: radial-gradient(
-            ellipse at 30% 30%,
-            var(--gf-tint) 0%,
-            transparent 70%
-        );
-        opacity: 0;
-        transition: opacity var(--duration-fast) var(--spring-snappy);
-        z-index: -1;
-        pointer-events: none;
-    }
-
-    .glyph-face[data-active="true"] .glyph-face-backplate {
-        opacity: 1;
-    }
-
-    /* Cap fail-safe: by default render nothing. The cap only paints
-       when --gf-silhouette resolves (via prop or provide/inject from
-       a DiscoGlyph descendant). This closes the wrapper-rectangle
-       leak the lucide consumers in ActionCluster + SettingsCog hit
-       under the prior opt-in path. */
-    .glyph-face-cap {
-        position: absolute;
-        inset: 0;
-        background: transparent;
-        pointer-events: none;
-        mix-blend-mode: var(--gf-cap-blend);
-    }
-
-    .glyph-face[style*="--gf-silhouette"] .glyph-face-cap {
-        background: linear-gradient(
-            165deg,
-            rgba(255, 255, 255, var(--gf-cap-strength, 0.55)) 0%,
-            transparent 40%
-        );
-        clip-path: var(--gf-silhouette);
-    }
-
-    .dark .glyph-face {
-        --gf-cap-strength: 0.32;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        .glyph-face-backplate {
-            transition: none;
-        }
-    }
-}