@haiilo/catalyst 8.1.0 → 8.2.0

package/dist/components/cat-select2.js

@@ -320,739 +320,739 @@ var autosizeInput = function (element, options) {
 const catSelectCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.primary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.primary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.primary.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-primary-hover{transition:background-color 125ms, color 125ms}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.primary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.primary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.primary.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 125ms}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:cat-token(\"color.theme.primaryInverted.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.primaryInverted.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.primaryInverted.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-primaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:cat-token(\"color.theme.primaryInverted.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.primaryInverted.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.primaryInverted.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 125ms}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.secondary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.secondary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.secondary.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-secondary-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.secondary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.secondary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.secondary.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 125ms}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important;--cat-primary-text:cat-token(\"color.theme.secondaryInverted.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.secondaryInverted.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.secondaryInverted.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-secondaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important;--cat-primary-text:cat-token(\"color.theme.secondaryInverted.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.secondaryInverted.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.secondaryInverted.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 125ms}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-info{background-color:rgb(var(--cat-success-bg, 0, 115, 230)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.info.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.info.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.info.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.info.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.info.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.info.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-success-text, 0, 115, 230)) !important}.cat-link-info,.cat-text-info-hover{transition:color 125ms}.cat-link-info:hover,.cat-text-info-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-success-text-active, 0, 96, 223)) !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.success.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.success.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.success.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-success-hover{transition:background-color 125ms, color 125ms}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.success.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.success.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.success.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 125ms}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important;--cat-primary-text:cat-token(\"color.theme.warning.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.warning.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.warning.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-warning-hover{transition:background-color 125ms, color 125ms}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;--cat-primary-text:cat-token(\"color.theme.warning.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.warning.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.warning.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 125ms}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.danger.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.danger.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.danger.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-danger-hover{transition:background-color 125ms, color 125ms}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.danger.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.danger.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.danger.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 125ms}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-text-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-bg-muted{background-color:#f2f4f7 !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.hidden label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;flex-direction:column;gap:0.5rem;line-height:1.25rem;position:relative}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.select-field,.select-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.select-field.select-horizontal{flex-direction:row;gap:1rem}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 125ms linear;padding:0.25rem;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.select-wrapper:not(.select-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.select-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.select-wrapper.select-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.select-wrapper:has(input:-webkit-autofill),.select-wrapper:has(input:-webkit-autofill):hover,.select-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}.select-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{display:inline-block;padding-left:0.5rem}.select-wrapper-inner>cat-avatar+.select-input{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem;--cat-avatar-font-size:0.5rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-s, 0.125rem);white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0%}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 125ms linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.icon-suffix{padding:0.25rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:fixed;right:0;background:white;display:none;overflow:auto;box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:calc(var(--cat-z-index, 1000) + 100);width:max-content;top:0;left:0}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem}.select-option-inner cat-avatar{--cat-avatar-size:1.25rem;--cat-avatar-font-size:0.5rem}.select-option-text{flex:1 1 0%;min-width:0}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-wrap:break-word;word-break:break-word}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
 
 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;
 const CatSelect = /*@__PURE__*/ proxyCustomElement(class CatSelect extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.catOpen = createEvent(this, "catOpen", 7);
-    this.catClose = createEvent(this, "catClose", 7);
-    this.catChange = createEvent(this, "catChange", 7);
-    this.catBlur = createEvent(this, "catBlur", 7);
-    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() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.catOpen = createEvent(this, "catOpen", 7);
+        this.catClose = createEvent(this, "catClose", 7);
+        this.catChange = createEvent(this, "catChange", 7);
+        this.catBlur = createEvent(this, "catBlur", 7);
+        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) {
-      loglevel.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) {
+            loglevel.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 (this.state.selection.length) {
-          const selectionClone = [...this.state.selection];
-          selectionClone.pop();
-          this.patchState({
-            selection: selectionClone,
-            tempSelection: this.state.term ? [...this.state.selection] : []
-          });
+        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 (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" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.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: catI18nRegistry.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: catI18nRegistry.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 ? catI18nRegistry.t('select.close') : catI18nRegistry.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 : catI18nRegistry.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;
+    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;
+        }
+        this.patchState({ isResolving: true });
+        const ids = this.initIds();
+        let tags;
+        if (this.tags) {
+            tags = this.initTags();
         }
-        options.unshift({
-          item: { id: `select-${this.id}-option-tag` },
-          render: { label: label ? label : this.state.term }
+        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({
-        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" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.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: catI18nRegistry.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: catI18nRegistry.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 ? catI18nRegistry.t('select.close') : catI18nRegistry.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 : catI18nRegistry.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;
+    }
+    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');
         }
-        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;
     }
-    this.patchState({ isResolving: true });
-    const ids = this.initIds();
-    let tags;
-    if (this.tags) {
-      tags = this.initTags();
+    hide() {
+        if (this.state.isOpen) {
+            this.patchState({ isOpen: false, activeOptionIndex: -1 });
+            this.catClose.emit();
+            return true;
+        }
+        return false;
     }
-    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 : ''
-      });
-    });
-  }
-  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');
+    search(term) {
+        this.patchState({ term, activeOptionIndex: -1, activeSelectionIndex: -1 });
+        this.term$.next(term);
     }
