@mkbabb/glass-ui 4.1.0 → 5.0.0

package/src/styles/glass/material.css

@@ -48,6 +48,51 @@
         position: relative;
     }
 
+    /* ── BG.W-GLASS-CLIP-DISCIPLINE — the ONE paint-box clip register ───────────
+       The scattered per-class clip DIALECTS — `.glass-card` → `contain: layout
+       style paint` and `.glass-btn` → `contain: paint` (both surfaces.css) — are
+       RETIRED into this ONE `contain: paint` register on a NARROWED CONTENT +
+       `.glass-card` + glass-atom selector, so every composing content surface
+       inherits ONE discipline instead of two divergent per-class values.
+
+       THE NARROWING (the blast-radius fence — do NOT re-widen):
+       • INCLUDED — the CONTENT tiers (`.glass-wash`/`.glass-quiet`/`.glass-
+         resting`, the tier the real <Card> composes via
+         surfaceClass('glass','resting')) + the `.glass-card` convenience
+         shorthand + the `.glass-btn` glass-atom. `.glass-card`/`.glass-btn` are
+         the AY.W-A11Y-PERF O-4 nested-backdrop-cost surfaces — a glass Button's
+         own backdrop sample must not escape its card box (proof:nested-backdrop-
+         budget reads `contain:paint` on BOTH).
+       • EXCLUDED — the OVERLAY BAND (`.glass-floating`/`.glass-overlay` — reka
+         Dialog/Sheet/Popover/Command/DropdownMenu/HoverCard) carries NO clip: a
+         PopperArrow / submenu / Select-scroll that does NOT portal-to-body paints
+         PAST the rounded corner and a clip would SEVER it (the Popper-arrow-
+         survives cell).
+       • EXCLUDED — the 4 DOCK CONTROLS (`.dock-icon-button`/`.dock-tab-button`/
+         `.dock-select-trigger`/`.dock-dropdown-trigger`) carry NO clip: the
+         BA.W-DOCK-GEOMETRY freed cross-axis + the 1.1× hover plate + the
+         `--dock-control-safe-inset` must stay un-clipped (proof:dock-plate-
+         clearance).
+
+       `contain: paint` clips DESCENDANTS only — the surface's OWN rim / drop-
+       shadow / focus-ring is NOT clipped (device-verified). It is PAINT-only
+       (never `layout`, which would make the box a containing block for
+       abs/fixed descendants — the pre-empt of the overlay-clip class the blast-
+       radius note names). Each clipped surface carries a `border-radius`
+       (`.glass-card` → `--radius-card`, `.glass-btn` → `--radius-pill`, the
+       ladder rungs inherit the host's rounded box; the `::before`/`::after`
+       pseudos carry `border-radius: inherit`) so the clip FOLLOWS the corner (a
+       clip with no radius trims to a SHARP RECT — the bug proof:glass-clip's
+       radius-alongside arm reds). `overflow: hidden` stays FORBIDDEN (it would
+       clip the focus ring). */
+    .glass-wash,
+    .glass-quiet,
+    .glass-resting,
+    .glass-card,
+    .glass-btn {
+        contain: paint;
+    }
+
     /* (b) The rim — UNIFORM across all rungs (ONE `--glass-edge-light` token,
        not a per-rung family). The floating/overlay tiers previously wired it
        into their box-shadow stack; it now rides the material group as a
@@ -55,7 +100,22 @@
        tier's own shadow recipe. The `::after` grain overlay already claims the
        five rungs' `::after`; the rim is folded INTO that same overlay's
        box-shadow below (the grain `::after` gets the rim inset ring) so no
-       pseudo-element collides. */
+       pseudo-element collides.
+
+       ── BE.W5 — `--glass-edge-light` IS A WHOLE BOX-SHADOW LAYER, NEVER A COLOR ──
+       `--glass-edge-light` resolves to a COMPLETE box-shadow layer (the token is
+       `inset 0 0 0 0.75px hsl(0 0% 100% / 0.18)` — geometry + color, glass-fx.css:70;
+       the `.dark` arm re-points it to `--glass-edge-light-dark`). It is consumed as a
+       WHOLE LAYER inside a `box-shadow:` list — `box-shadow: var(--glass-edge-light),
+       <other layers>` (surfaces.css:203/371, stack-rail.css:176). The MISUSE is
+       NESTING it as a COLOR inside another shadow — `inset 0 0 0 1px
+       var(--glass-edge-light)` — which expands to `inset 0 0 0 1px inset 0 0 0 0.75px
+       hsl(…)`: an INVALID shadow value → the WHOLE `box-shadow` declaration DROPS →
+       NO rim, NO drop-shadow (worst in dark, where the rim is the silhouette device).
+       THE RULE: read `--glass-edge-light` as a whole `box-shadow` layer, NEVER nested
+       inside another shadow's geometry. To compose the rim's COLOR (e.g. accent-tint
+       it) use `--glass-rim-ink`/`--glass-material-rim` (rim.css — the COLOR seam),
+       NOT `--glass-edge-light` (the LAYER token). */
 
     /* (a)+(c) The moving-specular `::before` catch-light — the iOS-26
        illuminate-from-within behaviour. A masked radial-gradient glow rides the
@@ -92,8 +152,24 @@
            (tokens.css §specular-intensity), default 0 so a static, unwired
            surface is CLEAN and the @property `initial-value: 0` dormancy is no
            longer defeated by a floor. Hover/active lift it through the same
-           cohort (the interaction-light state machine below). */
-        --specular-intensity: var(--glass-specular-intensity-rest, 0);
+           cohort (the interaction-light state machine below).
+
+           BG.W-GLASS-DYNAMICS — the press-COUPLED magnitude (absorbs 13.5, soft-
+           gated by F5.1). The specular reads the ONE `--glass-btn-press-t` spring
+           drive (Button.vue / a dock control writes it off `useSpringPress`), so on
+           RELEASE — after the binary CSS `:active` lets go — the gleam SETTLES with
+           the spring's alive overshoot (the press-swell returns) instead of snapping
+           to rest. Soft-gated: `--glass-btn-press-t` defaults 0 (property-regs.css),
+           so an unwired surface reads `max(rest, 0.16*0) = rest` byte-identical — no
+           hard F5.1 dependency. The `<number> * <number>` calc is engine-safe (NOT a
+           registered var nested in an hsl() alpha — the Chromium-computes-to-0 class
+           the `opacity` path deliberately avoids). The button's OWN active LERP
+           (surfaces.css `.btn-glass:active::before`) still wins while pressed; this
+           carries the general release-settle beneath it. */
+        --specular-intensity: max(
+            var(--glass-specular-intensity-rest, 0),
+            calc(var(--glass-specular-intensity-active, 0.16) * var(--glass-btn-press-t, 0))
+        );
         /* AX.W52 D19 — a thin, BOUNDED, pointer-anchored EDGE gleam (not the prior
            full-plate central disc that washed small tiles muddy). The geometry is an
            EXPLICIT-radius circle bounded by `--glass-specular-size` (36% of the
@@ -131,10 +207,30 @@
            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. */
