@nmorph/nmorph-ui-kit 2.2.36 → 2.2.37

package/dist/components/feedback/nmorph-alert/NmorphAlert.vue2.js

@@ -28,7 +28,7 @@ const x = /* @__PURE__ */ u({
     i();
     const e = n, r = s, a = l(
       () => y({
-        "nmorph-alert": [e.type, `${e.bordered && "bordered"}`, `${e.fill && "fill"}`]
+        "nmorph-alert": [e.type, e.bordered && "bordered", e.fill && "fill"]
       })
     ), d = l(() => ({
       "--nmorph-alert-close-align": e.closeIconPosition,

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue2.js

@@ -1,6 +1,7 @@
 import './NmorphCallout.css';
-import { defineComponent as l, computed as d } from "vue";
-const s = /* @__PURE__ */ l({
+import { defineComponent as o, computed as l } from "vue";
+import { toCssSize as t } from "../../../utils/common.js";
+const s = /* @__PURE__ */ o({
   __name: "NmorphCallout",
   props: {
     type: { type: String, required: !1, default: "info" },
@@ -14,9 +15,9 @@ const s = /* @__PURE__ */ l({
     titleFontSize: { type: [Number, String], required: !1, default: "var(--font-size-medium)" },
     contentFontSize: { type: [Number, String], required: !1, default: "var(--font-size-extra-small)" }
   },
-  setup(n, { expose: a }) {
+  setup(i, { expose: a }) {
     a();
-    const e = n, t = (r) => typeof r == "number" ? `${r}px` : r, o = d(() => ({
+    const e = i, n = l(() => ({
       "--callout-padding": t(e.padding),
       "--callout-border-radius": t(e.borderRadius),
       "--callout-accent-width": t(e.accentWidth),
@@ -24,8 +25,8 @@ const s = /* @__PURE__ */ l({
       "--callout-title-font-size": t(e.titleFontSize),
       "--callout-content-font-size": t(e.contentFontSize),
       ...e.color !== void 0 && { "--callout-color": e.color }
-    })), i = { props: e, getCssSize: t, styles: o };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+    })), r = { props: e, styles: n };
+    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
   }
 });
 export {

package/dist/components/feedback/nmorph-dialog/NmorphDialog.css

@@ -1 +1 @@
-.nmorph-dialog{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;box-sizing:border-box;width:var(--width);max-width:var(--nmorph-dialog-max-width, calc(100vw - 32px) );max-height:var(--nmorph-dialog-max-height, var(--nmorph-dialog-default-max-height));padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);transform:translate(-50%,-50%);--width: var(--nmorph-dialog-width);--nmorph-dialog-default-max-height: calc(100vh - 32px) }@supports (height: 100dvh){.nmorph-dialog{--nmorph-dialog-default-max-height: calc(100dvh - 32px) }}.nmorph-dialog .nmorph-dialog__header{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--indentation-02);font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{flex:0 0 auto;cursor:pointer}.nmorph-dialog .nmorph-dialog__content{flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--indentation-02);overflow:hidden auto}
+.nmorph-dialog{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;box-sizing:border-box;width:var(--width);max-width:var(--nmorph-dialog-max-width, calc(100vw - 32px) );max-height:var(--nmorph-dialog-max-height, var(--nmorph-dialog-default-max-height));padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);transform:translate(-50%,-50%);--width: var(--nmorph-dialog-width);--nmorph-dialog-default-max-height: calc(100vh - 32px) }@supports (height: 100dvh){.nmorph-dialog{--nmorph-dialog-default-max-height: calc(100dvh - 32px) }}.nmorph-dialog .nmorph-dialog__header{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--indentation-02);font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:32px;height:32px;padding:0;color:inherit;background:transparent;border:0;cursor:pointer}.nmorph-dialog .nmorph-dialog__content{flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--indentation-02);overflow:hidden auto}

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue.js

@@ -1,38 +1,43 @@
 import './NmorphDialog.css';
-import s from "./NmorphDialog.vue2.js";
-import { openBlock as r, createBlock as c, withCtx as a, createElementVNode as e, normalizeStyle as d, normalizeClass as t, renderSlot as i, toDisplayString as m, createElementBlock as _, createVNode as n, createCommentVNode as p } from "vue";
+import c from "./NmorphDialog.vue2.js";
+import { openBlock as e, createBlock as d, withCtx as a, createElementVNode as l, normalizeStyle as m, normalizeClass as _, createElementBlock as i, renderSlot as s, toDisplayString as p, createVNode as n, createCommentVNode as t } from "vue";
 /* empty css                  */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const f = ["aria-label"], g = { class: "nmorph-dialog__header" }, v = { class: "nmorph-dialog__title" }, k = { class: "nmorph-dialog__content" };
-function y(l, N, C, o, O, b) {
-  return r(), c(o.NmorphOverlay, {
+const f = ["aria-label"], g = {
+  key: 0,
+  class: "nmorph-dialog__header"
+}, y = { class: "nmorph-dialog__title" }, b = ["aria-label"], k = { class: "nmorph-dialog__content" };
+function v(r, C, N, o, w, x) {
+  return e(), d(o.NmorphOverlay, {
     show: o.isVisible,
     "z-index": o.props.zIndex,
     "close-on-escape": o.props.closeOnEscape,
     "trap-focus": "",
-    onOnOutsideClick: o.clickOnOverlay,
+    onOnOutsideClick: o.overlayClickHandler,
     onOnEscapeKeydown: o.closeHandler
   }, {
     default: a(() => [
-      e("div", {
-        class: t(o.modifiers),
-        style: d(o.dialogStyle),
+      l("div", {
+        class: _(o.modifiers),
+        style: m(o.dialogStyle),
         role: "dialog",
         "aria-modal": "true",
         "aria-label": o.props.title || void 0
       }, [
-        e("div", g, [
-          i(l.$slots, "header", {}, () => [
-            e(
+        o.hasHeader ? (e(), i("div", g, [
+          s(r.$slots, "header", {}, () => [
+            l(
               "div",
-              v,
-              m(o.props.title),
+              y,
+              p(o.props.title),
               1
               /* TEXT */
             ),
-            o.props.showClose ? (r(), _("div", {
+            o.props.showClose ? (e(), i("button", {
               key: 0,
               class: "nmorph-dialog__close-icon",
+              type: "button",
+              "aria-label": o.props.title ? `Close ${o.props.title}` : "Close dialog",
               onClick: o.closeHandler
             }, [
               n(o.NmorphIcon, null, {
@@ -42,11 +47,11 @@ function y(l, N, C, o, O, b) {
                 _: 1
                 /* STABLE */
               })
-            ])) : p("v-if", !0)
+            ], 8, b)) : t("v-if", !0)
           ])
-        ]),
-        e("div", k, [
-          i(l.$slots, "default")
+        ])) : t("v-if", !0),
+        l("div", k, [
+          s(r.$slots, "default")
         ])
       ], 14, f)
     ]),
@@ -54,7 +59,7 @@ function y(l, N, C, o, O, b) {
     /* FORWARDED */
   }, 8, ["show", "z-index", "close-on-escape"]);
 }
-const S = /* @__PURE__ */ h(s, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-dialog/NmorphDialog.vue"]]);
+const S = /* @__PURE__ */ h(c, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-dialog/NmorphDialog.vue"]]);
 export {
   S as default
 };

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphDialog.css';
-import { defineComponent as c, computed as s, ref as y, watch as h } from "vue";
-import { useModifiers as g } from "../../../utils/create-modifiers.js";
-import v from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import T from "../../../assets/icons/cross.svg.js";
-const C = /* @__PURE__ */ c({
+import { defineComponent as g, useSlots as v, computed as r, ref as O, watch as T } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import C from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import N from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import _ from "../../../assets/icons/cross.svg.js";
+const B = /* @__PURE__ */ g({
   __name: "NmorphDialog",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -20,54 +20,54 @@ const C = /* @__PURE__ */ c({
     closeOnEscape: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["on-close", "update:model-value"],
-  setup(n, { expose: m, emit: d }) {
-    m();
-    const e = n, r = d, p = s(
-      () => g({
+  setup(d, { expose: p, emit: c }) {
+    p();
+    const e = d, a = c, i = v(), f = r(
+      () => q({
         "nmorph-dialog": []
       })
-    ), f = s(() => ({
+    ), y = r(() => ({
       "--nmorph-dialog-width": e.width,
       ...e.maxHeight && { "--nmorph-dialog-max-height": e.maxHeight }
-    })), a = y(e.modelValue);
-    let o = null, l = null;
-    h(
+    })), h = r(() => !!(i.header || e.title || e.showClose)), u = r(() => e.closeOnOverlay && e.closeOnClickModal), s = O(e.modelValue);
+    let t = null, l = null;
+    T(
       () => e.modelValue,
-      (t) => {
-        t ? (l && clearTimeout(l), o = setTimeout(() => {
-          a.value = !0;
-        }, e.openDelay)) : (o && clearTimeout(o), l = setTimeout(() => {
-          a.value = !1;
+      (o) => {
+        o ? (l && clearTimeout(l), t = setTimeout(() => {
+          s.value = !0;
+        }, e.openDelay)) : (t && clearTimeout(t), l = setTimeout(() => {
+          s.value = !1;
         }, e.closeDelay));
       },
       { immediate: !0 }
     );
-    const i = () => {
-      r("on-close"), o && clearTimeout(o);
-      const t = () => {
-        r("update:model-value", !1);
+    const n = () => {
+      a("on-close"), t && clearTimeout(t);
+      const o = () => {
+        a("update:model-value", !1);
       };
-      e.closeDelay <= 0 ? t() : l = setTimeout(t, e.closeDelay);
-    }, u = { props: e, emit: r, modifiers: p, dialogStyle: f, isVisible: a, get openTimeout() {
-      return o;
-    }, set openTimeout(t) {
-      o = t;
+      e.closeDelay <= 0 ? o() : l = setTimeout(o, e.closeDelay);
+    }, m = { props: e, emit: a, slots: i, modifiers: f, dialogStyle: y, hasHeader: h, shouldCloseOnOverlay: u, isVisible: s, get openTimeout() {
+      return t;
+    }, set openTimeout(o) {
+      t = o;
     }, get closeTimeout() {
       return l;
-    }, set closeTimeout(t) {
-      l = t;
-    }, closeHandler: i, clickOnOverlay: () => {
-      e.closeOnOverlay && i();
+    }, set closeTimeout(o) {
+      l = o;
+    }, closeHandler: n, overlayClickHandler: () => {
+      u.value && n();
     }, get NmorphOverlay() {
-      return O;
+      return N;
     }, get NmorphIcon() {
-      return v;
+      return C;
     }, get NmorphIconCross() {
-      return T;
+      return _;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }
 });
 export {
-  C as default
+  B as default
 };

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue2.js

@@ -1,10 +1,11 @@
 import './NmorphDrawer.css';
-import { defineComponent as y, useSlots as h, computed as o } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import _ from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import g from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import N from "../../../assets/icons/cross.svg.js";
-const w = /* @__PURE__ */ y({
+import { defineComponent as m, useSlots as c, computed as o } from "vue";
+import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import { toCssSize as h } from "../../../utils/common.js";
+import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import v from "../../../assets/icons/cross.svg.js";
+const w = /* @__PURE__ */ m({
   __name: "NmorphDrawer",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -20,26 +21,26 @@ const w = /* @__PURE__ */ y({
     contentClass: { type: String, required: !1, default: "" }
   },
   emits: ["on-close", "update:model-value"],
-  setup(p, { expose: u, emit: d }) {
-    u();
-    const e = p, r = d, l = h(), i = o(
-      () => q({
-        "nmorph-drawer": [e.placement, `${e.modelValue && "open"}`]
+  setup(a, { expose: n, emit: u }) {
+    n();
+    const e = a, r = u, t = c(), d = o(
+      () => y({
+        "nmorph-drawer": [e.placement, e.modelValue && "open"]
       })
-    ), s = (t) => typeof t == "number" ? `${t}px` : t, f = o(() => ({
-      "--nmorph-drawer-size": s(e.size)
-    })), a = () => {
+    ), p = o(() => ({
+      "--nmorph-drawer-size": h(e.size)
+    })), l = () => {
       r("on-close"), r("update:model-value", !1);
-    }, m = () => {
-      e.closeOnOverlay && a();
-    }, c = o(() => !!(l.header || e.title || e.showClose)), n = { props: e, emit: r, slots: l, modifiers: i, getCssSize: s, drawerStyle: f, closeHandler: a, overlayClickHandler: m, hasHeader: c, get NmorphIcon() {
-      return g;
+    }, i = () => {
+      e.closeOnOverlay && l();
+    }, f = o(() => !!(t.header || e.title || e.showClose)), s = { props: e, emit: r, slots: t, modifiers: d, drawerStyle: p, closeHandler: l, overlayClickHandler: i, hasHeader: f, get NmorphIcon() {
+      return _;
     }, get NmorphIconCross() {
-      return N;
+      return v;
     }, get NmorphOverlay() {
-      return _;
+      return q;
     } };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {

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

@@ -1,9 +1,10 @@
 import './NmorphTooltip.css';
-import { defineComponent as w, ref as r, computed as n } from "vue";
-import { useModifiers as S } from "../../../utils/create-modifiers.js";
-import { usePlacement as _ } from "../../../hooks/use-placement.js";
-import { useZIndex as g } from "../../../hooks/use-z-index.js";
-const z = /* @__PURE__ */ w({
+import { defineComponent as y, ref as o, computed as r } from "vue";
+import { useModifiers as w } from "../../../utils/create-modifiers.js";
+import { toCssSize as i } from "../../../utils/common.js";
+import { usePlacement as S } from "../../../hooks/use-placement.js";
+import { useZIndex as _ } from "../../../hooks/use-z-index.js";
+const z = /* @__PURE__ */ y({
   __name: "NmorphTooltip",
   props: {
     text: { type: String, required: !1, default: "" },
@@ -15,35 +16,35 @@ const z = /* @__PURE__ */ w({
     maxWidth: { type: [Number, String], required: !1, default: void 0 },
     height: { type: [Number, String], required: !1, default: void 0 }
   },
-  setup(c, { expose: m }) {
-    const e = c, t = r(e.forceShow), l = r(null), d = r(null), { placement: a } = _({
+  setup(p, { expose: m }) {
+    const e = p, t = o(e.forceShow), n = o(null), l = o(null), { placement: d } = S({
       initialPlacement: e.position,
-      contentDOMElement: l,
-      relativeElement: d
-    }), h = n(
-      () => S({
+      contentDOMElement: n,
+      relativeElement: l
+    }), c = r(
+      () => w({
         "nmorph-tooltip": [
-          a.value,
-          `${!!e.forceCoordinate?.x && !!e.forceCoordinate?.y && "force-coords"}`
+          d.value,
+          !!e.forceCoordinate?.x && !!e.forceCoordinate?.y && "force-coords"
         ]
       })
-    ), v = () => {
+    ), h = () => {
       t.value = !0;
-    }, x = () => {
+    }, v = () => {
       e.forceShow || (t.value = !1);
-    }, o = (i) => typeof i == "number" ? `${i}px` : i, s = n(() => e.forceCoordinate ? "100%" : "auto"), u = g(
+    }, a = r(() => e.forceCoordinate ? "100%" : "auto"), u = _(
       () => t.value,
       () => e.zIndex
-    ), y = n(() => ({
-      "--nmorph-tooltip-width": s.value,
+    ), x = r(() => ({
+      "--nmorph-tooltip-width": a.value,
       "--nmorph-tooltip-z-index": u.value,
-      ...e.width !== void 0 && { "--width": o(e.width) },
-      ...e.maxWidth !== void 0 && { "--max-width": o(e.maxWidth) },
-      ...e.height !== void 0 && { "--height": o(e.height) }
-    })), f = r(null);
-    m({ tooltipBody: f });
-    const p = { props: e, showTooltip: t, tooltipDOMRef: l, slotDOMRef: d, placement: a, modifiers: h, handleMouseEnter: v, handleMouseLeave: x, getCssSize: o, rootWidth: s, zIndex: u, styles: y, tooltipBody: f };
-    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+      ...e.width !== void 0 && { "--width": i(e.width) },
+      ...e.maxWidth !== void 0 && { "--max-width": i(e.maxWidth) },
+      ...e.height !== void 0 && { "--height": i(e.height) }
+    })), s = o(null);
+    m({ tooltipBody: s });
+    const f = { props: e, showTooltip: t, tooltipDOMRef: n, slotDOMRef: l, placement: d, modifiers: c, handleMouseEnter: h, handleMouseLeave: v, rootWidth: a, zIndex: u, styles: x, tooltipBody: s };
+    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
   }
 });
 export {

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

@@ -1,14 +1,15 @@
 import './NmorphAutocomplete.css';
-import { defineComponent as K, ref as s, computed as t, watch as c, nextTick as Q } from "vue";
-import { useModifiers as M } from "../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as W } from "../../../types/index.js";
-import { useVirtualList as X } from "../../../hooks/use-virtual-list.js";
+import { defineComponent as G, ref as s, computed as l, watch as c, nextTick as J } from "vue";
+import { useModifiers as C } from "../../../utils/create-modifiers.js";
+import { getNmorphOptionHeight as K, toCssSize as Q, resolveDomElement as W } from "../../../utils/common.js";
+import { NmorphComponentHeight as X } from "../../../types/index.js";
+import { useVirtualList as Y } from "../../../hooks/use-virtual-list.js";
 import { useZIndex as ee } from "../../../hooks/use-z-index.js";
 import te from "../nmorph-text-input/NmorphTextInput.vue.js";
 import ae from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
 import le from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import re from "../../../assets/icons/loader.svg.js";
-const ve = /* @__PURE__ */ K({
+const fe = /* @__PURE__ */ G({
   __name: "NmorphAutocomplete",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -30,81 +31,72 @@ const ve = /* @__PURE__ */ K({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "select"],
-  setup(O, { expose: $, emit: L }) {
-    $();
-    const a = O, o = s(a.modelValue), p = L, T = t(
-      () => M({
-        "nmorph-autocomplete": [`${l.value && "open"}`]
+  setup(_, { expose: O, emit: L }) {
+    O();
+    const t = _, o = s(t.modelValue), d = L, V = l(
+      () => C({
+        "nmorph-autocomplete": [a.value && "open"]
       })
     ), i = s(!1), y = (e) => {
-      i.value = e === "", o.value = e, l.value = !i.value && r.value.length > 0, u.value = 0, p("update:model-value", o.value);
-    }, V = t({
+      i.value = e === "", o.value = e, a.value = !i.value && r.value.length > 0, u.value = 0, d("update:model-value", o.value);
+    }, A = l({
       get: () => o.value,
       set: y
-    }), l = s(!1), A = s(null), b = () => {
-      i.value = !0, l.value = !1;
-    }, r = t(() => a.list.filter((e) => Object.keys(e).some((g) => String(e[g]).toLowerCase().includes(o.value.toLowerCase())))), f = t(() => a.virtual && r.value.length > 0), x = t(() => ({
-      basic: 30,
-      thick: 38,
-      thin: 22
-    })[a.height || "basic"]), I = t(() => a.virtualItemHeight || x.value), H = t(() => a.virtualOverscan), q = t(() => a.virtualDynamicHeight), n = X(r, {
-      enabled: f,
-      itemHeight: I,
-      overscan: H,
-      dynamic: q
-    }), z = t(() => n.virtualItems.value), B = t(() => ({
-      height: `${n.totalHeight.value}px`
-    })), E = t(() => ({
-      transform: `translateY(${n.offsetTop.value}px)`
-    })), N = (e) => typeof e == "number" ? `${e}px` : e, j = t(() => N(a.virtualMaxHeight)), u = s(0), v = t(() => r.value[u.value]), m = t(() => `${a.id || a.name || "nmorph-autocomplete"}-listbox`), w = (e) => `${m.value}-option-${e}`;
+    }), a = s(!1), M = s(null), I = () => {
+      i.value = !0, a.value = !1;
+    }, r = l(() => t.list.filter((e) => Object.keys(e).some((g) => String(e[g]).toLowerCase().includes(o.value.toLowerCase())))), m = l(() => t.virtual && r.value.length > 0), b = l(() => t.virtualItemHeight || K(t.height)), x = l(() => t.virtualOverscan), H = l(() => t.virtualDynamicHeight), n = Y(r, {
+      enabled: m,
+      itemHeight: b,
+      overscan: x,
+      dynamic: H
+    }), T = l(() => n.virtualItems.value), z = n.spacerStyle, B = n.contentStyle, E = l(() => Q(t.virtualMaxHeight)), u = s(0), v = l(() => r.value[u.value]), f = l(() => `${t.id || t.name || "nmorph-autocomplete"}-listbox`), q = (e) => `${f.value}-option-${e}`;
     c(
-      () => a.modelValue,
+      () => t.modelValue,
       (e) => {
         e !== o.value && (o.value = e);
       }
     ), c(r, async (e) => {
-      l.value = !i.value && o.value !== "" && e.length > 0, u.value = 0, await Q(), n.scrollToIndex(0), n.refresh();
+      a.value = !i.value && o.value !== "" && e.length > 0, u.value = 0, await J(), n.scrollToIndex(0), n.refresh();
     });
     const h = (e) => {
-      p("select", e), o.value = e.value, p("update:model-value", o.value), setTimeout(() => {
-        i.value = !0, l.value = !1;
+      d("select", e), o.value = e.value, d("update:model-value", o.value), setTimeout(() => {
+        i.value = !0, a.value = !1;
       });
-    }, R = (e) => {
+    }, $ = (e) => {
       h(e);
-    }, U = () => {
-      i.value = !1, l.value = r.value.length > 0;
-    }, d = s(!1);
+    }, j = () => {
+      i.value = !1, a.value = r.value.length > 0;
+    }, p = s(!1);
     c(o, async (e) => {
-      e !== "" && a.actionCallback && (d.value = !0, await a.actionCallback(), d.value = !1);
-    }), c(d, (e) => {
-      e && (l.value = !0);
+      e !== "" && t.actionCallback && (p.value = !0, await t.actionCallback(), p.value = !1);
+    }), c(p, (e) => {
+      e && (a.value = !0);
     }), c(u, (e) => {
-      f.value && n.scrollToIndex(e);
+      m.value && n.scrollToIndex(e);
     });
-    const D = () => {
-      r.value.length && (l.value = !0, u.value = (u.value + 1) % r.value.length);
+    const N = () => {
+      r.value.length && (a.value = !0, u.value = (u.value + 1) % r.value.length);
+    }, D = () => {
+      r.value.length && (a.value = !0, u.value = (u.value - 1 + r.value.length) % r.value.length);
     }, S = () => {
-      r.value.length && (l.value = !0, u.value = (u.value - 1 + r.value.length) % r.value.length);
-    }, k = () => {
-      !l.value || !v.value || h(v.value);
-    }, Z = (e) => {
-      e.key === "ArrowDown" ? (e.preventDefault(), D()) : e.key === "ArrowUp" ? (e.preventDefault(), S()) : e.key === "Enter" ? (e.preventDefault(), k()) : e.key === "Escape" && (e.preventDefault(), b());
-    }, F = t(() => ({
+      !a.value || !v.value || h(v.value);
+    }, R = (e) => {
+      e.key === "ArrowDown" ? (e.preventDefault(), N()) : e.key === "ArrowUp" ? (e.preventDefault(), D()) : e.key === "Enter" ? (e.preventDefault(), S()) : e.key === "Escape" && (e.preventDefault(), I());
+    }, U = l(() => ({
       role: "combobox",
       "aria-autocomplete": "list",
-      "aria-expanded": l.value,
-      "aria-controls": m.value,
-      "aria-activedescendant": l.value ? w(u.value) : void 0
-    })), P = (e, g) => {
-      const J = e instanceof Element ? e : e?.$el;
-      n.measureElement(g, J);
-    }, C = ee(l, () => a.zIndex), Y = t(() => ({
-      "--nmorph-autocomplete-input-z-index": C.value + 1
-    })), G = t(
-      () => M({
-        nmorph: [W[a.height]]
+      "aria-expanded": a.value,
+      "aria-controls": f.value,
+      "aria-activedescendant": a.value ? q(u.value) : void 0
+    })), Z = (e, g) => {
+      n.measureElement(g, W(e));
+    }, w = ee(a, () => t.zIndex), F = l(() => ({
+      "--nmorph-autocomplete-input-z-index": w.value + 1
+    })), P = l(
+      () => C({
+        nmorph: [X[t.height]]
       })
-    ), _ = { props: a, initialValue: o, emit: p, modifiers: T, userClosed: i, updateValueHandler: y, inputValue: V, open: l, nmorphAutocompleteDOMRef: A, closeHandler: b, filteredList: r, virtualEnabled: f, defaultOptionHeight: x, virtualItemHeight: I, virtualOverscan: H, virtualDynamicHeight: q, virtualList: n, virtualItems: z, virtualSpacerStyle: B, virtualContentStyle: E, getCssSize: N, virtualMaxHeight: j, currentIndex: u, activeItem: v, listboxId: m, getOptionId: w, selectItem: h, clickHandler: R, focusHandler: U, loader: d, arrowDownHandler: D, arrowUpHandler: S, enterHandler: k, keydownHandler: Z, inputAttrs: F, setVirtualItemRef: P, dropdownZIndex: C, styles: Y, optionHeightModifiers: G, get NmorphIcon() {
+    ), k = { props: t, initialValue: o, emit: d, modifiers: V, userClosed: i, updateValueHandler: y, inputValue: A, open: a, nmorphAutocompleteDOMRef: M, closeHandler: I, filteredList: r, virtualEnabled: m, virtualItemHeight: b, virtualOverscan: x, virtualDynamicHeight: H, virtualList: n, virtualItems: T, virtualSpacerStyle: z, virtualContentStyle: B, virtualMaxHeight: E, currentIndex: u, activeItem: v, listboxId: f, getOptionId: q, selectItem: h, clickHandler: $, focusHandler: j, loader: p, arrowDownHandler: N, arrowUpHandler: D, enterHandler: S, keydownHandler: R, inputAttrs: U, setVirtualItemRef: Z, dropdownZIndex: w, styles: F, optionHeightModifiers: P, get NmorphIcon() {
       return le;
     }, get NmorphDropdown() {
       return ae;
@@ -113,9 +105,9 @@ const ve = /* @__PURE__ */ K({
     }, get NmorphIconLoaderDots() {
       return re;
     } };
-    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
+    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
   }
 });
 export {
-  ve as default
+  fe as default
 };

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

@@ -2,7 +2,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 { NmorphSelectionControlHeight as S } from "../../../types/index.js";
-const $ = /* @__PURE__ */ y({
+const j = /* @__PURE__ */ y({
   __name: "NmorphCheckbox",
   props: {
     id: { type: String, required: !1, default: "" },
@@ -41,9 +41,9 @@ const $ = /* @__PURE__ */ y({
       () => x({
         nmorph: [S[c.value]],
         "nmorph-checkbox": [
-          `${s.value && "checked"}`,
-          `${e.disabled && "disabled"}`,
-          `${e.design === "button" && "button"}`
+          s.value && "checked",
+          e.disabled && "disabled",
+          e.design === "button" && "button"
         ]
       })
     ), 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 };
@@ -51,5 +51,5 @@ const $ = /* @__PURE__ */ y({
   }
 });
 export {
-  $ as default
+  j as default
 };

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.vue2.js

@@ -42,7 +42,7 @@ const E = /* @__PURE__ */ R({
     ], y = (e) => {
       const [r, t, n] = p(e);
       return `rgb(${r}, ${t}, ${n})`;
-    }, $ = (e) => {
+    }, v = (e) => {
       const [r, t, n] = p(e).map((P) => P / 255), l = Math.max(r, t, n), u = Math.min(r, t, n), f = (l + u) / 2;
       if (l === u)
         return `hsl(0, 0%, ${Math.round(f * 100)}%)`;
@@ -55,11 +55,11 @@ const E = /* @__PURE__ */ R({
     }), q({ inputDOMRef: c });
     const F = C(
       () => H({
-        nmorph: [B[o.height], `${b.value && "focused"}`],
-        "nmorph-color-picker": [`${o.disabled && "disabled"}`, o.displayFormat]
+        nmorph: [B[o.height], b.value && "focused"],
+        "nmorph-color-picker": [o.disabled && "disabled", o.displayFormat]
       })
-    ), w = C(() => o.displayFormat === "rgb" ? y(a.value) : o.displayFormat === "hsl" ? $(a.value) : a.value.toUpperCase()), v = { props: o, emit: g, id: V, name: S, tabindex: x, normalizeColor: s, inputDOMRef: c, resolveAccentColor: m, currentValue: a, focused: b, handleInput: I, hexToRgb: p, formatRgb: y, formatHsl: $, modifiers: F, displayValue: w };
-    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+    ), w = C(() => o.displayFormat === "rgb" ? y(a.value) : o.displayFormat === "hsl" ? v(a.value) : a.value.toUpperCase()), $ = { props: o, emit: g, id: V, name: S, tabindex: x, normalizeColor: s, inputDOMRef: c, resolveAccentColor: m, currentValue: a, focused: b, handleInput: I, hexToRgb: p, formatRgb: y, formatHsl: v, modifiers: F, displayValue: w };
+    return Object.defineProperty($, "__isScriptSetup", { enumerable: !1, value: !0 }), $;
   }
 });
 export {