@nmorph/nmorph-ui-kit 2.2.13 → 2.2.16

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

@@ -1,12 +1,12 @@
 import './NmorphAutocomplete.css';
-import { defineComponent as k, ref as n, computed as r, watch as p, nextTick as O } from "vue";
-import { useModifiers as T } from "../../../utils/create-modifiers.js";
-import { useVirtualList as M } from "../../../hooks/use-virtual-list.js";
-import V from "../nmorph-text-input/NmorphTextInput.vue.js";
-import A from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import B from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import D from "../../../assets/icons/loader.svg.js";
-const E = /* @__PURE__ */ k({
+import { defineComponent as z, ref as i, computed as t, watch as c, nextTick as U } from "vue";
+import { useModifiers as F } from "../../../utils/create-modifiers.js";
+import { useVirtualList as P } from "../../../hooks/use-virtual-list.js";
+import Y from "../nmorph-text-input/NmorphTextInput.vue.js";
+import G from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import J from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import K from "../../../assets/icons/loader.svg.js";
+const le = /* @__PURE__ */ z({
   __name: "NmorphAutocomplete",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -14,11 +14,12 @@ const E = /* @__PURE__ */ k({
     clearable: { type: Boolean, required: !1, default: !0 },
     list: { type: Array, required: !0, default: () => [] },
     actionCallback: { type: Function, required: !1, default: void 0 },
-    zIndex: { type: Number, required: !1 },
+    zIndex: { type: Number, required: !1, default: void 0 },
     virtual: { type: Boolean, required: !1, default: !1 },
     virtualItemHeight: { type: Number, required: !1, default: 34 },
     virtualMaxHeight: { type: [Number, String], required: !1, default: 240 },
     virtualOverscan: { type: Number, required: !1, default: 5 },
+    virtualDynamicHeight: { type: Boolean, required: !1, default: !1 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -27,52 +28,74 @@ const E = /* @__PURE__ */ k({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "select"],
-  setup(h, { expose: g, emit: y }) {
-    g();
-    const t = h, a = n(t.modelValue), s = y, b = r(
-      () => T({
+  setup(D, { expose: k, emit: _ }) {
+    k();
+    const a = D, n = i(a.modelValue), d = _, C = t(
+      () => F({
         "nmorph-autocomplete": []
       })
-    ), q = (e) => {
-      a.value = e, s("update:model-value", a.value);
-    }, l = n(!1), x = n(null), N = () => {
-      l.value = !1;
-    }, u = r(() => t.list.filter((e) => Object.keys(e).some((L) => String(e[L]).toLowerCase().includes(a.value.toLowerCase())))), c = r(() => t.virtual && u.value.length > 0), d = r(() => t.virtualItemHeight), f = r(() => t.virtualOverscan), o = M(u, {
-      enabled: c,
-      itemHeight: d,
-      overscan: f
-    }), I = r(() => o.virtualItems.value), S = r(() => ({
-      height: `${o.totalHeight.value}px`
-    })), H = r(() => ({
-      transform: `translateY(${o.offsetTop.value}px)`
-    })), m = (e) => typeof e == "number" ? `${e}px` : e, _ = r(() => m(t.virtualMaxHeight));
-    p(u, async (e) => {
-      l.value = e.length > 0, await O(), o.scrollToIndex(0), o.refresh();
+    ), L = (e) => {
+      n.value = e, d("update:model-value", n.value);
+    }, r = i(!1), O = i(null), g = () => {
+      r.value = !1;
+    }, l = t(() => a.list.filter((e) => Object.keys(e).some((h) => String(e[h]).toLowerCase().includes(n.value.toLowerCase())))), p = t(() => a.virtual && l.value.length > 0), y = t(() => a.virtualItemHeight), b = t(() => a.virtualOverscan), I = t(() => a.virtualDynamicHeight), u = P(l, {
+      enabled: p,
+      itemHeight: y,
+      overscan: b,
+      dynamic: I
+    }), T = t(() => u.virtualItems.value), V = t(() => ({
+      height: `${u.totalHeight.value}px`
+    })), $ = t(() => ({
+      transform: `translateY(${u.offsetTop.value}px)`
+    })), x = (e) => typeof e == "number" ? `${e}px` : e, A = t(() => x(a.virtualMaxHeight)), o = i(0), f = t(() => l.value[o.value]), m = t(() => `${a.id || a.name || "nmorph-autocomplete"}-listbox`), H = (e) => `${m.value}-option-${e}`;
+    c(l, async (e) => {
+      r.value = e.length > 0, o.value = 0, await U(), u.scrollToIndex(0), u.refresh();
     });
-    const C = (e) => {
-      s("select", e), a.value = e.value, setTimeout(() => {
-        l.value = !1;
+    const v = (e) => {
+      d("select", e), n.value = e.value, setTimeout(() => {
+        r.value = !1;
       });
-    }, w = () => {
-      l.value = u.value.length > 0;
-    }, i = n(!1);
-    p(a, async (e) => {
-      e !== "" && t.actionCallback && (i.value = !0, await t.actionCallback(), i.value = !1);
-    }), p(i, (e) => {
-      e && (l.value = !0);
+    }, M = (e) => {
+      v(e);
+    }, B = () => {
+      r.value = l.value.length > 0;
+    }, s = i(!1);
+    c(n, async (e) => {
+      e !== "" && a.actionCallback && (s.value = !0, await a.actionCallback(), s.value = !1);
+    }), c(s, (e) => {
+      e && (r.value = !0);
+    }), c(o, (e) => {
+      p.value && u.scrollToIndex(e);
     });
-    const v = { props: t, initialValue: a, emit: s, modifiers: b, updateValueHandler: q, open: l, nmorphAutocompleteDOMRef: x, closeHandler: N, filteredList: u, virtualEnabled: c, virtualItemHeight: d, virtualOverscan: f, virtualList: o, virtualItems: I, virtualSpacerStyle: S, virtualContentStyle: H, getCssSize: m, virtualMaxHeight: _, clickHandler: C, focusHandler: w, loader: i, get NmorphIcon() {
-      return B;
+    const q = () => {
+      l.value.length && (r.value = !0, o.value = (o.value + 1) % l.value.length);
+    }, w = () => {
+      l.value.length && (r.value = !0, o.value = (o.value - 1 + l.value.length) % l.value.length);
+    }, N = () => {
+      !r.value || !f.value || v(f.value);
+    }, E = (e) => {
+      e.key === "ArrowDown" ? (e.preventDefault(), q()) : e.key === "ArrowUp" ? (e.preventDefault(), w()) : e.key === "Enter" ? (e.preventDefault(), N()) : e.key === "Escape" && (e.preventDefault(), g());
+    }, R = t(() => ({
+      role: "combobox",
+      "aria-autocomplete": "list",
+      "aria-expanded": r.value,
+      "aria-controls": m.value,
+      "aria-activedescendant": r.value ? H(o.value) : void 0
+    })), S = { props: a, initialValue: n, emit: d, modifiers: C, updateValueHandler: L, open: r, nmorphAutocompleteDOMRef: O, closeHandler: g, filteredList: l, virtualEnabled: p, virtualItemHeight: y, virtualOverscan: b, virtualDynamicHeight: I, virtualList: u, virtualItems: T, virtualSpacerStyle: V, virtualContentStyle: $, getCssSize: x, virtualMaxHeight: A, currentIndex: o, activeItem: f, listboxId: m, getOptionId: H, selectItem: v, clickHandler: M, focusHandler: B, loader: s, arrowDownHandler: q, arrowUpHandler: w, enterHandler: N, keydownHandler: E, inputAttrs: R, setVirtualItemRef: (e, h) => {
+      const j = e instanceof Element ? e : e?.$el;
+      u.measureElement(h, j);
+    }, get NmorphIcon() {
+      return J;
     }, get NmorphDropdown() {
-      return A;
+      return G;
     }, get NmorphTextInput() {
-      return V;
+      return Y;
     }, get NmorphIconLoader() {
-      return D;
+      return K;
     } };
-    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+    return Object.defineProperty(S, "__isScriptSetup", { enumerable: !1, value: !0 }), S;
   }
 });
 export {
-  E as default
+  le 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;align-items:center;justify-content:center}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-checkbox input:focus-visible{opacity:1;scale:.95;outline:2px solid var(--nmorph-accent-color)}.nmorph-checkbox .nmorph-checkbox__fake{border-radius:var(--default-border-radius);width:100%;height:100%;position:absolute;top:0;left:0;background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-checkbox .nmorph-checkbox__label,.nmorph-checkbox .nmorph-checkbox__fake span{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-checkbox .nmorph-checkbox__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-checkbox .nmorph-checkbox__label{margin-left:var(--indentation-02);line-height:1}.nmorph-checkbox .nmorph-checkbox__fake span{line-height:.8}.nmorph-checkbox.nmorph-checkbox--button .nmorph-checkbox__fake{position:relative;display:flex;align-items:center;justify-content:center;width:auto;min-width:var(--size);height:var(--size);padding:var(--indentation-03);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-checkbox.nmorph--extra-thin-component .nmorph-checkbox__label,.nmorph-checkbox.nmorph--extra-thin-component .nmorph-checkbox__fake span{font-size:var(--font-size-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);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}

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

@@ -47,7 +47,7 @@ function C(s, d, g, e, N, D) {
             { class: "nmorph-checkbox__fake" },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           )),
           e.checked ? (o(), c("div", b)) : l("v-if", !0)
         ]),

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

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

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.css

@@ -1 +1 @@
-.nmorph-date-picker{--width: 200px;position:relative;width:var(--width)}.nmorph-date-picker .nmorph-date-picker__date-wrapper,.nmorph-date-picker .nmorph-date-picker__date-range-wrapper{height:100%}.nmorph-date-picker .nmorph-date-picker__input{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 var(--indentation-03);overflow:hidden;border-radius:var(--default-border-radius);cursor:pointer;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-date-picker .nmorph-date-picker__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-date-picker .nmorph-date-picker__input--open{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-date-picker .nmorph-date-picker__calendar-icon{margin-right:2px}.nmorph-date-picker .nmorph-date-picker__clear-button-wrapper{width:14px;height:14px;margin-right:1px}.nmorph-date-picker .nmorph-dropdown{padding:var(--indentation-03)}.nmorph-date-picker input{position:absolute;width:100%;height:100%;opacity:0;top:0;left:0;pointer-events:none}.nmorph-date-picker .nmorph-calendar{--table-data-cell-height: 42px}.nmorph-date-picker.nmorph-date-picker--daterange{--width: 250px}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-dropdown{display:flex;justify-content:space-between}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__value-separator{padding:0 var(--indentation-03)}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__selected-value{display:flex}.nmorph-date-picker.nmorph-date-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-date-picker.nmorph-date-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-date-picker.nmorph-date-picker--disabled .nmorph-date-picker__date-wrapper{pointer-events:none}
+.nmorph-date-picker{--width: 200px;position:relative;width:var(--width)}.nmorph-date-picker .nmorph-date-picker__date-wrapper,.nmorph-date-picker .nmorph-date-picker__date-range-wrapper{height:100%}.nmorph-date-picker .nmorph-date-picker__input{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-date-picker .nmorph-date-picker__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-date-picker .nmorph-date-picker__input--open{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-date-picker .nmorph-date-picker__calendar-icon{margin-right:2px}.nmorph-date-picker .nmorph-date-picker__clear-button-wrapper{width:14px;height:14px;margin-right:1px}.nmorph-date-picker .nmorph-dropdown{padding:var(--indentation-03)}.nmorph-date-picker input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none}.nmorph-date-picker .nmorph-calendar{--table-data-cell-height: 42px}.nmorph-date-picker.nmorph-date-picker--daterange{--width: 250px}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-dropdown{display:flex;justify-content:space-between}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__value-separator{padding:0 var(--indentation-03)}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__selected-value{display:flex}.nmorph-date-picker.nmorph-date-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-date-picker.nmorph-date-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-date-picker.nmorph-date-picker--disabled .nmorph-date-picker__date-wrapper{pointer-events:none}

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue2.js

@@ -1,24 +1,30 @@
 import './NmorphDatePicker.css';
 import { defineComponent as H, computed as l, ref as u } from "vue";
-import { useModifiers as k } from "../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as w } from "../../../types/index.js";
-import B from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
-import O from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as k } from "../../../types/index.js";
+import w from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
+import B from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
 import { useI18n as P } from "vue-i18n";
 import { useFormItemInput as V } from "../nmorph-form/use-form-item-input.js";
-import { formatDateIntl as d } from "../../data/nmorph-calendar/utils.js";
+import { formatDate as s } from "../../data/nmorph-calendar/utils.js";
 import j from "../../../assets/icons/calendar.svg.js";
-import M from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import R from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const W = /* @__PURE__ */ H({
+import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import M from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const X = /* @__PURE__ */ H({
   __name: "NmorphDatePicker",
   props: {
     placeholder: { type: String, required: !1, default: "" },
-    modelValue: { type: [Date, Array], required: !0, default: null },
+    modelValue: { type: [Date, Array, null], required: !0, default: null },
     type: { type: null, required: !1, default: "date" },
     textSeparator: { type: String, required: !1, default: "-" },
     initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
-    zIndex: { type: Number, required: !1 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    dateLocale: { type: [String, Array], required: !1, default: void 0 },
+    dateFormatOptions: { type: null, required: !1, default: void 0 },
+    dateFormat: { type: String, required: !1, default: "" },
+    dateFormatter: { type: Function, required: !1, default: void 0 },
+    valueSeparator: { type: String, required: !1, default: ", " },
+    rangeSeparator: { type: String, required: !1, default: " - " },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -29,42 +35,48 @@ const W = /* @__PURE__ */ H({
   emits: ["update:model-value"],
   setup(m, { expose: f, emit: c }) {
     f();
-    const { t: s } = P(), r = m, { id: h, name: v, autocomplete: y } = V(r), n = l(() => r.placeholder ? r.placeholder : s("pickADate")), e = u(r.modelValue), p = c, a = u(!1), g = () => {
+    const { t: p } = P(), e = m, { id: y, name: v, autocomplete: h } = V(e), n = l(() => e.placeholder ? e.placeholder : p("pickADate")), t = u(e.modelValue), d = c, a = u(!1), g = () => {
       a.value = !0;
-    }, D = () => {
+    }, q = () => {
       a.value = !1;
-    }, q = l(
-      () => k({
-        nmorph: [w[r.height]],
-        "nmorph-date-picker": [`${r.disabled && "disabled"}`, r.type, `${a.value && "focus"}`]
+    }, S = l(
+      () => O({
+        nmorph: [k[e.height]],
+        "nmorph-date-picker": [`${e.disabled && "disabled"}`, e.type, `${a.value && "focus"}`]
       })
-    ), o = u(!1), N = u(null), b = () => {
+    ), o = u(!1), D = u(null), N = () => {
       o.value = !1;
-    }, I = () => {
+    }, b = () => {
       o.value = !o.value;
     }, _ = l(() => {
-      if (!e.value) return n.value;
-      if (Array.isArray(e.value)) {
-        if (e.value.length === 0) return n.value;
-        const t = d(e.value), x = r.type === "daterange" ? " - " : ", ";
-        return t.join(x);
+      if (!t.value) return n.value;
+      const r = {
+        locale: e.dateLocale,
+        options: e.dateFormatOptions,
+        format: e.dateFormat,
+        formatter: e.dateFormatter
+      };
+      if (Array.isArray(t.value)) {
+        if (t.value.length === 0) return n.value;
+        const C = s(t.value, r), x = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
+        return C.join(x);
       } else
-        return d(e.value);
-    }), S = () => {
-      const t = Array.isArray(e.value) ? [] : null;
-      e.value = t, p("update:model-value", e.value);
-    }, A = (t) => {
-      e.value = t, p("update:model-value", e.value);
-    }, C = l(() => Array.isArray(e.value) ? e.value.length > 0 : !!e.value), i = { t: s, props: r, id: h, name: v, autocomplete: y, placeholderText: n, selectedDate: e, emit: p, focus: a, focusHandler: g, blurHandler: D, modifiers: q, open: o, nmorphInputDOMRef: N, closeHandler: b, toggleOpen: I, displayValue: _, clearHandler: S, updateSelectedDateHandler: A, showClearButton: C, get NmorphDropdown() {
-      return R;
-    }, get NmorphIcon() {
+        return s(t.value, r);
+    }), A = () => {
+      const r = Array.isArray(t.value) ? [] : null;
+      t.value = r, d("update:model-value", t.value);
+    }, I = (r) => {
+      t.value = r, d("update:model-value", t.value);
+    }, F = l(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), i = { t: p, props: e, id: y, name: v, autocomplete: h, placeholderText: n, selectedDate: t, emit: d, focus: a, focusHandler: g, blurHandler: q, modifiers: S, open: o, nmorphInputDOMRef: D, closeHandler: N, toggleOpen: b, displayValue: _, clearHandler: A, updateSelectedDateHandler: I, showClearButton: F, get NmorphDropdown() {
       return M;
+    }, get NmorphIcon() {
+      return L;
     }, get NmorphIconCalendar() {
       return j;
-    }, NmorphClearButton: B, NmorphDatePickerContent: O };
+    }, NmorphClearButton: w, NmorphDatePickerContent: B };
     return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {
-  W as default
+  X as default
 };

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue2.js

@@ -7,7 +7,7 @@ const O = /* @__PURE__ */ H({
   __name: "NmorphDatePickerContent",
   props: {
     initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
-    selectedValues: { type: [Date, Array], required: !0 },
+    selectedValues: { type: [Date, Array, null], required: !0 },
     type: { type: null, required: !1, default: "date" }
   },
   emits: ["update-selected-value"],

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-header/NmorphDatePickerHeader.css

@@ -1 +1 @@
-.nmorph-date-picker-header{display:flex;justify-content:space-between;padding:var(--indentation-03)}.nmorph-date-picker-header .nmorph-date-picker-header__center-side{display:flex;justify-content:center;width:165px;margin:0 var(--indentation-00);border-radius:var(--default-border-radius);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-date-picker-header .nmorph-date-picker-header__action-btn{margin:0 var(--indentation-02)}.nmorph-date-picker-header .nmorph-date-picker-header__action-btn .nmorph-button__content{padding:0 var(--indentation-02)}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-double-left{rotate:90deg}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-double-right{rotate:-90deg}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-left{rotate:90deg}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-right{rotate:-90deg}
+.nmorph-date-picker-header{display:flex;justify-content:space-between;padding:var(--indentation-03)}.nmorph-date-picker-header .nmorph-date-picker-header__center-side{display:flex;justify-content:center;width:165px;margin:0 var(--indentation-00);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-date-picker-header .nmorph-date-picker-header__action-btn{margin:0 var(--indentation-02)}.nmorph-date-picker-header .nmorph-date-picker-header__action-btn .nmorph-button__content{padding:0 var(--indentation-02)}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-double-left{rotate:90deg}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-double-right{rotate:-90deg}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-left{rotate:90deg}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-right{rotate:-90deg}

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-header/NmorphDatePickerHeader.vue.js

@@ -14,9 +14,9 @@ function _(f, t, k, e, v, N) {
       a("div", p, [
         r(e.NmorphButton, {
           class: "nmorph-date-picker-header__action-btn",
+          tabindex: -1,
           "style-type": "transparent",
-          onClick: t[0] || (t[0] = (o) => e.emit("prev-year")),
-          tabindex: -1
+          onClick: t[0] || (t[0] = (o) => e.emit("prev-year"))
         }, {
           default: n(() => [
             r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-double-left" }, {
@@ -32,9 +32,9 @@ function _(f, t, k, e, v, N) {
         }),
         r(e.NmorphButton, {
           class: "nmorph-date-picker-header__action-btn",
+          tabindex: -1,
           "style-type": "transparent",
-          onClick: t[1] || (t[1] = (o) => e.emit("prev-month")),
-          tabindex: -1
+          onClick: t[1] || (t[1] = (o) => e.emit("prev-month"))
         }, {
           default: n(() => [
             r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-left" }, {
@@ -52,25 +52,25 @@ function _(f, t, k, e, v, N) {
       a("div", c, [
         r(e.NmorphButton, {
           text: e.props.year,
+          tabindex: -1,
           "style-type": "transparent",
           fill: "",
-          onClick: t[2] || (t[2] = (o) => e.emit("change-year")),
-          tabindex: -1
+          onClick: t[2] || (t[2] = (o) => e.emit("change-year"))
         }, null, 8, ["text"]),
         r(e.NmorphButton, {
           text: e.getMonthName(e.props.month),
+          tabindex: -1,
           "style-type": "transparent",
           fill: "",
-          onClick: t[3] || (t[3] = (o) => e.emit("change-month")),
-          tabindex: -1
+          onClick: t[3] || (t[3] = (o) => e.emit("change-month"))
         }, null, 8, ["text"])
       ]),
       a("div", s, [
         r(e.NmorphButton, {
           class: "nmorph-date-picker-header__action-btn",
+          tabindex: -1,
           "style-type": "transparent",
-          onClick: t[4] || (t[4] = (o) => e.emit("next-month")),
-          tabindex: -1
+          onClick: t[4] || (t[4] = (o) => e.emit("next-month"))
         }, {
           default: n(() => [
             r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-right" }, {
@@ -86,9 +86,9 @@ function _(f, t, k, e, v, N) {
         }),
         r(e.NmorphButton, {
           class: "nmorph-date-picker-header__action-btn",
+          tabindex: -1,
           "style-type": "transparent",
-          onClick: t[5] || (t[5] = (o) => e.emit("next-year")),
-          tabindex: -1
+          onClick: t[5] || (t[5] = (o) => e.emit("next-year"))
         }, {
           default: n(() => [
             r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-double-right" }, {

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.css

@@ -1 +1 @@
-.nmorph-year-month-picker .nmorph-year-month-picker__header{display:flex;justify-content:space-between;padding-bottom:var(--indentation-04)}.nmorph-year-month-picker .nmorph-year-month-picker__value{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);border-radius:var(--default-border-radius)}.nmorph-year-month-picker .nmorph-year-month-picker__values{padding-top:var(--indentation-04)}.nmorph-year-month-picker .nmorph-radio-group{width:100%}.nmorph-year-month-picker .nmorph-radio-group .nmorph-radio-group__content{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.nmorph-year-month-picker .nmorph-radio-group .nmorph-radio:not(:last-child){width:100%;margin:0}.nmorph-year-month-picker .nmorph-year-month-picker__chevron-left{rotate:90deg}.nmorph-year-month-picker .nmorph-year-month-picker__chevron-right{rotate:-90deg}
+.nmorph-year-month-picker .nmorph-year-month-picker__header{display:flex;justify-content:space-between;padding-bottom:var(--indentation-04)}.nmorph-year-month-picker .nmorph-year-month-picker__value{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-year-month-picker .nmorph-year-month-picker__values{padding-top:var(--indentation-04)}.nmorph-year-month-picker .nmorph-radio-group{width:100%}.nmorph-year-month-picker .nmorph-radio-group .nmorph-radio-group__content{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.nmorph-year-month-picker .nmorph-radio-group .nmorph-radio:not(:last-child){width:100%;margin:0}.nmorph-year-month-picker .nmorph-year-month-picker__chevron-left{rotate:90deg}.nmorph-year-month-picker .nmorph-year-month-picker__chevron-right{rotate:-90deg}

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue.js

@@ -14,8 +14,8 @@ function _(k, r, v, o, f, N) {
       t("div", d, [
         e(o.NmorphButton, {
           class: "nmorph-year-month-picker__action-btn",
-          onClick: r[0] || (r[0] = (a) => o.buttonClickHandler("decrease")),
-          tabindex: -1
+          tabindex: -1,
+          onClick: r[0] || (r[0] = (a) => o.buttonClickHandler("decrease"))
         }, {
           default: n(() => [
             e(o.NmorphIcon, { class: "nmorph-year-month-picker__chevron-left" }, {
@@ -32,15 +32,15 @@ function _(k, r, v, o, f, N) {
         t("div", p, [
           e(o.NmorphButton, {
             text: o.value,
+            tabindex: -1,
             "style-type": "transparent",
-            onClick: o.goToYearsHandler,
-            tabindex: -1
+            onClick: o.goToYearsHandler
           }, null, 8, ["text"])
         ]),
         e(o.NmorphButton, {
           class: "nmorph-year-month-picker__action-btn",
-          onClick: r[1] || (r[1] = (a) => o.buttonClickHandler("increase")),
-          tabindex: -1
+          tabindex: -1,
+          onClick: r[1] || (r[1] = (a) => o.buttonClickHandler("increase"))
         }, {
           default: n(() => [
             e(o.NmorphIcon, { class: "nmorph-year-month-picker__chevron-right" }, {

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.css

@@ -1 +1 @@
-.nmorph-file-upload .nmorph-file-upload__trigger{position:relative}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__file{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;align-items:center;width:50%;margin-left:var(--indentation-02)}.nmorph-file-upload .nmorph-file-upload__file-name{margin-left:var(--indentation-02);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{margin-left:var(--indentation-03)}
+.nmorph-file-upload .nmorph-file-upload__trigger{position:relative}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__file{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--indentation-02);padding:var(--indentation-02) 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-file-upload .nmorph-file-upload__file-info{display:flex;align-items:center;width:50%;margin-left:var(--indentation-02)}.nmorph-file-upload .nmorph-file-upload__file-name{margin-left:var(--indentation-02);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{margin-left:var(--indentation-03)}

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.vue.js

@@ -80,9 +80,9 @@ function B(a, I, w, e, D, S) {
                     "icon-only": t(() => [
                       o(e.NmorphIconCross)
                     ]),
-                    _: 2
-                    /* DYNAMIC */
-                  }, 1032, ["onClick"])
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["onClick"])
                 ])
               ]))),
               128

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.css

@@ -1 +1 @@
-.nmorph-validation-icon{margin-left:var(--indentation-03);width:var(--nmorph-validation-icon-size)}.nmorph-validation-icon.nmorph-validation-icon--valid .nmorph-validation-icon__content{--color: var(--nmorph-success-color)}.nmorph-validation-icon.nmorph-validation-icon--invalid .nmorph-validation-icon__content{--color: var(--nmorph-error-text-color)}
+.nmorph-validation-icon{width:var(--nmorph-validation-icon-size);margin-left:var(--indentation-03)}.nmorph-validation-icon.nmorph-validation-icon--valid .nmorph-validation-icon__content{--color: var(--nmorph-success-color)}.nmorph-validation-icon.nmorph-validation-icon--invalid .nmorph-validation-icon__content{--color: var(--nmorph-error-text-color)}

package/dist/components/form/nmorph-number-input/NmorphNumberInput.css

@@ -1 +1 @@
-.nmorph-number-input{display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-number-input .nmorph-number-input__content{display:flex;align-items:center;width:100%}.nmorph-number-input .nmorph-number-input__input-content{display:flex;width:100%;height:var(--height);height:100%;border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-number-input .nmorph-number-input__decrease .nmorph-button__content{border-top-right-radius:0;border-bottom-right-radius:0}.nmorph-number-input .nmorph-number-input__increase .nmorph-button__content{border-top-left-radius:0;border-bottom-left-radius:0}.nmorph-number-input input{width:auto;width:100%;padding:var(--indentation-00) var(--default-indentation-input);text-align:center;border:none;border-top:1px solid var(--nmorph-main-color);border-bottom:1px solid var(--nmorph-main-color);transition:ease-in-out var(--transition-01) background;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);transition:background 0s;-moz-appearance:textfield}.nmorph-number-input input:focus{background:var(--nmorph-accent-color);outline:none}.nmorph-number-input input::-webkit-inner-spin-button,.nmorph-number-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.nmorph-number-input .nmorph-number-input__action-btns{display:flex;flex-direction:column}.nmorph-number-input.nmorph-number-input--disabled{cursor:not-allowed;opacity:.6}.nmorph-number-input.nmorph-number-input--disabled .nmorph-number-input__input-content{pointer-events:none}.nmorph-number-input.nmorph-number-input--action-btn-position-right input{border-top-left-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease,.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase{display:flex;justify-content:center;width:100%}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease .nmorph-button__content{border-radius:0;border-top-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase .nmorph-button__content{border-radius:0;border-bottom-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-button{width:100%}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-button{--height: var(--nmorph-number-input-right-action-height)}
+.nmorph-number-input{display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-number-input .nmorph-number-input__content{display:flex;align-items:center;width:100%}.nmorph-number-input .nmorph-number-input__input-content{display:flex;width:100%;height:var(--height);height:100%;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-number-input .nmorph-number-input__decrease .nmorph-button__content{border-top-right-radius:0;border-bottom-right-radius:0}.nmorph-number-input .nmorph-number-input__increase .nmorph-button__content{border-top-left-radius:0;border-bottom-left-radius:0}.nmorph-number-input input{width:auto;width:100%;padding:var(--indentation-00) var(--default-indentation-input);text-align:center;background:var(--nmorph-main-color);border:none;border-top:1px solid var(--nmorph-main-color);border-bottom:1px solid 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);transition:ease-in-out var(--transition-01) background;transition:background 0s;appearance:textfield}.nmorph-number-input input:focus{background:var(--nmorph-accent-color);outline:none}.nmorph-number-input input::-webkit-inner-spin-button,.nmorph-number-input input::-webkit-outer-spin-button{margin:0;appearance:none}.nmorph-number-input .nmorph-number-input__action-btns{display:flex;flex-direction:column}.nmorph-number-input.nmorph-number-input--disabled{cursor:not-allowed;opacity:.6}.nmorph-number-input.nmorph-number-input--disabled .nmorph-number-input__input-content{pointer-events:none}.nmorph-number-input.nmorph-number-input--action-btn-position-right input{border-top-left-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease,.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase{display:flex;justify-content:center;width:100%}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease .nmorph-button__content{border-radius:0;border-top-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase .nmorph-button__content{border-radius:0;border-bottom-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-button{--height: var(--nmorph-number-input-right-action-height);width:100%}

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

@@ -1 +1 @@
-.nmorph-radio{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;align-items:center;justify-content:center}.nmorph-radio span{margin-top:2px}.nmorph-radio .nmorph-radio__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-radio input{position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-radio input:focus-visible{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake{border-radius:var(--border-radius-circular);width:100%;height:100%;position:absolute;top:0;left:0;background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake span,.nmorph-radio .nmorph-radio__label{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-radio .nmorph-radio__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-radio .nmorph-radio__label{margin-left:var(--indentation-02)}.nmorph-radio.nmorph-radio--button .nmorph-radio__fake{position:relative;display:flex;align-items:center;justify-content:center;height:var(--size);padding:var(--indentation-03);white-space:nowrap;border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph--extra-thin-component .nmorph-radio__fake span,.nmorph-radio.nmorph--extra-thin-component .nmorph-radio__label{font-size:var(--font-size-tiny);line-height:var(--line-height-line)}.nmorph-radio.nmorph--extra-thin-component.nmorph-radio--button .nmorph-radio__fake{padding:var(--indentation-02)}.nmorph-radio.nmorph-radio--checked .nmorph-radio__fake{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph-radio--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-radio{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;justify-content:center;align-items:center}.nmorph-radio span{margin-top:2px}.nmorph-radio .nmorph-radio__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-radio input{position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-radio input:focus-visible{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake span,.nmorph-radio .nmorph-radio__label{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-radio .nmorph-radio__fake-checked{position:absolute;top:50%;left:50%;width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%)}.nmorph-radio .nmorph-radio__label{margin-left:var(--indentation-02)}.nmorph-radio.nmorph-radio--button .nmorph-radio__fake{position:relative;display:flex;justify-content:center;align-items:center;height:var(--size);padding:var(--indentation-03);white-space:nowrap;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-radio.nmorph--extra-thin-component .nmorph-radio__fake span,.nmorph-radio.nmorph--extra-thin-component .nmorph-radio__label{font-size:var(--font-size-tiny);line-height:var(--line-height-line)}.nmorph-radio.nmorph--extra-thin-component.nmorph-radio--button .nmorph-radio__fake{padding:var(--indentation-02)}.nmorph-radio.nmorph-radio--checked .nmorph-radio__fake{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph-radio--disabled{cursor:not-allowed;opacity:.6}

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

@@ -46,7 +46,7 @@ function N(n, s, R, e, C, D) {
             { class: "nmorph-radio__fake" },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           )),
           e.checked ? (o(), a("div", k)) : i("v-if", !0)
         ]),

package/dist/components/form/nmorph-select/NmorphSelect.css

@@ -1 +1 @@
-.nmorph-select{--base-width: 200px;width:var(--base-width);height:var(--height);cursor:pointer}.nmorph-select .nmorph-select__content{position:relative;height:100%;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select .nmorph-select__selected-values-line{display:flex;align-items:center;justify-content:space-between;height:100%;padding:var(--indentation-00) var(--default-indentation-input);border-radius:var(--default-border-radius)}.nmorph-select .nmorph-select__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select select,.nmorph-select option{opacity:0;width:0;height:0;border:none;padding:0;position:absolute}.nmorph-select.nmorph-select--loading .nmorph-select__options{display:flex;justify-content:center;padding:16px}.nmorph-select.nmorph-select--disabled{cursor:not-allowed;opacity:.6}.nmorph-select.nmorph-select--fill{width:100%}.nmorph-select.nmorph-select--options-auto-width .nmorph-select__options{width:max-content;max-width:calc(100vw - var(--indentation-02) * 2)}.nmorph-select .nmorph-select__virtual-list{overflow-y:auto}.nmorph-select .nmorph-select__virtual-spacer{position:relative}.nmorph-select .nmorph-select__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-select.nmorph-select--open .nmorph-select__chevron{transform:rotate(180deg)}.nmorph-select.nmorph-select--open .nmorph-select__content{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-select.nmorph-select--selected-line-outset .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select.nmorph-select--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-select.nmorph-select--focus .nmorph-select__content{box-shadow:none}
+.nmorph-select{--base-width: 200px;width:var(--base-width);height:var(--height);cursor:pointer}.nmorph-select .nmorph-select__content{position:relative;height:100%;background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-outset)}.nmorph-select .nmorph-select__selected-values-line{display:flex;justify-content:space-between;align-items:center;height:100%;padding:var(--indentation-00) var(--default-indentation-input);border-radius:var(--default-border-radius)}.nmorph-select .nmorph-select__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select select,.nmorph-select option{position:absolute;width:0;height:0;padding:0;border:none;opacity:0}.nmorph-select.nmorph-select--loading .nmorph-select__options{display:flex;justify-content:center;padding:16px}.nmorph-select.nmorph-select--disabled{cursor:not-allowed;opacity:.6}.nmorph-select.nmorph-select--fill{width:100%}.nmorph-select.nmorph-select--options-auto-width .nmorph-select__options{width:max-content;max-width:calc(100vw - var(--indentation-02) * 2)}.nmorph-select .nmorph-select__virtual-list{overflow-y:auto}.nmorph-select .nmorph-select__virtual-spacer{position:relative}.nmorph-select .nmorph-select__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-select.nmorph-select--open .nmorph-select__chevron{transform:rotate(180deg)}.nmorph-select.nmorph-select--open .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-select.nmorph-select--selected-line-outset .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-outset)}.nmorph-select.nmorph-select--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-select.nmorph-select--focus .nmorph-select__content{box-shadow:none}