@nmorph/nmorph-ui-kit 3.0.16 → 3.0.18

package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.css

@@ -1 +1 @@
-.nmorph-form-item{min-width:0;max-width:100%;margin:var(--indentation-04) var(--indentation-00)}.nmorph-form-item label{font-weight:var(--nmorph-typography-label-font-weight);font-size:var(--nmorph-typography-label-font-size);line-height:var(--nmorph-typography-label-line-height)}.nmorph-form-item .nmorph-form-item__content{position:relative;display:flex;align-items:center;width:100%;min-width:0;max-width:100%}.nmorph-form-item.nmorph-form-item--labeled .nmorph-form-item__content{margin-top:var(--indentation-02)}.nmorph-form-item.nmorph-form-item--valid .nmorph-native-input:focus{background:var(--nmorph-success-color)}.nmorph-form-item.nmorph-form-item--invalid .nmorph-native-input:focus{background:var(--nmorph-error-text-color)}
+.nmorph-form-item{min-width:0;max-width:100%;margin:var(--indentation-04) var(--indentation-00)}.nmorph-form-item label{font-weight:var(--nmorph-typography-label-font-weight);font-size:var(--nmorph-typography-label-font-size);line-height:var(--nmorph-typography-label-line-height)}.nmorph-form-item .nmorph-form-item__content{position:relative;display:flex;align-items:center;width:100%;min-width:0;max-width:100%}.nmorph-form-item.nmorph-form-item--labeled .nmorph-form-item__content{margin-top:var(--indentation-02)}.nmorph-form-item.nmorph-form-item--valid .nmorph-native-input:focus{background:var(--nmorph-success-color)}.nmorph-form-item.nmorph-form-item--invalid .nmorph-native-input:focus{background:var(--nmorph-error-color)}

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.css

@@ -1 +1 @@
-.nmorph-validation-icon{width:18px;margin-left:var(--indentation-03)}.nmorph-validation-icon.nmorph-validation-icon--valid .nmorph-validation-icon__content{--nmorph-private-icon-color: var(--nmorph-success-color)}.nmorph-validation-icon.nmorph-validation-icon--invalid .nmorph-validation-icon__content{--nmorph-private-icon-color: var(--nmorph-error-text-color)}
+.nmorph-validation-icon{width:18px;margin-left:var(--indentation-03)}.nmorph-validation-icon.nmorph-validation-icon--valid .nmorph-validation-icon__content{--nmorph-private-icon-color: var(--nmorph-success-text-color)}.nmorph-validation-icon.nmorph-validation-icon--invalid .nmorph-validation-icon__content{--nmorph-private-icon-color: var(--nmorph-error-text-color)}

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue.js

@@ -1,11 +1,11 @@
 import './NmorphDropdown.css';
 import n from "./NmorphDropdown.vue2.js";
-import { openBlock as r, createBlock as a, withCtx as s, createElementBlock as p, normalizeStyle as l, normalizeClass as c, renderSlot as i, createCommentVNode as t } from "vue";
+import { openBlock as r, createBlock as p, withCtx as a, createElementBlock as s, mergeProps as c, renderSlot as t, createCommentVNode as l } from "vue";
 /* empty css                    */
 import d from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = ["role", "aria-label"];
