@mkbabb/glass-ui 4.0.0 → 4.0.1

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);
     }
 
@@ -199,7 +211,13 @@
        `--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);
     }
 
@@ -212,10 +230,31 @@
        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. */
+       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+).
@@ -332,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,
@@ -342,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. */
+
 }

package/src/styles/glass/reveal.css

@@ -0,0 +1,136 @@
+/* glass/reveal.css
+   BB.W-LIQUID-REVEAL — the `.glass-reveal` LIQUID-ENTER recipe: the spring-clocked,
+   coupled-channel top-layer open that REPLACES `popover-animate`'s fixed-bezier
+   zoom-95 (clean break, no alias). The zero-JS floor the reka portaled overlays
+   compose (they are not native top-layer, so they cannot ride `@starting-style`;
+   `.glass-reveal` is the data-state form). The `useLiquidReveal` JS leaf is the
+   source-rect REFINEMENT (the dialog-from-button / dock-from-pill bloom); this CSS
+   recipe is the everywhere floor.
+   @import-ed by glass.css in cascade order, in its own @layer components
+   (isomorphic to the monolith). See docs/precepts/design-idioms.md §cohesion-aware
+   partials. */
+
+/* ── THE LIQUID ENTER (the iOS-27 bloom-from-anchor) ──────────────────────────
+ *
+ * Three COUPLED channels, the SPATIAL/EFFECTS split (the Material-3 / §6 /
+ * W-MOTION-CANON doctrine):
+ *
+ *   (a) SCALE (the bloom — SPATIAL) rides `--spring-snappy` + its OWN settle clock
+ *       `--spring-snappy-duration` (the W-GLASS-CAL Unit 3 per-spring clock, NOT the
+ *       generic `--duration-normal` that re-timed every spring to one wall clock).
+ *       The overshoot interior of the spring `linear()` gives the canonical iOS
+ *       arrival. `transform-origin` anchors at the popper edge (`--reka-popper-
+ *       transform-origin`) so the surface blooms FROM its anchor, not center.
+ *   (b) OPACITY (the fade — EFFECTS) rides `--ease-out` (NO overshoot — a fade must
+ *       not bounce), coupled so scale+fade read as ONE continuous coalescing layer.
+ *   (c) BLUR-SETTLE (the iOS "light-bending modulation" decongest — EFFECTS)
+ *       `filter: blur(--glass-reveal-blur)` → `blur(0)`, on the SAME spring clock as
+ *       the scale so the surface clarifies AS it blooms. The decongest rides the
+ *       surface's OWN pixels (`filter`) NOT the backdrop (`backdrop-filter`), so it
+ *       does NOT clobber the resting `glass-floating` tier plate blur the overlay
+ *       carries at rest (a `backdrop-filter: blur(0)` open value would erase the
+ *       glass). A `filter` radius interp is COMPOSITOR-safe (never a layout property
+ *       — the proof:no-layout-animation floor).
+ *
+ * Uses the `scale:` / `translate:` LONGHANDS (not `transform:`), so it composes with
+ * any identity-base transform and mints no stacking context (the `.glass-top-layer`
+ * `scale:` discipline). NEVER animates a layout property (the zoom is `scale`, the
+ * side-slide is `translate` — the directional slide-in `popover-animate` +
+ * `slide-in-from-side` used to carry, now folded onto the compositor `translate` leg).
+ */
+
+@layer components {
+    .glass-reveal {
+        /* The one public start knob (the decongest radius). The spatial/effects
+           clocks read the shared spring tokens (read-only — the W-GLASS-CAL fence). */
+        --glass-reveal-blur: 4px;
+        --glass-reveal-slide: 0.5rem;
+        transform-origin: var(--reka-popper-transform-origin, center);
+        /* The coupled transition list — the SPATIAL legs (scale/translate) on the
+           snappy spring's OWN settle clock, the EFFECTS legs (opacity/filter blur-
+           settle) on the no-overshoot ease-out. ONE coherent glide. The blur rides
+           `filter` (the surface's own pixels) NOT `backdrop-filter` (which would
+           clobber the resting glass-floating plate blur). */
+        transition-property: scale, translate, opacity, filter, display, overlay;
+        transition-duration: var(--spring-snappy-duration), var(--spring-snappy-duration),
+            var(--spring-snappy-duration), var(--spring-snappy-duration),
+            var(--spring-snappy-duration), var(--spring-snappy-duration);
+        transition-timing-function: var(--spring-snappy), var(--spring-snappy),
+            var(--ease-out), var(--ease-out), linear, linear;
+        transition-behavior: allow-discrete;
+    }
+
+    /* OPEN — the settled, bloomed-in state (the spring-clocked scale/fade/blur-settle
+       interpolates FROM the closed values). `filter: blur(0)` clarifies the surface;
+       the resting `glass-floating` backdrop-filter is untouched. The `translate` leg
+       is set ONLY by the `data-side` variants below (a side-anchored popover slides
+       from its edge) — the BASE never writes `translate`, so a center-anchored Dialog
+       keeping its `-translate-x-1/2 -translate-y-1/2` centering is NEVER clobbered. */
+    .glass-reveal[data-state="open"] {
+        scale: 1;
+        opacity: 1;
+        filter: blur(0);
+    }
+
+    /* CLOSED — both the resting CLOSED snapshot AND the EXIT leg. The exit reads
+       `--ease-out` (a bezier, NO overshoot — a closing surface must never overshoot
+       past gone, the §6/W-MOTION-CANON P2 doctrine); NO `--spring-*` token on the
+       exit. The exit is faster + un-sprung — the surface recedes cleanly. */
+    .glass-reveal[data-state="closed"] {
+        scale: var(--glass-reveal-enter-scale, 0.95);
+        opacity: 0;
+        filter: blur(var(--glass-reveal-blur));
+        transition-timing-function: var(--ease-out);
+        transition-duration: var(--duration-fast);
+    }
+
+    /* The directional slide-in — the compositor `translate` leg keyed off the
+       popper's `data-side` (folds the retired `slide-in-from-side` `@utility`'s
+       directional entry onto the compositor channel; the panel enters from outside
+       the anchor's edge). On the SAME snappy spring + clock as the scale. ONLY a
+       side-anchored popover (with `data-side`) sets `translate`; the open settled
+       value is `0 0` (per side, so it slides home from the edge). A center-anchored
+       Dialog has no `data-side` and is never reached here. */
+    .glass-reveal[data-side="top"][data-state="open"],
+    .glass-reveal[data-side="bottom"][data-state="open"],
+    .glass-reveal[data-side="left"][data-state="open"],
+    .glass-reveal[data-side="right"][data-state="open"] {
+        translate: 0 0;
+    }
+    .glass-reveal[data-state="closed"][data-side="top"] {
+        translate: 0 var(--glass-reveal-slide);
+    }
+    .glass-reveal[data-state="closed"][data-side="bottom"] {
+        translate: 0 calc(-1 * var(--glass-reveal-slide));
+    }
+    .glass-reveal[data-state="closed"][data-side="left"] {
+        translate: var(--glass-reveal-slide) 0;
+    }
+    .glass-reveal[data-state="closed"][data-side="right"] {
+        translate: calc(-1 * var(--glass-reveal-slide)) 0;
+    }
+}
+
+/* ── REDUCED-MOTION CARVE (the vestibular floor — WCAG 2.3.3) ──────────────────
+ * Under `prefers-reduced-motion: reduce` the reveal SNAPS the spatial channels to
+ * their endpoints (scale → none, translate → none) and the blur-settle to none —
+ * ZERO transform/blur frames. The OPACITY fade SURVIVES (opacity is not a vestibular
+ * trigger; the surface fades, never flies, never disappears). The fade rides the
+ * short `--duration-fast` clock (the `.glass-top-layer` PRM precedent). */
+@media (prefers-reduced-motion: reduce) {
+    .glass-reveal {
+        scale: none;
+        translate: none;
+        /* The decongest snaps to clear (`filter: blur(0)`); the resting
+           `glass-floating` backdrop-filter plate blur is UNTOUCHED. */
+        filter: blur(0);
+        transition-property: opacity, display, overlay;
+        transition-duration: var(--duration-fast);
+        transition-timing-function: var(--ease-out);
+    }
+    .glass-reveal[data-state="closed"] {
+        scale: none;
+        translate: none;
+        filter: blur(0);
+    }
+}

package/src/styles/glass/rim.css

@@ -0,0 +1,100 @@
+/* glass/rim.css
+   The BB.W-GLASS-ACCENT per-INSTANCE chromatic rim/accent group (the rim-ink +
+   --glass-material-rim ring + the per-rung --glass-border-accent border, light +
+   dark arms).
+   Carved from glass/ladder.css at BB.W-CARVE4 to hold the no-god-module bound (the
+   five-rung surface ladder + the W55 bright-bucket @container + the calm-tier re-point
+   + the contrast-color ink-flip + the opaque escape + the under-shadow modifier + the
+   grain ::after stay in ladder.css). @import-ed by glass.css in cascade order
+   IMMEDIATELY AFTER ladder.css — the SAME @layer components; the rim/accent group is
+   the SOLE writer of --glass-material-rim/--glass-border-accent (the rungs read those
+   + --glass-rim-ink as custom properties resolved at use-time on the SAME elements, so
+   the relocation is cascade-order-invariant), and the W55 bright-bucket is DELIBERATELY
+   kept in ladder.css (relocating it past the contrast-color @supports block would invert
+   their same-specificity source-order tie on supporting engines — a behaviour change the
+   byte-isomorphism bound forbids). The dist is byte-isomorphic. */
+@layer components {
+    /* (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. */
+    /* ── BB.W-GLASS-ACCENT — the per-INSTANCE chromatic-RIM tint ───────────────
+       The THIRD disjoint glass axis (LEVEL · TINT · ACCENT). The rim is TWO
+       resolved things — the `--glass-material-rim` inset RING (= `--glass-edge-
+       light`, an inset box-shadow) and the per-rung `--glass-border-*` BORDER —
+       and BOTH must carry the accent hue so the rim reads as ONE accent silhouette,
+       not a half-tinted edge.
+
+       The composition is `color-mix(in oklab, <current rim color>, var(--glass-
+       accent) var(--glass-accent-strength))` — the PERCEPTUAL oklab mix the W55
+       glass-tint seam + the `<IconChip>` chip already speak (NOT in-srgb — the
+       in-srgb fence is the `--surface-tint-*` brand-overlay family, a SEPARATE
+       axis this never touches). At the resting `--glass-accent-strength: 0%` (the
+       `@property` default) + `--glass-accent: transparent` (the neutral identity)
+       the mix resolves byte-identical to today's rim (the W2 no-op floor).
+
+       The RING: a box-shadow value cannot be `color-mix`-ed whole, so the rim ring
+       is REBUILT here as `inset 0 0 0 0.75px <mixed-color>` — the SAME 0.75px inset
+       geometry the `--glass-edge-light` token paints (AV.W15 M3), only its COLOR
+       stop composing the accent. At 0% strength the color resolves to the
+       `--glass-edge-light` base ink (`hsl(0 0% 100% / 0.18)` light / 0.22 dark —
+       read via `--glass-rim-ink`) so the ring is byte-identical to
+       `var(--glass-edge-light)`. The `.dark` arm re-points `--glass-rim-ink` to the
+       dark base so the dark rim composes off `--glass-edge-light-dark`.
+
+       The BORDER: each rung's `border-color` reads `--glass-border-accent`, which
+       composes the accent onto the rung's own `--glass-border-*` ink. The rung
+       borders are re-pointed at their declarations (the `border: 1px solid
+       var(--glass-border-accent)`) so ONE derived token carries the accent across
+       the band; `--glass-border-accent` reads the per-rung `--glass-border-rung`
+       the rung sets locally, mixed with the accent.
+
+       This axis NEVER touches the plate BACKGROUND (the W55 `--glass-tint-source`
+       cohort) — the accent is the rim+glint chromatic DECORATION, not the
+       whole-plate legibility darken (the distinct-axis-not-fork fence). */
+    .glass-material,
+    .glass-wash,
+    .glass-quiet,
+    .glass-resting,
+    .glass-floating,
+    .glass-overlay,
+    .glass-card,
+    .glass-specular-track,
+    .dock-icon-button {
+        /* the resolved rim ring INK (white-α light / lifted-white-α dark — the
+           SAME stop the `--glass-edge-light` token carries; the `.dark` arm below
+           re-points it). The accent mixes ONTO this ink. */
+        --glass-rim-ink: hsl(0 0% 100% / 0.18);
+        --glass-material-rim: inset 0 0 0 0.75px
+            color-mix(in oklab, var(--glass-rim-ink), var(--glass-accent) var(--glass-accent-strength));
+        /* the per-rung border ink, accent-composed. `--glass-border-rung` is set by
+           each rung at its own declaration (it reads the rung's `--glass-border-*`
+           token); the accent mixes onto it so the BORDER half of the rim carries the
+           same hue as the RING. At 0% strength === the un-mixed rung ink. */
+        --glass-border-accent: color-mix(
+            in oklab,
+            var(--glass-border-rung, var(--glass-border)),
+            var(--glass-accent) var(--glass-accent-strength)
+        );
+    }
+    .dark .glass-material,
+    .dark .glass-wash,
+    .dark .glass-quiet,
+    .dark .glass-resting,
+    .dark .glass-floating,
+    .dark .glass-overlay,
+    .dark .glass-card,
+    .dark .glass-specular-track,
+    .dark .dock-icon-button {
+        /* the dark rim ink is the lifted-α base (`--glass-edge-light-dark` stop) so
+           the accent composes off the dark silhouette device (W-DARK-MATERIAL). */
+        --glass-rim-ink: hsl(0 0% 100% / 0.22);
+    }
+
+}