@haiilo/catalyst 0.14.1 → 0.15.0

package/dist/esm/{cat-alert_22.entry.js → cat-alert_24.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement, a as H } from './index-62388101.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-17d2bcf3.js';
 import { l as loglevel, a as CatIconRegistry, C as CatI18nRegistry, c as createCommonjsModule, g as getDefaultExportFromCjs, N as NotificationsService } from './cat-notification-5b6a2cd9.js';
 
 const catAlertCss = ":host{display:block;margin-bottom:1rem}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host([hidden]){display:none}.alert{font:inherit;background-color:rgba(var(--bg), 0.1);border-radius:0.5rem;padding:1.25rem;display:flex;flex-direction:row;gap:0.5rem}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}.alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138)}.alert-primary cat-icon{color:#207f8a}.alert-secondary{--bg:105, 118, 135}.alert-secondary cat-icon{color:#697687}.alert-success{--bg:0, 132, 88}.alert-success cat-icon{color:#008458}.alert-warning{--bg:255, 206, 128}.alert-warning cat-icon{color:#ebb663}.alert-danger{--bg:217, 52, 13}.alert-danger cat-icon{color:#d9340d}";
@@ -125,7 +125,7 @@ const CatAvatar = class {
 };
 CatAvatar.style = catAvatarCss;
 
-const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:1rem;min-width:0.75rem;font-size:12px;padding:0 0.25rem}.badge-s{height:1.5rem;min-width:1rem;font-size:12px;padding:0 0.5rem}.badge-m{height:2rem;min-width:1.25rem;font-size:13px;padding:0 0.75rem}.badge-l{height:2.5rem;min-width:1.5rem;font-size:15px;padding:0 1rem}.badge-xl{height:3rem;min-width:1.75rem;font-size:18px;padding:0 1rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-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(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
+const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:1rem;min-width:1rem;font-size:12px;padding:0 0.25rem}.badge-s{height:1.5rem;min-width:1.5rem;font-size:12px;padding:0 0.5rem}.badge-m{height:2rem;min-width:2rem;font-size:13px;padding:0 0.75rem}.badge-l{height:2.5rem;min-width:2.5rem;font-size:15px;padding:0 1rem}.badge-xl{height:3rem;min-width:3rem;font-size:18px;padding:0 1rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-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(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
 
 const CatBadge = class {
   constructor(hostRef) {
@@ -279,7 +279,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: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-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.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-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.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:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text: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;font-weight:var(--cat-font-weight-body, 400)}.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;font-weight:var(--cat-font-weight-body, 400)}.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;font-weight:var(--cat-font-weight-body, 400)}.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;font-weight:var(--cat-font-weight-body, 400)}.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;font-weight:var(--cat-font-weight-body, 400)}.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}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}: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: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:0.65;filter:grayscale(100%)}.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-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.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:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text: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;font-weight:var(--cat-font-weight-body, 400)}.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;font-weight:var(--cat-font-weight-body, 400)}.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;font-weight:var(--cat-font-weight-body, 400)}.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;font-weight:var(--cat-font-weight-body, 400)}.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;font-weight:var(--cat-font-weight-body, 400)}.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}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}: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) {
@@ -483,16 +483,16 @@ 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}: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 #d7dbe0;border-radius: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:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));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}.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))}";
+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}: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 #d7dbe0;border-radius: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:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));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}.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;
+let nextUniqueId$9 = 0;
 const CatCheckbox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-checkbox-${nextUniqueId$8++}`;
+    this.id = `cat-checkbox-${nextUniqueId$9++}`;
     this.hasSlottedLabel = false;
     /**
      * Checked state of the checkbox
@@ -544,14 +544,17 @@ const CatCheckbox = class {
     this.input.focus(options);
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("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, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.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) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onInput(event) {
-    this.value = this.input.value;
+    this.checked = this.input.checked;
+    if (!this.value || typeof this.value === 'boolean') {
+      this.value = this.checked;
+    }
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -588,9 +591,9 @@ 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}: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:0.25rem;box-shadow:0 0 0 1px #d7dbe0;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 #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}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 #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;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}: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:0.25rem;box-shadow:0 0 0 1px #d7dbe0;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 #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}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 #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;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;
+let nextUniqueId$8 = 0;
 const CatInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -598,7 +601,7 @@ const CatInput = class {
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
     this.i18n = CatI18nRegistry.getInstance();
-    this.id = `cat-input-${nextUniqueId$7++}`;
+    this.id = `cat-input-${nextUniqueId$8++}`;
     this.hasSlottedLabel = false;
     /**
      * Whether the input should show a clear button.
@@ -2271,7 +2274,7 @@ var isTabEvent = function isTabEvent(e) {
   return e.key === 'Tab' || e.keyCode === 9;
 };
 
-var delay = function delay(fn) {
+var delay$1 = function delay(fn) {
   return setTimeout(fn, 0);
 }; // Array.find/findIndex() are not supported on IE; this replicates enough
 //  of Array.findIndex() for our needs
@@ -2758,7 +2761,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     activeFocusTraps.activateTrap(trap); // Delay ensures that the focused element doesn't capture the event
     // that caused the focus trap activation.
 
-    state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {
+    state.delayInitialFocusTimer = config.delayInitialFocus ? delay$1(function () {
       tryFocus(getInitialFocusNode());
     }) : tryFocus(getInitialFocusNode());
     doc.addEventListener('focusin', checkFocusIn, true);
@@ -2862,7 +2865,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       var returnFocus = getOption(deactivateOptions, 'returnFocus', 'returnFocusOnDeactivate');
 
       var finishDeactivation = function finishDeactivation() {
-        delay(function () {
+        delay$1(function () {
           if (returnFocus) {
             tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
           }
@@ -2924,13 +2927,13 @@ const firstTabbable = (container) => {
 
 const catMenuCss = ":host{display:contents}:host([hidden]){display:none}.content{padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-width:8rem;max-width:16rem;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}";
 
-let nextUniqueId$6 = 0;
+let nextUniqueId$7 = 0;
 const CatMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catOpen = createEvent(this, "catOpen", 7);
     this.catClose = createEvent(this, "catClose", 7);
-    this.id = nextUniqueId$6++;
+    this.id = nextUniqueId$7++;
     /**
      * The placement of the menu.
      */
@@ -3046,7 +3049,7 @@ const CatModal = class {
         allowOutsideClick: true,
         clickOutsideDeactivates: event => !this.modal || !event.composedPath().includes(this.modal),
         onDeactivate: () => (this.isVisible = false),
-        setReturnFocus: previousActiveElement => previousActiveElement instanceof H
+        setReturnFocus: previousActiveElement => previousActiveElement instanceof HTMLElement
           ? firstTabbable(previousActiveElement)
           : previousActiveElement
       });
@@ -3091,14 +3094,14 @@ CatModal.style = catModalCss;
 
 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}: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, 32, 127, 138));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 #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.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:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
 
-let nextUniqueId$5 = 0;
+let nextUniqueId$6 = 0;
 const CatRadio = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-radio-${++nextUniqueId$5}`;
