@haiilo/catalyst 1.2.4 → 1.3.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-df195301.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-033048ed.js';
 import { l as loglevel, a as CatIconRegistry, C as CatI18nRegistry, N as NotificationsService } from './cat-notification-8bcf6fa2.js';
 import { t as tabbable, f as firstTabbable, c as createFocusTrap } from './first-tabbable-4a00de61.js';
 
@@ -289,7 +289,7 @@ function createEmptyStyleRule(query) {
   }
 }
 
-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 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:var(--cat-opacity-disabled, 0.65)}.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-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:235, 236, 240;--fill:var(--cat-font-color-muted, 105, 118, 135)}.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, 105, 118, 135);--text:var(--cat-font-color-muted, 105, 118, 135)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.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:none}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 105, 118, 135)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.1)}.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-catsecondary-text-active, 0, 0, 0)}.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-catdanger-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.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xs]){margin:-0.25rem -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.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}: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}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}: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}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}: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}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}: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}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}: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-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
+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 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:var(--cat-opacity-disabled, 0.65)}.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-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:235, 236, 240;--fill:var(--cat-font-color-muted, 105, 118, 135)}.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, 105, 118, 135);--text:var(--cat-font-color-muted, 105, 118, 135)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.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, 105, 118, 135)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, none);background-color:rgba(var(--base), 0.05)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, none);background-color:rgba(var(--base), 0.1)}.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-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.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xs]){margin:-0.25rem -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.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}: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}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}: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}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}: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}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}: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}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}: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-context(cat-tabs) .cat-button{background-color:transparent !important}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
 
 const CatButton = class {
   constructor(hostRef) {
@@ -493,7 +493,7 @@ const CatFormHint = props => {
   ]));
 };
 
