@mkbabb/glass-ui 4.0.1 → 4.2.0

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

@@ -0,0 +1,352 @@
+/* dock/stack-rail.css — BC.W-DOCK-STACK-RAIL — the macOS hover-expand STACK rail
+ * (the clean-break rebuild; the divider-carousel chip-strip RETIRED).
+ *
+ * THE KEPT CHASSIS (glass-dock-codebase.md §2.5 — "that part STAYS"). The `.glass-dock`
+ * root carries `contain: paint` + `backdrop-filter` + (on a vertical dock) `overflow` —
+ * all three hard-clip every descendant to the dock's border box, so an `#rail` rendered
+ * as a dock CHILD could never paint beyond the edge. The escape: GlassDock renders the
+ * `#rail` as a SIBLING of `.glass-dock` inside the `.glass-dock-frame` (a `display:contents`
+ * shell that becomes a NON-clipping positioning context only when `data-has-rail`). The
+ * `.dock-hairline-slot` is `position: absolute` relative to THAT shell — outside the dock's
+ * containment — so the stack VISIBLY extends beyond the dock edge into its own gutter. No
+ * `contain`, no `backdrop-filter`, no `overflow` on the shell → nothing clips it. This is
+ * the load-bearing chassis the rebuild reuses; the box stays INVIOLATE (the slot feeds NO
+ * size into the dock's intrinsic box).
+ *
+ * THE STACK (the verbatim spec — rail-spec-contradicted-divider-carousel). A `<DockStack>`
+ * is one stack: a CORE anchor item (the always-visible dock(1) glyph) + N members. On
+ * hover/focus of the core, the members FAN OUT next to the rail — a column (vertical dock)
+ * / row (horizontal dock) of FULLY-VISIBLE glass icons springing open beside the line,
+ * each a `--glass-bg-floating` glass icon (NEVER a shadowed half-tucked chip). The fan-out
+ * is compositor-only (scale/translate/opacity/filter — the `proof:no-layout-animation`
+ * floor, NO animated width/height/inset), staggered by `--dock-stack-stagger * var(--i)`.
+ *
+ * CLEARS CONTENT BY TOPOLOGY (THE HEADLINE — ba-dock-shell-gestalt-fail-revoked +
+ * ba-chip-graze). The stack lives BEYOND the dock edge in its own gutter (the
+ * `chipOverMain: false` topology), the fan extending AWAY from content, never over
+ * `<main>` / the `<h1>` / a form field at any y. The chip-graze that revoked the dock/shell
+ * PASS cannot recur.
+ *
+ * @import-ed by dock.css into the SAME `@layer components` as the other partials. */
+@layer components {
+    :root {
+        /* The beyond-edge extent — how far the stack reaches into the gutter past the dock
+           edge. Rides `--dock-scale` so it tracks the coarse-pointer density thread. (KEPT
+           token, re-conceived from the divider-carousel's symmetric overrun to the stack's
+           one-way gutter reach.) */
+        --dock-rail-extend-length: calc(2.5rem * var(--dock-scale, 1));
+        /* The macOS-stack tuning tokens (re-expressed via @theme — Tailwind-first, NEVER a
+           raw macOS-dock CSS paste). */
+        --dock-stack-stagger: 28ms; /* the per-member fan delay (× var(--i)) */
+        --dock-stack-gap: calc(0.375rem * var(--dock-scale, 1));
+        --dock-stack-member-size: calc(2rem * var(--dock-scale, 1));
+        --dock-stack-fold: 0.4; /* the at-rest fold scale (the members tuck behind the core) */
+        /* BE.W-DOCK-RAIL-REALIZE — the facet-carousel accent strength. The per-facet
+           `--glass-accent` hue rides the THIN rim/glint at this bounded whisper (the
+           BB.W-GLASS-ACCENT ≤55% rim ceiling — the warm-cream core + the AA legibility
+           survive). A consumer retunes the whole carousel's accent intensity from one
+           `:root`/scope override; the rest of the rail is byte-identical. */
+        --dock-facet-accent-strength: 48%;
+    }
+
+    /* The dock-frame wrapper — KEPT. DEFAULT (`display: contents`) is layout-transparent
+       (byte-identical no-rail path). When a `#rail` is authored it lifts to a real
+       NON-clipping positioning context so the abs-positioned slot anchors to the dock box
+       yet escapes the dock's clip. */
+    .glass-dock-frame {
+        display: contents;
+    }
+    .glass-dock-frame[data-has-rail],
+    /* BD.W-DOCK-CORE (II.2 — F-1) — a SPLITTABLE dock frame is ALSO a non-clipping
+       positioning context: the fission island + goo neck render as frame siblings of
+       `.glass-dock` and must paint OUTSIDE the dock's `contain: paint` clip box (beside/
+       above/below the source pill). Same escape the rail uses. */
+    .glass-dock-frame[data-splittable] {
+        display: inline-flex;
+        position: relative;
+        /* No containment, no overflow, no blur — the WHOLE point: the stack/island must
+           paint beyond the dock box. The wrapper shrink-wraps the dock (inline-flex) so its
+           box == the dock box and the rail/island anchors to the true edge. */
+        /* BD.W-DOCK-CORE (II.2 — F-1) — the ISLAND REACH resolved on the FRAME (the common
+           ancestor) so BOTH the pieces (inside the dock) AND the island/neck (frame
+           siblings) read ONE reach: the cluster lands exactly where the island plate
+           materializes. A `var(--dock-island-reach, 9rem)` form so a consumer ancestor
+           (a gallery tile) can retune the detach distance via a `:root`/ancestor override
+           — the frame re-PUBLISHES it (not a hard set that would shadow the override). */
+        --dock-island-reach: var(--dock-island-reach-override, 9rem);
+    }
+    .glass-dock-frame[data-has-rail].vertical,
+    .glass-dock-frame[data-splittable].vertical {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    /* The chrome-slot wrapper — a `position: absolute` sibling of `.glass-dock`, anchored
+       to the dock-frame (NOT the dock box), so the dock's clip never reaches it. It paints
+       nothing itself; `<DockStack>` owns the core + fan. The slot seats at the dock EDGE
+       (the `position` start/end), NOT a `[data-rail-anchor]` divider seam (the seam-locator
+       RETIRED). It is pass-through; the controls re-arm pointer events. */
+    .dock-hairline-slot {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 1;
+    }
+    .dock-hairline-slot > * {
+        pointer-events: auto;
+    }
+
+    /* VERTICAL (column) dock — the stack hangs off the TRAILING (inline-end) edge in its
+       gutter, the core seated at the dock's block-end (the macOS-stack anchor: the
+       bottom-most member at the dock floor, the rest fanning up the rail). The slot starts
+       at the dock's trailing edge + the extend reach, clear of <main> (which is to the
+       inline-start). */
+    .glass-dock-frame[data-has-rail].vertical .dock-hairline-slot {
+        inset-inline-start: 100%;
+        inset-inline-end: auto;
+        inset-block-end: 0;
+        inset-block-start: auto;
+        inline-size: var(--dock-rail-extend-length);
+        block-size: 100%;
+    }
+    /* HORIZONTAL (row) dock — the stack rises off the TOP (block-start) edge in its gutter
+       (a viewport-bottom dock keeps the fan ON-SCREEN above the row), the core at the dock's
+       inline-end, the members fanning up. Clear of <main> (which is above the dock). */
+    .glass-dock-frame[data-has-rail]:not(.vertical) .dock-hairline-slot {
+        inset-block-end: 100%;
+        inset-block-start: auto;
+        inset-inline-end: 0;
+        inset-inline-start: auto;
+        block-size: var(--dock-rail-extend-length);
+        inline-size: 100%;
+    }
+
+    /* ── The stack ────────────────────────────────────────────────────────────────── */
+    .dock-stack {
+        position: relative;
+        display: flex;
+        gap: var(--dock-stack-gap);
+        /* the core anchors at the gutter end nearest the dock; the fan extends AWAY into
+           the gutter (clear of content). */
+    }
+    /* Vertical dock — the stack is a ROW: core nearest the dock edge, members fanning out
+       (inline) into the trailing gutter. Anchored block-end (the bottom-most member at the
+       dock floor — the macOS-stack anchor topology). */
+    .dock-stack.vertical {
+        flex-direction: row;
+        align-items: flex-end;
+    }
+    /* Horizontal dock — the stack is a COLUMN: core nearest the dock edge (block-end),
+       members fanning UP into the gutter above the row. */
+    .dock-stack.horizontal {
+        flex-direction: column-reverse;
+        align-items: center;
+    }
+
+    /* The CORE anchor — the always-visible dock(1) glyph. A floating glass plate (it is
+       chrome OUTSIDE the dock substrate, so it carries its OWN glass register, not the
+       transparent in-dock recipe). */
+    .dock-stack-core {
+        flex: 0 0 auto;
+        z-index: 1;
+    }
+
+    /* The fanned members — the FadingScroll port (the one scroll-fade port). The fan's
+       main-axis extent caps at `--dock-stack-visible` members; an >visibleCount stack
+       scrolls (the port feathers the overflow). */
+    .dock-stack-fan {
+        display: flex;
+        gap: var(--dock-stack-gap);
+        /* scoped main-axis budget — the fan shows `--dock-stack-visible` members then
+           scrolls (the n-stack reachable by scrolling the rail, not the dock box). */
+    }
+    .dock-stack.vertical .dock-stack-fan {
+        flex-direction: row;
+        align-items: flex-end;
+        max-inline-size: calc(
+            var(--dock-stack-visible, 3) * var(--dock-stack-member-size) +
+                (var(--dock-stack-visible, 3) - 1) * var(--dock-stack-gap)
+        );
+    }
+    .dock-stack.horizontal .dock-stack-fan {
+        flex-direction: column-reverse;
+        align-items: center;
+        max-block-size: calc(
+            var(--dock-stack-visible, 3) * var(--dock-stack-member-size) +
+                (var(--dock-stack-visible, 3) - 1) * var(--dock-stack-gap)
+        );
+    }
+
+    /* Each member — a FULLY-VISIBLE glass icon (the `--glass-bg-floating` tier + the
+       catch-light rim), NEVER a shadowed half-tucked chip (the "NOT shadowed" verbatim
+       ask). It composes the `.dock-icon-button` base; the stack-scoped surface override
+       (0,2,0) beats the base `.dock-icon-button` (0,1,0) on source-order tie without
+       `!important`. */
+    .dock-stack-fan .dock-stack-member {
+        flex: 0 0 auto;
+        inline-size: var(--dock-stack-member-size);
+        block-size: var(--dock-stack-member-size);
+        background: var(--glass-bg-floating);
+        backdrop-filter: var(--glass-blur-floating);
+        -webkit-backdrop-filter: var(--glass-blur-floating);
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-specular),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
+        border-radius: var(--radius-pill);
+        color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 88%, transparent);
+        /* THE FAN-OUT — compositor-only (scale/translate/opacity/filter), NO animated
+           width/height/inset (proof:no-layout-animation). At rest each member is folded
+           behind the core: scaled-down, translated toward the rail (the dock edge),
+           transparent, and a slight materialize blur. The hover-expand springs them OUT
+           staggered by `--dock-stack-stagger * var(--i)` in reading order. */
+        opacity: 0;
+        scale: var(--dock-stack-fold);
+        filter: blur(1px);
+        transition:
+            opacity var(--duration-fast) var(--ease-out)
+                calc(var(--dock-stack-stagger) * var(--i, 0)),
+            scale var(--spring-dock-duration, var(--duration-normal)) var(--spring-dock, var(--ease-out))
+                calc(var(--dock-stack-stagger) * var(--i, 0)),
+            translate var(--spring-dock-duration, var(--duration-normal)) var(--spring-dock, var(--ease-out))
+                calc(var(--dock-stack-stagger) * var(--i, 0)),
+            filter var(--duration-fast) var(--ease-out)
+                calc(var(--dock-stack-stagger) * var(--i, 0)),
+            background-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+    /* Vertical dock — at rest the members tuck toward the dock edge (inline-start). */
+    .dock-stack.vertical .dock-stack-member {
+        translate: calc(-1 * var(--dock-rail-extend-length)) 0;
+    }
+    /* Horizontal dock — at rest the members tuck DOWN toward the dock edge (block-end). */
+    .dock-stack.horizontal .dock-stack-member {
+        translate: 0 var(--dock-rail-extend-length);
+    }
+    /* EXPANDED — the members spring OUT to their fanned positions (full scale, in place,
+       opaque, crisp). The stagger lives in the per-member transition-delay. */
+    .dock-stack.is-expanded .dock-stack-member {
+        opacity: 1;
+        scale: 1;
+        translate: 0 0;
+        filter: blur(0);
+    }
+    .dark .dock-stack-fan .dock-stack-member {
+        box-shadow:
+            var(--glass-edge-light-dark),
+            var(--glass-specular-dark),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
+    }
+    /* The hover/active register — the floating plate firms, the glyph wakes (NOT a
+       saturated brand hue; the selected-reads-as-glass tier, W-REGISTER-IOS). */
+    .dock-stack-fan .dock-stack-member:hover {
+        background: var(--dock-control-hover-bg, var(--glass-bg-resting));
+        color: var(--dock-fg-on-aurora, var(--foreground));
+    }
+    .dock-stack-fan .dock-stack-member.is-active {
+        background: var(--dock-control-active-bg, var(--glass-bg-floating));
+        color: var(--dock-fg-on-aurora, var(--foreground));
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-specular),
+            0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent);
+    }
+    .dark .dock-stack-fan .dock-stack-member.is-active {
+        box-shadow:
+            var(--glass-edge-light-dark),
+            var(--glass-specular-dark),
+            0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent);
+    }
+    .dock-stack-fan .dock-stack-member svg {
+        inline-size: 0.875rem;
+        block-size: 0.875rem;
+        flex-shrink: 0;
+    }
+
+    /* ── The FACET-carousel mode (BE.W-DOCK-RAIL-REALIZE) ─────────────────────────────
+       The re-instated AZ context carousel: each member is a context FACET CHIP carrying
+       its OWN `--glass-accent` hue (written per-chip by DockStack in facets mode), so the
+       strip reads as a row of distinct accent-tinted contexts — NOT the macOS un-tinted
+       glyph fan. The chip composes its rim+glint DIRECTLY from the per-instance
+       `--glass-accent`/`--glass-accent-strength` axis (the SAME `color-mix(in oklab, …)`
+       seam `glass/rim.css` composes for `.glass-material` — NOT a fork): the warm rim ink
+       mixes toward the facet hue at the bounded strength, so each facet's RIM + the inner
+       glint carries that context's color. At the resting `transparent`/`0%` no-op this is
+       byte-identical to the stack member; the facet hue is the consumer's context color
+       (presets-in-consumers — never a library token). The active facet stays on the
+       selected-as-glass `--dock-control-active-bg` tier (W-REGISTER-IOS — the lift is the
+       glass tier, the accent is the rim DECORATION; the two are disjoint). */
+    .dock-stack-fan .dock-facet-chip {
+        /* the accent-composed rim — the warm catch-light ink mixed toward the facet hue
+           (the rim.css `--glass-material-rim` seam, inlined for the chip). At 0% it is the
+           bare `--glass-edge-light` rim (the no-op floor). */
+        --dock-facet-rim-ink: color-mix(
+            in oklab,
+            var(--glass-rim-ink, hsl(0 0% 100% / 0.3)),
+            var(--glass-accent) var(--glass-accent-strength, 0%)
+        );
+        box-shadow:
+            inset 0 1px 0 var(--dock-facet-rim-ink),
+            var(--glass-specular),
+            /* the per-facet glint — a soft chromatic halo of the facet's own hue, a
+               whisper at the rim (the §6 calm register; transparent at the 0% no-op). */
+            0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
+    }
+    .dark .dock-stack-fan .dock-facet-chip {
+        --dock-facet-rim-ink: color-mix(
+            in oklab,
+            var(--glass-rim-ink, hsl(0 0% 100% / 0.4)),
+            var(--glass-accent) var(--glass-accent-strength, 0%)
+        );
+        box-shadow:
+            inset 0 1px 0 var(--dock-facet-rim-ink),
+            var(--glass-specular-dark),
+            0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
+    }
+    /* the φ-tier DEPTH read (railProjection.projectFacets) — when the carousel is
+       expanded, each facet seats at its recession scale + opacity (the active forward +
+       full, the neighbours receding). The tier vars default to the 1/1 identity so a
+       non-facet member is byte-identical. Compositor-only (scale/opacity — the
+       proof:no-layout-animation floor). */
+    .dock-stack.is-expanded .dock-facet-chip {
+        scale: var(--dock-facet-tier-scale, 1);
+        opacity: var(--dock-facet-tier-opacity, 1);
+    }
+    /* the active facet — the selected-as-glass tier lift, the accent rim STILL reading
+       (the context's hue marks the active facet on top of the lift). */
+    .dock-stack-fan .dock-facet-chip.is-active {
+        background: var(--dock-control-active-bg, var(--glass-bg-floating));
+        box-shadow:
+            inset 0 1px 0 var(--dock-facet-rim-ink),
+            var(--glass-specular),
+            0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 12%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent);
+    }
+    .dark .dock-stack-fan .dock-facet-chip.is-active {
+        box-shadow:
+            inset 0 1px 0 var(--dock-facet-rim-ink),
+            var(--glass-specular-dark),
+            0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 18%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent);
+    }
+
+    /* PRM — the fan SNAPS to terminal (the fade survives, the transform drops — P6 /
+       proof:no-layout-animation PRM carve). No spring travel, no stagger, no blur-settle. */
+    @media (prefers-reduced-motion: reduce) {
+        .dock-stack-fan .dock-stack-member {
+            transition:
+                opacity var(--duration-fast) linear,
+                background-color var(--duration-fast) var(--ease-standard),
+                box-shadow var(--duration-fast) var(--ease-standard);
+            scale: 1;
+            translate: 0 0;
+            filter: none;
+        }
+    }
+}

package/dist/styles/dock-controls/dark-mode-toggle.css

@@ -73,13 +73,26 @@
            padding fell to `var(--dock-icon-padding, 0)` (the token is never defined →
            0 pad → the glyph filled the whole 40px box edge-to-edge, ~2.5× the 16-20px
            nav glyphs — the user's "too large" read). Pad the box by HALF the box↔glyph
-           difference so the `h-full` SVG lands at exactly `--dock-icon-glyph` (the
-           `--dock-scale`-keyed size the nav icons paint) — optically UNIFORM with the
-           nav glyphs through the utility-win path, not fighting it. */
+           difference so the `h-full` SVG lands at exactly `--dock-control-glyph-size`
+           (default `--dock-icon-glyph`, the `--dock-scale`-keyed size the nav icons
+           paint) — optically UNIFORM with the nav glyphs through the utility-win path,
+           not fighting it.
+
+           BC.W-DOCK-ENGINE move 3 (the Atlas A-9 fold) — the inset subtracts
+           `--dock-control-glyph-size`, the SAME ONE knob the SVG `width`/`height`
+           reads below, so the pad and the glyph stay LOCKED (a consumer retinting
+           `--dock-control-glyph-size` moves both in lockstep — no drift between the
+           box pad and the painted glyph). `--dock-control-size` AND
+           `--dock-control-glyph-size` both INHERIT from `.glass-dock[data-density]`,
+           where the coarse `--dock-scale` re-declare (overflow.css) re-resolves them
+           in lockstep — so the calc reads the coarse-scaled values on a coarse
+           pointer too (the AZ.R5-TOKENS substitution-vs-inheritance trap closed for
+           the toggle glyph: the var() resolves at the toggle button, reading the
+           coarse-re-resolved inherited tokens, never the frozen `:root` scale). */
         --dark-mode-toggle-padding: calc(
             (
                     var(--dock-control-size, var(--size-icon-btn)) -
-                        var(--dock-icon-glyph, 1.25rem)
+                        var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem))
                 ) / 2
         );
     }

