@nmorph/nmorph-ui-kit 2.2.58 → 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/NmorphGuide.css

@@ -0,0 +1 @@
+.nmorph-guide{display:contents}

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

@@ -0,0 +1,15 @@
+import './NmorphGuide.css';
+import o from "./NmorphGuide.vue2.js";
+import { openBlock as r, createElementBlock as t, renderSlot as n } from "vue";
+/* empty css                 */
+import p from "../../../_virtual/_plugin-vue_export-helper.js";
+const s = { class: "nmorph-guide" };
+function i(e, c, m, d, a, f) {
+  return r(), t("div", s, [
+    n(e.$slots, "default")
+  ]);
+}
+const $ = /* @__PURE__ */ p(o, [["render", i], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuide.vue"]]);
+export {
+  $ as default
+};

package/dist/components/feedback/nmorph-guide/NmorphGuide.vue2.js

@@ -0,0 +1,124 @@
+import './NmorphGuide.css';
+import { defineComponent as P, ref as C, computed as a, watch as j, provide as z } from "vue";
+import { nmorphGuideInjectionKey as A } from "./types.js";
+const G = /* @__PURE__ */ P({
+  __name: "NmorphGuide",
+  props: {
+    modelValue: { type: Boolean, required: !1, default: !1 },
+    activeStep: { type: [String, Number], required: !1, default: void 0 },
+    steps: { type: Array, required: !1, default: () => [] },
+    loop: { type: Boolean, required: !1, default: !1 },
+    closeOnFinish: { type: Boolean, required: !1, default: !0 },
+    showClose: { type: Boolean, required: !1, default: !0 },
+    showProgress: { type: Boolean, required: !1, default: !0 },
+    backText: { type: String, required: !1, default: "Back" },
+    nextText: { type: String, required: !1, default: "Next" },
+    finishText: { type: String, required: !1, default: "Finish" },
+    closeText: { type: String, required: !1, default: "Close" },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    maxWidth: { type: [Number, String], required: !1, default: "280px" }
+  },
+  emits: ["update:model-value", "update:active-step", "change", "back", "next", "finish", "close"],
+  setup(I, { expose: N, emit: B }) {
+    const r = I, l = B, u = C({}), g = C(void 0);
+    let f = 0;
+    const d = (e) => String(e), y = a(() => {
+      const e = /* @__PURE__ */ new Map();
+      return r.steps.forEach((t, s) => {
+        e.set(d(t.name), {
+          ...t,
+          order: t.order ?? s
+        });
+      }), e;
+    }), n = a(
+      () => Object.values(u.value).map((e) => ({
+        ...e,
+        ...y.value.get(d(e.name)),
+        registrationOrder: e.registrationOrder
+      })).filter((e) => !e.disabled).sort((e, t) => {
+        const s = e.order ?? e.registrationOrder, F = t.order ?? t.registrationOrder;
+        return s - F;
+      })
+    ), q = a(() => r.modelValue && n.value.length > 0), O = a(() => r.activeStep ?? g.value), o = a(() => n.value.findIndex((e) => e.name === O.value)), i = a(() => n.value[o.value] ?? null), T = a(() => o.value <= 0), b = a(() => o.value >= n.value.length - 1), p = (e) => {
+      const t = n.value.find((s) => s.name === e);
+      t && (g.value = e, l("update:active-step", e), l("change", t, n.value.indexOf(t)));
+    }, c = (e) => {
+      const t = n.value[e];
+      t && p(t.name);
+    }, v = () => {
+      l("update:model-value", !1), l("close", i.value, o.value);
+    }, m = () => {
+      l("finish", i.value, o.value), r.closeOnFinish && v();
+    }, x = () => {
+      if (i.value) {
+        if (l("back", i.value, o.value), T.value) {
+          r.loop && c(n.value.length - 1);
+          return;
+        }
+        c(o.value - 1);
+      }
+    }, h = () => {
+      if (i.value) {
+        if (l("next", i.value, o.value), b.value) {
+          r.loop ? c(0) : m();
+          return;
+        }
+        c(o.value + 1);
+      }
+    }, S = (e) => {
+      p(e);
+    }, w = (e) => {
+      const t = d(e.name), s = u.value[t];
+      u.value = {
+        ...u.value,
+        [t]: {
+          ...s,
+          ...e,
+          registrationOrder: s?.registrationOrder ?? f
+        }
+      }, s || (f += 1);
+    }, _ = (e) => {
+      const t = d(e), s = { ...u.value };
+      delete s[t], u.value = s;
+    };
+    j(
+      [() => r.modelValue, n, i],
+      ([e, t, s]) => {
+        !e || s || t.length === 0 || p(t[0].name);
+      },
+      { immediate: !0 }
+    ), z(A, {
+      active: q,
+      activeStep: i,
+      activeIndex: o,
+      steps: n,
+      loop: a(() => r.loop),
+      showClose: a(() => r.showClose),
+      showProgress: a(() => r.showProgress),
+      backText: a(() => r.backText),
+      nextText: a(() => r.nextText),
+      finishText: a(() => r.finishText),
+      closeText: a(() => r.closeText),
+      zIndex: a(() => r.zIndex),
+      width: a(() => r.width),
+      maxWidth: a(() => r.maxWidth),
+      registerStep: w,
+      unregisterStep: _,
+      goToStep: S,
+      back: x,
+      next: h,
+      finish: m,
+      close: v
+    }), N({ back: x, next: h, finish: m, close: v, goToStep: S });
+    const k = { props: r, emit: l, registeredSteps: u, internalActiveStep: g, get registrationCursor() {
+      return f;
+    }, set registrationCursor(e) {
+      f = e;
+    }, getStepKey: d, stepOverrides: y, steps: n, active: q, activeStepName: O, activeIndex: o, activeStep: i, isFirstStep: T, isLastStep: b, setActiveStep: p, goToIndex: c, close: v, finish: m, back: x, next: h, goToStep: S, registerStep: w, unregisterStep: _ };
+    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
+  }
+});
+export {
+  G as default
+};

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

@@ -0,0 +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(--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

@@ -0,0 +1,105 @@
+import './NmorphGuideStep.css';
+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 = {
+  key: 1,
+  class: "nmorph-guide-step__card",
+  role: "dialog",
+  "aria-live": "polite"
+}, v = ["src", "alt"], x = { class: "nmorph-guide-step__body" }, k = {
+  key: 0,
+  class: "nmorph-guide-step__progress"
+}, S = {
+  key: 1,
+  class: "nmorph-guide-step__title"
+}, f = {
+  key: 2,
+  class: "nmorph-guide-step__text"
+}, 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,
+    "z-index": e.guide?.zIndex.value,
+    width: e.guide?.width.value,
+    "max-width": e.guide?.maxWidth.value,
+    trigger: "manual",
+    disabled: !e.guide || e.props.disabled
+  }, {
+    content: a(() => [
+      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)) : i("v-if", !0),
+        l("div", x, [
+          e.guide?.showProgress.value ? (t(), o(
+            "div",
+            k,
+            n(e.stepSlotProps.index + 1) + " / " + n(e.stepSlotProps.total),
+            1
+            /* TEXT */
+          )) : i("v-if", !0),
+          e.currentStep.title ? (t(), o(
+            "h3",
+            S,
+            n(e.currentStep.title),
+            1
+            /* TEXT */
+          )) : i("v-if", !0),
+          e.currentStep.text ? (t(), o(
+            "p",
+            f,
+            n(e.currentStep.text),
+            1
+            /* TEXT */
+          )) : i("v-if", !0)
+        ]),
+        l("div", b, [
+          e.guide?.showClose.value ? (t(), s(e.NmorphButton, {
+            key: 0,
+            class: "nmorph-guide-step__close",
+            text: e.guide.closeText.value,
+            design: "plain",
+            thickness: "thin",
+            onClick: e.guide.close
+          }, null, 8, ["text", "onClick"])) : i("v-if", !0),
+          r[1] || (r[1] = l(
+            "span",
+            { class: "nmorph-guide-step__spacer" },
+            null,
+            -1
+            /* CACHED */
+          )),
+          h(e.NmorphButton, {
+            class: "nmorph-guide-step__back",
+            text: e.guide?.backText.value,
+            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,
+            thickness: "thin",
+            onClick: r[0] || (r[0] = (P) => e.isLastStep && !e.guide?.loop.value ? e.guide?.finish() : e.guide?.next())
+          }, null, 8, ["text"])
+        ])
+      ])) : i("v-if", !0)
+    ]),
+    default: a(() => [
+      c(d.$slots, "default")
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["force-show", "position", "z-index", "width", "max-width", "disabled"]);
+}
+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-guide/NmorphGuideStep.vue2.js

