@m3e/web 2.0.5 → 2.1.0

package/dist/autocomplete.js

@@ -5,8 +5,9 @@
  */
 import { LitElement, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { HtmlFor, customElement, setCustomState, prefersReducedMotion, scrollIntoViewIfNeeded, forcedColorsActive, deleteCustomState, addCustomState } from '@m3e/web/core';
-import { ListKeyManager } from '@m3e/web/core/a11y';
+import { HtmlFor, MutationController, setCustomState, deleteCustomState, customElement, prefersReducedMotion, scrollIntoViewIfNeeded, forcedColorsActive, addCustomState } from '@m3e/web/core';
+import { ListKeyManager, M3eLiveAnnouncer } from '@m3e/web/core/a11y';
+import { M3eOptGroupElement } from '@m3e/web/option';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -47,7 +48,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var _M3eAutocompleteElement_instances, _M3eAutocompleteElement_id, _M3eAutocompleteElement_menuId, _M3eAutocompleteElement_ignoreFocusVisible, _M3eAutocompleteElement_menu, _M3eAutocompleteElement_textHighlight, _M3eAutocompleteElement_ignoreHideMenuOnBlur, _M3eAutocompleteElement_clickHandler, _M3eAutocompleteElement_formFieldPointerDownHandler, _M3eAutocompleteElement_focusHandler, _M3eAutocompleteElement_blurHandler, _M3eAutocompleteElement_keyDownHandler, _M3eAutocompleteElement_inputHandler, _M3eAutocompleteElement_changeHandler, _M3eAutocompleteElement_menuToggleHandler, _M3eAutocompleteElement_menuPointerDownHandler, _M3eAutocompleteElement_input_get, _M3eAutocompleteElement_hasVisibleOptions_get, _M3eAutocompleteElement_minMenuWidth_get, _M3eAutocompleteElement_formField_get, _M3eAutocompleteElement_handleSlotChange, _M3eAutocompleteElement_handleClick, _M3eAutocompleteElement_handleFormFieldPointerDown, _M3eAutocompleteElement_handleFocus, _M3eAutocompleteElement_handleBlur, _M3eAutocompleteElement_handleInput, _M3eAutocompleteElement_handleChange, _M3eAutocompleteElement_handleKeyDown, _M3eAutocompleteElement_handleMenuPointerDown, _M3eAutocompleteElement_handleMenuToggle, _M3eAutocompleteElement_destroyMenu, _M3eAutocompleteElement_showMenu, _M3eAutocompleteElement_hideMenu, _M3eAutocompleteElement_activateOption, _M3eAutocompleteElement_selectOption, _M3eAutocompleteElement_filterOptions, _M3eAutocompleteElement_autoActivate, _M3eAutocompleteElement_deactivateOption;
+var _M3eAutocompleteElement_instances, _M3eAutocompleteElement_id, _M3eAutocompleteElement_menuId, _M3eAutocompleteElement_clone, _M3eAutocompleteElement_ignoreFocusVisible, _M3eAutocompleteElement_menu, _M3eAutocompleteElement_ignoreHideMenuOnBlur, _M3eAutocompleteElement_inputChanged, _M3eAutocompleteElement_hasFocus, _M3eAutocompleteElement_mutationAbortController, _M3eAutocompleteElement_clickHandler, _M3eAutocompleteElement_formFieldPointerDownHandler, _M3eAutocompleteElement_focusHandler, _M3eAutocompleteElement_blurHandler, _M3eAutocompleteElement_keyDownHandler, _M3eAutocompleteElement_inputHandler, _M3eAutocompleteElement_changeHandler, _M3eAutocompleteElement_menuToggleHandler, _M3eAutocompleteElement_menuPointerDownHandler, _M3eAutocompleteElement_options_get, _M3eAutocompleteElement_input_get, _M3eAutocompleteElement_hasNoDataSlot_get, _M3eAutocompleteElement_hasLoadingSlot_get, _M3eAutocompleteElement_shouldShowMenu_get, _M3eAutocompleteElement_minMenuWidth_get, _M3eAutocompleteElement_formField_get, _M3eAutocompleteElement_handleMutation, _M3eAutocompleteElement_handleClick, _M3eAutocompleteElement_handleFormFieldPointerDown, _M3eAutocompleteElement_handleFocus, _M3eAutocompleteElement_handleBlur, _M3eAutocompleteElement_handleInput, _M3eAutocompleteElement_handleChange, _M3eAutocompleteElement_handleKeyDown, _M3eAutocompleteElement_handleMenuPointerDown, _M3eAutocompleteElement_handleMenuToggle, _M3eAutocompleteElement_destroyMenu, _M3eAutocompleteElement_showMenu, _M3eAutocompleteElement_updateMenuState, _M3eAutocompleteElement_hideMenu, _M3eAutocompleteElement_activateOption, _M3eAutocompleteElement_updateSelectionState, _M3eAutocompleteElement_selectOption, _M3eAutocompleteElement_filterOption, _M3eAutocompleteElement_filterOptions, _M3eAutocompleteElement_announceResults, _M3eAutocompleteElement_autoActivate, _M3eAutocompleteElement_deactivateOption;
 var M3eAutocompleteElement_1;
 /**
  * Enhances a text input with suggested options.
@@ -76,30 +77,49 @@ var M3eAutocompleteElement_1;
  * @tag m3e-autocomplete
  *
  * @attr auto-activate - Whether the first option should be automatically activated.
+ * @attr case-sensitive - Whether filtering is case sensitive.
+ * @attr filter - Mode in which to filter options.
  * @attr hide-selection-indicator - Whether to hide the selection indicator.
+ * @attr hide-loading - Whether to hide the menu when loading options.
+ * @attr hide-no-data - Whether to hide the menu when there are no options to show.
+ * @attr loading - Whether options are being loaded.
+ * @attr loading-label - The text announced and presented when loading options.
+ * @attr no-data-label - The text announced and presented when no options are available for the current term.
  * @attr required - Whether the user is required to make a selection when interacting with the autocomplete.
+ * @attr results-label - The text announced when available options change for the current term.
  *
  * @slot - Renders the options of the autocomplete.
+ * @slot loading - Renders content when loading options.
+ * @slot no-data - Renders content when there are no options to show.
  *
  * @fires toggle - Emitted when the options menu opens or closes.
+ * @fires query - Emitted when the input is focused or when the user modifies its value.
  */
 let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteElement extends HtmlFor(LitElement) {
   constructor() {
-    super(...arguments);
+    super();
     _M3eAutocompleteElement_instances.add(this);
     /** @private */
     _M3eAutocompleteElement_id.set(this, `m3e-autocomplete-${M3eAutocompleteElement_1.__nextId}`);
     /** @private */
     _M3eAutocompleteElement_menuId.set(this, `${__classPrivateFieldGet(this, _M3eAutocompleteElement_id, "f")}-menu`);
     /** @private */
+    this._options = new Array();
+    /** @private */
+    _M3eAutocompleteElement_clone.set(this, void 0);
+    /** @private */
     _M3eAutocompleteElement_ignoreFocusVisible.set(this, false);
     /** @private */
     _M3eAutocompleteElement_menu.set(this, void 0);
     /** @private */
-    _M3eAutocompleteElement_textHighlight.set(this, void 0);
-    /** @private */
     _M3eAutocompleteElement_ignoreHideMenuOnBlur.set(this, false);
     /** @private */
+    _M3eAutocompleteElement_inputChanged.set(this, false);
+    /** @private */
+    _M3eAutocompleteElement_hasFocus.set(this, false);
+    /** @private */
+    _M3eAutocompleteElement_mutationAbortController.set(this, void 0);
+    /** @private */
     _M3eAutocompleteElement_clickHandler.set(this, () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleClick).call(this));
     /** @private */
     _M3eAutocompleteElement_formFieldPointerDownHandler.set(this, () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleFormFieldPointerDown).call(this));
@@ -118,7 +138,7 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
     /** @private */
     _M3eAutocompleteElement_menuPointerDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleMenuPointerDown).call(this, e));
     /** @private */
