@mkbabb/glass-ui 4.0.0 → 4.0.1

package/src/styles/glass/surfaces.css

@@ -18,7 +18,12 @@
         position: relative;
         background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-quiet);
-        border: 1px solid var(--card-focus-border);
+        /* BB.W-GLASS-ACCENT — the card border feeds its focus-elevation ink into the
+           accent-composed `--glass-border-accent` (ladder.css rim group); byte-
+           identical at 0% strength. The focus rung still re-points `--card-focus-
+           border`, which flows through `--glass-border-rung`. */
+        --glass-border-rung: var(--card-focus-border);
+        border: 1px solid var(--glass-border-accent);
         border-radius: var(--radius-card);
         box-shadow: var(--glass-material-rim), var(--card-focus-shadow);
         /* AY.W-A11Y-PERF O-4 — upgrade `layout style` → include `paint` so the
@@ -181,6 +186,96 @@
        dedup-and-keep-prefixed, which modern Chromium then drops). */
     .btn-glass {
         backdrop-filter: var(--glass-blur-btn);
+
+        /* BB.W-BUTTON-GLASS (d) — the button-scoped DEPTH stack + the hover-specular
+           bump. The glass button was the flattest wash rung (a bare backdrop-filter,
+           no rim, no under-shadow) — it read as a tinted rectangle, not a lifted
+           glass lozenge. The `--glass-btn-*` knobs compose ALREADY-MINTED tokens (the
+           `--glass-edge-light` rim + the `quiet`/`resting`-tier `--glass-under-shadow-*`
+           drop) so a consumer retints the whole button depth from ONE override; NO new
+           compositing axis. The rim+under-shadow lifts the lozenge; the box-shadow is
+           additive over the variant's own focus/press shadow legs (the `.btn-pill`
+           transition carries box-shadow on the §6 bezier, so the depth cross-fades
+           coherently). */
+        --glass-btn-rim: var(--glass-edge-light);
+        --glass-btn-under-shadow: var(--glass-under-shadow-quiet);
+        --glass-btn-under-shadow-hover: var(--glass-under-shadow-default);
+        box-shadow: var(--glass-btn-rim), var(--glass-btn-under-shadow);
+        /* The button-scoped hover gleam bump (0.10 → ~0.14): a hovered glass button
+           reads a notch brighter at the grazing edge than the global hover whisper.
+           Token-scoped to `.btn-glass` (NOT the global `:root` cohort property-regs.css
+           owns) so only the button lifts. The active/rest rungs ride the global cohort
+           (the press whisper + the dormant rest). */
+        --glass-specular-intensity-hover: var(--glass-specular-btn-hover);
+    }
+
+    /* The depth deepens one rung on hover (the lifted-lozenge read) — additive over
+       the variant's own hover surface legs. The variants paint the bg/border on
+       hover; this adds the deeper drop. */
+    .btn-glass:hover:not(:disabled, [data-disabled]) {
+        box-shadow: var(--glass-btn-rim), var(--glass-btn-under-shadow-hover);
+    }
+
+    /* BB.W-BUTTON-GLASS (a) — the ELEMENT-LEVEL oklab-tinted hover/active fill pair
+       (the substitution-vs-inheritance trap fixed on the button register). The glass
+       button variants painted `hover:bg-(--glass-bg-resting) active:bg-(--glass-bg-
+       floating)` — the RAW `:root` rung tokens, which carry NO `color-mix(in oklab, …,
+       --glass-tint-source --glass-tint-strength)` wrapper. So the W55 adaptive darken
+       + the `contrast-color()` ink flip + the content-tier floor (all of which the REST
+       bg `.glass-wash` composes via the element-level oklab seam) DROPPED the moment the
+       pointer landed — "more glass would cost legibility" exactly inverted from the
+       iOS-27 ask. These two tokens wrap the raw rungs in the SAME element-level oklab
+       seam `ladder.css` composes for the rest bg + `--glass-bg-dock` for the dock — ZERO
+       new compositing axis, the literal darken-over-light recipe reached at the lit
+       fill. ZERO-delta at the `--glass-tint-strength: 0%`/floor default (the mix toward
+       the source is 0%); under the declared/sampled bright bucket the lit fill darkens
+       to AA in lockstep with the rest bg. The `:root` raw `--glass-bg-*` tokens are
+       UNTOUCHED (other surfaces compose them at the element correctly — the raw token +
+       the element-level oklab wrapper is the correct ladder shape). */
+    .btn-glass {
+        --glass-bg-resting-tinted: color-mix(
+            in oklab,
+            var(--glass-bg-resting),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        --glass-bg-floating-tinted: color-mix(
+            in oklab,
+            var(--glass-bg-floating),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+    }
+
+    /* BB.W-BUTTON-GLASS (e) — the optional refraction-edge opt-in. CONSUMES the
+       EXISTING refraction axis (glass-refract.css, the `#glass-refract` SVG-filter
+       lens, `@supports (backdrop-filter: url(#…))`-gated with the un-gated blur base
+       as the off-Chromium floor) — NEVER a button-local lens fork. BB.W-LENSING landed
+       the squircle bevel-profile + the typed `--glass-refract` axis + the `.glass-lens`
+       opt-in class (renamed off `.glass-refract`, clean break); the button COMPOSES
+       `.glass-lens`.
+
+       A `<Button :liquid>` adds `.glass-lens` to the host; on a supporting engine the
+       button reads the edge-bend over its blur base. The base recipe (the
+       `@supports`-gated `.glass-lens` rule in glass-refract.css) already paints the
+       displacement filter over `--glass-blur-resting`; this block adds NOTHING to the
+       filter graph (it would fork the axis) — the button merely COMPOSES `.glass-lens`.
+
+       The `:active` LENS-SWELL is the CHEAP coupled read, NOT a per-frame displacement-
+       map re-rasterize (the §Triumvirate / R2 budget: `feDisplacementMap` is resize-
+       expensive — only the `scale` attr animates without rebuilding the map, and even
+       that re-rasterizes; the one-refractive-element-per-route budget forbids the per-
+       frame cost). The swell is the press SQUISH (Button.vue, the `useLiquidFlex`
+       reciprocal X/Y deform) + the coupled `--glass-specular-intensity-active` gleam
+       lift on the SAME `--glass-btn-press-t` drive — the glass reads as DEFORMING under
+       the press without re-rasterizing the lens map. Off-Chromium the whole arm degrades
+       to the un-gated `.btn-glass` blur+tint base (the no-workaround floor). The
+       `--glass-btn-press-t` typed drive (property-regs.css) is the ONE press scalar the
+       squish + the gleam coupling both read. */
+    .btn-glass.glass-lens {
+        /* The press drive scalar (0 rest → 1 pressed) Button.vue writes off the spring;
+           the resting default is 0 so an unwired refraction button is the static lens.
+           The `:active` LENS-SWELL on this drive lives in material.css's `.glass-lens`
+           block (`--glass-refract` bumps on press); this block only floors the drive. */
+        --glass-btn-press-t: 0;
     }
 
     /* ── Pill input ───────────────────────────────── */
@@ -289,8 +384,11 @@
        invalid field shows the destructive ring on focus too. */
     .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]):focus-visible {
         border-color: var(--destructive);
-        box-shadow: 0 0 0 var(--focus-ring-width)
-            color-mix(in srgb, var(--destructive) 35%, transparent);
+        /* BB.W-INVALID-RING — the shared destructive ring register (the
+           --focus-ring-shadow sibling). The byte-identical recipe is now ONE
+           token; the `8%` at-rest bg arm above stays `.input-pill`-local (a
+           glass-tint substrate the bare-ring surfaces do not carry). */
+        box-shadow: var(--invalid-ring);
     }
 
     /* AQ.W4 §W4.3 — `field-sizing: content` autosize (opt-in via the Textarea

package/src/styles/glass-refract.css

@@ -1,59 +1,111 @@
-/* AW.W23 — the #glass-refract convex-lens SVG filter, shipped as a library
- * asset so `.glass-refract` works OUT OF THE BOX (no consumer hand-mounts a
- * filter node).
+/* BB.W-LENSING — the #glass-refract edge-lensing SVG filter, EVOLVED off the
+ * AW.W23 crude-radial garnish onto the real squircle bevel-profile + the typed
+ * `--glass-refract` axis driving the animatable displacement `scale` (the press
+ * lens-swell). Shipped as a library asset so `.glass-lens` works OUT OF THE BOX
+ * (no consumer hand-mounts a filter node).
  *
- * The refraction recipe is the canonical 3-primitive graph (kube.io /
+ * The refraction recipe is the canonical 3-primitive graph (kube.io / ekino /
  * LogRocket, 2025):
  *
- *   feImage          — a pre-baked displacement map computed from the convex-
- *                      squircle surface profile  y = ⁴√(1 − (1 − x)⁴)  (Apple's
- *                      preferred corner curve) via Snell's law (n₁ = 1 air,
- *                      n₂ = 1.5 glass). The map is authored as an embedded SVG
- *                      whose R channel carries the x-shift and G channel the
- *                      y-shift (neutral 128 = no shift; bright edges bend light
- *                      inward like a lens), expressed as two crossed linear
- *                      gradients over the squircle silhouette.
+ *   feImage          — the displacement map computed from the convex-squircle
+ *                      surface profile  f(x) = ⁴√(1 − (1 − x)⁴)  (Apple's preferred
+ *                      corner curve) via Snell's law (n₁ = 1 air, n₂ = 1.5 glass).
+ *                      The map's R channel carries the x-shift and G the y-shift
+ *                      (neutral 128 = no shift). The squircle slope is near-flat past
+ *                      the outer ~14% band and STEEP at the rim, so the bend
+ *                      CONCENTRATES at the edge (thin interior) — the iOS edge-lensing
+ *                      read, NOT a uniform radial bulge (the retired AW.W23 placeholder).
+ *                      Encoding: TWO crossed linear gradients — a HORIZONTAL gradient
+ *                      drives the R channel (255 @0% → 128 across the flat interior →
+ *                      0 @100%, the squircle ramp held in the bevel band) and a VERTICAL
+ *                      gradient drives the G channel the same way — SCREEN-composited
+ *                      over a black base so each channel carries its own axis EXACTLY
+ *                      (`screen(C, 0) = C`; the displacement map reads only R/G, B unused).
+ *                      The map carries ZERO color (the warm-cream identity HOLDS —
+ *                      refraction is DEPTH not hue). The asset is baked ONCE (the
+ *                      squircle CURVE is fixed, the Apple-preferred profile); only the
+ *                      `scale` param animates the magnitude (scope 2 — no map re-bake).
  *   feDisplacementMap— displaces the backdrop by the baked map (R = x-shift,
- *                      G = y-shift, `scale` = max px, neutral 128).
- *   feImage specular — a soft top-left specular highlight…
- *   feBlend screen   — …blended `screen` over the displaced backdrop for the
- *                      polished-glass catch.
+ *                      G = y-shift, `scale` = max px the `--glass-refract` axis drives).
+ *   feImage specular — a soft warm top-left specular highlight (PRESERVED from HEAD —
+ *                      the polished-glass catch).
+ *   feBlend screen   — blended `screen` over the displaced backdrop.
  *
- * The filter ships INLINE as a data-URI in the `backdrop-filter` declaration, so
- * the consumer gets it with zero markup. `backdrop-filter: url(#…)` is
- * Chromium-only (WebKit bug 245510 open, Firefox not shipping), so the whole
- * decl sits behind `@supports (backdrop-filter: url(#…))`; a non-supporting
- * engine paints the un-gated blur base alone (no broken `url()` reference).
+ * DDR-LENS-BAKE — the displacement `scale` is a BAKED LITERAL (`scale='28'`, the §10
+ * default depth), NOT a var()-driven axis. WHY (the reversal of BB.W-LENSING scope 2):
+ * the scope-2 design split the filter across `var(--…head) var(--glass-refract) var(--…tail)`
+ * to splice the typed `@property --glass-refract` value between a head ending `…scale='`
+ * and a tail beginning `'…`. That construction is doubly broken, proven on the real edge
+ * (Chromium, playwright):
+ *   (1) PARSE — head/tail each carry a COMPLETE `url(…)`, so the composite is the three
+ *       tokens `url("…") 28 url("…")`, which a `backdrop-filter` REJECTS. The lens
+ *       computed-`backdrop-filter: none` — it never rendered. (A var() inside a single
+ *       url() STRING token is not re-tokenised by the engine either — tested — so there
+ *       is no CSS-legal path to a dynamic `scale` inside one self-contained data-URI.)
+ *   (2) BUNDLER — the tail `url("'…")` starts with a bare quote, so a consumer's CSS
+ *       url()-rewriter (vite/postcss) reads it as a relative asset path and fails
+ *       `ENOENT: open ''`, breaking EVERY bundler-based consumer.
+ * The fix: ONE complete, valid `url("data:…scale='28'…")` token. A `data:` URI is the
+ * single form that both PARSES as a filter value AND is skipped by the url()-rewriter
+ * (the rewriter only resolves non-data/non-#/non-http content as a file). RE-LITIGATE-IF
+ * the platform ships a way to substitute a value into a url() string token (then the
+ * press-swell `scale` animation could return). TRADEOFF: the per-instance `:active`
+ * lens-swell (28→44 `scale` on press) is dropped — but it was already inert (it animated
+ * a value that reached no rendering filter), so the lived read is UNCHANGED (and the lens
+ * now actually renders). The `@property --glass-refract` reg + `--glass-refract-swell`
+ * knob are retired with it. The bevel-band width is the `--glass-refract-bevel` knob
+ * (default 14% — the iOS edge band); the baked stops fix the squircle CURVE, the knob
+ * documents the rim concentration the map encodes.
  *
- * RE-HOME (AW.W23 — decouple from the W22-folded compound). At HEAD the
- * refraction rule was bound to `.glass-specular-track.glass-refract`. W22 folds
- * `glass-specular-track` into `.glass-material`, retiring the compound's left
- * operand, so the rule is re-homed onto `.glass-material.glass-refract` — the
- * refraction garnish opts in on ANY `.glass-material` surface, no dependency on
- * the now-aliased `glass-specular-track` class. The garnish stays PE-only over
- * the blur base; it is NEVER promoted to the card/primitive substrate
- * (feDisplacementMap is resize-expensive — only the `scale` attr animates
- * without rebuilding the map).
+ * The filter ships INLINE as a data-URI in the `backdrop-filter` declaration, so the
+ * consumer gets it with zero markup. `backdrop-filter: url(#…)` is Chromium-only (WebKit
+ * bug 245510 open, Firefox not shipping), so the whole decl sits behind
+ * `@supports (backdrop-filter: url(#…))`; a non-supporting engine paints the un-gated blur
+ * base alone (no broken `url()` reference — the no-workaround degrade floor, PRESERVED).
+ *
+ * CLASS RENAME (BB.W-LENSING scope 5 — clean break, no alias, BB inv-7). The AW.W23
+ * `.glass-refract` opt-in class is RENAMED to `.glass-lens` (the §2 vocabulary); the
+ * `--glass-refract*` AXIS/token names are KEPT (the lens magnitude is the refraction
+ * axis). Consumers (`<Button :liquid>`, the demo witness) compose `.glass-lens`. The
+ * rename is the only public-surface delta (MIGRATION.md row). The garnish stays PE-only
+ * over the blur base; it is NEVER promoted to the card/primitive substrate
+ * (feDisplacementMap is resize-expensive — only the `scale` param animates without
+ * rebuilding the map).
  */
 
 @layer components {
-    /* The shipped filter graph as a data-URI SVG. A `0×0` host SVG mounted via
-       the CSS asset keeps the `#glass-refract` id resolvable in-document. */
-    .glass-refract {
-        /* The named convex-lens displacement filter, baked from the squircle
-           surface profile. Composed as a custom property so the @supports arm
-           below references one source. */
-        --glass-refract-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='glass-refract' x='0' y='0' width='100%25' height='100%25'%3E%3CfeImage href='data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522m%2522 cx=%252250%2525%2522 cy=%252250%2525%2522 r=%252250%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(128,128,128)%2522/%253E%253Cstop offset=%252270%2525%2522 stop-color=%2522rgb(128,128,128)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(255,255,128)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523m)%2522/%253E%253C/svg%253E' result='map'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='map' scale='28' xChannelSelector='R' yChannelSelector='G' result='disp'/%3E%3CfeImage href='data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522s%2522 cx=%252230%2525%2522 cy=%252225%2525%2522 r=%252260%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgba(255,255,255,0.5)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgba(255,255,255,0)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523s)%2522/%253E%253C/svg%253E' result='spec'/%3E%3CfeBlend in='disp' in2='spec' mode='screen'/%3E%3C/filter%3E%3C/svg%3E#glass-refract");
+    /* The shipped filter graph as ONE self-contained data-URI SVG (`scale='28'` baked,
+       DDR-LENS-BAKE). A single `url("data:…")` token is the only form that PARSES as a
+       `backdrop-filter` value AND survives a consumer bundler's url()-rewrite (a `data:`
+       URI is skipped; any other `url("…")` content is mis-resolved as a file). The
+       `#glass-refract` id is resolvable in-document (the data-URI is self-contained). */
+    .glass-lens {
+        /* The bevel-band width the squircle map encodes (the iOS edge concentration).
+           Documents the rim thickness the baked stops fix; a consumer reads it to tune
+           the perceived rim band on a successor re-bake. */
+        --glass-refract-bevel: 14%;
+
+        /* The shipped filter — ONE complete, valid `url("data:…")` token carrying the
+           whole 3-primitive graph with the `scale='28'` baked in (the §10 default depth,
+           DDR-LENS-BAKE). A single self-contained `data:` URI is (a) the ONLY form that
+           PARSES as a `backdrop-filter` value — the prior var()-spliced head/tail emitted
+           `url("…") <n> url("…")`, three tokens a `backdrop-filter` rejects, so the lens
+           silently rendered `none`; and (b) bundler-SAFE — a consumer's CSS url()-rewriter
+           skips a `data:` URI but mis-resolves any `url("…")` whose content starts with a
+           bare char (the old tail began `'…` → ENOENT, breaking every bundler consumer).
+           See the DDR-LENS-BAKE note in the header for the lost-tunability tradeoff. */
+        --glass-refract-filter: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27glass-refract%27 x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27%3E%3CfeImage href=%27data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253ClinearGradient id=%2522hx%2522 x1=%25220%2522 y1=%25220%2522 x2=%2522100%2525%2522 y2=%25220%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(255,0,0)%2522/%253E%253Cstop offset=%252214%2525%2522 stop-color=%2522rgb(128,0,0)%2522/%253E%253Cstop offset=%252286%2525%2522 stop-color=%2522rgb(128,0,0)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(0,0,0)%2522/%253E%253C/linearGradient%253E%253ClinearGradient id=%2522vy%2522 x1=%25220%2522 y1=%25220%2522 x2=%25220%2522 y2=%2522100%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(0,255,0)%2522/%253E%253Cstop offset=%252214%2525%2522 stop-color=%2522rgb(0,128,0)%2522/%253E%253Cstop offset=%252286%2525%2522 stop-color=%2522rgb(0,128,0)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(0,0,0)%2522/%253E%253C/linearGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522black%2522/%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523hx)%2522/%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523vy)%2522 style=%2522mix-blend-mode:screen%2522/%253E%253C/svg%253E%27 result=%27map%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27map%27 scale=%2728%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27disp%27/%3E%3CfeImage href=%27data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522s%2522 cx=%252230%2525%2522 cy=%252225%2525%2522 r=%252260%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgba(255,255,255,0.5)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgba(255,255,255,0)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523s)%2522/%253E%253C/svg%253E%27 result=%27spec%27/%3E%3CfeBlend in=%27disp%27 in2=%27spec%27 mode=%27screen%27/%3E%3C/filter%3E%3C/svg%3E%23glass-refract");
     }
 
