@mkbabb/glass-ui 4.0.0 → 4.0.1

package/src/styles/dock/morph.css

@@ -34,24 +34,55 @@
        during the morph, so the read resolves the correct in-flight blend (collapse
        1→0 via `1 - t`; expand 0→1 via `t`); on settle `[data-morphing]` clears and
        expand-t snaps to the exact class endpoint. */
-    .glass-dock:not(.vertical).expanded,
-    .glass-dock:not(.vertical).always-expanded {
+    /* BB.W-DOCK-MORPH-FAMILY (f) — the `--dock-expand-t` directional derivation is
+       ORIENTATION-AGNOSTIC. The derivation reads the per-swap morph scalar + the
+       synchronously-set `.expanded`/`.collapsed` class — there is NO axis in this
+       blend (a `t`-vs-`1-t` directional read), so the `:not(.vertical)` qualifier is
+       DROPPED here. A collapsing VERTICAL dock now derives the same in-flight
+       expand-t (the box-size arm `layers.css` already morphs `block-size` on
+       `--dock-morph-t`; this gives the chrome the matching directional scalar). The
+       earlier "a vertical rail is ALWAYS-EXPANDED" assumption is retired since
+       vertical-collapse shipped — `alwaysExpanded` defaults false (GlassDock.vue),
+       so a genuinely-collapsing vertical dock gets its chrome on the ONE clock. */
+    .glass-dock.expanded,
+    .glass-dock.always-expanded {
         --dock-expand-t: 1;
     }
 
-    .glass-dock:not(.vertical).collapsed {
+    .glass-dock.collapsed {
         --dock-expand-t: 0;
     }
 
-    .glass-dock:not(.vertical).expanded[data-morphing],
-    .glass-dock:not(.vertical).always-expanded[data-morphing] {
+    .glass-dock.expanded[data-morphing],
+    .glass-dock.always-expanded[data-morphing] {
         --dock-expand-t: var(--dock-morph-t);
     }
 
-    .glass-dock:not(.vertical).collapsed[data-morphing] {
+    .glass-dock.collapsed[data-morphing] {
         --dock-expand-t: calc(1 - var(--dock-morph-t));
     }
 
+    /* BB.W-LIQUID-REVEAL — the dock-expand LIQUID-OPEN bloom beat (DOCK-EXPAND-CONSUMER).
+       The dock pill BLOOMS open from its collapsed circle: a coupled `filter` blur-
+       settle decongest reading the SAME `--dock-expand-t` directional scalar the chrome
+       interp rides (the W-DOCK-MORPH-FAMILY morph mechanism is UNTOUCHED — this is a
+       SURFACE arm, NOT a morph-axis layout edit). Collapsed (`--dock-expand-t` 0) the
+       dock content reads a faint `blur(--dock-reveal-blur)` decongest; as it expands
+       (`--dock-expand-t` → 1) the blur SETTLES to 0 so the chrome clarifies AS the pill
+       blooms — the iOS "light-bending modulation" arrival on the dock's own pixels
+       (`filter`, NOT `backdrop-filter`, so the resting glass-tier plate blur the dock
+       carries is never clobbered). Compositor-safe (a `filter` radius interp, never a
+       layout property — the proof:no-layout-animation floor). The beat rides the ONE
+       `--dock-expand-t` scalar, so it tracks the `DOCK_SPRING` clock with NO second
+       clock + NO re-added CSS transition (the morph already animates `--dock-morph-t`).
+       PRM: the `--dock-reveal-blur` knob is zeroed under reduce (the carve below). */
+    .glass-dock {
+        --dock-reveal-blur: 3px;
+        filter: blur(
+            calc(var(--dock-reveal-blur) * (1 - var(--dock-expand-t, 1)))
+        );
+    }
+
     /* The morphing root chrome — background / border-color interpolate between the
        collapsed and expanded endpoints on the ONE `--dock-expand-t` scalar. Scoped
        to the horizontal dock (`:not(.vertical)`) — the inline-axis aperture morph;
@@ -98,6 +129,43 @@
         );
     }
 
+    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL chrome-interp un-gate (BB-1). The
+       bg/border interp is AXIS-INVARIANT (a color mix reads the scalar with no
+       axis), so the vertical dock interpolates its plate between the SAME
+       collapsed↔expanded endpoints on the SAME `--dock-expand-t` scalar the
+       horizontal block reads — the ONE `DOCK_SPRING` clock, no second clock, no
+       re-added CSS transition. This PARALLEL `.vertical` block (specificity 0,2,0,
+       source-order AFTER the shell.css static `.glass-dock.vertical` plate so it
+       wins at equal specificity) is the inverse-axis twin of the horizontal block
+       above — the box-size morph already rides `block-size` on `layers.css`'s
+       `--dock-morph-t`; this gives the plate chrome the matching directional blend
+       so the vertical collapse↔expand no longer SNAPS its bg/border discretely. At
+       the rest endpoints `--dock-expand-t` resolves to the class value (0 collapsed
+       / 1 expanded), so the resting look is exact — byte-equivalent to the shell.css
+       static plate it supersedes during the morph. */
+    .glass-dock.vertical {
+        background: color-mix(
+            in srgb,
+            color-mix(
+                in oklab,
+                var(--glass-bg-dock, var(--glass-bg-wash)),
+                var(--glass-tint-source) var(--glass-tint-strength)
+            )
+                calc(var(--dock-expand-t, 1) * 100%),
+            color-mix(
+                in oklab,
+                var(--glass-bg-wash),
+                var(--glass-tint-source) var(--glass-tint-strength)
+            )
+        );
+        border-color: color-mix(
+            in srgb,
+            var(--glass-border-dock, var(--glass-border-wash))
+                calc(var(--dock-expand-t, 1) * 100%),
+            var(--glass-border-floating)
+        );
+    }
+
     /* The padding morph is split out + scoped `:not(.dock-overflow-wrap)` so the
        wrap variant's own padding rules (W04 territory — `.dock-overflow-wrap` +
        its `@media` snap-back) are NOT clobbered by this higher-specificity longhand.
@@ -142,6 +210,35 @@
         );
     }
 
+    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL padding interp is the AXIS-INVERSE
+       of the horizontal layout-isolation contract above. The vertical collapse↔
+       expand is a BLOCK-HEIGHT aperture (the box-size arm morphs `block-size`,
+       layers.css), so the CROSS (inline) axis MUST be invariant across the morph —
+       else the dock's outer WIDTH changes on collapse and reflows its horizontal
+       siblings (the §1 contract, mirrored onto the vertical axis). So `padding-
+       inline` is PINNED at the expanded inline value in BOTH states, and ONLY
+       `padding-block` morphs to tighten the collapsed pill on the morph axis. The
+       collapsed block-pad endpoint is the EXPANDED inline pad (max'd with the
+       consumer `--dock-collapsed-padding` handle) so the height-pinned-cross collapsed
+       pill is SYMMETRIC. Specificity 0,2,0 source-order after shell.css's static
+       `.glass-dock.vertical` padding so this wins at equal specificity; at the rest
+       endpoints `--dock-expand-t` is the class value so the look is exact. Scoped to
+       the NON-scroll/non-wrap vertical dock. */
+    .glass-dock.vertical:not(.dock-overflow-wrap) {
+        --dock-pad-collapsed: max(
+            var(--dock-padding-inline, 0.5rem),
+            var(--dock-collapsed-padding, 0px)
+        );
+        /* inline padding is INVARIANT — the cross axis, pinned both states so the
+           outer inline-size never changes → 0px horizontal sibling reflow. */
+        padding-inline: var(--dock-padding-inline, 0.5rem);
+        padding-block: calc(
+            var(--dock-pad-collapsed) +
+                (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) *
+                var(--dock-expand-t, 1)
+        );
+    }
+
     /* AX.W01 — the collapsed padding / background / border-color are RETIRED here
        (the `--dock-expand-t` morph block above is the single authority for those
        three axes — they interpolate, never snap). `.collapsed` keeps only its
@@ -330,7 +427,15 @@
        ink, which clears ~10:1). */
     :where(.glass-dock) {
         --glass-tint-source: var(--glass-tint-ink);
-        --glass-tint-strength: var(--glass-tint-strength-aa);
+        /* BC.W-AUDIT — the scope-7 completion: the dock JOINS the content-tier
+           sub-perceptual FLOOR by default (translucent warm liquid glass, NOT a grey
+           slab), and the FULL AA darken engages ONLY under the genuine bright signal —
+           the `@container --glass-backdrop: light` bucket below, written by the dock's
+           own sampled-luminance observer over a bright backdrop (aurora/DockStage) OR a
+           consumer's explicit bucket. The prior unconditional AA (20% ink-ward) darkened
+           the dock to grey over EVERY calm light page — the iOS-27 dynamic model done
+           wrong (darken-always vs darken-when-bright). The full glass rebuild is BC. */
+        --glass-tint-strength: var(--glass-tint-strength-floor);
         --dock-fg-on-aurora: var(--glass-tint-ink);
         --muted-foreground: var(--foreground);
     }
@@ -372,3 +477,15 @@
         }
     }
 }
+
+/* BB.W-LIQUID-REVEAL — the dock-expand bloom beat's blur-settle is OFF under
+   `prefers-reduced-motion: reduce` (the vestibular floor). The morph itself snaps
+   instantly under PRM (the `DOCK_SPRING` `respectReducedMotion` in
+   dockMorphContext.ts), and zeroing `--dock-reveal-blur` here removes the resting
+   collapsed-pill decongest blur too — a reduced-motion dock reads crisp at every
+   state, no in-between blur frames. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-dock {
+        --dock-reveal-blur: 0px;
+    }
+}

package/src/styles/dock/overflow.css

@@ -246,8 +246,22 @@
                --dock-collapsed-padding / --dock-layer-tab-size paint at the global 1.5×
                while the density box paints at 1.17× — a desync the R5-2 register would
                introduce). The formulas are IDENTICAL to their :root definitions; only
-               the resolution element moves so the lifted --dock-scale flows in. */
-            --dock-icon-glyph: calc(1.25rem * var(--dock-scale));
+               the resolution element moves so the lifted --dock-scale flows in.
+               BB.W-PERF-PRODUCER A′-6 — --dock-icon-glyph is now a RATIO of the
+               density-painted --dock-layer-height (offsets-sizing.css + the density.css
+               [data-density] re-resolve). This coarse block @imports AFTER density.css
+               in the SAME @layer at the SAME specificity, so its --dock-icon-glyph
+               source-order-WINS on coarse pointers — it MUST carry the density-aware
+               formula too (the flat `1.25rem * --dock-scale` here would re-freeze the
+               glyph at the flat rem on touch, re-introducing the D5-1 defect the wave
+               fixes). --dock-layer-height re-resolves transitively at the lifted
+               --dock-scale (re-declared above), so the glyph tracks both the density
+               box AND the coarse register. Formula identical to the :root + density
+               re-resolve; only the resolution element moves. */
+            --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)
+            );
             --dock-collapsed-padding: calc(0.25rem * var(--dock-scale));
             --dock-layer-tab-size: calc(1.75rem * var(--dock-scale));
             /* --dock-collapsed-summary-min-size derives from --dock-layer-height (the

package/src/styles/dock/shell.css

@@ -87,13 +87,32 @@
            centered in its cell (≥1px slack/side at hover), the cell sits flush at the
            dock content edge, and the `--dock-padding-block` (≈6px) padding holds the
            plate ≥7px clear of the `contain: paint` border-box edge on the block axis.
-           So `contain: paint` is the NON-proximate second clip box (the lane's
+           So the `paint` clip axis is the NON-proximate second clip box (the lane's
            `probe-bottomdock-nocontain.png` forced-root probe proved the inner
-           scroll-port box was proximate, not this) and it is UNEDITED here — the
-           inset + freed cross axis suffice, no containment lift on the control-plate
-           band. The π readback (W-DOCK-GEOMETRY-DELTA.md) records the live
-           plate-inside-padding margin number that binds this verdict. */
-        contain: paint;
+           scroll-port box was proximate, not this) and the `paint` axis is RETAINED
+           here — the inset + freed cross axis suffice, no containment LIFT on the
+           control-plate band. (BB.W-PERF-PRODUCER A′-4 widens the value to
+           `contain: layout style paint` — the restyle-scope axes ALONGSIDE the paint
+           clip box, see below — but never lifts `paint`.) The π readback
+           (W-DOCK-GEOMETRY-DELTA.md) records the live plate-inside-padding margin
+           number that binds this verdict. */
+        /* BB.W-PERF-PRODUCER A′-4 — the `--dock-morph-t` restyle-scope narrowing.
+           The per-frame morph scalar write recomputes the inheriting `calc()` group
+           across the dock subtree (dock.css's 10-selector `:where()` consumers); add
+           the `layout` + `style` containment axes so a scalar write recomputes
+           layout/style WITHIN the dock subtree, not up the document (the value.js A′-4
+           ~13fps restyle-cost trace). RECONCILED with the existing axes: `paint`
+           (above, the BA.W-DOCK-GEOMETRY clip box) composes — `contain: layout style
+           paint` is the union, NEVER `size` (which `container-type: inline-size` carries
+           as `inline-size` ONLY on the OPT-IN `containerName` host below; the default
+           free-floating dock must stay shrink-to-fit, so `size`/`inline-size` is
+           DELIBERATELY excluded here — adding it would re-introduce the 3.3.0 sliver
+           regression the §99 comment documents). The morph-axis `overflow: clip`
+           (the reveal aperture) + the `.glass-dock-frame` rail-escape are UNAFFECTED:
+           `layout`/`style` containment scopes RECALC, it does not establish a paint
+           clip beyond the already-present `paint` axis. The `DOCK_SPRING` clock is
+           byte-fenced (the value.js letter) — this is restyle COST, not a re-tune. */
+        contain: layout style paint;
         display: inline-flex;
         align-items: center;
         /* AW.W1 — the dock does NOT establish a default inline-size container.
@@ -273,16 +292,19 @@
            shell above; the cross axis stays visible there. */
         padding: var(--dock-padding-block, 0.375rem);
         border-radius: var(--radius-dock);
