@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.d7f75e8

package/dist/components/six-select.js

@@ -3,530 +3,802 @@ import { h as hasSlot, a as getTextContent } from './slot.js';
 import { F as FormControl } from './form-control.js';
 import { E as EventListeners } from './event-listeners.js';
 import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control.js';
-import { d as defineCustomElement$8 } from './six-dropdown2.js';
+import { d as defineCustomElement$b } from './six-button2.js';
+import { d as defineCustomElement$a } from './six-checkbox2.js';
+import { d as defineCustomElement$9 } from './six-dropdown2.js';
+import { d as defineCustomElement$8 } from './six-error2.js';
 import { d as defineCustomElement$7 } from './six-icon2.js';
 import { d as defineCustomElement$6 } from './six-icon-button2.js';
 import { d as defineCustomElement$5 } from './six-input2.js';
 import { d as defineCustomElement$4 } from './six-menu2.js';
 import { d as defineCustomElement$3 } from './six-menu-item2.js';
-import { d as defineCustomElement$2 } from './six-tag2.js';
+import { d as defineCustomElement$2 } from './six-spinner2.js';
 
-function isValueEmpty(value) {
-  if (Array.isArray(value)) {
-    return value.length === 0;
-  }
-  return value === '';
+const languages = ['de', 'fr', 'it', 'en', 'es'];
+const dateFormat = new Intl.DateTimeFormat('de-CH');
+/**
+ * Returns an error message for the given language and error.
+ */
+function getErrorMessage(language, error) {
+    try {
+        const message = translation[language][error.key];
+        switch (error.key) {
+            case 'required':
+            case 'requiredtrue':
+            case 'email':
+                return message;
+            case 'minlength':
+            case 'maxlength':
+                return message.replace('{requiredLength}', String(error.requiredLength));
+            case 'pattern':
+                return message.replace('{pattern}', String(error.requiredPattern));
+            case 'min':
+                return message.replace('{min}', String(error.min));
+            case 'max':
+                return message.replace('{max}', String(error.max));
+            case 'mindate':
+                return message.replace('{mindate}', dateFormat.format(error.mindate));
+            case 'maxdate':
+                return message.replace('{maxdate}', dateFormat.format(error.maxdate));
+            case 'invaliddate':
+                return message;
+            case 'custom':
+                return error.text;
+        }
+    }
+    catch (e) {
+        console.warn(`no error message in '${language}' for error:`, error);
+        return undefined;
+    }
+}
+function getLanguage() {
+    const documentLang = document.documentElement.lang;
+    if (languages.includes(documentLang)) {
+        return documentLang;
+    }
+    return 'de';
 }
+const translation = {
+    en: {
+        required: 'Please fill out this field.',
+        minlength: 'Please enter at least {requiredLength} characters.',
+        maxlength: 'Please enter no more than {requiredLength} characters.',
+        pattern: 'Please enter a value that matches the pattern: {pattern}.',
+        email: 'Please enter a valid email address.',
+        min: 'Please enter a value greater than or equal to {min}.',
+        max: 'Please enter a value less than or equal to {max}.',
+        requiredtrue: 'Please check this field.',
+        mindate: 'Please enter a date on or after {mindate}.',
+        maxdate: 'Please enter a date on or before {maxdate}.',
+        invaliddate: 'Please enter a valid date.',
+    },
+    fr: {
+        required: "Veuillez remplir ce champ s'il vous plaît.",
+        minlength: 'Veuillez entrer au moins {requiredLength} caractères.',
+        maxlength: 'Veuillez entrer au maximum {requiredLength} caractères.',
+        pattern: 'Veuillez entrer une valeur qui correspond au format : {pattern}.',
+        email: 'Veuillez entrer une adresse email valide.',
+        min: 'Veuillez entrer une valeur supérieure ou égale à {min}.',
+        max: 'Veuillez entrer une valeur inférieure ou égale à {max}.',
+        requiredtrue: "Veuillez cocher cette case s'il vous plaît.",
+        mindate: 'Veuillez entrer une date le {mindate} ou après.',
+        maxdate: 'Veuillez entrer une date le {maxdate} ou avant.',
+        invaliddate: 'Veuillez entrer une date valide.',
+    },
+    de: {
+        required: 'Bitte füllen Sie dieses Feld aus.',
+        minlength: 'Bitte geben Sie mindestens {requiredLength} Zeichen ein.',
+        maxlength: 'Bitte geben Sie höchstens {requiredLength} Zeichen ein.',
+        pattern: 'Bitte geben Sie einen Wert ein, der dem Muster entspricht: {pattern}.',
+        email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
+        min: 'Bitte geben Sie einen Wert größer oder gleich {min} ein.',
+        max: 'Bitte geben Sie einen Wert kleiner oder gleich {max} ein.',
+        requiredtrue: 'Bitte aktivieren Sie dieses Feld.',
+        mindate: 'Bitte geben Sie ein Datum am oder nach dem {mindate} ein.',
+        maxdate: 'Bitte geben Sie ein Datum am oder vor dem {maxdate} ein.',
+        invaliddate: 'Bitte geben Sie ein gültiges Datum ein.',
+    },
+    it: {
+        required: 'Si prega di compilare questo campo.',
+        minlength: 'Si prega di inserire almeno {requiredLength} caratteri.',
+        maxlength: 'Si prega di inserire al massimo {requiredLength} caratteri.',
+        pattern: 'Si prega di inserire un valore che corrisponde al formato: {pattern}.',
+        email: 'Si prega di inserire un indirizzo email valido.',
+        min: 'Si prega di inserire un valore maggiore o uguale a {min}.',
+        max: 'Si prega di inserire un valore minore o uguale a {max}.',
+        requiredtrue: 'Si prega di spuntare questo campo.',
+        mindate: 'Si prega di inserire una data il {mindate} o successiva.',
+        maxdate: 'Si prega di inserire una data il {maxdate} o precedente.',
+        invaliddate: 'Inserisci una data valida.',
+    },
+    es: {
+        required: 'Por favor, rellene este campo.',
+        minlength: 'Por favor, introduzca al menos {requiredLength} caracteres.',
+        maxlength: 'Por favor, introduzca no más de {requiredLength} caracteres.',
+        pattern: 'Por favor, introduzca un valor que coincida con el patrón: {pattern}.',
+        email: 'Por favor, introduzca una dirección de correo electrónico válida.',
+        min: 'Por favor, introduzca un valor mayor o igual a {min}.',
+        max: 'Por favor, introduzca un valor menor o igual a {max}.',
+        requiredtrue: 'Por favor, marque este campo.',
+        mindate: 'Por favor, introduzca una fecha igual o posterior a {mindate}.',
+        maxdate: 'Por favor, introduzca una fecha igual o anterior a {maxdate}.',
+        invaliddate: 'Por favor, introduzca una fecha válida.',
+    },
+};
 
-const sixSelectCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.select{display:block}.select__box{display:inline-flex;align-items:center;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);font-size:var(--six-input-font-size-medium);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:pointer}.select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select__box--autocomplete{border:none;overflow:initial}.select:not(.select--disabled) .select__box:hover{background-color:var(--six-input-background-color-hover);color:var(--six-input-color-hover);border-bottom-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:hover:not(.select__box--line){border-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:focus{background-color:var(--six-input-background-color-focus);outline:none;color:var(--six-input-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.select:not(.select--disabled) .select__box:focus:not(.select__box--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.select--disabled .select__box{background-color:var(--six-input-background-color-disabled);color:var(--six-input-color-disabled);cursor:not-allowed;outline:none}.select--disabled .select__box:not(.select__box--line){border-color:var(--six-input-border-color-disabled)}.select--disabled .select__tags,.select--disabled .select__clear{pointer-events:none}.select--invalid:not(.select--disabled):not(.select--focused) .select__box{border-bottom-color:var(--six-input-border-color-danger)}.select--invalid:not(.select--disabled):not(.select--focused) .select__box:not(.input--line){border-color:var(--six-input-border-color-danger)}.select__label{flex-shrink:1;flex-grow:1;align-items:center;user-select:none;width:0;scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.select__label::-webkit-scrollbar{width:0;height:0}.select__clear{flex-shrink:0;flex-grow:0;display:inline}.select__icon{flex-shrink:0;flex-grow:0;display:inline;transition:var(--six-transition-medium) transform ease}.select--open .select__icon{transform:rotate(-180deg)}.select--placeholder-visible .select__label{color:var(--six-input-placeholder-color)}.select--disabled.select--placeholder-visible .select__label{color:var(--six-input-placeholder-color-disabled)}.select__tags{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:left;margin-left:var(--six-spacing-xx-small)}.select__hidden-select{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.select__input{position:absolute;top:0;left:0;width:100%;height:100%}.select--small .select__box{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);min-height:var(--six-height-small)}.select--small .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--small .select__label{margin:0 var(--six-input-spacing-small)}.select--small .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--small .select__icon{margin-right:var(--six-spacing-x-small)}.select--small .select__tags{padding-bottom:2px}.select--small .select__tags six-tag{padding-top:2px}.select--small .select__tags six-tag:not(:last-of-type){margin-right:var(--six-spacing-xx-small)}.select--small.select--has-tags .select__label{margin-left:0}.select--medium .select__box{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);min-height:var(--six-height-medium)}.select--medium .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--medium .select__label{margin:0 var(--six-input-spacing-medium)}.select--medium .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--medium .select__icon{margin-right:var(--six-spacing-x-small)}.select--medium .select__tags{padding-bottom:3px}.select--medium .select__tags six-tag{padding-top:3px}.select--medium .select__tags six-tag:not(:last-of-type){margin-right:var(--six-spacing-xx-small)}.select--medium.select--has-tags .select__label{margin-left:0}.select--large .select__box{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);min-height:var(--six-height-large)}.select--large .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--large .select__label{margin:0 var(--six-input-spacing-large)}.select--large .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--large .select__icon{margin-right:var(--six-spacing-x-small)}.select--large .select__tags{padding-bottom:4px}.select--large .select__tags six-tag{padding-top:4px}.select--large .select__tags six-tag:not(:last-of-type){margin-right:var(--six-spacing-xx-small)}.select--large.select--has-tags .select__label{margin-left:0}.select--pill.select--small .select__box{border-radius:var(--six-height-small)}.select--pill.select--medium .select__box{border-radius:var(--six-height-medium)}.select--pill.select--large .select__box{border-radius:var(--six-height-large)}.select__menu{max-width:50vw;width:fit-content}.select__menu--filtered{width:100% !important}.select__menu--hidden{display:none}six-icon-button::part(base){padding-top:0;padding-bottom:0}";
+function convertToValidValue(value, multiple) {
+    if (multiple) {
+        if (Array.isArray(value)) {
+            return value.filter((element) => typeof element === 'string');
+        }
+        else if (typeof value === 'string' && value.length > 0) {
+            return [value];
+        }
+        else {
+            return [];
+        }
+    }
+    else {
+        if (typeof value === 'string') {
+            return value;
+        }
+        else {
+            return '';
+        }
+    }
+}
+function convertToValidArrayValue(value) {
+    return convertToValidValue(value, true);
+}
+function valueEquals(a, b) {
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((element, index) => element === b[index]);
+    }
+    else if (typeof a === 'string' && typeof b === 'string') {
+        return a === b;
+    }
+    return false;
+}
+
+const sixSelectCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host,.select{display:block}.select__box{display:inline-flex;align-items:center;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);font-size:var(--six-input-font-size-medium);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:pointer}.select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select__box--autocomplete{border:none;overflow:initial}.select:not(.select--disabled) .select__box:hover{background-color:var(--six-input-background-color-hover);color:var(--six-input-color-hover);border-bottom-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:hover:not(.select__box--line){border-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:focus{background-color:var(--six-input-background-color-focus);outline:none;color:var(--six-input-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.select:not(.select--disabled) .select__box:focus:not(.select__box--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.select--disabled .select__box{background-color:var(--six-input-background-color-disabled);color:var(--six-input-color-disabled);cursor:not-allowed;outline:none}.select--disabled .select__box:not(.select__box--line){border-color:var(--six-input-border-color-disabled)}.select--disabled .select__clear{pointer-events:none}.select--invalid:not(.select--disabled):not(.select--focused) .select__box{border-bottom-color:var(--six-input-border-color-danger)}.select--invalid:not(.select--disabled):not(.select--focused) .select__box:not(.input--line){border-color:var(--six-input-border-color-danger)}.display__values{display:flex;flex:1 1 auto;align-items:center;user-select:none;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.display__values::-webkit-scrollbar{width:0;height:0}.display__values-values{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.display__values-and-counter{display:flex;overflow:hidden}.select__clear{flex-shrink:0;flex-grow:0;display:inline}.select__icon{flex-shrink:0;flex-grow:0;display:inline;transition:var(--six-transition-medium) transform ease}.select--open .select__icon{transform:rotate(-180deg)}.placeholder{color:var(--six-input-placeholder-color)}.select--disabled .placeholder{color:var(--six-input-placeholder-color-disabled)}.select__hidden-select{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.select__input{position:absolute;top:0;left:0;width:100%;height:100%}.select--small .select__box{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);min-height:var(--six-height-small)}.select--small .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--small .display__values{margin:0 0 0 var(--six-input-spacing-small)}.select--small .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--small .select__icon{margin-right:var(--six-spacing-x-small)}.select--medium .select__box{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);min-height:var(--six-height-medium)}.select--medium .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--medium .display__values{margin:0 0 0 var(--six-input-spacing-medium)}.select--medium .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--medium .select__icon{margin-right:var(--six-spacing-x-small)}.select--large .select__box{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);min-height:var(--six-height-large)}.select--large .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--large .display__values{margin:0 0 0 var(--six-input-spacing-large)}.select--large .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--large .select__icon{margin-right:var(--six-spacing-x-small)}.select--pill.select--small .select__box{border-radius:var(--six-height-small)}.select--pill.select--medium .select__box{border-radius:var(--six-height-medium)}.select--pill.select--large .select__box{border-radius:var(--six-height-large)}.select__menu{width:100%}.select__menu--hidden{display:none}six-icon-button::part(base){padding-top:0;padding-bottom:0}.selection-container--border{border-bottom:solid var(--six-border-width) var(--six-menu-divider-color);padding-top:var(--six-spacing-xx-small);padding-bottom:var(--six-spacing-xx-small)}.display-value--hidden{display:none}.overflow-count{color:var(--six-color-web-rock-600);padding-left:var(--six-spacing-x-small)}.overflow-count-hidden{display:none}.separator--hidden{display:none}.select-all{border-top:1px solid var(--six-color-web-rock-300);display:flex;justify-content:end}";
+const SixSelectStyle0 = sixSelectCss;
 
 let id = 0;
 const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sixChange = createEvent(this, "six-select-change", 7);
-    this.sixFocus = createEvent(this, "six-select-focus", 7);
-    this.sixBlur = createEvent(this, "six-select-blur", 7);
-    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 = (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();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixChange = createEvent(this, "six-select-change", 7);
+        this.sixFocus = createEvent(this, "six-select-focus", 7);
+        this.sixBlur = createEvent(this, "six-select-blur", 7);
+        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.show());
+            await this.setFocus();
+            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();
         }
-        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();
+    }
+    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;
+        }
+        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);
+        if (this.displayValuesContainer) {
+            this.resizeObserver.observe(this.displayValuesContainer);
         }
-        // Focus on a menu item
-        if (event.key === 'ArrowDown' && firstItem) {
-          firstItem.setFocus();
-          return;
+    }
+    componentWillLoad() {
+        this.value = convertToValidValue(this.value, this.multiple);
+        this.handleSlotChange();
+    }
+    componentDidLoad() {
+        if (this.displayValuesContainer) {
+            this.resizeObserver.observe(this.displayValuesContainer);
+        }
+        // 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) => {
+                var _a;
+                this.value = autocompleteInput.value;
+                this.sixChange.emit({ value: this.value, isSelected: false });
+                event.stopPropagation();
+                if (this.virtualScroll || this.value.length > 0) {
+                    (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.show();
+                }
+            }, this.inputDebounce));
+            const selectedLabel = this.displayedValues.join(', ');
+            autocompleteInput.value = selectedLabel;
+        }
+    }
+    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);
+    }
+    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);
         }
