@mkbabb/glass-ui 3.13.0 → 4.0.1

package/dist/styles/dock/rail-extend.css

@@ -28,10 +28,13 @@
  */
 @layer components {
     :root {
-        /* The beyond-edge overrun length — how far the hairline runs PAST the dock
-           content box. A proportioned default (a touch more than a dock control); a
-           consumer retunes per-instance. Rides `--dock-scale` so it tracks the
-           coarse-pointer density thread the rest of the dock floor speaks. */
+        /* BA.W-DOCK-SECTIONS RE-SEMANTIC — the SYMMETRIC dual-side overrun length. The
+           seam line crosses THROUGH the dock and protrudes past BOTH edges by this
+           amount each side (the line's cross-extent = dock extent + 2× this knob,
+           centered on the seam). Was a one-way connector length pre-wave; now the
+           per-side overrun of the dual-side seam line. A proportioned default (a touch
+           more than a dock control); rides `--dock-scale` so it tracks the coarse-pointer
+           density thread the rest of the dock floor speaks. */
         --dock-rail-extend-length: calc(2.5rem * var(--dock-scale, 1));
     }
 
@@ -72,128 +75,198 @@
         pointer-events: auto;
     }
 
-    /* AZ.W-RAIL3 — the slot hangs the floating carousel BELOW the dock's bottom edge
-       for BOTH orientations. The slot's top sits AT the dock's bottom edge
-       (`inset-block-start: 100%`) and the strip (a horizontal chip carousel) lives
-       wholly BELOW the dock. The slot anchors at the dock's LEADING (inline-start)
-       edge but is NOT clamped to the dock's width (`inset-inline-end: auto`), so a
-       carousel WIDER than a narrow vertical column overflows past the dock's inline
-       extent — the "floating carousel" that overflows OUTSIDE the dock (the box stays
-       INVIOLATE because the slot is `position: absolute`, never feeding the dock's
-       intrinsic size). The connective hairline (`.dock-hairline-extend::before`) is
-       center-aligned over the strip so it reads as a connector from the dock edge. */
+    /* BA.W-DOCK-SECTIONS — THE DIVIDER-SEAM RE-SEAT (the 4th-rail re-conception; the
+       midline/edge seat workaround #4 is DELETED, inv-6). The rail line co-locates with
+       a NAMED `<DockSeparator anchor>` seam: GlassDock measures that separator's offset
+       within the frame and writes `--dock-rail-seam-offset` (the cross-axis center of the
+       divider). The slot anchors AT the seam — NOT `50%` (the vertical midline workaround
+       the H1 band motivated), NOT the dock edge — and the line OVERRUNS BOTH dock edges
+       by `--dock-rail-extend-length` each side (a SYMMETRIC dual-side overrun, replacing
+       the one-way connector). The chips fan FLUSH alongside the line. Because the slot is
+       `position: absolute` on the non-clipping frame, the dock box stays INVIOLATE (it
+       feeds NO size into the dock's intrinsic box — proof:rail-extend box-equality holds).
+
+       FALLBACK: when no anchored separator is present `--dock-rail-seam-offset` is unset;
+       the `var(…, 50%)`-FREE fallback seats the line at the dock's near edge via the
+       extent default (never the midline seat). */
+
+    /* VERTICAL (column) dock — the rail is a HORIZONTAL line. It anchors on the BLOCK
+       axis at the ℱ-separator's Y (the seam offset) and overruns on the INLINE axis past
+       BOTH the leading and trailing edges: the slot starts `--dock-rail-extend-length`
+       LEFT of the dock and its inline extent is the dock width + 2× the overrun, so the
+       line protrudes symmetrically each side. The chips fan FLUSH in the trailing gutter
+       (translated past the dock's trailing edge). */
     .glass-dock-frame[data-has-rail].vertical .dock-hairline-slot {
-        inset-inline-start: 100%;
-        /* seat the carousel CENTERED beside the dock column. A top-anchored seat
-           collides with the page H1/breadcrumb band at scroll-top (any fixed offset
-           from the dock top lands in it at some viewport); the vertical center is
-           stable across viewport heights and reads as the carousel riding the dock's
-           midline, clear of the title band. */
-        inset-block-start: 50%;
+        inset-block-start: var(--dock-rail-seam-offset, 0px);
         inset-block-end: auto;
+        inset-inline-start: calc(-1 * var(--dock-rail-extend-length));
+        inset-inline-end: auto;
+        /* the line's inline extent = dock width + 2× overrun (symmetric, centered). */
+        inline-size: calc(100% + 2 * var(--dock-rail-extend-length));
         translate: 0 -50%;
         flex-direction: row;
-        align-items: flex-start;
+        align-items: center;
         justify-content: flex-start;
     }
