@mkbabb/glass-ui 4.2.0 → 6.0.0

package/src/styles/glass/liquid-enter.css

@@ -10,10 +10,13 @@
 
    THREE registers share ONE grammar (NOT three engines):
      • MOUNT  — this file (`.liquid-enter`), plain @keyframes-on-mount, the Safari-15
-                floor, the DEFAULT. Zero JS.
-     • SCROLL — `.scroll-build`/`.scroll-cascade` (scroll-choreography.css), AUGMENTED
-                in place; this file does NOT touch them (Bug B: a 2nd `animation:`
-                shorthand on `.scroll-build > *` clobbers `gl-page-build`).
+                floor, the DEFAULT. Zero JS. The route-enter page entrance rides the
+                sibling `.route-enter` on-mount @keyframes (transitions.css, BG.W-ROUTE-
+                TRANSITION — the bare keyed `<component>` swap), not this recipe.
+     • SCROLL — `.scroll-cascade` (scroll-choreography.css), the section cascade; this
+                file does NOT touch it. (The `.scroll-build` page-build recipe is
+                RETIRED — BG.W-ROUTE-TRANSITION — so its `gl-page-build`-clobber fence
+                is moot.)
      • TRIGGER— `useLiquidReveal`/`useBloomUp` (the JS source-rect bloom).
 
    THE FOUR CHANNELS (the iOS-27 read, design.md §SPATIAL/EFFECTS split):
@@ -197,31 +200,16 @@
     }
 }
 
-/* ── The Safari < 17.2 `linear()` floor (DELTA-ASSAY §3) ──
-   `linear()` spring/punch curves UNPARSE before Safari 17.2 → the `animation`
-   timing falls to the UA default, killing the overshoot. Supply a cubic-bezier
-   floor so the entrance still reads bouncy (not a dead linear ramp) on legacy
-   WebKit. Plain @keyframes + scale/translate/opacity/filter longhands are
-   themselves Safari-15-safe; only the spring CURVE needs the floor. */
-@supports not (animation-timing-function: linear(0, 1)) {
-    @layer components {
-        @media (prefers-reduced-motion: no-preference) {
-            .liquid-enter {
-                animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
-            }
-            .liquid-enter.is-cel,
-            .liquid-enter.is-cel > .cartoon-cast {
-                animation-timing-function: cubic-bezier(0.5, -0.2, 0.4, 1.4);
-            }
-        }
-    }
-}
+/* The Safari < 17.2 `linear()` cubic-bezier floor was COLLAPSED at BG.NF.2
+   W-LEGACY-LADDER-COLLAPSE — both targets (current Chrome + current Safari)
+   parse `linear()` spring curves, so the `--spring-*` tokens are the sole
+   timing source; the bezier degrade arm served no target engine. */
 
 /* ── REDUCED-MOTION CARVE (the vestibular floor — WCAG 2.3.3 · design.md P6) ──
    Under `prefers-reduced-motion: reduce` the entrance keeps the FADE and drops the
    transform + squish + bounce + blur + stagger + cast in ONE arm (opacity is not a
    vestibular trigger). One calm paint on the short clock, delay → 0. This mirrors the
-   `.glass-reveal` + `.scroll-build` PRM precedent. The shipped `--ease-cartoon-punch`
+   `.glass-reveal` + `.route-enter` PRM precedent. The shipped `--ease-cartoon-punch`
    already re-aliases to `--ease-standard` under reduce (scheme-motion.css) and
    `--motion-weight → 0` zeroes the arc — this carve is the belt-and-suspenders floor
    that also drops the keyframe channels outright. */

package/src/styles/glass/liquid-fill.css

@@ -0,0 +1,65 @@
+/* ════════════════════════════════════════════════════════════════════════
+   .glass-liquid-fill — the ONE shared liquid-fill register (BG.W-LIQUID-FILL).
+
+   The warm glass-cylinder fill — a continuous rounded pill of warm tinted glass
+   over a track — factored ONCE out of the Slider's `.slider-range` composite so
+   EVERY meter/fill consumer COMPOSES it instead of re-forking the
+   backdrop-blur + rim + under-shadow recipe. Fewer-sharper-primitives: ONE
+   liquid-fill recipe, N surfaces.
+
+   ≥2 consumers by construction (the overfitting bar cleared by extraction):
+     · #1  Slider's `.slider-range` RE-READS it (the reference implementation —
+           the glass cylinder you pull; it bridges its own `--slider-range-*`
+           consumer-override tokens onto the register's knobs).
+     · #2  `<Progress variant="liquid">` — the glass meter (the speedtest fill
+           meter consumes it on the 5.0.0 bump).
+
+   PHASE-COLOUR COMPOSABLE, ZERO PER-SITE GLASS KNOWLEDGE. A surface tints the
+   fill by setting the ONE `--liquid-fill-tint` knob (a phase hue, a brand colour,
+   the warm-cream default) — it never touches `backdrop-filter`, the rim, or the
+   under-shadow. The register owns every glass mechanic; the surface owns only the
+   colour. The four knobs (all optional, warm-glass defaults):
+     · --liquid-fill-tint      — the fill hue (default the warm-cream capsule amber).
+     · --liquid-fill-strength  — the tint mix % against the warm 0-alpha leg (88%).
+     · --liquid-fill-blur      — the backdrop blur rung (the quiet ~2px-equiv radius).
+     · --liquid-fill-shadow    — the under-shadow leg (the glass-thickness floor).
+
+   @layer components, @import-ed in glass.css AFTER the glass-capsule register (so
+   the `--glass-bg-*`/`--glass-*-rim`/`--glass-under-shadow-*`/`--glass-capsule-warm`
+   tokens resolve) and BEFORE the consuming slider/progress recipes.
+
+   Compositor-only + Safari-native by construction (the §7 floor): the blur routes
+   `--glass-blur-quiet` (which SCALES by `--glass-level`, so the opaque escape /
+   prefers-reduced-transparency / forced-colors flatten it with the rest of the
+   band); no `backdrop-filter: url()`, no SVG goo, no WebGL. The 0-alpha mix leg is
+   a WARM `oklch(… / 0)`, NEVER bare `transparent` (the WebKit black-premultiply
+   hole, build-trap-(d)).
+   ════════════════════════════════════════════════════════════════════════ */
+
+@layer components {
+    .glass-liquid-fill {
+        border-radius: var(--radius-pill);
+        /* The warm tinted glass fill — the tint mixes against a warm 0-alpha leg so
+           the cylinder is a warm tinted `.glass-atom` over the field, not a flat bar.
+           `--liquid-fill-tint` is the ONE phase-colour knob (default the warm-cream
+           capsule amber — the lib identity; the brand/phase hue is the consumer's). */
+        background: color-mix(
+            in oklab,
+            var(--liquid-fill-tint, var(--glass-capsule-warm))
+                var(--liquid-fill-strength, 88%),
+            oklch(0.9 0.05 75 / 0)
+        );
+        /* The blur routes the `--glass-blur-quiet` rung (the ~2px-equivalent radius
+           that SCALES by `--glass-level`), not a literal blur off the level knob. */
+        backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet));
+        -webkit-backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet));
+        /* The unified edge rim (W52) reads the cylinder's curvature; the under-shadow
+           lays the glass-thickness floor at the leading edge. */
+        box-shadow:
+            var(--glass-material-rim),
+            var(--liquid-fill-shadow, var(--glass-under-shadow-quiet));
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+}

