@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/glass/material.css

@@ -1,301 +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. */
-
-    /* (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. */
-
-}
+@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); } .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); } [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 ); backdrop-filter: var(--glass-blur-floating); position: relative; } }

package/dist/styles/glass/progress-rail.css

@@ -1,78 +1 @@
-/* glass/progress-rail.css
-   The @utility glass-progress-rail — restyles <Progress variant=default> into the deck-position rail. A @utility (not @layer components) so it outranks the variant's baked h-4/rounded-pill utilities.
-   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. */
-/* ── Deck-position rail (AW.W16 · AX.W24) ───────────────────────────────────
-   A Tailwind `@utility` that RESTYLES the shipped `<Progress variant="default">`
-   (the reka-ui ProgressRoot track + its indicator child) into the thin
-   bottom-of-deck position rail. It composes the EXISTING fill — it does NOT
-   re-author a second track/range mechanic. Every visual axis is a
-   `--progress-rail-*` token, so a consumer/dark-flip re-tints with zero library
-   edit (`:root { --progress-rail-fill: … }`). The viewport-pinned chrome
-   (`position: fixed`, `env(safe-area-inset-bottom)`, the z-index) is CONSUMER-
-   supplied — this recipe owns only the LOOK.
-
-   AX.W24 — WHY `@utility`, not `@layer components`. The rail RESTYLES the default
-   Progress: it must override the `h-4` height + `rounded-pill` radius utilities the
-   variant bakes. Those utilities live in `@layer utilities`, which ALWAYS outranks
-   `@layer components` regardless of source order, so the prior `@layer components`
-   recipe's `height: 3px` was a silent no-op (the rail painted as a 16px bar). An
-   `@utility` lands the recipe IN `@layer utilities` alongside `h-4`, where a single-
-   class selector wins the geometry by source order — the idiomatic Tailwind-v4 way
-   to author a restyle-class that out-ranks base utilities (the `btn-audacious` /
-   `cartoon-surface` pattern).
-
-   The COLOUR fix is the SEPARATE token-read-at-source path (NOT a layer-juggle):
-   `ProgressDefault` reads `--progress-fill`/`--progress-track` and dropped its
-   `bg-secondary`/`bg-primary` utilities, so this recipe FEEDS those tokens rather
-   than fighting a utility colour. The `--progress-fill` set on the rail root cascades
-   to the indicator child (a CSS custom property inherits), so the indicator reads the
-   override hue. */
-@utility glass-progress-rail {
-    /* The track hairline + zero radius — the rail reads as a thin square sliver, not
-       the variant's 16px `rounded-pill` bar. A single-class @utility ties `h-4`/
-       `rounded-pill` on SPECIFICITY (both 0,1,0) and Tailwind's utility sort can emit
-       `h-4` later, so the bare tie loses. The doubled-class self-reference (`&&` →
-       `.glass-progress-rail.glass-progress-rail`, specificity 0,2,0) wins the geometry
-       DETERMINISTICALLY over the base utilities regardless of emit order — the precise,
-       contained way to out-rank a base utility without `!important`. */
-    && {
-        height: var(--progress-rail-h, 3px);
-        border-radius: 0;
-    }
-    /* Feed the token-read default variant — these route the consumer's
-       `--progress-rail-*` axes into the `--progress-fill`/`--progress-track` tokens
-       the variant reads at source (the cascade-correct colour path). */
-    --progress-track: var(
-        --progress-rail-track,
-        color-mix(in srgb, var(--foreground) 8%, transparent)
-    );
-    --progress-fill: var(--progress-rail-fill, var(--primary));
-
-    /* The fill — the shipped ProgressIndicator child. The indicator paints the
-       inherited `--progress-fill`; the leading-edge glow is re-authored (AX.W24 F2)
-       as a TRAILING right-edge INSET box-shadow that lives INSIDE the indicator's
-       own box. The prior `4px 0 8px` OUTSET rightward shadow extended PAST the fill
-       boundary into the ProgressRoot's load-bearing `overflow-hidden` clip and was
-       eaten — invisible at every value. An `inset` shadow offset leftward
-       (`inset -Npx 0 …`) brightens just inside the indicator's right (leading) edge
-       — the moving position head — and never crosses the fill boundary, so the clip
-       cannot eat it (the clip is never lifted; that would re-break the default
-       Progress look for every other consumer). `box-shadow` is a separate property
-       from `background`, so it composes cleanly over the token-read fill. */
-    && > * {
-        border-radius: 0;
-        box-shadow:
-            inset
-            calc(-1 * var(--progress-rail-glow-x, 4px))
-            0
-            var(--progress-rail-glow-blur, 8px)
-            calc(-1 * var(--progress-rail-glow-spread, 2px))
-            color-mix(
-                in srgb,
-                hsl(0 0% 100%) var(--progress-rail-glow-strength, 55%),
-                transparent
-            );
-    }
-}
+@utility glass-progress-rail { && { height: var(--progress-rail-h, 3px); border-radius: 0; } --progress-track: var( --progress-rail-track, color-mix(in srgb, var(--foreground) 8%, transparent) ); --progress-fill: var(--progress-rail-fill, var(--primary)); && > * { border-radius: 0; box-shadow: inset calc(-1 * var(--progress-rail-glow-x, 4px)) 0 var(--progress-rail-glow-blur, 8px) calc(-1 * var(--progress-rail-glow-spread, 2px)) color-mix( in srgb, hsl(0 0% 100%) var(--progress-rail-glow-strength, 55%), transparent ); } }