+        /* BG.W-GLASS-DYNAMICS — the iOS-27 backdrop-HUE sample seam (the 2nd of the
+           ≤2 chromatic pairs, beside W-GLASS-ACCENT). BG.W-GLASS-SIGNAL-TRUTH (M9) —
+           ONE hue channel, ONE writer: the seam reads `--glass-ambient-hue` (the REAL
+           observer write — `useGlassBackdropLuminance` writes a sampled `oklch()` modal
+           hue there, tokens/glass.css §BE.W-AMBIENT-TINT), NOT the never-written
+           `--glass-backdrop-hue` the prior comment falsely claimed the observer wrote.
+           So a dock/card catch-light picks up the field hue SUB-PERCEPTUALLY over a live
+           aurora WHERE THE OBSERVER IS WIRED, at the bounded `--glass-ambient-strength`
+           (the companion write-strength knob the observer's target owns). NEUTRAL BY
+           DEFAULT — the `--glass-ambient-hue` registered initial `transparent` +
+           `--glass-ambient-strength` initial `0%` make the OUTER mix
+           `color-mix(in oklab, X, transparent 0%) === X` byte-identical, so an unwired
+           surface reads the warm-cream core exactly (the REFERENCE FENCE: no chromatic
+           pickup until the observer writes the hue). The REST hairline (the `box-shadow`
+           below) reads the RAW neutral `hsl(40 35% 92%)` — NOT this core — so the
+           RESTING hairline is NEVER chromatic (prismatic reserved for WS6). */
         --glass-specular-core: color-mix(
             in oklab,
-            hsl(40 35% 92%),
-            var(--glass-accent) var(--glass-accent-strength)
+            color-mix(
+                in oklab,
+                hsl(40 35% 92%),
+                var(--glass-accent) var(--glass-accent-strength)
+            ),
+            var(--glass-ambient-hue) var(--glass-ambient-strength)
         );
         background:
             conic-gradient(
@@ -150,7 +246,31 @@
                 transparent 70%,
                 transparent 100%
             );
