@mkbabb/glass-ui 4.0.0 → 4.1.0

package/dist/spectrum-walk-BVzA7Biz.js

@@ -0,0 +1,33 @@
+import { o as e, t } from "./color-Cs0-oxYL.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-WXaLbu8u.js → springPresets-Ce7OYCm9.js}

@@ -8,27 +8,33 @@ var e = [
 	},
 	{
 		name: "snappy",
-		response: .35,
-		dampingFraction: .65,
-		comment: "CONTROL register — crisp position morphs (tab underline, progress fill, marker pop), overshoot ~+6.8%"
+		response: .42,
+		dampingFraction: .78,
+		comment: "CONTROL register — crisp position morphs (tab underline, progress fill, marker pop); eased to fill its clock (90%-travel ~0.57 of clock), overshoot ~+2.0%"
 	},
 	{
 		name: "bouncy",
 		response: .5,
-		dampingFraction: .45,
-		comment: "PLAYFUL register — emphatic one-shots only (bouncy toggle, dialog/success entrance, VT default), overshoot ~+20.5%"
+		dampingFraction: .55,
+		comment: "PLAYFUL register — emphatic one-shots only (bouncy toggle, dialog/success entrance, VT default), overshoot ~+12.6% (the Apple 12-18% band)"
 	},
 	{
 		name: "gentle",
 		response: .7,
 		dampingFraction: 1,
-		comment: "GENTLE register — patient critically-damped settle, reached via the --ease-spring-gentle @theme alias"
+		comment: "GENTLE register — patient critically-damped settle, reached via the --ease-spring-gentle @theme alias. BC.W-MOTION-PRESETS reuses this row as the brand convergence-reveal (--ease-convergence): the partial-sum settle is critically-damped with NO overshoot (ζ=1.0, overshoot 0) — measured-not-distinct, so the ALIAS, not a new row"
 	},
 	{
 		name: "dock",
 		response: .32,
 		dampingFraction: .7,
 		comment: "DOCK register — dock expand/collapse morph + the in-dock Slider thumb, iOS-control settled, overshoot ~+4.6%"
+	},
+	{
+		name: "press",
+		response: .15,
+		dampingFraction: .86,
+		comment: "PRESS register — the iOS interactive tap-press (Apple interactiveSpring 0.15/0.86); sub-100ms answer, tiny alive rebound ~+0.5%. Read by useSpringPress + the --glass-btn-press-t drive"
 	}
 ];
 function t(t) {

package/dist/styles/animations.css

@@ -134,9 +134,18 @@
     }
 }
 