-    this._listKeyManager = new ListKeyManager().withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(item => item.disabled || item.style.display === "none").onActiveItemChange(() => {
+    this._listKeyManager = new ListKeyManager().withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(item => item.disabled || item.hidden).onActiveItemChange(() => {
       if (this._listKeyManager.activeItem) {
         __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_activateOption).call(this, this._listKeyManager.activeItem);
       }
@@ -138,10 +158,57 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
      * @default false
      */
     this.autoActivate = false;
+    /**
+     * Whether filtering is case sensitive.
+     * @default false
+     */
+    this.caseSensitive = false;
+    /**
+     * Mode in which to filter options.
+     * @default "contains"
+     */
+    this.filter = "contains";
+    /**
+     * Whether options are being loaded.
+     * @default false
+     */
+    this.loading = false;
+    /**
+     * Whether to hide the menu when there are no options to show.
+     * @default false
+     */
+    this.hideNoData = false;
+    /**
+     * Whether to hide the menu when loading options.
+     * @default false
+     */
+    this.hideLoading = false;
+    /**
+     * The text announced and presented when loading options.
+     * @default "Loading..."
+     */
+    this.loadingLabel = "Loading...";
+    /**
+     * The text announced and presented when no options are available for the current term.
+     * @default "No options"
+     */
+    this.noDataLabel = "No options";
+    /**
+     * The text announced when available options change for the current term.
+     * @default (count) => `${count} options`
+     */
+    this.resultsLabel = count => `${count} options`;
+    new MutationController(this, {
+      config: {
+        childList: true,
+        subtree: true
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleMutation).call(this)
+    });
   }
   /** The options that can be selected. */
   get options() {
-    return this._listKeyManager?.items ?? [];
+    return this._options ?? [];
   }
   /** @inheritdoc */
   attach(control) {
@@ -182,9 +249,6 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
   clear(restoreFocus = false) {
     if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) return;
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = "";
-    if (__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f")) {
-      __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").term = "";
-    }
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
     if (restoreFocus) {
       __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).focus();
@@ -193,16 +257,49 @@ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteEle
     }
   }
   /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleMutation).call(this);
