@six-group/ui-library 3.0.0-beta.1.7

package/dist/esm/six-select.entry.js

@@ -0,0 +1,454 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
+import { a as getTextContent, h as hasSlot } from './slot-5253e199.js';
+import { F as FormControl } from './form-control-17478ad2.js';
+import { E as EventListeners } from './event-listeners-1bef934e.js';
+import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-235f5126.js';
+
+const sixSelectCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.select{display:block}.select__box{display:inline-flex;align-items:center;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);font-size:var(--six-input-font-size-medium);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:pointer}.select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select__box--autocomplete{border:none;overflow:initial}.select:not(.select--disabled) .select__box:hover{background-color:var(--six-input-background-color-hover);color:var(--six-input-color-hover);border-bottom-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:hover:not(.select__box--line){border-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:focus{background-color:var(--six-input-background-color-focus);outline:none;color:var(--six-input-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.select:not(.select--disabled) .select__box:focus:not(.select__box--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.select--disabled .select__box{background-color:var(--six-input-background-color-disabled);color:var(--six-input-color-disabled);cursor:not-allowed;outline:none}.select--disabled .select__box:not(.select__box--line){border-color:var(--six-input-border-color-disabled)}.select--disabled .select__tags,.select--disabled .select__clear{pointer-events:none}.select--invalid:not(.select--disabled):not(.select--focused) .select__box{border-bottom-color:var(--six-input-border-color-danger)}.select--invalid:not(.select--disabled):not(.select--focused) .select__box:not(.input--line){border-color:var(--six-input-border-color-danger)}.select__label{flex-shrink:1;flex-grow:1;align-items:center;user-select:none;width:0;scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.select__label::-webkit-scrollbar{width:0;height:0}.select__clear{flex-shrink:0;flex-grow:0;display:inline}.select__icon{flex-shrink:0;flex-grow:0;display:inline;transition:var(--six-transition-medium) transform ease}.select--open .select__icon{transform:rotate(-180deg)}.select--placeholder-visible .select__label{color:var(--six-input-placeholder-color)}.select--disabled.select--placeholder-visible .select__label{color:var(--six-input-placeholder-color-disabled)}.select__tags{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:left;margin-left:var(--six-spacing-xx-small)}.select__hidden-select{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.select__input{position:absolute;top:0;left:0;width:100%;height:100%}.select--small .select__box{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);min-height:var(--six-height-small)}.select--small .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--small .select__label{margin:0 var(--six-input-spacing-small)}.select--small .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--small .select__icon{margin-right:var(--six-spacing-x-small)}.select--small .select__tags{padding-bottom:2px}.select--small .select__tags six-tag{padding-top:2px}.select--small .select__tags six-tag:not(:last-of-type){margin-right:var(--six-spacing-xx-small)}.select--small.select--has-tags .select__label{margin-left:0}.select--medium .select__box{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);min-height:var(--six-height-medium)}.select--medium .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--medium .select__label{margin:0 var(--six-input-spacing-medium)}.select--medium .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--medium .select__icon{margin-right:var(--six-spacing-x-small)}.select--medium .select__tags{padding-bottom:3px}.select--medium .select__tags six-tag{padding-top:3px}.select--medium .select__tags six-tag:not(:last-of-type){margin-right:var(--six-spacing-xx-small)}.select--medium.select--has-tags .select__label{margin-left:0}.select--large .select__box{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);min-height:var(--six-height-large)}.select--large .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--large .select__label{margin:0 var(--six-input-spacing-large)}.select--large .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--large .select__icon{margin-right:var(--six-spacing-x-small)}.select--large .select__tags{padding-bottom:4px}.select--large .select__tags six-tag{padding-top:4px}.select--large .select__tags six-tag:not(:last-of-type){margin-right:var(--six-spacing-xx-small)}.select--large.select--has-tags .select__label{margin-left:0}.select--pill.select--small .select__box{border-radius:var(--six-height-small)}.select--pill.select--medium .select__box{border-radius:var(--six-height-medium)}.select--pill.select--large .select__box{border-radius:var(--six-height-large)}.select__menu{max-width:50vw;width:fit-content}.select__menu--filtered{width:100% !important}.select__menu--hidden{display:none}six-icon-button::part(base){padding-top:0;padding-bottom:0}";
+
+let id = 0;
+let SixSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixChange = createEvent(this, "six-select-change", 7);
+    this.sixFocus = createEvent(this, "six-select-focus", 7);
+    this.sixBlur = createEvent(this, "six-select-blur", 7);
+    this.inputId = `select-${++id}`;
+    this.labelId = `select-label-${id}`;
+    this.helpTextId = `select-help-text-${id}`;
+    this.errorTextId = `select-error-text-${id}`;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.eventListeners = new EventListeners();
+    this.hasFocus = false;
+    this.hasHelpTextSlot = false;
+    this.hasErrorTextSlot = false;
+    this.hasLabelSlot = false;
+    this.isOpen = false;
+    this.displayLabel = '';
+    this.displayTags = [];
+    /** Set to true to enable multiselect. */
+    this.multiple = false;
+    /**
+     * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the
+     * number of additional items that are selected. Set to -1 to remove the limit.
+     */
+    this.maxTagsVisible = 3;
+    /** 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 debounce for the filter callbacks. */
+    this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
+    /** 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 label. Alternatively, you can use the label slot. */
+    this.label = '';
+    /** The select's help text. Alternatively, you can use the help-text slot. */
+    this.helpText = '';
+    /** The select's error text. Alternatively, you can use the error-text slot. */
+    this.errorText = '';
+    /** The select's required attribute. */
+    this.required = false;
+    /** Set to true to add a clear button when the select is populated. */
+    this.clearable = false;
+    /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+    this.invalid = false;
+    /** Set to render as line */
+    this.line = false;
+    /** Set to display the error text on blur and not when typing */
+    this.errorOnBlur = 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;
+    /** The default value the select will be reverted to when reset is executed */
+    this.defaultValue = null;
+  }
+  handleDisabledChange() {
+    if (this.disabled && this.isOpen) {
+      this.dropdown.hide();
+    }
+  }
+  handleLabelChange() {
+    this.handleSlotChange();
+  }
+  handleMultipleChange() {
+    // Cast to array | string based on `this.multiple`
+    const value = this.getValueAsArray();
+    this.value = this.multiple ? value : value[0] || '';
+    this.syncItemsFromValue();
+  }
+  handleValueChange() {
+    this.syncItemsFromValue();
+    if (this.input) {
+      this.sixChange.emit({ value: this.value, isSelected: true });
+    }
+  }
+  connectedCallback() {
+    if (this.virtualScroll && this.options === null) {
+      console.error('Options must be defined when using virtual scrolling');
+    }
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleClearClick = this.handleClearClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleSelectAll = this.handleSelectAll.bind(this);
+    this.handleLabelClick = this.handleLabelClick.bind(this);
+    this.handleMenuHide = this.handleMenuHide.bind(this);
+    this.handleMenuShow = this.handleMenuShow.bind(this);
+    this.handleMenuSelect = this.handleMenuSelect.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+    this.handleInvalid = this.handleInvalid.bind(this);
+    this.handleTagInteraction = this.handleTagInteraction.bind(this);
+    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+    if (this.multiple && this.value) {
+      this.value = this.getValueAsArray();
+    }
+  }
+  componentDidLoad() {
+    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
+    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
+    requestAnimationFrame(() => this.syncItemsFromValue());
+    this.eventListeners.add(this.input, 'invalid', async (event) => {
+      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
+        this.customErrorText = await this.input.getValidationMessage();
+      }
+      event.preventDefault();
+    });
+    this.eventListeners.add(this.input, 'six-input-input', debounce((event) => {
+      const enteredValue = this.input.value;
+      this.clearValues();
+      this.sixChange.emit({ value: enteredValue, isSelected: false });
+      event.stopPropagation();
+    }, this.inputDebounce));
+    this.input.value = this.hasSelection() ? this.displayLabel : '';
+  }
+  disconnectedCallback() {
+    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.removeAll();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  async reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    return this.input.isValid();
+  }
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  async setCustomValidity(message) {
+    this.customErrorText = '';
+    this.customValidation = message !== '';
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.value = this.defaultValue;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.input.setCustomValidity('');
+    this.invalid = false;
+  }
+  getItemLabel(item) {
+    const slot = item.shadowRoot.querySelector('slot:not([name])');
+    if (slot) {
+      return getTextContent(slot);
+    }
+    else {
+      // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed
+      return item.textContent;
+    }
+  }
+  getItems() {
+    if (this.options !== null) {
+      return this.options.map((option) => h("six-menu-item", { value: option.value }, option.label));
+    }
+    return [...this.host.querySelectorAll('six-menu-item')];
+  }
+  hasMenuItems() {
+    return this.getItems().length > 0;
+  }
+  getValueAsArray() {
+    const values = Array.isArray(this.value) ? this.value : [this.value];
+    // enforce that the values are converted to 'string' before the value is compared
+    return values.map(String);
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.sixBlur.emit();
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.sixFocus.emit();
+  }
+  handleInvalid() {
+    this.invalid = true;
+  }
+  handleClearClick(event) {
+    event.stopPropagation();
+    this.clearValues();
+  }
+  clearValues() {
+    var _a;
+    this.value = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : (this.multiple ? [] : '');
+    this.syncItemsFromValue();
+  }
+  handleSelectAll(event) {
+    const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');
+    const keyName = event.key;
+    const keyCode = event.code;
+    if (keyName === 'Control') {
+      return;
+    }
+    if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {
+      event.preventDefault();
+      const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);
+      nonFilteredItems
+        .filter((option) => !option.disabled)
+        .forEach((option) => (option.checked = hasDeselectedOptions));
+      const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);
+      this.value = hasDeselectedOptions ? checkedItems : [];
+    }
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    const items = this.getItems();
+    const firstItem = items[0];
+    const lastItem = items[items.length - 1];
+    // Ignore key presses on tags
+    if (target.tagName.toLowerCase() === 'six-tag') {
+      return;
+    }
+    // Tabbing out of the control closes it
+    if (event.key === 'Tab') {
+      if (this.isOpen) {
+        this.dropdown.hide();
+      }
+      return;
+    }
+    // Up/down opens the menu
+    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+      event.preventDefault();
+      // Show the menu if it's not already open
+      if (!this.isOpen) {
+        this.dropdown.show();
+      }
+      // Focus on a menu item
+      if (event.key === 'ArrowDown' && firstItem) {
+        firstItem.setFocus();
+        return;
+      }
+      if (event.key === 'ArrowUp' && lastItem) {
+        lastItem.setFocus();
+        return;
+      }
+    }
+    // All other keys open the menu and initiate type to select
+    if (!this.isOpen) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.dropdown.show();
+      this.menu.typeToSelect(event.key);
+    }
+  }
+  handleLabelClick() {
+    this.box.focus();
+  }
+  handleMenuSelect(event) {
+    const item = event.detail.item;
+    const getValue = () => {
+      if (this.multiple) {
+        return this.value.includes(item.value)
+          ? this.value.filter((v) => v !== item.value)
+          : [...this.value, item.value];
+      }
+      else {
+        return item.value;
+      }
+    };
+    this.value = getValue();
+    this.syncItemsFromValue();
+  }
+  handleMenuShow(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      return;
+    }
+    this.resizeMenu();
+    this.resizeObserver.observe(this.host);
+    this.isOpen = true;
+  }
+  handleMenuHide() {
+    this.resizeObserver.unobserve(this.host);
+    this.isOpen = false;
+  }
+  handleSlotChange() {
+    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+    this.hasLabelSlot = hasSlot(this.host, 'label');
+    this.syncItemsFromValue();
+  }
+  handleTagInteraction(event) {
+    // Don't toggle the menu when a tag's clear button is activated
+    const path = event.composedPath();
+    const clearButton = path.find((el) => {
+      if (el instanceof HTMLElement) {
+        const element = el;
+        return element.classList.contains('tag__clear');
+      }
+    });
+    if (clearButton) {
+      event.stopPropagation();
+    }
+  }
+  resizeMenu() {
+    this.menu.style.minWidth = `${this.box.clientWidth}px`;
+    if (this.dropdown) {
+      this.dropdown.reposition();
+    }
+  }
+  syncItemsFromValue() {
+    const items = this.getItems();
+    const value = this.getValueAsArray();
+    // Sync checked states
+    items.forEach((item) => (item.checked = value.includes(item.value)));
+    // Sync display label
+    if (this.multiple) {
+      const checkedItems = [];
+      value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));
+      this.displayTags = checkedItems.map((item) => {
+        return (h("six-tag", { exportparts: "base:tag", type: "primary", size: this.size, pill: this.pill, clearable: true, onClick: this.handleTagInteraction, onKeyDown: this.handleTagInteraction, "onSix-tag-clear": (event) => {
+            event.stopPropagation();
+            if (!this.disabled) {
+              item.checked = false;
+              this.syncValueFromItems();
+            }
+          } }, this.getItemLabel(item)));
+      });
+      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {
+        const total = this.displayTags.length;
+        this.displayLabel = '';
+        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
+        this.displayTags.push(h("six-tag", { exportparts: "base:tag", type: "info", size: this.size }, "+", total - this.maxTagsVisible));
+      }
+    }
+    else {
+      this.displayLabel = this.extractLabelForSelectedItem(value, items);
+      this.displayTags = [];
+    }
+    const hasSelection = this.hasSelection();
+    if (hasSelection) {
+      this.touched = true;
+    }
+    if (this.input && this.touched) {
+      if (!this.autocomplete) {
+        this.input.value = hasSelection ? this.displayLabel : '';
+      }
+      else if (hasSelection) {
+        this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+      }
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+  extractLabelForSelectedItem(value, items) {
+    if (value.length === 0 || (value.length === 1 && value[0] === '')) {
+      return '';
+    }
+    if (this.options !== null) {
+      const selectedOption = this.options.find((item) => item.value === value[0]);
+      return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '';
+    }
+    const checkedItem = items.find((item) => item.value === value[0]);
+    return checkedItem ? this.getItemLabel(checkedItem) : '';
+  }
+  syncValueFromItems() {
+    const items = this.getItems();
+    const checkedItems = items.filter((item) => item.checked);
+    const checkedValues = checkedItems.map((item) => item.value);
+    this.value = this.multiple
+      ? this.getValueAsArray().filter((val) => checkedValues.includes(val))
+      : checkedValues.length > 0
+        ? checkedValues[0]
+        : '';
+  }
+  displayError() {
+    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));
+  }
+  render() {
+    var _a;
+    const hasSelection = this.hasSelection();
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+        select: true,
+        'select--open': this.isOpen,
+        'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
+        'select--focused': this.hasFocus,
+        'select--clearable': this.clearable,
+        'select--disabled': this.disabled,
+        'select--multiple': this.multiple,
+        'select--has-tags': this.multiple && hasSelection,
+        'select--placeholder-visible': this.displayLabel === '',
+        'select--small': this.size === 'small',
+        'select--medium': this.size === 'medium',
+        'select--large': this.size === 'large',
+        'select--pill': this.pill,
+        'select--invalid': this.invalid,
+      }, onKeyDown: this.handleSelectAll, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter }, h("div", { slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
+        select__box: true,
+        'select__box--line': this.line,
+        'select__box--autocomplete': this.autocomplete,
+      }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, h("span", { class: "select__label" }, this.displayTags.length ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)), this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.input = el), class: {
+        select__input: true,
+        'select__hidden-select': !this.autocomplete,
+      }, "aria-hidden": "true", required: this.required, onInvalid: this.handleInvalid, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
+        select__menu: true,
+        'select__menu--filtered': this.filter || this.asyncFilter,
+        'select__menu--hidden': !this.hasMenuItems(),
+      }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true }, h("slot", { onSlotchange: this.handleSlotChange })))));
+  }
+  hasSelection() {
+    return this.multiple ? this.value.length > 0 : this.value !== '';
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "disabled": ["handleDisabledChange"],
+    "helpText": ["handleLabelChange"],
+    "errorText": ["handleLabelChange"],
+    "label": ["handleLabelChange"],
+    "multiple": ["handleMultipleChange"],
+    "value": ["handleValueChange"]
+  }; }
+};
+SixSelect.style = sixSelectCss;
+
+export { SixSelect as six_select };

