@mkbabb/glass-ui 3.4.0 → 3.5.0

package/dist/styles/tokens.css

@@ -146,7 +146,7 @@
          snappy: (0.35s, ζ=0.65)  — quick crisp, overshoot ~+6.8%
          bouncy: (0.50s, ζ=0.45)  — emphatic overshoot ~+20.5%
          gentle: (0.70s, ζ=1.00)  — patient critically-damped
-         dock:   (0.50s, ζ=0.50)  — dock expand/collapse morph, overshoot ~+18.5%
+         dock:   (0.32s, ζ=0.70)  — dock expand/collapse morph, overshoot ~+4.6%
 
        Note on `smooth`: at ζ=0.86 the analytic solver produces a peak
        of 1.00498 (+0.5%) at the 24% slot — mathematically present but
@@ -160,7 +160,7 @@
     --spring-snappy: linear(0, 0.10438 2.041%, 0.32622 4.082%, 0.56668 6.122%, 0.77153 8.163%, 0.91961 10.204%, 1.01073 12.245%, 1.05549 14.286%, 1.06804 16.327%, 1.06171 18.367%, 1.04686 20.408%, 1.03044 22.449%, 1.01629 24.490%, 1.00596 26.531%, 0.99954 28.571%, 0.99633 30.612%, 0.99537 32.653%, 0.99575 34.694%, 0.99674 36.735%, 0.99786 38.776%, 0.99884 40.816%, 0.99956 42.857%, 1.00001 44.898%, 1.00024 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
     --spring-bouncy: linear(0, 0.11105 2.041%, 0.36430 4.082%, 0.65496 6.122%, 0.90929 8.163%, 1.08828 10.204%, 1.18289 12.245%, 1.20482 14.286%, 1.17641 16.327%, 1.12214 18.367%, 1.06276 20.408%, 1.01239 22.449%, 0.97809 24.490%, 0.96099 26.531%, 0.95826 28.571%, 0.96514 30.612%, 0.97666 32.653%, 0.98873 34.694%, 0.99867 36.735%, 1.00520 38.776%, 1.00825 40.816%, 1.00847 42.857%, 1.00686 44.898%, 1.00443 46.939%, 1.00199 48.980%, 1.00004 51.020%, 0.99880 53.061%, 0.99827 55.102%, 0.99829 57.143%, 0.99866 59.184%, 0.99916 61.224%, 0.99966 63.265%, 1.00004 65.306%, 1.00027 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
     --spring-gentle: linear(0, 0.09415 2.041%, 0.27374 4.082%, 0.45506 6.122%, 0.60779 8.163%, 0.72570 10.204%, 0.81213 12.245%, 0.87336 14.286%, 0.91570 16.327%, 0.94445 18.367%, 0.96371 20.408%, 0.97645 22.449%, 0.98481 24.490%, 0.99025 26.531%, 0.99377 28.571%, 0.99604 30.612%, 0.99749 32.653%, 0.99841 34.694%, 0.99900 36.735%, 0.99937 38.776%, 0.99961 40.816%, 0.99975 42.857%, 0.99985 44.898%, 1.00000 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
-    --spring-dock: linear(0, 0.10932 2.041%, 0.35412 4.082%, 0.63074 6.122%, 0.87072 8.163%, 1.04044 10.204%, 1.13391 12.245%, 1.16292 14.286%, 1.14748 16.327%, 1.10854 18.367%, 1.06337 20.408%, 1.02357 22.449%, 0.99499 24.490%, 0.97889 26.531%, 0.97350 28.571%, 0.97561 30.612%, 0.98178 32.653%, 0.98915 34.694%, 0.99574 36.735%, 1.00055 38.776%, 1.00332 40.816%, 1.00431 42.857%, 1.00403 44.898%, 1.00305 46.939%, 1.00186 48.980%, 1.00076 51.020%, 0.99996 53.061%, 0.99948 55.102%, 0.99930 57.143%, 0.99933 59.184%, 0.99949 61.224%, 0.99968 63.265%, 0.99986 65.306%, 1.00000 67.347%, 1.00008 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
+    --spring-dock: linear(0, 0.10282 2.041%, 0.31773 4.082%, 0.54783 6.122%, 0.74309 8.163%, 0.88550 10.204%, 0.97598 12.245%, 1.02452 14.286%, 1.04368 16.327%, 1.04501 18.367%, 1.03739 20.408%, 1.02681 22.449%, 1.01672 24.490%, 1.00873 26.531%, 1.00323 28.571%, 0.99996 30.612%, 0.99837 32.653%, 0.99789 34.694%, 0.99805 36.735%, 0.99848 38.776%, 0.99897 40.816%, 0.99940 42.857%, 0.99972 44.898%, 0.99993 46.939%, 1.00004 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
 
     /* Core cubic-bezier (exits, fallbacks, non-spring uses) */
     --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1287,17 +1287,19 @@
        both engine paths are timing-IDENTICAL: the FLIP fallback (via
        `--dock-motion-resize`), the native View-Transition group (its
        `animation-timing-function`), AND the runtime SpringProgress driver
-       (AU.W8.3) consume this same `(0.5, 0.5)` source curve. Retires the AQ.W6
+       (AU.W8.3) consume this same `(0.32, 0.7)` source curve. Retires the AQ.W6
        fork where the VT path ran `--vt-ease` (apple-spring, +27.5% overshoot)
        while the FLIP ran the snappy spring. `--vt-ease` still defaults the
        other VT recipes (`.gl-list-item`).
 
        AU.W8 — RETARGET snappy → dock. `--spring-snappy` (ζ=0.65, +6.8%) read as
        mechanical: a stiff plateau at ~48% with too little overshoot to feel
-       alive ("not iOS-smooth"). `--spring-dock` ((0.5, 0.5), ~+18.5%) sits in
-       the springy 15-30% band — the user-felt iOS bounce. The runtime driver's
-       DOCK_SPRING const MIRRORS the (0.5, 0.5) PRESETS row, so the CSS token and
-       the JS-driven morph are bit-identical. */
+       alive ("not iOS-smooth"). AW.W2 then retuned the dock spring to the
+       iOS-control register: `--spring-dock` ((0.32, 0.7), ~+4.6%) settles snappy
+       with a restrained overshoot — the felt iOS dock morph, off the prior
+       playful +18.5% register. The runtime driver's DOCK_SPRING const MIRRORS the
+       (0.32, 0.7) PRESETS row, so the CSS token and the JS-driven morph are
+       bit-identical. */
     --dock-resize-spring: var(--spring-dock);
 
     /* AT.W7-dock-b — dock-control press micro-feedback spring. A TRANSFORM-ONLY

package/dist/styles/utilities.css

@@ -688,6 +688,26 @@
     }
 }
 
+/* ── Twin-line divider — the chassis catch-light / under-shadow groove ───────
+   AW.W15 DRY extraction. The twin-line idiom (a 1px white catch-light over a
+   1px black under-shadow reading as one engraved hairline groove) is the
+   chassis-divider signature. The exact light/dark α pair was DUPLICATED in
+   `instrument-chassis.css` (`.bezel-line.top`/`.bottom`) and `instrument-rail.css`
+   (the sibling `::before`/`::after`). This utility is the SINGLE source of that
+   α pair: it publishes `--twin-line-catch` (the top catch-light) and
+   `--twin-line-shadow` (the bottom under-shadow) as cascade tokens, dark-adaptive
+   by construction (the `.dark &` arm re-resolves them). Both consumers read the
+   tokens; a retint touches one rule. Real DRY, ≥2 consumers. */
+@utility twin-line-divider {
+    --twin-line-catch: rgb(255 255 255 / 0.10);
+    --twin-line-shadow: rgb(0 0 0 / 0.12);
+
+    :where(.dark) & {
+        --twin-line-catch: rgb(255 255 255 / 0.06);
+        --twin-line-shadow: rgb(0 0 0 / 0.18);
+    }
+}
+
 /* ── Control transition recipe (AU.W8b.4) ───────────────────────────────
    Shared compound transition for interactive controls that animate their
    surface (background-color/color/box-shadow/border-color) on the four-state

package/dist/styles/view-transition.css

@@ -61,6 +61,30 @@
     animation-timing-function: var(--dock-resize-spring, var(--spring-dock));
 }
 
+/* AW.W3 — typed directional dock curves. The swap tags the active transition
+ * `dock-expand` / `dock-collapse` (the outer collapsed↔expanded pair) and
+ * `layer-forward` / `layer-back` (the inner DockLayerGroup pane swap) via the
+ * `types` argument to `startViewTransition` (Chrome 140+; feature-detected, the
+ * untyped fallback is the symmetric `.gl-dock-layer` curve above). iOS-feel
+ * motion is ASYMMETRIC — a snappier exit, a softer entry-overshoot. EXPAND
+ * (and forward) lead with the overshooting `--spring-dock`; COLLAPSE (and back)
+ * exit on the non-overshooting `--spring-snappy` (a quicker settle, no bounce on
+ * the way out). The shorter `--duration-fast` on the exit reads as the crisp
+ * dismiss. A non-typed engine never matches these — it runs the symmetric curve,
+ * which is the acceptable contract. PRM zeroes the animation (the `@media` at
+ * the top of this file). */
+:active-view-transition-type(dock-expand) ::view-transition-group(.gl-dock-layer),
+:active-view-transition-type(layer-forward) ::view-transition-group(.gl-dock-layer) {
+    animation-duration: var(--vt-duration, var(--duration-normal));
+    animation-timing-function: var(--dock-resize-spring, var(--spring-dock));
+}
+
+:active-view-transition-type(dock-collapse) ::view-transition-group(.gl-dock-layer),
+:active-view-transition-type(layer-back) ::view-transition-group(.gl-dock-layer) {
+    animation-duration: var(--vt-duration-exit, var(--duration-fast));
+    animation-timing-function: var(--spring-snappy);
+}
+
 @keyframes gl-vt-slide-in  { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
 @keyframes gl-vt-slide-out { to   { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
 

package/dist/tabs.js

@@ -208,7 +208,7 @@ var M = [
 			}, () => [p(E(e.label), 1)], !0)], 10, N))], 64))), 128))
 		], 2));
 	}
