vx-vue 1.3.5 → 1.3.7

package/dist/vxvue.es.js

@@ -1,10 +1,10 @@
-import { useSlots as Me, ref as $, computed as z, onBeforeUpdate as Ve, createElementBlock as m, openBlock as c, Fragment as O, renderList as j, createBlock as Z, resolveDynamicComponent as ce, createElementVNode as v, useAttrs as K, normalizeClass as C, unref as A, renderSlot as L, toValue as F, watch as X, getCurrentScope as De, onScopeDispose as Ae, onUpdated as Le, createCommentVNode as I, mergeProps as R, withKeys as se, withModifiers as _, toDisplayString as B, Transition as Te, withCtx as te, createVNode as Y, createTextVNode as J, nextTick as fe, withDirectives as ue, vShow as me, vModelText as Pe, onMounted as he, normalizeStyle as we, resolveComponent as Be, createSlots as ze, toHandlers as ie } from "vue";
+import { useSlots as Me, ref as $, computed as B, onBeforeUpdate as Ve, createElementBlock as m, openBlock as c, Fragment as O, renderList as j, createBlock as Z, resolveDynamicComponent as de, createElementVNode as v, useAttrs as K, normalizeClass as C, unref as A, renderSlot as L, toValue as E, watch as X, getCurrentScope as De, onScopeDispose as Ae, onUpdated as Le, createCommentVNode as I, mergeProps as R, withKeys as se, withModifiers as _, toDisplayString as P, Transition as Te, withCtx as te, createVNode as Y, createTextVNode as J, nextTick as fe, withDirectives as re, vShow as me, vModelText as ze, onMounted as he, normalizeStyle as we, resolveComponent as Pe, createSlots as Be, toHandlers as ue } from "vue";
 const wl = {
   __name: "Accordion",
   props: { activeIndex: { type: [Number, Array], default: null } },
   emits: ["update:activeIndex"],
   setup(e, { emit: u }) {
-    const t = e, n = u, a = Me(), l = $([]), i = (f) => l.value.push(f), s = z(
+    const t = e, n = u, a = Me(), l = $([]), i = (f) => l.value.push(f), s = B(
       () => a.default().reduce((f, x) => ((x.type.__name || x.type.name) === "AccordionPanel" && f.push(x), f), [])
     ), o = (f) => {
       if (Array.isArray(t.activeIndex)) {
@@ -27,7 +27,7 @@ const wl = {
     };
     return Ve(() => l.value = []), (f, x) => (c(!0), m(O, null, j(s.value, (y, b) => {
       var T;
-      return c(), Z(ce(y), {
+      return c(), Z(de(y), {
         key: b,
         ref_for: !0,
         ref: i,
@@ -69,7 +69,7 @@ function Ne(e, u) {
     })
   ]);
 }
-function de(e, u) {
+function ie(e, u) {
   return c(), m("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -84,7 +84,7 @@ function de(e, u) {
     })
   ]);
 }
-function re(e, u) {
+function oe(e, u) {
   return c(), m("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -114,7 +114,7 @@ function Oe(e, u) {
     })
   ]);
 }
-function Fe(e, u) {
+function Ee(e, u) {
   return c(), m("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -129,7 +129,7 @@ function Fe(e, u) {
     })
   ]);
 }
-function Ee(e, u) {
+function Fe(e, u) {
   return c(), m("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -206,7 +206,7 @@ const je = ["id", "disabled", "aria-expanded", "aria-controls"], Ye = ["id", "ar
         e.disabled ? (c(), Z(A(pe), {
           key: 0,
           class: "size-5"
-        })) : (c(), Z(A(re), {
+        })) : (c(), Z(A(oe), {
           key: 1,
           class: C(["size-5 transform-gpu transition-transform duration-300", { "rotate-90": e.show }])
         }, null, 8, ["class"])),
@@ -229,7 +229,7 @@ const je = ["id", "disabled", "aria-expanded", "aria-controls"], Ye = ["id", "ar
   __name: "Spinner",
   props: { radius: { type: Number, default: 10 }, strokeWidth: { type: Number, default: 4 } },
   setup(e) {
-    const u = e, t = z(() => u.radius + u.strokeWidth / 2), n = z(() => u.radius * 2 + u.strokeWidth), a = z(() => u.radius * Math.PI / 1.5);
+    const u = e, t = B(() => u.radius + u.strokeWidth / 2), n = B(() => u.radius * 2 + u.strokeWidth), a = B(() => u.radius * Math.PI / 1.5);
     return (l, i) => (c(), m("svg", {
       class: "animate-spin",
       xmlns: "http://www.w3.org/2000/svg",
@@ -268,7 +268,7 @@ function Ge() {
   var e, u;
   return $e && ((e = window == null ? void 0 : window.navigator) == null ? void 0 : e.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((u = window == null ? void 0 : window.navigator) == null ? void 0 : u.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window == null ? void 0 : window.navigator.userAgent));
 }
-function ve(e) {
+function ce(e) {
   return Array.isArray(e) ? e : [e];
 }
 const Je = /[YMDHhms]o|\[([^\]]+)\]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|z{1,4}|SSS/g;
@@ -292,8 +292,8 @@ function xe(e, u, t = {}) {
     M: () => l + 1,
     Mo: () => ee(l + 1),
     MM: () => `${l + 1}`.padStart(2, "0"),
-    MMM: () => e.toLocaleDateString(F(t.locales), { month: "short" }),
-    MMMM: () => e.toLocaleDateString(F(t.locales), { month: "long" }),
+    MMM: () => e.toLocaleDateString(E(t.locales), { month: "short" }),
+    MMMM: () => e.toLocaleDateString(E(t.locales), { month: "long" }),
     D: () => String(i),
     Do: () => ee(i),
     DD: () => `${i}`.padStart(2, "0"),
@@ -311,17 +311,17 @@ function xe(e, u, t = {}) {
     ss: () => `${r}`.padStart(2, "0"),
     SSS: () => `${d}`.padStart(3, "0"),
     d: () => f,
-    dd: () => e.toLocaleDateString(F(t.locales), { weekday: "narrow" }),
-    ddd: () => e.toLocaleDateString(F(t.locales), { weekday: "short" }),
-    dddd: () => e.toLocaleDateString(F(t.locales), { weekday: "long" }),
+    dd: () => e.toLocaleDateString(E(t.locales), { weekday: "narrow" }),
+    ddd: () => e.toLocaleDateString(E(t.locales), { weekday: "short" }),
+    dddd: () => e.toLocaleDateString(E(t.locales), { weekday: "long" }),
     A: () => x(s, o),
     AA: () => x(s, o, !1, !0),
     a: () => x(s, o, !0),
     aa: () => x(s, o, !0, !0),
-    z: () => y(e.toLocaleDateString(F(t.locales), { timeZoneName: "shortOffset" })),
-    zz: () => y(e.toLocaleDateString(F(t.locales), { timeZoneName: "shortOffset" })),
-    zzz: () => y(e.toLocaleDateString(F(t.locales), { timeZoneName: "shortOffset" })),
-    zzzz: () => y(e.toLocaleDateString(F(t.locales), { timeZoneName: "longOffset" }))
+    z: () => y(e.toLocaleDateString(E(t.locales), { timeZoneName: "shortOffset" })),
+    zz: () => y(e.toLocaleDateString(E(t.locales), { timeZoneName: "shortOffset" })),
+    zzz: () => y(e.toLocaleDateString(E(t.locales), { timeZoneName: "shortOffset" })),
+    zzzz: () => y(e.toLocaleDateString(E(t.locales), { timeZoneName: "longOffset" }))
   };
   return u.replace(Je, (T, p) => {
     var k, D;
@@ -339,26 +339,26 @@ function et(e, u, t) {
   );
 }
 const Se = $e ? window : void 0;
-function oe(e) {
+function ne(e) {
   var u;
-  const t = F(e);
+  const t = E(e);
   return (u = t == null ? void 0 : t.$el) != null ? u : t;
 }
-function ne(...e) {
+function ve(...e) {
   const u = [], t = () => {
     u.forEach((s) => s()), u.length = 0;
-  }, n = (s, o, r, d) => (s.addEventListener(o, r, d), () => s.removeEventListener(o, r, d)), a = z(() => {
-    const s = ve(F(e[0])).filter((o) => o != null);
+  }, n = (s, o, r, d) => (s.addEventListener(o, r, d), () => s.removeEventListener(o, r, d)), a = B(() => {
+    const s = ce(E(e[0])).filter((o) => o != null);
     return s.every((o) => typeof o != "string") ? s : void 0;
   }), l = et(
     () => {
       var s, o;
       return [
-        (o = (s = a.value) == null ? void 0 : s.map((r) => oe(r))) != null ? o : [Se].filter((r) => r != null),
-        ve(F(a.value ? e[1] : e[0])),
-        ve(A(a.value ? e[2] : e[1])),
+        (o = (s = a.value) == null ? void 0 : s.map((r) => ne(r))) != null ? o : [Se].filter((r) => r != null),
+        ce(E(a.value ? e[1] : e[0])),
+        ce(A(a.value ? e[2] : e[1])),
         // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
-        F(a.value ? e[3] : e[2])
+        E(a.value ? e[3] : e[2])
       ];
     },
     ([s, o, r, d]) => {
@@ -387,27 +387,27 @@ function ge(e, u, t = {}) {
   if (Xe && !ye) {
     ye = !0;
     const p = { passive: !0 };
-    Array.from(n.document.body.children).forEach((k) => ne(k, "click", le, p)), ne(n.document.documentElement, "click", le, p);
+    Array.from(n.document.body.children).forEach((k) => k.addEventListener("click", le, p)), n.document.documentElement.addEventListener("click", le, p);
   }
   let o = !0;
-  const r = (p) => F(a).some((k) => {
+  const r = (p) => E(a).some((k) => {
     if (typeof k == "string")
       return Array.from(n.document.querySelectorAll(k)).some((D) => D === p.target || p.composedPath().includes(D));
     {
-      const D = oe(k);
+      const D = ne(k);
       return D && (p.target === D || p.composedPath().includes(D));
     }
   });
   function d(p) {
-    const k = F(p);
+    const k = E(p);
     return k && k.$.subTree.shapeFlag === 16;
   }
   function f(p, k) {
-    const D = F(p), W = D.$.subTree && D.$.subTree.children;
+    const D = E(p), W = D.$.subTree && D.$.subTree.children;
     return W == null || !Array.isArray(W) ? !1 : W.some((H) => H.el === k.target || k.composedPath().includes(H.el));
   }
   const x = (p) => {
-    const k = oe(e);
+    const k = ne(e);
     if (p.target != null && !(!(k instanceof Element) && d(e) && f(e, p)) && !(!k || k === p.target || p.composedPath().includes(k))) {
       if ("detail" in p && p.detail === 0 && (o = !r(p)), !o) {
         o = !0;
@@ -418,19 +418,19 @@ function ge(e, u, t = {}) {
   };
   let y = !1;
   const b = [
-    ne(n, "click", (p) => {
+    ve(n, "click", (p) => {
       y || (y = !0, setTimeout(() => {
         y = !1;
       }, 0), x(p));
     }, { passive: !0, capture: l }),
-    ne(n, "pointerdown", (p) => {
-      const k = oe(e);
+    ve(n, "pointerdown", (p) => {
+      const k = ne(e);
       o = !r(p) && !!(k && !p.composedPath().includes(k));
     }, { passive: !0 }),
-    i && ne(n, "blur", (p) => {
+    i && ve(n, "blur", (p) => {
       setTimeout(() => {
         var k;
-        const D = oe(e);
+        const D = ne(e);
         ((k = n.document.activeElement) == null ? void 0 : k.tagName) === "IFRAME" && !(D != null && D.contains(n.document.activeElement)) && u(p);
       }, 0);
     }, { passive: !0 })
@@ -459,15 +459,15 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
   setup(e, { emit: u }) {
     const t = u, n = e, a = K(), i = (/* @__PURE__ */ (() => {
       let V = 0;
-      return (P) => (P || "") + ++V;
-    })())((a.id || "autocomplete") + "-"), s = $([]), o = $(-1), r = $(0), d = $(!1), f = $(!1), x = $("top-0 translate-y-12"), y = $(!0), b = $(null), T = $(null), p = $(null), k = z(
-      () => s.value.map((V, P) => ({
-        id: (a.id || "autocomplete") + "-item-" + P,
-        class: [n.resultItemClass, { "bg-vxvue-700 text-white": o.value === P }],
+      return (z) => (z || "") + ++V;
+    })())((a.id || "autocomplete") + "-"), s = $([]), o = $(-1), r = $(0), d = $(!1), f = $(!1), x = $("top-0 translate-y-12"), y = $(!0), b = $(null), T = $(null), p = $(null), k = B(
+      () => s.value.map((V, z) => ({
+        id: (a.id || "autocomplete") + "-item-" + z,
+        class: [n.resultItemClass, { "bg-vxvue-700 text-white": o.value === z }],
         role: "option",
-        ...o.value === P ? { "aria-selected": "true" } : {}
+        ...o.value === z ? { "aria-selected": "true" } : {}
       }))
-    ), D = z(() => ({
+    ), D = B(() => ({
       role: "combobox",
       autocomplete: "off",
       autocapitalize: "off",
@@ -479,25 +479,25 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
       "aria-expanded": d.value ? "true" : "false",
       "aria-activedescendant": o.value > -1 ? k.value[o.value].id : "",
       ...a
-    })), W = z(() => ({
+    })), W = B(() => ({
       id: i,
-      class: ["absolute min-w-full transform z-10", n.resultListClass, x.value],
+      class: ["absolute min-w-full transform z-[var(--zIndex-dropdown)]", n.resultListClass, x.value],
       role: "listbox"
     })), H = () => {
       o.value = -1, s.value = [], d.value = !1, y.value = !0;
     }, S = (V) => {
-      const P = n.search(V);
-      if (P instanceof Promise) {
+      const z = n.search(V);
+      if (z instanceof Promise) {
         const G = ++r.value;
-        f.value = !0, P.then((U) => {
+        f.value = !0, z.then((U) => {
           G === r.value && (s.value = U, f.value = !1, s.value.length ? (o.value = n.autoSelect ? 0 : -1, d.value = !0) : H());
         });
       } else
-        s.value = P, s.value.length === 0 ? H() : (o.value = n.autoSelect ? 0 : -1, d.value = !0);
+        s.value = z, s.value.length === 0 ? H() : (o.value = n.autoSelect ? 0 : -1, d.value = !0);
     }, M = () => {
       const V = s.value[o.value];
       return V && t("update:modelValue", n.getResultValue(V)), H(), V;
-    }, E = (V) => {
+    }, F = (V) => {
       t("update:modelValue", V), S(V);
     }, h = (V) => S(V.target.value), g = () => {
       H(), t("blur-sm");
@@ -506,25 +506,25 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
       o.value = ((o.value - 1) % V + V) % V;
     }, N = (V) => {
       d.value || h(V);
-      const P = s.value.length;
-      o.value = ((o.value + 1) % P + P) % P;
+      const z = s.value.length;
+      o.value = ((o.value + 1) % z + z) % z;
     }, q = () => {
       H(), t("update:modelValue", "");
     }, ae = () => t("submit", M()), Q = (V) => {
-      const P = V.target.closest("[data-result-index]");
-      P && (o.value = parseInt(P.dataset.resultIndex, 10), t("submit", M()));
+      const z = V.target.closest("[data-result-index]");
+      z && (o.value = parseInt(z.dataset.resultIndex, 10), t("submit", M()));
     };
     return ge(p, H), Le(() => {
       if (b.value) {
-        const V = T.value.getBoundingClientRect(), P = b.value.getBoundingClientRect();
-        y.value && s.value.length && (y.value = !1, x.value = V.bottom + P.height > window.innerHeight && window.innerHeight - V.bottom < V.top && window.pageYOffset + V.top - P.height > 0 ? "bottom-0  -translate-y-12" : "top-0 translate-y-12");
+        const V = T.value.getBoundingClientRect(), z = b.value.getBoundingClientRect();
+        y.value && s.value.length && (y.value = !1, x.value = V.bottom + z.height > window.innerHeight && window.innerHeight - V.bottom < V.top && window.pageYOffset + V.top - z.height > 0 ? "bottom-0  -translate-y-12" : "top-0 translate-y-12");
         const G = b.value.querySelector('[data-result-index="' + o.value + '"]');
         if (G) {
           let U = G.getBoundingClientRect();
-          U.top < P.top ? b.value.scrollTop -= P.top - U.top : U.bottom > P.bottom && (b.value.scrollTop += U.bottom - P.bottom);
+          U.top < z.top ? b.value.scrollTop -= z.top - U.top : U.bottom > z.bottom && (b.value.scrollTop += U.bottom - z.bottom);
         }
       }
-    }), (V, P) => (c(), m("div", {
+    }), (V, z) => (c(), m("div", {
       ref_key: "container",
       ref: p,
       class: C(["inline-block relative", V.$attrs.class])
@@ -535,7 +535,7 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
         class: "block pr-10 w-full form-input focus:border-vxvue",
         value: e.modelValue
       }, D.value, {
-        onInput: P[0] || (P[0] = (G) => E(G.target.value)),
+        onInput: z[0] || (z[0] = (G) => F(G.target.value)),
         onKeydown: [
           se(ae, ["enter"]),
           se(q, ["esc"]),
@@ -558,7 +558,7 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
         ref: b
       }, W.value, {
         onClick: Q,
-        onMousedown: P[1] || (P[1] = _(() => {
+        onMousedown: z[1] || (z[1] = _(() => {
         }, ["prevent"]))
       }), [
         (c(!0), m(O, null, j(s.value, (G, U) => (c(), m("div", { "data-result-index": U }, [
@@ -569,7 +569,7 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
             (c(), m("div", R({
               key: k.value[U].id,
               ref_for: !0
-            }, k.value[U]), B(e.getResultValue(G)), 17))
+            }, k.value[U]), P(e.getResultValue(G)), 17))
           ])
         ], 8, at))), 256))
       ], 16)) : I("", !0)
@@ -591,13 +591,13 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
       _: 3
     }, 8, ["name"]));
   }
-}, be = /* @__PURE__ */ Ce(st, [["__scopeId", "data-v-d4ea10e0"]]), nt = {
+}, be = /* @__PURE__ */ Ce(st, [["__scopeId", "data-v-edc3641f"]]), nt = {
   key: 0,
-  class: "fixed inset-0 z-50 bg-black/50 backdrop-blur-xs",
+  class: "fixed inset-0 z-[calc(var(--zIndex-confirm)-1)] bg-black/50 backdrop-blur-xs",
   "aria-hidden": "true"
 }, ot = {
   key: 0,
-  class: "overflow-y-auto fixed inset-0 z-50"
+  class: "overflow-y-auto fixed inset-0 z-[var(--zIndex-confirm)]"
 }, rt = { class: "flex justify-center items-center min-h-screen text-center sm:block sm:p-0" }, ut = { key: 0 }, it = { class: "inline-block overflow-hidden text-left align-bottom bg-white rounded-sm shadow-xl transition-all transform sm:my-8 sm:w-full sm:max-w-sm sm:align-middle lg:max-w-lg" }, dt = { class: "px-4 pb-4 mt-4 sm:px-6 sm:pb-6 sm:mt-5" }, ct = { class: "flex flex-row items-center" }, vt = { class: "shrink-0" }, mt = { class: "grow text-center" }, ft = ["onClick"], Sl = {
   __name: "Confirm",
   props: {
@@ -618,7 +618,7 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
   setup(e, { expose: u }) {
     const t = e, n = $(""), a = $(""), l = $(!1);
     let i = null, s = null;
-    const o = z(() => Array.isArray(t.buttons) ? t.buttons : [t.buttons]), r = $(null), d = (x, y) => {
+    const o = B(() => Array.isArray(t.buttons) ? t.buttons : [t.buttons]), r = $(null), d = (x, y) => {
       l.value = !1, x.value !== void 0 ? x.value ? i() : s() : y ? s() : i();
     };
     return u({ open: (x, y) => (n.value = x, a.value = y, l.value = !0, fe(() => r.value.firstElementChild.focus()), new Promise((b, T) => {
@@ -640,7 +640,7 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
                     class: C(["py-4 pt-4 text-lg font-medium text-center sm:py-6", e.headerClass])
                   }, [
                     L(x.$slots, "title", { title: n.value }, () => [
-                      J(B(n.value), 1)
+                      J(P(n.value), 1)
                     ])
                   ], 2)) : I("", !0),
                   v("div", dt, [
@@ -650,7 +650,7 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
                       ]),
                       v("p", mt, [
                         L(x.$slots, "default", { message: a.value }, () => [
-                          J(B(a.value), 1)
+                          J(P(a.value), 1)
                         ])
                       ])
                     ]),
@@ -663,7 +663,7 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
                         key: b.label,
                         class: C([e.buttonClass, b.class]),
                         onClick: _((p) => d(b, T), ["prevent"])
-                      }, B(b.label), 11, ft))), 128))
+                      }, P(b.label), 11, ft))), 128))
                     ], 512)
                   ])
                 ])
@@ -677,7 +677,7 @@ const tt = ["value", "onKeydown"], lt = { class: "flex absolute inset-y-0 right-
   }
 };
 function ht(e, u) {
-  const t = $(!1), n = F(u);
+  const t = $(!1), n = E(u);
   let a, l = n.toLowerCase().replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), i = [];
   if ((a = n.match(/\bd\b/gi)) && a.length === 1)
     l = l.replace("d", "(\\d{1,2})");
@@ -695,7 +695,7 @@ function ht(e, u) {
     l = l.replace("yyyy", "(\\d{4})");
   else
     return { date: t };
-  if (i.push({ srcPos: n.toLowerCase().indexOf("y"), destPos: 0 }), !(a = F(e).match(l)))
+  if (i.push({ srcPos: n.toLowerCase().indexOf("y"), destPos: 0 }), !(a = E(e).match(l)))
     return { date: t };
   a.shift(), i.sort((d, f) => d.srcPos < f.srcPos ? -1 : 1);
   let s = [], o, r;
@@ -713,18 +713,18 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
   },
   emits: ["update:modelValue", "toggle-datepicker"],
   setup(e, { emit: u }) {
-    const t = u, n = e, a = $(""), l = z(() => n.modelValue ? xe(n.modelValue, n.outputFormat) : ""), i = z(() => {
+    const t = u, n = e, a = $(""), l = B(() => n.modelValue ? xe(n.modelValue, n.outputFormat) : ""), i = B(() => {
       let s = Object.assign({}, K());
       return delete s.class, s;
     });
     return X(() => n.modelValue, (s) => a.value = s ? xe(s, n.outputFormat) : ""), (s, o) => (c(), m("div", {
       class: C(["inline-block relative", s.$attrs.class])
     }, [
-      ue(v("div", null, [
+      re(v("div", null, [
         v("div", {
           class: C(["block flex items-center w-full form-input bg-vxvue-50", { "pr-10": e.showToggle }])
         }, [
-          v("span", pt, B(l.value), 1),
+          v("span", pt, P(l.value), 1),
           i.value.disabled ? I("", !0) : (c(), m("button", {
             key: 0,
             class: "inline-flex shrink-0 justify-center items-center ml-2 rounded-full focus:text-white focus:outline-hidden size-4 text-vxvue hover:bg-vxvue-100 hover:text-vue-700 focus:bg-vxvue-700",
@@ -736,8 +736,8 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
       ], 512), [
         [me, l.value]
       ]),
-      ue(v("div", null, [
-        ue(v("input", R({
+      re(v("div", null, [
+        re(v("input", R({
           "onUpdate:modelValue": o[1] || (o[1] = (r) => a.value = r),
           type: "text",
           class: ["block w-full form-input peer focus:border-vxvue", { "pr-10": e.showToggle }]
@@ -749,7 +749,7 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
           onInput: o[3] || (o[3] = _(() => {
           }, ["prevent"]))
         }), null, 16), [
-          [Pe, a.value]
+          [ze, a.value]
         ])
       ], 512), [
         [me, !l.value]
@@ -786,12 +786,12 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
     const t = e, n = u, a = (() => {
       const h = /* @__PURE__ */ new Date();
       return new Date(h.getFullYear(), h.getMonth(), h.getDate());
-    })(), l = $(null), i = $([]), s = $(!1), o = $("days"), r = $(0), d = $({ horiz: "left-0", vert: "top-0" }), f = $(null), x = $(null), y = $(null), b = z(() => t.hasInput && t.maxNumberOfValues === 1), T = z(() => b.value ? { class: ["absolute", s.value ? "block" : "hidden"] } : {}), p = z(() => {
+    })(), l = $(null), i = $([]), s = $(!1), o = $("days"), r = $(0), d = $({ horiz: "left-0", vert: "top-0" }), f = $(null), x = $(null), y = $(null), b = B(() => t.hasInput && t.maxNumberOfValues === 1), T = B(() => b.value ? { class: ["absolute", s.value ? "block" : "hidden"] } : {}), p = B(() => {
       const h = [], g = l.value.getFullYear(), w = l.value.getMonth(), N = new Date(g, w + 1, 0), q = new Date(g, w, 0).getDay() + 1 - t.startOfWeekIndex, ae = (6 + t.startOfWeekIndex - N.getDay()) % 7;
       for (let Q = -q, V = N.getDate() + ae; Q < V; ++Q)
         h.push(new Date(g, w, Q + 1));
       return h;
-    }), k = z(() => t.startOfWeekIndex ? t.dayNames.slice(1).concat(t.dayNames[0]) : t.dayNames);
+    }), k = B(() => t.startOfWeekIndex ? t.dayNames.slice(1).concat(t.dayNames[0]) : t.dayNames);
     X(() => t.modelValue, (h) => {
       if (h)
         if (Array.isArray(h)) {
@@ -828,7 +828,7 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
         let w = g.findIndex((N) => N.getTime() === h.getTime());
         w !== -1 ? g.splice(w, 1) : g.length < t.maxNumberOfValues && g.push(h), n("update:modelValue", g);
       }
-    }, M = (h) => i.value.find((g) => (g == null ? void 0 : g.getTime()) === h.getTime()), E = (h) => {
+    }, M = (h) => i.value.find((g) => (g == null ? void 0 : g.getTime()) === h.getTime()), F = (h) => {
       const g = h.getMonth() !== l.value.getMonth(), w = M(h), N = h.getTime() === a.getTime(), q = t.validFrom && t.validFrom > h || t.validUntil && t.validUntil < h, ae = !w && t.maxNumberOfValues > 1 && i.value.length === t.maxNumberOfValues, Q = t.highlightRange && h > Math.min(...i.value) && h < Math.max(...i.value);
       return {
         "cursor-not-allowed": q || ae,
@@ -864,7 +864,7 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
       v("div", R(T.value, {
         ref_key: "calendar",
         ref: x,
-        class: ["overflow-hidden z-10 bg-white rounded-sm shadow-md min-w-72 sm:min-w-80", [d.value.horiz, d.value.vert]]
+        class: ["overflow-hidden z-[var(--zIndex-dropdown)] bg-white rounded-sm shadow-md min-w-72 sm:min-w-80", [d.value.horiz, d.value.vert]]
       }), [
         o.value === "days" ? (c(), m(O, { key: 0 }, [
           v("div", xt, [
@@ -873,14 +873,14 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
                 class: "shrink-0 text-vxvue-100 hover:text-vxvue-50",
                 onClick: g[1] || (g[1] = _((w) => D(l.value.getMonth() - 1), ["stop"]))
               }, [
-                Y(A(de), { class: "size-6" })
+                Y(A(ie), { class: "size-6" })
               ]),
-              v("span", null, B(l.value.toLocaleString(e.locale, { month: "long" })), 1),
+              v("span", null, P(l.value.toLocaleString(e.locale, { month: "long" })), 1),
               v("button", {
                 class: "shrink-0 text-vxvue-100 hover:text-vxvue-50",
                 onClick: g[2] || (g[2] = _((w) => D(l.value.getMonth() + 1), ["stop"]))
               }, [
-                Y(A(re), { class: "size-6" })
+                Y(A(oe), { class: "size-6" })
               ])
             ]),
             v("div", wt, [
@@ -888,19 +888,19 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
                 class: "shrink-0 text-vxvue-100 hover:text-vxvue-50",
                 onClick: g[3] || (g[3] = _((w) => W(l.value.getFullYear() - 1), ["stop"]))
               }, [
-                Y(A(de), { class: "size-6" })
+                Y(A(ie), { class: "size-6" })
               ]),
               v("button", {
                 class: "text-vxvue-100 hover:text-vxvue-50",
                 onClick: g[4] || (g[4] = (w) => {
                   o.value = "years", r.value = l.value.getFullYear();
                 })
-              }, B(l.value.getFullYear()), 1),
+              }, P(l.value.getFullYear()), 1),
               v("button", {
                 class: "shrink-0 text-vxvue-100 hover:text-vxvue-50",
                 onClick: g[5] || (g[5] = _((w) => W(l.value.getFullYear() + 1), ["stop"]))
               }, [
-                Y(A(re), { class: "size-6" })
+                Y(A(oe), { class: "size-6" })
               ])
             ])
           ]),
@@ -908,13 +908,13 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
             (c(!0), m(O, null, j(k.value, (w, N) => (c(), m("div", {
               key: N,
               class: "py-2 text-center bg-gray-200"
-            }, B(w), 1))), 128)),
+            }, P(w), 1))), 128)),
             (c(!0), m(O, null, j(p.value, (w) => (c(), m("button", {
               key: w,
-              class: C(["py-2 rounded-xs block text-center", E(w)]),
+              class: C(["py-2 rounded-xs block text-center", F(w)]),
               disabled: e.validFrom && e.validFrom > w || e.validUntil && e.validUntil < w || e.maxNumberOfValues > 1 && i.value.length === e.maxNumberOfValues && !M(w),
               onClick: _((N) => S(w), ["stop"])
-            }, B(w.getDate()), 11, $t))), 128))
+            }, P(w.getDate()), 11, $t))), 128))
           ])
         ], 64)) : I("", !0),
         o.value === "years" ? (c(), m(O, { key: 1 }, [
@@ -923,14 +923,14 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
               class: "shrink-0 text-vxvue-100 hover:text-vxvue-50",
               onClick: g[6] || (g[6] = _((w) => r.value -= 10, ["stop"]))
             }, [
-              Y(A(de), { class: "size-6" })
+              Y(A(ie), { class: "size-6" })
             ]),
-            v("span", null, B(r.value) + " - " + B(r.value + 9), 1),
+            v("span", null, P(r.value) + " - " + P(r.value + 9), 1),
             v("button", {
               class: "shrink-0 text-vxvue-100 hover:text-vxvue-50",
               onClick: g[7] || (g[7] = _((w) => r.value += 10, ["stop"]))
             }, [
-              Y(A(re), { class: "size-6" })
+              Y(A(oe), { class: "size-6" })
             ])
           ]),
           v("div", Ct, [
@@ -943,7 +943,7 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
                 onClick: _((N) => {
                   W(r.value + w - 1), o.value = "days";
                 }, ["stop"])
-              }, B(r.value + w - 1), 9, Mt)
+              }, P(r.value + w - 1), 9, Mt)
             ])), 64))
           ])
         ], 64)) : I("", !0)
@@ -991,7 +991,7 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
   key: 0,
   disabled: "",
   value: ""
-}, Tt = ["selected", "value"], Pt = {
+}, Tt = ["selected", "value"], zt = {
   __name: "FormSelect",
   props: {
     options: { type: Array, default: () => [] },
@@ -1006,23 +1006,23 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
       class: "form-select",
       onChange: a[0] || (a[0] = (l) => t("update:modelValue", l.target.value))
     }), [
-      e.disabledLabel ? (c(), m("option", Lt, B(e.disabledLabel), 1)) : I("", !0),
+      e.disabledLabel ? (c(), m("option", Lt, P(e.disabledLabel), 1)) : I("", !0),
       (c(!0), m(O, null, j(e.options, (l) => (c(), m("option", {
         key: l.key !== void 0 ? l.key : l.label || l,
         selected: (l.key !== void 0 ? l.key : l.label || l) === e.modelValue,
         value: l.key !== void 0 ? l.key : l.label || l
-      }, B(l.label || l), 9, Tt))), 128))
+      }, P(l.label || l), 9, Tt))), 128))
     ], 16, At));
   }
