npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.8359b17 → 0.0.0-insider.8db54cb - Mend

@six-group/ui-library 0.0.0-insider.8359b17 → 0.0.0-insider.8db54cb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (388) hide show

package/dist/components/six-input2.js CHANGED Viewed

@@ -178,7 +178,7 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
         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',
@@ -192,10 +192,10 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
                 '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" })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-language-switcher.js CHANGED Viewed

@@ -45,7 +45,7 @@ const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguage
         }
     }
     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/components/six-layout-grid.js CHANGED Viewed

@@ -20,7 +20,7 @@ const SixLayoutGrid$1 = /*@__PURE__*/ proxyCustomElement(class SixLayoutGrid ext
         this.handleColumnsChange();
     }
     render() {
-        return (h(Host, { key: '9ba9e7ea26b16c5a28677cbc19d7afe38e5a70be' }, h("slot", { key: '62ee116798886fdca9816688f2775421a9ba497c' })));
+        return (h(Host, { key: '84c4fee011655f296908661ae1b10452a5682594' }, h("slot", { key: '389a12ed87de92e7c835df2a77c0f6316406284e' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-main-container.js CHANGED Viewed

@@ -11,7 +11,7 @@ const SixMainContainer$1 = /*@__PURE__*/ proxyCustomElement(class SixMainContain
         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" })));
     }
     get host() { return this; }
     static get style() { return SixMainContainerStyle0; }

package/dist/components/six-menu-divider.js CHANGED Viewed

@@ -10,7 +10,7 @@ const SixMenuDivider$1 = /*@__PURE__*/ proxyCustomElement(class SixMenuDivider e
         this.__attachShadow();
     }
     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 style() { return SixMenuDividerStyle0; }
 }, [1, "six-menu-divider"]);

package/dist/components/six-menu-item2.js CHANGED Viewed

@@ -57,13 +57,13 @@ const SixMenuItem = /*@__PURE__*/ proxyCustomElement(class SixMenuItem extends H
         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")))));
     }
     get host() { return this; }
     static get style() { return SixMenuItemStyle0; }

package/dist/components/six-menu-label.js CHANGED Viewed

@@ -10,7 +10,7 @@ const SixMenuLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixMenuLabel exten
         this.__attachShadow();
     }
     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 style() { return SixMenuLabelStyle0; }
 }, [1, "six-menu-label"]);

package/dist/components/six-menu2.js CHANGED Viewed