package/dist/esm/six-sidebar-item-group.entry.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, h, g as getElement } from './index-a2605a62.js';
+import { h as hasSlot } from './slot-5253e199.js';
+
+const sixSidebarItemGroupCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-sidebar-item-group--childless::part(content){padding:0 !important}.six-sidebar-item-group--subgroup::part(header){background-color:transparent !important}.six-sidebar-item-group__header-icon{margin-left:16px;transform:translate(0px, -3px)}.six-sidebar-details__header{display:flex}.six-sidebar-details__header-icon{margin-right:1em}";
+
+let SixSidebarItemGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hasItems = false;
+    /** Title of item group */
+    this.name = '';
+    /** Icon of the group */
+    this.icon = '';
+    /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */
+    this.value = '';
+    this.open = false;
+    this.provideSlot = (name) => {
+      if (this.summaryIconHasContent) {
+        return (h("div", { slot: name }, h("slot", { name: name })));
+      }
+      return (h("slot", { name: name, onSlotchange: () => {
+          this.summaryIconHasContent =
+            this.host.shadowRoot.querySelector(`slot[name="${name}"]`).assignedNodes().length > 0;
+        } }));
+    };
+  }
+  connectedCallback() {
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+  }
+  handleSlotChange() {
+    this.hasItems = hasSlot(this.host);
+  }
+  isSubgroup() {
+    return !!this.host.parentElement.closest('six-sidebar-item-group');
+  }
+  render() {
+    return (h("six-details", { class: {
+        'six-sidebar-item-group--childless': !this.hasItems,
+        'six-sidebar-item-group--subgroup': this.isSubgroup(),
+      }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems }, h("div", { slot: "summary" }, h("div", { class: "six-sidebar-details__header" }, this.icon && h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+SixSidebarItemGroup.style = sixSidebarItemGroupCss;
+
+export { SixSidebarItemGroup as six_sidebar_item_group };

package/dist/esm/six-sidebar-item.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h } from './index-a2605a62.js';
+
+const sixSidebarItemCss = ":host{display:block}.sidebar-item{font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;padding:8px 8px 16px 16px;font-family:var(--six-font-family)}.sidebar-item:hover:not(.sidebar-item--disabled){color:var(--six-color-web-rock-600)}.sidebar-item.sidebar-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.sidebar-item.sidebar-item--selected{font-weight:var(--six-font-weight-bold)}";
+
+let SixSidebarItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */
+    this.value = '';
+    /** Set to true to draw the item in a selected state. */
+    this.selected = false;
+    /** Set to true to draw the sidebar item in a disabled state. */
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { class: {
+        'sidebar-item': true,
+        'sidebar-item--selected': this.selected,
+        'sidebar-item--disabled': this.disabled,
+      }, role: "menuitem", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", null)));
+  }
+};
+SixSidebarItem.style = sixSidebarItemCss;
+
+export { SixSidebarItem as six_sidebar_item };