@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/{chunk-ZX6M7SWO.mjs → chunk-F7LAKFMX.mjs}

@@ -1,20 +1,26 @@
 import {
-  Menu
-} from "./chunk-NUHMOAOY.mjs";
+  imageURL
+} from "./chunk-GE3YMFS6.mjs";
 import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
+  Menu
+} from "./chunk-DWA5UYLJ.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  afterFormReset
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/autocomplete.ts
+var isListKey = (e) => (e.key === "ArrowUp" || e.key === "ArrowDown") && Utils.plainKey(e);
 var _defaults = {
   i18n: {
     loading: "Loading results.",
     noResults: "No results.",
     results: (count) => `${count} ${count === 1 ? "result" : "results"} available.`,
-    selected: (count) => `${count} ${count === 1 ? "item" : "items"} selected.`
+    selected: (count) => `${count} ${count === 1 ? "item" : "items"} selected.`,
+    create: (text) => `Add "${text}"`
   },
   data: [],
   // Autocomplete data set
@@ -28,6 +34,9 @@ var _defaults = {
   },
   minLength: 1,
   // Min characters before autocomplete starts
+  searchDelay: 0,
+  allowCreate: false,
+  onCreate: null,
   isMultiSelect: false,
   onSearch: (text, autocomplete) => {
     const normSearch = text.toLocaleLowerCase();
@@ -38,81 +47,103 @@ var _defaults = {
     );
   },
   maxMenuHeight: "300px",
+  maxResults: Infinity,
   allowUnsafeHTML: false,
   selected: []
 };
 var _Autocomplete = class _Autocomplete extends Component {
   constructor(el, options) {
-    super(el, options, _Autocomplete);
+    super(el, options);
+    /**
+     * Whether the user left or dismissed the field since the last search, so
+     * late results must not reopen it. A field nobody has focused yet counts.
+     */
+    this._left = true;
+    // Counts selections, so a callback that selects again silences the stale event.
+    this._selection = 0;
+    /** The last search returned no suggestions. A text change clears it until the next one returns. */
+    this._noResults = false;
+    /** The form restored the input's text. The selection follows it, with no change event, as a native reset fires none. */
+    this._handleReset = () => {
+      this._cancelPendingSearch();
+      this._searchAbort?.abort();
+      this._selection++;
+      this.selectedValues = [...this._startingSelection];
+      if (!this.options.isMultiSelect) this._refreshInputText();
+      this._updateSelectedInfo();
+      this._resetAutocomplete();
+      this.close();
+    };
     this._handleInputBlur = () => {
       if (!this._pointerDown) {
+        this._left = true;
+        this._cancelPendingSearch();
         this.close();
         this._resetAutocomplete();
       }
     };
-    this._handleInputKeyup = () => {
-      _Autocomplete._keydown = false;
-    };
     this._handleInput = () => {
+      this._left = false;
       this.count = 0;
       const actualValue = this.el.value.toLocaleLowerCase();
       if (this.oldVal !== actualValue) {
         this._resetCurrentElementPosition();
+        this._noResults = false;
         if (this.el.matches(":focus-visible") && (!this.menu.isOpen || actualValue.length < this.options.minLength)) this.open();
       }
-      this._inputChangeDetection(actualValue);
+      this._inputChangeDetection(actualValue, true);
     };
     this._handleInputFocus = () => {
+      this._left = false;
       this.count = 0;
       const actualValue = this.el.value.toLocaleLowerCase();
       this._inputChangeDetection(actualValue);
     };
-    this._inputChangeDetection = (value) => {
+    this._inputChangeDetection = (value, typed) => {
       const deselected = !this.options.isMultiSelect && this.selectedValues.length > 0 && this.el.value !== (this.selectedValues[0].text || String(this.selectedValues[0].id));
       if (deselected) this.selectedValues = [];
       if (this.oldVal !== value) {
-        this._setStatusLoading();
-        this.options.onSearch(this.el.value, this);
+        this._noResults = false;
+        this._startSearch(typed);
       }
       if (deselected) this._triggerChanged();
       this.oldVal = value;
     };
-    this._handleInputKeydown = (e) => {
-      _Autocomplete._keydown = true;
-      if (e.key === Utils.keys.ESC || e.key === "Tab") {
-        this.close();
-        this._resetCurrentElementPosition();
+    this._handleInputKeydown = Utils.ignoringComposition((e) => {
+      if (e.key === "Escape" || e.key === "Tab") {
+        this._dismiss(e);
         return;
       }
-      const numItems = this.container.querySelectorAll("li").length;
-      if (e.key === Utils.keys.ENTER && this.activeIndex >= 0) {
-        const liElement = this.container.querySelectorAll("li")[this.activeIndex];
+      const options = this._options();
+      const numItems = options.length;
+      if (e.key === "Enter" && this.activeIndex >= 0) {
+        const liElement = options[this.activeIndex];
         if (liElement) {
-          this.selectOption(liElement.getAttribute("data-id"));
+          this._choose(liElement);
           e.preventDefault();
         }
         return;
       }
-      if (e.key === Utils.keys.ARROW_UP || e.key === Utils.keys.ARROW_DOWN) {
+      if (isListKey(e)) {
         e.preventDefault();
         if (!this.menu.isOpen && this._openTimer === void 0) {
           this.open();
           return;
         }
-        if (e.key === Utils.keys.ARROW_UP && this.activeIndex > 0) this.activeIndex--;
-        if (e.key === Utils.keys.ARROW_DOWN && this.activeIndex < numItems - 1)
+        if (e.key === "ArrowUp" && this.activeIndex > 0) this.activeIndex--;
+        if (e.key === "ArrowDown" && this.activeIndex < numItems - 1)
           this.activeIndex++;
         this._setActive(null);
         if (this.activeIndex >= 0) {
-          this._setActive(this.container.querySelectorAll("li")[this.activeIndex]);
-          this.container.children[this.activeIndex].scrollIntoView({
+          this._setActive(options[this.activeIndex]);
+          options[this.activeIndex].scrollIntoView({
             behavior: "smooth",
             block: "nearest",
             inline: "nearest"
           });
         }
       }
-    };
+    });
     this._handleInputClick = () => {
       this.open();
     };
@@ -124,10 +155,21 @@ var _Autocomplete = class _Autocomplete extends Component {
       if (!e.isPrimary) return;
       if (e.pointerType === "mouse" && e.button !== 0) return;
       this._pointerDown = true;
+      const listen = { capture: true, once: true, signal: this._events.signal };
+      this.el.ownerDocument.addEventListener("pointerup", this._handleContainerPointerUp, listen);
+      this.el.ownerDocument.addEventListener("pointercancel", this._handleContainerPointerUp, listen);
     };
     this._handleContainerPointerUp = () => {
       this._pointerDown = false;
     };
+    // The no-results row and group headings are not options, and a disabled row
+    // cannot be chosen. A press on any of them would move focus to the list,
+    // which nothing hands back, and Menu would report the row as chosen.
+    this._handleInertRowPress = (e) => {
+      if (!(e.target instanceof Element) || !e.target.closest('.autocomplete-no-results, .autocomplete-group-label, [aria-disabled="true"]')) return;
+      e.preventDefault();
+      e.stopPropagation();
+    };
     /**
      * Show autocomplete.
      */
@@ -136,7 +178,7 @@ var _Autocomplete = class _Autocomplete extends Component {
       this._resetAutocomplete();
       if (inputText.length >= this.options.minLength) {
         this._renderMenu();
-        this._announce(this._resultsMessage(this.menuItems.length));
+        this._announce(this._resultsMessage());
       }
       if (!this.menu.isOpen) {
         if (this._openTimer !== void 0) clearTimeout(this._openTimer);
@@ -158,21 +200,18 @@ var _Autocomplete = class _Autocomplete extends Component {
       this.isOpen = false;
       this.menu.close();
     };
-    this.el["Expressive_Autocomplete"] = this;
-    this.options = {
-      ..._Autocomplete.defaults,
-      ...options,
-      i18n: { ..._Autocomplete.defaults.i18n, ...options?.i18n }
-    };
     this.isOpen = false;
     this.count = 0;
     this.activeIndex = -1;
     this.oldVal = "";
-    this.selectedValues = this.options.selected.map((id) => this.options.data.find((entry) => entry.id === id) ?? { id });
+    const byId = /* @__PURE__ */ new Map();
+    this.options.data.forEach((entry) => byId.has(entry.id) || byId.set(entry.id, entry));
+    this.selectedValues = this.options.selected.map((id) => byId.get(id) ?? { id });
     this.menuItems = this.options.data || [];
     this.$active = null;
     this._pointerDown = false;
     this._setupMenu();
+    this._startingSelection = [...this.selectedValues];
     this._setupEventHandlers();
   }
   /**
@@ -198,17 +237,6 @@ var _Autocomplete = class _Autocomplete extends Component {
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of Autocomplete.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _Autocomplete);
-  }
-  static getInstance(el) {
-    return el["Expressive_Autocomplete"];
-  }
   static _loadingIndicator() {
     if (!_Autocomplete._loadingTemplate) {
       const template = document.createElement("template");
@@ -226,35 +254,30 @@ var _Autocomplete = class _Autocomplete extends Component {
       clearTimeout(this._openTimer);
       this._openTimer = void 0;
     }
-    this._removeEventHandlers();
+    this._cancelPendingSearch();
+    this._searchAbort?.abort();
+    this._events.abort();
     this.menu.destroy();
     this.isOpen = false;
     this._removeMenu();
+    for (const name of ["role", "aria-autocomplete", "aria-controls", "data-target", "aria-haspopup", "aria-expanded", "aria-activedescendant"]) {
+      this.el.removeAttribute(name);
+    }
     this._statusInfo.remove();
     this._announcer.remove();
-    this.el["Expressive_Autocomplete"] = void 0;
+    super.destroy();
   }
   _setupEventHandlers() {
-    this.el.addEventListener("blur", this._handleInputBlur);
-    this.el.addEventListener("input", this._handleInput);
-    this.el.addEventListener("keyup", this._handleInputKeyup);
-    this.el.addEventListener("focus", this._handleInputFocus);
-    this.el.addEventListener("keydown", this._handleInputKeydown);
-    this.el.addEventListener("click", this._handleInputClick);
-    this.container.addEventListener("pointerdown", this._handleContainerPointerDown);
-    this.container.addEventListener("pointerup", this._handleContainerPointerUp);
-    this.container.addEventListener("pointercancel", this._handleContainerPointerUp);
-  }
-  _removeEventHandlers() {
-    this.el.removeEventListener("blur", this._handleInputBlur);
-    this.el.removeEventListener("input", this._handleInput);
-    this.el.removeEventListener("keyup", this._handleInputKeyup);
-    this.el.removeEventListener("focus", this._handleInputFocus);
-    this.el.removeEventListener("keydown", this._handleInputKeydown);
-    this.el.removeEventListener("click", this._handleInputClick);
-    this.container.removeEventListener("pointerdown", this._handleContainerPointerDown);
-    this.container.removeEventListener("pointerup", this._handleContainerPointerUp);
-    this.container.removeEventListener("pointercancel", this._handleContainerPointerUp);
+    const { signal } = this._events;
+    this.el.addEventListener("blur", this._handleInputBlur, { signal });
+    this.el.addEventListener("input", this._handleInput, { signal });
+    this.el.addEventListener("focus", this._handleInputFocus, { signal });
+    this.el.addEventListener("keydown", this._handleInputKeydown, { signal });
+    this.el.addEventListener("click", this._handleInputClick, { signal });
+    this.container.addEventListener("pointerdown", this._handleContainerPointerDown, { signal });
+    this.container.addEventListener("mousedown", this._handleInertRowPress, { capture: true, signal });
+    this.container.addEventListener("click", this._handleInertRowPress, { capture: true, signal });
+    afterFormReset(this.el, this._handleReset, signal);
   }
   _setupMenu() {
     this.container = document.createElement("menu");
@@ -267,10 +290,8 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.el.setAttribute("aria-autocomplete", "list");
     this.el.setAttribute("aria-controls", this.container.id);
     this.el.setAttribute("data-target", this.container.id);
-    this.menuItems.forEach((menuItem) => {
-      const itemElement = this._createMenuItem(menuItem);
-      this.container.append(itemElement);
-    });
+    this._renderMenu();
+    this.oldVal = "";
     this.el.parentElement.appendChild(this.container);
     const menuOptions = {
       ..._Autocomplete.defaults.menuOptions,
@@ -289,8 +310,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     const userOnItemClick = menuOptions.onItemClick;
     menuOptions.onItemClick = (li) => {
       if (!li) return;
-      const entryID = li.getAttribute("data-id");
-      this.selectOption(entryID);
+      this._choose(li);
       if (typeof userOnItemClick === "function") userOnItemClick.call(this.menu, li);
     };
     this.menu = Menu.init(this.el, menuOptions);
@@ -319,6 +339,55 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.container.ariaExpanded = "false";
     this.container.parentNode.removeChild(this.container);
   }
+  /**
+   * Searches for text of at least `minLength` characters. Shorter text drops
+   * the pending and running searches and the old results: it used to reach
+   * onSearch too, so a remote search fetched on every first keystroke.
+   */
+  _startSearch(typed) {
+    if (this.el.value.length >= this.options.minLength) {
+      this._setStatusLoading();
+      return this._queueSearch(typed);
+    }
+    this._cancelPendingSearch();
+    this._searchAbort?.abort();
+    this.menuItems = [];
+    this._updateSelectedInfo();
+    this._announce("");
+  }
+  /** Searches now, or once typing pauses for `searchDelay`. Focus never waits. */
+  _queueSearch(typed) {
+    this._cancelPendingSearch();
+    const delay = this.options.searchDelay;
+    if (!typed || !(delay > 0 && delay < Infinity)) return this._search(this.el.value);
+    this._searchAbort?.abort();
+    this._searchTimer = setTimeout(() => {
+      this._searchTimer = void 0;
+      this._search(this.el.value);
+    }, delay);
+  }
+  _cancelPendingSearch() {
+    clearTimeout(this._searchTimer);
+    this._searchTimer = void 0;
+  }
+  /** Starts a search and aborts the one before, whose response is now stale. */
+  _search(text) {
+    this._searchAbort?.abort();
+    this._searchAbort = new AbortController();
+    this.options.onSearch(text, this, this._searchAbort.signal);
+  }
+  _dismiss(e) {
+    if (e.key === "Escape") {
+      if (this.menu.isOpen || this._openTimer !== void 0) e.preventDefault();
+      this._left = true;
+    }
+    this.close();
+    this._resetCurrentElementPosition();
+  }
+  /** The rows that can be chosen. The no-results row and disabled rows are not. */
+  _options() {
+    return this.container.querySelectorAll('li[role="option"]:not([aria-disabled="true"])');
+  }
   _resetCurrentElementPosition() {
     this.activeIndex = -1;
     this._setActive(null);
@@ -337,13 +406,14 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
     return [label.slice(0, start), label.slice(start, end + 1), label.slice(end + 1)];
   }
-  _createMenuItem(entry) {
+  _createMenuItem(entry, selectedIds = new Set(this.selectedValues.map((entry2) => entry2.id))) {
     const item = document.createElement("li");
     item.id = `autocomplete-option-${Utils.guid()}`;
     item.setAttribute("role", "option");
-    const isSelected = this.selectedValues.some((sel) => sel.id === entry.id);
+    const isSelected = selectedIds.has(entry.id);
     item.setAttribute("aria-selected", isSelected ? "true" : "false");
     item.setAttribute("data-id", entry.id);
+    _Autocomplete._markDisabled(item, entry);
     item.setAttribute(
       "style",
       "display:grid; grid-auto-flow: column; user-select: none; align-items: center;"
@@ -357,46 +427,20 @@ var _Autocomplete = class _Autocomplete extends Component {
       checkbox.type = "checkbox";
       checkbox.tabIndex = -1;
       checkbox.checked = isSelected;
+      checkbox.disabled = entry.disabled === true;
       const spacer = document.createElement("span");
       spacer.style.paddingLeft = "21px";
       selection.append(checkbox, spacer);
       item.appendChild(selection);
     }
-    if (entry.image) {
+    const image = imageURL(entry.image, this.el.ownerDocument.baseURI);
+    if (image) {
       const img = document.createElement("img");
       img.classList.add("circle");
-      img.src = entry.image;
+      img.src = image;
       item.appendChild(img);
     }
-    const inputText = this.el.value.toLocaleLowerCase();
-    const label = (entry.text || entry.id).toString();
-    const parts = this._highlightPartialText(inputText, label);
-    const div = document.createElement("div");
-    div.setAttribute("style", "line-height:1.2;font-weight:500;");
-    if (this.options.allowUnsafeHTML) {
-      div.innerHTML = label;
-      const walker = document.createTreeWalker(div, NodeFilter.SHOW_TEXT);
-      for (let node = walker.nextNode(); node; node = walker.nextNode()) {
-        const [before, match] = this._highlightPartialText(inputText, node.data);
-        if (!match) continue;
-        const matched = node.splitText(before.length);
-        matched.splitText(match.length);
-        const highlight = document.createElement("span");
-        highlight.classList.add("highlight");
-        matched.replaceWith(highlight);
-        highlight.append(matched);
-        break;
-      }
-    } else {
-      div.appendChild(document.createTextNode(parts[0]));
-      if (parts[1]) {
-        const highlight = document.createElement("span");
-        highlight.textContent = parts[1];
-        highlight.classList.add("highlight");
-        div.appendChild(highlight);
-        div.appendChild(document.createTextNode(parts[2]));
-      }
-    }
+    const div = this._createLabel(entry);
     const itemText = document.createElement("div");
     itemText.classList.add("item-text");
     itemText.setAttribute("style", "padding:5px;overflow:hidden;");
@@ -422,16 +466,122 @@ var _Autocomplete = class _Autocomplete extends Component {
     item.style.gridTemplateColumns = getGridConfig();
     return item;
   }
-  _renderMenu() {
-    this._resetAutocomplete();
-    if (this.menuItems.length === 0) {
-      this.menuItems = this.selectedValues;
+  /** Menu already ignores a click on an aria-disabled row. */
+  static _markDisabled(item, entry) {
+    if (entry.disabled === true) item.setAttribute("aria-disabled", "true");
+  }
+  _createLabel(entry) {
+    const inputText = this.el.value.toLocaleLowerCase();
+    const label = (entry.text || entry.id).toString();
+    const div = document.createElement("div");
+    div.setAttribute("style", "line-height:1.2;font-weight:500;");
+    if (this.options.allowUnsafeHTML && entry.text) this._highlightHTML(div, label, inputText);
+    else this._highlightText(div, this._highlightPartialText(inputText, label));
+    return div;
+  }
+  _highlightHTML(div, label, inputText) {
+    div.innerHTML = label;
+    const walker = document.createTreeWalker(div, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      const [before, match] = this._highlightPartialText(inputText, node.data);
+      if (!match) continue;
+      const matched = node.splitText(before.length);
+      matched.splitText(match.length);
+      const highlight = document.createElement("span");
+      highlight.classList.add("highlight");
+      matched.replaceWith(highlight);
+      highlight.append(matched);
+      break;
     }
-    for (let i = 0; i < this.menuItems.length; i++) {
-      const item = this._createMenuItem(this.menuItems[i]);
-      this.container.append(item);
+  }
+  _highlightText(div, parts) {
+    div.appendChild(document.createTextNode(parts[0]));
+    if (parts[1]) {
+      const highlight = document.createElement("span");
+      highlight.textContent = parts[1];
+      highlight.classList.add("highlight");
+      div.appendChild(highlight);
+      div.appendChild(document.createTextNode(parts[2]));
     }
   }
+  _visibleEntries() {
+    const limit = this.options.maxResults;
+    return Number.isFinite(limit) && limit >= 0 ? this.menuItems.slice(0, Math.floor(limit)) : this.menuItems;
+  }
+  _renderMenu() {
+    this._resetAutocomplete();
+    if (this._noResults) this.container.append(this._createNoResultsRow());
+    if (this.menuItems.length === 0) this.menuItems = [...this.selectedValues];
+    const groups = /* @__PURE__ */ new Map();
+    const selectedIds = new Set(this.selectedValues.map((entry) => entry.id));
+    this._visibleEntries().forEach((entry) => this._groupList(entry.group, groups).append(this._createMenuItem(entry, selectedIds)));
+    const createText = this._createText();
+    if (createText) this.container.append(this._createRow(createText));
+  }
+  /** The list a row goes in: the listbox, or its group's list, made where the group first appears. */
+  _groupList(name, groups) {
+    if (!name) return this.container;
+    if (!groups.has(name)) groups.set(name, this._createGroup(name));
+    return groups.get(name);
+  }
+  /**
+   * A labelled group of options, as the APG grouped listbox nests it. The
+   * heading is not an option, so the arrow keys and the count pass over it.
+   * Its name is set as text: only an entry's own `text` may be HTML.
+   */
+  _createGroup(name) {
+    const heading = document.createElement("li");
+    heading.id = `autocomplete-group-${Utils.guid()}`;
+    heading.setAttribute("role", "presentation");
+    heading.classList.add("label", "autocomplete-group-label");
+    heading.textContent = name;
+    const list = document.createElement("ul");
+    list.setAttribute("role", "group");
+    list.setAttribute("aria-labelledby", heading.id);
+    list.append(heading);
+    const wrapper = document.createElement("li");
+    wrapper.setAttribute("role", "none");
+    wrapper.append(list);
+    this.container.append(wrapper);
+    return list;
+  }
+  /** The typed text to offer as a new value, or '' when the option is off, the text is short or a suggestion matches it. */
+  _createText() {
+    const text = this.el.value.trim();
+    if (!this.options.allowCreate || text.length < this.options.minLength) return "";
+    const typed = text.toLocaleLowerCase();
+    return this.menuItems.some((entry) => (entry.text || String(entry.id)).toLocaleLowerCase() === typed) ? "" : text;
+  }
+  /** The "Add" row. Its label is what the person typed, so it is set as text, never as HTML. */
+  _createRow(text) {
+    const item = document.createElement("li");
+    item.id = `autocomplete-option-${Utils.guid()}`;
+    item.setAttribute("role", "option");
+    item.setAttribute("aria-selected", "false");
+    item.setAttribute("data-create", text);
+    item.classList.add("autocomplete-create");
+    item.setAttribute("style", "display:grid; user-select: none; align-items: center;");
+    item.tabIndex = -1;
+    const label = document.createElement("div");
+    label.classList.add("item-text");
+    label.setAttribute("style", "padding:5px;overflow:hidden;line-height:1.2;font-weight:500;");
+    label.textContent = this.options.i18n.create(text);
+    item.append(label);
+    return item;
+  }
+  /**
+   * Shows sighted users the `i18n.noResults` that the live region announces.
+   * Screen readers already hear that, and a listbox may only own options, so
+   * the row is hidden from them.
+   */
+  _createNoResultsRow() {
+    const row = document.createElement("li");
+    row.classList.add("autocomplete-no-results");
+    row.setAttribute("role", "none");
+    row.setAttribute("aria-hidden", "true");
+    row.textContent = this.options.i18n.noResults;
+    return row;
+  }
   _setStatusLoading() {
     const statusElement = this._statusInfo;
     if (statusElement) statusElement.replaceChildren(_Autocomplete._loadingIndicator());
@@ -442,7 +592,9 @@ var _Autocomplete = class _Autocomplete extends Component {
     const text = this.el.matches(":focus") && this.el.value.length >= this.options.minLength ? message : "";
     if (this._announcer.textContent !== text) this._announcer.textContent = text;
   }
-  _resultsMessage(count) {
+  /** Announces the entries a person can choose. Disabled ones are shown, not counted. */
+  _resultsMessage() {
+    const count = this._noResults ? 0 : this._visibleEntries().filter((entry) => entry.disabled !== true).length;
     return count ? this.options.i18n.results(count) : this.options.i18n.noResults;
   }
   _updateSelectedInfo() {
@@ -460,9 +612,11 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
   }
   _triggerChanged() {
+    const values = this.selectedValues;
+    const selection = ++this._selection;
     this.el.dispatchEvent(new Event("change", { bubbles: true, cancelable: true, composed: true }));
-    if (typeof this.options.onAutocomplete === "function")
-      this.options.onAutocomplete.call(this, this.selectedValues);
+    if (selection !== this._selection) return;
+    this._notify("autocomplete", this.options.onAutocomplete, { args: [values], detail: { values }, current: () => selection === this._selection });
   }
   /**
    * Updates the visible or selectable items shown in the menu.
@@ -471,13 +625,13 @@ var _Autocomplete = class _Autocomplete extends Component {
    * @param open Option to conditionally open menu
    */
   setMenuItems(menuItems, selected = null, open = true) {
-    if (this.el["Expressive_Autocomplete"] !== this) return;
-    const resultCount = menuItems.length;
+    if (_Autocomplete.getInstance(this.el) !== this) return;
+    open && (open = !this._left);
+    this._noResults = menuItems.length === 0;
     this.menuItems = menuItems;
     if (selected) {
-      this.selectedValues = this.menuItems.filter(
-        (item) => !(selected.indexOf(item.id) === -1)
-      );
+      const ids = new Set(selected);
+      this.selectedValues = this.menuItems.filter((item) => ids.has(item.id));
     }
     if (this.options.isMultiSelect) {
       if (!open) this._renderMenu();
@@ -486,35 +640,60 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
     if (open) this.open();
     this._updateSelectedInfo();
-    this._announce(open ? this._resultsMessage(resultCount) : "");
+    this._announce(open ? this._resultsMessage() : "");
     if (selected) this._triggerChanged();
   }
+  _toggleOption(entry) {
+    const selected = !this.selectedValues.some((selectedEntry) => selectedEntry.id === entry.id);
+    if (selected) this.selectedValues.push(entry);
+    else this.selectedValues = this.selectedValues.filter((selectedEntry) => selectedEntry.id !== entry.id);
+    const row = Array.from(this.container.querySelectorAll("li[data-id]")).find((li) => li.getAttribute("data-id") === String(entry.id));
+    if (row) {
+      row.setAttribute("aria-selected", String(selected));
+      row.querySelector("input").checked = selected;
+    }
+    this.el.focus();
+  }
+  _selectSingle(entry) {
+    const refocus = Utils.focusIsIn(this.container);
+    this._cancelPendingSearch();
+    this.selectedValues = [entry];
+    this._refreshInputText();
+    this._resetAutocomplete();
+    this.close();
+    if (refocus) {
+      this.oldVal = this.el.value.toLocaleLowerCase();
+      this.el.focus();
+    }
+  }
+  /** Commits a row chosen by Enter or a click. */
+  _choose(li) {
+    if (li.hasAttribute("data-create")) this._create(li.getAttribute("data-create"));
+    else this.selectOption(li.getAttribute("data-id"));
+  }
+  _create(text) {
+    const refocus = Utils.focusIsIn(this.container);
+    this._cancelPendingSearch();
+    this.oldVal = this.el.value.toLocaleLowerCase();
+    this.close();
+    if (refocus) this.el.focus();
+    this._notify("create", this.options.onCreate, { args: [text, this], detail: { text } });
+  }
   /**
    * Select a specific autocomplete option via id-property.
    * @param id The id of a data-entry.
    */
   selectOption(id) {
-    const entry = this.menuItems.find((item) => item.id == id);
+    const entry = this.menuItems.find((item) => String(item.id) === String(id) && item.disabled !== true);
     if (!entry) return;
-    if (this.options.isMultiSelect) {
-      if (!this.selectedValues.some((selectedEntry) => selectedEntry.id === entry.id))
-        this.selectedValues.push(entry);
-      else this.selectedValues = this.selectedValues.filter(
-        (selectedEntry) => selectedEntry.id !== entry.id
-      );
-      this._renderMenu();
-      this.el.focus();
-    } else {
-      this.selectedValues = [entry];
-      this._refreshInputText();
-      this._resetAutocomplete();
-      this.close();
-    }
+    if (this.options.isMultiSelect) this._toggleOption(entry);
+    else this._selectSingle(entry);
     this._updateSelectedInfo();
     if (this.options.isMultiSelect) this._announce(this.options.i18n.selected(this.selectedValues.length));
     this._triggerChanged();
   }
 };
+_Autocomplete.key = "Expressive_Autocomplete";
 /**
  * The three-dot loading indicator, parsed once and cloned thereafter.
  *
@@ -528,4 +707,4 @@ var Autocomplete = _Autocomplete;
 export {
   Autocomplete
 };
-//# sourceMappingURL=chunk-ZX6M7SWO.mjs.map
+//# sourceMappingURL=chunk-F7LAKFMX.mjs.map