package/dist/styles/dock-controls/icon-button.css

@@ -95,6 +95,18 @@
             scale: var(--scale-press-dock);
         }
 
+        /* W-NAV-DOCK-FIX — the four-state DISABLED register. A boundary nav control
+           (prev/next at the first/last item) stays PRESENT but disabled so the row
+           geometry holds (never DOM-absent — the "flaky" read). It dims to the shared
+           disabled opacity + suppresses the press/pointer (the hover/active rules
+           already `:not(:disabled)`-exclude it, so this only needs the dim + the
+           pointer-suppress). Compositor-only (opacity); no layout shift. */
+        &:disabled {
+            opacity: var(--opacity-disabled, 0.4);
+            pointer-events: none;
+            cursor: default;
+        }
+
         &:focus:not(:focus-visible) {
             box-shadow: none;
             outline: none;
@@ -113,6 +125,40 @@
             border: var(--dock-active-border);
             box-shadow: var(--dock-active-shadow);
         }
+
+        /* BC.W-DOCK-ENGINE cross-repo fold (fourier-M #10) — the `<DockIconButton
+           :active>` selectable register. The `data-active` hook the component stamps
+           reads the rail's "selected reads as glass" tier (`--dock-control-active-bg`,
+           default `--glass-bg-floating` — a GLASS tier ABOVE the rest fill, NEVER a
+           saturated brand hue, per W-REGISTER-IOS). Distinct from the consumer
+           `--dock-active-*` cohort above (a parent-scoped audacious override): this is
+           the library's default selected glass, ergonomic sugar over the shipped
+           register so a selectable dock control needs no hand-rolled active paint. The
+           glyph/label firm to the full warm-ink, mirroring the rail's `.is-active`.
+
+           BD.W-DOCK-CORE (P4 deferred) — the selected pill now COMPOSES the shared
+           `.glass-capsule` register (the component adds the `.glass-capsule` class when
+           `active`). So instead of painting a bare `background`, the `[data-active]`
+           rung re-points `--glass-capsule-fill` (the override hook the capsule register
+           exposes) to the selected glass tier — the capsule's lifted-plate composite
+           (rim + lift + the warm-floor fill base) reads the selected tier WITHOUT
+           forking the register (the selected-parity rung). The glyph firms to the full
+           warm-ink. */
+        &[data-active] {
+            --glass-capsule-fill: var(
+                --dock-control-active-bg,
+                var(--glass-bg-floating)
+            );
+            /* Re-assert the capsule fill as the painted background — the base
+               `.dock-icon-button { background: transparent }` (same layer, later
+               source order, equal specificity) would otherwise win over
+               `.glass-capsule`'s background; this `[data-active]` rule (specificity
+               0,2,0 > the base 0,1,0) hands the selected pill its lifted-glass fill.
+               The capsule's rim/lift `box-shadow` + `backdrop-filter` already apply
+               (the base rule never sets those). */
+            background: var(--glass-capsule-fill);
+            color: var(--dock-fg-on-aurora, var(--foreground));
+        }
     }
 
     /* focus-visible ring + disabled paint hoisted to the shared `:where()`

package/dist/styles/dock-controls/triggers.css

@@ -10,6 +10,16 @@
    tab-button.css. */
 
 @layer components {
+    /* BD.W-DOCK-CORE (A8) — `.dock-trigger` is the UNIFIED dock overlay-trigger register.
+       DockSelectTrigger, DockDropdownTrigger, AND DockPopoverTrigger all compose it (each
+       also keeps its legacy class for back-compat-free continuity within this file), so a
+       popover trigger inside a dock is byte-identical geometry + style + baseline alignment
+       to the dropdown trigger — the prior three-divergent-contracts misalignment (A8) is
+       gone. The hover-SCALE is OFF on all three (below): a scaling trigger shifts its
+       portaled-content anchor mid-open; the SelectTrigger's documented no-scale reason is
+       generalized to the whole family (clean break — the dropdown's lone hover-scale is
+       retired, no alias). */
+    .dock-trigger,
     .dock-select-trigger,
     .dock-dropdown-trigger {
         display: inline-flex;
@@ -63,20 +73,25 @@
        control members (icon/tab/select/dropdown) now lift on hover as one register,
        mirroring the unified glass-tier `--dock-control-hover-bg` cross-fade. The
        lone `.dock-dropdown-trigger:hover` scale rule is RETIRED into this group. */
+    /* BD.W-DOCK-CORE (A8) — hover lifts the FILL only; the hover-SCALE is RETIRED across
+       the whole trigger family so portaled content anchors smoothly (the SelectTrigger's
+       documented no-scale reason, generalized — clean break, no alias). */
+    .dock-trigger:hover:not(:disabled),
     .dock-select-trigger:hover:not(:disabled),
     .dock-dropdown-trigger:hover:not(:disabled) {
         background: var(--dock-control-hover-bg);
         color: var(--btn-hover-color, var(--foreground));
-        scale: var(--scale-hover-dock);
     }
 
     /* AZ.W-REGISTER-IOS — the iOS press darken-plus-shrink (see the icon-button). */
+    .dock-trigger:active:not(:disabled),
     .dock-select-trigger:active:not(:disabled),
     .dock-dropdown-trigger:active:not(:disabled) {
         background: var(--dock-control-press-bg);
         scale: var(--scale-press-dock);
     }
 
+    .dock-trigger:focus:not(:focus-visible),
     .dock-select-trigger:focus:not(:focus-visible),
     .dock-dropdown-trigger:focus:not(:focus-visible) {
         box-shadow: none;
@@ -86,6 +101,7 @@
     /* focus-visible ring + disabled paint hoisted to the shared `:where()`
        group in dock.css; this rule adds only the box-shadow fade transition.
        `scale` keeps the AT.W7-dock-b press micro-feedback spring. */
+    .dock-trigger:focus-visible,
     .dock-select-trigger:focus-visible,
     .dock-dropdown-trigger:focus-visible {
         transition:
@@ -96,6 +112,12 @@
             box-shadow var(--dock-motion-fast);
     }
 
+    .dock-trigger:is(
+        .is-active,
+        .active,
+        [aria-expanded="true"],
+        [aria-pressed="true"]
+    ),
     .dock-select-trigger:is(
         .is-active,
         .active,

package/dist/styles/dock-controls.css

@@ -41,6 +41,24 @@
 @import "./dock-controls/touch-floor.css";
 
 @layer components {
+    /* BD.W-DOCK-CORE (A12) — the draggable-item GRAB squish. A grabbed dock item
+       (`.glass-drag-lift`, written by useDockItemDrag while the gesture is in flight)
+       deforms with the volume-preserving `--stretch` register (the SHARED useLiquidFlex
+       "tanh" squish the tab indicator + dock morph already speak — ONE squish source, no
+       forked deformation). The grab follows the pointer via the JS-written `transform:
+       translate` (the compositor follow); this rule adds the gel-squish scale ON the
+       grabbed plate (stretch along the drag axis, compress across — volume-preserving).
+       The dock grabbable cursor + touch-action sit on `.glass-drag-grabbable` (the dock
+       root) via segmented-tabs.css. At rest `--stretch` is unset → 1/1 (no deform). The
+       global PRM gate strips `scale` → no squish under reduce (the gesture still follows).
+       Horizontal docks stretch X / compress Y; vertical stretch Y / compress X. */
+    .glass-dock.dock-items-draggable:not(.vertical) .dock-icon-button.glass-drag-lift {
+        scale: var(--stretch, 1) calc(1 / var(--stretch, 1));
+    }
+    .glass-dock.dock-items-draggable.vertical .dock-icon-button.glass-drag-lift {
+        scale: calc(1 / var(--stretch, 1)) var(--stretch, 1);
+    }
+
     /* AV.W9.3 — momentum-gated dock-control press spring. The `:active` squish
        toward `--scale-press-dock` settles on a NO-OVERSHOOT spring (Apple,
        "Designing Fluid Interfaces": default 100% damping — no bounce — for a tap;

package/dist/styles/dock.css

@@ -17,7 +17,12 @@
  *                            three-region body).
  *   - dock/morph.css       — the W01 single-scalar morph chrome + state response
  *                            (--dock-expand-t interp, collapsed/summary, held /
- *                            open, the W55 adaptive-legibility bucket).
+ *                            open).
+ *   - dock/adaptive-legibility.css — the darken-over-light self-engage (the
+ *                            continuous backdrop-luma tint clamp, the warm-chromatic
+ *                            dock ink, the @container light bucket, contrast-color()
+ *                            refinement, the PRM reveal-blur carve). Split from
+ *                            morph.css to keep both partials under the 500-line bound.
  *   - dock/density.css     — the W45 density × --dock-scale cascade.
  *   - dock/layers.css      — the `.dock-layer` crossfade + hit-test + reveal-
  *                            stagger contract + the `layout="grid"` tile grid.
@@ -36,13 +41,33 @@
    cascade is preserved bit-for-bit (the carve-isomorphism gate is the witness). */
 @import "./dock/shell.css";
 @import "./dock/morph.css";
+@import "./dock/adaptive-legibility.css";
 @import "./dock/density.css";
+@import "./dock/shape.css";
 @import "./dock/layers.css";
 @import "./dock/layer-group.css";
 @import "./dock/overflow.css";
-@import "./dock/rail-extend.css";
+@import "./dock/stack-rail.css";
 @import "./dock/section.css";
 @import "./dock/morph-bridge.css";
+/* BE.W-DOCK-FISSION — the 1→N stretch-and-snap goo bridge (the sibling of morph-bridge's
+   1→1 V↔H crossfade; the per-seam `--neck-t` neck STRETCH→THIN→SNAP-BACK recoil + the
+   jubilance ripple/splash FLOOR). @import-ed into the LIBRARY cascade beside morph-bridge
+   so a consumer importing `@mkbabb/glass-ui/styles` gets the fission delights — the recipe
+   is `v-for`-shaped on `.dock-fission-piece`, compositor-only, PRM-removed, Safari-safe
+   (the REGULAR `filter: url()`, never backdrop-filter). The demo's island FACE/layout
+   (`.liquid-island-*`) stays demo-only (liquid-morph.css); this file owns only the
+   `.dock-fission-bridge`/`.dock-fission-piece` BEHAVIOR. */
+@import "./dock/fission-bridge.css";
+/* BC.W-AX-DOCK-CTA-SEAT — the [data-cta-pending] CTA-receive landing seat (the static
+   resting-geometry reserve + the plain transition:opacity FLIP reveal). Last in the
+   dock cascade — a net-new surface around the byte-untouched useDockCtaReceive morph. */
+@import "./dock/cta-seat.css";
+/* BC.W-DOCK-SEARCH — the dock-as-native-dynamic-search-bar field surface (the W55
+   active-field tint legibility seam + the `.glass-menu-row` result rows). A net-new
+   surface on a `[data-search]` dock around the byte-untouched morph-bridge metaball;
+   CONSUMES the W55 tint seam + the menu-row recipe, re-authors neither. */
+@import "./dock/search.css";
 
 /* AX.W01 — the SINGLE morph scalar. `useLayerTransition` writes it once per frame
    to the `.glass-dock` root; EVERY morph axis (box size, padding, radius, scale,