-/* ── Gold shimmer: metallic text highlight sweep ── */
-
-@keyframes gold-shimmer-slide {
+/* ── Metal shimmer: the metal-PARAMETERIZED text/border highlight sweep ──
+ * BB.W-METAL-SHIMMER — the ONE metal-agnostic sweep (the gold-only
+ * `gold-shimmer-slide` RETIRED onto it — clean break, no alias). The keyframe is
+ * PURE position (ZERO baked metal color): the metal hue is the recipe's job via
+ * the `--metal-shimmer-color`-bound gradient (see utilities/metal.css). The SAME
+ * keyframe sweeps a gold, silver, or bronze gradient depending only on the channel,
+ * usable for BOTH text-clip (the `.metal-*` text register) AND border/mask (the
+ * `.metal-*-border` swept RIM) — the position pass shifts whatever gradient the
+ * surface paints. The `200% 0`→`-200% 0` shape carries the gold READ exactly
+ * (byte-faithful to the retired `gold-shimmer-slide`). The slow `--duration-metal`
+ * (6s) clock is set at the consumer (the metal recipe), not baked here. */
+@keyframes metal-shimmer-sweep {
     0%   { background-position: 200% 0; }
     100% { background-position: -200% 0; }
 }
@@ -145,8 +154,8 @@
  * The `@keyframes sparkle-sweep` + its reduced-motion stub are DELETED with the
  * disco recipe family — the `btn-audacious` ::after star (its sole consumer) is
  * gone, and the dock-tab primary tier collapsed onto the calm glass register.
- * The `Complete!` celebratory shimmer rides its OWN keyframes (gold-shimmer-slide
- * / shimmer above), never sparkle-sweep.
+ * The `Complete!` celebratory shimmer rides the metal-shimmer-sweep / shimmer
+ * keyframes above, never sparkle-sweep.
  */
 
 /* ── Pulse dot bounce: dots variant of <Pulse> ──
@@ -198,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);
     }
 }
@@ -314,13 +333,26 @@
     dialog.glass-top-layer {
         opacity: 0;
         scale: var(--top-layer-enter-scale, 0.96);
-        transition-property: opacity, scale, display, overlay;
+        /* BB.W-LIQUID-REVEAL — the coupled blur-settle decongest (the iOS
+           "light-bending modulation" arrival). The surface's OWN pixels decongest
+           `filter: blur(--top-layer-enter-blur)` → `blur(0)` AS it blooms (a `filter`
+           radius interp is compositor-safe; it rides the surface's pixels, so it does
+           NOT fight the resting glass-tier `backdrop-filter` plate blur — the
+           REVEAL-TOPLAYER-NO-BLUR fix, the twin of the `.glass-reveal` recipe's blur
+           leg, glass/reveal.css). */
+        filter: blur(var(--top-layer-enter-blur, 4px));
+        transition-property: opacity, scale, filter, display, overlay;
         /* BA.W-GLASS-CAL Unit 3 — the enter rides the bouncy spring's OWN settle
            clock (`--spring-bouncy-duration`, the 2%-band envelope settle) rather
            than the generic `--duration-normal`, so the emphatic dialog/popover
-           entrance bounce reads fully instead of being clipped at 0.3s. */
-        transition-duration: var(--spring-bouncy-duration);
-        transition-timing-function: var(--spring-bouncy);
+           entrance bounce reads fully instead of being clipped at 0.3s. The blur
+           decongest rides the no-overshoot `--ease-out` (EFFECTS), the scale the
+           bouncy spring (SPATIAL) — the W-MOTION-CANON split. */
+        transition-duration: var(--spring-bouncy-duration),
+            var(--spring-bouncy-duration), var(--spring-bouncy-duration),
+            var(--spring-bouncy-duration), var(--spring-bouncy-duration);
+        transition-timing-function: var(--spring-bouncy), var(--spring-bouncy),
+            var(--ease-out), linear, linear;
         transition-behavior: allow-discrete;
     }
 
@@ -330,9 +362,11 @@
     dialog.glass-top-layer[open] {
         opacity: 1;
         scale: 1;
+        filter: blur(0);
         @starting-style {
             opacity: 0;
             scale: var(--top-layer-enter-scale, 0.96);
+            filter: blur(var(--top-layer-enter-blur, 4px));
         }
     }
 

package/dist/styles/border-progress.css