package/dist/styles/glass/reveal.css

@@ -1,136 +1 @@
-/* glass/reveal.css
-   BB.W-LIQUID-REVEAL — the `.glass-reveal` LIQUID-ENTER recipe: the spring-clocked,
-   coupled-channel top-layer open that REPLACES `popover-animate`'s fixed-bezier
-   zoom-95 (clean break, no alias). The zero-JS floor the reka portaled overlays
-   compose (they are not native top-layer, so they cannot ride `@starting-style`;
-   `.glass-reveal` is the data-state form). The `useLiquidReveal` JS leaf is the
-   source-rect REFINEMENT (the dialog-from-button / dock-from-pill bloom); this CSS
-   recipe is the everywhere floor.
-   @import-ed by glass.css in cascade order, in its own @layer components
-   (isomorphic to the monolith). See docs/precepts/design-idioms.md §cohesion-aware
-   partials. */
-
-/* ── THE LIQUID ENTER (the iOS-27 bloom-from-anchor) ──────────────────────────
- *
- * Three COUPLED channels, the SPATIAL/EFFECTS split (the Material-3 / §6 /
- * W-MOTION-CANON doctrine):
- *
- *   (a) SCALE (the bloom — SPATIAL) rides `--spring-snappy` + its OWN settle clock
- *       `--spring-snappy-duration` (the W-GLASS-CAL Unit 3 per-spring clock, NOT the
- *       generic `--duration-normal` that re-timed every spring to one wall clock).
- *       The overshoot interior of the spring `linear()` gives the canonical iOS
- *       arrival. `transform-origin` anchors at the popper edge (`--reka-popper-
- *       transform-origin`) so the surface blooms FROM its anchor, not center.
- *   (b) OPACITY (the fade — EFFECTS) rides `--ease-out` (NO overshoot — a fade must
- *       not bounce), coupled so scale+fade read as ONE continuous coalescing layer.
- *   (c) BLUR-SETTLE (the iOS "light-bending modulation" decongest — EFFECTS)
- *       `filter: blur(--glass-reveal-blur)` → `blur(0)`, on the SAME spring clock as
- *       the scale so the surface clarifies AS it blooms. The decongest rides the
- *       surface's OWN pixels (`filter`) NOT the backdrop (`backdrop-filter`), so it
- *       does NOT clobber the resting `glass-floating` tier plate blur the overlay
- *       carries at rest (a `backdrop-filter: blur(0)` open value would erase the
- *       glass). A `filter` radius interp is COMPOSITOR-safe (never a layout property
- *       — the proof:no-layout-animation floor).
- *
- * Uses the `scale:` / `translate:` LONGHANDS (not `transform:`), so it composes with
- * any identity-base transform and mints no stacking context (the `.glass-top-layer`
- * `scale:` discipline). NEVER animates a layout property (the zoom is `scale`, the
- * side-slide is `translate` — the directional slide-in `popover-animate` +
- * `slide-in-from-side` used to carry, now folded onto the compositor `translate` leg).
- */
-
-@layer components {
-    .glass-reveal {
-        /* The one public start knob (the decongest radius). The spatial/effects
-           clocks read the shared spring tokens (read-only — the W-GLASS-CAL fence). */
-        --glass-reveal-blur: 4px;
-        --glass-reveal-slide: 0.5rem;
-        transform-origin: var(--reka-popper-transform-origin, center);
-        /* The coupled transition list — the SPATIAL legs (scale/translate) on the
-           snappy spring's OWN settle clock, the EFFECTS legs (opacity/filter blur-
-           settle) on the no-overshoot ease-out. ONE coherent glide. The blur rides
-           `filter` (the surface's own pixels) NOT `backdrop-filter` (which would
-           clobber the resting glass-floating plate blur). */
-        transition-property: scale, translate, opacity, filter, display, overlay;
-        transition-duration: var(--spring-snappy-duration), var(--spring-snappy-duration),
-            var(--spring-snappy-duration), var(--spring-snappy-duration),
-            var(--spring-snappy-duration), var(--spring-snappy-duration);
-        transition-timing-function: var(--spring-snappy), var(--spring-snappy),
-            var(--ease-out), var(--ease-out), linear, linear;
-        transition-behavior: allow-discrete;
-    }
-
-    /* OPEN — the settled, bloomed-in state (the spring-clocked scale/fade/blur-settle
-       interpolates FROM the closed values). `filter: blur(0)` clarifies the surface;
-       the resting `glass-floating` backdrop-filter is untouched. The `translate` leg
-       is set ONLY by the `data-side` variants below (a side-anchored popover slides
-       from its edge) — the BASE never writes `translate`, so a center-anchored Dialog
-       keeping its `-translate-x-1/2 -translate-y-1/2` centering is NEVER clobbered. */
-    .glass-reveal[data-state="open"] {
-        scale: 1;
-        opacity: 1;
-        filter: blur(0);
-    }
-
-    /* CLOSED — both the resting CLOSED snapshot AND the EXIT leg. The exit reads
-       `--ease-out` (a bezier, NO overshoot — a closing surface must never overshoot
-       past gone, the §6/W-MOTION-CANON P2 doctrine); NO `--spring-*` token on the
-       exit. The exit is faster + un-sprung — the surface recedes cleanly. */
-    .glass-reveal[data-state="closed"] {
-        scale: var(--glass-reveal-enter-scale, 0.95);
-        opacity: 0;
-        filter: blur(var(--glass-reveal-blur));
-        transition-timing-function: var(--ease-out);
-        transition-duration: var(--duration-fast);
-    }
-
-    /* The directional slide-in — the compositor `translate` leg keyed off the
-       popper's `data-side` (folds the retired `slide-in-from-side` `@utility`'s
-       directional entry onto the compositor channel; the panel enters from outside
-       the anchor's edge). On the SAME snappy spring + clock as the scale. ONLY a
-       side-anchored popover (with `data-side`) sets `translate`; the open settled
-       value is `0 0` (per side, so it slides home from the edge). A center-anchored
-       Dialog has no `data-side` and is never reached here. */
-    .glass-reveal[data-side="top"][data-state="open"],
-    .glass-reveal[data-side="bottom"][data-state="open"],
-    .glass-reveal[data-side="left"][data-state="open"],
-    .glass-reveal[data-side="right"][data-state="open"] {
-        translate: 0 0;
-    }
-    .glass-reveal[data-state="closed"][data-side="top"] {
-        translate: 0 var(--glass-reveal-slide);
-    }
-    .glass-reveal[data-state="closed"][data-side="bottom"] {
-        translate: 0 calc(-1 * var(--glass-reveal-slide));
-    }
-    .glass-reveal[data-state="closed"][data-side="left"] {
-        translate: var(--glass-reveal-slide) 0;
-    }
-    .glass-reveal[data-state="closed"][data-side="right"] {
-        translate: calc(-1 * var(--glass-reveal-slide)) 0;
-    }
-}
-
-/* ── REDUCED-MOTION CARVE (the vestibular floor — WCAG 2.3.3) ──────────────────
- * Under `prefers-reduced-motion: reduce` the reveal SNAPS the spatial channels to
- * their endpoints (scale → none, translate → none) and the blur-settle to none —
- * ZERO transform/blur frames. The OPACITY fade SURVIVES (opacity is not a vestibular
- * trigger; the surface fades, never flies, never disappears). The fade rides the
- * short `--duration-fast` clock (the `.glass-top-layer` PRM precedent). */
-@media (prefers-reduced-motion: reduce) {
-    .glass-reveal {
-        scale: none;
-        translate: none;
-        /* The decongest snaps to clear (`filter: blur(0)`); the resting
-           `glass-floating` backdrop-filter plate blur is UNTOUCHED. */
-        filter: blur(0);
-        transition-property: opacity, display, overlay;
-        transition-duration: var(--duration-fast);
-        transition-timing-function: var(--ease-out);
-    }
-    .glass-reveal[data-state="closed"] {
-        scale: none;
-        translate: none;
-        filter: blur(0);
-    }
-}
+@layer components { .glass-reveal { --reveal-spring: var(--enter-overlay-spring); --reveal-clock: var(--enter-overlay-clock); --reveal-exit-clock: var(--exit-overlay-duration); --reveal-exit-curve: var(--exit-curve); --glass-reveal-enter-scale: var(--enter-overlay-scale); --glass-reveal-blur: var(--enter-overlay-blur); --glass-reveal-slide: var(--enter-overlay-slide); --lq-stretch-x: 1.06; --lq-stretch-y: 0.945; transform-origin: var(--reka-popper-transform-origin, center); transition-property: scale, translate, opacity, filter, display, overlay; transition-duration: var(--reveal-clock), var(--reveal-clock), var(--reveal-clock), var(--reveal-clock), var(--reveal-clock), var(--reveal-clock); transition-timing-function: var(--reveal-spring), var(--reveal-spring), var(--ease-out), var(--ease-out), linear, linear; transition-behavior: allow-discrete; } .glass-reveal[data-reveal="overlay"] { --reveal-spring: var(--enter-overlay-spring); --reveal-clock: var(--enter-overlay-clock); --reveal-exit-clock: var(--exit-overlay-duration); --glass-reveal-enter-scale: var(--enter-overlay-scale); --glass-reveal-blur: var(--enter-overlay-blur); --glass-reveal-slide: var(--enter-overlay-slide); } .glass-reveal[data-reveal="menu"] { --reveal-spring: var(--enter-menu-spring); --reveal-clock: var(--enter-menu-clock); --reveal-exit-clock: var(--exit-overlay-duration); --glass-reveal-enter-scale: var(--enter-menu-scale); --glass-reveal-blur: var(--enter-menu-blur); --glass-reveal-slide: var(--enter-menu-slide); } .glass-reveal[data-reveal="tooltip"] { --reveal-spring: var(--enter-tooltip-spring); --reveal-clock: var(--enter-tooltip-clock); --reveal-exit-clock: var(--exit-overlay-duration); --glass-reveal-enter-scale: var(--enter-tooltip-scale); --glass-reveal-blur: var(--enter-tooltip-blur); --glass-reveal-slide: var(--enter-tooltip-slide); } .glass-reveal[data-reveal="transient"] { --reveal-spring: var(--enter-transient-spring); --reveal-clock: var(--enter-transient-clock); --reveal-exit-clock: var(--exit-transient-duration); --glass-reveal-enter-scale: var(--enter-transient-scale); --glass-reveal-blur: var(--enter-transient-blur); --glass-reveal-slide: var(--enter-transient-slide); } .glass-reveal[data-state="open"] { scale: 1 1; opacity: 1; filter: blur(0); @starting-style { scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06)) calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945)); opacity: 0; filter: blur(var(--glass-reveal-blur)); } } .glass-reveal[data-state="closed"] { scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06)) calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945)); opacity: 0; filter: blur(var(--glass-reveal-blur)); animation: glass-reveal-out var(--reveal-exit-clock) var(--reveal-exit-curve) both; transition-property: translate, display, overlay; transition-timing-function: var(--reveal-exit-curve); transition-duration: var(--reveal-exit-clock); } .glass-reveal[data-side="top"][data-state="open"] { translate: 0 0; @starting-style { translate: 0 var(--glass-reveal-slide); } } .glass-reveal[data-side="bottom"][data-state="open"] { translate: 0 0; @starting-style { translate: 0 calc(-1 * var(--glass-reveal-slide)); } } .glass-reveal[data-side="left"][data-state="open"] { translate: 0 0; @starting-style { translate: var(--glass-reveal-slide) 0; } } .glass-reveal[data-side="right"][data-state="open"] { translate: 0 0; @starting-style { translate: calc(-1 * var(--glass-reveal-slide)) 0; } } .glass-reveal[data-state="closed"][data-side="top"] { translate: 0 var(--glass-reveal-slide); } .glass-reveal[data-state="closed"][data-side="bottom"] { translate: 0 calc(-1 * var(--glass-reveal-slide)); } .glass-reveal[data-state="closed"][data-side="left"] { translate: var(--glass-reveal-slide) 0; } .glass-reveal[data-state="closed"][data-side="right"] { translate: calc(-1 * var(--glass-reveal-slide)) 0; } .glass-reveal[data-motion="reduced"] { --glass-reveal-enter-scale: 0.97; --glass-reveal-blur: 0px; } .glass-reveal[data-motion="off"] { scale: none; translate: none; filter: blur(0); transition-property: opacity, display, overlay; transition-duration: var(--reveal-exit-clock); transition-timing-function: var(--reveal-exit-curve); } .glass-reveal[data-motion="off"][data-state="closed"] { scale: none; translate: none; filter: blur(0); animation-name: glass-reveal-out-reduced; } } @media (prefers-reduced-motion: reduce) { .glass-reveal { scale: none; translate: none; filter: blur(0); transition-property: opacity, display, overlay; transition-duration: var(--duration-fast); transition-timing-function: var(--ease-out); } .glass-reveal[data-state="closed"] { scale: none; translate: none; filter: blur(0); animation-name: glass-reveal-out-reduced; } }