+    /* HORIZONTAL (row) dock — the rail is a VERTICAL line. It anchors on the INLINE axis
+       at the nav-separator's X (the seam offset) and overruns on the BLOCK axis past BOTH
+       the top and bottom edges: the slot starts `--dock-rail-extend-length` ABOVE the
+       dock and its block extent is the dock height + 2× the overrun. The chips fan FLUSH
+       above the line (translated above the dock's top edge so they stay ON-SCREEN for a
+       viewport-bottom-anchored dock). */
     .glass-dock-frame[data-has-rail]:not(.vertical) .dock-hairline-slot {
-        inset-block-end: 100%;
-        inset-inline-start: 0;
+        inset-inline-start: var(--dock-rail-seam-offset, 0px);
         inset-inline-end: auto;
+        inset-block-start: calc(-1 * var(--dock-rail-extend-length));
+        inset-block-end: auto;
+        /* the line's block extent = dock height + 2× overrun (symmetric, centered). */
+        block-size: calc(100% + 2 * var(--dock-rail-extend-length));
+        translate: -50% 0;
         flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-end;
+        align-items: center;
+        justify-content: flex-start;
     }
 
-    /* AZ.W-RAIL3 — the FLOATING CAROUSEL strip. The hairline element is the wrapper
-       that carries (a) a VISIBLE connective hairline running from the dock edge down
-       to the strip (the user's "the hairline must visibly connect") and (b) the
-       `.dock-hairline-strip` — a flex row of detached glass chips, the floating
-       carousel that overflows OUTSIDE the dock box (the third-rail redirect: the
-       contextual facets are no longer in-dock layers; they are the rail's content). */
+    /* BA.W-DOCK-SECTIONS — the seam wrapper. It FILLS the slot (which is already the
+       dock + 2× overrun, centered on the seam) and carries (a) the `::before` seam line
+       running the full extent and (b) the `.dock-hairline-strip` — the flush fan of
+       glass chips butted to the line (the macOS fan-out, rectilinear; NOT a 40px-adrift
+       carousel). The chips paint OUTSIDE the dock box (the slot is a `.glass-dock-frame`
+       sibling — R4 / box INVIOLATE). */
     .dock-hairline-extend {
         position: relative;
         display: flex;
         gap: 0;
+        inline-size: 100%;
+        block-size: 100%;
     }
-    /* Vertical dock — connector (a horizontal line) then the chip COLUMN, left-to-right
-       (the carousel rides BESIDE the dock in its trailing gutter). */
+    /* Vertical dock — the seam is a horizontal line at the slot's block center; the chip
+       ROW fans FLUSH just past the dock's trailing edge, butted to the line. */
     .dock-hairline-extend.vertical {
         flex-direction: row;
-        align-items: flex-start;
+        align-items: center;
+        justify-content: flex-end;
     }
