@mkbabb/glass-ui 4.0.0 → 4.0.1

package/src/styles/tokens/scroll-tokens.css

@@ -0,0 +1,123 @@
+/* tokens/scroll-tokens.css
+   §20 PLATFORM MOTION (AQ.W5) — the native-platform motion substrate knobs.
+   Carved WHOLE from tokens/scale-paper.css at BB.W-CARVE4 to hold the no-god-module
+   bound (the paper/control/display/metal/timeline/metric/table families §11–§19 stay
+   in scale-paper.css; §20 is the file's last section, so this is a contiguous tail
+   carve at the §19/§20 seam). @import-ed by tokens.css in cascade order IMMEDIATELY
+   AFTER scale-paper.css — an adjacent same-selector :root{} block carrying the SAME
+   declarations in the SAME relative order, so the dist is byte-isomorphic.
+
+   The motion families, each read by a `@supports`-gated CSS recipe:
+   scroll-driven.css / scroll-choreography.css, animations.css (§TOP-LAYER),
+   view-transition.css — every visual knob a token so a consumer retunes without
+   editing library source. */
+:root {
+    /* SCROLL-DRIVEN (scroll-driven.css). Values mirror the JS-fallback composable
+       defaults (`useScrollProgress` / `useStaggerReveal`) so the native CSS path and
+       the fallback path read identically — no visual seam at the `@supports` boundary. */
+    --scroll-progress-scroller: root;
+    --scroll-reveal-rise: 6px;
+    --scroll-reveal-range-end: 60%;
+
+    /* BB.W-SCROLL-MOTION — the scroll-CHOREOGRAPHY register knobs (the page-build /
+       section-cascade / scroll-pinned recipes in scroll-choreography.css). These
+       EXTEND the --scroll-reveal-* substrate above; the existing three are READ-ONLY
+       (the cascade COMPOSES them, it never re-tunes them). All distances are
+       compositor (transform) channels; the clocks are the per-spring settle clocks
+       (scheme-motion.css), threaded, never re-tuned. */
+    /* .scroll-build — the route-enter page-build (the chrome -> hero -> body
+       coordinated entrance). The rise is a touch deeper than the section cascade
+       (the page ASSEMBLES — a more pronounced settle), the step is the per-beat
+       coordinated stagger between the chrome, hero, and first-section beats. */
+    --scroll-build-rise: 1.5rem;
+    --scroll-build-step: 90ms;
+    /* .scroll-cascade — the orchestrated section cascade (the per-child view()
+       timeline, the spring-clocked coupled build). The rise lifts the bare
+       --scroll-reveal-rise 6px to a perceptible SOTA build; the range-end is the
+       reveal window (a touch tighter than the bare reveal so each section lands
+       crisply rather than dragging a long fade tail). The column-stagger delay is
+       the opt-in .scroll-cascade--columns grid-variant knob. */
+    --scroll-cascade-rise: 1.25rem;
+    --scroll-cascade-range-end: 45%;
+    --scroll-cascade-column-stagger: 60ms;
+    /* .scroll-pin — the fixed-stage-advances-time scroll-pinned register. The stage
+       height is the Nvh temporal space the sticky stage advances its phases across;
+       the phase windows are the scroll-progress fractions the stage's internal
+       phases key off (grid-reveal 0..45%, expand 45..90%, settle 90..100% — the
+       Codrops phased-sequence shape). */
+    --scroll-pin-stage-height: 320vh;
+    --scroll-pin-phase-reveal-end: 45%;
+    --scroll-pin-phase-expand-end: 90%;
+    --scroll-pin-lift: 2.5rem;
+
+    /* TOP-LAYER (animations.css §TOP-LAYER). The `@starting-style` entry/exit
+       grammar for native `<dialog>` / `[popover]` glass surfaces. The backdrop dim
+       uses the house alpha-derivative `color-mix(in srgb, var(--background) Npct,
+       transparent)` (AZ.W-ADAPTIVE-AUTO A5-1). It is NOT the `hsl(var(--background)
+       / α)` channel form: `--background` is a COMPLETE `hsl()` color
+       (`= hsl(48 12% 98%)`), so `hsl(var(--background) / α)` double-wraps to
+       `hsl(hsl(…) / α)` — invalid, never paints (the modal dim was silently dead).
+       The genuine channel form would require `--background` declared as a bare
+       `H S% L%` triple, which it never is — hence the alpha-derivative mix. */
+    --top-layer-enter-scale: 0.96;
+    --top-layer-backdrop-blur: 8px;
+    --top-layer-backdrop-dim: 0.5;
+
+    /* VIEW-TRANSITION (view-transition.css). The shared `.gl-list-item` group recipe
+       + the `--vt-*` axes the `useViewTransition` substrate consumers (dock layer
+       swap, muster J's verdict re-rank) tune their swap against. */
+    --vt-duration: var(--duration-normal);
+    /* AX.W05 — ONE iOS-spring vocabulary: every spring-flavored transition reads
+       a governed `--spring-*` register. The legacy apple-spring cubic-bezier
+       (+27.5% overshoot) was a SECOND authority beside the regen `--spring-*`
+       cohort; it is EXCISED. Its emphatic-overshoot register maps to the playful
+       `--spring-bouncy` (the closest `linear()` overshoot stop-set), so the VT
+       default + the cards/top-layer transitions share one spring primitive
+       (CPU + GPU sample the same curve). No cubic-bezier fallback seed survives —
+       the `linear()` spring degrades to `ease` where `linear()` is unsupported. */
+    --vt-ease: var(--spring-bouncy);
+    --vt-rise: 8px;
+
+    /* AT.W6-dock-c / AU.W8 — the dock layer-swap morph timing, minted ONCE so
+       both engine paths are timing-IDENTICAL: the FLIP fallback (via
+       `--dock-motion-resize`), the native View-Transition group (its
+       `animation-timing-function`), AND the runtime SpringProgress driver
+       (AU.W8.3) consume this same `(0.32, 0.7)` source curve. Retires the AQ.W6
+       fork where the VT path ran `--vt-ease` (apple-spring, +27.5% overshoot)
+       while the FLIP ran the snappy spring. `--vt-ease` still defaults the
+       other VT recipes (`.gl-list-item`).
+
+       AU.W8 — RETARGET snappy → dock. `--spring-snappy` (ζ=0.65, +6.8%) read as
+       mechanical: a stiff plateau at ~48% with too little overshoot to feel
+       alive ("not iOS-smooth"). AW.W2 then retuned the dock spring to the
+       iOS-control register: `--spring-dock` ((0.32, 0.7), ~+4.6%) settles snappy
+       with a restrained overshoot — the felt iOS dock morph, off the prior
+       playful +18.5% register. The runtime driver's DOCK_SPRING const MIRRORS the
+       (0.32, 0.7) PRESETS row, so the CSS token and the JS-driven morph are
+       bit-identical. */
+    --dock-resize-spring: var(--spring-dock);
+
+    /* AT.W7-dock-b — dock-control press micro-feedback spring. A TRANSFORM-ONLY
+       spring (`scale`/`rotate`) the dock controls apply to their hover/press
+       activation so the squish reads with a touch of spring-back rather than a
+       flat ease. STRICTLY transform-scoped: it must never touch the surface-tier
+       `[data-held]` fades (background/border/box-shadow), which stay on
+       `--duration-fast var(--ease-standard)`. The duration pairs with
+       `--duration-fast`; consumers retune the whole feel via this one token.
+
+       AY.W-DOCK2 (D6) — the register is `--spring-smooth`, the §6 easing-doctrine
+       transform-press register (tokens.css §2: transform hover/press/active →
+       `--spring-smooth`/`--spring-snappy`, NEVER `--spring-bouncy`; a press must
+       settle, never overshoot into a visible bounce). The prior `--spring-bouncy`
+       ROOT default was off-doctrine, shadowed for the four named controls by a
+       per-surface re-point in dock-controls.css — the exact per-surface fork the
+       doctrine kills. The re-point is now a DEAD byte-identical redeclaration and is
+       DELETED; the ROOT token IS the doctrine register, so any other consumer of
+       `--dock-press-spring` inherits the correct smooth register.
+
+       BA.W-GLASS-CAL Unit 3 — the duration leg re-times off the generic
+       `--duration-fast` (0.2s) onto `--spring-smooth-duration` (0.36s, the
+       smooth spring's OWN 2%-band envelope settle), so the press transform plays
+       at its physical settle rather than a generic clock. */
+    --dock-press-spring: var(--spring-smooth-duration) var(--spring-smooth);
+}

