wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/autocomplete/vds-basic-autocomplete.js

@@ -5,60 +5,285 @@ import { updateFloatingBoxPosition } from "../../utils/floating-engine-utils";
 import { cloneAttributes } from "../../utils/clone-attributes";
 import { findOptionByExactValue, findOptionByValue, getFilteredOptions } from "./vds-basic-autocomplete.utils";
 import { getIconSize, getActionIconButtonSize, getIconColor } from "../../utils/icon-attr.utils";
+import { getDeepActiveElement, KeyboardNavigation } from "../..";
+/**
+ * @component vds-basic-autocomplete
+ * @description An autocomplete component that provides filterable dropdown suggestions.
+ * Supports single selection, multi-selection, dropdown mode, and various customization options.
+ * @slot items - Autocomplete item elements
+ * @slot header - Content displayed in the dropdown header
+ * @slot (default) - Default slot for autocomplete items
+ * @example
+ * <!-- Basic autocomplete (single selection with filtering) -->
+ * <vds-basic-autocomplete placeholder="Search countries...">
+ *   <vds-autocomplete-item value="usa">United States</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="canada">Canada</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="mexico">Mexico</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- With pre-selected value -->
+ * <vds-basic-autocomplete
+ *   value="canada"
+ *   placeholder="Select country">
+ *   <vds-autocomplete-item value="usa">United States</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="canada">Canada</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="mexico">Mexico</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- Multiple selection mode -->
+ * <vds-basic-autocomplete
+ *   id="multi-select"
+ *   multiple
+ *   placeholder="Select countries">
+ *   <vds-autocomplete-item value="usa">United States</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="canada">Canada</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="mexico">Mexico</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="uk">United Kingdom</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ * <script>
+ *   const multiSelect = document.getElementById('multi-select');
+ *   multiSelect.multipleValues = ['usa', 'canada'];
+ * </script>
+ *
+ * <!-- Dropdown mode (select without filtering) -->
+ * <vds-basic-autocomplete
+ *   dropdown
+ *   selected-dropdown-value="option2"
+ *   placeholder="Select option">
+ *   <vds-autocomplete-item value="option1">Option 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="option2">Option 2</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="option3">Option 3</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- With informative icon and custom size -->
+ * <vds-basic-autocomplete
+ *   placeholder="Search..."
+ *   informative-icon="system"
+ *   size="large">
+ *   <vds-autocomplete-item value="item1">Item 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="item2">Item 2</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- Dynamic informative icon from selected item -->
+ * <vds-basic-autocomplete
+ *   placeholder="Choose status"
+ *   dynamic-informative-icon
+ *   dropdown>
+ *   <vds-autocomplete-item value="active" informative-icon="checked">Active</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="pending" informative-icon="time">Pending</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="inactive" informative-icon="error">Inactive</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- With debounce and custom action icon -->
+ * <vds-basic-autocomplete
+ *   id="debounced-search"
+ *   placeholder="Type to search..."
+ *   action-icon="magnify">
+ *   <vds-autocomplete-item value="result1">Result 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="result2">Result 2</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="result3">Result 3</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ * <script>
+ *   const debouncedSearch = document.getElementById('debounced-search');
+ *   debouncedSearch.debounce = 300;
+ * </script>
+ *
+ * <!-- With empty message and max height -->
+ * <vds-basic-autocomplete
+ *   placeholder="Search items..."
+ *   show-empty-message
+ *   empty-message="No items found"
+ *   max-height="200px">
+ *   <vds-autocomplete-item value="a">Item A</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="b">Item B</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- Disabled and readonly states -->
+ * <vds-basic-autocomplete
+ *   disabled
+ *   value="disabled-value"
+ *   placeholder="Disabled">
+ *   <vds-autocomplete-item value="disabled-value">Disabled Item</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <vds-basic-autocomplete
+ *   is-readonly
+ *   value="readonly-value"
+ *   placeholder="Read only">
+ *   <vds-autocomplete-item value="readonly-value">Read Only Item</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- With error state and required indicator -->
+ * <vds-basic-autocomplete
+ *   error
+ *   is-required
+ *   placeholder="Required field">
+ *   <vds-autocomplete-item value="val1">Value 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="val2">Value 2</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- Small size without clear button -->
+ * <vds-basic-autocomplete
+ *   size="small"
+ *   show-clear-button="false"
+ *   placeholder="Compact autocomplete">
+ *   <vds-autocomplete-item value="opt1">Option 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="opt2">Option 2</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- With header slot -->
+ * <vds-basic-autocomplete placeholder="Select with header">
+ *   <div slot="header">
+ *     <strong>Available Options</strong>
+ *   </div>
+ *   <vds-autocomplete-item value="item1">Item 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="item2">Item 2</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ */
 export class VdsBasicAutocomplete {
     constructor() {
         /**
          * Sets the internal input size.
-         * If multiple property is true, This will only set the basic-input text value.
+         * If multiple property is true, this will only set the basic-input text value.
          * If multiple property is false and the value prop matches with an option, the option will be selected,
-         * Otherwise text will be set in the basic-input.
+         * otherwise text will be set in the basic-input.
+         * @type {("small" | "medium" | "large")}
+         * @default "medium"
          */
         this.size = "medium";
-        /** Sets the selected options when multiple is activated */
+        /**
+         * Sets the selected options when multiple selection is activated.
+         * @type {Array<string>}
+         * @default []
+         */
         this.multipleValues = [];
-        /** Sets the selected dropdown value when dropdown is activated */
+        /**
+         * Sets the selected dropdown value when dropdown mode is activated.
+         * @type {string}
+         * @default ""
+         */
         this.selectedDropdownValue = "";
-        /** Toggles the required sign in the internal input */
+        /**
+         * Toggles the required indicator in the internal input.
+         * @type {boolean}
+         * @default false
+         */
         this.isRequired = false;
-        /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */
+        /**
+         * Allows autocomplete-item informativeIcon to reflect dynamically as the autocomplete's informativeIcon.
+         * When true, the selected item's icon becomes the autocomplete's icon.
+         * @type {boolean}
+         * @default false
+         */
+        this.dynamicInformativeIcon = false;
+        /**
+         * Determines which option field to display in the input when an option is selected.
+         * - "label": displays the option's label if it exists, otherwise falls back to value.
+         * - "value": displays the option's value if it exists, otherwise falls back to label.
+         * - "formatted": runs the `formatter` function using label/value fallback order and displays the result.
+         * If formatter is not defined, it falls back to label first, then value.
+         * @type {"label" | "value" | "formatted"}
+         * @default "label"
+         */
+        this.displayValue = "label";
+        /**
+         * Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction).
+         * @type {Array<{ [key: string]: string }>}
+         * @default []
+         */
         this.allowedStyles = [];
-        /** Sets the width value for the floating container of the items to match the items list width */
+        /**
+         * Sets the floating container width to match the input width.
+         * @type {boolean}
+         * @default true
+         */
         this.matchWidth = true;
-        /** Allows user to define a search icon inside the input at its right (zoom by default) . */
+        /**
+         * Defines a search icon inside the input at its right.
+         * @type {string}
+         * @default "zoom"
+         */
         this.actionIcon = "zoom";
-        /** Sets the autocomplete clear button visibility. */
+        /**
+         * Controls the visibility of the autocomplete clear button.
+         * @type {boolean}
+         * @default true
+         */
         this.showClearButton = true;
         /**
-         * Shows a dropdown chevron arrow that flips up/down when change state open/close.
-         * Also enables the selectedDropdownValue prop to be able to select an option from dropdown
+         * Shows a dropdown chevron arrow that flips up/down when state changes.
+         * Enables the selectedDropdownValue prop to select an option from dropdown.
          * When multiple is true, this prop will be set to false.
+         * @type {boolean}
+         * @default false
          */
         this.dropdown = false;
-        /** Sets the autocomplete dropdown chevron icon visibility. */
+        /**
+         * Controls the visibility of the autocomplete dropdown chevron icon.
+         * @type {boolean}
+         * @default true
+         */
         this.showDropdownIcon = true;
-        /** Enables a message when there's no match options. */
+        /**
+         * Enables a message when there are no matching options.
+         * @type {boolean}
+         * @default false
+         */
         this.showEmptyMessage = false;
-        /** Allow to set the text message in the 'emptyMessage' state. */
+        /**
+         * Sets the text message displayed in the empty state.
+         * @type {string}
+         * @default "No options"
+         */
         this.emptyMessage = "No options";
         /**
-         * Allow multiple values to be selected.
-         * Also enables the multipleValues prop to be able to select multiple options
+         * Enables multiple values to be selected.
+         * Activates the multipleValues prop to select multiple options.
          * When multiple is true, dropdown prop will be set to false.
-         * When multiple is true, valueChanged will emit an array of strings
+         * When multiple is true, valueChanged will emit an array of strings.
+         * @type {boolean}
+         * @default false
          */
         this.multiple = false;
+        /**
+         * Defines the position where the autocomplete dropdown will be opened.
+         * @type {"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end"}
+         * @default "bottom"
+         */
+        this.position = 'bottom';
         /**
          * Toggles the floating container auto-positioning based on available window space.
-         * False by default as it may cause positioning issues in some situations, use with caution
+         * False by default as it may cause positioning issues in some situations, use with caution.
+         * @type {boolean}
+         * @default false
          */
         this.autoPosition = false;
         /**
-         * Clear selection and input on clicking the close button.
+         * Clears selection and input when clicking the close button.
          * Only works when multiple is true.
+         * @type {boolean}
+         * @default false
          */
         this.clearSelection = false;
-        /** Toggles the overlay element, allowing interaction only with this element when active */
+        /**
+         * Toggles the overlay element, allowing interaction only with this element when active.
+         * @type {boolean}
+         * @default false
+         */
         this.backdrop = false;
+        /**
+         * Highlights the matching text inside the options.
+         * @type {boolean}
+         * @default false
+         */
+        this.highlightText = false;
+        /**
+         * In dropdown mode, automatically clears the selected value when the input is fully erased.
+         * When false, the selection persists even when input is cleared.
+         * @type {boolean}
+         * @default true
+         */
+        this.clearOnErase = false;
         this.floatingCleanUp = () => { };
         this.isOpened = false;
         this.options = [];
@@ -66,10 +291,10 @@ export class VdsBasicAutocomplete {
         this.showUnfilteredOptions = false;
         this.updateContainerWidth = updateContainerWidth;
         /**
-         * Sets autocomplete styles for JSX.style property
-         *
-         * @param maxHeight string
-         * @returns { [key: string]: string }
+         * Sets autocomplete styles for the floating container.
+         * @private
+         * @param {string} maxHeight - Maximum height value
+         * @returns {{ [key: string]: string }} Object containing CSS properties
          */
         this.setAutoCompleteStyles = (maxHeight) => {
             let styles = {};
@@ -79,79 +304,178 @@ export class VdsBasicAutocomplete {
             return styles;
         };
     }
+    /**
+     * Component lifecycle method called before the component loads.
+     * Initializes multiselect values, dropdown validation, and default informative icon if dynamic icon is enabled.
+     * @returns {void}
+     */
     componentWillLoad() {
         this.multiselectValues = this.multipleValues;
         this.validateDropdownValue = true;
+        if (this.dynamicInformativeIcon && this.defaultInformativeIcon === undefined) {
+            this.defaultInformativeIcon = this.informativeIcon;
+        }
     }
+    /**
+     * Component lifecycle method called before each render.
+     * Ensures dropdown mode is disabled when multiple selection is active.
+     * @returns {void}
+     */
     componentWillRender() {
         if (this.multiple) {
             this.dropdown = false;
         }
     }
+    /**
+     * Component lifecycle method called after the component loads.
+     * Queries for autocomplete items and sets preselection.
+     * @returns {void}
+     */
     componentDidLoad() {
+        var _a, _b;
         this.options = Array.from(this.hostEl.querySelectorAll("vds-autocomplete-item"));
         this.setPreselection();
+        this.applyHighlightToOptions();
+        this.input = (_b = (_a = this.basicInput) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
     }
+    /**
+     * Component lifecycle method called after each render.
+     * Updates autocomplete items, positions the floating container, and sets preselection.
+     * @returns {void}
+     */
     componentDidRender() {
         this.options = Array.from(this.hostEl.querySelectorAll("vds-autocomplete-item"));
-        updateFloatingBoxPosition(this.basicInput, this.autocompleteContent, null, 'bottom', false);
+        updateFloatingBoxPosition(this.basicInput, this.autocompleteContent, null, this.position, this.autoPosition, ['top', 'bottom']);
         this.updateContainerWidth(this.basicInput, this.matchWidth, this.autocompleteContent);
         this.setPreselection();
+        this.refreshKeyboardNavigation();
+    }
+    /**
+     * Component lifecycle method called when the component is disconnected.
+     * Removes event listeners and disconnects observer.
+     * @returns {void}
+     */
+    disconnectedCallback() {
+        this.destroyKeyboardNavigation();
     }
+    /**
+     * Watches multiselectValues and emits valueChanged event with the updated values.
+     * @private
+     * @returns {void}
+     */
     setMulitpleValueHandler() {
         this.valueChanged.emit(this.multiselectValues);
     }
+    /**
+     * Watches disabled state and closes the autocomplete when disabled.
+     * @private
+     * @returns {void}
+     */
     setDisabledState() {
         this.close();
     }
+    /**
+     * Watches value state and highlight autocomplete items in case it is needed.
+     * @private
+     * @returns {void}
+     */
+    setValueState() {
+        this.applyHighlightToOptions();
+        this.refreshKeyboardNavigation();
+    }
+    /**
+     * Applies the current input value as highlight text to each autocomplete item.
+     * If highlighting is disabled or value is empty, items receive an empty highlight text.
+     * @private
+     * @returns {void}
+     */
+    applyHighlightToOptions() {
+        var _a;
+        if (!this.highlightText)
+            return;
+        const valueToHighlight = this.highlightText && this.hasValue() ? this.value : "";
+        (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
+            item.highlightText = valueToHighlight;
+        });
+    }
+    /**
+     * Watches selectedDropdownValue and resets validation flag when it changes.
+     * @private
+     * @returns {void}
+     */
     setDropdownValueValidation() {
         this.validateDropdownValue = true;
     }
+    /**
+     * Watches isOpened state and toggles the autocomplete floating container.
+     * Emits opened/closed events and manages floating positioning.
+     * @private
+     * @returns {Promise<void>}
+     */
     async toggleAutocomplete() {
         if (this.isOpened) {
             toggleContainerDisplay(this.autocompleteContent, true);
+            this.setDropdownOpenState();
             this.opened.emit();
-            this.floatingCleanUp = await updateFloatingBoxPosition(this.basicInput, this.autocompleteContent, null, "bottom", this.autoPosition);
+            this.floatingCleanUp = await updateFloatingBoxPosition(this.basicInput, this.autocompleteContent, null, this.position, this.autoPosition, ['top', 'bottom']);
+            this.initKeyboardNavigation();
         }
         else {
             toggleContainerDisplay(this.autocompleteContent, false);
+            this.destroyKeyboardNavigation();
             this.closed.emit();
             this.floatingCleanUp();
         }
     }
-    /* Open the floating element(menu) of the autocomplete. */
+    /**
+     * Opens the floating element (menu) of the autocomplete.
+     * Only opens if the component is not readonly or disabled.
+     * @method
+     * @public
+     * @returns {Promise<void>}
+     */
     async open() {
         if (!this.isReadonly && !this.disabled) {
-            setTimeout(() => {
-                this.isOpened = true;
-            });
+            this.isOpened = true;
         }
     }
-    /* Close the floating element(menu) of the autocomplete. */
+    /**
+     * Closes the floating element (menu) of the autocomplete.
+     * @method
+     * @public
+     * @returns {Promise<void>}
+     */
     async close() {
         this.isOpened = false;
     }
-    /* Sets focus to the input element */
+    /**
+     * Sets focus to the input element and opens the autocomplete.
+     * @method
+     * @public
+     * @returns {Promise<void>}
+     */
     async setFocus() {
         this.basicInput.setFocus();
-        setTimeout(() => {
-            this.open();
-        });
+        this.open();
     }
     /**
      * Sets the autocomplete input value to handle filtering.
-     *
+     * @method
+     * @public
+     * @param {string} value - The value to set
      * @returns {Promise<void>}
      */
     async setValue(value) {
         this.value = value;
     }
     /**
-     * Sets the autocomplete selection value to handle.
-     * When multiple is true, sets the selected values from the list
+     * Sets the autocomplete selection value.
+     * When multiple is true, sets the selected values from the list.
      * When dropdown is true and multiple is false, sets a single selected value.
-     * When dropdown is false and When multiple is false, set the input value
-     *
+     * When dropdown is false and multiple is false, sets the input value.
+     * @method
+     * @public
+     * @param {string | string[]} value - The value or values to set
      * @returns {Promise<void>}
      */
     async setSelectionValue(value) {
@@ -165,9 +489,13 @@ export class VdsBasicAutocomplete {
         }
     }
     /**
-     * Return the autocomplete value.
-     *
-     * @returns {Promise<string>} A promise that resolves by returning the autocomplete value.
+     * Returns the autocomplete value.
+     * Returns multipleValues array if multiple is true.
+     * Returns selectedDropdownValue if dropdown is true.
+     * Returns the input value otherwise.
+     * @method
+     * @public
+     * @returns {Promise<string | string[]>} A promise that resolves with the autocomplete value
      */
     async getValue() {
         if (this.multiple) {
@@ -180,8 +508,10 @@ export class VdsBasicAutocomplete {
     }
     /**
      * Clears the selected options and resets the value of the autocomplete.
-     *
-     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.
+     * Emits a cleared event when complete.
+     * @method
+     * @public
+     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete
      */
     async clear() {
         this.value = '';
@@ -192,8 +522,18 @@ export class VdsBasicAutocomplete {
             this.multipleValues = this.multiselectValues = [];
             this.setOptionsMultiple();
         }
+        if (this.dynamicInformativeIcon) {
+            this.informativeIcon = this.defaultInformativeIcon;
+        }
         this.cleared.emit();
     }
+    /**
+     * Listens for autocompleteClicked events from autocomplete items.
+     * Handles option selection for both single and multiple modes.
+     * @private
+     * @param {CustomEvent<{value: string, selected: boolean}>} evt - The autocomplete clicked event
+     * @returns {void}
+     */
     handleSelectOption(evt) {
         const selectedOption = this.options.find((option) => findOptionByExactValue(option, evt.detail.value));
         const isValidOption = selectedOption !== null && selectedOption !== undefined;
@@ -205,22 +545,52 @@ export class VdsBasicAutocomplete {
             this.setOptionsSingle(evt.detail.value);
         }
     }
-    /* Close the autocomplete when click outside */
+    /**
+     * Listens for clicks outside the autocomplete to close it.
+     * @private
+     * @param {MouseEvent} evt - The mouse click event
+     * @returns {void}
+     */
     handleClickOut(evt) {
-        evt.stopPropagation();
-        const target = evt.target;
-        const isClickInside = this.hostEl.contains(target);
-        const isClickInsideParentAutocomplete = target.nodeName === "VDS-AUTOCOMPLETE" && target.shadowRoot && evt.target.shadowRoot.contains(this.hostEl);
-        if (!isClickInside && !isClickInsideParentAutocomplete) {
-            this.isOpened = false;
+        const path = evt.composedPath ? evt.composedPath() : [];
+        const isClickInside = path.includes(this.hostEl);
+        if (!isClickInside) {
+            this.close();
+        }
+    }
+    /**
+     * Listens for focusout events to close the autocomplete.
+     * Handles focus moving to other focusable elements.
+     * @private
+     * @param {FocusEvent} evt - The focus event
+     * @returns {void}
+     */
+    handleFocusOut(evt) {
+        const relatedTarget = evt.relatedTarget;
+        if (!relatedTarget || !this.hostEl.contains(relatedTarget)) {
+            if (!this.hostEl.contains(document.activeElement)) {
+                this.close();
+            }
         }
     }
+    /**
+     * Listens for Escape key presses to close the autocomplete.
+     * @private
+     * @param {any} evt - The keyboard event
+     * @returns {void}
+     */
     handleEscPress(evt) {
         if (this.isOpened && evt.code === "Escape") {
             this.close();
             this.basicInput.blur();
         }
     }
+    /**
+     * Handles multi-selection logic for adding or removing values.
+     * @private
+     * @param {{value: string, selected: boolean}} selection - The selection details
+     * @returns {void}
+     */
     handleMultiselection(selection) {
         if (selection.selected && !this.multipleValues.find(value => value.toLowerCase() === selection.value.toLowerCase())) {
             this.multipleValues.push(selection.value);
@@ -231,13 +601,25 @@ export class VdsBasicAutocomplete {
         this.multiselectValues = Array.from(this.multipleValues);
         this.basicInput.setFocus();
     }
+    /**
+     * Handles value assignment for both single and multiple selection modes.
+     * Emits valueChanged and selectedValueChanged events.
+     * @private
+     * @param {CustomEvent<{ value: string; selected: boolean; }>} evt - The selection event
+     * @param {HTMLVdsAutocompleteItemElement} selectedOption - The selected option element
+     * @returns {void}
+     */
     handleValueAssignment(evt, selectedOption) {
         if (this.multiple) {
             this.handleMultiselection(evt.detail);
         }
         else {
-            this.value = evt.detail.value;
             this.setSelectionValue(evt.detail.value);
+            let display = evt.detail.value;
+            if (selectedOption) {
+                display = this.formatOptionDisplay(selectedOption);
+            }
+            this.value = display;
             this.valueChanged.emit(this.value);
             if (selectedOption) {
                 this.selectedValueChanged.emit({
@@ -245,44 +627,122 @@ export class VdsBasicAutocomplete {
                     value: selectedOption.value,
                     target: selectedOption
                 });
+                if (this.dynamicInformativeIcon && this.dropdown) {
+                    this.informativeIcon = selectedOption.informativeIcon;
+                }
             }
             this.handleInputChange();
             this.close();
         }
     }
+    /**
+     * Handles input change events and debouncing.
+     * Emits changeInput event and updates the value with or without debouncing.
+     * In dropdown mode, clears the selected option when input is fully erased (if clearOnErase is true).
+     * @private
+     * @param {CustomEvent<string>} evt - The input change event
+     * @returns {void}
+     */
     handleChange(evt) {
         evt.stopPropagation();
-        this.changeInput.emit(evt.detail);
+        const nextValue = evt.detail;
+        this.changeInput.emit(nextValue);
+        if (this.dropdown) {
+            this.showUnfilteredOptions = false;
+            if (this.selectedDropdownValue && nextValue === '') {
+                if (this.clearOnErase) {
+                    this.clearOptions();
+                    this.value = '';
+                    this.valueChanged.emit(this.value);
+                    if (this.dynamicInformativeIcon) {
+                        this.informativeIcon = this.defaultInformativeIcon;
+                    }
+                }
+                return;
+            }
+        }
         if (this.debounce !== undefined && this.debounce > 0) {
-            this.handleDebounceValueChange(evt.detail);
+            this.handleDebounceValueChange(nextValue);
         }
         else {
-            this.value = evt.detail;
-        }
-        if (this.dropdown) {
-            this.showUnfilteredOptions = false;
+            this.value = nextValue;
         }
     }
+    /**
+     * Dispatches a native input event from the host element.
+     * @private
+     * @returns {void}
+     */
     handleInputChange() {
         const inputEvent = new InputEvent("input");
         this.hostEl.dispatchEvent(inputEvent);
     }
+    /**
+     * Handles focus event on the input.
+     * Opens the autocomplete and shows unfiltered options in dropdown mode when value exists.
+     * @private
+     * @returns {void}
+     */
     hasFocus() {
         this.open();
-        if (this.hasValue() && this.dropdown) {
-            this.showUnfilteredOptions = true;
-            this.validateDropdownValue = false;
-        }
+        this.setDropdownOpenState();
     }
+    /**
+     * Handles blur event on the input.
+     * Resets unfiltered options display and validation in dropdown mode.
+     * @private
+     * @returns {void}
+     */
     lostFocus() {
         if (this.dropdown) {
             this.showUnfilteredOptions = false;
             this.validateDropdownValue = true;
         }
     }
+    /**
+     * Emits the actionIconClick event when the action icon is clicked.
+     * @private
+     * @returns {void}
+     */
     emitActionIcon() {
         this.actionIconClick.emit();
     }
+    /**
+     * Prepares dropdown-only state when the component opens.
+     * Keeps the selected option visible in unfiltered mode when a valid value exists.
+     * @private
+     * @returns {void}
+     */
+    setDropdownOpenState() {
+        if (this.dropdown && this.hasValue()) {
+            this.showUnfilteredOptions = true;
+            this.validateDropdownValue = false;
+        }
+    }
+    /**
+     * Return the display string for an option using the current `displayValue` and `formatter`.
+     * @private
+     */
+    formatOptionDisplay(option) {
+        var _a, _b, _c, _d, _e, _f;
+        if (!option)
+            return '';
+        if (this.displayValue === 'label') {
+            return (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : '';
+        }
+        if (this.displayValue === 'value') {
+            return (_d = (_c = option.value) !== null && _c !== void 0 ? _c : option.label) !== null && _d !== void 0 ? _d : '';
+        }
+        const raw = (_f = (_e = option.label) !== null && _e !== void 0 ? _e : option.value) !== null && _f !== void 0 ? _f : '';
+        const formatted = this.formatter ? this.formatter(raw) : undefined;
+        return formatted !== null && formatted !== void 0 ? formatted : raw;
+    }
+    /**
+     * Handles debounced value changes with a timeout.
+     * @private
+     * @param {string} newValue - The new input value
+     * @returns {void}
+     */
     handleDebounceValueChange(newValue) {
         if (this.debounceTimeTracker !== null) {
             clearTimeout(this.debounceTimeTracker);
@@ -293,9 +753,19 @@ export class VdsBasicAutocomplete {
             this.debounceTimeTracker = null;
         }, this.debounce);
     }
+    /**
+     * Checks if the autocomplete has a valid value.
+     * @private
+     * @returns {boolean} True if the value is valid, false otherwise
+     */
     hasValue() {
         return this.value !== null && this.value !== undefined && this.value !== "undefined" && this.value !== "";
     }
+    /**
+     * Sets preselection for multiple and dropdown modes.
+     * @private
+     * @returns {void}
+     */
     setPreselection() {
         if (this.multiple) {
             this.setOptionsMultiple();
@@ -304,6 +774,11 @@ export class VdsBasicAutocomplete {
             this.setDropdownOption();
         }
     }
+    /**
+     * Sets checkmarks and selected states for multiple selection mode.
+     * @private
+     * @returns {void}
+     */
     setOptionsMultiple() {
         try {
             this.options.forEach(item => {
@@ -318,9 +793,10 @@ export class VdsBasicAutocomplete {
         }
     }
     /**
-     * Sets the selected value for a autocomplete type dropdown and updates the options accordingly.
+     * Sets the selected value for autocomplete dropdown mode and updates options accordingly.
      * @private
-     * @param {string} selectedValue - The value of the selected option.
+     * @param {string} selectedValue - The value of the selected option
+     * @returns {void}
      */
     setOptionsSingle(selectedValue) {
         try {
@@ -334,6 +810,11 @@ export class VdsBasicAutocomplete {
             console.warn("[setOptionsSingle]", error);
         }
     }
+    /**
+     * Sets the dropdown option value and validates it.
+     * @private
+     * @returns {void}
+     */
     setDropdownOption() {
         var _a, _b;
         try {
@@ -345,7 +826,15 @@ export class VdsBasicAutocomplete {
                 this.setOptionsSingle(this.selectedDropdownValue);
                 if (this.validateDropdownValue) {
                     const option = (_b = this.options) === null || _b === void 0 ? void 0 : _b.find(opt => findOptionByExactValue(opt, this.selectedDropdownValue));
-                    this.value = option ? (option.label || option.value) : this.value;
+                    if (option) {
+                        this.value = this.formatOptionDisplay(option);
+                        if (this.dynamicInformativeIcon) {
+                            this.informativeIcon = option.informativeIcon;
+                        }
+                    }
+                    else {
+                        this.value = this.value;
+                    }
                     this.validateDropdownValue = false;
                 }
             }
@@ -355,9 +844,9 @@ export class VdsBasicAutocomplete {
         }
     }
     /**
-     * Sets the all the options to unselected state
+     * Sets all options to unselected state and clears the dropdown value.
      * @private
-     * @param {string} selectedValue - The value of the selected option.
+     * @returns {void}
      */
     clearOptions() {
         try {
@@ -370,17 +859,37 @@ export class VdsBasicAutocomplete {
             console.warn("[clearOptions]", error);
         }
     }
+    /**
+     * Renders all unfiltered options in the dropdown.
+     * @private
+     * @returns {HTMLStencilElement} The unfiltered options container
+     */
     renderUnfilteredOptions() {
         return (h("div", { class: combineClasses('vds-basic-autocomplete__content-options', this.maxHeight ? 'scrollable' : ''), style: this.setAutoCompleteStyles(this.maxHeight) }, h("slot", { name: "items" }), h("slot", null)));
     }
+    /**
+     * Renders a single autocomplete item with proper selection state.
+     * @private
+     * @param {HTMLVdsAutocompleteItemElement} item - The autocomplete item element
+     * @returns {HTMLStencilElement} The rendered autocomplete item
+     */
     renderItem(item) {
         var _a;
         let isSelected = false;
         if (this.multiple) {
             isSelected = (_a = this.multipleValues) === null || _a === void 0 ? void 0 : _a.some(value => findOptionByValue(item, value));
         }
-        return (h("vds-autocomplete-item", Object.assign({ isSelected: isSelected, hasCheckmark: this.multiple }, cloneAttributes(item), { innerHTML: item.innerHTML })));
+        else if (this.dropdown) {
+            isSelected = findOptionByExactValue(item, this.selectedDropdownValue);
+        }
+        return (h("vds-autocomplete-item", Object.assign({}, cloneAttributes(item), { disabled: item.disabled, informativeIcon: item.informativeIcon, size: item.size, isActive: item.isActive, isSelected: isSelected, hasCheckmark: this.multiple, innerHTML: item.innerHTML })));
     }
+    /**
+     * Renders filtered options based on the current input value.
+     * Shows empty message if no options match and showEmptyMessage is true.
+     * @private
+     * @returns {HTMLStencilElement} The filtered options container or null
+     */
     renderFilteredOptions() {
         const value = this.hasValue() ? this.value : "";
         const filteredOptions = getFilteredOptions(this.options, value);
@@ -389,6 +898,11 @@ export class VdsBasicAutocomplete {
         }
         return (h("div", { class: combineClasses('vds-basic-autocomplete__content-options', this.maxHeight ? 'scrollable' : ''), style: this.setAutoCompleteStyles(this.maxHeight) }, filteredOptions.map(item => this.renderItem(item))));
     }
+    /**
+     * Renders an empty option when no items match the filter.
+     * @private
+     * @returns {HTMLStencilElement} The empty option element
+     */
     renderEmptyOption() {
         if (!this.autocompleteItemEmptyOption) {
             this.autocompleteItemEmptyOption = document.createElement("vds-autocomplete-item");
@@ -400,19 +914,34 @@ export class VdsBasicAutocomplete {
         this.autocompleteItemEmptyOption.setAttribute("label", this.emptyMessage);
         return this.renderItem(this.autocompleteItemEmptyOption);
     }
+    /**
+     * Renders the clear icon button.
+     * @private
+     * @returns {HTMLStencilElement} The clear icon button element
+     */
     renderClearIcon() {
         const disabled = this.disabled || this.isReadonly;
         return (h("vds-icon-button", { tabIndex: disabled ? -1 : undefined, disabled: disabled, variant: "secondary", size: getActionIconButtonSize(this.size), icon: "close", onClick: disabled ? undefined : () => { this.clear(); this.basicInput.setFocus(); } }));
     }
+    /**
+     * Renders the action icon (dropdown chevron or search icon).
+     * @private
+     * @returns {HTMLStencilElement} The action icon element
+     */
     renderActionIcon() {
         const disabled = this.disabled || this.isReadonly;
         if (this.dropdown && this.showDropdownIcon) {
-            return (h("vds-icon", { svgIcon: this.isOpened ? 'chevron-up' : 'chevron-down', color: getIconColor(this.disabled, this.isReadonly), size: getIconSize(this.size), onClick: disabled ? undefined : () => this.isOpened ? this.close() : this.open() }));
+            return (h("vds-icon", { class: "vds-basic-autocomplete__dropdown-icon", svgIcon: this.isOpened ? 'chevron-up' : 'chevron-down', color: getIconColor(this.disabled, this.isReadonly), size: getIconSize(this.size), onClick: disabled ? undefined : () => this.isOpened ? this.close() : this.open() }));
         }
         if (this.actionIcon) {
             return (h("vds-icon-button", { tabIndex: disabled ? -1 : undefined, disabled: disabled, variant: "secondary", size: getActionIconButtonSize(this.size), icon: this.actionIcon, onClick: disabled ? undefined : () => this.emitActionIcon() }));
         }
     }
+    /**
+     * Renders the appropriate options based on dropdown state and value.
+     * @private
+     * @returns {HTMLStencilElement} The options container
+     */
     renderOptions() {
         if (this.dropdown && this.showUnfilteredOptions) {
             return this.renderUnfilteredOptions();
@@ -422,16 +951,85 @@ export class VdsBasicAutocomplete {
         }
         return this.renderUnfilteredOptions();
     }
+    /**
+     * Initializes keyboard navigation for autocomplete items.
+     * Subscribes to keyboard events and manages focus within the autocomplete.
+     * Closes autocomplete on Escape key and restores focus to trigger element.
+     * @private
+     * @returns {void}
+     */
+    initKeyboardNavigation() {
+        const autocompleteItems = this.getAutocompleteItems();
+        if (autocompleteItems.length === 0) {
+            return;
+        }
+        const triggerEl = getDeepActiveElement();
+        if (!triggerEl) {
+            return;
+        }
+        KeyboardNavigation.subscribe(autocompleteItems, document.body, this.close.bind(this), this.input);
+    }
+    /**
+     * Refreshes keyboard navigation targets after autocomplete items are re-rendered.
+     * @private
+     * @returns {void}
+     */
+    refreshKeyboardNavigation() {
+        if (!this.isOpened) {
+            return;
+        }
+        const autocompleteItems = this.getAutocompleteItems();
+        if (autocompleteItems.length === 0) {
+            return;
+        }
+        KeyboardNavigation.updateFocusedItems(autocompleteItems);
+    }
+    /**
+     * Returns focusable autocomplete items that can be navigated
+     * @private
+     * @returns {HTMLElement[]} An array of focusable autocomplete items.
+     */
+    getAutocompleteItems() {
+        var _a;
+        const optionsContainer = (_a = this.autocompleteContent) === null || _a === void 0 ? void 0 : _a.querySelector('.vds-basic-autocomplete__content-options');
+        if (!optionsContainer) {
+            return [];
+        }
+        // Filtered mode renders cloned <vds-autocomplete-item> nodes directly in shadow DOM.
+        const renderedItems = Array.from(optionsContainer.querySelectorAll('vds-autocomplete-item:not([disabled]):not(.non-clickable)'));
+        // Unfiltered mode renders slots, so collect assigned elements from those slots.
+        const slottedItems = Array.from(optionsContainer.querySelectorAll('slot'))
+            .flatMap((slotEl) => slotEl.assignedElements({ flatten: true }))
+            .filter((el) => {
+            return el.tagName === 'VDS-AUTOCOMPLETE-ITEM' && !el.hasAttribute('disabled') && !el.classList.contains('non-clickable');
+        });
+        const items = renderedItems.length > 0 ? renderedItems : slottedItems;
+        return items
+            .map((autocomplete) => { var _a, _b; return (_b = (_a = autocomplete.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) !== null && _b !== void 0 ? _b : null; })
+            .filter((btn) => btn !== null);
+    }
+    /**
+     * Destroys the active keyboard navigation session.
+     * @private
+     * @returns {void}
+     */
+    destroyKeyboardNavigation() {
+        KeyboardNavigation.unsubscribe();
+    }
+    /**
+     * Renders the complete autocomplete component.
+     * @returns {HTMLStencilElement} The root autocomplete element
+     */
     render() {
         const filteredOptions = getFilteredOptions(this.options, this.value || "");
-        return (h(Host, { key: '33314c7daf892e83429def416796fd44d0072061', class: this.disabled ? "vds-basic-autocomplete--disabled" : "", title: this.value }, h("div", { key: '313249e9a7bfe83f7cdb5c3a19e213efede9288a', class: combineClasses("vds-basic-autocomplete__container") }, h("vds-basic-input", { key: 'a9c7f870b30a5206263a3aabb60e440e1c10b799', ref: (el) => {
+        return (h(Host, { key: 'dd3bc6654bc50937ccdf8964cb519a4b80858152', class: this.disabled ? "vds-basic-autocomplete--disabled" : "", title: this.value }, h("div", { key: '4c1754a52e07045bf8429411bc81b3d577dee48e', class: combineClasses("vds-basic-autocomplete__container") }, h("vds-basic-input", { key: '765dcb8fdd9190c938c05d9d9542fe5384b142f2', ref: (el) => {
                 if (el) {
                     this.basicInput = el;
                 }
-            }, type: "text", placeholder: this.placeholder, value: this.value, size: this.size, disabled: this.disabled, isReadonly: this.isReadonly, error: this.error, isRequired: this.isRequired, formatter: this.formatter, informativeIcon: this.informativeIcon, allowedStyles: this.allowedStyles, onChangeInput: (evt) => this.handleChange(evt), onFocus: () => this.hasFocus(), onBlur: () => this.lostFocus() }, this.showClearButton && this.hasValue() && (h("div", { key: '2715d86808bda1bbac461e9383da206b6b285224', class: "vds-basic-autocomplete__secondary-action", slot: "secondaryActionIcon" }, this.renderClearIcon())), ((this.dropdown && this.showDropdownIcon) || this.actionIcon) && (h("div", { key: 'a4b2ed560302233dd049634ab825bc09ea447303', class: "vds-basic-autocomplete__primary-action", slot: "primaryActionIcon" }, this.renderActionIcon()))), this.backdrop && this.isOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: '8627f4c261001c9b3ce9415de579ab39a4a1eca0', ref: (el) => {
+            }, type: "text", placeholder: this.placeholder, value: this.value, size: this.size, disabled: this.disabled, isReadonly: this.isReadonly, error: this.error, isRequired: this.isRequired, formatter: this.formatter, informativeIcon: this.informativeIcon, allowedStyles: this.allowedStyles, onChangeInput: (evt) => this.handleChange(evt), onFocus: () => this.hasFocus(), onBlur: () => this.lostFocus() }, this.showClearButton && this.hasValue() && (h("div", { key: '8dd386ce6dc2ecfe6d784614ae69fc19f577e766', class: "vds-basic-autocomplete__secondary-action", slot: "secondaryActionIcon" }, this.renderClearIcon())), ((this.dropdown && this.showDropdownIcon) || this.actionIcon) && (h("div", { key: '09b1c3b0a3de814bb2bc731e26f72d6d95260baf', class: "vds-basic-autocomplete__primary-action", slot: "primaryActionIcon" }, this.renderActionIcon()))), this.backdrop && this.isOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: '7feef80588774da5e1a317a32401985192271a9c', ref: (el) => {
                 if (el)
                     this.autocompleteContent = el;
-            }, class: combineClasses("vds-basic-autocomplete__content", this.maxHeight ? "has-scroll" : "", (!this.emptyMessage || this.emptyMessage === "") && filteredOptions.length === 0 ? "no-shadow" : "", !this.showEmptyMessage && filteredOptions.length === 0 ? "no-shadow" : "", !this.value && this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: 'e9c886f1c5c6f3ce1d9195dee4aadb22cfb9dc29', class: "vds-basic-autocomplete__content__header" }, h("slot", { key: 'bf20136cbad0011b8619353c01947552c6dacc3f', name: "header" })), this.renderOptions()))));
+            }, class: combineClasses("vds-basic-autocomplete__content", this.maxHeight ? "has-scroll" : "", (!this.emptyMessage || this.emptyMessage === "") && filteredOptions.length === 0 ? "no-shadow" : "", !this.showEmptyMessage && filteredOptions.length === 0 ? "no-shadow" : "", !this.value && this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: 'ee3b6536ae8b11abf0993a4a413c0950d8b9e051', class: "vds-basic-autocomplete__content__header" }, h("slot", { key: '68310b2e9f3a1cb40f8ad277535040cfc4e9454b', name: "header" })), this.renderOptions()))));
     }
     static get is() { return "vds-basic-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -458,8 +1056,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the internal input size.\nIf multiple property is true, This will only set the basic-input text value.\nIf multiple property is false and the value prop matches with an option, the option will be selected,\nOtherwise text will be set in the basic-input."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{(\"small\" | \"medium\" | \"large\")}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Sets the internal input size.\nIf multiple property is true, this will only set the basic-input text value.\nIf multiple property is false and the value prop matches with an option, the option will be selected,\notherwise text will be set in the basic-input."
                 },
                 "getter": false,
                 "setter": false,
@@ -478,8 +1082,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the internal input value"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the internal input value for filtering options."
                 },
                 "getter": false,
                 "setter": false,
@@ -502,8 +1112,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the selected options when multiple is activated"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{Array<string>}"
+                        }, {
+                            "name": "default",
+                            "text": "[]"
+                        }],
+                    "text": "Sets the selected options when multiple selection is activated."
                 },
                 "getter": false,
                 "setter": false,
@@ -511,7 +1127,7 @@ export class VdsBasicAutocomplete {
             },
             "selectedDropdownValue": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -520,8 +1136,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the selected dropdown value when dropdown is activated"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
+                    "text": "Sets the selected dropdown value when dropdown mode is activated."
                 },
                 "getter": false,
                 "setter": false,
@@ -540,8 +1162,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the internal input placeholder."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the internal input placeholder text."
                 },
                 "getter": false,
                 "setter": false,
@@ -559,7 +1187,13 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
                     "text": "Sets the internal input in disabled state."
                 },
                 "getter": false,
@@ -578,7 +1212,13 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
                     "text": "Sets the internal input in readonly state."
                 },
                 "getter": false,
@@ -597,7 +1237,13 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
                     "text": "Sets the internal input in error state."
                 },
                 "getter": false,
@@ -616,8 +1262,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Toggles the required sign in the internal input"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Toggles the required indicator in the internal input."
                 },
                 "getter": false,
                 "setter": false,
@@ -627,7 +1279,7 @@ export class VdsBasicAutocomplete {
             },
             "informativeIcon": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -636,14 +1288,46 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Allows user to define a information icon inside the input at its left ."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Defines an informative icon inside the input at its left."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "informative-icon"
             },
+            "dynamicInformativeIcon": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Allows autocomplete-item informativeIcon to reflect dynamically as the autocomplete's informativeIcon.\nWhen true, the selected item's icon becomes the autocomplete's icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dynamic-informative-icon",
+                "defaultValue": "false"
+            },
             "formatter": {
                 "type": "unknown",
                 "mutable": true,
@@ -660,12 +1344,44 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{Function}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
                     "text": "Sets character formatting for user input. Useful for adding a mask to the input."
                 },
                 "getter": false,
                 "setter": false
             },
+            "displayValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"label\" | \"value\" | \"formatted\"",
+                    "resolved": "\"formatted\" | \"label\" | \"value\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"label\" | \"value\" | \"formatted\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"label\""
+                        }],
+                    "text": "Determines which option field to display in the input when an option is selected.\n- \"label\": displays the option's label if it exists, otherwise falls back to value.\n- \"value\": displays the option's value if it exists, otherwise falls back to label.\n- \"formatted\": runs the `formatter` function using label/value fallback order and displays the result.\nIf formatter is not defined, it falls back to label first, then value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-value",
+                "defaultValue": "\"label\""
+            },
             "allowedStyles": {
                 "type": "unknown",
                 "mutable": true,
@@ -677,8 +1393,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction)"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{Array<{ [key: string]: string }>}"
+                        }, {
+                            "name": "default",
+                            "text": "[]"
+                        }],
+                    "text": "Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction)."
                 },
                 "getter": false,
                 "setter": false,
