@nmorph/nmorph-ui-kit 2.2.13 → 2.2.15

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

@@ -1,50 +1,53 @@
 import './NmorphBacktop.css';
-import { defineComponent as h, computed as v, ref as l, onMounted as g, onUnmounted as b } from "vue";
-import { useModifiers as N } from "../../../utils/create-modifiers.js";
-import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import y from "../../basic/nmorph-button/NmorphButton.vue.js";
-import E from "../../../assets/icons/chevron-down.svg.js";
-const I = /* @__PURE__ */ h({
+import { defineComponent as b, computed as g, ref as t, onMounted as y, onUnmounted as N } from "vue";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import E from "../../basic/nmorph-button/NmorphButton.vue.js";
+import T from "../../../assets/icons/chevron-down.svg.js";
+const k = /* @__PURE__ */ b({
   __name: "NmorphBacktop",
   props: {
     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: String, 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 }
   },
   emits: ["click"],
-  setup(a, { expose: m, emit: p }) {
-    m();
-    const t = a, i = p, c = v(
-      () => N({
-        "nmorph-backtop": [`${o.value && "show"}`, t.design]
+  setup(m, { expose: c, emit: f }) {
+    c();
+    const r = m, n = f, d = g(
+      () => _({
+        "nmorph-backtop": [`${o.value && "show"}`, r.design]
       })
-    ), e = l(null), r = l(null), o = l(!1), n = (s) => {
-      if (!s) return;
-      const d = s.target;
-      o.value = d.scrollTop > t.visibilityHeight;
-    }, f = () => {
-      i("click"), e.value && e.value.scrollTo({
+    ), e = t(null), u = t(null), i = t(null), o = t(!1), s = t(!1), l = (p) => {
+      if (!p) return;
+      const h = p.target;
+      o.value = h.scrollTop > r.visibilityHeight;
+    }, v = () => {
+      n("click"), e.value && e.value.scrollTo({
         top: 0,
         left: 0,
         behavior: "smooth"
       });
     };
-    g(() => {
-      r.value && (e.value = r.value.parentElement?.parentElement, e.value?.addEventListener("scroll", n));
-    }), b(() => {
-      e.value && e.value?.removeEventListener("scroll", n);
+    y(() => {
+      e.value = u.value?.parentElement ?? i.value?.parentElement?.parentElement ?? null, e.value?.addEventListener("scroll", l), o.value = (e.value?.scrollTop ?? 0) > r.visibilityHeight, s.value = !0;
+    }), N(() => {
+      e.value && e.value?.removeEventListener("scroll", l);
     });
-    const u = { props: t, emit: i, modifiers: c, container: e, selfDOMEl: r, showButton: o, scrollHandler: n, scrollToTopHandler: f, get NmorphButton() {
-      return y;
+    const a = { props: r, emit: n, modifiers: d, container: e, placeholderDOMEl: u, selfDOMEl: i, showButton: o, isMounted: s, scrollHandler: l, scrollToTopHandler: v, get NmorphButton() {
+      return E;
     }, get NmorphIcon() {
-      return _;
+      return q;
     }, get NmorphIconChevronDown() {
-      return E;
+      return T;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  I as default
+  k as default
 };

package/dist/components/navigation/nmorph-breadcrumb/components/nmorph-breadcrumb-item/NmorphBreadcrumbItem.vue2.js

@@ -1,15 +1,15 @@
 import { defineComponent as m, computed as p, inject as d, ref as c, onMounted as i } from "vue";
 import { useModifiers as f } from "../../../../../utils/create-modifiers.js";
 import { generateUUID as l } from "../../../../../utils/common.js";
-const v = /* @__PURE__ */ m({
+const j = /* @__PURE__ */ m({
   __name: "NmorphBreadcrumbItem",
   props: {
-    to: { type: null, required: !1, default: "" },
+    to: { type: [String, Object], required: !1, default: "" },
     replace: { type: Boolean, required: !1, default: !1 }
   },
-  setup(u, { expose: s }) {
-    s();
-    const e = u, n = p(
+  setup(s, { expose: u }) {
+    u();
+    const e = s, n = p(
       () => f({
         "nmorph-breadcrumb-item": []
       })
@@ -22,5 +22,5 @@ const v = /* @__PURE__ */ m({
   }
 });
 export {
-  v as default
+  j as default
 };

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

@@ -1 +1 @@
-.nmorph-dropdown{position:fixed;border-radius:var(--default-border-radius);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-dropdown--closed{z-index:-1000;opacity:0}.nmorph-dropdown{width:var(--nmorph-dropdown-width);min-width:var(--nmorph-dropdown-min-width);max-width:var(--nmorph-dropdown-max-width)}
+.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(--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-dropdown--closed{z-index:-1000;opacity:0}

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

@@ -1,59 +1,59 @@
 import './NmorphDropdown.css';
-import { defineComponent as w, ref as b, toRef as r, computed as i, watch as v } from "vue";
+import { defineComponent as v, ref as w, toRef as r, computed as n, watch as b } from "vue";
 import { useModifiers as x } from "../../../utils/create-modifiers.js";
 import { usePlacement as O } from "../../../hooks/use-placement.js";
 import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const g = /* @__PURE__ */ w({
+const g = /* @__PURE__ */ v({
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
     relativeElement: { type: null, required: !0 },
     placement: { type: null, required: !1, default: "bottom" },
     width: { type: [Number, String], required: !1, default: 160 },
-    minWidth: { type: [Number, String], required: !1 },
-    maxWidth: { type: [Number, String], required: !1 },
+    minWidth: { type: [Number, String], required: !1, default: void 0 },
+    maxWidth: { type: [Number, String], required: !1, default: void 0 },
     xOffset: { type: Number, required: !1, default: 0 },
     yOffset: { type: Number, required: !1, default: 0 },
     fillWidth: { type: Boolean, required: !1, default: !0 },
-    zIndex: { type: Number, required: !1 }
+    zIndex: { type: Number, required: !1, default: void 0 }
   },
   emits: ["on-outside-click"],
-  setup(u, { expose: f, emit: c }) {
+  setup(s, { expose: f, emit: c }) {
     f();
-    const e = u, l = c, d = b(null), { placementCoords: n, placementReady: p, adjustPlacement: m } = O({
+    const e = s, l = c, d = w(null), { placementCoords: i, placementReady: p, adjustPlacement: a } = O({
       initialPlacement: r(e, "placement"),
       contentDOMElement: d,
       relativeElement: r(e, "relativeElement"),
       yOffset: r(e, "yOffset"),
       xOffset: r(e, "xOffset"),
       enabled: r(e, "open")
-    }), h = i(
+    }), h = n(
       () => x({
         "nmorph-dropdown": [`${!e.open && "closed"}`]
       })
-    ), o = (t) => typeof t == "number" ? `${t}px` : t, s = i(
+    ), o = (t) => typeof t == "number" ? `${t}px` : t, u = n(
       () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
-    ), y = i(() => ({
-      "--nmorph-dropdown-width": s.value,
+    ), y = n(() => ({
+      "--nmorph-dropdown-width": u.value,
       "--nmorph-dropdown-min-width": o(e.minWidth) || "auto",
       "--nmorph-dropdown-max-width": o(e.maxWidth) || "none",
-      left: n.value.x,
-      top: n.value.y,
+      left: i.value.x,
+      top: i.value.y,
       visibility: e.open && p.value ? "visible" : "hidden"
     }));
-    v(
+    b(
       () => e.open,
       (t) => {
-        t && m();
+        t && a();
       },
       { flush: "post" }
     );
-    const a = { props: e, emit: l, dropdownDOMRef: d, placementCoords: n, placementReady: p, adjustPlacement: m, modifiers: h, getCssSize: o, width: s, dropdownStyle: y, outsideClickHandler: () => {
+    const m = { props: e, emit: l, dropdownDOMRef: d, placementCoords: i, placementReady: p, adjustPlacement: a, modifiers: h, getCssSize: o, width: u, dropdownStyle: y, outsideClickHandler: () => {
       l("on-outside-click");
     }, get NmorphOverlay() {
       return q;
     } };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }
 });
 export {

package/dist/components/navigation/nmorph-tabs/NmorphTabs.css

@@ -1 +1 @@
-.nmorph-tabs{border-radius:var(--default-border-radius)}.nmorph-tabs .nmorph-tabs__label-list{display:flex;padding:var(--indentation-02);border-top-left-radius:var(--default-border-radius);border-top-right-radius:var(--default-border-radius);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-tabs .nmorph-tabs__label{margin-right:var(--indentation-02);padding:var(--indentation-03);border-radius:var(--default-border-radius);cursor:pointer;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-tabs .nmorph-tabs__label.nmorph-tabs__label--disabled{cursor:not-allowed;opacity:.6}.nmorph-tabs .nmorph-tabs__label.nmorph-tabs__label--selected{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs .nmorph-tabs__content__wrapper{padding:var(--indentation-02);border-bottom-right-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius);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-tabs .nmorph-tabs__content{padding:var(--indentation-03);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs.nmorph-tabs--stretch .nmorph-tabs__label{width:100%}
+.nmorph-tabs{border-radius:var(--default-border-radius)}.nmorph-tabs .nmorph-tabs__label-list{display:flex;padding:var(--indentation-02);background:var(--nmorph-main-color);border-top-left-radius:var(--default-border-radius);border-top-right-radius:var(--default-border-radius);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-tabs .nmorph-tabs__label{margin-right:var(--indentation-02);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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);cursor:pointer}.nmorph-tabs .nmorph-tabs__label.nmorph-tabs__label--disabled{cursor:not-allowed;opacity:.6}.nmorph-tabs .nmorph-tabs__label.nmorph-tabs__label--selected{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs .nmorph-tabs__content__wrapper{padding:var(--indentation-02);background:var(--nmorph-main-color);border-bottom-right-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius);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-tabs .nmorph-tabs__content{padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs.nmorph-tabs--stretch .nmorph-tabs__label{width:100%}

package/dist/components/navigation/nmorph-tabs/NmorphTabs.vue.js

@@ -3,7 +3,7 @@ import m from "./NmorphTabs.vue2.js";
 import { openBlock as n, createElementBlock as s, normalizeClass as t, renderSlot as a, createElementVNode as r, Fragment as i, renderList as d, toDisplayString as l, createCommentVNode as _, withDirectives as h, vShow as p } from "vue";
 /* empty css                */
 import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const b = { class: "nmorph-tabs__label-list" }, v = ["id", "onClick", "custom"], u = { key: 0 }, k = { class: "nmorph-tabs__content__wrapper" }, g = { class: "nmorph-tabs__content" }, y = ["id"], C = { key: 0 };
+const b = { class: "nmorph-tabs__label-list" }, v = ["id", "custom", "onClick"], u = { key: 0 }, k = { class: "nmorph-tabs__content__wrapper" }, g = { class: "nmorph-tabs__content" }, y = ["id"], C = { key: 0 };
 function T(c, I, N, e, V, w) {
   return n(), s(
     "div",
@@ -23,8 +23,8 @@ function T(c, I, N, e, V, w) {
               { "nmorph-tabs__label--selected": o.name === e.props.modelValue },
               { "nmorph-tabs__label--disabled": o.disabled }
             ]]),
-            onClick: (S) => e.changeTab(o),
-            custom: o.disabled
+            custom: o.disabled,
+            onClick: (S) => e.changeTab(o)
           }, [
             e.slots.default ? _("v-if", !0) : (n(), s(
               "div",

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

@@ -1 +1 @@
-.nmorph-overlay{opacity:0;pointer-events:none;position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;background:var(--nmorph-overlay-color);transition:ease-in-out var(--transition-02) opacity;z-index:var(--nmorph-overlay-z-index)}.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-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.vue2.js

@@ -1,13 +1,13 @@
 import './NmorphOverlay.css';
-import { defineComponent as d, computed as o } from "vue";
+import { defineComponent as p, computed as r } from "vue";
 import { useModifiers as u } from "../../../utils/create-modifiers.js";
 import { useZIndex as f } from "../../../hooks/use-z-index.js";
-const y = /* @__PURE__ */ d({
+const y = /* @__PURE__ */ p({
   __name: "NmorphOverlay",
   props: {
     show: { type: Boolean, required: !0 },
     transparent: { type: Boolean, required: !1, default: !1 },
-    zIndex: { type: Number, required: !1 },
+    zIndex: { type: Number, required: !1, default: void 0 },
     teleportTo: { type: null, required: !1, default: "body" },
     disabledTeleport: { type: Boolean, required: !1, default: !1 }
   },
@@ -15,16 +15,16 @@ const y = /* @__PURE__ */ d({
   setup(s, { expose: n, emit: a }) {
     n();
     const e = s, l = f(
-      o(() => e.show),
+      r(() => e.show),
       () => e.zIndex
-    ), p = o(
+    ), d = r(
       () => u({
         "nmorph-overlay": [`${e.show && "show"}`, `${e.transparent && "transparent"}`]
       })
     ), i = () => {
-      r("on-outside-click");
-    }, r = a, t = { props: e, zIndex: l, modifiers: p, clickHandler: i, emit: r };
-    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+      t("on-outside-click");
+    }, t = a, o = { props: e, zIndex: l, modifiers: d, clickHandler: i, emit: t };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
   }
 });
 export {

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;pointer-events:all;transition:transform .5s ease,opacity .5s ease-in-out}.nmorph-notification-provider .nmorph-notification-provider__list{display:flex;flex-direction:column;width:fit-content;max-width:100vw;position:fixed;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;align-items:center;justify-content: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{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}

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

@@ -30,9 +30,8 @@ function h(v, u, y, o, k, x) {
                 class: [
                   "nmorph-notification-provider__notification",
                   o.closingIds.includes(r.id) && "nmorph-notification-provider__notification--closing"
-                ],
-                ref_for: !0
-              }, r, {
+                ]
+              }, { ref_for: !0 }, r, {
                 onClose: () => o.closeHandler(r.id)
               }), null, 16, ["style", "class", "onClose"]))),
               128

package/dist/hooks/use-common-styles.js

@@ -1,11 +1,11 @@
-import { nmorphCombined as p, nmorphInset as t, nmorphOutset as e, title1 as s, title2 as d, title3 as m, title4 as l, body1 as n, body2 as c, body3 as i, body4 as u } from "../utils/theme-style.js";
+import { nmorphCombined as p, nmorphInset as t, nmorphOutset as e, title1 as s, title2 as d, title3 as l, title4 as m, body1 as n, body2 as c, body3 as i, body4 as u } from "../utils/theme-style.js";
 const b = {
   "nmorph-body-4": u,
   "nmorph-body-3": i,
   "nmorph-body-2": c,
   "nmorph-body-1": n,
-  "nmorph-title-4": l,
-  "nmorph-title-3": m,
+  "nmorph-title-4": m,
+  "nmorph-title-3": l,
   "nmorph-title-2": d,
   "nmorph-title-1": s,
   "nmorph--shadow-outset": e,
@@ -186,6 +186,14 @@ const b = {
       background: var(--nmorph-main-color);
     }
 
+    :root[nmorph-data-theme='light'] {
+      --nmorph-scroll-color-scheme: light;
+    }
+
+    :root[nmorph-data-theme='dark'] {
+      --nmorph-scroll-color-scheme: dark;
+    }
+
     .nmorph--basic-component {
       --height: var(--default-thickness-component);
 
@@ -226,6 +234,13 @@ const b = {
       color: var(--nmorph-placeholder-text-color);
     }
 
+    @supports (-webkit-touch-callout: none) {
+      .nmorph-native-input {
+        font-size: 16px;
+        font-size: max(16px, var(--nmorph-ios-native-input-font-size, 16px));
+      }
+    }
+
     .nmorph--fill {
       width: 100%;
     }
@@ -500,6 +515,9 @@ const b = {
 
     .nmorph-scroll {
       --thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
+      color-scheme: var(--nmorph-scroll-color-scheme, light);
+      scrollbar-color: var(--thumb-color) transparent;
+      scrollbar-width: thin;
     }
 
     .nmorph-scroll::-webkit-scrollbar {