@nmorph/nmorph-ui-kit 2.2.22 → 2.2.24

package/dist/components/basic/nmorph-scroll/NmorphScroll.vue2.js

@@ -16,8 +16,8 @@ const k = /* @__PURE__ */ C({
     updateOnlyOnScrollEnd: { type: Boolean, required: !1, default: !1 },
     yBarWidthInPx: { type: Number, required: !1, default: 6 },
     xBarWidthInPx: { type: Number, required: !1, default: 6 },
-    xGapInPx: { type: Number, required: !1, default: 4 },
-    yGapInPx: { type: Number, required: !1, default: 4 }
+    xGapInPx: { type: Number, required: !1, default: 0 },
+    yGapInPx: { type: Number, required: !1, default: 0 }
   },
   emits: ["on-scroll", "update:model-value", "on-scroll-end"],
   setup(b, { expose: H, emit: q }) {

package/dist/components/data/nmorph-badge/NmorphBadge.css

@@ -1 +1 @@
-.nmorph-badge{position:relative;display:inline-block;height:fit-content;--dot-size: 4px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__dot{width:var(--dot-size);height:var(--dot-size);border-radius:var(--border-radius-circular)}
+.nmorph-badge{position:relative;display:inline-block;height:fit-content;--dot-size: 4px;--nmorph-badge-ribbon-height: 24px;--nmorph-badge-ribbon-corner-size: 62px;--nmorph-badge-ribbon-width: 116px;--nmorph-badge-ribbon-offset-x: 0px;--nmorph-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-badge-ribbon-corner-size);height:var(--nmorph-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;padding:0 var(--indentation-03);overflow:hidden;font-weight:600;font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis;transform:translateY(-1px)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-badge-ribbon-offset-y);right:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-badge-ribbon-offset-x);bottom:var(--nmorph-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__dot{width:var(--dot-size);height:var(--dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-badge-ribbon-height: 18px;--nmorph-badge-ribbon-corner-size: 50px;--nmorph-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-badge-ribbon-height: 20px;--nmorph-badge-ribbon-corner-size: 56px;--nmorph-badge-ribbon-width: 104px}

package/dist/components/data/nmorph-badge/NmorphBadge.vue.js

@@ -1,41 +1,86 @@
 import './NmorphBadge.css';
-import m from "./NmorphBadge.vue2.js";
-import { openBlock as o, createElementBlock as a, normalizeStyle as i, normalizeClass as d, renderSlot as s, createCommentVNode as l, Fragment as c, createTextVNode as t, toDisplayString as n } from "vue";
+import y from "./NmorphBadge.vue2.js";
+import { openBlock as o, createElementBlock as a, normalizeStyle as l, normalizeClass as i, renderSlot as s, createCommentVNode as d, createElementVNode as n, createTextVNode as t, toDisplayString as c, Fragment as m } from "vue";
 /* empty css                 */
-import p from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = {
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = { class: "nmorph-badge__content" }, b = {
   key: 0,
   class: "nmorph-badge__dot"
-}, f = {
+}, g = {
   key: 1,
   class: "nmorph-badge__content"
 };
-function _(r, g, h, e, k, v) {
+function h(r, p, v, e, k, V) {
   return !e.props.disabled && (!e.props.isTag || e.shouldShowBadge) ? (o(), a(
     "div",
     {
       key: 0,
-      class: d(e.modifiers),
-      style: i(e.styles)
+      class: i(e.modifiers),
+      style: l(e.styles)
     },
     [
-      e.props.isTag ? l("v-if", !0) : s(r.$slots, "default", { key: 0 }),
-      e.shouldShowBadge ? (o(), a(
+      e.props.isTag ? d("v-if", !0) : s(r.$slots, "default", { key: 0 }),
+      e.shouldShowBadge && e.isRibbon ? (o(), a(
         "div",
         {
           key: 1,
+          class: "nmorph-badge__ribbon-frame",
+          style: l(e.ribbonFrameStyle)
+        },
+        [
+          n(
+            "div",
+            {
+              class: i(e.ribbonCornerModifiers)
+            },
+            [
+              n(
+                "div",
+                {
+                  ref: "badge",
+                  class: i(e.containerModifiers),
+                  style: l(e.containerStyle)
+                },
+                [
+                  n("div", _, [
+                    s(r.$slots, "value", {
+                      value: e.props.value,
+                      displayValue: e.displayValue
+                    }, () => [
+                      t(
+                        c(e.displayValue),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ])
+                ],
+                6
+                /* CLASS, STYLE */
+              )
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        4
+        /* STYLE */
+      )) : e.shouldShowBadge ? (o(), a(
+        "div",
+        {
+          key: 2,
           ref: "badge",
-          class: d(e.containerModifiers),
-          style: i(e.containerStyle)
+          class: i(e.containerModifiers),
+          style: l(e.containerStyle)
         },
         [
-          e.props.isDot ? (o(), a("div", y)) : (o(), a("div", f, [
+          e.isDotType ? (o(), a("div", b)) : (o(), a("div", g, [
             e.props.isTag ? (o(), a(
-              c,
+              m,
               { key: 0 },
               [
                 t(
-                  n(e.displayValue),
+                  c(e.displayValue),
                   1
                   /* TEXT */
                 )
@@ -48,7 +93,7 @@ function _(r, g, h, e, k, v) {
               displayValue: e.displayValue
             }, () => [
               t(
-                n(e.displayValue),
+                c(e.displayValue),
                 1
                 /* TEXT */
               )
@@ -57,13 +102,13 @@ function _(r, g, h, e, k, v) {
         ],
         6
         /* CLASS, STYLE */
-      )) : l("v-if", !0)
+      )) : d("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
-  )) : e.props.isTag ? l("v-if", !0) : s(r.$slots, "default", { key: 1 });
+  )) : e.props.isTag ? d("v-if", !0) : s(r.$slots, "default", { key: 1 });
 }
-const T = /* @__PURE__ */ p(m, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
+const w = /* @__PURE__ */ f(y, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
 export {
-  T as default
+  w as default
 };

package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js

@@ -1,11 +1,13 @@
 import './NmorphBadge.css';
-import { defineComponent as z, computed as t, ref as n, onMounted as S, watch as q, nextTick as _ } from "vue";
+import { defineComponent as T, computed as r, ref as l, onMounted as N, watch as C, nextTick as B } from "vue";
 import { useModifiers as f } from "../../../utils/create-modifiers.js";
-const B = /* @__PURE__ */ z({
+const H = /* @__PURE__ */ T({
   __name: "NmorphBadge",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 },
     max: { type: Number, required: !1, default: 99 },
+    type: { type: String, required: !1, default: "default" },
+    ribbonCorner: { type: String, required: !1, default: "top-right" },
     isDot: { type: Boolean, required: !1, default: !1 },
     isTag: { type: Boolean, required: !1, default: !1 },
     hidden: { type: Boolean, required: !1, default: !1 },
@@ -17,39 +19,56 @@ const B = /* @__PURE__ */ z({
     disabled: { type: Boolean, required: !1, default: !1 },
     dotSize: { type: [Number, String], required: !1, default: void 0 }
   },
-  setup(p, { expose: c }) {
-    c();
-    const e = p, m = t(
+  setup(v, { expose: m }) {
+    m();
+    const e = v, o = r(() => e.isDot ? "dot" : e.type), b = r(() => o.value === "dot"), t = r(() => o.value === "ribbon" && !e.isTag), g = r(
       () => f({
-        "nmorph-badge": [`${e.hidden && "hidden"}`, `${e.isTag && "tag"}`, e.size]
+        "nmorph-badge": [
+          `${e.hidden && "hidden"}`,
+          `${e.isTag && "tag"}`,
+          `${t.value && "ribbon"}`,
+          `${t.value && `ribbon-${e.ribbonCorner}`}`,
+          e.size
+        ]
       })
-    ), g = t(
+    ), y = r(
       () => f({
-        "nmorph-badge__container": [`${e.hidden && "hidden"}`, `${e.isTag && "tag"}`]
+        "nmorph-badge__container": [
+          `${e.hidden && "hidden"}`,
+          `${e.isTag && "tag"}`,
+          `${t.value && "ribbon"}`,
+          `${t.value && `ribbon-${e.ribbonCorner}`}`
+        ]
       })
-    ), v = t(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), y = t(() => e.isDot || e.value !== void 0), o = t(() => {
-      const a = `${(i?.value / 2 + e.offsetX) * -1}px`, h = `${(s?.value / 2 + e.offsetY) * -1}px`;
+    ), x = r(
+      () => f({
+        "nmorph-badge__ribbon-corner": [`${e.ribbonCorner}`]
+      })
+    ), h = r(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), z = r(() => b.value || e.value !== void 0), i = r(() => {
+      const a = `${(s?.value / 2 + e.offsetX) * -1}px`, _ = `${(d?.value / 2 + e.offsetY) * -1}px`;
       return {
         x: a,
-        y: h
+        y: _
       };
-    }), b = t(() => e.isTag ? {
+    }), S = r(() => e.isTag || t.value ? {
       zIndex: e.zIndex
     } : {
-      right: o.value.x,
-      top: o.value.y,
+      right: i.value.x,
+      top: i.value.y,
       zIndex: e.zIndex
-    }), u = (a) => typeof a == "number" ? `${a}px` : a, x = t(() => ({
+    }), p = (a) => typeof a == "number" ? `${a}px` : a, n = l(null), s = l(0), d = l(0), $ = r(() => ({
       "--nmorph-badge-color": e.color,
-      ...e.dotSize !== void 0 && { "--dot-size": u(e.dotSize) }
-    })), r = n(null), i = n(0), s = n(0), d = async () => {
-      await _(), !(!r.value || e.isTag) && (i.value = r.value.clientWidth, s.value = r.value.clientHeight);
-    };
-    S(d), q(() => [e.value, e.max, e.isDot, e.isTag, e.size], d);
-    const l = { props: e, modifiers: m, containerModifiers: g, displayValue: v, shouldShowBadge: y, appliedOffset: o, containerStyle: b, getCssSize: u, styles: x, badge: r, badgeWidth: i, badgeHeight: s, updateBadgeSize: d };
-    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+      ...e.dotSize !== void 0 && { "--dot-size": p(e.dotSize) }
+    })), u = async () => {
+      await B(), !(!n.value || e.isTag || t.value) && (s.value = n.value.clientWidth, d.value = n.value.clientHeight);
+    }, q = r(() => ({
+      zIndex: e.zIndex
+    }));
+    N(u), C(() => [e.value, e.max, o.value, e.ribbonCorner, e.isTag, e.size], u);
+    const c = { props: e, resolvedType: o, isDotType: b, isRibbon: t, modifiers: g, containerModifiers: y, ribbonCornerModifiers: x, displayValue: h, shouldShowBadge: z, appliedOffset: i, containerStyle: S, getCssSize: p, badge: n, badgeWidth: s, badgeHeight: d, styles: $, updateBadgeSize: u, ribbonFrameStyle: q };
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  B as default
+  H as default
 };

package/dist/components/data/nmorph-image-preview/NmorphImagePreview.css

@@ -1 +1 @@
-.nmorph-image-preview{--width: 50px;--height: 50px;width:var(--width);height:var(--height);overflow:hidden}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:min(100vw - 96px,960px);height:min(100vh - 180px,720px);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{width:100%;height:100%;object-fit:contain}.nmorph-image-preview__portal .nmorph-image-preview__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}.nmorph-image-preview__portal .nmorph-button__content{box-shadow:none}.nmorph-image-preview__portal .nmorph-image-preview__left,.nmorph-image-preview__portal .nmorph-image-preview__right{z-index:2}.nmorph-image-preview__portal .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview__portal.nmorph-image-preview--opened{--nmorph-image-preview-btn-margin: 20px}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__left{left:var(--nmorph-image-preview-btn-margin)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__right{right:var(--nmorph-image-preview-btn-margin)}
+.nmorph-image-preview{--width: 50px;--height: 50px;width:var(--width);height:var(--height);overflow:hidden}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{--nmorph-image-preview-content-width: min( calc(100vw - 96px) , 960px);--nmorph-image-preview-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-image-preview-content-width);height:var(--nmorph-image-preview-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}.nmorph-image-preview__portal .nmorph-button__content{box-shadow:none}.nmorph-image-preview__portal .nmorph-image-preview__left,.nmorph-image-preview__portal .nmorph-image-preview__right{z-index:2}.nmorph-image-preview__portal .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview__portal.nmorph-image-preview--opened{--nmorph-image-preview-btn-margin: 20px}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__left{left:var(--nmorph-image-preview-btn-margin)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__right{right:var(--nmorph-image-preview-btn-margin)}

package/dist/components/feedback/nmorph-dialog/NmorphDialog.css

@@ -1 +1 @@
-.nmorph-dialog{position:absolute;top:50%;left:50%;width:var(--width);padding:var(--indentation-04);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);transform:translate(-50%,-50%)}.nmorph-dialog .nmorph-dialog__header{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{cursor:pointer}.nmorph-dialog{--width: var(--nmorph-dialog-width)}
+.nmorph-dialog{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;box-sizing:border-box;width:var(--width);max-width:var(--nmorph-dialog-max-width, calc(100vw - 32px) );max-height:var(--nmorph-dialog-max-height, var(--nmorph-dialog-default-max-height));padding:var(--indentation-04);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);transform:translate(-50%,-50%);--width: var(--nmorph-dialog-width);--nmorph-dialog-default-max-height: calc(100vh - 32px) }@supports (height: 100dvh){.nmorph-dialog{--nmorph-dialog-default-max-height: calc(100dvh - 32px) }}.nmorph-dialog .nmorph-dialog__header{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{flex:0 0 auto;cursor:pointer}.nmorph-dialog .nmorph-dialog__content{min-height:0;overflow-y:auto}

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue.js

@@ -1,11 +1,11 @@
 import './NmorphDialog.css';
 import s from "./NmorphDialog.vue2.js";
-import { openBlock as l, createBlock as c, withCtx as i, createElementVNode as e, normalizeStyle as d, normalizeClass as t, renderSlot as a, toDisplayString as m, createElementBlock as p, createVNode as n, createCommentVNode as _ } from "vue";
+import { openBlock as r, createBlock as c, withCtx as a, createElementVNode as e, normalizeStyle as d, normalizeClass as t, renderSlot as i, toDisplayString as m, createElementBlock as _, createVNode as n, createCommentVNode as p } from "vue";
 /* empty css                  */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
 const f = ["aria-label"], g = { class: "nmorph-dialog__header" }, v = { class: "nmorph-dialog__title" }, k = { class: "nmorph-dialog__content" };
-function y(r, N, w, o, C, O) {
-  return l(), c(o.NmorphOverlay, {
+function y(l, N, C, o, O, b) {
+  return r(), c(o.NmorphOverlay, {
     show: o.isVisible,
     "z-index": o.props.zIndex,
     "close-on-escape": o.props.closeOnEscape,
@@ -13,16 +13,16 @@ function y(r, N, w, o, C, O) {
     onOnOutsideClick: o.clickOnOverlay,
     onOnEscapeKeydown: o.closeHandler
   }, {
-    default: i(() => [
+    default: a(() => [
       e("div", {
         class: t(o.modifiers),
-        style: d({ "--nmorph-dialog-width": o.props.width }),
+        style: d(o.dialogStyle),
         role: "dialog",
         "aria-modal": "true",
         "aria-label": o.props.title || void 0
       }, [
         e("div", g, [
-          a(r.$slots, "header", {}, () => [
+          i(l.$slots, "header", {}, () => [
             e(
               "div",
               v,
@@ -30,23 +30,23 @@ function y(r, N, w, o, C, O) {
               1
               /* TEXT */
             ),
-            o.props.showClose ? (l(), p("div", {
+            o.props.showClose ? (r(), _("div", {
               key: 0,
               class: "nmorph-dialog__close-icon",
               onClick: o.closeHandler
             }, [
               n(o.NmorphIcon, null, {
-                default: i(() => [
+                default: a(() => [
                   n(o.NmorphIconCross)
                 ]),
                 _: 1
                 /* STABLE */
               })
-            ])) : _("v-if", !0)
+            ])) : p("v-if", !0)
           ])
         ]),
         e("div", k, [
-          a(r.$slots, "default")
+          i(l.$slots, "default")
         ])
       ], 14, f)
     ]),
@@ -54,7 +54,7 @@ function y(r, N, w, o, C, O) {
     /* FORWARDED */
   }, 8, ["show", "z-index", "close-on-escape"]);
 }
-const V = /* @__PURE__ */ h(s, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-dialog/NmorphDialog.vue"]]);
+const S = /* @__PURE__ */ h(s, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-dialog/NmorphDialog.vue"]]);
 export {
-  V as default
+  S as default
 };

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue2.js

@@ -1,15 +1,16 @@
 import './NmorphDialog.css';
-import { defineComponent as f, computed as c, ref as d, watch as y } from "vue";
-import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { defineComponent as c, computed as s, ref as y, watch as h } from "vue";
+import { useModifiers as g } from "../../../utils/create-modifiers.js";
 import v from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import T from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import h from "../../../assets/icons/cross.svg.js";
-const C = /* @__PURE__ */ f({
+import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import T from "../../../assets/icons/cross.svg.js";
+const C = /* @__PURE__ */ c({
   __name: "NmorphDialog",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
     title: { type: String, required: !1, default: "" },
     width: { type: String, required: !1, default: "330px" },
+    maxHeight: { type: String, required: !1, default: void 0 },
     openDelay: { type: Number, required: !1, default: 0 },
     closeDelay: { type: Number, required: !1, default: 0 },
     closeOnClickModal: { type: Boolean, required: !1, default: !0 },
@@ -19,49 +20,52 @@ const C = /* @__PURE__ */ f({
     closeOnEscape: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["on-close", "update:model-value"],
-  setup(i, { expose: n, emit: m }) {
-    n();
-    const e = i, r = m, p = c(
-      () => O({
+  setup(n, { expose: m, emit: d }) {
+    m();
+    const e = n, r = d, p = s(
+      () => g({
         "nmorph-dialog": []
       })
-    ), u = d(e.modelValue);
-    let t = null, l = null;
-    y(
+    ), f = s(() => ({
+      "--nmorph-dialog-width": e.width,
+      ...e.maxHeight && { "--nmorph-dialog-max-height": e.maxHeight }
+    })), a = y(e.modelValue);
+    let o = null, l = null;
+    h(
       () => e.modelValue,
-      (o) => {
-        o ? (l && clearTimeout(l), t = setTimeout(() => {
-          u.value = !0;
-        }, e.openDelay)) : (t && clearTimeout(t), l = setTimeout(() => {
-          u.value = !1;
+      (t) => {
+        t ? (l && clearTimeout(l), o = setTimeout(() => {
+          a.value = !0;
+        }, e.openDelay)) : (o && clearTimeout(o), l = setTimeout(() => {
+          a.value = !1;
         }, e.closeDelay));
       },
       { immediate: !0 }
     );
-    const a = () => {
-      r("on-close"), t && clearTimeout(t);
-      const o = () => {
+    const i = () => {
+      r("on-close"), o && clearTimeout(o);
+      const t = () => {
         r("update:model-value", !1);
       };
-      e.closeDelay <= 0 ? o() : l = setTimeout(o, e.closeDelay);
-    }, s = { props: e, emit: r, modifiers: p, isVisible: u, get openTimeout() {
-      return t;
-    }, set openTimeout(o) {
-      t = o;
+      e.closeDelay <= 0 ? t() : l = setTimeout(t, e.closeDelay);
+    }, u = { props: e, emit: r, modifiers: p, dialogStyle: f, isVisible: a, get openTimeout() {
+      return o;
+    }, set openTimeout(t) {
+      o = t;
     }, get closeTimeout() {
       return l;
-    }, set closeTimeout(o) {
-      l = o;
-    }, closeHandler: a, clickOnOverlay: () => {
-      e.closeOnOverlay && a();
+    }, set closeTimeout(t) {
+      l = t;
+    }, closeHandler: i, clickOnOverlay: () => {
+      e.closeOnOverlay && i();
     }, get NmorphOverlay() {
-      return T;
+      return O;
     }, get NmorphIcon() {
       return v;
     }, get NmorphIconCross() {
-      return h;
+      return T;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
   }
 });
 export {

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css

@@ -1 +1 @@
-.nmorph-autocomplete .nmorph-autocomplete__list-item{padding:var(--indentation-02) var(--indentation-04);cursor:pointer}.nmorph-autocomplete .nmorph-autocomplete__list-item:last-child{border-bottom-right-radius:var(--indentation-02);border-bottom-left-radius:var(--indentation-02)}.nmorph-autocomplete .nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete .nmorph-autocomplete__list-item:hover,.nmorph-autocomplete .nmorph-autocomplete__list-item--focused{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete .nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete .nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete .nmorph-autocomplete__list--dynamic .nmorph-autocomplete__list-item{height:auto}.nmorph-autocomplete .nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete .nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}
+.nmorph-autocomplete .nmorph-autocomplete__input-content{position:relative}.nmorph-autocomplete.nmorph-autocomplete--open .nmorph-autocomplete__input-content{z-index:var(--nmorph-autocomplete-input-z-index)}.nmorph-autocomplete__list{padding:var(--indentation-01) 0}.nmorph-autocomplete__list-item{box-sizing:border-box;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete__list-item:hover,.nmorph-autocomplete__list-item--focused{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete__list--dynamic .nmorph-autocomplete__list-item{height:auto}.nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.js

@@ -1,6 +1,6 @@
 import './NmorphAutocomplete.css';
 import v from "./NmorphAutocomplete.vue2.js";
-import { openBlock as l, createElementBlock as t, normalizeClass as i, createElementVNode as n, createVNode as d, createBlock as y, withCtx as p, renderSlot as c, normalizeStyle as m, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as x } from "vue";
+import { openBlock as l, createElementBlock as t, normalizeStyle as n, normalizeClass as a, createElementVNode as i, createVNode as c, createBlock as y, withCtx as p, renderSlot as m, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as x } from "vue";
 /* empty css                        */
 import k from "../../../_virtual/_plugin-vue_export-helper.js";
 const b = { class: "nmorph-autocomplete__input-content" }, g = {
@@ -10,19 +10,20 @@ const b = { class: "nmorph-autocomplete__input-content" }, g = {
   key: 0,
   class: "nmorph-autocomplete__loading"
 }, N = ["id"], C = ["id", "aria-selected", "onClick"], I = ["id"], O = ["id", "aria-selected", "onClick"];
-function V(a, s, S, e, z, A) {
+function V(d, s, w, e, S, A) {
   return l(), t(
     "div",
     {
-      class: i(e.modifiers)
+      class: a(e.modifiers),
+      style: n(e.styles)
     },
     [
-      n("div", b, [
-        n(
+      i("div", b, [
+        i(
           "div",
           g,
           [
-            d(e.NmorphTextInput, {
+            c(e.NmorphTextInput, {
               id: e.props.id,
               name: e.props.name,
               autocomplete: e.props.autocomplete,
@@ -46,17 +47,19 @@ function V(a, s, S, e, z, A) {
         open: e.open,
         "relative-element": e.nmorphAutocompleteDOMRef,
         "y-offset": 1,
-        "z-index": e.props.zIndex,
+        "z-index": e.dropdownZIndex,
+        "restore-focus": !1,
+        "content-class": "nmorph-autocomplete__dropdown",
         "aria-label": e.props.name || e.props.id || "autocomplete",
         onOnOutsideClick: e.closeHandler,
         onOnEscapeKeydown: e.closeHandler
       }, {
         default: p(() => [
           e.loader ? (l(), t("div", H, [
-            c(a.$slots, "loader", {}, () => [
-              d(e.NmorphIcon, { size: "large" }, {
+            m(d.$slots, "loader", {}, () => [
+              c(e.NmorphIcon, { size: "large" }, {
                 default: p(() => [
-                  d(e.NmorphIconLoader)
+                  c(e.NmorphIconLoader)
                 ]),
                 _: 1
                 /* STABLE */
@@ -66,23 +69,23 @@ function V(a, s, S, e, z, A) {
             key: 1,
             id: e.listboxId,
             ref: e.virtualList.containerRef,
-            class: i(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
-            style: m({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
+            class: a(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
+            style: n({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
             role: "listbox",
             onScroll: s[0] || (s[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
           }, [
-            n(
+            i(
               "div",
               {
                 class: "nmorph-autocomplete__virtual-spacer",
-                style: m(e.virtualSpacerStyle)
+                style: n(e.virtualSpacerStyle)
               },
               [
-                n(
+                i(
                   "div",
                   {
                     class: "nmorph-autocomplete__virtual-content",
-                    style: m(e.virtualContentStyle)
+                    style: n(e.virtualContentStyle)
                   },
                   [
                     (l(!0), t(
@@ -93,12 +96,12 @@ function V(a, s, S, e, z, A) {
                         ref_for: !0,
                         ref: (r) => e.setVirtualItemRef(r, o.index),
                         key: o.index,
-                        class: i(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": o.index === e.currentIndex }]),
+                        class: a(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": o.index === e.currentIndex }]),
                         role: "option",
                         "aria-selected": o.index === e.currentIndex,
                         onClick: () => e.clickHandler(o.item)
                       }, [
-                        c(a.$slots, "default", {
+                        m(d.$slots, "default", {
                           scope: o.item
                         }, () => [
                           f(
@@ -131,12 +134,12 @@ function V(a, s, S, e, z, A) {
               h(e.filteredList, (o, r) => (l(), t("div", {
                 id: e.getOptionId(r),
                 key: r,
-                class: i(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": r === e.currentIndex }]),
+                class: a(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": r === e.currentIndex }]),
                 role: "option",
                 "aria-selected": r === e.currentIndex,
                 onClick: () => e.clickHandler(o)
               }, [
-                c(a.$slots, "default", { scope: o }, () => [
+                m(d.$slots, "default", { scope: o }, () => [
                   f(
                     u(o.value),
                     1
@@ -153,8 +156,8 @@ function V(a, s, S, e, z, A) {
         /* FORWARDED */
       }, 8, ["open", "relative-element", "z-index", "aria-label"])) : x("v-if", !0)
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
 const M = /* @__PURE__ */ k(v, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);