-    /* Horizontal dock — the strip sits ABOVE: stack the chip-row then the connector
-       bottom-up (column-reverse puts the first child, the connector, at the BOTTOM,
-       nearest the dock's top edge — so a viewport-bottom-anchored dock keeps its
-       carousel ON-SCREEN above it). */
+    /* Horizontal dock — the seam is a vertical line at the slot's inline center; the chip
+       COLUMN/ROW fans FLUSH above the line (the viewport-bottom dock keeps it on-screen). */
     .dock-hairline-extend.horizontal {
-        flex-direction: column-reverse;
-        align-items: flex-start;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+    /* BA.W-DOCK-SECTIONS — the chips fan FLUSH at the DOCK's near edge, butted to the
+       seam line where it crosses the dock boundary (NOT at the slot's far overrun end,
+       which would re-float them adrift). The positioning rides the `<FadingScroll>`
+       WRAPPER (`.dock-hairline-fade`), NOT the strip itself — the strip stays the
+       in-flow scroll content of FadingScroll (an absolutely-positioned strip would
+       escape FadingScroll's flow → its scroll-port collapses to 0 + the mask hides the
+       chips). A vertical dock's fade rides the dock's TRAILING (inline-end) edge in its
+       gutter; a horizontal dock's fade rides the dock's TOP (block-start) edge. The seam
+       line still protrudes past BOTH edges (the `::before` spans the full slot); only the
+       CHIP fade butts the dock so it reads as a fan growing FROM the divider. */
+    .dock-hairline-fade {
+        max-inline-size: var(--dock-rail-strip-max, 60vw);
+    }
+    .dock-hairline-extend.vertical .dock-hairline-fade {
+        position: absolute;
+        inset-inline-start: calc(100% - var(--dock-rail-extend-length));
+        inset-block-start: 50%;
+        translate: 0 -50%;
+    }
+    .dock-hairline-extend.horizontal .dock-hairline-fade {
+        position: absolute;
+        inset-block-end: calc(100% - var(--dock-rail-extend-length));
+        inset-inline-start: 50%;
+        translate: -50% 0;
     }
 
-    /* R3 — the VISIBLE connective hairline. R1 — the `--border-hairline` token pair
-       (catch-light + under-shadow) + a faint background fallback so the whisper reads
-       even over a busy backdrop (the user audited "NO VISIBLE HAIRLINE"). The line
-       overruns by `--dock-rail-extend-length` (the beyond-edge extent); the
-       `min-{inline,block}-size` floor is the proof:rail-extend R3 overrun witness. */
+    /* R3 — the VISIBLE seam line (no longer a one-way connector tether). R1 — the
+       `--border-hairline` token pair (catch-light + under-shadow) + a faint background
+       fallback so the whisper reads even over a busy backdrop. BA.W-DOCK-SECTIONS: the
+       line now RUNS THE FULL SLOT EXTENT (the slot is already dock + 2× overrun,
+       centered on the seam), so it crosses THROUGH the dock and protrudes past BOTH
+       edges — ONE continuous line, NOT a 40px tether to a detached carousel. The
+       `min-{inline,block}-size: var(--dock-rail-extend-length)` floor stays as the
+       proof:rail-extend / proof:rail3 R3 overrun witness (the line is always ≥ the
+       overrun length); the `100%` width/height makes it the full symmetric seam. The
+       tether `margin` is GONE — the chips fan FLUSH against the line (S3). */
     .dock-hairline-extend::before {
         content: "";
         flex: 0 0 auto;
+        position: absolute;
         box-shadow: var(--border-hairline);
         background: var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 45%, transparent));
     }
-    /* Vertical dock connector — a HORIZONTAL line running right from the dock's
-       trailing edge to the chip column, seated near the dock's vertical center. */
+    /* Vertical dock — a HORIZONTAL line spanning the FULL slot inline extent (dock +
+       2× overrun), seated on the seam Y; the chips fan flush in the trailing gutter. */
     .dock-hairline-extend.vertical::before {
         block-size: 1px;
-        inline-size: var(--dock-rail-extend-length);
+        inline-size: 100%;
         min-inline-size: var(--dock-rail-extend-length);
-        align-self: center;
-        margin-inline-end: 0.25rem;
+        inset-block-start: 50%;
+        inset-inline-start: 0;
+        translate: 0 -50%;
     }
-    /* Horizontal dock connector — a VERTICAL line running up from the dock's top
-       edge to the chip row, seated near the dock's leading control center. */
+    /* Horizontal dock — a VERTICAL line spanning the FULL slot block extent (dock +
+       2× overrun), seated on the seam X; the chips fan flush above the line. */
     .dock-hairline-extend.horizontal::before {
         inline-size: 1px;
-        block-size: var(--dock-rail-extend-length);
+        block-size: 100%;
         min-block-size: var(--dock-rail-extend-length);
-        margin-inline-start: calc(var(--dock-control-size, 1.75rem) * 0.5);
-        margin-block-start: 0.25rem;
+        inset-inline-start: 50%;
+        inset-block-start: 0;
+        translate: -50% 0;
     }
 
