@gkucmierz/nano-ui 1.5.3 → 1.6.0

package/dist/nano-ui.js

@@ -101,9 +101,7 @@ typeof window < "u" && (window.Analytics = k);
 var A = { mounted(e, t) {
 	e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", function(n) {
 		let r = e.getBoundingClientRect(), i = n.clientX - r.left, a = n.clientY - r.top, o = document.createElement("span"), s = Math.max(r.width, r.height), c = s / 2;
-		o.style.width = o.style.height = `${s}px`, o.style.left = `${i - c}px`, o.style.top = `${a - c}px`, o.classList.add("ripple"), t.value && typeof t.value == "string" && (o.style.backgroundColor = t.value), e.appendChild(o), setTimeout(() => {
-			o.remove();
-		}, 600);
+		o.style.width = o.style.height = `${s}px`, o.style.left = `${i - c}px`, o.style.top = `${a - c}px`, o.classList.add("ripple"), t.value && typeof t.value == "string" && (o.style.backgroundColor = t.value), o.addEventListener("animationend", () => o.remove(), { once: !0 }), e.appendChild(o);
 	});
 } }, j = _({
 	isVisible: !1,
@@ -206,13 +204,13 @@ var P = {
 			})
 		}, S(C(j).text), 7));
 	}
-}, [["__scopeId", "data-v-37c91a21"]]), L = { class: "nano-modal-title" }, R = {
+}, [["__scopeId", "data-v-e67d9c3b"]]), L = { class: "nano-modal-title" }, R = {
 	key: 1,
 	class: "nano-modal-body"
 }, z = {
 	key: 2,
 	class: "nano-modal-footer"
-}, B = { class: "nano-modal-actions" }, V = {
+}, B = { class: "nano-modal-actions" }, V = /* @__PURE__ */ F({
 	__name: "NanoModal",
 	props: {
 		visible: {
@@ -294,48 +292,48 @@ var P = {
 		"cancel"
 	],
 	setup(e, { emit: u }) {
-		let m = e, _ = u, y = v(null), C = v(null), k = v(null), A = v(null), j = v(null), M = v(null), N = v(!1), P = v(!1), F = 0, I = 0, V = 0, ee = 0, H = 0, te = 0, ne = 0, re = 0, ie = r(() => {
+		let m = e, _ = u, y = v(null), C = v(null), k = v(null), A = v(null), j = v(null), M = v(null), N = v(!1), P = v(!1), F = 0, I = 0, V = 0, ee = 0, te = 0, ne = 0, re = 0, ie = 0, ae = r(() => {
 			let e = {};
 			return j.value === null ? (e.maxWidth = typeof m.width == "number" ? `${m.width}px` : m.width, e.width = "100%") : (e.width = `${j.value}px`, e.maxWidth = "none"), M.value === null ? m.height !== "auto" && (e.height = typeof m.height == "number" ? `${m.height}px` : m.height) : (e.height = `${M.value}px`, e.maxHeight = "none"), k.value !== null && A.value !== null && (e.position = "absolute", e.left = `${k.value}px`, e.top = `${A.value}px`, e.transform = "none", e.margin = "0"), e;
-		}), ae = (e) => {
+		}), oe = (e) => {
 			if (m.draggable && !(e.target.tagName === "BUTTON" || e.target.closest("button"))) {
 				if (N.value = !0, F = e.clientX, I = e.clientY, k.value === null) {
 					let e = C.value.getBoundingClientRect();
 					k.value = e.left, A.value = e.top, j.value === null && (j.value = e.width), M.value === null && (M.value = e.height);
 				}
-				V = k.value, ee = A.value, window.addEventListener("mousemove", oe), window.addEventListener("mouseup", se);
+				V = k.value, ee = A.value, window.addEventListener("mousemove", se), window.addEventListener("mouseup", ce);
 			}
-		}, oe = (e) => {
+		}, se = (e) => {
 			if (!N.value) return;
 			let t = V + (e.clientX - F), n = ee + (e.clientY - I), r = window.innerWidth, i = window.innerHeight, a = C.value.getBoundingClientRect();
 			t < 0 && (t = 0), n < 0 && (n = 0), t + a.width > r && (t = r - a.width), n + a.height > i && (n = i - a.height), k.value = t, A.value = n;
-		}, se = () => {
-			N.value = !1, window.removeEventListener("mousemove", oe), window.removeEventListener("mouseup", se);
-		}, ce = (e) => {
+		}, ce = () => {
+			N.value = !1, window.removeEventListener("mousemove", se), window.removeEventListener("mouseup", ce);
+		}, le = (e) => {
 			if (!m.resizable) return;
-			e.preventDefault(), e.stopPropagation(), P.value = !0, H = e.clientX, te = e.clientY;
+			e.preventDefault(), e.stopPropagation(), P.value = !0, te = e.clientX, ne = e.clientY;
 			let t = C.value.getBoundingClientRect();
-			k.value === null && (k.value = t.left, A.value = t.top), ne = t.width, re = t.height, window.addEventListener("mousemove", le), window.addEventListener("mouseup", ue);
-		}, le = (e) => {
+			k.value === null && (k.value = t.left, A.value = t.top), re = t.width, ie = t.height, window.addEventListener("mousemove", ue), window.addEventListener("mouseup", de);
+		}, ue = (e) => {
 			if (!P.value) return;
-			let t = ne + (e.clientX - H), n = re + (e.clientY - te);
+			let t = re + (e.clientX - te), n = ie + (e.clientY - ne);
 			t < m.minWidth && (t = m.minWidth), n < m.minHeight && (n = m.minHeight);
 			let r = window.innerWidth - k.value, i = window.innerHeight - A.value;
 			t > r && (t = r), n > i && (n = i), j.value = t, M.value = n;
-		}, ue = () => {
-			P.value = !1, window.removeEventListener("mousemove", le), window.removeEventListener("mouseup", ue);
-		}, de = (e) => {
-			m.visible && e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), fe());
+		}, de = () => {
+			P.value = !1, window.removeEventListener("mousemove", ue), window.removeEventListener("mouseup", de);
+		}, fe = (e) => {
+			m.visible && e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), pe());
 		};
 		w(() => m.visible, async (e) => {
-			e ? (k.value = null, A.value = null, j.value = null, M.value = null, document.body.style.overflow = "hidden", window.addEventListener("keydown", de, { capture: !0 }), await d(), y.value && y.value.focus()) : (document.body.style.overflow = "", window.removeEventListener("keydown", de, { capture: !0 }), se(), ue());
+			e ? (k.value = null, A.value = null, j.value = null, M.value = null, document.body.style.overflow = "hidden", window.addEventListener("keydown", fe, { capture: !0 }), await d(), y.value && y.value.focus()) : (document.body.style.overflow = "", window.removeEventListener("keydown", fe, { capture: !0 }), ce(), de());
 		}), h(() => {
-			document.body.style.overflow = "", window.removeEventListener("keydown", de, { capture: !0 }), se(), ue();
+			document.body.style.overflow = "", window.removeEventListener("keydown", fe, { capture: !0 }), ce(), de();
 		});
-		let fe = () => _("close"), pe = () => {
-			m.closeOnBackdrop && fe();
-		}, me = () => _("ok"), he = () => {
-			_("cancel"), fe();
+		let pe = () => _("close"), me = () => {
+			m.closeOnBackdrop && pe();
+		}, he = () => _("ok"), ge = () => {
+			_("cancel"), pe();
 		};
 		return (r, u) => {
 			let d = x("ripple");
@@ -343,7 +341,7 @@ var P = {
 				default: T(() => [e.visible ? (g(), o("div", {
 					key: 0,
 					class: f(["nano-modal-overlay", { "nano-glass": e.glassmorphism }]),
-					onClick: O(pe, ["self"]),
+					onClick: O(me, ["self"]),
 					onKeydown: u[1] ||= D(O((...e) => r.handleEsc && r.handleEsc(...e), ["stop"]), ["esc"]),
 					tabindex: "-1",
 					ref_key: "modalOverlay",
@@ -353,17 +351,17 @@ var P = {
 						"is-dragging": N.value,
 						"is-resizing": P.value
 					}]),
-					style: p(ie.value),
+					style: p(ae.value),
 					ref_key: "modalWindow",
 					ref: C
 				}, [
 					e.showHeader ? (g(), o("div", {
 						key: 0,
 						class: f(["nano-modal-header", { "is-draggable": e.draggable }]),
-						onMousedown: ae
-					}, [b(r.$slots, "header", {}, () => [s("h2", L, S(e.title), 1)]), s("button", {
+						onMousedown: oe
+					}, [b(r.$slots, "header", {}, () => [s("h2", L, S(e.title), 1)], !0), s("button", {
 						class: "nano-modal-close-btn",
-						onClick: O(fe, ["stop"]),
+						onClick: O(pe, ["stop"]),
 						"aria-label": "Close",
 						onMousedown: u[0] ||= O(() => {}, ["stop"])
 					}, [...u[2] ||= [s("svg", {
@@ -387,20 +385,20 @@ var P = {
 						x2: "18",
 						y2: "18"
 					})], -1)]], 32)], 34)) : a("", !0),
-					e.showBody ? (g(), o("div", R, [b(r.$slots, "body")])) : a("", !0),
+					e.showBody ? (g(), o("div", R, [b(r.$slots, "body", {}, void 0, !0)])) : a("", !0),
 					e.showFooter ? (g(), o("div", z, [b(r.$slots, "footer", {}, () => [s("div", B, [e.showCancel ? E((g(), o("button", {
 						key: 0,
 						class: "nano-btn nano-btn-secondary",
-						onClick: he
+						onClick: ge
 					}, [c(S(e.cancelText), 1)])), [[d]]) : a("", !0), e.showOk ? E((g(), o("button", {
 						key: 1,
 						class: f(["nano-btn", "nano-btn-" + e.okVariant]),
-						onClick: me
-					}, [c(S(e.okText), 1)], 2)), [[d]]) : a("", !0)])])])) : a("", !0),
+						onClick: he
+					}, [c(S(e.okText), 1)], 2)), [[d]]) : a("", !0)])], !0)])) : a("", !0),
 					e.resizable ? (g(), o("div", {
 						key: 3,
 						class: "nano-modal-resizer",
-						onMousedown: ce
+						onMousedown: le
 					}, [...u[3] ||= [s("svg", {
 						width: "10",
 						height: "10",
@@ -419,21 +417,21 @@ var P = {
 			})]);
 		};
 	}
-}, ee = ["viewBox"], H = { key: 0 }, te = [
+}, [["__scopeId", "data-v-52e94a15"]]), ee = ["viewBox"], te = { key: 0 }, ne = [
 	"id",
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], ne = ["stop-color"], re = ["stop-color"], ie = [
+], re = ["stop-color"], ie = ["stop-color"], ae = [
 	"id",
 	"y1",
 	"y2"
-], ae = ["stop-color"], oe = ["stop-color"], se = [
+], oe = ["stop-color"], se = ["stop-color"], ce = [
 	"id",
 	"y1",
 	"y2"
-], ce = ["stop-color"], le = ["stop-color"], ue = { key: 1 }, de = ["x", "y"], fe = { key: 2 }, pe = ["d", "fill"], me = ["d", "stroke"], he = ["d", "fill"], ge = ["d", "fill"], _e = ["d", "fill"], ve = ["d", "stroke"], ye = ["d", "fill"], be = ["d", "stroke"], xe = ["d", "stroke-width"], Se = ["transform"], Ce = ["font-size"], we = ["font-size"], Te = ["d", "fill"], Ee = ["d", "stroke"], De = ["d", "fill"], Oe = ["d", "fill"], ke = ["d", "fill"], Ae = ["d", "stroke"], je = ["d", "fill"], Me = ["d", "stroke"], Ne = ["d", "stroke-width"], Pe = ["onMouseenter", "onClick"], Fe = ["d"], Ie = ["d"], Le = ["onMouseenter", "onClick"], Re = ["d", "stroke"], ze = ["y", "fill"], Be = ["onMouseenter", "onClick"], Ve = ["d", "stroke"], He = ["y", "fill"], Ue = /* @__PURE__ */ F({
+], le = ["stop-color"], ue = ["stop-color"], de = { key: 1 }, fe = ["x", "y"], pe = { key: 2 }, me = ["d", "fill"], he = ["d", "stroke"], ge = ["d", "fill"], _e = ["d", "fill"], ve = ["d", "fill"], ye = ["d", "stroke"], be = ["d", "fill"], xe = ["d", "stroke"], Se = ["d", "stroke-width"], Ce = ["transform"], we = ["font-size"], Te = ["font-size"], Ee = ["d", "fill"], De = ["d", "stroke"], Oe = ["d", "fill"], ke = ["d", "fill"], Ae = ["d", "fill"], je = ["d", "stroke"], Me = ["d", "fill"], Ne = ["d", "stroke"], Pe = ["d", "stroke-width"], Fe = ["onMouseenter", "onClick"], Ie = ["d"], Le = ["d"], Re = ["onMouseenter", "onClick"], ze = ["d", "stroke"], Be = ["y", "fill"], Ve = ["onMouseenter", "onClick"], He = ["d", "stroke"], Ue = ["y", "fill"], We = /* @__PURE__ */ F({
 	__name: "ThreeDDonutChart",
 	props: {
 		data: {
@@ -631,14 +629,14 @@ var P = {
 					percentage: n
 				};
 			});
-		}), V = r(() => A.value.reduce((e, t) => e + t.value, 0)), Ue = r(() => {
+		}), V = r(() => A.value.reduce((e, t) => e + t.value, 0)), We = r(() => {
 			if (c.centerValue !== void 0 && c.centerValue !== "") return c.centerValue;
-			let e = $.value.find((e) => e.item.id === C.value);
+			let e = at.value.find((e) => e.item.id === C.value);
 			return e ? c.centerValueFormatter ? c.centerValueFormatter(e.item.value, e.item) : L(e.item.value) : c.centerValueFormatter ? c.centerValueFormatter(V.value, null) : c.valueDecimals === void 0 ? Math.round(V.value) : L(V.value);
-		}), We = r(() => {
-			let e = $.value.find((e) => e.item.id === C.value);
+		}), Ge = r(() => {
+			let e = at.value.find((e) => e.item.id === C.value);
 			return e ? R(e.item.name, 12).toUpperCase() : (c.centerLabel || "").toUpperCase();
-		}), Ge = (e, t = !1) => {
+		}), Ke = (e, t = !1) => {
 			let n = new Map(A.value.map((e) => [e.id, e])), r = new Map(e.map((e) => [e.id, e])), i = [];
 			e.forEach((e) => {
 				let r = n.get(e.id);
@@ -679,7 +677,7 @@ var P = {
 					unit: e.unit
 				});
 			}), A.value = i, t && (A.value = A.value.filter((e) => e.targetValue > 0));
