@haiilo/catalyst 10.12.0 → 10.13.0

package/dist/esm/cat-alert_29.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-b7832dfc.js';
-import { e as createErrorClass, O as Observable, f as errorContext, E as EMPTY_SUBSCRIPTION, S as Subscription, g as arrRemove, h as operate, i as createOperatorSubscriber, j as innerFrom, k as executeSchedule, l as isFunction, m as identity, n as from, p as popScheduler, q as isArrayLike, r as isScheduler, s as popNumber, t as noop, u as log, a as catI18nRegistry, c as commonjsGlobal$1, d as catIconRegistry, o as of } from './of-53334b95.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-3059296e.js';
+import { e as createErrorClass, O as Observable, f as errorContext, E as EMPTY_SUBSCRIPTION, S as Subscription, g as arrRemove, h as operate, i as createOperatorSubscriber, j as innerFrom, k as executeSchedule, l as isFunction, m as identity, n as from, p as popScheduler, q as isArrayLike, r as isScheduler, s as popNumber, t as noop, u as log, a as catI18nRegistry, c as commonjsGlobal$1, d as catIconRegistry, o as of } from './of-625babef.js';
 
 const ObjectUnsubscribedError = createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
     _super(this);
@@ -819,20 +819,12 @@ const CatAlert = class {
         setAttributeDefault(this, 'role', this.mapRole.get(this.color));
     }
     render() {
-        return (h(Host, { key: '65e08f5679d761056c71407b03b0b22fb5aa5c94' }, !this.noIcon && h("cat-icon", { size: "l", icon: this.icon || this.mapIcon.get(this.color) }), h("div", { key: 'b85309b1867b896244a0cda0ababb2e66ca2d01a', class: "content" }, h("slot", { key: 'ed88e2f275b189f5ae75ba3220b6f30be36699b4' }))));
+        return (h(Host, { key: '7a1be6c2ec8bf0638bc0e6197f85ef2047b3e125' }, !this.noIcon && h("cat-icon", { key: '3505dc2c7c9ca0b28fc5145eab55beaedb4a2500', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), h("div", { key: '6cac35c1cba20613515c75e066cfd91f5dd9670c', class: "content" }, h("slot", { key: '0d845eb31d8df70d4a0bf089fbe764a9c5359502' }))));
     }
     get hostElement() { return getElement(this); }
 };
 CatAlert.style = CatAlertStyle0;
 
