@nmorph/nmorph-ui-kit 2.2.13 → 2.2.16

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

@@ -1,61 +1,67 @@
 import './NmorphDropdown.css';
 import { defineComponent as w, ref as b, toRef as r, computed as i, watch as v } 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({
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { usePlacement as x } from "../../../hooks/use-placement.js";
+import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+const k = /* @__PURE__ */ w({
   __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 },
+    closeOnEscape: { type: Boolean, required: !1, default: !0 },
+    trapFocus: { type: Boolean, required: !1, default: !1 },
+    role: { type: String, required: !1, default: "listbox" },
+    ariaLabel: { type: String, required: !1, default: "" }
   },
-  emits: ["on-outside-click"],
-  setup(u, { expose: f, emit: c }) {
-    f();
-    const e = u, l = c, d = b(null), { placementCoords: n, placementReady: p, adjustPlacement: m } = O({
+  emits: ["on-outside-click", "on-escape-keydown"],
+  setup(f, { expose: m, emit: c }) {
+    m();
+    const e = f, n = c, d = b(null), { placementCoords: l, placementReady: a, adjustPlacement: s } = x({
       initialPlacement: r(e, "placement"),
       contentDOMElement: d,
       relativeElement: r(e, "relativeElement"),
       yOffset: r(e, "yOffset"),
       xOffset: r(e, "xOffset"),
       enabled: r(e, "open")
-    }), h = i(
-      () => x({
+    }), y = i(
+      () => q({
         "nmorph-dropdown": [`${!e.open && "closed"}`]
       })
-    ), o = (t) => typeof t == "number" ? `${t}px` : t, s = i(
+    ), o = (t) => typeof t == "number" ? `${t}px` : t, p = i(
       () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
-    ), y = i(() => ({
-      "--nmorph-dropdown-width": s.value,
+    ), h = i(() => ({
+      "--nmorph-dropdown-width": p.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,
-      visibility: e.open && p.value ? "visible" : "hidden"
+      left: l.value.x,
+      top: l.value.y,
+      visibility: e.open && a.value ? "visible" : "hidden"
     }));
     v(
       () => e.open,
       (t) => {
-        t && m();
+        t && s();
       },
       { 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: () => {
-      l("on-outside-click");
+    const u = { props: e, emit: n, dropdownDOMRef: d, placementCoords: l, placementReady: a, adjustPlacement: s, modifiers: y, getCssSize: o, width: p, dropdownStyle: h, outsideClickHandler: () => {
+      n("on-outside-click");
+    }, escapeHandler: () => {
+      n("on-escape-keydown");
     }, get NmorphOverlay() {
-      return q;
+      return O;
     } };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
   }
 });
 export {
-  g as default
+  k as default
 };

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.vue.js

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

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

@@ -1,32 +1,79 @@
 import './NmorphOverlay.css';
-import { defineComponent as d, computed as o } 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({
+import { defineComponent as _, computed as i, ref as q, watch as g, onBeforeUnmount as B, nextTick as A } from "vue";
+import { useModifiers as F } from "../../../utils/create-modifiers.js";
+import { useZIndex as I } from "../../../hooks/use-z-index.js";
+const L = /* @__PURE__ */ _({
   __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 }
+    disabledTeleport: { type: Boolean, required: !1, default: !1 },
+    closeOnEscape: { type: Boolean, required: !1, default: !0 },
+    trapFocus: { type: Boolean, required: !1, default: !1 },
+    restoreFocus: { type: Boolean, required: !1, default: !0 }
   },
-  emits: ["on-outside-click"],
-  setup(s, { expose: n, emit: a }) {
-    n();
-    const e = s, l = f(
-      o(() => e.show),
-      () => e.zIndex
-    ), p = o(
-      () => u({
-        "nmorph-overlay": [`${e.show && "show"}`, `${e.transparent && "transparent"}`]
+  emits: ["on-outside-click", "on-escape-keydown"],
+  setup(b, { expose: v, emit: h }) {
+    v();
+    const t = b, E = I(
+      i(() => t.show),
+      () => t.zIndex
+    ), w = i(
+      () => F({
+        "nmorph-overlay": [`${t.show && "show"}`, `${t.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;
+    ), k = i(() => t.disabledTeleport || !t.show || typeof document > "u"), x = () => {
+      s("on-outside-click");
+    }, s = h, n = q(null);
+    let o = null;
+    const d = [
+      "a[href]",
+      "button:not([disabled])",
+      "textarea:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(","), u = () => n.value ? Array.from(n.value.querySelectorAll(d)).filter(
+      (e) => e.getAttribute("aria-hidden") !== "true"
+    ) : [], c = async () => {
+      if (!t.trapFocus) return;
+      await A(), (u()[0] || n.value)?.focus();
+    }, l = (e) => {
+      if (!t.show) return;
+      if (e.key === "Escape" && t.closeOnEscape) {
+        e.preventDefault(), s("on-escape-keydown");
+        return;
+      }
+      if (e.key !== "Tab" || !t.trapFocus) return;
+      const r = u();
+      if (!r.length) {
+        e.preventDefault(), n.value?.focus();
+        return;
+      }
+      const m = r[0], y = r[r.length - 1];
+      e.shiftKey && document.activeElement === m ? (e.preventDefault(), y.focus()) : !e.shiftKey && document.activeElement === y && (e.preventDefault(), m.focus());
+    }, f = () => {
+      typeof document > "u" || document.addEventListener("keydown", l);
+    }, a = () => {
+      typeof document > "u" || document.removeEventListener("keydown", l);
+    };
+    g(
+      () => t.show,
+      (e) => {
+        typeof document > "u" || (e ? (o = document.activeElement, f(), c()) : (a(), t.restoreFocus && o?.focus?.(), o = null));
+      },
+      { immediate: !0, flush: "post" }
+    ), B(a);
+    const p = { props: t, zIndex: E, modifiers: w, renderInline: k, clickHandler: x, emit: s, contentRef: n, get previousActiveElement() {
+      return o;
+    }, set previousActiveElement(e) {
+      o = e;
+    }, focusableSelector: d, getFocusableElements: u, focusContent: c, keydownHandler: l, addKeydownListener: f, removeKeydownListener: a };
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });
 export {
-  y as default
+  L 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;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,18 +1,18 @@
-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";
-const b = {
-  "nmorph-body-4": u,
-  "nmorph-body-3": i,
+import { nmorphCombined as p, nmorphInset as r, nmorphOutset as e, title1 as s, title2 as d, title3 as l, title4 as m, body1 as n, body2 as c, body3 as a, body4 as b } from "../utils/theme-style.js";
+const u = {
+  "nmorph-body-4": b,
+  "nmorph-body-3": a,
   "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,
-  "nmorph--shadow-inset": t,
+  "nmorph--shadow-inset": r,
   "nmorph--shadow-combined": p
 }, v = () => {
-  let r = `
+  let t = `
     :root {
       --font-size-tiny: 10px;
       --font-size-extra-small: 12px;
@@ -54,6 +54,30 @@ const b = {
       --indentation-04: 16px;
 
       --base-shadow-blur: calc(var(--base-shadow-width) * var(--base-shadow-blur-coefficient));
+      --nmorph-shadow-outset:
+        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-shadow-inset:
+        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-shadow-combined:
+        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),
+        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(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-light-shade-color);
+      --nmorph-shadow-combined-dark:
+        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),
+        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(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-dark-shade-color);
       --nmorph-wrapper-padding: calc(var(--base-shadow-width) * 1.5);
 
       --transition-04: 0.4s;
@@ -186,6 +210,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);
 
@@ -211,7 +243,7 @@ const b = {
     }
 
     .nmorph--thin-component.nmorph-native-input {
-      ${i()}
+      ${a()}
     }
 
     .nmorph-native-input:focus {
@@ -226,6 +258,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%;
     }
@@ -263,14 +302,7 @@ const b = {
     .nmorph-avatar.nmorph--shadow-combined {
       border: var(--nmorph-avatar-frame-border) solid var(--nmorph-main-color);
       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),
-        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(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
-          var(--nmorph-dark-shade-color);
+      box-shadow: var(--nmorph-shadow-combined-dark);
     }
 
     .nmorph-avatar > .nmorph-image > img {
@@ -379,7 +411,7 @@ const b = {
       text-indent: var(--nmorph-text-input-indentation);
       border: none;
       border-radius: var(--default-border-radius);
-      ${t()}
+      ${r()}
     }
 
     .nmorph-text-input--with-action input {
@@ -405,21 +437,13 @@ const b = {
     .nmorph-text-input input:-webkit-autofill:active {
       -webkit-text-fill-color: var(--nmorph-text-color);
       caret-color: var(--nmorph-text-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),
-        inset 0 0 0 1000px var(--nmorph-main-color);
+      box-shadow: var(--nmorph-shadow-inset), inset 0 0 0 1000px var(--nmorph-main-color);
     }
 
     .nmorph-text-input input:-webkit-autofill:focus {
       -webkit-text-fill-color: var(--nmorph-focus-text-color);
       caret-color: var(--nmorph-focus-text-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),
-        inset 0 0 0 1000px var(--nmorph-accent-color);
+      box-shadow: var(--nmorph-shadow-outset), inset 0 0 0 1000px var(--nmorph-accent-color);
       outline: none;
     }
 
@@ -500,6 +524,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 {
@@ -512,7 +539,7 @@ const b = {
 
     .nmorph-scroll::-webkit-scrollbar-track {
       border-radius: var(--border-radius-40);
-      ${t()}
+      ${r()}
     }
 
     .nmorph-scroll::-webkit-scrollbar-thumb {
@@ -524,19 +551,19 @@ const b = {
       background-color: transparent;
     }
   `;
-  for (const [a, h] of Object.entries(b))
-    r += `
-.${a} {
+  for (const [i, h] of Object.entries(u))
+    t += `
+.${i} {
   ${h()}
 }
 `;
-  return r;
-}, x = () => {
+  return t;
+}, g = () => {
   if (typeof document > "u" || document.getElementById("nmorph-common-styles")) return;
   const o = document.createElement("style");
   o.id = "nmorph-common-styles", o.innerHTML = v(), document.head.appendChild(o);
 };
 export {
   v as getCommonStyles,
-  x as useCommonStyles
+  g as useCommonStyles
 };