-}), [["__scopeId", "data-v-9b5076ed"]]), F = /* @__PURE__ */ h({
+}), [["__scopeId", "data-v-ba2dfb91"]]), F = /* @__PURE__ */ h({
 	__name: "BouncyTabs",
 	props: /* @__PURE__ */ g({
 		options: {},

package/dist/timeline.js

@@ -197,7 +197,7 @@ var A = ["aria-label"], j = [
 			_: 2
 		}, 1032, ["class", "onUpdate:open"]))], 4))), 128))], 8, A)) : a("", !0);
 	}
-}), [["__scopeId", "data-v-5cc7d6b4"]]), H = [
+}), [["__scopeId", "data-v-8e53d036"]]), H = [
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-label"

package/dist/useViewTransition-CJnqg6wl.js

@@ -0,0 +1,21 @@
+//#region src/composables/motion/useViewTransition.ts
+function e() {
+	return typeof document < "u" && typeof document.startViewTransition == "function";
+}
+function t(e, t) {
+	let n = typeof document > "u" ? void 0 : document;
+	if (!n || typeof n.startViewTransition != "function") return e(), {
+		finished: Promise.resolve(),
+		transitioned: !1
+	};
+	let r = t?.types && t.types.length > 0 ? n.startViewTransition({
+		update: () => e(),
+		types: t.types
+	}) : n.startViewTransition(() => e());
+	return r.ready?.catch(() => {}), {
+		finished: r.finished.then(() => void 0, () => void 0),
+		transitioned: !0
+	};
+}
+//#endregion
+export { e as n, t };

package/dist/useViewportReady-Dcvf0c4p.js

@@ -0,0 +1,191 @@
+import { getCurrentScope as e, onMounted as t, onScopeDispose as n, readonly as r, ref as i, toValue as a, watch as o } from "vue";
+//#region src/composables/dom/useTokenColor.ts
+function s(r, s = {}) {
+	let c = s.fallback ?? "", l = i(c), u = s.resolver ?? ((e, t) => getComputedStyle(t ?? document.documentElement).getPropertyValue(e));
+	function d() {
+		let e = a(r);
+		return !e || !s.resolver && typeof document > "u" ? c : u(e, (s.element ? a(s.element) : null) ?? (typeof document < "u" ? document.documentElement : void 0) ?? void 0 ?? void 0).trim() || c;
+	}
+	function f() {
+		l.value = d();
+	}
+	if (f(), t(f), typeof document < "u") {
+		let t = new MutationObserver(f);
+		t.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["class"]
+		});
+		let r = typeof window < "u" && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+		r?.addEventListener?.("change", f), e() && n(() => {
+			t.disconnect(), r?.removeEventListener?.("change", f);
+		});
+	}
+	return o(() => a(r), f), s.element !== void 0 && o(() => a(s.element), f), {
+		value: l,
+		refresh: f
+	};
+}
+//#endregion
+//#region src/composables/dom/useClipboard.ts
+async function c(e) {
+	if (typeof navigator > "u" || !navigator.clipboard?.writeText) return {
+		ok: !1,
+		reason: "no-api"
+	};
+	try {
+		return await navigator.clipboard.writeText(e), { ok: !0 };
+	} catch {
+		return {
+			ok: !1,
+			reason: "clipboard-api"
+		};
+	}
+}
+function l(e) {
+	if (typeof document > "u") return {
+		ok: !1,
+		reason: "no-api"
+	};
+	let t = document.createElement("textarea");
+	t.value = e, t.setAttribute("readonly", ""), t.style.position = "fixed", t.style.top = "-9999px", document.body.appendChild(t), t.select();
+	let n = !1;
+	try {
+		n = document.execCommand("copy");
+	} catch {
+		n = !1;
+	}
+	return document.body.removeChild(t), n ? { ok: !0 } : {
+		ok: !1,
+		reason: "exec-command"
+	};
+}
+async function u(e, t) {
+	let n = await c(e);
+	if (n.ok) return n;
+	let r = l(e);
+	if (r.ok) return r;
+	let i = r.reason ?? n.reason ?? "no-api";
+	return t?.(i), {
+		ok: !1,
+		reason: i
+	};
+}
+async function d(e, t = {}) {
+	let { ok: n } = await u(e, t.onCopyError);
+	return n;
+}
+function f(e = {}) {
+	let t = e.resetMs ?? 1500, r = i(!1), a = null;
+	function o() {
+		a != null && (clearTimeout(a), a = null);
+	}
+	async function s(n) {
+		let i = await u(n, e.onCopyError);
+		return i.ok && (r.value = !0, o(), a = setTimeout(() => {
+			r.value = !1, a = null;
+		}, t)), i;
+	}
+	return n(o), {
+		copied: r,
+		copy: s
+	};
+}
+//#endregion
+//#region src/composables/dom/useBreakpoint.ts
+function p(t) {
+	let a = i(!1), o = null;
+	function s(e) {
+		a.value = e.matches;
+	}
+	function c() {
+		typeof window > "u" || !window.matchMedia || (o = window.matchMedia(t), a.value = o.matches, o.addEventListener("change", s));
+	}
+	function l() {
+		o?.removeEventListener("change", s), o = null;
+	}
+	return e() && n(l), c(), {
+		matches: r(a),
+		stop: l
+	};
+}
+//#endregion
+//#region src/composables/dom/useIdleReady.ts
+function m(t = {}) {
+	let r = t.timeout ?? 2e3, a = i(!1), o = null, s = null, c = !1;
+	function l() {
+		c || a.value || (a.value = !0, t.onReady?.(), u());
+	}
+	function u() {
+		o !== null && typeof window < "u" && "cancelIdleCallback" in window && (window.cancelIdleCallback(o), o = null), s !== null && (clearTimeout(s), s = null);
+	}
+	function d() {
+		if (!c) {
+			if (typeof window > "u") {
+				l();
+				return;
+			}
+			"requestIdleCallback" in window ? o = window.requestIdleCallback(l, { timeout: r }) : s = setTimeout(l, 0);
+		}
+	}
+	d();
+	function f() {
+		c || (c = !0, u());
+	}
+	return e() && n(f), {
+		ready: a,
+		stop: f
+	};
+}
+//#endregion
+//#region src/composables/dom/useViewportReady.ts
+function h(t, r = {}) {
+	let a = r.rootMargin ?? "200px", s = r.idleTimeout ?? 1e4, c = r.threshold ?? .01, l = i(!1), u = null, d, f = null, p = null, m = !1;
+	function h() {
+		m || l.value || (l.value = !0, _());
+	}
+	function g() {
+		if (!m) {
+			if (typeof window > "u") {
+				h();
+				return;
+			}
+			"requestIdleCallback" in window ? f = window.requestIdleCallback(h, { timeout: s }) : p = setTimeout(h, 16);
+		}
+	}
+	function _() {
+		u &&= (u.disconnect(), null), f !== null && typeof window < "u" && "cancelIdleCallback" in window && (window.cancelIdleCallback(f), f = null), p !== null && (clearTimeout(p), p = null);
+	}
+	function v(e) {
+		if (typeof window > "u" || !("IntersectionObserver" in window)) {
+			g();
+			return;
+		}
+		u = new IntersectionObserver((e) => {
+			if (!m) {
+				for (let t of e) if (t.isIntersecting) {
+					g(), u?.disconnect(), u = null;
+					break;
+				}
+			}
+		}, {
+			rootMargin: a,
+			threshold: c
+		}), u.observe(e);
+	}
+	function y(e) {
+		m || l.value || d !== void 0 && d === e || (_(), d = e, e ? v(e) : g());
+	}
+	y(t.value);
+	let b = o(t, (e) => {
+		y(e);
+	}, { flush: "post" });
+	function x() {
+		m || (m = !0, b(), _());
+	}
+	return e() && n(x), {
+		ready: l,
+		stop: x
+	};
+}
+//#endregion
+export { f as a, d as i, m as n, s as o, p as r, h as t };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "3.4.0",
+    "version": "3.5.0",
     "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "repository": {
