@nmorph/nmorph-ui-kit 2.2.12 → 2.2.15

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

@@ -1,49 +1,36 @@
 import './NmorphDropdown.css';
 import n from "./NmorphDropdown.vue2.js";
-import { openBlock as d, createElementBlock as i, normalizeStyle as r, createVNode as t, withCtx as m, createElementVNode as p, normalizeClass as a, renderSlot as l } from "vue";
+import { openBlock as r, createBlock as t, withCtx as d, createElementBlock as i, normalizeStyle as p, normalizeClass as l, renderSlot as a, createCommentVNode as m } from "vue";
 /* empty css                    */
 import s from "../../../_virtual/_plugin-vue_export-helper.js";
-function c(e, h, f, o, w, _) {
-  return d(), i(
-    "div",
-    {
-      style: r({
-        "--nmorph-dropdown-width": o.width,
-        "--nmorph-dropdown-min-width": o.getCssSize(o.props.minWidth) || "auto",
-        "--nmorph-dropdown-max-width": o.getCssSize(o.props.maxWidth) || "none"
-      })
-    },
-    [
-      t(o.NmorphOverlay, {
-        show: o.props.open,
-        transparent: "",
-        "z-index": o.props.zIndex,
-        onOnOutsideClick: o.outsideClickHandler
-      }, {
-        default: m(() => [
-          p(
-            "div",
-            {
-              ref: "dropdownDOMRef",
-              class: a(o.modifiers),
-              style: r({ left: `${o.placementCoords.x}`, top: `${o.placementCoords.y}` })
-            },
-            [
-              l(e.$slots, "default")
-            ],
-            6
-            /* CLASS, STYLE */
-          )
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["show", "z-index"])
-    ],
-    4
-    /* STYLE */
-  );
+function c(e, f, _, o, h, w) {
+  return r(), t(o.NmorphOverlay, {
+    show: o.props.open,
+    transparent: "",
+    "z-index": o.props.zIndex,
+    onOnOutsideClick: o.outsideClickHandler
+  }, {
+    default: d(() => [
+      o.props.open ? (r(), i(
+        "div",
+        {
+          key: 0,
+          ref: "dropdownDOMRef",
+          class: l(o.modifiers),
+          style: p(o.dropdownStyle)
+        },
+        [
+          a(e.$slots, "default")
+        ],
+        6
+        /* CLASS, STYLE */
+      )) : m("v-if", !0)
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["show", "z-index"]);
 }
-const k = /* @__PURE__ */ s(n, [["render", c], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
+const z = /* @__PURE__ */ s(n, [["render", c], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
 export {
-  k as default
+  z as default
 };

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

@@ -1,42 +1,61 @@
 import './NmorphDropdown.css';
-import { defineComponent as a, ref as c, computed as l } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { usePlacement as h } from "../../../hooks/use-placement.js";
-import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const w = /* @__PURE__ */ a({
+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__ */ 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(s, { expose: d, emit: f }) {
-    d();
-    const e = s, r = f, o = c(null), { placementCoords: m } = h({
-      initialPlacement: "bottom",
-      contentDOMElement: o,
-      relativeElement: e.relativeElement,
-      yOffset: e.yOffset,
-      xOffset: e.xOffset
-    }), u = l(
-      () => y({
+  setup(s, { expose: f, emit: c }) {
+    f();
+    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 = n(
+      () => x({
         "nmorph-dropdown": [`${!e.open && "closed"}`]
       })
-    ), i = (t) => typeof t == "number" ? `${t}px` : t, p = l(() => e.fillWidth ? `${e.relativeElement?.clientWidth}px` : i(e.width)), n = { props: e, emit: r, dropdownDOMRef: o, placementCoords: m, modifiers: u, getCssSize: i, width: p, outsideClickHandler: () => {
-      r("on-outside-click");
+    ), o = (t) => typeof t == "number" ? `${t}px` : t, u = n(
+      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
+    ), y = n(() => ({
+      "--nmorph-dropdown-width": u.value,
+      "--nmorph-dropdown-min-width": o(e.minWidth) || "auto",
+      "--nmorph-dropdown-max-width": o(e.maxWidth) || "none",
+      left: i.value.x,
+      top: i.value.y,
+      visibility: e.open && p.value ? "visible" : "hidden"
+    }));
+    b(
+      () => e.open,
+      (t) => {
+        t && a();
+      },
+      { flush: "post" }
+    );
+    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 O;
+      return q;
     } };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }
 });
 export {
-  w as default
+  g 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,30 +1,35 @@
 import './NmorphOverlay.css';
-import t from "./NmorphOverlay.vue2.js";
-import { openBlock as n, createElementBlock as i, withModifiers as e, normalizeStyle as s, normalizeClass as m, createElementVNode as a, renderSlot as p } from "vue";
+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";
 /* empty css                   */
 import c from "../../../_virtual/_plugin-vue_export-helper.js";
-function d(l, r, f, o, _, v) {
-  return n(), i(
-    "div",
-    {
-      class: m(o.modifiers),
-      style: s({ "--nmorph-overlay-z-index": o.zIndex }),
-      onClick: e(o.clickHandler, ["stop"])
-    },
-    [
-      a("div", {
-        class: "nmorph-overlay__slot",
-        onClick: r[0] || (r[0] = e(() => {
-        }, ["stop"]))
-      }, [
-        p(l.$slots, "default")
-      ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
+function f(t, r, _, o, h, v) {
+  return i(), n(p, {
+    to: o.props.teleportTo,
+    disabled: o.props.disabledTeleport || !o.props.show
+  }, [
+    e(
+      "div",
+      {
+        class: d(o.modifiers),
+        style: a({ "--nmorph-overlay-z-index": o.zIndex }),
+        onClick: l(o.clickHandler, ["stop"])
+      },
+      [
+        e("div", {
+          class: "nmorph-overlay__slot",
+          onClick: r[0] || (r[0] = l(() => {
+          }, ["stop"]))
+        }, [
+          m(t.$slots, "default")
+        ])
+      ],
+      6
+      /* CLASS, STYLE */
+    )
+  ], 8, ["to", "disabled"]);
 }
-const x = /* @__PURE__ */ c(t, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
+const z = /* @__PURE__ */ c(s, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
 export {
-  x as default
+  z as default
 };

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

@@ -1,30 +1,32 @@
 import './NmorphOverlay.css';
-import { defineComponent as d, computed as t } from "vue";
-import { useModifiers as m } from "../../../utils/create-modifiers.js";
-import { useZIndex as c } from "../../../hooks/use-z-index.js";
-const h = /* @__PURE__ */ d({
+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__ */ 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 }
   },
   emits: ["on-outside-click"],
-  setup(n, { expose: s, emit: i }) {
-    s();
-    const e = n, p = c(
-      t(() => e.show),
+  setup(s, { expose: n, emit: a }) {
+    n();
+    const e = s, l = f(
+      r(() => e.show),
       () => e.zIndex
-    ), a = t(
-      () => m({
+    ), d = r(
+      () => u({
         "nmorph-overlay": [`${e.show && "show"}`, `${e.transparent && "transparent"}`]
       })
-    ), u = () => {
-      r("on-outside-click");
-    }, r = i, o = { props: e, zIndex: p, modifiers: a, clickHandler: u, emit: r };
+    ), i = () => {
+      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 {
-  h as default
+  y 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,4 +1,4 @@
-import { nmorphCombined as p, nmorphInset as o, 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";
+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,
@@ -9,10 +9,10 @@ const b = {
   "nmorph-title-2": d,
   "nmorph-title-1": s,
   "nmorph--shadow-outset": e,
-  "nmorph--shadow-inset": o,
+  "nmorph--shadow-inset": t,
   "nmorph--shadow-combined": p
-}, g = () => {
-  let t = `
+}, v = () => {
+  let r = `
     :root {
       --font-size-tiny: 10px;
       --font-size-extra-small: 12px;
@@ -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%;
     }
@@ -379,7 +394,7 @@ const b = {
       text-indent: var(--nmorph-text-input-indentation);
       border: none;
       border-radius: var(--default-border-radius);
-      ${o()}
+      ${t()}
     }
 
     .nmorph-text-input--with-action input {
@@ -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 {
@@ -512,7 +530,7 @@ const b = {
 
     .nmorph-scroll::-webkit-scrollbar-track {
       border-radius: var(--border-radius-40);
-      ${o()}
+      ${t()}
     }
 
     .nmorph-scroll::-webkit-scrollbar-thumb {
@@ -525,14 +543,18 @@ const b = {
     }
   `;
   for (const [a, h] of Object.entries(b))
-    t += `
+    r += `
 .${a} {
   ${h()}
 }
 `;
-  const r = document.createElement("style");
-  r.innerHTML = t, document.head.appendChild(r);
+  return r;
+}, x = () => {
+  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 {
-  g as useCommonStyles
+  v as getCommonStyles,
+  x as useCommonStyles
 };

package/dist/hooks/use-placement.js

@@ -1,57 +1,89 @@
-import { ref as p, inject as R, watch as S, onMounted as W, onUnmounted as k, nextTick as E } from "vue";
-const T = (b) => {
-  const { initialPlacement: y, relativeElement: s, contentDOMElement: c, yOffset: u = 0, xOffset: v = 0 } = b, e = p(y), r = p({ x: "0px", y: "0px" }), C = R("nmorph"), a = p(null);
-  S(
-    () => C.browser,
+import { ref as b, unref as n, inject as T, watch as F, onMounted as U, onUnmounted as X, nextTick as S } from "vue";
+const G = (j) => {
+  const { initialPlacement: g, relativeElement: y, contentDOMElement: u, yOffset: L = 0, xOffset: O = 0, enabled: h } = j, R = b(n(g)), C = b({ x: "0px", y: "0px" }), v = b(!1), k = T("nmorph"), P = { passive: !0, capture: !0 };
+  let w = null;
+  F(
+    () => k?.browser,
     () => {
-      n();
+      o();
     },
     { deep: !0 }
-  ), W(() => {
-    n(), L(), $(), h.observe(document.body, {
-      childList: !0,
-      subtree: !0
-    }), f();
-  }), k(() => {
-    O(), h.disconnect();
-  });
-  const f = () => {
-    E(() => {
-      c.value && n();
+  ), U(() => {
+    o(), V(), window.addEventListener("resize", o, { passive: !0 }), w = new MutationObserver(() => {
+      M();
+    }), w.observe(document.body, { childList: !0, subtree: !0 }), M();
+  }), X(() => {
+    W(), window.removeEventListener("resize", o), w?.disconnect();
+  }), F(
+    () => [n(g), n(y), n(O), n(L), n(h)],
+    () => {
+      o();
+    },
+    { flush: "post" }
+  );
+  const M = () => {
+    S(() => {
+      u.value && o();
     });
-  }, h = new MutationObserver(() => {
-    f();
-  }), L = () => {
-    let t = c.value;
-    for (; t; ) {
-      const o = window.getComputedStyle(t);
-      if (o.overflowY === "auto" || o.overflowY === "scroll") {
-        a.value = t;
-        break;
-      }
-      t = t.parentElement;
-    }
-  }, $ = () => {
-    a.value ? a.value.addEventListener("scroll", n, { passive: !0 }) : window.addEventListener("scroll", n, { passive: !0 });
-  }, O = () => {
-    a.value ? a.value.removeEventListener("scroll", n) : window.removeEventListener("scroll", n);
-  }, n = () => {
-    E(() => {
-      if (!c.value || !s) {
-        console.warn("There is no relative element or content DOM element");
+  }, A = () => h === void 0 || n(h) !== !1, q = (e) => {
+    const [s, t] = e.split("-");
+    return {
+      side: s,
+      align: t || "start",
+      hasAlign: !!t
+    };
+  }, z = (e, s, t) => t ? `${e}-${s}` : e, B = () => n(y), H = (e, s, t, l, d, r, i) => e === "top" && t - i < 0 ? "bottom" : e === "bottom" && t + d + i > window.innerHeight ? "top" : e === "left" && s - r < 0 ? "right" : e === "right" && s + l + r > window.innerWidth ? "left" : e, V = () => {
+    window.addEventListener("scroll", o, P);
+  }, W = () => {
+    window.removeEventListener("scroll", o, P);
+  }, o = () => {
+    S(() => {
+      if (typeof window > "u") return;
+      if (!A()) {
+        v.value = !1;
         return;
       }
-      const t = c.value.getBoundingClientRect(), o = t.width, d = t.height, w = "value" in s ? s.value : s;
-      if (!w) {
-        console.warn("Relative element is not an HTMLElement");
+      const e = B();
+      if (!u.value || !e) {
+        v.value = !1;
         return;
       }
-      const m = w.getBoundingClientRect(), { x: l, y: i } = m, x = m.width, g = m.height, H = window.innerWidth, M = window.innerHeight;
-      e.value === "top" && i - d < 0 && (e.value = "bottom"), e.value === "bottom" && i + g + d > M && (e.value = "top"), e.value === "left" && l - o < 0 && (e.value = "right"), e.value === "right" && l + x + o > H && (e.value = "left"), e.value === "top" && (r.value = { x: `${l + v}px`, y: `${i - d + u}px` }), e.value === "bottom" && (r.value = { x: `${l + v}px`, y: `${i + g + u}px` }), e.value === "right" && (r.value = { x: `${l + x + v}px`, y: `${i + u}px` }), e.value === "left" && (r.value = { x: `${l - o + v}px`, y: `${i + u}px` });
+      const s = u.value.getBoundingClientRect(), t = s.width, l = s.height, d = e.getBoundingClientRect(), { x: r, y: i } = d, m = d.width, p = d.height, D = n(O) || 0, N = n(L) || 0, f = q(n(g)), a = H(
+        f.side,
+        r,
+        i,
+        m,
+        p,
+        t,
+        l
+      );
+      let E = r, x = i;
+      if (a === "top" || a === "bottom") {
+        const c = {
+          start: r,
+          center: r + m / 2 - t / 2,
+          end: r + m - t
+        };
+        E = c[f.align] ?? c.start, x = a === "top" ? i - l : i + p;
+      }
+      if (a === "left" || a === "right") {
+        const c = {
+          start: i,
+          center: i + p / 2 - l / 2,
+          end: i + p - l
+        };
+        E = a === "left" ? r - t : r + m, x = c[f.align] ?? c.start;
+      }
+      R.value = z(a, f.align, f.hasAlign), C.value = { x: `${E + D}px`, y: `${x + N}px` }, v.value = !0, typeof requestAnimationFrame == "function" && requestAnimationFrame(() => {
+        const c = B();
+        if (!u.value || !c || !A()) return;
+        const $ = u.value.getBoundingClientRect();
+        ($.width !== t || $.height !== l) && o();
+      });
     });
   };
-  return { placement: e, placementCoords: r };
+  return { placement: R, placementCoords: C, placementReady: v, adjustPlacement: o };
 };
 export {
-  T as usePlacement
+  G as usePlacement
 };