@nmorph/nmorph-ui-kit 3.0.16 → 3.0.18

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

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

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

@@ -1,10 +1,12 @@
 import './NmorphDialog.css';
-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__ */ y({
+import { defineComponent as g, useSlots as v, computed as i, ref as x, watch as T } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { useMergedAttrs as N } from "../../../utils/attrs.js";
+import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import C from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import O from "../../../assets/icons/cross.svg.js";
+const V = /* @__PURE__ */ g({
+  inheritAttrs: !1,
   __name: "NmorphDialog",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -20,55 +22,55 @@ const b = /* @__PURE__ */ y({
     closeOnEscape: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["on-close", "update:model-value"],
-  setup(n, { expose: d, emit: p }) {
-    d();
-    const e = n, r = p, s = g(), f = i(
-      () => T({
+  setup(p, { expose: f, emit: c }) {
+    f();
+    const e = p, l = c, s = v(), u = i(
+      () => q({
         "nmorph-dialog": []
       })
-    ), c = i(() => ({
+    ), m = 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(
+    })), h = N(u, m), y = i(() => !!(s.header || e.title || e.showClose)), a = x(e.modelValue);
+    let o = null, r = null;
+    T(
       () => e.modelValue,
       (t) => {
-        t ? (l && clearTimeout(l), o = setTimeout(() => {
+        t ? (r && clearTimeout(r), o = setTimeout(() => {
           a.value = !0;
-        }, e.openDelay)) : (o && clearTimeout(o), l = setTimeout(() => {
+        }, e.openDelay)) : (o && clearTimeout(o), r = setTimeout(() => {
           a.value = !1;
         }, e.closeDelay));
       },
       { immediate: !0 }
     );
-    const u = () => {
-      r("on-close"), o && clearTimeout(o);
+    const n = () => {
+      l("on-close"), o && clearTimeout(o);
       const t = () => {
-        r("update:model-value", !1);
+        l("update:model-value", !1);
       };
-      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() {
+      e.closeDelay <= 0 ? t() : r = setTimeout(t, e.closeDelay);
+    }, d = { props: e, emit: l, slots: s, modifiers: u, dialogStyle: m, rootAttrs: h, hasHeader: y, isVisible: a, get openTimeout() {
       return o;
     }, set openTimeout(t) {
       o = t;
     }, get closeTimeout() {
-      return l;
+      return r;
     }, set closeTimeout(t) {
-      l = t;
-    }, closeHandler: u, overlayClickHandler: () => {
-      e.closeOnOverlay && u();
+      r = t;
+    }, closeHandler: n, overlayClickHandler: () => {
+      e.closeOnOverlay && n();
     }, get NmorphOverlay() {
-      return N;
+      return C;
     }, get NmorphIcon() {
-      return q;
-    }, get NmorphIconCross() {
       return _;
+    }, get NmorphIconCross() {
+      return O;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 export {
-  b as default
+  V as default
 };

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

@@ -1,17 +1,17 @@
 import './NmorphDrawer.css';
-import c from "./NmorphDrawer.vue2.js";
-import { openBlock as e, createBlock as p, withCtx as n, createElementVNode as l, normalizeStyle as m, normalizeClass as i, createElementBlock as a, renderSlot as t, toDisplayString as _, createVNode as d, createCommentVNode as s } from "vue";
+import d from "./NmorphDrawer.vue2.js";
+import { openBlock as e, createBlock as c, withCtx as n, createElementVNode as l, mergeProps as p, createElementBlock as a, renderSlot as t, toDisplayString as m, createVNode as i, createCommentVNode as s, normalizeClass as _ } from "vue";
 /* empty css                  */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
 const f = ["aria-label"], w = {
   key: 0,
   class: "nmorph-drawer__header"
-}, b = { class: "nmorph-drawer__title" }, y = ["aria-label"], k = {
+}, b = { class: "nmorph-drawer__title" }, k = ["aria-label"], v = {
   key: 1,
   class: "nmorph-drawer__footer"
 };
-function v(r, C, N, o, z, O) {
-  return e(), p(o.NmorphOverlay, {
+function C(r, y, N, o, O, x) {
+  return e(), c(o.NmorphOverlay, {
     show: o.isVisible,
     "z-index": o.props.zIndex,
     "teleport-to": o.props.teleportTo,
@@ -22,19 +22,17 @@ function v(r, C, N, o, z, O) {
     onOnEscapeKeydown: o.closeHandler
   }, {
     default: n(() => [
-      l("aside", {
-        class: i(o.modifiers),
-        style: m(o.drawerStyle),
+      l("aside", p(o.rootAttrs, {
         role: "dialog",
         "aria-modal": "true",
         "aria-label": o.props.title || void 0
-      }, [
+      }), [
         o.hasHeader ? (e(), a("div", w, [
           t(r.$slots, "header", {}, () => [
             l(
               "div",
               b,
-              _(o.props.title),
+              m(o.props.title),
               1
               /* TEXT */
             ),
@@ -45,20 +43,20 @@ function v(r, C, N, o, z, O) {
               "aria-label": o.props.title ? `Close ${o.props.title}` : "Close drawer",
               onClick: o.closeHandler
             }, [
-              d(o.NmorphIcon, null, {
+              i(o.NmorphIcon, null, {
                 default: n(() => [
-                  d(o.NmorphIconCross)
+                  i(o.NmorphIconCross)
                 ]),
                 _: 1
                 /* STABLE */
               })
-            ], 8, y)) : s("v-if", !0)
+            ], 8, k)) : s("v-if", !0)
           ])
         ])) : s("v-if", !0),
         l(
           "div",
           {
-            class: i(["nmorph-drawer__content", o.props.contentClass])
+            class: _(["nmorph-drawer__content", o.props.contentClass])
           },
           [
             t(r.$slots, "default")
@@ -66,16 +64,16 @@ function v(r, C, N, o, z, O) {
           2
           /* CLASS */
         ),
-        o.slots.footer ? (e(), a("div", k, [
+        o.slots.footer ? (e(), a("div", v, [
           t(r.$slots, "footer")
         ])) : s("v-if", !0)
-      ], 14, f)
+      ], 16, f)
     ]),
     _: 3
     /* FORWARDED */
   }, 8, ["show", "z-index", "teleport-to", "disabled-teleport", "close-on-escape"]);
 }
-const V = /* @__PURE__ */ h(c, [["render", v], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/feedback/nmorph-drawer/NmorphDrawer.vue"]]);
+const g = /* @__PURE__ */ h(d, [["render", C], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/feedback/nmorph-drawer/NmorphDrawer.vue"]]);
 export {
-  V as default
+  g as default
 };

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

@@ -1,11 +1,13 @@
 import './NmorphDrawer.css';
-import { defineComponent as C, useSlots as N, ref as y, computed as i, watch as S, onBeforeUnmount as b, nextTick as B } from "vue";
-import { useModifiers as A } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as F } from "../../../utils/common.js";
-import V from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import z from "../../../assets/icons/cross.svg.js";
-const v = 220, M = /* @__PURE__ */ C({
+import { defineComponent as C, useSlots as N, ref as h, computed as i, watch as S, onBeforeUnmount as b, nextTick as B } from "vue";
+import { useModifiers as F } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as V } from "../../../utils/common.js";
+import { useMergedAttrs as x } from "../../../utils/attrs.js";
+import z from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import I from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import D from "../../../assets/icons/cross.svg.js";
+const w = 220, G = /* @__PURE__ */ C({
+  inheritAttrs: !1,
   __name: "NmorphDrawer",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -21,27 +23,27 @@ const v = 220, M = /* @__PURE__ */ C({
     contentClass: { type: String, required: !1, default: "" }
   },
   emits: ["on-close", "update:model-value"],
-  setup(h, { expose: w, emit: q }) {
-    w();
-    const e = h, u = q, m = N(), n = y(e.modelValue), o = y(e.modelValue);
+  setup(q, { expose: g, emit: O }) {
+    g();
+    const e = q, u = O, m = N(), n = h(e.modelValue), o = h(e.modelValue);
     let r = null, t = null;
-    const g = i(
-      () => A({
+    const d = i(
+      () => F({
         "nmorph-drawer": [e.placement, o.value && "open"]
       })
-    ), O = i(
-      () => F({
+    ), p = i(
+      () => V({
         "--nmorph-private-drawer-size": e.size
       })
-    ), d = () => {
+    ), T = x(d, p), f = () => {
       u("on-close"), u("update:model-value", !1);
-    }, T = () => {
-      e.closeOnOverlay && d();
-    }, _ = i(() => !!(m.header || e.title || e.showClose)), a = () => {
+    }, _ = () => {
+      e.closeOnOverlay && f();
+    }, A = i(() => !!(m.header || e.title || e.showClose)), a = () => {
       r === null || typeof window > "u" || (cancelAnimationFrame(r), r = null);
     }, s = () => {
       t !== null && (clearTimeout(t), t = null);
-    }, p = async () => {
+    }, c = async () => {
       if (s(), n.value = !0, typeof window > "u") {
         o.value = !0;
         return;
@@ -49,25 +51,25 @@ const v = 220, M = /* @__PURE__ */ C({
       await B(), a(), r = requestAnimationFrame(() => {
         o.value = !0, r = null;
       });
-    }, f = () => {
+    }, y = () => {
       a(), o.value = !1, n.value && (s(), t = setTimeout(() => {
         n.value = !1, t = null;
-      }, v));
+      }, w));
     };
     S(
       () => e.modelValue,
       (l) => {
         if (l) {
-          p();
+          c();
           return;
         }
-        f();
+        y();
       },
       { immediate: !0 }
     ), b(() => {
       a(), s();
     });
-    const c = { props: e, emit: u, slots: m, drawerTransitionDuration: v, isVisible: n, isOpen: o, get openAnimationFrame() {
+    const v = { props: e, emit: u, slots: m, drawerTransitionDuration: w, isVisible: n, isOpen: o, get openAnimationFrame() {
       return r;
     }, set openAnimationFrame(l) {
       r = l;
@@ -75,16 +77,16 @@ const v = 220, M = /* @__PURE__ */ C({
       return t;
     }, set closeTimeout(l) {
       t = l;
-    }, modifiers: g, drawerStyle: O, closeHandler: d, overlayClickHandler: T, hasHeader: _, clearOpenAnimationFrame: a, clearCloseTimeout: s, openDrawer: p, closeDrawer: f, get NmorphIcon() {
-      return x;
+    }, modifiers: d, drawerStyle: p, rootAttrs: T, closeHandler: f, overlayClickHandler: _, hasHeader: A, clearOpenAnimationFrame: a, clearCloseTimeout: s, openDrawer: c, closeDrawer: y, get NmorphIcon() {
+      return I;
     }, get NmorphIconCross() {
-      return z;
+      return D;
     }, get NmorphOverlay() {
-      return V;
+      return z;
     } };
-    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  M as default
+  G as default
 };

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

@@ -29,9 +29,9 @@ const L = /* @__PURE__ */ A({
   setup(F, { expose: P, emit: j }) {
     const O = {
       accent: "var(--nmorph-accent-color)",
-      success: "var(--nmorph-success-color)",
-      error: "var(--nmorph-error-color)",
-      warning: "var(--nmorph-warn-color)"
+      success: "var(--nmorph-success-text-color)",
+      error: "var(--nmorph-error-text-color)",
+      warning: "var(--nmorph-warn-text-color)"
     }, t = F, i = j, u = N({}), m = N(void 0);
     let f = 0;
     const d = (e) => String(e), b = r(() => {

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

@@ -1 +1 @@
-.nmorph-guide-step .nmorph-tooltip__trigger{position:relative;border-radius:var(--nmorph-private-guide-target-outline-radius, var(--border-radius-120))}.nmorph-guide-step .nmorph-tooltip__trigger:after{position:absolute;z-index:1;border:2px solid var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-color));border-radius:inherit;box-shadow:0 0 0 1px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-color)) 18%,transparent),0 0 8px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-color)) 28%,transparent),inset 0 0 4px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-color)) 18%,transparent);transform:scale(.98);opacity:0;transition:opacity var(--transition-02) ease,transform var(--transition-02) ease;pointer-events:none;inset:calc(-1 * var(--nmorph-private-guide-target-outline-offset, var(--indentation-02)));content:""}.nmorph-guide-step.nmorph-guide-step--active .nmorph-tooltip__trigger:after{transform:scale(1);opacity:1}.nmorph-guide-step__card{display:grid;gap:var(--indentation-03);box-sizing:border-box;min-width:min(240px,100vw - 48px);padding:var(--indentation-02);border-radius:var(--default-border-radius)}.nmorph-guide-step__tooltip--bordered{box-sizing:border-box;border:var(--nmorph-plain-border)}.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}
+.nmorph-guide-step .nmorph-tooltip__trigger{position:relative;border-radius:var(--nmorph-private-guide-target-outline-radius, var(--border-radius-120))}.nmorph-guide-step .nmorph-tooltip__trigger:after{position:absolute;z-index:1;border:2px solid var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-text-color));border-radius:inherit;box-shadow:0 0 0 1px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-text-color)) 18%,transparent),0 0 8px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-text-color)) 28%,transparent),inset 0 0 4px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-text-color)) 18%,transparent);transform:scale(.98);opacity:0;transition:opacity var(--transition-02) ease,transform var(--transition-02) ease;pointer-events:none;inset:calc(-1 * var(--nmorph-private-guide-target-outline-offset, var(--indentation-02)));content:""}.nmorph-guide-step.nmorph-guide-step--active .nmorph-tooltip__trigger:after{transform:scale(1);opacity:1}.nmorph-guide-step__card{display:grid;gap:var(--indentation-03);box-sizing:border-box;min-width:min(240px,100vw - 48px);padding:var(--indentation-02);border-radius:var(--default-border-radius)}.nmorph-guide-step__tooltip--bordered{box-sizing:border-box;border:var(--nmorph-plain-border)}.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,27 +1,25 @@
 import './NmorphGuideStep.css';
-import p from "./NmorphGuideStep.vue2.js";
-import { openBlock as t, createBlock as s, normalizeStyle as m, normalizeClass as h, withCtx as a, renderSlot as c, normalizeProps as _, mergeProps as u, createElementBlock as i, createCommentVNode as o, createElementVNode as d, toDisplayString as l, createVNode as g } from "vue";
+import m from "./NmorphGuideStep.vue2.js";
+import { openBlock as o, createBlock as a, mergeProps as s, withCtx as c, renderSlot as g, normalizeProps as h, createElementBlock as i, createCommentVNode as t, createElementVNode as d, toDisplayString as l, createVNode as p } from "vue";
 /* empty css                     */
-import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const x = {
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+const u = {
   key: 1,
   class: "nmorph-guide-step__card",
   role: "dialog",
   "aria-live": "polite"
-}, S = ["src", "alt"], f = { class: "nmorph-guide-step__body" }, k = {
+}, v = ["src", "alt"], x = { class: "nmorph-guide-step__body" }, S = {
   key: 0,
   class: "nmorph-guide-step__progress"
-}, b = {
+}, f = {
   key: 1,
   class: "nmorph-guide-step__title"
-}, y = {
+}, k = {
   key: 2,
   class: "nmorph-guide-step__text"
-}, w = { class: "nmorph-guide-step__actions" };
-function C(n, r, N, e, P, T) {
-  return t(), s(e.NmorphTooltip, {
-    class: h(["nmorph-guide-step", e.isActive && "nmorph-guide-step--active"]),
-    style: m(e.styles),
+}, b = { class: "nmorph-guide-step__actions" };
+function w(n, r, y, e, C, N) {
+  return o(), a(e.NmorphTooltip, s(e.rootAttrs, {
     "force-show": e.isActive,
     position: e.tooltipPosition,
     "z-index": e.guide?.zIndex.value,
@@ -33,46 +31,46 @@ function C(n, r, N, e, P, T) {
     "hide-triangle": e.guide?.bordered.value,
     trigger: "manual",
     disabled: !e.guide || e.props.disabled
-  }, {
-    content: a(() => [
-      e.hasCustomContent && e.stepSlotProps ? c(n.$slots, "content", _(u({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (t(), i("div", x, [
-        e.currentStep.imageSrc ? (t(), i("img", {
+  }), {
+    content: c(() => [
+      e.hasCustomContent && e.stepSlotProps ? g(n.$slots, "content", h(s({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (o(), i("div", u, [
+        e.currentStep.imageSrc ? (o(), i("img", {
           key: 0,
           class: "nmorph-guide-step__image",
           src: e.currentStep.imageSrc,
           alt: e.currentStep.imageAlt || e.currentStep.title || ""
-        }, null, 8, S)) : o("v-if", !0),
-        d("div", f, [
-          e.guide?.showProgress.value ? (t(), i(
+        }, null, 8, v)) : t("v-if", !0),
+        d("div", x, [
+          e.guide?.showProgress.value ? (o(), i(
             "div",
-            k,
+            S,
             l(e.stepSlotProps.index + 1) + " / " + l(e.stepSlotProps.total),
             1
             /* TEXT */
-          )) : o("v-if", !0),
-          e.currentStep.title ? (t(), i(
+          )) : t("v-if", !0),
+          e.currentStep.title ? (o(), i(
             "h3",
-            b,
+            f,
             l(e.currentStep.title),
             1
             /* TEXT */
-          )) : o("v-if", !0),
-          e.currentStep.text ? (t(), i(
+          )) : t("v-if", !0),
+          e.currentStep.text ? (o(), i(
             "p",
-            y,
+            k,
             l(e.currentStep.text),
             1
             /* TEXT */
-          )) : o("v-if", !0)
+          )) : t("v-if", !0)
         ]),
-        d("div", w, [
-          e.guide?.showClose.value ? (t(), s(e.NmorphButton, {
+        d("div", b, [
+          e.guide?.showClose.value ? (o(), a(e.NmorphButton, {
             key: 0,
             class: "nmorph-guide-step__close",
             text: e.guide.closeText.value,
             design: "plain",
             onClick: e.guide.close
-          }, null, 8, ["text", "onClick"])) : o("v-if", !0),
+          }, null, 8, ["text", "onClick"])) : t("v-if", !0),
           r[1] || (r[1] = d(
             "span",
             { class: "nmorph-guide-step__spacer" },
@@ -80,30 +78,30 @@ function C(n, r, N, e, P, T) {
             -1
             /* CACHED */
           )),
-          g(e.NmorphButton, {
+          p(e.NmorphButton, {
             class: "nmorph-guide-step__back",
             text: e.guide?.backText.value,
             design: "plain",
             disabled: e.isFirstStep && !e.guide?.loop.value,
             onClick: e.guide?.back
           }, null, 8, ["text", "disabled", "onClick"]),
-          g(e.NmorphButton, {
+          p(e.NmorphButton, {
             class: "nmorph-guide-step__next",
             text: e.isLastStep && !e.guide?.loop.value ? e.guide?.finishText.value : e.guide?.nextText.value,
             design: "plain",
-            onClick: r[0] || (r[0] = (z) => e.isLastStep && !e.guide?.loop.value ? e.guide?.finish() : e.guide?.next())
+            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)
+      ])) : t("v-if", !0)
     ]),
-    default: a(() => [
-      c(n.$slots, "default")
+    default: c(() => [
+      g(n.$slots, "default")
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["class", "style", "force-show", "position", "z-index", "teleport-to", "disabled-teleport", "width", "max-width", "content-class", "hide-triangle", "disabled"]);
+  }, 16, ["force-show", "position", "z-index", "teleport-to", "disabled-teleport", "width", "max-width", "content-class", "hide-triangle", "disabled"]);
 }
-const G = /* @__PURE__ */ v(p, [["render", C], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
+const V = /* @__PURE__ */ _(m, [["render", w], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
 export {
-  G as default
+  V as default
 };

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

@@ -1,10 +1,12 @@
 import './NmorphGuideStep.css';
-import { defineComponent as b, inject as h, useSlots as y, computed as o, watch as x, onBeforeUnmount as _ } from "vue";
-import { createCssSizeVariables as q, createCssVariables as C } from "../../../utils/common.js";
-import B from "../../basic/nmorph-button/NmorphButton.vue.js";
-import N from "../nmorph-tooltip/NmorphTooltip.vue.js";
-import { nmorphGuideInjectionKey as A } from "./types.js";
-const F = /* @__PURE__ */ b({
+import { defineComponent as b, inject as y, useSlots as x, computed as r, watch as _, onBeforeUnmount as q } from "vue";
+import { createCssSizeVariables as A, createCssVariables as C } from "../../../utils/common.js";
+import { useMergedAttrs as B } from "../../../utils/attrs.js";
+import N from "../../basic/nmorph-button/NmorphButton.vue.js";
+import O from "../nmorph-tooltip/NmorphTooltip.vue.js";
+import { nmorphGuideInjectionKey as j } from "./types.js";
+const V = /* @__PURE__ */ b({
+  inheritAttrs: !1,
   __name: "NmorphGuideStep",
   props: {
     name: { type: [String, Number], required: !0 },
@@ -16,27 +18,30 @@ const F = /* @__PURE__ */ b({
     order: { type: Number, required: !1, default: void 0 },
     disabled: { type: Boolean, required: !1, default: !1 }
   },
-  setup(p, { expose: m }) {
-    m();
-    const t = p, e = h(A, null), n = y(), r = o(() => e?.activeStep.value ?? null), i = o(() => e?.activeIndex.value ?? -1), a = o(() => e?.steps.value.length ?? 0), s = o(() => i.value <= 0), l = o(() => i.value >= a.value - 1), c = o(() => !!(e?.active.value && r.value?.name === t.name)), d = o(() => r.value?.position ?? t.position), f = o(() => !!n.content), v = o(() => ({
+  setup(d, { expose: c }) {
+    c();
+    const t = d, e = y(j, null), a = x(), o = r(() => e?.activeStep.value ?? null), i = r(() => e?.activeIndex.value ?? -1), s = r(() => e?.steps.value.length ?? 0), n = r(() => i.value <= 0), l = r(() => i.value >= s.value - 1), u = r(() => !!(e?.active.value && o.value?.name === t.name)), f = r(() => o.value?.position ?? t.position), v = r(() => !!a.content), p = r(() => ({
       ...C({
         "--nmorph-private-guide-target-outline-color": e?.targetOutlineColor.value
       }),
-      ...q({
+      ...A({
         "--nmorph-private-guide-target-outline-offset": e?.targetOutlineOffset.value
       })
-    })), g = o(() => !e || !r.value ? null : {
-      step: r.value,
+    })), g = B(
+      r(() => ["nmorph-guide-step", u.value && "nmorph-guide-step--active"]),
+      p
+    ), S = r(() => !e || !o.value ? null : {
+      step: o.value,
       index: i.value,
-      total: a.value,
-      isFirst: s.value,
+      total: s.value,
+      isFirst: n.value,
       isLast: l.value,
       back: e.back,
       next: e.next,
       close: e.close,
       finish: e.finish
     });
-    x(
+    _(
       () => ({
         name: t.name,
         title: t.title,
@@ -47,17 +52,17 @@ const F = /* @__PURE__ */ b({
         order: t.order,
         disabled: t.disabled
       }),
-      (S) => {
-        e?.registerStep(S);
+      (h) => {
+        e?.registerStep(h);
       },
       { immediate: !0 }
-    ), _(() => {
+    ), q(() => {
       e?.unregisterStep(t.name);
     });
-    const u = { props: t, guide: e, slots: n, currentStep: r, currentIndex: i, totalSteps: a, isFirstStep: s, isLastStep: l, isActive: c, tooltipPosition: d, hasCustomContent: f, styles: v, stepSlotProps: g, NmorphButton: B, NmorphTooltip: N };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    const m = { props: t, guide: e, slots: a, currentStep: o, currentIndex: i, totalSteps: s, isFirstStep: n, isLastStep: l, isActive: u, tooltipPosition: f, hasCustomContent: v, styles: p, rootAttrs: g, stepSlotProps: S, NmorphButton: N, NmorphTooltip: O };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }
 });
 export {
-  F as default
+  V as default
 };