@@ -550,6 +550,7 @@
         "proof:phantom-classes": "node scripts/proof-phantom-classes.mjs",
         "proof:vt-names": "node scripts/proof-vt-names.mjs",
         "proof:dock-animation-live": "node scripts/proof-dock-animation-live.mjs",
+        "proof:dock-clip-reveal": "node scripts/proof-dock-clip-reveal.mjs",
         "proof:dock-motion-parity": "node scripts/proof-dock-motion-parity.mjs",
         "proof:dock-motion-single-source": "node scripts/proof-dock-motion-single-source.mjs",
         "proof:dock-opacity-lockstep": "node scripts/proof-dock-opacity-lockstep.mjs",

package/src/styles/dock.css

@@ -95,14 +95,56 @@
         box-shadow: var(--glass-edge-light), var(--shadow-dock-override, var(--shadow-dock));
     }
 
-    /* `overflow: hidden` is the clip shell for every dock. AT.W7-dock-a
-       folded out the prior `containerName` clip-lift (the container-query
-       opt-in is orthogonal — it no longer silently changes the clip), so the
-       clip applies universally and the `.expanded` / `.always-expanded` /
-       `.dock-overflow-wrap` states lift it back to `visible` where they need to
-       grow. A consumer wanting multi-line content opts into `overflow="wrap"`. */
-    .glass-dock {
-        overflow: hidden;
+    /* AW.W2 — the box IS the reveal aperture (clip-reveal one-clock morph).
+       Migrated from `overflow: hidden` to a SINGLE-AXIS `overflow: clip` on the
+       MORPH axis (horizontal clips X / visible Y; vertical clips Y / visible X),
+       gated on a `data-morphing` attribute the driver owns (set at gesture START,
+       cleared on SETTLE). The clip PERSISTS through the morph — content is laid
+       out ONCE at its natural size behind the aperture and the growing/shrinking
+       box uncovers it, never spills it — and lifts to `visible` only at REST
+       expanded (so grown content + the focus ring paint past the box). The
+       prior `.expanded { overflow: visible }` (bound synchronously to
+       `visualExpanded`) lifted the clip at frame 0, leaving no aperture to reveal
+       through; the `:not([data-morphing])` guard holds the clip for the whole
+       gesture and lifts it on the final paint.
+
+       `overflow: clip` is PAINT-ONLY (not a scroll container): it never
+       participates in `scrollIntoView`/scroll-anchoring, cannot be a
+       scroll-driven-animation `scroller`, and drops the `min-width:0` scroll-box
+       dance for the non-scroll shell. The cross axis is ALWAYS explicitly
+       `visible` (the MDN single-axis-clip-degrades-to-hidden caveat). The
+       legitimate scroll ports (`.dock-scroll-{x,y}`, `overflow: auto`) STAY
+       `auto` — they are NOT migrated. AT.W7-dock-a's orthogonality holds: the
+       `containerName` opt-in does not touch the clip. */
+    .glass-dock:not(.vertical) {
+        overflow-x: clip;
+        overflow-y: visible;
+    }
+
+    .glass-dock.vertical {
+        overflow-x: visible;
+        overflow-y: clip;
+    }
+
+    /* DURING a morph the clip is the aperture — keyed off `data-morphing`, NOT
+       off `.expanded`, so it survives the whole gesture and the box reveals its
+       content rather than letting it spill. */
+    .glass-dock[data-morphing]:not(.vertical) {
+        overflow-x: clip;
+        overflow-y: visible;
+    }
+
+    .glass-dock[data-morphing].vertical {
+        overflow-x: visible;
+        overflow-y: clip;
+    }
+
+    /* AT REST EXPANDED — lift the morph-axis clip (grown content + focus ring
+       paint past the box). Fires ONLY when NOT morphing; the [data-morphing]
+       rules above win during the gesture by being more specific + later. */
+    .glass-dock.expanded:not([data-morphing]),
+    .glass-dock.always-expanded:not([data-morphing]) {
+        overflow: visible;
     }
 
     .glass-dock[data-density="compact"] {
@@ -283,13 +325,17 @@
         width: auto;
         height: auto;
         max-block-size: var(--dock-max-block-size);
-        overflow-x: visible;
-        overflow-y: visible;
+        /* overflow on the block (morph) axis is the data-morphing-gated clip
+           shell above; the cross axis stays visible there. */
         padding: var(--dock-vertical-padding, var(--dock-padding-block, 0.375rem));
         border-radius: var(--radius-dock);
+        /* AW.W2 — axis-parity carve: NON-morph properties only. The block-axis
+           (height) morph is owned by the inner `.dock-layer-stack` / DockLayerGroup
+           spring (or the VT path); a `height var(--dock-motion-resize)` here would
+           be a second driver on the same axis (the AV.W9.0 dual-driver race),
+           and `width` is the cross axis the spring never writes. Matches how
+           `:not(.vertical)` already excludes `width`. */
         transition:
-            height var(--dock-motion-resize),
-            width var(--dock-motion-resize),
             padding var(--dock-motion-resize),
             box-shadow var(--dock-motion-standard),
             transform var(--dock-motion-resize),
@@ -549,13 +595,16 @@
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
-        /* The active layer shows immediately — no deferred `visibility`. AU.W2:
-           the opacity rides `--dock-motion-resize` (lockstep with the container
-           morph), but the `visibility 0s` stays immediate (the `:434` rule
-           governs — the active layer must paint at once, no fade-in delay). */
-        transition:
-            opacity var(--dock-motion-resize),
-            visibility 0s;
+        /* AW.W2 — the active pane is STATICALLY opacity:1, REVEALED by the clip
+           aperture (the box is the reveal mechanism), never faded. The prior
+           `opacity var(--dock-motion-resize)` arm is DELETED: there is ZERO
+           opacity authority on the active pane now — the aperture uncovers a
+           layout that is laid out ONCE at natural size behind it. Only `visibility
+           0s` survives (the active layer must paint at once, no fade-in delay —
+           the AU.W2 governing rule). The leaving pane keeps the shared-token
+           opacity fade below (the ONLY surviving opacity animation, the thin
+           polish proof:dock-opacity-lockstep names). */
+        transition: visibility 0s;
     }
 
     /* A leaving layer is inactive for hit-testing but still painted
@@ -585,9 +634,19 @@
     .dock-layer {
         display: flex;
         align-items: center;
-        white-space: nowrap;
         grid-area: 1 / 1;
         gap: var(--dock-layer-gap, 0.375rem);
+    }
+
+    /* AW.W2 — content-intrinsic axis follows the MORPH axis. A horizontal dock
+       lays its inline content out ONCE at `width: max-content` (nowrap) so the
+       width aperture uncovers a static row; the fixed `height` keeps the row a
+       single line. Scoped to `:not(.vertical)` so a vertical rail (whose
+       block-axis morph reveals a column) is NOT forced onto one nowrap row — the
+       vertical group's active host block-sizes to `height: max-content` below
+       (the AP.W3 column treatment, KEPT). */
+    .glass-dock:not(.vertical) .dock-layer {
+        white-space: nowrap;
         height: var(--dock-layer-height, 2.5rem);
     }
 
@@ -600,10 +659,11 @@
         inset: 0;
     }
 