+    this.id = `cat-radio-${++nextUniqueId$6}`;
     this.hasSlottedLabel = false;
     /**
      * Whether this radio is checked.
@@ -3937,6 +3940,157 @@ class AnonymousSubject extends Subject {
     }
 }
 
+const dateTimestampProvider = {
+    now() {
+        return (dateTimestampProvider.delegate || Date).now();
+    },
+    delegate: undefined,
+};
+
+class Action extends Subscription {
+    constructor(scheduler, work) {
+        super();
+    }
+    schedule(state, delay = 0) {
+        return this;
+    }
+}
+
+const intervalProvider = {
+    setInterval(handler, timeout, ...args) {
+        const { delegate } = intervalProvider;
+        if (delegate === null || delegate === void 0 ? void 0 : delegate.setInterval) {
+            return delegate.setInterval(handler, timeout, ...args);
+        }
+        return setInterval(handler, timeout, ...args);
+    },
+    clearInterval(handle) {
+        const { delegate } = intervalProvider;
+        return ((delegate === null || delegate === void 0 ? void 0 : delegate.clearInterval) || clearInterval)(handle);
+    },
+    delegate: undefined,
+};
+
+class AsyncAction extends Action {
+    constructor(scheduler, work) {
+        super(scheduler, work);
+        this.scheduler = scheduler;
+        this.work = work;
+        this.pending = false;
+    }
+    schedule(state, delay = 0) {
+        if (this.closed) {
+            return this;
+        }
+        this.state = state;
+        const id = this.id;
+        const scheduler = this.scheduler;
+        if (id != null) {
+            this.id = this.recycleAsyncId(scheduler, id, delay);
+        }
+        this.pending = true;
+        this.delay = delay;
+        this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);
+        return this;
+    }
+    requestAsyncId(scheduler, _id, delay = 0) {
+        return intervalProvider.setInterval(scheduler.flush.bind(scheduler, this), delay);
+    }
+    recycleAsyncId(_scheduler, id, delay = 0) {
+        if (delay != null && this.delay === delay && this.pending === false) {
+            return id;
+        }
+        intervalProvider.clearInterval(id);
+        return undefined;
+    }
+    execute(state, delay) {
+        if (this.closed) {
+            return new Error('executing a cancelled action');
+        }
+        this.pending = false;
+        const error = this._execute(state, delay);
+        if (error) {
+            return error;
+        }
+        else if (this.pending === false && this.id != null) {
+            this.id = this.recycleAsyncId(this.scheduler, this.id, null);
+        }
+    }
+    _execute(state, _delay) {
+        let errored = false;
+        let errorValue;
+        try {
+            this.work(state);
+        }
+        catch (e) {
+            errored = true;
+            errorValue = e ? e : new Error('Scheduled action threw falsy error');
+        }
+        if (errored) {
+            this.unsubscribe();
+            return errorValue;
+        }
+    }
+    unsubscribe() {
+        if (!this.closed) {
+            const { id, scheduler } = this;
+            const { actions } = scheduler;
+            this.work = this.state = this.scheduler = null;
+            this.pending = false;
+            arrRemove(actions, this);
+            if (id != null) {
+                this.id = this.recycleAsyncId(scheduler, id, null);
+            }
+            this.delay = null;
+            super.unsubscribe();
+        }
+    }
+}
+
+class Scheduler {
+    constructor(schedulerActionCtor, now = Scheduler.now) {
+        this.schedulerActionCtor = schedulerActionCtor;
+        this.now = now;
+    }
+    schedule(work, delay = 0, state) {
+        return new this.schedulerActionCtor(this, work).schedule(state, delay);
+    }
+}
+Scheduler.now = dateTimestampProvider.now;
+
+class AsyncScheduler extends Scheduler {
+    constructor(SchedulerAction, now = Scheduler.now) {
+        super(SchedulerAction, now);
+        this.actions = [];
+        this._active = false;
+        this._scheduled = undefined;
+    }
+    flush(action) {
+        const { actions } = this;
+        if (this._active) {
+            actions.push(action);
+            return;
+        }
+        let error;
+        this._active = true;
+        do {
+            if ((error = action.execute(action.state, action.delay))) {
+                break;
+            }
+        } while ((action = actions.shift()));
+        this._active = false;
+        if (error) {
+            while ((action = actions.shift())) {
+                action.unsubscribe();
+            }
+            throw error;
+        }
+    }
+}
+
+const asyncScheduler = new AsyncScheduler(AsyncAction);
+const async = asyncScheduler;
+
 const EMPTY = new Observable((subscriber) => subscriber.complete());
 
 function isScheduler(value) {
@@ -4296,6 +4450,21 @@ function from(input, scheduler) {
     return scheduler ? scheduled(input, scheduler) : innerFrom(input);
 }
 
+function of(...args) {
+    const scheduler = popScheduler(args);
+    return from(args, scheduler);
+}
+
+const EmptyError = createErrorClass((_super) => function EmptyErrorImpl() {
+    _super(this);
+    this.name = 'EmptyError';
+    this.message = 'no elements in sequence';
+});
+
+function isValidDate(value) {
+    return value instanceof Date && !isNaN(value);
+}
+
 function map(project, thisArg) {
     return operate((source, subscriber) => {
         let index = 0;
@@ -4382,6 +4551,14 @@ function mergeAll(concurrent = Infinity) {
     return mergeMap(identity, concurrent);
 }
 
+function concatAll() {
+    return mergeAll(1);
+}
+
+function concat(...args) {
+    return concatAll()(from(args, popScheduler(args)));
+}
+
 const nodeEventEmitterMethods = ['addListener', 'removeListener'];
 const eventTargetMethods = ['addEventListener', 'removeEventListener'];
 const jqueryMethods = ['on', 'off'];
@@ -4428,6 +4605,36 @@ function isEventTarget(target) {
     return isFunction(target.addEventListener) && isFunction(target.removeEventListener);
 }
 
+function timer(dueTime = 0, intervalOrScheduler, scheduler = async) {
+    let intervalDuration = -1;
+    if (intervalOrScheduler != null) {
+        if (isScheduler(intervalOrScheduler)) {
+            scheduler = intervalOrScheduler;
+        }
+        else {
+            intervalDuration = intervalOrScheduler;
+        }
+    }
+    return new Observable((subscriber) => {
+        let due = isValidDate(dueTime) ? +dueTime - scheduler.now() : dueTime;
+        if (due < 0) {
+            due = 0;
+        }
+        let n = 0;
+        return scheduler.schedule(function () {
+            if (!subscriber.closed) {
+                subscriber.next(n++);
+                if (0 <= intervalDuration) {
+                    this.schedule(undefined, intervalDuration);
+                }
+                else {
+                    subscriber.complete();
+                }
+            }
+        }, due);
+    });
+}
+
 function merge(...args) {
     const scheduler = popScheduler(args);
     const concurrent = popNumber(args, Infinity);
@@ -4449,6 +4656,135 @@ function filter(predicate, thisArg) {
     });
 }
 
+function catchError(selector) {
+    return operate((source, subscriber) => {
+        let innerSub = null;
+        let syncUnsub = false;
+        let handledResult;
+        innerSub = source.subscribe(createOperatorSubscriber(subscriber, undefined, undefined, (err) => {
+            handledResult = innerFrom(selector(err, catchError(selector)(source)));
+            if (innerSub) {
+                innerSub.unsubscribe();
+                innerSub = null;
+                handledResult.subscribe(subscriber);
+            }
+            else {
+                syncUnsub = true;
+            }
+        }));
+        if (syncUnsub) {
+            innerSub.unsubscribe();
+            innerSub = null;
+            handledResult.subscribe(subscriber);
+        }
+    });
+}
+
+function scanInternals(accumulator, seed, hasSeed, emitOnNext, emitBeforeComplete) {
+    return (source, subscriber) => {
+        let hasState = hasSeed;
+        let state = seed;
+        let index = 0;
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            const i = index++;
+            state = hasState
+                ?
+                    accumulator(state, value, i)
+                :
+                    ((hasState = true), value);
+            emitOnNext && subscriber.next(state);
+        }, emitBeforeComplete &&
+            (() => {
+                hasState && subscriber.next(state);
+                subscriber.complete();
+            })));
+    };
+}
+
+function debounce(durationSelector) {
+    return operate((source, subscriber) => {
+        let hasValue = false;
+        let lastValue = null;
+        let durationSubscriber = null;
+        const emit = () => {
+            durationSubscriber === null || durationSubscriber === void 0 ? void 0 : durationSubscriber.unsubscribe();
+            durationSubscriber = null;
+            if (hasValue) {
+                hasValue = false;
+                const value = lastValue;
+                lastValue = null;
+                subscriber.next(value);
+            }
+        };
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            durationSubscriber === null || durationSubscriber === void 0 ? void 0 : durationSubscriber.unsubscribe();
+            hasValue = true;
+            lastValue = value;
+            durationSubscriber = createOperatorSubscriber(subscriber, emit, noop);
+            innerFrom(durationSelector(value)).subscribe(durationSubscriber);
+        }, () => {
+            emit();
+            subscriber.complete();
+        }, undefined, () => {
+            lastValue = durationSubscriber = null;
+        }));
+    });
+}
+
+function defaultIfEmpty(defaultValue) {
+    return operate((source, subscriber) => {
+        let hasValue = false;
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            hasValue = true;
+            subscriber.next(value);
+        }, () => {
+            if (!hasValue) {
+                subscriber.next(defaultValue);
+            }
+            subscriber.complete();
+        }));
+    });
+}
+
+function take(count) {
+    return count <= 0
+        ?
+            () => EMPTY
+        : operate((source, subscriber) => {
+            let seen = 0;
+            source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+                if (++seen <= count) {
+                    subscriber.next(value);
+                    if (count <= seen) {
+                        subscriber.complete();
+                    }
+                }
+            }));
+        });
+}
+
+function ignoreElements() {
+    return operate((source, subscriber) => {
+        source.subscribe(createOperatorSubscriber(subscriber, noop));
+    });
+}
+
+function mapTo(value) {
+    return map(() => value);
+}
+
+function delayWhen(delayDurationSelector, subscriptionDelay) {
+    if (subscriptionDelay) {
+        return (source) => concat(subscriptionDelay.pipe(take(1), ignoreElements()), source.pipe(delayWhen(delayDurationSelector)));
+    }
+    return mergeMap((value, index) => delayDurationSelector(value, index).pipe(take(1), mapTo(value)));
+}
+
+function delay(due, scheduler = asyncScheduler) {
+    const duration = timer(due, scheduler);
+    return delayWhen(() => duration);
+}
+
 function distinctUntilChanged(comparator, keySelector = identity) {
     comparator = comparator !== null && comparator !== void 0 ? comparator : defaultCompare;
     return operate((source, subscriber) => {
@@ -4468,6 +4804,56 @@ function defaultCompare(a, b) {
     return a === b;
 }
 
+function throwIfEmpty(errorFactory = defaultErrorFactory) {
+    return operate((source, subscriber) => {
+        let hasValue = false;
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            hasValue = true;
+            subscriber.next(value);
+        }, () => (hasValue ? subscriber.complete() : subscriber.error(errorFactory()))));
+    });
+}
+function defaultErrorFactory() {
+    return new EmptyError();
+}
+
+function first(predicate, defaultValue) {
+    const hasDefaultValue = arguments.length >= 2;
+    return (source) => source.pipe(predicate ? filter((v, i) => predicate(v, i, source)) : identity, take(1), hasDefaultValue ? defaultIfEmpty(defaultValue) : throwIfEmpty(() => new EmptyError()));
+}
+
+function scan(accumulator, seed) {
+    return operate(scanInternals(accumulator, seed, arguments.length >= 2, true));
+}
+
+function startWith(...values) {
+    const scheduler = popScheduler(values);
+    return operate((source, subscriber) => {
+        (scheduler ? concat(values, source, scheduler) : concat(values, source)).subscribe(subscriber);
+    });
+}
+
+function switchMap(project, resultSelector) {
+    return operate((source, subscriber) => {
+        let innerSubscriber = null;
+        let index = 0;
+        let isComplete = false;
+        const checkComplete = () => isComplete && !innerSubscriber && subscriber.complete();
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            innerSubscriber === null || innerSubscriber === void 0 ? void 0 : innerSubscriber.unsubscribe();
+            let innerIndex = 0;
+            const outerIndex = index++;
+            innerFrom(project(value, outerIndex)).subscribe((innerSubscriber = createOperatorSubscriber(subscriber, (innerValue) => subscriber.next(resultSelector ? resultSelector(value, innerValue, outerIndex, innerIndex++) : innerValue), () => {
+                innerSubscriber = null;
+                checkComplete();
+            })));
+        }, () => {
+            isComplete = true;
+            checkComplete();
+        }));
+    });
+}
+
 function takeUntil(notifier) {
     return operate((source, subscriber) => {
         innerFrom(notifier).subscribe(createOperatorSubscriber(subscriber, () => subscriber.complete(), noop));
@@ -4475,7 +4861,54 @@ function takeUntil(notifier) {
     });
 }
 
-const catScrollableCss = ":host{overflow:hidden;position:relative;display:flex}:host([hidden]){display:none}.shadow-bottom,.shadow-right,.shadow-left,.shadow-top{position:absolute;transition:box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)}.shadow-top{z-index:2;width:100%;top:0}.shadow-left{z-index:4;height:100%;left:0}.shadow-right{z-index:4;height:100%;right:0}.shadow-bottom{z-index:2;width:100%;bottom:0}.scrollable-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.scrollable-wrapper.cat-scrollable-top .shadow-top,.scrollable-wrapper.cat-scrollable-bottom .shadow-bottom,.scrollable-wrapper.cat-scrollable-left .shadow-left,.scrollable-wrapper.cat-scrollable-right .shadow-right{box-shadow:0 0 4px 1px rgba(16, 29, 48, 0.2)}.scrollable-content{width:100%;overflow:hidden;white-space:nowrap}.scrollable-content.scroll-x{overflow-x:auto}.scrollable-content.scroll-y{overflow-y:auto}.scrollable-content.no-overscroll{overscroll-behavior:contain}";
+function takeWhile(predicate, inclusive = false) {
+    return operate((source, subscriber) => {
+        let index = 0;
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            const result = predicate(value, index++);
+            (result || inclusive) && subscriber.next(value);
+            !result && subscriber.complete();
+        }));
+    });
+}
+
+function tap(observerOrNext, error, complete) {
+    const tapObserver = isFunction(observerOrNext) || error || complete
+        ?
+            { next: observerOrNext, error, complete }
+        : observerOrNext;
+    return tapObserver
+        ? operate((source, subscriber) => {
+            var _a;
+            (_a = tapObserver.subscribe) === null || _a === void 0 ? void 0 : _a.call(tapObserver);
+            let isUnsub = true;
+            source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+                var _a;
+                (_a = tapObserver.next) === null || _a === void 0 ? void 0 : _a.call(tapObserver, value);
+                subscriber.next(value);
+            }, () => {
+                var _a;
+                isUnsub = false;
+                (_a = tapObserver.complete) === null || _a === void 0 ? void 0 : _a.call(tapObserver);
+                subscriber.complete();
+            }, (err) => {
+                var _a;
+                isUnsub = false;
+                (_a = tapObserver.error) === null || _a === void 0 ? void 0 : _a.call(tapObserver, err);
+                subscriber.error(err);
+            }, () => {
+                var _a, _b;
+                if (isUnsub) {
+                    (_a = tapObserver.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(tapObserver);
+                }
+                (_b = tapObserver.finalize) === null || _b === void 0 ? void 0 : _b.call(tapObserver);
+            }));
+        })
+        :
+            identity;
+}
+
+const catScrollableCss = ":host{overflow:hidden;position:relative;display:flex}:host([hidden]){display:none}.shadow-bottom,.shadow-right,.shadow-left,.shadow-top{position:absolute;transition:box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)}.shadow-top{z-index:2;width:100%;top:0}.shadow-left{z-index:4;height:100%;left:0}.shadow-right{z-index:4;height:100%;right:0}.shadow-bottom{z-index:2;width:100%;bottom:0}.scrollable-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.scrollable-wrapper.cat-scrollable-top .shadow-top,.scrollable-wrapper.cat-scrollable-bottom .shadow-bottom,.scrollable-wrapper.cat-scrollable-left .shadow-left,.scrollable-wrapper.cat-scrollable-right .shadow-right{box-shadow:0 0 4px 1px rgba(16, 29, 48, 0.2)}.scrollable-content{width:100%;overflow:hidden}.scrollable-content.scroll-x{overflow-x:auto}.scrollable-content.scroll-y{overflow-y:auto}.scrollable-content.no-overscroll{overscroll-behavior:contain}";
 
 const CatScrollable = class {
   constructor(hostRef) {
@@ -12070,7 +12503,7 @@ const Choices = /*@__PURE__*/getDefaultExportFromCjs(choices);
 
 const catSelectCss = "*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*::before,*::after{box-sizing:border-box}html,body{position:relative;margin:0;width:100%;height:100%}body{font-family:\"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0;margin-bottom:8px}hr{display:block;margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:visited,a:focus{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;appearance:none;margin-bottom:24px}h1,.h1{font-size:32px}h2,.h2{font-size:24px}h3,.h3{font-size:20px}h4,.h4{font-size:18px}h5,.h5{font-size:16px}h6,.h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width: 620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:visited,.section a:focus{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}.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}: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;font-size:inherit;font-weight:inherit;margin:0}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))}.choices{position:relative;overflow:hidden;font-size:16px}.choices.is-focused,.choices:focus{outline:none;box-shadow:0 1px 4px 0 #101d3033}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices [hidden]{display:none !important}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__list--dropdown .choices__list{padding-top:0.5rem}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:12px 16px 12px 40px;border-bottom:1px solid #d7dbe0;margin:0;color:#000;background:#fff url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjUgMC4yNUMzLjk0MzY1IDAuMjUgMC4yNSAzLjk0MzY1IDAuMjUgOC41QzAuMjUgMTMuMDU2MyAzLjk0MzY1IDE2Ljc1IDguNSAxNi43NUMxMC41MjU1IDE2Ljc1IDEyLjM4MDUgMTYuMDIwMSAxMy44MTYzIDE0LjgwODlDMTMuODUyNiAxNC44ODkyIDEzLjkwMzcgMTQuOTY0NCAxMy45Njk3IDE1LjAzMDNMMTYuNDY5NyAxNy41MzAzQzE2Ljc2MjYgMTcuODIzMiAxNy4yMzc0IDE3LjgyMzIgMTcuNTMwMyAxNy41MzAzQzE3LjgyMzIgMTcuMjM3NCAxNy44MjMyIDE2Ljc2MjYgMTcuNTMwMyAxNi40Njk3TDE1LjAzMDMgMTMuOTY5N0MxNC45NjQ0IDEzLjkwMzcgMTQuODg5MiAxMy44NTI2IDE0LjgwODkgMTMuODE2M0MxNi4wMjAxIDEyLjM4MDUgMTYuNzUgMTAuNTI1NSAxNi43NSA4LjVDMTYuNzUgMy45NDM2NSAxMy4wNTYzIDAuMjUgOC41IDAuMjVaTTEuNzUgOC41QzEuNzUgNC43NzIwOCA0Ljc3MjA4IDEuNzUgOC41IDEuNzVDMTIuMjI3OSAxLjc1IDE1LjI1IDQuNzcyMDggMTUuMjUgOC41QzE1LjI1IDEyLjIyNzkgMTIuMjI3OSAxNS4yNSA4LjUgMTUuMjVDNC43NzIwOCAxNS4yNSAxLjc1IDEyLjIyNzkgMS43NSA4LjVaIiBmaWxsPSIjNjk3Njg3Ii8+Cjwvc3ZnPgo=\") no-repeat left 12px center}.choices[data-type*=select-one] .choices__input::before{content:\"abc\"}.choices[data-type*=select-one] .choices__button{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNDY5NjcgNi40Njk2N0M2Ljc2MjU2IDYuMTc2NzggNy4yMzc0NCA2LjE3Njc4IDcuNTMwMzMgNi40Njk2N0wxMCA4LjkzOTM0TDEyLjQ2OTcgNi40Njk2N0MxMi43NjI2IDYuMTc2NzggMTMuMjM3NCA2LjE3Njc4IDEzLjUzMDMgNi40Njk2N0MxMy44MjMyIDYuNzYyNTYgMTMuODIzMiA3LjIzNzQ0IDEzLjUzMDMgNy41MzAzM0wxMS4wNjA3IDEwTDEzLjUzMDMgMTIuNDY5N0MxMy44MjMyIDEyLjc2MjYgMTMuODIzMiAxMy4yMzc0IDEzLjUzMDMgMTMuNTMwM0MxMy4yMzc0IDEzLjgyMzIgMTIuNzYyNiAxMy44MjMyIDEyLjQ2OTcgMTMuNTMwM0wxMCAxMS4wNjA3TDcuNTMwMzMgMTMuNTMwM0M3LjIzNzQ0IDEzLjgyMzIgNi43NjI1NiAxMy44MjMyIDYuNDY5NjcgMTMuNTMwM0M2LjE3Njc4IDEzLjIzNzQgNi4xNzY3OCAxMi43NjI2IDYuNDY5NjcgMTIuNDY5N0w4LjkzOTM0IDEwTDYuNDY5NjcgNy41MzAzM0M2LjE3Njc4IDcuMjM3NDQgNi4xNzY3OCA2Ljc2MjU2IDYuNDY5NjcgNi40Njk2N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMC4yNUM0LjYxNTIyIDAuMjUgMC4yNSA0LjYxNTIyIDAuMjUgMTBDMC4yNSAxNS4zODQ4IDQuNjE1MjIgMTkuNzUgMTAgMTkuNzVDMTUuMzg0OCAxOS43NSAxOS43NSAxNS4zODQ4IDE5Ljc1IDEwQzE5Ljc1IDQuNjE1MjIgMTUuMzg0OCAwLjI1IDEwIDAuMjVaTTEuNzUgMTBDMS43NSA1LjQ0MzY1IDUuNDQzNjUgMS43NSAxMCAxLjc1QzE0LjU1NjMgMS43NSAxOC4yNSA1LjQ0MzY1IDE4LjI1IDEwQzE4LjI1IDE0LjU1NjMgMTQuNTU2MyAxOC4yNSAxMCAxOC4yNUM1LjQ0MzY1IDE4LjI1IDEuNzUgMTQuNTU2MyAxLjc1IDEwWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\");padding:0;background-size:20px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:35px;height:20px;width:20px}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px rgba(105, 118, 135, 0.1)}.choices[data-type*=select-one] .choices__item[data-value=\"\"] .choices__button{display:none}.choices[data-type*=select-one] .choices__item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:35px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text;display:flex;flex-flow:row wrap;align-items:center;padding:4px 60px 4px 4px;gap:4px}.choices[data-type*=select-multiple] .choices__item cat-checkbox,.choices[data-type*=text] .choices__item cat-checkbox{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}.choices[data-type*=select-multiple] .choices__item cat-checkbox::part(label),.choices[data-type*=text] .choices__item cat-checkbox::part(label){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.choices[data-type*=select-multiple] .choices__input,.choices[data-type*=text] .choices__input{min-width:1ch;width:1ch}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;padding-left:24px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuMjc1MzIgMC4zOTEzNzFDMS4wMzEyNCAwLjE0NzI5NCAwLjYzNTUxIDAuMTQ3Mjk0IDAuMzkxNDMyIDAuMzkxMzcxQzAuMTQ3MzU1IDAuNjM1NDQ5IDAuMTQ3MzU1IDEuMDMxMTggMC4zOTE0MzIgMS4yNzUyNUw0LjExNjE2IDQuOTk5OThMMC4zOTE0MzIgOC43MjQ3QzAuMTQ3MzU1IDguOTY4NzggMC4xNDczNTUgOS4zNjQ1MSAwLjM5MTQzMiA5LjYwODU5QzAuNjM1NTEgOS44NTI2NyAxLjAzMTI0IDkuODUyNjcgMS4yNzUzMiA5LjYwODU5TDUuMDAwMDQgNS44ODM4Nkw4LjcyNDc3IDkuNjA4NTlDOC45Njg4NCA5Ljg1MjY3IDkuMzY0NTcgOS44NTI2NyA5LjYwODY1IDkuNjA4NTlDOS44NTI3MyA5LjM2NDUxIDkuODUyNzMgOC45Njg3OCA5LjYwODY1IDguNzI0N0w1Ljg4MzkyIDQuOTk5OThMOS42MDg2NSAxLjI3NTI1QzkuODUyNzMgMS4wMzExOCA5Ljg1MjczIDAuNjM1NDQ5IDkuNjA4NjUgMC4zOTEzNzFDOS4zNjQ1NyAwLjE0NzI5NCA4Ljk2ODg0IDAuMTQ3Mjk0IDguNzI0NzcgMC4zOTEzNzFMNS4wMDAwNCA0LjExNjFMMS4yNzUzMiAwLjM5MTM3MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=\");background-size:10px;width:10px;line-height:1;opacity:0.75;border-radius:0}.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=text] .choices__button:hover,.choices[data-type*=text] .choices__button:focus{opacity:1}.choices[data-type*=select-multiple] cat-button,.choices[data-type*=text] cat-button{position:absolute;top:50%;right:0;margin-top:-20px;margin-right:25px}.choices[data-type*=select-multiple] cat-button::part(button),.choices[data-type*=text] cat-button::part(button){box-shadow:unset;background-color:transparent}.choices[data-type*=select-multiple][dir=rtl] .choices__inner,.choices[data-type*=text][dir=rtl] .choices__inner{padding-right:4px;padding-left:60px}.choices[data-type*=select-multiple][dir=rtl] cat-button,.choices[data-type*=text][dir=rtl] cat-button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-one]::after,.choices[data-type*=select-multiple]::after{content:\"\";width:12px;height:6.5px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40Njk2NyAwLjQ2OTY3QzAuNzYyNTYzIDAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMS41MzAzMyAwLjQ2OTY3TDYgNC45MzkzNEwxMC40Njk3IDAuNDY5NjcxQzEwLjc2MjYgMC4xNzY3NzggMTEuMjM3NCAwLjE3Njc3OCAxMS41MzAzIDAuNDY5NjcxQzExLjgyMzIgMC43NjI1NjQgMTEuODIzMiAxLjIzNzQ0IDExLjUzMDMgMS41MzAzM0w2LjUzMDMzIDYuNTMwMzNDNi4yMzc0NCA2LjgyMzIyIDUuNzYyNTYgNi44MjMyMiA1LjQ2OTY3IDYuNTMwMzNMMC40Njk2NyAxLjUzMDMzQzAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMC43NjI1NjMgMC40Njk2NyAwLjQ2OTY3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\");position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none;transition:transform 0.25s linear}.choices[data-type*=select-one][dir=rtl]::after,.choices[data-type*=select-multiple][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one].is-open::after,.choices[data-type*=select-multiple].is-open::after{transform:rotate(180deg);transition:transform 0.25s linear}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#fff;border:1px solid #d7dbe0;border-radius:4px;font-size:15px;min-height:40px;overflow:hidden}.is-open .choices__inner{border-radius:4px 4px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 4px 4px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:flex;padding:9px 50px 9px 12px;width:100%}[dir=rtl] .choices__list--single{padding-right:12px;padding-left:50px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:contents}.choices__list--multiple .choices__item{font-size:0.9375rem;line-height:1.25rem;font-weight:600;display:inline-flex;align-items:center;justify-content:space-between;border-radius:2px;padding:5px 8px 5px 4px;background-color:rgba(105, 118, 135, 0.1);color:#000;word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:rgba(94, 105, 121, 0.1)}.is-disabled .choices__list--multiple .choices__item{background-color:#aaaaaa}.choices__list--dropdown,.choices__list[aria-expanded]{visibility:hidden;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #d7dbe0;top:100%;margin-top:-1px;overflow:hidden;word-break:break-all;will-change:visibility;box-shadow:0 2px 4px 0 #101d3033;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{visibility:visible}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:0.25rem 0.25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;padding:8px 0;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{font-size:0.9375rem;line-height:1.25rem;font-weight:500;position:relative;padding:10px;min-height:40px}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width: 640px){.choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]),.choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]){padding-right:100px}[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]),[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]){padding-right:10px}.choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable{text-align:right;padding-left:100px}[dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:rgba(105, 118, 135, 0.05)}.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{opacity:0.5}.choices__item{cursor:default;border-left:3px solid transparent;transition:0.25s linear}.choices__item--selectable{cursor:pointer}.choices__item--selected{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}.choices__item--disabled{cursor:not-allowed;user-select:none;opacity:0.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f4f5f6;color:gray}.choices__button{text-indent:-9999px;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus{outline:none}.choices__input{display:inline-block;vertical-align:baseline;background-color:white;font-size:15px;font-family:var(--cat-font-family-body, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";border:0;border-radius:0;max-width:100%;padding:7px 0 4px 2px}.choices__input:focus{outline:0}.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:0.5}.choices__group{padding:8px 16px;height:34px}.choices__group .choices__heading{font-style:normal;font-weight:700;font-size:14px;line-height:18px;padding:unset;border-bottom:0;color:#697687}.choices__group:not(:first-child){border-top:1px solid #f4f5f6;margin-top:8px}.d-flex{display:flex}.align-items-center{align-items:center}.choices-option-icon{width:20px;aspect-ratio:1;border-radius:0.125rem}";
 
-let nextUniqueId$4 = 0;
+let nextUniqueId$5 = 0;
 const getOptionTemplate = (data) => {
   var _a;
   if ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl) {
@@ -12091,7 +12524,7 @@ const CatSelect = class {
     this.catScrolledBottom = createEvent(this, "catScrolledBottom", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
     this.i18n = CatI18nRegistry.getInstance();
-    this.id = `cat-select-${nextUniqueId$4++}`;
+    this.id = `cat-select-${nextUniqueId$5++}`;
     this.resetItemsOnNextValueChange = true;
     this.hasSlottedLabel = false;
     /**
@@ -12400,43 +12833,1819 @@ const CatSelect = class {
 };
 CatSelect.style = catSelectCss;
 
-const catSkeletonCss = ":host{display:flex;flex-direction:column;position:relative;--background:#ebecf0;--highlight:#d7dbe0;--speed:2s}:host([variant=square]),:host([variant=circle]){display:inline-flex}:host([hidden]){display:none}:host([variant=head]){margin-bottom:0.5rem}:host([variant=body]){margin-bottom:1rem}.skeleton{display:block;border-radius:0.25rem;background:var(--background)}.skeleton-circle{border-radius:10rem}.skeleton-xs.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 1.5rem)}.skeleton-xs.skeleton-square,.skeleton-xs.skeleton-circle{width:var(--width, 1.5rem);height:var(--height, 1.5rem)}.skeleton-xs.skeleton-head,.skeleton-xs.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-xs.skeleton-head{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.skeleton-xs.skeleton-body{height:calc(0.75rem - 4px);margin:calc((1rem - 0.75rem + 4px) * 0.5) 0}.skeleton-s.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2rem)}.skeleton-s.skeleton-square,.skeleton-s.skeleton-circle{width:var(--width, 2rem);height:var(--height, 2rem)}.skeleton-s.skeleton-head,.skeleton-s.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-s.skeleton-head{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.skeleton-s.skeleton-body{height:calc(0.875rem - 4px);margin:calc((1rem - 0.875rem + 4px) * 0.5) 0}.skeleton-m.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2.5rem)}.skeleton-m.skeleton-square,.skeleton-m.skeleton-circle{width:var(--width, 2.5rem);height:var(--height, 2.5rem)}.skeleton-m.skeleton-head,.skeleton-m.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-m.skeleton-head{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.skeleton-m.skeleton-body{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.skeleton-l.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3rem)}.skeleton-l.skeleton-square,.skeleton-l.skeleton-circle{width:var(--width, 3rem);height:var(--height, 3rem)}.skeleton-l.skeleton-head,.skeleton-l.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-l.skeleton-head{height:calc(1.5rem - 4px);margin:calc((1.75rem - 1.5rem + 4px) * 0.5) 0}.skeleton-l.skeleton-body{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.skeleton-xl.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3.5rem)}.skeleton-xl.skeleton-square,.skeleton-xl.skeleton-circle{width:var(--width, 3.5rem);height:var(--height, 3.5rem)}.skeleton-xl.skeleton-head,.skeleton-xl.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-xl.skeleton-head{height:calc(1.75rem - 4px);margin:calc((2rem - 1.75rem + 4px) * 0.5) 0}.skeleton-xl.skeleton-body{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.skeleton-sheen{background:linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%) var(--background);background-size:300% 100%;animation:sheen var(--speed) ease-in-out infinite}.skeleton-pulse{position:relative;overflow:hidden}.skeleton-pulse::before{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:var(--highlight);animation:var(--speed) ease-in-out 0.5s infinite normal none running pulse;opacity:0}@keyframes sheen{0%{background-position:right}}@keyframes pulse{50%{opacity:1}}";
+var GHOST_ELEMENT_ID = '__autosizeInputGhost';
 
-const CatSkeleton = class {
+var characterEntities = {
+  ' ': 'nbsp',
+  '<': 'lt',
+  '>': 'gt'
+};
+function mapSpecialCharacterToCharacterEntity (specialCharacter) {
+  return '&' + characterEntities[specialCharacter] + ';'
+}
+function escapeSpecialCharacters (string) {
+  return string.replace(/\s|<|>/g, mapSpecialCharacterToCharacterEntity)
+}
+
+// Create `ghostElement`, with inline styles to hide it and ensure that the text is all
+// on a single line.
+function createGhostElement () {
+  var ghostElement = document.createElement('div');
+  ghostElement.id = GHOST_ELEMENT_ID;
+  ghostElement.style.cssText =
+    'display:inline-block;height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap;';
+  document.body.appendChild(ghostElement);
+  return ghostElement
+}
+
+var autosizeInput = function (element, options) {
+  var elementStyle = window.getComputedStyle(element);
+  // prettier-ignore
+  var elementCssText = 'box-sizing:' + elementStyle.boxSizing +
+                      ';border-left:' + elementStyle.borderLeftWidth + ' solid red' +
+                      ';border-right:' + elementStyle.borderRightWidth + ' solid red' +
+                      ';font-family:' + elementStyle.fontFamily +
+                      ';font-feature-settings:' + elementStyle.fontFeatureSettings +
+                      ';font-kerning:' + elementStyle.fontKerning +
+                      ';font-size:' + elementStyle.fontSize +
+                      ';font-stretch:' + elementStyle.fontStretch +
+                      ';font-style:' + elementStyle.fontStyle +
+                      ';font-variant:' + elementStyle.fontVariant +
+                      ';font-variant-caps:' + elementStyle.fontVariantCaps +
+                      ';font-variant-ligatures:' + elementStyle.fontVariantLigatures +
+                      ';font-variant-numeric:' + elementStyle.fontVariantNumeric +
+                      ';font-weight:' + elementStyle.fontWeight +
+                      ';letter-spacing:' + elementStyle.letterSpacing +
+                      ';margin-left:' + elementStyle.marginLeft +
+                      ';margin-right:' + elementStyle.marginRight +
+                      ';padding-left:' + elementStyle.paddingLeft +
+                      ';padding-right:' + elementStyle.paddingRight +
+                      ';text-indent:' + elementStyle.textIndent +
+                      ';text-transform:' + elementStyle.textTransform;
+
+  // Assigns an appropriate width to the given `element` based on its contents.
+  function setWidth () {
+    var string = element.value || element.getAttribute('placeholder') || '';
+    // Check if the `ghostElement` exists. If no, create it.
+    var ghostElement =
+      document.getElementById(GHOST_ELEMENT_ID) || createGhostElement();
+    // Copy all width-affecting styles to the `ghostElement`.
+    ghostElement.style.cssText += elementCssText;
+    ghostElement.innerHTML = escapeSpecialCharacters(string);
+    // Copy the width of `ghostElement` to `element`.
+    var width = window.getComputedStyle(ghostElement).width;
+    element.style.width = width;
+    return width
+  }
+
+  element.addEventListener('input', setWidth);
+
+  var width = setWidth();
+
+  // Set `min-width` only if `options.minWidth` was set, and only if the initial
+  // width is non-zero.
+  if (options && options.minWidth && width !== '0px') {
+    element.style.minWidth = width;
+  }
+
+  // Return a function for unbinding the event listener and removing the `ghostElement`.
+  return function () {
+    element.removeEventListener('input', setWidth);
+    var ghostElement = document.getElementById(GHOST_ELEMENT_ID);
+    if (ghostElement) {
+      ghostElement.parentNode.removeChild(ghostElement);
+    }
+  }
+};
+
+const catSelectRemoteCss = ".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}:host{display:flex;flex-direction:column;gap:0.5rem;position:relative}: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:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear;padding:4px}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.select-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}.select-input{font:inherit;background:none;border:none;outline:none;padding:6px 8px;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:4px;padding:4px 8px;background:#ebecf0;border-radius:0.125rem;white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis}.pill>cat-button{margin-right:-4px}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:6px}.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: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-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(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;}.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: '',
+  isOpen: false,
+  isLoading: false,
+  isResolving: false,
+  options: [],
+  selection: [],
+  activeOptionIndex: -1,
+  activeSelectionIndex: -1
+};
+let nextUniqueId$4 = 0;
+const CatSelectRemote = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.catOpen = createEvent(this, "catOpen", 7);
+    this.catClose = createEvent(this, "catClose", 7);
+    this.catChange = createEvent(this, "catChange", 7);
+    this.i18n = CatI18nRegistry.getInstance();
+    this.id = `cat-input-${nextUniqueId$4++}`;
+    this.term$ = new Subject();
+    this.more$ = new Subject();
+    this.state = INIT_STATE;
+    this.hasSlottedLabel = false;
     /**
-     * The animation style of the skeleton.
+     * Enable multiple selection.
      */
-    this.effect = 'sheen';
+    this.multiple = false;
     /**
-     * The rendering style of the skeleton.
+     * The debounce time for the search.
      */
-    this.variant = 'rectangle';
+    this.debounce = 250;
     /**
-     * The size of the skeleton. If the variant is set to "head", the size values
-     * "xs" to "xl" translate to the head levels `h1` to `h5`.
+     * The placement of the select.
      */
-    this.size = 'm';
+    this.placement = 'bottom-start';
+    /**
+     * Whether the select is disabled.
+     */
+    this.disabled = false;
+    /**
+     * The label for the select.
+     */
+    this.label = '';
+    /**
+     * The name of the form control. Submitted with the form as part of a name/value pair.
+     */
+    this.name = '';
+    /**
+     * Visually hide the label, but still show it to assistive technologies like screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * A value is required or must be check for the form to be submittable.
+     */
+    this.required = false;
+    /**
+     * Whether the select should show a clear button.
+     */
+    this.clearable = false;
   }
-  render() {
-    return (h(Host, null, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
-        skeleton: true,
-        [`skeleton-${this.effect}`]: Boolean(this.effect),
-        [`skeleton-${this.variant}`]: Boolean(this.variant),
-        [`skeleton-${this.size}`]: Boolean(this.size)
-      } })))));
+  onConnectorChange(connector) {
+    this.reset(connector);
+    this.resolve();
   }
-  get count() {
-    switch (this.variant) {
-      case 'head':
-        return Math.max(1, this.lines || 1);
-      case 'body':
-        return Math.max(1, this.lines || 3);
-      default:
-        return 1;
+  onStateChange(newState, oldState) {
+    var _a;
+    const changed = (key) => newState[key] !== oldState[key];
+    if (changed('activeOptionIndex')) {
+      if (this.state.activeOptionIndex >= 0) {
+        const option = (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.querySelector(`#select-${this.id}-option-${this.state.activeOptionIndex}`);
+        option === null || option === void 0 ? void 0 : option.scrollIntoView({ block: 'nearest' });
+      }
     }
-  }
+    if (changed('selection')) {
+      if (!this.multiple && this.state.selection.length) {
+        this.hide();
+      }
+      const idsSelected = this.state.selection.map(item => item.item.id);
+      if (this.multiple) {
+        this.value = idsSelected;
+      }
+      else {
+        this.value = idsSelected.length ? idsSelected[0] : '';
+      }
+      this.catChange.emit();
+    }
+  }
+  componentDidLoad() {
+    if (this.input) {
+      autosizeInput(this.input);
+    }
+    if (this.trigger && this.dropdown) {
+      autoUpdate(this.trigger, this.dropdown, () => this.update());
+    }
+  }
+  componentWillRender() {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    if (!this.label && !this.hasSlottedLabel) {
+      loglevel.error('[A11y] Missing ARIA label on select', this);
+    }
+  }
+  onBlur() {
+    if (!this.multiple && this.state.activeOptionIndex >= 0) {
+      this.select(this.state.options[this.state.activeOptionIndex]);
+    }
+    this.hide();
+    this.patchState({ activeSelectionIndex: -1 });
+  }
+  onKeyDown(event) {
+    var _a, _b, _c, _d, _e;
+    const isInputFocused = ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.input;
+    if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      this.onArrowKeyDown(event);
+    }
+    else if (['Enter', ' '].includes(event.key)) {
+      if (isInputFocused && this.state.activeOptionIndex >= 0) {
+        event.preventDefault();
+        if (this.multiple) {
+          this.toggle(this.state.options[this.state.activeOptionIndex]);
+        }
+        else {
+          this.select(this.state.options[this.state.activeOptionIndex]);
+        }
+      }
+    }
+    else if (event.key === 'Escape') {
+      this.hide();
+    }
+    else if (event.key === 'Backspace' || event.key === 'Delete') {
+      (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
+      if (!this.multiple || !this.state.term || (((_c = this.input) === null || _c === void 0 ? void 0 : _c.selectionStart) === 0 && event.key === 'Backspace')) {
+        if (this.state.activeSelectionIndex >= 0) {
+          this.deselect(this.state.selection[this.state.activeSelectionIndex].item.id);
+        }
+        else if (this.state.selection.length) {
+          const selectionClone = [...this.state.selection];
+          selectionClone.pop();
+          this.patchState({ selection: selectionClone });
+        }
+      }
+    }
+    else if (event.key === 'Tab') {
+      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.setAttribute('tabindex', '-1');
+      if (this.multiple) {
+        this.patchState({ activeSelectionIndex: -1, activeOptionIndex: -1 });
+      }
+      else if (this.state.activeOptionIndex >= 0) {
+        this.select(this.state.options[this.state.activeOptionIndex]);
+      }
+    }
+    else if (event.key.length === 1) {
+      (_e = this.input) === null || _e === void 0 ? void 0 : _e.focus();
+    }
+  }
+  onKeyUp(event) {
+    var _a, _b, _c, _d, _e;
+    if (event.key === 'Tab' && !event.shiftKey) {
+      ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.trigger && ((_b = this.input) === null || _b === void 0 ? void 0 : _b.focus());
+      if (((_c = this.hostElement.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement) === this.input) {
+        this.show();
+      }
+    }
+    else if (event.key === 'Tab' && event.shiftKey) {
+      const clearButton = (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.querySelector(`#select-clear-btn-${this.id}`);
+      if (clearButton) {
+        ((_e = this.hostElement.shadowRoot) === null || _e === void 0 ? void 0 : _e.activeElement) === clearButton && this.show();
+      }
+      else {
+        this.show();
+      }
+    }
+  }
+  async connect(connector) {
+    var _a;
+    this.connector = connector;
+    let number$;
+    (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    this.subscription = this.term$
+      .asObservable()
+      .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 => this.patchState({
+      options: items === null || items === void 0 ? void 0 : items.map(item => ({
+        item,
+        render: this.connectorSafe.render(item)
+      }))
+    }));
+  }
+  render() {
+    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.t('input.optional'), ")"))))), h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled }, 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, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
+        pill: true,
+        'select-no-open': true,
+        'select-option-active': this.state.activeSelectionIndex === i
+      }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: this.i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))))))) : null, h("input", { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, onInput: () => this.onInput(), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", null), (this.state.selection.length || this.state.term.length) &&
+      !this.disabled &&
+      !this.state.isResolving &&
+      this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: this.i18n.t('select.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? this.i18n.t('select.close') : this.i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), this.hintSection, h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.state.options.map((item, i) => (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": this.isSelected(item.item.id) ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: this.isSelected(item.item.id), tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
+        this.toggle(item);
+        e.stopPropagation();
+      } }, h("span", { slot: "label", class: "select-option" }, h("span", { class: "select-option-label" }, item.render.label), h("span", { class: "select-option-description" }, item.render.description)))) : (h("div", { class: {
+        'select-option-single': true,
+        'select-option-active': this.state.activeOptionIndex === i
+      }, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onClick: () => this.select(item), tabIndex: -1 }, h("span", { class: "select-option-label" }, item.render.label), h("span", { class: "select-option-description" }, item.render.description)))))), this.state.isLoading
+      ? Array.from(Array(CatSelectRemote.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
+      : !this.state.options.length && h("li", { class: "select-option-empty" }, this.i18n.t('select.empty'))))))));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
+  }
+  get connectorSafe() {
+    if (this.connector) {
+      return this.connector;
+    }
+    throw new Error('CatSelectRemoteConnector not set');
+  }
+  resolve() {
+    var _a;
+    this.patchState({ isResolving: true });
+    let ids;
+    if (this.multiple) {
+      ids = this.value;
+    }
+    else {
+      ids = [this.value];
+    }
+    const data$ = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.connectorSafe.resolve(ids).pipe(first()) : of([]);
+    data$.pipe(catchError(() => of([]))).subscribe(items => this.patchState({
+      isResolving: false,
+      selection: items === null || items === void 0 ? void 0 : items.map(item => ({ item, render: this.connectorSafe.render(item) })),
+      term: !this.multiple && items.length ? this.connectorSafe.render(items[0]).label : ''
+    }));
+  }
+  show() {
+    var _a;
+    if (!this.state.isOpen) {
+      this.patchState({ isOpen: true });
+      this.catOpen.emit();
+      this.term$.next(this.state.term);
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.remove('select-input-transparent-caret');
+    }
+  }
+  hide() {
+    if (this.state.isOpen) {
+      this.patchState({ isOpen: false, activeOptionIndex: -1 });
+      this.catClose.emit();
+    }
+  }
+  search(term) {
+    this.patchState({ term, activeOptionIndex: -1, activeSelectionIndex: -1 });
+    this.term$.next(term);
+  }
+  isSelected(id) {
+    return this.state.selection.findIndex(s => s.item.id === id) >= 0;
+  }
+  select(item) {
+    var _a;
+    if (!this.isSelected(item.item.id)) {
+      let newSelection;
+      if (this.multiple) {
+        newSelection = [...this.state.selection, item];
+      }
+      else {
+        newSelection = [item];
+        this.search(item.render.label);
+      }
+      this.patchState({ selection: newSelection });
+    }
+    if (!this.multiple) {
+      this.hide();
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.add('select-input-transparent-caret');
+    }
+  }
+  deselect(id) {
+    if (this.isSelected(id)) {
+      this.patchState({
+        selection: this.state.selection.filter(item => item.item.id !== id),
+        activeSelectionIndex: -1
+      });
+    }
+  }
+  toggle(item) {
+    this.isSelected(item.item.id) ? this.deselect(item.item.id) : this.select(item);
+  }
+  clear() {
+    if (this.input && this.state.term) {
+      this.patchState({ selection: [], options: [], term: '', activeOptionIndex: -1 });
+      this.term$.next('');
+      this.input.value = '';
+    }
+    else {
+      this.patchState({ selection: [] });
+    }
+  }
+  reset(connector) {
+    var _a;
+    this.connector = connector !== null && connector !== void 0 ? connector : this.connector;
+    (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    this.subscription = undefined;
+    this.state = INIT_STATE;
+  }
+  onClick(event) {
+    var _a, _b;
+    const elem = event.target;
+    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
+    (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
+    if (elem === this.trigger ||
+      elem === this.input ||
+      elem.classList.contains('select-btn') ||
+      elem.nodeName === 'SPAN') {
+      this.state.isOpen ? this.hide() : this.show();
+    }
+  }
+  onInput() {
+    var _a;
+    this.search(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || '');
+    this.show();
+  }
+  update() {
+    if (this.trigger && this.dropdown) {
+      computePosition(this.trigger, this.dropdown, {
+        placement: this.placement,
+        middleware: [offset(CatSelectRemote.DROPDOWN_OFFSET)]
+      }).then(({ x, y }) => {
+        if (this.dropdown) {
+          Object.assign(this.dropdown.style, {
+            left: `${x}px`,
+            top: `${y}px`
+          });
+        }
+      });
+    }
+  }
+  patchState(update) {
+    this.state = Object.assign(Object.assign({}, this.state), update);
+  }
+  isPillboxActive() {
+    return this.state.activeSelectionIndex >= 0;
+  }
+  get activeDescendant() {
+    let activeDescendant = undefined;
+    if (this.state.activeOptionIndex >= 0) {
+      activeDescendant = `select-${this.id}-option-${this.state.activeOptionIndex}`;
+    }
+    else if (this.state.activeSelectionIndex >= 0) {
+      activeDescendant = `select-${this.id}-selection-${this.state.activeSelectionIndex}`;
+    }
+    return activeDescendant;
+  }
+  onArrowKeyDown(event) {
+    var _a, _b;
+    let preventDefault = false;
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+    if (event.key === 'ArrowDown') {
+      preventDefault = true;
+      this.state.isOpen
+        ? this.patchState({
+          activeOptionIndex: Math.min(this.state.activeOptionIndex + 1, this.state.options.length - 1),
+          activeSelectionIndex: -1
+        })
+        : this.show();
+    }
+    else if (event.key === 'ArrowUp') {
+      preventDefault = true;
+      this.state.activeOptionIndex >= 0
+        ? this.patchState({
+          activeOptionIndex: Math.max(this.state.activeOptionIndex - 1, -1),
+          activeSelectionIndex: -1
+        })
+        : this.hide();
+    }
+    else if (event.key === 'ArrowLeft') {
+      if (((_b = this.input) === null || _b === void 0 ? void 0 : _b.selectionStart) === 0) {
+        preventDefault = true;
+        let index;
+        this.state.activeSelectionIndex > 0
+          ? (index = Math.max(this.state.activeSelectionIndex - 1, -1))
+          : (index = this.state.selection.length - 1);
+        this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
+      }
+    }
+    else if (event.key === 'ArrowRight') {
+      if (this.state.activeSelectionIndex >= 0) {
+        preventDefault = true;
+        let index = -1;
+        if (this.state.activeSelectionIndex < this.state.selection.length - 1) {
+          index = Math.min(this.state.activeSelectionIndex + 1, this.state.selection.length - 1);
+        }
+        else if (!this.state.term) {
+          index = 0;
+        }
+        this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
+      }
+    }
+    if (preventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "connector": ["onConnectorChange"],
+    "state": ["onStateChange"]
+  }; }
+};
+CatSelectRemote.SKELETON_COUNT = 4;
+CatSelectRemote.DROPDOWN_OFFSET = 4;
+CatSelectRemote.style = catSelectRemoteCss;
+
+const CatSelectRemoteTest = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    var _a, _b;
+    (_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.connect({
+      resolve: (ids) => {
+        console.info(`Resolving data... (${ids.join(', ')})`);
+        return of(ids.map(id => ({
+          id,
+          firstName: 'John',
+          lastName: `Doe (${id})`,
+          desc: 'resolved'
+        }))).pipe(delay(500));
+      },
+      retrieve: (term, page) => {
+        console.info(`Retrieving data... ("${term}", ${page})`);
+        return term === 'no'
+          ? of({ last: true, content: [], totalElements: 0 })
+          : of({
+            last: false,
+            totalElements: 10000,
+            content: Array.from({ length: 10 }, (_, i) => ({
+              id: '' + (i + page * 10),
+              firstName: 'John',
+              lastName: `Doe (${i + page * 10})`,
+              desc: `"${term}": page ${page}`
+            }))
+          }).pipe(delay(500));
+      },
+      render: (user) => ({
+        label: `${user.firstName} ${user.lastName}`,
+        description: user.desc
+      })
+    });
+    (_b = this.singleSelect) === null || _b === void 0 ? void 0 : _b.connect({
+      resolve: (ids) => {
+        console.info(`Resolving data... (${ids.join(', ')})`);
+        return of(ids.map(id => countries.find(value => value.id === id))).pipe(delay(500));
+      },
+      retrieve: (term, page) => {
+        console.info(`Retrieving data... ("${term}", ${page})`);
+        const filter = countries.filter(value => {
+          var _a;
+          return value.country.toLowerCase().indexOf(term.toLowerCase()) === 0 ||
+            ((_a = value.capital) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(term.toLowerCase())) === 0;
+        });
+        const slice = filter.slice(page * 10, page * 10 + 10);
+        return of({
+          last: slice.length < 10,
+          totalElements: filter.length,
+          content: slice
+        }).pipe(delay(500));
+      },
+      render: (country) => ({
+        label: country.country,
+        description: country.capital || 'No capital'
+      })
+    });
+  }
+  render() {
+    return (h(Host, { style: { display: 'flex', gap: '0.5rem', flexDirection: 'column' } }, h("cat-select-remote", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: e => console.log('Multiple', e), multiple: true, clearable: true }, h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select-remote", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), value: '1', placeholder: "Search for a country or capital", onCatChange: e => console.log('Single', e), clearable: true })));
+  }
+};
+const countries = [
+  {
+    id: '0',
+    country: 'Afghanistan Extra extra large extra large extra large extra large extra large extra large extra large extra large extra large extra large extra large extra large extra large extra large ',
+    capital: 'Kabul'
+  },
+  {
+    id: '1',
+    country: 'Albania',
+    capital: 'Tirana'
+  },
+  {
+    id: '2',
+    country: 'Algeria',
+    capital: 'Alger'
+  },
+  {
+    id: '3',
+    country: 'American Samoa',
+    capital: 'Fagatogo'
+  },
+  {
+    id: '4',
+    country: 'Andorra',
+    capital: 'Andorra la Vella'
+  },
+  {
+    id: '5',
+    country: 'Angola',
+    capital: 'Luanda'
+  },
+  {
+    id: '6',
+    country: 'Anguilla',
+    capital: 'The Valley'
+  },
+  {
+    id: '7',
+    country: 'Antarctica'
+  },
+  {
+    id: '8',
+    country: 'Antigua and Barbuda',
+    capital: "Saint John's"
+  },
+  {
+    id: '9',
+    country: 'Argentina',
+    capital: 'Buenos Aires'
+  },
+  {
+    id: '10',
+    country: 'Armenia',
+    capital: 'Yerevan'
+  },
+  {
+    id: '11',
+    country: 'Aruba',
+    capital: 'Oranjestad'
+  },
+  {
+    id: '12',
+    country: 'Australia',
+    capital: 'Canberra'
+  },
+  {
+    id: '13',
+    country: 'Austria',
+    capital: 'Wien'
+  },
+  {
+    id: '14',
+    country: 'Azerbaijan',
+    capital: 'Baku'
+  },
+  {
+    id: '15',
+    country: 'Bahamas',
+    capital: 'Nassau'
+  },
+  {
+    id: '16',
+    country: 'Bahrain',
+    capital: 'al-Manama'
+  },
+  {
+    id: '17',
+    country: 'Bangladesh',
+    capital: 'Dhaka'
+  },
+  {
+    id: '18',
+    country: 'Barbados',
+    capital: 'Bridgetown'
+  },
+  {
+    id: '19',
+    country: 'Belarus',
+    capital: 'Minsk'
+  },
+  {
+    id: '20',
+    country: 'Belgium',
+    capital: 'Bruxelles [Brussel]'
+  },
+  {
+    id: '21',
+    country: 'Belize',
+    capital: 'Belmopan'
+  },
+  {
+    id: '22',
+    country: 'Benin',
+    capital: 'Porto-Novo'
+  },
+  {
+    id: '23',
+    country: 'Bermuda',
+    capital: 'Hamilton'
+  },
+  {
+    id: '24',
+    country: 'Bhutan',
+    capital: 'Thimphu'
+  },
+  {
+    id: '25',
+    country: 'Bolivia',
+    capital: 'La Paz'
+  },
+  {
+    id: '26',
+    country: 'Bosnia and Herzegovina',
+    capital: 'Sarajevo'
+  },
+  {
+    id: '27',
+    country: 'Botswana',
+    capital: 'Gaborone'
+  },
+  {
+    id: '28',
+    country: 'Bouvet Island'
+  },
+  {
+    id: '29',
+    country: 'Brazil',
+    capital: 'Brasília'
+  },
+  {
+    id: '30',
+    country: 'British Indian Ocean Territory'
+  },
+  {
+    id: '31',
+    country: 'Brunei',
+    capital: 'Bandar Seri Begawan'
+  },
+  {
+    id: '32',
+    country: 'Bulgaria',
+    capital: 'Sofia'
+  },
+  {
+    id: '33',
+    country: 'Burkina Faso',
+    capital: 'Ouagadougou'
+  },
+  {
+    id: '34',
+    country: 'Burundi',
+    capital: 'Bujumbura'
+  },
+  {
+    id: '35',
+    country: 'Cambodia',
+    capital: 'Phnom Penh'
+  },
+  {
+    id: '36',
+    country: 'Cameroon',
+    capital: 'Yaound'
+  },
+  {
+    id: '37',
+    country: 'Canada',
+    capital: 'Ottawa'
+  },
+  {
+    id: '38',
+    country: 'Cape Verde',
+    capital: 'Praia'
+  },
+  {
+    id: '39',
+    country: 'Cayman Islands',
+    capital: 'George Town'
+  },
+  {
+    id: '40',
+    country: 'Central African Republic',
+    capital: 'Bangui'
+  },
+  {
+    id: '41',
+    country: 'Chad',
+    capital: "N'Djam"
+  },
+  {
+    id: '42',
+    country: 'Chile',
+    capital: 'Santiago de Chile'
+  },
+  {
+    id: '43',
+    country: 'China',
+    capital: 'Peking'
+  },
+  {
+    id: '44',
+    country: 'Christmas Island',
+    capital: 'Flying Fish Cove'
+  },
+  {
+    id: '45',
+    country: 'Cocos (Keeling) Islands',
+    capital: 'West Island'
+  },
+  {
+    id: '46',
+    country: 'Colombia',
+    capital: 'Santaf'
+  },
+  {
+    id: '47',
+    country: 'Comoros',
+    capital: 'Moroni'
+  },
+  {
+    id: '48',
+    country: 'Congo',
+    capital: 'Brazzaville'
+  },
+  {
+    id: '49',
+    country: 'Cook Islands',
+    capital: 'Avarua'
+  },
+  {
+    id: '50',
+    country: 'Costa Rica',
+    capital: 'San José'
+  },
+  {
+    id: '51',
+    country: 'Croatia',
+    capital: 'Zagreb'
+  },
+  {
+    id: '52',
+    country: 'Cuba',
+    capital: 'La Habana'
+  },
+  {
+    id: '53',
+    country: 'Cyprus',
+    capital: 'Nicosia'
+  },
+  {
+    id: '54',
+    country: 'Czech Republic',
+    capital: 'Praha'
+  },
+  {
+    id: '55',
+    country: 'Denmark',
+    capital: 'Copenhagen'
+  },
+  {
+    id: '56',
+    country: 'Djibouti',
+    capital: 'Djibouti'
+  },
+  {
+    id: '57',
+    country: 'Dominica',
+    capital: 'Roseau'
+  },
+  {
+    id: '58',
+    country: 'Dominican Republic',
+    capital: 'Santo Domingo de Guzm'
+  },
+  {
+    id: '59',
+    country: 'East Timor',
+    capital: 'Dili'
+  },
+  {
+    id: '60',
+    country: 'Ecuador',
+    capital: 'Quito'
+  },
+  {
+    id: '61',
+    country: 'Egypt',
+    capital: 'Cairo'
+  },
+  {
+    id: '62',
+    country: 'El Salvador',
+    capital: 'San Salvador'
+  },
+  {
+    id: '63',
+    country: 'England',
+    capital: 'London'
+  },
+  {
+    id: '64',
+    country: 'Equatorial Guinea',
+    capital: 'Malabo'
+  },
+  {
+    id: '65',
+    country: 'Eritrea',
+    capital: 'Asmara'
+  },
+  {
+    id: '66',
+    country: 'Estonia',
+    capital: 'Tallinn'
+  },
+  {
+    id: '67',
+    country: 'Ethiopia',
+    capital: 'Addis Abeba'
+  },
+  {
+    id: '68',
+    country: 'Falkland Islands',
+    capital: 'Stanley'
+  },
+  {
+    id: '69',
+    country: 'Faroe Islands',
+    capital: 'Tórshavn'
+  },
+  {
+    id: '70',
+    country: 'Fiji Islands',
+    capital: 'Suva'
+  },
+  {
+    id: '71',
+    country: 'Finland',
+    capital: 'Helsinki [Helsingfors]'
+  },
+  {
+    id: '72',
+    country: 'France',
+    capital: 'Paris'
+  },
+  {
+    id: '73',
+    country: 'French Guiana',
+    capital: 'Cayenne'
+  },
+  {
+    id: '74',
+    country: 'French Polynesia',
+    capital: 'Papeete'
+  },
+  {
+    id: '75',
+    country: 'French Southern territories'
+  },
+  {
+    id: '76',
+    country: 'Gabon',
+    capital: 'Libreville'
+  },
+  {
+    id: '77',
+    country: 'Gambia',
+    capital: 'Banjul'
+  },
+  {
+    id: '78',
+    country: 'Georgia',
+    capital: 'Tbilisi'
+  },
+  {
+    id: '79',
+    country: 'Germany',
+    capital: 'Berlin'
+  },
+  {
+    id: '80',
+    country: 'Ghana',
+    capital: 'Accra'
+  },
+  {
+    id: '81',
+    country: 'Gibraltar',
+    capital: 'Gibraltar'
+  },
+  {
+    id: '82',
+    country: 'Greece',
+    capital: 'Athenai'
+  },
+  {
+    id: '83',
+    country: 'Greenland',
+    capital: 'Nuuk'
+  },
+  {
+    id: '84',
+    country: 'Grenada',
+    capital: "Saint George's"
+  },
+  {
+    id: '85',
+    country: 'Guadeloupe',
+    capital: 'Basse-Terre'
+  },
+  {
+    id: '86',
+    country: 'Guam',
+    capital: 'Aga'
+  },
+  {
+    id: '87',
+    country: 'Guatemala',
+    capital: 'Ciudad de Guatemala'
+  },
+  {
+    id: '88',
+    country: 'Guinea',
+    capital: 'Conakry'
+  },
+  {
+    id: '89',
+    country: 'Guinea-Bissau',
+    capital: 'Bissau'
+  },
+  {
+    id: '90',
+    country: 'Guyana',
+    capital: 'Georgetown'
+  },
+  {
+    id: '91',
+    country: 'Haiti',
+    capital: 'Port-au-Prince'
+  },
+  {
+    id: '92',
+    country: 'Heard Island and McDonald Islands'
+  },
+  {
+    id: '93',
+    country: 'Holy See (Vatican City State)',
+    capital: 'Citt'
+  },
+  {
+    id: '94',
+    country: 'Honduras',
+    capital: 'Tegucigalpa'
+  },
+  {
+    id: '95',
+    country: 'Hong Kong',
+    capital: 'Victoria'
+  },
+  {
+    id: '96',
+    country: 'Hungary',
+    capital: 'Budapest'
+  },
+  {
+    id: '97',
+    country: 'Iceland',
+    capital: 'Reykjavík'
+  },
+  {
+    id: '98',
+    country: 'India',
+    capital: 'New Delhi'
+  },
+  {
+    id: '99',
+    country: 'Indonesia',
+    capital: 'Jakarta'
+  },
+  {
+    id: '100',
+    country: 'Iran',
+    capital: 'Tehran'
+  },
+  {
+    id: '101',
+    country: 'Iraq',
+    capital: 'Baghdad'
+  },
+  {
+    id: '102',
+    country: 'Ireland',
+    capital: 'Dublin'
+  },
+  {
+    id: '103',
+    country: 'Israel',
+    capital: 'Jerusalem'
+  },
+  {
+    id: '104',
+    country: 'Italy',
+    capital: 'Roma'
+  },
+  {
+    id: '105',
+    country: 'Ivory Coast',
+    capital: 'Yamoussoukro'
+  },
+  {
+    id: '106',
+    country: 'Jamaica',
+    capital: 'Kingston'
+  },
+  {
+    id: '107',
+    country: 'Japan',
+    capital: 'Tokyo'
+  },
+  {
+    id: '108',
+    country: 'Jordan',
+    capital: 'Amman'
+  },
+  {
+    id: '109',
+    country: 'Kazakhstan',
+    capital: 'Astana'
+  },
+  {
+    id: '110',
+    country: 'Kenya',
+    capital: 'Nairobi'
+  },
+  {
+    id: '111',
+    country: 'Kiribati',
+    capital: 'Bairiki'
+  },
+  {
+    id: '112',
+    country: 'Kuwait',
+    capital: 'Kuwait'
+  },
+  {
+    id: '113',
+    country: 'Kyrgyzstan',
+    capital: 'Bishkek'
+  },
+  {
+    id: '114',
+    country: 'Laos',
+    capital: 'Vientiane'
+  },
+  {
+    id: '115',
+    country: 'Latvia',
+    capital: 'Riga'
+  },
+  {
+    id: '116',
+    country: 'Lebanon',
+    capital: 'Beirut'
+  },
+  {
+    id: '117',
+    country: 'Lesotho',
+    capital: 'Maseru'
+  },
+  {
+    id: '118',
+    country: 'Liberia',
+    capital: 'Monrovia'
+  },
+  {
+    id: '119',
+    country: 'Libyan Arab Jamahiriya',
+    capital: 'Tripoli'
+  },
+  {
+    id: '120',
+    country: 'Liechtenstein',
+    capital: 'Vaduz'
+  },
+  {
+    id: '121',
+    country: 'Lithuania',
+    capital: 'Vilnius'
+  },
+  {
+    id: '122',
+    country: 'Luxembourg',
+    capital: 'Luxembourg [Luxemburg/L'
+  },
+  {
+    id: '123',
+    country: 'Macao',
+    capital: 'Macao'
+  },
+  {
+    id: '124',
+    country: 'North Macedonia',
+    capital: 'Skopje'
+  },
+  {
+    id: '125',
+    country: 'Madagascar',
+    capital: 'Antananarivo'
+  },
+  {
+    id: '126',
+    country: 'Malawi',
+    capital: 'Lilongwe'
+  },
+  {
+    id: '127',
+    country: 'Malaysia',
+    capital: 'Kuala Lumpur'
+  },
+  {
+    id: '128',
+    country: 'Maldives',
+    capital: 'Male'
+  },
+  {
+    id: '129',
+    country: 'Mali',
+    capital: 'Bamako'
+  },
+  {
+    id: '130',
+    country: 'Malta',
+    capital: 'Valletta'
+  },
+  {
+    id: '131',
+    country: 'Marshall Islands',
+    capital: 'Dalap-Uliga-Darrit'
+  },
+  {
+    id: '132',
+    country: 'Martinique',
+    capital: 'Fort-de-France'
+  },
+  {
+    id: '133',
+    country: 'Mauritania',
+    capital: 'Nouakchott'
+  },
+  {
+    id: '134',
+    country: 'Mauritius',
+    capital: 'Port-Louis'
+  },
+  {
+    id: '135',
+    country: 'Mayotte',
+    capital: 'Mamoutzou'
+  },
+  {
+    id: '136',
+    country: 'Mexico',
+    capital: 'Ciudad de M'
+  },
+  {
+    id: '137',
+    country: 'Micronesia, Federated States of',
+    capital: 'Palikir'
+  },
+  {
+    id: '138',
+    country: 'Moldova',
+    capital: 'Chisinau'
+  },
+  {
+    id: '139',
+    country: 'Monaco',
+    capital: 'Monaco-Ville'
+  },
+  {
+    id: '140',
+    country: 'Mongolia',
+    capital: 'Ulan Bator'
+  },
+  {
+    id: '141',
+    country: 'Montenegro',
+    capital: 'Podgorica'
+  },
+  {
+    id: '142',
+    country: 'Montserrat',
+    capital: 'Plymouth'
+  },
+  {
+    id: '143',
+    country: 'Morocco',
+    capital: 'Rabat'
+  },
+  {
+    id: '144',
+    country: 'Mozambique',
+    capital: 'Maputo'
+  },
+  {
+    id: '145',
+    country: 'Myanmar',
+    capital: 'Rangoon (Yangon)'
+  },
+  {
+    id: '146',
+    country: 'Namibia',
+    capital: 'Windhoek'
+  },
+  {
+    id: '147',
+    country: 'Nauru',
+    capital: 'Yaren'
+  },
+  {
+    id: '148',
+    country: 'Nepal',
+    capital: 'Kathmandu'
+  },
+  {
+    id: '149',
+    country: 'Netherlands',
+    capital: 'Amsterdam'
+  },
+  {
+    id: '150',
+    country: 'Netherlands Antilles',
+    capital: 'Willemstad'
+  },
+  {
+    id: '151',
+    country: 'New Caledonia',
+    capital: 'Noum'
+  },
+  {
+    id: '152',
+    country: 'New Zealand',
+    capital: 'Wellington'
+  },
+  {
+    id: '153',
+    country: 'Nicaragua',
+    capital: 'Managua'
+  },
+  {
+    id: '154',
+    country: 'Niger',
+    capital: 'Niamey'
+  },
+  {
+    id: '155',
+    country: 'Nigeria',
+    capital: 'Abuja'
+  },
+  {
+    id: '156',
+    country: 'Niue',
+    capital: 'Alofi'
+  },
+  {
+    id: '157',
+    country: 'Norfolk Island',
+    capital: 'Kingston'
+  },
+  {
+    id: '158',
+    country: 'North Korea',
+    capital: 'Pyongyang'
+  },
+  {
+    id: '159',
+    country: 'Northern Ireland',
+    capital: 'Belfast'
+  },
+  {
+    id: '160',
+    country: 'Northern Mariana Islands',
+    capital: 'Garapan'
+  },
+  {
+    id: '161',
+    country: 'Norway',
+    capital: 'Oslo'
+  },
+  {
+    id: '162',
+    country: 'Oman',
+    capital: 'Masqat'
+  },
+  {
+    id: '163',
+    country: 'Pakistan',
+    capital: 'Islamabad'
+  },
+  {
+    id: '164',
+    country: 'Palau',
+    capital: 'Koror'
+  },
+  {
+    id: '165',
+    country: 'Palestine',
+    capital: 'Gaza'
+  },
+  {
+    id: '166',
+    country: 'Panama',
+    capital: 'Ciudad de Panamá'
+  },
+  {
+    id: '167',
+    country: 'Papua New Guinea',
+    capital: 'Port Moresby'
+  },
+  {
+    id: '168',
+    country: 'Paraguay',
+    capital: 'Asunción'
+  },
+  {
+    id: '169',
+    country: 'Peru',
+    capital: 'Lima'
+  },
+  {
+    id: '170',
+    country: 'Philippines',
+    capital: 'Manila'
+  },
+  {
+    id: '171',
+    country: 'Pitcairn',
+    capital: 'Adamstown'
+  },
+  {
+    id: '172',
+    country: 'Poland',
+    capital: 'Warszawa'
+  },
+  {
+    id: '173',
+    country: 'Portugal',
+    capital: 'Lisboa'
+  },
+  {
+    id: '174',
+    country: 'Puerto Rico',
+    capital: 'San Juan'
+  },
+  {
+    id: '175',
+    country: 'Qatar',
+    capital: 'Doha'
+  },
+  {
+    id: '176',
+    country: 'Reunion',
+    capital: 'Saint-Denis'
+  },
+  {
+    id: '177',
+    country: 'Romania',
+    capital: 'Bucuresti'
+  },
+  {
+    id: '178',
+    country: 'Russian Federation',
+    capital: 'Moscow'
+  },
+  {
+    id: '179',
+    country: 'Rwanda',
+    capital: 'Kigali'
+  },
+  {
+    id: '180',
+    country: 'Saint Helena',
+    capital: 'Jamestown'
+  },
+  {
+    id: '181',
+    country: 'Saint Kitts and Nevis',
+    capital: 'Basseterre'
+  },
+  {
+    id: '182',
+    country: 'Saint Lucia',
+    capital: 'Castries'
+  },
+  {
+    id: '183',
+    country: 'Saint Pierre and Miquelon',
+    capital: 'Saint-Pierre'
+  },
+  {
+    id: '184',
+    country: 'Saint Vincent and the Grenadines',
+    capital: 'Kingstown'
+  },
+  {
+    id: '185',
+    country: 'Samoa',
+    capital: 'Apia'
+  },
+  {
+    id: '186',
+    country: 'San Marino',
+    capital: 'San Marino'
+  },
+  {
+    id: '187',
+    country: 'Sao Tome and Principe',
+    capital: 'São Tomé'
+  },
+  {
+    id: '188',
+    country: 'Saudi Arabia',
+    capital: 'Riyadh'
+  },
+  {
+    id: '189',
+    country: 'Scotland',
+    capital: 'Edinburgh'
+  },
+  {
+    id: '190',
+    country: 'Senegal',
+    capital: 'Dakar'
+  },
+  {
+    id: '191',
+    country: 'Serbia',
+    capital: 'Belgrade'
+  },
+  {
+    id: '192',
+    country: 'Seychelles',
+    capital: 'Victoria'
+  },
+  {
+    id: '193',
+    country: 'Sierra Leone',
+    capital: 'Freetown'
+  },
+  {
+    id: '194',
+    country: 'Singapore',
+    capital: 'Singapore'
+  },
+  {
+    id: '195',
+    country: 'Slovakia',
+    capital: 'Bratislava'
+  },
+  {
+    id: '196',
+    country: 'Slovenia',
+    capital: 'Ljubljana'
+  },
+  {
+    id: '197',
+    country: 'Solomon Islands',
+    capital: 'Honiara'
+  },
+  {
+    id: '198',
+    country: 'Somalia',
+    capital: 'Mogadishu'
+  },
+  {
+    id: '199',
+    country: 'South Africa',
+    capital: 'Pretoria'
+  },
+  {
+    id: '200',
+    country: 'South Georgia and the South Sandwich Islands'
+  },
+  {
+    id: '201',
+    country: 'South Korea',
+    capital: 'Seoul'
+  },
+  {
+    id: '202',
+    country: 'South Sudan',
+    capital: 'Juba'
+  },
+  {
+    id: '203',
+    country: 'Spain',
+    capital: 'Madrid'
+  },
+  {
+    id: '204',
+    country: 'Sri Lanka',
+    capital: 'Colombo, Sri Jayawardenepura Kotte'
+  },
+  {
+    id: '205',
+    country: 'Sudan',
+    capital: 'Khartum'
+  },
+  {
+    id: '206',
+    country: 'Suriname',
+    capital: 'Paramaribo'
+  },
+  {
+    id: '207',
+    country: 'Svalbard and Jan Mayen',
+    capital: 'Longyearbyen'
+  },
+  {
+    id: '208',
+    country: 'Swaziland',
+    capital: 'Mbabane'
+  },
+  {
+    id: '209',
+    country: 'Sweden',
+    capital: 'Stockholm'
+  },
+  {
+    id: '210',
+    country: 'Switzerland',
+    capital: 'Bern'
+  },
+  {
+    id: '211',
+    country: 'Syria',
+    capital: 'Damascus'
+  },
+  {
+    id: '212',
+    country: 'Tajikistan',
+    capital: 'Dushanbe'
+  },
+  {
+    id: '213',
+    country: 'Tanzania',
+    capital: 'Dodoma'
+  },
+  {
+    id: '214',
+    country: 'Thailand',
+    capital: 'Bangkok'
+  },
+  {
+    id: '215',
+    country: 'The Democratic Republic of Congo',
+    capital: 'Kinshasa'
+  },
+  {
+    id: '216',
+    country: 'Togo',
+    capital: 'Lomé'
+  },
+  {
+    id: '217',
+    country: 'Tokelau',
+    capital: 'Fakaofo'
+  },
+  {
+    id: '218',
+    country: 'Tonga',
+    capital: "Nuku'alofa"
+  },
+  {
+    id: '219',
+    country: 'Trinidad and Tobago',
+    capital: 'Port-of-Spain'
+  },
+  {
+    id: '220',
+    country: 'Tunisia',
+    capital: 'Tunis'
+  },
+  {
+    id: '221',
+    country: 'Turkey',
+    capital: 'Ankara'
+  },
+  {
+    id: '222',
+    country: 'Turkmenistan',
+    capital: 'Ashgabat'
+  },
+  {
+    id: '223',
+    country: 'Turks and Caicos Islands',
+    capital: 'Cockburn Town'
+  },
+  {
+    id: '224',
+    country: 'Tuvalu',
+    capital: 'Funafuti'
+  },
+  {
+    id: '225',
+    country: 'Uganda',
+    capital: 'Kampala'
+  },
+  {
+    id: '226',
+    country: 'Ukraine',
+    capital: 'Kyiv'
+  },
+  {
+    id: '227',
+    country: 'United Arab Emirates',
+    capital: 'Abu Dhabi'
+  },
+  {
+    id: '228',
+    country: 'United Kingdom',
+    capital: 'London'
+  },
+  {
+    id: '229',
+    country: 'United States',
+    capital: 'Washington'
+  },
+  {
+    id: '230',
+    country: 'United States Minor Outlying Islands'
+  },
+  {
+    id: '231',
+    country: 'Uruguay',
+    capital: 'Montevideo'
+  },
+  {
+    id: '232',
+    country: 'Uzbekistan',
+    capital: 'Toskent'
+  },
+  {
+    id: '233',
+    country: 'Vanuatu',
+    capital: 'Port-Vila'
+  },
+  {
+    id: '234',
+    country: 'Venezuela',
+    capital: 'Caracas'
+  },
+  {
+    id: '235',
+    country: 'Vietnam',
+    capital: 'Hanoi'
+  },
+  {
+    id: '236',
+    country: 'Virgin Islands, British',
+    capital: 'Road Town'
+  },
+  {
+    id: '237',
+    country: 'Virgin Islands, U.S.',
+    capital: 'Charlotte Amalie'
+  },
+  {
+    id: '238',
+    country: 'Wales',
+    capital: 'Cardiff'
+  },
+  {
+    id: '239',
+    country: 'Wallis and Futuna',
+    capital: 'Mata-Utu'
+  },
+  {
+    id: '240',
+    country: 'Western Sahara',
+    capital: 'El-Aai'
+  },
+  {
+    id: '241',
+    country: 'Yemen',
+    capital: 'Sanaa'
+  },
+  {
+    id: '242',
+    country: 'Zambia',
+    capital: 'Lusaka'
+  },
+  {
+    id: '243',
+    country: 'Zimbabwe',
+    capital: 'Harare'
+  }
+];
+
+const catSkeletonCss = ":host{display:flex;flex-direction:column;position:relative;--background:#ebecf0;--highlight:#d7dbe0;--speed:2s}:host([variant=square]),:host([variant=circle]){display:inline-flex}:host([hidden]){display:none}:host([variant=head]){margin-bottom:0.5rem}:host([variant=body]){margin-bottom:1rem}.skeleton{display:block;border-radius:0.25rem;background:var(--background)}.skeleton-circle{border-radius:10rem}.skeleton-xs.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 1.5rem)}.skeleton-xs.skeleton-square,.skeleton-xs.skeleton-circle{width:var(--width, 1.5rem);height:var(--height, 1.5rem)}.skeleton-xs.skeleton-head,.skeleton-xs.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-xs.skeleton-head{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.skeleton-xs.skeleton-body{height:calc(0.75rem - 4px);margin:calc((1rem - 0.75rem + 4px) * 0.5) 0}.skeleton-s.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2rem)}.skeleton-s.skeleton-square,.skeleton-s.skeleton-circle{width:var(--width, 2rem);height:var(--height, 2rem)}.skeleton-s.skeleton-head,.skeleton-s.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-s.skeleton-head{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.skeleton-s.skeleton-body{height:calc(0.875rem - 4px);margin:calc((1rem - 0.875rem + 4px) * 0.5) 0}.skeleton-m.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2.5rem)}.skeleton-m.skeleton-square,.skeleton-m.skeleton-circle{width:var(--width, 2.5rem);height:var(--height, 2.5rem)}.skeleton-m.skeleton-head,.skeleton-m.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-m.skeleton-head{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.skeleton-m.skeleton-body{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.skeleton-l.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3rem)}.skeleton-l.skeleton-square,.skeleton-l.skeleton-circle{width:var(--width, 3rem);height:var(--height, 3rem)}.skeleton-l.skeleton-head,.skeleton-l.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-l.skeleton-head{height:calc(1.5rem - 4px);margin:calc((1.75rem - 1.5rem + 4px) * 0.5) 0}.skeleton-l.skeleton-body{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.skeleton-xl.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3.5rem)}.skeleton-xl.skeleton-square,.skeleton-xl.skeleton-circle{width:var(--width, 3.5rem);height:var(--height, 3.5rem)}.skeleton-xl.skeleton-head,.skeleton-xl.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-xl.skeleton-head{height:calc(1.75rem - 4px);margin:calc((2rem - 1.75rem + 4px) * 0.5) 0}.skeleton-xl.skeleton-body{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.skeleton-sheen{background:linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%) var(--background);background-size:300% 100%;animation:sheen var(--speed) ease-in-out infinite}.skeleton-pulse{position:relative;overflow:hidden}.skeleton-pulse::before{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:var(--highlight);animation:var(--speed) ease-in-out 0.5s infinite normal none running pulse;opacity:0}@keyframes sheen{0%{background-position:right}}@keyframes pulse{50%{opacity:1}}";
+
+const CatSkeleton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The animation style of the skeleton.
+     */
+    this.effect = 'sheen';
+    /**
+     * The rendering style of the skeleton.
+     */
+    this.variant = 'rectangle';
+    /**
+     * The size of the skeleton. If the variant is set to "head", the size values
+     * "xs" to "xl" translate to the head levels `h1` to `h5`.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h(Host, null, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
+        skeleton: true,
+        [`skeleton-${this.effect}`]: Boolean(this.effect),
+        [`skeleton-${this.variant}`]: Boolean(this.variant),
+        [`skeleton-${this.size}`]: Boolean(this.size)
+      } })))));
+  }
+  get count() {
+    switch (this.variant) {
+      case 'head':
+        return Math.max(1, this.lines || 1);
+      case 'body':
+        return Math.max(1, this.lines || 3);
+      default:
+        return 1;
+    }
+  }
   get style() {
     return this.variant === 'head' || this.variant === 'body'
       ? {
@@ -12772,14 +14981,17 @@ const CatToggle = class {
     this.input.focus(options);
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("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) }), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.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) }), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onInput(event) {
-    this.value = this.input.value;
+    this.checked = this.input.checked;
+    if (!this.value || typeof this.value === 'boolean') {
+      this.value = this.checked;
+    }
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -12920,6 +15132,6 @@ const CatTooltip = class {
 CatTooltip.OFFSET = 4;
 CatTooltip.style = catTooltipCss;
 
-export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatIcon as cat_icon, CatInput as cat_input, CatMenu as cat_menu, CatModal as cat_modal, CatRadio as cat_radio, CatRadioGroup as cat_radio_group, CatScrollable as cat_scrollable, CatSelect as cat_select, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatTab as cat_tab, CatTabs as cat_tabs, CatTextarea as cat_textarea, CatToastDemo as cat_toast_demo, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
+export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatIcon as cat_icon, CatInput as cat_input, CatMenu as cat_menu, CatModal as cat_modal, CatRadio as cat_radio, CatRadioGroup as cat_radio_group, CatScrollable as cat_scrollable, CatSelect as cat_select, CatSelectRemote as cat_select_remote, CatSelectRemoteTest as cat_select_remote_test, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatTab as cat_tab, CatTabs as cat_tabs, CatTextarea as cat_textarea, CatToastDemo as cat_toast_demo, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
 
-//# sourceMappingURL=cat-alert_22.entry.js.map
+//# sourceMappingURL=cat-alert_24.entry.js.map