@indielayer/ui 1.14.3 → 1.14.5

package/docs/pages/component/modal/usage.vue

@@ -24,7 +24,7 @@ const show3 = ref(false)
 
     <template #actions>
       <div class="text-right space-x-4">
-        <x-button @click="show = false">Cancel</x-button>
+        <x-button tabindex="-1" @click="show = false">Cancel</x-button>
         <x-button color="success">Confirm</x-button>
       </div>
     </template>

package/lib/components/checkbox/Checkbox.vue2.js

@@ -1,15 +1,15 @@
-import { defineComponent as R, ref as w, watch as m, unref as r, openBlock as i, createElementBlock as p, normalizeStyle as T, normalizeClass as t, createElementVNode as d, withKeys as H, withModifiers as O, withDirectives as U, mergeProps as X, toHandlers as j, vModelCheckbox as J, createBlock as V, renderSlot as C, toDisplayString as Q, createCommentVNode as W } from "vue";
+import { defineComponent as T, ref as w, watch as m, unref as r, openBlock as o, createElementBlock as d, normalizeStyle as H, normalizeClass as t, createElementVNode as p, withKeys as O, withModifiers as U, withDirectives as X, mergeProps as j, toHandlers as J, vModelCheckbox as Q, createBlock as V, renderSlot as C, toDisplayString as W, createCommentVNode as I } from "vue";
 import { useColors as Y } from "../../composables/useColors.js";
-import { useCommon as I } from "../../composables/useCommon.js";
+import { useCommon as z } from "../../composables/useCommon.js";
 import { useInputtable as f } from "../../composables/useInputtable.js";
