@nmorph/nmorph-ui-kit 2.2.59 → 3.0.0

package/dist/components/feedback/nmorph-alert/NmorphAlert.css

@@ -1 +1 @@
-.nmorph-alert{--background-color: var(--nmorph-overlay-color);display:inline-block;padding:var(--indentation-03) var(--indentation-04);background:var(--background-color);border-radius:var(--default-border-radius)}.nmorph-alert .nmorph-alert__content,.nmorph-alert .nmorph-alert__content-title{color:var(--nmorph-white-color);white-space:pre-line}.nmorph-alert .nmorph-alert__content-title{font-weight:600;font-size:var(--font-size-medium);line-height:1;line-height:var(--line-height-loose)}.nmorph-alert .nmorph-alert__html-wrapper{display:block}.nmorph-alert .nmorph-alert__wrapper{justify-content:space-between}.nmorph-alert .nmorph-alert__wrapper,.nmorph-alert .nmorph-alert__left-side{display:flex;align-items:center}.nmorph-alert .nmorph-alert__icon{margin-right:var(--indentation-03)}.nmorph-alert .nmorph-alert__close{align-self:var(--nmorph-alert-close-align);margin-left:var(--indentation-03);cursor:pointer}.nmorph-alert .nmorph-alert__close .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-alert .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-success-color)}.nmorph-alert.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-error-color)}.nmorph-alert.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-warn-color)}.nmorph-alert.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-info-color)}.nmorph-alert.nmorph-alert--bordered{border:1px solid var(--nmorph-gray-color)}.nmorph-alert.nmorph-alert--fill{width:100%}
+.nmorph-alert{--nmorph-private-alert-background-color: var(--nmorph-overlay-color);display:inline-block;padding:var(--indentation-03) var(--indentation-04);background:var(--nmorph-private-alert-background-color);border-radius:var(--default-border-radius)}.nmorph-alert .nmorph-alert__content,.nmorph-alert .nmorph-alert__content-title{color:var(--nmorph-white-color);white-space:pre-line}.nmorph-alert .nmorph-alert__content-title{font-weight:var(--nmorph-typography-title-small-font-weight);font-size:var(--nmorph-typography-title-small-font-size);line-height:1;line-height:var(--line-height-loose)}.nmorph-alert .nmorph-alert__html-wrapper{display:block}.nmorph-alert .nmorph-alert__wrapper{justify-content:space-between}.nmorph-alert .nmorph-alert__wrapper,.nmorph-alert .nmorph-alert__left-side{display:flex;align-items:center}.nmorph-alert .nmorph-alert__icon{margin-right:var(--indentation-03)}.nmorph-alert .nmorph-alert__close{align-self:var(--nmorph-private-alert-close-align);margin-left:var(--indentation-03);cursor:pointer}.nmorph-alert .nmorph-alert__close .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-alert .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-success-color)}.nmorph-alert.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-error-color)}.nmorph-alert.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-warn-color)}.nmorph-alert.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-info-color)}.nmorph-alert.nmorph-alert--bordered{border:1px solid var(--nmorph-gray-color)}.nmorph-alert.nmorph-alert--fill{width:100%}

package/dist/components/feedback/nmorph-alert/NmorphAlert.vue2.js

@@ -1,12 +1,12 @@
 import './NmorphAlert.css';
 import { defineComponent as m, computed as l, useSlots as u } from "vue";
 import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { createCssVariables as g } from "../../../utils/common.js";
-import { NmorphAlertType as r } from "./types.js";
-import h from "../../../assets/icons/circle-close-filled.svg.js";
+import { createCssVariables as h } from "../../../utils/common.js";
+import g from "../../../assets/icons/circle-close-filled.svg.js";
 import I from "../../../assets/icons/info-filled.svg.js";
 import q from "../../../assets/icons/warn-triangle-filled.svg.js";
 import N from "../../../assets/icons/success-filled.svg.js";
