@triptease/tt-combobox 5.5.1 → 5.5.3

package/dist/src/TtCombobox.js

@@ -1,5 +1,4 @@
 import { __decorate } from "tslib";
-/* eslint-disable lit-a11y/click-events-have-key-events */
 import { html, LitElement, nothing } from 'lit';
 import { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -14,13 +13,14 @@ export class TtCombobox extends LitElement {
         return this.internals.form;
     }
     get _isAllSelected() {
-        return Boolean(this._visibleOptionsNotSelectAll.length) && Array.from(this._visibleOptionsNotSelectAll).every(option => this.value.includes(option.value));
+        return (Boolean(this._visibleOptionsNotSelectAll.length) &&
+            Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value)));
     }
     get _selectedVisibleOptions() {
-        return Array.from(this._visibleOptions).filter(option => this.value.includes(option.value));
+        return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));
     }
     get _selectedOptions() {
-        return Array.from(this._visibleOptionsNotSelectAll).filter(option => this.value.includes(option.value));
+        return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));
     }
     constructor() {
         super();
@@ -38,14 +38,14 @@ export class TtCombobox extends LitElement {
         this._filter = '';
         this.value = [];
         this._slotObserver = new MutationObserver((mutations) => {
-            mutations.forEach(mutation => {
+            mutations.forEach((mutation) => {
                 if (mutation.type === 'attributes') {
                     this.requestUpdate('options');
                 }
             });
         });
         this._valueChanged = () => {
-            this._selectableOptions.forEach(option => {
+            this._selectableOptions.forEach((option) => {
                 if (this.value.includes(option.value)) {
                     this._checkOption(option);
                 }
@@ -56,7 +56,7 @@ export class TtCombobox extends LitElement {
             this.internals.setFormValue(JSON.stringify(this.value));
         };
         this._listenForOptionChange = () => {
-            this.options.forEach(option => {
+            this.options.forEach((option) => {
                 this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });
             });
         };
@@ -66,17 +66,17 @@ export class TtCombobox extends LitElement {
             // If filtering, and all visible options are selected, deselect only visible options
             // Else if filtering, select all visible options
             if (this._filter !== '' && this._isAllSelected) {
-                const selectedVisibleValues = this._selectedVisibleOptions.map(option => option.value);
-                this.value = this.value.filter(value => !selectedVisibleValues.includes(value));
+                const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);
+                this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));
             }
             else if (this._filter !== '') {
-                this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map(option => option.value)]));
+                this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)]));
             }
             else if (this.value.length === this._selectableOptions.length) {
                 this.value = [];
             }
             else {
-                this.value = Array.from(this._selectableOptions).map(option => option.value);
+                this.value = Array.from(this._selectableOptions).map((option) => option.value);
             }
         };
         this._renderSelectAll = () => {
@@ -86,7 +86,6 @@ export class TtCombobox extends LitElement {
             const id = `${this.id}-option-select-all`;
             const active = this._getActiveOptionId() === id;
             const selected = this._isAllSelected;
-            // eslint-disable-next-line lit-a11y/click-events-have-key-events
             return html `
       <tt-option
         id="${id}"
@@ -98,12 +97,21 @@ export class TtCombobox extends LitElement {
         exportparts="option, checkbox"
         part="option"
         value="select-all"
-      >Select all</tt-option>
+        >Select all</tt-option
+      >
     `;
         };
         this._renderChevron = () => html `
-    <button type="button" aria-label="Expand" @click="${this._onChevronClick}" aria-expanded="${this._expanded}"
-            aria-controls="${this.id}-list" tabindex="-1" ?disabled=${this.disabled} part="arrow">
+    <button
+      type="button"
+      aria-label="Expand"
+      @click="${this._onChevronClick}"
+      aria-expanded="${this._expanded}"
+      aria-controls="${this.id}-list"
+      tabindex="-1"
+      ?disabled=${this.disabled}
+      part="arrow"
+    >
       ${unsafeSVG(chevronDown)}
     </button>
   `;
@@ -134,7 +142,8 @@ export class TtCombobox extends LitElement {
     update(changedProperties) {
         if (changedProperties.has('value')) {
             this._valueChanged();
-            if (changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {
+            if (changedProperties.get('value') !== undefined &&
+                JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {
                 this._dispatchSelectedOptions();
                 this._reportValidity();
             }
@@ -144,8 +153,8 @@ export class TtCombobox extends LitElement {
         }
         if (changedProperties.has('options')) {
             this.updateComplete.then(() => {
-                const selectedAssignedOptions = Array.from(this.options).filter(option => option.selected);
-                this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map(option => option.value)]));
+                const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);
+                this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value)]));
                 this._listenForOptionChange();
             });
         }
@@ -155,7 +164,7 @@ export class TtCombobox extends LitElement {
         if (this.required && !this.value.length) {
             const errorMessage = this.multiselect ? 'Please select at least one tt-option' : 'Please select an tt-option';
             this.internals.setValidity({
-                valueMissing: true
+                valueMissing: true,
             }, errorMessage, this._comboboxInput);
             this.internals.states.add('--invalid');
         }
@@ -173,7 +182,7 @@ export class TtCombobox extends LitElement {
         if (this.ariaLabel !== null) {
             return this.ariaLabel;
         }
-        return this.labels.map(label => label.innerText).join(', ');
+        return this.labels.map((label) => label.innerText).join(', ');
     }
     _onKeyUp(event) {
         switch (event.key) {
@@ -223,7 +232,7 @@ export class TtCombobox extends LitElement {
     }
     _checkOption(option) {
         if (!this.multiselect) {
-            this._selectableOptions.forEach(opt => {
+            this._selectableOptions.forEach((opt) => {
                 this._uncheckOption(opt);
             });
         }
@@ -258,7 +267,7 @@ export class TtCombobox extends LitElement {
         const selectedValue = option.value;
         if (this.multiselect) {
             if (this.value.includes(selectedValue)) {
-                this.value = this.value.filter(value => value !== selectedValue);
+                this.value = this.value.filter((value) => value !== selectedValue);
             }
             else {
                 this.value = [...this.value, selectedValue];
@@ -281,7 +290,7 @@ export class TtCombobox extends LitElement {
     _dispatchSelectedOptions() {
         this.dispatchEvent(new Event('change', {
             bubbles: true,
-            composed: true
+            composed: true,
         }));
     }
     get _isValid() {
@@ -299,42 +308,46 @@ export class TtCombobox extends LitElement {
                 return 'No options selected';
             }
             if (this.value.length === 1) {
-                return Array.from(this._selectableVisibleOptions).find(option => option.value === this.value[0])?.textContent?.trim();
+                return Array.from(this._selectableVisibleOptions)
+                    .find((option) => option.value === this.value[0])
+                    ?.textContent?.trim();
             }
             if (this._isAllSelected) {
                 return this.selectAllPlaceholder || 'All options selected';
             }
             return `${this._selectedVisibleOptions.length} options selected`;
         });
-        return html `
-      <input
-        type="text"
-        id="${this.id}"
-        name="${this.name}"
-        autocomplete="off"
-        aria-label="${this.labelContent}"
-        aria-labelledby="${this.ariaLabelledby}"
-        role="combobox"
-        aria-controls="${this.id}-list"
-        aria-expanded="${this._expanded}"
-        aria-autocomplete="list"
-        aria-haspopup="listbox"
-        aria-disabled="${this.disabled}"
-        aria-invalid="${!this._isValid}"
-        aria-errormessage="${!this._isValid ? `error-msg-${this.id}` : nothing}"
-        aria-required="${this.required}"
-        ?disabled=${this.disabled}
-        aria-activedescendant="${ifDefined(this._getActiveOptionId())}"
-        @input="${this._onInput}"
-        .value="${this._filter}"
-        .placeholder="${placeHolderValue}"
-        @focusout="${this._handleFocusOut}"
-        part="input"
-        class=${this.hideCaret ? 'hide-caret' : ''}
-      />`;
+        return html ` <input
+      type="text"
+      id="${this.id}"
+      name="${this.name}"
+      autocomplete="off"
+      aria-label="${this.labelContent}"
+      aria-labelledby="${this.ariaLabelledby}"
+      role="combobox"
+      aria-controls="${this.id}-list"
+      aria-expanded="${this._expanded}"
+      aria-autocomplete="list"
+      aria-haspopup="listbox"
+      aria-disabled="${this.disabled}"
+      aria-invalid="${!this._isValid}"
+      aria-errormessage="${!this._isValid ? `error-msg-${this.id}` : nothing}"
+      aria-required="${this.required}"
+      ?disabled=${this.disabled}
+      aria-activedescendant="${ifDefined(this._getActiveOptionId())}"
+      @input="${this._onInput}"
+      .value="${this._filter}"
+      .placeholder="${placeHolderValue}"
+      @focusout="${this._handleFocusOut}"
+      part="input"
+      class=${this.hideCaret ? 'hide-caret' : ''}
+    />`;
     }
     _renderOption(option) {
-        const hidden = Boolean((this._filter !== '' && !option.value.toLowerCase().includes(this._filter.toLowerCase()) && !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) || option.hidden);
+        const hidden = Boolean((this._filter !== '' &&
+            !option.value.toLowerCase().includes(this._filter.toLowerCase()) &&
+            !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) ||
+            option.hidden);
         const id = `${this.id}-option-${option.value}`;
         const active = this._getActiveOptionId() === id;
         const selected = this.value.includes(option.value);
@@ -358,11 +371,16 @@ export class TtCombobox extends LitElement {
     }
     render() {
         return html `
-      <div class="tt-combobox-container" @focus="${this._onFocus}" @keydown="${this._onKeyUp}" @click="${this._onClick}"
-           aria-disabled="${this.disabled}" part="container">
+      <div
+        class="tt-combobox-container"
+        @focus="${this._onFocus}"
+        @keydown="${this._onKeyUp}"
+        @click="${this._onClick}"
+        aria-disabled="${this.disabled}"
+        part="container"
+      >
         <slot name="icon" part="icon"></slot>
-        ${this._renderCombobox()}
-        ${this._renderChevron()}
+        ${this._renderCombobox()} ${this._renderChevron()}
         <ul
           id="${this.id}-list"
           role="listbox"
@@ -371,16 +389,20 @@ export class TtCombobox extends LitElement {
           part="listbox"
           ?data-open-upward="${this.openUpward}"
         >
-          ${this._renderSelectAll()}
-
-          ${repeat(this.options, opt => opt.value, this._renderOption.bind(this))}
+          ${this._renderSelectAll()} ${repeat(this.options, (opt) => opt.value, this._renderOption.bind(this))}
 
           <li part="no-results" class="no-results">No results</li>
         </ul>
       </div>
       <slot name="option" @slotchange=${() => this.requestUpdate('options')}></slot>
-      <div class="errormessage" id="error-msg-${this.id}" role="alert" aria-atomic="true"
-           ?data-hidden="${!this._hasErrorContent()}" part="error">
+      <div
+        class="errormessage"
+        id="error-msg-${this.id}"
+        role="alert"
+        aria-atomic="true"
+        ?data-hidden="${!this._hasErrorContent()}"
+        part="error"
+      >
         ${unsafeSVG(alert)}
         <slot name="error"></slot>
       </div>
@@ -391,7 +413,7 @@ TtCombobox.styles = styles;
 TtCombobox.formAssociated = true;
 TtCombobox.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true
+    delegatesFocus: true,
 };
 __decorate([
     property({ type: Boolean })

package/dist/src/TtCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\nimport { TtOption } from './tt-option/TtOption.js';\n\n\nexport class TtCombobox extends LitElement {\n  static styles = styles;\n\n  static formAssociated = true;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  @property({ type: Boolean })\n  multiselect = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, attribute: 'display-select-all' })\n  displaySelectAll = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledby = nothing;\n\n  @property({ type: Boolean, attribute: 'hide-caret' })\n  hideCaret = false;\n\n  @property({ type: String })\n  placeholder?: string;\n\n  @property({ type: String, attribute: 'select-all-placeholder' })\n  selectAllPlaceholder?: string;\n\n  @property({ type: Boolean, attribute: 'open-upward' })\n  openUpward = false;\n\n  get form(): HTMLFormElement | null {\n    return this.internals.form;\n  }\n\n  @state()\n  protected _activeOption: number = -1;\n\n  @state()\n  protected _expanded = false;\n\n  @state()\n  protected _filter: string = '';\n\n  @queryAssignedElements({ slot: 'option', selector: 'option' })\n  options!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({ slot: 'option', selector: 'tt-option:not([disabled])' })\n  activeOptions!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({ slot: 'error' })\n  protected errorElements!: Array<HTMLElement>;\n\n  @queryAll('tt-option:not([hidden], [disabled])')\n  protected _visibleOptions!: Array<TtOption>;\n\n  @queryAll('tt-option:not([hidden], .select-all')\n  protected _visibleOptionsNotSelectAll!: Array<TtOption>;\n\n  @queryAll('tt-option:not([disabled], .select-all)')\n  protected _selectableOptions!: NodeListOf<TtOption>;\n\n  @queryAll('tt-option:not([disabled], [hidden], .select-all)')\n  protected _selectableVisibleOptions!: NodeListOf<TtOption>;\n\n  @query('input[role=\"combobox\"]')\n  protected _comboboxInput!: HTMLInputElement;\n\n  @query('button:has(svg)')\n  protected _chevronButton!: HTMLButtonElement;\n\n  public internals: ReturnType<typeof this.attachInternals>;\n\n  @property({ type: Array<String>, attribute: 'value' })\n  public value: string[] = [];\n\n  private get _isAllSelected(): boolean {\n    return Boolean(this._visibleOptionsNotSelectAll.length) && Array.from(this._visibleOptionsNotSelectAll).every(option => this.value.includes(option.value));\n  }\n\n  protected get _selectedVisibleOptions(): Array<TtOption> {\n    return Array.from(this._visibleOptions).filter(option => this.value.includes(option.value));\n  }\n\n  protected get _selectedOptions(): Array<TtOption> {\n    return Array.from(this._visibleOptionsNotSelectAll).filter(option => this.value.includes(option.value));\n  }\n\n  private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes') {\n        this.requestUpdate('options');\n      }\n    });\n  });\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  private _handleFocusOut(e: FocusEvent) {\n    if (!this.shadowRoot!.contains(e.relatedTarget as Node | null)) {\n      this._expanded = false;\n    }\n  }\n\n  private _onFocus() {\n    this._comboboxInput.focus();\n  }\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._onFocus);\n  }\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('focus', this._onFocus);\n  }\n\n  protected firstUpdated(changedProperties: PropertyValues) {\n    this.internals.setFormValue(JSON.stringify(this.value));\n\n    this._reportValidity();\n    this._listenForOptionChange();\n\n    super.firstUpdated(changedProperties);\n  }\n\n  protected update(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      this._valueChanged();\n\n      if (changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {\n        this._dispatchSelectedOptions();\n        this._reportValidity();\n      }\n    }\n\n    if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n      this.internals.states.add('interacted');\n    }\n\n    if (changedProperties.has('options')) {\n      this.updateComplete.then(() => {\n        const selectedAssignedOptions = Array.from(this.options).filter(option => option.selected);\n        this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map(option => option.value!)]));\n        this._listenForOptionChange();\n      });\n    }\n    super.update(changedProperties);\n  }\n\n  private _valueChanged = () => {\n    this._selectableOptions.forEach(option => {\n      if (this.value.includes(option.value!)) {\n        this._checkOption(option);\n      } else {\n        this._uncheckOption(option);\n      }\n    });\n\n    this.internals.setFormValue(JSON.stringify(this.value));\n  };\n\n  private _listenForOptionChange = () => {\n    this.options.forEach(option => {\n      this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n    });\n  };\n\n  private _reportValidity() {\n    if (this.required && !this.value.length) {\n      const errorMessage = this.multiselect ? 'Please select at least one tt-option' : 'Please select an tt-option';\n\n      this.internals.setValidity({\n        valueMissing: true\n      }, errorMessage, this._comboboxInput);\n      this.internals.states.add('--invalid');\n    } else if (!this.internals.validity.valid) {\n      this.internals.setValidity({});\n\n      if (this.internals.states.has('--invalid')) {\n        this.internals.states.delete('--invalid');\n      }\n    }\n  }\n\n  private get labels(): Array<HTMLElement> {\n    return <Array<HTMLElement>>[...this.internals.labels];\n  }\n\n  private get labelContent(): string {\n    if (this.ariaLabel !== null) {\n      return this.ariaLabel;\n    }\n\n    return this.labels.map(label => label.innerText).join(', ');\n  }\n\n  private _onKeyUp(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this._expanded) {\n          this._expanded = true;\n          this._activeOption = -1;\n        } else {\n          this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this._expanded) {\n          this._activeOption = Math.max(0, this._activeOption - 1);\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\n        if (this._expanded) {\n          this._expanded = false;\n        } else if (this._filter !== '') {\n          this._filter = '';\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this._expanded) {\n          this._visibleOptions[this._activeOption].click();\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _uncheckOption(option: HTMLElement) {\n    if (option.dataset.deselectable !== 'true') return;\n\n    option.setAttribute('aria-selected', 'false');\n    const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n    if (checkbox) {\n      checkbox.checked = false;\n    }\n  }\n\n  private _checkOption(option: HTMLElement) {\n    if (!this.multiselect) {\n      this._selectableOptions.forEach(opt => {\n        this._uncheckOption(opt);\n      });\n    }\n\n    option.setAttribute('aria-selected', 'true');\n    const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n    if (checkbox) {\n      checkbox.checked = true;\n    }\n  }\n\n  private _getActiveOptionId(): string | undefined {\n    if (this._activeOption === -1 || this._visibleOptions.length === 0) {\n      return undefined;\n    }\n\n    const option = this._visibleOptions[this._activeOption];\n    return option.id;\n  }\n\n  private _onClick() {\n    this._expanded = !this._expanded;\n\n    if (this._expanded) {\n      (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n    }\n  }\n\n  private _onChevronClick() {\n    (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n  }\n\n  private _onClickOption(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const option = event.currentTarget as TtOption;\n    if (option.disabled) return;\n\n    const selectedValue = option.value as string;\n\n    if (this.multiselect) {\n      if (this.value.includes(selectedValue)) {\n        this.value = this.value.filter(value => value !== selectedValue);\n      } else {\n        this.value = [...this.value, selectedValue];\n      }\n    } else {\n      this.value = [selectedValue];\n      this._expanded = false;\n    }\n  }\n\n  private _onInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    const filter = input.value;\n    if (filter !== '' && !this._expanded) {\n      this._expanded = true;\n    }\n    this._activeOption = -1;\n    this._filter = filter;\n  }\n\n  private _dispatchSelectedOptions() {\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  private _selectAll = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    // If filtering, and all visible options are selected, deselect only visible options\n    // Else if filtering, select all visible options\n\n    if (this._filter !== '' && this._isAllSelected) {\n      const selectedVisibleValues = this._selectedVisibleOptions.map(option => option.value);\n      this.value = this.value.filter(value => !selectedVisibleValues.includes(value));\n    } else if (this._filter !== '') {\n      this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map(option => option.value)]));\n    } else if (this.value.length === this._selectableOptions.length) {\n      this.value = [];\n    } else {\n      this.value = Array.from(this._selectableOptions).map(option => option.value);\n    }\n  };\n\n  private get _isValid(): boolean {\n    return this.internals.validity.valid && !this.invalid;\n  }\n\n  private _renderCombobox() {\n    const placeHolderValue = guard(\n      [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder],\n      () => {\n        if (this.placeholder) {\n          return this.placeholder;\n        }\n\n        if (this.disabled) {\n          return 'Disabled';\n        }\n        if (!this.value.length) {\n          return 'No options selected';\n        }\n        if (this.value.length === 1) {\n          return Array.from(this._selectableVisibleOptions).find(option => option.value === this.value[0])?.textContent?.trim();\n        }\n\n        if (this._isAllSelected) {\n          return this.selectAllPlaceholder || 'All options selected';\n        }\n\n        return `${this._selectedVisibleOptions.length} options selected`;\n      });\n\n    return html`\n      <input\n        type=\"text\"\n        id=\"${this.id}\"\n        name=\"${this.name}\"\n        autocomplete=\"off\"\n        aria-label=\"${this.labelContent}\"\n        aria-labelledby=\"${this.ariaLabelledby}\"\n        role=\"combobox\"\n        aria-controls=\"${this.id}-list\"\n        aria-expanded=\"${this._expanded}\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-disabled=\"${this.disabled}\"\n        aria-invalid=\"${!this._isValid}\"\n        aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n        aria-required=\"${this.required}\"\n        ?disabled=${this.disabled}\n        aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n        @input=\"${this._onInput}\"\n        .value=\"${this._filter}\"\n        .placeholder=\"${placeHolderValue}\"\n        @focusout=\"${this._handleFocusOut}\"\n        part=\"input\"\n        class=${this.hideCaret ? 'hide-caret' : ''}\n      />`;\n  }\n\n  private _renderSelectAll = () => {\n    if (!this.multiselect || !this.displaySelectAll) {\n      return nothing;\n    }\n    const id = `${this.id}-option-select-all`;\n    const active = this._getActiveOptionId() === id;\n    const selected = this._isAllSelected;\n    // eslint-disable-next-line lit-a11y/click-events-have-key-events\n\n    return html`\n      <tt-option\n        id=\"${id}\"\n        class=\"select-all\"\n        ?selected=${selected}\n        ?active=${active}\n        include-checkbox\n        @click=\"${this._selectAll}\"\n        exportparts=\"option, checkbox\"\n        part=\"option\"\n        value=\"select-all\"\n      >Select all</tt-option>\n    `;\n  };\n\n  private _renderOption(option: HTMLOptionElement) {\n    const hidden = Boolean((this._filter !== '' && !option.value.toLowerCase().includes(this._filter.toLowerCase()) && !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) || option.hidden);\n\n    const id = `${this.id}-option-${option.value}`;\n    const active = this._getActiveOptionId() === id;\n    const selected = this.value.includes(option.value);\n\n    return html`\n      <tt-option\n        id=\"${id}\"\n        value=\"${option.value}\"\n        ?selected=${selected}\n        ?disabled=${option.disabled}\n        ?active=${active}\n        ?include-checkbox=${this.multiselect}\n        ?hidden=${hidden}\n        @click=\"${this._onClickOption}\"\n      >\n        ${unsafeHTML(option.innerHTML)}\n      </tt-option>\n    `;\n  }\n\n  private _renderChevron = () => html`\n    <button type=\"button\" aria-label=\"Expand\" @click=\"${this._onChevronClick}\" aria-expanded=\"${this._expanded}\"\n            aria-controls=\"${this.id}-list\" tabindex=\"-1\" ?disabled=${this.disabled} part=\"arrow\">\n      ${unsafeSVG(chevronDown)}\n    </button>\n  `;\n\n  private _hasErrorContent(): boolean {\n    return this.errorElements?.length > 0;\n  }\n\n  render() {\n    return html`\n      <div class=\"tt-combobox-container\" @focus=\"${this._onFocus}\" @keydown=\"${this._onKeyUp}\" @click=\"${this._onClick}\"\n           aria-disabled=\"${this.disabled}\" part=\"container\">\n        <slot name=\"icon\" part=\"icon\"></slot>\n        ${this._renderCombobox()}\n        ${this._renderChevron()}\n        <ul\n          id=\"${this.id}-list\"\n          role=\"listbox\"\n          aria-multiselectable=\"${this.multiselect}\"\n          aria-label=\"${this.labelContent}\"\n          part=\"listbox\"\n          ?data-open-upward=\"${this.openUpward}\"\n        >\n          ${this._renderSelectAll()}\n\n          ${repeat(this.options, opt => opt.value, this._renderOption.bind(this))}\n\n          <li part=\"no-results\" class=\"no-results\">No results</li>\n        </ul>\n      </div>\n      <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n      <div class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\"\n           ?data-hidden=\"${!this._hasErrorContent()}\" part=\"error\">\n        ${unsafeSVG(alert)}\n        <slot name=\"error\"></slot>\n      </div>\n    `;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-combobox': TtCombobox;\n  }\n}\n"]}
+{"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\nimport { TtOption } from './tt-option/TtOption.js';\n\nexport class TtCombobox extends LitElement {\n  static styles = styles;\n\n  static formAssociated = true;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @property({ type: Boolean })\n  multiselect = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, attribute: 'display-select-all' })\n  displaySelectAll = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledby = nothing;\n\n  @property({ type: Boolean, attribute: 'hide-caret' })\n  hideCaret = false;\n\n  @property({ type: String })\n  placeholder?: string;\n\n  @property({ type: String, attribute: 'select-all-placeholder' })\n  selectAllPlaceholder?: string;\n\n  @property({ type: Boolean, attribute: 'open-upward' })\n  openUpward = false;\n\n  get form(): HTMLFormElement | null {\n    return this.internals.form;\n  }\n\n  @state()\n  protected _activeOption: number = -1;\n\n  @state()\n  protected _expanded = false;\n\n  @state()\n  protected _filter: string = '';\n\n  @queryAssignedElements({ slot: 'option', selector: 'option' })\n  options!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({ slot: 'option', selector: 'tt-option:not([disabled])' })\n  activeOptions!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({ slot: 'error' })\n  protected errorElements!: Array<HTMLElement>;\n\n  @queryAll('tt-option:not([hidden], [disabled])')\n  protected _visibleOptions!: Array<TtOption>;\n\n  @queryAll('tt-option:not([hidden], .select-all')\n  protected _visibleOptionsNotSelectAll!: Array<TtOption>;\n\n  @queryAll('tt-option:not([disabled], .select-all)')\n  protected _selectableOptions!: NodeListOf<TtOption>;\n\n  @queryAll('tt-option:not([disabled], [hidden], .select-all)')\n  protected _selectableVisibleOptions!: NodeListOf<TtOption>;\n\n  @query('input[role=\"combobox\"]')\n  protected _comboboxInput!: HTMLInputElement;\n\n  @query('button:has(svg)')\n  protected _chevronButton!: HTMLButtonElement;\n\n  public internals: ReturnType<typeof this.attachInternals>;\n\n  @property({ type: Array<string>, attribute: 'value' })\n  public value: string[] = [];\n\n  private get _isAllSelected(): boolean {\n    return (\n      Boolean(this._visibleOptionsNotSelectAll.length) &&\n      Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value))\n    );\n  }\n\n  protected get _selectedVisibleOptions(): Array<TtOption> {\n    return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));\n  }\n\n  protected get _selectedOptions(): Array<TtOption> {\n    return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));\n  }\n\n  private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      if (mutation.type === 'attributes') {\n        this.requestUpdate('options');\n      }\n    });\n  });\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  private _handleFocusOut(e: FocusEvent) {\n    if (!this.shadowRoot!.contains(e.relatedTarget as Node | null)) {\n      this._expanded = false;\n    }\n  }\n\n  private _onFocus() {\n    this._comboboxInput.focus();\n  }\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._onFocus);\n  }\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('focus', this._onFocus);\n  }\n\n  protected firstUpdated(changedProperties: PropertyValues) {\n    this.internals.setFormValue(JSON.stringify(this.value));\n\n    this._reportValidity();\n    this._listenForOptionChange();\n\n    super.firstUpdated(changedProperties);\n  }\n\n  protected update(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      this._valueChanged();\n\n      if (\n        changedProperties.get('value') !== undefined &&\n        JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)\n      ) {\n        this._dispatchSelectedOptions();\n        this._reportValidity();\n      }\n    }\n\n    if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n      this.internals.states.add('interacted');\n    }\n\n    if (changedProperties.has('options')) {\n      this.updateComplete.then(() => {\n        const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);\n        this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value!)]));\n        this._listenForOptionChange();\n      });\n    }\n    super.update(changedProperties);\n  }\n\n  private _valueChanged = () => {\n    this._selectableOptions.forEach((option) => {\n      if (this.value.includes(option.value!)) {\n        this._checkOption(option);\n      } else {\n        this._uncheckOption(option);\n      }\n    });\n\n    this.internals.setFormValue(JSON.stringify(this.value));\n  };\n\n  private _listenForOptionChange = () => {\n    this.options.forEach((option) => {\n      this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n    });\n  };\n\n  private _reportValidity() {\n    if (this.required && !this.value.length) {\n      const errorMessage = this.multiselect ? 'Please select at least one tt-option' : 'Please select an tt-option';\n\n      this.internals.setValidity(\n        {\n          valueMissing: true,\n        },\n        errorMessage,\n        this._comboboxInput\n      );\n      this.internals.states.add('--invalid');\n    } else if (!this.internals.validity.valid) {\n      this.internals.setValidity({});\n\n      if (this.internals.states.has('--invalid')) {\n        this.internals.states.delete('--invalid');\n      }\n    }\n  }\n\n  private get labels(): Array<HTMLElement> {\n    return <Array<HTMLElement>>[...this.internals.labels];\n  }\n\n  private get labelContent(): string {\n    if (this.ariaLabel !== null) {\n      return this.ariaLabel;\n    }\n\n    return this.labels.map((label) => label.innerText).join(', ');\n  }\n\n  private _onKeyUp(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this._expanded) {\n          this._expanded = true;\n          this._activeOption = -1;\n        } else {\n          this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this._expanded) {\n          this._activeOption = Math.max(0, this._activeOption - 1);\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\n        if (this._expanded) {\n          this._expanded = false;\n        } else if (this._filter !== '') {\n          this._filter = '';\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this._expanded) {\n          this._visibleOptions[this._activeOption].click();\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _uncheckOption(option: HTMLElement) {\n    if (option.dataset.deselectable !== 'true') return;\n\n    option.setAttribute('aria-selected', 'false');\n    const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n    if (checkbox) {\n      checkbox.checked = false;\n    }\n  }\n\n  private _checkOption(option: HTMLElement) {\n    if (!this.multiselect) {\n      this._selectableOptions.forEach((opt) => {\n        this._uncheckOption(opt);\n      });\n    }\n\n    option.setAttribute('aria-selected', 'true');\n    const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n    if (checkbox) {\n      checkbox.checked = true;\n    }\n  }\n\n  private _getActiveOptionId(): string | undefined {\n    if (this._activeOption === -1 || this._visibleOptions.length === 0) {\n      return undefined;\n    }\n\n    const option = this._visibleOptions[this._activeOption];\n    return option.id;\n  }\n\n  private _onClick() {\n    this._expanded = !this._expanded;\n\n    if (this._expanded) {\n      (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n    }\n  }\n\n  private _onChevronClick() {\n    (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n  }\n\n  private _onClickOption(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const option = event.currentTarget as TtOption;\n    if (option.disabled) return;\n\n    const selectedValue = option.value as string;\n\n    if (this.multiselect) {\n      if (this.value.includes(selectedValue)) {\n        this.value = this.value.filter((value) => value !== selectedValue);\n      } else {\n        this.value = [...this.value, selectedValue];\n      }\n    } else {\n      this.value = [selectedValue];\n      this._expanded = false;\n    }\n  }\n\n  private _onInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    const filter = input.value;\n    if (filter !== '' && !this._expanded) {\n      this._expanded = true;\n    }\n    this._activeOption = -1;\n    this._filter = filter;\n  }\n\n  private _dispatchSelectedOptions() {\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _selectAll = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    // If filtering, and all visible options are selected, deselect only visible options\n    // Else if filtering, select all visible options\n\n    if (this._filter !== '' && this._isAllSelected) {\n      const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);\n      this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));\n    } else if (this._filter !== '') {\n      this.value = Array.from(\n        new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)])\n      );\n    } else if (this.value.length === this._selectableOptions.length) {\n      this.value = [];\n    } else {\n      this.value = Array.from(this._selectableOptions).map((option) => option.value);\n    }\n  };\n\n  private get _isValid(): boolean {\n    return this.internals.validity.valid && !this.invalid;\n  }\n\n  private _renderCombobox() {\n    const placeHolderValue = guard(\n      [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder],\n      () => {\n        if (this.placeholder) {\n          return this.placeholder;\n        }\n\n        if (this.disabled) {\n          return 'Disabled';\n        }\n        if (!this.value.length) {\n          return 'No options selected';\n        }\n        if (this.value.length === 1) {\n          return Array.from(this._selectableVisibleOptions)\n            .find((option) => option.value === this.value[0])\n            ?.textContent?.trim();\n        }\n\n        if (this._isAllSelected) {\n          return this.selectAllPlaceholder || 'All options selected';\n        }\n\n        return `${this._selectedVisibleOptions.length} options selected`;\n      }\n    );\n\n    return html` <input\n      type=\"text\"\n      id=\"${this.id}\"\n      name=\"${this.name}\"\n      autocomplete=\"off\"\n      aria-label=\"${this.labelContent}\"\n      aria-labelledby=\"${this.ariaLabelledby}\"\n      role=\"combobox\"\n      aria-controls=\"${this.id}-list\"\n      aria-expanded=\"${this._expanded}\"\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      aria-disabled=\"${this.disabled}\"\n      aria-invalid=\"${!this._isValid}\"\n      aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n      aria-required=\"${this.required}\"\n      ?disabled=${this.disabled}\n      aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n      @input=\"${this._onInput}\"\n      .value=\"${this._filter}\"\n      .placeholder=\"${placeHolderValue}\"\n      @focusout=\"${this._handleFocusOut}\"\n      part=\"input\"\n      class=${this.hideCaret ? 'hide-caret' : ''}\n    />`;\n  }\n\n  private _renderSelectAll = () => {\n    if (!this.multiselect || !this.displaySelectAll) {\n      return nothing;\n    }\n    const id = `${this.id}-option-select-all`;\n    const active = this._getActiveOptionId() === id;\n    const selected = this._isAllSelected;\n\n    return html`\n      <tt-option\n        id=\"${id}\"\n        class=\"select-all\"\n        ?selected=${selected}\n        ?active=${active}\n        include-checkbox\n        @click=\"${this._selectAll}\"\n        exportparts=\"option, checkbox\"\n        part=\"option\"\n        value=\"select-all\"\n        >Select all</tt-option\n      >\n    `;\n  };\n\n  private _renderOption(option: HTMLOptionElement) {\n    const hidden = Boolean(\n      (this._filter !== '' &&\n        !option.value.toLowerCase().includes(this._filter.toLowerCase()) &&\n        !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) ||\n        option.hidden\n    );\n\n    const id = `${this.id}-option-${option.value}`;\n    const active = this._getActiveOptionId() === id;\n    const selected = this.value.includes(option.value);\n\n    return html`\n      <tt-option\n        id=\"${id}\"\n        value=\"${option.value}\"\n        ?selected=${selected}\n        ?disabled=${option.disabled}\n        ?active=${active}\n        ?include-checkbox=${this.multiselect}\n        ?hidden=${hidden}\n        @click=\"${this._onClickOption}\"\n      >\n        ${unsafeHTML(option.innerHTML)}\n      </tt-option>\n    `;\n  }\n\n  private _renderChevron = () => html`\n    <button\n      type=\"button\"\n      aria-label=\"Expand\"\n      @click=\"${this._onChevronClick}\"\n      aria-expanded=\"${this._expanded}\"\n      aria-controls=\"${this.id}-list\"\n      tabindex=\"-1\"\n      ?disabled=${this.disabled}\n      part=\"arrow\"\n    >\n      ${unsafeSVG(chevronDown)}\n    </button>\n  `;\n\n  private _hasErrorContent(): boolean {\n    return this.errorElements?.length > 0;\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tt-combobox-container\"\n        @focus=\"${this._onFocus}\"\n        @keydown=\"${this._onKeyUp}\"\n        @click=\"${this._onClick}\"\n        aria-disabled=\"${this.disabled}\"\n        part=\"container\"\n      >\n        <slot name=\"icon\" part=\"icon\"></slot>\n        ${this._renderCombobox()} ${this._renderChevron()}\n        <ul\n          id=\"${this.id}-list\"\n          role=\"listbox\"\n          aria-multiselectable=\"${this.multiselect}\"\n          aria-label=\"${this.labelContent}\"\n          part=\"listbox\"\n          ?data-open-upward=\"${this.openUpward}\"\n        >\n          ${this._renderSelectAll()} ${repeat(this.options, (opt) => opt.value, this._renderOption.bind(this))}\n\n          <li part=\"no-results\" class=\"no-results\">No results</li>\n        </ul>\n      </div>\n      <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n      <div\n        class=\"errormessage\"\n        id=\"error-msg-${this.id}\"\n        role=\"alert\"\n        aria-atomic=\"true\"\n        ?data-hidden=\"${!this._hasErrorContent()}\"\n        part=\"error\"\n      >\n        ${unsafeSVG(alert)}\n        <slot name=\"error\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-combobox': TtCombobox;\n  }\n}\n"]}

package/dist/src/styles.js

@@ -49,11 +49,11 @@ export const styles = css `
     height: 20px;
   }
 
-  .tt-combobox-container:has([role="combobox"][aria-invalid="true"]) ~ .errormessage {
+  .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {
     visibility: visible;
   }
 
-  :has([role="combobox"][aria-invalid="true"]) ::slotted([slot="error"]) {
+  :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {
     color: var(--color-alert-400, darkred);
     font-size: var(--font-size-100);
     margin: 0;
@@ -61,7 +61,7 @@ export const styles = css `
     line-height: 1.2;
   }
 
-  slot[name="option"]::slotted(*) {
+  slot[name='option']::slotted(*) {
     display: none;
   }
 
@@ -88,11 +88,11 @@ export const styles = css `
     //width: 100%;
   }
 
-  [role="listbox"] {
+  [role='listbox'] {
     display: none;
   }
 
-  [role="combobox"] {
+  [role='combobox'] {
     width: 100%;
     border-style: none;
     background-color: transparent;
@@ -103,26 +103,26 @@ export const styles = css `
     caret-color: transparent;
   }
 
-  [role="combobox"]::placeholder {
+  [role='combobox']::placeholder {
     color: var(--tt-combobox-placeholder-color, var(--color-text-300));
     font-family: var(--font-family-inter);
     font-size: var(--tt-combobox-font-size, var(--font-size-200));
   }
 
-  :host([disabled]) [role="combobox"]::placeholder {
+  :host([disabled]) [role='combobox']::placeholder {
     color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));
   }
 
-  [role="combobox"]:placeholder-shown {
+  [role='combobox']:placeholder-shown {
     text-overflow: ellipsis;
     overflow: clip;
   }
 
-  [role="combobox"]:focus {
+  [role='combobox']:focus {
     outline: none;
   }
 
-  [role="combobox"] ~ button {
+  [role='combobox'] ~ button {
     appearance: none;
     padding: 0;
     border-width: 0;
@@ -130,16 +130,16 @@ export const styles = css `
     aspect-ratio: 1;
   }
 
-  [role="combobox"] ~ button svg {
+  [role='combobox'] ~ button svg {
     transition: transform 0.2s ease-in-out;
     color: var(--tt-combobox-dropdown-color, var(--color-text-400));
   }
 
-  [role="combobox"][aria-expanded="true"] ~ button svg {
+  [role='combobox'][aria-expanded='true'] ~ button svg {
     transform: rotate(180deg);
   }
 
-  [role="combobox"][aria-expanded="true"] ~ [role="listbox"] {
+  [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {
     display: block;
     width: max-content;
     max-width: var(--tt-combobox-list-max-width, 35ch);
@@ -160,7 +160,6 @@ export const styles = css `
     max-height: var(--tt-combobox-max-height, 400px);
     overflow-y: auto;
 
-
     .no-results {
       display: none;
     }
@@ -180,7 +179,6 @@ export const styles = css `
         overflow-y: visible;
         flex: 1;
 
-
         span {
           overflow: hidden;
           text-overflow: ellipsis;
@@ -196,12 +194,12 @@ export const styles = css `
     }
   }
 
-  [role="combobox"][aria-expanded="true"] ~ [role="listbox"][data-open-upward] {
+  [role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {
     top: unset;
     bottom: calc(100% + 0.5rem);
   }
 
-  slot[name="icon"] {
+  slot[name='icon'] {
     display: inline-block;
     max-width: var(--tt-combobox-icon-size, 1rem);
     aspect-ratio: 1;

package/dist/src/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6NvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles= css`\n  :host {\n    display: flex;\n    flex-direction: var(--tt-combobox-flex-direction, row);\n    align-items: var(--tt-combobox-align-items, center);\n    justify-content: var(--tt-combobox-justify-content, initial);\n    align-content: var(--tt-combobox-align-content, initial);\n    gap: var(--tt-combobox-gap, 0.5rem);\n    font-size: var(--tt-combobox-font-size, var(--font-size-200));\n    color: var(--tt-combobox-color, var(--color-text-400));\n  }\n\n  :host([disabled]) .tt-combobox-container {\n    border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n    color: var(--tt-combobox-disabled-color, var(--color-text-200));\n    background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n    pointer-events: none;\n  }\n\n  .tt-combobox-container:focus-within {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  .tt-combobox-container:hover {\n    background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n  }\n\n  :host([invalid]) .tt-combobox-container,\n  :host(:state(interacted):invalid) .tt-combobox-container {\n    outline: 1px solid var(--color-alert-400, red);\n  }\n\n  .errormessage {\n    visibility: hidden;\n    display: flex;\n    align-items: center;\n    gap: var(--space-scale-0-5);\n    color: var(--color-alert-400, red);\n\n    &[data-hidden] {\n      display: none;\n    }\n  }\n\n  .errormessage svg path {\n    fill: var(--color-alert-400, red);\n    height: 20px;\n  }\n\n  .tt-combobox-container:has([role=\"combobox\"][aria-invalid=\"true\"]) ~ .errormessage {\n    visibility: visible;\n  }\n\n  :has([role=\"combobox\"][aria-invalid=\"true\"]) ::slotted([slot=\"error\"]) {\n    color: var(--color-alert-400, darkred);\n    font-size: var(--font-size-100);\n    margin: 0;\n    font-weight: var(--font-weight-regular);\n    line-height: 1.2;\n  }\n\n  slot[name=\"option\"]::slotted(*) {\n    display: none;\n  }\n\n  * {\n    box-sizing: border-box;\n    font-family: var(--font-family-sans);\n    cursor: inherit;\n  }\n\n  .tt-combobox-container {\n    position: relative;\n    max-width: var(--tt-combobox-max-width, 300px);\n    min-width: var(--tt-combobox-min-width, 250px);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    border-color: var(--tt-combobox-border-color, var(--color-border-400));\n    border-style: solid;\n    border-width: var(--tt-combobox-border-width, 1px);\n    background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n    padding: 0.5rem;\n    gap: 0.25rem;\n    //width: 100%;\n  }\n\n  [role=\"listbox\"] {\n    display: none;\n  }\n\n  [role=\"combobox\"] {\n    width: 100%;\n    border-style: none;\n    background-color: transparent;\n    font-size: var(--tt-combobox-font-size, var(--font-size-200));\n  }\n\n  .hide-caret {\n    caret-color: transparent;\n  }\n\n  [role=\"combobox\"]::placeholder {\n    color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n    font-family: var(--font-family-inter);\n    font-size: var(--tt-combobox-font-size, var(--font-size-200));\n  }\n\n  :host([disabled]) [role=\"combobox\"]::placeholder {\n    color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n  }\n\n  [role=\"combobox\"]:placeholder-shown {\n    text-overflow: ellipsis;\n    overflow: clip;\n  }\n\n  [role=\"combobox\"]:focus {\n    outline: none;\n  }\n\n  [role=\"combobox\"] ~ button {\n    appearance: none;\n    padding: 0;\n    border-width: 0;\n    background-color: transparent;\n    aspect-ratio: 1;\n  }\n\n  [role=\"combobox\"] ~ button svg {\n    transition: transform 0.2s ease-in-out;\n    color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n  }\n\n  [role=\"combobox\"][aria-expanded=\"true\"] ~ button svg {\n    transform: rotate(180deg);\n  }\n\n  [role=\"combobox\"][aria-expanded=\"true\"] ~ [role=\"listbox\"] {\n    display: block;\n    width: max-content;\n    max-width: var(--tt-combobox-list-max-width, 35ch);\n    min-width: 100%;\n    background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n    border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n    border-radius: var(--border-radius);\n    box-shadow: var(--box-shadow-lg);\n    padding: 0;\n    position: absolute;\n    top: var(--tt-combobox-top, calc(100% + 0.5rem));\n    left: var(--tt-combobox-left, 0);\n    right: var(--tt-combobox-right, unset);\n    bottom: var(--tt-combobox-bottom, unset);\n    z-index: 2;\n    margin: 0;\n    list-style: none;\n    max-height: var(--tt-combobox-max-height, 400px);\n    overflow-y: auto;\n\n\n    .no-results {\n      display: none;\n    }\n\n    &:not(:has(tt-option:not([hidden], .select-all))) {\n      .no-results {\n        display: flex;\n        padding: 0.5rem;\n        box-sizing: border-box;\n        text-align: left;\n        text-overflow: ellipsis;\n        text-wrap: nowrap;\n        align-items: center;\n        gap: 0.25rem;\n        max-width: 100%;\n        width: 100%;\n        overflow-y: visible;\n        flex: 1;\n\n\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          flex: 1;\n          line-height: 1.1;\n        }\n      }\n\n      .select-all {\n        display: none;\n      }\n    }\n  }\n\n  [role=\"combobox\"][aria-expanded=\"true\"] ~ [role=\"listbox\"][data-open-upward] {\n    top: unset;\n    bottom: calc(100% + 0.5rem);\n  }\n\n  slot[name=\"icon\"] {\n    display: inline-block;\n    max-width: var(--tt-combobox-icon-size, 1rem);\n    aspect-ratio: 1;\n  }\n\n  tt-option.select-all::part(option) {\n    border-bottom: 1px solid var(--color-border-300);\n  }\n\n  label {\n    font-size: var(--tt-combobox-label-font-size, inherit);\n    color: var(--tt-combobox-label-color, inherit);\n    font-weight: var(--tt-combobox-label-font-weight, inherit);\n\n    &[data-hidden] {\n      display: none;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: flex;\n    flex-direction: var(--tt-combobox-flex-direction, row);\n    align-items: var(--tt-combobox-align-items, center);\n    justify-content: var(--tt-combobox-justify-content, initial);\n    align-content: var(--tt-combobox-align-content, initial);\n    gap: var(--tt-combobox-gap, 0.5rem);\n    font-size: var(--tt-combobox-font-size, var(--font-size-200));\n    color: var(--tt-combobox-color, var(--color-text-400));\n  }\n\n  :host([disabled]) .tt-combobox-container {\n    border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n    color: var(--tt-combobox-disabled-color, var(--color-text-200));\n    background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n    pointer-events: none;\n  }\n\n  .tt-combobox-container:focus-within {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  .tt-combobox-container:hover {\n    background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n  }\n\n  :host([invalid]) .tt-combobox-container,\n  :host(:state(interacted):invalid) .tt-combobox-container {\n    outline: 1px solid var(--color-alert-400, red);\n  }\n\n  .errormessage {\n    visibility: hidden;\n    display: flex;\n    align-items: center;\n    gap: var(--space-scale-0-5);\n    color: var(--color-alert-400, red);\n\n    &[data-hidden] {\n      display: none;\n    }\n  }\n\n  .errormessage svg path {\n    fill: var(--color-alert-400, red);\n    height: 20px;\n  }\n\n  .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n    visibility: visible;\n  }\n\n  :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n    color: var(--color-alert-400, darkred);\n    font-size: var(--font-size-100);\n    margin: 0;\n    font-weight: var(--font-weight-regular);\n    line-height: 1.2;\n  }\n\n  slot[name='option']::slotted(*) {\n    display: none;\n  }\n\n  * {\n    box-sizing: border-box;\n    font-family: var(--font-family-sans);\n    cursor: inherit;\n  }\n\n  .tt-combobox-container {\n    position: relative;\n    max-width: var(--tt-combobox-max-width, 300px);\n    min-width: var(--tt-combobox-min-width, 250px);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    border-color: var(--tt-combobox-border-color, var(--color-border-400));\n    border-style: solid;\n    border-width: var(--tt-combobox-border-width, 1px);\n    background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n    padding: 0.5rem;\n    gap: 0.25rem;\n    //width: 100%;\n  }\n\n  [role='listbox'] {\n    display: none;\n  }\n\n  [role='combobox'] {\n    width: 100%;\n    border-style: none;\n    background-color: transparent;\n    font-size: var(--tt-combobox-font-size, var(--font-size-200));\n  }\n\n  .hide-caret {\n    caret-color: transparent;\n  }\n\n  [role='combobox']::placeholder {\n    color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n    font-family: var(--font-family-inter);\n    font-size: var(--tt-combobox-font-size, var(--font-size-200));\n  }\n\n  :host([disabled]) [role='combobox']::placeholder {\n    color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n  }\n\n  [role='combobox']:placeholder-shown {\n    text-overflow: ellipsis;\n    overflow: clip;\n  }\n\n  [role='combobox']:focus {\n    outline: none;\n  }\n\n  [role='combobox'] ~ button {\n    appearance: none;\n    padding: 0;\n    border-width: 0;\n    background-color: transparent;\n    aspect-ratio: 1;\n  }\n\n  [role='combobox'] ~ button svg {\n    transition: transform 0.2s ease-in-out;\n    color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n  }\n\n  [role='combobox'][aria-expanded='true'] ~ button svg {\n    transform: rotate(180deg);\n  }\n\n  [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n    display: block;\n    width: max-content;\n    max-width: var(--tt-combobox-list-max-width, 35ch);\n    min-width: 100%;\n    background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n    border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n    border-radius: var(--border-radius);\n    box-shadow: var(--box-shadow-lg);\n    padding: 0;\n    position: absolute;\n    top: var(--tt-combobox-top, calc(100% + 0.5rem));\n    left: var(--tt-combobox-left, 0);\n    right: var(--tt-combobox-right, unset);\n    bottom: var(--tt-combobox-bottom, unset);\n    z-index: 2;\n    margin: 0;\n    list-style: none;\n    max-height: var(--tt-combobox-max-height, 400px);\n    overflow-y: auto;\n\n    .no-results {\n      display: none;\n    }\n\n    &:not(:has(tt-option:not([hidden], .select-all))) {\n      .no-results {\n        display: flex;\n        padding: 0.5rem;\n        box-sizing: border-box;\n        text-align: left;\n        text-overflow: ellipsis;\n        text-wrap: nowrap;\n        align-items: center;\n        gap: 0.25rem;\n        max-width: 100%;\n        width: 100%;\n        overflow-y: visible;\n        flex: 1;\n\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          flex: 1;\n          line-height: 1.1;\n        }\n      }\n\n      .select-all {\n        display: none;\n      }\n    }\n  }\n\n  [role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {\n    top: unset;\n    bottom: calc(100% + 0.5rem);\n  }\n\n  slot[name='icon'] {\n    display: inline-block;\n    max-width: var(--tt-combobox-icon-size, 1rem);\n    aspect-ratio: 1;\n  }\n\n  tt-option.select-all::part(option) {\n    border-bottom: 1px solid var(--color-border-300);\n  }\n\n  label {\n    font-size: var(--tt-combobox-label-font-size, inherit);\n    color: var(--tt-combobox-label-color, inherit);\n    font-weight: var(--tt-combobox-label-font-weight, inherit);\n\n    &[data-hidden] {\n      display: none;\n    }\n  }\n`;\n"]}

package/dist/src/tt-combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"tt-combobox.js","sourceRoot":"","sources":["../../src/tt-combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,0BAA0B,CAAC;AAElC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;QAC9C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAC1D,CAAC;AAEH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\nimport './tt-option/tt-option.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-combobox')) {\n    window.customElements.define('tt-combobox', TtCombobox);\n  }\n\n}\n\nexport { TtCombobox };\n"]}
+{"version":3,"file":"tt-combobox.js","sourceRoot":"","sources":["../../src/tt-combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,0BAA0B,CAAC;AAElC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;QAC9C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAC1D,CAAC;AACH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\nimport './tt-option/tt-option.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-combobox')) {\n    window.customElements.define('tt-combobox', TtCombobox);\n  }\n}\n\nexport { TtCombobox };\n"]}

package/dist/src/tt-option/TtOption.js

@@ -40,8 +40,7 @@ export class TtOption extends LitElement {
         part="option"
       >
         ${this.includeCheckbox
-            ? html `<input type="checkbox" ?checked=${this.selected}
-                        role="presentation" tabindex="-1" part="checkbox">`
+            ? html `<input type="checkbox" ?checked=${this.selected} role="presentation" tabindex="-1" part="checkbox" />`
             : nothing}
         <span>
           <slot></slot>
@@ -53,7 +52,7 @@ export class TtOption extends LitElement {
 TtOption.styles = styles;
 TtOption.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true
+    delegatesFocus: true,
 };
 __decorate([
     property({ type: Boolean })