@haiilo/catalyst 5.3.0 → 5.4.0

package/dist/cjs/{cat-alert_25.cjs.entry.js → cat-alert_27.cjs.entry.js}

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-01312a2e.js');
-const catIconRegistry = require('./cat-icon-registry-671af264.js');
+const index = require('./index-4258b31e.js');
+const catIconRegistry = require('./cat-icon-registry-228164a1.js');
 
 function setAttributeDefault(host, attr, value) {
   if (!host.hostElement.hasAttribute(attr) && value != null) {
@@ -17,11 +17,11 @@ const CatAlert = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.mapIcon = new Map([
-      ['primary', 'star-circle-filled'],
-      ['secondary', 'clock-filled'],
-      ['success', 'check-circle-filled'],
-      ['warning', 'danger-filled'],
-      ['danger', 'cross-circle-filled']
+      ['primary', '$cat:alert-primary'],
+      ['secondary', '$cat:alert-secondary'],
+      ['success', '$cat:alert-success'],
+      ['warning', '$cat:alert-warning'],
+      ['danger', '$cat:alert-danger']
     ]);
     this.mapRole = new Map([
       ['primary', 'status'],
@@ -260,7 +260,7 @@ function createEmptyStyleRule(query) {
   }
 }
 
-const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-group-button-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-group-button-middle{border-radius:0}.cat-group-button-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-group-button:hover{z-index:1}.cat-group-button:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, none);background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, none);background-color:rgba(var(--base), 0.1)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-success{--bg:var(--cat-success-bg-, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}: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;gap: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(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab-active:not(:hover)){--cat-primary-text:transparent}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;border-radius:0;justify-content:left;padding-left:1.25rem;padding-right:1.25rem;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}";
+const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-group-button-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-group-button-middle{border-radius:0}.cat-group-button-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-group-button:hover{z-index:1}.cat-group-button:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, none);background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, none);background-color:rgba(var(--base), 0.1)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-success{--bg:var(--cat-success-bg-, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab-active:not(:hover)){--cat-primary-text:transparent}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;border-radius:0;justify-content:left;padding-left:1.25rem;padding-right:1.25rem;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}";
 
 const CatButton = class {
   constructor(hostRef) {
@@ -283,7 +283,6 @@ const CatButton = class {
     this.url = undefined;
     this.urlTarget = undefined;
     this.icon = undefined;
-    this.iconSrc = undefined;
     this.iconOnly = false;
     this.iconRight = false;
     this.buttonId = undefined;
@@ -398,19 +397,19 @@ const CatButton = class {
     }
   }
   get isIconButton() {
-    return (Boolean(this.icon) || Boolean(this.iconSrc)) && this._iconOnly;
+    return Boolean(this.icon) && this._iconOnly;
   }
   get hasPrefixIcon() {
-    return (Boolean(this.icon) || Boolean(this.iconSrc)) && !this._iconOnly && !this.iconRight;
+    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;
   }
   get hasSuffixIcon() {
-    return (Boolean(this.icon) || Boolean(this.iconSrc)) && !this._iconOnly && this.iconRight;
+    return Boolean(this.icon) && !this._iconOnly && this.iconRight;
   }
   get content() {
     return [
-      this.hasPrefixIcon ? (index.h("cat-icon", { icon: this.icon, iconSrc: this.iconSrc, size: this.iconSize, part: "prefix" })) : null,
-      this.isIconButton ? (index.h("cat-icon", { icon: this.icon, iconSrc: this.iconSrc, size: this.iconSize })) : (index.h("span", { class: "cat-button-content", part: "content" }, index.h("slot", null))),
-      this.hasSuffixIcon ? (index.h("cat-icon", { icon: this.icon, iconSrc: this.iconSrc, size: this.iconSize, part: "suffix" })) : null,
+      this.hasPrefixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null,
+      this.isIconButton ? (index.h("cat-icon", { icon: this.icon, size: this.iconSize })) : (index.h("span", { class: "cat-button-content", part: "content" }, index.h("slot", null))),
+      this.hasSuffixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "suffix" }) : null,
       this.loading ? index.h("cat-spinner", { size: this.spinnerSize }) : null
     ];
   }
@@ -484,7 +483,7 @@ const CatFormHint = props => {
     ]));
 };
 