-        /* AX.W01 — a vertical rail is ALWAYS-EXPANDED (no collapse↔expand morph),
-           so its root padding/background/border-color never morph; the prior
-           `padding/background/border-color var(--dock-motion-*)` transition arms
-           are DELETED (a residual root CSS-transition on the morph-chrome props is
-           the second-clock smell the single-scalar rebuild retires). The block-axis
-           (height) morph is owned by the inner `.dock-layer-stack` / DockLayerGroup
-           via the `--dock-morph-t` scalar (the size `calc()` above), never a CSS
-           transition here. KEPT: the DECORATIVE hover-scale + press-squish (the
-           individual `scale`/`transform`) and the box-shadow fade — these are
-           interaction polish on the static rail, NOT the morph. */
+        /* BB.W-DOCK-MORPH-FAMILY (f) — the stale "a vertical rail is ALWAYS-EXPANDED
+           (no collapse↔expand morph)" assumption is RETIRED (it was false since
+           vertical-collapse shipped: `alwaysExpanded` defaults FALSE, so a vertical
+           dock genuinely collapses its `block-size`). The vertical plate's
+           bg/border/padding/radius now MORPH on the SAME `--dock-expand-t` scalar
+           the horizontal chrome rides (the morph.css `.glass-dock.vertical` interp +
+           padding axis-inverse + the radius arm below) — the chrome follows the
+           box-size morph, no discrete snap. NO root CSS-transition on the morph-
+           chrome props is re-added (a `transition: padding/background/border-color`
+           arm is the second-clock smell the single-scalar rebuild forbids — the
+           `--dock-expand-t` interp is the single authority). KEPT: the DECORATIVE
+           hover-scale + press-squish (the individual `scale`/`transform`) and the
+           box-shadow fade — interaction polish on the rail, NOT the morph chrome. */
         transition:
             box-shadow var(--dock-motion-standard),
             transform var(--dock-motion-resize),
