@mkbabb/glass-ui 3.13.0 → 4.0.1

package/src/styles/feedback-tone.css

@@ -0,0 +1,104 @@
+/* feedback-tone.css — the ONE shared tinted-glass tone recipe (BA.W-FEEDBACK-TONE).
+
+   THE COLLAPSE: Toast, Notification, and Alert each carried an INDEPENDENT tone map
+   (the Toast variant map painted SOLID `bg-{success,warning,info,destructive}` opaque
+   token plates over a `glass-floating` base; the Notification type map painted
+   `bg-<tone>/90` near-opaque slabs; Alert alone was correct in SHAPE — glass-wash plate
+   + tone-on-rim — but HARDCODED its `border-<tone>/40` rim per variant). Three tone
+   maps, three calibration sites, and TWO of them painted a colored SLAB that occluded
+   the backdrop (the R8-12/R8-13 "not glassy at all" defect; the blur track survived but
+   was inert behind a 100%-opaque plate).
+
+   This file mints the tone register ONCE. Every feedback tone reads as COLORED GLASS:
+   a tinted-glass wash (the rung bg mixed a BOUNDED % toward the tone, the SAME
+   `color-mix(in oklab, <rung bg>, <tint> <strength>)` seam the W55 `--glass-tint-*`
+   legibility lift and the `--veil-bg` plate already run — ZERO new compositing path) +
+   a tone-keyed rim + a full-chroma glyph. The backdrop STILL shows through (α stays
+   translucent, the W2 π floor < ~0.92). The body ink stays `--foreground` /
+   `--card-foreground` for legibility (the Alert discipline — body never tone-tinted),
+   so the tone is ONE deliberate color event per surface (the AZ.W-SUFFUSE one-color-
+   event idiom), never a full-bleed fill.
+
+   THE ONE KNOB: `--feedback-tone-strength` tints all four tones at once (the bounded
+   mix %, the toast-glass §A band). The four tone hues map to the HOUSE tokens
+   `--success` / `--warning` / `--info` / `--destructive` (presets-in-consumers — NO new
+   colors). A consumer recalibrates the tone weight with ONE override.
+
+   THE RUNG: the register reads `--feedback-tone-rung` (default the floating-chrome rung
+   `--glass-bg-floating`, the Toast/Notification overlay register). Alert RE-POINTS it to
+   `--glass-bg-wash` on its own surface (a content panel rides wash, not floating — the
+   register difference is correct; only the tone SOURCE unifies, not the rung). The rung
+   reads `--glass-bg-*` DIRECTLY (the same tokens W-SURFACE-AXIS's glass arm routes), so
+   the tone tint rides ON the glass surface — a re-point, not a fork.
+
+   THE SUBSTITUTION TRAP (the recurring AX.W55 / dock-scale class): `--feedback-tone-rung`
+   resolves the `--glass-bg-floating` token, which BAKES `var(--glass-level)` at its
+   `:root` declaration (level=1). A descendant `--glass-level: 0` does NOT re-resolve the
+   baked rung — but that is the CORRECT register here: a feedback surface IS translucent
+   glass by design; the `opaque`/level-0 escape is W-SURFACE-AXIS's `[data-surface]`
+   concern, not a tone-register knob. The tone register composes the tint AT THE ELEMENT
+   off the resolved rung, so the `color-mix` re-resolves whenever `--tone`/`--feedback-
+   tone-strength`/the rung change (the W55 element-level tint discipline). */
+@layer components {
+    :root {
+        /* The bounded mix % — the tone wash strength. 18% reads as colored GLASS
+           (the backdrop shows through, the silhouette is unmistakably tinted) without
+           tipping toward a slab; the toast-glass §A band is ≈12–22%. ONE knob retunes
+           all four tones. */
+        --feedback-tone-strength: 18%;
+        /* The rung the tint mixes over — the floating-chrome register (Toast /
+           Notification). Alert re-points it to the wash rung on its own surface. */
+        --feedback-tone-rung: var(--glass-bg-floating);
+        /* The rim weight — a tone-keyed border, a thin tinted rim (not a loud edge). */
+        --feedback-tone-border-strength: 40%;
+    }
+
+    /* ── The parametric register ──────────────────────────────────────────────────
+       A surface declares `--tone` (one of the four house tokens) + composes
+       `.feedback-tone`; the tinted-glass wash + the tone-keyed rim resolve off the ONE
+       recipe. The glyph carries the FULL-chroma tone (`[&>svg]` via the consumer's own
+       class, or the `.feedback-tone-glyph` helper below). The `default` (un-toned)
+       surface simply omits `.feedback-tone` — the bare glass rung paints.
+
+       `--tone` has NO `:root` default ON PURPOSE: a `.feedback-tone` surface with no
+       `--tone` set would mix the rung toward `initial` (transparent) — a no-op wash, the
+       same as the bare rung; this is the safe degenerate, not a paint bug. Every real
+       consumer sets `--tone` via its `.feedback-tone-<name>` register. */
+    .feedback-tone {
+        background: color-mix(
+            in oklab,
+            var(--feedback-tone-rung),
+            var(--tone) var(--feedback-tone-strength)
+        );
+        border-color: color-mix(
+            in oklab,
+            transparent,
+            var(--tone) var(--feedback-tone-border-strength)
+        );
+    }
+
+    /* The four house tone registers — each binds `--tone` to its house token. A surface
+       maps its variant/type onto the matching class (Toast `variant` /
+       Notification `type` / Alert `variant`); the `error` notification type maps to the
+       destructive tone (the three-maps-into-one collapse — `error` IS destructive). */
+    .feedback-tone-success {
+        --tone: var(--success);
+    }
+    .feedback-tone-warning {
+        --tone: var(--warning);
+    }
+    .feedback-tone-info {
+        --tone: var(--info);
+    }
+    .feedback-tone-destructive {
+        --tone: var(--destructive);
+    }
+
+    /* The glyph helper — the leading status glyph carries the FULL-chroma tone (the one
+       color event's saturated note over the tinted wash). A consumer composes it on its
+       icon, or reads `var(--tone)` directly in an arbitrary `[&>svg]:text-(--tone)`
+       utility. */
+    .feedback-tone-glyph {
+        color: var(--tone);
+    }
+}

