@infineon/infineon-design-system-stencil 35.5.0--canary.1904.c3cb7254ae476891ebdb18f1579f66379ad24854.0 → 36.0.0--canary.1926.3b76d5defe8b9a743d9ec0dd5e6879c04e8055c0.0

package/dist/collection/components/select/multi-select/multiselect.js

@@ -1,7 +1,4 @@
 import { h } from "@stencil/core";
-import { trackComponent } from "../../../global/utils/tracking";
-import { isNestedInIfxComponent } from "../../../global/utils/dom-utils";
-// Debounce function
 function debounce(func, wait) {
     let timeout;
     return function executedFunction(...args) {
@@ -13,128 +10,159 @@ function debounce(func, wait) {
         timeout = setTimeout(later, wait);
     };
 }
-;
 export class Multiselect {
     constructor() {
-        this.batchSize = 50;
-        this.size = 'medium (40px)';
         this.disabled = false;
         this.error = false;
-        this.internalError = false;
         this.errorMessage = "Error";
         this.label = "";
-        this.persistentSelectedOptions = [];
         this.placeholder = "";
-        this.dropdownOpen = false;
-        this.currentIndex = 0; //needed for option selection using keyboard
-        this.isLoading = false;
-        this.loadedOptions = [];
-        this.filteredOptions = [];
         this.showSearch = true;
         this.showSelectAll = true;
         this.showClearButton = true;
-        this.optionCount = 0; // number of all options (leaves of the tree)
-        this.optionsProcessed = false; // flag whether options have already been counted, intial selections saved
+        this.showExpandCollapse = true;
+        this.noResultsMessage = "No results found.";
+        this.showNoResultsMessage = true;
+        this.searchPlaceholder = "Search";
+        this.selectAllLabel = "Select all";
+        this.expandLabel = "Expand";
+        this.collapseLabel = "Collapse";
+        this.ariaLabel = "Multi-select dropdown";
+        this.ariaLabelledBy = "";
+        this.ariaDescribedBy = "";
+        this.ariaSearchLabel = "Search options";
+        this.ariaClearLabel = "Clear all selections";
+        this.ariaToggleLabel = "Toggle dropdown";
+        this.ariaSelectAllLabel = "Select all options";
+        this.ariaExpandAllLabel = "Expand all categories";
+        this.ariaCollapseAllLabel = "Collapse all categories";
+        this.internalError = false;
+        this.persistentSelectedOptions = [];
+        this.dropdownOpen = false;
+        this.searchTerm = '';
         this.handleSearch = debounce((targetElement) => {
             const searchTerm = targetElement.value.toLowerCase();
-            if (searchTerm === '') {
-                this.filteredOptions = this.loadedOptions;
+            const isSearchActive = searchTerm !== '';
+            this.searchTerm = searchTerm;
+            const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');
+            if (wrapper) {
+                if (isSearchActive) {
+                    wrapper.classList.remove('active');
+                }
+                else {
+                    const searchField = this.el.shadowRoot.querySelector('ifx-search-field');
+                    const searchFieldHasFocus = searchField && searchField.matches(':focus-within');
+                    if (!searchFieldHasFocus) {
+                        wrapper.classList.add('active');
+                    }
+                }
             }
-            else {
-                this.filteredOptions = this.loadedOptions.filter(option => {
-                    const matchesSearchTerm = option.label.toLowerCase().includes(searchTerm);
-                    if (option.children) {
-                        const childrenMatch = option.children.some(child => {
-                            return child.label.toLowerCase().includes(searchTerm);
+            const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');
+            if (optionsContainer) {
+                if (isSearchActive) {
+                    optionsContainer.classList.add('has-search-filter');
+                }
+                else {
+                    optionsContainer.classList.remove('has-search-filter');
+                }
+            }
+            requestAnimationFrame(() => {
+                const allOptions = this.el.querySelectorAll('ifx-multiselect-option');
+                allOptions.forEach(option => {
+                    const searchEvent = new CustomEvent('ifx-search-filter', {
+                        detail: { searchTerm, isActive: isSearchActive }
+                    });
+                    option.dispatchEvent(searchEvent);
+                });
+                if (isSearchActive) {
+                    setTimeout(() => {
+                        const allOptions = this.el.querySelectorAll('ifx-multiselect-option');
+                        let visibleCount = 0;
+                        allOptions.forEach(option => {
+                            const style = window.getComputedStyle(option);
+                            const rect = option.getBoundingClientRect();
+                            if (style.display !== 'none' &&
+                                style.visibility !== 'hidden' &&
+                                style.opacity !== '0' &&
+                                rect.height > 0) {
+                                visibleCount++;
+                            }
                         });
-                        return matchesSearchTerm || childrenMatch;
+                        const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');
+                        if (optionsContainer) {
+                            if (visibleCount === 0) {
+                                optionsContainer.classList.add('show-no-results');
+                            }
+                            else {
+                                optionsContainer.classList.remove('show-no-results');
+                            }
+                        }
+                    }, 200);
+                }
+                else {
+                    const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');
+                    if (optionsContainer) {
+                        optionsContainer.classList.remove('show-no-results');
                     }
-                    return matchesSearchTerm;
-                });
-            }
-        }, 300);
+                }
+            });
+        }, 150);
         this.handleDocumentClick = (event) => {
             const path = event.composedPath();
             if (!path.includes(this.dropdownElement)) {
                 this.dropdownOpen = false;
                 document.removeEventListener('click', this.handleDocumentClick);
-                this.filteredOptions = this.loadedOptions;
-                // Dispatch the ifxMultiselectIsOpen event
+                this.resetSearch();
                 this.ifxOpen.emit(this.dropdownOpen);
             }
         };
     }
-    updateOptions() {
-        this.loadedOptions = [];
-        this.filteredOptions = [];
-        this.optionCount = 0;
-        this.optionsProcessed = false;
-        this.persistentSelectedOptions = [];
-        this.loadInitialOptions();
+    parseChildOptions() {
+        const options = [];
+        const childElements = Array.from(this.el.children);
+        childElements.forEach((child, index) => {
+            if (child.tagName === 'IFX-MULTISELECT-OPTION') {
+                const option = this.parseOptionElement(child, index);
+                if (option) {
+                    options.push(option);
+                }
+            }
+        });
+        return options;
+    }
+    parseOptionElement(element, index) {
+        const value = element.getAttribute('value') || `option-${index}`;
+        const selected = element.hasAttribute('selected');
+        const disabled = element.hasAttribute('disabled');
+        const indeterminate = element.hasAttribute('indeterminate');
+        const option = {
+            value,
+            selected,
+            disabled,
+            indeterminate
+        };
+        const nestedOptions = Array.from(element.children)
+            .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION')
+            .map((child, childIndex) => this.parseOptionElement(child, childIndex))
+            .filter(opt => opt !== null);
+        if (nestedOptions.length > 0) {
+            option.children = nestedOptions;
+        }
+        return option;
     }
-    async loadInitialOptions() {
-        this.isLoading = true;
+    loadInitialOptions() {
         this.internalError = this.error;
         this.internalErrorMessage = this.errorMessage;
-        // Load the first batch of options (e.g., first 20)
-        this.loadedOptions = await this.fetchOptions(0, this.batchSize);
-        this.isLoading = false;
-    }
-    async fetchMoreOptions() {
-        this.isLoading = true;
-        const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);
-        this.loadedOptions = [...this.loadedOptions, ...moreOptions];
-        this.isLoading = false;
-    }
-    handleScroll(event) {
-        const element = event.target;
-        const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list
-        if (element.scrollTop >= halfwayPoint) {
-            this.fetchMoreOptions();
-        }
+        const allOptions = this.parseChildOptions();
+        const initiallySelected = this.collectSelectedOptions(allOptions);
+        const initiallySelectedNotInState = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value));
+        this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelectedNotInState];
     }
-    async fetchOptions(startIndex, count) {
-        let allOptions = [];
-        // Parse options if it's a string, or use directly if it's an array
-        if (typeof this.options === 'string') {
-            try {
-                allOptions = JSON.parse(this.options);
-            }
-            catch (err) {
-                console.error('Failed to parse options:', err);
-            }
-        }
-        else if (Array.isArray(this.options)) {
-            allOptions = this.options;
-        }
-        else {
-            console.error('Unexpected value for options:', this.options);
-        }
-        if (!this.optionsProcessed) {
-            this.optionCount = this.countOptions(allOptions);
-            const initiallySelected = this.collectSelectedOptions(allOptions);
-            const initallySelectedNotInState = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value));
-            this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initallySelectedNotInState];
-            this.optionsProcessed = true;
-        }
-        // Slice the options array based on startIndex and count
-        const slicedOptions = allOptions.slice(startIndex, startIndex + count);
-        return slicedOptions;
-    }
-    /**
-     * Collects and returns all options that are selected.
-     * When the parent is selected, then the value of the children will be overriden with selected as well.
-     * It will only collect the leaves of the tree.
-     *
-     * @param options A list of options.
-     * @returns A list with all selected options
-     */
     collectSelectedOptions(options) {
         let selectedOptions = [];
         for (const option of options) {
             if (option.selected) {
                 if (option.children && option.children.length > 0) {
-                    // if parent is selected, then select all child options
                     selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));
                 }
                 else {
@@ -151,11 +179,6 @@ export class Multiselect {
         }
         return selectedOptions;
     }
-    /**
-     * Collects all leaf children options.
-     *
-     * @param option A list with all leaf-children.
-     */
     collectLeafOptions(children) {
         let leafOptions = [];
         for (const child of children) {
@@ -168,33 +191,100 @@ export class Multiselect {
         }
         return leafOptions;
     }
-    /**
-     * Count the number of options. Only counts the leaves of the options tree.
-     */
-    countOptions(options) {
-        let count = 0;
-        for (const option of options) {
-            if (option.children && option.children.length >= 0) {
-                count += this.countOptions(option.children);
+    handleSearchFocus(hasFocus) {
+        const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');
+        if (wrapper) {
+            if (hasFocus || this.searchTerm !== '') {
+                wrapper.classList.remove('active');
             }
             else {
-                count++;
+                wrapper.classList.add('active');
+            }
+        }
+    }
+    positionDropdown() {
+        var _a;
+        const wrapperRect = (_a = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - wrapperRect.bottom;
+        const spaceAbove = wrapperRect.top;
+        if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {
+            this.dropdownFlipped = true;
+        }
+        else {
+            this.dropdownFlipped = false;
+        }
+    }
+    updateSlotBasedSelections(emitEvent = false) {
+        const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');
+        const selectedLeafOptions = [];
+        allOptionElements.forEach((optionEl) => {
+            const instance = optionEl['__stencil_instance'];
+            if (instance && instance.selected && !instance.hasChildren) {
+                selectedLeafOptions.push({
+                    value: instance.value,
+                    selected: true,
+                    disabled: instance.disabled
+                });
+            }
+        });
+        this.persistentSelectedOptions = selectedLeafOptions;
+        if (emitEvent) {
+            this.ifxSelect.emit(this.persistentSelectedOptions);
+        }
+    }
+    updateInitialParentStates() {
+        const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');
+        const optionsByDepth = Array.from(allOptionElements)
+            .map(el => ({
+            element: el,
+            instance: el['__stencil_instance'],
+            depth: parseInt(el.getAttribute('data-level') || '0')
+        }))
+            .filter(item => item.instance)
+            .sort((a, b) => b.depth - a.depth);
+        optionsByDepth.forEach(({ instance }) => {
+            if (instance.hasChildren) {
+                this.updateParentState(instance);
             }
+        });
+    }
+    updateParentState(parentInstance) {
+        const directChildren = Array.from(parentInstance.el.children)
+            .filter((child) => child.tagName === 'IFX-MULTISELECT-OPTION')
+            .map(child => child['__stencil_instance'])
+            .filter(instance => instance !== null);
+        const selectedCount = directChildren.filter(child => child.selected).length;
+        const indeterminateCount = directChildren.filter(child => child.indeterminate).length;
+        const totalCount = directChildren.length;
+        if (selectedCount === totalCount && indeterminateCount === 0) {
+            parentInstance.selected = true;
+            parentInstance.indeterminate = false;
+        }
+        else if (selectedCount === 0 && indeterminateCount === 0) {
+            parentInstance.selected = false;
+            parentInstance.indeterminate = false;
+        }
+        else {
+            parentInstance.selected = false;
+            parentInstance.indeterminate = true;
         }
-        return count;
     }
     componentDidLoad() {
         setTimeout(() => {
             this.positionDropdown();
         }, 500);
-        // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)
+        this.el.addEventListener('ifx-option-changed', () => {
+            requestAnimationFrame(() => {
+                this.updateSlotBasedSelections(true);
+            });
+        });
+        setTimeout(() => {
+            this.updateSlotBasedSelections(false);
+            this.updateInitialParentStates();
+        }, 100);
     }
     componentWillLoad() {
-        if (!isNestedInIfxComponent(this.el)) {
-            trackComponent('ifx-multiselect');
-        }
         this.loadInitialOptions();
-        this.filteredOptions = [...this.loadedOptions];
     }
     updateInternalError() {
         this.internalError = this.error;
@@ -202,109 +292,66 @@ export class Multiselect {
     updateInternalErrorMessage() {
         this.internalErrorMessage = this.errorMessage;
     }
-    loadedOptionsChanged() {
-        this.filteredOptions = [...this.loadedOptions];
-    }
     onSelectionChange(newValue, _) {
         const formData = new FormData();
         newValue.forEach(option => formData.append(this.name, option.value));
         this.internals.setFormValue(formData);
     }
-    handleOptionClick(option) {
-        this.internalError = false;
-        if (!option.selected && this.isSelectionLimitReached(option)) {
-            option.checkboxRef.toggleCheckedState(false);
-            this.internalError = true;
-            this.internalErrorMessage = "Please consider the maximum number of items to choose from";
-            return;
-        }
-        this.updateSelection(option);
-        this.ifxSelect.emit(this.persistentSelectedOptions);
-    }
-    isSelectionLimitReached(option) {
-        let newOptionsLength = option.children ? option.children.length : 1;
-        return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&
-            !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
-    }
-    updateSelection(option) {
-        const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
-        if (option.children && option.children.length > 0) {
-            this.handleParentOptionClick(option);
-        }
-        else {
-            this.handleChildOptionClick(option, wasSelected);
-        }
-    }
-    async selectAll() {
-        const allOptions = await this.fetchOptions(0, this.optionCount);
-        this.selectAllRecursive(allOptions);
-        this.ifxSelect.emit(this.persistentSelectedOptions);
-    }
-    selectAllRecursive(options) {
-        for (const opt of options) {
-            if (opt.children && opt.children.length > 0) {
-                this.selectAllRecursive(opt.children);
+    collapseAll() {
+        const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');
+        allOptionElements.forEach((optionEl) => {
+            const instance = optionEl['__stencil_instance'];
+            if (instance && instance.hasChildren) {
+                instance.isExpanded = false;
             }
-            else {
-                if (!this.persistentSelectedOptions.some((some) => some.value === opt.value)) {
-                    opt.selected = true;
-                    this.persistentSelectedOptions = [...this.persistentSelectedOptions, opt];
-                    this.optionCount = this.countOptions(this.persistentSelectedOptions);
-                }
-            }
-        }
-    }
-    handleParentOptionClick(option) {
-        const allChildrenSelected = option.children.every(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));
-        if (allChildrenSelected) {
-            this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => !option.children.some(child => child.value === selectedOption.value))];
-            option.selected = false;
-            option.children.forEach(child => {
-                child.selected = false;
-            });
-        }
-        else {
-            const newChildren = [...option.children.filter(childOption => !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value))];
-            option.selected = true;
-            option.children.forEach(child => {
-                child.selected = true;
-            });
-            this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];
-        }
+        });
     }
-    handleChildOptionClick(option, wasSelected) {
-        if (wasSelected) {
-            this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];
-            option.selected = false;
-        }
-        else {
-            this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];
-            option.selected = true;
-        }
-        this.updateParentSelectedState();
+    expandAll() {
+        const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');
+        allOptionElements.forEach((optionEl) => {
+            const instance = optionEl['__stencil_instance'];
+            if (instance && instance.hasChildren) {
+                instance.isExpanded = true;
+            }
+        });
     }
-    updateParentSelectedState() {
-        this.loadedOptions.forEach(option => {
-            var _a;
-            if (((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                if (option.children.every(child => child.selected === true))
-                    option.selected = true;
+    selectAll() {
+        this.resetSearch();
+        const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');
+        allOptionElements.forEach((optionEl) => {
+            const instance = optionEl['__stencil_instance'];
+            if (instance) {
+                if (instance.hasChildren) {
+                    instance.isExpanded = true;
+                }
                 else {
-                    option.selected = false;
-                    if (this.isOptionIndeterminate(option)) {
-                        option.indeterminate = true;
-                    }
-                    else {
-                        option.indeterminate = false;
-                    }
+                    instance.selected = true;
                 }
             }
         });
+        setTimeout(() => {
+            this.updateInitialParentStates();
+            this.updateSlotBasedSelections(false);
+            this.ifxSelect.emit(this.persistentSelectedOptions);
+        }, 0);
     }
-    getSizeClass() {
-        return `${this.size}` === "s"
-            ? "small-select"
-            : "medium-select";
+    async clearSelection() {
+        const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');
+        allOptionElements.forEach((optionEl) => {
+            const instance = optionEl['__stencil_instance'];
+            if (instance) {
+                instance.selected = false;
+                instance.indeterminate = false;
+                if (instance.hasChildren) {
+                    instance.isExpanded = false;
+                }
+            }
+        });
+        this.persistentSelectedOptions = [];
+        setTimeout(() => {
+            this.updateSlotBasedSelections(false);
+            this.ifxSelect.emit(this.persistentSelectedOptions);
+        }, 0);
     }
     toggleDropdown() {
         this.dropdownOpen = !this.dropdownOpen;
@@ -312,207 +359,154 @@ export class Multiselect {
             if (this.dropdownOpen) {
                 document.addEventListener('click', this.handleDocumentClick);
             }
-            // Dispatch the ifxOpen event
+            else {
+                this.resetSearch();
+            }
             this.ifxOpen.emit(this.dropdownOpen);
         }, 0);
     }
-    waitForElement(querySelectorFunc, callback, maxTries = 50) {
-        let tries = 0;
-        function request() {
-            requestAnimationFrame(() => {
-                const elements = querySelectorFunc();
-                if (elements.length > 0 || tries > maxTries) {
-                    callback(elements);
-                }
-                else {
-                    tries++;
-                    request();
-                }
+    resetSearch() {
+        this.searchTerm = '';
+        const searchField = this.el.shadowRoot.querySelector('ifx-search-field');
+        if (searchField) {
+            searchField.value = '';
+        }
+        const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');
+        if (optionsContainer) {
+            optionsContainer.classList.remove('has-search-filter');
+        }
+        const allOptions = this.el.querySelectorAll('ifx-multiselect-option');
+        allOptions.forEach(option => {
+            const searchEvent = new CustomEvent('ifx-search-filter', {
+                detail: { searchTerm: '', isActive: false }
             });
+            option.dispatchEvent(searchEvent);
+        });
+    }
+    handleWrapperClick(event) {
+        this.positionDropdown();
+        if (event.currentTarget === event.target) {
+            this.toggleDropdown();
         }
-        request();
     }
     handleKeyDown(event) {
         if (this.disabled)
-            return; // If it's disabled, don't do anything.
-        const options = this.dropdownElement.querySelectorAll('.option');
+            return;
+        // If dropdown is closed, only allow opening
+        if (!this.dropdownOpen) {
+            switch (event.code) {
+                case 'Enter':
+                case 'Space':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.toggleDropdown();
+                    break;
+            }
+            return;
+        }
+        // Dropdown is open - handle navigation and controls
         switch (event.code) {
-            case 'Enter':
+            case 'Escape':
+                event.preventDefault();
                 this.toggleDropdown();
-                // Wait a bit for the dropdown to finish rendering
-                this.waitForElement(() => {
-                    return this.dropdownElement.querySelectorAll('.option');
-                }, (options) => {
-                    this.updateHighlightedOption(options);
-                });
                 break;
+            case 'Enter':
             case 'Space':
-                this.toggleDropdown();
-                // Wait a bit for the dropdown to finish rendering
-                this.waitForElement(() => {
-                    return this.dropdownElement.querySelectorAll('.option');
-                }, (options) => {
-                    this.updateHighlightedOption(options);
-                });
-                break;
-            case 'ArrowDown':
-                this.handleArrowDown(options);
-                if (this.dropdownOpen) {
-                    this.updateHighlightedOption(options);
+                // Don't close dropdown when pressing space/enter in controls area
+                const target = event.target;
+                if (!target.closest('.ifx-multiselect-dropdown-functions')) {
+                    event.preventDefault();
+                    this.toggleDropdown();
                 }
                 break;
+            case 'ArrowDown':
             case 'ArrowUp':
-                this.handleArrowUp(options);
-                if (this.dropdownOpen) {
-                    this.updateHighlightedOption(options);
-                }
+                // Focus first/last option for navigation
+                event.preventDefault();
+                this.focusFirstOption();
                 break;
         }
     }
-    handleWrapperClick(event) {
-        // This is your existing logic for positioning the dropdown
-        this.positionDropdown();
-        // Check if the event target is the wrapper itself and not a child element.
-        if (event.currentTarget === event.target) {
-            this.toggleDropdown();
-        }
-    }
-    clearSelection() {
-        this.persistentSelectedOptions = [];
-        this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing
-    }
-    positionDropdown() {
-        var _a;
-        const wrapperRect = (_a = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const spaceBelow = window.innerHeight - wrapperRect.bottom;
-        const spaceAbove = wrapperRect.top;
-        // If there's more space above than below the trigger and the dropdown doesn't fit below
-        if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {
-            this.dropdownFlipped = true;
-        }
-        else {
-            this.dropdownFlipped = false;
-        }
-    }
-    // Helper function to update highlighted option based on currentIndex
-    updateHighlightedOption(options) {
-        // Clear all highlights
-        options.forEach((option) => option.classList.remove('is-highlighted'));
-        // Apply highlight to the current option
-        if (this.currentIndex >= 0 && this.currentIndex < options.length) {
-            options[this.currentIndex].classList.add('is-highlighted');
-            options[this.currentIndex].focus();
-        }
-    }
-    // Helper function to handle arrow down navigation
-    handleArrowDown(options) {
-        if (this.currentIndex < options.length - 1) {
-            this.currentIndex++;
-        }
-        else {
-            this.currentIndex = 0; // Wrap to the beginning.
-        }
-    }
-    // Helper function to handle arrow up navigation
-    handleArrowUp(options) {
-        if (this.currentIndex > 0) {
-            this.currentIndex--;
-        }
-        else {
-            this.currentIndex = options.length - 1; // Wrap to the end.
-        }
-    }
-    handleOptionKeyDown(e, option) {
-        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
-            e.stopPropagation();
-        if (e.key === 'Enter' || e.key === ' ') {
-            this.handleOptionClick(option);
-        }
-    }
-    renderOption(option, index) {
+    focusFirstOption() {
         var _a;
-        const isIndeterminate = this.isOptionIndeterminate(option);
-        const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
-        const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;
-        const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index
-        return (h("div", { class: "option-wrapper" }, h("div", { class: `option ${isSelected ? 'selected' : ''} ${disableCheckbox ? 'disabled' : ''} 
-        ${this.getSizeClass()}`, "data-value": option.value, onKeyDown: (e) => !disableCheckbox && this.handleOptionKeyDown(e, option), onClick: () => !disableCheckbox && this.handleOptionClick(option), tabindex: "0", role: `${((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "treeitem" : "option"}` }, h("ifx-checkbox", { tabIndex: -1, ref: (el) => option.checkboxRef = el, id: uniqueId, size: "s", checked: isIndeterminate ? false : isSelected, indeterminate: isIndeterminate, disabled: disableCheckbox }), h("label", { htmlFor: uniqueId, onClick: (e) => e.stopPropagation() }, option.label)), option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))));
-    }
-    isOptionSelected(option) {
-        if (!option.children)
-            return false;
-        return option.children.every(child => this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value));
-    }
-    isOptionIndeterminate(option) {
-        if (!option.children)
-            return false;
-        const selectedChildren = option.children.filter(child => this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)).length;
-        return selectedChildren > 0 && selectedChildren < option.children.length;
-    }
-    findInOptions(options, searchTerm) {
-        for (const option of options) {
-            if (option.value === searchTerm) {
-                return option;
-            }
-            if (option.children) {
-                const foundInChildren = this.findInOptions(option.children, searchTerm);
-                if (foundInChildren) {
-                    return foundInChildren;
-                }
-            }
+        const firstOption = this.el.querySelector('ifx-multiselect-option:not(.search-hidden)');
+        if (firstOption) {
+            const labelElement = (_a = firstOption.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.option-label');
+            labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
         }
-        return null;
-    }
-    renderSubOption(option, index) {
-        var _a;
-        const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
-        const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;
-        const uniqueId = `checkbox-${option.value}-${index}`;
-        return (h("div", { class: `option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()} ${disableCheckbox ? 'disabled' : ''}`, "data-value": option.value, role: `${((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "option" : "treeitem"}`, onKeyDown: (e) => !disableCheckbox && this.handleOptionKeyDown(e, option), onClick: () => !disableCheckbox && this.handleOptionClick(option), tabindex: "0" }, h("ifx-checkbox", { tabIndex: -1, ref: (el) => option.checkboxRef = el, id: uniqueId, size: "s", checked: isSelected, disabled: disableCheckbox }), h("label", { htmlFor: uniqueId, onClick: (e) => e.stopPropagation() }, option.label)));
     }
     renderSelectAll() {
-        const allSelected = this.persistentSelectedOptions.length === this.optionCount;
-        const noneSelected = this.persistentSelectedOptions.length === 0;
-        const indeterminate = this.optionCount > 0 && !noneSelected && !allSelected;
-        const that = this;
-        function toggleSelectAll() {
+        const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');
+        const leafOptions = Array.from(allOptionElements).filter((el) => !el.hasChildren);
+        const selectedLeafOptions = Array.from(allOptionElements).filter((el) => !el.hasChildren && el.selected);
+        const allSelected = leafOptions.length > 0 && selectedLeafOptions.length === leafOptions.length;
+        const toggleSelectAll = (event) => {
+            if (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
             if (allSelected) {
-                that.clearSelection();
+                this.clearSelection();
             }
             else {
-                that.selectAll();
+                this.selectAll();
             }
-        }
-        function handleSelectAllKeydown(e) {
-            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
-                e.stopPropagation();
-            if (e.key === 'Enter' || e.key === ' ') {
-                toggleSelectAll();
-            }
-        }
-        return h("div", { class: "select-all-wrapper" }, h("div", { class: `option ${this.getSizeClass()}`, tabindex: '0', onKeyDown: (e) => handleSelectAllKeydown(e), onClick: toggleSelectAll }, h("ifx-checkbox", { tabIndex: -1, id: 'selectAll', checked: allSelected, indeterminate: indeterminate, size: "s" }), h("label", { htmlFor: 'selectAll' }, "Select all")), h("ifx-dropdown-separator", null));
+        };
+        return (h("div", { class: "select-all-wrapper" }, h("ifx-checkbox", { id: 'selectAll', checked: allSelected, size: "s", "aria-label": this.ariaSelectAllLabel, onClick: toggleSelectAll, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    toggleSelectAll(e);
+                }
+            } }, this.selectAllLabel)));
+    }
+    renderNoResultsMessage() {
+        return (h("div", { class: "ifx-multiselect-no-results" }, h("div", { class: "no-results-content" }, h("span", { class: "no-results-text" }, this.noResultsMessage))));
     }
     render() {
-        // Create a label for the selected options
         const selectedOptionsLabels = this.persistentSelectedOptions
-            .filter(option => {
-            // check if option is a child and its parent is selected
-            const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption => parentOption.children &&
-                parentOption.children.some(child => child.value === option.value) &&
-                parentOption.selected);
-            return !isChildSelectedWithParent;
+            .map((option) => {
+            var _a;
+            const optionElement = this.el.querySelector(`ifx-multiselect-option[value="${option.value}"]`);
+            return ((_a = optionElement === null || optionElement === void 0 ? void 0 : optionElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || option.value;
         })
-            .map(option => option.label)
             .join(', ');
+        const hasSelections = this.persistentSelectedOptions.length > 0;
+        let isFlatMultiselect = false;
+        const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');
+        if (allOptionElements.length > 0) {
+            isFlatMultiselect = Array.from(allOptionElements).every(option => option.children.length === 0);
+        }
         return (h("div", { class: `ifx-multiselect-container`, ref: el => this.dropdownElement = el }, this.label ?
-            h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label)) : null, h("div", { class: `ifx-multiselect-wrapper 
-        ${this.getSizeClass()} 
-        ${this.dropdownOpen ? 'active' : ''} 
+            h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label)) : null, h("div", { class: `ifx-multiselect-wrapper
+        ${this.dropdownOpen ? 'active' : ''}
         ${this.dropdownFlipped ? 'is-flipped' : ''}
         ${this.internalError ? 'error' : ""}
-        ${this.disabled ? 'disabled' : ""}`, tabindex: "0", onClick: this.disabled ? undefined : (event) => this.handleWrapperClick(event), onKeyDown: this.disabled ? undefined : (event) => this.handleKeyDown(event) }, h("div", { class: `ifx-multiselect-input 
-          ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : ""}
-          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (h("div", { class: "ifx-multiselect-dropdown-menu", onScroll: (event) => this.handleScroll(event) }, this.showSearch && h("input", { type: "text", role: "textbox", class: "search-input", onKeyDown: (e) => { e.stopPropagation(); }, onInput: (event) => this.handleSearch(event.target), placeholder: "Search..." }), this.showSelectAll && this.renderSelectAll(), this.filteredOptions.map((option, index) => this.renderOption(option, index)), this.isLoading && h("div", null, "Loading more options..."))), h("div", { class: 'ifx-multiselect-icon-container' }, this.persistentSelectedOptions.length > 0 && (h("div", { class: `ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`, onClick: this.disabled ? undefined : () => this.clearSelection() }, h("ifx-icon", { icon: "cRemove16" }))), h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-up', icon: 'chevron-up-16' })), h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
+        ${this.disabled ? 'disabled' : ""}`, role: "combobox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy || undefined, "aria-describedby": this.ariaDescribedBy || undefined, "aria-expanded": this.dropdownOpen, "aria-haspopup": "listbox", "aria-disabled": this.disabled, tabindex: "0", onClick: this.disabled ? undefined : (event) => this.handleWrapperClick(event), onKeyDown: this.disabled ? undefined : (event) => this.handleKeyDown(event) }, h("div", { class: `ifx-multiselect-input
+          ${hasSelections ? '' : 'placeholder'}
+          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, hasSelections ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (h("div", { class: "ifx-multiselect-dropdown-menu" }, (this.showSearch || this.showSelectAll || (this.showExpandCollapse && !isFlatMultiselect)) && (h("div", { class: "ifx-multiselect-dropdown-functions", onClick: (e) => e.stopPropagation() }, this.showSearch && (h("div", { class: "ifx-multiselect-dropdown-search" }, h("ifx-search-field", { class: "search-input", placeholder: this.searchPlaceholder, size: "s", "show-delete-icon": "true", "aria-label": this.ariaSearchLabel, onKeyDown: (e) => { e.stopPropagation(); }, onIfxInput: (event) => this.handleSearch(event.target), onFocus: () => this.handleSearchFocus(true), onBlur: () => this.handleSearchFocus(false) }))), h("div", { class: "ifx-multiselect-dropdown-controls" }, this.showSelectAll && this.renderSelectAll(), this.showExpandCollapse && !isFlatMultiselect && (h("div", { class: "expand-collapse-controls" }, h("span", { class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaExpandAllLabel, onClick: (e) => { e.stopPropagation(); this.expandAll(); }, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.expandAll();
+                }
+            } }, this.expandLabel), h("span", { class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaCollapseAllLabel, onClick: (e) => { e.stopPropagation(); this.collapseAll(); }, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.collapseAll();
+                }
+            } }, this.collapseLabel)))))), h("div", { class: "ifx-multiselect-options", role: "listbox", "aria-multiselectable": "true" }, h("slot", null), this.searchTerm && this.showNoResultsMessage && this.renderNoResultsMessage()))), h("div", { class: 'ifx-multiselect-icon-container' }, hasSelections && (h("div", { class: `ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`, "aria-label": this.ariaClearLabel, role: "button", tabIndex: 0, onClick: this.disabled ? undefined : (e) => { e.stopPropagation(); this.clearSelection(); }, onKeyDown: this.disabled ? undefined : (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.stopPropagation();
+                    this.clearSelection();
+                }
+            } }, h("ifx-icon", { icon: "c-remove-16", key: "clear-icon" }))), h("div", { class: `icon-wrapper ${this.dropdownOpen ? 'icon-wrapper--open' : 'icon-wrapper--closed'}`, "aria-label": this.ariaToggleLabel, role: "button", tabIndex: 0, onClick: this.disabled ? undefined : (e) => { e.stopPropagation(); this.toggleDropdown(); }, onKeyDown: this.disabled ? undefined : (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.stopPropagation();
+                    this.toggleDropdown();
+                }
+            } }, h("ifx-icon", { icon: 'chevron-down-16', key: "chevron-icon" })))), this.internalError ?
             h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.internalErrorMessage)) : null));
     }
     static get is() { return "ifx-multiselect"; }
@@ -549,12 +543,52 @@ export class Multiselect {
                 "attribute": "name",
                 "reflect": false
             },
-            "options": {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any[] | string",
-                    "resolved": "any[] | string",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -565,15 +599,16 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "options",
-                "reflect": false
+                "attribute": "error-message",
+                "reflect": false,
+                "defaultValue": "\"Error\""
             },
-            "batchSize": {
-                "type": "number",
+            "label": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -584,11 +619,11 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "batch-size",
+                "attribute": "label",
                 "reflect": false,
-                "defaultValue": "50"
+                "defaultValue": "\"\""
             },
-            "size": {
+            "placeholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -604,11 +639,11 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
+                "attribute": "placeholder",
                 "reflect": false,
-                "defaultValue": "'medium (40px)'"
+                "defaultValue": "\"\""
             },
-            "disabled": {
+            "showSearch": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -624,11 +659,11 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
+                "attribute": "show-search",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
-            "error": {
+            "showSelectAll": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -644,11 +679,51 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
+                "attribute": "show-select-all",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
-            "errorMessage": {
+            "showClearButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-clear-button",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showExpandCollapse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-expand-collapse",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "noResultsMessage": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -664,11 +739,31 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-message",
+                "attribute": "no-results-message",
                 "reflect": false,
-                "defaultValue": "\"Error\""
+                "defaultValue": "\"No results found.\""
             },
-            "label": {
+            "showNoResultsMessage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-no-results-message",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "searchPlaceholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -684,11 +779,111 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
+                "attribute": "search-placeholder",
+                "reflect": false,
+                "defaultValue": "\"Search\""
+            },
+            "selectAllLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "select-all-label",
+                "reflect": false,
+                "defaultValue": "\"Select all\""
+            },
+            "expandLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expand-label",
+                "reflect": false,
+                "defaultValue": "\"Expand\""
+            },
+            "collapseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "collapse-label",
+                "reflect": false,
+                "defaultValue": "\"Collapse\""
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false,
+                "defaultValue": "\"Multi-select dropdown\""
+            },
+            "ariaLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-labelled-by",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
-            "placeholder": {
+            "ariaDescribedBy": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -704,16 +899,16 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
+                "attribute": "aria-described-by",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
-            "maxItemCount": {
-                "type": "number",
+            "ariaSearchLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -724,15 +919,16 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-item-count",
-                "reflect": false
+                "attribute": "aria-search-label",
+                "reflect": false,
+                "defaultValue": "\"Search options\""
             },
-            "showSearch": {
-                "type": "boolean",
+            "ariaClearLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -743,16 +939,16 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-search",
+                "attribute": "aria-clear-label",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "\"Clear all selections\""
             },
-            "showSelectAll": {
-                "type": "boolean",
+            "ariaToggleLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -763,16 +959,16 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-select-all",
+                "attribute": "aria-toggle-label",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "\"Toggle dropdown\""
             },
-            "showClearButton": {
-                "type": "boolean",
+            "ariaSelectAllLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -783,9 +979,49 @@ export class Multiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-clear-button",
+                "attribute": "aria-select-all-label",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "\"Select all options\""
+            },
+            "ariaExpandAllLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-expand-all-label",
+                "reflect": false,
+                "defaultValue": "\"Expand all categories\""
+            },
+            "ariaCollapseAllLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-collapse-all-label",
+                "reflect": false,
+                "defaultValue": "\"Collapse all categories\""
             }
         };
     }
@@ -796,11 +1032,7 @@ export class Multiselect {
             "persistentSelectedOptions": {},
             "dropdownOpen": {},
             "dropdownFlipped": {},
-            "isLoading": {},
-            "loadedOptions": {},
-            "filteredOptions": {},
-            "optionCount": {},
-            "optionsProcessed": {}
+            "searchTerm": {}
         };
     }
     static get events() {
@@ -836,20 +1068,35 @@ export class Multiselect {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "options",
-                "methodName": "updateOptions"
-            }, {
                 "propName": "error",
                 "methodName": "updateInternalError"
             }, {
                 "propName": "errorMessage",
                 "methodName": "updateInternalErrorMessage"
-            }, {
-                "propName": "loadedOptions",
-                "methodName": "loadedOptionsChanged"
             }, {
                 "propName": "persistentSelectedOptions",
                 "methodName": "onSelectionChange"
@@ -857,5 +1104,4 @@ export class Multiselect {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-Multiselect.globalZIndex = 1000; // This will be shared among all instances of the component.
 //# sourceMappingURL=multiselect.js.map