@expressivecss/expressive 0.14.1 → 0.16.0

package/dist/js/chunks/{chunk-4HZMB7LI.mjs → chunk-VGY4M57S.mjs}

@@ -1,12 +1,12 @@
 import {
   Menu
-} from "./chunk-JIDMQGK6.mjs";
-import {
-  Utils
-} from "./chunk-MNPROCZF.mjs";
+} from "./chunk-CSYWKEK3.mjs";
 import {
   Component
-} from "./chunk-LTWPGFBR.mjs";
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.mjs";
 
 // src/ts/components/autocomplete.ts
 var _defaults = {
@@ -14,7 +14,8 @@ var _defaults = {
     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,16 +29,17 @@ var _defaults = {
   },
   minLength: 1,
   // Min characters before autocomplete starts
+  searchDelay: 0,
+  allowCreate: false,
+  onCreate: null,
   isMultiSelect: false,
   onSearch: (text, autocomplete) => {
     const normSearch = text.toLocaleLowerCase();
-    const data = autocomplete.options.data;
     autocomplete.setMenuItems(
-      data.filter(
+      autocomplete.options.data.filter(
         (option) => option.id.toString().toLocaleLowerCase().includes(normSearch) || option.text?.toLocaleLowerCase().includes(normSearch)
       )
     );
-    autocomplete.options.data = data;
   },
   maxMenuHeight: "300px",
   allowUnsafeHTML: false,
@@ -45,9 +47,20 @@ var _defaults = {
 };
 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;
     this._handleInputBlur = () => {
       if (!this._pointerDown) {
+        this._left = true;
+        this._cancelPendingSearch();
         this.close();
         this._resetAutocomplete();
       }
@@ -56,65 +69,69 @@ var _Autocomplete = class _Autocomplete extends Component {
       _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) => {
-      if (!this.options.isMultiSelect && this.selectedValues.length && this.el.value !== (this.selectedValues[0].text || String(this.selectedValues[0].id))) {
-        this.selectedValues = [];
-      }
+    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._noResults = false;
         this._setStatusLoading();
-        this.options.onSearch(this.el.value, this);
-      }
-      if (!this.options.isMultiSelect && this.el.value.length === 0) {
-        this.selectedValues = [];
-        this._triggerChanged();
+        this._queueSearch(typed);
       }
+      if (deselected) this._triggerChanged();
       this.oldVal = value;
     };
-    this._handleInputKeydown = (e) => {
+    this._handleInputKeydown = Utils.ignoringComposition((e) => {
       _Autocomplete._keydown = true;
-      if (e.key === Utils.keys.ESC || e.key === "Tab") {
-        this.close();
-        this._resetCurrentElementPosition();
+      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 (e.key === "ArrowUp" || e.key === "ArrowDown") {
         e.preventDefault();
-        if (e.key === Utils.keys.ARROW_UP && this.activeIndex > 0) this.activeIndex--;
-        if (e.key === Utils.keys.ARROW_DOWN && this.activeIndex < numItems - 1)
+        if (!this.menu.isOpen && this._openTimer === void 0) {
+          this.open();
+          return;
+        }
+        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();
     };
@@ -130,6 +147,14 @@ var _Autocomplete = class _Autocomplete extends Component {
     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.
      */
@@ -138,7 +163,7 @@ var _Autocomplete = class _Autocomplete extends Component {
       this._resetAutocomplete();
       if (inputText.length >= this.options.minLength) {
         this._renderMenu();
-        this._announce(this.menuItems.length ? this.options.i18n.results(this.menuItems.length) : this.options.i18n.noResults);
+        this._announce(this._resultsMessage());
       }
       if (!this.menu.isOpen) {
         if (this._openTimer !== void 0) clearTimeout(this._openTimer);
@@ -160,12 +185,6 @@ 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;
@@ -200,17 +219,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");
@@ -228,35 +236,32 @@ 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("keyup", this._handleInputKeyup, { 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("pointerup", this._handleContainerPointerUp, { signal });
+    this.container.addEventListener("pointercancel", this._handleContainerPointerUp, { signal });
+    this.container.addEventListener("mousedown", this._handleInertRowPress, { capture: true, signal });
+    this.container.addEventListener("click", this._handleInertRowPress, { capture: true, signal });
   }
   _setupMenu() {
     this.container = document.createElement("menu");
@@ -291,8 +296,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);
@@ -300,6 +304,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     const label = this.el.parentElement.querySelector("label");
     if (label) this.el.after(label);
     this.el.removeEventListener("click", this.menu._handleClick);
+    this.el.removeEventListener("keydown", this.menu._handleTriggerKeydown);
     if (!this.options.isMultiSelect) this._refreshInputText();
     if (this.el.value) this.selectOption(this.el.value);
     const div = document.createElement("div");
@@ -320,6 +325,39 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.container.ariaExpanded = "false";
     this.container.parentNode.removeChild(this.container);
   }
+  /** 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);
@@ -331,7 +369,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     this._pointerDown = false;
   }
   _highlightPartialText(input, label) {
-    const start = label.toLocaleLowerCase().indexOf("" + input.toLocaleLowerCase());
+    const start = label.toLocaleLowerCase().indexOf(input.toLocaleLowerCase());
     const end = start + input.length - 1;
     if (start == -1 || end == -1) {
       return [label, "", ""];
@@ -345,6 +383,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     const isSelected = this.selectedValues.some((sel) => sel.id === 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;"
@@ -358,6 +397,7 @@ 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);
@@ -369,40 +409,12 @@ var _Autocomplete = class _Autocomplete extends Component {
       img.src = entry.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;");
     item.appendChild(itemText);
-    item.querySelector(".item-text").appendChild(div);
+    itemText.appendChild(div);
     if (typeof entry.description === "string" || typeof entry.description === "number" && !isNaN(entry.description)) {
       const description = document.createElement("small");
       description.setAttribute(
@@ -410,7 +422,7 @@ var _Autocomplete = class _Autocomplete extends Component {
         "line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;"
       );
       description.innerText = entry.description;
-      item.querySelector(".item-text").appendChild(description);
+      itemText.appendChild(description);
     }
     const getGridConfig = () => {
       if (this.options.isMultiSelect) {
@@ -423,15 +435,118 @@ var _Autocomplete = class _Autocomplete extends Component {
     item.style.gridTemplateColumns = getGridConfig();
     return item;
   }
+  /** 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;
+    }
+  }
+  _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]));
+    }
+  }
   _renderMenu() {
     this._resetAutocomplete();
+    if (this._noResults) this.container.append(this._createNoResultsRow());
     if (this.menuItems.length === 0) {
       this.menuItems = this.selectedValues;
     }
-    for (let i = 0; i < this.menuItems.length; i++) {
-      const item = this._createMenuItem(this.menuItems[i]);
-      this.container.append(item);
-    }
+    const groups = /* @__PURE__ */ new Map();
+    this.menuItems.forEach((entry) => this._groupList(entry.group, groups).append(this._createMenuItem(entry)));
+    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;
@@ -443,6 +558,11 @@ 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;
   }
+  /** Announces the entries a person can choose. Disabled ones are shown, not counted. */
+  _resultsMessage() {
+    const count = this.menuItems.filter((entry) => entry.disabled !== true).length;
+    return count ? this.options.i18n.results(count) : this.options.i18n.noResults;
+  }
   _updateSelectedInfo() {
     const statusElement = this._statusInfo;
     if (statusElement) {
@@ -458,9 +578,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.
@@ -470,9 +592,9 @@ var _Autocomplete = class _Autocomplete extends Component {
    */
   setMenuItems(menuItems, selected = null, open = true) {
     if (this.el["Expressive_Autocomplete"] !== this) return;
-    const resultCount = menuItems.length;
+    open && (open = !this._left);
+    this._noResults = menuItems.length === 0;
     this.menuItems = menuItems;
-    this.options.data = menuItems;
     if (selected) {
       this.selectedValues = this.menuItems.filter(
         (item) => !(selected.indexOf(item.id) === -1)
@@ -485,36 +607,60 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
     if (open) this.open();
     this._updateSelectedInfo();
-    this._announce(open ? resultCount ? this.options.i18n.results(resultCount) : this.options.i18n.noResults : "");
-    this._triggerChanged();
+    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) => item.id == id && item.disabled !== true);
     if (!entry) return;
-    if (this.options.isMultiSelect) {
-      if (!(this.selectedValues.filter(
-        (selectedEntry) => selectedEntry.id === entry.id
-      ).length >= 1)) 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 +674,4 @@ var Autocomplete = _Autocomplete;
 export {
   Autocomplete
 };
-//# sourceMappingURL=chunk-4HZMB7LI.mjs.map
+//# sourceMappingURL=chunk-VGY4M57S.mjs.map