+  }
+  /** @inheritdoc */
+  update(changedProperties) {
+    super.update(changedProperties);
+    if (changedProperties.has("hideNoData") && this.hideNoData && __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
+      setCustomState(__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), "-no-data", false);
+    }
+    if (changedProperties.has("loading")) {
+      if (this.loading) {
+        if (__classPrivateFieldGet(this, _M3eAutocompleteElement_hasFocus, "f")) {
+          if (this.loadingLabel) {
+            M3eLiveAnnouncer.announce(this.loadingLabel, "polite");
+          }
+          if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") && __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) {
+            __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
+          }
+        }
+      } else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") && !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) {
+        __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+      } else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
+        deleteCustomState(__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), "-loading");
+      } else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_hasFocus, "f")) {
+        __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
+      }
+    }
+  }
+  /** @inheritdoc */
   render() {
-    return html`<div class="options" role="listbox"><slot @slotchange="${__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleSlotChange)}"></slot></div>`;
+    return html`<div class="options" aria-hidden="true"><slot></slot></div>`;
   }
 };
 _M3eAutocompleteElement_id = new WeakMap();
 _M3eAutocompleteElement_menuId = new WeakMap();
+_M3eAutocompleteElement_clone = new WeakMap();
 _M3eAutocompleteElement_ignoreFocusVisible = new WeakMap();
 _M3eAutocompleteElement_menu = new WeakMap();
-_M3eAutocompleteElement_textHighlight = new WeakMap();
 _M3eAutocompleteElement_ignoreHideMenuOnBlur = new WeakMap();
+_M3eAutocompleteElement_inputChanged = new WeakMap();
+_M3eAutocompleteElement_hasFocus = new WeakMap();
+_M3eAutocompleteElement_mutationAbortController = new WeakMap();
 _M3eAutocompleteElement_clickHandler = new WeakMap();
 _M3eAutocompleteElement_formFieldPointerDownHandler = new WeakMap();
 _M3eAutocompleteElement_focusHandler = new WeakMap();
@@ -213,11 +310,20 @@ _M3eAutocompleteElement_changeHandler = new WeakMap();
 _M3eAutocompleteElement_menuToggleHandler = new WeakMap();
 _M3eAutocompleteElement_menuPointerDownHandler = new WeakMap();
 _M3eAutocompleteElement_instances = new WeakSet();
+_M3eAutocompleteElement_options_get = function _M3eAutocompleteElement_options_get() {
+  return this._listKeyManager?.items ?? [];
+};
 _M3eAutocompleteElement_input_get = function _M3eAutocompleteElement_input_get() {
   return this.control ? this.control : null;
 };
