@mkbabb/glass-ui 6.0.0 → 8.0.0

package/src/styles/glass/reveal.css

@@ -1,333 +0,0 @@
-/* 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 {
-        /* ── BI.W-REGISTER-TABLE — the register-binding knobs ────────────────────
-           The base binds the `enter-overlay` register (Dialog/Sheet/Popover — the
-           DEFAULT); a `data-reveal="menu|tooltip|transient"` variant below swaps ONLY
-           these knobs, never the recipe BODY. The knobs source tokens/motion-registers.css
-           (which reads the parity-fixed --spring-* clocks — READ-ONLY here, the W-GLASS-CAL
-           fence). THE KEY CORRECTION (PASS-4B): the parity fix, not response-shortening,
-           lands the enter in-band — keep the full settle clock, the curve arrives audacious. */
-        --reveal-spring: var(--enter-overlay-spring);
-        --reveal-clock: var(--enter-overlay-clock);
-        /* The NAMED exit register (M6 — the reveal exit tightens 200ms → 150ms overlay /
-           100ms transient, on the no-overshoot ease-out; its OWN token, not a re-tune of
-           the shared --duration-fast — closing the reveal comment-vs-value drift). */
-        --reveal-exit-clock: var(--exit-overlay-duration);
-        --reveal-exit-curve: var(--exit-curve);
-        /* The materialize channels — the register bundle's scale-from / decongest-blur /
-           edge-slide. The overlay default is scale-from 0.88, blur 6px (the dominant
-           overlay channel, MOTION-LADDER M4), slide 0.5rem. The closed/exit leg +
-           @starting-style read these knobs (with a defensive fallback for a non-supporting
-           engine). BD.W-ANIM-IOS27-TUNE + BI.W-REGISTER-TABLE. */
-        --glass-reveal-enter-scale: var(--enter-overlay-scale);
-        --glass-reveal-blur: var(--enter-overlay-blur);
-        --glass-reveal-slide: var(--enter-overlay-slide);
-        /* 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
-           register 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(--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;
-    }
-
-    /* ── THE REGISTER-BINDING AXIS (BI.W-REGISTER-TABLE) ──────────────────────────
-       `data-reveal="overlay|menu|tooltip|transient"` swaps ONLY the register knobs
-       (spring/clock/scale/blur/slide/exit-clock) — the recipe BODY (@starting-style
-       from-state, data-state legs, coupled channels, PRM carve) stays ONE. The attr is
-       RENAMED off PASS-1's `data-motion` (the shipped BH.W-MOTION-AXIS reduction axis
-       full/reduced/off — the collision is real). Default (no attr) = enter-overlay. */
-    .glass-reveal[data-reveal="overlay"] {
-        /* Explicit restatement of the base default (legibility — a no-op re-point). */
-        --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);
-    }
-    /* enter-menu — dropdown/select/combobox/command (UF-G2 homogeneity, UF-G3 refined). */
-    .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);
-    }
-    /* enter-tooltip — tooltip/hover-card (UF-G4 — NO overshoot, fastest arrival). */
-    .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);
-    }
-    /* enter-transient — Toast + Notification CENTER-SEED bloom (MOTION-LADDER M5). */
-    .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);
-    }
-
-    /* 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);
-        /* THE REAL FROM-STATE (BG.W-OVERLAY-ENTER-PAINT / F5.R1) — reka mounts the
-           portaled Dialog/Sheet/Popover content already `data-state="open"` at first
-           paint, so the `[closed]→[open]` transition had NO prior computed style and
-           the whole enter landed in ONE ~44ms frame (the opacity/blur pop). An
-           `@starting-style` block binds the BEFORE-FIRST-PAINT style of a newly-
-           inserted element REGARDLESS of the data-state timing (the §TOP-LAYER
-           `.glass-top-layer` grammar applied to the data-state recipe), so the enter
-           now interpolates FROM the closed values on the snappy clock (≥6 intermediate
-           frames). The from-state MIRRORS the closed snapshot below exactly — the enter
-           blooms from where the exit recedes to. The transition/timing is inherited
-           from the base `.glass-reveal` rule (snappy SPATIAL, ease-out EFFECTS); the
-           closed rule's fast un-sprung exit clock is NOT reached on enter. Under PRM
-           the base carve drops scale/translate/filter from `transition-property`, so
-           only the opacity from-state animates (fade survives, zero transform frames). */
-        @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));
-        }
-    }
-
-    /* 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. These static values are the EXIT end-state
-           (the `glass-reveal-out` keyframe's `to` MIRRORS them) + the non-supporting-
-           engine fallback. */
-        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));
-        /* THE EXIT IS A KEYFRAME ANIMATION, NOT A TRANSITION (BG.W-OVERLAY-ENTER-PAINT /
-           F5.R1 repair — the paint-judge FAIL: Dialog+Popover exit painted 0 frames).
-           reka-ui `usePresence` gates the portaled-overlay unmount on
-           `getComputedStyle(node).animationName` — it dispatches ANIMATION_OUT + awaits
-           `animationstart`/`animationend` and has NO `transitionend` path, so a
-           transition-only exit is TORN DOWN (~11ms, <1 frame) before it can paint. The
-           Sheet is immune ONLY because its `sheet-animate` (`animate-out`) is a
-           @keyframes animation reka awaits — so the reveal exit rides the SAME kind:
-           `@keyframes glass-reveal-out` (scale 1→squish, opacity 1→0, filter blur(0)→
-           blur — the SAME channels the enter blooms, REVERSED). With `animationName ≠
-           none` AND the enter being a TRANSITION (so the mounted-state animationName is
-           `none` ≠ the closed `glass-reveal-out` → reka's `isAnimating` is true), reka
-           dispatches ANIMATION_OUT and the exit paints its full ≥4-frame recede. The
-           clock is the no-overshoot `--ease-out` on the fast `--duration-fast` (≤150ms).
-           Compositor-only (scale/opacity/filter — the proof:no-layout-animation floor).
-           BI.W-REGISTER-TABLE — the exit rides the NAMED exit register (--reveal-exit-clock
-           = --exit-overlay-duration 150ms default, --exit-transient-duration 100ms on
-           [data-reveal=transient]) on the no-overshoot --reveal-exit-curve (= --ease-out),
-           tightening the prior 200ms --duration-fast (M6). */
-        animation: glass-reveal-out var(--reveal-exit-clock) var(--reveal-exit-curve) both;
-        /* The side-popover `translate` slide-out stays a TRANSITION — a DIFFERENT
-           property, so it coexists with the scale/opacity/filter animation (no cascade
-           fight) and never touches a center Dialog's `-translate-x-1/2 -translate-y-1/2`
-           centering (a Dialog has no `data-side`, so `translate` never changes → no
-           transition runs). scale/opacity/filter are DROPPED from the exit transition
-           list (the animation owns them, so no transition competes with — and per the
-           cascade would override — the keyframe); the ENTER still rides the base rule's
-           full transition-property (unchanged). */
-        transition-property: translate, display, overlay;
-        transition-timing-function: var(--reveal-exit-curve);
-        transition-duration: var(--reveal-exit-clock);
-    }
-
-    /* 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. */
-    /* Each side-anchored open variant seats `translate: 0 0` (slid home) AND carries an
-       `@starting-style` translate from-state at its edge — so the enter SLIDES in from
-       the anchor edge (reka mounts already `open`, so without the from-state the side
-       popover would pop in place). The from-state MIRRORS the matching closed exit-slide
-       below (enter blooms from where the exit recedes to). */
-    .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;
-    }
-
-    /* ── THE `data-motion` REDUCTION AXIS (N6 WIRE — BI.W-TEMPO) ────────────────────
-       `useMotionAxis` (_shared/useMotionAxis.ts) emits `data-motion="reduced"/"off"`
-       from the overlay content SFCs (Dialog + Sheet — ≥2 shipped emitters); at HEAD
-       ZERO CSS consumed it — a DEAD WIRE the NO-MASKING-FALLBACK floor forbids. These
-       arms WIRE the signal (N6 = WIRE, supersedes the SUFFUSION-MAP M4 "excise"). It
-       is DISJOINT from the `data-reveal` REGISTER axis above (two attributes, two
-       concerns): `data-reveal` picks the enter-register BUNDLE (overlay/menu/tooltip/
-       transient); `data-motion` DEGRADES the whole reveal for a motion-sensitive
-       consumer. OS `prefers-reduced-motion` (the @media carve below, unlayered) still
-       WINS where active — PRM ≥ the prop reduction (the useMotionAxis precedence).
-
-       reduced — the JS gesture physics degrade to their CSS floor: a barely-there 0.97
-                 bloom, decongest blur OFF (a calm mild reduction; only the register
-                 knobs swap, so the coupled scale/opacity legs still glide the base
-                 recipe — the prop reduction is gentler than OS-forced PRM). */
-    .glass-reveal[data-motion="reduced"] {
-        --glass-reveal-enter-scale: 0.97;
-        --glass-reveal-blur: 0px;
-    }
-    /* off — motion OFF (the functional open KEPT — meaning never off): fade ONLY, ZERO
-       transform/blur frames (the vestibular floor the PRM carve also lands). Mirrors
-       the reduced-motion carve so the two full reductions read identically. */
-    .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);
-        /* The exit fades ONLY — swap the reka-awaitable fade-only keyframe (a
-           transition-only fade is torn down before it paints; the keyframe keeps the
-           fade PAINTING). Duration/timing/fill inherit from the closed `animation`
-           shorthand — only the name swaps (the PRM-carve precedent). */
-        animation-name: glass-reveal-out-reduced;
-    }
-}
-
-/* ── 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);
-        /* The exit fades ONLY (no transform/blur frames — the vestibular floor). Swap the
-           keyframe for the fade-only reduced variant reka can STILL await (a transition-
-           only fade would be torn down the same way, so the surface would just vanish; the
-           fade-only keyframe keeps the fade PAINTING). The duration/timing/fill inherit
-           from the closed rule's `animation` shorthand — only the name swaps. */
-        animation-name: glass-reveal-out-reduced;
-    }
-}