@@ -0,0 +1,109 @@
+/* BB.W-BORDER-PROGRESS — progress IS the element's border.
+ *
+ * The masked-conic ring consumption (the registration lives in
+ * tokens/property-regs.css §18, mirroring the specular split: the @property reg
+ * there, the consumption here). The ring paints a `conic-gradient` MASK-COMPOSITED
+ * into the border band so ONLY the band paints AND it FOLLOWS the host
+ * `border-radius` — a `border-image` SQUARES the corners (measured inferior,
+ * forbidden), a floating-bar child re-introduces allocation (forbidden). The host
+ * INTERIOR is untouched: a glass card still transmits the backdrop THROUGH its
+ * content box (the AX.W54 glass-first identity — the ring is a border-band cut-out,
+ * not an opaque overlay).
+ *
+ * Compositor-only: the sweep rides the registered `--border-progress-fill`
+ * <percentage>; no layout property animates (`proof:no-layout-animation`). The
+ * unregistered fallback is safe (the `initial-value` paints the resting ring; the
+ * cross-fade collapses to it on a non-supporting engine — Chromium 85+/Safari
+ * 16.4+, within the deployment floor). */
+
+.border-progress {
+    position: relative;
+    display: block;
+    border-radius: var(--border-progress-radius, 16px);
+    /* The host reserves the border band the ring paints into (allocation-free —
+       the content box is untouched, no reflow). */
+    padding: 0;
+}
+
+/* The ring layer — inset over the host, the border band the conic paints into.
+   The `border` width IS the band thickness; the conic is mask-composited so the
+   padding-box (interior) is EXCLUDED from the border-box (the radius-following
+   cut-out). */
+.border-progress__ring {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: var(--border-progress-width, 12px) solid transparent;
+    pointer-events: none;
+    /* The spectrum conic, swept to --border-progress-fill. The colored arc runs
+       from the top (12 o'clock) clockwise to the fill fraction; past it is
+       transparent so the resting band shows ONLY the filled spectrum. */
+    background:
+        conic-gradient(
+            from 0deg,
+            var(--border-progress-spectrum, var(--section-color-7)),
+            transparent var(--border-progress-fill, 0%),
+            transparent 100%
+        );
+    /* THE RADIUS-FOLLOWING CUT-OUT — the house border-ring idiom: paint a
+       border-box fill, EXCLUDE a padding-box fill, leaving only the border band,
+       which follows `border-radius` exactly (a border-image cannot). */
+    -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 COVERAGE AXIS — ONE conic-mask mechanism, two coverage masks (NOT a second
+   recipe). `bottom-edge` adds a SECOND mask layer scoping the painted band to the
+   bottom edge only; it composes WITH the border-band cut-out above (the mask
+   stack intersects), so the bottom register reuses the exact conic + radius
+   cut-out — the dock-orientation `dim`-idiom discipline (no parallel fork). */
+.border-progress[data-coverage="bottom-edge"] .border-progress__ring {
+    -webkit-mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box,
+        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
+    -webkit-mask-composite: xor, source-in;
+    mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box,
+        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
+    mask-composite: exclude, intersect;
+}
+
+/* The content box — the host's own surface (a glass card, a chassis). It is
+   untouched by the ring (backdrop-intact); the ring sits over the border band
+   only. */
+.border-progress__content {
+    position: relative;
+    z-index: 1;
+    border-radius: inherit;
+    height: 100%;
+}
+
+/* THE MILESTONE PULSE — a brief brightness bloom on a crossed phase edge. The
+   pulse is PRM-gated (no edge-pulse under reduced motion — the ring snaps to the
+   new value). Compositor-only (filter brightness, never a layout property). */
+@media (prefers-reduced-motion: no-preference) {
+    .border-progress[data-milestone] .border-progress__ring {
+        animation: border-progress-milestone-pulse
+            var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out);
+    }
+}
+
+@keyframes border-progress-milestone-pulse {
+    0% {
+        filter: brightness(1);
+    }
+    40% {
+        filter: brightness(1.35);
+    }
+    100% {
+        filter: brightness(1);
+    }
+}

package/dist/styles/cards.css

@@ -17,6 +17,151 @@
     :where(.dark) .paper-texture {
         background-blend-mode: screen;
     }