package/src/styles/tokens/{offsets-sizing.css → sizing.css}

@@ -1,101 +1,16 @@
-/* tokens/offsets-sizing.css
-   §9 animation offsets · §10 sizing (control heights, dropdown, carousel, stack-overlap, touch-target floor).
-   Carved from the tokens.css cascade root; @import-ed by tokens.css in
-   cascade order. Same :root cascade context as its siblings. */
+/* tokens/sizing.css
+   §10 sizing — the --ui-scale doctrine, control-height/font/glyph cohorts,
+   dropdown/carousel/stack-overlap, the dock geometry cascade (--dock-scale +
+   collapsed-pill + rail hairline + active-state ladder + iOS register + touch
+   floor), MetricBadge stacked geometry, the Configurator density + HIERARCHY
+   vocabulary, the single-column stage floor, the section tonal step, the
+   component-font override.
+   Carved (BB.W-CARVE3) from the former tokens/offsets-sizing.css §9/§10 split;
+   @import-ed by tokens.css immediately AFTER offsets.css at offsets-sizing's old
+   cascade slot — adjacent same-selector :root blocks resolve identically, so the
+   dist is byte-isomorphic. See docs/precepts/design-idioms.md
+   §cohesion-aware partials. */
 :root {
-    /* ═══════════════════════════════════════════════
-       §9  ANIMATION OFFSETS
-       ═══════════════════════════════════════════════ */
-    /* Hover lift offsets */
-    --lift-sm: -1px;
-    --lift-md: -2px;
-    --lift-lg: -4px;
-
-    /* Layout tokens */
-    /* BA.W-FADING-SCROLL — `--fade-scroll-width` is the public edge-fade ramp
-       width knob for `<FadingScroll>` (inheriting, retunable on any ancestor;
-       SegmentedTabs' `overflow="scroll"` strip overrides it to 0.5rem). It
-       SUPERSEDES `--mask-fade-width` (the scroll-BLIND `.scroll-fade-*` static
-       masks' knob). `--mask-fade-width` is RETIRE-COORDINATED: it survives this
-       wave because the static `.scroll-fade-*` utility blocks survive (so
-       W-CONFIG-CHASSIS's C2/C3 configurator columns still render mid-batch); it
-       retires in a CLEAN BREAK (no alias) at the orchestrator's Batch-2-close
-       commit alongside the static utilities, once C2/C3 have migrated onto the
-       primitive. */
-    --fade-scroll-width: 1rem;
-    --mask-fade-width: 1rem;
-    /* J.W3.C — dock content overflow caps. When dock content exceeds
-       these dimensions, the inner `.dock-layers` (horizontal) /
-       `.glass-dock.vertical` (rail) container scrolls with a
-       `.scroll-fade-{x,y}` mask-fade so the boundary feathers rather
-       than cliffs. Defaults clamp to 80vw / 80vh capped at sensible
-       desktop widths; consumers override per-dock by setting either
-       token directly on a `.glass-dock` instance. User findings 1 + 5a. */
-    /* AX.W04 — `--dock-max-inline-size` is the canonical inline cap EVERY overflow
-       strategy reads: `overflow="scroll"` scrolls past it, and `overflow="wrap"`
-       wraps to N rows on the over-cap crossing (the dock shrink-wraps to content,
-       `max-inline-size` caps that intrinsic width at this token). The prior
-       `--dock-overflow-bp: 640px` viewport-breakpoint token (the magic-640
-       snap-back) is DELETED — the wrap is content-driven, not viewport-coupled, so
-       there is no breakpoint threshold to name. */
-    --dock-max-inline-size: min(80vw, 64rem);
-    --dock-max-block-size: min(80vh, 48rem);
-
-    /* AB.W1.T1 — chassis max-block-size guardrail.
-       Maximum block size a centred consumer-app card may consume while
-       preserving the inline dock footprint. The recipe subtracts the
-       consumer-owned `--dock-footer-space` (dock height + dock inset +
-       card-edge inset) and `--page-padding-top` from the dynamic viewport,
-       then takes one further rem of breathing room so the card never
-       butts the dock — the user mandate is `≥ 1rem visible gap above
-       dock`. Both consumer tokens carry safe fallbacks for callers that
-       have not declared them.
-
-       Consumers should shrink internal regions (meter, readout, timeline)
-       before falling back to scroll. This token is a guardrail against
-       chassis overflow, NOT a license to make the card scroll as the
-       default solution; clamp-first / no-scroll-first is the canon.
-       See DESIGN.md `## Chassis sizing — dock-adjusted viewport`. */
-    --chassis-max-block-size: calc(
-        100dvh
-        - var(--dock-footer-space, 5.75rem)
-        - var(--page-padding-top, 0rem)
-        - 1rem
-    );
-    /* R0G-2 (AO.W3/W4) — chassis mobile dial-reserve canon. instrument-
-       chassis.css's mobile breakpoint reserves the dial's final box from
-       frame 0 via these vars (with the same values as inline fallbacks, the
-       safety net). Token-first home so the vars resolve canonically. */
-    --instrument-dial-min-height-mobile: 24rem;
-    --instrument-dial-meter-reserve-mobile: minmax(0, 1fr);
-
-    --max-width-input: 24rem;
-    --input-min-width-sm: 5rem;
-    --min-width-input-sm: var(--input-min-width-sm);
-    /* AU.W8b.4 — canonical popover width (Combobox list + anchor). Lifts the
-       `w-[200px]` arbitrary-value wrap to the `w-popover` @theme utility. */
-    --popover-width: 200px;
-    /* AZ.R5-4 — the ONE panel inner-padding rung (the consumer-verified "the
-       popover/dropdown content reads TIGHT" finding). The floating-panel +
-       DropdownMenuContent recipes read THIS token for their inner pad instead of
-       the prior hand-set `p-1`/literal, so a consumer retunes every teleported
-       menu/panel surface from one override. The comfortable default is `0.375rem`
-       (a half-rung over the prior 0.25rem tight floor — comfortable both modes
-       without over-padding a dense menu list). PopoverContent keeps its own
-       `--panel-padding-roomy` (1rem) for the prose-popover register. */
-    --panel-padding:       0.375rem;
-    --panel-padding-roomy: 1rem;
-    --chart-height-compact: 15rem;
-    --chart-height-default: 22.5rem;
-    --chart-height-large: 25rem;
-    --chart-margin: 1.25rem;
-    --paper-texture-size: 200px 200px;
-
-    /* Border opacity scale */
-    --border-opacity-light:  0.15;
-    --border-opacity-medium: 0.25;
-    --border-opacity-strong: 0.6;
-
     /* ═══════════════════════════════════════════════
        §10 SIZING
        ═══════════════════════════════════════════════ */
@@ -283,8 +198,31 @@
     /* Library glyph ownership — `.dock-icon-button > svg` reads this so the dock
        icon glyph scales WITH the box (mirroring `.dark-mode-toggle-button > svg`).
        A consumer-passed explicit lucide size class still WINS (utility layer >
-       component layer); this is a DEFAULT, not a ceiling. */
-    --dock-icon-glyph: calc(1.25rem * var(--dock-scale));
+       component layer); this is a DEFAULT, not a ceiling.
+
+       BB.W-PERF-PRODUCER A′-6 — the glyph rides the per-DENSITY box, not a flat rem.
+       The value.js D5-1 companion trace: `density="spacious"` grew the shelf + pad +
+       gap but the glyph stayed 1.25rem (it rode `--dock-scale` only, NOT the
+       per-density `--dock-layer-height` axis density.css scales). Now the glyph is a
+       RATIO of `--dock-layer-height` (`--dock-icon-glyph-ratio`, default 0.5 → a
+       2rem control → a 1rem glyph at compact, a 2.5rem control → 1.25rem at
+       comfortable, lockstep up the rungs). The `--dock-scale` coarse thread is
+       PRESERVED transitively — `--dock-layer-height` already rides it (density.css).
+       The WCAG glyph-floor holds via `max(…, --dock-icon-glyph-floor)` (a 16px floor
+       so a sub-1 density/coarse register can never drop the glyph below the legible
+       minimum). NOTE: `--dock-layer-height` is painted ONLY on `.glass-dock[data-density]`
+       (density.css) — at `:root` it is the inline fallback below, so this `:root`
+       declaration resolves the fallback ladder; density.css RE-RESOLVES `--dock-icon-glyph`
+       inside each `[data-density]` scope so the density-painted height flows in (the
+       substitution-vs-inheritance trap the overflow.css R5-1 sweep documents). The
+       toggle mirror `.dark-mode-toggle-button > svg` reads the SAME `--dock-icon-glyph`
+       so both glyphs move onto the density axis together. */
+    --dock-icon-glyph-ratio: 0.5;
+    --dock-icon-glyph-floor: 1rem;
+    --dock-icon-glyph: max(
+        calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)),
+        var(--dock-icon-glyph-floor)
+    );
 
     /* AX.W45-TUNE Q1 — the COLLAPSED-pill floor tokens. The collapsed summary
        used to fall to `--dock-layer-height` (the FULL control height, ~2.5rem) for
@@ -558,5 +496,4 @@
 
     /* Component font override (consumers override locally) */
     --select-font: inherit;
