@nmorph/nmorph-ui-kit 2.2.58 → 3.0.0

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.css

@@ -1 +1 @@
-.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative;display:inline-flex}.nmorph-tooltip .nmorph-tooltip__trigger{display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;z-index:var(--nmorph-tooltip-z-index);width:var(--width);max-width:var(--max-width);height:var(--height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-tooltip-width)}
+.nmorph-tooltip{--nmorph-private-tooltip-max-width: 120px;--nmorph-private-tooltip-width: fit-content;--nmorph-private-tooltip-height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative;display:inline-flex}.nmorph-tooltip .nmorph-tooltip__trigger{display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;z-index:var(--nmorph-private-tooltip-z-index);width:var(--nmorph-private-tooltip-width);max-width:var(--nmorph-private-tooltip-max-width);height:var(--nmorph-private-tooltip-height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-private-tooltip-root-width)}

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue2.js

@@ -22,7 +22,7 @@ const P = 600, $ = /* @__PURE__ */ j({
     height: { type: [Number, String], required: !1, default: void 0 }
   },
   setup(C, { expose: N }) {
-    const e = C, r = o(e.forceShow), g = o(null), T = o(null), b = A(), i = o(null), u = o(null), a = o(null), n = o("mouse"), p = o(!1), m = f(() => !!(e.text || b.content)), O = f(() => r.value && m.value && !e.disabled), { placement: S } = U({
+    const e = C, r = o(e.forceShow), g = o(null), T = o(null), b = A(), n = o(null), a = o(null), u = o(null), i = o("mouse"), p = o(!1), m = f(() => !!(e.text || b.content)), O = f(() => r.value && m.value && !e.disabled), { placement: S } = U({
       initialPlacement: e.position,
       contentDOMElement: g,
       relativeElement: T
@@ -35,11 +35,11 @@ const P = 600, $ = /* @__PURE__ */ j({
         ]
       })
     ), s = () => {
-      i.value && clearTimeout(i.value), i.value = null;
+      n.value && clearTimeout(n.value), n.value = null;
     }, c = () => {
-      u.value && clearTimeout(u.value), u.value = null;
-    }, h = () => {
       a.value && clearTimeout(a.value), a.value = null;
+    }, v = () => {
+      u.value && clearTimeout(u.value), u.value = null;
     }, l = (t) => {
       if (s(), c(), e.disabled || !m.value) {
         r.value = !1;
@@ -52,50 +52,50 @@ const P = 600, $ = /* @__PURE__ */ j({
           l(!0);
           return;
         }
-        s(), i.value = setTimeout(() => l(!0), e.openDelay);
+        s(), n.value = setTimeout(() => l(!0), e.openDelay);
       }
-    }, v = () => {
+    }, h = () => {
       if (!e.forceShow) {
         if (s(), e.closeDelay <= 0) {
           l(!1);
           return;
         }
-        c(), u.value = setTimeout(() => l(!1), e.closeDelay);
+        c(), a.value = setTimeout(() => l(!1), e.closeDelay);
       }
     }, y = () => {
-      r.value ? v() : d();
+      r.value ? h() : d();
     }, M = () => {
-      e.trigger !== "hover" || n.value !== "mouse" || d();
+      e.trigger !== "hover" || i.value !== "mouse" || d();
     }, E = () => {
-      e.trigger !== "hover" || n.value !== "mouse" || v();
+      e.trigger !== "hover" || i.value !== "mouse" || h();
     }, k = (t) => {
       if (p.value) {
         p.value = !1, t.preventDefault();
         return;
       }
       if (e.disabled || e.trigger === "manual") return;
-      if (n.value === "touch" || n.value === "pen") {
+      if (i.value === "touch" || i.value === "pen") {
         if (e.touch !== "click") return;
         y();
         return;
       }
       e.trigger === "click" && y();
     }, z = (t) => {
-      n.value = t.pointerType || "mouse", !(e.disabled || e.touch !== "longpress") && (t.pointerType !== "touch" && t.pointerType !== "pen" || (h(), a.value = setTimeout(() => {
+      i.value = t.pointerType || "mouse", !(e.disabled || e.touch !== "longpress") && (t.pointerType !== "touch" && t.pointerType !== "pen" || (v(), u.value = setTimeout(() => {
         p.value = !0, d();
       }, P)));
     }, I = () => {
-      h();
+      v();
     }, x = f(() => e.forceCoordinate ? "100%" : "auto"), _ = V(
       () => r.value,
       () => e.zIndex
     ), L = f(() => ({
-      "--nmorph-tooltip-width": x.value,
-      "--nmorph-tooltip-z-index": _.value,
+      "--nmorph-private-tooltip-root-width": x.value,
+      "--nmorph-private-tooltip-z-index": _.value,
       ...Z({
-        "--width": e.width,
-        "--max-width": e.maxWidth,
-        "--height": e.height
+        "--nmorph-private-tooltip-width": e.width,
+        "--nmorph-private-tooltip-max-width": e.maxWidth,
+        "--nmorph-private-tooltip-height": e.height
       })
     })), q = o(null);
     F(
@@ -110,9 +110,9 @@ const P = 600, $ = /* @__PURE__ */ j({
       },
       { immediate: !0 }
     ), G(() => {
-      s(), c(), h();
-    }), N({ tooltipBody: q, open: d, close: v, toggle: y });
-    const w = { LONG_PRESS_DELAY_IN_MS: P, props: e, showTooltip: r, tooltipDOMRef: g, slotDOMRef: T, slots: b, openTimer: i, closeTimer: u, longPressTimer: a, lastPointerType: n, suppressNextClick: p, hasTooltipContent: m, shouldRenderTooltip: O, placement: S, modifiers: B, clearOpenTimer: s, clearCloseTimer: c, clearLongPressTimer: h, setTooltipOpen: l, open: d, close: v, toggle: y, handleMouseEnter: M, handleMouseLeave: E, handleClick: k, handlePointerDown: z, handlePointerEnd: I, rootWidth: x, zIndex: _, styles: L, tooltipBody: q };
+      s(), c(), v();
+    }), N({ tooltipBody: q, open: d, close: h, toggle: y });
+    const w = { LONG_PRESS_DELAY_IN_MS: P, props: e, showTooltip: r, tooltipDOMRef: g, slotDOMRef: T, slots: b, openTimer: n, closeTimer: a, longPressTimer: u, lastPointerType: i, suppressNextClick: p, hasTooltipContent: m, shouldRenderTooltip: O, placement: S, modifiers: B, clearOpenTimer: s, clearCloseTimer: c, clearLongPressTimer: v, setTooltipOpen: l, open: d, close: h, toggle: y, handleMouseEnter: M, handleMouseLeave: E, handleClick: k, handlePointerDown: z, handlePointerEnd: I, rootWidth: x, zIndex: _, styles: L, tooltipBody: q };
     return Object.defineProperty(w, "__isScriptSetup", { enumerable: !1, value: !0 }), w;
   }
 });

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css

@@ -1 +1 @@
-.nmorph-autocomplete .nmorph-autocomplete__input-content{position:relative}.nmorph-autocomplete.nmorph-autocomplete--open .nmorph-autocomplete__input-content{z-index:var(--nmorph-autocomplete-input-z-index)}.nmorph-autocomplete__list{padding:var(--indentation-01) 0}.nmorph-autocomplete__list-item{display:flex;align-items:center;box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete__list-item:hover,.nmorph-autocomplete__list-item--focused{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete__list--dynamic .nmorph-autocomplete__list-item{height:auto}.nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}
+.nmorph-autocomplete .nmorph-autocomplete__input-content{position:relative}.nmorph-autocomplete.nmorph-autocomplete--open .nmorph-autocomplete__input-content{z-index:var(--nmorph-private-autocomplete-input-z-index)}.nmorph-autocomplete__list{padding:var(--indentation-01) 0}.nmorph-autocomplete__list-item{display:flex;align-items:center;box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete__list-item:hover,.nmorph-autocomplete__list-item--focused{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--nmorph-private-autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete__list--dynamic .nmorph-autocomplete__list-item{height:auto}.nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left: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
 };