@nmorph/nmorph-ui-kit 2.2.13 → 2.2.16

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.css

@@ -1 +1 @@
-.nmorph-select-button-item{display:inline-flex;align-items:center;justify-content:center;height:var(--item-size);padding:0 var(--indentation-04);border-radius:var(--default-border-radius);cursor:pointer;opacity:.45;font-size:var(--item-font-size)}.nmorph-select-button-item input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.nmorph-select-button-item:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-select-button-item.nmorph-select-button-item--checked{opacity:1;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-select-button-item.nmorph-select-button-item--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-select-button-item{display:inline-flex;justify-content:center;align-items:center;height:var(--item-size);padding:0 var(--indentation-04);font-size:var(--item-font-size);border-radius:var(--default-border-radius);cursor:pointer;opacity:.45}.nmorph-select-button-item input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.nmorph-select-button-item:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-select-button-item.nmorph-select-button-item--checked{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);opacity:1}.nmorph-select-button-item.nmorph-select-button-item--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-slider/NmorphSlider.css

@@ -1 +1 @@
-.nmorph-slider{position:relative;width:100%;height:20px;--slider-height: 24px;--value-fixed-container-height: 18px;cursor:pointer}.nmorph-slider .nmorph-slider__content{display:flex;align-items:center}.nmorph-slider .nmorph-slider__input-wrapper{display:flex;align-items:center;width:100%;height:var(--value-fixed-container-height);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-slider .nmorph-slider__input-container{position:relative;display:flex;align-items:center;width:100%;height:var(--slider-height);touch-action:none}.nmorph-slider .nmorph-slider__thumb{position:absolute;z-index:1;border:0;border-radius:var(--default-border-radius);height:20px;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-slider .nmorph-slider__thumb--smooth{transition:left ease-in-out .2s}.nmorph-slider .nmorph-slider__value{display:flex;justify-content:center;width:var(--value-fixed-container-width);margin-left:var(--indentation-04)}.nmorph-slider .nmorph-slide__native-input{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;background:transparent;appearance:none}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-runnable-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-moz-range-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-thumb{visibility:hidden}.nmorph-slider .nmorph-slide__native-input::-moz-range-thumb{visibility:hidden}.nmorph-slider.nmorph-slider--fill,.nmorph-slider.nmorph-slider--fill .nmorph-slider__content{width:100%}.nmorph-slider.nmorph-slider--disabled{cursor:not-allowed;opacity:.6}.nmorph-slider.nmorph-slider--disabled .nmorph-slider__input-content{pointer-events:none}.nmorph-slider .nmorph-slider__thumb{width:var(--nmorph-slider-thumb-width)}
+.nmorph-slider{position:relative;width:100%;height:20px;--slider-height: 24px;--value-fixed-container-height: 18px;cursor:pointer}.nmorph-slider .nmorph-slider__content{display:flex;align-items:center}.nmorph-slider .nmorph-slider__input-wrapper{display:flex;align-items:center;width:100%;height:var(--value-fixed-container-height);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-slider .nmorph-slider__input-container{position:relative;display:flex;align-items:center;width:100%;height:var(--slider-height);touch-action:none}.nmorph-slider .nmorph-slider__thumb{position:absolute;z-index:1;width:var(--nmorph-slider-thumb-width);height:20px;background:var(--nmorph-main-color);border:0;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-slider .nmorph-slider__thumb--smooth{transition:left ease-in-out .2s}.nmorph-slider .nmorph-slider__value{display:flex;justify-content:center;width:var(--value-fixed-container-width);margin-left:var(--indentation-04)}.nmorph-slider .nmorph-slide__native-input{position:absolute;top:50%;left:50%;width:100%;background:transparent;transform:translate(-50%,-50%);appearance:none}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-runnable-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-moz-range-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-thumb{visibility:hidden}.nmorph-slider .nmorph-slide__native-input::-moz-range-thumb{visibility:hidden}.nmorph-slider.nmorph-slider--fill,.nmorph-slider.nmorph-slider--fill .nmorph-slider__content{width:100%}.nmorph-slider.nmorph-slider--disabled{cursor:not-allowed;opacity:.6}.nmorph-slider.nmorph-slider--disabled .nmorph-slider__input-content{pointer-events:none}

package/dist/components/form/nmorph-switch/NmorphSwitch.css

@@ -1 +1 @@
-.nmorph-switch{--height: 20px;--offset: 3px;--thumb-height: 14px;width:40px;height:var(--height);overflow:hidden;border-radius:var(--border-radius-999);cursor:pointer}.nmorph-switch .nmorph-switch__content{position:relative;height:100%;border-radius:var(--border-radius-999);font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);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-switch .nmorph-switch__bg-content{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:flex-end;width:100%;height:100%;padding:8px}.nmorph-switch .nmorph-switch__bg-content.nmorph-switch__bg-content--enable{justify-content:flex-start;color:var(--nmorph-focus-text-color)}.nmorph-switch input{width:100%;height:var(--height);opacity:0}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--offset);left:var(--offset);width:var(--thumb-height);height:var(--thumb-height);border-radius:var(--border-radius-999);transition:left ease-in-out var(--transition-02);display:flex;justify-content:center;align-items:center;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-switch.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--on .nmorph-switch__content{background:var(--nmorph-accent-color);box-shadow:none}.nmorph-switch.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - 16px);box-shadow:none}.nmorph-switch.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-switch.nmorph-switch--focus .nmorph-switch__content{scale:.95}
+.nmorph-switch{--height: 20px;--offset: 3px;--thumb-height: 14px;width:40px;height:var(--height);overflow:hidden;border-radius:var(--border-radius-999);cursor:pointer}.nmorph-switch .nmorph-switch__content{position:relative;height:100%;font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);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-switch .nmorph-switch__bg-content{position:absolute;top:0;left:0;display:flex;justify-content:flex-end;align-items:center;width:100%;height:100%;padding:8px}.nmorph-switch .nmorph-switch__bg-content.nmorph-switch__bg-content--enable{justify-content:flex-start;color:var(--nmorph-focus-text-color)}.nmorph-switch input{width:100%;height:var(--height);opacity:0}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--offset);left:var(--offset);display:flex;justify-content:center;align-items:center;width:var(--thumb-height);height:var(--thumb-height);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);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);transition:left ease-in-out var(--transition-02)}.nmorph-switch.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--on .nmorph-switch__content{background:var(--nmorph-accent-color);box-shadow:none}.nmorph-switch.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - 16px);box-shadow:none}.nmorph-switch.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-switch.nmorph-switch--focus .nmorph-switch__content{scale:.95}

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js

