@mkbabb/glass-ui 4.0.1 → 4.2.0

package/dist/spectrum-walk-cBNSx_zm.js

@@ -0,0 +1,33 @@
+import { o as e, t } from "./color-B9jZdhJX.js";
+import { OKLCHColor as n, sampleColorRamp as r } from "@mkbabb/value.js";
+//#region src/components/custom/border-progress/composables/spectrum-walk.ts
+var i = (e) => new n(e.L, e.C, e.h / 360), a = (e) => ({
+	L: Number(e.l),
+	C: Number(e.c),
+	h: (Number(e.h) * 360 % 360 + 360) % 360
+});
+function o(n, o) {
+	let s = n.map((e) => t(e)), c = s.length;
+	if (o < 2) return [e(s[0] ?? {
+		L: .7,
+		C: 0,
+		h: 0
+	})];
+	if (c === 0) return Array.from({ length: o }, () => e({
+		L: .7,
+		C: 0,
+		h: 0
+	}));
+	if (c === 1) return Array.from({ length: o }, () => e(s[0]));
+	let l = (t, n, o) => r(i(t), i(n), o, {
+		space: "oklch",
+		hueMethod: "shorter"
+	}).map((t) => e(a(t))), u = c - 1, d = [];
+	for (let e = 0; e < u; e++) {
+		let t = Math.round(e * (o - 1) / u), n = Math.round((e + 1) * (o - 1) / u), r = l(s[e], s[e + 1], n - t + 1);
+		d.push(...e > 0 ? r.slice(1) : r);
+	}
+	return d;
+}
+//#endregion
+export { o as walkConcreteSpectrum };

package/dist/springPresets-DfoQ6XRY.js

@@ -0,0 +1,64 @@
+//#region src/composables/motion/springPresets.ts
+var e = [
+	{
+		name: "smooth",
+		response: .58,
+		dampingFraction: .8,
+		comment: "SETTLE register — the inertial settle (entrances/fades/scale-ins): weighty, a whisper of life (+1.5%), never a dead stop. BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "snappy",
+		response: .48,
+		dampingFraction: .74,
+		comment: "CONTROL register — the quick-but-WEIGHTY position morph (tab indicator, progress fill, .glass-reveal SPATIAL bloom, page-build); arrives at half-clock (audacious) with a small gooey overshoot (+3.2%). BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "bouncy",
+		response: .6,
+		dampingFraction: .6,
+		comment: "PLAYFUL register — the emphatic one-shot (dialog/success entrance, VT default, completion-seal): FLOWING not flicking — overshoot softened 12.6%→9.5%, slower for inertia. BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "gentle",
+		response: .82,
+		dampingFraction: 1,
+		comment: "GENTLE register — the patient critically-damped settle (--ease-convergence alias); slow inertial arrival, ζ=1.0 (NO overshoot by definition — the convergence-reveal depends on it). BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "dock",
+		response: .68,
+		dampingFraction: .64,
+		comment: "DOCK register — THE WEIGHTY GOOEY MORPH (collapse/expand + V↔H + fission + in-situ shell): slow inertial mass, the settle a graceful +7.3% (un-pointed liquid), the 'MORPH MORE on move' reference. BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "press",
+		response: .2,
+		dampingFraction: .8,
+		comment: "PRESS register — the iOS interactive tap (useSpringPress + --glass-btn-press-t): a hair of inertial carry (sub-200ms iOS window) + a tiny alive rebound (+1.5%); the interruptible re-seat keeps the gesture continuous. BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "timeline-head",
+		response: .34,
+		dampingFraction: .74,
+		comment: "TIMELINE-HEAD register — the ScrubberTimeline warm-glass lozenge travel (LEG-2): the head LAGS the pointer a hair then settles with a whisper of fling-overshoot (+3.2%). The fast head clock the fill trails. BD.W-TIMELINE-RAIL-UNIFY"
+	},
+	{
+		name: "timeline-fill",
+		response: .46,
+		dampingFraction: .82,
+		comment: "TIMELINE-FILL register — the ScrubberTimeline lane fill (LEG-2): a slower clock than the head so the fill TRAILS the bead (the lane reads as liquid trailing), settling with a hint of carry (+1.1%). BD.W-TIMELINE-RAIL-UNIFY"
+	},
+	{
+		name: "timeline-press",
+		response: .22,
+		dampingFraction: .7,
+		comment: "TIMELINE-PRESS register — the ScrubberTimeline grab-anticipation (LEG-2): the head's pointerdown squash on the cartoon-punch clock, a crisp short-response press settle (+4.6%) feeding the --scale-press dip. BD.W-TIMELINE-RAIL-UNIFY"
+	}
+];
+function t(t) {
+	let n = e.find((e) => e.name === t);
+	if (!n) throw Error(`Unknown spring preset: ${t}`);
+	return n;
+}
+//#endregion
+export { t as n, e as t };

