@nmorph/nmorph-ui-kit 2.2.36 → 2.2.38

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,16 @@
 import './NmorphAutocomplete.css';
-import { defineComponent as K, ref as s, computed as t, watch as c, nextTick as Q } from "vue";
+import { defineComponent as K, ref as s, computed as l, 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 { 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({
+import { getNmorphOptionHeight as W, toCssSize as X, resolveDomElement as Y } from "../../../utils/common.js";
+import { NmorphComponentHeight as ee } from "../../../types/index.js";
+import { useFormItemModel as te } from "../nmorph-form/use-form-item-input.js";
+import { useVirtualList as ae } from "../../../hooks/use-virtual-list.js";
+import { useZIndex as le } from "../../../hooks/use-z-index.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";
+import ne from "../../../assets/icons/loader.svg.js";
+const Ie = /* @__PURE__ */ K({
   __name: "NmorphAutocomplete",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -30,92 +32,84 @@ 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(
+  setup(O, { expose: L, emit: V }) {
+    L();
+    const t = O, p = V, { modelValue: m, updateModelValue: v } = te(
+      t,
+      (e) => p("update:model-value", e),
+      ""
+    ), o = s(m.value), A = l(
       () => M({
-        "nmorph-autocomplete": [`${l.value && "open"}`]
+        "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 = 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({
       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, {
+      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 = ae(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}`;
-    c(
-      () => a.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();
+      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}`;
+    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 h = (e) => {
-      p("select", e), o.value = e.value, p("update:model-value", o.value), setTimeout(() => {
-        i.value = !0, l.value = !1;
+    const y = (e) => {
+      p("select", e), o.value = e.value, v(o.value), setTimeout(() => {
+        i.value = !0, a.value = !1;
       });
-    }, R = (e) => {
-      h(e);
-    }, U = () => {
-      i.value = !1, l.value = r.value.length > 0;
+    }, F = (e) => {
+      y(e);
+    }, R = () => {
+      i.value = !1, a.value = r.value.length > 0;
     }, d = s(!1);
     c(o, async (e) => {
-      e !== "" && a.actionCallback && (d.value = !0, await a.actionCallback(), d.value = !1);
+      e !== "" && t.actionCallback && (d.value = !0, await t.actionCallback(), d.value = !1);
     }), c(d, (e) => {
-      e && (l.value = !0);
+      e && (a.value = !0);
     }), c(u, (e) => {
       f.value && n.scrollToIndex(e);
     });
-    const D = () => {
-      r.value.length && (l.value = !0, u.value = (u.value + 1) % r.value.length);
-    }, S = () => {
-      r.value.length && (l.value = !0, u.value = (u.value - 1 + r.value.length) % r.value.length);
+    const S = () => {
+      r.value.length && (a.value = !0, u.value = (u.value + 1) % r.value.length);
+    }, w = () => {
+      r.value.length && (a.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 || !h.value || y(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());
+    }, Z = 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(() => ({
+      "aria-expanded": a.value,
+      "aria-controls": g.value,
+      "aria-activedescendant": a.value ? D(u.value) : void 0
+    })), P = (e, I) => {
+      n.measureElement(I, Y(e));
+    }, C = le(a, () => t.zIndex), G = l(() => ({
       "--nmorph-autocomplete-input-z-index": C.value + 1
-    })), G = t(
+    })), J = l(
       () => M({
-        nmorph: [W[a.height]]
+        nmorph: [ee[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() {
-      return le;
+    ), _ = { 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() {
+      return ue;
     }, get NmorphDropdown() {
-      return ae;
+      return oe;
     }, get NmorphTextInput() {
-      return te;
-    }, get NmorphIconLoaderDots() {
       return re;
+    }, get NmorphIconLoaderDots() {
+      return ne;
     } };
     return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
   }
 });
 export {
-  ve as default
+  Ie as default
 };

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

@@ -1 +1 @@
-.nmorph-checkbox{--size: var(--height);display:inline-flex;align-items:center;vertical-align:middle;cursor:pointer}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;justify-content:center;align-items:center}.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(--font-size-small);line-height:var(--line-height-regular)}.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(--indentation-03);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-checkbox__label,.nmorph-checkbox.nmorph--extra-thin-component .nmorph-checkbox__fake span{font-size:var(--font-size-tiny);line-height:var(--line-height-line)}.nmorph-checkbox.nmorph--extra-thin-component.nmorph-checkbox--button .nmorph-checkbox__fake{padding:var(--indentation-02)}.nmorph-checkbox.nmorph-checkbox--checked .nmorph-checkbox__fake{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-checkbox.nmorph-checkbox--disabled{cursor:not-allowed;opacity:.6}
+.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}