@@ -0,0 +1,55 @@
+import './NmorphGuideStep.css';
+import { defineComponent as g, inject as b, useSlots as x, computed as o, watch as y, onBeforeUnmount as _ } from "vue";
+import h from "../../basic/nmorph-button/NmorphButton.vue.js";
+import q from "../nmorph-tooltip/NmorphTooltip.vue.js";
+import { nmorphGuideInjectionKey as B } from "./types.js";
+const I = /* @__PURE__ */ g({
+  __name: "NmorphGuideStep",
+  props: {
+    name: { type: [String, Number], required: !0 },
+    title: { type: String, required: !1, default: "" },
+    text: { type: String, required: !1, default: "" },
+    imageSrc: { type: String, required: !1, default: "" },
+    imageAlt: { type: String, required: !1, default: "" },
+    position: { type: null, required: !1, default: "bottom" },
+    order: { type: Number, required: !1, default: void 0 },
+    disabled: { type: Boolean, required: !1, default: !1 }
+  },
+  setup(p, { expose: d }) {
+    d();
+    const e = p, t = b(B, null), a = x(), i = o(() => t?.activeStep.value ?? null), r = o(() => t?.activeIndex.value ?? -1), n = o(() => t?.steps.value.length ?? 0), s = o(() => r.value <= 0), l = o(() => r.value >= n.value - 1), m = o(() => !!(t?.active.value && i.value?.name === e.name)), c = o(() => i.value?.position ?? e.position), f = o(() => !!a.content), v = o(() => !t || !i.value ? null : {
+      step: i.value,
+      index: r.value,
+      total: n.value,
+      isFirst: s.value,
+      isLast: l.value,
+      back: t.back,
+      next: t.next,
+      close: t.close,
+      finish: t.finish
+    });
+    y(
+      () => ({
+        name: e.name,
+        title: e.title,
+        text: e.text,
+        imageSrc: e.imageSrc,
+        imageAlt: e.imageAlt,
+        position: e.position,
+        order: e.order,
+        disabled: e.disabled
+      }),
+      (S) => {
+        t?.registerStep(S);
+      },
+      { immediate: !0 }
+    ), _(() => {
+      t?.unregisterStep(e.name);
+    });
+    const u = { props: e, guide: t, slots: a, currentStep: i, currentIndex: r, totalSteps: n, isFirstStep: s, isLastStep: l, isActive: m, tooltipPosition: c, hasCustomContent: f, stepSlotProps: v, NmorphButton: h, NmorphTooltip: q };
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+  }
+});
+export {
+  I as default
+};

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

@@ -0,0 +1,4 @@
+const o = Symbol("nmorph-guide");
+export {
+  o as nmorphGuideInjectionKey
+};