-
 }

package/src/styles/tokens.css

@@ -21,14 +21,20 @@
  * (registrations + the specular magnitude cohort that reads them).
  */
 
-/* CSS @import rules must precede every other rule. The nine partials @import in
-   cascade order: */
+/* CSS @import rules must precede every other rule. The ten partials @import in
+   cascade order (offsets-sizing.css was carved into offsets.css + sizing.css at
+   BB.W-CARVE3 — adjacent same-selector :root blocks at the same cascade slot): */
 @import "./tokens/scheme-motion.css";
 @import "./tokens/color-radius.css";
 @import "./tokens/shadow.css";
 @import "./tokens/glass.css";
-@import "./tokens/offsets-sizing.css";
+@import "./tokens/glass-fx.css";
+@import "./tokens/glass-deep.css";
+@import "./tokens/on-glass-fg.css";
+@import "./tokens/offsets.css";
+@import "./tokens/sizing.css";
 @import "./tokens/scale-paper.css";
+@import "./tokens/scroll-tokens.css";
 @import "./tokens/light-dark.css";
 @import "./tokens/dark-arm.css";
 @import "./tokens/property-regs.css";

package/src/styles/typography/semantic.css

@@ -24,7 +24,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-audacious);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     /* AQ.W3 §W3.3 — balance multi-line display headlines. Text-only (no box) so
@@ -60,7 +60,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-hero);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -70,7 +70,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-mega);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -80,7 +80,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-5);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -90,7 +90,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-4);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -100,7 +100,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-3);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -110,7 +110,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-2);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -120,7 +120,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-1);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */

package/src/styles/typography/utilities.css

@@ -26,12 +26,24 @@
 /* ═══════════════════════════════════════════════
    MONO variants
    ═══════════════════════════════════════════════ */
+/* BB.W-EYEBROW-UNION — THE canonical mono-caption EYEBROW vocabulary, declared
+   ONCE. The pure color-agnostic register: mono · caption-size · uppercase ·
+   tracking-CAPS. The prior drift (tracking-WIDER 0.05em, weight-500, both off the
+   `.section-label` canon-by-usage) is RECONCILED onto the canon's secondary axes
+   (clean break, no alias): the tracking folds to `--type-tracking-caps` (0.1em),
+   the weight-500 drops (a per-use choice a site states inline via `font-medium`,
+   not a fork in the eyebrow register), and color stays UNBAKED so a consumer
+   pairs any ink (`text-foreground`/`text-muted-foreground`/an accent) — the 17
+   `text-mono-caption text-foreground` sites keep their ink. `.section-label`
+   (below) COMPOSES this vocabulary + bakes the muted ink (the colored canon);
+   the menu caption reads the `--menu-section-*` knobs that DEFAULT to these same
+   tokens (the sanctioned override layer). proof:eyebrow-union locks the
+   single-source-ness. */
 @utility text-mono-caption {
     font-family: var(--font-mono);
     font-size: var(--type-caption);
-    letter-spacing: var(--type-tracking-wider);
+    letter-spacing: var(--type-tracking-caps);
     text-transform: uppercase;
-    font-weight: 500;
 }
 
 @utility text-mono-small {
@@ -110,13 +122,16 @@
         }
     }
 
