@mkbabb/glass-ui 3.0.0 → 3.1.0

package/dist/{sheet-BsBdO5jq.js → sheet-CukNDezz.js}

@@ -1,13 +1,13 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./x-Cb3NE2Ne.js";
-import { t as n } from "./useSpringMount-BTRBNzXP.js";
-import { t as r } from "./ModalOverlay-DKLVY-cj.js";
-import { computed as i, createBlock as a, createElementBlock as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeClass as d, normalizeProps as f, openBlock as p, renderSlot as m, toHandlers as h, unref as g, withCtx as _ } from "vue";
-import { DialogClose as v, DialogContent as y, DialogDescription as b, DialogPortal as x, DialogRoot as S, DialogTitle as C, DialogTrigger as w, injectDialogRootContext as T, useForwardPropsEmits as E } from "reka-ui";
-import { cva as D } from "class-variance-authority";
+import { t } from "./x-q7pJa83X.js";
+import { t as n } from "./useSpringMount-Cfk1XK1R.js";
+import { t as r } from "./ModalOverlay-iWiAgbYH.js";
+import { computed as i, createBlock as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeProps as d, normalizeClass as f, normalizeProps as p, openBlock as m, renderSlot as h, toHandlers as g, unref as _, withCtx as v } from "vue";
+import { DialogClose as y, DialogContent as b, DialogDescription as x, DialogPortal as S, DialogRoot as C, DialogTitle as w, DialogTrigger as T, injectDialogRootContext as E, useForwardPropsEmits as D } from "reka-ui";
+import { cva as O } from "class-variance-authority";
 //#endregion
 //#region src/components/ui/sheet/Sheet.vue
