@six-group/ui-library 4.2.2 → 4.2.3

package/dist/collection/components/six-icon-button/six-icon-button.js

@@ -33,11 +33,11 @@ export class SixIconButton {
         }
     }
     render() {
-        const html = this.html && h("span", { key: 'f3ebfe0713af8463ad71597bb39e28744ae8bfb2', innerHTML: this.html });
-        return (h("div", { key: 'ae12d7f62c0028f2fc6f7aa2217bc28fa631fe28', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { key: 'e071ff67b21dada65d30973d10a8849d2bb18dc2', ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
+        const html = this.html && h("span", { key: 'bfb9af923285a1777c5a5d8778e272f20ca40598', innerHTML: this.html });
+        return (h("div", { key: 'a3f095fc9301d35108ce5d63fc441acadbdb0471', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { key: '303ab00da89e28557367f1b4e6593efb2b115388', ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
                 'icon-button': true,
                 'icon-button--disabled': this.disabled,
-            }, type: "button", "aria-label": this.label }, h("six-icon", { key: 'ab6d21f4b6051248cb14bbc008b9190abde705ec', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: '074df89d19a9e64368dd50e419a98f35999d16b8' }), html)));
+            }, type: "button", "aria-label": this.label }, h("six-icon", { key: 'cbc8dfda4a2d1ee148521c30d4694fd83c49fa40', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: 'fda137701d73e4429ccca013e52a08b06bbca748' }), html)));
     }
     static get is() { return "six-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -190,7 +190,7 @@ export class SixInput {
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { key: '5710dd4df8e2833ebcea698d46945d07083a4580', 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.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'b5812726191ae11b8ccac0ac17403299c49348fe', part: "base", class: {
+        return (h(FormControl, { key: 'c814025e7db66cd628c466316a5bd3fe4c3e77bf', 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.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'bad7f2e31ec8465f3292927e9d9fb37aa919cb33', part: "base", class: {
                 input: true,
                 // Sizes
                 'input--small': this.size === 'small',
@@ -204,10 +204,10 @@ export class SixInput {
                 'input--focused': this.hasFocus,
                 'input--empty': this.getValue().length === 0,
                 'input--invalid': this.invalid,
-            } }, h("span", { key: '6068c91f240cbe044f3b4c43c9b2b2c8e4150bf5', part: "prefix", class: "input__prefix" }, h("slot", { key: '36166b5cdb2696d52985c60b7771ebcc943dd750', name: "prefix" })), h("input", { key: '37e14f53d5fc24e14eb93a6522d537722f8c739b', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
+            } }, h("span", { key: 'fa0b1320b4d44794f36047ca65efa9c03d180234', part: "prefix", class: "input__prefix" }, h("slot", { key: '8312c426648c862ef669cb424a219cb85f2b193c', name: "prefix" })), h("input", { key: '87ce5517721681533fc7bcf18d20cb3d1ee7fb6f', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
                 input__control: true,
                 input__control__prefix: hasSlot(this.host, 'prefix'),
-            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: 'f1b2b407390c5f1a00ae30b5853aafc7e2f3738a', part: "suffix", class: "input__suffix" }, h("slot", { key: 'f7844f40590b6cb4f39e49796272fa8de6754767', name: "suffix" })))));
+            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: '5768204290a458c6025f93d7eed7b4762fa8ab94', part: "suffix", class: "input__suffix" }, h("slot", { key: '9f1917c71eeb148d31adf808299ef43c5307678f', name: "suffix" })))));
     }
     static get is() { return "six-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-language-switcher/six-language-switcher.js

@@ -44,7 +44,7 @@ export class SixLanguageSwitcher {
         }
     }
     render() {
-        return (h("div", { key: 'fa72eaaf2cb5c0f327a0924e12779863f348b59c', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
+        return (h("div", { key: '64f80894523a4b03643949135f18b553cd0517b6', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
             const language = typeof lang === 'string' ? lang : lang.key;
             return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value), onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === ' ') {

package/dist/collection/components/six-layout-grid/six-layout-grid.js

@@ -19,7 +19,7 @@ export class SixLayoutGrid {
         this.handleColumnsChange();
     }
     render() {
-        return (h(Host, { key: '9ba9e7ea26b16c5a28677cbc19d7afe38e5a70be' }, h("slot", { key: '62ee116798886fdca9816688f2775421a9ba497c' })));
+        return (h(Host, { key: '84c4fee011655f296908661ae1b10452a5682594' }, h("slot", { key: '389a12ed87de92e7c835df2a77c0f6316406284e' })));
     }
     static get is() { return "six-layout-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-main-container/six-main-container.js

@@ -14,7 +14,7 @@ export class SixMainContainer {
         this.padded = true;
     }
     render() {
-        return (h(Host, { key: '712a383a9bcc05a7046f1707951bb917796152d9' }, h("div", { key: '3694372cdbbbce9a01a179df7f2aab5d4b1555cf', part: "left-margin", class: "left-margin" }), h("div", { key: 'd1f5e603395c3cda9c90a9083be928ebff69d41c', part: "content", class: { content: true, 'content--padded': this.padded } }, h("slot", { key: '8fd9dfaf4a636df3c273998202c2cbf6c05dbd13' })), h("div", { key: '809c6e83655dbdcbeda840d1f512f66748363719', part: "right-margin", class: "right-margin" })));
+        return (h(Host, { key: '4bf03e808f3abace9917558e8a2bc284b5109fba' }, h("div", { key: '3eb055ccdcb16738f697d4d7417bdd0cedf05a5f', part: "left-margin", class: "left-margin" }), h("div", { key: '66c3c641294c52966bbb35156956e457af76a3af', part: "content", class: { content: true, 'content--padded': this.padded } }, h("slot", { key: '9dcca3e96ab1023109b9e3db5d16ec8a2d117119' })), h("div", { key: '739f4ed3956e096103d59a475f3e0611a0ea4e73', part: "right-margin", class: "right-margin" })));
     }
     static get is() { return "six-main-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-menu-divider/six-menu-divider.js

@@ -9,7 +9,7 @@ import { h } from "@stencil/core";
  */
 export class SixMenuDivider {
     render() {
-        return h("div", { key: 'ae890203093a071811e37e77637b68c2b858c202', part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
+        return h("div", { key: '41a61bd4110bfb44f10211c350afcebe5c5971df', part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
     }
     static get is() { return "six-menu-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-menu-item/six-menu-item.js

@@ -63,13 +63,13 @@ export class SixMenuItem {
         this.hasFocus = false;
     }
     render() {
-        return (h("div", { key: 'a91c841a6fac9e807f623cd337d9902a6ee98aaa', ref: (el) => (this.menuItem = el), part: "base", class: {
+        return (h("div", { key: 'd8c10ca0fc9bd795b87790337f2cc0c792999685', ref: (el) => (this.menuItem = el), part: "base", class: {
                 'menu-item': true,
                 'menu-item--checked': this.checked,
                 'menu-item--disabled': this.disabled,
                 'menu-item--focused': this.hasFocus,
                 'menu-item--active': this.active,
-            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { class: "menu-item__checkbox" }, h("six-checkbox", { "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '5d4fa9c6c86e1506703cdbe0d295e753ba251302', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: '619b262517cddb822a90e7251ce720c8bee09bb9', name: "prefix" })), h("span", { key: '94c554dec6b00e361f84ab42f27c06c94908f9e7', part: "label", class: "menu-item__label" }, h("slot", { key: '5e0dded9fd06cd4b1bf3cad28025f97da055326b', ref: (el) => (this.defaultSlot = el) })), h("span", { key: 'bd328a4e14592019cc68fc12ef66c9e2561f561f', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: '7a46bc384827392a4bc55e424d926de1f8d36766', name: "suffix" })), this.checkType === 'check' && (h("span", { part: "checked-icon", class: "menu-item__check" }, h("six-icon", { size: "small", "aria-hidden": "true" }, "check")))));
+            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { class: "menu-item__checkbox" }, h("six-checkbox", { "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '470f2fee47a4120c0dead3b7996220af9e5274d1', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: 'fdddb68cb266d02f6a6a2b46ffcdecb1d8eb32db', name: "prefix" })), h("span", { key: '6d9fe694ce0e07f2aac3604b905f9194f4764057', part: "label", class: "menu-item__label" }, h("slot", { key: 'ef2903a04191f78955802da5edefd32583305068', ref: (el) => (this.defaultSlot = el) })), h("span", { key: 'd4f6ee6c2789c33deaf08eb585ec7ca283b59170', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: '39a1d59be3d1f9deda4c55b1575a72c647600783', name: "suffix" })), this.checkType === 'check' && (h("span", { part: "checked-icon", class: "menu-item__check" }, h("six-icon", { size: "small", "aria-hidden": "true" }, "check")))));
     }
     static get is() { return "six-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-menu-label/six-menu-label.js

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class SixMenuLabel {
     render() {
-        return (h("div", { key: 'c6c5d6cccd54d6fbdbdf2a561165fbb22547976e', part: "base", class: "menu-label" }, h("slot", { key: '33bf6b17abe001e11677c5fbae1573dcd84280f1' })));
+        return (h("div", { key: '5183d165a877bd2ca0c25d4ff61d55200b66132d', part: "base", class: "menu-label" }, h("slot", { key: '5adecf55a82a78de5eee401aeec442f7e60e0874' })));
     }
     static get is() { return "six-menu-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class SixPicto {
     render() {
         var _a;
         const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
-        return (h(Host, { key: '2aa8212ff4ea5c7ed283f8d96ebf9699ab528007' }, h("div", { key: '451ab5a15cb33b9e5569cded07dacfc03833a830', part: "icon", class: {
+        return (h(Host, { key: 'adec8f35b8501390c0831495ea9f915f6616aa04' }, h("div", { key: '92bcee923694c027ed93554d4d93924b58803b82', part: "icon", class: {
                 [`is-size-${this.size}`]: typeof this.size != null || this.size.trim() !== '',
                 [`${iconName}`]: true,
             } })));

package/dist/collection/components/six-progress-bar/six-progress-bar.js

@@ -17,10 +17,10 @@ export class SixProgressBar {
         this.indeterminate = false;
     }
     render() {
-        return (h("div", { key: '4833889d1cb6d61a5b8263bf3349ec55b0d3138b', part: "base", class: {
+        return (h("div", { key: '5361da7a78cfcaa6375e078da88209dcd725d832', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: '0e0bfb16e106f8bdf669e84df7ee1cf846a735e2', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: 'a3dea20c3afea5be2c6c02adf9e6f98cdb038cbb', part: "indicator", class: "progress-bar__indicator", style: {
                 width: `${this.percentage}%`,
             } }, !this.indeterminate && (h("span", { part: "label", class: "progress-bar__label" }, h("slot", null))))));
     }

package/dist/collection/components/six-progress-ring/six-progress-ring.js

@@ -33,7 +33,7 @@ export class SixProgressRing {
         this.indicator.style.strokeDashoffset = `${offset}`;
     }
     render() {
-        return (h("div", { key: 'fcfdeaf3f113028f9368d6c26323ed3680daf1dc', part: "base", class: "progress-ring" }, h("svg", { key: '55048e767285e998ed5bf34ada821abc7d3eae58', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '63f9d87a8d310c1ea3dd40801eeb3232c0b4bb3d', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: '34a46dadccdb2498bff8196a232570a761d6a468', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: '55077cbe1488ae88aa86e06c97ae4948f7d5726a', part: "label", class: "progress-ring__label" }, h("slot", { key: '3e43561a4838f5f34f7196d713c2d6ddd4688965' }))));
+        return (h("div", { key: 'e502ccf39d3b246d03122b446949ee8380e1a2fa', part: "base", class: "progress-ring" }, h("svg", { key: 'd37581863e5a67e9f8a9cd058954581ee7e86a4a', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '022eeb124e217d93479cf7ead2cabb9169b9afd4', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: 'bc0fbfc9f1c872243ae2169d6412db47fb554e19', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: '9320211edc9c0b9b24124ffc7ffdac9d6d2f86a7', part: "label", class: "progress-ring__label" }, h("slot", { key: 'e7c3ce7e12a7691e461b73e6cbd2912dde27ac75' }))));
     }
     static get is() { return "six-progress-ring"; }
     static get encapsulation() { return "shadow"; }

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

@@ -103,12 +103,12 @@ export class SixRadio {
         return this.getAllRadios().filter((radio) => radio !== this.host);
     }
     render() {
-        return (h("label", { key: '13c5201fe152b2bc57a679422219af5ae19a46a9', part: "base", class: {
+        return (h("label", { key: '11d5d7c460cf62b2fc73435137998c3b424ab58f', part: "base", class: {
                 radio: true,
                 'radio--checked': this.checked,
                 'radio--disabled': this.disabled,
                 'radio--focused': this.hasFocus,
-            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: 'd32606e4ac318f0de1afb0234d2dfc7dd00546ec', part: "control", class: "radio__control" }, h("span", { key: 'd12e68de71d9e49dc4b68813dc036ffa4e06fc96', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'b942c5b3f4c817484ce4a615913a4a9c01675562', viewBox: "0 0 16 16" }, h("g", { key: '316ed8598111b40d906c0b44ab7e4bfd2bf5cd1c', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '58a1547753ea79b7de3b4b90eeedfeb40ad7b6d6', fill: "currentColor" }, h("circle", { key: 'd225f3a06fdbb23a84eae34a6ba1b9184f55e627', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '8e3adc0aaba86098d423c5a7f484a20fe0b2a0cd', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'b72458bbd8e5ca7a8109a5e85b1b5699a843d097', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '87652971c02c9aa7187a0f266283d9a475946f78' }))));
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: 'e6ca5e0308ed109262b995b9831f32f5c5829cbc', part: "control", class: "radio__control" }, h("span", { key: 'c201309a8ef4def676aa48cf9dd66b94da28db10', part: "checked-icon", class: "radio__icon" }, h("svg", { key: '0e003d8db64fb73c54e95fffb9005d434d2b114e', viewBox: "0 0 16 16" }, h("g", { key: '374a33afe42003445cb91630754007f7057ff755', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '2b85fcbdf694e18c9234819a0a20ffd793be0102', fill: "currentColor" }, h("circle", { key: '45842bd37b3dcea164b972c9ff6e461fc866536d', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '924cbd7890627bbf79201b68a989f894e26d9579', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'f00e3fbac022d2be55117448df3e8ff908dd4cd5', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '0fa728701561580e0d06f0568a001d1d234ed867' }))));
     }
     static get is() { return "six-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -188,7 +188,7 @@ export class SixRange {
         }
     }
     render() {
-        return (h(FormControl, { key: '4bd9c413aa318930b38a57e8f76906b5c25c0961', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '2a5cd3d1b1bcc77813aacc5eb2971a5ef0e27e0f', part: "base", class: {
+        return (h(FormControl, { key: 'cf23b46a8ca2596e962810d3528163ab9add32c3', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '370f20143ac3c9325b7cc99ceb3c3a6720a50b1c', part: "base", class: {
                 range: true,
                 // States
                 'range--disabled': this.disabled,
@@ -196,7 +196,7 @@ export class SixRange {
                 'range--tooltip-visible': this.hasTooltip,
                 'range--tooltip-top': this.tooltip === 'top',
                 'range--tooltip-bottom': this.tooltip === 'bottom',
-            }, onTouchStart: this.handleTouchStart }, h("input", { key: '448a9d9d41e466a09c4e00d9229b2971e99190b5', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+            }, onTouchStart: this.handleTouchStart }, h("input", { key: '74380f56888930992b753f905cd6e9256c24d106', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
     }
     static get is() { return "six-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class SixRoot {
         this.version = '';
     }
     render() {
-        return (h("host", { key: 'd004ad641b82d656ccbb7b788a04d8befab64b47', class: "six-root" }, h("header", { key: 'cce9488ed3c0778120fb1c0ce040a74b8c3b18d6', part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { key: 'b5810a66f91e003d83ee9196e0c955b52773794a', name: "header" })), h("nav", { key: '8d7aa97373ddb660d7a6e5ab1b860736726b9ee7', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'ab612b588dedf3e3098cd6f423078ef2fdc83bed', name: "left-sidebar" })), h("main", { key: '2c6e91c192a5346302d6d0be19a4e43d190cf5d4', part: "main" }, h("div", { key: 'bb52732ddf5462b1d536444f0f584fa48ba5ee55', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '23db6d1c2426497e40e91ef7d7898f37e1977465', name: "main" })), h("div", { key: 'f083d6d754ff7a502efe8f20663a423075f85e9f', class: "six-root__footer" }, h("slot", { key: 'd902e6b083181958e12f8f808b2dc98e2bb99dfd', name: "footer" }))), h("nav", { key: '05b158597d15d8536e8eb8ccc66f0ff971ebdc92', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '3a9168dbd5039344e948c22c822ca7f65648cb1f', name: "right-sidebar" }))));
+        return (h("host", { key: 'f4b3cb516ce1b70a834903c00a56ca7edf5364dc', class: "six-root" }, h("header", { key: '88ec66c2af58e55621563f600cb8c1589467218c', part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { key: '072a0e92b9203149a9823fdf83aa45b39494559f', name: "header" })), h("nav", { key: '58d18ca9b9ebf9db5981b3c82cce657f73ef5f13', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: '62643ef967da9d303380b4d4d26ec5e026a86ac3', name: "left-sidebar" })), h("main", { key: '0b059f2814c4485dd03a3a166529d78999baa699', part: "main" }, h("div", { key: '74ce003ff9d45945b9bdc43b170c99300856544b', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '5ea05c471c96fd47cf27749accd1c551f16d69d2', name: "main" })), h("div", { key: '5dd7796754df4238f61f1ee8cc3cee9589f1f40f', class: "six-root__footer" }, h("slot", { key: '5c4036b9fb4d36f69b617a2e6ee7fce62c80fa08', name: "footer" }))), h("nav", { key: '36c76008c9dc36b7fef9f8a6a79e6508d1764ede', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '66cdae8a60d251063e4c8a710a36d0be07dedf0e', name: "right-sidebar" }))));
     }
     static get is() { return "six-root"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-search-field/six-search-field.js

@@ -42,7 +42,7 @@ export class SixSearchField {
         this.eventListeners.removeAll();
     }
     render() {
-        return (h("div", { key: '3083fe949be687f4540c7ee0115d9befc4faa90d', class: "search-box" }, h("six-input", { key: 'addaf6279a2473b3c44d2284c11a4e822c0883fe', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: 'd6953c6b87cbf8f6ed1fb1625aa510857ccfb421', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: 'd7f0a5e0974d5e0cbe8b0e120999804be0299aef' })));
+        return (h("div", { key: 'f1a0e877abffb212e7876237a294256446ce9414', class: "search-box" }, h("six-input", { key: '371999a3d7a5063f1b29494763444bdb20317146', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: '8c9c517d8f6bbf45beae6c5af88a5b17967401b5', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: 'f45bb3a2c075675f2216a17e2c28329196685f2e' })));
     }
     static get is() { return "six-search-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,6 +4,7 @@ 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
@@ -138,12 +139,12 @@ export class SixSelect {
                 return;
             }
             this.activeItemIndex = -1;
-            // reset display style of main items
-            const mainItems = this.getItems();
-            mainItems.forEach((item) => (item.style.display = 'unset'));
-            // show selected menu items in the selection container and hide them in the main container
-            const checkedItems = getCheckedItems(this.getValueAsArray(), mainItems);
             if (!this.virtualScroll && this.multiple) {
+                // 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) => {
@@ -163,6 +164,9 @@ export class SixSelect {
         };
         this.handleMenuHide = () => {
             this.isOpen = false;
+            if (this.multiple) {
+                this.handleBlur();
+            }
         };
         this.handleSlotChange = () => {
             this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
@@ -215,17 +219,13 @@ export class SixSelect {
         this.handleSlotChange();
     }
     handleMultipleChange() {
-        // Cast to array | string based on `this.multiple`
-        const value = this.getValueAsArray();
-        this.value = this.multiple ? value : value[0] || '';
+        this.value = convertToValidValue(this.value, this.multiple);
         this.syncItemsFromValue();
     }
     async handleValueChange() {
-        if (this.multiple && !Array.isArray(this.value)) {
-            this.value = [];
-        }
-        if (!this.multiple && typeof this.value !== 'string') {
-            this.value = '';
+        const newValue = convertToValidValue(this.value, this.multiple);
+        if (!valueEquals(this.value, newValue)) {
+            this.value = newValue;
         }
         await this.syncItemsFromValue();
     }
@@ -236,10 +236,8 @@ export class SixSelect {
         this.init();
     }
     componentWillLoad() {
+        this.value = convertToValidValue(this.value, this.multiple);
         this.handleSlotChange();
-        if (this.multiple && this.value != null) {
-            this.value = this.getValueAsArray();
-        }
     }
     componentDidLoad() {
         this.init();
@@ -303,11 +301,6 @@ export class SixSelect {
         var _a;
         return [...(((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('six-menu-item')) || [])];
     }
-    getValueAsArray() {
-        const values = Array.isArray(this.value) ? this.value : this.value === '' ? [] : [this.value];
-        // enforce that the values are converted to 'string' before the value is compared
-        return values.map(String);
-    }
     async clearValues() {
         this.value = this.multiple ? [] : '';
         this.selectionContainerItems = [];
@@ -327,7 +320,7 @@ export class SixSelect {
     async syncItemsFromValue() {
         const selectionContainerItems = this.getSelectionContainerItems();
         const mainItems = this.getItems();
-        const value = this.getValueAsArray();
+        const value = convertToValidValue(this.value, this.multiple);
         selectionContainerItems.forEach((item) => {
             item.checkType = this.multiple ? 'checkbox' : 'check';
             item.checked = value.includes(item.value);
@@ -336,7 +329,7 @@ export class SixSelect {
             item.checkType = this.multiple ? 'checkbox' : 'check';
             item.checked = value.includes(item.value);
         });
-        const checkedItems = getCheckedItems(this.getValueAsArray(), mainItems);
+        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;
@@ -405,7 +398,7 @@ export class SixSelect {
             showClear = true;
             showExpand = false;
         }
-        return (h(FormControl, { key: 'cf4bbc5c8bdb3bd395b3223065ef7175f12fc750', 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: '5de198b2fc9ab517f9e6682394d881328f4da383', part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+        return (h(FormControl, { key: 'b7ae7bf52ea2e0c9bbcee7fafa6f4c984faa6a5c', 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: 'ab5c2ba221fb131e5d3b5bde5428b740efe1152d', 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,
@@ -420,20 +413,20 @@ export class SixSelect {
                 '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: '731e50e52df65db450e852209b091698d024d533', slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
+            }, 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: '86bfec3b39366c0cdee5dabe247994a6e5a82358', 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: '4623418e42ad9d69891c582b7e88e2686b27eaa1', 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: '1c53a3b59a3f09c6707709c36afdcd62e90de43a', ref: (el) => (this.autocompleteInput = el), class: {
+            }, 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: 'a409cae3b24f8cee672aa52c2ba6e999daf8fb6f', 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: '31f65017c3013e4e37599a775d5f1ddd63026727', 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: '65f3a8a73dd645a1098afc2b92104336b16fb80f', class: {
+            }, "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: 'bd1dc5e94cf30bf60a8fbebb9e40c2d131b71a24', class: {
                 'selection-container': true,
                 'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
-            } }, this.selectionContainerItems), h("six-menu", { key: '80ac8179cb1fd6bbccd9525254511dde6908af5f', ref: (el) => (this.menu = el), part: "menu", class: {
+            } }, this.selectionContainerItems), h("six-menu", { key: 'eb308eb703bbf083d81fbd8c9a6efffbd8cad0dc', 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: '72f6447ad3dc14df92cf42b4a7b0984e970759c7', 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))))));
+            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: 'be4c952494c2ed01557024f59f8fa71fbfdcdff8', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { class: "select-all", slot: "dropdown-footer" }, h("six-button", { type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';