@mkbabb/glass-ui 4.2.0 → 5.0.0

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,156 +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;
-        /* The materialize squish — the surface blooms FROM 0.88 (a clear squish-grow,
-           the Control-Center round-toggle reference), not the near-no-op 0.95. The
-           authority lives here; the closed/exit leg reads it with a 0.88 fallback.
-           BD.W-ANIM-IOS27-TUNE */
-        --glass-reveal-enter-scale: 0.88;
-        /* The SQUISH channel — the same volume-preserving born-wide+flat squish the
-           universal `.liquid-enter` mount recipe speaks (ONE grammar, no fork). The
-           closed leg rides it on the `scale:` LONGHAND (vol-preserving sx·sy ≈ 1),
-           settling to `1 1` at open; the bloom-from-small grace is the coupled
-           scale-down (--glass-reveal-enter-scale) × this squish, never a separate
-           transform: shorthand (which would clobber a centering transform). */
-        --lq-stretch-x: 1.06;
-        --lq-stretch-y: 0.945;
-        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 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"] {
-        /* Born wide+flat AND bloom-from-small: the SQUISH (--lq-stretch-x/-y,
-           vol-preserving) couples with the bloom-from-0.88 on the SAME `scale:`
-           LONGHAND (two factors, ONE longhand — never a second transform: shorthand
-           that would clobber a Dialog's centering translate). The deform stays
-           anisotropic (the long axis swells AS it blooms, the short pinches);
-           it settles to `1 1` at open. */
-        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));
-        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,122 +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);
-        /* BD.W-GLASS-KEY-EDGE — the LIT catch is now KEY-DRIVEN: the accent-mixed
-           catch-light rides the key-facing edges (`--glass-key-lit-y` top +
-           `--glass-key-lit-x` side, the upper-right cel key) so the accent reads on
-           the LIT edge that agrees with the cartoon cast's light source — not a flat
-           top-only halo. The side stop carries the same accent-mixed ink at the rim's
-           own 0.18-class weight (via `--glass-rim-ink`-derived mix). The SHADE half is
-           the key-driven `--glass-rim-bottom` two-stop under-shadow. At 0% accent
-           strength the mix resolves byte-compatible to the bare key-driven rim (the W2
-           no-op floor). The moving-specular `::before` catch-light + the grain
-           `::after` are UNTOUCHED (both occupied). */
-        --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);
-        /* 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); } }

package/dist/styles/glass/squircle.css

@@ -1,66 +1 @@
-/* glass/squircle.css
-   The AX.W56 rounded-vs-squircle policy + the @supports (corner-shape: superellipse(2)) squircle coupling onto the overlay-band glass. After the base ladder (overrides it).
-   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. */
-/* ── AX.W56 — the rounded-vs-squircle POLICY (re-homes AW.W23's squircle) ─────
-   Cards, glass buttons, and pills stay ROUND. The earlier AW.W23 block applied
-   `corner-shape: squircle` to `.glass-card`/`.glass-btn`/`.btn-pill`, which
-   inverted the design intent — the superellipse is imperceptible at a 16px card
-   radius or a stadium pill, so the squircle on those surfaces was visual cost
-   without read. The squircle is RE-HOMED onto the one surface where it reads: the
-   big-dock card shell (`dock.css` → `var(--corner-shape-bigdock)` under
-   `@supports (corner-shape: superellipse(2))`). This is a clean break — no alias,
-   no `--corner-shape-card` decl here (it resolves `round`, the default, so a
-   `corner-shape` rule would be a no-op). The `--corner-shape-*` token axis lives
-   in `theme.css`; a consumer who WANTS a squircle card opts in by re-pointing
-   `--corner-shape-card` at `superellipse(var(--corner-k-squircle))`. Do NOT
-   re-add a squircle rule to the card/button/pill surfaces — they are round by
-   policy. */
-
-/* ── AX.W56(R1) + W56b — squircle coupling onto the large-radius glass FAMILY ───
-   W54 makes GLASS the default for the overlay-band surfaces; W56(R1)+W56b couple
-   the SQUIRCLE onto the whole LARGE-RADIUS glass family — Dialog + Sheet content
-   (`.glass-floating.{rounded-dialog,sheet-animate}`), the Configurator/floating
-   PANEL (`.configurator`, `.floating-panel`), and the glass HERO overlay
-   (`.glass-hero`, the thin opt-in utility the page-redesign hero reads). Every one
-   sits AT or ABOVE the ~--radius-xl threshold where the superellipse READS — the
-   same iOS-26 idiom the big-dock card shell carries (the backdrop-filter blur halo
-   + the cartoon under-shadow follow the shape). Each surface reads its OWN
-   tokenized `var(--corner-shape-<surface>)` (theme.css) so it is independently
-   overridable — never a blanket `.glass-floating` rule (data cards + pills stay
-   round by policy; the compound selectors scope to the named surface only). Mirrors
-   the big-dock idiom EXACTLY: an `@supports`-gated ENHANCEMENT (Chrome 139+, no
-   FF/Safari 2026) over the `border-radius` round CONTRACT — the squircle is the
-   better tier, NOT a degraded fallback. The `@supports` condition tests the LITERAL
-   `superellipse(2)` (a `var()` is not evaluable in an `@supports` query) — the same
-   Chrome-139 feature the token resolves to. */
-@layer components {
-    @supports (corner-shape: superellipse(2)) {
-        .glass-floating.rounded-dialog {
-            corner-shape: var(--corner-shape-dialog);
-        }
-        .glass-floating.sheet-animate {
-            corner-shape: var(--corner-shape-sheet);
-        }
-        .configurator,
-        .floating-panel {
-            corner-shape: var(--corner-shape-panel);
-        }
-        .glass-hero {
-            corner-shape: var(--corner-shape-hero);
-        }
-    }
-}
-
-/* ── The glass HERO opt-in utility (W56b fold 7) ────────────────────────────────
-   A thin large-radius editorial glass OVERLAY — distinct from a data Card (which
-   stays round by policy). It is the surface the page-redesign hero (W60) reads;
-   minting it here (with its consumer) keeps the squircle off every `.glass-card`.
-   The corner-shape squircle rides the `@supports` block above; the un-gated
-   `border-radius` here is the cross-engine round CONTRACT. */
-@layer components {
-    .glass-hero {
-        border-radius: var(--radius-2xl);
-    }
-}
+@layer components { @supports (corner-shape: superellipse(2)) { .glass-floating.rounded-dialog { corner-shape: var(--corner-shape-dialog); } .glass-floating.sheet-animate { corner-shape: var(--corner-shape-sheet); } .configurator { corner-shape: var(--corner-shape-panel); } } }