-_M3eAutocompleteElement_hasVisibleOptions_get = function _M3eAutocompleteElement_hasVisibleOptions_get() {
-  return this.options.some(x => x.style.display !== "none");
+_M3eAutocompleteElement_hasNoDataSlot_get = function _M3eAutocompleteElement_hasNoDataSlot_get() {
+  return (__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")?.querySelector("[slot='no-data']") ?? null) !== null;
+};
+_M3eAutocompleteElement_hasLoadingSlot_get = function _M3eAutocompleteElement_hasLoadingSlot_get() {
+  return (__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")?.querySelector("[slot='loading']") ?? null) !== null;
+};
+_M3eAutocompleteElement_shouldShowMenu_get = function _M3eAutocompleteElement_shouldShowMenu_get() {
+  return __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).some(x => !x.hidden) || this.loading && !this.hideLoading && this.loadingLabel.length > 0 || !this.loading && !this.hideNoData && this.noDataLabel.length > 0;
 };
 _M3eAutocompleteElement_minMenuWidth_get = function _M3eAutocompleteElement_minMenuWidth_get() {
   const formField = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get);
@@ -226,15 +332,43 @@ _M3eAutocompleteElement_minMenuWidth_get = function _M3eAutocompleteElement_minM
 _M3eAutocompleteElement_formField_get = function _M3eAutocompleteElement_formField_get() {
   return this.control?.closest("m3e-form-field") ?? null;
 };
-_M3eAutocompleteElement_handleSlotChange = function _M3eAutocompleteElement_handleSlotChange() {
-  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) return;
+_M3eAutocompleteElement_handleMutation = /** @private */
+async function _M3eAutocompleteElement_handleMutation() {
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_mutationAbortController, "f")) {
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_mutationAbortController, "f").abort();
+  }
+  const mutationAbortController = new AbortController();
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_mutationAbortController, mutationAbortController, "f");
+  const options = [...this.querySelectorAll("m3e-option")];
+  for (const option of options) {
+    if (mutationAbortController.signal.aborted) {
+      break;
+    }
+    if (option.isUpdatePending) {
+      await option.updateComplete;
+    }
+  }
+  if (mutationAbortController.signal.aborted) {
+    return;
+  }
+  this._options = options;
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_clone, this.cloneNode(true), "f");
   const {
     added
-  } = this._listKeyManager.setItems([...this.querySelectorAll("m3e-option")]);
+  } = this._listKeyManager.setItems([...__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f").querySelectorAll("m3e-option")]);
   added.forEach(x => {
     x.id = x.id || `${__classPrivateFieldGet(this, _M3eAutocompleteElement_id, "f")}-option-${this._listKeyManager.items.indexOf(x)}`;
     setCustomState(x, "-hide-selection-indicator", this.hideSelectionIndicator);
   });
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
+    const count = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").replaceChildren(...__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f").childNodes);
+    if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+    } else {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateMenuState).call(this, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), count);
+    }
+  }
 };
 _M3eAutocompleteElement_handleClick = function _M3eAutocompleteElement_handleClick() {
   __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreFocusVisible, true, "f");
@@ -244,10 +378,21 @@ _M3eAutocompleteElement_handleFormFieldPointerDown = function _M3eAutocompleteEl
   __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreHideMenuOnBlur, true, "f");
 };
 _M3eAutocompleteElement_handleFocus = function _M3eAutocompleteElement_handleFocus() {
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_hasFocus, true, "f");
   __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreFocusVisible, true, "f");
+  if (this.options.length == 0 && !this.control.readOnly) {
+    this.dispatchEvent(new CustomEvent("query", {
+      detail: {
+        term: __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)?.value ?? ""
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
 };
 _M3eAutocompleteElement_handleBlur = function _M3eAutocompleteElement_handleBlur() {
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_hasFocus, false, "f");
   if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_ignoreHideMenuOnBlur, "f")) {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
   }
@@ -255,19 +400,30 @@ _M3eAutocompleteElement_handleBlur = function _M3eAutocompleteElement_handleBlur
 };
 _M3eAutocompleteElement_handleInput = function _M3eAutocompleteElement_handleInput(e) {
   if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) || e.defaultPrevented) return;
