@haiilo/catalyst 10.23.0 → 10.24.0

package/dist/cjs/cat-alert_30.cjs.entry.js

@@ -1565,13 +1565,13 @@ const CatDate = class {
         this.input?.clear();
     }
     render() {
-        return (index.h(index.Host, { key: 'aab7bc4c55e9ac1ad186bb095099eadb4810a676' }, index.h("cat-input", { key: '574da4b30e03bdd9d57194efce1eff359b7c1114', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, value: this.inputValue, onCatFocus: e => {
+        return (index.h(index.Host, { key: '8e98fa37e7c7a5a5b06e78d4db55a0221ab3c9aa' }, index.h("cat-input", { key: '3bc212816beb5dc6dc077c16aeba37494e726710', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, value: this.inputValue, onCatFocus: e => {
                 e.stopPropagation();
                 this.catFocus.emit(e.detail);
             }, onCatBlur: e => {
                 e.stopPropagation();
                 this.onInputBlur(e.detail);
-            } }, index.h("span", { key: '5c4c3fdf0db242757ee4cb0080080f9e5aae1c63', slot: "label" }, this.label, index.h("span", { key: '298ed9149a2e9d002329b6e3ba2170e4ed908119', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: '27294329f80f48d19ca60e05b9f1cee297a2fbdc', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: '4c0248144e6323763202b33697f305874e905dc6', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: 'f6cc678f363f4641261825caa45f8e87a899817e', slot: "content" }, index.h("cat-date-inline", { key: '9a655772cdb582b630b54b8ec590f73d690e5915', ref: el => (this.dateInline = el), min: this.min, max: this.max, value: this.value, hint: true, weeks: true, noClear: true, onCatChange: this.onDateChange.bind(this) }))))));
+            } }, index.h("span", { key: '1108b31cf626f5e1879b5d06e15539a60c103925', slot: "label" }, this.label, index.h("span", { key: '253ac251c4313b1b61381c6b7063ed9c6d87f892', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: 'a251ebdee91aa19060e03fd22a0b02c3c8af59df', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: '5fbcfe990cae800326e686b798b63be2d1783248', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: '3dd9bc1b62c30e8d8ff63c878e1a141e5eac71e5', slot: "content" }, index.h("cat-date-inline", { key: '871799fce9dda73e5242d3d1ef94c03b8144dcf2', ref: el => (this.dateInline = el), min: this.min, max: this.max, value: this.value, hint: true, weeks: true, noClear: true, onCatChange: this.onDateChange.bind(this) }))))));
     }
     getTriggerA11yLabel() {
         const date = this.locale.fromLocalISO(this.value);
@@ -2369,12 +2369,12 @@ const CatDateInline = class {
         const [minDate, maxDate] = this.getMinMaxDate();
         const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
         const [dateStart, dateEnd] = this.getValue();
-        return (index.h(index.Host, { key: '9d620285ba53ed8e71422cd8bdd443abe3188d70', "aria-label": this.label || undefined }, index.h("div", { key: '432bde580b38ff16a11381e9c93a53aa87a8f13d', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'b5229cb6bdf4a8a60bf323c3ca8285a145d83b48', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: 'd856310892880ed04f4d59868f6810544f20c5ec', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '4b971a43d555287c1c84a932e2846669feb59129', name: "label" })) || this.label, index.h("div", { key: '0ac7e6b8d0f40681430eff6807386610e2657ea5', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '12adc7368d44ddf22dfc2dcfe4b654a65c738ce3', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '28c34cf75a5c95e06e700d239d14ce34feedd907', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '8bb8a2c5ef998e404fbb6aecc2846bc4d65793ca', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: '36a79738e2cac2f3c3593ec64f14acf6f63e897c', class: "picker-head" }, index.h("cat-button", { key: 'c848ad038ccd38ae53b69fd5e7a8d2ac7438151d', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '0311f4cb24217cec5dbc4f59b0535140760d6d66', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: 'd124526bee1d7be554038fb3205e4f5b1ae8c7c4' }, this.getHeadline()), index.h("cat-button", { key: '9f78c01028aeb550b15d594df0a3f15f6e953a76', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '9eab9639f408474cbef57fc70c902a10ecd97d2e', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: '2ce6761f92b3fc8eb7a9b966a65ddc65005a61ad', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: 'd919897bc9a357c272cfef3757a39cecd26f928e', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
+        return (index.h(index.Host, { key: 'f0b5554bff498048c6b2ed378fbf341ee2d0a70b', "aria-label": this.label || undefined }, index.h("div", { key: '5185d42c4ec5ac93ddebd0140db6caf12ce5240d', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '2fdc6cbbcf687981348b1fb5f21f2d5782f8ce88', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: '1f7ee36794e2bd9081cc10cb5942dde193f241ca', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '3080e11319a36ea14c4ca06714cd9518037f4390', name: "label" })) || this.label, index.h("div", { key: '5d8d98b7e522bb23285e331ace4f45a6a42ab9dd', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '1acfd32324889f2c3a9ee4806f283e52a4bd3060', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '97134f7607c47820e904591e6d4909371c295eb7', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '7f8fe8f60217ddca39f2bd18fb75aae36f58924d', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: '482f557eddae1bdc7b2c9fb795ff07c130107eba', class: "picker-head" }, index.h("cat-button", { key: '2e53d21a7de00ca6a90c0d8d75f232d4ca534714', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: 'd7e4b92028c01c1b817fc4652b395bc31386cc1a', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: 'ea5eb0015f4d87ffa17030569fb04fa15f6e60e9' }, this.getHeadline()), index.h("cat-button", { key: '7bb753ec04b8d8f60a804e27a30acd976233d7df', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: 'b3d6a79b108fb6e5594a6c1228137e51354620c9', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: '7d76513d167808df5c6f1aeaa78085bbf96b0fa3', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: '3f2fcd711bbd849340b91032d88ba5abab3d1b77', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
             const day = (i + this.locale.weekInfo.firstDay) % 7;
             return index.h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
-        })), this.weeks && (index.h("div", { key: '61db2a1150d5f69ace95c997f8abc63e6859985a', class: "picker-grid-weeks" }, dateGrid
+        })), this.weeks && (index.h("div", { key: '5f1e57853dbdbc17562f6b98d0124a9a99cc5a66', class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '2e6bfa22e2f60b99e0d257be840471417adc15d5', class: "picker-grid-days" }, dateGrid.map(day => {
+            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '0551334303e8212f276de5ea1f2642446c0f6485', class: "picker-grid-days" }, dateGrid.map(day => {
             const isStartDate = isSameDay(dateStart, day);
             const isEndDate = isSameDay(dateEnd, day);
             const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
@@ -2391,7 +2391,7 @@ const CatDateInline = class {
                     'date-focusable': this.canFocus(day),
                     'date-disabled': !this.canClick(day)
                 }, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isStartDate || isEndDate ? 'filled' : isToday ? 'outlined' : 'text', a11yLabel: this.locale.toLocalStr(day), active: isStartDate || isEndDate || isRange, color: isStartDate || isEndDate || isToday ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.locale.toLocalISO(day) }, day.getDate()));
-        }))), index.h("div", { key: '66a6723cc2227fbed1c3f5632bfe6e9a85ca9a18', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: '2c980e8089f56cbd31a29359d2ef37ede1697250', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: '4f8be893d801f2ca00229e5f8c6d366ac9d1abe9', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: 'ea6f3f3eb9621ca5b70ac1cefa84b4cfa0a3ac7f', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '0de5016aa28abbf3f8c159e807026e0e0c6d7b4e', class: "cursor-aria", "aria-live": "polite" })));
+        }))), index.h("div", { key: '6fbabecc4714a6a27bff80b8bdfab2217e69d844', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: 'd12318e71cd05fd506c2017922faf527ab92f755', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: '33d82b959cc2f8a1333b2c7181a79311af84a88d', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: '4b83fb3e173be9d0e96cace310ee9517938fe631', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '702ca224198fbe0f6014cc3ec5338fdff437ff5c', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date, focus = true) {
         const [minDate, maxDate] = this.getMinMaxDate();
@@ -7363,7 +7363,7 @@ const CatDatepickerFlat = class {
     }
     render() {
         return [
-            index.h("cat-input", { key: 'f3fb464459b70a007583b4e13ebd098693fc047c', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
+            index.h("cat-input", { key: 'c59dfb87d3f67f8850473274bab82063c3ea4d17', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
                     e.stopPropagation();
                     this.value = e.detail || undefined;
                 }, onCatFocus: e => {
@@ -7372,8 +7372,8 @@ const CatDatepickerFlat = class {
                 }, onCatBlur: e => {
                     e.stopPropagation();
                     this.catBlur.emit(e.detail);
-                } }, this.hasSlottedLabel && (index.h("span", { key: '66da11dc4505dfa2a1fe9c0384c522bcf1b70b0a', slot: "label" }, index.h("slot", { key: '5d213130eafe16fe92d29be10cd3bf805fa8d101', name: "label" }))), this.hasSlottedHint && (index.h("span", { key: '2b66667d3e0386aefd69032aac4b963fea5e0e26', slot: "hint" }, index.h("slot", { key: '636b9c7f1e04fc81bd7f2a2351321efc4adc6ec0', name: "hint" })))),
-            index.h("div", { key: '6c9bb4c2fb61058541d0ae90501a8c739abbd132', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
+                } }, this.hasSlottedLabel && (index.h("span", { key: '67cf2c46b67fcd119c01c3d313ac547b54c343ec', slot: "label" }, index.h("slot", { key: '7a2c43caf422ef58381b5b78bd0a1e83efe2ba6c', name: "label" }))), this.hasSlottedHint && (index.h("span", { key: '3135c3f956f714b1f57aa97aab905bbe6735f677', slot: "hint" }, index.h("slot", { key: '7a423675a763a2a139dc3f05cd7141731c825d8d', name: "hint" })))),
+            index.h("div", { key: '635b797993490f712b1f8ee28d086524b5a0bc4f', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
         ];
     }
     initDatepicker(input) {
@@ -7476,11 +7476,11 @@ const CatDatepickerInline = class {
         this.pickr = this.initDatepicker(this.input);
     }
     render() {
-        return (index.h(index.Host, { key: 'c35c9e3406db099a146c9d71b433a31e7c468adb' }, index.h("div", { key: '79ea9acc970418eb6cbbaf47314804aded5e595f', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
+        return (index.h(index.Host, { key: '6d9ecbd5cc1099ce3a8fb0c5a9cca226a62525f7' }, index.h("div", { key: '405b15dfbde6cf538022ed06fbca72eb4a290dc7', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
                 'datepicker-wrapper': true,
                 'datepicker-disabled': this.disabled,
                 'datepicker-readonly': this.readonly
-            } }, index.h("input", { key: 'ce9fa47bebb4fd0348874dac7c8d4a66c14932b0', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
+            } }, index.h("input", { key: '4373cedb5e6c0d08631cec9c16b8c859f5f2daea', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
     }
     initDatepicker(input) {
         if (!input) {
@@ -8571,7 +8571,7 @@ const CatDropdown = class {
         }, timeTransitionS);
     }
     render() {
-        return (index.h(index.Host, { key: 'ea4d74540a26c59198740c57e9769481c187b812' }, index.h("slot", { key: '0ddf2f870dcbd84c20ded8f54f6544b418a52115', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: '18785836bff9d97ae99c9b0ea8714098e5474597', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: 'b1217ea52a2dfa8ab61de2d5e18df6728706709a', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: '77d4eae1748076ba3bc72d127d22cba11f7b6baa', name: "content" }))));
+        return (index.h(index.Host, { key: 'c0ec9a85a4b9ea6a739507480d630c8fc8dd15f5' }, index.h("slot", { key: 'd696c663aeaf62869077994227b12c033c3eaa01', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: 'b8bb9467fda8b26fdb3d6e88aa2c6ff5c091787f', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '0a65794088d27a74621ce390f7ad21d798b6a0e5', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: '41dff5ac88c5175a856f6aca5d0696899d20f848', name: "content" }))));
     }
     componentDidLoad() {
         this.initAnchor();
@@ -8668,7 +8668,7 @@ const CatFormGroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'c76bcff2236c8c8103885979397ffceae10a1207', style: { '--label-size': this.labelSize } }, index.h("slot", { key: 'add79b47d3ca8dae50619961a900830b36bb3c0c', onSlotchange: this.onSlotChange.bind(this) })));
+        return (index.h(index.Host, { key: 'c9fe233663c9967b3e78334e6994ceb62653c19c', style: { '--label-size': this.labelSize } }, index.h("slot", { key: '49274e5e31644d6f7d042033e975d8b91d6aaea6', onSlotchange: this.onSlotChange.bind(this) })));
     }
     onSlotChange() {
         this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker'));
@@ -8700,7 +8700,7 @@ const CatIcon = class {
         this.a11yLabel = undefined;
     }
     render() {
-        return (index.h("span", { key: 'c891087c8f7cd2bd506c9ab60281b83f8c6d0a11', innerHTML: this.iconSrc || (this.icon ? of.catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        return (index.h("span", { key: '1e1698413feaee8ca810b50370fc44a5a9f229dc', innerHTML: this.iconSrc || (this.icon ? of.catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
                 icon: true,
                 [`icon-${this.size}`]: this.size !== 'inline'
             } }));
@@ -10276,7 +10276,7 @@ function isNumberValue(value) {
     return !isNaN(parseFloat(value)) && !isNaN(Number(value));
 }
 
-const catInputCss = ".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:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--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:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--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:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--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:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--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:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--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:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--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:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--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:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--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-info-bg, 0, 115, 230)) !important;color:rgb(var(--cat-info-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-info-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-info-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-info-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-info-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-info-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:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--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:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--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:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--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:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--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:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--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:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--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-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;font-size:0.9375rem;line-height:1.25rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{flex:1 1 auto;display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;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;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-readonly{pointer-events:none}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.input-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.input-wrapper:focus-within:has(.clearable:focus){outline:none}.input-wrapper.input-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-outer-wrapper{display:flex}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable,input.has-toggle-password{padding-right:1.5rem}input.has-clearable.has-toggle-password{padding-right:3.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.toggle-password{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.has-clearable~.toggle-password{right:1.5rem}:host(.cat-date-input) .input-wrapper,:host(.cat-time-input) .input-wrapper{z-index:1;border-top-right-radius:0;border-bottom-right-radius:0}";
+const catInputCss = ".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:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--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:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--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:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--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:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--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:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--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:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--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:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--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:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--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-info-bg, 0, 115, 230)) !important;color:rgb(var(--cat-info-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-info-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-info-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-info-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-info-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-info-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:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--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:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--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:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--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:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--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:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--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:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--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-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;font-size:0.9375rem;line-height:1.25rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{flex:1 1 auto;display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;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;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-readonly{pointer-events:none}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.input-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.input-wrapper:focus-within:has(.clearable:focus){outline:none}.input-wrapper.input-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-loading,.icon-prefix,.icon-suffix{align-self:center}.input-outer-wrapper{display:flex}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable,input.has-toggle-password{padding-right:1.5rem}input.has-clearable.has-toggle-password{padding-right:3.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.toggle-password{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.has-clearable~.toggle-password{right:1.5rem}:host(.cat-date-input) .input-wrapper,:host(.cat-time-input) .input-wrapper{z-index:1;border-top-right-radius:0;border-bottom-right-radius:0}";
 const CatInputStyle0 = catInputCss;
 
 let nextUniqueId$7 = 0;
@@ -10297,6 +10297,7 @@ const CatInput = class {
         this.clearable = false;
         this.togglePassword = false;
         this.disabled = false;
+        this.loading = false;
         this.hint = undefined;
         this.icon = undefined;
         this.iconRight = false;
@@ -10323,8 +10324,10 @@ const CatInput = class {
     get id() {
         return this.identifier || this._id;
     }
+    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"]');
     }
@@ -10364,39 +10367,39 @@ const CatInput = class {
     async mask(options) {
         new Cleave_1(this.input, options);
     }
-    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();
+            }
         }
     }
     render() {
-        return (index.h("div", { key: 'c479bfd476678204a9503997e7fe2933a634729e', class: {
+        return (index.h("div", { key: 'c35a9fef53abc8f90318e04f37a15e281007ce91', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal
-            } }, index.h("div", { key: '727a9a4c15deea0971363b85fa26774c9c4c11aa', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'c2965591b3d986b0a7414206e1158f2312553503', htmlFor: this.id, part: "label" }, index.h("span", { key: 'a9177e8559c7f8933e5e93e9fe6756c6755b016b', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '26c33e12098387e322c863d1da02c96d6074342c', name: "label" })) || this.label, index.h("div", { key: '834dd1bcd7b9e1100a48b617eb3e944aad658786', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '6bcecd1ca2b7d7aa259f2aa8bc27e887fe9e63d1', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '58134ddb32dfbf8dfdaf2edcfed797a65c2f0f6a', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: 'd3306557c523770cf3984bfca6c7c15ea7ebcbb6', class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), index.h("div", { key: '5603592994bf6d87864ec5f3f0b0d302e63804de', class: "input-container" }, index.h("div", { key: '0b885071b292b38267d4ec19acc6358f5445ca35', class: "input-outer-wrapper" }, index.h("div", { key: '0bcab2c196468c849d6aeb04a15a76565085c4f3', class: {
+            } }, index.h("div", { key: 'ee09123d5c98cdeb2c691e55b751908d0d770111', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'af7b1e38868f2deb4ad625bdf2e22f163c4a87b3', htmlFor: this.id, part: "label" }, index.h("span", { key: 'aca425f9976509f18190e93c69d5274376dff02b', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '6d3b4503cc122a777dfafec12df63e3b891be047', name: "label" })) || this.label, index.h("div", { key: 'd5e896348ce01ae0b14e551b12a5e1bbba17af79', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '6f324f7a3acf2d24de0402975bbe20c1e14885ee', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '301c4bcde93261c6c3fa9488a36aaa57f4297421', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: '65d74e1addc8090889167ee0ca391c7d72bc0719', class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), index.h("div", { key: 'a46c6b8644fb6effe070018e64772394ba1e49b9', class: "input-container" }, index.h("div", { key: 'bbdb55e7a339c95172281b0b145a41ca80774d64', class: "input-outer-wrapper" }, index.h("div", { key: 'bcc3207d825560d63ee77cf3bbf3996fe853c6f6', class: {
                 'input-wrapper': true,
                 'input-round': this.round,
                 'input-readonly': this.readonly,
                 'input-disabled': this.disabled,
                 'input-invalid': this.invalid
-            }, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: '81b1c4c796848444cbb6df20fa0b6780b1a262a8', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '7dede77472630a5ad98d8961ceee47169ccd0ad3', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: '5c66bc99f626dce14463d8e8fab3e116762d69ed', class: "input-inner-wrapper" }, index.h("input", { key: '28c4870c6b9d1d08527569f3f69ed2c5d7d461a7', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: 'ce871809b18c5d8d0185f423a536c187f07044ac', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '9b9f24c7558feac1bd2f16479a530ecf9b48053a', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: 'e1bdaa8e2a6354f87e3a76c7883e140323997b49', class: "input-inner-wrapper" }, index.h("input", { key: '5aed7be866964981b3d4b68d07e30cb4ac4c62c0', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
                 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
                 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
-            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: '0c27d9d466ff6d9770e5bb70f0aa3c6eb1f7875e', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: '18898b6e8d95fcae6525c6d32c28c9b96e431219', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: 'b96bde58808d545f32d1869a3330fa6278a8ecb9', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '2141c63c43835460850291eccfd4894a5ee1995b', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '38980fcdb73d5aaf3044bdbefb164d6977b5509d', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: '5f83098feedfdd494a669c7c8ade35a2f1e2be73', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: 'c72bf6699640dcfcfd0fbb234c27b22c8f456e63', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: 'b52955e6def27de98007311735ff7af7b03103bf', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: '5ba3de99ed1e9bbcf1ce845fc6bcc045d0524a14', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '6b71c73cda4ba80fcdaa53e521b648245277e76c', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: '174802a1493b21dbed3f92553e9315a9af04b25c', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '450043a9b160386d3a04fca9ff42595a80eec135', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '4c76e1d0ed2be65d144a1b17941acd1f40524002', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: '6a33d7769b02c71a754e994195a91f90abce2220', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: '54c7b48879d859ccf8f0e7d44a8fa132b6d1055b', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
     }
     get invalid() {
-        return !!Object.keys(this.errorMap || {}).length;
+        return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;
     }
     onInput() {
         this.value = this.input.value;
@@ -10468,9 +10471,9 @@ const CatPagination = class {
         this.iconNext = '$cat:pagination-right';
     }
     render() {
-        return (index.h("nav", { key: '618b6da3704737944ba6a2a42556b83b8c517203', role: "navigation" }, index.h("ol", { key: 'ccc355a38d2fe5c037af23bbf6ca13921d7b204b', class: {
+        return (index.h("nav", { key: 'aea4a39cc798431911b8775600dd734595d51185', role: "navigation" }, index.h("ol", { key: 'bbcb43fa61bcd379ad84eb28ca6bcf995bf85159', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, index.h("li", { key: '1bc64e23c77a1cf907cc51fdac9ecf74d5652126' }, index.h("cat-button", { key: 'e292341f7926f6028ada36f7948f8355f3da81a0', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: of.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", { key: '734615ad7e152608b2b12f1aeade2d29323a98a4' }, index.h("cat-button", { key: 'b1b8ad79339aba3d1ba606cb01e35b9bb137db10', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: of.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
+            } }, index.h("li", { key: '984f120135399170d9374881a8562fa12b7c0a75' }, index.h("cat-button", { key: '8f173139e15c77227fc1044196887b489835a4c5', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: of.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", { key: '165a68e0fd8f78f4fc6a505ec4c0715a21607d00' }, index.h("cat-button", { key: '74864af9ce7f4f38b3d1e47209d8c47faf559b96', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: of.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
     get isFirst() {
         return this.page === 0;
@@ -10573,13 +10576,13 @@ const CatRadio = class {
         this.input.blur();
     }
     render() {
-        return (index.h(index.Host, { key: '9eb9e711c531675c5a2dde8f4ac0f112cbbf0ddc' }, index.h("label", { key: '7b46353f5d46952b552a318b1f3f39e05f9e5208', htmlFor: this.id, class: {
+        return (index.h(index.Host, { key: '7fb3add02c4e5ad69577dd753a3a0353153fa304' }, index.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' }, index.h("span", { key: '5702eb824f57f52107fee5534bd7823c4b5c822b', class: "radio" }, index.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 }), index.h("span", { key: 'c6a8a3e11c8a7f663bd861190f8b3fc6d8649dfd', class: "circle" })), index.h("span", { key: 'f6679db9d033cf373a6341c1ea3ea1b2a8c3e154', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: 'acf496e1f124bec52dff12d3b7e9206b8c455680', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '9ab26eb79feeefaf0f143836df8711e1335255bc', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '27ab2cadf0cbecd1803c12221d78b9fd68ac5bf8', class: "circle-placeholder" }), index.h(CatFormHint, { key: '2c89013ef175c063ebac67f0f1dcaa9d3ff311bc', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
+            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { key: 'baea250060694d0f239b222efafd469c3fd51d6e', class: "radio" }, index.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 }), index.h("span", { key: 'a0e30eb3a071d8981dc2cf6e12d42bbcf5ff8bec', class: "circle" })), index.h("span", { key: '518d21be81587a6bd6fd571b4921a9c7464f65ae', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: 'f9f92eb46213178a4be84210f3a7d4b758bb043c', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '9af9f7e6331131847217ad74b2c4c7bd3ca51212', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '6064b9990cbbb0f49a305acc15f0ea7bed627da7', class: "circle-placeholder" }), index.h(CatFormHint, { key: '4cb103c3f9b83555b222da19bf480af83201465e', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -10670,7 +10673,7 @@ const CatRadioGroup = class {
         }
     }
     render() {
-        return (index.h("div", { key: '03889f6f1d8a995b4a58f2cecc52a880955e33bd', role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", { key: '30ba95aa4f5a0e1a206e4b6819c5bca2d60d1b73' })));
+        return (index.h("div", { key: 'af9aff52c285bb32986d27c4f062f7ca8dbe394e', role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", { key: 'e4542e17427cdd2d31e38276afe5d240f5b9e6cf' })));
     }
     init() {
         this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
@@ -10759,13 +10762,13 @@ const CatScrollable = class {
     }
     render() {
         return [
-            index.h("div", { key: 'fb45dc6ff06b062e3afd7b87faabf5a153cf1fdb', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && index.h("div", { key: '9ac0e11c95067c51658055a405be4ccd3e0c2c5c', class: "shadow-top" }), !this.noShadowX && index.h("div", { key: '288081b27ab2fe6f097f4c294ae345c5ff2c0b71', class: "shadow-left" }), !this.noShadowX && index.h("div", { key: 'ce8c8fc14f609159956b297802d9341abef06aa0', class: "shadow-right" }), !this.noShadowY && index.h("div", { key: '040f6d1126096cf0506e108e6ce6f5c7869b2ad1', class: "shadow-bottom" })),
-            index.h("div", { key: '91405bb6b4b42f6ae550fd6d2dc11245f4364955', ref: el => (this.scrollElement = el), class: {
+            index.h("div", { key: 'd2c0966e736fe4da66b4ff4c17ce51b914bc4b8d', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && index.h("div", { key: 'a0b25b995b5f75d1c09d4dc982ceebe9a8c904b8', class: "shadow-top" }), !this.noShadowX && index.h("div", { key: '02e550e37511bff64e9c8c2bd09c41858fdd3930', class: "shadow-left" }), !this.noShadowX && index.h("div", { key: 'debb835bfcf815837e14b1378190e90a243a1af5', class: "shadow-right" }), !this.noShadowY && index.h("div", { key: 'd646f92372ab80246f0164c672812854d6c1c946', class: "shadow-bottom" })),
+            index.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
-                } }, index.h("slot", { key: '3e57c7cdb12a9ea1cf0afcb5317f7937a8f58cf7' }))
+                } }, index.h("slot", { key: '6923a1a06201e1997c80af316d57d0654312dca4' }))
         ];
     }
     attachEmitter(from, emitter) {
@@ -10952,17 +10955,17 @@ const CatSelect = class {
     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) {
@@ -11017,8 +11020,10 @@ const CatSelect = class {
             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"]');
     }
@@ -11203,18 +11208,18 @@ const CatSelect = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '772a3fe800619d1ad1f22b0f38398d5a51077094' }, index.h("div", { key: 'a3e582fe3877268805f404e7139699cc7e460505', class: {
+        return (index.h(index.Host, { key: 'f8f27eef2e7fff527c9a3c4e7c4fde643d80b606' }, index.h("div", { key: '1d28d1629ab6407eb8af786b7878309885ea8e99', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal,
                 'select-multiple': this.multiple
-            } }, index.h("div", { key: '8bede450fb51d6f4783f673ddd92e2a43d25c6e8', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '26bb54f5eff8dca3f2249f5d708ec18843ec0d16', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: 'ae76760a5db3986f809750dca03f6c957e984081', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '11ef4f9ece98bc97667636238572752450a6ba74', name: "label" })) || this.label, index.h("div", { key: '9df12d2808e971c4aa1f13b669f8064bd7676e5e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '64ad2f03d55c6cf4a671b125fb8ca702aeeb6e32', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '977b3f8f38d82e9155d39149321654dc98fe5086', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'c17f2ba664a71419297603e46b30037fb91379aa', class: "select-container" }, index.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) }, index.h("div", { key: '76ff7565a72e1b734bddd449f1b2598a7caa5fa2', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
+            } }, index.h("div", { key: 'dc241514b1e697c2a42c230c9f04cd07f1a3a735', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'd5f0179474aeca24a0773e81e9b08873e847facd', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '3cf13b24b0537d2a70e6a0918d1ba6c9b2b84731', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'f0ad0d85b986a657456c8cd37b2f5cf286d1bf44', name: "label" })) || this.label, index.h("div", { key: '0ec56a4f09ee480300e5ea8c2c656f90e5fef2de', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '08c2e70f25ccf68bbc73d2366e39f4bde5d1c675', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '7e7fe7b9e28e4833bb413c60af3459a1d998189b', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'bf37c5423d2e33d98bd62007a74a45f2362c4575', class: "select-container" }, index.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) }, index.h("div", { key: '5378a3d5f444e6346c53ffb7023cce68cf1c3ffb', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.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 ? (index.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, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.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 ? (index.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, index.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 && index.h("cat-spinner", { key: '537fda8045e3725c26c161c4e187c4a1d7bcc6e8' }), this.invalid && (index.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 ? (index.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, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.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 ? (index.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, index.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 && index.h("cat-spinner", { key: '4621c8c3b7e430e5841471757da5a51df5ca86ad' }), this.invalid && (index.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 ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: of.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.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 ? of.catI18nRegistry.t('select.close') : of.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 && (index.h(CatFormHint, { key: '1a754103d3560da43b8dab28da03bfda5da54328', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: '4aada6b82114fd0f5b5ba2c84c15af748a35b20c', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: '1779e311c227b1a41e2a138d71371ee5925f64bb', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.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 ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: of.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.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 ? of.catI18nRegistry.t('select.close') : of.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 && (index.h(CatFormHint, { key: 'de8b11dcd1e97476a811f9811026eae619c42ac8', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: '558cf4e93022770cf7841eab7d2f8b116cb221be', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: 'cdc203f6738614839f1a18c2bce9353f0df8e47c', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.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(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : of.catI18nRegistry.t('select.empty')))))))));
@@ -11223,7 +11228,7 @@ const CatSelect = class {
         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) => {
@@ -11706,7 +11711,7 @@ const CatSelectTest = class {
         setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
     }
     render() {
-        return (index.h(index.Host, { key: '153bf14c997db207ab1587e6ad37c44afa095be5', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, index.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 }, index.h("span", { key: '1d6c5c130f5740dc46129ba4a8b7ea570b9adf6b', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.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 }), index.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 }), index.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 }), index.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 }), index.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 }), index.h("cat-select", { key: 'a2540116218b9d96fa5f3d7fc2a3c1dd32987296', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), index.h("cat-dropdown", { key: 'add3df944b9d4475d6d002ce76690565b0ddadeb', overflow: true }, index.h("cat-button", { key: '3acbf50077f5da1d6585ca9aa3e4239c18ae83a1', slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { key: 'c5a3d0da15494d2c5c46a64d893c010a6435a13a', slot: "content", style: { width: '400px' } }, index.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 (index.h(index.Host, { key: '0427cd222f128124aa5b7304ecc56f98f82ad601', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, index.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 }, index.h("span", { key: 'b4284b5fa7bd3c80c49900cc901a67ce87b02fba', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.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 }), index.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 }), index.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 }), index.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 }), index.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 }), index.h("cat-select", { key: '59e0e9df2329e1ee7f96a071462a58e7aac8c057', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), index.h("cat-dropdown", { key: 'bfed29db8e502f705877dd79ad9f584569639a22', overflow: true }, index.h("cat-button", { key: 'fda80f359585e24f3fa9cff4567b4c6d0681cc9d', slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { key: '180ed85afb561a07ff346bd481503d57c336fbe6', slot: "content", style: { width: '400px' } }, index.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 {
@@ -12962,7 +12967,7 @@ const CatSkeleton = class {
         this.lines = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '63780b104eecc534aab9673dc6cd55c3639eecbd' }, Array.from(Array(this.count)).map(() => (index.h("div", { style: this.style, class: {
+        return (index.h(index.Host, { key: '95992890ce7b8c90068af979179fe6e512cd599c' }, Array.from(Array(this.count)).map(() => (index.h("div", { style: this.style, class: {
                 skeleton: true,
                 [`skeleton-${this.effect}`]: Boolean(this.effect),
                 [`skeleton-${this.variant}`]: Boolean(this.variant),
@@ -13002,9 +13007,9 @@ const CatSpinner = class {
         this.a11yLabel = undefined;
     }
     render() {
-        return (index.h("span", { key: '951ac5770487a3b326092d21f36a7cb439db273e', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+        return (index.h("span", { key: '89faeed63cfd08de386255baa799e7d830721d79', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
                 [`spinner-${this.size}`]: this.size !== 'inline'
-            } }, index.h("svg", { key: 'abe773a06ff9c3df6b7d60eb186f71b9a3d3788d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, index.h("circle", { key: 'd3dce1b2232b56124ec26f5705d00802bbbf1a89', cx: "24", cy: "24", r: "21.5" }))));
+            } }, index.h("svg", { key: 'afaf3eca2151ca1a55a7b5154b35e5f182f20c98', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, index.h("circle", { key: 'd23f0e2af84424c2a14c6746f96e9f5c3eff4f43', cx: "24", cy: "24", r: "21.5" }))));
     }
 };
 CatSpinner.style = CatSpinnerStyle0;
@@ -13036,7 +13041,7 @@ const CatTab = class {
         this.catClick.emit(event);
     }
     render() {
-        return index.h(index.Host, { key: '2b8e751066061cda8d276a7789f580953b5ec15e' });
+        return index.h(index.Host, { key: '7a34fd50ed725aac1cd6a36125aad1fb044203e9' });
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -13100,7 +13105,7 @@ const CatTabs = class {
         this.activate(this.tabs[index]);
     }
     render() {
-        return (index.h(index.Host, { key: '92ef86bc234601a9c2f8464ed148380919d1b15e' }, this.tabs.map((tab) => {
+        return (index.h(index.Host, { key: 'ffcba33b7d479bd2a282a21a51d82664e79f0743' }, this.tabs.map((tab) => {
             return (index.h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
                     'cat-tab': true,
                     'cat-tab-active': tab.id === this.activeTab,
@@ -13167,11 +13172,12 @@ const CatTag = class {
     get id() {
         return this.identifier || this._id;
     }
-    get invalid() {
-        return !!Object.keys(this.errorMap || {}).length;
+    componentWillLoad() {
+        this.onErrorsChanged(this.errors, undefined, false);
     }
-    get hasHint() {
-        return !!this.hint || this.invalid;
+    componentWillRender() {
+        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     }
     onKeyDown(event) {
         const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;
@@ -13193,26 +13199,27 @@ const CatTag = class {
             this.catChange.emit(this.value);
         }
     }
-    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();
+            }
         }
     }
-    componentWillRender() {
-        this.onErrorsChanged(this.errors);
-        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    }
     render() {
-        return (index.h(index.Host, { key: '398a4b7c4e4083354f0c2d6e0224144938d13c91' }, index.h("div", { key: '05f5813a7d630e814abb7a2fe83cd43a5e88e1e3', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '4d4ddf228978a88f79ca6d0457e98ec13b260ff8', htmlFor: `tags-${this.id}-input`, part: "label" }, index.h("span", { key: '3d04af2eefcb408c2f9fc7345fc30babf1674002', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '7e0f92865f6a37c5b4702d3abd1d39e7e7c871ac', name: "label" })) || this.label, index.h("div", { key: '27f211e9409626760244007b1871deb78065b00c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'cac179c8ab9d8fa28877fc619dacdf3890640b4c', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '0d7587cf3d5706846ec635b0e9762faf3b5acd18', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'c26692159377a9f808f5052491eef1528d65c02e', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (index.h("div", { class: "tag-pill" }, index.h("span", null, value), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), index.h("div", { key: '843bc85ffc9ddb85612a2f7ad38a009fc90242f2', class: "input-inner-wrapper" }, index.h("input", { key: 'd952b031c057a055f4be1869ebdb9b9f33589120', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (index.h("cat-button", { key: 'dc1cba0d616ad239c45b1db93c98bcd68b9c1cdd', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && index.h("cat-icon", { key: '62e89d1492b4c72a01c3d362171b76e7c9f9a9ae', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (index.h(CatFormHint, { key: 'f291d121c8aee0c871b4d72f497a83778d0165c1', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))));
+        return (index.h(index.Host, { key: '135364ebcdc0a62c65bac513a6b1064471dde605' }, index.h("div", { key: '4817ca9e3cd93efdc06e22e0b415db48b00185f7', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'b95bcba6027f2fa40b7923366ceb2a1c26129a3e', htmlFor: `tags-${this.id}-input`, part: "label" }, index.h("span", { key: '9c704843a3c064509204833a3ba6e5eac2d21231', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'e2ab5fe74ed24208728a982af1159dcc72a09c41', name: "label" })) || this.label, index.h("div", { key: '7469074d3cfc1bf339946d5a442af837dadf0084', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '0d2aef89e70dbaa69158fe258696603e0d677c80', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '7a4aea95cd7d800a08f18f4328480d6f85a0496d', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '1720e39c3bf5ba7985293e61d1dc418e73244811', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (index.h("div", { class: "tag-pill" }, index.h("span", null, value), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), index.h("div", { key: '44dda72d8199e6734bccd7cc04d1b351fadd5aee', class: "input-inner-wrapper" }, index.h("input", { key: 'c0cf4621bb64972abc2de682ee6fd5c25fcbb204', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (index.h("cat-button", { key: '3352788f1b1efcd077561c4f2a32ab08a1970447', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && index.h("cat-icon", { key: 'd699cf0b9b44899618e01d2fec55f020bd45c2b4', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (index.h(CatFormHint, { key: '2b9e63f062e99069dc43946c236ddb7805b86f41', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))));
+    }
+    get hasHint() {
+        return !!this.hint || this.invalid;
+    }
+    get invalid() {
+        return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;
     }
     onInput() {
         const currentValue = [
@@ -13308,8 +13315,10 @@ const CatTextarea = class {
     get id() {
         return this.identifier || this._id;
     }
+    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"]');
     }
@@ -13340,35 +13349,35 @@ const CatTextarea = class {
         this.value = '';
         this.catChange.emit(this.value);
     }
-    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();
+            }
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a0869be16c6763ab0a53c176ca2c62f359ac5e1f' }, index.h("div", { key: '9287759dd8d94f3ce19d1d7a6fcc4a79ac2d93d1', class: {
+        return (index.h(index.Host, { key: '5e2569d36f6faec841701fd9acb640737f5be4bd' }, index.h("div", { key: '8bfd630114a41d5128f546c4596a2fc0de7b0f46', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, index.h("div", { key: '9ea634678136006027e77c0c78f78d5e82d3b645', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '555c51a445aec5c7aef96005b64a8c72b7984e8b', htmlFor: this.id, part: "label" }, index.h("span", { key: '90c76a8ad82c5b76f107ece9903ede13c393f804', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'c3a63aa2bea65bda933b3d1b0da2020e838498e4', name: "label" })) || this.label, index.h("div", { key: 'd55eb901ef8ca67d039dfe35158e3b5368dfa45e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'ff14b950bdf948f1722e317f7a8dd96acf74a3c4', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'b0aca208498cec359cd11ce4553d27d749f418da', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: 'bf211a3f7947ea2b702253bf0cc526a4cb284d24', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), index.h("div", { key: 'fc55f53090b133715cd25eaf01b4503b00978f9c', class: "textarea-container" }, index.h("div", { key: '7ae02ac97e0043845b07eec1a7db5c6ccde983e9', class: {
+            } }, index.h("div", { key: '5d61d594bf5dd54a61d67e567d7f75d10e81fc16', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'ce7a20106b85c6ac1993154bcac3b045ac9db4b7', htmlFor: this.id, part: "label" }, index.h("span", { key: 'b6a5faa611b0b5fc1d2e4b34cb0b87ef48b76510', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'd6ac0138ad90af2d80933237f1244560b4678c10', name: "label" })) || this.label, index.h("div", { key: 'a3034e991a35206aaad04a068056a7b25a3ef0d0', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '8231926224217c999493c56656ee360453865ee5', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '666ea1ef5ac684c1ddfa854605afb3f15d1bb31a', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: '09b4afa39cb26371d179095c3e703ab5437309d2', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), index.h("div", { key: 'f4640f6761d044ea29810b89604d5d40101427e1', class: "textarea-container" }, index.h("div", { key: '51bac1b86b0aaa37e2bc80fade34478e0da9f04b', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, index.h("textarea", { key: 'e75a42ba20f04e17f2e463f75196530cbc197aec', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (index.h("cat-icon", { key: 'd452062caeed39cf3cf9f06bcaeccb36d62ff5fe', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: '551c054a13ec4d51f43244b7215303ac5bcd1969', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, index.h("textarea", { key: '5248d353acf90ea7efbbe99bf4faf7d411373189', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (index.h("cat-icon", { key: '8b3cf0397ff8813be35c6344e079057fd5d1b032', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: '9cd285c4aac61a812e8308f3d005d3f95c8c6d97', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
     }
     get invalid() {
-        return !!Object.keys(this.errorMap || {}).length;
+        return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;
     }
     onInput() {
         this.value = this.textarea.value;
@@ -13597,14 +13606,14 @@ const CatTime = class {
         this.input?.clear();
     }
     render() {
-        return (index.h(index.Host, { key: '55e285241d8a5bf961a080839bf70d795c7ab108' }, index.h("cat-input", { key: '6c5641ac8ad4d352f66920cef8611947b4619d92', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '3482556a1876b19688b4e103a13977af291bb44f', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: 'f095f65a021efcf4b96ecd53d9418039fd85935c', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: '71287b6ed9276ecc58c40b5003feb5105550fddc', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '94fd09f72a3fb70e62b2108ada2b2bee616342d3', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: 'c86f00f677809baced1decc8be879830175365a0', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: 'e01c696cbaac7fd5fd81d2fea42d1714478973f6', slot: "addon", placement: this.placement }, index.h("cat-button", { key: '2acde78757bc009b10a9ee77522d53c88b31e633', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: '07c46ce342cf7589f691336cf06ce6ca173b97ac', slot: "content", class: "cat-nav" }, index.h("ul", { key: '6132f2e1e0d65c960dbb8f2930dc2e80a145b30e' }, this.timeArray().map(time => {
+        return (index.h(index.Host, { key: 'e7f3fec7aac9269904c5b85554e1c066b1ca630e' }, index.h("cat-input", { key: 'e7e3ecb30bdbe05e07bb749edbddca5f23312985', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: 'fb1227046b0e70ca3b3e7fdd817693415f3c95cd', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: '80986dbd022a16c7346fce67aa9142c77b7f878f', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: 'a0122503c91023c09cfaf02a528a2af9a8fae457', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '3f8179a371368b89267571e66827b7f79f1b0cda', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: '62cd7e32d099d45142a5241a7485275e675d498d', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: '8a7926b666c69528396a683048efaf9d8ad54df1', slot: "addon", placement: this.placement }, index.h("cat-button", { key: '47b6dffa1c65644bc36706d0187c1681fbd3327e', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: '6afd81a1b00e31723efcb3b49c3df97c52ea21b0', slot: "content", class: "cat-nav" }, index.h("ul", { key: 'd1176db0809d98ad0dd4919dd28aed480b668cbc' }, this.timeArray().map(time => {
             const isoTime = formatIso(time);
             const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
             return (index.h("li", null, index.h("cat-button", { class: {
                     'cat-nav-item': true,
                     'time-disabled': disabled
                 }, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
-        }))))), this.hasSlottedHint && (index.h("span", { key: '0609dce2baff97ce679df5571e4f53ecf503bafd', slot: "hint" }, index.h("slot", { key: '8288f3f2bb0695edeba3e5f39a344e2364120ddd', name: "hint" }))))));
+        }))))), this.hasSlottedHint && (index.h("span", { key: '9c46d6be446c162b785d2d03a856b63417f1a38e', slot: "hint" }, index.h("slot", { key: '1e581c2ee687c125552ad560da773da4dfdd4691', name: "hint" }))))));
     }
     timeArray() {
         const result = [];
@@ -13730,13 +13739,13 @@ const CatToggle = class {
         this.input.blur();
     }
     render() {
-        return (index.h(index.Host, { key: 'db30b9f0e1b56af56a9ca385f8dd6f4a458c6bfb' }, index.h("label", { key: '6aa4f65e9ffd8075214738dd31e7684ac451828a', htmlFor: this.id, class: {
+        return (index.h(index.Host, { key: '219420443e79499c24a6c10335cedb7ddb1cc2ab' }, index.h("label", { key: '8ffc784cf23916ec23ab7c23a2c97e41cb4cfc15', 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'
-            } }, index.h("input", { key: '872bb5e3105a095254b2e98b21bf3718a238a98e', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: 'a828a70dfbcaee3cb8b8a63c046b99496c16c9f5', class: "toggle" }), index.h("span", { key: '560090efe2c053936d3274b11d8eeb9cb10ecaef', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '5b5a246d71cb380eeb509db0de46a9a5f903ad01', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: 'a5686f0863a51f89515a1609f151b131858adda2', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '229ac1985dd48349756d899617fb083acff08f8b', class: "toggle-placeholder" }), index.h(CatFormHint, { key: '3da05ddafe48eca22e5abdb402021dff3a5660eb', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
+            } }, index.h("input", { key: '56e7c4442215c8dd227b5d5c45b023836801d471', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: '83fefa9d2480f8447762371da322114bc5a84a90', class: "toggle" }), index.h("span", { key: '86c800327c80c12d5bd7ab6fad43d414bf3316f5', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '990568b1744ca7fc7084fbb796bf5829254c4ba3', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '72cad47ea14041c3f51da3e95264cbf5c6a78c1a', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: 'ef4cceeda35a41bbb8907113aff690e92925c7c1', class: "toggle-placeholder" }), index.h(CatFormHint, { key: 'bbcea6bd0bfe51d8d070d8ab2568212d4ea20ea3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;