package/dist/styles/glass/surface-axis.css

@@ -1,113 +1 @@
-/* glass/surface-axis.css — the ONE shared {glass·veil·opaque} surface-decoration
-   axis (BA.W-SURFACE-AXIS).
-
-   The house minted `--glass-level` (the opacity knob, AX.W54) and `--glass-tint-*`
-   (the legibility seam, AX.W55) as SHARED inheriting axes, but left the
-   {glass·veil·opaque} surface-DECORATION choice as a per-component one-off
-   (`<Card>` had the only true axis; `<Dialog>` a binary string; everyone else
-   none). This seam factors that choice ONCE — every enrolled surface composes a
-   base glass tier + the `[data-surface]` attribute, and these rules apply the
-   three-rung decoration UNIFORMLY:
-
-     glass   — the resolved tier's plain glass rung (IDENTITY; no rule needed —
-               the bare tier paints).
-     veil    — the borderless/rimless text-legibility plate: the `--glass-bg-quiet`
-               fill + blur with the box border AND rim STRIPPED (the boxed look
-               reads as a dividing line on a text plate). Reads `--glass-bg-quiet`
-               + the W55 `--glass-tint-*` seam through the SAME `--glass-*` ladder,
-               so `--glass-level` / the bright-bucket darken retune it in lockstep
-               with every glass surface — NO veil-local recipe fork.
-     opaque   — the `--glass-level:0` solid-card escape (the `.glass-opaque` rung):
-               solid `--card` + `blur(0)` through the ONE level knob, the tint axis
-               zeroed (a solid plate has no translucent backdrop to darken-over).
-
-   NO second axis: `cartoon` stays a Card-local decoration (it is NOT a
-   {glass·veil·opaque} member — the shared axis is the three-rung MATERIAL
-   decoration; cartoon rides Card's own `surface` superset). The `Surface` union +
-   the `surfaceClass(surface, tier)` resolver are the TS half
-   (`src/components/ui/_shared/useSurfaceAxis.ts`); this file is the CSS half.
-
-   Cascade: `@layer components`, @import-ed AFTER ladder.css so the attr rules
-   (specificity 0-1-0, equal to the `.glass-*` classes) win by source order over
-   the base rung's border/box-shadow. */
-@layer components {
-    /* ── veil — the borderless text-legibility plate ──────────────────────────
-       Composes the SAME deltas as the `veil-surface` @utility (cards.css), keyed
-       off the SAME `--glass-bg-quiet` + `--glass-tint-*` tokens (no recipe fork).
-       Each delta is an overridable `--veil-*` rung so a consumer re-points the
-       plate to any other ladder rung. */
-    [data-surface="veil"] {
-        --veil-bg: color-mix(
-            in oklab,
-            var(--glass-bg-quiet),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-        --veil-blur: var(--glass-blur-quiet);
-        /* The three veil deltas over a bare rung — each overridable. */
-        --veil-border: none;
-        --veil-shadow: none;
-        --veil-feather: none;
-
-        background: var(--veil-bg);
-        backdrop-filter: var(--veil-blur);
-        -webkit-backdrop-filter: var(--veil-blur);
-        border: var(--veil-border);
-        box-shadow: var(--veil-shadow);
-        /* The optional radial feather — a `mask-image` only painted when
-           `--veil-feather` is set to a gradient (default `none` = no mask = a
-           clean rectangle). `mask-image: none` is the identity. */
-        mask-image: var(--veil-feather);
-    }
-
-    /* ── opaque — the solid-card escape ───────────────────────────────────────
-       The level-0 endpoint of the SAME glass machinery — a solid `--card` plate
-       with `blur(0)`. A surface that ALSO carries a base tier keeps its glass
-       edge/rim/under-shadow (a solid plate with a glass edge, not a bare div).
-
-       THE SUBSTITUTION-VS-INHERITANCE TRAP (the recurring AX.W55 / dock-scale
-       class, live-found in the π readback): the `--glass-bg-*` tier tokens bake
-       `var(--glass-level)` at their `:root` DECLARATION (where level=1), so a
-       DESCENDANT element's `--glass-level: 0` does NOT re-resolve the `:root`-baked
-       `--glass-bg-floating` — the plate stayed translucent (α 0.8, NOT solid). The
-       `.glass-opaque` class works only when `--glass-level` is set at `:root` (the
-       cohesion fixture's pattern); a PER-ELEMENT opaque surface (the whole point of
-       `surface="opaque"`) needs the solid plate composed AT THE ELEMENT. So the
-       opaque rung sets the SOLID `--card` background + `blur(0)` DIRECTLY (the
-       level-0 endpoint resolved here, not via the baked token) — AND still flips the
-       `--glass-level: 0` / `--glass-tint-strength: 0%` knobs so a NESTED glass
-       descendant + any consumer reading the level scalar see the opaque register
-       coherently. The adaptive TINT axis is zeroed (a solid plate has no
-       translucent backdrop to darken-over — the bucket-INVARIANT contract). */
-    [data-surface="opaque"] {
-        --glass-level: 0;
-        --glass-tint-strength: 0%;
-        /* The SOLID --card plate composed at the element via the house color-mix
-           idiom (`--card` over transparent at 0% transparent = fully solid --card)
-           — functionally `var(--card)`, expressed as the cohesion-sanctioned mix
-           the token ladder already speaks. */
-        background: color-mix(in srgb, var(--card), transparent 0%);
-        backdrop-filter: none;
-        -webkit-backdrop-filter: none;
-    }
-
-    /* ── .paper-ink-mark — the PAPER ink-hairline MARK register ────────────────
-       (BA.W-SURFACE-AXIS scope 8). The 2px `--foreground` ink mark on a paper
-       surface — NO plate, NO blur, NO glass. This is a MARK register, NOT a
-       `[data-surface]` plate rung: a `[data-surface]` value DECORATES a glass
-       plate (fill + edge + rim); `.paper-ink-mark` is the opposite — a bare ink
-       hairline drawn directly on paper, the math-paper section-rail / underline-
-       tab vocabulary. Recorded here (the surface-decoration seam) co-located with
-       the plate axis but DISTINCT from it — the canon note is in CLAUDE.md.
-
-       ≥2 consumers at birth: (1) the math-paper section rail (the `border-l-[3px]`
-       family composes it for a VERTICAL left-edge ink rail); (2) W-TABS's re-cut
-       underline indicator (a HORIZONTAL 2px ink mark — W-TABS CONSUMES this seam,
-       a shape gap there triumvirates HERE per the DAG §5 seam rule). The register
-       exposes ONE knob (`--paper-ink-mark-weight`, default 2px) + the ink color;
-       the consumer applies the weight on whichever edge/axis it draws (a left
-       `border-inline-start-width` rail, a bottom `block-size` underline). */
-    .paper-ink-mark {
-        --paper-ink-mark-weight: 2px;
-        --paper-ink-mark-color: var(--foreground);
-    }
-}
+@layer components { [data-surface="veil"] { --veil-bg: color-mix( in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength) ); --veil-blur: var(--glass-blur-quiet); --veil-border: none; --veil-shadow: none; --veil-feather: none; background: var(--veil-bg); backdrop-filter: var(--veil-blur); -webkit-backdrop-filter: var(--veil-blur); border: var(--veil-border); box-shadow: var(--veil-shadow); mask-image: var(--veil-feather); } [data-surface="opaque"] { --glass-level: 0; --glass-tint-strength: 0%; background: color-mix(in srgb, var(--card), transparent 0%); backdrop-filter: none; -webkit-backdrop-filter: none; } .paper-ink-mark { --paper-ink-mark-weight: 2px; --paper-ink-mark-color: var(--foreground); } .glass-well { --glass-well-tone: 8%; background: color-mix( in oklab, var(--card), var(--foreground) var(--glass-well-tone) ); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--foreground) 8%, transparent); border-radius: var(--radius-md); } }

package/dist/styles/glass/surfaces-pager.css

@@ -0,0 +1 @@
+@layer components { .glass-pager-ring { display: inline-flex; align-items: center; gap: 0.375rem; padding-inline: 0.625rem; padding-block: 0.3125rem; border-radius: var(--radius-pill); background: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); backdrop-filter: var(--glass-blur-floating); -webkit-backdrop-filter: var(--glass-blur-floating); box-shadow: var(--glass-edge-light), var(--glass-specular), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent); transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .dark .glass-pager-ring { box-shadow: var(--glass-edge-light-dark), var(--glass-specular-dark), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent); } @media (prefers-reduced-transparency: no-preference) { .glass-chromatic { box-shadow: var(--glass-edge-dispersion), var(--glass-material-rim); } } }