-}, Bt = ["aria-checked", "aria-label"], zt = ["d"], It = ["checked"], Vl = {
+}, Pt = ["aria-checked", "aria-label"], Bt = ["d"], It = ["checked"], Vl = {
   __name: "FormSwitch",
   props: { modelValue: Boolean },
   emits: ["update:modelValue"],
   setup(e, { emit: u }) {
-    const t = u, n = z(() => {
+    const t = u, n = B(() => {
       let l = Object.assign({}, K());
       return delete l.class, l;
-    }), a = z(() => K().disabled || K().disabled === "");
+    }), a = B(() => K().disabled || K().disabled === "");
     return (l, i) => (c(), m("label", {
       class: C(l.$attrs.class),
       tabindex: "0"
@@ -1057,7 +1057,7 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 d: e.modelValue ? "M12 18 V6" : "m18.5 12 c0 3.5 -3 6.5 -6.5 6.5 -3.5 0 -6.5 -3 -6.5 -6.5 0 -3.5 3 -6.5 6.5 -6.5 3.5 0 6.5 3 6.5 6.5z"
-              }, null, 8, zt)
+              }, null, 8, Bt)
             ], 2))
           ])
         ], 2),
@@ -1068,14 +1068,14 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
           type: "checkbox",
           onChange: i[0] || (i[0] = (s) => t("update:modelValue", s.target.checked))
         }), null, 16, It)
