@haiilo/catalyst 10.25.3 → 10.27.0

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a45dd7c9.js');
-const of = require('./of-5cd84f84.js');
+const index = require('./index-0c9af7fb.js');
+const of = require('./of-aaee31a6.js');
 
 const ObjectUnsubscribedError = of.createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
     _super(this);
@@ -873,6 +873,7 @@ const CatAvatar = class {
     }
     render() {
         if (this.url) {
+            this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
             return (index.h("a", { href: this.url, target: this.urlTarget, style: this.cssStyle, class: this.cssClass, "aria-label": this.label }, this.content));
         }
         else {
@@ -901,31 +902,14 @@ const CatAvatar = class {
                 .map(n => n[0])
                 .join(''));
     }
+    static get delegatesFocus() { return true; }
+    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "src": ["onSrcChanged"]
     }; }
 };
 CatAvatar.style = CatAvatarStyle0;
 
-const catBadgeCss = ":host([hidden]){display:none}:host{display:inline-flex;max-width:100%;vertical-align:baseline;align-items:center;justify-content:center;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;line-height:1.5;flex-shrink:0}:host slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}:host([round]){border-radius:10rem}:host([variant=filled]){background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}:host([variant=outlined]){background-color:white;color:rgb(var(--text));box-shadow:inset 0 0 0 1px rgba(var(--text), 0.2)}:host([color=primary]){--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148)}:host([color=secondary]){--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0)}:host([color=info]){--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230)}:host([color=success]){--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88)}:host([color=warning]){--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0)}:host([color=danger]){--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13)}:host([size=xs]){height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}:host([size=s]){height:1.5rem;min-width:1.5rem;font-size:0.75rem;padding:0 0.5rem}:host([size=m]){height:2rem;min-width:2rem;font-size:0.875rem;padding:0 0.75rem}:host([size=l]){height:2.5rem;min-width:2.5rem;font-size:0.9375rem;padding:0 1rem}:host([size=xl]){height:3rem;min-width:3rem;font-size:1.125rem;padding:0 1rem}:host([pulse][variant=filled]){animation:1.5s ease 0s infinite normal none running pulse}:host([pulse][variant=outlined]){animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--text), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--text), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--text), 0.2)}}";
-const CatBadgeStyle0 = catBadgeCss;
-
-const CatBadge = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.variant = 'filled';
-        this.color = 'primary';
-        this.size = 'm';
-        this.round = false;
-        this.pulse = false;
-    }
-    render() {
-        return index.h("slot", { key: '23ddf7fc9b33cb4410ba74dbafda8d084cdc3606' });
-    }
-    get hostElement() { return index.getElement(this); }
-};
-CatBadge.style = CatBadgeStyle0;
-
 const _breakpoints = ['xs', 's', 'm', 'l', 'xl'];
 const Breakpoints = {
     xs: '(max-width: 539.98px)',
@@ -1041,6 +1025,74 @@ function createEmptyStyleRule(query) {
     }
 }
 
