@mkbabb/glass-ui 3.13.0 → 4.0.1

package/dist/easing.js

@@ -0,0 +1,463 @@
+import { f as e, x as t } from "./vendor-CKmzio-i.js";
+import { a as n, i as r, o as i, r as a, s as o } from "./SelectScrollDownButton-CrA8F0iV.js";
+import { n as s, t as c } from "./ConfiguratorRow-BR4l-ixA.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, isRef as v, mergeModels as y, onUnmounted as ee, openBlock as b, ref as x, renderList as S, renderSlot as te, toDisplayString as C, unref as w, useModel as T, useTemplateRef as ne, vModelText as re, watch as E, withCtx as D, withDirectives as ie } from "vue";
+import { CSSCubicBezier as O, bezierPresets as k, jumpTerms as A, steppedEase as j } from "@mkbabb/value.js";
+//#region src/components/custom/easing/constants.ts
+var M = "custom", N = "ease-out-back", P = (e) => 1 - e, F = .1, I = .6, ae = .1, oe = .15, L = 1200, se = 1400, R = Object.keys(k);
+function z(e = {}) {
+	let t = x(e.initialMode ?? "bezier"), n = x(e.initialPreset ?? "ease-out-back"), r = x([...k[n.value in k ? n.value : N]]);
+	function i(e) {
+		n.value = e;
+		let t = k[e];
+		t && (r.value = [...t]);
+	}
+	function a(e, t, i) {
+		let a = Math.max(0, Math.min(1, t)), o = Math.max(-I, Math.min(1 + I, i)), s = [...r.value];
+		s[e * 2] = +a.toFixed(3), s[e * 2 + 1] = +o.toFixed(3), r.value = s, n.value = M;
+	}
+	let o = x(e.initialSteps ?? 4), s = x(e.initialTerm ?? "end"), c = u(() => {
+		if (t.value === "steps") return j(o.value, s.value) ?? ((e) => e);
+		let [e, n, i, a] = r.value;
+		return O(e, n, i, a);
+	}), l = u(() => {
+		if (t.value === "steps") return `steps(${o.value}, ${s.value})`;
+		let [e, n, i, a] = r.value.map((e) => +e.toFixed(3));
+		return `cubic-bezier(${e}, ${n}, ${i}, ${a})`;
+	}), d = u(() => ({
+		mode: t.value,
+		css: l.value,
+		fn: c.value,
+		points: [...r.value],
+		steps: o.value,
+		term: s.value
+	})), f = u(() => {
+		let [e, t, n, i] = r.value;
+		return [{
+			x: e,
+			y: P(t)
+		}, {
+			x: n,
+			y: P(i)
+		}];
+	}), p = u(() => {
+		let [e, t] = f.value;
+		return `M 0 1 C ${e.x} ${e.y}, ${t.x} ${t.y}, 1 0`;
+	}), m = u(() => {
+		let e = c.value, t = "";
+		for (let n = 0; n <= 240; n++) {
+			let r = n / 240, i = P(e(r));
+			t += n === 0 ? `M ${r} ${i}` : ` L ${r} ${i}`;
+		}
+		return t;
+	}), h = u(() => {
+		let e = [
+			0,
+			1,
+			f.value[0].y,
+			f.value[1].y
+		];
+		for (let t = 0; t <= 16; t++) e.push(P(c.value(t / 16)));
+		let t = Math.max(Math.min(...e), -I) - F;
+		return {
+			minY: t,
+			height: Math.min(Math.max(...e), 1 + I) + F - t
+		};
+	}), g = x(0), _ = 0;
+	function v() {
+		_ && cancelAnimationFrame(_), _ = 0;
+	}
+	function y() {
+		v();
+		let e = performance.now(), t = (n) => {
+			let r = Math.min(1, (n - e) / L);
+			g.value = r, _ = r < 1 ? requestAnimationFrame(t) : 0;
+		};
+		_ = requestAnimationFrame(t);
+	}
+	return {
+		mode: t,
+		preset: n,
+		points: r,
+		presetNames: R,
+		selectPreset: i,
+		setHandle: a,
+		steps: o,
+		term: s,
+		terms: A,
+		easingFn: c,
+		readout: l,
+		value: d,
+		handlesSvg: f,
+		bezierPathD: p,
+		stepPathD: m,
+		viewBox: h,
+		progress: g,
+		playTravel: y,
+		stopTravel: v
+	};
+}
+//#endregion
+//#region src/components/custom/easing/EasingPicker.vue?vue&type=script&setup=true&lang.ts
+var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden rounded-card p-3" }, ue = ["viewBox", "aria-label"], de = ["x1", "x2"], B = ["y1", "y2"], V = ["x2", "y2"], H = ["x2", "y2"], fe = ["d"], pe = ["d"], me = ["cx", "cy"], he = ["cx", "cy"], ge = ["cx", "cy"], _e = { class: "flex flex-col gap-4" }, ve = {
+	key: 0,
+	class: "flex flex-col gap-2"
+}, ye = { class: "flex flex-col gap-2" }, be = { class: "text-mono-caption text-muted-foreground" }, xe = ["min", "max"], Se = { class: "flex flex-col gap-2" }, U = {
+	key: 2,
+	class: "glass-card flex items-center gap-2 rounded-card px-3 py-2"
+}, Ce = ["title"], we = ["aria-label"], W = /* @__PURE__ */ _({
+	__name: "EasingPicker",
+	props: /* @__PURE__ */ y({
+		mode: { default: "bezier" },
+		preset: { default: void 0 },
+		steps: { default: void 0 },
+		term: { default: void 0 },
+		readout: {
+			type: Boolean,
+			default: !0
+		},
+		playback: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Easing curve" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let c = s, _ = T(s, "modelValue"), { mode: y, preset: O, points: k, presetNames: A, selectPreset: j, setHandle: M, steps: N, term: F, terms: I, easingFn: L, readout: R, value: W, handlesSvg: G, bezierPathD: Te, stepPathD: Ee, viewBox: K, progress: q, playTravel: J, stopTravel: De } = z({
+			initialMode: c.mode,
+			initialPreset: c.preset,
+			initialSteps: c.steps,
+			initialTerm: c.term
+		});
+		E(() => c.mode, (e) => {
+			y.value = e;
+		}), E(W, (e) => _.value = e, { immediate: !0 }), ee(De);
+		let Y = ne("svgEl"), X = x(null);
+		function Z(e) {
+			let t = Y.value;
+			if (!t) return {
+				x: 0,
+				y: 0
+			};
+			let n = t.getScreenCTM();
+			if (!n) return {
+				x: 0,
+				y: 0
+			};
+			let r = n.inverse();
+			return {
+				x: r.a * e.clientX + r.c * e.clientY + r.e,
+				y: P(r.b * e.clientX + r.d * e.clientY + r.f)
+			};
+		}
+		function Oe(e) {
+			if (y.value !== "bezier") return;
+			let { x: t, y: n } = Z(e), r = e.pointerType === "touch" ? oe : ae, i = [{
+				x: k.value[0],
+				y: k.value[1]
+			}, {
+				x: k.value[2],
+				y: k.value[3]
+			}], a = null, o = Infinity;
+			for (let e = 0; e < 2; e++) {
+				let s = Math.hypot(i[e].x - t, i[e].y - n);
+				s < r && s < o && (o = s, a = e);
+			}
+			a !== null && (e.preventDefault(), X.value = a, e.currentTarget.setPointerCapture(e.pointerId));
+		}
+		function ke(e) {
+			if (X.value === null) return;
+			let { x: t, y: n } = Z(e);
+			M(X.value, t, n);
+		}
+		function Q() {
+			X.value = null;
+		}
+		let $ = x(!1);
+		async function Ae() {
+			try {
+				await navigator.clipboard.writeText(R.value), $.value = !0, setTimeout(() => $.value = !1, se);
+			} catch {}
+		}
+		let je = u(() => y.value === "bezier" ? `0 ${K.value.minY} 1 ${K.value.height}` : "-0.05 -0.1 1.1 1.2");
+		return (c, u) => (b(), p("div", {
+			class: "grid gap-4 lg:grid-cols-[1fr_18rem]",
+			"data-mode": w(y),
+			"data-testid": "easing-picker",
+			style: { "--easing-curve-accent": "var(--motion-accent, var(--viz-legendre))" }
+		}, [m("div", le, [(b(), p("svg", {
+			ref_key: "svgEl",
+			ref: Y,
+			class: "block w-full touch-none select-none",
+			viewBox: je.value,
+			preserveAspectRatio: "xMidYMid meet",
+			style: {
+				"aspect-ratio": "1",
+				"block-size": "clamp(200px, 38cqi, 320px)",
+				"margin-inline": "auto"
+			},
+			"aria-label": s.label,
+			role: "img",
+			onPointerdown: Oe,
+			onPointermove: ke,
+			onPointerup: Q,
+			onPointercancel: Q
+		}, [
+			u[4] ||= m("rect", {
+				x: "0",
+				y: "0",
+				width: "1",
+				height: "1",
+				fill: "none",
+				class: "stroke-border",
+				"stroke-width": "0.012"
+			}, null, -1),
+			u[5] ||= m("line", {
+				x1: "0",
+				y1: "1",
+				x2: "1",
+				y2: "0",
+				class: "stroke-muted-foreground/30",
+				"stroke-width": "0.006",
+				"stroke-dasharray": "0.02 0.015"
+			}, null, -1),
+			(b(), p(l, null, S([
+				.25,
+				.5,
+				.75
+			], (e) => m("line", {
+				key: "gx" + e,
+				x1: e,
+				y1: "0",
+				x2: e,
+				y2: "1",
+				class: "stroke-border/40",
+				"stroke-width": "0.006"
+			}, null, 8, de)), 64)),
+			(b(), p(l, null, S([
+				.25,
+				.5,
+				.75
+			], (e) => m("line", {
+				key: "gy" + e,
+				x1: "0",
+				y1: e,
+				x2: "1",
+				y2: e,
+				class: "stroke-border/40",
+				"stroke-width": "0.006"
+			}, null, 8, B)), 64)),
+			u[6] ||= m("text", {
+				x: "0.05",
+				y: "0.95",
+				class: "fill-muted-foreground/60",
+				style: {
+					"font-size": "0.05px",
+					"font-family": "var(--font-mono)"
+				},
+				"text-anchor": "start"
+			}, "0", -1),
+			u[7] ||= m("text", {
+				x: "0.95",
+				y: "0.12",
+				class: "fill-muted-foreground/60",
+				style: {
+					"font-size": "0.05px",
+					"font-family": "var(--font-mono)"
+				},
+				"text-anchor": "end"
+			}, "1", -1),
+			w(y) === "bezier" ? (b(), p(l, { key: 0 }, [
+				m("line", {
+					x1: 0,
+					y1: 1,
+					x2: w(G)[0].x,
+					y2: w(G)[0].y,
+					class: "stroke-muted-foreground/50",
+					"stroke-width": "0.02",
+					"stroke-dasharray": "0.03 0.02"
+				}, null, 8, V),
+				m("line", {
+					x1: 1,
+					y1: 0,
+					x2: w(G)[1].x,
+					y2: w(G)[1].y,
+					class: "stroke-muted-foreground/50",
+					"stroke-width": "0.02",
+					"stroke-dasharray": "0.03 0.02"
+				}, null, 8, H),
+				m("path", {
+					d: w(Te),
+					fill: "none",
+					class: "stroke-(--easing-curve-accent)",
+					"stroke-width": "0.035",
+					"stroke-linecap": "round"
+				}, null, 8, fe)
+			], 64)) : (b(), p("path", {
+				key: 1,
+				d: w(Ee),
+				fill: "none",
+				class: "stroke-(--easing-curve-accent)",
+				"stroke-width": "0.025",
+				"stroke-linejoin": "miter",
+				"stroke-linecap": "butt"
+			}, null, 8, pe)),
+			u[8] ||= m("circle", {
+				cx: "0",
+				cy: "1",
+				r: "0.018",
+				class: "fill-muted-foreground/50"
+			}, null, -1),
+			u[9] ||= m("circle", {
+				cx: "1",
+				cy: "0",
+				r: "0.018",
+				class: "fill-muted-foreground/50"
+			}, null, -1),
+			w(y) === "bezier" ? (b(), p(l, { key: 2 }, [m("circle", {
+				cx: w(G)[0].x,
+				cy: w(G)[0].y,
+				r: "0.04",
+				class: "fill-foreground stroke-background",
+				"stroke-width": "0.02",
+				style: { cursor: "move" }
+			}, null, 8, me), m("circle", {
+				cx: w(G)[1].x,
+				cy: w(G)[1].y,
+				r: "0.04",
+				class: "fill-foreground stroke-background",
+				"stroke-width": "0.02",
+				style: { cursor: "move" }
+			}, null, 8, he)], 64)) : f("", !0),
+			s.playback ? (b(), p("circle", {
+				key: 3,
+				cx: w(q),
+				cy: 1 - w(L)(w(q)),
+				r: "0.03",
+				class: "fill-(--easing-curve-accent)"
+			}, null, 8, ge)) : f("", !0)
+		], 40, ue))]), m("div", _e, [
+			w(y) === "bezier" ? (b(), p("div", ve, [u[10] ||= m("span", { class: "text-mono-caption text-muted-foreground" }, "Preset", -1), g(w(o), {
+				"model-value": w(O),
+				"onUpdate:modelValue": u[0] ||= (e) => w(j)(String(e))
+			}, {
+				default: D(() => [g(w(n), null, {
+					default: D(() => [g(w(i), { placeholder: "Pick a curve" })]),
+					_: 1
+				}), g(w(r), null, {
+					default: D(() => [(b(!0), p(l, null, S(w(A), (e) => (b(), d(w(a), {
+						key: e,
+						value: e
+					}, {
+						default: D(() => [h(C(e), 1)]),
+						_: 2
+					}, 1032, ["value"]))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value"])])) : (b(), p(l, { key: 1 }, [m("div", ye, [m("span", be, "Steps (n) — " + C(w(N)), 1), ie(m("input", {
+				"onUpdate:modelValue": u[1] ||= (e) => v(N) ? N.value = e : null,
+				type: "range",
+				min: w(1),
+				max: w(12),
+				step: "1",
+				class: "w-full accent-(--easing-curve-accent)",
+				"aria-label": "Step count"
+			}, null, 8, xe), [[
+				re,
+				w(N),
+				void 0,
+				{ number: !0 }
+			]])]), m("div", Se, [u[11] ||= m("span", { class: "text-mono-caption text-muted-foreground" }, "Jump term", -1), g(w(o), {
+				"model-value": w(F),
+				"onUpdate:modelValue": u[2] ||= (e) => F.value = String(e)
+			}, {
+				default: D(() => [g(w(n), null, {
+					default: D(() => [g(w(i), { placeholder: "Pick a jump term" })]),
+					_: 1
+				}), g(w(r), null, {
+					default: D(() => [(b(!0), p(l, null, S(w(I), (e) => (b(), d(w(a), {
+						key: e,
+						value: e
+					}, {
+						default: D(() => [h(C(e), 1)]),
+						_: 2
+					}, 1032, ["value"]))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value"])])], 64)),
+			s.readout ? (b(), p("div", U, [m("code", {
+				class: "min-w-0 flex-1 truncate text-xs text-foreground",
+				title: w(R)
+			}, C(w(R)), 9, Ce), m("button", {
+				type: "button",
+				class: "shrink-0 rounded-pill p-1.5 text-muted-foreground transition-colors hover:bg-(--surface-tint-8) hover:text-foreground",
+				"aria-label": $.value ? "Copied" : "Copy curve literal",
+				onClick: Ae
+			}, [$.value ? (b(), d(w(t), {
+				key: 0,
+				class: "size-4 text-(--easing-curve-accent)"
+			})) : (b(), d(w(e), {
+				key: 1,
+				class: "size-4"
+			}))], 8, we)])) : f("", !0),
+			s.playback ? (b(), p("button", {
+				key: 3,
+				type: "button",
+				class: "btn-pill glass-btn rounded-pill px-3 py-2 text-sm text-foreground",
+				onClick: u[3] ||= (...e) => w(J) && w(J)(...e)
+			}, C(w(y) === "steps" ? "Climb the staircase" : "Trace the curve"), 1)) : f("", !0),
+			te(c.$slots, "footer", { value: w(W) })
+		])], 8, ce));
+	}
+}), G = /* @__PURE__ */ _({
+	__name: "EasingConfigurator",
+	props: /* @__PURE__ */ y({
+		label: { default: "Easing" },
+		name: { default: void 0 },
+		mode: { default: "bezier" },
+		preset: { default: void 0 },
+		steps: { default: void 0 },
+		term: { default: void 0 }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = T(e, "modelValue");
+		return (n, r) => (b(), d(w(s), {
+			label: e.label,
+			sub: e.name
+		}, {
+			default: D(() => [g(w(c), {
+				label: "Curve",
+				name: t.value?.css
+			}, {
+				default: D(() => [g(W, {
+					modelValue: t.value,
+					"onUpdate:modelValue": r[0] ||= (e) => t.value = e,
+					mode: e.mode,
+					preset: e.preset,
+					steps: e.steps,
+					term: e.term
+				}, null, 8, [
+					"modelValue",
+					"mode",
+					"preset",
+					"steps",
+					"term"
+				])]),
+				_: 1
+			}, 8, ["name"])]),
+			_: 1
+		}, 8, ["label", "sub"]));
+	}
+});
+//#endregion
+export { G as EasingConfigurator, W as EasingPicker, z as useEasingPicker };

package/dist/expandable-container.js

@@ -1,26 +1,26 @@
-import { n as e, t } from "./minimize-2-BV31Ob_h.js";
-import { i as n } from "./useKeyboardShortcuts-Be3w_Rwk.js";
-import { Fragment as r, Teleport as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeClass as p, onMounted as m, onUnmounted as h, openBlock as g, renderSlot as _, unref as v, useModel as y, watch as b } from "vue";
+import { t as e } from "./cn-DJXf4yaB.js";
+import { c as t, l as n } from "./vendor-CKmzio-i.js";
+import { t as r } from "./useSurfaceAxis-g0NloYEF.js";
+import { i } from "./useKeyboardShortcuts-BXWXOZ-9.js";
+import { Fragment as a, Teleport as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, normalizeClass as g, onMounted as _, onUnmounted as v, openBlock as y, renderSlot as b, unref as x, useModel as S, watch as C } from "vue";
 //#region src/components/custom/expandable-container/ExpandableContainer.vue?vue&type=script&setup=true&lang.ts
-var x = ["aria-label"], S = {
-	key: 0,
-	class: "fixed inset-0 z-modal flex flex-col bg-background"
-}, C = ["aria-label"], w = { class: "h-full w-full" }, T = 0, E = null;
-function D() {
-	return typeof document > "u" ? !1 : (T === 0 && (E = document.body.style.overflow, document.body.style.overflow = "hidden"), T += 1, !0);
+var w = ["aria-label"], T = ["data-surface"], E = ["aria-label"], D = { class: "h-full w-full" }, O = 0, k = null;
+function A() {
+	return typeof document > "u" ? !1 : (O === 0 && (k = document.body.style.overflow, document.body.style.overflow = "hidden"), O += 1, !0);
 }
-function O() {
-	typeof document > "u" || T === 0 || (--T, T === 0 && (document.body.style.overflow = E ?? "", E = null));
+function j() {
+	typeof document > "u" || O === 0 || (--O, O === 0 && (document.body.style.overflow = k ?? "", k = null));
 }
 //#endregion
 //#region src/components/custom/expandable-container/ExpandableContainer.vue
-var k = /* @__PURE__ */ u({
+var M = /* @__PURE__ */ p({
 	inheritAttrs: !1,
 	__name: "ExpandableContainer",
-	props: /* @__PURE__ */ d({
+	props: /* @__PURE__ */ m({
 		buttonPosition: { default: "right" },
 		expandLabel: { default: "Fullscreen" },
-		collapseLabel: { default: "Exit fullscreen" }
+		collapseLabel: { default: "Exit fullscreen" },
+		surface: { default: "glass" }
 	}, {
 		open: {
 			type: Boolean,
@@ -29,42 +29,49 @@ var k = /* @__PURE__ */ u({
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(u) {
-		let d = y(u, "open"), T = !1;
-		function E(e) {
-			if (e && !T) {
-				T = D();
+	setup(p) {
+		let m = p, O = s(() => r(m.surface).replace(/^glass-\w+\s*/, "")), k = S(p, "open"), M = !1;
+		function N(e) {
+			if (e && !M) {
+				M = A();
 				return;
 			}
-			!e && T && (O(), T = !1);
+			!e && M && (j(), M = !1);
 		}
-		b(d, E, { immediate: !0 });
-		let k = null;
-		return m(() => {
-			k = n("Escape", () => {
-				d.value &&= !1;
+		C(k, N, { immediate: !0 });
+		let P = null;
+		return _(() => {
+			P = i("Escape", () => {
+				k.value &&= !1;
 			}, {
 				label: "Exit fullscreen",
 				group: "UI",
 				allowInInput: !0
 			});
-		}), h(() => {
-			k?.(), E(!1);
-		}), (n, m) => (g(), s(r, null, [d.value ? o("", !0) : (g(), s("div", f({
+		}), v(() => {
+			P?.(), N(!1);
+		}), (r, i) => (y(), u(a, null, [k.value ? l("", !0) : (y(), u("div", h({
 			key: 0,
 			class: "relative"
-		}, n.$attrs), [c("button", {
-			class: p(["expandable-container__trigger absolute z-10 rounded-button bg-card/70 [backdrop-filter:var(--glass-blur-wash)] p-1.5 text-muted-foreground hover:text-foreground transition-colors shadow-sm border border-border/40", u.buttonPosition === "left" ? "left-2 top-2" : "right-2 top-2"]),
+		}, r.$attrs), [d("button", {
+			class: g(["expandable-container__trigger absolute z-10 rounded-button bg-card/70 [backdrop-filter:var(--glass-blur-wash)] p-1.5 text-muted-foreground hover:text-foreground transition-colors shadow-sm border border-border/40", p.buttonPosition === "left" ? "left-2 top-2" : "right-2 top-2"]),
 			title: "Fullscreen",
-			"aria-label": u.expandLabel,
-			onClick: m[0] ||= (e) => d.value = !0
-		}, [l(v(e), { class: "h-4 w-4" })], 10, x), _(n.$slots, "default", { fullscreen: !1 })], 16)), (g(), a(i, { to: "body" }, [d.value ? (g(), s("div", S, [c("button", {
-			class: p(["expandable-container__trigger absolute z-10 rounded-button bg-card/70 [backdrop-filter:var(--glass-blur-wash)] p-2 text-muted-foreground hover:text-foreground transition-colors shadow-sm border border-border/40", u.buttonPosition === "left" ? "left-3 top-3" : "right-3 top-3"]),
+			"aria-label": p.expandLabel,
+			onClick: i[0] ||= (e) => k.value = !0
+		}, [f(x(n), { class: "h-4 w-4" })], 10, w), b(r.$slots, "default", { fullscreen: !1 })], 16)), (y(), c(o, {
+			to: "body",
+			disabled: !k.value
+		}, [k.value ? (y(), u("div", {
+			key: 0,
+			"data-surface": p.surface,
+			class: g(x(e)("fixed inset-0 z-modal flex flex-col glass-overlay", O.value))
+		}, [d("button", {
+			class: g(["expandable-container__trigger absolute z-10 rounded-button bg-card/70 [backdrop-filter:var(--glass-blur-wash)] p-2 text-muted-foreground hover:text-foreground transition-colors shadow-sm border border-border/40", p.buttonPosition === "left" ? "left-3 top-3" : "right-3 top-3"]),
 			title: "Exit fullscreen",
-			"aria-label": u.collapseLabel,
-			onClick: m[1] ||= (e) => d.value = !1
-		}, [l(v(t), { class: "h-4 w-4" })], 10, C), c("div", w, [_(n.$slots, "default", { fullscreen: !0 })])])) : o("", !0)]))], 64));
+			"aria-label": p.collapseLabel,
+			onClick: i[1] ||= (e) => k.value = !1
+		}, [f(x(t), { class: "h-4 w-4" })], 10, E), d("div", D, [b(r.$slots, "default", { fullscreen: !0 })])], 10, T)) : l("", !0)], 8, ["disabled"]))], 64));
 	}
 });
 //#endregion
-export { k as ExpandableContainer };
+export { M as ExpandableContainer };

package/dist/fading-scroll.d.ts

@@ -0,0 +1 @@
+export * from "./components/custom/fading-scroll";

package/dist/fading-scroll.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "./FadingScroll-DI6hQhT9.js";
+export { t as FadingScroll, e as useFadingScroll };

package/dist/focus-scope.d.ts

@@ -0,0 +1 @@
+export * from "./components/ui/focus-scope";

package/dist/focus-scope.js

@@ -0,0 +1,23 @@
+import { computed as e, createBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, unref as o, withCtx as s } from "vue";
+import { FocusScope as c, useForwardPropsEmits as l } from "reka-ui";
+//#endregion
+//#region src/components/ui/focus-scope/FocusScope.vue
+var u = /* @__PURE__ */ n({
+	__name: "FocusScope",
+	props: {
+		loop: { type: Boolean },
+		trapped: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	emits: ["mountAutoFocus", "unmountAutoFocus"],
+	setup(n, { emit: u }) {
+		let d = n, f = u, p = l(e(() => d), f);
+		return (e, n) => (i(), t(o(c), r({ "data-slot": "focus-scope" }, o(p)), {
+			default: s(() => [a(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+});
+//#endregion
+export { u as FocusScope };

package/dist/forms.js

@@ -1,8 +1,8 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./search-BSGrf2Sk.js";
-import { t as n } from "./menuItemVariants-DPiEarb0.js";
-import { t as r } from "./useUserInvalidAria-B2h6jAM_.js";
-import { t as i } from "./Input-DWQQIOC4.js";
+import { n as t } from "./vendor-CKmzio-i.js";
+import { t as n } from "./menuItemVariants-D8VNHq22.js";
+import { t as r } from "./useUserInvalidAria-y5namzeE.js";
+import { t as i } from "./Input-h9v5LeXf.js";
 import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, isRef as f, mergeProps as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, vModelText as v, withCtx as y, withDirectives as b } from "vue";
 import { ComboboxAnchor as x, ComboboxCancel as S, ComboboxContent as C, ComboboxEmpty as w, ComboboxGroup as T, ComboboxInput as E, ComboboxItem as D, ComboboxItemIndicator as O, ComboboxLabel as k, ComboboxPortal as A, ComboboxRoot as j, ComboboxSeparator as M, ComboboxTrigger as N, ComboboxViewport as P, useForwardProps as F, useForwardPropsEmits as I } from "reka-ui";
 import { reactiveOmit as L, useVModel as R } from "@vueuse/core";
@@ -44,7 +44,7 @@ var z = ["data-autosize"], B = /* @__PURE__ */ d({
 			...o.value
 		}, {
 			"data-autosize": t.autosize ? "" : void 0,
-			class: _(e)("input-pill rounded-field py-2 text-sm", t.autosize ? "" : "min-h-20", r.class)
+			class: _(e)("input-pill [--control-surface-bg:var(--input-on-glass)] rounded-field py-2 text-sm", t.autosize ? "" : "min-h-20", r.class)
 		}), null, 16, z)), [[v, _(i)]]);
 	}
 }), V = /* @__PURE__ */ d({
@@ -152,7 +152,7 @@ var z = ["data-autosize"], B = /* @__PURE__ */ d({
 	}
 }), G = {
 	"data-slot": "command-input-wrapper",
-	class: "flex h-9 items-center gap-2 border-b px-3"
+	class: "flex h-9 items-center gap-2 border-b px-3 rounded-input has-[[aria-invalid='true']]:border-(--destructive) has-[:user-invalid]:border-(--destructive) has-[[aria-invalid='true']]:shadow-(--invalid-ring) has-[:user-invalid]:shadow-(--invalid-ring)"
 }, K = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "ComboboxInput",
@@ -275,7 +275,7 @@ var z = ["data-autosize"], B = /* @__PURE__ */ d({
 	setup(t, { emit: n }) {
 		let r = t, i = n, a = I(L(r, "class"), i);
 		return (t, n) => (m(), o(_(A), null, {
-			default: y(() => [u(_(C), p({ "data-slot": "combobox-list" }, _(a), { class: _(e)("z-popover w-popover rounded-panel border glass-floating text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden outline-none popover-animate slide-in-from-side", r.class) }), {
+			default: y(() => [u(_(C), p({ "data-slot": "combobox-list" }, _(a), { class: _(e)("z-popover w-popover rounded-panel border glass-floating text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden outline-none glass-reveal", r.class) }), {
 				default: y(() => [h(t.$slots, "default")]),
 				_: 3
 			}, 16, ["class"])]),