-        opacity: var(--specular-intensity, 0);
+        /* BG.W-GLASS-DYNAMICS — the resting NEUTRAL specular HAIRLINE (the read-carrier
+           at the calmer blur). WS3 demoted the blur ladder (quiet/resting → 8px), so a
+           demoted plate needs a thin bright rim to still read as GLASS at rest. This
+           inset warm-cream ring FOLLOWS the rounded box (`border-radius: inherit`) and
+           composites `plus-lighter` with the disc/conic above (a bright additive edge).
+           It is NEUTRAL — the raw `hsl(40 35% 92%)`, NEVER the `--glass-specular-core`
+           (which carries the accent + backdrop-hue) — so the resting hairline is never
+           chromatic (the REFERENCE FENCE; prismatic reserved for WS6). It is a STATIC
+           paint (no transition, no @keyframes → `proof:no-layout-animation` + the
+           0-idle-track discipline hold; the interaction transition stays scoped to the
+           :hover/:active block below). It is the SUPPLEMENTARY rim beside the primary
+           `--glass-edge-light` box-shadow rim — the two carry the demoted-blur read. */
+        box-shadow: inset 0 0 0 var(--glass-specular-hairline-width, 0.75px)
+            color-mix(in srgb, hsl(40 35% 92%) var(--glass-specular-hairline-ink, 70%), transparent);
+        /* The `::before` opacity gates the disc + conic (via `--specular-intensity`) AND
+           this rest hairline. A rest FLOOR keeps the neutral hairline lit at rest (the
+           read-carrier) while the interaction lift still rides `--specular-intensity`
+           (hover 0.10 / active 0.16 both clear the floor). `--glass-specular-rest-
+           hairline` (0.07) is a low whisper — at this floor the interaction disc/conic
+           stay sub-perceptual (well under the AX.W52 muddy ceiling), so it reads as a
+           rim hairline, not a center wash. */
+        opacity: max(
+            var(--specular-intensity, 0),
+            var(--glass-specular-rest-hairline, 0.07)
+        );
         /* 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
@@ -232,8 +352,14 @@
            `.dark` cohort runs a lower hover/active rung (tokens.css §specular-
            intensity `.dark` arm); the rest rung is already 0 so the dark arm only
            softens hover/active via the cohort. The rest rung re-reads the (dark)
-           token here so a dark `:root` override resolves. */
-        --specular-intensity: var(--glass-specular-intensity-rest, 0);
+           token here so a dark `:root` override resolves. BG.W-GLASS-DYNAMICS — the
+           dark arm mirrors the base press-couple `max()` so the `--glass-btn-press-t`
+           release-settle is NOT dropped in dark (the base opacity floor + the neutral
+           box-shadow hairline are inherited unchanged). */
+        --specular-intensity: max(
+            var(--glass-specular-intensity-rest, 0),
+            calc(var(--glass-specular-intensity-active, 0.16) * var(--glass-btn-press-t, 0))
+        );
     }
 
     /* (c) Interaction-light lockstep — hover/active lift the intensity in the
@@ -298,4 +424,71 @@
        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. */
 