@@ -318,6 +340,22 @@
         border-radius: var(--radius-xl);
     }
 
+    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL big-dock CARD radius MORPHS on the
+       SAME `--dock-expand-t` scalar the horizontal `.shape-card` rides (the radius
+       arm of the vertical chrome un-gate; it lives in shell.css beside the horizontal
+       arm, not morph.css). `--radius-pill` at expand-t 0 (collapsed), the finite
+       `--dock-card-radius` at expand-t 1 (expanded) — the radius follows the box-size
+       block morph, no discrete snap. The static `.shape-pill`/`.shape-rounded` rest
+       radii above are the rest endpoints for those shapes; this is the card shape's
+       interpolated radius (mirroring the horizontal `:not(.vertical).shape-card`). */
+    .glass-dock.vertical.shape-card {
+        border-radius: calc(
+            var(--radius-pill) +
+                (var(--dock-card-radius) - var(--radius-pill)) *
+                var(--dock-expand-t, 1)
+        );
+    }
+
     /* AW.W3b — horizontal-root shape rules. The `shape-*` class once bound ONLY under
        the vertical surface; on a horizontal dock the prop silently no-op'd (the root
        hardwired `--radius-dock` = `--radius-pill`). These rules close that

package/src/styles/dock.css

@@ -67,6 +67,38 @@
     initial-value: 0;
 }
 
+/* BB.W-DOCK-MORPH-FAMILY (e) — the `@property`-registered dock-scale axis. The
+   dock-scale cascade is `--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale,
+   1))` (tokens/sizing.css). UNregistered, that `calc()` substitutes ONCE at `:root`
+   against the `:root` identity `--dock-local-scale: 1`, so a consumer-scope
+   `--dock-local-scale` override is INHERITED but never RE-EVALUATED — the dock keeps
+   `--dock-scale: calc(1 * 1)` and stays at the unscaled base (the 3rd recurrence of
+   the AX.W55 substitution-vs-inheritance trap; the documented-but-broken `:root`
+   preset). Registering `--dock-local-scale` as an INHERITING `@property <number>`
+   makes a registered inheriting custom property re-substitute PER-ELEMENT, so a
+   `--dock-local-scale` override on ANY dock scope re-evaluates the `calc()` at that
+   scope and threads the whole geometry cascade (box·pad·gap·tab·tile·glyph) down in
+   lockstep — the `:root` preset made real (the `@property --dock-morph-t` house
+   idiom above is the precedent). `--dock-scale` itself is ALSO registered (the
+   derived axis) so its `calc()` re-resolves per-element when `--dock-local-scale`
+   shifts. ADDITIVE ONLY: `initial-value: 1` is the identity, so at the default
+   `--dock-local-scale: 1` the resolved `--dock-scale` is byte-IDENTICAL to HEAD (no
+   rung re-tune); the `@media (pointer: coarse)` re-declare (overflow.css) STAYS the
+   `:root`-equivalent re-resolve, and this registration is the complementary
+   non-`:root`-scope thread. DOCK_SPRING is untouched (this is a token registration,
+   not a clock). */
+@property --dock-local-scale {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+
+@property --dock-scale {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+
 @layer components {
     :where(
         .glass-dock,

package/src/styles/drawer.css

@@ -1,21 +1,35 @@
 /*
- * drawer.css — Detented bottom-sheet grammar (AN.W3).
+ * drawer.css — Detented bottom-sheet grammar (AN.W3; BB.W-DRAWER-ABROGATE).
  *
- * vaul-vue owns the snap math (the spring transform between snap-points, the
- * drag-resistance overshoot, the `data-vaul-*` state attributes). glass-ui owns
- * the LOOK: the glass sheet surface, the rounded peek handle, the snap-stop
- * indicator rules, and the drag-resistance feel-tuning. This file is the
- * substrate so a consumer mounting `<Drawer mode="live-behind">` does not
- * re-author the three detents from scratch.
+ * THE HOUSE owns the snap math end-to-end now (vaul-vue ABROGATED). The Drawer
+ * family composes the reka `DialogRoot`/`DialogPortal`/`DialogContent` headless
+ * substrate (the SAME vueuse-free substrate every other compound wrapper binds),
+ * and the snap settle is driven by ONE house `SpringProgress` on the `DRAWER_SNAP`
+ * register (`useDrawerSnap.ts`, the §6 dock-morph `linear()` clock — NOT a bespoke
+ * `cubic-bezier(.32,.72,0,1)` transition; that was vaul's). The engine writes the
+ * `--glass-drawer-t` snap-fraction scalar (0 = closed/offscreen, 1 = the fullest
+ * detent) the content root reads as its translate; this file owns the LOOK: the
+ * glass sheet surface, the rounded peek handle, the snap-stop indicator rules, and
+ * the detent-fill geometry. This file is the substrate so a consumer mounting
+ * `<Drawer mode="live-behind">` does not re-author the three detents from scratch.
  *
  * Token-first — every visual axis reads a custom property. Consumers retune
  * the sheet by overriding the rungs below, never by editing this file.
  */
 
+/* The snap-fraction scalar the house `useDrawerSnap` engine writes per frame. The
+ * content root's inline `transform` reads it (DrawerContent.vue) — typed so the
+ * default (1 = fully open) keeps a no-snap content-sized sheet seated open. */
+@property --glass-drawer-t {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 1;
+}
+
 :root {
     /* Detent grammar knobs — overridable per-consumer */
     --drawer-handle-w: 2.25rem;
-    --drawer-handle-h: 0.3125rem; /* 5px — vaul's hit-target rhythm */
+    --drawer-handle-h: 0.3125rem; /* 5px — the iOS grip hit-target rhythm */
     --drawer-handle-color: var(--muted-foreground);
     --drawer-handle-opacity: 0.45;
     --drawer-handle-opacity-active: 0.85;
@@ -23,14 +37,15 @@
 }
 
 /*
- * The sheet surface. Replaces the prior inline-Tailwind triplet on
- * DrawerContent.vue so the glass tier + the snap transform feel live in one
+ * The sheet surface. The glass tier + the snap-translate feel live in one
  * token-driven place. The fixed/inset/z-index layout stays here too.
  *
- * NOTE: vaul-vue sets `transition: transform .5s cubic-bezier(.32,.72,0,1)` and
- * `touch-action: none` on `[data-vaul-drawer]` from its injected stylesheet —
- * that IS the drag-resistance spring curve. We do NOT override `transition` so
- * the snap feel is preserved; we layer border-radius + glass surface on top.
+ * NOTE: the snap motion is the house `useDrawerSnap` `SpringProgress` writing
+ * `--glass-drawer-t`, which the content root's inline `transform` reads (the §6
+ * doctrine — ONE motion vocabulary, no `transition: transform` curve injected on
+ * `[data-glass-drawer]`). `touch-action: none` on the handle keeps the drag gesture
+ * from scrolling the page. We layer border-radius + glass surface on top of the
+ * spring-driven translate.
  */
 .glass-drawer {
     position: fixed;
@@ -101,24 +116,26 @@
 }
 
 /*
- * Detented (snap-point) sheets fill the viewport height. vaul positions the
- * sheet by translating it DOWN by `innerHeight - (fraction * innerHeight)` —
- * so for a snap fraction to read as that fraction OF THE VIEWPORT, the sheet's
- * top must sit at the viewport top when fully open (offset 0). A `height: auto`
- * content sheet would instead translate off-screen. vaul tags the snap case via
- * `[data-vaul-snap-points=true]`; we fill height there and let the content
+ * Detented (snap-point) sheets fill the viewport height. The house engine positions
+ * the sheet by translating it along its drag axis by `(1 - --glass-drawer-t) * 100%`
+ * (DrawerContent.vue's inline transform) — so for a snap fraction to read as that
+ * fraction OF THE VIEWPORT, the sheet's top must sit at the viewport top when fully
+ * open (translate 0). A `height: auto` content sheet would instead translate
+ * off-screen. The content root tags the multi-detent case via
+ * `[data-glass-drawer-snap-points=true]`; we fill height there and let the content
  * scroll inside.
  */
-.glass-drawer[data-vaul-snap-points="true"] {
+.glass-drawer[data-glass-drawer-snap-points="true"] {
     height: 100%;
     max-height: 100%;
     margin-top: 0;
 }
 
-/* Live-behind direction variants — vaul tags the root with the drag axis.
-   Bottom is the default + the F-side pattern; the others ride the same surface
-   so a top/side live-behind sheet inherits the grammar. */
-.glass-drawer[data-vaul-drawer-direction="top"] {
+/* Direction variants — the content root tags itself with the drag axis
+   (`data-glass-drawer-direction`). Bottom is the default; the others ride the same
+   surface so a top/side sheet inherits the grammar. The side-lens (left/right) is
+   the BB-2 full-slide axis — it pins to its edge + fills the cross axis. */
+.glass-drawer[data-glass-drawer-direction="top"] {
     bottom: auto;
     top: 0;
     margin-top: 0;
@@ -128,11 +145,35 @@
     border-radius: 0 0 var(--radius-panel) var(--radius-panel);
 }
 
+.glass-drawer[data-glass-drawer-direction="left"],
+.glass-drawer[data-glass-drawer-direction="right"] {
+    inset-inline: auto;
+    inset-block: 0;
+    height: 100%;
+    max-height: 100%;
+    width: min(24rem, 92vw);
+    margin: 0;
+    border: 1px solid var(--glass-border-overlay);
+}
+
+.glass-drawer[data-glass-drawer-direction="left"] {
+    left: 0;
+    border-left: 0;
+    border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
+}
+
+.glass-drawer[data-glass-drawer-direction="right"] {
+    right: 0;
+    border-right: 0;
+    border-radius: var(--radius-panel) 0 0 var(--radius-panel);
+}
+
 /*
  * Peek handle — the rounded grip at the top of the sheet. It is the visual
- * affordance the user drags to cycle peek → half → full. vaul-vue intensifies
- * the grip on `:active` via its own `[data-vaul-handle]` rules when the consumer
- * uses `<DrawerHandle>`; this is the glass-ui default grip for the common case.
+ * affordance the user drags to cycle peek → half → full. The house snap engine
+ * (`useDrawerSnap`) binds the pointer-drag gesture directly on this handle (the
+ * `[data-glass-drawer-handle]` element) and flags it `[data-dragging]` while a drag
+ * is in flight, so the grip intensifies "live" during the gesture.
  */
 .glass-drawer-handle {
     flex-shrink: 0;
@@ -154,10 +195,11 @@
         width var(--duration-fast) var(--ease-out);
 }
 
-/* While the sheet is being dragged vaul exposes the gesture; intensify the grip
-   so the affordance reads as "live". `:active` covers the pointer-held case for
-   the default grip; consumers using vaul's `<DrawerHandle>` get its own active
-   rule in addition. */
+/* While the sheet is being dragged the house engine flags the handle
+   `[data-dragging]`; intensify the grip so the affordance reads as "live".
+   `:active` covers the pointer-held case + `[data-dragging]` covers the captured
+   drag; the hover lift is the rest affordance. */
+.glass-drawer-handle[data-dragging] .glass-drawer-grip,
 .glass-drawer-handle:active .glass-drawer-grip,
 .glass-drawer:hover .glass-drawer-grip {
     opacity: var(--drawer-handle-opacity-active);
@@ -170,7 +212,8 @@
  * `.glass-drawer-snap-rule` to a separator element inside the sheet; it reads as
  * the detent boundary line without competing with the content. This is the
  * "snap-stop visual indicator" the spec asks for, expressed as an opt-in class
- * (the detents themselves are positional, owned by vaul; the RULE is the look).
+ * (the detents themselves are positional, owned by the house snap engine; the
+ * RULE is the look).
  */
 .glass-drawer-snap-rule {
     height: 1px;
@@ -179,8 +222,11 @@
     background-color: var(--drawer-snap-rule-color);
 }
 
-/* Reduced-motion — vaul's transform transition is its own; we only suppress the
-   grip's affordance animation so the handle does not pulse for PRM users. */
+/* Reduced-motion — the house `SpringProgress` snaps the detent deterministically
+   under `prefers-reduced-motion: reduce` (its `respectReducedMotion` jumps the
+   `--glass-drawer-t` scalar to target in one frame, zero motion frames); here we
+   only suppress the grip's affordance animation so the handle does not pulse for
+   PRM users. */
 @media (prefers-reduced-motion: reduce) {
     .glass-drawer-grip {
         transition: none;

package/src/styles/glass/deep.css

@@ -0,0 +1,44 @@
+/* glass/deep.css — BB.W-DEEP-GLASS — the OPT-IN `.glass-deep` decoration.
+ *
+ * The deep-glass register: the maximal iOS-27 Liquid-Glass tier ABOVE the
+ * W-GLASS-CAL calm default (the Apple `saturate(1.8) blur(20px)` family, landed
+ * at the budget-clearing 16px / saturate 1.5; tokens/glass-deep.css). `.glass-deep`
+ * is the OPT-IN surface — a consumer adds it to a glass surface that wants the
+ * thick refractive liquid read (the hero glass, the dock, the CTA); the bare
+ * content default is UNCHANGED (the calm default is the user's call).
+ *
+ * ── The token-substitution model (the `.glass-opaque` precedent) ───────────
+ * `.glass-deep` is a DECORATION ON a base `.glass-*` rung, NOT a parallel solid/
+ * blur recipe. It mirrors `.glass-opaque` (ladder.css §opaque-escape — which only
+ * sets `--glass-level: 0`, a token re-point, never a competing `backdrop-filter`):
+ * `.glass-deep` re-points the floating-rung blur token to the deep family
+ * (`--glass-blur-floating: var(--glass-blur-deep)`), so the base `.glass-floating`
+ * rule's `backdrop-filter: var(--glass-blur-floating)` resolves to the DEEP blur —
+ * NO cascade fight, NO base-rule edit, the glass edge/rim/under-shadow + the W55
+ * tint axis + the a11y brackets all compose unchanged. The deep tier rides a base
+ * rung exactly as `.glass-opaque` does (the CardTier map is `deep →
+ * 'glass-floating glass-deep'`).
+ *
+ * Because the deep blur (glass-deep.css) COMPOSES `var(--glass-level)`, the a11y
+ * brackets (`prefers-reduced-transparency: reduce` / `prefers-contrast: more` set
+ * `--glass-level: 0` / 0.3 at :root, a11y-fallback.css) reach the deep plate for
+ * FREE — the deep blur collapses to blur(0) under reduced-transparency through the
+ * SAME level path (the opaque escape). The W55 bright-bucket darken reaches the
+ * deep surface by construction too: `.glass-deep` is composed WITH `.glass-floating`,
+ * which is already in the W55 `@container style(--glass-backdrop: light)` material
+ * group (ladder.css) AND self-engages the overlay-band darken — the deep tier
+ * inherits the legibility tint with no selector-list edit.
+ *
+ * @import-ed in glass.css AFTER ladder.css/surfaces.css (the same @layer components,
+ * source-order-after so the token re-point lands beside the rung it rides) and
+ * BEFORE the a11y @media brackets (which still win by the :root level re-point).
+ */
+@layer components {
+    /* The deep decoration: re-point the floating rung's blur token to the deep
+       family. The base `.glass-floating` rule (`backdrop-filter:
+       var(--glass-blur-floating)`) then paints the deep `blur(16px) saturate(1.5)`
+       at `--glass-depth: 1` — the Apple-deep register, opt-in. */
+    .glass-deep {
+        --glass-blur-floating: var(--glass-blur-deep);
+    }
+}