-function delayedAssertWarn(component, assertion, message, timeout = 500) {
-    window.setTimeout(() => {
-        if (!assertion()) {
-            log.warn(message, component);
-        }
-    }, timeout);
-}
-
 /**
  * Loads an image and wraps the result in a promise.
  *
@@ -875,9 +867,6 @@ const CatAvatar = class {
     componentWillLoad() {
         this.onSrcChanged(this.src);
     }
-    componentWillRender() {
-        delayedAssertWarn(this, () => !!this.label, '[A11y] Missing ARIA label on avatar');
-    }
     render() {
         if (this.url) {
             return (h("a", { href: this.url, target: this.urlTarget, style: this.cssStyle, class: this.cssClass, "aria-label": this.label }, this.content));
@@ -927,7 +916,7 @@ const CatBadge = class {
         this.pulse = false;
     }
     render() {
-        return h("slot", { key: '8254c840d9f008183db57fc58dd3a092c7a0378c' });
+        return h("slot", { key: '68b23417a5826a8a39c0ed38bcae472c2d5d8c9d' });
     }
     get hostElement() { return getElement(this); }
 };
@@ -1102,9 +1091,6 @@ const CatButton = class {
     componentWillLoad() {
         this.onIconOnlyChanged(this.iconOnly);
     }
-    componentWillRender() {
-        delayedAssertWarn(this, () => !this.isIconButton || !!this.a11yLabel, '[A11y] Missing ARIA label on icon button');
-    }
     haltDisabledEvents(event) {
         if (this.disabled || this.loading) {
             event.preventDefault();
@@ -1224,7 +1210,7 @@ const CatButtonGroup = class {
         this.a11yLabel = undefined;
     }
     render() {
-        return (h(Host, { key: '736974e0eb79714f8718e90cb4b533cff13e123f', role: "group", "aria-label": this.a11yLabel }, h("slot", { key: '7894f468e3e265b67b7eb1c670966d4b55c97ce2', onSlotchange: this.onSlotChange.bind(this) })));
+        return (h(Host, { key: 'adf2bd20526672d6b485b7f84422510e40301415', role: "group", "aria-label": this.a11yLabel }, h("slot", { key: 'cd9e705fb12cf83bc4b7a7efb65ebd7b0e2652e9', onSlotchange: this.onSlotChange.bind(this) })));
     }
     onSlotChange() {
         this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));
@@ -1245,7 +1231,7 @@ const CatCard = class {
         this.catLoad = createEvent(this, "catLoad", 7);
     }
     render() {
-        return h("slot", { key: '7c606bbb0c69502b495cde09b987f232f52391fe' });
+        return h("slot", { key: '08f1d49357a212da833a722f733c3f654780ff41' });
     }
     componentDidLoad() {
         this.catLoad.emit();
@@ -1305,13 +1291,6 @@ const CatCheckbox = class {
     componentWillLoad() {
         this.updateResolved();
     }
-    componentWillRender() {
-        delayedAssertWarn(this, () => {
-            this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-            this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-            return !!this.label && !!this.hasSlottedLabel;
-        }, '[A11y] Missing ARIA label on checkbox');
-    }
     /**
      * Programmatically move focus to the checkbox. Use this method instead of
      * `input.focus()`.
@@ -1330,7 +1309,7 @@ const CatCheckbox = class {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '5efdf8a487237dfab88847b5f15a7de8e3404319' }, h("label", { key: '90407428ff977ece074488ccd983cb49fe6c4466', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { key: '80e567b42cb7a7ff5198eb65d5a85c314f86c0de', ...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, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'cab29bf428688d081e349a2bee31ed96675e3e20', class: "box", "aria-hidden": "true" }, h("svg", { key: '8fd0c4e8a2da90ebe65ce3bb367be1cf2e33580f', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: '5ecf20ab3a3db027c74943e281780b83bd7b2279', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '6b4d8857b893ae35578eceec9b1af5f9796e9b0c', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '3863523f8fb8ca58db3e2035082569730052d2cb', points: "1.5 5 10.5 5" }))), h("span", { key: 'cbecd65f620071056171dbea72a3dbc7ecf49c3c', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "box-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+        return (h(Host, { key: 'd992e46b09bb4718045c6212eb39ac1920b7d035' }, h("label", { key: '0abc83fa25b794f8a79edd1a943a143c2faff705', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { key: '9562082ebbb7d41afeb100f05d1e131ee8a796f5', ...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, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'cd4e67fe4cd4c4c8346a94bc53ff9c7268b40eb8', class: "box", "aria-hidden": "true" }, h("svg", { key: '4288d465cd962a77dec305626e0122d82e4f527f', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: '487de91926ddc9f85839f33df3c1df21cb83adaa', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: 'aa91bbf64d7c7488d2508fc3b29dbaf3c689d3a1', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '66db802d9ff914bc412a19ce4aacde2c7a79320a', points: "1.5 5 10.5 5" }))), h("span", { key: 'd03c3c11cd5925a39952e3ee99439f7eb0c2633f', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '53123f708f14e1dc645d1ee2ec50395984204bef', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'aafa7081b3e8b6b1fc49656e7a90d58d3002cf2f', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '8ef5e59d1309c37dc7372210cd7e690162b41a25', class: "box-placeholder" }), h(CatFormHint, { key: 'a396f2cb479141ddf587e50ee2ed2f76a7fb6d62', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -1552,13 +1531,13 @@ const CatDate = class {
         this.input?.clear();
     }
     render() {
-        return (h(Host, { key: 'f5a95ae7b8d801b09751585a749b563ac3b467d9' }, h("cat-input", { key: '8692325d46263e98e2042cc9c942c03fe454d437', 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 (h(Host, { key: '302c4461dfbfb4bfa806bf570185b3b8310d63e4' }, h("cat-input", { key: '1b95d4b88d607a1f6358211ec1c076d1af9e08d0', 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);
-            } }, h("span", { key: '61ea426899cddf6a1bd0ea2aade482fc95fcc904', slot: "label" }, this.label, h("span", { key: 'f6c85edf175d11eb6fcc0a710086cbe759250b9f', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: 'bd615d69e6965dcef9a9eb7decdd7967838a0e77', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, h("cat-button", { key: '7cec0bd3dedf351dcdd6c149843c024869086738', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), h("div", { key: '969d9af17678a28e16367d486081a7b46584fad5', slot: "content" }, h("cat-date-inline", { key: 'f3f190a0bbfece0ba3b50e9f56d9c853528844a5', 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) }))))));
+            } }, h("span", { key: 'f232c781551f8095fbdb6182ed2a754a44d59dee', slot: "label" }, this.label, h("span", { key: '5bbc5977c4744fab70fa9a7331601df10879370f', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: '9104b5e8a68ab11667f640e8c5bef8c9f41f3e05', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, h("cat-button", { key: '308e1a09a8585798d3a7a4709163191080e0a82f', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), h("div", { key: 'fde7d1c733a39c77dd1dc173f94899516bfe7fa0', slot: "content" }, h("cat-date-inline", { key: 'e1c22d53c4c99fd146149d50c3d867f4ea653b27', 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);
@@ -2254,13 +2233,6 @@ const CatDateInline = class {
             this.focus(startDate, false);
         }
     }
-    componentWillRender() {
-        delayedAssertWarn(this, () => {
-            this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-            this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-            return !!this.label && !!this.hasSlottedLabel;
-        }, '[A11y] Missing ARIA label on input');
-    }
     componentDidRender() {
         if (this.focusDate) {
             // re-focus the previously focused date after re-render
@@ -2358,12 +2330,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 (h(Host, { key: '087574f20cb3f66431d9b9e15fff9ec3511af03a', "aria-label": this.a11yLabel, FocusIn: () => this.a11yLabel && this.setAriaLive(this.a11yLabel) }, h("div", { key: '6d05699421089187e2f50cadda0168aeab5a3cb5', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'f8b3989fa5eaa01d391fac8c91a754269f68b14b', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: 'edb8fb991ad5c02b1e7ab9c5a6698b861a571b91', class: "picker-head" }, h("cat-button", { key: '98811832e82d16af9709f12d812d6212334d9e71', 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 }), h("cat-button", { key: '1377a0a359840b800b4a20770e143e83640e5e81', 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 }), h("h3", { key: '1bca84d109c3e7b11ec68f26e977fc7237db5178' }, this.getHeadline()), h("cat-button", { key: '566a777ba0465792e565e1bd431a6e525f139f60', 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 }), h("cat-button", { key: 'f4f628d49b9fd624c46b22e80ba3b2814efedcea', 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 })), h("div", { key: 'd57fc43da2f20ecdc13bc74c58f7ae2f90552339', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: '6174d5c05998423899ef832df61795d07a42b547', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
+        return (h(Host, { key: 'fa2169799cdc21797df46449a06fa3538b481286', "aria-label": this.a11yLabel, FocusIn: () => this.a11yLabel && this.setAriaLive(this.a11yLabel) }, h("div", { key: '95f9ae98d74689c928c488e2e8924ebccae9deaa', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'de108b4fcbde1361f04658ca9a68809ff1f34a37', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: '4fd5fe55a590decbdf7ace8d10d8216da5ed1a32', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'e59222221d1c7a1897c84c12e85107e6b460cf2a', name: "label" })) || this.label, h("div", { key: '1469b37e8c549e3748debb2c5beb470cfea9b983', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f3a3692c210e71ec251cad75059e0a176acd876e', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '7707a89f4d6f3d99d6c77b85a660778fce4009c2', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '43ab9073c35766a4faa9eded116650aa29e7d7c3', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: 'cc213fdedd24bff149aae56ad20903a0eef0b59f', class: "picker-head" }, h("cat-button", { key: 'fd74cf7796cc3523a643f0851df6375c498b8d6c', 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 }), h("cat-button", { key: 'b8073b0dd3057c0d50174f546d188b90853938c1', 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 }), h("h3", { key: '55c304c724d755374579c745679fef9783f51346' }, this.getHeadline()), h("cat-button", { key: '2eb82ee8702d7f63ef96681b54d5c147261550d3', 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 }), h("cat-button", { key: 'e65f47d327e241d75ef29072412c267afa222a81', 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 })), h("div", { key: '6c334ab997639ba426a984fedc39e8afc24c8ef8', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: '9ee6363a2f517d120870a5ec9aa573333e2caef7', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
             const day = (i + this.locale.weekInfo.firstDay) % 7;
             return h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
-        })), this.weeks && (h("div", { class: "picker-grid-weeks" }, dateGrid
+        })), this.weeks && (h("div", { key: '0d82b2fa4cfbb1c9ca38ea447b9a3ccdd8ff4ea6', class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: 'c1597e2c24747069cb443e0aa3df04d079201191', class: "picker-grid-days" }, dateGrid.map(day => {
+            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: 'f88d1120c200ed2f83546872174b4d15c723552a', 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;
@@ -2380,7 +2352,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()));
-        }))), h("div", { key: '6bb938a9c508735d2ed3a88c8315abe91def29ac', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: '66c8c9c200d58f96be3df9a02ce31ebe4970055f', class: "cursor-aria", "aria-live": "polite" })));
+        }))), h("div", { key: '50d3734a13b4b45dc74bfb7d8d0ba2540f39fb6a', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: '8af97da412bcd88e9c967e2c636ff6d5f61f434e', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: '34434a1523cbc88106b859a2eb5d0a4fd78212bf', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: '7febb5a8cf664ea399b3b2940d1dfdf85f353200', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: 'bb2b8c0fa92cda41a170e1ebe83bcac55325b7aa', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date, focus = true) {
         const [minDate, maxDate] = this.getMinMaxDate();
@@ -5294,6 +5266,10 @@ function getLocale$1(language) {
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
  */
