@mkbabb/glass-ui 2.1.0 → 3.1.0

package/dist/tabs.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, n as r, r as i, t as a } from "./TooltipProvider-C5QLSPto.js";
-import { t as o } from "./UnderlineTabs-BtrUcXn-.js";
+import { t } from "./_plugin-vue_export-helper-Dq1MygBL.js";
+import { i as n, n as r, r as i, t as a } from "./TooltipProvider-DE78vbEP.js";
+import { t as o } from "./UnderlineTabs-DAWMLmJG.js";
 import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, nextTick as g, normalizeClass as _, normalizeStyle as v, onMounted as y, onUnmounted as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, watch as D, withCtx as O } from "vue";
 //#region src/components/custom/tabs/BouncyToggle.vue?vue&type=script&setup=true&lang.ts
 var k = [
@@ -36,27 +36,27 @@ var k = [
 		function h(e, t) {
 			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 		}
-		let j = t, M = o, N = S(null), P = S([]), F = c(() => j.variant === "pill"), I = c(() => j.overflow === "scroll"), L = c(() => j.overflow === "auto"), R = c(() => j.multiSelect && Array.isArray(j.modelValue) ? j.modelValue : [j.modelValue]), z = (e) => R.value.includes(e), B = S({
+		let j = t, M = o, N = S(null), P = S([]), F = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-anchor", "--x"), I = c(() => j.variant === "pill"), L = c(() => j.overflow === "scroll"), R = c(() => j.overflow === "auto"), z = c(() => j.multiSelect && Array.isArray(j.modelValue) ? j.modelValue : [j.modelValue]), B = (e) => z.value.includes(e), V = c(() => !j.multiSelect && !F), H = c(() => j.multiSelect || !F), U = S({
 			width: "0px",
 			transform: "translateX(0px)",
 			opacity: "0"
 		});
-		function V() {
-			if (j.multiSelect) return;
+		function W() {
+			if (j.multiSelect || F) return;
 			let e = j.options.findIndex((e) => e.value === j.modelValue);
 			if (e < 0 || !P.value[e]) return;
 			let t = P.value[e];
-			B.value = {
+			U.value = {
 				width: `${t.offsetWidth}px`,
 				transform: `translateX(${t.offsetLeft}px)`,
 				opacity: "1"
 			};
 		}
-		let H = S({});
-		function U() {
+		let G = S({});
+		function K() {
 			if (!j.multiSelect) return;
 			let e = {};
-			for (let t of R.value) {
+			for (let t of z.value) {
 				let n = j.options.findIndex((e) => e.value === t), r = P.value[n];
 				r && (e[t] = {
 					width: `${r.offsetWidth}px`,
@@ -64,12 +64,12 @@ var k = [
 					opacity: "1"
 				});
 			}
-			H.value = e;
+			G.value = e;
 		}
-		function W() {
-			j.multiSelect ? U() : V();
+		function q() {
+			j.multiSelect ? K() : W();
 		}
-		function G(e) {
+		function J(e) {
 			if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			e.getAnimations().forEach((e) => e.cancel());
 			let t = h("--ease-apple-spring", "cubic-bezier(0.175, 0.885, 0.32, 1.275)"), n = h("--scale-press", "0.95"), r = h("--scale-hover", "1.08");
@@ -89,34 +89,38 @@ var k = [
 				easing: t
 			});
 		}
-		function K(e, t) {
+		function Y(e, t) {
 			if (j.options[t]?.disabled) return;
 			let n = P.value[t];
-			if (n && G(n), j.multiSelect) {
-				let t = [...R.value], n = t.indexOf(e);
+			if (n && J(n), j.multiSelect) {
+				let t = [...z.value], n = t.indexOf(e);
 				n > -1 ? t.length > 1 && t.splice(n, 1) : t.push(e), M("update:modelValue", t);
 			} else M("update:modelValue", e);
 		}
-		D(() => j.modelValue, () => g(W), { deep: !0 }), D(() => j.options, () => g(W), { deep: !0 });
-		let q = null;
+		D(() => j.modelValue, () => {
+			H.value && g(q);
+		}, { deep: !0 }), D(() => j.options, () => {
+			H.value && g(q);
+		}, { deep: !0 });
+		let X = null;
 		return y(() => {
-			g(W), N.value && (q = new ResizeObserver(() => W()), q.observe(N.value));
+			H.value && (g(q), N.value && (X = new ResizeObserver(() => q()), X.observe(N.value)));
 		}), b(() => {
-			q?.disconnect();
+			X?.disconnect();
 		}), (o, c) => (x(), d("div", {
 			ref_key: "containerRef",
 			ref: N,
-			class: _(E(e)(F.value ? "bouncy-toggle bouncy-toggle--pill" : "bouncy-toggle", I.value && "bouncy-toggle--scroll scroll-fade-mask scrollbar-hidden", L.value && "bouncy-toggle--auto scrollbar-hidden", j.class))
+			class: _(E(e)(I.value ? "bouncy-toggle bouncy-toggle--pill" : "bouncy-toggle", L.value && "bouncy-toggle--scroll scroll-fade-mask scrollbar-hidden", R.value && "bouncy-toggle--auto scrollbar-hidden", j.class))
 		}, [
 			t.multiSelect ? u("", !0) : (x(), d("div", {
 				key: 0,
-				class: _(F.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider"),
-				style: v(B.value)
+				class: _([I.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", V.value ? "bouncy-slider--js" : "bouncy-slider--anchor"]),
+				style: v(V.value ? U.value : void 0)
 			}, null, 6)),
-			t.multiSelect ? (x(!0), d(s, { key: 1 }, C(R.value, (e) => (x(), d("div", {
+			t.multiSelect ? (x(!0), d(s, { key: 1 }, C(z.value, (e) => (x(), d("div", {
 				key: "slider-" + e,
-				class: _(F.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider"),
-				style: v(H.value[e] ?? { opacity: "0" })
+				class: _([I.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", "bouncy-slider--js"]),
+				style: v(G.value[e] ?? { opacity: "0" })
 			}, null, 6))), 128)) : u("", !0),
 			(x(!0), d(s, null, C(t.options, (e, t) => (x(), d(s, { key: e.value }, [e.tooltip ? (x(), l(E(a), {
 				key: 0,
@@ -129,13 +133,13 @@ var k = [
 							ref: (e) => {
 								e && (P.value[t] = e);
 							},
-							class: _([F.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
-							"aria-pressed": z(e.value) ? "true" : "false",
+							class: _([I.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
+							"aria-pressed": B(e.value) ? "true" : "false",
 							disabled: e.disabled,
-							onClick: (n) => K(e.value, t)
+							onClick: (n) => Y(e.value, t)
 						}, [w(o.$slots, "option", {
 							option: e,
-							active: z(e.value)
+							active: B(e.value)
 						}, () => [p(T(e.label), 1)], !0)], 10, k)]),
 						_: 2
 					}, 1024), m(E(i), {
@@ -154,17 +158,17 @@ var k = [
 				ref: (e) => {
 					e && (P.value[t] = e);
 				},
-				class: _([F.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
-				"aria-pressed": z(e.value) ? "true" : "false",
+				class: _([I.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
+				"aria-pressed": B(e.value) ? "true" : "false",
 				disabled: e.disabled,
-				onClick: (n) => K(e.value, t)
+				onClick: (n) => Y(e.value, t)
 			}, [w(o.$slots, "option", {
 				option: e,
-				active: z(e.value)
+				active: B(e.value)
 			}, () => [p(T(e.label), 1)], !0)], 10, A))], 64))), 128))
 		], 2));
 	}
-}), [["__scopeId", "data-v-61c8392f"]]), M = /* @__PURE__ */ h({
+}), [["__scopeId", "data-v-25e9946f"]]), M = /* @__PURE__ */ h({
 	__name: "BouncyTabs",
 	props: {
 		options: {},

package/dist/timeline.js

@@ -1,5 +1,5 @@
-import { t as e } from "./_plugin-vue_export-helper-n-_DRHWS.js";
-import { t } from "./HoverPopover-Btv4RQfv.js";
+import { t as e } from "./_plugin-vue_export-helper-Dq1MygBL.js";
+import { t } from "./HoverPopover-CWFCfLx3.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createSlots as c, defineComponent as l, guardReactiveProps as u, normalizeClass as d, normalizeProps as f, normalizeStyle as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
 //#region src/components/custom/timeline/geometry.ts
 function x(e) {

package/dist/toast.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./Toaster-DY8_jtHv.js";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./Toaster-Bjlunvq4.js";
 export { t as Toast, o as ToastAction, i as ToastClose, e as ToastDescription, n as ToastTitle, s as Toaster, r as toast, a as useToast };

package/dist/toggle-group.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./ToggleGroupItem-BYG_8M9M.js";
+import { n as e, t } from "./ToggleGroupItem-OesUouE7.js";
 export { e as ToggleGroup, t as ToggleGroupItem };

package/dist/tooltip.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "./TooltipProvider-C5QLSPto.js";
+import { i as e, n as t, r as n, t as r } from "./TooltipProvider-DE78vbEP.js";
 export { e as Tooltip, n as TooltipContent, r as TooltipProvider, t as TooltipTrigger };

package/dist/typewriter.js

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-n-_DRHWS.js";
+import { t as e } from "./_plugin-vue_export-helper-Dq1MygBL.js";
 import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, onMounted as c, onUnmounted as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, watch as h } from "vue";
 //#region src/components/custom/typewriter/types.ts
 var g = {

package/dist/{useAnimatedNumber-DcvTR9B4.js → useAnimatedNumber-DKQYVB7s.js}

@@ -1,23 +1,12 @@
-import { getCurrentScope as e, onScopeDispose as t, readonly as n, ref as r, shallowRef as i, toValue as a, watch as o } from "vue";
-import { SmoothProgress as s } from "@mkbabb/keyframes.js";
-//#region src/composables/motion/constants.ts
-var c = {
-	canvasNeedle: .08,
-	domHero: .12,
-	domPill: .14,
-	domProgress: .18
-}, l = {
-	canvas: .002,
-	dom: .05,
-	domProgress: .5
-};
-//#endregion
+import { n as e, t } from "./constants-DwBwnG8N.js";
+import { getCurrentScope as n, onScopeDispose as r, readonly as i, ref as a, shallowRef as o, toValue as s, watch as c } from "vue";
+import { SmoothProgress as l } from "@mkbabb/keyframes.js";
 //#region src/composables/motion/useAnimatedNumber.ts
 function u(e) {
 	return Math.max(0, Math.min(100, e));
 }
 function d(d, f = {}) {
-	let p = f.mode ?? "absolute", m = p === "progress" ? (e) => u(e) / 100 : (e) => e, h = p === "progress" ? (e) => e * 100 : (e) => e, g = p === "progress" ? u(f.initial ?? 0) : f.initial ?? 0, _ = m(g), v = r(g), y = r(!1), b = p === "progress" ? c.domProgress : c.domHero, x = p === "progress" ? l.domProgress : l.dom, S = p === "progress" ? (f.snapThreshold ?? x) / 100 : f.snapThreshold ?? x, C = i(new s({
+	let p = f.mode ?? "absolute", m = p === "progress" ? (e) => u(e) / 100 : (e) => e, h = p === "progress" ? (e) => e * 100 : (e) => e, g = p === "progress" ? u(f.initial ?? 0) : f.initial ?? 0, _ = m(g), v = a(g), y = a(!1), b = p === "progress" ? t.domProgress : t.domHero, x = p === "progress" ? e.domProgress : e.dom, S = p === "progress" ? (f.snapThreshold ?? x) / 100 : f.snapThreshold ?? x, C = o(new l({
 		damping: f.damping ?? b,
 		snapThreshold: S,
 		targetEpsilon: p === "progress" ? (f.targetEpsilon ?? 0) / 100 : f.targetEpsilon ?? 0,
@@ -28,15 +17,15 @@ function d(d, f = {}) {
 	C.value.play((e) => {
 		v.value = h(e), y.value = !C.value.settled, f.onValue?.(v.value);
 	});
-	let w = o(() => a(d), (e) => {
+	let w = c(() => s(d), (e) => {
 		e != null && C.value.setTarget(m(e));
 	}, { immediate: !0 });
 	function T() {
 		w(), C.value.stop(), y.value = !1;
 	}
-	return e() && t(T), {
-		current: n(v),
-		isAnimating: n(y),
+	return n() && r(T), {
+		current: i(v),
+		isAnimating: i(y),
 		snap: () => {
 			C.value.snap(), v.value = h(C.value.current), y.value = !1;
 		},
@@ -48,4 +37,4 @@ function d(d, f = {}) {
 	};
 }
 //#endregion
-export { c as n, l as r, d as t };
+export { d as t };

package/dist/{useConfiguratorState-BlaevW0S.js → useConfiguratorState-BR5vUDL8.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./cn-DJXf4yaB.js";
 import { t } from "./createLucideIcon-Bn9a1b70.js";
 import { t as n } from "./chevron-down-DILQA1t6.js";
-import { t as r } from "./_plugin-vue_export-helper-n-_DRHWS.js";
-import { t as i } from "./Label-C8QMJSsf.js";
+import { t as r } from "./_plugin-vue_export-helper-Dq1MygBL.js";
+import { t as i } from "./Label-DJty89bp.js";
 import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, inject as p, normalizeClass as m, normalizeStyle as h, openBlock as g, provide as _, reactive as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, toRaw as C, unref as w, useId as T, watch as E, withCtx as D } from "vue";
 var O = t("rotate-ccw", [["path", {
 	d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
@@ -54,7 +54,7 @@ var M = { class: "configurator-stage relative min-h-0 min-w-0 overflow-hidden" }
 	setup(t, { emit: n }) {
 		let r = t;
 		A(o(() => r.density));
-		let i = n, u = o(() => e("configurator glass-floating rounded-card border border-border/60 overflow-hidden", "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)]", "min-h-0", r.class)), d = o(() => {
+		let i = n, u = o(() => e("configurator glass-floating rounded-panel border border-border/60 overflow-hidden", "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)]", "min-h-0", r.class)), d = o(() => {
 			switch (r.scrollMode) {
 				case "always": return "overflow-y-auto scroll-fade-y scrollbar-thin";
 				case "never": return "overflow-visible";
@@ -134,11 +134,11 @@ var M = { class: "configurator-stage relative min-h-0 min-w-0 overflow-hidden" }
 		}
 		let v = o(() => u.value ? "open" : "closed");
 		return (r, a) => (g(), c("div", {
-			class: m(w(e)("configurator-layer border-b border-border/40 last:border-b-0", i.class)),
+			class: m(w(e)("configurator-layer rounded-panel border-b border-border/40 last:border-b-0", i.class)),
 			"data-state": v.value
 		}, [l("button", {
 			type: "button",
-			class: m(w(e)("configurator-layer-trigger", "group flex w-full items-center justify-between gap-2 px-3 py-2", "text-left transition-colors hover:bg-foreground/5 focus-ring")),
+			class: m(w(e)("configurator-layer-trigger", "rounded-panel", "group flex w-full items-center justify-between gap-2 px-3 py-2", "text-left transition-colors hover:bg-foreground/5 focus-ring")),
 			"aria-expanded": u.value,
 			"aria-controls": p.value,
 			"data-state": v.value,

package/dist/{useBreakpoint-BHlX-MhR.js → useIdleReady-Cmkhm03v.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./useGlobalDark-PMiP5Jku.js";
+import { t as e } from "./useGlobalDark-B0WvLJE3.js";
 import { getCurrentScope as t, onMounted as n, onScopeDispose as r, readonly as i, ref as a, toValue as o, watch as s } from "vue";
 //#region src/composables/dom/useTokenColor.ts
 function c(t, r = {}) {
@@ -131,4 +131,32 @@ function m(e) {
 	};
 }
 //#endregion
-export { c as a, f as i, p as n, d as r, m as t };
+//#region src/composables/dom/useIdleReady.ts
+function h(e = {}) {
+	let n = e.timeout ?? 2e3, i = a(!1), o = null, s = null, c = !1;
+	function l() {
+		c || i.value || (i.value = !0, e.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: n }) : s = setTimeout(l, 0);
+		}
+	}
+	d();
+	function f() {
+		c || (c = !0, u());
+	}
+	return t() && r(f), {
+		ready: i,
+		stop: f
+	};
+}
+//#endregion
+export { f as a, d as i, m as n, c as o, p as r, h as t };

package/dist/{useTouchGate-BhhEMlwJ.js → useTouchGate-D9Zvrzyc.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./useTimer-lp5NlH4w.js";
+import { t as e } from "./useTimer-NAaj9zNq.js";
 import { getCurrentScope as t, onScopeDispose as n, ref as r } from "vue";
 //#region src/composables/dom/useTouchGate.ts
 var i = /* @__PURE__ */ new Set(), a = !1;

package/dist/useUserInvalidAria-DVu1eTXG.js

@@ -0,0 +1,29 @@
+//#region src/composables/dom/useUserInvalidAria.ts
+function e() {
+	return typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("selector(:user-invalid)");
+}
+function t(t = {}) {
+	let n = t.fallbackClasses ?? !e();
+	return { bind: (e) => {
+		let t = /* @__PURE__ */ new WeakSet(), r = (e) => {
+			let t = e;
+			if (!t?.checkValidity) return;
+			let r = t.checkValidity();
+			t.setAttribute("aria-invalid", r ? "false" : "true"), n && (t.classList.toggle("user-invalid-fallback", !r), t.classList.toggle("user-valid-fallback", r));
+		}, i = (e) => {
+			let n = e.target;
+			n?.checkValidity && (t.add(n), r(n));
+		}, a = (e) => {
+			let n = e.target;
+			!n?.checkValidity || !t.has(n) || n.checkValidity() && r(n);
+		}, o = () => {
+			let n = e.querySelectorAll("input, textarea, select");
+			for (let e of n) e.checkValidity && (t.add(e), r(e));
+		};
+		return e.addEventListener("blur", i, !0), e.addEventListener("input", a, !0), e.addEventListener("submit", o, !0), () => {
+			e.removeEventListener("blur", i, !0), e.removeEventListener("input", a, !0), e.removeEventListener("submit", o, !0);
+		};
+	} };
+}
+//#endregion
+export { t };

package/dist/useViewTransition-DYIK6Gzb.js

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

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export { cn } from "./cn";
+export { moveBeforeSafe, supportsMoveBefore } from "./moveBefore";

package/dist/utils/moveBefore.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Move `node` into `parent` immediately before `ref` (or to the end when `ref`
+ * is `null`), preserving the node's live state when `Element.moveBefore` is
+ * supported, and falling back to `insertBefore` otherwise.
+ *
+ * @param parent the destination parent element.
+ * @param node   the node to move (may currently live elsewhere in the tree).
+ * @param ref    the child to insert before, or `null` to append.
+ */
+export declare function moveBeforeSafe(parent: Element, node: Node, ref: Node | null): void;
+/**
+ * True when `Element.moveBefore` is available — the feature-detected predicate
+ * for consumers that want to branch their own re-parent logic.
+ */
+export declare function supportsMoveBefore(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "2.1.0",
+    "version": "3.1.0",
     "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "type": "module",
@@ -130,6 +130,9 @@
             "motion": [
                 "dist/motion.d.ts"
             ],
+            "motion-core": [
+                "dist/motion-core.d.ts"
+            ],
             "button": [
                 "dist/button.d.ts"
             ],
@@ -198,6 +201,12 @@
             ],
             "command": [
                 "dist/command.d.ts"
+            ],
+            "number-field": [
+                "dist/number-field.d.ts"
+            ],
+            "switch": [
+                "dist/switch.d.ts"
             ]
         }
     },
@@ -378,6 +387,10 @@
             "types": "./dist/motion.d.ts",
             "import": "./dist/motion.js"
         },
+        "./motion-core": {
+            "types": "./dist/motion-core.d.ts",
+            "import": "./dist/motion-core.js"
+        },
         "./button": {
             "types": "./dist/button.d.ts",
             "import": "./dist/button.js"
@@ -469,6 +482,14 @@
         "./command": {
             "types": "./dist/command.d.ts",
             "import": "./dist/command.js"
+        },
+        "./number-field": {
+            "types": "./dist/number-field.d.ts",
+            "import": "./dist/number-field.js"
+        },
+        "./switch": {
+            "types": "./dist/switch.d.ts",
+            "import": "./dist/switch.js"
         }
     },
     "files": [
@@ -478,9 +499,9 @@
     ],
     "scripts": {
         "dev": "vite",
-        "build": "NODE_OPTIONS=--max-old-space-size=8192 vite build && npm run emit-types",
-        "build:watch": "NODE_OPTIONS=--max-old-space-size=8192 vite build --watch",
-        "prepare": "test -f dist/glass-ui.js || npm run build",
+        "build": "vite build && npm run emit-types",
+        "build:watch": "vite build --watch",
+        "prepare": "test -f dist/glass-ui.js -a -f dist/index.d.ts || npm run build",
         "typecheck": "vue-tsc --noEmit",
         "test": "vitest run",
         "verify-export-types": "node scripts/verify-export-types.mjs",
@@ -511,7 +532,7 @@
     },
     "peerDependencies": {
         "@lucide/vue": "^1.16.0",
-        "@mkbabb/keyframes.js": "^2.0.0",
+        "@mkbabb/keyframes.js": "^2.2.0",
         "@vueuse/core": "^14.0",
         "class-variance-authority": "^0.7",
         "clsx": "^2.0",
@@ -527,7 +548,7 @@
     },
     "devDependencies": {
         "@lucide/vue": "^1.16.0",
-        "@mkbabb/keyframes.js": "^2.1.1",
+        "@mkbabb/keyframes.js": "^2.2.0",
         "@mkbabb/value.js": "^0.10.0",
         "@tailwindcss/postcss": "^4.3.0",
         "@tailwindcss/vite": "^4.3.0",

package/src/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/src/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);
     }
 }