@nmorph/nmorph-ui-kit 2.2.59 → 3.0.0

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue.js

@@ -1,15 +1,15 @@
 import './NmorphBacktop.css';
-import a from "./NmorphBacktop.vue2.js";
-import { openBlock as e, createElementBlock as p, createBlock as c, Teleport as i, createElementVNode as t, normalizeStyle as s, normalizeClass as d, withModifiers as m, renderSlot as f, createVNode as r, withCtx as l } from "vue";
+import i from "./NmorphBacktop.vue2.js";
+import { openBlock as e, createElementBlock as c, createBlock as a, Teleport as s, createElementVNode as t, normalizeStyle as d, normalizeClass as p, withModifiers as m, renderSlot as f, createVNode as r, withCtx as l } from "vue";
 /* empty css                   */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
 const _ = { ref: "placeholderDOMEl" };
-function k(n, v, y, o, b, N) {
-  return e(), p(
+function k(n, v, b, o, N, B) {
+  return e(), c(
     "div",
     _,
     [
-      (e(), c(i, {
+      (e(), a(s, {
         to: o.props.teleportTo,
         disabled: !o.isMounted || o.props.teleportDisabled
       }, [
@@ -17,8 +17,8 @@ function k(n, v, y, o, b, N) {
           "div",
           {
             ref: "selfDOMEl",
-            class: d(o.modifiers),
-            style: s(o.styles)
+            class: p(o.modifiers),
+            style: d(o.styles)
           },
           [
             t("div", {
@@ -26,7 +26,7 @@ function k(n, v, y, o, b, N) {
             }, [
               f(n.$slots, "default", {}, () => [
                 r(o.NmorphButton, {
-                  "style-type": o.props.design === "nmorph" ? "default" : "transparent"
+                  design: o.props.design
                 }, {
                   default: l(() => [
                     r(o.NmorphIcon, {
@@ -42,7 +42,7 @@ function k(n, v, y, o, b, N) {
                   ]),
                   _: 1
                   /* STABLE */
-                }, 8, ["style-type"])
+                }, 8, ["design"])
               ])
             ])
           ],
@@ -55,7 +55,7 @@ function k(n, v, y, o, b, N) {
     /* NEED_PATCH */
   );
 }
-const E = /* @__PURE__ */ h(a, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
+const D = /* @__PURE__ */ h(i, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
 export {
-  E as default
+  D as default
 };

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue2.js

@@ -1,5 +1,5 @@
 import './NmorphBacktop.css';
-import { defineComponent as E, computed as v, ref as l, onMounted as T, onUnmounted as k } from "vue";
+import { defineComponent as E, computed as h, ref as l, onMounted as T, onUnmounted as k } from "vue";
 import { useModifiers as q } from "../../../utils/create-modifiers.js";
 import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import I from "../../basic/nmorph-button/NmorphButton.vue.js";
@@ -10,7 +10,7 @@ const Y = /* @__PURE__ */ E({
     right: { type: Number, required: !1, default: 40 },
     bottom: { type: Number, required: !1, default: 40 },
     visibilityHeight: { type: Number, required: !1, default: 200 },
-    design: { type: String, required: !1, default: "nmorph" },
+    design: { type: null, required: !1, default: "nmorph" },
     zIndex: { type: Number, required: !1, default: 10 },
     teleportTo: { type: String, required: !1, default: "body" },
     teleportDisabled: { type: Boolean, required: !1, default: !1 }
@@ -18,19 +18,19 @@ const Y = /* @__PURE__ */ E({
   emits: ["click"],
   setup(b, { expose: w, emit: y }) {
     w();
-    const t = b, s = y, g = v(
+    const t = b, u = y, g = h(
       () => q({
         "nmorph-backtop": [n.value && "show", t.design]
       })
-    ), N = v(() => ({
-      "--nmorph-backtop-right": `${t.right}px`,
-      "--nmorph-backtop-bottom": `${t.bottom}px`,
-      "--nmorph-backtop-z-index": t.zIndex
-    })), u = (r) => r === window, c = (r) => u(r) ? window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0 : r.scrollTop, a = (r) => {
+    ), N = h(() => ({
+      "--nmorph-private-backtop-right": `${t.right}px`,
+      "--nmorph-private-backtop-bottom": `${t.bottom}px`,
+      "--nmorph-private-backtop-z-index": t.zIndex
+    })), s = (r) => r === window, a = (r) => s(r) ? window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0 : r.scrollTop, c = (r) => {
       let o = r?.parentElement ?? null;
       for (; o; ) {
-        const h = window.getComputedStyle(o), _ = h.overflowY || h.overflow;
-        if (["auto", "scroll", "overlay"].includes(_) && o.scrollHeight > o.clientHeight) return o;
+        const v = window.getComputedStyle(o), S = v.overflowY || v.overflow;
+        if (["auto", "scroll", "overlay"].includes(S) && o.scrollHeight > o.clientHeight) return o;
         o = o.parentElement;
       }
       return window;
@@ -39,20 +39,20 @@ const Y = /* @__PURE__ */ E({
         n.value = !1;
         return;
       }
-      n.value = c(e.value) > t.visibilityHeight;
-    }, S = () => {
-      s("click"), e.value && e.value.scrollTo({
+      n.value = a(e.value) > t.visibilityHeight;
+    }, _ = () => {
+      u("click"), e.value && e.value.scrollTo({
         top: 0,
         left: 0,
         behavior: "smooth"
       });
     };
     T(() => {
-      e.value = a(p.value ?? m.value), e.value.addEventListener("scroll", i), i(), d.value = !0;
+      e.value = c(p.value ?? m.value), e.value.addEventListener("scroll", i), i(), d.value = !0;
     }), k(() => {
       e.value && e.value.removeEventListener("scroll", i);
     });
-    const f = { props: t, emit: s, modifiers: g, styles: N, isWindow: u, getScrollTop: c, findScrollableAncestor: a, container: e, placeholderDOMEl: p, selfDOMEl: m, showButton: n, isMounted: d, updateVisibility: i, scrollToTopHandler: S, get NmorphButton() {
+    const f = { props: t, emit: u, modifiers: g, styles: N, isWindow: s, getScrollTop: a, findScrollableAncestor: c, container: e, placeholderDOMEl: p, selfDOMEl: m, showButton: n, isMounted: d, updateVisibility: i, scrollToTopHandler: _, get NmorphButton() {
       return I;
     }, get NmorphIcon() {
       return x;

package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.css

@@ -1 +1 @@
-.nmorph-context-menu{display:inline-block;max-width:100%}.nmorph-context-menu__dropdown{text-align:left}.nmorph-context-menu__dropdown--bottom-sheet{position:fixed!important;inset:auto var(--indentation-03) var(--indentation-03) var(--indentation-03)!important;width:auto!important;max-width:none!important;border-radius:var(--default-border-radius) var(--default-border-radius) 0 0}.nmorph-context-menu__options{display:grid;gap:4px;padding:4px}.nmorph-context-menu__item{display:flex;gap:var(--indentation-02);justify-content:flex-start;align-items:center;box-sizing:border-box;width:100%;min-width:120px;padding:var(--indentation-02) var(--indentation-04);color:var(--nmorph-context-menu-item-color, var(--nmorph-text-color));font:inherit;line-height:var(--line-height-regular);text-align:left;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-context-menu__item-icon,.nmorph-context-menu__item-shortcut{flex:0 0 auto}.nmorph-context-menu__item-copy{display:grid;flex:1 1 auto;min-width:0}.nmorph-context-menu__item-label{color:var(--nmorph-context-menu-item-color, var(--nmorph-text-color));text-align:left}.nmorph-context-menu__item-description,.nmorph-context-menu__item-shortcut{color:var(--nmorph-semi-contrast-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-context-menu__divider{height:1px;margin:2px var(--indentation-02);background:color-mix(in srgb,var(--nmorph-text-color) 16%,transparent)}.nmorph-context-menu__section{padding:var(--indentation-02) var(--indentation-04) var(--indentation-01);color:var(--nmorph-semi-contrast-text-color);font-weight:600;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);text-transform:uppercase}.nmorph-context-menu__item:not(:disabled,.nmorph-context-menu__item--disabled):hover{background:color-mix(in srgb,var(--nmorph-context-menu-item-color, var(--nmorph-text-color)) 12%,transparent)}.nmorph-context-menu__item:disabled,.nmorph-context-menu__item--disabled{cursor:default;opacity:.56;pointer-events:none}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content{justify-content:flex-start;text-align:left}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content span{text-align:left}.nmorph-context-menu__dropdown .nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover{background:color-mix(in srgb,var(--nmorph-button-hover-color, var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))) 12%,transparent)}
+.nmorph-context-menu{display:inline-block;max-width:100%}.nmorph-context-menu__dropdown{text-align:left}.nmorph-context-menu__dropdown--bottom-sheet{position:fixed!important;inset:auto var(--indentation-03) var(--indentation-03) var(--indentation-03)!important;width:auto!important;max-width:none!important;border-radius:var(--default-border-radius) var(--default-border-radius) 0 0}.nmorph-context-menu__options{display:grid;gap:4px;padding:4px}.nmorph-context-menu__item{display:flex;gap:var(--indentation-02);justify-content:flex-start;align-items:center;box-sizing:border-box;width:100%;min-width:120px;padding:var(--indentation-02) var(--indentation-04);color:var(--nmorph-private-context-menu-item-color, var(--nmorph-text-color));font:inherit;line-height:var(--line-height-regular);text-align:left;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-context-menu__item-icon,.nmorph-context-menu__item-shortcut{flex:0 0 auto}.nmorph-context-menu__item-copy{display:grid;flex:1 1 auto;min-width:0}.nmorph-context-menu__item-label{color:var(--nmorph-private-context-menu-item-color, var(--nmorph-text-color));text-align:left}.nmorph-context-menu__item-description,.nmorph-context-menu__item-shortcut{color:var(--nmorph-semi-contrast-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-context-menu__divider{height:1px;margin:2px var(--indentation-02);background:color-mix(in srgb,var(--nmorph-text-color) 16%,transparent)}.nmorph-context-menu__section{padding:var(--indentation-02) var(--indentation-04) var(--indentation-01);color:var(--nmorph-semi-contrast-text-color);font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:var(--nmorph-typography-label-line-height);text-transform:uppercase}.nmorph-context-menu__item:not(:disabled,.nmorph-context-menu__item--disabled):hover{background:color-mix(in srgb,var(--nmorph-private-context-menu-item-color, var(--nmorph-text-color)) 12%,transparent)}.nmorph-context-menu__item:disabled,.nmorph-context-menu__item--disabled{cursor:default;opacity:.56;pointer-events:none}.nmorph-context-menu__dropdown .nmorph-button--plain .nmorph-button__content{justify-content:flex-start;text-align:left}.nmorph-context-menu__dropdown .nmorph-button--plain .nmorph-button__content span{text-align:left}.nmorph-context-menu__dropdown .nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover{background:color-mix(in srgb,var(--nmorph-private-button-hover-color, var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)))) 12%,transparent)}

package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue2.js

@@ -27,7 +27,7 @@ const D = 600, T = 8, ae = /* @__PURE__ */ Z({
   },
   emits: ["update:model-value", "open", "close", "select", "on-outside-click", "on-escape-keydown"],
   setup(I, { expose: R, emit: X }) {
-    const r = I, o = X, g = n(null), E = n(null), y = n("point"), b = n(!!r.modelValue), a = n(null), d = n(null), u = n(null), h = n(!1), f = n(null), v = c(() => typeof r.modelValue == "boolean" ? r.modelValue : b.value), Y = c(() => r.options.length > 0), x = c(() => r.trigger === "longpress"), O = c(() => r.trigger === "contextmenu" || r.trigger === "both"), V = c(
+    const r = I, o = X, g = n(null), E = n(null), y = n("point"), b = n(!!r.modelValue), a = n(null), d = n(null), u = n(null), v = n(!1), f = n(null), h = c(() => typeof r.modelValue == "boolean" ? r.modelValue : b.value), Y = c(() => r.options.length > 0), x = c(() => r.trigger === "longpress"), O = c(() => r.trigger === "contextmenu" || r.trigger === "both"), V = c(
       () => r.options.map((e, t) => typeof e == "string" || typeof e == "number" ? {
         key: `${e}-${t}`,
         type: "item",
@@ -78,7 +78,7 @@ const D = 600, T = 8, ae = /* @__PURE__ */ Z({
         toJSON: () => ({})
       })
     }), w = (e) => {
-      const t = v.value;
+      const t = h.value;
       b.value = e, o("update:model-value", e), t && !e && o("close");
     }, i = () => {
       w(!1);
@@ -101,9 +101,9 @@ const D = 600, T = 8, ae = /* @__PURE__ */ Z({
       const l = t.getBoundingClientRect();
       return e.clientX >= l.left && e.clientX <= l.right && e.clientY >= l.top && e.clientY <= l.bottom;
     }, S = (e) => {
-      !v.value || r.disabled || !O.value || N(e) && (e.preventDefault(), e.stopPropagation(), p(e.clientX, e.clientY, e));
+      !h.value || r.disabled || !O.value || N(e) && (e.preventDefault(), e.stopPropagation(), p(e.clientX, e.clientY, e));
     }, $ = (e) => {
-      if (h.value) {
+      if (v.value) {
         m(), e.preventDefault();
         return;
       }
@@ -126,9 +126,9 @@ const D = 600, T = 8, ae = /* @__PURE__ */ Z({
     }, s = () => {
       a.value && clearTimeout(a.value), a.value = null, d.value = null, u.value = null;
     }, m = () => {
-      f.value && clearTimeout(f.value), h.value = !1, f.value = null;
+      f.value && clearTimeout(f.value), v.value = !1, f.value = null;
     }, P = () => {
-      m(), h.value = !0, f.value = setTimeout(m, 700);
+      m(), v.value = !0, f.value = setTimeout(m, 700);
     }, K = (e) => {
       r.disabled || !x.value || e.pointerType !== "touch" && e.pointerType !== "pen" || (s(), d.value = e.pointerId, u.value = { x: e.clientX, y: e.clientY }, a.value = setTimeout(() => {
         P(), s(), p(e.clientX, e.clientY, e);
@@ -140,12 +140,12 @@ const D = 600, T = 8, ae = /* @__PURE__ */ Z({
     }, U = (e) => {
       d.value === e.pointerId && s();
     }, Q = (e) => ({
-      "--nmorph-context-menu-item-color": e.color
+      "--nmorph-private-context-menu-item-color": e.color
     }), _ = () => {
       r.closeOnScroll && y.value === "point" && i();
     };
     B(
-      v,
+      h,
       (e) => {
         typeof window > "u" || (e ? (window.addEventListener("scroll", _, { passive: !0, capture: !0 }), document.addEventListener("contextmenu", S, !0)) : (window.removeEventListener("scroll", _, !0), document.removeEventListener("contextmenu", S, !0)));
       },
@@ -153,7 +153,7 @@ const D = 600, T = 8, ae = /* @__PURE__ */ Z({
     ), ee(() => {
       typeof window < "u" && window.removeEventListener("scroll", _, !0), typeof document < "u" && document.removeEventListener("contextmenu", S, !0), s(), m();
     }), R({ close: i, openAt: p, openAtElement: k });
-    const L = { LONG_PRESS_DELAY_IN_MS: D, LONG_PRESS_MOVE_TOLERANCE_IN_PX: T, props: r, emit: o, triggerDOMRef: g, relativeElement: E, anchorType: y, openState: b, longPressTimer: a, longPressPointerId: d, longPressStartPoint: u, suppressNextClick: h, suppressNextClickTimer: f, isOpen: v, hasOptions: Y, isLongPressTrigger: x, isContextMenuTrigger: O, normalizedOptions: V, dropdownContentClass: A, createPointElement: C, setOpen: w, close: i, openAt: p, openAtElement: k, contextMenuHandler: W, isEventInsideTrigger: N, documentContextMenuHandler: S, clickHandler: $, keydownHandler: j, outsideClickHandler: z, escapeHandler: F, optionClickHandler: q, optionKeydownHandler: G, clearLongPressTimer: s, clearClickSuppression: m, suppressNextClickTemporarily: P, pointerDownHandler: K, pointerMoveHandler: J, pointerEndHandler: U, getOptionStyle: Q, scrollHandler: _, NmorphDropdown: te, get NmorphIcon() {
+    const L = { LONG_PRESS_DELAY_IN_MS: D, LONG_PRESS_MOVE_TOLERANCE_IN_PX: T, props: r, emit: o, triggerDOMRef: g, relativeElement: E, anchorType: y, openState: b, longPressTimer: a, longPressPointerId: d, longPressStartPoint: u, suppressNextClick: v, suppressNextClickTimer: f, isOpen: h, hasOptions: Y, isLongPressTrigger: x, isContextMenuTrigger: O, normalizedOptions: V, dropdownContentClass: A, createPointElement: C, setOpen: w, close: i, openAt: p, openAtElement: k, contextMenuHandler: W, isEventInsideTrigger: N, documentContextMenuHandler: S, clickHandler: $, keydownHandler: j, outsideClickHandler: z, escapeHandler: F, optionClickHandler: q, optionKeydownHandler: G, clearLongPressTimer: s, clearClickSuppression: m, suppressNextClickTemporarily: P, pointerDownHandler: K, pointerMoveHandler: J, pointerEndHandler: U, getOptionStyle: Q, scrollHandler: _, NmorphDropdown: te, get NmorphIcon() {
       return re;
     } };
     return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.css

@@ -1 +1 @@
-.nmorph-dropdown{position:fixed;width:var(--nmorph-dropdown-width);min-width:var(--nmorph-dropdown-min-width);max-width:var(--nmorph-dropdown-max-width);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset)}.nmorph-dropdown--closed{z-index:-1000;opacity:0}.nmorph-dropdown--hide-shadow{box-shadow:none}
+.nmorph-dropdown{position:fixed;width:var(--nmorph-private-dropdown-width);min-width:var(--nmorph-private-dropdown-min-width);max-width:var(--nmorph-private-dropdown-max-width);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset)}.nmorph-dropdown--closed{z-index:-1000;opacity:0}.nmorph-dropdown--hide-shadow{box-shadow:none}.nmorph-dropdown--plain{border:var(--nmorph-plain-border);box-shadow:none}

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

@@ -23,7 +23,8 @@ const B = /* @__PURE__ */ y({
     role: { type: String, required: !1, default: "listbox" },
     ariaLabel: { type: String, required: !1, default: "" },
     contentClass: { type: String, required: !1, default: "" },
-    hideShadow: { type: Boolean, required: !1, default: !1 }
+    hideShadow: { type: Boolean, required: !1, default: !1 },
+    design: { type: null, required: !1, default: "nmorph" }
   },
   emits: ["on-outside-click", "on-escape-keydown"],
   setup(u, { expose: p, emit: f }) {
@@ -37,15 +38,15 @@ const B = /* @__PURE__ */ y({
       enabled: t(e, "open")
     }), m = i(
       () => q({
-        "nmorph-dropdown": [!e.open && "closed", e.hideShadow && "hide-shadow"]
+        "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-dropdown-width": n.value,
+      "--nmorph-private-dropdown-width": n.value,
       ...x({
-        "--nmorph-dropdown-min-width": e.minWidth === void 0 ? "auto" : e.minWidth,
-        "--nmorph-dropdown-max-width": e.maxWidth === void 0 ? "none" : e.maxWidth
+        "--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,

package/dist/components/navigation/nmorph-stepper/NmorphStepper.vue2.js

@@ -14,20 +14,20 @@ const N = 28, R = 320, T = 6, W = 42, q = 1.2, O = 350, le = /* @__PURE__ */ Z({
   },
   emits: ["update:model-value", "change"],
   setup(X, { expose: B, emit: A }) {
-    const n = X, y = A, I = i(!1), c = i(null), x = i(!1), p = i(null), a = i(null), f = i(!1), d = (e) => Number.isFinite(e) ? Math.trunc(e ?? 0) : 0, v = o(() => Math.max(0, d(n.count))), _ = (e) => {
+    const a = X, y = A, I = i(!1), c = i(null), x = i(!1), f = i(null), n = i(null), p = i(!1), d = (e) => Number.isFinite(e) ? Math.trunc(e ?? 0) : 0, v = o(() => Math.max(0, d(a.count))), _ = (e) => {
       const t = v.value, r = d(e);
-      return t <= 0 ? 0 : n.loop ? (r % t + t) % t : Math.min(Math.max(r, 0), t - 1);
-    }, m = o(() => _(n.modelValue)), l = o(() => !n.disabled && v.value > 1), Y = o(() => l.value ? 0 : void 0), K = o(() => ({
+      return t <= 0 ? 0 : a.loop ? (r % t + t) % t : Math.min(Math.max(r, 0), t - 1);
+    }, m = o(() => _(a.modelValue)), l = o(() => !a.disabled && v.value > 1), Y = o(() => l.value ? 0 : void 0), K = o(() => ({
       transform: `translateX(-${m.value * 100}%)`
     })), z = o(
       () => re({
-        "nmorph-stepper": [n.disabled && "disabled", l.value && "interactive"]
+        "nmorph-stepper": [a.disabled && "disabled", l.value && "interactive"]
       })
     ), D = (e, t) => e < t ? "previous" : "next", C = (e, t, r) => {
       const V = { index: e, previousIndex: t, direction: r };
       y("update:model-value", e), y("change", V);
     }, b = (e) => {
-      if (n.disabled) return;
+      if (a.disabled) return;
       const t = m.value, r = _(e);
       r !== t && C(r, t, D(r, t));
     }, M = (e) => {
@@ -42,34 +42,34 @@ const N = 28, R = 320, T = 6, W = 42, q = 1.2, O = 350, le = /* @__PURE__ */ Z({
       const t = Math.abs(e.deltaX), r = Math.abs(e.deltaY);
       return t === 0 && r === 0 ? 0 : t >= r ? e.deltaX : e.deltaY;
     }, U = (e) => {
-      if (!l.value || !n.wheel) return;
+      if (!l.value || !a.wheel) return;
       const t = L(e);
       Math.abs(t) < N || (e.preventDefault(), !I.value && (t > 0 ? u() : s(), k()));
     }, F = (e) => {
       l.value && (e.key === "ArrowRight" && (e.preventDefault(), u()), e.key === "ArrowLeft" && (e.preventDefault(), s()));
     }, h = () => {
-      p.value && clearTimeout(p.value), p.value = null, x.value = !1;
+      f.value && clearTimeout(f.value), f.value = null, x.value = !1;
     }, w = () => {
-      h(), x.value = !0, p.value = setTimeout(h, O);
-    }, P = (e) => a.value ? {
-      x: e.clientX - a.value.x,
-      y: e.clientY - a.value.y
+      h(), x.value = !0, f.value = setTimeout(h, O);
+    }, P = (e) => n.value ? {
+      x: e.clientX - n.value.x,
+      y: e.clientY - n.value.y
     } : null, g = (e, t) => Math.abs(e.x) >= t && Math.abs(e.x) > Math.abs(e.y) * q, j = (e) => {
-      !l.value || !n.swipe || e.pointerType === "mouse" && e.button !== 0 || (e.currentTarget?.setPointerCapture?.(e.pointerId), a.value = {
+      !l.value || !a.swipe || e.pointerType === "mouse" && e.button !== 0 || (e.currentTarget?.setPointerCapture?.(e.pointerId), n.value = {
         x: e.clientX,
         y: e.clientY,
         pointerId: e.pointerId ?? null
-      }, f.value = !1);
+      }, p.value = !1);
     }, G = (e) => {
-      if (!a.value || a.value.pointerId !== null && e.pointerId !== a.value.pointerId) return;
+      if (!n.value || n.value.pointerId !== null && e.pointerId !== n.value.pointerId) return;
       const t = P(e);
-      !t || !g(t, T) || (f.value = !0, e.preventDefault());
+      !t || !g(t, T) || (p.value = !0, e.preventDefault());
     }, E = () => {
-      a.value = null, f.value = !1;
+      n.value = null, p.value = !1;
     }, $ = (e) => {
-      if (a.value?.pointerId !== null && e.pointerId !== a.value.pointerId) return;
+      if (!n.value || n.value.pointerId !== null && e.pointerId !== n.value.pointerId) return;
       const t = P(e), r = !!(t && g(t, T));
-      e.currentTarget?.releasePointerCapture?.(e.pointerId), (r || f.value) && w(), t && g(t, W) && (t.x > 0 ? s() : u()), E();
+      e.currentTarget?.releasePointerCapture?.(e.pointerId), (r || p.value) && w(), t && g(t, W) && (t.x > 0 ? s() : u()), E();
     }, J = (e) => {
       x.value && (e.preventDefault(), e.stopPropagation(), h());
     }, Q = o(() => ({
@@ -80,7 +80,7 @@ const N = 28, R = 320, T = 6, W = 42, q = 1.2, O = 350, le = /* @__PURE__ */ Z({
       previous: s
     }));
     ee(
-      () => [n.modelValue, v.value, n.loop],
+      () => [a.modelValue, v.value, a.loop],
       ([e]) => {
         const t = _(e);
         t !== e && C(t, d(e), D(t, d(e)));
@@ -89,7 +89,7 @@ const N = 28, R = 320, T = 6, W = 42, q = 1.2, O = 350, le = /* @__PURE__ */ Z({
     ), te(() => {
       S(), h();
     }), B({ goTo: b, next: u, previous: s });
-    const H = { WHEEL_THRESHOLD: N, WHEEL_LOCK_IN_MS: R, DRAG_CLICK_THRESHOLD: T, SWIPE_THRESHOLD: W, SWIPE_AXIS_RATIO: q, CLICK_SUPPRESSION_IN_MS: O, props: n, emit: y, wheelLocked: I, wheelUnlockTimer: c, suppressClick: x, suppressClickTimer: p, pointerStart: a, pointerDragging: f, toFiniteInteger: d, normalizedCount: v, normalizeIndex: _, currentIndex: m, isInteractive: l, tabIndex: Y, trackStyle: K, modifiers: z, getDirection: D, emitStepChange: C, goTo: b, move: M, next: u, previous: s, clearWheelLock: S, lockWheel: k, getWheelDelta: L, handleWheel: U, handleKeydown: F, clearClickSuppression: h, suppressNextClick: w, getPointerDiff: P, isHorizontalDrag: g, handlePointerDown: j, handlePointerMove: G, clearPointer: E, handlePointerEnd: $, handleClickCapture: J, indicatorSlotProps: Q };
+    const H = { WHEEL_THRESHOLD: N, WHEEL_LOCK_IN_MS: R, DRAG_CLICK_THRESHOLD: T, SWIPE_THRESHOLD: W, SWIPE_AXIS_RATIO: q, CLICK_SUPPRESSION_IN_MS: O, props: a, emit: y, wheelLocked: I, wheelUnlockTimer: c, suppressClick: x, suppressClickTimer: f, pointerStart: n, pointerDragging: p, toFiniteInteger: d, normalizedCount: v, normalizeIndex: _, currentIndex: m, isInteractive: l, tabIndex: Y, trackStyle: K, modifiers: z, getDirection: D, emitStepChange: C, goTo: b, move: M, next: u, previous: s, clearWheelLock: S, lockWheel: k, getWheelDelta: L, handleWheel: U, handleKeydown: F, clearClickSuppression: h, suppressNextClick: w, getPointerDiff: P, isHorizontalDrag: g, handlePointerDown: j, handlePointerMove: G, clearPointer: E, handlePointerEnd: $, handleClickCapture: J, indicatorSlotProps: Q };
     return Object.defineProperty(H, "__isScriptSetup", { enumerable: !1, value: !0 }), H;
   }
 });

package/dist/components/others/nmorph-divider/NmorphDivider.css

@@ -1 +1 @@
-.nmorph-divider{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-divider.nmorph-divider--horizontal{width:100%;height:2px}.nmorph-divider.nmorph-divider--vertical{align-self:stretch;width:2px;height:auto}
+.nmorph-divider{background:var(--nmorph-main-color)}.nmorph-divider.nmorph-divider--nmorph{box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-divider.nmorph-divider--plain{background:var(--nmorph-plain-border-color)}.nmorph-divider.nmorph-divider--horizontal{width:100%;height:2px}.nmorph-divider.nmorph-divider--vertical{align-self:stretch;width:2px;height:auto}

package/dist/components/others/nmorph-divider/NmorphDivider.vue2.js

@@ -1,21 +1,22 @@
 import './NmorphDivider.css';
 import { defineComponent as n, computed as p } from "vue";
 import { useModifiers as s } from "../../../utils/create-modifiers.js";
-const u = /* @__PURE__ */ n({
+const f = /* @__PURE__ */ n({
   __name: "NmorphDivider",
   props: {
-    direction: { type: String, required: !1, default: "horizontal" }
+    direction: { type: String, required: !1, default: "horizontal" },
+    design: { type: null, required: !1, default: "nmorph" }
   },
-  setup(o, { expose: t }) {
-    t();
-    const e = o, i = p(
+  setup(t, { expose: i }) {
+    i();
+    const e = t, o = p(
       () => s({
-        "nmorph-divider": [e.direction]
+        "nmorph-divider": [e.direction, e.design]
       })
-    ), r = { props: e, modifiers: i };
+    ), r = { props: e, modifiers: o };
     return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
   }
 });
 export {
-  u as default
+  f as default
 };

package/dist/components/others/nmorph-overlay/NmorphOverlay.css

@@ -1 +1 @@
-.nmorph-overlay{position:fixed;top:0;left:0;z-index:var(--nmorph-overlay-z-index);width:100vw;height:100vh;overflow:hidden;background:var(--nmorph-overlay-color);opacity:0;transition:ease-in-out var(--transition-02) opacity;pointer-events:none}.nmorph-overlay.nmorph-overlay--transparent{background:transparent}.nmorph-overlay.nmorph-overlay--show{opacity:1;pointer-events:auto}
+.nmorph-overlay{position:fixed;top:0;left:0;z-index:var(--nmorph-private-overlay-z-index);width:100vw;height:100vh;overflow:hidden;background:var(--nmorph-overlay-color);opacity:0;transition:ease-in-out var(--transition-02) opacity;pointer-events:none}.nmorph-overlay.nmorph-overlay--transparent{background:transparent}.nmorph-overlay.nmorph-overlay--show{opacity:1;pointer-events:auto}

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

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

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

@@ -1,39 +1,39 @@
 import './NmorphNotificationProvider.css';
 import m from "./NmorphNotificationProvider.vue2.js";
-import { openBlock as i, createElementBlock as t, normalizeStyle as a, Fragment as l, renderList as d, createBlock as _, TransitionGroup as h, normalizeClass as s, withCtx as f, createVNode as v, mergeProps as u, createElementVNode as c, toDisplayString as N, createCommentVNode as p } from "vue";
+import { openBlock as e, createElementBlock as i, normalizeStyle as n, Fragment as a, renderList as d, createBlock as h, TransitionGroup as _, normalizeClass as s, withCtx as v, createVNode as u, createElementVNode as c, toDisplayString as f, createCommentVNode as p } from "vue";
 /* empty css                                */
 import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const g = ["title"], k = {
+const b = ["title"], k = {
   key: 0,
   class: "nmorph-notification-provider__duration-value"
 };
-function D(x, n, b, r, C, I) {
-  return i(), t(
+function N(g, l, D, r, w, I) {
+  return e(), i(
     "div",
     {
       class: "nmorph-notification-provider",
-      style: a({ zIndex: r.zIndex })
+      style: n({ zIndex: r.zIndex })
     },
     [
-      (i(!0), t(
-        l,
+      (e(!0), i(
+        a,
         null,
-        d(r.notificationGroups, (e) => (i(), _(h, {
-          key: e.placement,
+        d(r.notificationGroups, (t) => (e(), h(_, {
+          key: t.placement,
           appear: "",
           name: "nmorph-notification",
           tag: "div",
-          class: s(`nmorph-notification-provider__list nmorph-notification-provider__list--${e.placement}`)
+          class: s(`nmorph-notification-provider__list nmorph-notification-provider__list--${t.placement}`)
         }, {
-          default: f(() => [
-            (i(!0), t(
-              l,
+          default: v(() => [
+            (e(!0), i(
+              a,
               null,
-              d(e.notifications, (o) => (i(), t(
+              d(t.notifications, (o) => (e(), i(
                 "div",
                 {
                   key: o.id,
-                  style: a(r.getNotificationStyle(o)),
+                  style: n(r.getNotificationStyle(o)),
                   class: s([
                     "nmorph-notification-provider__notification",
                     r.hasDurationIndicator(o) && "nmorph-notification-provider__notification--with-duration",
@@ -41,19 +41,29 @@ function D(x, n, b, r, C, I) {
                   ])
                 },
                 [
-                  v(r.NmorphAlert, u({
+                  u(r.NmorphAlert, {
+                    id: o.id,
                     class: "nmorph-notification-provider__alert",
-                    style: { width: o.width }
-                  }, { ref_for: !0 }, r.getNotificationAlertProps(o), {
+                    style: n({ width: o.width }),
+                    type: o.type,
+                    closable: o.closable,
+                    title: o.title,
+                    content: o.content,
+                    fill: o.fill,
+                    "show-icon": o.showIcon,
+                    bordered: o.bordered,
+                    html: o.html,
+                    "close-icon-position": o.closeIconPosition,
+                    "background-color": o.backgroundColor,
                     onClose: () => r.closeHandler(o.id)
-                  }), null, 16, ["style", "onClose"]),
-                  r.hasDurationIndicator(o) ? (i(), t("div", {
+                  }, 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", {
                     key: `${o.id}-${r.getNotificationDuration(o)}`,
                     class: "nmorph-notification-provider__duration",
                     title: r.hasDurationValue(o) ? r.getNotificationDurationLabel(o) : void 0,
                     "aria-hidden": "true"
                   }, [
-                    n[0] || (n[0] = c(
+                    l[0] || (l[0] = c(
                       "span",
                       { class: "nmorph-notification-provider__duration-track" },
                       [
@@ -62,14 +72,14 @@ function D(x, n, b, r, C, I) {
                       -1
                       /* CACHED */
                     )),
-                    r.hasDurationValue(o) ? (i(), t(
+                    r.hasDurationValue(o) ? (e(), i(
                       "span",
                       k,
-                      N(r.getNotificationDurationLabel(o)),
+                      f(r.getNotificationDurationLabel(o)),
                       1
                       /* TEXT */
                     )) : p("v-if", !0)
-                  ], 8, g)) : p("v-if", !0)
+                  ], 8, b)) : p("v-if", !0)
                 ],
                 6
                 /* CLASS, STYLE */
@@ -89,7 +99,7 @@ function D(x, n, b, r, C, I) {
     /* STYLE */
   );
 }
-const B = /* @__PURE__ */ y(m, [["render", D], ["__file", "/builds/ketjo/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
+const B = /* @__PURE__ */ y(m, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
 export {
   B as default
 };