-const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 0.13s ease, border-color 0.13s ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-disabled .box{background-color:#f2f4f7;border-color:rgb(var(--cat-border-color-dark, 215, 219, 224));stroke:rgb(var(--cat-font-color-muted, 81, 92, 108))}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
+const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;min-width:0}.input-hint,::slotted([slot=hint]){color:rgb(var(--cat-font-color-muted, 81, 92, 108));line-height:1.5;flex:1 1 auto;min-width: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-placeholder{width:calc(1.25rem + 1px)}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 0.13s ease, border-color 0.13s ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-disabled .box{background-color:#f2f4f7;border-color:rgb(var(--cat-border-color-dark, 215, 219, 224));stroke:rgb(var(--cat-font-color-muted, 81, 92, 108))}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
 
 let nextUniqueId$8 = 0;
 const CatCheckbox = class {
@@ -525,7 +524,2995 @@ const CatCheckbox = class {
     }
   }
   /**
-   * Programmatically move focus to the checkbox. Use this method instead of
+   * Programmatically move focus to the checkbox. Use this method instead of
+   * `input.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  async doFocus(options) {
+    this.input.focus(options);
+  }
+  /**
+   * Programmatically remove focus from the checkbox. Use this method instead of
+   * `input.blur()`.
+   */
+  async doBlur() {
+    this.input.blur();
+  }
+  /**
+   * Programmatically simulate a click on the checkbox.
+   */
+  async doClick() {
+    this.input.click();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, index.h("input", Object.assign({}, this.nativeAttributes, { 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) })), index.h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, index.h("svg", { class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { points: "1.5 5 10.5 5" }))), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (index.h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { class: "box-placeholder" }), index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
+  }
+  onInput(event) {
+    this.checked = this.input.checked;
+    if (!this.value || typeof this.value === 'boolean') {
+      this.value = this.checked;
+    }
+    this.catChange.emit(event);
+  }
+  onFocus(event) {
+    this.catFocus.emit(event);
+  }
+  onBlur(event) {
+    this.catBlur.emit(event);
+  }
+  get hostElement() { return index.getElement(this); }
+};
+CatCheckbox.style = catCheckboxCss;
+
+var dayjs_min = catIconRegistry.createCommonjsModule(function (module, exports) {
+!function(t,e){module.exports=e();}(catIconRegistry.commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof _},S=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(h){case c:return r?l(1,0):l(31,11);case f:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),l=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,l=this;r=Number(r);var $=O.p(h),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===f)return this.set(f,this.$M+r);if($===c)return this.set(c,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},$={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||$[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,v=this-M,g=O.m(this,M);return g=($={},$[c]=g/12,$[f]=g,$[h]=g/3,$[o]=(v-m)/6048e5,$[a]=(v-m)/864e5,$[u]=v/n,$[s]=v/e,$[i]=v/t,$)[y]||v,l?g:O.a(g)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),T=_.prototype;return w.prototype=T,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){T[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w}));
+});
+
+var isoWeek = catIconRegistry.createCommonjsModule(function (module, exports) {
+!function(e,t){module.exports=t();}(catIconRegistry.commonjsGlobal,(function(){var e="day";return function(t,i,s){var a=function(t){return t.add(4-t.isoWeekday(),e)},d=i.prototype;d.isoWeekYear=function(){return a(this).year()},d.isoWeek=function(t){if(!this.$utils().u(t))return this.add(7*(t-this.isoWeek()),e);var i,d,n,o,r=a(this),u=(i=this.isoWeekYear(),d=this.$u,n=(d?s.utc:s)().year(i).startOf("year"),o=4-n.isoWeekday(),n.isoWeekday()>4&&(o+=7),n.add(o,e));return r.diff(u,"week")+1},d.isoWeekday=function(e){return this.$utils().u(e)?this.day()||7:this.day(this.day()%7?e:e-7)};var n=d.startOf;d.startOf=function(e,t){var i=this.$utils(),s=!!i.u(t)||t;return "isoweek"===i.p(e)?s?this.date(this.date()-(this.isoWeekday()-1)).startOf("day"):this.date(this.date()-1-(this.isoWeekday()-1)+7).endOf("day"):n.bind(this)(e,t)};}}));
+});
+
+var utc = catIconRegistry.createCommonjsModule(function (module, exports) {
+!function(t,i){module.exports=i();}(catIconRegistry.commonjsGlobal,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t);};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else r.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r;}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}}));
+});
+
+dayjs_min.extend(isoWeek);
+dayjs_min.extend(utc);
+const today$1 = () => dayjs_min().utc().startOf('day').toDate();
+
+function lastItemOf(arr) {
+  return arr[arr.length - 1];
+}
+
+// push only the items not included in the array
+function pushUnique(arr, ...items) {
+  items.forEach((item) => {
+    if (arr.includes(item)) {
+      return;
+    }
+    arr.push(item);
+  });
+  return arr;
+}
+
+function stringToArray(str, separator) {
+  // convert empty string to an empty array
+  return str ? str.split(separator) : [];
+}
+
+function isInRange(testVal, min, max) {
+  const minOK = min === undefined || testVal >= min;
+  const maxOK = max === undefined || testVal <= max;
+  return minOK && maxOK;
+}
+
+function limitToRange(val, min, max) {
+  if (val < min) {
+    return min;
+  }
+  if (val > max) {
+    return max;
+  }
+  return val;
+}
+
+function createTagRepeat(tagName, repeat, attributes = {}, index = 0, html = '') {
+  const openTagSrc = Object.keys(attributes).reduce((src, attr) => {
+    let val = attributes[attr];
+    if (typeof val === 'function') {
+      val = val(index);
+    }
+    return `${src} ${attr}="${val}"`;
+  }, tagName);
+  html += `<${openTagSrc}></${tagName}>`;
+
+  const next = index + 1;
+  return next < repeat
+    ? createTagRepeat(tagName, repeat, attributes, next, html)
+    : html;
+}
+
+// Remove the spacing surrounding tags for HTML parser not to create text nodes
+// before/after elements
+function optimizeTemplateHTML(html) {
+  return html.replace(/>\s+/g, '>').replace(/\s+</, '<');
+}
+
+function stripTime(timeValue) {
+  return new Date(timeValue).setHours(0, 0, 0, 0);
+}
+
+function today() {
+  return new Date().setHours(0, 0, 0, 0);
+}
+
+// Get the time value of the start of given date or year, month and day
+function dateValue(...args) {
+  switch (args.length) {
+    case 0:
+      return today();
+    case 1:
+      return stripTime(args[0]);
+  }
+
+  // use setFullYear() to keep 2-digit year from being mapped to 1900-1999
+  const newDate = new Date(0);
+  newDate.setFullYear(...args);
+  return newDate.setHours(0, 0, 0, 0);
+}
+
+function addDays(date, amount) {
+  const newDate = new Date(date);
+  return newDate.setDate(newDate.getDate() + amount);
+}
+
+function addWeeks(date, amount) {
+  return addDays(date, amount * 7);
+}
+
+function addMonths(date, amount) {
+  // If the day of the date is not in the new month, the last day of the new
+  // month will be returned. e.g. Jan 31 + 1 month → Feb 28 (not Mar 03)
+  const newDate = new Date(date);
+  const monthsToSet = newDate.getMonth() + amount;
+  let expectedMonth = monthsToSet % 12;
+  if (expectedMonth < 0) {
+    expectedMonth += 12;
+  }
+
+  const time = newDate.setMonth(monthsToSet);
+  return newDate.getMonth() !== expectedMonth ? newDate.setDate(0) : time;
+}
+
+function addYears(date, amount) {
+  // If the date is Feb 29 and the new year is not a leap year, Feb 28 of the
+  // new year will be returned.
+  const newDate = new Date(date);
+  const expectedMonth = newDate.getMonth();
+  const time = newDate.setFullYear(newDate.getFullYear() + amount);
+  return expectedMonth === 1 && newDate.getMonth() === 2 ? newDate.setDate(0) : time;
+}
+
+// Calculate the distance bettwen 2 days of the week
+function dayDiff(day, from) {
+  return (day - from + 7) % 7;
+}
+
+// Get the date of the specified day of the week of given base date
+function dayOfTheWeekOf(baseDate, dayOfWeek, weekStart = 0) {
+  const baseDay = new Date(baseDate).getDay();
+  return addDays(baseDate, dayDiff(dayOfWeek, weekStart) - dayDiff(baseDay, weekStart));
+}
+
+function calcWeekNum(dayOfTheWeek, sameDayOfFirstWeek) {
+  return Math.round((dayOfTheWeek - sameDayOfFirstWeek) / 604800000) + 1;
+}
+
+// Get the ISO week number of a date
+function getIsoWeek(date) {
+  // - Start of ISO week is Monday
+  // - Use Thursday for culculation because the first Thursday of ISO week is
+  //   always in January
+  const thuOfTheWeek = dayOfTheWeekOf(date, 4, 1);
+  // - Week 1 in ISO week is the week including Jan 04
+  // - Use the Thu of given date's week (instead of given date itself) to
+  //   calculate week 1 of the year so that Jan 01 - 03 won't be miscalculated
+  //   as week 0 when Jan 04 is Mon - Wed
+  const firstThu = dayOfTheWeekOf(new Date(thuOfTheWeek).setMonth(0, 4), 4, 1);
+  // return Math.round((thuOfTheWeek - firstThu) / 604800000) + 1;
+  return calcWeekNum(thuOfTheWeek, firstThu);
+}
+
+// Calculate week number in traditional week number system
+// @see https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems
+function calcTraditionalWeekNumber(date, weekStart) {
+  // - Week 1 of traditional week is the week including the Jan 01
+  // - Use Jan 01 of given date's year to calculate the start of week 1
+  const startOfFirstWeek = dayOfTheWeekOf(new Date(date).setMonth(0, 1), weekStart, weekStart);
+  const startOfTheWeek = dayOfTheWeekOf(date, weekStart, weekStart);
+  const weekNum = calcWeekNum(startOfTheWeek, startOfFirstWeek);
+  if (weekNum < 53) {
+    return weekNum;
+  }
+  // If the 53rd week includes Jan 01, it's actually next year's week 1
+  const weekOneOfNextYear = dayOfTheWeekOf(new Date(date).setDate(32), weekStart, weekStart);
+  return startOfTheWeek === weekOneOfNextYear ? 1 : weekNum;
+}
+
+// Get the Western traditional week number of a date
+function getWesternTradWeek(date) {
+  // Start of Western traditionl week is Sunday
+  return calcTraditionalWeekNumber(date, 0);
+}
+
+// Get the Middle Eastern week number of a date
+function getMidEasternWeek(date) {
+  // Start of Middle Eastern week is Saturday
+  return calcTraditionalWeekNumber(date, 6);
+}
+
+// Get the start year of the period of years that includes given date
+// years: length of the year period
+function startOfYearPeriod(date, years) {
+  /* @see https://en.wikipedia.org/wiki/Year_zero#ISO_8601 */
+  const year = new Date(date).getFullYear();
+  return Math.floor(year / years) * years;
+}
+
+// Convert date to the first/last date of the month/year of the date
+function regularizeDate(date, timeSpan, useLastDate) {
+  if (timeSpan !== 1 && timeSpan !== 2) {
+    return date;
+  }
+  const newDate = new Date(date);
+  if (timeSpan === 1) {
+    useLastDate
+      ? newDate.setMonth(newDate.getMonth() + 1, 0)
+      : newDate.setDate(1);
+  } else {
+    useLastDate
+      ? newDate.setFullYear(newDate.getFullYear() + 1, 0, 0)
+      : newDate.setMonth(0, 1);
+  }
+  return newDate.setHours(0, 0, 0, 0);
+}
+
+// pattern for format parts
+const reFormatTokens = /dd?|DD?|mm?|MM?|yy?(?:yy)?/;
+// pattern for non date parts
+const reNonDateParts = /[\s!-/:-@[-`{-~年月日]+/;
+// cache for persed formats
+let knownFormats = {};
+// parse funtions for date parts
+const parseFns = {
+  y(date, year) {
+    return new Date(date).setFullYear(parseInt(year, 10));
+  },
+  m(date, month, locale) {
+    const newDate = new Date(date);
+    let monthIndex = parseInt(month, 10) - 1;
+
+    if (isNaN(monthIndex)) {
+      if (!month) {
+        return NaN;
+      }
+
+      const monthName = month.toLowerCase();
+      const compareNames = name => name.toLowerCase().startsWith(monthName);
+      // compare with both short and full names because some locales have periods
+      // in the short names (not equal to the first X letters of the full names)
+      monthIndex = locale.monthsShort.findIndex(compareNames);
+      if (monthIndex < 0) {
+        monthIndex = locale.months.findIndex(compareNames);
+      }
+      if (monthIndex < 0) {
+        return NaN;
+      }
+    }
+
+    newDate.setMonth(monthIndex);
+    return newDate.getMonth() !== normalizeMonth(monthIndex)
+      ? newDate.setDate(0)
+      : newDate.getTime();
+  },
+  d(date, day) {
+    return new Date(date).setDate(parseInt(day, 10));
+  },
+};
+// format functions for date parts
+const formatFns = {
+  d(date) {
+    return date.getDate();
+  },
+  dd(date) {
+    return padZero(date.getDate(), 2);
+  },
+  D(date, locale) {
+    return locale.daysShort[date.getDay()];
+  },
+  DD(date, locale) {
+    return locale.days[date.getDay()];
+  },
+  m(date) {
+    return date.getMonth() + 1;
+  },
+  mm(date) {
+    return padZero(date.getMonth() + 1, 2);
+  },
+  M(date, locale) {
+    return locale.monthsShort[date.getMonth()];
+  },
+  MM(date, locale) {
+    return locale.months[date.getMonth()];
+  },
+  y(date) {
+    return date.getFullYear();
+  },
+  yy(date) {
+    return padZero(date.getFullYear(), 2).slice(-2);
+  },
+  yyyy(date) {
+    return padZero(date.getFullYear(), 4);
+  },
+};
+
+// get month index in normal range (0 - 11) from any number
+function normalizeMonth(monthIndex) {
+  return monthIndex > -1 ? monthIndex % 12 : normalizeMonth(monthIndex + 12);
+}
+
+function padZero(num, length) {
+  return num.toString().padStart(length, '0');
+}
+
+function parseFormatString(format) {
+  if (typeof format !== 'string') {
+    throw new Error("Invalid date format.");
+  }
+  if (format in knownFormats) {
+    return knownFormats[format];
+  }
+
+  // sprit the format string into parts and seprators
+  const separators = format.split(reFormatTokens);
+  const parts = format.match(new RegExp(reFormatTokens, 'g'));
+  if (separators.length === 0 || !parts) {
+    throw new Error("Invalid date format.");
+  }
+
+  // collect format functions used in the format
+  const partFormatters = parts.map(token => formatFns[token]);
+
+  // collect parse function keys used in the format
+  // iterate over parseFns' keys in order to keep the order of the keys.
+  const partParserKeys = Object.keys(parseFns).reduce((keys, key) => {
+    const token = parts.find(part => part[0] !== 'D' && part[0].toLowerCase() === key);
+    if (token) {
+      keys.push(key);
+    }
+    return keys;
+  }, []);
+
+  return knownFormats[format] = {
+    parser(dateStr, locale) {
+      const dateParts = dateStr.split(reNonDateParts).reduce((dtParts, part, index) => {
+        if (part.length > 0 && parts[index]) {
+          const token = parts[index][0];
+          if (token === 'M') {
+            dtParts.m = part;
+          } else if (token !== 'D') {
+            dtParts[token] = part;
+          }
+        }
+        return dtParts;
+      }, {});
+
+      // iterate over partParserkeys so that the parsing is made in the oder
+      // of year, month and day to prevent the day parser from correcting last
+      // day of month wrongly
+      return partParserKeys.reduce((origDate, key) => {
+        const newDate = parseFns[key](origDate, dateParts[key], locale);
+        // ingnore the part failed to parse
+        return isNaN(newDate) ? origDate : newDate;
+      }, today());
+    },
+    formatter(date, locale) {
+      let dateStr = partFormatters.reduce((str, fn, index) => {
+        return str += `${separators[index]}${fn(date, locale)}`;
+      }, '');
+      // separators' length is always parts' length + 1,
+      return dateStr += lastItemOf(separators);
+    },
+  };
+}
+
+function parseDate(dateStr, format, locale) {
+  if (dateStr instanceof Date || typeof dateStr === 'number') {
+    const date = stripTime(dateStr);
+    return isNaN(date) ? undefined : date;
+  }
+  if (!dateStr) {
+    return undefined;
+  }
+  if (dateStr === 'today') {
+    return today();
+  }
+
+  if (format && format.toValue) {
+    const date = format.toValue(dateStr, format, locale);
+    return isNaN(date) ? undefined : stripTime(date);
+  }
+
+  return parseFormatString(format).parser(dateStr, locale);
+}
+
+function formatDate(date, format, locale) {
+  if (isNaN(date) || (!date && date !== 0)) {
+    return '';
+  }
+
+  const dateObj = typeof date === 'number' ? new Date(date) : date;
+
+  if (format.toDisplay) {
+    return format.toDisplay(dateObj, format, locale);
+  }
+
+  return parseFormatString(format).formatter(dateObj, locale);
+}
+
+const range = document.createRange();
+
+function parseHTML(html) {
+  return range.createContextualFragment(html);
+}
+
+function getParent(el) {
+  return el.parentElement
+    || (el.parentNode instanceof ShadowRoot ? el.parentNode.host : undefined);
+}
+
+function isActiveElement(el) {
+  return el.getRootNode().activeElement === el;
+}
+
+function hideElement(el) {
+  if (el.style.display === 'none') {
+    return;
+  }
+  // back up the existing display setting in data-style-display
+  if (el.style.display) {
+    el.dataset.styleDisplay = el.style.display;
+  }
+  el.style.display = 'none';
+}
+
+function showElement(el) {
+  if (el.style.display !== 'none') {
+    return;
+  }
+  if (el.dataset.styleDisplay) {
+    // restore backed-up dispay property
+    el.style.display = el.dataset.styleDisplay;
+    delete el.dataset.styleDisplay;
+  } else {
+    el.style.display = '';
+  }
+}
+
+function emptyChildNodes(el) {
+  if (el.firstChild) {
+    el.removeChild(el.firstChild);
+    emptyChildNodes(el);
+  }
+}
+
+function replaceChildNodes(el, newChildNodes) {
+  emptyChildNodes(el);
+  if (newChildNodes instanceof DocumentFragment) {
+    el.appendChild(newChildNodes);
+  } else if (typeof newChildNodes === 'string') {
+    el.appendChild(parseHTML(newChildNodes));
+  } else if (typeof newChildNodes.forEach === 'function') {
+    newChildNodes.forEach((node) => {
+      el.appendChild(node);
+    });
+  }
+}
+
+const listenerRegistry = new WeakMap();
+const {addEventListener, removeEventListener} = EventTarget.prototype;
+
+// Register event listeners to a key object
+// listeners: array of listener definitions;
+//   - each definition must be a flat array of event target and the arguments
+//     used to call addEventListener() on the target
+function registerListeners(keyObj, listeners) {
+  let registered = listenerRegistry.get(keyObj);
+  if (!registered) {
+    registered = [];
+    listenerRegistry.set(keyObj, registered);
+  }
+  listeners.forEach((listener) => {
+    addEventListener.call(...listener);
+    registered.push(listener);
+  });
+}
+
+function unregisterListeners(keyObj) {
+  let listeners = listenerRegistry.get(keyObj);
+  if (!listeners) {
+    return;
+  }
+  listeners.forEach((listener) => {
+    removeEventListener.call(...listener);
+  });
+  listenerRegistry.delete(keyObj);
+}
+
+// Event.composedPath() polyfill for Edge
+// based on https://gist.github.com/kleinfreund/e9787d73776c0e3750dcfcdc89f100ec
+if (!Event.prototype.composedPath) {
+  const getComposedPath = (node, path = []) => {
+    path.push(node);
+
+    let parent;
+    if (node.parentNode) {
+      parent = node.parentNode;
+    } else if (node.host) { // ShadowRoot
+      parent = node.host;
+    } else if (node.defaultView) {  // Document
+      parent = node.defaultView;
+    }
+    return parent ? getComposedPath(parent, path) : path;
+  };
+
+  Event.prototype.composedPath = function () {
+    return getComposedPath(this.target);
+  };
+}
+
+function findFromPath(path, criteria, currentTarget) {
+  const [node, ...rest] = path;
+  if (criteria(node)) {
+    return node;
+  }
+  if (node === currentTarget || node.tagName === 'HTML' || rest.length === 0) {
+    // stop when reaching currentTarget or <html>
+    return;
+  }
+  return findFromPath(rest, criteria, currentTarget);
+}
+
+// Search for the actual target of a delegated event
+function findElementInEventPath(ev, selector) {
+  const criteria = typeof selector === 'function'
+    ? selector
+    : el => el instanceof Element && el.matches(selector);
+  return findFromPath(ev.composedPath(), criteria, ev.currentTarget);
+}
+
+// default locales
+const locales = {
+  en: {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: "Today",
+    clear: "Clear",
+    titleFormat: "MM y"
+  }
+};
+
+// config options updatable by setOptions() and their default values
+const defaultOptions = {
+  autohide: false,
+  beforeShowDay: null,
+  beforeShowDecade: null,
+  beforeShowMonth: null,
+  beforeShowYear: null,
+  clearButton: false,
+  dateDelimiter: ',',
+  datesDisabled: [],
+  daysOfWeekDisabled: [],
+  daysOfWeekHighlighted: [],
+  defaultViewDate: undefined, // placeholder, defaults to today() by the program
+  disableTouchKeyboard: false,
+  enableOnReadonly: true,
+  format: 'mm/dd/yyyy',
+  language: 'en',
+  maxDate: null,
+  maxNumberOfDates: 1,
+  maxView: 3,
+  minDate: null,
+  nextArrow: '»',
+  orientation: 'auto',
+  pickLevel: 0,
+  prevArrow: '«',
+  showDaysOfWeek: true,
+  showOnClick: true,
+  showOnFocus: true,
+  startView: 0,
+  title: '',
+  todayButton: false,
+  todayButtonMode: 0,
+  todayHighlight: false,
+  updateOnBlur: true,
+  weekNumbers: 0,
+  weekStart: 0,
+};
+
+const {
+  language: defaultLang,
+  format: defaultFormat,
+  weekStart: defaultWeekStart,
+} = defaultOptions;
+
+// Reducer function to filter out invalid day-of-week from the input
+function sanitizeDOW(dow, day) {
+  return dow.length < 6 && day >= 0 && day < 7
+    ? pushUnique(dow, day)
+    : dow;
+}
+
+function determineGetWeekMethod(numberingMode, weekStart) {
+  const methodId = numberingMode === 4
+    ? (weekStart === 6 ? 3 : !weekStart + 1)
+    : numberingMode;
+  switch (methodId) {
+    case 1:
+      return getIsoWeek;
+    case 2:
+      return getWesternTradWeek;
+    case 3:
+      return getMidEasternWeek;
+  }
+}
+
+function updateWeekStart(newValue, config, weekNumbers) {
+  config.weekStart = newValue;
+  config.weekEnd = (newValue + 6) % 7;
+  if (weekNumbers === 4) {
+    config.getWeekNumber = determineGetWeekMethod(4, newValue);
+  }
+  return newValue;
+}
+
+// validate input date. if invalid, fallback to the original value
+function validateDate(value, format, locale, origValue) {
+  const date = parseDate(value, format, locale);
+  return date !== undefined ? date : origValue;
+}
+
+// Validate viewId. if invalid, fallback to the original value
+function validateViewId(value, origValue, max = 3) {
+  const viewId = parseInt(value, 10);
+  return viewId >= 0 && viewId <= max ? viewId : origValue;
+}
+
+function replaceOptions(options, from, to, convert = undefined) {
+  if (from in options) {
+    if (!(to in options)) {
+      options[to] = convert ? convert(options[from]) : options[from];
+    }
+    delete options[from];
+  }
+}
+
+// Create Datepicker configuration to set
+function processOptions(options, datepicker) {
+  const inOpts = Object.assign({}, options);
+  const config = {};
+  const locales = datepicker.constructor.locales;
+  const rangeEnd = !!datepicker.rangeSideIndex;
+  let {
+    datesDisabled,
+    format,
+    language,
+    locale,
+    maxDate,
+    maxView,
+    minDate,
+    pickLevel,
+    startView,
+    weekNumbers,
+    weekStart,
+  } = datepicker.config || {};
+
+  // for backword compatibility
+  replaceOptions(inOpts, 'calendarWeeks', 'weekNumbers', val => val ? 1 : 0);
+  replaceOptions(inOpts, 'clearBtn', 'clearButton');
+  replaceOptions(inOpts, 'todayBtn', 'todayButton');
+  replaceOptions(inOpts, 'todayBtnMode', 'todayButtonMode');
+
+  if (inOpts.language) {
+    let lang;
+    if (inOpts.language !== language) {
+      if (locales[inOpts.language]) {
+        lang = inOpts.language;
+      } else {
+        // Check if langauge + region tag can fallback to the one without
+        // region (e.g. fr-CA → fr)
+        lang = inOpts.language.split('-')[0];
+        if (!locales[lang]) {
+          lang = false;
+        }
+      }
+    }
+    delete inOpts.language;
+    if (lang) {
+      language = config.language = lang;
+
+      // update locale as well when updating language
+      const origLocale = locale || locales[defaultLang];
+      // use default language's properties for the fallback
+      locale = Object.assign({
+        format: defaultFormat,
+        weekStart: defaultWeekStart
+      }, locales[defaultLang]);
+      if (language !== defaultLang) {
+        Object.assign(locale, locales[language]);
+      }
+      config.locale = locale;
+      // if format and/or weekStart are the same as old locale's defaults,
+      // update them to new locale's defaults
+      if (format === origLocale.format) {
+        format = config.format = locale.format;
+      }
+      if (weekStart === origLocale.weekStart) {
+        weekStart = updateWeekStart(locale.weekStart, config, weekNumbers);
+      }
+    }
+  }
+
+  if (inOpts.format) {
+    const hasToDisplay = typeof inOpts.format.toDisplay === 'function';
+    const hasToValue = typeof inOpts.format.toValue === 'function';
+    const validFormatString = reFormatTokens.test(inOpts.format);
+    if ((hasToDisplay && hasToValue) || validFormatString) {
+      format = config.format = inOpts.format;
+    }
+    delete inOpts.format;
+  }
+
+  //*** pick level ***//
+  let newPickLevel = pickLevel;
+  if ('pickLevel' in inOpts) {
+    newPickLevel = validateViewId(inOpts.pickLevel, pickLevel, 2);
+    delete inOpts.pickLevel;
+  }
+  if (newPickLevel !== pickLevel) {
+    if (newPickLevel > pickLevel) {
+      // complement current minDate/madDate so that the existing range will be
+      // expanded to fit the new level later
+      if (!('minDate' in inOpts)) {
+        inOpts.minDate = minDate;
+      }
+      if (!('maxDate' in inOpts)) {
+        inOpts.maxDate = maxDate;
+      }
+    }
+    // complement datesDisabled so that it will be reset later
+    if (datesDisabled && !inOpts.datesDisabled) {
+      inOpts.datesDisabled = [];
+    }
+    pickLevel = config.pickLevel = newPickLevel;
+  }
+
+  //*** dates ***//
+  // while min and maxDate for "no limit" in the options are better to be null
+  // (especially when updating), the ones in the config have to be undefined
+  // because null is treated as 0 (= unix epoch) when comparing with time value
+  let minDt = minDate;
+  let maxDt = maxDate;
+  if ('minDate' in inOpts) {
+    const defaultMinDt = dateValue(0, 0, 1);
+    minDt = inOpts.minDate === null
+      ? defaultMinDt  // set 0000-01-01 to prevent negative values for year
+      : validateDate(inOpts.minDate, format, locale, minDt);
+    if (minDt !== defaultMinDt) {
+      minDt = regularizeDate(minDt, pickLevel, false);
+    }
+    delete inOpts.minDate;
+  }
+  if ('maxDate' in inOpts) {
+    maxDt = inOpts.maxDate === null
+      ? undefined
+      : validateDate(inOpts.maxDate, format, locale, maxDt);
+    if (maxDt !== undefined) {
+      maxDt = regularizeDate(maxDt, pickLevel, true);
+    }
+    delete inOpts.maxDate;
+  }
+  if (maxDt < minDt) {
+    minDate = config.minDate = maxDt;
+    maxDate = config.maxDate = minDt;
+  } else {
+    if (minDate !== minDt) {
+      minDate = config.minDate = minDt;
+    }
+    if (maxDate !== maxDt) {
+      maxDate = config.maxDate = maxDt;
+    }
+  }
+
+  if (inOpts.datesDisabled) {
+    const dtsDisabled = inOpts.datesDisabled;
+    if (typeof dtsDisabled === 'function') {
+      config.datesDisabled = null;
+      config.checkDisabled = (timeValue, viewId) => dtsDisabled(
+        new Date(timeValue),
+        viewId,
+        rangeEnd
+      );
+    } else {
+      const disabled = config.datesDisabled = dtsDisabled.reduce((dates, dt) => {
+        const date = parseDate(dt, format, locale);
+        return date !== undefined
+          ? pushUnique(dates, regularizeDate(date, pickLevel, rangeEnd))
+          : dates;
+      }, []);
+      config.checkDisabled = timeValue => disabled.includes(timeValue);
+    }
+    delete inOpts.datesDisabled;
+  }
+  if ('defaultViewDate' in inOpts) {
+    const viewDate = parseDate(inOpts.defaultViewDate, format, locale);
+    if (viewDate !== undefined) {
+      config.defaultViewDate = viewDate;
+    }
+    delete inOpts.defaultViewDate;
+  }
+
+  //*** days of week ***//
+  if ('weekStart' in inOpts) {
+    const wkStart = Number(inOpts.weekStart) % 7;
+    if (!isNaN(wkStart)) {
+      weekStart = updateWeekStart(wkStart, config, weekNumbers);
+    }
+    delete inOpts.weekStart;
+  }
+  if (inOpts.daysOfWeekDisabled) {
+    config.daysOfWeekDisabled = inOpts.daysOfWeekDisabled.reduce(sanitizeDOW, []);
+    delete inOpts.daysOfWeekDisabled;
+  }
+  if (inOpts.daysOfWeekHighlighted) {
+    config.daysOfWeekHighlighted = inOpts.daysOfWeekHighlighted.reduce(sanitizeDOW, []);
+    delete inOpts.daysOfWeekHighlighted;
+  }
+
+  //*** week numbers ***//
+  if ('weekNumbers' in inOpts) {
+    let method = inOpts.weekNumbers;
+    if (method) {
+      const getWeekNumber = typeof method === 'function'
+        ? (timeValue, startOfWeek) => method(new Date(timeValue), startOfWeek)
+        : determineGetWeekMethod((method = parseInt(method, 10)), weekStart);
+      if (getWeekNumber) {
+        weekNumbers = config.weekNumbers = method;
+        config.getWeekNumber = getWeekNumber;
+      }
+    } else {
+      weekNumbers = config.weekNumbers = 0;
+      config.getWeekNumber = null;
+    }
+    delete inOpts.weekNumbers;
+  }
+
+  //*** multi date ***//
+  if ('maxNumberOfDates' in inOpts) {
+    const maxNumberOfDates = parseInt(inOpts.maxNumberOfDates, 10);
+    if (maxNumberOfDates >= 0) {
+      config.maxNumberOfDates = maxNumberOfDates;
+      config.multidate = maxNumberOfDates !== 1;
+    }
+    delete inOpts.maxNumberOfDates;
+  }
+  if (inOpts.dateDelimiter) {
+    config.dateDelimiter = String(inOpts.dateDelimiter);
+    delete inOpts.dateDelimiter;
+  }
+
+  //*** view ***//
+  let newMaxView = maxView;
+  if ('maxView' in inOpts) {
+    newMaxView = validateViewId(inOpts.maxView, maxView);
+    delete inOpts.maxView;
+  }
+  // ensure max view >= pick level
+  newMaxView = pickLevel > newMaxView ? pickLevel : newMaxView;
+  if (newMaxView !== maxView) {
+    maxView = config.maxView = newMaxView;
+  }
+
+  let newStartView = startView;
+  if ('startView' in inOpts) {
+    newStartView = validateViewId(inOpts.startView, newStartView);
+    delete inOpts.startView;
+  }
+  // ensure pick level <= start view <= max view
+  if (newStartView < pickLevel) {
+    newStartView = pickLevel;
+  } else if (newStartView > maxView) {
+    newStartView = maxView;
+  }
+  if (newStartView !== startView) {
+    config.startView = newStartView;
+  }
+
+  //*** template ***//
+  if (inOpts.prevArrow) {
+    const prevArrow = parseHTML(inOpts.prevArrow);
+    if (prevArrow.childNodes.length > 0) {
+      config.prevArrow = prevArrow.childNodes;
+    }
+    delete inOpts.prevArrow;
+  }
+  if (inOpts.nextArrow) {
+    const nextArrow = parseHTML(inOpts.nextArrow);
+    if (nextArrow.childNodes.length > 0) {
+      config.nextArrow = nextArrow.childNodes;
+    }
+    delete inOpts.nextArrow;
+  }
+
+  //*** misc ***//
+  if ('disableTouchKeyboard' in inOpts) {
+    config.disableTouchKeyboard = 'ontouchstart' in document && !!inOpts.disableTouchKeyboard;
+    delete inOpts.disableTouchKeyboard;
+  }
+  if (inOpts.orientation) {
+    const orientation = inOpts.orientation.toLowerCase().split(/\s+/g);
+    config.orientation = {
+      x: orientation.find(x => (x === 'left' || x === 'right')) || 'auto',
+      y: orientation.find(y => (y === 'top' || y === 'bottom')) || 'auto',
+    };
+    delete inOpts.orientation;
+  }
+  if ('todayButtonMode' in inOpts) {
+    switch(inOpts.todayButtonMode) {
+      case 0:
+      case 1:
+        config.todayButtonMode = inOpts.todayButtonMode;
+    }
+    delete inOpts.todayButtonMode;
+  }
+
+  //*** copy the rest ***//
+  Object.entries(inOpts).forEach(([key, value]) => {
+    if (value !== undefined && key in defaultOptions) {
+      config[key] = value;
+    }
+  });
+
+  return config;
+}
+
+const defaultShortcutKeys = {
+  show: {key: 'ArrowDown'},
+  hide: null,
+  toggle: {key: 'Escape'},
+  prevButton: {key: 'ArrowLeft', ctrlOrMetaKey: true},
+  nextButton: {key: 'ArrowRight', ctrlOrMetaKey: true},
+  viewSwitch: {key: 'ArrowUp', ctrlOrMetaKey: true},
+  clearButton: {key: 'Backspace', ctrlOrMetaKey: true},
+  todayButton: {key: '.', ctrlOrMetaKey: true},
+  exitEditMode: {key: 'ArrowDown', ctrlOrMetaKey: true},
+};
+
+function createShortcutKeyConfig(options) {
+  return Object.keys(defaultShortcutKeys).reduce((keyDefs, shortcut) => {
+    const keyDef = options[shortcut] === undefined
+      ? defaultShortcutKeys[shortcut]
+      : options[shortcut];
+    const key = keyDef && keyDef.key;
+    if (!key || typeof key !== 'string') {
+      return keyDefs;
+    }
+
+    const normalizedDef = {
+      key,
+      ctrlOrMetaKey: !!(keyDef.ctrlOrMetaKey || keyDef.ctrlKey || keyDef.metaKey),
+    };
+    if (key.length > 1) {
+      normalizedDef.altKey = !!keyDef.altKey;
+      normalizedDef.shiftKey = !!keyDef.shiftKey;
+    }
+    keyDefs[shortcut] = normalizedDef;
+    return keyDefs;
+  }, {});
+}
+
+const pickerTemplate = optimizeTemplateHTML(`<div class="datepicker">
+  <div class="datepicker-picker">
+    <div class="datepicker-header">
+      <div class="datepicker-title"></div>
+      <div class="datepicker-controls">
+        <button type="button" class="%buttonClass% prev-button prev-btn"></button>
+        <button type="button" class="%buttonClass% view-switch"></button>
+        <button type="button" class="%buttonClass% next-button next-btn"></button>
+      </div>
+    </div>
+    <div class="datepicker-main"></div>
+    <div class="datepicker-footer">
+      <div class="datepicker-controls">
+        <button type="button" class="%buttonClass% today-button today-btn"></button>
+        <button type="button" class="%buttonClass% clear-button clear-btn"></button>
+      </div>
+    </div>
+  </div>
+</div>`);
+
+const daysTemplate = optimizeTemplateHTML(`<div class="days">
+  <div class="days-of-week">${createTagRepeat('span', 7, {class: 'dow'})}</div>
+  <div class="datepicker-grid">${createTagRepeat('span', 42)}</div>
+</div>`);
+
+const weekNumbersTemplate = optimizeTemplateHTML(`<div class="week-numbers calendar-weeks">
+  <div class="days-of-week"><span class="dow"></span></div>
+  <div class="weeks">${createTagRepeat('span', 6, {class: 'week'})}</div>
+</div>`);
+
+// Base class of the view classes
+class View {
+  constructor(picker, config) {
+    Object.assign(this, config, {
+      picker,
+      element: parseHTML(`<div class="datepicker-view"></div>`).firstChild,
+      selected: [],
+      isRangeEnd: !!picker.datepicker.rangeSideIndex,
+    });
+    this.init(this.picker.datepicker.config);
+  }
+
+  init(options) {
+    if ('pickLevel' in options) {
+      this.isMinView = this.id === options.pickLevel;
+    }
+    this.setOptions(options);
+    this.updateFocus();
+    this.updateSelection();
+  }
+
+  prepareForRender(switchLabel, prevButtonDisabled, nextButtonDisabled) {
+    // refresh disabled years on every render in order to clear the ones added
+    // by beforeShow hook at previous render
+    this.disabled = [];
+
+    const picker = this.picker;
+    picker.setViewSwitchLabel(switchLabel);
+    picker.setPrevButtonDisabled(prevButtonDisabled);
+    picker.setNextButtonDisabled(nextButtonDisabled);
+  }
+
+  setDisabled(date, classList) {
+    classList.add('disabled');
+    pushUnique(this.disabled, date);
+  }
+
+  // Execute beforeShow() callback and apply the result to the element
+  // args:
+  performBeforeHook(el, timeValue) {
+    let result = this.beforeShow(new Date(timeValue));
+    switch (typeof result) {
+      case 'boolean':
+        result = {enabled: result};
+        break;
+      case 'string':
+        result = {classes: result};
+    }
+
+    if (result) {
+      const classList = el.classList;
+      if (result.enabled === false) {
+        this.setDisabled(timeValue, classList);
+      }
+      if (result.classes) {
+        const extraClasses = result.classes.split(/\s+/);
+        classList.add(...extraClasses);
+        if (extraClasses.includes('disabled')) {
+          this.setDisabled(timeValue, classList);
+        }
+      }
+      if (result.content) {
+        replaceChildNodes(el, result.content);
+      }
+    }
+  }
+
+  renderCell(el, content, cellVal, date, {selected, range}, outOfScope, extraClasses = []) {
+    el.textContent = content;
+    if (this.isMinView) {
+      el.dataset.date = date;
+    }
+
+    const classList = el.classList;
+    el.className = `datepicker-cell ${this.cellClass}`;
+    if (cellVal < this.first) {
+      classList.add('prev');
+    } else if (cellVal > this.last) {
+      classList.add('next');
+    }
+    classList.add(...extraClasses);
+    if (outOfScope || this.checkDisabled(date, this.id)) {
+      this.setDisabled(date, classList);
+    }
+    if (range) {
+      const [rangeStart, rangeEnd] = range;
+      if (cellVal > rangeStart && cellVal < rangeEnd) {
+        classList.add('range');
+      }
+      if (cellVal === rangeStart) {
+        classList.add('range-start');
+      }
+      if (cellVal === rangeEnd) {
+        classList.add('range-end');
+      }
+    }
+    if (selected.includes(cellVal)) {
+      classList.add('selected');
+    }
+    if (cellVal === this.focused) {
+      classList.add('focused');
+    }
+
+    if (this.beforeShow) {
+      this.performBeforeHook(el, date);
+    }
+  }
+
+  refreshCell(el, cellVal, selected, [rangeStart, rangeEnd]) {
+    const classList = el.classList;
+    classList.remove('range', 'range-start', 'range-end', 'selected', 'focused');
+    if (cellVal > rangeStart && cellVal < rangeEnd) {
+      classList.add('range');
+    }
+    if (cellVal === rangeStart) {
+      classList.add('range-start');
+    }
+    if (cellVal === rangeEnd) {
+      classList.add('range-end');
+    }
+    if (selected.includes(cellVal)) {
+      classList.add('selected');
+    }
+    if (cellVal === this.focused) {
+      classList.add('focused');
+    }
+  }
+
+  changeFocusedCell(cellIndex) {
+    this.grid.querySelectorAll('.focused').forEach((el) => {
+      el.classList.remove('focused');
+    });
+    this.grid.children[cellIndex].classList.add('focused');
+  }
+}
+
+class DaysView extends View {
+  constructor(picker) {
+    super(picker, {
+      id: 0,
+      name: 'days',
+      cellClass: 'day',
+    });
+  }
+
+  init(options, onConstruction = true) {
+    if (onConstruction) {
+      const inner = parseHTML(daysTemplate).firstChild;
+      this.dow = inner.firstChild;
+      this.grid = inner.lastChild;
+      this.element.appendChild(inner);
+    }
+    super.init(options);
+  }
+
+  setOptions(options) {
+    let updateDOW;
+
+    if ('minDate' in options) {
+      this.minDate = options.minDate;
+    }
+    if ('maxDate' in options) {
+      this.maxDate = options.maxDate;
+    }
+    if (options.checkDisabled) {
+      this.checkDisabled = options.checkDisabled;
+    }
+    if (options.daysOfWeekDisabled) {
+      this.daysOfWeekDisabled = options.daysOfWeekDisabled;
+      updateDOW = true;
+    }
+    if (options.daysOfWeekHighlighted) {
+      this.daysOfWeekHighlighted = options.daysOfWeekHighlighted;
+    }
+    if ('todayHighlight' in options) {
+      this.todayHighlight = options.todayHighlight;
+    }
+    if ('weekStart' in options) {
+      this.weekStart = options.weekStart;
+      this.weekEnd = options.weekEnd;
+      updateDOW = true;
+    }
+    if (options.locale) {
+      const locale = this.locale = options.locale;
+      this.dayNames = locale.daysMin;
+      this.switchLabelFormat = locale.titleFormat;
+      updateDOW = true;
+    }
+    if ('beforeShowDay' in options) {
+      this.beforeShow = typeof options.beforeShowDay === 'function'
+        ? options.beforeShowDay
+        : undefined;
+    }
+
+    if ('weekNumbers' in options) {
+      if (options.weekNumbers && !this.weekNumbers) {
+        const weeksElem = parseHTML(weekNumbersTemplate).firstChild;
+        this.weekNumbers = {
+          element: weeksElem,
+          dow: weeksElem.firstChild,
+          weeks: weeksElem.lastChild,
+        };
+        this.element.insertBefore(weeksElem, this.element.firstChild);
+      } else if (this.weekNumbers && !options.weekNumbers) {
+        this.element.removeChild(this.weekNumbers.element);
+        this.weekNumbers = null;
+      }
+    }
+
+    if ('getWeekNumber' in options) {
+      this.getWeekNumber = options.getWeekNumber;
+    }
+
+    if ('showDaysOfWeek' in options) {
+      if (options.showDaysOfWeek) {
+        showElement(this.dow);
+        if (this.weekNumbers) {
+          showElement(this.weekNumbers.dow);
+        }
+      } else {
+        hideElement(this.dow);
+        if (this.weekNumbers) {
+          hideElement(this.weekNumbers.dow);
+        }
+      }
+    }
+
+    // update days-of-week when locale, daysOfweekDisabled or weekStart is changed
+    if (updateDOW) {
+      Array.from(this.dow.children).forEach((el, index) => {
+        const dow = (this.weekStart + index) % 7;
+        el.textContent = this.dayNames[dow];
+        el.className = this.daysOfWeekDisabled.includes(dow) ? 'dow disabled' : 'dow';
+      });
+    }
+  }
+
+  // Apply update on the focused date to view's settings
+  updateFocus() {
+    const viewDate = new Date(this.picker.viewDate);
+    const viewYear = viewDate.getFullYear();
+    const viewMonth = viewDate.getMonth();
+    const firstOfMonth = dateValue(viewYear, viewMonth, 1);
+    const start = dayOfTheWeekOf(firstOfMonth, this.weekStart, this.weekStart);
+
+    this.first = firstOfMonth;
+    this.last = dateValue(viewYear, viewMonth + 1, 0);
+    this.start = start;
+    this.focused = this.picker.viewDate;
+  }
+
+  // Apply update on the selected dates to view's settings
+  updateSelection() {
+    const {dates, rangepicker} = this.picker.datepicker;
+    this.selected = dates;
+    if (rangepicker) {
+      this.range = rangepicker.dates;
+    }
+  }
+
+   // Update the entire view UI
+  render() {
+    // update today marker on ever render
+    this.today = this.todayHighlight ? today() : undefined;
+
+    this.prepareForRender(
+      formatDate(this.focused, this.switchLabelFormat, this.locale),
+      this.first <= this.minDate,
+      this.last >= this.maxDate
+    );
+
+    if (this.weekNumbers) {
+      const weekStart = this.weekStart;
+      const startOfWeek = dayOfTheWeekOf(this.first, weekStart, weekStart);
+      Array.from(this.weekNumbers.weeks.children).forEach((el, index) => {
+        const dateOfWeekStart = addWeeks(startOfWeek, index);
+        el.textContent = this.getWeekNumber(dateOfWeekStart, weekStart);
+        if (index > 3) {
+          el.classList[dateOfWeekStart > this.last ? 'add' : 'remove']('next');
+        }
+      });
+    }
+    Array.from(this.grid.children).forEach((el, index) => {
+      const current = addDays(this.start, index);
+      const dateObj = new Date(current);
+      const day = dateObj.getDay();
+      const extraClasses = [];
+
+      if (this.today === current) {
+        extraClasses.push('today');
+      }
+      if (this.daysOfWeekHighlighted.includes(day)) {
+        extraClasses.push('highlighted');
+      }
+
+      this.renderCell(
+        el,
+        dateObj.getDate(),
+        current,
+        current,
+        this,
+        current < this.minDate
+          || current > this.maxDate
+          || this.daysOfWeekDisabled.includes(day),
+        extraClasses
+      );
+    });
+  }
+
+  // Update the view UI by applying the changes of selected and focused items
+  refresh() {
+    const range = this.range || [];
+    Array.from(this.grid.children).forEach((el) => {
+      this.refreshCell(el, Number(el.dataset.date), this.selected, range);
+    });
+  }
+
+  // Update the view UI by applying the change of focused item
+  refreshFocus() {
+    this.changeFocusedCell(Math.round((this.focused - this.start) / 86400000));
+  }
+}
+
+function computeMonthRange(range, thisYear) {
+  if (!range || !range[0] || !range[1]) {
+    return;
+  }
+
+  const [[startY, startM], [endY, endM]] = range;
+  if (startY > thisYear || endY < thisYear) {
+    return;
+  }
+  return [
+    startY === thisYear ? startM : -1,
+    endY === thisYear ? endM : 12,
+  ];
+}
+
+class MonthsView extends View {
+  constructor(picker) {
+    super(picker, {
+      id: 1,
+      name: 'months',
+      cellClass: 'month',
+    });
+  }
+
+  init(options, onConstruction = true) {
+    if (onConstruction) {
+      this.grid = this.element;
+      this.element.classList.add('months', 'datepicker-grid');
+      this.grid.appendChild(parseHTML(createTagRepeat('span', 12, {'data-month': ix => ix})));
+      this.first = 0;
+      this.last = 11;
+    }
+    super.init(options);
+  }
+
+  setOptions(options) {
+    if (options.locale) {
+      this.monthNames = options.locale.monthsShort;
+    }
+    if ('minDate' in options) {
+      if (options.minDate === undefined) {
+        this.minYear = this.minMonth = this.minDate = undefined;
+      } else {
+        const minDateObj = new Date(options.minDate);
+        this.minYear = minDateObj.getFullYear();
+        this.minMonth = minDateObj.getMonth();
+        this.minDate = minDateObj.setDate(1);
+      }
+    }
+    if ('maxDate' in options) {
+      if (options.maxDate === undefined) {
+        this.maxYear = this.maxMonth = this.maxDate = undefined;
+      } else {
+        const maxDateObj = new Date(options.maxDate);
+        this.maxYear = maxDateObj.getFullYear();
+        this.maxMonth = maxDateObj.getMonth();
+        this.maxDate = dateValue(this.maxYear, this.maxMonth + 1, 0);
+      }
+    }
+    if (options.checkDisabled) {
+      this.checkDisabled = this.isMinView || options.datesDisabled === null
+        ? options.checkDisabled
+        : () => false;
+    }
+    if ('beforeShowMonth' in options) {
+      this.beforeShow = typeof options.beforeShowMonth === 'function'
+        ? options.beforeShowMonth
+        : undefined;
+    }
+  }
+
+  // Update view's settings to reflect the viewDate set on the picker
+  updateFocus() {
+    const viewDate = new Date(this.picker.viewDate);
+    this.year = viewDate.getFullYear();
+    this.focused = viewDate.getMonth();
+  }
+
+  // Update view's settings to reflect the selected dates
+  updateSelection() {
+    const {dates, rangepicker} = this.picker.datepicker;
+    this.selected = dates.reduce((selected, timeValue) => {
+      const date = new Date(timeValue);
+      const year = date.getFullYear();
+      const month = date.getMonth();
+      if (selected[year] === undefined) {
+        selected[year] = [month];
+      } else {
+        pushUnique(selected[year], month);
+      }
+      return selected;
+    }, {});
+    if (rangepicker && rangepicker.dates) {
+      this.range = rangepicker.dates.map(timeValue => {
+        const date = new Date(timeValue);
+        return isNaN(date) ? undefined : [date.getFullYear(), date.getMonth()];
+      });
+    }
+  }
+
+  // Update the entire view UI
+  render() {
+    this.prepareForRender(
+      this.year,
+      this.year <= this.minYear,
+      this.year >= this.maxYear
+    );
+
+    const selected = this.selected[this.year] || [];
+    const yrOutOfRange = this.year < this.minYear || this.year > this.maxYear;
+    const isMinYear = this.year === this.minYear;
+    const isMaxYear = this.year === this.maxYear;
+    const range = computeMonthRange(this.range, this.year);
+
+    Array.from(this.grid.children).forEach((el, index) => {
+      const date = regularizeDate(new Date(this.year, index, 1), 1, this.isRangeEnd);
+
+      this.renderCell(
+        el,
+        this.monthNames[index],
+        index,
+        date,
+        {selected, range},
+        yrOutOfRange
+          || isMinYear && index < this.minMonth
+          || isMaxYear && index > this.maxMonth
+      );
+    });
+  }
+
+  // Update the view UI by applying the changes of selected and focused items
+  refresh() {
+    const selected = this.selected[this.year] || [];
+    const range = computeMonthRange(this.range, this.year) || [];
+    Array.from(this.grid.children).forEach((el, index) => {
+      this.refreshCell(el, index, selected, range);
+    });
+  }
+
+  // Update the view UI by applying the change of focused item
+  refreshFocus() {
+    this.changeFocusedCell(this.focused);
+  }
+}
+
+function toTitleCase(word) {
+  return [...word].reduce((str, ch, ix) => str += ix ? ch : ch.toUpperCase(), '');
+}
+
+// Class representing the years and decades view elements
+class YearsView extends View {
+  constructor(picker, config) {
+    super(picker, config);
+  }
+
+  init(options, onConstruction = true) {
+    if (onConstruction) {
+      this.navStep = this.step * 10;
+      this.beforeShowOption = `beforeShow${toTitleCase(this.cellClass)}`;
+      this.grid = this.element;
+      this.element.classList.add(this.name, 'datepicker-grid');
+      this.grid.appendChild(parseHTML(createTagRepeat('span', 12)));
+    }
+    super.init(options);
+  }
+
+  setOptions(options) {
+    if ('minDate' in options) {
+      if (options.minDate === undefined) {
+        this.minYear = this.minDate = undefined;
+      } else {
+        this.minYear = startOfYearPeriod(options.minDate, this.step);
+        this.minDate = dateValue(this.minYear, 0, 1);
+      }
+    }
+    if ('maxDate' in options) {
+      if (options.maxDate === undefined) {
+        this.maxYear = this.maxDate = undefined;
+      } else {
+        this.maxYear = startOfYearPeriod(options.maxDate, this.step);
+        this.maxDate = dateValue(this.maxYear, 11, 31);
+      }
+    }
+    if (options.checkDisabled) {
+      this.checkDisabled = this.isMinView || options.datesDisabled === null
+        ? options.checkDisabled
+        : () => false;
+    }
+    if (this.beforeShowOption in options) {
+      const beforeShow = options[this.beforeShowOption];
+      this.beforeShow = typeof beforeShow === 'function' ? beforeShow : undefined;
+    }
+  }
+
+  // Update view's settings to reflect the viewDate set on the picker
+  updateFocus() {
+    const viewDate = new Date(this.picker.viewDate);
+    const first = startOfYearPeriod(viewDate, this.navStep);
+    const last = first + 9 * this.step;
+
+    this.first = first;
+    this.last = last;
+    this.start = first - this.step;
+    this.focused = startOfYearPeriod(viewDate, this.step);
+  }
+
+  // Update view's settings to reflect the selected dates
+  updateSelection() {
+    const {dates, rangepicker} = this.picker.datepicker;
+    this.selected = dates.reduce((years, timeValue) => {
+      return pushUnique(years, startOfYearPeriod(timeValue, this.step));
+    }, []);
+    if (rangepicker && rangepicker.dates) {
+      this.range = rangepicker.dates.map(timeValue => {
+        if (timeValue !== undefined) {
+          return startOfYearPeriod(timeValue, this.step);
+        }
+      });
+    }
+  }
+
+  // Update the entire view UI
+  render() {
+    this.prepareForRender(
+      `${this.first}-${this.last}`,
+      this.first <= this.minYear,
+      this.last >= this.maxYear
+    );
+
+    Array.from(this.grid.children).forEach((el, index) => {
+      const current = this.start + (index * this.step);
+      const date = regularizeDate(new Date(current, 0, 1), 2, this.isRangeEnd);
+
+      el.dataset.year = current;
+      this.renderCell(
+        el,
+        current,
+        current,
+        date,
+        this,
+        current < this.minYear || current > this.maxYear
+      );
+    });
+  }
+
+  // Update the view UI by applying the changes of selected and focused items
+  refresh() {
+    const range = this.range || [];
+    Array.from(this.grid.children).forEach((el) => {
+      this.refreshCell(el, Number(el.textContent), this.selected, range);
+    });
+  }
+
+  // Update the view UI by applying the change of focused item
+  refreshFocus() {
+    this.changeFocusedCell(Math.round((this.focused - this.start) / this.step));
+  }
+}
+
+function triggerDatepickerEvent(datepicker, type) {
+  const detail = {
+    date: datepicker.getDate(),
+    viewDate: new Date(datepicker.picker.viewDate),
+    viewId: datepicker.picker.currentView.id,
+    datepicker,
+  };
+  datepicker.element.dispatchEvent(new CustomEvent(type, {detail}));
+}
+
+// direction: -1 (to previous), 1 (to next)
+function goToPrevOrNext(datepicker, direction) {
+  const {config, picker} = datepicker;
+  const {currentView, viewDate} = picker;
+  let newViewDate;
+  switch (currentView.id) {
+    case 0:
+      newViewDate = addMonths(viewDate, direction);
+      break;
+    case 1:
+      newViewDate = addYears(viewDate, direction);
+      break;
+    default:
+      newViewDate = addYears(viewDate, direction * currentView.navStep);
+  }
+  newViewDate = limitToRange(newViewDate, config.minDate, config.maxDate);
+  picker.changeFocus(newViewDate).render();
+}
+
+function switchView(datepicker) {
+  const viewId = datepicker.picker.currentView.id;
+  if (viewId === datepicker.config.maxView) {
+    return;
+  }
+  datepicker.picker.changeView(viewId + 1).render();
+}
+
+function clearSelection(datepicker) {
+  datepicker.setDate({clear: true});
+}
+
+function goToOrSelectToday(datepicker) {
+  const currentDate = today();
+  if (datepicker.config.todayButtonMode === 1) {
+    datepicker.setDate(currentDate, {forceRefresh: true, viewDate: currentDate});
+  } else {
+    datepicker.setFocusedDate(currentDate, true);
+  }
+}
+
+function unfocus(datepicker) {
+  const onBlur = () => {
+    if (datepicker.config.updateOnBlur) {
+      datepicker.update({revert: true});
+    } else {
+      datepicker.refresh('input');
+    }
+    datepicker.hide();
+  };
+  const element = datepicker.element;
+
+  if (isActiveElement(element)) {
+    element.addEventListener('blur', onBlur, {once: true});
+  } else {
+    onBlur();
+  }
+}
+
+function goToSelectedMonthOrYear(datepicker, selection) {
+  const picker = datepicker.picker;
+  const viewDate = new Date(picker.viewDate);
+  const viewId = picker.currentView.id;
+  const newDate = viewId === 1
+    ? addMonths(viewDate, selection - viewDate.getMonth())
+    : addYears(viewDate, selection - viewDate.getFullYear());
+
+  picker.changeFocus(newDate).changeView(viewId - 1).render();
+}
+
+function onClickViewSwitch(datepicker) {
+  switchView(datepicker);
+}
+
+function onClickPrevButton(datepicker) {
+  goToPrevOrNext(datepicker, -1);
+}
+
+function onClickNextButton(datepicker) {
+  goToPrevOrNext(datepicker, 1);
+}
+
+// For the picker's main block to delegete the events from `datepicker-cell`s
+function onClickView(datepicker, ev) {
+  const target = findElementInEventPath(ev, '.datepicker-cell');
+  if (!target || target.classList.contains('disabled')) {
+    return;
+  }
+
+  const {id, isMinView} = datepicker.picker.currentView;
+  const data = target.dataset;
+  if (isMinView) {
+    datepicker.setDate(Number(data.date));
+  } else if (id === 1) {
+    goToSelectedMonthOrYear(datepicker, Number(data.month));
+  } else {
+    goToSelectedMonthOrYear(datepicker, Number(data.year));
+  }
+}
+
+function onMousedownPicker(ev) {
+  ev.preventDefault();
+}
+
+const orientClasses = ['left', 'top', 'right', 'bottom'].reduce((obj, key) => {
+  obj[key] = `datepicker-orient-${key}`;
+  return obj;
+}, {});
+const toPx = num => num ? `${num}px` : num;
+
+function processPickerOptions(picker, options) {
+  if ('title' in options) {
+    if (options.title) {
+      picker.controls.title.textContent = options.title;
+      showElement(picker.controls.title);
+    } else {
+      picker.controls.title.textContent = '';
+      hideElement(picker.controls.title);
+    }
+  }
+  if (options.prevArrow) {
+    const prevButton = picker.controls.prevButton;
+    emptyChildNodes(prevButton);
+    options.prevArrow.forEach((node) => {
+      prevButton.appendChild(node.cloneNode(true));
+    });
+  }
+  if (options.nextArrow) {
+    const nextButton = picker.controls.nextButton;
+    emptyChildNodes(nextButton);
+    options.nextArrow.forEach((node) => {
+      nextButton.appendChild(node.cloneNode(true));
+    });
+  }
+  if (options.locale) {
+    picker.controls.todayButton.textContent = options.locale.today;
+    picker.controls.clearButton.textContent = options.locale.clear;
+  }
+  if ('todayButton' in options) {
+    if (options.todayButton) {
+      showElement(picker.controls.todayButton);
+    } else {
+      hideElement(picker.controls.todayButton);
+    }
+  }
+  if ('minDate' in options || 'maxDate' in options) {
+    const {minDate, maxDate} = picker.datepicker.config;
+    picker.controls.todayButton.disabled = !isInRange(today(), minDate, maxDate);
+  }
+  if ('clearButton' in options) {
+    if (options.clearButton) {
+      showElement(picker.controls.clearButton);
+    } else {
+      hideElement(picker.controls.clearButton);
+    }
+  }
+}
+
+// Compute view date to reset, which will be...
+// - the last item of the selected dates or defaultViewDate if no selection
+// - limitted to minDate or maxDate if it exceeds the range
+function computeResetViewDate(datepicker) {
+  const {dates, config, rangeSideIndex} = datepicker;
+  const viewDate = dates.length > 0
+    ? lastItemOf(dates)
+    : regularizeDate(config.defaultViewDate, config.pickLevel, rangeSideIndex);
+  return limitToRange(viewDate, config.minDate, config.maxDate);
+}
+
+// Change current view's view date
+function setViewDate(picker, newDate) {
+  if (!('_oldViewDate' in picker) && newDate !== picker.viewDate) {
+    picker._oldViewDate = picker.viewDate;
+  }
+  picker.viewDate = newDate;
+
+  // return whether the new date is in different period on time from the one
+  // displayed in the current view
+  // when true, the view needs to be re-rendered on the next UI refresh.
+  const {id, year, first, last} = picker.currentView;
+  const viewYear = new Date(newDate).getFullYear();
+  switch (id) {
+    case 0:
+      return newDate < first || newDate > last;
+    case 1:
+      return viewYear !== year;
+    default:
+      return viewYear < first || viewYear > last;
+  }
+}
+
+function getTextDirection(el) {
+  return window.getComputedStyle(el).direction;
+}
+
+// find the closet scrollable ancestor elemnt under the body
+function findScrollParents(el) {
+  const parent = getParent(el);
+  if (parent === document.body || !parent) {
+    return;
+  }
+
+  // checking overflow only is enough because computed overflow cannot be
+  // visible or a combination of visible and other when either axis is set
+  // to other than visible.
+  // (Setting one axis to other than 'visible' while the other is 'visible'
+  // results in the other axis turning to 'auto')
+  return window.getComputedStyle(parent).overflow !== 'visible'
+    ? parent
+    : findScrollParents(parent);
+}
+
+// Class representing the picker UI
+class Picker {
+  constructor(datepicker) {
+    const {config, inputField} = this.datepicker = datepicker;
+
+    const template = pickerTemplate.replace(/%buttonClass%/g, config.buttonClass);
+    const element = this.element = parseHTML(template).firstChild;
+    const [header, main, footer] = element.firstChild.children;
+    const title = header.firstElementChild;
+    const [prevButton, viewSwitch, nextButton] = header.lastElementChild.children;
+    const [todayButton, clearButton] = footer.firstChild.children;
+    const controls = {
+      title,
+      prevButton,
+      viewSwitch,
+      nextButton,
+      todayButton,
+      clearButton,
+    };
+    this.main = main;
+    this.controls = controls;
+
+    const elementClass = inputField ? 'dropdown' : 'inline';
+    element.classList.add(`datepicker-${elementClass}`);
+
+    processPickerOptions(this, config);
+    this.viewDate = computeResetViewDate(datepicker);
+
+    // set up event listeners
+    registerListeners(datepicker, [
+      [element, 'mousedown', onMousedownPicker],
+      [main, 'click', onClickView.bind(null, datepicker)],
+      [controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)],
+      [controls.prevButton, 'click', onClickPrevButton.bind(null, datepicker)],
+      [controls.nextButton, 'click', onClickNextButton.bind(null, datepicker)],
+      [controls.todayButton, 'click', goToOrSelectToday.bind(null, datepicker)],
+      [controls.clearButton, 'click', clearSelection.bind(null, datepicker)],
+    ]);
+
+    // set up views
+    this.views = [
+      new DaysView(this),
+      new MonthsView(this),
+      new YearsView(this, {id: 2, name: 'years', cellClass: 'year', step: 1}),
+      new YearsView(this, {id: 3, name: 'decades', cellClass: 'decade', step: 10}),
+    ];
+    this.currentView = this.views[config.startView];
+
+    this.currentView.render();
+    this.main.appendChild(this.currentView.element);
+    if (config.container) {
+      config.container.appendChild(this.element);
+    } else {
+      inputField.after(this.element);
+    }
+  }
+
+  setOptions(options) {
+    processPickerOptions(this, options);
+    this.views.forEach((view) => {
+      view.init(options, false);
+    });
+    this.currentView.render();
+  }
+
+  detach() {
+    this.element.remove();
+  }
+
+  show() {
+    if (this.active) {
+      return;
+    }
+
+    const {datepicker, element} = this;
+    const inputField = datepicker.inputField;
+    if (inputField) {
+      // ensure picker's direction matches input's
+      const inputDirection = getTextDirection(inputField);
+      if (inputDirection !== getTextDirection(getParent(element))) {
+        element.dir = inputDirection;
+      } else if (element.dir) {
+        element.removeAttribute('dir');
+      }
+
+      element.style.visibility = 'hidden';
+      element.classList.add('active');
+      this.place();
+      element.style.visibility = '';
+
+      if (datepicker.config.disableTouchKeyboard) {
+        inputField.blur();
+      }
+    } else {
+      element.classList.add('active');
+    }
+    this.active = true;
+    triggerDatepickerEvent(datepicker, 'show');
+  }
+
+  hide() {
+    if (!this.active) {
+      return;
+    }
+    this.datepicker.exitEditMode();
+    this.element.classList.remove('active');
+    this.active = false;
+    triggerDatepickerEvent(this.datepicker, 'hide');
+  }
+
+  place() {
+    const {classList, offsetParent, style} = this.element;
+    const {config, inputField} = this.datepicker;
+    const {
+      width: calendarWidth,
+      height: calendarHeight,
+    } = this.element.getBoundingClientRect();
+    const {
+      left: inputLeft,
+      top: inputTop,
+      right: inputRight,
+      bottom: inputBottom,
+      width: inputWidth,
+      height: inputHeight
+    } = inputField.getBoundingClientRect();
+    let {x: orientX, y: orientY} = config.orientation;
+    let left = inputLeft;
+    let top = inputTop;
+
+    // caliculate offsetLeft/Top of inputField
+    if (offsetParent === document.body || !offsetParent) {
+      left += window.scrollX;
+      top += window.scrollY;
+    } else {
+      const offsetParentRect = offsetParent.getBoundingClientRect();
+      left -= offsetParentRect.left - offsetParent.scrollLeft;
+      top -= offsetParentRect.top - offsetParent.scrollTop;
+    }
+
+    // caliculate the boundaries of the visible area that contains inputField
+    const scrollParent = findScrollParents(inputField);
+    let scrollAreaLeft = 0;
+    let scrollAreaTop = 0;
+    let {
+      clientWidth: scrollAreaRight,
+      clientHeight: scrollAreaBottom,
+    } = document.documentElement;
+
+    if (scrollParent) {
+      const scrollParentRect = scrollParent.getBoundingClientRect();
+      if (scrollParentRect.top > 0) {
+        scrollAreaTop = scrollParentRect.top;
+      }
+      if (scrollParentRect.left > 0) {
+        scrollAreaLeft = scrollParentRect.left;
+      }
+      if (scrollParentRect.right < scrollAreaRight) {
+        scrollAreaRight = scrollParentRect.right;
+      }
+      if (scrollParentRect.bottom < scrollAreaBottom) {
+        scrollAreaBottom = scrollParentRect.bottom;
+      }
+    }
+
+    // determine the horizontal orientation and left position
+    let adjustment = 0;
+    if (orientX === 'auto') {
+      if (inputLeft < scrollAreaLeft) {
+        orientX = 'left';
+        adjustment = scrollAreaLeft - inputLeft;
+      } else if (inputLeft + calendarWidth > scrollAreaRight) {
+        orientX = 'right';
+        if (scrollAreaRight < inputRight) {
+          adjustment = scrollAreaRight - inputRight;
+        }
+      } else if (getTextDirection(inputField) === 'rtl') {
+        orientX = inputRight - calendarWidth < scrollAreaLeft ? 'left' : 'right';
+      } else {
+        orientX = 'left';
+      }
+    }
+    if (orientX === 'right') {
+      left += inputWidth - calendarWidth;
+    }
+    left += adjustment;
+
+    // determine the vertical orientation and top position
+    if (orientY === 'auto') {
+      if (inputTop - calendarHeight > scrollAreaTop) {
+        orientY = inputBottom + calendarHeight > scrollAreaBottom ? 'top' : 'bottom';
+      } else {
+        orientY = 'bottom';
+      }
+    }
+    if (orientY === 'top') {
+      top -= calendarHeight;
+    } else {
+      top += inputHeight;
+    }
+
+    classList.remove(...Object.values(orientClasses));
+    classList.add(orientClasses[orientX], orientClasses[orientY]);
+
+    style.left = toPx(left);
+    style.top = toPx(top);
+  }
+
+  setViewSwitchLabel(labelText) {
+    this.controls.viewSwitch.textContent = labelText;
+  }
+
+  setPrevButtonDisabled(disabled) {
+    this.controls.prevButton.disabled = disabled;
+  }
+
+  setNextButtonDisabled(disabled) {
+    this.controls.nextButton.disabled = disabled;
+  }
+
+  changeView(viewId) {
+    const currentView = this.currentView;
+    if (viewId !== currentView.id) {
+      if (!this._oldView) {
+        this._oldView = currentView;
+      }
+      this.currentView = this.views[viewId];
+      this._renderMethod = 'render';
+    }
+    return this;
+  }
+
+  // Change the focused date (view date)
+  changeFocus(newViewDate) {
+    this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refreshFocus';
+    this.views.forEach((view) => {
+      view.updateFocus();
+    });
+    return this;
+  }
+
+  // Apply the change of the selected dates
+  update(viewDate = undefined) {
+    const newViewDate = viewDate === undefined
+      ? computeResetViewDate(this.datepicker)
+      : viewDate;
+    this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refresh';
+    this.views.forEach((view) => {
+      view.updateFocus();
+      view.updateSelection();
+    });
+    return this;
+  }
+
+  // Refresh the picker UI
+  render(quickRender = true) {
+    const {currentView, datepicker, _oldView: oldView} = this;
+    const oldViewDate = new Date(this._oldViewDate);
+    const renderMethod = (quickRender && this._renderMethod) || 'render';
+    delete this._oldView;
+    delete this._oldViewDate;
+    delete this._renderMethod;
+
+    currentView[renderMethod]();
+    if (oldView) {
+      this.main.replaceChild(currentView.element, oldView.element);
+      triggerDatepickerEvent(datepicker, 'changeView');
+    }
+    if (!isNaN(oldViewDate)) {
+      const newViewDate = new Date(this.viewDate);
+      if (newViewDate.getFullYear() !== oldViewDate.getFullYear()) {
+        triggerDatepickerEvent(datepicker, 'changeYear');
+      }
+      if (newViewDate.getMonth() !== oldViewDate.getMonth()) {
+        triggerDatepickerEvent(datepicker, 'changeMonth');
+      }
+    }
+  }
+}
+
+// Find the closest date that doesn't meet the condition for unavailable date
+// Returns undefined if no available date is found
+// addFn: function to calculate the next date
+//   - args: time value, amount
+// increase: amount to pass to addFn
+// testFn: function to test the unavailability of the date
+//   - args: time value; return: true if unavailable
+function findNextAvailableOne(date, addFn, increase, testFn, min, max) {
+  if (!isInRange(date, min, max)) {
+    return;
+  }
+  if (testFn(date)) {
+    const newDate = addFn(date, increase);
+    return findNextAvailableOne(newDate, addFn, increase, testFn, min, max);
+  }
+  return date;
+}
+
+// direction: -1 (left/up), 1 (right/down)
+// vertical: true for up/down, false for left/right
+function moveByArrowKey(datepicker, direction, vertical) {
+  const picker = datepicker.picker;
+  const currentView = picker.currentView;
+  const step = currentView.step || 1;
+  let viewDate = picker.viewDate;
+  let addFn;
+  switch (currentView.id) {
+    case 0:
+      viewDate = addDays(viewDate, vertical ? direction * 7 : direction);
+      addFn = addDays;
+      break;
+    case 1:
+      viewDate = addMonths(viewDate, vertical ? direction * 4 : direction);
+      addFn = addMonths;
+      break;
+    default:
+      viewDate = addYears(viewDate, direction * (vertical ? 4 : 1) * step);
+      addFn = addYears;
+  }
+  viewDate = findNextAvailableOne(
+    viewDate,
+    addFn,
+    direction < 0 ? -step : step,
+    (date) => currentView.disabled.includes(date),
+    currentView.minDate,
+    currentView.maxDate
+  );
+  if (viewDate !== undefined) {
+    picker.changeFocus(viewDate).render();
+  }
+}
+
+function onKeydown(datepicker, ev) {
+  const {config, picker, editMode} = datepicker;
+  const active = picker.active;
+  const {key, altKey, shiftKey} = ev;
+  const ctrlOrMetaKey = ev.ctrlKey || ev.metaKey;
+  const cancelEvent = () => {
+    ev.preventDefault();
+    ev.stopPropagation();
+  };
+
+  // tab/enter keys should not be taken by shortcut keys
+  if (key === 'Tab') {
+    unfocus(datepicker);
+    return;
+  }
+  if (key === 'Enter') {
+    if (!active) {
+      datepicker.update();
+    } else if (editMode) {
+      datepicker.exitEditMode({update: true, autohide: config.autohide});
+    } else {
+      const currentView = picker.currentView;
+      if (currentView.isMinView) {
+        datepicker.setDate(picker.viewDate);
+      } else {
+        picker.changeView(currentView.id - 1).render();
+        cancelEvent();
+      }
+    }
+    return;
+  }
+
+  const shortcutKeys = config.shortcutKeys;
+  const keyInfo = {key, ctrlOrMetaKey, altKey, shiftKey};
+  const shortcut = Object.keys(shortcutKeys).find((item) => {
+    const keyDef = shortcutKeys[item];
+    return !Object.keys(keyDef).find(prop => keyDef[prop] !== keyInfo[prop]);
+  });
+  if (shortcut) {
+    let action;
+    if (shortcut === 'toggle') {
+      action = shortcut;
+    } else if (editMode) {
+      if (shortcut === 'exitEditMode') {
+        action = shortcut;
+      }
+    } else if (active) {
+      if (shortcut === 'hide') {
+        action = shortcut;
+      } else if (shortcut === 'prevButton') {
+        action = [goToPrevOrNext, [datepicker, -1]];
+      } else if (shortcut === 'nextButton') {
+        action = [goToPrevOrNext, [datepicker, 1]];
+      } else if (shortcut === 'viewSwitch') {
+        action = [switchView, [datepicker]];
+      } else if (config.clearButton && shortcut === 'clearButton') {
+        action = [clearSelection, [datepicker]];
+      } else if (config.todayButton && shortcut === 'todayButton') {
+        action = [goToOrSelectToday, [datepicker]];
+      }
+    } else if (shortcut === 'show') {
+      action = shortcut;
+    }
+    if (action) {
+      if (Array.isArray(action)) {
+        action[0].apply(null, action[1]);
+      } else {
+        datepicker[action]();
+      }
+      cancelEvent();
+      return;
+    }
+  }
+
+  // perform as a regular <input> when picker in hidden or in edit mode
+  if (!active || editMode) {
+    return;
+  }
+
+  const handleArrowKeyPress = (direction, vertical) => {
+    if (shiftKey || ctrlOrMetaKey || altKey) {
+      datepicker.enterEditMode();
+    } else {
+      moveByArrowKey(datepicker, direction, vertical);
+      ev.preventDefault();
+    }
+  };
+
+  if (key === 'ArrowLeft') {
+    handleArrowKeyPress(-1, false);
+  } else if (key === 'ArrowRight') {
+    handleArrowKeyPress(1, false);
+  } else if (key === 'ArrowUp') {
+    handleArrowKeyPress(-1, true);
+  } else if (key === 'ArrowDown') {
+    handleArrowKeyPress(1, true);
+  } else if (
+    key === 'Backspace'
+    || key === 'Delete'
+      // When autofill is performed, Chromium-based browsers trigger fake
+      // keydown/keyup events that don't have the `key` property (on Edge,
+      // keyup only) in addition to the input event. Therefore, we need to
+      // check the existence of `key`'s value before checking the length.
+      // (issue #144)
+    || (key && key.length === 1 && !ctrlOrMetaKey)
+  ) {
+    datepicker.enterEditMode();
+  }
+}
+
+function onFocus(datepicker) {
+  if (datepicker.config.showOnFocus && !datepicker._showing) {
+    datepicker.show();
+  }
+}
+
+// for the prevention for entering edit mode while getting focus on click
+function onMousedown(datepicker, ev) {
+  const el = ev.target;
+  if (datepicker.picker.active || datepicker.config.showOnClick) {
+    el._active = isActiveElement(el);
+    el._clicking = setTimeout(() => {
+      delete el._active;
+      delete el._clicking;
+    }, 2000);
+  }
+}
+
+function onClickInput(datepicker, ev) {
+  const el = ev.target;
+  if (!el._clicking) {
+    return;
+  }
+  clearTimeout(el._clicking);
+  delete el._clicking;
+
+  if (el._active) {
+    datepicker.enterEditMode();
+  }
+  delete el._active;
+
+  if (datepicker.config.showOnClick) {
+    datepicker.show();
+  }
+}
+
+function onPaste(datepicker, ev) {
+  if (ev.clipboardData.types.includes('text/plain')) {
+    datepicker.enterEditMode();
+  }
+}
+
+// for the `document` to delegate the events from outside the picker/input field
+function onClickOutside(datepicker, ev) {
+  const {element, picker} = datepicker;
+  // check both picker's and input's activeness to make updateOnBlur work in
+  // the cases where...
+  // - picker is hidden by ESC key press → input stays focused
+  // - input is unfocused by closing mobile keyboard → piker is kept shown
+  if (!picker.active && !isActiveElement(element)) {
+    return;
+  }
+  const pickerElem = picker.element;
+  if (findElementInEventPath(ev, el => el === element || el === pickerElem)) {
+    return;
+  }
+  unfocus(datepicker);
+}
+
+function stringifyDates(dates, config) {
+  return dates
+    .map(dt => formatDate(dt, config.format, config.locale))
+    .join(config.dateDelimiter);
+}
+
+// parse input dates and create an array of time values for selection
+// returns undefined if there are no valid dates in inputDates
+// when origDates (current selection) is passed, the function works to mix
+// the input dates into the current selection
+function processInputDates(datepicker, inputDates, clear = false) {
+  if (inputDates.length === 0) {
+    // empty input is considered valid unless origiDates is passed
+    return clear ? [] : undefined;
+  }
+
+  const {config, dates: origDates, rangeSideIndex} = datepicker;
+  const {pickLevel, maxNumberOfDates} = config;
+  let newDates = inputDates.reduce((dates, dt) => {
+    let date = parseDate(dt, config.format, config.locale);
+    if (date === undefined) {
+      return dates;
+    }
+    // adjust to 1st of the month/Jan 1st of the year
+    // or to the last day of the monh/Dec 31st of the year if the datepicker
+    // is the range-end picker of a rangepicker
+    date = regularizeDate(date, pickLevel, rangeSideIndex);
+    if (
+      isInRange(date, config.minDate, config.maxDate)
+      && !dates.includes(date)
+      && !config.checkDisabled(date, pickLevel)
+      && (pickLevel > 0 || !config.daysOfWeekDisabled.includes(new Date(date).getDay()))
+    ) {
+      dates.push(date);
+    }
+    return dates;
+  }, []);
+  if (newDates.length === 0) {
+    return;
+  }
+  if (config.multidate && !clear) {
+    // get the synmetric difference between origDates and newDates
+    newDates = newDates.reduce((dates, date) => {
+      if (!origDates.includes(date)) {
+        dates.push(date);
+      }
+      return dates;
+    }, origDates.filter(date => !newDates.includes(date)));
+  }
+  // do length check always because user can input multiple dates regardless of the mode
+  return maxNumberOfDates && newDates.length > maxNumberOfDates
+    ? newDates.slice(maxNumberOfDates * -1)
+    : newDates;
+}
+
+// refresh the UI elements
+// modes: 1: input only, 2, picker only, 3 both
+function refreshUI(datepicker, mode = 3, quickRender = true, viewDate = undefined) {
+  const {config, picker, inputField} = datepicker;
+  if (mode & 2) {
+    const newView = picker.active ? config.pickLevel : config.startView;
+    picker.update(viewDate).changeView(newView).render(quickRender);
+  }
+  if (mode & 1 && inputField) {
+    inputField.value = stringifyDates(datepicker.dates, config);
+  }
+}
+
+function setDate(datepicker, inputDates, options) {
+  const config = datepicker.config;
+  let {clear, render, autohide, revert, forceRefresh, viewDate} = options;
+  if (render === undefined) {
+    render = true;
+  }
+  if (!render) {
+    autohide = forceRefresh = false;
+  } else if (autohide === undefined) {
+    autohide = config.autohide;
+  }
+  viewDate = parseDate(viewDate, config.format, config.locale);
+
+  const newDates = processInputDates(datepicker, inputDates, clear);
+  if (!newDates && !revert) {
+    return;
+  }
+  if (newDates && newDates.toString() !== datepicker.dates.toString()) {
+    datepicker.dates = newDates;
+    refreshUI(datepicker, render ? 3 : 1, true, viewDate);
+    triggerDatepickerEvent(datepicker, 'changeDate');
+  } else {
+    refreshUI(datepicker, forceRefresh ? 3 : 1, true, viewDate);
+  }
+
+  if (autohide) {
+    datepicker.hide();
+  }
+}
+
+function getOutputConverter(datepicker, format) {
+  return format
+    ? date => formatDate(date, format, datepicker.config.locale)
+    : date => new Date(date);
+}
+
+/**
+ * Class representing a date picker
+ */
+class Datepicker {
+  /**
+   * Create a date picker
+   * @param  {Element} element - element to bind a date picker
+   * @param  {Object} [options] - config options
+   * @param  {DateRangePicker} [rangepicker] - DateRangePicker instance the
+   * date picker belongs to. Use this only when creating date picker as a part
+   * of date range picker
+   */
+  constructor(element, options = {}, rangepicker = undefined) {
+    element.datepicker = this;
+    this.element = element;
+    this.dates = [];
+
+    // initialize config
+    const config = this.config = Object.assign({
+      buttonClass: (options.buttonClass && String(options.buttonClass)) || 'button',
+      container: null,
+      defaultViewDate: today(),
+      maxDate: undefined,
+      minDate: undefined,
+    }, processOptions(defaultOptions, this));
+
+    // configure by type
+    let inputField;
+    if (element.tagName === 'INPUT') {
+      inputField = this.inputField = element;
+      inputField.classList.add('datepicker-input');
+      if (options.container) {
+        // omit string type check because it doesn't guarantee to avoid errors
+        // (invalid selector string causes abend with sytax error)
+        config.container = options.container instanceof HTMLElement
+          ? options.container
+          : document.querySelector(options.container);
+      }
+    } else {
+      config.container = element;
+    }
+    if (rangepicker) {
+      // check validiry
+      const index = rangepicker.inputs.indexOf(inputField);
+      const datepickers = rangepicker.datepickers;
+      if (index < 0 || index > 1 || !Array.isArray(datepickers)) {
+        throw Error('Invalid rangepicker object.');
+      }
+      // attach itaelf to the rangepicker here so that processInputDates() can
+      // determine if this is the range-end picker of the rangepicker while
+      // setting inital values when pickLevel > 0
+      datepickers[index] = this;
+      this.rangepicker = rangepicker;
+      this.rangeSideIndex = index;
+    }
+
+    // set up config
+    this._options = options;
+    Object.assign(config, processOptions(options, this));
+    config.shortcutKeys = createShortcutKeyConfig(options.shortcutKeys || {});
+
+    // process initial value
+    const initialDates = stringToArray(
+      element.value || element.dataset.date,
+      config.dateDelimiter
+    );
+    delete element.dataset.date;
+    const inputDateValues = processInputDates(this, initialDates);
+    if (inputDateValues && inputDateValues.length > 0) {
+      this.dates = inputDateValues;
+    }
+    if (inputField) {
+      inputField.value = stringifyDates(this.dates, config);
+    }
+
+    // set up picekr element
+    const picker = this.picker = new Picker(this);
+
+    const keydownListener = [element, 'keydown', onKeydown.bind(null, this)];
+    if (inputField) {
+      registerListeners(this, [
+        keydownListener,
+        [inputField, 'focus', onFocus.bind(null, this)],
+        [inputField, 'mousedown', onMousedown.bind(null, this)],
+        [inputField, 'click', onClickInput.bind(null, this)],
+        [inputField, 'paste', onPaste.bind(null, this)],
+        // To detect a click on outside, just listening to mousedown is enough,
+        // no need to listen to touchstart.
+        // Actually, listening to touchstart can be a problem because, while
+        // mousedown is fired only on tapping but not on swiping/pinching,
+        // touchstart is fired on swiping/pinching as well.
+        // (issue #95)
+        [document, 'mousedown', onClickOutside.bind(null, this)],
+        [window, 'resize', picker.place.bind(picker)]
+      ]);
+    } else {
+      registerListeners(this, [keydownListener]);
+      this.show();
+    }
+  }
+
+  /**
+   * Format Date object or time value in given format and language
+   * @param  {Date|Number} date - date or time value to format
+   * @param  {String|Object} format - format string or object that contains
+   * toDisplay() custom formatter, whose signature is
+   * - args:
+   *   - date: {Date} - Date instance of the date passed to the method
+   *   - format: {Object} - the format object passed to the method
+   *   - locale: {Object} - locale for the language specified by `lang`
+   * - return:
+   *     {String} formatted date
+   * @param  {String} [lang=en] - language code for the locale to use
+   * @return {String} formatted date
+   */
+  static formatDate(date, format, lang) {
+    return formatDate(date, format, lang && locales[lang] || locales.en);
+  }
+
+  /**
+   * Parse date string
+   * @param  {String|Date|Number} dateStr - date string, Date object or time
+   * value to parse
+   * @param  {String|Object} format - format string or object that contains
+   * toValue() custom parser, whose signature is
+   * - args:
+   *   - dateStr: {String|Date|Number} - the dateStr passed to the method
+   *   - format: {Object} - the format object passed to the method
+   *   - locale: {Object} - locale for the language specified by `lang`
+   * - return:
+   *     {Date|Number} parsed date or its time value
+   * @param  {String} [lang=en] - language code for the locale to use
+   * @return {Number} time value of parsed date
+   */
+  static parseDate(dateStr, format, lang) {
+    return parseDate(dateStr, format, lang && locales[lang] || locales.en);
+  }
+
+  /**
+   * @type {Object} - Installed locales in `[languageCode]: localeObject` format
+   * en`:_English (US)_ is pre-installed.
+   */
+  static get locales() {
+    return locales;
+  }
+
+  /**
+   * @type {Boolean} - Whether the picker element is shown. `true` whne shown
+   */
+  get active() {
+    return !!(this.picker && this.picker.active);
+  }
+
+  /**
+   * @type {HTMLDivElement} - DOM object of picker element
+   */
+  get pickerElement() {
+    return this.picker ? this.picker.element : undefined;
+  }
+
+  /**
+   * Set new values to the config options
+   * @param {Object} options - config options to update
+   */
+  setOptions(options) {
+    const newOptions = processOptions(options, this);
+    Object.assign(this._options, options);
+    Object.assign(this.config, newOptions);
+    this.picker.setOptions(newOptions);
+
+    refreshUI(this, 3);
+  }
+
+  /**
+   * Show the picker element
+   */
+  show() {
+    if (this.inputField) {
+      const {config, inputField} = this;
+      if (inputField.disabled || (inputField.readOnly && !config.enableOnReadonly)) {
+        return;
+      }
+      if (!isActiveElement(inputField) && !config.disableTouchKeyboard) {
+        this._showing = true;
+        inputField.focus();
+        delete this._showing;
+      }
+    }
+    this.picker.show();
+  }
+
+  /**
+   * Hide the picker element
+   * Not available on inline picker
+   */
+  hide() {
+    if (!this.inputField) {
+      return;
+    }
+    this.picker.hide();
+    this.picker.update().changeView(this.config.startView).render();
+  }
+
+  /**
+   * Toggle the display of the picker element
+   * Not available on inline picker
+   *
+   * Unlike hide(), the picker does not return to the start view when hiding.
+   */
+  toggle() {
+    if (!this.picker.active) {
+      this.show();
+    } else if (this.inputField) {
+      this.picker.hide();
+    }
+  }
+
+  /**
+   * Destroy the Datepicker instance
+   * @return {Detepicker} - the instance destroyed
+   */
+  destroy() {
+    this.hide();
+    unregisterListeners(this);
+    this.picker.detach();
+    const element = this.element;
+    element.classList.remove('datepicker-input');
+    delete element.datepicker;
+    return this;
+  }
+
+  /**
+   * Get the selected date(s)
+   *
+   * The method returns a Date object of selected date by default, and returns
+   * an array of selected dates in multidate mode. If format string is passed,
+   * it returns date string(s) formatted in given format.
+   *
+   * @param  {String} [format] - format string to stringify the date(s)
+   * @return {Date|String|Date[]|String[]} - selected date(s), or if none is
+   * selected, empty array in multidate mode and undefined in sigledate mode
+   */
+  getDate(format = undefined) {
+    const callback = getOutputConverter(this, format);
+
+    if (this.config.multidate) {
+      return this.dates.map(callback);
+    }
+    if (this.dates.length > 0) {
+      return callback(this.dates[0]);
+    }
+  }
+
+  /**
+   * Set selected date(s)
+   *
+   * In multidate mode, you can pass multiple dates as a series of arguments
+   * or an array. (Since each date is parsed individually, the type of the
+   * dates doesn't have to be the same.)
+   * The given dates are used to toggle the select status of each date. The
+   * number of selected dates is kept from exceeding the length set to
+   * maxNumberOfDates.
+   *
+   * With clear: true option, the method can be used to clear the selection
+   * and to replace the selection instead of toggling in multidate mode.
+   * If the option is passed with no date arguments or an empty dates array,
+   * it works as "clear" (clear the selection then set nothing), and if the
+   * option is passed with new dates to select, it works as "replace" (clear
+   * the selection then set the given dates)
+   *
+   * When render: false option is used, the method omits re-rendering the
+   * picker element. In this case, you need to call refresh() method later in
+   * order for the picker element to reflect the changes. The input field is
+   * refreshed always regardless of this option.
+   *
+   * When invalid (unparsable, repeated, disabled or out-of-range) dates are
+   * passed, the method ignores them and applies only valid ones. In the case
+   * that all the given dates are invalid, which is distinguished from passing
+   * no dates, the method considers it as an error and leaves the selection
+   * untouched. (The input field also remains untouched unless revert: true
+   * option is used.)
+   * Replacing the selection with the same date(s) also causes a similar
+   * situation. In both cases, the method does not refresh the picker element
+   * unless forceRefresh: true option is used.
+   *
+   * If viewDate option is used, the method changes the focused date to the
+   * specified date instead of the last item of the selection.
+   *
+   * @param {...(Date|Number|String)|Array} [dates] - Date strings, Date
+   * objects, time values or mix of those for new selection
+   * @param {Object} [options] - function options
+   * - clear: {boolean} - Whether to clear the existing selection
+   *     defualt: false
+   * - render: {boolean} - Whether to re-render the picker element
+   *     default: true
+   * - autohide: {boolean} - Whether to hide the picker element after re-render
+   *     Ignored when used with render: false
+   *     default: config.autohide
+   * - revert: {boolean} - Whether to refresh the input field when all the
+   *     passed dates are invalid
+   *     default: false
+   * - forceRefresh: {boolean} - Whether to refresh the picker element when
+   *     passed dates don't change the existing selection
+   *     default: false
+   * - viewDate: {Date|Number|String} - Date to be focused after setiing date(s)
+   *     default: The last item of the resulting selection, or defaultViewDate
+   *     config option if none is selected
+   */
+  setDate(...args) {
+    const dates = [...args];
+    const opts = {};
+    const lastArg = lastItemOf(args);
+    if (
+      lastArg
+      && typeof lastArg === 'object'
+      && !Array.isArray(lastArg)
+      && !(lastArg instanceof Date)
+    ) {
+      Object.assign(opts, dates.pop());
+    }
+
+    const inputDates = Array.isArray(dates[0]) ? dates[0] : dates;
+    setDate(this, inputDates, opts);
+  }
+
+  /**
+   * Update the selected date(s) with input field's value
+   * Not available on inline picker
+   *
+   * The input field will be refreshed with properly formatted date string.
+   *
+   * In the case that all the entered dates are invalid (unparsable, repeated,
+   * disabled or out-of-range), which is distinguished from empty input field,
+   * the method leaves the input field untouched as well as the selection by
+   * default. If revert: true option is used in this case, the input field is
+   * refreshed with the existing selection.
+   * The method also doesn't refresh the picker element in this case and when
+   * the entered dates are the same as the existing selection. If
+   * forceRefresh: true option is used, the picker element is refreshed in
+   * these cases too.
+   *
+   * @param  {Object} [options] - function options
+   * - autohide: {boolean} - whether to hide the picker element after refresh
+   *     default: false
+   * - revert: {boolean} - Whether to refresh the input field when all the
+   *     passed dates are invalid
+   *     default: false
+   * - forceRefresh: {boolean} - Whether to refresh the picer element when
+   *     input field's value doesn't change the existing selection
+   *     default: false
+   */
+  update(options = undefined) {
+    if (!this.inputField) {
+      return;
+    }
+
+    const opts = Object.assign(options || {}, {clear: true, render: true, viewDate: undefined});
+    const inputDates = stringToArray(this.inputField.value, this.config.dateDelimiter);
+    setDate(this, inputDates, opts);
+  }
+
+  /**
+   * Get the focused date
+   *
+   * The method returns a Date object of focused date by default. If format
+   * string is passed, it returns date string formatted in given format.
+   *
+   * @param  {String} [format] - format string to stringify the date
+   * @return {Date|String} - focused date (viewDate)
+   */
+  getFocusedDate(format = undefined) {
+    return getOutputConverter(this, format)(this.picker.viewDate);
+  }
+
+  /**
+   * Set focused date
+   *
+   * By default, the method updates the focus on the view shown at the time,
+   * or the one set to the startView config option if the picker is hidden.
+   * When resetView: true is passed, the view displayed is changed to the
+   * pickLevel config option's if the picker is shown.
+   *
+   * @param {Date|Number|String} viewDate - date string, Date object, time
+   * values of the date to focus
+   * @param {Boolean} [resetView] - whether to change the view to pickLevel
+   * config option's when the picker is shown. Ignored when the picker is
+   * hidden
+   */
+  setFocusedDate(viewDate, resetView = false) {
+    const {config, picker, active, rangeSideIndex} = this;
+    const pickLevel = config.pickLevel;
+    const newViewDate = parseDate(viewDate, config.format, config.locale);
+    if (newViewDate === undefined) {
+      return;
+    }
+
+    picker.changeFocus(regularizeDate(newViewDate, pickLevel, rangeSideIndex));
+    if (active && resetView) {
+      picker.changeView(pickLevel);
+    }
+    picker.render();
+  }
+
+  /**
+   * Refresh the picker element and the associated input field
+   * @param {String} [target] - target item when refreshing one item only
+   * 'picker' or 'input'
+   * @param {Boolean} [forceRender] - whether to re-render the picker element
+   * regardless of its state instead of optimized refresh
+   */
+  refresh(target = undefined, forceRender = false) {
+    if (target && typeof target !== 'string') {
+      forceRender = target;
+      target = undefined;
+    }
+
+    let mode;
+    if (target === 'picker') {
+      mode = 2;
+    } else if (target === 'input') {
+      mode = 1;
+    } else {
+      mode = 3;
+    }
+    refreshUI(this, mode, !forceRender);
+  }
+
+  /**
+   * Enter edit mode
+   * Not available on inline picker or when the picker element is hidden
+   */
+  enterEditMode() {
+    const inputField = this.inputField;
+    if (!inputField || inputField.readOnly || !this.picker.active || this.editMode) {
+      return;
+    }
+    this.editMode = true;
+    inputField.classList.add('in-edit');
+  }
+
+  /**
+   * Exit from edit mode
+   * Not available on inline picker
+   * @param  {Object} [options] - function options
+   * - update: {boolean} - whether to call update() after exiting
+   *     If false, input field is revert to the existing selection
+   *     default: false
+   */
+  exitEditMode(options = undefined) {
+    if (!this.inputField || !this.editMode) {
+      return;
+    }
+    const opts = Object.assign({update: false}, options);
+    delete this.editMode;
+    this.inputField.classList.remove('in-edit');
+    if (opts.update) {
+      this.update(opts);
+    }
+  }
+}
+
+var DatepickerTypeEnum;
+(function (DatepickerTypeEnum) {
+  DatepickerTypeEnum[DatepickerTypeEnum["date"] = 0] = "date";
+  DatepickerTypeEnum[DatepickerTypeEnum["month"] = 1] = "month";
+  DatepickerTypeEnum[DatepickerTypeEnum["year"] = 2] = "year";
+  DatepickerTypeEnum[DatepickerTypeEnum["week"] = 3] = "week";
+})(DatepickerTypeEnum || (DatepickerTypeEnum = {}));
+
+var _a, _b, _c;
+const browserLanguage = (_b = (_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.language) !== null && _b !== void 0 ? _b : 'en';
+const getDefaultDate = (type, selectedDate) => {
+  const date = selectedDate ? dayjs_min(selectedDate).toDate() : today$1();
+  return type === 'week' ? dayjs_min(date).startOf('isoWeek').toDate() : date;
+};
+function getDatepickerOptions(type, selectedDate) {
+  const config = {
+    enableOnReadonly: false,
+    pickLevel: DatepickerTypeEnum[type],
+    todayButton: true,
+    todayButtonMode: 1,
+    todayHighlight: true,
+    weekStart: 1,
+    language: 'browser',
+    defaultViewDate: getDefaultDate(type, selectedDate)
+  };
+  return config;
+}
+function daysForLocale(weekday = 'long') {
+  const date = new Date();
+  const firstDayOfWeek = new Date(date.setUTCDate(date.getUTCDate() - date.getUTCDay()));
+  const format = new Intl.DateTimeFormat(browserLanguage, { weekday }).format;
+  return [...Array(7).keys()].map(day => format(firstDayOfWeek.setUTCDate(firstDayOfWeek.getUTCDate() + day)));
+}
+function monthsForLocale(month = 'long') {
+  const date = new Date();
+  const format = new Intl.DateTimeFormat(browserLanguage, { month }).format;
+  return [...Array(12).keys()].map(month => format(date.setUTCMonth(month)));
+}
+if ((_c = Datepicker === null || Datepicker === void 0 ? void 0 : Datepicker.locales) === null || _c === void 0 ? void 0 : _c.browser) {
+  Datepicker.locales.browser = {
+    days: daysForLocale('long'),
+    daysShort: daysForLocale('short'),
+    daysMin: daysForLocale('narrow'),
+    months: monthsForLocale('long'),
+    monthsShort: monthsForLocale('short'),
+    today: catIconRegistry.catI18nRegistry.t('input.today')
+  };
+}
+
+const catDatepickerCss = ".datepicker{width:min-content}.datepicker:not(.active){display:none}.datepicker-dropdown{position:absolute;z-index:20;padding-top:4px}.datepicker-dropdown.datepicker-orient-top{padding-top:0;padding-bottom:4px}.datepicker-picker{display:flex;flex-direction:column;border-radius:var(--cat-border-radius-m, 0.25rem);background-color:white}.datepicker-dropdown .datepicker-picker{box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08)}.datepicker-main{flex:auto;padding:2px}.datepicker-footer{box-shadow:none;background-color:transparent}.datepicker-title{box-shadow:none;background-color:hsl(0, 0%, 96%);padding:0.375rem 0.75rem;text-align:center;font-weight:700}.datepicker-controls{display:flex}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{display:inline-flex;position:relative;align-items:center;justify-content:center;margin:0;border:1px solid rgb(var(--cat-border-color, 235, 236, 240));border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:none;background-color:hsl(0, 0%, 100%);cursor:pointer;padding:calc(0.375em - 1px) 0.75em;height:2.25em;vertical-align:top;text-align:center;line-height:1.5;white-space:nowrap;color:hsl(0, 0%, 21%);font-size:0.9375rem}.datepicker-controls .button:focus,.datepicker-controls .button:active{outline:none}.datepicker-controls .button:hover{border-color:#b8b8b8;color:hsl(0, 0%, 21%)}.datepicker-controls .button:focus{border-color:hsl(217, 71%, 53%);color:hsl(0, 0%, 21%)}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 0.125em rgba(50, 115, 220, 0.25)}.datepicker-controls .button:active{border-color:#474747;color:hsl(0, 0%, 21%)}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:bold}.datepicker-header .datepicker-controls .button:hover{background-color:#f2f4f7}.datepicker-header .datepicker-controls .button:active{background-color:#f2f4f7}.datepicker-footer .datepicker-controls .button{flex:auto;margin:calc(0.375rem - 1px) 0.375rem;border-radius:var(--cat-border-radius-s, 0.125rem);font-size:0.875rem}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .prev-button,.datepicker-controls .next-button{padding-right:0.375rem;padding-left:0.375rem;flex:0 0 14.2857142857%}.datepicker-controls .prev-button.disabled,.datepicker-controls .next-button.disabled{visibility:hidden}.datepicker-view,.datepicker-grid{display:flex}.datepicker-view{align-items:stretch;width:17.5rem}.datepicker-grid{flex-wrap:wrap;flex:auto}.datepicker .days{display:flex;flex-direction:column;flex:auto}.datepicker .days-of-week{display:flex}.datepicker .week-numbers{display:flex;flex-direction:column;flex:0 0 9.6774193548%}.datepicker .weeks{display:flex;flex-direction:column;align-items:stretch;flex:auto}.datepicker span{display:flex;align-items:center;justify-content:center;border-radius:var(--cat-border-radius-m, 0.25rem);cursor:default;-webkit-touch-callout:none;user-select:none}.datepicker .dow{height:2rem;font-size:0.875rem0.9375rem/2;font-weight:700}.datepicker .week{flex:auto;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem}.datepicker-cell,.datepicker .days .dow{flex-basis:14.2857142857%}.datepicker-cell{height:2.5rem}.datepicker-cell:not(.day){flex-basis:25%;height:5rem}.datepicker-cell:not(.disabled):hover{background-color:transparent;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#f2f4f7}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));font-weight:700}.datepicker-cell.disabled{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.datepicker-cell.prev:not(.disabled),.datepicker-cell.next:not(.disabled){color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.datepicker-cell.prev.selected,.datepicker-cell.next.selected{color:rgb(var(--cat-primary-fill, 255, 255, 255))}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){border-radius:0;background-color:#f2f4f7}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#f2f4f7}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#f2f4f7}.datepicker-cell.today:not(.selected){background-color:transparent}.datepicker-cell.today:not(.selected):not(.disabled){color:rgb(var(--cat-primary-text, 0, 129, 148))}.datepicker-cell.today.focused:not(.selected){background-color:#f2f4f7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b8b8b8;color:rgb(var(--cat-primary-fill, 255, 255, 255))}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#b3b3b3}.datepicker-cell.range-start:not(.range-end){border-radius:var(--cat-border-radius-m, 0.25rem) 0 0 var(--cat-border-radius-m, 0.25rem)}.datepicker-cell.range-end:not(.range-start){border-radius:0 var(--cat-border-radius-m, 0.25rem) var(--cat-border-radius-m, 0.25rem) 0}.datepicker-cell.range{border-radius:0;background-color:gainsboro}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d7d7d7}.datepicker-cell.range.disabled{color:#c6c6c6}.datepicker-cell.range.focused{background-color:#d1d1d1}.datepicker-input.in-edit{border-color:#276bda}.datepicker-input.in-edit:focus,.datepicker-input.in-edit:active{box-shadow:none}.datepicker-picker{border:1px solid rgb(var(--cat-border-color, 235, 236, 240))}.datepicker-main{padding:0.5rem 1rem}.datepicker-view:has(.week-numbers){width:19.375rem}.datepicker-view.months,.datepicker-view.years{width:20rem}.datepicker .dow,.datepicker .week{font-size:0.75rem;line-height:1rem;font-weight:700;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.datepicker-cell.today:not(.selected){box-shadow:inset 0 0 0 2px rgb(var(--cat-primary-bg, 0, 129, 148))}.datepicker-cell.focused:not(.selected),.datepicker-cell:not(.selected):not(.disabled):hover{background-color:#f2f4f7}.datepicker-controls{gap:0.5rem}.datepicker-header .datepicker-controls{padding:1rem 1rem 0}.datepicker-header .datepicker-controls .button{height:2.5rem}.datepicker-header .datepicker-controls .prev-button,.datepicker-header .datepicker-controls .next-button{flex-basis:2.5rem;font-size:1.25rem}.datepicker-footer .datepicker-controls{padding:0 1rem 1rem}.datepicker-footer .datepicker-controls .button{margin:0;height:2.5rem;font-size:0.9375rem}.datepicker-footer .datepicker-controls .button:hover,.datepicker-footer .datepicker-controls .button:active{border-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1)::before{content:\"\";width:700%;height:100%;border-radius:var(--cat-border-radius-m, 0.25rem);position:absolute;top:0;left:0;opacity:0;z-index:1}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).today:not(.selected)::before{box-shadow:inset 0 0 0 1.5px #008194;border-radius:var(--cat-border-radius-m, 0.25rem);opacity:1}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1):not(:hover)::before{background:none}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1):hover::before{opacity:1;background-color:transparent}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected,.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected.focused{color:white}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected::before,.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected.focused::before{opacity:1;background-color:rgb(var(--cat-primary-bg, 0, 129, 148));z-index:-1}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).focused{background:none}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).focused::before{opacity:1;background-color:#f2f4f7;z-index:-1}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell{position:relative}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.selected,.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.focused{z-index:2}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.today:not(.selected){box-shadow:none}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell:not(.disabled):hover{background-color:inherit}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.focused{background:none}";
+
+const CatDatepicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.catChange = index.createEvent(this, "catChange", 7);
+    this.catFocus = index.createEvent(this, "catFocus", 7);
+    this.catBlur = index.createEvent(this, "catBlur", 7);
+    this.hasSlottedLabel = false;
+    this.hasSlottedHint = false;
+    this.requiredMarker = 'optional';
+    this.horizontal = false;
+    this.autoComplete = undefined;
+    this.clearable = false;
+    this.disabled = false;
+    this.hint = undefined;
+    this.icon = undefined;
+    this.iconLeft = false;
+    this.identifier = undefined;
+    this.label = '';
+    this.labelHidden = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.name = undefined;
+    this.placeholder = undefined;
+    this.textPrefix = undefined;
+    this.textSuffix = undefined;
+    this.readonly = false;
+    this.required = false;
+    this.format = 'mm/dd/yyyy';
+    this.weekNumbers = true;
+    this.type = 'date';
+    this.datesDisabled = undefined;
+    this.value = undefined;
+    this.errors = undefined;
+    this.errorUpdate = 0;
+    this.nativeAttributes = undefined;
+  }
+  /**
+   * Programmatically move focus to the input. Use this method instead of
    * `input.focus()`.
    *
    * @param options An optional object providing options to control aspects of
@@ -535,37 +3522,176 @@ const CatCheckbox = class {
     this.input.focus(options);
   }
   /**
-   * Programmatically remove focus from the checkbox. Use this method instead of
+   * Programmatically remove focus from the input. Use this method instead of
    * `input.blur()`.
    */
   async doBlur() {
     this.input.blur();
   }
   /**
-   * Programmatically simulate a click on the checkbox.
+   * Programmatically simulate a click on the input.
    */
   async doClick() {
     this.input.click();
   }
+  /**
+   * Clear the input.
+   */
+  async clear() {
+    this.value = '';
+  }
+  componentWillRender() {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+  }
   render() {
-    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, index.h("input", Object.assign({}, this.nativeAttributes, { 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) })), index.h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, index.h("svg", { class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { points: "1.5 5 10.5 5" }))), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) }))));
+    return (index.h(index.Host, null, index.h("cat-input", { ref: el => (this.catInput = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: !this.iconLeft, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: event => this.onCatChange(event), onCatFocus: event => this.onCatFocus(event.detail), onCatBlur: event => this.onCatBlur(event.detail) }, this.hasSlottedLabel && (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))), this.hasSlottedHint && (index.h("span", { slot: "hint" }, index.h("slot", { name: "hint" }))))));
   }