+    /* ── BE.W-CLEAR-VARIANT — the Apple-Clear `surface="clear"` decoration + the
+       MANDATORY legibility scrim ──────────────────────────────────────────────────
+       The 4th surface-axis member (`useSurfaceAxis.ts` maps `clear → glass-clear`).
+       A `surface="clear"` surface paints the maximally-translucent `--glass-bg-clear`
+       (0.58 — the clearest rung the library ships, the album grid bleeds through) AND
+       a MANDATORY legibility scrim IN THE SAME SEAM — a `.glass-clear` cannot exist
+       without it (the Apple Clear contract: near-transparent → the text needs a scrim
+       floor). The scrim DIMS THE BACKDROP (`color-mix(in srgb, var(--background) N%,
+       transparent)` — the A5-1 modal-scrim idiom, painted BEHIND the translucent fill
+       within the box, see the two-layer-background note below), DISTINCT from the W55
+       `--glass-tint-*` PLATE-darken axis (the two legibility axes stay disjoint: the
+       scrim dims the backdrop, the W55 tint darkens the plate). The scrim strength
+       DERIVES from the sampled
+       `--glass-backdrop-luma` (useGlassBackdropLuminance's existing write) so it dims
+       MORE over a bright album grid (luma→1) and relaxes over a dark one (luma→0) —
+       the dynamic legibility that betters Apple's fixed scrim. The `0.5` fallback is
+       the safe mid-scrim when no observer is wired. The plate fill rides the SAME
+       oklab-tint seam so the W55 darken reaches it; the see-through frost is the
+       cross-engine FLOOR (pure opacity + backdrop-filter, no `url()` — Safari paints
+       it via the build-time -webkit- prefix pass). The scrim is a STATIC paint (no
+       layout, no animation — `proof:no-layout-animation` GREEN by construction).
+
+       THE SCRIM IS A SECOND BACKGROUND LAYER, NOT A PSEUDO. The glass family already
+       claims BOTH pseudos on every base rung — `::before` (the moving specular core)
+       AND `::after` (the grain overlay, ladder.css). `surface="clear"` composes ON a
+       base tier (`glass-floating glass-clear`), so its `::before`/`::after` are taken;
+       a scrim pseudo would CLOBBER the specular or grain. The mandatory scrim is
+       therefore the FIRST of two comma-separated `background` LAYERS — painted FRONT
+       (the translucent glass fill) over BACK (the `--background` dim) within the box,
+       so the dim sits between the backdrop-filtered backdrop and the content (a child
+       paints above both). The fill stays translucent so the backdrop still reads
+       THROUGH the dim — see-through AND legible, one element, no pseudo collision. */
+    [data-surface="clear"],
+    .glass-clear {
+        /* BG.W-GLASS-SIGNAL-TRUTH (M6) — the MANDATORY scrim is a STATIC FLOOR the
+           sampled luma can only LIFT, never `var(--glass-backdrop-luma, 0.5) * 40%`
+           whose `, 0.5` fallback is DEAD (a registered `@property` initial 0 —
+           property-regs.css — is never guaranteed-invalid, so the fallback CANNOT
+           fire on a target engine, and the unwired resolve was `calc(0 * 40%) = 0%`:
+           the scrim the canon calls FORBIDDEN-to-omit painted NOTHING). Now: an
+           UNWIRED clear plate paints `--glass-clear-scrim-floor` (12% — the mandatory
+           minimum a scrim-less clear surface can never drop below); a wired observer
+           adds the luma-driven ramp on top (`--glass-clear-scrim-ramp` 28% — floor +
+           ramp caps at the prior 40% ceiling over a bright grid, luma→1). Bare
+           `var(--glass-backdrop-luma)` reads the registered initial 0 unwired (floor
+           alone), lifts CONTINUOUSLY as the observer writes. */
+        --glass-clear-scrim-floor: 12%;
+        --glass-clear-scrim-ramp: 28%;
+        --glass-clear-scrim-strength: calc(
+            var(--glass-clear-scrim-floor) +
+            var(--glass-backdrop-luma) * var(--glass-clear-scrim-ramp)
+        );
+        background:
+            color-mix(
+                in oklab,
+                var(--glass-bg-clear),
+                var(--glass-tint-source) var(--glass-tint-strength)
+            ),
+            color-mix(
+                in srgb,
+                var(--background) var(--glass-clear-scrim-strength),
+                transparent
+            );
+        backdrop-filter: var(--glass-blur-floating);
+        position: relative;
+    }
+
 }

package/src/styles/glass/reveal.css

@@ -41,25 +41,94 @@
 
 @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;
+        /* ── BI.W-REGISTER-TABLE — the register-binding knobs ────────────────────
+           The base binds the `enter-overlay` register (Dialog/Sheet/Popover — the
+           DEFAULT); a `data-reveal="menu|tooltip|transient"` variant below swaps ONLY
+           these knobs, never the recipe BODY. The knobs source tokens/motion-registers.css
+           (which reads the parity-fixed --spring-* clocks — READ-ONLY here, the W-GLASS-CAL
+           fence). THE KEY CORRECTION (PASS-4B): the parity fix, not response-shortening,
+           lands the enter in-band — keep the full settle clock, the curve arrives audacious. */
+        --reveal-spring: var(--enter-overlay-spring);
+        --reveal-clock: var(--enter-overlay-clock);
+        /* The NAMED exit register (M6 — the reveal exit tightens 200ms → 150ms overlay /
+           100ms transient, on the no-overshoot ease-out; its OWN token, not a re-tune of
+           the shared --duration-fast — closing the reveal comment-vs-value drift). */
+        --reveal-exit-clock: var(--exit-overlay-duration);
+        --reveal-exit-curve: var(--exit-curve);
+        /* The materialize channels — the register bundle's scale-from / decongest-blur /
+           edge-slide. The overlay default is scale-from 0.88, blur 6px (the dominant
+           overlay channel, MOTION-LADDER M4), slide 0.5rem. The closed/exit leg +
+           @starting-style read these knobs (with a defensive fallback for a non-supporting
+           engine). BD.W-ANIM-IOS27-TUNE + BI.W-REGISTER-TABLE. */
+        --glass-reveal-enter-scale: var(--enter-overlay-scale);
+        --glass-reveal-blur: var(--enter-overlay-blur);
+        --glass-reveal-slide: var(--enter-overlay-slide);
+        /* The SQUISH channel — the same volume-preserving born-wide+flat squish the
+           universal `.liquid-enter` mount recipe speaks (ONE grammar, no fork). The
+           closed leg rides it on the `scale:` LONGHAND (vol-preserving sx·sy ≈ 1),
+           settling to `1 1` at open; the bloom-from-small grace is the coupled
+           scale-down (--glass-reveal-enter-scale) × this squish, never a separate
+           transform: shorthand (which would clobber a centering transform). */
+        --lq-stretch-x: 1.06;
+        --lq-stretch-y: 0.945;
         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-