+
+    /* BB.W-PAPER-GRID-TEXTURE — the GEOMETRIC sibling of `.paper-texture`.
+       Paints the two-frequency `--paper-grid-texture` engineering-grid as a
+       card's INTERIOR ground, clipped to the plate's own `border-radius`
+       automatically (a host `background-image`), so the math/grid brand pillar
+       reads THROUGH a document-register card at the ambient `--paper-grid-
+       opacity` — not only in the page margin an opaque plate occludes. A
+       decoration-only register (NOT a tier): it composes ON TOP of any glass/
+       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-
+       light (glass/material.css) and `::after` is the grain overlay
+       (glass/ladder.css). A `.paper-grid::after` would CLOBBER the grain's
+       `background-image` on the SAME single pseudo — so the grid + grain could
+       not compose (the orthogonality the spec requires). The grid therefore
+       rides the HOST element's `background-image` longhand: the glass tier's
+       `background:` SHORTHAND sets the translucent fill `background-color`, and
+       a later `background-image` longhand COEXISTS with that color (the image
+       paints OVER the color, UNDER the content + UNDER both pseudos), so the
+       grid is the card's own underlay felt THROUGH the glass tint with ZERO
+       pseudo contention — grain (`::after`) + specular (`::before`) + grid
+       (host bg-image) all paint at once. The host bg-image is clipped by the
+       host `border-radius` by construction (no `border-radius: inherit` pseudo
+       needed). A STATIC raster — gradient-stack `background-image`, one
+       compositor-cached paint, no per-frame repaint (the W6 paint-path
+       discipline). The ambient strength lives in the line-ink alpha (the
+       `--paper-grid-opacity`-scaled `--foreground` mix, scale-paper.css) since
+       a host bg-image has no independent layer-opacity — so ONE knob
+       (`--paper-grid-opacity`) still tunes the through-card strength. */
+    .paper-grid {
+        background-image: var(--paper-grid-texture);
+        background-repeat: repeat;
+        background-size:
+            calc(var(--paper-grid-texture-size) * 4)
+                calc(var(--paper-grid-texture-size) * 4),
+            calc(var(--paper-grid-texture-size) * 4)
+                calc(var(--paper-grid-texture-size) * 4),
+            var(--paper-grid-texture-size) var(--paper-grid-texture-size),
+            var(--paper-grid-texture-size) var(--paper-grid-texture-size);
+        background-blend-mode: multiply;
+    }
+
+    /* The scheme-aware dark arm — PLAIN-ancestor `.dark` (NOT a scoped
+       `:global()`; the recurring scoped-global-drop trap, recorded; this is a
+       library CSS partial, but the discipline holds). The line ink is
+       `--foreground`-derived, so the warm-cream foreground flips dark→light in
+       the `.dark` block and the grid ink auto-lifts off the near-black `--card`
+       interior with NO parallel `--paper-grid-*-dark` family — only the BLEND
+       flips (light `multiply` → dark `screen`, the legible-on-dark equivalent
+       the `.paper-texture` dark arm uses). */
+    :where(.dark) .paper-grid,
+    .dark .paper-grid {
+        background-blend-mode: screen;
+    }
+}
+
+/* ═══════════════════════════════════════════════
+   A11y — the geometric grid honors the SAME transparency idiom the organic
+   paper register establishes (paper.css). A reduced-transparency user gets a
+   clean card interior, no texture; the static grid needs no motion gate (the
+   PRM block guards a future drift only). One a11y idiom, not a grid-local fork.
+   ═══════════════════════════════════════════════ */
+@media (prefers-reduced-transparency: reduce) {
+    .paper-grid {
+        background-image: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .paper-grid {
+        /* Static raster at rest; guard a future `@property` transform drift. */
+        animation: none !important;
+    }
+}
+
+/* ── 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 ───────────────────────────────────

package/dist/styles/completion-seal.css

@@ -0,0 +1,131 @@
+/* BC.W-AX-COMPLETION-SEAL — the hero-scale earned-GOLD completion seal.
+ *
+ * A determinate process completes and a HERO-SCALE gold mark DRAWS itself onto the
+ * surface: the stroke INKS (a `stroke-dashoffset` wipe on the registered `--seal-draw`
+ * <percentage>), settles with a small spring overshoot (the `--seal-scale` SPATIAL leg
+ * on the seal's own `--spring-snappy`/`--spring-bouncy` clock), and glints ONCE on
+ * settle (the `--seal-glint` + the W-AX-METAL-GLOW gold catch-light). It is GOLD because
+ * completion is EARNED — the ink reads the W-PHASE-PALETTE completion register
+ * (`--phase-complete-color`/`--color-gold`), so a consumer re-inking completion re-inks
+ * the seal in lockstep. The seal mints NO new gold token + does NOT re-author the metal
+ * glow — it COMPOSES both (the earned-gold register has ONE home).
+ *
+ * ONE-SHOT: the draw fires ONCE on `play` (the `.completion-seal[data-play]` arm), then
+ * holds the static fully-drawn seal — no looping shimmer (the §6 calm register; the disco
+ * family stays gone). PRM-gated: under `prefers-reduced-motion: reduce` the seal appears
+ * instantly fully-drawn (`--seal-draw: 100%` snap), no stroke animation, no glint sweep
+ * (the seal is correct, the motion off — the vestibular floor).
+ *
+ * COMPOSITOR-ONLY: the draw rides `stroke-dashoffset` (a paint prop) + `transform` (the
+ * scale) + `filter`/`opacity` (the glint) — NO layout property animates
+ * (`proof:no-layout-animation` holds). The registrations live in
+ * tokens/property-regs.css §18 (the specular/border-progress split: the @property reg
+ * there, the consumption here). */
+
+.completion-seal {
+    /* The seal stroke ink — the EARNED-gold completion register (Q2). The runtime
+       cascade default is the token form: a consumer (or any ancestor) re-inking
+       `--phase-complete-color` re-inks the seal. The @property `initial-value` literal
+       light-gold is only the non-supporting-engine fallback. */
+    --seal-ink: var(--phase-complete-color, var(--color-gold));
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* The settle scale rides the SPATIAL leg — a small overshoot on the seal's own
+       spring clock (NOT a generic --duration-*). Compositor-only (transform). */
+    transform: scale(var(--seal-scale, 1));
+}
+
+/* The hero-scale gold-draw glyph — an SVG <path>/<circle> stroked in `--seal-ink`. The
+   stroke INKS itself via the `--seal-draw` wipe (a stroke-dashoffset paint, never a
+   fade). The glint reads the W-AX-METAL-GLOW catch-light (composed, not re-authored). */
+.completion-seal__mark {
+    fill: none;
+    stroke: var(--seal-ink);
+    stroke-width: var(--seal-stroke-width, 6);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    /* The stroke-reveal: the dash array is the full path length, the offset rides the
+       `--seal-draw` extent (100% = drawn → offset 0; 0% = undrawn → offset = full
+       length). pathLength="100" normalizes the glyph so the wipe is path-agnostic. */
+    stroke-dasharray: 100;
+    stroke-dashoffset: calc(100 - var(--seal-draw, 100%) / 1%);
+    /* The one-pass gold glint on settle — the W-AX-METAL-GLOW catch-light, scaled by
+       `--seal-glint` (0 at rest → 1 on settle-pass). A drop-shadow halo of the seal's
+       OWN gold ink at the metal-glow radius/strength — composed, never re-authored.
+       The seal is NOT a `.metal-*` element, so the bare `--metal-glow-blur`/`-opacity`
+       (declared scoped inside `.metal-{gold,silver,bronze}`) do not cascade here; the
+       seal CONSUMES THE REGISTER by chaining to the `:root` `-default` retune seam
+       (glass-fx.css), NOT a hardcoded magic-number copy — a consumer who retunes
+       `--metal-glow-blur-default` re-tunes the seal halo in lockstep. */
+    --metal-glow-blur: var(--metal-glow-blur-default, 0.5em);
+    --metal-glow-opacity: var(--metal-glow-opacity-default, 0.35);
+    filter: drop-shadow(
+        0 0
+        calc(var(--metal-glow-blur) * var(--seal-glint, 0))
+        color-mix(
+            in oklab,
+            var(--seal-ink),
+            transparent
+                calc(100% - var(--metal-glow-opacity) * var(--seal-glint, 0) * 100%)
+        )
+    );
+}
+
+/* THE ONE-SHOT DRAW — fires ONCE on `play`, then holds static. PRM-gated: the whole
+   motion sits inside the no-preference gate (under reduce the seal is the static
+   fully-drawn mark, the @property initial-values). The draw is NOT a loop — a single
+   pass each on the stroke-reveal + the settle + the glint. */
+@media (prefers-reduced-motion: no-preference) {
+    .completion-seal[data-play] {
+        animation: completion-seal-settle var(--spring-bouncy-duration, 0.57s)
+            var(--spring-bouncy) both;
+    }
+    .completion-seal[data-play] .completion-seal__mark {
+        animation:
+            completion-seal-draw var(--spring-snappy-duration, 0.34s)
+                var(--ease-out, ease-out) both,
+            completion-seal-glint var(--spring-snappy-duration, 0.34s)
+                var(--ease-out, ease-out)
+                var(--spring-snappy-duration, 0.34s) both;
+    }
+}
+
+/* The stroke-reveal: the gold INKS itself 0→full (a stroke-dashoffset paint wipe — the
+   editorial draw-on). The registered `--seal-draw` interpolates; the offset reads it. */
+@keyframes completion-seal-draw {
+    from {
+        --seal-draw: 0%;
+    }
+    to {
+        --seal-draw: 100%;
+    }
+}
+
+/* The settle: the seal lands with a small overshoot (the SPATIAL enter-bounce). The
+   transform scale rides the `--seal-scale` spring; the keyframe nudges the scale once
+   (the §6 calm overshoot — an ENTER may overshoot on arrival). Compositor-only. */
+@keyframes completion-seal-settle {
+    from {
+        --seal-scale: 0.92;
+    }
+    to {
+        --seal-scale: 1;
+    }
+}
+
+/* The glint: a ONE-PASS gold catch-light sweep on settle (0 → peak → 0). NOT a loop —
+   a single pass, then the seal holds static at glint 0 (the metal-glow whisper is the
+   resting register; the disco family stays gone). */
+@keyframes completion-seal-glint {
+    0% {
+        --seal-glint: 0;
+    }
+    45% {
+        --seal-glint: 1;
+    }
+    100% {
+        --seal-glint: 0;
+    }
+}