@breadstone/mosaik-elements-foundation 0.0.206 → 0.0.209

package/Controls/Components/Inputs/AutoCompleteBox/AutoCompleteBoxElement.js

@@ -9,28 +9,43 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 var AutoCompleteBoxElement_1;
-import { CssLength } from '@breadstone/mosaik-themes';
 import { html } from '../../../../Dom/Html';
+import { Appearanceable } from '../../../Behaviors/Appearanceable';
 import { AutoCompleteable } from '../../../Behaviors/AutoCompleteable';
+import { Clearable } from '../../../Behaviors/Clearable';
+import { Disableable } from '../../../Behaviors/Disableable';
+import { DropDownable } from '../../../Behaviors/DropDownable';
+import { Invalidable } from '../../../Behaviors/Invalidable';
+import { Labelable } from '../../../Behaviors/Labelable';
+import { Slottable } from '../../../Behaviors/Slottable';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { Valueable } from '../../../Behaviors/Valueable';
+import { Variantable } from '../../../Behaviors/Variantable';
+import { ClickOutsideController } from '../../../Controllers/ClickOutsideController';
+import { KeyboardController } from '../../../Controllers/KeyboardController';
+import { Key } from '../../../Types/Key';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
-import { CustomElement } from '../../Abstracts/CustomElement';
-import { autoCompleteBoxElementTemplate } from './AutoCompleteBoxElementTemplate';
-import { autoCompleteBoxElementJoyStyle } from './Themes/AutoCompleteBoxElement.Joy';
-import { autoCompleteBoxElementMemphisStyle } from './Themes/AutoCompleteBoxElement.Memphis';
-import { autoCompleteBoxElementCosmopolitanStyle } from './Themes/AutoCompleteBoxElement.Cosmopolitan';
-import { Themeable } from '../../../Behaviors/Themeable';
+import { Property } from '../../../Decorators/PropertyDecorator';
+import { Watch } from '../../../Decorators/WatchDecorator';
+import { FloatingSync } from '../../../Types/FloatingSync';
 import { Placement } from '../../../Types/Placement';
 import { Strategy } from '../../../Types/Strategy';
-import { FloatingSync } from '../../../Types/FloatingSync';
-import { PortalElement } from '../../Primitives/Portal/PortalElement';
+import { TextAlignment } from '../../../Types/TextAlignment';
+import { InputBaseElement } from '../Abstracts/InputBase';
+import { ButtonElement } from '../../Buttons/Button/ButtonElement';
 import { FloatingElement } from '../../Primitives/Floating/FloatingElement';
-import { DropDownable } from '../../../Behaviors/DropDownable';
-import { Disableable } from '../../../Behaviors/Disableable';
-import { Focusable } from '../../../Behaviors/Focusable';
-import { Watch } from '../../../Decorators/WatchDecorator';
-import { IntlController } from '../../../../Intl/IntlController';
+import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
+import { PortalElement } from '../../Primitives/Portal/PortalElement';
+import { TextBoxElement } from '../TextBox/TextBoxElement';
+import { SelectItemElement } from '../Select/SelectItemElement';
+import { EmptyStateElement } from '../../States/Empty/EmptyStateElement';
+import { autoCompleteBoxElementTemplate } from './AutoCompleteBoxElementTemplate';
 import { AutoCompleteBoxElementIntl } from './AutoCompleteBoxElementIntl';
+import { autoCompleteBoxElementCosmopolitanStyle } from './Themes/AutoCompleteBoxElement.Cosmopolitan';
+import { autoCompleteBoxElementJoyStyle } from './Themes/AutoCompleteBoxElement.Joy';
+import { autoCompleteBoxElementMemphisStyle } from './Themes/AutoCompleteBoxElement.Memphis';
+import { IntlController } from '../../../../Intl/IntlController';
 // #endregion
 /**
  * Auto Complete Box - An input field with auto-completion functionality for enhanced user experience.
@@ -38,18 +53,28 @@ import { AutoCompleteBoxElementIntl } from './AutoCompleteBoxElementIntl';
  * @description
  * The Auto Complete Box component provides real-time suggestions as users type, helping them quickly find and select
  * from a list of predefined options. It combines the functionality of a text input with a dropdown list of suggestions,
- * making data entry faster and more accurate. This component is ideal for search fields, location inputs, and any
- * scenario where users need to select from a large set of possible values.
+ * making data entry faster and more accurate.
+ *
+ * This component supports both synchronous and asynchronous item providers, making it ideal for:
+ * - Search fields with server-side search
+ * - Font family pickers (with Google Fonts or custom providers)
+ * - Location/address inputs
+ * - Any scenario where users need to select from a large or dynamic set of possible values
  *
  * @name Auto Complete Box
  * @element mosaik-autocompletebox
  * @category Inputs
  *
- * @csspart input - the input field.
- * @csspart list - the suggestions list.
- * @csspart item - individual suggestion items.
- * @csspart portal - the floating portal container for the suggestions.
- * @csspart popup - the floating popup container for the suggestions.
+ * @slot prefix - Content placed before the input value.
+ * @slot suffix - Content placed after the input value.
+ *
+ * @csspart input - The text input field.
+ * @csspart portal - The portal container for the dropdown.
+ * @csspart popup - The floating popup container for the suggestions.
+ * @csspart list - The suggestions list container.
+ * @csspart item - Individual suggestion items.
+ * @csspart loading - The loading indicator.
+ * @csspart empty - The empty/no results state.
  *
  * @cssprop {String} --auto-complete-box-background-color - The background color.
  * @cssprop {String} --auto-complete-box-border-color - The border color.
@@ -57,45 +82,73 @@ import { AutoCompleteBoxElementIntl } from './AutoCompleteBoxElementIntl';
  * @cssprop {String} --auto-complete-box-border-style - The border style.
  * @cssprop {String} --auto-complete-box-border-width - The border width.
  * @cssprop {String} --auto-complete-box-foreground-color - The foreground color.
+ * @cssprop {String} --auto-complete-box-font-family - The font family.
+ * @cssprop {String} --auto-complete-box-font-size - The font size.
+ * @cssprop {String} --auto-complete-box-font-weight - The font weight.
  * @cssprop {String} --auto-complete-box-gap - The gap between elements.
- * @cssprop {String} --auto-complete-box-height - The height.
+ * @cssprop {String} --auto-complete-box-padding-top - The padding top.
+ * @cssprop {String} --auto-complete-box-padding-right - The padding right.
  * @cssprop {String} --auto-complete-box-padding-bottom - The padding bottom.
  * @cssprop {String} --auto-complete-box-padding-left - The padding left.
- * @cssprop {String} --auto-complete-box-padding-right - The padding right.
- * @cssprop {String} --auto-complete-box-padding-top - The padding top.
  * @cssprop {String} --auto-complete-box-shadow - The shadow.
+ * @cssprop {String} --auto-complete-box-transition-duration - The transition duration.
  * @cssprop {String} --auto-complete-box-width - The width.
  *
+ * @fires cleared - Fired when the value is cleared.
+ * @fires selectionChanged - Fired when an item is selected from the suggestions.
+ * @fires populating - Fired when the component starts loading suggestions.
+ * @fires populated - Fired when the suggestions have been loaded.
+ *
+ * @dependency mosaik-textbox - Used for the input field.
+ * @dependency mosaik-button - Used for clear and dropdown buttons.
  * @dependency mosaik-portal - Provides a portal host for rendering the suggestion popup.
  * @dependency mosaik-floating - Positions the suggestion popup relative to the host element.
+ * @dependency mosaik-focus-ring - Provides focus ring for accessibility.
  *
  * @example
  * ```html
+ * <!-- Simple static items -->
  * <mosaik-autocompletebox
+ *   label="Country"
  *   placeholder="Search countries..."
- *   items='["Germany", "France", "Italy", "Spain"]'>
+ *   .items="${['Germany', 'France', 'Italy', 'Spain']}">
+ * </mosaik-autocompletebox>
+ *
+ * <!-- With async items provider -->
+ * <mosaik-autocompletebox
+ *   label="Font Family"
+ *   placeholder="Search fonts..."
+ *   .itemsProvider="${async (request) => {
+ *     const response = await fetch(`/api/fonts?q=${request.searchText}`, { signal: request.signal });
+ *     return response.json();
+ *   }}">
  * </mosaik-autocompletebox>
  * ```
  *
  * @public
  */