-    /* `extent="inset"` keeps the connector flush at the edge (no overrun). */
+    /* `extent="inset"` zeroes the overrun (the line stays flush within the dock edges —
+       the slot's `inline-size`/`block-size` collapse to the dock box, no protrusion). */
     .dock-hairline-extend.extent-inset.vertical::before {
-        inline-size: 0;
         min-inline-size: 0;
     }
     .dock-hairline-extend.extent-inset.horizontal::before {
-        block-size: 0;
         min-block-size: 0;
     }
+    .glass-dock-frame[data-has-rail].vertical .dock-hairline-slot:has(.extent-inset) {
+        inset-inline-start: 0;
+        inline-size: 100%;
+    }
+    .glass-dock-frame[data-has-rail]:not(.vertical) .dock-hairline-slot:has(.extent-inset) {
+        inset-block-start: 0;
+        block-size: 100%;
+    }
 
-    /* The carousel strip — a flex run of chips that SCROLLS when the chips exceed the
-       budget (the common 2-4-facet case fits with no scroll; a larger set cycles).
-       `scroll-snap` gives the carousel detent feel. The strip paints OUTSIDE the dock
-       box (it is in the `.dock-hairline-slot`, a `.glass-dock-frame` sibling — R4). */
+    /* BA.W-DOCK-SECTIONS — the FLUSH chip fan. The chips butt the seam line (NO adrift
+       tether — the strip's positioning context is the seam wrapper, not a 40px offset).
+       The strip keeps `scroll-snap` (the carousel detent) + a single `overflow` axis as
+       the proof:rail3 R5 cyclable witness, but the PRIMARY scroll-fade port is the
+       `<FadingScroll>` wrapper DockRail composes (S5 — the bespoke overflow strip is the
+       inert inner fallback; FadingScroll owns the edge fade, no duplicate mask here). */
     .dock-hairline-strip {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         gap: var(--dock-rail-strip-gap, 0.375rem);
         scrollbar-width: none;
         padding: 0.125rem;
+        /* the collapse-retract origin: the chips translate/fade INTO the rail toward the
+           seam on collapse, leaving the stub protrusion. The rest state is full-out. */
+        transition:
+            opacity var(--duration-normal) var(--ease-standard),
+            translate var(--duration-normal) var(--dock-resize-spring, var(--ease-standard));
     }
     .dock-hairline-strip::-webkit-scrollbar {
         display: none;
     }
-    /* Vertical dock → a COLUMN carousel beside the dock, scrolls on the block axis. */
+    /* Vertical dock → a ROW of chips beside the dock, flush to the horizontal seam;
+       scrolls on the inline axis when they exceed the budget. */
     .dock-hairline-extend.vertical .dock-hairline-strip {
-        flex-direction: column;
-        max-block-size: var(--dock-rail-strip-max, 60vh);
-        overflow-y: auto;
-        overflow-x: visible;
-        scroll-snap-type: y proximity;
+        flex-direction: row;
+        max-inline-size: var(--dock-rail-strip-max, 60vw);
+        overflow-x: auto;
+        overflow-y: visible;
+        scroll-snap-type: x proximity;
     }
-    /* Horizontal dock → a ROW carousel above the dock, scrolls on the inline axis. */
+    /* Horizontal dock → a ROW of chips above the dock, flush to the vertical seam;
+       scrolls on the inline axis when they exceed the budget. */
     .dock-hairline-extend.horizontal .dock-hairline-strip {
         flex-direction: row;
         align-items: center;
@@ -206,6 +279,30 @@
         scroll-snap-align: start;
     }
 
