@mkbabb/glass-ui 3.7.0 → 3.9.0

package/dist/tabs.js

@@ -1,78 +1,104 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { i as n, n as r, r as i, t as a } from "./TooltipProvider-CD2IXfRv.js";
-import { t as o } from "./UnderlineTabs-D_c1iYo-.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, mergeModels as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onMounted as b, onUnmounted as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, watch as k, withCtx as A } from "vue";
-//#region src/components/custom/tabs/composables/useBouncySlider.ts
-function j(e) {
-	let { containerRef: t, buttonRefs: n, options: r, model: i, multiSelect: a, anchorSupported: o, jsSliderActive: s, activeValues: c } = e, l = C({
+import { t } from "./_plugin-vue_export-helper-ok8pgSl5.js";
+import { a as n, i as r, o as i, r as a, s as o } from "./SelectScrollDownButton-T32cVFeM.js";
+import { i as s, n as c, r as l, t as u } from "./TooltipProvider-CmZzCuaG.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, mergeModels as b, mergeProps as x, nextTick as S, normalizeClass as C, normalizeStyle as w, onBeforeUnmount as T, onMounted as E, onUnmounted as D, openBlock as O, ref as k, renderList as A, renderSlot as j, toDisplayString as M, unref as N, useModel as ee, watch as P, withCtx as F } from "vue";
+//#region src/components/custom/tabs/composables/useTabIndicator.ts
+function te(e) {
+	let { containerRef: t, indicatorRef: n, buttonRefs: r, options: i, model: a, multiSelect: o, anchorSupported: s, jsSliderActive: c, activeValues: l } = e, u = k({
 		width: "0px",
 		transform: "translateX(0px)",
 		opacity: "0"
 	});
-	function u() {
-		if (a.value || o) return;
-		let e = r.value.findIndex((e) => e.value === i.value);
-		if (e < 0 || !n.value[e]) return;
-		let t = n.value[e];
-		l.value = {
+	function d() {
+		if (o.value || s) return;
+		let e = i.value.findIndex((e) => e.value === a.value);
+		if (e < 0 || !r.value[e]) return;
+		let t = r.value[e];
+		u.value = {
 			width: `${t.offsetWidth}px`,
 			transform: `translateX(${t.offsetLeft}px)`,
 			opacity: "1"
 		};
 	}
-	let d = C({});
-	function f() {
-		if (!a.value) return;
+	let f = k({});
+	function p() {
+		if (!o.value) return;
 		let e = {};
-		for (let t of c.value) {
-			let i = r.value.findIndex((e) => e.value === t), a = n.value[i];
+		for (let t of l.value) {
+			let n = i.value.findIndex((e) => e.value === t), a = r.value[n];
 			a && (e[t] = {
 				width: `${a.offsetWidth}px`,
 				transform: `translateX(${a.offsetLeft}px)`,
 				opacity: "1"
 			});
 		}
-		d.value = e;
+		f.value = e;
 	}
-	function p() {
-		a.value ? f() : u();
+	function m() {
+		o.value ? p() : d();
+	}
+	let h = -1, g = null;
+	function _() {
+		return typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	}
+	function v(e) {
+		let i = n.value;
+		if (o.value || !i) {
+			h = e;
+			return;
+		}
+		if (_()) {
+			h = e;
+			return;
+		}
+		let a = r.value[h], s = r.value[e];
+		if (h = e, !a || !s) return;
+		let c = t.value?.offsetWidth || s.offsetParent?.offsetWidth || 1, l = Math.abs(s.offsetLeft - a.offsetLeft), u = c > 0 ? Math.min(l / c, 1) : 0, d = getComputedStyle(i).getPropertyValue("--tab-indicator-max-stretch").trim(), f = 1 + u * ((Number(d) || 1.08) - 1);
+		g && clearTimeout(g), i.style.setProperty("--stretch", String(f)), g = setTimeout(() => {
+			i.style.setProperty("--stretch", "1"), g = null;
+		}, 60);
 	}
-	k(() => i.value, () => {
-		s.value && _(p);
-	}, { deep: !0 }), k(() => r.value, () => {
-		s.value && _(p);
+	P(() => a.value, () => {
+		c.value && S(m);
+	}, { deep: !0 }), P(() => i.value, () => {
+		c.value && S(m);
 	}, { deep: !0 });
-	let m = null;
-	return b(() => {
-		s.value && (_(p), t.value && (m = new ResizeObserver(() => p()), m.observe(t.value)));
-	}), x(() => {
-		m?.disconnect();
+	let y = null;
+	return E(() => {
+		h = i.value.findIndex((e) => l.value.includes(e.value)), c.value && (S(m), t.value && (y = new ResizeObserver(() => m()), y.observe(t.value)));
+	}), D(() => {
+		y?.disconnect(), g && clearTimeout(g);
 	}), {
-		singleSliderStyle: l,
-		multiSliderStyles: d
+		singleSliderStyle: u,
+		multiSliderStyles: f,
+		squishOnTravel: v
 	};
 }
 //#endregion
-//#region src/components/custom/tabs/BouncyToggle.vue?vue&type=script&setup=true&lang.ts
-var M = [
-	"aria-pressed",
+//#region src/components/custom/tabs/SegmentedTabs.vue?vue&type=script&setup=true&lang.ts
+var ne = ["role"], re = [
+	"role",
 	"disabled",
 	"onClick"
-], N = [
-	"aria-pressed",
+], ie = [
+	"role",
 	"disabled",
 	"onClick"
-], P = /* @__PURE__ */ t(/* @__PURE__ */ h({
-	__name: "BouncyToggle",
-	props: /* @__PURE__ */ g({
+], I = /* @__PURE__ */ t(/* @__PURE__ */ y({
+	__name: "SegmentedTabs",
+	props: /* @__PURE__ */ b({
 		options: {},
+		variant: { default: "segmented" },
 		multiSelect: {
 			type: Boolean,
 			default: !1
 		},
-		variant: { default: "default" },
 		overflow: { default: "none" },
+		responsive: {
+			type: [Boolean, Object],
+			default: !1
+		},
 		class: { type: [
 			Boolean,
 			null,
@@ -86,45 +112,52 @@ var M = [
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		function o(e, t) {
+		function y(e, t) {
 			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 		}
-		let h = t, g = O(t, "modelValue"), x = C(null), k = C([]), P = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-anchor", "--x"), F = c(() => h.variant === "pill"), I = c(() => h.overflow === "scroll"), L = c(() => h.overflow === "auto"), R = c(() => {
-			let e = g.value;
-			return h.multiSelect && Array.isArray(e) ? e : e == null ? [] : [e];
-		}), z = (e) => R.value.includes(e), B = c(() => !h.multiSelect && !P), V = c(() => h.multiSelect || !P), { singleSliderStyle: H, multiSliderStyles: U } = j({
-			containerRef: x,
-			buttonRefs: k,
-			options: c(() => h.options),
-			model: g,
-			multiSelect: c(() => h.multiSelect),
-			anchorSupported: P,
-			jsSliderActive: V,
-			activeValues: R
+		let b = t, D = ee(t, "modelValue"), P = k(null), I = k(null), L = k([]), R = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-anchor", "--x"), z = f(() => b.variant === "underline");
+		f(() => b.variant === "pill"), f(() => b.variant === "segmented");
+		let B = f(() => b.overflow === "scroll"), V = f(() => b.overflow === "auto"), H = f(() => b.multiSelect && !z.value), U = f(() => {
+			let e = D.value;
+			return H.value && Array.isArray(e) ? e : e == null ? [] : [e];
+		}), W = (e) => U.value.includes(e), ae = f(() => (H.value || !R) && !z.value), G = f(() => !H.value && !R && !z.value), K = f(() => b.responsive === !1 ? null : b.responsive === !0 ? {} : b.responsive), oe = f(() => K.value?.breakpoint ?? "640px"), q = f(() => K.value?.desktopOptions ?? b.options), J = k(!0), Y = null;
+		function X(e) {
+			J.value = e.matches;
+		}
+		let se = f(() => {
+			if (!K.value) return D.value;
+			let e = q.value;
+			return e.some((e) => e.value === D.value) ? D.value : e[0]?.value ?? D.value;
+		}), Z = f(() => K.value ? q.value : b.options), ce = f(() => K.value?.ariaLabel ?? b.options.find((e) => e.value === D.value)?.label ?? "Select"), le = f(() => !!K.value && !J.value), { singleSliderStyle: ue, multiSliderStyles: de, squishOnTravel: fe } = te({
+			containerRef: P,
+			indicatorRef: I,
+			buttonRefs: L,
+			options: Z,
+			model: f(() => se.value),
+			multiSelect: H,
+			anchorSupported: R,
+			jsSliderActive: ae,
+			activeValues: U
 		});
-		function W(e) {
+		function pe(e) {
 			if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			e.getAnimations().forEach((e) => e.cancel());
-			let t = o("--ease-apple-spring", "cubic-bezier(0.175, 0.885, 0.32, 1.275)"), n = o("--scale-press", "0.95"), r = o("--scale-hover", "1.08");
+			let t = y("--spring-snappy", "ease"), n = y("--scale-press-btn", "0.97");
 			e.animate([
 				{ transform: "scale(1)" },
 				{
 					transform: `scale(${n})`,
-					offset: .25
-				},
-				{
-					transform: `scale(${r})`,
-					offset: .7
+					offset: .4
 				},
 				{ transform: "scale(1)" }
 			], {
-				duration: 200,
+				duration: 220,
 				easing: t
 			});
 		}
-		function G(e) {
-			if (!I.value && !L.value) return;
-			let t = k.value[e];
+		function Q(e) {
+			if (!B.value && !V.value) return;
+			let t = L.value[e];
 			if (!t) return;
 			let n = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 			t.scrollIntoView({
@@ -133,120 +166,118 @@ var M = [
 				behavior: n ? "auto" : "smooth"
 			});
 		}
-		function K(e, t) {
-			if (h.options[t]?.disabled) return;
-			let n = k.value[t];
-			if (n && W(n), h.multiSelect) {
-				let t = [...R.value], n = t.indexOf(e);
-				n > -1 ? t.length > 1 && t.splice(n, 1) : t.push(e), g.value = t;
-			} else g.value = e;
-			G(t);
+		function $(e, t) {
+			if (Z.value[t]?.disabled) return;
+			let n = L.value[t];
+			if (n && pe(n), fe(t), H.value) {
+				let t = [...U.value], n = t.indexOf(e);
+				n > -1 ? t.length > 1 && t.splice(n, 1) : t.push(e), D.value = t;
+			} else D.value = e;
+			Q(t);
+		}
+		function me(e) {
+			typeof e == "string" && (D.value = e);
 		}
-		return b(() => {
-			_(() => {
-				let e = h.options.findIndex((e) => z(e.value));
-				e >= 0 && G(e);
+		return E(() => {
+			K.value && typeof window < "u" && window.matchMedia && (Y = window.matchMedia(`(min-width: ${oe.value})`), J.value = Y.matches, Y.addEventListener("change", X)), S(() => {
+				let e = Z.value.findIndex((e) => W(e.value));
+				e >= 0 && Q(e);
 			});
-		}), (o, c) => (S(), d("div", {
+		}), T(() => {
+			Y?.removeEventListener("change", X), Y = null;
+		}), (f, y) => le.value ? (O(), h("div", {
+			key: 0,
+			class: C(N(e)("segmented-tabs__mobile w-fit", b.class))
+		}, [v(N(o), {
+			"model-value": D.value,
+			"onUpdate:modelValue": me
+		}, {
+			default: F(() => [v(N(n), {
+				"aria-label": ce.value,
+				class: C(N(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", K.value?.triggerClass))
+			}, {
+				default: F(() => [v(N(i))]),
+				_: 1
+			}, 8, ["aria-label", "class"]), v(N(r), null, {
+				default: F(() => [(O(!0), h(d, null, A(t.options, (e) => (O(), p(N(a), {
+					key: e.value,
+					value: e.value
+				}, {
+					default: F(() => [_(M(e.label), 1)]),
+					_: 2
+				}, 1032, ["value"]))), 128))]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["model-value"])], 2)) : (O(), h("div", {
+			key: 1,
 			ref_key: "containerRef",
-			ref: x,
-			class: v(D(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", h.class))
+			ref: P,
+			role: z.value ? "tablist" : "group",
+			class: C(N(e)("segmented-tabs", `segmented-tabs--${t.variant}`, B.value && "segmented-tabs--scroll scroll-fade-mask scrollbar-hidden", V.value && "segmented-tabs--auto scrollbar-hidden", b.class))
 		}, [
-			t.multiSelect ? u("", !0) : (S(), d("div", {
+			!z.value && !H.value ? (O(), h("div", {
 				key: 0,
-				class: v([F.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", B.value ? "bouncy-slider--js" : "bouncy-slider--anchor"]),
-				style: y(B.value ? D(H) : void 0)
-			}, null, 6)),
-			t.multiSelect ? (S(!0), d(s, { key: 1 }, w(R.value, (e) => (S(), d("div", {
-				key: "slider-" + e,
-				class: v([F.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", "bouncy-slider--js"]),
-				style: y(D(U)[e] ?? { opacity: "0" })
-			}, null, 6))), 128)) : u("", !0),
-			(S(!0), d(s, null, w(t.options, (e, t) => (S(), d(s, { key: e.value }, [e.tooltip ? (S(), l(D(a), {
+				ref_key: "indicatorRef",
+				ref: I,
+				class: C(["segmented-indicator", G.value ? "segmented-indicator--js" : "segmented-indicator--anchor"]),
+				style: w(G.value ? N(ue) : void 0)
+			}, null, 6)) : m("", !0),
+			!z.value && H.value ? (O(!0), h(d, { key: 1 }, A(U.value, (e) => (O(), h("div", {
+				key: "indicator-" + e,
+				class: "segmented-indicator segmented-indicator--js",
+				style: w(N(de)[e] ?? { opacity: "0" })
+			}, null, 4))), 128)) : m("", !0),
+			(O(!0), h(d, null, A(Z.value, (e, t) => (O(), h(d, { key: e.value }, [e.tooltip ? (O(), p(N(u), {
 				key: 0,
 				"delay-duration": 200
 			}, {
-				default: A(() => [m(D(n), null, {
-					default: A(() => [m(D(r), { "as-child": "" }, {
-						default: A(() => [f("button", {
+				default: F(() => [v(N(s), null, {
+					default: F(() => [v(N(c), { "as-child": "" }, {
+						default: F(() => [g("button", x({
 							ref_for: !0,
 							ref: (e) => {
-								e && (k.value[t] = e);
+								e && (L.value[t] = e);
 							},
-							class: v([F.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
-							"aria-pressed": z(e.value) ? "true" : "false",
+							class: "segmented-tab",
+							role: z.value ? "tab" : void 0
+						}, { ref_for: !0 }, z.value ? { "aria-selected": W(e.value) ? "true" : "false" } : { "aria-pressed": W(e.value) ? "true" : "false" }, {
 							disabled: e.disabled,
-							onClick: (n) => K(e.value, t)
-						}, [T(o.$slots, "option", {
+							class: e.disabled && "is-disabled",
+							onClick: (n) => $(e.value, t)
+						}), [j(f.$slots, "option", {
 							option: e,
-							active: z(e.value)
-						}, () => [p(E(e.label), 1)], !0)], 10, M)]),
+							active: W(e.value)
+						}, () => [_(M(e.label), 1)], !0)], 16, re)]),
 						_: 2
-					}, 1024), m(D(i), {
+					}, 1024), v(N(l), {
 						side: "bottom",
 						"side-offset": 8
 					}, {
-						default: A(() => [p(E(e.tooltip), 1)]),
+						default: F(() => [_(M(e.tooltip), 1)]),
 						_: 2
 					}, 1024)]),
 					_: 2
 				}, 1024)]),
 				_: 2
-			}, 1024)) : (S(), d("button", {
+			}, 1024)) : (O(), h("button", x({
 				key: 1,
 				ref_for: !0,
 				ref: (e) => {
-					e && (k.value[t] = e);
+					e && (L.value[t] = e);
 				},
-				class: v([F.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
-				"aria-pressed": z(e.value) ? "true" : "false",
+				class: "segmented-tab",
+				role: z.value ? "tab" : void 0
+			}, { ref_for: !0 }, z.value ? { "aria-selected": W(e.value) ? "true" : "false" } : { "aria-pressed": W(e.value) ? "true" : "false" }, {
 				disabled: e.disabled,
-				onClick: (n) => K(e.value, t)
-			}, [T(o.$slots, "option", {
+				class: e.disabled && "is-disabled",
+				onClick: (n) => $(e.value, t)
+			}), [j(f.$slots, "option", {
 				option: e,
-				active: z(e.value)
-			}, () => [p(E(e.label), 1)], !0)], 10, N))], 64))), 128))
-		], 2));
-	}
-}), [["__scopeId", "data-v-45c0ed13"]]), F = /* @__PURE__ */ h({
-	__name: "BouncyTabs",
-	props: /* @__PURE__ */ g({
-		options: {},
-		variant: { default: "default" },
-		overflow: { default: "none" },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	}, {
-		modelValue: { required: !0 },
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(e) {
-		let t = e, n = O(e, "modelValue");
-		function r(e) {
-			n.value = e;
-		}
-		return (i, a) => (S(), l(P, {
-			options: e.options,
-			"model-value": n.value,
-			variant: e.variant,
-			overflow: e.overflow,
-			class: v(t.class),
-			"multi-select": !1,
-			"onUpdate:modelValue": r
-		}, null, 8, [
-			"options",
-			"model-value",
-			"variant",
-			"overflow",
-			"class"
-		]));
+				active: W(e.value)
+			}, () => [_(M(e.label), 1)], !0)], 16, ie))], 64))), 128))
+		], 10, ne));
 	}
-});
+}), [["__scopeId", "data-v-dd84d37c"]]);
 //#endregion
-export { F as BouncyTabs, P as BouncyToggle, o as UnderlineTabs };
+export { I as SegmentedTabs };

package/dist/timeline.js

@@ -1,5 +1,5 @@
-import { t as e } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { t } from "./HoverPopover-DXpOEw1P.js";
+import { t as e } from "./_plugin-vue_export-helper-ok8pgSl5.js";
+import { t } from "./HoverPopover-2LOIW34a.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createSlots as c, createVNode as l, defineComponent as u, guardReactiveProps as d, normalizeClass as f, normalizeProps as p, normalizeStyle as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 //#region src/components/custom/timeline/geometry.ts
 function S(e) {
@@ -197,7 +197,7 @@ var A = ["aria-label"], j = [
 			_: 2
 		}, 1032, ["class", "onUpdate:open"]))], 4))), 128))], 8, A)) : a("", !0);
 	}
-}), [["__scopeId", "data-v-8e53d036"]]), H = [
+}), [["__scopeId", "data-v-54dadfb5"]]), H = [
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-label"

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-BMaeziJJ.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-1rYWrmAm.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-C-AIkBUw.js";
+import { n as e, t } from "./ToggleGroupItem-Cev4pOVK.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-CD2IXfRv.js";
+import { i as e, n as t, r as n, t as r } from "./TooltipProvider-CmZzCuaG.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-gLzyemvl.js";
+import { t as e } from "./_plugin-vue_export-helper-ok8pgSl5.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/{useCanvas2D-C31yfUGY.js → useCanvas2D-ClrQuZtp.js}

@@ -91,5 +91,6 @@ function i(i) {
 		}
 	};
 }
+var a = i;
 //#endregion
-export { i as t };
+export { a as n, i as t };

package/dist/{useConfiguratorState-B24TcgIn.js → useConfiguratorState-DxAqksK6.js}

@@ -1,9 +1,9 @@
 import { t as e } from "./cn-DJXf4yaB.js";
 import { t } from "./createLucideIcon-B6uNAU9G.js";
 import { t as n } from "./chevron-down-BSkTP2aL.js";
-import { t as r } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { t as i } from "./createContext-CvNyBk4o.js";
-import { t as a } from "./Label-DBc7bKzZ.js";
+import { t as r } from "./_plugin-vue_export-helper-ok8pgSl5.js";
+import { t as i } from "./createContext-B44Sah_H.js";
+import { t as a } from "./Label-zRfbQdCn.js";
 import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, normalizeStyle as g, openBlock 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, useModel 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",
@@ -22,7 +22,11 @@ var M = k.use, N = {
 	class: "flex gap-2 overflow-x-auto scroll-fade-mask scrollbar-hidden",
 	role: "tablist",
 	"aria-label": "Presets"
-}, F = ["aria-selected", "onClick"], I = { class: "flex flex-col" }, L = {
+}, F = [
+	"aria-selected",
+	"data-active",
+	"onClick"
+], I = { class: "flex flex-col" }, L = {
 	key: 1,
 	class: "configurator-footer shrink-0 border-t border-border/40 px-3 py-2"
 }, R = /* @__PURE__ */ p({
@@ -67,6 +71,7 @@ var M = k.use, N = {
 			}
 		});
 		return (n, r) => (_(), l("section", {
+			"data-slot": "configurator",
 			class: h(a.value),
 			style: g(d.value)
 		}, [u("div", { class: h(w(e)("configurator-stage relative min-h-0 min-w-0 overflow-hidden", f.value)) }, [x(n.$slots, "stage")], 2), u("aside", { class: h(w(e)("configurator-aside flex min-h-0 min-w-0 flex-col border-t border-border/40 lg:border-t-0", m.value, p.value)) }, [
@@ -77,8 +82,10 @@ var M = k.use, N = {
 				key: n.key,
 				type: "button",
 				role: "tab",
+				"data-slot": "configurator-preset",
 				"aria-selected": n.key === t.activePreset,
-				class: h(w(e)("focus-ring shrink-0 rounded-pill border px-3 py-1 text-xs font-medium transition-colors", n.key === t.activePreset ? "border-foreground/40 bg-foreground text-background" : "border-border/40 bg-card/40 text-foreground hover:bg-card/70")),
+				"data-active": n.key === t.activePreset || void 0,
+				class: h(w(e)("tap-squish focus-ring transition-control shrink-0 rounded-pill border px-3 py-1 text-xs font-medium", n.key === t.activePreset ? "glass-quiet border-border/50 text-foreground" : "border-border/40 bg-card/40 text-foreground hover:bg-card/70")),
 				onClick: (e) => i("select-preset", n.key)
 			}, S(n.label), 11, F))), 128))])])])) : c("", !0),
 			u("div", { class: h(w(e)("configurator-controls flex-1 min-h-0", v.value)) }, [x(n.$slots, "controls", {
@@ -101,7 +108,7 @@ var M = k.use, N = {
 	"aria-hidden",
 	"inert",
 	"data-state"
-], G = { class: "min-h-0 overflow-hidden" }, K = /* @__PURE__ */ p({
+], G = { class: "min-h-0 overflow-hidden" }, K = /* @__PURE__ */ r(/* @__PURE__ */ p({
 	__name: "ConfiguratorLayer",
 	props: /* @__PURE__ */ m({
 		label: {},
@@ -143,17 +150,19 @@ var M = k.use, N = {
 		}
 		let p = s(() => i.value ? "open" : "closed");
 		return (a, s) => (_(), l("div", {
+			"data-slot": "configurator-layer",
 			class: h(w(e)("configurator-layer border-b border-border/40 last:border-b-0", r.class)),
 			"data-state": p.value
 		}, [u("button", {
 			type: "button",
-			class: h(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")),
+			"data-slot": "configurator-layer-trigger",
+			class: h(w(e)("configurator-layer-trigger", "group flex w-full items-center justify-between gap-2 px-3 py-2", "tap-squish transition-control text-left hover:bg-foreground/5 focus-ring")),
 			"aria-expanded": i.value,
 			"aria-controls": o.value,
 			"data-state": p.value,
 			onClick: d
 		}, [u("div", V, [u("span", H, S(t.label), 1), t.sub ? (_(), l("span", U, S(t.sub), 1)) : c("", !0)]), f(w(n), {
-			class: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180",
+			class: "configurator-layer-chevron h-4 w-4 shrink-0 text-muted-foreground group-data-[state=open]:rotate-180",
 			"aria-hidden": "true"
 		})], 10, B), u("div", {
 			id: o.value,
@@ -161,11 +170,11 @@ var M = k.use, N = {
 			"aria-hidden": !i.value,
 			inert: !i.value || void 0,
 			"data-state": p.value,
-			class: "configurator-layer-region grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+			class: "configurator-layer-region grid motion-reduce:transition-none",
 			style: g({ gridTemplateRows: i.value ? "1fr" : "0fr" })
-		}, [u("div", G, [u("div", { class: h(w(e)("configurator-layer-body px-3 py-2 space-y-2", r.dividers && "[&>*+*]:border-t [&>*+*]:border-border/30 [&>*+*]:pt-2", r.bodyClass)) }, [x(a.$slots, "default")], 2)])], 12, W)], 10, z));
+		}, [u("div", G, [u("div", { class: h(w(e)("configurator-layer-body px-3 py-2 space-y-2", r.dividers && "[&>*+*]:border-t [&>*+*]:border-border/30 [&>*+*]:pt-2", r.bodyClass)) }, [x(a.$slots, "default", {}, void 0, !0)], 2)])], 12, W)], 10, z));
 	}
-}), q = ["data-density"], J = { class: "flex items-baseline justify-between gap-3" }, Y = { class: "flex min-w-0 items-baseline gap-2" }, X = {
+}), [["__scopeId", "data-v-1e14935d"]]), q = ["data-density"], J = { class: "flex items-baseline justify-between gap-3" }, Y = { class: "flex min-w-0 items-baseline gap-2" }, X = {
 	key: 0,
 	class: "truncate text-micro font-mono text-muted-foreground/70"
 }, Z = ["aria-label"], Q = { class: "flex items-center" }, $ = {
@@ -191,6 +200,7 @@ var M = k.use, N = {
 	setup(t, { emit: n }) {
 		let r = t, i = n, o = M(), p = s(() => r.density ?? o?.value ?? void 0);
 		return (n, o) => (_(), l("div", {
+			"data-slot": "configurator-row",
 			class: h(w(e)("configurator-row flex flex-col gap-1.5 py-2", r.class)),
 			"data-density": p.value
 		}, [
@@ -200,7 +210,8 @@ var M = k.use, N = {
 			}), t.name ? (_(), l("span", X, S(t.name), 1)) : c("", !0)]), t.canReset ? (_(), l("button", {
 				key: 0,
 				type: "button",
-				class: "focus-ring inline-flex h-6 w-6 items-center justify-center rounded-pill text-muted-foreground/60 transition-colors hover:bg-foreground/5 hover:text-foreground active:scale-[var(--scale-press,0.97)]",
+				"data-slot": "configurator-reset",
+				class: "tap-squish transition-control focus-ring inline-flex h-6 w-6 items-center justify-center rounded-pill text-muted-foreground/60 hover:bg-foreground/5 hover:text-foreground",
 				"aria-label": `Reset ${t.label}`,
 				onClick: o[0] ||= (e) => i("reset")
 			}, [f(w(O), {
@@ -211,7 +222,7 @@ var M = k.use, N = {
 			t.description ? (_(), l("p", $, S(t.description), 1)) : c("", !0)
 		], 10, q));
 	}
-}), [["__scopeId", "data-v-1b71284c"]]);
+}), [["__scopeId", "data-v-377e5920"]]);
 //#endregion
 //#region src/components/custom/configurator/useConfiguratorState.ts
 function te(e) {

package/dist/useResolveTokenColor-r9pnNjqK.js

@@ -0,0 +1,24 @@
+//#region src/composables/dom/useResolveTokenColor.ts
+function e(e, t) {
+	if (!e.includes("var(") || typeof window > "u" || !t) return e;
+	let n = t.style.color;
+	t.style.color = e;
+	let r = getComputedStyle(t).color;
+	return t.style.color = n, r || e;
+}
+function t(t = 256) {
+	let n = /* @__PURE__ */ new Map();
+	return {
+		resolve(r, i) {
+			let a = n.get(r);
+			if (a !== void 0) return a;
+			let o = e(r, i);
+			return n.size >= t && n.clear(), n.set(r, o), o;
+		},
+		invalidate() {
+			n.clear();
+		}
+	};
+}
+//#endregion
+export { e as n, t };