@six-group/ui-library 4.0.4 → 4.1.1

package/dist/collection/components/six-select/six-select.js

@@ -3,7 +3,7 @@ import { getTextContent, hasSlot } from "../../utils/slot";
 import FormControl from "../../functional-components/form-control/form-control";
 import { EventListeners } from "../../utils/event-listeners";
 import { debounce, DEFAULT_DEBOUNCE_FAST } from "../../utils/execution-control";
-import { isValueEmpty } from "./util";
+import { getLanguage } from "../../utils/error-messages";
 let id = 0;
 /**
  * @since 1.0
@@ -27,962 +27,1137 @@ let id = 0;
  * @part tags - The container in which multiselect options are rendered.
  */
 export class SixSelect {
-  constructor() {
-    this.inputId = `select-${++id}`;
-    this.labelId = `select-label-${id}`;
-    this.helpTextId = `select-help-text-${id}`;
-    this.errorTextId = `select-error-text-${id}`;
-    this.touched = false;
-    this.eventListeners = new EventListeners();
-    this.handleBlur = () => {
-      this.hasFocus = false;
-      this.sixBlur.emit();
-    };
-    this.handleFocus = () => {
-      this.hasFocus = true;
-      this.sixFocus.emit();
-    };
-    this.handleClearClick = (event) => {
-      event.stopPropagation();
-      this.clearValues();
-      this.sixChange.emit({ value: this.value, isSelected: true });
-    };
-    this.handleSelectAll = (event) => {
-      const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');
-      const keyName = event.key;
-      const keyCode = event.code;
-      if (keyName === 'Control') {
-        return;
-      }
-      if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {
-        event.preventDefault();
-        const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);
-        nonFilteredItems
-          .filter((option) => !option.disabled)
-          .forEach((option) => (option.checked = hasDeselectedOptions));
-        const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);
+    constructor() {
+        this.inputId = `select-${++id}`;
+        this.labelId = `select-label-${id}`;
+        this.helpTextId = `select-help-text-${id}`;
+        this.errorTextId = `select-error-text-${id}`;
+        this.eventListeners = new EventListeners();
+        this.activeItemIndex = -1;
+        this.resizeObserver = new ResizeObserver(() => this.updateDisplayedValues());
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit();
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleClearClick = async (event) => {
+            var _a;
+            event.stopPropagation();
+            await this.clearValues();
+            await ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide());
+            this.sixChange.emit({ value: this.value, isSelected: true });
+        };
+        this.handleKeyDown = (event) => {
+            var _a, _b, _c, _d;
+            if (this.virtualScroll || this.autocomplete) {
+                return;
+            }
+            if (['Control', 'Escape'].includes(event.key)) {
+                return;
+            }
+            const items = this.getVisibleItems();
+            // Ctrl-A selects all items
+            if (this.isOpen && this.multiple && event.code === 'KeyA' && event.ctrlKey) {
+                event.preventDefault();
+                this.selectAll();
+                return;
+            }
+            // Tabbing out of the control closes it
+            if (event.key === 'Tab') {
+                if (this.isOpen) {
+                    (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide();
+                }
+                return;
+            }
+            if (event.key === ' ' && !this.multiple) {
+                return;
+            }
+            // Enter and Space selects the active item
+            if (this.activeItemIndex >= 0 && ['Enter', ' '].includes(event.key)) {
+                const activeItem = items.at(this.activeItemIndex);
+                event.preventDefault();
+                activeItem === null || activeItem === void 0 ? void 0 : activeItem.click();
+                return;
+            }
+            // Move the selection when pressing up or down
+            if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+                // Show the menu if it's not already open
+                if (!this.isOpen) {
+                    (_b = this.dropdown) === null || _b === void 0 ? void 0 : _b.show();
+                }
+                if (items.length > 0) {
+                    event.preventDefault();
+                    if (event.key === 'ArrowDown') {
+                        this.activeItemIndex++;
+                    }
+                    else if (event.key === 'ArrowUp') {
+                        this.activeItemIndex--;
+                    }
+                    else if (event.key === 'Home') {
+                        this.activeItemIndex = 0;
+                    }
+                    else if (event.key === 'End') {
+                        this.activeItemIndex = items.length - 1;
+                    }
+                    if (this.activeItemIndex < 0)
+                        this.activeItemIndex = 0;
+                    if (this.activeItemIndex > items.length - 1)
+                        this.activeItemIndex = items.length - 1;
+                    (_c = items.at(this.activeItemIndex)) === null || _c === void 0 ? void 0 : _c.setFocus();
+                }
+            }
+            // All other keys open the menu
+            if (!this.isOpen) {
+                event.stopPropagation();
+                event.preventDefault();
+                (_d = this.dropdown) === null || _d === void 0 ? void 0 : _d.show();
+            }
+        };
+        this.handleLabelClick = () => {
+            var _a;
+            (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.handleMenuSelect = (event) => {
+            const currentItem = event.detail.item;
+            if (this.multiple) {
+                currentItem.checked = !currentItem.checked;
+            }
+            else {
+                this.getItems().forEach((i) => (i.checked = false));
+                currentItem.checked = true;
+            }
+            this.syncValueFromItems();
+            this.sixChange.emit({ value: this.value, isSelected: true });
+        };
+        this.handleMenuShow = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            this.activeItemIndex = -1;
+            // reset display style of main items
+            const mainItems = this.getItems();
+            mainItems.forEach((item) => (item.style.display = 'unset'));
+            // show selected menu items in the selection container and hide them in the main container
+            const checkedItems = getCheckedItems(this.getValueAsArray(), mainItems);
+            if (!this.virtualScroll && this.multiple) {
+                checkedItems.forEach((i) => (i.style.display = 'none'));
+                this.selectionContainerItems = checkedItems.map((item) => {
+                    return (h("six-menu-item", { key: item.value, checked: true, value: item.value, checkType: this.multiple ? 'checkbox' : 'check', onClick: (event) => {
+                            event.stopPropagation();
+                            if (!this.disabled) {
+                                const menuItem = event.target;
+                                const isChecked = menuItem.checked;
+                                menuItem.checked = !isChecked;
+                                item.checked = !isChecked;
+                                this.syncValueFromItems();
+                                this.sixChange.emit({ value: this.value, isSelected: true });
+                            }
+                        } }, this.getItemLabel(item)));
+                });
+            }
+            this.isOpen = true;
+        };
+        this.handleMenuHide = () => {
+            this.isOpen = false;
+        };
+        this.handleSlotChange = () => {
+            this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+            this.hasLabelSlot = hasSlot(this.host, 'label');
+            this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+            this.syncItemsFromValue();
+        };
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasErrorTextSlot = false;
+        this.isOpen = false;
+        this.displayedValues = [];
+        this.selectionContainerItems = [];
+        this.multiple = false;
+        this.selectAllButton = false;
+        this.selectAllText = undefined;
+        this.maxTagsVisible = 3;
+        this.disabled = false;
+        this.name = '';
+        this.placeholder = '';
+        this.filterPlaceholder = undefined;
+        this.filterDebounce = undefined;
+        this.size = 'medium';
+        this.hoist = false;
+        this.value = '';
+        this.pill = false;
+        this.helpText = '';
+        this.required = false;
+        this.clearable = false;
+        this.label = '';
+        this.errorText = '';
+        this.errorTextCount = undefined;
+        this.invalid = false;
+        this.line = false;
+        this.filter = false;
+        this.asyncFilter = false;
+        this.autocomplete = false;
+        this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
+        this.options = null;
+        this.virtualScroll = false;
+    }
+    handleDisabledChange() {
+        var _a;
+        if (this.disabled && this.isOpen) {
+            (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide();
+        }
+    }
+    handleLabelChange() {
+        this.handleSlotChange();
+    }
+    handleMultipleChange() {
+        // Cast to array | string based on `this.multiple`
+        const value = this.getValueAsArray();
+        this.value = this.multiple ? value : value[0] || '';
+        this.syncItemsFromValue();
+    }
+    async handleValueChange() {
+        if (this.multiple && !Array.isArray(this.value)) {
+            this.value = [];
+        }
+        if (!this.multiple && typeof this.value !== 'string') {
+            this.value = '';
+        }
+        await this.syncItemsFromValue();
+    }
+    connectedCallback() {
+        if (this.virtualScroll && this.options === null) {
+            console.error('Options must be defined when using virtual scrolling');
+        }
+        this.init();
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+        if (this.multiple && this.value != null) {
+            this.value = this.getValueAsArray();
+        }
+    }
+    componentDidLoad() {
+        this.init();
+        // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
+        requestAnimationFrame(() => this.syncItemsFromValue());
+        if (this.autocomplete && this.autocompleteInput != null) {
+            const autocompleteInput = this.autocompleteInput;
+            this.eventListeners.add(autocompleteInput, 'six-input-input', debounce((event) => {
+                this.value = autocompleteInput.value;
+                this.sixChange.emit({ value: this.value, isSelected: false });
+                event.stopPropagation();
+            }, this.inputDebounce));
+            autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        this.resizeObserver.disconnect();
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.removeAll();
+    }
+    /** Sets focus on the select. */
+    async setFocus(options) {
+        var _a;
+        this.hasFocus = true;
+        (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    init() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.forward('six-select-change', 'change', this.host);
+        this.eventListeners.forward('six-select-blur', 'blur', this.host);
+        this.eventListeners.forward('six-select-focus', 'focus', this.host);
+        if (this.displayValuesContainer) {
+            this.resizeObserver.observe(this.displayValuesContainer);
+        }
+    }
+    getItemLabel(item) {
+        var _a, _b;
+        const slot = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+        if (slot != null) {
+            return getTextContent(slot);
+        }
+        else {
+            // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed
+            return (_b = item.textContent) !== null && _b !== void 0 ? _b : '';
+        }
+    }
+    getItems() {
+        if (this.options !== null && this.menu != null && this.menu.shadowRoot != null) {
+            return [...this.menu.shadowRoot.querySelectorAll('six-menu-item')];
+        }
+        return [...this.host.querySelectorAll('six-menu-item')];
+    }
+    getVisibleItems() {
+        const selectionContainerItems = this.getSelectionContainerItems();
+        const mainItems = this.getItems();
+        return [...selectionContainerItems, ...mainItems].filter((i) => i.style.display !== 'none');
+    }
+    getSelectionContainerItems() {
+        var _a;
+        return [...(((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('six-menu-item')) || [])];
+    }
+    getValueAsArray() {
+        const values = Array.isArray(this.value) ? this.value : this.value === '' ? [] : [this.value];
+        // enforce that the values are converted to 'string' before the value is compared
+        return values.map(String);
+    }
+    async clearValues() {
+        this.value = this.multiple ? [] : '';
+        this.selectionContainerItems = [];
+        await this.syncItemsFromValue();
+    }
+    selectAll() {
+        const visibleItems = this.getVisibleItems();
+        const hasDeselectedOptions = this.hasDeselectedOptions();
+        visibleItems.filter((option) => !option.disabled).forEach((option) => (option.checked = hasDeselectedOptions));
+        const checkedItems = visibleItems.filter((option) => option.checked).map((option) => option.value);
         this.value = hasDeselectedOptions ? checkedItems : [];
         this.sixChange.emit({ value: this.value, isSelected: true });
-      }
-    };
-    this.handleKeyDown = (event) => {
-      var _a, _b, _c, _d;
-      const target = event.target;
-      const items = this.getItems();
-      const firstItem = items[0];
-      const lastItem = items[items.length - 1];
-      // Ignore key presses on tags
-      if (target.tagName.toLowerCase() === 'six-tag') {
-        return;
-      }
-      // Tabbing out of the control closes it
-      if (event.key === 'Tab') {
-        if (this.isOpen) {
-          (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    /**
+     * Sets the checked state of menu items and renders the displayed values.
+     */
+    async syncItemsFromValue() {
+        const selectionContainerItems = this.getSelectionContainerItems();
+        const mainItems = this.getItems();
+        const value = this.getValueAsArray();
+        selectionContainerItems.forEach((item) => {
+            item.checkType = this.multiple ? 'checkbox' : 'check';
+            item.checked = value.includes(item.value);
+        });
+        mainItems.forEach((item) => {
+            item.checkType = this.multiple ? 'checkbox' : 'check';
+            item.checked = value.includes(item.value);
+        });
+        const checkedItems = getCheckedItems(this.getValueAsArray(), mainItems);
+        this.displayedValues = checkedItems.map((i) => this.getItemLabel(i));
+        if (this.autocomplete && this.autocompleteInput != null) {
+            this.autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
         }
-        return;
-      }
-      // Up/down opens the menu
-      if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
-        event.preventDefault();
-        // Show the menu if it's not already open
-        if (!this.isOpen) {
-          (_b = this.dropdown) === null || _b === void 0 ? void 0 : _b.show();
+        requestAnimationFrame(() => {
+            this.updateDisplayedValues();
+        });
+    }
+    syncValueFromItems() {
+        const items = this.getItems();
+        const checkedValues = items.filter((item) => item.checked).map((item) => item.value);
+        if (this.multiple) {
+            this.value = checkedValues;
         }
-        // Focus on a menu item
-        if (event.key === 'ArrowDown' && firstItem) {
-          firstItem.setFocus();
-          return;
+        else {
+            this.value = checkedValues.length > 0 ? checkedValues[0] : '';
         }
-        if (event.key === 'ArrowUp' && lastItem) {
-          lastItem.setFocus();
-          return;
+    }
+    updateDisplayedValues() {
+        var _a, _b;
+        const displayValueOptions = [...((_b = (_a = this.displayValuesContainer) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.display-value')) !== null && _b !== void 0 ? _b : [])];
+        if (this.displayValuesContainer == null || displayValueOptions.length === 0 || this.overflowCount == null) {
+            return;
         }
-      }
-      // All other keys open the menu and initiate type to select
-      if (!this.isOpen) {
-        event.stopPropagation();
-        event.preventDefault();
-        (_c = this.dropdown) === null || _c === void 0 ? void 0 : _c.show();
-        (_d = this.menu) === null || _d === void 0 ? void 0 : _d.typeToSelect(event.key);
-      }
-    };
-    this.handleLabelClick = () => {
-      var _a;
-      (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    this.handleMenuSelect = (event) => {
-      const item = event.detail.item;
-      const getValue = () => {
-        if (this.multiple) {
-          return this.value.includes(item.value)
-            ? this.value.filter((v) => v !== item.value)
-            : [...this.value, item.value];
+        // Show all options and separators to properly measure all widths.
+        displayValueOptions.forEach((d) => {
+            showDisplayValue(d);
+            showSeparator(d);
+        });
+        // Measure available width. The last separator is added to the available width, because it will be hidden later on.
+        const separator = displayValueOptions[displayValueOptions.length - 1].querySelector('.separator');
+        if (separator == null)
+            return;
+        let availableWidth = getWidth(this.displayValuesContainer) + getWidth(separator);
+        // Compute how many display value elements fit in the available width
+        let { fitCount, overflowCount } = computeFitCount(displayValueOptions, availableWidth);
+        if (overflowCount === 0) {
+            // All items fit, hide overflow count and show all values.
+            hideOverflowCount(this.overflowCount);
+            showFittingValues(displayValueOptions, fitCount);
         }
         else {
-          return item.value;
+            // Not all items fit in the available width. Recompute the available width with the overflow-count visible.
+            // Increment overflow count by one to make sure the elements fit, even if the overflow count increases to the
+            // next higher power of ten, e.g. from 9 to 10 or 99 to 100.
+            setOverflowCount(this.overflowCount, overflowCount + 1);
+            showOverflowCount(this.overflowCount);
+            // Subtract the overflow count from the available width
+            availableWidth = availableWidth - getWidth(this.overflowCount);
+            // Compute how many display value elements fit in the new available width
+            ({ fitCount, overflowCount } = computeFitCount(displayValueOptions, availableWidth));
+            // Show overflow count and items that fit.
+            setOverflowCount(this.overflowCount, overflowCount);
+            showFittingValues(displayValueOptions, fitCount);
         }
-      };
-      this.value = getValue();
-      this.syncItemsFromValue();
-      this.sixChange.emit({ value: this.value, isSelected: true });
-    };
-    this.handleMenuShow = (event) => {
-      var _a;
-      if (this.disabled) {
-        event.preventDefault();
-        return;
-      }
-      this.resizeMenu();
-      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.host);
-      this.isOpen = true;
-    };
-    this.handleMenuHide = () => {
-      var _a;
-      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.host);
-      this.isOpen = false;
-    };
-    this.handleSlotChange = () => {
-      this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-      this.hasLabelSlot = hasSlot(this.host, 'label');
-      this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-      this.syncItemsFromValue();
-    };
-    this.handleTagInteraction = (event) => {
-      // Don't toggle the menu when a tag's clear button is activated
-      const path = event.composedPath();
-      const clearButton = path.find((el) => {
-        if (el instanceof HTMLElement) {
-          const element = el;
-          return element.classList.contains('tag__clear');
+    }
+    render() {
+        var _a;
+        const hasSelection = this.hasSelection();
+        const items = this.getItems();
+        const hasMenuItems = items.length > 0;
+        const hasDeselectedOptions = this.hasDeselectedOptions();
+        let showClear = false;
+        let showExpand = hasMenuItems;
+        if (this.clearable && hasSelection) {
+            showClear = true;
+            showExpand = false;
         }
-      });
-      if (clearButton) {
-        event.stopPropagation();
-        this.sixChange.emit({ value: this.value, isSelected: true });
-      }
-    };
-    this.hasFocus = false;
-    this.hasHelpTextSlot = false;
-    this.hasLabelSlot = false;
-    this.hasErrorTextSlot = false;
-    this.isOpen = false;
-    this.displayLabel = '';
-    this.displayTags = [];
-    this.multiple = false;
-    this.maxTagsVisible = 3;
-    this.disabled = false;
-    this.name = '';
-    this.placeholder = '';
-    this.filterPlaceholder = undefined;
-    this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
-    this.size = 'medium';
-    this.hoist = false;
-    this.value = '';
-    this.pill = false;
-    this.helpText = '';
-    this.required = false;
-    this.clearable = false;
-    this.label = '';
-    this.errorText = '';
-    this.errorTextCount = undefined;
-    this.invalid = false;
-    this.line = false;
-    this.filter = false;
-    this.asyncFilter = false;
-    this.autocomplete = false;
-    this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
-    this.options = null;
-    this.virtualScroll = false;
-  }
-  handleDisabledChange() {
-    var _a;
-    if (this.disabled && this.isOpen) {
-      (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide();
-    }
-  }
-  handleLabelChange() {
-    this.handleSlotChange();
-  }
-  handleMultipleChange() {
-    // Cast to array | string based on `this.multiple`
-    const value = this.getValueAsArray();
-    this.value = this.multiple ? value : value[0] || '';
-    this.syncItemsFromValue();
-  }
-  async handleValueChange() {
-    if (this.multiple && !Array.isArray(this.value)) {
-      this.value = [];
-    }
-    if (!this.multiple && typeof this.value !== 'string') {
-      this.value = '';
-    }
-    await this.syncItemsFromValue();
-  }
-  connectedCallback() {
-    var _a;
-    if (this.virtualScroll && this.options === null) {
-      console.error('Options must be defined when using virtual scrolling');
-    }
-    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
-    this.eventListeners.forward('six-select-change', 'change', this.host);
-    this.eventListeners.forward('six-select-blur', 'blur', this.host);
-    this.eventListeners.forward('six-select-focus', 'focus', this.host);
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-    if (this.multiple && this.value != null) {
-      this.value = this.getValueAsArray();
-    }
-  }
-  componentDidLoad() {
-    if (this.input == null)
-      return;
-    const input = this.input;
-    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
-    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
-    requestAnimationFrame(() => this.syncItemsFromValue());
-    this.eventListeners.add(input, 'six-input-input', debounce((event) => {
-      const enteredValue = input.value;
-      this.clearValues();
-      this.sixChange.emit({ value: enteredValue, isSelected: false });
-      event.stopPropagation();
-    }, this.inputDebounce));
-    input.value = this.hasSelection() ? this.displayLabel : '';
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
-    this.eventListeners.removeAll();
-  }
-  /** Sets focus on the select. */
-  async setFocus(options) {
-    var _a;
-    this.hasFocus = true;
-    (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus(options);
-  }
-  getItemLabel(item) {
-    var _a, _b;
-    const slot = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
-    if (slot != null) {
-      return getTextContent(slot);
-    }
-    else {
-      // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed
-      return (_b = item.textContent) !== null && _b !== void 0 ? _b : '';
-    }
-  }
-  getItems() {
-    if (this.options !== null) {
-      return this.options.map((option) => h("six-menu-item", { value: option.value }, option.label));
-    }
-    return [...this.host.querySelectorAll('six-menu-item')];
-  }
-  hasMenuItems() {
-    return this.getItems().length > 0;
-  }
-  getValueAsArray() {
-    const values = Array.isArray(this.value) ? this.value : this.value === '' ? [] : [this.value];
-    // enforce that the values are converted to 'string' before the value is compared
-    return values.map(String);
-  }
-  clearValues() {
-    this.value = this.multiple ? [] : '';
-    this.syncItemsFromValue();
-  }
-  resizeMenu() {
-    if (this.menu == null || this.box == null)
-      return;
-    this.menu.style.minWidth = `${this.box.clientWidth}px`;
-    if (this.dropdown) {
-      this.dropdown.reposition();
-    }
-  }
-  async syncItemsFromValue() {
-    const items = this.getItems();
-    const value = this.getValueAsArray();
-    // Sync checked states
-    items.forEach((item) => (item.checked = value.includes(item.value)));
-    // Sync display label
-    if (this.multiple) {
-      const checkedItems = [];
-      value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));
-      this.displayTags = checkedItems.map((item) => {
-        return (h("six-tag", { exportparts: "base:tag", type: "primary", size: this.size, pill: this.pill, clearable: true, onClick: this.handleTagInteraction, onKeyDown: this.handleTagInteraction, "onSix-tag-clear": (event) => {
-            event.stopPropagation();
-            if (!this.disabled) {
-              item.checked = false;
-              this.syncValueFromItems();
-            }
-          } }, this.getItemLabel(item)));
-      });
-      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {
-        const total = this.displayTags.length;
-        this.displayLabel = '';
-        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
-        this.displayTags.push(h("six-tag", { exportparts: "base:tag", type: "info", size: this.size }, "+", total - this.maxTagsVisible));
-      }
-    }
-    else {
-      this.displayLabel = this.extractLabelForSelectedItem(value, items);
-      this.displayTags = [];
-    }
-    if (!isValueEmpty(this.value)) {
-      this.touched = true;
-    }
-    if (this.touched && this.input != null) {
-      this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
-    }
-  }
-  extractLabelForSelectedItem(value, items) {
-    if (value.length === 0 || (value.length === 1 && value[0] === '')) {
-      return '';
-    }
-    if (this.options !== null) {
-      const selectedOption = this.options.find((item) => item.value === value[0]);
-      return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '';
-    }
-    const checkedItem = items.find((item) => item.value === value[0]);
-    return checkedItem ? this.getItemLabel(checkedItem) : '';
-  }
-  syncValueFromItems() {
-    const items = this.getItems();
-    const checkedItems = items.filter((item) => item.checked);
-    const checkedValues = checkedItems.map((item) => item.value);
-    this.value = this.multiple
-      ? this.getValueAsArray().filter((val) => checkedValues.includes(val))
-      : checkedValues.length > 0
-        ? checkedValues[0]
-        : '';
-  }
-  render() {
-    var _a;
-    const hasSelection = this.hasSelection();
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
-        select: true,
-        'select--open': this.isOpen,
-        'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
-        'select--focused': this.hasFocus,
-        'select--clearable': this.clearable,
-        'select--disabled': this.disabled,
-        'select--multiple': this.multiple,
-        'select--has-tags': this.multiple && hasSelection,
-        'select--placeholder-visible': this.displayLabel === '',
-        'select--small': this.size === 'small',
-        'select--medium': this.size === 'medium',
-        'select--large': this.size === 'large',
-        'select--pill': this.pill,
-        'select--invalid': this.invalid,
-      }, onKeyDown: this.handleSelectAll, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter }, h("div", { slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
-        select__box: true,
-        'select__box--line': this.line,
-        'select__box--autocomplete': this.autocomplete,
-      }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, h("span", { class: { select__label: true, 'select__label--single': !this.displayTags.length } }, this.displayTags.length > 0 ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)), this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.input = el), class: {
-        select__input: true,
-        'select__hidden-select': !this.autocomplete,
-      }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
-        select__menu: true,
-        'select__menu--filtered': this.filter || this.asyncFilter,
-        'select__menu--hidden': !this.hasMenuItems(),
-      }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true }, h("slot", { onSlotchange: this.handleSlotChange })))));
-  }
-  hasSelection() {
-    return this.multiple ? this.value.length > 0 : this.value !== '';
-  }
-  static get is() { return "six-select"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-select.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-select.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "multiple": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to enable multiselect."
-        },
-        "attribute": "multiple",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "maxTagsVisible": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\nnumber of additional items that are selected. Set to -1 to remove the limit."
-        },
-        "attribute": "max-tags-visible",
-        "reflect": false,
-        "defaultValue": "3"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to disable the select control."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The select's name."
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The select's placeholder text."
-        },
-        "attribute": "placeholder",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "filterPlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The filter's placeholder text."
-        },
-        "attribute": "filter-placeholder",
-        "reflect": false
-      },
-      "filterDebounce": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The debounce for the filter callbacks."
-        },
-        "attribute": "filter-debounce",
-        "reflect": false,
-        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The select's size."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'medium'"
-      },
-      "hoist": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
-        },
-        "attribute": "hoist",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value of the control. This will be a string or an array depending on `multiple`."
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "pill": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to draw a pill-style select with rounded edges."
-        },
-        "attribute": "pill",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "helpText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The select's help text. Alternatively, you can use the help-text slot."
-        },
-        "attribute": "help-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to show an asterisk beneath the label."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "clearable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to add a clear button when the select is populated."
-        },
-        "attribute": "clearable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label text."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "errorText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The error message shown, if `invalid` is set to true."
-        },
-        "attribute": "error-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "errorTextCount": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
-        },
-        "attribute": "error-text-count",
-        "reflect": false
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "line": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to render as line"
-        },
-        "attribute": "line",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "filter": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to allow filtering for entries in the dropdown"
-        },
-        "attribute": "filter",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "asyncFilter": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to allow async filtering.\nWhen you enter something in the search field the component will only emit an event but not filter any elements itself.\nYou can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself"
-        },
-        "attribute": "async-filter",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "autocomplete": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to turn the six-select into an autocomplete."
-        },
-        "attribute": "autocomplete",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "inputDebounce": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The debounce for when the input changes for autocompletes should be emitted"
-        },
-        "attribute": "input-debounce",
-        "reflect": false,
-        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-      },
-      "options": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "SixMenuItemData[] | null",
-          "resolved": "SixMenuItemData[] | null",
-          "references": {
-            "SixMenuItemData": {
-              "location": "import",
-              "path": "../six-menu/six-menu",
-              "id": "src/components/six-menu/six-menu.tsx::SixMenuItemData"
+        return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+                select: true,
+                'select--open': this.isOpen,
+                'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
+                'select--focused': this.hasFocus,
+                'select--clearable': this.clearable,
+                'select--disabled': this.disabled,
+                'select--multiple': this.multiple,
+                'select--has-tags': this.multiple && hasSelection,
+                'select--placeholder-visible': this.displayedValues.length === 0,
+                'select--small': this.size === 'small',
+                'select--medium': this.size === 'medium',
+                'select--large': this.size === 'large',
+                'select--pill': this.pill,
+                'select--invalid': this.invalid,
+            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
+                select__box: true,
+                'select__box--line': this.line,
+                'select__box--autocomplete': this.autocomplete,
+            }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus }, h("div", { class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.autocompleteInput = el), class: {
+                select__input: true,
+                'select__hidden-select': !this.autocomplete,
+            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { class: {
+                'selection-container': true,
+                'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
+            } }, this.selectionContainerItems), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
+                select__menu: true,
+                'select__menu--hidden': !hasMenuItems,
+            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { class: "select-all", slot: "dropdown-footer" }, h("six-button", { type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
+    }
+    hasSelection() {
+        return this.multiple ? this.value.length > 0 : this.value !== '';
+    }
+    hasDeselectedOptions() {
+        return this.getVisibleItems().some((opt) => !opt.disabled && !opt.checked);
+    }
+    static get is() { return "six-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to enable multiselect."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectAllButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the select all button."
+                },
+                "attribute": "select-all-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectAllText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text for the \"select all\" button. Defaults to \"Select all\" and equivalents in supported languages."
+                },
+                "attribute": "select-all-text",
+                "reflect": false
+            },
+            "maxTagsVisible": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": ": This property is ignored. The component now displays as many items as possible and computes the \"+n\" dynamically."
+                        }],
+                    "text": "The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\nnumber of additional items that are selected. Set to -1 to remove the limit."
+                },
+                "attribute": "max-tags-visible",
+                "reflect": false,
+                "defaultValue": "3"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the select control."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The select's name."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The select's placeholder text."
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "filterPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The filter's placeholder text."
+                },
+                "attribute": "filter-placeholder",
+                "reflect": false
+            },
+            "filterDebounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The debounce for the filter callbacks."
+                },
+                "attribute": "filter-debounce",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The select's size."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "hoist": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
+                },
+                "attribute": "hoist",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the control. This will be a string or an array depending on `multiple`."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "pill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw a pill-style select with rounded edges."
+                },
+                "attribute": "pill",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The select's help text. Alternatively, you can use the help-text slot."
+                },
+                "attribute": "help-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to show an asterisk beneath the label."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to add a clear button when the select is populated."
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message shown, if `invalid` is set to true."
+                },
+                "attribute": "error-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorTextCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
+                },
+                "attribute": "error-text-count",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "line": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to render as line"
+                },
+                "attribute": "line",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "filter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to allow filtering for entries in the dropdown"
+                },
+                "attribute": "filter",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "asyncFilter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to allow async filtering.\nWhen you enter something in the search field the component will only emit an event but not filter any elements itself.\nYou can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself"
+                },
+                "attribute": "async-filter",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to turn the six-select into an autocomplete."
+                },
+                "attribute": "autocomplete",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inputDebounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The debounce for when the input changes for autocompletes should be emitted"
+                },
+                "attribute": "input-debounce",
+                "reflect": false,
+                "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SixMenuItemData[] | null",
+                    "resolved": "SixMenuItemData[] | null",
+                    "references": {
+                        "SixMenuItemData": {
+                            "location": "import",
+                            "path": "../six-menu/six-menu",
+                            "id": "src/components/six-menu/six-menu.tsx::SixMenuItemData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the options to be shown in the dropdown (alternative to setting the elements via html)"
+                },
+                "defaultValue": "null"
+            },
+            "virtualScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
+                },
+                "attribute": "virtual-scroll",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the options to be shown in the dropdown (alternative to setting the elements via html)"
-        },
-        "defaultValue": "null"
-      },
-      "virtualScroll": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
-        },
-        "attribute": "virtual-scroll",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasFocus": {},
-      "hasHelpTextSlot": {},
-      "hasLabelSlot": {},
-      "hasErrorTextSlot": {},
-      "isOpen": {},
-      "displayLabel": {},
-      "displayTags": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixChange",
-        "name": "six-select-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control's value changes."
-        },
-        "complexType": {
-          "original": "SixSelectChangePayload",
-          "resolved": "SixSelectChangePayload",
-          "references": {
-            "SixSelectChangePayload": {
-              "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-select/six-select.tsx",
-              "id": "src/components/six-select/six-select.tsx::SixSelectChangePayload"
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "hasHelpTextSlot": {},
+            "hasLabelSlot": {},
+            "hasErrorTextSlot": {},
+            "isOpen": {},
+            "displayedValues": {},
+            "selectionContainerItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixChange",
+                "name": "six-select-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control's value changes."
+                },
+                "complexType": {
+                    "original": "SixSelectChangePayload",
+                    "resolved": "SixSelectChangePayload",
+                    "references": {
+                        "SixSelectChangePayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-select/six-select.tsx",
+                            "id": "src/components/six-select/six-select.tsx::SixSelectChangePayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixFocus",
+                "name": "six-select-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control gains focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixBlur",
+                "name": "six-select-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control loses focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the select.",
+                    "tags": []
+                }
             }
-          }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "helpText",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "errorText",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "label",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "multiple",
+                "methodName": "handleMultipleChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+function getCheckedItems(value, items) {
+    return items.filter((item) => value.includes(item.value));
+}
+function getWidth(element) {
+    return element.getBoundingClientRect().width;
+}
+function computeFitCount(options, availableWidth) {
+    let accumulatedWidth = 0;
+    let fitCount = 0;
+    for (let i = 0; i < options.length; i++) {
+        const displayOption = options[i];
+        const width = getWidth(displayOption);
+        if (i === 0 && width > availableWidth) {
+            fitCount = 1;
+            break;
         }
-      }, {
-        "method": "sixFocus",
-        "name": "six-select-focus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control gains focus."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::EmptyPayload"
-            }
-          }
+        accumulatedWidth += width;
+        if (accumulatedWidth > availableWidth) {
+            break;
         }
