@mkbabb/glass-ui 4.1.0 → 5.0.0

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);
+        }
+    }
+}

package/src/styles/glass/surfaces.css

@@ -3,6 +3,77 @@
    Carved from the glass.css cascade root; @import-ed by glass.css in cascade
    order, each in its own @layer components (isomorphic to the monolith).
    See docs/precepts/design-idioms.md §cohesion-aware partials. */
+
+/* ── @utility glass-fill — the tint-recipe HOME, applied AT the element (BG.W-GLASS-
+   REGISTER-UNIFY · R9) ──────────────────────────────────────────────────────────
+   The ONE element-level tint compose. A surface composes `glass-fill` + sets its own
+   `--glass-fill-rung` (the rung bg to tint), and the W55 adaptive-legibility seam —
+   `color-mix(in oklab, <rung bg>, var(--glass-tint-source) var(--glass-tint-strength))`
+   — resolves AT THE ELEMENT (never pre-baked at a `:root`/ancestor scope). This kills
+   the substitution trap STRUCTURALLY: an ancestor that re-points --glass-tint-source /
+   -strength (the W55 @container bright bucket) reaches every descendant `glass-fill`
+   surface, because the mix is composed where the surface paints — the exact failure the
+   pre-baked `--glass-bg-dock` :root token hits (composed once, read at a descendant,
+   blind to the descendant's tint override).
+
+   It is the applied twin of the ladder-rung recipe `--glass-plate-tinted` (ladder.css,
+   BG.W-GLASS-IDIOM-FACTOR — the SAME oklab seam, reading `--glass-bg-rung`): the ladder
+   rungs read the token, the NON-ladder surfaces (Card / the button/tab/select/capsule
+   consumer band) APPLY this utility. ONE recipe, two delivery seams.
+
+   `@utility` (not `@layer components`) so a single-class application lands in
+   @layer utilities and out-ranks a base surface utility — the `glass-progress-rail` /
+   `veil-surface` pattern. It sets the nestable `--glass-fill` VALUE token too, so a
+   consumer that composes the tinted plate INSIDE a bigger mix (a warm-floor, an α-drop)
+   reads `var(--glass-fill)` without re-spelling the seam. ZERO-delta at the 0%/floor
+   rest default — `color-mix(…, X, transparent 0%) ≡ X`, byte-identical to the raw rung
+   bg (the field-independent token-collapse; the WS1-gated bias-hue outer leg is the
+   later W-GLASS-TINT-UNIFY atomic step, added in this ONE home, never N pastes). */
+@utility glass-fill {
+    --glass-fill: color-mix(
+        in oklab,
+        var(--glass-fill-rung, var(--glass-bg-resting)),
+        var(--glass-tint-source) var(--glass-tint-strength)
+    );
+    background: var(--glass-fill);
+}
+
+/* ── The gesture-coupled backdrop-blur ENGAGE — the shared engage primitive, minted
+   ONCE here (the glass-surface home; BG.W-BACKDROP-BLUR-ENGAGE · F5.4) ─────────────────
+   iOS-27's backdrop blur ENGAGES with the gesture: the material's blur builds AS the
+   finger pulls a surface in (≤33ms on a flick, ~0.77s on a slow pull), NEVER a fixed
+   tween. The LEVER (the finding's own): a gesture surface writes this normalized engage
+   scalar off its OWN LIVE gesture scalar and reads it in a `blur(calc(<rung radius> *
+   var(--glass-blur-engage-t)))` — so the blur's CLOCK IS the gesture's clock (finger-
+   driven on the way in; the settle SPRING on the way out — the ONE sanctioned fixed-clock
+   blur, the trailing dismiss, which the drag scalar's OWN SpringProgress settle delivers
+   for free; one read, both legs correct). There is NEVER a `transition: backdrop-filter
+   <duration>` on an engaging surface — a wall-clock duration would DECOUPLE the blur from
+   the finger (the exact anti-pattern F5.4 excises; the composed `--glass-blur-*` fixed
+   surfaces keep their static blur, this register is the DRAG-DRIVEN one).
+
+   `--glass-blur-engage-t` (the drawer sheet writes it off `--glass-drawer-t`; the dock
+   expand plate off `--dock-expand-t` is the booked 2nd consumer). Registered typed so it
+   is a first-class engage input; `inherits: false` + `initial-value: 0` is the
+   NO-MASKING-FALLBACK floor (USER 07-03): an UNWIRED surface reads 0 → NO blur (an
+   un-blurred plate fails LOUD), NEVER a masking full blur that would hide a dead writer
+   (the `--glass-drawer-t: 0` closed-state precedent). `--glass-blur-engage-knee` is the
+   shared engage-curve constant — the pull fraction by which the material reaches full
+   blur (the iOS quick-coalesce: a see-through peek/half already reads as glass). The
+   recipe is inlined at each surface (drawer.css) — NOT wrapped in a `@utility`, because
+   the per-file `/styles` partial ships Lightning-autoprefixed but NOT `@apply`-resolved
+   (a raw `@apply` would ship dead); the shared home is the registered scalar + the knee. */
+@property --glass-blur-engage-t {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+}
+
+:root {
+    /* the pull fraction by which the engaged material reaches full blur (see above). */
+    --glass-blur-engage-knee: 0.35;
+}
+
 @layer components {
     /* ── Convenience shorthands (tier + shape) ── */
 
@@ -16,7 +87,14 @@
         --card-focus-shadow: var(--shadow-card);
         --card-focus-border: var(--glass-border-quiet);
         position: relative;
-        background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
+        /* BG.W-GLASS-REGISTER-UNIFY — the glass-card plate reads the ONE tint-recipe
+           HOME (`@utility glass-fill`) instead of an inline `color-mix` re-spell. Byte-
+           identical at rest: `@apply` inlines `--glass-fill: color-mix(in oklab,
+           var(--glass-fill-rung), --glass-tint-source --glass-tint-strength); background:
+           var(--glass-fill)`, and `--glass-fill-rung: var(--glass-bg-quiet)` maps the
+           card's quiet rung. */
+        --glass-fill-rung: var(--glass-bg-quiet);
+        @apply glass-fill;
         backdrop-filter: var(--glass-blur-quiet);
         /* BB.W-GLASS-ACCENT — the card border feeds its focus-elevation ink into the
            accent-composed `--glass-border-accent` (ladder.css rim group); byte-
@@ -26,21 +104,25 @@
         border: 1px solid var(--glass-border-accent);
         border-radius: var(--radius-card);
         box-shadow: var(--glass-material-rim), var(--card-focus-shadow);
-        /* AY.W-A11Y-PERF O-4 — upgrade `layout style` → include `paint` so the
-           maximal-glass nested backdrop-filter sample (a glass Button in this card)
-           does not escape the card box (the standard nested-backdrop-cost mitigation;
-           `contain: paint` clips DESCENDANTS only — the card's own rim/drop-shadow is
-           NOT clipped, device-verified). */
-        contain: layout style paint;
+        /* AY.W-A11Y-PERF O-4 — the nested-backdrop-cost `contain: paint` clip (a
+           glass Button in this card must not escape the card box) is RETIRED off
+           this per-class dialect onto the ONE narrowed clip register in
+           material.css (BG.W-GLASS-CLIP-DISCIPLINE — `.glass-card` is in the
+           INCLUDED set). The prior `contain: layout style paint` narrowed to
+           PAINT-only there (the `layout`/`style` axes dropped — paint is what
+           clips the descendant backdrop sample; `layout` would make the card a
+           containing block for abs/fixed descendants). Do NOT re-declare `contain`
+           here — the single register is the clip home. */
         transition:
             box-shadow var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard);
     }
 
     /* Elevate one rung on descendant KEYBOARD focus (`:focus-visible`, not
-       pointer). Scoped to `.glass-card`. `:has()` Baseline Widely; the
-       `@supports not selector(:has(*))` class fallback (below) ships anyway
-       (focus-elevation is UX-critical — child-state-styling MANDATORY clause). */
+       pointer). Scoped to `.glass-card`. `:has()` is Baseline on the target set
+       (Chrome 105+/Safari 15.4+) so this is the SOLE focus-elevation mechanism —
+       the legacy `@supports not selector(:has(*))` `.is-focus-within` class
+       fallback was COLLAPSED at BG.NF.2 (its toggler never existed on disk). */
     .glass-card:has(:focus-visible) {
         --card-focus-shadow: var(--shadow-md);
         --card-focus-border: var(--glass-border-floating);
@@ -72,11 +154,12 @@
         border: 1.5px solid var(--glass-border-wash);
         background: var(--glass-bg-wash);
         backdrop-filter: var(--glass-blur-wash);
-        /* AY.W-A11Y-PERF O-4 — paint containment so the glass button's own
-           backdrop-filter sample stays inside the box when it nests in a glass card /
-           dialog / dock (the nested-backdrop-cost mitigation; clips descendants only,
-           the button's own rim/shadow is unaffected — device-verified). */
-        contain: paint;
+        /* AY.W-A11Y-PERF O-4 — the glass button's paint containment (its own
+           backdrop-filter sample stays inside the box when it nests in a glass
+           card / dialog / dock) is RETIRED off this per-class dialect onto the ONE
+           narrowed clip register in material.css (BG.W-GLASS-CLIP-DISCIPLINE —
+           `.glass-btn` is in the INCLUDED set beside `.glass-card`). Do NOT
+           re-declare `contain` here — the single register is the clip home. */
         color: var(--muted-foreground);
         /* AX.W52 §6 doctrine — the surface legs ride the bezier `--ease-standard`;
            the `scale` leg is reconciled onto `--spring-smooth` (was `--spring-snappy`)
@@ -177,13 +260,18 @@
        diffusion authored for a small detail TILE, not a button the user reads
        as "glass" (the live readback found the glass variants at a negligible
        1px). A hero control wants a real glass blur. `.btn-glass` re-points the
-       backdrop at `--glass-blur-btn` (the `quiet`-tier 10px radius + the gentle
-       `saturate(1.05) brightness(1.02)` light-concentration), so the glass
-       button variants actually read as liquid glass while the wash TILE tier
-       keeps its 1px untouched. Declares the UNPREFIXED `backdrop-filter` ONLY —
-       Lightning CSS emits the `-webkit-` companion per the single-source
-       authorship discipline above (hand-authoring both forms makes Lightning
-       dedup-and-keep-prefixed, which modern Chromium then drops). */
+       backdrop at `--glass-blur-btn`, which the token reads through.
+       BG.W-GLASS-BLUR-PEER — `--glass-blur-btn` is now an ALIAS of
+       `--glass-blur-resting` (the unified 8px material), so the calm glass button
+       reads the SAME `blur(8px)` RADIUS LEG the dock, the default-Card, and the
+       menu-row read (ONE liquid-glass material, the resolved-radius peer lock).
+       The `.btn-glass.glass-deep` arm below re-points the SAME `--glass-blur-btn`
+       to `--glass-blur-deep` for the HERO CTA — so reading the alias keeps the
+       hero deep register working unchanged (the more-glass register lives on the
+       deep tier only, no calm-button floating-tier slab). Declares the UNPREFIXED
+       `backdrop-filter` ONLY — Lightning CSS emits the `-webkit-` companion per
+       the single-source authorship discipline above (hand-authoring both forms
+       makes Lightning dedup-and-keep-prefixed, which modern Chromium then drops). */
     .btn-glass {
         backdrop-filter: var(--glass-blur-btn);
 
@@ -214,13 +302,17 @@
        `.glass-deep` axis (which re-points `--glass-blur-floating`) does not deepen a
        button. This arm re-points `--glass-blur-btn` onto the deep family — the SAME
        token-substitution model `.glass-deep` uses (glass/deep.css), composing the ONE
-       deep axis, NOT a new blur recipe. So a `default`/`primary-audacious` hero CTA
-       reads the apple.com-nav-grade thick refractive liquid glass (16px / saturate 1.5
-       family, `--glass-blur-deep`), while the plain content tiers + the quieter
-       `outline`/`secondary`/`accent` glass buttons stay calm at the floating-tier
-       `--glass-blur-btn`. The deep BLUR is budget-FREE (the W-LENSING budget binds the
-       `:liquid` SVG lens, not the deep-blur tier). The a11y `--glass-level:0` brackets
-       reach it for free (the deep blur composes `--glass-level`, the opaque-escape path). */
+       deep axis, NOT a new blur recipe.
+       BG.W-GLASS-BLUR-PEER — the bare `default` button is DEMOTED off `glass-deep`
+       (button/index.ts), so ONLY the explicit hero opt-ins reach this arm:
+       `primary-audacious`, a `<Button :liquid>`, or a host-applied `.glass-deep`. The
+       hero CTA reads the apple.com-nav-grade thick refractive liquid glass
+       (`--glass-blur-deep`, 16px / saturate 1.5 family), while the calm glass button
+       (`default`/`glass`/`outline`/`secondary`/`accent`/`ai`) stays the unified 8px
+       resting peer (`--glass-blur-btn` → `--glass-blur-resting`). The deep BLUR is
+       budget-FREE (the W-LENSING budget binds the `:liquid` SVG lens, not the deep-blur
+       tier). The a11y `--glass-level:0` brackets reach it for free (the deep blur
+       composes `--glass-level`, the opaque-escape path). */
     .btn-glass.glass-deep {
         --glass-blur-btn: var(--glass-blur-deep);
     }
@@ -279,7 +371,7 @@
        seam — over a bright field the pill darkens-to-legible, over a calm field it
        stays warm-cream/near-white (the iOS adaptive register reaching the pill).
        ZERO-delta at the `--glass-tint-strength: 0%`/floor default. */
-    :where(.btn-glass, .segmented-indicator) {
+    :where(.btn-glass, .segmented-indicator, .glass-capsule) {
         --glass-bg-floating-tinted: color-mix(
             in oklab,
             var(--glass-bg-floating),
@@ -292,18 +384,13 @@
            QUIETER glass register, prominence-by-tint) reaches the W55 darken on its lit
            fill too — ZERO new compositing axis, the SAME seam the resting/floating pair
            composes. The floating rung is minted on the shared `:where()` seam ABOVE
-           (the tab pill reads it too); quiet + resting stay button-scoped (the
+           (the tab pill reads it too); the quiet rung stays button-scoped (the
            hover/active fill register the segmented pill does not engage). */
         --glass-bg-quiet-tinted: color-mix(
             in oklab,
             var(--glass-bg-quiet),
             var(--glass-tint-source) var(--glass-tint-strength)
         );
-        --glass-bg-resting-tinted: color-mix(
-            in oklab,
-            var(--glass-bg-resting),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
     }
 
     /* BB.W-BUTTON-GLASS (e) — the optional refraction-edge opt-in. CONSUMES the
@@ -344,58 +431,4 @@
        — @import-ed by glass.css IMMEDIATELY AFTER surfaces.css, same @layer components,
        same source order (byte-isomorphic). */
 
-    /* ── 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);
-        background: var(--glass-bg-floating);
-        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);
-    }
-    .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);
-        }
-    }
 }

package/src/styles/glass.css

@@ -28,7 +28,7 @@
  * the MATERIAL half of. The spring wiring is OWNED by the dock-motion arm
  * (AV.W9, velocity continuity) and the slider arm (AV.W11); it is cross-
  * referenced here and authored there, not re-derived. See
- * `src/components/custom/dock/README.md` for the canonical discipline.
+ * `src/components/dock/README.md` for the canonical discipline.
  *
  * ── Thin @import ROOT (cohesion-aware carve) ───────────────────────────────
  * The glass rule body is carved into cohesive `glass/*.css` partials (each
@@ -46,6 +46,18 @@
    squircle + a11y @supports overrides, which must stay last): */
 @import "./glass/material.css";
 @import "./glass/ladder.css";
+/* BI.W-STYLE-REDRAIN — the .glass-opaque level-0 escape + the content-aware under-shadow
+   modifier carved out of ladder.css's tail to hold the no-god-module 500-line bound; its
+   own @layer components block @import-ed IMMEDIATELY AFTER ladder.css and BEFORE
+   grain-overlay.css (the ladder @layer tail, unique selectors, source-order-after — the
+   dist is byte-isomorphic). */
+@import "./glass/ladder-undershadow.css";
+/* BG.W-CLOSEFIX-9SITE — the glass-tier paper-grain `::after` overlay carved out of
+   ladder.css's tail to hold the no-god-module 500-line bound. @import-ed IMMEDIATELY
+   AFTER ladder.css and BEFORE accent-tone.css — the SAME @layer components; the grain
+   `::after` is the SOLE writer of the `.glass-*::after` overlay (the grain block was the
+   tail of ladder.css), so the relocation is cascade-order-invariant. */
+@import "./glass/grain-overlay.css";
 /* BC.W-ACCENT-TONE — the contrast-floored 3-channel tonal-accent register
    (.accent-tone: one --tone → idle/active/edge/ink). AFTER ladder.css (reads the
    warm-cream --card surface the ladder mints); the SOLE writer of the --accent-*
@@ -53,14 +65,46 @@
 @import "./glass/accent-tone.css";
 @import "./glass/rim.css";
 @import "./glass/surfaces.css";
+/* BI.W-STYLE-REDRAIN — the .glass-pager-ring pager-pill chassis + the .glass-chromatic
+   edge-dispersion rim fringe carved out of surfaces.css's tail to hold the 500-line
+   bound; its own @layer components block @import-ed IMMEDIATELY AFTER surfaces.css and
+   BEFORE control-surfaces.css (the surfaces @layer tail, unique selectors,
+   source-order-after — the dist is byte-isomorphic). */
+@import "./glass/surfaces-pager.css";
 /* BC.W-CARVE6 — the .input-pill / .control-surface form-control REST register
    carved out of surfaces.css to hold the 500-line bound, @import-ed IMMEDIATELY
    AFTER surfaces.css and BEFORE surface-axis.css (same @layer components, same
    source order — the dist is byte-isomorphic). */
 @import "./glass/control-surfaces.css";
+/* BD.W-TAB-IOS-CAPSULE — the ONE shared glassy register (`.glass-capsule` +
+   `.glass-capsule-track` + `.glass-capsule-hover`) the tabs/dock-tab/buttons/chips/
+   cards consumers compose. @import-ed AFTER surfaces.css (so the `--glass-bg-floating-
+   tinted` seam + the `--glass-rim-*`/`--glass-shadow-floating` tokens resolve) and
+   BEFORE the consuming recipes (segmented-tabs.css et al, imported by index.css). */
+@import "./glass/glass-capsule.css";
+/* BG.W-LIQUID-FILL — the ONE shared liquid-fill register (`.glass-liquid-fill`):
+   the warm glass-cylinder fill extracted from the Slider's `.slider-range` so the
+   Slider AND `<Progress variant="liquid">` COMPOSE it (fewer-sharper-primitives).
+   @import-ed AFTER glass-capsule.css (same `@layer components`, so the
+   `--glass-capsule-warm`/`--glass-blur-quiet`/`--glass-material-rim`/
+   `--glass-under-shadow-quiet` tokens resolve) and BEFORE the consuming
+   slider/progress recipes. */
+@import "./glass/liquid-fill.css";
 @import "./glass/surface-axis.css";
 @import "./glass/reveal.css";
+/* BD.W-LIQUID-ENTRANCE-GENERAL — the UNIVERSAL `.liquid-enter` mount recipe
+   (the four coupled channels as @keyframes-on-mount + the `.is-cel` cel-slam + the
+   lagging cartoon cast). @import-ed AFTER reveal.css (it extends the same
+   `--lq-enter-*` channel substrate the `.glass-reveal` TRANSITION floor speaks). */
+@import "./glass/liquid-enter.css";
 @import "./glass/deep.css";
+/* BG.W-GLASS-DEFAULT-DEFINITION (GA-1) — the .glass-defined DEFINED-tier decoration
+   (rim + warm-cream floor-fill + the control-cohort default flip), a token-substitution
+   decoration ON a base rung (the .glass-opaque/.glass-deep precedent), @import-ed
+   IMMEDIATELY AFTER deep.css (same @layer components, source-order-after so its cohort
+   fills win over control-surfaces.css/surfaces.css at equal specificity) and BEFORE the
+   squircle/a11y overrides (which still win by :root level). */
+@import "./glass/defined.css";
 @import "./glass/progress-rail.css";
 @import "./glass/squircle.css";
 @import "./glass/a11y-fallback.css";

package/src/styles/icon-chip.css

@@ -27,6 +27,22 @@
  * --spring-snappy/--spring-smooth registers), no longer the fixed bezier.
  */
 
+/* BD.W-GLASS-ATOM-REGISTER — the shared `.glass-atom` warm-glass register the
+   small atoms (Badge-glass / metric-badge / slider fill / the `+N` chip) consume.
+   @import-ed HERE (icon-chip.css loads in index.css AFTER glass.css, so
+   `.glass-capsule` + the `--glass-*` axes are defined) — a consume-only recipe,
+   not a second material. CSS `@import` must precede every rule, so it leads the
+   file (the comment above is not a rule). */
+@import "./glass/glass-atom.css";
+/* BD.W-CHIP-CONGRUENT-GLASS — the chip family's warm-glass toggle register
+   (.glass-chip: the stadium-pill lens + the de-frauded colour-flood punch the
+   ToggleChip/SelectableChip/toggle-group children compose). @import-ed HERE
+   alongside glass-atom.css (icon-chip.css loads in index.css AFTER glass.css, so
+   `.glass-capsule` + `.accent-tone` + the `--glass-*` axes resolve) — a consume-
+   only recipe, not a second material. CSS `@import` must precede every rule, so it
+   leads with the atom import. */
+@import "./glass/glass-chip.css";
+
 :root {
     /* The chip≤glyph proportion (d2, structural). The diameter floors at
        `glyph × ratio` so the plate can NEVER paint under the glyph — a
@@ -110,6 +126,35 @@
     --icon-chip-plate-strength: 40%;
 }
 
+/* ── The QUIET GLASS register (BD.W-GLASS-ATOM-REGISTER cross-link) ─────────────
+   The chip's SECOND register: the transmissive `.glass-atom` warm-glass capsule
+   tinted toward the event hue via `--glass-fill-tint`, NOT the loud `in srgb`
+   brand plate (the default, kept — AW.W26 fence). The component applies
+   `.glass-capsule .glass-atom` alongside `.icon-chip--glass`, so the body (warm
+   floor + `--glass-blur-quiet` backdrop + the keyed rim) comes from the SHARED
+   register — this rule only RETIRES the chip's own `in srgb` plate-color fill so
+   the two backgrounds don't double-paint (the capsule's translucent fill +
+   `.glass-atom`'s tinted `background-image` are the body). The glyph event color
+   is untouched (the one color event still reads). A flat capsule lens — the
+   backdrop-filter rides the shared `--glass-blur-quiet` (Safari-native, no
+   `backdrop-filter:url`, Fence 8). */
+.icon-chip--glass {
+    /* Retire the brand plate fill — the `.glass-capsule` body + the `.glass-atom`
+       tinted `background-image` paint the surface (no double-fill). The capsule's
+       `background:` shorthand + the atom's later `background-image` layer win the
+       cascade over this `background-color: transparent` reset by source order. */
+    background-color: transparent;
+}
+
+/* The glass chip's hover-bloom (when BOTH `--glass` + `--bloom`) routes the glow
+   ring through the SAME event color, over the glass body — the bloom GROW (the
+   base `.icon-chip--bloom:hover` transform/spring) is inherited unchanged. */
+@media (hover: hover) {
+    .icon-chip--glass.icon-chip--bloom:hover {
+        background-color: transparent;
+    }
+}
+
 /* ── The duotone axis — a low-alpha fill of the same hue UNDER the stroke ──── */
 /* Lucide glyphs bake `fill: none` on the SVG root; CSS wins over the
    presentation attribute, so the `[data-duotone] svg` rule reaches the inner