@mkbabb/glass-ui 3.12.0 → 3.13.0

package/dist/styles/view-transition.css

@@ -60,56 +60,5 @@
 @keyframes gl-vt-slide-in  { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
 @keyframes gl-vt-slide-out { to   { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
 
-/* ── gl-shared-element — the named-pair MORPH group (D6.c M6) ──────────────────
- * Distinct from `.gl-list-item` (a cross-fade of MANY members in a re-rank): a
- * shared-element morph is ONE element that exists in BOTH the old and new states
- * under the SAME `view-transition-name`, so the browser MORPHS it in place — the
- * group interpolates its size+position (transform) while old/new cross-fade. The
- * editorial case: the gallery card's title IS the dashboard masthead's title, so
- * the name you clicked GROWS into the name you read (the card → masthead route
- * morph). The consumer adds `view-transition-class: gl-shared-element` plus a
- * MATCHED `view-transition-name: <id>` on BOTH the source and destination element
- * (the MANDATORY runtime rule — ≤1 element per name per state, else the morph is
- * skipped silently), and wraps the navigation in `useRouteTransition` /
- * `startViewTransition`.
- *
- * The morph rides the SMOOTH register (the 700ms-class spring, C-ANIM-VIZ-MAP T1
- * §7) — a longer, gentler curve than the list-item cross-fade, because a morph
- * that travels across the viewport wants room to read. The old/new cross-fade is
- * softened so the morphing GROUP is the figure and the rest recedes. */
-::view-transition-group(.gl-shared-element) {
-    animation-duration: var(--vt-morph-duration, var(--duration-slow, 500ms));
-    animation-timing-function: var(--vt-morph-ease, var(--spring-smooth, ease-in-out));
-}
-::view-transition-old(.gl-shared-element),
-::view-transition-new(.gl-shared-element) {
-    /* The image pair cross-fades UNDER the group's size/position morph — softer
-       than the group curve so the morph (the size/position travel) is the figure
-       and the pixel cross-fade is the recessive fill. */
-    animation-duration: var(--vt-morph-duration, var(--duration-slow, 500ms));
-    animation-timing-function: var(--vt-ease, var(--spring-smooth, ease-in-out));
-}
-
-/* ── gl-expand — the plate → fullscreen MORPH recipe (D6.c M7) ─────────────────
- * The expand verb (a plate growing to fullscreen) is a SHARED-ELEMENT morph, not
- * an opacity jump-cut: the plate IS the fullscreen surface, growing. It is a
- * specialization of `gl-shared-element` — the SAME named-pair morph, with the
- * expand register (a touch snappier than a route morph, because the surface stays
- * in place and only the rect grows, so it wants less travel-room). `ExpandableContainer`
- * wires the `view-transition-name` plumbing on its plate↔fullscreen surfaces (an
- * opt-in `viewTransitionName` prop), so a consumer opts in and the open/close
- * mutation — wrapped in `startViewTransition` — morphs the plate's rect to the
- * fullscreen rect and back. The named pair is the SAME element across states
- * (the slot content), so the browser captures one group and grows it. */
-::view-transition-group(.gl-expand) {
-    animation-duration: var(--vt-expand-duration, var(--duration-normal, 240ms));
-    animation-timing-function: var(--vt-expand-ease, var(--spring-bouncy, ease-out));
-}
-::view-transition-old(.gl-expand),
-::view-transition-new(.gl-expand) {
-    animation-duration: var(--vt-expand-duration, var(--duration-normal, 240ms));
-    animation-timing-function: var(--vt-ease, var(--spring-bouncy, ease-out));
-}
-
 /* Keep the non-transitioned UI interactive while the snapshot animates. */
 ::view-transition { pointer-events: none; }

package/dist/switch.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Switch-Ch-k3Rv-.js";
+import { t as e } from "./Switch-CsIuYP_e.js";
 export { e as Switch };

package/dist/tabs.js

@@ -1,28 +1,31 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-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";
+import { a as t, i as n, o as r, r as i, s as a } from "./SelectScrollDownButton-CiDUxfEj.js";
+import { i as o, n as s, r as c, t as l } from "./TooltipProvider-B3MkB_8P.js";
+import { t as u } from "./useLiquidFlex-BL0lLLN2.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 ee, onMounted as T, onUnmounted as E, openBlock as D, ref as O, renderList as k, renderSlot as A, toDisplayString as j, unref as M, useModel as te, watch as N, withCtx as P } from "vue";
+//#region src/components/custom/tabs/constants.ts
+var F = 1.08;
+//#endregion
 //#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({
+function I(e) {
+	let { containerRef: t, indicatorRef: n, buttonRefs: r, options: i, model: a, multiSelect: o, anchorSupported: s, jsSliderActive: c, activeValues: l } = e, d = O({
 		width: "0px",
 		transform: "translateX(0px)",
 		opacity: "0"
 	});
-	function d() {
+	function f() {
 		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 = {
+		d.value = {
 			width: `${t.offsetWidth}px`,
 			transform: `translateX(${t.offsetLeft}px)`,
 			opacity: "1"
 		};
 	}
-	let f = k({});
-	function p() {
+	let p = O({});
+	function m() {
 		if (!o.value) return;
 		let e = {};
 		for (let t of l.value) {
@@ -33,46 +36,52 @@ function te(e) {
 				opacity: "1"
 			});
 		}
-		f.value = e;
+		p.value = e;
 	}
-	function m() {
-		o.value ? p() : d();
+	function h() {
+		o.value ? m() : f();
 	}
-	let h = -1, g = null;
-	function _() {
+	let g = -1, _ = null, v = F, y = u({
+		from: 0,
+		to: 0,
+		axis: "width",
+		squishLaw: "linear",
+		maxStretch: () => v
+	});
+	function b() {
 		return typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 	}
-	function v(e) {
+	function x(e) {
 		let i = n.value;
 		if (o.value || !i) {
-			h = e;
+			g = e;
 			return;
 		}
-		if (_()) {
-			h = e;
+		if (b()) {
+			g = 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;
+		let a = r.value[g], s = r.value[e];
+		if (g = 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();
+		v = Number(d) || 1.08, y.squish(u), _ && clearTimeout(_), i.style.setProperty("--stretch", String(y.stretch.value)), _ = setTimeout(() => {
+			y.squish(0), i.style.setProperty("--stretch", String(y.stretch.value)), _ = null;
 		}, 60);
 	}
-	P(() => a.value, () => {
-		c.value && S(m);
-	}, { deep: !0 }), P(() => i.value, () => {
-		c.value && S(m);
+	N(() => a.value, () => {
+		c.value && S(h);
+	}, { deep: !0 }), N(() => i.value, () => {
+		c.value && S(h);
 	}, { deep: !0 });
-	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);
+	let C = null;
+	return T(() => {
+		g = i.value.findIndex((e) => l.value.includes(e.value)), c.value && (S(h), t.value && (C = new ResizeObserver(() => h()), C.observe(t.value)));
+	}), E(() => {
+		C?.disconnect(), _ && clearTimeout(_);
 	}), {
-		singleSliderStyle: u,
-		multiSliderStyles: f,
-		squishOnTravel: v
+		singleSliderStyle: d,
+		multiSliderStyles: p,
+		squishOnTravel: x
 	};
 }
 //#endregion
@@ -85,7 +94,7 @@ var ne = ["role"], re = [
 	"role",
 	"disabled",
 	"onClick"
-], I = /* @__PURE__ */ t(/* @__PURE__ */ y({
+], L = /* @__PURE__ */ y({
 	__name: "SegmentedTabs",
 	props: /* @__PURE__ */ b({
 		options: {},
@@ -111,26 +120,26 @@ var ne = ["role"], re = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(t) {
+	setup(u) {
 		function y(e, t) {
 			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 		}
-		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");
+		let b = u, E = te(u, "modelValue"), N = O(null), F = O(null), L = O([]), 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;
+			let e = E.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;
+		}), 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 = O(!0), Y = null;
 		function X(e) {
 			J.value = e.matches;
 		}
 		let se = f(() => {
-			if (!K.value) return D.value;
+			if (!K.value) return E.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,
+			return e.some((e) => e.value === E.value) ? E.value : e[0]?.value ?? E.value;
+		}), Z = f(() => K.value ? q.value : b.options), ce = f(() => K.value?.ariaLabel ?? b.options.find((e) => e.value === E.value)?.label ?? "Select"), le = f(() => !!K.value && !J.value), { singleSliderStyle: ue, multiSliderStyles: de, squishOnTravel: fe } = I({
+			containerRef: N,
+			indicatorRef: F,
 			buttonRefs: L,
 			options: Z,
 			model: f(() => se.value),
@@ -171,70 +180,70 @@ var ne = ["role"], re = [
 			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;
+				n > -1 ? t.length > 1 && t.splice(n, 1) : t.push(e), E.value = t;
+			} else E.value = e;
 			Q(t);
 		}
 		function me(e) {
-			typeof e == "string" && (D.value = e);
+			typeof e == "string" && (E.value = e);
 		}
-		return E(() => {
+		return T(() => {
 			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);
 			});
-		}), T(() => {
+		}), ee(() => {
 			Y?.removeEventListener("change", X), Y = null;
-		}), (f, y) => le.value ? (O(), h("div", {
+		}), (f, y) => le.value ? (D(), h("div", {
 			key: 0,
-			class: C(N(e)("segmented-tabs__mobile w-fit", b.class))
-		}, [v(N(o), {
-			"model-value": D.value,
+			class: C(M(e)("segmented-tabs__mobile w-fit", b.class))
+		}, [v(M(a), {
+			"model-value": E.value,
 			"onUpdate:modelValue": me
 		}, {
-			default: F(() => [v(N(n), {
+			default: P(() => [v(M(t), {
 				"aria-label": ce.value,
-				class: C(N(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", K.value?.triggerClass))
+				class: C(M(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", K.value?.triggerClass))
 			}, {
-				default: F(() => [v(N(i))]),
+				default: P(() => [v(M(r))]),
 				_: 1
-			}, 8, ["aria-label", "class"]), v(N(r), null, {
-				default: F(() => [(O(!0), h(d, null, A(t.options, (e) => (O(), p(N(a), {
+			}, 8, ["aria-label", "class"]), v(M(n), null, {
+				default: P(() => [(D(!0), h(d, null, k(u.options, (e) => (D(), p(M(i), {
 					key: e.value,
 					value: e.value
 				}, {
-					default: F(() => [_(M(e.label), 1)]),
+					default: P(() => [_(j(e.label), 1)]),
 					_: 2
 				}, 1032, ["value"]))), 128))]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["model-value"])], 2)) : (O(), h("div", {
+		}, 8, ["model-value"])], 2)) : (D(), h("div", {
 			key: 1,
 			ref_key: "containerRef",
-			ref: P,
+			ref: N,
 			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))
+			class: C(M(e)("segmented-tabs", `segmented-tabs--${u.variant}`, B.value && "segmented-tabs--scroll scroll-fade-mask scrollbar-hidden", V.value && "segmented-tabs--auto scrollbar-hidden", b.class))
 		}, [
-			!z.value && !H.value ? (O(), h("div", {
+			!z.value && !H.value ? (D(), h("div", {
 				key: 0,
 				ref_key: "indicatorRef",
-				ref: I,
+				ref: F,
 				class: C(["segmented-indicator", G.value ? "segmented-indicator--js" : "segmented-indicator--anchor"]),
-				style: w(G.value ? N(ue) : void 0)
+				style: w(G.value ? M(ue) : void 0)
 			}, null, 6)) : m("", !0),
-			!z.value && H.value ? (O(!0), h(d, { key: 1 }, A(U.value, (e) => (O(), h("div", {
+			!z.value && H.value ? (D(!0), h(d, { key: 1 }, k(U.value, (e) => (D(), h("div", {
 				key: "indicator-" + e,
 				class: "segmented-indicator segmented-indicator--js",
-				style: w(N(de)[e] ?? { opacity: "0" })
+				style: w(M(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), {
+			(D(!0), h(d, null, k(Z.value, (e, t) => (D(), h(d, { key: e.value }, [e.tooltip ? (D(), p(M(l), {
 				key: 0,
 				"delay-duration": 200
 			}, {
-				default: F(() => [v(N(s), null, {
-					default: F(() => [v(N(c), { "as-child": "" }, {
-						default: F(() => [g("button", x({
+				default: P(() => [v(M(o), null, {
+					default: P(() => [v(M(s), { "as-child": "" }, {
+						default: P(() => [g("button", x({
 							ref_for: !0,
 							ref: (e) => {
 								e && (L.value[t] = e);
@@ -245,22 +254,22 @@ var ne = ["role"], re = [
 							disabled: e.disabled,
 							class: e.disabled && "is-disabled",
 							onClick: (n) => $(e.value, t)
-						}), [j(f.$slots, "option", {
+						}), [A(f.$slots, "option", {
 							option: e,
 							active: W(e.value)
-						}, () => [_(M(e.label), 1)], !0)], 16, re)]),
+						}, () => [_(j(e.label), 1)])], 16, re)]),
 						_: 2
-					}, 1024), v(N(l), {
+					}, 1024), v(M(c), {
 						side: "bottom",
 						"side-offset": 8
 					}, {
-						default: F(() => [_(M(e.tooltip), 1)]),
+						default: P(() => [_(j(e.tooltip), 1)]),
 						_: 2
 					}, 1024)]),
 					_: 2
 				}, 1024)]),
 				_: 2
-			}, 1024)) : (O(), h("button", x({
+			}, 1024)) : (D(), h("button", x({
 				key: 1,
 				ref_for: !0,
 				ref: (e) => {
@@ -272,12 +281,12 @@ var ne = ["role"], re = [
 				disabled: e.disabled,
 				class: e.disabled && "is-disabled",
 				onClick: (n) => $(e.value, t)
-			}), [j(f.$slots, "option", {
+			}), [A(f.$slots, "option", {
 				option: e,
 				active: W(e.value)
-			}, () => [_(M(e.label), 1)], !0)], 16, ie))], 64))), 128))
+			}, () => [_(j(e.label), 1)])], 16, ie))], 64))), 128))
 		], 10, ne));
 	}
-}), [["__scopeId", "data-v-dd84d37c"]]);
+});
 //#endregion
-export { I as SegmentedTabs };
+export { L as SegmentedTabs };

package/dist/timeline.js

@@ -1,5 +1,5 @@
 import { t as e } from "./_plugin-vue_export-helper-ok8pgSl5.js";
-import { t } from "./HoverPopover-2LOIW34a.js";
+import { t } from "./HoverPopover-CISOJQuZ.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) {

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-1rYWrmAm.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-D6q4HtXu.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-COu_4IW4.js";
+import { n as e, t } from "./ToggleGroupItem-D_AHlRw9.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-CmZzCuaG.js";
+import { i as e, n as t, r as n, t as r } from "./TooltipProvider-B3MkB_8P.js";
 export { e as Tooltip, n as TooltipContent, r as TooltipProvider, t as TooltipTrigger };

package/dist/underline.d.ts

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

package/dist/underline.js

@@ -0,0 +1,85 @@
+import { t as e } from "./_plugin-vue_export-helper-ok8pgSl5.js";
+import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeStyle as a, onMounted as o, openBlock as s, ref as c, renderSlot as l, unref as u, useCssVars as d, useId as f, watch as p } from "vue";
+import { NumericAnimation as m } from "@mkbabb/keyframes.js";
+import { easeOutCubic as h } from "@mkbabb/value.js";
+//#region src/components/custom/underline/GlassUnderline.vue?vue&type=script&setup=true&lang.ts
+var g = ["data-gu-clock", "data-gu-variant"], _ = ["viewBox"], v = ["id", "d"], y = ["d"], b = 120, x = "M1,6 C18,3 30,8 48,5 S78,3 99,6", S = "M1,7.1 C20,5 32,9 50,6.2 S80,5 99,7", C = /* @__PURE__ */ e(/* @__PURE__ */ i({
+	__name: "GlassUnderline",
+	props: {
+		clock: { default: "load" },
+		variant: { default: "pen" },
+		color: { default: void 0 },
+		drawMs: { default: 700 },
+		easing: {
+			type: Function,
+			default: void 0
+		},
+		timeline: { default: void 0 },
+		active: {
+			type: Boolean,
+			default: void 0
+		},
+		paths: { default: void 0 }
+	},
+	setup(e, { expose: i }) {
+		d((e) => ({ v237e7abc: C.color ?? "var(--primary)" }));
+		let C = e;
+		function w() {
+			return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		}
+		let T = w(), E = t(() => C.paths?.stroke ?? x), D = t(() => C.paths?.ghost ?? S), O = t(() => C.paths?.viewBox ?? "0 0 100 10"), k = t(() => C.paths?.len ?? b), A = f(), j = t(() => C.clock === "scroll" ? T ? "static" : "scroll" : C.clock === "static" ? "static" : "load"), M = c(C.clock === "load" && !T && C.active !== !0 ? k.value : 0), N = null;
+		async function P() {
+			if (C.clock === "load") {
+				if (T) {
+					M.value = 0;
+					return;
+				}
+				N?.stop(), M.value = k.value, N = new m([{ off: k.value }, { off: 0 }], {
+					duration: C.drawMs,
+					timingFunction: C.easing ?? h,
+					respectReducedMotion: !0
+				}), await N.play((e) => {
+					M.value = e.off;
+				});
+			}
+		}
+		function F() {
+			N?.stop(), M.value = 0;
+		}
+		function I() {
+			N?.stop(), M.value = C.clock === "load" && !T ? k.value : 0;
+		}
+		return p(() => C.active, (e, t) => {
+			C.clock === "load" && (e === !0 && t !== !0 ? T ? F() : P() : e === !1 && t === !0 && I());
+		}), o(() => {
+			C.clock === "load" && C.active === !0 && (T ? F() : P());
+		}), i({
+			play: P,
+			snap: F
+		}), (t, i) => (s(), n("span", {
+			class: "glass-underline",
+			"data-gu-clock": j.value,
+			"data-gu-variant": e.variant,
+			style: a(e.timeline ? { "--gu-timeline": e.timeline } : void 0)
+		}, [l(t.$slots, "default", {}, void 0, !0), (s(), n("svg", {
+			class: "glass-underline__ink",
+			viewBox: O.value,
+			preserveAspectRatio: "none",
+			"aria-hidden": "true",
+			focusable: "false",
+			style: a({
+				"--gu-off": String(M.value),
+				"--gu-len": String(k.value)
+			})
+		}, [r("path", {
+			id: `gu-stroke-${u(A)}`,
+			class: "glass-underline__stroke",
+			d: E.value
+		}, null, 8, v), r("path", {
+			class: "glass-underline__stroke glass-underline__stroke--ghost",
+			d: D.value
+		}, null, 8, y)], 12, _))], 12, g));
+	}
+}), [["__scopeId", "data-v-20b5d619"]]);
+//#endregion
+export { C as GlassUnderline };

package/dist/{useAnimatedNumber-Bcpy5Etf.js → useAnimatedNumber-C5I3wWd8.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./constants-yKeKnE84.js";
+import { n as e, t } from "./constants-CS75AWHG.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

package/dist/{useConfiguratorState-DxAqksK6.js → useConfiguratorState-DAoeHVue.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 } from "./createLucideIcon-DydS2qgk.js";
+import { t as n } from "./chevron-down-DKkxb4VV.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 { t as i } from "./createContext-BM46COQ-.js";
+import { t as a } from "./Label-r3WzWrsj.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",
@@ -56,7 +56,7 @@ var M = k.use, N = {
 	setup(t, { emit: n }) {
 		let r = t;
 		j(s(() => r.density));
-		let i = n, a = s(() => e("configurator glass-floating rounded-panel border border-border/60 overflow-hidden", "grid grid-cols-1", "lg:grid-cols-[minmax(0,1fr)_minmax(var(--configurator-aside-min,280px),var(--configurator-aside-max,360px))]", "min-h-0", r.class)), d = s(() => {
+		let i = n, a = s(() => e("configurator glass-floating rounded-panel border border-border/60 overflow-hidden", "grid grid-cols-1", "grid-rows-[minmax(var(--configurator-stage-min,18rem),auto)_minmax(0,1fr)] lg:grid-rows-none", "lg:grid-cols-[minmax(0,1fr)_minmax(var(--configurator-aside-min,280px),var(--configurator-aside-max,360px))]", "min-h-0", r.class)), d = s(() => {
 			if (r.asideWidth == null) return;
 			let [e, t] = Array.isArray(r.asideWidth) ? r.asideWidth : [r.asideWidth, r.asideWidth];
 			return {
@@ -100,7 +100,7 @@ var M = k.use, N = {
 	"aria-expanded",
 	"aria-controls",
 	"data-state"
-], V = { class: "flex min-w-0 items-baseline gap-2" }, H = { class: "text-small font-semibold text-foreground" }, U = {
+], V = { class: "flex min-w-0 items-baseline gap-2" }, H = { class: "configurator-section-label truncate" }, U = {
 	key: 0,
 	class: "truncate text-micro font-mono text-muted-foreground/70"
 }, W = [
@@ -174,7 +174,7 @@ var M = k.use, N = {
 			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", {}, void 0, !0)], 2)])], 12, W)], 10, z));
 	}
-}), [["__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 = {
+}), [["__scopeId", "data-v-95bc81d9"]]), 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" }, $ = {
@@ -222,7 +222,7 @@ var M = k.use, N = {
 			t.description ? (_(), l("p", $, S(t.description), 1)) : c("", !0)
 		], 10, q));
 	}
-}), [["__scopeId", "data-v-377e5920"]]);
+}), [["__scopeId", "data-v-8769aea9"]]);
 //#endregion
 //#region src/components/custom/configurator/useConfiguratorState.ts
 function te(e) {

package/dist/{useGlobalDark-CAhOXNLO.js → useGlobalDark-yhL4Wp-s.js}

@@ -7,39 +7,20 @@ var a, o = n(() => {
 		disableTransition: !1
 	}), o = i(n), s = e(!1);
 	function c() {
-		s.value && document.documentElement.classList.add("no-transition"), o(), s.value && requestAnimationFrame(() => {
+		s.value && (document.documentElement.classList.add("no-transition"), document.documentElement.offsetHeight), o(), s.value && requestAnimationFrame(() => {
 			document.documentElement.classList.remove("no-transition");
 		});
 	}
 	function l(e) {
 		s.value = e;
 	}
-	let u = /* @__PURE__ */ new Set(), d = !1, f = !1;
-	function p(e) {
-		if (u.size === 0 || (f = e, d)) return;
-		d = !0;
-		let t = () => {
-			d = !1;
-			let e = f;
-			for (let t of [...u]) t(e);
-		};
-		typeof requestAnimationFrame == "function" ? requestAnimationFrame(t) : setTimeout(t, 0);
-	}
-	function m(e) {
-		return u.add(e), () => {
-			u.delete(e);
-		};
-	}
 	return t(n, (e) => {
 		document.documentElement.style.colorScheme = e ? "dark" : "light";
-	}, { immediate: !0 }), t(n, (e) => {
-		p(e);
-	}), {
+	}, { immediate: !0 }), {
 		isDark: n,
 		toggleDark: c,
 		disableTransitions: s,
-		setDisableTransitions: l,
-		onFlipSettled: m
+		setDisableTransitions: l
 	};
 });
 function s(e) {

package/dist/useLiquidFlex-BL0lLLN2.js

@@ -0,0 +1,30 @@
+import { computed as e, ref as t } from "vue";
+//#region src/composables/motion/useLiquidFlex.ts
+function n(n) {
+	let { axis: r } = n, i = n.squishK ?? 1.6, a = n.squishLaw ?? "tanh", o = () => typeof n.maxStretch == "function" ? n.maxStretch() : n.maxStretch ?? 1.08, s = () => typeof n.from == "function" ? n.from() : n.from, c = () => typeof n.to == "function" ? n.to() : n.to, l = t(0), u = t(0);
+	function d(e) {
+		let t = e < 0 ? 0 : e > 1 ? 1 : e;
+		u.value = Math.abs(t - l.value), l.value = t;
+	}
+	function f(e) {
+		u.value = e < 0 ? 0 : e;
+	}
+	let p = e(() => {
+		let e = s();
+		return e + (c() - e) * l.value;
+	}), m = e(() => {
+		let e = o(), t = a === "linear" ? 1 + u.value * (e - 1) : 1 + Math.tanh(u.value * i) * (e - 1);
+		return t > e ? e : t;
+	});
+	return {
+		t: l,
+		size: p,
+		stretch: m,
+		sizeStyle: e(() => ({ [r]: `${p.value}px` })),
+		stretchStyle: e(() => ({ "--stretch": String(m.value) })),
+		drive: d,
+		squish: f
+	};
+}
+//#endregion
+export { n as t };