-    /* The gated consuming selector — RE-HOMED onto `.glass-material.glass-refract`
-       (decoupled from the W22-folded `.glass-specular-track` compound). The
-       refraction composes the shipped `#glass-refract` filter OVER the host's
-       existing blur; it is additive (the blur already painted, this sharpens the
-       refraction edge where the engine supports it). */
+    /* The gated consuming selector. The squircle map + the baked `scale='28'` ride
+       INSIDE the `@supports (backdrop-filter: url(#…))` block;
+       the refraction composes the shipped `#glass-refract` filter OVER the host's existing
+       blur — additive (the blur already painted, this bends + concentrates the refraction
+       at the rim where the engine supports it). A non-supporting engine never reaches this
+       block and paints the un-gated `--glass-blur-*` + `--glass-tint-*` base ALONE. */
     @supports (backdrop-filter: url("#glass-refract")) {
-        .glass-material.glass-refract,
-        .glass-refract {
+        .glass-material.glass-lens,
+        .glass-lens {
             backdrop-filter: var(--glass-blur-resting) var(--glass-refract-filter);
         }
     }

package/src/styles/glass-specular-track.css

@@ -43,6 +43,13 @@
     .glass-specular-track::before {
         --specular-x: 50%;
         --specular-y: 50%;
+        /* BB.W-LENSING — pin the EDGE-glint angle static too (the conic seats at its
+           `0deg` top-edge rest). The `useSpecularPointer` leaf already skips the angle
+           write under PRM; this is the CSS belt-and-braces pin so the rim glint never
+           drifts under reduce. The lens-swell drive also snaps (Button.vue / .tap-squish
+           PRM carve), so the whole motion-reactive lens reaches rest with no in-between
+           frames — the gesture functions, the physics off. */
+        --specular-angle: 0deg;
         transition: none;
     }
 }