+           register 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),
+        transition-duration: var(--reveal-clock), var(--reveal-clock),
+            var(--reveal-clock), var(--reveal-clock),
+            var(--reveal-clock), var(--reveal-clock);
+        transition-timing-function: var(--reveal-spring), var(--reveal-spring),
             var(--ease-out), var(--ease-out), linear, linear;
         transition-behavior: allow-discrete;
     }
 
+    /* ── THE REGISTER-BINDING AXIS (BI.W-REGISTER-TABLE) ──────────────────────────
+       `data-reveal="overlay|menu|tooltip|transient"` swaps ONLY the register knobs
+       (spring/clock/scale/blur/slide/exit-clock) — the recipe BODY (@starting-style
+       from-state, data-state legs, coupled channels, PRM carve) stays ONE. The attr is
+       RENAMED off PASS-1's `data-motion` (the shipped BH.W-MOTION-AXIS reduction axis
+       full/reduced/off — the collision is real). Default (no attr) = enter-overlay. */
+    .glass-reveal[data-reveal="overlay"] {
+        /* Explicit restatement of the base default (legibility — a no-op re-point). */
+        --reveal-spring: var(--enter-overlay-spring);
+        --reveal-clock: var(--enter-overlay-clock);
+        --reveal-exit-clock: var(--exit-overlay-duration);
+        --glass-reveal-enter-scale: var(--enter-overlay-scale);
+        --glass-reveal-blur: var(--enter-overlay-blur);
+        --glass-reveal-slide: var(--enter-overlay-slide);
+    }
+    /* enter-menu — dropdown/select/combobox/command (UF-G2 homogeneity, UF-G3 refined). */
+    .glass-reveal[data-reveal="menu"] {
+        --reveal-spring: var(--enter-menu-spring);
+        --reveal-clock: var(--enter-menu-clock);
+        --reveal-exit-clock: var(--exit-overlay-duration);
+        --glass-reveal-enter-scale: var(--enter-menu-scale);
+        --glass-reveal-blur: var(--enter-menu-blur);
+        --glass-reveal-slide: var(--enter-menu-slide);
+    }
+    /* enter-tooltip — tooltip/hover-card (UF-G4 — NO overshoot, fastest arrival). */
+    .glass-reveal[data-reveal="tooltip"] {
+        --reveal-spring: var(--enter-tooltip-spring);
+        --reveal-clock: var(--enter-tooltip-clock);
+        --reveal-exit-clock: var(--exit-overlay-duration);
+        --glass-reveal-enter-scale: var(--enter-tooltip-scale);
+        --glass-reveal-blur: var(--enter-tooltip-blur);
+        --glass-reveal-slide: var(--enter-tooltip-slide);
+    }
+    /* enter-transient — Toast + Notification CENTER-SEED bloom (MOTION-LADDER M5). */
+    .glass-reveal[data-reveal="transient"] {
+        --reveal-spring: var(--enter-transient-spring);
+        --reveal-clock: var(--enter-transient-clock);
+        --reveal-exit-clock: var(--exit-transient-duration);
+        --glass-reveal-enter-scale: var(--enter-transient-scale);
+        --glass-reveal-blur: var(--enter-transient-blur);
+        --glass-reveal-slide: var(--enter-transient-slide);
+    }
+
     /* 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
@@ -67,9 +136,29 @@
        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;
+        scale: 1 1;
         opacity: 1;
         filter: blur(0);
+        /* THE REAL FROM-STATE (BG.W-OVERLAY-ENTER-PAINT / F5.R1) — reka mounts the
+           portaled Dialog/Sheet/Popover content already `data-state="open"` at first
+           paint, so the `[closed]→[open]` transition had NO prior computed style and
+           the whole enter landed in ONE ~44ms frame (the opacity/blur pop). An
+           `@starting-style` block binds the BEFORE-FIRST-PAINT style of a newly-
+           inserted element REGARDLESS of the data-state timing (the §TOP-LAYER
+           `.glass-top-layer` grammar applied to the data-state recipe), so the enter
+           now interpolates FROM the closed values on the snappy clock (≥6 intermediate
+           frames). The from-state MIRRORS the closed snapshot below exactly — the enter
+           blooms from where the exit recedes to. The transition/timing is inherited
+           from the base `.glass-reveal` rule (snappy SPATIAL, ease-out EFFECTS); the
+           closed rule's fast un-sprung exit clock is NOT reached on enter. Under PRM
+           the base carve drops scale/translate/filter from `transition-property`, so
+           only the opacity from-state animates (fade survives, zero transform frames). */
+        @starting-style {
+            scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06))
+                calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945));
+            opacity: 0;
+            filter: blur(var(--glass-reveal-blur));
+        }
     }
 
     /* CLOSED — both the resting CLOSED snapshot AND the EXIT leg. The exit reads
@@ -77,11 +166,49 @@
        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);
+        /* Born wide+flat AND bloom-from-small: the SQUISH (--lq-stretch-x/-y,
+           vol-preserving) couples with the bloom-from-0.88 on the SAME `scale:`
+           LONGHAND (two factors, ONE longhand — never a second transform: shorthand
+           that would clobber a Dialog's centering translate). The deform stays
+           anisotropic (the long axis swells AS it blooms, the short pinches);
+           it settles to `1 1` at open. These static values are the EXIT end-state
+           (the `glass-reveal-out` keyframe's `to` MIRRORS them) + the non-supporting-
+           engine fallback. */
+        scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06))
+            calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945));
         opacity: 0;
         filter: blur(var(--glass-reveal-blur));
