@indielayer/ui 1.5.0 → 1.5.2

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

@@ -1,12 +1,12 @@
-import { defineComponent as j, ref as f, watch as B, nextTick as g, useSlots as H, computed as I, openBlock as t, createBlock as p, Teleport as M, createElementBlock as i, normalizeStyle as P, unref as o, normalizeClass as s, createCommentVNode as a, createElementVNode as S, resolveDynamicComponent as W, withCtx as w, renderSlot as r, toDisplayString as v } from "vue";
-import { onClickOutside as K, useEventListener as L } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
-import { useTheme as q } from "../../composables/useTheme.js";
-import { useFocusTrap as G } from "../../composables/useFocusTrap.js";
-import { closeIcon as J } from "../../common/icons.js";
-import Q from "../button/Button.vue.js";
-import U from "../scroll/Scroll.vue.js";
-import Y from "../form/Form.vue.js";
-const Z = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = {
+import { defineComponent as H, ref as f, watch as g, nextTick as B, useSlots as I, computed as M, openBlock as t, createBlock as p, Teleport as P, createElementBlock as i, normalizeStyle as W, unref as o, normalizeClass as s, createCommentVNode as a, createElementVNode as S, resolveDynamicComponent as K, withCtx as w, renderSlot as r, toDisplayString as v } from "vue";
+import { onClickOutside as L, useEventListener as q } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useTheme as G } from "../../composables/useTheme.js";
+import { useFocusTrap as J } from "../../composables/useFocusTrap.js";
+import { closeIcon as Q } from "../../common/icons.js";
+import U from "../button/Button.vue.js";
+import Y from "../scroll/Scroll.vue.js";
+import Z from "../form/Form.vue.js";
+const _ = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = {
   size: {
     type: String,
     default: "xl"
@@ -42,28 +42,30 @@ const Z = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
     default: () => []
   },
   persistent: Boolean
-}, oe = {
+}, te = {
   name: "XModal",
   validators: {
-    size: x
+    size: ee
   }
-}, ce = /* @__PURE__ */ j({
-  ...oe,
-  props: ee,
+}, ce = /* @__PURE__ */ H({
+  ...te,
+  props: oe,
   emits: ["update:modelValue", "submit"],
-  setup(V, { expose: $, emit: C }) {
-    const n = V, b = C, u = f(n.modelValue), d = f(!1), y = f(null), T = f(null), { initFocusTrap: D, clearFocusTrap: z } = G();
+  setup(V, { expose: C, emit: T }) {
+    const n = V, b = T, u = f(n.modelValue), d = f(!1), y = f(null), $ = f(null), { initFocusTrap: D, clearFocusTrap: z } = J();
     let c;
-    B(u, (e) => {
+    g(u, (e) => {
       c && (c(), c = void 0), e && setTimeout(() => {
-        c = K(y, F);
+        c = L(y, F, {
+          ignore: [".v-popper__popper"]
+        });
       });
-    }), B(() => n.modelValue, E, { immediate: !0 });
+    }), g(() => n.modelValue, E, { immediate: !0 });
     async function E() {
       const e = n.modelValue;
-      e ? (u.value = e, await g(), d.value = e, await g(), D(y), document.body.style.overflow = "hidden") : (d.value = e, u.value = e, z(), document.body.style.overflow = "auto");
+      e ? (u.value = e, await B(), d.value = e, await B(), D(y), document.body.style.overflow = "hidden") : (d.value = e, u.value = e, z(), document.body.style.overflow = "auto");
     }
-    typeof window < "u" && L(document, "keydown", A);
+    typeof window < "u" && q(document, "keydown", A);
     function A(e) {
       e.key === "Escape" && u.value && !n.persistent && m();
     }
@@ -78,15 +80,15 @@ const Z = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
     function O() {
       b("update:modelValue", !0), d.value = !0;
     }
-    const k = H(), R = I(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: l, className: X } = q("Modal", {}, n, {
+    const k = I(), R = M(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: l, className: X } = G("Modal", {}, n, {
       visible: d
     });
-    return $({ open: O, close: m }), (e, h) => (t(), p(M, { to: "body" }, [
+    return C({ open: O, close: m }), (e, h) => (t(), p(P, { to: "body" }, [
       u.value ? (t(), i("div", {
         key: 0,
         ref_key: "modalWrapperRef",
-        ref: T,
-        style: P(o(N)),
+        ref: $,
+        style: W(o(N)),
         class: s([
           o(X),
           o(l).wrapper,
@@ -97,8 +99,8 @@ const Z = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
           key: 0,
           class: s(o(l).backdrop)
         }, null, 2)) : a("", !0),
-        S("div", Z, [
-          (t(), p(W(e.isForm ? Y : "div"), {
+        S("div", _, [
+          (t(), p(K(e.isForm ? Z : "div"), {
             ref_key: "modalRef",
             ref: y,
             disabled: e.formDisabled,
@@ -112,7 +114,7 @@ const Z = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": "modal-headline",
-            onSubmit: h[0] || (h[0] = (te) => e.$emit("submit"))
+            onSubmit: h[0] || (h[0] = (j) => e.$emit("submit", j))
           }, {
             default: w(() => [
               r(e.$slots, "image"),
@@ -131,7 +133,7 @@ const Z = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
                   }, v(e.title), 3)) : a("", !0)
                 ])
               ], 2)) : a("", !0),
-              e.$slots.default ? (t(), p(U, {
+              e.$slots.default ? (t(), p(Y, {
                 key: 1,
                 scrollbar: !1,
                 vertical: ""
@@ -149,12 +151,12 @@ const Z = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
                 ]),
                 _: 3
               })) : a("", !0),
-              e.showClose ? (t(), p(Q, {
+              e.showClose ? (t(), p(U, {
                 key: 2,
                 ghost: "",
                 size: "sm",
                 tabindex: "-1",
-                icon: o(J),
+                icon: o(Q),
                 class: s(o(l).closeIcon),
                 onClick: m
               }, null, 8, ["icon", "class"])) : a("", !0),
@@ -164,7 +166,7 @@ const Z = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
               }, [
                 r(e.$slots, "actions", {}, () => [
                   r(e.$slots, "cancel-action"),
-                  R.value ? (t(), i("div", _)) : a("", !0),
+                  R.value ? (t(), i("div", x)) : a("", !0),
                   r(e.$slots, "tertiary-action"),
                   r(e.$slots, "secondary-action"),
                   r(e.$slots, "primary-action")

package/lib/components/notifications/Notifications.vue.js

@@ -208,6 +208,7 @@ const se = { class: "flex items-center flex-wrap" }, re = {
                 D(l(te)),
                 e.action ? (a(), m("button", {
                   key: 1,
+                  type: "button",
                   class: "ml-3 font-medium cursor-pointer text-[color:var(--x-notification-action)] hover:text-[color:var(--x-notification-action-hover)] dark:text-[color:var(--x-notification-dark-action)] dark:hover:text-[color:var(--x-notification-dark-action-hover)]",
                   onClick: () => {
                     var u;

package/lib/components/popover/Popover.vue.d.ts

@@ -33,16 +33,10 @@ declare const popoverProps: {
     popperShowTriggers: PropType<TriggerEvent[] | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>;
     popperHideTriggers: PropType<TriggerEvent[] | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>;
     container: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | {
-            new (): Element;
-            prototype: Element;
-        })[];
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor)[];
         default: string;
     };
-    boundary: (StringConstructor | {
-        new (): Element;
-        prototype: Element;
-    })[];
+    boundary: (ObjectConstructor | StringConstructor)[];
     strategy: {
         type: PropType<"absolute" | "fixed">;
         default: string;
@@ -95,16 +89,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     popperShowTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     popperHideTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     container: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | {
-            new (): Element;
-            prototype: Element;
-        })[];
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor)[];
         default: string;
     };
-    boundary: (StringConstructor | {
-        new (): Element;
-        prototype: Element;
-    })[];
+    boundary: (ObjectConstructor | StringConstructor)[];
     strategy: {
         type: PropType<"absolute" | "fixed">;
         default: string;
@@ -157,16 +145,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     popperShowTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     popperHideTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     container: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | {
-            new (): Element;
-            prototype: Element;
-        })[];
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor)[];
         default: string;
     };
-    boundary: (StringConstructor | {
-        new (): Element;
-        prototype: Element;
-    })[];
+    boundary: (ObjectConstructor | StringConstructor)[];
     strategy: {
         type: PropType<"absolute" | "fixed">;
         default: string;
@@ -204,7 +186,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     placement: Placement;
     triggers: TriggerEvent[];
     hideArrow: boolean;
-    container: string | boolean | Element | Record<string, any>;
+    container: string | boolean | Record<string, any>;
     strategy: "absolute" | "fixed";
     autoHide: boolean | ((event: Event) => boolean);
     shown: boolean;

package/lib/components/popover/Popover.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as b, ref as a, openBlock as v, createBlock as S, unref as r, normalizeStyle as B, normalizeClass as T, withCtx as l, renderSlot as d } from "vue";
-import { useTheme as A } from "../../composables/useTheme.js";
-import { Dropdown as $ } from "../../node_modules/.pnpm/floating-vue@5.2.0_vue@3.3.9/node_modules/floating-vue/dist/floating-vue.js";
-const z = {
+import { defineComponent as b, ref as a, openBlock as v, createBlock as S, unref as r, normalizeStyle as T, normalizeClass as A, withCtx as l, renderSlot as d } from "vue";
+import { useTheme as B } from "../../composables/useTheme.js";
+import { Dropdown as $ } from "../../node_modules/.pnpm/floating-vue@5.2.2_vue@3.3.9/node_modules/floating-vue/dist/floating-vue.js";
+const k = {
   placement: ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"]
-}, k = {
+}, z = {
   disabled: Boolean,
   positioningDisabled: Boolean,
   placement: {
@@ -30,10 +30,10 @@ const z = {
   popperShowTriggers: [Array, Function],
   popperHideTriggers: [Array, Function],
   container: {
-    type: [String, Object, Element, Boolean],
+    type: [String, Object, Boolean],
     default: "body"
   },
-  boundary: [String, Element],
+  boundary: [String, Object],
   strategy: {
     type: String,
     default: "absolute"
@@ -53,10 +53,10 @@ const z = {
   computeTransformOrigin: Boolean
 }, C = {
   name: "XPopover",
-  validators: z
+  validators: k
 }, R = /* @__PURE__ */ b({
   ...C,
-  props: k,
+  props: z,
   emits: ["show", "hide", "update:shown", "apply-show", "apply-hide", "close-group", "close-directive", "auto-hide", "resize"],
   setup(g, { expose: u }) {
     const m = g, i = a(null);
@@ -73,12 +73,12 @@ const z = {
     }
     const t = a(!1);
     u({ show: s, hide: n, toggle: y, isOpen: t });
-    const { styles: f, classes: p, className: h } = A("Popover", {}, m);
+    const { styles: f, classes: p, className: h } = B("Popover", {}, m);
     return (e, o) => (v(), S(r($), {
       ref_key: "elRef",
       ref: i,
-      style: B(r(f)),
-      class: T([r(h), r(p).wrapper]),
+      style: T(r(f)),
+      class: A([r(h), r(p).wrapper]),
       "positioning-disabled": e.positioningDisabled,
       placement: e.placement,
       disabled: e.disabled,

package/lib/components/radio/theme/Radio.base.theme.js

@@ -2,51 +2,51 @@ const a = {
   classes: {
     wrapper: ({ data: e }) => {
       const t = ["inline-block relative cursor-pointer focus:outline-none group"];
-      return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-3"), t;
+      return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-5"), t;
     },
     circle: ({ props: e }) => {
       const t = ["rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline"];
       return e.size === "lg" ? t.push("h-5 w-5") : e.size === "xl" ? t.push("h-6 w-6") : t.push("h-4 w-4"), t;
     },
     circleIcon: ({ props: e, data: t }) => {
-      const s = [];
-      return t.selected || s.push("opacity-0"), e.size === "sm" || e.size === "xs" ? s.push("h-2") : e.size === "lg" ? s.push("h-2.5") : e.size === "xl" ? s.push("h-3") : s.push("h-2"), s;
+      const r = [];
+      return t.selected || r.push("opacity-0"), e.size === "sm" || e.size === "xs" ? r.push("h-2") : e.size === "lg" ? r.push("h-2.5") : e.size === "xl" ? r.push("h-3") : r.push("h-2"), r;
     },
-    label: ({ props: e }) => {
-      let t = "font-medium text-secondary-800 dark:text-secondary-200 pl-2";
-      return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
+    label: ({ props: e, data: t }) => {
+      let r = "text-secondary-800 dark:text-secondary-200 pl-2";
+      return r += t.isInsideFormGroup ? " font-normal" : " font-medium", e.size === "xs" ? r += " text-xs" : e.size === "sm" ? r += " text-sm" : e.size === "lg" ? r += " text-lg" : e.size === "xl" && (r += " text-xl"), r;
     },
     content: ({ props: e }) => {
       let t = "pl-2";
       return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
     }
   },
-  styles: ({ props: e, colors: t, css: s, data: n }) => {
-    const r = t.getPalette("gray"), l = t.getPalette(e.color), i = [];
-    return e.loading ? s.variables({
+  styles: ({ props: e, colors: t, css: r, data: n }) => {
+    const s = t.getPalette("gray"), l = t.getPalette(e.color), i = [];
+    return e.loading ? r.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? n.selected ? i.push(s.variables({
+    }) : (e.disabled ? n.selected ? i.push(r.variables({
       bg: "transparent",
-      border: r[200],
-      circle: r[200],
+      border: s[200],
+      circle: s[200],
       dark: {
         bg: "transparent",
-        border: r[700],
-        circle: r[700]
+        border: s[700],
+        circle: s[700]
       }
-    })) : i.push(s.variables({
-      bg: r[200],
-      border: r[200],
+    })) : i.push(r.variables({
+      bg: s[200],
+      border: s[200],
       dark: {
-        bg: r[700],
-        border: r[700]
+        bg: s[700],
+        border: s[700]
       }
-    })) : (n.selected ? i.push(s.variables({
+    })) : (n.selected ? i.push(r.variables({
       bg: "transparent",
       border: l[500],
       circle: l[500],
@@ -55,16 +55,16 @@ const a = {
         border: l[500],
         circle: l[500]
       }
-    })) : i.push(s.variables({
+    })) : i.push(r.variables({
       bg: "#fff",
-      border: e.glow ? l[300] : r[300],
+      border: e.glow ? l[300] : s[300],
       dark: {
-        bg: r[900],
-        border: e.glow ? l[300] : r[400]
+        bg: s[900],
+        border: e.glow ? l[300] : s[400]
       }
-    })), e.glow && i.push(s.get("glow", t.getColorOpacity(l[500], 0.5)))), i);
+    })), e.glow && i.push(r.get("glow", t.getColorOpacity(l[500], 0.5)))), i);
   }
-}, u = a;
+}, o = a;
 export {
-  u as default
+  o as default
 };

package/lib/components/scroll/Scroll.vue2.js

@@ -21,11 +21,11 @@ const L = {
       var e;
       (e = l.value) == null || e.dispatchEvent(new CustomEvent("scroll"));
     }
-    const { styles: h, classes: p, className: m } = C("Scroll", {}, t);
+    const { styles: h, classes: m, className: p } = C("Scroll", {}, t);
     return a({ scrollEl: l }), (e, R) => ($(), z("div", {
-      class: r(["flex relative overflow-hidden", [
-        o(m),
-        o(p).wrapper,
+      class: r(["flex relative overflow-hidden max-w-full max-h-full", [
+        o(p),
+        o(m).wrapper,
         e.$style.scrollwrap,
         e.horizontal ? [
           e.$style.horizontal,

package/lib/components/stepper/Stepper.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as I, ref as c, openBlock as i, createElementBlock as d, createElementVNode as r, normalizeClass as s, unref as o, normalizeStyle as B, createVNode as u, withCtx as p, Fragment as R, renderList as V, createBlock as N, resolveDynamicComponent as z, toDisplayString as f, createCommentVNode as E, renderSlot as P } from "vue";
+import { defineComponent as x, ref as c, openBlock as l, createElementBlock as d, createElementVNode as r, normalizeClass as s, unref as o, normalizeStyle as B, createVNode as u, withCtx as m, Fragment as R, renderList as V, createBlock as N, resolveDynamicComponent as z, toDisplayString as f, createCommentVNode as E, renderSlot as P } from "vue";
 import { useCommon as v } from "../../composables/useCommon.js";
 import { useColors as $ } from "../../composables/useColors.js";
 import { useTheme as D } from "../../composables/useTheme.js";
@@ -40,85 +40,86 @@ const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" },
 }, O = {
   name: "XStepper",
   validators: K
-}, se = /* @__PURE__ */ I({
+}, se = /* @__PURE__ */ x({
   ...O,
   props: M,
   emits: ["update:modelValue"],
   setup(y, { emit: _ }) {
-    const n = y, g = _, b = c(null), S = c(null), h = c(null);
-    function k(t, a) {
-      t.disabled || !n.interactive || g("update:modelValue", a);
+    const n = y, b = _, g = c(null), S = c(null), h = c(null);
+    function k(e, a) {
+      e.disabled || !n.interactive || b("update:modelValue", a);
     }
-    function C(t, a) {
-      return t.status === "incomplete" ? n.iconIncomplete || F : t.status === "error" ? n.iconError || L : t.status === "complete" ? n.iconComplete || T : n.iconPristine || W;
+    function C(e, a) {
+      return e.status === "incomplete" ? n.iconIncomplete || F : e.status === "error" ? n.iconError || L : e.status === "complete" ? n.iconComplete || T : n.iconPristine || W;
     }
-    const { styles: w, classes: l, className: x } = D("Stepper", {}, n);
-    return (t, a) => (i(), d("div", null, [
+    const { styles: w, classes: i, className: I } = D("Stepper", {}, n);
+    return (e, a) => (l(), d("div", null, [
       r("div", {
         ref_key: "wrapperRef",
         ref: S,
         class: s(["relative", [
-          o(x),
-          o(l).wrapper
+          o(I),
+          o(i).wrapper
         ]]),
         style: B(o(w))
       }, [
         u(X, {
           ref_key: "scrollRef",
-          ref: b,
+          ref: g,
           scrollbar: !1,
           horizontal: "",
           mousewheel: "",
-          class: s(o(l).scroller)
+          class: s(o(i).scroller)
         }, {
-          default: p(() => [
+          default: m(() => [
             r("div", {
               ref_key: "stepperRef",
               ref: h,
-              class: s(["relative", o(l).list])
+              class: s(["relative", o(i).list])
             }, [
-              (i(!0), d(R, null, V(t.steps, (e, m) => (i(), N(z(t.interactive ? "button" : "div"), {
-                key: m,
-                class: s([o(l).step, {
-                  "cursor-pointer": t.interactive && !e.disabled,
-                  "text-secondary-400 dark:text-secondary-600": e.disabled,
-                  "flex-1": t.grow
+              (l(!0), d(R, null, V(e.steps, (t, p) => (l(), N(z(e.interactive ? "button" : "div"), {
+                key: p,
+                type: e.interactive ? "button" : void 0,
+                class: s([o(i).step, {
+                  "cursor-pointer": e.interactive && !t.disabled,
+                  "text-secondary-400 dark:text-secondary-600": t.disabled,
+                  "flex-1": e.grow
                 }]),
-                disabled: e.disabled || !t.interactive,
-                onClick: (Q) => k(e, m)
+                disabled: t.disabled || !e.interactive,
+                onClick: (Q) => k(t, p)
               }, {
-                default: p(() => [
+                default: m(() => [
                   r("div", j, [
                     r("div", {
-                      class: s(["h-0.5 w-full mb-2", [e.status === "complete" || e.status === "incomplete" ? "bg-primary-500" : "bg-secondary-200 dark:bg-secondary-700"]])
+                      class: s(["h-0.5 w-full mb-2", [t.status === "complete" || t.status === "incomplete" ? "bg-primary-500" : "bg-secondary-200 dark:bg-secondary-700"]])
                     }, null, 2),
                     r("div", q, [
                       u(A, {
-                        icon: C(e),
+                        icon: C(t),
                         size: "sm",
-                        class: s([o(l).icon, {
-                          "text-primary-500": e.status === "complete" || e.status === "incomplete",
-                          "text-error-500": e.status === "error"
+                        class: s([o(i).icon, {
+                          "text-primary-500": t.status === "complete" || t.status === "incomplete",
+                          "text-error-500": t.status === "error"
                         }])
                       }, null, 8, ["icon", "class"]),
                       r("div", G, [
-                        r("div", H, f(e.label), 1),
-                        e.description ? (i(), d("div", J, f(e.description), 1)) : E("", !0)
+                        r("div", H, f(t.label), 1),
+                        t.description ? (l(), d("div", J, f(t.description), 1)) : E("", !0)
                       ])
                     ])
                   ])
                 ]),
                 _: 2
-              }, 1032, ["class", "disabled", "onClick"]))), 128))
+              }, 1032, ["type", "class", "disabled", "onClick"]))), 128))
             ], 2)
           ]),
           _: 1
         }, 8, ["class"])
       ], 6),
       r("div", {
-        class: s(o(l).content)
+        class: s(o(i).content)
       }, [
-        P(t.$slots, "default")
+        P(e.$slots, "default")
       ], 2)
     ]));
   }

package/lib/components/tab/Tab.vue.js

@@ -1,13 +1,13 @@
 import { defineComponent as R, computed as s, ref as d, inject as j, reactive as D, onMounted as E, openBlock as c, createBlock as m, resolveDynamicComponent as L, normalizeStyle as V, unref as o, normalizeClass as v, withCtx as M, renderSlot as g, createElementVNode as z, createCommentVNode as p, toDisplayString as O, Teleport as P, createElementBlock as X } from "vue";
 import { useMutationObserver as F } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
 import { injectTabGroupKey as G } from "../../composables/keys.js";
-import { useCommon as x } from "../../composables/useCommon.js";
+import { useCommon as T } from "../../composables/useCommon.js";
 import { useTheme as I } from "../../composables/useTheme.js";
 import C from "../icon/Icon.vue.js";
 import K from "../link/Link.vue.js";
 import { closeIcon as q } from "../../common/icons.js";
 const A = {
-  ...x.props(),
+  ...T.props(),
   value: {
     type: [String, Number]
   },
@@ -24,14 +24,14 @@ const A = {
 }, H = {
   name: "XTab",
   validators: {
-    ...x.validators()
+    ...T.validators()
   }
 }, te = /* @__PURE__ */ R({
   ...H,
   props: A,
   emits: ["remove"],
-  setup(T) {
-    const t = T, i = s(() => {
+  setup(x) {
+    const t = x, i = s(() => {
       var e, u;
       return ((u = (e = l.value) == null ? void 0 : e.$el) == null ? void 0 : u.href) || t.value;
     }), S = s(() => t.label || t.value), b = d(null), l = d(null), a = j(G, {
@@ -76,6 +76,7 @@ const A = {
     return (e, u) => (c(), m(L(e.to ? K : e.tag), {
       ref_key: "elRef",
       ref: l,
+      type: e.tag === "button" ? "button" : void 0,
       "data-value": i.value,
       to: e.to,
       color: r.value ? $.value : void 0,
@@ -141,7 +142,7 @@ const A = {
         ], 8, ["to"])) : p("", !0)
       ]),
       _: 3
-    }, 8, ["data-value", "to", "color", "style", "class", "aria-disabled", "aria-selected"]));
+    }, 8, ["type", "data-value", "to", "color", "style", "class", "aria-disabled", "aria-selected"]));
   }
 });
 export {