@nmorph/nmorph-ui-kit 2.2.13 → 2.2.16

package/dist/components/data/nmorph-tag-list/NmorphTagList.vue.js

@@ -14,9 +14,8 @@ function p(f, _, d, r, u, g) {
         s(r.tagList, (o) => (e(), m(
           r.NmorphTagItem,
           i({
-            key: o.value,
-            ref_for: !0
-          }, o, { onClose: r.closeTagHandler }),
+            key: o.value
+          }, { ref_for: !0 }, o, { onClose: r.closeTagHandler }),
           null,
           16
           /* FULL_PROPS */

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.css

@@ -1 +1 @@
-.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);border:solid 2px var(--nmorph-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px}.nmorph-tag-item.nmorph-tag-item--nmorph-design{border:none;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-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}
+.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);border:solid 2px var(--nmorph-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px}.nmorph-tag-item.nmorph-tag-item--nmorph-design{background:var(--nmorph-main-color);border:none;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-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}

package/dist/components/feedback/nmorph-alert/NmorphAlert.css

@@ -1 +1 @@
-.nmorph-alert{--background-color: var(--nmorph-overlay-color);display:inline-block;padding:var(--indentation-03) var(--indentation-04);background:var(--background-color);border-radius:var(--default-border-radius)}.nmorph-alert .nmorph-alert__content,.nmorph-alert .nmorph-alert__content-title{color:var(--nmorph-white-color);white-space:pre-line}.nmorph-alert .nmorph-alert__content-title{line-height:1;font-weight:600;font-size:var(--font-size-medium);line-height:var(--line-height-loose)}.nmorph-alert .nmorph-alert__html-wrapper{display:block}.nmorph-alert .nmorph-alert__wrapper{justify-content:space-between}.nmorph-alert .nmorph-alert__wrapper,.nmorph-alert .nmorph-alert__left-side{display:flex;align-items:center}.nmorph-alert .nmorph-alert__icon{margin-right:var(--indentation-03)}.nmorph-alert .nmorph-alert__close{margin-left:var(--indentation-03);cursor:pointer}.nmorph-alert .nmorph-alert__close .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-alert .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-success-color)}.nmorph-alert.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-error-color)}.nmorph-alert.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-warn-color)}.nmorph-alert.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-info-color)}.nmorph-alert.nmorph-alert--bordered{border:1px solid var(--nmorph-gray-color)}.nmorph-alert.nmorph-alert--fill{width:100%}.nmorph-alert .nmorph-alert__close{align-self:var(--nmorph-alert-close-align)}
+.nmorph-alert{--background-color: var(--nmorph-overlay-color);display:inline-block;padding:var(--indentation-03) var(--indentation-04);background:var(--background-color);border-radius:var(--default-border-radius)}.nmorph-alert .nmorph-alert__content,.nmorph-alert .nmorph-alert__content-title{color:var(--nmorph-white-color);white-space:pre-line}.nmorph-alert .nmorph-alert__content-title{font-weight:600;font-size:var(--font-size-medium);line-height:1;line-height:var(--line-height-loose)}.nmorph-alert .nmorph-alert__html-wrapper{display:block}.nmorph-alert .nmorph-alert__wrapper{justify-content:space-between}.nmorph-alert .nmorph-alert__wrapper,.nmorph-alert .nmorph-alert__left-side{display:flex;align-items:center}.nmorph-alert .nmorph-alert__icon{margin-right:var(--indentation-03)}.nmorph-alert .nmorph-alert__close{align-self:var(--nmorph-alert-close-align);margin-left:var(--indentation-03);cursor:pointer}.nmorph-alert .nmorph-alert__close .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-alert .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-success-color)}.nmorph-alert.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-error-color)}.nmorph-alert.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-warn-color)}.nmorph-alert.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-info-color)}.nmorph-alert.nmorph-alert--bordered{border:1px solid var(--nmorph-gray-color)}.nmorph-alert.nmorph-alert--fill{width:100%}

package/dist/components/feedback/nmorph-callout/NmorphCallout.css