-  }
-  hide() {
-    if (this.state.isOpen) {
-      this.patchState({ isOpen: false, activeOptionIndex: -1 });
-      this.catClose.emit();
-      return true;
+    isSelected(id) {
+        return this.state.selection.findIndex(s => s.item.id === id) >= 0;
     }
-    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 = '';
-      }
+    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();
     }
-    this.setTransparentCaret();
-  }
-  deselect(id) {
-    if (this.isSelected(id)) {
-      this.patchState({
-        selection: this.state.selection.filter(item => item.item.id !== id),
-        activeSelectionIndex: -1
-      });
+    deselect(id) {
+        if (this.isSelected(id)) {
+            this.patchState({
+                selection: this.state.selection.filter(item => item.item.id !== id),
+                activeSelectionIndex: -1
+            });
+        }
     }
-  }
-  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 = '';
+    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);
     }
-    else {
-      this.patchState({ selection: [], tempSelection: [] });
+    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: [] });
+        }
     }
-  }
-  reset(connector) {
-    this.connector = connector ?? this.connector;
-    this.subscription?.unsubscribe();
-    this.subscription = undefined;
-    this.state = INIT_STATE;
-  }
-  onClick(event) {
-    if (this.disabled) {
-      return;
+    reset(connector) {
+        this.connector = connector ?? this.connector;
+        this.subscription?.unsubscribe();
+        this.subscription = undefined;
+        this.state = INIT_STATE;
     }
-    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();
+    onClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        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();
+        }
     }
-  }
-  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: [] });
-      }
+    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();
     }
-    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`
-          });
+    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`
+                    });
+                }
+            });
         }
-      });
     }
