@nmorph/nmorph-ui-kit 2.2.13 → 2.2.16

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

@@ -1,9 +1,9 @@
 import './NmorphSelect.css';
-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";
+import w from "./NmorphSelect.vue2.js";
+import { openBlock as r, createElementBlock as n, normalizeClass as x, createElementVNode as t, withKeys as a, withModifiers as l, Fragment as d, renderList as c, toDisplayString as _, createBlock as i, mergeProps as h, createVNode as f, withCtx as m, normalizeStyle as s, renderSlot as b, createCommentVNode as k } from "vue";
 /* empty css                  */
-import x from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled"], b = ["value"], H = {
+import H from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant", "onKeydown"], u = ["value"], I = {
   key: 0,
   class: "nmorph-select__selected-value"
 }, O = {
@@ -12,15 +12,12 @@ const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete"
 }, C = {
   key: 2,
   class: "nmorph-select__selected-value"
-}, D = {
-  ref: "optionsDOMRef",
-  class: "nmorph-select__options"
-};
-function I(f, m, p, e, M, z) {
-  return o(), r(
+}, D = ["id"];
+function E(p, v, y, e, M, R) {
+  return r(), n(
     "div",
     {
-      class: g(e.modifiers)
+      class: x(e.modifiers)
     },
     [
       t("div", N, [
@@ -30,22 +27,29 @@ function I(f, m, p, e, M, z) {
           autocomplete: e.autocomplete,
           tabindex: e.tabindex,
           disabled: e.disabledInput,
+          role: "combobox",
+          "aria-expanded": e.open,
+          "aria-controls": e.listboxId,
+          "aria-activedescendant": e.open && e.currentFocusedEl ? e.getOptionId(e.currentFocusedEl) : void 0,
           onFocus: e.focusHandler,
           onBlur: e.blurHandler,
           onKeydown: [
-            a(e.spaceHandler, ["space"]),
-            a(e.arrowDownHandler, ["arrow-down"]),
-            a(e.arrowUpHandler, ["arrow-up"]),
-            a(e.enterHandler, ["enter"])
+            a(l(e.spaceHandler, ["prevent"]), ["space"]),
+            a(l(e.arrowDownHandler, ["prevent"]), ["arrow-down"]),
+            a(l(e.arrowUpHandler, ["prevent"]), ["arrow-up"]),
+            a(l(e.enterHandler, ["prevent"]), ["enter"]),
+            a(l(e.escapeHandler, ["prevent"]), ["escape"]),
+            a(l(e.homeHandler, ["prevent"]), ["home"]),
+            a(l(e.endHandler, ["prevent"]), ["end"])
           ]
         }, [
-          (o(!0), r(
-            i,
+          (r(!0), n(
+            d,
             null,
-            c(e.nativeOptions, (l) => (o(), r("option", {
-              key: l,
-              value: l
-            }, null, 8, b))),
+            c(e.nativeOptions, (o) => (r(), n("option", {
+              key: o,
+              value: o
+            }, null, 8, u))),
             128
             /* KEYED_FRAGMENT */
           ))
@@ -55,29 +59,29 @@ function I(f, m, p, e, M, z) {
           {
             ref: "nmorphSelectDOMRef",
             class: "nmorph-select__selected-values-line",
-            onClick: u(e.clickHandler, ["stop"])
+            "aria-hidden": "true",
+            onClick: l(e.clickHandler, ["stop"])
           },
           [
-            typeof e.initialValue == "string" ? (o(), r(
+            typeof e.initialValue == "string" ? (r(), n(
               "div",
-              H,
+              I,
               _(e.selectedValueTitle),
               1
               /* TEXT */
-            )) : e.initialValue.length === 0 ? (o(), r(
+            )) : e.initialValue.length === 0 ? (r(), n(
               "div",
               O,
               _(e.computedNoElementPlaceholder),
               1
               /* TEXT */
-            )) : (o(), r("div", C, [
-              (o(!0), r(
-                i,
+            )) : (r(), n("div", C, [
+              (r(!0), n(
+                d,
                 null,
-                c(e.tags, (l) => (o(), n(e.NmorphTagItem, d({
-                  key: l.value,
-                  ref_for: !0
-                }, l, {
+                c(e.tags, (o) => (r(), i(e.NmorphTagItem, h({
+                  key: o.value
+                }, { ref_for: !0 }, o, {
                   transparent: "",
                   removable: e.tags.length > 1 || !e.props.valueRequired,
                   height: "thin",
@@ -87,9 +91,9 @@ function I(f, m, p, e, M, z) {
                 /* KEYED_FRAGMENT */
               ))
             ])),
-            v(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
-              default: h(() => [
-                e.props.loading ? (o(), n(e.NmorphIconLoader, { key: 0 })) : (o(), n(e.NmorphIconChevronDown, { key: 1 }))
+            f(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
+              default: m(() => [
+                e.props.loading ? (r(), i(e.NmorphIconLoader, { key: 0 })) : (r(), i(e.NmorphIconChevronDown, { key: 1 }))
               ]),
               _: 1
               /* STABLE */
@@ -99,7 +103,7 @@ function I(f, m, p, e, M, z) {
           /* NEED_PATCH */
         )
       ]),
-      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), n(e.NmorphDropdown, {
+      e.nmorphSelectDOMRef && !e.props.disabled ? (r(), i(e.NmorphDropdown, {
         key: 0,
         open: e.open && !e.props.loading,
         "relative-element": e.nmorphSelectDOMRef,
@@ -108,107 +112,110 @@ function I(f, m, p, e, M, z) {
         "min-width": e.optionsMinWidth,
         "max-width": "calc(100vw - 16px)",
         "z-index": e.props.zIndex,
-        onOnOutsideClick: e.closeHandler
+        "aria-label": e.name,
+        onOnOutsideClick: e.closeHandler,
+        onOnEscapeKeydown: e.escapeHandler
       }, {
-        default: h(() => [
-          t(
-            "div",
-            D,
-            [
-              e.props.loading ? (o(), n(e.NmorphIcon, {
-                key: 0,
-                class: "nmorph-select__chevron",
-                size: "medium"
-              }, {
-                default: h(() => [
-                  v(e.NmorphIconChevronDown)
-                ]),
-                _: 1
-                /* STABLE */
-              })) : 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 */
-          )
+        default: m(() => [
+          t("div", {
+            id: e.listboxId,
+            ref: "optionsDOMRef",
+            class: "nmorph-select__options",
+            role: "listbox"
+          }, [
+            e.props.loading ? (r(), i(e.NmorphIcon, {
+              key: 0,
+              class: "nmorph-select__chevron",
+              size: "medium"
+            }, {
+              default: m(() => [
+                f(e.NmorphIconChevronDown)
+              ]),
+              _: 1
+              /* STABLE */
+            })) : e.virtualEnabled ? (r(), n(
+              "div",
+              {
+                key: 1,
+                ref: e.virtualList.containerRef,
+                class: "nmorph-select__virtual-list",
+                style: s({ maxHeight: e.virtualMaxHeight }),
+                onScroll: v[0] || (v[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
+              },
+              [
+                t(
+                  "div",
+                  {
+                    class: "nmorph-select__virtual-spacer",
+                    style: s(e.virtualSpacerStyle)
+                  },
+                  [
+                    t(
+                      "div",
+                      {
+                        class: "nmorph-select__virtual-content",
+                        style: s(e.virtualContentStyle)
+                      },
+                      [
+                        (r(!0), n(
+                          d,
+                          null,
+                          c(e.virtualOptions, (o) => (r(), i(e.NmorphSelectOption, h({
+                            id: e.getOptionId(o.item.value),
+                            ref_for: !0,
+                            ref: (g) => e.setVirtualOptionRef(g, o.index),
+                            key: o.index
+                          }, { ref_for: !0 }, o.item, {
+                            focused: o.item.value === e.currentFocusedEl,
+                            height: e.props.height
+                          }), null, 16, ["id", "focused", "height"]))),
+                          128
+                          /* KEYED_FRAGMENT */
+                        ))
+                      ],
+                      4
+                      /* STYLE */
+                    )
+                  ],
+                  4
+                  /* STYLE */
+                )
+              ],
+              36
+              /* STYLE, NEED_HYDRATION */
+            )) : (r(), n(
+              d,
+              { key: 2 },
+              [
+                (r(!0), n(
+                  d,
+                  null,
+                  c(y.options, (o) => (r(), i(e.NmorphSelectOption, h({
+                    id: e.getOptionId(o.value),
+                    key: o.value
+                  }, { ref_for: !0 }, o, {
+                    focused: o.value === e.currentFocusedEl,
+                    height: e.props.height
+                  }), null, 16, ["id", "focused", "height"]))),
+                  128
+                  /* KEYED_FRAGMENT */
+                )),
+                b(p.$slots, "default")
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))
+          ], 8, D)
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index"])) : k("v-if", !0)
+      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index", "aria-label"])) : k("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const B = /* @__PURE__ */ x(y, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
+const B = /* @__PURE__ */ H(w, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
 export {
   B as default
 };

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

@@ -1,17 +1,17 @@
 import './NmorphSelect.css';
-import { defineComponent as le, computed as a, ref as s, watch as f, nextTick as E, onMounted as ae, onUnmounted as re, provide as L } from "vue";
-import { NmorphComponentHeight as ne } from "../../../types/index.js";
-import { useModifiers as ue } from "../../../utils/create-modifiers.js";
-import { useI18n as oe } from "vue-i18n";
-import { useFormItemInput as ie } from "../nmorph-form/use-form-item-input.js";
-import { useVirtualList as se } from "../../../hooks/use-virtual-list.js";
-import de from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import ve from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
-import ce from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import fe from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
-import pe from "../../../assets/icons/chevron-down.svg.js";
-import me from "../../../assets/icons/loader.svg.js";
-const _e = /* @__PURE__ */ le({
+import { defineComponent as ne, computed as a, ref as d, watch as f, nextTick as L, onMounted as ue, onUnmounted as oe, provide as R } from "vue";
+import { NmorphComponentHeight as ie } from "../../../types/index.js";
+import { useModifiers as se } from "../../../utils/create-modifiers.js";
+import { useI18n as de } from "vue-i18n";
+import { useFormItemInput as ve } from "../nmorph-form/use-form-item-input.js";
+import { useVirtualList as ce } from "../../../hooks/use-virtual-list.js";
+import fe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import pe from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
+import me from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import he from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
+import ge from "../../../assets/icons/chevron-down.svg.js";
+import ye from "../../../assets/icons/loader.svg.js";
+const Ce = /* @__PURE__ */ ne({
   __name: "NmorphSelect",
   props: {
     noElementPlaceholder: { type: String, required: !1, default: "" },
@@ -23,11 +23,12 @@ const _e = /* @__PURE__ */ le({
     open: { type: Boolean, required: !1, default: !1 },
     fill: { type: Boolean, required: !1, default: !1 },
     optionsWidth: { type: String, required: !1, default: "truncate" },
-    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: 0 },
     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 },
@@ -36,39 +37,39 @@ const _e = /* @__PURE__ */ le({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(V, { expose: B, emit: T }) {
-    B();
-    const { t: O } = oe(), l = V, S = a(
-      () => l.noElementPlaceholder ? l.noElementPlaceholder : O("noElementPlaceholder")
-    ), m = T, t = s(l.modelValue), r = s(l.open), d = a(() => l.disabled || l.loading), h = a(() => l.optionsWidth === "auto"), g = s(!0), { id: C, name: P, autocomplete: k, tabindex: R } = ie(l), y = (e) => {
-      if (!d.value) {
+  setup(T, { expose: C, emit: P }) {
+    C();
+    const { t: M } = de(), l = T, $ = a(
+      () => l.noElementPlaceholder ? l.noElementPlaceholder : M("noElementPlaceholder")
+    ), m = P, t = d(l.modelValue), r = d(l.open), v = a(() => l.disabled || l.loading), h = a(() => l.optionsWidth === "auto"), g = d(!0), { id: y, name: k, autocomplete: W, tabindex: U } = ve(l), H = (e) => {
+      if (!v.value) {
         if (r.value = !1, typeof t.value == "string" && (!l.valueRequired && t.value === e ? t.value = "" : t.value = e, m("update:model-value", t.value)), Array.isArray(t.value)) {
-          const n = t.value.includes(e), ee = t.value.length === 1 && n;
-          if (l.valueRequired && ee) return;
-          n ? t.value = t.value.filter((te) => te !== e) : t.value = [...t.value, e];
+          const n = t.value.includes(e), S = t.value.length === 1 && n;
+          if (l.valueRequired && S) return;
+          n ? t.value = t.value.filter((re) => re !== e) : t.value = [...t.value, e];
         }
         m("update:model-value", t.value);
       }
-    }, p = s(!1), W = () => {
+    }, p = d(!1), z = () => {
       p.value = !0;
-    }, U = () => {
+    }, F = () => {
       p.value = !1;
-    }, z = a(
-      () => ue({
-        nmorph: [ne[l.height]],
+    }, j = a(
+      () => se({
+        nmorph: [ie[l.height]],
         "nmorph-select": [
           `${l.disabled && "disabled"}`,
           `${l.modelValue ? "on" : "off"}`,
           `${l.loading && "loading"}`,
-          `${r.value && !d.value && "open"}`,
+          `${r.value && !v.value && "open"}`,
           `${l.fill && "fill"}`,
           `${h.value && "options-auto-width"}`,
           `${g.value ? "selected-line-outset" : "selected-line-inset"}`,
           `${p.value && "focus"}`
         ]
       })
-    ), F = () => {
-      d.value || (r.value = !r.value);
+    ), Y = () => {
+      v.value || (r.value = !r.value);
     };
     f(
       r,
@@ -86,25 +87,26 @@ const _e = /* @__PURE__ */ le({
         e && (r.value = !1);
       }
     );
-    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), q = s(null), H = s([]), x = a(() => l.options), c = a(() => l.virtual && x.value.length > 0), M = a(() => ({
+    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), q = d(null), x = d([]), I = a(() => l.options), c = a(() => l.virtual && I.value.length > 0), w = a(() => ({
       basic: 30,
       thick: 38,
       thin: 22
-    })[l.height || "basic"]), w = a(() => l.virtualItemHeight || M.value), A = a(() => l.virtualOverscan), v = se(x, {
+    })[l.height || "basic"]), D = a(() => l.virtualItemHeight || w.value), A = a(() => l.virtualOverscan), E = a(() => l.virtualDynamicHeight), s = ce(I, {
       enabled: c,
-      itemHeight: w,
-      overscan: A
-    }), j = a(() => v.virtualItems.value), Y = a(() => ({
-      height: `${v.totalHeight.value}px`
-    })), G = a(() => ({
-      transform: `translateY(${v.offsetTop.value}px)`
-    })), $ = (e) => typeof e == "number" ? `${e}px` : e, J = a(() => $(l.virtualMaxHeight)), I = () => {
-      i.value.length > 0 || !q.value || (H.value = Array.from(q.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
+      itemHeight: D,
+      overscan: A,
+      dynamic: E
+    }), G = a(() => s.virtualItems.value), J = a(() => ({
+      height: `${s.totalHeight.value}px`
+    })), K = a(() => ({
+      transform: `translateY(${s.offsetTop.value}px)`
+    })), V = (e) => typeof e == "number" ? `${e}px` : e, Q = a(() => V(l.virtualMaxHeight)), O = () => {
+      i.value.length > 0 || !q.value || (x.value = Array.from(q.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
     }, o = a(
-      () => i.value.length > 0 ? i.value.map((e) => e.value) : H.value
-    ), K = a(() => c.value ? Array.isArray(t.value) ? t.value : t.value ? [t.value] : [] : o.value), u = s(0), N = a(() => o.value[u.value] || "");
+      () => i.value.length > 0 ? i.value.map((e) => e.value) : x.value
+    ), X = a(() => c.value ? Array.isArray(t.value) ? t.value : t.value ? [t.value] : [] : o.value), u = d(0), N = a(() => o.value[u.value] || ""), Z = a(() => `${y.value}-listbox`), ee = (e) => `${y.value}-option-${e.replace(/\s+/g, "-")}`;
     f(u, (e) => {
-      r.value && c.value && v.scrollToIndex(e);
+      r.value && c.value && s.scrollToIndex(e);
     }), f(
       o,
       (e) => {
@@ -113,45 +115,54 @@ const _e = /* @__PURE__ */ le({
       { immediate: !0 }
     ), f(r, async (e) => {
       if (e) {
-        if (await E(), I(), typeof t.value == "string") {
+        if (await L(), O(), typeof t.value == "string") {
           const n = o.value.indexOf(t.value);
           n !== -1 && (u.value = n);
         }
-        v.refresh(), c.value && v.scrollToIndex(u.value);
+        s.refresh(), c.value && s.scrollToIndex(u.value);
       }
-    }), ae(async () => {
-      await E(), I(), document.addEventListener("click", b);
-    }), re(() => {
+    }), ue(async () => {
+      await L(), O(), document.addEventListener("click", b);
+    }), oe(() => {
       document.removeEventListener("click", b);
     });
-    const Q = a(() => typeof t.value == "string" ? t.value === "" ? S.value : i.value.find((e) => e.value === t.value)?.label : i.value.find((e) => e.value === t.value)?.label), X = a(() => i.value.length > 0 ? i.value.filter((n) => t.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(t.value) ? t.value.map((n) => ({ text: n, value: n })) : [{ text: t.value, value: t.value }]);
-    L("select-selected-value", t), L("select-change-selected-value", y);
-    const D = s(null), Z = a(
-      () => h.value ? `${D.value?.clientWidth || 0}px` : void 0
-    ), _ = { t: O, props: l, computedNoElementPlaceholder: S, emit: m, initialValue: t, open: r, disabledInput: d, autoOptionsWidth: h, selectedLineOutset: g, id: C, name: P, autocomplete: k, tabindex: R, changeHandler: y, focus: p, focusHandler: W, blurHandler: U, modifiers: z, clickHandler: F, closeHandler: b, optionsMap: i, optionsDOMRef: q, slotDomOptions: H, renderedOptions: x, virtualEnabled: c, defaultOptionHeight: M, virtualItemHeight: w, virtualOverscan: A, virtualList: v, virtualOptions: j, virtualSpacerStyle: Y, virtualContentStyle: G, getCssSize: $, virtualMaxHeight: J, refreshDomOptions: I, domOptions: o, nativeOptions: K, currentIndex: u, currentFocusedEl: N, selectedValueTitle: Q, tags: X, nmorphSelectDOMRef: D, optionsMinWidth: Z, spaceHandler: () => {
-      d.value || (r.value = !r.value);
+    const te = a(() => typeof t.value == "string" ? t.value === "" ? $.value : i.value.find((e) => e.value === t.value)?.label : i.value.find((e) => e.value === t.value)?.label), le = a(() => i.value.length > 0 ? i.value.filter((n) => t.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(t.value) ? t.value.map((n) => ({ text: n, value: n })) : [{ text: t.value, value: t.value }]);
+    R("select-selected-value", t), R("select-change-selected-value", H);
+    const _ = d(null), ae = a(
+      () => h.value ? `${_.value?.clientWidth || 0}px` : void 0
+    ), B = { t: M, props: l, computedNoElementPlaceholder: $, emit: m, initialValue: t, open: r, disabledInput: v, autoOptionsWidth: h, selectedLineOutset: g, id: y, name: k, autocomplete: W, tabindex: U, changeHandler: H, focus: p, focusHandler: z, blurHandler: F, modifiers: j, clickHandler: Y, closeHandler: b, optionsMap: i, optionsDOMRef: q, slotDomOptions: x, renderedOptions: I, virtualEnabled: c, defaultOptionHeight: w, virtualItemHeight: D, virtualOverscan: A, virtualDynamicHeight: E, virtualList: s, virtualOptions: G, virtualSpacerStyle: J, virtualContentStyle: K, getCssSize: V, virtualMaxHeight: Q, refreshDomOptions: O, domOptions: o, nativeOptions: X, currentIndex: u, currentFocusedEl: N, listboxId: Z, getOptionId: ee, selectedValueTitle: te, tags: le, nmorphSelectDOMRef: _, optionsMinWidth: ae, spaceHandler: () => {
+      v.value || (r.value = !r.value);
     }, arrowDownHandler: () => {
-      d.value || o.value.length !== 0 && (u.value = (u.value + 1) % o.value.length);
+      v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value + 1) % o.value.length);
     }, arrowUpHandler: () => {
-      d.value || o.value.length !== 0 && (u.value = (u.value - 1 + o.value.length) % o.value.length);
+      v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value - 1 + o.value.length) % o.value.length);
     }, enterHandler: () => {
-      r.value && N.value && y(N.value);
+      r.value && N.value && H(N.value);
+    }, setVirtualOptionRef: (e, n) => {
+      const S = e instanceof Element ? e : e?.$el;
+      s.measureElement(n, S);
+    }, escapeHandler: () => {
+      r.value = !1;
+    }, homeHandler: () => {
+      u.value = 0;
+    }, endHandler: () => {
+      u.value = Math.max(o.value.length - 1, 0);
     }, get NmorphTagItem() {
-      return fe;
+      return he;
     }, get NmorphIcon() {
-      return ce;
+      return me;
     }, get NmorphSelectOption() {
-      return ve;
+      return pe;
     }, get NmorphDropdown() {
-      return de;
+      return fe;
     }, get NmorphIconLoader() {
-      return me;
+      return ye;
     }, get NmorphIconChevronDown() {
-      return pe;
+      return ge;
     } };
-    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
+    return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
   }
 });
 export {
-  _e as default
+  Ce as default
 };

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.css

@@ -1 +1 @@
-.nmorph-select-option{--hover-bg: var(--nmorph-accent-color);--hover-color: var(--nmorph-white-color);display:flex;align-items:center;justify-content:space-between;gap:var(--indentation-01);box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-select-option .nmorph-select-option__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nmorph-select-option .nmorph-select-option__content span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nmorph-select-option .nmorph-select-option__checked{flex:0 0 auto}.nmorph-select-option:not(.nmorph-select-option--disabled):hover{background:var(--hover-bg)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover span{color:var(--hover-color)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled){background:var(--hover-bg)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) span{color:var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--disabled{cursor:not-allowed;opacity:.6;pointer-events:none}
+.nmorph-select-option{--hover-bg: var(--nmorph-accent-color);--hover-color: var(--nmorph-white-color);display:flex;gap:var(--indentation-01);justify-content:space-between;align-items:center;box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-select-option .nmorph-select-option__content{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select-option .nmorph-select-option__content span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select-option .nmorph-select-option__checked{flex:0 0 auto}.nmorph-select-option:not(.nmorph-select-option--disabled):hover{background:var(--hover-bg)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover span{color:var(--hover-color)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled){background:var(--hover-bg)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) span{color:var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--disabled{cursor:not-allowed;opacity:.6;pointer-events:none}

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue.js

@@ -1,38 +1,41 @@
 import './NmorphSelectOption.css';
-import c from "./NmorphSelectOption.vue2.js";
-import { openBlock as o, createElementBlock as n, normalizeClass as l, createElementVNode as r, toDisplayString as s, renderSlot as i, createBlock as a, withCtx as m, createVNode as p, createCommentVNode as d } from "vue";
+import t from "./NmorphSelectOption.vue2.js";
+import { openBlock as o, createElementBlock as l, normalizeClass as n, createElementVNode as r, toDisplayString as a, renderSlot as i, createBlock as s, withCtx as d, createVNode as p, createCommentVNode as m } from "vue";
 /* empty css                        */
 import _ from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const h = ["value"], f = { class: "nmorph-select-option__content" };
-function k(t, u, v, e, N, S) {
-  return o(), n("div", {
-    class: l(e.modifiers),
-    onClick: e.clickHandler,
-    value: e.props.value
+const h = ["value", "aria-selected", "aria-disabled"], f = { class: "nmorph-select-option__content" };
+function k(c, v, N, e, b, u) {
+  return o(), l("div", {
+    class: n(e.modifiers),
+    value: e.props.value,
+    role: "option",
+    "aria-selected": e.checked,
+    "aria-disabled": e.props.disabled,
+    onClick: e.clickHandler
   }, [
     r("div", f, [
       r(
         "span",
         null,
-        s(e.props.label),
+        a(e.props.label),
         1
         /* TEXT */
       ),
-      i(t.$slots, "default")
+      i(c.$slots, "default")
     ]),
-    e.checked ? (o(), a(e.NmorphIcon, {
+    e.checked ? (o(), s(e.NmorphIcon, {
       key: 0,
       class: "nmorph-select-option__checked"
     }, {
-      default: m(() => [
+      default: d(() => [
         p(e.NmorphIconSuccess)
       ]),
       _: 1
       /* STABLE */
-    })) : d("v-if", !0)
+    })) : m("v-if", !0)
   ], 10, h);
 }
-const B = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue"]]);
+const B = /* @__PURE__ */ _(t, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue"]]);
 export {
   B as default
 };

package/dist/components/form/nmorph-select-button/NmorphSelectButton.css

@@ -1 +1 @@
-.nmorph-select-button{--track-padding: 4px;--item-size: calc(var(--default-thickness-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-small);display:inline-flex;align-items:center;width:fit-content;padding:var(--track-padding);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-select-button.nmorph-select-button--thin{--item-size: calc(var(--thin-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-extra-small)}.nmorph-select-button.nmorph-select-button--thick{--item-size: calc(var(--thick-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-base)}.nmorph-select-button.nmorph-select-button--disabled{cursor:not-allowed;opacity:.6}.nmorph-select-button.nmorph-select-button--fill{width:100%}.nmorph-select-button.nmorph-select-button--fill>.nmorph-select-button-item{flex:1 1 0;min-width:0}
+.nmorph-select-button{--track-padding: 4px;--item-size: calc(var(--default-thickness-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-small);display:inline-flex;align-items:center;width:fit-content;padding:var(--track-padding);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-select-button.nmorph-select-button--thin{--item-size: calc(var(--thin-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-extra-small)}.nmorph-select-button.nmorph-select-button--thick{--item-size: calc(var(--thick-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-base)}.nmorph-select-button.nmorph-select-button--disabled{cursor:not-allowed;opacity:.6}.nmorph-select-button.nmorph-select-button--fill{width:100%}.nmorph-select-button.nmorph-select-button--fill>.nmorph-select-button-item{flex:1 1 0;min-width:0}