-  onInput(event) {
-    this.checked = this.input.checked;
-    if (!this.value || typeof this.value === 'boolean') {
-      this.value = this.checked;
+  componentDidLoad() {
+    var _a;
+    if (this.hostElement) {
+      const inputWrapper = (_a = this.catInput.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input-wrapper');
+      const inputElement = inputWrapper === null || inputWrapper === void 0 ? void 0 : inputWrapper.querySelector('input');
+      if (inputElement) {
+        this.input = inputElement;
+      }
+      else {
+        catIconRegistry.loglevel.error('[CatInput] Missing input element', this);
+        return;
+      }
+      this.datepicker = new Datepicker(inputElement, Object.assign(Object.assign({}, getDatepickerOptions(this.type, this.value)), { container: inputWrapper, maxDate: this.max, minDate: this.min, datesDisabled: this.datesDisabled, prevArrow: '←', nextArrow: '→', weekNumbers: this.weekNumbers ? 1 : 0, format: {
+          toValue: (dateStr) => this.type === 'week' ? this.fromISOWeek(dateStr) : Datepicker.parseDate(dateStr, this.dateFormat),
+          toDisplay: (date) => this.type === 'week' ? this.toISOWeek(date).toString() : Datepicker.formatDate(date, this.dateFormat)
+        }, beforeShowDay: (date) => (this.shouldHighlightAsToday(date) ? 'today' : null), beforeShowMonth: (date) => (this.shouldHighlightAsToday(date) ? 'today' : null), beforeShowYear: (date) => (this.shouldHighlightAsToday(date) ? 'today' : null) }));
+      if (this.type === 'week') {
+        this.datepicker.pickerElement.classList.add('weekly');
+      }
+      this.input.addEventListener('show', this.handleWeekDays.bind(this));
+      this.input.addEventListener('changeDate', this.handleDateChange.bind(this));
+      this.input.addEventListener('changeMonth', this.handleWeekDays.bind(this));
+      this.input.addEventListener('changeView', this.handleWeekDays.bind(this));
+      this.input.addEventListener('keydown', this.focusAllWeekDays.bind(this));
+    }
+  }
+  disconnectedCallback() {
+    this.input.removeEventListener('show', this.handleWeekDays.bind(this));
+    this.input.removeEventListener('changeDate', this.handleDateChange.bind(this));
+    this.input.removeEventListener('changeMonth', this.handleWeekDays.bind(this));
+    this.input.removeEventListener('changeView', this.handleWeekDays.bind(this));
+    this.input.removeEventListener('keydown', this.focusAllWeekDays.bind(this));
+  }
+  handleDateChange(event) {
+    this.selectAllWeekDays(event.detail.date);
+    this.value = this.input.value;
+    this.catChange.emit();
+  }
+  handleWeekDays(event) {
+    this.selectAllWeekDays(event);
+    this.focusAllWeekDays();
+  }
+  selectAllWeekDays(event) {
+    var _a, _b;
+    const date = event instanceof Date ? event : (_a = event.detail) === null || _a === void 0 ? void 0 : _a.date;
+    if (this.type !== 'week') {
+      return;
+    }
+    if ((_b = this.input) === null || _b === void 0 ? void 0 : _b.value) {
+      const firstDayOfWeek = dayjs_min(date).startOf('isoWeek');
+      if (!firstDayOfWeek.isSame(dayjs_min(date).startOf('day'))) {
+        this.datepicker.setDate(firstDayOfWeek.toDate());
+      }
+      else {
+        this.addClassToAllWeekDays('selected');
+      }
+    }
+  }
+  focusAllWeekDays() {
+    const date = dayjs_min(this.datepicker.picker.viewDate);
+    if (this.type !== 'week' || !date) {
+      return;
+    }
+    const firstDayOfWeek = dayjs_min(date).startOf('isoWeek');
+    if (!firstDayOfWeek.isSame(dayjs_min(date).startOf('day'))) {
+      this.datepicker.setFocusedDate(firstDayOfWeek.toDate());
+    }
+    this.addClassToAllWeekDays('focused');
+  }
+  addClassToAllWeekDays(className) {
+    let weekdaysCount = 7;
+    const pickerElement = this.datepicker.pickerElement;
+    let selected = pickerElement.querySelector(`.datepicker-cell:not(.month):not(.year).${className}`);
+    while (weekdaysCount > 1) {
+      if (selected) {
+        selected = selected.nextElementSibling;
+        selected === null || selected === void 0 ? void 0 : selected.classList.add(className);
+        weekdaysCount--;
+      }
+      else {
+        break;
+      }
     }
+  }
+  onCatChange(event) {
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
-  onFocus(event) {
+  onCatFocus(event) {
     this.catFocus.emit(event);
   }
-  onBlur(event) {
+  onCatBlur(event) {
     this.catBlur.emit(event);
   }
+  shouldHighlightAsToday(date) {
+    const now = new Date();
+    const isSameYear = now.getFullYear() === date.getFullYear();
+    const isSameMonth = now.getMonth() === date.getMonth();
+    const isSameDay = now.getDate() === date.getDate();
+    switch (this.type) {
+      case 'date':
+        return isSameYear && isSameMonth && isSameDay;
+      case 'week':
+        return isSameYear && this.toISOWeek(now) === this.toISOWeek(date);
+      case 'month':
+        return isSameYear && isSameMonth;
+      case 'year':
+        return isSameYear;
+      default:
+        return false;
+    }
+  }
+  // ----- Date handling
+  get dateFormat() {
+    const date = new Date(Date.UTC(3333, 10, 22));
+    const dateStr = new Intl.DateTimeFormat('en-US', {
+      year: 'numeric',
+      month: this.type !== 'year' ? 'numeric' : undefined,
+      day: this.type === 'date' || this.type === 'week' ? 'numeric' : undefined
+    }).format(date);
+    return dateStr.replace('22', 'dd').replace('11', 'mm').replace('3333', 'yyyy');
+  }
+  fromISOWeek(week) {
+    if (typeof week === 'string' || typeof week === 'number') {
+      const weekNumber = parseInt(week.toString(), 10);
+      return isNaN(weekNumber) ? new Date() : this.fromISOWeekNumber(weekNumber);
+    }
+    return week;
+  }
+  fromISOWeekNumber(weekNumber, year = new Date().getFullYear()) {
+    const refDate = new Date(Date.UTC(year, 0, 4)); // January 4th
+    const diffDays = (weekNumber - 1) * 7 - (refDate.getUTCDay() || 7) + 1;
+    const date = new Date(refDate);
+    date.setUTCDate(date.getUTCDate() + diffDays);
+    return date;
+  }
+  toISOWeek(date) {
+    const currentDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    currentDate.setUTCDate(currentDate.getUTCDate() + 4 - (currentDate.getUTCDay() || 7));
+    const firstDayOfYear = new Date(Date.UTC(currentDate.getUTCFullYear(), 0, 1));
+    return Math.ceil(((currentDate.getTime() - firstDayOfYear.getTime()) / 86400000 + 1) / 7);
+  }
   get hostElement() { return index.getElement(this); }
 };
-CatCheckbox.style = catCheckboxCss;
+CatDatepicker.style = catDatepickerCss;
 
 function getAlignment(placement) {
   return placement.split('-')[1];
@@ -1200,18 +4326,17 @@ const size = function (options) {
       }
       const overflowAvailableHeight = height - overflow[heightSide];
       const overflowAvailableWidth = width - overflow[widthSide];
+      const noShift = !state.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
       if (isXAxis) {
-        availableWidth = min$1(
-        // Maximum clipping viewport width
-        width - overflow.right - overflow.left, overflowAvailableWidth);
+        const maximumClippingWidth = width - overflow.left - overflow.right;
+        availableWidth = alignment || noShift ? min$1(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
       } else {
-        availableHeight = min$1(
-        // Maximum clipping viewport height
-        height - overflow.bottom - overflow.top, overflowAvailableHeight);
+        const maximumClippingHeight = height - overflow.top - overflow.bottom;
+        availableHeight = alignment || noShift ? min$1(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
       }
-      if (!state.middlewareData.shift && !alignment) {
+      if (noShift && !alignment) {
         const xMin = max$1(overflow.left, 0);
         const xMax = max$1(overflow.right, 0);
         const yMin = max$1(overflow.top, 0);
@@ -1249,28 +4374,9 @@ function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-
-function getCssDimensions(element) {
-  const css = getComputedStyle$1(element);
-  let width = parseFloat(css.width);
-  let height = parseFloat(css.height);
-  const offsetWidth = element.offsetWidth;
-  const offsetHeight = element.offsetHeight;
-  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
-  if (shouldFallback) {
-    width = offsetWidth;
-    height = offsetHeight;
-  }
-  return {
-    width,
-    height,
-    fallback: shouldFallback
-  };
+function isNode(value) {
+  return value instanceof getWindow(value).Node;
 }
-
 function getNodeName(node) {
   return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
 }
@@ -1294,9 +4400,6 @@ function isHTMLElement(value) {
 function isElement(value) {
   return value instanceof getWindow(value).Element;
 }
-function isNode(value) {
-  return value instanceof getWindow(value).Node;
-}
 function isShadowRoot(node) {
   // Browsers without `ShadowRoot` support.
   if (typeof ShadowRoot === 'undefined') {
@@ -1353,6 +4456,31 @@ function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(node));
 }
 
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    fallback: shouldFallback
+  };
+}
+
 function unwrapElement(element) {
   return !isElement(element) ? element.contextElement : element;
 }
@@ -1434,16 +4562,12 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       currentIFrame = getWindow(currentIFrame).frameElement;
     }
   }
-  return {
+  return rectToClientRect({
     width,
     height,
-    top: y,
-    right: x + width,
-    bottom: y + height,
-    left: x,
     x,
     y
-  };
+  });
 }
 
 function getDocumentElement(node) {
@@ -1642,6 +4766,13 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
   }
   return rectToClientRect(rect);
 }
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
 // clipping (or hiding) child elements. This returns all clipping ancestors
@@ -1659,19 +4790,17 @@ function getClippingElementAncestors(element, cache) {
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
     const computedStyle = getComputedStyle$1(currentNode);
-    const containingBlock = isContainingBlock(currentNode);
-    const shouldIgnoreCurrentNode = computedStyle.position === 'fixed';
-    if (shouldIgnoreCurrentNode) {
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
     } else {
-      const shouldDropCurrentNode = elementIsFixed ? !containingBlock && !currentContainingBlockComputedStyle : !containingBlock && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position);
-      if (shouldDropCurrentNode) {
-        // Drop non-containing blocks.
-        result = result.filter(ancestor => ancestor !== currentNode);
-      } else {
-        // Record last containing block for next iteration.
-        currentContainingBlockComputedStyle = computedStyle;
-      }
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
     }
     currentNode = getParentNode(currentNode);
   }
@@ -1708,10 +4837,7 @@ function getClippingRect(_ref) {
 }
 
 function getDimensions(element) {
-  if (isHTMLElement(element)) {
-    return getCssDimensions(element);
-  }
-  return element.getBoundingClientRect();
+  return getCssDimensions(element);
 }
 
 function getTrueOffsetParent(element, polyfill) {
@@ -1739,6 +4865,9 @@ function getContainingBlock(element) {
 // such as table ancestors and cross browser bugs.
 function getOffsetParent(element, polyfill) {
   const window = getWindow(element);
+  if (!isHTMLElement(element)) {
+    return window;
+  }
   let offsetParent = getTrueOffsetParent(element, polyfill);
   while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
     offsetParent = getTrueOffsetParent(offsetParent, polyfill);
@@ -1823,27 +4952,26 @@ function autoUpdate(reference, floating, update, options) {
     options = {};
   }
   const {
-    ancestorScroll: _ancestorScroll = true,
+    ancestorScroll = true,
     ancestorResize = true,
     elementResize = true,
     animationFrame = false
   } = options;
-  const ancestorScroll = _ancestorScroll && !animationFrame;
   const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
-    ancestorScroll && ancestor.addEventListener('scroll', update, {
-      passive: true
-    });
+    // ignores Window, checks for [object VisualViewport]
+    const isVisualViewport = !isElement(ancestor) && ancestor.toString().includes('V');
+    if (ancestorScroll && (animationFrame ? isVisualViewport : true)) {
+      ancestor.addEventListener('scroll', update, {
+        passive: true
+      });
+    }
     ancestorResize && ancestor.addEventListener('resize', update);
   });
   let observer = null;
   if (elementResize) {
-    let initialUpdate = true;
     observer = new ResizeObserver(() => {
-      if (!initialUpdate) {
-        update();
-      }
-      initialUpdate = false;
+      update();
     });
     isElement(reference) && !animationFrame && observer.observe(reference);
     if (!isElement(reference) && reference.contextElement && !animationFrame) {
@@ -1909,17 +5037,66 @@ const computePosition = (reference, floating, options) => {
 const timeTransitionS = 125;
 
 /*!
-* tabbable 6.0.1
+* tabbable 6.1.2
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
-var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
+// NOTE: separate `:not()` selectors has broader browser support than the newer
+//  `:not([inert], [inert] *)` (Feb 2023)
+// CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes
+//  the entire query to fail, resulting in no nodes found, which will break a lot
+//  of things... so we have to rely on JS to identify nodes inside an inert container
+var candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable="false"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];
 var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
 var NoElement = typeof Element === 'undefined';
 var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
 var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
-  return element.getRootNode();
+  var _element$getRootNode;
+  return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
 } : function (element) {
-  return element.ownerDocument;
+  return element === null || element === void 0 ? void 0 : element.ownerDocument;
+};
+
+/**
+ * Determines if a node is inert or in an inert ancestor.
+ * @param {Element} [node]
+ * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
+ *  see if any of them are inert. If false, only `node` itself is considered.
+ * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
+ *  False if `node` is falsy.
+ */
+var isInert = function isInert(node, lookUp) {
+  var _node$getAttribute;
+  if (lookUp === void 0) {
+    lookUp = true;
+  }
+  // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`
+  //  JS API property; we have to check the attribute, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's an active element
+  var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');
+  var inert = inertAtt === '' || inertAtt === 'true';
+
+  // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`
+  //  if it weren't for `matches()` not being a function on shadow roots; the following
+  //  code works for any kind of node
+  // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`
+  //  so it likely would not support `:is([inert] *)` either...
+  var result = inert || lookUp && node && isInert(node.parentNode); // recursive
+
+  return result;
+};
+
+/**
+ * Determines if a node's content is editable.
+ * @param {Element} [node]
+ * @returns True if it's content-editable; false if it's not or `node` is falsy.
+ */
+var isContentEditable = function isContentEditable(node) {
+  var _node$getAttribute2;
+  // CAREFUL: JSDom does not support the `HTMLElement.isContentEditable` API so we have
+  //  to use the attribute directly to check for this, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's a non-editable element
+  var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, 'contenteditable');
+  return attValue === '' || attValue === 'true';
 };
 
 /**
@@ -1929,6 +5106,11 @@ var getRootNode = !NoElement && Element.prototype.getRootNode ? function (elemen
  * @returns {Element[]}
  */
 var getCandidates = function getCandidates(el, includeContainer, filter) {
+  // even if `includeContainer=false`, we still have to check it for inertness because
+  //  if it's inert, all its children are inert
+  if (isInert(el)) {
+    return [];
+  }
   var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
   if (includeContainer && matches.call(el, candidateSelector)) {
     candidates.unshift(el);
@@ -1976,6 +5158,11 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
   var elementsToCheck = Array.from(elements);
   while (elementsToCheck.length) {
     var element = elementsToCheck.shift();
+    if (isInert(element, false)) {
+      // no need to look up since we're drilling down
+      // anything inside this container will also be inert
+      continue;
+    }
     if (element.tagName === 'SLOT') {
       // add shadow dom slot scope (slot itself cannot be focusable)
       var assigned = element.assignedElements();
@@ -2000,7 +5187,11 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
       var shadowRoot = element.shadowRoot ||
       // check for an undisclosed shadow
       typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
-      var validShadowRoot = !options.shadowRootFilter || options.shadowRootFilter(element);
+
+      // no inert look up because we're already drilling down and checking for inertness
+      //  on the way down, so all containers to this root node should have already been
+      //  vetted as non-inert
+      var validShadowRoot = !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
       if (shadowRoot && validShadowRoot) {
         // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
         //  shadow exists, so look at light dom children as fallback BUT create a scope for any
@@ -2039,7 +5230,7 @@ var getTabindex = function getTabindex(node, isScope) {
     // isScope is positive for custom element with shadow root or slot that by default
     // have tabIndex -1, but need to be sorted by document order in order for their
     // content to be inserted in the correct position
-    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || node.isContentEditable) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
+    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
       return 0;
     }
   }
@@ -2099,7 +5290,7 @@ var isNonTabbableRadio = function isNonTabbableRadio(node) {
 
 // determines if a node is ultimately attached to the window's document
 var isNodeAttached = function isNodeAttached(node) {
-  var _nodeRootHost;
+  var _nodeRoot;
   // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
   //  (but NOT _the_ document; see second 'If' comment below for more).
   // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
@@ -2119,15 +5310,28 @@ var isNodeAttached = function isNodeAttached(node) {
   //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
   //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
   //  node is actually detached.
-  var nodeRootHost = getRootNode(node).host;
-  var attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && _nodeRootHost.ownerDocument.contains(nodeRootHost) || node.ownerDocument.contains(node));
-  while (!attached && nodeRootHost) {
-    var _nodeRootHost2;
-    // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
-    //  which means we need to get the host's host and check if that parent host is contained
-    //  in (i.e. attached to) the document
-    nodeRootHost = getRootNode(nodeRootHost).host;
-    attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && _nodeRootHost2.ownerDocument.contains(nodeRootHost));
+  // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible
+  //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed
+  //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then
+  //  `ownerDocument` will be `null`, hence the optional chaining on it.
+  var nodeRoot = node && getRootNode(node);
+  var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
+
+  // in some cases, a detached node will return itself as the root instead of a document or
+  //  shadow root object, in which case, we shouldn't try to look further up the host chain
+  var attached = false;
+  if (nodeRoot && nodeRoot !== node) {
+    var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
+    attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
+    while (!attached && nodeRootHost) {
+      var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
+      // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
+      //  which means we need to get the host's host and check if that parent host is contained
+      //  in (i.e. attached to) the document
+      nodeRoot = getRootNode(nodeRootHost);
+      nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
+      attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
+    }
   }
   return attached;
 };
@@ -2262,7 +5466,11 @@ var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
   return false;
 };
 var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
-  if (node.disabled || isHiddenInput(node) || isHidden(node, options) ||
+  if (node.disabled ||
+  // we must do an inert look up to filter out any elements inside an inert ancestor
+  //  because we're limited in the type of selectors we can use in JSDom (see related
+  //  note related to `candidateSelectors`)
+  isInert(node) || isHiddenInput(node) || isHidden(node, options) ||
   // For a details element with a summary, the summary element gets the focus
   isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
     return false;
@@ -2366,7 +5574,7 @@ var isFocusable = function isFocusable(node, options) {
 };
 
 /*!
-* focus-trap 7.2.0
+* focus-trap 7.4.3
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
@@ -2575,23 +5783,24 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   /**
    * Finds the index of the container that contains the element.
    * @param {HTMLElement} element
+   * @param {Event} [event]
    * @returns {number} Index of the container in either `state.containers` or
    *  `state.containerGroups` (the order/length of these lists are the same); -1
    *  if the element isn't found.
    */
-  var findContainerIndex = function findContainerIndex(element) {
+  var findContainerIndex = function findContainerIndex(element, event) {
+    var composedPath = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : undefined;
     // NOTE: search `containerGroups` because it's possible a group contains no tabbable
     //  nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
     //  and we still need to find the element in there
     return state.containerGroups.findIndex(function (_ref) {
       var container = _ref.container,
         tabbableNodes = _ref.tabbableNodes;
-      return container.contains(element) ||
-      // fall back to explicit tabbable search which will take into consideration any
+      return container.contains(element) || ( // fall back to explicit tabbable search which will take into consideration any
       //  web components if the `tabbableOptions.getShadowRoot` option was used for
       //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
       //  look inside web components even if open)
-      tabbableNodes.find(function (node) {
+      composedPath === null || composedPath === void 0 ? void 0 : composedPath.includes(container)) || tabbableNodes.find(function (node) {
         return node === element;
       });
     });
@@ -2647,8 +5856,8 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     if (node === false) {
       return false;
     }
-    if (node === undefined) {
-      // option not specified: use fallback options
+    if (node === undefined || !isFocusable(node, config.tabbableOptions)) {
+      // option not specified nor focusable: use fallback options
       if (findContainerIndex(doc.activeElement) >= 0) {
         node = doc.activeElement;
       } else {
@@ -2752,25 +5961,20 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   // so that it precedes the focus event.
   var checkPointerDown = function checkPointerDown(e) {
     var target = getActualTarget(e);
-    if (findContainerIndex(target) >= 0) {
+    if (findContainerIndex(target, e) >= 0) {
       // allow the click since it ocurred inside the trap
       return;
     }
     if (valueOrHandler(config.clickOutsideDeactivates, e)) {
       // immediately deactivate the trap
       trap.deactivate({
-        // if, on deactivation, we should return focus to the node originally-focused
-        //  when the trap was activated (or the configured `setReturnFocus` node),
-        //  then assume it's also OK to return focus to the outside node that was
-        //  just clicked, causing deactivation, as long as that node is focusable;
-        //  if it isn't focusable, then return focus to the original node focused
-        //  on activation (or the configured `setReturnFocus` node)
         // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
         //  which will result in the outside click setting focus to the node
-        //  that was clicked, whether it's focusable or not; by setting
+        //  that was clicked (and if not focusable, to "nothing"); by setting
         //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
-        //  on activation (or the configured `setReturnFocus` node)
-        returnFocus: config.returnFocusOnDeactivate && !isFocusable(target, config.tabbableOptions)
+        //  on activation (or the configured `setReturnFocus` node), whether the
+        //  outside click was on a focusable node or not
+        returnFocus: config.returnFocusOnDeactivate
       });
       return;
     }
@@ -2790,7 +5994,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   // In case focus escapes the trap for some strange reason, pull it back in.
   var checkFocusIn = function checkFocusIn(e) {
     var target = getActualTarget(e);
-    var targetContained = findContainerIndex(target) >= 0;
+    var targetContained = findContainerIndex(target, e) >= 0;
 
     // In Firefox when you Tab out of an iframe the Document is briefly focused.
     if (targetContained || target instanceof Document) {
@@ -2817,7 +6021,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       // make sure the target is actually contained in a group
       // NOTE: the target may also be the container itself if it's focusable
       //  with tabIndex='-1' and was given initial focus
-      var containerIndex = findContainerIndex(target);
+      var containerIndex = findContainerIndex(target, event);
       var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;
       if (containerIndex < 0) {
         // target not found in any group: quite possible focus has escaped the trap,
@@ -2918,7 +6122,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   };
   var checkClick = function checkClick(e) {
     var target = getActualTarget(e);
-    if (findContainerIndex(target) >= 0) {
+    if (findContainerIndex(target, e) >= 0) {
       return;
     }
     if (valueOrHandler(config.clickOutsideDeactivates, e)) {
@@ -2979,6 +6183,43 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     return trap;
   };
 
+  //
+  // MUTATION OBSERVER
+  //
+
+  var checkDomRemoval = function checkDomRemoval(mutations) {
+    var isFocusedNodeRemoved = mutations.some(function (mutation) {
+      var removedNodes = Array.from(mutation.removedNodes);
+      return removedNodes.some(function (node) {
+        return node === state.mostRecentlyFocusedNode;
+      });
+    });
+
+    // If the currently focused is removed then browsers will move focus to the
+    // <body> element. If this happens, try to move focus back into the trap.
+    if (isFocusedNodeRemoved) {
+      tryFocus(getInitialFocusNode());
+    }
+  };
+
+  // Use MutationObserver - if supported - to detect if focused node is removed
+  // from the DOM.
+  var mutationObserver = typeof window !== 'undefined' && 'MutationObserver' in window ? new MutationObserver(checkDomRemoval) : undefined;
+  var updateObservedNodes = function updateObservedNodes() {
+    if (!mutationObserver) {
+      return;
+    }
+    mutationObserver.disconnect();
+    if (state.active && !state.paused) {
+      state.containers.map(function (container) {
+        mutationObserver.observe(container, {
+          subtree: true,
+          childList: true
+        });
+      });
+    }
+  };
+
   //
   // TRAP DEFINITION
   //
@@ -3003,17 +6244,14 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       state.active = true;
       state.paused = false;
       state.nodeFocusedBeforeActivation = doc.activeElement;
-      if (onActivate) {
-        onActivate();
-      }
+      onActivate === null || onActivate === void 0 ? void 0 : onActivate();
       var finishActivation = function finishActivation() {
         if (checkCanFocusTrap) {
           updateTabbableNodes();
         }
         addListeners();
-        if (onPostActivate) {
-          onPostActivate();
-        }
+        updateObservedNodes();
+        onPostActivate === null || onPostActivate === void 0 ? void 0 : onPostActivate();
       };
       if (checkCanFocusTrap) {
         checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
@@ -3036,22 +6274,19 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       removeListeners();
       state.active = false;
       state.paused = false;
+      updateObservedNodes();
       activeFocusTraps.deactivateTrap(trapStack, trap);
       var onDeactivate = getOption(options, 'onDeactivate');
       var onPostDeactivate = getOption(options, 'onPostDeactivate');
       var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');
       var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');
-      if (onDeactivate) {
-        onDeactivate();
-      }
+      onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();
       var finishDeactivation = function finishDeactivation() {
         delay$1(function () {
           if (returnFocus) {
             tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
           }
-          if (onPostDeactivate) {
-            onPostDeactivate();
-          }
+          onPostDeactivate === null || onPostDeactivate === void 0 ? void 0 : onPostDeactivate();
         });
       };
       if (returnFocus && checkCanReturnFocus) {
@@ -3061,21 +6296,31 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       finishDeactivation();
       return this;
     },
-    pause: function pause() {
+    pause: function pause(pauseOptions) {
       if (state.paused || !state.active) {
         return this;
       }
+      var onPause = getOption(pauseOptions, 'onPause');
+      var onPostPause = getOption(pauseOptions, 'onPostPause');
       state.paused = true;
+      onPause === null || onPause === void 0 ? void 0 : onPause();
       removeListeners();
+      updateObservedNodes();
+      onPostPause === null || onPostPause === void 0 ? void 0 : onPostPause();
       return this;
     },
-    unpause: function unpause() {
+    unpause: function unpause(unpauseOptions) {
       if (!state.paused || !state.active) {
         return this;
       }
+      var onUnpause = getOption(unpauseOptions, 'onUnpause');
+      var onPostUnpause = getOption(unpauseOptions, 'onPostUnpause');
       state.paused = false;
+      onUnpause === null || onUnpause === void 0 ? void 0 : onUnpause();
       updateTabbableNodes();
       addListeners();
+      updateObservedNodes();
+      onPostUnpause === null || onPostUnpause === void 0 ? void 0 : onPostUnpause();
       return this;
     },
     updateContainerElements: function updateContainerElements(containerElements) {
@@ -3086,6 +6331,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       if (state.active) {
         updateTabbableNodes();
       }
+      updateObservedNodes();
       return this;
     }
   };
@@ -3099,7 +6345,7 @@ const firstTabbable = (container) => {
   return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
 };
 
-const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding-top:0.5rem;padding-bottom:0.5rem;min-width:8rem;max-width:16rem}.content{position:fixed;background:white;display:none;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100;opacity:0;transition:transform 0.13s cubic-bezier(0.3, 0, 0.8, 0.15), opacity 0.13s cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform:translateY(1rem)}.content[data-placement^=left]{transform:translateX(1rem)}.content[data-placement^=right]{transform:translateX(-1rem)}.content[data-placement^=bottom]{transform:translateY(-1rem)}.content.show{opacity:1;transform:translateX(0);transform:translateY(0);transition:transform 0.5s cubic-bezier(0.05, 0.7, 0.1, 1), opacity 0.5s cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
+const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding-top:0.5rem;padding-bottom:0.5rem;min-width:8rem;max-width:16rem}.content{position:fixed;background:white;display:none;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:100;opacity:0;transition:transform 0.13s cubic-bezier(0.3, 0, 0.8, 0.15), opacity 0.13s cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform:translateY(1rem)}.content[data-placement^=left]{transform:translateX(1rem)}.content[data-placement^=right]{transform:translateX(-1rem)}.content[data-placement^=bottom]{transform:translateY(-1rem)}.content.show{opacity:1;transform:translateX(0);transform:translateY(0);transition:transform 0.5s cubic-bezier(0.05, 0.7, 0.1, 1), opacity 0.5s cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
 
 let nextUniqueId$7 = 0;
 const CatDropdown = class {
@@ -3121,8 +6367,9 @@ const CatDropdown = class {
       this.initTrigger();
       this.toggle();
     }
+    const button = event.target;
     // hide dropdown on button click
-    if (!this.noAutoClose && event.composedPath().includes(this.content)) {
+    if (!this.noAutoClose && event.composedPath().includes(this.content) && button.slot !== 'trigger') {
       this.close();
     }
   }
@@ -3155,9 +6402,15 @@ const CatDropdown = class {
             getShadowRoot: true
           },
           allowOutsideClick: true,
-          clickOutsideDeactivates: event => !this.noAutoClose &&
-            !event.composedPath().includes(this.content) &&
-            (!this.trigger || !event.composedPath().includes(this.trigger)),
+          clickOutsideDeactivates: event => {
+            const shouldClose = !this.noAutoClose &&
+              !event.composedPath().includes(this.content) &&
+              (!this.trigger || !event.composedPath().includes(this.trigger));
+            if (shouldClose) {
+              this.close();
+            }
+            return shouldClose;
+          },
           onPostDeactivate: () => this.close()
         });
       this.trap.activate();
@@ -3167,7 +6420,7 @@ const CatDropdown = class {
    * Closes the dropdown.
    */
   async close() {
-    if (this.isOpen === null) {
+    if (this.isOpen === null || !this.isOpen) {
       return; // busy
     }
     this.isOpen = null;
@@ -3288,7 +6541,7 @@ const CatFormGroup = class {
     return (index.h(index.Host, { style: { '--label-size': this.labelSize } }, index.h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
   }
   onSlotChange() {
-    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-textarea, cat-input, cat-select, cat-label'));
+    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-textarea, cat-input, cat-select, cat-label, cat-datepicker'));
     this.onRequiredMarker(this.requiredMarker);
     this.onHorizontal(this.horizontal);
   }
@@ -3336,7 +6589,7 @@ function isNumberValue(value) {
   return !isNaN(parseFloat(value)) && !isNaN(Number(value));
 }
 
-const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.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}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-character-count{display:flex;align-items:center;margin-left:auto;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):hover.input-invalid{box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.input-wrapper:not(.input-disabled):focus-within.input-invalid{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper.input-invalid{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
+const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.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}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-character-count{display:flex;align-items:center;margin-left:auto;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}.datepicker{width:min-content}.datepicker:not(.active){display:none}.datepicker-dropdown{position:absolute;z-index:20;padding-top:4px}.datepicker-dropdown.datepicker-orient-top{padding-top:0;padding-bottom:4px}.datepicker-picker{display:flex;flex-direction:column;border-radius:var(--cat-border-radius-m, 0.25rem);background-color:white}.datepicker-dropdown .datepicker-picker{box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08)}.datepicker-main{flex:auto;padding:2px}.datepicker-footer{box-shadow:none;background-color:transparent}.datepicker-title{box-shadow:none;background-color:hsl(0, 0%, 96%);padding:0.375rem 0.75rem;text-align:center;font-weight:700}.datepicker-controls{display:flex}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{display:inline-flex;position:relative;align-items:center;justify-content:center;margin:0;border:1px solid rgb(var(--cat-border-color, 235, 236, 240));border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:none;background-color:hsl(0, 0%, 100%);cursor:pointer;padding:calc(0.375em - 1px) 0.75em;height:2.25em;vertical-align:top;text-align:center;line-height:1.5;white-space:nowrap;color:hsl(0, 0%, 21%);font-size:0.9375rem}.datepicker-controls .button:focus,.datepicker-controls .button:active{outline:none}.datepicker-controls .button:hover{border-color:#b8b8b8;color:hsl(0, 0%, 21%)}.datepicker-controls .button:focus{border-color:hsl(217, 71%, 53%);color:hsl(0, 0%, 21%)}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 0.125em rgba(50, 115, 220, 0.25)}.datepicker-controls .button:active{border-color:#474747;color:hsl(0, 0%, 21%)}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:bold}.datepicker-header .datepicker-controls .button:hover{background-color:#f2f4f7}.datepicker-header .datepicker-controls .button:active{background-color:#f2f4f7}.datepicker-footer .datepicker-controls .button{flex:auto;margin:calc(0.375rem - 1px) 0.375rem;border-radius:var(--cat-border-radius-s, 0.125rem);font-size:0.875rem}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .prev-button,.datepicker-controls .next-button{padding-right:0.375rem;padding-left:0.375rem;flex:0 0 14.2857142857%}.datepicker-controls .prev-button.disabled,.datepicker-controls .next-button.disabled{visibility:hidden}.datepicker-view,.datepicker-grid{display:flex}.datepicker-view{align-items:stretch;width:17.5rem}.datepicker-grid{flex-wrap:wrap;flex:auto}.datepicker .days{display:flex;flex-direction:column;flex:auto}.datepicker .days-of-week{display:flex}.datepicker .week-numbers{display:flex;flex-direction:column;flex:0 0 9.6774193548%}.datepicker .weeks{display:flex;flex-direction:column;align-items:stretch;flex:auto}.datepicker span{display:flex;align-items:center;justify-content:center;border-radius:var(--cat-border-radius-m, 0.25rem);cursor:default;-webkit-touch-callout:none;user-select:none}.datepicker .dow{height:2rem;font-size:0.875rem0.9375rem/2;font-weight:700}.datepicker .week{flex:auto;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem}.datepicker-cell,.datepicker .days .dow{flex-basis:14.2857142857%}.datepicker-cell{height:2.5rem}.datepicker-cell:not(.day){flex-basis:25%;height:5rem}.datepicker-cell:not(.disabled):hover{background-color:transparent;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#f2f4f7}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));font-weight:700}.datepicker-cell.disabled{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.datepicker-cell.prev:not(.disabled),.datepicker-cell.next:not(.disabled){color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.datepicker-cell.prev.selected,.datepicker-cell.next.selected{color:rgb(var(--cat-primary-fill, 255, 255, 255))}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){border-radius:0;background-color:#f2f4f7}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#f2f4f7}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#f2f4f7}.datepicker-cell.today:not(.selected){background-color:transparent}.datepicker-cell.today:not(.selected):not(.disabled){color:rgb(var(--cat-primary-text, 0, 129, 148))}.datepicker-cell.today.focused:not(.selected){background-color:#f2f4f7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b8b8b8;color:rgb(var(--cat-primary-fill, 255, 255, 255))}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#b3b3b3}.datepicker-cell.range-start:not(.range-end){border-radius:var(--cat-border-radius-m, 0.25rem) 0 0 var(--cat-border-radius-m, 0.25rem)}.datepicker-cell.range-end:not(.range-start){border-radius:0 var(--cat-border-radius-m, 0.25rem) var(--cat-border-radius-m, 0.25rem) 0}.datepicker-cell.range{border-radius:0;background-color:gainsboro}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d7d7d7}.datepicker-cell.range.disabled{color:#c6c6c6}.datepicker-cell.range.focused{background-color:#d1d1d1}.datepicker-input.in-edit{border-color:#276bda}.datepicker-input.in-edit:focus,.datepicker-input.in-edit:active{box-shadow:none}.datepicker-picker{border:1px solid rgb(var(--cat-border-color, 235, 236, 240))}.datepicker-main{padding:0.5rem 1rem}.datepicker-view:has(.week-numbers){width:19.375rem}.datepicker-view.months,.datepicker-view.years{width:20rem}.datepicker .dow,.datepicker .week{font-size:0.75rem;line-height:1rem;font-weight:700;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.datepicker-cell.today:not(.selected){box-shadow:inset 0 0 0 2px rgb(var(--cat-primary-bg, 0, 129, 148))}.datepicker-cell.focused:not(.selected),.datepicker-cell:not(.selected):not(.disabled):hover{background-color:#f2f4f7}.datepicker-controls{gap:0.5rem}.datepicker-header .datepicker-controls{padding:1rem 1rem 0}.datepicker-header .datepicker-controls .button{height:2.5rem}.datepicker-header .datepicker-controls .prev-button,.datepicker-header .datepicker-controls .next-button{flex-basis:2.5rem;font-size:1.25rem}.datepicker-footer .datepicker-controls{padding:0 1rem 1rem}.datepicker-footer .datepicker-controls .button{margin:0;height:2.5rem;font-size:0.9375rem}.datepicker-footer .datepicker-controls .button:hover,.datepicker-footer .datepicker-controls .button:active{border-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1)::before{content:\"\";width:700%;height:100%;border-radius:var(--cat-border-radius-m, 0.25rem);position:absolute;top:0;left:0;opacity:0;z-index:1}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).today:not(.selected)::before{box-shadow:inset 0 0 0 1.5px #008194;border-radius:var(--cat-border-radius-m, 0.25rem);opacity:1}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1):not(:hover)::before{background:none}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1):hover::before{opacity:1;background-color:transparent}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected,.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected.focused{color:white}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected::before,.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).selected.focused::before{opacity:1;background-color:rgb(var(--cat-primary-bg, 0, 129, 148));z-index:-1}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).focused{background:none}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid :nth-child(7n+1).focused::before{opacity:1;background-color:#f2f4f7;z-index:-1}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell{position:relative}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.selected,.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.focused{z-index:2}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.today:not(.selected){box-shadow:none}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell:not(.disabled):hover{background-color:inherit}.datepicker.weekly .datepicker-view:not(.months):not(.years) .datepicker-grid .datepicker-cell.focused{background:none}:host{display:flex;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 0.13s linear;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.input-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.input-wrapper.input-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
 
 let nextUniqueId$6 = 0;
 const CatInput = class {
@@ -3445,7 +6698,7 @@ const CatInput = class {
         'input-invalid': this.invalid
       }, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && index.h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), index.h("div", { class: "input-inner-wrapper" }, index.h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, class: {
         'has-clearable': this.clearable && !this.disabled
-      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_c = this.hint) === null || _c === void 0 ? void 0 : _c.length) ? this.id + '-hint' : undefined })), this.clearable && !this.disabled && this.value && (index.h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": catIconRegistry.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this) }))), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })), this.invalid && (index.h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_c = this.hint) === null || _c === void 0 ? void 0 : _c.length) ? this.id + '-hint' : undefined })), this.clearable && !this.disabled && this.value && (index.h("cat-button", { class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catIconRegistry.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this) }))), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })), this.invalid && index.h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }), this.textSuffix && (index.h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
   }
   get invalid() {
     return !!this.errorMap;
@@ -3538,6 +6791,7 @@ const catPaginationCss = ":host{display:inline-block}:host([hidden]){display:non
 const CatPagination = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.catChange = index.createEvent(this, "catChange", 7);
     this.page = 0;
     this.pageCount = 1;
     this.activePadding = 1;
@@ -3546,13 +6800,13 @@ const CatPagination = class {
     this.variant = 'text';
     this.round = false;
     this.compact = false;
-    this.iconPrev = 'chevron-left-outlined';
-    this.iconNext = 'chevron-right-outlined';
+    this.iconPrev = '$cat:pagination-left';
+    this.iconNext = '$cat:pagination-right';
   }
   render() {
     return (index.h("nav", { role: "navigation" }, index.h("ol", { class: {
         [`cat-pagination-${this.size}`]: Boolean(this.size)
-      } }, index.h("li", null, index.h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catIconRegistry.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => (this.page = this.page - 1) })), this.content, index.h("li", null, index.h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catIconRegistry.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => (this.page = this.page + 1) })))));
+      } }, index.h("li", null, index.h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catIconRegistry.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", null, index.h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catIconRegistry.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
   }
   get isFirst() {
     return this.page === 0;
@@ -3560,6 +6814,10 @@ const CatPagination = class {
   get isLast() {
     return this.page === this.pageCount - 1;
   }
+  setPage(value) {
+    this.page = value;
+    this.catChange.emit(this.page);
+  }
   get pages() {
     if (!this.sidePadding && !this.activePadding) {
       return [this.page];
@@ -3594,13 +6852,13 @@ const CatPagination = class {
     }
     return this.pages.map((page, i) => [
       i > 0 && this.pages[i - 1] !== page - 1 ? index.h("li", { class: "dots" }, "\u2026") : null,
-      index.h("li", null, index.h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: catIconRegistry.catI18nRegistry.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => (this.page = page) }, page + 1))
+      index.h("li", null, index.h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: catIconRegistry.catI18nRegistry.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => this.setPage(page) }, page + 1))
     ]);
   }
 };
 CatPagination.style = catPaginationCss;
 
-const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden;pointer-events:none}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 0, 129, 148))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) input{border-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .circle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.is-disabled input{background-color:#f2f4f7}.is-disabled input:checked{border-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}.is-disabled .circle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}";
+const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;min-width:0}.input-hint,::slotted([slot=hint]){color:rgb(var(--cat-font-color-muted, 81, 92, 108));line-height:1.5;flex:1 1 auto;min-width: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-placeholder{width:calc(1.25rem + 1px)}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden;pointer-events:none}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 0, 129, 148))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) input{border-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .circle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.is-disabled input{background-color:#f2f4f7}.is-disabled input:checked{border-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}.is-disabled .circle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}";
 
 let nextUniqueId$5 = 0;
 const CatRadio = class {
@@ -3658,7 +6916,7 @@ const CatRadio = class {
     this.input.click();
   }
   render() {
-    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { class: "radio" }, index.h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), index.h("span", { class: "circle" })), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) }))));
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { class: "radio" }, index.h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), index.h("span", { class: "circle" })), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (index.h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { class: "circle-placeholder" }), index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
   }
   onChange(event) {
     this.checked = true;
@@ -4084,7 +7342,7 @@ class SafeSubscriber extends Subscriber {
         let partialObserver;
         if (isFunction(observerOrNext) || !observerOrNext) {
             partialObserver = {
-                next: observerOrNext !== null && observerOrNext !== void 0 ? observerOrNext : undefined,
+                next: (observerOrNext !== null && observerOrNext !== void 0 ? observerOrNext : undefined),
                 error: error !== null && error !== void 0 ? error : undefined,
                 complete: complete !== null && complete !== void 0 ? complete : undefined,
             };
@@ -4478,6 +7736,7 @@ class AsyncAction extends Action {
         this.pending = false;
     }
     schedule(state, delay = 0) {
+        var _a;
         if (this.closed) {
             return this;
         }
@@ -4489,7 +7748,7 @@ class AsyncAction extends Action {
         }
         this.pending = true;
         this.delay = delay;
-        this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);
+        this.id = (_a = this.id) !== null && _a !== void 0 ? _a : this.requestAsyncId(scheduler, this.id, delay);
         return this;
     }
     requestAsyncId(scheduler, _id, delay = 0) {
@@ -4499,7 +7758,9 @@ class AsyncAction extends Action {
         if (delay != null && this.delay === delay && this.pending === false) {
             return id;
         }
-        intervalProvider.clearInterval(id);
+        if (id != null) {
+            intervalProvider.clearInterval(id);
+        }
         return undefined;
     }
     execute(state, delay) {
@@ -4562,7 +7823,6 @@ class AsyncScheduler extends Scheduler {
         super(SchedulerAction, now);
         this.actions = [];
         this._active = false;
-        this._scheduled = undefined;
     }
     flush(action) {
         const { actions } = this;
@@ -5314,7 +8574,7 @@ 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)));
+    return mergeMap((value, index) => innerFrom(delayDurationSelector(value, index)).pipe(take(1), mapTo(value)));
 }
 
 function delay(due, scheduler = asyncScheduler) {
@@ -5445,7 +8705,7 @@ function tap(observerOrNext, error, complete) {
             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 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;inset: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) {
@@ -5634,7 +8894,7 @@ var autosizeInput = function (element, options) {
   }
 };
 
-const catSelectCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.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}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-character-count{display:flex;align-items:center;margin-left:auto;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;flex-direction:column;gap:0.5rem;line-height:1.25rem;position:relative;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.select-field,.select-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.select-field.select-horizontal{flex-direction:row;gap:1rem}.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, 81, 92, 108))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;padding:0.25rem;}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.select-wrapper:not(.select-disabled):hover.select-invalid{box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.select-wrapper:not(.select-disabled):focus-within.select-invalid{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.select-wrapper.select-invalid{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.select-wrapper:has(input:-webkit-autofill),.select-wrapper:has(input:-webkit-autofill):hover,.select-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}.select-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{display:inline-block;padding-left:0.5rem}.select-wrapper-inner>cat-avatar+.select-input{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem;--cat-avatar-font-size:0.5rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-s, 0.125rem);white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0%}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.icon-suffix{padding:0.25rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem}.select-option-inner cat-avatar{--cat-avatar-size:1.25rem;--cat-avatar-font-size:0.5rem}.select-option-text{flex:1 1 0%;min-width:0}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-wrap:break-word;word-break:break-word}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
+const catSelectCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.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}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-character-count{display:flex;align-items:center;margin-left:auto;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;flex-direction:column;gap:0.5rem;line-height:1.25rem;position:relative;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.select-field,.select-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.select-field.select-horizontal{flex-direction:row;gap:1rem}.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, 81, 92, 108))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 0.13s linear;padding:0.25rem;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.select-wrapper:not(.select-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.select-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.select-wrapper.select-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.select-wrapper:has(input:-webkit-autofill),.select-wrapper:has(input:-webkit-autofill):hover,.select-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}.select-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{display:inline-block;padding-left:0.5rem}.select-wrapper-inner>cat-avatar+.select-input{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem;--cat-avatar-font-size:0.5rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-s, 0.125rem);white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0%}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.icon-suffix{padding:0.25rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem}.select-option-inner cat-avatar{--cat-avatar-size:1.25rem;--cat-avatar-font-size:0.5rem}.select-option-text{flex:1 1 0%;min-width:0}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-wrap:break-word;word-break:break-word}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
 
 const INIT_STATE = {
   term: '',
@@ -5643,6 +8903,7 @@ const INIT_STATE = {
   isResolving: false,
   options: [],
   selection: [],
+  tempSelection: [],
   activeOptionIndex: -1,
   activeSelectionIndex: -1
 };
@@ -5768,6 +9029,7 @@ const CatSelect = class {
     }
   }
   onBlur(event) {
+    var _a;
     if (!this.multiple && this.state.activeOptionIndex >= 0) {
       if (this.tags && this.state.options[this.state.activeOptionIndex].item.id === `select-${this.id}-option-tag`) {
         this.createTag(this.state.term);
@@ -5777,7 +9039,18 @@ const CatSelect = class {
       }
     }
     this.hide();
-    this.patchState({ activeSelectionIndex: -1 });
+    if (!this.multiple && ((_a = this.state.tempSelection) === null || _a === void 0 ? void 0 : _a.length)) {
+      this.patchState({
+        activeSelectionIndex: -1,
+        selection: this.state.tempSelection,
+        tempSelection: [],
+        options: [],
+        term: this.state.tempSelection[0].render.label
+      });
+    }
+    else {
+      this.patchState({ activeSelectionIndex: -1 });
+    }
     this.catBlur.emit(event);
     if (coerceBoolean(this.errorUpdate)) {
       this.showErrors();
@@ -5826,7 +9099,10 @@ const CatSelect = class {
         else if (this.state.selection.length) {
           const selectionClone = [...this.state.selection];
           selectionClone.pop();
-          this.patchState({ selection: selectionClone });
+          this.patchState({
+            selection: selectionClone,
+            tempSelection: this.state.term ? [...this.state.selection] : []
+          });
         }
       }
     }
@@ -5913,11 +9189,11 @@ const CatSelect = class {
           pill: true,
           'select-no-open': true,
           'select-option-active': this.state.activeSelectionIndex === i
-        }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: catIconRegistry.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))));
-    }))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, initials: (_a = this.state.selection[0].render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, index.h("input", Object.assign({}, this.nativeAttributes, { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_b = this.hint) === null || _b === void 0 ? void 0 : _b.length) ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving }))), this.state.isResolving && index.h("cat-spinner", null), this.invalid && (index.h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+        }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catIconRegistry.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))));
+    }))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: (_a = this.state.selection[0].render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, index.h("input", Object.assign({}, this.nativeAttributes, { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_b = this.hint) === null || _b === void 0 ? void 0 : _b.length) ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving }))), this.state.isResolving && index.h("cat-spinner", null), this.invalid && (index.h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
       !this.disabled &&
       !this.state.isResolving &&
-      this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: catIconRegistry.catI18nRegistry.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (index.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 ? catIconRegistry.catI18nRegistry.t('select.close') : catIconRegistry.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
+      this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catIconRegistry.catI18nRegistry.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (index.h("cat-button", { iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catIconRegistry.catI18nRegistry.t('select.close') : catIconRegistry.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
       ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
       : !this.state.options.length &&
         !this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : catIconRegistry.catI18nRegistry.t('select.empty')))))))));