@@ -695,8 +1417,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set the max height value for the floating container of the items"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the max height value for the floating container of the items."
                 },
                 "getter": false,
                 "setter": false,
@@ -714,8 +1442,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the width value for the floating container of the items to match the items list width"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Sets the floating container width to match the input width."
                 },
                 "getter": false,
                 "setter": false,
@@ -734,8 +1468,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Debounce time for key inputs before the search"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Debounce time in milliseconds for key inputs before triggering the search."
                 },
                 "getter": false,
                 "setter": false,
@@ -753,8 +1493,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Allows user to define a search icon inside the input at its right (zoom by default) ."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"zoom\""
+                        }],
+                    "text": "Defines a search icon inside the input at its right."
                 },
                 "getter": false,
                 "setter": false,
@@ -773,8 +1519,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the autocomplete clear button visibility."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Controls the visibility of the autocomplete clear button."
                 },
                 "getter": false,
                 "setter": false,
@@ -793,8 +1545,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Shows a dropdown chevron arrow that flips up/down when change state open/close.\nAlso enables the selectedDropdownValue prop to be able to select an option from dropdown\nWhen multiple is true, this prop will be set to false."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Shows a dropdown chevron arrow that flips up/down when state changes.\nEnables the selectedDropdownValue prop to select an option from dropdown.\nWhen multiple is true, this prop will be set to false."
                 },
                 "getter": false,
                 "setter": false,
