@haiilo/catalyst 10.23.0 → 10.24.0

package/dist/components/cat-pagination.js

@@ -25,9 +25,9 @@ const CatPagination$1 = /*@__PURE__*/ proxyCustomElement(class CatPagination ext
         this.iconNext = '$cat:pagination-right';
     }
     render() {
-        return (h("nav", { key: '618b6da3704737944ba6a2a42556b83b8c517203', role: "navigation" }, h("ol", { key: 'ccc355a38d2fe5c037af23bbf6ca13921d7b204b', class: {
+        return (h("nav", { key: 'aea4a39cc798431911b8775600dd734595d51185', role: "navigation" }, h("ol", { key: 'bbcb43fa61bcd379ad84eb28ca6bcf995bf85159', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, h("li", { key: '1bc64e23c77a1cf907cc51fdac9ecf74d5652126' }, h("cat-button", { key: 'e292341f7926f6028ada36f7948f8355f3da81a0', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: '734615ad7e152608b2b12f1aeade2d29323a98a4' }, h("cat-button", { key: 'b1b8ad79339aba3d1ba606cb01e35b9bb137db10', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
+            } }, h("li", { key: '984f120135399170d9374881a8562fa12b7c0a75' }, h("cat-button", { key: '8f173139e15c77227fc1044196887b489835a4c5', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: '165a68e0fd8f78f4fc6a505ec4c0715a21607d00' }, h("cat-button", { key: '74864af9ce7f4f38b3d1e47209d8c47faf559b96', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
     get isFirst() {
         return this.page === 0;

package/dist/components/cat-radio-group.js

@@ -74,7 +74,7 @@ const CatRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatRadioGroup ext
         }
     }
     render() {
-        return (h("div", { key: '03889f6f1d8a995b4a58f2cecc52a880955e33bd', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '30ba95aa4f5a0e1a206e4b6819c5bca2d60d1b73' })));
+        return (h("div", { key: 'af9aff52c285bb32986d27c4f062f7ca8dbe394e', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: 'e4542e17427cdd2d31e38276afe5d240f5b9e6cf' })));
     }
     init() {
         this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));

package/dist/components/cat-radio.js

@@ -54,13 +54,13 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class CatRadio extends HTMLE
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '9eb9e711c531675c5a2dde8f4ac0f112cbbf0ddc' }, h("label", { key: '7b46353f5d46952b552a318b1f3f39e05f9e5208', htmlFor: this.id, class: {
+        return (h(Host, { key: '7fb3add02c4e5ad69577dd753a3a0353153fa304' }, h("label", { key: '3b1a872da255a8dd5c396ba55e06073146cfd758', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '5702eb824f57f52107fee5534bd7823c4b5c822b', class: "radio" }, h("input", { key: 'be68de703d148e592c7fd1ebee9e49f606e0c2ee', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'c6a8a3e11c8a7f663bd861190f8b3fc6d8649dfd', class: "circle" })), h("span", { key: 'f6679db9d033cf373a6341c1ea3ea1b2a8c3e154', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'acf496e1f124bec52dff12d3b7e9206b8c455680', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '9ab26eb79feeefaf0f143836df8711e1335255bc', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '27ab2cadf0cbecd1803c12221d78b9fd68ac5bf8', class: "circle-placeholder" }), h(CatFormHint, { key: '2c89013ef175c063ebac67f0f1dcaa9d3ff311bc', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: 'baea250060694d0f239b222efafd469c3fd51d6e', class: "radio" }, h("input", { key: '8d3ab427ade40822fe3fb4eab8c8b4f9be8104ae', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'a0e30eb3a071d8981dc2cf6e12d42bbcf5ff8bec', class: "circle" })), h("span", { key: '518d21be81587a6bd6fd571b4921a9c7464f65ae', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'f9f92eb46213178a4be84210f3a7d4b758bb043c', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '9af9f7e6331131847217ad74b2c4c7bd3ca51212', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '6064b9990cbbb0f49a305acc15f0ea7bed627da7', class: "circle-placeholder" }), h(CatFormHint, { key: '4cb103c3f9b83555b222da19bf480af83201465e', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;

package/dist/components/cat-scrollable2.js

@@ -605,13 +605,13 @@ const CatScrollable = /*@__PURE__*/ proxyCustomElement(class CatScrollable exten
     }
     render() {
         return [
-            h("div", { key: 'fb45dc6ff06b062e3afd7b87faabf5a153cf1fdb', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: '9ac0e11c95067c51658055a405be4ccd3e0c2c5c', class: "shadow-top" }), !this.noShadowX && h("div", { key: '288081b27ab2fe6f097f4c294ae345c5ff2c0b71', class: "shadow-left" }), !this.noShadowX && h("div", { key: 'ce8c8fc14f609159956b297802d9341abef06aa0', class: "shadow-right" }), !this.noShadowY && h("div", { key: '040f6d1126096cf0506e108e6ce6f5c7869b2ad1', class: "shadow-bottom" })),
-            h("div", { key: '91405bb6b4b42f6ae550fd6d2dc11245f4364955', ref: el => (this.scrollElement = el), class: {
+            h("div", { key: 'd2c0966e736fe4da66b4ff4c17ce51b914bc4b8d', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: 'a0b25b995b5f75d1c09d4dc982ceebe9a8c904b8', class: "shadow-top" }), !this.noShadowX && h("div", { key: '02e550e37511bff64e9c8c2bd09c41858fdd3930', class: "shadow-left" }), !this.noShadowX && h("div", { key: 'debb835bfcf815837e14b1378190e90a243a1af5', class: "shadow-right" }), !this.noShadowY && h("div", { key: 'd646f92372ab80246f0164c672812854d6c1c946', class: "shadow-bottom" })),
+            h("div", { key: 'e24d26d9c11070b8b0d5a66da3bcaeb12bf3532c', ref: el => (this.scrollElement = el), class: {
                     'scrollable-content': true,
                     'scroll-x': !this.noOverflowX,
                     'scroll-y': !this.noOverflowY,
                     'no-overscroll': this.noOverscroll
-                } }, h("slot", { key: '3e57c7cdb12a9ea1cf0afcb5317f7937a8f58cf7' }))
+                } }, h("slot", { key: '6923a1a06201e1997c80af316d57d0654312dca4' }))
         ];
     }
     attachEmitter(from, emitter) {

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

@@ -176,7 +176,7 @@ const CatSelectTest = /*@__PURE__*/ proxyCustomElement(class CatSelectTest exten
         setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
     }
     render() {
-        return (h(Host, { key: '153bf14c997db207ab1587e6ad37c44afa095be5', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, h("cat-select", { key: '6b7cb480ed99aad82fe0f95037a4bc81fe0bc034', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, h("span", { key: '1d6c5c130f5740dc46129ba4a8b7ea570b9adf6b', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { key: 'b749ef3019ef6835ea6065e2d453eb5df9357c16', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '472c8da7c61e2295ceb6987ca45fc54711f5c5e5', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'ff7a037bad1b8a3eb10f275a7cbef072a8b2a186', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '28fbc5b535a83f5b0bfb1d820409630f58c9fe10', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), h("cat-select", { key: '95badaa01a9aa50111b13d4168cc89a32d6958d7', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), h("cat-select", { key: 'a2540116218b9d96fa5f3d7fc2a3c1dd32987296', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), h("cat-dropdown", { key: 'add3df944b9d4475d6d002ce76690565b0ddadeb', overflow: true }, h("cat-button", { key: '3acbf50077f5da1d6585ca9aa3e4239c18ae83a1', slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { key: 'c5a3d0da15494d2c5c46a64d893c010a6435a13a', slot: "content", style: { width: '400px' } }, h("cat-select", { key: '8d379ddcd1db5eddb718ef195f4a1e4e6e241e20', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
+        return (h(Host, { key: '0427cd222f128124aa5b7304ecc56f98f82ad601', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, h("cat-select", { key: '20731907f24cecd4f79bc2b8fb55bf4ca2a8781d', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, h("span", { key: 'b4284b5fa7bd3c80c49900cc901a67ce87b02fba', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { key: '1ae920c166bcffb8c417887ab01830bc9704d82b', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '6928bbfea0b54d3a2d82bdc16de71208934cd4ab', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'ffa816a1e6f4e5e170aeed4c64f75aefb928e800', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'a392acd00395251efe86deb5f95de439cb2e2947', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), h("cat-select", { key: 'abe4098459cb27c12ecccd500080ed4b183d4221', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), h("cat-select", { key: '59e0e9df2329e1ee7f96a071462a58e7aac8c057', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), h("cat-dropdown", { key: 'bfed29db8e502f705877dd79ad9f584569639a22', overflow: true }, h("cat-button", { key: 'fda80f359585e24f3fa9cff4567b4c6d0681cc9d', slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { key: '180ed85afb561a07ff346bd481503d57c336fbe6', slot: "content", style: { width: '400px' } }, h("cat-select", { key: '12efa7508dfcb72cb897a160353958ef2c66a7a0', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
     }
     get countryConnector() {
         return {

package/dist/components/cat-select2.js

@@ -383,17 +383,17 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class CatSelect extends HTMLE
     onValueChanged() {
         !this.valueChangedBySelection ? this.resolve() : (this.valueChangedBySelection = false);
     }
-    onErrorsChanged(value) {
+    onErrorsChanged(newValue, _oldValue, update = true) {
         if (!coerceBoolean(this.errorUpdate)) {
             this.errorMap = undefined;
         }
         else {
-            this.errorMapSrc = Array.isArray(value)
-                ? value.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
-                : value === true
-                    ? {}
-                    : value || undefined;
-            this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
+            this.errorMapSrc = Array.isArray(newValue)
+                ? newValue.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
+                : newValue || undefined;
+            if (update) {
+                this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
+            }
         }
     }
     onStateChanged(newState, oldState) {
@@ -448,8 +448,10 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class CatSelect extends HTMLE
             autoUpdate(this.trigger, this.dropdown, () => this.update());
         }
     }
+    componentWillLoad() {
+        this.onErrorsChanged(this.errors, undefined, false);
+    }
     componentWillRender() {
-        this.onErrorsChanged(this.errors);
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
         this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     }
@@ -634,18 +636,18 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class CatSelect extends HTMLE
         });
     }
     render() {
-        return (h(Host, { key: '772a3fe800619d1ad1f22b0f38398d5a51077094' }, h("div", { key: 'a3e582fe3877268805f404e7139699cc7e460505', class: {
+        return (h(Host, { key: 'f8f27eef2e7fff527c9a3c4e7c4fde643d80b606' }, h("div", { key: '1d28d1629ab6407eb8af786b7878309885ea8e99', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal,
                 'select-multiple': this.multiple
-            } }, h("div", { key: '8bede450fb51d6f4783f673ddd92e2a43d25c6e8', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '26bb54f5eff8dca3f2249f5d708ec18843ec0d16', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: 'ae76760a5db3986f809750dca03f6c957e984081', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '11ef4f9ece98bc97667636238572752450a6ba74', name: "label" })) || this.label, h("div", { key: '9df12d2808e971c4aa1f13b669f8064bd7676e5e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '64ad2f03d55c6cf4a671b125fb8ca702aeeb6e32', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '977b3f8f38d82e9155d39149321654dc98fe5086', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'c17f2ba664a71419297603e46b30037fb91379aa', class: "select-container" }, h("div", { key: '66d4d55a667a98c8a74f4c5ee0bfed00fe0a3c1b', 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", { key: '76ff7565a72e1b734bddd449f1b2598a7caa5fa2', 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: {
+            } }, h("div", { key: 'dc241514b1e697c2a42c230c9f04cd07f1a3a735', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'd5f0179474aeca24a0773e81e9b08873e847facd', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '3cf13b24b0537d2a70e6a0918d1ba6c9b2b84731', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'f0ad0d85b986a657456c8cd37b2f5cf286d1bf44', name: "label" })) || this.label, h("div", { key: '0ec56a4f09ee480300e5ea8c2c656f90e5fef2de', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '08c2e70f25ccf68bbc73d2366e39f4bde5d1c675', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '7e7fe7b9e28e4833bb413c60af3459a1d998189b', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'bf37c5423d2e33d98bd62007a74a45f2362c4575', class: "select-container" }, h("div", { key: 'f09d751cfd05f43942ad5ad77706f8ae39050de9', 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", { key: '5378a3d5f444e6346c53ffb7023cce68cf1c3ffb', 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", { key: '422b7cfafd3dc68ab645ff64bf95d551718c5fd0', ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", 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, "aria-autocomplete": "list", 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", { key: '537fda8045e3725c26c161c4e187c4a1d7bcc6e8' }), this.invalid && (h("cat-icon", { key: 'b5c60d2f5e1dd176d3768763ab6e3eb1043196bc', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, 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", { key: '27755954d228e33d0ba6adf5736defcd1d56b32b', ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", 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, "aria-autocomplete": "list", 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", { key: '4621c8c3b7e430e5841471757da5a51df5ca86ad' }), this.invalid && (h("cat-icon", { key: 'b4d31caef78d62769c3dc84fc6d4415f8c5ee849', 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.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '5bb1e491223d60af819bbe7d5e8e81bee4414a83', 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, { key: '1a754103d3560da43b8dab28da03bfda5da54328', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: '4aada6b82114fd0f5b5ba2c84c15af748a35b20c', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '1779e311c227b1a41e2a138d71371ee5925f64bb', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: '085ccef09ea6bbaa58d70c4f9c8c65f0d4bb2248', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            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.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '54a2c42cda8750dce73c4730a3a8f4cdc3c959f2', 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, { key: 'de8b11dcd1e97476a811f9811026eae619c42ac8', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: '558cf4e93022770cf7841eab7d2f8b116cb221be', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: 'cdc203f6738614839f1a18c2bce9353f0df8e47c', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: '63316734b1e845d727ef4628b1d324a3757f7989', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
             ? 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')))))))));
@@ -654,7 +656,7 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class CatSelect extends HTMLE
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
     }
     get invalid() {
-        return !!Object.keys(this.errorMap || {}).length;
+        return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;
     }
     get optionsList() {
         return this.state.options.map((item, i) => {