+import { NmorphAlertType as r } from "./types.js";
 import b from "../../../assets/icons/cross.svg.js";
 import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 const M = /* @__PURE__ */ m({
@@ -25,16 +25,16 @@ const M = /* @__PURE__ */ m({
     backgroundColor: { type: String, required: !1, default: void 0 }
   },
   emits: ["close"],
-  setup(s, { expose: i, emit: n }) {
-    i();
-    const e = s, o = n, a = l(
+  setup(i, { expose: n, emit: s }) {
+    n();
+    const e = i, o = s, a = l(
       () => y({
         "nmorph-alert": [e.type, e.bordered && "bordered", e.fill && "fill"]
       })
     ), p = l(() => ({
-      "--nmorph-alert-close-align": e.closeIconPosition,
-      ...g({
-        "--background-color": e.backgroundColor
+      "--nmorph-private-alert-close-align": e.closeIconPosition,
+      ...h({
+        "--nmorph-private-alert-background-color": e.backgroundColor
       })
     })), f = () => {
       o("close");
@@ -42,7 +42,7 @@ const M = /* @__PURE__ */ m({
       [r.success]: N,
       [r.warning]: q,
       [r.info]: I,
-      [r.error]: h
+      [r.error]: g
     }, c = u(), t = { props: e, emit: o, modifiers: a, styles: p, closeHandler: f, iconNameMap: d, slots: c, get NmorphIcon() {
       return S;
     }, get NmorphIconCross() {

package/dist/components/feedback/nmorph-alert/types.js

@@ -1,4 +1,9 @@
-var r = /* @__PURE__ */ ((n) => (n.success = "success", n.error = "error", n.warning = "warning", n.info = "info", n))(r || {});
+const r = {
+  success: "success",
+  error: "error",
+  warning: "warning",
+  info: "info"
+};
 export {
   r as NmorphAlertType
 };

package/dist/components/feedback/nmorph-callout/NmorphCallout.css

@@ -1 +1 @@
-.nmorph-callout{--callout-color: var(--nmorph-accent-color);--callout-padding: var(--indentation-03) var(--indentation-04);--callout-border-radius: var(--default-border-radius);--callout-accent-width: var(--indentation-02);--callout-title-gap: var(--indentation-03);--callout-title-font-size: var(--font-size-medium);--callout-content-font-size: var(--font-size-extra-small);position:relative;display:block;padding:var(--callout-padding);overflow:hidden;color:inherit;text-decoration:none;border-radius:var(--callout-border-radius)}.nmorph-callout:before{position:absolute;top:0;left:0;width:var(--callout-accent-width);height:100%;background:var(--callout-color);content:""}.nmorph-callout:after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--callout-color);opacity:.2;content:""}.nmorph-callout.nmorph-callout--warning{--callout-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--callout-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--callout-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{margin-bottom:var(--callout-title-gap);font-weight:600;font-size:var(--callout-title-font-size);line-height:var(--line-height-loose)}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:400;font-size:var(--callout-content-font-size);line-height:var(--line-height-regular);white-space:pre-wrap}
+.nmorph-callout{--nmorph-private-callout-color: var(--nmorph-accent-color);--nmorph-private-callout-padding: var(--indentation-03) var(--indentation-04);--nmorph-private-callout-border-radius: var(--default-border-radius);--nmorph-private-callout-accent-width: var(--indentation-02);--nmorph-private-callout-title-gap: var(--indentation-03);--nmorph-private-callout-title-font-size: var(--nmorph-typography-title-small-font-size);--nmorph-private-callout-content-font-size: var(--nmorph-typography-body-small-font-size);position:relative;display:block;padding:var(--nmorph-private-callout-padding);overflow:hidden;color:inherit;text-decoration:none;border-radius:var(--nmorph-private-callout-border-radius)}.nmorph-callout:before{position:absolute;top:0;left:0;width:var(--nmorph-private-callout-accent-width);height:100%;background:var(--nmorph-private-callout-color);content:""}.nmorph-callout:after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-private-callout-color);opacity:.2;content:""}.nmorph-callout.nmorph-callout--warning{--nmorph-private-callout-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--nmorph-private-callout-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--nmorph-private-callout-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{margin-bottom:var(--nmorph-private-callout-title-gap);font-weight:var(--nmorph-typography-title-small-font-weight);font-size:var(--nmorph-private-callout-title-font-size);line-height:var(--nmorph-typography-title-small-line-height)}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:var(--nmorph-typography-body-small-font-weight);font-size:var(--nmorph-private-callout-content-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:pre-wrap}

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphCallout.css';
-import { defineComponent as p, useSlots as c, computed as t } from "vue";
+import { defineComponent as f, useSlots as c, computed as t } from "vue";
 import { createCssVariables as g, createCssSizeVariables as y } from "../../../utils/common.js";
-const b = /* @__PURE__ */ p({
+const S = /* @__PURE__ */ f({
   __name: "NmorphCallout",
   props: {
     type: { type: String, required: !1, default: "info" },
@@ -20,8 +20,8 @@ const b = /* @__PURE__ */ p({
     borderRadius: { type: [Number, String], required: !1, default: "var(--default-border-radius)" },
     accentWidth: { type: [Number, String], required: !1, default: "var(--indentation-02)" },
     titleGap: { type: [Number, String], required: !1, default: "var(--indentation-03)" },
-    titleFontSize: { type: [Number, String], required: !1, default: "var(--font-size-medium)" },
-    contentFontSize: { type: [Number, String], required: !1, default: "var(--font-size-extra-small)" }
+    titleFontSize: { type: [Number, String], required: !1, default: "var(--nmorph-typography-title-small-font-size)" },
+    contentFontSize: { type: [Number, String], required: !1, default: "var(--nmorph-typography-body-small-font-size)" }
   },
   setup(o, { expose: n }) {
     n();
@@ -32,30 +32,30 @@ const b = /* @__PURE__ */ p({
       top: "_top"
     }, e = o, r = c(), d = t(() => ({
       ...y({
-        "--callout-padding": e.padding,
-        "--callout-border-radius": e.borderRadius,
-        "--callout-accent-width": e.accentWidth,
-        "--callout-title-gap": e.titleGap,
-        "--callout-title-font-size": e.titleFontSize,
-        "--callout-content-font-size": e.contentFontSize
+        "--nmorph-private-callout-padding": e.padding,
+        "--nmorph-private-callout-border-radius": e.borderRadius,
+        "--nmorph-private-callout-accent-width": e.accentWidth,
+        "--nmorph-private-callout-title-gap": e.titleGap,
+        "--nmorph-private-callout-title-font-size": e.titleFontSize,
+        "--nmorph-private-callout-content-font-size": e.contentFontSize
       }),
       ...g({
-        "--callout-color": e.color
+        "--nmorph-private-callout-color": e.color
       })
-    })), l = t(() => {
+    })), i = t(() => {
       if (e.target)
         return e.target in a ? a[e.target] : e.target;
     }), u = t(() => e.as !== "a" ? {} : {
       href: e.href,
-      target: l.value,
+      target: i.value,
       rel: e.rel,
       referrerpolicy: e.referrerpolicy ?? e.referrerPolicy,
       download: e.download === !0 ? "" : e.download === !1 ? void 0 : e.download,
       "aria-label": e.ariaLabel
-    }), s = t(() => !!(r.header || r.title || e.title)), f = t(() => !!r.default), i = { targetMap: a, props: e, slots: r, styles: d, resolvedTarget: l, rootAttrs: u, hasHeader: s, hasDefaultContent: f };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+    }), p = t(() => !!(r.header || r.title || e.title)), s = t(() => !!r.default), l = { targetMap: a, props: e, slots: r, styles: d, resolvedTarget: i, rootAttrs: u, hasHeader: p, hasDefaultContent: s };
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
   }
 });
 export {
-  b as default
+  S as default
 };

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

@@ -1 +1 @@
-.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-03);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;box-sizing:border-box;padding:var(--indentation-02);font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:32px;height:32px;padding:0;color:inherit;background:transparent;border:0;cursor:pointer}.nmorph-dialog .nmorph-dialog__content{flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--indentation-02);overflow:hidden auto}
+.nmorph-dialog{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;box-sizing:border-box;width:var(--nmorph-private-dialog-width);max-width:var(--nmorph-private-dialog-max-width);max-height:var(--nmorph-private-dialog-max-height, var(--nmorph-private-dialog-default-max-height));padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);transform:translate(-50%,-50%);--nmorph-private-dialog-max-width: calc(100vw - 32px) ;--nmorph-private-dialog-default-max-height: calc(100vh - 32px) }@supports (height: 100dvh){.nmorph-dialog{--nmorph-private-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;box-sizing:border-box;padding:var(--indentation-02);font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height)}.nmorph-dialog .nmorph-dialog__close-icon{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:32px;height:32px;padding:0;color:inherit;background:transparent;border:0;cursor:pointer}.nmorph-dialog .nmorph-dialog__content{flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--indentation-02);overflow:hidden auto}

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

@@ -1,67 +1,68 @@
 import './NmorphDialog.css';
-import { defineComponent as g, useSlots as v, computed as r, ref as O, watch as T } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import C from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as y, useSlots as g, computed as i, ref as v, watch as x } from "vue";
+import { useModifiers as T } from "../../../utils/create-modifiers.js";
+import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import N from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
 import _ from "../../../assets/icons/cross.svg.js";
-const B = /* @__PURE__ */ g({
+const b = /* @__PURE__ */ y({
   __name: "NmorphDialog",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
     title: { type: String, required: !1, default: "" },
     width: { type: String, required: !1, default: "330px" },
+    maxWidth: { type: String, required: !1, default: void 0 },
     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 },
     showClose: { type: Boolean, required: !1, default: !0 },
     zIndex: { type: Number, required: !1, default: void 0 },
     closeOnOverlay: { type: Boolean, required: !1, default: !0 },
     closeOnEscape: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["on-close", "update:model-value"],
-  setup(d, { expose: p, emit: c }) {
-    p();
-    const e = d, a = c, i = v(), f = r(
-      () => q({
+  setup(n, { expose: d, emit: p }) {
+    d();
+    const e = n, r = p, s = g(), f = i(
+      () => T({
         "nmorph-dialog": []
       })
-    ), y = r(() => ({
-      "--nmorph-dialog-width": e.width,
-      ...e.maxHeight && { "--nmorph-dialog-max-height": e.maxHeight }
-    })), h = r(() => !!(i.header || e.title || e.showClose)), u = r(() => e.closeOnOverlay && e.closeOnClickModal), s = O(e.modelValue);
-    let t = null, l = null;
-    T(
+    ), c = i(() => ({
+      "--nmorph-private-dialog-width": e.width,
+      ...e.maxWidth && { "--nmorph-private-dialog-max-width": e.maxWidth },
+      ...e.maxHeight && { "--nmorph-private-dialog-max-height": e.maxHeight }
+    })), h = i(() => !!(s.header || e.title || e.showClose)), a = v(e.modelValue);
+    let o = null, l = null;
+    x(
       () => e.modelValue,
-      (o) => {
-        o ? (l && clearTimeout(l), t = setTimeout(() => {
-          s.value = !0;
-        }, e.openDelay)) : (t && clearTimeout(t), l = setTimeout(() => {
-          s.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 n = () => {
-      a("on-close"), t && clearTimeout(t);
-      const o = () => {
-        a("update:model-value", !1);
+    const u = () => {
+      r("on-close"), o && clearTimeout(o);
+      const t = () => {
+        r("update:model-value", !1);
       };
-      e.closeDelay <= 0 ? o() : l = setTimeout(o, e.closeDelay);
-    }, m = { props: e, emit: a, slots: i, modifiers: f, dialogStyle: y, hasHeader: h, shouldCloseOnOverlay: u, isVisible: s, get openTimeout() {
-      return t;
-    }, set openTimeout(o) {
-      t = o;
+      e.closeDelay <= 0 ? t() : l = setTimeout(t, e.closeDelay);
+    }, m = { props: e, emit: r, slots: s, modifiers: f, dialogStyle: c, hasHeader: h, isVisible: a, get openTimeout() {
+      return o;
+    }, set openTimeout(t) {
+      o = t;
     }, get closeTimeout() {
       return l;
-    }, set closeTimeout(o) {
-      l = o;
-    }, closeHandler: n, overlayClickHandler: () => {
-      u.value && n();
+    }, set closeTimeout(t) {
+      l = t;
+    }, closeHandler: u, overlayClickHandler: () => {
+      e.closeOnOverlay && u();
     }, get NmorphOverlay() {
       return N;
     }, get NmorphIcon() {
-      return C;
+      return q;
     }, get NmorphIconCross() {
       return _;
     } };
@@ -69,5 +70,5 @@ const B = /* @__PURE__ */ g({
   }
 });
 export {
-  B as default
+  b as default
 };

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.css

@@ -1 +1 @@
-.nmorph-drawer{position:fixed;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;color:var(--nmorph-text-color);background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-outset);transition:transform var(--transition-02) ease}.nmorph-drawer--left,.nmorph-drawer--right{top:0;width:min(var(--nmorph-drawer-size),100vw);height:100vh}.nmorph-drawer--top,.nmorph-drawer--bottom{left:0;width:100vw;height:min(var(--nmorph-drawer-size),100vh)}.nmorph-drawer--left{left:0;transform:translate(-110%)}.nmorph-drawer--right{right:0;transform:translate(110%)}.nmorph-drawer--top{top:0;transform:translateY(-110%)}.nmorph-drawer--bottom{bottom:0;transform:translateY(110%)}.nmorph-drawer--open{transform:translate(0)}.nmorph-drawer .nmorph-drawer__header,.nmorph-drawer .nmorph-drawer__footer{flex:0 0 auto;box-sizing:border-box;padding:var(--indentation-04)}.nmorph-drawer .nmorph-drawer__header{display:flex;gap:var(--indentation-03);justify-content:space-between;align-items:center;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-drawer .nmorph-drawer__title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-drawer .nmorph-drawer__close{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:32px;height:32px;padding:0;color:inherit;background:transparent;border:0;cursor:pointer}.nmorph-drawer .nmorph-drawer__content{flex:1 1 auto;box-sizing:border-box;min-width:0;min-height:0;padding:0 var(--indentation-04) var(--indentation-04);overflow:hidden auto}
+.nmorph-drawer{position:fixed;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;color:var(--nmorph-text-color);background:var(--nmorph-main-color);box-shadow:none;transition:transform var(--transition-02) ease}.nmorph-drawer--left,.nmorph-drawer--right{top:0;width:min(var(--nmorph-private-drawer-size),100vw);height:100vh}.nmorph-drawer--top,.nmorph-drawer--bottom{left:0;width:100vw;height:min(var(--nmorph-private-drawer-size),100vh)}.nmorph-drawer--left{left:0;transform:translate(-110%)}.nmorph-drawer--right{right:0;transform:translate(110%)}.nmorph-drawer--top{top:0;transform:translateY(-110%)}.nmorph-drawer--bottom{bottom:0;transform:translateY(110%)}.nmorph-drawer--open{transform:translate(0)}.nmorph-drawer .nmorph-drawer__header,.nmorph-drawer .nmorph-drawer__footer{flex:0 0 auto;box-sizing:border-box;padding:var(--indentation-04)}.nmorph-drawer .nmorph-drawer__header{display:flex;gap:var(--indentation-03);justify-content:space-between;align-items:center;font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height)}.nmorph-drawer .nmorph-drawer__title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-drawer .nmorph-drawer__close{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:32px;height:32px;padding:0;color:inherit;background:transparent;border:0;cursor:pointer}.nmorph-drawer .nmorph-drawer__content{flex:1 1 auto;box-sizing:border-box;min-width:0;min-height:0;padding:0 var(--indentation-04) var(--indentation-04);overflow:hidden auto}

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphDrawer.css';
-import { defineComponent as m, useSlots as c, computed as o } from "vue";
+import { defineComponent as m, useSlots as c, computed as t } from "vue";
 import { useModifiers as y } from "../../../utils/create-modifiers.js";
 import { createCssSizeVariables as h } from "../../../utils/common.js";
 import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import v from "../../../assets/icons/cross.svg.js";
+import v from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import _ from "../../../assets/icons/cross.svg.js";
 const w = /* @__PURE__ */ m({
   __name: "NmorphDrawer",
   props: {
@@ -23,22 +23,22 @@ const w = /* @__PURE__ */ m({
   emits: ["on-close", "update:model-value"],
   setup(s, { expose: n, emit: u }) {
     n();
-    const e = s, r = u, t = c(), d = o(
+    const e = s, r = u, o = c(), p = t(
       () => y({
         "nmorph-drawer": [e.placement, e.modelValue && "open"]
       })
-    ), p = o(
+    ), d = t(
       () => h({
-        "--nmorph-drawer-size": e.size
+        "--nmorph-private-drawer-size": e.size
       })
     ), l = () => {
       r("on-close"), r("update:model-value", !1);
     }, i = () => {
       e.closeOnOverlay && l();
-    }, f = o(() => !!(t.header || e.title || e.showClose)), a = { props: e, emit: r, slots: t, modifiers: d, drawerStyle: p, closeHandler: l, overlayClickHandler: i, hasHeader: f, get NmorphIcon() {
-      return _;
-    }, get NmorphIconCross() {
+    }, f = t(() => !!(o.header || e.title || e.showClose)), a = { props: e, emit: r, slots: o, modifiers: p, drawerStyle: d, closeHandler: l, overlayClickHandler: i, hasHeader: f, get NmorphIcon() {
       return v;
+    }, get NmorphIconCross() {
+      return _;
     }, get NmorphOverlay() {
       return q;
     } };

package/dist/components/feedback/nmorph-guide/NmorphGuideStep.css

@@ -1 +1 @@
-.nmorph-guide-step__card{display:grid;gap:var(--indentation-03);min-width:min(240px,100vw - 48px)}.nmorph-guide-step__image{display:block;width:100%;max-height:140px;border-radius:var(--default-border-radius);object-fit:cover}.nmorph-guide-step__body{display:grid;gap:var(--indentation-02)}.nmorph-guide-step__progress{color:var(--nmorph-placeholder-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-guide-step__title{margin:0;color:var(--nmorph-text-color);font-size:var(--font-size-medium);line-height:var(--line-height-compact)}.nmorph-guide-step__text{margin:0;color:var(--nmorph-text-color);font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-guide-step__actions{display:flex;gap:var(--indentation-02);align-items:center}.nmorph-guide-step__spacer{flex:1 1 auto}
+.nmorph-guide-step__card{display:grid;gap:var(--indentation-03);min-width:min(240px,100vw - 48px)}.nmorph-guide-step__image{display:block;width:100%;max-height:140px;border-radius:var(--default-border-radius);object-fit:cover}.nmorph-guide-step__body{display:grid;gap:var(--indentation-02)}.nmorph-guide-step__progress{color:var(--nmorph-placeholder-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-guide-step__title{margin:0;color:var(--nmorph-text-color);font-size:var(--nmorph-typography-title-small-font-size);line-height:var(--nmorph-typography-title-small-line-height)}.nmorph-guide-step__text{margin:0;color:var(--nmorph-text-color);font-size:var(--nmorph-typography-body-font-size);line-height:var(--nmorph-typography-body-line-height)}.nmorph-guide-step__actions{display:flex;gap:var(--indentation-02);align-items:center}.nmorph-guide-step__spacer{flex:1 1 auto}

package/dist/components/feedback/nmorph-guide/NmorphGuideStep.vue.js

@@ -1,6 +1,6 @@
 import './NmorphGuideStep.css';
-import p from "./NmorphGuideStep.vue2.js";
-import { openBlock as t, createBlock as s, withCtx as a, renderSlot as c, normalizeProps as g, mergeProps as m, createElementBlock as i, createCommentVNode as o, createElementVNode as n, toDisplayString as l, createVNode as h } from "vue";
+import m from "./NmorphGuideStep.vue2.js";
+import { openBlock as t, createBlock as s, withCtx as a, renderSlot as c, normalizeProps as g, mergeProps as p, createElementBlock as o, createCommentVNode as i, createElementVNode as l, toDisplayString as n, createVNode as h } from "vue";
 /* empty css                     */
 import _ from "../../../_virtual/_plugin-vue_export-helper.js";
 const u = {
@@ -8,17 +8,17 @@ const u = {
   class: "nmorph-guide-step__card",
   role: "dialog",
   "aria-live": "polite"
-}, v = ["src", "alt"], x = { class: "nmorph-guide-step__body" }, S = {
+}, v = ["src", "alt"], x = { class: "nmorph-guide-step__body" }, k = {
   key: 0,
   class: "nmorph-guide-step__progress"
-}, f = {
+}, S = {
   key: 1,
   class: "nmorph-guide-step__title"
-}, k = {
+}, f = {
   key: 2,
   class: "nmorph-guide-step__text"
-}, y = { class: "nmorph-guide-step__actions" };
-function b(d, r, w, e, C, N) {
+}, b = { class: "nmorph-guide-step__actions" };
+function w(d, r, y, e, C, N) {
   return t(), s(e.NmorphTooltip, {
     "force-show": e.isActive,
     position: e.tooltipPosition,
@@ -29,46 +29,46 @@ function b(d, r, w, e, C, N) {
     disabled: !e.guide || e.props.disabled
   }, {
     content: a(() => [
-      e.hasCustomContent && e.stepSlotProps ? c(d.$slots, "content", g(m({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (t(), i("div", u, [
-        e.currentStep.imageSrc ? (t(), i("img", {
+      e.hasCustomContent && e.stepSlotProps ? c(d.$slots, "content", g(p({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (t(), o("div", u, [
+        e.currentStep.imageSrc ? (t(), o("img", {
           key: 0,
           class: "nmorph-guide-step__image",
           src: e.currentStep.imageSrc,
           alt: e.currentStep.imageAlt || e.currentStep.title || ""
-        }, null, 8, v)) : o("v-if", !0),
-        n("div", x, [
-          e.guide?.showProgress.value ? (t(), i(
+        }, null, 8, v)) : i("v-if", !0),
+        l("div", x, [
+          e.guide?.showProgress.value ? (t(), o(
             "div",
-            S,
-            l(e.stepSlotProps.index + 1) + " / " + l(e.stepSlotProps.total),
+            k,
+            n(e.stepSlotProps.index + 1) + " / " + n(e.stepSlotProps.total),
             1
             /* TEXT */
-          )) : o("v-if", !0),
-          e.currentStep.title ? (t(), i(
+          )) : i("v-if", !0),
+          e.currentStep.title ? (t(), o(
             "h3",
-            f,
-            l(e.currentStep.title),
+            S,
+            n(e.currentStep.title),
             1
             /* TEXT */
-          )) : o("v-if", !0),
-          e.currentStep.text ? (t(), i(
+          )) : i("v-if", !0),
+          e.currentStep.text ? (t(), o(
             "p",
-            k,
-            l(e.currentStep.text),
+            f,
+            n(e.currentStep.text),
             1
             /* TEXT */
-          )) : o("v-if", !0)
+          )) : i("v-if", !0)
         ]),
-        n("div", y, [
+        l("div", b, [
           e.guide?.showClose.value ? (t(), s(e.NmorphButton, {
             key: 0,
             class: "nmorph-guide-step__close",
             text: e.guide.closeText.value,
-            "style-type": "transparent",
-            height: "thin",
+            design: "plain",
+            thickness: "thin",
             onClick: e.guide.close
-          }, null, 8, ["text", "onClick"])) : o("v-if", !0),
-          r[1] || (r[1] = n(
+          }, null, 8, ["text", "onClick"])) : i("v-if", !0),
+          r[1] || (r[1] = l(
             "span",
             { class: "nmorph-guide-step__spacer" },
             null,
@@ -78,19 +78,19 @@ function b(d, r, w, e, C, N) {
           h(e.NmorphButton, {
             class: "nmorph-guide-step__back",
             text: e.guide?.backText.value,
-            "style-type": "transparent",
-            height: "thin",
+            design: "plain",
+            thickness: "thin",
             disabled: e.isFirstStep && !e.guide?.loop.value,
             onClick: e.guide?.back
           }, null, 8, ["text", "disabled", "onClick"]),
           h(e.NmorphButton, {
             class: "nmorph-guide-step__next",
             text: e.isLastStep && !e.guide?.loop.value ? e.guide?.finishText.value : e.guide?.nextText.value,
-            height: "thin",
+            thickness: "thin",
             onClick: r[0] || (r[0] = (P) => e.isLastStep && !e.guide?.loop.value ? e.guide?.finish() : e.guide?.next())
           }, null, 8, ["text"])
         ])
-      ])) : o("v-if", !0)
+      ])) : i("v-if", !0)
     ]),
     default: a(() => [
       c(d.$slots, "default")
@@ -99,7 +99,7 @@ function b(d, r, w, e, C, N) {
     /* FORWARDED */
   }, 8, ["force-show", "position", "z-index", "width", "max-width", "disabled"]);
 }
-const A = /* @__PURE__ */ _(p, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
+const A = /* @__PURE__ */ _(m, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
 export {
   A as default
 };

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.css

@@ -1 +1 @@
-.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative;display:inline-flex}.nmorph-tooltip .nmorph-tooltip__trigger{display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;z-index:var(--nmorph-tooltip-z-index);width:var(--width);max-width:var(--max-width);height:var(--height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-tooltip-width)}
+.nmorph-tooltip{--nmorph-private-tooltip-max-width: 120px;--nmorph-private-tooltip-width: fit-content;--nmorph-private-tooltip-height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative;display:inline-flex}.nmorph-tooltip .nmorph-tooltip__trigger{display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;z-index:var(--nmorph-private-tooltip-z-index);width:var(--nmorph-private-tooltip-width);max-width:var(--nmorph-private-tooltip-max-width);height:var(--nmorph-private-tooltip-height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-private-tooltip-root-width)}

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue2.js

@@ -22,7 +22,7 @@ const P = 600, $ = /* @__PURE__ */ j({
     height: { type: [Number, String], required: !1, default: void 0 }
   },
   setup(C, { expose: N }) {
-    const e = C, r = o(e.forceShow), g = o(null), T = o(null), b = A(), i = o(null), u = o(null), a = o(null), n = o("mouse"), p = o(!1), m = f(() => !!(e.text || b.content)), O = f(() => r.value && m.value && !e.disabled), { placement: S } = U({
+    const e = C, r = o(e.forceShow), g = o(null), T = o(null), b = A(), n = o(null), a = o(null), u = o(null), i = o("mouse"), p = o(!1), m = f(() => !!(e.text || b.content)), O = f(() => r.value && m.value && !e.disabled), { placement: S } = U({
       initialPlacement: e.position,
       contentDOMElement: g,
       relativeElement: T
@@ -35,11 +35,11 @@ const P = 600, $ = /* @__PURE__ */ j({
         ]
       })
     ), s = () => {
-      i.value && clearTimeout(i.value), i.value = null;
+      n.value && clearTimeout(n.value), n.value = null;
     }, c = () => {
-      u.value && clearTimeout(u.value), u.value = null;
-    }, h = () => {
       a.value && clearTimeout(a.value), a.value = null;
+    }, v = () => {
+      u.value && clearTimeout(u.value), u.value = null;
     }, l = (t) => {
       if (s(), c(), e.disabled || !m.value) {
         r.value = !1;
@@ -52,50 +52,50 @@ const P = 600, $ = /* @__PURE__ */ j({
           l(!0);
           return;
         }
-        s(), i.value = setTimeout(() => l(!0), e.openDelay);
+        s(), n.value = setTimeout(() => l(!0), e.openDelay);
       }
-    }, v = () => {
+    }, h = () => {
       if (!e.forceShow) {
         if (s(), e.closeDelay <= 0) {
           l(!1);
           return;
         }
-        c(), u.value = setTimeout(() => l(!1), e.closeDelay);
+        c(), a.value = setTimeout(() => l(!1), e.closeDelay);
       }
     }, y = () => {
-      r.value ? v() : d();
+      r.value ? h() : d();
     }, M = () => {
-      e.trigger !== "hover" || n.value !== "mouse" || d();
+      e.trigger !== "hover" || i.value !== "mouse" || d();
     }, E = () => {
-      e.trigger !== "hover" || n.value !== "mouse" || v();
+      e.trigger !== "hover" || i.value !== "mouse" || h();
     }, k = (t) => {
       if (p.value) {
         p.value = !1, t.preventDefault();
         return;
       }
       if (e.disabled || e.trigger === "manual") return;
-      if (n.value === "touch" || n.value === "pen") {
+      if (i.value === "touch" || i.value === "pen") {
         if (e.touch !== "click") return;
         y();
         return;
       }
       e.trigger === "click" && y();
     }, z = (t) => {
-      n.value = t.pointerType || "mouse", !(e.disabled || e.touch !== "longpress") && (t.pointerType !== "touch" && t.pointerType !== "pen" || (h(), a.value = setTimeout(() => {
+      i.value = t.pointerType || "mouse", !(e.disabled || e.touch !== "longpress") && (t.pointerType !== "touch" && t.pointerType !== "pen" || (v(), u.value = setTimeout(() => {
         p.value = !0, d();
       }, P)));
     }, I = () => {
-      h();
+      v();
     }, x = f(() => e.forceCoordinate ? "100%" : "auto"), _ = V(
       () => r.value,
       () => e.zIndex
     ), L = f(() => ({
-      "--nmorph-tooltip-width": x.value,
-      "--nmorph-tooltip-z-index": _.value,
+      "--nmorph-private-tooltip-root-width": x.value,
+      "--nmorph-private-tooltip-z-index": _.value,
       ...Z({
-        "--width": e.width,
-        "--max-width": e.maxWidth,
-        "--height": e.height
+        "--nmorph-private-tooltip-width": e.width,
+        "--nmorph-private-tooltip-max-width": e.maxWidth,
+        "--nmorph-private-tooltip-height": e.height
       })
     })), q = o(null);
     F(
@@ -110,9 +110,9 @@ const P = 600, $ = /* @__PURE__ */ j({
       },
       { immediate: !0 }
     ), G(() => {
-      s(), c(), h();
-    }), N({ tooltipBody: q, open: d, close: v, toggle: y });
-    const w = { LONG_PRESS_DELAY_IN_MS: P, props: e, showTooltip: r, tooltipDOMRef: g, slotDOMRef: T, slots: b, openTimer: i, closeTimer: u, longPressTimer: a, lastPointerType: n, suppressNextClick: p, hasTooltipContent: m, shouldRenderTooltip: O, placement: S, modifiers: B, clearOpenTimer: s, clearCloseTimer: c, clearLongPressTimer: h, setTooltipOpen: l, open: d, close: v, toggle: y, handleMouseEnter: M, handleMouseLeave: E, handleClick: k, handlePointerDown: z, handlePointerEnd: I, rootWidth: x, zIndex: _, styles: L, tooltipBody: q };
+      s(), c(), v();
+    }), N({ tooltipBody: q, open: d, close: h, toggle: y });
+    const w = { LONG_PRESS_DELAY_IN_MS: P, props: e, showTooltip: r, tooltipDOMRef: g, slotDOMRef: T, slots: b, openTimer: n, closeTimer: a, longPressTimer: u, lastPointerType: i, suppressNextClick: p, hasTooltipContent: m, shouldRenderTooltip: O, placement: S, modifiers: B, clearOpenTimer: s, clearCloseTimer: c, clearLongPressTimer: v, setTooltipOpen: l, open: d, close: h, toggle: y, handleMouseEnter: M, handleMouseLeave: E, handleClick: k, handlePointerDown: z, handlePointerEnd: I, rootWidth: x, zIndex: _, styles: L, tooltipBody: q };
     return Object.defineProperty(w, "__isScriptSetup", { enumerable: !1, value: !0 }), w;
   }
 });

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

@@ -1 +1 @@
-.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{display:flex;align-items:center;box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;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}
+.nmorph-autocomplete .nmorph-autocomplete__input-content{position:relative}.nmorph-autocomplete.nmorph-autocomplete--open .nmorph-autocomplete__input-content{z-index:var(--nmorph-private-autocomplete-input-z-index)}.nmorph-autocomplete__list{padding:var(--indentation-01) 0}.nmorph-autocomplete__list-item{display:flex;align-items:center;box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;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(--nmorph-private-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}