package/src/styles/glass/rim.css

@@ -1,122 +0,0 @@
-/* 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);
-    }
-
-}

package/src/styles/glass/squircle.css

@@ -1,58 +0,0 @@
-/* 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` rule on the card/button/pill surfaces at all: the CSS
-   `corner-shape` INITIAL VALUE is `round`, so those surfaces are round by DEFAULT.
-   The dead `--corner-shape-card`/`-pill` no-op tokens were SWEPT (BG.W-DEAD-SWEEP);
-   the SQUIRCLE members of the `--corner-shape-*` token axis (bigdock/dialog/sheet/
-   panel/hero) live in `theme.css`. A consumer who WANTS a squircle card mints its
-   own `--corner-shape-card` alias and adds the surface to the @supports block below.
-   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}`) and the Configurator PANEL
-   (`.configurator`). (BI.W-GLASS-DEDUP retired `.floating-panel` + the `.glass-hero`
-   overlay utility — both DELETED clean-break.) 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 {
-            corner-shape: var(--corner-shape-panel);
-        }
-    }
-}
-/* BI.W-GLASS-DEDUP (FAM-9) — `.floating-panel` (its recipe RETIRED with
-   floating-panel.css) + `.glass-hero` (the thin large-radius editorial overlay
-   utility, 0-consumer verified) are DELETED clean-break. A straggler folds onto a
-   `tier`+`deep` glass surface (`<Surface tier deep>` / `.glass-floating.glass-deep`).
-   `--corner-shape-hero` retired with it (theme.css); the squircle family keeps
-   bigdock/dialog/sheet/panel. */

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

@@ -1,136 +0,0 @@
-/* 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/_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);
-    }
-
-    /* ── .glass-well — the recessed SEATED field register ──────────────────────
-       (BI.W-SURFACE-EXTRACT, value.js P3 WELL rung ADMIT). A field/track seated
-       INTO the surface: the `--card` plate stepped a whisper darker toward the warm
-       `--foreground` ink + a soft inset groove, so a nested input/meter reads as
-       recessed. It is a FIELD register (like `.input-bar`), NOT a `[data-surface]`
-       plate decoration — a well is a hole in the surface, not a floating plate. The
-       fill composes AT the element off the local `--glass-well-tone` (default 8%,
-       bounded to the P3 [6%,10%] band) so a per-scope override re-resolves (the
-       substitution-vs-inheritance discipline); the oklab mix stays in the perceptual
-       glass-tint family (NOT the in-srgb brand-overlay fence). The inset groove reads
-       the same warm ink — a recessed edge, not a drop shadow. */
-    .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);
-    }
-}