-    .glass-dock.expanded {
-        overflow: visible;
-    }
-
+    /* AW.W2 — the at-rest clip-lift moved to `.expanded:not([data-morphing])` /
+       `.always-expanded:not([data-morphing])` (the clip-shell block at the top).
+       A plain `overflow: visible` here would lift the clip DURING the morph (the
+       load-bearing sequencing gap), so the `overflow` declarations are dropped
+       from these state rules; they keep only their non-overflow concerns. */
     .glass-dock.expanded:not(.fit-content) .dock-layers {
         width: 100%;
     }
@@ -614,15 +674,6 @@
 
     .glass-dock.always-expanded {
         cursor: default;
-        overflow: visible;
-    }
-
-    /* Z.W2.T2 — always-expanded vertical rails inherit the same
-       grow-to-fit + visible contract. The prior auto pair re-introduced
-       the scroll affordance that A2 §B6 rejected. */
-    .glass-dock.vertical.always-expanded {
-        overflow-x: visible;
-        overflow-y: visible;
     }
 
     /* ── Scroll-on-overflow opt-in (GlassDock `overflow="scroll"`) ───────
@@ -854,9 +905,13 @@
     .dock-layer-stack {
         position: relative;
         display: grid;
-        transition:
-            width var(--dock-motion-resize),
-            height var(--dock-motion-resize);
+        /* AW.W2 — the morph axis (width for a horizontal group, height for a
+           vertical one) is driven by the `useLayerTransition` SpringProgress in
+           pixel space (FLIP path) or the View-Transition (native path); a CSS
+           `width`/`height` transition here would be a SECOND driver on the same
+           axis (the AV.W9.0 dual-driver race that froze the dock). The cross axis
+           is intrinsic-sized and never morphs. So NO size transition on the stack
+           — one owner per axis. */
     }
 
     /* Base layout — the crossfade + hit-test contract is shared with

package/src/styles/glass.css

@@ -285,7 +285,13 @@
 
         height: 2.5rem;
         border-radius: var(--radius-pill);
-        border: 1.5px solid var(--glass-border-wash);
+        /* AW.W13 — the resting field edge reads as an enclosed control at rest.
+           Was `--glass-border-wash` (~8%α), which nearly vanished on cream; the
+           lift to `--surface-tint-15` (15%α — ~2× the prior floor) makes the
+           edge legible without going loud. The `:focus-visible` accent ring +
+           the `:user-invalid`/`[aria-invalid]` destructive ring below still win
+           by order + specificity, so this only raises the resting alpha. */
+        border: 1.5px solid var(--surface-tint-15);
         background: var(--glass-bg-quiet);
         backdrop-filter: var(--glass-blur-wash);
         padding: 0 1rem;