package/src/styles/glass/deep.css

@@ -0,0 +1,44 @@
+/* glass/deep.css — BB.W-DEEP-GLASS — the OPT-IN `.glass-deep` decoration.
+ *
+ * The deep-glass register: the maximal iOS-27 Liquid-Glass tier ABOVE the
+ * W-GLASS-CAL calm default (the Apple `saturate(1.8) blur(20px)` family, landed
+ * at the budget-clearing 16px / saturate 1.5; tokens/glass-deep.css). `.glass-deep`
+ * is the OPT-IN surface — a consumer adds it to a glass surface that wants the
+ * thick refractive liquid read (the hero glass, the dock, the CTA); the bare
+ * content default is UNCHANGED (the calm default is the user's call).
+ *
+ * ── The token-substitution model (the `.glass-opaque` precedent) ───────────
+ * `.glass-deep` is a DECORATION ON a base `.glass-*` rung, NOT a parallel solid/
+ * blur recipe. It mirrors `.glass-opaque` (ladder.css §opaque-escape — which only
+ * sets `--glass-level: 0`, a token re-point, never a competing `backdrop-filter`):
+ * `.glass-deep` re-points the floating-rung blur token to the deep family
+ * (`--glass-blur-floating: var(--glass-blur-deep)`), so the base `.glass-floating`
+ * rule's `backdrop-filter: var(--glass-blur-floating)` resolves to the DEEP blur —
+ * NO cascade fight, NO base-rule edit, the glass edge/rim/under-shadow + the W55
+ * tint axis + the a11y brackets all compose unchanged. The deep tier rides a base
+ * rung exactly as `.glass-opaque` does (the CardTier map is `deep →
+ * 'glass-floating glass-deep'`).
+ *
+ * Because the deep blur (glass-deep.css) COMPOSES `var(--glass-level)`, the a11y
+ * brackets (`prefers-reduced-transparency: reduce` / `prefers-contrast: more` set
+ * `--glass-level: 0` / 0.3 at :root, a11y-fallback.css) reach the deep plate for
+ * FREE — the deep blur collapses to blur(0) under reduced-transparency through the
+ * SAME level path (the opaque escape). The W55 bright-bucket darken reaches the
+ * deep surface by construction too: `.glass-deep` is composed WITH `.glass-floating`,
+ * which is already in the W55 `@container style(--glass-backdrop: light)` material
+ * group (ladder.css) AND self-engages the overlay-band darken — the deep tier
+ * inherits the legibility tint with no selector-list edit.
+ *
+ * @import-ed in glass.css AFTER ladder.css/surfaces.css (the same @layer components,
+ * source-order-after so the token re-point lands beside the rung it rides) and
+ * BEFORE the a11y @media brackets (which still win by the :root level re-point).
+ */
+@layer components {
+    /* The deep decoration: re-point the floating rung's blur token to the deep
+       family. The base `.glass-floating` rule (`backdrop-filter:
+       var(--glass-blur-floating)`) then paints the deep `blur(16px) saturate(1.5)`
+       at `--glass-depth: 1` — the Apple-deep register, opt-in. */
+    .glass-deep {
+        --glass-blur-floating: var(--glass-blur-deep);
+    }
+}