-var O = /* @__PURE__ */ c({
+var k = /* @__PURE__ */ l({
 	__name: "Sheet",
 	props: {
 		open: { type: Boolean },
@@ -16,13 +16,13 @@ var O = /* @__PURE__ */ c({
 	},
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
-		let n = E(e, t);
-		return (e, t) => (p(), a(g(S), f(l(g(n))), {
-			default: _(() => [m(e.$slots, "default")]),
+		let n = D(e, t);
+		return (e, t) => (m(), a(_(C), p(u(_(n))), {
+			default: v(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 16));
 	}
-}), k = /* @__PURE__ */ c({
+}), A = /* @__PURE__ */ l({
 	__name: "SheetTrigger",
 	props: {
 		asChild: { type: Boolean },
@@ -30,12 +30,12 @@ var O = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let t = e;
-		return (e, n) => (p(), a(g(w), f(l(t)), {
-			default: _(() => [m(e.$slots, "default")]),
+		return (e, n) => (m(), a(_(T), p(u(t)), {
+			default: v(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 16));
 	}
-}), A = /* @__PURE__ */ c({
+}), j = /* @__PURE__ */ l({
 	__name: "SheetClose",
 	props: {
 		asChild: { type: Boolean },
@@ -43,12 +43,12 @@ var O = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let t = e;
-		return (e, n) => (p(), a(g(v), f(l(t)), {
-			default: _(() => [m(e.$slots, "default")]),
+		return (e, n) => (m(), a(_(y), p(u(t)), {
+			default: v(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 16));
 	}
-}), j = /* @__PURE__ */ c({
+}), M = /* @__PURE__ */ l({
 	inheritAttrs: !1,
 	__name: "SheetContent",
 	props: {
@@ -76,17 +76,17 @@ var O = /* @__PURE__ */ c({
 		"openAutoFocus",
 		"closeAutoFocus"
 	],
-	setup(o, { emit: c }) {
-		let l = o, d = c, f = E(i(() => {
-			let { class: e, side: t, spring: n, dragDismiss: r, dragThreshold: i, ...a } = l;
+	setup(o, { emit: l }) {
+		let u = o, f = l, p = D(i(() => {
+			let { class: e, side: t, spring: n, dragDismiss: r, dragThreshold: i, ...a } = u;
 			return a;
-		}), d), b = l.spring ? T() : null, S = l.spring && b ? n({
-			open: b.open,
-			preset: typeof l.spring == "string" ? l.spring : "smooth",
-			dismissThreshold: l.dragThreshold ?? .3,
-			onDismiss: () => b.onOpenChange(!1)
-		}) : null, C = i(() => l.side ?? "right");
-		function w(e, t) {
+		}), f), x = u.spring ? E() : null, C = u.spring && x ? n({
+			open: x.open,
+			preset: typeof u.spring == "string" ? u.spring : "smooth",
+			dismissThreshold: u.dragThreshold ?? .3,
+			onDismiss: () => x.onOpenChange(!1)
+		}) : null, w = i(() => u.side ?? "right");
+		function T(e, t) {
 			let n = `${e * 100}%`;
 			switch (t) {
 				case "top": return `translateY(-${n})`;
@@ -95,28 +95,28 @@ var O = /* @__PURE__ */ c({
 				default: return `translateX(${n})`;
 			}
 		}
-		let D = i(() => {
-			if (S) return {
-				transform: w(S.position.value, C.value),
+		let O = i(() => {
+			if (C) return {
+				transform: T(C.position.value, w.value),
 				animation: "none",
 				transition: "none"
 			};
-		}), O = i(() => l.spring && l.dragDismiss && S ? S.dragHandlers : {});
-		return (n, i) => (p(), a(g(x), null, {
-			default: _(() => [s(r, {
+		}), k = i(() => u.spring && u.dragDismiss && C ? C.dragHandlers : {});
+		return (n, i) => (m(), a(_(S), null, {
+			default: v(() => [c(r, {
 				scrim: "glass",
 				animate: "fade",
 				layout: "centered"
-			}), s(g(y), u({ class: g(e)(g(I)({ side: C.value }), l.spring ? "transition-none" : "", l.class) }, {
-				...g(f),
+			}), c(_(b), d({ class: _(e)(_(L)({ side: w.value }), u.spring ? "transition-none" : "", u.class) }, {
+				..._(p),
 				...n.$attrs
 			}, {
-				style: D.value,
-				"data-spring": l.spring ? typeof l.spring == "string" ? l.spring : "smooth" : void 0,
-				"data-drag-dismiss": l.spring && l.dragDismiss ? "" : void 0
-			}, h(O.value)), {
-				default: _(() => [m(n.$slots, "default"), s(g(v), { class: "focus-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-secondary" }, {
-					default: _(() => [s(g(t), { class: "w-4 h-4 text-muted-foreground" })]),
+				style: O.value,
+				"data-spring": u.spring ? typeof u.spring == "string" ? u.spring : "smooth" : void 0,
+				"data-drag-dismiss": u.spring && u.dragDismiss ? "" : void 0
+			}, g(k.value)), {
+				default: v(() => [h(n.$slots, "default"), c(_(y), { class: "focus-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-secondary" }, {
+					default: v(() => [c(_(t), { class: "w-4 h-4 text-muted-foreground" }), i[0] ||= s("span", { class: "sr-only" }, "Close", -1)]),
 					_: 1
 				})]),
 				_: 3
@@ -129,7 +129,7 @@ var O = /* @__PURE__ */ c({
 			_: 3
 		}));
 	}
-}), M = /* @__PURE__ */ c({
+}), N = /* @__PURE__ */ l({
 	__name: "SheetHeader",
 	props: { class: { type: [
 		Boolean,
@@ -140,9 +140,9 @@ var O = /* @__PURE__ */ c({
 	] } },
 	setup(t) {
 		let n = t;
-		return (t, r) => (p(), o("div", { class: d(g(e)("flex flex-col gap-y-2 text-center sm:text-left", n.class)) }, [m(t.$slots, "default")], 2));
+		return (t, r) => (m(), o("div", { class: f(_(e)("flex flex-col gap-y-2 text-center sm:text-left", n.class)) }, [h(t.$slots, "default")], 2));
 	}
-}), N = /* @__PURE__ */ c({
+}), P = /* @__PURE__ */ l({
 	__name: "SheetTitle",
 	props: {
 		asChild: { type: Boolean },
@@ -160,12 +160,12 @@ var O = /* @__PURE__ */ c({
 			let { class: e, ...t } = n;
 			return t;
 		});
-		return (t, i) => (p(), a(g(C), u({ class: g(e)("text-subheading text-foreground", n.class) }, r.value), {
-			default: _(() => [m(t.$slots, "default")]),
+		return (t, i) => (m(), a(_(w), d({ class: _(e)("text-subheading text-foreground", n.class) }, r.value), {
+			default: v(() => [h(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), P = /* @__PURE__ */ c({
+}), F = /* @__PURE__ */ l({
 	__name: "SheetDescription",
 	props: {
 		asChild: { type: Boolean },
@@ -183,12 +183,12 @@ var O = /* @__PURE__ */ c({
 			let { class: e, ...t } = n;
 			return t;
 		});
-		return (t, i) => (p(), a(g(b), u({ class: g(e)("text-sm text-muted-foreground", n.class) }, r.value), {
-			default: _(() => [m(t.$slots, "default")]),
+		return (t, i) => (m(), a(_(x), d({ class: _(e)("text-sm text-muted-foreground", n.class) }, r.value), {
+			default: v(() => [h(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), F = /* @__PURE__ */ c({
+}), I = /* @__PURE__ */ l({
 	__name: "SheetFooter",
 	props: { class: { type: [
 		Boolean,
@@ -199,9 +199,9 @@ var O = /* @__PURE__ */ c({
 	] } },
 	setup(t) {
 		let n = t;
-		return (t, r) => (p(), o("div", { class: d(g(e)("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2", n.class)) }, [m(t.$slots, "default")], 2));
+		return (t, r) => (m(), o("div", { class: f(_(e)("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2", n.class)) }, [h(t.$slots, "default")], 2));
 	}
-}), I = D("fixed z-modal gap-4 glass-floating p-6 transition ease-in-out sheet-animate", {
+}), L = O("fixed z-modal gap-4 glass-floating p-6 transition ease-in-out sheet-animate", {
 	variants: { side: {
 		top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 		bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
@@ -211,4 +211,4 @@ var O = /* @__PURE__ */ c({
 	defaultVariants: { side: "right" }
 });
 //#endregion
-export { M as a, k as c, N as i, O as l, F as n, j as o, P as r, A as s, I as t };
+export { N as a, A as c, P as i, k as l, I as n, M as o, F as r, j as s, L as t };

package/dist/sheet.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./sheet-BsBdO5jq.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./sheet-CukNDezz.js";
 export { r as Sheet, s as SheetClose, a as SheetContent, o as SheetDescription, i as SheetFooter, e as SheetHeader, n as SheetTitle, t as SheetTrigger, c as sheetVariants };

package/dist/{slider-BQaLYFLh.js → slider-DJvHkTRe.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./_plugin-vue_export-helper-n-_DRHWS.js";
-import { i as n } from "./dockContext-BDGSrwsV.js";
-import { t as r } from "./useTouchGate-BhhEMlwJ.js";
+import { t } from "./_plugin-vue_export-helper-Dq1MygBL.js";
+import { i as n } from "./dockContext-D5NZCWJs.js";
+import { t as r } from "./useTouchGate-D9Zvrzyc.js";
 import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createVNode as c, defineComponent as l, mergeProps as u, onBeforeUnmount as d, openBlock as f, renderList as p, unref as m, useTemplateRef as h, watch as g, withCtx as _ } from "vue";
 import { SliderRange as v, SliderRoot as y, SliderThumb as b, SliderTrack as x, useForwardPropsEmits as S } from "reka-ui";
 import { cva as C } from "class-variance-authority";

package/dist/slider.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./slider-BQaLYFLh.js";
+import { n as e, t } from "./slider-DJvHkTRe.js";
 export { e as Slider, t as sliderVariants };

package/dist/sortable-list.js

@@ -1,5 +1,5 @@
-import { t as e } from "./_plugin-vue_export-helper-n-_DRHWS.js";
-import { t } from "./useSortable-Ck0rBJ4g.js";
+import { t as e } from "./_plugin-vue_export-helper-Dq1MygBL.js";
+import { t } from "./useSortable-Cq2Y1JLO.js";
 import { computed as n, createBlock as r, defineComponent as i, inject as a, mergeProps as o, openBlock as s, provide as c, renderSlot as l, resolveDynamicComponent as u, toRef as d, unref as f, withCtx as p } from "vue";
 //#region src/components/custom/sortable-list/context.ts
 var m = Symbol("glass-ui:sortable");

package/dist/styles/animations.css

@@ -296,3 +296,80 @@
         animation: none;
     }
 }
+
+/* ── §TOP-LAYER ENTRY/EXIT (AQ.W5 §Design 2) ───────────────────────────────
+ *
+ * A pure-CSS entry/exit grammar for NATIVE top-layer surfaces — `[popover]`
+ * elements and native `<dialog>` — keyed off `:popover-open` / `dialog[open]`,
+ * plus a glass `::backdrop`. This replaces the per-frame inline-style entry the
+ * platform now owns: `@starting-style` + `transition` + `transition-behavior:
+ * allow-discrete` + `overlay`.
+ *
+ * SCOPE: this applies ONLY to elements tagged `.glass-top-layer`. It does NOT
+ * touch reka-ui's portaled overlays — those keep their `tw-animate-css`
+ * data-state fade (distinct selectors, no cascade fight, mirroring the
+ * `[data-scrim-animation]` discipline above). `DialogContent`'s `spring` opt-in
+ * (`useSpringMount`) is also untouched — a legitimate iOS-physics variant, not a
+ * duplicate of this fade.
+ *
+ * Baseline: `@starting-style` = Widely Available; `transition-behavior:
+ * allow-discrete` + `overlay` = Newly Available → adopt natively, gate the
+ * whole grammar on `@supports (overlay: auto)`. A non-supporting engine shows
+ * the element instantly (acceptable for a native top-layer surface; glass-ui
+ * ships no JS top-layer coordinator — that is reka-ui Dialog's remit).
+ *
+ * Uses `scale:` (the longhand) not `transform: scale()` so it composes with the
+ * identity-base transform work and does not mint a stacking context. Every
+ * visual axis reads a `--top-layer-*` token (tokens.css §20).
+ */
+@supports (overlay: auto) {
+    /* Base (closed / exit) + the transition list. `allow-discrete` MUST come
+     * after the property longhands, never negated. */
+    .glass-top-layer[popover],
+    dialog.glass-top-layer {
+        opacity: 0;
+        scale: var(--top-layer-enter-scale, 0.96);
+        transition-property: opacity, scale, display, overlay;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: var(--ease-apple-spring);
+        transition-behavior: allow-discrete;
+    }
+
+    /* Open state + `@starting-style` entry (starting-style AFTER the open
+     * selector so the entry interpolates from the closed values). */
+    .glass-top-layer[popover]:popover-open,
+    dialog.glass-top-layer[open] {
+        opacity: 1;
+        scale: 1;
+        @starting-style {
+            opacity: 0;
+            scale: var(--top-layer-enter-scale, 0.96);
+        }
+    }
+
+    /* Glass backdrop — blur + dim, animated discretely. `::backdrop` only
+     * exists for `showModal()` dialogs, NOT `[popover]` (popovers are
+     * non-modal — correct, no scrim). */
+    dialog.glass-top-layer::backdrop {
+        background-color: hsl(var(--background) / 0);
+        backdrop-filter: blur(var(--top-layer-backdrop-blur, 8px));
+        transition: display var(--duration-normal) allow-discrete,
+                    overlay var(--duration-normal) allow-discrete,
+                    background-color var(--duration-normal) var(--ease-standard);
+    }
+    dialog.glass-top-layer[open]::backdrop {
+        background-color: hsl(var(--background) / var(--top-layer-backdrop-dim, 0.5));
+        @starting-style {
+            background-color: hsl(var(--background) / 0);
+        }
+    }
+}
+
+/* Reduced-motion carve — flatten the scale to a fade, shorten the duration. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-top-layer[popover],
+    dialog.glass-top-layer {
+        scale: none;
+        transition-duration: var(--duration-fast);
+    }
+}

package/dist/styles/cards.css

@@ -33,12 +33,16 @@
 @utility cartoon-surface {
     border-width: 2px;
     box-shadow: var(--shadow-cartoon-md);
+    /* Individual-transform identity base (AQ.W3 §W3.2) — state-driven 2D lift on
+       a card surface that often hosts portaled content; `translate: 0` at rest
+       mints the stacking context once. Longhand maps `translate(x, y)` 1:1. */
+    translate: 0;
     transition:
-        transform var(--duration-normal) var(--ease-apple-spring),
+        translate var(--duration-normal) var(--ease-apple-spring),
         box-shadow var(--duration-normal) var(--ease-apple);
 
     &:hover:not(:disabled) {
-        transform: translate(var(--lift-sm), var(--lift-sm));
+        translate: var(--lift-sm) var(--lift-sm);
         box-shadow: var(--shadow-cartoon-lg);
     }
 }

package/dist/styles/dock.css

@@ -56,6 +56,11 @@
         --dock-wrap-max-width: calc(100vw - var(--dock-viewport-inline-gutter, 1rem));
         --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
         --dock-collapsed-hover-scale: var(--scale-hover-dock);
+        /* Individual-transform identity base (AQ.W3 §W3.2). `scale: 1` at rest
+           mints the stacking context once so a portaled popover over `--z-dock`
+           stays above the dock during a hover scale (the load-bearing
+           stacking-context guarantee). Covers every dock scale site. */
+        scale: 1;
         position: relative;
         display: inline-flex;
         align-items: center;
@@ -308,7 +313,7 @@
         background: var(--glass-bg-wash);
         border-color: var(--glass-border-floating);
         box-shadow: var(--shadow-dock-override, var(--shadow-dock));
-        transform: scale(var(--dock-collapsed-hover-scale));
+        scale: var(--dock-collapsed-hover-scale);
     }
 
     /* J.W5.C — held-state substrate response.
@@ -331,6 +336,15 @@
             box-shadow var(--duration-fast) var(--ease-standard);
     }
 
+    /* AQ.W3 §W3.1b — open-descendant surface response. When a dock-hosted
+       trigger (`[data-state="open"]`) is open, the dock root holds its elevated
+       read natively (no consumer JS). Idempotent with `[data-held]` above (same
+       floating paint, different trigger). Decorative; `:has()` Baseline Widely. */
+    .glass-dock:has([data-state="open"]) {
+        background: var(--glass-bg-floating, var(--glass-bg-resting));
+        border-color: var(--glass-border-floating, var(--glass-border-resting));
+    }
+
     .glass-dock:where(.fixed) {
         z-index: var(--z-dock);
     }
@@ -647,6 +661,8 @@
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         width: var(--dock-control-size, var(--size-icon-btn));
         height: var(--dock-control-size, var(--size-icon-btn));
         padding: var(--dock-icon-padding, 0);
@@ -659,7 +675,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast);
     }
 
@@ -673,11 +689,11 @@
     .dock-icon-button:hover:not(:disabled) {
         background: var(--muted);
         color: var(--btn-hover-color, var(--foreground));
-        transform: scale(var(--scale-hover-dock));
+        scale: var(--scale-hover-dock);
     }
 
     .dock-icon-button:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-icon-button:focus:not(:focus-visible) {
@@ -691,7 +707,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast),
             box-shadow var(--dock-motion-fast);
     }
@@ -705,7 +721,7 @@
     .dock-icon-button:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
         background: var(--dock-active-bg);
         color: var(--dock-active-color);
-        transform: scale(var(--dock-active-scale));
+        scale: var(--dock-active-scale);
         border: var(--dock-active-border);
         box-shadow: var(--dock-active-shadow);
     }
@@ -809,10 +825,12 @@
         cursor: pointer;
         white-space: nowrap;
         outline: none;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast);
+            scale var(--dock-motion-fast);
     }
 
     .dock-tab-button:hover:not(:disabled) {
@@ -821,7 +839,7 @@
     }
 
     .dock-tab-button:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-tab-button:focus:not(:focus-visible) {
@@ -938,6 +956,8 @@
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         gap: var(--dock-trigger-gap, 0.25rem);
         min-height: var(--dock-trigger-min-height, auto);
         padding:
@@ -953,7 +973,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast);
     }
 
@@ -964,12 +984,12 @@
     }
 
     .dock-dropdown-trigger:hover:not(:disabled) {
-        transform: scale(var(--scale-hover-dock));
+        scale: var(--scale-hover-dock);
     }
 
     .dock-select-trigger:active:not(:disabled),
     .dock-dropdown-trigger:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-select-trigger:focus:not(:focus-visible),
@@ -985,7 +1005,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast),
             box-shadow var(--dock-motion-fast);
     }
@@ -1001,11 +1021,14 @@
         height: var(--dock-trigger-icon-size, 0.75rem);
         flex-shrink: 0;
         opacity: 0.5;
-        transition: transform var(--dock-motion-fast);
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `rotate:` longhand
+           for family consistency (not a stacking-context hazard: child glyph). */
+        rotate: 0deg;
+        transition: rotate var(--dock-motion-fast);
     }
 
     .dock-select-trigger[data-state="open"] .dock-select-trigger__chevron {
-        transform: rotate(180deg);
+        rotate: 180deg;
     }
 
     @media (min-width: 640px) {

package/dist/styles/glass.css

@@ -101,13 +101,30 @@
        Interactive cards live in <Card> (which owns its own hover composition)
        or in components that explicitly opt into a hover variant. */
     .glass-card {
+        /* Focus-elevation rungs (AQ.W3 §W3.1a) — identity = at-rest paint; the
+           `:has(:focus-visible)` rule redefines them (one source, shared with
+           the fallback). */
+        --card-focus-shadow: var(--shadow-card);
+        --card-focus-border: var(--glass-border-quiet);
         position: relative;
         background: var(--glass-bg-quiet);
         backdrop-filter: var(--glass-blur-quiet);
-        border: 1px solid var(--glass-border-quiet);
+        border: 1px solid var(--card-focus-border);
         border-radius: var(--radius-card);
-        box-shadow: var(--shadow-card);
+        box-shadow: var(--card-focus-shadow);
         contain: layout style;
+        transition:
+            box-shadow var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard);
+    }
+
+    /* Elevate one rung on descendant KEYBOARD focus (`:focus-visible`, not
+       pointer). Scoped to `.glass-card`. `:has()` Baseline Widely; the
+       `@supports not selector(:has(*))` class fallback (below) ships anyway
+       (focus-elevation is UX-critical — child-state-styling MANDATORY clause). */
+    .glass-card:has(:focus-visible) {
+        --card-focus-shadow: var(--shadow-md);
+        --card-focus-border: var(--glass-border-floating);
     }
 
     /* ── Glassmorphic circular icon button ── */
@@ -115,6 +132,10 @@
     .glass-btn {
         @apply flex items-center justify-center cursor-pointer;
 
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `scale: 1` at rest
+           mints the stacking context once so the hover/press scale below does
+           not flicker it into being (the z-index/anchor hazard). */
+        scale: 1;
         width: var(--size-icon-btn);
         height: var(--size-icon-btn);
         border-radius: var(--radius-pill);
@@ -126,18 +147,18 @@
             background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            transform var(--duration-normal) var(--spring-snappy);
+            scale var(--duration-normal) var(--spring-snappy);
     }
 
     .glass-btn:hover:not(:disabled) {
         background: color-mix(in srgb, var(--background) 85%, transparent);
         border-color: var(--surface-tint-22);
         color: var(--foreground);
-        transform: scale(var(--scale-hover));
+        scale: var(--scale-hover);
     }
 
     .glass-btn:active:not(:disabled) {
-        transform: scale(var(--scale-press));
+        scale: var(--scale-press);
     }
 
     .glass-btn:focus-visible {
@@ -210,12 +231,60 @@
         color: var(--surface-tint-35);
     }
 
-    .input-pill:focus {
+    /* AQ.W4 §W4.6 — keyboard-focus ring only. Was bare `:focus` (showed the
+       accent ring on a mouse click); `:focus-visible` matches the
+       `.focus-ring` / `.glass-btn` / dock-control discipline. Ordered BEFORE
+       the `:user-invalid` rungs so an invalid focused field shows destructive,
+       not accent (the `:user-invalid:focus-visible` rule below wins by order +
+       specificity). `:focus-visible` Baseline Widely — no fallback. */
+    .input-pill:focus-visible {
         outline: none;
         border-color: var(--color-accent-opaque, var(--ring));
         box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--ring) 30%, transparent));
     }
 
+    /* AQ.W4 §W4.1 — validity vocabulary on `.input-pill` (Input + Textarea).
+       The forgiving `:where(:user-invalid, .user-invalid-fallback)` group is
+       ONE rule covering native + the `useUserInvalidAria` fallback class (css
+       §3.2; NOT a live+dead alias — the class is the SOLE fallback for engines
+       without `:user-invalid`). The destructive/success tints reuse the
+       semantic tokens via `color-mix` per the house pattern (W2). Non-color
+       reinforcement is the error TEXT (W4.5 `error` slot) + the `required`
+       asterisk — the border/bg shift is the supplementary cue, never the sole
+       one. `:user-valid` is intentionally subtle (border only, no bg fill) so
+       a long valid form is not a wall of green. */
+    .input-pill:where(:user-invalid, .user-invalid-fallback) {
+        border-color: var(--destructive);
+        background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
+    }
+    .input-pill:where(:user-valid, .user-valid-fallback) {
+        border-color: var(--success);
+    }
+    /* Invalid + keyboard-focused → destructive ring (overrides the accent
+       `:focus-visible` ring above by order + the extra `:user-invalid`
+       compound). */
+    .input-pill:where(:user-invalid, .user-invalid-fallback):focus-visible {
+        border-color: var(--destructive);
+        box-shadow: 0 0 0 var(--focus-ring-width)
+            color-mix(in srgb, var(--destructive) 35%, transparent);
+    }
+
+    /* AQ.W4 §W4.3 — `field-sizing: content` autosize (opt-in via the Textarea
+       `autosize` prop → `[data-autosize]`). The textarea grows vertically with
+       content between a 3-line floor and a token-driven ceiling, then scrolls.
+       `field-sizing` Baseline Newly (Chromium 2024) — on a non-supporting
+       engine the declaration is ignored and the element keeps the
+       `min/max-block-size` bounds + standard scroll (no JS, no `@supports`,
+       no grid-mirror polyfill). The fixed-size path (default, `min-h-20`) is
+       the unchanged no-op fallback. */
+    .input-pill[data-autosize] {
+        field-sizing: content;
+        width: 100%;
+        min-block-size: 3lh;
+        max-block-size: var(--textarea-autosize-max, 12lh);
+        resize: vertical;
+    }
+
     .input-pill:disabled {
         opacity: 0.5;
         cursor: not-allowed;
@@ -275,3 +344,17 @@
         }
     }
 }
+
+/* ── :has() focus-elevation fallback (AQ.W3 §W3.1a) ──────────────────────
+   SOLE fallback for engines without `:has()`. `.is-focus-within` is toggled
+   by a ≤6-LOC focusin/focusout guard in `Card.vue` that runs ONLY when
+   `!CSS.supports('selector(:has(*))')` (modern engines run zero JS). The
+   class redefines the SAME `--card-focus-*` rungs as the `:has()` rule, so the
+   override values have one source. NOT a live+dead alias — `:has()` is the
+   enhancement, this the documented degradation path. */
+@supports not selector(:has(*)) {
+    .glass-card.is-focus-within {
+        --card-focus-shadow: var(--shadow-md);
+        --card-focus-border: var(--glass-border-floating);
+    }
+}