@@ -1,23 +1,23 @@
-import p from "./NmorphTextInput.vue2.js";
-import { openBlock as o, createElementBlock as t, normalizeStyle as c, normalizeClass as s, createElementVNode as r, renderSlot as m, createCommentVNode as l, mergeProps as h, withKeys as _, createBlock as i, withCtx as a, createVNode as f, resolveDynamicComponent as y } from "vue";
+import s from "./NmorphTextInput.vue2.js";
+import { openBlock as n, createElementBlock as r, normalizeStyle as m, normalizeClass as c, createElementVNode as i, renderSlot as h, createCommentVNode as l, mergeProps as _, withKeys as f, createBlock as a, withCtx as d, createVNode as y, resolveDynamicComponent as b } from "vue";
 import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const b = { class: "nmorph-text-input__input-side" }, x = {
+const x = { class: "nmorph-text-input__input-side" }, v = {
   key: 0,
   class: "nmorph-text-input__prepend-icon"
-}, v = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"];
-function k(d, n, B, e, N, C) {
-  return o(), t(
+}, k = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"];
+function w(p, o, B, e, N, C) {
+  return n(), r(
     "div",
     {
-      class: s(e.modifiers),
-      style: c(e.styles)
+      class: c(e.modifiers),
+      style: m(e.styles)
     },
     [
-      r("div", b, [
-        e.slots["prepend-icon"] ? (o(), t("div", x, [
-          m(d.$slots, "prepend-icon")
+      i("div", x, [
+        e.slots["prepend-icon"] ? (n(), r("div", v, [
+          h(p.$slots, "prepend-icon")
         ])) : l("v-if", !0),
-        r("input", h({
+        i("input", _({
           id: e.id,
           ref: "inputDOMRef",
           name: e.name,
@@ -32,9 +32,10 @@ function k(d, n, B, e, N, C) {
           onInput: e.handleInput,
           onFocus: e.handleFocus,
           onBlur: e.handleBlur,
-          onKeyup: n[0] || (n[0] = _((I) => e.emit("on-enter"), ["enter"]))
-        }), null, 16, v),
-        e.props.typePassword || e.props.clearable ? (o(), i(e.NmorphButton, {
+          onKeydown: o[0] || (o[0] = (t) => e.emit("keydown", t)),
+          onKeyup: o[1] || (o[1] = f((t) => e.emit("on-enter"), ["enter"]))
+        }), null, 16, k),
+        e.props.typePassword || e.props.clearable ? (n(), a(e.NmorphButton, {
           key: 1,
           disabled: e.props.disabled,
           class: "nmorph-text-input__password-btn",
@@ -43,10 +44,10 @@ function k(d, n, B, e, N, C) {
           height: e.props.height,
           onClick: e.actionButtonClickHandler
         }, {
-          default: a(() => [
-            f(e.NmorphIcon, null, {
-              default: a(() => [
-                (o(), i(y(e.actionIcon)))
+          default: d(() => [
+            y(e.NmorphIcon, null, {
+              default: d(() => [
+                (n(), a(b(e.actionIcon)))
               ]),
               _: 1
               /* STABLE */
@@ -61,7 +62,7 @@ function k(d, n, B, e, N, C) {
     /* CLASS, STYLE */
   );
 }
-const z = /* @__PURE__ */ u(p, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
+const K = /* @__PURE__ */ u(s, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
 export {
-  z as default
+  K as default
 };

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue2.js

@@ -1,13 +1,13 @@
-import { defineComponent as E, useSlots as O, computed as n, ref as l } from "vue";
-import { NmorphComponentHeight as $ } from "../../../types/index.js";
-import { useModifiers as j } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as k } from "../nmorph-form/use-form-item-input.js";
+import { defineComponent as C, useSlots as E, computed as n, ref as l } from "vue";
+import { NmorphComponentHeight as O } from "../../../types/index.js";
+import { useModifiers as $ } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as j } from "../nmorph-form/use-form-item-input.js";
 import F from "../../../assets/icons/eye-blocked.svg.js";
 import H from "../../../assets/icons/eye.svg.js";
 import M from "../../basic/nmorph-button/NmorphButton.vue.js";
 import A from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import D from "../../../assets/icons/error.svg.js";
-const U = /* @__PURE__ */ E({
+const U = /* @__PURE__ */ C({
   __name: "NmorphTextInput",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -23,24 +23,24 @@ const U = /* @__PURE__ */ E({
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
-  emits: ["update:model-value", "focus", "blur", "on-enter"],
+  emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
   setup(f, { expose: m, emit: h }) {
-    const s = O(), e = f, { id: y, name: b, autocomplete: v, tabindex: g } = k(e), q = n(
-      () => j({
-        nmorph: [$[e.height], `${a.value && "focused"}`],
+    const s = E(), e = f, { id: y, name: b, autocomplete: v, tabindex: g } = j(e), q = n(
+      () => $({
+        nmorph: [O[e.height], `${a.value && "focused"}`],
         "nmorph-text-input": [
           `${e.typePassword && "password"}`,
           `${(e.typePassword || e.clearable) && "with-action"}`
         ]
       })
-    ), x = (P) => {
-      const C = P.target;
-      r("update:model-value", C.value);
-    }, t = l(!1), I = () => {
+    ), w = (P) => {
+      const k = P.target;
+      r("update:model-value", k.value);
+    }, t = l(!1), x = () => {
       e.clearable ? r("update:model-value", "") : t.value = !t.value;
-    }, N = n(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), a = l(!1), _ = () => {
+    }, I = n(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), a = l(!1), N = () => {
       r("focus"), a.value = !0;
-    }, w = () => {
+    }, _ = () => {
       r("blur"), a.value = !1;
     }, o = l(null), u = () => {
       o.value?.focus();
@@ -50,7 +50,7 @@ const U = /* @__PURE__ */ E({
       o.value?.select();
     };
     m({ inputDOMRef: o, focus: u, blur: p, select: i });
-    const r = h, S = n(() => e.clearable ? D : t.value ? F : H), d = n(() => e.indentation || (s["prepend-icon"] ? "28px" : "8px")), B = n(() => ({ "--nmorph-text-input-indentation": d.value })), c = { slots: s, props: e, id: y, name: b, autocomplete: v, tabindex: g, modifiers: q, handleInput: x, showPassword: t, actionButtonClickHandler: I, type: N, focused: a, handleFocus: _, handleBlur: w, inputDOMRef: o, focus: u, blur: p, select: i, emit: r, actionIcon: S, indentation: d, styles: B, get NmorphIcon() {
+    const r = h, S = n(() => e.clearable ? D : t.value ? F : H), d = n(() => e.indentation || (s["prepend-icon"] ? "28px" : "8px")), B = n(() => ({ "--nmorph-text-input-indentation": d.value })), c = { slots: s, props: e, id: y, name: b, autocomplete: v, tabindex: g, modifiers: q, handleInput: w, showPassword: t, actionButtonClickHandler: x, type: I, focused: a, handleFocus: N, handleBlur: _, inputDOMRef: o, focus: u, blur: p, select: i, emit: r, actionIcon: S, indentation: d, styles: B, get NmorphIcon() {
       return A;
     }, get NmorphButton() {
       return M;

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.css

@@ -1 +1 @@
-.nmorph-backtop{position:fixed;opacity:0;transition:opacity .2s ease-in-out}.nmorph-backtop .nmorph-backtop__up-icon{transform:rotate(180deg)}.nmorph-backtop.nmorph-backtop--show{opacity:1}.nmorph-backtop.nmorph-backtop--common .nmorph-button{background:var(--nmorph-overlay-color);border-radius:4px}.nmorph-backtop{right:var(--nmorph-backtop-right);bottom:var(--nmorph-backtop-bottom)}
+.nmorph-backtop{position:fixed;right:var(--nmorph-backtop-right);bottom:calc(var(--nmorph-backtop-bottom) + env(safe-area-inset-bottom,0px));z-index:var(--nmorph-backtop-z-index);opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.nmorph-backtop .nmorph-backtop__up-icon{transform:rotate(180deg)}.nmorph-backtop.nmorph-backtop--show{opacity:1;pointer-events:auto}.nmorph-backtop.nmorph-backtop--common .nmorph-button{background:var(--nmorph-overlay-color);border-radius:4px}

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

@@ -1,56 +1,66 @@
 import './NmorphBacktop.css';
-import p from "./NmorphBacktop.vue2.js";
-import { openBlock as a, createElementBlock as l, normalizeStyle as c, createElementVNode as t, normalizeClass as i, withModifiers as m, renderSlot as s, createVNode as r, withCtx as e } from "vue";
+import l from "./NmorphBacktop.vue2.js";
+import { openBlock as e, createElementBlock as a, normalizeStyle as c, createBlock as i, Teleport as d, createElementVNode as t, normalizeClass as m, withModifiers as s, renderSlot as h, createVNode as r, withCtx as p } from "vue";
 /* empty css                   */
-import d from "../../../_virtual/_plugin-vue_export-helper.js";
-function h(n, f, _, o, k, b) {
-  return a(), l(
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+function _(n, b, k, o, v, x) {
+  return e(), a(
     "div",
     {
-      style: c({ "--nmorph-backtop-right": `${o.props.right}px`, "--nmorph-backtop-bottom": `${o.props.bottom}px` })
+      ref: "placeholderDOMEl",
+      style: c({
+        "--nmorph-backtop-right": `${o.props.right}px`,
+        "--nmorph-backtop-bottom": `${o.props.bottom}px`,
+        "--nmorph-backtop-z-index": o.props.zIndex
+      })
     },
     [
-      t(
-        "div",
-        {
-          ref: "selfDOMEl",
-          class: i(o.modifiers)
-        },
-        [
-          t("div", {
-            onClick: m(o.scrollToTopHandler, ["stop"])
-          }, [
-            s(n.$slots, "default", {}, () => [
-              r(o.NmorphButton, {
-                "style-type": o.props.design === "nmorph" ? "default" : "transparent"
-              }, {
-                default: e(() => [
-                  r(o.NmorphIcon, {
-                    class: "nmorph-backtop__up-icon",
-                    color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-contrast-text-color)"
-                  }, {
-                    default: e(() => [
-                      r(o.NmorphIconChevronDown)
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["color"])
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["style-type"])
+      (e(), i(d, {
+        to: o.props.teleportTo,
+        disabled: !o.isMounted || o.props.teleportDisabled
+      }, [
+        t(
+          "div",
+          {
+            ref: "selfDOMEl",
+            class: m(o.modifiers)
+          },
+          [
+            t("div", {
+              onClick: s(o.scrollToTopHandler, ["stop"])
+            }, [
+              h(n.$slots, "default", {}, () => [
+                r(o.NmorphButton, {
+                  "style-type": o.props.design === "nmorph" ? "default" : "transparent"
+                }, {
+                  default: p(() => [
+                    r(o.NmorphIcon, {
+                      class: "nmorph-backtop__up-icon",
+                      color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-contrast-text-color)"
+                    }, {
+                      default: p(() => [
+                        r(o.NmorphIconChevronDown)
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["color"])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["style-type"])
+              ])
             ])
-          ])
-        ],
-        2
-        /* CLASS */
-      )
+          ],
+          2
+          /* CLASS */
+        )
+      ], 8, ["to", "disabled"]))
     ],
     4
     /* STYLE */
   );
 }
-const g = /* @__PURE__ */ d(p, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
+const z = /* @__PURE__ */ f(l, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
 export {
-  g as default
+  z as default
 };

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-context-menu/NmorphContextMenu.css

@@ -0,0 +1 @@
+.nmorph-context-menu{display:inline-block;max-width:100%}

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

@@ -0,0 +1,50 @@
+import './NmorphContextMenu.css';
+import t from "./NmorphContextMenu.vue2.js";
+import { openBlock as n, createElementBlock as l, renderSlot as r, createBlock as i, withCtx as a, createCommentVNode as c } from "vue";
+/* empty css                       */
+import p from "../../../_virtual/_plugin-vue_export-helper.js";
+function d(o, m, f, e, s, h) {
+  return n(), l(
+    "div",
+    {
+      ref: "triggerDOMRef",
+      class: "nmorph-context-menu",
+      onContextmenu: e.contextMenuHandler,
+      onKeydown: e.keydownHandler
+    },
+    [
+      r(o.$slots, "default"),
+      e.relativeElement ? (n(), i(e.NmorphDropdown, {
+        key: 0,
+        open: e.isOpen,
+        "relative-element": e.relativeElement,
+        placement: e.props.placement,
+        width: e.props.width,
+        "min-width": e.props.minWidth,
+        "max-width": e.props.maxWidth,
+        "x-offset": e.props.xOffset,
+        "y-offset": e.props.yOffset,
+        "fill-width": e.props.fillWidth,
+        "z-index": e.props.zIndex,
+        "close-on-escape": e.props.closeOnEscape,
+        "trap-focus": e.props.trapFocus,
+        role: e.props.role,
+        "aria-label": e.props.ariaLabel,
+        onOnOutsideClick: e.outsideClickHandler,
+        onOnEscapeKeydown: e.escapeHandler
+      }, {
+        default: a(() => [
+          r(o.$slots, "menu", { close: e.close })
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["open", "relative-element", "placement", "width", "min-width", "max-width", "x-offset", "y-offset", "fill-width", "z-index", "close-on-escape", "trap-focus", "role", "aria-label"])) : c("v-if", !0)
+    ],
+    544
+    /* NEED_HYDRATION, NEED_PATCH */
+  );
+}
+const v = /* @__PURE__ */ p(t, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue"]]);
+export {
+  v as default
+};

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

@@ -0,0 +1,69 @@
+import './NmorphContextMenu.css';
+import { defineComponent as O, ref as i, computed as S, watch as k } from "vue";
+import w from "../nmorph-dropdown/NmorphDropdown.vue.js";
+const C = /* @__PURE__ */ O({
+  __name: "NmorphContextMenu",
+  props: {
+    modelValue: { type: Boolean, required: !1 },
+    placement: { type: null, required: !1, default: "bottom-start" },
+    width: { type: [Number, String], required: !1, default: 160 },
+    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: !1 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    closeOnEscape: { type: Boolean, required: !1, default: !0 },
+    trapFocus: { type: Boolean, required: !1, default: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    role: { type: String, required: !1, default: "menu" },
+    ariaLabel: { type: String, required: !1, default: "" }
+  },
+  emits: ["update:model-value", "open", "close", "on-outside-click", "on-escape-keydown"],
+  setup(y, { expose: b, emit: g }) {
+    const l = y, o = g, s = i(null), f = i(null), n = i(!!l.modelValue), p = S(() => typeof l.modelValue == "boolean" ? l.modelValue : n.value);
+    k(
+      () => l.modelValue,
+      (e) => {
+        typeof e == "boolean" && (n.value = e);
+      }
+    );
+    const c = (e, t) => ({
+      clientWidth: 0,
+      getBoundingClientRect: () => ({
+        x: e,
+        y: t,
+        width: 0,
+        height: 0,
+        top: t,
+        left: e,
+        right: e,
+        bottom: t,
+        toJSON: () => ({})
+      })
+    }), u = (e) => {
+      const t = p.value;
+      n.value = e, o("update:model-value", e), t && !e && o("close");
+    }, r = () => {
+      u(!1);
+    }, d = (e, t, a) => {
+      f.value = c(e, t), u(!0), o("open", a);
+    }, q = (e) => {
+      l.disabled || (e.preventDefault(), d(e.clientX, e.clientY, e));
+    }, h = (e) => {
+      if (l.disabled || e.key !== "ContextMenu" && !(e.shiftKey && e.key === "F10")) return;
+      const a = (e.target instanceof HTMLElement ? e.target : s.value)?.getBoundingClientRect();
+      a && (e.preventDefault(), d(a.left, a.bottom, e));
+    }, _ = () => {
+      o("on-outside-click"), r();
+    }, N = () => {
+      o("on-escape-keydown"), r();
+    };
+    b({ close: r });
+    const m = { props: l, emit: o, triggerDOMRef: s, relativeElement: f, openState: n, isOpen: p, createPointElement: c, setOpen: u, close: r, openAt: d, contextMenuHandler: q, keydownHandler: h, outsideClickHandler: _, escapeHandler: N, NmorphDropdown: w };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+  }
+});
+export {
+  C 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(--nmorph-shadow-outset)}.nmorph-dropdown--closed{z-index:-1000;opacity:0}

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

@@ -1,36 +1,36 @@
 import './NmorphDropdown.css';
 import n from "./NmorphDropdown.vue2.js";
-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";
+import { openBlock as r, createBlock as a, withCtx as l, createElementBlock as p, normalizeStyle as s, normalizeClass as i, renderSlot as c, createCommentVNode as d } from "vue";
 /* empty css                    */
-import s from "../../../_virtual/_plugin-vue_export-helper.js";
-function c(e, f, _, o, h, w) {
-  return r(), t(o.NmorphOverlay, {
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = ["role", "aria-label"];
+function f(e, _, h, o, w, k) {
+  return r(), a(o.NmorphOverlay, {
     show: o.props.open,
     transparent: "",
     "z-index": o.props.zIndex,
-    onOnOutsideClick: o.outsideClickHandler
+    "close-on-escape": o.props.closeOnEscape,
+    "trap-focus": o.props.trapFocus,
+    onOnOutsideClick: o.outsideClickHandler,
+    onOnEscapeKeydown: o.escapeHandler
   }, {
-    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)
+    default: l(() => [
+      o.props.open ? (r(), p("div", {
+        key: 0,
+        ref: "dropdownDOMRef",
+        class: i(o.modifiers),
+        style: s(o.dropdownStyle),
+        role: o.props.role || void 0,
+        "aria-label": o.props.ariaLabel || void 0
+      }, [
+        c(e.$slots, "default")
+      ], 14, m)) : d("v-if", !0)
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["show", "z-index"]);
+  }, 8, ["show", "z-index", "close-on-escape", "trap-focus"]);
 }
-const z = /* @__PURE__ */ s(n, [["render", c], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
+const b = /* @__PURE__ */ t(n, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
 export {
-  z as default
+  b as default
 };