@nmorph/nmorph-ui-kit 3.0.11 → 3.0.13

package/dist/assets/icons/cross.svg.js

@@ -1,7 +1,7 @@
 import { openBlock as o, createElementBlock as t, createElementVNode as r } from "vue";
 const n = {
   xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 19 19"
+  viewBox: "0.5 0.5 19 19"
 };
 function l(s, e) {
   return o(), t("svg", n, [...e[0] || (e[0] = [

package/dist/components/basic/nmorph-button/NmorphButton.vue.js

@@ -1,21 +1,21 @@
 import './NmorphButton.css';
-import s from "./NmorphButton.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeStyle as d, normalizeClass as c, createElementVNode as m, createBlock as l, withCtx as a, createVNode as p, renderSlot as t, Fragment as h, createCommentVNode as i, toDisplayString as _ } from "vue";
+import d from "./NmorphButton.vue2.js";
+import { openBlock as e, createElementBlock as r, normalizeStyle as s, normalizeClass as c, createElementVNode as m, createBlock as l, withCtx as a, createVNode as p, renderSlot as t, Fragment as h, createCommentVNode as i, toDisplayString as _ } from "vue";
 /* empty css                  */
 import f from "../../../_virtual/_plugin-vue_export-helper.js";
 const y = ["disabled", "loading", "type", "tabindex", "aria-pressed"], b = {
   key: 1,
   class: "nmorph-button__label"
-}, k = {
+}, g = {
   key: 3,
   class: "nmorph-button__label"
 };
-function g(n, N, S, o, v, B) {
+function k(n, N, S, o, I, v) {
   return e(), r(
     "div",
     {
       class: c(o.modifiers),
-      style: d(o.buttonColorStyles)
+      style: s(o.buttonColorStyles)
     },
     [
       m("button", {
@@ -30,14 +30,15 @@ function g(n, N, S, o, v, B) {
       }, [
         o.props.loading ? (e(), l(o.NmorphIcon, {
           key: 0,
-          size: o.loadingButtonSize
+          width: o.loadingIconSize,
+          height: o.loadingIconSize
         }, {
           default: a(() => [
             p(o.NmorphIconLoader)
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["size"])) : o.hasIconOnlySlot ? (e(), l(o.NmorphIcon, { key: 1 }, {
+        }, 8, ["width", "height"])) : o.hasIconOnlySlot ? (e(), l(o.NmorphIcon, { key: 1 }, {
           default: a(() => [
             t(n.$slots, "icon-only")
           ]),
@@ -59,7 +60,7 @@ function g(n, N, S, o, v, B) {
             ])) : t(n.$slots, "default", { key: 2 }),
             o.props.text !== void 0 ? (e(), r(
               "span",
-              k,
+              g,
               _(o.props.text),
               1
               /* TEXT */
@@ -75,7 +76,7 @@ function g(n, N, S, o, v, B) {
     /* CLASS, STYLE */
   );
 }
-const u = /* @__PURE__ */ f(s, [["render", g], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/basic/nmorph-button/NmorphButton.vue"]]);
+const z = /* @__PURE__ */ f(d, [["render", k], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/basic/nmorph-button/NmorphButton.vue"]]);
 export {
-  u as default
+  z as default
 };

package/dist/components/basic/nmorph-button/NmorphButton.vue2.js

@@ -1,5 +1,5 @@
 import './NmorphButton.css';
-import { defineComponent as N, useSlots as _, computed as l, ref as x, Fragment as k, Comment as I, Text as c } from "vue";
+import { defineComponent as N, useSlots as x, computed as l, ref as _, Fragment as I, Comment as k, Text as c } from "vue";
 import { useModifiers as O } from "../../../utils/create-modifiers.js";
 import { NmorphComponentThickness as C } from "../../../types/common.types.js";
 import M from "../../../assets/icons/loading.svg.js";
@@ -30,9 +30,9 @@ const E = /* @__PURE__ */ N({
   },
   emits: ["update:model-value"],
   setup(m, { expose: y, emit: h }) {
-    const e = m, n = h, r = _(), g = l(() => !!r.icon), i = l(() => !!r["icon-only"]), s = l(() => e.active || !!e.modelValue), a = (t) => t.flatMap(
-      (o) => o.type === k && Array.isArray(o.children) ? a(o.children) : o
-    ), u = (t) => t.type === I || t.type === c && typeof t.children == "string" && t.children.trim() === "", b = () => {
+    const e = m, n = h, r = x(), g = l(() => !!r.icon), i = l(() => !!r["icon-only"]), s = l(() => e.active || !!e.modelValue), a = (t) => t.flatMap(
+      (o) => o.type === I && Array.isArray(o.children) ? a(o.children) : o
+    ), u = (t) => t.type === k || t.type === c && typeof t.children == "string" && t.children.trim() === "", b = () => {
       const t = a(r.default?.() ?? []).filter((o) => !u(o));
       return t.length > 0 && t.every((o) => o.type === c);
     }, v = l(
@@ -51,10 +51,10 @@ const E = /* @__PURE__ */ N({
           e.danger && "danger"
         ]
       })
-    ), d = x(null), p = {
-      thin: "small",
-      basic: "medium",
-      thick: "large"
+    ), d = _(null), p = {
+      thin: "12px",
+      basic: "16px",
+      thick: "24px"
     }, q = l(() => p[e.thickness]), B = l(() => e.color ? {
       "--nmorph-private-button-color": e.color,
       "--nmorph-private-button-plain-color": e.color,
@@ -63,7 +63,7 @@ const E = /* @__PURE__ */ N({
       !e.toggle || e.disabled || e.loading || n("update:model-value", !e.modelValue);
     };
     y({ buttonDOMElement: d });
-    const f = { props: e, emit: n, slots: r, hasIconSlot: g, hasIconOnlySlot: i, active: s, flattenSlotNodes: a, isEmptySlotNode: u, hasTextOnlyDefaultSlot: b, modifiers: v, buttonDOMElement: d, iconSizeMap: p, loadingButtonSize: q, buttonColorStyles: B, toggleClickHandler: S, get NmorphIcon() {
+    const f = { props: e, emit: n, slots: r, hasIconSlot: g, hasIconOnlySlot: i, active: s, flattenSlotNodes: a, isEmptySlotNode: u, hasTextOnlyDefaultSlot: b, modifiers: v, buttonDOMElement: d, loadingIconSizeMap: p, loadingIconSize: q, buttonColorStyles: B, toggleClickHandler: S, get NmorphIcon() {
       return H;
     }, get NmorphIconLoader() {
       return M;

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

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

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

@@ -1 +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-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}

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

@@ -1,25 +1,27 @@
 import './NmorphGuideStep.css';
 import p from "./NmorphGuideStep.vue2.js";
-import { openBlock as t, createBlock as s, withCtx as a, renderSlot as c, normalizeProps as h, mergeProps as m, createElementBlock as i, createCommentVNode as o, createElementVNode as n, toDisplayString as l, createVNode as g } from "vue";
+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";
 /* empty css                     */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-const u = {
+import v from "../../../_virtual/_plugin-vue_export-helper.js";
+const x = {
   key: 1,
   class: "nmorph-guide-step__card",
   role: "dialog",
   "aria-live": "polite"
-}, v = ["src", "alt"], x = { class: "nmorph-guide-step__body" }, k = {
+}, S = ["src", "alt"], f = { class: "nmorph-guide-step__body" }, k = {
   key: 0,
   class: "nmorph-guide-step__progress"
-}, S = {
+}, b = {
   key: 1,
   class: "nmorph-guide-step__title"
-}, f = {
+}, y = {
   key: 2,
   class: "nmorph-guide-step__text"
-}, b = { class: "nmorph-guide-step__actions" };
-function w(d, r, y, e, C, N) {
+}, 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),
     "force-show": e.isActive,
     position: e.tooltipPosition,
     "z-index": e.guide?.zIndex.value,
@@ -33,14 +35,14 @@ function w(d, r, y, e, C, N) {
     disabled: !e.guide || e.props.disabled
   }, {
     content: a(() => [
-      e.hasCustomContent && e.stepSlotProps ? c(d.$slots, "content", h(m({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (t(), i("div", u, [
+      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", {
           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, [
+        }, null, 8, S)) : o("v-if", !0),
+        d("div", f, [
           e.guide?.showProgress.value ? (t(), i(
             "div",
             k,
@@ -50,29 +52,28 @@ function w(d, r, y, e, C, N) {
           )) : o("v-if", !0),
           e.currentStep.title ? (t(), i(
             "h3",
-            S,
+            b,
             l(e.currentStep.title),
             1
             /* TEXT */
           )) : o("v-if", !0),
           e.currentStep.text ? (t(), i(
             "p",
-            f,
+            y,
             l(e.currentStep.text),
             1
             /* TEXT */
           )) : o("v-if", !0)
         ]),
-        n("div", b, [
+        d("div", w, [
           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"])) : o("v-if", !0),
-          r[1] || (r[1] = n(
+          r[1] || (r[1] = d(
             "span",
             { class: "nmorph-guide-step__spacer" },
             null,
@@ -83,7 +84,6 @@ function w(d, r, y, e, C, N) {
             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"]),
@@ -91,20 +91,19 @@ function w(d, r, y, e, C, N) {
             class: "nmorph-guide-step__next",
             text: e.isLastStep && !e.guide?.loop.value ? e.guide?.finishText.value : e.guide?.nextText.value,
             design: "plain",
-            thickness: "thin",
-            onClick: r[0] || (r[0] = (P) => e.isLastStep && !e.guide?.loop.value ? e.guide?.finish() : e.guide?.next())
+            onClick: r[0] || (r[0] = (z) => e.isLastStep && !e.guide?.loop.value ? e.guide?.finish() : e.guide?.next())
           }, null, 8, ["text"])
         ])
       ])) : o("v-if", !0)
     ]),
     default: a(() => [
-      c(d.$slots, "default")
+      c(n.$slots, "default")
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["force-show", "position", "z-index", "teleport-to", "disabled-teleport", "width", "max-width", "content-class", "hide-triangle", "disabled"]);
+  }, 8, ["class", "style", "force-show", "position", "z-index", "teleport-to", "disabled-teleport", "width", "max-width", "content-class", "hide-triangle", "disabled"]);
 }
-const A = /* @__PURE__ */ _(p, [["render", w], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
+const G = /* @__PURE__ */ v(p, [["render", C], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
 export {
-  A as default
+  G as default
 };

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

@@ -1,9 +1,10 @@
 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({
+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({
   __name: "NmorphGuideStep",
   props: {
     name: { type: [String, Number], required: !0 },
@@ -15,41 +16,48 @@ const I = /* @__PURE__ */ g({
     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,
+  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(() => ({
+      ...C({
+        "--nmorph-private-guide-target-outline-color": e?.targetOutlineColor.value
+      }),
+      ...q({
+        "--nmorph-private-guide-target-outline-offset": e?.targetOutlineOffset.value
+      })
+    })), g = o(() => !e || !r.value ? null : {
+      step: r.value,
+      index: i.value,
+      total: a.value,
       isFirst: s.value,
       isLast: l.value,
-      back: t.back,
-      next: t.next,
-      close: t.close,
-      finish: t.finish
+      back: e.back,
+      next: e.next,
+      close: e.close,
+      finish: e.finish
     });
-    y(
+    x(
       () => ({
-        name: e.name,
-        title: e.title,
-        text: e.text,
-        imageSrc: e.imageSrc,
-        imageAlt: e.imageAlt,
-        position: e.position,
-        order: e.order,
-        disabled: e.disabled
+        name: t.name,
+        title: t.title,
+        text: t.text,
+        imageSrc: t.imageSrc,
+        imageAlt: t.imageAlt,
+        position: t.position,
+        order: t.order,
+        disabled: t.disabled
       }),
       (S) => {
-        t?.registerStep(S);
+        e?.registerStep(S);
       },
       { immediate: !0 }
     ), _(() => {
-      t?.unregisterStep(e.name);
+      e?.unregisterStep(t.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 };
+    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;
   }
 });
 export {
-  I as default
+  F as default
 };

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-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}
+.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-focus-text-color);background:var(--nmorph-accent-color);--nmorph-private-icon-color: var(--nmorph-focus-text-color)}.nmorph-autocomplete__list-item:hover :where(*),.nmorph-autocomplete__list-item--focused :where(*){color:inherit}.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}

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.css

@@ -1 +1 @@
-.nmorph-error-box{display:flex;align-items:center;overflow:hidden}.nmorph-error-box .nmorph-error-box__error{margin:var(--indentation-00);margin-left:var(--default-indentation-input);color:var(--nmorph-error-text-color);text-align:left}.nmorph-error-box.nmorph-error-box--empty:not(.nmorph-error-box--static-height){display:none}
+.nmorph-error-box{display:flex;align-items:center;min-width:0;overflow:hidden}.nmorph-error-box.nmorph--basic-component,.nmorph-error-box.nmorph--thin-component,.nmorph-error-box.nmorph--thick-component{height:auto;min-height:var(--nmorph-private-control-height)}.nmorph-error-box .nmorph-error-box__error{flex:1 1 auto;min-width:0;margin:var(--indentation-02) var(--indentation-00);margin-left:var(--default-indentation-input);color:var(--nmorph-error-text-color);line-height:var(--nmorph-typography-body-line-height);text-align:left;overflow-wrap:anywhere}.nmorph-error-box.nmorph-error-box--empty:not(.nmorph-error-box--static-height){display:none}

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue.js

@@ -1,36 +1,30 @@
 import './NmorphErrorBox.css';
-import t from "./NmorphErrorBox.vue2.js";
-import { openBlock as r, createElementBlock as o, normalizeClass as m, createVNode as i, TransitionGroup as p, withCtx as s, Fragment as a, renderList as c, toDisplayString as l } from "vue";
+import n from "./NmorphErrorBox.vue2.js";
+import { openBlock as o, createElementBlock as e, normalizeClass as m, createVNode as t, Transition as i, withCtx as c, toDisplayString as p, createCommentVNode as a } from "vue";
 /* empty css                    */
-import f from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
-function _(h, d, u, e, x, k) {
-  return r(), o(
+import s from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
+function f(l, _, h, r, d, u) {
+  return o(), e(
     "div",
     {
-      class: m(e.modifiers)
+      class: m(r.modifiers)
     },
     [
-      i(p, {
+      t(i, {
         name: "list",
-        tag: "div"
+        mode: "out-in"
       }, {
-        default: s(() => [
-          (r(!0), o(
-            a,
-            null,
-            c(e.currentError, (n) => (r(), o(
-              "p",
-              {
-                key: n,
-                class: "nmorph-error-box__error"
-              },
-              l(n),
-              1
-              /* TEXT */
-            ))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
+        default: c(() => [
+          r.currentError ? (o(), e(
+            "p",
+            {
+              key: r.currentError,
+              class: "nmorph-error-box__error"
+            },
+            p(r.currentError),
+            1
+            /* TEXT */
+          )) : a("v-if", !0)
         ]),
         _: 1
         /* STABLE */
@@ -40,7 +34,7 @@ function _(h, d, u, e, x, k) {
     /* CLASS */
   );
 }
-const v = /* @__PURE__ */ f(t, [["render", _], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue"]]);
+const N = /* @__PURE__ */ s(n, [["render", f], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue"]]);
 export {
-  v as default
+  N as default
 };