@@ -813,8 +1571,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the autocomplete dropdown chevron icon visibility."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Controls the visibility of the autocomplete dropdown chevron icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -833,8 +1597,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Enables a message when there's no match options."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enables a message when there are no matching options."
                 },
                 "getter": false,
                 "setter": false,
@@ -853,8 +1623,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Allow to set the text message in the 'emptyMessage' state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"No options\""
+                        }],
+                    "text": "Sets the text message displayed in the empty state."
                 },
                 "getter": false,
                 "setter": false,
@@ -873,8 +1649,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Allow multiple values to be selected.\nAlso enables the multipleValues prop to be able to select multiple options\nWhen multiple is true, dropdown prop will be set to false.\nWhen multiple is true, valueChanged will emit an array of strings"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enables multiple values to be selected.\nActivates the multipleValues prop to select multiple options.\nWhen multiple is true, dropdown prop will be set to false.\nWhen multiple is true, valueChanged will emit an array of strings."
                 },
                 "getter": false,
                 "setter": false,
@@ -882,6 +1664,32 @@ export class VdsBasicAutocomplete {
                 "attribute": "multiple",
                 "defaultValue": "false"
             },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"bottom\""
+                        }],
+                    "text": "Defines the position where the autocomplete dropdown will be opened."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom'"
+            },
             "autoPosition": {
                 "type": "boolean",
                 "mutable": true,
@@ -893,8 +1701,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Toggles the floating container auto-positioning based on available window space. \nFalse by default as it may cause positioning issues in some situations, use with caution"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Toggles the floating container auto-positioning based on available window space.\nFalse by default as it may cause positioning issues in some situations, use with caution."
                 },
                 "getter": false,
                 "setter": false,
