@nmorph/nmorph-ui-kit 3.0.10 → 3.0.13

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

@@ -1,9 +1,9 @@
 import './NmorphCallout.css';
 import n from "./NmorphCallout.vue2.js";
-import { openBlock as t, createBlock as s, resolveDynamicComponent as a, mergeProps as c, withCtx as i, createElementBlock as r, renderSlot as l, createTextVNode as p, toDisplayString as m, createCommentVNode as _ } from "vue";
+import { openBlock as t, createBlock as s, resolveDynamicComponent as a, mergeProps as c, withCtx as m, createElementBlock as r, renderSlot as l, createTextVNode as p, toDisplayString as i, createCommentVNode as _ } from "vue";
 /* empty css                   */
-import d from "../../../_virtual/_plugin-vue_export-helper.js";
-const h = {
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const d = {
   key: 0,
   class: "nmorph-callout__title"
 }, f = {
@@ -15,12 +15,12 @@ function y(e, k, v, o, C, N) {
     class: ["nmorph-callout", `nmorph-callout--${o.props.type}`],
     style: o.styles
   }, o.rootAttrs), {
-    default: i(() => [
-      o.hasHeader ? (t(), r("div", h, [
+    default: m(() => [
+      o.hasHeader ? (t(), r("div", d, [
         l(e.$slots, "header", {}, () => [
           l(e.$slots, "title", {}, () => [
             p(
-              m(o.props.title),
+              i(o.props.title),
               1
               /* TEXT */
             )
@@ -39,7 +39,7 @@ function y(e, k, v, o, C, N) {
     /* FORWARDED */
   }, 16, ["class", "style"]);
 }
-const T = /* @__PURE__ */ d(n, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-callout/NmorphCallout.vue"]]);
+const b = /* @__PURE__ */ h(n, [["render", y], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/feedback/nmorph-callout/NmorphCallout.vue"]]);
 export {
-  T as default
+  b as default
 };

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

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

@@ -1,6 +1,6 @@
 import './NmorphDrawer.css';
 import c from "./NmorphDrawer.vue2.js";
-import { openBlock as e, createBlock as p, withCtx as i, createElementVNode as l, normalizeStyle as m, normalizeClass as n, createElementBlock as a, renderSlot as t, toDisplayString as _, createVNode as d, createCommentVNode as s } from "vue";
+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";
 /* empty css                  */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
 const f = ["aria-label"], w = {
@@ -21,9 +21,9 @@ function v(r, C, N, o, z, O) {
     onOnOutsideClick: o.overlayClickHandler,
     onOnEscapeKeydown: o.closeHandler
   }, {
-    default: i(() => [
+    default: n(() => [
       l("aside", {
-        class: n(o.modifiers),
+        class: i(o.modifiers),
         style: m(o.drawerStyle),
         role: "dialog",
         "aria-modal": "true",
@@ -46,7 +46,7 @@ function v(r, C, N, o, z, O) {
               onClick: o.closeHandler
             }, [
               d(o.NmorphIcon, null, {
-                default: i(() => [
+                default: n(() => [
                   d(o.NmorphIconCross)
                 ]),
                 _: 1
@@ -58,7 +58,7 @@ function v(r, C, N, o, z, O) {
         l(
           "div",
           {
-            class: n(["nmorph-drawer__content", o.props.contentClass])
+            class: i(["nmorph-drawer__content", o.props.contentClass])
           },
           [
             t(r.$slots, "default")
@@ -75,7 +75,7 @@ function v(r, C, N, o, z, O) {
     /* FORWARDED */
   }, 8, ["show", "z-index", "teleport-to", "disabled-teleport", "close-on-escape"]);
 }
-const V = /* @__PURE__ */ h(c, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-drawer/NmorphDrawer.vue"]]);
+const V = /* @__PURE__ */ h(c, [["render", v], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/feedback/nmorph-drawer/NmorphDrawer.vue"]]);
 export {
   V as default
 };

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

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

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__card--bordered{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,20 +1,27 @@
 import './NmorphGuideStep.css';
-import g from "./NmorphGuideStep.vue2.js";
-import { openBlock as t, createBlock as s, withCtx as a, renderSlot as c, normalizeProps as m, mergeProps as h, createElementBlock as o, normalizeClass as _, createCommentVNode as i, createElementVNode as d, toDisplayString as l, createVNode as p } from "vue";
+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";
 /* empty css                     */
-import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = ["src", "alt"], x = { class: "nmorph-guide-step__body" }, k = {
+import v from "../../../_virtual/_plugin-vue_export-helper.js";
+const x = {
+  key: 1,
+  class: "nmorph-guide-step__card",
+  role: "dialog",
+  "aria-live": "polite"
+}, 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 C(n, r, w, e, y, 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,
@@ -22,93 +29,81 @@ function C(n, r, w, e, y, N) {
     "disabled-teleport": e.guide?.disabledTeleport.value,
     width: e.guide?.width.value,
     "max-width": e.guide?.maxWidth.value,
+    "content-class": e.guide?.bordered.value ? "nmorph-guide-step__tooltip--bordered" : void 0,
+    "hide-triangle": e.guide?.bordered.value,
     trigger: "manual",
     disabled: !e.guide || e.props.disabled
   }, {
     content: a(() => [
-      e.hasCustomContent && e.stepSlotProps ? c(n.$slots, "content", m(h({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (t(), o(
-        "div",
-        {
-          key: 1,
-          class: _(["nmorph-guide-step__card", e.guide?.bordered.value && "nmorph-guide-step__card--bordered"]),
-          role: "dialog",
-          "aria-live": "polite"
-        },
-        [
-          e.currentStep.imageSrc ? (t(), o("img", {
+      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, S)) : o("v-if", !0),
+        d("div", f, [
+          e.guide?.showProgress.value ? (t(), i(
+            "div",
+            k,
+            l(e.stepSlotProps.index + 1) + " / " + l(e.stepSlotProps.total),
+            1
+            /* TEXT */
+          )) : o("v-if", !0),
+          e.currentStep.title ? (t(), i(
+            "h3",
+            b,
+            l(e.currentStep.title),
+            1
+            /* TEXT */
+          )) : o("v-if", !0),
+          e.currentStep.text ? (t(), i(
+            "p",
+            y,
+            l(e.currentStep.text),
+            1
+            /* TEXT */
+          )) : o("v-if", !0)
+        ]),
+        d("div", w, [
+          e.guide?.showClose.value ? (t(), s(e.NmorphButton, {
             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),
-          d("div", x, [
-            e.guide?.showProgress.value ? (t(), o(
-              "div",
-              k,
-              l(e.stepSlotProps.index + 1) + " / " + l(e.stepSlotProps.total),
-              1
-              /* TEXT */
-            )) : i("v-if", !0),
-            e.currentStep.title ? (t(), o(
-              "h3",
-              S,
-              l(e.currentStep.title),
-              1
-              /* TEXT */
-            )) : i("v-if", !0),
-            e.currentStep.text ? (t(), o(
-              "p",
-              f,
-              l(e.currentStep.text),
-              1
-              /* TEXT */
-            )) : i("v-if", !0)
-          ]),
-          d("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] = d(
-              "span",
-              { class: "nmorph-guide-step__spacer" },
-              null,
-              -1
-              /* CACHED */
-            )),
-            p(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"]),
-            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",
-              thickness: "thin",
-              onClick: r[0] || (r[0] = (P) => e.isLastStep && !e.guide?.loop.value ? e.guide?.finish() : e.guide?.next())
-            }, null, 8, ["text"])
-          ])
-        ],
-        2
-        /* CLASS */
-      )) : i("v-if", !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),
+          r[1] || (r[1] = d(
+            "span",
+            { class: "nmorph-guide-step__spacer" },
+            null,
+            -1
+            /* CACHED */
+          )),
+          g(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, {
+            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())
+          }, null, 8, ["text"])
+        ])
+      ])) : o("v-if", !0)
     ]),
     default: a(() => [
       c(n.$slots, "default")
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["force-show", "position", "z-index", "teleport-to", "disabled-teleport", "width", "max-width", "disabled"]);
+  }, 8, ["class", "style", "force-show", "position", "z-index", "teleport-to", "disabled-teleport", "width", "max-width", "content-class", "hide-triangle", "disabled"]);
 }
-const A = /* @__PURE__ */ u(g, [["render", C], ["__file", "/builds/ketjo/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
 };