@mkbabb/glass-ui 4.1.0 → 4.2.0

package/src/styles/dock/shape.css

@@ -27,6 +27,23 @@
  *
  * @import-ed by dock.css in cascade order, in the SAME `@layer components`. */
 
+/* BD.W-DOCK-PUNCH-CHANNEL — the dedicated cartoon-punch squish scalar. A SEPARATE
+   typed `<number>` @property (init 1, the no-op identity) so a one-shot transition on
+   `--ease-cartoon-punch` INTERPOLATES the ~4% pre-dip + ~22% overshoot rather than
+   snapping. It is DISTINCT from `--stretch` (the orientation/fission squish, capped by
+   `--dock-morph-max-stretch: 1.14`): the punch is NOT subject to that cap (the cartoon
+   register overshoots PAST the spring fence), it has ZERO JS owners (CSS-only, driven
+   by the transition below), and a fission split fired mid-collapse cannot clobber it
+   (the 6-owner `--stretch` last-writer race the shared channel would have introduced —
+   the dedicated channel REMOVES it, a net improvement to fission). `inherits: false` —
+   the punch is the dock root's OWN deformation, never cascaded to children. A
+   non-supporting engine reads the safe 1 fallback (no punch, just the bounded size). */
+@property --dock-punch-stretch {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 1;
+}
+
 @layer components {
     /* ── The corner-profile lerp (A1 — the shape is a scalar parameter) ───────────
        The dock surface radius interpolates the `--dock-shape-from`/`--dock-shape-to`
@@ -99,26 +116,135 @@
     /* ── The squish — the `useLiquidFlex` `--stretch` deformation (A4) ────────────
        The shape morph couples the volume-preserving squish the tab-indicator +
        useDockOrientationMorph already speak: `scale: var(--stretch) calc(1/var(--stretch))`
-       along the morph axis, capped LOW at `--dock-morph-max-stretch` (~1.08) by
+       along the morph axis, capped LOW at `--dock-morph-max-stretch` (~1.14) by
        useLiquidFlex itself (the ONE squish source — no forked deformation math). The
        plate DEFORMS like liquid as it changes shape — a fast morph swells, a slow one
        barely. The driver (useDockOrientationMorph) writes `--stretch` on the dock scope;
        at rest `--stretch` is unset → 1/1 (no squish). The reciprocal pairing preserves
        volume (stretch along travel, compress across). This is compositor-only (a
-       `scale` transform), composed WITH the reserved-footprint `scaleX/scaleY` morph
-       (layers.css) — the box scale rides `--dock-morph-scale`, the squish rides
-       `--stretch`, both transforms multiply on the compositor.
+       `scale` transform), composed WITH the ratio-free convex-blend size morph
+       (layers.css) — the box scale rides `--dock-size-scale`, the squish rides
+       `--stretch`, the cartoon punch rides `--dock-punch-stretch`, all three
+       multiply on the compositor on ONE `scale:` property.
 
        Scoped to `[data-morphing]` so the squish is a morph-transient (at rest the plate
        is un-squished); the cross-axis is the morph axis's reciprocal. Horizontal docks
        stretch X / compress Y; vertical stretch Y / compress X (the inverse-axis twin,
-       mirroring the bridge plates' per-orientation squish in morph-bridge.css). The
-       squish multiplies onto the dock's OWN transform box (the shell), distinct from the
-       inner `.dock-layers` reserved-scale box, so the two do not fight. */
-    .glass-dock[data-morphing]:not(.vertical) {
-        scale: var(--stretch, 1) calc(1 / var(--stretch, 1));
+       mirroring the bridge plates' per-orientation squish in morph-bridge.css).
+
+       BD.W-DOCK-CORE / BD.W-DOCK-PUNCH-CHANNEL — THREE factors fold onto this ONE
+       `scale:` along the morph axis:
+         1. `--dock-size-scale` (layers.css) — the ratio-FREE convex-blend size, BOUNDED
+            in [0.06, 1] by construction (the container-justify-agnostic grow-from-center,
+            box reserves `--dock-expanded-px` + scales toward it from `transform-origin:
+            center`). The seizure-prone `--dock-root-scale` ratio it REPLACES is gone.
+         2. `--stretch` — the orientation/fission volume-preserving squish (the 6-JS-owner
+            channel, capped 1.14). Unset → 1 (the squish-only path byte-identical).
+         3. `--dock-punch-stretch` — the dedicated cartoon-punch overshoot (the §PUNCH
+            channel, driven by the one-shot transition below; NOT capped by 1.14). Unset →
+            1 (no punch).
+       The cross-axis is the RECIPROCAL of the two volume-preserving factors
+       `1 / (--stretch × --dock-punch-stretch)` so the punch + the squish deform the pill
+       along travel and pinch across WITHOUT moving the footprint or the centroid — the
+       size factor (`--dock-size-scale`) is NOT reciprocated (it is the real footprint
+       morph, not a volume-preserving deformation). Folding all three on ONE `scale:`
+       keeps the multiply explicit + on one compositor channel (a separate `transform`
+       would be a distinct box that could fight the `scale:`). Horizontal: X = size ×
+       squish × punch, Y = 1/(squish × punch); vertical: the inverse axes. */
+    .glass-dock[data-morphing]:not(.vertical),
+    .glass-dock[data-punching]:not(.vertical) {
+        scale: calc(
+                var(--dock-size-scale, 1) * var(--stretch, 1) *
+                    var(--dock-punch-stretch, 1)
+            )
+            calc(1 / (var(--stretch, 1) * var(--dock-punch-stretch, 1)));
+    }
+    .glass-dock[data-morphing].vertical,
+    .glass-dock[data-punching].vertical {
+        scale: calc(1 / (var(--stretch, 1) * var(--dock-punch-stretch, 1)))
+            calc(
+                var(--dock-size-scale, 1) * var(--stretch, 1) *
+                    var(--dock-punch-stretch, 1)
+            );
+    }
+
+    /* ── BD.W-DOCK-PUNCH-CHANNEL — the dedicated cartoon-punch DRIVER ──────────────
+       The size blend above is monotone + bounded (correct, boring, bulletproof). The
+       PUNCH is the audacious half: a SEPARATE one-shot transition on
+       `--ease-cartoon-punch` (the ~4% pre-dip + ~22% overshoot `linear()`) that blooms
+       `--dock-punch-stretch` AWAY from 1 then RETURNS to 1 at settle — NEVER latched
+       (the +16%-forever spike defect). It is honestly a SECOND punch animation layered
+       on the spring (NOT "one clock"): the bounded size rides `--dock-morph-t`, the
+       punch rides this transition. `--motion-weight` (dock scope 1) co-scales the punch
+       AMPLITUDE; PRM zeroes `--motion-weight` → the amplitude collapses to 1 (no punch),
+       and the PRM `--ease-cartoon-punch → --ease-standard` re-alias removes the curve
+       shape — the bounded size still snaps via the clamped `t`, the morph still CONFIRMS.
+
+       The dock is a LOUD DRIVER (design.md §L4): it pins `--motion-weight: 1` on its own
+       scope so even a slow user-driven morph rides the full punch register. The
+       `[data-punching]` hook (armed by the dock for one episode) is what lifts the punch
+       to its overshoot value; the transition carries it there on the punch curve and
+       back to the rest 1. The amplitude is `1 + 0.22·--motion-weight` (the ~22% overshoot
+       the curve peaks at × the loud-register weight). */
+    .glass-dock {
+        /* LOUD DRIVER — the dock pushes the motion weight to max so the punch reads at
+           full cartoon amplitude (design.md §L4; the rest 0.618 would mute it to ~+13.6%). */
+        --motion-weight: 1;
+        /* the punch rests at the identity 1 (no deformation) */
+        --dock-punch-stretch: 1;
+        /* the one-shot punch transition — the curve does the dip+overshoot+settle; the
+           weight zeroes it under PRM (the curve also re-aliases to --ease-standard). */
+        transition: --dock-punch-stretch var(--duration-normal)
+            var(--ease-cartoon-punch);
+    }
+    /* While punching, the dock lifts the punch to its overshoot target; the transition
+       carries `--dock-punch-stretch` there on the cartoon curve then the hook clears and
+       it transitions back to 1 (the RETURN — never latched). The overshoot share scales
+       with the loud weight; PRM weight 0 → amplitude 1 (no punch). */
+    .glass-dock[data-punching] {
+        --dock-punch-stretch: calc(1 + 0.22 * var(--motion-weight, 1));
+    }
+
+    /* ── BD.W-DOCK-PUNCH-CHANNEL — the kinetic cartoon CAST ────────────────────────
+       The bold 1940s offset-shadow made kinetic: the inert `.cartoon-cast` child
+       (BD.W-CARTOON-CASTER — a real DOM child, NOT a pseudo, since the dock's `::before`/
+       `::after` are both occupied by the grain + the morph chrome) carries the SHIPPED
+       `--shadow-cartoon-md/lg` rung and SLIDES opposite the morph as the box punches.
+       The travel reads `--motion-weight` (PRM → 0 → static) so the cast deepens + slides
+       through the punch then snaps home at settle. Plain per-mode `.dark` arms (the
+       light-dark() inset-shadow trap avoided — the cast is a plain offset shadow, no
+       inset fragment). Behind the plate (z-index -1), pointer-inert, paint-only. */
+    .glass-dock > .cartoon-cast {
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: inherit;
+        pointer-events: none;
+        /* the warm-cream rest cast — the bold offset ink the plate floats above */
+        box-shadow: var(--shadow-cartoon-md);
+        /* the derived travel — opposite-morph slide, gated by the loud weight × the punch
+           presence. At rest (punch 1) the travel is 0; mid-punch it slides out + deepens. */
+        --cast-travel: calc(
+            7px * var(--motion-weight, 1) *
+                clamp(0, calc((var(--dock-punch-stretch, 1) - 1) / 0.22), 1)
+        );
+        translate: calc(-1 * var(--cast-travel)) var(--cast-travel);
+        transition:
+            translate calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch),
+            box-shadow var(--duration-normal) var(--ease-standard);
+    }
+    /* mid-punch the cast deepens to the LOUD rung (a plain per-mode arm below adds the
+       dark-mode rung — the light-dark() inset trap avoided). */
+    .glass-dock[data-punching] > .cartoon-cast {
+        box-shadow: var(--shadow-cartoon-lg);
     }
-    .glass-dock[data-morphing].vertical {
-        scale: calc(1 / var(--stretch, 1)) var(--stretch, 1);
+    @media (prefers-reduced-motion: reduce) {
+        /* PRM — the cast is static (no travel); the offset ink stays (a legibility
+           asset). `--motion-weight: 0` already zeroes `--cast-travel`; pin the
+           transition off too so a residual frame cannot slide. */
+        .glass-dock > .cartoon-cast {
+            transition: none;
+            translate: 0 0;
+        }
     }
 }

package/src/styles/dock/shell.css

@@ -24,8 +24,7 @@
         --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
         --dock-collapsed-hover-scale: var(--scale-hover-dock);
         /* AW.W3 — the spring-keyed child stagger knobs. `--dock-stagger-window-size`
-           is the fraction of the morph each child reveals over; `--dock-stagger-rise`
-           is the px the child rises from as it fades in. Consumers retune the
+           is the fraction of the morph each child reveals over. Consumers retune the
            cascade feel per instance.
 
            AX.W02 — `--dock-stagger-step` is the per-child onset BEAT: each
@@ -49,7 +48,6 @@
            beat, that was too wide. The summary/persistent glyph is front-loaded
            structurally (onset 0, scalar-keyed below). */
         --dock-stagger-window-size: 0.4;
-        --dock-stagger-rise: 4px;
         --dock-stagger-step: 0.08;
         /* AW.W3b — big-dock tokens. `--dock-card-radius` is the finite card-shell
            radius (default --radius-dock-card = --radius-3xl, density-scaled

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

@@ -41,6 +41,12 @@
         --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
@@ -50,14 +56,27 @@
     .glass-dock-frame {
         display: contents;
     }
-    .glass-dock-frame[data-has-rail] {
+    .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 must paint
-           beyond the dock box. The wrapper shrink-wraps the dock (inline-flex) so its box
-           == the dock box and the rail anchors to the true edge. */
+        /* 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-has-rail].vertical,
+    .glass-dock-frame[data-splittable].vertical {
         flex-direction: column;
         align-items: stretch;
     }
@@ -189,9 +208,9 @@
         transition:
             opacity var(--duration-fast) var(--ease-out)
                 calc(var(--dock-stack-stagger) * var(--i, 0)),
-            scale var(--duration-normal) var(--spring-dock, var(--ease-out))
+            scale var(--spring-dock-duration, var(--duration-normal)) var(--spring-dock, var(--ease-out))
                 calc(var(--dock-stack-stagger) * var(--i, 0)),
-            translate var(--duration-normal) var(--spring-dock, var(--ease-out))
+            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)),
@@ -248,6 +267,75 @@
         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) {

package/src/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;
@@ -122,9 +134,29 @@
            `--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`. */
+           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] {
-            background: var(--dock-control-active-bg, var(--glass-bg-floating));
+            --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));
         }
     }

package/src/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/src/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/src/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,6 +41,7 @@
    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";
@@ -44,6 +50,15 @@
 @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. */