-      }, {
-        "method": "sixBlur",
-        "name": "six-select-blur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control loses focus."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::EmptyPayload"
-            }
-          }
+        else {
+            fitCount += 1;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+    }
+    const overflowCount = options.length - fitCount;
+    return { fitCount, overflowCount };
+}
+function showFittingValues(displayValueOptions, fitCount) {
+    if (displayValueOptions.length > 0) {
+        // show items that fit
+        displayValueOptions.slice(0, fitCount).forEach((displayValue, index, list) => {
+            showDisplayValue(displayValue);
+            const isLast = index === list.length - 1;
+            if (isLast) {
+                hideSeparator(displayValue);
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the select.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "disabled",
-        "methodName": "handleDisabledChange"
-      }, {
-        "propName": "helpText",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "errorText",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "label",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "multiple",
-        "methodName": "handleMultipleChange"
-      }, {
-        "propName": "value",
-        "methodName": "handleValueChange"
-      }];
-  }
+            else {
+                showSeparator(displayValue);
+            }
+        });
+        // hide the rest
+        displayValueOptions.slice(fitCount).forEach((displayValue) => {
+            hideDisplayValue(displayValue);
+            showSeparator(displayValue);
+        });
+    }
+}
+function hideSeparator(displayValueOption) {
+    var _a;
+    (_a = displayValueOption.querySelector('.separator')) === null || _a === void 0 ? void 0 : _a.classList.add('separator--hidden');
+}
+function showSeparator(displayValueOption) {
+    var _a;
+    (_a = displayValueOption.querySelector('.separator')) === null || _a === void 0 ? void 0 : _a.classList.remove('separator--hidden');
+}
+function showDisplayValue(displayValueOption) {
+    displayValueOption.classList.remove('display-value--hidden');
+}
+function hideDisplayValue(displayValueOption) {
+    displayValueOption.classList.add('display-value--hidden');
+}
+function setOverflowCount(overflowCount, count) {
+    overflowCount.textContent = `+${count}`;
+}
+function showOverflowCount(overflowCount) {
+    overflowCount.classList.remove('overflow-count-hidden');
+}
+function hideOverflowCount(overflowCount) {
+    overflowCount.classList.add('overflow-count-hidden');
+}
+function selectAllDefaultText(hasDeselectedOptions) {
+    const lang = getLanguage();
+    switch (lang) {
+        case 'de':
+            return hasDeselectedOptions ? 'Alle auswählen' : 'Alle abwählen';
+        case 'fr':
+            return hasDeselectedOptions ? 'Tout sélectionner' : 'Tout désélectionner';
+        case 'it':
+            return hasDeselectedOptions ? 'Seleziona tutto' : 'Deseleziona tutto';
+        case 'en':
+            return hasDeselectedOptions ? 'Select all' : 'Deselect all';
+        case 'es':
+            return hasDeselectedOptions ? 'Seleccionar todo' : 'Deseleccionar todo';
+    }
 }
 //# sourceMappingURL=six-select.js.map