-		}, Ke = (e, t = -90) => {
+		}, qe = (e, t = -90) => {
 			if (!e || e.length === 0) return t;
 			let n = e.reduce((e, t) => e + (t.value || 0), 0);
 			if (n === 0) return t;
@@ -697,22 +695,22 @@ var P = {
 				l < o ? (o = l, a = e, s = u) : l === o && u < s && (a = e, s = u);
 			}
 			return a;
-		}, qe = r(() => c.autoRotate && B.value && B.value.length > 0 ? Ke(B.value, c.rotationAngle) : c.rotationAngle), U = v(qe.value), Je = v(!1), Ye = v(!1), Xe = null, W = c.is3D, G = v(c.isExpanded ? 380 : 60), K = v(c.isExpanded ? 160 : 60), q = v(c.isExpanded ? 180 : 48), J = v(c.isExpanded ? W ? 180 * c.slopeRatio : 180 : W ? 48 * c.slopeRatio : 48), Y = v(c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness)), X = v(c.isExpanded ? W ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : W ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness)), Ze = c.isExpanded && W ? 32 : 0, Z = v(W && c.slopeRatio > .5 ? Ze * (2 - 2 * c.slopeRatio) : Ze), Qe = v(c.isExpanded ? 760 : 120), $e = v(c.isExpanded ? 320 : 120), Q = v(c.isExpanded && c.showLabels ? 1 : 0), et = r(() => {
-			let e = (q.value - 48) / 132;
+		}, Je = r(() => c.autoRotate && B.value && B.value.length > 0 ? qe(B.value, c.rotationAngle) : c.rotationAngle), H = v(Je.value), Ye = v(!1), Xe = v(!1), Ze = null, U = c.is3D, W = v(c.isExpanded ? 380 : 60), G = v(c.isExpanded ? 160 : 60), K = v(c.isExpanded ? 180 : 48), Qe = v(c.isExpanded ? U ? 180 * c.slopeRatio : 180 : U ? 48 * c.slopeRatio : 48), q = v(c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness)), J = v(c.isExpanded ? U ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : U ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness)), $e = c.isExpanded && U ? 32 : 0, Y = v(U && c.slopeRatio > .5 ? $e * (2 - 2 * c.slopeRatio) : $e), et = v(c.isExpanded ? 760 : 120), tt = v(c.isExpanded ? 320 : 120), X = v(c.isExpanded && c.showLabels ? 1 : 0), nt = r(() => {
+			let e = (K.value - 48) / 132;
 			return 13 + 6 * Math.max(0, Math.min(1, e));
-		}), tt = r(() => {
-			let e = (q.value - 48) / 132;
+		}), rt = r(() => {
+			let e = (K.value - 48) / 132;
 			return 7 + 1.5 * Math.max(0, Math.min(1, e));
-		}), nt = r(() => K.value - Z.value / 2), $ = r(() => {
+		}), it = r(() => G.value - Y.value / 2), at = r(() => {
 			let e = A.value, t = V.value;
 			if (t === 0) return [];
-			let n = [], r = U.value * Math.PI / 180, i = G.value;
-			K.value;
-			let a = q.value, o = J.value, s = Y.value, l = X.value, u = Z.value, d = nt.value, f = e.filter((e) => e.value > .001);
+			let n = [], r = H.value * Math.PI / 180, i = W.value;
+			G.value;
+			let a = K.value, o = Qe.value, s = q.value, l = J.value, u = Y.value, d = it.value, f = e.filter((e) => e.value > .001);
 			if (f.length === 1) {
 				let t = f[0], n = e.indexOf(t), r = F(t, n), p = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, m = "", h = "";
 				u > 0 && (m = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - a} ${d + u} A ${a} ${o} 0 0 0 ${i + a} ${d + u} Z`, h = `M ${i - s} ${d} A ${s} ${l} 0 0 1 ${i + s} ${d} L ${i + s} ${d + u} A ${s} ${l} 0 0 0 ${i - s} ${d + u} Z`);
-				let g = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} L ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, _ = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} M ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d}`, v = h, y = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} Z`, b = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d}`, x = m, S = U.value * Math.PI / 180 + Math.PI, C = i + a * Math.cos(S), w = d + o * Math.sin(S), T = i + (a + 25) * Math.cos(S), E = d + (o + 35 * c.slopeRatio) * Math.sin(S), D = i + (a + s) / 2 * Math.cos(S), O = d + (o + l) / 2 * Math.sin(S), k = a - s, A = o - l;
+				let g = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} L ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, _ = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} M ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d}`, v = h, y = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} Z`, b = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d}`, x = m, S = H.value * Math.PI / 180 + Math.PI, C = i + a * Math.cos(S), w = d + o * Math.sin(S), T = i + (a + 25) * Math.cos(S), E = d + (o + 35 * c.slopeRatio) * Math.sin(S), D = i + (a + s) / 2 * Math.cos(S), O = d + (o + l) / 2 * Math.sin(S), k = a - s, A = o - l;
 				return [{
 					item: t,
 					index: n,
@@ -806,7 +804,7 @@ var P = {
 					M ? (P = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} M ${x} ${S} A ${s} ${l} 0 ${T} 0 ${C} ${w}`, N || (P += ` L ${h} ${v}`)) : (P = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} L ${x} ${S} A ${s} ${l} 0 ${T} 0 ${C} ${w}`, N || (P += " Z"));
 					let F = "", I = "", L = "", R = "", z = "", B = "";
 					u > 0 && (F = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} L ${y} ${b + u} A ${a} ${o} 0 ${T} 0 ${h} ${v + u} Z`, I = `M ${C} ${w} A ${s} ${l} 0 ${T} 1 ${x} ${S} L ${x} ${S + u} A ${s} ${l} 0 ${T} 0 ${C} ${w + u} Z`, M ? (L = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} M ${y} ${b + u} A ${a} ${o} 0 ${T} 0 ${h} ${v + u}`, N || (L += ` L ${h} ${v}`)) : (L = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} L ${y} ${b + u} A ${a} ${o} 0 ${T} 0 ${h} ${v + u}`, N || (L += " Z")), M ? (R = `M ${C} ${w} A ${s} ${l} 0 ${T} 1 ${x} ${S} M ${x} ${S + u} A ${s} ${l} 0 ${T} 0 ${C} ${w + u}`, N || (R += ` L ${C} ${w}`)) : (R = `M ${C} ${w} A ${s} ${l} 0 ${T} 1 ${x} ${S} L ${x} ${S + u} A ${s} ${l} 0 ${T} 0 ${C} ${w + u}`, N || (R += " Z")), Math.abs(r - A) < .001 && (z = `M ${h} ${v} L ${C} ${w} L ${C} ${w + u} L ${h} ${v + u} Z`), Math.abs(p - j) < .001 && (B = `M ${y} ${b} L ${x} ${S} L ${x} ${S + u} L ${y} ${b + u} Z`));