package/dist/stacked-icons.js

@@ -1,9 +1,9 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, withCtx as m } from "vue";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, withCtx as h } from "vue";
 //#region src/components/custom/stacked-icons/StackedIconGroup.vue?vue&type=script&setup=true&lang.ts
-var h = {
+var g = {
 	key: 1,
 	style: { zIndex: 0 }
-}, g = /* @__PURE__ */ o({
+}, _ = /* @__PURE__ */ s({
 	__name: "StackedIconGroup",
 	props: {
 		items: {},
@@ -21,63 +21,78 @@ var h = {
 		as: { default: "div" },
 		keyFn: {}
 	},
-	setup(o) {
-		let g = o, _ = t(() => {
-			switch (g.size) {
+	setup(s) {
+		let _ = s, v = t(() => {
+			switch (_.size) {
 				case "sm": return "h-6 w-6";
 				case "md": return "h-8 w-8";
 				case "lg": return "h-10 w-10";
 			}
-		}), v = t(() => {
-			if (g.direction === "vertical") switch (g.size) {
+		}), y = t(() => {
+			if (_.direction === "vertical") switch (_.size) {
 				case "sm": return "-mt-(--stack-overlap-sm)";
 				case "md": return "-mt-(--stack-overlap-md)";
 				case "lg": return "-mt-(--stack-overlap-lg)";
 			}
-			switch (g.size) {
+			switch (_.size) {
 				case "sm": return "-ml-(--stack-overlap-sm)";
 				case "md": return "-ml-(--stack-overlap-md)";
 				case "lg": return "-ml-(--stack-overlap-lg)";
 			}
-		}), y = t(() => g.items.slice(0, g.maxVisible)), b = t(() => Math.max(0, g.items.length - g.maxVisible));
-		return (t, g) => (l(), n(f(o.as), { class: s([
-			"group/stack relative isolate flex",
-			o.direction === "vertical" ? "flex-col" : "items-center",
-			o.reversed ? o.direction === "vertical" ? "flex-col-reverse" : "flex-row-reverse" : ""
-		]) }, {
-			default: m(() => [
-				(l(!0), i(e, null, u(y.value, (e, n) => (l(), i("div", {
-					key: o.keyFn?.(e, n) ?? n,
-					class: s([
-						_.value,
-						"relative flex items-center justify-center rounded-pill transform-gpu",
-						"transition-[transform,box-shadow,opacity] duration-fast ease-spring-snappy",
-						n > 0 ? v.value : "",
-						o.expandOnHover && n > 0 ? o.direction === "vertical" ? "group-hover/stack:translate-y-1.5 group-hover/stack:scale-105" : "group-hover/stack:translate-x-1.5 group-hover/stack:scale-105" : ""
+		}), b = t(() => _.items.slice(0, _.maxVisible)), x = t(() => Math.max(0, _.items.length - _.maxVisible)), S = t(() => {
+			let e = b.value.length + +(x.value > 0);
+			return Math.max(1, e - 1);
+		});
+		return (t, _) => (u(), n(p(s.as), {
+			class: c(["stacked-icon-group group/stack relative isolate flex", [s.direction === "vertical" ? "flex-col" : "items-center", s.reversed ? s.direction === "vertical" ? "flex-col-reverse" : "flex-row-reverse" : ""]]),
+			"data-direction": s.direction,
+			style: l({ "--n": S.value })
+		}, {
+			default: h(() => [
+				(u(!0), i(e, null, d(b.value, (e, n) => (u(), i("div", {
+					key: s.keyFn?.(e, n) ?? n,
+					class: c([
+						v.value,
+						"stacked-icon-puck relative flex items-center justify-center rounded-pill transform-gpu",
+						n > 0 ? y.value : "",
+						s.expandOnHover && n > 0 ? "stacked-icon-puck--fan" : ""
 					]),
-					style: c({ zIndex: y.value.length + 1 - n })
-				}, [d(t.$slots, "icon", {
+					style: l({
+						zIndex: b.value.length + 1 - n,
+						"--i": n
+					})
+				}, [f(t.$slots, "icon", {
 					item: e,
 					index: n
 				})], 6))), 128)),
-				b.value > 0 ? (l(), i("div", {
+				x.value > 0 ? (u(), i("div", {
 					key: 0,
-					class: s([
-						_.value,
-						"relative flex items-center justify-center rounded-pill",
-						"border-2 border-background bg-[color-mix(in_srgb,var(--background)_96%,transparent)] text-xs font-semibold text-muted-foreground/60 shadow-cartoon-sm",
-						"transform-gpu transition-[background-color,color,transform,box-shadow] duration-fast ease-spring-snappy",
-						"hover:bg-background hover:text-muted-foreground hover:shadow-cartoon-md",
+					class: c([
 						v.value,
-						o.expandOnHover ? o.direction === "vertical" ? "group-hover/stack:translate-y-1.5 group-hover/stack:scale-105" : "group-hover/stack:translate-x-1.5 group-hover/stack:scale-105" : ""
+						"stacked-icon-puck stacked-icon-overflow glass-capsule glass-atom",
+						"relative flex items-center justify-center rounded-pill text-xs font-semibold text-muted-foreground",
+						"transform-gpu",
+						y.value,
+						s.expandOnHover ? "stacked-icon-puck--fan" : ""
 					]),
-					style: { zIndex: 1 }
-				}, [d(t.$slots, "overflow", { count: b.value }, () => [a(" +" + p(b.value), 1)])], 2)) : r("", !0),
-				b.value === 0 && t.$slots.info ? (l(), i("div", h, [d(t.$slots, "info")])) : r("", !0)
+					style: l({
+						zIndex: 1,
+						"--i": b.value.length
+					}),
+					"data-cast": ""
+				}, [_[0] ||= a("span", {
+					class: "cartoon-cast",
+					"aria-hidden": "true"
+				}, null, -1), f(t.$slots, "overflow", { count: x.value }, () => [o(" +" + m(x.value), 1)])], 6)) : r("", !0),
+				x.value === 0 && t.$slots.info ? (u(), i("div", g, [f(t.$slots, "info")])) : r("", !0)
 			]),
 			_: 3
-		}, 8, ["class"]));
+		}, 8, [
+			"class",
+			"data-direction",
+			"style"
+		]));
 	}
 });
 //#endregion
-export { g as StackedIconGroup };
+export { _ as StackedIconGroup };

package/dist/styles/animations.css

@@ -207,14 +207,24 @@
     /* AX.W57 (P6) — the aura breath reads its OWN element-opacity range
        (`--pulse-aura-breath-{min,max}`, 0.28↔0.42), decoupled from the
        shared `--pulse-aura-opacity-*` skeleton-shimmer stops so the halo
-       breathes as an ambient wash, never up to the 0.95 shimmer peak. */
+       breathes as an ambient wash, never up to the 0.95 shimmer peak.
+
+       BC.W-GLASS-GLOW-FIX (Atlas A-8 root) — the breath SCALE is driven via the
+       `--pulse-aura-breath-scale` registered custom property (a `<number>`, typed
+       in property-regs.css so it INTERPOLATES per-frame), NOT a `transform: scale()`
+       on `.pulse-aura` itself. The `.pulse-aura::before` child reads the scale; the
+       `.pulse-aura` element stays UNSCALED at `inset:0` as the `overflow: clip`
+       boundary. Scaling the CHILD (clipped by the unscaled parent) is what makes the
+       1.15× peak STAY inside the host box — scaling the clip element itself scaled the
+       clip rect too, so the radial escaped (the prior incomplete fix). The element-
+       opacity breath stays HERE (it does not change geometry). */
     0%,
     100% {
-        transform: scale(var(--animate-ambient-pulse-scale-min, 1));
+        --pulse-aura-breath-scale: var(--animate-ambient-pulse-scale-min, 1);
         opacity: var(--pulse-aura-breath-min, 0.28);
     }
     50% {
-        transform: scale(var(--animate-ambient-pulse-scale-max, 1.15));
+        --pulse-aura-breath-scale: var(--animate-ambient-pulse-scale-max, 1.15);
         opacity: var(--pulse-aura-breath-max, 0.42);
     }
 }

package/dist/styles/cards.css

@@ -6,6 +6,122 @@
  * only the 5-rung glass ladder. */
 
 @layer components {
+    /* ── BD.W-CARD-MATERIAL-FLOOR — the card-surface warm tint-seam enrollment ──
+       The §4 leg-(a) material floor, reconciled to the SHIPPED `--glass-tint-*`
+       seam (NOT a fork, NOT a global re-tint). The card's glass/cartoon surfaces
+       ride the `.glass-${tier}` ladder rung, whose fill is already
+       `color-mix(in oklab, --glass-bg-${tier}, --glass-tint-source --glass-tint-
+       strength)` (ladder.css) — so the card reaches the warm floor by setting a
+       CARD-LOCAL non-zero `--glass-tint-strength` (the global default at
+       surface-axis.css:83 stays `0%`, so the 6 other seam-readers — drawer / menu /
+       veil / jubilance / .btn-glass / .segmented-indicator — are byte-unchanged:
+       the blast-radius bite). `--glass-tint-source` defaults to `var(--card)` (a
+       warm cream, glass-fx.css:158), so the floor is warm by construction in BOTH
+       modes. The card clears the warm-chroma floor (C ≥ 0.02 warm) in the MATERIAL
+       itself — before the field even lands, and on a dead ground (print / reduced-
+       transparency), the "far too gray" verdict closes at the material layer.
+
+       SCOPE — `[data-surface]` is `glass` or `cartoon` (NOT `veil`: veil owns its
+       own `--veil-bg` tint seam below; NOT `opaque`: the solid `--card` plate is
+       already warm-cream). The strength is set on the host so it inherits into the
+       rung's `color-mix`. This is a card-local re-point of the SHIPPED seam — DRY,
+       no second compositing axis, the ladder rung does the mix. */
+    [data-slot="card"]:where(
+        [data-surface="glass"],
+        [data-surface="cartoon"]
+    ) {
+        --glass-tint-strength: 8%;
+        /* BD.W-CARD-CEL-MOTION (§3.1) — the defined-edge border-ink floor. The
+           ladder rung's `--glass-border-resting`/`-quiet` ink is 4% warm
+           (glass.css:331-332) — it vanishes cream-on-cream (K3 RED). Floor the
+           card's own border-ink UP to ≥8% warm-ink so the cel reads as a defined
+           SHAPE (WCAG 1.4.11 non-text). `--glass-border-rung` is the per-rung ink
+           the accent-composed `--glass-border-accent` reads (ladder.css /
+           surfaces.css); re-pointing it card-locally floors the border WITHOUT
+           forking the rim (the keyed two-stop rim from `--glass-material-rim` is
+           CONSUMED unchanged — the card does NOT re-mint a rim). Warm (the
+           `--foreground` mix is warm-cream in both modes); the `.dark` ink lifts
+           off the near-black field through the same `--foreground` flip. */
+        --glass-border-rung: color-mix(in srgb, var(--foreground) 9%, transparent);
+    }
+
+    /* BD.W-CARD-CEL-MOTION (§3.2) — the inner catch-light over the field. A faint
+       `screen`-blended warm catch sits where the upper-right `--glass-key` sun
+       hits, lifting the cel off the field (the §3 layer-4 catch, coherent with the
+       rim + cast — ONE key). It rides the host `background-image` stack ALONGSIDE
+       the field underlayer (both are static gradients in the same longhand; the
+       catch is the FIRST layer so it sits over the warm underlayer), so it adds NO
+       pseudo (`::before` = moving specular, `::after` = grain — both occupied).
+       `screen` lifts only where there is light, never darkening — and it is below
+       content + clipped to the host radius, so it never washes the text column
+       (the K-AA carve). Under `prefers-contrast: more` the screen blend is dropped
+       (the catch is decoration, the edge is the legibility asset). */
+    [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+        background-blend-mode: screen, normal;
+    }
+    @media (prefers-contrast: more) {
+        [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+            background-blend-mode: normal;
+        }
+    }
+
+    /* ── BD.W-CARD-FIELD-FLOOR — the orphan-card static warm field underlayer ──
+       The §2 leg-(b) structural contract, card-local fallback. The COMMON case is
+       ancestor-supplied: the page mounts ONE global `[data-paper-field]` plane
+       (AppShell) behind every route, and the card composites over it. The ORPHAN
+       case is a card in an OCCLUDING context an ancestor field cannot reach (a
+       dialog / drawer / portal that paints its own opaque ground over the page
+       field) — there the card mounts its OWN cheap static warm underlayer so it is
+       NEVER gray-over-nothing wherever it is dropped.
+
+       MECHANISM — ONE static `radial-gradient` on the host `background-image`
+       longhand (the proven `.paper-grid` coexistence seam: a later
+       `background-image` COEXISTS with the glass tier's `background:` shorthand
+       fill — paints OVER the translucent color, UNDER content + UNDER both
+       pseudos, clipped to the host `border-radius` by construction). Zero JS, one
+       compositor-cached paint, PRM-static. The warm 0-alpha stops are explicit
+       `oklch(L C H / 0)` (NEVER bare `transparent` — the WebKit black-premultiply
+       hole, build-trap-(d)).
+
+       THE NO-DOUBLE-PAINT GATE (the presence-BEHIND check, NOT `closest()`): the
+       fallback paints ONLY when NO `[data-paper-field]` ancestor is present — `:where(
+       [data-paper-field]) &` switches it OFF under the global field, so a card over
+       the page field reads the page field (no local underlayer), and a 50-card grid
+       under ONE ancestor field is ONE field paint, not N. A `cartoon`/`opaque`
+       card already carries a defined edge + warm fill, so the orphan field is the
+       glass-surface case; `surface="glass"` only (the orphan glass card is the one
+       that reads gray-over-nothing). The `.paper-grid` document register is EXCLUDED
+       by selector (it sets its own grid `background-image` underlayer — a grid card
+       opts out of the warm-field fallback, not a `background-image: none` race). */
+    [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+        /* TWO static layers in ONE longhand (blended by the `background-blend-mode`
+           above — `screen, normal`): (1) the upper-right KEYED catch-light (warm,
+           `screen`-blended so it only LIFTS — the §3 catch), then (2) the warm cel
+           UNDERLAYER (one radial, amber-key toward the upper-right `--glass-key`,
+           the field fallback). Both fade to a warm 0-alpha — NEVER bare
+           `transparent` (the WebKit black-premultiply hole, build-trap-(d)). */
+        background-image:
+            radial-gradient(
+                60% 55% at 80% 16%,
+                oklch(0.96 0.04 78 / 0.5),
+                oklch(0.96 0.04 78 / 0) 72%
+            ),
+            radial-gradient(
+                120% 110% at 78% 22%,
+                oklch(0.9 0.075 72 / 0.5),
+                oklch(0.9 0.075 72 / 0) 70%
+            );
+    }
+
+    /* The presence-behind gate — under an ancestor field, the card reads the REAL
+       field (the page plane transmits through the translucent fill), so the local
+       fallback is switched OFF (no double paint). A 50-card grid under ONE ancestor
+       field is ONE field paint, not N local underlayers. */
+    :where([data-paper-field])
+        [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+        background-image: none;
+    }
+
     /* Paper texture overlay */
     .paper-texture {
         background-image: var(--paper-clean-texture);
@@ -28,6 +144,18 @@
        paper tier, exactly like `.paper-texture` / `cartoon-surface` /
        `veil-surface`.
 
+       BC.W-GRID-SIMPLE — the card-interior pitch UNIFIES onto the ONE
+       `--grid-*` rhythm source: `--paper-grid-texture-size` now reads
+       `var(--grid-pitch)` (scale-paper.css), retiring the prior 32px literal so
+       the demo page grid + this card interior share ONE pitch (the
+       two-parallel-28px/32px-systems fix). This card-interior register keeps its
+       OWN quieter ambient strength (`--paper-grid-opacity`), DISTINCT from the
+       full-bleed page-bg 3%/11% tier — a card interior reads softer than a page
+       wash. It is a host `background-image` only — NO `backdrop-filter`/`filter`
+       on this element, so the grid lines are NEVER convolved into the "blurry
+       mess" the page grid suffered (the de-blur discipline: the grid is the
+       card's own underlay, not a crisp grid read THROUGH a blurred glass plate).
+
        THE SEAM (the two-pseudo-budget reveal, recorded — the Triumvirate's
        through-glass-read locate-the-seam, NOT a token-α loop): a glass tier
        already claims BOTH pseudos — `::before` is the moving-specular catch-
@@ -95,6 +223,63 @@
     }
 }
 
+/* ── Selection-card decoration (BC.W-SELECTION-CARD — the I5 selection card) ──────
+   The ONE new Atlas component, realized as a `<Card variant="selection">`
+   DECORATION (NOT a new SFC, NOT a new tier, NOT a new compositing seam). It
+   COMPOSES the two BUILT seams — the A-2 `--glass-accent` rim (glass/rim.css +
+   glass/material.css) + the A-3 `.metal-*-border` swept rim (utilities/metal.css)
+   — and authors ZERO competing rim/background recipe of its own. The rule is a
+   TOKEN-SUBSTITUTION on the base tier (the `.glass-opaque`/`.glass-deep` precedent):
+   it re-points the EXISTING `--glass-accent-strength` (+ an OPTIONAL sub-perceptual
+   floating-tier lift) locally; it does NOT declare a `background`/`border`.
+
+   THE RIM-NOT-FILL DISCIPLINE (the no-saturated-slab structural bar): selection is
+   read by (a) the metal rim (the `.metal-*-border` class Card composes when
+   `:selected`), (b) a BOUNDED accent-strength LIFT (unselected → selected, both ≤
+   the W-GLASS-ACCENT rim ceiling), and OPTIONALLY (c) a sub-perceptual
+   `--glass-bg-floating`-tier lift (the "selected reads as glass" register). The
+   plate STAYS warm-cream translucent — the BC.W-GLASS-IDENTITY floor is inviolate.
+   This rule NEVER writes `--glass-tint-source`/`--glass-tint-strength` (the A-2
+   distinct-axis fence — the accent is rim+glint DECORATION, not whole-plate
+   legibility) and NEVER paints a `--foreground`/`--primary`/`--surface-tint` opaque
+   plate FILL (the "selected = loud fill" anti-pattern is the disease-root the gate's
+   S3 bite reds).
+
+   THE ACCENT-STRENGTH LADDER (the bounded lift, two tokens a consumer retunes):
+     unselected → --selection-accent-strength            (~16% — a calm rim glow)
+     selected   → --selection-accent-strength-selected   (~28% — brighter at the rim,
+                  still ≤ the W-GLASS-ACCENT ceiling; the data hue reads stronger at
+                  the rim/glint, NOT a flooded plate)
+   The host (Card.vue) writes `--glass-accent` (the HUE) per-instance off `data-hue`;
+   this rule supplies the STRENGTH so the calm/selected lift is ONE source. An UNSET
+   `data-hue` leaves `--glass-accent: transparent` (the @property default), so even
+   with the strength engaged the `color-mix(in oklab, X, transparent N%)` === X — the
+   A-2 no-op floor: a `variant="selection"` card with no `data-hue` is byte-identical
+   to a bare Card. A consumer may override `--glass-accent-strength` per-instance
+   (Card.vue's `data-hue-strength`); this rule is the default. */
+[data-variant="selection"] {
+    /* The bounded accent-strength ladder — both ≤ the W-GLASS-ACCENT rim ceiling.
+       A consumer retunes the calm/selected pair from these two knobs. */
+    --selection-accent-strength: 16%;
+    --selection-accent-strength-selected: 28%;
+    /* Re-point the EXISTING accent-strength seam to the calm rung (the rim glow at
+       rest). At an unset `--glass-accent: transparent` this is a provable no-op. */
+    --glass-accent-strength: var(--selection-accent-strength);
+}
+
+[data-variant="selection"][data-selected="true"] {
+    /* SELECTED — lift the accent-strength to the brighter (still-bounded) rung. The
+       brighter rim + the `.metal-*-border` Card composes are the selection read; the
+       plate is UNTOUCHED (no background/fill here — rim-not-fill). */
+    --glass-accent-strength: var(--selection-accent-strength-selected);
+    /* OPTIONAL sub-perceptual "selected reads as glass" lift — re-point the base
+       tier's resting fill toward the floating rung (the W-REGISTER-IOS tier), a
+       TOKEN re-point, NOT a `--surface-tint` gray plate, NEVER a `--foreground`
+       brand fill. The plate stays warm-cream translucent (the floating rung is the
+       SAME warm-cream material at a heavier rung, the BC.W-GLASS-IDENTITY ladder). */
+    --glass-bg-resting: var(--glass-bg-floating, var(--glass-bg-resting));
+}
+
 /* ── Cartoon surface decoration ───────────────────────────────────
    The Memphis-sticker register. Composes ON TOP of a glass tier — it is
    NOT itself a tier. The former `.glass-cartoon` recipe declared
@@ -113,13 +298,97 @@
        a card surface that often hosts portaled content; `translate: 0` at rest
        mints the stacking context once. Longhand maps `translate(x, y)` 1:1. */
     translate: 0;
+    position: relative;
+    /* BD.W-CARTOON-CASTER — the LOUD register carries `--motion-weight: 1` in the
+       SAME recipe (the loud-register coupling: so the punch is never accidentally
+       muted to ~+13.6% by inheriting the rest 0.618 — the BD.W-CARTOON-PUNCH
+       loud-register guard's concrete pass-subject). The press ramp ALIASES the
+       existing `--card-press-t` (the host's `useLiquidPress` already drives it for
+       every `pressable` card) — NO second press var, NO Card press-driver rewrite. */
+    --motion-weight: 1;
+    --cartoon-press-t: var(--card-press-t, 0);
     transition:
-        translate var(--duration-normal) var(--spring-smooth),
+        translate var(--duration-normal) var(--ease-cartoon-punch),
+        scale var(--duration-normal) var(--ease-cartoon-punch),
         box-shadow var(--duration-normal) var(--ease-standard);
 
-    &:hover:not(:disabled) {
+    /* BD.W-CARTOON-CASTER — the hover RE-POINTS the existing rule onto the punch
+       curve (was --spring-smooth) and guards `:not(:active)` so the press squash wins;
+       the object lifts a hair UP-RIGHT (toward the upper-right `--glass-key`) and the
+       cast deepens to the lg rung (the gap opens). ONE hover rule, no double-declare. */
+    &:hover:not(:active):not(:disabled) {
         translate: var(--lift-sm) var(--lift-sm);
+        /* BD.W-CARD-CEL-MOTION (§5) — the cel lifts toward the light with a
+           sub-perceptual VOL-PRESERVING scale (X·Y ≈ 1: 1.015 × 0.985 ≈ 1.0): the
+           cel rising toward its sun reads as PEELING off the field, not a flat
+           sticker slide. Composes the existing `scale` transition (declared above)
+           on the punch curve. The press squash (`scale: 1.04 0.94`) wins via
+           `:not(:active)`. */
+        scale: 1.015 0.985;
         box-shadow: var(--shadow-cartoon-lg);
+        & .cartoon-cast {
+            box-shadow: var(--shadow-cartoon-lg);
+        }
+    }
+
+    /* BD.W-CARTOON-CASTER — the press is a NON-uniform SQUASH (H5): widen X, compress
+       Y — real squash & stretch, NOT a uniform shrink. The CSS `:active` is the no-JS
+       floor; `useLiquidPress` drives `--card-press-t` 0→1 for the continuous
+       interruptible press the inert caster rides. */
+    &:active:not(:disabled) {
+        scale: 1.04 0.94;
+    }
+}
+
+/* ── BD.W-CARTOON-CASTER — the inert-child moving cel cast ───────────────────────
+   The cast rides an INERT `<span class="cartoon-cast" aria-hidden>` child the Card
+   emits when `surface="cartoon"` — NOT a `::before`/`::after` pseudo (both are
+   OCCUPIED on the real glass carrier: `::before` is the moving-specular catch-light,
+   `::after` is the grain overlay; the H2 hardening). The child is a self-contained
+   ink-plate the body floats above: it carries the SAME shipped `--shadow-cartoon-md`
+   box-shadow (set ONCE per state-flip — NEVER animated, the §L7 paint-fence) and
+   MOVES on the compositor via `translate`/`scale` only.
+
+   The cast travels DOWN-LEFT (opposite the upper-right `--glass-key`, coherent with
+   the shadow.css cel-ink geometry) as the body lifts, and SPREADS as the gap opens.
+   ONE scalar drive: `--cartoon-press-t × --motion-weight` (the `:root` PRM carve
+   zeroes `--motion-weight` → travel/spread collapse to rest). It LAGS the body
+   (~1.15× slower transition) → the ink recoils LATE on release (follow-through /
+   overlapping action). The `--cartoon-cast-dx/dy` drag-track deltas are 0 at rest
+   (the opt-in `useCartoonCast` DOM bridge is future — labeled honestly). */
+.cartoon-cast {
+    position: absolute;
+    inset: 0;
+    z-index: -1; /* behind the cel face, in front of the page */
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: var(--shadow-cartoon-md);
+    /* the derived offset + spread — read `--motion-weight × --cartoon-press-t`. The
+       sign is DOWN-LEFT (negative X, positive Y) to match the upper-right key. */
+    --cast-travel: calc(6px * var(--motion-weight) * var(--cartoon-press-t));
+    --cast-spread: calc(1 + 0.18 * var(--motion-weight) * var(--cartoon-press-t));
+    translate:
+        calc(-1 * var(--cast-travel) + var(--cartoon-cast-dx))
+        calc(var(--cast-travel) + var(--cartoon-cast-dy));
+    scale: var(--cast-spread);
+    /* the caster LAGS the body (~1.15×) → the late ink recoil on release. */
+    transition:
+        translate calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch),
+        scale calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch),
+        --cartoon-cast-dx var(--duration-normal) var(--ease-cartoon-punch),
+        --cartoon-cast-dy var(--duration-normal) var(--ease-cartoon-punch);
+    will-change: translate, scale;
+}
+
+/* BD.W-CARTOON-CASTER — PRM/PRT carve. Under reduced-motion `--motion-weight: 0`
+   zeroes travel/spread/squash/lag in ONE assignment (every `calc(… * --motion-weight)`
+   collapses to rest); the transition is killed. The static bold cel STAMP persists
+   (identity/legibility — only the TRAVEL/PUNCH is removed). */
+@media (prefers-reduced-motion: reduce) {
+    .cartoon-surface,
+    .cartoon-cast {
+        --motion-weight: 0;
+        transition: none;
     }
 }