+const catBadgeCss = ":host([hidden]){display:none}:host{display:inline-flex;max-width:100%;vertical-align:baseline;align-items:center;justify-content:center;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;line-height:1.5;flex-shrink:0}:host slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}:host([round]){border-radius:10rem}:host([variant=filled]){background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}:host([variant=outlined]){background-color:white;color:rgb(var(--text));box-shadow:inset 0 0 0 1px rgba(var(--text), 0.2)}:host([color=primary]){--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148)}:host([color=secondary]){--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0)}:host([color=info]){--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230)}:host([color=success]){--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88)}:host([color=warning]){--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0)}:host([color=danger]){--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13)}:host([size=xs]){height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem;gap:0.25rem}:host([data-icon-badge=xs]){width:1rem;height:1rem;padding:0}:host([size=s]){height:1.5rem;min-width:1.5rem;font-size:0.75rem;padding:0 0.5rem;gap:0.25rem}:host([data-icon-badge=s]){width:1.5rem;height:1.5rem;padding:0}:host([size=m]){height:2rem;min-width:2rem;font-size:0.875rem;padding:0 0.75rem;gap:0.25rem}:host([data-icon-badge=m]){width:2rem;height:2rem;padding:0}:host([size=l]){height:2.5rem;min-width:2.5rem;font-size:0.9375rem;padding:0 1rem;gap:0.25rem}:host([data-icon-badge=l]){width:2.5rem;height:2.5rem;padding:0}:host([size=xl]){height:3rem;min-width:3rem;font-size:1.125rem;padding:0 1rem;gap:0.25rem}:host([data-icon-badge=xl]){width:3rem;height:3rem;padding:0}:host([pulse][variant=filled]){animation:1.5s ease 0s infinite normal none running pulse}:host([pulse][variant=outlined]){animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--text), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--text), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--text), 0.2)}}";
+const CatBadgeStyle0 = catBadgeCss;
+
+const CatBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this._iconOnly = true;
+        this.variant = 'filled';
+        this.color = 'primary';
+        this.size = 'm';
+        this.round = false;
+        this.pulse = false;
+        this.icon = undefined;
+        this.iconOnly = false;
+        this.iconRight = false;
+    }
+    onIconOnlyChanged(value) {
+        // teardown
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener);
+        this.mediaQueryList = undefined;
+        this.mediaQueryListener = undefined;
+        // setup
+        if (isBreakpoint(value)) {
+            this.mediaMatcher ?? (this.mediaMatcher = new MediaMatcher());
+            this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);
+            this.mediaQueryListener = (event) => (this._iconOnly = event.matches);
+            this.mediaQueryList.addEventListener('change', this.mediaQueryListener);
+            this._iconOnly = this.mediaQueryList.matches;
+        }
+        else {
+            this._iconOnly = value;
+        }
+    }
+    componentWillLoad() {
+        this.onIconOnlyChanged(this.iconOnly);
+    }
+    get isIconBadge() {
+        return Boolean(this.icon) && this._iconOnly;
+    }
+    get hasPrefixIcon() {
+        return Boolean(this.icon) && !this._iconOnly && !this.iconRight;
+    }
+    get hasSuffixIcon() {
+        return Boolean(this.icon) && !this._iconOnly && this.iconRight;
+    }
+    get iconSize() {
+        switch (this.size) {
+            case 'xs':
+            case 's':
+                return 'xs';
+            case 'l':
+            case 'xl':
+                return 'l';
+            default:
+                return 'm';
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '2c10a8da896b2fe6b7637ec871386da6ee9dc132', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (index.h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (index.h("slot", null)), this.hasSuffixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "iconOnly": ["onIconOnlyChanged"]
+    }; }
+};
+CatBadge.style = CatBadgeStyle0;
+
 /**
  * Find the closest parent element matching the given selector while traversing
  * up the DOM tree (including Shadow DOM).
@@ -1054,7 +1106,7 @@ function findClosest(selector, element) {
     return nextElement ? findClosest(selector, nextElement) : null;
 }
 
-const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-group-button-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-group-button-middle{border-radius:0}.cat-group-button-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-group-button:hover{z-index:1}.cat-group-button:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text))}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}";
+const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, #fff);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text))}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}";
 const CatButtonStyle0 = catButtonCss;
 
 const CatButton = class {
@@ -1149,8 +1201,9 @@ const CatButton = class {
         this.button.click();
     }
     render() {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
         if (this.url) {
-            return (index.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: {
+            return (index.h(index.Host, { "data-button-group": this.buttonGroupPosition }, index.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,
                     'cat-button-empty': !this.hasSlottedContent,
                     'cat-button-active': this.active,
@@ -1161,11 +1214,12 @@ const CatButton = class {
                     'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
                     [`cat-button-${this.variant}`]: Boolean(this.variant),
                     [`cat-button-${this.color}`]: Boolean(this.color),
-                    [`cat-button-${this.size}`]: Boolean(this.size)
-                }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+                    [`cat-button-${this.size}`]: Boolean(this.size),
+                    [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)
+                }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content)));
         }
         else {
-            return (index.h("button", { ...this.nativeAttributes, ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
+            return (index.h(index.Host, { "data-button-group": this.buttonGroupPosition }, index.h("button", { ...this.nativeAttributes, ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
                     'cat-button': true,
                     'cat-button-empty': !this.hasSlottedContent,
                     'cat-button-active': this.active,
@@ -1177,9 +1231,8 @@ const CatButton = class {
                     [`cat-button-${this.variant}`]: Boolean(this.variant),
                     [`cat-button-${this.color}`]: Boolean(this.color),
                     [`cat-button-${this.size}`]: Boolean(this.size),
-                    [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),
-                    'cat-group-button': Boolean(this.buttonGroupPosition)
-                }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+                    [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)
+                }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content)));
         }
     }
     get iconSize() {
@@ -1224,6 +1277,7 @@ const CatButton = class {
     onBlur(event) {
         this.catBlur.emit(event);
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "iconOnly": ["onIconOnlyChanged"]
@@ -1231,22 +1285,23 @@ const CatButton = class {
 };
 CatButton.style = CatButtonStyle0;
 
-const catButtonGroupCss = ":host{position:relative;display:inline-flex;vertical-align:middle}::slotted(cat-button[variant=outlined]),::slotted(cat-button:not([variant])){margin-right:-1px}::slotted(cat-button[variant=outlined]:last-child),::slotted(cat-button:not([variant]):last-child){margin-right:0}";
+const catButtonGroupCss = ":host{position:relative;display:inline-flex;vertical-align:middle}";
 const CatButtonGroupStyle0 = catButtonGroupCss;
 
 const CatButtonGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.formElements = [];
+        this.buttonElements = [];
         this.a11yLabel = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'ca23ccee6536ec2cef9d82832cf16dacac31ef2a', role: "group", "aria-label": this.a11yLabel }, index.h("slot", { key: 'b4a3485c8595874779ef41468e5af98163c6573c', onSlotchange: this.onSlotChange.bind(this) })));
+        return (index.h(index.Host, { key: '2b9aeb09c4290a27751f568e596a3de21f8deeb3', role: "group", "aria-label": this.a11yLabel }, index.h("slot", { key: '5a6afa70513843b8c201a649ed0edb30fea9b7fc', onSlotchange: this.onSlotChange.bind(this) })));
     }
     onSlotChange() {
-        this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));
-        this.formElements.forEach((element, index) => {
-            element.buttonGroupPosition = index === 0 ? 'first' : index === this.formElements.length - 1 ? 'last' : 'middle';
+        this.buttonElements = Array.from(this.hostElement.querySelectorAll(':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot="trigger"]'));
+        this.buttonElements.forEach((element, index) => {
+            element.buttonGroupPosition =
+                index === 0 ? 'first' : index === this.buttonElements.length - 1 ? 'last' : 'middle';
         });
     }
     get hostElement() { return index.getElement(this); }
@@ -1346,13 +1401,14 @@ const CatCheckbox = class {
         this.input.blur();
     }
     render() {
-        return (index.h(index.Host, { key: '8c0eb5c93eb3c1afd12a482cef1d00b693aaaa6b' }, index.h("label", { key: 'b547cfd3a6aec8c312f4cfbb12304749f4bb130a', htmlFor: this.id, class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h(index.Host, { key: 'ab6bd1bb1b74998b5202e57ba6b32da9dd0135c8' }, index.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'
-            } }, index.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 }), index.h("span", { key: '9df445a24845020c80a0f52383de1720dd7d867e', class: "box", "aria-hidden": "true" }, index.h("svg", { key: '30000e8be49bec99d68a543963cf351c7ff3fd7c', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: '793e1b85f1df92af1168696f5470c74b4ac56ebb', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: '28519cf606fd5c4f1ce87e6682c49192d9c7ccdd', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: 'ef38c2175504c86bbcc930ab4e3e259600675849', points: "1.5 5 10.5 5" }))), index.h("span", { key: '34b01f1d76b7d840245822340e6cf15a3745d948', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '088699ea29bf4fc53b784b798afc698f848343d2', name: "label" })) || this.label, index.h("span", { key: '4e4dfcc4b985ab4962fe42e88c09abd60170e5f2', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '5762ff2168f759ff2fd0d566eb99bd23e9a3154d', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '11b3596d3b6e7ae1b4356fc029f861e2407ff9ab', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: '8814d349c83078c76a948bd91fb66a593824ba87', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '99fc171926a6d467140824b22fb3d66848c9a1a3', class: "box-placeholder" }), index.h(CatFormHint, { key: '09b2a51545a4d0f731f0d42930c9d18f5e0cb512', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
+            } }, index.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 }), index.h("span", { key: 'c6c568ebc80618b4acc3e28793c1844284d4a831', class: "box", "aria-hidden": "true" }, index.h("svg", { key: '5c8c2ae933fecab8b9c826ef2493b2dec129f49c', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: '4ed298a1e0377c4ca771940b7da867c5e72017af', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: '4ca83993e600c99f4651333ce9f86c0f2b85754a', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: '32d6a98f6247ce1605baa1c0fcb66325300d0118', points: "1.5 5 10.5 5" }))), index.h("span", { key: 'cdf8717a98a756e4ae204d08fd186cf49ea7d101', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '967c87e44e4bb119b46ae70edf2eb47d63177a90', name: "label" })) || this.label, index.h("span", { key: '04a85b99e78e8db04e4080d54ff1690051ce2a50', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'caf9a8682262079edf06957ca2a2c9d14abc9130', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'd073fb49348c5561984c73bafbf7fd7e17f01ba5', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: '9fb0531829e03683accb07fdc675975feb709577', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: 'e72ad8ae3b9048ef6a58d74eb9593d511fad03c6', class: "box-placeholder" }), index.h(CatFormHint, { key: 'b10a09f94fe13f1cc7602191c0e7b3d2066a8364', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -1370,8 +1426,9 @@ const CatCheckbox = class {
         this.catBlur.emit(event);
     }
     updateResolved() {
-        this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;
+        this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
 };
 CatCheckbox.style = CatCheckboxStyle0;
@@ -1569,14 +1626,15 @@ const CatDate = class {
         this.input?.clear();
     }
     render() {
-        return (index.h(index.Host, { key: '0dddaceee870f7e1d16131988a1c344b22656594' }, index.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 (index.h(index.Host, { key: '6cb5833dd0f95cf170ad74d3841eee067e315df1' }, index.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);
-            } }, index.h("span", { key: '7bf41bdd4f7b8f0b69ef43f11fe075d05ac7e959', slot: "label" }, this.label, index.h("span", { key: '0c454cbb586b0e3e45af2a0601bb735836a17105', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: 'ce4169eb447fb61b1e98da380446aeb744b1e319', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: '2c9f064a88a711d38fe5f293764ab963cee71782', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: 'fe782bbda78ff445f760f80547a0a57252d041ba', slot: "content" }, index.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) }))))));
+            } }, index.h("span", { key: 'c7d342b0fa3b522af5d0368e590345a2524c40ee', slot: "label" }, this.label, index.h("span", { key: '44d02ddce886497f9f93dc8bb73b943ae7317d07', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: 'a4b84508af92334d93b406f767f8080ab28a831b', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: '0e48c43b6bb3b34bb70c97e7ed2bae01664c3d4e', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: '976f8aa393d60c1425a63198baeabf7522bc38c4', slot: "content" }, index.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);
@@ -1643,6 +1701,7 @@ const CatDate = class {
             this.catChange.emit(newValue);
         }
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "min": ["onMinChanged"],
@@ -2221,7 +2280,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}";
@@ -2372,15 +2433,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 (index.h(index.Host, { key: 'f0b5554bff498048c6b2ed378fbf341ee2d0a70b', "aria-label": this.label || undefined }, index.h("div", { key: '5185d42c4ec5ac93ddebd0140db6caf12ce5240d', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '2fdc6cbbcf687981348b1fb5f21f2d5782f8ce88', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: '1f7ee36794e2bd9081cc10cb5942dde193f241ca', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '3080e11319a36ea14c4ca06714cd9518037f4390', name: "label" })) || this.label, index.h("div", { key: '5d8d98b7e522bb23285e331ace4f45a6a42ab9dd', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '1acfd32324889f2c3a9ee4806f283e52a4bd3060', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '97134f7607c47820e904591e6d4909371c295eb7', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '7f8fe8f60217ddca39f2bd18fb75aae36f58924d', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: '482f557eddae1bdc7b2c9fb795ff07c130107eba', class: "picker-head" }, index.h("cat-button", { key: '2e53d21a7de00ca6a90c0d8d75f232d4ca534714', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: 'd7e4b92028c01c1b817fc4652b395bc31386cc1a', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: 'ea5eb0015f4d87ffa17030569fb04fa15f6e60e9' }, this.getHeadline()), index.h("cat-button", { key: '7bb753ec04b8d8f60a804e27a30acd976233d7df', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: 'b3d6a79b108fb6e5594a6c1228137e51354620c9', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: '7d76513d167808df5c6f1aeaa78085bbf96b0fa3', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: '3f2fcd711bbd849340b91032d88ba5abab3d1b77', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
+        return (index.h(index.Host, { key: '8b11e245fdd1d392e545692b68ea449dd19f13c8', "aria-label": this.label || undefined }, index.h("div", { key: 'bf1bd1923e220e9f209ae115eb8e6fb23b3c4b46', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'e3bfbf624e94f894c38fa97a35a0d5ad7c01915c', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: 'd946093505f4a9092632b17bc035390a663d4e7f', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'aa9da48764a90c7d5db185e0472700465627d7c1', name: "label" })) || this.label, index.h("div", { key: 'd5d8c5c50de0578f96ffb3c80853a06e9bab9821', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '30b1b1149e7e07798e9786e2de260e07d2dad19a', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '6d02133a159884bc9951894390f7d7d98a5bc1c9', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'd114855977b1fcdaf0baa77e9cbef1250bfa03be', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: '49ec46a464d223340dc74d4152c0048db1087ac6', class: "picker-head" }, index.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 }), index.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 }), index.h("h3", { key: '72c71e36794070a1e2916b6296e453b4314ddf45' }, this.getHeadline()), index.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 }), index.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 })), index.h("div", { key: '68f854f2e92f054517091e5667204bdf79b0f57c', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: '238564020faf306eadbe5e0178d1e4b1d4590f5c', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
             const day = (i + this.locale.weekInfo.firstDay) % 7;
             return index.h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
-        })), this.weeks && (index.h("div", { key: '5f1e57853dbdbc17562f6b98d0124a9a99cc5a66', class: "picker-grid-weeks" }, dateGrid
+        })), this.weeks && (index.h("div", { key: 'c59e9879cd8eacb4197a327a1f3c5e6d109c21b3', class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '0551334303e8212f276de5ea1f2642446c0f6485', class: "picker-grid-days" }, dateGrid.map(day => {
+            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.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;
@@ -2397,7 +2459,7 @@ const CatDateInline = class {
                     'date-focusable': this.canFocus(day),
                     'date-disabled': !this.canClick(day)
                 }, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isStartDate || isEndDate ? 'filled' : isToday ? 'outlined' : 'text', a11yLabel: this.locale.toLocalStr(day), active: isStartDate || isEndDate || isRange, color: isStartDate || isEndDate || isToday ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.locale.toLocalISO(day) }, day.getDate()));
-        }))), index.h("div", { key: '6fbabecc4714a6a27bff80b8bdfab2217e69d844', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: 'd12318e71cd05fd506c2017922faf527ab92f755', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: '33d82b959cc2f8a1333b2c7181a79311af84a88d', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: '4b83fb3e173be9d0e96cace310ee9517938fe631', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '702ca224198fbe0f6014cc3ec5338fdff437ff5c', class: "cursor-aria", "aria-live": "polite" })));
+        }))), index.h("div", { key: '7dabe502931e5a831423e368500a04577241253f', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: '6da0e2075e109a248a2bb2b6ab67d9ddf96206f1', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: '8b3599454323e064ba22ebd3c16168f99600a64b', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: '596d9b14c74f482098d5d5c3684fea633b43baa2', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: 'dd14d9dbec2061f1d55bf628fafadd3a4aa73460', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date, focus = true) {
         const [minDate, maxDate] = this.getMinMaxDate();
@@ -2468,7 +2530,7 @@ const CatDateInline = class {
         else if (isSameMonth(this.viewDate, now) && (!minDate || minDate <= now)) {
             return isSameMonth(this.viewDate, date) && isSameDay(now, date);
         }
-        const minDay = isSameMonth(date, minDate) ? minDate?.getDate() ?? 1 : 1;
+        const minDay = isSameMonth(date, minDate) ? (minDate?.getDate() ?? 1) : 1;
         return isSameMonth(this.viewDate, date) && date.getDate() === minDay;
     }
     canClick(date) {
@@ -2492,6 +2554,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 index.getElement(this); }
 };
 CatDateInline.style = CatDateInlineStyle0;
@@ -5415,12 +5478,21 @@ function getPaddingObject(padding) {
   };
 }
 function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
   return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
   };
 }
 
@@ -5609,9 +5681,10 @@ async function detectOverflow(state, options) {
     strategy
   }));
   const rect = elementContext === 'floating' ? {
-    ...rects.floating,
     x,
-    y
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
   } : rects.reference;
   const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
   const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -5861,10 +5934,12 @@ const flip$1 = function (options) {
         return {};
       }
       const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
       const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
@@ -5910,8 +5985,17 @@ const flip$1 = function (options) {
           switch (fallbackStrategy) {
             case 'bestFit':
               {
-                var _overflowsData$map$so;
-                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
                 if (placement) {
                   resetPlacement = placement;
                 }
@@ -6151,6 +6235,8 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -6160,10 +6246,9 @@ async function convertValueToCoords(state, options) {
     crossAxis: 0,
     alignmentAxis: null
   } : {
-    mainAxis: 0,
-    crossAxis: 0,
-    alignmentAxis: null,
-    ...rawValue
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
   };
   if (alignment && typeof alignmentAxis === 'number') {
     crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
@@ -6285,7 +6370,11 @@ const shift$1 = function (options) {
         ...limitedCoords,
         data: {
           x: limitedCoords.x - x,
-          y: limitedCoords.y - y
+          y: limitedCoords.y - y,
+          enabled: {
+            [mainAxis]: checkMainAxis,
+            [crossAxis]: checkCrossAxis
+          }
         }
       };
     }
@@ -6374,6 +6463,7 @@ const size$1 = function (options) {
     name: 'size',
     options,
     async fn(state) {
+      var _state$middlewareData, _state$middlewareData2;
       const {
         placement,
         rects,
@@ -6401,17 +6491,18 @@ const size$1 = function (options) {
         widthSide = side;
         heightSide = alignment === 'end' ? 'top' : 'bottom';
       }
-      const overflowAvailableHeight = height - overflow[heightSide];
-      const overflowAvailableWidth = width - overflow[widthSide];
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
       const noShift = !state.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
-      if (isYAxis) {
-        const maximumClippingWidth = width - overflow.left - overflow.right;
-        availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
-      } else {
-        const maximumClippingHeight = height - overflow.top - overflow.bottom;
-        availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
+      if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+        availableWidth = maximumClippingWidth;
+      }
+      if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+        availableHeight = maximumClippingHeight;
       }
       if (noShift && !alignment) {
         const xMin = max(overflow.left, 0);
@@ -6442,6 +6533,9 @@ const size$1 = function (options) {
   };
 };
 
+function hasWindow() {
+  return typeof window !== 'undefined';
+}
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -6460,17 +6554,25 @@ function getDocumentElement(node) {
   return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
 }
 function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
   return value instanceof Node || value instanceof getWindow(value).Node;
 }
 function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
   return value instanceof Element || value instanceof getWindow(value).Element;
 }
 function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
   return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
 }
 function isShadowRoot(value) {
-  // Browsers without `ShadowRoot` support.
-  if (typeof ShadowRoot === 'undefined') {
+  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
     return false;
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
@@ -6487,9 +6589,18 @@ function isOverflowElement(element) {
 function isTableElement(element) {
   return ['table', 'td', 'th'].includes(getNodeName(element));
 }
-function isContainingBlock(element) {
+function isTopLayer$1(element) {
+  return [':popover-open', ':modal'].some(selector => {
+    try {
+      return element.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
+function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = getComputedStyle$1(element);
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
@@ -6499,9 +6610,10 @@ function getContainingBlock(element) {
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
+    } else if (isTopLayer$1(currentNode)) {
+      return null;
     }
+    currentNode = getParentNode(currentNode);
   }
   return null;
 }
@@ -6523,8 +6635,8 @@ function getNodeScroll(element) {
     };
   }
   return {
-    scrollLeft: element.pageXOffset,
-    scrollTop: element.pageYOffset
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
   };
 }
 function getParentNode(node) {
@@ -6564,10 +6676,14 @@ function getOverflowAncestors(node, list, traverseIframes) {
   const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
   const win = getWindow(scrollableAncestor);
   if (isBody) {
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
   }
   return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
 
 function getCssDimensions(element) {
   const css = getComputedStyle$1(element);
@@ -8587,7 +8703,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());
@@ -8608,7 +8725,7 @@ const CatDropdown = class {
             const elem = elems.shift();
             trigger = elem?.hasAttribute('data-trigger')
                 ? elem
-                : elem?.querySelector('[data-trigger]') ?? undefined;
+                : (elem?.querySelector('[data-trigger]') ?? undefined);
         }
         if (!trigger) {
             trigger = firstTabbable(this.triggerSlot);
@@ -10387,19 +10504,20 @@ const CatInput = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'c35a9fef53abc8f90318e04f37a15e281007ce91', class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h("div", { key: 'ffbaf104a60dbf73cb59e07e3164fe0c421540a5', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal
-            } }, index.h("div", { key: 'ee09123d5c98cdeb2c691e55b751908d0d770111', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'af7b1e38868f2deb4ad625bdf2e22f163c4a87b3', htmlFor: this.id, part: "label" }, index.h("span", { key: 'aca425f9976509f18190e93c69d5274376dff02b', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '6d3b4503cc122a777dfafec12df63e3b891be047', name: "label" })) || this.label, index.h("div", { key: 'd5e896348ce01ae0b14e551b12a5e1bbba17af79', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '6f324f7a3acf2d24de0402975bbe20c1e14885ee', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '301c4bcde93261c6c3fa9488a36aaa57f4297421', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: '65d74e1addc8090889167ee0ca391c7d72bc0719', class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), index.h("div", { key: 'a46c6b8644fb6effe070018e64772394ba1e49b9', class: "input-container" }, index.h("div", { key: 'bbdb55e7a339c95172281b0b145a41ca80774d64', class: "input-outer-wrapper" }, index.h("div", { key: 'bcc3207d825560d63ee77cf3bbf3996fe853c6f6', class: {
+            } }, index.h("div", { key: 'e6139d1d950c2d8c2674bb90f0acbe9333ace2eb', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'fce898969b37f4579f780c1a62354ccb0da5a73e', htmlFor: this.id, part: "label" }, index.h("span", { key: '8a4d0f653bae9a75db600080ad7d0b9199c14db5', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '6073eadb00b587d1f3ba22d212e5235d21826b08', name: "label" })) || this.label, index.h("div", { key: 'fc4be508caec71287f275873d49adb5c16931289', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'c1010a473d4bfadb8ada56825db91f0c4d2b7871', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '8b2184a224afa6857f207aeaf71d83e12c92ef9a', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: '6aee4428a06faba6ecf6a82963f0ecf3ca0d5d7b', class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), index.h("div", { key: '9c88a62af0c4083162bea13dc1fd5ead5708efbb', class: "input-container" }, index.h("div", { key: '556a7b1bc45da66739d8a7afec3d4e1b64f12e77', class: "input-outer-wrapper" }, index.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 && (index.h("span", { key: 'ce871809b18c5d8d0185f423a536c187f07044ac', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '9b9f24c7558feac1bd2f16479a530ecf9b48053a', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: 'e1bdaa8e2a6354f87e3a76c7883e140323997b49', class: "input-inner-wrapper" }, index.h("input", { key: '5aed7be866964981b3d4b68d07e30cb4ac4c62c0', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: 'de3b5da6a0a09c1f66caeb2fb3c9772a2426778a', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: 'f950a57fa6060b9f82629d26b91dcb449b86cd2a', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: 'b98cd1a805712c454262bfa8fae92f1e92b33f09', class: "input-inner-wrapper" }, index.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 && (index.h("cat-button", { key: 'b52955e6def27de98007311735ff7af7b03103bf', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: '5ba3de99ed1e9bbcf1ce845fc6bcc045d0524a14', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '6b71c73cda4ba80fcdaa53e521b648245277e76c', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: '174802a1493b21dbed3f92553e9315a9af04b25c', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '450043a9b160386d3a04fca9ff42595a80eec135', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '4c76e1d0ed2be65d144a1b17941acd1f40524002', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: '6a33d7769b02c71a754e994195a91f90abce2220', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: '54c7b48879d859ccf8f0e7d44a8fa132b6d1055b', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: '255d4760d151bfb36f0217295ee378b5cec26647', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: 'd5e62dccaaa64370723d4721d567789b06c94b11', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '22218dd7cd48b2599d2125ec080467c925b04a4d', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: 'c9e5f18bfc54321ad9b18df56a199d0096739621', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '307c0d5f2a1dff6efb7d6bf05a035c487f947994', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '3216d4e278951898d9a96ad48b2df7c17d54c6a3', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: 'd996aab9325a2eb77401490c3fa2a9e8eaf0ffc6', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: '84980cbf543e9405c70d481bce339cd9c743da43', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -10451,6 +10569,7 @@ const CatInput = class {
         }
         return undefined;
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "errors": ["onErrorsChanged"]
@@ -10477,9 +10596,10 @@ const CatPagination = class {
         this.iconNext = '$cat:pagination-right';
     }
     render() {
-        return (index.h("nav", { key: 'aea4a39cc798431911b8775600dd734595d51185', role: "navigation" }, index.h("ol", { key: 'bbcb43fa61bcd379ad84eb28ca6bcf995bf85159', class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h("nav", { key: 'ed5098e1578e2157e0f5b8c539f313e2892c5f05', role: "navigation" }, index.h("ol", { key: '6f63a5c0a79722913dafbf1b6391ab586a20695a', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, index.h("li", { key: '984f120135399170d9374881a8562fa12b7c0a75' }, index.h("cat-button", { key: '8f173139e15c77227fc1044196887b489835a4c5', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: of.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", { key: '165a68e0fd8f78f4fc6a505ec4c0715a21607d00' }, index.h("cat-button", { key: '74864af9ce7f4f38b3d1e47209d8c47faf559b96', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: of.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
+            } }, index.h("li", { key: '0dd989fa017490749141ab2029546b115a34ce27' }, index.h("cat-button", { key: '8614e9e1ebfc2ff3aeda2cec8be07aeff6e592eb', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: of.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", { key: 'b864788a70e125ae93a34e705522e537b359a12a' }, index.h("cat-button", { key: '93f6d89967b6f6b93b733fbcb628cf4a3663dbf0', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: of.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
     get isFirst() {
         return this.page === 0;
@@ -10528,6 +10648,8 @@ const CatPagination = class {
             index.h("li", null, index.h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: of.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 index.getElement(this); }
 };
 CatPagination.style = CatPaginationStyle0;
 
@@ -10582,13 +10704,14 @@ const CatRadio = class {
         this.input.blur();
     }
     render() {
-        return (index.h(index.Host, { key: '7fb3add02c4e5ad69577dd753a3a0353153fa304' }, index.h("label", { key: '3b1a872da255a8dd5c396ba55e06073146cfd758', htmlFor: this.id, class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h(index.Host, { key: '875be66c1a340d478bb55b15822415df919591ad' }, index.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' }, index.h("span", { key: 'baea250060694d0f239b222efafd469c3fd51d6e', class: "radio" }, index.h("input", { key: '8d3ab427ade40822fe3fb4eab8c8b4f9be8104ae', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: 'a0e30eb3a071d8981dc2cf6e12d42bbcf5ff8bec', class: "circle" })), index.h("span", { key: '518d21be81587a6bd6fd571b4921a9c7464f65ae', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: 'f9f92eb46213178a4be84210f3a7d4b758bb043c', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '9af9f7e6331131847217ad74b2c4c7bd3ca51212', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '6064b9990cbbb0f49a305acc15f0ea7bed627da7', class: "circle-placeholder" }), index.h(CatFormHint, { key: '4cb103c3f9b83555b222da19bf480af83201465e', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
+            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { key: '5c9bc1aa0f3746f29a4dbf219e241b6c1779a5c7', class: "radio" }, index.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 }), index.h("span", { key: 'd6863f415ce0999c31276e8dc6e05b3ed7298193', class: "circle" })), index.h("span", { key: 'c82183168cd245b781f2a4273c38ef20247d10c1', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: 'd5a556eff95f4471371c6162a0b101c1fb82e0cc', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: 'a236fefd50ea65e63643e5747a72a1f0b0dfbbb2', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '77ae0d9af2ff86becdb0b3a487c37689fe63af66', class: "circle-placeholder" }), index.h(CatFormHint, { key: '5e90f290fe70136ee19fe287db749abc8e7ec024', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -10603,6 +10726,7 @@ const CatRadio = class {
     onBlur(event) {
         this.catBlur.emit(event);
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
 };
 CatRadio.style = CatRadioStyle0;
@@ -11214,18 +11338,19 @@ const CatSelect = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'f8f27eef2e7fff527c9a3c4e7c4fde643d80b606' }, index.h("div", { key: '1d28d1629ab6407eb8af786b7878309885ea8e99', class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h(index.Host, { key: '1ecf402adc273d133bfe829aea9fc28c6f63bc79' }, index.h("div", { key: '5c209d893e31472fabda8dc0aab1294693ba4b0b', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal,
                 'select-multiple': this.multiple
-            } }, index.h("div", { key: 'dc241514b1e697c2a42c230c9f04cd07f1a3a735', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'd5f0179474aeca24a0773e81e9b08873e847facd', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '3cf13b24b0537d2a70e6a0918d1ba6c9b2b84731', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'f0ad0d85b986a657456c8cd37b2f5cf286d1bf44', name: "label" })) || this.label, index.h("div", { key: '0ec56a4f09ee480300e5ea8c2c656f90e5fef2de', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '08c2e70f25ccf68bbc73d2366e39f4bde5d1c675', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '7e7fe7b9e28e4833bb413c60af3459a1d998189b', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'bf37c5423d2e33d98bd62007a74a45f2362c4575', class: "select-container" }, index.h("div", { key: 'f09d751cfd05f43942ad5ad77706f8ae39050de9', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { key: '5378a3d5f444e6346c53ffb7023cce68cf1c3ffb', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
+            } }, index.h("div", { key: '51755c54effe1bd8216e656bc95f6bf57814219a', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'e4835aa21b0bde58f40e9130122826e6ade1e739', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '8bdbd5c021b0c4fd864cc7b8d84e0230707cd016', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '6e7ad3025b1cee315cf10c85e907cca128ec3922', name: "label" })) || this.label, index.h("div", { key: '1536c12184aec8b8825d24a0635bb08baa976b6d', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'f90e3b62becfab3e586718ef201f9596e78c820b', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'db0bfd7582529e57fb18266f5014a73c92584c84', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'ce84b362fe92abcd2e65388b457a5ed25def1e3e', class: "select-container" }, index.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) }, index.h("div", { key: '5b92f786919140fe0f4329a3b846e24007b980e7', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
                 pill: true,
                 'select-no-open': true,
                 'select-option-active': this.state.activeSelectionIndex === i
-            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: '27755954d228e33d0ba6adf5736defcd1d56b32b', ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && index.h("cat-spinner", { key: '4621c8c3b7e430e5841471757da5a51df5ca86ad' }), this.invalid && (index.h("cat-icon", { key: 'b4d31caef78d62769c3dc84fc6d4415f8c5ee849', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: '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 && index.h("cat-spinner", { key: 'e4d0a6073a1af4480c116bd1525c56716976da24' }), this.invalid && (index.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 ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: of.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: '54a2c42cda8750dce73c4730a3a8f4cdc3c959f2', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? of.catI18nRegistry.t('select.close') : of.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (index.h(CatFormHint, { key: 'de8b11dcd1e97476a811f9811026eae619c42ac8', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: '558cf4e93022770cf7841eab7d2f8b116cb221be', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: 'cdc203f6738614839f1a18c2bce9353f0df8e47c', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: '63316734b1e845d727ef4628b1d324a3757f7989', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: of.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: '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 ? of.catI18nRegistry.t('select.close') : of.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (index.h(CatFormHint, { key: '5d449c11b58c01c1f6760448bc46474d8bb889cb', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: 'e50a9fa50cc46fc444fd3ec1b52c409fcfb0278f', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: 'dd07d6ef4fbd6352b88cb2d15802a4b382c3409f', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.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(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : of.catI18nRegistry.t('select.empty')))))))));
@@ -11563,6 +11688,7 @@ const CatSelect = class {
             this.showErrors();
         }
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "connector": ["onConnectorChanged"],
@@ -13011,11 +13137,12 @@ const CatSpinner = class {
         index.registerInstance(this, hostRef);
         this.size = 'm';
         this.a11yLabel = undefined;
+        this.value = 0;
     }
     render() {
-        return (index.h("span", { key: '89faeed63cfd08de386255baa799e7d830721d79', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+        return (index.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'
-            } }, index.h("svg", { key: 'afaf3eca2151ca1a55a7b5154b35e5f182f20c98', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, index.h("circle", { key: 'd23f0e2af84424c2a14c6746f96e9f5c3eff4f43', cx: "24", cy: "24", r: "21.5" }))));
+            } }, index.h("svg", { key: '6a649c21b27b3dbad3c73a71936566e7e9648254', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, index.h("circle", { key: '3fb75a339ec6e18d0209e9da2cbf650f2dae4420', cx: "24", cy: "24", r: "21.5" }))));
     }
 };
 CatSpinner.style = CatSpinnerStyle0;
@@ -13111,7 +13238,8 @@ const CatTabs = class {
         this.activate(this.tabs[index]);
     }
     render() {
-        return (index.h(index.Host, { key: 'ffcba33b7d479bd2a282a21a51d82664e79f0743' }, this.tabs.map((tab) => {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h(index.Host, { key: '057726c753ef2e4d5557736488fbffb92774f26f' }, this.tabs.map((tab) => {
             return (index.h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
                     'cat-tab': true,
                     'cat-tab-active': tab.id === this.activeTab,
@@ -13137,6 +13265,7 @@ const CatTabs = class {
             this.activeTab = tab.id;
         }
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "activeTab": ["onActiveTabChange"]
@@ -13214,7 +13343,8 @@ const CatTag = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '04de7eb41f8c5517c927a416d2d34afd092abed7' }, index.h("div", { key: 'a459eec9bdb227075df6d9ccfc81508ccd60467d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'f012f015e602b52ea6b57662bf8f9b3789fbc20d', htmlFor: `tags-${this.id}-input`, part: "label" }, index.h("span", { key: '3302bde705d78c59003650af8c85ad415997b2af', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '2f8bbb5696d92268d04b162023fdc37a27d62cde', name: "label" })) || this.label, index.h("div", { key: '8804dd6eaf4c8057c5318694d856d3c28d63a812', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '682da9fc4cfb49b945eaf296d63f9774df570efa', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '860bca7b5fc8cf0c7c555a5e45ce34312362400e', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '04197f0876dac237f865ba4f5948a444a27f2f2e', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (index.h("div", { class: "tag-pill" }, index.h("span", null, value), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), index.h("div", { key: 'b85aa4cd1520f4e477d649f9fd8300eb25fe2d3b', class: "input-inner-wrapper" }, index.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 && (index.h("cat-button", { key: 'e29fdad3d4ad47db287ada8544cf71baa12add40', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && index.h("cat-icon", { key: '8b443ee821d4dfbdaeec41a945c70d60760ffa42', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (index.h(CatFormHint, { key: '5f8f1115296726c536849ec4c574e8beaa53b157', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))));
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h(index.Host, { key: 'c30f59f0da021ea37a9b94904da318ff28d9d699' }, index.h("div", { key: '6f837dcf33c6b726d4d9755b384815552f4b597f', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '78f5ce85bda81da097187483121d23f9779f96c9', htmlFor: `tags-${this.id}-input`, part: "label" }, index.h("span", { key: 'dae093aaa4cc7bb26ff015bf389361fda1fd6d5c', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '9eef396375eaff2e21613a79640bd1692a0a7fe8', name: "label" })) || this.label, index.h("div", { key: '6045ab7f98162d8d32fb5ef72c515661750aa844', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '1fb2271ffe1ddeb4acac516a2dfde5bf96265e5b', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '2ae27a41f03a9bcf5899064fe482a127221e3c10', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '5b0dacaa15194f59ad7ac76b5435debf7b8bc3fa', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (index.h("div", { class: "tag-pill" }, index.h("span", null, value), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), index.h("div", { key: '9869bd7ec1de2d7ef45cfd747fbccc7b9e1a0558', class: "input-inner-wrapper" }, index.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 && (index.h("cat-button", { key: '8c61da4726d290f06cb1452ab9f34a2ee291ceac', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && index.h("cat-icon", { key: 'ef3ba1cc1c2eaec1562fcff5f64d15ae9b8290e1', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (index.h(CatFormHint, { key: '2f92bb6d804a45328af1efb97750b5ae79b0c0b1', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -13287,6 +13417,7 @@ const CatTag = class {
         const regexPattern = `[${escapedDelimiters.join('')}]`;
         return new RegExp(regexPattern, 'g');
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "errors": ["onErrorsChanged"]
@@ -13380,15 +13511,16 @@ const CatTextarea = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5e2569d36f6faec841701fd9acb640737f5be4bd' }, index.h("div", { key: '8bfd630114a41d5128f546c4596a2fc0de7b0f46', class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h(index.Host, { key: '7baa83d9d2722e629503623daa7d64f669d9d14b' }, index.h("div", { key: '7e23d71bea6eb4b3c1f512ce6e6052c4d0c93675', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, index.h("div", { key: '5d61d594bf5dd54a61d67e567d7f75d10e81fc16', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'ce7a20106b85c6ac1993154bcac3b045ac9db4b7', htmlFor: this.id, part: "label" }, index.h("span", { key: 'b6a5faa611b0b5fc1d2e4b34cb0b87ef48b76510', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'd6ac0138ad90af2d80933237f1244560b4678c10', name: "label" })) || this.label, index.h("div", { key: 'a3034e991a35206aaad04a068056a7b25a3ef0d0', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '8231926224217c999493c56656ee360453865ee5', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '666ea1ef5ac684c1ddfa854605afb3f15d1bb31a', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: '09b4afa39cb26371d179095c3e703ab5437309d2', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), index.h("div", { key: 'f4640f6761d044ea29810b89604d5d40101427e1', class: "textarea-container" }, index.h("div", { key: '51bac1b86b0aaa37e2bc80fade34478e0da9f04b', class: {
+            } }, index.h("div", { key: '51da73044afe3fb0100c921556f4bc60f4823597', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '21efe02e678b15577efbd4e6889ed278e519f6e1', htmlFor: this.id, part: "label" }, index.h("span", { key: '35e58dc082d073296563ec6473734ec7bb995b5e', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'f32da2b24d1d50b06a7d55d4d15185441feb285a', name: "label" })) || this.label, index.h("div", { key: 'ed4abb4e4b492130a990fca89699fea9838c758c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '97dfc883e7a8af4d2090bb4b40208e0886585da6', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '9c74951359ccab83ec46bbd868bccefaf1356f6f', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: '702c2c4a8238430927882a11490cd5be399bd3f5', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), index.h("div", { key: '3f2aa62a32dd8b775b9826fe8c92129219135dcb', class: "textarea-container" }, index.h("div", { key: '270d8f0b27b99f7388e17edc88affe7daab15438', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, index.h("textarea", { key: '5248d353acf90ea7efbbe99bf4faf7d411373189', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (index.h("cat-icon", { key: '8b3cf0397ff8813be35c6344e079057fd5d1b032', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: '9cd285c4aac61a812e8308f3d005d3f95c8c6d97', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, index.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 && (index.h("cat-icon", { key: '9ff1a0a8b7bf6ae5deb8b489f4426053d5ff54b9', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: 'badc9780d07df9f6645c7f4bbdcfe97610db6741', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -13428,6 +13560,7 @@ const CatTextarea = class {
             this.showErrors();
         }
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "errors": ["onErrorsChanged"]
@@ -13480,7 +13613,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 {
@@ -13538,7 +13671,7 @@ const CatTime = class {
         }
         else if (value !== oldValue) {
             this.set12hFormat();
-            this.syncValue(value);
+            this.syncValue(value ?? '');
         }
     }
     componentWillLoad() {
@@ -13577,7 +13710,7 @@ const CatTime = class {
         let newValue = this.value;
         if (!date) {
             this.selectionTime = null;
-            this.value = undefined;
+            newValue = undefined;
         }
         else {
             const time = clampTime(this.min ?? null, date, this.max ?? null);
@@ -13623,14 +13756,15 @@ const CatTime = class {
         this.input?.clear();
     }
     render() {
-        return (index.h(index.Host, { key: 'e7f3fec7aac9269904c5b85554e1c066b1ca630e' }, index.h("cat-input", { key: 'e7e3ecb30bdbe05e07bb749edbddca5f23312985', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: 'fb1227046b0e70ca3b3e7fdd817693415f3c95cd', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: '80986dbd022a16c7346fce67aa9142c77b7f878f', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: 'a0122503c91023c09cfaf02a528a2af9a8fae457', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '3f8179a371368b89267571e66827b7f79f1b0cda', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: '62cd7e32d099d45142a5241a7485275e675d498d', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: '8a7926b666c69528396a683048efaf9d8ad54df1', slot: "addon", placement: this.placement }, index.h("cat-button", { key: '47b6dffa1c65644bc36706d0187c1681fbd3327e', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: '6afd81a1b00e31723efcb3b49c3df97c52ea21b0', slot: "content", class: "cat-nav" }, index.h("ul", { key: 'd1176db0809d98ad0dd4919dd28aed480b668cbc' }, this.timeArray().map(time => {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h(index.Host, { key: '9f7564ec41354b98ec0779dde23198a18689f1a3' }, index.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) }, index.h("span", { key: '016bab3b23282fa4a5aeb764e4b80b337d2f9cca', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: '233b40757fe0c822716b87c23538b5b02371d9d2', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: '6ae7d40f0fbf4cf729e29ad124df6f3cdd8b22f8', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '7aaab9d8ee9e06a8a68a9f94e664ba12422a18c5', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: '9130d436847a0fb250b28d5630e7c3a403ec494a', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: '10948ba2be73ffcde722fb22c5a4b9f3891b329d', slot: "addon", placement: this.placement }, index.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 }), index.h("nav", { key: '27a2a17080a09e8148b5cae0af36d03735b8afcf', slot: "content", class: "cat-nav" }, index.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 (index.h("li", null, index.h("cat-button", { class: {
                     'cat-nav-item': true,
                     'time-disabled': disabled
                 }, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
-        }))))), this.hasSlottedHint && (index.h("span", { key: '9c46d6be446c162b785d2d03a856b63417f1a38e', slot: "hint" }, index.h("slot", { key: '1e581c2ee687c125552ad560da773da4dfdd4691', name: "hint" }))))));
+        }))))), this.hasSlottedHint && (index.h("span", { key: 'cd316e5045ad3298aac0e4056c865f7bd6b1dcf3', slot: "hint" }, index.h("slot", { key: '7fa90c7b83032013bfc9d1626bc8b53072e9aa85', name: "hint" }))))));
     }
     timeArray() {
         const result = [];
@@ -13691,6 +13825,7 @@ const CatTime = class {
             this.catChange.emit(newValue);
         }
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "min": ["onMinChanged"],
@@ -13756,13 +13891,14 @@ const CatToggle = class {
         this.input.blur();
     }
     render() {
-        return (index.h(index.Host, { key: '219420443e79499c24a6c10335cedb7ddb1cc2ab' }, index.h("label", { key: '8ffc784cf23916ec23ab7c23a2c97e41cb4cfc15', htmlFor: this.id, class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h(index.Host, { key: 'fd406b8ecbbbfd82d9872a01893129e570d3b9a1' }, index.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'
-            } }, index.h("input", { key: '56e7c4442215c8dd227b5d5c45b023836801d471', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: '83fefa9d2480f8447762371da322114bc5a84a90', class: "toggle" }), index.h("span", { key: '86c800327c80c12d5bd7ab6fad43d414bf3316f5', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '990568b1744ca7fc7084fbb796bf5829254c4ba3', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '72cad47ea14041c3f51da3e95264cbf5c6a78c1a', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: 'ef4cceeda35a41bbb8907113aff690e92925c7c1', class: "toggle-placeholder" }), index.h(CatFormHint, { key: 'bbcea6bd0bfe51d8d070d8ab2568212d4ea20ea3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
+            } }, index.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 }), index.h("span", { key: '405bfdd36ec78874840cd3e8d03838b20115aa00', class: "toggle" }), index.h("span", { key: 'd9bd13f8b2281d1b1be44c552262f69282f89bab', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: 'be3dc6b41973cfd3c372757632768a8f73668c50', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '090ad02728fa1ace69abfcfdc0b2d31f7b00150d', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '4ade49db31fd0bae7d0efb4c5169aacd9e30b94c', class: "toggle-placeholder" }), index.h(CatFormHint, { key: '3859a49004b782b069673289fc5e8548eded00d5', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -13779,8 +13915,9 @@ const CatToggle = class {
         this.catBlur.emit(event);
     }
     updateResolved() {
-        this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;
+        this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);
     }
+    static get delegatesFocus() { return true; }
     get hostElement() { return index.getElement(this); }
 };
 CatToggle.style = CatToggleStyle0;