-        transition-timing-function: var(--ease-out);
-        transition-duration: var(--duration-fast);
+        /* THE EXIT IS A KEYFRAME ANIMATION, NOT A TRANSITION (BG.W-OVERLAY-ENTER-PAINT /
+           F5.R1 repair — the paint-judge FAIL: Dialog+Popover exit painted 0 frames).
+           reka-ui `usePresence` gates the portaled-overlay unmount on
+           `getComputedStyle(node).animationName` — it dispatches ANIMATION_OUT + awaits
+           `animationstart`/`animationend` and has NO `transitionend` path, so a
+           transition-only exit is TORN DOWN (~11ms, <1 frame) before it can paint. The
+           Sheet is immune ONLY because its `sheet-animate` (`animate-out`) is a
+           @keyframes animation reka awaits — so the reveal exit rides the SAME kind:
+           `@keyframes glass-reveal-out` (scale 1→squish, opacity 1→0, filter blur(0)→
+           blur — the SAME channels the enter blooms, REVERSED). With `animationName ≠
+           none` AND the enter being a TRANSITION (so the mounted-state animationName is
+           `none` ≠ the closed `glass-reveal-out` → reka's `isAnimating` is true), reka
+           dispatches ANIMATION_OUT and the exit paints its full ≥4-frame recede. The
+           clock is the no-overshoot `--ease-out` on the fast `--duration-fast` (≤150ms).
+           Compositor-only (scale/opacity/filter — the proof:no-layout-animation floor).
+           BI.W-REGISTER-TABLE — the exit rides the NAMED exit register (--reveal-exit-clock
+           = --exit-overlay-duration 150ms default, --exit-transient-duration 100ms on
+           [data-reveal=transient]) on the no-overshoot --reveal-exit-curve (= --ease-out),
+           tightening the prior 200ms --duration-fast (M6). */
+        animation: glass-reveal-out var(--reveal-exit-clock) var(--reveal-exit-curve) both;
+        /* The side-popover `translate` slide-out stays a TRANSITION — a DIFFERENT
+           property, so it coexists with the scale/opacity/filter animation (no cascade
+           fight) and never touches a center Dialog's `-translate-x-1/2 -translate-y-1/2`
+           centering (a Dialog has no `data-side`, so `translate` never changes → no
+           transition runs). scale/opacity/filter are DROPPED from the exit transition
+           list (the animation owns them, so no transition competes with — and per the
+           cascade would override — the keyframe); the ENTER still rides the base rule's
+           full transition-property (unchanged). */
+        transition-property: translate, display, overlay;
+        transition-timing-function: var(--reveal-exit-curve);
+        transition-duration: var(--reveal-exit-clock);
     }
 
     /* The directional slide-in — the compositor `translate` leg keyed off the
@@ -91,11 +218,34 @@
        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"],
+    /* Each side-anchored open variant seats `translate: 0 0` (slid home) AND carries an
+       `@starting-style` translate from-state at its edge — so the enter SLIDES in from
+       the anchor edge (reka mounts already `open`, so without the from-state the side
+       popover would pop in place). The from-state MIRRORS the matching closed exit-slide
+       below (enter blooms from where the exit recedes to). */
+    .glass-reveal[data-side="top"][data-state="open"] {
+        translate: 0 0;
+        @starting-style {
+            translate: 0 var(--glass-reveal-slide);
+        }
+    }
+    .glass-reveal[data-side="bottom"][data-state="open"] {
+        translate: 0 0;
+        @starting-style {
+            translate: 0 calc(-1 * var(--glass-reveal-slide));
+        }
+    }
+    .glass-reveal[data-side="left"][data-state="open"] {
+        translate: 0 0;
+        @starting-style {
+            translate: var(--glass-reveal-slide) 0;
+        }
+    }
     .glass-reveal[data-side="right"][data-state="open"] {
         translate: 0 0;
+        @starting-style {
+            translate: calc(-1 * var(--glass-reveal-slide)) 0;
+        }
     }
     .glass-reveal[data-state="closed"][data-side="top"] {
         translate: 0 var(--glass-reveal-slide);
@@ -109,6 +259,47 @@
     .glass-reveal[data-state="closed"][data-side="right"] {
         translate: calc(-1 * var(--glass-reveal-slide)) 0;
     }
+
+    /* ── THE `data-motion` REDUCTION AXIS (N6 WIRE — BI.W-TEMPO) ────────────────────
+       `useMotionAxis` (_shared/useMotionAxis.ts) emits `data-motion="reduced"/"off"`
+       from the overlay content SFCs (Dialog + Sheet — ≥2 shipped emitters); at HEAD
+       ZERO CSS consumed it — a DEAD WIRE the NO-MASKING-FALLBACK floor forbids. These
+       arms WIRE the signal (N6 = WIRE, supersedes the SUFFUSION-MAP M4 "excise"). It
+       is DISJOINT from the `data-reveal` REGISTER axis above (two attributes, two
+       concerns): `data-reveal` picks the enter-register BUNDLE (overlay/menu/tooltip/
+       transient); `data-motion` DEGRADES the whole reveal for a motion-sensitive
+       consumer. OS `prefers-reduced-motion` (the @media carve below, unlayered) still
+       WINS where active — PRM ≥ the prop reduction (the useMotionAxis precedence).
+
+       reduced — the JS gesture physics degrade to their CSS floor: a barely-there 0.97
+                 bloom, decongest blur OFF (a calm mild reduction; only the register
+                 knobs swap, so the coupled scale/opacity legs still glide the base
+                 recipe — the prop reduction is gentler than OS-forced PRM). */
+    .glass-reveal[data-motion="reduced"] {
+        --glass-reveal-enter-scale: 0.97;
+        --glass-reveal-blur: 0px;
+    }
+    /* off — motion OFF (the functional open KEPT — meaning never off): fade ONLY, ZERO
+       transform/blur frames (the vestibular floor the PRM carve also lands). Mirrors
+       the reduced-motion carve so the two full reductions read identically. */
+    .glass-reveal[data-motion="off"] {
+        scale: none;
+        translate: none;
+        filter: blur(0);
+        transition-property: opacity, display, overlay;
+        transition-duration: var(--reveal-exit-clock);
+        transition-timing-function: var(--reveal-exit-curve);
+    }
+    .glass-reveal[data-motion="off"][data-state="closed"] {
+        scale: none;
+        translate: none;
+        filter: blur(0);
+        /* The exit fades ONLY — swap the reka-awaitable fade-only keyframe (a
+           transition-only fade is torn down before it paints; the keyframe keeps the
+           fade PAINTING). Duration/timing/fill inherit from the closed `animation`
+           shorthand — only the name swaps (the PRM-carve precedent). */
+        animation-name: glass-reveal-out-reduced;
+    }
 }
 
 /* ── REDUCED-MOTION CARVE (the vestibular floor — WCAG 2.3.3) ──────────────────
@@ -132,5 +323,11 @@
         scale: none;
         translate: none;
         filter: blur(0);
+        /* The exit fades ONLY (no transform/blur frames — the vestibular floor). Swap the
+           keyframe for the fade-only reduced variant reka can STILL await (a transition-
+           only fade would be torn down the same way, so the surface would just vanish; the
+           fade-only keyframe keeps the fade PAINTING). The duration/timing/fill inherit
+           from the closed rule's `animation` shorthand — only the name swaps. */
+        animation-name: glass-reveal-out-reduced;
     }
 }