-      ], 10, Bt),
+      ], 10, Pt),
       L(l.$slots, "default")
     ], 2));
   }
 }, Nt = {
   "aria-live": "assertive",
-  class: "flex fixed inset-0 z-50 items-start py-6 px-4 pointer-events-none sm:p-6"
-}, Ot = { class: "flex flex-col items-center space-y-4 w-full" }, Ft = { class: "p-4" }, Et = { class: "flex items-start" }, _t = { class: "shrink-0" }, jt = { class: "flex-1 pt-0.5 ml-3 w-0" }, Yt = { class: "font-bold" }, Rt = { class: "mt-1" }, Ht = { class: "flex shrink-0 ml-4" }, Dl = /* @__PURE__ */ Object.assign({
+  class: "flex fixed inset-0 z-[var(--zIndex-toast)] items-start py-6 px-4 pointer-events-none sm:p-6"
+}, Ot = { class: "flex flex-col items-center space-y-4 w-full" }, Et = { class: "p-4" }, Ft = { class: "flex items-start" }, _t = { class: "shrink-0" }, jt = { class: "flex-1 pt-0.5 ml-3 w-0" }, Yt = { class: "font-bold" }, Rt = { class: "mt-1" }, Ht = { class: "flex shrink-0 ml-4" }, Dl = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "MessageToast",
@@ -1088,7 +1088,7 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
   },
   emits: ["timeout", "close"],
   setup(e, { emit: u }) {
-    const t = e, n = u, a = z(() => typeof t.message == "string" ? [t.message] : t.message), l = $(0);
+    const t = e, n = u, a = B(() => typeof t.message == "string" ? [t.message] : t.message), l = $(0);
     let i = null;
     const s = () => {
       window.clearTimeout(i), l.value = 100, t.active && t.timeout && (i = window.setTimeout(() => {
@@ -1103,17 +1103,17 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
               key: 0,
               class: C(["overflow-hidden w-full max-w-sm rounded-md ring-1 ring-black/5 shadow-lg pointer-events-auto", o.$attrs.class])
             }, [
-              v("div", Ft, [
-                v("div", Et, [
+              v("div", Et, [
+                v("div", Ft, [
                   v("div", _t, [
                     L(o.$slots, "icon")
                   ]),
                   v("div", jt, [
                     L(o.$slots, "title", {}, () => [
-                      v("div", Yt, B(e.title), 1)
+                      v("div", Yt, P(e.title), 1)
                     ]),
                     L(o.$slots, "default", {}, () => [
-                      (c(!0), m(O, null, j(a.value, (d) => (c(), m("p", Rt, B(d), 1))), 256))
+                      (c(!0), m(O, null, j(a.value, (d) => (c(), m("p", Rt, P(d), 1))), 256))
                     ])
                   ]),
                   v("div", Ht, [
@@ -1147,16 +1147,19 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
   }
 }), Zt = {
   key: 0,
-  class: "fixed inset-0 z-9998 bg-white/50 backdrop-blur-xs",
+  class: "fixed inset-0 z-[calc(var(--zIndex-modal)-1)] bg-white/50 backdrop-blur-xs",
   "aria-hidden": "true"
 }, Wt = {
   key: 0,
-  class: "fixed inset-0 z-9999"
+  class: "fixed inset-0 z-[var(--zIndex-modal)]"
 }, qt = { class: "flex justify-center items-center h-screen" }, Al = {
   __name: "Modal",
   props: {
     show: Boolean,
-    containerClass: { type: String, default: "w-3/4 h-[90vh]" },
+    containerClass: {
+      type: String,
+      default: "mx-4 w-full lg:w-1/2 xl:w-1/4 max-h-[90vh]"
+    },
     headerClass: { type: String, default: "" },
     contentClass: { type: String, default: "" }
   },
@@ -1172,15 +1175,18 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
               v("div", {
                 ref_key: "container",
                 ref: n,
-                class: C(["overflow-hidden relative max-w-full bg-white rounded-sm ring-1 ring-black/10 shadow-xl transition-all transform xl:max-w-(--breakpoint-xl)", e.containerClass])
+                class: C([
+                  "flex flex-col overflow-hidden max-w-full bg-white rounded-sm ring-1 ring-black/10 shadow-xl transition-all transform xl:max-w-(--breakpoint-xl)",
+                  e.containerClass
+                ])
               }, [
                 v("div", {
-                  class: C(e.headerClass)
+                  class: C(["grow-0", e.headerClass])
                 }, [
                   L(a.$slots, "title")
                 ], 2),
                 v("div", {
-                  class: C(["overflow-y-auto h-full pb-4 mt-16", e.contentClass])
+                  class: C(["overflow-y-auto h-full", e.contentClass])
                 }, [
                   L(a.$slots, "default")
                 ], 2)
@@ -1206,7 +1212,7 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
   },
   emits: ["update:page"],
   setup(e, { emit: u }) {
-    const t = u, n = e, a = $(Math.ceil(n.total / n.perPage)), l = $(null), i = z(() => (n.markerPosition === "above" ? "border-t-4 -mt-[4px]" : "border-b-4 -mb-[4px]") + " py-4"), s = z(() => {
+    const t = u, n = e, a = $(Math.ceil(n.total / n.perPage)), l = $(null), i = B(() => (n.markerPosition === "above" ? "border-t-4 -mt-[4px]" : "border-b-4 -mb-[4px]") + " py-4"), s = B(() => {
       let d = [1];
       if (n.showAllPages || a.value <= 7) {
         for (let f = 2; f <= a.value; ++f)
@@ -1234,12 +1240,12 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
           ]),
           onClick: o
         }, [
-          Y(A(de), { class: "size-5" }),
-          J(" " + B(e.prevText), 1)
+          Y(A(ie), { class: "size-5" }),
+          J(" " + P(e.prevText), 1)
         ], 10, Xt)) : I("", !0)
       ]),
       v("div", Gt, [
-        (c(!0), m(O, null, j(s.value, (x, y) => (c(), Z(ce(e.page !== "dots" ? "button" : "span"), {
+        (c(!0), m(O, null, j(s.value, (x, y) => (c(), Z(de(e.page !== "dots" ? "button" : "span"), {
           key: y,
           class: C([
             { "pointer-events-none": x === "dots" },
@@ -1250,7 +1256,7 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
           onClick: (b) => x !== "dots" ? t("update:page", x) : null
         }, {
           default: te(() => [
-            J(B(x !== "dots" ? x : "…"), 1)
+            J(P(x !== "dots" ? x : "…"), 1)
           ]),
           _: 2
         }, 1032, ["class", "onClick"]))), 128))
@@ -1265,8 +1271,8 @@ const pt = { class: "text-vxvue-700" }, gt = ["disabled"], bt = /* @__PURE__ */
           ]),
           onClick: r
         }, [
-          J(B(e.nextText) + " ", 1),
-          Y(A(re), { class: "size-5" })
+          J(P(e.nextText) + " ", 1),
+          Y(A(oe), { class: "size-5" })
         ], 10, Qt)) : I("", !0)
       ])
     ]));
@@ -1316,7 +1322,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
   props: { modelValue: { type: String, default: "" } },
   emits: ["update:modelValue"],
   setup(e, { emit: u }) {
-    const t = u, n = $(!1), a = z(() => {
+    const t = u, n = $(!1), a = B(() => {
       let l = Object.assign({}, K());
       return delete l.class, l;
     });
@@ -1349,7 +1355,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
 }), sl = { class: "flex items-center pb-1" }, nl = {
   key: 0,
   class: "ml-6"
-}, Pl = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+}, zl = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "SimpleTree",
   props: {
     branch: { type: Object, default: () => ({}) },
@@ -1361,7 +1367,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
     return he(() => {
       t.branch === t.modelValue && n("expand", !0);
     }), (l, i) => {
-      const s = Be("simple-tree", !0);
+      const s = Pe("simple-tree", !0);
       return c(), m("div", {
         class: C([!e.branch.branches || !e.branch.branches.length ? "terminates" : "", l.$attrs.class])
       }, [
@@ -1375,24 +1381,24 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
               branch: e.branch,
               expanded: a.value
             }, () => [
-              (c(), Z(ce(a.value ? A(Ee) : A(_e)), { class: "p-1 text-white rounded-xs size-5 bg-vxvue-700 hover:bg-vxvue" }))
+              (c(), Z(de(a.value ? A(Fe) : A(_e)), { class: "p-1 text-white rounded-xs size-5 bg-vxvue-700 hover:bg-vxvue" }))
             ])
           ])) : I("", !0),
           e.branch === e.modelValue ? L(l.$slots, "label-selected", {
             key: 1,
             branch: e.branch
           }, () => [
-            v("strong", null, B(e.branch.label), 1)
+            v("strong", null, P(e.branch.label), 1)
           ]) : (c(), m("button", {
             key: 2,
             onClick: i[1] || (i[1] = (o) => n("update:modelValue", e.branch))
           }, [
             L(l.$slots, "label", { branch: e.branch }, () => [
-              J(B(e.branch.label), 1)
+              J(P(e.branch.label), 1)
             ])
           ]))
         ]),
-        e.branch.branches && e.branch.branches.length ? ue((c(), m("div", nl, [
+        e.branch.branches && e.branch.branches.length ? re((c(), m("div", nl, [
           (c(!0), m(O, null, j(e.branch.branches, (o) => (c(), Z(s, {
             key: o.id || o.key || null,
             branch: o,
@@ -1401,7 +1407,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
             onExpand: i[3] || (i[3] = (r) => {
               a.value = r, n("expand", r);
             })
-          }, ze({ _: 2 }, [
+          }, Be({ _: 2 }, [
             j(l.$slots, (r, d) => ({
               name: d,
               fn: te((f) => [
@@ -1415,7 +1421,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
       ], 2);
     };
   }
-}), Bl = {
+}), Pl = {
   __name: "Sizable",
   props: { vertical: Boolean },
   emits: ["dragStart", "dragStop"],
@@ -1447,7 +1453,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
         ref_key: "handle",
         ref: l,
         class: ["absolute flex", t.vertical ? "inset-x-0 top-full justify-center py-1 cursor-ns-resize" : "inset-y-0 left-full items-center px-1 cursor-ew-resize"]
-      }, ie({
+      }, ue({
         touchstart: x,
         mousedown: x,
         touchend: y,
@@ -1461,7 +1467,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
       ], 16)
     ], 512));
   }
-}, ol = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext"], rl = ["id"], ul = ["id", "aria-label"], zl = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+}, ol = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext"], rl = ["id"], ul = ["id", "aria-label"], Bl = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "Slider",
   props: {
     min: { type: Number, default: 0 },
@@ -1476,10 +1482,10 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
   setup(e, { emit: u }) {
     const t = e, n = u, a = K(), l = { x: null, y: null }, i = { w: null, h: null };
     let s = !1;
-    const o = $(null), r = $(0), d = z(() => {
+    const o = $(null), r = $(0), d = B(() => {
       const S = t.max, M = t.min;
-      return t.modelValue instanceof Array ? t.modelValue.map((E) => (Math.max(Math.min(E, S), M) - M) * 100 / (S - M)) : (Math.max(Math.min(t.modelValue, S), M) - M) * 100 / (S - M);
-    }), f = z(() => {
+      return t.modelValue instanceof Array ? t.modelValue.map((F) => (Math.max(Math.min(F, S), M) - M) * 100 / (S - M)) : (Math.max(Math.min(t.modelValue, S), M) - M) * 100 / (S - M);
+    }), f = B(() => {
       if (t.modelValue instanceof Array) {
         const S = Math.min(...d.value) + "%", M = Math.max(...d.value) - Math.min(...d.value) + "%";
         return t.vertical ? { bottom: S, height: M } : { left: S, width: M };
@@ -1491,16 +1497,16 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
     }), y = (S) => {
       let M = parseFloat(S.toFixed(10));
       if (M = Math.min(t.max, Math.max(t.min, M)), t.modelValue instanceof Array) {
-        let E = [...t.modelValue];
-        E[r.value] = M, n("update:modelValue", E);
+        let F = [...t.modelValue];
+        F[r.value] = M, n("update:modelValue", F);
       } else
         n("update:modelValue", M);
     }, b = (S) => {
-      const { pageX: M, pageY: E } = S.touches ? S.touches[0] : S, h = t.vertical ? (-E + l.y) / i.h : (M - l.x) / i.w;
+      const { pageX: M, pageY: F } = S.touches ? S.touches[0] : S, h = t.vertical ? (-F + l.y) / i.h : (M - l.x) / i.w;
       y(Math.floor((t.max - t.min) * h + t.min));
     }, T = () => {
-      const { clientLeft: S, clientTop: M, scrollLeft: E, scrollTop: h } = document.documentElement, g = o.value.getBoundingClientRect();
-      l.x = g.left + E - S, l.y = g.bottom + h - M, i.w = o.value.offsetWidth, i.h = o.value.offsetHeight;
+      const { clientLeft: S, clientTop: M, scrollLeft: F, scrollTop: h } = document.documentElement, g = o.value.getBoundingClientRect();
+      l.x = g.left + F - S, l.y = g.bottom + h - M, i.w = o.value.offsetWidth, i.h = o.value.offsetHeight;
     }, p = (S) => {
       s && (S.preventDefault(), b(S));
     }, k = (S) => {
@@ -1544,7 +1550,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
       "aria-valuemax": t.max,
       "aria-valuenow": e.modelValue[0] ?? e.modelValue,
       "aria-valuetext": e.modelValue
-    }, ie(e.disabled ? {} : {
+    }, ue(e.disabled ? {} : {
       click: H
     }, !0)), [
       e.disabled ? I("", !0) : (c(), m("div", {
@@ -1552,12 +1558,12 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
         class: C(["absolute bg-vxvue", e.vertical ? "w-full rounded-t-full rounded-b-full" : "h-full rounded-r-full rounded-l-full"]),
         style: we(f.value)
       }, null, 6)),
-      e.modelValue.length ? (c(!0), m(O, { key: 2 }, j(e.modelValue, (E, h) => (c(), m("button", R({
+      e.modelValue.length ? (c(!0), m(O, { key: 2 }, j(e.modelValue, (F, h) => (c(), m("button", R({
         id: h ? null : A(a).id,
         style: e.vertical ? { bottom: d.value[h] + "%" } : { left: d.value[h] + "%" },
         "aria-label": "slider-thumb-" + (h + 1),
         ref_for: !0
-      }, x.value, ie(e.disabled ? {} : {
+      }, x.value, ue(e.disabled ? {} : {
         focus: () => r.value = h,
         keydown: W,
         touchstart: (g) => {
@@ -1573,14 +1579,14 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
         id: A(a).id,
         style: e.vertical ? { bottom: d.value + "%" } : { left: d.value + "%" },
         "aria-label": "slider-thumb"
-      }, x.value, ie(e.disabled ? {} : {
+      }, x.value, ue(e.disabled ? {} : {
         focus: () => r.value = 0,
         keydown: W,
-        touchstart: (E) => {
-          r.value = 0, k(E);
+        touchstart: (F) => {
+          r.value = 0, k(F);
         },
-        mousedown: (E) => {
-          r.value = 0, k(E);
+        mousedown: (F) => {
+          r.value = 0, k(F);
         },
         touchend: D,
         mouseup: D
@@ -1611,7 +1617,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
   },
   emits: ["before-sort", "after-sort"],
   setup(e, { emit: u }) {
-    const t = e, n = u, a = $(t.sortProp), l = $(t.sortDirection), i = z(() => {
+    const t = e, n = u, a = $(t.sortProp), l = $(t.sortDirection), i = B(() => {
       let o = t.rows.slice();
       const r = t.columns.find(({ prop: d }) => d === a.value);
       return r && (l.value === "asc" && r.sortAscFunction ? o.sort(r.sortAscFunction) : l.value === "desc" && r.sortDescFunction ? o.sort(r.sortDescFunction) : o.sort((d, f) => d[a.value] < f[a.value] ? l.value === "asc" ? -1 : 1 : d[a.value] > f[a.value] ? l.value === "asc" ? 1 : -1 : 0)), o.slice(t.offset || 0, (t.offset || 0) + (t.count || o.length));
@@ -1642,8 +1648,8 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
               sortProp: a.value
             }, () => [
               v("div", dl, [
-                v("span", null, B(d.label), 1),
-                d.sortable ? (c(), Z(ce(a.value !== d.prop ? A(Oe) : l.value === "asc" ? A(Ne) : A(Fe)), {
+                v("span", null, P(d.label), 1),
+                d.sortable ? (c(), Z(de(a.value !== d.prop ? A(Oe) : l.value === "asc" ? A(Ne) : A(Ee)), {
                   key: 0,
                   class: "size-4"
                 })) : I("", !0)
@@ -1665,7 +1671,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
             class: "overflow-hidden py-3 px-6 whitespace-nowrap text-ellipsis"
           }, [
             L(o.$slots, f.prop, { row: d }, () => [
-              J(B(d[f.prop]), 1)
+              J(P(d[f.prop]), 1)
             ])
           ], 8, cl))), 128))
         ], 2))), 128))
@@ -1708,7 +1714,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
   },
   emits: ["update:activeIndex"],
   setup(e, { emit: u }) {
-    const t = e, n = u, a = $(t.items[t.activeIndex] || {}), l = z(() => {
+    const t = e, n = u, a = $(t.items[t.activeIndex] || {}), l = B(() => {
       let s = [];
       return t.items.forEach((o, r) => {
         o.disabled || s.push({ label: o.name, key: r });
@@ -1722,7 +1728,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
     };
     return (s, o) => (c(), m(O, null, [
       v("div", hl, [
-        Y(Pt, {
+        Y(zt, {
           options: l.value,
           "model-value": e.activeIndex,
           class: "w-full",
@@ -1749,7 +1755,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
               L(s.$slots, "icon", { tab: r }),
               v("span", null, [
                 L(s.$slots, "default", { tab: r }, () => [
-                  J(B(r.name), 1)
+                  J(P(r.name), 1)
                 ])
               ]),
               L(s.$slots, "badge", { tab: r }, () => [
@@ -1763,7 +1769,7 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
                       "bg-gray-200": a.value !== r && !r.disabled
                     }
                   ])
-                }, B(r.badge), 3)) : I("", !0)
+                }, P(r.badge), 3)) : I("", !0)
               ])
             ], 10, xl))), 128))
           ])
@@ -1771,9 +1777,9 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
       ])
     ], 64));
   }
-}, Fl = {
-  mounted: (e) => e.focus()
 }, El = {
+  mounted: (e) => e.focus()
+}, Fl = {
   mounted: (e, u) => {
     var t, n;
     if (!["INPUT", "TEXTAREA"].includes(e.nodeName)) {
@@ -1783,10 +1789,10 @@ const ll = ["value", "type"], al = ["disabled"], Tl = /* @__PURE__ */ Object.ass
     if (e) {
       if (e.querySelector("label")) throw new Error("VFloatingLabel directive: LABEL element found.");
       const a = Math.random().toString(36).substring(2), l = document.createElement("div");
-      l.classList.add("relative");
+      l.classList.add("relative", "isolate");
       const i = document.createElement("label");
       i.classList.add(
-        ..."absolute px-2 left-1 top-2 scale-90 text-sm z-10 origin-[0] bg-white -translate-y-4 transform-gpu duration-200".split(" "),
+        ..."absolute px-2 left-1 top-2 scale-90 text-sm z-[var(--zIndex-label)] origin-[0] bg-white -translate-y-4 transform-gpu duration-200".split(" "),
         ..."peer-focus:top-2 peer-focus:scale-90 peer-focus:-translate-y-full".split(" "),
         ..."peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2".split(" "),
         e.nodeName === "TEXTAREA" ? "peer-placeholder-shown:top-4" : "peer-placeholder-shown:top-1/2"
@@ -1808,19 +1814,19 @@ export {
   bt as DateInput,
   Cl as Datepicker,
   Ml as FormFileButton,
-  Pt as FormSelect,
+  zt as FormSelect,
   Vl as FormSwitch,
   Dl as MessageToast,
   Al as Modal,
   Ll as Pagination,
   Tl as PasswordInput,
-  Pl as SimpleTree,
-  Bl as Sizable,
-  zl as Slider,
+  zl as SimpleTree,
+  Pl as Sizable,
+  Bl as Slider,
   Il as Sortable,
   ke as Spinner,
   Nl as SubmitButton,
   Ol as Tabs,
-  El as VFloatingLabel,
-  Fl as VFocus
+  Fl as VFloatingLabel,
+  El as VFocus
 };