package/src/styles/glass.css

@@ -46,8 +46,11 @@
    squircle + a11y @supports overrides, which must stay last): */
 @import "./glass/material.css";
 @import "./glass/ladder.css";
+@import "./glass/rim.css";
 @import "./glass/surfaces.css";
 @import "./glass/surface-axis.css";
+@import "./glass/reveal.css";
+@import "./glass/deep.css";
 @import "./glass/progress-rail.css";
 @import "./glass/squircle.css";
 @import "./glass/a11y-fallback.css";

package/src/styles/hover-popover.css

@@ -35,10 +35,11 @@
     }
 }
 
-/* The data-state animation grammar canonicalises onto `.popover-animate`
-   (V.W3.T9 / A5 §5.8). Authors compose `class="hover-popover-panel popover-animate"`
-   on the panel root so the canonical fade + zoom-95 entry/exit grammar
-   replaces the bespoke `hover-popover-in/out` keyframes that lived here.
-   The `prefers-reduced-motion` carve is handled at the canonical site
-   (`utilities.css`'s reduced-motion block) so it cascades to all four
+/* The data-state animation grammar canonicalises onto `.glass-reveal`
+   (BB.W-LIQUID-REVEAL — off the retired `popover-animate` bezier zoom-95, clean
+   break). Authors compose `class="hover-popover-panel glass-reveal"` on the panel
+   root so the spring-clocked LIQUID-ENTER grammar (the coupled scale+fade+filter
+   blur-settle, glass/reveal.css) replaces the bespoke `hover-popover-in/out`
+   keyframes that lived here. The `prefers-reduced-motion` carve is handled at the
+   canonical site (`glass/reveal.css`'s reduced-motion block) so it cascades to all
    popover-animation consumers automatically. */