-  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f")) {
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").term = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value;
-  }
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
-  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
-  } else if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_hasVisibleOptions_get)) {
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+  this.dispatchEvent(new CustomEvent("query", {
+    detail: {
+      term: __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value
+    },
+    bubbles: true,
+    composed: true
+  }));
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_inputChanged, true, "f");
+  try {
+    if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
+    } else {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
+      if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) {
+        __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
+      }
+    }
+  } finally {
+    __classPrivateFieldSet(this, _M3eAutocompleteElement_inputChanged, false, "f");
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange(true);
   }
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange(true);
 };
 _M3eAutocompleteElement_handleChange = function _M3eAutocompleteElement_handleChange() {
-  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) && this.required && !this.options.some(x => x.selected && !x.disabled)) {
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) && this.required && !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).some(x => x.selected && !x.disabled)) {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = "";
   }
 };
@@ -342,7 +498,7 @@ _M3eAutocompleteElement_handleMenuPointerDown = function _M3eAutocompleteElement
 _M3eAutocompleteElement_handleMenuToggle = function _M3eAutocompleteElement_handleMenuToggle(e) {
   if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) return;
   if (e.newState !== "closed") {
-    const option = this.options.find(x => x.selected && !x.disabled);
+    const option = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).find(x => x.selected && !x.disabled);
     if (option) {
       this._listKeyManager.setActiveItem(option);
       scrollIntoViewIfNeeded(option, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"));
@@ -364,14 +520,12 @@ _M3eAutocompleteElement_handleMenuToggle = function _M3eAutocompleteElement_hand
   }
 };
 _M3eAutocompleteElement_destroyMenu = function _M3eAutocompleteElement_destroyMenu(e) {
-  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") || !__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f")) return;
-  [...__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").childNodes].forEach(x => this.append(x));
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").remove();
+  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) return;
+  __classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")?.replaceChildren(...__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").childNodes);
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").remove();
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").removeEventListener("toggle", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuToggleHandler, "f"));
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").removeEventListener("pointerdown", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuPointerDownHandler, "f"));
   __classPrivateFieldSet(this, _M3eAutocompleteElement_menu, undefined, "f");
-  __classPrivateFieldSet(this, _M3eAutocompleteElement_textHighlight, undefined, "f");
   if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).ariaExpanded = "false";
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).removeAttribute("aria-controls");
@@ -385,20 +539,32 @@ _M3eAutocompleteElement_destroyMenu = function _M3eAutocompleteElement_destroyMe
   }));
 };
 _M3eAutocompleteElement_showMenu = function _M3eAutocompleteElement_showMenu() {
-  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") || !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).readOnly || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).disabled || !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_hasVisibleOptions_get)) return;
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") || !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).readOnly || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).disabled) return;
+  const count = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
+  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_shouldShowMenu_get)) return;
   __classPrivateFieldSet(this, _M3eAutocompleteElement_menu, document.createElement("m3e-option-panel"), "f");
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").id = __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f");
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").style.overflowX = "hidden";
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").style.minWidth = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_minMenuWidth_get);
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").addEventListener("toggle", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuToggleHandler, "f"));
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuPointerDownHandler, "f"));
-  __classPrivateFieldSet(this, _M3eAutocompleteElement_textHighlight, document.createElement("m3e-text-highlight"), "f");
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").term = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value;
-  __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").appendChild(__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f"));
-  for (const node of [...this.childNodes]) {
-    __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").append(node);
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")) {
+    const children = [...__classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f").childNodes];
+    if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_hasNoDataSlot_get) && this.noDataLabel) {
+      const noDataSpan = document.createElement("span");
+      noDataSpan.slot = "no-data";
+      noDataSpan.textContent = this.noDataLabel;
+      children.push(noDataSpan);
+    }
+    if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_hasLoadingSlot_get) && this.loadingLabel) {
+      const loadingSpan = document.createElement("span");
+      loadingSpan.slot = "loading";
+      loadingSpan.textContent = this.loadingLabel;
+      children.push(loadingSpan);
+    }
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").replaceChildren(...children);
   }
+  __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateMenuState).call(this, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), count);
   (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get) ?? __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)).insertAdjacentElement("afterend", __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"));
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).setAttribute("aria-controls", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f"));
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).setAttribute("aria-owns", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f"));
@@ -409,6 +575,10 @@ _M3eAutocompleteElement_showMenu = function _M3eAutocompleteElement_showMenu() {
   const input = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get);
   setTimeout(() => __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.show(input, __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.menuAnchor));
 };