@@ -361,6 +367,43 @@
         opacity: 0.5;
         cursor: not-allowed;
     }
+
+    /* AW.W13 — the Select trigger mirrors the input pill's resting border lift.
+       The reka-ui SelectTrigger renders `role="combobox"` over the `.glass-wash`
+       surface; its 8%α `--glass-border-wash` field edge vanished on cream just
+       like the input pill, so the same `--surface-tint-15` lift makes the
+       trigger read as an enclosed control at rest. Scoped to the combobox role
+       so the lift reaches ONLY the Select trigger, not every `.glass-wash`
+       surface. */
+    .glass-wash[role="combobox"] {
+        border-color: var(--surface-tint-15);
+    }
+
+    /* ── Deck-position rail (AW.W16) ──────────────────────────────────────
+       A CSS recipe that RESTYLES the shipped `<Progress variant="default">`
+       (the reka-ui ProgressRoot track + its indicator child) into the thin
+       bottom-of-deck position rail. It composes the EXISTING fill — it does NOT
+       re-author a second track/range mechanic. Every visual axis is a
+       `--progress-rail-*` token, so a consumer/dark-flip re-tints with zero
+       library edit (`:root { --progress-rail-fill: … }`). The viewport-pinned
+       chrome (`position: fixed`, `env(safe-area-inset-bottom)`, the z-index) is
+       CONSUMER-supplied — this recipe owns only the LOOK. */
+    .glass-progress-rail {
+        /* The track hairline — the rail reads as a thin sliver, not a 16px bar. */
+        height: var(--progress-rail-h, 3px);
+        border-radius: 0;
+        background: var(--progress-rail-track, color-mix(in srgb, var(--foreground) 8%, transparent));
+    }
+
+    /* The fill — the shipped ProgressIndicator child. A leading-edge glow on the
+       fill's trailing edge reads as a moving position head. */
+    .glass-progress-rail > * {
+        border-radius: 0;
+        background: var(--progress-rail-fill, var(--primary));
+        box-shadow:
+            var(--progress-rail-glow-x, 4px) 0 var(--progress-rail-glow-blur, 8px)
+            color-mix(in srgb, var(--progress-rail-fill, var(--primary)) var(--progress-rail-glow-strength, 55%), transparent);
+    }
 }
 
 /* ── Accessibility: reduced transparency ────────── */