package/src/styles/icon-chip.css

@@ -9,15 +9,22 @@
  * lives ONCE and proof:suffuse asserts against one component, not N pastes.
  *
  * THE INTERPOLATION SPACE — `in srgb` (DELIBERATE, recorded). The backplate is
- * a foreground-over-transparent overlay at a hand-tuned fixed 25% α stop — the
- * SAME shape as the `--surface-tint-*` brand family, which CLAUDE.md fixes at
- * `in srgb` (the brand-calibrated mix; switching the space shifts the resting
- * α off its hand-set value). The chip is byte-faithful to the reference paste
- * register (the binding W7 π target: stop-0 bg `color(srgb 0.915 0.484 0.671 /
- * 0.25)`), so it preserves `in srgb` — the same brand-overlay path, NOT the
- * glass-tint `in oklab` perceptual-mix path. (The spec text says `in oklab`;
- * the resolution preserves the reference-faithful `in srgb` so the pop register
- * does not shift — recorded in PROGRESS / the DELTA.)
+ * a foreground-over-transparent overlay at a hand-tuned α stop — the SAME shape
+ * as the `--surface-tint-*` brand family, which CLAUDE.md fixes at `in srgb`
+ * (the brand-calibrated mix; switching the space shifts the resting α off its
+ * hand-set value). The chip is byte-faithful to the reference paste register
+ * (the binding W7 π target: stop-0 bg `color(srgb 0.915 0.484 0.671 / 0.25)`),
+ * so it preserves `in srgb` — the same brand-overlay path, NOT the glass-tint
+ * `in oklab` perceptual-mix path. (The spec text says `in oklab`; the resolution
+ * preserves the reference-faithful `in srgb` so the pop register does not shift
+ * — recorded in PROGRESS / the DELTA.)
+ *
+ * THE α STOP IS A TOKEN (BB.W-SUFFUSE3 c3). The hardcoded `25%` lifted onto
+ * `--icon-chip-plate-strength` (default `25%`, BYTE-IDENTICAL); the `:saturated`
+ * axis re-points it to ~40% for a louder focal pop — the STRENGTH varies, the
+ * `in srgb` space + the chip≤glyph ratio do NOT. The pop is ALIVE too: the
+ * reveal entrance + the hover-bloom GROW ride the per-spring CLOCK (the
+ * --spring-snappy/--spring-smooth registers), no longer the fixed bezier.
  */
 
 :root {
@@ -30,6 +37,16 @@
     /* The duotone fill α — a low-alpha fill of the same hue UNDER the
        full-chroma stroke (the iOS/Material filled-tonal move). Mono-hue. */
     --icon-chip-duotone-fill: 18%;
+    /* The backplate vibrancy stop (BB.W-SUFFUSE3 c3). The default reproduces
+       the reference 25% register BYTE-IDENTICALLY — the plate `color-mix`
+       reads this token instead of the hardcoded `25%`. The `:saturated` axis
+       re-points it to a louder focal stop (~40%); the STRENGTH changes, the
+       `in srgb` space + the chip≤glyph ratio do NOT (the recorded keep). Still
+       ONE color event per surface — a saturated chip is the same event,
+       louder, never a license for a second (proof:suffuse d3 counts the event
+       FAMILY, not the saturation). Token-first: a consumer retunes without a
+       component edit. */
+    --icon-chip-plate-strength: 25%;
     /* The hover-bloom backplate lift (25% → ~35%) + the glow-ring spread. */
     --icon-chip-bloom-mix: 35%;
     --icon-chip-bloom-glow: 28%;
@@ -49,18 +66,25 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-pill, 9999px);
-    /* The backplate — the reference recipe (`in srgb`, 25% α stop). */
+    /* The backplate — the reference recipe (`in srgb`, the --icon-chip-plate-
+       strength α stop, default 25% — BB.W-SUFFUSE3 c3 lifts the hardcoded `25%`
+       onto the token, BYTE-IDENTICAL at default). */
     background-color: color-mix(
         in srgb,
-        var(--icon-chip-plate-color, var(--muted)) 25%,
+        var(--icon-chip-plate-color, var(--muted))
+            var(--icon-chip-plate-strength),
         transparent
     );
     color: var(--icon-chip-event-color, var(--muted-foreground));
     /* The §6 easing doctrine — surface props (bg/box-shadow) on the bezier
-       standard ease; the bloom is the smooth-glass register, NOT a sparkle. */
+       standard ease. The transform leg at REST (the leave direction, reverting
+       to base) is the NO-OVERSHOOT bezier (a bloom must never overshoot past
+       gone — §6 exit law, BB.W-SUFFUSE3 c2); the hover ENTER direction lifts
+       onto --spring-smooth on the .icon-chip--bloom:hover rule below. */
     transition:
         background-color var(--duration-fast, 150ms) var(--ease-standard),