-        if (event.key === 'ArrowUp' && lastItem) {
-          lastItem.setFocus();
-          return;
+        else {
+            // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed
+            return (_b = item.textContent) !== null && _b !== void 0 ? _b : '';
         }
-      }
-      // 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 = () => {
+    }
+    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')) || [])];
+    }
+    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 });
+    }
+    /**
+     * 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';
+            if (Array.isArray(value)) {
+                item.checked = value.some((val) => val === item.value);
+            }
+            else {
+                item.checked = value === item.value;
+            }
+        });
+        mainItems.forEach((item) => {
+            item.checkType = this.multiple ? 'checkbox' : 'check';
+            if (Array.isArray(value)) {
+                item.checked = value.some((val) => val === item.value);
+            }
+            else {
+                item.checked = value === item.value;
+            }
+        });
+        const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);
+        this.displayedValues = checkedItems.map((i) => this.getItemLabel(i));
+        if (this.autocomplete && this.autocompleteInput != null && !this.hasFocus) {
+            const selectedLabel = this.displayedValues.join(', ');
+            this.autocompleteInput.value = selectedLabel;
+        }
+        requestAnimationFrame(() => {
+            this.updateDisplayedValues();
+        });
+    }
+    syncValueFromItems() {
+        const items = this.getItems();
+        const checkedValues = items.filter((item) => item.checked).map((item) => item.value);
         if (this.multiple) {
-          return this.value.includes(item.value)
-            ? this.value.filter((v) => v !== item.value)
-            : [...this.value, item.value];
+            this.value = checkedValues;
         }
         else {
-          return item.value;
+            this.value = checkedValues.length > 0 ? checkedValues[0] : '';
         }
-      };
-      this.value = getValue();
-      this.syncItemsFromValue();
-    };
-    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.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');
+    }
+    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);
         }
-      });
-      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 = this.multiple ? [] : '';
-  }
-  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();
-  }
-  handleValueChange() {
-    if (this.multiple && !Array.isArray(this.value)) {
-      this.value = [];
-    }
-    if (!this.multiple && typeof this.value !== 'string') {
-      this.value = '';
-    }
-    this.syncItemsFromValue();
-    if (this.input) {
-      this.sixChange.emit({ value: this.value, isSelected: true });
-    }
-  }
-  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);
-  }
-  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(this.input, 'invalid', async (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText == null && this.customErrorText == null)) {
-        this.customErrorText = await input.getValidationMessage();
-      }
-      event.preventDefault();
-    });
-    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();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.input) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    var _a;
-    return (_a = this.input) === 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) {
-    if (this.input == null)
-      return;
-    this.customErrorText = '';
-    this.customValidation = message !== '';
-    await this.input.setCustomValidity(message);
-    this.invalid = !(await this.input.checkValidity());
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    if (this.input == null)
-      return;
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    await this.input.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);
     }
-    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];
-    // enforce that the values are converted to 'string' before the value is compared
-    return values.map(String);
-  }
-  clearValues() {
-    var _a;
-    this.value = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : (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();
+    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: '521e8a99e7fb4ad2fb8ded4763eb8ed1e0eff293', 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: 'ea5f0ec6216ab61ebcc1ae8add16b042e99297cc', 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: 'd6b14098f6aabd6212f71e3832890de646c6d97e', 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: 'dd77b5234c29235a00f62b5e49b81dc5aba2ffda', 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", { key: 'd30be3b2adb8f5eed29a3e7a5a59f4db007d62e9', exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { key: '7c40d29a181ce1f15bc1bacf059a9c8e9807be67', part: "icon", class: "select__icon" }, h("six-icon", { key: '6ac4a8bf6a4be113dcfd6bf2fd690c8b47aaaaeb', size: "medium" }, "expand_more"))), h("six-input", { key: '8f226312196871cd91abcb20da09c5a2811d1657', 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: 'bb683893a8ad678f3cb01e8e42531b17bd20913c', class: {
+                'selection-container': true,
+                'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
+            } }, this.selectionContainerItems), h("six-menu", { key: 'c7755a2e2da8134b6b58189c81c8354cac7a8e2e', 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: '95fe463945090bd7a7cbc11066f4752dfff55034', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { key: '448f7d261edd83841fc82c4c3304ec497aa4c8f8', class: "select-all", slot: "dropdown-footer" }, h("six-button", { key: 'e393c3715514b8e9a0a710c408364e6c96f9a1d3', 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);
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "disabled": ["handleDisabledChange"],
+        "helpText": ["handleLabelChange"],
+        "errorText": ["handleLabelChange"],
+        "label": ["handleLabelChange"],
+        "multiple": ["handleMultipleChange"],
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return SixSelectStyle0; }
+}, [1, "six-select", {
+        "multiple": [4],
+        "selectAllButton": [4, "select-all-button"],
+        "selectAllText": [1, "select-all-text"],
+        "maxTagsVisible": [2, "max-tags-visible"],
+        "disabled": [4],
+        "name": [1],
+        "placeholder": [1],
+        "filterPlaceholder": [1, "filter-placeholder"],
+        "filterDebounce": [2, "filter-debounce"],
+        "size": [1],
+        "hoist": [4],
+        "value": [1025],
+        "pill": [4],
+        "helpText": [1, "help-text"],
+        "required": [4],
+        "clearable": [4],
+        "label": [1],
+        "errorText": [1, "error-text"],
+        "errorTextCount": [2, "error-text-count"],
+        "invalid": [516],
+        "line": [4],
+        "filter": [4],
+        "asyncFilter": [4, "async-filter"],
+        "autocomplete": [4],
+        "inputDebounce": [2, "input-debounce"],
+        "options": [16],
+        "virtualScroll": [4, "virtual-scroll"],
+        "hasFocus": [32],
+        "hasHelpTextSlot": [32],
+        "hasLabelSlot": [32],
+        "hasErrorTextSlot": [32],
+        "isOpen": [32],
+        "displayedValues": [32],
+        "selectionContainerItems": [32],
+        "setFocus": [64]
+    }, undefined, {
+        "disabled": ["handleDisabledChange"],
+        "helpText": ["handleLabelChange"],
+        "errorText": ["handleLabelChange"],
+        "label": ["handleLabelChange"],
+        "multiple": ["handleMultipleChange"],
+        "value": ["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;
+        }
+        accumulatedWidth += width;
+        if (accumulatedWidth > availableWidth) {
+            break;
+        }
+        else {
+            fitCount += 1;
+        }
+    }
+    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);
+            }
+            else {
+                showSeparator(displayValue);
             }
-          } }, 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));
-      }
+        });
+        // hide the rest
+        displayValueOptions.slice(fitCount).forEach((displayValue) => {
+            hideDisplayValue(displayValue);
+            showSeparator(displayValue);
+        });
     }
-    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;
-      this.invalid = !(await this.input.checkValidity());
-    }
-  }
-  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]
-        : '';
-  }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));
-  }
-  render() {
+}
+function hideSeparator(displayValueOption) {
     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.customErrorText != null && this.customErrorText !== '' ? 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 > 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, 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": 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 !== '';
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "disabled": ["handleDisabledChange"],
-    "helpText": ["handleLabelChange"],
-    "errorText": ["handleLabelChange"],
-    "label": ["handleLabelChange"],
-    "multiple": ["handleMultipleChange"],
-    "value": ["handleValueChange"]
-  }; }
-  static get style() { return sixSelectCss; }
-}, [1, "six-select", {
-    "multiple": [4],
-    "maxTagsVisible": [2, "max-tags-visible"],
-    "disabled": [4],
-    "name": [1],
-    "placeholder": [1],
-    "filterPlaceholder": [1, "filter-placeholder"],
-    "filterDebounce": [2, "filter-debounce"],
-    "size": [1],
-    "hoist": [4],
-    "value": [1025],
-    "pill": [4],
-    "label": [1],
-    "helpText": [1, "help-text"],
-    "errorText": [1, "error-text"],
-    "required": [4],
-    "clearable": [4],
-    "invalid": [1028],
-    "line": [4],
-    "errorOnBlur": [4, "error-on-blur"],
-    "filter": [4],
-    "asyncFilter": [4, "async-filter"],
-    "autocomplete": [4],
-    "inputDebounce": [2, "input-debounce"],
-    "options": [16],
-    "virtualScroll": [4, "virtual-scroll"],
-    "defaultValue": [1, "default-value"],
-    "hasFocus": [32],
-    "hasHelpTextSlot": [32],
-    "hasErrorTextSlot": [32],
-    "hasLabelSlot": [32],
-    "isOpen": [32],
-    "displayLabel": [32],
-    "displayTags": [32],
-    "reportValidity": [64],
-    "checkValidity": [64],
-    "setCustomValidity": [64],
-    "reset": [64]
-  }]);
+    (_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';
+    }
+}
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["six-select", "six-dropdown", "six-icon", "six-icon-button", "six-input", "six-menu", "six-menu-item", "six-tag"];
-  components.forEach(tagName => { switch (tagName) {
-    case "six-select":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SixSelect$1);
-      }
-      break;
-    case "six-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "six-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "six-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "six-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "six-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "six-menu-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "six-tag":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-select", "six-button", "six-checkbox", "six-dropdown", "six-error", "six-icon", "six-icon-button", "six-input", "six-menu", "six-menu-item", "six-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixSelect$1);
+            }
+            break;
+        case "six-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "six-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "six-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "six-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "six-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "six-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "six-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const SixSelect = SixSelect$1;
 const defineCustomElement = defineCustomElement$1;
 
-export { SixSelect, defineCustomElement };
+export { SixSelect, getLanguage as a, defineCustomElement, getErrorMessage as g, languages as l };
 
 //# sourceMappingURL=six-select.js.map