@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/timeline.js

@@ -1,34 +1,33 @@
-import { t as e } from "./useSpring-C0jyvEJB.js";
-import { n as t } from "./springPresets-DfoQ6XRY.js";
-import { t as n } from "./useSpringPress-VM9RgVq3.js";
-import { t as r } from "./useLiquidFlex-Cc6PjVJD.js";
-import { t as i } from "./vSpecular-EX7loENl.js";
-import { t as a } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { t as o } from "./HoverPopover-DYpBOzzF.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, normalizeClass as _, normalizeProps as v, normalizeStyle as y, openBlock as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, unref as T, watch as E, withCtx as D, withDirectives as ee } from "vue";
-//#region src/components/custom/timeline/geometry.ts
-function O(e) {
+import { t as e } from "./useSpring-BBSKFx_0.js";
+import { t } from "./useSpringPress-BypV_KO-.js";
+import { t as n } from "./useLiquidFlex-Ch4exNvN.js";
+import { t as r } from "./vSpecular-DlYN0UZy.js";
+import { t as i } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { n as a, r as o, t as s } from "./PopoverContent-DOtszFWK.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle 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, withDirectives as ee } from "vue";
+//#region src/components/timeline/geometry.ts
+function k(e) {
 	return typeof e.progress == "number" ? Math.max(0, Math.min(1, e.progress)) : e.state === "completed" ? 1 : e.state === "active" ? .5 : 0;
 }
-function k(e) {
+function A(e) {
 	return typeof e.weight == "number" && e.weight > 0 ? e.weight : 1;
 }
-function A(e) {
-	let t = c(() => {
-		let t = e.value.reduce((e, t) => e + k(t), 0);
+function j(e) {
+	let t = l(() => {
+		let t = e.value.reduce((e, t) => e + A(t), 0);
 		return t > 0 ? t : 1;
 	});
 	function n(n) {
 		let r = 0;
 		for (let t = 0; t < n; t += 1) {
 			let n = e.value[t];
-			n && (r += k(n));
+			n && (r += A(n));
 		}
 		return r / t.value;
 	}
 	function r(n) {
 		let r = e.value[n];
-		return r ? k(r) / t.value : 0;
+		return r ? A(r) / t.value : 0;
 	}
 	function i(e) {
 		return n(e) + r(e);
@@ -38,39 +37,39 @@ function A(e) {
 		regionLeft: n,
 		regionWidth: r,
 		boundaryX: i,
-		continuousAriaValueNow: c(() => {
+		continuousAriaValueNow: l(() => {
 			let t = 0;
-			for (let n of e.value) n.state === "completed" ? t += 1 : n.state === "active" && (t += O(n));
+			for (let n of e.value) n.state === "completed" ? t += 1 : n.state === "active" && (t += k(n));
 			return Math.round(t * 100) / 100;
 		})
 	};
 }
-function j(e) {
+function M(e) {
 	return e.gradient && typeof e.gradient == "object" ? e.gradient.to : "var(--timeline-segment-default-gradient-color, var(--surface-tint-25))";
 }
-function M(e) {
+function N(e) {
 	if (e.length === 0) return "var(--timeline-segment-default-gradient, linear-gradient(90deg, var(--surface-tint-15), var(--surface-tint-25)))";
 	if (e.length === 1) {
-		let t = j(e[0]);
+		let t = M(e[0]);
 		return `linear-gradient(90deg, ${t}, ${t})`;
 	}
-	let t = e.reduce((e, t) => e + k(t), 0) || 1, n = [], r = 0;
+	let t = e.reduce((e, t) => e + A(t), 0) || 1, n = [], r = 0;
 	return e.forEach((i, a) => {
-		let o = k(i), s = (r + o / 2) / t, c = a === 0 ? 0 : a === e.length - 1 ? 1 : s;
-		n.push(`${j(i)} ${(c * 100).toFixed(3)}%`), r += o;
+		let o = A(i), s = (r + o / 2) / t, c = a === 0 ? 0 : a === e.length - 1 ? 1 : s;
+		n.push(`${M(i)} ${(c * 100).toFixed(3)}%`), r += o;
 	}), `linear-gradient(90deg, ${n.join(", ")})`;
 }
-function N(e, t) {
+function P(e, t) {
 	let n = t > 0 ? t : 1, r = `${(100 / n).toFixed(3)}%`, i = 1 - n;
 	return {
 		sizeX: r,
 		positionX: i > 1e-6 ? `${(e / i * 100).toFixed(3)}%` : "0%"
 	};
 }
-function P(e) {
-	return O(e);
-}
 function F(e) {
+	return k(e);
+}
+function I(e) {
 	let t = e.value ?? null;
 	return {
 		label: t?.label ?? e.label,
@@ -80,27 +79,27 @@ function F(e) {
 	};
 }
 //#endregion
-//#region src/components/custom/timeline/ContinuousMarkers.vue?vue&type=script&setup=true&lang.ts
-var I = ["aria-label"], L = [
+//#region src/components/timeline/ContinuousMarkers.vue?vue&type=script&setup=true&lang.ts
+var L = ["aria-label"], R = [
 	"aria-label",
 	"data-state",
 	"data-current",
 	"data-completed",
 	"onClick",
 	"onKeydown"
-], R = { class: "sr-only" }, z = {
+], z = { class: "sr-only" }, B = {
 	key: 0,
 	class: "continuous-dot-check",
 	viewBox: "0 0 24 24",
 	fill: "none",
 	"aria-hidden": "true"
-}, B = { class: "timeline-popover-label" }, V = {
+}, V = { class: "timeline-popover-label" }, H = {
 	key: 0,
 	class: "timeline-popover-value tabular-nums"
-}, H = {
+}, U = {
 	key: 1,
 	class: "timeline-popover-description"
-}, U = { class: "timeline-popover-state" }, W = [
+}, W = { class: "timeline-popover-state" }, G = [
 	"aria-label",
 	"data-state",
 	"data-current",
@@ -111,13 +110,13 @@ var I = ["aria-label"], L = [
 	"onBlur",
 	"onClick",
 	"onKeydown"
-], G = { class: "sr-only" }, K = {
+], K = { class: "sr-only" }, q = {
 	key: 0,
 	class: "continuous-dot-check",
 	viewBox: "0 0 24 24",
 	fill: "none",
 	"aria-hidden": "true"
-}, q = /* @__PURE__ */ a(/* @__PURE__ */ h({
+}, J = /* @__PURE__ */ i(/* @__PURE__ */ g({
 	__name: "ContinuousMarkers",
 	props: {
 		segments: {},
@@ -139,66 +138,74 @@ var I = ["aria-label"], L = [
 		function i(e, t) {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n("click", t));
 		}
-		return (t, a) => e.segments.length > 0 ? (b(), d("ul", {
+		return (t, l) => e.segments.length > 0 ? (x(), f("ul", {
 			key: 0,
 			class: "continuous-markers",
 			role: "list",
 			"aria-label": `${e.markersAriaLabel} — phase markers`
-		}, [(b(!0), d(s, null, S(e.segments, (s, c) => (b(), d("li", {
-			key: `dot-li-${s.key}`,
+		}, [(x(!0), f(c, null, C(e.segments, (c, m) => (x(), f("li", {
+			key: `dot-li-${c.key}`,
 			class: "continuous-marker",
 			role: "listitem",
-			style: y({ left: `${e.boundaryX(c) * 100}%` })
-		}, [e.disablePopover ? (b(), d("button", {
+			style: b({ left: `${e.boundaryX(m) * 100}%` })
+		}, [e.disablePopover ? (x(), f("button", {
 			key: 1,
 			type: "button",
 			class: "continuous-dot segmented-dot",
-			"aria-label": `${s.label}: ${s.state}`,
-			"data-state": s.state,
-			"data-current": s.key === e.currentSegmentKey || void 0,
-			"data-completed": s.state === "completed" || void 0,
-			onMouseenter: (e) => n("hover", s),
-			onMouseleave: (e) => n("hoverEnd", s),
-			onFocus: (e) => n("hover", s),
-			onBlur: (e) => n("hoverEnd", s),
-			onClick: (e) => n("click", s),
-			onKeydown: (e) => i(e, s)
-		}, [f("span", G, w(s.label), 1), s.state === "completed" ? (b(), d("svg", K, [...a[1] ||= [f("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : u("", !0)], 40, W)) : (b(), l(o, {
+			"aria-label": `${c.label}: ${c.state}`,
+			"data-state": c.state,
+			"data-current": c.key === e.currentSegmentKey || void 0,
+			"data-completed": c.state === "completed" || void 0,
+			onMouseenter: (e) => n("hover", c),
+			onMouseleave: (e) => n("hoverEnd", c),
+			onFocus: (e) => n("hover", c),
+			onBlur: (e) => n("hoverEnd", c),
+			onClick: (e) => n("click", c),
+			onKeydown: (e) => i(e, c)
+		}, [p("span", K, T(c.label), 1), c.state === "completed" ? (x(), f("svg", q, [...l[1] ||= [p("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : d("", !0)], 40, G)) : (x(), u(E(o), {
 			key: 0,
-			side: "top",
-			"side-offset": 10,
-			"hover-open-delay": 120,
+			trigger: "hover",
+			"open-delay": 120,
 			"close-delay": 160,
-			class: _(`timeline-popover timeline-popover-${s.key}`),
-			"onUpdate:open": (e) => r(s, e)
+			"onUpdate:open": (e) => r(c, e ?? !1)
 		}, {
-			trigger: D(() => [f("button", {
-				type: "button",
-				class: "continuous-dot segmented-dot",
-				"aria-label": `${s.label}: ${s.state}`,
-				"data-state": s.state,
-				"data-current": s.key === e.currentSegmentKey || void 0,
-				"data-completed": s.state === "completed" || void 0,
-				onClick: (e) => n("click", s),
-				onKeydown: (e) => i(e, s)
-			}, [f("span", R, w(s.label), 1), s.state === "completed" ? (b(), d("svg", z, [...a[0] ||= [f("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : u("", !0)], 40, L)]),
-			content: D(() => [C(t.$slots, "popoverContent", { segment: s }, () => [f("div", {
-				class: "timeline-popover-body",
-				style: y({ "--popover-tint": typeof s.gradient == "object" && s.gradient ? s.gradient.to : "var(--foreground)" })
-			}, [
-				f("span", B, w(T(F)(s).label), 1),
-				T(F)(s).value == null ? u("", !0) : (b(), d("span", V, w(T(F)(s).value), 1)),
-				T(F)(s).description ? (b(), d("span", H, w(T(F)(s).description), 1)) : u("", !0),
-				f("span", U, w(T(F)(s).state), 1)
-			], 4)], !0)]),
+			default: O(() => [h(E(a), { "as-child": "" }, {
+				default: O(() => [p("button", {
+					type: "button",
+					class: "continuous-dot segmented-dot",
+					"aria-label": `${c.label}: ${c.state}`,
+					"data-state": c.state,
+					"data-current": c.key === e.currentSegmentKey || void 0,
+					"data-completed": c.state === "completed" || void 0,
+					onClick: (e) => n("click", c),
+					onKeydown: (e) => i(e, c)
+				}, [p("span", z, T(c.label), 1), c.state === "completed" ? (x(), f("svg", B, [...l[0] ||= [p("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : d("", !0)], 40, R)]),
+				_: 2
+			}, 1024), h(E(s), {
+				role: "card",
+				side: "top",
+				"side-offset": 10,
+				class: v(`timeline-popover timeline-popover-${c.key}`)
+			}, {
+				default: O(() => [w(t.$slots, "popoverContent", { segment: c }, () => [p("div", {
+					class: "timeline-popover-body",
+					style: b({ "--popover-tint": typeof c.gradient == "object" && c.gradient ? c.gradient.to : "var(--foreground)" })
+				}, [
+					p("span", V, T(E(I)(c).label), 1),
+					E(I)(c).value == null ? d("", !0) : (x(), f("span", H, T(E(I)(c).value), 1)),
+					E(I)(c).description ? (x(), f("span", U, T(E(I)(c).description), 1)) : d("", !0),
+					p("span", W, T(E(I)(c).state), 1)
+				], 4)], !0)]),
+				_: 2
+			}, 1032, ["class"])]),
 			_: 2
-		}, 1032, ["class", "onUpdate:open"]))], 4))), 128))], 8, I)) : u("", !0);
+		}, 1032, ["onUpdate:open"]))], 4))), 128))], 8, L)) : d("", !0);
 	}
-}), [["__scopeId", "data-v-8c49028f"]]), J = [
+}), [["__scopeId", "data-v-0d42a418"]]), Y = [
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-label"
-], Y = ["data-state"], X = /* @__PURE__ */ a(/* @__PURE__ */ h({
+], X = ["data-state"], Z = /* @__PURE__ */ i(/* @__PURE__ */ g({
 	__name: "ContinuousRail",
 	props: {
 		segments: {},
@@ -209,36 +216,36 @@ var I = ["aria-label"], L = [
 		regionWidth: { type: Function }
 	},
 	setup(e) {
-		return (t, n) => (b(), d("div", {
+		return (t, n) => (x(), f("div", {
 			class: "continuous-track timeline-rail",
 			role: "progressbar",
 			"aria-valuemin": 0,
 			"aria-valuemax": e.segments.length,
 			"aria-valuenow": e.valueNow,
 			"aria-label": e.railAriaLabel
-		}, [(b(!0), d(s, null, S(e.segments, (t, r) => (b(), d("div", {
+		}, [(x(!0), f(c, null, C(e.segments, (t, r) => (x(), f("div", {
 			key: t.key,
-			class: _(["continuous-region", [
+			class: v(["continuous-region", [
 				`state-${t.state}`,
 				r === 0 && "is-first",
 				r === e.segments.length - 1 && "is-last"
 			]]),
 			"data-state": t.state,
-			style: y({
+			style: b({
 				left: `${e.regionLeft(r) * 100}%`,
 				width: `${e.regionWidth(r) * 100}%`,
 				"--stitch-gradient": e.railGradient,
-				"--stitch-size-x": T(N)(e.regionLeft(r), e.regionWidth(r)).sizeX,
-				"--stitch-pos-x": T(N)(e.regionLeft(r), e.regionWidth(r)).positionX,
-				"--continuous-fill-width": `${T(P)(t) * 100}%`
+				"--stitch-size-x": E(P)(e.regionLeft(r), e.regionWidth(r)).sizeX,
+				"--stitch-pos-x": E(P)(e.regionLeft(r), e.regionWidth(r)).positionX,
+				"--continuous-fill-width": `${E(F)(t) * 100}%`
 			}),
 			"aria-hidden": "true"
-		}, [...n[0] ||= [f("div", { class: "continuous-region-fill" }, null, -1)]], 14, Y))), 128))], 8, J));
+		}, [...n[0] ||= [p("div", { class: "continuous-region-fill" }, null, -1)]], 14, X))), 128))], 8, Y));
 	}
-}), [["__scopeId", "data-v-2eba6ad2"]]), Z = ["aria-label"], Q = { class: "continuous-track-wrap" }, te = {
+}), [["__scopeId", "data-v-6e008bf0"]]), Q = ["aria-label"], te = { class: "continuous-track-wrap" }, ne = {
 	key: 0,
 	class: "continuous-detail"
-}, ne = /* @__PURE__ */ a(/* @__PURE__ */ h({
+}, re = /* @__PURE__ */ i(/* @__PURE__ */ g({
 	__name: "ContinuousTimeline",
 	props: {
 		segments: {},
@@ -255,45 +262,45 @@ var I = ["aria-label"], L = [
 		"click"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = c(() => n.segments ?? []), { regionLeft: a, regionWidth: o, boundaryX: s, continuousAriaValueNow: l } = A(i), h = c(() => M(i.value)), g = c(() => {
+		let n = e, r = t, i = l(() => n.segments ?? []), { regionLeft: a, regionWidth: o, boundaryX: s, continuousAriaValueNow: c } = j(i), u = l(() => N(i.value)), g = l(() => {
 			if (n.ariaLabel) return n.ariaLabel;
 			let e = i.value.map((e) => e.label).filter(Boolean);
 			return e.length > 0 ? `Timeline: ${e.join(", ")}` : "Timeline";
-		}), _ = x(null), v = c(() => {
+		}), _ = S(null), v = l(() => {
 			let e = i.value;
 			if (e.length === 0) return null;
 			let t = _.value ?? n.currentSegmentKey ?? null;
 			return t == null ? null : e.find((e) => e.key === t) ?? null;
-		}), y = c(() => _.value == null ? n.currentSegmentKey == null ? "idle" : "current" : "hovered");
-		function S(e) {
+		}), y = l(() => _.value == null ? n.currentSegmentKey == null ? "idle" : "current" : "hovered");
+		function b(e) {
 			_.value = e.key, r("hover", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function w(e) {
+		function C(e) {
 			_.value === e.key && (_.value = null), r("hoverEnd", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function E(e) {
+		function T(e) {
 			r("click", {
 				key: e.key,
 				segment: e
 			});
 		}
-		return (t, r) => (b(), d("div", {
+		return (t, r) => (x(), f("div", {
 			class: "timeline-row timeline-continuous",
 			role: "group",
 			"aria-label": g.value
-		}, [f("div", Q, [m(X, {
+		}, [p("div", te, [h(Z, {
 			segments: i.value,
-			"rail-gradient": h.value,
+			"rail-gradient": u.value,
 			"rail-aria-label": g.value,
-			"value-now": T(l),
-			"region-left": T(a),
-			"region-width": T(o)
+			"value-now": E(c),
+			"region-left": E(a),
+			"region-width": E(o)
 		}, null, 8, [
 			"segments",
 			"rail-gradient",
@@ -301,18 +308,18 @@ var I = ["aria-label"], L = [
 			"value-now",
 			"region-left",
 			"region-width"
-		]), m(q, {
+		]), h(J, {
 			segments: i.value,
 			"markers-aria-label": g.value,
 			"current-segment-key": e.currentSegmentKey,
 			"disable-popover": e.disablePopover,
-			"boundary-x": T(s),
-			onHover: S,
-			onHoverEnd: w,
-			onClick: E
-		}, p({ _: 2 }, [t.$slots.popoverContent ? {
+			"boundary-x": E(s),
+			onHover: b,
+			onHoverEnd: C,
+			onClick: T
+		}, m({ _: 2 }, [t.$slots.popoverContent ? {
 			name: "popoverContent",
-			fn: D(({ segment: e }) => [C(t.$slots, "popoverContent", { segment: e }, void 0, !0)]),
+			fn: O(({ segment: e }) => [w(t.$slots, "popoverContent", { segment: e }, void 0, !0)]),
 			key: "0"
 		} : void 0]), 1032, [
 			"segments",
@@ -320,17 +327,17 @@ var I = ["aria-label"], L = [
 			"current-segment-key",
 			"disable-popover",
 			"boundary-x"
-		])]), t.$slots.detail ? (b(), d("div", te, [C(t.$slots, "detail", {
+		])]), t.$slots.detail ? (x(), f("div", ne, [w(t.$slots, "detail", {
 			segment: v.value,
 			source: y.value,
 			currentKey: n.currentSegmentKey ?? null,
 			hoveredKey: _.value
-		}, void 0, !0)])) : u("", !0)], 8, Z));
+		}, void 0, !0)])) : d("", !0)], 8, Q));
 	}
-}), [["__scopeId", "data-v-48215043"]]), re = { class: "timeline-row" }, ie = { class: "caret-value fira-code" }, ae = ["data-scrubbing", "aria-valuenow"], oe = {
+}), [["__scopeId", "data-v-dd68996f"]]), ie = { class: "timeline-row" }, ae = { class: "caret-value fira-code" }, oe = ["data-scrubbing", "aria-valuenow"], se = {
 	class: "glass-thumb",
 	"aria-hidden": "true"
-}, $ = /* @__PURE__ */ a(/* @__PURE__ */ h({
+}, ce = /* @__PURE__ */ i(/* @__PURE__ */ g({
 	__name: "ScrubberTimeline",
 	props: {
 		modelValue: { default: 0 },
@@ -341,89 +348,98 @@ var I = ["aria-label"], L = [
 		"scrubStart",
 		"scrubEnd"
 	],
-	setup(a, { emit: o }) {
-		let s = t("timeline-head"), l = t("timeline-fill"), p = t("timeline-press"), m = a, h = o, g = x(), v = x(!1), S = e(() => m.modelValue, {
+	setup(i, { emit: a }) {
+		let o = {
+			response: .34,
+			dampingFraction: .74
+		}, s = {
+			response: .46,
+			dampingFraction: .82
+		}, c = {
+			response: .22,
+			dampingFraction: .7
+		}, u = i, m = a, h = S(), g = S(!1), _ = e(() => u.modelValue, {
+			response: o.response,
+			dampingFraction: o.dampingFraction
+		}), y = e(() => u.modelValue, {
 			response: s.response,
 			dampingFraction: s.dampingFraction
-		}), C = e(() => m.modelValue, {
-			response: l.response,
-			dampingFraction: l.dampingFraction
-		}), D = r({
+		}), C = n({
 			from: 0,
 			to: 1,
 			axis: "width",
 			maxStretch: 1.12,
 			squishLaw: "tanh"
 		});
-		E(() => S.velocity.value, (e) => D.squish(Math.abs(e)));
-		let O = c(() => D.stretch.value), k = n({
-			response: p.response,
-			dampingFraction: p.dampingFraction
-		}), A = c(() => 1 - .04 * k.value.value), j = x(!1), M;
-		function N() {
-			j.value = !1, requestAnimationFrame(() => {
-				j.value = !0, M && clearTimeout(M), M = setTimeout(() => {
-					j.value = !1;
+		D(() => _.velocity.value, (e) => C.squish(Math.abs(e)));
+		let w = l(() => C.stretch.value), O = t({
+			response: c.response,
+			dampingFraction: c.dampingFraction
+		}), k = l(() => 1 - .04 * O.value.value), A = S(!1), j;
+		function M() {
+			A.value = !1, requestAnimationFrame(() => {
+				A.value = !0, j && clearTimeout(j), j = setTimeout(() => {
+					A.value = !1;
 				}, 520);
 			});
 		}
-		function P(e) {
-			let t = g.value.getBoundingClientRect();
+		function N(e) {
+			let t = h.value.getBoundingClientRect();
 			return Math.max(0, Math.min(1, (e.clientX - t.left) / t.width));
 		}
-		function F(e) {
-			e.currentTarget.setPointerCapture(e.pointerId), v.value = !0, k.press(), h("scrubStart"), h("update:modelValue", P(e));
+		function P(e) {
+			e.currentTarget.setPointerCapture(e.pointerId), g.value = !0, O.press(), m("scrubStart"), m("update:modelValue", N(e));
 		}
-		function I(e) {
-			v.value && h("update:modelValue", P(e));
+		function F(e) {
+			g.value && m("update:modelValue", N(e));
 		}
-		function L() {
-			v.value && (v.value = !1, k.release(), N(), h("scrubEnd"));
+		function I() {
+			g.value && (g.value = !1, O.release(), M(), m("scrubEnd"));
 		}
-		function R(e) {
+		function L(e) {
 			let t = e.shiftKey ? .1 : .01;
-			e.key === "ArrowRight" || e.key === "ArrowUp" ? (e.preventDefault(), h("update:modelValue", Math.min(1, m.modelValue + t)), N()) : (e.key === "ArrowLeft" || e.key === "ArrowDown") && (e.preventDefault(), h("update:modelValue", Math.max(0, m.modelValue - t)), N());
+			e.key === "ArrowRight" || e.key === "ArrowUp" ? (e.preventDefault(), m("update:modelValue", Math.min(1, u.modelValue + t)), M()) : (e.key === "ArrowLeft" || e.key === "ArrowDown") && (e.preventDefault(), m("update:modelValue", Math.max(0, u.modelValue - t)), M());
 		}
-		let z = c(() => {
-			let e = S.value.value, t = O.value, n = 1 / t * A.value;
+		let R = l(() => {
+			let e = _.value.value, t = w.value, n = 1 / t * k.value;
 			return {
-				transform: `translateX(calc(${(e * 100).toFixed(3)}cqw - 50%)) scale(${(t * A.value).toFixed(4)}, ${n.toFixed(4)})`,
-				"--flex-vel": D.flexVel.value.toFixed(4)
+				transform: `translateX(calc(${(e * 100).toFixed(3)}cqw - 50%)) scale(${(t * k.value).toFixed(4)}, ${n.toFixed(4)})`,
+				"--flex-vel": C.flexVel.value.toFixed(4)
 			};
-		}), B = c(() => ({ width: `${(C.value.value * 100).toFixed(3)}%` }));
-		return (e, t) => (b(), d("div", re, [a.label ? (b(), d("div", {
+		}), z = l(() => ({ width: `${(y.value.value * 100).toFixed(3)}%` }));
+		return (e, t) => (x(), f("div", ie, [i.label ? (x(), f("div", {
 			key: 0,
 			class: "timeline-caret",
-			style: y({ left: a.modelValue * 100 + "%" })
-		}, [f("span", ie, w(a.label), 1)], 4)) : u("", !0), f("div", {
+			style: b({ left: i.modelValue * 100 + "%" })
+		}, [p("span", ae, T(i.label), 1)], 4)) : d("", !0), p("div", {
 			ref_key: "trackRef",
-			ref: g,
-			class: _(["glass-track timeline-rail", { "is-flooding": j.value }]),
-			"data-scrubbing": v.value ? "" : void 0,
+			ref: h,
+			class: v(["glass-track timeline-rail", { "is-flooding": A.value }]),
+			"data-scrubbing": g.value ? "" : void 0,
 			role: "slider",
 			tabindex: "0",
-			"aria-valuenow": Number(a.modelValue ?? 0),
+			"aria-valuenow": Number(i.modelValue ?? 0),
 			"aria-valuemin": "0",
 			"aria-valuemax": "1",
 			"aria-label": "Timeline",
-			onPointerdown: F,
-			onPointermove: I,
-			onPointerup: L,
-			onPointercancel: L,
-			onKeydown: R
-		}, [f("div", {
+			onPointerdown: P,
+			onPointermove: F,
+			onPointerup: I,
+			onPointercancel: I,
+			onKeydown: L
+		}, [p("div", {
 			class: "glass-fill",
-			style: y(B.value)
-		}, null, 4), f("div", {
+			style: b(z.value)
+		}, null, 4), p("div", {
 			class: "glass-thumb-seat",
-			style: y(z.value)
-		}, [ee(f("div", oe, null, 512), [[T(i)]])], 4)], 42, ae)]));
+			style: b(R.value)
+		}, [ee(p("div", se, null, 512), [[E(r)]])], 4)], 42, oe)]));
 	}
-}), [["__scopeId", "data-v-bcb355ab"]]), se = {
+}), [["__scopeId", "data-v-92398082"]]), le = {
 	class: "timeline-row timeline-segmented",
 	role: "group",
 	"aria-label": "Timeline progress"
-}, ce = { class: "segmented-track timeline-rail" }, le = ["data-state"], ue = [
+}, ue = { class: "segmented-track timeline-rail" }, $ = ["data-state"], de = [
 	"aria-label",
 	"data-state",
 	"onMouseenter",
@@ -432,7 +448,7 @@ var I = ["aria-label"], L = [
 	"onBlur",
 	"onClick",
 	"onKeydown"
-], de = { class: "sr-only" }, fe = /* @__PURE__ */ a(/* @__PURE__ */ h({
+], fe = { class: "sr-only" }, pe = /* @__PURE__ */ i(/* @__PURE__ */ g({
 	__name: "SegmentedTimeline",
 	props: { segments: {} },
 	emits: [
@@ -441,7 +457,7 @@ var I = ["aria-label"], L = [
 		"click"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = c(() => n.segments ?? []);
+		let n = e, r = t, i = l(() => n.segments ?? []);
 		function a(e) {
 			return e.gradient && typeof e.gradient == "object" ? e.gradient.to : "var(--cel-accent)";
 		}
@@ -451,7 +467,7 @@ var I = ["aria-label"], L = [
 				segment: e
 			});
 		}
-		function l(e) {
+		function s(e) {
 			r("hoverEnd", {
 				key: e.key,
 				segment: e
@@ -463,41 +479,41 @@ var I = ["aria-label"], L = [
 				segment: e
 			});
 		}
-		function p(e, t) {
+		function d(e, t) {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r("click", {
 				key: t.key,
 				segment: t
 			}));
 		}
-		return (e, t) => (b(), d("div", se, [f("div", ce, [(b(!0), d(s, null, S(i.value, (e, t) => (b(), d("div", {
+		return (e, t) => (x(), f("div", le, [p("div", ue, [(x(!0), f(c, null, C(i.value, (e, t) => (x(), f("div", {
 			key: e.key,
-			class: _(["segmented-cell", [
+			class: v(["segmented-cell", [
 				`state-${e.state}`,
 				t === 0 && "is-first",
 				t === i.value.length - 1 && "is-last"
 			]]),
 			"data-state": e.state
-		}, [f("div", {
+		}, [p("div", {
 			class: "segmented-band timeline-cel",
-			style: y({
+			style: b({
 				"--cel-accent": a(e),
-				width: `${T(O)(e) * 100}%`
+				width: `${E(k)(e) * 100}%`
 			}),
 			"aria-hidden": "true"
-		}, null, 4), f("button", {
+		}, null, 4), p("button", {
 			type: "button",
 			class: "segmented-dot",
 			"aria-label": `${e.label}: ${e.state}`,
 			"data-state": e.state,
 			onMouseenter: (t) => o(e),
-			onMouseleave: (t) => l(e),
+			onMouseleave: (t) => s(e),
 			onFocus: (t) => o(e),
-			onBlur: (t) => l(e),
+			onBlur: (t) => s(e),
 			onClick: (t) => u(e),
-			onKeydown: (t) => p(t, e)
-		}, [f("span", de, w(e.label), 1)], 40, ue)], 10, le))), 128))])]));
+			onKeydown: (t) => d(t, e)
+		}, [p("span", fe, T(e.label), 1)], 40, de)], 10, $))), 128))])]));
 	}
-}), [["__scopeId", "data-v-94bc758d"]]), pe = /* @__PURE__ */ h({
+}), [["__scopeId", "data-v-648d62e4"]]), me = /* @__PURE__ */ g({
 	__name: "GlassTimeline",
 	props: {
 		variant: { default: "scrubber" },
@@ -521,7 +537,7 @@ var I = ["aria-label"], L = [
 	],
 	setup(e, { emit: t }) {
 		let n = e, r = t;
-		return (t, i) => e.variant === "continuous" ? (b(), l(ne, {
+		return (t, i) => e.variant === "continuous" ? (x(), u(re, {
 			key: 0,
 			segments: n.segments,
 			"aria-label": n.ariaLabel,
@@ -530,25 +546,25 @@ var I = ["aria-label"], L = [
 			onHover: i[0] ||= (e) => r("hover", e),
 			onHoverEnd: i[1] ||= (e) => r("hoverEnd", e),
 			onClick: i[2] ||= (e) => r("click", e)
-		}, p({
-			popoverContent: D((e) => [C(t.$slots, "popoverContent", v(g(e)))]),
+		}, m({
+			popoverContent: O((e) => [w(t.$slots, "popoverContent", y(_(e)))]),
 			_: 2
 		}, [t.$slots.detail ? {
 			name: "detail",
-			fn: D((e) => [C(t.$slots, "detail", v(g(e)))]),
+			fn: O((e) => [w(t.$slots, "detail", y(_(e)))]),
 			key: "0"
 		} : void 0]), 1032, [
 			"segments",
 			"aria-label",
 			"current-segment-key",
 			"disable-popover"
-		])) : e.variant === "segmented" ? (b(), l(fe, {
+		])) : e.variant === "segmented" ? (x(), u(pe, {
 			key: 1,
 			segments: n.segments,
 			onHover: i[3] ||= (e) => r("hover", e),
 			onHoverEnd: i[4] ||= (e) => r("hoverEnd", e),
 			onClick: i[5] ||= (e) => r("click", e)
-		}, null, 8, ["segments"])) : (b(), l($, {
+		}, null, 8, ["segments"])) : (x(), u(ce, {
 			key: 2,
 			"model-value": n.modelValue,
 			label: n.label,
@@ -559,4 +575,4 @@ var I = ["aria-label"], L = [
 	}
 });
 //#endregion
-export { pe as GlassTimeline };
+export { me as GlassTimeline };