@six-group/ui-library 0.0.0-insider.b13c699 → 0.0.0-insider.b2db78f

package/dist/components/six-select.js

@@ -1,18 +1,18 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { h as hasSlot, a as getTextContent } from './slot.js';
-import { F as FormControl } from './form-control.js';
-import { E as EventListeners } from './event-listeners.js';
-import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control.js';
-import { d as defineCustomElement$b } from './six-button2.js';
-import { d as defineCustomElement$a } from './six-checkbox2.js';
-import { d as defineCustomElement$9 } from './six-dropdown2.js';
-import { d as defineCustomElement$8 } from './six-error2.js';
-import { d as defineCustomElement$7 } from './six-icon2.js';
-import { d as defineCustomElement$6 } from './six-icon-button2.js';
-import { d as defineCustomElement$5 } from './six-input2.js';
-import { d as defineCustomElement$4 } from './six-menu2.js';
-import { d as defineCustomElement$3 } from './six-menu-item2.js';
-import { d as defineCustomElement$2 } from './six-spinner2.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
+import { h as hasSlot, a as getTextContent } from './p-j3oIB5oT.js';
+import { F as FormControl } from './p-Cc_nfyAl.js';
+import { E as EventListeners } from './p-C4h4qpGl.js';
+import { D as DEFAULT_DEBOUNCE_FAST, d as debounce } from './p-ltzGzaAu.js';
+import { d as defineCustomElement$b } from './p-ByetrMwd.js';
+import { d as defineCustomElement$a } from './p-C4Shm3wX.js';
+import { d as defineCustomElement$9 } from './p-DwZ0ygip.js';
+import { d as defineCustomElement$8 } from './p-su5lTFPV.js';
+import { d as defineCustomElement$7 } from './p-Bga8smgq.js';
+import { d as defineCustomElement$6 } from './p-CS9Rg27-.js';
+import { d as defineCustomElement$5 } from './p-BFrSuO7n.js';
+import { d as defineCustomElement$4 } from './p-BUw6MZZI.js';
+import { d as defineCustomElement$3 } from './p-DAOD-npI.js';
+import { d as defineCustomElement$2 } from './p-BPj4WRz2.js';
 
 const languages = ['de', 'fr', 'it', 'en', 'es'];
 const dateFormat = new Intl.DateTimeFormat('de-CH');
@@ -37,9 +37,9 @@ function getErrorMessage(language, error) {
             case 'max':
                 return message.replace('{max}', String(error.max));
             case 'mindate':
-                return message.replace('{mindate}', dateFormat.format(error.mindate));
+                return message.replace('{mindate}', dateFormat.format(typeof error.mindate === 'string' ? new Date(error.mindate) : error.mindate));
             case 'maxdate':
-                return message.replace('{maxdate}', dateFormat.format(error.maxdate));
+                return message.replace('{maxdate}', dateFormat.format(typeof error.maxdate === 'string' ? new Date(error.maxdate) : error.maxdate));
             case 'invaliddate':
                 return message;
             case 'custom':
@@ -47,7 +47,7 @@ function getErrorMessage(language, error) {
         }
     }
     catch (e) {
-        console.warn(`no error message in '${language}' for error:`, error);
+        console.warn(`no error message in '${language}' for error: ${error}`, e);
         return undefined;
     }
 }
@@ -160,18 +160,17 @@ function valueEquals(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;
+const sixSelectCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.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__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}";
 
 let id = 0;
-const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTMLElement {
+const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixChange = createEvent(this, "six-select-change", 7);
-        this.sixFocus = createEvent(this, "six-select-focus", 7);
-        this.sixBlur = createEvent(this, "six-select-blur", 7);
+        this.sixChange = createEvent(this, "six-select-change");
+        this.sixFocus = createEvent(this, "six-select-focus");
+        this.sixBlur = createEvent(this, "six-select-blur");
         this.inputId = `select-${++id}`;
         this.labelId = `select-label-${id}`;
         this.helpTextId = `select-help-text-${id}`;
@@ -179,6 +178,68 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         this.eventListeners = new EventListeners();
         this.activeItemIndex = -1;
         this.resizeObserver = new ResizeObserver(() => this.updateDisplayedValues());
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasErrorTextSlot = false;
+        this.isOpen = false;
+        this.displayedValues = [];
+        /** Menu items shown in the selection container.  */
+        this.selectionContainerItems = [];
+        /** Set to true to enable multiselect. */
+        this.multiple = false;
+        /** Enables the select all button. */
+        this.selectAllButton = false;
+        /** Set to true to disable the select control. */
+        this.disabled = false;
+        /** The select's name. */
+        this.name = '';
+        /** The select's placeholder text. */
+        this.placeholder = '';
+        /** The select's size. */
+        this.size = 'medium';
+        /**
+         * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+         * `overflow: auto|scroll`.
+         */
+        this.hoist = false;
+        /** The value of the control. This will be a string or an array depending on `multiple`. */
+        this.value = '';
+        /** Set to true to draw a pill-style select with rounded edges. */
+        this.pill = false;
+        /** The select's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** Set to true to add a clear button when the select is populated. */
+        this.clearable = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** Set to render as line */
+        this.line = false;
+        /** Set to true to allow filtering for entries in the dropdown */
+        this.filter = false;
+        /**
+         * Set to true to allow async filtering.
+         * When you enter something in the search field the component will only emit an event but not filter any elements itself.
+         * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+         */
+        this.asyncFilter = false;
+        /**
+         * Set to true to turn the six-select into an autocomplete.
+         */
+        this.autocomplete = false;
+        /** The debounce for when the input changes for autocompletes should be emitted */
+        this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
+        /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */
+        this.options = null;
+        /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
+         *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
+        this.virtualScroll = false;
         this.handleBlur = () => {
             this.hasFocus = false;
             this.sixBlur.emit();
@@ -318,40 +379,6 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
             this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
             this.syncItemsFromValue();
         };
-        this.hasFocus = false;
-        this.hasHelpTextSlot = false;
-        this.hasLabelSlot = false;
-        this.hasErrorTextSlot = false;
-        this.isOpen = false;
-        this.displayedValues = [];
-        this.selectionContainerItems = [];
-        this.multiple = false;
-        this.selectAllButton = false;
-        this.selectAllText = undefined;
-        this.maxTagsVisible = 3;
-        this.disabled = false;
-        this.name = '';
-        this.placeholder = '';
-        this.filterPlaceholder = undefined;
-        this.filterDebounce = undefined;
-        this.size = 'medium';
-        this.hoist = false;
-        this.value = '';
-        this.pill = false;
-        this.helpText = '';
-        this.required = false;
-        this.clearable = false;
-        this.label = '';
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.invalid = false;
-        this.line = false;
-        this.filter = false;
-        this.asyncFilter = false;
-        this.autocomplete = false;
-        this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
-        this.options = null;
-        this.virtualScroll = false;
     }
     handleDisabledChange() {
         var _a;
@@ -557,7 +584,7 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
             showClear = true;
             showExpand = false;
         }