+_M3eAutocompleteElement_updateMenuState = function _M3eAutocompleteElement_updateMenuState(menu, count) {
+  setCustomState(menu, "-loading", this.loading);
+  setCustomState(menu, "-no-data", count == 0);
+};
 _M3eAutocompleteElement_hideMenu = function _M3eAutocompleteElement_hideMenu() {
   __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.hide();
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)?.removeAttribute("aria-activedescendant");
@@ -422,7 +592,7 @@ _M3eAutocompleteElement_activateOption = function _M3eAutocompleteElement_activa
       behavior: "instant"
     });
     const focusVisible = forceFocusVisible || !__classPrivateFieldGet(this, _M3eAutocompleteElement_ignoreFocusVisible, "f") && (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).matches(":focus-visible") || forcedColorsActive());
-    this.options.forEach(x => {
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).forEach(x => {
       const active = x === option && focusVisible;
       if (active) {
         x.focusRing?.show();
@@ -434,56 +604,124 @@ _M3eAutocompleteElement_activateOption = function _M3eAutocompleteElement_activa
     });
   }
 };
-_M3eAutocompleteElement_selectOption = function _M3eAutocompleteElement_selectOption(option) {
+_M3eAutocompleteElement_updateSelectionState = /** @private */
+async function _M3eAutocompleteElement_updateSelectionState(clone) {
+  const option = this._options[this._listKeyManager.items.indexOf(clone)];
+  if (option) {
+    option.selected = clone.selected;
+    if (option.isUpdatePending) {
+      await option.updateComplete;
+    }
+  }
+};
+_M3eAutocompleteElement_selectOption = /** @private */
+async function _M3eAutocompleteElement_selectOption(option) {
   if (option.selected) return;
   option.selected = true;
-  option.requestUpdate();
+  await __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateSelectionState).call(this, option);
+  if (option.isUpdatePending) {
+    await option.updateComplete;
+  }
   this.requestUpdate();
+  if (this.isUpdatePending) {
+    await this.updateComplete;
+  }
   if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) {
     __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = option.value;
   }
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange(true);
 };
+_M3eAutocompleteElement_filterOption = function _M3eAutocompleteElement_filterOption(clone, option, term, exactTerm) {
+  const value = this.caseSensitive ? option.value : option.value.toLowerCase();
+  switch (this.filter) {
+    case "starts-with":
+      clone.term = exactTerm;
+      clone.highlightMode = this.filter;
+      return value.startsWith(term);
+    case "ends-with":
+      clone.term = exactTerm;
+      clone.highlightMode = this.filter;
+      return value.endsWith(term);
+    case "contains":
+      clone.term = exactTerm;
+      clone.highlightMode = this.filter;
+      return value.includes(term);
+    case "none":
+      clone.disableHighlight = true;
+      return true;
+    default:
+      clone.disableHighlight = true;
+      return this.filter(option, exactTerm);
+  }
+};
 _M3eAutocompleteElement_filterOptions = function _M3eAutocompleteElement_filterOptions() {
-  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) return;
-  const term = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value.toLocaleLowerCase();
+  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) return 0;
+  const oldCount = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).filter(x => !x.hidden).length;
+  const shouldAnnounce = !this.loading && __classPrivateFieldGet(this, _M3eAutocompleteElement_inputChanged, "f");
+  __classPrivateFieldSet(this, _M3eAutocompleteElement_inputChanged, false, "f");
+  const exactTerm = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value;
+  const term = this.caseSensitive ? exactTerm : exactTerm.toLocaleLowerCase();
+  let newCount = 0;
   let first = false;
   let last;
-  for (const option of this.options) {
-    const value = option.value.toLocaleLowerCase();
-    const hidden = !value.includes(term);
-    option.style.display = hidden ? "none" : "";
-    if (hidden) {
-      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_deactivateOption).call(this, option);
-      deleteCustomState(option, "-first");
-      deleteCustomState(option, "-last");
-    } else if (!first) {
-      addCustomState(option, "-first");
-      first = true;
-      addCustomState(option, "-last");
-      last = option;
+  for (let i = 0; i < __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).length; i++) {
+    const clone = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get)[i];
+    const option = this._options[i];
+    clone.hidden = !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOption).call(this, clone, option, term, exactTerm);
+    if (clone.hidden) {
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_deactivateOption).call(this, clone);
+      deleteCustomState(clone, "-first");
+      deleteCustomState(clone, "-last");
     } else {
-      deleteCustomState(option, "-first");
-      if (last) {
-        deleteCustomState(last, "-last");
+      newCount++;
+      if (!first && !(clone.parentElement instanceof M3eOptGroupElement)) {
+        addCustomState(clone, "-first");
+        first = true;
+        addCustomState(clone, "-last");
+        last = clone;
+      } else {
+        deleteCustomState(clone, "-first");
+        if (last) {
+          deleteCustomState(last, "-last");
+        }
+        addCustomState(clone, "-last");
+        last = clone;
       }
-      addCustomState(option, "-last");
-      last = option;
     }
-    if (option.selected && value !== term) {
-      option.selected = false;
+    if (clone.selected && option.value !== exactTerm) {
+      clone.selected = false;
+      __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateSelectionState).call(this, clone);
     }
   }