-					let V = d + o * Math.sin(m), ee = i + a * Math.cos(g), H = d + o * Math.sin(g), te = i + (a + 25) * Math.cos(g), ne = d + (o + 35 * c.slopeRatio) * Math.sin(g), re = i + (a + s) / 2 * Math.cos(g), ie = d + (o + l) / 2 * Math.sin(g), ae = a - s, oe = o - l;
+					let V = d + o * Math.sin(m), ee = i + a * Math.cos(g), te = d + o * Math.sin(g), ne = i + (a + 25) * Math.cos(g), re = d + (o + 35 * c.slopeRatio) * Math.sin(g), ie = i + (a + s) / 2 * Math.cos(g), ae = d + (o + l) / 2 * Math.sin(g), oe = a - s, se = o - l;
 					n.push({
 						item: e,
 						index: f,
@@ -826,34 +824,31 @@ var P = {
 						startCutPath: z,
 						endCutPath: B,
 						x0: ee,
-						y0: H,
-						x1: te,
-						y1: ne,
-						topGradX1: re - ae / 2,
-						topGradY1: ie - oe / 2,
-						topGradX2: re + ae / 2,
-						topGradY2: ie + oe / 2,
-						wallY1: H,
-						wallY2: H + u
+						y0: te,
+						x1: ne,
+						y1: re,
+						topGradX1: ie - oe / 2,
+						topGradY1: ae - se / 2,
+						topGradX2: ie + oe / 2,
+						topGradY2: ae + se / 2,
+						wallY1: te,
+						wallY2: te + u
 					});
 				}), r += p;
