@mkbabb/glass-ui 3.13.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

@@ -33,6 +33,15 @@
     .glass-dock.dock-scroll-x .dock-layer--full {
         min-width: 0;
         overflow-x: auto;
+        /* BA.W-DOCK-GEOMETRY (DC-1) — PIN the CROSS (block) axis explicitly
+           `visible`. A single-axis `overflow-x: auto` makes the OTHER axis compute
+           from `visible` to `auto` (the MDN single-axis-clip-degrades caveat), so
+           the 40px-tall block axis would clip the 1.1× hover / full active control
+           circle top+bottom — the lozenge. Pinning `overflow-y: visible` keeps the
+           block axis genuinely un-clipped so a control's inset plate paints past the
+           track; the inline scroll port (the real over-cap content axis) is
+           untouched. */
+        overflow-y: visible;
         scrollbar-width: none;
         /* Trap the inline-scroll momentum at the dock's own boundary so a
            wheel/trackpad gesture that bottoms out the pill does NOT chain into
@@ -52,6 +61,12 @@
        source order. */
     .glass-dock.vertical.dock-scroll-y {
         overflow-y: auto;
+        /* BA.W-DOCK-GEOMETRY (DC-1) — PIN the CROSS (inline) axis explicitly
+           `visible` (the vertical-dock twin of the horizontal pin above). A
+           single-axis `overflow-y: auto` would compute the inline axis from
+           `visible` to `auto`, clipping a vertical control's inset plate left+right.
+           The block scroll port (the real over-cap axis) is untouched. */
+        overflow-x: visible;
         scrollbar-width: none;
         /* Same momentum-trap as the inline port — a rail that bottoms out must
            not chain its remaining wheel delta into the page scroller behind it. */
@@ -231,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/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/src/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;
+    }
+}