-  }
-  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}`;
+    patchState(update) {
+        this.state = { ...this.state, ...update };
     }
-    else if (this.state.activeSelectionIndex >= 0) {
-      activeDescendant = `select-${this.id}-selection-${this.state.activeSelectionIndex}`;
+    isPillboxActive() {
+        return this.state.activeSelectionIndex >= 0;
     }
-    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 });
+    get activeDescendant() {
+        let activeDescendant = undefined;
+        if (this.state.activeOptionIndex >= 0) {
+            activeDescendant = `select-${this.id}-option-${this.state.activeOptionIndex}`;
         }
-        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 if (this.state.activeSelectionIndex >= 0) {
+            activeDescendant = `select-${this.id}-selection-${this.state.activeSelectionIndex}`;
         }
+        return activeDescendant;
     }
-    if (preventDefault) {
-      event.preventDefault();
-      event.stopPropagation();
+    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 });
+                }
+        }
+        if (preventDefault) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     }
-  }
-  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 } });
+    get tagTextHelp() {
+        return this.tagHint && !this.isTagSelected(this.state.term) ? ' (' + this.tagHint + ')' : '';
     }
-    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);
+    isTagSelected(term, selection = this.state.selection) {
+        return selection.findIndex(item => item.render.label.toLowerCase() === term.toLowerCase()) >= 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;
+    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 } });
         }
-        else {
-          ids = [this.value];
+        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);
         }
-      }
-      else {
-        if (this.multiple) {
-          const value = this.value;
-          ids = value.ids ? value.ids : [];
+    }
+    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];
+                }
+            }
+            else {
+                if (this.multiple) {
+                    const value = this.value;
+                    ids = value.ids ? value.ids : [];
+                }
+                else {
+                    const value = this.value;
+                    ids = value.id ? [value.id] : [];
+                }
+            }
         }
-        else {
-          const value = this.value;
-          ids = value.id ? [value.id] : [];
+        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] : [];
+            }
         }
-      }
+        return tags;
     }
-    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] : [];
-      }
+    setTransparentCaret() {
+        if (!this.multiple) {
+            this.hide();
+            this.input?.classList.add('select-input-transparent-caret');
+        }
     }
-    return tags;
-  }
-  setTransparentCaret() {
-    if (!this.multiple) {
-      this.hide();
-      this.input?.classList.add('select-input-transparent-caret');
+    showErrors() {
+        this.errorMap = this.errorMapSrc;
     }
-  }
-  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;
+    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;
     }
-    return false;
-  }
-  showErrorsIfNoFocus() {
-    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
-    if (!hasFocus) {
-      this.showErrors();
+    showErrorsIfNoFocus() {
+        const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
+        if (!hasFocus) {
+            this.showErrors();
+        }
     }
-  }
-  get hostElement() { return this; }
-  static get watchers() { return {
-    "connector": ["onConnectorChanged"],
-    "value": ["onValueChanged"],
-    "errors": ["onErrorsChanged"],
-    "state": ["onStateChanged"]
-  }; }
-  static get style() { return catSelectCss; }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "connector": ["onConnectorChanged"],
+        "value": ["onValueChanged"],
+        "errors": ["onErrorsChanged"],
+        "state": ["onStateChanged"]
+    }; }
+    static get style() { return catSelectCss; }
 }, [1, "cat-select", {
-    "requiredMarker": [1, "required-marker"],
-    "horizontal": [4],
-    "multiple": [4],
-    "debounce": [2],
-    "placement": [1],
-    "value": [1025],
-    "disabled": [4],
-    "placeholder": [1],
-    "hint": [1],
-    "identifier": [1],
-    "label": [1],
-    "name": [1],
-    "labelHidden": [4, "label-hidden"],
-    "required": [4],
-    "clearable": [4],
-    "tags": [4],
-    "tagHint": [1, "tag-hint"],
-    "noItems": [1, "no-items"],
-    "errors": [4],
-    "errorUpdate": [8, "error-update"],
-    "nativeAttributes": [16],
-    "connector": [32],
-    "state": [32],
-    "hasSlottedLabel": [32],
-    "hasSlottedHint": [32],
-    "errorMap": [32],
-    "connect": [64]
-  }, [[0, "blur", "onBlur"], [0, "keydown", "onKeyDown"], [0, "keyup", "onKeyUp"]], {
-    "connector": ["onConnectorChanged"],
-    "value": ["onValueChanged"],
-    "errors": ["onErrorsChanged"],
-    "state": ["onStateChanged"]
-  }]);
+        "requiredMarker": [1, "required-marker"],
+        "horizontal": [4],
+        "multiple": [4],
+        "debounce": [2],
+        "placement": [1],
+        "value": [1025],
+        "disabled": [4],
+        "placeholder": [1],
+        "hint": [1],
+        "identifier": [1],
+        "label": [1],
+        "name": [1],
+        "labelHidden": [4, "label-hidden"],
+        "required": [4],
+        "clearable": [4],
+        "tags": [4],
+        "tagHint": [1, "tag-hint"],
+        "noItems": [1, "no-items"],
+        "errors": [4],
+        "errorUpdate": [8, "error-update"],
+        "nativeAttributes": [16],
+        "connector": [32],
+        "state": [32],
+        "hasSlottedLabel": [32],
+        "hasSlottedHint": [32],
+        "errorMap": [32],
+        "connect": [64]
+    }, [[0, "blur", "onBlur"], [0, "keydown", "onKeyDown"], [0, "keyup", "onKeyUp"]], {
+        "connector": ["onConnectorChanged"],
+        "value": ["onValueChanged"],
+        "errors": ["onErrorsChanged"],
+        "state": ["onStateChanged"]
+    }]);
 CatSelect.SKELETON_COUNT = 4;
 CatSelect.DROPDOWN_OFFSET = 4;
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-select", "cat-avatar", "cat-button", "cat-checkbox", "cat-icon", "cat-scrollable", "cat-skeleton", "cat-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-select":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatSelect);
-      }
-      break;
-    case "cat-avatar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "cat-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "cat-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "cat-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "cat-scrollable":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "cat-skeleton":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "cat-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-select", "cat-avatar", "cat-button", "cat-checkbox", "cat-icon", "cat-scrollable", "cat-skeleton", "cat-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatSelect);
+            }
+            break;
+        case "cat-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "cat-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "cat-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "cat-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cat-scrollable":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cat-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "cat-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { CatSelect as C, concat as c, defineCustomElement as d, take as t };