@indielayer/ui 1.3.0 → 1.4.0

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

@@ -1,126 +1,179 @@
-import { defineComponent as B, ref as f, watch as k, openBlock as l, createBlock as h, Teleport as z, createElementBlock as n, normalizeStyle as S, unref as o, normalizeClass as i, createCommentVNode as r, createElementVNode as p, createVNode as E, renderSlot as c, withCtx as N } from "vue";
-import { onClickOutside as _, useEventListener as I } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
-import { useTheme as M } from "../../composables/useTheme.js";
-import { closeIcon as O } from "../../common/icons.js";
-import R from "../scroll/Scroll.vue.js";
-import X from "../icon/Icon.vue.js";
-const j = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, D = ["xs", "sm", "md", "lg", "xl", "full"], K = {
+import { defineComponent as X, ref as f, watch as g, nextTick as B, useSlots as j, computed as H, openBlock as l, createBlock as p, Teleport as I, createElementBlock as i, normalizeStyle as M, unref as o, normalizeClass as a, createCommentVNode as s, createElementVNode as S, resolveDynamicComponent as P, withCtx as w, renderSlot as r, toDisplayString as v } from "vue";
+import { onClickOutside as W, useEventListener as K } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useTheme as L } from "../../composables/useTheme.js";
+import { useFocusTrap as q } from "../../composables/useFocusTrap.js";
+import { closeIcon as G } from "../../common/icons.js";
+import J from "../button/Button.vue.js";
+import Q from "../scroll/Scroll.vue.js";
+import U from "../form/Form.vue.js";
+const Y = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, Z = { key: 0 }, _ = ["xs", "sm", "md", "lg", "xl", "full"], x = {
   size: {
     type: String,
-    default: "md"
+    default: "xl"
   },
   modelValue: Boolean,
   showClose: Boolean,
-  backdrop: Boolean
-}, L = {
+  backdrop: Boolean,
+  hasActions: {
+    type: Boolean,
+    default: !0
+  },
+  hasHeader: {
+    type: Boolean,
+    default: !0
+  },
+  title: String,
+  description: String,
+  label: String,
+  loading: Boolean,
+  loadingText: String,
+  fluid: Boolean,
+  // form props
+  isForm: Boolean,
+  formDisabled: Boolean,
+  formDescription: String,
+  formTitle: String,
+  formAutoValidate: {
+    type: Boolean,
+    default: !0
+  },
+  formErrors: {
+    type: [Array, Object],
+    default: () => []
+  }
+}, ee = {
   name: "XModal",
   validators: {
-    size: D
+    size: _
   }
-}, J = /* @__PURE__ */ B({
-  ...L,
-  props: K,
-  emits: ["update:modelValue"],
-  setup(b, { expose: g, emit: w }) {
-    const m = b, y = w, t = f(m.modelValue), a = f(!1), v = f(null);
-    let u;
-    k(t, (e) => {
-      u && (u(), u = void 0), e && setTimeout(() => {
-        u = _(v, d);
+}, ue = /* @__PURE__ */ X({
+  ...ee,
+  props: x,
+  emits: ["update:modelValue", "submit"],
+  setup(V, { expose: $, emit: T }) {
+    const u = V, b = T, d = f(u.modelValue), n = f(!1), y = f(null), C = f(null), { initFocusTrap: D, clearFocusTrap: z } = q();
+    let m;
+    g(d, (e) => {
+      m && (m(), m = void 0), e && setTimeout(() => {
+        m = W(y, c);
       });
-    }), k(() => m.modelValue, (e) => {
-      e ? (t.value = e, setTimeout(() => {
-        a.value = e;
-      })) : (a.value = e, setTimeout(() => {
-        t.value = e;
-      }, 150));
-    }), typeof window < "u" && I(document, "keydown", C);
-    function C(e) {
-      e.key === "Escape" && t.value && d();
+    }), g(() => u.modelValue, E, { immediate: !0 });
+    async function E() {
+      const e = u.modelValue;
+      e ? (d.value = e, await B(), n.value = e, await B(), D(y), document.body.style.overflow = "hidden") : (n.value = e, d.value = e, z(), document.body.style.overflow = "auto");
     }
-    function d() {
-      a.value = !1, setTimeout(() => {
-        t.value = !1, y("update:modelValue", !1);
+    typeof window < "u" && K(document, "keydown", A);
+    function A(e) {
+      e.key === "Escape" && d.value && c();
+    }
+    function c() {
+      n.value = !1, setTimeout(() => {
+        b("update:modelValue", !1);
       }, 150);
     }
-    function V() {
-      t.value = !0, y("update:modelValue", !0), setTimeout(() => {
-        a.value = !0;
-      });
+    function F() {
+      b("update:modelValue", !0), n.value = !0;
     }
-    const { styles: $, classes: s, className: T } = M("Modal", {}, m);
-    return g({ open: V, close: d }), (e, P) => (l(), h(z, { to: "body" }, [
-      t.value ? (l(), n("div", {
+    const k = j(), R = H(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: t, className: O } = L("Modal", {}, u, {
+      visible: n
+    });
+    return $({ open: F, close: c }), (e, h) => (l(), p(I, { to: "body" }, [
+      d.value ? (l(), i("div", {
         key: 0,
-        style: S(o($)),
-        class: i([
-          o(T),
-          o(s).wrapper,
-          a.value ? "visible" : "invisible ease-in duration-100"
+        ref_key: "modalWrapperRef",
+        ref: C,
+        style: M(o(N)),
+        class: a([
+          o(O),
+          o(t).wrapper,
+          n.value ? "visible" : "invisible ease-in duration-100"
         ])
       }, [
-        e.backdrop ? (l(), n("div", {
+        e.backdrop ? (l(), i("div", {
           key: 0,
-          class: i([
-            o(s).backdrop,
-            a.value ? "ease-out duration-200 opacity-30 dark:opacity-70" : "ease-in duration-100 opacity-0"
-          ])
-        }, null, 2)) : r("", !0),
-        p("div", j, [
-          p("div", {
+          class: a(o(t).backdrop)
+        }, null, 2)) : s("", !0),
+        S("div", Y, [
+          (l(), p(P(e.isForm ? U : "div"), {
             ref_key: "modalRef",
-            ref: v,
-            class: i([
-              o(s).modal,
-              a.value ? "ease-out duration-200 opacity-100 translate-y-0 sm:scale-100" : "ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            ]),
+            ref: y,
+            disabled: e.formDisabled,
+            "auto-validate": e.formAutoValidate,
+            title: e.formTitle,
+            description: e.formDescription,
+            errors: e.formErrors,
+            class: a(o(t).modal),
+            "auto-focus": "",
+            "has-footer": !1,
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": "modal-headline"
-          }, [
-            e.showClose ? (l(), n("div", {
-              key: 0,
-              class: i([
-                o(s).closeIcon,
-                e.$slots.image ? "bg-gray-900 text-white" : "bg-gray-500 text-gray-800 dark:text-gray-300"
-              ]),
-              onClick: d
-            }, [
-              E(X, { icon: o(O) }, null, 8, ["icon"])
-            ], 2)) : r("", !0),
-            c(e.$slots, "image"),
-            e.$slots.header ? (l(), n("div", {
-              key: 1,
-              class: i(o(s).header)
-            }, [
-              c(e.$slots, "header")
-            ], 2)) : r("", !0),
-            e.$slots.default ? (l(), h(R, {
-              key: 2,
-              scrollbar: !1,
-              vertical: ""
-            }, {
-              default: N(() => [
-                p("div", {
-                  class: i(o(s).content)
-                }, [
-                  c(e.$slots, "default")
-                ], 2)
-              ]),
-              _: 3
-            })) : r("", !0),
-            e.$slots.actions ? (l(), n("div", {
-              key: 3,
-              class: i(o(s).actions)
-            }, [
-              c(e.$slots, "actions")
-            ], 2)) : r("", !0)
-          ], 2)
+            "aria-labelledby": "modal-headline",
+            onSubmit: h[0] || (h[0] = (oe) => e.$emit("submit"))
+          }, {
+            default: w(() => [
+              r(e.$slots, "image"),
+              e.hasHeader ? (l(), i("div", {
+                key: 0,
+                class: a(o(t).header)
+              }, [
+                r(e.$slots, "header", {}, () => [
+                  e.label ? (l(), i("div", {
+                    key: 0,
+                    class: a(o(t).label)
+                  }, v(e.label), 3)) : s("", !0),
+                  e.title ? (l(), i("div", {
+                    key: 1,
+                    class: a(o(t).title)
+                  }, v(e.title), 3)) : s("", !0)
+                ])
+              ], 2)) : s("", !0),
+              e.$slots.default ? (l(), p(Q, {
+                key: 1,
+                scrollbar: !1,
+                vertical: ""
+              }, {
+                default: w(() => [
+                  S("div", {
+                    class: a(o(t).content)
+                  }, [
+                    e.description ? (l(), i("div", {
+                      key: 0,
+                      class: a(o(t).description)
+                    }, v(e.description), 3)) : s("", !0),
+                    r(e.$slots, "default")
+                  ], 2)
+                ]),
+                _: 3
+              })) : s("", !0),
+              e.showClose ? (l(), p(J, {
+                key: 2,
+                ghost: "",
+                size: "lg",
+                tabindex: "-1",
+                icon: o(G),
+                class: a(o(t).closeIcon),
+                onClick: c
+              }, null, 8, ["icon", "class"])) : s("", !0),
+              e.hasActions ? (l(), i("div", {
+                key: 3,
+                class: a(o(t).actions)
+              }, [
+                r(e.$slots, "actions", {}, () => [
+                  r(e.$slots, "cancel-action"),
+                  R.value ? (l(), i("div", Z)) : s("", !0),
+                  r(e.$slots, "tertiary-action"),
+                  r(e.$slots, "secondary-action"),
+                  r(e.$slots, "primary-action")
+                ])
+              ], 2)) : s("", !0)
+            ]),
+            _: 3
+          }, 40, ["disabled", "auto-validate", "title", "description", "errors", "class"]))
         ])
-      ], 6)) : r("", !0)
+      ], 6)) : s("", !0)
     ]));
   }
 });
 export {
-  J as default
+  ue as default
 };

package/lib/components/modal/theme/Modal.base.theme.js

@@ -1,17 +1,23 @@
 const a = {
   classes: {
     wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
-    backdrop: "fixed inset-0 bg-gray-500 dark:bg-black transition-opacity",
-    modal: ({ props: l }) => {
-      let e = "relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full";
-      return l.size === "xs" ? e += " sm:max-w-xs" : l.size === "sm" ? e += " sm:max-w-sm" : l.size === "lg" ? e += " sm:max-w-xl" : l.size === "xl" ? e += " sm:max-w-3xl" : e += " sm:max-w-lg", e;
+    backdrop: ({ data: s }) => {
+      const t = ["fixed inset-0 bg-gray-500 dark:bg-black transition-opacity"];
+      return s.visible ? t.push("ease-out duration-200 opacity-30 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
     },
-    closeIcon: "flex absolute p-1 top-4 z-10 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer",
-    header: "text-lg font-semibold px-6 py-4 border-b",
+    modal: ({ props: s, data: t }) => {
+      const e = ["relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
+      return t.visible ? e.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : e.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), s.size === "xs" ? e.push("sm:max-w-xs") : s.size === "sm" ? e.push("sm:max-w-sm") : s.size === "lg" ? e.push("sm:max-w-xl") : s.size === "xl" ? e.push("sm:max-w-3xl") : e.push("sm:max-w-lg"), e;
+    },
+    closeIcon: "!absolute top-2 z-10 right-2",
+    header: "text-lg pl-6 py-4 border-b pr-12",
     content: "px-6 py-4",
-    actions: "bg-slate-50 dark:bg-gray-800 p-4"
+    actions: "bg-slate-50 dark:bg-gray-800 p-4 grid grid-flow-col gap-4",
+    label: "text-xs text-gray-500 mb-1",
+    title: "text-xl font-semibold mb-4",
+    description: "text-sm"
   }
-}, s = a;
+}, l = a;
 export {
-  s as default
+  l as default
 };

package/lib/components/modal/theme/Modal.carbon.theme.js

@@ -1,5 +1,29 @@
-import e from "./Modal.base.theme.js";
-const t = e, o = t;
+const a = {
+  classes: {
+    wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
+    backdrop: ({ data: t }) => {
+      const e = ["fixed inset-0 bg-gray-500 dark:bg-black transition-opacity"];
+      return t.visible ? e.push("ease-out duration-200 opacity-70 dark:opacity-70") : e.push("ease-in duration-100 opacity-0"), e;
+    },
+    modal: ({ props: t, data: e }) => {
+      const s = ["relative flex flex-col z-10 bg-gray-200 dark:bg-gray-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
+      return e.visible ? s.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : s.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), t.size === "xs" ? s.push("sm:max-w-xs") : t.size === "sm" ? s.push("sm:max-w-sm") : t.size === "lg" ? s.push("sm:max-w-xl") : t.size === "xl" ? s.push("sm:max-w-3xl") : s.push("sm:max-w-lg"), s;
+    },
+    closeIcon: "!absolute top-0 z-10 right-0",
+    header: "text-lg pl-4 pt-4 pr-12",
+    content: ({ props: t }) => {
+      const e = ["pb-8"];
+      return t.fluid || e.push("px-4"), e;
+    },
+    actions: ({ props: t, slots: e }) => {
+      const s = ["grid grid-flow-col gap-[1px]"];
+      return e["tertiary-action"] || e["cancel-action"] ? s.push("grid-cols-4") : s.push("grid-cols-2"), s;
+    },
+    label: "text-xs text-gray-500 mb-1",
+    title: "text-xl mb-4",
+    description: "text-sm mb-4"
+  }
+}, l = a;
 export {
-  o as default
+  l as default
 };

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

@@ -1,4 +1,4 @@
-import { defineComponent as I, ref as v, provide as O, watch as $, openBlock as a, createElementBlock as u, Fragment as K, renderSlot as q, createBlock as y, Teleport as J, createElementVNode as h, normalizeStyle as A, unref as l, normalizeClass as k, createVNode as D, TransitionGroup as Q, withCtx as U, renderList as W, createCommentVNode as f, toDisplayString as x } from "vue";
+import { defineComponent as I, ref as f, provide as O, watch as $, openBlock as a, createElementBlock as m, Fragment as K, renderSlot as q, createBlock as k, Teleport as J, createElementVNode as x, normalizeStyle as A, unref as l, normalizeClass as b, createVNode as D, TransitionGroup as Q, withCtx as U, renderList as W, createCommentVNode as g, toDisplayString as C } from "vue";
 import { injectNotificationKey as Y } from "../../composables/keys.js";
 import { useColors as H } from "../../composables/useColors.js";
 import { useCSS as Z } from "../../composables/useCSS.js";
@@ -8,18 +8,18 @@ import E from "../icon/Icon.vue.js";
 import te from "../spacer/Spacer.js";
 const se = { class: "flex items-center flex-wrap" }, re = {
   key: 0,
-  class: "font-semibold mr-2"
+  class: "font-medium mr-2"
 }, ae = ["onClick"], le = {
   ...H.props("primary"),
   align: {
     type: String,
     default: "right",
-    validator: (n) => b.align.includes(n)
+    validator: (n) => _.align.includes(n)
   },
   position: {
     type: String,
     default: "bottom",
-    validator: (n) => b.position.includes(n)
+    validator: (n) => _.position.includes(n)
   },
   timeout: {
     type: Number,
@@ -33,30 +33,30 @@ const se = { class: "flex items-center flex-wrap" }, re = {
     type: [Symbol, String],
     default: Y
   }
-}, b = {
+}, _ = {
   align: ["left", "right"],
   position: ["bottom", "top"]
 }, ne = {
   name: "XNotifications",
-  validators: b
+  validators: _
 }, ge = /* @__PURE__ */ I({
   ...ne,
   props: le,
   setup(n, { expose: L }) {
-    const s = n, i = v(s.align), r = v(s.position), m = v([]), C = v(null), R = Z("notification"), _ = H();
+    const s = n, i = f(s.align), r = f(s.position), p = f([]), z = f(null), R = Z("notification"), M = H();
     O(s.injectKey, {
-      log: z,
-      info: M,
-      warn: p,
-      error: S,
-      warning: p,
-      success: w
+      log: w,
+      info: S,
+      warn: d,
+      error: P,
+      warning: d,
+      success: N
     }), $(() => s.align, (o) => {
       i.value = o;
     }), $(() => s.position, (o) => {
       r.value = o;
     });
-    function z(o) {
+    function w(o) {
       const t = typeof o == "string", e = {
         message: t ? o : void 0
       };
@@ -65,7 +65,7 @@ const se = { class: "flex items-center flex-wrap" }, re = {
         ...o
       });
     }
-    function M(o) {
+    function S(o) {
       const t = typeof o == "string", e = {
         icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />',
         iconColor: "sky",
@@ -76,7 +76,7 @@ const se = { class: "flex items-center flex-wrap" }, re = {
         ...o
       });
     }
-    function w(o) {
+    function N(o) {
       const t = typeof o == "string", e = {
         icon: '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />',
         iconColor: "success",
@@ -87,7 +87,7 @@ const se = { class: "flex items-center flex-wrap" }, re = {
         ...o
       });
     }
-    function p(o) {
+    function d(o) {
       const t = typeof o == "string", e = {
         icon: '<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
         iconColor: "warning",
@@ -98,7 +98,7 @@ const se = { class: "flex items-center flex-wrap" }, re = {
         ...o
       });
     }
-    function S(o) {
+    function P(o) {
       const t = typeof o == "string", e = {
         icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
         iconColor: "error",
@@ -123,41 +123,41 @@ const se = { class: "flex items-center flex-wrap" }, re = {
         ...o
       };
       i.value = e.align, r.value = e.position;
-      const P = _.getPalette(e.iconColor), d = _.getPalette(((V = e.action) == null ? void 0 : V.color) || "primary"), T = R.variables({
-        icon: P[400],
-        action: d[400],
+      const u = M.getPalette(e.iconColor), v = M.getPalette(((V = e.action) == null ? void 0 : V.color) || "primary"), T = R.variables({
+        icon: u[400],
+        action: v[400],
         hover: {
-          action: d[500]
+          action: v[500]
         },
         dark: {
-          icon: P[500],
-          action: d[500],
+          icon: u[500],
+          action: v[500],
           hover: {
-            action: d[600]
+            action: v[600]
           }
         }
       });
-      e.style = Object.keys(T).map((B) => `${B}: ${T[B]}`).join(";"), m.value.push(e), (j = C.value) == null || j.scrollTo({ top: 0, behavior: "smooth" }), e.timeout && X(e, e.timeout);
+      e.style = Object.keys(T).map((B) => `${B}: ${T[B]}`).join(";"), p.value.push(e), (j = z.value) == null || j.scrollTo({ top: 0, behavior: "smooth" }), e.timeout && X(e, e.timeout);
     }
-    function N(o) {
-      m.value = m.value.filter((t) => t.id !== o.id);
+    function y(o) {
+      p.value = p.value.filter((t) => t.id !== o.id);
     }
     function X(o, t) {
       setTimeout(() => {
-        N(o);
+        y(o);
       }, t);
     }
-    const { styles: F, classes: g, className: G } = ee("Notifications", {}, s);
-    return L({ log: z, info: M, success: w, warn: p, warning: p, error: S }), (o, t) => (a(), u(K, null, [
+    const { styles: F, classes: h, className: G } = ee("Notifications", {}, s);
+    return L({ log: w, info: S, success: N, warn: d, warning: d, error: P }), (o, t) => (a(), m(K, null, [
       q(o.$slots, "default"),
-      (a(), y(J, { to: "body" }, [
-        h("div", {
+      (a(), k(J, { to: "body" }, [
+        x("div", {
           ref_key: "listRef",
-          ref: C,
+          ref: z,
           style: A(l(F)),
-          class: k([
+          class: b([
             l(G),
-            l(g).wrapper,
+            l(h).wrapper,
             {
               // align
               "left-0": i.value === "left",
@@ -170,8 +170,8 @@ const se = { class: "flex items-center flex-wrap" }, re = {
         }, [
           D(Q, {
             tag: "ul",
-            class: k([
-              l(g).list,
+            class: b([
+              l(h).list,
               { "flex-col-reverse": r.value }
             ]),
             "enter-active-class": "transition ease-out duration-200",
@@ -183,10 +183,10 @@ const se = { class: "flex items-center flex-wrap" }, re = {
             "move-class": "ease-in-out duration-200"
           }, {
             default: U(() => [
-              (a(!0), u(K, null, W(m.value, (e) => (a(), u("li", {
+              (a(!0), m(K, null, W(p.value, (e) => (a(), m("li", {
                 key: e.id,
-                class: k([
-                  l(g).item,
+                class: b([
+                  l(h).item,
                   {
                     "mb-2": r.value === "bottom",
                     "mt-2": r.value === "top"
@@ -194,31 +194,34 @@ const se = { class: "flex items-center flex-wrap" }, re = {
                 ]),
                 style: A(e.style)
               }, [
-                e.icon ? (a(), y(E, {
+                e.icon ? (a(), k(E, {
                   key: 0,
                   filled: "",
                   icon: e.icon,
                   class: "mr-4 text-[color:var(--x-notification-icon)] dark:text-[color:var(--x-notification-dark-icon)]",
                   viewBox: "0 0 20 20"
-                }, null, 8, ["icon"])) : f("", !0),
-                h("div", se, [
-                  e.title ? (a(), u("span", re, x(e.title), 1)) : f("", !0),
-                  h("span", null, x(e.message), 1)
+                }, null, 8, ["icon"])) : g("", !0),
+                x("div", se, [
+                  e.title ? (a(), m("span", re, C(e.title), 1)) : g("", !0),
+                  x("span", null, C(e.message), 1)
                 ]),
                 D(l(te)),
-                e.action ? (a(), u("div", {
+                e.action ? (a(), m("button", {
                   key: 1,
-                  class: "ml-3 font-semibold 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: e.action.onClick
-                }, x(e.action.label), 9, ae)) : f("", !0),
-                e.removable ? (a(), y(E, {
+                  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;
+                    (u = e.action) == null || u.onClick(), y(e);
+                  }
+                }, C(e.action.label), 9, ae)) : g("", !0),
+                e.removable ? (a(), k(E, {
                   key: 2,
                   icon: l(oe),
                   class: "text-gray-400 hover:text-gray-500 ml-3 cursor-pointer",
                   onClick: () => {
-                    N(e);
+                    y(e);
                   }
-                }, null, 8, ["icon", "onClick"])) : f("", !0)
+                }, null, 8, ["icon", "onClick"])) : g("", !0)
               ], 6))), 128))
             ]),
             _: 1

package/lib/components/notifications/theme/Notifications.base.theme.js

@@ -1,6 +1,6 @@
 const e = {
   classes: {
-    wrapper: "fixed z-40 w-full sm:w-auto overflow-y-auto max-h-screen",
+    wrapper: "fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen",
     list: "flex flex-col items-end w-full sm:w-[520px] px-4",
     item: "w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border border-gray-700 dark:border-gray-100"
   }

package/lib/components/notifications/theme/Notifications.carbon.theme.js

@@ -1,5 +1,10 @@
-import e from "./Notifications.base.theme.js";
-const t = e, o = t;
+const e = {
+  classes: {
+    wrapper: "fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen",
+    list: "flex flex-col items-end w-full sm:w-[520px] px-4",
+    item: () => ["w-full flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border-l-2 border-[color:var(--x-notification-icon)]"]
+  }
+}, r = e;
 export {
-  o as default
+  r as default
 };

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

@@ -29,7 +29,7 @@ declare const popoverProps: {
     popperShowTriggers: PropType<TriggerEvent[] | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>;
     popperHideTriggers: PropType<TriggerEvent[] | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>;
     container: {
-        type: (ObjectConstructor | StringConstructor | BooleanConstructor | {
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor | {
             new (): Element;
             prototype: Element;
         })[];
@@ -87,7 +87,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     popperShowTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     popperHideTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     container: {
-        type: (ObjectConstructor | StringConstructor | BooleanConstructor | {
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor | {
             new (): Element;
             prototype: Element;
         })[];
@@ -145,7 +145,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     popperShowTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     popperHideTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     container: {
-        type: (ObjectConstructor | StringConstructor | BooleanConstructor | {
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor | {
             new (): Element;
             prototype: Element;
         })[];