-  const groups = __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.querySelectorAll("m3e-optgroup") ?? this.querySelectorAll("m3e-optgroup");
+  if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_updateMenuState).call(this, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), newCount);
+  }
+  const groups = __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.querySelectorAll("m3e-optgroup") ?? __classPrivateFieldGet(this, _M3eAutocompleteElement_clone, "f")?.querySelectorAll("m3e-optgroup") ?? [];
   for (const group of groups) {
-    const hidden = [...group.querySelectorAll("m3e-option")].every(x => x.style.display === "none");
-    group.style.display = hidden ? "none" : "";
+    group.hidden = [...group.querySelectorAll("m3e-option")].every(x => x.hidden);
+  }
+  if (shouldAnnounce) {
+    __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_announceResults).call(this, oldCount, newCount);
   }
   __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_autoActivate).call(this);
+  return newCount;
+};
+_M3eAutocompleteElement_announceResults = function _M3eAutocompleteElement_announceResults(oldCount, newCount) {
+  if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_hasFocus, "f")) return;
+  if (newCount == 0) {
+    if (oldCount > 0 && this.noDataLabel) {
+      M3eLiveAnnouncer.announce(this.noDataLabel, "polite");
+    }
+  } else if (oldCount != newCount) {
+    const message = this.resultsLabel instanceof Function ? this.resultsLabel(newCount) : this.resultsLabel;
+    if (message) {
+      M3eLiveAnnouncer.announce(message, "polite");
+    }
+  }
 };
 _M3eAutocompleteElement_autoActivate = function _M3eAutocompleteElement_autoActivate() {
   if (this.autoActivate && (!this._listKeyManager.activeItem || !this._listKeyManager.activeItem.selected)) {
-    const option = this.options.find(x => !x.disabled && x.style.display !== "none");
+    const option = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_options_get).find(x => !x.disabled && !x.hidden);
     if (option) {
       this._listKeyManager.setActiveItem(option);
       if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
@@ -519,6 +757,41 @@ __decorate([property({
   attribute: "auto-activate",
   type: Boolean
 })], M3eAutocompleteElement.prototype, "autoActivate", void 0);
+__decorate([property({
+  attribute: "case-sensitive",
+  type: Boolean
+})], M3eAutocompleteElement.prototype, "caseSensitive", void 0);
+__decorate([property({
+  converter: {
+    fromAttribute(value) {
+      if (value === null) return "contains";
+      if (value === "starts-with" || value === "ends-with" || value === "contains" || value === "none") {
+        return value;
+      }
+      return "contains";
+    }
+  }
+})], M3eAutocompleteElement.prototype, "filter", void 0);
+__decorate([property({
+  type: Boolean
+})], M3eAutocompleteElement.prototype, "loading", void 0);
+__decorate([property({
+  attribute: "hide-no-data",
+  type: Boolean
+})], M3eAutocompleteElement.prototype, "hideNoData", void 0);
+__decorate([property({
+  attribute: "hide-loading",
+  type: Boolean
+})], M3eAutocompleteElement.prototype, "hideLoading", void 0);
+__decorate([property({
+  attribute: "loading-label"
+})], M3eAutocompleteElement.prototype, "loadingLabel", void 0);
+__decorate([property({
+  attribute: "no-data-label"
+})], M3eAutocompleteElement.prototype, "noDataLabel", void 0);
+__decorate([property({
+  attribute: "results-label"
+})], M3eAutocompleteElement.prototype, "resultsLabel", void 0);
 M3eAutocompleteElement = M3eAutocompleteElement_1 = __decorate([customElement("m3e-autocomplete")], M3eAutocompleteElement);
 
 export { M3eAutocompleteElement };