-function f(e, h, _, o, w, k) {
-  return r(), a(o.NmorphOverlay, {
+const i = ["role", "aria-label"];
+function m(e, f, h, o, _, w) {
+  return r(), p(o.NmorphOverlay, {
     show: o.props.open,
     transparent: "",
     "z-index": o.props.zIndex,
@@ -15,23 +15,22 @@ function f(e, h, _, o, w, k) {
     onOnOutsideClick: o.outsideClickHandler,
     onOnEscapeKeydown: o.escapeHandler
   }, {
-    default: s(() => [
-      o.props.open ? (r(), p("div", {
+    default: a(() => [
+      o.props.open ? (r(), s("div", c({
         key: 0,
-        ref: "dropdownDOMRef",
-        class: c([o.modifiers, o.props.contentClass]),
-        style: l(o.dropdownStyle),
+        ref: "dropdownDOMRef"
+      }, o.rootAttrs, {
         role: o.props.role || void 0,
         "aria-label": o.props.ariaLabel || void 0
-      }, [
-        i(e.$slots, "default")
-      ], 14, m)) : t("v-if", !0)
+      }), [
+        t(e.$slots, "default")
+      ], 16, i)) : l("v-if", !0)
     ]),
     _: 3
     /* FORWARDED */
   }, 8, ["show", "z-index", "close-on-escape", "trap-focus", "restore-focus"]);
 }
-const O = /* @__PURE__ */ d(n, [["render", f], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
+const u = /* @__PURE__ */ d(n, [["render", m], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
 export {
-  O as default
+  u as default
 };

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js

@@ -1,10 +1,12 @@
 import './NmorphDropdown.css';
-import { defineComponent as y, ref as v, toRef as t, computed as i, watch as w } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import { toCssSize as b, createCssSizeVariables as x } from "../../../utils/common.js";
-import { usePlacement as S } from "../../../hooks/use-placement.js";
-import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const B = /* @__PURE__ */ y({
+import { defineComponent as v, ref as w, toRef as t, computed as r, watch as q } from "vue";
+import { useModifiers as b } from "../../../utils/create-modifiers.js";
+import { toCssSize as x, createCssSizeVariables as S } from "../../../utils/common.js";
+import { useMergedAttrs as O } from "../../../utils/attrs.js";
+import { usePlacement as g } from "../../../hooks/use-placement.js";
+import _ from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+const P = /* @__PURE__ */ v({
+  inheritAttrs: !1,
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
@@ -27,48 +29,51 @@ const B = /* @__PURE__ */ y({
     design: { type: null, required: !1, default: "nmorph" }
   },
   emits: ["on-outside-click", "on-escape-keydown"],
-  setup(u, { expose: p, emit: f }) {
-    p();
-    const e = u, r = f, l = v(null), { placementCoords: o, placementReady: d, adjustPlacement: a } = S({
+  setup(f, { expose: m, emit: c }) {
+    m();
+    const e = f, o = c, l = w(null), { placementCoords: i, placementReady: a, adjustPlacement: d } = g({
       initialPlacement: t(e, "placement"),
       contentDOMElement: l,
       relativeElement: t(e, "relativeElement"),
       yOffset: t(e, "yOffset"),
       xOffset: t(e, "xOffset"),
       enabled: t(e, "open")
-    }), m = i(
-      () => q({
+    }), n = r(
+      () => b({
         "nmorph-dropdown": [!e.open && "closed", e.hideShadow && "hide-shadow", e.design]
       })
-    ), n = i(
-      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : b(e.width)
-    ), c = i(() => ({
-      "--nmorph-private-dropdown-width": n.value,
-      ...x({
+    ), s = r(
+      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : x(e.width)
+    ), u = r(() => ({
+      "--nmorph-private-dropdown-width": s.value,
+      ...S({
         "--nmorph-private-dropdown-min-width": e.minWidth === void 0 ? "auto" : e.minWidth,
         "--nmorph-private-dropdown-max-width": e.maxWidth === void 0 ? "none" : e.maxWidth
       }),
-      left: o.value.x,
-      top: o.value.y,
-      visibility: e.open && d.value ? "visible" : "hidden"
-    }));
-    w(
+      left: i.value.x,
+      top: i.value.y,
+      visibility: e.open && a.value ? "visible" : "hidden"
+    })), h = O(
+      r(() => [n.value, e.contentClass]),
+      u
+    );
+    q(
       () => e.open,
-      (h) => {
-        h && a();
+      (y) => {
+        y && d();
       },
       { flush: "post" }
     );
-    const s = { props: e, emit: r, dropdownDOMRef: l, placementCoords: o, placementReady: d, adjustPlacement: a, modifiers: m, width: n, dropdownStyle: c, outsideClickHandler: () => {
-      r("on-outside-click");
+    const p = { props: e, emit: o, dropdownDOMRef: l, placementCoords: i, placementReady: a, adjustPlacement: d, modifiers: n, width: s, dropdownStyle: u, rootAttrs: h, outsideClickHandler: () => {
+      o("on-outside-click");
     }, escapeHandler: () => {
-      r("on-escape-keydown");
+      o("on-escape-keydown");
     }, get NmorphOverlay() {
-      return O;
+      return _;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });
 export {
-  B as default
+  P as default
 };

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue.js

@@ -1,59 +1,54 @@
 import './NmorphOverlay.css';
-import d from "./NmorphOverlay.vue2.js";
-import { openBlock as l, createElementBlock as p, withModifiers as e, normalizeStyle as i, normalizeClass as s, createElementVNode as n, renderSlot as a, createBlock as m, Teleport as c } from "vue";
+import p from "./NmorphOverlay.vue2.js";
+import { openBlock as l, createElementBlock as d, mergeProps as i, withModifiers as e, createElementVNode as t, renderSlot as s, createBlock as a, Teleport as c } from "vue";
 /* empty css                   */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = ["tabindex"], y = ["tabindex"];
-function k(t, r, _, o, h, x) {
-  return o.renderInline ? (l(), p(
+import m from "../../../_virtual/_plugin-vue_export-helper.js";
+const f = ["tabindex"], k = ["tabindex"];
+function v(n, r, _, o, h, y) {
+  return o.renderInline ? (l(), d(
     "div",
-    {
-      key: 0,
-      class: s(o.modifiers),
-      style: i({ "--nmorph-private-overlay-z-index": o.zIndex }),
+    i({ key: 0 }, o.rootAttrs, {
       onClick: e(o.clickHandler, ["stop"])
-    },
+    }),
     [
-      n("div", {
+      t("div", {
         ref: "contentRef",
         class: "nmorph-overlay__slot",
         tabindex: o.props.trapFocus ? -1 : void 0,
         onClick: r[0] || (r[0] = e(() => {
         }, ["stop"]))
       }, [
-        a(t.$slots, "default")
-      ], 8, v)
+        s(n.$slots, "default")
+      ], 8, f)
     ],
-    6
-    /* CLASS, STYLE */
-  )) : (l(), m(c, {
+    16
+    /* FULL_PROPS */
+  )) : (l(), a(c, {
     key: 1,
     to: o.props.teleportTo
   }, [
-    n(
+    t(
       "div",
-      {
-        class: s(o.modifiers),
-        style: i({ "--nmorph-private-overlay-z-index": o.zIndex }),
+      i(o.rootAttrs, {
         onClick: e(o.clickHandler, ["stop"])
-      },
+      }),
       [
-        n("div", {
+        t("div", {
           ref: "contentRef",
           class: "nmorph-overlay__slot",
           tabindex: o.props.trapFocus ? -1 : void 0,
           onClick: r[1] || (r[1] = e(() => {
           }, ["stop"]))
         }, [
-          a(t.$slots, "default")
-        ], 8, y)
+          s(n.$slots, "default")
+        ], 8, k)
       ],
-      6
-      /* CLASS, STYLE */
+      16
+      /* FULL_PROPS */
     )
   ], 8, ["to"]));
 }
-const I = /* @__PURE__ */ f(d, [["render", k], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
+const N = /* @__PURE__ */ m(p, [["render", v], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
 export {
-  I as default
+  N as default
 };

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue2.js

@@ -1,8 +1,10 @@
 import './NmorphOverlay.css';
-import { defineComponent as _, computed as i, ref as q, watch as g, onBeforeUnmount as B, nextTick as A } from "vue";
-import { useModifiers as F } from "../../../utils/create-modifiers.js";
-import { useZIndex as I } from "../../../hooks/use-z-index.js";
-const L = /* @__PURE__ */ _({
+import { defineComponent as A, computed as s, ref as g, watch as B, onBeforeUnmount as F, nextTick as I } from "vue";
+import { useModifiers as S } from "../../../utils/create-modifiers.js";
+import { useMergedAttrs as T } from "../../../utils/attrs.js";
+import { useZIndex as z } from "../../../hooks/use-z-index.js";
+const j = /* @__PURE__ */ A({
+  inheritAttrs: !1,
   __name: "NmorphOverlay",
   props: {
     show: { type: Boolean, required: !0 },
@@ -15,65 +17,65 @@ const L = /* @__PURE__ */ _({
     restoreFocus: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["on-outside-click", "on-escape-keydown"],
-  setup(b, { expose: v, emit: h }) {
-    v();
-    const t = b, E = I(
-      i(() => t.show),
+  setup(E, { expose: w, emit: k }) {
+    w();
+    const t = E, d = z(
+      s(() => t.show),
       () => t.zIndex
-    ), w = i(
-      () => F({
+    ), c = s(
+      () => S({
         "nmorph-overlay": [t.show && "show", t.transparent && "transparent"]
       })
-    ), k = i(() => t.disabledTeleport || !t.show || typeof document > "u"), x = () => {
-      s("on-outside-click");
-    }, s = h, n = q(null);
-    let o = null;
-    const d = [
+    ), x = s(() => t.disabledTeleport || !t.show || typeof document > "u"), f = s(() => ({ "--nmorph-private-overlay-z-index": d.value })), _ = T(c, f), q = () => {
+      l("on-outside-click");
+    }, l = k, o = g(null);
+    let n = null;
+    const p = [
       "a[href]",
       "button:not([disabled])",
       "textarea:not([disabled])",
       "input:not([disabled])",
       "select:not([disabled])",
       '[tabindex]:not([tabindex="-1"])'
-    ].join(","), u = () => n.value ? Array.from(n.value.querySelectorAll(d)).filter(
+    ].join(","), u = () => o.value ? Array.from(o.value.querySelectorAll(p)).filter(
       (e) => e.getAttribute("aria-hidden") !== "true"
-    ) : [], c = async () => {
+    ) : [], m = async () => {
       if (!t.trapFocus) return;
-      await A(), (u()[0] || n.value)?.focus();
-    }, l = (e) => {
+      await I(), (u()[0] || o.value)?.focus();
+    }, a = (e) => {
       if (!t.show) return;
       if (e.key === "Escape" && t.closeOnEscape) {
-        e.preventDefault(), s("on-escape-keydown");
+        e.preventDefault(), l("on-escape-keydown");
         return;
       }
       if (e.key !== "Tab" || !t.trapFocus) return;
       const r = u();
       if (!r.length) {
-        e.preventDefault(), n.value?.focus();
+        e.preventDefault(), o.value?.focus();
         return;
       }
-      const m = r[0], y = r[r.length - 1];
-      e.shiftKey && document.activeElement === m ? (e.preventDefault(), y.focus()) : !e.shiftKey && document.activeElement === y && (e.preventDefault(), m.focus());
-    }, f = () => {
-      typeof document > "u" || document.addEventListener("keydown", l);
-    }, a = () => {
-      typeof document > "u" || document.removeEventListener("keydown", l);
+      const b = r[0], h = r[r.length - 1];
+      e.shiftKey && document.activeElement === b ? (e.preventDefault(), h.focus()) : !e.shiftKey && document.activeElement === h && (e.preventDefault(), b.focus());
+    }, y = () => {
+      typeof document > "u" || document.addEventListener("keydown", a);
+    }, i = () => {
+      typeof document > "u" || document.removeEventListener("keydown", a);
     };
-    g(
+    B(
       () => t.show,
       (e) => {
-        typeof document > "u" || (e ? (o = document.activeElement, f(), c()) : (a(), t.restoreFocus && o?.focus?.(), o = null));
+        typeof document > "u" || (e ? (n = document.activeElement, y(), m()) : (i(), t.restoreFocus && n?.focus?.(), n = null));
       },
       { immediate: !0, flush: "post" }
-    ), B(a);
-    const p = { props: t, zIndex: E, modifiers: w, renderInline: k, clickHandler: x, emit: s, contentRef: n, get previousActiveElement() {
-      return o;
+    ), F(i);
+    const v = { props: t, zIndex: d, modifiers: c, renderInline: x, overlayStyle: f, rootAttrs: _, clickHandler: q, emit: l, contentRef: o, get previousActiveElement() {
+      return n;
     }, set previousActiveElement(e) {
-      o = e;
-    }, focusableSelector: d, getFocusableElements: u, focusContent: c, keydownHandler: l, addKeydownListener: f, removeKeydownListener: a };
-    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+      n = e;
+    }, focusableSelector: p, getFocusableElements: u, focusContent: m, keydownHandler: a, addKeydownListener: y, removeKeydownListener: i };
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  L as default
+  j as default
 };

package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.css

@@ -1 +1 @@
-.nmorph-notification-provider{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__notification{position:relative;width:fit-content;height:fit-content;margin:1rem;overflow:hidden;border-radius:var(--default-border-radius);transition:transform .5s ease,opacity .5s ease-in-out;pointer-events:all}.nmorph-notification-provider .nmorph-notification-provider__notification--with-duration .nmorph-alert{padding-bottom:calc(var(--indentation-03) + 12px)}.nmorph-notification-provider .nmorph-notification-provider__duration{position:absolute;right:var(--indentation-04);bottom:var(--indentation-02);left:var(--indentation-04);display:flex;gap:var(--indentation-02);align-items:center;color:var(--nmorph-white-color);pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__duration-track{flex:1 1 auto;min-width:20px;height:3px;overflow:hidden;background:color-mix(in srgb,currentColor 20%,transparent);border-radius:999px}.nmorph-notification-provider .nmorph-notification-provider__duration-bar{display:block;width:100%;height:100%;background:currentColor;border-radius:inherit;transform-origin:left center;opacity:.72;animation:nmorph-notification-provider-duration var(--nmorph-private-notification-provider-duration) linear forwards}.nmorph-notification-provider .nmorph-notification-provider__duration-value{flex:0 0 auto;color:currentColor;font-size:var(--nmorph-typography-caption-font-size);line-height:1;opacity:.72}.nmorph-notification-provider .nmorph-notification-provider__list{position:fixed;display:flex;flex-direction:column;width:fit-content;max-width:100vw;pointer-events:none}.nmorph-notification-provider .nmorph-notification-move{transition:transform .5s ease}.nmorph-notification-provider .nmorph-notification-provider__list--top-left{top:0;left:0;align-items:flex-start}.nmorph-notification-provider .nmorph-notification-provider__list--top-right{top:0;right:0;align-items:flex-end}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left{bottom:0;left:0;align-items:flex-start}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right{right:0;bottom:0;align-items:flex-end}.nmorph-notification-provider .nmorph-notification-provider__list--top-center{top:0;left:50%;align-items:center;transform:translate(-50%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center{bottom:0;left:50%;align-items:center;transform:translate(-50%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-leave-active{transition:transform .5s ease,opacity .5s ease-in-out}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-enter-from,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-enter-from{transform:translate(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-enter-from,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-enter-from{transform:translate(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-enter-from{transform:translateY(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-enter-from{transform:translateY(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-leave-to,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-leave-to{transform:translate(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-leave-to,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-leave-to{transform:translate(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-leave-to{transform:translateY(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-leave-to{transform:translateY(100%)}.nmorph-notification-provider .nmorph-notification-enter-from{opacity:0}.nmorph-notification-provider .nmorph-notification-enter-to{transform:translate(0);opacity:1}.nmorph-notification-provider .nmorph-notification-leave-active{overflow:hidden}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-text-color);display:flex;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--small{--nmorph-private-icon-width: 14px;--nmorph-private-icon-height: 14px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--medium{--nmorph-private-icon-width: 20px;--nmorph-private-icon-height: 20px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--large{--nmorph-private-icon-width: 32px;--nmorph-private-icon-height: 32px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height);overflow:hidden}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__close .nmorph-icon,.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__content,.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__content-title{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-success-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-error-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-warn-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-info-color)}.nmorph-notification-provider .nmorph-notification-leave-active svg{width:100%;height:100%;fill:var(--nmorph-private-icon-color);stroke-width:0}.nmorph-notification-provider .nmorph-notification-leave-active path{stroke:var(--nmorph-private-icon-color)}.nmorph-notification-provider .nmorph-notification-leave-to{opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-provider__notification--closing,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-provider__notification--closing{position:absolute;transform:translate(-100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-provider__notification--closing,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-provider__notification--closing{position:absolute;transform:translate(100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-provider__notification--closing{position:absolute;transform:translateY(-100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-provider__notification--closing{position:absolute;transform:translateY(100%);opacity:0;pointer-events:none}@keyframes nmorph-notification-provider-duration{0%{transform:scaleX(1)}to{transform:scaleX(0)}}
+.nmorph-notification-provider{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__notification{position:relative;width:fit-content;height:fit-content;margin:1rem;overflow:hidden;border-radius:var(--default-border-radius);transition:transform .5s ease,opacity .5s ease-in-out;pointer-events:all}.nmorph-notification-provider .nmorph-notification-provider__notification--with-duration .nmorph-alert{padding-bottom:calc(var(--indentation-03) + 12px)}.nmorph-notification-provider .nmorph-notification-provider__notification .nmorph-alert{background:color-mix(in srgb,var(--nmorph-private-alert-background-color) 82%,var(--nmorph-main-color));border-color:color-mix(in srgb,var(--nmorph-contrast-text-color) 12%,transparent);box-shadow:var(--nmorph-shadow-outset);backdrop-filter:blur(8px)}.nmorph-notification-provider .nmorph-notification-provider__duration{position:absolute;right:var(--indentation-04);bottom:calc(var(--indentation-02) + 2px);left:var(--indentation-04);display:flex;gap:var(--indentation-02);align-items:baseline;color:var(--nmorph-contrast-text-color);pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__duration-track{flex:1 1 auto;min-width:20px;height:3px;overflow:hidden;background:color-mix(in srgb,currentColor 20%,transparent);border-radius:999px;transform:translateY(-1px)}.nmorph-notification-provider .nmorph-notification-provider__duration-bar{display:block;width:100%;height:100%;background:currentColor;border-radius:inherit;transform-origin:left center;opacity:.72;animation:nmorph-notification-provider-duration var(--nmorph-private-notification-provider-duration) linear forwards}.nmorph-notification-provider .nmorph-notification-provider__duration-value{flex:0 0 auto;color:currentColor;font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-body-small-font-size);line-height:1;opacity:.82}.nmorph-notification-provider .nmorph-notification-provider__list{position:fixed;display:flex;flex-direction:column;width:fit-content;max-width:100vw;pointer-events:none}.nmorph-notification-provider .nmorph-notification-move{transition:transform .5s ease}.nmorph-notification-provider .nmorph-notification-provider__list--top-left{top:0;left:0;align-items:flex-start}.nmorph-notification-provider .nmorph-notification-provider__list--top-right{top:0;right:0;align-items:flex-end}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left{bottom:0;left:0;align-items:flex-start}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right{right:0;bottom:0;align-items:flex-end}.nmorph-notification-provider .nmorph-notification-provider__list--top-center{top:0;left:50%;align-items:center;transform:translate(-50%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center{bottom:0;left:50%;align-items:center;transform:translate(-50%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-leave-active{transition:transform .5s ease,opacity .5s ease-in-out}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-enter-from,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-enter-from{transform:translate(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-enter-from,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-enter-from{transform:translate(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-enter-from{transform:translateY(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-enter-from{transform:translateY(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-leave-to,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-leave-to{transform:translate(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-leave-to,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-leave-to{transform:translate(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-leave-to{transform:translateY(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-leave-to{transform:translateY(100%)}.nmorph-notification-provider .nmorph-notification-enter-from{opacity:0}.nmorph-notification-provider .nmorph-notification-enter-to{transform:translate(0);opacity:1}.nmorph-notification-provider .nmorph-notification-leave-active{overflow:hidden}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-text-color);display:flex;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--small{--nmorph-private-icon-width: 14px;--nmorph-private-icon-height: 14px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--medium{--nmorph-private-icon-width: 20px;--nmorph-private-icon-height: 20px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--large{--nmorph-private-icon-width: 32px;--nmorph-private-icon-height: 32px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height);overflow:hidden}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__close .nmorph-icon,.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__content,.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__content-title{--nmorph-private-icon-color: var(--nmorph-contrast-text-color);color:var(--nmorph-contrast-text-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-success-text-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-error-text-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-warn-text-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-info-text-color)}.nmorph-notification-provider .nmorph-notification-leave-active svg{width:100%;height:100%;fill:var(--nmorph-private-icon-color);stroke-width:0}.nmorph-notification-provider .nmorph-notification-leave-active path{stroke:var(--nmorph-private-icon-color)}.nmorph-notification-provider .nmorph-notification-leave-to{opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-provider__notification--closing,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-provider__notification--closing{position:absolute;transform:translate(-100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-provider__notification--closing,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-provider__notification--closing{position:absolute;transform:translate(100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-provider__notification--closing{position:absolute;transform:translateY(-100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-provider__notification--closing{position:absolute;transform:translateY(100%);opacity:0;pointer-events:none}@keyframes nmorph-notification-provider-duration{0%{transform:scaleX(1)}to{transform:scaleX(0)}}

package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue.js

@@ -1,54 +1,51 @@
 import './NmorphNotificationProvider.css';
 import h from "./NmorphNotificationProvider.vue2.js";
-import { openBlock as e, createBlock as d, Teleport as _, createElementVNode as n, normalizeStyle as l, createElementBlock as i, Fragment as s, renderList as c, TransitionGroup as v, normalizeClass as p, withCtx as u, createVNode as b, toDisplayString as f, createCommentVNode as m } from "vue";
+import { openBlock as e, createBlock as a, Teleport as _, createElementVNode as n, normalizeProps as v, guardReactiveProps as u, createElementBlock as t, Fragment as d, renderList as s, TransitionGroup as b, normalizeClass as c, withCtx as f, normalizeStyle as p, createVNode as y, toDisplayString as k, createCommentVNode as m } from "vue";
 /* empty css                                */
-import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const k = ["title"], N = {
+import N from "../../../_virtual/_plugin-vue_export-helper.js";
+const g = ["title"], D = {
   key: 0,
   class: "nmorph-notification-provider__duration-value"
 };
-function g(D, a, w, r, I, x) {
-  return e(), d(_, {
+function w(C, l, I, r, P, V) {
+  return e(), a(_, {
     to: r.props.teleportTo,
     disabled: r.teleportDisabled
   }, [
     n(
       "div",
-      {
-        class: "nmorph-notification-provider",
-        style: l({ zIndex: r.zIndex })
-      },
+      v(u(r.rootAttrs)),
       [
-        (e(!0), i(
-          s,
+        (e(!0), t(
+          d,
           null,
-          c(r.notificationGroups, (t) => (e(), d(v, {
-            key: t.placement,
+          s(r.notificationGroups, (i) => (e(), a(b, {
+            key: i.placement,
             appear: "",
             name: "nmorph-notification",
             tag: "div",
-            class: p(`nmorph-notification-provider__list nmorph-notification-provider__list--${t.placement}`)
+            class: c(`nmorph-notification-provider__list nmorph-notification-provider__list--${i.placement}`)
           }, {
-            default: u(() => [
-              (e(!0), i(
-                s,
+            default: f(() => [
+              (e(!0), t(
+                d,
                 null,
-                c(t.notifications, (o) => (e(), i(
+                s(i.notifications, (o) => (e(), t(
                   "div",
                   {
                     key: o.id,
-                    style: l(r.getNotificationStyle(o)),
-                    class: p([
+                    style: p(r.getNotificationStyle(o)),
+                    class: c([
                       "nmorph-notification-provider__notification",
                       r.hasDurationIndicator(o) && "nmorph-notification-provider__notification--with-duration",
                       r.closingIds.includes(o.id) && "nmorph-notification-provider__notification--closing"
                     ])
                   },
                   [
-                    b(r.NmorphAlert, {
+                    y(r.NmorphAlert, {
                       id: o.id,
                       class: "nmorph-notification-provider__alert",
-                      style: l({ width: o.width }),
+                      style: p({ width: o.width }),
                       type: o.type,
                       closable: o.closable,
                       title: o.title,
@@ -61,13 +58,13 @@ function g(D, a, w, r, I, x) {
                       "background-color": o.backgroundColor,
                       onClose: () => r.closeHandler(o.id)
                     }, null, 8, ["id", "style", "type", "closable", "title", "content", "fill", "show-icon", "bordered", "html", "close-icon-position", "background-color", "onClose"]),
-                    r.hasDurationIndicator(o) ? (e(), i("div", {
+                    r.hasDurationIndicator(o) ? (e(), t("div", {
                       key: `${o.id}-${r.getNotificationDuration(o)}`,
                       class: "nmorph-notification-provider__duration",
                       title: r.hasDurationValue(o) ? r.getNotificationDurationLabel(o) : void 0,
                       "aria-hidden": "true"
                     }, [
-                      a[0] || (a[0] = n(
+                      l[0] || (l[0] = n(
                         "span",
                         { class: "nmorph-notification-provider__duration-track" },
                         [
@@ -76,14 +73,14 @@ function g(D, a, w, r, I, x) {
                         -1
                         /* CACHED */
                       )),
-                      r.hasDurationValue(o) ? (e(), i(
+                      r.hasDurationValue(o) ? (e(), t(
                         "span",
-                        N,
-                        f(r.getNotificationDurationLabel(o)),
+                        D,
+                        k(r.getNotificationDurationLabel(o)),
                         1
                         /* TEXT */
                       )) : m("v-if", !0)
-                    ], 8, k)) : m("v-if", !0)
+                    ], 8, g)) : m("v-if", !0)
                   ],
                   6
                   /* CLASS, STYLE */
@@ -99,12 +96,12 @@ function g(D, a, w, r, I, x) {
           /* KEYED_FRAGMENT */
         ))
       ],
-      4
-      /* STYLE */
+      16
+      /* FULL_PROPS */
     )
   ], 8, ["to", "disabled"]);
 }
-const L = /* @__PURE__ */ y(h, [["render", g], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
+const S = /* @__PURE__ */ N(h, [["render", w], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
 export {
-  L as default
+  S as default
 };