-        box-shadow var(--duration-fast, 150ms) var(--ease-standard);
+        box-shadow var(--duration-fast, 150ms) var(--ease-standard),
+        transform var(--duration-fast, 150ms) var(--ease-out);
 }
 
 .icon-chip__glyph {
@@ -76,6 +100,16 @@
     border-radius: 0;
 }
 
+/* ── The :saturated vibrancy axis (BB.W-SUFFUSE3 c3) ───────────────────────── */
+/* A louder, more-chromatic backplate for a genuine focal pop — the plate
+   `color-mix` re-points off the 25% reference stop to ~40%. STILL the ONE color
+   event (the same event, louder — proof:suffuse d3 counts the event FAMILY, not
+   the saturation). The interpolation STAYS `in srgb` (the recorded reference-
+   register keep) and the chip≤glyph ratio is untouched. */
+.icon-chip--saturated {
+    --icon-chip-plate-strength: 40%;
+}
+
 /* ── The duotone axis — a low-alpha fill of the same hue UNDER the stroke ──── */
 /* Lucide glyphs bake `fill: none` on the SVG root; CSS wins over the
    presentation attribute, so the `[data-duotone] svg` rule reaches the inner
@@ -108,6 +142,16 @@
                     var(--icon-chip-bloom-glow),
                 transparent
             );
+        /* The bloom GROW (BB.W-SUFFUSE3 c2) — the plate lifts a hair on the
+           §6 --spring-smooth transform register (enter smooth). The transition
+           is re-declared on :hover so the ENTER direction rides the spring; the
+           base rule's --ease-out transform leg governs the leave (no overshoot
+           past gone). The color legs stay on the bezier (base rule). */
+        transform: scale(var(--icon-chip-bloom-scale, 1.06));
+        transition:
+            background-color var(--duration-fast, 150ms) var(--ease-standard),
+            box-shadow var(--duration-fast, 150ms) var(--ease-standard),
+            transform var(--spring-smooth-duration) var(--spring-smooth);
     }
     /* The glyph stroke firms on the chip's own hover. */
     .icon-chip--bloom:hover .icon-chip__glyph {
@@ -120,9 +164,19 @@
    reacts ONLY on an opted-in chip (`.icon-chip--reveal`) so a non-reveal chip's
    inert `[data-reveal]` hook never animates. PRM-gated. */
 @media (prefers-reduced-motion: no-preference) {
+    /* BB.W-SUFFUSE3 c1 — the pop-ENTRANCE rides the per-spring CLOCK, NOT the
+       fixed --duration-medium bezier. The animation-timing-function is the
+       --spring-snappy linear() string (peaks ~1.068) and the duration is
+       --spring-snappy-duration (0.34s, the W-GLASS-CAL per-spring clock), so the
+       `scale(0.85)→1` keyframe carries the snappy spring's ~+7% overshoot then
+       settles (the springy pop, not a flat fade-up). The opacity 0→1 is COUPLED
+       on the SAME clock (the W-MOTION-CANON P3 coupled-fade — plate + glyph
+       bloom as ONE continuous layer). Compositor-only: transform/opacity only
+       (the proof:motion-compositor floor holds). The per-spring clock is the
+       W-GLASS-CAL/W-MOTION-CANON fence — CONSUMED here, never re-generated. */
     .icon-chip--reveal[data-reveal] {
-        animation: icon-chip-reveal var(--duration-medium, 320ms)
-            var(--ease-standard) both;
+        animation: icon-chip-reveal var(--spring-snappy-duration)
+            var(--spring-snappy) both;
         animation-delay: calc(var(--d, 0) * var(--icon-chip-reveal-step));
     }
 }
@@ -139,7 +193,15 @@
 }
 
 /* ── The deform axes collapse under reduced motion (the PRM guard) ─────────── */
