@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.a7adc6d

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

@@ -1,9 +1,10 @@
-import { h } from '@stencil/core';
-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 { getValue, isValidValue, isValueEmpty, valueEquals } from './util';
+import { h } from "@stencil/core";
+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 { getLanguage } from "../../utils/error-messages";
+import { convertToValidArrayValue, convertToValidValue, valueEquals } from "./util";
 let id = 0;
 /**
  * @since 1.0
@@ -27,1063 +28,1128 @@ 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.customErrorText = '';
-    this.customValidation = false;
-    this.eventListeners = new EventListeners();
-    this.handleBlur = () => {
-      this.hasFocus = false;
-      this.sixBlur.emit();
-    };
-    this.handleFocus = () => {
-      this.hasFocus = true;
-      this.sixFocus.emit();
-    };
-    this.handleInvalid = () => {
-      this.invalid = true;
-    };
-    this.handleClearClick = (event) => {
-      event.stopPropagation();
-      this.clearValues();
-    };
-    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);
-        this.value = hasDeselectedOptions ? checkedItems : [];
-      }
-    };
-    this.handleKeyDown = async (event) => {
-      var _a;
-      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 && this.dropdown != null) {
-          await this.dropdown.hide();
+    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;
+            if (!this.virtualScroll && this.multiple) {
+                // 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(convertToValidArrayValue(this.value), mainItems);
+                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;
+            if (this.multiple) {
+                this.handleBlur();
+            }
+        };
+        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() {
+        this.value = convertToValidValue(this.value, this.multiple);
+        this.syncItemsFromValue();
+    }
+    async handleValueChange() {
+        const newValue = convertToValidValue(this.value, this.multiple);
+        if (!valueEquals(this.value, newValue)) {
+            this.value = newValue;
         }
-        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 && this.dropdown != null) {
-          await this.dropdown.show();
+        await this.syncItemsFromValue();
+    }
+    connectedCallback() {
+        var _a;
+        if (this.virtualScroll && this.options === null) {
+            console.error('Options must be defined when using virtual scrolling');
         }
-        // Focus on a menu item
-        if (event.key === 'ArrowDown' && firstItem) {
-          firstItem.setFocus();
+        (_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);
         }
-        else if (event.key === 'ArrowUp' && lastItem) {
-          lastItem.setFocus();
+    }
+    componentWillLoad() {
+        this.value = convertToValidValue(this.value, this.multiple);
+        this.handleSlotChange();
+    }
+    componentDidLoad() {
+        if (this.displayValuesContainer) {
+            this.resizeObserver.observe(this.displayValuesContainer);
         }
-      }
-      // All other keys open the menu and initiate type to select
-      if (!this.isOpen && this.dropdown != null) {
-        event.stopPropagation();
-        event.preventDefault();
-        await this.dropdown.show();
-        await ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.typeToSelect(event.key));
-      }
-    };
-    this.handleLabelClick = () => {
-      var _a;
-      (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    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.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-      this.hasLabelSlot = hasSlot(this.host, 'label');
-      this.update();
-    };
-    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');
+        // 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;
         }
-      });
-      if (clearButton) {
-        event.stopPropagation();
-      }
-    };
-    this.hasFocus = false;
-    this.hasHelpTextSlot = false;
-    this.hasErrorTextSlot = false;
-    this.hasLabelSlot = 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.label = '';
-    this.helpText = '';
-    this.errorText = '';
-    this.required = false;
-    this.clearable = false;
-    this.invalid = false;
-    this.line = false;
-    this.errorOnBlur = false;
-    this.filter = false;
-    this.asyncFilter = false;
-    this.autocomplete = false;
-    this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
-    this.options = null;
-    this.virtualScroll = false;
-    this.defaultValue = undefined;
-  }
-  handleDisabledChange() {
-    if (this.disabled && this.isOpen && this.dropdown != null) {
-      this.dropdown.hide();
     }
-  }
-  handleLabelChange() {
-    this.handleSlotChange();
-  }
-  handleMultipleChange() {
-    this.update();
-  }
-  handleValueChange(newValue, oldValue) {
-    var _a;
-    let items = (_a = this.options) !== null && _a !== void 0 ? _a : this.getItems();
-    // normalize invalid values. This will re-trigger this watch handler
-    if (!isValidValue(newValue, this.multiple, items)) {
-      this.value = getValue(newValue, this.multiple, items);
-      return;
+    disconnectedCallback() {
+        var _a;
+        this.resizeObserver.disconnect();
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.removeAll();
     }
-    // avoid re-triggering if old and new values are equal. Needed because
-    // watch does a shallow comparison only.
-    if (valueEquals(getValue(oldValue, this.multiple, items), getValue(newValue, this.multiple, items))) {
-      return;
+    /** 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);
     }
-    this.update();
-    this.sixChange.emit({ value: this.value, isSelected: true });
-  }
-  update() {
-    var _a;
-    const items = this.getItems();
-    this.value = getValue(this.value, this.multiple, (_a = this.options) !== null && _a !== void 0 ? _a : items);
-    if (!Array.isArray(this.value)) {
-      // Sync checked states
-      items.forEach((item) => (item.checked = false));
-      const item = items.find((item) => this.value.includes(item.value));
-      if (item != null) {
-        item.checked = true;
-      }
-      // Sync input element content
-      this.displayLabel = this.extractLabelForSelectedItem([this.value], items);
-      this.displayTags = [];
-      const hasSelection = !isValueEmpty(this.value);
-      if (hasSelection) {
-        this.touched = true;
-      }
-      if (this.inputElement && this.touched) {
-        if (!this.autocomplete) {
-          this.inputElement.value = hasSelection ? this.displayLabel : '';
+    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 if (hasSelection) {
-          this.inputElement.value = this.value;
+        else {
+            // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed
+            return (_b = item.textContent) !== null && _b !== void 0 ? _b : '';
         }
-        this.inputElement.checkValidity().then((valid) => (this.invalid = !valid));
-      }
     }
-    else {
-      // Sync checked states
-      items.forEach((item) => (item.checked = this.value.includes(item.value)));
-      // Sync display label
-      const checkedItems = [];
-      this.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) {
-              this.toggleItem(item);
-            }
-          } }, 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));
-      }
-      // Sync input element content
-      const hasSelection = !isValueEmpty(this.value);
-      if (hasSelection) {
-        this.touched = true;
-      }
-      if (this.inputElement && this.touched) {
-        if (!this.autocomplete) {
-          this.inputElement.value = hasSelection ? this.displayLabel : '';
-        }
-        else if (hasSelection) {
-          this.inputElement.value = this.value.join(',');
+    getItems() {
+        if (this.options !== null && this.menu != null && this.menu.shadowRoot != null) {
+            return [...this.menu.shadowRoot.querySelectorAll('six-menu-item')];
         }
-        this.inputElement.checkValidity().then((valid) => (this.invalid = !valid));
-      }
+        return [...this.host.querySelectorAll('six-menu-item')];
     }
-  }
-  connectedCallback() {
-    var _a;
-    if (this.virtualScroll && this.options === null) {
-      console.error('Options must be defined when using virtual scrolling');
+    getVisibleItems() {
+        const selectionContainerItems = this.getSelectionContainerItems();
+        const mainItems = this.getItems();
+        return [...selectionContainerItems, ...mainItems].filter((i) => i.style.display !== 'none');
     }
-    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-  }
-  componentDidLoad() {
-    const inputElement = this.inputElement;
-    if (inputElement == null) {
-      return;
+    getSelectionContainerItems() {
+        var _a;
+        return [...(((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('six-menu-item')) || [])];
     }
-    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
-    this.eventListeners.add(inputElement, 'invalid', async (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
-        this.customErrorText = await inputElement.getValidationMessage();
-      }
-      event.preventDefault();
-    });
-    this.eventListeners.add(inputElement, 'six-input-input', debounce((event) => {
-      const enteredValue = inputElement.value;
-      this.clearValues();
-      this.sixChange.emit({ value: enteredValue, isSelected: false });
-      event.stopPropagation();
-    }, this.inputDebounce));
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
-    this.eventListeners.removeAll();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.isValid();
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    this.customErrorText = '';
-    this.customValidation = message !== '';
-    if (this.inputElement != null) {
-      await this.inputElement.setCustomValidity(message);
-      this.invalid = !(await this.inputElement.checkValidity());
+    async clearValues() {
+        this.value = this.multiple ? [] : '';
+        this.selectionContainerItems = [];
+        await this.syncItemsFromValue();
     }
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    var _a;
-    this.clearValues();
-    this.customErrorText = '';
-    this.customValidation = false;
-    await ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(''));
-    this.invalid = false;
-  }
-  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);
+    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 });
     }
-    else {
-      // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed
-      return (_b = item.textContent) !== null && _b !== void 0 ? _b : '';
+    /**
+     * Sets the checked state of menu items and renders the displayed values.
+     */
+    async syncItemsFromValue() {
+        const selectionContainerItems = this.getSelectionContainerItems();
+        const mainItems = this.getItems();
+        const value = convertToValidValue(this.value, this.multiple);
+        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(convertToValidArrayValue(this.value), 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;
+        }
+        requestAnimationFrame(() => {
+            this.updateDisplayedValues();
+        });
     }