@@ -5939,11 +9215,11 @@ const CatSelect = class {
       return (index.h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (index.h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
           !isTagOption ? this.toggle(item) : this.toggleTag(item);
           e.stopPropagation();
-        } }, index.h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, index.h("span", { class: "select-option-text" }, index.h("span", { class: "select-option-label" }, getLabel()), index.h("span", { class: "select-option-description" }, item.render.description))))) : (index.h("div", { class: {
+        } }, index.h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, index.h("span", { class: "select-option-text" }, index.h("span", { class: "select-option-label" }, getLabel()), index.h("span", { class: "select-option-description" }, item.render.description))))) : (index.h("div", { class: {
           'select-option-inner': true,
           '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: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_b = item.render.avatar.initials) !== null && _b !== void 0 ? _b : '' })) : null, index.h("span", { class: "select-option-text" }, index.h("span", { class: "select-option-label" }, getLabel()), index.h("span", { class: "select-option-description" }, item.render.description))))));
+        }, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onClick: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: (_b = item.render.avatar.initials) !== null && _b !== void 0 ? _b : '' })) : null, index.h("span", { class: "select-option-text" }, index.h("span", { class: "select-option-label" }, getLabel()), index.h("span", { class: "select-option-description" }, item.render.description))))));
     });
   }
   resolve() {
@@ -5986,7 +9262,7 @@ const CatSelect = class {
     if (!this.state.isOpen) {
       this.patchState({ isOpen: true });
       this.catOpen.emit();
-      this.term$.next(this.state.term);
+      this.term$.next('');
       (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.remove('select-input-transparent-caret');
     }
   }
@@ -6039,12 +9315,12 @@ const CatSelect = class {
   }
   clear() {
     if (this.input && this.state.term) {
-      this.patchState({ selection: [], options: [], term: '', activeOptionIndex: -1 });
+      this.patchState({ selection: [], options: [], term: '', activeOptionIndex: -1, tempSelection: [] });
       this.term$.next('');
       this.input.value = '';
     }
     else {
-      this.patchState({ selection: [] });
+      this.patchState({ selection: [], tempSelection: [] });
     }
   }
   reset(connector) {
@@ -6070,12 +9346,17 @@ const CatSelect = class {
     }
   }
   onInput() {
-    var _a;
+    var _a, _b;
     this.search(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value.trim()) || '');
-    if (!this.multiple && this.state.selection.length) {
-      const selectionClone = [...this.state.selection];
-      selectionClone.pop();
-      this.patchState({ selection: selectionClone });
+    if (!this.multiple) {
+      if (this.state.selection.length) {
+        const selectionClone = [...this.state.selection];
+        selectionClone.pop();
+        this.patchState({ selection: selectionClone, tempSelection: [...this.state.selection] });
+      }
+      if (!((_b = this.input) === null || _b === void 0 ? void 0 : _b.value.trim())) {
+        this.patchState({ tempSelection: [] });
+      }
     }
     this.show();
   }
@@ -7650,7 +10931,7 @@ const countries = [
   }
 ];
 
-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:var(--cat-border-radius-m, 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 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:var(--cat-border-radius-m, 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((1.125rem - 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) {
@@ -7810,9 +11091,9 @@ const CatTabs = class {
 };
 CatTabs.style = catTabsCss;
 
-var e=new Map;function t(t){var r=e.get(t);r&&r.destroy();}function r(t){var r=e.get(t);r&&r.update();}var o=null;"undefined"==typeof window?((o=function(e){return e}).destroy=function(e){return e},o.update=function(e){return e}):((o=function(t,r){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&"TEXTAREA"===t.nodeName&&!e.has(t)){var r=null,o=window.getComputedStyle(t),n=function(r){window.removeEventListener("resize",l,!1),t.removeEventListener("input",l,!1),t.removeEventListener("keyup",l,!1),t.removeEventListener("autosize:destroy",n,!1),t.removeEventListener("autosize:update",l,!1),Object.keys(r).forEach(function(e){return t.style[e]=r[e]}),e.delete(t);}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener("autosize:destroy",n,!1),window.addEventListener("resize",l,!1),t.addEventListener("input",l,!1),t.addEventListener("autosize:update",l,!1),t.style.overflowX="hidden",t.style.wordWrap="break-word",e.set(t,{destroy:n,update:l}),l();}function l(e){void 0===e&&(e=null);var n=o.overflowY;if(0!==t.scrollHeight){var i,a=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],r=e[1];t.style.scrollBehavior="auto",t.scrollTop=r,t.style.scrollBehavior=null;})}}(t);if(t.style.height="","vertical"===o.resize?t.style.resize="none":"both"===o.resize&&(t.style.resize="horizontal"),i="content-box"===o.boxSizing?t.scrollHeight-(parseFloat(o.paddingTop)+parseFloat(o.paddingBottom)):t.scrollHeight+parseFloat(o.borderTopWidth)+parseFloat(o.borderBottomWidth),"none"!==o.maxHeight&&i>parseFloat(o.maxHeight)?("hidden"===o.overflowY&&(t.style.overflow="scroll"),i=parseFloat(o.maxHeight)):"hidden"!==o.overflowY&&(t.style.overflow="hidden"),t.style.height=i+"px",e&&(t.style.textAlign=e),a(),r!==i&&(t.dispatchEvent(new Event("autosize:resized",{bubbles:!0})),r=i),n!==o.overflow&&!e){var s=o.textAlign;"hidden"===o.overflow&&(t.style.textAlign="start"===s?"end":"start"),l(s);}}}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},o.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e});var n=o;
+var e=new Map;function t(t){var o=e.get(t);o&&o.destroy();}function o(t){var o=e.get(t);o&&o.update();}var r=null;"undefined"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&"TEXTAREA"===t.nodeName&&!e.has(t)){var o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:""===o||!t.value.startsWith(o),restoreTextAlign:null}),o=t.value;}),l=function(o){t.removeEventListener("autosize:destroy",l),t.removeEventListener("autosize:update",s),t.removeEventListener("input",i),window.removeEventListener("resize",s),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t);}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener("autosize:destroy",l),t.addEventListener("autosize:update",s),t.addEventListener("input",i),window.addEventListener("resize",s),t.style.overflowX="hidden",t.style.wordWrap="break-word",e.set(t,{destroy:l,update:s}),s();}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d||d,c=n.overflowY;if(0!==t.scrollHeight&&("vertical"===n.resize?t.style.resize="none":"both"===n.resize&&(t.style.resize="horizontal"),u&&(o=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior="auto",t.scrollTop=o,t.style.scrollBehavior=null;})}}(t),t.style.height=""),i="content-box"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),"none"!==n.maxHeight&&i>parseFloat(n.maxHeight)?("hidden"===n.overflowY&&(t.style.overflow="scroll"),i=parseFloat(n.maxHeight)):"hidden"!==n.overflowY&&(t.style.overflow="hidden"),t.style.height=i+"px",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event("autosize:resized",{bubbles:!0})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;"hidden"===n.overflow&&(t.style.textAlign="start"===v?"end":"start"),a({restoreTextAlign:v,testForHeightReduction:!0});}}function s(){a({testForHeightReduction:!0,restoreTextAlign:null});}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;
 