+
+const sides = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'end'];
+const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -5625,6 +5601,191 @@ async function detectOverflow(state, options) {
   };
 }
 
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = options => ({
+  name: 'arrow',
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform,
+      elements,
+      middlewareData
+    } = state;
+    // Since `element` is required, we don't Partial<> the type.
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
+    if (element == null) {
+      return {};
+    }
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+
+    // DOM platform can return `window` as the `offsetParent`.
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+    const centerToReference = endDiff / 2 - startDiff / 2;
+
+    // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+
+    // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds.
+    const min$1 = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = clamp(min$1, center, max);
+
+    // If the reference is small enough that the arrow's padding causes it to
+    // to point to nothing for an aligned placement, adjust the offset of the
+    // floating element itself. To ensure `shift()` continues to take action,
+    // a single reset is performed when this is true.
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
+    return {
+      [axis]: coords[axis] + alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset - alignmentOffset,
+        ...(shouldAddOffset && {
+          alignmentOffset
+        })
+      },
+      reset: shouldAddOffset
+    };
+  }
+});
+
+function getPlacementList(alignment, autoAlignment, allowedPlacements) {
+  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
+  return allowedPlacementsSortedByAlignment.filter(placement => {
+    if (alignment) {
+      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
+    }
+    return true;
+  });
+}
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+const autoPlacement = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'autoPlacement',
+    options,
+    async fn(state) {
+      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
+      const {
+        rects,
+        middlewareData,
+        placement,
+        platform,
+        elements
+      } = state;
+      const {
+        crossAxis = false,
+        alignment,
+        allowedPlacements = placements,
+        autoAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
+      const currentPlacement = placements$1[currentIndex];
+      if (currentPlacement == null) {
+        return {};
+      }
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+
+      // Make `computeCoords` start from the right place.
+      if (placement !== currentPlacement) {
+        return {
+          reset: {
+            placement: placements$1[0]
+          }
+        };
+      }
+      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
+      const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
+        placement: currentPlacement,
+        overflows: currentOverflows
+      }];
+      const nextPlacement = placements$1[currentIndex + 1];
+
+      // There are more placements to check.
+      if (nextPlacement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: nextPlacement
+          }
+        };
+      }
+      const placementsSortedByMostSpace = allOverflows.map(d => {
+        const alignment = getAlignment(d.placement);
+        return [d.placement, alignment && crossAxis ?
+        // Check along the mainAxis and main crossAxis side.
+        d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
+        // Check only the mainAxis.
+        d.overflows[0], d.overflows];
+      }).sort((a, b) => a[1] - b[1]);
+      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
+      // Aligned placements should not check their opposite crossAxis
+      // side.
+      getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
+      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
+      if (resetPlacement !== placement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: resetPlacement
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
  * in order to keep it in view when the preferred placement(s) will overflow the
@@ -5740,6 +5901,206 @@ const flip$1 = function (options) {
   };
 };
 
