@v1nt1248/3nclient-lib 0.3.39 → 0.3.41

package/dist/ui3n-components.js

@@ -1,9 +1,9 @@
 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 O, i as k, n as A, r as ee, t as j } from "./chunks/ui3n-notification-DPC5Ke4b.js";
-import { t as te } from "./chunks/emoticons-DMgiBINj.js";
-import ne 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, TransitionGroup as se, computed as P, createBlock as F, createCommentVNode as I, createElementBlock as L, createElementVNode as R, createTextVNode as ce, createVNode as z, defineComponent as B, inject as le, mergeProps as ue, nextTick as de, normalizeClass as V, normalizeStyle as H, onBeforeMount as fe, onBeforeUnmount as pe, onMounted as U, onUnmounted as me, openBlock as W, provide as he, ref as G, renderList as K, renderSlot as q, resolveDynamicComponent as ge, shallowRef as _e, toDisplayString as J, toHandlers as ve, unref as Y, useCssModule as ye, useCssVars as be, useSlots as xe, useTemplateRef as Se, vModelText as Ce, watch as X, withCtx as Z, withDirectives as we, withKeys as Q, withModifiers as $ } from "vue";
+import { t as M } from "./chunks/emoticons-DMgiBINj.js";
+import N from "sanitize-html";
+import { autoUpdate as te, computePosition as ne, offset as re } from "@floating-ui/dom";
+import { Fragment as P, Teleport as ie, Transition as ae, TransitionGroup as oe, computed as F, createBlock as I, createCommentVNode as L, createElementBlock as R, createElementVNode as z, createTextVNode as se, createVNode as B, defineComponent as V, inject as ce, mergeProps as le, nextTick as ue, normalizeClass as H, normalizeStyle as U, onBeforeMount as de, onBeforeUnmount as fe, onMounted as W, onUnmounted as pe, openBlock as G, provide as me, ref as K, renderList as he, renderSlot as q, resolveDynamicComponent as ge, shallowRef as _e, toDisplayString as J, toHandlers as ve, unref as Y, useCssModule as ye, useCssVars as be, useSlots as xe, useTemplateRef as Se, vModelText as Ce, watch as X, withCtx as Z, withDirectives as we, withKeys as Q, withModifiers as $ } from "vue";
 import { arrow as Te, autoUpdate as Ee, flip as De, offset as Oe, shift as ke, useFloating as Ae } from "@floating-ui/vue";
 //#region node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/_arrayMap.js
 var je = /* @__PURE__ */ g(((e, t) => {
@@ -508,39 +508,39 @@ var je = /* @__PURE__ */ g(((e, t) => {
 	var n = Kt(), r = x(), i = _(), a = i && i.isSet;
 	t.exports = a ? r(a) : n;
 })), Jt = /* @__PURE__ */ g(((e, t) => {
-	var n = ot(), r = st(), i = ut(), a = gt(), s = bt(), l = xt(), u = St(), d = Et(), f = At(), p = Mt(), h = Nt(), g = o(), _ = Pt(), v = Vt(), y = Ut(), b = c(), x = m(), S = Gt(), C = T(), w = qt(), E = ht(), D = yt(), O = 1, k = 2, A = 4, ee = "[object Arguments]", j = "[object Array]", te = "[object Boolean]", ne = "[object Date]", M = "[object Error]", re = "[object Function]", ie = "[object GeneratorFunction]", N = "[object Map]", ae = "[object Number]", oe = "[object Object]", se = "[object RegExp]", P = "[object Set]", F = "[object String]", I = "[object Symbol]", L = "[object WeakMap]", R = "[object ArrayBuffer]", ce = "[object DataView]", z = "[object Float32Array]", B = "[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[ee] = U[j] = U[R] = U[ce] = U[te] = U[ne] = U[z] = U[B] = U[le] = U[ue] = U[de] = U[N] = U[ae] = U[oe] = U[se] = U[P] = U[F] = U[I] = U[V] = U[H] = U[fe] = U[pe] = !0, U[M] = U[re] = U[L] = !1;
-	function me(e, t, o, c, m, T) {
-		var j, te = t & O, ne = t & k, M = t & A;
+	var n = ot(), r = st(), i = ut(), a = gt(), s = bt(), l = xt(), u = St(), d = Et(), f = At(), p = Mt(), h = Nt(), g = o(), _ = Pt(), v = Vt(), y = Ut(), b = c(), x = m(), S = Gt(), C = T(), w = qt(), E = ht(), D = yt(), O = 1, k = 2, A = 4, ee = "[object Arguments]", j = "[object Array]", M = "[object Boolean]", N = "[object Date]", te = "[object Error]", ne = "[object Function]", re = "[object GeneratorFunction]", P = "[object Map]", ie = "[object Number]", ae = "[object Object]", oe = "[object RegExp]", F = "[object Set]", I = "[object String]", L = "[object Symbol]", R = "[object WeakMap]", z = "[object ArrayBuffer]", se = "[object DataView]", B = "[object Float32Array]", V = "[object Float64Array]", ce = "[object Int8Array]", le = "[object Int16Array]", ue = "[object Int32Array]", H = "[object Uint8Array]", U = "[object Uint8ClampedArray]", de = "[object Uint16Array]", fe = "[object Uint32Array]", W = {};
+	W[ee] = W[j] = W[z] = W[se] = W[M] = W[N] = W[B] = W[V] = W[ce] = W[le] = W[ue] = W[P] = W[ie] = W[ae] = W[oe] = W[F] = W[I] = W[L] = W[H] = W[U] = W[de] = W[fe] = !0, W[te] = W[ne] = W[R] = !1;
+	function pe(e, t, o, c, m, T) {
+		var j, M = t & O, N = t & k, te = t & A;
 		if (o && (j = m ? o(e, c, m, T) : o(e)), j !== void 0) return j;
 		if (!C(e)) return e;
-		var N = b(e);
-		if (N) {
-			if (j = _(e), !te) return u(e, j);
+		var P = b(e);
+		if (P) {
+			if (j = _(e), !M) return u(e, j);
 		} else {
-			var ae = g(e), se = ae == re || ae == ie;
-			if (x(e)) return l(e, te);
-			if (ae == oe || ae == ee || se && !m) {
-				if (j = ne || se ? {} : y(e), !te) return ne ? f(e, s(j, e)) : d(e, a(j, e));
+			var ie = g(e), oe = ie == ne || ie == re;
+			if (x(e)) return l(e, M);
+			if (ie == ae || ie == ee || oe && !m) {
+				if (j = N || oe ? {} : y(e), !M) return N ? f(e, s(j, e)) : d(e, a(j, e));
 			} else {
-				if (!U[ae]) return m ? e : {};
-				j = v(e, ae, te);
+				if (!W[ie]) return m ? e : {};
+				j = v(e, ie, M);
 			}
 		}
 		T ||= new n();
-		var P = T.get(e);
-		if (P) return P;
+		var F = T.get(e);
+		if (F) return F;
 		T.set(e, j), w(e) ? e.forEach(function(n) {
-			j.add(me(n, t, o, n, e, T));
+			j.add(pe(n, t, o, n, e, T));
 		}) : S(e) && e.forEach(function(n, r) {
-			j.set(r, me(n, t, o, r, e, T));
+			j.set(r, pe(n, t, o, r, e, T));
 		});
-		var F = N ? void 0 : (M ? ne ? h : p : ne ? D : E)(e);
-		return r(F || e, function(n, r) {
-			F && (r = n, n = e[r]), i(j, r, me(n, t, o, r, e, T));
+		var I = P ? void 0 : (te ? N ? h : p : N ? D : E)(e);
+		return r(I || e, function(n, r) {
+			I && (r = n, n = e[r]), i(j, r, pe(n, t, o, r, e, T));
 		}), j;
 	}
-	t.exports = me;
+	t.exports = pe;
 })), Yt = /* @__PURE__ */ g(((e, t) => {
 	var n = u(), r = S(), i = "[object Symbol]";
 	function a(e) {
@@ -783,11 +783,11 @@ function wn(e, t) {
 		return;
 	}
 	if (typeof r == "string") {
-		e.innerHTML = ne(r);
+		e.innerHTML = N(r);
 		return;
 	}
 	try {
-		e.innerHTML = ne(r.dirty, { ...(0, Cn.default)(r, "dirty") });
+		e.innerHTML = N(r.dirty, { ...(0, Cn.default)(r, "dirty") });
 		return;
 	} catch (e) {
 		throw Error("[v-ui3n-html] ", e);
@@ -946,11 +946,11 @@ function Un(e, t, n) {
 		return;
 	}
 	let f = document.getElementById(Rn), p = f || document.createElement("div");
-	f || (p.id = Rn, 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), Ln = M(e, p, () => {
-		re(e, p, {
+	f || (p.id = Rn, 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), Ln = te(e, p, () => {
+		ne(e, p, {
 			placement: s,
 			strategy: c,
-			middleware: [ie(Vn(s, l, u))]
+			middleware: [re(Vn(s, l, u))]
 		}).then(({ x: e, y: t }) => {
 			Object.assign(p.style, {
 				left: `${e}px`,
@@ -1049,7 +1049,7 @@ var Zn = {
 		}, a = qn(t);
 		n.removeEventListener("pointerdown", a.pointerdownEvent, i), n.removeEventListener("pointerup", a.pointerupEvent, i), n.removeEventListener("pointermove", a.pointermoveEvent, i);
 	}
-}, Qn = ["id"], $n = /* @__PURE__ */ k(/* @__PURE__ */ B({
+}, Qn = ["id"], $n = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-chip",
 	props: {
 		id: {},
@@ -1074,29 +1074,29 @@ var Zn = {
 	},
 	emits: ["close", "click"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = xe(), a = P(() => {
+		let n = e, r = t, i = xe(), a = F(() => {
 			let e = Number(n.height);
 			return isNaN(e) ? 24 : e;
-		}), o = P(() => `${a.value}px`), s = P(() => a.value - 4), c = P(() => {
+		}), o = F(() => `${a.value}px`), s = F(() => a.value - 4), c = F(() => {
 			let e = Math.round(a.value / 3);
 			return p.value ? `0 ${e}px 0 4px` : `0 ${e}px`;
-		}), l = P(() => {
+		}), l = F(() => {
 			let e = Number(n.maxWidth);
 			return isNaN(e) ? String(n.maxWidth) : `${e}px`;
-		}), u = P(() => n.color), d = P(() => {
+		}), u = F(() => n.color), d = F(() => {
 			let e = Number(n.textSize);
 			return isNaN(e) ? String(n.textSize) : `${e}px`;
-		}), f = P(() => n.textColor), p = P(() => !!i.left);
-		return (t, n) => (W(), L("div", {
+		}), f = F(() => n.textColor), p = F(() => !!i.left);
+		return (t, n) => (G(), R("div", {
 			id: e.id,
-			class: V([
+			class: H([
 				t.$style.ui3nChip,
 				e.round && t.$style.round,
 				e.plain && t.$style.plain,
 				e.closeable && t.$style.closeable,
 				p.value && t.$style.withIcon
 			]),
-			style: H({
+			style: U({
 				"--ui3n-chip-height": o.value,
 				"--ui3n-chip-max-width": l.value,
 				"--ui3n-chip-padding": c.value,
@@ -1106,12 +1106,12 @@ var Zn = {
 			}),
 			onClick: n[1] ||= (e) => r("click", e)
 		}, [
-			R("div", { class: V(t.$style.ui3nChipIcon) }, [q(t.$slots, "left", {
+			z("div", { class: H(t.$style.ui3nChipIcon) }, [q(t.$slots, "left", {
 				size: s.value,
 				color: f.value
 			})], 2),
-			R("div", { class: V(t.$style.ui3nChipBody) }, [q(t.$slots, "default")], 2),
-			e.closeable ? (W(), F(A, {
+			z("div", { class: H(t.$style.ui3nChipBody) }, [q(t.$slots, "default")], 2),
+			e.closeable ? (G(), I(A, {
 				key: 0,
 				type: "icon",
 				size: "small",
@@ -1120,7 +1120,7 @@ var Zn = {
 				"icon-color": "var(--color-icon-control-primary-default)",
 				disabled: e.disabled,
 				onClick: n[0] ||= $((e) => r("close"), ["stop", "prevent"])
-			}, null, 8, ["disabled"])) : I("", !0)
+			}, null, 8, ["disabled"])) : L("", !0)
 		], 14, Qn));
 	}
 }), [["__cssModules", { $style: {
@@ -1133,7 +1133,7 @@ var Zn = {
 	ui3nChipIcon: "_ui3nChipIcon_prky3_33",
 	round: "_round_prky3_41",
 	plain: "_plain_prky3_50"
-} }]]), er = ["name"], tr = ["width", "height"], nr = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), er = ["name"], tr = ["width", "height"], nr = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-drop-files",
 	props: {
 		name: { default: void 0 },
@@ -1147,7 +1147,7 @@ var Zn = {
 	},
 	emits: ["select"],
 	setup(e, { expose: t, emit: n }) {
-		let r = Pn, i = e, a = n, o = G(null), s = G(null), c = G(0), l = G(!1), u = G(!1);
+		let r = Pn, i = e, a = n, o = K(null), s = K(null), c = K(0), l = K(!1), u = K(!1);
 		function d(e) {
 			e.preventDefault(), l.value = !0;
 		}
@@ -1182,12 +1182,12 @@ var Zn = {
 		}
 		return t({ clear: v }), X(() => i.name, (e) => {
 			!e && s.value && (s.value.value = "");
-		}), U(() => {
+		}), W(() => {
 			_();
-		}), (t, n) => we((W(), L("div", {
+		}), (t, n) => we((G(), R("div", {
 			ref_key: "wrapperElement",
 			ref: o,
-			class: V([
+			class: H([
 				t.$style.ui3nDropFiles,
 				e.permanentDisplay && t.$style.ui3nDropFilesWithBorder,
 				(l.value || u.value) && t.$style.ui3nDropFilesWithAccentBorder
@@ -1196,7 +1196,7 @@ var Zn = {
 			onDragover: n[2] ||= $(() => {}, ["prevent"]),
 			onDragleave: f
 		}, [
-			e.name ? (W(), L("input", {
+			e.name ? (G(), R("input", {
 				key: 0,
 				ref_key: "fileInput",
 				ref: s,
@@ -1204,33 +1204,33 @@ var Zn = {
 				name: e.name,
 				multiple: "",
 				hidden: ""
-			}, null, 8, er)) : I("", !0),
+			}, null, 8, er)) : L("", !0),
 			q(t.$slots, "default"),
-			e.permanentDisplay || l.value || u.value ? (W(), L("div", {
+			e.permanentDisplay || l.value || u.value ? (G(), R("div", {
 				key: 1,
-				class: V(t.$style.ui3nDropFilesDropzone),
+				class: H(t.$style.ui3nDropFilesDropzone),
 				onDragenter: m,
 				onDragover: p,
 				onDragleave: h,
 				onDrop: g
 			}, [
-				R("h3", { class: V(t.$style.ui3nDropFilesDropzoneTitle) }, J(e.title), 3),
-				R("div", { class: V(t.$style.ui3nDropFilesDropzoneIcon) }, [(W(), L("svg", {
+				z("h3", { class: H(t.$style.ui3nDropFilesDropzoneTitle) }, J(e.title), 3),
+				z("div", { class: H(t.$style.ui3nDropFilesDropzoneIcon) }, [(G(), R("svg", {
 					width: c.value * .35,
 					height: c.value * .35,
 					viewBox: "0 0 192 192",
 					fill: "none",
 					xmlns: "http://www.w3.org/2000/svg"
-				}, [...n[3] ||= [R("path", {
+				}, [...n[3] ||= [z("path", {
 					d: "M51 152C47.9333 152 45.3333 150.934 43.2 148.8C41.0667 146.667 40 144.067 40 141V119.8H46.2V141C46.2 142.2 46.7 143.3 47.7 144.3C48.7 145.3 49.8 145.8 51 145.8H141C142.2 145.8 143.3 145.3 144.3 144.3C145.3 143.3 145.8 142.2 145.8 141V119.8H152V141C152 144.067 150.933 146.667 148.8 148.8C146.667 150.934 144.067 152 141 152H51ZM93 122.4V49.2002L72.8 69.2002L68.4 65.0002L96 37.2002L123.6 65.0002L119.2 69.2002L99 49.2002V122.4H93Z",
 					fill: "var(--color-icon-control-primary-default)"
 				}, null, -1)]], 8, tr))], 2),
-				R("div", {
-					class: V(t.$style.ui3nDropFilesDropzoneAdditional),
+				z("div", {
+					class: H(t.$style.ui3nDropFilesDropzoneAdditional),
 					onDragenter: n[0] ||= $(() => {}, ["stop", "prevent"]),
 					onDragleave: n[1] ||= $(() => {}, ["stop", "prevent"])
 				}, [q(t.$slots, "additional-text")], 34)
-			], 34)) : I("", !0)
+			], 34)) : L("", !0)
 		], 34)), [[Y(r), () => _()]]);
 	}
 }), [["__cssModules", { $style: {
@@ -1241,7 +1241,7 @@ var Zn = {
 	ui3nDropFilesDropzoneTitle: "_ui3nDropFilesDropzoneTitle_gssdx_33",
 	ui3nDropFilesDropzoneIcon: "_ui3nDropFilesDropzoneIcon_gssdx_41",
 	ui3nDropFilesDropzoneAdditional: "_ui3nDropFilesDropzoneAdditional_gssdx_53"
-} }]]), rr = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), rr = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-emoji",
 	props: {
 		emoji: {},
@@ -1253,7 +1253,7 @@ var Zn = {
 	},
 	emits: ["click"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = G(null), a = P(() => te[n.emoji]), o = P(() => {
+		let n = e, r = t, i = K(null), a = F(() => M[n.emoji]), o = F(() => {
 			let e = isNaN(Number(n.size)) ? String(n.size) : `${n.size}px`;
 			return {
 				"--ui3n-emoji-size": e,
@@ -1264,8 +1264,8 @@ var Zn = {
 			e.stopPropagation(), r("click", e);
 		}
 		return X(() => n.emoji, (e) => {
-			Object.keys(te).includes(e) || console.error(`[Ui3nEmoji] Invalid emoticon: ${e}`);
-		}, { immediate: !0 }), (t, n) => (W(), L("div", ue({
+			Object.keys(M).includes(e) || console.error(`[Ui3nEmoji] Invalid emoticon: ${e}`);
+		}, { immediate: !0 }), (t, n) => (G(), R("div", le({
 			ref_key: "emojiElement",
 			ref: i,
 			class: [t.$style.ui3nEmoji, e.readonly && t.$style.readonly],
@@ -1285,7 +1285,7 @@ var Zn = {
 	"maxlength",
 	"minlength",
 	"value"
-], or = /* @__PURE__ */ k(/* @__PURE__ */ B({
+], or = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-input",
 	props: {
 		id: {},
@@ -1344,7 +1344,7 @@ var Zn = {
 		"update:valid"
 	],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = xe(), o = G(null), s = G(""), c = G(!1), l = G(!1), u = G(""), d = P(() => !!a["prepend-icon"]), f = P(() => !!a["append-icon"]), p = P(() => r.displayStateMode === "success" && r.displayStateWithIcon && !l.value), m = P(() => !r.disabled && r.clearable && !!s.value && !p.value), h = P(() => p.value || m.value || f.value), g = P(() => !!u.value || !!(r.displayStateMode && r.displayStateMessage)), _ = P(() => !!u.value || r.displayStateMode === "error" && !!r.displayStateMessage), v = P(() => r.displayStateMode === "success" && !!r.displayStateMessage);
+		let r = e, i = n, a = xe(), o = K(null), s = K(""), c = K(!1), l = K(!1), u = K(""), d = F(() => !!a["prepend-icon"]), f = F(() => !!a["append-icon"]), p = F(() => r.displayStateMode === "success" && r.displayStateWithIcon && !l.value), m = F(() => !r.disabled && r.clearable && !!s.value && !p.value), h = F(() => p.value || m.value || f.value), g = F(() => !!u.value || !!(r.displayStateMode && r.displayStateMessage)), _ = F(() => !!u.value || r.displayStateMode === "error" && !!r.displayStateMessage), v = F(() => r.displayStateMode === "success" && !!r.displayStateMessage);
 		function y(e) {
 			return e.target.value;
 		}
@@ -1361,7 +1361,7 @@ var Zn = {
 			l.value = !0, i("focus", e);
 		}
 		function S(e) {
-			de(() => {
+			ue(() => {
 				l.value = !1, i("blur", e);
 			});
 		}
@@ -1397,16 +1397,16 @@ var Zn = {
 			isDirty: c,
 			isFocused: l,
 			clearValue: O
-		}), U(() => {
+		}), W(() => {
 			s.value = r.modelValue ?? "", o.value && (i("init", o.value), r.autofocus && o.value.focus()), r.validateAtStartup && (c.value = !0, b(s.value));
 		}), X(() => r.modelValue, (e) => {
 			let t = e ?? "";
 			t !== s.value && (s.value = t, b(t, !0));
 		}), X(() => r.name, (e) => {
 			e || O();
-		}), (t, n) => (W(), L("div", {
+		}), (t, n) => (G(), R("div", {
 			id: e.id,
-			class: V([
+			class: H([
 				t.$style.ui3nInput,
 				e.size === "large" && t.$style.large,
 				e.label && t.$style.withLabel,
@@ -1416,20 +1416,20 @@ var Zn = {
 				e.displayStateMode === "success" && t.$style.success
 			])
 		}, [
-			e.label ? (W(), L("label", {
+			e.label ? (G(), R("label", {
 				key: 0,
-				class: V(t.$style.ui3nInputLabel)
-			}, J(e.label), 3)) : I("", !0),
-			R("div", { class: V([
+				class: H(t.$style.ui3nInputLabel)
+			}, J(e.label), 3)) : L("", !0),
+			z("div", { class: H([
 				t.$style.inputWrapper,
 				d.value && t.$style.withPrepend,
 				h.value && t.$style.withAppend
 			]) }, [
-				d.value ? (W(), L("div", {
+				d.value ? (G(), R("div", {
 					key: 0,
-					class: V(t.$style.prependIconSlot)
-				}, [q(t.$slots, "prepend-icon")], 2)) : I("", !0),
-				R("input", {
+					class: H(t.$style.prependIconSlot)
+				}, [q(t.$slots, "prepend-icon")], 2)) : L("", !0),
+				z("input", {
 					ref_key: "inputElement",
 					ref: o,
 					autocomplete: e.autocomplete,
@@ -1441,7 +1441,7 @@ var Zn = {
 					maxlength: e.maxlength,
 					minlength: e.minlength,
 					value: s.value,
-					class: V(t.$style.ui3nInputField),
+					class: H(t.$style.ui3nInputField),
 					onInput: w,
 					onKeydown: [
 						Q(T, ["enter"]),
@@ -1452,18 +1452,18 @@ var Zn = {
 					onBlur: S,
 					onChange: C
 				}, null, 42, ar),
-				h.value ? (W(), L("div", {
+				h.value ? (G(), R("div", {
 					key: 1,
-					class: V(t.$style.appendIconSlot)
+					class: H(t.$style.appendIconSlot)
 				}, [
-					p.value ? (W(), F(ee, {
+					p.value ? (G(), I(ee, {
 						key: 0,
 						icon: "round-check-circle-outline",
 						size: 16,
 						color: "var(--success-content-default)",
-						class: V(t.$style.appendSlotItem)
-					}, null, 8, ["class"])) : I("", !0),
-					m.value ? (W(), F(A, {
+						class: H(t.$style.appendSlotItem)
+					}, null, 8, ["class"])) : L("", !0),
+					m.value ? (G(), I(A, {
 						key: 1,
 						type: "icon",
 						size: "small",
@@ -1471,22 +1471,22 @@ var Zn = {
 						icon: "round-close",
 						"icon-size": "16",
 						"icon-color": "var(--color-icon-control-accent-default)",
-						class: V(t.$style.appendSlotItem),
+						class: H(t.$style.appendSlotItem),
 						onMousedown: n[0] ||= $(() => {}, ["prevent"]),
 						onTouchstart: n[1] ||= $(() => {}, ["prevent"]),
 						onClick: O
-					}, null, 8, ["class"])) : I("", !0),
-					f.value ? q(t.$slots, "append-icon", { key: 2 }) : I("", !0)
-				], 2)) : I("", !0)
+					}, null, 8, ["class"])) : L("", !0),
+					f.value ? q(t.$slots, "append-icon", { key: 2 }) : L("", !0)
+				], 2)) : L("", !0)
 			], 2),
-			g.value ? (W(), L("div", {
+			g.value ? (G(), R("div", {
 				key: 1,
-				class: V([
+				class: H([
 					t.$style.ui3nInputFieldMessage,
 					_.value && t.$style.ui3nInputErrorMessage,
 					v.value && t.$style.ui3nInputSuccessMessage
 				])
-			}, J(u.value || e.displayStateMessage), 3)) : I("", !0)
+			}, J(u.value || e.displayStateMessage), 3)) : L("", !0)
 		], 10, ir));
 	}
 }), [["__cssModules", { $style: {
@@ -1647,7 +1647,7 @@ var Zn = {
 	"multiple",
 	"accept",
 	"disabled"
-], Ar = /* @__PURE__ */ k(/* @__PURE__ */ B({
+], Ar = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-input-file",
 	props: {
 		id: {},
@@ -1662,7 +1662,7 @@ var Zn = {
 	},
 	emits: ["update:modelValue", "error"],
 	setup(e, { expose: n, emit: r }) {
-		let i = e, a = r, o = i.id || t(4), s = G(null);
+		let i = e, a = r, o = i.id || t(4), s = K(null);
 		function c(e) {
 			i.disabled || (e.stopImmediatePropagation(), s.value?.click());
 		}
@@ -1702,11 +1702,11 @@ var Zn = {
 		}
 		return n({ clear: h }), X(() => i.name, (e) => {
 			e || h();
-		}), (t, n) => (W(), L("div", { class: V(t.$style.ui3nInputFile) }, [R("label", {
+		}), (t, n) => (G(), R("div", { class: H(t.$style.ui3nInputFile) }, [z("label", {
 			for: Y(o),
-			class: V([t.$style.label, e.disabled && t.$style.disabled]),
+			class: H([t.$style.label, e.disabled && t.$style.disabled]),
 			onClick: $(c, ["stop", "prevent"])
-		}, [q(t.$slots, "default", {}, () => [ce(J(e.buttonText), 1)])], 10, Or), R("input", {
+		}, [q(t.$slots, "default", {}, () => [se(J(e.buttonText), 1)])], 10, Or), z("input", {
 			id: Y(o),
 			ref_key: "fileInput",
 			ref: s,
@@ -1731,7 +1731,7 @@ var Zn = {
 	"rows",
 	"max-rows",
 	"disabled"
-], Nr = /* @__PURE__ */ k(/* @__PURE__ */ B({
+], Nr = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-text",
 	props: {
 		id: {},
@@ -1764,7 +1764,7 @@ var Zn = {
 		"update:valid"
 	],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = G(null), o = G(""), s = G(!1), c = G(!1), l = G("");
+		let r = e, i = n, a = K(null), o = K(""), s = K(!1), c = K(!1), l = K("");
 		function u(e, t = !1) {
 			if (l.value = "", r.rules && r.rules.length) {
 				for (let t of r.rules) if (typeof t == "function") {
@@ -1807,26 +1807,26 @@ var Zn = {
 		function _() {
 			o.value = "", l.value = "", s.value = !1, a.value && (a.value.value = ""), i("update:modelValue", ""), i("input", ""), i("change", ""), i("update:valid", !0);
 		}
-		return t({ clear: _ }), U(() => {
+		return t({ clear: _ }), W(() => {
 			a.value && (D(a.value), i("init", a.value)), r.validateAtStartup && u(o.value);
 		}), X(() => r.name, (e) => {
 			e || _();
 		}), X(() => r.modelValue, (e, t) => {
 			(e ?? "") !== (t ?? "") && (o.value = e ?? "", u(o.value, s.value || r.validateAtStartup));
-		}, { immediate: !0 }), (t, n) => (W(), L("div", {
+		}, { immediate: !0 }), (t, n) => (G(), R("div", {
 			id: e.id,
-			class: V([
+			class: H([
 				t.$style.ui3nText,
 				e.disabled && t.$style.disabled,
 				c.value && t.$style.focused,
 				l.value && t.$style.hasError
 			])
 		}, [
-			e.label ? (W(), L("label", {
+			e.label ? (G(), R("label", {
 				key: 0,
-				class: V(t.$style.label)
-			}, J(e.label), 3)) : I("", !0),
-			R("div", { class: V(t.$style.body) }, [R("textarea", ue({
+				class: H(t.$style.label)
+			}, J(e.label), 3)) : L("", !0),
+			z("div", { class: H(t.$style.body) }, [z("textarea", le({
 				ref_key: "textareaElement",
 				ref: a,
 				class: t.$style.content,
@@ -1847,10 +1847,10 @@ var Zn = {
 				onFocusin: d,
 				onFocusout: f
 			}), null, 16, Mr)], 2),
-			l.value ? (W(), L("div", {
+			l.value ? (G(), R("div", {
 				key: 1,
-				class: V(t.$style.errorBlock)
-			}, J(l.value), 3)) : I("", !0)
+				class: H(t.$style.errorBlock)
+			}, J(l.value), 3)) : L("", !0)
 		], 10, jr));
 	}
 }), [["__cssModules", { $style: {
@@ -1868,7 +1868,7 @@ var Zn = {
 	"disabled",
 	"checked",
 	"value"
-], Ir = ["tabindex"], Lr = ["width", "height"], Rr = ["width", "height"], zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
+], Ir = ["tabindex"], Lr = ["width", "height"], Rr = ["width", "height"], zr = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-checkbox",
 	props: {
 		id: {},
@@ -1910,16 +1910,16 @@ var Zn = {
 	},
 	emits: ["change", "update:modelValue"],
 	setup(e, { expose: t, emit: n }) {
-		let r = O, i = e, a = n, o = xe(), s = ye(), c = G(null), l = G(i.modelValue), u = G(i.indeterminate), d = P(() => u.value ? "indeterminate" : l.value === i.checkedValue ? "checked" : "unchecked"), f = P(() => typeof l.value == "boolean" ? l.value ? "on" : "" : String(l.value)), p = P(() => {
+		let r = O, i = e, a = n, o = xe(), s = ye(), c = K(null), l = K(i.modelValue), u = K(i.indeterminate), d = F(() => u.value ? "indeterminate" : l.value === i.checkedValue ? "checked" : "unchecked"), f = F(() => typeof l.value == "boolean" ? l.value ? "on" : "" : String(l.value)), p = F(() => {
 			let e = parseFloat(String(i.size));
 			return isNaN(e) ? 12 : e - 4;
-		}), m = P(() => ({
+		}), m = F(() => ({
 			"--ui3n-checkbox-size": typeof i.size == "number" ? `${i.size}px` : i.size,
 			"--ui3n-checkbox-color": i.color
-		})), h = P(() => {
+		})), h = F(() => {
 			let e = [s.ui3nCheckbox];
 			return i.disabled && e.push(s.disabled), !o.default && e.push(s.noLabel), e;
-		}), g = P(() => {
+		}), g = F(() => {
 			let e = [s.ui3nCheckboxBody];
 			return d.value === "unchecked" ? e.push(s.unfilled) : e.push(s.filled), e;
 		});
@@ -1931,17 +1931,17 @@ var Zn = {
 		}
 		return t({ clear: v }), X(() => i.name, (e) => {
 			e || v();
-		}), X(() => i.modelValue, (e) => l.value = e), X(() => i.indeterminate, (e) => u.value = e), fe(() => {
+		}), X(() => i.modelValue, (e) => l.value = e), X(() => i.indeterminate, (e) => u.value = e), de(() => {
 			let e = typeof i.checkedValue, t = typeof i.uncheckedValue, n = typeof i.modelValue;
 			if (e !== t || e !== n || t !== n) throw Error("[Ui3nCheckbox] types of \"value\", \"checkedValue\" and \"uncheckedValue\" are different");
-		}), (t, n) => (W(), L("div", {
+		}), (t, n) => (G(), R("div", {
 			ref_key: "checkboxEl",
 			ref: c,
 			id: e.id,
-			class: V(h.value),
-			style: H(m.value)
+			class: H(h.value),
+			style: U(m.value)
 		}, [
-			R("input", {
+			z("input", {
 				type: "checkbox",
 				style: { display: "none" },
 				name: e.name,
@@ -1950,40 +1950,40 @@ var Zn = {
 				checked: d.value !== "unchecked",
 				value: f.value
 			}, null, 8, Fr),
-			we((W(), L("div", {
-				class: V(g.value),
+			we((G(), R("div", {
+				class: H(g.value),
 				tabindex: e.disabled ? -1 : 0,
 				onKeydown: [Q(_, ["space"]), Q(_, ["enter"])],
 				onClick: _
-			}, [d.value === "checked" ? (W(), L("svg", {
+			}, [d.value === "checked" ? (G(), R("svg", {
 				key: 0,
 				width: p.value,
 				height: p.value,
 				viewBox: "0 0 24 24",
 				fill: "none",
-				class: V(t.$style.ui3nCheckboxIcon)
-			}, [...n[0] ||= [R("g", { id: "SVGRepo_iconCarrier" }, [R("path", {
+				class: H(t.$style.ui3nCheckboxIcon)
+			}, [...n[0] ||= [z("g", { id: "SVGRepo_iconCarrier" }, [z("path", {
 				d: "M20.0001 7L9.0001 18L4 13",
 				stroke: "#fff",
 				"stroke-width": "3",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			})], -1)]], 10, Lr)) : I("", !0), d.value === "indeterminate" ? (W(), L("svg", {
+			})], -1)]], 10, Lr)) : L("", !0), d.value === "indeterminate" ? (G(), R("svg", {
 				key: 1,
 				width: p.value,
 				height: p.value,
 				viewBox: "0 0 24 24",
 				fill: "none",
-				class: V(t.$style.ui3nCheckboxIcon)
-			}, [...n[1] ||= [R("g", { id: "SVGRepo_iconCarrier" }, [R("path", {
+				class: H(t.$style.ui3nCheckboxIcon)
+			}, [...n[1] ||= [z("g", { id: "SVGRepo_iconCarrier" }, [z("path", {
 				d: "M7 12L17 12",
 				stroke: "#fff",
 				"stroke-width": "3",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			})], -1)]], 10, Rr)) : I("", !0)], 42, Ir)), [[Y(r)]]),
-			R("div", {
-				class: V(t.$style.ui3nCheckboxLabel),
+			})], -1)]], 10, Rr)) : L("", !0)], 42, Ir)), [[Y(r)]]),
+			z("div", {
+				class: H(t.$style.ui3nCheckboxLabel),
 				onClick: _
 			}, [q(t.$slots, "default")], 2)
 		], 14, Pr));
@@ -1997,7 +1997,7 @@ var Zn = {
 	ui3nCheckboxIcon: "_ui3nCheckboxIcon_s0t61_78",
 	ui3nCheckboxLabel: "_ui3nCheckboxLabel_s0t61_82",
 	disabled: "_disabled_s0t61_90"
-} }]]), Br = /* @__PURE__ */ B({
+} }]]), Br = /* @__PURE__ */ V({
 	__name: "ui3n-table-sort-icon",
 	props: {
 		size: { default: 16 },
@@ -2005,15 +2005,15 @@ var Zn = {
 		value: {}
 	},
 	setup(e) {
-		let t = e, n = P(() => t.value === "asc" ? "round-arrow-upward" : "round-arrow-downward"), r = P(() => {
+		let t = e, n = F(() => t.value === "asc" ? "round-arrow-upward" : "round-arrow-downward"), r = F(() => {
 			let e = Number(t.size);
 			return isNaN(e) ? 16 : e;
 		});
-		return (t, i) => (W(), F(oe, {
+		return (t, i) => (G(), I(ae, {
 			mode: "out-in",
 			name: "fade"
 		}, {
-			default: Z(() => [(W(), F(ee, {
+			default: Z(() => [(G(), I(ee, {
 				key: n.value,
 				icon: n.value,
 				size: r.value,
@@ -2044,10 +2044,10 @@ function qr(e) {
 	return !e || typeof e != "string" ? !1 : Kr.test(e.trim());
 }
 function Jr(e, t, n) {
-	let r = G(null), i = G({
+	let r = K(null), i = K({
 		sortOrder: S(),
 		fieldAsRowKey: x()
-	}), a = i.value?.fieldAsRowKey ? G([]) : G(/* @__PURE__ */ new Set()), o = G(!1), s = G(null), c = null, l = P(() => !!i.value.fieldAsRowKey), u = P(() => e.head.filter((e) => !e.hidden)), d = P(() => l.value ? e.body.content.filter((e) => a.value.includes(e[i.value.fieldAsRowKey])) : Array.from(a.value)), f = P(() => l.value ? (0, Tr.default)(a.value) : a.value.size), p = P(() => e.config?.selectable === "multiple" && o.value);
+	}), a = i.value?.fieldAsRowKey ? K([]) : K(/* @__PURE__ */ new Set()), o = K(!1), s = K(null), c = null, l = F(() => !!i.value.fieldAsRowKey), u = F(() => e.head.filter((e) => !e.hidden)), d = F(() => l.value ? e.body.content.filter((e) => a.value.includes(e[i.value.fieldAsRowKey])) : Array.from(a.value)), f = F(() => l.value ? (0, Tr.default)(a.value) : a.value.size), p = F(() => e.config?.selectable === "multiple" && o.value);
 	function m() {
 		let { columnStyle: t } = e.config ?? {}, n = [];
 		for (let e of u.value) {
@@ -2059,14 +2059,14 @@ function Jr(e, t, n) {
 		}
 		return n;
 	}
-	let h = P(() => {
+	let h = F(() => {
 		let t = Number(e.config?.stickyColumns);
 		return !Number.isFinite(t) || t < 1 ? 0 : Math.floor(t);
-	}), g = P(() => {
+	}), g = F(() => {
 		if (!h.value) return 0;
 		let e = Math.max(0, u.value.length - 1);
 		return !e || m().length ? 0 : Math.min(h.value, e);
-	}), _ = P(() => g.value > 0), v = P(() => {
+	}), _ = F(() => g.value > 0), v = F(() => {
 		let t = g.value;
 		if (!t) return [];
 		let { columnStyle: n } = e.config ?? {}, r = u.value.slice(0, t).map((e) => (0, Ur.default)(n, [e.key, "width"], "0px").trim()), i = [];
@@ -2082,14 +2082,14 @@ function Jr(e, t, n) {
 			i.push(`calc(${r.slice(0, e).join(" + ")})`);
 		}
 		return i;
-	}), y = P(() => {
+	}), y = F(() => {
 		if (!r.value) return "100%";
 		let { config: t = {}, head: n } = e, { columnStyle: i } = t, a = n.filter((e) => !e.hidden).map((e) => e.key), o = _.value;
 		return a.reduce((e, t, n) => {
 			let r = o ? (0, Ur.default)(i, [t, "width"]) : (0, Ur.default)(i, [t, "width"], "1fr");
 			return e = n === 0 ? `${r}` : `${e} ${r}`, e;
 		}, "");
-	}), b = P(() => !e.config?.minHeightUnusedPlace || isNaN(Number(e.config?.minHeightUnusedPlace)) ? {} : { minHeight: `${Number(e.config?.minHeightUnusedPlace || 0)}px` });
+	}), b = F(() => !e.config?.minHeightUnusedPlace || isNaN(Number(e.config?.minHeightUnusedPlace)) ? {} : { minHeight: `${Number(e.config?.minHeightUnusedPlace || 0)}px` });
 	function x() {
 		let { config: t = {}, body: n } = e, { fieldAsRowKey: r } = t;
 		if (r && r in (0, Ur.default)(n, ["content", 0], {})) return r;
@@ -2156,11 +2156,11 @@ function Jr(e, t, n) {
 	function j() {
 		l.value ? a.value = [] : a.value.clear(), o.value = !1, t("select:row", []);
 	}
-	function te() {
+	function M() {
 		c?.disconnect(), c = null;
 	}
-	function ne() {
-		te();
+	function N() {
+		M();
 		let e = n?.value ?? r.value;
 		if (!e || !_.value) {
 			s.value = null;
@@ -2193,11 +2193,11 @@ function Jr(e, t, n) {
 		r,
 		_,
 		n
-	], ne, {
+	], N, {
 		immediate: !0,
 		flush: "post"
-	}), pe(() => {
-		te();
+	}), fe(() => {
+		M();
 	}), {
 		tableEl: r,
 		tableColumnWidth: y,
@@ -2225,7 +2225,7 @@ function Jr(e, t, n) {
 }
 //#endregion
 //#region src/components/ui3n-scrollbar/ui3n-scrollbar.vue?vue&type=script&setup=true&lang.ts
-var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
+var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-scrollbar",
 	props: {
 		axes: { default: "both" },
@@ -2262,59 +2262,59 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		"scroll:horizontal"
 	],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = G(null), o = G(null), s = G(null), c = G(null), l = G(null), u = P(() => r.axes ?? "both"), d = P(() => r.vertical ?? {}), f = P(() => r.horizontal ?? {}), p = G(0), m = G(0), h = G(0), g = G(0), _ = G(0), v = G(0), y = G(0), b = G(0), x = G(!1), S = G(!1), C = G(!1), w = G(!1), T = null, E, D = 0, O = 0, k = 0, A = 0, ee = P(() => g.value > _.value), j = P(() => p.value > m.value), te = P(() => S.value ? !0 : ee.value && (C.value || w.value)), ne = P(() => x.value ? !0 : j.value && (C.value || w.value)), M = P(() => u.value === "vertical" || u.value === "both"), re = P(() => u.value === "horizontal" || u.value === "both"), ie = P(() => M.value && re.value && ee.value && j.value), N = P(() => {
+		let r = e, i = n, a = K(null), o = K(null), s = K(null), c = K(null), l = K(null), u = F(() => r.axes ?? "both"), d = F(() => r.vertical ?? {}), f = F(() => r.horizontal ?? {}), p = K(0), m = K(0), h = K(0), g = K(0), _ = K(0), v = K(0), y = K(0), b = K(0), x = K(!1), S = K(!1), C = K(!1), w = K(!1), T = null, E, D = 0, O = 0, k = 0, A = 0, ee = F(() => g.value > _.value), j = F(() => p.value > m.value), M = F(() => S.value ? !0 : ee.value && (C.value || w.value)), N = F(() => x.value ? !0 : j.value && (C.value || w.value)), te = F(() => u.value === "vertical" || u.value === "both"), ne = F(() => u.value === "horizontal" || u.value === "both"), re = F(() => te.value && ne.value && ee.value && j.value), P = F(() => {
 			let e = Number(d.value.trackWidth ?? 6);
 			return isNaN(e) ? 6 : e;
-		}), ae = P(() => {
+		}), ie = F(() => {
 			let e = Number(f.value.trackHeight ?? 6);
 			return isNaN(e) ? 6 : e;
-		}), oe = P(() => {
+		}), ae = F(() => {
 			let e = d.value.trackOffsetTop;
 			if (e == null || e === "") return 0;
 			let t = Number(e);
 			return isNaN(t) ? 0 : Math.max(0, t);
-		}), se = P(() => Yr + oe.value), F = P(() => ie.value ? Yr + ae.value + Xr : Yr), ce = P(() => ie.value ? Yr + N.value + Xr : Yr), z = P(() => Math.max(0, m.value - se.value - F.value)), B = P(() => Math.max(0, _.value - ce.value - Yr)), le = P(() => {
-			if (!p.value || !z.value) return 0;
+		}), oe = F(() => Yr + ae.value), I = F(() => re.value ? Yr + ie.value + Xr : Yr), se = F(() => re.value ? Yr + P.value + Xr : Yr), B = F(() => Math.max(0, m.value - oe.value - I.value)), V = F(() => Math.max(0, _.value - se.value - Yr)), ce = F(() => {
+			if (!p.value || !B.value) return 0;
 			let e = d.value.thumbHeight, t = Number(d.value.thumbMinHeight ?? 32);
 			if (e && e !== "auto") {
 				let n = Number(e);
 				return Math.max(isNaN(n) ? t : n, t);
 			}
-			let n = m.value / p.value, r = z.value * n;
-			return Math.min(z.value, Math.max(t, r));
-		}), ue = P(() => {
-			if (!g.value || !B.value) return 0;
+			let n = m.value / p.value, r = B.value * n;
+			return Math.min(B.value, Math.max(t, r));
+		}), le = F(() => {
+			if (!g.value || !V.value) return 0;
 			let e = f.value.thumbWidth, t = Number(f.value.thumbMinWidth ?? 32);
 			if (e && e !== "auto") {
 				let n = Number(e);
 				return Math.max(isNaN(n) ? t : n, t);
 			}
-			let n = _.value / g.value, r = B.value * n;
-			return Math.min(B.value, Math.max(t, r));
-		}), de = P(() => {
-			if (!p.value || p.value === m.value || !z.value) return 0;
-			let e = p.value - m.value, t = Math.max(0, z.value - le.value);
+			let n = _.value / g.value, r = V.value * n;
+			return Math.min(V.value, Math.max(t, r));
+		}), ue = F(() => {
+			if (!p.value || p.value === m.value || !B.value) return 0;
+			let e = p.value - m.value, t = Math.max(0, B.value - ce.value);
 			return !e || !t ? 0 : h.value / e * t;
-		}), fe = P(() => {
-			if (!g.value || g.value === _.value || !B.value) return 0;
-			let e = g.value - _.value, t = Math.max(0, B.value - ue.value);
+		}), de = F(() => {
+			if (!g.value || g.value === _.value || !V.value) return 0;
+			let e = g.value - _.value, t = Math.max(0, V.value - le.value);
 			return !e || !t ? 0 : v.value / e * t;
-		}), me = P(() => {
+		}), pe = F(() => {
 			let e = Number(d.value.trackRadius);
 			return isNaN(e) ? String(d.value.trackRadius ?? 4) : `${e}px`;
-		}), he = P(() => d.value.trackColor ?? "transparent"), K = P(() => {
+		}), me = F(() => d.value.trackColor ?? "transparent"), he = F(() => {
 			let e = Number(d.value.thumbRadius);
 			return isNaN(e) ? String(d.value.thumbRadius ?? 4) : `${e}px`;
-		}), ge = P(() => d.value.thumbColor ?? "var(--color-bg-control-accent-default)"), _e = P(() => d.value.thumbHoverColor ?? "var(--color-bg-control-accent-hover)"), J = P(() => d.value.thumbActiveColor ?? "var(--color-bg-control-accent-focused)"), ve = P(() => {
+		}), ge = F(() => d.value.thumbColor ?? "var(--color-bg-control-accent-default)"), _e = F(() => d.value.thumbHoverColor ?? "var(--color-bg-control-accent-hover)"), J = F(() => d.value.thumbActiveColor ?? "var(--color-bg-control-accent-focused)"), ve = F(() => {
 			let e = Number(d.value.trackWidth);
 			return isNaN(e) ? String(d.value.trackWidth ?? 6) : `${e}px`;
-		}), Y = P(() => {
+		}), Y = F(() => {
 			let e = Number(f.value.trackRadius);
 			return isNaN(e) ? String(f.value.trackRadius ?? 4) : `${e}px`;
-		}), ye = P(() => f.value.trackColor ?? "transparent"), be = P(() => {
+		}), ye = F(() => f.value.trackColor ?? "transparent"), be = F(() => {
 			let e = Number(f.value.thumbRadius);
 			return isNaN(e) ? String(f.value.thumbRadius ?? 4) : `${e}px`;
-		}), xe = P(() => f.value.thumbColor ?? "var(--color-bg-control-accent-default)"), Se = P(() => f.value.thumbHoverColor ?? "var(--color-bg-control-accent-hover)"), Ce = P(() => f.value.thumbActiveColor ?? "var(--color-bg-control-accent-focused)"), X = P(() => {
+		}), xe = F(() => f.value.thumbColor ?? "var(--color-bg-control-accent-default)"), Se = F(() => f.value.thumbHoverColor ?? "var(--color-bg-control-accent-hover)"), Ce = F(() => f.value.thumbActiveColor ?? "var(--color-bg-control-accent-focused)"), X = F(() => {
 			let e = Number(f.value.trackHeight);
 			return isNaN(e) ? String(f.value.trackHeight ?? 6) : `${e}px`;
 		});
@@ -2337,7 +2337,7 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		}
 		function $(e) {
 			if (e.target !== o.value || !a.value || !o.value) return;
-			let t = o.value.getBoundingClientRect(), n = e.clientY - t.top - le.value / 2, r = p.value - m.value, i = Math.max(0, z.value - le.value);
+			let t = o.value.getBoundingClientRect(), n = e.clientY - t.top - ce.value / 2, r = p.value - m.value, i = Math.max(0, B.value - ce.value);
 			if (!i || !r) return;
 			let s = n / i * r;
 			s = Math.max(0, Math.min(r, s)), a.value.scrollTo({
@@ -2347,7 +2347,7 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		}
 		function Te(e) {
 			if (e.target !== s.value || !a.value || !s.value) return;
-			let t = s.value.getBoundingClientRect(), n = e.clientX - t.left - ue.value / 2, r = g.value - _.value, i = Math.max(0, B.value - ue.value);
+			let t = s.value.getBoundingClientRect(), n = e.clientX - t.left - le.value / 2, r = g.value - _.value, i = Math.max(0, V.value - le.value);
 			if (!i || !r) return;
 			let o = n / i * r;
 			o = Math.max(0, Math.min(r, o)), a.value.scrollTo({
@@ -2360,7 +2360,7 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		}
 		function De(e) {
 			if (!x.value || !a.value || !o.value) return;
-			let t = e.clientY - D, n = p.value - m.value, r = Math.max(0, z.value - le.value);
+			let t = e.clientY - D, n = p.value - m.value, r = Math.max(0, B.value - ce.value);
 			if (!r || !n) return;
 			let i = t / r * n;
 			a.value.scrollTop = O + i, h.value = a.value.scrollTop;
@@ -2373,7 +2373,7 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		}
 		function Ae(e) {
 			if (!S.value || !a.value || !s.value) return;
-			let t = e.clientX - k, n = g.value - _.value, r = Math.max(0, B.value - ue.value);
+			let t = e.clientX - k, n = g.value - _.value, r = Math.max(0, V.value - le.value);
 			if (!r || !n) return;
 			let i = t / r * n;
 			a.value.scrollLeft = A + i, v.value = a.value.scrollLeft;
@@ -2381,13 +2381,13 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		function je() {
 			S.value && (S.value = !1, document.body.style.userSelect = "", l.value && (l.value.removeEventListener("pointermove", Ae), l.value.removeEventListener("pointerup", je), l.value.removeEventListener("pointercancel", je)));
 		}
-		return U(() => {
+		return W(() => {
 			if (Z(), r.autoUpdate) {
 				T = new ResizeObserver(Z), T.observe(a.value);
 				let e = a.value?.firstElementChild;
 				e && T.observe(e);
 			}
-		}), pe(() => {
+		}), fe(() => {
 			T?.disconnect(), E && clearTimeout(E), c.value && (c.value.removeEventListener("pointermove", De), c.value.removeEventListener("pointerup", Oe), c.value.removeEventListener("pointercancel", Oe)), l.value && (l.value.removeEventListener("pointermove", Ae), l.value.removeEventListener("pointerup", je), l.value.removeEventListener("pointercancel", je)), document.body.style.userSelect = "";
 		}), t({
 			scrollTo: (e) => {
@@ -2407,16 +2407,16 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			},
 			getContainer: () => a.value,
 			updateMetrics: Z
-		}), (e, t) => (W(), L("div", {
-			class: V(e.$style.ui3nScrollbar),
-			style: H({
-				"--ui3n-scrollbar-vertical-thumb-radius": K.value,
+		}), (e, t) => (G(), R("div", {
+			class: H(e.$style.ui3nScrollbar),
+			style: U({
+				"--ui3n-scrollbar-vertical-thumb-radius": he.value,
 				"--ui3n-scrollbar-vertical-thumb-color": ge.value,
 				"--ui3n-scrollbar-vertical-thumb-hover-color": _e.value,
 				"--ui3n-scrollbar-vertical-thumb-active-color": J.value,
 				"--ui3n-scrollbar-vertical-track-width": ve.value,
-				"--ui3n-scrollbar-vertical-track-radius": me.value,
-				"--ui3n-scrollbar-vertical-track-color": he.value,
+				"--ui3n-scrollbar-vertical-track-radius": pe.value,
+				"--ui3n-scrollbar-vertical-track-color": me.value,
 				"--ui3n-scrollbar-horizontal-thumb-radius": be.value,
 				"--ui3n-scrollbar-horizontal-thumb-color": xe.value,
 				"--ui3n-scrollbar-horizontal-thumb-hover-color": Se.value,
@@ -2428,53 +2428,53 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			onMouseenter: t[0] ||= (e) => C.value = !0,
 			onMouseleave: t[1] ||= (e) => C.value = !1
 		}, [
-			R("div", {
+			z("div", {
 				ref_key: "containerRef",
 				ref: a,
-				class: V([
+				class: H([
 					e.$style.scrollbarContainer,
 					u.value === "vertical" && e.$style.scrollbarContainerVertical,
 					u.value === "horizontal" && e.$style.scrollbarContainerHorizontal
 				]),
 				onScroll: Q
 			}, [q(e.$slots, "default")], 34),
-			M.value ? (W(), L("div", {
+			te.value ? (G(), R("div", {
 				key: 0,
 				ref_key: "trackRefV",
 				ref: o,
-				class: V([e.$style.trackVertical, { [e.$style.trackVisible]: ne.value }]),
-				style: H({
-					top: `${se.value}px`,
-					bottom: `${F.value}px`
+				class: H([e.$style.trackVertical, { [e.$style.trackVisible]: N.value }]),
+				style: U({
+					top: `${oe.value}px`,
+					bottom: `${I.value}px`
 				}),
 				onMousedown: $
-			}, [R("div", {
+			}, [z("div", {
 				ref_key: "thumbRefV",
 				ref: c,
-				class: V([e.$style.thumbVertical, { [e.$style.active]: x.value }]),
-				style: H({
-					height: `${le.value}px`,
-					transform: `translateY(${de.value}px)`
+				class: H([e.$style.thumbVertical, { [e.$style.active]: x.value }]),
+				style: U({
+					height: `${ce.value}px`,
+					transform: `translateY(${ue.value}px)`
 				}),
 				onPointerdown: Ee
-			}, null, 38)], 38)) : I("", !0),
-			re.value ? (W(), L("div", {
+			}, null, 38)], 38)) : L("", !0),
+			ne.value ? (G(), R("div", {
 				key: 1,
 				ref_key: "trackRefH",
 				ref: s,
-				class: V([e.$style.trackHorizontal, { [e.$style.trackVisible]: te.value }]),
-				style: H({ right: `${ce.value}px` }),
+				class: H([e.$style.trackHorizontal, { [e.$style.trackVisible]: M.value }]),
+				style: U({ right: `${se.value}px` }),
 				onMousedown: Te
-			}, [R("div", {
+			}, [z("div", {
 				ref_key: "thumbRefH",
 				ref: l,
-				class: V([e.$style.thumbHorizontal, { [e.$style.active]: S.value }]),
-				style: H({
-					width: `${ue.value}px`,
-					transform: `translateX(${fe.value}px)`
+				class: H([e.$style.thumbHorizontal, { [e.$style.active]: S.value }]),
+				style: U({
+					width: `${le.value}px`,
+					transform: `translateX(${de.value}px)`
 				}),
 				onPointerdown: ke
-			}, null, 38)], 38)) : I("", !0)
+			}, null, 38)], 38)) : L("", !0)
 		], 38));
 	}
 }), [["__cssModules", { $style: {
@@ -2488,7 +2488,7 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	thumbVertical: "_thumbVertical_1ywhy_65",
 	active: "_active_1ywhy_79",
 	thumbHorizontal: "_thumbHorizontal_1ywhy_83"
-} }]]), Qr = ["name", "value"], $r = ["name", "value"], ei = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), Qr = ["name", "value"], $r = ["name", "value"], ei = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-table",
 	props: {
 		config: {},
@@ -2497,17 +2497,17 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["change:sort", "select:row"],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = G(null), o = P(() => a.value?.getContainer() ?? null), s = G(null), c = G(0), l = null, { tableEl: u, tableColumnWidth: d, unusedPlaceCssStyle: f, currentConfig: p, visibleColumns: m, hasGroupActionsRow: h, showGroupActionsRow: g, selectedRows: _, selectedRowsArray: v, selectedRowsSize: y, stickyColumnsActive: b, stickyColumnsCount: x, stickyColumnLefts: S, scrollportWidth: C, closeGroupActionsRow: w, getRowKey: T, isRowSelected: E, getRowStyle: D, processSelection: O, toggleSelectedRows: k, changeSortOrder: ee, clear: j } = Jr(r, i, o), te = { select: O }, ne = P(() => r.config?.scrollbar?.axes ?? "both"), M = P(() => {
-			let e = r.config?.scrollbar?.vertical ?? {}, t = ne.value;
+		let r = e, i = n, a = K(null), o = F(() => a.value?.getContainer() ?? null), s = K(null), c = K(0), l = null, { tableEl: u, tableColumnWidth: d, unusedPlaceCssStyle: f, currentConfig: p, visibleColumns: m, hasGroupActionsRow: h, showGroupActionsRow: g, selectedRows: _, selectedRowsArray: v, selectedRowsSize: y, stickyColumnsActive: b, stickyColumnsCount: x, stickyColumnLefts: S, scrollportWidth: C, closeGroupActionsRow: w, getRowKey: T, isRowSelected: E, getRowStyle: D, processSelection: O, toggleSelectedRows: k, changeSortOrder: ee, clear: j } = Jr(r, i, o), M = { select: O }, N = F(() => r.config?.scrollbar?.axes ?? "both"), te = F(() => {
+			let e = r.config?.scrollbar?.vertical ?? {}, t = N.value;
 			return !(t === "vertical" || t === "both") || !c.value ? e : {
 				...e,
 				trackOffsetTop: c.value
 			};
-		}), re = P(() => {
+		}), ne = F(() => {
 			let e = { "--ui3n-table-columns-width": d.value };
 			return C.value != null && (e["--ui3n-table-scrollport-width"] = `${C.value}px`), e;
 		});
-		function ie() {
+		function re() {
 			l?.disconnect(), l = null;
 			let e = s.value;
 			if (!e || !r.config?.scrollbar) {
@@ -2523,10 +2523,10 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			s,
 			() => r.config?.scrollbar,
 			g
-		], ie, {
+		], re, {
 			immediate: !0,
 			flush: "post"
-		}), pe(() => {
+		}), fe(() => {
 			l?.disconnect(), l = null;
 		}), t({
 			getRowStyle: D,
@@ -2535,86 +2535,86 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			hasGroupActionsRow: h,
 			closeGroupActionsRow: w,
 			clear: j
-		}), (t, n) => e.config?.scrollbar ? (W(), F(Zr, {
+		}), (t, n) => e.config?.scrollbar ? (G(), I(Zr, {
 			key: 0,
 			ref_key: "scrollbarRef",
 			ref: a,
-			class: V(t.$style.tableHost),
-			axes: ne.value,
-			vertical: M.value,
+			class: H(t.$style.tableHost),
+			axes: N.value,
+			vertical: te.value,
 			horizontal: e.config.scrollbar.horizontal
 		}, {
-			default: Z(() => [R("div", {
+			default: Z(() => [z("div", {
 				ref_key: "tableEl",
 				ref: u,
-				style: H(re.value),
-				class: V([
+				style: U(ne.value),
+				class: H([
 					t.$style.ui3nTable,
 					t.$style.ui3nTableInsideScrollbar,
 					Y(b) && t.$style.stickyColumns
 				])
 			}, [
-				e.config?.tableName && Y(y) > 0 ? (W(), L("fieldset", {
+				e.config?.tableName && Y(y) > 0 ? (G(), R("fieldset", {
 					key: 0,
-					class: V(t.$style.hiddenBlock)
-				}, [(W(!0), L(N, null, K(Y(v), (t, n) => (W(), L("input", {
+					class: H(t.$style.hiddenBlock)
+				}, [(G(!0), R(P, null, he(Y(v), (t, n) => (G(), R("input", {
 					key: Y(T)(t, n),
 					type: "hidden",
 					name: e.config.selectable === "multiple" ? `${e.config.tableName}[]` : e.config.tableName,
 					value: String(Y(T)(t, n))
-				}, null, 8, Qr))), 128))], 2)) : I("", !0),
-				R("div", {
+				}, null, 8, Qr))), 128))], 2)) : L("", !0),
+				z("div", {
 					ref_key: "headerEl",
 					ref: s,
-					class: V([t.$style.header, Y(g) && t.$style.withGroupActions])
-				}, [Y(g) ? (W(), L("div", {
+					class: H([t.$style.header, Y(g) && t.$style.withGroupActions])
+				}, [Y(g) ? (G(), R("div", {
 					key: 0,
-					class: V(t.$style.groupActions)
+					class: H(t.$style.groupActions)
 				}, [
-					z(zr, {
+					B(zr, {
 						indeterminate: Y(y) < e.body.content.length && Y(y) !== 0,
 						"model-value": Y(y) === e.body.content.length,
 						onChange: Y(k)
 					}, {
-						default: Z(() => [ce(" Selected: " + J(Y(y)), 1)]),
+						default: Z(() => [se(" Selected: " + J(Y(y)), 1)]),
 						_: 1
 					}, 8, [
 						"indeterminate",
 						"model-value",
 						"onChange"
 					]),
-					R("div", { class: V(t.$style.groupActionsBody) }, [q(t.$slots, "group-actions", { selectedRows: Y(v) })], 2),
-					z(A, {
+					z("div", { class: H(t.$style.groupActionsBody) }, [q(t.$slots, "group-actions", { selectedRows: Y(v) })], 2),
+					B(A, {
 						type: "secondary",
 						onClick: Y(w)
 					}, {
-						default: Z(() => [...n[0] ||= [ce(" Cancel ", -1)]]),
+						default: Z(() => [...n[0] ||= [se(" Cancel ", -1)]]),
 						_: 1
 					}, 8, ["onClick"])
-				], 2)) : I("", !0), (W(!0), L(N, null, K(Y(m), (e, n) => (W(), L("div", {
+				], 2)) : L("", !0), (G(!0), R(P, null, he(Y(m), (e, n) => (G(), R("div", {
 					key: e.key,
-					class: V([
+					class: H([
 						t.$style.headerItemWrapper,
 						n === 0 && t.$style.headerItemFirst,
 						n < Y(x) && t.$style.headerItemSticky,
 						e.sortable && t.$style.sortable,
 						e.sortable && Y(p).sortOrder?.field === e.key && t.$style.sortableActive
 					]),
-					style: H([e.headCellStyle, n < Y(x) ? {
+					style: U([e.headCellStyle, n < Y(x) ? {
 						left: Y(S)[n],
 						zIndex: 6 + n
 					} : void 0])
-				}, [R("div", ue({
+				}, [z("div", le({
 					class: t.$style.headerItem,
 					style: e.headCellStyle
-				}, ve(e.sortable ? { click: () => Y(ee)(e.key) } : {}, !0)), [q(t.$slots, `header-cell-${e.key}`, {}, () => [R("span", { class: V(t.$style.headerText) }, J(e.text), 3)]), e.sortable && Y(p).sortOrder?.field === e.key ? (W(), F(Br, {
+				}, ve(e.sortable ? { click: () => Y(ee)(e.key) } : {}, !0)), [q(t.$slots, `header-cell-${e.key}`, {}, () => [z("span", { class: H(t.$style.headerText) }, J(e.text), 3)]), e.sortable && Y(p).sortOrder?.field === e.key ? (G(), I(Br, {
 					key: 0,
 					value: Y(p).sortOrder?.direction,
 					size: "16"
-				}, null, 8, ["value"])) : I("", !0)], 16)], 6))), 128))], 2),
-				R("div", { class: V(t.$style.body) }, [e.config?.showNoDataMessage && !Y(Tr.default)(e.body.content) ? q(t.$slots, "no-data", { key: 0 }, () => [R("div", { class: V(t.$style.noData) }, "No data", 2)]) : (W(), L(N, { key: 1 }, [t.$slots.row ? (W(!0), L(N, { key: 0 }, K(e.body.content, (n, r) => (W(), L("div", {
+				}, null, 8, ["value"])) : L("", !0)], 16)], 6))), 128))], 2),
+				z("div", { class: H(t.$style.body) }, [e.config?.showNoDataMessage && !Y(Tr.default)(e.body.content) ? q(t.$slots, "no-data", { key: 0 }, () => [z("div", { class: H(t.$style.noData) }, "No data", 2)]) : (G(), R(P, { key: 1 }, [t.$slots.row ? (G(!0), R(P, { key: 0 }, he(e.body.content, (n, r) => (G(), R("div", {
 					key: Y(T)(n, r),
-					class: V([
+					class: H([
 						t.$style.row,
 						t.$slots.row && t.$style.customRow,
 						Y(E)(n) && t.$style.selected,
@@ -2628,29 +2628,29 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 					columnStyle: e.config?.columnStyle,
 					stickyColumnsCount: Y(x),
 					stickyColumnLefts: Y(S),
-					events: te
-				})], 2))), 128)) : (W(!0), L(N, { key: 1 }, K(e.body.content, (n, r) => (W(), L("div", {
+					events: M
+				})], 2))), 128)) : (G(!0), R(P, { key: 1 }, he(e.body.content, (n, r) => (G(), R("div", {
 					key: Y(T)(n, r),
-					class: V([
+					class: H([
 						t.$style.row,
 						Y(E)(n) && t.$style.selected,
 						e.config.selectable && t.$style.selectable
 					]),
-					style: H(Y(D)(n))
-				}, [e.config.selectable ? (W(), L("div", {
+					style: U(Y(D)(n))
+				}, [e.config.selectable ? (G(), R("div", {
 					key: 0,
-					class: V(t.$style.rowCheckbox)
-				}, [z(zr, {
+					class: H(t.$style.rowCheckbox)
+				}, [B(zr, {
 					"model-value": Y(E)(n),
 					onChange: (e) => Y(O)(n)
-				}, null, 8, ["model-value", "onChange"])], 2)) : I("", !0), (W(!0), L(N, null, K(Y(m), (i, a) => (W(), L("div", {
+				}, null, 8, ["model-value", "onChange"])], 2)) : L("", !0), (G(!0), R(P, null, he(Y(m), (i, a) => (G(), R("div", {
 					key: i.key,
-					class: V([
+					class: H([
 						t.$style.bodyItem,
 						a === 0 && t.$style.bodyItemFirst,
 						a < Y(x) && t.$style.bodyItemSticky
 					]),
-					style: H(a < Y(x) ? {
+					style: U(a < Y(x) ? {
 						left: Y(S)[a],
 						zIndex: 2 + a
 					} : void 0)
@@ -2660,10 +2660,10 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 					isRowSelected: Y(E)(n),
 					columnStyle: e.config?.columnStyle,
 					cell: n[i.key]
-				}, () => [R("span", { class: V(t.$style.cell) }, J(i.format ? i.format(n[i.key]) : n[i.key]), 3)])], 6))), 128))], 6))), 128))], 64))], 2),
-				R("div", {
-					class: V(t.$style.unusedPlace),
-					style: H(Y(f))
+				}, () => [z("span", { class: H(t.$style.cell) }, J(i.format ? i.format(n[i.key]) : n[i.key]), 3)])], 6))), 128))], 6))), 128))], 64))], 2),
+				z("div", {
+					class: H(t.$style.unusedPlace),
+					style: U(Y(f))
 				}, [q(t.$slots, "unused-place")], 6)
 			], 6)]),
 			_: 3
@@ -2672,70 +2672,70 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			"axes",
 			"vertical",
 			"horizontal"
-		])) : (W(), L("div", {
+		])) : (G(), R("div", {
 			key: 1,
 			ref_key: "tableEl",
 			ref: u,
-			style: H(re.value),
-			class: V([t.$style.ui3nTable, Y(b) && t.$style.stickyColumns])
+			style: U(ne.value),
+			class: H([t.$style.ui3nTable, Y(b) && t.$style.stickyColumns])
 		}, [
-			e.config?.tableName && Y(y) > 0 ? (W(), L("fieldset", {
+			e.config?.tableName && Y(y) > 0 ? (G(), R("fieldset", {
 				key: 0,
-				class: V(t.$style.hiddenBlock)
-			}, [(W(!0), L(N, null, K(Y(v), (t, n) => (W(), L("input", {
+				class: H(t.$style.hiddenBlock)
+			}, [(G(!0), R(P, null, he(Y(v), (t, n) => (G(), R("input", {
 				key: Y(T)(t, n),
 				type: "hidden",
 				name: e.config.selectable === "multiple" ? `${e.config.tableName}[]` : e.config.tableName,
 				value: String(Y(T)(t, n))
-			}, null, 8, $r))), 128))], 2)) : I("", !0),
-			R("div", { class: V([t.$style.header, Y(g) && t.$style.withGroupActions]) }, [Y(g) ? (W(), L("div", {
+			}, null, 8, $r))), 128))], 2)) : L("", !0),
+			z("div", { class: H([t.$style.header, Y(g) && t.$style.withGroupActions]) }, [Y(g) ? (G(), R("div", {
 				key: 0,
-				class: V(t.$style.groupActions)
+				class: H(t.$style.groupActions)
 			}, [
-				z(zr, {
+				B(zr, {
 					indeterminate: Y(y) < e.body.content.length && Y(y) !== 0,
 					"model-value": Y(y) === e.body.content.length,
 					onChange: Y(k)
 				}, {
-					default: Z(() => [ce(" Selected: " + J(Y(y)), 1)]),
+					default: Z(() => [se(" Selected: " + J(Y(y)), 1)]),
 					_: 1
 				}, 8, [
 					"indeterminate",
 					"model-value",
 					"onChange"
 				]),
-				R("div", { class: V(t.$style.groupActionsBody) }, [q(t.$slots, "group-actions", { selectedRows: Y(v) })], 2),
-				z(A, {
+				z("div", { class: H(t.$style.groupActionsBody) }, [q(t.$slots, "group-actions", { selectedRows: Y(v) })], 2),
+				B(A, {
 					type: "secondary",
 					onClick: Y(w)
 				}, {
-					default: Z(() => [...n[1] ||= [ce(" Cancel ", -1)]]),
+					default: Z(() => [...n[1] ||= [se(" Cancel ", -1)]]),
 					_: 1
 				}, 8, ["onClick"])
-			], 2)) : I("", !0), (W(!0), L(N, null, K(Y(m), (e, n) => (W(), L("div", {
+			], 2)) : L("", !0), (G(!0), R(P, null, he(Y(m), (e, n) => (G(), R("div", {
 				key: e.key,
-				class: V([
+				class: H([
 					t.$style.headerItemWrapper,
 					n === 0 && t.$style.headerItemFirst,
 					n < Y(x) && t.$style.headerItemSticky,
 					e.sortable && t.$style.sortable,
 					e.sortable && Y(p).sortOrder?.field === e.key && t.$style.sortableActive
 				]),
-				style: H([e.headCellStyle, n < Y(x) ? {
+				style: U([e.headCellStyle, n < Y(x) ? {
 					left: Y(S)[n],
 					zIndex: 6 + n
 				} : void 0])
-			}, [R("div", ue({
+			}, [z("div", le({
 				class: t.$style.headerItem,
 				style: e.headCellStyle
-			}, ve(e.sortable ? { click: () => Y(ee)(e.key) } : {}, !0)), [q(t.$slots, `header-cell-${e.key}`, {}, () => [R("span", { class: V(t.$style.headerText) }, J(e.text), 3)]), e.sortable && Y(p).sortOrder?.field === e.key ? (W(), F(Br, {
+			}, ve(e.sortable ? { click: () => Y(ee)(e.key) } : {}, !0)), [q(t.$slots, `header-cell-${e.key}`, {}, () => [z("span", { class: H(t.$style.headerText) }, J(e.text), 3)]), e.sortable && Y(p).sortOrder?.field === e.key ? (G(), I(Br, {
 				key: 0,
 				value: Y(p).sortOrder?.direction,
 				size: "16"
-			}, null, 8, ["value"])) : I("", !0)], 16)], 6))), 128))], 2),
-			R("div", { class: V(t.$style.body) }, [e.config?.showNoDataMessage && !Y(Tr.default)(e.body.content) ? q(t.$slots, "no-data", { key: 0 }, () => [R("div", { class: V(t.$style.noData) }, "No data", 2)]) : (W(), L(N, { key: 1 }, [t.$slots.row ? (W(!0), L(N, { key: 0 }, K(e.body.content, (n, r) => (W(), L("div", {
+			}, null, 8, ["value"])) : L("", !0)], 16)], 6))), 128))], 2),
+			z("div", { class: H(t.$style.body) }, [e.config?.showNoDataMessage && !Y(Tr.default)(e.body.content) ? q(t.$slots, "no-data", { key: 0 }, () => [z("div", { class: H(t.$style.noData) }, "No data", 2)]) : (G(), R(P, { key: 1 }, [t.$slots.row ? (G(!0), R(P, { key: 0 }, he(e.body.content, (n, r) => (G(), R("div", {
 				key: Y(T)(n, r),
-				class: V([
+				class: H([
 					t.$style.row,
 					t.$slots.row && t.$style.customRow,
 					Y(E)(n) && t.$style.selected,
@@ -2749,29 +2749,29 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				columnStyle: e.config?.columnStyle,
 				stickyColumnsCount: Y(x),
 				stickyColumnLefts: Y(S),
-				events: te
-			})], 2))), 128)) : (W(!0), L(N, { key: 1 }, K(e.body.content, (n, r) => (W(), L("div", {
+				events: M
+			})], 2))), 128)) : (G(!0), R(P, { key: 1 }, he(e.body.content, (n, r) => (G(), R("div", {
 				key: Y(T)(n, r),
-				class: V([
+				class: H([
 					t.$style.row,
 					Y(E)(n) && t.$style.selected,
 					e.config.selectable && t.$style.selectable
 				]),
-				style: H(Y(D)(n))
-			}, [e.config.selectable ? (W(), L("div", {
+				style: U(Y(D)(n))
+			}, [e.config.selectable ? (G(), R("div", {
 				key: 0,
-				class: V(t.$style.rowCheckbox)
-			}, [z(zr, {
+				class: H(t.$style.rowCheckbox)
+			}, [B(zr, {
 				"model-value": Y(E)(n),
 				onChange: (e) => Y(O)(n)
-			}, null, 8, ["model-value", "onChange"])], 2)) : I("", !0), (W(!0), L(N, null, K(Y(m), (i, a) => (W(), L("div", {
+			}, null, 8, ["model-value", "onChange"])], 2)) : L("", !0), (G(!0), R(P, null, he(Y(m), (i, a) => (G(), R("div", {
 				key: i.key,
-				class: V([
+				class: H([
 					t.$style.bodyItem,
 					a === 0 && t.$style.bodyItemFirst,
 					a < Y(x) && t.$style.bodyItemSticky
 				]),
-				style: H(a < Y(x) ? {
+				style: U(a < Y(x) ? {
 					left: Y(S)[a],
 					zIndex: 2 + a
 				} : void 0)
@@ -2781,10 +2781,10 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				isRowSelected: Y(E)(n),
 				columnStyle: e.config?.columnStyle,
 				cell: n[i.key]
-			}, () => [R("span", { class: V(t.$style.cell) }, J(i.format ? i.format(n[i.key]) : n[i.key]), 3)])], 6))), 128))], 6))), 128))], 64))], 2),
-			R("div", {
-				class: V(t.$style.unusedPlace),
-				style: H(Y(f))
+			}, () => [z("span", { class: H(t.$style.cell) }, J(i.format ? i.format(n[i.key]) : n[i.key]), 3)])], 6))), 128))], 6))), 128))], 64))], 2),
+			z("div", {
+				class: H(t.$style.unusedPlace),
+				style: U(Y(f))
 			}, [q(t.$slots, "unused-place")], 6)
 		], 6));
 	}
@@ -2817,22 +2817,22 @@ var Yr = 2, Xr = 2, Zr = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	headerItemSticky: "_headerItemSticky_vxa0k_236",
 	headerItemFirst: "_headerItemFirst_vxa0k_240",
 	bodyItemSticky: "_bodyItemSticky_vxa0k_246"
-} }]]), ti = ["id", "onClick"], ni = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), ti = ["id", "onClick"], ni = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-dialog-provider",
 	setup(e) {
-		let t = le(C);
+		let t = ce(C);
 		function n(e, n) {
 			(n.closeOnClickOverlay || n.dialogProps?.closeOnClickOverlay) && t.$closeDialog(e, { event: "click-overlay" });
 		}
 		function r(e, n) {
 			t.$closeDialog(e, n);
 		}
-		return (e, i) => (W(), F(ae, { to: "body" }, [(W(!0), L(N, null, K(Y(t).dialogStack.value, (t) => (W(), L("div", {
+		return (e, i) => (G(), I(ie, { to: "body" }, [(G(!0), R(P, null, he(Y(t).dialogStack.value, (t) => (G(), R("div", {
 			id: `dialog-wrapper-${t.id}`,
 			key: t.id,
-			class: V(e.$style["dialog-provider-overlay"]),
+			class: H(e.$style["dialog-provider-overlay"]),
 			onClick: $((e) => n(t.id, t.props), ["self", "prevent"])
-		}, [(W(), F(ge(t.component), ue({ ref_for: !0 }, t.props, { onAction: (e) => r(t.id, e) }), null, 16, ["onAction"]))], 10, ti))), 128))]));
+		}, [(G(), I(ge(t.component), le({ ref_for: !0 }, t.props, { onAction: (e) => r(t.id, e) }), null, 16, ["onAction"]))], 10, ti))), 128))]));
 	}
 }), [["__cssModules", { $style: { "dialog-provider-overlay": "_dialog-provider-overlay_v01lr_1" } }]]);
 //#endregion
@@ -2846,7 +2846,7 @@ function ri({ width: e, style: t, defaultValue: n = 380 }) {
 }
 //#endregion
 //#region src/components/ui3n-dialog/ui3n-dialog.vue?vue&type=script&setup=true&lang.ts
-var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
+var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-dialog",
 	props: {
 		id: {},
@@ -2883,14 +2883,14 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["action"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = Se("dialog-el"), a = G(!1), o = G({
+		let n = e, r = t, i = Se("dialog-el"), a = K(!1), o = K({
 			initialLeft: 0,
 			initialTop: 0,
 			left: 0,
 			top: 0,
 			shiftX: 0,
 			shiftY: 0
-		}), s = P(() => ({
+		}), s = F(() => ({
 			width: ri({
 				width: n.width,
 				style: n.cssStyle
@@ -2900,7 +2900,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				left: `${o.value.left}px`,
 				top: `${o.value.top}px`
 			}
-		})), c = P(() => n.icon ? typeof n.icon == "string" ? {
+		})), c = F(() => n.icon ? typeof n.icon == "string" ? {
 			icon: n.icon,
 			size: 14,
 			color: "var(--color-icon-control-secondary-default)"
@@ -2930,8 +2930,8 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		function p(e) {
 			a.value && (o.value.left = e.clientX - o.value.shiftX - o.value.initialLeft, o.value.top = e.clientY - o.value.shiftY - o.value.initialTop);
 		}
-		return U(() => {
-			i.value && (i.value.style.setProperty("--ui3n-dialog-confirm-button-color", n.confirmButtonColor), i.value.style.setProperty("--ui3n-dialog-cancel-button-color", n.cancelButtonColor), i.value.style.setProperty("--ui3n-dialog-confirm-background-color", n.confirmButtonBackground), i.value.style.setProperty("--ui3n-dialog-cancel-background-color", n.cancelButtonBackground), de(() => {
+		return W(() => {
+			i.value && (i.value.style.setProperty("--ui3n-dialog-confirm-button-color", n.confirmButtonColor), i.value.style.setProperty("--ui3n-dialog-cancel-button-color", n.cancelButtonColor), i.value.style.setProperty("--ui3n-dialog-confirm-background-color", n.confirmButtonBackground), i.value.style.setProperty("--ui3n-dialog-cancel-background-color", n.cancelButtonBackground), ue(() => {
 				i.value && i.value.focus(), setTimeout(() => {
 					if (i.value) {
 						let e = i.value.getBoundingClientRect();
@@ -2939,7 +2939,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 					}
 				}, 100);
 			}));
-		}), (t, i) => (W(), L("div", ue({
+		}), (t, i) => (G(), R("div", le({
 			id: e.id,
 			ref: "dialog-el",
 			tabindex: "1",
@@ -2956,22 +2956,22 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			mousemove: p,
 			keydown: l
 		} : { keydown: l }, !0)), [
-			e.title && !t.$slots.header ? (W(), L("div", {
+			e.title && !t.$slots.header ? (G(), R("div", {
 				key: 0,
-				class: V([t.$style.title, t.$style.titleDefault])
-			}, [c.value ? (W(), F(ee, ue({ key: 0 }, c.value, { class: t.$style.icon }), null, 16, ["class"])) : I("", !0), R("span", null, J(e.title), 1)], 2)) : I("", !0),
-			t.$slots.header ? (W(), L("div", {
+				class: H([t.$style.title, t.$style.titleDefault])
+			}, [c.value ? (G(), I(ee, le({ key: 0 }, c.value, { class: t.$style.icon }), null, 16, ["class"])) : L("", !0), z("span", null, J(e.title), 1)], 2)) : L("", !0),
+			t.$slots.header ? (G(), R("div", {
 				key: 1,
-				class: V(t.$style.title)
-			}, [q(t.$slots, "header")], 2)) : I("", !0),
-			t.$slots.body ? (W(), L("div", {
+				class: H(t.$style.title)
+			}, [q(t.$slots, "header")], 2)) : L("", !0),
+			t.$slots.body ? (G(), R("div", {
 				key: 2,
-				class: V(t.$style.content)
-			}, [q(t.$slots, "body")], 2)) : I("", !0),
-			(e.confirmButton || e.cancelButton) && !t.$slots.actions ? (W(), L("div", {
+				class: H(t.$style.content)
+			}, [q(t.$slots, "body")], 2)) : L("", !0),
+			(e.confirmButton || e.cancelButton) && !t.$slots.actions ? (G(), R("div", {
 				key: 3,
-				class: V([t.$style.actions, t.$style.actionsDefault])
-			}, [e.cancelButton ? (W(), F(A, {
+				class: H([t.$style.actions, t.$style.actionsDefault])
+			}, [e.cancelButton ? (G(), I(A, {
 				key: 0,
 				type: "custom",
 				color: e.cancelButtonBackground,
@@ -2981,9 +2981,9 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 					data: n.data
 				}), ["stop", "prevent"])
 			}, {
-				default: Z(() => [ce(J(e.cancelButtonText), 1)]),
+				default: Z(() => [se(J(e.cancelButtonText), 1)]),
 				_: 1
-			}, 8, ["color", "text-color"])) : I("", !0), e.confirmButton ? (W(), F(A, {
+			}, 8, ["color", "text-color"])) : L("", !0), e.confirmButton ? (G(), I(A, {
 				key: 1,
 				type: "custom",
 				color: e.confirmButtonBackground,
@@ -2994,24 +2994,24 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 					data: n.data
 				}), ["stop", "prevent"])
 			}, {
-				default: Z(() => [ce(J(e.confirmButtonText), 1)]),
+				default: Z(() => [se(J(e.confirmButtonText), 1)]),
 				_: 1
 			}, 8, [
 				"color",
 				"text-color",
 				"disabled"
-			])) : I("", !0)], 2)) : I("", !0),
-			t.$slots.actions ? (W(), L("div", {
+			])) : L("", !0)], 2)) : L("", !0),
+			t.$slots.actions ? (G(), R("div", {
 				key: 4,
-				class: V(t.$style.actions)
-			}, [q(t.$slots, "actions")], 2)) : I("", !0),
-			t.$slots.loading ? (W(), L("div", {
+				class: H(t.$style.actions)
+			}, [q(t.$slots, "actions")], 2)) : L("", !0),
+			t.$slots.loading ? (G(), R("div", {
 				key: 5,
-				class: V(t.$style.loading)
-			}, [q(t.$slots, "loading")], 2)) : I("", !0),
-			e.hideCloseButton ? I("", !0) : (W(), F(A, {
+				class: H(t.$style.loading)
+			}, [q(t.$slots, "loading")], 2)) : L("", !0),
+			e.hideCloseButton ? L("", !0) : (G(), I(A, {
 				key: 6,
-				class: V(t.$style.closeBtn),
+				class: H(t.$style.closeBtn),
 				type: "icon",
 				size: "small",
 				color: "var(--color-bg-block-primary-default)",
@@ -3033,10 +3033,11 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	actions: "_actions_13zmx_74",
 	actionsDefault: "_actionsDefault_13zmx_81",
 	loading: "_loading_13zmx_89"
-} }]]), oi = ["id"], si = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), oi = ["id"], si = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-menu",
 	props: {
 		id: {},
+		width: { default: "max-content" },
 		modelValue: { type: Boolean },
 		triggerElement: {},
 		positionStrategy: { default: "absolute" },
@@ -3077,10 +3078,10 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		"update:modelValue"
 	],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = Se("menu-trigger-element"), o = Se("menu-content-element"), s = G(!1), c = G(r.triggerElement || null), l = P(() => c.value || a.value), u = P(() => {
+		let r = e, i = n, a = Se("menu-trigger-element"), o = Se("menu-content-element"), s = K(!1), c = K(r.triggerElement || null), l = F(() => c.value || a.value), u = F(() => {
 			let e = l.value;
 			return e ? e instanceof HTMLElement ? e : "contextElement" in e && e.contextElement instanceof HTMLElement ? e.contextElement : null : null;
-		}), d = P(() => {
+		}), d = F(() => {
 			let e = [Oe({
 				mainAxis: r.offsetY,
 				crossAxis: r.offsetX + 2
@@ -3094,7 +3095,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			strategy: r.positionStrategy,
 			middleware: d,
 			whileElementsMounted: r.positionAutoupdate || r.positionStrategy === "fixed" ? Ee : void 0
-		}), h = P(() => {
+		}), h = F(() => {
 			let e = "";
 			if (typeof r.contentBorderRadius == "number") e = `${r.contentBorderRadius}px`;
 			else if (Array.isArray(r.contentBorderRadius)) {
@@ -3107,11 +3108,11 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				...e && { "--ui3n-menu-content-border-radius": e },
 				...r.contentStyles || {}
 			};
-		});
-		function g(e) {
+		}), g = F(() => ({ width: isNaN(Number(r.width)) ? String(r.width) : `${r.width}px` }));
+		function _(e) {
 			e.preventDefault();
 		}
-		function _(e) {
+		function v(e) {
 			if (!e) return document.body;
 			let t = e.parentElement;
 			for (; t && t !== document.body && t !== document.documentElement;) {
@@ -3121,70 +3122,71 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			}
 			return document.body;
 		}
-		function v() {
+		function y() {
 			if (!r.lockScroll) return;
-			let e = _(u.value);
+			let e = v(u.value);
 			if (e) {
 				let t = Number(e.dataset.scrollLocksCount || "0");
-				t === 0 ? (e.dataset.scrollLocksCount = "1", e.dataset.originalOverscroll = e.style.overscrollBehaviorY || "", e.style.overscrollBehaviorY = "contain", e === document.body ? (document.addEventListener("wheel", g, { passive: !1 }), document.addEventListener("touchmove", g, { passive: !1 })) : (e.addEventListener("wheel", g, { passive: !1 }), e.addEventListener("touchmove", g, { passive: !1 }))) : e.dataset.scrollLocksCount = String(t + 1);
+				t === 0 ? (e.dataset.scrollLocksCount = "1", e.dataset.originalOverscroll = e.style.overscrollBehaviorY || "", e.style.overscrollBehaviorY = "contain", e === document.body ? (document.addEventListener("wheel", _, { passive: !1 }), document.addEventListener("touchmove", _, { passive: !1 })) : (e.addEventListener("wheel", _, { passive: !1 }), e.addEventListener("touchmove", _, { passive: !1 }))) : e.dataset.scrollLocksCount = String(t + 1);
 			}
 		}
-		function y() {
-			let e = _(u.value);
+		function b() {
+			let e = v(u.value);
 			if (!e) return;
 			let t = Number(e.dataset.scrollLocksCount || "0");
 			if (t > 0) {
 				let n = t - 1;
 				if (n === 0) {
 					let t = e.dataset.originalOverscroll;
-					t ? e.style.overscrollBehaviorY = t : e.style.removeProperty("overscroll-behavior-y"), e === document.body ? (document.removeEventListener("wheel", g), document.removeEventListener("touchmove", g)) : (e.removeEventListener("wheel", g), e.removeEventListener("touchmove", g)), delete e.dataset.scrollLocksCount, delete e.dataset.originalOverscroll;
+					t ? e.style.overscrollBehaviorY = t : e.style.removeProperty("overscroll-behavior-y"), e === document.body ? (document.removeEventListener("wheel", _), document.removeEventListener("touchmove", _)) : (e.removeEventListener("wheel", _), e.removeEventListener("touchmove", _)), delete e.dataset.scrollLocksCount, delete e.dataset.originalOverscroll;
 				} else e.dataset.scrollLocksCount = String(n);
 			}
 		}
-		function b() {
+		function x() {
 			r.disabled || (s.value = !s.value, s.value ? i("open") : i("close"), i("update:modelValue", s.value));
 		}
-		function x() {
+		function S() {
 			s.value = !1, i("close"), i("update:modelValue", s.value);
 		}
-		function S(e) {
+		function C(e) {
 			u.value?.contains(e.target) || (i("click-outside"), r.closeOnClickOutside && (s.value = !1, i("close"), i("update:modelValue", s.value)));
 		}
 		return X(() => s.value, (e) => {
-			e ? v() : y();
+			e ? y() : b();
 		}), X(() => r.modelValue, (e) => {
 			e !== void 0 && s.value !== e && (s.value = e, i(e ? "open" : "close"));
 		}, { immediate: !0 }), X(() => r.triggerElement, (e) => {
 			e && (c.value = e, m());
 		}), X([() => r.offsetX, () => r.offsetY], ([e, t], [n, r]) => {
 			(e !== n || t !== r) && m();
-		}), me(() => {
-			y();
+		}), pe(() => {
+			b();
 		}), t({
 			isPositioned: p,
 			update: m
-		}), (t, n) => (W(), L("div", {
+		}), (t, n) => (G(), R("div", {
 			ref: "menu-element",
 			id: e.id,
-			class: V(t.$style.ui3nMenu),
+			class: H(t.$style.ui3nMenu),
+			style: U(g.value),
 			onClick: n[0] ||= (e) => i("click", e)
-		}, [R("div", {
+		}, [z("div", {
 			ref: "menu-trigger-element",
-			class: V([t.$style.ui3nMenuTrigger, e.disabled && t.$style.ui3nMenuTriggerDisabled]),
-			onClick: $(b, ["stop"])
-		}, [q(t.$slots, "default")], 2), s.value ? we((W(), L("div", ue({
+			class: H([t.$style.ui3nMenuTrigger, e.disabled && t.$style.ui3nMenuTriggerDisabled]),
+			onClick: $(x, ["stop"])
+		}, [q(t.$slots, "default")], 2), s.value ? we((G(), R("div", le({
 			key: 0,
 			ref: "menu-content-element",
 			style: h.value,
 			class: t.$style.ui3nMenuContent
-		}, ve(e.closeOnClick ? { click: x } : {}, !0)), [q(t.$slots, "menu")], 16)), [[Y(Dn), S]]) : I("", !0)], 10, oi));
+		}, ve(e.closeOnClick ? { click: S } : {}, !0)), [q(t.$slots, "menu")], 16)), [[Y(Dn), C]]) : L("", !0)], 14, oi));
 	}
 }), [["__cssModules", { $style: {
-	ui3nMenu: "_ui3nMenu_t6wf8_3",
-	ui3nMenuTrigger: "_ui3nMenuTrigger_t6wf8_11",
-	ui3nMenuTriggerDisabled: "_ui3nMenuTriggerDisabled_t6wf8_15",
-	ui3nMenuContent: "_ui3nMenuContent_t6wf8_20"
-} }]]), ci = ["id"], li = ["onClick"], ui = /* @__PURE__ */ k(/* @__PURE__ */ B({
+	ui3nMenu: "_ui3nMenu_sjqaw_3",
+	ui3nMenuTrigger: "_ui3nMenuTrigger_sjqaw_10",
+	ui3nMenuTriggerDisabled: "_ui3nMenuTriggerDisabled_sjqaw_14",
+	ui3nMenuContent: "_ui3nMenuContent_sjqaw_19"
+} }]]), ci = ["id"], li = ["onClick"], ui = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-list",
 	props: {
 		id: {},
@@ -3203,21 +3205,21 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	emits: ["select"],
 	setup(e, { emit: t }) {
 		let n = t;
-		return (t, r) => (W(), L("div", {
+		return (t, r) => (G(), R("div", {
 			ref: "listElement",
 			id: e.id,
-			class: V(t.$style.ui3nList)
-		}, [R("div", { class: V([t.$style.ui3nListTitle, e.sticky && t.$style.ui3nListTitleSticky]) }, [q(t.$slots, "title", {}, () => [e.title ? (W(), L("div", {
+			class: H(t.$style.ui3nList)
+		}, [z("div", { class: H([t.$style.ui3nListTitle, e.sticky && t.$style.ui3nListTitleSticky]) }, [q(t.$slots, "title", {}, () => [e.title ? (G(), R("div", {
 			key: 0,
-			class: V(t.$style.ui3nListTitleContent)
-		}, J(e.title), 3)) : I("", !0)])], 2), R("div", { class: V(t.$style.ui3nListContent) }, [(W(!0), L(N, null, K(e.items, (r, i) => (W(), L("div", {
+			class: H(t.$style.ui3nListTitleContent)
+		}, J(e.title), 3)) : L("", !0)])], 2), z("div", { class: H(t.$style.ui3nListContent) }, [(G(!0), R(P, null, he(e.items, (r, i) => (G(), R("div", {
 			key: r[e.keyField],
-			class: V(t.$style.ui3nListItem)
+			class: H(t.$style.ui3nListItem)
 		}, [q(t.$slots, "item", {
 			item: r,
 			index: i
-		}, () => [R("div", {
-			class: V([t.$style.ui3nListItemContent, e.disabled && t.$style.ui3nListItemContentDisabled]),
+		}, () => [z("div", {
+			class: H([t.$style.ui3nListItemContent, e.disabled && t.$style.ui3nListItemContentDisabled]),
 			onClick: $((e) => n("select", {
 				value: r,
 				index: i
@@ -3233,7 +3235,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	ui3nListItem: "_ui3nListItem_1mtxl_26",
 	ui3nListItemContent: "_ui3nListItemContent_1mtxl_43",
 	ui3nListItemContentDisabled: "_ui3nListItemContentDisabled_1mtxl_50"
-} }]]), di = 32, fi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), di = 32, fi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-scrollbar-vertical",
 	props: {
 		thumbMinHeight: { default: di },
@@ -3252,10 +3254,10 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["scroll"],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = G(null), o = G(null), s = G(null), c = G(0), l = G(0), u = G(0), d = G(!1), f = G(!1), p = G(!1), m = null, h, g = 0, _ = 0, v = P(() => c.value > l.value), y = P(() => d.value ? !0 : v.value && (f.value || p.value)), b = P(() => {
+		let r = e, i = n, a = K(null), o = K(null), s = K(null), c = K(0), l = K(0), u = K(0), d = K(!1), f = K(!1), p = K(!1), m = null, h, g = 0, _ = 0, v = F(() => c.value > l.value), y = F(() => d.value ? !0 : v.value && (f.value || p.value)), b = F(() => {
 			let e = Number(r.thumbMinHeight);
 			return isNaN(e) ? di : e;
-		}), x = P(() => {
+		}), x = F(() => {
 			if (!c.value) return 0;
 			if (r.thumbHeight !== "auto") {
 				let e = Number(r.thumbHeight);
@@ -3263,17 +3265,17 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			}
 			let e = l.value / c.value, t = l.value * e;
 			return Math.max(b.value, t);
-		}), S = P(() => {
+		}), S = F(() => {
 			if (!c.value || c.value === l.value) return 0;
 			let e = c.value - l.value, t = l.value - x.value;
 			return u.value / e * t;
-		}), C = P(() => {
+		}), C = F(() => {
 			let e = Number(r.thumbRadius);
 			return isNaN(e) ? String(r.thumbRadius) : `${e}px`;
-		}), w = P(() => r.thumbColor), T = P(() => r.thumbHoverColor), E = P(() => r.thumbActiveColor), D = P(() => {
+		}), w = F(() => r.thumbColor), T = F(() => r.thumbHoverColor), E = F(() => r.thumbActiveColor), D = F(() => {
 			let e = Number(r.trackWidth);
 			return isNaN(e) ? String(r.trackWidth) : `${e}px`;
-		}), O = P(() => r.trackColor), k = P(() => {
+		}), O = F(() => r.trackColor), k = F(() => {
 			let e = Number(r.trackRadius);
 			return isNaN(e) ? String(r.trackRadius) : `${e}px`;
 		});
@@ -3290,35 +3292,35 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			let t = o.value.getBoundingClientRect(), n = e.clientY - t.top - x.value / 2, r = c.value - l.value, i = n / (l.value - x.value) * r;
 			i = Math.max(0, Math.min(r, i)), a.value.scrollTo({ top: i });
 		}
-		function te(e) {
-			!s.value || !a.value || (e.pointerType === "mouse" && 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", ne), s.value.addEventListener("pointerup", M), s.value.addEventListener("pointercancel", M));
+		function M(e) {
+			!s.value || !a.value || (e.pointerType === "mouse" && 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", N), s.value.addEventListener("pointerup", te), s.value.addEventListener("pointercancel", te));
 		}
-		function ne(e) {
+		function N(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;
 		}
-		function M(e) {
+		function te(e) {
 			if (d.value && (d.value = !1, document.body.style.userSelect = "", s.value)) {
 				try {
 					s.value.releasePointerCapture(e.pointerId);
 				} catch {}
-				s.value.removeEventListener("pointermove", ne), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M);
+				s.value.removeEventListener("pointermove", N), s.value.removeEventListener("pointerup", te), s.value.removeEventListener("pointercancel", te);
 			}
 		}
-		return U(() => {
+		return W(() => {
 			A(), a.value && (m = new ResizeObserver(A), m.observe(a.value), r.autoUpdate && a.value.firstElementChild && m.observe(a.value.firstElementChild));
-		}), pe(() => {
-			m?.disconnect(), h && clearTimeout(h), s.value && (s.value.removeEventListener("pointermove", ne), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M)), document.body.style.userSelect = "";
+		}), fe(() => {
+			m?.disconnect(), h && clearTimeout(h), s.value && (s.value.removeEventListener("pointermove", N), s.value.removeEventListener("pointerup", te), s.value.removeEventListener("pointercancel", te)), document.body.style.userSelect = "";
 		}), t({
 			scrollTo: (e) => {
 				a.value?.scrollTo(e);
 			},
 			getContainer: () => a.value,
 			updateMetrics: A
-		}), (e, t) => (W(), L("div", {
-			class: V(e.$style.ui3nScrollbarVertical),
-			style: H({
+		}), (e, t) => (G(), R("div", {
+			class: H(e.$style.ui3nScrollbarVertical),
+			style: U({
 				"--ui3n-scrollbar-thumb-radius": C.value,
 				"--ui3n-scrollbar-thumb-color": w.value,
 				"--ui3n-scrollbar-thumb-hover-color": T.value,
@@ -3329,25 +3331,25 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			}),
 			onMouseenter: t[0] ||= (e) => f.value = !0,
 			onMouseleave: t[1] ||= (e) => f.value = !1
-		}, [R("div", {
+		}, [z("div", {
 			ref_key: "containerRef",
 			ref: a,
-			class: V(e.$style.scrollbarContainer),
+			class: H(e.$style.scrollbarContainer),
 			onScroll: ee
-		}, [q(e.$slots, "default")], 34), R("div", {
+		}, [q(e.$slots, "default")], 34), z("div", {
 			ref_key: "trackRef",
 			ref: o,
-			class: V([e.$style.track, { [e.$style.trackVisible]: y.value }]),
+			class: H([e.$style.track, { [e.$style.trackVisible]: y.value }]),
 			onPointerdown: j
-		}, [R("div", {
+		}, [z("div", {
 			ref_key: "thumbRef",
 			ref: s,
-			class: V([e.$style.thumb, { [e.$style.active]: d.value }]),
-			style: H({
+			class: H([e.$style.thumb, { [e.$style.active]: d.value }]),
+			style: U({
 				height: `${x.value}px`,
 				transform: `translateY(${S.value}px)`
 			}),
-			onPointerdown: te
+			onPointerdown: M
 		}, null, 38)], 34)], 38));
 	}
 }), [["__cssModules", { $style: {
@@ -3357,7 +3359,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	trackVisible: "_trackVisible_m0o0t_38",
 	thumb: "_thumb_m0o0t_44",
 	active: "_active_m0o0t_57"
-} }]]), pi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), pi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-virtual-scroll",
 	props: {
 		items: {},
@@ -3376,11 +3378,11 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		"reached-bottom"
 	],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = G(0), o = G(null), s = G(null), c = _e([]), l = G(0), u = /* @__PURE__ */ new Map(), d = _e(/* @__PURE__ */ new Map()), f = !1, p = null, m = null, h = [], g = null, _ = /* @__PURE__ */ new Map(), v = P(() => {
+		let r = e, i = n, a = K(0), o = K(null), s = K(null), c = _e([]), l = K(0), u = /* @__PURE__ */ new Map(), d = _e(/* @__PURE__ */ new Map()), f = !1, p = null, m = null, h = [], g = null, _ = /* @__PURE__ */ new Map(), v = F(() => {
 			if (l.value, !c.value.length) return 0;
 			let e = c.value[c.value.length - 1];
 			return e.top + e.height;
-		}), y = P(() => {
+		}), y = F(() => {
 			if (o.value !== null) return o.value;
 			let e = s.value?.getContainer();
 			return e ? e.clientHeight : 0;
@@ -3397,18 +3399,18 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			}
 			return i === -1 && (i = Math.max(0, r)), i;
 		}
-		let x = P(() => {
+		let x = F(() => {
 			if (l.value, !c.value.length) return 0;
 			let e = b(c.value, a.value);
 			return Math.max(0, e - r.renderAhead);
-		}), S = P(() => {
+		}), S = F(() => {
 			l.value;
 			let e = y.value;
 			if (!e) return r.renderAhead * 2;
 			if (!c.value.length) return Math.ceil(e / r.minChildHeight) + 2 * r.renderAhead;
 			let t = b(c.value, a.value);
 			return b(c.value, a.value + e) - t + 1 + 2 * r.renderAhead;
-		}), C = P(() => (l.value, c.value.length && c.value[x.value]?.top || 0)), w = P(() => {
+		}), C = F(() => (l.value, c.value.length && c.value[x.value]?.top || 0)), w = F(() => {
 			let e = x.value, t = S.value;
 			return e + t >= r.items.length - r.renderAhead ? r.items.slice(e) : r.items.slice(e, e + t);
 		});
@@ -3460,7 +3462,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			for (let [e, t] of n) u.set(e, t);
 			return d.value = e, t;
 		}
-		function te() {
+		function M() {
 			let e = T(), t = c.value, n = h, i = r.stickToBottom && (!t.length || D(e, t)), o = i ? null : A(t, n, a.value);
 			c.value = j(), l.value++, h = r.items.slice(), g = null;
 			let u = () => {
@@ -3472,18 +3474,18 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				}
 				s.value?.updateMetrics();
 			};
-			de(() => {
+			ue(() => {
 				requestAnimationFrame(u);
 			});
 		}
-		function ne(e) {
+		function N(e) {
 			if (f) return;
 			let t = e.target;
 			a.value = t.scrollTop, i("scroll", e);
 			let n = a.value <= r.reachEdgeThreshold, o = D(t, c.value, r.reachEdgeThreshold);
 			n ? g !== "top" && (g = "top", i("reached-top")) : o ? g !== "bottom" && (g = "bottom", i("reached-bottom")) : g = null;
 		}
-		function M(e, t) {
+		function te(e, t) {
 			if (e) {
 				let n = e.$el || e, r = _.get(t);
 				r && r !== n && p?.unobserve(r), _.set(t, n), p?.observe(n);
@@ -3492,31 +3494,31 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				e && p?.unobserve(e), _.delete(t);
 			}
 		}
-		function re() {
+		function ne() {
 			k(), s.value?.updateMetrics();
 		}
-		function ie(e, t, n) {
+		function re(e, t, n) {
 			return t === "end" ? e.top + e.height - n : t === "center" ? e.top + e.height / 2 - n / 2 : e.top;
 		}
-		function ae(e, t = "start", n = 5) {
+		function ie(e, t = "start", n = 5) {
 			let r = d.value.get(e);
 			if (r === void 0) return;
 			let i = c.value[r];
 			if (!i) return;
 			let a = T();
-			if (O(a, ie(i, t, a?.clientHeight ?? y.value)), s.value?.updateMetrics(), n <= 0) return;
+			if (O(a, re(i, t, a?.clientHeight ?? y.value)), s.value?.updateMetrics(), n <= 0) return;
 			let o = i.top;
 			requestAnimationFrame(() => {
 				let r = d.value.get(e), i = r === void 0 ? void 0 : c.value[r];
-				i && i.top !== o && ae(e, t, n - 1);
+				i && i.top !== o && ie(e, t, n - 1);
 			});
 		}
 		return t({
-			scrollToBottom: re,
-			scrollToItem: (e, t) => ae(e, t),
+			scrollToBottom: ne,
+			scrollToItem: (e, t) => ie(e, t),
 			getScrollTop: () => a.value,
 			isStuckToBottom: () => D(T(), c.value)
-		}), U(() => {
+		}), W(() => {
 			let e = T();
 			e && (o.value = e.clientHeight, m = new ResizeObserver((e) => {
 				for (let t of e) o.value = t.contentRect.height || t.target.clientHeight;
@@ -3546,25 +3548,25 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				});
 			});
 			for (let e of _.values()) p.observe(e);
-		}), pe(() => {
+		}), fe(() => {
 			p?.disconnect(), m?.disconnect();
-		}), X(() => r.items, te, { immediate: !0 }), (e, t) => (W(), F(fi, {
+		}), X(() => r.items, M, { immediate: !0 }), (e, t) => (G(), I(fi, {
 			ref_key: "scrollbarComponentRef",
 			ref: s,
-			class: V(e.$style.ui3nVirtualScroll),
+			class: H(e.$style.ui3nVirtualScroll),
 			"auto-update": !1,
-			onScroll: ne
+			onScroll: N
 		}, {
-			default: Z(() => [R("div", {
-				class: V(e.$style.viewport),
-				style: H({ height: `${v.value}px` })
-			}, [R("div", {
-				class: V(e.$style.content),
-				style: H({ transform: `translateY(${C.value}px)` })
-			}, [(W(!0), L(N, null, K(w.value, (t, n) => (W(), L("div", ue({
+			default: Z(() => [z("div", {
+				class: H(e.$style.viewport),
+				style: U({ height: `${v.value}px` })
+			}, [z("div", {
+				class: H(e.$style.content),
+				style: U({ transform: `translateY(${C.value}px)` })
+			}, [(G(!0), R(P, null, he(w.value, (t, n) => (G(), R("div", le({
 				key: t.id,
 				ref_for: !0,
-				ref: (e) => M(e, t.id)
+				ref: (e) => te(e, t.id)
 			}, { ref_for: !0 }, { "data-sid": t.id }, {
 				class: e.$style.item,
 				style: { minHeight: `${r.minChildHeight}px` }
@@ -3580,7 +3582,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	viewport: "_viewport_1mjyl_5",
 	content: "_content_1mjyl_14",
 	item: "_item_1mjyl_18"
-} }]]), mi = ["id"], hi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), mi = ["id"], hi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-tabs",
 	props: {
 		id: {},
@@ -3594,7 +3596,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = ye(), a = G(null), o = G(n.modelValue), s = P(() => ({
+		let n = e, r = t, i = ye(), a = K(null), o = K(n.modelValue), s = F(() => ({
 			"--ui3n-tabs-active-color": n.activeColor,
 			"--ui3n-tabs-inactive-color": n.inactiveColor,
 			"--ui3n-tabs-indicator-color": n.indicatorColor,
@@ -3619,17 +3621,17 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			}
 		}
 		return X(() => n.modelValue, (e) => {
-			e !== o.value && (o.value = e, de(() => {
+			e !== o.value && (o.value = e, ue(() => {
 				c();
 			}));
-		}, { immediate: !0 }), U(() => {
+		}, { immediate: !0 }), W(() => {
 			c();
-		}), (t, n) => (W(), L("div", {
+		}), (t, n) => (G(), R("div", {
 			ref_key: "tabs",
 			ref: a,
 			id: e.id,
-			style: H(s.value),
-			class: V([Y(i).ui3nTabs, e.itemDirection === "vertical" && Y(i).vertical]),
+			style: U(s.value),
+			class: H([Y(i).ui3nTabs, e.itemDirection === "vertical" && Y(i).vertical]),
 			onClick: l
 		}, [q(t.$slots, "default")], 14, mi));
 	}
@@ -3638,7 +3640,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	item: "_item_1yilq_13",
 	active: "_active_1yilq_52",
 	vertical: "_vertical_1yilq_60"
-} }]]), gi = ["id"], _i = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), gi = ["id"], _i = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-badge-simple",
 	props: {
 		id: {},
@@ -3656,32 +3658,32 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			v74cb25de: e.color,
 			v77996f31: e.textColor
 		}));
-		let n = e, r = t, i = G(null);
+		let n = e, r = t, i = K(null);
 		function a() {
-			de(() => {
+			ue(() => {
 				i.value && r("change:size", {
 					width: i.value.offsetWidth,
 					height: i.value.offsetHeight
 				});
 			});
 		}
-		return X(() => [n.value, n.dot], () => a()), U(() => {
+		return X(() => [n.value, n.dot], () => a()), W(() => {
 			a();
-		}), (t, n) => (W(), L("div", {
+		}), (t, n) => (G(), R("div", {
 			ref_key: "element",
 			ref: i,
 			id: e.id,
-			class: V([t.$style.ui3nBadgeSimple, e.dot && t.$style.ui3nBadgeDot])
-		}, [e.dot ? I("", !0) : (W(), L("span", {
+			class: H([t.$style.ui3nBadgeSimple, e.dot && t.$style.ui3nBadgeDot])
+		}, [e.dot ? L("", !0) : (G(), R("span", {
 			key: 0,
-			class: V(t.$style.ui3nBadgeText)
+			class: H(t.$style.ui3nBadgeText)
 		}, J(e.value), 3))], 10, gi));
 	}
 }), [["__cssModules", { $style: {
 	ui3nBadgeSimple: "_ui3nBadgeSimple_1vu4n_1",
 	ui3nBadgeDot: "_ui3nBadgeDot_1vu4n_12",
 	ui3nBadgeText: "_ui3nBadgeText_1vu4n_30"
-} }]]), vi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), vi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-badge",
 	props: {
 		id: {},
@@ -3695,7 +3697,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		position: { default: "right-top" }
 	},
 	setup(e) {
-		let t = e, n = xe(), r = G(), i = P(() => !!n.default), a = P(() => {
+		let t = e, n = xe(), r = K(), i = F(() => !!n.default), a = F(() => {
 			let [e, n] = t.position.split("-");
 			return {
 				...e === "right" && { right: `-${(0, Ur.default)(r.value, "width", 0) / 2}px` },
@@ -3704,17 +3706,17 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				...n === "bottom" && { bottom: `-${(0, Ur.default)(r.value, "height", 0) / 2}px` }
 			};
 		});
-		return (t, n) => i.value ? (W(), L("div", {
+		return (t, n) => i.value ? (G(), R("div", {
 			key: 0,
-			class: V(t.$style.ui3nBadge)
-		}, [R("div", { class: V(t.$style.ui3nBadgeWrapper) }, [q(t.$slots, "default"), z(_i, {
+			class: H(t.$style.ui3nBadge)
+		}, [z("div", { class: H(t.$style.ui3nBadgeWrapper) }, [q(t.$slots, "default"), B(_i, {
 			id: e.id,
 			dot: e.dot,
 			value: e.value,
 			color: e.color,
 			"text-color": e.textColor,
-			style: H(a.value),
-			class: V(t.$style.ui3nBadgeContent),
+			style: U(a.value),
+			class: H(t.$style.ui3nBadgeContent),
 			"onChange:size": n[0] ||= (e) => r.value = e
 		}, null, 8, [
 			"id",
@@ -3724,7 +3726,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			"text-color",
 			"style",
 			"class"
-		])], 2)], 2)) : (W(), F(_i, {
+		])], 2)], 2)) : (G(), I(_i, {
 			key: 1,
 			id: e.id,
 			dot: e.dot,
@@ -3743,7 +3745,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	ui3nBadge: "_ui3nBadge_1slsk_1",
 	ui3nBadgeWrapper: "_ui3nBadgeWrapper_1slsk_6",
 	ui3nBadgeContent: "_ui3nBadgeContent_1slsk_12"
-} }]]), yi = { key: 2 }, bi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), yi = { key: 2 }, bi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-breadcrumb",
 	props: {
 		separator: { default: void 0 },
@@ -3758,14 +3760,14 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["click"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = xe(), a = ye(), o = le("ui3n-breadcrumbs-context", null), s = P(() => n.separator ? n.separator : o ? o.separator() : "/"), c = P(() => o ? o.disabled() : !1), l = P(() => {
+		let n = e, r = t, i = xe(), a = ye(), o = ce("ui3n-breadcrumbs-context", null), s = F(() => n.separator ? n.separator : o ? o.separator() : "/"), c = F(() => o ? o.disabled() : !1), l = F(() => {
 			let e = [a.ui3nBreadcrumb];
 			return n.isActive && e.push(a.ui3nBreadcrumbActive), (n.disabled || c.value) && e.push(a.ui3nBreadcrumbDisabled), e;
 		});
 		function u(e) {
 			r("click", e);
 		}
-		return (t, n) => (W(), L("div", ue({ class: l.value }, ve(e.isActive && !(e.disabled || c.value) ? { click: u } : {}, !0)), [R("span", { class: V(t.$style.content) }, [q(t.$slots, "default")], 2), R("div", { class: V(t.$style.ui3nBreadcrumbSeparator) }, [typeof Y(i).separator == "function" ? q(t.$slots, "separator", { key: 0 }) : Y(o)?.customSeparatorSlot ? (W(), F(ge(Y(o).customSeparatorSlot), { key: 1 })) : (W(), L("span", yi, J(s.value), 1))], 2)], 16));
+		return (t, n) => (G(), R("div", le({ class: l.value }, ve(e.isActive && !(e.disabled || c.value) ? { click: u } : {}, !0)), [z("span", { class: H(t.$style.content) }, [q(t.$slots, "default")], 2), z("div", { class: H(t.$style.ui3nBreadcrumbSeparator) }, [typeof Y(i).separator == "function" ? q(t.$slots, "separator", { key: 0 }) : Y(o)?.customSeparatorSlot ? (G(), I(ge(Y(o).customSeparatorSlot), { key: 1 })) : (G(), R("span", yi, J(s.value), 1))], 2)], 16));
 	}
 }), [["__cssModules", { $style: {
 	ui3nBreadcrumb: "_ui3nBreadcrumb_1tz9w_1",
@@ -3773,7 +3775,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	content: "_content_1tz9w_14",
 	ui3nBreadcrumbActive: "_ui3nBreadcrumbActive_1tz9w_28",
 	ui3nBreadcrumbDisabled: "_ui3nBreadcrumbDisabled_1tz9w_33"
-} }]]), xi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), xi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-breadcrumbs",
 	props: {
 		separator: { default: "/" },
@@ -3784,18 +3786,18 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	setup(e) {
 		let t = e;
-		return he("ui3n-breadcrumbs-context", {
+		return me("ui3n-breadcrumbs-context", {
 			separator: () => t.separator,
 			disabled: () => t.disabled,
 			customSeparatorSlot: xe().separator
-		}), (e, t) => (W(), L("div", { class: V(e.$style.ui3nBreadcrumbs) }, [q(e.$slots, "default")], 2));
+		}), (e, t) => (G(), R("div", { class: H(e.$style.ui3nBreadcrumbs) }, [q(e.$slots, "default")], 2));
 	}
 }), [["__cssModules", { $style: { ui3nBreadcrumbs: "_ui3nBreadcrumbs_1oq6f_1" } }]]), Si = ["id", "tabindex"], Ci = [
 	"name",
 	"checked",
 	"disabled",
 	"value"
-], wi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+], wi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-switch",
 	props: {
 		id: {},
@@ -3810,7 +3812,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["change", "update:modelValue"],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = xe(), o = G(!1), s = P(() => ({
+		let r = e, i = n, a = xe(), o = K(!1), s = F(() => ({
 			"--ui3n-switch-color": r.color,
 			"--ui3n-switch-size": `${r.size}px`
 		}));
@@ -3822,11 +3824,11 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		}
 		return t({ clear: l }), X(() => r.name, (e) => {
 			e || l();
-		}), X(() => r.modelValue, (e) => o.value = e, { immediate: !0 }), (t, n) => (W(), L("div", {
+		}), X(() => r.modelValue, (e) => o.value = e, { immediate: !0 }), (t, n) => (G(), R("div", {
 			id: e.id,
-			style: H(s.value),
+			style: U(s.value),
 			tabindex: e.disabled ? -1 : 0,
-			class: V([
+			class: H([
 				t.$style.ui3nSwitch,
 				o.value && t.$style.checked,
 				!Y(a).default && t.$style.noLabel,
@@ -3835,7 +3837,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			onKeydown: [Q(c, ["enter"]), Q(c, ["space"])],
 			onClick: c
 		}, [
-			e.name ? (W(), L("input", {
+			e.name ? (G(), R("input", {
 				key: 0,
 				type: "checkbox",
 				hidden: "",
@@ -3843,9 +3845,9 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				checked: o.value,
 				disabled: e.disabled,
 				value: o.value ? "on" : ""
-			}, null, 8, Ci)) : I("", !0),
-			R("div", { class: V(t.$style.body) }, [R("div", { class: V([t.$style.dot, o.value ? t.$style.right : t.$style.left]) }, null, 2)], 2),
-			R("div", { class: V(t.$style.label) }, [q(t.$slots, "default")], 2)
+			}, null, 8, Ci)) : L("", !0),
+			z("div", { class: H(t.$style.body) }, [z("div", { class: H([t.$style.dot, o.value ? t.$style.right : t.$style.left]) }, null, 2)], 2),
+			z("div", { class: H(t.$style.label) }, [q(t.$slots, "default")], 2)
 		], 46, Si));
 	}
 }), [["__cssModules", { $style: {
@@ -3858,7 +3860,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	right: "_right_1lo7b_57",
 	label: "_label_1lo7b_61",
 	disabled: "_disabled_1lo7b_68"
-} }]]), Ti = ["id"], Ei = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), Ti = ["id"], Ei = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-step-line-bar",
 	props: {
 		id: {},
@@ -3867,13 +3869,13 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		steps: { default: 1 }
 	},
 	setup(e) {
-		let t = e, n = P(() => Math.max(0, Math.floor(t.steps)));
-		return (t, r) => (W(), L("div", {
+		let t = e, n = F(() => Math.max(0, Math.floor(t.steps)));
+		return (t, r) => (G(), R("div", {
 			id: e.id,
-			class: V(t.$style.ui3nStepLineBar)
-		}, [R("div", { class: V(t.$style.label) }, J(e.label), 3), R("div", { class: V(t.$style.body) }, [(W(!0), L(N, null, K(n.value, (n) => (W(), L("div", {
+			class: H(t.$style.ui3nStepLineBar)
+		}, [z("div", { class: H(t.$style.label) }, J(e.label), 3), z("div", { class: H(t.$style.body) }, [(G(!0), R(P, null, he(n.value, (n) => (G(), R("div", {
 			key: n,
-			class: V([t.$style.step, n <= e.current && t.$style.active])
+			class: H([t.$style.step, n <= e.current && t.$style.active])
 		}, null, 2))), 128))], 2)], 10, Ti));
 	}
 }), [["__cssModules", { $style: {
@@ -3882,7 +3884,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	body: "_body_119zg_17",
 	step: "_step_119zg_25",
 	active: "_active_119zg_33"
-} }]]), Di = 12, Oi = 5, ki = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), Di = 12, Oi = 5, ki = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-progress-linear",
 	props: {
 		value: { default: 0 },
@@ -3902,28 +3904,28 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		let t = e, n = (e) => {
 			let t = parseFloat(String(e));
 			return isNaN(t) ? 0 : t;
-		}, r = P(() => n(t.height)), i = P(() => {
+		}, r = F(() => n(t.height)), i = F(() => {
 			let e = n(t.value);
 			return Math.min(Math.max(e, 0), 100);
-		}), a = P(() => t.withText && !t.indeterminate), o = P(() => `${i.value}%`), s = P(() => ({
+		}), a = F(() => t.withText && !t.indeterminate), o = F(() => `${i.value}%`), s = F(() => ({
 			"--ui3n-progress-linear-height": `${r.value}px`,
 			"--ui3n-progress-linear-bg": t.bgColor,
 			"--ui3n-progress-linear-color": t.color,
 			"--ui3n-progress-linear-font-size": `${Math.max(r.value - 2, 10)}px`
 		}));
-		return (t, n) => (W(), L("div", {
-			style: H(s.value),
-			class: V([t.$style.ui3nProgressLinear, e.indeterminate && t.$style.indeterminate])
-		}, [a.value && r.value < Di ? (W(), L("div", {
+		return (t, n) => (G(), R("div", {
+			style: U(s.value),
+			class: H([t.$style.ui3nProgressLinear, e.indeterminate && t.$style.indeterminate])
+		}, [a.value && r.value < Di ? (G(), R("div", {
 			key: 0,
-			class: V([t.$style.text, t.$style.above])
-		}, J(o.value), 3)) : I("", !0), R("div", { class: V(t.$style.body) }, [R("div", {
-			class: V(t.$style.value),
-			style: H(e.indeterminate ? void 0 : { width: o.value })
-		}, [a.value && r.value >= Di && i.value >= Oi ? (W(), L("div", {
+			class: H([t.$style.text, t.$style.above])
+		}, J(o.value), 3)) : L("", !0), z("div", { class: H(t.$style.body) }, [z("div", {
+			class: H(t.$style.value),
+			style: U(e.indeterminate ? void 0 : { width: o.value })
+		}, [a.value && r.value >= Di && i.value >= Oi ? (G(), R("div", {
 			key: 0,
-			class: V(t.$style.text)
-		}, J(o.value), 3)) : I("", !0)], 6)], 2)], 6));
+			class: H(t.$style.text)
+		}, J(o.value), 3)) : L("", !0)], 6)], 2)], 6));
 	}
 }), [["__cssModules", { $style: {
 	ui3nProgressLinear: "_ui3nProgressLinear_1avv2_1",
@@ -3933,7 +3935,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	above: "_above_1avv2_37",
 	indeterminate: "_indeterminate_1avv2_47",
 	"linear-fly": "_linear-fly_1avv2_1"
-} }]]), Ai = ["height", "width"], ji = ["r"], Mi = ["r", "stroke-dasharray"], Ni = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), Ai = ["height", "width"], ji = ["r"], Mi = ["r", "stroke-dasharray"], Ni = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-progress-circular",
 	props: {
 		value: { default: 0 },
@@ -3954,39 +3956,39 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		let t = e, n = (e) => {
 			let t = parseFloat(String(e));
 			return isNaN(t) ? 0 : t;
-		}, r = P(() => n(t.size) || 64), i = P(() => Math.min(Math.max(n(t.value), 0), 100)), a = P(() => t.withText && !t.indeterminate), o = P(() => t.width ? n(t.width) / r.value * 100 : 8), s = P(() => (100 - o.value) / 2), c = P(() => Math.round(Math.PI * 2 * s.value)), l = P(() => {
+		}, r = F(() => n(t.size) || 64), i = F(() => Math.min(Math.max(n(t.value), 0), 100)), a = F(() => t.withText && !t.indeterminate), o = F(() => t.width ? n(t.width) / r.value * 100 : 8), s = F(() => (100 - o.value) / 2), c = F(() => Math.round(Math.PI * 2 * s.value)), l = F(() => {
 			let e = Math.round(c.value * i.value / 100);
 			return `${e} ${c.value - e}`;
-		}), u = P(() => `${Math.floor(r.value / 3.8)}px`), d = P(() => ({
+		}), u = F(() => `${Math.floor(r.value / 3.8)}px`), d = F(() => ({
 			"--ui3n-progress-circular-size": `${r.value}px`,
 			"--ui3n-progress-circular-font-size": u.value,
 			"--ui3n-progress-circular-bg": t.bgColor,
 			"--ui3n-progress-circular-color": t.color,
 			"--ui3n-progress-virtual-width": String(o.value)
 		}));
-		return (t, n) => (W(), L("div", {
-			style: H(d.value),
-			class: V([t.$style.ui3nProgressCircular, e.indeterminate && t.$style.indeterminate])
-		}, [(W(), L("svg", {
+		return (t, n) => (G(), R("div", {
+			style: U(d.value),
+			class: H([t.$style.ui3nProgressCircular, e.indeterminate && t.$style.indeterminate])
+		}, [(G(), R("svg", {
 			height: r.value,
 			width: r.value,
 			viewBox: "0 0 100 100",
-			class: V(t.$style.pie)
-		}, [R("circle", {
-			class: V(t.$style.background),
+			class: H(t.$style.pie)
+		}, [z("circle", {
+			class: H(t.$style.background),
 			r: s.value,
 			cx: "50",
 			cy: "50"
-		}, null, 10, ji), R("circle", {
-			class: V(t.$style.chart),
+		}, null, 10, ji), z("circle", {
+			class: H(t.$style.chart),
 			r: s.value,
 			cx: "50",
 			cy: "50",
 			"stroke-dasharray": e.indeterminate ? void 0 : l.value
-		}, null, 10, Mi)], 10, Ai)), a.value ? (W(), L("div", {
+		}, null, 10, Mi)], 10, Ai)), a.value ? (G(), R("div", {
 			key: 0,
-			class: V(t.$style.text)
-		}, J(i.value) + "% ", 3)) : I("", !0)], 6));
+			class: H(t.$style.text)
+		}, J(i.value) + "% ", 3)) : L("", !0)], 6));
 	}
 }), [["__cssModules", { $style: {
 	ui3nProgressCircular: "_ui3nProgressCircular_zypt9_1",
@@ -3997,7 +3999,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	indeterminate: "_indeterminate_zypt9_45",
 	"circular-spin": "_circular-spin_zypt9_1",
 	"circular-dash": "_circular-dash_zypt9_1"
-} }]]), Pi = 5, Fi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), Pi = 5, Fi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-tooltip",
 	props: {
 		id: {},
@@ -4024,10 +4026,10 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		"update:modelValue"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = G(!1), a = G(null), o = G(null), s = G(null), c = G(!1), l = P(() => {
+		let n = e, r = t, i = K(!1), a = K(null), o = K(null), s = K(null), c = K(!1), l = F(() => {
 			let [e] = n.placement.split("-");
 			return e;
-		}), u = P(() => {
+		}), u = F(() => {
 			let e = {
 				mainAxis: 0,
 				crossAxis: 0
@@ -4047,7 +4049,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 					break;
 			}
 			return e;
-		}), d = P(() => [Oe(u.value), Te({
+		}), d = F(() => [Oe(u.value), Te({
 			element: s,
 			padding: 8
 		})]), { floatingStyles: f, isPositioned: p, middlewareData: m } = Ae(a, o, {
@@ -4056,7 +4058,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			strategy: n.positionStrategy,
 			middleware: d,
 			whileElementsMounted: n.positionStrategy === "fixed" ? Ee : void 0
-		}), h = P(() => {
+		}), h = F(() => {
 			let e = typeof n.maxContentWidth == "number" || !isNaN(Number(n.maxContentWidth)) ? `${n.maxContentWidth}px` : String(n.maxContentWidth);
 			return {
 				...f.value,
@@ -4082,33 +4084,33 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		function b() {
 			y(), !(!a.value || n.disabled) && (n.trigger === "hover" ? (a.value.addEventListener("mouseenter", g), a.value.addEventListener("mouseleave", _)) : n.trigger === "click" && a.value.addEventListener("click", v));
 		}
-		return U(() => {
+		return W(() => {
 			c.value = !0, b();
-		}), pe(() => {
+		}), fe(() => {
 			y();
 		}), X([() => n.trigger, () => n.disabled], () => {
 			b();
 		}), X(() => n.modelValue, (e) => n.trigger === "manual" && (i.value = e), { immediate: !0 }), X(p, (e) => {
 			r(e ? "opened" : "closed");
-		}), (t, n) => (W(), L(N, null, [R("div", {
+		}), (t, n) => (G(), R(P, null, [z("div", {
 			ref_key: "referenceContainer",
 			ref: a,
-			class: V(t.$style.container)
-		}, [q(t.$slots, "default")], 2), i.value ? (W(), L("div", {
+			class: H(t.$style.container)
+		}, [q(t.$slots, "default")], 2), i.value ? (G(), R("div", {
 			key: 0,
 			ref_key: "floatingEl",
 			ref: o,
-			class: V(t.$style.floating),
-			style: H(h.value)
-		}, [q(t.$slots, "content", {}, () => [R("div", { class: V(t.$style.content) }, [ce(J(e.content) + " ", 1), R("div", {
+			class: H(t.$style.floating),
+			style: U(h.value)
+		}, [q(t.$slots, "content", {}, () => [z("div", { class: H(t.$style.content) }, [se(J(e.content) + " ", 1), z("div", {
 			ref_key: "floatingArrowEl",
 			ref: s,
-			class: V([t.$style.arrow, t.$style[`arrow-${l.value}`]]),
-			style: H({
+			class: H([t.$style.arrow, t.$style[`arrow-${l.value}`]]),
+			style: U({
 				left: Y(m).arrow?.x == null ? "" : `${Y(m).arrow?.x}px`,
 				top: Y(m).arrow?.y == null ? "" : `${Y(m).arrow?.y}px`
 			})
-		}, null, 6)], 2)])], 6)) : I("", !0)], 64));
+		}, null, 6)], 2)])], 6)) : L("", !0)], 64));
 	}
 }), [["__cssModules", { $style: {
 	container: "_container_1wkac_1",
@@ -4124,7 +4126,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	"checked",
 	"value",
 	"disabled"
-], Li = ["tabindex"], Ri = ["width", "height"], zi = ["width", "height"], Bi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+], Li = ["tabindex"], Ri = ["width", "height"], zi = ["width", "height"], Bi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-radio",
 	props: {
 		id: {},
@@ -4162,7 +4164,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["change", "update:modelValue"],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = xe(), o = le("ui3n-radio-group-context", null), s = P(() => o !== null), c = P(() => o ? o.groupName.value : r.name || ""), l = G(s.value && o ? o.groupValue.value : r.modelValue), u = P(() => s.value && o ? o.groupValue.value === r.checkedValue : l.value === r.checkedValue), d = P(() => ({
+		let r = e, i = n, a = xe(), o = ce("ui3n-radio-group-context", null), s = F(() => o !== null), c = F(() => o ? o.groupName.value : r.name || ""), l = K(s.value && o ? o.groupValue.value : r.modelValue), u = F(() => s.value && o ? o.groupValue.value === r.checkedValue : l.value === r.checkedValue), d = F(() => ({
 			"--ui3n-radio-size": `${r.size}px`,
 			"--ui3n-radio-color": r.color
 		}));
@@ -4178,22 +4180,22 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		function p() {
 			l.value = r.uncheckedValue, s.value || (i("change", l.value), i("update:modelValue", l.value));
 		}
-		return t({ clear: p }), fe(() => {
+		return t({ clear: p }), de(() => {
 			let e = !!a.checkedIcon, t = !!a.uncheckedIcon;
 			if (e && !t || !e && t) throw Error("[Ui3nRadio] Both checkedIcon and uncheckedIcon slots must have values defined.");
 		}), X(() => r.name, (e) => {
 			!e && !s.value && p();
 		}), X(() => r.modelValue, (e) => {
 			e !== l.value && (l.value = e);
-		}), (t, n) => (W(), L("div", {
-			style: H(d.value),
-			class: V([
+		}), (t, n) => (G(), R("div", {
+			style: U(d.value),
+			class: H([
 				t.$style.ui3nRadio,
 				e.disabled && t.$style.disabled,
 				!Y(a).default && t.$style.noLabel
 			])
 		}, [
-			R("input", {
+			z("input", {
 				type: "radio",
 				hidden: "",
 				name: c.value,
@@ -4201,29 +4203,29 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				value: String(e.checkedValue),
 				disabled: e.disabled
 			}, null, 8, Ii),
-			R("div", {
-				class: V([t.$style.body, e.disabled && t.$style.bodyDisabled]),
+			z("div", {
+				class: H([t.$style.body, e.disabled && t.$style.bodyDisabled]),
 				tabindex: e.disabled ? -1 : 0,
 				onKeydown: [Q(f, ["enter"]), Q(f, ["space"])],
 				onClick: f
-			}, [u.value ? q(t.$slots, "checkedIcon", { key: 0 }, () => [(W(), L("svg", {
+			}, [u.value ? q(t.$slots, "checkedIcon", { key: 0 }, () => [(G(), R("svg", {
 				width: Number(e.size) - 4,
 				height: Number(e.size) - 4,
 				viewBox: "0 0 24 24",
-				class: V([t.$style.icon, e.disabled && t.$style.iconDisabled])
-			}, [...n[0] ||= [R("path", {
+				class: H([t.$style.icon, e.disabled && t.$style.iconDisabled])
+			}, [...n[0] ||= [z("path", {
 				fill: "currentColor",
 				d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5m0-5C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8"
-			}, null, -1)]], 10, Ri))]) : q(t.$slots, "uncheckedIcon", { key: 1 }, () => [(W(), L("svg", {
+			}, null, -1)]], 10, Ri))]) : q(t.$slots, "uncheckedIcon", { key: 1 }, () => [(G(), R("svg", {
 				width: Number(e.size) - 4,
 				height: Number(e.size) - 4,
 				viewBox: "0 0 24 24",
-				class: V([t.$style.icon, e.disabled && t.$style.iconDisabled])
-			}, [...n[1] ||= [R("path", {
+				class: H([t.$style.icon, e.disabled && t.$style.iconDisabled])
+			}, [...n[1] ||= [z("path", {
 				fill: "currentColor",
 				d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8"
 			}, null, -1)]], 10, zi))])], 42, Li),
-			R("div", { class: V(t.$style.label) }, [q(t.$slots, "default")], 2)
+			z("div", { class: H(t.$style.label) }, [q(t.$slots, "default")], 2)
 		], 6));
 	}
 }), [["__cssModules", { $style: {
@@ -4235,7 +4237,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	icon: "_icon_17bki_62",
 	bodyDisabled: "_bodyDisabled_17bki_71",
 	iconDisabled: "_iconDisabled_17bki_72"
-} }]]), Vi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), Vi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-radio-group",
 	props: {
 		id: {},
@@ -4253,13 +4255,13 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["change", "update:modelValue"],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = G(r.modelValue);
+		let r = e, i = n, a = K(r.modelValue);
 		function o(e) {
 			a.value = e, i("update:modelValue", e), i("change", e);
 		}
-		he("ui3n-radio-group-context", {
-			groupValue: P(() => a.value),
-			groupName: P(() => r.name || ""),
+		me("ui3n-radio-group-context", {
+			groupValue: F(() => a.value),
+			groupName: F(() => r.name || ""),
 			updateGroupValue: o
 		});
 		function s() {
@@ -4269,7 +4271,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			e !== a.value && (a.value = e);
 		}), X(() => r.name, (e) => {
 			e || s();
-		}), (t, n) => (W(), L("div", { class: V([t.$style.ui3nRadioGroup, e.direction === "horizontal" && t.$style.horizontal]) }, [q(t.$slots, "default")], 2));
+		}), (t, n) => (G(), R("div", { class: H([t.$style.ui3nRadioGroup, e.direction === "horizontal" && t.$style.horizontal]) }, [q(t.$slots, "default")], 2));
 	}
 }), [["__cssModules", { $style: {
 	ui3nRadioGroup: "_ui3nRadioGroup_1aejh_1",
@@ -4278,7 +4280,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	"value",
 	"placeholder",
 	"disabled"
-], Gi = ["title"], Ki = 60, qi = /* @__PURE__ */ k(/* @__PURE__ */ B({
+], Gi = ["title"], Ki = 60, qi = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-editable",
 	props: {
 		id: {},
@@ -4301,7 +4303,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		"focusout"
 	],
 	setup(e, { expose: t, emit: n }) {
-		let r = O, i = Dn, a = e, o = n, s = G(null), c = G(null), l = G("auto"), u = G(null), d = G(a.modelValue), f = G(a.modelValue), p = G(!1), m = P(() => {
+		let r = O, i = Dn, a = e, o = n, s = K(null), c = K(null), l = K("auto"), u = K(null), d = K(a.modelValue), f = K(a.modelValue), p = K(!1), m = F(() => {
 			let e = "100%";
 			if (a.maxWidth) {
 				let t = Number(a.maxWidth);
@@ -4311,12 +4313,12 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				"--ui3n-editable-min-width": `${Ki}px`,
 				"--ui3n-editable-max-width": e
 			};
-		}), h = P(() => u.value ? u.value.scrollWidth > u.value.clientWidth : !1), g = P(() => a.disallowEmptyValue ? !!d.value : !0);
+		}), h = F(() => u.value ? u.value.scrollWidth > u.value.clientWidth : !1), g = F(() => a.disallowEmptyValue ? !!d.value : !0);
 		function _() {
 			c.value && (c.value.textContent = d.value || a.placeholder || "", l.value = `${Math.max(c.value.scrollWidth + 48, Ki)}px`);
 		}
 		function v() {
-			a.disabled || (p.value = !0, f.value = d.value, de(() => {
+			a.disabled || (p.value = !0, f.value = d.value, ue(() => {
 				s.value && (_(), s.value.focus(), a.selectAllOnFocus && s.value.select());
 			}));
 		}
@@ -4341,32 +4343,32 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			!a.disabled && o("toggle:editMode", e);
 		}), X(() => a.name, (e) => {
 			e || C();
-		}), (t, n) => we((W(), L("div", {
+		}), (t, n) => we((G(), R("div", {
 			id: e.id,
-			class: V([
+			class: H([
 				t.$style.ui3nEditable,
 				e.disabled && t.$style.ui3nEditableDisabled,
 				p.value && t.$style.ui3nEditableInEdit,
 				p.value && !g.value && t.$style.ui3nEditableInEditWarning
 			]),
-			style: H(m.value),
+			style: U(m.value),
 			onFocusin: n[0] ||= (e) => o("focusin", e)
-		}, [e.name ? (W(), L("input", {
+		}, [e.name ? (G(), R("input", {
 			key: 0,
 			type: "hidden",
 			name: e.name,
 			value: d.value
-		}, null, 8, Ui)) : I("", !0), p.value ? (W(), L(N, { key: 1 }, [
-			R("span", {
+		}, null, 8, Ui)) : L("", !0), p.value ? (G(), R(P, { key: 1 }, [
+			z("span", {
 				ref_key: "hiddenEl",
 				ref: c,
-				class: V(t.$style.hidden)
+				class: H(t.$style.hidden)
 			}, null, 2),
-			R("input", {
+			z("input", {
 				ref_key: "inputEl",
 				ref: s,
-				class: V(t.$style.input),
-				style: H({ width: l.value }),
+				class: H(t.$style.input),
+				style: U({ width: l.value }),
 				value: d.value,
 				placeholder: e.placeholder,
 				disabled: e.disabled,
@@ -4377,41 +4379,41 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 					Q(x, ["esc"])
 				]
 			}, null, 46, Wi),
-			we((W(), L("div", {
-				class: V([
+			we((G(), R("div", {
+				class: H([
 					t.$style.btn,
 					t.$style.doneBtn,
 					e.disabled && t.$style.btnDisabled
 				]),
 				onClick: $(b, ["stop", "prevent"])
-			}, [z(ee, {
+			}, [B(ee, {
 				icon: "round-done",
 				size: "12",
 				color: "var(--color-icon-table-accent-default)"
 			})], 2)), [[Y(r)]]),
-			we((W(), L("div", {
-				class: V([
+			we((G(), R("div", {
+				class: H([
 					t.$style.btn,
 					t.$style.cancelBtn,
 					e.disabled && t.$style.btnDisabled
 				]),
 				onClick: $(x, ["stop", "prevent"])
-			}, [z(ee, {
+			}, [B(ee, {
 				icon: "round-close",
 				size: "12",
 				color: "var(--color-icon-table-secondary-default)"
 			})], 2)), [[Y(r)]])
-		], 64)) : (W(), L("div", {
+		], 64)) : (G(), R("div", {
 			key: 2,
-			class: V([t.$style.content, !d.value && t.$style.contentEmpty]),
+			class: H([t.$style.content, !d.value && t.$style.contentEmpty]),
 			title: h.value ? d.value : void 0
-		}, [R("span", {
+		}, [z("span", {
 			ref_key: "contentValueEl",
 			ref: u
-		}, J(d.value || e.placeholder || "..."), 513), we((W(), L("div", {
-			class: V([t.$style.btn, t.$style.editBtn]),
+		}, J(d.value || e.placeholder || "..."), 513), we((G(), R("div", {
+			class: H([t.$style.btn, t.$style.editBtn]),
 			onClick: $(v, ["stop", "prevent"])
-		}, [z(ee, {
+		}, [B(ee, {
 			icon: "round-edit",
 			size: "12",
 			color: "var(--color-icon-control-accent-unselected)"
@@ -4431,7 +4433,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	cancelBtn: "_cancelBtn_s7l0a_128",
 	doneBtn: "_doneBtn_s7l0a_133",
 	btnDisabled: "_btnDisabled_s7l0a_139"
-} }]]), Ji = ["name", "value"], Yi = ["name", "value"], Xi = ["name", "value"], Zi = ["placeholder", "disabled"], Qi = ["id", "onClick"], $i = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), Ji = ["name", "value"], Yi = ["name", "value"], Xi = ["name", "value"], Zi = ["placeholder", "disabled"], Qi = ["id", "onClick"], $i = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-autocomplete",
 	props: {
 		name: {},
@@ -4455,7 +4457,10 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		itemTitle: { default: "name" },
 		itemValue: { default: "id" },
 		modelValue: {},
-		addNewValue: { type: Boolean },
+		addNewValue: {
+			type: Boolean,
+			default: !1
+		},
 		newValueValidator: {},
 		multiple: { type: Boolean },
 		noDataText: {},
@@ -4469,16 +4474,35 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		"valid:new-value"
 	],
 	setup(e, { expose: n, emit: r }) {
-		let a = Tn, o = e, s = r, c = `auto-${t(4)}`, l = G(""), u = G(!1), d = G(null), f = G(null), p = G(null), m = G(null), h = G(!1), g = G(!0), _ = P(() => o.returnObject ? o.modelValue.map((e) => e.id) : o.modelValue), v = P(() => o.chips ? "" : o.returnObject ? o.modelValue.map((e) => e[o.itemTitle] || "?").join(", ") : o.modelValue.join(", ")), y = P(() => o.customFilter ? o.items.filter((e) => o.customFilter(e, l.value)).filter((e) => o.hideSelected ? o.returnObject ? !_.value.includes(e.id) : !_.value.includes(e[o.itemValue]) : !0) : o.items.filter((e) => e[o.itemTitle].toLowerCase().includes(l.value.toLowerCase())).filter((e) => o.hideSelected ? o.returnObject ? !_.value.includes(e.id) : !_.value.includes(e[o.itemValue]) : !0));
-		function b() {
+		let a = Tn, o = e, s = r, c = `auto-${t(4)}`, l = K(""), u = K(!1), d = K(null), f = K(null), p = K(null), m = K(null), h = K(!1), g = K(!0), _ = K(!1), v = F(() => o.returnObject ? o.modelValue.map((e) => e.id) : o.modelValue), y = F(() => o.chips ? "" : o.returnObject ? o.modelValue.map((e) => e[o.itemTitle] || "?").join(", ") : o.modelValue.join(", ")), b = F(() => o.customFilter ? o.items.filter((e) => o.customFilter(e, l.value)).filter((e) => o.hideSelected ? o.returnObject ? !v.value.includes(e.id) : !v.value.includes(e[o.itemValue]) : !0) : o.items.filter((e) => e[o.itemTitle].toLowerCase().includes(l.value.toLowerCase())).filter((e) => o.hideSelected ? o.returnObject ? !v.value.includes(e.id) : !v.value.includes(e[o.itemValue]) : !0));
+		function x() {
 			h.value = !1, s("update:search", l.value);
 		}
-		function x() {
-			s("update:focused", !1), m.value = null, h.value = !1, setTimeout(() => {
-				u.value = !1, l.value = "";
+		function S() {
+			s("update:focused", !1), m.value = null, h.value = !1, _.value || C(), setTimeout(() => {
+				u.value = !1, l.value = "", _.value = !1;
 			}, 150);
 		}
-		function S(e) {
+		function C() {
+			if (!o.addNewValue || o.disabled) return !1;
+			let e = l.value.trim();
+			if (!e || (g.value = o.newValueValidator ? o.newValueValidator(e) : !0, s("valid:new-value", g.value), !g.value)) return !1;
+			let n = {
+				id: t(6),
+				[o.itemTitle]: e,
+				[o.itemValue]: e
+			};
+			if (!o.multiple) s("update:modelValue", o.returnObject ? [n] : [n[o.itemValue]]);
+			else if (!(o.returnObject ? o.modelValue.some((e) => e[o.itemValue] === n[o.itemValue] || e[o.itemTitle] === n[o.itemTitle]) : o.modelValue.some((e) => e === n[o.itemValue]))) {
+				let e = (0, Gr.default)(o.modelValue);
+				e.push(o.returnObject ? n : n[o.itemValue]), s("update:modelValue", e);
+			}
+			return g.value = !0, o.clearOnSelect && (l.value = ""), !0;
+		}
+		function w() {
+			_.value = !0;
+		}
+		function T(e) {
 			if (o.disabled) return;
 			if (!o.multiple) {
 				s("update:modelValue", o.returnObject ? [e] : [e[o.itemValue]]);
@@ -4487,47 +4511,44 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			let t = (0, Gr.default)(o.modelValue), n = o.returnObject ? o.modelValue.findIndex((t) => t.id === e.id) : o.modelValue.findIndex((t) => t === e[o.itemValue]);
 			n > -1 ? t.splice(n, 1) : t.push(o.returnObject ? e : e[o.itemValue]), s("update:modelValue", t), o.clearOnSelect && (l.value = "");
 		}
-		function C(e) {
+		function E(e) {
 			if (o.disabled) return;
 			let t = o.returnObject ? o.modelValue.findIndex((t) => t.id === e.id) : o.modelValue.findIndex((t) => t === e), n = (0, Gr.default)(o.modelValue);
 			n.splice(t, 1), s("update:modelValue", n);
 		}
-		function w() {
+		function D() {
 			if (m.value === null) {
 				m.value = 0, p.value && p.value.focus({ preventScroll: !0 });
 				return;
 			}
-			m.value >= 0 && m.value < (0, Tr.default)(y.value) - 1 && (m.value += 1);
+			m.value >= 0 && m.value < (0, Tr.default)(b.value) - 1 && (m.value += 1);
 		}
-		function T() {
+		function O() {
 			if (m.value === null) {
-				m.value = (0, Tr.default)(y.value) - 1, p.value && p.value.focus({ preventScroll: !0 });
+				m.value = (0, Tr.default)(b.value) - 1, p.value && p.value.focus({ preventScroll: !0 });
 				return;
 			}
-			m.value > 0 && m.value < (0, Tr.default)(y.value) && --m.value;
+			m.value > 0 && m.value < (0, Tr.default)(b.value) && --m.value;
 		}
-		function E() {
+		function k() {
 			s("update:focused", !1), u.value = !1, m.value = null, l.value = "", f.value && f.value.blur(), d.value && d.value.blur();
 		}
-		function D() {
-			if (m.value === null && !u.value) {
-				u.value = !0, m.value = 0, p.value && p.value.focus({ preventScroll: !0 });
+		function A() {
+			o.addNewValue && C(), s("update:focused", !1), u.value = !1, m.value = null, l.value = "";
+		}
+		function ee() {
+			if (m.value !== null) {
+				let e = b.value[m.value];
+				T(e), m.value = null, o.clearOnSelect && (l.value = "");
 				return;
 			}
-			if (m.value === null && u.value && l.value) {
-				g.value = o.newValueValidator ? o.newValueValidator(l.value) : !0, s("valid:new-value", g.value), g.value && S({
-					id: t(6),
-					[o.itemTitle]: l.value,
-					[o.itemValue]: l.value
-				}), o.clearOnSelect && (l.value = "");
+			if (o.addNewValue && l.value.trim()) {
+				C();
 				return;
 			}
-			if (m.value !== null) {
-				let e = y.value[m.value];
-				S(e), m.value = null, o.clearOnSelect && (l.value = "");
-			}
+			u.value || (u.value = !0, m.value = 0, p.value && p.value.focus({ preventScroll: !0 }));
 		}
-		function O() {
+		function j() {
 			if (o.disabled || l.value !== "" || (0, Wr.default)(o.modelValue)) return;
 			if (!h.value) {
 				h.value = !0;
@@ -4536,54 +4557,57 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			let e = (0, Gr.default)(o.modelValue);
 			e.pop(), s("update:modelValue", e), h.value = !1;
 		}
-		function k(e, t) {
+		function M(e, t) {
 			switch (t) {
 				case "down":
-					e.preventDefault(), e.stopPropagation(), w();
+					e.preventDefault(), e.stopPropagation(), D();
 					break;
 				case "up":
-					e.preventDefault(), e.stopPropagation(), T();
+					e.preventDefault(), e.stopPropagation(), O();
 					break;
 				case "esc":
+					k();
+					break;
 				case "tab":
-					E();
+					A();
 					break;
 				case "enter":
-					e.preventDefault(), e.stopPropagation(), D();
+					e.preventDefault(), e.stopPropagation(), ee();
 					break;
 				case "backspace":
-					O();
+					j();
 					break;
 			}
 		}
-		function A() {
-			l.value = "", u.value = !1, m.value = null, g.value = !0, s("update:modelValue", []), s("update:search", "");
+		function N() {
+			l.value = "", u.value = !1, m.value = null, g.value = !0, _.value = !1, s("update:modelValue", []), s("update:search", "");
 		}
-		return n({ clear: A }), X(() => o.name, (e) => {
-			e || A();
-		}), X(() => (0, Tr.default)(y.value), (e, t) => {
+		return n({ clear: N }), X(() => o.name, (e) => {
+			e || N();
+		}), X(() => (0, Tr.default)(b.value), (e, t) => {
 			e !== t && (m.value = null), e && !g.value && (g.value = !0);
-		}), (t, n) => (W(), L("div", { class: V(t.$style.ui3nAutocomplete) }, [e.name && !Y(Wr.default)(e.modelValue) ? (W(), L("fieldset", {
+		}), (t, n) => (G(), R("div", { class: H(t.$style.ui3nAutocomplete) }, [e.name && !Y(Wr.default)(e.modelValue) ? (G(), R("fieldset", {
 			key: 0,
-			class: V(t.$style.hiddenBlock)
-		}, [e.multiple ? (W(), L(N, { key: 1 }, [e.returnObject ? (W(!0), L(N, { key: 1 }, K(e.modelValue, (t, n) => (W(), L("input", {
+			class: H(t.$style.hiddenBlock)
+		}, [e.multiple ? (G(), R(P, { key: 1 }, [e.returnObject ? (G(!0), R(P, { key: 1 }, he(e.modelValue, (t, n) => (G(), R("input", {
 			key: t.id || `${e.name}-obj-${n}`,
 			type: "hidden",
 			name: `${e.name}[]`,
 			value: JSON.stringify(t)
-		}, null, 8, Xi))), 128)) : (W(!0), L(N, { key: 0 }, K(e.modelValue, (t, n) => (W(), L("input", {
+		}, null, 8, Xi))), 128)) : (G(!0), R(P, { key: 0 }, he(e.modelValue, (t, n) => (G(), R("input", {
 			key: `${e.name}-flat-${n}`,
 			type: "hidden",
 			name: `${e.name}[]`,
 			value: t
-		}, null, 8, Yi))), 128))], 64)) : (W(), L("input", {
+		}, null, 8, Yi))), 128))], 64)) : (G(), R("input", {
 			key: 0,
 			type: "hidden",
 			name: e.name,
 			value: e.returnObject ? JSON.stringify(e.modelValue) : e.modelValue
-		}, null, 8, Ji))], 2)) : I("", !0), z(si, {
+		}, null, 8, Ji))], 2)) : L("", !0), B(si, {
 			modelValue: u.value,
 			"onUpdate:modelValue": n[8] ||= (e) => u.value = e,
+			width: "100%",
 			"lock-scroll": e.lockScroll,
 			"offset-x": 2,
 			"offset-y": 4,
@@ -4597,77 +4621,78 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			],
 			disabled: e.disabled
 		}, {
-			menu: Z(() => [!Y(Wr.default)(y.value) || Y(Wr.default)(y.value) && e.noDataText ? (W(), L("div", {
+			menu: Z(() => [!Y(Wr.default)(b.value) || Y(Wr.default)(b.value) && e.noDataText ? (G(), R("div", {
 				key: 0,
 				ref_key: "menuBodyEl",
 				ref: p,
-				class: V(t.$style.body)
-			}, [Y(Tr.default)(y.value) ? (W(!0), L(N, { key: 0 }, K(y.value, (n, r) => (W(), L("div", {
+				class: H(t.$style.body)
+			}, [Y(Tr.default)(b.value) ? (G(!0), R(P, { key: 0 }, he(b.value, (n, r) => (G(), R("div", {
 				key: n.id,
 				id: `${c}-${r}`,
-				class: V([
+				class: H([
 					t.$style.item,
 					m.value === r && t.$style.itemSelected,
 					e.disabled && t.$style.itemDisabled
 				]),
-				onClick: $((e) => S(n), ["stop", "prevent"])
+				onMousedown: w,
+				onClick: $((e) => T(n), ["stop", "prevent"])
 			}, [q(t.$slots, "item", {
 				item: n,
 				index: r,
 				query: l.value
-			}, () => [we(R("div", { class: V(t.$style.simpleItem) }, null, 2), [[Y(a), Y(i)(n[o.itemTitle], l.value)]])])], 10, Qi))), 128)) : I("", !0), !Y(Tr.default)(y.value) && e.noDataText ? (W(), L("div", {
+			}, () => [we(z("div", { class: H(t.$style.simpleItem) }, null, 2), [[Y(a), Y(i)(n[o.itemTitle], l.value)]])])], 42, Qi))), 128)) : L("", !0), !Y(Tr.default)(b.value) && e.noDataText ? (G(), R("div", {
 				key: 1,
-				class: V(t.$style.noData)
-			}, [q(t.$slots, "noDataText", {}, () => [ce(J(e.noDataText), 1)])], 2)) : I("", !0)], 2)) : I("", !0)]),
-			default: Z(() => [R("div", {
+				class: H(t.$style.noData)
+			}, [q(t.$slots, "noDataText", {}, () => [se(J(e.noDataText), 1)])], 2)) : L("", !0)], 2)) : L("", !0)]),
+			default: Z(() => [z("div", {
 				ref_key: "activatorEl",
 				ref: d,
-				class: V(t.$style.trigger)
-			}, [e.chips ? (W(), F(se, {
+				class: H(t.$style.trigger)
+			}, [e.chips ? (G(), I(oe, {
 				key: 0,
 				name: "chipAnim",
 				tag: "div",
-				class: V(t.$style.chipsContainer)
+				class: H(t.$style.chipsContainer)
 			}, {
-				default: Z(() => [(W(!0), L(N, null, K(e.modelValue, (n, r) => (W(), L("div", {
+				default: Z(() => [(G(!0), R(P, null, he(e.modelValue, (n, r) => (G(), R("div", {
 					key: n.id || r,
-					class: V(t.$style.chipWrapper)
+					class: H(t.$style.chipWrapper)
 				}, [q(t.$slots, "chip", {
 					item: n,
 					index: r,
 					isHighlighted: r === Y(Tr.default)(e.modelValue) - 1 && h.value
-				}, () => [z($n, {
+				}, () => [B($n, {
 					height: "32",
 					color: r === Y(Tr.default)(e.modelValue) - 1 && h.value ? "var(--color-bg-control-primary-hover)" : void 0,
 					round: "",
 					closeable: "",
-					onClose: (e) => C(n)
+					onClose: (e) => E(n)
 				}, {
-					default: Z(() => [ce(J(e.returnObject ? n[o.itemTitle] : n), 1)]),
+					default: Z(() => [se(J(e.returnObject ? n[o.itemTitle] : n), 1)]),
 					_: 2
 				}, 1032, ["color", "onClose"])])], 2))), 128))]),
 				_: 3
-			}, 8, ["class"])) : (W(), L("div", {
+			}, 8, ["class"])) : (G(), R("div", {
 				key: 1,
-				class: V(t.$style.displayValue)
-			}, J(v.value), 3)), we(R("input", {
+				class: H(t.$style.displayValue)
+			}, J(y.value), 3)), we(z("input", {
 				ref_key: "inputEl",
 				ref: f,
 				"onUpdate:modelValue": n[0] ||= (e) => l.value = e,
 				type: "text",
-				class: V([t.$style.input, !g.value && t.$style.inputWithError]),
+				class: H([t.$style.input, !g.value && t.$style.inputWithError]),
 				placeholder: Y(Wr.default)(e.modelValue) && e.placeholder ? e.placeholder : "",
 				disabled: e.disabled,
-				onInput: b,
+				onInput: x,
 				onFocusin: n[1] ||= $((e) => s("update:focused", !0), ["prevent"]),
-				onFocusout: x,
+				onFocusout: S,
 				onKeydown: [
-					n[2] ||= Q((e) => k(e, "down"), ["down"]),
-					n[3] ||= Q((e) => k(e, "up"), ["up"]),
-					n[4] ||= Q((e) => k(e, "esc"), ["esc"]),
-					n[5] ||= Q((e) => k(e, "enter"), ["enter"]),
-					n[6] ||= Q((e) => k(e, "tab"), ["tab"]),
-					n[7] ||= Q((e) => k(e, "backspace"), ["delete"])
+					n[2] ||= Q((e) => M(e, "down"), ["down"]),
+					n[3] ||= Q((e) => M(e, "up"), ["up"]),
+					n[4] ||= Q((e) => M(e, "esc"), ["esc"]),
+					n[5] ||= Q((e) => M(e, "enter"), ["enter"]),
+					n[6] ||= Q((e) => M(e, "tab"), ["tab"]),
+					n[7] ||= Q((e) => M(e, "backspace"), ["delete"])
 				]
 			}, null, 42, Zi), [[Ce, l.value]])], 2)]),
 			_: 3
@@ -4692,7 +4717,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	noData: "_noData_2o0no_100",
 	chipsContainer: "_chipsContainer_2o0no_113",
 	chipWrapper: "_chipWrapper_2o0no_120"
-} }]]), ea = ["id"], ta = ["name", "value"], na = ["name", "value"], ra = ["name", "value"], ia = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), ea = ["id"], ta = ["name", "value"], na = ["name", "value"], ra = ["name", "value"], ia = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-slider",
 	props: {
 		id: {},
@@ -4715,32 +4740,32 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["update:modelValue"],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, o = Se("sliderEl"), s = Se("pointerEl1"), c = Se("pointerEl2"), l = G({
+		let r = e, i = n, o = Se("sliderEl"), s = Se("pointerEl1"), c = Se("pointerEl2"), l = K({
 			1: 0,
 			2: 0
-		}), u = G({
+		}), u = K({
 			1: r.labelVisible === "always",
 			2: r.labelVisible === "always"
-		}), d = G(0), f = G(null);
-		P(() => `${r.thumbSize}px`);
-		let p = P(() => Number(r.max) - Number(r.min)), m = P(() => r.step ? Number(r.step) : p.value / 100), h = P(() => {
+		}), d = K(0), f = K(null);
+		F(() => `${r.thumbSize}px`);
+		let p = F(() => Number(r.max) - Number(r.min)), m = F(() => r.step ? Number(r.step) : p.value / 100), h = F(() => {
 			let e = {};
 			if (r.range) {
 				let [t, n] = d.value;
 				return t <= Number(r.min) ? e.left = "0px" : t < Number(r.max) && (e.left = `${a((t - Number(r.min)) / p.value * 100, 0)}%`), n >= Number(r.max) ? e.width = t <= Number(r.min) ? "100%" : `${a((Number(r.max) - t) / p.value * 100, 0)}%` : n > Number(r.min) && (e.width = `${a((n - t) / p.value * 100, 0)}%`), e;
 			}
 			return d.value <= Number(r.min) ? (e.left = "0px", e.width = "0px") : d.value >= Number(r.max) ? (e.left = "0px", e.width = "100%") : (e.left = "0px", e.width = `${a((d.value - Number(r.min)) / p.value * 100, 0)}%`), e;
-		}), g = P(() => r.range ? `calc(${h.value.left} + 1px)` : `${h.value.width}`), _ = P(() => r.range ? `calc(${h.value.width} + ${h.value.left} - 1px)` : "200%"), v = P(() => {
+		}), g = F(() => r.range ? `calc(${h.value.left} + 1px)` : `${h.value.width}`), _ = F(() => r.range ? `calc(${h.value.width} + ${h.value.left} - 1px)` : "200%"), v = F(() => {
 			if (r.range) {
 				let e = d.value[0];
 				return r.transformValueMethod ? r.transformValueMethod(e) : `${e}`;
 			}
 			return r.transformValueMethod ? r.transformValueMethod(d.value) : `${d.value}`;
-		}), y = P(() => {
+		}), y = F(() => {
 			if (!r.range) return "";
 			let e = d.value[1];
 			return r.transformValueMethod ? r.transformValueMethod(e) : `${e}`;
-		}), b = P(() => ({
+		}), b = F(() => ({
 			"--ui3n-slider-height": `${Math.max(Number(r.trackHeight), Number(r.thumbSize))}px`,
 			"--ui3n-slider-label-color": r.labelColor,
 			"--ui3n-slider-label-text-color": r.labelTextColor,
@@ -4798,40 +4823,40 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			}
 			let t = Array.isArray(r.modelValue) ? r.modelValue[r.modelValue.length - 1] : r.modelValue;
 			t !== d.value && (d.value = t);
-		}, { immediate: !0 }), (t, n) => (W(), L("div", {
+		}, { immediate: !0 }), (t, n) => (G(), R("div", {
 			ref: "sliderEl",
 			id: e.id,
-			style: H(b.value),
-			class: V([t.$style.ui3nSlider, e.disabled && t.$style.disabled]),
+			style: U(b.value),
+			class: H([t.$style.ui3nSlider, e.disabled && t.$style.disabled]),
 			onClick: $(E, ["stop", "prevent"])
 		}, [
-			e.name ? (W(), L(N, { key: 0 }, [e.range ? (W(), L(N, { key: 0 }, [R("input", {
+			e.name ? (G(), R(P, { key: 0 }, [e.range ? (G(), R(P, { key: 0 }, [z("input", {
 				type: "hidden",
 				name: `${e.name}_min`,
 				value: d.value[0]
-			}, null, 8, ta), R("input", {
+			}, null, 8, ta), z("input", {
 				type: "hidden",
 				name: `${e.name}_max`,
 				value: d.value[1]
-			}, null, 8, na)], 64)) : (W(), L("input", {
+			}, null, 8, na)], 64)) : (G(), R("input", {
 				key: 1,
 				type: "hidden",
 				name: e.name,
 				value: d.value
-			}, null, 8, ra))], 64)) : I("", !0),
-			R("div", { class: V(t.$style.track) }, [R("div", {
-				class: V(t.$style.active),
-				style: H(h.value)
+			}, null, 8, ra))], 64)) : L("", !0),
+			z("div", { class: H(t.$style.track) }, [z("div", {
+				class: H(t.$style.active),
+				style: U(h.value)
 			}, null, 6)], 2),
-			R("div", {
+			z("div", {
 				ref: "pointerEl1",
-				class: V([t.$style.pointerWrapper, t.$style.pointer1]),
+				class: H([t.$style.pointerWrapper, t.$style.pointer1]),
 				onPointerdown: n[0] ||= (e) => w(e, 1),
 				onClick: n[1] ||= $(() => {}, ["stop", "prevent"]),
 				onDragstart: C,
 				onMouseenter: n[2] ||= (e) => x(1),
 				onMouseleave: n[3] ||= (e) => S(1)
-			}, [z(Fi, {
+			}, [B(Fi, {
 				"model-value": u.value[1],
 				content: v.value,
 				trigger: "manual",
@@ -4841,7 +4866,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				"text-color": e.labelTextColor,
 				disabled: e.labelVisible === "never"
 			}, {
-				default: Z(() => [R("div", { class: V([t.$style.pointer, f.value === 1 && t.$style.selected]) }, null, 2)]),
+				default: Z(() => [z("div", { class: H([t.$style.pointer, f.value === 1 && t.$style.selected]) }, null, 2)]),
 				_: 1
 			}, 8, [
 				"model-value",
@@ -4850,16 +4875,16 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				"text-color",
 				"disabled"
 			])], 34),
-			e.range ? (W(), L("div", {
+			e.range ? (G(), R("div", {
 				key: 1,
 				ref: "pointerEl2",
-				class: V([t.$style.pointerWrapper, t.$style.pointer2]),
+				class: H([t.$style.pointerWrapper, t.$style.pointer2]),
 				onPointerdown: n[4] ||= (e) => w(e, 2),
 				onClick: n[5] ||= $(() => {}, ["stop", "prevent"]),
 				onDragstart: C,
 				onMouseenter: n[6] ||= (e) => x(2),
 				onMouseleave: n[7] ||= (e) => S(2)
-			}, [z(Fi, {
+			}, [B(Fi, {
 				"model-value": u.value[2],
 				content: y.value,
 				trigger: "manual",
@@ -4869,7 +4894,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				"text-color": e.labelTextColor,
 				disabled: e.labelVisible === "never"
 			}, {
-				default: Z(() => [R("div", { class: V([t.$style.pointer, f.value === 2 && t.$style.selected]) }, null, 2)]),
+				default: Z(() => [z("div", { class: H([t.$style.pointer, f.value === 2 && t.$style.selected]) }, null, 2)]),
 				_: 1
 			}, 8, [
 				"model-value",
@@ -4877,7 +4902,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				"color",
 				"text-color",
 				"disabled"
-			])], 34)) : I("", !0)
+			])], 34)) : L("", !0)
 		], 14, ea));
 	}
 }), [["__cssModules", { $style: {
@@ -4890,7 +4915,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	selected: "_selected_17be6_55",
 	pointer1: "_pointer1_17be6_69",
 	pointer2: "_pointer2_17be6_73"
-} }]]), aa = ["id"], oa = ["name", "value"], sa = ["tabindex"], ca = ["id", "onClick"], la = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), aa = ["id"], oa = ["name", "value"], sa = ["tabindex"], ca = ["id", "onClick"], la = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-selector",
 	props: {
 		id: {},
@@ -4914,7 +4939,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		disabled: { type: Boolean }
 	},
 	setup(e, { expose: n, emit: r }) {
-		let i = e, a = r, o = `select-${t(4)}`, s = Se("activator"), c = Se("body"), l = G(!1), u = G(!1), d = G(null), f = P(() => i.items.filter((e) => i.hideSelected ? i.returnObject ? i.modelValue.id !== e.id : i.modelValue !== e[i.itemValue] : !0)), p = P(() => {
+		let i = e, a = r, o = `select-${t(4)}`, s = Se("activator"), c = Se("body"), l = K(!1), u = K(!1), d = K(null), f = F(() => i.items.filter((e) => i.hideSelected ? i.returnObject ? i.modelValue.id !== e.id : i.modelValue !== e[i.itemValue] : !0)), p = F(() => {
 			if (!i.modelValue) return "";
 			if (i.returnObject && typeof i.modelValue == "object") {
 				let e = i.items.find((e) => e.id === i.modelValue.id);
@@ -5009,23 +5034,24 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				}
 				a("list:open");
 			} else e !== t && !e && (d.value = null, a("list:close"));
-		}), (t, n) => (W(), L("div", {
+		}), (t, n) => (G(), R("div", {
 			id: e.id,
-			class: V(t.$style.ui3nSelector)
+			class: H(t.$style.ui3nSelector)
 		}, [
-			e.name && e.modelValue ? (W(), L("input", {
+			e.name && e.modelValue ? (G(), R("input", {
 				key: 0,
 				type: "hidden",
 				name: e.name,
 				value: typeof e.modelValue == "object" ? JSON.stringify(e.modelValue) : String(e.modelValue)
-			}, null, 8, oa)) : I("", !0),
-			e.label ? (W(), L("label", {
+			}, null, 8, oa)) : L("", !0),
+			e.label ? (G(), R("label", {
 				key: 1,
-				class: V(t.$style.label)
-			}, J(e.label), 3)) : I("", !0),
-			z(si, {
+				class: H(t.$style.label)
+			}, J(e.label), 3)) : L("", !0),
+			B(si, {
 				modelValue: l.value,
 				"onUpdate:modelValue": n[6] ||= (e) => l.value = e,
+				width: "100%",
 				"offset-x": -3,
 				"offset-y": 4,
 				"position-autoupdate": "",
@@ -5034,20 +5060,20 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 					width: "100%",
 					minWidth: "var(--ui3n-selector-width, 200px)"
 				},
-				class: V(t.$style.menu),
+				class: H(t.$style.menu),
 				disabled: e.disabled,
 				onClick: n[7] ||= () => {
 					e.disabled || (l.value = !l.value);
 				}
 			}, {
-				menu: Z(() => [!Y(Wr.default)(f.value) || Y(Wr.default)(f.value) && e.noDataText ? (W(), L("div", {
+				menu: Z(() => [!Y(Wr.default)(f.value) || Y(Wr.default)(f.value) && e.noDataText ? (G(), R("div", {
 					key: 0,
 					ref: "body",
-					class: V(t.$style.body)
-				}, [Y(Wr.default)(f.value) ? I("", !0) : (W(!0), L(N, { key: 0 }, K(f.value, (n, r) => (W(), L("div", {
+					class: H(t.$style.body)
+				}, [Y(Wr.default)(f.value) ? L("", !0) : (G(!0), R(P, { key: 0 }, he(f.value, (n, r) => (G(), R("div", {
 					key: n.id,
 					id: `${o}-${r}`,
-					class: V([
+					class: H([
 						t.$style.item,
 						d.value === r && t.$style.itemSelected,
 						e.disabled && t.$style.itemDisabled
@@ -5057,14 +5083,14 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 					item: n,
 					index: r,
 					activeIndex: d.value
-				}, () => [ce(J(m(n)), 1)])], 10, ca))), 128)), Y(Wr.default)(f.value) && e.noDataText ? (W(), L("div", {
+				}, () => [se(J(m(n)), 1)])], 10, ca))), 128)), Y(Wr.default)(f.value) && e.noDataText ? (G(), R("div", {
 					key: 1,
-					class: V(t.$style.noData)
-				}, [q(t.$slots, "noDataText", {}, () => [ce(J(e.noDataText), 1)])], 2)) : I("", !0)], 2)) : I("", !0)]),
-				default: Z(() => [R("div", {
+					class: H(t.$style.noData)
+				}, [q(t.$slots, "noDataText", {}, () => [se(J(e.noDataText), 1)])], 2)) : L("", !0)], 2)) : L("", !0)]),
+				default: Z(() => [z("div", {
 					ref: "activator",
 					tabindex: e.disabled ? -1 : 0,
-					class: V([
+					class: H([
 						t.$style.trigger,
 						u.value && t.$style.triggerFocused,
 						e.clearable && e.modelValue && t.$style.clearable,
@@ -5084,8 +5110,8 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 					q(t.$slots, "selection", {
 						value: e.modelValue,
 						selectedItem: d.value === null ? void 0 : f.value[d.value]
-					}, () => [ce(J(p.value || e.placeholder || ""), 1)]),
-					e.clearable && e.modelValue ? (W(), F(A, {
+					}, () => [se(J(p.value || e.placeholder || ""), 1)]),
+					e.clearable && e.modelValue ? (G(), I(A, {
 						key: 0,
 						type: "icon",
 						size: "small",
@@ -5094,16 +5120,16 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 						"icon-size": "16",
 						"icon-color": "var(--color-icon-block-primary-default)",
 						disabled: e.disabled,
-						class: V(t.$style.clearBtn),
+						class: H(t.$style.clearBtn),
 						onClick: $(v, ["stop", "prevent"]),
 						onMousedown: n[0] ||= $(() => {}, ["stop", "prevent"])
-					}, null, 8, ["disabled", "class"])) : I("", !0),
-					z(ee, {
+					}, null, 8, ["disabled", "class"])) : L("", !0),
+					B(ee, {
 						icon: "outline-arrow-drop-down",
 						color: "var(--color-icon-block-primary-default)",
 						size: "16",
 						"vertical-flip": l.value,
-						class: V(t.$style.menuIcon)
+						class: H(t.$style.menuIcon)
 					}, null, 8, ["vertical-flip", "class"])
 				], 42, sa)]),
 				_: 3
@@ -5115,22 +5141,22 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		], 10, aa));
 	}
 }), [["__cssModules", { $style: {
-	ui3nSelector: "_ui3nSelector_1fmel_3",
-	label: "_label_1fmel_18",
-	menu: "_menu_1fmel_28",
-	trigger: "_trigger_1fmel_38",
-	placeholder: "_placeholder_1fmel_58",
-	triggerDisabled: "_triggerDisabled_1fmel_62",
-	menuIcon: "_menuIcon_1fmel_68",
-	clearable: "_clearable_1fmel_73",
-	clearBtn: "_clearBtn_1fmel_76",
-	triggerFocused: "_triggerFocused_1fmel_81",
-	body: "_body_1fmel_86",
-	noData: "_noData_1fmel_95",
-	item: "_item_1fmel_107",
-	itemSelected: "_itemSelected_1fmel_121",
-	itemDisabled: "_itemDisabled_1fmel_125"
-} }]]), ua = /* @__PURE__ */ k(/* @__PURE__ */ B({
+	ui3nSelector: "_ui3nSelector_1mwql_3",
+	label: "_label_1mwql_18",
+	menu: "_menu_1mwql_28",
+	trigger: "_trigger_1mwql_36",
+	placeholder: "_placeholder_1mwql_56",
+	triggerDisabled: "_triggerDisabled_1mwql_60",
+	menuIcon: "_menuIcon_1mwql_66",
+	clearable: "_clearable_1mwql_71",
+	clearBtn: "_clearBtn_1mwql_74",
+	triggerFocused: "_triggerFocused_1mwql_79",
+	body: "_body_1mwql_84",
+	noData: "_noData_1mwql_93",
+	item: "_item_1mwql_105",
+	itemSelected: "_itemSelected_1mwql_119",
+	itemDisabled: "_itemDisabled_1mwql_123"
+} }]]), ua = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-mobile-menu",
 	props: {
 		modelValue: { type: Boolean },
@@ -5139,45 +5165,45 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = P(() => ({
+		let n = e, r = t, i = F(() => ({
 			"--ui3n-menu-width-custom": isNaN(Number(n.width)) ? n.width || "240px" : `${n.width}px`,
 			"--ui3n-menu-blur-custom": n.withBlur ? "2px" : "0"
 		}));
 		function a() {
 			r("update:modelValue", !n.modelValue);
 		}
-		return (t, n) => (W(), L("div", {
-			class: V(t.$style.ui3nMobileMenu),
-			style: H(i.value)
-		}, [e.modelValue ? I("", !0) : (W(), F(A, {
+		return (t, n) => (G(), R("div", {
+			class: H(t.$style.ui3nMobileMenu),
+			style: U(i.value)
+		}, [e.modelValue ? L("", !0) : (G(), I(A, {
 			key: 0,
 			type: "icon",
-			class: V(t.$style.menuButton),
+			class: H(t.$style.menuButton),
 			color: "var(--color-bg-block-primary-default)",
 			icon: "round-menu",
 			"icon-color": "var(--color-icon-block-primary-default)",
 			"icon-size": "32",
 			onClick: $(a, ["stop", "prevent"])
-		}, null, 8, ["class"])), z(oe, { name: "slide-fade" }, {
-			default: Z(() => [e.modelValue ? (W(), L("div", {
+		}, null, 8, ["class"])), B(ae, { name: "slide-fade" }, {
+			default: Z(() => [e.modelValue ? (G(), R("div", {
 				key: 0,
-				class: V(t.$style.menuWrapper)
-			}, [R("div", {
-				class: V(t.$style.overlay),
+				class: H(t.$style.menuWrapper)
+			}, [z("div", {
+				class: H(t.$style.overlay),
 				onClick: a
-			}, null, 2), R("div", { class: V(t.$style.menuPanel) }, [R("div", { class: V(t.$style.appMenu) }, [
-				R("div", { class: V(t.$style.appMenuHeader) }, [q(t.$slots, "header")], 2),
-				R("div", { class: V(t.$style.appMenuBody) }, [q(t.$slots, "menuBody")], 2),
-				R("div", { class: V(t.$style.appMenuFooter) }, [q(t.$slots, "footer")], 2)
-			], 2), z(A, {
+			}, null, 2), z("div", { class: H(t.$style.menuPanel) }, [z("div", { class: H(t.$style.appMenu) }, [
+				z("div", { class: H(t.$style.appMenuHeader) }, [q(t.$slots, "header")], 2),
+				z("div", { class: H(t.$style.appMenuBody) }, [q(t.$slots, "menuBody")], 2),
+				z("div", { class: H(t.$style.appMenuFooter) }, [q(t.$slots, "footer")], 2)
+			], 2), B(A, {
 				type: "icon",
 				icon: "round-close",
 				color: "transparent",
 				"icon-color": "var(--color-icon-block-secondary-default)",
 				"icon-size": "32",
-				class: V(t.$style.closeBtn),
+				class: H(t.$style.closeBtn),
 				onClick: $(a, ["stop", "prevent"])
-			}, null, 8, ["class"])], 2)], 2)) : I("", !0)]),
+			}, null, 8, ["class"])], 2)], 2)) : L("", !0)]),
 			_: 3
 		})], 6));
 	}
@@ -5192,7 +5218,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	menuButton: "_menuButton_1991k_65",
 	closeBtn: "_closeBtn_1991k_70",
 	overlay: "_overlay_1991k_78"
-} }]]), da = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), da = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-mobile-menu-item",
 	props: {
 		item: {},
@@ -5204,22 +5230,22 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		async function i() {
 			r("selectItem", n.item);
 		}
-		return (t, n) => (W(), L("div", {
-			class: V([t.$style.menuItem, e.isActive && t.$style.menuItemSelected]),
+		return (t, n) => (G(), R("div", {
+			class: H([t.$style.menuItem, e.isActive && t.$style.menuItemSelected]),
 			onClick: i
-		}, [e.item.icon ? (W(), F(ee, {
+		}, [e.item.icon ? (G(), I(ee, {
 			key: 0,
 			icon: e.item.icon,
 			size: "20",
 			color: "var(--color-icon-control-secondary-default)"
-		}, null, 8, ["icon"])) : I("", !0), R("span", { class: V(t.$style.menuItemName) }, J(e.item.name), 3)], 2));
+		}, null, 8, ["icon"])) : L("", !0), z("span", { class: H(t.$style.menuItemName) }, J(e.item.name), 3)], 2));
 	}
 }), [["__cssModules", { $style: {
 	menuItem: "_menuItem_5dv4z_4",
 	menuItemName: "_menuItemName_5dv4z_15",
 	menuItemSelected: "_menuItemSelected_5dv4z_21",
 	bounceOnce: "_bounceOnce_5dv4z_1"
-} }]]), fa = 32, pa = /* @__PURE__ */ k(/* @__PURE__ */ B({
+} }]]), fa = 32, pa = /* @__PURE__ */ k(/* @__PURE__ */ V({
 	__name: "ui3n-scrollbar-horizontal",
 	props: {
 		thumbMinWidth: { default: fa },
@@ -5234,10 +5260,10 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	},
 	emits: ["scroll"],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = G(null), o = G(null), s = G(null), c = G(0), l = G(0), u = G(0), d = G(!1), f = G(!1), p = G(!1), m = null, h, g = 0, _ = 0, v = P(() => c.value > l.value), y = P(() => d.value ? !0 : v.value && (f.value || p.value)), b = P(() => {
+		let r = e, i = n, a = K(null), o = K(null), s = K(null), c = K(0), l = K(0), u = K(0), d = K(!1), f = K(!1), p = K(!1), m = null, h, g = 0, _ = 0, v = F(() => c.value > l.value), y = F(() => d.value ? !0 : v.value && (f.value || p.value)), b = F(() => {
 			let e = Number(r.thumbMinWidth);
 			return isNaN(e) ? fa : e;
-		}), x = P(() => {
+		}), x = F(() => {
 			if (!c.value) return 0;
 			if (r.thumbWidth !== "auto") {
 				let e = Number(r.thumbWidth);
@@ -5245,20 +5271,20 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			}
 			let e = l.value / c.value, t = l.value * e;
 			return Math.max(b.value, t);
-		}), S = P(() => {
+		}), S = F(() => {
 			if (!c.value || c.value === l.value) return 0;
 			let e = c.value - l.value, t = l.value - x.value;
 			return u.value / e * t;
-		}), C = P(() => {
+		}), C = F(() => {
 			let e = Number(r.thumbRadius);
 			return isNaN(e) ? String(r.thumbRadius) : `${e}px`;
-		}), w = P(() => r.thumbColor), T = P(() => r.thumbHoverColor), E = P(() => r.thumbActiveColor), D = P(() => {
+		}), w = F(() => r.thumbColor), T = F(() => r.thumbHoverColor), E = F(() => r.thumbActiveColor), D = F(() => {
 			let e = Number(r.trackHeight);
 			return isNaN(e) ? String(r.trackHeight) : `${e}px`;
-		}), O = P(() => {
+		}), O = F(() => {
 			let e = Number(r.trackRadius);
 			return isNaN(e) ? String(r.trackRadius) : `${e}px`;
-		}), k = P(() => r.trackColor);
+		}), k = F(() => r.trackColor);
 		function A() {
 			a.value && (c.value = a.value.scrollWidth, l.value = a.value.clientWidth, u.value = a.value.scrollLeft);
 		}
@@ -5275,34 +5301,34 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 				behavior: "smooth"
 			});
 		}
-		function te(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", ne), s.value.addEventListener("pointerup", M), s.value.addEventListener("pointercancel", M));
+		function M(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", N), s.value.addEventListener("pointerup", te), s.value.addEventListener("pointercancel", te));
 		}
-		function ne(e) {
+		function N(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;
 		}
-		function M(e) {
+		function te(e) {
 			if (d.value && (d.value = !1, document.body.style.userSelect = "", s.value)) {
 				try {
 					s.value.releasePointerCapture(e.pointerId);
 				} catch {}
-				s.value.removeEventListener("pointermove", ne), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M);
+				s.value.removeEventListener("pointermove", N), s.value.removeEventListener("pointerup", te), s.value.removeEventListener("pointercancel", te);
 			}
 		}
-		return U(() => {
+		return W(() => {
 			A(), a.value && (m = new ResizeObserver(A), m.observe(a.value), a.value.firstElementChild && m.observe(a.value.firstElementChild));
-		}), pe(() => {
-			m?.disconnect(), h && clearTimeout(h), s.value && (s.value.removeEventListener("pointermove", ne), s.value.removeEventListener("pointerup", M), s.value.removeEventListener("pointercancel", M)), document.body.style.userSelect = "";
+		}), fe(() => {
+			m?.disconnect(), h && clearTimeout(h), s.value && (s.value.removeEventListener("pointermove", N), s.value.removeEventListener("pointerup", te), s.value.removeEventListener("pointercancel", te)), document.body.style.userSelect = "";
 		}), t({
 			scrollTo: (e) => {
 				a.value?.scrollTo(e);
 			},
 			getContainer: () => a.value
-		}), (e, t) => (W(), L("div", {
-			class: V(e.$style.ui3nScrollbarHorizontal),
-			style: H({
+		}), (e, t) => (G(), R("div", {
+			class: H(e.$style.ui3nScrollbarHorizontal),
+			style: U({
 				"--ui3n-scrollbar-horizontal-thumb-radius": C.value,
 				"--ui3n-scrollbar-horizontal-thumb-color": w.value,
 				"--ui3n-scrollbar-horizontal-thumb-hover-color": T.value,
@@ -5313,25 +5339,25 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			}),
 			onMouseenter: t[0] ||= (e) => f.value = !0,
 			onMouseleave: t[1] ||= (e) => f.value = !1
-		}, [R("div", {
+		}, [z("div", {
 			ref_key: "containerRef",
 			ref: a,
-			class: V(e.$style.scrollbarContainer),
+			class: H(e.$style.scrollbarContainer),
 			onScroll: ee
-		}, [q(e.$slots, "default")], 34), R("div", {
+		}, [q(e.$slots, "default")], 34), z("div", {
 			ref_key: "trackRef",
 			ref: o,
-			class: V([e.$style.track, { [e.$style.trackVisible]: y.value }]),
+			class: H([e.$style.track, { [e.$style.trackVisible]: y.value }]),
 			onMousedown: j
-		}, [R("div", {
+		}, [z("div", {
 			ref_key: "thumbRef",
 			ref: s,
-			class: V([e.$style.thumb, { [e.$style.active]: d.value }]),
-			style: H({
+			class: H([e.$style.thumb, { [e.$style.active]: d.value }]),
+			style: U({
 				width: `${x.value}px`,
 				transform: `translateX(${S.value}px)`
 			}),
-			onPointerdown: te
+			onPointerdown: M
 		}, null, 38)], 34)], 38));
 	}
 }), [["__cssModules", { $style: {