@mkbabb/glass-ui 4.1.0 → 5.0.0

package/src/styles/utilities/btn.css

@@ -79,6 +79,26 @@
     transition-property: height, opacity;
 }
 
+/* ── Disclosure chevron register (BG.W-DISCLOSURE-ROTATE) ────────────────
+   ONE canonical chevron-rotate gesture — the SAME settle clock + arrival curve
+   across EVERY disclosure caret (Accordion / Select / Configurator). The three
+   diverged: Accordion rode a flat `transition-transform duration-200` bezier
+   (zero weight), Select the snappy-clock cartoon-punch, Configurator a scoped
+   `--duration-fast` snappy on the WRONG property (a `transition: transform`
+   never covers the `rotate` Tailwind v4's `rotate-*` writes, so its chevron
+   SNAPPED). This register collapses them onto ONE (substitution over
+   re-declaration): the `rotate` property (the longhand the toggle actually
+   writes), the spring's OWN settle clock `--spring-snappy-duration` (the
+   W-GLASS-CAL per-spring-duration doctrine, not a generic `--duration-*`), and
+   the weighty `--ease-cartoon-punch` arrival (the liquid-weight "morph more on
+   move" register — a small quick control that still carries inertia). PRM:
+   `--ease-cartoon-punch` self-re-aliases to the no-overshoot `--ease-standard`
+   under `prefers-reduced-motion: reduce` (scheme-motion.css), so the caret still
+   flips its state with zero overshoot frames — the vestibular floor. */
+@utility transition-disclosure {
+    transition: rotate var(--spring-snappy-duration) var(--ease-cartoon-punch);
+}
+
 /* ── Sheet/drawer slide-out animation grammar ──
    The sheet/drawer-panel analogue of the overlay enter (the popover-class
    surfaces now ride the spring-clocked `.glass-reveal`, BB.W-LIQUID-REVEAL).
@@ -109,6 +129,76 @@
    (`.gold-shimmer` static text gradient, the specular gleam, the press-scale)
    STAY — they were never disco. */
 