+/* BB.W-SUFFUSE3 c1/c2 — the spring deform drops under reduce: the bloom GROW
+   scale collapses to 1 (the color cross-fade may stay — the legibility cue is
+   not motion), and the reveal pop SNAPS to its endpoint (scale 1, opacity 1,
+   zero in-between frames) via `animation: none` (the chip still APPEARS — only
+   the spring/overshoot is off; the W-MOTION-CANON P6 keep-fade/drop-transform). */
 @media (prefers-reduced-motion: reduce) {
+    .icon-chip--bloom:hover {
+        transform: none;
+    }
     .icon-chip--bloom:hover .icon-chip__glyph {
         stroke-width: inherit;
     }

package/src/styles/index.css

@@ -114,6 +114,12 @@
  *  10a. scroll-driven.css    — native scroll-driven recipes (.scroll-progress
  *                              + [data-scroll-reveal]); the `@supports`-gated
  *                              primary over the JS-composable fallback (AQ.W5).
+ *  10a'. scroll-choreography.css — the SOTA scroll-CHOREOGRAPHY register
+ *                              (.scroll-build page-build / .scroll-cascade
+ *                              section-cascade / .scroll-pin scroll-pinned + the
+ *                              native .smooth-scroll opt-in) on the native
+ *                              scroll()/view()/timeline-scope substrate; NO
+ *                              Lenis/GSAP dep (BB.W-SCROLL-MOTION).
  *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
  *                              recipe + `--vt-*` axes (AQ.W5; the
  *                              `useViewTransition` substrate's CSS half).
@@ -161,6 +167,7 @@
 @import "./transitions.css";
 @import "./animations.css";
 @import "./scroll-driven.css";
+@import "./scroll-choreography.css";
 @import "./view-transition.css";
 @import "./utilities.css";
 /* BA.W-MENU-GLASS — the glass menu-row + menu-section register. @import-ed AFTER
@@ -180,6 +187,11 @@
    (duotone/bloom/reveal). A component partial; the token arms (--section-color-N
    / --muted) auto-flip under .dark so the chip is mode-robust by construction. */
 @import "./icon-chip.css";
+/* BB.W-BORDER-PROGRESS — progress IS the element's border: the masked-conic ring
+   consumption (the @property reg lives in tokens/property-regs.css §18). A
+   component partial; the conic + the radius-following mask-composite + the coverage
+   masks + the PRM milestone-pulse bracket. */
+@import "./border-progress.css";
 
 /* Ensure Tailwind scans glass-ui's compiled component templates for the utility
    classes they emit (CVA variant classes like text-destructive-foreground,

package/src/styles/instrument-chassis.css

@@ -72,6 +72,28 @@
         --phase-color: var(--muted-foreground);
         --phase-color-label: var(--muted-foreground);
 
+        /* BB.W-PHASE-PALETTE (N18) — the `complete` phase ink is a CONSUMER
+           token, not a hardcoded brand metal. The four active phases
+           (ping/download/upload/jitter) already read a consumer-registerable
+           `--chart-{phase}` with a library `--viz-*` fallback (the bus carries
+           phase IDENTITY); `complete` was the one arm that pinned the gold
+           directly, so every completion gilded itself the moment the phase
+           flipped. `--phase-complete-color` (+ its WCAG-twin
+           `--phase-complete-color-label`) DEFAULT to the same gold the arm
+           hardcoded — an un-overriding consumer paints byte-identical gold (the
+           back-compat floor) — but a consumer (or any ancestor) overrides EITHER
+           on its host/preset to re-ink completion (its phase spectrum, an aurora
+           register, …), so gold is EARNED (the dock CTA + personal-best
+           garnish), never the chassis default leaking onto every completion.
+           The default lives at the chassis root (NOT :root/tokens.css) because
+           it is a chassis-phase register, scoped to the surface owning the bus —
+           the same home `--phase-color`'s idle default occupies above. It reads
+           `var(--color-gold)` / `var(--color-gold-dark)` (the existing mode-
+           resolved tokens, unedited), so it inherits the SAME .dark / light-dark
+           resolution the hardcoded form did. */
+        --phase-complete-color: var(--color-gold);
+        --phase-complete-color-label: var(--color-gold-dark, var(--color-gold));
+
         /* AV.W16 TW3 — inline-size container named `chassis` so the dial reflow
            below reads the chassis's OWN box, not the viewport (portable into a
            narrow host). */
@@ -153,7 +175,10 @@
        AND the structural twin-line grooves re-point from the warm-cream
        `--surface-tint-*` default onto the `--silver` quad (gold's cool mirror).
        The chassis reads as an INDUSTRIAL precision-instrument panel — the
-       cool-metal twin of the warm-gold "complete"-phase affirmation.
+       cool-metal twin of the warm-gold "complete"-phase affirmation the chassis
+       ships BY DEFAULT (the `--phase-complete-color` consumer token's gold
+       default; BB.W-PHASE-PALETTE — a consumer may re-ink completion, but the
+       silver register's narration is of the warm-gold completion default).
 
        The phase cascade (`[data-phase="…"]`) stays ORTHOGONAL — a `structure`
        chassis still retints its phase fills on `data-phase`; only the
@@ -220,8 +245,15 @@
         --phase-tint-amount: var(--phase-tint-peak);
     }
     .instrument-chassis[data-phase="complete"] {
-        --phase-color: var(--color-gold);
-        --phase-color-label: var(--color-gold-dark, var(--color-gold));
+        /* BB.W-PHASE-PALETTE — demoted onto the `--phase-complete-color`
+           consumer seam (the exact `var(--chart-{phase}, …)` idiom the four
+           active arms above run). The arm reads ONLY the consumer token; the
+           gold lives in the token's DEFAULT at the chassis root, not as a
+           hardcoded ink here (a clean break with a back-compat default, NOT a
+           back-compat alias — no `--color-gold` dual-read survives). The warmth
+           ramp stays: `--phase-tint-amount` is orthogonal to the ink choice. */
+        --phase-color: var(--phase-complete-color);
+        --phase-color-label: var(--phase-complete-color-label);
         --phase-tint-amount: var(--phase-tint-peak);
     }
 
@@ -383,4 +415,35 @@
             height: 1px;
         }
     }
+
+    /* BB.W-DESKTOP-RESERVE (B3) — the WIDE-AXIS (desktop) dial reserve, the
+       EXACT DISJOINT COMPLEMENT of the mobile `@container chassis (max-width:
+       44.9375rem)` reserve above: 44.9375rem ≈ 719px is the mobile ceiling, so
+       the desktop floor is 45rem ≈ 720px — the two container-query ranges share
+       no width, so a dial cell is reserved by exactly ONE branch at every box
+       width (no overlap, no gap, no competing `min-block-size`).
+
+       The mobile reflow reserves the dial box from frame 0; the wide box axis
+       had NO library reserve, so a `1fr` meter row collapsed to its pre-
+       hydration `<canvas>` intrinsic and grew on hydration, pushing the results
+       card + dock down (the desktop CLS the speedtest App.vue interim authored
+       a local `min-block-size: var(--chassis-max-block-size)` to cure — the
+       consumer interim this rung SUPERSEDES). The reserve is a STATIC
+       `min-block-size` — a frame-0 box reservation, NOT an animated height (no
+       per-frame layout, compositor-safe, `proof:no-layout-animation` holds: a
+       `min-block-size` reserve is never a `@keyframes`/`transition` target).
+
+       Token-first: `--instrument-dial-min-block-size-desktop` is the DESKTOP
+       DIAL a consumer overrides (default `var(--chassis-max-block-size)`, the
+       library's dock-adjusted dynamic-viewport guardrail, resolved at first
+       paint with no JS). The inline `var(--chassis-max-block-size)` fallback
+       carries the contract if the canonical token is unset. */
+    @container chassis (min-width: 45rem) {
+        .instrument-chassis .instrument-dial {
+            min-block-size: var(
+                --instrument-dial-min-block-size-desktop,
+                var(--chassis-max-block-size)
+            );
+        }
+    }
 }