@mkbabb/glass-ui 4.0.0 → 4.0.1

package/src/styles/utilities/base-misc.css

@@ -0,0 +1,255 @@
+/* utilities/base-misc.css
+   The @layer components FORM/INTERACTION TAIL — status-dot, depth-text,
+   preserve-3d, ios input fix, fading-scroll (scroll-state-driven edge fade) +
+   the @supports (animation-timeline: scroll()) native path, deferred-section,
+   card-scroll-host, gold-shimmer, kbd.
+   BB.W-CARVE3 carved this off utilities/base.css (the post-tap-squish tail) so
+   each partial stays under the no-god-module 500-line bound. @import-ed by
+   utilities.css IMMEDIATELY AFTER base.css — two adjacent same-`@layer
+   components` blocks compose identically, so the dist is byte-isomorphic. The
+   @property --fade-start/--fade-end registrations the .fading-scroll rules read
+   stay in base.css (source-order BEFORE this partial). See
+   docs/precepts/design-idioms.md §cohesion-aware partials. */
+
+@layer components {
+    /* ── Status dot indicator ── */
+    .status-dot {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: var(--radius-pill);
+        flex-shrink: 0;
+        transition:
+            color var(--duration-fast) var(--ease-standard),
+            background var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+    /* ── Depth text (layered offset stamp) ──
+       AW.W26 — composes the `--text-shadow-depth` @theme identity token (the
+       hard offset stack + soft ambient tail) instead of a hand-rolled multi-stop
+       literal. The token holds the stack inside the `@theme` defs (gate 4) and
+       re-tints under `.dark` via `--shadow`/`--shadow-color` BY CONSTRUCTION. */
+    .depth-text {
+        --depth-color-primary: var(--primary);
+
+        color: var(--depth-color-primary);
+        text-shadow: var(--text-shadow-depth);
+    }
+
+    /* ── 3D preserve ── */
+    .preserve-3d {
+        transform-style: preserve-3d;
+    }
+
+    /* ── iOS input font-size fix (prevent auto-zoom) ── */
+    .ios input,
+    .ios select,
+    .ios textarea,
+    .ios [contenteditable] {
+        font-size: max(1rem, 1em);
+    }
+
+    /* ── Fading scroll — the scroll-STATE-driven edge fade (BA.W-FADING-SCROLL) ──
+       `<FadingScroll>`'s recipe. Each edge's ramp width is a registered
+       `--fade-start` / `--fade-end` custom (above, default 0px = SHARP), driven
+       by the
+       `scroll(self)` timeline so the start edge feathers only past `scroll > 0`
+       and the end edge only while trailing overflow remains.
+
+       The root IS the scroll port (the component sets overflow via the consumer's
+       utilities — `overflow-x-auto` / `overflow-y-auto` come from the class the
+       consumer passes; the axis floor below sets the OTHER axis). The 4-stop
+       mask reads the two customs; at rest both are 0px so the gradient is a flat
+       opaque pass-through (no feather). */
+    .fading-scroll {
+        /* The base mask is axis-specialized by the modifier classes below. The
+           default-x case uses the inline ramp; the y case the block ramp. */
+        mask-image: linear-gradient(
+            to right,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+    .fading-scroll--x {
+        overflow-x: auto;
+        mask-image: linear-gradient(
+            to right,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+    .fading-scroll--y {
+        overflow-y: auto;
+        mask-image: linear-gradient(
+            to bottom,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+
+    /* The NATIVE primary path: drive the per-edge customs off a `scroll(self)`
+       timeline — ZERO JS on a supporting engine (the `scroll-driven.css` /
+       Baseline-Newly-Available bar). UNLIKE `scroll-driven.css` this is NOT
+       wrapped in `prefers-reduced-motion: no-preference` — the fade is a
+       LEGIBILITY cue, not motion, so it stays present under PRM (it merely stops
+       interpolating; the discrete overflow-edge presence stays correct, and the
+       registered customs make even the static endpoints land right). */
+    @supports (animation-timeline: scroll()) {
+        /* The start edge: from sharp (0) to feathered, completing within the
+           first `--fade-scroll-width` of scroll — so at `scroll = 0` the start is
+           SHARP and it ramps in only once the user genuinely scrolls past. */
+        @keyframes gl-fade-start-in {
+            from {
+                --fade-start: 0px;
+            }
+            to {
+                --fade-start: var(--fade-scroll-width);
+            }
+        }
+        /* The end edge: feathered while trailing overflow remains, ramping OUT to
+           sharp over the last `--fade-scroll-width` of scroll — so at the scroll
+           end (no trailing overflow) the end is SHARP. */
+        @keyframes gl-fade-end-out {
+            from {
+                --fade-end: var(--fade-scroll-width);
+            }
+            to {
+                --fade-end: 0px;
+            }
+        }
+        /* x axis — `scroll(self inline)`; two animations on the ONE element, each
+           gated by `animation-range` to the start / end sliver of the scroll
+           distance. `fadeStart`/`fadeEnd` props toggle their respective
+           animation off via the `[data-fade-*]` presence attrs. */
+        .fading-scroll--x[data-fade-start] {
+            animation: gl-fade-start-in linear both;
+            animation-timeline: scroll(self inline);
+            animation-range: 0 var(--fade-scroll-width);
+        }
+        .fading-scroll--x[data-fade-end] {
+            animation: gl-fade-end-out linear both;
+            animation-timeline: scroll(self inline);
+            animation-range: calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        /* BOTH edges on one element compose as two named animations. */
+        .fading-scroll--x[data-fade-start][data-fade-end] {
+            animation:
+                gl-fade-start-in linear both,
+                gl-fade-end-out linear both;
+            animation-timeline: scroll(self inline), scroll(self inline);
+            animation-range:
+                0 var(--fade-scroll-width),
+                calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        /* y axis — `scroll(self block)`. */
+        .fading-scroll--y[data-fade-start] {
+            animation: gl-fade-start-in linear both;
+            animation-timeline: scroll(self block);
+            animation-range: 0 var(--fade-scroll-width);
+        }
+        .fading-scroll--y[data-fade-end] {
+            animation: gl-fade-end-out linear both;
+            animation-timeline: scroll(self block);
+            animation-range: calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        .fading-scroll--y[data-fade-start][data-fade-end] {
+            animation:
+                gl-fade-start-in linear both,
+                gl-fade-end-out linear both;
+            animation-timeline: scroll(self block), scroll(self block);
+            animation-range:
+                0 var(--fade-scroll-width),
+                calc(100% - var(--fade-scroll-width)) 100%;
+        }
+    }
+
+    /* ── Deferred section — render-skip an offscreen subtree (AQ.W3 §5) ──────
+       `content-visibility: auto` skips layout/paint/style of an offscreen
+       subtree — the INP-under-load lever (fourier γ, muster, speedtest, words).
+       `contain-intrinsic-size: auto <estimate>` is measurement-safe: the `auto`
+       prefix makes the engine REMEMBER the last-rendered size (no scroll-jump on
+       re-entry); plain `<estimate>` freezes the section + thrashes the scrollbar
+       — the trap this closes. Estimate is token-driven (`--deferred-section-
+       size`, default 30rem). `.deferred-section--cached` →
+       `content-visibility: hidden` (always skipped, state CACHED — cheaper to
+       re-show than `display:none`). Baseline Widely; unsupporting engines render
+       normally. JS HOOK: the engine fires `contentvisibilityautostatechange`
+       { skipped } at the render-skip boundary — pair with `useRAFLoop`
+       pause/resume: `el.addEventListener('contentvisibilityautostatechange',
+       e => e.skipped ? loop.pause() : loop.resume())`. */
+    .deferred-section {
+        content-visibility: auto;
+        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
+    }
+    .deferred-section--cached {
+        content-visibility: hidden;
+        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
+    }
+
+    /* ── Card scroll-timeline host (AI.W1-α) ───────────────────────────────
+       Canonical scroll-overflow host that emits the `--card-scroll` named
+       scroll-timeline consumed by `<CardHeader shrink>`. Apply to the
+       scroll-overflow ancestor (typically the `<Card>` itself OR a wrapper
+       inside it that carries `overflow-y: auto`).
+
+       `contain: layout style paint` isolates the named timeline so child
+       animations respond to THIS host's scroll only — not to portal-
+       triggered layout shifts in ancestor containers (the load-bearing
+       isolation guarantee the value.js `PaneHeader.vue:18-29` comment
+       called out and the AI.W1 spec §1.2 ratified as canon).
+
+       Disambiguated from `.fading-scroll` (the `<FadingScroll>` mask-image
+       edge fade at the container's leading/trailing edge) — `.card-scroll-host`
+       does NOT paint any visual; it only emits the timeline. */
+    .card-scroll-host {
+        contain: layout style paint;
+        scroll-timeline: --card-scroll block;
+    }
+
+    /* ── Shimmer text effects ──
+       BB.W-METAL-SHIMMER — the gold-only `gold-shimmer-slide` is RETIRED (clean
+       break, no alias); `.gold-shimmer` re-points onto the metal-PARAMETERIZED
+       `metal-shimmer-sweep` keyframe with `--metal-shimmer-color: gold`. The gold
+       gradient stops + the `background-size`/`background-clip` + the PRM bracket are
+       byte-PRESERVED — the gold READ is unchanged; only the keyframe NAME generalizes.
+       The text-fill + background-clip composition is load-bearing visual (the gold
+       gradient itself); only the `animation:` line is wrapped in the PRM no-preference
+       bracket so PRM users see the static gradient without the slide. */
+    .gold-shimmer {
+        --metal-shimmer-color: gold;
+        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
+        background-size: 250% 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+        .gold-shimmer {
+            animation: metal-shimmer-sweep var(--duration-shimmer) linear infinite;
+        }
+    }
+
+    /* ── Keyboard key ── */
+    .kbd {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 1.5rem;
+        min-width: 1.5rem;
+        padding: 0 0.375rem;
+        font-family: var(--font-mono);
+        font-size: var(--type-micro);
+        background: var(--muted);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        box-shadow: 0 1px 0 1px color-mix(in srgb, var(--border) 30%, transparent);
+        line-height: 1;
+    }
+
+}

package/src/styles/utilities/base.css

@@ -1,5 +1,12 @@
 /* utilities/base.css
-   The @layer components base half — section-description, labeled-field, popover-content, scrollbar, focus-ring, hairline-accent, interactive-item, tap-squish, status-dot, depth-text, preserve-3d, ios input fix, scroll-fade masks, fading-scroll (scroll-state-driven edge fade), deferred-section, scroll-timeline host, shimmer text, keyboard key.
+   The @layer components FORM/INTERACTION half — the @property fade pair (read by
+   the .fading-scroll rules in base-misc.css), section-description, labeled-field
+   (incl. the width-contract + error region), popover-content, scrollbar,
+   focus-ring, hairline-accent, interactive-item, tap-squish.
+   BB.W-CARVE3 carved the post-tap-squish tail (status-dot → kbd, incl. the
+   fading-scroll recipe) into the adjacent base-misc.css partial so each stays
+   under the no-god-module 500-line bound. The two adjacent same-`@layer
+   components` blocks compose identically — the dist is byte-isomorphic.
    Carved from the utilities.css cascade root; @import-ed by utilities.css in
    cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
 
@@ -127,8 +134,9 @@
        (PopoverContent, DropdownMenuContent, SelectContent, etc.).
        Covers radius + outline + popover-foreground; consumers compose
        this with `.glass-floating` (bg + blur + border + shadow), with
-       `.popover-animate` (data-state animation), and with the per-host
-       z-rung. The floating-tier shadow comes from
+       `.glass-reveal` (the spring-clocked data-state LIQUID-ENTER —
+       BB.W-LIQUID-REVEAL, off the retired `popover-animate`), and with the
+       per-host z-rung. The floating-tier shadow comes from
        `--glass-shadow-floating` via `.glass-floating`, replacing the
        `shadow-md`/`shadow-lg` literals that bypassed the canonical
        cascade. */
@@ -278,264 +286,42 @@
         }
     }
 
-    /* ── Status dot indicator ── */
-    .status-dot {
-        display: inline-block;
-        width: 0.5rem;
-        height: 0.5rem;
-        border-radius: var(--radius-pill);
-        flex-shrink: 0;
-        transition:
-            color var(--duration-fast) var(--ease-standard),
-            background var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-    /* ── Depth text (layered offset stamp) ──
-       AW.W26 — composes the `--text-shadow-depth` @theme identity token (the
-       hard offset stack + soft ambient tail) instead of a hand-rolled multi-stop
-       literal. The token holds the stack inside the `@theme` defs (gate 4) and
-       re-tints under `.dark` via `--shadow`/`--shadow-color` BY CONSTRUCTION. */
-    .depth-text {
-        --depth-color-primary: var(--primary);
-
-        color: var(--depth-color-primary);
-        text-shadow: var(--text-shadow-depth);
-    }
-
-    /* ── 3D preserve ── */
-    .preserve-3d {
-        transform-style: preserve-3d;
-    }
-
-    /* ── iOS input font-size fix (prevent auto-zoom) ── */
-    .ios input,
-    .ios select,
-    .ios textarea,
-    .ios [contenteditable] {
-        font-size: max(1rem, 1em);
-    }
-
-    /* ── Scroll fade masks ──
-       Single-source `mask-image` (AV.W16 TW7): the `-webkit-` companion is
-       dropped — Tailwind v4's Lightning CSS build pipeline auto-prefixes per
-       the browserslist targets, mirroring the glass ladder's single-source
-       `backdrop-filter` (glass.css). NOTE: this is the consistency cut; it
-       does NOT conflict with W15's `@supports`-gated older-Safari mask
-       fallback (that fallback is the distinct case where the companion is
-       genuinely needed and W15 gates it). */
-    .scroll-fade-mask {
-        mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
-    }
-
-    .scroll-fade-top {
-        mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
-    }
-
-    .scroll-fade-bottom {
-        mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
-    }
-
-    .scroll-fade-y {
-        mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
-    }
-
-    /* ── Fading scroll — the scroll-STATE-driven edge fade (BA.W-FADING-SCROLL) ──
-       `<FadingScroll>`'s recipe. SUPERSEDES the scroll-BLIND `.scroll-fade-*`
-       masks above (which feathered both edges unconditionally — the R8-08 "Shy"
-       defect). Here each edge's ramp width is a registered `--fade-start` /
-       `--fade-end` custom (above, default 0px = SHARP), driven by the
-       `scroll(self)` timeline so the start edge feathers only past `scroll > 0`
-       and the end edge only while trailing overflow remains.
-
-       The root IS the scroll port (the component sets overflow via the consumer's
-       utilities — `overflow-x-auto` / `overflow-y-auto` come from the class the
-       consumer passes; the axis floor below sets the OTHER axis). The 4-stop
-       mask reads the two customs; at rest both are 0px so the gradient is a flat
-       opaque pass-through (no feather). */
-    .fading-scroll {
-        /* The base mask is axis-specialized by the modifier classes below. The
-           default-x case uses the inline ramp; the y case the block ramp. */
-        mask-image: linear-gradient(
-            to right,
-            transparent 0,
-            black var(--fade-start),
-            black calc(100% - var(--fade-end)),
-            transparent 100%
-        );
-    }
-    .fading-scroll--x {
-        overflow-x: auto;
-        mask-image: linear-gradient(
-            to right,
-            transparent 0,
-            black var(--fade-start),
-            black calc(100% - var(--fade-end)),
-            transparent 100%
-        );
-    }
-    .fading-scroll--y {
-        overflow-y: auto;
-        mask-image: linear-gradient(
-            to bottom,
-            transparent 0,
-            black var(--fade-start),
-            black calc(100% - var(--fade-end)),
-            transparent 100%
-        );
-    }
-
-    /* The NATIVE primary path: drive the per-edge customs off a `scroll(self)`
-       timeline — ZERO JS on a supporting engine (the `scroll-driven.css` /
-       Baseline-Newly-Available bar). UNLIKE `scroll-driven.css` this is NOT
-       wrapped in `prefers-reduced-motion: no-preference` — the fade is a
-       LEGIBILITY cue, not motion, so it stays present under PRM (it merely stops
-       interpolating; the discrete overflow-edge presence stays correct, and the
-       registered customs make even the static endpoints land right). */
-    @supports (animation-timeline: scroll()) {
-        /* The start edge: from sharp (0) to feathered, completing within the
-           first `--fade-scroll-width` of scroll — so at `scroll = 0` the start is
-           SHARP and it ramps in only once the user genuinely scrolls past. */
-        @keyframes gl-fade-start-in {
-            from {
-                --fade-start: 0px;
-            }
-            to {
-                --fade-start: var(--fade-scroll-width);
-            }
-        }
-        /* The end edge: feathered while trailing overflow remains, ramping OUT to
-           sharp over the last `--fade-scroll-width` of scroll — so at the scroll
-           end (no trailing overflow) the end is SHARP. */
-        @keyframes gl-fade-end-out {
-            from {
-                --fade-end: var(--fade-scroll-width);
-            }
-            to {
-                --fade-end: 0px;
-            }
-        }
-        /* x axis — `scroll(self inline)`; two animations on the ONE element, each
-           gated by `animation-range` to the start / end sliver of the scroll
-           distance. `fadeStart`/`fadeEnd` props toggle their respective
-           animation off via the `[data-fade-*]` presence attrs. */
-        .fading-scroll--x[data-fade-start] {
-            animation: gl-fade-start-in linear both;
-            animation-timeline: scroll(self inline);
-            animation-range: 0 var(--fade-scroll-width);
-        }
-        .fading-scroll--x[data-fade-end] {
-            animation: gl-fade-end-out linear both;
-            animation-timeline: scroll(self inline);
-            animation-range: calc(100% - var(--fade-scroll-width)) 100%;
-        }
-        /* BOTH edges on one element compose as two named animations. */
-        .fading-scroll--x[data-fade-start][data-fade-end] {
-            animation:
-                gl-fade-start-in linear both,
-                gl-fade-end-out linear both;
-            animation-timeline: scroll(self inline), scroll(self inline);
-            animation-range:
-                0 var(--fade-scroll-width),
-                calc(100% - var(--fade-scroll-width)) 100%;
-        }
-        /* y axis — `scroll(self block)`. */
-        .fading-scroll--y[data-fade-start] {
-            animation: gl-fade-start-in linear both;
-            animation-timeline: scroll(self block);
-            animation-range: 0 var(--fade-scroll-width);
-        }
-        .fading-scroll--y[data-fade-end] {
-            animation: gl-fade-end-out linear both;
-            animation-timeline: scroll(self block);
-            animation-range: calc(100% - var(--fade-scroll-width)) 100%;
-        }
-        .fading-scroll--y[data-fade-start][data-fade-end] {
-            animation:
-                gl-fade-start-in linear both,
-                gl-fade-end-out linear both;
-            animation-timeline: scroll(self block), scroll(self block);
-            animation-range:
-                0 var(--fade-scroll-width),
-                calc(100% - var(--fade-scroll-width)) 100%;
-        }
-    }
-
-    /* ── Deferred section — render-skip an offscreen subtree (AQ.W3 §5) ──────
-       `content-visibility: auto` skips layout/paint/style of an offscreen
-       subtree — the INP-under-load lever (fourier γ, muster, speedtest, words).
-       `contain-intrinsic-size: auto <estimate>` is measurement-safe: the `auto`
-       prefix makes the engine REMEMBER the last-rendered size (no scroll-jump on
-       re-entry); plain `<estimate>` freezes the section + thrashes the scrollbar
-       — the trap this closes. Estimate is token-driven (`--deferred-section-
-       size`, default 30rem). `.deferred-section--cached` →
-       `content-visibility: hidden` (always skipped, state CACHED — cheaper to
-       re-show than `display:none`). Baseline Widely; unsupporting engines render
-       normally. JS HOOK: the engine fires `contentvisibilityautostatechange`
-       { skipped } at the render-skip boundary — pair with `useRAFLoop`
-       pause/resume: `el.addEventListener('contentvisibilityautostatechange',
-       e => e.skipped ? loop.pause() : loop.resume())`. */
-    .deferred-section {
-        content-visibility: auto;
-        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
-    }
-    .deferred-section--cached {
-        content-visibility: hidden;
-        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
-    }
-
-    /* ── Card scroll-timeline host (AI.W1-α) ───────────────────────────────
-       Canonical scroll-overflow host that emits the `--card-scroll` named
-       scroll-timeline consumed by `<CardHeader shrink>`. Apply to the
-       scroll-overflow ancestor (typically the `<Card>` itself OR a wrapper
-       inside it that carries `overflow-y: auto`).
-
-       `contain: layout style paint` isolates the named timeline so child
-       animations respond to THIS host's scroll only — not to portal-
-       triggered layout shifts in ancestor containers (the load-bearing
-       isolation guarantee the value.js `PaneHeader.vue:18-29` comment
-       called out and the AI.W1 spec §1.2 ratified as canon).
-
-       Disambiguated from `.scroll-fade-*` (mask-image fade gradient at
-       the container's leading/trailing edge) — `.card-scroll-host` does
-       NOT paint any visual; it only emits the timeline. */
-    .card-scroll-host {
-        contain: layout style paint;
-        scroll-timeline: --card-scroll block;
-    }
-
-    /* ── Shimmer text effects ──
-       The text-fill + background-clip composition is load-bearing visual
-       (the gold gradient itself); only the `animation:` line is wrapped in
-       the PRM no-preference bracket so PRM users see the static gradient
-       without the slide animation. */
-    .gold-shimmer {
-        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
-        background-size: 250% 100%;
-        background-clip: text;
-        -webkit-background-clip: text;
-        color: transparent;
-    }
-    @media (prefers-reduced-motion: no-preference) {
-        .gold-shimmer {
-            animation: gold-shimmer-slide var(--duration-shimmer) linear infinite;
-        }
-    }
-
-    /* ── Keyboard key ── */
-    .kbd {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 1.5rem;
-        min-width: 1.5rem;
-        padding: 0 0.375rem;
-        font-family: var(--font-mono);
-        font-size: var(--type-micro);
-        background: var(--muted);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-sm);
-        box-shadow: 0 1px 0 1px color-mix(in srgb, var(--border) 30%, transparent);
-        line-height: 1;
+    /* ── Glass-press — the interactive press register (BB.W-PRESS-UNIFY) ──
+       The CSS half of the `<Card :pressable>` / interactive-glass press. Two
+       coupled legs on ONE `--card-press-t` drive (the `useLiquidPress` writes the
+       JS-driven value; the CSS `:active` is the no-JS / SSR floor):
+
+         • The SCALE leg is the co-composed `.tap-squish` (the Card binds both
+           classes), so the no-JS press already scales to `--scale-press` on the
+           `--spring-smooth` clock and the JS reciprocal squish wins while engaged.
+         • The BRIGHTNESS leg reads the `--card-press-t` drive directly — a sub-
+           perceptual `filter: brightness()` lift so the glass reads as DEFORMING +
+           catching light under the press, not just shrinking (the W-MOTION-CANON P3
+           coupling — fade/brightness coupled WITH the transform on the same drive).
+           `filter` is compositor-safe (the P5 ban targets layout props only —
+           `proof:no-layout-animation` greens it), so the lift never re-layouts.
+
+       The brightness leg rides the `--card-press-t` VALUE (the typed press drive),
+       NOT a CSS transition — it tracks the JS spring frame-for-frame and degrades to
+       the resting 0 (no lift) when JS is off. The press surface is INTERACTIVE: the
+       cursor + a WCAG-2.5.5 touch floor (`min-block-size`) read here, not on the
+       static-card register. The interruptibility + the PRM-instant snap are the JS
+       driver's (`useLiquidPress` → the kf `SpringProgress` re-seat + the PRM policy);
+       this is the CSS floor the JS enhances. */
+    .glass-press {
+        cursor: pointer;
+        min-block-size: max(0px, var(--control-floor, 0px));
+        /* The coupled brightness lift on the press drive (rest 0 → ~4% at full
+           press). The drive is the JS-written `--card-press-t`; with JS off it stays
+           the `@property` 0 initial so the filter is a no-op (`brightness(1)`). */
+        filter: brightness(calc(1 + var(--card-press-t, 0) * 0.04));
+    }
+    /* The press-drive typed registration so a downstream `calc()` interpolates the
+       VALUE (number) and an unwired/SSR card is the static rest frame. */
+    @property --card-press-t {
+        syntax: "<number>";
+        inherits: true;
+        initial-value: 0;
     }
 
 }

package/src/styles/utilities/btn.css

@@ -69,7 +69,9 @@
 }
 
 /* ── Sheet/drawer slide-out animation grammar ──
-   Mirror of `.popover-animate` for sheet/drawer panels. Pairs with
+   The sheet/drawer-panel analogue of the overlay enter (the popover-class
+   surfaces now ride the spring-clocked `.glass-reveal`, BB.W-LIQUID-REVEAL).
+   Pairs with
    `slide-in-from-{top,right,bottom,left}-N` to compose side-keyed entries.
    The open path uses --duration-panel (slow, deliberate); the close path
    uses --duration-fast so dismiss feels snappy. R5 vocab.γ gap row 6;