vlite3 1.1.2 → 1.1.4

package/components/NumberInput.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as E, ref as k, watch as q, computed as a, onBeforeUnmount as L, openBlock as v, createElementBlock as y, normalizeClass as u, withModifiers as i, createVNode as h, createCommentVNode as P, createElementVNode as p, withKeys as z } from "vue";
-import g from "./Icon.vue.js";
-const M = ["disabled"], U = ["value", "min", "max", "step", "placeholder", "disabled", "readonly", "onKeydown"], $ = ["disabled"], A = {
+import { defineComponent as E, ref as k, watch as q, computed as u, onBeforeUnmount as L, openBlock as v, createElementBlock as y, normalizeClass as i, withModifiers as r, createVNode as h, createCommentVNode as P, createElementVNode as g, withKeys as z } from "vue";
+import w from "./Icon.vue.js";
+const M = ["disabled", "data-testid"], U = ["value", "min", "max", "step", "placeholder", "disabled", "readonly", "onKeydown", "data-testid"], A = ["disabled", "data-testid"], D = {
   key: 2,
   class: "flex flex-col justify-center h-full py-[3px] pr-[3px]"
-}, D = { class: "flex flex-col h-full w-6 scale-80" }, G = ["disabled"], H = ["disabled"], Q = /* @__PURE__ */ E({
+}, G = { class: "flex flex-col h-full w-6 scale-80" }, H = ["disabled", "data-testid"], J = ["disabled", "data-testid"], W = /* @__PURE__ */ E({
   __name: "NumberInput",
   props: {
     modelValue: { default: void 0 },
@@ -21,24 +21,24 @@ const M = ["disabled"], U = ["value", "min", "max", "step", "placeholder", "disa
     rounded: { default: "md" }
   },
   emits: ["update:modelValue", "change", "focus", "blur"],
-  setup(t, { emit: V }) {
-    const n = t, m = V, d = k(n.modelValue ?? "");
+  setup(e, { emit: V }) {
+    const n = e, m = V, a = k(n.modelValue ?? "");
     q(
       () => n.modelValue,
-      (l) => {
-        l !== void 0 && (d.value = l);
+      (d) => {
+        d !== void 0 && (a.value = d);
       }
     );
-    const B = k(null), c = a(() => {
-      const l = {
+    const B = k(null), c = u(() => {
+      const d = {
         xs: { h: "h-7", text: "text-xs", px: "px-2", icon: "w-3 h-3" },
         sm: { h: "h-8", text: "text-xs", px: "px-2", icon: "w-3.5 h-3.5" },
         md: { h: "h-9", text: "text-sm", px: "px-3", icon: "w-4 h-4" },
         lg: { h: "h-10", text: "text-sm", px: "px-4", icon: "w-5 h-5" },
         xl: { h: "h-12", text: "text-lg", px: "px-5", icon: "w-6 h-6" }
       };
-      return l[n.size] || l.md;
-    }), j = a(() => ({
+      return d[n.size] || d.md;
+    }), j = u(() => ({
       none: "rounded-none",
       sm: "rounded-sm",
       md: "rounded-md",
@@ -46,7 +46,7 @@ const M = ["disabled"], U = ["value", "min", "max", "step", "placeholder", "disa
       xl: "rounded-xl",
       "2xl": "rounded-2xl",
       full: "rounded-full"
-    })[n.rounded] || "rounded-md"), I = a(() => ({
+    })[n.rounded] || "rounded-md"), I = u(() => ({
       none: "rounded-l-none",
       sm: "rounded-l-sm",
       md: "rounded-l-md",
@@ -54,7 +54,7 @@ const M = ["disabled"], U = ["value", "min", "max", "step", "placeholder", "disa
       xl: "rounded-l-xl",
       "2xl": "rounded-l-2xl",
       full: "rounded-l-full"
-    })[n.rounded] || "rounded-l-md"), S = a(() => ({
+    })[n.rounded] || "rounded-l-md"), S = u(() => ({
       none: "rounded-r-none",
       sm: "rounded-r-sm",
       md: "rounded-r-md",
@@ -62,7 +62,7 @@ const M = ["disabled"], U = ["value", "min", "max", "step", "placeholder", "disa
       xl: "rounded-r-xl",
       "2xl": "rounded-r-2xl",
       full: "rounded-r-full"
-    })[n.rounded] || "rounded-r-md"), F = a(() => [
+    })[n.rounded] || "rounded-r-md"), F = u(() => [
       "flex items-center w-full relative transition-all duration-200",
       n.disabled ? "opacity-50 cursor-not-allowed" : "",
       n.mode === "solid" ? "bg-muted" : "",
@@ -70,169 +70,174 @@ const M = ["disabled"], U = ["value", "min", "max", "step", "placeholder", "disa
       n.mode === "ghost" ? "bg-transparent" : "",
       c.value.h,
       j.value
-    ]), K = a(() => [
+    ]), K = u(() => [
       "flex-1 w-full bg-transparent focus:outline-none appearance-none",
       n.variant === "split" ? "text-center" : "text-left pl-3 pr-2",
       "placeholder:text-muted-foreground/50",
       c.value.text,
       n.disabled ? "cursor-not-allowed" : ""
-    ]), C = a(() => {
-      const l = "flex items-center justify-center transition-colors active:scale-95 shrink-0 select-none", e = n.disabled ? "" : "hover:text-primary hover:bg-muted/50";
+    ]), C = u(() => {
+      const d = "flex items-center justify-center transition-colors active:scale-95 shrink-0 select-none", t = n.disabled ? "" : "hover:text-primary hover:bg-muted/50";
       return n.size === "xs" || n.size, n.variant === "split" ? n.mode === "solid" ? [
-        l,
+        d,
         n.disabled ? "" : "hover:text-primary hover:bg-background/80",
         "bg-background shadow-sm rounded-full mx-1 my-0.5 aspect-square self-center h-[calc(100%-12px)] w-auto max-w-[calc(100%-12px)] flex items-center justify-center"
-      ] : [l, e, "h-full", "px-2"] : [l, e, "h-1/2 w-8 border-l border-input/50"];
-    }), s = (l) => {
+      ] : [d, t, "h-full", "px-2"] : [d, t, "h-1/2 w-8 border-l border-input/50"];
+    }), s = (d) => {
       if (n.disabled || n.readonly) return;
-      let e = l;
-      n.min !== void 0 && e < n.min && (e = n.min), n.max !== void 0 && e > n.max && (e = n.max), d.value = e, m("update:modelValue", e), m("change", e);
+      let t = d;
+      n.min !== void 0 && t < n.min && (t = n.min), n.max !== void 0 && t > n.max && (t = n.max), a.value = t, m("update:modelValue", t), m("change", t);
     };
-    let x = null, f = null;
-    const o = () => {
-      x && clearTimeout(x), f && clearInterval(f), x = null, f = null;
-    }, w = () => {
-      if (n.disabled || n.readonly || n.max !== void 0 && Number(d.value) >= n.max) {
-        o();
+    let b = null, x = null;
+    const l = () => {
+      b && clearTimeout(b), x && clearInterval(x), b = null, x = null;
+    }, $ = () => {
+      if (n.disabled || n.readonly || n.max !== void 0 && Number(a.value) >= n.max) {
+        l();
         return;
       }
-      const l = Number(d.value) || 0;
-      s(l + n.step);
+      const d = Number(a.value) || 0;
+      s(d + n.step);
     }, N = () => {
-      if (n.disabled || n.readonly || n.min !== void 0 && Number(d.value) <= n.min) {
-        o();
+      if (n.disabled || n.readonly || n.min !== void 0 && Number(a.value) <= n.min) {
+        l();
         return;
       }
-      const l = Number(d.value) || 0;
-      s(l - n.step);
-    }, b = (l, e) => {
-      e.button !== 0 && e.pointerType === "mouse" || (o(), l === "inc" ? w() : N(), x = setTimeout(() => {
-        f = setInterval(() => {
-          l === "inc" ? w() : N();
+      const d = Number(a.value) || 0;
+      s(d - n.step);
+    }, f = (d, t) => {
+      t.button !== 0 && t.pointerType === "mouse" || (l(), d === "inc" ? $() : N(), b = setTimeout(() => {
+        x = setInterval(() => {
+          d === "inc" ? $() : N();
         }, 50);
       }, 400));
-    }, R = (l) => {
-      const e = l.target, r = parseFloat(e.value);
-      if (isNaN(r)) {
-        d.value = e.value;
+    }, R = (d) => {
+      const t = d.target, o = parseFloat(t.value);
+      if (isNaN(o)) {
+        a.value = t.value;
         return;
       }
-      s(r);
-    }, T = (l) => {
-      m("blur", l);
-      const e = parseFloat(String(d.value));
-      isNaN(e) ? s(n.min || 0) : s(e);
+      s(o);
+    }, T = (d) => {
+      m("blur", d);
+      const t = parseFloat(String(a.value));
+      isNaN(t) ? s(n.min || 0) : s(t);
     };
     return L(() => {
-      o();
-    }), (l, e) => (v(), y("div", {
-      class: u([F.value, "overflow-hidden"])
+      l();
+    }), (d, t) => (v(), y("div", {
+      class: i([F.value, "overflow-hidden"])
     }, [
-      t.variant === "split" ? (v(), y("button", {
+      e.variant === "split" && !e.disabled && !e.readonly ? (v(), y("button", {
         key: 0,
         tabindex: "-1",
         type: "button",
-        class: u([
+        class: i([
           C.value,
-          t.mode === "outline" ? "border-r border-input" : "",
-          t.variant === "split" && t.mode !== "solid" ? I.value : ""
+          e.mode === "outline" ? "border-r border-input" : "",
+          e.variant === "split" && e.mode !== "solid" ? I.value : ""
         ]),
-        disabled: t.disabled || t.min !== void 0 && Number(d.value) <= t.min,
-        onPointerdown: e[0] || (e[0] = (r) => b("dec", r)),
-        onPointerup: o,
-        onPointerleave: o,
-        onPointercancel: o,
-        onContextmenu: e[1] || (e[1] = i(() => {
-        }, ["prevent"]))
+        disabled: e.disabled || e.min !== void 0 && Number(a.value) <= e.min,
+        onPointerdown: t[0] || (t[0] = (o) => f("dec", o)),
+        onPointerup: l,
+        onPointerleave: l,
+        onPointercancel: l,
+        onContextmenu: t[1] || (t[1] = r(() => {
+        }, ["prevent"])),
+        "data-testid": d.$attrs["data-testid"] ? `${d.$attrs["data-testid"]}-dec` : e.name ? `number-${e.name}-dec` : e.id ? `number-${e.id}-dec` : "number-input-dec"
       }, [
-        h(g, {
+        h(w, {
           icon: "lucide:minus",
-          class: u(c.value.icon)
+          class: i(c.value.icon)
         }, null, 8, ["class"])
       ], 42, M)) : P("", !0),
-      p("input", {
+      g("input", {
         ref_key: "inputRef",
         ref: B,
         type: "number",
-        value: d.value,
-        min: t.min,
-        max: t.max,
-        step: t.step,
-        placeholder: t.placeholder,
-        disabled: t.disabled,
-        readonly: t.readonly,
-        class: u(K.value),
+        value: a.value,
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        class: i(K.value),
         onInput: R,
-        onFocus: e[2] || (e[2] = (r) => m("focus", r)),
+        onFocus: t[2] || (t[2] = (o) => m("focus", o)),
         onBlur: T,
         onKeydown: [
-          z(i(w, ["prevent"]), ["up"]),
-          z(i(N, ["prevent"]), ["down"])
-        ]
+          z(r($, ["prevent"]), ["up"]),
+          z(r(N, ["prevent"]), ["down"])
+        ],
+        "data-testid": d.$attrs["data-testid"] || (e.name ? `number-${e.name}` : e.id ? `number-${e.id}` : "number-input")
       }, null, 42, U),
-      t.variant === "split" ? (v(), y("button", {
+      e.variant === "split" && !e.disabled && !e.readonly ? (v(), y("button", {
         key: 1,
         tabindex: "-1",
         type: "button",
-        class: u([
+        class: i([
           C.value,
-          t.mode === "outline" ? "border-l border-input" : "",
-          t.variant === "split" && t.mode !== "solid" ? S.value : ""
+          e.mode === "outline" ? "border-l border-input" : "",
+          e.variant === "split" && e.mode !== "solid" ? S.value : ""
         ]),
-        disabled: t.disabled || t.max !== void 0 && Number(d.value) >= t.max,
-        onPointerdown: e[3] || (e[3] = (r) => b("inc", r)),
-        onPointerup: o,
-        onPointerleave: o,
-        onPointercancel: o,
-        onContextmenu: e[4] || (e[4] = i(() => {
-        }, ["prevent"]))
+        disabled: e.disabled || e.max !== void 0 && Number(a.value) >= e.max,
+        onPointerdown: t[3] || (t[3] = (o) => f("inc", o)),
+        onPointerup: l,
+        onPointerleave: l,
+        onPointercancel: l,
+        onContextmenu: t[4] || (t[4] = r(() => {
+        }, ["prevent"])),
+        "data-testid": d.$attrs["data-testid"] ? `${d.$attrs["data-testid"]}-inc` : e.name ? `number-${e.name}-inc` : e.id ? `number-${e.id}-inc` : "number-input-inc"
       }, [
-        h(g, {
+        h(w, {
           icon: "lucide:plus",
-          class: u(c.value.icon)
+          class: i(c.value.icon)
         }, null, 8, ["class"])
-      ], 42, $)) : P("", !0),
-      t.variant === "stacked" ? (v(), y("div", A, [
-        p("div", D, [
-          p("button", {
+      ], 42, A)) : P("", !0),
+      e.variant === "stacked" && !e.disabled && !e.readonly ? (v(), y("div", D, [
+        g("div", G, [
+          g("button", {
             tabindex: "-1",
             type: "button",
             class: "flex-1 flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-muted-foreground hover:text-foreground rounded-t-[3px] border-b border-gray-300 transition-colors disabled:cursor-not-allowed",
-            disabled: t.disabled || t.max !== void 0 && Number(d.value) >= t.max,
-            onPointerdown: e[5] || (e[5] = (r) => b("inc", r)),
-            onPointerup: o,
-            onPointerleave: o,
-            onPointercancel: o,
-            onContextmenu: e[6] || (e[6] = i(() => {
-            }, ["prevent"]))
+            disabled: e.disabled || e.max !== void 0 && Number(a.value) >= e.max,
+            onPointerdown: t[5] || (t[5] = (o) => f("inc", o)),
+            onPointerup: l,
+            onPointerleave: l,
+            onPointercancel: l,
+            onContextmenu: t[6] || (t[6] = r(() => {
+            }, ["prevent"])),
+            "data-testid": d.$attrs["data-testid"] ? `${d.$attrs["data-testid"]}-inc` : e.name ? `number-${e.name}-inc` : e.id ? `number-${e.id}-inc` : "number-input-inc"
           }, [
-            h(g, {
-              class: u(["text-gray-700/85!", t.size === "xs" || t.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5"]),
+            h(w, {
+              class: i(["text-gray-700/85!", e.size === "xs" || e.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5"]),
               icon: "mynaui:chevron-up-solid"
             }, null, 8, ["class"])
-          ], 40, G),
-          p("button", {
+          ], 40, H),
+          g("button", {
             tabindex: "-1",
             type: "button",
             class: "flex-1 flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-muted-foreground hover:text-foreground rounded-b-[3px] transition-colors disabled:cursor-not-allowed",
-            disabled: t.disabled || t.min !== void 0 && Number(d.value) <= t.min,
-            onPointerdown: e[7] || (e[7] = (r) => b("dec", r)),
-            onPointerup: o,
-            onPointerleave: o,
-            onPointercancel: o,
-            onContextmenu: e[8] || (e[8] = i(() => {
-            }, ["prevent"]))
+            disabled: e.disabled || e.min !== void 0 && Number(a.value) <= e.min,
+            onPointerdown: t[7] || (t[7] = (o) => f("dec", o)),
+            onPointerup: l,
+            onPointerleave: l,
+            onPointercancel: l,
+            onContextmenu: t[8] || (t[8] = r(() => {
+            }, ["prevent"])),
+            "data-testid": d.$attrs["data-testid"] ? `${d.$attrs["data-testid"]}-dec` : e.name ? `number-${e.name}-dec` : e.id ? `number-${e.id}-dec` : "number-input-dec"
           }, [
-            h(g, {
-              class: u(["text-gray-700/85!", t.size === "xs" || t.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5"]),
+            h(w, {
+              class: i(["text-gray-700/85!", e.size === "xs" || e.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5"]),
               icon: "mynaui:chevron-down-solid"
             }, null, 8, ["class"])
-          ], 40, H)
+          ], 40, J)
         ])
       ])) : P("", !0)
     ], 2));
   }
 });
 export {
-  Q as default
+  W as default
 };

package/components/PricingPlan/PricingPlan.vue.d.ts

@@ -16,7 +16,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     variant: PricingPlanVariant;
     columns: number | string;
     modelValue: string | number | null;
-    items: PricingPlanItemSchema[];
     gap: number;
+    items: PricingPlanItemSchema[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/components/SidePanel.vue.js

@@ -1,7 +1,7 @@
 import o from "./SidePanel.vue2.js";
 /* empty css               */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-00b21f72"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-3446a690"]]);
 export {
-  f as default
+  m as default
 };

package/components/SidePanel.vue2.js

@@ -1,11 +1,11 @@
-import { defineComponent as D, ref as V, inject as j, computed as u, markRaw as K, watch as h, onMounted as M, onUnmounted as F, openBlock as l, createElementBlock as r, Fragment as L, createElementVNode as y, mergeProps as w, withModifiers as R, renderSlot as f, createCommentVNode as a, createBlock as v, Teleport as U, createVNode as k, Transition as x, withCtx as $, normalizeClass as c, toDisplayString as B, resolveDynamicComponent as q } from "vue";
+import { defineComponent as D, ref as L, inject as V, computed as f, markRaw as j, watch as h, onMounted as K, onUnmounted as M, openBlock as l, createElementBlock as d, Fragment as F, createElementVNode as y, mergeProps as w, withModifiers as R, renderSlot as c, createCommentVNode as a, createBlock as g, Teleport as U, createVNode as $, Transition as k, withCtx as x, normalizeClass as m, toDisplayString as B, resolveDynamicComponent as q } from "vue";
 import G from "./Button.vue.js";
 import { useKeyStroke as H } from "../composables/useKeyStroke.js";
 import { $t as T } from "../utils/i18n.js";
-const J = { class: "text-lg font-bold text-foreground" }, Q = {
+const J = ["data-testid"], Q = ["data-testid"], W = { class: "text-lg font-bold text-foreground" }, X = {
   key: 0,
   class: "mt-1 text-sm text-muted-foreground"
-}, _ = /* @__PURE__ */ D({
+}, te = /* @__PURE__ */ D({
   inheritAttrs: !1,
   __name: "SidePanel",
   props: {
@@ -30,51 +30,53 @@ const J = { class: "text-lg font-bold text-foreground" }, Q = {
   },
   emits: ["close", "update:show", "onOpen", "onAfterOpen", "onAfterClose"],
   setup(o, { emit: z }) {
-    const t = o, p = z, s = V(t.show);
-    let d = null;
-    const n = j("dropdown-context", null), b = u(() => t.body ? K(t.body) : void 0);
+    const t = o, v = z, s = L(t.show);
+    let u = null;
+    const i = V("dropdown-context", null), C = f(() => t.body ? j(t.body) : void 0);
     h(
       () => t.show,
       (e) => {
-        s.value = e, e && (p("onOpen"), n?.close());
+        s.value = e, e && (v("onOpen"), i?.close());
       }
     );
     const A = () => {
-      s.value = !0, n?.close();
-    }, i = () => {
-      s.value = !1, p("update:show", !1), p("close");
+      s.value = !0, i?.close();
+    }, n = () => {
+      s.value = !1, v("update:show", !1), v("close");
     }, O = () => {
-      t.closeOutside && i();
-    }, { onKeyStroke: I } = H();
-    I("Escape", i), h(s, (e) => {
-      d && clearTimeout(d), e ? (n?.onChildToggle?.(!0), document.body.style.overflow = "hidden") : (document.body.style.overflow = "", d = setTimeout(() => {
-        n?.onChildToggle?.(!1);
+      t.closeOutside && n();
+    }, { onKeyStroke: S } = H();
+    S("Escape", n), h(s, (e) => {
+      u && clearTimeout(u), e ? (i?.onChildToggle?.(!0), document.body.style.overflow = "hidden") : (document.body.style.overflow = "", u = setTimeout(() => {
+        i?.onChildToggle?.(!1);
       }, 300));
+    }), K(() => {
+      s.value && i?.onChildToggle?.(!0);
     }), M(() => {
-      s.value && n?.onChildToggle?.(!0);
-    }), F(() => {
-      d && clearTimeout(d), s.value && n?.onChildToggle?.(!1), document.body.style.overflow = "";
+      u && clearTimeout(u), s.value && i?.onChildToggle?.(!1), document.body.style.overflow = "";
     });
-    const S = {
+    const I = {
       sm: "max-w-sm",
       md: "max-w-md",
       lg: "max-w-lg",
       xl: "max-w-xl",
       full: "max-w-full"
-    }, E = u(() => t.position === "left" ? "left-0" : "right-0"), N = u(() => t.position === "left" ? "slide-left" : "slide-right"), C = u(() => t.titleI18n ? T(t.titleI18n) : t.title), g = u(
+    }, E = f(() => t.position === "left" ? "left-0" : "right-0"), N = f(() => t.position === "left" ? "slide-left" : "slide-right"), r = f(() => t.titleI18n ? T(t.titleI18n) : t.title), b = f(
       () => t.descriptionI18n ? T(t.descriptionI18n) : t.description
     );
-    return (e, m) => (l(), r(L, null, [
+    return (e, p) => (l(), d(F, null, [
       y("span", w({
         onClick: R(A, ["stop"]),
         class: `${o.triggerClass}`
-      }, e.$attrs), [
-        f(e.$slots, "trigger", {}, () => [
-          o.body ? f(e.$slots, "default", { key: 0 }, void 0, !0) : a("", !0)
+      }, e.$attrs, {
+        "data-testid": e.$attrs["data-testid"] ? `${e.$attrs["data-testid"]}-trigger` : r.value ? `sidepanel-trigger-${r.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : "sidepanel-trigger"
+      }), [
+        c(e.$slots, "trigger", {}, () => [
+          o.body ? c(e.$slots, "default", { key: 0 }, void 0, !0) : a("", !0)
         ], !0)
-      ], 16),
-      (l(), v(U, { to: "body" }, [
-        k(x, {
+      ], 16, J),
+      (l(), g(U, { to: "body" }, [
+        $(k, {
           "enter-active-class": "transition-opacity duration-300 ease-out",
           "enter-from-class": "opacity-0",
           "enter-to-class": "opacity-100",
@@ -82,60 +84,64 @@ const J = { class: "text-lg font-bold text-foreground" }, Q = {
           "leave-from-class": "opacity-100",
           "leave-to-class": "opacity-0"
         }, {
-          default: $(() => [
-            s.value ? (l(), r("div", {
+          default: x(() => [
+            s.value ? (l(), d("div", {
               key: 0,
-              class: c(["fixed inset-0 z-50 v-sidepanel-overlay", o.overlayClass]),
+              class: m(["fixed inset-0 z-50 v-sidepanel-overlay", o.overlayClass]),
               onClick: O
             }, null, 2)) : a("", !0)
           ]),
           _: 1
         }),
-        k(x, {
+        $(k, {
           name: N.value,
-          onAfterEnter: m[0] || (m[0] = (P) => e.$emit("onAfterOpen")),
-          onAfterLeave: m[1] || (m[1] = (P) => e.$emit("onAfterClose"))
+          onAfterEnter: p[0] || (p[0] = (P) => e.$emit("onAfterOpen")),
+          onAfterLeave: p[1] || (p[1] = (P) => e.$emit("onAfterClose"))
         }, {
-          default: $(() => [
-            s.value ? (l(), r("div", {
+          default: x(() => [
+            s.value ? (l(), d("div", {
               key: 0,
-              class: c(["sidepanel-body fixed inset-y-0 z-50 flex flex-col bg-body shadow-sm border transition-transform duration-300 ease-in-out w-full", [S[o.size], E.value, t.class]])
+              role: "dialog",
+              "aria-modal": "true",
+              class: m(["sidepanel-body fixed inset-y-0 z-50 flex flex-col bg-body shadow-sm border transition-transform duration-300 ease-in-out w-full", [I[o.size], E.value, t.class]]),
+              "data-testid": e.$attrs["data-testid"] || (r.value ? `sidepanel-${r.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : "sidepanel")
             }, [
-              C.value || e.$slots.header ? (l(), r("div", {
+              r.value || e.$slots.header ? (l(), d("div", {
                 key: 0,
-                class: c([o.headerClass, "flex-none flex items-center justify-between px-5 py-2 border-b border-border"])
+                class: m([o.headerClass, "flex-none flex items-center justify-between px-5 py-2 border-b border-border"])
               }, [
-                f(e.$slots, "header", {}, () => [
+                c(e.$slots, "header", {}, () => [
                   y("div", null, [
-                    y("h3", J, B(C.value), 1),
-                    g.value ? (l(), r("p", Q, B(g.value), 1)) : a("", !0)
+                    y("h3", W, B(r.value), 1),
+                    b.value ? (l(), d("p", X, B(b.value), 1)) : a("", !0)
                   ])
                 ], !0),
-                o.hideCloseButton ? a("", !0) : (l(), v(G, {
+                o.hideCloseButton ? a("", !0) : (l(), g(G, {
                   key: 0,
                   rounded: "full",
                   size: "sm",
                   variant: "ghost",
                   icon: "lucide:x",
-                  onClick: i,
-                  class: "-mr-2"
+                  onClick: n,
+                  class: "-mr-2",
+                  "data-testid": "sidepanel-close-btn"
                 }))
               ], 2)) : a("", !0),
               y("div", {
-                class: c(["flex-1 overflow-y-auto px-6 py-4 scrollbar-thin scrollbar-stable", o.bodyClass])
+                class: m(["flex-1 overflow-y-auto px-6 py-4 scrollbar-thin scrollbar-stable", o.bodyClass])
               }, [
-                b.value ? (l(), v(q(b.value), w({ key: 0 }, { ...o.bodyProps, ...e.$attrs }, { close: i }), null, 16)) : f(e.$slots, "default", {
+                C.value ? (l(), g(q(C.value), w({ key: 0 }, { ...o.bodyProps, ...e.$attrs }, { close: n }), null, 16)) : c(e.$slots, "default", {
                   key: 1,
-                  close: i
+                  close: n
                 }, void 0, !0)
               ], 2),
-              e.$slots.footer ? (l(), r("div", {
+              e.$slots.footer ? (l(), d("div", {
                 key: 1,
-                class: c(["flex-none px-6 py-3 border-t border-border", o.footerClass])
+                class: m(["flex-none px-6 py-3 border-t border-border", o.footerClass])
               }, [
-                f(e.$slots, "footer", { close: i }, void 0, !0)
+                c(e.$slots, "footer", { close: n }, void 0, !0)
               ], 2)) : a("", !0)
-            ], 2)) : a("", !0)
+            ], 10, Q)) : a("", !0)
           ]),
           _: 3
         }, 8, ["name"])
@@ -144,5 +150,5 @@ const J = { class: "text-lg font-bold text-foreground" }, Q = {
   }
 });
 export {
-  _ as default
+  te as default
 };