@@ -14,6 +14,7 @@ const isFocusedMenuItem = (menuItem) => { var _a, _b, _c; return (_c = (_b = (_a
 const isSIXMenuItemElement = (el) => (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'six-menu-item';
 const mapToMenuItem = ({ value, label }) => (h("six-menu-item", { key: value, value: value }, label));
 const DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;
+const DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING = 48;
 const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
 const SixMenu = /*@__PURE__*/ proxyCustomElement(class SixMenu extends HTMLElement {
     constructor() {
@@ -37,7 +38,9 @@ const SixMenu = /*@__PURE__*/ proxyCustomElement(class SixMenu extends HTMLEleme
         this.scrollingDebounce = 15;
         this.disableKeyboardHandling = false;
         this.scrollingIndex = 0;
-        this.sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;
+        this.sixMenuItemHeight = this.virtualScroll
+            ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING
+            : DEFAULT_SIX_MENU_ITEM_HEIGHT;
     }
     connectedCallback() {
         this.handleClick = this.handleClick.bind(this);
@@ -218,10 +221,10 @@ const SixMenu = /*@__PURE__*/ proxyCustomElement(class SixMenu extends HTMLEleme
             .map(({ value, label }) => (h("six-menu-item", { checkType: "check", key: value, value: value }, label)));
     }
     render() {
-        return (h("div", { key: 'a8806ec6aee657eb677931fc1ba1405caec3e96e', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
+        return (h("div", { key: 'a58563fa250a4823ddaac76fbd2fcf52b45d489e', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
                 menu: true,
                 '.no-shadow': this.removeBoxShadow,
-            } }, h("div", { key: '34b85eb38385f88e87f49a6689cf6ad082723a87', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", { key: 'a62dcc8bd5d97a8d479f4a4270aedcb77b729aea' }), this.renderItems()), this.virtualScroll && h("div", { style: this.getScrollbarGhostStyle() })));
+            } }, h("div", { key: 'a23a144fd5f0912c56b518ed43d16b871b85698e', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", { key: 'b76e00f3b452c0202f18e966a52a43fc7844131e' }), this.renderItems()), this.virtualScroll && h("div", { style: this.getScrollbarGhostStyle() })));
     }
     get host() { return this; }
     static get style() { return SixMenuStyle0; }

package/dist/components/six-menu2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-menu2.js","mappings":"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","names":[],"sources":["src/components/six-menu/six-menu.scss?tag=six-menu&encapsulation=shadow","src/components/six-menu/six-menu.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.menu {\n padding: var(--six-spacing-xx-small) 0;\n border: none;\n box-shadow: var(--six-shadow-small);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.menu:focus {\n outline: none;\n}\n\n.no-shadow {\n box-shadow: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n label: string;\n value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }: SixMenuItemData) => (\n <six-menu-item key={value} value={value}>\n {label}\n </six-menu-item>\n);\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\n\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The menu's content, including menu items, menu dividers, and menu labels.\n \n @part base - The component's base wrapper.\n /\n@Component({\n tag: 'six-menu',\n styleUrl: 'six-menu.scss',\n shadow: true,\n})\nexport class SixMenu {\n private readonly eventListeners = new EventListeners();\n\n private menu?: HTMLElement;\n private menuWrapper?: HTMLElement;\n private typeToSelectString = '';\n private typeToSelectTimeout?: number;\n\n @Element() host!: HTMLSixMenuElement;\n\n /* Emitted when a menu item is selected. /\n @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected!: EventEmitter<SixMenuItemSelectedPayload>;\n\n /* Set to true to remove the box-shadow /\n @Prop() removeBoxShadow = false;\n\n /* Set the options to be shown in the dropdown /\n @Prop() items: SixMenuItemData[] \| null = null;\n\n /* Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown /\n @Prop() itemsShown?: number;\n\n /* Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n * are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. /\n @Prop() virtualScroll = false;\n\n /\n Used for virtual scrolling\n * Define how many items should be rendered in the DOM when using virtual scrolling\n /\n @Prop() itemSize = 10;\n\n /\n Used for virtual scrolling\n * Define the debounce for listening on scrolling changes in milliseconds.\n * The lower the number the more sensitive the component reacts to scrolling changes.\n /\n @Prop() scrollingDebounce = 15;\n\n /\n Internal: Disables handling of key presses.\n /\n @Prop() disableKeyboardHandling = false;\n\n /\n Used to calculate which items should be rendered in the DOM\n /\n @State()\n private scrollingIndex = 0;\n\n // set a default item height, this variable will be updated with the real value after the first render.\n // However, it's necessary to have a default value because we can only fetch the proper height after the first render\n @State()\n sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n connectedCallback() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n componentWillLoad() {\n if (this.items === null) {\n return;\n }\n }\n\n private handleScrolling = () => {\n if (this.menuWrapper == null) return;\n // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n };\n\n componentDidLoad() {\n this.setupForVirtualScrollingAfterRendering();\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /\n Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n * enabling type-to-select when the menu doesn't have focus.\n /\n @Method()\n async typeToSelect(key: string) {\n clearTimeout(this.typeToSelectTimeout);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n this.typeToSelectString += key.toLowerCase();\n const items = this.getItems();\n for (const item of items) {\n const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n const label = getTextContent(slot).toLowerCase().trim();\n if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n item.setFocus();\n break;\n }\n }\n }\n\n private getItemsShown(): number {\n const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;\n return this.itemsShown ?? defaultItemsShown;\n }\n\n private setupForVirtualScrollingAfterRendering() {\n if (!this.virtualScroll \|\| this.menuWrapper == null) return;\n\n this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n // set menu height to proper height once the item is rendered.\n const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n if (menuItemHeight != null && menuItemHeight > 0) {\n this.sixMenuItemHeight = menuItemHeight;\n }\n }\n\n private getItems(): HTMLSixMenuItemElement[] {\n if (this.menu == null) return [];\n\n if (this.items != null) {\n return this.items.map(mapToMenuItem);\n }\n\n const slot = this.menu.querySelector('slot');\n if (slot == null) return [];\n return [...slot.assignedElements({ flatten: true })].filter(\n (el): el is HTMLSixMenuItemElement => isSIXMenuItemElement(el) && !el.disabled\n );\n }\n\n private getActiveItemIndex() {\n const items = this.getItems();\n const selectedItem = this.getActiveItem();\n if (selectedItem != null) {\n const itemIndex = items.indexOf(selectedItem);\n if (itemIndex > -1) {\n return itemIndex;\n }\n }\n const sixMenuItems = this.extractItemsFromDOM();\n return sixMenuItems.findIndex(isFocusedMenuItem);\n }\n\n private getActiveItem(): HTMLSixMenuItemElement \| undefined {\n const activeElement = this.getItems().find((i) => i === document.activeElement);\n if (activeElement != null) {\n return activeElement;\n }\n return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n }\n\n private extractItemsFromDOM() {\n return Array.from(this.host.shadowRoot?.querySelectorAll('six-menu-item') ?? []);\n }\n\n private setActiveItem(item: HTMLSixMenuItemElement) {\n item?.setFocus();\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const clickedItem = target.closest('six-menu-item');\n if (clickedItem && !clickedItem.disabled) {\n this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (this.disableKeyboardHandling) {\n return;\n }\n\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const activeItem = this.getActiveItem();\n event.preventDefault();\n\n if (activeItem != null) {\n this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n }\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n let indexOfActiveItem = this.getActiveItemIndex();\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n indexOfActiveItem++;\n } else if (event.key === 'ArrowUp') {\n indexOfActiveItem--;\n } else if (event.key === 'Home') {\n indexOfActiveItem = 0;\n } else if (event.key === 'End') {\n indexOfActiveItem = items.length - 1;\n }\n\n if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n this.setActiveItem(items[indexOfActiveItem]);\n\n return;\n }\n }\n\n void this.typeToSelect(event.key);\n }\n\n private getMenuWrapperStyle() {\n const styles: Partial<StyleDeclaration> = {};\n if (this.getItemsShown() > 0) {\n // calculate the proper height to show the correct number of items\n styles.height = `${(this.getItemsShown() ?? 0) this.sixMenuItemHeight}px`;\n }\n return {\n ...styles,\n };\n }\n\n private getMenuContainerStyle() {\n const styles: Partial<StyleDeclaration> = {};\n\n if (this.virtualScroll) {\n // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n }\n\n return {\n ...styles,\n };\n }\n\n private getScrollbarGhostStyle() {\n const styles: Partial<StyleDeclaration> = {};\n\n if (this.virtualScroll && this.items !== null) {\n styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n }\n\n return {\n ...styles,\n };\n }\n\n private renderItems() {\n if (this.items === undefined \|\| this.items === null) {\n return;\n }\n\n if (!this.virtualScroll) {\n return this.items.map(mapToMenuItem);\n }\n\n return this.items\n .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n .map(({ value, label }: SixMenuItemData) => (\n <six-menu-item checkType=\"check\" key={value} value={value}>\n {label}\n </six-menu-item>\n ));\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.menuWrapper = el)}\n style={this.getMenuWrapperStyle()}\n part=\"wrapper\"\n class={{\n menu: true,\n '.no-shadow': this.removeBoxShadow,\n }}\n >\n <div\n ref={(el) => (this.menu = el)}\n part=\"base\"\n role=\"menu\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n tabIndex={0}\n style={this.getMenuContainerStyle()}\n >\n <slot />\n {this.renderItems()}\n </div>\n {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-menu2.js","mappings":"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","names":[],"sources":["src/components/six-menu/six-menu.scss?tag=six-menu&encapsulation=shadow","src/components/six-menu/six-menu.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.menu {\n padding: var(--six-spacing-xx-small) 0;\n border: none;\n box-shadow: var(--six-shadow-small);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.menu:focus {\n outline: none;\n}\n\n.no-shadow {\n box-shadow: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n label: string;\n value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }: SixMenuItemData) => (\n <six-menu-item key={value} value={value}>\n {label}\n </six-menu-item>\n);\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING = 48;\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The menu's content, including menu items, menu dividers, and menu labels.\n \n @part base - The component's base wrapper.\n /\n@Component({\n tag: 'six-menu',\n styleUrl: 'six-menu.scss',\n shadow: true,\n})\nexport class SixMenu {\n private readonly eventListeners = new EventListeners();\n\n private menu?: HTMLElement;\n private menuWrapper?: HTMLElement;\n private typeToSelectString = '';\n private typeToSelectTimeout?: number;\n\n @Element() host!: HTMLSixMenuElement;\n\n /* Emitted when a menu item is selected. /\n @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected!: EventEmitter<SixMenuItemSelectedPayload>;\n\n /* Set to true to remove the box-shadow /\n @Prop() removeBoxShadow = false;\n\n /* Set the options to be shown in the dropdown /\n @Prop() items: SixMenuItemData[] \| null = null;\n\n /* Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown /\n @Prop() itemsShown?: number;\n\n /* Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n * are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. /\n @Prop() virtualScroll = false;\n\n /\n Used for virtual scrolling\n * Define how many items should be rendered in the DOM when using virtual scrolling\n /\n @Prop() itemSize = 10;\n\n /\n Used for virtual scrolling\n * Define the debounce for listening on scrolling changes in milliseconds.\n * The lower the number the more sensitive the component reacts to scrolling changes.\n /\n @Prop() scrollingDebounce = 15;\n\n /\n Internal: Disables handling of key presses.\n /\n @Prop() disableKeyboardHandling = false;\n\n /\n Used to calculate which items should be rendered in the DOM\n /\n @State()\n private scrollingIndex = 0;\n\n // set a default item height, this variable will be updated with the real value after the first render.\n // However, it's necessary to have a default value because we can only fetch the proper height after the first render\n @State()\n private sixMenuItemHeight = this.virtualScroll\n ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING\n : DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n connectedCallback() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n componentWillLoad() {\n if (this.items === null) {\n return;\n }\n }\n\n private handleScrolling = () => {\n if (this.menuWrapper == null) return;\n // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n };\n\n componentDidLoad() {\n this.setupForVirtualScrollingAfterRendering();\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /\n Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n * enabling type-to-select when the menu doesn't have focus.\n /\n @Method()\n async typeToSelect(key: string) {\n clearTimeout(this.typeToSelectTimeout);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n this.typeToSelectString += key.toLowerCase();\n const items = this.getItems();\n for (const item of items) {\n const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n const label = getTextContent(slot).toLowerCase().trim();\n if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n item.setFocus();\n break;\n }\n }\n }\n\n private getItemsShown(): number {\n const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;\n return this.itemsShown ?? defaultItemsShown;\n }\n\n private setupForVirtualScrollingAfterRendering() {\n if (!this.virtualScroll \|\| this.menuWrapper == null) return;\n\n this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n // set menu height to proper height once the item is rendered.\n const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n if (menuItemHeight != null && menuItemHeight > 0) {\n this.sixMenuItemHeight = menuItemHeight;\n }\n }\n\n private getItems(): HTMLSixMenuItemElement[] {\n if (this.menu == null) return [];\n\n if (this.items != null) {\n return this.items.map(mapToMenuItem);\n }\n\n const slot = this.menu.querySelector('slot');\n if (slot == null) return [];\n return [...slot.assignedElements({ flatten: true })].filter(\n (el): el is HTMLSixMenuItemElement => isSIXMenuItemElement(el) && !el.disabled\n );\n }\n\n private getActiveItemIndex() {\n const items = this.getItems();\n const selectedItem = this.getActiveItem();\n if (selectedItem != null) {\n const itemIndex = items.indexOf(selectedItem);\n if (itemIndex > -1) {\n return itemIndex;\n }\n }\n const sixMenuItems = this.extractItemsFromDOM();\n return sixMenuItems.findIndex(isFocusedMenuItem);\n }\n\n private getActiveItem(): HTMLSixMenuItemElement \| undefined {\n const activeElement = this.getItems().find((i) => i === document.activeElement);\n if (activeElement != null) {\n return activeElement;\n }\n return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n }\n\n private extractItemsFromDOM() {\n return Array.from(this.host.shadowRoot?.querySelectorAll('six-menu-item') ?? []);\n }\n\n private setActiveItem(item: HTMLSixMenuItemElement) {\n item?.setFocus();\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const clickedItem = target.closest('six-menu-item');\n if (clickedItem && !clickedItem.disabled) {\n this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (this.disableKeyboardHandling) {\n return;\n }\n\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const activeItem = this.getActiveItem();\n event.preventDefault();\n\n if (activeItem != null) {\n this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n }\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n let indexOfActiveItem = this.getActiveItemIndex();\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n indexOfActiveItem++;\n } else if (event.key === 'ArrowUp') {\n indexOfActiveItem--;\n } else if (event.key === 'Home') {\n indexOfActiveItem = 0;\n } else if (event.key === 'End') {\n indexOfActiveItem = items.length - 1;\n }\n\n if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n this.setActiveItem(items[indexOfActiveItem]);\n\n return;\n }\n }\n\n void this.typeToSelect(event.key);\n }\n\n private getMenuWrapperStyle() {\n const styles: Partial<StyleDeclaration> = {};\n if (this.getItemsShown() > 0) {\n // calculate the proper height to show the correct number of items\n styles.height = `${(this.getItemsShown() ?? 0) this.sixMenuItemHeight}px`;\n }\n return {\n ...styles,\n };\n }\n\n private getMenuContainerStyle() {\n const styles: Partial<StyleDeclaration> = {};\n\n if (this.virtualScroll) {\n // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n }\n\n return {\n ...styles,\n };\n }\n\n private getScrollbarGhostStyle() {\n const styles: Partial<StyleDeclaration> = {};\n\n if (this.virtualScroll && this.items !== null) {\n styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n }\n\n return {\n ...styles,\n };\n }\n\n private renderItems() {\n if (this.items === undefined \|\| this.items === null) {\n return;\n }\n\n if (!this.virtualScroll) {\n return this.items.map(mapToMenuItem);\n }\n\n return this.items\n .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n .map(({ value, label }: SixMenuItemData) => (\n <six-menu-item checkType=\"check\" key={value} value={value}>\n {label}\n </six-menu-item>\n ));\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.menuWrapper = el)}\n style={this.getMenuWrapperStyle()}\n part=\"wrapper\"\n class={{\n menu: true,\n '.no-shadow': this.removeBoxShadow,\n }}\n >\n <div\n ref={(el) => (this.menu = el)}\n part=\"base\"\n role=\"menu\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n tabIndex={0}\n style={this.getMenuContainerStyle()}\n >\n <slot />\n {this.renderItems()}\n </div>\n {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/six-picto2.js CHANGED Viewed

@@ -13,7 +13,7 @@ const SixPicto = /*@__PURE__*/ proxyCustomElement(class SixPicto extends HTMLEle
     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/components/six-progress-bar.js CHANGED Viewed

@@ -12,10 +12,10 @@ const SixProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressBar e
         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/components/six-progress-ring.js CHANGED Viewed

@@ -29,7 +29,7 @@ const SixProgressRing$1 = /*@__PURE__*/ proxyCustomElement(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 watchers() { return {
         "percentage": ["handlePercentageChange"]

package/dist/components/six-radio.js CHANGED Viewed

@@ -100,12 +100,12 @@ const SixRadio$1 = /*@__PURE__*/ proxyCustomElement(class SixRadio extends HTMLE
         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' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-range.js CHANGED Viewed

@@ -185,7 +185,7 @@ const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends HTMLE
         }
     }
     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,
@@ -193,7 +193,7 @@ const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends HTMLE
                 '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))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-root.js CHANGED Viewed

@@ -15,7 +15,7 @@ const SixRoot$1 = /*@__PURE__*/ proxyCustomElement(class SixRoot extends HTMLEle
         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" }))));
     }
     get host() { return this; }
     static get style() { return SixRootStyle0; }

package/dist/components/six-search-field.js CHANGED Viewed

@@ -47,7 +47,7 @@ const SixSearchField$1 = /*@__PURE__*/ proxyCustomElement(class SixSearchField e
         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 watchers() { return {
         "value": ["handleValueChange"]

package/dist/components/six-select.js CHANGED Viewed

@@ -126,6 +126,40 @@ const translation = {
     },
 };
+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;
@@ -248,12 +282,12 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
                 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) => {
@@ -273,6 +307,9 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         };
         this.handleMenuHide = () => {
             this.isOpen = false;
+            if (this.multiple) {
+                this.handleBlur();
+            }
         };
         this.handleSlotChange = () => {
             this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
@@ -325,34 +362,37 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         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();
     }
     connectedCallback() {
+        var _a;
         if (this.virtualScroll && this.options === null) {
             console.error('Options must be defined when using virtual scrolling');
         }
-        this.init();
+        (_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);
+        }
     }
     componentWillLoad() {
+        this.value = convertToValidValue(this.value, this.multiple);
         this.handleSlotChange();
-        if (this.multiple && this.value != null) {
-            this.value = this.getValueAsArray();
-        }
     }
     componentDidLoad() {
-        this.init();
+        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) {
@@ -377,16 +417,6 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         this.hasFocus = true;
         (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus(options);
     }
-    init() {
-        var _a;
-        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
-        this.eventListeners.forward('six-select-change', 'change', this.host);
-        this.eventListeners.forward('six-select-blur', 'blur', this.host);
-        this.eventListeners.forward('six-select-focus', 'focus', this.host);
-        if (this.displayValuesContainer) {
-            this.resizeObserver.observe(this.displayValuesContainer);
-        }
-    }
     getItemLabel(item) {
         var _a, _b;
         const slot = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
@@ -413,11 +443,6 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         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 = [];
@@ -437,7 +462,7 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
     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);
@@ -446,7 +471,7 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
             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;
@@ -515,7 +540,7 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
             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: '995bb87e0b65e09cc2aea9b9309e03388e9a3013', 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: '14d641ae28f41c426b51b89d7a4dea1c842c6341', 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,
@@ -530,20 +555,20 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
                 '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: 'ea452a8196bc7ffc8fbc3ec98298b13a2bdaa0b2', 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: '7b6e70973681445a4de6e2c0e1a31aa3b512cd68', 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: '34a321d5de3e51132f2dfb364979c1c55995b8c2', 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: 'b6a75066f44bcfa23646f09f12858741eb329935', 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: '273440b4570424484c8eb4bc41475b2fdd769bb9', 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: '6d3b8c080879dfc652816ff96f39d0821a676708', 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 !== '';