package/src/styles/glass/ladder.css

@@ -31,13 +31,21 @@
        strength))`). With the default `--glass-tint-strength: 0%` the mix is a
        no-op = byte-identical to the un-tinted rung; a consumer biases the surface
        toward a sampled backdrop hue by setting `--glass-tint-source` + a
-       strength ≤30%. oklab is the mwg-preferred tint space (NEVER an
-       `oklch(from …)` lightness-shift — browsers don't gamut-map yet). */
+       strength ≤30%. oklab is the mwg-preferred tint space for the TINT mix here
+       (NEVER an `oklch(from …)` lightness-shift in the GLASS-TINT mix). The
+       `oklch(from var(--foreground) …)` relative-color recipe DID land its first
+       live consumer at BB.W-DARK-INK-WARM — the dark `--surface-tint-*` arm
+       (`tokens/dark-arm.css`), where the tolerant α-mix absorbs the small high-L
+       chroma (the gamut-map caveat documented + pinned under the gamut edge there).
+       That is the INK derivation, separate from THIS glass-tint mix space. */
     .glass-wash {
         position: relative;
         background: color-mix(in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-wash);
-        border: 1px solid var(--glass-border-wash);
+        /* BB.W-GLASS-ACCENT — the rung border ink feeds the accent-composed
+           `--glass-border-accent` (rim group above); byte-identical at 0%. */
+        --glass-border-rung: var(--glass-border-wash);
+        border: 1px solid var(--glass-border-accent);
         box-shadow: var(--glass-material-rim), var(--glass-shadow-wash);
     }
 
@@ -57,7 +65,8 @@
         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(--glass-border-quiet);
+        --glass-border-rung: var(--glass-border-quiet);
+        border: 1px solid var(--glass-border-accent);
         box-shadow:
             var(--glass-material-rim),
             var(--glass-under-shadow-quiet),
@@ -68,7 +77,8 @@
         position: relative;
         background: color-mix(in oklab, var(--glass-bg-resting), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-resting);
-        border: 1px solid var(--glass-border-resting);
+        --glass-border-rung: var(--glass-border-resting);
+        border: 1px solid var(--glass-border-accent);
         box-shadow:
             var(--glass-material-rim),
             var(--glass-under-shadow-default),
@@ -94,7 +104,8 @@
         position: relative;
         background: color-mix(in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-floating);
-        border: 1px solid var(--glass-border-floating);
+        --glass-border-rung: var(--glass-border-floating);
+        border: 1px solid var(--glass-border-accent);
         box-shadow:
             var(--glass-material-rim),
             var(--glass-under-shadow-vivid),
@@ -108,7 +119,8 @@
         position: relative;
         background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-overlay);
-        border: 1px solid var(--glass-border-overlay);
+        --glass-border-rung: var(--glass-border-overlay);
+        border: 1px solid var(--glass-border-accent);
         box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay);
     }
 
@@ -141,6 +153,13 @@
         .glass-card {
             --glass-tint-source: var(--glass-tint-ink);
             --glass-tint-strength: var(--glass-tint-strength-aa);
+            /* BA.W-DARK-MATERIAL scope 7 — the --muted-foreground lift moves HERE, into the
+               declared/sampled BRIGHT condition. The muted L40 tier cannot clear 4.5:1 on a
+               translucent FULL-AA-darkened plate (darkening moves the plate toward muted's
+               own luminance), so it lifts to the full ink ONLY where the plate actually
+               darkens — NOT on the calm-light unconditional floor (where it stays the muted
+               register, the slides caption read). */
+            --muted-foreground: var(--foreground);
         }
     }
 
@@ -182,19 +201,62 @@
        TOWARD muted's own luminance), so the low-contrast muted register resolves to
        the legible dark ink (clears ~10:1) — a token re-point on the same inheriting
        axis as the tint. */
-    :where(
-            .glass-floating,
-            .glass-overlay,
-            .glass-card,
-            .glass-resting,
-            .glass-quiet,
-            .glass-wash
-        ) {
+    /* The OVERLAY band (.glass-floating/.glass-overlay — Dialog/Sheet/Popover/DropdownMenu/
+       HoverCard/Command/Tooltip/Toast/Select-content) keeps the FULL unconditional AA darken
+       + the muted lift: it floats over WHATEVER the consumer painted (frequently a light/
+       near-white app surface — the canonical G2 case), so darkening toward the warm-ink is
+       the correct DEFAULT over an UNKNOWN surface. Over a DARK page this becomes the
+       luminous-dark LIFT (the dark-arm re-tunes --glass-tint-strength-aa to 12% — the plate
+       lifts off the deep page). A dark-substrate consumer who wants the pristine plate sets
+       `--glass-tint-strength: 0%`. */
+    :where(.glass-floating, .glass-overlay) {
         --glass-tint-source: var(--glass-tint-ink);
-        --glass-tint-strength: var(--glass-tint-strength-aa);
+        /* BC.W-AUDIT — the scope-7 completion: the overlay band JOINS the content-tier
+           sub-perceptual FLOOR by default (translucent warm glass), and the FULL AA
+           darken engages ONLY under the bright bucket (the @container --glass-backdrop:
+           light above). The prior unconditional AA (20% ink-ward) collapsed every
+           floating surface to grey over the common calm-light backdrop. The full glass
+           rebuild + the per-band muted/contrast reconciliation is BC. */
+        --glass-tint-strength: var(--glass-tint-strength-floor);
         --muted-foreground: var(--foreground);
     }
 
+    /* BA.W-DARK-MATERIAL scope 7 — the plain CONTENT tiers self-engage the SUB-PERCEPTUAL
+       FLOOR unconditionally, NOT the full AA darken (the R9-1 slides gray-slab fix). Over a
+       calm LIGHT page the floor (--glass-tint-strength-floor: 4%) is a silhouette whisper —
+       the translucent cream card stays warm (L ≈ 0.94), no gray slab. Over a DARK page the
+       floor re-resolves to the luminous-dark lift (12% in the dark arm — the plate lifts off
+       the deep page, the desired register). The FULL AA darken engages on these tiers ONLY
+       under the declared/sampled BRIGHT signal (the @container --glass-backdrop:light bucket
+       above — where the muted lift also lives now). NO unconditional --muted-foreground lift
+       here: on the calm-light floor the caption keeps the muted register (the slides read).
+       A consumer opts a light-page card out via `--glass-tint-strength: 0%` on an ancestor.
+
+       BB.W-ON-GLASS-FG (N13) — the THIRD-STATE on-glass FOREGROUND re-point lands HERE,
+       BESIDE the BA seam (the SAME cascade context, the SAME content-tier set, NOT a new
+       competing layer). The calm-light floor keeps the page-muted --neutral-5 at HEAD —
+       but the muted ink is calibrated against the CANVAS, and on a TRANSLUCENT content
+       plate (the glass-first common case) it composites toward the lifted backdrop and
+       its contrast COLLAPSES (1.15-3.29:1 measured in dark). The re-point targets the
+       muted register at the COMPOSITED glass fill: --muted-foreground → --on-glass-muted
+       (+ the -strong twin), a register BETWEEN the page-muted and the bright-bucket full
+       ink (legible-AND-subordinate; the caption stays quieter than body --foreground).
+       This is NOT a fork of --glass-tint-* — it READS the seam context and expresses the
+       third state; it NEVER re-declares --glass-tint-ink/-strength-* (W-DARK-MATERIAL's
+       frozen bound). The BA bright-bucket lift (@container --glass-backdrop:light above,
+       --muted-foreground → --foreground) STILL WINS where the plate darkens — the
+       @container conditional overrides this unconditional :where() when it engages, so a
+       darkened plate goes full ink; this calm re-point is the calm-plate case ONLY. The
+       overlay band (:where(.glass-floating, .glass-overlay) above) is a DISJOINT selector
+       set (it keeps the full-ink lift), so neither path collides. The values auto-flip per
+       mode (the on-glass rungs carry their own light/dark per-mode arms in tokens). */
+    :where(.glass-card, .glass-resting, .glass-quiet, .glass-wash) {
+        --glass-tint-source: var(--glass-tint-ink);
+        --glass-tint-strength: var(--glass-tint-strength-floor);
+        --muted-foreground: var(--on-glass-muted);
+        --muted-foreground-strong: var(--on-glass-muted-strong);
+    }
+
     /* AX.W55 — the `contrast-color()` foreground-ink flip (Chrome 147+/Safari 26+).
        A PROGRESSIVE-ENHANCEMENT layer, NEVER the load-bearing floor (Open-Q #5
        ratified): the declarative bucket above already carries AA on ALL engines (it
@@ -207,6 +269,20 @@
        white, illegible on the still-light translucent plate). The bucket is the floor;
        this is the native refinement. Scoped to the bright bucket. */
     @supports (color: contrast-color(white)) {
+        /* The bright-bucket ink flip — the content tiers + overlay band over a DECLARED/
+           sampled bright backdrop. BA.W-DARK-MATERIAL scope 6 — the SYSTEMIC contrast-color()
+           selection-inversion fix (approach A, lockstep-lift). At HEAD this block lifted only
+           --muted-foreground (and the surface `color`) to contrast-color(--card) (white over
+           a light plate, L100), but the ACTIVE control register (a SegmentedTabs active tab,
+           the curve-picker selected label) reads var(--foreground) DIRECTLY (L90, un-lifted) —
+           a control sets its OWN `color: var(--foreground)` which wins over the inherited
+           surface `color`, so the inactive (muted→white) read BRIGHTER than the active
+           (--foreground), inverting selection. The fix lifts --foreground ITSELF in lockstep
+           with --muted-foreground: now an active register reading --foreground resolves the
+           SAME anchored contrast-color ink as the lifted inactive, so selected ≥ unselected
+           everywhere (the inversion gone for ANY --muted-foreground/--foreground selection
+           pairing inside a glass card — the SYSTEMIC library-seam fix, not a curve-picker
+           one-off). Progressive enhancement only — the declarative darken is the AA floor. */
         @container style(--glass-backdrop: light) {
             .glass-material,
             .glass-wash,
@@ -216,25 +292,26 @@
             .glass-overlay,
             .glass-card {
                 color: contrast-color(var(--card));
+                --foreground: contrast-color(var(--card));
+                --muted-foreground: contrast-color(var(--card));
             }
         }
-        /* AY.W-A11Y-PERF O-1 / AZ.W-ADAPTIVE-AUTO Arm 1 — the same contrast-color
-           refinement for the SELF-ENGAGED band + content tiers (the @container block
-           above queries an ancestor; these surfaces engage their own tint
-           unconditionally, so their ink-flip companion mirrors that). The muted
-           register flips to the same anchored dark ink. Progressive enhancement only
-           — the declarative darken above is the AA floor on all engines. */
-        :where(
-                .glass-floating,
-                .glass-overlay,
-                .glass-card,
-                .glass-resting,
-                .glass-quiet,
-                .glass-wash
-            ) {
+        /* The OVERLAY band self-engages the darken UNCONDITIONALLY (it floats over an
+           UNKNOWN consumer surface), so its ink-flip companion mirrors that — UNCONDITIONAL.
+           --foreground lifts in lockstep with --muted-foreground (the scope-6 lockstep). */
+        :where(.glass-floating, .glass-overlay) {
             color: contrast-color(var(--card));
+            --foreground: contrast-color(var(--card));
             --muted-foreground: contrast-color(var(--card));
         }
+        /* BA.W-DARK-MATERIAL scope 7 — the content-tier ink flip is GATED on the bright
+           signal (it moved INTO the @container bucket above), NOT unconditional. Over a calm
+           LIGHT page the content tiers only carry the 4% silhouette floor (still a warm cream
+           plate), so flipping the ink to the contrast-color DARK ink there is correct only
+           where the plate ACTUALLY darkens to the bright-bucket AA — the unconditional flip
+           would force a white-on-cream / dark-on-darkened mismatch on the calm card. The
+           content tiers therefore take NO unconditional contrast-color flip; their flip lives
+           in the @container bucket with the rest of the bright-condition darken. */
     }
 
     /* ── The opaque escape (AX.W54) ───────────────────
@@ -248,6 +325,14 @@
        a consumer that wants a flat surface). */
     .glass-opaque {
         --glass-level: 0;
+        /* BA.W-DARK-MATERIAL scope 7 — the opaque escape suppresses the adaptive TINT axis
+           too (not just the opacity/blur level). A solid opaque plate has no translucent
+           backdrop to darken-over, so the self-engage tint is meaningless on it; zeroing the
+           strength keeps the opaque escape bucket-INVARIANT (the unset floor and the bright
+           bucket resolve the SAME solid plate — the byte-identity canary). Without this, the
+           scope-7 unconditional content-tier floor (4%) tinted even the solid plate, breaking
+           the opt-out's "flat surface" contract. */
+        --glass-tint-strength: 0%;
     }
 
     /* ── Content-aware under-shadow modifier (AV.W15 M4) ──────────────
@@ -286,7 +371,16 @@
             var(--glass-shadow-floating);
     }
 
-    /* Grain noise overlay — reuses paper texture SVG, no extra assets */
+    /* Grain noise overlay — reuses paper texture SVG, no extra assets.
+       BB.W-LIQUIDHOVER — the disco-grain pop (T8-F6) killed at the COMPOSITION CLASS:
+       the `background-image` is ALWAYS PRESENT (decoded once at rest, NEVER toggled to
+       `none`), and any STATE-driven grain engagement cross-fades the `opacity` ONLY on
+       the thin `--glass-grain-engage-duration` (~120ms linear) clock. A `background-
+       image: none → var(--paper-clean-texture)` engage decodes-and-appears in one frame
+       (the pop); the opacity cross-fade is a compositor-cheap interpolation with the
+       image constant — the only sanctioned grain engage. The `transition` lives HERE so
+       a hover/active grain lift (wherever a glass surface raises grain on interaction)
+       reads as a smooth fade by construction, not a discrete swap. */
     .glass-wash::after,
     .glass-quiet::after,
     .glass-resting::after,
@@ -296,36 +390,44 @@
         position: absolute;
         inset: 0;
         border-radius: inherit;
-        background: var(--paper-clean-texture);
+        /* The grain texture is the `background-image` longhand (NOT the `background`
+           shorthand) so the image stays a STABLE always-present layer the engage
+           never re-declares — the structural anti-pop: opacity is the only animated
+           channel, the image is never `none → image`. */
+        background-image: var(--paper-clean-texture);
         background-repeat: repeat;
         background-size: var(--paper-texture-size);
         opacity: var(--glass-grain-opacity);
+        /* The opacity cross-fade engage — plain ~120ms linear direct-write (no spring,
+           no overshoot — instant-but-smooth per the ask). Under the PRM / reduced-
+           transparency brackets the clock collapses to 0ms (the a11y bracket below). */
+        transition: opacity var(--glass-grain-engage-duration, 120ms) linear;
         pointer-events: none;
         mix-blend-mode: overlay;
     }
 
-    /* (b) The unified rim — `--glass-edge-light` full-perimeter inset ring on
-       EVERY material surface (AW.W22). Previously the rim was wired only into
-       the floating/overlay tiers' box-shadow stack; promoting it to the material
-       group makes wash/quiet/resting/card/dock-control all carry the same
-       silhouette catch-light from ONE token. The rim is its OWN `box-shadow`
-       declaration on the material group so it composes uniformly without
-       perturbing each tier's elevation recipe (the floating/overlay tiers drop
-       their now-redundant inline `--glass-edge-light` layer below). The alpha is
-       deliberately low so the rim never eats AA legibility over a busy
-       backdrop. */
-    .glass-material,
-    .glass-wash,
-    .glass-quiet,
-    .glass-resting,
-    .glass-floating,
-    .glass-overlay,
-    .glass-card,
-    .glass-specular-track,
-    .dock-icon-button {
-        --glass-material-rim: var(--glass-edge-light);
+    /* BB.W-LIQUIDHOVER — the grain engage collapses to INSTANT under reduced motion (a
+       grain that cross-fades on hover under reduce is still motion; accessibility is
+       absolute). The reduced-transparency / forced-colors brackets already zero
+       `--glass-grain-opacity` (a11y-fallback.css), so the grain is inert there; this
+       bracket covers the reduced-MOTION case where the grain still paints but must not
+       animate. */
+    @media (prefers-reduced-motion: reduce) {
+        .glass-wash::after,
+        .glass-quiet::after,
+        .glass-resting::after,
+        .glass-floating::after,
+        .glass-overlay::after {
+            transition: none;
+        }
     }
 
+    /* The unified rim (AW.W22) + the BB.W-GLASS-ACCENT per-INSTANCE chromatic-RIM
+       tint group (the rim-ink + --glass-material-rim ring + the per-rung
+       --glass-border-accent border, light + dark arms) lives in glass/rim.css
+       (carved at BB.W-CARVE4 — the next adjacent @layer components block, the SOLE
+       writer of --glass-material-rim/--glass-border-accent). */
+
     .dark .glass-wash::after,
     .dark .glass-quiet::after,
     .dark .glass-resting::after,

package/src/styles/glass/material.css

@@ -105,23 +105,72 @@
            registered-`@property` var() nested in an hsl() alpha computes to 0 in
            Chromium — the cross-engine-safe path); the per-stop alphas are literals so
            even the lifted hover/active states read as a lens, not a flash. */
-        background: radial-gradient(
-            circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
-            hsl(40 35% 92% / 0.5) 0%,
-            hsl(40 35% 92% / 0) 70%,
-            transparent 100%
+        /* BB.W-LENSING (scope 3) — the motion-reactive EDGE glint UNIFIED with the
+           centered catch-light disc on ONE `::before`. TWO background layers compose:
+           (TOP) the angle-keyed EDGE-anchored conic sweep — a warm-cream arc that
+           brightens the RIM where the pointer's `--specular-angle` grazes (the
+           glass-THICKNESS read iOS-27 fuses with the catch-light); (BOTTOM) the
+           existing pointer-position centered disc. BOTH ride the SAME `--specular-
+           intensity` cohort (the `opacity` below) + `plus-lighter` blend + warm-cream
+           core `hsl(40 35% 92%)` — NEVER a second color/blend fork. The conic is masked
+           to the rim band only (the `--glass-edge-glint-band` radial mask, scope 3),
+           so the glint is a bounded RIM ring, NOT a whole-plate wash (the AX.W52 D19
+           bounded-gleam discipline). The `--specular-angle` floor `0deg` sits the glint
+           at the top edge when unwired (static rest — no ambient drift, no blowout). */
+        /* BB.W-GLASS-ACCENT — the catch-light CORE COLOR composes the per-instance
+           chromatic accent. The warm-cream `hsl(40 35% 92%)` core resolves through
+           the ONE `--glass-specular-core` var, OKLab-mixed toward `var(--glass-
+           accent)` at `var(--glass-accent-strength)`. This tints the CORE only — it
+           is the COLOR axis; W-LENSING owns the GEOMETRY (the conic angle-keyed
+           edge-glint + the radial disc + the masks + the `plus-lighter` blend, all
+           BELOW, untouched). Tinting the ONE core tints BOTH the centered disc AND
+           the rim glint (they share the core), so the data hue reads at the glint
+           where the pointer grazes — the data-keyed colored catch-light. At
+           `--glass-accent-strength: 0%` + `--glass-accent: transparent` (the
+           `@property` defaults) the mix === `hsl(40 35% 92%)` byte-identical (the W2
+           warm-cream floor). Each gradient stop reproduces its original alpha via
+           `color-mix(in srgb, <core> N%, transparent)` (=== the prior `<core> / 0.NN`),
+           so the geometry + falloff is byte-identical at rest. */
+        --glass-specular-core: color-mix(
+            in oklab,
+            hsl(40 35% 92%),
+            var(--glass-accent) var(--glass-accent-strength)
         );
+        background:
+            conic-gradient(
+                from var(--specular-angle, 0deg) at 50% 50%,
+                transparent 0deg,
+                color-mix(in srgb, var(--glass-specular-core) 55%, transparent) 18deg,
+                transparent 60deg,
+                transparent 360deg
+            ),
+            radial-gradient(
+                circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
+                color-mix(in srgb, var(--glass-specular-core) 50%, transparent) 0%,
+                transparent 70%,
+                transparent 100%
+            );
         opacity: var(--specular-intensity, 0);
-        /* Clip the gleam to ITS OWN radius (not the whole plate) so it stays a
-           bounded glint. `mask-image` Baseline 2023-12-07; a non-supporting engine
-           ignores it and the `inset: 0` + radius-inherit + the in-paint falloff
-           already bound the gleam to the surface. */
-        mask-image: radial-gradient(
-            circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
-            black 0%,
-            black 60%,
-            transparent 100%
-        );
+        /* Per-layer masks (the `,`-separated list pairs with the two backgrounds in
+           order): the EDGE conic is masked to the RIM BAND ONLY — transparent across
+           the interior, opaque in the outer `--glass-edge-glint-band` (default 22%) — so
+           the angle-keyed glint reads as a THICKNESS rim, not a center wash; the centered
+           disc keeps its own-radius clip (AX.W52 D19). `mask-image` Baseline 2023-12-07;
+           a non-supporting engine ignores it and the `inset: 0` + in-paint falloff still
+           bound the gleam. */
+        mask-image:
+            radial-gradient(
+                circle closest-side at 50% 50%,
+                transparent calc(100% - var(--glass-edge-glint-band, 22%)),
+                black calc(100% - calc(var(--glass-edge-glint-band, 22%) * 0.5)),
+                black 100%
+            ),
+            radial-gradient(
+                circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
+                black 0%,
+                black 60%,
+                transparent 100%
+            );
         /* AX.W52 D19 — `plus-lighter` (additive but HDR-clamped, Safari 16.4+) over
            the prior `screen` (a non-linear lightener that lifted the whole tile
            toward white — the muddy-card defect). A non-supporting engine degrades to
@@ -235,4 +284,18 @@
         --specular-intensity: var(--glass-specular-intensity-active, 0.16);
     }
 
+    /* BB.W-LENSING (scope 2) — the `:active` LENS-SWELL is RETIRED (DDR-LENS-BAKE,
+       glass-refract.css header). The swell drove the displacement `scale` by mutating
+       the `--glass-refract` axis on the `--glass-btn-press-t` press drive (28 rest → 44
+       pressed). That depended on the var()-spliced head/`scale`/tail filter — which never
+       PARSED as a `backdrop-filter` (three tokens: `url("…") <n> url("…")`), so the lens
+       rendered `none` and the swell animated a value that reached NO filter. A CSS url()
+       string token cannot carry a substituted `var()` (the engine does not re-tokenise
+       inside a string), so a dynamic per-instance `scale` is structurally impossible in a
+       single self-contained data-URI — and the single token is mandatory for both parse
+       validity and bundler url()-rewrite safety. The `scale` is now BAKED at the §10
+       default (28); the resting lens read is PRESERVED (and now actually renders), the
+       press-depth animation is the deliberate tradeoff. The press squish + gleam lift on
+       the SAME `--glass-btn-press-t` drive (material gleam, above) carry the press read. */
+
 }