-    /* Section label (mono, small caps) */
+    /* Section label (mono, small caps) — the COLORED eyebrow canon. Composes the
+       ONE `text-mono-caption` vocabulary (mono · caption · uppercase ·
+       tracking-caps) + bakes the muted ink. BB.W-EYEBROW-UNION: this is the
+       canon-by-usage register (the StorySection eyebrow column + Section.vue's
+       `label` tone + the `.section-label--tinted` accent build on it); it now
+       COMPOSES the vocabulary rather than re-declaring it, so a tracking/size
+       change to the eyebrow is ONE edit (the `text-mono-caption` rule). */
     .section-label {
-        font-family: var(--font-mono);
-        font-size: var(--type-caption);
+        @apply text-mono-caption;
         color: var(--muted-foreground);
-        text-transform: uppercase;
-        letter-spacing: var(--type-tracking-caps);
     }
 
     /* Section-accent eyebrow (AZ.W-SUFFUSE D3-7 / D1-8). ONE coherent

package/src/styles/utilities/animate.css

@@ -1,26 +1,29 @@
 /* utilities/animate.css
-   The popover/dropdown shared @utility animation pair — popover-animate + slide-in-from-side (the data-state / data-side entry choreography for popover-class containers). FIRST (before the @layer components block, matching source order).
-   Carved from the utilities.css cascade root; @import-ed by utilities.css in
-   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
-/* ── Popover/dropdown shared animation ──
-   `@utility` form (V.W3.T8 / A5 §5.9 standardisation): data-state animation
-   pair for popover-class containers (Popover, DropdownMenu, ContextMenu,
-   Tooltip, HoverCard, Select). Composed alongside `.slide-in-from-side`
-   for direction-keyed entries. */
-@utility popover-animate {
-    @apply data-[state=open]:animate-in data-[state=closed]:animate-out
-           data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
-           data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
-}
+   BB.W-LIQUID-REVEAL — the popover/dropdown shared enter recipe RETIRED.
+   @import-ed by utilities.css in cascade order. See
+   docs/precepts/design-idioms.md §cohesion-aware partials. */
 
