@mkbabb/glass-ui 4.1.0 → 4.2.0

package/dist/timeline.js

@@ -1,79 +1,76 @@
-import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { t } from "./HoverPopover-BcIxvyqZ.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";
+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 S(e) {
-	if (typeof e.gradient == "string") return e.gradient;
-	if (e.gradient && typeof e.gradient == "object") {
-		let t = e.gradient;
-		return `linear-gradient(90deg, ${t.from}, ${t.to})`;
-	}
-	return "var(--timeline-segment-default-gradient, linear-gradient(90deg, var(--surface-tint-15), var(--surface-tint-25)))";
-}
-function C(e) {
+function O(e) {
 	return typeof e.progress == "number" ? Math.max(0, Math.min(1, e.progress)) : e.state === "completed" ? 1 : e.state === "active" ? .5 : 0;
 }
-function w(e) {
+function k(e) {
 	return typeof e.weight == "number" && e.weight > 0 ? e.weight : 1;
 }
-function ee(e) {
-	let t = r(() => {
-		let t = e.value.reduce((e, t) => e + w(t), 0);
+function A(e) {
+	let t = c(() => {
+		let t = e.value.reduce((e, t) => e + k(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 += w(n));
+			n && (r += k(n));
 		}
 		return r / t.value;
 	}
-	function i(n) {
+	function r(n) {
 		let r = e.value[n];
-		return r ? w(r) / t.value : 0;
+		return r ? k(r) / t.value : 0;
 	}
-	function a(e) {
-		return n(e) + i(e);
+	function i(e) {
+		return n(e) + r(e);
 	}
 	return {
 		totalWeight: t,
 		regionLeft: n,
-		regionWidth: i,
-		boundaryX: a,
-		continuousAriaValueNow: r(() => {
+		regionWidth: r,
+		boundaryX: i,
+		continuousAriaValueNow: c(() => {
 			let t = 0;
-			for (let n of e.value) n.state === "completed" ? t += 1 : n.state === "active" && (t += C(n));
+			for (let n of e.value) n.state === "completed" ? t += 1 : n.state === "active" && (t += O(n));
 			return Math.round(t * 100) / 100;
 		})
 	};
 }
-function T(e) {
+function j(e) {
 	return e.gradient && typeof e.gradient == "object" ? e.gradient.to : "var(--timeline-segment-default-gradient-color, var(--surface-tint-25))";
 }
-function E(e) {
+function M(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 = T(e[0]);
+		let t = j(e[0]);
 		return `linear-gradient(90deg, ${t}, ${t})`;
 	}
-	let t = e.reduce((e, t) => e + w(t), 0) || 1, n = [], r = 0;
+	let t = e.reduce((e, t) => e + k(t), 0) || 1, n = [], r = 0;
 	return e.forEach((i, a) => {
-		let o = w(i), s = (r + o / 2) / t, c = a === 0 ? 0 : a === e.length - 1 ? 1 : s;
-		n.push(`${T(i)} ${(c * 100).toFixed(3)}%`), r += o;
+		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;
 	}), `linear-gradient(90deg, ${n.join(", ")})`;
 }
-function D(e, t) {
+function N(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 O(e) {
-	return C(e);
+function P(e) {
+	return O(e);
 }
-function k(e) {
+function F(e) {
 	let t = e.value ?? null;
 	return {
 		label: t?.label ?? e.label,
@@ -84,26 +81,26 @@ function k(e) {
 }
 //#endregion
 //#region src/components/custom/timeline/ContinuousMarkers.vue?vue&type=script&setup=true&lang.ts
-var A = ["aria-label"], j = [
+var I = ["aria-label"], L = [
 	"aria-label",
 	"data-state",
 	"data-current",
 	"data-completed",
 	"onClick",
 	"onKeydown"
-], M = { class: "sr-only" }, N = {
+], R = { class: "sr-only" }, z = {
 	key: 0,
 	class: "continuous-dot-check",
 	viewBox: "0 0 24 24",
 	fill: "none",
 	"aria-hidden": "true"
-}, P = { class: "timeline-popover-label" }, F = {
+}, B = { class: "timeline-popover-label" }, V = {
 	key: 0,
 	class: "timeline-popover-value tabular-nums"
-}, I = {
+}, H = {
 	key: 1,
 	class: "timeline-popover-description"
-}, L = { class: "timeline-popover-state" }, R = [
+}, U = { class: "timeline-popover-state" }, W = [
 	"aria-label",
 	"data-state",
 	"data-current",
@@ -114,13 +111,13 @@ var A = ["aria-label"], j = [
 	"onBlur",
 	"onClick",
 	"onKeydown"
-], z = { class: "sr-only" }, B = {
+], G = { class: "sr-only" }, K = {
 	key: 0,
 	class: "continuous-dot-check",
 	viewBox: "0 0 24 24",
 	fill: "none",
 	"aria-hidden": "true"
-}, V = /* @__PURE__ */ e(/* @__PURE__ */ u({
+}, q = /* @__PURE__ */ a(/* @__PURE__ */ h({
 	__name: "ContinuousMarkers",
 	props: {
 		segments: {},
@@ -134,74 +131,74 @@ var A = ["aria-label"], j = [
 		"hoverEnd",
 		"click"
 	],
-	setup(e, { emit: r }) {
-		let c = r;
-		function l(e, t) {
-			c(t ? "hover" : "hoverEnd", e);
+	setup(e, { emit: t }) {
+		let n = t;
+		function r(e, t) {
+			n(t ? "hover" : "hoverEnd", e);
 		}
-		function u(e, t) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), c("click", t));
+		function i(e, t) {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n("click", t));
 		}
-		return (r, d) => e.segments.length > 0 ? (h(), o("ul", {
+		return (t, a) => e.segments.length > 0 ? (b(), d("ul", {
 			key: 0,
 			class: "continuous-markers",
 			role: "list",
 			"aria-label": `${e.markersAriaLabel} — phase markers`
-		}, [(h(!0), o(n, null, _(e.segments, (n, p) => (h(), o("li", {
-			key: `dot-li-${n.key}`,
+		}, [(b(!0), d(s, null, S(e.segments, (s, c) => (b(), d("li", {
+			key: `dot-li-${s.key}`,
 			class: "continuous-marker",
 			role: "listitem",
-			style: m({ left: `${e.boundaryX(p) * 100}%` })
-		}, [e.disablePopover ? (h(), o("button", {
+			style: y({ left: `${e.boundaryX(c) * 100}%` })
+		}, [e.disablePopover ? (b(), d("button", {
 			key: 1,
 			type: "button",
 			class: "continuous-dot segmented-dot",
-			"aria-label": `${n.label}: ${n.state}`,
-			"data-state": n.state,
-			"data-current": n.key === e.currentSegmentKey || void 0,
-			"data-completed": n.state === "completed" || void 0,
-			onMouseenter: (e) => c("hover", n),
-			onMouseleave: (e) => c("hoverEnd", n),
-			onFocus: (e) => c("hover", n),
-			onBlur: (e) => c("hoverEnd", n),
-			onClick: (e) => c("click", n),
-			onKeydown: (e) => u(e, n)
-		}, [s("span", z, y(n.label), 1), n.state === "completed" ? (h(), o("svg", B, [...d[1] ||= [s("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : a("", !0)], 40, R)) : (h(), i(t, {
+			"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, {
 			key: 0,
 			side: "top",
 			"side-offset": 10,
 			"hover-open-delay": 120,
 			"close-delay": 160,
-			class: f(`timeline-popover timeline-popover-${n.key}`),
-			"onUpdate:open": (e) => l(n, e)
+			class: _(`timeline-popover timeline-popover-${s.key}`),
+			"onUpdate:open": (e) => r(s, e)
 		}, {
-			trigger: x(() => [s("button", {
+			trigger: D(() => [f("button", {
 				type: "button",
 				class: "continuous-dot segmented-dot",
-				"aria-label": `${n.label}: ${n.state}`,
-				"data-state": n.state,
-				"data-current": n.key === e.currentSegmentKey || void 0,
-				"data-completed": n.state === "completed" || void 0,
-				onClick: (e) => c("click", n),
-				onKeydown: (e) => u(e, n)
-			}, [s("span", M, y(n.label), 1), n.state === "completed" ? (h(), o("svg", N, [...d[0] ||= [s("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : a("", !0)], 40, j)]),
-			content: x(() => [v(r.$slots, "popoverContent", { segment: n }, () => [s("div", {
+				"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: m({ "--popover-tint": typeof n.gradient == "object" && n.gradient ? n.gradient.to : "var(--foreground)" })
+				style: y({ "--popover-tint": typeof s.gradient == "object" && s.gradient ? s.gradient.to : "var(--foreground)" })
 			}, [
-				s("span", P, y(b(k)(n).label), 1),
-				b(k)(n).value == null ? a("", !0) : (h(), o("span", F, y(b(k)(n).value), 1)),
-				b(k)(n).description ? (h(), o("span", I, y(b(k)(n).description), 1)) : a("", !0),
-				s("span", L, y(b(k)(n).state), 1)
+				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)]),
 			_: 2
-		}, 1032, ["class", "onUpdate:open"]))], 4))), 128))], 8, A)) : a("", !0);
+		}, 1032, ["class", "onUpdate:open"]))], 4))), 128))], 8, I)) : u("", !0);
 	}
-}), [["__scopeId", "data-v-54dadfb5"]]), H = [
+}), [["__scopeId", "data-v-8c49028f"]]), J = [
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-label"
-], U = ["data-state"], W = /* @__PURE__ */ e(/* @__PURE__ */ u({
+], Y = ["data-state"], X = /* @__PURE__ */ a(/* @__PURE__ */ h({
 	__name: "ContinuousRail",
 	props: {
 		segments: {},
@@ -212,36 +209,36 @@ var A = ["aria-label"], j = [
 		regionWidth: { type: Function }
 	},
 	setup(e) {
-		return (t, r) => (h(), o("div", {
-			class: "continuous-track",
+		return (t, n) => (b(), d("div", {
+			class: "continuous-track timeline-rail",
 			role: "progressbar",
 			"aria-valuemin": 0,
 			"aria-valuemax": e.segments.length,
 			"aria-valuenow": e.valueNow,
 			"aria-label": e.railAriaLabel
-		}, [(h(!0), o(n, null, _(e.segments, (t, n) => (h(), o("div", {
+		}, [(b(!0), d(s, null, S(e.segments, (t, r) => (b(), d("div", {
 			key: t.key,
-			class: f(["continuous-region", [
+			class: _(["continuous-region", [
 				`state-${t.state}`,
-				n === 0 && "is-first",
-				n === e.segments.length - 1 && "is-last"
+				r === 0 && "is-first",
+				r === e.segments.length - 1 && "is-last"
 			]]),
 			"data-state": t.state,
-			style: m({
-				left: `${e.regionLeft(n) * 100}%`,
-				width: `${e.regionWidth(n) * 100}%`,
+			style: y({
+				left: `${e.regionLeft(r) * 100}%`,
+				width: `${e.regionWidth(r) * 100}%`,
 				"--stitch-gradient": e.railGradient,
-				"--stitch-size-x": b(D)(e.regionLeft(n), e.regionWidth(n)).sizeX,
-				"--stitch-pos-x": b(D)(e.regionLeft(n), e.regionWidth(n)).positionX,
-				"--continuous-fill-width": `${b(O)(t) * 100}%`
+				"--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}%`
 			}),
 			"aria-hidden": "true"
-		}, [...r[0] ||= [s("div", { class: "continuous-region-fill" }, null, -1)]], 14, U))), 128))], 8, H));
+		}, [...n[0] ||= [f("div", { class: "continuous-region-fill" }, null, -1)]], 14, Y))), 128))], 8, J));
 	}
-}), [["__scopeId", "data-v-e129d308"]]), G = ["aria-label"], K = { class: "continuous-track-wrap" }, q = {
+}), [["__scopeId", "data-v-2eba6ad2"]]), Z = ["aria-label"], Q = { class: "continuous-track-wrap" }, te = {
 	key: 0,
 	class: "continuous-detail"
-}, J = /* @__PURE__ */ e(/* @__PURE__ */ u({
+}, ne = /* @__PURE__ */ a(/* @__PURE__ */ h({
 	__name: "ContinuousTimeline",
 	props: {
 		segments: {},
@@ -258,45 +255,45 @@ var A = ["aria-label"], j = [
 		"click"
 	],
 	setup(e, { emit: t }) {
-		let n = e, i = t, u = r(() => n.segments ?? []), { regionLeft: d, regionWidth: f, boundaryX: p, continuousAriaValueNow: m } = ee(u), _ = r(() => E(u.value)), y = r(() => {
+		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(() => {
 			if (n.ariaLabel) return n.ariaLabel;
-			let e = u.value.map((e) => e.label).filter(Boolean);
+			let e = i.value.map((e) => e.label).filter(Boolean);
 			return e.length > 0 ? `Timeline: ${e.join(", ")}` : "Timeline";
-		}), S = g(null), C = r(() => {
-			let e = u.value;
+		}), _ = x(null), v = c(() => {
+			let e = i.value;
 			if (e.length === 0) return null;
-			let t = S.value ?? n.currentSegmentKey ?? null;
+			let t = _.value ?? n.currentSegmentKey ?? null;
 			return t == null ? null : e.find((e) => e.key === t) ?? null;
-		}), w = r(() => S.value == null ? n.currentSegmentKey == null ? "idle" : "current" : "hovered");
-		function T(e) {
-			S.value = e.key, i("hover", {
+		}), y = c(() => _.value == null ? n.currentSegmentKey == null ? "idle" : "current" : "hovered");
+		function S(e) {
+			_.value = e.key, r("hover", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function D(e) {
-			S.value === e.key && (S.value = null), i("hoverEnd", {
+		function w(e) {
+			_.value === e.key && (_.value = null), r("hoverEnd", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function O(e) {
-			i("click", {
+		function E(e) {
+			r("click", {
 				key: e.key,
 				segment: e
 			});
 		}
-		return (t, r) => (h(), o("div", {
+		return (t, r) => (b(), d("div", {
 			class: "timeline-row timeline-continuous",
 			role: "group",
-			"aria-label": y.value
-		}, [s("div", K, [l(W, {
-			segments: u.value,
-			"rail-gradient": _.value,
-			"rail-aria-label": y.value,
-			"value-now": b(m),
-			"region-left": b(d),
-			"region-width": b(f)
+			"aria-label": g.value
+		}, [f("div", Q, [m(X, {
+			segments: i.value,
+			"rail-gradient": h.value,
+			"rail-aria-label": g.value,
+			"value-now": T(l),
+			"region-left": T(a),
+			"region-width": T(o)
 		}, null, 8, [
 			"segments",
 			"rail-gradient",
@@ -304,18 +301,18 @@ var A = ["aria-label"], j = [
 			"value-now",
 			"region-left",
 			"region-width"
-		]), l(V, {
-			segments: u.value,
-			"markers-aria-label": y.value,
+		]), m(q, {
+			segments: i.value,
+			"markers-aria-label": g.value,
 			"current-segment-key": e.currentSegmentKey,
 			"disable-popover": e.disablePopover,
-			"boundary-x": b(p),
-			onHover: T,
-			onHoverEnd: D,
-			onClick: O
-		}, c({ _: 2 }, [t.$slots.popoverContent ? {
+			"boundary-x": T(s),
+			onHover: S,
+			onHoverEnd: w,
+			onClick: E
+		}, p({ _: 2 }, [t.$slots.popoverContent ? {
 			name: "popoverContent",
-			fn: x(({ segment: e }) => [v(t.$slots, "popoverContent", { segment: e }, void 0, !0)]),
+			fn: D(({ segment: e }) => [C(t.$slots, "popoverContent", { segment: e }, void 0, !0)]),
 			key: "0"
 		} : void 0]), 1032, [
 			"segments",
@@ -323,14 +320,17 @@ var A = ["aria-label"], j = [
 			"current-segment-key",
 			"disable-popover",
 			"boundary-x"
-		])]), t.$slots.detail ? (h(), o("div", q, [v(t.$slots, "detail", {
-			segment: C.value,
-			source: w.value,
+		])]), t.$slots.detail ? (b(), d("div", te, [C(t.$slots, "detail", {
+			segment: v.value,
+			source: y.value,
 			currentKey: n.currentSegmentKey ?? null,
-			hoveredKey: S.value
-		}, void 0, !0)])) : a("", !0)], 8, G));
+			hoveredKey: _.value
+		}, void 0, !0)])) : u("", !0)], 8, Z));
 	}
-}), [["__scopeId", "data-v-48215043"]]), Y = { class: "timeline-row" }, X = { class: "caret-value fira-code" }, Z = ["aria-valuenow"], Q = /* @__PURE__ */ e(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-48215043"]]), re = { class: "timeline-row" }, ie = { class: "caret-value fira-code" }, ae = ["data-scrubbing", "aria-valuenow"], oe = {
+	class: "glass-thumb",
+	"aria-hidden": "true"
+}, $ = /* @__PURE__ */ a(/* @__PURE__ */ h({
 	__name: "ScrubberTimeline",
 	props: {
 		modelValue: { default: 0 },
@@ -341,57 +341,89 @@ var A = ["aria-label"], j = [
 		"scrubStart",
 		"scrubEnd"
 	],
-	setup(e, { emit: t }) {
-		let n = e, r = t, i = g(), c = g(!1);
-		function l(e) {
-			let t = i.value.getBoundingClientRect();
+	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, {
+			response: s.response,
+			dampingFraction: s.dampingFraction
+		}), C = e(() => m.modelValue, {
+			response: l.response,
+			dampingFraction: l.dampingFraction
+		}), D = r({
+			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;
+				}, 520);
+			});
+		}
+		function P(e) {
+			let t = g.value.getBoundingClientRect();
 			return Math.max(0, Math.min(1, (e.clientX - t.left) / t.width));
 		}
-		function u(e) {
-			e.currentTarget.setPointerCapture(e.pointerId), c.value = !0, r("scrubStart"), r("update:modelValue", l(e));
+		function F(e) {
+			e.currentTarget.setPointerCapture(e.pointerId), v.value = !0, k.press(), h("scrubStart"), h("update:modelValue", P(e));
 		}
-		function d(e) {
-			c.value && r("update:modelValue", l(e));
+		function I(e) {
+			v.value && h("update:modelValue", P(e));
 		}
-		function f() {
-			c.value = !1, r("scrubEnd");
+		function L() {
+			v.value && (v.value = !1, k.release(), N(), h("scrubEnd"));
 		}
-		function p(e) {
+		function R(e) {
 			let t = e.shiftKey ? .1 : .01;
-			e.key === "ArrowRight" || e.key === "ArrowUp" ? (e.preventDefault(), r("update:modelValue", Math.min(1, n.modelValue + t))) : (e.key === "ArrowLeft" || e.key === "ArrowDown") && (e.preventDefault(), r("update:modelValue", Math.max(0, n.modelValue - t)));
+			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());
 		}
-		return (t, n) => (h(), o("div", Y, [e.label ? (h(), o("div", {
+		let z = c(() => {
+			let e = S.value.value, t = O.value, n = 1 / t * A.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)
+			};
+		}), B = c(() => ({ width: `${(C.value.value * 100).toFixed(3)}%` }));
+		return (e, t) => (b(), d("div", re, [a.label ? (b(), d("div", {
 			key: 0,
 			class: "timeline-caret",
-			style: m({ left: e.modelValue * 100 + "%" })
-		}, [s("span", X, y(e.label), 1)], 4)) : a("", !0), s("div", {
+			style: y({ left: a.modelValue * 100 + "%" })
+		}, [f("span", ie, w(a.label), 1)], 4)) : u("", !0), f("div", {
 			ref_key: "trackRef",
-			ref: i,
-			class: "glass-track",
+			ref: g,
+			class: _(["glass-track timeline-rail", { "is-flooding": j.value }]),
+			"data-scrubbing": v.value ? "" : void 0,
 			role: "slider",
 			tabindex: "0",
-			"aria-valuenow": Number(e.modelValue ?? 0),
+			"aria-valuenow": Number(a.modelValue ?? 0),
 			"aria-valuemin": "0",
 			"aria-valuemax": "1",
 			"aria-label": "Timeline",
-			onPointerdown: u,
-			onPointermove: d,
-			onPointerup: f,
-			onPointercancel: f,
-			onKeydown: p
-		}, [s("div", {
+			onPointerdown: F,
+			onPointermove: I,
+			onPointerup: L,
+			onPointercancel: L,
+			onKeydown: R
+		}, [f("div", {
 			class: "glass-fill",
-			style: m({ width: e.modelValue * 100 + "%" })
-		}, null, 4), s("div", {
-			class: "glass-thumb",
-			style: m({ left: e.modelValue * 100 + "%" })
-		}, null, 4)], 40, Z)]));
+			style: y(B.value)
+		}, null, 4), f("div", {
+			class: "glass-thumb-seat",
+			style: y(z.value)
+		}, [ee(f("div", oe, null, 512), [[T(i)]])], 4)], 42, ae)]));
 	}
-}), [["__scopeId", "data-v-a206e2d2"]]), $ = {
+}), [["__scopeId", "data-v-bcb355ab"]]), se = {
 	class: "timeline-row timeline-segmented",
 	role: "group",
 	"aria-label": "Timeline progress"
-}, te = { class: "segmented-track" }, ne = ["data-state"], re = [
+}, ce = { class: "segmented-track timeline-rail" }, le = ["data-state"], ue = [
 	"aria-label",
 	"data-state",
 	"onMouseenter",
@@ -400,7 +432,7 @@ var A = ["aria-label"], j = [
 	"onBlur",
 	"onClick",
 	"onKeydown"
-], ie = { class: "sr-only" }, ae = /* @__PURE__ */ e(/* @__PURE__ */ u({
+], de = { class: "sr-only" }, fe = /* @__PURE__ */ a(/* @__PURE__ */ h({
 	__name: "SegmentedTimeline",
 	props: { segments: {} },
 	emits: [
@@ -409,60 +441,63 @@ var A = ["aria-label"], j = [
 		"click"
 	],
 	setup(e, { emit: t }) {
-		let i = e, a = t, c = r(() => i.segments ?? []);
-		function l(e) {
-			a("hover", {
+		let n = e, r = t, i = c(() => n.segments ?? []);
+		function a(e) {
+			return e.gradient && typeof e.gradient == "object" ? e.gradient.to : "var(--cel-accent)";
+		}
+		function o(e) {
+			r("hover", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function u(e) {
-			a("hoverEnd", {
+		function l(e) {
+			r("hoverEnd", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function d(e) {
-			a("click", {
+		function u(e) {
+			r("click", {
 				key: e.key,
 				segment: e
 			});
 		}
 		function p(e, t) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a("click", {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r("click", {
 				key: t.key,
 				segment: t
 			}));
 		}
-		return (e, t) => (h(), o("div", $, [s("div", te, [(h(!0), o(n, null, _(c.value, (e, t) => (h(), o("div", {
+		return (e, t) => (b(), d("div", se, [f("div", ce, [(b(!0), d(s, null, S(i.value, (e, t) => (b(), d("div", {
 			key: e.key,
-			class: f(["segmented-cell", [
+			class: _(["segmented-cell", [
 				`state-${e.state}`,
 				t === 0 && "is-first",
-				t === c.value.length - 1 && "is-last"
+				t === i.value.length - 1 && "is-last"
 			]]),
 			"data-state": e.state
-		}, [s("div", {
-			class: "segmented-band",
-			style: m({
-				background: b(S)(e),
-				width: `${b(C)(e) * 100}%`
+		}, [f("div", {
+			class: "segmented-band timeline-cel",
+			style: y({
+				"--cel-accent": a(e),
+				width: `${T(O)(e) * 100}%`
 			}),
 			"aria-hidden": "true"
-		}, null, 4), s("button", {
+		}, null, 4), f("button", {
 			type: "button",
 			class: "segmented-dot",
 			"aria-label": `${e.label}: ${e.state}`,
 			"data-state": e.state,
-			onMouseenter: (t) => l(e),
-			onMouseleave: (t) => u(e),
-			onFocus: (t) => l(e),
-			onBlur: (t) => u(e),
-			onClick: (t) => d(e),
+			onMouseenter: (t) => o(e),
+			onMouseleave: (t) => l(e),
+			onFocus: (t) => o(e),
+			onBlur: (t) => l(e),
+			onClick: (t) => u(e),
 			onKeydown: (t) => p(t, e)
-		}, [s("span", ie, y(e.label), 1)], 40, re)], 10, ne))), 128))])]));
+		}, [f("span", de, w(e.label), 1)], 40, ue)], 10, le))), 128))])]));
 	}
-}), [["__scopeId", "data-v-2db316ec"]]), oe = /* @__PURE__ */ u({
+}), [["__scopeId", "data-v-94bc758d"]]), pe = /* @__PURE__ */ h({
 	__name: "GlassTimeline",
 	props: {
 		variant: { default: "scrubber" },
@@ -486,42 +521,42 @@ var A = ["aria-label"], j = [
 	],
 	setup(e, { emit: t }) {
 		let n = e, r = t;
-		return (t, a) => e.variant === "continuous" ? (h(), i(J, {
+		return (t, i) => e.variant === "continuous" ? (b(), l(ne, {
 			key: 0,
 			segments: n.segments,
 			"aria-label": n.ariaLabel,
 			"current-segment-key": n.currentSegmentKey,
 			"disable-popover": n.disablePopover,
-			onHover: a[0] ||= (e) => r("hover", e),
-			onHoverEnd: a[1] ||= (e) => r("hoverEnd", e),
-			onClick: a[2] ||= (e) => r("click", e)
-		}, c({
-			popoverContent: x((e) => [v(t.$slots, "popoverContent", p(d(e)))]),
+			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)))]),
 			_: 2
 		}, [t.$slots.detail ? {
 			name: "detail",
-			fn: x((e) => [v(t.$slots, "detail", p(d(e)))]),
+			fn: D((e) => [C(t.$slots, "detail", v(g(e)))]),
 			key: "0"
 		} : void 0]), 1032, [
 			"segments",
 			"aria-label",
 			"current-segment-key",
 			"disable-popover"
-		])) : e.variant === "segmented" ? (h(), i(ae, {
+		])) : e.variant === "segmented" ? (b(), l(fe, {
 			key: 1,
 			segments: n.segments,
-			onHover: a[3] ||= (e) => r("hover", e),
-			onHoverEnd: a[4] ||= (e) => r("hoverEnd", e),
-			onClick: a[5] ||= (e) => r("click", e)
-		}, null, 8, ["segments"])) : (h(), i(Q, {
+			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($, {
 			key: 2,
 			"model-value": n.modelValue,
 			label: n.label,
-			"onUpdate:modelValue": a[6] ||= (e) => r("update:modelValue", e),
-			onScrubStart: a[7] ||= (e) => r("scrubStart"),
-			onScrubEnd: a[8] ||= (e) => r("scrubEnd")
+			"onUpdate:modelValue": i[6] ||= (e) => r("update:modelValue", e),
+			onScrubStart: i[7] ||= (e) => r("scrubStart"),
+			onScrubEnd: i[8] ||= (e) => r("scrubEnd")
 		}, null, 8, ["model-value", "label"]));
 	}
 });
 //#endregion
-export { oe as GlassTimeline };
+export { pe as GlassTimeline };