@nmorph/nmorph-ui-kit 2.2.46 → 2.2.48

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue.js

@@ -1,15 +1,26 @@
 import './NmorphCallout.css';
-import { defineComponent as n, computed as i, openBlock as e, createElementBlock as o, normalizeStyle as r, normalizeClass as c, toDisplayString as d, createCommentVNode as s, createElementVNode as u } from "vue";
-import { createCssVariables as p, createCssSizeVariables as m } from "../../../utils/common.js";
-const f = {
+import { defineComponent as v, useSlots as m, computed as t, openBlock as a, createBlock as h, resolveDynamicComponent as _, mergeProps as y, withCtx as g, createElementBlock as r, renderSlot as n, createTextVNode as b, toDisplayString as z, createCommentVNode as S } from "vue";
+import { createCssVariables as k, createCssSizeVariables as C } from "../../../utils/common.js";
+const w = {
   key: 0,
   class: "nmorph-callout__title"
-}, _ = ["innerHTML"], S = /* @__PURE__ */ n({
+}, B = {
+  key: 1,
+  class: "nmorph-callout__content"
+}, F = ["innerHTML"], $ = /* @__PURE__ */ v({
   __name: "NmorphCallout",
   props: {
     type: { default: "info" },
     title: { default: "" },
-    content: {},
+    content: { default: "" },
+    as: { default: "div" },
+    href: { default: void 0 },
+    target: { default: void 0 },
+    rel: { default: void 0 },
+    referrerpolicy: { default: void 0 },
+    referrerPolicy: { default: void 0 },
+    download: { type: [String, Boolean], default: void 0 },
+    ariaLabel: { default: void 0 },
     color: { default: void 0 },
     padding: { default: "var(--indentation-03) var(--indentation-04)" },
     borderRadius: { default: "var(--default-border-radius)" },
@@ -18,32 +29,59 @@ const f = {
     titleFontSize: { default: "var(--font-size-medium)" },
     contentFontSize: { default: "var(--font-size-extra-small)" }
   },
-  setup(a) {
-    const t = a, l = i(() => ({
-      ...m({
-        "--callout-padding": t.padding,
-        "--callout-border-radius": t.borderRadius,
-        "--callout-accent-width": t.accentWidth,
-        "--callout-title-gap": t.titleGap,
-        "--callout-title-font-size": t.titleFontSize,
-        "--callout-content-font-size": t.contentFontSize
+  setup(d) {
+    const i = {
+      self: "_self",
+      blank: "_blank",
+      parent: "_parent",
+      top: "_top"
+    }, e = d, o = m(), s = t(() => ({
+      ...C({
+        "--callout-padding": e.padding,
+        "--callout-border-radius": e.borderRadius,
+        "--callout-accent-width": e.accentWidth,
+        "--callout-title-gap": e.titleGap,
+        "--callout-title-font-size": e.titleFontSize,
+        "--callout-content-font-size": e.contentFontSize
       }),
-      ...p({
-        "--callout-color": t.color
+      ...k({
+        "--callout-color": e.color
       })
-    }));
-    return (v, h) => (e(), o("div", {
-      class: c(["nmorph-callout", `nmorph-callout--${t.type}`]),
-      style: r(l.value)
-    }, [
-      t.title ? (e(), o("div", f, d(t.title), 1)) : s("", !0),
-      u("div", {
-        class: "nmorph-callout__content",
-        innerHTML: t.content
-      }, null, 8, _)
-    ], 6));
+    })), c = t(() => {
+      if (e.target)
+        return e.target in i ? i[e.target] : e.target;
+    }), u = t(() => e.as !== "a" ? {} : {
+      href: e.href,
+      target: c.value,
+      rel: e.rel,
+      referrerpolicy: e.referrerpolicy ?? e.referrerPolicy,
+      download: e.download === !0 ? "" : e.download === !1 ? void 0 : e.download,
+      "aria-label": e.ariaLabel
+    }), f = t(() => !!(o.header || o.title || e.title)), p = t(() => !!o.default);
+    return (l, L) => (a(), h(_(e.as), y({
+      class: ["nmorph-callout", `nmorph-callout--${e.type}`],
+      style: s.value
+    }, u.value), {
+      default: g(() => [
+        f.value ? (a(), r("div", w, [
+          n(l.$slots, "header", {}, () => [
+            n(l.$slots, "title", {}, () => [
+              b(z(e.title), 1)
+            ])
+          ])
+        ])) : S("", !0),
+        p.value ? (a(), r("div", B, [
+          n(l.$slots, "default")
+        ])) : (a(), r("div", {
+          key: 2,
+          class: "nmorph-callout__content",
+          innerHTML: e.content
+        }, null, 8, F))
+      ]),
+      _: 3
+    }, 16, ["class", "style"]));
   }
 });
 export {
-  S as default
+  $ 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{width:fit-content;height:fit-content;margin:1rem;transition:transform .5s ease,opacity .5s ease-in-out;pointer-events:all}.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{--color: var(--nmorph-text-color);display:flex;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--large{--width: 32px;--height: 32px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--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{--color: var(--nmorph-white-color)}.nmorph-notification-provider .nmorph-notification-leave-active.nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-success-color)}.nmorph-notification-provider .nmorph-notification-leave-active.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-error-color)}.nmorph-notification-provider .nmorph-notification-leave-active.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-warn-color)}.nmorph-notification-provider .nmorph-notification-leave-active.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-info-color)}.nmorph-notification-provider .nmorph-notification-leave-active svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-notification-provider .nmorph-notification-leave-active path{stroke:var(--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}
+.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-notification-provider-duration) linear forwards}.nmorph-notification-provider .nmorph-notification-provider__duration-value{flex:0 0 auto;color:currentColor;font-size:var(--font-size-extra-small);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{--color: var(--nmorph-text-color);display:flex;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--large{--width: 32px;--height: 32px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--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{--color: var(--nmorph-white-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-success-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-error-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-warn-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-info-color)}.nmorph-notification-provider .nmorph-notification-leave-active svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-notification-provider .nmorph-notification-leave-active path{stroke:var(--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,9 +1,9 @@
 import './NmorphNotificationProvider.css';
-import { defineComponent as k, ref as d, inject as C, computed as f, watch as w, openBlock as a, createElementBlock as u, normalizeStyle as R, Fragment as p, renderList as v, createBlock as h, TransitionGroup as T, normalizeClass as A, withCtx as B, unref as E, mergeProps as O } from "vue";
-import { NmorphNotificationPlacement as P } from "./types.js";
-import j from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
+import { defineComponent as A, ref as h, inject as F, computed as g, watch as L, onBeforeUnmount as O, openBlock as a, createElementBlock as c, normalizeStyle as I, Fragment as x, renderList as T, createBlock as P, TransitionGroup as S, normalizeClass as D, withCtx as V, createVNode as j, unref as q, mergeProps as G, createElementVNode as _, toDisplayString as U, createCommentVNode as H } from "vue";
+import { NmorphNotificationPlacement as J } from "./types.js";
+import K from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
 /* empty css                                           */
-const q = 500, b = /* @__PURE__ */ k({
+const Q = ["title"], W = { class: "nmorph-notification-provider__duration-value" }, X = 500, re = /* @__PURE__ */ A({
   __name: "NmorphNotificationProvider",
   props: {
     notifications: {},
@@ -11,62 +11,96 @@ const q = 500, b = /* @__PURE__ */ k({
     zIndex: { default: void 0 },
     quantity: { default: 100 }
   },
-  setup(_) {
-    const I = (t) => typeof t.id == "string" && t.id.length > 0, l = d([]), r = d([]), o = d([]), x = Object.values(P), N = (t) => {
-      o.value = o.value.filter((i) => i.id !== t), r.value = r.value.filter((i) => i !== t);
-    }, m = (t, i = !0) => {
-      r.value.includes(t) || (i && !l.value.includes(t) && (l.value = [...l.value, t]), r.value = [...r.value, t], setTimeout(() => N(t), q));
-    }, s = _, y = C("nmorph", void 0), g = f(
-      () => x.map((t) => {
-        const i = o.value.filter(
-          (n) => (n.placement ?? s.placement) === t
-        ), e = Math.max(i.length - s.quantity, 0);
+  setup(b) {
+    const k = (e) => typeof e.id == "string" && e.id.length > 0, d = h([]), i = h([]), n = h([]), s = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map(), w = Object.values(J), l = (e) => typeof e.duration != "number" || !Number.isFinite(e.duration) ? 0 : Math.max(e.duration, 0), N = (e) => l(e) > 0, z = (e) => {
+      if (e < 1e3) return `${e}ms`;
+      const t = e / 1e3;
+      return `${Number.isInteger(t) ? t : Number(t.toFixed(1))}s`;
+    }, y = (e) => z(l(e)), $ = (e) => ({
+      "--nmorph-notification-provider-duration": `${l(e)}ms`
+    }), p = (e) => {
+      const t = s.get(e);
+      t && clearTimeout(t), s.delete(e), u.delete(e);
+    }, C = (e) => {
+      n.value = n.value.filter((t) => t.id !== e), i.value = i.value.filter((t) => t !== e), p(e);
+    }, f = (e, t = !0) => {
+      i.value.includes(e) || (p(e), t && !d.value.includes(e) && (d.value = [...d.value, e]), i.value = [...i.value, e], setTimeout(() => C(e), X));
+    }, E = (e) => {
+      const t = l(e);
+      u.get(e.id) !== t && (p(e.id), t && (s.set(
+        e.id,
+        setTimeout(() => f(e.id), t)
+      ), u.set(e.id, t)));
+    }, m = b, B = F("nmorph", void 0), M = g(
+      () => w.map((e) => {
+        const t = n.value.filter(
+          (o) => (o.placement ?? m.placement) === e
+        ), r = Math.max(t.length - m.quantity, 0);
         return {
-          placement: t,
-          notifications: i.slice(e)
+          placement: e,
+          notifications: t.slice(r)
         };
       })
     );
-    w(
-      () => s.notifications,
-      (t) => {
-        const i = t.filter(I).filter((e) => !l.value.includes(e.id));
-        o.value = o.value.map((e) => {
-          const n = i.find((c) => c.id === e.id);
-          return n ? { ...e, ...n } : e;
-        }), i.forEach((e) => {
-          o.value.some(
-            (c) => c.id === e.id
-          ) || o.value.push(e);
-        }), o.value.filter(
-          (e) => !i.some((n) => n.id === e.id)
-        ).forEach((e) => m(e.id, !1));
+    L(
+      () => m.notifications,
+      (e) => {
+        const t = e.filter(k).filter((r) => !d.value.includes(r.id));
+        n.value = n.value.map((r) => {
+          const o = t.find((v) => v.id === r.id);
+          return o ? { ...r, ...o } : r;
+        }), t.forEach((r) => {
+          n.value.some(
+            (v) => v.id === r.id
+          ) || n.value.push(r);
+        }), t.forEach((r) => E(r)), n.value.filter(
+          (r) => !t.some((o) => o.id === r.id)
+        ).forEach((r) => f(r.id, !1));
       },
       { deep: !0, immediate: !0 }
     );
-    const z = f(() => s.zIndex ?? (y?.zIndex.current.value ?? 1e3) + 1);
-    return (t, i) => (a(), u("div", {
+    const R = g(() => m.zIndex ?? (B?.zIndex.current.value ?? 1e3) + 1);
+    return O(() => {
+      s.forEach((e) => clearTimeout(e)), s.clear(), u.clear();
+    }), (e, t) => (a(), c("div", {
       class: "nmorph-notification-provider",
-      style: R({ zIndex: z.value })
+      style: I({ zIndex: R.value })
     }, [
-      (a(!0), u(p, null, v(g.value, (e) => (a(), h(T, {
-        key: e.placement,
+      (a(!0), c(x, null, T(M.value, (r) => (a(), P(S, {
+        key: r.placement,
         appear: "",
         name: "nmorph-notification",
         tag: "div",
-        class: A(`nmorph-notification-provider__list nmorph-notification-provider__list--${e.placement}`)
+        class: D(`nmorph-notification-provider__list nmorph-notification-provider__list--${r.placement}`)
       }, {
-        default: B(() => [
-          (a(!0), u(p, null, v(e.notifications, (n) => (a(), h(E(j), O({
-            key: n.id,
-            style: { width: n.width },
-            class: [
+        default: V(() => [
+          (a(!0), c(x, null, T(r.notifications, (o) => (a(), c("div", {
+            key: o.id,
+            style: I($(o)),
+            class: D([
               "nmorph-notification-provider__notification",
-              r.value.includes(n.id) && "nmorph-notification-provider__notification--closing"
-            ]
-          }, { ref_for: !0 }, n, {
-            onClose: () => m(n.id)
-          }), null, 16, ["style", "class", "onClose"]))), 128))
+              N(o) && "nmorph-notification-provider__notification--with-duration",
+              i.value.includes(o.id) && "nmorph-notification-provider__notification--closing"
+            ])
+          }, [
+            j(q(K), G({
+              class: "nmorph-notification-provider__alert",
+              style: { width: o.width }
+            }, { ref_for: !0 }, o, {
+              onClose: () => f(o.id)
+            }), null, 16, ["style", "onClose"]),
+            N(o) ? (a(), c("div", {
+              key: `${o.id}-${l(o)}`,
+              class: "nmorph-notification-provider__duration",
+              title: y(o),
+              "aria-hidden": "true"
+            }, [
+              t[0] || (t[0] = _("span", { class: "nmorph-notification-provider__duration-track" }, [
+                _("span", { class: "nmorph-notification-provider__duration-bar" })
+              ], -1)),
+              _("span", W, U(y(o)), 1)
+            ], 8, Q)) : H("", !0)
+          ], 6))), 128))
         ]),
         _: 2
       }, 1032, ["class"]))), 128))
@@ -74,5 +108,5 @@ const q = 500, b = /* @__PURE__ */ k({
   }
 });
 export {
-  b as default
+  re as default
 };