+/* ── BD.W-BUTTON-GLASS-CONSUME — `.btn-punch`, the ONE new opt-in cartoon tier ──
+   The LOUD hero interaction decoration that sits ON TOP of the shared `.glass-capsule`
+   (it is NOT a material — buttons own no material). Composed via Button.vue's
+   `punchDecoration` (default-ON for `primary-audacious`/`gold-audacious`, opt-in via the
+   `punch` prop). It re-targets the EXISTING press primitives — ZERO second spring/rAF,
+   ZERO re-forked caster:
+
+     • the LOUD register — `--motion-weight: 1` (the same loud-register coupling
+       `.cartoon-surface` carries) so the cast travel + the glyph pop are never muted to
+       the rest 0.618 (the BD.W-CARTOON-PUNCH loud-register guard). The `:root` PRM carve
+       still zeroes it under reduce (handled below).
+     • the ANTICIPATION + OVERSHOOT — the host `scale` transition leg re-points off the
+       calm `--spring-smooth` (the `.btn-pill` base) onto `--ease-cartoon-punch` (DEPEND,
+       the booked raw `linear()` with the real pre-dip-below-origin + overshoot arm). The
+       JS `useLiquidFlex` writes the reciprocal `scale` inline DURING the press (single
+       source, it wins); on RELEASE the inline scale is removed and THIS transition curve
+       carries the scale back to rest with the cartoon follow-through. ONE scalar drive,
+       no double-drive on the same property.
+     • the louder squish amplitude is the JS side (Button.vue `maxStretch` 1.04→1.09,
+       fenced ≤1.14 composed area) — the css only owns the curve + the weight.
+     • the moving inked cast is the BD.W-CARTOON-CASTER inert `.cartoon-cast` child
+       (emitted by Button.vue, driven by `--cartoon-press-t × --motion-weight`); its
+       travel/spread/lag recipe lives ONCE in cards.css — composed here, not re-forked.
+
+   The GLYPH overlapping-pop (the label settles a beat AFTER the capsule — child trails
+   parent) REFERENCES the BD.W-TABS-LIQUID glyph scale-pop register: the pop reads the
+   SAME `--motion-weight` scalar via a button-scoped `--btn-glyph-pop` magnitude (the
+   literal lives ONCE here, not re-pasted from the tabs `0.06`), delayed `--duration-fast`
+   so it lags the capsule. Exactly 1 under PRM (`--motion-weight: 0`). */
+.btn-punch {
+    /* anchor the absolute inert `.cartoon-cast` child to THIS host (the glass variants
+       already get `position: relative` from `.glass-wash`; this guarantees it for an
+       opt-in `punch` on a non-glass variant too). */
+    position: relative;
+    --motion-weight: 1;
+    /* the press ramp the inert cast reads at REST (0); Button.vue overrides it live off
+       the spring during the press. */
+    --cartoon-press-t: 0;
+    /* re-point the scale leg onto the cartoon-punch curve (anticipation + overshoot on
+       the release leg); the surface legs stay on the bezier (the §6 doctrine). */
+    transition:
+        scale var(--spring-smooth-duration) var(--ease-cartoon-punch);
+}
+
+/* the glyph overlapping-action pop — the label/icon settles a beat AFTER the capsule
+   (child trails parent). DEPENDS `--motion-weight` (CONSUMED, the tabs glyph-pop idiom);
+   the magnitude literal lives once as `--btn-glyph-pop`. Delayed so it lags. */
+.btn-punch > :not(.cartoon-cast) {
+    --btn-glyph-pop: 0.05;
+    transition: scale var(--duration-fast) var(--ease-cartoon-punch) var(--duration-fast);
+}
+.btn-punch:active > :not(.cartoon-cast) {
+    scale: calc(1 + var(--btn-glyph-pop) * var(--motion-weight));
+}
+
+/* PRM carve — under reduced-motion the LOUD register zeroes in ONE assignment (every
+   `calc(… * --motion-weight)` — the cast travel/spread + the glyph pop — collapses to
+   rest) and `--ease-cartoon-punch` degrades to the calm `--ease-standard`; the press
+   still FUNCTIONS (the spring snaps, the squish physics off), the warm capsule fill +
+   rim + lift are STATIC (present for everyone). */
+@media (prefers-reduced-motion: reduce) {
+    .btn-punch {
+        --motion-weight: 0;
+        transition: scale var(--spring-smooth-duration) var(--ease-standard);
+    }
+    .btn-punch > :not(.cartoon-cast) {
+        transition: none;
+    }
+}
+
 /* ── Table density utilities — AN.R0 ─────────────────────────────────────
    `table-cell` and `table-head` replace the former Tailwind `p-4` / `h-12`
    literals in TableCell.vue / TableHead.vue. Both read `--table-density`
@@ -193,14 +283,20 @@
    button scale register the §6 doctrine records and the gate asserts across
    `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. The surface legs
    stay on the bezier `--ease-standard` (a colour cross-fade reads as a wobble
-   on a spring); only the `scale` transform leg springs. */
+   on a spring); only the `scale` transform leg springs.
+
+   BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the `scale` leg now reads the shared
+   `--transition-liquid-spatial` vocabulary token (byte-identical at the default —
+   it resolves to `--spring-smooth` — while the settle clock stays `--spring-smooth-
+   duration`), so a `.motion-calm` scope opts the button lift out of overshoot in
+   lockstep with the base interactive atoms. */
 @utility btn-interactive {
     /* AQ.W3 §W3.2 identity base */
     scale: 1;
     transition:
         background-color var(--duration-fast) var(--ease-standard),
         color var(--duration-fast) var(--ease-standard),
-        scale var(--spring-smooth-duration) var(--spring-smooth),
+        scale var(--spring-smooth-duration) var(--transition-liquid-spatial),
         opacity var(--duration-fast) var(--ease-standard);
 
     &:hover {
@@ -224,7 +320,7 @@
         transition:
             background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            scale var(--spring-smooth-duration) var(--spring-smooth),
+            scale var(--spring-smooth-duration) var(--transition-liquid-spatial),
             opacity var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }

package/src/styles/utilities/components.css

@@ -135,22 +135,22 @@
        register for densely-packed dock clusters. The selectors compose with
        `.metric-badge--label-stacked` so the inline ladder remains untouched
        — these are stacked-only refinements. */
-    .metric-pill[data-density="spacious"].metric-badge--label-stacked {
+    .metric-pill:not([data-dense]).metric-badge--label-stacked {
         --metric-badge-padding-block-stacked: 0.5rem;
         --metric-badge-padding-inline: 0.75rem;
     }
 
-    .metric-pill[data-density="comfortable"].metric-badge--label-stacked {
+    .metric-pill[data-dense].metric-badge--label-stacked {
         --metric-badge-padding-block-stacked: 0.25rem;
         --metric-badge-padding-inline: 0.5rem;
     }
 
-    /* AS.W4 — @container style(--density) companion. A pill nested under a host
-       that sets `--density: comfortable | spacious` on a wrapping element picks
-       up the matching padding register with no `data-density` markup contract;
+    /* BH.W-SIZE-UNIFY — the metric-pill padding density is the `dense` boolean
+       (was the `density` axis); the two `[data-dense]`/`:not([data-dense])`
+       attribute rules above are the SOLE register (the `@container style(--density)`
        the attribute rules above stay the SOLE fallback (inv 47).
        The inner `.metric-pill.metric-badge--label-stacked` selector (0,2,0) sits
-       just BELOW the `.metric-pill[data-density]…` attribute rules (0,3,0) — so a
+       just BELOW the `.metric-pill[data-dense]` attribute rules — so a
        pill carrying BOTH the attribute and a `--density` ancestor lands on the
        attribute rule (same tokens, identical paint), while a pill with only the
        ancestor token still resolves the right register (no competing rule sets
@@ -163,21 +163,9 @@
        clean declaration test for style-query support. This relies on
        `@container style()`'s own graceful degradation: an engine without
        style-query support parses the unknown at-rule as invalid, drops the
-       block, and keeps the `[data-density]` attribute base. (The earlier
+       block, and keeps the `[data-dense]` attribute base. (The earlier
        `@supports (container-type: inline-size)` wrapper was wrong — it probed
        SIZE-query support, a distinct feature with a distinct support timeline.) */
-    @container style(--density: spacious) {
-        .metric-pill.metric-badge--label-stacked {
-            --metric-badge-padding-block-stacked: 0.5rem;
-            --metric-badge-padding-inline: 0.75rem;
-        }
-    }
-    @container style(--density: comfortable) {
-        .metric-pill.metric-badge--label-stacked {
-            --metric-badge-padding-block-stacked: 0.25rem;
-            --metric-badge-padding-inline: 0.5rem;
-        }
-    }
 
     .metric-badge__label {
         letter-spacing: 0.18em;
@@ -202,7 +190,7 @@
         letter-spacing: 0.1em;
     }
 
-    /* Q.W3 Lane A — the `.glass-dock[data-density="…"]` density rungs that
+    /* Q.W3 Lane A — the `.glass-dock[data-size="…"]` size rungs that
        set `--dock-tab-h` + `--dock-label-size` were consolidated into
        `dock.css` (their canonical dock-styles home). They formerly lived
        here and resolved only by the index.css import order (utilities.css
@@ -244,7 +232,14 @@
     }
 
     .input-bar-field {
-        font-family: var(--font-mono, monospace);
+        /* BI.W-SURFACE-EXTRACT (value.js P3 — the seated field-chrome `.input-bar`
+           rung ADMIT): the field font family reads a token-first `--input-bar-font`
+           seam so a consumer retunes the seated-field face in ONE write, defaulting
+           byte-identical to the prior `var(--font-mono, monospace)`. The seat rung
+           itself (`.input-bar`, above) is already the P3 "seated field-chrome rung"
+           — reading the shared `--control-pill-*` cohort + the floating glass rung;
+           this token completes the ask's `--input-bar-font` half. */
+        font-family: var(--input-bar-font, var(--font-mono, monospace));
         /* BC.W-SEARCH-CUSTOM — the field font reads the shared `--control-pill-text`
            seam (the SAME rung `.input-pill` reads), DEFAULTING to `--control-text`
            (≈ the prior `--type-small` register at scale 1 — byte-near-identical). The

package/src/styles/utilities/metal.css

@@ -11,7 +11,9 @@
        base, light, dark)` band off the bound metal quad, `background-clip: text`.
      • `.metal-{gold,silver,bronze}-border` — the swept metallic RIM (the §N6
        selected-item-border consumer): the SAME `--metal-shimmer-color`-bound
-       gradient on a `border-image`-sliced rim, swept by the SAME keyframe.
+       gradient painted as a MASKED BAND on a `::before` overlay (the house
+       border-ring idiom, BI.W-METAL-RIM-BAND), swept by the SAME keyframe — so the
+       rim FOLLOWS `border-radius` (a `border-image` squared the corners).
      • `.metal-rainbow-rim` — the prismatic gilt-figure / record-badge rim: it
        COMPOSES W-GLASS-ACCENT's `--glass-accent` rim seam (it does NOT re-author
        the rim) by binding the accent channel to a swept rainbow hue.
@@ -105,43 +107,94 @@
         --metal-stop-base: var(--color-bronze);
     }
 
-    /* ── The swept metallic RIM (the §N6 selected-item-border consumer) ───────
-       The SAME `--metal-shimmer-color`-bound gradient applied to a `border-image`
-       slice — a swept metallic RIM, not a text fill. `border-image` reads the same
-       `background`-position-swept gradient (the metal-shimmer-sweep keyframe drives
-       the `background-position`; the `border-image-source` references the SAME
-       gradient via the stop slots), so ONE keyframe drives both registers. The rim
-       sits over the surface's own background (no `background-clip: text`). */
+    /* ── The swept metallic RIM — a MASKED BAND on a dedicated ::before overlay ──
+       (BI.W-METAL-RIM-BAND — the ruling-10 band-on-overlay reform.)
+
+       `border-image` SQUARES the corners on a rounded host (UF-A7 / FAM-4 — the
+       exact defect BorderProgress's masked-conic avoided), so the swept rim is
+       re-expressed as the house border-ring idiom (the in-repo precedent at
+       border-progress.css:55-66): a `--metal-shimmer-color`-bound gradient painted
+       on a `::before` OVERLAY whose `mask-composite: exclude` cuts a border-box
+       fill AGAINST a padding-box fill, leaving ONLY the border band — which FOLLOWS
+       `border-radius` exactly. The band lives on the OVERLAY, never the host
+       (ruling 10): the host's own content/backdrop is untouched (a glass card
+       keeps its interior; the rim hugs its radii — the pass-4b direct-host
+       application was the regression pass-5 re-forms).
+
+       The `metal-shimmer-sweep` keyframe (pure `background-position`, animations.css)
+       rides the ::before band UNCHANGED — ONE keyframe, both registers (text-clip +
+       rim). `border-image` is DELETED (clean break, no alias). */
     .metal-gold-border,
     .metal-silver-border,
     .metal-bronze-border {
         --metal-stop-dark: var(--color-gold-dark);
         --metal-stop-light: var(--color-gold-light);
         --metal-stop-base: var(--color-gold);
-        border: var(--metal-border-width, 2px) solid transparent;
-        border-image: linear-gradient(
+    }
+
+    /* ── The masked-band overlay — MANDATORY @supports gate ──────────────────
+       Without the gate a mask-composite gap engine would paint the gradient as a
+       FULL BOX fill (a real break). With it the rim reads on the genuine band; the
+       `@supports not (…)` fall (below) keeps a solid metal inset ring so the rim
+       still READS (only the travelling sheen is lost — an honest degrade, the
+       primary rim present; NOT a masking fallback). Safari 26 takes this path. */
+    @supports (mask-composite: exclude) {
+        .metal-gold-border,
+        .metal-silver-border,
+        .metal-bronze-border {
+            /* the positioning context the inset:0 overlay resolves against. */
+            position: relative;
+        }
+        .metal-gold-border::before,
+        .metal-silver-border::before,
+        .metal-bronze-border::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            /* the `border` width IS the band thickness the mask cuts out. */
+            border: var(--metal-border-width, 2px) solid transparent;
+            pointer-events: none;
+            /* the swept metal gradient — the SAME --metal-stop-* slots the
+               text-clip metals resolve, off the host's --metal-shimmer-color quad
+               (custom properties inherit onto the ::before). */
+            background: linear-gradient(
                 90deg,
                 var(--metal-stop-dark),
                 var(--metal-stop-light),
                 var(--metal-stop-base),
                 var(--metal-stop-light),
                 var(--metal-stop-dark)
-            )
-            1;
-        /* The sweep rides a backing gradient `background-position` on the same band
-           (the `border-image` slice tracks the host's background extent); the
-           250% size + the position sweep give the rim its travelling sheen. */
-        background-image: linear-gradient(
-            90deg,
-            var(--metal-stop-dark),
-            var(--metal-stop-light),
-            var(--metal-stop-base),
-            var(--metal-stop-light),
-            var(--metal-stop-dark)
-        );
-        background-size: 250% 100%;
-        background-clip: border-box;
+            );
+            background-size: 250% 100%;
+            /* THE RADIUS-FOLLOWING CUT-OUT — paint a border-box fill, EXCLUDE a
+               padding-box fill, leaving only the border band (follows radius; a
+               border-image cannot). The house border-ring idiom. */
+            -webkit-mask:
+                linear-gradient(#fff 0 0) padding-box,
+                linear-gradient(#fff 0 0) border-box;
+            -webkit-mask-composite: xor;
+            mask:
+                linear-gradient(#fff 0 0) padding-box,
+                linear-gradient(#fff 0 0) border-box;
+            mask-composite: exclude;
+        }
     }
+
+    /* ── The honest degrade (metal-base inset ring) ──────────────────────────
+       On a gap engine (no `mask-composite`) the rim paints a SOLID inset ring in
+       the metal's OWN base hue — it follows the host `border-radius` (box-shadow
+       inset does) and still READS as a metal rim; only the travelling sheen is
+       lost. The primary rim is present — this is NOT a masking fallback. */
+    @supports not (mask-composite: exclude) {
+        .metal-gold-border,
+        .metal-silver-border,
+        .metal-bronze-border {
+            box-shadow: inset 0 0 0 var(--metal-border-width, 2px)
+                var(--metal-stop-base);
+        }
+    }
+
     .metal-gold-border {
         --metal-shimmer-color: gold;
         --metal-stop-dark: var(--color-gold-dark);
@@ -202,13 +255,17 @@
        metal READS for PRM users); the `animation:` is the sole thing gated. The
        slow `--duration-metal` (6s) clock — the calm dignified pass. */
     @media (prefers-reduced-motion: no-preference) {
+        /* the text-clip metals + the rainbow rim sweep on the HOST background; the
+           `-border` metals sweep on their `::before` band overlay (BI.W-METAL-RIM-
+           BAND — the band now lives on the overlay, so the sweep does too). ONE
+           keyframe, both registers. */
         .metal-gold,
         .metal-silver,
         .metal-bronze,
-        .metal-gold-border,
-        .metal-silver-border,
-        .metal-bronze-border,
-        .metal-rainbow-rim {
+        .metal-rainbow-rim,
+        .metal-gold-border::before,
+        .metal-silver-border::before,
+        .metal-bronze-border::before {
             animation: metal-shimmer-sweep var(--duration-metal) linear infinite;
         }
     }

package/src/styles/viz-reveal.css

@@ -0,0 +1,63 @@
+/* BI.W-E10-AURORA-ENTRANCE (value.js T-60) — the PALETTE-HONEST one-shot
+ * cold-first-VISIBLE procedural-viz entrance.
+ *
+ * A procedural-viz CANVAS materializes: it fades in from transparent (`opacity`) with
+ * a gentle warm LIFT (`filter: brightness()/saturate()` PULSES up and settles). The
+ * whole ramp is PALETTE-HONEST — brightness and saturate NEVER dip below 1, so the
+ * entrance never transits a `brightness<1`/`saturate<1` GRAY VEIL over the chromatic
+ * field (the T-60 condemned form: the prior `from { brightness(0.4) saturate(0.7) }`
+ * dim floor, which — stamped while the canvas still sat at the consumer's `opacity:0`
+ * — opened the visible arrival INSIDE a `brightness 0.54–0.83` desaturated stage: the
+ * "pulses to gray" the owner named). The field's OWN colors carry the entrance; the
+ * bloom only lifts their light, it never dims or desaturates them.
+ *
+ * A FIELD bloom — the canvas rect stays scale(1) (no box-zoom gutter). Compositor-only
+ * (opacity + filter, the W-MOTION-CANON P5 EFFECTS channel). The peak is EXPLICIT in
+ * the keyframe (the 55% stop), so the animation rides a monotone `--ease-out` (NOT the
+ * extrapolating `--ease-cartoon-punch`, whose overshoot would dip the settle segment
+ * BELOW 1 and re-introduce the condemned dim tail).
+ *
+ * THE DOOR (BI.W-E10 / T-60): the aurora runtime opts OUT of this bloom by default
+ * (`revealBloom: false`) — the aurora materializes as its palette-derived GROUND with
+ * the canvas OPACITY cross-fade over it, so a second `filter`-bloom would double the
+ * entrance; it never sets `data-substrate-reveal`. The blob + the line-art vizzes keep
+ * it (now palette-honest). Both runtimes expose the `revealBloom` consumer door.
+ *
+ * THE TARGET is the CANVAS ([data-substrate-reveal]) — NOT a `.viz-canvas-host`
+ * wrapper: the blob's resting `drop-shadow` filter lives on ITS wrapper, so targeting
+ * the canvas never collides with a resting wrapper filter. NO `animation-fill-mode`
+ * that PERMANENTLY holds a settle filter — the animation reverts to the canvas's own
+ * (no) filter post-settle (brightness(1) saturate(1) opacity(1) == no filter/full
+ * opacity, a seamless revert).
+ *
+ * THE LEAF (createCanvasLifecycle.ts) sets the one-shot `data-substrate-reveal` attr
+ * the moment the canvas FIRST becomes visible (a dedicated one-shot IntersectionObserver
+ * — never at arm(), which a content-skipped / below-fold viz would burn invisibly). The
+ * `revealFired` guard keeps it ONE-SHOT → ZERO second bloom on scroll-off-and-back.
+ *
+ * PRM — the `animation:` line sits inside `@media (prefers-reduced-motion: no-preference)`
+ * AND the leaf skips the attr under reduce, so the field paints settled from frame 0
+ * (no fade, no luminance pulse — instant settled). The vestibular floor. */
+
+@keyframes substrate-reveal-bloom {
+    from {
+        opacity: 0;
+        filter: brightness(1) saturate(1);
+    }
+    55% {
+        /* the lit bloom peak — a warm luminance + saturation LIFT, NEVER a dim
+           veil: brightness and saturate stay ≥ 1 the whole way (palette-honest). */
+        filter: brightness(1.08) saturate(1.05);
+    }
+    to {
+        opacity: 1;
+        filter: brightness(1) saturate(1);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    canvas[data-substrate-reveal] {
+        animation: substrate-reveal-bloom var(--substrate-reveal-duration)
+            var(--ease-out);
+    }
+}