@nmorph/nmorph-ui-kit 2.2.59 → 3.0.0

package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue.js

@@ -1,41 +1,41 @@
 import './NmorphNumberInput.css';
-import h from "./NmorphNumberInput.vue2.js";
-import { openBlock as o, createElementBlock as a, normalizeStyle as c, normalizeClass as d, createElementVNode as e, createVNode as i, withCtx as t, createCommentVNode as m } from "vue";
+import r from "./NmorphNumberInput.vue2.js";
+import { openBlock as t, createElementBlock as c, normalizeStyle as h, normalizeClass as d, createElementVNode as e, createVNode as i, withCtx as o, createCommentVNode as m } from "vue";
 /* empty css                       */
-import l from "../../../_virtual/_plugin-vue_export-helper.js";
-const _ = { class: "nmorph-number-input__content" }, s = { class: "nmorph-number-input__input-content" }, b = {
+import s from "../../../_virtual/_plugin-vue_export-helper.js";
+const l = { class: "nmorph-number-input__content" }, _ = { class: "nmorph-number-input__input-content" }, p = {
   key: 0,
   class: "nmorph-number-input__decrease"
-}, p = ["id", "name", "autocomplete", "tabindex", "value", "min", "max"], f = {
+}, b = ["id", "name", "autocomplete", "tabindex", "value", "min", "max"], u = {
   key: 1,
   class: "nmorph-number-input__increase"
-}, B = {
+}, f = {
   key: 2,
   class: "nmorph-number-input__action-btns"
-}, g = { class: "nmorph-number-input__increase" }, u = { class: "nmorph-number-input__decrease" };
-function I(N, y, r, n, v, x) {
-  return o(), a(
+}, k = { class: "nmorph-number-input__increase" }, B = { class: "nmorph-number-input__decrease" };
+function I(N, g, a, n, v, x) {
+  return t(), c(
     "div",
     {
       class: d(n.modifiers),
-      style: c({ "--nmorph-number-input-right-action-height": n.rightActionBtnHeight })
+      style: h({ "--nmorph-private-number-input-right-action-height": n.rightActionBtnHeight })
     },
     [
-      e("div", _, [
-        e("div", s, [
-          r.actionBtnPositionRight ? m("v-if", !0) : (o(), a("div", b, [
+      e("div", l, [
+        e("div", _, [
+          a.actionBtnPositionRight ? m("v-if", !0) : (t(), c("div", p, [
             i(n.NmorphButton, {
-              "style-type": "transparent",
+              design: "plain",
               disabled: n.minBtnDisabled,
-              height: n.props.height,
+              thickness: n.props.thickness,
               onClick: n.decreaseHandler
             }, {
-              default: t(() => [
+              default: o(() => [
                 i(n.NmorphIcon, {
                   width: n.actionBtnIconSize,
                   height: n.actionBtnIconSize
                 }, {
-                  default: t(() => [
+                  default: o(() => [
                     i(n.NmorphIconMinusThin)
                   ]),
                   _: 1
@@ -44,7 +44,7 @@ function I(N, y, r, n, v, x) {
               ]),
               _: 1
               /* STABLE */
-            }, 8, ["disabled", "height"])
+            }, 8, ["disabled", "thickness"])
           ])),
           e("input", {
             id: n.id,
@@ -58,20 +58,22 @@ function I(N, y, r, n, v, x) {
             min: n.props.min,
             max: n.props.max,
             onInput: n.inputHandler
-          }, null, 40, p),
-          r.actionBtnPositionRight ? (o(), a("div", B, [
-            e("div", g, [
+          }, null, 40, b),
+          a.actionBtnPositionRight ? (t(), c("div", f, [
+            e("div", k, [
               i(n.NmorphButton, {
-                "style-type": "transparent",
+                design: "plain",
                 disabled: n.maxBtnDisabled,
+                thickness: n.props.thickness,
                 onClick: n.increaseHandler
               }, {
-                default: t(() => [
+                default: o(() => [
                   i(n.NmorphIcon, {
+                    class: "nmorph-number-input__plus-icon",
                     width: n.actionBtnIconSize,
                     height: n.actionBtnIconSize
                   }, {
-                    default: t(() => [
+                    default: o(() => [
                       i(n.NmorphIconPlusThin)
                     ]),
                     _: 1
@@ -80,20 +82,21 @@ function I(N, y, r, n, v, x) {
                 ]),
                 _: 1
                 /* STABLE */
-              }, 8, ["disabled"])
+              }, 8, ["disabled", "thickness"])
             ]),
-            e("div", u, [
+            e("div", B, [
               i(n.NmorphButton, {
-                "style-type": "transparent",
+                design: "plain",
                 disabled: n.minBtnDisabled,
+                thickness: n.props.thickness,
                 onClick: n.decreaseHandler
               }, {
-                default: t(() => [
+                default: o(() => [
                   i(n.NmorphIcon, {
                     width: n.actionBtnIconSize,
                     height: n.actionBtnIconSize
                   }, {
-                    default: t(() => [
+                    default: o(() => [
                       i(n.NmorphIconMinusThin)
                     ]),
                     _: 1
@@ -102,21 +105,22 @@ function I(N, y, r, n, v, x) {
                 ]),
                 _: 1
                 /* STABLE */
-              }, 8, ["disabled"])
+              }, 8, ["disabled", "thickness"])
             ])
-          ])) : (o(), a("div", f, [
+          ])) : (t(), c("div", u, [
             i(n.NmorphButton, {
-              "style-type": "transparent",
+              design: "plain",
               disabled: n.maxBtnDisabled,
-              height: n.props.height,
+              thickness: n.props.thickness,
               onClick: n.increaseHandler
             }, {
-              default: t(() => [
+              default: o(() => [
                 i(n.NmorphIcon, {
+                  class: "nmorph-number-input__plus-icon",
                   width: n.actionBtnIconSize,
                   height: n.actionBtnIconSize
                 }, {
-                  default: t(() => [
+                  default: o(() => [
                     i(n.NmorphIconPlusThin)
                   ]),
                   _: 1
@@ -125,7 +129,7 @@ function I(N, y, r, n, v, x) {
               ]),
               _: 1
               /* STABLE */
-            }, 8, ["disabled", "height"])
+            }, 8, ["disabled", "thickness"])
           ]))
         ])
       ])
@@ -134,7 +138,7 @@ function I(N, y, r, n, v, x) {
     /* CLASS, STYLE */
   );
 }
-const C = /* @__PURE__ */ l(h, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-number-input/NmorphNumberInput.vue"]]);
+const C = /* @__PURE__ */ s(r, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-number-input/NmorphNumberInput.vue"]]);
 export {
   C as default
 };

package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue2.js

@@ -1,13 +1,13 @@
 import './NmorphNumberInput.css';
-import { defineComponent as H, computed as n, ref as s, watch as p } from "vue";
-import { useModifiers as R } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as T, useFormItemModel as D } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentHeight as V } from "../../../types/common.types.js";
-import k from "../../../assets/icons/plus-thin.svg.js";
+import { defineComponent as k, computed as r, ref as m, watch as p } from "vue";
+import { useModifiers as T } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as H, useFormItemModel as R } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentThickness as D } from "../../../types/common.types.js";
+import V from "../../../assets/icons/plus-thin.svg.js";
 import z from "../../../assets/icons/minus-thin.svg.js";
 import C from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import F from "../../basic/nmorph-button/NmorphButton.vue.js";
-const L = /* @__PURE__ */ H({
+const L = /* @__PURE__ */ k({
   __name: "NmorphNumberInput",
   props: {
     modelValue: { type: Number, required: !1, default: 0 },
@@ -18,15 +18,15 @@ const L = /* @__PURE__ */ H({
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
-    height: { type: null, required: !1, default: "basic" },
+    thickness: { type: null, required: !1, default: "basic" },
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(d, { expose: c, emit: f }) {
-    const e = d, { id: h, name: g, autocomplete: b, tabindex: x } = T(e), N = n(
-      () => R({
-        nmorph: [V[e.height]],
+  setup(c, { expose: d, emit: f }) {
+    const e = c, { id: h, name: b, autocomplete: g, tabindex: v } = H(e), N = r(
+      () => T({
+        nmorph: [D[e.thickness]],
         "nmorph-number-input": [e.disabled && "disabled", e.actionBtnPositionRight && "action-btn-position-right"]
       })
     ), a = {
@@ -42,39 +42,39 @@ const L = /* @__PURE__ */ H({
         default: "8px",
         right: "5px"
       }
-    }, v = n(() => {
-      const i = e.actionBtnPositionRight ? "right" : "default";
-      return a[e.height][i];
-    }), u = f, { modelValue: o, updateModelValue: l } = D(
+    }, x = r(() => {
+      const n = e.actionBtnPositionRight ? "right" : "default";
+      return a[e.thickness][n];
+    }), u = f, { modelValue: o, updateModelValue: l } = R(
       e,
-      (i) => u("update:model-value", i),
+      (n) => u("update:model-value", n),
       0
-    ), t = s(o.value), y = () => {
+    ), t = m(o.value), y = () => {
       t.value += e.step;
     }, I = () => {
       t.value -= e.step;
-    }, q = n(() => t.value <= e.min), B = n(() => t.value >= e.max), _ = n(() => e.height === "thick" ? "16px" : "12px"), M = (i) => {
-      const S = i.target;
+    }, q = r(() => t.value <= e.min), B = r(() => t.value >= e.max), _ = r(() => "calc(var(--nmorph-private-control-height) / 2)"), M = (n) => {
+      const S = n.target;
       let P = Number(S.value);
       t.value = P;
     };
-    p(t, (i) => {
-      i > e.max && (t.value = e.max, r.value?.blur()), t.value < e.min && (t.value = e.min, r.value?.blur()), l(i);
-    }), p(o, (i) => {
-      t.value = i;
+    p(t, (n) => {
+      n > e.max && (t.value = e.max, i.value?.blur()), t.value < e.min && (t.value = e.min, i.value?.blur()), l(n);
+    }), p(o, (n) => {
+      t.value = n;
     });
-    const r = s(null);
-    c({ inputDOMRef: r });
-    const m = { props: e, id: h, name: g, autocomplete: b, tabindex: x, modifiers: N, iconSizeMap: a, actionBtnIconSize: v, emit: u, modelValue: o, updateModelValue: l, initialValue: t, increaseHandler: y, decreaseHandler: I, minBtnDisabled: q, maxBtnDisabled: B, rightActionBtnHeight: _, inputHandler: M, inputDOMRef: r, get NmorphButton() {
+    const i = m(null);
+    d({ inputDOMRef: i });
+    const s = { props: e, id: h, name: b, autocomplete: g, tabindex: v, modifiers: N, iconSizeMap: a, actionBtnIconSize: x, emit: u, modelValue: o, updateModelValue: l, initialValue: t, increaseHandler: y, decreaseHandler: I, minBtnDisabled: q, maxBtnDisabled: B, rightActionBtnHeight: _, inputHandler: M, inputDOMRef: i, get NmorphButton() {
       return F;
     }, get NmorphIcon() {
       return C;
     }, get NmorphIconMinusThin() {
       return z;
     }, get NmorphIconPlusThin() {
-      return k;
+      return V;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.css

@@ -1 +1 @@
-.nmorph-otp-input{display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-otp-input .nmorph-otp-input__content{display:flex;gap:var(--indentation-02)}.nmorph-otp-input .nmorph-otp-input__field{flex:0 0 auto;width:44px;min-width:44px}.nmorph-otp-input .nmorph-otp-input__field input{padding:0;text-align:center;text-indent:0;font-variant-numeric:tabular-nums}.nmorph-otp-input.nmorph--thin-component .nmorph-otp-input__field{width:32px;min-width:32px}.nmorph-otp-input.nmorph--thick-component .nmorph-otp-input__field{width:52px;min-width:52px}.nmorph-otp-input.nmorph-otp-input--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-otp-input{display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-otp-input .nmorph-otp-input__content{display:flex;gap:var(--indentation-02)}.nmorph-otp-input .nmorph-otp-input__field{flex:0 0 auto;width:44px;min-width:44px}.nmorph-otp-input .nmorph-otp-input__field input{padding:var(--nmorph-private-control-text-offset-y) 0 0;line-height:calc(var(--nmorph-private-control-height) - var(--nmorph-private-control-text-offset-y));text-align:center;text-indent:0;font-variant-numeric:tabular-nums}.nmorph-otp-input.nmorph--thin-component .nmorph-otp-input__field{width:32px;min-width:32px}.nmorph-otp-input.nmorph--thick-component .nmorph-otp-input__field{width:52px;min-width:52px}.nmorph-otp-input.nmorph-otp-input--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue.js

@@ -1,10 +1,10 @@
 import './NmorphOTPInput.css';
 import m from "./NmorphOTPInput.vue2.js";
-import { openBlock as l, createElementBlock as d, normalizeClass as p, createElementVNode as i, Fragment as c, renderList as s, createBlock as f, withModifiers as n, withKeys as r } from "vue";
+import { openBlock as l, createElementBlock as d, normalizeClass as p, createElementVNode as i, Fragment as c, renderList as s, createBlock as f, withModifiers as t, withKeys as r } from "vue";
 /* empty css                    */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const u = ["name", "value", "disabled"], v = { class: "nmorph-otp-input__content" };
-function _(b, a, g, e, H, y) {
+import u from "../../../_virtual/_plugin-vue_export-helper.js";
+const h = ["name", "value", "disabled"], v = { class: "nmorph-otp-input__content" };
+function _(b, a, k, e, H, y) {
   return l(), d(
     "div",
     {
@@ -16,20 +16,20 @@ function _(b, a, g, e, H, y) {
         value: e.otpValue.join(""),
         type: "hidden",
         disabled: e.props.disabled
-      }, null, 8, u),
+      }, null, 8, h),
       i("div", v, [
         (l(!0), d(
           c,
           null,
-          s(e.otpValue, (k, o) => (l(), f(e.NmorphTextInput, {
+          s(e.otpValue, (g, o) => (l(), f(e.NmorphTextInput, {
             id: e.fieldIds[o],
             key: e.fieldIds[o],
             ref_for: !0,
-            ref: (t) => e.setInputRef(t, o),
+            ref: (n) => e.setInputRef(n, o),
             modelValue: e.getFieldModel(o).value,
-            "onUpdate:modelValue": (t) => e.getFieldModel(o).value = t,
+            "onUpdate:modelValue": (n) => e.getFieldModel(o).value = n,
             class: "nmorph-otp-input__field",
-            height: e.props.height,
+            thickness: e.props.thickness,
             disabled: e.props.disabled,
             autocomplete: e.resolvedAutocomplete,
             tabindex: e.getFieldTabindex(o),
@@ -45,17 +45,17 @@ function _(b, a, g, e, H, y) {
               "aria-label": `OTP ${o + 1}`
             },
             onKeydown: [
-              a[0] || (a[0] = (t) => e.keydownHandler(t)),
-              r(n((t) => e.deleteKeyHandler(t, o), ["prevent"]), ["delete"]),
-              r(n((t) => e.arrowLeftHandler(o), ["prevent"]), ["left"]),
-              r(n((t) => e.arrowRightHandler(o), ["prevent"]), ["right"]),
-              r(n(e.homeHandler, ["prevent"]), ["home"]),
-              r(n(e.endHandler, ["prevent"]), ["end"])
+              a[0] || (a[0] = (n) => e.keydownHandler(n)),
+              r(t((n) => e.deleteKeyHandler(n, o), ["prevent"]), ["delete"]),
+              r(t((n) => e.arrowLeftHandler(o), ["prevent"]), ["left"]),
+              r(t((n) => e.arrowRightHandler(o), ["prevent"]), ["right"]),
+              r(t(e.homeHandler, ["prevent"]), ["home"]),
+              r(t(e.endHandler, ["prevent"]), ["end"])
             ],
-            onPaste: n((t) => e.pasteHandler(t, o), ["prevent"]),
-            onFocus: (t) => e.focusHandler(o),
+            onPaste: t((n) => e.pasteHandler(n, o), ["prevent"]),
+            onFocus: (n) => e.focusHandler(o),
             onBlur: e.blurHandler
-          }, null, 8, ["id", "modelValue", "onUpdate:modelValue", "height", "disabled", "autocomplete", "tabindex", "input-attrs", "onKeydown", "onPaste", "onFocus"]))),
+          }, null, 8, ["id", "modelValue", "onUpdate:modelValue", "thickness", "disabled", "autocomplete", "tabindex", "input-attrs", "onKeydown", "onPaste", "onFocus"]))),
           128
           /* KEYED_FRAGMENT */
         ))
@@ -65,7 +65,7 @@ function _(b, a, g, e, H, y) {
     /* CLASS */
   );
 }
-const P = /* @__PURE__ */ h(m, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-otp-input/NmorphOTPInput.vue"]]);
+const P = /* @__PURE__ */ u(m, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-otp-input/NmorphOTPInput.vue"]]);
 export {
   P as default
 };

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue2.js

@@ -1,9 +1,9 @@
 import './NmorphOTPInput.css';
 import { defineComponent as le, ref as M, computed as c, watch as O, nextTick as R } from "vue";
 import { useModifiers as ue } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as oe, useFormItemModel as re } from "../nmorph-form/use-form-item-input.js";
-import ne from "../nmorph-text-input/NmorphTextInput.vue.js";
-import { NmorphComponentHeight as se } from "../../../types/common.types.js";
+import { useFormItemInput as oe, useFormItemModel as ne } from "../nmorph-form/use-form-item-input.js";
+import re from "../nmorph-text-input/NmorphTextInput.vue.js";
+import { NmorphComponentThickness as se } from "../../../types/common.types.js";
 const pe = /* @__PURE__ */ le({
   __name: "NmorphOTPInput",
   props: {
@@ -15,72 +15,72 @@ const pe = /* @__PURE__ */ le({
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
-    height: { type: null, required: !1, default: "basic" },
+    thickness: { type: null, required: !1, default: "basic" },
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur", "complete"],
-  setup(j, { expose: w, emit: N }) {
-    const l = j, f = N, { id: V, name: T, autocomplete: A, tabindex: p } = oe(l), { modelValue: v, updateModelValue: F } = re(
+  setup(T, { expose: j, emit: w }) {
+    const l = T, f = w, { id: V, name: N, autocomplete: k, tabindex: p } = oe(l), { modelValue: v, updateModelValue: A } = ne(
       l,
       (e) => f("update:model-value", e),
       ""
-    ), i = M([]), n = M([]), d = M(!1), o = M([]), u = c(() => Math.max(1, l.length)), g = (e = "") => {
+    ), i = M([]), r = M([]), d = M(!1), o = M([]), u = c(() => Math.max(1, l.length)), g = (e = "") => {
       const t = `${e ?? ""}`;
       return l.mode === "numeric" ? Array.from(t.replace(/\D/g, "")) : l.mode === "alphanumeric" ? Array.from(t.replace(/[^a-zA-Z0-9]/g, "")) : Array.from(t);
-    }, S = (e = v.value) => {
+    }, F = (e = v.value) => {
       const t = g(e).slice(0, u.value);
       return Array.from({ length: u.value }, (a, s) => t[s] || "");
     }, h = (e, t = !1) => {
       if (o.value = Array.from({ length: u.value }, (s, b) => e[b] || ""), !t) return;
       const a = o.value.join("");
-      F(a), o.value.includes("") || f("complete", a);
+      A(a), o.value.includes("") || f("complete", a);
     };
     O(
       [v, () => l.mode, u],
       () => {
-        const e = S(v.value);
+        const e = F(v.value);
         (e.join("") !== o.value.join("") || e.length !== o.value.length) && h(e);
       },
       { immediate: !0 }
     );
     const E = c(
       () => ue({
-        nmorph: [se[l.height], d.value && "focused"],
+        nmorph: [se[l.thickness], d.value && "focused"],
         "nmorph-otp-input": [l.disabled && "disabled"]
       })
     ), B = c(
       () => Array.from({ length: u.value }, (e, t) => t === 0 ? V.value : `${V.value}-${t + 1}`)
-    ), C = c(() => l.mode === "numeric" ? "numeric" : "text"), P = c(() => A.value || "one-time-code"), $ = c(() => {
+    ), C = c(() => l.mode === "numeric" ? "numeric" : "text"), P = c(() => k.value || "one-time-code"), $ = c(() => {
       if (l.mode === "numeric") return "[0-9]*";
       if (l.mode === "alphanumeric") return "[A-Za-z0-9]*";
     }), y = (e) => {
-      n.value[e] = i.value[e]?.inputDOMRef ?? null;
+      r.value[e] = i.value[e]?.inputDOMRef ?? null;
     }, x = (e, t) => {
       i.value[t] = e, R(() => {
         y(t);
       });
     }, _ = (e) => {
-      y(e), i.value[e]?.select?.(), n.value[e]?.select();
-    }, r = (e = 0) => {
+      y(e), i.value[e]?.select?.(), r.value[e]?.select();
+    }, n = (e = 0) => {
       R(() => {
         const t = Math.min(Math.max(e, 0), u.value - 1);
-        y(t), i.value[t]?.focus?.(), n.value[t]?.focus(), _(t);
+        y(t), i.value[t]?.focus?.(), r.value[t]?.focus(), _(t);
       });
-    }, k = () => {
+    }, S = () => {
       i.value.forEach((e, t) => {
-        e?.blur?.(), n.value[t]?.blur();
+        e?.blur?.(), r.value[t]?.blur();
       });
     };
-    w({
-      inputDOMRefs: n,
-      focus: r,
-      blur: k
+    j({
+      inputDOMRefs: r,
+      focus: n,
+      blur: S
     });
     const m = (e, t = "") => {
       const a = [...o.value];
       a[e] = t, h(a, !0);
-    }, H = (e, t) => {
+    }, q = (e, t) => {
       const a = g(e).slice(0, u.value - t);
       if (!a.length) {
         m(t, "");
@@ -91,23 +91,23 @@ const pe = /* @__PURE__ */ le({
         s[t + ae] = te;
       }), h(s, !0);
       const b = t + a.length;
-      b < u.value ? r(b) : r(u.value - 1);
+      b < u.value ? n(b) : n(u.value - 1);
     }, z = (e, t) => {
-      H(e, t);
-    }, q = /* @__PURE__ */ new Map(), L = (e) => {
-      const t = q.get(e);
+      q(e, t);
+    }, H = /* @__PURE__ */ new Map(), L = (e) => {
+      const t = H.get(e);
       if (t) return t;
       const a = c({
         get: () => o.value[e] || "",
         set: (s) => z(s, e)
       });
-      return q.set(e, a), a;
+      return H.set(e, a), a;
     }, D = (e) => {
       if (o.value[e]) {
         m(e);
         return;
       }
-      e > 0 && (m(e - 1), r(e - 1));
+      e > 0 && (m(e - 1), n(e - 1));
     }, Z = (e, t) => {
       if (e.key === "Backspace") {
         D(t);
@@ -115,34 +115,34 @@ const pe = /* @__PURE__ */ le({
       }
       m(t);
     }, K = (e) => {
-      r(e - 1);
+      n(e - 1);
     }, G = (e) => {
-      r(e + 1);
+      n(e + 1);
     }, J = () => {
-      r(0);
+      n(0);
     }, Q = () => {
-      r(u.value - 1);
+      n(u.value - 1);
     }, U = (e) => {
       e.key.length === 1 && !g(e.key).length && e.preventDefault();
     }, W = (e, t) => {
       const a = e.clipboardData?.getData("text") || "";
-      H(a, t);
+      q(a, t);
     }, X = (e) => {
       d.value || (d.value = !0, f("focus")), _(e);
     }, Y = () => {
       setTimeout(() => {
         const e = document.activeElement;
-        !n.value.some((a) => a === e) && d.value && (d.value = !1, f("blur"));
+        !r.value.some((a) => a === e) && d.value && (d.value = !1, f("blur"));
       });
     }, ee = (e) => p.value > 0 ? p.value + e : p.value;
     O(
       () => l.autofocus,
       (e) => {
-        e && !l.disabled && r(0);
+        e && !l.disabled && n(0);
       },
       { immediate: !0 }
     );
-    const I = { props: l, emit: f, id: V, name: T, autocomplete: A, tabindex: p, modelValue: v, updateModelValue: F, inputRefs: i, inputDOMRefs: n, focused: d, otpValue: o, normalizedLength: u, sanitizeValue: g, normalizeOtpValue: S, syncOtpValue: h, modifiers: E, fieldIds: B, inputMode: C, resolvedAutocomplete: P, inputPattern: $, syncInputDOMRef: y, setInputRef: x, selectField: _, focusField: r, blurFields: k, updateCharAt: m, insertValue: H, inputHandler: z, fieldModels: q, getFieldModel: L, backspaceHandler: D, deleteKeyHandler: Z, arrowLeftHandler: K, arrowRightHandler: G, homeHandler: J, endHandler: Q, keydownHandler: U, pasteHandler: W, focusHandler: X, blurHandler: Y, getFieldTabindex: ee, NmorphTextInput: ne };
+    const I = { props: l, emit: f, id: V, name: N, autocomplete: k, tabindex: p, modelValue: v, updateModelValue: A, inputRefs: i, inputDOMRefs: r, focused: d, otpValue: o, normalizedLength: u, sanitizeValue: g, normalizeOtpValue: F, syncOtpValue: h, modifiers: E, fieldIds: B, inputMode: C, resolvedAutocomplete: P, inputPattern: $, syncInputDOMRef: y, setInputRef: x, selectField: _, focusField: n, blurFields: S, updateCharAt: m, insertValue: q, inputHandler: z, fieldModels: H, getFieldModel: L, backspaceHandler: D, deleteKeyHandler: Z, arrowLeftHandler: K, arrowRightHandler: G, homeHandler: J, endHandler: Q, keydownHandler: U, pasteHandler: W, focusHandler: X, blurHandler: Y, getFieldTabindex: ee, NmorphTextInput: re };
     return Object.defineProperty(I, "__isScriptSetup", { enumerable: !1, value: !0 }), I;
   }
 });

package/dist/components/form/nmorph-radio/NmorphRadio.css

@@ -1 +1 @@
-.nmorph-radio{--size: var(--height);--nmorph-selection-control-font-size: var(--font-size-small);--nmorph-selection-control-line-height: var(--line-height-regular);--nmorph-selection-control-inline-padding: var(--indentation-03);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio.nmorph{height:auto;min-height:var(--size)}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;justify-content:center;align-items:center;min-height:var(--size)}.nmorph-radio span{margin-top:2px}.nmorph-radio .nmorph-radio__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-radio input{position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-radio input:focus-visible{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake span,.nmorph-radio .nmorph-radio__label{font-weight:400;font-size:var(--nmorph-selection-control-font-size);line-height:var(--nmorph-selection-control-line-height)}.nmorph-radio .nmorph-radio__fake-checked{position:absolute;top:50%;left:50%;width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%)}.nmorph-radio .nmorph-radio__label{margin-left:var(--indentation-02)}.nmorph-radio.nmorph-radio--button .nmorph-radio__fake{position:relative;display:flex;justify-content:center;align-items:center;height:var(--size);padding:var(--nmorph-selection-control-inline-padding);white-space:nowrap;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph--extra-thin-component{--nmorph-selection-control-font-size: var(--font-size-tiny);--nmorph-selection-control-line-height: var(--line-height-line);--nmorph-selection-control-inline-padding: var(--indentation-02)}.nmorph-radio.nmorph--thin-component{--nmorph-selection-control-font-size: var(--font-size-extra-small)}.nmorph-radio.nmorph--basic-component{--nmorph-selection-control-font-size: var(--font-size-small)}.nmorph-radio.nmorph--thick-component{--nmorph-selection-control-font-size: var(--font-size-base)}.nmorph-radio.nmorph-radio--checked .nmorph-radio__fake{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph-radio--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-radio{--nmorph-private-selection-control-size: var(--nmorph-private-control-height);--nmorph-private-selection-control-font-size: var(--nmorph-private-control-font-size);--nmorph-private-selection-control-line-height: var(--nmorph-private-control-line-height);--nmorph-private-selection-control-font-weight: var(--nmorph-private-control-font-weight);--nmorph-private-selection-control-inline-padding: var(--indentation-03);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio.nmorph{height:auto;min-height:var(--nmorph-private-selection-control-size)}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;justify-content:center;align-items:center;min-height:var(--nmorph-private-selection-control-size)}.nmorph-radio .nmorph-radio__input-wrapper{position:relative;width:var(--nmorph-private-selection-control-size);height:var(--nmorph-private-selection-control-size)}.nmorph-radio input{position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-radio input:focus-visible{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake span,.nmorph-radio .nmorph-radio__label{display:inline-flex;align-items:center;font-weight:var(--nmorph-private-selection-control-font-weight);font-size:var(--nmorph-private-selection-control-font-size);line-height:var(--nmorph-private-selection-control-line-height);transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-radio .nmorph-radio__fake-checked{position:absolute;top:50%;left:50%;width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%)}.nmorph-radio .nmorph-radio__label{margin-left:var(--indentation-02)}.nmorph-radio.nmorph-radio--nmorph .nmorph-radio__fake{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;height:var(--nmorph-private-selection-control-size);padding:0 var(--nmorph-private-selection-control-inline-padding);white-space:nowrap;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph--extra-thin-component{--nmorph-private-selection-control-inline-padding: var(--indentation-02)}.nmorph-radio.nmorph-radio--checked .nmorph-radio__fake{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph-radio--plain .nmorph-radio__fake{border:var(--nmorph-plain-border);box-shadow:none}.nmorph-radio.nmorph-radio--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-radio/NmorphRadio.vue.js

@@ -22,7 +22,7 @@ const m = {
   key: 1,
   class: "nmorph-radio__fake"
 };
-function N(n, s, R, e, C, D) {
+function g(n, s, N, e, R, C) {
   return o(), a(
     "label",
     {
@@ -30,7 +30,7 @@ function N(n, s, R, e, C, D) {
       onClick: p(e.changeHandler, ["prevent"])
     },
     [
-      e.props.styleType === "radio-style" ? (o(), a("div", m, [
+      e.props.design === "plain" ? (o(), a("div", m, [
         r("div", h, [
           r("input", {
             ref: "inputDOMRef",
@@ -58,7 +58,7 @@ function N(n, s, R, e, C, D) {
           /* TEXT */
         )) : l(n.$slots, "label", { key: 1 })
       ])) : i("v-if", !0),
-      e.props.styleType === "button" ? (o(), a("div", v, [
+      e.props.design === "nmorph" ? (o(), a("div", v, [
         r("input", {
           ref: "inputDOMRef",
           type: "radio",
@@ -88,7 +88,7 @@ function N(n, s, R, e, C, D) {
     /* CLASS */
   );
 }
-const E = /* @__PURE__ */ _(t, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-radio/NmorphRadio.vue"]]);
+const E = /* @__PURE__ */ _(t, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-radio/NmorphRadio.vue"]]);
 export {
   E as default
 };