@mkbabb/glass-ui 4.2.0 → 6.0.0

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

@@ -1,252 +1 @@
-/* glass/liquid-enter.css
-   BD.W-LIQUID-ENTRANCE-GENERAL — the UNIVERSAL LIQUID-ENTER mount recipe.
-
-   `.glass-reveal`'s four coupled channels (SPATIAL bloom + SQUISH + fade + decongest),
-   promoted from an overlay-only `data-state` TRANSITION to a mount `@keyframes` so a
-   `v-if`-born-at-open surface ANIMATES (a CSS transition needs a state-change a
-   born-at-open element lacks; an `@keyframes` does not). This is the everywhere
-   entrance EVERY mount surface opts into — cards, rows, controls, dock-modules, demo
-   sub-sections — on the `--i` 1/φ time-clock stagger. The flat fade dies.
-
-   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`).
-     • TRIGGER— `useLiquidReveal`/`useBloomUp` (the JS source-rect bloom).
-
-   THE FOUR CHANNELS (the iOS-27 read, design.md §SPATIAL/EFFECTS split):
-     1. SPATIAL bloom — `translate:` rise (the LONGHAND, composes with a centering
-        transform) on the snappy spring.
-     2. SQUISH volume — the reciprocal `scale:` LONGHAND, born wide+flat (vol-preserving
-        sx·sy ≈ 1), settles square. NEVER a `transform: scale()` shorthand (Bug A: it
-        REPLACES a base centering `transform: translate(-50%,-50%)` → a centered dialog
-        snaps to the corner; AND it composes with a `scale:` longhand → double-scale,
-        born at 78% area). The bloom-from-small GRACE is the coupled rise + blur + fade,
-        NOT an isotropic shrink (a 0.88 multiplier re-introduces the 0.776-area shrink).
-        When a JS clock is present, `--stretch` (useLiquidFlex — the ONE squish engine)
-        is written live and paired reciprocally on THIS longhand.
-     3. EFFECTS fade — `opacity 0→1` (coupled so scale+fade read as ONE coalescing layer).
-     4. EFFECTS decongest — `filter: blur(b)→blur(0)` on the surface's OWN pixels
-        (`filter`, NEVER `backdrop-filter` — the resting glass plate is untouched + the
-        WebKit per-frame-reblur hole is avoided), on the SAME spring clock.
-
-   The four channels are governed by ONE number — `--motion-weight` (rest 1/φ ≈ 0.618,
-   the shipped Band-0 token): weight 0 ⇒ no visible punch (PRM), weight 1 ⇒ the full
-   celebration slam. Co-scaled, never four unrelated tics.
-
-   @import-ed by glass.css in cascade order, in its own @layer components. */
-
-@layer components {
-    /* The channel substrate — the public start knobs, shared with `.glass-reveal`
-       (which keys the same `--lq-enter-*` names so the MOUNT recipe + the reka
-       closed→open TRANSITION speak ONE grammar, no fork). */
-    .liquid-enter {
-        --lq-enter-rise: 0.5rem; /* the SPATIAL rise (the translate: longhand leg) */
-        --lq-enter-blur: 4px; /* the decongest start radius (the filter leg) */
-        --lq-enter-origin: center; /* the bloom anchor (a popper edge overrides) */
-        /* The born squish — wide+flat, vol-preserving (product ≈ 1.002). The settle is
-           1 1. A consumer driving useLiquidFlex writes --lq-stretch-x/-y live. */
-        --lq-stretch-x: 1.06;
-        --lq-stretch-y: 0.945;
-        /* The register's OWN clock — the 1/φ overlap stagger keys off THIS so the
-           "launch beat N+1 as beat N hits 62%" holds on the cel/bouncy clock too
-           (DELTA-ASSAY §3 — not hardcoded to the snappy duration). */
-        --lq-enter-duration: var(--spring-snappy-duration);
-    }
-
-    /* ── BASE register (the graceful floor, GREEN on the bouncy/snappy spring) ──
-       A 2-stop squish-grow: the spring's `linear()` overshoot interior supplies the
-       calibrated iOS bounce. ONE `scale:` longhand (the squish), ONE `translate:`
-       longhand (the rise) — NO `transform:` shorthand (Bug A). */
-    @media (prefers-reduced-motion: no-preference) {
-        .liquid-enter {
-            animation: gl-liquid-enter var(--lq-enter-duration) var(--spring-snappy)
-                both;
-            /* The 1/φ overlap — the per-beat delay is the spring settle × 1/φ ≈ 0.618,
-               so beat N+1 launches as beat N reaches ~62% (Disney follow-through /
-               overlap; the golden proportion). Keyed off THIS register's own clock. */
-            animation-delay: calc(
-                var(
-                    --lq-enter-step,
-                    calc(var(--lq-enter-duration) * 0.618)
-                ) * var(--i, 0)
-            );
-            transform-origin: var(--lq-enter-origin);
-        }
-
-        /* DISPLAY type arrives with GRAVITY, no bounce (a heading must not overshoot —
-           the W-HIERARCHY arrival law). The fade/decongest still ride the recipe. */
-        .liquid-enter.is-display {
-            animation-timing-function: var(--ease-out);
-        }
-
-        @keyframes gl-liquid-enter {
-            0% {
-                opacity: 0;
-                /* SQUISH on the scale: LONGHAND — born wide+flat (vol-preserving), the
-                   short axis pinches, the long swells. NO transform: shorthand here. */
-                scale: var(--lq-stretch-x, 1.06) var(--lq-stretch-y, 0.945);
-                /* SPATIAL rise on the translate: LONGHAND (composes with a base
-                   centering transform — never clobbers it). */
-                translate: 0 var(--lq-enter-rise, 0.5rem);
-                /* DECONGEST — the surface's OWN pixels (filter, not backdrop-filter). */
-                filter: blur(var(--lq-enter-blur, 4px));
-            }
-            100% {
-                opacity: 1;
-                scale: 1 1;
-                translate: 0 0;
-                filter: blur(0);
-            }
-        }
-    }
-
-    /* ── CEL register (`.is-cel`, the audacious cartoon-technicolor upgrade) ──
-       LIVE-PROVEN FINDING (GOLDEN §7e): the cel-slam PUNCH cannot come from
-       ease-overshoot across the narrow `scale: 0.88→1` span (a 0.12 span × a 1.22
-       ease-peak yields only ~2% absolute punch). The punch MUST live in EXPLICIT
-       keyframe STOPS (a 3-stop arc); `--ease-cartoon-punch` (the shipped loud
-       `linear()`) adds the anticipation dip + extra overshoot ON TOP. Same
-       `scale:`/`translate:` LONGHAND discipline — NO `transform:` shorthand.
-
-       The arc: ANTICIPATION (sink + squish DOWN) → PUNCH (lift + stretch UP) →
-       FOLLOW-THROUGH settle. Every magnitude rides `--motion-weight` so PRM
-       (weight 0) flattens the whole arc to the fade in ONE assignment. */
-    @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;
-                /* ── ANTICIPATION — sink + squish DOWN (born flat, tall; vol-preserve) ── */
-                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;
-                /* ── PUNCH — lift + stretch UP (sx↑, sy↓; vol-preserve) ── */
-                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;
-                /* ── FOLLOW-THROUGH settle ── */
-                translate: 0 0;
-                scale: 1 1;
-                filter: blur(0);
-            }
-        }
-    }
-
-    /* ── The lagging cartoon CAST (`.is-cel`, opt-in) — a CHILD layer, never
-       ::after{box-shadow} ──
-       A box-shadow cannot LAG a transform (both repaint on the same element in
-       lockstep), and an animated box-shadow is a WebKit paint hole. So the cast is a
-       child caster layer carrying the STATIC layered `--shadow-cartoon-md` (the proper
-       1940s-technicolor punch, 3-layer ink — NOT the bare single-stamp whisper),
-       animated on its OWN transform clock +`6ms·--motion-weight` later: the object
-       slams in, its bold shadow catches up a beat behind (overlapping action). The
-       cast's TRANSFORM moves (compositor); the box-shadow is static-painted, never
-       animated. Capped to HERO/headline surfaces (perf — never a global .is-cel). */
-    .liquid-enter.is-cel > .cartoon-cast {
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        border-radius: inherit;
-        /* STATIC layered stamp; re-tints per mode via the --cartoon-ink-* cohort
-           (shadow.css / dark-arm.css). NEVER animated. */
-        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;
-            /* the LATE arrival — the shadow trails the cel a beat behind */
-            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;
-            }
-        }
-    }
-    /* Under prefers-contrast: more the inked edge is a LEGIBILITY asset — floor it on. */
-    @media (prefers-contrast: more) {
-        .liquid-enter.is-cel > .cartoon-cast {
-            opacity: 1;
-        }
-    }
-}
-
-/* ── 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);
-            }
-        }
-    }
-}
-
-/* ── 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`
-   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. */
-@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 {
-            /* the cast still appears (its ink is a legibility asset) but does not fly */
-            animation: none;
-            opacity: 1;
-            translate: 0;
-            scale: 1;
-        }
-        @keyframes gl-liquid-enter-reduced {
-            from {
-                opacity: 0;
-            }
-            to {
-                opacity: 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) ); -webkit-backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet)); 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); } }

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