package/src/styles/instrument-chassis.css

@@ -231,6 +231,9 @@
     /* Chassis dividers — twin-line hairline grooves ─────────────── */
 
     .chassis-divider {
+        /* AW.W15 — consume the shared twin-line α pair (the catch-light +
+           under-shadow tokens publish here; the .bezel-line rules read them). */
+        @apply twin-line-divider;
         flex-shrink: 0;
         position: relative;
         background: transparent;
@@ -269,19 +272,13 @@
         height: 100%;
     }
 
-    /* Q.W4.A — bezel-line α lift in light mode per audit-A4 §1 row 2-3 +
-       §11 #2-#3 + §12 Action 2. The 0.04 / 0.06 light-mode pair was
-       calibrated against a flat bg; under the saturated-aurora chassis
-       composition the catch-light + under-shadow read as one slightly
-       darker pixel, and the twin-line groove fails its job. Bumping to
-       0.10 / 0.12 holds the divider against the bleed without committing
-       to the dark-mode pair's contrast (the dark mode already runs at
-       0.06 / 0.18 against a low-light bg). */
-    .bezel-line.top    { background: rgb(255 255 255 / 0.10); }
-    .bezel-line.bottom { background: rgb(0 0 0 / 0.12); }
-
-    .dark .bezel-line.top    { background: rgb(255 255 255 / 0.06); }
-    .dark .bezel-line.bottom { background: rgb(0 0 0 / 0.18); }
+    /* AW.W15 — the twin-line α pair now lives in the `twin-line-divider`
+       @utility (single source, dark-adaptive). The `.chassis-divider` host
+       `@apply`s it, publishing `--twin-line-catch` / `--twin-line-shadow`; these
+       rules read the tokens. The prior Q.W4.A light pair (0.10 / 0.12) and the
+       dark pair (0.06 / 0.18) are the values the utility resolves. */
+    .bezel-line.top    { background: var(--twin-line-catch); }
+    .bezel-line.bottom { background: var(--twin-line-shadow); }
 
     /* Inner dial divider — same primitive, vertical on desktop. Speedtest
        slots its <ChassisDivider orientation="vertical" class="dial-divider" />