@nmorph/nmorph-ui-kit 3.0.3 → 3.0.5

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue.js

@@ -1,30 +1,30 @@
 import './NmorphTimePicker.css';
-import b from "./NmorphTimePicker.vue2.js";
-import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as a, createElementVNode as r, withKeys as m, withModifiers as t, createVNode as d, withCtx as p, toDisplayString as c, createCommentVNode as _, createBlock as f, Fragment as s, renderList as h } from "vue";
+import v from "./NmorphTimePicker.vue2.js";
+import { openBlock as i, createElementBlock as a, normalizeStyle as b, normalizeClass as k, createElementVNode as o, withKeys as m, withModifiers as c, createVNode as n, withCtx as t, toDisplayString as x, createCommentVNode as p, createBlock as d, Fragment as s, renderList as h } from "vue";
 /* empty css                      */
-import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], x = { class: "nmorph-time-picker__selected-value" }, C = ["id"], H = {
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const u = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], g = ["id", "name", "autocomplete", "step", "value", "disabled"], w = { class: "nmorph-time-picker__selected-value" }, y = ["id"], C = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Hours"
-}, g = ["disabled", "onClick"], O = {
+}, N = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Minutes"
-}, N = ["disabled", "onClick"], M = {
+}, O = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Seconds"
-}, V = ["disabled", "onClick"];
-function I(S, l, z, e, B, D) {
-  return i(), n(
+};
+function H(S, r, B, e, V, I) {
+  return i(), a(
     "div",
     {
-      class: a(e.modifiers),
-      style: v(e.styles)
+      class: k(e.modifiers),
+      style: b(e.styles)
     },
     [
-      r("div", {
+      o("div", {
         ref: "inputDOMRef",
         class: "nmorph-time-picker__input",
         role: "combobox",
@@ -32,15 +32,15 @@ function I(S, l, z, e, B, D) {
         "aria-controls": `${e.id}-dropdown`,
         tabindex: e.props.disabled ? -1 : e.tabindex,
         onClick: e.toggleOpen,
-        onFocus: l[0] || (l[0] = (...o) => e.focusHandler && e.focusHandler(...o)),
-        onBlur: l[1] || (l[1] = (...o) => e.blurHandler && e.blurHandler(...o)),
+        onFocus: r[0] || (r[0] = (...l) => e.focusHandler && e.focusHandler(...l)),
+        onBlur: r[1] || (r[1] = (...l) => e.blurHandler && e.blurHandler(...l)),
         onKeydown: [
-          m(t(e.toggleOpen, ["prevent"]), ["space"]),
-          m(t(e.toggleOpen, ["prevent"]), ["enter"]),
-          m(t(e.closeHandler, ["prevent"]), ["escape"])
+          m(c(e.toggleOpen, ["prevent"]), ["space"]),
+          m(c(e.toggleOpen, ["prevent"]), ["enter"]),
+          m(c(e.closeHandler, ["prevent"]), ["escape"])
         ]
       }, [
-        r("input", {
+        o("input", {
           id: e.id,
           class: "nmorph-time-picker__native",
           name: e.name,
@@ -50,41 +50,41 @@ function I(S, l, z, e, B, D) {
           value: e.modelValue || "",
           disabled: e.props.disabled,
           onInput: e.nativeInputHandler
-        }, null, 40, w),
-        d(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
-          default: p(() => [
-            d(e.NmorphIconClock)
+        }, null, 40, g),
+        n(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
+          default: t(() => [
+            n(e.NmorphIconClock)
           ]),
           _: 1
           /* STABLE */
         }),
-        r(
+        o(
           "div",
-          x,
-          c(e.displayValue),
+          w,
+          x(e.displayValue),
           1
           /* TEXT */
         ),
-        e.showClearButton ? (i(), n("button", {
+        e.showClearButton ? (i(), a("button", {
           key: 0,
           class: "nmorph-time-picker__clear",
           type: "button",
           "aria-label": "Clear time",
-          onClick: t(e.clearHandler, ["stop"])
+          onClick: c(e.clearHandler, ["stop"])
         }, [
-          d(e.NmorphIcon, {
+          n(e.NmorphIcon, {
             width: "14px",
             height: "14px"
           }, {
-            default: p(() => [
-              d(e.NmorphIconCircleClose)
+            default: t(() => [
+              n(e.NmorphIconCircleClose)
             ]),
             _: 1
             /* STABLE */
           })
-        ])) : _("v-if", !0)
-      ], 40, y),
-      e.inputDOMRef && !e.props.disabled ? (i(), f(e.NmorphDropdown, {
+        ])) : p("v-if", !0)
+      ], 40, u),
+      e.inputDOMRef && !e.props.disabled ? (i(), d(e.NmorphDropdown, {
         key: 0,
         open: e.open,
         "relative-element": e.inputDOMRef,
@@ -95,98 +95,131 @@ function I(S, l, z, e, B, D) {
         onOnOutsideClick: e.closeHandler,
         onOnEscapeKeydown: e.closeHandler
       }, {
-        default: p(() => [
-          r("div", {
+        default: t(() => [
+          o("div", {
             id: `${e.id}-dropdown`,
-            class: a(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
+            class: k(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
           }, [
-            r("div", H, [
-              (i(!0), n(
-                s,
-                null,
-                h(e.hourOptions, (o) => (i(), n("button", {
-                  key: o.value,
-                  type: "button",
-                  class: a(["nmorph-time-picker__option", [
-                    e.optionHeightModifiers,
-                    { "nmorph-time-picker__option--active": o.value === e.pickerValue.hour }
-                  ]]),
-                  disabled: o.disabled,
-                  onClick: (k) => e.selectUnit("hour", o.value)
-                }, c(o.label), 11, g))),
-                128
-                /* KEYED_FRAGMENT */
-              ))
+            o("div", C, [
+              n(e.NmorphScroll, {
+                height: "210px",
+                gap: 6,
+                "scroll-x-prop": "hidden",
+                "css-scroll-behavior": "auto"
+              }, {
+                default: t(() => [
+                  (i(!0), a(
+                    s,
+                    null,
+                    h(e.hourOptions, (l) => (i(), d(e.NmorphButton, {
+                      key: l.value,
+                      class: "nmorph-time-picker__option",
+                      design: "plain",
+                      text: l.label,
+                      thickness: e.props.thickness,
+                      active: l.value === e.pickerValue.hour,
+                      disabled: l.disabled,
+                      onClick: (_) => e.selectUnit("hour", l.value)
+                    }, null, 8, ["text", "thickness", "active", "disabled", "onClick"]))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                _: 1
+                /* STABLE */
+              })
             ]),
-            l[3] || (l[3] = r(
+            r[3] || (r[3] = o(
               "div",
               { class: "nmorph-time-picker__separator" },
               ":",
               -1
               /* CACHED */
             )),
-            r("div", O, [
-              (i(!0), n(
-                s,
-                null,
-                h(e.minuteOptions, (o) => (i(), n("button", {
-                  key: o.value,
-                  type: "button",
-                  class: a(["nmorph-time-picker__option", [
-                    e.optionHeightModifiers,
-                    { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }
-                  ]]),
-                  disabled: o.disabled,
-                  onClick: (k) => e.selectUnit("minute", o.value)
-                }, c(o.label), 11, N))),
-                128
-                /* KEYED_FRAGMENT */
-              ))
+            o("div", N, [
+              n(e.NmorphScroll, {
+                height: "210px",
+                gap: 6,
+                "scroll-x-prop": "hidden",
+                "css-scroll-behavior": "auto"
+              }, {
+                default: t(() => [
+                  (i(!0), a(
+                    s,
+                    null,
+                    h(e.minuteOptions, (l) => (i(), d(e.NmorphButton, {
+                      key: l.value,
+                      class: "nmorph-time-picker__option",
+                      design: "plain",
+                      text: l.label,
+                      thickness: e.props.thickness,
+                      active: l.value === e.pickerValue.minute,
+                      disabled: l.disabled,
+                      onClick: (_) => e.selectUnit("minute", l.value)
+                    }, null, 8, ["text", "thickness", "active", "disabled", "onClick"]))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                _: 1
+                /* STABLE */
+              })
             ]),
-            e.props.showSeconds ? (i(), n(
+            e.props.showSeconds ? (i(), a(
               s,
               { key: 0 },
               [
-                l[2] || (l[2] = r(
+                r[2] || (r[2] = o(
                   "div",
                   { class: "nmorph-time-picker__separator" },
                   ":",
                   -1
                   /* CACHED */
                 )),
-                r("div", M, [
-                  (i(!0), n(
-                    s,
-                    null,
-                    h(e.secondOptions, (o) => (i(), n("button", {
-                      key: o.value,
-                      type: "button",
-                      class: a(["nmorph-time-picker__option", [
-                        e.optionHeightModifiers,
-                        { "nmorph-time-picker__option--active": o.value === e.pickerValue.second }
-                      ]]),
-                      disabled: o.disabled,
-                      onClick: (k) => e.selectUnit("second", o.value)
-                    }, c(o.label), 11, V))),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
+                o("div", O, [
+                  n(e.NmorphScroll, {
+                    height: "210px",
+                    gap: 6,
+                    "scroll-x-prop": "hidden",
+                    "css-scroll-behavior": "auto"
+                  }, {
+                    default: t(() => [
+                      (i(!0), a(
+                        s,
+                        null,
+                        h(e.secondOptions, (l) => (i(), d(e.NmorphButton, {
+                          key: l.value,
+                          class: "nmorph-time-picker__option",
+                          design: "plain",
+                          text: l.label,
+                          thickness: e.props.thickness,
+                          active: l.value === e.pickerValue.second,
+                          disabled: l.disabled,
+                          onClick: (_) => e.selectUnit("second", l.value)
+                        }, null, 8, ["text", "thickness", "active", "disabled", "onClick"]))),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
                 ])
               ],
               64
               /* STABLE_FRAGMENT */
-            )) : _("v-if", !0)
-          ], 10, C)
+            )) : p("v-if", !0)
+          ], 10, y)
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : _("v-if", !0)
+      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : p("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const F = /* @__PURE__ */ u(b, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
+const E = /* @__PURE__ */ f(v, [["render", H], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
 export {
-  F as default
+  E as default
 };

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue2.js

@@ -1,16 +1,18 @@
 import './NmorphTimePicker.css';
-import { defineComponent as te, ref as V, computed as n, watch as re } from "vue";
-import { useI18n as oe } from "vue-i18n";
-import { useModifiers as _ } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as ne } from "../../../utils/common.js";
-import { useFocusableInput as ue } from "../../../hooks/use-focusable-input.js";
-import { useFormItemInput as le, useFormItemModel as se } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentThickness as O } from "../../../types/common.types.js";
+import { defineComponent as Y, ref as V, computed as u, watch as Z } from "vue";
+import { useI18n as ee } from "vue-i18n";
+import { useModifiers as te } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as re } from "../../../utils/common.js";
+import { useFocusableInput as oe } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as ne, useFormItemModel as ue } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentThickness as le } from "../../../types/common.types.js";
+import se from "../../basic/nmorph-scroll/NmorphScroll.vue.js";
 import ae from "../../../assets/icons/clock.svg.js";
 import ie from "../../../assets/icons/circle-close.svg.js";
-import de from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ce from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const Te = /* @__PURE__ */ te({
+import me from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import de from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import ce from "../../basic/nmorph-button/NmorphButton.vue.js";
+const xe = /* @__PURE__ */ Y({
   __name: "NmorphTimePicker",
   props: {
     modelValue: { type: [String, null], required: !1, default: null },
@@ -32,93 +34,93 @@ const Te = /* @__PURE__ */ te({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur"],
-  setup(B, { expose: M, emit: F }) {
-    const t = B, m = F, { t: T } = oe(), { id: H, name: P, autocomplete: $, tabindex: z } = le(t), { modelValue: s, updateModelValue: p } = se(
-      t,
-      (e) => m("update:model-value", e),
+  setup(_, { expose: B, emit: O }) {
+    const r = _, c = O, { t: T } = ee(), { id: F, name: M, autocomplete: H, tabindex: P } = ne(r), { modelValue: s, updateModelValue: p } = ue(
+      r,
+      (e) => c("update:model-value", e),
       null
     ), a = V(!1), {
       elementRef: I,
-      focused: k,
-      handleFocus: D,
-      handleBlur: R
-    } = ue({
-      onFocus: () => m("focus"),
-      onBlur: () => m("blur")
-    }), c = (e) => String(e).padStart(2, "0"), f = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
+      focused: w,
+      handleFocus: $,
+      handleBlur: z
+    } = oe({
+      onFocus: () => c("focus"),
+      onBlur: () => c("blur")
+    }), d = (e) => String(e).padStart(2, "0"), f = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
       if (!e) return null;
-      const r = e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
-      if (!r) return null;
-      const o = Number(r[1]), v = Number(r[2]), d = Number(r[3] || 0);
-      return o > 23 || v > 59 || d > 59 ? null : { hour: o, minute: v, second: d };
-    }, y = (e) => {
-      const r = `${c(e.hour)}:${c(e.minute)}`;
-      return t.showSeconds ? `${r}:${c(e.second)}` : r;
-    }, h = (e) => e.hour * 3600 + e.minute * 60 + e.second, g = n(() => i(t.minTime)), N = n(() => i(t.maxTime)), w = n(() => i(s.value)), l = V(w.value || { hour: 0, minute: 0, second: 0 }), x = n(() => t.placeholder || T("pickATime"));
-    re(s, (e) => {
-      const r = i(e);
-      r && (l.value = r);
+      const t = e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+      if (!t) return null;
+      const o = Number(t[1]), v = Number(t[2]), m = Number(t[3] || 0);
+      return o > 23 || v > 59 || m > 59 ? null : { hour: o, minute: v, second: m };
+    }, N = (e) => {
+      const t = `${d(e.hour)}:${d(e.minute)}`;
+      return r.showSeconds ? `${t}:${d(e.second)}` : t;
+    }, h = (e) => e.hour * 3600 + e.minute * 60 + e.second, g = u(() => i(r.minTime)), y = u(() => i(r.maxTime)), x = u(() => i(s.value)), l = V(x.value || { hour: 0, minute: 0, second: 0 }), k = u(() => r.placeholder || T("pickATime"));
+    Z(s, (e) => {
+      const t = i(e);
+      t && (l.value = t);
     });
-    const b = (e) => {
-      const r = h(e);
-      return !!(g.value && r < h(g.value) || N.value && r > h(N.value));
-    }, S = (e, r, o) => {
-      const v = f(o), d = /* @__PURE__ */ new Set();
-      for (let u = 0; u <= r; u += v) d.add(u);
-      return d.add(l.value[e]), Array.from(d).filter((u) => u >= 0 && u <= r).sort((u, q) => u - q).map((u) => {
-        const q = { ...l.value, [e]: u };
+    const S = (e) => {
+      const t = h(e);
+      return !!(g.value && t < h(g.value) || y.value && t > h(y.value));
+    }, b = (e, t, o) => {
+      const v = f(o), m = /* @__PURE__ */ new Set();
+      for (let n = 0; n <= t; n += v) m.add(n);
+      return m.add(l.value[e]), Array.from(m).filter((n) => n >= 0 && n <= t).sort((n, q) => n - q).map((n) => {
+        const q = { ...l.value, [e]: n };
         return {
-          label: c(u),
-          value: u,
-          disabled: b(q)
+          label: d(n),
+          value: n,
+          disabled: S(q)
         };
       });
-    }, A = n(() => S("hour", 23, t.hourStep)), U = n(() => S("minute", 59, t.minuteStep)), j = n(() => S("second", 59, t.secondStep)), E = (e, r) => {
-      const o = { ...l.value, [e]: r };
-      b(o) || (l.value = o, p(y(o)));
-    }, G = () => {
+    }, D = u(() => b("hour", 23, r.hourStep)), R = u(() => b("minute", 59, r.minuteStep)), A = u(() => b("second", 59, r.secondStep)), U = (e, t) => {
+      const o = { ...l.value, [e]: t };
+      S(o) || (l.value = o, p(N(o)));
+    }, j = () => {
       p(null), a.value = !1;
-    }, J = () => {
+    }, E = () => {
       a.value = !1;
-    }, K = () => {
-      t.disabled || (a.value = !a.value);
-    }, L = (e) => {
-      const r = e.target, o = i(r.value);
-      !o || b(o) || (l.value = o, p(y(o)));
-    }, Q = n(() => s.value || x.value), W = n(
-      () => t.showSeconds ? f(t.secondStep) : f(t.minuteStep) * 60
-    ), X = n(() => t.clearable && !!s.value && !t.disabled), Y = n(
-      () => _({
-        nmorph: [O[t.thickness]],
+    }, G = () => {
+      r.disabled || (a.value = !a.value);
+    }, J = (e) => {
+      const t = e.target, o = i(t.value);
+      !o || S(o) || (l.value = o, p(N(o)));
+    }, K = u(() => s.value || k.value), L = u(
+      () => r.showSeconds ? f(r.secondStep) : f(r.minuteStep) * 60
+    ), Q = u(() => r.clearable && !!s.value && !r.disabled), W = u(
+      () => te({
+        nmorph: [le[r.thickness]],
         "nmorph-time-picker": [
-          t.disabled && "disabled",
+          r.disabled && "disabled",
           a.value && "open",
-          k.value && "focus",
+          w.value && "focus",
           !s.value && "placeholder"
         ]
       })
-    ), Z = n(
-      () => _({
-        nmorph: [O[t.thickness]]
-      })
-    ), ee = n(
-      () => ne({
-        "--nmorph-private-time-picker-width": t.width
+    ), X = u(
+      () => re({
+        "--nmorph-private-time-picker-width": r.width
       })
     );
-    M({ inputDOMRef: I });
-    const C = { props: t, emit: m, t: T, id: H, name: P, autocomplete: $, tabindex: z, modelValue: s, updateModelValue: p, open: a, inputDOMRef: I, focused: k, focusHandler: D, blurHandler: R, pad: c, normalizeStep: f, parseTime: i, formatTime: y, timeToSeconds: h, minTimeParts: g, maxTimeParts: N, modelTimeParts: w, pickerValue: l, placeholderText: x, isOutsideRange: b, getUnitOptions: S, hourOptions: A, minuteOptions: U, secondOptions: j, selectUnit: E, clearHandler: G, closeHandler: J, toggleOpen: K, nativeInputHandler: L, displayValue: Q, inputStep: W, showClearButton: X, modifiers: Y, optionHeightModifiers: Z, styles: ee, get NmorphDropdown() {
+    B({ inputDOMRef: I });
+    const C = { props: r, emit: c, t: T, id: F, name: M, autocomplete: H, tabindex: P, modelValue: s, updateModelValue: p, open: a, inputDOMRef: I, focused: w, focusHandler: $, blurHandler: z, pad: d, normalizeStep: f, parseTime: i, formatTime: N, timeToSeconds: h, minTimeParts: g, maxTimeParts: y, modelTimeParts: x, pickerValue: l, placeholderText: k, isOutsideRange: S, getUnitOptions: b, hourOptions: D, minuteOptions: R, secondOptions: A, selectUnit: U, clearHandler: j, closeHandler: E, toggleOpen: G, nativeInputHandler: J, displayValue: K, inputStep: L, showClearButton: Q, modifiers: W, styles: X, get NmorphButton() {
       return ce;
-    }, get NmorphIcon() {
+    }, get NmorphDropdown() {
       return de;
+    }, get NmorphIcon() {
+      return me;
     }, get NmorphIconCircleClose() {
       return ie;
     }, get NmorphIconClock() {
       return ae;
+    }, get NmorphScroll() {
+      return se;
     } };
     return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
   }
 });
 export {
-  Te as default
+  xe as default
 };

package/dist/components/navigation/nmorph-stepper/NmorphStepper.css

@@ -1 +1 @@
-.nmorph-stepper{width:100%;border-radius:var(--default-border-radius)}.nmorph-stepper.nmorph-stepper--interactive{cursor:grab}.nmorph-stepper.nmorph-stepper--disabled{cursor:not-allowed;opacity:.6}.nmorph-stepper:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-stepper__viewport{width:100%;overflow:hidden;border-radius:inherit;touch-action:pan-y}.nmorph-stepper__track{display:flex;width:100%;min-width:0;transition:transform .24s ease;will-change:transform}.nmorph-stepper__track>*{flex:0 0 100%;width:100%;min-width:100%;max-width:100%}
+.nmorph-stepper{width:100%;border-radius:var(--default-border-radius)}.nmorph-stepper.nmorph-stepper--interactive{cursor:grab}.nmorph-stepper.nmorph-stepper--disabled{cursor:not-allowed;opacity:.6}.nmorph-stepper:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-stepper__viewport{width:100%;overflow:hidden;border-radius:inherit;touch-action:pan-y}.nmorph-stepper__track{display:flex;width:100%;min-width:0;transition:transform .24s ease;will-change:transform}.nmorph-stepper__track>*{flex:0 0 100%;width:100%;min-width:100%;max-width:100%}.nmorph-stepper__indicator{width:100%}

package/dist/components/navigation/nmorph-stepper/NmorphStepper.vue.js

@@ -1,48 +1,71 @@
 import './NmorphStepper.css';
-import n from "./NmorphStepper.vue2.js";
-import { openBlock as i, createElementBlock as l, normalizeClass as t, createElementVNode as r, normalizeStyle as d, renderSlot as a, normalizeProps as c, guardReactiveProps as p } from "vue";
+import d from "./NmorphStepper.vue2.js";
+import { openBlock as i, createElementBlock as t, normalizeClass as p, createElementVNode as a, normalizeStyle as s, renderSlot as l, withModifiers as r, normalizeProps as m, guardReactiveProps as P, createCommentVNode as v } from "vue";
 /* empty css                   */
-import s from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = ["aria-label", "aria-disabled", "tabindex"], h = {
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const b = ["aria-label", "aria-disabled", "tabindex"], c = {
   class: "nmorph-stepper__viewport",
   "aria-live": "polite",
   "aria-atomic": "true"
 };
-function _(o, P, v, e, b, f) {
-  return i(), l("div", {
-    class: t(e.modifiers),
+function h(n, e, k, o, w, y) {
+  return i(), t("div", {
+    class: p(o.modifiers),
     role: "group",
     "aria-roledescription": "stepper",
-    "aria-label": e.props.ariaLabel,
-    "aria-disabled": e.props.disabled || void 0,
-    tabindex: e.tabIndex,
-    onWheel: e.handleWheel,
-    onKeydown: e.handleKeydown,
-    onPointerdown: e.handlePointerDown,
-    onPointermove: e.handlePointerMove,
-    onPointerup: e.handlePointerEnd,
-    onPointercancel: e.clearPointer,
-    onPointerleave: e.clearPointer,
-    onClickCapture: e.handleClickCapture
+    "aria-label": o.props.ariaLabel,
+    "aria-disabled": o.props.disabled || void 0,
+    tabindex: o.tabIndex,
+    onWheel: o.handleWheel,
+    onKeydown: o.handleKeydown,
+    onPointerdown: o.handlePointerDown,
+    onPointermove: o.handlePointerMove,
+    onPointerup: o.handlePointerEnd,
+    onPointercancel: o.clearPointer,
+    onPointerleave: o.clearPointer,
+    onClickCapture: o.handleClickCapture
   }, [
-    r("div", h, [
-      r(
+    a("div", c, [
+      a(
         "div",
         {
           class: "nmorph-stepper__track",
-          style: d(e.trackStyle)
+          style: s(o.trackStyle)
         },
         [
-          a(o.$slots, "default")
+          l(n.$slots, "default")
         ],
         4
         /* STYLE */
       )
     ]),
-    a(o.$slots, "indicator", c(p(e.indicatorSlotProps)))
-  ], 42, m);
+    n.$slots.indicator ? (i(), t(
+      "div",
+      {
+        key: 0,
+        class: "nmorph-stepper__indicator",
+        onPointerdown: e[0] || (e[0] = r(() => {
+        }, ["stop"])),
+        onPointermove: e[1] || (e[1] = r(() => {
+        }, ["stop"])),
+        onPointerup: e[2] || (e[2] = r(() => {
+        }, ["stop"])),
+        onPointercancel: e[3] || (e[3] = r(() => {
+        }, ["stop"])),
+        onPointerleave: e[4] || (e[4] = r(() => {
+        }, ["stop"])),
+        onWheel: e[5] || (e[5] = r(() => {
+        }, ["stop"]))
+      },
+      [
+        l(n.$slots, "indicator", m(P(o.indicatorSlotProps)))
+      ],
+      32
+      /* NEED_HYDRATION */
+    )) : v("v-if", !0)
+  ], 42, b);
 }
-const C = /* @__PURE__ */ s(n, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-stepper/NmorphStepper.vue"]]);
+const g = /* @__PURE__ */ f(d, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-stepper/NmorphStepper.vue"]]);
 export {
-  C as default
+  g as default
 };