@@ -913,8 +1727,14 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Clear selection and input on clicking the close button.\nOnly works when multiple is true."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Clears selection and input when clicking the close button.\nOnly works when multiple is true."
                 },
                 "getter": false,
                 "setter": false,
@@ -933,21 +1753,80 @@ export class VdsBasicAutocomplete {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Toggles the overlay element, allowing interaction only with this element when active"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Toggles the overlay element, allowing interaction only with this element when active."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "backdrop",
                 "defaultValue": "false"
+            },
+            "highlightText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Highlights the matching text inside the options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "highlight-text",
+                "defaultValue": "false"
+            },
+            "clearOnErase": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "In dropdown mode, automatically clears the selected value when the input is fully erased.\nWhen false, the selection persists even when input is cleared."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-on-erase",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "isOpened": {},
-            "multiselectValues": {}
+            "multiselectValues": {},
+            "defaultInformativeIcon": {}
         };
     }
     static get events() {
@@ -958,8 +1837,14 @@ export class VdsBasicAutocomplete {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when floating element gets opens"
+                    "tags": [{
+                            "name": "event",
+                            "text": "opened"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
+                    "text": "Emitted when the floating element opens."
                 },
                 "complexType": {
                     "original": "void",
@@ -973,8 +1858,14 @@ export class VdsBasicAutocomplete {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when floating element gets closes"
+                    "tags": [{
+                            "name": "event",
+                            "text": "closed"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
+                    "text": "Emitted when the floating element closes."
                 },
                 "complexType": {
                     "original": "void",
@@ -988,8 +1879,14 @@ export class VdsBasicAutocomplete {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when an item is selected, this event contains the label of the selected item(s)"
+                    "tags": [{
+                            "name": "event",
+                            "text": "valueChanged"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<string | string[]>}"
+                        }],
+                    "text": "Emitted when an item is selected. Contains the label of the selected item(s)."
                 },
                 "complexType": {
                     "original": "string | string[]",
@@ -1003,8 +1900,14 @@ export class VdsBasicAutocomplete {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits an event when the clear button is clicked"
+                    "tags": [{
+                            "name": "event",
+                            "text": "cleared"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
+                    "text": "Emitted when the clear button is clicked."
                 },
                 "complexType": {
                     "original": "void",
@@ -1018,8 +1921,14 @@ export class VdsBasicAutocomplete {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits an event when the user click the actionIcon (the magnifying glass)"
+                    "tags": [{
+                            "name": "event",
+                            "text": "actionIconClick"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
+                    "text": "Emitted when the user clicks the actionIcon (the magnifying glass)."
                 },
                 "complexType": {
                     "original": "void",
@@ -1033,8 +1942,14 @@ export class VdsBasicAutocomplete {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits updated inputed value from the vds-basic-input similar to the input event"
+                    "tags": [{
+                            "name": "event",
+                            "text": "changeInput"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<string>}"
+                        }],
+                    "text": "Emitted with the updated input value from the vds-basic-input, similar to the input event."
                 },
                 "complexType": {
                     "original": "string",
@@ -1048,8 +1963,14 @@ export class VdsBasicAutocomplete {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when an item is selected, this event contains the value of the selected item(s)"
+                    "tags": [{
+                            "name": "event",
+                            "text": "selectedValueChanged"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<SelectedValueChangedEventDetail>}"
+                        }],
+                    "text": "Emitted when an item is selected. Contains the value of the selected item(s)."
                 },
                 "complexType": {
                     "original": "SelectedValueChangedEventDetail",
@@ -1058,7 +1979,8 @@ export class VdsBasicAutocomplete {
                         "SelectedValueChangedEventDetail": {
                             "location": "import",
                             "path": "./vds-basic-autocomplete.utils",
-                            "id": "src/components/autocomplete/vds-basic-autocomplete.utils.ts::SelectedValueChangedEventDetail"
+                            "id": "src/components/autocomplete/vds-basic-autocomplete.utils.ts::SelectedValueChangedEventDetail",
+                            "referenceLocation": "SelectedValueChangedEventDetail"
                         }
                     }
                 }
@@ -1079,8 +2001,17 @@ export class VdsBasicAutocomplete {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Opens the floating element (menu) of the autocomplete.\nOnly opens if the component is not readonly or disabled.",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": undefined
+                        }]
                 }
             },
             "close": {
@@ -1096,8 +2027,17 @@ export class VdsBasicAutocomplete {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Closes the floating element (menu) of the autocomplete.",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": undefined
+                        }]
                 }
             },
             "setFocus": {
@@ -1113,8 +2053,17 @@ export class VdsBasicAutocomplete {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Sets focus to the input element and opens the autocomplete.",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": undefined
+                        }]
                 }
             },
             "setValue": {
@@ -1123,7 +2072,7 @@ export class VdsBasicAutocomplete {
                     "parameters": [{
                             "name": "value",
                             "type": "string",
-                            "docs": ""
+                            "docs": "- The value to set"
                         }],
                     "references": {
                         "Promise": {
@@ -1136,6 +2085,15 @@ export class VdsBasicAutocomplete {
                 "docs": {
                     "text": "Sets the autocomplete input value to handle filtering.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
+                            "name": "param",
+                            "text": "value - The value to set"
+                        }, {
                             "name": "returns",
                             "text": undefined
                         }]
@@ -1147,7 +2105,7 @@ export class VdsBasicAutocomplete {
                     "parameters": [{
                             "name": "value",
                             "type": "string | string[]",
-                            "docs": ""
+                            "docs": "- The value or values to set"
                         }],
                     "references": {
                         "Promise": {
@@ -1158,8 +2116,17 @@ export class VdsBasicAutocomplete {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets the autocomplete selection value to handle.\nWhen multiple is true, sets the selected values from the list\nWhen dropdown is true and multiple is false, sets a single selected value.\nWhen dropdown is false and When multiple is false, set the input value",
+                    "text": "Sets the autocomplete selection value.\nWhen multiple is true, sets the selected values from the list.\nWhen dropdown is true and multiple is false, sets a single selected value.\nWhen dropdown is false and multiple is false, sets the input value.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
+                            "name": "param",
+                            "text": "value - The value or values to set"
+                        }, {
                             "name": "returns",
                             "text": undefined
                         }]
@@ -1178,10 +2145,16 @@ export class VdsBasicAutocomplete {
                     "return": "Promise<string | string[]>"
                 },
                 "docs": {
-                    "text": "Return the autocomplete value.",
+                    "text": "Returns the autocomplete value.\nReturns multipleValues array if multiple is true.\nReturns selectedDropdownValue if dropdown is true.\nReturns the input value otherwise.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves by returning the autocomplete value."
+                            "text": "A promise that resolves with the autocomplete value"
                         }]
                 }
             },
@@ -1198,10 +2171,16 @@ export class VdsBasicAutocomplete {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Clears the selected options and resets the value of the autocomplete.",
+                    "text": "Clears the selected options and resets the value of the autocomplete.\nEmits a cleared event when complete.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves when the clearing operation is complete."
+                            "text": "A promise that resolves when the clearing operation is complete"
                         }]
                 }
             }
@@ -1215,6 +2194,9 @@ export class VdsBasicAutocomplete {
             }, {
                 "propName": "disabled",
                 "methodName": "setDisabledState"
+            }, {
+                "propName": "value",
+                "methodName": "setValueState"
             }, {
                 "propName": "selectedDropdownValue",
                 "methodName": "setDropdownValueValidation"
@@ -1236,6 +2218,12 @@ export class VdsBasicAutocomplete {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "focusout",
+                "method": "handleFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "keyup",
                 "method": "handleEscPress",
@@ -1245,4 +2233,3 @@ export class VdsBasicAutocomplete {
             }];
     }
 }
-//# sourceMappingURL=vds-basic-autocomplete.js.map