-let AutoCompleteBoxElement = class AutoCompleteBoxElement extends Themeable(DropDownable(Focusable(Disableable(AutoCompleteable(CustomElement))))) {
+let AutoCompleteBoxElement = class AutoCompleteBoxElement extends Slottable(DropDownable(Appearanceable(Variantable(Labelable(Clearable(Invalidable(Disableable(Valueable(Themeable(AutoCompleteable(InputBaseElement))))))))))) {
     static { AutoCompleteBoxElement_1 = this; }
     // #region Fields
     static _idCounter = 0;
-    static _floatingFlipFallbackPlacements = Object.freeze([
-        Placement.Top,
-        Placement.Bottom
-    ]);
-    _text;
-    _shouldSyncSearchFromText;
-    _highlightedIndex;
-    _lastFilterText;
+    _inputElement;
+    _floatingElement;
+    _clickOutsideController;
+    _intlController;
+    _keyboardController;
     _inputId;
     _listboxId;
-    _intlController;
-    _closeTimeoutHandle;
-    _suggestionSync;
+    _filterInputId;
+    _text;
+    _placeholder;
+    _filterPlaceholder;
+    _filterText;
+    _required;
+    _readonly;
+    _textAlign;
+    _dropDownSync;
+    _highlightedIndex;
+    _renderItem;
     // #endregion
     // #region Ctor
     /**
@@ -103,22 +156,33 @@ let AutoCompleteBoxElement = class AutoCompleteBoxElement extends Themeable(Drop
      */
     constructor() {
         super();
+        this._inputId = `mosaik-autocomplete-input-${++AutoCompleteBoxElement_1._idCounter}`;
+        this._listboxId = `mosaik-autocomplete-list-${AutoCompleteBoxElement_1._idCounter}`;
+        this._filterInputId = `mosaik-autocomplete-filter-${AutoCompleteBoxElement_1._idCounter}`;
         this._text = '';
-        this._shouldSyncSearchFromText = true;
+        this._placeholder = '';
+        this._filterPlaceholder = '';
+        this._filterText = '';
+        this._required = false;
+        this._readonly = false;
+        this._textAlign = TextAlignment.Left;
+        this._dropDownSync = FloatingSync.Width;
         this._highlightedIndex = -1;
-        this._lastFilterText = '';
-        this._closeTimeoutHandle = null;
-        this._inputId = AutoCompleteBoxElement_1.generateId('mosaik-autocomplete-input');
-        this._listboxId = AutoCompleteBoxElement_1.generateId('mosaik-autocomplete-list');
-        this._suggestionSync = FloatingSync.Width;
+        this._renderItem = null;
         this.dropDownPlacement = Placement.BottomStart;
         this.dropDownStrategy = Strategy.Fixed;
         this.dropDownDistance = 8;
         this.dropDownSkidding = 0;
         this.maxDropDownHeight = '280px';
+        this._clickOutsideController = new ClickOutsideController(this, {
+            ignored: () => [this._floatingElement],
+            skipInitial: true,
+            callback: () => this.close()
+        });
         this._intlController = new IntlController(this, {
             factory: () => new AutoCompleteBoxElementIntl()
         });
+        this._keyboardController = new KeyboardController(this);
     }
     // #endregion
     // #region Properties
@@ -133,25 +197,6 @@ let AutoCompleteBoxElement = class AutoCompleteBoxElement extends Themeable(Drop
     static get is() {
         return 'mosaik-autocompletebox';
     }
-    /**
-     * Gets or sets the `text` property.
-     *
-     * @public
-     * @attr
-     */
-    get text() {
-        return this._text;
-    }
-    set text(value) {
-        if (this._text !== value) {
-            this._text = value;
-            this.requestUpdate('text');
-            if (this._shouldSyncSearchFromText) {
-                this._lastFilterText = value;
-                this.updateSearchText(value);
-            }
-        }
-    }
     /**
      * Gets the identifier of the input element.
      *
@@ -171,165 +216,195 @@ let AutoCompleteBoxElement = class AutoCompleteBoxElement extends Themeable(Drop
         return this._listboxId;
     }
     /**
-     * Gets the index of the highlighted suggestion.
+     * Gets the identifier of the filter input element.
      *
      * @public
      * @readonly
      */
-    get highlightedIndex() {
-        return this._highlightedIndex;
+    get filterInputId() {
+        return this._filterInputId;
     }
     /**
-     * Gets a value indicating whether the suggestion list should be rendered.
+     * Gets or sets the `text` property.
+     * This is the current text value displayed in the input field.
      *
      * @public
-     * @readonly
+     * @attr
      */
-    get shouldRenderSuggestions() {
-        if (!this.isFocused) {
-            return false;
-        }
-        if (!this.isDropDownOpen) {
-            return false;
+    get text() {
+        return this._text;
+    }
+    set text(value) {
+        if (this._text !== value) {
+            this._text = value;
+            this.requestUpdate('text');
         }
-        return this.hasSuggestions || this.shouldShowNoResultsMessage || this.shouldShowLoadingState;
     }
     /**
-     * Gets a value indicating whether suggestions are available.
+     * Gets or sets the `placeholder` property.
      *
      * @public
-     * @readonly
+     * @attr
      */
-    get hasSuggestions() {
-        return this.filteredItems.length > 0;
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        if (this._placeholder !== value) {
+            this._placeholder = value;
+            this.requestUpdate('placeholder');
+        }
     }
     /**
-     * Gets the active descendant identifier for accessibility.
+     * Gets or sets the `filterPlaceholder` property.
      *
      * @public
-     * @readonly
+     * @attr
      */
-    get activeDescendantId() {
-        return this._highlightedIndex >= 0
-            ? this.getOptionId(this._highlightedIndex)
-            : null;
+    get filterPlaceholder() {
+        return this._filterPlaceholder;
+    }
+    set filterPlaceholder(value) {
+        if (this._filterPlaceholder !== value) {
+            this._filterPlaceholder = value;
+            this.requestUpdate('filterPlaceholder');
+        }
     }
     /**
-     * Gets a value indicating whether the no-results message should be displayed.
+     * Gets or sets the `filterText` property.
+     * This is the current text value in the filter input field inside the popup.
      *
      * @public
-     * @readonly
+     * @attr
      */
-    get shouldShowNoResultsMessage() {
-        return this.isFocused && !this.isPopulating && this._lastFilterText.length >= this.minimumPrefixLength && this.filteredItems.length === 0;
+    get filterText() {
+        return this._filterText;
+    }
+    set filterText(value) {
+        if (this._filterText !== value) {
+            this._filterText = value;
+            this.requestUpdate('filterText');
+            this.updateSearchText(value);
+        }
     }
     /**
-     * Gets a value indicating whether the loading state should be displayed.
+     * Gets or sets the `required` property.
      *
      * @public
-     * @readonly
+     * @attr
      */
-    get shouldShowLoadingState() {
-        return this.isPopulating && !this.hasSuggestions;
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        if (this._required !== value) {
+            this._required = value;
+            this.requestUpdate('required');
+        }
     }
     /**
-     * Gets or sets the preferred placement for the suggestion popup.
+     * Gets or sets the `readonly` property.
      *
      * @public
      * @attr
      */
-    get suggestionPlacement() {
-        return this.dropDownPlacement;
+    get readonly() {
+        return this._readonly;
     }
-    set suggestionPlacement(value) {
-        if (this.dropDownPlacement !== value) {
-            this.dropDownPlacement = value;
-            this.requestUpdate('suggestionPlacement');
+    set readonly(value) {
+        if (this._readonly !== value) {
+            this._readonly = value;
+            this.requestUpdate('readonly');
         }
     }
     /**
-     * Gets or sets the positioning strategy for the suggestion popup.
+     * Gets or sets the `textAlign` property.
      *
      * @public
      * @attr
      */
-    get suggestionStrategy() {
-        return this.dropDownStrategy;
+    get textAlign() {
+        return this._textAlign;
     }
-    set suggestionStrategy(value) {
-        if (this.dropDownStrategy !== value) {
-            this.dropDownStrategy = value;
-            this.requestUpdate('suggestionStrategy');
+    set textAlign(value) {
+        if (this._textAlign !== value) {
+            this._textAlign = value;
+            this.requestUpdate('textAlign');
         }
     }
     /**
-     * Gets or sets the distance in pixels between the host and the suggestion popup.
+     * Gets or sets the size synchronization mode for the dropdown popup.
      *
      * @public
      * @attr
      */
-    get suggestionDistance() {
-        return this.dropDownDistance;
+    get dropDownSync() {
+        return this._dropDownSync;
     }
-    set suggestionDistance(value) {
-        if (this.dropDownDistance !== value) {
-            this.dropDownDistance = value;
-            this.requestUpdate('suggestionDistance');
+    set dropDownSync(value) {
+        if (this._dropDownSync !== value) {
+            this._dropDownSync = value;
+            this.requestUpdate('dropDownSync');
         }
     }
     /**
-     * Gets or sets the horizontal skidding offset for the suggestion popup.
+     * Gets the index of the highlighted suggestion.
      *
      * @public
-     * @attr
+     * @readonly
      */
-    get suggestionSkidding() {
-        return this.dropDownSkidding;
+    get highlightedIndex() {
+        return this._highlightedIndex;
     }
-    set suggestionSkidding(value) {
-        if (this.dropDownSkidding !== value) {
-            this.dropDownSkidding = value;
-            this.requestUpdate('suggestionSkidding');
+    /**
+     * Gets a value indicating whether the suggestion list should be rendered.
+     *
+     * @public
+     * @readonly
+     */
+    get shouldRenderSuggestions() {
+        if (!this.isDropDownOpen) {
+            return false;
         }
+        return this.hasSuggestions || this.shouldShowNoResultsMessage || this.shouldShowLoadingState;
     }
     /**
-     * Gets or sets the size synchronization mode for the suggestion popup.
+     * Gets a value indicating whether suggestions are available.
      *
      * @public
-     * @attr
+     * @readonly
      */
-    get suggestionSync() {
-        return this._suggestionSync;
-    }
-    set suggestionSync(value) {
-        if (this._suggestionSync !== value) {
-            this._suggestionSync = value;
-            this.requestUpdate('suggestionSync');
-        }
+    get hasSuggestions() {
+        return this.filteredItems.length > 0;
     }
     /**
-     * Gets or sets the maximum height for the suggestion popup.
+     * Gets the active descendant identifier for accessibility.
      *
      * @public
-     * @attr
+     * @readonly
      */
-    get maxSuggestionHeight() {
-        return this.maxDropDownHeight;
+    get activeDescendantId() {
+        return this._highlightedIndex >= 0
+            ? this.getOptionId(this._highlightedIndex)
+            : null;
     }
-    set maxSuggestionHeight(value) {
-        if (this.maxDropDownHeight !== value) {
-            this.maxDropDownHeight = value;
-            this.requestUpdate('maxSuggestionHeight');
-        }
+    /**
+     * Gets a value indicating whether the no-results message should be displayed.
+     *
+     * @public
+     * @readonly
+     */
+    get shouldShowNoResultsMessage() {
+        return !this.isPopulating && this._filterText.length >= this.minimumPrefixLength && this.filteredItems.length === 0;
     }
     /**
-     * Gets the fallback placements used when positioning the suggestion popup.
+     * Gets a value indicating whether the loading state should be displayed.
      *
      * @public
      * @readonly
      */
-    get suggestionFlipFallbackPlacements() {
-        return Array.from(AutoCompleteBoxElement_1._floatingFlipFallbackPlacements);
+    get shouldShowLoadingState() {
+        return this.isPopulating && !this.hasSuggestions;
     }
     /**
      * Returns the `intl` property.
@@ -340,35 +415,80 @@ let AutoCompleteBoxElement = class AutoCompleteBoxElement extends Themeable(Drop
     get intl() {
         return this._intlController.intl;
     }
+    /**
+     * Gets or sets the custom render function for suggestion items.
+     * When provided, this function is used to render each item in the suggestion list.
+     *
+     * @example
+     * ```typescript
+     * element.renderItem = (item, index) => html`
+     *   <span style="font-family: '${item.family}'">${item.family}</span>
+     * `;
+     * ```
+     *
+     * @public
+     */
+    get renderItem() {
+        return this._renderItem;
+    }
+    set renderItem(value) {
+        if (this._renderItem !== value) {
+            this._renderItem = value;
+            this.requestUpdate('renderItem');
+        }
+    }
+    /**
+     * @protected
+     */
+    get keyboard() {
+        return this._keyboardController;
+    }
     // #endregion
     // #region Methods
+    /**
+     * @public
+     * @override
+     */
+    checkValidity() {
+        return this.shadowRoot
+            ? this._inputElement.checkValidity()
+            : true;
+    }
+    /**
+     * @public
+     * @override
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.keyboard
+            .add([Key.UpArrow], () => this.moveHighlight(-1), undefined, { preventDefault: true })
+            .add([Key.DownArrow], () => this.moveHighlight(1), undefined, { preventDefault: true })
+            .add([Key.Home], () => this.setHighlightedIndex(0), () => this.filteredItems.length > 0, { preventDefault: true })
+            .add([Key.End], () => this.setHighlightedIndex(this.filteredItems.length - 1), () => this.filteredItems.length > 0, { preventDefault: true })
+            .add([Key.Enter], () => this.selectHighlighted(), () => this._highlightedIndex >= 0, { preventDefault: true })
+            .add([Key.Tab], () => this.selectHighlighted(), () => this._highlightedIndex >= 0)
+            .add([Key.Escape], () => {
+            if (this.isDropDownOpen) {
+                this.close();
+            }
+        }, undefined, { preventDefault: true });
+    }
     /**
      * @internal
      */
     onFilterCallback(items) {
         super.onFilterCallback?.(items);
-        if (items.length > 0) {
-            this.openSuggestions();
-            this.setHighlightedIndex(0);
-        }
-        else if (this.shouldShowNoResultsMessage && this.isFocused) {
-            this.openSuggestions();
-            this._highlightedIndex = -1;
-        }
-        else if (!this.isFocused) {
-            this.closeSuggestions();
+        this._highlightedIndex = items.length > 0 ? 0 : -1;
+        if (!this.isDropDownOpen && (items.length > 0 || this.shouldShowNoResultsMessage)) {
+            this.open();
         }
-        this.applyTextCompletion();
     }
     /**
-       * Synchronizes the suggestion visibility with the floating popup state.
-       *
-       * @public
-       * @param isActive - Indicates whether the floating popup is active.
-       */
+     * @public
+     */
     onFloatingActiveChanged(isActive) {
         if (!isActive) {
-            this.closeSuggestions();
+            this.close();
         }
     }
     /**
@@ -376,187 +496,109 @@ let AutoCompleteBoxElement = class AutoCompleteBoxElement extends Themeable(Drop
      * @override
      */
     onSelectCallback(item) {
-        const displayValue = this.getDisplayValue(item);
-        this.executeWithoutSearchSync(() => {
-            this.text = displayValue;
-        });
-        this._lastFilterText = displayValue;
-        this.closeSuggestions();
+        this.text = this.getDisplayValue(item);
+        this.close();
     }
     /**
      * @public
      * @override
      */
     disconnectedCallback() {
-        this.clearCloseTimeout();
+        this._clickOutsideController.unobserve();
         super.disconnectedCallback();
     }
     /**
-     * Handles input events raised by the native text box.
-     *
      * @public
-     * @param event - The event that triggered the handler.
      */
-    onInput(event) {
-        if (this.disabled) {
-            return;
-        }
-        const value = event.target.value;
-        this.cancelCloseSuggestions();
-        this._shouldSyncSearchFromText = true;
-        this._lastFilterText = value;
-        this.text = value;
-        if (value.length === 0) {
-            this._highlightedIndex = -1;
+    onFilterInput(event) {
+        if (!this.disabled) {
+            this.filterText = event.target.value || '';
         }
-        this.openSuggestions();
     }
     /**
-     * Handles focus events raised by the native input element.
-     *
      * @public
      */
-    onFocus(_event) {
-        this.isFocused = true;
-        this.cancelCloseSuggestions();
-        if (this.hasSuggestions || this.shouldShowNoResultsMessage) {
-            this.openSuggestions();
-        }
+    onSuggestionMouseDown(event) {
+        event.preventDefault();
     }
     /**
-     * Handles blur events raised by the native input element.
-     *
      * @public
      */
-    onBlur(_event) {
-        this.isFocused = false;
-        this.scheduleCloseSuggestions();
+    onKeyDown(event) {
+        if (this.disabled || this.isDropDownOpen)
+            return;
+        if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
+            event.preventDefault();
+            this.open();
+        }
     }
     /**
-     * Handles keyboard interactions for navigating the suggestion list.
-     *
      * @public
-     * @param event - The keyboard event that triggered the handler.
      */
-    onKeyDown(event) {
-        if (this.disabled) {
+    onCaretClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled)
             return;
+        if (this.isDropDownOpen) {
+            this.close();
         }
-        switch (event.key) {
-            case 'ArrowDown': {
-                event.preventDefault();
-                this.cancelCloseSuggestions();
-                this.openSuggestions();
-                this.moveHighlight(1);
-                break;
-            }
-            case 'ArrowUp': {
-                event.preventDefault();
-                this.cancelCloseSuggestions();
-                this.openSuggestions();
-                this.moveHighlight(-1);
-                break;
-            }
-            case 'Home': {
-                if (this.filteredItems.length > 0) {
-                    event.preventDefault();
-                    this.setHighlightedIndex(0);
-                }
-                break;
-            }
-            case 'End': {
-                if (this.filteredItems.length > 0) {
-                    event.preventDefault();
-                    this.setHighlightedIndex(this.filteredItems.length - 1);
-                }
-                break;
-            }
-            case 'Enter': {
-                if (this._highlightedIndex >= 0 && this._highlightedIndex < this.filteredItems.length) {
-                    event.preventDefault();
-                    const item = this.filteredItems[this._highlightedIndex];
-                    this.commitSelection(item);
-                }
-                break;
-            }
-            case 'Tab': {
-                if (this._highlightedIndex >= 0 && this._highlightedIndex < this.filteredItems.length) {
-                    const item = this.filteredItems[this._highlightedIndex];
-                    this.commitSelection(item);
-                }
-                break;
-            }
-            case 'Escape': {
-                if (this.isDropDownOpen) {
-                    event.preventDefault();
-                    this.closeSuggestions();
-                }
-                break;
-            }
-            default:
-                break;
+        else {
+            this.open();
         }
     }
     /**
-     * Handles pointer events to keep the suggestion list open while interacting with it.
+     * Gets the value for an item.
+     * If `valueMemberPath` is specified, returns the value of that path.
+     * Otherwise, returns the display value.
      *
      * @public
-     * @param event - The mouse event that triggered the handler.
+     * @override
+     * @param item - The item to get the value for.
      */
-    onSuggestionMouseDown(event) {
-        event.preventDefault();
-        this.cancelCloseSuggestions();
+    getItemValue(item) {
+        if (this.valueMemberPath && item !== null && typeof item === 'object') {
+            const value = item[this.valueMemberPath];
+            return value !== undefined && value !== null ? String(value) : '';
+        }
+        return this.getDisplayValue(item);
     }
     /**
-     * Handles click events on suggestion items.
-     *
      * @public
-     * @param index - The index of the clicked suggestion.
      */
     onSuggestionClick(index) {
-        if (this.disabled) {
-            return;
-        }
-        const item = this.filteredItems[index];
-        if (item !== undefined) {
-            this.commitSelection(item);
+        if (!this.disabled && this.filteredItems[index]) {
+            this.updateSelectedItem(this.filteredItems[index]);
         }
     }
     /**
-     * Renders a suggestion with highlighted text.
-     *
      * @public
-     * @param item - The item to render.
+     */
+    renderSuggestionItem(item, index) {
+        return this._renderItem ? this._renderItem(item, index) : this.renderHighlightedItem(item);
+    }
+    /**
+     * @public
      */
     renderHighlightedItem(item) {
         const value = this.getDisplayValue(item);
-        const searchText = this._lastFilterText;
-        if (!searchText) {
-            return html `${value}`;
-        }
+        if (!this._filterText)
+            return value;
         const lowerValue = value.toLowerCase();
-        const lowerSearch = searchText.toLowerCase();
+        const lowerSearch = this._filterText.toLowerCase();
         const segments = [];
         let cursor = 0;
         let matchIndex = lowerValue.indexOf(lowerSearch, cursor);
         while (matchIndex !== -1) {
-            const unmatched = value.slice(cursor, matchIndex);
-            if (unmatched) {
-                segments.push(unmatched);
-            }
-            const matched = value.slice(matchIndex, matchIndex + searchText.length);
-            segments.push(html `<span class="match">${matched}</span>`);
-            cursor = matchIndex + searchText.length;
+            if (matchIndex > cursor)
+                segments.push(value.slice(cursor, matchIndex));
+            segments.push(html `<span class="match">${value.slice(matchIndex, matchIndex + this._filterText.length)}</span>`);
+            cursor = matchIndex + this._filterText.length;
             matchIndex = lowerValue.indexOf(lowerSearch, cursor);
         }
-        const tail = value.slice(cursor);
-        if (tail) {
-            segments.push(tail);
-        }
-        if (segments.length === 0) {
-            segments.push(value);
-        }
-        return html `${segments}`;
+        if (cursor < value.length)
+            segments.push(value.slice(cursor));
+        return segments.length > 0 ? html `${segments}` : value;
     }
     /**
      * Gets the identifier for the suggestion option at the specified index.
@@ -567,141 +609,75 @@ let AutoCompleteBoxElement = class AutoCompleteBoxElement extends Themeable(Drop
     getOptionId(index) {
         return `${this._listboxId}-option-${index}`;
     }
+    /**
+     * @public
+     * @override
+     */
+    clear(force) {
+        this.text = this._filterText = '';
+        this._highlightedIndex = -1;
+        this.filteredItems = [];
+        return super.clear(force);
+    }
+    /**
+     * @protected
+     * @override
+     */
+    onApplyTemplate() {
+        super.onApplyTemplate();
+        this._inputElement = this.getTemplatePart('input');
+        this._floatingElement = this.getTemplatePart('popup');
+    }
     /**
      * Synchronizes internal state when the dropdown open state changes.
      *
      * @protected
      */
     onDropDownOpenChanged(_previous, next) {
-        if (!next) {
+        if (next) {
+            this._clickOutsideController.observe();
+            // Always trigger search when opening dropdown, even if text is empty
+            const originalMinLength = this.minimumPrefixLength;
+            this.minimumPrefixLength = 0;
+            this.updateSearchText(this._filterText || '');
+            this.minimumPrefixLength = originalMinLength;
+        }
+        else {
             this._highlightedIndex = -1;
-            this.clearCloseTimeout();
+            this._filterText = '';
+            this._clickOutsideController.unobserve();
         }
     }
     /**
      * @protected
      */
     onDisabledChanged(_previous, next) {
-        if (next) {
-            this.closeSuggestions();
-        }
-    }
-    static generateId(prefix) {
-        AutoCompleteBoxElement_1._idCounter += 1;
-        return `${prefix}-${AutoCompleteBoxElement_1._idCounter}`;
-    }
-    getInputElement() {
-        return this.renderRoot.querySelector(`#${this._inputId}`) ?? null;
-    }
-    executeWithoutSearchSync(action) {
-        const previous = this._shouldSyncSearchFromText;
-        this._shouldSyncSearchFromText = false;
-        try {
-            action();
-        }
-        finally {
-            this._shouldSyncSearchFromText = previous;
-        }
-    }
-    openSuggestions() {
-        if (!this.isDropDownOpen) {
-            this.open();
-        }
-    }
-    closeSuggestions() {
-        if (this.isDropDownOpen) {
+        if (next)
             this.close();
-        }
-        this._highlightedIndex = -1;
-        this.clearCloseTimeout();
-    }
-    scheduleCloseSuggestions() {
-        this.clearCloseTimeout();
-        this._closeTimeoutHandle = window.setTimeout(() => {
-            this._closeTimeoutHandle = null;
-            this.closeSuggestions();
-        }, 150);
-    }
-    cancelCloseSuggestions() {
-        this.clearCloseTimeout();
-    }
-    clearCloseTimeout() {
-        if (this._closeTimeoutHandle !== null) {
-            window.clearTimeout(this._closeTimeoutHandle);
-            this._closeTimeoutHandle = null;
-        }
     }
-    commitSelection(item) {
-        this.updateSelectedItem(item);
-        const input = this.getInputElement();
-        if (input) {
-            const value = this.text;
-            input.value = value;
-            input.setSelectionRange(value.length, value.length);
-        }
-    }
-    applyTextCompletion() {
-        if (!this.isTextCompletionEnabled) {
-            return;
-        }
-        if (!this.isFocused) {
-            return;
-        }
-        if (!this._lastFilterText) {
-            return;
-        }
-        if (this.filteredItems.length === 0) {
-            return;
-        }
-        const firstItem = this.filteredItems[0];
-        const completion = this.getDisplayValue(firstItem);
-        if (!completion.toLowerCase().startsWith(this._lastFilterText.toLowerCase())) {
-            return;
-        }
-        const typedLength = this._lastFilterText.length;
-        this.executeWithoutSearchSync(() => {
-            this.text = completion;
-        });
-        const input = this.getInputElement();
-        if (input) {
-            input.value = completion;
-            input.setSelectionRange(typedLength, completion.length);
+    selectHighlighted() {
+        if (this._highlightedIndex >= 0 && this.filteredItems[this._highlightedIndex]) {
+            this.updateSelectedItem(this.filteredItems[this._highlightedIndex]);
         }
     }
     moveHighlight(step) {
-        if (this.filteredItems.length === 0) {
-            this._highlightedIndex = -1;
+        if (this.filteredItems.length === 0)
             return;
-        }
-        const length = this.filteredItems.length;
-        const currentIndex = this._highlightedIndex;
-        const nextIndex = currentIndex === -1
-            ? step > 0 ? 0 : length - 1
-            : (currentIndex + step + length) % length;
+        const nextIndex = this._highlightedIndex === -1
+            ? step > 0 ? 0 : this.filteredItems.length - 1
+            : (this._highlightedIndex + step + this.filteredItems.length) % this.filteredItems.length;
         this.setHighlightedIndex(nextIndex);
     }
     setHighlightedIndex(index) {
-        if (this.filteredItems.length === 0) {
-            this._highlightedIndex = -1;
+        if (this.filteredItems.length === 0)
             return;
-        }
-        const normalizedIndex = Math.max(0, Math.min(index, this.filteredItems.length - 1));
-        if (this._highlightedIndex !== normalizedIndex) {
-            this._highlightedIndex = normalizedIndex;
+        const normalized = Math.max(0, Math.min(index, this.filteredItems.length - 1));
+        if (this._highlightedIndex !== normalized) {
+            this._highlightedIndex = normalized;
             this.requestUpdate();
-            this.scrollHighlightedOptionIntoView();
+            this.renderRoot.querySelector(`#${this.getOptionId(normalized)}`)?.scrollIntoView({ block: 'nearest' });
         }
     }
-    scrollHighlightedOptionIntoView() {
-        if (this._highlightedIndex < 0) {
-            return;
-        }
-        this.scrollOptionIntoView(this._highlightedIndex);
-    }
-    scrollOptionIntoView(index) {
-        const option = this.renderRoot.querySelector(`#${this.getOptionId(index)}`);
-        option?.scrollIntoView({ block: 'nearest' });
-    }
 };
 __decorate([
     Attribute({ type: String }),
@@ -709,37 +685,53 @@ __decorate([
     __metadata("design:paramtypes", [String])
 ], AutoCompleteBoxElement.prototype, "text", null);
 __decorate([
-    Attribute({ type: Placement }),
+    Attribute({ type: String }),
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
-], AutoCompleteBoxElement.prototype, "suggestionPlacement", null);
+], AutoCompleteBoxElement.prototype, "placeholder", null);
 __decorate([
-    Attribute({ type: Strategy }),
+    Attribute({ type: String }),
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
-], AutoCompleteBoxElement.prototype, "suggestionStrategy", null);
+], AutoCompleteBoxElement.prototype, "filterPlaceholder", null);
 __decorate([
-    Attribute({ type: Number }),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], AutoCompleteBoxElement.prototype, "suggestionDistance", null);
+    Attribute({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], AutoCompleteBoxElement.prototype, "filterText", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], AutoCompleteBoxElement.prototype, "required", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], AutoCompleteBoxElement.prototype, "readonly", null);
 __decorate([
-    Attribute({ type: Number }),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], AutoCompleteBoxElement.prototype, "suggestionSkidding", null);
+    Attribute({ type: TextAlignment }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], AutoCompleteBoxElement.prototype, "textAlign", null);
 __decorate([
     Attribute({ type: FloatingSync }),
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
-], AutoCompleteBoxElement.prototype, "suggestionSync", null);
+], AutoCompleteBoxElement.prototype, "dropDownSync", null);
 __decorate([
-    Attribute({ type: CssLength }),
+    Property({ type: Function }),
     __metadata("design:type", Object),
     __metadata("design:paramtypes", [Object])
-], AutoCompleteBoxElement.prototype, "maxSuggestionHeight", null);
+], AutoCompleteBoxElement.prototype, "renderItem", null);
 __decorate([
-    Watch('isDropDownOpen'),
+    Watch('isDropDownOpen', { waitUntilFirstUpdate: true }),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Boolean, Boolean]),
     __metadata("design:returntype", void 0)
@@ -759,13 +751,21 @@ AutoCompleteBoxElement = AutoCompleteBoxElement_1 = __decorate([
             memphis: autoCompleteBoxElementMemphisStyle,
             cosmopolitan: autoCompleteBoxElementCosmopolitanStyle
         },
+        host: {
+            tabIndex: '0'
+        },
         options: {
             mode: 'open',
             delegatesFocus: true
         },
         imports: [
+            TextBoxElement,
+            ButtonElement,
             PortalElement,
-            FloatingElement
+            FloatingElement,
+            FocusRingElement,
+            SelectItemElement,
+            EmptyStateElement
         ]
     }),
     __metadata("design:paramtypes", [])