-        return (h(FormControl, { key: '521e8a99e7fb4ad2fb8ded4763eb8ed1e0eff293', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { key: 'ea5f0ec6216ab61ebcc1ae8add16b042e99297cc', part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+        return (h(FormControl, { key: 'f9827d54da20b0c36de14650fb04d3a3a97f2918', 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: 'e53e3d25e2c9244625522f94d5b36105e5d987f3', 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,
@@ -572,20 +599,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: 'd6b14098f6aabd6212f71e3832890de646c6d97e', 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: '553accc8bd6c4be66593b5f8ac96f485d3e2a8cb', slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
                 select__box: true,
                 'select__box--line': this.line,
                 'select__box--autocomplete': this.autocomplete,
-            }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus }, h("div", { key: 'dd77b5234c29235a00f62b5e49b81dc5aba2ffda', class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { key: 'd30be3b2adb8f5eed29a3e7a5a59f4db007d62e9', exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { key: '7c40d29a181ce1f15bc1bacf059a9c8e9807be67', part: "icon", class: "select__icon" }, h("six-icon", { key: '6ac4a8bf6a4be113dcfd6bf2fd690c8b47aaaaeb', size: "medium" }, "expand_more"))), h("six-input", { key: '8f226312196871cd91abcb20da09c5a2811d1657', ref: (el) => (this.autocompleteInput = el), class: {
+            }, 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: 'f2201e36050a8127d7a173b0c9b39a92b2eb8563', class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { key: '3f2d238e44f27d9790b316256717f6f673d31a69', exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { key: '3f7dfa9c4a8f598e91869665c2249b990ac44351', part: "icon", class: "select__icon" }, h("six-icon", { key: '3fa185567fdf0974f630951667c3af1981122064', size: "medium" }, "expand_more"))), h("six-input", { key: '021f19d93247a0cadf811a24580dc8f46ed5004f', ref: (el) => (this.autocompleteInput = el), class: {
                 select__input: true,
-                'select__hidden-select': !this.autocomplete,
-            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { key: 'bb683893a8ad678f3cb01e8e42531b17bd20913c', class: {
+                'sr-only': !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: '24abda79d4b024a062c604ca7a02f3e1f51159cb', class: {
                 'selection-container': true,
                 'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
-            } }, this.selectionContainerItems), h("six-menu", { key: 'c7755a2e2da8134b6b58189c81c8354cac7a8e2e', ref: (el) => (this.menu = el), part: "menu", class: {
+            } }, this.selectionContainerItems), h("six-menu", { key: 'ffd8ebfed22f01708bbb08d81c15341341e7727a', ref: (el) => (this.menu = el), part: "menu", class: {
                 select__menu: true,
                 'select__menu--hidden': !hasMenuItems,
-            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: '95fe463945090bd7a7cbc11066f4752dfff55034', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { key: '448f7d261edd83841fc82c4c3304ec497aa4c8f8', class: "select-all", slot: "dropdown-footer" }, h("six-button", { key: 'e393c3715514b8e9a0a710c408364e6c96f9a1d3', type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
+            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: 'fb614513d6f9477cdfa7e4a13ac503fea2d76a82', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { key: '14a20b465530efeb97e140d26d73698d00ac55ce', class: "select-all", slot: "dropdown-footer" }, h("six-button", { key: '8ece78f471f1d5fb8efa5a16b084987c86dac13c', type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';
@@ -602,12 +629,11 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         "multiple": ["handleMultipleChange"],
         "value": ["handleValueChange"]
     }; }
-    static get style() { return SixSelectStyle0; }
+    static get style() { return sixSelectCss; }
 }, [1, "six-select", {
         "multiple": [4],
         "selectAllButton": [4, "select-all-button"],
         "selectAllText": [1, "select-all-text"],
-        "maxTagsVisible": [2, "max-tags-visible"],
         "disabled": [4],
         "name": [1],
         "placeholder": [1],
@@ -800,5 +826,6 @@ const SixSelect = SixSelect$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixSelect, getLanguage as a, defineCustomElement, getErrorMessage as g, languages as l };
+//# sourceMappingURL=six-select.js.map
 
 //# sourceMappingURL=six-select.js.map