-const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.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}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-character-count{display:flex;align-items:center;margin-left:auto;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left: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}.textarea-field,.textarea-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.textarea-field.textarea-horizontal{flex-direction:row;gap:1rem}.textarea-wrapper{position:relative;display:flex;flex-direction:column}.icon-suffix{position:absolute;top:calc(0.625rem - 2px);right:0.75rem;background:rgba(255, 255, 255, 0.75);border-radius:100rem}.textarea-disabled .icon-suffix{background:rgba(242, 244, 247, 0.75)}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);border:none;box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;resize:vertical;}textarea:disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108));resize:none}.textarea-invalid textarea{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.textarea-invalid textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.textarea-invalid textarea:focus{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}";
+const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.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}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-character-count{display:flex;align-items:center;margin-left:auto;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left: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}.textarea-field,.textarea-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.textarea-field.textarea-horizontal{flex-direction:row;gap:1rem}.textarea-wrapper{position:relative;display:flex;flex-direction:column}.icon-suffix{position:absolute;top:calc(0.625rem - 2px);right:0.75rem;background:rgba(255, 255, 255, 0.75);border-radius:100rem}.textarea-disabled .icon-suffix{background:rgba(242, 244, 247, 0.75)}textarea{margin:0;padding:0.625rem 0.75rem;box-sizing:border-box;min-height:2.5rem;font:inherit;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);border:none;box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 0.13s linear;resize:vertical;--border-color:var(--cat-border-color-dark, 215, 219, 224);}textarea:disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108));resize:none}textarea:not(:disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.textarea-invalid textarea{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}";
 
 let nextUniqueId$2 = 0;
 const CatTextarea = class {
@@ -7906,7 +11187,7 @@ const CatTextarea = class {
         'textarea-wrapper': true,
         'textarea-disabled': this.disabled,
         'textarea-invalid': this.invalid
-      } }, index.h("textarea", Object.assign({}, this.nativeAttributes, { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_c = this.hint) === null || _c === void 0 ? void 0 : _c.length) ? this.id + '-hint' : undefined })), this.invalid && (index.h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+      } }, index.h("textarea", Object.assign({}, this.nativeAttributes, { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_c = this.hint) === null || _c === void 0 ? void 0 : _c.length) ? this.id + '-hint' : undefined })), this.invalid && (index.h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
   }
   get invalid() {
     return !!this.errorMap;
@@ -7950,7 +11231,167 @@ const CatTextarea = class {
 };
 CatTextarea.style = catTextareaCss;
 
-const catToggleCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host{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}.label-left{flex-direction:row-reverse}input{position:absolute;margin:0;width:2rem;height:1.25rem;opacity:0;cursor:inherit}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:rgb(var(--cat-border-color-dark, 215, 219, 224));transition:background-color 0.13s ease;pointer-events:none}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 0, 129, 148))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 0.13s linear;box-shadow:0 1px 2px rgba(27, 31, 38, 0.06), 0 1px 3px rgba(27, 31, 38, 0.1)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem));background:rgb(var(--cat-primary-fill, 255, 255, 255))}.is-disabled .toggle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}:host(.cat-error) .toggle{background-color:rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}:host(.cat-error) :checked+.toggle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.toggle::after{background:rgb(var(--cat-danger-fill, 255, 255, 255))}.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, 81, 92, 108))}";
+const catTimepickerCss = "";
+
+const CatTimepicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.catOpen = index.createEvent(this, "catOpen", 7);
+    this.catClose = index.createEvent(this, "catClose", 7);
+    this.catChange = index.createEvent(this, "catChange", 7);
+    this.catBlur = index.createEvent(this, "catBlur", 7);
+    this.state = undefined;
+    this.hasSlottedLabel = false;
+    this.hasSlottedHint = false;
+    this.errorMap = undefined;
+    this.requiredMarker = 'optional';
+    this.horizontal = false;
+    this.multiple = false;
+    this.placement = 'bottom-start';
+    this.value = undefined;
+    this.disabled = false;
+    this.placeholder = undefined;
+    this.hint = undefined;
+    this.identifier = undefined;
+    this.label = '';
+    this.name = undefined;
+    this.labelHidden = false;
+    this.required = false;
+    this.clearable = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.noItems = undefined;
+    this.errors = undefined;
+    this.errorUpdate = 0;
+    this.nativeAttributes = undefined;
+    this.minutesStep = 30;
+    this.hourShort = this.isBrowserHour12();
+  }
+  componentWillRender() {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+  }
+  componentDidLoad() {
+    var _a;
+    (_a = this.timeSelect) === null || _a === void 0 ? void 0 : _a.connect(this.timeConnector);
+    // IMask spike
+    // const input = this.hostElement.shadowRoot?.querySelector('cat-select')?.shadowRoot?.querySelector('input');
+    // if (input) {
+    //   this.timeMask = this.getTimeMask(input);
+    // }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("cat-select", { requiredMarker: this.requiredMarker, horizontal: this.horizontal, clearable: this.clearable, disabled: this.disabled, hint: this.hint, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, multiple: this.multiple, placeholder: this.placeholder, placement: this.placement, required: this.required, noItems: this.noItems, ref: el => (this.timeSelect = el), value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: event => this.onCatChange(event), onCatOpen: this.onCatOpen.bind(this), onCatClose: this.onCatClose.bind(this), onCatBlur: this.onCatBlur.bind(this) }, this.hasSlottedLabel && (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))), this.hasSlottedHint && (index.h("span", { slot: "hint" }, index.h("slot", { name: "hint" }))))));
+  }
+  get timeConnector() {
+    return {
+      resolve: (times) => {
+        return of(times.map(t => this.timeArray.find(time => time.hour === this.getHour(t) && time.minutes === this.getMinutes(t))));
+      },
+      retrieve: (term) => {
+        const filteredTimeArray = this.timeArray.filter(t => {
+          if (!term)
+            return true;
+          const formatedTime = this.hourShort ? this.formatAMPM(t.hour, t.minutes) : this.formatTime(t.hour, t.minutes);
+          return formatedTime.toUpperCase().includes(term.toUpperCase());
+        });
+        return of({
+          last: true,
+          totalElements: filteredTimeArray.length,
+          content: filteredTimeArray
+        });
+      },
+      render: ({ hour, minutes }) => ({
+        label: this.hourShort ? this.formatAMPM(hour, minutes) : this.formatTime(hour, minutes)
+      })
+    };
+  }
+  get timeArray() {
+    const times = [];
+    for (let hour = 0; hour < 24; hour++) {
+      for (let minutes = 0; minutes < 60; minutes += this.minutesStep) {
+        if (this.isHigherThanMinValue(hour, minutes) && this.isLowerThanMaxValue(hour, minutes)) {
+          times.push({
+            id: this.hourShort ? this.formatAMPM(hour, minutes) : this.formatTime(hour, minutes),
+            hour,
+            minutes
+          });
+        }
+      }
+    }
+    return times;
+  }
+  isBrowserHour12() {
+    var _a, _b;
+    const browserLanguage = (_b = (_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.language) !== null && _b !== void 0 ? _b : 'en';
+    const hour = new Intl.DateTimeFormat(browserLanguage, { hour: 'numeric' }).format(new Date().setHours(16));
+    return hour.toLowerCase().includes('pm' );
+  }
+  getHour(time) {
+    let hour = Number(time.split(':')[0]);
+    if (time.toLowerCase().includes('pm') && hour < 12)
+      hour = hour + 12;
+    if (time.toLowerCase().includes('am') && hour == 12)
+      hour = hour - 12;
+    return hour;
+  }
+  getMinutes(time) {
+    const minutes = time.match(/:(\d+)/);
+    return Number(minutes ? minutes[1] : 0);
+  }
+  isHigherThanMinValue(hour, minutes) {
+    if (this.min) {
+      const minHour = this.getHour(this.min);
+      const minMinutes = this.getMinutes(this.min);
+      return hour > minHour || (hour === minHour && minutes >= minMinutes);
+    }
+    return true;
+  }
+  isLowerThanMaxValue(hour, minutes) {
+    if (this.max) {
+      const maxHour = this.getHour(this.max);
+      const maxMinutes = this.getMinutes(this.max);
+      return hour < maxHour || (hour === maxHour && minutes <= maxMinutes);
+    }
+    return true;
+  }
+  formatAMPM(hour, minutes) {
+    if (hour === 0) {
+      return `12:${minutes < 10 ? `0${minutes}` : minutes} AM`;
+    }
+    else if (hour < 12) {
+      return `${hour < 10 ? `0${hour}` : hour}:${minutes < 10 ? `0${minutes}` : minutes} AM`;
+    }
+    else {
+      return `${hour % 12 < 10 ? `0${hour % 12}` : hour % 12}:${minutes < 10 ? `0${minutes}` : minutes} PM`;
+    }
+  }
+  formatTime(hour, minutes) {
+    return `${hour < 10 ? `0${hour}` : hour}:${minutes < 10 ? `0${minutes}` : minutes}`;
+  }
+  onCatChange(event) {
+    var _a;
+    event.stopPropagation();
+    this.value = (_a = this.timeSelect) === null || _a === void 0 ? void 0 : _a.value;
+    this.catChange.emit(event);
+  }
+  onCatOpen(event) {
+    event.stopPropagation();
+    this.catOpen.emit(event);
+  }
+  onCatClose(event) {
+    event.stopPropagation();
+    this.catClose.emit(event);
+  }
+  onCatBlur(event) {
+    event.stopPropagation();
+    this.catBlur.emit(event);
+  }
+  get hostElement() { return index.getElement(this); }
+};
+CatTimepicker.style = catTimepickerCss;
+
+const catToggleCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;min-width:0}.input-hint,::slotted([slot=hint]){color:rgb(var(--cat-font-color-muted, 81, 92, 108));line-height:1.5;flex:1 1 auto;min-width: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}.label-left{flex-direction:row-reverse}input{position:absolute;margin:0;width:2rem;height:1.25rem;opacity:0;cursor:inherit}.toggle-placeholder{width:calc(2rem + 1px)}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:rgb(var(--cat-border-color-dark, 215, 219, 224));transition:background-color 0.13s ease;pointer-events:none}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 0, 129, 148))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 0.13s linear;box-shadow:0 1px 2px rgba(27, 31, 38, 0.06), 0 1px 3px rgba(27, 31, 38, 0.1)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem));background:rgb(var(--cat-primary-fill, 255, 255, 255))}.is-disabled .toggle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}:host(.cat-error) .toggle{background-color:rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}:host(.cat-error) :checked+.toggle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.toggle::after{background:rgb(var(--cat-danger-fill, 255, 255, 255))}.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, 81, 92, 108))}";
 
 let nextUniqueId$1 = 0;
 const CatToggle = class {
@@ -8008,7 +11449,7 @@ const CatToggle = class {
     this.input.click();
   }
   render() {
-    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, index.h("input", Object.assign({}, this.nativeAttributes, { 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) })), index.h("span", { class: "toggle", part: "toggle" }), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) }))));
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, index.h("input", Object.assign({}, this.nativeAttributes, { 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) })), index.h("span", { class: "toggle", part: "toggle" }), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (index.h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { class: "toggle-placeholder" }), index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
   }
   onInput(event) {
     this.checked = this.input.checked;
@@ -8029,7 +11470,7 @@ CatToggle.style = catToggleCss;
 
 const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
-const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{--cat-font-color-head:cat-token(\"color.ui.font.tooltip\", $wrap: false);--cat-font-color-body:cat-token(\"color.ui.font.tooltip\", $wrap: false);position:fixed;width:max-content;top:0;left:0;box-sizing:border-box;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:min(100vw - 0.5rem, 20rem)}.tooltip-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}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}";
+const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{--cat-font-color-head:cat-token(\"color.ui.font.tooltip\", $wrap: false);--cat-font-color-body:cat-token(\"color.ui.font.tooltip\", $wrap: false);position:fixed;width:max-content;top:0;left:0;box-sizing:border-box;font-size:0.875rem;line-height:1.125rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:min(100vw - 0.5rem, 20rem)}.tooltip-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}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}";
 
 let nextUniqueId = 0;
 const CatTooltip = class {
@@ -8166,6 +11607,7 @@ exports.cat_button = CatButton;
 exports.cat_button_group = CatButtonGroup;
 exports.cat_card = CatCard;
 exports.cat_checkbox = CatCheckbox;
+exports.cat_datepicker = CatDatepicker;
 exports.cat_dropdown = CatDropdown;
 exports.cat_form_group = CatFormGroup;
 exports.cat_icon = CatIcon;
@@ -8182,7 +11624,8 @@ exports.cat_spinner = CatSpinner;
 exports.cat_tab = CatTab;
 exports.cat_tabs = CatTabs;
 exports.cat_textarea = CatTextarea;
+exports.cat_timepicker = CatTimepicker;
 exports.cat_toggle = CatToggle;
 exports.cat_tooltip = CatTooltip;
 
-//# sourceMappingURL=cat-alert_25.cjs.entry.js.map
+//# sourceMappingURL=cat-alert_27.cjs.entry.js.map