@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/utilities/metal.css

@@ -11,7 +11,9 @@
        base, light, dark)` band off the bound metal quad, `background-clip: text`.
      • `.metal-{gold,silver,bronze}-border` — the swept metallic RIM (the §N6
        selected-item-border consumer): the SAME `--metal-shimmer-color`-bound
-       gradient on a `border-image`-sliced rim, swept by the SAME keyframe.
+       gradient painted as a MASKED BAND on a `::before` overlay (the house
+       border-ring idiom, BI.W-METAL-RIM-BAND), swept by the SAME keyframe — so the
+       rim FOLLOWS `border-radius` (a `border-image` squared the corners).
      • `.metal-rainbow-rim` — the prismatic gilt-figure / record-badge rim: it
        COMPOSES W-GLASS-ACCENT's `--glass-accent` rim seam (it does NOT re-author
        the rim) by binding the accent channel to a swept rainbow hue.
@@ -105,43 +107,94 @@
         --metal-stop-base: var(--color-bronze);
     }
 
-    /* ── The swept metallic RIM (the §N6 selected-item-border consumer) ───────
-       The SAME `--metal-shimmer-color`-bound gradient applied to a `border-image`
-       slice — a swept metallic RIM, not a text fill. `border-image` reads the same
-       `background`-position-swept gradient (the metal-shimmer-sweep keyframe drives
-       the `background-position`; the `border-image-source` references the SAME
-       gradient via the stop slots), so ONE keyframe drives both registers. The rim
-       sits over the surface's own background (no `background-clip: text`). */
+    /* ── The swept metallic RIM — a MASKED BAND on a dedicated ::before overlay ──
+       (BI.W-METAL-RIM-BAND — the ruling-10 band-on-overlay reform.)
+
+       `border-image` SQUARES the corners on a rounded host (UF-A7 / FAM-4 — the
+       exact defect BorderProgress's masked-conic avoided), so the swept rim is
+       re-expressed as the house border-ring idiom (the in-repo precedent at
+       border-progress.css:55-66): a `--metal-shimmer-color`-bound gradient painted
+       on a `::before` OVERLAY whose `mask-composite: exclude` cuts a border-box
+       fill AGAINST a padding-box fill, leaving ONLY the border band — which FOLLOWS
+       `border-radius` exactly. The band lives on the OVERLAY, never the host
+       (ruling 10): the host's own content/backdrop is untouched (a glass card
+       keeps its interior; the rim hugs its radii — the pass-4b direct-host
+       application was the regression pass-5 re-forms).
+
+       The `metal-shimmer-sweep` keyframe (pure `background-position`, animations.css)
+       rides the ::before band UNCHANGED — ONE keyframe, both registers (text-clip +
+       rim). `border-image` is DELETED (clean break, no alias). */
     .metal-gold-border,
     .metal-silver-border,
     .metal-bronze-border {
         --metal-stop-dark: var(--color-gold-dark);
         --metal-stop-light: var(--color-gold-light);
         --metal-stop-base: var(--color-gold);
-        border: var(--metal-border-width, 2px) solid transparent;
-        border-image: linear-gradient(
+    }
+
+    /* ── The masked-band overlay — MANDATORY @supports gate ──────────────────
+       Without the gate a mask-composite gap engine would paint the gradient as a
+       FULL BOX fill (a real break). With it the rim reads on the genuine band; the
+       `@supports not (…)` fall (below) keeps a solid metal inset ring so the rim
+       still READS (only the travelling sheen is lost — an honest degrade, the
+       primary rim present; NOT a masking fallback). Safari 26 takes this path. */
+    @supports (mask-composite: exclude) {
+        .metal-gold-border,
+        .metal-silver-border,
+        .metal-bronze-border {
+            /* the positioning context the inset:0 overlay resolves against. */
+            position: relative;
+        }
+        .metal-gold-border::before,
+        .metal-silver-border::before,
+        .metal-bronze-border::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            /* the `border` width IS the band thickness the mask cuts out. */
+            border: var(--metal-border-width, 2px) solid transparent;
+            pointer-events: none;
+            /* the swept metal gradient — the SAME --metal-stop-* slots the
+               text-clip metals resolve, off the host's --metal-shimmer-color quad
+               (custom properties inherit onto the ::before). */
+            background: linear-gradient(
                 90deg,
                 var(--metal-stop-dark),
                 var(--metal-stop-light),
                 var(--metal-stop-base),
                 var(--metal-stop-light),
                 var(--metal-stop-dark)
-            )
-            1;
-        /* The sweep rides a backing gradient `background-position` on the same band
-           (the `border-image` slice tracks the host's background extent); the
-           250% size + the position sweep give the rim its travelling sheen. */
-        background-image: linear-gradient(
-            90deg,
-            var(--metal-stop-dark),
-            var(--metal-stop-light),
-            var(--metal-stop-base),
-            var(--metal-stop-light),
-            var(--metal-stop-dark)
-        );
-        background-size: 250% 100%;
-        background-clip: border-box;
+            );
+            background-size: 250% 100%;
+            /* THE RADIUS-FOLLOWING CUT-OUT — paint a border-box fill, EXCLUDE a
+               padding-box fill, leaving only the border band (follows radius; a
+               border-image cannot). The house border-ring idiom. */
+            -webkit-mask:
+                linear-gradient(#fff 0 0) padding-box,
+                linear-gradient(#fff 0 0) border-box;
+            -webkit-mask-composite: xor;
+            mask:
+                linear-gradient(#fff 0 0) padding-box,
+                linear-gradient(#fff 0 0) border-box;
+            mask-composite: exclude;
+        }
     }
+
+    /* ── The honest degrade (metal-base inset ring) ──────────────────────────
+       On a gap engine (no `mask-composite`) the rim paints a SOLID inset ring in
+       the metal's OWN base hue — it follows the host `border-radius` (box-shadow
+       inset does) and still READS as a metal rim; only the travelling sheen is
+       lost. The primary rim is present — this is NOT a masking fallback. */
+    @supports not (mask-composite: exclude) {
+        .metal-gold-border,
+        .metal-silver-border,
+        .metal-bronze-border {
+            box-shadow: inset 0 0 0 var(--metal-border-width, 2px)
+                var(--metal-stop-base);
+        }
+    }
+
     .metal-gold-border {
         --metal-shimmer-color: gold;
         --metal-stop-dark: var(--color-gold-dark);
@@ -202,13 +255,17 @@
        metal READS for PRM users); the `animation:` is the sole thing gated. The
        slow `--duration-metal` (6s) clock — the calm dignified pass. */
     @media (prefers-reduced-motion: no-preference) {
+        /* the text-clip metals + the rainbow rim sweep on the HOST background; the
+           `-border` metals sweep on their `::before` band overlay (BI.W-METAL-RIM-
+           BAND — the band now lives on the overlay, so the sweep does too). ONE
+           keyframe, both registers. */
         .metal-gold,
         .metal-silver,
         .metal-bronze,
-        .metal-gold-border,
-        .metal-silver-border,
-        .metal-bronze-border,
-        .metal-rainbow-rim {
+        .metal-rainbow-rim,
+        .metal-gold-border::before,
+        .metal-silver-border::before,
+        .metal-bronze-border::before {
             animation: metal-shimmer-sweep var(--duration-metal) linear infinite;
         }
     }

package/src/styles/viz-reveal.css

@@ -0,0 +1,63 @@
+/* BI.W-E10-AURORA-ENTRANCE (value.js T-60) — the PALETTE-HONEST one-shot
+ * cold-first-VISIBLE procedural-viz entrance.
+ *
+ * A procedural-viz CANVAS materializes: it fades in from transparent (`opacity`) with
+ * a gentle warm LIFT (`filter: brightness()/saturate()` PULSES up and settles). The
+ * whole ramp is PALETTE-HONEST — brightness and saturate NEVER dip below 1, so the
+ * entrance never transits a `brightness<1`/`saturate<1` GRAY VEIL over the chromatic
+ * field (the T-60 condemned form: the prior `from { brightness(0.4) saturate(0.7) }`
+ * dim floor, which — stamped while the canvas still sat at the consumer's `opacity:0`
+ * — opened the visible arrival INSIDE a `brightness 0.54–0.83` desaturated stage: the
+ * "pulses to gray" the owner named). The field's OWN colors carry the entrance; the
+ * bloom only lifts their light, it never dims or desaturates them.
+ *
+ * A FIELD bloom — the canvas rect stays scale(1) (no box-zoom gutter). Compositor-only
+ * (opacity + filter, the W-MOTION-CANON P5 EFFECTS channel). The peak is EXPLICIT in
+ * the keyframe (the 55% stop), so the animation rides a monotone `--ease-out` (NOT the
+ * extrapolating `--ease-cartoon-punch`, whose overshoot would dip the settle segment
+ * BELOW 1 and re-introduce the condemned dim tail).
+ *
+ * THE DOOR (BI.W-E10 / T-60): the aurora runtime opts OUT of this bloom by default
+ * (`revealBloom: false`) — the aurora materializes as its palette-derived GROUND with
+ * the canvas OPACITY cross-fade over it, so a second `filter`-bloom would double the
+ * entrance; it never sets `data-substrate-reveal`. The blob + the line-art vizzes keep
+ * it (now palette-honest). Both runtimes expose the `revealBloom` consumer door.
+ *
+ * THE TARGET is the CANVAS ([data-substrate-reveal]) — NOT a `.viz-canvas-host`
+ * wrapper: the blob's resting `drop-shadow` filter lives on ITS wrapper, so targeting
+ * the canvas never collides with a resting wrapper filter. NO `animation-fill-mode`
+ * that PERMANENTLY holds a settle filter — the animation reverts to the canvas's own
+ * (no) filter post-settle (brightness(1) saturate(1) opacity(1) == no filter/full
+ * opacity, a seamless revert).
+ *
+ * THE LEAF (createCanvasLifecycle.ts) sets the one-shot `data-substrate-reveal` attr
+ * the moment the canvas FIRST becomes visible (a dedicated one-shot IntersectionObserver
+ * — never at arm(), which a content-skipped / below-fold viz would burn invisibly). The
+ * `revealFired` guard keeps it ONE-SHOT → ZERO second bloom on scroll-off-and-back.
+ *
+ * PRM — the `animation:` line sits inside `@media (prefers-reduced-motion: no-preference)`
+ * AND the leaf skips the attr under reduce, so the field paints settled from frame 0
+ * (no fade, no luminance pulse — instant settled). The vestibular floor. */
+
+@keyframes substrate-reveal-bloom {
+    from {
+        opacity: 0;
+        filter: brightness(1) saturate(1);
+    }
+    55% {
+        /* the lit bloom peak — a warm luminance + saturation LIFT, NEVER a dim
+           veil: brightness and saturate stay ≥ 1 the whole way (palette-honest). */
+        filter: brightness(1.08) saturate(1.05);
+    }
+    to {
+        opacity: 1;
+        filter: brightness(1) saturate(1);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    canvas[data-substrate-reveal] {
+        animation: substrate-reveal-bloom var(--substrate-reveal-duration)
+            var(--ease-out);
+    }
+}

package/dist/CardAction-DlVP2evz.js

@@ -1,272 +0,0 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./vSpecular-EX7loENl.js";
-import { t as n } from "./useLiquidPress-CtOQ8Z0_.js";
-import { t as r } from "./useSurfaceAxis-Ci7Dnaw2.js";
-import { t as i } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderSlot as p, unref as m, withCtx as h, withDirectives as g } from "vue";
-import { Primitive as _ } from "reka-ui";
-var v = {
-	key: 0,
-	class: "cartoon-cast",
-	"aria-hidden": "true"
-}, y = /* @__PURE__ */ l({
-	__name: "Card",
-	props: {
-		tier: { default: "resting" },
-		surface: { default: "glass" },
-		shadow: {
-			type: Boolean,
-			default: !0
-		},
-		grain: {
-			type: Boolean,
-			default: !0
-		},
-		grid: {
-			type: Boolean,
-			default: !1
-		},
-		specular: { default: "off" },
-		pressable: {
-			type: Boolean,
-			default: !1
-		},
-		variant: {},
-		selected: { type: Boolean },
-		metal: { default: "gold" },
-		dataHue: {},
-		dataHueStrength: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		asChild: { type: Boolean },
-		as: { default: "div" }
-	},
-	setup(i) {
-		let l = i, y = a(() => l.surface === "glass" && l.specular !== "off"), b = a(() => l.specular === "full" ? {
-			"--glass-specular-intensity-rest": "0.04",
-			"--glass-specular-intensity-hover": "0.18",
-			"--glass-specular-intensity-active": "0.26"
-		} : {}), x = n({
-			response: .28,
-			dampingFraction: .78,
-			pressVar: "--card-press-t",
-			shrinkDepth: .02,
-			maxStretch: 1.03
-		}), S = a(() => l.variant !== "selection" || l.dataHue == null ? {} : {
-			"--glass-accent": l.dataHue,
-			...l.dataHueStrength == null ? {} : { "--glass-accent-strength": l.dataHueStrength }
-		}), C = a(() => l.variant === "selection" && l.selected ? `metal-${l.metal}-border` : !1), w = a(() => {
-			let e = y.value ? b.value : void 0, t = S.value, n = e || Object.keys(t).length ? {
-				...e ?? {},
-				...t
-			} : void 0;
-			return l.pressable ? {
-				...n ?? {},
-				...x.pressStyle.value
-			} : n;
-		});
-		return (n, a) => g((f(), o(m(_), {
-			"data-slot": "card",
-			"data-tier": i.tier,
-			"data-surface": i.surface,
-			"data-grain": i.grain,
-			"data-grid": i.grid,
-			"data-pressable": i.pressable || void 0,
-			"data-variant": i.variant || void 0,
-			"data-selected": i.variant === "selection" && i.selected ? "true" : void 0,
-			as: i.as,
-			"as-child": i.asChild,
-			style: d(w.value),
-			onPointerdown: a[0] ||= (e) => i.pressable ? m(x).press() : void 0,
-			onPointerup: a[1] ||= (e) => i.pressable ? m(x).release() : void 0,
-			onPointercancel: a[2] ||= (e) => i.pressable ? m(x).release() : void 0,
-			onPointerleave: a[3] ||= (e) => i.pressable ? m(x).release() : void 0,
-			class: u(m(e)("rounded-card text-card-foreground scrollbar-hidden", "[--card-pad-inline:--spacing(6)] [--card-pad-block:calc(var(--card-pad-inline)*1.272)] [--card-pad-section-gap:var(--card-pad-block)] [--card-pad-footer:calc(var(--card-pad-block)/1.618)] [--card-pad-title-gap:calc(var(--card-pad-inline)/2.618)] data-[size=sm]:[--card-pad-inline:--spacing(4)]", i.tier === "opaque" ? "glass-resting glass-opaque" : i.tier === "deep" ? "glass-floating glass-deep" : `glass-${i.tier}`, y.value && "glass-specular-track", i.surface === "cartoon" && "cartoon-surface", i.surface === "veil" && m(r)("veil").replace(/^glass-\w+\s+/, ""), i.shadow && i.surface === "glass" && "shadow-card", !i.grain && "[&::after]:hidden", i.grid && "paper-grid", i.pressable && "glass-press tap-squish", C.value, l.class))
-		}, {
-			default: h(() => [i.surface === "cartoon" ? (f(), c("span", v)) : s("", !0), p(n.$slots, "default")]),
-			_: 3
-		}, 8, [
-			"data-tier",
-			"data-surface",
-			"data-grain",
-			"data-grid",
-			"data-pressable",
-			"data-variant",
-			"data-selected",
-			"as",
-			"as-child",
-			"style",
-			"class"
-		])), [[m(t), y.value]]);
-	}
-}), b = /* @__PURE__ */ i(/* @__PURE__ */ l({
-	__name: "CardHeader",
-	props: {
-		shrink: { type: Boolean },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(t) {
-		let n = t;
-		return (r, i) => (f(), c("div", {
-			"data-slot": "card-header",
-			class: u(m(e)("@container/card-header flex flex-col gap-y-(--card-pad-title-gap) px-(--card-pad-inline) pt-(--card-pad-block) pb-0", "has-data-[slot=card-action]:grid has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-action]:items-start", t.shrink && "card-header--shrink", n.class))
-		}, [p(r.$slots, "default")], 2));
-	}
-}), [["__scopeId", "data-v-31414924"]]), x = /* @__PURE__ */ i(/* @__PURE__ */ l({
-	__name: "ScrollCard",
-	props: {
-		tier: { default: "resting" },
-		surface: { default: "glass" },
-		shadow: {
-			type: Boolean,
-			default: !0
-		},
-		specular: { default: "off" },
-		maxHeight: { default: "18rem" },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(e) {
-		let t = e, n = a(() => ({ "--scroll-card-max-height": t.maxHeight }));
-		return (r, i) => (f(), o(y, {
-			tier: e.tier,
-			surface: e.surface,
-			shadow: e.shadow,
-			specular: e.specular,
-			grain: !1,
-			tabindex: "0",
-			"data-slot": "scroll-card",
-			style: d(n.value),
-			class: u([
-				"scroll-card",
-				"card-scroll-host",
-				t.class
-			])
-		}, {
-			default: h(() => [p(r.$slots, "default", {}, void 0, !0)]),
-			_: 3
-		}, 8, [
-			"tier",
-			"surface",
-			"shadow",
-			"specular",
-			"style",
-			"class"
-		]));
-	}
-}), [["__scopeId", "data-v-2b254340"]]), S = /* @__PURE__ */ i(/* @__PURE__ */ l({
-	__name: "ScrollCardHeader",
-	props: {
-		sticky: { type: Boolean },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(t) {
-		let n = t;
-		return (t, r) => (f(), o(b, {
-			shrink: "",
-			"data-slot": "scroll-card-header",
-			class: u(m(e)("scroll-card-header", n.sticky !== !1 && "sticky top-0 z-10", n.class))
-		}, {
-			default: h(() => [p(t.$slots, "default")]),
-			_: 3
-		}, 8, ["class"]));
-	}
-}), [["__scopeId", "data-v-ee1e969c"]]), C = /* @__PURE__ */ l({
-	__name: "CardTitle",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (f(), c("h3", {
-			"data-slot": "card-title",
-			class: u(m(e)("text-heading leading-none tracking-tight", n.class))
-		}, [p(t.$slots, "default")], 2));
-	}
-}), w = /* @__PURE__ */ l({
-	__name: "CardDescription",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (f(), c("p", {
-			"data-slot": "card-description",
-			class: u(m(e)("text-sm text-muted-foreground-strong", n.class))
-		}, [p(t.$slots, "default")], 2));
-	}
-}), T = /* @__PURE__ */ l({
-	__name: "CardContent",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (f(), c("div", { class: u(m(e)("px-(--card-pad-inline) pt-(--card-pad-section-gap) pb-(--card-pad-block)", n.class)) }, [p(t.$slots, "default")], 2));
-	}
-}), E = /* @__PURE__ */ l({
-	__name: "CardFooter",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (f(), c("div", { class: u(m(e)("flex items-center px-(--card-pad-inline) pt-(--card-pad-footer) pb-(--card-pad-block)", n.class)) }, [p(t.$slots, "default")], 2));
-	}
-}), D = /* @__PURE__ */ l({
-	__name: "CardAction",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (f(), c("div", {
-			"data-slot": "card-action",
-			class: u(m(e)("col-start-2 row-span-2 row-start-1 self-start justify-self-end", n.class))
-		}, [p(t.$slots, "default")], 2));
-	}
-});
-//#endregion
-export { C as a, b as c, w as i, y as l, E as n, S as o, T as r, x as s, D as t };

package/dist/CollapsibleContent-D7UNsXQr.js

@@ -1,63 +0,0 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { computed as t, createBlock as n, defineComponent as r, mergeProps as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
-import { CollapsibleContent as l, CollapsibleRoot as u, CollapsibleTrigger as d, useForwardPropsEmits as f } from "reka-ui";
-//#endregion
-//#region src/components/ui/collapsible/Collapsible.vue
-var p = /* @__PURE__ */ r({
-	__name: "Collapsible",
-	props: {
-		defaultOpen: { type: Boolean },
-		open: { type: Boolean },
-		disabled: { type: Boolean },
-		unmountOnHide: { type: Boolean },
-		asChild: { type: Boolean },
-		as: {}
-	},
-	emits: ["update:open"],
-	setup(e, { emit: t }) {
-		let r = f(e, t);
-		return (e, t) => (a(), n(s(u), i({ "data-slot": "collapsible" }, s(r)), {
-			default: c(({ open: t }) => [o(e.$slots, "default", { open: t })]),
-			_: 3
-		}, 16));
-	}
-}), m = /* @__PURE__ */ r({
-	__name: "CollapsibleTrigger",
-	props: {
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(r) {
-		let l = r, u = t(() => {
-			let { class: e, ...t } = l;
-			return t;
-		});
-		return (t, r) => (a(), n(s(d), i({ "data-slot": "collapsible-trigger" }, u.value, { class: s(e)("tap-squish focus-ring rounded-control transition-control disabled:pointer-events-none disabled:opacity-disabled", l.class) }), {
-			default: c(() => [o(t.$slots, "default")]),
-			_: 3
-		}, 16, ["class"]));
-	}
-}), h = /* @__PURE__ */ r({
-	__name: "CollapsibleContent",
-	props: {
-		forceMount: { type: Boolean },
-		asChild: { type: Boolean },
-		as: {}
-	},
-	setup(e) {
-		let t = e;
-		return (e, r) => (a(), n(s(l), i(t, { class: "overflow-hidden transition-collapse data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down" }), {
-			default: c(() => [o(e.$slots, "default")]),
-			_: 3
-		}, 16));
-	}
-});
-//#endregion
-export { m as n, p as r, h as t };