+    /* BA.W-DOCK-SECTIONS — THE COLLAPSE-RETRACT (the macOS fan-out retraction; the brief
+       + R8-6 fan-out half). When the dock collapses the chips fold back behind a slight
+       protruding stub at the dock edge: they translate along the seam axis INTO the rail
+       and fade, the seam line keeping a SLIGHT protrusion (the rail never detaches — it
+       retracts along the seam axis). The stub fraction is `--dock-rail-retract-stub`. */
+    .glass-dock.collapsed ~ .dock-hairline-slot .dock-hairline-strip,
+    .glass-dock-frame:has(.glass-dock.collapsed) .dock-hairline-strip {
+        opacity: 0;
+        translate: calc(var(--dock-rail-extend-length) * (1 - var(--dock-rail-retract-stub, 0.35)))
+            0;
+    }
+    .glass-dock.collapsed ~ .dock-hairline-slot .dock-hairline-extend.horizontal .dock-hairline-strip,
+    .glass-dock-frame:has(.glass-dock.collapsed) .dock-hairline-extend.horizontal .dock-hairline-strip {
+        translate: 0
+            calc(-1 * var(--dock-rail-extend-length) * (1 - var(--dock-rail-retract-stub, 0.35)));
+    }
+    /* PRM — snap to the retracted state, no travel (the retract must not animate under
+       reduced motion; only the discrete opacity/position endpoints apply). */
+    @media (prefers-reduced-motion: reduce) {
+        .dock-hairline-strip {
+            transition: none;
+        }
+    }
+
     /* Each chip — a detached FLOATING glass pill (R4-1's register, now a label-bearing
        carousel chip, auto-width). It is chrome OUTSIDE the dock substrate, so it
        carries its OWN glass plate (the floating-tier fill + edge-light rim + soft

package/dist/styles/dock/section.css

@@ -0,0 +1,59 @@
+/* BA.W-DOCK-SECTIONS — the <DockSection> tripartite grouping recipe + (in .2) the
+ * seam fan-out / retract chrome.
+ *
+ * THE THREE-ZONE GESTALT (R8-9 — "the docks COMPLETELY lack sections"). The
+ * <DockSection> chassis groups the dock's already-in-flow controls into a
+ * rail-core | divided sections | nav silhouette and demarcates the zones with the
+ * existing <DockSeparator> primitive — NO box-inflation (the section grouping is the
+ * controls already in the dock plus the divider seams; it does NOT re-mount a
+ * <DockLayerGroup> switcher rail, the W-RAIL3 inflator that demanded column height).
+ *
+ * The chassis is layout-transparent by default: `display: contents` so the zones flow
+ * exactly as the bare controls did (the dock box shrink-wraps as before — the
+ * box-INVIOLATE contract). The zone wrappers carry the kind marker the recipe reads;
+ * they add NO size of their own. On a vertical (column) dock the section runs as a
+ * column; on a horizontal (row) dock it runs as a row — inheriting the dock's own
+ * flex axis, never establishing a competing one.
+ *
+ * @import-ed by dock.css into the SAME `@layer components` as the other dock partials.
+ */
+@layer components {
+    /* The chassis root is layout-transparent — the zones inherit the dock's flex flow
+       (row or column) directly, so grouping into sections adds zero box. */
+    .dock-section {
+        display: contents;
+    }
+
+    /* A grouped zone — a flex run of the consumer's controls along the dock's axis.
+       It owns NO intrinsic size beyond `max-content` (the controls' own size), so the
+       dock keeps shrink-wrapping to its tight pill (box INVIOLATE). The gap matches the
+       dock's inter-control rhythm. */
+    .dock-section-zone {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--dock-section-zone-gap, var(--dock-gap, 0.25rem));
+    }
+
+    /* On a vertical (column) dock the zones stack — the section runs down the rail. */
+    .glass-dock.vertical .dock-section-zone {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    /* The rail-core zone leads (the home/brand region); the nav zone trails. They are
+       the same flex run — the kind marker is for the recipe + a11y, not a layout fork.
+       The core (`data-kind="rail-core"`) zone gets a touch more breathing room from the
+       first section seam. The CSS token is `--core` (NOT `--rail-core`): the dock-band
+       "rail" noun is de-overloaded (AZ.W-DOCK-TAXONOMY); the data-attr carries the
+       spec's `rail-core` vocabulary, the class never says "rail". */
+    .dock-section-zone--core {
+        flex: 0 0 auto;
+    }
+    .dock-section-zone--nav {
+        flex: 0 0 auto;
+    }
+    .dock-section-zone--section {
+        flex: 0 1 auto;
+        min-inline-size: 0;
+    }
+}

package/dist/styles/dock/shell.css

@@ -80,7 +80,39 @@
            backdrop-filter sample does not escape the dock box (the standard nested-
            backdrop-cost mitigation; the Button-in-glass-in-dock stack re-samples the
            already-blurred buffer at each level without it). */
