@mkbabb/glass-ui 6.0.0 → 8.0.0

package/dist/timeline.js

@@ -1,578 +1,287 @@
-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-CQFmLNzA.js";
-import { t as i } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { n as a, r as o, t as s } from "./popover-WMgyRSyN.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;
+import { t as e } from "./useSpring-9u2_shxV.js";
+import { n as t } from "./springPresets-Cbe0Voqg.js";
+import { t as n } from "./useLiquidPress-h1scrPtP.js";
+import { t as r } from "./useLiquidFlex-TJZmRqyY.js";
+import { t as i } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, renderSlot as ee, unref as g, watch as _ } from "vue";
+function v(e) {
+	return Number.isFinite(e) ? e < 0 ? 0 : e > 1 ? 1 : e : 0;
 }
-function A(e) {
-	return typeof e.weight == "number" && e.weight > 0 ? e.weight : 1;
+function y(e) {
+	return typeof e.at == "number" && Number.isFinite(e.at);
 }
-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 += A(n));
+function b(e) {
+	let t = e.length;
+	if (t === 0) return [];
+	let n = 0, r = e.map((e) => {
+		if (!y(e)) return null;
+		let t = v(e.at), r = t < n ? n : t;
+		return n = r, r;
+	}), i = Array(t), a = 0, o = 0;
+	for (; a < t;) {
+		let e = r[a];
+		if (e != null) {
+			i[a] = e, o = e, a += 1;
+			continue;
 		}
-		return r / t.value;
-	}
-	function r(n) {
-		let r = e.value[n];
-		return r ? A(r) / t.value : 0;
-	}
-	function i(e) {
-		return n(e) + r(e);
+		let n = a;
+		for (; n < t && (r[n] === null || r[n] === void 0);) n += 1;
+		let s = n < t, c = s ? r[n] : 1, l = n - a, u = (c - o) / (l + +!!s);
+		for (let e = 0; e < l; e += 1) i[a + e] = o + u * (e + 1);
+		o = i[n - 1], a = n;
 	}
-	return {
-		totalWeight: t,
-		regionLeft: n,
-		regionWidth: r,
-		boundaryX: i,
-		continuousAriaValueNow: l(() => {
-			let t = 0;
-			for (let n of e.value) n.state === "completed" ? t += 1 : n.state === "active" && (t += k(n));
-			return Math.round(t * 100) / 100;
-		})
-	};
+	return i.map((e, t) => {
+		let n = t === 0 ? 0 : i[t - 1];
+		return {
+			left: n,
+			width: e - n,
+			at: 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 x(e) {
+	return typeof e.progress == "number" ? v(e.progress) : e.state === "completed" ? 1 : e.state === "active" ? null : 0;
 }
-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 = M(e[0]);
-		return `linear-gradient(90deg, ${t}, ${t})`;
+function te(e) {
+	let t = b(e), n = 0, r = 0;
+	for (let i = 0; i < t.length; i += 1) {
+		let a = t[i].width;
+		n += a, r += a * (x(e[i]) ?? 0);
 	}
-	let t = e.reduce((e, t) => e + A(t), 0) || 1, n = [], r = 0;
-	return e.forEach((i, a) => {
-		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 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%"
-	};
+	return n > 0 ? r / n : 0;
 }
-function F(e) {
-	return k(e);
-}
-function I(e) {
-	let t = e.value ?? null;
-	return {
-		label: t?.label ?? e.label,
-		value: t?.value,
-		description: t?.description,
-		state: t?.state ?? e.state
-	};
+function ne(e) {
+	return `var(--section-color-${(2 + 4 * e) % 13})`;
 }
 //#endregion
-//#region src/components/timeline/ContinuousMarkers.vue?vue&type=script&setup=true&lang.ts
-var L = ["aria-label"], R = [
+//#region src/components/timeline/Timeline.vue?vue&type=script&setup=true&lang.ts
+var S = [
 	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext",
+	"data-advancing"
+], C = ["data-state", "data-indeterminate"], w = {
+	class: "tl__marks",
+	role: "list"
+}, re = [
 	"data-state",
-	"data-current",
-	"data-completed",
-	"onClick",
-	"onKeydown"
-], z = { class: "sr-only" }, B = {
-	key: 0,
-	class: "continuous-dot-check",
-	viewBox: "0 0 24 24",
-	fill: "none",
-	"aria-hidden": "true"
-}, V = { class: "timeline-popover-label" }, H = {
-	key: 0,
-	class: "timeline-popover-value tabular-nums"
-}, U = {
-	key: 1,
-	class: "timeline-popover-description"
-}, W = { class: "timeline-popover-state" }, G = [
+	"data-crossing",
 	"aria-label",
-	"data-state",
-	"data-current",
-	"data-completed",
-	"onMouseenter",
-	"onMouseleave",
+	"aria-current",
+	"tabindex",
+	"onClick",
+	"onKeydown",
 	"onFocus",
 	"onBlur",
-	"onClick",
-	"onKeydown"
-], K = { class: "sr-only" }, q = {
+	"onPointerenter",
+	"onPointerleave",
+	"onPointerdown"
+], ie = {
 	key: 0,
-	class: "continuous-dot-check",
+	class: "tl__check",
 	viewBox: "0 0 24 24",
 	fill: "none",
 	"aria-hidden": "true"
-}, J = /* @__PURE__ */ i(/* @__PURE__ */ g({
-	__name: "ContinuousMarkers",
+}, T = 1.08, E = /*#__PURE__*/ i(/* @__PURE__ */ u({
+	__name: "Timeline",
 	props: {
 		segments: {},
-		markersAriaLabel: {},
-		currentSegmentKey: {},
-		disablePopover: { type: Boolean },
-		boundaryX: { type: Function }
-	},
-	emits: [
-		"hover",
-		"hoverEnd",
-		"click"
-	],
-	setup(e, { emit: t }) {
-		let n = t;
-		function r(e, t) {
-			n(t ? "hover" : "hoverEnd", e);
-		}
-		function i(e, t) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n("click", t));
-		}
-		return (t, l) => e.segments.length > 0 ? (x(), f("ul", {
-			key: 0,
-			class: "continuous-markers",
-			role: "list",
-			"aria-label": `${e.markersAriaLabel} — phase markers`
-		}, [(x(!0), f(c, null, C(e.segments, (c, m) => (x(), f("li", {
-			key: `dot-li-${c.key}`,
-			class: "continuous-marker",
-			role: "listitem",
-			style: b({ left: `${e.boundaryX(m) * 100}%` })
-		}, [e.disablePopover ? (x(), f("button", {
-			key: 1,
-			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,
-			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,
-			trigger: "hover",
-			"open-delay": 120,
-			"close-delay": 160,
-			"onUpdate:open": (e) => r(c, e ?? !1)
-		}, {
-			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, ["onUpdate:open"]))], 4))), 128))], 8, L)) : d("", !0);
-	}
-}), [["__scopeId", "data-v-0d42a418"]]), Y = [
-	"aria-valuemax",
-	"aria-valuenow",
-	"aria-label"
-], X = ["data-state"], Z = /* @__PURE__ */ i(/* @__PURE__ */ g({
-	__name: "ContinuousRail",
-	props: {
-		segments: {},
-		railGradient: {},
-		railAriaLabel: {},
-		valueNow: {},
-		regionLeft: { type: Function },
-		regionWidth: { type: Function }
-	},
-	setup(e) {
-		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
-		}, [(x(!0), f(c, null, C(e.segments, (t, r) => (x(), f("div", {
-			key: t.key,
-			class: v(["continuous-region", [
-				`state-${t.state}`,
-				r === 0 && "is-first",
-				r === e.segments.length - 1 && "is-last"
-			]]),
-			"data-state": t.state,
-			style: b({
-				left: `${e.regionLeft(r) * 100}%`,
-				width: `${e.regionWidth(r) * 100}%`,
-				"--stitch-gradient": e.railGradient,
-				"--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] ||= [p("div", { class: "continuous-region-fill" }, null, -1)]], 14, X))), 128))], 8, Y));
-	}
-}), [["__scopeId", "data-v-6e008bf0"]]), Q = ["aria-label"], te = { class: "continuous-track-wrap" }, ne = {
-	key: 0,
-	class: "continuous-detail"
-}, re = /* @__PURE__ */ i(/* @__PURE__ */ g({
-	__name: "ContinuousTimeline",
-	props: {
-		segments: {},
-		ariaLabel: {},
-		currentSegmentKey: {},
-		disablePopover: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: [
-		"hover",
-		"hoverEnd",
-		"click"
-	],
-	setup(e, { emit: t }) {
-		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";
-		}), _ = 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 = l(() => _.value == null ? n.currentSegmentKey == null ? "idle" : "current" : "hovered");
-		function b(e) {
-			_.value = e.key, r("hover", {
-				key: e.key,
-				segment: e
-			});
-		}
-		function C(e) {
-			_.value === e.key && (_.value = null), r("hoverEnd", {
-				key: e.key,
-				segment: e
-			});
-		}
-		function T(e) {
-			r("click", {
-				key: e.key,
-				segment: e
-			});
-		}
-		return (t, r) => (x(), f("div", {
-			class: "timeline-row timeline-continuous",
-			role: "group",
-			"aria-label": g.value
-		}, [p("div", te, [h(Z, {
-			segments: i.value,
-			"rail-gradient": u.value,
-			"rail-aria-label": g.value,
-			"value-now": E(c),
-			"region-left": E(a),
-			"region-width": E(o)
-		}, null, 8, [
-			"segments",
-			"rail-gradient",
-			"rail-aria-label",
-			"value-now",
-			"region-left",
-			"region-width"
-		]), h(J, {
-			segments: i.value,
-			"markers-aria-label": g.value,
-			"current-segment-key": e.currentSegmentKey,
-			"disable-popover": e.disablePopover,
-			"boundary-x": E(s),
-			onHover: b,
-			onHoverEnd: C,
-			onClick: T
-		}, m({ _: 2 }, [t.$slots.popoverContent ? {
-			name: "popoverContent",
-			fn: O(({ segment: e }) => [w(t.$slots, "popoverContent", { segment: e }, void 0, !0)]),
-			key: "0"
-		} : void 0]), 1032, [
-			"segments",
-			"markers-aria-label",
-			"current-segment-key",
-			"disable-popover",
-			"boundary-x"
-		])]), 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)])) : d("", !0)], 8, Q));
-	}
-}), [["__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"
-}, ce = /* @__PURE__ */ i(/* @__PURE__ */ g({
-	__name: "ScrubberTimeline",
-	props: {
-		modelValue: { default: 0 },
+		current: {},
 		label: {}
 	},
-	emits: [
-		"update:modelValue",
-		"scrubStart",
-		"scrubEnd"
-	],
-	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 = n({
+	emits: ["select", "hover"],
+	setup(i, { expose: u, emit: v }) {
+		let y = i, E = v, D = o(() => y.segments ?? []), O = o(() => b(D.value)), k = o(() => te(D.value)), A = t("dock"), j = m();
+		function M() {
+			let e = j.value;
+			if (!e) return T;
+			let t = getComputedStyle(e).getPropertyValue("--scale-hover").trim();
+			return Number(t) || T;
+		}
+		let N = r({
 			from: 0,
 			to: 1,
 			axis: "width",
-			maxStretch: 1.12,
-			squishLaw: "tanh"
+			squishLaw: "tanh",
+			maxStretch: () => M()
+		}), P = m(null), F = 0, I = o(() => O.value.reduce((e, t) => e + t.width, 0)), L = e(k, {
+			response: A.response,
+			dampingFraction: A.dampingFraction,
+			onValue: (e) => {
+				N.drive(e);
+				let t = e * I.value;
+				for (let e = 0; e < O.value.length; e += 1) {
+					let n = O.value[e].at;
+					F < n && t >= n && (P.value = e);
+				}
+				F = t;
+			}
 		});
-		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);
+		_([L.value, L.isSettled], ([, e]) => {
+			e && (N.squish(0), P.value = null);
+		}, { immediate: !0 });
+		let ae = o(() => !L.isSettled.value), oe = o(() => {
+			let e = L.value.value * I.value;
+			return O.value.map((t, n) => {
+				let r = x(D.value[n]) ?? 0, i = t.width * r, a = e <= 0 ? 0 : Math.min(e, i);
+				return e -= a, t.width > 0 ? a / t.width : 0;
 			});
+		});
+		function R(e) {
+			return e.state ?? "pending";
 		}
-		function N(e) {
-			let t = h.value.getBoundingClientRect();
-			return Math.max(0, Math.min(1, (e.clientX - t.left) / t.width));
-		}
-		function P(e) {
-			e.currentTarget.setPointerCapture(e.pointerId), g.value = !0, O.press(), m("scrubStart"), m("update:modelValue", N(e));
-		}
-		function F(e) {
-			g.value && m("update:modelValue", N(e));
-		}
-		function I() {
-			g.value && (g.value = !1, O.release(), M(), m("scrubEnd"));
+		function z(e) {
+			return R(e) === "active" && x(e) === null;
 		}
-		function L(e) {
-			let t = e.shiftKey ? .1 : .01;
-			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());
+		function B(e, t) {
+			return e.accent ?? ne(t);
 		}
-		let R = l(() => {
-			let e = _.value.value, t = w.value, n = 1 / t * k.value;
+		let se = o(() => O.value.map((e, t) => {
+			let n = D.value[t];
 			return {
-				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)
+				"--tl-l": String(e.left),
+				"--tl-w": String(e.width),
+				"--tl-f": String(oe.value[t] ?? 0),
+				"--tl-accent": B(n, t)
 			};
-		}), 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: b({ left: i.modelValue * 100 + "%" })
-		}, [p("span", ae, T(i.label), 1)], 4)) : d("", !0), p("div", {
-			ref_key: "trackRef",
-			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(i.modelValue ?? 0),
-			"aria-valuemin": "0",
-			"aria-valuemax": "1",
-			"aria-label": "Timeline",
-			onPointerdown: P,
-			onPointermove: F,
-			onPointerup: I,
-			onPointercancel: I,
-			onKeydown: L
-		}, [p("div", {
-			class: "glass-fill",
-			style: b(z.value)
-		}, null, 4), p("div", {
-			class: "glass-thumb-seat",
-			style: b(R.value)
-		}, [ee(p("div", se, null, 512), [[E(r)]])], 4)], 42, oe)]));
-	}
-}), [["__scopeId", "data-v-92398082"]]), le = {
-	class: "timeline-row timeline-segmented",
-	role: "group",
-	"aria-label": "Timeline progress"
-}, ue = { class: "segmented-track timeline-rail" }, $ = ["data-state"], de = [
-	"aria-label",
-	"data-state",
-	"onMouseenter",
-	"onMouseleave",
-	"onFocus",
-	"onBlur",
-	"onClick",
-	"onKeydown"
-], fe = { class: "sr-only" }, pe = /* @__PURE__ */ i(/* @__PURE__ */ g({
-	__name: "SegmentedTimeline",
-	props: { segments: {} },
-	emits: [
-		"hover",
-		"hoverEnd",
-		"click"
-	],
-	setup(e, { emit: t }) {
-		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)";
+		})), V = o(() => {
+			let e = `${Math.round(k.value * 100)}%`, t = D.value.find((e) => z(e));
+			return t ? `${e} — ${t.label} underway` : e;
+		}), H = m(0), U = m([]);
+		_(() => [y.current, D.value.length], () => {
+			let e = D.value.findIndex((e) => e.key === y.current);
+			H.value = e >= 0 ? e : Math.min(H.value, Math.max(0, D.value.length - 1));
+		}, { immediate: !0 });
+		function W(e) {
+			let t = Math.max(0, Math.min(D.value.length - 1, e));
+			H.value = t, U.value[t]?.focus();
 		}
-		function o(e) {
-			r("hover", {
-				key: e.key,
-				segment: e
-			});
+		function ce(e, t) {
+			if (e.key === "ArrowRight" || e.key === "ArrowDown") W(t + 1);
+			else if (e.key === "ArrowLeft" || e.key === "ArrowUp") W(t - 1);
+			else if (e.key === "Home") W(0);
+			else if (e.key === "End") W(D.value.length - 1);
+			else return;
+			e.preventDefault();
 		}
-		function s(e) {
-			r("hoverEnd", {
+		function le(e) {
+			E("select", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function u(e) {
-			r("click", {
+		let G = n({
+			shrinkDepth: .04,
+			squish: !1
+		}), K = m(null);
+		function ue(e, t) {
+			K.value = t, G.handlers.onPointerdown(e);
+		}
+		function q() {
+			K.value = null, G.handlers.onPointerup();
+		}
+		let J = m(null), Y = o(() => {
+			let e = J.value ?? y.current ?? null;
+			return e == null ? null : D.value.find((t) => t.key === e) ?? null;
+		}), de = o(() => J.value == null ? y.current == null ? "idle" : "current" : "hovered"), X = m(1), Z = -1;
+		_(Y, (e) => {
+			let t = e ? D.value.findIndex((t) => t.key === e.key) : -1;
+			t >= 0 && Z >= 0 && (X.value = t >= Z ? 1 : -1), Z = t;
+		});
+		function Q(e) {
+			J.value = e.key, E("hover", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function d(e, t) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r("click", {
-				key: t.key,
-				segment: t
-			}));
-		}
-		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: v(["segmented-cell", [
-				`state-${e.state}`,
-				t === 0 && "is-first",
-				t === i.value.length - 1 && "is-last"
-			]]),
-			"data-state": e.state
-		}, [p("div", {
-			class: "segmented-band timeline-cel",
-			style: b({
-				"--cel-accent": a(e),
-				width: `${E(k)(e) * 100}%`
-			}),
-			"aria-hidden": "true"
-		}, 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) => s(e),
-			onFocus: (t) => o(e),
-			onBlur: (t) => s(e),
-			onClick: (t) => u(e),
-			onKeydown: (t) => d(t, e)
-		}, [p("span", fe, T(e.label), 1)], 40, de)], 10, $))), 128))])]));
-	}
-}), [["__scopeId", "data-v-648d62e4"]]), me = /* @__PURE__ */ g({
-	__name: "GlassTimeline",
-	props: {
-		variant: { default: "scrubber" },
-		modelValue: { default: 0 },
-		label: {},
-		segments: {},
-		ariaLabel: {},
-		currentSegmentKey: {},
-		disablePopover: {
-			type: Boolean,
-			default: !1
+		function $(e) {
+			J.value === e.key && (J.value = null, E("hover", null));
 		}
-	},
-	emits: [
-		"update:modelValue",
-		"scrubStart",
-		"scrubEnd",
-		"hover",
-		"hoverEnd",
-		"click"
-	],
-	setup(e, { emit: t }) {
-		let n = e, r = t;
-		return (t, i) => e.variant === "continuous" ? (x(), u(re, {
-			key: 0,
-			segments: n.segments,
-			"aria-label": n.ariaLabel,
-			"current-segment-key": n.currentSegmentKey,
-			"disable-popover": n.disablePopover,
-			onHover: i[0] ||= (e) => r("hover", e),
-			onHoverEnd: i[1] ||= (e) => r("hoverEnd", e),
-			onClick: i[2] ||= (e) => r("click", e)
-		}, m({
-			popoverContent: O((e) => [w(t.$slots, "popoverContent", y(_(e)))]),
-			_: 2
-		}, [t.$slots.detail ? {
-			name: "detail",
-			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" ? (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"])) : (x(), u(ce, {
-			key: 2,
-			"model-value": n.modelValue,
-			label: n.label,
-			"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"]));
+		return u({ value: k }), (e, t) => (p(), c("div", {
+			ref_key: "rootRef",
+			ref: j,
+			class: "tl",
+			role: "group",
+			style: f({
+				"--timeline-value": String(k.value),
+				"--tl-dir": String(X.value)
+			})
+		}, [
+			l("div", {
+				class: "tl__track track-well",
+				role: "progressbar",
+				"aria-label": y.label,
+				"aria-valuemin": 0,
+				"aria-valuemax": 1,
+				"aria-valuenow": k.value,
+				"aria-valuetext": V.value,
+				"data-advancing": ae.value || void 0
+			}, [(p(!0), c(a, null, h(D.value, (e, t) => (p(), c("div", {
+				key: e.key,
+				class: d(["tl__span", { "track-flow": z(e) }]),
+				"aria-hidden": "true",
+				"data-state": R(e),
+				"data-indeterminate": z(e) || void 0,
+				style: f(se.value[t])
+			}, [z(e) ? s("", !0) : (p(), c("div", {
+				key: 0,
+				class: d(["tl__fill", { "track-flow": R(e) === "active" }])
+			}, [R(e) === "active" ? (p(), c("span", {
+				key: 0,
+				class: "tl__cap",
+				style: f(g(N).stretchStyle.value)
+			}, null, 4)) : s("", !0)], 2))], 14, C))), 128))], 8, S),
+			l("ul", w, [(p(!0), c(a, null, h(D.value, (e, n) => (p(), c("li", {
+				key: e.key,
+				class: "tl__mark-seat",
+				style: f({
+					"--tl-at": String(O.value[n]?.at ?? 0),
+					"--tl-accent": B(e, n)
+				})
+			}, [l("button", {
+				ref_for: !0,
+				ref: (e) => {
+					e && (U.value[n] = e);
+				},
+				type: "button",
+				class: "tl__mark",
+				"data-control-target": "",
+				"data-state": R(e),
+				"data-crossing": P.value === n || void 0,
+				"aria-label": `${e.label}: ${R(e)}`,
+				"aria-current": e.key === y.current ? "step" : void 0,
+				tabindex: n === H.value ? 0 : -1,
+				style: f(K.value === n ? g(G).pressStyle.value : void 0),
+				onClick: (t) => le(e),
+				onKeydown: (e) => ce(e, n),
+				onFocus: (t) => {
+					H.value = n, Q(e);
+				},
+				onBlur: (t) => $(e),
+				onPointerenter: (t) => Q(e),
+				onPointerleave: (t) => {
+					$(e), q();
+				},
+				onPointerdown: (e) => ue(e, n),
+				onPointerup: t[0] ||= (e) => q(),
+				onPointercancel: t[1] ||= (e) => q()
+			}, [l("span", {
+				class: "tl__disc",
+				style: f(P.value === n ? g(N).stretchStyle.value : void 0)
+			}, [R(e) === "completed" ? (p(), c("svg", ie, [...t[2] ||= [l("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : s("", !0)], 4)], 44, re)], 4))), 128))]),
+			e.$slots.detail ? (p(), c("div", {
+				class: "tl__detail",
+				key: Y.value?.key ?? "idle"
+			}, [ee(e.$slots, "detail", {
+				segment: Y.value,
+				source: de.value,
+				current: y.current ?? null,
+				hovered: J.value,
+				value: k.value,
+				progress: V.value
+			}, void 0, !0)])) : s("", !0)
+		], 4));
 	}
-});
+}), [["__scopeId", "data-v-ba6961e5"]]);
 //#endregion
-export { me as GlassTimeline };
+export { E as Timeline };