package/dist/styles/glass/rim.css

@@ -1,110 +1 @@
-/* glass/rim.css
-   The BB.W-GLASS-ACCENT per-INSTANCE chromatic rim/accent group (the rim-ink +
-   --glass-material-rim ring + the per-rung --glass-border-accent border, light +
-   dark arms).
-   Carved from glass/ladder.css at BB.W-CARVE4 to hold the no-god-module bound (the
-   five-rung surface ladder + the W55 bright-bucket @container + the calm-tier re-point
-   + the contrast-color ink-flip + the opaque escape + the under-shadow modifier + the
-   grain ::after stay in ladder.css). @import-ed by glass.css in cascade order
-   IMMEDIATELY AFTER ladder.css — the SAME @layer components; the rim/accent group is
-   the SOLE writer of --glass-material-rim/--glass-border-accent (the rungs read those
-   + --glass-rim-ink as custom properties resolved at use-time on the SAME elements, so
-   the relocation is cascade-order-invariant), and the W55 bright-bucket is DELIBERATELY
-   kept in ladder.css (relocating it past the contrast-color @supports block would invert
-   their same-specificity source-order tie on supporting engines — a behaviour change the
-   byte-isomorphism bound forbids). The dist is byte-isomorphic. */
-@layer components {
-    /* (b) The unified rim — `--glass-edge-light` full-perimeter inset ring on
-       EVERY material surface (AW.W22). Previously the rim was wired only into
-       the floating/overlay tiers' box-shadow stack; promoting it to the material
-       group makes wash/quiet/resting/card/dock-control all carry the same
-       silhouette catch-light from ONE token. The rim is its OWN `box-shadow`
-       declaration on the material group so it composes uniformly without
-       perturbing each tier's elevation recipe (the floating/overlay tiers drop
-       their now-redundant inline `--glass-edge-light` layer below). The alpha is
-       deliberately low so the rim never eats AA legibility over a busy
-       backdrop. */
-    /* ── BB.W-GLASS-ACCENT — the per-INSTANCE chromatic-RIM tint ───────────────
-       The THIRD disjoint glass axis (LEVEL · TINT · ACCENT). The rim is TWO
-       resolved things — the `--glass-material-rim` inset RING (= `--glass-edge-
-       light`, an inset box-shadow) and the per-rung `--glass-border-*` BORDER —
-       and BOTH must carry the accent hue so the rim reads as ONE accent silhouette,
-       not a half-tinted edge.
-
-       The composition is `color-mix(in oklab, <current rim color>, var(--glass-
-       accent) var(--glass-accent-strength))` — the PERCEPTUAL oklab mix the W55
-       glass-tint seam + the `<IconChip>` chip already speak (NOT in-srgb — the
-       in-srgb fence is the `--surface-tint-*` brand-overlay family, a SEPARATE
-       axis this never touches). At the resting `--glass-accent-strength: 0%` (the
-       `@property` default) + `--glass-accent: transparent` (the neutral identity)
-       the mix resolves byte-identical to today's rim (the W2 no-op floor).
-
-       The RING: a box-shadow value cannot be `color-mix`-ed whole, so the rim ring
-       is REBUILT here as `inset 0 0 0 0.75px <mixed-color>` — the SAME 0.75px inset
-       geometry the `--glass-edge-light` token paints (AV.W15 M3), only its COLOR
-       stop composing the accent. At 0% strength the color resolves to the
-       `--glass-edge-light` base ink (`hsl(0 0% 100% / 0.18)` light / 0.22 dark —
-       read via `--glass-rim-ink`) so the ring is byte-identical to
-       `var(--glass-edge-light)`. The `.dark` arm re-points `--glass-rim-ink` to the
-       dark base so the dark rim composes off `--glass-edge-light-dark`.
-
-       The BORDER: each rung's `border-color` reads `--glass-border-accent`, which
-       composes the accent onto the rung's own `--glass-border-*` ink. The rung
-       borders are re-pointed at their declarations (the `border: 1px solid
-       var(--glass-border-accent)`) so ONE derived token carries the accent across
-       the band; `--glass-border-accent` reads the per-rung `--glass-border-rung`
-       the rung sets locally, mixed with the accent.
-
-       This axis NEVER touches the plate BACKGROUND (the W55 `--glass-tint-source`
-       cohort) — the accent is the rim+glint chromatic DECORATION, not the
-       whole-plate legibility darken (the distinct-axis-not-fork fence). */
-    .glass-material,
-    .glass-wash,
-    .glass-quiet,
-    .glass-resting,
-    .glass-floating,
-    .glass-overlay,
-    .glass-card,
-    .glass-specular-track,
-    .dock-icon-button {
-        /* BC.W-BLACK-BAR D2 — the rim ring is now DIRECTIONAL: the top catch-light
-           (`--glass-rim-top`, glass-fx.css) carries the white-α ink the old
-           omnidirectional ring carried (0.30 light / 0.40 dark — the dark arm
-           re-points it via dark-arm.css), and the bottom under-shadow
-           (`--glass-rim-bottom`) grounds the plate. The accent (BB.W-GLASS-ACCENT)
-           still mixes ONTO the top catch-light ink so the chromatic rim reads on the
-           lit edge; at 0% strength the mix resolves byte-identical to the bare
-           `--glass-rim-top`. `--glass-rim-ink` is the resolved top-ink stop (kept as
-           the accent-compose seam — the `.dark` arm below re-points it). */
-        --glass-rim-ink: hsl(0 0% 100% / 0.30);
-        --glass-material-rim:
-            inset 0 1px 0
-                color-mix(in oklab, var(--glass-rim-ink), var(--glass-accent) var(--glass-accent-strength)),
-            var(--glass-rim-bottom);
-        /* the per-rung border ink, accent-composed. `--glass-border-rung` is set by
-           each rung at its own declaration (it reads the rung's `--glass-border-*`
-           token); the accent mixes onto it so the BORDER half of the rim carries the
-           same hue as the RING. At 0% strength === the un-mixed rung ink. */
-        --glass-border-accent: color-mix(
-            in oklab,
-            var(--glass-border-rung, var(--glass-border)),
-            var(--glass-accent) var(--glass-accent-strength)
-        );
-    }
-    .dark .glass-material,
-    .dark .glass-wash,
-    .dark .glass-quiet,
-    .dark .glass-resting,
-    .dark .glass-floating,
-    .dark .glass-overlay,
-    .dark .glass-card,
-    .dark .glass-specular-track,
-    .dark .dock-icon-button {
-        /* BC.W-BLACK-BAR D2 — the dark top catch-light ink is the lifted 0.40 stop
-           (mirroring the dark `--glass-rim-top`, dark-arm.css) so the accent composes
-           off the dark silhouette device (W-DARK-MATERIAL): dark glass needs a
-           brighter rim to read over the deep canvas. */
-        --glass-rim-ink: hsl(0 0% 100% / 0.40);
-    }
-
-}
+@layer components { .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card, .glass-specular-track, .dock-icon-button { --glass-rim-ink: hsl(0 0% 100% / 0.30); --glass-material-rim: inset 0 var(--glass-key-lit-y) 0 color-mix(in oklab, var(--glass-rim-ink), var(--glass-accent) var(--glass-accent-strength)), inset var(--glass-key-lit-x) 0 0 color-mix(in oklab, hsl(0 0% 100% / 0.18), var(--glass-accent) var(--glass-accent-strength)), var(--glass-rim-bottom); --glass-border-accent: color-mix( in oklab, var(--glass-border-rung, var(--glass-border)), var(--glass-accent) var(--glass-accent-strength) ); } .dark .glass-material, .dark .glass-wash, .dark .glass-quiet, .dark .glass-resting, .dark .glass-floating, .dark .glass-overlay, .dark .glass-card, .dark .glass-specular-track, .dark .dock-icon-button { --glass-rim-ink: hsl(0 0% 100% / 0.40); } }