@haiilo/catalyst 10.26.1 → 10.28.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-3059296e.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-30afba72.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-acb1f3a9.js';
 
 const ObjectUnsubscribedError = createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
@@ -869,6 +869,7 @@ const CatAvatar = class {
     }
     render() {
         if (this.url) {
+            this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
             return (h("a", { href: this.url, target: this.urlTarget, style: this.cssStyle, class: this.cssClass, "aria-label": this.label }, this.content));
         }
         else {
@@ -897,6 +898,8 @@ const CatAvatar = class {
                 .map(n => n[0])
                 .join(''));
     }
+    static get delegatesFocus() { return true; }
+    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "src": ["onSrcChanged"]
     }; }
@@ -1194,6 +1197,7 @@ const CatButton = class {
         this.button.click();
     }
     render() {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
         if (this.url) {
             return (h(Host, { "data-button-group": this.buttonGroupPosition }, h("a", { ...this.nativeAttributes, ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
                     'cat-button': true,
@@ -1269,6 +1273,7 @@ const CatButton = class {
     onBlur(event) {
         this.catBlur.emit(event);
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "iconOnly": ["onIconOnlyChanged"]
@@ -1392,13 +1397,14 @@ const CatCheckbox = class {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '8c0eb5c93eb3c1afd12a482cef1d00b693aaaa6b' }, h("label", { key: 'b547cfd3a6aec8c312f4cfbb12304749f4bb130a', htmlFor: this.id, class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: 'ab6bd1bb1b74998b5202e57ba6b32da9dd0135c8' }, h("label", { key: '5554806b29bbdea219869d043f9c41469390720d', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            } }, h("input", { key: 'ba2e7b5af1943fe8c6ad4489edc2a0973ddda065', ...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: '9df445a24845020c80a0f52383de1720dd7d867e', class: "box", "aria-hidden": "true" }, h("svg", { key: '30000e8be49bec99d68a543963cf351c7ff3fd7c', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: '793e1b85f1df92af1168696f5470c74b4ac56ebb', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '28519cf606fd5c4f1ce87e6682c49192d9c7ccdd', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: 'ef38c2175504c86bbcc930ab4e3e259600675849', points: "1.5 5 10.5 5" }))), h("span", { key: '34b01f1d76b7d840245822340e6cf15a3745d948', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: '088699ea29bf4fc53b784b798afc698f848343d2', name: "label" })) || this.label, h("span", { key: '4e4dfcc4b985ab4962fe42e88c09abd60170e5f2', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '5762ff2168f759ff2fd0d566eb99bd23e9a3154d', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '11b3596d3b6e7ae1b4356fc029f861e2407ff9ab', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (h("div", { key: '8814d349c83078c76a948bd91fb66a593824ba87', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '99fc171926a6d467140824b22fb3d66848c9a1a3', class: "box-placeholder" }), h(CatFormHint, { key: '09b2a51545a4d0f731f0d42930c9d18f5e0cb512', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            } }, h("input", { key: 'cccc0ef488d141b6eb4859fcc58433174f7ce21b', ...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: 'c6c568ebc80618b4acc3e28793c1844284d4a831', class: "box", "aria-hidden": "true" }, h("svg", { key: '5c8c2ae933fecab8b9c826ef2493b2dec129f49c', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: '4ed298a1e0377c4ca771940b7da867c5e72017af', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '4ca83993e600c99f4651333ce9f86c0f2b85754a', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '32d6a98f6247ce1605baa1c0fcb66325300d0118', points: "1.5 5 10.5 5" }))), h("span", { key: 'cdf8717a98a756e4ae204d08fd186cf49ea7d101', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: '967c87e44e4bb119b46ae70edf2eb47d63177a90', name: "label" })) || this.label, h("span", { key: '04a85b99e78e8db04e4080d54ff1690051ce2a50', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'caf9a8682262079edf06957ca2a2c9d14abc9130', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'd073fb49348c5561984c73bafbf7fd7e17f01ba5', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (h("div", { key: '9fb0531829e03683accb07fdc675975feb709577', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: 'e72ad8ae3b9048ef6a58d74eb9593d511fad03c6', class: "box-placeholder" }), h(CatFormHint, { key: 'b10a09f94fe13f1cc7602191c0e7b3d2066a8364', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -1418,6 +1424,7 @@ const CatCheckbox = class {
     updateResolved() {
         this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
 };
 CatCheckbox.style = CatCheckboxStyle0;
@@ -1615,14 +1622,15 @@ const CatDate = class {
         this.input?.clear();
     }
     render() {
-        return (h(Host, { key: '0dddaceee870f7e1d16131988a1c344b22656594' }, h("cat-input", { key: '969ebd4ca18452f0eb5550b440666886ddc664ec', 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 => {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: '6cb5833dd0f95cf170ad74d3841eee067e315df1' }, h("cat-input", { key: 'a97d7b5f9ee3a6f63a648e491182b2ab9287bedf', 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 => {
                 this.inputFocused = e.target === this.input;
                 e.stopPropagation();
                 this.catFocus.emit(e.detail);
             }, onCatBlur: e => {
                 e.stopPropagation();
                 this.onInputBlur(e.detail);
-            } }, h("span", { key: '7bf41bdd4f7b8f0b69ef43f11fe075d05ac7e959', slot: "label" }, this.label, h("span", { key: '0c454cbb586b0e3e45af2a0601bb735836a17105', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: 'ce4169eb447fb61b1e98da380446aeb744b1e319', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, h("cat-button", { key: '2c9f064a88a711d38fe5f293764ab963cee71782', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), h("div", { key: 'fe782bbda78ff445f760f80547a0a57252d041ba', slot: "content" }, h("cat-date-inline", { key: '8ecfa83e38d2016148e1d970f0142ce62d5d58e4', 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: 'c7d342b0fa3b522af5d0368e590345a2524c40ee', slot: "label" }, this.label, h("span", { key: '44d02ddce886497f9f93dc8bb73b943ae7317d07', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: 'a4b84508af92334d93b406f767f8080ab28a831b', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, h("cat-button", { key: '0e48c43b6bb3b34bb70c97e7ed2bae01664c3d4e', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), h("div", { key: '976f8aa393d60c1425a63198baeabf7522bc38c4', slot: "content" }, h("cat-date-inline", { key: '08d8833fef723d80000c330fa58a3eb30d57d211', 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);
@@ -1689,6 +1697,7 @@ const CatDate = class {
             this.catChange.emit(newValue);
         }
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "min": ["onMinChanged"],
@@ -2267,7 +2276,9 @@ var isFocusable = function isFocusable(node, options) {
 };
 
 const firstTabbable = (container) => {
-    return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
+    return (container
+        ? tabbable(container, { includeContainer: true, getShadowRoot: true }).filter(element => !element.shadowRoot?.delegatesFocus)
+        : []).shift();
 };
 
 const catDateInlineCss = "/**\n * Auto-generated file. Do not edit directly.\n */\n/* stylelint-disable value-keyword-case */\n/* stylelint-enable value-keyword-case */\n.label {\n  overflow: hidden;\n  word-wrap: break-word;\n  word-break: break-word;\n}\n\n.input-field:not(.input-horizontal) .label-container.hidden,\n.textarea-field:not(.textarea-horizontal) .label-container.hidden,\n.select-field:not(.select-horizontal) .label-container.hidden {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.label-container {\n  flex-basis: var(--label-size, 33.33%);\n}\n\n.label-wrapper {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.label-metadata {\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 1;\n  justify-content: space-between;\n  gap: 0.25rem;\n  color: rgb(var(--cat-font-color-muted, 81, 92, 108));\n}\n\n.label-optional,\n.label-character-count {\n  display: inline-flex;\n  align-items: center;\n  max-height: 1.25rem;\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.label-character-count {\n  margin-left: auto;\n}\n\n.input-horizontal .label-container.hidden label,\n.textarea-horizontal .label-container.hidden label,\n.select-horizontal .label-container.hidden label {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n.input-horizontal .label-wrapper,\n.textarea-horizontal .label-wrapper,\n.select-horizontal .label-wrapper {\n  flex-direction: column;\n}\n.input-horizontal label,\n.textarea-horizontal label,\n.select-horizontal label {\n  min-height: 2.5rem;\n  display: inline-flex;\n  align-items: center;\n}\n.input-horizontal .label-metadata,\n.textarea-horizontal .label-metadata,\n.select-horizontal .label-metadata {\n  justify-content: flex-start;\n}\n.input-horizontal .label-metadata .label-character-count,\n.textarea-horizontal .label-metadata .label-character-count,\n.select-horizontal .label-metadata .label-character-count {\n  margin-left: 0;\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.label-hidden,\n.label-container:empty {\n  display: none;\n}\n\n.picker {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.picker-head {\n  display: flex;\n  align-items: center;\n  container-type: inline-size;\n}\n.picker-head > :not(:last-child) {\n  margin-right: 0.25rem;\n}\n.picker-head h3 {\n  font-size: 0.9375rem;\n  line-height: 1.25rem;\n  font-weight: var(--cat-font-weight-head, 600);\n  font-feature-settings: \"pnum\";\n  flex: 1;\n  text-align: center;\n  margin-block: 0;\n}\n@container (min-width: 20rem) {\n  .picker-head h3 {\n    font-size: 1.125rem;\n    line-height: 1.5rem;\n    font-weight: var(--cat-font-weight-head, 600);\n    font-feature-settings: \"pnum\";\n  }\n  .picker-head > :not(:last-child) {\n    margin-right: 0.5rem;\n  }\n}\n\n.picker-grid {\n  display: grid;\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n  grid-template-rows: 2rem repeat(6, 1fr);\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-areas: \"h h h h h h h\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\";\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n.picker-weeks .picker-grid {\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n  grid-template-columns: 2rem repeat(7, 1fr);\n  grid-template-areas: \". h h h h h h h\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\";\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n\n.picker-grid-head {\n  grid-area: h;\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  place-items: end center;\n  padding-bottom: 0.5rem;\n}\n\n.picker-grid-weeks {\n  grid-area: w;\n  display: grid;\n  grid-template-rows: repeat(6, 1fr);\n  place-items: center right;\n  padding-right: 0.5rem;\n}\n\n.picker-grid-days {\n  grid-area: d;\n  display: grid;\n  grid-template-rows: repeat(6, 1fr);\n  grid-template-columns: repeat(7, 1fr);\n}\n\n.picker-grid-head > *,\n.picker-grid-weeks > * {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: 600;\n  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n  text-decoration: none;\n}\n\n.date-other {\n  opacity: 0.5;\n}\n\n.date-disabled {\n  opacity: 0.25;\n}\n\n.picker-foot {\n  display: flex;\n  align-items: center;\n  width: min-content;\n  min-width: 100%;\n  justify-content: space-between;\n  container-type: inline-size;\n}\n.picker-foot > :not(:last-child) {\n  margin-right: 0.25rem;\n}\n@container (min-width: 20rem) {\n  .picker-foot > :not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  .picker-foot .cursor-help {\n    font-size: 0.875rem;\n    line-height: 1.125rem;\n    font-weight: var(--cat-font-weight-body, 400);\n  }\n}\n\n.cursor-help {\n  margin-block: 0;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: var(--cat-font-weight-body, 400);\n  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n  text-align: center;\n  flex: 1;\n}\n.cursor-help:first-child {\n  text-align: left;\n}\n.cursor-help:last-child {\n  text-align: right;\n}\n.cursor-help:only-child {\n  text-align: center;\n}\n\n.cursor-aria {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.date-range {\n  --cat-border-radius-m: 0;\n}";
@@ -2418,15 +2429,16 @@ const CatDateInline = class {
         firstTabbable(this.hostElement.shadowRoot?.querySelector('.picker-grid-days'))?.focus(options);
     }
     render() {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
         const [minDate, maxDate] = this.getMinMaxDate();
         const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
         const [dateStart, dateEnd] = this.getValue();
-        return (h(Host, { key: 'f0b5554bff498048c6b2ed378fbf341ee2d0a70b', "aria-label": this.label || undefined }, h("div", { key: '5185d42c4ec5ac93ddebd0140db6caf12ce5240d', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '2fdc6cbbcf687981348b1fb5f21f2d5782f8ce88', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: '1f7ee36794e2bd9081cc10cb5942dde193f241ca', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '3080e11319a36ea14c4ca06714cd9518037f4390', name: "label" })) || this.label, h("div", { key: '5d8d98b7e522bb23285e331ace4f45a6a42ab9dd', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '1acfd32324889f2c3a9ee4806f283e52a4bd3060', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '97134f7607c47820e904591e6d4909371c295eb7', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '7f8fe8f60217ddca39f2bd18fb75aae36f58924d', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: '482f557eddae1bdc7b2c9fb795ff07c130107eba', class: "picker-head" }, h("cat-button", { key: '2e53d21a7de00ca6a90c0d8d75f232d4ca534714', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), h("cat-button", { key: 'd7e4b92028c01c1b817fc4652b395bc31386cc1a', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), h("h3", { key: 'ea5eb0015f4d87ffa17030569fb04fa15f6e60e9' }, this.getHeadline()), h("cat-button", { key: '7bb753ec04b8d8f60a804e27a30acd976233d7df', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), h("cat-button", { key: 'b3d6a79b108fb6e5594a6c1228137e51354620c9', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), h("div", { key: '7d76513d167808df5c6f1aeaa78085bbf96b0fa3', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: '3f2fcd711bbd849340b91032d88ba5abab3d1b77', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
+        return (h(Host, { key: '8b11e245fdd1d392e545692b68ea449dd19f13c8', "aria-label": this.label || undefined }, h("div", { key: 'bf1bd1923e220e9f209ae115eb8e6fb23b3c4b46', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'e3bfbf624e94f894c38fa97a35a0d5ad7c01915c', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: 'd946093505f4a9092632b17bc035390a663d4e7f', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'aa9da48764a90c7d5db185e0472700465627d7c1', name: "label" })) || this.label, h("div", { key: 'd5d8c5c50de0578f96ffb3c80853a06e9bab9821', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '30b1b1149e7e07798e9786e2de260e07d2dad19a', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '6d02133a159884bc9951894390f7d7d98a5bc1c9', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'd114855977b1fcdaf0baa77e9cbef1250bfa03be', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: '49ec46a464d223340dc74d4152c0048db1087ac6', class: "picker-head" }, h("cat-button", { key: '270b297b4a0f577f1ce3c1b8444781f77b089cab', 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: 'b07427c2c6609b88f4cbbfc6ce14fdf029e22681', 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: '72c71e36794070a1e2916b6296e453b4314ddf45' }, this.getHeadline()), h("cat-button", { key: '764278977f0b7c5a8e06ac03d395d7f4fcf0cd88', 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: 'd19e69146ba96cece2a8e14d6463e2974840d905', 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: '68f854f2e92f054517091e5667204bdf79b0f57c', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: '238564020faf306eadbe5e0178d1e4b1d4590f5c', 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", { key: '5f1e57853dbdbc17562f6b98d0124a9a99cc5a66', class: "picker-grid-weeks" }, dateGrid
+        })), this.weeks && (h("div", { key: 'c59e9879cd8eacb4197a327a1f3c5e6d109c21b3', class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '0551334303e8212f276de5ea1f2642446c0f6485', class: "picker-grid-days" }, dateGrid.map(day => {
+            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '3751aa8b4744cb6686a5badf2f76bb5a27460dd7', 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;
@@ -2443,7 +2455,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: '6fbabecc4714a6a27bff80b8bdfab2217e69d844', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: 'd12318e71cd05fd506c2017922faf527ab92f755', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: '33d82b959cc2f8a1333b2c7181a79311af84a88d', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: '4b83fb3e173be9d0e96cace310ee9517938fe631', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: '702ca224198fbe0f6014cc3ec5338fdff437ff5c', class: "cursor-aria", "aria-live": "polite" })));
+        }))), h("div", { key: '7dabe502931e5a831423e368500a04577241253f', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: '6da0e2075e109a248a2bb2b6ab67d9ddf96206f1', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: '8b3599454323e064ba22ebd3c16168f99600a64b', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: '596d9b14c74f482098d5d5c3684fea633b43baa2', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: 'dd14d9dbec2061f1d55bf628fafadd3a4aa73460', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date, focus = true) {
         const [minDate, maxDate] = this.getMinMaxDate();
@@ -2538,6 +2550,7 @@ const CatDateInline = class {
     toRangeValue(startDate, endDate) {
         return JSON.stringify([startDate, endDate].map(date => (date ? this.locale.toLocalISO(date) : null)));
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
 };
 CatDateInline.style = CatDateInlineStyle0;
@@ -8686,7 +8699,8 @@ const CatDropdown = class {
     }
     initTrigger() {
         this.trigger = this.findTrigger();
-        this.trigger.setAttribute('aria-haspopup', 'true');
+        const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');
+        this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');
         this.trigger.setAttribute('aria-expanded', 'false');
         this.trigger.setAttribute('aria-controls', this.contentId);
         this.trigger.addEventListener('click', () => this.toggle());
@@ -10486,19 +10500,20 @@ const CatInput = class {
         }
     }
     render() {
-        return (h("div", { key: 'c35a9fef53abc8f90318e04f37a15e281007ce91', class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h("div", { key: 'ffbaf104a60dbf73cb59e07e3164fe0c421540a5', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal
-            } }, h("div", { key: 'ee09123d5c98cdeb2c691e55b751908d0d770111', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'af7b1e38868f2deb4ad625bdf2e22f163c4a87b3', htmlFor: this.id, part: "label" }, h("span", { key: 'aca425f9976509f18190e93c69d5274376dff02b', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '6d3b4503cc122a777dfafec12df63e3b891be047', name: "label" })) || this.label, h("div", { key: 'd5e896348ce01ae0b14e551b12a5e1bbba17af79', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '6f324f7a3acf2d24de0402975bbe20c1e14885ee', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '301c4bcde93261c6c3fa9488a36aaa57f4297421', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { key: '65d74e1addc8090889167ee0ca391c7d72bc0719', class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), h("div", { key: 'a46c6b8644fb6effe070018e64772394ba1e49b9', class: "input-container" }, h("div", { key: 'bbdb55e7a339c95172281b0b145a41ca80774d64', class: "input-outer-wrapper" }, h("div", { key: 'bcc3207d825560d63ee77cf3bbf3996fe853c6f6', class: {
+            } }, h("div", { key: 'e6139d1d950c2d8c2674bb90f0acbe9333ace2eb', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'fce898969b37f4579f780c1a62354ccb0da5a73e', htmlFor: this.id, part: "label" }, h("span", { key: '8a4d0f653bae9a75db600080ad7d0b9199c14db5', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '6073eadb00b587d1f3ba22d212e5235d21826b08', name: "label" })) || this.label, h("div", { key: 'fc4be508caec71287f275873d49adb5c16931289', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'c1010a473d4bfadb8ada56825db91f0c4d2b7871', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '8b2184a224afa6857f207aeaf71d83e12c92ef9a', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { key: '6aee4428a06faba6ecf6a82963f0ecf3ca0d5d7b', class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), h("div", { key: '9c88a62af0c4083162bea13dc1fd5ead5708efbb', class: "input-container" }, h("div", { key: '556a7b1bc45da66739d8a7afec3d4e1b64f12e77', class: "input-outer-wrapper" }, h("div", { key: '16d000652a934588fa87c71929565aa5cc15069b', 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", { key: 'ce871809b18c5d8d0185f423a536c187f07044ac', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: '9b9f24c7558feac1bd2f16479a530ecf9b48053a', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: 'e1bdaa8e2a6354f87e3a76c7883e140323997b49', class: "input-inner-wrapper" }, h("input", { key: '5aed7be866964981b3d4b68d07e30cb4ac4c62c0', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: 'de3b5da6a0a09c1f66caeb2fb3c9772a2426778a', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: 'f950a57fa6060b9f82629d26b91dcb449b86cd2a', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: 'b98cd1a805712c454262bfa8fae92f1e92b33f09', class: "input-inner-wrapper" }, h("input", { key: '9bd8bc8f345c80ced98a06728d9d09bc462e0823', ...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", { key: 'b52955e6def27de98007311735ff7af7b03103bf', 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: '5ba3de99ed1e9bbcf1ce845fc6bcc045d0524a14', 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.loading && h("cat-spinner", { key: '6b71c73cda4ba80fcdaa53e521b648245277e76c', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '174802a1493b21dbed3f92553e9315a9af04b25c', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '450043a9b160386d3a04fca9ff42595a80eec135', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: '4c76e1d0ed2be65d144a1b17941acd1f40524002', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: '6a33d7769b02c71a754e994195a91f90abce2220', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '54c7b48879d859ccf8f0e7d44a8fa132b6d1055b', 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: '255d4760d151bfb36f0217295ee378b5cec26647', 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: 'd5e62dccaaa64370723d4721d567789b06c94b11', 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.loading && h("cat-spinner", { key: '22218dd7cd48b2599d2125ec080467c925b04a4d', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: 'c9e5f18bfc54321ad9b18df56a199d0096739621', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '307c0d5f2a1dff6efb7d6bf05a035c487f947994', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: '3216d4e278951898d9a96ad48b2df7c17d54c6a3', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'd996aab9325a2eb77401490c3fa2a9e8eaf0ffc6', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '84980cbf543e9405c70d481bce339cd9c743da43', 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;
@@ -10550,6 +10565,7 @@ const CatInput = class {
         }
         return undefined;
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "errors": ["onErrorsChanged"]
@@ -10576,9 +10592,10 @@ const CatPagination = class {
         this.iconNext = '$cat:pagination-right';
     }
     render() {
-        return (h("nav", { key: 'aea4a39cc798431911b8775600dd734595d51185', role: "navigation" }, h("ol", { key: 'bbcb43fa61bcd379ad84eb28ca6bcf995bf85159', class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h("nav", { key: 'ed5098e1578e2157e0f5b8c539f313e2892c5f05', role: "navigation" }, h("ol", { key: '6f63a5c0a79722913dafbf1b6391ab586a20695a', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, h("li", { key: '984f120135399170d9374881a8562fa12b7c0a75' }, h("cat-button", { key: '8f173139e15c77227fc1044196887b489835a4c5', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: '165a68e0fd8f78f4fc6a505ec4c0715a21607d00' }, h("cat-button", { key: '74864af9ce7f4f38b3d1e47209d8c47faf559b96', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
+            } }, h("li", { key: '0dd989fa017490749141ab2029546b115a34ce27' }, h("cat-button", { key: '8614e9e1ebfc2ff3aeda2cec8be07aeff6e592eb', 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: 'b864788a70e125ae93a34e705522e537b359a12a' }, h("cat-button", { key: '93f6d89967b6f6b93b733fbcb628cf4a3663dbf0', 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;
@@ -10627,6 +10644,8 @@ const CatPagination = class {
             h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: catI18nRegistry.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => this.setPage(page) }, page + 1))
         ]);
     }
+    static get delegatesFocus() { return true; }
+    get hostElement() { return getElement(this); }
 };
 CatPagination.style = CatPaginationStyle0;
 
@@ -10681,13 +10700,14 @@ const CatRadio = class {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '7fb3add02c4e5ad69577dd753a3a0353153fa304' }, h("label", { key: '3b1a872da255a8dd5c396ba55e06073146cfd758', htmlFor: this.id, class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: '875be66c1a340d478bb55b15822415df919591ad' }, h("label", { key: 'dc4577b45f79f373d621b83a83c09d214cd01251', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: 'baea250060694d0f239b222efafd469c3fd51d6e', class: "radio" }, h("input", { key: '8d3ab427ade40822fe3fb4eab8c8b4f9be8104ae', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'a0e30eb3a071d8981dc2cf6e12d42bbcf5ff8bec', class: "circle" })), h("span", { key: '518d21be81587a6bd6fd571b4921a9c7464f65ae', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'f9f92eb46213178a4be84210f3a7d4b758bb043c', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '9af9f7e6331131847217ad74b2c4c7bd3ca51212', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '6064b9990cbbb0f49a305acc15f0ea7bed627da7', class: "circle-placeholder" }), h(CatFormHint, { key: '4cb103c3f9b83555b222da19bf480af83201465e', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '5c9bc1aa0f3746f29a4dbf219e241b6c1779a5c7', class: "radio" }, h("input", { key: 'bb633c685be46657acae7a7376069b7a95de7401', ...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: 'd6863f415ce0999c31276e8dc6e05b3ed7298193', class: "circle" })), h("span", { key: 'c82183168cd245b781f2a4273c38ef20247d10c1', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'd5a556eff95f4471371c6162a0b101c1fb82e0cc', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'a236fefd50ea65e63643e5747a72a1f0b0dfbbb2', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '77ae0d9af2ff86becdb0b3a487c37689fe63af66', class: "circle-placeholder" }), h(CatFormHint, { key: '5e90f290fe70136ee19fe287db749abc8e7ec024', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -10702,6 +10722,7 @@ const CatRadio = class {
     onBlur(event) {
         this.catBlur.emit(event);
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
 };
 CatRadio.style = CatRadioStyle0;
@@ -11313,18 +11334,19 @@ const CatSelect = class {
         });
     }
     render() {
-        return (h(Host, { key: 'f8f27eef2e7fff527c9a3c4e7c4fde643d80b606' }, h("div", { key: '1d28d1629ab6407eb8af786b7878309885ea8e99', class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: '1ecf402adc273d133bfe829aea9fc28c6f63bc79' }, h("div", { key: '5c209d893e31472fabda8dc0aab1294693ba4b0b', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal,
                 'select-multiple': this.multiple
-            } }, h("div", { key: 'dc241514b1e697c2a42c230c9f04cd07f1a3a735', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'd5f0179474aeca24a0773e81e9b08873e847facd', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '3cf13b24b0537d2a70e6a0918d1ba6c9b2b84731', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'f0ad0d85b986a657456c8cd37b2f5cf286d1bf44', name: "label" })) || this.label, h("div", { key: '0ec56a4f09ee480300e5ea8c2c656f90e5fef2de', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '08c2e70f25ccf68bbc73d2366e39f4bde5d1c675', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '7e7fe7b9e28e4833bb413c60af3459a1d998189b', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'bf37c5423d2e33d98bd62007a74a45f2362c4575', class: "select-container" }, h("div", { key: 'f09d751cfd05f43942ad5ad77706f8ae39050de9', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: '5378a3d5f444e6346c53ffb7023cce68cf1c3ffb', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
+            } }, h("div", { key: '51755c54effe1bd8216e656bc95f6bf57814219a', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'e4835aa21b0bde58f40e9130122826e6ade1e739', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '8bdbd5c021b0c4fd864cc7b8d84e0230707cd016', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '6e7ad3025b1cee315cf10c85e907cca128ec3922', name: "label" })) || this.label, h("div", { key: '1536c12184aec8b8825d24a0635bb08baa976b6d', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f90e3b62becfab3e586718ef201f9596e78c820b', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'db0bfd7582529e57fb18266f5014a73c92584c84', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'ce84b362fe92abcd2e65388b457a5ed25def1e3e', class: "select-container" }, h("div", { key: '1a0d2031a1f71d77b371e96d27ad608da1f3d1a4', 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: '5b92f786919140fe0f4329a3b846e24007b980e7', 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: '27755954d228e33d0ba6adf5736defcd1d56b32b', ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: '4621c8c3b7e430e5841471757da5a51df5ca86ad' }), this.invalid && (h("cat-icon", { key: 'b4d31caef78d62769c3dc84fc6d4415f8c5ee849', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, 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: '61d9e8ae5063a517ca57dc796273284ae15cad31', ...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: 'e4d0a6073a1af4480c116bd1525c56716976da24' }), this.invalid && (h("cat-icon", { key: 'bb894fea7607b7b6b3dc950dde171faac3627a07', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
             !this.disabled &&
             !this.state.isResolving &&
-            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '54a2c42cda8750dce73c4730a3a8f4cdc3c959f2', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: 'de8b11dcd1e97476a811f9811026eae619c42ac8', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: '558cf4e93022770cf7841eab7d2f8b116cb221be', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: 'cdc203f6738614839f1a18c2bce9353f0df8e47c', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: '63316734b1e845d727ef4628b1d324a3757f7989', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            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: '6179bb7c28759db151265a35be142e1e89749d61', 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: '5d449c11b58c01c1f6760448bc46474d8bb889cb', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'e50a9fa50cc46fc444fd3ec1b52c409fcfb0278f', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: 'dd07d6ef4fbd6352b88cb2d15802a4b382c3409f', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: 'bac0e34fa3603ed07a3f9cc2d9346349c2b31201', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : catI18nRegistry.t('select.empty')))))))));
@@ -11662,6 +11684,7 @@ const CatSelect = class {
             this.showErrors();
         }
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "connector": ["onConnectorChanged"],
@@ -13110,11 +13133,12 @@ const CatSpinner = class {
         registerInstance(this, hostRef);
         this.size = 'm';
         this.a11yLabel = undefined;
+        this.value = 0;
     }
     render() {
-        return (h("span", { key: '89faeed63cfd08de386255baa799e7d830721d79', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+        return (h("span", { key: '8922d0ec7f5474084a39a8b3a4620bee426cea78', role: "progressbar", tabindex: "-1", "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", class: {
                 [`spinner-${this.size}`]: this.size !== 'inline'
-            } }, h("svg", { key: 'afaf3eca2151ca1a55a7b5154b35e5f182f20c98', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { key: 'd23f0e2af84424c2a14c6746f96e9f5c3eff4f43', cx: "24", cy: "24", r: "21.5" }))));
+            } }, h("svg", { key: '6a649c21b27b3dbad3c73a71936566e7e9648254', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { key: '3fb75a339ec6e18d0209e9da2cbf650f2dae4420', cx: "24", cy: "24", r: "21.5" }))));
     }
 };
 CatSpinner.style = CatSpinnerStyle0;
@@ -13134,6 +13158,7 @@ const CatTab = class {
         this.url = undefined;
         this.urlTarget = undefined;
         this.deactivated = false;
+        this.noActive = false;
         this.error = false;
         this.nativeAttributes = undefined;
     }
@@ -13146,7 +13171,7 @@ const CatTab = class {
         this.catClick.emit(event);
     }
     render() {
-        return h(Host, { key: '7a34fd50ed725aac1cd6a36125aad1fb044203e9' });
+        return h(Host, { key: '0db9a9f8449cb69691552450d653d86251a17954' });
     }
     get hostElement() { return getElement(this); }
 };
@@ -13210,7 +13235,8 @@ const CatTabs = class {
         this.activate(this.tabs[index]);
     }
     render() {
-        return (h(Host, { key: 'ffcba33b7d479bd2a282a21a51d82664e79f0743' }, this.tabs.map((tab) => {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: '057726c753ef2e4d5557736488fbffb92774f26f' }, 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,
@@ -13220,7 +13246,7 @@ const CatTabs = class {
     }
     syncTabs() {
         this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
-        this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;
+        this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
     }
     canActivate(tab) {
         return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;
@@ -13228,7 +13254,9 @@ const CatTabs = class {
     click(tab) {
         if (this.canActivate(tab)) {
             tab.click();
-            this.activate(tab);
+            if (!tab.noActive) {
+                this.activate(tab);
+            }
         }
     }
     activate(tab) {
@@ -13236,6 +13264,7 @@ const CatTabs = class {
             this.activeTab = tab.id;
         }
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "activeTab": ["onActiveTabChange"]
@@ -13313,7 +13342,8 @@ const CatTag = class {
         }
     }
     render() {
-        return (h(Host, { key: '04de7eb41f8c5517c927a416d2d34afd092abed7' }, h("div", { key: 'a459eec9bdb227075df6d9ccfc81508ccd60467d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'f012f015e602b52ea6b57662bf8f9b3789fbc20d', htmlFor: `tags-${this.id}-input`, part: "label" }, h("span", { key: '3302bde705d78c59003650af8c85ad415997b2af', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '2f8bbb5696d92268d04b162023fdc37a27d62cde', name: "label" })) || this.label, h("div", { key: '8804dd6eaf4c8057c5318694d856d3c28d63a812', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '682da9fc4cfb49b945eaf296d63f9774df570efa', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '860bca7b5fc8cf0c7c555a5e45ce34312362400e', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '04197f0876dac237f865ba4f5948a444a27f2f2e', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (h("div", { class: "tag-pill" }, h("span", null, value), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), h("div", { key: 'b85aa4cd1520f4e477d649f9fd8300eb25fe2d3b', class: "input-inner-wrapper" }, h("input", { key: 'a4a28b1ca647e68970f1a6e3c6d852df7e43d00d', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (h("cat-button", { key: 'e29fdad3d4ad47db287ada8544cf71baa12add40', 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.invalid && h("cat-icon", { key: '8b443ee821d4dfbdaeec41a945c70d60760ffa42', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (h(CatFormHint, { key: '5f8f1115296726c536849ec4c574e8beaa53b157', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))));
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: 'c30f59f0da021ea37a9b94904da318ff28d9d699' }, h("div", { key: '6f837dcf33c6b726d4d9755b384815552f4b597f', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '78f5ce85bda81da097187483121d23f9779f96c9', htmlFor: `tags-${this.id}-input`, part: "label" }, h("span", { key: 'dae093aaa4cc7bb26ff015bf389361fda1fd6d5c', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '9eef396375eaff2e21613a79640bd1692a0a7fe8', name: "label" })) || this.label, h("div", { key: '6045ab7f98162d8d32fb5ef72c515661750aa844', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '1fb2271ffe1ddeb4acac516a2dfde5bf96265e5b', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '2ae27a41f03a9bcf5899064fe482a127221e3c10', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '5b0dacaa15194f59ad7ac76b5435debf7b8bc3fa', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (h("div", { class: "tag-pill" }, h("span", null, value), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), h("div", { key: '9869bd7ec1de2d7ef45cfd747fbccc7b9e1a0558', class: "input-inner-wrapper" }, h("input", { key: '1c61ce7e90f374e7442c888bab489c956d02d774', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (h("cat-button", { key: '8c61da4726d290f06cb1452ab9f34a2ee291ceac', 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.invalid && h("cat-icon", { key: 'ef3ba1cc1c2eaec1562fcff5f64d15ae9b8290e1', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (h(CatFormHint, { key: '2f92bb6d804a45328af1efb97750b5ae79b0c0b1', 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;
@@ -13386,6 +13416,7 @@ const CatTag = class {
         const regexPattern = `[${escapedDelimiters.join('')}]`;
         return new RegExp(regexPattern, 'g');
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "errors": ["onErrorsChanged"]
@@ -13479,15 +13510,16 @@ const CatTextarea = class {
         }
     }
     render() {
-        return (h(Host, { key: '5e2569d36f6faec841701fd9acb640737f5be4bd' }, h("div", { key: '8bfd630114a41d5128f546c4596a2fc0de7b0f46', class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: '7baa83d9d2722e629503623daa7d64f669d9d14b' }, h("div", { key: '7e23d71bea6eb4b3c1f512ce6e6052c4d0c93675', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, h("div", { key: '5d61d594bf5dd54a61d67e567d7f75d10e81fc16', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'ce7a20106b85c6ac1993154bcac3b045ac9db4b7', htmlFor: this.id, part: "label" }, h("span", { key: 'b6a5faa611b0b5fc1d2e4b34cb0b87ef48b76510', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'd6ac0138ad90af2d80933237f1244560b4678c10', name: "label" })) || this.label, h("div", { key: 'a3034e991a35206aaad04a068056a7b25a3ef0d0', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '8231926224217c999493c56656ee360453865ee5', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '666ea1ef5ac684c1ddfa854605afb3f15d1bb31a', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { key: '09b4afa39cb26371d179095c3e703ab5437309d2', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: 'f4640f6761d044ea29810b89604d5d40101427e1', class: "textarea-container" }, h("div", { key: '51bac1b86b0aaa37e2bc80fade34478e0da9f04b', class: {
+            } }, h("div", { key: '51da73044afe3fb0100c921556f4bc60f4823597', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '21efe02e678b15577efbd4e6889ed278e519f6e1', htmlFor: this.id, part: "label" }, h("span", { key: '35e58dc082d073296563ec6473734ec7bb995b5e', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'f32da2b24d1d50b06a7d55d4d15185441feb285a', name: "label" })) || this.label, h("div", { key: 'ed4abb4e4b492130a990fca89699fea9838c758c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '97dfc883e7a8af4d2090bb4b40208e0886585da6', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '9c74951359ccab83ec46bbd868bccefaf1356f6f', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { key: '702c2c4a8238430927882a11490cd5be399bd3f5', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: '3f2aa62a32dd8b775b9826fe8c92129219135dcb', class: "textarea-container" }, h("div", { key: '270d8f0b27b99f7388e17edc88affe7daab15438', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, h("textarea", { key: '5248d353acf90ea7efbbe99bf4faf7d411373189', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { key: '8b3cf0397ff8813be35c6344e079057fd5d1b032', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '9cd285c4aac61a812e8308f3d005d3f95c8c6d97', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, h("textarea", { key: 'a0091c3f756c983d416ee12bf777cf7101c07b48', ...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: '9ff1a0a8b7bf6ae5deb8b489f4426053d5ff54b9', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: 'badc9780d07df9f6645c7f4bbdcfe97610db6741', 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;
@@ -13527,6 +13559,7 @@ const CatTextarea = class {
             this.showErrors();
         }
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "errors": ["onErrorsChanged"]
@@ -13579,7 +13612,7 @@ function isAfter(date, time) {
     return date.getHours() > hh || (date.getHours() === hh && date.getMinutes() > mm);
 }
 
-const catTimeCss = ":host{display:block}:host([hidden]){display:none}.label-aria{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.cat-time-addon{margin-left:-1px}nav{max-height:16rem}nav ul{list-style:none;margin:0;padding:0}.time-disabled{opacity:0.25}";
+const catTimeCss = ":host{display:block}:host([hidden]){display:none}.label-aria{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.cat-time-addon{margin-left:-1px;display:flex}nav{max-height:16rem}nav ul{list-style:none;margin:0;padding:0}.time-disabled{opacity:0.25}";
 const CatTimeStyle0 = catTimeCss;
 
 const CatTime = class {
@@ -13722,14 +13755,15 @@ const CatTime = class {
         this.input?.clear();
     }
     render() {
-        return (h(Host, { key: 'b71fce8999b68ab9372e79cff859e00c3c3b5ae3' }, h("cat-input", { key: 'cb824f43ba631809d3229e57fe70ad3d89d25e25', 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: '245d373d89a8b03d3bbc772bd35e260c35cc3c26', slot: "label" }, this.hasSlottedLabel && h("slot", { key: 'b9717682f61035f64a7230fe775267f723f8ecb2', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '747a7a112450391f3ba970cb7faefd904877e1a5', class: "label-aria" }, " (HH:mm)")), h("div", { key: '15c380b767ef28aade17e1ac21a2134677060772', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: '63d2eef4a5e69c15e23233f57912b4a20e869470', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: '581392dc8dc6ce127fdafc75676f6c9ab46925fb', slot: "addon", placement: this.placement }, h("cat-button", { key: 'f563afde31e991f8f1533ad0d3a50ee34eee81b4', 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: 'baa0539c318511783cd5c4d85d39b310df7016d4', slot: "content", class: "cat-nav" }, h("ul", { key: '10af19bdc805117f96ab2d67ef76065c0cc02bff' }, this.timeArray().map(time => {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: '9f7564ec41354b98ec0779dde23198a18689f1a3' }, h("cat-input", { key: '776a76b393d92278a5afd389602c767c319c9238', 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: '016bab3b23282fa4a5aeb764e4b80b337d2f9cca', slot: "label" }, this.hasSlottedLabel && h("slot", { key: '233b40757fe0c822716b87c23538b5b02371d9d2', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '6ae7d40f0fbf4cf729e29ad124df6f3cdd8b22f8', class: "label-aria" }, " (HH:mm)")), h("div", { key: '7aaab9d8ee9e06a8a68a9f94e664ba12422a18c5', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: '9130d436847a0fb250b28d5630e7c3a403ec494a', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: '10948ba2be73ffcde722fb22c5a4b9f3891b329d', slot: "addon", placement: this.placement }, h("cat-button", { key: '3e4d74066110ca2b7141d809a1a276f78d0382a1', 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: '27a2a17080a09e8148b5cae0af36d03735b8afcf', slot: "content", class: "cat-nav" }, h("ul", { key: '8181974cae0ed2c3cc99c43d51f3ccbc5e188592' }, 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", { key: 'f66debdaced2d5c33af41d7c435f67c4831e98a4', slot: "hint" }, h("slot", { key: 'f66d541b07a9b822a414447ff7888f3d4df0e63c', name: "hint" }))))));
+        }))))), this.hasSlottedHint && (h("span", { key: 'cd316e5045ad3298aac0e4056c865f7bd6b1dcf3', slot: "hint" }, h("slot", { key: '7fa90c7b83032013bfc9d1626bc8b53072e9aa85', name: "hint" }))))));
     }
     timeArray() {
         const result = [];
@@ -13790,6 +13824,7 @@ const CatTime = class {
             this.catChange.emit(newValue);
         }
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "min": ["onMinChanged"],
@@ -13855,13 +13890,14 @@ const CatToggle = class {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '219420443e79499c24a6c10335cedb7ddb1cc2ab' }, h("label", { key: '8ffc784cf23916ec23ab7c23a2c97e41cb4cfc15', htmlFor: this.id, class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: 'fd406b8ecbbbfd82d9872a01893129e570d3b9a1' }, h("label", { key: '7159c14116061024c7388909f2dff6bb07e6ba74', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            } }, h("input", { key: '56e7c4442215c8dd227b5d5c45b023836801d471', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '83fefa9d2480f8447762371da322114bc5a84a90', class: "toggle" }), h("span", { key: '86c800327c80c12d5bd7ab6fad43d414bf3316f5', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '990568b1744ca7fc7084fbb796bf5829254c4ba3', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '72cad47ea14041c3f51da3e95264cbf5c6a78c1a', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: 'ef4cceeda35a41bbb8907113aff690e92925c7c1', class: "toggle-placeholder" }), h(CatFormHint, { key: 'bbcea6bd0bfe51d8d070d8ab2568212d4ea20ea3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            } }, h("input", { key: '89cbd5d08dba8b652243d6bc2ff2877421536b3c', ...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: '405bfdd36ec78874840cd3e8d03838b20115aa00', class: "toggle" }), h("span", { key: 'd9bd13f8b2281d1b1be44c552262f69282f89bab', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'be3dc6b41973cfd3c372757632768a8f73668c50', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '090ad02728fa1ace69abfcfdc0b2d31f7b00150d', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '4ade49db31fd0bae7d0efb4c5169aacd9e30b94c', class: "toggle-placeholder" }), h(CatFormHint, { key: '3859a49004b782b069673289fc5e8548eded00d5', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -13880,6 +13916,7 @@ const CatToggle = class {
     updateResolved() {
         this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return getElement(this); }
 };
 CatToggle.style = CatToggleStyle0;