package/src/styles/glass/material-roles.css

@@ -0,0 +1,18 @@
+/* The public material hierarchy. Content and elevated content own their paint here;
+   functional glass and transient overlays keep their component-specific anatomy. */
+@layer components {
+    [data-material="content-field"] {
+        background: var(--background);
+        color: var(--foreground);
+    }
+
+    /* A content card is elevation, not another glass pane. Keep nested controls free
+       to remain functional glass by changing only the card root's paint. */
+    [data-material="elevated-content"][data-surface="glass"] {
+        background: var(--card);
+        border-color: var(--border-soft);
+        box-shadow: var(--card-shadow);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+    }
+}

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
@@ -107,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
@@ -146,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(
@@ -165,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
@@ -247,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
@@ -284,21 +395,27 @@
         --specular-intensity: var(--glass-specular-intensity-active, 0.16);
     }
 
-    /* AX.W45-TUNE C5 — the SELECTED dock control reads as the keyframes-dock glass
-       register: a glass-tier active fill (`--dock-control-active-bg` → the floating
-       plate, tokens.css) WITH the specular gleam waking over it, not a flat ink
-       stamp. The CSS `:active` pseudo above only fires on press-down; a SELECTED tile
-       (`.is-active` / `[aria-pressed]` / `[aria-expanded]` / `[aria-current]`) holds
-       the gleam lit so the selected element reads as a lit glass tier the substrate
-       shows through (the model the user named, `pass-3:13`). Family-scoped addition
-       on the dock-control `::before`, line-disjoint from the shared recipe above. */
-    .dock-icon-button:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before,
-    .dock-tab-button:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before,
-    .dock-select-trigger:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before,
-    .dock-dropdown-trigger:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before {
+    /* Selected and dragged controls hold the same interaction lens used during
+       press. Semantics choose the state attribute; the material owns its paint. */
+    :is(.glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating,
+        .glass-overlay, .glass-specular-track, .dock-icon-button, .dock-tab-button,
+        .dock-select-trigger, .dock-dropdown-trigger):is(.is-active, .active, [data-active],
+        [data-dragging], [data-state="checked"], [data-state="on"], [aria-pressed="true"],
+        [aria-selected="true"], [aria-expanded="true"], [aria-current="page"])::before {
         --specular-intensity: var(--glass-specular-intensity-active, 0.16);
     }
 
+    /* Disabled glass keeps its neutral separating hairline but cannot wake the
+       interaction lens through hover, press, or retained state. Content ink is
+       untouched; each control continues to own its disabled legibility. */
+    :is(.glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating,
+        .glass-overlay, .glass-specular-track, .dock-icon-button, .dock-tab-button,
+        .dock-select-trigger, .dock-dropdown-trigger):is(:disabled, [data-disabled],
+        [aria-disabled="true"])::before {
+        --specular-intensity: var(--glass-specular-intensity-rest, 0);
+        transition: none;
+    }
+
     /* BB.W-LENSING (scope 2) — the `:active` LENS-SWELL is RETIRED (DDR-LENS-BAKE,
        glass-refract.css header). The swell drove the displacement `scale` by mutating
        the `--glass-refract` axis on the `--glass-btn-press-t` press drive (28 rest → 44
@@ -347,10 +464,23 @@
        THROUGH the dim — see-through AND legible, one element, no pseudo collision. */
     [data-surface="clear"],
     .glass-clear {
-        /* The dynamic scrim strength — DERIVED from the sampled backdrop luma
-           (dims MORE over a bright grid). `0.5` is the safe mid-scrim fallback. */
+        /* 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-backdrop-luma, 0.5) * 40%
+            var(--glass-clear-scrim-floor) +
+            var(--glass-backdrop-luma) * var(--glass-clear-scrim-ramp)
         );
         background:
             color-mix(