@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/glass/ladder.css

@@ -1,489 +1 @@
-/* glass/ladder.css
-   The five-tier .glass-{wash,quiet,resting,floating,overlay} surface ladder + the W55 adaptive-legibility @container style(--glass-backdrop: light) bucket (co-located with its rung) + the .glass-opaque escape + the content-aware under-shadow.
-   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. */
-@layer components {
-    /* ── Five-tier surface ladder (v0.8.0; visual only, no geometry) ──
-       Tier semantics, alpha-monotonic per R3-spec §A:
-         wash      ~0.30α  + light blur      (was `subtle`)
-         quiet     ~0.50α  + medium blur     (the missing rung)
-         resting   ~0.65α  + canonical blur  (was `default`; the speedtest plate)
-         floating  ~0.80α  + heavier blur    (was `elevated`)
-         overlay   ~0.95α  + heaviest blur   (NEW; modal-over-modal) */
-
-    /* The five-rung surface ladder declares the unprefixed
-       `backdrop-filter` only IN SOURCE. Authoring both forms manually here
-       caused Lightning CSS in Tailwind v4 to dedup-and-keep-prefixed,
-       which modern Chromium then dropped from the CSSOM (the prefixed
-       alias is parser-rejected post-Chrome 113). AY.W-A11Y-PERF O-2a — the
-       build now OWNS the prefix: `vite.style-assets.ts publishStyleAssets()`
-       injects the `-webkit-backdrop-filter:` pair into the SHIPPED
-       `dist/styles/*.css` as a LAST pass (the source stays unprefixed, so
-       the Lightning dedup never sees both forms; the build emits the pair
-       after the cascade is assembled). This GUARANTEES the prefix reaches
-       dist/ regardless of the consumer's autoprefixer/browserslist — a
-       Safari ≤17 engine (webkit-form-only) paints the blur instead of
-       silently dropping the unprefixed rule. Verified by
-       `proof:webkit-backdrop` (count-parity over the shipped dist). */
-    /* AW.W23 — every rung's background composes the adaptive-tint recipe
-       (`color-mix(in oklab, <rung bg>, var(--glass-tint-source) var(--glass-tint-
-       strength))`). With the default `--glass-tint-strength: 0%` the mix is a
-       no-op = byte-identical to the un-tinted rung; a consumer biases the surface
-       toward a sampled backdrop hue by setting `--glass-tint-source` + a
-       strength ≤30%. oklab is the mwg-preferred tint space for the TINT mix here
-       (NEVER an `oklch(from …)` lightness-shift in the GLASS-TINT mix). The
-       `oklch(from var(--foreground) …)` relative-color recipe DID land its first
-       live consumer at BB.W-DARK-INK-WARM — the dark `--surface-tint-*` arm
-       (`tokens/dark-arm.css`), where the tolerant α-mix absorbs the small high-L
-       chroma (the gamut-map caveat documented + pinned under the gamut edge there).
-       That is the INK derivation, separate from THIS glass-tint mix space. */
-    .glass-wash {
-        position: relative;
-        background: color-mix(in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength));
-        backdrop-filter: var(--glass-blur-wash);
-        /* BB.W-GLASS-ACCENT — the rung border ink feeds the accent-composed
-           `--glass-border-accent` (rim group above); byte-identical at 0%. */
-        --glass-border-rung: var(--glass-border-wash);
-        border: 1px solid var(--glass-border-accent);
-        box-shadow: var(--glass-material-rim), var(--glass-shadow-wash);
-    }
-
-    /* AL-W10 SLIM under-shadow wiring (tokens.css §AL-W10 SLIM —
-       UNDER-SHADOW recipe rungs). Each tier composes its canonical
-       iOS Liquid Glass under-shadow (a 0.5px dark hairline along the
-       bottom edge reading as glass thickness) as a NON-INSET layer
-       PREPENDED to the existing `--glass-shadow-*` recipe — the under-
-       shadow lays the floor; the existing shadow stack lays the lift.
-         quiet   → `--glass-under-shadow-quiet`   (0 2px 8px -1px α0.04)
-         resting → `--glass-under-shadow-default` (0 4px 16px -2px α0.08)
-         floating→ `--glass-under-shadow-vivid`   (0 8px 32px -4px α0.12)
-       `.glass-wash` is sub-perceptual; `.glass-overlay` is modal-heavy
-       — neither composes an under-shadow rung (Y4/Y6/Y7 SLIM retention).
-       Spine tier wires its own rung at instrument-chassis.css. */
-    .glass-quiet {
-        position: relative;
-        background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
-        backdrop-filter: var(--glass-blur-quiet);
-        --glass-border-rung: var(--glass-border-quiet);
-        border: 1px solid var(--glass-border-accent);
-        box-shadow:
-            var(--glass-material-rim),
-            var(--glass-under-shadow-quiet),
-            var(--glass-shadow-quiet);
-    }
-
-    .glass-resting {
-        position: relative;
-        background: color-mix(in oklab, var(--glass-bg-resting), var(--glass-tint-source) var(--glass-tint-strength));
-        backdrop-filter: var(--glass-blur-resting);
-        --glass-border-rung: var(--glass-border-resting);
-        border: 1px solid var(--glass-border-accent);
-        box-shadow:
-            var(--glass-material-rim),
-            var(--glass-under-shadow-default),
-            var(--glass-shadow-resting);
-    }
-
-    /* AV.W15 M3 / AW.W22 — the floating tier carries the full-perimeter rim (the
-       catch-light that "defines the silhouette", WWDC25 sess. 219). The rim now
-       comes from the unified `--glass-material-rim` (= `--glass-edge-light`) so
-       it shares ONE source with the rest of the ladder; it rides INSIDE the
-       box-shadow stack so it composes with the under-shadow floor + the lift. */
-    .glass-floating {
-        /* AY.W-A11Y-PERF O-1 — engage the W55 bright-backdrop bucket BY DEFAULT on
-           the overlay band: a floating surface floats over WHATEVER the consumer
-           painted (frequently a light/near-white app surface — the canonical G2
-           case), so the library opts its own overlay-band glass in at its own root
-           via the SELF-CONTAINER reach below (`.glass-floating { --glass-backdrop }`
-           + `:where(.glass-floating) > * `-less: the rung re-points its OWN tint
-           through the companion self-rule, not only the ancestor @container). `dark`
-           (the :root default at tokens.css) stays the explicit per-surface override a
-           dark-substrate consumer dials in on an ancestor. */
-        --glass-backdrop: light;
-        position: relative;
-        background: color-mix(in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength));
-        backdrop-filter: var(--glass-blur-floating);
-        --glass-border-rung: var(--glass-border-floating);
-        border: 1px solid var(--glass-border-accent);
-        box-shadow:
-            var(--glass-material-rim),
-            var(--glass-under-shadow-vivid),
-            var(--glass-shadow-floating);
-    }
-
-    .glass-overlay {
-        /* AY.W-A11Y-PERF O-1 — the overlay band engages the W55 bucket by default
-           (see .glass-floating). */
-        --glass-backdrop: light;
-        position: relative;
-        background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength));
-        backdrop-filter: var(--glass-blur-overlay);
-        --glass-border-rung: var(--glass-border-overlay);
-        border: 1px solid var(--glass-border-accent);
-        box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay);
-    }
-
-    /* ── Adaptive legibility: the bright-backdrop bucket (AX.W55 — the iOS-26/27
-       "locally darken the glass over light content" move; G2) ──────────────────
-       When a consumer sets `--glass-backdrop: light` on any ancestor (a near-white
-       card surface, a pale aurora bleed, a bright data grid), the `@container
-       style()` read engages here and LIFTS the tint toward ink: `--glass-tint-
-       strength` climbs from the `0%` rest default to the bounded AA floor
-       (`--glass-tint-strength-aa`, ≤24% — translucent floor preserved) and `--glass-
-       tint-source` re-points from `var(--card)` to the warm-ink `--glass-tint-ink`.
-       Both are INHERITING custom properties the rungs' `background:` composite
-       already reads, so re-pointing them on the material group re-resolves the
-       EXISTING `color-mix(in oklab, <rung bg>, …)` toward ink — ZERO new compositing
-       seam, the literal darken-over-light recipe. The `.glass-*::before` specular
-       `plus-lighter` gleam (W52) is untouched (it composes ON the darkened plate;
-       the darkening is the orthogonal oklab-tint axis). No `@supports` wrapper:
-       style queries introduce no new `container-type` value (every element is a
-       style container by default), so an engine without style-query support parses
-       the unknown at-rule as invalid, drops the block, and keeps the zero-delta
-       glass (the graceful degradation — the surface is today's-glass, the pre-W55
-       state; see utilities.css §density for the same precedent). */
-    @container style(--glass-backdrop: light) {
-        .glass-material,
-        .glass-wash,
-        .glass-quiet,
-        .glass-resting,
-        .glass-floating,
-        .glass-overlay,
-        .glass-card {
-            --glass-tint-source: var(--glass-tint-ink);
-            --glass-tint-strength: var(--glass-tint-strength-aa);
-            /* BA.W-DARK-MATERIAL scope 7 — the --muted-foreground lift moves HERE, into the
-               declared/sampled BRIGHT condition. The muted L40 tier cannot clear 4.5:1 on a
-               translucent FULL-AA-darkened plate (darkening moves the plate toward muted's
-               own luminance), so it lifts to the full ink ONLY where the plate actually
-               darkens — NOT on the calm-light unconditional floor (where it stays the muted
-               register, the slides caption read). */
-            --muted-foreground: var(--foreground);
-        }
-    }
-
-    /* AY.W-A11Y-PERF O-1 — SELF-ENGAGE the overlay band by default. The
-       `@container style()` rule above queries an ANCESTOR (CSS style queries never
-       self-match — verified on Chrome 148), so the `.glass-floating { --glass-backdrop:
-       light }` default we set on the rung would NOT darken the rung's OWN surface, only
-       its descendants. AND the `:root` library default is `--glass-backdrop: dark`
-       (tokens.css), so a `@container style(--glass-backdrop: dark)` revert would ALWAYS
-       fire (every element has the dark :root as an ancestor) — it cannot distinguish an
-       explicit consumer `dark` from the default. So the overlay band self-engages
-       UNCONDITIONALLY as the library default: a floating/overlay surface floats over
-       WHATEVER the consumer painted (frequently a light/near-white app surface — the
-       canonical G2 case the user reported), so darkening the translucent plate toward
-       the warm-ink is the correct default. This re-points the tint tokens DIRECTLY on
-       the overlay-band surfaces (`.glass-floating` / `.glass-overlay` — the Dialog/
-       Sheet/Popover/DropdownMenu/HoverCard/Command/Tooltip/Toast/Select-content band),
-       engaging the SAME oklab tint axis (zero new compositing seam). Over a DARK page
-       the darken is sub-perceptual (warm-ink over an already-dark plate is a small
-       shift); a dark-substrate consumer who wants the pristine plate sets
-       `--glass-tint-strength: 0%` on the band or uses `.glass-opaque`. The in-srgb
-       `--surface-tint-*` family is never touched (this edits only the in-oklab glass
-       tint axis).
-
-       AZ.W-ADAPTIVE-AUTO Arm 1 — the self-engage now EXTENDS to the plain CONTENT
-       tiers (`.glass-card`/`.glass-resting`/`.glass-quiet`/`.glass-wash`), not just
-       the overlay band. The W54 glass-first MAXIMAL default makes content-on-glass-
-       over-a-bright-backdrop the common case, so every content tier self-darkens over
-       light WITHOUT consumer opt-in — closing the C5-7 asymmetry (the content tiers
-       painted near-invisible over light on every route). The prior W55 overlay-only
-       scoping (which kept the default-path byte-identity canary green by testing
-       `.glass-card`/`.glass-resting` with a bare no-ancestor div) is SUPERSEDED: the
-       three now-self-engaged kinds are no longer byte-identical to the dark bucket
-       (the canary narrows to the legitimately-zero-delta surfaces — the `.glass-opaque`
-       escape + an explicit per-surface `--glass-backdrop: dark` override — and the new
-       in-situ G1 π readback becomes the binding default-path truth). The muted body
-       register lifts to the full warm-ink under the engaged plate: the muted L40 tier
-       cannot clear 4.5:1 on a translucent darkened plate (darkening moves the plate
-       TOWARD muted's own luminance), so the low-contrast muted register resolves to
-       the legible dark ink (clears ~10:1) — a token re-point on the same inheriting
-       axis as the tint. */
-    /* The OVERLAY band (.glass-floating/.glass-overlay — Dialog/Sheet/Popover/DropdownMenu/
-       HoverCard/Command/Tooltip/Toast/Select-content) keeps the FULL unconditional AA darken
-       + the muted lift: it floats over WHATEVER the consumer painted (frequently a light/
-       near-white app surface — the canonical G2 case), so darkening toward the warm-ink is
-       the correct DEFAULT over an UNKNOWN surface. Over a DARK page this becomes the
-       luminous-dark LIFT (the dark-arm re-tunes --glass-tint-strength-aa to 12% — the plate
-       lifts off the deep page). A dark-substrate consumer who wants the pristine plate sets
-       `--glass-tint-strength: 0%`. */
-    :where(.glass-floating, .glass-overlay) {
-        --glass-tint-source: var(--glass-tint-ink);
-        /* BC.W-ADAPTIVE-RECONCILE (the fourier-analysis-M Tier-1 #1 fold, CONTINUOUS half)
-           — the OVERLAY band SPECIFICALLY JOINS the continuous observer driver, the SAME
-           clamp the content tiers get. The dropdown/Dialog/Popover/Select-content plate
-           FLOORS to warm-cream when the measured backdrop is calm/dark, and darkens
-           CONTINUOUSLY only under a measured bright backdrop — NOT the binary `@container`
-           bucket jump, NOT a blanket unconditional darken (the retired 4.0.x 20% slab).
-           The `BC.W-AUDIT` pre-fix already closed the UNCONDITIONAL-darken half (the band
-           floored by default); THIS is the continuous earned-darken half. The MEASURED AA
-           bar (the overlay plate clears 4.5:1 WHILE α < 0.86) is GLASS-LEGIBILITY-
-           MEASURED's roster addition — the driver here, the bar there, no double-ownership. */
-        --glass-tint-strength: clamp(
-            var(--glass-tint-strength-floor),
-            calc(
-                var(--glass-tint-strength-floor) +
-                (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) *
-                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee, 0.6)) / (1 - var(--glass-backdrop-luma-knee, 0.6)))
-            ),
-            var(--glass-tint-strength-aa)
-        );
-        /* BC.W-DIALOG-GLASS — the overlay band's muted caption keeps the on-glass MUTED
-           register on a CALM modal (the SAME `--on-glass-muted` the content tiers read on
-           their calm path — legible-AND-subordinate against the composited glass fill),
-           NOT an UNCONDITIONAL lift to full `--foreground` that blackened the caption on a
-           cream modal over a light page. The bright-bucket lift (@container --glass-
-           backdrop:light below) moves `--muted-foreground` to the contrast ink in LOCKSTEP
-           with `--foreground` only where the plate ACTUALLY darkens to AA — so a busy-
-           backdrop modal goes full ink, a calm modal keeps the muted register. */
-        --muted-foreground: var(--on-glass-muted);
-        --muted-foreground-strong: var(--on-glass-muted-strong);
-    }
-
-    /* BA.W-DARK-MATERIAL scope 7 — the plain CONTENT tiers self-engage the SUB-PERCEPTUAL
-       FLOOR unconditionally, NOT the full AA darken (the R9-1 slides gray-slab fix). Over a
-       calm LIGHT page the floor (--glass-tint-strength-floor: 4%) is a silhouette whisper —
-       the translucent cream card stays warm (L ≈ 0.94), no gray slab. Over a DARK page the
-       floor re-resolves to the luminous-dark lift (12% in the dark arm — the plate lifts off
-       the deep page, the desired register). The FULL AA darken engages on these tiers ONLY
-       under the declared/sampled BRIGHT signal (the @container --glass-backdrop:light bucket
-       above — where the muted lift also lives now). NO unconditional --muted-foreground lift
-       here: on the calm-light floor the caption keeps the muted register (the slides read).
-       A consumer opts a light-page card out via `--glass-tint-strength: 0%` on an ancestor.
-
-       BB.W-ON-GLASS-FG (N13) — the THIRD-STATE on-glass FOREGROUND re-point lands HERE,
-       BESIDE the BA seam (the SAME cascade context, the SAME content-tier set, NOT a new
-       competing layer). The calm-light floor keeps the page-muted --neutral-5 at HEAD —
-       but the muted ink is calibrated against the CANVAS, and on a TRANSLUCENT content
-       plate (the glass-first common case) it composites toward the lifted backdrop and
-       its contrast COLLAPSES (1.15-3.29:1 measured in dark). The re-point targets the
-       muted register at the COMPOSITED glass fill: --muted-foreground → --on-glass-muted
-       (+ the -strong twin), a register BETWEEN the page-muted and the bright-bucket full
-       ink (legible-AND-subordinate; the caption stays quieter than body --foreground).
-       This is NOT a fork of --glass-tint-* — it READS the seam context and expresses the
-       third state; it NEVER re-declares --glass-tint-ink/-strength-* (W-DARK-MATERIAL's
-       frozen bound). The BA bright-bucket lift (@container --glass-backdrop:light above,
-       --muted-foreground → --foreground) STILL WINS where the plate darkens — the
-       @container conditional overrides this unconditional :where() when it engages, so a
-       darkened plate goes full ink; this calm re-point is the calm-plate case ONLY. The
-       overlay band (:where(.glass-floating, .glass-overlay) above) is a DISJOINT selector
-       set (it keeps the full-ink lift), so neither path collides. The values auto-flip per
-       mode (the on-glass rungs carry their own light/dark per-mode arms in tokens). */
-    :where(.glass-card, .glass-resting, .glass-quiet, .glass-wash) {
-        --glass-tint-source: var(--glass-tint-ink);
-        /* BC.W-ADAPTIVE-RECONCILE — the CONTINUOUS observer-driven darken (the dead-knob
-           closed; req #7). The strength is no longer a flat floor: it is a clamp that
-           READS the observer's measured `--glass-backdrop-luma` and lerps from the calm
-           warm-cream floor toward the ≤24% AA ceiling as the backdrop brightens past the
-           `--glass-backdrop-luma-knee` (the iOS-27 dynamic-range shift, apple-ios27.md
-           §1.5). Over a calm/dark backdrop (luma ≤ knee, the `max(0, …)` ramp → 0) the
-           clamp resolves EXACTLY `--glass-tint-strength-floor` (the GLASS-IDENTITY calm
-           identity, byte-equal); rising luma ramps the lift CONTINUOUSLY; the clamp floors
-           at the 4% identity and ceilings at the bounded AA — never an unconditional 20%
-           slab (the AZ grey-slab is the OPPOSITE of this earned, measured track). This
-           RETIRES the discrete `@container --glass-backdrop: light` bucket as the strength
-           driver — the continuous calc subsumes it (the bucket survives only as a no-
-           `@property` degrade fallback). */
-        --glass-tint-strength: clamp(
-            var(--glass-tint-strength-floor),
-            calc(
-                var(--glass-tint-strength-floor) +
-                (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) *
-                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee, 0.6)) / (1 - var(--glass-backdrop-luma-knee, 0.6)))
-            ),
-            var(--glass-tint-strength-aa)
-        );
-        --muted-foreground: var(--on-glass-muted);
-        --muted-foreground-strong: var(--on-glass-muted-strong);
-    }
-
-    /* AX.W55 — the `contrast-color()` foreground-ink flip (Chrome 147+/Safari 26+).
-       A PROGRESSIVE-ENHANCEMENT layer, NEVER the load-bearing floor (Open-Q #5
-       ratified): the declarative bucket above already carries AA on ALL engines (it
-       darkens the translucent plate so dark text clears ~11:1 over white at the 18%
-       floor — the live π readback ratifies). On a supporting engine `contrast-color()`
-       REFINES the foreground-ink pick natively, anchored on the LIGHT BACKDROP signal
-       (`--card`, the warm-white surface base the bright bucket implies) — NOT on the
-       ink. `contrast-color(var(--card))` over the light backdrop resolves to the
-       maximally-legible DARK ink (anchoring on the dark ink instead would invert to
-       white, illegible on the still-light translucent plate). The bucket is the floor;
-       this is the native refinement. Scoped to the bright bucket. */
-    @supports (color: contrast-color(white)) {
-        /* The bright-bucket ink flip — the content tiers + overlay band over a DECLARED/
-           sampled bright backdrop. BA.W-DARK-MATERIAL scope 6 — the SYSTEMIC contrast-color()
-           selection-inversion fix (approach A, lockstep-lift). At HEAD this block lifted only
-           --muted-foreground (and the surface `color`) to contrast-color(--card) (white over
-           a light plate, L100), but the ACTIVE control register (a SegmentedTabs active tab,
-           the curve-picker selected label) reads var(--foreground) DIRECTLY (L90, un-lifted) —
-           a control sets its OWN `color: var(--foreground)` which wins over the inherited
-           surface `color`, so the inactive (muted→white) read BRIGHTER than the active
-           (--foreground), inverting selection. The fix lifts --foreground ITSELF in lockstep
-           with --muted-foreground: now an active register reading --foreground resolves the
-           SAME anchored contrast-color ink as the lifted inactive, so selected ≥ unselected
-           everywhere (the inversion gone for ANY --muted-foreground/--foreground selection
-           pairing inside a glass card — the SYSTEMIC library-seam fix, not a curve-picker
-           one-off). Progressive enhancement only — the declarative darken is the AA floor. */
-        @container style(--glass-backdrop: light) {
-            .glass-material,
-            .glass-wash,
-            .glass-quiet,
-            .glass-resting,
-            .glass-floating,
-            .glass-overlay,
-            .glass-card {
-                color: contrast-color(var(--card));
-                --foreground: contrast-color(var(--card));
-                --muted-foreground: contrast-color(var(--card));
-            }
-        }
-        /* BC.W-DIALOG-GLASS / BC.W-ADAPTIVE-RECONCILE (overlay-band arm) — the overlay
-           band's `contrast-color()` ink flip is now GATED in the bright bucket above
-           (the @container --glass-backdrop:light block already lists `.glass-floating,
-           .glass-overlay` alongside the content tiers), NOT here as an UNCONDITIONAL
-           flip. The retired unconditional `:where(.glass-floating, .glass-overlay)`
-           rule blackened the ink even on a CALM modal over a light page — a translucent
-           cream plate forced to pure-black `contrast-color(--card)`, harsh on the cream,
-           and `--muted-foreground` flipped to the same so captions lost their muted
-           register. Now: over a calm/dark backdrop the modal keeps the WARM-INK
-           `--foreground` (legible, not pure-black) + the muted caption register; only a
-           modal over a genuinely-bright/busy backdrop flips to the dark contrast ink
-           (where the plate ACTUALLY darkens to bright-bucket AA), the `--foreground`/
-           `--muted-foreground` lift moving in LOCKSTEP there (the scope-6 lockstep). The
-           overlay band STILL self-darkens UNCONDITIONALLY (the tint-strength clamp above,
-           it floats over unknown) — only the INK flips in the bright bucket. ONE
-           reconciled flip, not two forks (ladder.css stays the single source). */
-        /* BA.W-DARK-MATERIAL scope 7 — the content-tier ink flip is GATED on the bright
-           signal (it moved INTO the @container bucket above), NOT unconditional. Over a calm
-           LIGHT page the content tiers only carry the 4% silhouette floor (still a warm cream
-           plate), so flipping the ink to the contrast-color DARK ink there is correct only
-           where the plate ACTUALLY darkens to the bright-bucket AA — the unconditional flip
-           would force a white-on-cream / dark-on-darkened mismatch on the calm card. The
-           content tiers therefore take NO unconditional contrast-color flip; their flip lives
-           in the @container bucket with the rest of the bright-condition darken. */
-    }
-
-    /* ── The opaque escape (AX.W54) ───────────────────
-       The level-0 endpoint of the SAME glass machinery — a solid `--card` plate
-       (the opacity seam → 1) with `blur(0)` (the blur seam → 0), routed through
-       the ONE `--glass-level` knob. NOT a parallel solid `background:` recipe:
-       a `.glass-*` surface that ALSO carries `.glass-opaque` keeps its glass edge,
-       rim, and under-shadow (a solid plate with a glass edge, not a bare div), and
-       the @supports fallback + the a11y brackets compose coherently. This is the
-       explicit opt-out from the MAXIMAL glass default (dense data, forced-colors,
-       a consumer that wants a flat surface). */
-    .glass-opaque {
-        --glass-level: 0;
-        /* BA.W-DARK-MATERIAL scope 7 — the opaque escape suppresses the adaptive TINT axis
-           too (not just the opacity/blur level). A solid opaque plate has no translucent
-           backdrop to darken-over, so the self-engage tint is meaningless on it; zeroing the
-           strength keeps the opaque escape bucket-INVARIANT (the unset floor and the bright
-           bucket resolve the SAME solid plate — the byte-identity canary). Without this, the
-           scope-7 unconditional content-tier floor (4%) tinted even the solid plate, breaking
-           the opt-out's "flat surface" contract. */
-        --glass-tint-strength: 0%;
-    }
-
-    /* ── Content-aware under-shadow modifier (AV.W15 M4) ──────────────
-       Apple raises the under-shadow over text (so the glass reads as
-       lifting OFF the text) and drops it over solid light. The modifier
-       is ATTRIBUTE-DRIVEN, no JS: a consumer adds `.glass-over-text`
-       (or `[data-over-content="text"]`) to a text-bearing glass surface to
-       swap it ONE under-shadow rung heavier, or `[data-over-content="solid"]`
-       to lighten it one rung over a solid-light backdrop. It reuses the
-       existing `--glass-under-shadow-{quiet,default,vivid}` rungs (no new
-       shadow value — `vivid` is sufficient over text), redefining only the
-       leading under-shadow layer per tier; the lift stack is untouched.
-
-       The selectors are per-tier so the swap is rung-correct
-       (quiet→default, resting→vivid). `.glass-floating` already sits at the
-       `vivid` ceiling over text, so the heavier variant is a no-op there
-       (the rung saturates) — documented, not an error. */
-    .glass-quiet.glass-over-text,
-    .glass-quiet[data-over-content="text"] {
-        box-shadow: var(--glass-under-shadow-default), var(--glass-shadow-quiet);
-    }
-    .glass-resting.glass-over-text,
-    .glass-resting[data-over-content="text"] {
-        box-shadow: var(--glass-under-shadow-vivid), var(--glass-shadow-resting);
-    }
-
-    /* The inverse — over a solid-light backdrop the under-shadow lightens
-       one rung (the glass need not lift as hard off a flat bright field). */
-    .glass-resting[data-over-content="solid"] {
-        box-shadow: var(--glass-under-shadow-quiet), var(--glass-shadow-resting);
-    }
-    .glass-floating[data-over-content="solid"] {
-        box-shadow:
-            var(--glass-material-rim),
-            var(--glass-under-shadow-default),
-            var(--glass-shadow-floating);
-    }
-
-    /* Grain noise overlay — reuses paper texture SVG, no extra assets.
-       BB.W-LIQUIDHOVER — the disco-grain pop (T8-F6) killed at the COMPOSITION CLASS:
-       the `background-image` is ALWAYS PRESENT (decoded once at rest, NEVER toggled to
-       `none`), and any STATE-driven grain engagement cross-fades the `opacity` ONLY on
-       the thin `--glass-grain-engage-duration` (~120ms linear) clock. A `background-
-       image: none → var(--paper-clean-texture)` engage decodes-and-appears in one frame
-       (the pop); the opacity cross-fade is a compositor-cheap interpolation with the
-       image constant — the only sanctioned grain engage. The `transition` lives HERE so
-       a hover/active grain lift (wherever a glass surface raises grain on interaction)
-       reads as a smooth fade by construction, not a discrete swap. */
-    .glass-wash::after,
-    .glass-quiet::after,
-    .glass-resting::after,
-    .glass-floating::after,
-    .glass-overlay::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        /* The grain texture is the `background-image` longhand (NOT the `background`
-           shorthand) so the image stays a STABLE always-present layer the engage
-           never re-declares — the structural anti-pop: opacity is the only animated
-           channel, the image is never `none → image`. */
-        background-image: var(--paper-clean-texture);
-        background-repeat: repeat;
-        background-size: var(--paper-texture-size);
-        opacity: var(--glass-grain-opacity);
-        /* The opacity cross-fade engage — plain ~120ms linear direct-write (no spring,
-           no overshoot — instant-but-smooth per the ask). Under the PRM / reduced-
-           transparency brackets the clock collapses to 0ms (the a11y bracket below). */
-        transition: opacity var(--glass-grain-engage-duration, 120ms) linear;
-        pointer-events: none;
-        mix-blend-mode: overlay;
-    }
-
-    /* BB.W-LIQUIDHOVER — the grain engage collapses to INSTANT under reduced motion (a
-       grain that cross-fades on hover under reduce is still motion; accessibility is
-       absolute). The reduced-transparency / forced-colors brackets already zero
-       `--glass-grain-opacity` (a11y-fallback.css), so the grain is inert there; this
-       bracket covers the reduced-MOTION case where the grain still paints but must not
-       animate. */
-    @media (prefers-reduced-motion: reduce) {
-        .glass-wash::after,
-        .glass-quiet::after,
-        .glass-resting::after,
-        .glass-floating::after,
-        .glass-overlay::after {
-            transition: none;
-        }
-    }
-
-    /* The unified rim (AW.W22) + the BB.W-GLASS-ACCENT per-INSTANCE chromatic-RIM
-       tint group (the rim-ink + --glass-material-rim ring + the per-rung
-       --glass-border-accent border, light + dark arms) lives in glass/rim.css
-       (carved at BB.W-CARVE4 — the next adjacent @layer components block, the SOLE
-       writer of --glass-material-rim/--glass-border-accent). */
-
-    .dark .glass-wash::after,
-    .dark .glass-quiet::after,
-    .dark .glass-resting::after,
-    .dark .glass-floating::after,
-    .dark .glass-overlay::after {
-        mix-blend-mode: soft-light;
-    }
-
-}
+@layer components { .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay { --glass-plate-tinted: color-mix( in oklab, var(--glass-bg-rung), var(--glass-tint-source) var(--glass-tint-strength) ); } .glass-wash { position: relative; --glass-bg-rung: var(--glass-bg-wash); background: var(--glass-plate-tinted); backdrop-filter: var(--glass-blur-wash); --glass-border-rung: var(--glass-border-wash); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-shadow-wash); } .glass-quiet { position: relative; --glass-bg-rung: var(--glass-bg-quiet); background: var(--glass-plate-tinted); backdrop-filter: var(--glass-blur-quiet); --glass-border-rung: var(--glass-border-quiet); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-quiet), var(--glass-shadow-quiet); } .glass-resting { position: relative; --glass-bg-rung: var(--glass-bg-resting); background: var(--glass-plate-tinted); backdrop-filter: var(--glass-blur-resting); --glass-border-rung: var(--glass-border-resting); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-default), var(--glass-shadow-resting); } .glass-floating { --glass-backdrop: light; position: relative; --glass-bg-rung: var(--glass-bg-floating); background: var(--glass-plate-tinted); backdrop-filter: var(--glass-blur-floating); --glass-border-rung: var(--glass-border-floating); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-vivid), var(--glass-shadow-floating); } .glass-overlay { --glass-backdrop: light; position: relative; --glass-bg-rung: var(--glass-bg-overlay); background: var(--glass-plate-tinted); backdrop-filter: var(--glass-blur-overlay); --glass-border-rung: var(--glass-border-overlay); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay); } @container style(--glass-backdrop: light) { .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: var(--glass-tint-strength-aa); --muted-foreground: var(--foreground); } } :where(.glass-floating, .glass-overlay) { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: clamp( var(--glass-tint-strength-floor), calc( var(--glass-tint-strength-floor) + (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) * max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee))) ), var(--glass-tint-strength-aa) ); --muted-foreground: var(--on-glass-muted); --muted-foreground-strong: var(--on-glass-muted-strong); } :where(.glass-card, .glass-resting, .glass-quiet, .glass-wash) { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: clamp( var(--glass-tint-strength-floor), calc( var(--glass-tint-strength-floor) + (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) * max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee))) ), var(--glass-tint-strength-aa) ); --muted-foreground: var(--on-glass-muted); --muted-foreground-strong: var(--on-glass-muted-strong); } :where(.feedback-tone, .glass-capsule, .metric-badge) { --muted-foreground: var(--on-glass-muted-strong); --muted-foreground-strong: var(--on-glass-muted-strong); } @supports (color: contrast-color(white)) { @container style(--glass-backdrop: light) { .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card { color: contrast-color(var(--card)); --foreground: contrast-color(var(--card)); --muted-foreground: contrast-color(var(--card)); } } } }

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

