@nmorph/nmorph-ui-kit 2.2.59 → 3.0.0

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

@@ -1,42 +1,42 @@
 import './NmorphAutocomplete.css';
 import v from "./NmorphAutocomplete.vue2.js";
-import { openBlock as l, createElementBlock as t, normalizeStyle as n, normalizeClass as a, createElementVNode as d, createVNode as m, createBlock as y, withCtx as p, renderSlot as s, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as x } from "vue";
+import { openBlock as l, createElementBlock as t, normalizeStyle as i, normalizeClass as a, createElementVNode as d, createVNode as m, createBlock as y, withCtx as p, renderSlot as s, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as k } from "vue";
 /* empty css                        */
-import k from "../../../_virtual/_plugin-vue_export-helper.js";
-const g = { class: "nmorph-autocomplete__input-content" }, b = {
+import x from "../../../_virtual/_plugin-vue_export-helper.js";
+const b = { class: "nmorph-autocomplete__input-content" }, H = {
   ref: "nmorphAutocompleteDOMRef",
   class: "nmorph-autocomplete__input"
-}, H = {
+}, g = {
   key: 0,
   class: "nmorph-autocomplete__loading"
 }, N = ["id"], V = ["id", "aria-selected", "onClick"], C = ["id"], I = ["id", "aria-selected", "onClick"];
-function O(c, i, w, e, D, S) {
+function O(c, n, w, e, D, S) {
   return l(), t(
     "div",
     {
       class: a(e.modifiers),
-      style: n(e.styles)
+      style: i(e.styles)
     },
     [
-      d("div", g, [
+      d("div", b, [
         d(
           "div",
-          b,
+          H,
           [
             m(e.NmorphTextInput, {
               id: e.props.id,
               modelValue: e.inputValue,
-              "onUpdate:modelValue": i[0] || (i[0] = (o) => e.inputValue = o),
+              "onUpdate:modelValue": n[0] || (n[0] = (o) => e.inputValue = o),
               name: e.props.name,
               autocomplete: e.props.autocomplete,
-              height: e.props.height,
+              thickness: e.props.thickness,
               disabled: e.props.disabled,
               placeholder: e.props.placeholder,
               clearable: e.props.clearable,
               "input-attrs": e.inputAttrs,
               onFocus: e.focusHandler,
               onKeydown: e.keydownHandler
-            }, null, 8, ["id", "modelValue", "name", "autocomplete", "height", "disabled", "placeholder", "clearable", "input-attrs"])
+            }, null, 8, ["id", "modelValue", "name", "autocomplete", "thickness", "disabled", "placeholder", "clearable", "input-attrs"])
           ],
           512
           /* NEED_PATCH */
@@ -55,7 +55,7 @@ function O(c, i, w, e, D, S) {
         onOnEscapeKeydown: e.closeHandler
       }, {
         default: p(() => [
-          e.loader ? (l(), t("div", H, [
+          e.loader ? (l(), t("div", g, [
             s(c.$slots, "loader", {}, () => [
               m(e.NmorphIcon, { size: "large" }, {
                 default: p(() => [
@@ -70,22 +70,25 @@ function O(c, i, w, e, D, S) {
             id: e.listboxId,
             ref: e.virtualList.containerRef,
             class: a(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
-            style: n({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
+            style: i({
+              "--nmorph-private-autocomplete-virtual-item-height": `${e.virtualItemHeight}px`,
+              maxHeight: e.virtualMaxHeight
+            }),
             role: "listbox",
-            onScroll: i[1] || (i[1] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
+            onScroll: n[1] || (n[1] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
           }, [
             d(
               "div",
               {
                 class: "nmorph-autocomplete__virtual-spacer",
-                style: n(e.virtualSpacerStyle)
+                style: i(e.virtualSpacerStyle)
               },
               [
                 d(
                   "div",
                   {
                     class: "nmorph-autocomplete__virtual-content",
-                    style: n(e.virtualContentStyle)
+                    style: i(e.virtualContentStyle)
                   },
                   [
                     (l(!0), t(
@@ -157,13 +160,13 @@ function O(c, i, w, e, D, S) {
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["open", "relative-element", "z-index", "aria-label"])) : x("v-if", !0)
+      }, 8, ["open", "relative-element", "z-index", "aria-label"])) : k("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const R = /* @__PURE__ */ k(v, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
+const R = /* @__PURE__ */ x(v, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
 export {
   R as default
 };

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

@@ -5,7 +5,7 @@ import { getNmorphOptionHeight as W, toCssSize as X, resolveDomElement as Y } fr
 import { useZIndex as ee } from "../../../hooks/use-z-index.js";
 import { useVirtualList as te } from "../../../hooks/use-virtual-list.js";
 import { useFormItemModel as ae } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentHeight as le } from "../../../types/common.types.js";
+import { NmorphComponentThickness as le } from "../../../types/common.types.js";
 import re from "../nmorph-text-input/NmorphTextInput.vue.js";
 import oe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
 import ue from "../../basic/nmorph-icon/NmorphIcon.vue.js";
@@ -27,45 +27,45 @@ const Ie = /* @__PURE__ */ K({
     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", "select"],
-  setup(O, { expose: L, emit: V }) {
+  setup(O, { expose: L, emit: T }) {
     L();
-    const t = O, p = V, { modelValue: m, updateModelValue: v } = ae(
+    const t = O, p = T, { modelValue: m, updateModelValue: v } = ae(
       t,
       (e) => p("update:model-value", e),
       ""
-    ), o = s(m.value), A = l(
+    ), o = s(m.value), V = l(
       () => M({
         "nmorph-autocomplete": [a.value && "open"]
       })
     ), i = s(!1), b = (e) => {
       i.value = e === "", o.value = e, a.value = !i.value && r.value.length > 0, u.value = 0, v(o.value);
-    }, T = l({
+    }, A = l({
       get: () => o.value,
       set: b
     }), a = s(!1), z = s(null), x = () => {
       i.value = !0, a.value = !1;
-    }, r = l(() => t.list.filter((e) => Object.keys(e).some((I) => String(e[I]).toLowerCase().includes(o.value.toLowerCase())))), f = l(() => t.virtual && r.value.length > 0), H = l(() => t.virtualItemHeight || W(t.height)), q = l(() => t.virtualOverscan), N = l(() => t.virtualDynamicHeight), n = te(r, {
+    }, r = l(() => t.list.filter((e) => Object.keys(e).some((I) => String(e[I]).toLowerCase().includes(o.value.toLowerCase())))), f = l(() => t.virtual && r.value.length > 0), H = l(() => t.virtualItemHeight || W(t.thickness)), q = l(() => t.virtualOverscan), N = l(() => t.virtualDynamicHeight), n = te(r, {
       enabled: f,
       itemHeight: H,
       overscan: q,
       dynamic: N
-    }), B = l(() => n.virtualItems.value), E = n.spacerStyle, $ = n.contentStyle, j = l(() => X(t.virtualMaxHeight)), u = s(0), h = l(() => r.value[u.value]), g = l(() => `${t.id || t.name || "nmorph-autocomplete"}-listbox`), D = (e) => `${g.value}-option-${e}`;
+    }), B = l(() => n.virtualItems.value), E = n.spacerStyle, $ = n.contentStyle, j = l(() => X(t.virtualMaxHeight)), u = s(0), h = l(() => r.value[u.value]), y = l(() => `${t.id || t.name || "nmorph-autocomplete"}-listbox`), k = (e) => `${y.value}-option-${e}`;
     c(m, (e) => {
       e !== o.value && (o.value = e);
     }), c(r, async (e) => {
       a.value = !i.value && o.value !== "" && e.length > 0, u.value = 0, await Q(), n.scrollToIndex(0), n.refresh();
     });
-    const y = (e) => {
+    const g = (e) => {
       p("select", e), o.value = e.value, v(o.value), setTimeout(() => {
         i.value = !0, a.value = !1;
       });
     }, F = (e) => {
-      y(e);
+      g(e);
     }, R = () => {
       i.value = !1, a.value = r.value.length > 0;
     }, d = s(!1);
@@ -76,29 +76,29 @@ const Ie = /* @__PURE__ */ K({
     }), c(u, (e) => {
       f.value && n.scrollToIndex(e);
     });
-    const S = () => {
+    const D = () => {
       r.value.length && (a.value = !0, u.value = (u.value + 1) % r.value.length);
-    }, w = () => {
+    }, S = () => {
       r.value.length && (a.value = !0, u.value = (u.value - 1 + r.value.length) % r.value.length);
-    }, k = () => {
-      !a.value || !h.value || y(h.value);
+    }, w = () => {
+      !a.value || !h.value || g(h.value);
     }, U = (e) => {
-      e.key === "ArrowDown" ? (e.preventDefault(), S()) : e.key === "ArrowUp" ? (e.preventDefault(), w()) : e.key === "Enter" ? (e.preventDefault(), k()) : e.key === "Escape" && (e.preventDefault(), x());
+      e.key === "ArrowDown" ? (e.preventDefault(), D()) : e.key === "ArrowUp" ? (e.preventDefault(), S()) : e.key === "Enter" ? (e.preventDefault(), w()) : e.key === "Escape" && (e.preventDefault(), x());
     }, Z = l(() => ({
       role: "combobox",
       "aria-autocomplete": "list",
       "aria-expanded": a.value,
-      "aria-controls": g.value,
-      "aria-activedescendant": a.value ? D(u.value) : void 0
+      "aria-controls": y.value,
+      "aria-activedescendant": a.value ? k(u.value) : void 0
     })), P = (e, I) => {
       n.measureElement(I, Y(e));
     }, C = ee(a, () => t.zIndex), G = l(() => ({
-      "--nmorph-autocomplete-input-z-index": C.value + 1
+      "--nmorph-private-autocomplete-input-z-index": C.value + 1
     })), J = l(
       () => M({
-        nmorph: [le[t.height]]
+        nmorph: [le[t.thickness]]
       })
-    ), _ = { props: t, emit: p, modelValue: m, updateModelValue: v, initialValue: o, modifiers: A, userClosed: i, updateValueHandler: b, inputValue: T, open: a, nmorphAutocompleteDOMRef: z, closeHandler: x, filteredList: r, virtualEnabled: f, virtualItemHeight: H, virtualOverscan: q, virtualDynamicHeight: N, virtualList: n, virtualItems: B, virtualSpacerStyle: E, virtualContentStyle: $, virtualMaxHeight: j, currentIndex: u, activeItem: h, listboxId: g, getOptionId: D, selectItem: y, clickHandler: F, focusHandler: R, loader: d, arrowDownHandler: S, arrowUpHandler: w, enterHandler: k, keydownHandler: U, inputAttrs: Z, setVirtualItemRef: P, dropdownZIndex: C, styles: G, optionHeightModifiers: J, get NmorphIcon() {
+    ), _ = { props: t, emit: p, modelValue: m, updateModelValue: v, initialValue: o, modifiers: V, userClosed: i, updateValueHandler: b, inputValue: A, open: a, nmorphAutocompleteDOMRef: z, closeHandler: x, filteredList: r, virtualEnabled: f, virtualItemHeight: H, virtualOverscan: q, virtualDynamicHeight: N, virtualList: n, virtualItems: B, virtualSpacerStyle: E, virtualContentStyle: $, virtualMaxHeight: j, currentIndex: u, activeItem: h, listboxId: y, getOptionId: k, selectItem: g, clickHandler: F, focusHandler: R, loader: d, arrowDownHandler: D, arrowUpHandler: S, enterHandler: w, keydownHandler: U, inputAttrs: Z, setVirtualItemRef: P, dropdownZIndex: C, styles: G, optionHeightModifiers: J, get NmorphIcon() {
       return ue;
     }, get NmorphDropdown() {
       return oe;

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

@@ -1 +1 @@
-.nmorph-checkbox{--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;vertical-align:middle;cursor:pointer}.nmorph-checkbox.nmorph{height:auto;min-height:var(--size)}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;justify-content:center;align-items:center;min-height:var(--size)}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.nmorph-checkbox input:focus-visible{outline:2px solid var(--nmorph-accent-color);opacity:1;scale:.95}.nmorph-checkbox .nmorph-checkbox__fake{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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(--nmorph-selection-control-font-size);line-height:var(--nmorph-selection-control-line-height)}.nmorph-checkbox .nmorph-checkbox__fake-checked{position:absolute;top:50%;left:50%;width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);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;justify-content:center;align-items:center;width:auto;min-width:var(--size);height:var(--size);padding:var(--nmorph-selection-control-inline-padding);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-checkbox.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-checkbox.nmorph--thin-component{--nmorph-selection-control-font-size: var(--font-size-extra-small)}.nmorph-checkbox.nmorph--basic-component{--nmorph-selection-control-font-size: var(--font-size-small)}.nmorph-checkbox.nmorph--thick-component{--nmorph-selection-control-font-size: var(--font-size-base)}.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{--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;vertical-align:middle;cursor:pointer}.nmorph-checkbox.nmorph{height:auto;min-height:var(--nmorph-private-selection-control-size)}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;justify-content:center;align-items:center;min-height:var(--nmorph-private-selection-control-size)}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--nmorph-private-selection-control-size);height:var(--nmorph-private-selection-control-size)}.nmorph-checkbox input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.nmorph-checkbox input:focus-visible{outline:2px solid var(--nmorph-accent-color);opacity:1;scale:.95}.nmorph-checkbox .nmorph-checkbox__fake{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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{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-checkbox .nmorph-checkbox__fake-checked{position:absolute;top:50%;left:50%;width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);transform:translate(-50%,-50%)}.nmorph-checkbox .nmorph-checkbox__label{margin-left:var(--indentation-02);line-height:1}.nmorph-checkbox .nmorph-checkbox__fake span{white-space:nowrap}.nmorph-checkbox.nmorph-checkbox--nmorph .nmorph-checkbox__fake{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:auto;min-width:var(--nmorph-private-selection-control-size);height:var(--nmorph-private-selection-control-size);padding:0 var(--nmorph-private-selection-control-inline-padding);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-checkbox.nmorph--extra-thin-component{--nmorph-private-selection-control-inline-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--plain .nmorph-checkbox__fake{border:var(--nmorph-plain-border);box-shadow:none}.nmorph-checkbox.nmorph-checkbox--disabled{cursor:not-allowed;opacity:.6}

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

@@ -1,24 +1,24 @@
 import './NmorphCheckbox.css';
-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";
+import i from "./NmorphCheckbox.vue2.js";
+import { openBlock as o, createElementBlock as c, normalizeClass as h, 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 _ = {
+const p = {
   key: 0,
   class: "nmorph-checkbox__content"
-}, p = { class: "nmorph-checkbox__input-wrapper" }, k = ["disabled", "checked"], b = {
+}, _ = { class: "nmorph-checkbox__input-wrapper" }, k = ["disabled", "checked"], m = {
   key: 0,
   class: "nmorph-checkbox__fake-checked"
-}, m = {
+}, b = {
   key: 0,
   class: "nmorph-checkbox__label"
 }, f = {
   key: 1,
   class: "nmorph-checkbox__label"
-}, x = {
+}, v = {
   key: 1,
   class: "nmorph-checkbox__content"
-}, v = ["disabled", "checked"], y = {
+}, x = ["disabled", "checked"], y = {
   key: 0,
   class: "nmorph-checkbox__fake"
 }, u = {
@@ -29,11 +29,11 @@ function C(s, d, g, e, N, D) {
   return o(), c(
     "label",
     {
-      class: i(e.modifiers)
+      class: h(e.modifiers)
     },
     [
-      e.props.design === "checkbox" ? (o(), c("div", _, [
-        n("div", p, [
+      e.props.design === "plain" ? (o(), c("div", p, [
+        n("div", _, [
           n("input", {
             ref: "inputDOMRef",
             type: "checkbox",
@@ -49,9 +49,9 @@ function C(s, d, g, e, N, D) {
             -1
             /* CACHED */
           )),
-          e.checked ? (o(), c("div", b)) : l("v-if", !0)
+          e.checked ? (o(), c("div", m)) : l("v-if", !0)
         ]),
-        e.props.label ? (o(), c("div", m, [
+        e.props.label ? (o(), c("div", b, [
           n(
             "span",
             null,
@@ -63,14 +63,14 @@ function C(s, d, g, e, N, D) {
           r(s.$slots, "default")
         ]))
       ])) : l("v-if", !0),
-      e.props.design === "button" ? (o(), c("div", x, [
+      e.props.design === "nmorph" ? (o(), c("div", v, [
         n("input", {
           ref: "inputDOMRef",
           type: "checkbox",
           disabled: e.props.disabled,
           checked: e.checked,
           onChange: e.handleChange
-        }, null, 40, v),
+        }, null, 40, x),
         e.props.label ? (o(), c("div", y, [
           n(
             "span",
@@ -90,7 +90,7 @@ function C(s, d, g, e, N, D) {
     /* CLASS */
   );
 }
-const R = /* @__PURE__ */ t(h, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox/NmorphCheckbox.vue"]]);
+const R = /* @__PURE__ */ t(i, [["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,57 +1,56 @@
 import './NmorphCheckbox.css';
-import { defineComponent as x, inject as i, watch as S, ref as n, computed as d } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import { useFormItemModel as V } from "../nmorph-form/use-form-item-input.js";
-import { NmorphSelectionControlHeight as C } from "../../../types/common.types.js";
-const H = /* @__PURE__ */ x({
+import { defineComponent as S, inject as d, watch as V, ref as c, computed as l } from "vue";
+import { useModifiers as C } from "../../../utils/create-modifiers.js";
+import { useFormItemModel as M } from "../nmorph-form/use-form-item-input.js";
+import { NmorphSelectionControlThickness as T } from "../../../types/common.types.js";
+const O = /* @__PURE__ */ S({
   __name: "NmorphCheckbox",
   props: {
     id: { type: String, required: !1, default: "" },
     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: "button" },
-    height: { type: null, required: !1 }
+    design: { type: String, required: !1, default: "nmorph" },
+    thickness: { type: null, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(g, { expose: b, emit: _ }) {
-    const o = i(
+  setup(g, { expose: _, emit: x }) {
+    const o = d(
       "checkbox-group-selected-value",
       void 0
-    ), u = i(
+    ), n = d(
       "change-checkbox-value-handler",
       void 0
-    ), s = i("checkbox-group-height", void 0), e = g, c = _, { modelValue: l, updateModelValue: p } = V(
+    ), p = d(
+      "checkbox-group-thickness",
+      void 0
+    ), e = g, f = x, { modelValue: a, updateModelValue: m } = M(
       e,
-      (r) => c("update:model-value", r),
+      (i) => f("update:model-value", i),
       !1
     );
-    S(l, (r) => {
-      t.value = r;
+    V(a, (i) => {
+      t.value = i;
     });
-    const f = n(null);
-    b({ inputDOMRef: f });
-    const a = o !== void 0, t = a ? n(o.value) : n(l.value), h = d(() => a ? o.value.includes(e.id) : l.value), m = d(() => e.height || s?.value || "thin"), y = () => {
+    const h = c(null);
+    _({ inputDOMRef: h });
+    const s = o !== void 0, t = s ? c(o.value) : c(a.value), v = l(() => s ? o.value.includes(e.id) : a.value), u = l(() => e.design || "nmorph"), r = l(() => e.thickness || p?.value || "basic"), b = l(() => u.value !== "plain" && r.value === "extra-thin" ? "basic" : r.value), q = () => {
       if (!e.disabled) {
-        if (!a) {
-          t.value = !t.value, p(t.value);
+        if (!s) {
+          t.value = !t.value, m(t.value);
           return;
         }
-        u && Array.isArray(t.value) && u(e.id, t.value);
+        n && n(e.id);
       }
-    }, k = d(
-      () => q({
-        nmorph: [C[m.value]],
-        "nmorph-checkbox": [
-          h.value && "checked",
-          e.disabled && "disabled",
-          e.design === "button" && "button"
-        ]
+    }, y = l(
+      () => C({
+        nmorph: [T[b.value]],
+        "nmorph-checkbox": [v.value && "checked", e.disabled && "disabled", u.value]
       })
-    ), v = { groupSelectedValue: o, changeValue: u, groupHeight: s, props: e, emit: c, modelValue: l, updateModelValue: p, inputDOMRef: f, hasGroup: a, initialValue: t, checked: h, height: m, handleChange: y, modifiers: k };
-    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+    ), k = { groupSelectedValue: o, changeValue: n, groupThickness: p, props: e, emit: f, modelValue: a, updateModelValue: m, inputDOMRef: h, hasGroup: s, initialValue: t, checked: v, resolvedDesign: u, requestedThickness: r, thickness: b, handleChange: q, modifiers: y };
+    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
   }
 });
 export {
-  H as default
+  O as default
 };

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

@@ -1,34 +1,33 @@
 import './NmorphCheckboxGroup.css';
-import t from "./NmorphCheckboxGroup.vue2.js";
-import { openBlock as r, createElementBlock as l, normalizeClass as a, createElementVNode as d, Fragment as n, renderList as m, createBlock as h, renderSlot as p } from "vue";
+import d from "./NmorphCheckboxGroup.vue2.js";
+import { openBlock as o, createElementBlock as s, normalizeClass as t, createElementVNode as c, Fragment as a, renderList as m, createBlock as h, renderSlot as p } from "vue";
 /* empty css                         */
 import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-const b = { class: "nmorph-checkbox-group__wrapper" }, u = { class: "nmorph-checkbox-group__content" };
-function f(s, g, c, e, k, x) {
-  return r(), l(
+const b = { class: "nmorph-checkbox-group__wrapper" }, k = { class: "nmorph-checkbox-group__content" };
+function f(n, u, i, e, g, x) {
+  return o(), s(
     "div",
     {
-      class: a(e.modifiers)
+      class: t(e.modifiers)
     },
     [
-      d("div", b, [
-        d("div", u, [
-          (r(!0), l(
-            n,
+      c("div", b, [
+        c("div", k, [
+          (o(!0), s(
+            a,
             null,
-            m(c.options, (o, i) => (r(), h(e.NmorphCheckbox, {
-              id: o.id,
-              key: i,
-              label: o.label,
-              "model-value": o.modelValue,
-              disabled: o.disabled || e.props.disabled,
-              design: e.props.design,
-              height: o.height || e.props.height
-            }, null, 8, ["id", "label", "model-value", "disabled", "design", "height"]))),
+            m(i.options, (r, l) => (o(), h(e.NmorphCheckbox, {
+              id: r.id,
+              key: l,
+              label: r.label,
+              disabled: r.disabled || e.props.disabled,
+              design: r.design || e.props.design,
+              thickness: r.thickness || e.thickness
+            }, null, 8, ["id", "label", "disabled", "design", "thickness"]))),
             128
             /* KEYED_FRAGMENT */
           )),
-          p(s.$slots, "default")
+          p(n.$slots, "default")
         ])
       ])
     ],
@@ -36,7 +35,7 @@ function f(s, g, c, e, k, x) {
     /* CLASS */
   );
 }
-const y = /* @__PURE__ */ _(t, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue"]]);
+const y = /* @__PURE__ */ _(d, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue"]]);
 export {
   y as default
 };

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

@@ -1,47 +1,47 @@
 import './NmorphCheckboxGroup.css';
-import { defineComponent as g, ref as b, watch as v, computed as p, provide as u } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { useFormItemModel as q } from "../nmorph-form/use-form-item-input.js";
-import x from "../nmorph-checkbox/NmorphCheckbox.vue.js";
-const N = /* @__PURE__ */ g({
+import { defineComponent as b, ref as v, watch as y, computed as d, provide as a } from "vue";
+import { useModifiers as g } from "../../../utils/create-modifiers.js";
+import { useFormItemModel as k } from "../nmorph-form/use-form-item-input.js";
+import q from "../nmorph-checkbox/NmorphCheckbox.vue.js";
+const N = /* @__PURE__ */ b({
   __name: "NmorphCheckboxGroup",
   props: {
-    modelValue: { type: Array, required: !1, default: () => [] },
-    options: { type: Array, required: !1, default: () => [] },
-    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 },
     disabled: { type: Boolean, required: !1, default: !1 },
-    tabindex: { type: Number, required: !1 }
+    tabindex: { type: Number, required: !1 },
+    modelValue: { type: Array, required: !1, default: () => [] },
+    options: { type: Array, required: !1, default: () => [] },
+    direction: { type: null, required: !1, default: "row" },
+    design: { type: String, required: !1, default: "nmorph" },
+    thickness: { type: null, required: !1, default: "basic" }
   },
   emits: ["update:model-value"],
-  setup(s, { expose: c, emit: f }) {
+  setup(p, { expose: c, emit: m }) {
     c();
-    const r = s, a = f, { modelValue: o, updateModelValue: l } = q(
-      r,
-      (t) => a("update:model-value", t),
+    const t = p, u = m, { modelValue: o, updateModelValue: l } = k(
+      t,
+      (r) => u("update:model-value", r),
       []
-    ), e = b([...o.value]);
-    v(
+    ), e = v([...o.value]);
+    y(
       o,
-      (t) => {
-        e.value = [...t];
+      (r) => {
+        e.value = [...r];
       },
       { deep: !0 }
     );
-    const i = (t) => {
-      e.value = e.value.includes(t) ? e.value.filter((h) => h !== t) : [...e.value, t], l(e.value);
-    }, m = p(
-      () => y({
-        "nmorph-checkbox-group": [r.design, r.direction]
+    const i = (r) => {
+      e.value = e.value.includes(r) ? e.value.filter((h) => h !== r) : [...e.value, r], l(e.value);
+    }, f = d(
+      () => g({
+        "nmorph-checkbox-group": [t.design, t.direction]
       })
-    ), d = p(() => r.height);
-    u("checkbox-group-selected-value", e), u("change-checkbox-value-handler", i), u("checkbox-group-height", d);
-    const n = { props: r, emit: a, modelValue: o, updateModelValue: l, initialValue: e, changeHandler: i, modifiers: m, height: d, get NmorphCheckbox() {
-      return x;
+    ), s = d(() => t.thickness);
+    a("checkbox-group-selected-value", e), a("change-checkbox-value-handler", i), a("checkbox-group-thickness", s);
+    const n = { props: t, emit: u, modelValue: o, updateModelValue: l, initialValue: e, changeHandler: i, modifiers: f, thickness: s, get NmorphCheckbox() {
+      return q;
     } };
     return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.css

@@ -1 +1 @@
-.nmorph-color-picker{display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%}.nmorph-color-picker .nmorph-color-picker__content{position:relative;display:inline-flex;gap:var(--indentation-03);align-items:center;width:fit-content;max-width:100%;height:var(--height);padding:0 var(--default-indentation-input);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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-color-picker .nmorph-color-picker__native{position:absolute;width:100%;height:100%;cursor:pointer;opacity:0;inset:0}.nmorph-color-picker .nmorph-color-picker__swatch{flex:0 0 auto;width:calc(var(--height) - var(--indentation-03));height:calc(var(--height) - var(--indentation-03));border-radius:var(--default-border-radius);box-shadow:inset 0 0 0 1px #ffffff40,0 0 0 1px #0000001f}.nmorph-color-picker .nmorph-color-picker__value{flex:0 0 7ch;width:7ch;min-width:7ch;overflow:hidden;font-weight:400;font-size:var(--font-size-small);font-family:monospace;line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis;user-select:none;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.nmorph-color-picker.nmorph-color-picker--rgb .nmorph-color-picker__value{flex-basis:18ch;width:18ch;min-width:18ch}.nmorph-color-picker.nmorph-color-picker--hsl .nmorph-color-picker__value{flex-basis:20ch;width:20ch;min-width:20ch}.nmorph-color-picker.nmorph--thin-component .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-color-picker.nmorph--thick-component .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-base);line-height:var(--line-height-regular)}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__content{background:var(--nmorph-accent-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-color-picker.nmorph--focused .nmorph-color-picker__value{color:var(--nmorph-focus-text-color)}.nmorph-color-picker.nmorph-color-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-color-picker.nmorph-color-picker--disabled .nmorph-color-picker__content{pointer-events:none}
+.nmorph-color-picker{display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%}.nmorph-color-picker .nmorph-color-picker__content{position:relative;display:inline-flex;gap:var(--indentation-03);align-items:center;width:fit-content;max-width:100%;height:var(--nmorph-private-control-height);padding:0 var(--default-indentation-input);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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-color-picker .nmorph-color-picker__native{position:absolute;width:100%;height:100%;cursor:pointer;opacity:0;inset:0}.nmorph-color-picker .nmorph-color-picker__swatch{flex:0 0 auto;width:calc(var(--nmorph-private-control-height) - var(--indentation-03));height:calc(var(--nmorph-private-control-height) - var(--indentation-03));border-radius:var(--default-border-radius);box-shadow:inset 0 0 0 1px #ffffff40,0 0 0 1px #0000001f}.nmorph-color-picker .nmorph-color-picker__value{flex:0 0 7ch;width:7ch;min-width:7ch;overflow:hidden;font-weight:var(--nmorph-private-control-font-weight);font-size:var(--nmorph-private-control-font-size);font-family:var(--font-family-mono);line-height:var(--nmorph-private-control-line-height);white-space:nowrap;text-overflow:ellipsis;transform:translateY(var(--nmorph-private-control-text-offset-y));user-select:none;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.nmorph-color-picker.nmorph-color-picker--rgb .nmorph-color-picker__value{flex-basis:18ch;width:18ch;min-width:18ch}.nmorph-color-picker.nmorph-color-picker--hsl .nmorph-color-picker__value{flex-basis:20ch;width:20ch;min-width:20ch}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__content{background:var(--nmorph-accent-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-color-picker.nmorph--focused .nmorph-color-picker__value{color:var(--nmorph-focus-text-color)}.nmorph-color-picker.nmorph-color-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-color-picker.nmorph-color-picker--disabled .nmorph-color-picker__content{pointer-events:none}