@v1nt1248/3nclient-lib 0.3.27 → 0.3.28

package/dist/ui3n-components.js

@@ -1,8 +1,8 @@
 import { $ as e, B as t, Q as n, R as r, T as i, V as a, X as o, Z as s, at as c, ct as l, dt as u, et as d, ft as f, ht as p, it as m, lt as h, mt as g, nt as _, o as v, ot as y, pt as b, rt as x, st as S, t as C, tt as w, ut as T, v as E, z as D } from "./chunks/plugins-keys-jqAZ5D94.js";
-import { a as ee, i as O, n as k, r as A, t as j } from "./chunks/ui3n-notification-DlDM-u-R.js";
-import { t as te } from "./chunks/emoticons-DMgiBINj.js";
-import M from "sanitize-html";
-import { autoUpdate as ne, computePosition as re, offset as ie } from "@floating-ui/dom";
+import { a as ee, i as O, n as k, r as te, t as A } from "./chunks/ui3n-notification-DlDM-u-R.js";
+import { t as ne } from "./chunks/emoticons-DMgiBINj.js";
+import j from "sanitize-html";
+import { autoUpdate as M, computePosition as re, offset as ie } from "@floating-ui/dom";
 import { Fragment as N, Teleport as ae, Transition as oe, computed as P, createBlock as F, createCommentVNode as I, createElementBlock as L, createElementVNode as R, createTextVNode as se, createVNode as z, defineComponent as B, getCurrentInstance as ce, inject as le, mergeProps as ue, nextTick as de, normalizeClass as V, normalizeStyle as H, onBeforeMount as fe, onBeforeUnmount as pe, onMounted as U, openBlock as W, provide as me, ref as G, renderList as he, renderSlot as K, resolveDynamicComponent as ge, toDisplayString as q, toHandlers as _e, unref as J, useCssModule as ve, useCssVars as ye, useSlots as be, useTemplateRef as xe, vModelText as Se, watch as Y, withCtx as X, withDirectives as Ce, withKeys as Z, withModifiers as Q } from "vue";
 import { arrow as we, autoUpdate as Te, flip as Ee, offset as De, shift as Oe, useFloating as ke } from "@floating-ui/vue";
 //#region node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_arrayMap.js
@@ -508,37 +508,37 @@ var Ae = /* @__PURE__ */ g(((e, t) => {
 	var n = Gt(), r = x(), i = _(), a = i && i.isSet;
 	t.exports = a ? r(a) : n;
 })), qt = /* @__PURE__ */ g(((e, t) => {
-	var n = at(), r = ot(), i = lt(), a = ht(), s = yt(), l = bt(), u = xt(), d = Tt(), f = kt(), p = jt(), h = Mt(), g = o(), _ = Nt(), v = Bt(), y = Ht(), b = c(), x = m(), S = Wt(), C = T(), w = Kt(), E = mt(), D = vt(), ee = 1, O = 2, k = 4, A = "[object Arguments]", j = "[object Array]", te = "[object Boolean]", M = "[object Date]", ne = "[object Error]", re = "[object Function]", ie = "[object GeneratorFunction]", N = "[object Map]", ae = "[object Number]", oe = "[object Object]", P = "[object RegExp]", F = "[object Set]", I = "[object String]", L = "[object Symbol]", R = "[object WeakMap]", se = "[object ArrayBuffer]", z = "[object DataView]", B = "[object Float32Array]", ce = "[object Float64Array]", le = "[object Int8Array]", ue = "[object Int16Array]", de = "[object Int32Array]", V = "[object Uint8Array]", H = "[object Uint8ClampedArray]", fe = "[object Uint16Array]", pe = "[object Uint32Array]", U = {};
-	U[A] = U[j] = U[se] = U[z] = U[te] = U[M] = U[B] = U[ce] = U[le] = U[ue] = U[de] = U[N] = U[ae] = U[oe] = U[P] = U[F] = U[I] = U[L] = U[V] = U[H] = U[fe] = U[pe] = !0, U[ne] = U[re] = U[R] = !1;
+	var n = at(), r = ot(), i = lt(), a = ht(), s = yt(), l = bt(), u = xt(), d = Tt(), f = kt(), p = jt(), h = Mt(), g = o(), _ = Nt(), v = Bt(), y = Ht(), b = c(), x = m(), S = Wt(), C = T(), w = Kt(), E = mt(), D = vt(), ee = 1, O = 2, k = 4, te = "[object Arguments]", A = "[object Array]", ne = "[object Boolean]", j = "[object Date]", M = "[object Error]", re = "[object Function]", ie = "[object GeneratorFunction]", N = "[object Map]", ae = "[object Number]", oe = "[object Object]", P = "[object RegExp]", F = "[object Set]", I = "[object String]", L = "[object Symbol]", R = "[object WeakMap]", se = "[object ArrayBuffer]", z = "[object DataView]", B = "[object Float32Array]", ce = "[object Float64Array]", le = "[object Int8Array]", ue = "[object Int16Array]", de = "[object Int32Array]", V = "[object Uint8Array]", H = "[object Uint8ClampedArray]", fe = "[object Uint16Array]", pe = "[object Uint32Array]", U = {};
+	U[te] = U[A] = U[se] = U[z] = U[ne] = U[j] = U[B] = U[ce] = U[le] = U[ue] = U[de] = U[N] = U[ae] = U[oe] = U[P] = U[F] = U[I] = U[L] = U[V] = U[H] = U[fe] = U[pe] = !0, U[M] = U[re] = U[R] = !1;
 	function W(e, t, o, c, m, T) {
-		var j, te = t & ee, M = t & O, ne = t & k;
-		if (o && (j = m ? o(e, c, m, T) : o(e)), j !== void 0) return j;
+		var A, ne = t & ee, j = t & O, M = t & k;
+		if (o && (A = m ? o(e, c, m, T) : o(e)), A !== void 0) return A;
 		if (!C(e)) return e;
 		var N = b(e);
 		if (N) {
-			if (j = _(e), !te) return u(e, j);
+			if (A = _(e), !ne) return u(e, A);
 		} else {
 			var ae = g(e), P = ae == re || ae == ie;
-			if (x(e)) return l(e, te);
-			if (ae == oe || ae == A || P && !m) {
-				if (j = M || P ? {} : y(e), !te) return M ? f(e, s(j, e)) : d(e, a(j, e));
+			if (x(e)) return l(e, ne);
+			if (ae == oe || ae == te || P && !m) {
+				if (A = j || P ? {} : y(e), !ne) return j ? f(e, s(A, e)) : d(e, a(A, e));
 			} else {
 				if (!U[ae]) return m ? e : {};
-				j = v(e, ae, te);
+				A = v(e, ae, ne);
 			}
 		}
 		T ||= new n();
 		var F = T.get(e);
 		if (F) return F;
-		T.set(e, j), w(e) ? e.forEach(function(n) {
-			j.add(W(n, t, o, n, e, T));
+		T.set(e, A), w(e) ? e.forEach(function(n) {
+			A.add(W(n, t, o, n, e, T));
 		}) : S(e) && e.forEach(function(n, r) {
-			j.set(r, W(n, t, o, r, e, T));
+			A.set(r, W(n, t, o, r, e, T));
 		});
-		var I = N ? void 0 : (ne ? M ? h : p : M ? D : E)(e);
+		var I = N ? void 0 : (M ? j ? h : p : j ? D : E)(e);
 		return r(I || e, function(n, r) {
-			I && (r = n, n = e[r]), i(j, r, W(n, t, o, r, e, T));
-		}), j;
+			I && (r = n, n = e[r]), i(A, r, W(n, t, o, r, e, T));
+		}), A;
 	}
 	t.exports = W;
 })), Jt = /* @__PURE__ */ g(((e, t) => {
@@ -783,11 +783,11 @@ function Cn(e, t) {
 		return;
 	}
 	if (typeof r == "string") {
-		e.innerHTML = M(r);
+		e.innerHTML = j(r);
 		return;
 	}
 	try {
-		e.innerHTML = M(r.dirty, { ...(0, Sn.default)(r, "dirty") });
+		e.innerHTML = j(r.dirty, { ...(0, Sn.default)(r, "dirty") });
 		return;
 	} catch (e) {
 		throw Error("[v-ui3n-html] ", e);
@@ -946,7 +946,7 @@ function Hn(e, t, n) {
 		return;
 	}
 	let f = document.getElementById(Ln), p = f || document.createElement("div");
-	f || (p.id = Ln, p.classList.add("ui3n-title")), p.innerHTML = r, p.style.maxWidth = `${i}px`, p.style.color = a, p.style.backgroundColor = o, Object.keys(d).length && Object.assign(p.style, d), e.insertAdjacentElement("beforeend", p), In = ne(e, p, () => {
+	f || (p.id = Ln, p.classList.add("ui3n-title")), p.innerHTML = r, p.style.maxWidth = `${i}px`, p.style.color = a, p.style.backgroundColor = o, Object.keys(d).length && Object.assign(p.style, d), e.insertAdjacentElement("beforeend", p), In = M(e, p, () => {
 		re(e, p, {
 			placement: s,
 			strategy: c,
@@ -1215,11 +1215,11 @@ var Xn = {
 	},
 	emits: ["click"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = G(null), a = P(() => te[n.emoji]);
+		let n = e, r = t, i = G(null), a = P(() => ne[n.emoji]);
 		U(() => {
 			i.value && i.value.style.setProperty("--ui3n-emoji-size", `${n.size}px`);
 		}), Y(() => n.emoji, (e) => {
-			Object.keys(te).includes(e) || console.error(`[Ui3nEmoji] Invalid emoticon: ${e}`);
+			Object.keys(ne).includes(e) || console.error(`[Ui3nEmoji] Invalid emoticon: ${e}`);
 		}, { immediate: !0 }), Y(() => n.size, (e, t) => {
 			i.value && e && e !== t && i.value.style.setProperty("--ui3n-emoji-size", `${e}px`);
 		});
@@ -1408,7 +1408,7 @@ var Xn = {
 					key: 1,
 					class: V(t.$style.appendIconSlot)
 				}, [
-					p.value ? (W(), F(A, {
+					p.value ? (W(), F(te, {
 						key: 0,
 						icon: "round-check-circle-outline",
 						size: 16,
@@ -1931,7 +1931,7 @@ var Xn = {
 			mode: "out-in",
 			name: "fade"
 		}, {
-			default: X(() => [(W(), F(A, {
+			default: X(() => [(W(), F(te, {
 				key: e.value === "asc" ? "round-arrow-upward" : "round-arrow-downward",
 				icon: e.value === "asc" ? "round-arrow-upward" : "round-arrow-downward",
 				width: n.value,
@@ -2319,7 +2319,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 			e.title && !t.$slots.header ? (W(), L("div", {
 				key: 0,
 				class: V([t.$style.title, t.$style.titleDefault])
-			}, [c.value ? (W(), F(A, ue({ key: 0 }, c.value, { class: t.$style.icon }), null, 16, ["class"])) : I("", !0), R("span", null, q(e.title), 1)], 2)) : I("", !0),
+			}, [c.value ? (W(), F(te, ue({ key: 0 }, c.value, { class: t.$style.icon }), null, 16, ["class"])) : I("", !0), R("span", null, q(e.title), 1)], 2)) : I("", !0),
 			t.$slots.header ? (W(), L("div", {
 				key: 1,
 				class: V(t.$style.title)
@@ -2542,7 +2542,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 	ui3nListItem: "_ui3nListItem_1ou60_25",
 	ui3nListItemContent: "_ui3nListItemContent_1ou60_42",
 	ui3nListItemContentDisabled: "_ui3nListItemContentDisabled_1ou60_49"
-} }]]), Gr = 40, Kr = /* @__PURE__ */ O(/* @__PURE__ */ B({
+} }]]), Gr = 32, Kr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 	__name: "ui3n-scrollbar-vertical",
 	props: {
 		thumbMinHeight: { default: Gr },
@@ -2552,6 +2552,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 		thumbHoverColor: { default: "var(--color-bg-control-accent-hover)" },
 		thumbActiveColor: { default: "var(--color-bg-control-accent-focused)" },
 		trackWidth: { default: 6 },
+		trackRadius: { default: 4 },
 		trackColor: { default: "transparent" }
 	},
 	emits: ["scroll"],
@@ -2577,11 +2578,14 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 		}), w = P(() => r.thumbColor), T = P(() => r.thumbHoverColor), E = P(() => r.thumbActiveColor), D = P(() => {
 			let e = Number(r.trackWidth);
 			return isNaN(e) ? String(r.trackWidth) : `${e}px`;
-		}), ee = P(() => r.trackColor);
-		function O() {
+		}), ee = P(() => r.trackColor), O = P(() => {
+			let e = Number(r.trackRadius);
+			return isNaN(e) ? String(r.trackRadius) : `${e}px`;
+		});
+		function k() {
 			a.value && (c.value = a.value.scrollHeight, l.value = a.value.clientHeight, u.value = a.value.scrollTop);
 		}
-		function k(e) {
+		function te(e) {
 			d.value || (u.value = e.target.scrollTop), p.value = !0, window.clearTimeout(h), h = window.setTimeout(() => {
 				p.value = !1;
 			}, 1500), i("scroll", e);
@@ -2594,10 +2598,10 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 				behavior: "smooth"
 			});
 		}
-		function j(e) {
-			!s.value || !a.value || (e.preventDefault(), e.stopPropagation(), s.value.setPointerCapture(e.pointerId), d.value = !0, g = e.clientY, _ = u.value, document.body.style.userSelect = "none", s.value.addEventListener("pointermove", te), s.value.addEventListener("pointerup", M), s.value.addEventListener("pointercancel", M));
+		function ne(e) {
+			!s.value || !a.value || (e.preventDefault(), e.stopPropagation(), s.value.setPointerCapture(e.pointerId), d.value = !0, g = e.clientY, _ = u.value, document.body.style.userSelect = "none", s.value.addEventListener("pointermove", j), s.value.addEventListener("pointerup", M), s.value.addEventListener("pointercancel", M));
 		}
-		function te(e) {
+		function j(e) {
 			if (!d.value || !a.value) return;
 			let t = e.clientY - g, n = c.value - l.value, r = t / (l.value - x.value) * n;
 			a.value.scrollTop = _ + r, u.value = a.value.scrollTop;
@@ -2607,13 +2611,13 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 				try {
 					s.value.releasePointerCapture(e.pointerId);
 				} catch {}
-				s.value.removeEventListener("pointermove", te), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M);
+				s.value.removeEventListener("pointermove", j), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M);
 			}
 		}
 		return U(() => {
-			O(), a.value && (m = new ResizeObserver(O), m.observe(a.value), a.value.firstElementChild && m.observe(a.value.firstElementChild));
+			k(), a.value && (m = new ResizeObserver(k), m.observe(a.value), a.value.firstElementChild && m.observe(a.value.firstElementChild));
 		}), pe(() => {
-			m?.disconnect(), window.clearTimeout(h), s.value && (s.value.removeEventListener("pointermove", te), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M)), document.body.style.userSelect = "";
+			m?.disconnect(), window.clearTimeout(h), s.value && (s.value.removeEventListener("pointermove", j), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M)), document.body.style.userSelect = "";
 		}), t({
 			scrollTo: (e) => {
 				a.value?.scrollTo(e);
@@ -2627,6 +2631,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 				"--ui3n-scrollbar-thumb-hover-color": T.value,
 				"--ui3n-scrollbar-thumb-active-color": E.value,
 				"--ui3n-scrollbar-track-width": D.value,
+				"--ui3n-scrollbar-track-radius": O.value,
 				"--ui3n-scrollbar-track-color": ee.value
 			}),
 			onMouseenter: t[0] ||= (e) => f.value = !0,
@@ -2635,7 +2640,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 			ref_key: "containerRef",
 			ref: a,
 			class: V(e.$style.scrollbarContainer),
-			onScroll: k
+			onScroll: te
 		}, [K(e.$slots, "default")], 34), R("div", {
 			ref_key: "trackRef",
 			ref: o,
@@ -2649,16 +2654,16 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 				height: `${x.value}px`,
 				transform: `translateY(${S.value}px)`
 			}),
-			onPointerdown: j
+			onPointerdown: ne
 		}, null, 38)], 34)], 38));
 	}
 }), [["__cssModules", { $style: {
-	ui3nScrollbarVertical: "_ui3nScrollbarVertical_18kmr_1",
-	scrollbarContainer: "_scrollbarContainer_18kmr_8",
-	track: "_track_18kmr_21",
-	trackVisible: "_trackVisible_18kmr_35",
-	thumb: "_thumb_18kmr_41",
-	active: "_active_18kmr_54"
+	ui3nScrollbarVertical: "_ui3nScrollbarVertical_fjwb1_1",
+	scrollbarContainer: "_scrollbarContainer_fjwb1_8",
+	track: "_track_fjwb1_21",
+	trackVisible: "_trackVisible_fjwb1_36",
+	thumb: "_thumb_fjwb1_42",
+	active: "_active_fjwb1_55"
 } }]]), qr = ["data-sid"], Jr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 	__name: "ui3n-virtual-scroll",
 	props: {
@@ -3411,7 +3416,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 					e.disabled && t.$style.btnDisabled
 				]),
 				onClick: Q(b, ["stop", "prevent"])
-			}, [z(A, {
+			}, [z(te, {
 				icon: "round-done",
 				size: "12",
 				color: "var(--color-icon-table-accent-default)"
@@ -3423,7 +3428,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 					e.disabled && t.$style.btnDisabled
 				]),
 				onClick: Q(x, ["stop", "prevent"])
-			}, [z(A, {
+			}, [z(te, {
 				icon: "round-close",
 				size: "12",
 				color: "var(--color-icon-table-secondary-default)"
@@ -3438,7 +3443,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 		}, q(u.value || e.placeholder || "..."), 513), Ce((W(), L("div", {
 			class: V([t.$style.btn, t.$style.editBtn]),
 			onClick: Q(v, ["stop", "prevent"])
-		}, [z(A, {
+		}, [z(te, {
 			icon: "round-edit",
 			size: "12",
 			color: "var(--color-icon-control-accent-unselected)"
@@ -4024,7 +4029,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 					class: V(t.$style.clearBtn),
 					onClick: Q(y, ["stop", "prevent"])
 				}, null, 8, ["disabled", "class"])) : I("", !0),
-				z(A, {
+				z(te, {
 					icon: "outline-arrow-drop-down",
 					color: "var(--color-icon-block-primary-default)",
 					size: "16",
@@ -4129,7 +4134,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 		return (t, n) => (W(), L("div", {
 			class: V([t.$style.menuItem, e.isActive && t.$style.menuItemSelected]),
 			onClick: i
-		}, [e.item.icon ? (W(), F(A, {
+		}, [e.item.icon ? (W(), F(te, {
 			key: 0,
 			icon: e.item.icon,
 			size: "20",
@@ -4141,7 +4146,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 	menuItemName: "_menuItemName_5dv4z_15",
 	menuItemSelected: "_menuItemSelected_5dv4z_21",
 	bounceOnce: "_bounceOnce_5dv4z_1"
-} }]]), Mi = 40, Ni = /* @__PURE__ */ O(/* @__PURE__ */ B({
+} }]]), Mi = 32, Ni = /* @__PURE__ */ O(/* @__PURE__ */ B({
 	__name: "ui3n-scroolbar-horizontal",
 	props: {
 		thumbMinWidth: { default: Mi },
@@ -4151,6 +4156,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 		thumbHoverColor: { default: "var(--color-bg-control-accent-hover)" },
 		thumbActiveColor: { default: "var(--color-bg-control-accent-focused)" },
 		trackHeight: { default: 6 },
+		trackRadius: { default: 4 },
 		trackColor: { default: "transparent" }
 	},
 	emits: ["scroll"],
@@ -4176,11 +4182,14 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 		}), w = P(() => r.thumbColor), T = P(() => r.thumbHoverColor), E = P(() => r.thumbActiveColor), D = P(() => {
 			let e = Number(r.trackHeight);
 			return isNaN(e) ? String(r.trackHeight) : `${e}px`;
-		}), ee = P(() => r.trackColor);
-		function O() {
+		}), ee = P(() => {
+			let e = Number(r.trackRadius);
+			return isNaN(e) ? String(r.trackRadius) : `${e}px`;
+		}), O = P(() => r.trackColor);
+		function k() {
 			a.value && (c.value = a.value.scrollWidth, l.value = a.value.clientWidth, u.value = a.value.scrollLeft);
 		}
-		function k(e) {
+		function te(e) {
 			d.value || (u.value = e.target.scrollLeft), p.value = !0, window.clearTimeout(h), h = window.setTimeout(() => {
 				p.value = !1;
 			}, 1500), i("scroll", e);
@@ -4193,10 +4202,10 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 				behavior: "smooth"
 			});
 		}
-		function j(e) {
-			!s.value || !a.value || (e.preventDefault(), e.stopPropagation(), s.value.setPointerCapture(e.pointerId), d.value = !0, g = e.clientX, _ = u.value, document.body.style.userSelect = "none", s.value.addEventListener("pointermove", te), s.value.addEventListener("pointerup", M), s.value.addEventListener("pointercancel", M));
+		function ne(e) {
+			!s.value || !a.value || (e.preventDefault(), e.stopPropagation(), s.value.setPointerCapture(e.pointerId), d.value = !0, g = e.clientX, _ = u.value, document.body.style.userSelect = "none", s.value.addEventListener("pointermove", j), s.value.addEventListener("pointerup", M), s.value.addEventListener("pointercancel", M));
 		}
-		function te(e) {
+		function j(e) {
 			if (!d.value || !a.value) return;
 			let t = e.clientX - g, n = c.value - l.value, r = t / (l.value - x.value) * n;
 			a.value.scrollLeft = _ + r, u.value = a.value.scrollLeft;
@@ -4206,13 +4215,13 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 				try {
 					s.value.releasePointerCapture(e.pointerId);
 				} catch {}
-				s.value.removeEventListener("pointermove", te), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M);
+				s.value.removeEventListener("pointermove", j), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M);
 			}
 		}
 		return U(() => {
-			O(), a.value && (m = new ResizeObserver(O), m.observe(a.value), a.value.firstElementChild && m.observe(a.value.firstElementChild));
+			k(), a.value && (m = new ResizeObserver(k), m.observe(a.value), a.value.firstElementChild && m.observe(a.value.firstElementChild));
 		}), pe(() => {
-			m?.disconnect(), window.clearTimeout(h), s.value && (s.value.removeEventListener("pointermove", te), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M)), document.body.style.userSelect = "";
+			m?.disconnect(), window.clearTimeout(h), s.value && (s.value.removeEventListener("pointermove", j), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M)), document.body.style.userSelect = "";
 		}), t({
 			scrollTo: (e) => {
 				a.value?.scrollTo(e);
@@ -4226,7 +4235,8 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 				"--ui3n-scrollbar-horizontal-thumb-hover-color": T.value,
 				"--ui3n-scrollbar-horizontal-thumb-active-color": E.value,
 				"--ui3n-scrollbar-horizontal-track-height": D.value,
-				"--ui3n-scrollbar-horizontal-track-color": ee.value
+				"--ui3n-scrollbar-horizontal-track-radius": ee.value,
+				"--ui3n-scrollbar-horizontal-track-color": O.value
 			}),
 			onMouseenter: t[0] ||= (e) => f.value = !0,
 			onMouseleave: t[1] ||= (e) => f.value = !1
@@ -4234,7 +4244,7 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 			ref_key: "containerRef",
 			ref: a,
 			class: V(e.$style.scrollbarContainer),
-			onScroll: k
+			onScroll: te
 		}, [K(e.$slots, "default")], 34), R("div", {
 			ref_key: "trackRef",
 			ref: o,
@@ -4248,16 +4258,16 @@ var Br = ["id"], Vr = /* @__PURE__ */ O(/* @__PURE__ */ B({
 				width: `${x.value}px`,
 				transform: `translateX(${S.value}px)`
 			}),
-			onPointerdown: j
+			onPointerdown: ne
 		}, null, 38)], 34)], 38));
 	}
 }), [["__cssModules", { $style: {
-	ui3nScrollbarHorizontal: "_ui3nScrollbarHorizontal_cads6_1",
-	scrollbarContainer: "_scrollbarContainer_cads6_8",
-	track: "_track_cads6_22",
-	trackVisible: "_trackVisible_cads6_36",
-	thumb: "_thumb_cads6_42",
-	active: "_active_cads6_55"
+	ui3nScrollbarHorizontal: "_ui3nScrollbarHorizontal_1ne48_1",
+	scrollbarContainer: "_scrollbarContainer_1ne48_8",
+	track: "_track_1ne48_22",
+	trackVisible: "_trackVisible_1ne48_37",
+	thumb: "_thumb_1ne48_43",
+	active: "_active_1ne48_56"
 } }]]);
 //#endregion
 //#region src/composables/useDblClickHandler.ts
@@ -4271,4 +4281,4 @@ function Pi(e, t, n = 250) {
 	return { handleDblClick: a };
 }
 //#endregion
-export { Ei as Ui3nAutocomplete, Zr as Ui3nBadge, Qr as Ui3nBreadcrumb, $r as Ui3nBreadcrumbs, k as Ui3nButton, jr as Ui3nCheckbox, Zn as Ui3nChip, En as Ui3nClickOutside, Vr as Ui3nDialog, Rr as Ui3nDialogProvider, $n as Ui3nDropFiles, Si as Ui3nEditable, er as Ui3nEmoji, wn as Ui3nHtml, A as Ui3nIcon, nr as Ui3nInput, Tr as Ui3nInputFile, Wr as Ui3nList, Xn as Ui3nLongPress, Hr as Ui3nMenu, Ai as Ui3nMobileMenu, ji as Ui3nMobileMenuItem, j as Ui3nNotification, di as Ui3nProgressCircular, oi as Ui3nProgressLinear, _i as Ui3nRadio, vi as Ui3nRadioGroup, Nn as Ui3nResize, ee as Ui3nRipple, Ni as Ui3nScrollbarHorizontal, Kr as Ui3nScrollbarVertical, ki as Ui3nSelector, Di as Ui3nSlider, ni as Ui3nStepLineBar, ti as Ui3nSwitch, Ir as Ui3nTable, Mr as Ui3nTableSortIcon, Yr as Ui3nTabs, Dr as Ui3nText, Un as Ui3nTitle, pi as Ui3nTooltip, Jr as Ui3nVirtualScroll, Pi as useDblClickHandler };
+export { Ei as Ui3nAutocomplete, Zr as Ui3nBadge, Qr as Ui3nBreadcrumb, $r as Ui3nBreadcrumbs, k as Ui3nButton, jr as Ui3nCheckbox, Zn as Ui3nChip, En as Ui3nClickOutside, Vr as Ui3nDialog, Rr as Ui3nDialogProvider, $n as Ui3nDropFiles, Si as Ui3nEditable, er as Ui3nEmoji, wn as Ui3nHtml, te as Ui3nIcon, nr as Ui3nInput, Tr as Ui3nInputFile, Wr as Ui3nList, Xn as Ui3nLongPress, Hr as Ui3nMenu, Ai as Ui3nMobileMenu, ji as Ui3nMobileMenuItem, A as Ui3nNotification, di as Ui3nProgressCircular, oi as Ui3nProgressLinear, _i as Ui3nRadio, vi as Ui3nRadioGroup, Nn as Ui3nResize, ee as Ui3nRipple, Ni as Ui3nScrollbarHorizontal, Kr as Ui3nScrollbarVertical, ki as Ui3nSelector, Di as Ui3nSlider, ni as Ui3nStepLineBar, ti as Ui3nSwitch, Ir as Ui3nTable, Mr as Ui3nTableSortIcon, Yr as Ui3nTabs, Dr as Ui3nText, Un as Ui3nTitle, pi as Ui3nTooltip, Jr as Ui3nVirtualScroll, Pi as useDblClickHandler };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.27",
+  "version": "0.3.28",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/ui3n-scrollbar-horizontal/types.ts

@@ -8,6 +8,7 @@ export interface Ui3nScrollbarHorizontalProps {
   thumbHoverColor?: string;
   thumbActiveColor?: string;
   trackHeight?: number | string;
+  trackRadius?: number | string;
   trackColor?: string;
 }
 

package/src/components/ui3n-scrollbar-horizontal/ui3n-scroolbar-horizontal.vue

@@ -7,7 +7,7 @@
     Ui3nScrollbarHorizontalExpose,
   } from './types';
 
-  const MIN_WIDTH = 40;
+  const MIN_WIDTH = 32;
 
   const props = withDefaults(defineProps<Ui3nScrollbarHorizontalProps>(), {
     thumbMinWidth: MIN_WIDTH,
@@ -17,6 +17,7 @@
     thumbHoverColor: 'var(--color-bg-control-accent-hover)',
     thumbActiveColor: 'var(--color-bg-control-accent-focused)',
     trackHeight: 6,
+    trackRadius: 4,
     trackColor: 'transparent',
   });
 
@@ -91,6 +92,10 @@
     const num = Number(props.trackHeight);
     return isNaN(num) ? String(props.trackHeight) : `${num}px`;
   });
+  const trackRadiusCss = computed(() => {
+    const num = Number(props.trackRadius);
+    return isNaN(num) ? String(props.trackRadius) : `${num}px`;
+  });
   const trackColorCss = computed(() => props.trackColor);
 
   function updateMetrics() {
@@ -232,6 +237,7 @@
       '--ui3n-scrollbar-horizontal-thumb-hover-color': thumbHoverColorCss,
       '--ui3n-scrollbar-horizontal-thumb-active-color': thumbActiveColorCss,
       '--ui3n-scrollbar-horizontal-track-height': trackHeightCss,
+      '--ui3n-scrollbar-horizontal-track-radius': trackRadiusCss,
       '--ui3n-scrollbar-horizontal-track-color': trackColorCss,
     }"
     @mouseenter="isHovered = true"
@@ -293,6 +299,7 @@
     bottom: 2px;
     height: var(--ui3n-scrollbar-horizontal-track-height);
     background: var(--ui3n-scrollbar-horizontal-track-color);
+    border-radius: var(--ui3n-scrollbar-horizontal-track-radius);
     z-index: 10;
     visibility: hidden;
     opacity: 0;

package/src/components/ui3n-scrollbar-vertical/types.ts

@@ -11,6 +11,7 @@ export interface Ui3nScrollbarVerticalProps {
   thumbHoverColor?: string;
   thumbActiveColor?: string;
   trackWidth?: number;
+  trackRadius?: number | string;
   trackColor?: string;
 }
 

package/src/components/ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.vue

@@ -7,7 +7,7 @@
     Ui3nScrollbarVerticalExpose,
   } from './types';
 
-  const MIN_HEIGHT = 40;
+  const MIN_HEIGHT = 32;
 
   const props = withDefaults(defineProps<Ui3nScrollbarVerticalProps>(), {
     thumbMinHeight: MIN_HEIGHT,
@@ -17,6 +17,7 @@
     thumbHoverColor: 'var(--color-bg-control-accent-hover)',
     thumbActiveColor: 'var(--color-bg-control-accent-focused)',
     trackWidth: 6,
+    trackRadius: 4,
     trackColor: 'transparent',
   });
   const emits = defineEmits<Ui3nScrollbarVerticalEmits>();
@@ -90,6 +91,10 @@
     return isNaN(num) ? String(props.trackWidth) : `${num}px`;
   });
   const trackColorCss = computed(() => props.trackColor);
+  const trackRadiusCss = computed(() => {
+    const num = Number(props.trackRadius);
+    return isNaN(num) ? String(props.trackRadius) : `${num}px`;
+  });
 
   function updateMetrics() {
     if (!containerRef.value) {
@@ -233,6 +238,7 @@
       '--ui3n-scrollbar-thumb-hover-color': thumbHoverColorCss,
       '--ui3n-scrollbar-thumb-active-color': thumbActiveColorCss,
       '--ui3n-scrollbar-track-width': trackWidthCss,
+      '--ui3n-scrollbar-track-radius': trackRadiusCss,
       '--ui3n-scrollbar-track-color': trackColorCss,
     }"
     @mouseenter="isHovered = true"
@@ -293,6 +299,7 @@
     bottom: 0;
     width: var(--ui3n-scrollbar-track-width);
     background: var(--ui3n-scrollbar-track-color);
+    border-radius: var(--ui3n-scrollbar-track-radius);
     z-index: 10;
     visibility: hidden;
     opacity: 0;