-const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 0.13s ease, border-color 0.13s ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-disabled .box{background-color:#f8f8fb;border-color:rgb(var(--cat-border-color-dark, 215, 219, 224));stroke:rgb(var(--cat-font-color-muted, 105, 118, 135))}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 0.13s ease, border-color 0.13s ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-disabled .box{background-color:#f2f4f7;border-color:rgb(var(--cat-border-color-dark, 215, 219, 224));stroke:rgb(var(--cat-font-color-muted, 105, 118, 135))}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
 let nextUniqueId$8 = 0;
 const CatCheckbox = class {
@@ -601,7 +601,7 @@ const CatIcon = class {
 };
 CatIcon.style = catIconCss;
 
-const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .input-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
+const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .input-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
 
 let nextUniqueId$7 = 0;
 const CatInput = class {
@@ -809,9 +809,9 @@ const computePosition$1 = async (reference, floating, config) => {
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
   let middlewareData = {};
+  let resetCount = 0;
 
   for (let i = 0; i < middleware.length; i++) {
-
     const {
       name,
       fn
@@ -843,7 +843,9 @@ const computePosition$1 = async (reference, floating, config) => {
       }
     };
 
-    if (reset) {
+    if (reset && resetCount <= 50) {
+      resetCount++;
+
       if (typeof reset === 'object') {
         if (reset.placement) {
           statefulPlacement = reset.placement;
@@ -951,9 +953,7 @@ async function detectOverflow(middlewareArguments, options) {
     } : rects.reference,
     offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
     strategy
-  }) : rects[elementContext]); // positive = overflowing the clipping rect
-  // 0 or negative = within the clipping rect
-
+  }) : rects[elementContext]);
   return {
     top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
     bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
@@ -1118,19 +1118,19 @@ const flip = function (options) {
   };
 };
 
-function convertValueToCoords(placement, rects, value, rtl) {
-  if (rtl === void 0) {
-    rtl = false;
-  }
-
+async function convertValueToCoords(middlewareArguments, value) {
+  const {
+    placement,
+    platform,
+    elements
+  } = middlewareArguments;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getMainAxisFromPlacement(placement) === 'x';
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = typeof value === 'function' ? value({ ...rects,
-    placement
-  }) : value; // eslint-disable-next-line prefer-const
+  const rawValue = typeof value === 'function' ? value(middlewareArguments) : value; // eslint-disable-next-line prefer-const
 
   let {
     mainAxis,
@@ -1176,13 +1176,9 @@ const offset = function (value) {
     async fn(middlewareArguments) {
       const {
         x,
-        y,
-        placement,
-        rects,
-        platform,
-        elements
+        y
       } = middlewareArguments;
-      const diffCoords = convertValueToCoords(placement, rects, value, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+      const diffCoords = await convertValueToCoords(middlewareArguments, value);
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
@@ -1194,7 +1190,7 @@ const offset = function (value) {
 };
 
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === '[object Window]';
+  return value && value.document && value.location && value.alert && value.setInterval;
 }
 function getWindow(node) {
   if (node == null) {
@@ -1209,7 +1205,7 @@ function getWindow(node) {
   return node;
 }
 
-function getComputedStyle$1(element) {
+function getComputedStyle(element) {
   return getWindow(element).getComputedStyle(element);
 }
 
@@ -1217,6 +1213,16 @@ function getNodeName(node) {
   return isWindow(node) ? '' : node ? (node.nodeName || '').toLowerCase() : '';
 }
 
+function getUAString() {
+  const uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+
 function isHTMLElement(value) {
   return value instanceof getWindow(value).HTMLElement;
 }
@@ -1227,6 +1233,11 @@ function isNode(value) {
   return value instanceof getWindow(value).Node;
 }
 function isShadowRoot(node) {
+  // Browsers without `ShadowRoot` support
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+
   const OwnElement = getWindow(node).ShadowRoot;
   return node instanceof OwnElement || node instanceof ShadowRoot;
 }
@@ -1235,36 +1246,46 @@ function isOverflowElement(element) {
   const {
     overflow,
     overflowX,
-    overflowY
-  } = getComputedStyle$1(element);
-  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+    overflowY,
+    display
+  } = getComputedStyle(element);
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
 }
 function isTableElement(element) {
   return ['table', 'td', 'th'].includes(getNodeName(element));
 }
 function isContainingBlock(element) {
   // TODO: Try and use feature detection here instead
-  const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
-  const css = getComputedStyle$1(element); // This is non-exhaustive but covers the most common CSS properties that
+  const isFirefox = /firefox/i.test(getUAString());
+  const css = getComputedStyle(element); // This is non-exhaustive but covers the most common CSS properties that
   // create a containing block.
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
 
-  return css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].includes(css.willChange) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false);
+  return css.transform !== 'none' || css.perspective !== 'none' || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some( // TS 4.1 compat
+  value => {
+    const contain = css.contain;
+    return contain != null ? contain.includes(value) : false;
+  });
 }
 function isLayoutViewport() {
   // Not Safari
-  return !/^((?!chrome|android).)*safari/i.test(navigator.userAgent); // Feature detection for this fails in various ways
+  return !/^((?!chrome|android).)*safari/i.test(getUAString()); // Feature detection for this fails in various ways
   // • Always-visible scrollbar or not
   // • Width of <html>, etc.
   // const vV = win.visualViewport;
   // return vV ? Math.abs(win.innerWidth / vV.scale - vV.width) < 0.5 : true;
 }
+function isLastTraversableNode(node) {
+  return ['html', 'body', '#document'].includes(getNodeName(node));
+}
 
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
 
 function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  var _win$visualViewport$o, _win$visualViewport, _win$visualViewport$o2, _win$visualViewport2;
+
   if (includeScale === void 0) {
     includeScale = false;
   }
@@ -1284,8 +1305,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy) {
 
   const win = isElement(element) ? getWindow(element) : window;
   const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
-  const x = (clientRect.left + (addVisualOffsets ? win.visualViewport.offsetLeft : 0)) / scaleX;
-  const y = (clientRect.top + (addVisualOffsets ? win.visualViewport.offsetTop : 0)) / scaleY;
+  const x = (clientRect.left + (addVisualOffsets ? (_win$visualViewport$o = (_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) != null ? _win$visualViewport$o : 0 : 0)) / scaleX;
+  const y = (clientRect.top + (addVisualOffsets ? (_win$visualViewport$o2 = (_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) != null ? _win$visualViewport$o2 : 0 : 0)) / scaleY;
   const width = clientRect.width / scaleX;
   const height = clientRect.height / scaleY;
   return {
@@ -1305,16 +1326,16 @@ function getDocumentElement(node) {
 }
 
 function getNodeScroll(element) {
-  if (isWindow(element)) {
+  if (isElement(element)) {
     return {
-      scrollLeft: element.pageXOffset,
-      scrollTop: element.pageYOffset
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
     };
   }
 
   return {
-    scrollLeft: element.scrollLeft,
-    scrollTop: element.scrollTop
+    scrollLeft: element.pageXOffset,
+    scrollTop: element.pageYOffset
   };
 }
 
@@ -1332,7 +1353,8 @@ function isScaled(element) {
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
   const documentElement = getDocumentElement(offsetParent);
-  const rect = getBoundingClientRect(element, isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed');
+  const rect = getBoundingClientRect(element, // @ts-ignore - checked above (TS 4.1 compat)
+  isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed');
   let scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -1394,11 +1416,12 @@ function getContainingBlock(element) {
     currentNode = currentNode.host;
   }
 
-  while (isHTMLElement(currentNode) && !['html', 'body'].includes(getNodeName(currentNode))) {
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
     } else {
-      currentNode = currentNode.parentNode;
+      const parent = currentNode.parentNode;
+      currentNode = isShadowRoot(parent) ? parent.host : parent;
     }
   }
 
@@ -1522,7 +1545,7 @@ function getDocumentRect(element) {
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
 
-  if (getComputedStyle$1(body || html).direction === 'rtl') {
+  if (getComputedStyle(body || html).direction === 'rtl') {
     x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
   }
 
@@ -1537,7 +1560,7 @@ function getDocumentRect(element) {
 function getNearestOverflowAncestor(node) {
   const parentNode = getParentNode(node);
 
-  if (['html', 'body', '#document'].includes(getNodeName(parentNode))) {
+  if (isLastTraversableNode(parentNode)) {
     // @ts-ignore assume body is always available
     return node.ownerDocument.body;
   }
@@ -1562,7 +1585,7 @@ function getOverflowAncestors(node, list) {
   const target = isBody ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) : scrollableAncestor;
   const updatedList = list.concat(target);
   return isBody ? updatedList : // @ts-ignore: isBody tells us target will be an HTMLElement here
-  updatedList.concat(getOverflowAncestors(getParentNode(target)));
+  updatedList.concat(getOverflowAncestors(target));
 }
 
 function contains(parent, child) {
@@ -1588,6 +1611,22 @@ function contains(parent, child) {
   return false;
 }
 
+function getNearestParentCapableOfEscapingClipping(element, clippingAncestors) {
+  let currentNode = element;
+
+  while (currentNode && !isLastTraversableNode(currentNode) && // @ts-expect-error
+  !clippingAncestors.includes(currentNode)) {
+    if (isElement(currentNode) && ['absolute', 'fixed'].includes(getComputedStyle(currentNode).position)) {
+      break;
+    }
+
+    const parentNode = getParentNode(currentNode);
+    currentNode = isShadowRoot(parentNode) ? parentNode.host : parentNode;
+  }
+
+  return currentNode;
+}
+
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, false, strategy === 'fixed');
   const top = clientRect.top + element.clientTop;
@@ -1621,15 +1660,25 @@ function getClientRectFromClippingAncestor(element, clippingParent, strategy) {
 
 function getClippingAncestors(element) {
   const clippingAncestors = getOverflowAncestors(element);
-  const canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle$1(element).position);
-  const clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
+  const nearestEscapableParent = getNearestParentCapableOfEscapingClipping(element, clippingAncestors);
+  let clipperElement = null;
+
+  if (nearestEscapableParent && isHTMLElement(nearestEscapableParent)) {
+    const offsetParent = getOffsetParent(nearestEscapableParent);
+
+    if (isOverflowElement(nearestEscapableParent)) {
+      clipperElement = nearestEscapableParent;
+    } else if (isHTMLElement(offsetParent)) {
+      clipperElement = offsetParent;
+    }
+  }
 
   if (!isElement(clipperElement)) {
     return [];
   } // @ts-ignore isElement check ensures we return Array<Element>
 
 
-  return clippingAncestors.filter(clippingAncestors => isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
+  return clippingAncestors.filter(clippingAncestors => clipperElement && isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping ancestors
 
@@ -1682,7 +1731,7 @@ const platform = {
     };
   },
   getClientRects: element => Array.from(element.getClientRects()),
-  isRTL: element => getComputedStyle$1(element).direction === 'rtl'
+  isRTL: element => getComputedStyle(element).direction === 'rtl'
 };
 
 /**
@@ -1696,14 +1745,11 @@ function autoUpdate(reference, floating, update, options) {
 
   const {
     ancestorScroll: _ancestorScroll = true,
-    ancestorResize: _ancestorResize = true,
-    elementResize: _elementResize = true,
+    ancestorResize = true,
+    elementResize = true,
     animationFrame = false
   } = options;
-  let cleanedUp = false;
   const ancestorScroll = _ancestorScroll && !animationFrame;
-  const ancestorResize = _ancestorResize && !animationFrame;
-  const elementResize = _elementResize && !animationFrame;
   const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
     ancestorScroll && ancestor.addEventListener('scroll', update, {
@@ -1714,8 +1760,15 @@ function autoUpdate(reference, floating, update, options) {
   let observer = null;
 
   if (elementResize) {
-    observer = new ResizeObserver(update);
-    isElement(reference) && observer.observe(reference);
+    let initialUpdate = true;
+    observer = new ResizeObserver(() => {
+      if (!initialUpdate) {
+        update();
+      }
+
+      initialUpdate = false;
+    });
+    isElement(reference) && !animationFrame && observer.observe(reference);
     observer.observe(floating);
   }
 
@@ -1727,10 +1780,6 @@ function autoUpdate(reference, floating, update, options) {
   }
 
   function frameLoop() {
-    if (cleanedUp) {
-      return;
-    }
-
     const nextRefRect = getBoundingClientRect(reference);
 
     if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
@@ -1741,10 +1790,10 @@ function autoUpdate(reference, floating, update, options) {
     frameId = requestAnimationFrame(frameLoop);
   }
 
+  update();
   return () => {
     var _observer;
 
-    cleanedUp = true;
     ancestors.forEach(ancestor => {
       ancestorScroll && ancestor.removeEventListener('scroll', update);
       ancestorResize && ancestor.removeEventListener('resize', update);
@@ -1782,10 +1831,18 @@ const CatMenu = class {
      * The placement of the menu.
      */
     this.placement = 'bottom-start';
+    /**
+     * Do not close the menu on outside clicks.
+     */
+    this.noAutoClose = false;
   }
   clickHandler(event) {
+    if (!this.trigger) {
+      this.initTrigger();
+      this.show();
+    }
     // hide menu on button click
-    if (this.content && event.composedPath().includes(this.content)) {
+    if (!this.noAutoClose && this.content && event.composedPath().includes(this.content)) {
       this.close();
     }
   }
@@ -1798,16 +1855,7 @@ const CatMenu = class {
     this.hide();
   }
   componentDidLoad() {
-    var _a, _b, _c, _d, _e;
-    this.trigger = this.findTrigger();
-    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'true');
-    (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
-    (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-controls', this.contentId);
-    (_d = this.content) === null || _d === void 0 ? void 0 : _d.setAttribute('id', this.contentId);
-    if (this.trigger && this.content) {
-      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => this.show());
-      autoUpdate(this.trigger, this.content, () => this.update());
-    }
+    this.initTrigger();
     this.keyListener = event => {
       if (this.content && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
         const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
@@ -1832,6 +1880,21 @@ const CatMenu = class {
   get contentId() {
     return `cat-menu-${this.id}`;
   }
+  initTrigger() {
+    var _a, _b, _c, _d, _e;
+    this.trigger = this.findTrigger();
+    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'true');
+    (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+    (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-controls', this.contentId);
+    (_d = this.content) === null || _d === void 0 ? void 0 : _d.setAttribute('id', this.contentId);
+    if (this.trigger && this.content) {
+      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => {
+        var _a;
+        ((_a = this.trap) === null || _a === void 0 ? void 0 : _a.active) ? this.close() : this.show();
+      });
+      autoUpdate(this.trigger, this.content, () => this.update());
+    }
+  }
   show() {
     var _a;
     if (this.content) {
@@ -1845,8 +1908,10 @@ const CatMenu = class {
             getShadowRoot: true
           },
           allowOutsideClick: true,
-          clickOutsideDeactivates: event => !this.content || !event.composedPath().includes(this.content),
-          onPostDeactivate: () => this.hide()
+          clickOutsideDeactivates: event => !this.noAutoClose &&
+            (!this.content || !event.composedPath().includes(this.content)) &&
+            (!this.trigger || !event.composedPath().includes(this.trigger)),
+          onPostDeactivate: () => this.close()
         });
       this.trap.activate();
     }
@@ -1890,14 +1955,13 @@ const CatMenu = class {
     if (!trigger) {
       loglevel.error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');
     }
-    console.log(trigger);
     return trigger;
   }
 };
 CatMenu.OFFSET = 4;
 CatMenu.style = catMenuCss;
 
-const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden;pointer-events:none}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 0, 129, 148))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) input{border-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .circle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}.is-disabled .circle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}";
+const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden;pointer-events:none}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 0, 129, 148))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) input{border-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .circle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f2f4f7}.is-disabled input:checked{border-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}.is-disabled .circle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}";
 
 let nextUniqueId$5 = 0;
 const CatRadio = class {
@@ -3909,7 +3973,7 @@ var autosizeInput = function (element, options) {
   }
 };
 
-const catSelectCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;line-height:1.25rem;position:relative;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;padding:0.25rem}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}.select-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-s, 0.125rem);white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0%}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem;--cat-avatar-size:1.25rem}.select-option-text{flex:1 1 0%;min-width:0}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-wrap:break-word;word-break:break-word}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+const catSelectCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;line-height:1.25rem;position:relative;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;padding:0.25rem}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}.select-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-s, 0.125rem);white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0%}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem;--cat-avatar-size:1.25rem}.select-option-text{flex:1 1 0%;min-width:0}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-wrap:break-word;word-break:break-word}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
 const INIT_STATE = {
   term: '',
@@ -4142,15 +4206,12 @@ const CatSelect = class {
       .pipe(debounce(term => (term ? timer(this.debounce) : of(0))), distinctUntilChanged(), tap(() => (number$ = this.more$.pipe(filter(() => !this.state.isLoading), scan(n => n + 1, 0), startWith(0)))), tap(() => this.patchState({ options: [] })), switchMap(term => number$.pipe(tap(() => this.patchState({ isLoading: true })), switchMap(number => this.connectorSafe.retrieve(term, number)), tap(page => this.patchState({ isLoading: false, totalElements: page.totalElements })), takeWhile(page => !page.last, true), scan((items, page) => [...items, ...page.content], []))))
       .subscribe(items => {
       var _a;
-      const options = items === null || items === void 0 ? void 0 : items.map(item => ({
-        item: Object.assign(Object.assign({}, item), { id: this.connectorSafe.customId ? this.connectorSafe.customId(item) : item.id }),
-        render: this.connectorSafe.render(item)
-      }));
+      const options = this.toSelectItems(items);
       if (this.tags &&
         this.state.term.trim().length &&
         !options.find(value1 => value1.render.label.toLowerCase() === this.state.term.toLowerCase())) {
         let label;
-        if (this.isAlreadyCreated(this.state.term)) {
+        if (this.isTagSelected(this.state.term)) {
           label = (_a = this.state.selection.find(item => item.render.label.toLowerCase() === this.state.term.toLowerCase())) === null || _a === void 0 ? void 0 : _a.render.label;
         }
         options.unshift({
@@ -4179,19 +4240,14 @@ const CatSelect = class {
   get optionsList() {
     return this.state.options.map((item, i) => {
       const isTagOption = this.tags && item.item.id === `select-${this.id}-option-tag`;
-      const getAriaSelected = () => {
-        if (isTagOption) {
-          return this.isAlreadyCreated(item.render.label) ? 'true' : 'false';
-        }
-        return this.isSelected(item.item.id) ? 'true' : 'false';
-      };
+      const isOptionSelected = this.isSelected(item.item.id) || (this.tags && this.isTagSelected(item.render.label));
       const getLabel = () => {
         if (isTagOption) {
           return item.render.label + this.tagTextHelp;
         }
         return item.render.label;
       };
-      return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": getAriaSelected() }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: !isTagOption ? this.isSelected(item.item.id) : this.isAlreadyCreated(item.render.label), tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
+      return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
           !isTagOption ? this.toggle(item) : this.toggleTag(item);
           e.stopPropagation();
         } }, h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
@@ -4220,9 +4276,9 @@ const CatSelect = class {
     }
     const data$ = ids.length ? this.connectorSafe.resolve(ids).pipe(first()) : of([]);
     data$.pipe(catchError(() => of([]))).subscribe(items => {
-      const selection = items.length ? items === null || items === void 0 ? void 0 : items.map(item => ({ item, render: this.connectorSafe.render(item) })) : [];
+      const selection = items.length ? this.toSelectItems(items) : [];
       if (this.tags) {
-        tags === null || tags === void 0 ? void 0 : tags.forEach((tag, index) => {
+        tags === null || tags === void 0 ? void 0 : tags.filter(tag => !this.isTagSelected(tag, selection)).forEach((tag, index) => {
           const item = { id: `select-${this.id}-tag-${index}`, name: tag };
           selection.push({ item, render: { label: item.name } });
         });
@@ -4234,6 +4290,12 @@ const CatSelect = class {
       });
     });
   }
+  toSelectItems(items) {
+    return items === null || items === void 0 ? void 0 : items.map(item => ({
+      item: Object.assign(Object.assign({}, item), { id: this.connectorSafe.customId ? this.connectorSafe.customId(item) : item.id }),
+      render: this.connectorSafe.render(item)
+    }));
+  }
   show() {
     var _a;
     if (!this.state.isOpen) {
@@ -4284,7 +4346,11 @@ const CatSelect = class {
     }
   }
   toggle(item) {
-    this.isSelected(item.item.id) ? this.deselect(item.item.id) : this.select(item);
+    this.isSelected(item.item.id)
+      ? this.deselect(item.item.id)
+      : this.tags && this.isTagSelected(item.render.label)
+        ? this.removeTag(item.render.label)
+        : this.select(item);
   }
   clear() {
     if (this.input && this.state.term) {
@@ -4411,13 +4477,13 @@ const CatSelect = class {
     }
   }
   get tagTextHelp() {
-    return this.tagHint && !this.isAlreadyCreated(this.state.term) ? ' (' + this.tagHint + ')' : '';
+    return this.tagHint && !this.isTagSelected(this.state.term) ? ' (' + this.tagHint + ')' : '';
   }
-  isAlreadyCreated(term) {
-    return this.state.selection.findIndex(item => item.render.label.toLowerCase() === term.toLowerCase()) >= 0;
+  isTagSelected(term, selection = this.state.selection) {
+    return selection.findIndex(item => item.render.label.toLowerCase() === term.toLowerCase()) >= 0;
   }
   createTag(term) {
-    if (term.trim().length && !this.isAlreadyCreated(term)) {
+    if (term.trim().length && !this.isTagSelected(term)) {
       const value = this.value;
       const tags = value === null || value === void 0 ? void 0 : value.tags;
       const tag = { id: `select-${this.id}-tag-${tags ? tags.length : 0}`, name: term };
@@ -4425,6 +4491,15 @@ const CatSelect = class {
     }
     this.setTransparentCaret();
   }
+  removeTag(label) {
+    if (this.isTagSelected(label)) {
+      const item = this.state.selection.find(item => item.render.label.toLowerCase() === label.toLowerCase());
+      item && this.deselect(item.item.id);
+    }
+  }
+  toggleTag(item) {
+    this.isTagSelected(item.render.label) ? this.removeTag(item.render.label) : this.createTag(item.render.label);
+  }
   initIds() {
     let ids = [];
     if (this.value) {
@@ -4463,15 +4538,6 @@ const CatSelect = class {
     }
     return tags;
   }
-  toggleTag(item) {
-    this.isAlreadyCreated(item.render.label) ? this.removeTag(item.render.label) : this.createTag(item.render.label);
-  }
-  removeTag(label) {
-    if (this.isAlreadyCreated(label)) {
-      const item = this.state.selection.find(item => item.render.label.toLowerCase() === label.toLowerCase());
-      item && this.deselect(item.item.id);
-    }
-  }
   setTransparentCaret() {
     var _a;
     if (!this.multiple) {
@@ -4559,7 +4625,7 @@ const CatSelectTest = class {
         }
       })
     });
-    (_c = this.multipleSelectTagging) === null || _c === void 0 ? void 0 : _c.connect(Object.assign(Object.assign({}, this.countryConnector), { customId: (item) => item.country }));
+    (_c = this.multipleSelectTagging) === null || _c === void 0 ? void 0 : _c.connect(this.countryConnector);
     (_d = this.singleSelect) === null || _d === void 0 ? void 0 : _d.connect({
       resolve: (ids) => {
         console.info(`Resolving data... (${ids.join(', ')})`);
@@ -4594,7 +4660,7 @@ const CatSelectTest = class {
     (_f = this.singleSelectTagging) === null || _f === void 0 ? void 0 : _f.connect(this.countryConnector);
   }
   render() {
-    return (h(Host, { style: { display: 'flex', flexDirection: 'column' } }, h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '1', tag: '' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true })));
+    return (h(Host, { style: { display: 'flex', flexDirection: 'column' } }, h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true })));
   }
   get countryConnector() {
     return {
@@ -6030,7 +6096,7 @@ CatTabs.style = catTabsCss;
 
 var e,t,n="function"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o));},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1));}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event("test");}catch(e){o=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t};}function r(e){var t=n.get(e);t&&t.destroy();}function i(e){var t=n.get(e);t&&t.update();}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return function(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,d=function(){e.clientWidth!==i&&c();},a=function(t){window.removeEventListener("resize",d,!1),e.removeEventListener("input",c,!1),e.removeEventListener("keyup",c,!1),e.removeEventListener("autosize:destroy",a,!1),e.removeEventListener("autosize:update",c,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n];}),n.delete(e);}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",a,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",c,!1),window.addEventListener("resize",d,!1),e.addEventListener("input",c,!1),e.addEventListener("autosize:update",c,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",n.set(e,{destroy:a,update:c}),"vertical"===(t=window.getComputedStyle(e,null)).resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),r="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),c();}function u(t){var n=e.style.width;e.style.width="0px",e.style.width=n,e.style.overflowY=t;}function s(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(e),n=document.documentElement&&document.documentElement.scrollTop;e.style.height="",e.style.height=e.scrollHeight+r+"px",i=e.clientWidth,t.forEach(function(e){e.node.scrollTop=e.scrollTop;}),n&&(document.documentElement.scrollTop=n);}}function c(){s();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r="content-box"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r<t?"hidden"===n.overflowY&&(u("scroll"),s(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight):"hidden"!==n.overflowY&&(u("hidden"),s(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight),l!==r){l=r;var i=o("autosize:resized");try{e.dispatchEvent(i);}catch(e){}}}}(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e});var d=l;
 
-const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);border:none;box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear}textarea:disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);border:none;box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear}textarea:disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
 let nextUniqueId$2 = 0;
 const CatTextarea = class {