@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/glass/reveal.css

@@ -41,15 +41,28 @@
 
 @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;
-        /* The materialize squish — the surface blooms FROM 0.88 (a clear squish-grow,
-           the Control-Center round-toggle reference), not the near-no-op 0.95. The
-           authority lives here; the closed/exit leg reads it with a 0.88 fallback.
-           BD.W-ANIM-IOS27-TUNE */
-        --glass-reveal-enter-scale: 0.88;
+        /* ── 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),
@@ -60,19 +73,62 @@
         --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
@@ -83,6 +139,26 @@
         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
@@ -95,13 +171,44 @@
            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. */
+           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
@@ -111,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);
@@ -129,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) ──────────────────
@@ -152,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/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. */

package/src/styles/glass/surface-axis.css

@@ -25,7 +25,7 @@
    {glass·veil·opaque} member — the shared axis is the three-rung MATERIAL
    decoration; cartoon rides Card's own `surface` superset). The `Surface` union +
    the `surfaceClass(surface, tier)` resolver are the TS half
-   (`src/components/ui/_shared/useSurfaceAxis.ts`); this file is the CSS half.
+   (`src/components/_shared/useSurfaceAxis.ts`); this file is the CSS half.
 
    Cascade: `@layer components`, @import-ed AFTER ladder.css so the attr rules
    (specificity 0-1-0, equal to the `.glass-*` classes) win by source order over
@@ -110,4 +110,27 @@
         --paper-ink-mark-weight: 2px;
         --paper-ink-mark-color: var(--foreground);
     }
+
+    /* ── .glass-well — the recessed SEATED field register ──────────────────────
+       (BI.W-SURFACE-EXTRACT, value.js P3 WELL rung ADMIT). A field/track seated
+       INTO the surface: the `--card` plate stepped a whisper darker toward the warm
+       `--foreground` ink + a soft inset groove, so a nested input/meter reads as
+       recessed. It is a FIELD register (like `.input-bar`), NOT a `[data-surface]`
+       plate decoration — a well is a hole in the surface, not a floating plate. The
+       fill composes AT the element off the local `--glass-well-tone` (default 8%,
+       bounded to the P3 [6%,10%] band) so a per-scope override re-resolves (the
+       substitution-vs-inheritance discipline); the oklab mix stays in the perceptual
+       glass-tint family (NOT the in-srgb brand-overlay fence). The inset groove reads
+       the same warm ink — a recessed edge, not a drop shadow. */
+    .glass-well {
+        --glass-well-tone: 8%;
+        background: color-mix(
+            in oklab,
+            var(--card),
+            var(--foreground) var(--glass-well-tone)
+        );
+        box-shadow: inset 0 1px 2px
+            color-mix(in srgb, var(--foreground) 8%, transparent);
+        border-radius: var(--radius-md);
+    }
 }

package/src/styles/glass/surfaces-pager.css

@@ -0,0 +1,79 @@
+/* glass/surfaces-pager.css
+   The surfaces tail: the BA.W-PAGER glass pager-pill chassis (.glass-pager-ring + its .dark box-shadow arm) + the AW.W23 chromatic edge-dispersion rim fringe (.glass-chromatic).
+   Carved from glass/surfaces.css to hold the no-god-module 500-line bound (BI.W-STYLE-REDRAIN); its own @layer components block @import-ed by glass.css IMMEDIATELY AFTER surfaces.css (the tail of the surfaces @layer, unique selectors, source-order-after — byte-isomorphic). */
+@layer components {
+    /* ── BA.W-PAGER — the glass pager pill chassis (.glass-pager-ring) ──────────
+       The ONE pager-CHASSIS ring register: a `--radius-pill` glass-floating pill
+       (the DockRail-chip recipe — `--glass-bg-floating` + `--glass-blur-floating`
+       + `--glass-edge-light`/`--glass-specular` + the soft drop + the `.dark`
+       box-shadow arm). It encapsulates BOTH the `<PagerDots ring>` dot rail AND
+       the `<CarouselPager>` counter (the counter re-registers OFF the opaque
+       `bg-card` slab onto this — the R9/R10-5 dark-slab class dies in the same
+       edit). NEVER an opaque `bg-card` plate: this is the house "controls in a
+       glass pill" idiom, translucent (reads the substrate through it), already
+       dark/light-safe, already specular-rimmed (≥2-consumer-proven on the dock
+       rail-extend chips + the dock collapsed pill). The legibility floor over the
+       carousel's image content rides the SAME rebuilt registers
+       (W-DARK-MATERIAL/W-NO-GRAY) — no local opaque fallback. */
+    .glass-pager-ring {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding-inline: 0.625rem;
+        padding-block: 0.3125rem;
+        border-radius: var(--radius-pill);
+        /* BD.W-GOO-CAROUSEL-DECK — the element-level oklab TINT seam (NOT the raw
+           pre-substituted `--glass-bg-floating` :root token — the gray-hole
+           substitution-trap). At the `--glass-tint-strength: 0%` default this is the
+           no-op floor (`color-mix(in oklab, X, src 0%) ≡ X` — byte-identical pager pixels
+           over a flat page); over a declared/sampled BRIGHT carousel image
+           (`@container style(--glass-backdrop: light)`) the pill darkens-toward-ink for a
+           real silhouette (the W55 ≤24% clamp keeps it translucent); under `.dark` the
+           W-DARK-MATERIAL tint arm LIFTS it toward luminous warm-dark, never a charcoal
+           slab. `in oklab` is the glass-tint perceptual family (the in-srgb
+           `--surface-tint-*` brand fence is untouched). The dock `--glass-bg-dock`
+           self-re-point precedent applied to the pager chassis. */
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-floating),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        backdrop-filter: var(--glass-blur-floating);
+        -webkit-backdrop-filter: var(--glass-blur-floating);
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-specular),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
+        /* §6 EASING DOCTRINE — the surface channel cross-fades on the bezier
+           `--ease-standard` (NEVER a spring; a surface prop on a spring is the
+           violation). */
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard);
+    }
+    /* SHADOWS stay `.dark {}` (BG.W-GLASS-BASIS-CONSOLIDATE idiom-reversal). This
+       dark box-shadow arm is a PLAIN per-mode arm, NEVER a `light-dark()` — a
+       `light-dark()` wrapping shadow fragments computes the whole box-shadow to
+       `none` (the inset-shadow trap). Colors go the other way (light-dark()
+       canonical); shadows/insets stay here. proof:glass DA4 asserts this arm survives. */
+    .dark .glass-pager-ring {
+        box-shadow:
+            var(--glass-edge-light-dark),
+            var(--glass-specular-dark),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
+    }
+
+    /* ── AW.W23 — chromatic edge dispersion (the polished-glass rim fringe) ──
+       An opt-in `.glass-chromatic` composes the warm/cool oklab fringe OVER the
+       W22 uniform rim (it does NOT replace it — the rim still rides each rung's
+       box-shadow). The fringe is a transparency garnish, so it composes ONLY
+       under `prefers-reduced-transparency: no-preference` and drops under
+       `reduce` (handled by the bracket below). The fringe lands as a dedicated
+       inset box-shadow pair on the material surface so it adds onto the rim. */
+    @media (prefers-reduced-transparency: no-preference) {
+        .glass-chromatic {
+            box-shadow: var(--glass-edge-dispersion), var(--glass-material-rim);
+        }
+    }
+}