@@ -0,0 +1 @@
+@layer components { [data-material="content-field"] { background: var(--background); color: var(--foreground); } [data-material="elevated-content"][data-surface="glass"] { background: var(--card); border-color: var(--border-soft); box-shadow: var(--card-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; } }

package/dist/styles/glass/material.css

@@ -1,370 +1 @@
-/* glass/material.css
-   The unified .glass-material atom (AW.W22) + the shared ::before grain/specular wiring across the glass family — ONE source for the three material atoms.
-   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 {
-    /* ── The unified glass material (AW.W22) ──────────────────────────────
-       ONE source for the three material atoms that AV.W15 scattered onto
-       opt-in classes + single tiers:
-         (a) the moving-specular `::before` catch-light (folded here from
-             glass-specular-track.css — that file now keeps only the thin
-             `.glass-specular-track` ALIAS + the brackets that point HERE),
-         (b) the `--glass-edge-light` full-perimeter rim (moved off the
-             floating-only block so EVERY rung carries it),
-         (c) the pointer interaction-light hooks (the `--specular-*`
-             `@property` channel mapped from the consumer's --mouse-x/--mouse-y
-             write).
-       The five ladder rungs + `.glass-card` + the `.dock-icon-button` CONTROL
-       compose `.glass-material`, so a Switch thumb, a glass Button, a Dialog,
-       and a Sheet all read as the SAME material without per-component wiring.
-
-       The `.glass-dock` SHELL is OUT of this group BY DESIGN — it hand-rolls a
-       parallel surface (its own `--glass-*-dock` family + a local rim) the dock arm
-       owns. The COHESION CONSEQUENCE is DELIBERATE: the dock shell carries NO shared
-       edge-gleam / moving-specular `::before` (AZ.W-DOCK-TAXONOMY retired the
-       `instrument-strip` engraved-bezel `::before` — the dock shell now has none).
-       The dock's catch-light lives on
-       its CONTROLS (`.dock-icon-button` et al., listed below + in the opt-in
-       transition block), which ARE in the material group — NOT on the shell plate.
-       Adding a shell gleam would re-introduce glass-on-glass over the controls, so
-       the shell-without-gleam is a NAMED EXEMPTION, gated as `dock-shell-exempt` in
-       proof:glass-cohesion (the only exemption beside the legibility allowlist).
-
-       The selector GROUP is the single source. Adding a surface to the band
-       material is one comma-entry here, not a new opt-in class string. */
-    .glass-material,
-    .glass-wash,
-    .glass-quiet,
-    .glass-resting,
-    .glass-floating,
-    .glass-overlay,
-    .glass-card,
-    .glass-specular-track,
-    .dock-icon-button,
-    .dock-tab-button,
-    .dock-select-trigger,
-    .dock-dropdown-trigger {
-        position: relative;
-    }
-
-    /* (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
-       dedicated `::after` inset ring so it composes alongside (not inside) each
-       tier's own shadow recipe. The `::after` grain overlay already claims the
-       five rungs' `::after`; the rim is folded INTO that same overlay's
-       box-shadow below (the grain `::after` gets the rim inset ring) so no
-       pseudo-element collides.
-
-       ── BE.W5 — `--glass-edge-light` IS A WHOLE BOX-SHADOW LAYER, NEVER A COLOR ──
-       `--glass-edge-light` resolves to a COMPLETE box-shadow layer (the token is
-       `inset 0 0 0 0.75px hsl(0 0% 100% / 0.18)` — geometry + color, glass-fx.css:70;
-       the `.dark` arm re-points it to `--glass-edge-light-dark`). It is consumed as a
-       WHOLE LAYER inside a `box-shadow:` list — `box-shadow: var(--glass-edge-light),
-       <other layers>` (surfaces.css:203/371, stack-rail.css:176). The MISUSE is
-       NESTING it as a COLOR inside another shadow — `inset 0 0 0 1px
-       var(--glass-edge-light)` — which expands to `inset 0 0 0 1px inset 0 0 0 0.75px
-       hsl(…)`: an INVALID shadow value → the WHOLE `box-shadow` declaration DROPS →
-       NO rim, NO drop-shadow (worst in dark, where the rim is the silhouette device).
-       THE RULE: read `--glass-edge-light` as a whole `box-shadow` layer, NEVER nested
-       inside another shadow's geometry. To compose the rim's COLOR (e.g. accent-tint
-       it) use `--glass-rim-ink`/`--glass-material-rim` (rim.css — the COLOR seam),
-       NOT `--glass-edge-light` (the LAYER token). */
-
-    /* (a)+(c) The moving-specular `::before` catch-light — the iOS-26
-       illuminate-from-within behaviour. A masked radial-gradient glow rides the
-       surface at the pointer position (--mouse-x/--mouse-y → the typed
-       --specular-* channel). Folded VERBATIM from glass-specular-track.css so
-       there is exactly ONE specular source. */
-    .glass-material::before,
-    .glass-wash::before,
-    .glass-quiet::before,
-    .glass-resting::before,
-    .glass-floating::before,
-    .glass-overlay::before,
-    .glass-card::before,
-    .glass-specular-track::before,
-    .dock-icon-button::before,
-    .dock-tab-button::before,
-    .dock-select-trigger::before,
-    .dock-dropdown-trigger::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        pointer-events: none;
-        z-index: 1;
-        /* Map the consumer's pointer write onto the typed properties, ON THE
-           PSEUDO. The `--mouse-x/--mouse-y` write lands on the HOST (inline
-           style) as UNREGISTERED props that inherit down to this `::before`;
-           the registered `--specular-*` props are `inherits: false`, so the
-           mapping is declared HERE where the pseudo owns its typed value. The
-           `var(--mouse-x, 50%)` floor is the centred fallback. */
-        --specular-x: var(--mouse-x, 50%);
-        --specular-y: var(--mouse-y, 50%);
-        /* The catch-light intensity at REST — reads the token cohort
-           (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);
-        /* 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
-           plate) whose falloff reaches `/0` well INSIDE the plate (70%) — a tracked
-           catch-light reading the surface near the lit edge, NEVER a whole-surface
-           wash. The core is genuinely WARM-CREAM (L < 100% so the warm hue survives;
-           the prior `hsl(40 30% 100%)` blew out to white). The `--specular-intensity`
-           multiplier drives the layer `opacity`, NOT a per-stop alpha (a
-           registered-`@property` var() nested in an hsl() alpha computes to 0 in
-           Chromium — the cross-engine-safe path); the per-stop alphas are literals so
-           even the lifted hover/active states read as a lens, not a flash. */
-        /* BB.W-LENSING (scope 3) — the motion-reactive EDGE glint UNIFIED with the
-           centered catch-light disc on ONE `::before`. TWO background layers compose:
-           (TOP) the angle-keyed EDGE-anchored conic sweep — a warm-cream arc that
-           brightens the RIM where the pointer's `--specular-angle` grazes (the
-           glass-THICKNESS read iOS-27 fuses with the catch-light); (BOTTOM) the
-           existing pointer-position centered disc. BOTH ride the SAME `--specular-
-           intensity` cohort (the `opacity` below) + `plus-lighter` blend + warm-cream
-           core `hsl(40 35% 92%)` — NEVER a second color/blend fork. The conic is masked
-           to the rim band only (the `--glass-edge-glint-band` radial mask, scope 3),
-           so the glint is a bounded RIM ring, NOT a whole-plate wash (the AX.W52 D19
-           bounded-gleam discipline). The `--specular-angle` floor `0deg` sits the glint
-           at the top edge when unwired (static rest — no ambient drift, no blowout). */
-        /* BB.W-GLASS-ACCENT — the catch-light CORE COLOR composes the per-instance
-           chromatic accent. The warm-cream `hsl(40 35% 92%)` core resolves through
-           the ONE `--glass-specular-core` var, OKLab-mixed toward `var(--glass-
-           accent)` at `var(--glass-accent-strength)`. This tints the CORE only — it
-           is the COLOR axis; W-LENSING owns the GEOMETRY (the conic angle-keyed
-           edge-glint + the radial disc + the masks + the `plus-lighter` blend, all
-           BELOW, untouched). Tinting the ONE core tints BOTH the centered disc AND
-           the rim glint (they share the core), so the data hue reads at the glint
-           where the pointer grazes — the data-keyed colored catch-light. At
-           `--glass-accent-strength: 0%` + `--glass-accent: transparent` (the
-           `@property` defaults) the mix === `hsl(40 35% 92%)` byte-identical (the W2
-           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. */
-        --glass-specular-core: color-mix(
-            in oklab,
-            hsl(40 35% 92%),
-            var(--glass-accent) var(--glass-accent-strength)
-        );
-        background:
-            conic-gradient(
-                from var(--specular-angle, 0deg) at 50% 50%,
-                transparent 0deg,
-                color-mix(in srgb, var(--glass-specular-core) 55%, transparent) 18deg,
-                transparent 60deg,
-                transparent 360deg
-            ),
-            radial-gradient(
-                circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
-                color-mix(in srgb, var(--glass-specular-core) 50%, transparent) 0%,
-                transparent 70%,
-                transparent 100%
-            );
-        opacity: var(--specular-intensity, 0);
-        /* 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
-           the angle-keyed glint reads as a THICKNESS rim, not a center wash; the centered
-           disc keeps its own-radius clip (AX.W52 D19). `mask-image` Baseline 2023-12-07;
-           a non-supporting engine ignores it and the `inset: 0` + in-paint falloff still
-           bound the gleam. */
-        mask-image:
-            radial-gradient(
-                circle closest-side at 50% 50%,
-                transparent calc(100% - var(--glass-edge-glint-band, 22%)),
-                black calc(100% - calc(var(--glass-edge-glint-band, 22%) * 0.5)),
-                black 100%
-            ),
-            radial-gradient(
-                circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
-                black 0%,
-                black 60%,
-                transparent 100%
-            );
-        /* AX.W52 D19 — `plus-lighter` (additive but HDR-clamped, Safari 16.4+) over
-           the prior `screen` (a non-linear lightener that lifted the whole tile
-           toward white — the muddy-card defect). A non-supporting engine degrades to
-           a plain low-alpha warm overlay (the gleam composes normally — no blend, no
-           blowout), the no-workaround floor; NOT a `screen` fallback. */
-        mix-blend-mode: plus-lighter;
-        /* The moving-specular TRANSITION is NOT declared here. An idle/unwired
-           `::before` is STATIC (no interpolation track), so a bare glass rung / an
-           un-armed Card / a glass Button at rest attaches ZERO animation tracks (the
-           keyframes.js runtime counts 0 idle tracks, not 19). The transition rides
-           ONLY the WIRED + interactive surfaces — the opt-in scoped block below. */
-    }
-
-    /* AY.W-GLASS — the moving-specular transition is OPT-IN (the Card wire-or-omit
-       pattern, generalized). It attaches ONLY to a WIRED surface
-       (`.glass-specular-track` — Card emits it conditionally, the dock controls + the
-       Slider thumb compose it) OR to any glass surface under `:hover`/`:active` (the
-       pointer is present, so the interpolation is legitimately live). An idle/unwired
-       `.glass-floating` / `.glass-wash` / bare-rung `::before` carries NO transition
-       and thus NO keyframes.js track. The §6 register is PRESERVED (still
-       `--ease-standard` on the position-tracked + surface-opacity legs — H-motion §6
-       "position-tracked → --ease-standard"; only the SELECTOR scope changes). The dock
-       controls keep the always-on transition (they are interactive controls; their rest
-       intensity is 0 so they paint nothing at rest, but a control legitimately carries
-       the transition). */
-    .glass-specular-track::before,
-    .glass-material:hover::before,    .glass-material:active::before,
-    .glass-wash:hover::before,        .glass-wash:active::before,
-    .glass-quiet:hover::before,       .glass-quiet:active::before,
-    .glass-resting:hover::before,     .glass-resting:active::before,
-    .glass-floating:hover::before,    .glass-floating:active::before,
-    .glass-overlay:hover::before,     .glass-overlay:active::before,
-    .glass-card:hover::before,        .glass-card:active::before,
-    .dock-icon-button::before,
-    .dock-tab-button::before,
-    .dock-select-trigger::before,
-    .dock-dropdown-trigger::before {
-        /* Smooth the position + intensity between pointer samples (the typed
-           @property regs make the percentage stops interpolable). */
-        transition:
-            --specular-x var(--duration-fast, 150ms) var(--ease-standard, ease-out),
-            --specular-y var(--duration-fast, 150ms) var(--ease-standard, ease-out),
-            opacity var(--duration-normal, 240ms) var(--ease-standard, ease-out);
-    }
-
-    .dark .glass-material::before,
-    .dark .glass-wash::before,
-    .dark .glass-quiet::before,
-    .dark .glass-resting::before,
-    .dark .glass-floating::before,
-    .dark .glass-overlay::before,
-    .dark .glass-card::before,
-    .dark .glass-specular-track::before,
-    .dark .dock-icon-button::before,
-    .dark .dock-tab-button::before,
-    .dark .dock-select-trigger::before,
-    .dark .dock-dropdown-trigger::before {
-        /* Softer over the deep canvas — `plus-lighter` still lifts on dark, so the
-           `.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);
-    }
-
-    /* (c) Interaction-light lockstep — hover/active lift the intensity in the
-       SAME rungs the scale-press squish keys off, so material-light fires in
-       lockstep with the press across every glass surface. Settles back on leave
-       via the opacity transition above. */
-    .glass-material:hover::before,
-    .glass-wash:hover::before,
-    .glass-quiet:hover::before,
-    .glass-resting:hover::before,
-    .glass-floating:hover::before,
-    .glass-overlay:hover::before,
-    .glass-card:hover::before,
-    .glass-specular-track:hover::before,
-    .dock-icon-button:hover::before,
-    .dock-tab-button:hover::before,
-    .dock-select-trigger:hover::before,
-    .dock-dropdown-trigger:hover::before {
-        --specular-intensity: var(--glass-specular-intensity-hover, 0.1);
-    }
-    .glass-material:active::before,
-    .glass-wash:active::before,
-    .glass-quiet:active::before,
-    .glass-resting:active::before,
-    .glass-floating:active::before,
-    .glass-overlay:active::before,
-    .glass-card:active::before,
-    .glass-specular-track:active::before,
-    .dock-icon-button:active::before,
-    .dock-tab-button:active::before,
-    .dock-select-trigger:active::before,
-    .dock-dropdown-trigger:active::before {
-        --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 {
-        --specular-intensity: var(--glass-specular-intensity-active, 0.16);
-    }
-
-    /* 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
-       pressed). That depended on the var()-spliced head/`scale`/tail filter — which never
-       PARSED as a `backdrop-filter` (three tokens: `url("…") <n> url("…")`), so the lens
-       rendered `none` and the swell animated a value that reached NO filter. A CSS url()
-       string token cannot carry a substituted `var()` (the engine does not re-tokenise
-       inside a string), so a dynamic per-instance `scale` is structurally impossible in a
-       single self-contained data-URI — and the single token is mandatory for both parse
-       validity and bundler url()-rewrite safety. The `scale` is now BAKED at the §10
-       default (28); the resting lens read is PRESERVED (and now actually renders), the
-       press-depth animation is the deliberate tradeoff. The press squish + gleam lift on
-       the SAME `--glass-btn-press-t` drive (material gleam, above) carry the press read. */
-
-    /* ── BE.W-CLEAR-VARIANT — the Apple-Clear `surface="clear"` decoration + the
-       MANDATORY legibility scrim ──────────────────────────────────────────────────
-       The 4th surface-axis member (`useSurfaceAxis.ts` maps `clear → glass-clear`).
-       A `surface="clear"` surface paints the maximally-translucent `--glass-bg-clear`
-       (0.58 — the clearest rung the library ships, the album grid bleeds through) AND
-       a MANDATORY legibility scrim IN THE SAME SEAM — a `.glass-clear` cannot exist
-       without it (the Apple Clear contract: near-transparent → the text needs a scrim
-       floor). The scrim DIMS THE BACKDROP (`color-mix(in srgb, var(--background) N%,
-       transparent)` — the A5-1 modal-scrim idiom, painted BEHIND the translucent fill
-       within the box, see the two-layer-background note below), DISTINCT from the W55
-       `--glass-tint-*` PLATE-darken axis (the two legibility axes stay disjoint: the
-       scrim dims the backdrop, the W55 tint darkens the plate). The scrim strength
-       DERIVES from the sampled
-       `--glass-backdrop-luma` (useGlassBackdropLuminance's existing write) so it dims
-       MORE over a bright album grid (luma→1) and relaxes over a dark one (luma→0) —
-       the dynamic legibility that betters Apple's fixed scrim. The `0.5` fallback is
-       the safe mid-scrim when no observer is wired. The plate fill rides the SAME
-       oklab-tint seam so the W55 darken reaches it; the see-through frost is the
-       cross-engine FLOOR (pure opacity + backdrop-filter, no `url()` — Safari paints
-       it via the build-time -webkit- prefix pass). The scrim is a STATIC paint (no
-       layout, no animation — `proof:no-layout-animation` GREEN by construction).
-
-       THE SCRIM IS A SECOND BACKGROUND LAYER, NOT A PSEUDO. The glass family already
-       claims BOTH pseudos on every base rung — `::before` (the moving specular core)
-       AND `::after` (the grain overlay, ladder.css). `surface="clear"` composes ON a
-       base tier (`glass-floating glass-clear`), so its `::before`/`::after` are taken;
-       a scrim pseudo would CLOBBER the specular or grain. The mandatory scrim is
-       therefore the FIRST of two comma-separated `background` LAYERS — painted FRONT
-       (the translucent glass fill) over BACK (the `--background` dim) within the box,
-       so the dim sits between the backdrop-filtered backdrop and the content (a child
-       paints above both). The fill stays translucent so the backdrop still reads
-       THROUGH the dim — see-through AND legible, one element, no pseudo collision. */
-    [data-surface="clear"],
-    .glass-clear {
-        /* The dynamic scrim strength — DERIVED from the sampled backdrop luma
-           (dims MORE over a bright grid). `0.5` is the safe mid-scrim fallback. */
-        --glass-clear-scrim-strength: calc(
-            var(--glass-backdrop-luma, 0.5) * 40%
-        );
-        background:
-            color-mix(
-                in oklab,
-                var(--glass-bg-clear),
-                var(--glass-tint-source) var(--glass-tint-strength)
-            ),
-            color-mix(
-                in srgb,
-                var(--background) var(--glass-clear-scrim-strength),
-                transparent
-            );
-        backdrop-filter: var(--glass-blur-floating);
-        position: relative;
-    }
-
-}
+@layer components { .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card, .glass-specular-track, .dock-icon-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger { position: relative; } .glass-wash, .glass-quiet, .glass-resting, .glass-card, .glass-btn { contain: paint; } .glass-material::before, .glass-wash::before, .glass-quiet::before, .glass-resting::before, .glass-floating::before, .glass-overlay::before, .glass-card::before, .glass-specular-track::before, .dock-icon-button::before, .dock-tab-button::before, .dock-select-trigger::before, .dock-dropdown-trigger::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; --specular-x: var(--mouse-x, 50%); --specular-y: var(--mouse-y, 50%); --specular-intensity: max( var(--glass-specular-intensity-rest, 0), calc(var(--glass-specular-intensity-active, 0.16) * var(--glass-btn-press-t, 0)) ); --glass-specular-core: color-mix( in oklab, 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( from var(--specular-angle, 0deg) at 50% 50%, transparent 0deg, color-mix(in srgb, var(--glass-specular-core) 55%, transparent) 18deg, transparent 60deg, transparent 360deg ), radial-gradient( circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%), color-mix(in srgb, var(--glass-specular-core) 50%, transparent) 0%, transparent 70%, transparent 100% ); 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); opacity: max( var(--specular-intensity, 0), var(--glass-specular-rest-hairline, 0.07) ); mask-image: radial-gradient( circle closest-side at 50% 50%, transparent calc(100% - var(--glass-edge-glint-band, 22%)), black calc(100% - calc(var(--glass-edge-glint-band, 22%) * 0.5)), black 100% ), radial-gradient( circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%), black 0%, black 60%, transparent 100% ); mix-blend-mode: plus-lighter; } .glass-specular-track::before, .glass-material:hover::before, .glass-material:active::before, .glass-wash:hover::before, .glass-wash:active::before, .glass-quiet:hover::before, .glass-quiet:active::before, .glass-resting:hover::before, .glass-resting:active::before, .glass-floating:hover::before, .glass-floating:active::before, .glass-overlay:hover::before, .glass-overlay:active::before, .glass-card:hover::before, .glass-card:active::before, .dock-icon-button::before, .dock-tab-button::before, .dock-select-trigger::before, .dock-dropdown-trigger::before { transition: --specular-x var(--duration-fast, 150ms) var(--ease-standard, ease-out), --specular-y var(--duration-fast, 150ms) var(--ease-standard, ease-out), opacity var(--duration-normal, 240ms) var(--ease-standard, ease-out); } .dark .glass-material::before, .dark .glass-wash::before, .dark .glass-quiet::before, .dark .glass-resting::before, .dark .glass-floating::before, .dark .glass-overlay::before, .dark .glass-card::before, .dark .glass-specular-track::before, .dark .dock-icon-button::before, .dark .dock-tab-button::before, .dark .dock-select-trigger::before, .dark .dock-dropdown-trigger::before { --specular-intensity: max( var(--glass-specular-intensity-rest, 0), calc(var(--glass-specular-intensity-active, 0.16) * var(--glass-btn-press-t, 0)) ); } .glass-material:hover::before, .glass-wash:hover::before, .glass-quiet:hover::before, .glass-resting:hover::before, .glass-floating:hover::before, .glass-overlay:hover::before, .glass-card:hover::before, .glass-specular-track:hover::before, .dock-icon-button:hover::before, .dock-tab-button:hover::before, .dock-select-trigger:hover::before, .dock-dropdown-trigger:hover::before { --specular-intensity: var(--glass-specular-intensity-hover, 0.1); } .glass-material:active::before, .glass-wash:active::before, .glass-quiet:active::before, .glass-resting:active::before, .glass-floating:active::before, .glass-overlay:active::before, .glass-card:active::before, .glass-specular-track:active::before, .dock-icon-button:active::before, .dock-tab-button:active::before, .dock-select-trigger:active::before, .dock-dropdown-trigger:active::before { --specular-intensity: var(--glass-specular-intensity-active, 0.16); } :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); } :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; } [data-surface="clear"], .glass-clear { --glass-clear-scrim-floor: 12%; --glass-clear-scrim-ramp: 28%; --glass-clear-scrim-strength: calc( var(--glass-clear-scrim-floor) + var(--glass-backdrop-luma) * var(--glass-clear-scrim-ramp) ); background: color-mix( in oklab, var(--glass-bg-clear), var(--glass-tint-source) var(--glass-tint-strength) ), color-mix( in srgb, var(--background) var(--glass-clear-scrim-strength), transparent ); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); position: relative; } }