package/src/styles/glass/rim.css

@@ -77,9 +77,21 @@
            `--glass-rim-top`. `--glass-rim-ink` is the resolved top-ink stop (kept as
            the accent-compose seam — the `.dark` arm below re-points it). */
         --glass-rim-ink: hsl(0 0% 100% / 0.30);
+        /* BD.W-GLASS-KEY-EDGE — the LIT catch is now KEY-DRIVEN: the accent-mixed
+           catch-light rides the key-facing edges (`--glass-key-lit-y` top +
+           `--glass-key-lit-x` side, the upper-right cel key) so the accent reads on
+           the LIT edge that agrees with the cartoon cast's light source — not a flat
+           top-only halo. The side stop carries the same accent-mixed ink at the rim's
+           own 0.18-class weight (via `--glass-rim-ink`-derived mix). The SHADE half is
+           the key-driven `--glass-rim-bottom` two-stop under-shadow. At 0% accent
+           strength the mix resolves byte-compatible to the bare key-driven rim (the W2
+           no-op floor). The moving-specular `::before` catch-light + the grain
+           `::after` are UNTOUCHED (both occupied). */
         --glass-material-rim:
-            inset 0 1px 0
+            inset 0 var(--glass-key-lit-y) 0
                 color-mix(in oklab, var(--glass-rim-ink), var(--glass-accent) var(--glass-accent-strength)),