@@ -0,0 +1 @@
+@layer components { .liquid-enter { --lq-enter-rise: 0.5rem; --lq-enter-blur: 4px; --lq-enter-origin: center; --lq-stretch-x: 1.06; --lq-stretch-y: 0.945; --lq-enter-duration: var(--spring-snappy-duration); } @media (prefers-reduced-motion: no-preference) { .liquid-enter { animation: gl-liquid-enter var(--lq-enter-duration) var(--spring-snappy) both; animation-delay: calc( var( --lq-enter-step, calc(var(--lq-enter-duration) * 0.618) ) * var(--i, 0) ); transform-origin: var(--lq-enter-origin); } .liquid-enter.is-display { animation-timing-function: var(--ease-out); } @keyframes gl-liquid-enter { 0% { opacity: 0; scale: var(--lq-stretch-x, 1.06) var(--lq-stretch-y, 0.945); translate: 0 var(--lq-enter-rise, 0.5rem); filter: blur(var(--lq-enter-blur, 4px)); } 100% { opacity: 1; scale: 1 1; translate: 0 0; filter: blur(0); } } } @media (prefers-reduced-motion: no-preference) { .liquid-enter.is-cel { animation: gl-cel-slam var(--lq-enter-duration) var(--ease-cartoon-punch, var(--spring-bouncy)) both; } @keyframes gl-cel-slam { 0% { opacity: 0; translate: 0 calc(14px * var(--motion-weight, 0.618)); scale: calc(1 - 0.12 * var(--motion-weight, 0.618)) calc(1 + 0.06 * var(--motion-weight, 0.618)); filter: blur(var(--lq-enter-blur, 4px)); } 62% { opacity: 1; translate: 0 calc(-3px * var(--motion-weight, 0.618)); scale: calc(1 + 0.1 * var(--motion-weight, 0.618)) calc(1 - 0.05 * var(--motion-weight, 0.618)); filter: blur(0); } 100% { opacity: 1; translate: 0 0; scale: 1 1; filter: blur(0); } } } .liquid-enter.is-cel > .cartoon-cast { position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--shadow-cartoon-md); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .liquid-enter.is-cel > .cartoon-cast { animation: gl-cast-lag var(--lq-enter-duration) var(--ease-cartoon-punch, var(--spring-snappy)) both; animation-delay: calc(0.006s + 0.06s * var(--motion-weight, 0.618)); } @keyframes gl-cast-lag { 0% { opacity: 0; translate: 0 calc(10px * var(--motion-weight, 0.618)) 0; scale: 0.92; } 100% { opacity: 1; translate: 0 0 0; scale: 1; } } } @media (prefers-contrast: more) { .liquid-enter.is-cel > .cartoon-cast { opacity: 1; } } } @layer components { @media (prefers-reduced-motion: reduce) { .liquid-enter, .liquid-enter.is-cel { animation: gl-liquid-enter-reduced var(--duration-fast) var(--ease-out) both; animation-delay: 0s; } .liquid-enter.is-cel > .cartoon-cast { animation: none; opacity: 1; translate: 0; scale: 1; } @keyframes gl-liquid-enter-reduced { from { opacity: 0; } to { opacity: 1; } } } }

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

@@ -0,0 +1 @@
+@layer components { .glass-liquid-fill { border-radius: var(--radius-pill); 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) ); backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet)); -webkit-backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet)); 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); } }