+function getSideOffsets(overflow, rect) {
+  return {
+    top: overflow.top - rect.height,
+    right: overflow.right - rect.width,
+    bottom: overflow.bottom - rect.height,
+    left: overflow.left - rect.width
+  };
+}
+function isAnySideFullyClipped(overflow) {
+  return sides.some(side => overflow[side] >= 0);
+}
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+const hide = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'hide',
+    options,
+    async fn(state) {
+      const {
+        rects
+      } = state;
+      const {
+        strategy = 'referenceHidden',
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      switch (strategy) {
+        case 'referenceHidden':
+          {
+            const overflow = await detectOverflow(state, {
+              ...detectOverflowOptions,
+              elementContext: 'reference'
+            });
+            const offsets = getSideOffsets(overflow, rects.reference);
+            return {
+              data: {
+                referenceHiddenOffsets: offsets,
+                referenceHidden: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        case 'escaped':
+          {
+            const overflow = await detectOverflow(state, {
+              ...detectOverflowOptions,
+              altBoundary: true
+            });
+            const offsets = getSideOffsets(overflow, rects.floating);
+            return {
+              data: {
+                escapedOffsets: offsets,
+                escaped: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        default:
+          {
+            return {};
+          }
+      }
+    }
+  };
+};
+
+function getBoundingRect(rects) {
+  const minX = min(...rects.map(rect => rect.left));
+  const minY = min(...rects.map(rect => rect.top));
+  const maxX = max(...rects.map(rect => rect.right));
+  const maxY = max(...rects.map(rect => rect.bottom));
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+function getRectsByLine(rects) {
+  const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
+  const groups = [];
+  let prevRect = null;
+  for (let i = 0; i < sortedRects.length; i++) {
+    const rect = sortedRects[i];
+    if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
+      groups.push([rect]);
+    } else {
+      groups[groups.length - 1].push(rect);
+    }
+    prevRect = rect;
+  }
+  return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
+}
+/**
+ * Provides improved positioning for inline reference elements that can span
+ * over multiple lines, such as hyperlinks or range selections.
+ * @see https://floating-ui.com/docs/inline
+ */
+const inline = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'inline',
+    options,
+    async fn(state) {
+      const {
+        placement,
+        elements,
+        rects,
+        platform,
+        strategy
+      } = state;
+      // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
+      // ClientRect's bounds, despite the event listener being triggered. A
+      // padding of 2 seems to handle this issue.
+      const {
+        padding = 2,
+        x,
+        y
+      } = evaluate(options, state);
+      const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
+      const clientRects = getRectsByLine(nativeClientRects);
+      const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
+      const paddingObject = getPaddingObject(padding);
+      function getBoundingClientRect() {
+        // There are two rects and they are disjoined.
+        if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
+          // Find the first rect in which the point is fully inside.
+          return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;
+        }
+
+        // There are 2 or more connected rects.
+        if (clientRects.length >= 2) {
+          if (getSideAxis(placement) === 'y') {
+            const firstRect = clientRects[0];
+            const lastRect = clientRects[clientRects.length - 1];
+            const isTop = getSide(placement) === 'top';
+            const top = firstRect.top;
+            const bottom = lastRect.bottom;
+            const left = isTop ? firstRect.left : lastRect.left;
+            const right = isTop ? firstRect.right : lastRect.right;
+            const width = right - left;
+            const height = bottom - top;
+            return {
+              top,
+              bottom,
+              left,
+              right,
+              width,
+              height,
+              x: left,
+              y: top
+            };
+          }
+          const isLeftSide = getSide(placement) === 'left';
+          const maxRight = max(...clientRects.map(rect => rect.right));
+          const minLeft = min(...clientRects.map(rect => rect.left));
+          const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
+          const top = measureRects[0].top;
+          const bottom = measureRects[measureRects.length - 1].bottom;
+          const left = minLeft;
+          const right = maxRight;
+          const width = right - left;
+          const height = bottom - top;
+          return {
+            top,
+            bottom,
+            left,
+            right,
+            width,
+            height,
+            x: left,
+            y: top
+          };
+        }
+        return fallback;
+      }
+      const resetRects = await platform.getElementRects({
+        reference: {
+          getBoundingClientRect
+        },
+        floating: elements.floating,
+        strategy
+      });
+      if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
+        return {
+          reset: {
+            rects: resetRects
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
 
@@ -5789,7 +6150,7 @@ async function convertValueToCoords(state, options) {
  * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-const offset = function (options) {
+const offset$1 = function (options) {
   if (options === void 0) {
     options = 0;
   }
@@ -5896,6 +6257,74 @@ const shift$1 = function (options) {
     }
   };
 };
+/**
+ * Built-in `limiter` that will stop `shift()` at a certain point.
+ */
+const limitShift = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    options,
+    fn(state) {
+      const {
+        x,
+        y,
+        placement,
+        rects,
+        middlewareData
+      } = state;
+      const {
+        offset = 0,
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const crossAxis = getSideAxis(placement);
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      const rawOffset = evaluate(offset, state);
+      const computedOffset = typeof rawOffset === 'number' ? {
+        mainAxis: rawOffset,
+        crossAxis: 0
+      } : {
+        mainAxis: 0,
+        crossAxis: 0,
+        ...rawOffset
+      };
+      if (checkMainAxis) {
+        const len = mainAxis === 'y' ? 'height' : 'width';
+        const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
+        const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
+        if (mainAxisCoord < limitMin) {
+          mainAxisCoord = limitMin;
+        } else if (mainAxisCoord > limitMax) {
+          mainAxisCoord = limitMax;
+        }
+      }
+      if (checkCrossAxis) {
+        var _middlewareData$offse, _middlewareData$offse2;
+        const len = mainAxis === 'y' ? 'width' : 'height';
+        const isOriginSide = ['top', 'left'].includes(getSide(placement));
+        const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
+        const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
+        if (crossAxisCoord < limitMin) {
+          crossAxisCoord = limitMin;
+        } else if (crossAxisCoord > limitMax) {
+          crossAxisCoord = limitMax;
+        }
+      }
+      return {
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      };
+    }
+  };
+};
 
 /**
  * Provides data that allows you to change the size of the floating element —
@@ -6234,10 +6663,10 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
 }
 
 const topLayerSelectors = [':popover-open', ':modal'];
-function isTopLayer(floating) {
+function isTopLayer(element) {
   return topLayerSelectors.some(selector => {
     try {
-      return floating.matches(selector);
+      return element.matches(selector);
     } catch (e) {
       return false;
     }
@@ -6425,7 +6854,7 @@ function getClippingRect(_ref) {
     rootBoundary,
     strategy
   } = _ref;
-  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
   const clippingAncestors = [...elementClippingAncestors, rootBoundary];
   const firstClippingAncestor = clippingAncestors[0];
   const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
@@ -6487,6 +6916,10 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   };
 }
 
+function isStaticPositioned(element) {
+  return getComputedStyle$1(element).position === 'static';
+}
+
 function getTrueOffsetParent(element, polyfill) {
   if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
@@ -6500,29 +6933,41 @@ function getTrueOffsetParent(element, polyfill) {
 // Gets the closest ancestor positioned element. Handles some edge cases,
 // such as table ancestors and cross browser bugs.
 function getOffsetParent(element, polyfill) {
-  const window = getWindow(element);
-  if (!isHTMLElement(element) || isTopLayer(element)) {
-    return window;
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
   }
   let offsetParent = getTrueOffsetParent(element, polyfill);
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
     offsetParent = getTrueOffsetParent(offsetParent, polyfill);
   }
-  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
-    return window;
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
   }
-  return offsetParent || getContainingBlock(element) || window;
+  return offsetParent || getContainingBlock(element) || win;
 }
 
 const getElementRects = async function (data) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
   return {
     reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
     floating: {
       x: 0,
       y: 0,
-      ...(await getDimensionsFn(data.floating))
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
     }
   };
 };
@@ -6592,9 +7037,11 @@ function observeMove(element, onMove) {
           return refresh();
         }
         if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
           timeoutId = setTimeout(() => {
             refresh(false, 1e-7);
-          }, 100);
+          }, 1000);
         } else {
           refresh(false, ratio);
         }
@@ -6698,6 +7145,23 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = offset$1;
+
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+autoPlacement;
+
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
@@ -6721,6 +7185,32 @@ const flip = flip$1;
  */
 const size = size$1;
 
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+hide;
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+arrow;
+
+/**
+ * Provides improved positioning for inline reference elements that can span
+ * over multiple lines, such as hyperlinks or range selections.
+ * @see https://floating-ui.com/docs/inline
+ */
+inline;
+
+/**
+ * Built-in `limiter` that will stop `shift()` at a certain point.
+ */
+limitShift;
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -6845,7 +7335,7 @@ const CatDatepickerFlat = class {
     }
     render() {
         return [
-            h("cat-input", { key: '2bf7691fd001b340000dd8b3091d8adea6692c39', 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 => {
+            h("cat-input", { key: '1f60758f6fc4ca114bea5c8cfcec32763cac649f', 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 => {
@@ -6854,8 +7344,8 @@ const CatDatepickerFlat = class {
                 }, onCatBlur: e => {
                     e.stopPropagation();
                     this.catBlur.emit(e.detail);
-                } }, this.hasSlottedLabel && (h("span", { slot: "label" }, h("slot", { name: "label" }))), this.hasSlottedHint && (h("span", { slot: "hint" }, h("slot", { name: "hint" })))),
-            h("div", { key: '3356a8ea5e0bd5be9a105055afc5f1663250e448', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
+                } }, this.hasSlottedLabel && (h("span", { key: '271ad004aa697563085fb57e1633c3a67a7f4f70', slot: "label" }, h("slot", { key: 'c861a52fcae08849a0f300eeb4587aa601699dc1', name: "label" }))), this.hasSlottedHint && (h("span", { key: 'dd7569a837fc0ee50e4f493a681659843e0cff7e', slot: "hint" }, h("slot", { key: 'bf6b53c72d931d125ab11470a189ea7131c40973', name: "hint" })))),
+            h("div", { key: 'fec506ba4d9cc99aa4ab2164945af6a52fc97041', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
         ];
     }
     initDatepicker(input) {
@@ -6958,11 +7448,11 @@ const CatDatepickerInline = class {
         this.pickr = this.initDatepicker(this.input);
     }
     render() {
-        return (h(Host, { key: '251f0ff69d58d3833fbad2d503dae683d52fdc8b' }, h("div", { key: 'b4052b91932cf6a6431431dc5f443d2949362c69', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
+        return (h(Host, { key: 'a99a043dd25944a4e4488c6ff65407370a94a541' }, h("div", { key: 'cce3869c564103b2c38a6f0148d97d76947fcb44', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
                 'datepicker-wrapper': true,
                 'datepicker-disabled': this.disabled,
                 'datepicker-readonly': this.readonly
-            } }, h("input", { key: 'cbe5f0252ba6835bf0503c6a4ecb27d6e0ebc4d9', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
+            } }, h("input", { key: 'ba7e41cc8561b4f63433cc52af83cc74db260327', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
     }
     initDatepicker(input) {
         if (!input) {
@@ -8050,7 +8540,7 @@ const CatDropdown = class {
         }, timeTransitionS);
     }
     render() {
-        return (h(Host, { key: '957334d18eeb54e13dc4f7799375fed4a7dd8633' }, h("slot", { key: 'd35b9f6668c6172eadfac887d917479af1d71139', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '1fe12d609149004507578dafd9f143100cbcd72b', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: 'f583e54f8084746a71743ad42aac221332742bb3', name: "content" }))));
+        return (h(Host, { key: 'ecbe6c25380b7e553dd81932af3faf7871e60650' }, h("slot", { key: '2c067a4bcbcb5491b1eb9c939b9f4ca1e13f4bf9', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '74c96accb106aba04746eb200ca2a57642828b2b', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '064f79e0d0c636f087b0185f0813cfb263fc7832', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -8136,7 +8626,7 @@ const CatFormGroup = class {
         });
     }
     render() {
-        return (h(Host, { key: 'd09b529818df935bbd52a20f554ce518f2516f1a', style: { '--label-size': this.labelSize } }, h("slot", { key: '816908550a4e3510a24dbe4ec519d217b07ea374', onSlotchange: this.onSlotChange.bind(this) })));
+        return (h(Host, { key: '89edc92669abb1c9a1f4c5ed47830371a5f315bd', style: { '--label-size': this.labelSize } }, h("slot", { key: '451878b08d2ca7cfece502b00b14f2da3c274d88', onSlotchange: this.onSlotChange.bind(this) })));
     }
     onSlotChange() {
         this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker'));
@@ -8168,7 +8658,7 @@ const CatIcon = class {
         this.a11yLabel = undefined;
     }
     render() {
-        return (h("span", { key: 'c7d1fa22eb4854a8782b0afec24ad0cb57fff4fd', innerHTML: this.iconSrc || (this.icon ? catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        return (h("span", { key: '03076f9f5e7335d8c42b1802e78ad24afa459c2e', innerHTML: this.iconSrc || (this.icon ? 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'
             } }));
@@ -9793,11 +10283,6 @@ const CatInput = class {
     }
     componentWillRender() {
         this.onErrorsChanged(this.errors);
-        delayedAssertWarn(this, () => {
-            this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-            this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-            return !!this.label && !!this.hasSlottedLabel;
-        }, '[A11y] Missing ARIA label on input');
     }
     /**
      * Programmatically move focus to the input. Use this method instead of
@@ -9849,19 +10334,19 @@ const CatInput = class {
         }
     }
     render() {
-        return (h("div", { key: 'bf148b681958c66189b6b27349bf1c52afc06d51', class: {
+        return (h("div", { key: '76ad5d8b725b6b204ed4aad31bb9f11d05ad62fb', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal
-            } }, h("div", { key: '4c180a2e3ab780bb0283896e2229efb04a7e91fd', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, part: "label" }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), h("div", { key: 'fef647ca2318937d25fa6ef45eb616a98e7b7400', class: "input-container" }, h("div", { key: '167a5c5ef453d565feccf2ffd3d4c2be7b1bbc6b', class: "input-outer-wrapper" }, h("div", { key: '7c127b6a6b7f47f1fc503f19b64b60f8b8abe1b0', class: {
+            } }, h("div", { key: '8862cbdf26f7ea41437ee6cf9c42f547a2191c50', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '74baa9ff52220470797009105ac219b3e1056d3b', htmlFor: this.id, part: "label" }, h("span", { key: '876771638e7acbb10bcb5c2e2c35729c3632faf0', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '9133d0c6ea7b47976f216ffccd185d861448b95a', name: "label" })) || this.label, h("div", { key: 'c844e96edf30f93fdfc9d626a7afa970fdca169f', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'fb6bc86c31e732056954cc77454414576f816368', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'cd7945347dca48a5d08c6936e435d08e9c3be832', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { key: '7d58f0b5338d9182d8210560856bff03c8d1b9d5', class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), h("div", { key: '0820cdb769758527ae0d0b4718c29b34c37b93d1', class: "input-container" }, h("div", { key: 'b6376f9644223f2115dfe9f5346f25f67fa94688', class: "input-outer-wrapper" }, h("div", { key: '174021266ea289a90b8fc2d65135fcbdce14b0b0', 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 && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '3a04efd1ecbaab9010e9e201354112d47edf12ab', class: "input-inner-wrapper" }, h("input", { key: '6f1b7e95344c3e2524e0e322cd263580d4751f2e', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: 'ceeea12176047095802c81771c09f2b66c10a0a5', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: 'c9ffa0705e9a343c9f99558dc091be023f2e0294', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: 'ca13e810597797073cadcac68f8701eaae85f816', class: "input-inner-wrapper" }, h("input", { key: '0dfc4adec512642452075f51065a598cd59c9b2f', ...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 && (h("cat-button", { class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'ded12cd59eba7a7c2c9ddb5058599c456305b9ec', name: "addon" })), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && 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 && (h("cat-button", { key: 'b45dde66204e6bb5d040649fdaf37f8303c2ed29', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '3b230e4d2ad85481665ab54653f95b06c3a5d930', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '33052e7fae76cd81908db4837fea2d5e01c2392e', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: 'c93e983876dc5249a21333d4fad945b2e549dde7', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: 'a77ecd9c4fcf230dc33ec69faf4e97b3dd5856f9', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'd53d531ff9b28994c6e1b6df2a4423c757b288d8', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '59b36e9b6b47f094f32a8a069a24fc706f974ebb', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -9939,9 +10424,9 @@ const CatPagination = class {
         this.iconNext = '$cat:pagination-right';
     }
     render() {
-        return (h("nav", { key: 'eb37b23f9aa777218dc49611d7caa0d96f6a33e9', role: "navigation" }, h("ol", { key: '2ad69648c3611ffd9b0e6d5fe9d0849242c301ec', class: {
+        return (h("nav", { key: '1929458d04848122f7b5b5fa806b347c32d562a5', role: "navigation" }, h("ol", { key: 'e93478ef96a8a8ca0b11f238c168194934848f1b', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, h("li", { key: '4712af901e5dfca84035b494289404534728e02d' }, h("cat-button", { key: '2fb342cccece59890486f68bfb90d30dadada3df', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: 'fb301d419816ce20200a342e7b965f213a841b4f' }, h("cat-button", { key: 'de83ad6cc01a3c04979868daa30d3fe2b30691f7', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
+            } }, h("li", { key: '116feebfe0d10971ffce4a8ff7f9ecd1d293c3cc' }, h("cat-button", { key: '22b12534bac787dc91ac969e30e4dce6ce3c8b87', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: '1b17792a3ce126cedbfc832ee98c203bdc479057' }, h("cat-button", { key: 'b697f56af43022877c3822a0b584a7c0b433fb0d', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
     get isFirst() {
         return this.page === 0;
@@ -10021,13 +10506,6 @@ const CatRadio = class {
     get id() {
         return this.identifier || this._id;
     }
-    componentWillRender() {
-        delayedAssertWarn(this, () => {
-            this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-            this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-            return !!this.label && !!this.hasSlottedLabel;
-        }, '[A11y] Missing ARIA label on radio');
-    }
     /**
      * Programmatically move focus to the radio button. Use this method instead of
      * `input.focus()`.
@@ -10046,7 +10524,7 @@ const CatRadio = class {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '45e4e40bbfc7e7eff811abd9c38c15cdcc3bc343' }, h("label", { key: '0f7bd3d6fd7d3934d4522ef193867f3a42bea6a3', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: 'ea7ae02afc5933a4afd6da7802edd912a0cb2f27', class: "radio" }, h("input", { key: '45c7d74302e3bba1c60f5cca1452ae4ef80cf433', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '4a3cef57d849b2fc2cbae889662f834f20e6ff23', class: "circle" })), h("span", { key: '0c0a10a67967bbc42cc791677724145f5f28e259', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "circle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+        return (h(Host, { key: 'a073383246de555ba0c02eb3bbf375e3d8cebfeb' }, h("label", { key: '7ec947d5373540582e62e8b1f8eafed152c558f3', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: 'b718b75cb484da79ed934ad3135a02c9a8ecef55', class: "radio" }, h("input", { key: '5a608ff6df9e5ee981d4d3581ea36128ebf54b01', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '3a698e323f3e29dc33161570afe8ab0e257ec6b2', class: "circle" })), h("span", { key: '3e700cbb3c918954cb380f462077972ded288d02', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '0cff14fd68ea95ebfb0a37916c3f56bdcdc5a2f8', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '7c2bce41360bc5a8f12dda908ad071e06c09f48d', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '04e8b4fbcb3be51c62d0c27ac92bf80d9eb0ac10', class: "circle-placeholder" }), h(CatFormHint, { key: 'aefee640f2ee261a77b062d06462a09839a00617', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -10137,7 +10615,7 @@ const CatRadioGroup = class {
         }
     }
     render() {
-        return (h("div", { key: 'e102897a96e3d8bf899e72d3d6affcd8c2749d1c', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '99dfc01256f4df37bca96985a0214e3bc4ed4a5c' })));
+        return (h("div", { key: '700491e3e68675725272b877296df47e8d538af3', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '3a03df80cac82f5530f5e1317b226d6d120b52ba' })));
     }
     init() {
         this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
@@ -10226,13 +10704,13 @@ const CatScrollable = class {
     }
     render() {
         return [
-            h("div", { key: 'e2c7d4c0bb56961b4e1a0499918de4051639cc3f', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { class: "shadow-top" }), !this.noShadowX && h("div", { class: "shadow-left" }), !this.noShadowX && h("div", { class: "shadow-right" }), !this.noShadowY && h("div", { class: "shadow-bottom" })),
-            h("div", { key: '11c286f71658edb4b9a1b6540043c38aee98d480', ref: el => (this.scrollElement = el), class: {
+            h("div", { key: 'b9e809dfdeafaba07bf5e6b6fee92b256c5dc7ec', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: '2a1fd0f1de1abbbba912e571197cb3bec51d458f', class: "shadow-top" }), !this.noShadowX && h("div", { key: '7d45944d3e77653c57bac6f40a2903a00bbe07d3', class: "shadow-left" }), !this.noShadowX && h("div", { key: '4b556dbb3cec3f34fce448721a8b0f1a8fa2e2c3', class: "shadow-right" }), !this.noShadowY && h("div", { key: 'dcbcf18521b4cbfd0f9b50e2a0090fff1e230571', class: "shadow-bottom" })),
+            h("div", { key: '0847d6934ff533528636f27b6e2ca41af71f6538', ref: el => (this.scrollElement = el), class: {
                     'scrollable-content': true,
                     'scroll-x': !this.noOverflowX,
                     'scroll-y': !this.noOverflowY,
                     'no-overscroll': this.noOverscroll
-                } }, h("slot", { key: '53628fde1cbdd4ddc54cd6d1e373d9037339065a' }))
+                } }, h("slot", { key: 'f1e5dd010c1e4fe9f875046096d313b76a55b062' }))
         ];
     }
     attachEmitter(from, emitter) {
@@ -10485,11 +10963,6 @@ const CatSelect = class {
     }
     componentWillRender() {
         this.onErrorsChanged(this.errors);
-        delayedAssertWarn(this, () => {
-            this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-            this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-            return !!this.label && !!this.hasSlottedLabel;
-        }, '[A11y] Missing ARIA label on select');
     }
     onBlur(event) {
         if (!this.multiple && this.state.activeOptionIndex >= 0) {
@@ -10672,18 +11145,18 @@ const CatSelect = class {
         });
     }
     render() {
-        return (h(Host, { key: '8a8f824eb117b03a77bba6ccfa85ff9fc98d5383' }, h("div", { key: '51e878d20952cc8a1339fac80dac177f50db6e2b', class: {
+        return (h(Host, { key: '77d901f97448ee35547ee0cddd8f68fd20e978f2' }, h("div", { key: '390d0f6a55f18491a9ec5b1cce8cc577e3c1d89d', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal,
                 'select-multiple': this.multiple
-            } }, h("div", { key: 'df913810e1370eed34c9de768d88f904442c99c2', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '0fa16f2272927b57982c33a4fc6c971c82258da0', class: "select-container" }, h("div", { key: '2912828382354566de382e289a9fc76f922965c6', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: '85c7ccc868f0cf94d5283e37c61d119d31613b1f', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
+            } }, h("div", { key: '3caf33926c0c4919f9d6941c7f3105fd9341e43f', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '2499bcb11afa49e8edeec3d4598f3e9c8402c37e', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: 'f39aa80a79e69a8dd4ca9dcfe36446ba920bdb3a', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'e7272b0381004efcff9a411764528a17553f2ff4', name: "label" })) || this.label, h("div", { key: 'bbe109a0d168aac83855e5a2cefa24c443e945c0', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'bf139e6f92b1c4f091777e6fdaa6f67720c9bd74', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'de60d30414ae74b77582da94297ca08dc1f1405c', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '252978c537c24470de267ce66e93c55e05925a29', class: "select-container" }, h("div", { key: 'e94f404f098bbecad5ccde214c0bd32479bc5b2c', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: '43a6e5e890d5e20b95e6d7047038d0428823d2aa', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
                 pill: true,
                 'select-no-open': true,
                 'select-option-active': this.state.activeSelectionIndex === i
-            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: '6e9511c6945b78f543d3ee49553573f267c33dbc', ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", null), this.invalid && (h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: '87339aa2205e8f0e1f718b0f49b0daf527ddbe5c', ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: 'a0f7ed3c542fd808de8a7d195c40ea72a2b776ee' }), this.invalid && (h("cat-icon", { key: '23afed14552f6730b39958c70471747d77d2d454', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
             !this.disabled &&
             !this.state.isResolving &&
-            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'f9e6a8ad7dfba891de5beac0851b90d0d2f44ecd', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
+            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'bd4d09ba526ed4881fad163ef8e95e619c817fdf', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: '9687a0ad10cb26fe8cdcf52b0459816d9d1e1271', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: '009eaed16563b9bbd48dcc1bb3777de8500d3e6f', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '10e3d878110aebf52d89b8b975e0d6be503c1fea', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: '1ed3aae098cafc10de05ff6a8feb5047ad23abae', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : catI18nRegistry.t('select.empty')))))))));
@@ -10846,7 +11319,7 @@ const CatSelect = class {
                 selectionClone.pop();
                 this.patchState({ selection: selectionClone, tempSelection: [...this.state.selection] });
             }
-            if (!this.input?.value.trim()) {
+            if (!this.required && !this.input?.value.trim()) {
                 this.patchState({ tempSelection: [] });
             }
         }
@@ -11176,7 +11649,7 @@ const CatSelectTest = class {
         setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
     }
     render() {
-        return (h(Host, { key: '4ac6644bf509a0059e4e9cc1fcb17e74e82301f6', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, h("cat-select", { key: '225b226c069a27a0e2e18e4df3a4b0ba1874e8ae', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, h("span", { key: '51f2e4a05e26003f8a92cd2f9c8e5c5f3adaaf06', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { key: 'edfca580ff1b5cd64f5d5fc7e144d68aea8c3edc', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'd7db6494e844eba34226c3ace855cc2d1adf2b03', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '962360e45fd2072708f838d08d133e124df181b6', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'ce9b178cf975ec67b3b4791d50636177825c5a12', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), h("cat-select", { key: '95024f1410acfefc7e29d624467c30c9bffc97f5', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), h("cat-select", { key: '9976d3572c2241779b282c135d8f6c8f12614fc5', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), h("cat-dropdown", { key: '0d029a862f56bf864044d24d8b28699fe3210505', overflow: true }, h("cat-button", { key: '27f13d7ea67d5a356e96f9d6a363f4a3595163ae', slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { key: '410dded1ee2792ff39bd1f178caa6db99a48b4ef', slot: "content", style: { width: '400px' } }, h("cat-select", { key: 'b890e14e697636fc346b323d34b652733368c062', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
+        return (h(Host, { key: '6dee38053268c2d945c195cfd4dd39109ed22021', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, h("cat-select", { key: 'fa571970ee14e63d95567ed847af36d2da7e96ae', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, h("span", { key: 'a222dd43988c0e088903c8f260a7bcb2a074c73e', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { key: '34314fa05e1dc159594d12a242b720276449e35d', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'ac72d824efb07f6012fee35725c9e5fd6e16b9f8', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'e4965ee7c2c0d2452bf907fcc51809b45f590219', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '62b13c5e38165dbcf6c4b98376d65183e45b6b02', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), h("cat-select", { key: '6417bfc737cb4fab8fbbcd777c9f522f084f375f', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), h("cat-select", { key: '9e530aad5e9cd9add1fcfaf8fc00651091c267c4', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), h("cat-dropdown", { key: '5cc4e92952af134af6fabc5fe6555ba7e8f5d3f2', overflow: true }, h("cat-button", { key: '5916378b87e75d58bdc3b253e7731f9a0a7a5350', slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { key: '9efbc90e07ffba870869de8682f4e57a7611550c', slot: "content", style: { width: '400px' } }, h("cat-select", { key: 'd45765d2243918ef11b8ec63438347dd8421fe6d', 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 {
@@ -12432,7 +12905,7 @@ const CatSkeleton = class {
         this.lines = undefined;
     }
     render() {
-        return (h(Host, { key: 'ff25fcfbbb841b47dcbb78743fb64b9c420b4075' }, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
+        return (h(Host, { key: '9039e34e1c03c573e07e1fc9f0041bbb5bc9369e' }, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
                 skeleton: true,
                 [`skeleton-${this.effect}`]: Boolean(this.effect),
                 [`skeleton-${this.variant}`]: Boolean(this.variant),
@@ -12472,9 +12945,9 @@ const CatSpinner = class {
         this.a11yLabel = undefined;
     }
     render() {
-        return (h("span", { key: '380177992db2e5442e4c6face7da60c8da6a4e86', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+        return (h("span", { key: '5dc8097429f1b606c187ae3e5adc2871680f05f4', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
                 [`spinner-${this.size}`]: this.size !== 'inline'
-            } }, h("svg", { key: '54f5e3abee80b6f2c3f0b229f17af3695eff4181', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { key: '9b048824cd5ef71c03dc2f520d0ae4b5444237d7', cx: "24", cy: "24", r: "21.5" }))));
+            } }, h("svg", { key: '2daf677665ac8f5089d33414acde28e1d7bf630d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { key: '7c38b0547d2aaa78921072917306765d866d4d97', cx: "24", cy: "24", r: "21.5" }))));
     }
 };
 CatSpinner.style = CatSpinnerStyle0;
@@ -12506,7 +12979,7 @@ const CatTab = class {
         this.catClick.emit(event);
     }
     render() {
-        return h(Host, { key: '73e68355492ab56794ab4e79c59690be498f290a' });
+        return h(Host, { key: '454f82a9ffacf27abd207c7e06af0c2a888cc201' });
     }
     get hostElement() { return getElement(this); }
 };
@@ -12570,7 +13043,7 @@ const CatTabs = class {
         this.activate(this.tabs[index]);
     }
     render() {
-        return (h(Host, { key: '744025a8e7a0baebf243384bd2a7e1bc9d68c464' }, this.tabs.map((tab) => {
+        return (h(Host, { key: '19c67fc838c4dd854168d398b3dd6c9e0e522ff0' }, this.tabs.map((tab) => {
             return (h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
                     'cat-tab': true,
                     'cat-tab-active': tab.id === this.activeTab,
@@ -12643,11 +13116,6 @@ const CatTextarea = class {
     }
     componentWillRender() {
         this.onErrorsChanged(this.errors);
-        delayedAssertWarn(this, () => {
-            this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-            this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-            return !!this.label && !!this.hasSlottedLabel;
-        }, '[A11y] Missing ARIA label on textarea');
     }
     componentDidLoad() {
         n(this.textarea);
@@ -12690,15 +13158,15 @@ const CatTextarea = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f5e7a577f009789caf57b4200e04db7562146413' }, h("div", { key: 'e29810b64785b02e955ea2a65033a081fce5e511', class: {
+        return (h(Host, { key: '32bf75e107566610f1857fb76efcabbfd7c9e60a' }, h("div", { key: '8398f556629abcad71b3d67d0016e94ece130433', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, h("div", { key: 'a133d216a4546fdfa3beadb9a66a65d486b99731', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, part: "label" }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: '38b24a0996bbd37df333dc4da089a6a1b183b029', class: "textarea-container" }, h("div", { key: '6a38048f4173e52c2d86ab8180d98ea4b859d92c', class: {
+            } }, h("div", { key: '69f992803f4ae9d1870ad0181f061d606263ba05', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '69028a7e208a61d91c0d6d46c1d8651fb497daae', htmlFor: this.id, part: "label" }, h("span", { key: 'a4e25a51de8e01efe8816cc9c2ea598bdda3dbef', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '6506a4127f3173c98356518410b91cd9e46cac55', name: "label" })) || this.label, h("div", { key: '98f92550ed4aadf45b862222207234acd52236b5', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'e5226719a2114fe3bffc8708d79c65960a309045', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'e36109ea692a6aff99662d8b30b96943bddf13d7', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { key: 'c8c0a9e01cf203b63be501186dd32b84fff2ae93', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: 'b8b1373d861ca572de0622b2c653da8a0d4f3994', class: "textarea-container" }, h("div", { key: 'f6a41aeedb7d80061f806f32d11a72f711423f03', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, h("textarea", { key: 'd7067c0ed5ea246ee9510a1f01d1b18353a22b7f', ...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 && (h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, h("textarea", { key: '780080e15a3a443cea3f2a4c54a2c6a5a6995817', ...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 && (h("cat-icon", { key: '7b155ac7ed0241445b60953dfea7ce2b6dc46e61', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '35ecac2f4355ea2533780584bc3a1a17babbc92c', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -12916,14 +13384,14 @@ const CatTime = class {
         this.input?.clear();
     }
     render() {
-        return (h(Host, { key: 'ae2aa4007b887c27fe70148609cefb035c91e701' }, h("cat-input", { key: '9949554f49896959c5f72ea77a05b70bfe83b9e6', 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) }, h("span", { key: '04fb1a1882d6306a99b8035edc6f50471b713721', slot: "label" }, this.hasSlottedLabel && h("slot", { name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: 'a31169411677e1ad602750b3d8c822ad1b22fe05', class: "label-aria" }, " (HH:mm)")), h("div", { key: 'deb1ece0b6ee711db953c92e67f5be3caa5d61d5', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: 'dc2b7c0530668e8bfbb8ab3b9627d93db656e01a', slot: "addon", placement: this.placement }, h("cat-button", { key: '379cbfadcac7e923120e77d81f5d082e5e9512a7', 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 }), h("nav", { key: 'f83bf3344e890060dce431cf12d449dd204e76e5', slot: "content", class: "cat-nav" }, h("ul", { key: 'da065da4b29c9349f82c5db3d2fa2954c97e04fc' }, this.timeArray().map(time => {
+        return (h(Host, { key: 'f27248f07e9dee2b129f3ffd651f3fbc40ec9c60' }, h("cat-input", { key: '8031cdca279be78f7af36e62c961aeb74641ad6e', 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) }, h("span", { key: '658e7782b963294d9c48443b98e47841e96276ca', slot: "label" }, this.hasSlottedLabel && h("slot", { key: 'a773fa33d7dcc51cbdad72ae4bbfff3158e0b1e8', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: 'e6b75349897b779521da75541dcd6467bd57af62', class: "label-aria" }, " (HH:mm)")), h("div", { key: 'e6ca724256eacbaa48d0aa4a4dfcd3eeba8adfec', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: 'c60bd2a02b5f7a0e12fb397e7d4230e648b815e9', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: '80fcef2872af257486240ea8c3447b38d55f13a5', slot: "addon", placement: this.placement }, h("cat-button", { key: '8ff466440e2a2631770509500a40c9cae5d7d549', 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 }), h("nav", { key: '8ba70ebb9ab84e28712df787b7402a7e2fbd7b59', slot: "content", class: "cat-nav" }, h("ul", { key: '50c2e92dc053177bc0b5a99bb77468e906f58f9e' }, this.timeArray().map(time => {
             const isoTime = formatIso(time);
             const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
             return (h("li", null, 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 && (h("span", { slot: "hint" }, h("slot", { name: "hint" }))))));
+        }))))), this.hasSlottedHint && (h("span", { key: '5d9cb046f0aa9e692578353ac6e07533670c9429', slot: "hint" }, h("slot", { key: '109e5477d55a9a90701a9d83aa2d79cf434ebbc0', name: "hint" }))))));
     }
     timeArray() {
         const result = [];
@@ -13019,13 +13487,6 @@ const CatToggle = class {
     componentWillLoad() {
         this.updateResolved();
     }
-    componentWillRender() {
-        delayedAssertWarn(this, () => {
-            this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-            this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-            return !!this.label && !!this.hasSlottedLabel;
-        }, '[A11y] Missing ARIA label on toggle');
-    }
     /**
      * Programmatically move focus to the toggle. Use this method instead of
      * `input.focus()`.
@@ -13044,7 +13505,7 @@ const CatToggle = class {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '0752c4661a4cefa76dcaa7663f858d67996a144b' }, h("label", { key: 'e93edabd89c6f02dc9236e61648d5cbedf77b048', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { key: 'f24672e2e6f584c4a4bd039bb0451ded35a51485', ...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 }), h("span", { key: 'd43d2b9f961c7d21585e6840c0c25826c4204b84', class: "toggle" }), h("span", { key: '717458cb7a434f9c94a8b12d0fba7b4ae8e0454e', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "toggle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+        return (h(Host, { key: '3bcad5fa9b7198a4637bcfcc9d0094808514885c' }, h("label", { key: '18ffc8bbbf19925c75c01ac2d7698988224fcf3d', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { key: 'b8aea6493e16a8313d0b541d560b904c88f70ef4', ...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 }), h("span", { key: '2464e14cf9716a6b85113c8004b67efabb94f99d', class: "toggle" }), h("span", { key: '5aa268a5106315bbb763c8d2205492add23d476a', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'ef8e10fe4daa20cec780188a37f39c8b748bb999', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'd2f729369fecaa358a524ee7de06705ebaa15210', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: 'acdb67f2d481d11cfbd9c6ab016da8bb74ee25c5', class: "toggle-placeholder" }), h(CatFormHint, { key: '8b690c36d6aad34a657421d3d6a1e7814f883176', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -13131,12 +13592,12 @@ const CatTooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: '8f4bb0d2fff9d1ce325a32399ccb7fadb012aed9' }, h("slot", { key: '70f2bad00f8aa036679f52be62dc15b8afc8dfab' }), h("div", { key: '81023efbf2624dc29745697773f62b743e3c66cf', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
+        return (h(Host, { key: '38a9782f607e32cd7c6af0603a32f0880691cd64' }, h("slot", { key: '960baa37b44020a8032b5f90d2eaa8d90ee212ff' }), h("div", { key: 'f5a14f7a0e887c0e0b7879e44cee099b090cf913', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
                 tooltip: true,
                 'tooltip-hidden': this.inactive,
                 'tooltip-round': this.round,
                 [`tooltip-${this.size}`]: Boolean(this.size)
-            } }, h("slot", { key: '5b6a22f9453c6b6a6da82a1124675516661eed1f', name: "content" }, h("p", { key: '552940aad421576156e9adc5266456d6c74660d9' }, this.content)))));
+            } }, h("slot", { key: '205c5d7b2f65120aa3d0f46a4539c1c5c6d888c8', name: "content" }, h("p", { key: 'e88757f1e19d4de60e1b1ca295d9e7fc74e88fee' }, this.content)))));
     }
     async update() {
         if (this.trigger && this.tooltip) {