-			}), n.sort((e, t) => {
-				let n = C.value === e.item.id, r = C.value === t.item.id;
-				return n && !r ? 1 : !n && r ? -1 : e.midY - t.midY;
-			});
-		}), rt = r(() => {
+			}), n.sort((e, t) => e.midY - t.midY);
+		}), ot = r(() => {
 			let e = /* @__PURE__ */ new Set(), t = [];
-			return $.value.forEach((n) => {
+			return at.value.forEach((n) => {
 				e.has(n.item.id) || (e.add(n.item.id), t.push(n));
 			}), t;
-		}), it = (e) => C.value === e.item.id ? { transform: `translate(${10 * Math.cos(e.originalMidAngle)}px, ${10 * Math.sin(e.originalMidAngle)}px)` } : {}, at = r(() => {
-			if (Q.value <= .001) return {
+		}), st = (e) => C.value === e.item.id ? { transform: `translate(${10 * Math.cos(e.originalMidAngle)}px, ${10 * Math.sin(e.originalMidAngle)}px)` } : {}, ct = r(() => {
+			if (X.value <= .001) return {
 				left: [],
 				right: []
 			};
 			let e = [], t = [];
-			return rt.value.forEach((n) => {
-				let r = Math.cos(n.originalMidAngle) < 0, i = Math.sin(n.originalMidAngle) > 0, a = Z.value, o = n.y0 + (i ? a : 0), s = n.y1 + (i ? a : 0), c = {
+			return ot.value.forEach((n) => {
+				let r = Math.cos(n.originalMidAngle) < 0, i = Math.sin(n.originalMidAngle) > 0, a = Y.value, o = n.y0 + (i ? a : 0), s = n.y1 + (i ? a : 0), c = {
 					item: n.item,
 					index: n.index,
 					color: n.color,
@@ -871,40 +866,40 @@ var P = {
 				left: e,
 				right: t
 			};
-		}), ot = r(() => at.value.left), st = r(() => at.value.right), ct = (e) => {
+		}), Z = r(() => ct.value.left), Q = r(() => ct.value.right), $ = (e) => {
 			let t = C.value === e.item.id, n = e.x0, r = e.y0, i = e.finalY;
 			if (t) {
 				let t = 10 * Math.cos(e.originalMidAngle || 0), a = 10 * Math.sin(e.originalMidAngle || 0);
 				n += t, r += a, i -= 5;
 			}
-			let a = n + 30 * Math.cos(e.originalMidAngle || 0), o = r + 30 * Math.sin(e.originalMidAngle || 0), s = e.isLeft, c = Math.sin(e.originalMidAngle || 0) < 0, l = G.value, u = q.value, d = s ? l - u - 15 : l + u + 15, f = s ? Math.min(d, a - 30) : Math.max(d, a + 30);
+			let a = n + 30 * Math.cos(e.originalMidAngle || 0), o = r + 30 * Math.sin(e.originalMidAngle || 0), s = e.isLeft, c = Math.sin(e.originalMidAngle || 0) < 0, l = W.value, u = K.value, d = s ? l - u - 15 : l + u + 15, f = s ? Math.min(d, a - 30) : Math.max(d, a + 30);
 			return `M ${n} ${r} C ${a} ${o}, ${f} ${c ? Math.min(o, i) : Math.max(o, i)}, ${s ? 90 : 670} ${i}`;
 		}, lt = (e = 450) => {
 			if (c.currentLowFxMode || c.immediate) {
 				A.value.forEach((e) => {
 					e.value = e.targetValue, e.percentage = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
-				}), A.value = A.value.filter((e) => e.targetValue > 0), U.value = qe.value;
+				}), A.value = A.value.filter((e) => e.targetValue > 0), H.value = Je.value;
 				let e = c.is3D;
-				G.value = c.isExpanded ? 380 : 60, K.value = c.isExpanded ? 160 : 60, q.value = c.isExpanded ? 180 : 48, J.value = c.isExpanded ? e ? 180 * c.slopeRatio : 180 : e ? 48 * c.slopeRatio : 48, Y.value = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), X.value = c.isExpanded ? e ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : e ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness);
+				W.value = c.isExpanded ? 380 : 60, G.value = c.isExpanded ? 160 : 60, K.value = c.isExpanded ? 180 : 48, Qe.value = c.isExpanded ? e ? 180 * c.slopeRatio : 180 : e ? 48 * c.slopeRatio : 48, q.value = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), J.value = c.isExpanded ? e ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : e ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness);
 				let t = c.isExpanded && e ? 32 : 0;
-				Z.value = e && c.slopeRatio > .5 ? t * (2 - 2 * c.slopeRatio) : t, Qe.value = c.isExpanded ? 760 : 120, $e.value = c.isExpanded ? 320 : 120, Q.value = c.isExpanded && c.showLabels ? 1 : 0, Je.value = !1;
+				Y.value = e && c.slopeRatio > .5 ? t * (2 - 2 * c.slopeRatio) : t, et.value = c.isExpanded ? 760 : 120, tt.value = c.isExpanded ? 320 : 120, X.value = c.isExpanded && c.showLabels ? 1 : 0, Ye.value = !1;
 				return;
 			}
-			u && cancelAnimationFrame(u), Je.value = !0;
-			let t = performance.now(), n = U.value, r = qe.value, i = G.value, a = K.value, o = q.value, s = J.value, l = Y.value, d = X.value, f = Z.value, p = Qe.value, m = $e.value, h = Q.value, g = c.is3D, _ = c.isExpanded ? 380 : 60, v = c.isExpanded ? 160 : 60, y = c.isExpanded ? 180 : 48, b = c.isExpanded ? g ? 180 * c.slopeRatio : 180 : g ? 48 * c.slopeRatio : 48, x = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), S = c.isExpanded ? g ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : g ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness), C = c.isExpanded && g ? 32 : 0, w = g && c.slopeRatio > .5 ? C * (2 - 2 * c.slopeRatio) : C, T = c.isExpanded ? 760 : 120, E = c.isExpanded ? 320 : 120, D = c.isExpanded && c.showLabels ? 1 : 0, O = (c) => {
+			u && cancelAnimationFrame(u), Ye.value = !0;
+			let t = performance.now(), n = H.value, r = Je.value, i = W.value, a = G.value, o = K.value, s = Qe.value, l = q.value, d = J.value, f = Y.value, p = et.value, m = tt.value, h = X.value, g = c.is3D, _ = c.isExpanded ? 380 : 60, v = c.isExpanded ? 160 : 60, y = c.isExpanded ? 180 : 48, b = c.isExpanded ? g ? 180 * c.slopeRatio : 180 : g ? 48 * c.slopeRatio : 48, x = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), S = c.isExpanded ? g ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : g ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness), C = c.isExpanded && g ? 32 : 0, w = g && c.slopeRatio > .5 ? C * (2 - 2 * c.slopeRatio) : C, T = c.isExpanded ? 760 : 120, E = c.isExpanded ? 320 : 120, D = c.isExpanded && c.showLabels ? 1 : 0, O = (c) => {
 				let g = c - t, C = Math.min(1, g / e), k = 1 - (1 - C) ** 3;
 				A.value.forEach((e) => {
 					e.value = e.startValue + (e.targetValue - e.startValue) * k;
 					let t = e.startPercentage === void 0 ? 0 : e.startPercentage, n = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
 					e.percentage = Math.round(t + (n - t) * k);
-				}), U.value = n + (r - n) * k, G.value = i + (_ - i) * k, K.value = a + (v - a) * k, q.value = o + (y - o) * k, J.value = s + (b - s) * k, Y.value = l + (x - l) * k, X.value = d + (S - d) * k, Z.value = f + (w - f) * k, Qe.value = p + (T - p) * k, $e.value = m + (E - m) * k, Q.value = h + (D - h) * k, C < 1 ? u = requestAnimationFrame(O) : (u = null, A.value.forEach((e) => {
+				}), H.value = n + (r - n) * k, W.value = i + (_ - i) * k, G.value = a + (v - a) * k, K.value = o + (y - o) * k, Qe.value = s + (b - s) * k, q.value = l + (x - l) * k, J.value = d + (S - d) * k, Y.value = f + (w - f) * k, et.value = p + (T - p) * k, tt.value = m + (E - m) * k, X.value = h + (D - h) * k, C < 1 ? u = requestAnimationFrame(O) : (u = null, A.value.forEach((e) => {
 					e.value = e.targetValue, e.percentage = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
-				}), A.value = A.value.filter((e) => e.targetValue > 0), G.value = _, K.value = v, q.value = y, J.value = b, Y.value = x, X.value = S, Z.value = w, Qe.value = T, $e.value = E, Q.value = D, Je.value = !1);
+				}), A.value = A.value.filter((e) => e.targetValue > 0), W.value = _, G.value = v, K.value = y, Qe.value = b, q.value = x, J.value = S, Y.value = w, et.value = T, tt.value = E, X.value = D, Ye.value = !1);
 			};
 			u = requestAnimationFrame(O);
 		}, ut = (e) => {
 			if (e.isSingleSlice) return !0;
-			let t = $.value, n = -1;
+			let t = at.value, n = -1;
 			for (let r = t.length - 1; r >= 0; r--) if (t[r].item.id === e.item.id) {
 				n = r;
 				break;
@@ -913,16 +908,16 @@ var P = {
 		};
 		return w(B, (e) => {
 			let t = c.immediate || c.currentLowFxMode;
-			Ge(e || [], t), t || lt();
+			Ke(e || [], t), t || lt();
 		}, {
 			deep: !0,
 			immediate: !0
 		}), w(() => c.rotationAngle, () => {
-			Ye.value = !0, Xe && clearTimeout(Xe), Xe = setTimeout(() => {
-				Ye.value = !1;
+			Xe.value = !0, Ze && clearTimeout(Ze), Ze = setTimeout(() => {
+				Xe.value = !1;
 			}, 100);
-		}), w(qe, (e) => {
-			c.immediate || c.currentLowFxMode ? U.value = e : lt();
+		}), w(Je, (e) => {
+			c.immediate || c.currentLowFxMode ? H.value = e : lt();
 		}), w(() => c.isExpanded, () => {
 			d(() => {
 				lt();
@@ -937,15 +932,15 @@ var P = {
 			});
 		}), w(() => c.slopeRatio, (e) => {
 			if (c.is3D) {
-				J.value = c.isExpanded ? 180 * e : 48;
+				Qe.value = c.isExpanded ? 180 * e : 48;
 				let t = c.isExpanded ? 180 : 48, n = c.isExpanded ? 180 * e : 48;
-				Y.value = t * (1 - c.thickness), X.value = n * (1 - c.thickness);
+				q.value = t * (1 - c.thickness), J.value = n * (1 - c.thickness);
 				let r = c.isExpanded ? 32 : 0;
-				Z.value = e > .5 ? r * (2 - 2 * e) : r;
+				Y.value = e > .5 ? r * (2 - 2 * e) : r;
 			}
 		}), w(() => c.thickness, (e) => {
 			let t = c.is3D, n = c.isExpanded ? 180 : 48, r = c.isExpanded ? t ? 180 * c.slopeRatio : 180 : t ? 48 * c.slopeRatio : 48;
-			Y.value = n * (1 - e), X.value = r * (1 - e);
+			q.value = n * (1 - e), J.value = r * (1 - e);
 		}), w(() => c.hoveredItemId, (e) => {
 			_.value !== e && (_.value = e);
 		}), w(_, (e) => {
@@ -965,14 +960,14 @@ var P = {
 			ref: O,
 			class: f(["donut-canvas-wrapper", {
 				"is-expanded": t.isExpanded,
-				"no-transitions": Je.value || Ye.value || t.immediate
+				"no-transitions": Ye.value || Xe.value || t.immediate
 			}])
 		}, [(g(), o("svg", {
-			viewBox: `0 0 ${Qe.value} ${$e.value}`,
+			viewBox: `0 0 ${et.value} ${tt.value}`,
 			class: "items-svg-chart",
 			xmlns: "http://www.w3.org/2000/svg"
-		}, [B.value && B.value.length > 0 ? (g(), o("defs", H, [
-			(g(!0), o(e, null, y(rt.value, (e) => (g(), o("linearGradient", {
+		}, [B.value && B.value.length > 0 ? (g(), o("defs", te, [
+			(g(!0), o(e, null, y(ot.value, (e) => (g(), o("linearGradient", {
 				key: "top-grad-" + z(e.item.id),
 				id: "top-grad-" + z(e.item.id),
 				gradientUnits: "userSpaceOnUse",
@@ -983,11 +978,11 @@ var P = {
 			}, [s("stop", {
 				offset: "0%",
 				"stop-color": P(e.color, 1.15)
-			}, null, 8, ne), s("stop", {
+			}, null, 8, re), s("stop", {
 				offset: "100%",
 				"stop-color": N(e.color, .85)
-			}, null, 8, re)], 8, te))), 128)),
-			(g(!0), o(e, null, y(rt.value, (e) => (g(), o("linearGradient", {
+			}, null, 8, ie)], 8, ne))), 128)),
+			(g(!0), o(e, null, y(ot.value, (e) => (g(), o("linearGradient", {
 				key: "outer-grad-" + z(e.item.id),
 				id: "outer-grad-" + z(e.item.id),
 				gradientUnits: "userSpaceOnUse",
@@ -998,11 +993,11 @@ var P = {
 			}, [s("stop", {
 				offset: "0%",
 				"stop-color": N(e.color, .75)
-			}, null, 8, ae), s("stop", {
+			}, null, 8, oe), s("stop", {
 				offset: "100%",
 				"stop-color": N(e.color, .5)
-			}, null, 8, oe)], 8, ie))), 128)),
-			(g(!0), o(e, null, y(rt.value, (e) => (g(), o("linearGradient", {
+			}, null, 8, se)], 8, ae))), 128)),
+			(g(!0), o(e, null, y(ot.value, (e) => (g(), o("linearGradient", {
 				key: "inner-grad-" + z(e.item.id),
 				id: "inner-grad-" + z(e.item.id),
 				gradientUnits: "userSpaceOnUse",
@@ -1013,11 +1008,11 @@ var P = {
 			}, [s("stop", {
 				offset: "0%",
 				"stop-color": N(e.color, .6)
-			}, null, 8, ce), s("stop", {
+			}, null, 8, le), s("stop", {
 				offset: "100%",
 				"stop-color": N(e.color, .4)
-			}, null, 8, le)], 8, se))), 128))
-		])) : a("", !0), !B.value || B.value.length === 0 ? (g(), o("g", ue, [s("text", {
+			}, null, 8, ue)], 8, ce))), 128))
+		])) : a("", !0), !B.value || B.value.length === 0 ? (g(), o("g", de, [s("text", {
 			x: t.isExpanded ? 380 : 60,
 			y: t.isExpanded ? 160 : 60,
 			fill: "#64748b",
@@ -1025,20 +1020,20 @@ var P = {
 			"font-family": "system-ui, -apple-system, sans-serif",
 			"text-anchor": "middle",
 			"dominant-baseline": "middle"
-		}, S(t.emptyText || "No data"), 9, de)])) : (g(), o("g", fe, [
-			(g(!0), o(e, null, y($.value.filter((e) => e.midY < nt.value), (e) => (g(), o("g", {
+		}, S(t.emptyText || "No data"), 9, fe)])) : (g(), o("g", pe, [
+			(g(!0), o(e, null, y(at.value.filter((e) => e.midY < it.value), (e) => (g(), o("g", {
 				key: "slice-sub-back-" + e.item.id + "-" + e.midAngle,
 				class: f(["slice-group-3d", {
 					"is-hovered": C.value === e.item.id,
 					"is-dimmed": C.value !== null && C.value !== e.item.id
 				}]),
-				style: p(it(e))
+				style: p(st(e))
 			}, [
 				t.isExpanded && e.innerWallPath ? (g(), o("path", {
 					key: 0,
 					d: e.innerWallPath,
 					fill: `url(#inner-grad-${z(e.item.id)})`
-				}, null, 8, pe)) : a("", !0),
+				}, null, 8, me)) : a("", !0),
 				t.isExpanded && e.innerWallStrokePath ? (g(), o("path", {
 					key: 1,
 					d: e.innerWallStrokePath,
@@ -1046,22 +1041,22 @@ var P = {
 					stroke: `url(#inner-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, me)) : a("", !0),
+				}, null, 8, he)) : a("", !0),
 				t.isExpanded && e.startCutPath ? (g(), o("path", {
 					key: 2,
 					d: e.startCutPath,
 					fill: N(e.color, .65)
-				}, null, 8, he)) : a("", !0),
+				}, null, 8, ge)) : a("", !0),
 				t.isExpanded && e.endCutPath ? (g(), o("path", {
 					key: 3,
 					d: e.endCutPath,
 					fill: N(e.color, .75)
-				}, null, 8, ge)) : a("", !0),
+				}, null, 8, _e)) : a("", !0),
 				t.isExpanded && e.outerWallPath ? (g(), o("path", {
 					key: 4,
 					d: e.outerWallPath,
 					fill: `url(#outer-grad-${z(e.item.id)})`
-				}, null, 8, _e)) : a("", !0),
+				}, null, 8, ve)) : a("", !0),
 				t.isExpanded && e.outerWallStrokePath ? (g(), o("path", {
 					key: 5,
 					d: e.outerWallStrokePath,
@@ -1069,12 +1064,12 @@ var P = {
 					stroke: `url(#outer-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, ve)) : a("", !0),
+				}, null, 8, ye)) : a("", !0),
 				ut(e) ? (g(), o("path", {
 					key: 6,
 					d: e.originalTopPath,
 					fill: `url(#top-grad-${z(e.item.id)})`
-				}, null, 8, ye)) : a("", !0),
+				}, null, 8, be)) : a("", !0),
 				ut(e) ? (g(), o("path", {
 					key: 7,
 					d: e.topStrokePath,
@@ -1082,7 +1077,7 @@ var P = {
 					stroke: `url(#top-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, be)) : a("", !0),
+				}, null, 8, xe)) : a("", !0),
 				ut(e) ? (g(), o("path", {
 					key: 8,
 					d: e.topStrokePath,
@@ -1090,44 +1085,44 @@ var P = {
 					stroke: "rgba(255, 255, 255, 0.16)",
 					"stroke-width": t.isExpanded ? .8 : .5,
 					"stroke-linejoin": "round"
-				}, null, 8, xe)) : a("", !0)
+				}, null, 8, Se)) : a("", !0)
 			], 6))), 128)),
 			c.showCenterText ? (g(), o("g", {
 				key: 0,
-				transform: `translate(${G.value}, ${K.value})`,
+				transform: `translate(${W.value}, ${G.value})`,
 				class: "center-text-group"
 			}, [s("text", {
 				x: "0",
 				y: "-3",
 				class: "center-text-value",
-				"font-size": et.value,
+				"font-size": nt.value,
 				"font-weight": "bold",
 				"font-family": "'JetBrains Mono', monospace",
 				"text-anchor": "middle",
 				"dominant-baseline": "middle"
-			}, S(Ue.value), 9, Ce), s("text", {
+			}, S(We.value), 9, we), s("text", {
 				x: "0",
 				y: "10",
 				class: "center-text-label",
-				"font-size": tt.value,
+				"font-size": rt.value,
 				"font-family": "system-ui, -apple-system, sans-serif",
 				"font-weight": "600",
 				"text-anchor": "middle",
 				"dominant-baseline": "middle"
-			}, S(We.value), 9, we)], 8, Se)) : a("", !0),
-			(g(!0), o(e, null, y($.value.filter((e) => e.midY >= nt.value), (e) => (g(), o("g", {
+			}, S(Ge.value), 9, Te)], 8, Ce)) : a("", !0),
+			(g(!0), o(e, null, y(at.value.filter((e) => e.midY >= it.value), (e) => (g(), o("g", {
 				key: "slice-sub-front-" + e.item.id + "-" + e.midAngle,
 				class: f(["slice-group-3d", {
 					"is-hovered": C.value === e.item.id,
 					"is-dimmed": C.value !== null && C.value !== e.item.id
 				}]),
-				style: p(it(e))
+				style: p(st(e))
 			}, [
 				t.isExpanded && e.innerWallPath ? (g(), o("path", {
 					key: 0,
 					d: e.innerWallPath,
 					fill: `url(#inner-grad-${z(e.item.id)})`
-				}, null, 8, Te)) : a("", !0),
+				}, null, 8, Ee)) : a("", !0),
 				t.isExpanded && e.innerWallStrokePath ? (g(), o("path", {
 					key: 1,
 					d: e.innerWallStrokePath,
@@ -1135,22 +1130,22 @@ var P = {
 					stroke: `url(#inner-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, Ee)) : a("", !0),
+				}, null, 8, De)) : a("", !0),
 				t.isExpanded && e.startCutPath ? (g(), o("path", {
 					key: 2,
 					d: e.startCutPath,
 					fill: N(e.color, .65)
-				}, null, 8, De)) : a("", !0),
+				}, null, 8, Oe)) : a("", !0),
 				t.isExpanded && e.endCutPath ? (g(), o("path", {
 					key: 3,
 					d: e.endCutPath,
 					fill: N(e.color, .75)
-				}, null, 8, Oe)) : a("", !0),
+				}, null, 8, ke)) : a("", !0),
 				t.isExpanded && e.outerWallPath ? (g(), o("path", {
 					key: 4,
 					d: e.outerWallPath,
 					fill: `url(#outer-grad-${z(e.item.id)})`
-				}, null, 8, ke)) : a("", !0),
+				}, null, 8, Ae)) : a("", !0),
 				t.isExpanded && e.outerWallStrokePath ? (g(), o("path", {
 					key: 5,
 					d: e.outerWallStrokePath,
@@ -1158,12 +1153,12 @@ var P = {
 					stroke: `url(#outer-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, Ae)) : a("", !0),
+				}, null, 8, je)) : a("", !0),
 				ut(e) ? (g(), o("path", {
 					key: 6,
 					d: e.originalTopPath,
 					fill: `url(#top-grad-${z(e.item.id)})`
-				}, null, 8, je)) : a("", !0),
+				}, null, 8, Me)) : a("", !0),
 				ut(e) ? (g(), o("path", {
 					key: 7,
 					d: e.topStrokePath,
@@ -1171,7 +1166,7 @@ var P = {
 					stroke: `url(#top-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, Me)) : a("", !0),
+				}, null, 8, Ne)) : a("", !0),
 				ut(e) ? (g(), o("path", {
 					key: 8,
 					d: e.topStrokePath,
@@ -1179,9 +1174,9 @@ var P = {
 					stroke: "rgba(255, 255, 255, 0.16)",
 					"stroke-width": t.isExpanded ? .8 : .5,
 					"stroke-linejoin": "round"
-				}, null, 8, Ne)) : a("", !0)
+				}, null, 8, Pe)) : a("", !0)
 			], 6))), 128)),
-			(g(!0), o(e, null, y(rt.value, (e) => (g(), o("g", {
+			(g(!0), o(e, null, y(ot.value, (e) => (g(), o("g", {
 				key: "hover-trigger-" + e.item.id,
 				class: "hover-trigger-group",
 				style: p({ cursor: c.selectable && !j.value ? "pointer" : "default" }),
@@ -1191,18 +1186,18 @@ var P = {
 			}, [s("path", {
 				d: e.hoverPath || e.originalTopPath,
 				fill: "transparent"
-			}, null, 8, Fe), e.originalOuterWallPath ? (g(), o("path", {
+			}, null, 8, Ie), e.originalOuterWallPath ? (g(), o("path", {
 				key: 0,
 				d: e.originalOuterWallPath,
 				fill: "transparent"
-			}, null, 8, Ie)) : a("", !0)], 44, Pe))), 128)),
+			}, null, 8, Le)) : a("", !0)], 44, Fe))), 128)),
 			s("g", {
 				class: "labels-layer",
 				style: p({
-					opacity: Q.value,
-					pointerEvents: Q.value > .01 ? "auto" : "none"
+					opacity: X.value,
+					pointerEvents: X.value > .01 ? "auto" : "none"
 				})
-			}, [(g(!0), o(e, null, y(ot.value, (e, t) => (g(), o("g", {
+			}, [(g(!0), o(e, null, y(Z.value, (e, t) => (g(), o("g", {
 				key: "label-left-" + e.item.id,
 				class: f(["label-group", {
 					"is-hovered": C.value === e.item.id,
@@ -1213,11 +1208,11 @@ var P = {
 				onClick: (t) => E(e.item.id),
 				style: p({ cursor: c.selectable && !j.value ? "pointer" : "default" })
 			}, [s("path", {
-				d: ct(e),
+				d: $(e),
 				fill: "none",
 				stroke: e.color,
 				"stroke-width": "1.2"
-			}, null, 8, Re), s("text", {
+			}, null, 8, ze), s("text", {
 				x: "85",
 				y: e.finalY,
 				fill: e.color,
@@ -1227,7 +1222,7 @@ var P = {
 				"text-anchor": "end",
 				"dominant-baseline": "middle",
 				style: p(C.value === e.item.id ? "transform: translate(0, -5px);" : "")
-			}, S(R(e.item.name, 24)) + " " + S(L(e.item.value)) + " " + S(e.item.unit || "") + " (" + S(e.item.percentage) + "%) ", 13, ze)], 46, Le))), 128)), (g(!0), o(e, null, y(st.value, (e, t) => (g(), o("g", {
+			}, S(R(e.item.name, 24)) + " " + S(L(e.item.value)) + " " + S(e.item.unit || "") + " (" + S(e.item.percentage) + "%) ", 13, Be)], 46, Re))), 128)), (g(!0), o(e, null, y(Q.value, (e, t) => (g(), o("g", {
 				key: "label-right-" + e.item.id,
 				class: f(["label-group", {
 					"is-hovered": C.value === e.item.id,
@@ -1238,11 +1233,11 @@ var P = {
 				onClick: (t) => E(e.item.id),
 				style: p({ cursor: c.selectable && !j.value ? "pointer" : "default" })
 			}, [s("path", {
-				d: ct(e),
+				d: $(e),
 				fill: "none",
 				stroke: e.color,
 				"stroke-width": "1.2"
-			}, null, 8, Ve), s("text", {
+			}, null, 8, He), s("text", {
 				x: "675",
 				y: e.finalY,
 				fill: e.color,
@@ -1252,21 +1247,21 @@ var P = {
 				"text-anchor": "start",
 				"dominant-baseline": "middle",
 				style: p(C.value === e.item.id ? "transform: translate(0, -5px);" : "")
-			}, S(R(e.item.name, 24)) + " " + S(L(e.item.value)) + " " + S(e.item.unit || "") + " (" + S(e.item.percentage) + "%) ", 13, He)], 46, Be))), 128))], 4)
+			}, S(R(e.item.name, 24)) + " " + S(L(e.item.value)) + " " + S(e.item.unit || "") + " (" + S(e.item.percentage) + "%) ", 13, Ue)], 46, Ve))), 128))], 4)
 		]))], 8, ee))], 2));
 	}
-}, [["__scopeId", "data-v-f4b6c80f"]]), We = { class: "nano-scrub-label" }, Ge = {
+}, [["__scopeId", "data-v-acd0447d"]]), Ge = { class: "nano-scrub-label" }, Ke = {
 	key: 0,
 	class: "nano-scrub-overlay"
-}, Ke = {
+}, qe = {
 	key: 1,
 	class: "nano-scrub-svg-line"
-}, qe = [
+}, Je = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], U = { class: "nano-scrub-popup-val" }, Je = { class: "nano-scrub-popup-res" }, Ye = /* @__PURE__ */ F(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+], H = { class: "nano-scrub-popup-val" }, Ye = { class: "nano-scrub-popup-res" }, Xe = /* @__PURE__ */ F(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
 	__name: "PrecisionScrubber",
 	props: {
 		modelValue: {
@@ -1344,7 +1339,7 @@ var P = {
 		}, r.$attrs), [s("div", {
 			class: "nano-scrub-progress",
 			style: p({ width: O.value + "%" })
-		}, null, 4), s("span", We, S(n.label), 1)], 16), (g(), i(t, { to: "body" }, [m.value ? (g(), o("div", Ge, [
+		}, null, 4), s("span", Ge, S(n.label), 1)], 16), (g(), i(t, { to: "body" }, [m.value ? (g(), o("div", Ke, [
 			h.value ? (g(), o("div", {
 				key: 0,
 				class: "nano-scrub-anchor",
@@ -1353,7 +1348,7 @@ var P = {
 					top: x.value + "px"
 				})
 			}, null, 4)) : a("", !0),
-			h.value ? (g(), o("svg", Ke, [s("line", {
+			h.value ? (g(), o("svg", qe, [s("line", {
 				x1: b.value,
 				y1: x.value,
 				x2: w.value,
@@ -1362,7 +1357,7 @@ var P = {
 				"stroke-dasharray": "4,4",
 				"stroke-width": "1.5",
 				opacity: "0.6"
-			}, null, 8, qe)])) : a("", !0),
+			}, null, 8, Je)])) : a("", !0),
 			s("div", {
 				class: "nano-scrub-popup",
 				style: p({
@@ -1371,17 +1366,439 @@ var P = {
 				})
 			}, [
 				c[0] ||= s("div", { class: "nano-scrub-popup-title" }, "Scrubbing Mode", -1),
-				s("div", U, S(k.value), 1),
-				s("div", Je, S(E.value), 1)
+				s("div", H, S(k.value), 1),
+				s("div", Ye, S(E.value), 1)
 			], 4)
 		])) : a("", !0)]))], 64));
 	}
-}), [["__scopeId", "data-v-429ba0d9"]]);
+}), [["__scopeId", "data-v-21b41bc4"]]), Ze = { class: "header-inner" }, U = {
+	key: 0,
+	class: "header-left"
+}, W = {
+	key: 1,
+	class: "header-center"
+}, G = {
+	key: 2,
+	class: "header-right"
+}, K = /* @__PURE__ */ F({
+	__name: "MutatingHeader",
+	props: {
+		threshold: {
+			type: Number,
+			default: 24
+		},
+		hysteresis: {
+			type: Number,
+			default: 8
+		},
+		scrollContainer: {
+			type: [String, Object],
+			default: null
+		},
+		height: {
+			type: String,
+			default: "60px"
+		},
+		floatingMargin: {
+			type: String,
+			default: "12px 24px 0 24px"
+		},
+		floatingRadius: {
+			type: String,
+			default: "16px"
+		},
+		glassmorphism: {
+			type: Boolean,
+			default: !0
+		},
+		stuck: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: [
+		"update:stuck",
+		"stuck",
+		"unstick"
+	],
+	setup(e, { emit: t }) {
+		let n = e, i = t, c = v(!1), l = r({
+			get: () => n.stuck === void 0 ? c.value : n.stuck,
+			set: (e) => {
+				c.value = e, i("update:stuck", e), i(e ? "stuck" : "unstick");
+			}
+		}), u = null, d = () => u && u !== window ? u.scrollTop || 0 : window.scrollY || document.documentElement.scrollTop || 0, _ = () => {
+			let e = d(), t = n.threshold, r = n.hysteresis;
+			!l.value && e > t ? l.value = !0 : l.value && e < r && (l.value = !1);
+		}, y = () => {
+			x(), !(typeof window > "u") && (n.scrollContainer && (typeof n.scrollContainer == "string" ? u = document.querySelector(n.scrollContainer) : n.scrollContainer instanceof HTMLElement && (u = n.scrollContainer)), u ||= window, u.addEventListener("scroll", _, { passive: !0 }), _());
+		}, x = () => {
+			u &&= (u.removeEventListener("scroll", _), null);
+		};
+		return w(() => n.scrollContainer, () => {
+			y();
+		}), m(() => {
+			y();
+		}), h(() => {
+			x();
+		}), (t, n) => (g(), o("header", {
+			class: f(["nano-mutating-header", {
+				"is-stuck": l.value,
+				"has-glassmorphism": e.glassmorphism
+			}]),
+			style: p({
+				"--header-height": e.height,
+				"--floating-margin": e.floatingMargin,
+				"--floating-radius": e.floatingRadius
+			})
+		}, [s("div", Ze, [
+			t.$slots.left ? (g(), o("div", U, [b(t.$slots, "left", { isStuck: l.value }, void 0, !0)])) : a("", !0),
+			t.$slots.center ? (g(), o("div", W, [b(t.$slots, "center", { isStuck: l.value }, void 0, !0)])) : a("", !0),
+			t.$slots.right ? (g(), o("div", G, [b(t.$slots, "right", { isStuck: l.value }, void 0, !0)])) : a("", !0),
+			!t.$slots.left && !t.$slots.center && !t.$slots.right ? b(t.$slots, "default", {
+				key: 3,
+				isStuck: l.value
+			}, void 0, !0) : a("", !0)
+		])], 6));
+	}
+}, [["__scopeId", "data-v-fd47d0d0"]]), Qe = [
+	"viewBox",
+	"width",
+	"height"
+], q = ["points"], J = ["points"], $e = ["points"], Y = ["points"], et = [
+	"x1",
+	"y1",
+	"x2",
+	"y2"
+], tt = ["x", "y"], X = [
+	"points",
+	"fill",
+	"stroke",
+	"opacity"
+], nt = [
+	"points",
+	"fill",
+	"stroke"
+], rt = [
+	"cx",
+	"cy",
+	"fill"
+], it = /* @__PURE__ */ F({
+	__name: "TopologyRadar",
+	props: {
+		size: {
+			type: Number,
+			default: 200
+		},
+		history: {
+			type: Array,
+			required: !0
+		},
+		labels: {
+			type: Array,
+			default: () => []
+		},
+		color: {
+			type: String,
+			default: "#00e5ff"
+		}
+	},
+	setup(t) {
+		let n = t, i = r(() => n.labels.length > 0 ? n.labels.length : n.history.length > 0 ? n.history[0].length : 5), c = r(() => n.size * .4), l = r(() => n.size / 2), u = r(() => n.size / 2), d = (e, t) => {
+			let n = Math.PI * 2 * t / i.value - Math.PI / 2, r = e / 100 * c.value;
+			return {
+				x: l.value + Math.cos(n) * r,
+				y: u.value + Math.sin(n) * r
+			};
+		}, f = (e) => {
+			let t = [];
+			for (let n = 0; n < i.value; n++) {
+				let r = d(e * 100, n);
+				t.push(`${r.x},${r.y}`);
+			}
+			return t.join(" ");
+		}, m = (e) => e.map((e, t) => {
+			let n = d(e, t);
+			return `${n.x},${n.y}`;
+		}).join(" "), h = (e, t) => {
+			let n;
+			return /^#([A-Fa-f0-9]{3}){1,2}$/.test(e) ? (n = e.substring(1).split(""), n.length === 3 && (n = [
+				n[0],
+				n[0],
+				n[1],
+				n[1],
+				n[2],
+				n[2]
+			]), n = "0x" + n.join(""), "rgba(" + [
+				n >> 16 & 255,
+				n >> 8 & 255,
+				n & 255
+			].join(",") + "," + t + ")") : `rgba(0, 229, 255, ${t})`;
+		};
+		return (n, r) => (g(), o("div", {
+			class: "topology-radar-container",
+			style: p({
+				width: t.size + "px",
+				height: t.size + "px"
+			})
+		}, [(g(), o("svg", {
+			viewBox: `0 0 ${t.size} ${t.size}`,
+			width: t.size,
+			height: t.size,
+			style: { overflow: "visible" }
+		}, [
+			s("polygon", {
+				points: f(1),
+				fill: "var(--nano-radar-grid-bg, rgba(15,23,42,0.8))",
+				stroke: "var(--nano-radar-grid-stroke, rgba(255,255,255,0.1))",
+				"stroke-width": "1"
+			}, null, 8, q),
+			s("polygon", {
+				points: f(.75),
+				fill: "none",
+				stroke: "var(--nano-radar-grid-subtle, rgba(255,255,255,0.05))",
+				"stroke-width": "1"
+			}, null, 8, J),
+			s("polygon", {
+				points: f(.5),
+				fill: "none",
+				stroke: "var(--nano-radar-grid-subtle, rgba(255,255,255,0.05))",
+				"stroke-width": "1"
+			}, null, 8, $e),
+			s("polygon", {
+				points: f(.25),
+				fill: "none",
+				stroke: "var(--nano-radar-grid-subtle, rgba(255,255,255,0.05))",
+				"stroke-width": "1"
+			}, null, 8, Y),
+			(g(!0), o(e, null, y(t.labels, (e, n) => (g(), o("line", {
+				key: "axis-" + n,
+				x1: t.size / 2,
+				y1: t.size / 2,
+				x2: d(100, n).x,
+				y2: d(100, n).y,
+				stroke: "var(--nano-radar-grid-stroke, rgba(255,255,255,0.1))",
+				"stroke-width": "1"
+			}, null, 8, et))), 128)),
+			(g(!0), o(e, null, y(t.labels, (e, t) => (g(), o("text", {
+				key: "label-" + t,
+				x: d(115, t).x,
+				y: d(115, t).y,
+				fill: "var(--nano-radar-text, rgba(255,255,255,0.6))",
+				"font-size": "10",
+				"font-family": "monospace",
+				"font-weight": "bold",
+				"text-anchor": "middle",
+				"dominant-baseline": "middle"
+			}, S(e), 9, tt))), 128)),
+			(g(!0), o(e, null, y(t.history, (e, n) => (g(), o("polygon", {
+				key: "hist-" + n,
+				points: m(e),
+				fill: h(t.color, .02),
+				stroke: t.color,
+				"stroke-width": 1,
+				opacity: .1 + n / Math.max(1, t.history.length) * .4
+			}, null, 8, X))), 128)),
+			t.history.length > 0 ? (g(), o("polygon", {
+				key: 0,
+				points: m(t.history[t.history.length - 1]),
+				fill: h(t.color, .15),
+				stroke: t.color,
+				"stroke-width": "2.5",
+				style: { filter: "drop-shadow(0 0 8px rgba(0, 229, 255, 0.5))" }
+			}, null, 8, nt)) : a("", !0),
+			t.history.length > 0 ? (g(!0), o(e, { key: 1 }, y(t.history[t.history.length - 1], (e, n) => (g(), o("circle", {
+				key: "pt-" + n,
+				cx: d(e, n).x,
+				cy: d(e, n).y,
+				r: "3",
+				fill: t.color,
+				style: { filter: "drop-shadow(0 0 5px rgba(0, 229, 255, 0.8))" }
+			}, null, 8, rt))), 128)) : a("", !0)
+		], 8, Qe))], 4));
+	}
+}, [["__scopeId", "data-v-bb4bd598"]]), at = ["for"], ot = [
+	"checked",
+	"disabled",
+	"name",
+	"id",
+	"aria-checked"
+], st = {
+	key: 0,
+	class: "nano-switch-label"
+}, ct = /* @__PURE__ */ F({
+	__name: "NanoSwitch",
+	props: {
+		modelValue: {
+			type: [Boolean, null],
+			default: !1
+		},
+		indeterminate: {
+			type: Boolean,
+			default: !1
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		size: {
+			type: String,
+			default: "default",
+			validator: (e) => [
+				"default",
+				"compact",
+				"mini"
+			].includes(e)
+		},
+		color: {
+			type: String,
+			default: "primary"
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		name: {
+			type: String,
+			default: ""
+		},
+		id: {
+			type: String,
+			default: ""
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:indeterminate",
+		"change"
+	],
+	setup(e, { emit: t }) {
+		let n = e, i = t, l = v(null), u = r(() => n.indeterminate || n.modelValue === null), d = r(() => !u.value && !!n.modelValue);
+		w(u, (e) => {
+			l.value && (l.value.indeterminate = e);
+		}, { immediate: !0 });
+		let p = (e) => {
+			if (!n.disabled) if (u.value) i("update:indeterminate", !1), i("update:modelValue", !0), i("change", !0, e);
+			else {
+				let t = !d.value;
+				i("update:modelValue", t), i("change", t, e);
+			}
+		};
+		return (t, n) => (g(), o("label", {
+			class: f(["nano-switch", [
+				`size-${e.size}`,
+				`color-${e.color}`,
+				{
+					"is-checked": d.value,
+					"is-indeterminate": u.value,
+					"is-disabled": e.disabled
+				}
+			]]),
+			for: e.id || void 0
+		}, [
+			s("input", {
+				ref_key: "inputRef",
+				ref: l,
+				type: "checkbox",
+				class: "nano-switch-input",
+				checked: d.value,
+				disabled: e.disabled,
+				name: e.name || void 0,
+				id: e.id || void 0,
+				onChange: p,
+				role: "switch",
+				"aria-checked": u.value ? "mixed" : d.value
+			}, null, 40, ot),
+			n[0] ||= s("div", { class: "nano-switch-slider" }, null, -1),
+			e.label || t.$slots.default ? (g(), o("span", st, [b(t.$slots, "default", {}, () => [c(S(e.label), 1)], !0)])) : a("", !0)
+		], 10, at));
+	}
+}, [["__scopeId", "data-v-50b63887"]]), Z = {
+	instant: 100,
+	fast: 150,
+	normal: 200,
+	toggle: 250,
+	slow: 300,
+	ripple: 600
+}, Q = {
+	standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+	smooth: "cubic-bezier(0.16, 1, 0.3, 1)",
+	easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+	easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+	spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+	linear: "linear"
+}, $ = {
+	interactive: {
+		duration: Z.fast,
+		ease: Q.standard,
+		css: `${Z.fast}ms ${Q.standard}`
+	},
+	toggle: {
+		duration: Z.toggle,
+		ease: Q.standard,
+		css: `${Z.toggle}ms ${Q.standard}`
+	},
+	tooltip: {
+		duration: Z.normal,
+		ease: Q.smooth,
+		css: `${Z.normal}ms ${Q.smooth}`
+	},
+	header: {
+		duration: Z.normal,
+		ease: Q.smooth,
+		css: `${Z.normal}ms ${Q.smooth}`
+	},
+	chart: {
+		duration: Z.toggle,
+		ease: Q.standard,
+		css: `${Z.toggle}ms ${Q.standard}`
+	},
+	modal: {
+		backdrop: {
+			duration: Z.toggle,
+			ease: Q.easeOut,
+			css: `${Z.toggle}ms ${Q.easeOut}`
+		},
+		enter: {
+			duration: Z.slow,
+			ease: Q.spring,
+			css: `${Z.slow}ms ${Q.spring}`
+		},
+		leave: {
+			duration: Z.normal,
+			ease: Q.easeIn,
+			css: `${Z.normal}ms ${Q.easeIn}`
+		}
+	},
+	ripple: {
+		duration: Z.ripple,
+		ease: Q.linear,
+		css: `${Z.ripple}ms ${Q.linear}`
+	}
+}, lt = {
+	"--nano-duration-fast": `${Z.fast}ms`,
+	"--nano-duration": `${Z.normal}ms`,
+	"--nano-duration-toggle": `${Z.toggle}ms`,
+	"--nano-duration-slow": `${Z.slow}ms`,
+	"--nano-duration-ripple": `${Z.ripple}ms`,
+	"--nano-ease-standard": Q.standard,
+	"--nano-ease-smooth": Q.smooth,
+	"--nano-ease-spring": Q.spring,
+	"--nano-transition-interactive": $.interactive.css,
+	"--nano-transition-toggle": $.toggle.css,
+	"--nano-transition-tooltip": $.tooltip.css,
+	"--nano-transition-header": $.header.css,
+	"--nano-transition-chart": $.chart.css,
+	"--nano-transition-modal-backdrop": $.modal.backdrop.css,
+	"--nano-transition-modal-enter": $.modal.enter.css,
+	"--nano-transition-modal-leave": $.modal.leave.css,
+	"--nano-transition-ripple": $.ripple.css
+};
 //#endregion
 //#region src/index.js
 k.init("nano-ui", "https://analytics.7u.pl");
-var Xe = { install(e) {
-	e.directive("ripple", A), e.directive("tooltip", P), e.component("GlobalTooltip", I), e.component("NanoModal", V), e.component("ThreeDDonutChart", Ue), e.component("PrecisionScrubber", Ye);
+var ut = { install(e) {
+	e.directive("ripple", A), e.directive("tooltip", P), e.component("GlobalTooltip", I), e.component("NanoModal", V), e.component("ThreeDDonutChart", We), e.component("PrecisionScrubber", Xe), e.component("TopologyRadar", it), e.component("MutatingHeader", K), e.component("NanoSwitch", ct);
 } };
 //#endregion
-export { I as GlobalTooltip, V as NanoModal, Ye as PrecisionScrubber, A as Ripple, Ue as ThreeDDonutChart, Xe as default, N as hideTooltip, M as showTooltip, P as tooltipDirective, j as tooltipState };
+export { I as GlobalTooltip, K as MutatingHeader, V as NanoModal, ct as NanoSwitch, Xe as PrecisionScrubber, A as Ripple, We as ThreeDDonutChart, it as TopologyRadar, ut as default, Z as durations, Q as easings, N as hideTooltip, M as showTooltip, P as tooltipDirective, j as tooltipState, lt as transitionVariables, $ as transitions };