@nmorph/nmorph-ui-kit 2.2.10 → 2.2.12

package/dist/components/data/nmorph-pagination/NmorphPagination.vue.js

@@ -1,25 +1,26 @@
 import './NmorphPagination.css';
-import d from "./NmorphPagination.vue2.js";
-import { openBlock as e, createElementBlock as i, normalizeClass as l, createVNode as a, withCtx as r, Fragment as p, renderList as c, createBlock as t, mergeProps as m, createCommentVNode as _ } from "vue";
+import h from "./NmorphPagination.vue2.js";
+import { openBlock as a, createElementBlock as r, normalizeClass as l, createVNode as e, withCtx as i, Fragment as d, renderList as p, createBlock as t, mergeProps as c, createCommentVNode as m } from "vue";
 /* empty css                      */
-import s from "../../../_virtual/_plugin-vue_export-helper.js";
-function b(h, v, f, o, g, k) {
-  return o.show ? (e(), i(
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+function s(g, b, v, o, f, k) {
+  return o.show ? (a(), r(
     "div",
     {
       key: 0,
       class: l(o.modifiers)
     },
     [
-      a(o.NmorphButton, {
+      e(o.NmorphButton, {
         class: "nmorph-pagination__btn nmorph-pagination__prev-btn",
+        height: o.props.height,
         disabled: o.blockPrevButton || o.props.disabled,
         onClick: o.prevClick
       }, {
-        default: r(() => [
-          a(o.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
-            default: r(() => [
-              a(o.NmorphIconChevronDown)
+        default: i(() => [
+          e(o.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
+            default: i(() => [
+              e(o.NmorphIconChevronDown)
             ]),
             _: 1
             /* STABLE */
@@ -27,34 +28,37 @@ function b(h, v, f, o, g, k) {
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["disabled"]),
-      a(o.NmorphRadioGroup, {
+      }, 8, ["height", "disabled"]),
+      e(o.NmorphRadioGroup, {
         "model-value": o.selectedPage,
         class: "nmorph-pagination__page-group",
+        height: o.props.height,
         disabled: o.props.disabled,
         "onUpdate:modelValue": o.updateSelectedValue
       }, {
-        default: r(() => [
-          (e(!0), i(
-            p,
+        default: i(() => [
+          (a(!0), r(
+            d,
             null,
-            c(o.visiblePages, (n) => (e(), i("div", {
+            p(o.visiblePages, (n) => (a(), r("div", {
               key: n.value,
               class: "nmorph-pagination__page-btn-wrapper"
             }, [
-              n.value === "prev" || n.value === "next" ? (e(), t(o.NmorphButton, {
+              n.value === "prev" || n.value === "next" ? (a(), t(o.NmorphButton, {
                 key: 0,
                 class: l(`nmorph-pagination__page-btn nmorph-pagination__${n.value}`),
                 text: n.label,
+                height: o.props.height,
                 disabled: o.props.disabled,
                 onClick: (N) => o.bigStepUpdate(n.value)
-              }, null, 8, ["class", "text", "disabled", "onClick"])) : (e(), t(o.NmorphRadio, m({
+              }, null, 8, ["class", "text", "height", "disabled", "onClick"])) : (a(), t(o.NmorphRadio, c({
                 key: 1,
                 ref_for: !0
               }, n, {
                 class: "nmorph-pagination__page-btn",
+                height: o.props.height,
                 disabled: o.props.disabled
-              }), null, 16, ["disabled"]))
+              }), null, 16, ["height", "disabled"]))
             ]))),
             128
             /* KEYED_FRAGMENT */
@@ -62,16 +66,17 @@ function b(h, v, f, o, g, k) {
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["model-value", "disabled"]),
-      a(o.NmorphButton, {
+      }, 8, ["model-value", "height", "disabled"]),
+      e(o.NmorphButton, {
         class: "nmorph-pagination__btn nmorph-pagination__next-btn",
+        height: o.props.height,
         disabled: o.blockNextButton || o.props.disabled,
         onClick: o.nextClick
       }, {
-        default: r(() => [
-          a(o.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
-            default: r(() => [
-              a(o.NmorphIconChevronDown)
+        default: i(() => [
+          e(o.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
+            default: i(() => [
+              e(o.NmorphIconChevronDown)
             ]),
             _: 1
             /* STABLE */
@@ -79,13 +84,13 @@ function b(h, v, f, o, g, k) {
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["disabled"])
+      }, 8, ["height", "disabled"])
     ],
     2
     /* CLASS */
-  )) : _("v-if", !0);
+  )) : m("v-if", !0);
 }
-const P = /* @__PURE__ */ s(d, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
+const P = /* @__PURE__ */ _(h, [["render", s], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
 export {
   P as default
 };

package/dist/components/data/nmorph-pagination/NmorphPagination.vue2.js

@@ -1,6 +1,6 @@
 import './NmorphPagination.css';
-import { defineComponent as P, computed as u, ref as _, watch as x } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { defineComponent as P, computed as o, ref as _, watch as q } from "vue";
+import { useModifiers as x } from "../../../utils/create-modifiers.js";
 import w from "../../form/nmorph-radio/NmorphRadio.vue.js";
 import B from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import O from "../../basic/nmorph-button/NmorphButton.vue.js";
@@ -15,43 +15,44 @@ const M = /* @__PURE__ */ P({
     disabled: { type: Boolean, required: !1, default: !1 },
     hideOnSinglePage: { type: Boolean, required: !1, default: !0 },
     maxVisiblePages: { type: Number, required: !1, default: 9 },
-    fastForwardStep: { type: Number, required: !1, default: 5 }
+    fastForwardStep: { type: Number, required: !1, default: 5 },
+    height: { type: null, required: !1, default: "basic" }
   },
   emits: ["update:model-value"],
   setup(p, { expose: d, emit: c }) {
     d();
-    const a = p, s = c, f = u(
-      () => q({
+    const a = p, s = c, f = o(
+      () => x({
         "nmorph-pagination": [`${a.disabled && "disabled"}`]
       })
     ), v = () => {
       r.value = String(Number(r.value) - 1);
     }, g = () => {
       r.value = String(Number(r.value) + 1);
-    }, r = _(String(a.modelValue)), t = u(() => {
-      const e = a.totalElementsQuantity / a.elementsQuantityOnPage + 1, o = e % 1 === 0 ? -1 : 0;
-      return Array.from({ length: e + o }, (n, m) => ({ value: String(m + 1), label: String(m + 1) }));
-    }), b = u(() => a.hideOnSinglePage || a.totalElementsQuantity / a.elementsQuantityOnPage > 1);
-    x(r, (e) => {
+    }, r = _(String(a.modelValue)), t = o(() => {
+      const e = a.totalElementsQuantity / a.elementsQuantityOnPage + 1, u = e % 1 === 0 ? -1 : 0;
+      return Array.from({ length: e + u }, (n, m) => ({ value: String(m + 1), label: String(m + 1) }));
+    }), b = o(() => a.hideOnSinglePage || a.totalElementsQuantity / a.elementsQuantityOnPage > 1);
+    q(r, (e) => {
       s("update:model-value", Number(e));
     });
     const h = (e) => {
       r.value = e;
-    }, N = u(() => Number(r.value) === 1), S = u(() => t.value.length === Number(r.value)), y = u(() => {
-      const e = t.value.length, o = Number(r.value), l = a.maxVisiblePages;
+    }, N = o(() => Number(r.value) === 1), y = o(() => t.value.length === Number(r.value)), S = o(() => {
+      const e = t.value.length, u = Number(r.value), l = a.maxVisiblePages;
       if (e <= l)
         return t.value;
       const n = Math.floor(l / 2);
-      return o <= n ? [...t.value.slice(0, l - 2), { value: "next", label: "..." }, t.value[e - 1]] : o >= e - n ? [t.value[0], { value: "prev", label: "..." }, ...t.value.slice(e - (l - 2))] : [
+      return u <= n ? [...t.value.slice(0, l - 2), { value: "next", label: "..." }, t.value[e - 1]] : u >= e - n ? [t.value[0], { value: "prev", label: "..." }, ...t.value.slice(e - (l - 2))] : [
         t.value[0],
         { value: "prev", label: "..." },
-        ...t.value.slice(o - n, o + n - 1),
+        ...t.value.slice(u - n, u + n - 1),
         { value: "next", label: "..." },
         t.value[e - 1]
       ];
-    }), i = { props: a, emit: s, modifiers: f, prevClick: v, nextClick: g, selectedPage: r, pages: t, show: b, updateSelectedValue: h, blockPrevButton: N, blockNextButton: S, visiblePages: y, bigStepUpdate: (e) => {
-      const o = Number(r.value);
-      let l = e === "prev" ? o - a.fastForwardStep : o + a.fastForwardStep;
+    }), i = { props: a, emit: s, modifiers: f, prevClick: v, nextClick: g, selectedPage: r, pages: t, show: b, updateSelectedValue: h, blockPrevButton: N, blockNextButton: y, visiblePages: S, bigStepUpdate: (e) => {
+      const u = Number(r.value);
+      let l = e === "prev" ? u - a.fastForwardStep : u + a.fastForwardStep;
       l <= 0 && (l = 1), l >= t.value.length && (l = t.value.length), r.value = String(l);
     }, get NmorphRadioGroup() {
       return Q;

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphAutocomplete.css';
 import { defineComponent as N, ref as a, computed as p, watch as i } from "vue";
 import { useModifiers as _ } from "../../../utils/create-modifiers.js";
-import S from "../../../assets/icons/loader.svg.js";
-import I from "../nmorph-text-input/NmorphTextInput.vue.js";
-import w from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import S from "../nmorph-text-input/NmorphTextInput.vue.js";
+import I from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import x from "../../../assets/icons/loader.svg.js";
 const D = /* @__PURE__ */ N({
   __name: "NmorphAutocomplete",
   props: {
@@ -49,13 +49,13 @@ const D = /* @__PURE__ */ N({
       e && (r.value = !0);
     });
     const s = { props: o, initialValue: t, emit: u, modifiers: f, updateValueHandler: h, open: r, nmorphAutocompleteDOMRef: v, closeHandler: y, filteredList: n, clickHandler: g, focusHandler: b, loader: l, get NmorphIcon() {
-      return x;
-    }, get NmorphDropdown() {
       return w;
-    }, get NmorphTextInput() {
+    }, get NmorphDropdown() {
       return I;
-    }, get NmorphIconLoader() {
+    }, get NmorphTextInput() {
       return S;
+    }, get NmorphIconLoader() {
+      return x;
     } };
     return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.css

@@ -1 +1 @@
-.nmorph-checkbox{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;align-items:center;justify-content:center}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-checkbox input:focus-visible{opacity:1;scale:.95;outline:2px solid var(--nmorph-accent-color)}.nmorph-checkbox .nmorph-checkbox__fake{border-radius:var(--default-border-radius);width:100%;height:100%;position:absolute;top:0;left:0;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-checkbox .nmorph-checkbox__label,.nmorph-checkbox .nmorph-checkbox__fake span{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-checkbox .nmorph-checkbox__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-checkbox .nmorph-checkbox__label{margin-left:var(--indentation-02);line-height:1}.nmorph-checkbox .nmorph-checkbox__fake span{line-height:.8}.nmorph-checkbox.nmorph-checkbox--button .nmorph-checkbox__fake{position:relative;display:flex;align-items:center;height:var(--size);padding:var(--indentation-03);border-radius:var(--default-border-radius);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-checkbox.nmorph-checkbox--checked .nmorph-checkbox__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-checkbox.nmorph-checkbox--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-checkbox{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;align-items:center;justify-content:center}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-checkbox input:focus-visible{opacity:1;scale:.95;outline:2px solid var(--nmorph-accent-color)}.nmorph-checkbox .nmorph-checkbox__fake{border-radius:var(--default-border-radius);width:100%;height:100%;position:absolute;top:0;left:0;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-checkbox .nmorph-checkbox__label,.nmorph-checkbox .nmorph-checkbox__fake span{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-checkbox .nmorph-checkbox__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-checkbox .nmorph-checkbox__label{margin-left:var(--indentation-02);line-height:1}.nmorph-checkbox .nmorph-checkbox__fake span{line-height:.8}.nmorph-checkbox.nmorph-checkbox--button .nmorph-checkbox__fake{position:relative;display:flex;align-items:center;height:var(--size);padding:var(--indentation-03);border-radius:var(--default-border-radius);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-checkbox.nmorph--extra-thin-component .nmorph-checkbox__label,.nmorph-checkbox.nmorph--extra-thin-component .nmorph-checkbox__fake span{font-size:var(--font-size-extra-small);line-height:var(--line-height-line)}.nmorph-checkbox.nmorph--extra-thin-component.nmorph-checkbox--button .nmorph-checkbox__fake{padding:var(--indentation-02)}.nmorph-checkbox.nmorph-checkbox--checked .nmorph-checkbox__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-checkbox.nmorph-checkbox--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue.js

@@ -1,6 +1,6 @@
 import './NmorphCheckbox.css';
-import i from "./NmorphCheckbox.vue2.js";
-import { openBlock as o, createElementBlock as c, normalizeClass as a, createElementVNode as n, createCommentVNode as s, toDisplayString as d, renderSlot as h } from "vue";
+import h from "./NmorphCheckbox.vue2.js";
+import { openBlock as o, createElementBlock as c, normalizeClass as i, createElementVNode as n, createCommentVNode as l, toDisplayString as a, renderSlot as r } from "vue";
 /* empty css                    */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
 const _ = {
@@ -25,11 +25,11 @@ const _ = {
   key: 1,
   class: "nmorph-checkbox__fake"
 };
-function C(l, r, g, e, N, D) {
+function C(s, d, g, e, N, D) {
   return o(), c(
     "label",
     {
-      class: a(e.modifiers)
+      class: i(e.modifiers)
     },
     [
       e.props.design === "checkbox" ? (o(), c("div", _, [
@@ -42,27 +42,27 @@ function C(l, r, g, e, N, D) {
             class: "nmorph-native-input",
             onChange: e.handleChange
           }, null, 40, k),
-          r[0] || (r[0] = n(
+          d[0] || (d[0] = n(
             "div",
             { class: "nmorph-checkbox__fake" },
             null,
             -1
             /* HOISTED */
           )),
-          e.checked ? (o(), c("div", b)) : s("v-if", !0)
+          e.checked ? (o(), c("div", b)) : l("v-if", !0)
         ]),
         e.props.label ? (o(), c("div", m, [
           n(
             "span",
             null,
-            d(e.props.label),
+            a(e.props.label),
             1
             /* TEXT */
           )
         ])) : (o(), c("div", f, [
-          h(l.$slots, "default")
+          r(s.$slots, "default")
         ]))
-      ])) : s("v-if", !0),
+      ])) : l("v-if", !0),
       e.props.design === "button" ? (o(), c("div", x, [
         n("input", {
           ref: "inputDOMRef",
@@ -75,20 +75,22 @@ function C(l, r, g, e, N, D) {
           n(
             "span",
             null,
-            d(e.props.label),
+            a(e.props.label),
             1
             /* TEXT */
           )
         ])) : (o(), c("div", u, [
-          h(l.$slots, "label")
+          r(s.$slots, "label", {}, () => [
+            r(s.$slots, "default")
+          ])
         ]))
-      ])) : s("v-if", !0)
+      ])) : l("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const R = /* @__PURE__ */ t(i, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox/NmorphCheckbox.vue"]]);
+const R = /* @__PURE__ */ t(h, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox/NmorphCheckbox.vue"]]);
 export {
   R as default
 };

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphCheckbox.css';
 import { defineComponent as y, inject as u, watch as k, ref as i, computed as r } from "vue";
 import { useModifiers as x } from "../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as V } from "../../../types/index.js";
+import { NmorphSelectionControlHeight as S } from "../../../types/index.js";
 const $ = /* @__PURE__ */ y({
   __name: "NmorphCheckbox",
   props: {
@@ -9,7 +9,7 @@ const $ = /* @__PURE__ */ y({
     disabled: { type: Boolean, required: !1, default: !1 },
     modelValue: { type: Boolean, required: !1, default: !1 },
     label: { type: String, required: !1, default: "" },
-    design: { type: String, required: !1, default: "checkbox" },
+    design: { type: String, required: !1, default: "button" },
     height: { type: null, required: !1 }
   },
   emits: ["update:model-value"],
@@ -20,16 +20,16 @@ const $ = /* @__PURE__ */ y({
     ), a = u(
       "change-checkbox-value-handler",
       void 0
-    ), d = u("checkbox-group-height", void 0), e = f;
+    ), n = u("checkbox-group-height", void 0), e = f;
     k(
       () => e.modelValue,
       (_) => {
         t.value = _;
       }
     );
-    const n = i(null);
-    m({ inputDOMRef: n });
-    const o = l !== void 0, t = o ? i(l.value) : i(e.modelValue), s = r(() => o ? l.value.includes(e.id) : e.modelValue), c = r(() => e.height || d?.value || "thin"), p = v, g = () => {
+    const d = i(null);
+    m({ inputDOMRef: d });
+    const o = l !== void 0, t = o ? i(l.value) : i(e.modelValue), s = r(() => o ? l.value.includes(e.id) : e.modelValue), c = r(() => e.height || n?.value || "thin"), p = v, g = () => {
       if (!e.disabled) {
         if (!o) {
           t.value = !t.value, p("update:model-value", t.value);
@@ -39,14 +39,14 @@ const $ = /* @__PURE__ */ y({
       }
     }, b = r(
       () => x({
-        nmorph: [V[c.value]],
+        nmorph: [S[c.value]],
         "nmorph-checkbox": [
           `${s.value && "checked"}`,
           `${e.disabled && "disabled"}`,
           `${e.design === "button" && "button"}`
         ]
       })
-    ), h = { groupSelectedValue: l, changeValue: a, groupHeight: d, props: e, inputDOMRef: n, hasGroup: o, initialValue: t, checked: s, height: c, emit: p, handleChange: g, modifiers: b };
+    ), h = { groupSelectedValue: l, changeValue: a, groupHeight: n, props: e, inputDOMRef: d, hasGroup: o, initialValue: t, checked: s, height: c, emit: p, handleChange: g, modifiers: b };
     return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
   }
 });

package/dist/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue2.js

@@ -1,38 +1,46 @@
 import './NmorphCheckboxGroup.css';
-import { defineComponent as m, ref as h, computed as d, provide as o } from "vue";
-import { useModifiers as g } from "../../../utils/create-modifiers.js";
-import b from "../nmorph-checkbox/NmorphCheckbox.vue.js";
-const q = /* @__PURE__ */ m({
+import { defineComponent as m, ref as h, watch as g, computed as d, provide as o } from "vue";
+import { useModifiers as b } from "../../../utils/create-modifiers.js";
+import y from "../nmorph-checkbox/NmorphCheckbox.vue.js";
+const _ = /* @__PURE__ */ m({
   __name: "NmorphCheckboxGroup",
   props: {
     modelValue: { type: Array, required: !0, default: () => [] },
     options: { type: Array, required: !1, default: () => [] },
-    design: { type: String, required: !1, default: "checkbox" },
+    design: { type: String, required: !1, default: "button" },
     direction: { type: null, required: !1, default: "row" },
+    height: { type: null, required: !1, default: "thin" },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
-    height: { type: null, required: !1, default: "thin" },
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
   setup(n, { expose: p, emit: s }) {
     p();
-    const r = n, e = h(r.modelValue), u = s, l = (t) => {
-      e.value.includes(t) ? e.value = e.value.filter((f) => f !== t) : e.value.push(t), u("update:model-value", e.value);
+    const r = n, e = h([...r.modelValue]);
+    g(
+      () => r.modelValue,
+      (t) => {
+        e.value = [...t];
+      },
+      { deep: !0 }
+    );
+    const u = s, a = (t) => {
+      e.value = e.value.includes(t) ? e.value.filter((f) => f !== t) : [...e.value, t], u("update:model-value", e.value);
     }, c = d(
-      () => g({
+      () => b({
         "nmorph-checkbox-group": [r.design, r.direction]
       })
-    ), a = d(() => r.height);
-    o("checkbox-group-selected-value", e), o("change-checkbox-value-handler", l), o("checkbox-group-height", a);
-    const i = { props: r, initialValue: e, emit: u, changeHandler: l, modifiers: c, height: a, get NmorphCheckbox() {
-      return b;
+    ), l = d(() => r.height);
+    o("checkbox-group-selected-value", e), o("change-checkbox-value-handler", a), o("checkbox-group-height", l);
+    const i = { props: r, initialValue: e, emit: u, changeHandler: a, modifiers: c, height: l, get NmorphCheckbox() {
+      return y;
     } };
     return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {
-  q as default
+  _ as default
 };

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

@@ -1 +1 @@
-.nmorph-radio{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;align-items:center;justify-content:center}.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{border-radius:var(--border-radius-circular);width:100%;height:100%;position:absolute;top:0;left:0;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__fake span,.nmorph-radio .nmorph-radio__label{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-radio .nmorph-radio__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);position:absolute;top:50%;left:50%;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;align-items:center;justify-content:center;height:var(--size);padding:var(--indentation-03);white-space:nowrap;border-radius:var(--default-border-radius);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--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{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;align-items:center;justify-content:center}.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{border-radius:var(--border-radius-circular);width:100%;height:100%;position:absolute;top:0;left:0;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__fake span,.nmorph-radio .nmorph-radio__label{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-radio .nmorph-radio__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);position:absolute;top:50%;left:50%;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;align-items:center;justify-content:center;height:var(--size);padding:var(--indentation-03);white-space:nowrap;border-radius:var(--default-border-radius);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--extra-thin-component .nmorph-radio__fake span,.nmorph-radio.nmorph--extra-thin-component .nmorph-radio__label{font-size:var(--font-size-extra-small);line-height:var(--line-height-line)}.nmorph-radio.nmorph--extra-thin-component.nmorph-radio--button .nmorph-radio__fake{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--disabled{cursor:not-allowed;opacity:.6}

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

@@ -1,6 +1,6 @@
 import './NmorphRadio.css';
 import t from "./NmorphRadio.vue2.js";
-import { openBlock as o, createElementBlock as r, withModifiers as p, normalizeClass as c, createElementVNode as a, createCommentVNode as n, toDisplayString as s, renderSlot as d } from "vue";
+import { openBlock as o, createElementBlock as a, withModifiers as p, normalizeClass as c, createElementVNode as r, createCommentVNode as i, toDisplayString as d, renderSlot as l } from "vue";
 /* empty css                 */
 import _ from "../../../_virtual/_plugin-vue_export-helper.js";
 const m = {
@@ -22,17 +22,17 @@ const m = {
   key: 1,
   class: "nmorph-radio__fake"
 };
-function N(i, l, R, e, C, D) {
-  return o(), r(
+function N(n, s, R, e, C, D) {
+  return o(), a(
     "label",
     {
       class: c(e.modifiers),
       onClick: p(e.changeHandler, ["prevent"])
     },
     [
-      e.props.styleType === "radio-style" ? (o(), r("div", m, [
-        a("div", h, [
-          a("input", {
+      e.props.styleType === "radio-style" ? (o(), a("div", m, [
+        r("div", h, [
+          r("input", {
             ref: "inputDOMRef",
             type: "radio",
             name: e.props.label,
@@ -41,25 +41,25 @@ function N(i, l, R, e, C, D) {
             tabindex: e.props.tabindex,
             class: "nmorph-native-input"
           }, null, 8, f),
-          l[0] || (l[0] = a(
+          s[0] || (s[0] = r(
             "div",
             { class: "nmorph-radio__fake" },
             null,
             -1
             /* HOISTED */
           )),
-          e.checked ? (o(), r("div", k)) : n("v-if", !0)
+          e.checked ? (o(), a("div", k)) : i("v-if", !0)
         ]),
-        e.props.label ? (o(), r(
+        e.props.label ? (o(), a(
           "span",
           b,
-          s(e.props.label),
+          d(e.props.label),
           1
           /* TEXT */
-        )) : d(i.$slots, "label", { key: 1 })
-      ])) : n("v-if", !0),
-      e.props.styleType === "button" ? (o(), r("div", v, [
-        a("input", {
+        )) : l(n.$slots, "label", { key: 1 })
+      ])) : i("v-if", !0),
+      e.props.styleType === "button" ? (o(), a("div", v, [
+        r("input", {
           ref: "inputDOMRef",
           type: "radio",
           disabled: e.props.disabled,
@@ -69,18 +69,20 @@ function N(i, l, R, e, C, D) {
           tabindex: e.props.tabindex,
           class: "nmorph-native-input"
         }, null, 8, y),
-        e.props.label ? (o(), r("div", u, [
-          a(
+        e.props.label ? (o(), a("div", u, [
+          r(
             "span",
             null,
-            s(e.props.label),
+            d(e.props.label),
             1
             /* TEXT */
           )
-        ])) : (o(), r("div", x, [
-          d(i.$slots, "label")
+        ])) : (o(), a("div", x, [
+          l(n.$slots, "label", {}, () => [
+            l(n.$slots, "default")
+          ])
         ]))
-      ])) : n("v-if", !0)
+      ])) : i("v-if", !0)
     ],
     2
     /* CLASS */

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

@@ -1,12 +1,12 @@
 import './NmorphRadio.css';
-import { defineComponent as h, inject as r, computed as a, ref as m } from "vue";
+import { defineComponent as h, inject as r, computed as l, ref as m } from "vue";
 import { useModifiers as g } from "../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as v } from "../../../types/index.js";
+import { NmorphSelectionControlHeight as v } from "../../../types/index.js";
 const q = /* @__PURE__ */ h({
   __name: "NmorphRadio",
   props: {
     value: { type: String, required: !1, default: "" },
-    styleType: { type: null, required: !1, default: "radio-style" },
+    styleType: { type: null, required: !1, default: "button" },
     checked: { type: Boolean, required: !1, default: !1 },
     disabled: { type: Boolean, required: !1, default: !1 },
     label: { type: String, required: !1, default: "" },
@@ -14,22 +14,22 @@ const q = /* @__PURE__ */ h({
     height: { type: null, required: !1 }
   },
   setup(s, { expose: p }) {
-    const l = r(
+    const o = r(
       "radio-group-selected-value",
       void 0
     ), t = r(
       "change-radio-button-value-handler",
       void 0
-    ), o = r("radio-group-height", void 0), e = s, c = () => {
+    ), a = r("radio-group-height", void 0), e = s, c = () => {
       t && !e.disabled && t(e.value);
-    }, d = a(() => l?.value === e.value || e.checked), i = a(() => e.height || o?.value || "thin"), f = a(
+    }, d = l(() => o?.value === e.value || e.checked), i = l(() => e.height || a?.value || "thin"), f = l(
       () => g({
         nmorph: [v[i.value]],
         "nmorph-radio": [`${e.disabled && "disabled"}`, `${d.value && "checked"}`, e.styleType]
       })
     ), u = m(null);
     p({ inputDOMRef: u });
-    const n = { groupSelectedValue: l, changeValue: t, groupHeight: o, props: e, changeHandler: c, checked: d, height: i, modifiers: f, inputDOMRef: u };
+    const n = { groupSelectedValue: o, changeValue: t, groupHeight: a, props: e, changeHandler: c, checked: d, height: i, modifiers: f, inputDOMRef: u };
     return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });