@haiilo/catalyst 8.1.0 → 8.2.0

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

@@ -7,15 +7,15 @@ import { coerceBoolean, coerceNumber } from "../../utils/coerce";
 import { CatFormHint } from "../cat-form-hint/cat-form-hint";
 import { catI18nRegistry as i18n } from "../cat-i18n/cat-i18n-registry";
 const INIT_STATE = {
-  term: '',
-  isOpen: false,
-  isLoading: false,
-  isResolving: false,
-  options: [],
-  selection: [],
-  tempSelection: [],
-  activeOptionIndex: -1,
-  activeSelectionIndex: -1
+    term: '',
+    isOpen: false,
+    isLoading: false,
+    isResolving: false,
+    options: [],
+    selection: [],
+    tempSelection: [],
+    activeOptionIndex: -1,
+    activeSelectionIndex: -1
 };
 let nextUniqueId = 0;
 let nextTagUniqueId = 0;
@@ -30,1208 +30,1208 @@ let nextTagUniqueId = 0;
  * @part input - The native input element.
  */
 export class CatSelect {
-  constructor() {
-    this._id = `cat-input-${nextUniqueId++}`;
-    this.term$ = new Subject();
-    this.more$ = new Subject();
-    this.valueChangedBySelection = false;
-    this.connector = undefined;
-    this.state = INIT_STATE;
-    this.hasSlottedLabel = false;
-    this.hasSlottedHint = false;
-    this.errorMap = undefined;
-    this.requiredMarker = 'optional';
-    this.horizontal = false;
-    this.multiple = false;
-    this.debounce = 250;
-    this.placement = 'bottom-start';
-    this.value = undefined;
-    this.disabled = false;
-    this.placeholder = undefined;
-    this.hint = undefined;
-    this.identifier = undefined;
-    this.label = '';
-    this.name = undefined;
-    this.labelHidden = false;
-    this.required = false;
-    this.clearable = false;
-    this.tags = false;
-    this.tagHint = undefined;
-    this.noItems = undefined;
-    this.errors = undefined;
-    this.errorUpdate = 0;
-    this.nativeAttributes = undefined;
-  }
-  get id() {
-    return this.identifier || this._id;
-  }
-  onConnectorChanged(connector) {
-    this.reset(connector);
-    this.resolve();
-  }
-  onValueChanged() {
-    !this.valueChangedBySelection ? this.resolve() : (this.valueChangedBySelection = false);
-  }
-  onErrorsChanged(value) {
-    if (!coerceBoolean(this.errorUpdate)) {
-      this.errorMap = undefined;
+    constructor() {
+        this._id = `cat-input-${nextUniqueId++}`;
+        this.term$ = new Subject();
+        this.more$ = new Subject();
+        this.valueChangedBySelection = false;
+        this.connector = undefined;
+        this.state = INIT_STATE;
+        this.hasSlottedLabel = false;
+        this.hasSlottedHint = false;
+        this.errorMap = undefined;
+        this.requiredMarker = 'optional';
+        this.horizontal = false;
+        this.multiple = false;
+        this.debounce = 250;
+        this.placement = 'bottom-start';
+        this.value = undefined;
+        this.disabled = false;
+        this.placeholder = undefined;
+        this.hint = undefined;
+        this.identifier = undefined;
+        this.label = '';
+        this.name = undefined;
+        this.labelHidden = false;
+        this.required = false;
+        this.clearable = false;
+        this.tags = false;
+        this.tagHint = undefined;
+        this.noItems = undefined;
+        this.errors = undefined;
+        this.errorUpdate = 0;
+        this.nativeAttributes = undefined;
     }
-    else {
-      this.errorMapSrc = Array.isArray(value)
-        ? value.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
-        : value === true
-          ? {}
-          : value || undefined;
-      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
+    get id() {
+        return this.identifier || this._id;
     }
-  }
-  onStateChanged(newState, oldState) {
-    const changed = (key) => newState[key] !== oldState[key];
-    if (changed('isOpen')) {
-      this.update();
+    onConnectorChanged(connector) {
+        this.reset(connector);
+        this.resolve();
     }
-    if (changed('activeOptionIndex') && this.state.activeOptionIndex >= 0) {
-      this.dropdown
-        ?.querySelector(`#select-${this.id}-option-${this.state.activeOptionIndex}`)
-        ?.scrollIntoView({ block: 'nearest' });
+    onValueChanged() {
+        !this.valueChangedBySelection ? this.resolve() : (this.valueChangedBySelection = false);
     }
-    if (changed('selection')) {
-      let newValue;
-      if (!this.multiple && this.state.selection.length) {
-        this.hide();
-      }
-      const idsSelected = this.state.selection.map(item => item.item.id);
-      if (!this.tags) {
-        if (this.multiple) {
-          newValue = idsSelected;
+    onErrorsChanged(value) {
+        if (!coerceBoolean(this.errorUpdate)) {
+            this.errorMap = undefined;
         }
         else {
-          newValue = idsSelected.length ? idsSelected[0] : '';
+            this.errorMapSrc = Array.isArray(value)
+                ? value.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
+                : value === true
+                    ? {}
+                    : value || undefined;
+            this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
         }
-      }
-      else {
-        const ids = idsSelected.filter(id => !id.startsWith(`select-${this.id}-tag`));
-        const tags = this.state.selection
-          .filter(item => item.item.id.startsWith(`select-${this.id}-tag`))
-          .map(item => item.render.label);
-        if (this.multiple) {
-          newValue = { ids, tags };
+    }
+    onStateChanged(newState, oldState) {
+        const changed = (key) => newState[key] !== oldState[key];
+        if (changed('isOpen')) {
+            this.update();
         }
-        else {
-          newValue = { id: ids.length ? ids[0] : '', tag: tags.length ? tags[0] : '' };
+        if (changed('activeOptionIndex') && this.state.activeOptionIndex >= 0) {
+            this.dropdown
+                ?.querySelector(`#select-${this.id}-option-${this.state.activeOptionIndex}`)
+                ?.scrollIntoView({ block: 'nearest' });
+        }
+        if (changed('selection')) {
+            let newValue;
+            if (!this.multiple && this.state.selection.length) {
+                this.hide();
+            }
+            const idsSelected = this.state.selection.map(item => item.item.id);
+            if (!this.tags) {
+                if (this.multiple) {
+                    newValue = idsSelected;
+                }
+                else {
+                    newValue = idsSelected.length ? idsSelected[0] : '';
+                }
+            }
+            else {
+                const ids = idsSelected.filter(id => !id.startsWith(`select-${this.id}-tag`));
+                const tags = this.state.selection
+                    .filter(item => item.item.id.startsWith(`select-${this.id}-tag`))
+                    .map(item => item.render.label);
+                if (this.multiple) {
+                    newValue = { ids, tags };
+                }
+                else {
+                    newValue = { id: ids.length ? ids[0] : '', tag: tags.length ? tags[0] : '' };
+                }
+            }
+            if (!oldState.isResolving) {
+                this.valueChangedBySelection = true;
+                this.value = newValue;
+            }
+            this.catChange.emit();
+            this.showErrorsIfTimeout();
         }
-      }
-      if (!oldState.isResolving) {
-        this.valueChangedBySelection = true;
-        this.value = newValue;
-      }
-      this.catChange.emit();
-      this.showErrorsIfTimeout();
-    }
-  }
-  componentDidLoad() {
-    if (this.input) {
-      autosizeInput(this.input);
-    }
-    if (this.trigger && this.dropdown) {
-      autoUpdate(this.trigger, this.dropdown, () => this.update());
-    }
-  }
-  componentWillRender() {
-    this.onErrorsChanged(this.errors);
-    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    if (!this.label && !this.hasSlottedLabel) {
-      log.warn('[A11y] Missing ARIA label on select', this);
-    }
-  }
-  onBlur(event) {
-    if (!this.multiple && this.state.activeOptionIndex >= 0) {
-      if (this.tags && this.state.options[this.state.activeOptionIndex].item.id === `select-${this.id}-option-tag`) {
-        this.createTag(this.state.term);
-      }
-      else {
-        this.select(this.state.options[this.state.activeOptionIndex]);
-      }
-    }
-    this.hide();
-    // Conditionally remove selection if the option was not manually selected through click or enter key press
-    if (!this.multiple && (!this.tags || !this.state.selection?.length)) {
-      if (this.state.tempSelection?.length) {
-        this.patchState({
-          activeSelectionIndex: -1,
-          selection: this.state.tempSelection,
-          tempSelection: [],
-          options: [],
-          term: this.state.tempSelection[0].render.label
-        });
-      }
-      else if (!this.state.selection?.length) {
-        this.patchState({
-          activeSelectionIndex: -1,
-          selection: [],
-          tempSelection: [],
-          options: [],
-          term: ''
-        });
-      }
-    }
-    else {
-      this.patchState({ activeSelectionIndex: -1 });
-    }
-    this.catBlur.emit(event);
-    if (coerceBoolean(this.errorUpdate)) {
-      this.showErrors();
     }
-  }
-  onKeyDown(event) {
-    const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;
-    if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-      this.onArrowKeyDown(event);
+    componentDidLoad() {
+        if (this.input) {
+            autosizeInput(this.input);
+        }
+        if (this.trigger && this.dropdown) {
+            autoUpdate(this.trigger, this.dropdown, () => this.update());
+        }
     }
-    else if (['Enter', ' '].includes(event.key) && isInputFocused) {
-      if (this.tags &&
-        this.state.activeOptionIndex === 0 &&
-        this.state.options[0].item.id === `select-${this.id}-option-tag`) {
-        event.preventDefault();
-        if (this.multiple) {
-          this.toggleTag(this.state.options[0]);
+    componentWillRender() {
+        this.onErrorsChanged(this.errors);
+        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+        if (!this.label && !this.hasSlottedLabel) {
+            log.warn('[A11y] Missing ARIA label on select', this);
         }
-        else {
-          this.createTag(this.state.options[0].render.label);
+    }
+    onBlur(event) {
+        if (!this.multiple && this.state.activeOptionIndex >= 0) {
+            if (this.tags && this.state.options[this.state.activeOptionIndex].item.id === `select-${this.id}-option-tag`) {
+                this.createTag(this.state.term);
+            }
+            else {
+                this.select(this.state.options[this.state.activeOptionIndex]);
+            }
         }
-      }
-      else if (this.state.activeOptionIndex >= 0) {
-        event.preventDefault();
-        if (this.multiple) {
-          this.toggle(this.state.options[this.state.activeOptionIndex]);
+        this.hide();
+        // Conditionally remove selection if the option was not manually selected through click or enter key press
+        if (!this.multiple && (!this.tags || !this.state.selection?.length)) {
+            if (this.state.tempSelection?.length) {
+                this.patchState({
+                    activeSelectionIndex: -1,
+                    selection: this.state.tempSelection,
+                    tempSelection: [],
+                    options: [],
+                    term: this.state.tempSelection[0].render.label
+                });
+            }
+            else if (!this.state.selection?.length) {
+                this.patchState({
+                    activeSelectionIndex: -1,
+                    selection: [],
+                    tempSelection: [],
+                    options: [],
+                    term: ''
+                });
+            }
         }
         else {
-          this.select(this.state.options[this.state.activeOptionIndex]);
+            this.patchState({ activeSelectionIndex: -1 });
+        }
+        this.catBlur.emit(event);
+        if (coerceBoolean(this.errorUpdate)) {
+            this.showErrors();
         }
-      }
-      else if (this.tags && event.key === 'Enter' && this.state.activeOptionIndex < 0) {
-        this.createTag(this.state.term);
-      }
-    }
-    else if (event.key === 'Escape') {
-      if (this.hide()) {
-        event.stopPropagation();
-      }
     }
-    else if (event.key === 'Backspace' || event.key === 'Delete') {
-      this.input?.focus();
-      if (!this.multiple || !this.state.term || (this.input?.selectionStart === 0 && event.key === 'Backspace')) {
-        if (this.state.activeSelectionIndex >= 0) {
-          this.deselect(this.state.selection[this.state.activeSelectionIndex].item.id);
+    onKeyDown(event) {
+        const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;
+        if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            this.onArrowKeyDown(event);
+        }
+        else if (['Enter', ' '].includes(event.key) && isInputFocused) {
+            if (this.tags &&
+                this.state.activeOptionIndex === 0 &&
+                this.state.options[0].item.id === `select-${this.id}-option-tag`) {
+                event.preventDefault();
+                if (this.multiple) {
+                    this.toggleTag(this.state.options[0]);
+                }
+                else {
+                    this.createTag(this.state.options[0].render.label);
+                }
+            }
+            else if (this.state.activeOptionIndex >= 0) {
+                event.preventDefault();
+                if (this.multiple) {
+                    this.toggle(this.state.options[this.state.activeOptionIndex]);
+                }
+                else {
+                    this.select(this.state.options[this.state.activeOptionIndex]);
+                }
+            }
+            else if (this.tags && event.key === 'Enter' && this.state.activeOptionIndex < 0) {
+                this.createTag(this.state.term);
+            }
+        }
+        else if (event.key === 'Escape') {
+            if (this.hide()) {
+                event.stopPropagation();
+            }
         }
-        else if (this.state.selection.length) {
-          const selectionClone = [...this.state.selection];
-          selectionClone.pop();
-          this.patchState({
-            selection: selectionClone,
-            tempSelection: this.state.term ? [...this.state.selection] : []
-          });
+        else if (event.key === 'Backspace' || event.key === 'Delete') {
+            this.input?.focus();
+            if (!this.multiple || !this.state.term || (this.input?.selectionStart === 0 && event.key === 'Backspace')) {
+                if (this.state.activeSelectionIndex >= 0) {
+                    this.deselect(this.state.selection[this.state.activeSelectionIndex].item.id);
+                }
+                else if (this.state.selection.length) {
+                    const selectionClone = [...this.state.selection];
+                    selectionClone.pop();
+                    this.patchState({
+                        selection: selectionClone,
+                        tempSelection: this.state.term ? [...this.state.selection] : []
+                    });
+                }
+            }
+        }
+        else if (event.key === 'Tab') {
+            this.trigger?.setAttribute('tabindex', '-1');
+            if (this.multiple) {
+                this.patchState({ activeSelectionIndex: -1, activeOptionIndex: -1 });
+            }
+            else if (this.state.activeOptionIndex >= 0) {
+                if (this.tags && this.state.options[this.state.activeOptionIndex].item.id === `select-${this.id}-option-tag`) {
+                    this.createTag(this.state.term);
+                }
+                else {
+                    this.select(this.state.options[this.state.activeOptionIndex]);
+                }
+            }
+        }
+        else if (event.key.length === 1) {
+            this.input?.focus();
         }
-      }
     }
-    else if (event.key === 'Tab') {
-      this.trigger?.setAttribute('tabindex', '-1');
-      if (this.multiple) {
-        this.patchState({ activeSelectionIndex: -1, activeOptionIndex: -1 });
-      }
-      else if (this.state.activeOptionIndex >= 0) {
-        if (this.tags && this.state.options[this.state.activeOptionIndex].item.id === `select-${this.id}-option-tag`) {
-          this.createTag(this.state.term);
+    onKeyUp(event) {
+        if (event.key === 'Tab' && !event.shiftKey) {
+            this.hostElement.shadowRoot?.activeElement === this.trigger && this.input?.focus();
+            if (this.hostElement.shadowRoot?.activeElement === this.input) {
+                this.show();
+            }
         }
-        else {
-          this.select(this.state.options[this.state.activeOptionIndex]);
+        else if (event.key === 'Tab' && event.shiftKey) {
+            const clearButton = this.trigger?.querySelector(`#select-clear-btn-${this.id}`);
+            if (clearButton) {
+                this.hostElement.shadowRoot?.activeElement === clearButton && this.show();
+            }
+            else {
+                this.show();
+            }
         }
-      }
     }
-    else if (event.key.length === 1) {
-      this.input?.focus();
+    /**
+     * Connect the functions of the select
+     *
+     * @param connector - The {@link CatSelectConnector} of the select.
+     */
+    async connect(connector) {
+        this.connector = connector;
+        let number$;
+        this.subscription?.unsubscribe();
+        this.subscription = this.term$
+            .asObservable()
+            .pipe(debounce(term => (term ? timer(this.debounce) : of(0))), distinctUntilChanged(), tap(() => (number$ = this.more$.pipe(filter(() => !this.state.isLoading), scan(n => n + 1, 0), startWith(0)))), tap(() => this.patchState({ options: [] })), switchMap(term => number$.pipe(tap(() => this.patchState({ isLoading: true })), switchMap(number => connector.retrieve(term, number)), tap(page => this.patchState({ isLoading: false, totalElements: page.totalElements })), takeWhile(page => !page.last, true), scan((items, page) => [...items, ...page.content], []))))
+            .subscribe(items => {
+            const options = this.toSelectItems(connector, items);
+            if (this.tags &&
+                this.state.term.trim().length &&
+                !options.find(value1 => value1.render.label.toLowerCase() === this.state.term.toLowerCase())) {
+                let label;
+                if (this.isTagSelected(this.state.term)) {
+                    label = this.state.selection.find(item => item.render.label.toLowerCase() === this.state.term.toLowerCase())
+                        ?.render.label;
+                }
+                options.unshift({
+                    item: { id: `select-${this.id}-option-tag` },
+                    render: { label: label ? label : this.state.term }
+                });
+            }
+            this.patchState({
+                options
+            });
+        });
     }
-  }
-  onKeyUp(event) {
-    if (event.key === 'Tab' && !event.shiftKey) {
-      this.hostElement.shadowRoot?.activeElement === this.trigger && this.input?.focus();
-      if (this.hostElement.shadowRoot?.activeElement === this.input) {
-        this.show();
-      }
+    render() {
+        return (h(Host, null, h("div", { class: {
+                'select-field': true,
+                'select-horizontal': this.horizontal
+            } }, h("div", { class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, part: "label" }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { class: "select-container" }, h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
+                pill: true,
+                'select-no-open': true,
+                'select-option-active': this.state.activeSelectionIndex === i
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { ...this.nativeAttributes, part: "input", class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", null), this.invalid && (h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            !this.disabled &&
+            !this.state.isResolving &&
+            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clear(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
+            ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
+            : !this.state.options.length &&
+                !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
     }
-    else if (event.key === 'Tab' && event.shiftKey) {
-      const clearButton = this.trigger?.querySelector(`#select-clear-btn-${this.id}`);
-      if (clearButton) {
-        this.hostElement.shadowRoot?.activeElement === clearButton && this.show();
-      }
-      else {
-        this.show();
-      }
+    get hasHint() {
+        return !!this.hint || !!this.hasSlottedHint || this.invalid;
     }
-  }
-  /**
-   * Connect the functions of the select
-   *
-   * @param connector - The {@link CatSelectConnector} of the select.
-   */
-  async connect(connector) {
-    this.connector = connector;
-    let number$;
-    this.subscription?.unsubscribe();
-    this.subscription = this.term$
-      .asObservable()
-      .pipe(debounce(term => (term ? timer(this.debounce) : of(0))), distinctUntilChanged(), tap(() => (number$ = this.more$.pipe(filter(() => !this.state.isLoading), scan(n => n + 1, 0), startWith(0)))), tap(() => this.patchState({ options: [] })), switchMap(term => number$.pipe(tap(() => this.patchState({ isLoading: true })), switchMap(number => connector.retrieve(term, number)), tap(page => this.patchState({ isLoading: false, totalElements: page.totalElements })), takeWhile(page => !page.last, true), scan((items, page) => [...items, ...page.content], []))))
-      .subscribe(items => {
-      const options = this.toSelectItems(connector, items);
-      if (this.tags &&
-        this.state.term.trim().length &&
-        !options.find(value1 => value1.render.label.toLowerCase() === this.state.term.toLowerCase())) {
-        let label;
-        if (this.isTagSelected(this.state.term)) {
-          label = this.state.selection.find(item => item.render.label.toLowerCase() === this.state.term.toLowerCase())
-            ?.render.label;
-        }
-        options.unshift({
-          item: { id: `select-${this.id}-option-tag` },
-          render: { label: label ? label : this.state.term }
-        });
-      }
-      this.patchState({
-        options
-      });
-    });
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'select-field': true,
-        'select-horizontal': this.horizontal
-      } }, h("div", { class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, part: "label" }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { class: "select-container" }, h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
-        pill: true,
-        'select-no-open': true,
-        'select-option-active': this.state.activeSelectionIndex === i
-      }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { ...this.nativeAttributes, part: "input", class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", null), this.invalid && (h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
-      !this.disabled &&
-      !this.state.isResolving &&
-      this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clear(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
-      ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
-      : !this.state.options.length &&
-        !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
-  }
-  get hasHint() {
-    return !!this.hint || !!this.hasSlottedHint || this.invalid;
-  }
-  get invalid() {
-    return !!Object.keys(this.errorMap || {}).length;
-  }
-  get optionsList() {
-    return this.state.options.map((item, i) => {
-      const isTagOption = this.tags && item.item.id === `select-${this.id}-option-tag`;
-      const isOptionSelected = this.isSelected(item.item.id) || (this.tags && this.isTagSelected(item.render.label));
-      const getLabel = () => {
-        if (isTagOption) {
-          return item.render.label + this.tagTextHelp;
-        }
-        return item.render.label;
-      };
-      return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, tabIndex: -1, labelLeft: true, onFocus: () => this.input?.focus(), onCatChange: e => {
-          !isTagOption ? this.toggle(item) : this.toggleTag(item);
-          e.stopPropagation();
-        } }, h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
-          'select-option-inner': true,
-          'select-option-single': true,
-          'select-option-active': this.state.activeOptionIndex === i
-        }, onFocus: () => this.input?.focus(), onClick: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))));
-    });
-  }
-  resolve() {
-    const connector = this.connector;
-    if (!connector) {
-      return;
+    get invalid() {
+        return !!Object.keys(this.errorMap || {}).length;
     }
-    this.patchState({ isResolving: true });
-    const ids = this.initIds();
-    let tags;
-    if (this.tags) {
-      tags = this.initTags();
+    get optionsList() {
+        return this.state.options.map((item, i) => {
+            const isTagOption = this.tags && item.item.id === `select-${this.id}-option-tag`;
+            const isOptionSelected = this.isSelected(item.item.id) || (this.tags && this.isTagSelected(item.render.label));
+            const getLabel = () => {
+                if (isTagOption) {
+                    return item.render.label + this.tagTextHelp;
+                }
+                return item.render.label;
+            };
+            return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, tabIndex: -1, labelLeft: true, onFocus: () => this.input?.focus(), onCatChange: e => {
+                    !isTagOption ? this.toggle(item) : this.toggleTag(item);
+                    e.stopPropagation();
+                } }, h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
+                    'select-option-inner': true,
+                    'select-option-single': true,
+                    'select-option-active': this.state.activeOptionIndex === i
+                }, onFocus: () => this.input?.focus(), onClick: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))));
+        });
     }
-    const data$ = ids.length ? connector.resolve(ids).pipe(first()) : of([]);
-    data$.pipe(catchError(() => of([]))).subscribe(items => {
-      const selection = this.toSelectItems(connector, items);
-      if (this.tags) {
-        tags
-          .filter(tag => !this.isTagSelected(tag, selection))
-          .forEach((tag, index) => {
-          const item = { id: `select-${this.id}-tag-${index}`, name: tag };
-          selection.push({ item, render: { label: item.name } });
+    resolve() {
+        const connector = this.connector;
+        if (!connector) {
+            return;
+        }
+        this.patchState({ isResolving: true });
+        const ids = this.initIds();
+        let tags;
+        if (this.tags) {
+            tags = this.initTags();
+        }
+        const data$ = ids.length ? connector.resolve(ids).pipe(first()) : of([]);
+        data$.pipe(catchError(() => of([]))).subscribe(items => {
+            const selection = this.toSelectItems(connector, items);
+            if (this.tags) {
+                tags
+                    .filter(tag => !this.isTagSelected(tag, selection))
+                    .forEach((tag, index) => {
+                    const item = { id: `select-${this.id}-tag-${index}`, name: tag };
+                    selection.push({ item, render: { label: item.name } });
+                });
+            }
+            this.patchState({
+                isResolving: false,
+                selection,
+                term: !this.multiple && selection.length ? selection[0].render.label : ''
+            });
         });
-      }
-      this.patchState({
-        isResolving: false,
-        selection,
-        term: !this.multiple && selection.length ? selection[0].render.label : ''
-      });
-    });
-  }
-  toSelectItems(connector, items) {
-    return items.map(item => ({
-      item: { ...item, id: connector.customId ? connector.customId(item) : item.id },
-      render: connector.render(item)
-    }));
-  }
-  show() {
-    if (!this.state.isOpen && this.connector) {
-      // reconnect to reset the connection, i.e. the pagination
-      this.connect(this.connector);
-      this.patchState({ isOpen: true });
-      this.catOpen.emit();
-      this.term$.next('');
-      this.input?.classList.remove('select-input-transparent-caret');
     }
-  }
-  hide() {
-    if (this.state.isOpen) {
-      this.patchState({ isOpen: false, activeOptionIndex: -1 });
-      this.catClose.emit();
-      return true;
+    toSelectItems(connector, items) {
+        return items.map(item => ({
+            item: { ...item, id: connector.customId ? connector.customId(item) : item.id },
+            render: connector.render(item)
+        }));
     }
-    return false;
-  }
-  search(term) {
-    this.patchState({ term, activeOptionIndex: -1, activeSelectionIndex: -1 });
-    this.term$.next(term);
-  }
-  isSelected(id) {
-    return this.state.selection.findIndex(s => s.item.id === id) >= 0;
-  }
-  select(item) {
-    if (!this.isSelected(item.item.id)) {
-      let newSelection;
-      if (this.multiple) {
-        newSelection = [...this.state.selection, item];
-      }
-      else {
-        newSelection = [item];
-        this.search(item.render.label);
-      }
-      this.patchState({ selection: newSelection, tempSelection: [] });
-      if (this.multiple && this.state.term.trim() && this.input) {
-        this.patchState({ term: '', activeOptionIndex: -1 });
-        this.term$.next('');
-        this.input.value = '';
-      }
+    show() {
+        if (!this.state.isOpen && this.connector) {
+            // reconnect to reset the connection, i.e. the pagination
+            this.connect(this.connector);
+            this.patchState({ isOpen: true });
+            this.catOpen.emit();
+            this.term$.next('');
+            this.input?.classList.remove('select-input-transparent-caret');
+        }
     }
-    this.setTransparentCaret();
-  }
-  deselect(id) {
-    if (this.isSelected(id)) {
-      this.patchState({
-        selection: this.state.selection.filter(item => item.item.id !== id),
-        activeSelectionIndex: -1
-      });
+    hide() {
+        if (this.state.isOpen) {
+            this.patchState({ isOpen: false, activeOptionIndex: -1 });
+            this.catClose.emit();
+            return true;
+        }
+        return false;
     }
-  }
-  toggle(item) {
-    this.isSelected(item.item.id)
-      ? this.deselect(item.item.id)
-      : this.tags && this.isTagSelected(item.render.label)
-        ? this.removeTag(item.render.label)
-        : this.select(item);
-  }
-  clear() {
-    if (this.input && this.state.term) {
-      this.patchState({ selection: [], term: '', activeOptionIndex: -1, tempSelection: [] });
-      this.term$.next('');
-      this.input.value = '';
+    search(term) {
+        this.patchState({ term, activeOptionIndex: -1, activeSelectionIndex: -1 });
+        this.term$.next(term);
     }
-    else {
-      this.patchState({ selection: [], tempSelection: [] });
+    isSelected(id) {
+        return this.state.selection.findIndex(s => s.item.id === id) >= 0;
     }
-  }
-  reset(connector) {
-    this.connector = connector ?? this.connector;
-    this.subscription?.unsubscribe();
-    this.subscription = undefined;
-    this.state = INIT_STATE;
-  }
-  onClick(event) {
-    if (this.disabled) {
-      return;
+    select(item) {
+        if (!this.isSelected(item.item.id)) {
+            let newSelection;
+            if (this.multiple) {
+                newSelection = [...this.state.selection, item];
+            }
+            else {
+                newSelection = [item];
+                this.search(item.render.label);
+            }
+            this.patchState({ selection: newSelection, tempSelection: [] });
+            if (this.multiple && this.state.term.trim() && this.input) {
+                this.patchState({ term: '', activeOptionIndex: -1 });
+                this.term$.next('');
+                this.input.value = '';
+            }
+        }
+        this.setTransparentCaret();
     }
-    const elem = event.target;
-    this.trigger?.setAttribute('tabindex', '0');
-    this.input?.focus();
-    if (elem === this.trigger ||
-      elem === this.input ||
-      elem.classList.contains('select-btn') ||
-      elem.nodeName === 'SPAN') {
-      this.state.isOpen ? this.hide() : this.show();
+    deselect(id) {
+        if (this.isSelected(id)) {
+            this.patchState({
+                selection: this.state.selection.filter(item => item.item.id !== id),
+                activeSelectionIndex: -1
+            });
+        }
     }
-  }
-  onInput() {
-    this.search(this.input?.value.trim() || '');
-    if (!this.multiple) {
-      if (this.state.selection.length) {
-        const selectionClone = [...this.state.selection];
-        selectionClone.pop();
-        this.patchState({ selection: selectionClone, tempSelection: [...this.state.selection] });
-      }
-      if (!this.input?.value.trim()) {
-        this.patchState({ tempSelection: [] });
-      }
+    toggle(item) {
+        this.isSelected(item.item.id)
+            ? this.deselect(item.item.id)
+            : this.tags && this.isTagSelected(item.render.label)
+                ? this.removeTag(item.render.label)
+                : this.select(item);
     }
-    this.show();
-  }
-  update() {
-    if (this.trigger && this.dropdown) {
-      computePosition(this.trigger, this.dropdown, {
-        strategy: 'fixed',
-        placement: this.placement,
-        middleware: [offset(CatSelect.DROPDOWN_OFFSET), flip()]
-      }).then(({ x, y, placement }) => {
-        if (this.dropdown) {
-          this.dropdown.dataset.placement = placement;
-          Object.assign(this.dropdown.style, {
-            width: `${this.trigger?.clientWidth}px`,
-            left: `${x}px`,
-            top: `${y}px`
-          });
+    clear() {
+        if (this.input && this.state.term) {
+            this.patchState({ selection: [], term: '', activeOptionIndex: -1, tempSelection: [] });
+            this.term$.next('');
+            this.input.value = '';
+        }
+        else {
+            this.patchState({ selection: [], tempSelection: [] });
         }
-      });
-    }
-  }
-  patchState(update) {
-    this.state = { ...this.state, ...update };
-  }
-  isPillboxActive() {
-    return this.state.activeSelectionIndex >= 0;
-  }
-  get activeDescendant() {
-    let activeDescendant = undefined;
-    if (this.state.activeOptionIndex >= 0) {
-      activeDescendant = `select-${this.id}-option-${this.state.activeOptionIndex}`;
     }
-    else if (this.state.activeSelectionIndex >= 0) {
-      activeDescendant = `select-${this.id}-selection-${this.state.activeSelectionIndex}`;
+    reset(connector) {
+        this.connector = connector ?? this.connector;
+        this.subscription?.unsubscribe();
+        this.subscription = undefined;
+        this.state = INIT_STATE;
     }
-    return activeDescendant;
-  }
-  onArrowKeyDown(event) {
-    let preventDefault = false;
-    this.input?.focus();
-    switch (event.key) {
-      case 'ArrowDown':
-        preventDefault = true;
-        this.state.isOpen
-          ? this.patchState({
-            activeOptionIndex: Math.min(this.state.activeOptionIndex + 1, this.state.options.length - 1),
-            activeSelectionIndex: -1
-          })
-          : this.show();
-        break;
-      case 'ArrowUp':
-        preventDefault = true;
-        this.state.activeOptionIndex >= 0
-          ? this.patchState({
-            activeOptionIndex: Math.max(this.state.activeOptionIndex - 1, -1),
-            activeSelectionIndex: -1
-          })
-          : this.hide();
-        break;
-      case 'ArrowLeft':
-        if (this.input?.selectionStart === 0) {
-          preventDefault = true;
-          let index;
-          this.state.activeSelectionIndex > 0
-            ? (index = Math.max(this.state.activeSelectionIndex - 1, -1))
-            : (index = this.state.selection.length - 1);
-          this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
+    onClick(event) {
+        if (this.disabled) {
+            return;
         }
-        break;
-      case 'ArrowRight':
-        if (this.state.activeSelectionIndex >= 0) {
-          preventDefault = true;
-          let index = -1;
-          if (this.state.activeSelectionIndex < this.state.selection.length - 1) {
-            index = Math.min(this.state.activeSelectionIndex + 1, this.state.selection.length - 1);
-          }
-          else if (!this.state.term) {
-            index = 0;
-          }
-          this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
+        const elem = event.target;
+        this.trigger?.setAttribute('tabindex', '0');
+        this.input?.focus();
+        if (elem === this.trigger ||
+            elem === this.input ||
+            elem.classList.contains('select-btn') ||
+            elem.nodeName === 'SPAN') {
+            this.state.isOpen ? this.hide() : this.show();
         }
     }
-    if (preventDefault) {
-      event.preventDefault();
-      event.stopPropagation();
+    onInput() {
+        this.search(this.input?.value.trim() || '');
+        if (!this.multiple) {
+            if (this.state.selection.length) {
+                const selectionClone = [...this.state.selection];
+                selectionClone.pop();
+                this.patchState({ selection: selectionClone, tempSelection: [...this.state.selection] });
+            }
+            if (!this.input?.value.trim()) {
+                this.patchState({ tempSelection: [] });
+            }
+        }
+        this.show();
+    }
+    update() {
+        if (this.trigger && this.dropdown) {
+            computePosition(this.trigger, this.dropdown, {
+                strategy: 'fixed',
+                placement: this.placement,
+                middleware: [offset(CatSelect.DROPDOWN_OFFSET), flip()]
+            }).then(({ x, y, placement }) => {
+                if (this.dropdown) {
+                    this.dropdown.dataset.placement = placement;
+                    Object.assign(this.dropdown.style, {
+                        width: `${this.trigger?.clientWidth}px`,
+                        left: `${x}px`,
+                        top: `${y}px`
+                    });
+                }
+            });
+        }
     }
-  }
-  get tagTextHelp() {
-    return this.tagHint && !this.isTagSelected(this.state.term) ? ' (' + this.tagHint + ')' : '';
-  }
-  isTagSelected(term, selection = this.state.selection) {
-    return selection.findIndex(item => item.render.label.toLowerCase() === term.toLowerCase()) >= 0;
-  }
-  createTag(term) {
-    if (term.trim().length && !this.isTagSelected(term)) {
-      const value = this.value;
-      const tags = value?.tags;
-      const tag = { id: `select-${this.id}-tag-${tags?.length ? tags?.length + nextTagUniqueId++ : 0}`, name: term };
-      this.select({ item: tag, render: { label: tag.name } });
+    patchState(update) {
+        this.state = { ...this.state, ...update };
     }
-    this.setTransparentCaret();
-  }
-  removeTag(label) {
-    if (this.isTagSelected(label)) {
-      const item = this.state.selection.find(item => item.render.label.toLowerCase() === label.toLowerCase());
-      item && this.deselect(item.item.id);
+    isPillboxActive() {
+        return this.state.activeSelectionIndex >= 0;
     }
-  }
-  toggleTag(item) {
-    this.isTagSelected(item.render.label) ? this.removeTag(item.render.label) : this.createTag(item.render.label);
-  }
-  initIds() {
-    let ids = [];
-    if (this.value) {
-      if (!this.tags) {
-        if (this.multiple) {
-          ids = this.value;
+    get activeDescendant() {
+        let activeDescendant = undefined;
+        if (this.state.activeOptionIndex >= 0) {
+            activeDescendant = `select-${this.id}-option-${this.state.activeOptionIndex}`;
         }
-        else {
-          ids = [this.value];
+        else if (this.state.activeSelectionIndex >= 0) {
+            activeDescendant = `select-${this.id}-selection-${this.state.activeSelectionIndex}`;
         }
-      }
-      else {
-        if (this.multiple) {
-          const value = this.value;
-          ids = value.ids ? value.ids : [];
+        return activeDescendant;
+    }
+    onArrowKeyDown(event) {
+        let preventDefault = false;
+        this.input?.focus();
+        switch (event.key) {
+            case 'ArrowDown':
+                preventDefault = true;
+                this.state.isOpen
+                    ? this.patchState({
+                        activeOptionIndex: Math.min(this.state.activeOptionIndex + 1, this.state.options.length - 1),
+                        activeSelectionIndex: -1
+                    })
+                    : this.show();
+                break;
+            case 'ArrowUp':
+                preventDefault = true;
+                this.state.activeOptionIndex >= 0
+                    ? this.patchState({
+                        activeOptionIndex: Math.max(this.state.activeOptionIndex - 1, -1),
+                        activeSelectionIndex: -1
+                    })
+                    : this.hide();
+                break;
+            case 'ArrowLeft':
+                if (this.input?.selectionStart === 0) {
+                    preventDefault = true;
+                    let index;
+                    this.state.activeSelectionIndex > 0
+                        ? (index = Math.max(this.state.activeSelectionIndex - 1, -1))
+                        : (index = this.state.selection.length - 1);
+                    this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
+                }
+                break;
+            case 'ArrowRight':
+                if (this.state.activeSelectionIndex >= 0) {
+                    preventDefault = true;
+                    let index = -1;
+                    if (this.state.activeSelectionIndex < this.state.selection.length - 1) {
+                        index = Math.min(this.state.activeSelectionIndex + 1, this.state.selection.length - 1);
+                    }
+                    else if (!this.state.term) {
+                        index = 0;
+                    }
+                    this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
+                }
         }
-        else {
-          const value = this.value;
-          ids = value.id ? [value.id] : [];
+        if (preventDefault) {
+            event.preventDefault();
+            event.stopPropagation();
         }
-      }
     }
-    return ids;
-  }
-  initTags() {
-    let tags = [];
-    if (this.value) {
-      if (this.multiple) {
-        const value = this.value;
-        tags = value.tags ? value.tags : [];
-      }
-      else {
-        const value = this.value;
-        tags = value.tag ? [value.tag] : [];
-      }
+    get tagTextHelp() {
+        return this.tagHint && !this.isTagSelected(this.state.term) ? ' (' + this.tagHint + ')' : '';
     }
-    return tags;
-  }
-  setTransparentCaret() {
-    if (!this.multiple) {
-      this.hide();
-      this.input?.classList.add('select-input-transparent-caret');
+    isTagSelected(term, selection = this.state.selection) {
+        return selection.findIndex(item => item.render.label.toLowerCase() === term.toLowerCase()) >= 0;
     }
-  }
-  showErrors() {
-    this.errorMap = this.errorMapSrc;
-  }
-  showErrorsIfTimeout() {
-    const errorUpdate = coerceNumber(this.errorUpdate, null);
-    if (errorUpdate !== null) {
-      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
-      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);
-      return true;
+    createTag(term) {
+        if (term.trim().length && !this.isTagSelected(term)) {
+            const value = this.value;
+            const tags = value?.tags;
+            const tag = { id: `select-${this.id}-tag-${tags?.length ? tags?.length + nextTagUniqueId++ : 0}`, name: term };
+            this.select({ item: tag, render: { label: tag.name } });
+        }
+        this.setTransparentCaret();
     }
-    return false;
-  }
-  showErrorsIfNoFocus() {
-    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
-    if (!hasFocus) {
-      this.showErrors();
+    removeTag(label) {
+        if (this.isTagSelected(label)) {
+            const item = this.state.selection.find(item => item.render.label.toLowerCase() === label.toLowerCase());
+            item && this.deselect(item.item.id);
+        }
     }
-  }
-  static get is() { return "cat-select"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cat-select.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cat-select.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "requiredMarker": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
-          "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether the label need a marker to shown if the select is required or optional."
-        },
-        "attribute": "required-marker",
-        "reflect": false,
-        "defaultValue": "'optional'"
-      },
-      "horizontal": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the label is on top or left."
-        },
-        "attribute": "horizontal",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "multiple": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable multiple selection."
-        },
-        "attribute": "multiple",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "debounce": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The debounce time for the search."
-        },
-        "attribute": "debounce",
-        "reflect": false,
-        "defaultValue": "250"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@floating-ui/dom",
-              "id": "../node_modules/.pnpm/@floating-ui+dom@1.5.3/node_modules/@floating-ui/dom/src/types.d.ts::Placement"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placement of the select."
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom-start'"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue",
-          "resolved": "CatSelectMultipleTaggingValue | CatSelectTaggingValue | string | string[] | undefined",
-          "references": {
-            "CatSelectTaggingValue": {
-              "location": "local",
-              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
-              "id": "src/components/cat-select/cat-select.tsx::CatSelectTaggingValue"
-            },
-            "CatSelectMultipleTaggingValue": {
-              "location": "local",
-              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
-              "id": "src/components/cat-select/cat-select.tsx::CatSelectMultipleTaggingValue"
+    toggleTag(item) {
+        this.isTagSelected(item.render.label) ? this.removeTag(item.render.label) : this.createTag(item.render.label);
+    }
+    initIds() {
+        let ids = [];
+        if (this.value) {
+            if (!this.tags) {
+                if (this.multiple) {
+                    ids = this.value;
+                }
+                else {
+                    ids = [this.value];
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The value of the select. <br />\n<br />\nThe value of the select depends on whether it is allowed to choose a single item or several items. <br />\nWhen only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br />\n<br />\nIn case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item,\nin the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created"
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the select is disabled."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The placeholder text to display within the select."
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "hint": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[] | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Optional hint text(s) to be displayed with the select."
-        },
-        "attribute": "hint",
-        "reflect": false
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A unique identifier for the input."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label for the select."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of the form control. Submitted with the form as part of a name/value pair."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "labelHidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
-        },
-        "attribute": "label-hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A value is required or must be checked for the form to be submittable."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "clearable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the select should show a clear button."
-        },
-        "attribute": "clearable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "tags": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the select should add new items."
-        },
-        "attribute": "tags",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "tagHint": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Optional hint text to be displayed on the new item to be added."
-        },
-        "attribute": "tag-hint",
-        "reflect": false
-      },
-      "noItems": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The text to display in the dropdown if no results are found."
-        },
-        "attribute": "no-items",
-        "reflect": false
-      },
-      "errors": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean | string[] | ErrorMap",
-          "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
-          "references": {
-            "ErrorMap": {
-              "location": "import",
-              "path": "../cat-form-hint/cat-form-hint",
-              "id": "src/components/cat-form-hint/cat-form-hint.tsx::ErrorMap"
+            else {
+                if (this.multiple) {
+                    const value = this.value;
+                    ids = value.ids ? value.ids : [];
+                }
+                else {
+                    const value = this.value;
+                    ids = value.id ? [value.id] : [];
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
-        },
-        "attribute": "errors",
-        "reflect": false
-      },
-      "errorUpdate": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean | number",
-          "resolved": "boolean | number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
-        },
-        "attribute": "error-update",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "nativeAttributes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "{ [key: string]: string }",
-          "resolved": "undefined | { [key: string]: string; }",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Attributes that will be added to the native HTML input element."
         }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "connector": {},
-      "state": {},
-      "hasSlottedLabel": {},
-      "hasSlottedHint": {},
-      "errorMap": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "catOpen",
-        "name": "catOpen",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the select dropdown is opened."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
+        return ids;
+    }
+    initTags() {
+        let tags = [];
+        if (this.value) {
+            if (this.multiple) {
+                const value = this.value;
+                tags = value.tags ? value.tags : [];
             }
-          }
-        }
-      }, {
-        "method": "catClose",
-        "name": "catClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the select dropdown is closed."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
+            else {
+                const value = this.value;
+                tags = value.tag ? [value.tag] : [];
             }
-          }
         }
-      }, {
-        "method": "catChange",
-        "name": "catChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the value is changed."
-        },
-        "complexType": {
-          "original": "InputEvent",
-          "resolved": "InputEvent",
-          "references": {
-            "InputEvent": {
-              "location": "global",
-              "id": "global::InputEvent"
-            }
-          }
+        return tags;
+    }
+    setTransparentCaret() {
+        if (!this.multiple) {
+            this.hide();
+            this.input?.classList.add('select-input-transparent-caret');
         }
-      }, {
-        "method": "catBlur",
-        "name": "catBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the select loses the focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
-            }
-          }
+    }
+    showErrors() {
+        this.errorMap = this.errorMapSrc;
+    }
+    showErrorsIfTimeout() {
+        const errorUpdate = coerceNumber(this.errorUpdate, null);
+        if (errorUpdate !== null) {
+            typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
+            this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);
+            return true;
+        }
+        return false;
+    }
+    showErrorsIfNoFocus() {
+        const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
+        if (!hasFocus) {
+            this.showErrors();
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "connect": {
-        "complexType": {
-          "signature": "(connector: CatSelectConnector) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "connector - The {@link CatSelectConnector } of the select."
-                }],
-              "text": "- The {@link CatSelectConnector} of the select."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    static get is() { return "cat-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "requiredMarker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
+                    "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label need a marker to shown if the select is required or optional."
+                },
+                "attribute": "required-marker",
+                "reflect": false,
+                "defaultValue": "'optional'"
+            },
+            "horizontal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label is on top or left."
+                },
+                "attribute": "horizontal",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable multiple selection."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The debounce time for the search."
+                },
+                "attribute": "debounce",
+                "reflect": false,
+                "defaultValue": "250"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../node_modules/.pnpm/@floating-ui+dom@1.5.3/node_modules/@floating-ui/dom/src/types.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the select."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom-start'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue",
+                    "resolved": "CatSelectMultipleTaggingValue | CatSelectTaggingValue | string | string[] | undefined",
+                    "references": {
+                        "CatSelectTaggingValue": {
+                            "location": "local",
+                            "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
+                            "id": "src/components/cat-select/cat-select.tsx::CatSelectTaggingValue"
+                        },
+                        "CatSelectMultipleTaggingValue": {
+                            "location": "local",
+                            "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
+                            "id": "src/components/cat-select/cat-select.tsx::CatSelectMultipleTaggingValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the select. <br />\n<br />\nThe value of the select depends on whether it is allowed to choose a single item or several items. <br />\nWhen only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br />\n<br />\nIn case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item,\nin the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the select is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder text to display within the select."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional hint text(s) to be displayed with the select."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for the input."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the select."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+                },
+                "attribute": "name",
+                "reflect": false
             },
-            "CatSelectConnector": {
-              "location": "local",
-              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
-              "id": "src/components/cat-select/cat-select.tsx::CatSelectConnector"
+            "labelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+                },
+                "attribute": "label-hidden",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "Observable": {
-              "location": "import",
-              "path": "rxjs",
-              "id": "../node_modules/.pnpm/rxjs@7.5.5/node_modules/rxjs/dist/types/index.d.ts::Observable"
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A value is required or must be checked for the form to be submittable."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "Item": {
-              "location": "local",
-              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
-              "id": "src/components/cat-select/cat-select.tsx::Item"
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the select should show a clear button."
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tags": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the select should add new items."
+                },
+                "attribute": "tags",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tagHint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional hint text to be displayed on the new item to be added."
+                },
+                "attribute": "tag-hint",
+                "reflect": false
+            },
+            "noItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display in the dropdown if no results are found."
+                },
+                "attribute": "no-items",
+                "reflect": false
+            },
+            "errors": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string[] | ErrorMap",
+                    "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
+                    "references": {
+                        "ErrorMap": {
+                            "location": "import",
+                            "path": "../cat-form-hint/cat-form-hint",
+                            "id": "src/components/cat-form-hint/cat-form-hint.tsx::ErrorMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
+                },
+                "attribute": "errors",
+                "reflect": false
+            },
+            "errorUpdate": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | number",
+                    "resolved": "boolean | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
+                },
+                "attribute": "error-update",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "nativeAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes that will be added to the native HTML input element."
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Connect the functions of the select",
-          "tags": [{
-              "name": "param",
-              "text": "connector - The {@link CatSelectConnector} of the select."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "connector",
-        "methodName": "onConnectorChanged"
-      }, {
-        "propName": "value",
-        "methodName": "onValueChanged"
-      }, {
-        "propName": "errors",
-        "methodName": "onErrorsChanged"
-      }, {
-        "propName": "state",
-        "methodName": "onStateChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "blur",
-        "method": "onBlur",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "onKeyDown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keyup",
-        "method": "onKeyUp",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "connector": {},
+            "state": {},
+            "hasSlottedLabel": {},
+            "hasSlottedHint": {},
+            "errorMap": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "catOpen",
+                "name": "catOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select dropdown is opened."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catClose",
+                "name": "catClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select dropdown is closed."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catChange",
+                "name": "catChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value is changed."
+                },
+                "complexType": {
+                    "original": "InputEvent",
+                    "resolved": "InputEvent",
+                    "references": {
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catBlur",
+                "name": "catBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select loses the focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "connect": {
+                "complexType": {
+                    "signature": "(connector: CatSelectConnector) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "connector - The {@link CatSelectConnector } of the select."
+                                }],
+                            "text": "- The {@link CatSelectConnector} of the select."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CatSelectConnector": {
+                            "location": "local",
+                            "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
+                            "id": "src/components/cat-select/cat-select.tsx::CatSelectConnector"
+                        },
+                        "Observable": {
+                            "location": "import",
+                            "path": "rxjs",
+                            "id": "../node_modules/.pnpm/rxjs@7.5.5/node_modules/rxjs/dist/types/index.d.ts::Observable"
+                        },
+                        "Item": {
+                            "location": "local",
+                            "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
+                            "id": "src/components/cat-select/cat-select.tsx::Item"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Connect the functions of the select",
+                    "tags": [{
+                            "name": "param",
+                            "text": "connector - The {@link CatSelectConnector} of the select."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "connector",
+                "methodName": "onConnectorChanged"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChanged"
+            }, {
+                "propName": "errors",
+                "methodName": "onErrorsChanged"
+            }, {
+                "propName": "state",
+                "methodName": "onStateChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "blur",
+                "method": "onBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keyup",
+                "method": "onKeyUp",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 CatSelect.SKELETON_COUNT = 4;
 CatSelect.DROPDOWN_OFFSET = 4;