-  }
-  getItems() {
-    if (this.options !== null) {
-      return this.options.map((option) => h("six-menu-item", { value: option.value }, option.label));
+    syncValueFromItems() {
+        const items = this.getItems();
+        const checkedValues = items.filter((item) => item.checked).map((item) => item.value);
+        if (this.multiple) {
+            this.value = checkedValues;
+        }
+        else {
+            this.value = checkedValues.length > 0 ? checkedValues[0] : '';
+        }
     }
-    return [...this.host.querySelectorAll('six-menu-item')];
-  }
-  hasMenuItems() {
-    return this.getItems().length > 0;
-  }
-  clearValues() {
-    var _a;
-    this.value = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : (this.multiple ? [] : '');
-    this.update();
-  }
-  async resizeMenu() {
-    if (this.menu == null || this.box == null) {
-      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;
+        }
+        // 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 {
+            // 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.menu.style.minWidth = `${this.box.clientWidth}px`;
-    if (this.dropdown) {
-      await this.dropdown.reposition();
+    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;
+        }
+        return (h(FormControl, { key: '3787965c52269e43fc052d66887ab1bb0c33613f', 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", { key: '783bfb455c2dda4ec867988251f784180f6245c2', 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", { key: '06b29a0e26e8c08ce50047e71e9bac5ca0852b37', 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", { key: 'd64257f0efecb3816562f99d17511e9368474fc6', 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", { key: '71d28c910c0382187c1c23b01bb17c683883d77a', 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", { key: 'c10395cc232d4af3b0446cb5e8b174bc35f40048', class: {
+                'selection-container': true,
+                'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
+            } }, this.selectionContainerItems), h("six-menu", { key: 'd50b9efc0bb974c03a177925010913dcd22c8245', 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", { key: 'bff03fba01c71728e123c46168ff6400b9739590', 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))))));
     }
-  }
-  extractLabelForSelectedItem(value, items) {
-    if (value.length === 0 || (value.length === 1 && value[0] === '')) {
-      return '';
+    hasSelection() {
+        return this.multiple ? this.value.length > 0 : this.value !== '';
     }
-    if (this.options !== null) {
-      const selectedOption = this.options.find((item) => item.value === value[0]);
-      return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '';
+    hasDeselectedOptions() {
+        return this.getVisibleItems().some((opt) => !opt.disabled && !opt.checked);
     }
-    const checkedItem = items.find((item) => item.value === value[0]);
-    return checkedItem ? this.getItemLabel(checkedItem) : '';
-  }
-  toggleItem(item) {
-    var _a;
-    const value = getValue(this.value, this.multiple, (_a = this.options) !== null && _a !== void 0 ? _a : this.getItems());
-    if (Array.isArray(value)) {
-      const itemFound = value.find((v) => v === item.value);
-      if (itemFound == null) {
-        this.value = [...this.value, item.value];
-      }
-      else {
-        this.value = value.filter((v) => v !== item.value);
-      }
+    static get is() { return "six-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-select.scss"]
+        };
     }
-    else {
-      if (item.value === value) {
-        this.value = '';
-      }
-      else {
-        this.value = item.value;
-      }
+    static get styleUrls() {
+        return {
+            "$": ["six-select.css"]
+        };
     }
-  }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));
-  }
-  render() {
-    var _a;
-    const hasSelection = !isValueEmpty(this.value);
-    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.customErrorText != null ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.displayError() }, 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" }, this.displayTags.length ? (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.inputElement = el), class: {
-        select__input: true,
-        'select__hidden-select': !this.autocomplete,
-      }, "aria-hidden": "true", required: this.required, onInvalid: this.handleInvalid, 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": (event) => this.toggleItem(event.detail.item), items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true }, h("slot", { onSlotchange: this.handleSlotChange })))));
-  }
-  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",
-          "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"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The select's label. Alternatively, you can use the label slot."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "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": "''"
-      },
-      "errorText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The select's error text. Alternatively, you can use the error-text slot."
-        },
-        "attribute": "error-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The select's required attribute."
-        },
-        "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"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "This will be true when the control is in an invalid state. Validity is determined by the `required` prop."
-        },
-        "attribute": "invalid",
-        "reflect": false,
-        "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"
-      },
-      "errorOnBlur": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to display the error text on blur and not when typing"
-        },
-        "attribute": "error-on-blur",
-        "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[]",
-          "references": {
-            "SixMenuItemData": {
-              "location": "import",
-              "path": "../six-menu/six-menu"
+    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"
-      },
-      "defaultValue": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[] | undefined",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The default value the select will be reverted to when reset is executed"
-        },
-        "attribute": "default-value",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasFocus": {},
-      "hasHelpTextSlot": {},
-      "hasErrorTextSlot": {},
-      "hasLabelSlot": {},
-      "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"
-            }
-          }
-        }
-      }, {
-        "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"
-            }
-          }
-        }
-      }, {
-        "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"
+        };
+    }
+    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;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "reportValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-          "tags": []
+        accumulatedWidth += width;
+        if (accumulatedWidth > availableWidth) {
+            break;
         }
-      },
-      "checkValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Checks for validity.",
-          "tags": []
+        else {
+            fitCount += 1;
         }
-      },
-      "setCustomValidity": {
-        "complexType": {
-          "signature": "(message: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
+    }
+    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 a custom validation message. If `message` is not empty, the field will be considered invalid.",
-          "tags": []
-        }
-      },
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+            else {
+                showSeparator(displayValue);
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
-          "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"
-      }];
-  }
+        });
+        // 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