@@ -1 +1 @@
-.nmorph-callout{--callout-color: var(--nmorph-accent-color);position:relative;padding:8px 12px;overflow:hidden;border-radius:4px}.nmorph-callout:before{position:absolute;top:0;left:0;width:3px;height:100%;background:var(--callout-color);content:""}.nmorph-callout:after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--callout-color);opacity:.2;content:""}.nmorph-callout.nmorph-callout--warning{--callout-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--callout-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--callout-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{font-weight:600;font-size:var(--font-size-medium);line-height:var(--line-height-loose);margin-bottom:8px}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:pre-wrap}
+.nmorph-callout{--callout-color: var(--nmorph-accent-color);position:relative;margin-bottom:12px;padding:8px 12px;overflow:hidden;border-radius:4px}.nmorph-callout:before{position:absolute;top:0;left:0;width:3px;height:100%;background:var(--callout-color);content:""}.nmorph-callout:after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--callout-color);opacity:.2;content:""}.nmorph-callout.nmorph-callout--warning{--callout-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--callout-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--callout-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{margin-bottom:8px;font-weight:600;font-size:var(--font-size-medium);line-height:var(--line-height-loose)}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:pre-wrap}

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

@@ -1 +1 @@
-.nmorph-dialog{width:var(--width);padding:var(--indentation-04);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);--width: var(--nmorph-dialog-width)}.nmorph-dialog .nmorph-dialog__header{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{cursor:pointer}
+.nmorph-dialog{position:absolute;top:50%;left:50%;width:var(--width);padding:var(--indentation-04);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);transform:translate(-50%,-50%)}.nmorph-dialog .nmorph-dialog__header{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{cursor:pointer}.nmorph-dialog{--width: var(--nmorph-dialog-width)}

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

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

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

@@ -1,9 +1,9 @@
 import './NmorphDialog.css';
 import { defineComponent as f, computed as c, ref as d, watch as y } from "vue";
 import { useModifiers as O } from "../../../utils/create-modifiers.js";
-import T from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import h from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import v from "../../../assets/icons/cross.svg.js";
+import v from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import T from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import h from "../../../assets/icons/cross.svg.js";
 const C = /* @__PURE__ */ f({
   __name: "NmorphDialog",
   props: {
@@ -14,49 +14,52 @@ const C = /* @__PURE__ */ f({
     closeDelay: { type: Number, required: !1, default: 0 },
     closeOnClickModal: { type: Boolean, required: !1, default: !0 },
     showClose: { type: Boolean, required: !1, default: !0 },
-    zIndex: { type: Number, required: !1 },
-    closeOnOverlay: { type: Boolean, required: !1, default: !0 }
+    zIndex: { type: Number, required: !1, default: void 0 },
+    closeOnOverlay: { type: Boolean, required: !1, default: !0 },
+    closeOnEscape: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["on-close", "update:model-value"],
   setup(i, { expose: n, emit: m }) {
     n();
-    const e = i, l = m, p = c(
+    const e = i, r = m, p = c(
       () => O({
         "nmorph-dialog": []
       })
     ), u = d(e.modelValue);
-    let o = null, t = null;
+    let t = null, l = null;
     y(
       () => e.modelValue,
-      (r) => {
-        r ? (t && clearTimeout(t), o = setTimeout(() => {
+      (o) => {
+        o ? (l && clearTimeout(l), t = setTimeout(() => {
           u.value = !0;
-        }, e.openDelay)) : (o && clearTimeout(o), t = setTimeout(() => {
+        }, e.openDelay)) : (t && clearTimeout(t), l = setTimeout(() => {
           u.value = !1;
         }, e.closeDelay));
       },
       { immediate: !0 }
     );
     const a = () => {
-      l("on-close"), o && clearTimeout(o), t = setTimeout(() => {
-        l("update:model-value", !1);
-      }, e.closeDelay);
-    }, s = { props: e, emit: l, modifiers: p, isVisible: u, get openTimeout() {
-      return o;
-    }, set openTimeout(r) {
-      o = r;
-    }, get closeTimeout() {
+      r("on-close"), t && clearTimeout(t);
+      const o = () => {
+        r("update:model-value", !1);
+      };
+      e.closeDelay <= 0 ? o() : l = setTimeout(o, e.closeDelay);
+    }, s = { props: e, emit: r, modifiers: p, isVisible: u, get openTimeout() {
       return t;
-    }, set closeTimeout(r) {
-      t = r;
+    }, set openTimeout(o) {
+      t = o;
+    }, get closeTimeout() {
+      return l;
+    }, set closeTimeout(o) {
+      l = o;
     }, closeHandler: a, clickOnOverlay: () => {
       e.closeOnOverlay && a();
     }, get NmorphOverlay() {
-      return h;
-    }, get NmorphIcon() {
       return T;
-    }, get NmorphIconCross() {
+    }, get NmorphIcon() {
       return v;
+    }, get NmorphIconCross() {
+      return h;
     } };
     return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.css

@@ -1 +1 @@
-.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block;width:var(--nmorph-tooltip-width)}.nmorph-tooltip .nmorph-tooltip__content{position:relative}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;max-width:var(--max-width);padding:var(--indentation-03);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color);width:var(--width);height:var(--height);background:var(--nmorph-main-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-color:var(--nmorph-main-color) transparent transparent transparent;border-width:8px 8px 0;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-color:transparent var(--nmorph-main-color) transparent transparent;border-width:8px 8px 8px 0;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-color:transparent transparent var(--nmorph-main-color) transparent;border-width:0 8px 8px;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-color:transparent transparent transparent var(--nmorph-main-color);border-width:8px 0 8px 8px;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}
+.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;width:var(--width);max-width:var(--max-width);height:var(--height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-tooltip-width)}

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

@@ -46,9 +46,9 @@ function M(l, s, i, o, g, T) {
                 "div",
                 {
                   key: 0,
+                  ref: "tooltipBody",
                   class: "nmorph-tooltip__info-content",
-                  style: a({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y }),
-                  ref: "tooltipBody"
+                  style: a({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y })
                 },
                 [
                   e("div", k, [
@@ -81,7 +81,7 @@ function M(l, s, i, o, g, T) {
                     { class: "nmorph-tooltip__triangle" },
                     null,
                     -1
-                    /* HOISTED */
+                    /* CACHED */
                   )),
                   o.props.text ? (t(), n(
                     "span",

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css

@@ -1 +1 @@
-.nmorph-autocomplete .nmorph-autocomplete__list-item{padding:var(--indentation-02) var(--indentation-04);cursor:pointer}.nmorph-autocomplete .nmorph-autocomplete__list-item:last-child{border-bottom-left-radius:var(--indentation-02);border-bottom-right-radius:var(--indentation-02)}.nmorph-autocomplete .nmorph-autocomplete__loading{display:flex;align-items:center;justify-content:center;height:100px}.nmorph-autocomplete .nmorph-autocomplete__list-item:hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete .nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete .nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete .nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete .nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}
+.nmorph-autocomplete .nmorph-autocomplete__list-item{padding:var(--indentation-02) var(--indentation-04);cursor:pointer}.nmorph-autocomplete .nmorph-autocomplete__list-item:last-child{border-bottom-right-radius:var(--indentation-02);border-bottom-left-radius:var(--indentation-02)}.nmorph-autocomplete .nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete .nmorph-autocomplete__list-item:hover,.nmorph-autocomplete .nmorph-autocomplete__list-item--focused{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete .nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete .nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete .nmorph-autocomplete__list--dynamic .nmorph-autocomplete__list-item{height:auto}.nmorph-autocomplete .nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete .nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}

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

@@ -1,31 +1,28 @@
 import './NmorphAutocomplete.css';
 import v from "./NmorphAutocomplete.vue2.js";
-import { openBlock as l, createElementBlock as t, normalizeClass as f, createElementVNode as r, createVNode as i, createBlock as k, withCtx as d, renderSlot as n, normalizeStyle as c, Fragment as p, renderList as s, createTextVNode as h, toDisplayString as _, createCommentVNode as y } from "vue";
+import { openBlock as l, createElementBlock as t, normalizeClass as i, createElementVNode as n, createVNode as d, createBlock as y, withCtx as p, renderSlot as c, normalizeStyle as m, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as x } from "vue";
 /* empty css                        */
-import g from "../../../_virtual/_plugin-vue_export-helper.js";
-const x = { class: "nmorph-autocomplete__input-content" }, H = {
+import k from "../../../_virtual/_plugin-vue_export-helper.js";
+const b = { class: "nmorph-autocomplete__input-content" }, g = {
   ref: "nmorphAutocompleteDOMRef",
   class: "nmorph-autocomplete__input"
-}, N = {
+}, H = {
   key: 0,
   class: "nmorph-autocomplete__loading"
-}, b = ["onClick"], C = {
-  key: 2,
-  class: "nmorph-autocomplete__list"
-}, S = ["onClick"];
-function V(a, m, z, e, L, A) {
+}, N = ["id"], C = ["id", "aria-selected", "onClick"], I = ["id"], O = ["id", "aria-selected", "onClick"];
+function V(a, s, S, e, z, A) {
   return l(), t(
     "div",
     {
-      class: f(e.modifiers)
+      class: i(e.modifiers)
     },
     [
-      r("div", x, [
-        r(
+      n("div", b, [
+        n(
           "div",
-          H,
+          g,
           [
-            i(e.NmorphTextInput, {
+            d(e.NmorphTextInput, {
               id: e.props.id,
               name: e.props.name,
               autocomplete: e.props.autocomplete,
@@ -34,120 +31,133 @@ function V(a, m, z, e, L, A) {
               "model-value": e.initialValue,
               placeholder: e.props.placeholder,
               clearable: e.props.clearable,
+              "input-attrs": e.inputAttrs,
               onFocus: e.focusHandler,
+              onKeydown: e.keydownHandler,
               "onUpdate:modelValue": e.updateValueHandler
-            }, null, 8, ["id", "name", "autocomplete", "height", "disabled", "model-value", "placeholder", "clearable"])
+            }, null, 8, ["id", "name", "autocomplete", "height", "disabled", "model-value", "placeholder", "clearable", "input-attrs"])
           ],
           512
           /* NEED_PATCH */
         )
       ]),
-      e.nmorphAutocompleteDOMRef ? (l(), k(e.NmorphDropdown, {
+      e.nmorphAutocompleteDOMRef ? (l(), y(e.NmorphDropdown, {
         key: 0,
         open: e.open,
         "relative-element": e.nmorphAutocompleteDOMRef,
         "y-offset": 1,
         "z-index": e.props.zIndex,
-        onOnOutsideClick: e.closeHandler
+        "aria-label": e.props.name || e.props.id || "autocomplete",
+        onOnOutsideClick: e.closeHandler,
+        onOnEscapeKeydown: e.closeHandler
       }, {
-        default: d(() => [
-          e.loader ? (l(), t("div", N, [
-            n(a.$slots, "loader", {}, () => [
-              i(e.NmorphIcon, { size: "large" }, {
-                default: d(() => [
-                  i(e.NmorphIconLoader)
+        default: p(() => [
+          e.loader ? (l(), t("div", H, [
+            c(a.$slots, "loader", {}, () => [
+              d(e.NmorphIcon, { size: "large" }, {
+                default: p(() => [
+                  d(e.NmorphIconLoader)
                 ]),
                 _: 1
                 /* STABLE */
               })
             ])
-          ])) : e.virtualEnabled ? (l(), t(
-            "div",
-            {
-              key: 1,
-              ref: e.virtualList.containerRef,
-              class: "nmorph-autocomplete__list nmorph-autocomplete__list--virtual",
-              style: c({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
-              onScroll: m[0] || (m[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
-            },
-            [
-              r(
-                "div",
-                {
-                  class: "nmorph-autocomplete__virtual-spacer",
-                  style: c(e.virtualSpacerStyle)
-                },
-                [
-                  r(
-                    "div",
-                    {
-                      class: "nmorph-autocomplete__virtual-content",
-                      style: c(e.virtualContentStyle)
-                    },
-                    [
-                      (l(!0), t(
-                        p,
-                        null,
-                        s(e.virtualItems, (o) => (l(), t("div", {
-                          key: o.index,
-                          class: "nmorph-autocomplete__list-item",
-                          onClick: () => e.clickHandler(o.item)
-                        }, [
-                          n(a.$slots, "default", {
-                            scope: o.item
-                          }, () => [
-                            h(
-                              _(o.item.value),
-                              1
-                              /* TEXT */
-                            )
-                          ])
-                        ], 8, b))),
-                        128
-                        /* KEYED_FRAGMENT */
-                      ))
-                    ],
-                    4
-                    /* STYLE */
-                  )
-                ],
-                4
-                /* STYLE */
-              )
-            ],
-            36
-            /* STYLE, NEED_HYDRATION */
-          )) : (l(), t("div", C, [
+          ])) : e.virtualEnabled ? (l(), t("div", {
+            key: 1,
+            ref: e.virtualList.containerRef,
+            id: e.listboxId,
+            class: i(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
+            style: m({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
+            role: "listbox",
+            onScroll: s[0] || (s[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
+          }, [
+            n(
+              "div",
+              {
+                class: "nmorph-autocomplete__virtual-spacer",
+                style: m(e.virtualSpacerStyle)
+              },
+              [
+                n(
+                  "div",
+                  {
+                    class: "nmorph-autocomplete__virtual-content",
+                    style: m(e.virtualContentStyle)
+                  },
+                  [
+                    (l(!0), t(
+                      _,
+                      null,
+                      h(e.virtualItems, (o) => (l(), t("div", {
+                        id: e.getOptionId(o.index),
+                        ref_for: !0,
+                        ref: (r) => e.setVirtualItemRef(r, o.index),
+                        key: o.index,
+                        class: i(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": o.index === e.currentIndex }]),
+                        role: "option",
+                        "aria-selected": o.index === e.currentIndex,
+                        onClick: () => e.clickHandler(o.item)
+                      }, [
+                        c(a.$slots, "default", {
+                          scope: o.item
+                        }, () => [
+                          f(
+                            u(o.item.value),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ], 10, C))),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ],
+                  4
+                  /* STYLE */
+                )
+              ],
+              4
+              /* STYLE */
+            )
+          ], 46, N)) : (l(), t("div", {
+            key: 2,
+            id: e.listboxId,
+            class: "nmorph-autocomplete__list",
+            role: "listbox"
+          }, [
             (l(!0), t(
-              p,
+              _,
               null,
-              s(e.filteredList, (o, u) => (l(), t("div", {
-                key: u,
-                class: "nmorph-autocomplete__list-item",
+              h(e.filteredList, (o, r) => (l(), t("div", {
+                id: e.getOptionId(r),
+                key: r,
+                class: i(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": r === e.currentIndex }]),
+                role: "option",
+                "aria-selected": r === e.currentIndex,
                 onClick: () => e.clickHandler(o)
               }, [
-                n(a.$slots, "default", { scope: o }, () => [
-                  h(
-                    _(o.value),
+                c(a.$slots, "default", { scope: o }, () => [
+                  f(
+                    u(o.value),
                     1
                     /* TEXT */
                   )
                 ])
-              ], 8, S))),
+              ], 10, O))),
               128
               /* KEYED_FRAGMENT */
             ))
-          ]))
+          ], 8, I))
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["open", "relative-element", "z-index"])) : y("v-if", !0)
+      }, 8, ["open", "relative-element", "z-index", "aria-label"])) : x("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const B = /* @__PURE__ */ g(v, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
+const M = /* @__PURE__ */ k(v, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
 export {
-  B as default
+  M as default
 };