-        contain: paint;
+        /* BA.W-DOCK-GEOMETRY contain:paint AUDIT verdict (a) — the control-plate
+           clearance fix (the `--dock-control-safe-inset` painted-plate inset, scope
+           1) + the scroll-port cross-axis un-clip (scope 2) keep the maximal
+           hover/active control plate INSIDE the dock padding box: the inset plate is
+           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 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 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.
@@ -184,17 +216,33 @@
        scrolls — the scroll port only engages on real over-cap content. The
        block-axis morph clip stays `data-morphing`-gated above; this is the
        AT-REST port only. Consumers set `--dock-max-block-size` per-instance to
-       anchor the column to the viewport without re-deriving the scroll plumbing. */
-    .glass-dock.vertical.always-expanded:not([data-morphing]),
-    .glass-dock.vertical.expanded:not([data-morphing]) {
+       anchor the column to the viewport without re-deriving the scroll plumbing.
+
+       BA.W-DOCK-GEOMETRY (DC-1) — the port is now GATED behind the `dock-scroll-y`
+       opt-in (`overflow="scroll"`), NOT unconditional on every `.vertical.
+       always-expanded`. THE ROOT: `overflow-y: auto` is a scroll value, and CSS
+       Overflow §3 FORCES the sibling `overflow-x: visible` to COMPUTE to `auto` —
+       so the F6 pin never survived, and EVERY at-rest vertical dock (even a
+       fit-content shell that never scrolls) paid the cross-axis inline clip,
+       slicing a control's inset plate left/right (the live π readback measured
+       `overflow-x: auto` on the grow-to-fit SidebarDock). A vertical dock that
+       genuinely needs the cap+scroll opts IN via `overflow="scroll"` (the
+       `.dock-scroll-y` port in overflow.css, the SAME plumbing the F6 comment names);
+       a grow-to-fit vertical shell stays `overflow: visible` (line 186) on BOTH axes
+       so its inset control plate paints past the track. The fit-content shell pays
+       NO cross-axis clip for zero scroll benefit — the goal criterion's "the
+       scroll-port cross-axis clip no longer fires on a fit-content shell that never
+       scrolls", honored at the geometry root. */
+    .glass-dock.vertical.dock-scroll-y.always-expanded:not([data-morphing]),
+    .glass-dock.vertical.dock-scroll-y.expanded:not([data-morphing]) {
         overflow-x: visible;
         overflow-y: auto;
         scrollbar-width: none;
         overscroll-behavior-y: contain;
     }
 
-    .glass-dock.vertical.always-expanded:not([data-morphing])::-webkit-scrollbar,
-    .glass-dock.vertical.expanded:not([data-morphing])::-webkit-scrollbar {
+    .glass-dock.vertical.dock-scroll-y.always-expanded:not([data-morphing])::-webkit-scrollbar,
+    .glass-dock.vertical.dock-scroll-y.expanded:not([data-morphing])::-webkit-scrollbar {
         display: none;
     }
 
@@ -244,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),
@@ -289,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/dist/styles/dock-controls/icon-button.css

@@ -20,10 +20,20 @@
         scale: 1;
         width: var(--dock-control-size, var(--size-icon-btn));
         height: var(--dock-control-size, var(--size-icon-btn));
-        padding: var(--dock-icon-padding, 0);
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). The HIT
+           BOX stays the full `--dock-control-size` (the WCAG 2.5.5 touch floor on
+           the CELL), while the inset padding + `background-clip: content-box`
+           insets the PAINTED plate within it: the hover/active fill paints only the
+           content box (the cell minus the inset on every side), so the maximal
+           hover (×1.1) / active circle clears the cross-axis clip edge with ≥1px
+           margin — the lozenge dies at the plate diameter, not at the clip box. The
+           inset falls back to the prior `--dock-icon-padding` (0) when no dock
+           ancestor sets `--dock-control-safe-inset` (a standalone icon button). */
+        padding: var(--dock-icon-padding, var(--dock-control-safe-inset, 0));
         cursor: pointer;
         border: none;
         background: transparent;
+        background-clip: content-box;
         border-radius: var(--dock-control-radius, var(--radius-pill));
         /* Foreground base routes through `--dock-fg-on-aurora` (defaults to
            `--foreground`, byte-identical to before) so a consumer floating the