-/* ── Slide-in entry by side data-attr ──
-   `@utility` form (V.W3.T8). Side-keyed slide entry that pairs with
-   reka-ui's `data-side` (`top|right|bottom|left`). The animation
-   direction inverts each side so panels enter from outside the
-   anchor's edge. */
-@utility slide-in-from-side {
-    @apply data-[side=bottom]:slide-in-from-top-2
-           data-[side=left]:slide-in-from-right-2
-           data-[side=right]:slide-in-from-left-2
-           data-[side=top]:slide-in-from-bottom-2;
-}
+/* ── RETIRED at BB.W-LIQUID-REVEAL (clean break, no alias — BB inv-7 no-legacy) ──
+ *
+ * `@utility popover-animate` (the tw-animate-css fixed-bezier zoom-95 + fade-0 enter)
+ * AND `@utility slide-in-from-side` (the data-side directional slide) are DELETED.
+ * They were the generic cubic-bezier zoom-95 over the same `--duration-normal` wall
+ * clock for every surface — "presses spring, reveals don't" (the §6/W-MOTION-CANON
+ * half-applied enter). The SPRING-CLOCKED LIQUID-ENTER recipe `.glass-reveal`
+ * (src/styles/glass/reveal.css) REPLACES both:
+ *   - the scale+fade ride `--spring-snappy` + `--spring-snappy-duration` (the
+ *     W-GLASS-CAL Unit 3 per-spring clock) with the coupled `filter: blur(4px)→0`
+ *     light-bending decongest (the iOS-27 bloom);
+ *   - the directional `slide-in-from-side` folds onto `.glass-reveal`'s `data-side`
+ *     compositor `translate` leg (on the SAME spring clock).
+ *
+ * The ≥8 reka portaled overlays (Dialog/Popover/Tooltip/HoverCard/DropdownMenu/
+ * ContextMenu/Combobox/Select) compose `.glass-reveal` directly; the
+ * `useLiquidReveal` JS leaf (composables/motion/useLiquidReveal.ts) is the
+ * source-rect bloom REFINEMENT (the dialog-from-button / dock-from-pill case).
+ *
+ * Do NOT re-add an unlayered `@utility popover-animate`/`slide-in-from-side` — the
+ * recipe is `@layer components` `.glass-reveal`; an unlayered utility would win the
+ * cascade over it (the AZ dock-rail `@layer`-loses-to-utility trap). Machine-locked
+ * by proof:liquid-reveal R3 (the negative — no enrolled surface retains
+ * popover-animate). */