@indielayer/ui 1.2.0 → 1.4.0

package/lib/components/spinner/Spinner.vue.js

@@ -1,28 +1,27 @@
-import { defineComponent as t, openBlock as r, createBlock as n } from "vue";
-import { useCommon as o } from "../../composables/common.js";
-import i from "../icon/Icon.vue.js";
-const a = {
-  ...o.props(),
+import { defineComponent as r, openBlock as e, createBlock as n } from "vue";
+import { useCommon as t } from "../../composables/useCommon.js";
+import a from "../icon/Icon.vue.js";
+const i = {
+  ...t.props(),
   icon: {
     type: String,
-    default: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.5s" repeatCount="indefinite"/></path></g></g>'
+    default: '<g stroke-width="0"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.65s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g>'
   }
-}, s = {
+}, p = {
   name: "XSpinner",
   validators: {
-    ...o.validators()
+    ...t.validators()
   }
-}, d = /* @__PURE__ */ t({
-  ...s,
-  props: a,
-  setup(p) {
-    return (e, c) => (r(), n(i, {
-      icon: e.icon,
-      size: e.size,
-      "view-box": "0 0 38 38"
+}, u = /* @__PURE__ */ r({
+  ...p,
+  props: i,
+  setup(s) {
+    return (o, m) => (e(), n(a, {
+      icon: o.icon,
+      size: o.size
     }, null, 8, ["icon", "size"]));
   }
 });
 export {
-  d as default
+  u as default
 };

package/lib/components/stepper/Stepper.vue.d.ts

@@ -0,0 +1,137 @@
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const validators: {
+    variant: readonly ["line"];
+    size: string[];
+};
+declare const stepperProps: {
+    modelValue: (StringConstructor | NumberConstructor)[];
+    steps: {
+        type: PropType<StepperStep[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<"line">;
+        default: string;
+    };
+    grow: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconPristine: StringConstructor;
+    iconComplete: StringConstructor;
+    iconIncomplete: StringConstructor;
+    iconCurrent: StringConstructor;
+    iconError: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type StepperStepStatus = 'pristine' | 'complete' | 'incomplete' | 'error';
+export type StepperStep = {
+    status: StepperStepStatus;
+    label: string;
+    description: string;
+    disabled?: boolean;
+};
+export type StepperVariant = typeof validators.variant[number];
+export type StepperProps = ExtractPublicPropTypes<typeof stepperProps>;
+type InternalClasses = 'wrapper' | 'list' | 'scroller' | 'content' | 'step' | 'label' | 'icon';
+export interface StepperTheme extends ThemeComponent<StepperProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modelValue: (StringConstructor | NumberConstructor)[];
+    steps: {
+        type: PropType<StepperStep[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<"line">;
+        default: string;
+    };
+    grow: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconPristine: StringConstructor;
+    iconComplete: StringConstructor;
+    iconIncomplete: StringConstructor;
+    iconCurrent: StringConstructor;
+    iconError: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: (StringConstructor | NumberConstructor)[];
+    steps: {
+        type: PropType<StepperStep[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<"line">;
+        default: string;
+    };
+    grow: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconPristine: StringConstructor;
+    iconComplete: StringConstructor;
+    iconIncomplete: StringConstructor;
+    iconCurrent: StringConstructor;
+    iconError: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: string;
+    size: import("../../composables/useCommon").Size;
+    variant: "line";
+    steps: StepperStep[];
+    grow: boolean;
+    fullWidth: boolean;
+    interactive: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,128 @@
+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 { useCommon as v } from "../../composables/useCommon.js";
+import { useColors as $ } from "../../composables/useColors.js";
+import { useTheme as D } from "../../composables/useTheme.js";
+import X from "../scroll/Scroll.vue.js";
+import A from "../icon/Icon.vue.js";
+import { stepperIncompleteIcon as F, errorIcon as L, successIcon as T, stepperPristineIcon as W } from "../../common/icons.js";
+const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" }, G = { class: "grid text-left" }, H = { class: "text-sm truncate" }, J = {
+  key: 0,
+  class: "text-xs text-gray-500"
+}, K = {
+  ...v.validators(),
+  variant: ["line"]
+}, M = {
+  ...v.props(),
+  ...$.props("primary"),
+  modelValue: [String, Number],
+  steps: {
+    type: Array,
+    default: () => []
+  },
+  variant: {
+    type: String,
+    default: "line"
+  },
+  grow: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: !0
+  },
+  interactive: {
+    type: Boolean,
+    default: !0
+  },
+  iconPristine: String,
+  iconComplete: String,
+  iconIncomplete: String,
+  iconCurrent: String,
+  iconError: String
+}, O = {
+  name: "XStepper",
+  validators: K
+}, se = /* @__PURE__ */ I({
+  ...O,
+  props: M,
+  emits: ["update:modelValue"],
+  setup(y, { emit: g }) {
+    const l = y, _ = g, b = c(null), S = c(null), h = c(null);
+    function k(t, a) {
+      t.disabled || !l.interactive || _("update:modelValue", a);
+    }
+    function C(t, a) {
+      return t.status === "incomplete" ? l.iconIncomplete || F : t.status === "error" ? l.iconError || L : t.status === "complete" ? l.iconComplete || T : l.iconPristine || W;
+    }
+    const { styles: w, classes: n, className: x } = D("Stepper", {}, l);
+    return (t, a) => (i(), d("div", null, [
+      r("div", {
+        ref_key: "wrapperRef",
+        ref: S,
+        class: s(["relative", [
+          o(x),
+          o(n).wrapper
+        ]]),
+        style: B(o(w))
+      }, [
+        u(X, {
+          ref_key: "scrollRef",
+          ref: b,
+          scrollbar: !1,
+          horizontal: "",
+          mousewheel: "",
+          class: s(o(n).scroller)
+        }, {
+          default: p(() => [
+            r("div", {
+              ref_key: "stepperRef",
+              ref: h,
+              class: s(["relative", o(n).list])
+            }, [
+              (i(!0), d(R, null, V(t.steps, (e, m) => (i(), N(z(t.interactive ? "button" : "div"), {
+                key: m,
+                class: s([o(n).step, {
+                  "cursor-pointer": t.interactive && !e.disabled,
+                  "text-gray-400 dark:text-gray-600": e.disabled,
+                  "flex-1": t.grow
+                }]),
+                disabled: e.disabled || !t.interactive,
+                onClick: (Q) => k(e, m)
+              }, {
+                default: p(() => [
+                  r("div", j, [
+                    r("div", {
+                      class: s(["h-0.5 w-full mb-2", [e.status === "complete" || e.status === "incomplete" ? "bg-primary-500" : "bg-gray-200 dark:bg-gray-700"]])
+                    }, null, 2),
+                    r("div", q, [
+                      u(A, {
+                        icon: C(e),
+                        size: "sm",
+                        class: s([o(n).icon, {
+                          "text-primary-500": e.status === "complete" || e.status === "incomplete",
+                          "text-error-500": e.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)
+                      ])
+                    ])
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["class", "disabled", "onClick"]))), 128))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["class"])
+      ], 6),
+      r("div", {
+        class: s(o(n).content)
+      }, [
+        P(t.$slots, "default")
+      ], 2)
+    ]));
+  }
+});
+export {
+  se as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./Stepper.vue.js";
+export {
+  f as default
+};

package/lib/components/stepper/__tests__/Stepper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as XStepper } from './Stepper.vue';
+export type { StepperProps, StepperVariant, StepperTheme, } from './Stepper.vue';

package/lib/components/stepper/theme/Stepper.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { StepperTheme } from '../Stepper.vue';
+declare const theme: StepperTheme;
+export default theme;

package/lib/components/stepper/theme/Stepper.base.theme.js

@@ -0,0 +1,20 @@
+const r = {
+  classes: {
+    wrapper: "",
+    scroller: ({ props: s }) => {
+      const t = [""];
+      return s.fullWidth || t.push("!w-fit"), t;
+    },
+    list: ({ props: s }) => ["flex min-w-full w-fit items-start"],
+    step: ({ props: s, data: t }) => {
+      const e = [""];
+      return s.grow || e.push("w-[8rem]"), e;
+    },
+    label: ({ props: s, data: t }) => [""],
+    icon: ({ props: s, data: t }) => ["mr-2 mt-0.5"],
+    content: "mt-2 mb-4"
+  }
+}, c = r;
+export {
+  c as default
+};

package/lib/components/stepper/theme/Stepper.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { StepperTheme } from '../Stepper.vue';
+declare const theme: StepperTheme;
+export default theme;

package/lib/components/stepper/theme/Stepper.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Stepper.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/tab/Tab.vue.d.ts

@@ -1,5 +1,7 @@
 import { type ExtractPublicPropTypes } from 'vue';
-import { type Size } from '../../composables/common';
+import { type Size } from '../../composables/useCommon';
+import { type ThemeComponent } from '../../composables/useTheme';
+import type { TabGroupInjection } from './TabGroup.vue';
 declare const tabProps: {
     value: {
         type: (StringConstructor | NumberConstructor)[];
@@ -13,6 +15,7 @@ declare const tabProps: {
     icon: StringConstructor;
     disabled: BooleanConstructor;
     exact: BooleanConstructor;
+    removable: BooleanConstructor;
     size: {
         readonly type: import("vue").PropType<Size>;
         readonly default: "md";
@@ -20,6 +23,12 @@ declare const tabProps: {
     };
 };
 export type TabProps = ExtractPublicPropTypes<typeof tabProps>;
+type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon' | 'tabpanel';
+type InternalExtraData = {
+    selected: boolean;
+} & Pick<TabGroupInjection, 'state'>['state'];
+export interface TabTheme extends ThemeComponent<TabProps, InternalClasses, InternalExtraData> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
@@ -33,12 +42,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: StringConstructor;
     disabled: BooleanConstructor;
     exact: BooleanConstructor;
+    removable: BooleanConstructor;
     size: {
         readonly type: import("vue").PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove"[], "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
     };
@@ -51,16 +61,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: StringConstructor;
     disabled: BooleanConstructor;
     exact: BooleanConstructor;
+    removable: BooleanConstructor;
     size: {
         readonly type: import("vue").PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}>>, {
+}>> & {
+    onRemove?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
+    tag: string;
+    removable: boolean;
     size: Size;
     exact: boolean;
-    tag: string;
 }, {}>, {
     tab?(_: {
         label: string | undefined;

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

@@ -1,42 +1,44 @@
-import { defineComponent as j, computed as r, ref as n, inject as B, reactive as N, onMounted as R, openBlock as m, createBlock as f, resolveDynamicComponent as D, normalizeStyle as L, unref as l, normalizeClass as p, withCtx as V, renderSlot as y, createElementVNode as g, createCommentVNode as x, toDisplayString as E, Teleport as M } from "vue";
-import { useMutationObserver as O } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
-import { injectTabKey as P } from "../../composables/keys.js";
-import { useCommon as h } from "../../composables/common.js";
-import { useTheme as X } from "../../composables/theme.js";
-import F from "../icon/Icon.vue.js";
-import K from "../link/Link.vue.js";
-import q from "./Tab.theme.js";
-const A = { class: "flex items-center justify-center" }, G = {
-  ...h.props(),
+import { defineComponent as R, computed as s, ref as v, inject as j, reactive as D, onMounted as L, openBlock as d, createBlock as m, resolveDynamicComponent as V, normalizeStyle as E, unref as o, normalizeClass as c, withCtx as M, renderSlot as x, createElementVNode as f, createCommentVNode as k, toDisplayString as O, Teleport as P } from "vue";
+import { useMutationObserver as X } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { injectTabGroupKey as F } from "../../composables/keys.js";
+import { useCommon as C } from "../../composables/useCommon.js";
+import { useTheme as G } from "../../composables/useTheme.js";
+import z from "../icon/Icon.vue.js";
+import I from "../link/Link.vue.js";
+import { closeIcon as K } from "../../common/icons.js";
+const q = {
+  ...C.props(),
   value: {
     type: [String, Number]
   },
   tag: {
     type: String,
-    default: "div"
+    default: "button"
   },
   to: [String, Object],
   label: String,
   icon: String,
   disabled: Boolean,
-  exact: Boolean
-}, H = {
+  exact: Boolean,
+  removable: Boolean
+}, A = {
   name: "XTab",
   validators: {
-    ...h.validators()
+    ...C.validators()
   }
-}, ee = /* @__PURE__ */ j({
-  ...H,
-  props: G,
-  setup(z) {
-    const t = z, i = r(() => {
-      var e, d;
-      return ((d = (e = o.value) == null ? void 0 : e.$el) == null ? void 0 : d.href) || t.value;
-    }), C = r(() => t.label || t.value), c = n(null), o = n(null), a = B(P, {
-      tabsContentRef: n(null),
+}, ee = /* @__PURE__ */ R({
+  ...A,
+  props: q,
+  emits: ["remove"],
+  setup(T) {
+    const t = T, 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), p = v(null), l = v(null), a = j(F, {
+      tabsContentRef: v(null),
       activateTab: () => {
       },
-      state: N({
+      state: D({
         active: void 0,
         variant: "line",
         ghost: !1,
@@ -45,80 +47,97 @@ const A = { class: "flex items-center justify-center" }, G = {
         size: "md",
         color: "primary"
       })
-    }), b = r(() => a.state.exact || t.exact), u = r(() => t.size || a.state.size);
-    R(() => {
-      c.value = a.tabsContentRef.value, t.to && o.value && (k(), O(o.value.$el, k, {
+    }), g = s(() => a.state.exact || t.exact), b = s(() => t.size || a.state.size);
+    L(() => {
+      p.value = a.tabsContentRef.value, t.to && l.value && (y(), X(l.value.$el, y, {
         attributes: !0,
         attributeFilter: ["class"]
       }));
     });
-    function k() {
-      o.value && o.value.$el && t.to && o.value.$el.classList.contains(b.value ? "router-link-exact-active" : "router-link-active") && a.activateTab(i.value);
+    function y() {
+      l.value && l.value.$el && t.to && l.value.$el.classList.contains(g.value ? "router-link-exact-active" : "router-link-active") && a.activateTab(i.value);
     }
-    const s = r(() => a.state.active === i.value), S = r(() => a.state.color);
-    function T(e) {
+    const r = s(() => a.state.active === i.value), h = s(() => a.state.color);
+    function $(e) {
       if (t.disabled) {
         e.preventDefault(), e.stopPropagation();
         return;
       }
-      !t.to && i.value && a.activateTab(i.value);
+      !t.to && typeof i.value < "u" && a.activateTab(i.value);
     }
-    const { styles: $, classes: v, className: w } = X("tab", q, n({
+    const { styles: w, classes: n, className: B } = G("Tab", {}, v({
       ...t,
-      size: u.value,
-      exact: b.value
-    }), a.state);
-    return (e, d) => (m(), f(D(e.to ? K : e.tag), {
+      size: b.value,
+      exact: g.value
+    }), {
+      ...a.state,
+      selected: r
+    });
+    return (e, u) => (d(), m(V(e.to ? I : e.tag), {
       ref_key: "elRef",
-      ref: o,
+      ref: l,
       "data-value": i.value,
       to: e.to,
-      color: s.value ? S.value : void 0,
-      style: L([
-        l($),
-        e.to && s.value && l(a).state.variant === "block" ? "--x-link-text: var(--x-tabs-text); --x-link-text-hover: var(--x-tabs-text);" : ""
+      color: r.value ? h.value : void 0,
+      style: E([
+        o(w),
+        e.to && r.value && o(a).state.variant === "block" ? "--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);" : ""
       ]),
-      class: p([
-        l(w),
-        l(v).wrapper,
-        "shrink-0 font-medium",
+      class: c([
+        o(B),
+        o(n).wrapper,
+        "shrink-0",
         {
-          "flex-1": l(a).state.grow,
-          "text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-tabs-dark-text)]": s.value,
+          "flex-1": o(a).state.grow,
+          "text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]": r.value,
           "cursor-pointer": !e.disabled,
           "cursor-not-allowed": e.disabled,
-          "cursor-not-allowed text-gray-500": e.disabled && !s.value
+          "cursor-not-allowed text-gray-500": e.disabled && !r.value
         }
       ]),
       "aria-disabled": e.disabled ? "true" : void 0,
-      "aria-selected": s.value ? "true" : "false",
-      onClick: T
+      "aria-selected": r.value ? "true" : "false",
+      onClick: $
     }, {
-      default: V(() => [
-        y(e.$slots, "tab", {
+      default: M(() => [
+        x(e.$slots, "tab", {
           label: e.label,
           value: e.value,
-          size: u.value,
+          size: b.value,
           icon: e.icon
         }, () => [
-          g("div", A, [
-            e.icon ? (m(), f(F, {
+          f("div", {
+            class: c(o(n).content)
+          }, [
+            e.icon ? (d(), m(z, {
               key: 0,
               icon: e.icon,
-              size: u.value,
-              class: p(l(v).icon)
-            }, null, 8, ["icon", "size", "class"])) : x("", !0),
-            g("div", {
-              class: p(l(v).label)
-            }, E(C.value), 3)
-          ])
+              size: b.value,
+              class: c(o(n).icon)
+            }, null, 8, ["icon", "size", "class"])) : k("", !0),
+            f("div", {
+              class: c(o(n).label)
+            }, O(S.value), 3),
+            e.removable ? (d(), m(z, {
+              key: 1,
+              size: "sm",
+              icon: o(K),
+              class: "ml-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-500 transition-colors duration-150",
+              onClick: u[0] || (u[0] = (N) => e.$emit("remove", N))
+            }, null, 8, ["icon"])) : k("", !0)
+          ], 2)
         ]),
-        s.value && c.value ? (m(), f(M, {
+        r.value && p.value ? (d(), m(P, {
           key: 0,
-          to: c.value
+          to: p.value
         }, [
-          y(e.$slots, "default")
-        ], 8, ["to"])) : x("", !0)
+          f("div", {
+            role: "tabpanel",
+            class: c(o(n).tabpanel)
+          }, [
+            x(e.$slots, "default")
+          ], 2)
+        ], 8, ["to"])) : k("", !0)
       ]),
       _: 3
     }, 8, ["data-value", "to", "color", "style", "class", "aria-disabled", "aria-selected"]));