-import { useInteractive as z } from "../../composables/useInteractive.js";
+import { useInteractive as A } from "../../composables/useInteractive.js";
 import { useTheme as Z } from "../../composables/useTheme.js";
 import x from "../inputFooter/InputFooter.vue.js";
 import _ from "../spinner/Spinner.vue.js";
 const ee = ["onKeypress"], le = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], se = ["textContent"], ae = {
-  ...I.props(),
-  ...Y.props("primary"),
   ...z.props(),
+  ...Y.props("primary"),
+  ...A.props(),
   ...f.props(),
   value: [String, Number],
   indeterminate: Boolean,
@@ -17,74 +17,74 @@ const ee = ["onKeypress"], le = ["id", "name", "aria-checked", "aria-disabled",
 }, re = {
   name: "XCheckbox",
   validators: {
-    ...I.validators()
+    ...z.validators()
   }
-}, ce = /* @__PURE__ */ R({
+}, ce = /* @__PURE__ */ T({
   ...re,
   props: ae,
   emits: f.emits(!1),
-  setup(A, { expose: B, emit: $ }) {
-    const l = A, v = $, b = w(null), a = w(!1);
+  setup(B, { expose: $, emit: F }) {
+    const l = B, v = F, b = w(null), a = w(!1);
     function y() {
       l.disabled || l.loading || l.readonly || (a.value = !a.value);
     }
-    const { focus: h, blur: F } = z(b), {
-      errorInternal: G,
-      hideFooterInternal: N,
-      isInsideForm: S,
+    const { focus: h, blur: G } = A(b), {
+      errorInternal: N,
+      hideFooterInternal: S,
+      isInsideForm: q,
       isInsideFormGroup: c,
-      isFirstValidation: q,
-      formGroup: o,
-      reset: E,
+      isFirstValidation: E,
+      formGroup: i,
+      reset: K,
       validate: k,
-      setError: K
+      setError: L
     } = f(l, { focus: h, emit: v, withListeners: !1 });
-    c ? (m(() => o.value, () => {
-      const e = r(o.value);
+    c ? (m(() => i.value, () => {
+      const e = r(i.value);
       e && Array.isArray(e) && e.includes(l.value) ? a.value = !0 : a.value = !1;
     }, { immediate: !0, deep: !0 }), m(() => a.value, (e) => {
       if (!l.value)
         return;
-      const s = r(o.value);
+      const s = r(i.value);
       if (e)
         if (s && Array.isArray(s)) {
           if (!s.includes(l.value)) {
             const u = [...s, l.value];
-            o.setValue(u);
+            i.setValue(u);
           }
         } else
-          o.setValue([l.value]);
+          i.setValue([l.value]);
       else if (s && Array.isArray(s) && s.includes(l.value)) {
-        const u = s.findIndex((P) => P === l.value), g = [...s];
-        g.splice(u, 1), o.setValue(g);
+        const u = s.findIndex((R) => R === l.value), g = [...s];
+        g.splice(u, 1), i.setValue(g);
       }
     })) : (m(() => l.modelValue, (e) => {
       a.value = !!e;
     }, { immediate: !0 }), m(() => a.value, (e) => {
       v("update:modelValue", e);
     }));
-    const L = {
+    const M = {
       input: () => {
         c || setTimeout(() => {
-          l.validateOnInput && !q.value && k(l.modelValue);
+          l.validateOnInput && !E.value && k(l.modelValue);
         }, 0);
       }
-    }, { styles: M, classes: n, className: D } = Z("Checkbox", {}, l, { checked: a, isInsideForm: S, isInsideFormGroup: c });
-    return B({ focus: h, blur: F, toggle: y, reset: E, validate: k, setError: K }), (e, s) => (i(), p("label", {
-      style: T(r(M)),
+    }, { styles: D, classes: n, className: P } = Z("Checkbox", {}, l, { checked: a, isInsideForm: q, isInsideFormGroup: c });
+    return $({ focus: h, blur: G, toggle: y, reset: K, validate: k, setError: L }), (e, s) => (o(), d("label", {
+      style: H(r(D)),
       class: t([
-        r(D),
+        r(P),
         r(n).wrapper
       ])
     }, [
-      d("div", {
+      p("div", {
         ref_key: "elRef",
         ref: b,
         class: t(r(n).content),
         tabindex: "0",
-        onKeypress: H(O(y, ["prevent", "stop"]), ["space"])
+        onKeypress: O(U(y, ["prevent", "stop"]), ["space"])
       }, [
-        U(d("input", X({
+        X(p("input", j({
           id: e.id,
           "onUpdate:modelValue": s[0] || (s[0] = (u) => a.value = u),
           name: e.name,
@@ -94,44 +94,45 @@ const ee = ["onKeypress"], le = ["id", "name", "aria-checked", "aria-disabled",
           class: "invisible absolute",
           disabled: e.disabled || e.loading || e.readonly,
           required: e.required
-        }, j(L, !0)), null, 16, le), [
-          [J, a.value]
+        }, J(M, !0)), null, 16, le), [
+          [Q, a.value]
         ]),
-        d("div", {
+        p("div", {
           class: t([
             r(n).box,
             [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
           ])
         }, [
-          e.loading ? (i(), V(_, {
+          e.loading ? (o(), V(_, {
             key: 0,
             size: e.size,
             class: "absolute"
-          }, null, 8, ["size"])) : e.indeterminate ? (i(), p("span", {
+          }, null, 8, ["size"])) : e.indeterminate ? (o(), d("span", {
             key: 1,
             name: "check-icon",
             class: t(["w-2/3 h-[1.5px]", [e.disabled ? "bg-secondary-400 dark:bg-secondary-500" : "bg-white"]])
           }, null, 2)) : C(e.$slots, "icon", { key: 2 }, () => [
-            (i(), p("svg", {
+            (o(), d("svg", {
               viewBox: "0 0 20 20",
               class: t([r(n).icon, { "opacity-0": !a.value }])
             }, s[1] || (s[1] = [
-              d("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1)
+              p("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1)
             ]), 2))
           ])
         ], 2),
-        d("div", {
+        e.label || e.$slots.default ? (o(), d("div", {
+          key: 0,
           class: t(r(n).label)
         }, [
-          e.label ? (i(), p("span", {
+          e.label ? (o(), d("span", {
             key: 0,
-            textContent: Q(e.label)
+            textContent: W(e.label)
           }, null, 8, se)) : C(e.$slots, "default", { key: 1 })
-        ], 2)
+        ], 2)) : I("", !0)
       ], 42, ee),
-      r(N) ? W("", !0) : (i(), V(x, {
+      r(S) ? I("", !0) : (o(), V(x, {
         key: 0,
-        error: r(G),
+        error: r(N),
         helper: e.helper
       }, null, 8, ["error", "helper"]))
     ], 6));

package/lib/components/datepicker/Datepicker.vue.js

@@ -136,8 +136,8 @@ const W = {
   ...$,
   props: K,
   emits: m.emits(),
-  setup(y, { expose: c, emit: g }) {
-    const b = y, h = g, t = u(null);
+  setup(y, { expose: c, emit: b }) {
+    const g = y, h = b, t = u(null);
     function k(e) {
       h("update:modelValue", e), setTimeout(r);
     }
@@ -159,9 +159,9 @@ const W = {
     }, {
       attributes: !0
     }), c({ focus: v, blur: w, validate: r });
-    const { styles: B, classes: S, className: O } = V("Datepicker", {}, b);
+    const { styles: B, classes: S, className: O } = V("Datepicker", {}, g);
     return (e, H) => (N(), I("div", {
-      style: P(n(B)),
+      style: P([n(B), { "--dp-clear-btn-top": e.label ? "2.70rem" : "1.2rem" }]),
       class: j([
         n(O),
         n(S).wrapper

package/lib/components/menu/MenuItem.vue.js

@@ -3,7 +3,7 @@ import o from "./MenuItem.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: o
-}, _ = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-418dd6c3"]]);
+}, c = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-45456d33"]]);
 export {
-  _ as default
+  c as default
 };

package/lib/components/menu/MenuItem.vue2.js

@@ -119,6 +119,7 @@ const A = {
           key: 0,
           "model-value": e.value.active,
           "hide-footer": "",
+          class: "mr-1.5",
           "skip-form-registry": "",
           onClick: i[0] || (i[0] = P((u) => h(u, "checkbox-click"), ["stop", "prevent"]))
         }, null, 8, ["model-value"])) : s("", !0),

package/lib/components/modal/Modal.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as X, ref as y, watch as w, nextTick as S, useSlots as H, computed as M, openBlock as t, createBlock as v, Teleport as j, createElementBlock as r, normalizeStyle as q, unref as o, normalizeClass as l, createCommentVNode as a, createElementVNode as B, resolveDynamicComponent as K, withCtx as $, renderSlot as i, toDisplayString as h } from "vue";
-import { onClickOutside as L, useEventListener as G } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useTheme as J } from "../../composables/useTheme.js";
-import { useFocusTrap as Q } from "../../composables/useFocusTrap.js";
-import { closeIcon as U } from "../../common/icons.js";
-import Y from "../button/Button.vue.js";
-import Z from "../scroll/Scroll.vue.js";
-import _ from "../form/Form.vue.js";
-const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top", "center", "bottom"], te = {
+import { defineComponent as X, ref as y, watch as S, nextTick as H, useSlots as M, computed as j, openBlock as t, createBlock as v, Teleport as q, createElementBlock as r, normalizeStyle as K, unref as o, normalizeClass as l, createCommentVNode as a, createElementVNode as B, resolveDynamicComponent as L, withCtx as T, renderSlot as i, toDisplayString as h } from "vue";
+import { onClickOutside as G, useEventListener as J } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useTheme as Q } from "../../composables/useTheme.js";
+import { useFocusTrap as U } from "../../composables/useFocusTrap.js";
+import { closeIcon as Y } from "../../common/icons.js";
+import Z from "../button/Button.vue.js";
+import _ from "../scroll/Scroll.vue.js";
+import x from "../form/Form.vue.js";
+const ee = { key: 0 }, oe = ["xs", "sm", "md", "lg", "xl", "full"], te = ["top", "center", "bottom"], le = {
   size: {
     type: String,
     default: "lg"
@@ -49,35 +49,39 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
     default: () => []
   },
   persistent: Boolean
-}, le = {
+}, se = {
   name: "XModal",
   validators: {
-    size: ee,
-    position: oe
+    size: oe,
+    position: te
   }
-}, me = /* @__PURE__ */ X({
-  ...le,
-  props: te,
+}, pe = /* @__PURE__ */ X({
+  ...se,
+  props: le,
   emits: ["update:modelValue", "submit"],
-  setup(V, { expose: C, emit: T }) {
-    const d = V, k = T, c = y(d.modelValue), u = y(!1), b = y(null), E = y(null), { initFocusTrap: z, clearFocusTrap: A } = Q();
+  setup($, { expose: V, emit: C }) {
+    const d = $, k = C, c = y(d.modelValue), u = y(!1), b = y(null), E = y(null), { initFocusTrap: z, clearFocusTrap: A } = U();
     let m;
-    w(c, (e) => {
+    S(c, (e) => {
       m && (m(), m = void 0), e && setTimeout(() => {
-        m = L(b, F, {
+        m = G(b, F, {
           ignore: [".v-popper__popper"]
         });
       });
-    }), w(() => d.modelValue, D, { immediate: !0 });
+    });
+    let g;
+    S(() => d.modelValue, D, { immediate: !0 });
     async function D() {
       const e = d.modelValue;
       if (e) {
         const n = window.innerWidth - document.documentElement.clientWidth;
-        c.value = e, await S(), u.value = e, await S(), z(b), document.body.style.paddingRight = `${n}px`, document.body.style.overflow = "hidden";
+        c.value = e, await H(), u.value = e, g = setTimeout(() => {
+          z(b);
+        }, 100), document.body.style.paddingRight = `${n}px`, document.body.style.overflow = "hidden";
       } else
-        u.value = e, c.value = e, A(), document.body.style.paddingRight = "", document.body.style.overflow = "auto";
+        u.value = e, c.value = e, clearTimeout(g), A(), document.body.style.paddingRight = "", document.body.style.overflow = "auto";
     }
-    typeof window < "u" && G(document, "keydown", W);
+    typeof window < "u" && J(document, "keydown", W);
     const R = (e) => [".v-popper__popper", ".x-datepicker"].some((n) => typeof n == "string" ? Array.from(window.document.querySelectorAll(n)).some((f) => f === e.target || e.composedPath().includes(f)) : !1);
     function W(e) {
       e.key === "Escape" && !R(e) && c.value && !d.persistent && p();
@@ -93,15 +97,15 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
     function O() {
       k("update:modelValue", !0), u.value = !0;
     }
-    const g = H(), P = M(() => !!(g["tertiary-action"] || g["cancel-action"])), { styles: I, classes: s, className: N } = J("Modal", {}, d, {
+    const w = M(), P = j(() => !!(w["tertiary-action"] || w["cancel-action"])), { styles: I, classes: s, className: N } = Q("Modal", {}, d, {
       visible: u
     });
-    return C({ open: O, close: p }), (e, n) => (t(), v(j, { to: "body" }, [
+    return V({ open: O, close: p }), (e, n) => (t(), v(q, { to: "body" }, [
       c.value ? (t(), r("div", {
         key: 0,
         ref_key: "modalWrapperRef",
         ref: E,
-        style: q(o(I)),
+        style: K(o(I)),
         class: l([
           o(N),
           o(s).wrapper,
@@ -115,7 +119,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
         B("div", {
           class: l(o(s).modalWrapper)
         }, [
-          (t(), v(K(e.isForm ? _ : "div"), {
+          (t(), v(L(e.isForm ? x : "div"), {
             ref_key: "modalRef",
             ref: b,
             class: l(["max-h-full", o(s).modal]),
@@ -131,7 +135,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
             "aria-labelledby": "modal-headline",
             onSubmit: n[0] || (n[0] = (f) => e.$emit("submit", f))
           }, {
-            default: $(() => [
+            default: T(() => [
               i(e.$slots, "image"),
               i(e.$slots, "header", {}, () => [
                 e.hasHeader ? (t(), r("div", {
@@ -150,7 +154,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
                   ])
                 ], 2)) : a("", !0)
               ]),
-              e.$slots.default ? (t(), v(Z, {
+              e.$slots.default ? (t(), v(_, {
                 key: 0,
                 scrollbar: !1,
                 class: l({
@@ -158,7 +162,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
                 }),
                 vertical: ""
               }, {
-                default: $(() => [
+                default: T(() => [
                   B("div", {
                     class: l(o(s).content)
                   }, [
@@ -171,12 +175,12 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
                 ]),
                 _: 3
               }, 8, ["class"])) : a("", !0),
-              e.showClose ? (t(), v(Y, {
+              e.showClose ? (t(), v(Z, {
                 key: 1,
                 ghost: "",
                 size: "sm",
                 tabindex: "-1",
-                icon: o(U),
+                icon: o(Y),
                 class: l(o(s).closeIcon),
                 onClick: p
               }, null, 8, ["icon", "class"])) : a("", !0),
@@ -187,7 +191,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
                 }, [
                   i(e.$slots, "actions", {}, () => [
                     i(e.$slots, "cancel-action"),
-                    P.value ? (t(), r("div", x)) : a("", !0),
+                    P.value ? (t(), r("div", ee)) : a("", !0),
                     i(e.$slots, "tertiary-action"),
                     i(e.$slots, "secondary-action"),
                     i(e.$slots, "primary-action")
@@ -203,5 +207,5 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
   }
 });
 export {
-  me as default
+  pe as default
 };

package/lib/components/select/Select.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as Me, mergeModels as ve, computed as A, ref as b, useModel as Pe, watch as M, nextTick as Z, unref as s, onUnmounted as Fe, openBlock as r, createBlock as L, mergeProps as U, toHandlers as ce, withCtx as m, createElementVNode as P, createElementBlock as u, normalizeClass as k, Fragment as w, createTextVNode as T, toDisplayString as g, createVNode as B, renderSlot as O, createCommentVNode as R, renderList as j, createSlots as Ee, normalizeStyle as He, withModifiers as We, withDirectives as qe, vModelSelect as Ue } from "vue";
+import { defineComponent as Me, mergeModels as ve, computed as A, ref as b, useModel as Pe, watch as M, nextTick as Z, unref as s, onUnmounted as Fe, openBlock as r, createBlock as L, mergeProps as U, toHandlers as ce, withCtx as m, createElementVNode as P, createElementBlock as u, normalizeClass as k, Fragment as w, createTextVNode as B, toDisplayString as g, createVNode as S, renderSlot as O, createCommentVNode as R, renderList as j, createSlots as Ee, normalizeStyle as He, withModifiers as We, withDirectives as qe, vModelSelect as Ue } from "vue";
 import { useEventListener as je, useResizeObserver as Xe } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
 import { useColors as Ke } from "../../composables/useColors.js";
 import { useCommon as he } from "../../composables/useCommon.js";
@@ -70,12 +70,12 @@ const ol = { class: "relative" }, rl = {
   }),
   emits: /* @__PURE__ */ ve([..._.emits(), "close"], ["update:filter"]),
   setup(ee, { expose: ge, emit: Ce }) {
-    const i = ee, S = Ce, c = A(() => i.multiple || i.multipleCheckbox), X = b(null), K = b(null), F = b(null), C = b(null), G = b(null), d = b(), I = Pe(ee, "filter"), E = b(null), $ = A(() => i.disabled || i.loading || i.readonly), we = A(() => !i.loading && !i.readonly && !i.disabled && i.clearable && !J(o.value)), o = A({
+    const i = ee, z = Ce, c = A(() => i.multiple || i.multipleCheckbox), X = b(null), K = b(null), F = b(null), C = b(null), G = b(null), d = b(), I = Pe(ee, "filter"), E = b(null), $ = A(() => i.disabled || i.loading || i.readonly), we = A(() => !i.loading && !i.readonly && !i.disabled && i.clearable && !J(o.value)), o = A({
       get() {
         return c.value ? i.modelValue ? Array.isArray(i.modelValue) ? i.modelValue : [i.modelValue] : [] : i.modelValue;
       },
       set(e) {
-        S("update:modelValue", e);
+        z("update:modelValue", e);
       }
     }), h = A(() => !i.options || i.options.length === 0 ? [] : i.options.filter((e) => I.value === "" || e.label.toLowerCase().includes(I.value.toLowerCase())).map((e) => {
       let t = !1;
@@ -111,7 +111,7 @@ const ol = { class: "relative" }, rl = {
           var t;
           ae(d.value || 0), i.filterable && ((t = E.value) == null || t.focus());
         });
-      }, 50)) : (i.filterable && (I.value = ""), S("close"));
+      }, 50)) : (i.filterable && (I.value = ""), z("close"));
     });
     function Re() {
       if (c.value) {
@@ -170,7 +170,7 @@ const ol = { class: "relative" }, rl = {
               a !== -1 ? o.value.splice(a, 1) : o.value.push(e);
             } else
               o.value = [e];
-            S("update:modelValue", o.value), i.filterable && setTimeout(() => {
+            z("update:modelValue", o.value), i.filterable && setTimeout(() => {
               var a;
               (a = E.value) == null || a.focus();
             });
@@ -189,9 +189,9 @@ const ol = { class: "relative" }, rl = {
       if (e.stopPropagation(), $.value || !Array.isArray(o.value))
         return;
       const l = o.value.indexOf(t);
-      l !== -1 && (o.value.splice(l, 1), S("update:modelValue", o.value));
+      l !== -1 && (o.value.splice(l, 1), z("update:modelValue", o.value));
     }
-    function z(e) {
+    function T(e) {
       var l;
       const t = (l = i.options) == null ? void 0 : l.find((a) => a.value === e);
       return t ? t.label : "";
@@ -205,7 +205,7 @@ const ol = { class: "relative" }, rl = {
       setError: Ie,
       isFocused: Ve,
       isInsideForm: Te
-    } = _(i, { focus: re, emit: S, withListeners: !0 }), Be = A(() => {
+    } = _(i, { focus: re, emit: z, withListeners: !0 }), Be = A(() => {
       const { focus: e, blur: t } = s(ne);
       return {
         focus: e,
@@ -305,17 +305,17 @@ const ol = { class: "relative" }, rl = {
             J(o.value) ? (r(), u(w, { key: 1 }, [
               e.placeholder ? (r(), u("div", rl, g(e.placeholder), 1)) : (r(), u("div", sl, " "))
             ], 64)) : (r(), u(w, { key: 0 }, [
-              T(g(z(o.value)), 1)
+              B(g(T(o.value)), 1)
             ], 64))
           ], 2)) : (r(), u(w, { key: 1 }, [
-            B(ye, {
+            S(ye, {
               ref_key: "popoverRef",
               ref: C,
               disabled: $.value,
               placement: e.placement
             }, {
               content: m(() => [
-                B(be, {
+                S(be, {
                   class: k(s(y).content)
                 }, {
                   default: m(() => [
@@ -324,7 +324,7 @@ const ol = { class: "relative" }, rl = {
                         key: 0,
                         class: k(s(y).search)
                       }, [
-                        B(al, {
+                        S(al, {
                           ref_key: "filterRef",
                           ref: E,
                           modelValue: I.value,
@@ -370,7 +370,7 @@ const ol = { class: "relative" }, rl = {
                               O(e.$slots, "prefix", {
                                 item: l.data
                               }, () => [
-                                T(g(l.data.prefix), 1)
+                                B(g(l.data.prefix), 1)
                               ])
                             ]),
                             key: "0"
@@ -381,7 +381,7 @@ const ol = { class: "relative" }, rl = {
                               O(e.$slots, "suffix", {
                                 item: l.data
                               }, () => [
-                                T(g(l.data.suffix), 1)
+                                B(g(l.data.suffix), 1)
                               ])
                             ]),
                             key: "1"
@@ -400,7 +400,7 @@ const ol = { class: "relative" }, rl = {
                   popover: C.value,
                   selected: o.value,
                   disabled: $.value,
-                  label: z(o.value)
+                  label: T(o.value)
                 }, () => [
                   P("div", {
                     class: k([s(y).box])
@@ -436,7 +436,7 @@ const ol = { class: "relative" }, rl = {
                             ];
                           }),
                           default: m(() => [
-                            T(" " + g(z(l)), 1)
+                            B(" " + g(T(l)), 1)
                           ]),
                           _: 2
                         }, 1032, ["outlined", "disabled", "style", "onRemove"]);
@@ -451,8 +451,8 @@ const ol = { class: "relative" }, rl = {
                           return (a = de.value) == null ? void 0 : a.toggle();
                         }, ["stop"]))
                       }, "+" + g(q.value), 3)) : R("", !0)
-                    ], 2)) : !c.value && !J(o.value) ? (r(), u(w, { key: 1 }, [
-                      T(g(z(o.value)), 1)
+                    ], 2)) : !c.value && !J(o.value) && T(o.value) !== "" ? (r(), u(w, { key: 1 }, [
+                      B(g(T(o.value)), 1)
                     ], 64)) : (r(), u(w, { key: 2 }, [
                       e.placeholder ? (r(), u("div", nl, g(e.placeholder), 1)) : (r(), u("div", ul, " "))
                     ], 64))
@@ -471,7 +471,7 @@ const ol = { class: "relative" }, rl = {
               placement: "auto-start"
             }, {
               content: m(() => [
-                B(be, { class: "p-2 flex gap-2 flex-wrap" }, {
+                S(be, { class: "p-2 flex gap-2 flex-wrap" }, {
                   default: m(() => {
                     var l;
                     return [
@@ -496,7 +496,7 @@ const ol = { class: "relative" }, rl = {
                             ];
                           }),
                           default: m(() => [
-                            T(" " + g(z(a)), 1)
+                            B(" " + g(T(a)), 1)
                           ]),
                           _: 2
                         }, 1032, ["outlined", "disabled", "onRemove"]);
@@ -537,7 +537,7 @@ const ol = { class: "relative" }, rl = {
             onClick: t[4] || (t[4] = //@ts-ignore
             (...l) => s(Q) && s(Q)(...l))
           }, [
-            B(me, {
+            S(me, {
               icon: s(Ye),
               class: k([s(y).icon, "cursor-pointer"])
             }, null, 8, ["icon", "class"])
@@ -550,7 +550,7 @@ const ol = { class: "relative" }, rl = {
               key: 0,
               size: e.size
             }, null, 8, ["size"])) : O(e.$slots, "icon", { key: 1 }, () => [
-              B(me, {
+              S(me, {
                 icon: s(Ze),
                 class: k(s(y).icon)
               }, null, 8, ["icon", "class"])

package/lib/components/tab/theme/Tab.base.theme.js

@@ -2,7 +2,7 @@ const i = {
   classes: {
     wrapper: ({ props: t, data: s }) => {
       const e = ["transition-colors duration-150 ease-in-out whitespace-nowrap text-center"];
-      return s.variant === "line" && e.push("py-2"), s.variant === "block" && e.push("py-1.5 px-8"), t.size === "xs" ? e.push("text-xs") : t.size === "sm" ? e.push("text-sm") : t.size === "lg" ? e.push("text-lg") : t.size === "xl" && e.push("text-xl"), e;
+      return s.variant === "line" && e.push("py-2"), s.variant === "block" && e.push("py-1 px-8"), t.size === "xs" ? e.push("text-xs") : t.size === "sm" ? e.push("text-sm") : t.size === "lg" ? e.push("text-lg") : t.size === "xl" && e.push("text-xl"), e;
     },
     content: "flex items-center justify-center",
     label: "font-medium",

package/lib/composables/useFocusTrap.js

@@ -2,39 +2,43 @@ import { ref as b, onUnmounted as F, unref as w, nextTick as x } from "vue";
 const h = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])';
 function T() {
   const l = b([]);
-  let t = null, a = null, s = null, i = null, o = null;
+  let u = null, i = null, f = null, a = null, o = null;
   function m(e) {
     return e ? e.$el ? e.$el : e : null;
   }
   function v(e) {
-    const u = m(e);
-    if (!u)
+    const t = m(e);
+    if (!t)
       return;
-    const c = u.querySelectorAll(h);
-    l.value = Array.from(c), a = l.value[0] || null, s = l.value[l.value.length - 1] || null;
+    const c = t.querySelectorAll(h);
+    l.value = Array.from(c), i = l.value[0] || null, f = l.value[l.value.length - 1] || null;
   }
-  const f = (e) => {
-    if (e.key !== "Tab" || l.value.length === 0)
+  const s = (e) => {
+    if (e.key === "Tab" && l.value.length === 0) {
+      e.preventDefault();
       return;
-    const u = e.shiftKey, c = document.activeElement, n = a, r = s;
+    }
+    if (e.key !== "Tab")
+      return;
+    const t = e.shiftKey, c = document.activeElement, n = i, r = f;
     if (!c) {
       e.preventDefault(), n == null || n.focus();
       return;
     }
-    !u && c === r ? (e.preventDefault(), n == null || n.focus()) : u && c === n && (e.preventDefault(), r == null || r.focus());
+    !t && c === r ? (e.preventDefault(), n == null || n.focus()) : t && c === n && (e.preventDefault(), r == null || r.focus());
   };
-  async function y(e, u) {
+  async function y(e, t) {
     var r;
-    if (typeof window > "u" || (d(), i = document.activeElement, o = w(e), !o))
+    if (typeof window > "u" || (d(), a = document.activeElement, o = w(e), !o))
       return;
     await x(), v(o);
-    const c = (u == null ? void 0 : u.initialFocusIndex) ?? 0;
-    (r = l.value[c]) == null || r.focus(), document.removeEventListener("keydown", f), t == null || t.disconnect(), document.addEventListener("keydown", f);
+    const c = (t == null ? void 0 : t.initialFocusIndex) ?? 0;
+    (r = l.value[c]) == null || r.focus(), document.removeEventListener("keydown", s), u == null || u.disconnect(), document.addEventListener("keydown", s);
     const n = m(o);
-    n && (t = new MutationObserver(() => v(o)), t.observe(n, { childList: !0, subtree: !0 }));
+    n && (u = new MutationObserver(() => v(o)), u.observe(n, { childList: !0, subtree: !0 }));
   }
   function d(e) {
-    document.removeEventListener("keydown", f), t == null || t.disconnect(), t = null, e != null && e.returnFocus && i && i.focus(), o = null, l.value = [], a = null, s = null, i = null;
+    document.removeEventListener("keydown", s), u == null || u.disconnect(), u = null, e != null && e.returnFocus && a && a.focus(), o = null, l.value = [], i = null, f = null, a = null;
   }
   return F(() => {
     d({ returnFocus: !0 });