@nmorph/nmorph-ui-kit 2.2.12 → 2.2.15

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

@@ -20,44 +20,45 @@ const E = /* @__PURE__ */ R({
   setup(_, { expose: q, emit: M }) {
     const o = _, g = M, { id: V, name: S, tabindex: x } = L(o), s = (e, r = "#000000") => {
       const t = e?.trim() || "";
-      return /^#[\da-f]{6}$/i.test(t) ? t.toLowerCase() : /^#[\da-f]{3}$/i.test(t) ? `#${t.slice(1).split("").map((a) => `${a}${a}`).join("").toLowerCase()}` : r;
+      return /^#[\da-f]{6}$/i.test(t) ? t.toLowerCase() : /^#[\da-f]{3}$/i.test(t) ? `#${t.slice(1).split("").map((n) => `${n}${n}`).join("").toLowerCase()}` : r;
     }, c = h(null), m = () => {
+      if (typeof document > "u") return "#006cb6";
       const e = c.value || document.documentElement, r = getComputedStyle(e).getPropertyValue("--nmorph-accent-color").trim();
       return s(r, "#006cb6");
-    }, n = h(s(o.modelValue)), b = h(!1);
+    }, a = h(s(o.modelValue)), b = h(!1);
     j(
       () => o.modelValue,
       (e) => {
-        n.value = e ? s(e) : m();
+        a.value = e ? s(e) : m();
       }
     );
     const I = (e) => {
       const r = e.target, t = s(r.value);
-      n.value = t, g("update:model-value", t);
+      a.value = t, g("update:model-value", t);
     }, p = (e) => [
       parseInt(e.slice(1, 3), 16),
       parseInt(e.slice(3, 5), 16),
       parseInt(e.slice(5, 7), 16)
     ], y = (e) => {
-      const [r, t, a] = p(e);
-      return `rgb(${r}, ${t}, ${a})`;
+      const [r, t, n] = p(e);
+      return `rgb(${r}, ${t}, ${n})`;
     }, $ = (e) => {
-      const [r, t, a] = p(e).map((P) => P / 255), l = Math.max(r, t, a), u = Math.min(r, t, a), f = (l + u) / 2;
+      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)}%)`;
       const i = l - u, N = f > 0.5 ? i / (2 - l - u) : i / (l + u);
       let d = 0;
-      return l === r ? d = (t - a) / i + (t < a ? 6 : 0) : l === t ? d = (a - r) / i + 2 : d = (r - t) / i + 4, `hsl(${Math.round(d * 60)}, ${Math.round(N * 100)}%, ${Math.round(f * 100)}%)`;
+      return l === r ? d = (t - n) / i + (t < n ? 6 : 0) : l === t ? d = (n - r) / i + 2 : d = (r - t) / i + 4, `hsl(${Math.round(d * 60)}, ${Math.round(N * 100)}%, ${Math.round(f * 100)}%)`;
     };
     k(() => {
-      o.modelValue || (n.value = m());
+      o.modelValue || (a.value = m());
     }), q({ inputDOMRef: c });
     const F = C(
       () => H({
         nmorph: [B[o.height], `${b.value && "focused"}`],
         "nmorph-color-picker": [`${o.disabled && "disabled"}`, o.displayFormat]
       })
-    ), w = C(() => o.displayFormat === "rgb" ? y(n.value) : o.displayFormat === "hsl" ? $(n.value) : n.value.toUpperCase()), v = { props: o, emit: g, id: V, name: S, tabindex: x, normalizeColor: s, inputDOMRef: c, resolveAccentColor: m, currentValue: n, focused: b, handleInput: I, hexToRgb: p, formatRgb: y, formatHsl: $, modifiers: F, displayValue: w };
+    ), 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;
   }
 });

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(--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);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: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;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

@@ -18,7 +18,7 @@ const W = /* @__PURE__ */ H({
     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 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -29,7 +29,7 @@ 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: s } = P(), r = m, { id: v, name: h, autocomplete: y } = V(r), n = l(() => r.placeholder ? r.placeholder : s("pickADate")), e = u(r.modelValue), p = c, a = u(!1), g = () => {
       a.value = !0;
     }, D = () => {
       a.value = !1;
@@ -55,7 +55,7 @@ const W = /* @__PURE__ */ H({
       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() {
+    }, C = l(() => Array.isArray(e.value) ? e.value.length > 0 : !!e.value), i = { t: s, props: r, id: v, name: h, 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 M;

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-extra-small);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--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(--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;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: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}

package/dist/components/form/nmorph-select/NmorphSelect.vue.js

@@ -1,30 +1,30 @@
 import './NmorphSelect.css';
-import p from "./NmorphSelect.vue2.js";
-import { openBlock as o, createElementBlock as r, normalizeClass as v, createElementVNode as i, withKeys as t, Fragment as a, renderList as d, withModifiers as w, toDisplayString as h, createBlock as l, mergeProps as m, createVNode as s, withCtx as c, renderSlot as k, createCommentVNode as g } from "vue";
+import y from "./NmorphSelect.vue2.js";
+import { openBlock as o, createElementBlock as r, normalizeClass as g, createElementVNode as t, withKeys as a, Fragment as i, renderList as c, withModifiers as u, toDisplayString as _, createBlock as n, mergeProps as d, createVNode as v, withCtx as h, normalizeStyle as s, renderSlot as w, createCommentVNode as k } from "vue";
 /* empty css                  */
-import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "nmorph-select__content" }, b = ["id", "name", "autocomplete", "tabindex", "disabled"], x = ["value"], O = {
+import x from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled"], b = ["value"], H = {
   key: 0,
   class: "nmorph-select__selected-value"
-}, D = {
+}, O = {
   key: 1,
   class: "nmorph-select__selected-value"
-}, H = {
+}, C = {
   key: 2,
   class: "nmorph-select__selected-value"
-}, u = {
+}, D = {
   ref: "optionsDOMRef",
   class: "nmorph-select__options"
 };
-function C(_, I, f, e, S, M) {
+function I(f, m, p, e, M, z) {
   return o(), r(
     "div",
     {
-      class: v(e.modifiers)
+      class: g(e.modifiers)
     },
     [
-      i("div", N, [
-        i("select", {
+      t("div", N, [
+        t("select", {
           id: e.id,
           name: e.name,
           autocomplete: e.autocomplete,
@@ -33,51 +33,50 @@ function C(_, I, f, e, S, M) {
           onFocus: e.focusHandler,
           onBlur: e.blurHandler,
           onKeydown: [
-            t(e.spaceHandler, ["space"]),
-            t(e.arrowDownHandler, ["arrow-down"]),
-            t(e.arrowUpHandler, ["arrow-up"]),
-            t(e.enterHandler, ["enter"])
+            a(e.spaceHandler, ["space"]),
+            a(e.arrowDownHandler, ["arrow-down"]),
+            a(e.arrowUpHandler, ["arrow-up"]),
+            a(e.enterHandler, ["enter"])
           ]
         }, [
           (o(!0), r(
-            a,
+            i,
             null,
-            d(e.domOptions, (n) => (o(), r("option", {
-              key: n,
-              value: n
-            }, null, 8, x))),
+            c(e.nativeOptions, (l) => (o(), r("option", {
+              key: l,
+              value: l
+            }, null, 8, b))),
             128
             /* KEYED_FRAGMENT */
           ))
-        ], 40, b),
-        i(
+        ], 40, S),
+        t(
           "div",
           {
             ref: "nmorphSelectDOMRef",
             class: "nmorph-select__selected-values-line",
-            onClick: w(e.clickHandler, ["stop"])
+            onClick: u(e.clickHandler, ["stop"])
           },
           [
             typeof e.initialValue == "string" ? (o(), r(
               "div",
-              O,
-              h(e.selectedValueTitle),
+              H,
+              _(e.selectedValueTitle),
               1
               /* TEXT */
             )) : e.initialValue.length === 0 ? (o(), r(
               "div",
-              D,
-              h(e.computedNoElementPlaceholder),
+              O,
+              _(e.computedNoElementPlaceholder),
               1
               /* TEXT */
-            )) : (o(), r("div", H, [
+            )) : (o(), r("div", C, [
               (o(!0), r(
-                a,
+                i,
                 null,
-                d(e.tags, (n) => (o(), l(e.NmorphTagItem, m({
-                  key: n.value,
-                  ref_for: !0
-                }, n, {
+                c(e.tags, (l) => (o(), n(e.NmorphTagItem, d({
+                  key: l.value
+                }, { ref_for: !0 }, l, {
                   transparent: "",
                   removable: e.tags.length > 1 || !e.props.valueRequired,
                   height: "thin",
@@ -87,9 +86,9 @@ function C(_, I, f, e, S, M) {
                 /* KEYED_FRAGMENT */
               ))
             ])),
-            s(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
-              default: c(() => [
-                e.props.loading ? (o(), l(e.NmorphIconLoader, { key: 0 })) : (o(), l(e.NmorphIconChevronDown, { key: 1 }))
+            v(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
+              default: h(() => [
+                e.props.loading ? (o(), n(e.NmorphIconLoader, { key: 0 })) : (o(), n(e.NmorphIconChevronDown, { key: 1 }))
               ]),
               _: 1
               /* STABLE */
@@ -99,7 +98,7 @@ function C(_, I, f, e, S, M) {
           /* NEED_PATCH */
         )
       ]),
-      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), l(e.NmorphDropdown, {
+      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), n(e.NmorphDropdown, {
         key: 0,
         open: e.open && !e.props.loading,
         "relative-element": e.nmorphSelectDOMRef,
@@ -110,34 +109,89 @@ function C(_, I, f, e, S, M) {
         "z-index": e.props.zIndex,
         onOnOutsideClick: e.closeHandler
       }, {
-        default: c(() => [
-          i(
+        default: h(() => [
+          t(
             "div",
-            u,
+            D,
             [
-              e.props.loading ? (o(), l(e.NmorphIcon, {
+              e.props.loading ? (o(), n(e.NmorphIcon, {
                 key: 0,
                 class: "nmorph-select__chevron",
                 size: "medium"
               }, {
-                default: c(() => [
-                  s(e.NmorphIconChevronDown)
+                default: h(() => [
+                  v(e.NmorphIconChevronDown)
                 ]),
                 _: 1
                 /* STABLE */
-              })) : (o(!0), r(
-                a,
-                { key: 1 },
-                d(f.options, (n) => (o(), l(e.NmorphSelectOption, m({
-                  key: n.value,
-                  ref_for: !0
-                }, n, {
-                  height: e.props.height
-                }), null, 16, ["height"]))),
-                128
-                /* KEYED_FRAGMENT */
-              )),
-              k(_.$slots, "default")
+              })) : e.virtualEnabled ? (o(), r(
+                "div",
+                {
+                  key: 1,
+                  ref: e.virtualList.containerRef,
+                  class: "nmorph-select__virtual-list",
+                  style: s({ maxHeight: e.virtualMaxHeight }),
+                  onScroll: m[0] || (m[0] = (...l) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...l))
+                },
+                [
+                  t(
+                    "div",
+                    {
+                      class: "nmorph-select__virtual-spacer",
+                      style: s(e.virtualSpacerStyle)
+                    },
+                    [
+                      t(
+                        "div",
+                        {
+                          class: "nmorph-select__virtual-content",
+                          style: s(e.virtualContentStyle)
+                        },
+                        [
+                          (o(!0), r(
+                            i,
+                            null,
+                            c(e.virtualOptions, (l) => (o(), n(e.NmorphSelectOption, d({
+                              key: l.index
+                            }, { ref_for: !0 }, l.item, {
+                              focused: l.item.value === e.currentFocusedEl,
+                              height: e.props.height
+                            }), null, 16, ["focused", "height"]))),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ],
+                        4
+                        /* STYLE */
+                      )
+                    ],
+                    4
+                    /* STYLE */
+                  )
+                ],
+                36
+                /* STYLE, NEED_HYDRATION */
+              )) : (o(), r(
+                i,
+                { key: 2 },
+                [
+                  (o(!0), r(
+                    i,
+                    null,
+                    c(p.options, (l) => (o(), n(e.NmorphSelectOption, d({
+                      key: l.value
+                    }, { ref_for: !0 }, l, {
+                      focused: l.value === e.currentFocusedEl,
+                      height: e.props.height
+                    }), null, 16, ["focused", "height"]))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  )),
+                  w(f.$slots, "default")
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              ))
             ],
             512
             /* NEED_PATCH */
@@ -145,13 +199,13 @@ function C(_, I, f, e, S, M) {
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index"])) : g("v-if", !0)
+      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index"])) : k("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const E = /* @__PURE__ */ y(p, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
+const B = /* @__PURE__ */ x(y, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
 export {
-  E as default
+  B as default
 };