+            inset var(--glass-key-lit-x) 0 0
+                color-mix(in oklab, hsl(0 0% 100% / 0.18), var(--glass-accent) var(--glass-accent-strength)),
             var(--glass-rim-bottom);
         /* 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-*`

package/src/styles/glass/squircle.css

@@ -11,19 +11,21 @@
    without read. The squircle is RE-HOMED onto the one surface where it reads: the
    big-dock card shell (`dock.css` → `var(--corner-shape-bigdock)` under
    `@supports (corner-shape: superellipse(2))`). This is a clean break — no alias,
-   no `--corner-shape-card` decl here (it resolves `round`, the default, so a
-   `corner-shape` rule would be a no-op). The `--corner-shape-*` token axis lives
-   in `theme.css`; a consumer who WANTS a squircle card opts in by re-pointing
-   `--corner-shape-card` at `superellipse(var(--corner-k-squircle))`. Do NOT
-   re-add a squircle rule to the card/button/pill surfaces — they are round by
-   policy. */
+   no `corner-shape` rule on the card/button/pill surfaces at all: the CSS
+   `corner-shape` INITIAL VALUE is `round`, so those surfaces are round by DEFAULT.
+   The dead `--corner-shape-card`/`-pill` no-op tokens were SWEPT (BG.W-DEAD-SWEEP);
+   the SQUIRCLE members of the `--corner-shape-*` token axis (bigdock/dialog/sheet/
+   panel/hero) live in `theme.css`. A consumer who WANTS a squircle card mints its
+   own `--corner-shape-card` alias and adds the surface to the @supports block below.
+   Do NOT re-add a squircle rule to the card/button/pill surfaces — they are round
+   by policy. */
 
 /* ── AX.W56(R1) + W56b — squircle coupling onto the large-radius glass FAMILY ───
    W54 makes GLASS the default for the overlay-band surfaces; W56(R1)+W56b couple
    the SQUIRCLE onto the whole LARGE-RADIUS glass family — Dialog + Sheet content
-   (`.glass-floating.{rounded-dialog,sheet-animate}`), the Configurator/floating
-   PANEL (`.configurator`, `.floating-panel`), and the glass HERO overlay
-   (`.glass-hero`, the thin opt-in utility the page-redesign hero reads). Every one
+   (`.glass-floating.{rounded-dialog,sheet-animate}`) and the Configurator PANEL
+   (`.configurator`). (BI.W-GLASS-DEDUP retired `.floating-panel` + the `.glass-hero`
+   overlay utility — both DELETED clean-break.) Every one
    sits AT or ABOVE the ~--radius-xl threshold where the superellipse READS — the
    same iOS-26 idiom the big-dock card shell carries (the backdrop-filter blur halo
    + the cartoon under-shadow follow the shape). Each surface reads its OWN
@@ -43,24 +45,14 @@
         .glass-floating.sheet-animate {
             corner-shape: var(--corner-shape-sheet);
         }
-        .configurator,
-        .floating-panel {
+        .configurator {
             corner-shape: var(--corner-shape-panel);
         }
-        .glass-hero {
-            corner-shape: var(--corner-shape-hero);
-        }
-    }
-}
-
-/* ── The glass HERO opt-in utility (W56b fold 7) ────────────────────────────────
-   A thin large-radius editorial glass OVERLAY — distinct from a data Card (which
-   stays round by policy). It is the surface the page-redesign hero (W60) reads;
-   minting it here (with its consumer) keeps the squircle off every `.glass-card`.
-   The corner-shape squircle rides the `@supports` block above; the un-gated
-   `border-radius` here is the cross-engine round CONTRACT. */
-@layer components {
-    .glass-hero {
-        border-radius: var(--radius-2xl);
     }
 }
+/* BI.W-GLASS-DEDUP (FAM-9) — `.floating-panel` (its recipe RETIRED with
+   floating-panel.css) + `.glass-hero` (the thin large-radius editorial overlay
+   utility, 0-consumer verified) are DELETED clean-break. A straggler folds onto a
+   `tier`+`deep` glass surface (`<Surface tier deep>` / `.glass-floating.glass-deep`).
+   `--corner-shape-hero` retired with it (theme.css); the squircle family keeps
+   bigdock/dialog/sheet/panel. */