@haiilo/catalyst 10.3.1 → 10.5.0

package/dist/cjs/{cat-alert_28.cjs.entry.js → cat-alert_29.cjs.entry.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-13aff0b4.js');
-const of = require('./of-45281229.js');
+const of = require('./of-8163b41f.js');
 
 const ObjectUnsubscribedError = of.createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
     _super(this);
@@ -1044,7 +1044,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 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-group-button-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-group-button-middle{border-radius:0}.cat-group-button-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-group-button:hover{z-index:1}.cat-group-button:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text))}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding-left:0;padding-right:0}";
+const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-group-button-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-group-button-middle{border-radius:0}.cat-group-button-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-group-button:hover{z-index:1}.cat-group-button:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text))}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}";
 const CatButtonStyle0 = catButtonCss;
 
 const CatButton = class {
@@ -1388,6 +1388,7 @@ function getLocale$2(language) {
         today: of.catI18nRegistry.t('datepicker.today'),
         change: of.catI18nRegistry.t('datepicker.change'),
         choose: of.catI18nRegistry.t('datepicker.choose'),
+        clear: of.catI18nRegistry.t('datepicker.clear'),
         formatStr: getFormat$1(language),
         weekInfo: getWeekInfo(language),
         days: {
@@ -1397,7 +1398,27 @@ function getLocale$2(language) {
         months: {
             short: getMonths(language, 'short'),
             long: getMonths(language, 'long')
-        }
+        },
+        now: () => {
+            const date = new Date();
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        },
+        fromLocalISO: (date) => {
+            const [match, year, month, day] = date?.match(/^(\d{4})-(\d{2})-(\d{2})/) ?? [];
+            return match ? new Date(Number(year), Number(month) - 1, Number(day)) : null;
+        },
+        toLocalISO: (date) => {
+            const year = date.getFullYear();
+            const month = (date.getMonth() + 1).toString().padStart(2, '0');
+            const day = date.getDate().toString().padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        },
+        toLocalStr: (date) => new Intl.DateTimeFormat(language, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            weekday: 'long'
+        }).format(date)
     };
 }
 
@@ -1429,7 +1450,7 @@ function clampDate(min, date, max) {
     return new Date(Math.min(Math.max(date.getTime(), min?.getTime() ?? -Infinity), max?.getTime() ?? Infinity));
 }
 
-const catDateCss = ":host{display:block}:host([hidden]){display:none}.label-aria{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.picker{padding:1rem;display:inline-flex;flex-direction:column}.picker-head{display:flex;gap:0.5rem;align-items:center}.picker-head h3{flex:1;text-align:center;margin:0}.picker-grid{display:grid;grid-template-rows:2rem repeat(6, 1fr);grid-template-columns:2rem repeat(7, 1fr);grid-template-areas:\". h h h h h h h\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\";margin:1rem 0 0.5rem}.picker-grid-head{grid-area:h;display:grid;grid-template-columns:repeat(7, 1fr);place-items:end center;padding-bottom:0.5rem}.picker-grid-weeks{grid-area:w;display:grid;grid-template-rows:repeat(6, 1fr);place-items:center right;padding-right:0.5rem}.picker-grid-days{grid-area:d;display:grid;grid-template-rows:repeat(6, 1fr);grid-template-columns:repeat(7, 1fr)}.picker-grid-head>*,.picker-grid-weeks>*{font-size:0.75rem;line-height:1rem;font-weight:600;color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;text-decoration:none}.date-other{opacity:0.5}.date-disabled{opacity:0.25}.picker-foot{display:flex;gap:1rem;align-items:center}.cursor-help{flex:1;margin:0;font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;text-align:center}.cursor-help.cursor-right{text-align:right}.cursor-aria{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}";
+const catDateCss = ":host{display:block}:host([hidden]){display:none}.label-aria{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}cat-date-inline{margin:1rem}";
 const CatDateStyle0 = catDateCss;
 
 const CatDate = class {
@@ -1440,13 +1461,8 @@ const CatDate = class {
         this.catBlur = index.createEvent(this, "catBlur", 7);
         this.language = of.catI18nRegistry.getLocale();
         this.locale = getLocale$2(this.language);
-        this.isOpen = false;
-        // additonally store the focus date to ensure correct focus after potential re-render
-        this.focusDate = null;
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
-        this.viewDate = this.now;
-        this.selectionDate = null;
         this.requiredMarker = 'optional';
         this.horizontal = false;
         this.autoComplete = undefined;
@@ -1472,29 +1488,14 @@ const CatDate = class {
         this.nativeAttributes = undefined;
         this.placement = 'bottom-end';
     }
-    get maxDate() {
-        const [y, m, d] = this.max?.split('-').map(Number) || [];
-        return this.max ? new Date(y, m - 1, d) : null;
-    }
-    get minDate() {
-        const [y, m, d] = this.min?.split('-').map(Number) || [];
-        return this.min ? new Date(y, m - 1, d) : null;
-    }
-    get now() {
-        const date = new Date();
-        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-    }
-    get focusedDate() {
-        const [all, year, month, day] = this.hostElement.shadowRoot
-            ?.querySelector(`[data-date]:focus`)
-            ?.dataset.date?.match(/^(\d{4})-(\d{2})-(\d{2})/) ?? [];
-        return all ? new Date(Number(year), Number(month) - 1, Number(day)) : null;
-    }
-    componentWillLoad() {
+    get inputValue() {
         const [match, year, month, day] = this.value?.match(/^(\d{4})-(\d{2})-(\d{2})/) ?? [];
         if (match) {
-            this.select(new Date(Number(year), Number(month) - 1, Number(day)));
+            const date = new Date(Number(year), Number(month) - 1, Number(day));
+            const format = new Intl.DateTimeFormat(this.language, { year: 'numeric', month: '2-digit', day: '2-digit' });
+            return format.format(date);
         }
+        return '';
     }
     componentWillRender() {
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
@@ -1511,49 +1512,155 @@ const CatDate = class {
             datePattern: [p1, p2, p3]
         });
     }
+    /**
+     * Programmatically move focus to the input. 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?.doFocus(options);
+    }
+    /**
+     * Programmatically remove focus from the input. Use this method instead of
+     * `input.blur()`.
+     */
+    async doBlur() {
+        this.input?.doBlur();
+    }
+    /**
+     * Clear the input.
+     */
+    async clear() {
+        this.input?.clear();
+    }
+    render() {
+        return (index.h(index.Host, { key: '6f8ed88396eb9932a91f26e1f32086a573f82add' }, index.h("cat-input", { key: 'e73ec2bceb1cd648e14d8917ebf7fb6c99079408', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, value: this.inputValue, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '8fb02c395b64728db2a2f5d4896e3151b3dc5aec', slot: "label" }, this.label, index.h("span", { key: 'f08e83d369b1f35d45fb4c0b2c39a9ad52b68b77', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: '48ee8472fab9d59b511df69afbbc348aa7b04828', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: 'b12ea88e170c2c8d916e9553b0bb205fae5e5d45', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: '9173b680adcf83c32a7c10e818acbab188cfd979', slot: "content" }, index.h("cat-date-inline", { key: '997bc3bb5137d860893732234442feda61cd3d21', ref: el => (this.dateInline = el), min: this.min, max: this.max, value: this.value, noClear: true, onCatChange: this.onDateChange.bind(this) }))))));
+    }
+    getTriggerA11yLabel() {
+        const date = this.locale.fromLocalISO(this.value);
+        return date ? `${this.locale.change}, ${this.locale.toLocalStr(date)}` : this.locale.choose;
+    }
+    onInputBlur(e) {
+        if (!this.input) {
+            return;
+        }
+        const oldValue = this.value;
+        const dateParsed = this.parse(this.input.value ?? '');
+        const dateMin = this.locale.fromLocalISO(this.min);
+        const dateMax = this.locale.fromLocalISO(this.max);
+        const date = dateParsed ? clampDate(dateMin, dateParsed, dateMax) : null;
+        this.value = date ? this.locale.toLocalISO(date) : undefined;
+        if (oldValue !== this.value) {
+            if (date) {
+                this.dateInline?.select(date);
+            }
+            else {
+                this.dateInline?.clear();
+            }
+            this.catChange.emit(this.value);
+        }
+        this.input.value = this.inputValue;
+        this.catBlur.emit(e);
+    }
+    onDateChange(e) {
+        const oldValue = this.value;
+        const date = e.detail ? new Date(e.detail) : null;
+        this.value = date ? this.locale.toLocalISO(date) : undefined;
+        if (oldValue !== this.value) {
+            this.catChange.emit(this.value);
+        }
+    }
+    parse(value) {
+        const [, p1, d1, p2, p3] = /(\w+)([^\w]+)(\w+)[^\w]+(\w+)/.exec(this.locale.formatStr) || [];
+        const formatParts = [p1, p2, p3];
+        const parts = value.split(d1).map(s => Number(s || 'x'));
+        let year = parts[formatParts.indexOf('YYYY') || formatParts.indexOf('YY')] || this.locale.now().getFullYear();
+        const month = parts[formatParts.indexOf('MM')];
+        const day = parts[formatParts.indexOf('DD')];
+        if (!Number.isInteger(month) || !Number.isInteger(day)) {
+            return null;
+        }
+        else if (year < 100) {
+            year += year < 50 ? 2000 : 1900;
+        }
+        return new Date(year, month - 1, day);
+    }
+    get hostElement() { return index.getElement(this); }
+};
+CatDate.style = CatDateStyle0;
+
+const catDateInlineCss = ":host{display:inline-block}:host([hidden]){display:none}.picker{display:flex;flex-direction:column;min-width:19.5rem;max-width:30rem}.picker.picker-weeks{min-width:17.5rem;max-width:28rem}.picker.picker-small{min-width:16rem;max-width:23rem}.picker.picker-small.picker-weeks{min-width:14rem;max-width:21rem}.picker-head{display:flex;gap:0.5rem;align-items:center}.picker-head h3{font-size:1.125rem;line-height:1.5rem;font-weight:var(--cat-font-weight-head, 600);font-feature-settings:\"pnum\";flex:1;text-align:center;margin:0}.picker-small .picker-head{gap:0.25rem}.picker-small .picker-head h3{font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-head, 600);font-feature-settings:\"pnum\"}.picker-grid{display:grid;grid-template-rows:2rem repeat(6, 1fr);grid-template-columns:repeat(7, 1fr);grid-template-areas:\"h h h h h h h\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\";margin:1rem 0 0.5rem}.picker-weeks .picker-grid{grid-template-columns:2rem repeat(7, 1fr);grid-template-areas:\". h h h h h h h\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\";}.picker-small .picker-grid{margin:0.5rem 0}.picker-grid-head{grid-area:h;display:grid;grid-template-columns:repeat(7, 1fr);place-items:end center;padding-bottom:0.5rem}.picker-grid-weeks{grid-area:w;display:grid;grid-template-rows:repeat(6, 1fr);place-items:center right;padding-right:0.5rem}.picker-grid-days{grid-area:d;display:grid;grid-template-rows:repeat(6, 1fr);grid-template-columns:repeat(7, 1fr)}.picker-grid-head>*,.picker-grid-weeks>*{font-size:0.75rem;line-height:1rem;font-weight:600;color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;text-decoration:none}.date-other{opacity:0.5}.date-disabled{opacity:0.25}.picker-foot{display:flex;gap:1rem;align-items:center;width:min-content;min-width:100%;justify-content:space-between}.picker-small .picker-foot{gap:0.5rem}.cursor-help{margin:0;font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;text-align:center;flex:1}.cursor-help:first-child{text-align:left}.cursor-help:last-child{text-align:right}.cursor-help:only-child{text-align:center}.picker-small .cursor-help{font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400)}.cursor-aria{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.date-range{--cat-border-radius-m:0}";
+const CatDateInlineStyle0 = catDateInlineCss;
+
+const CatDateInline = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.catChange = index.createEvent(this, "catChange", 7);
+        this.language = of.catI18nRegistry.getLocale();
+        this.locale = getLocale$2(this.language);
+        // additonally store the focus date to ensure correct focus after potential re-render
+        this.focusDate = null;
+        this.viewDate = this.locale.now();
+        this.noClear = false;
+        this.noHint = false;
+        this.noToday = false;
+        this.noWeeks = false;
+        this.size = 'm';
+        this.min = undefined;
+        this.max = undefined;
+        this.range = false;
+        this.value = undefined;
+    }
+    get focusedDate() {
+        const [all, year, month, day] = this.hostElement.shadowRoot
+            ?.querySelector(`[data-date]:focus`)
+            ?.dataset.date?.match(/^(\d{4})-(\d{2})-(\d{2})/) ?? [];
+        return all ? new Date(Number(year), Number(month) - 1, Number(day)) : null;
+    }
+    componentWillLoad() {
+        // select the initial value
+        const [startDate, endDate] = this.getValue();
+        this.select(startDate);
+        if (this.range && endDate) {
+            this.select(endDate);
+        }
+    }
     componentDidRender() {
         if (this.focusDate) {
+            // re-focus the previously focused date after re-render
             this.hostElement.shadowRoot
-                ?.querySelector(`[data-date="${this.toLocalISO(this.focusDate)}"]`)
+                ?.querySelector(`[data-date="${this.locale.toLocalStr(this.focusDate)}"]`)
                 ?.doFocus();
             this.focusDate = null;
         }
     }
-    onOpen() {
-        this.isOpen = true;
-        this.setAriaLive('');
-        const viewDate = this.selectionDate
-            ? new Date(this.selectionDate.getFullYear(), this.selectionDate.getMonth(), 1)
-            : this.now;
-        this.viewDate = clampDate(this.minDate, viewDate, this.maxDate);
-    }
-    onClose() {
-        this.isOpen = false;
-    }
     onKeyDown(e) {
-        if (!this.isOpen || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
+        if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
             return;
         }
-        const focused = this.focusedDate;
-        if (!focused) {
+        const focusedDate = this.focusedDate;
+        if (!focusedDate) {
             e.preventDefault();
-            this.focus(this.selectionDate || this.now);
+            const [startDate] = this.getValue();
+            this.focus(startDate || this.locale.now());
         }
         else if (e.key === 'ArrowLeft') {
             e.preventDefault();
-            this.focus(e.shiftKey ? addMonth(focused, -1) : addDays(focused, -1));
+            this.focus(e.shiftKey ? addMonth(focusedDate, -1) : addDays(focusedDate, -1));
         }
         else if (e.key === 'ArrowRight') {
             e.preventDefault();
-            this.focus(e.shiftKey ? addMonth(focused, 1) : addDays(focused, 1));
+            this.focus(e.shiftKey ? addMonth(focusedDate, 1) : addDays(focusedDate, 1));
         }
         else if (e.key === 'ArrowUp') {
             e.preventDefault();
-            this.focus(addDays(focused, -7));
+            this.focus(addDays(focusedDate, -7));
         }
         else if (e.key === 'ArrowDown') {
             e.preventDefault();
-            this.focus(addDays(focused, 7));
+            this.focus(addDays(focusedDate, 7));
         }
     }
     /**
@@ -1562,76 +1669,76 @@ const CatDate = class {
      * @param date The date to select.
      */
     async select(date) {
+        if (!date) {
+            return this.clear();
+        }
         const oldValue = this.value;
-        const newDate = clampDate(this.minDate, new Date(date.getFullYear(), date.getMonth(), date.getDate()), this.maxDate);
+        const [minDate, maxDate] = this.getMinMaxDate();
+        const newDate = clampDate(minDate, new Date(date.getFullYear(), date.getMonth(), date.getDate()), maxDate);
         this.focus(newDate);
-        this.selectionDate = newDate;
-        this.value = newDate.toISOString();
+        if (this.range) {
+            const [startDate, endDate] = this.getValue();
+            if (!startDate || endDate || newDate < startDate) {
+                this.value = this.toRangeValue(newDate, null);
+            }
+            else {
+                this.value = this.toRangeValue(startDate, newDate);
+            }
+        }
+        else {
+            this.value = this.locale.toLocalISO(newDate);
+        }
         if (oldValue !== this.value) {
             this.catChange.emit(this.value);
         }
     }
     /**
-     * Programmatically move focus to the input. 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?.doFocus(options);
-    }
-    /**
-     * Programmatically remove focus from the input. Use this method instead of
-     * `input.blur()`.
+     * Clear the picker.
      */
-    async doBlur() {
-        this.input?.doBlur();
+    async clear() {
+        const oldValue = this.value;
+        this.value = undefined;
+        if (oldValue !== this.value) {
+            this.catChange.emit(this.value);
+        }
     }
     /**
-     * Clear the input.
+     * Resets the view of the picker.
      */
-    async clear() {
-        this.input?.clear();
+    async resetView() {
+        const [minDate, maxDate] = this.getMinMaxDate();
+        const [dateStart] = this.getValue();
+        this.viewDate = dateStart ?? clampDate(minDate, this.locale.now(), maxDate);
     }
     render() {
+        const [minDate, maxDate] = this.getMinMaxDate();
         const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
-        return (index.h(index.Host, { key: 'ebb5f193ca43bc3306449c91d2e391cb25b3287c' }, index.h("cat-input", { key: '27292844d077a8d79022074a191c47e72736d2c5', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, value: this.getInputValue(), onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: 'e9c9ad5b5374fcf944396a7ae45ae61775336be4', slot: "label" }, this.label, index.h("span", { key: '5a05917857fdc967bb122e0403f64b8b71ecf08a', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: 'ac1b7f5e1efae2648fa82acb31059ab41d0adb55', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true }, index.h("cat-button", { key: 'bfaabd6f8120333b497b262894489628beb1d886', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.selectionDate
-                ? `${this.locale.change}, ${this.getA11yLabelDay(this.selectionDate)}`
-                : this.locale.choose }), index.h("div", { key: '9cfb02ca034584dcdd23fadb5f41ca598552a605', class: "picker", slot: "content" }, index.h("div", { key: '4d09c5f3ca84346bbcc68f4c83f3413159b8b608', class: "picker-head" }, index.h("cat-button", { key: '9e8d1695f1a882f2388a2b57ccd8cc51e8b52483', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, this.minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '5af1b092c2f0d13e5c12d49699e85ea5dded7580', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, this.minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: 'cd730386e0fc19a4b12ee2910e6de7f079133584' }, this.getHeadline()), index.h("cat-button", { key: 'f0c76ac04573977e255956d2e377dd197080a5b8', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, this.maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: 'd58917e0665df029acc6dac35e7ab05eab60f9d4', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, this.maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: '5307170ba72c90fceef4276aa5feb74dc569c74d', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: 'acd6b0e720722ed3e3d013463645fe294a75b68d', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => (index.h("abbr", { title: this.locale.days.long[i] }, this.locale.days.short[i])))), index.h("div", { key: 'a8b349d48f3595b7a29a037fb48b130dfb9af438', class: "picker-grid-weeks" }, dateGrid
+        const [dateStart, dateEnd] = this.getValue();
+        return (index.h(index.Host, { key: '2b21e43ebc9a69988b475f2eae1eb2f2aeee97cb' }, index.h("div", { key: '3f256483614d09440bee07be4e8996bc1c187d2b', class: { picker: true, 'picker-small': this.size === 's', 'picker-weeks': !this.noWeeks } }, index.h("div", { key: 'c9d82a518d78439164e99240fa13afabcc81e267', class: "picker-head" }, index.h("cat-button", { key: 'bcc803acb0ac2d7947fa53615ca105d77063e9f9', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '3626bbe3e1a79c08d7a6257cb78ce398ceb1b750', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: '92462a6702792afd573c91f0c12e2bae599378ae' }, this.getHeadline()), index.h("cat-button", { key: '4ce63e1451b820098feea0ff2f45d9b7d0b5cc28', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '97adedac70ce8f19ba0725ca6a1bb836a1d8c0c3', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: '9bbc58c07f911e928cd231a784604abada3698ea', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: '2eff946487bfdbce49521b513d6065bd42c78ac0', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => (index.h("abbr", { title: this.locale.days.long[i] }, this.locale.days.short[i])))), !this.noWeeks && (index.h("div", { class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (index.h("div", null, this.getWeekNumber(day))))), index.h("div", { key: '1e7750157710763ad977d866bb2e511b6ec44d03', class: "picker-grid-days" }, dateGrid.map(day => (index.h("cat-button", { class: {
-                'cat-date-item': true,
-                'date-other': !isSameMonth(this.viewDate, day),
-                'date-today': isSameDay(this.now, day),
-                'date-selected': isSameDay(this.selectionDate, day),
-                'date-focusable': this.canFocus(day),
-                'date-disabled': !this.canClick(day)
-            }, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isSameDay(this.selectionDate, day) ? 'filled' : isSameDay(this.now, day) ? 'outlined' : 'text', a11yLabel: this.getA11yLabelDay(day), active: isSameDay(this.selectionDate, day), color: isSameDay(this.selectionDate, day) || isSameDay(this.now, day) ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.toLocalISO(day) }, day.getDate()))))), index.h("div", { key: 'd8874097357312b5ddd4bda5e4018d3e642aaf99', class: "picker-foot" }, this.canClick(this.now) && (index.h("cat-button", { size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.now) }, this.locale.today)), index.h("p", { key: '42d936d44ef0cb07375415ae42a95565cd7f342b', class: {
-                'cursor-help': true,
-                'cursor-right': this.canClick(this.now)
-            } }, this.locale.arrowKeys), index.h("p", { key: '6df5566486d5082b3c2cb79fde22cedd7608c8bf', class: "cursor-aria", "aria-live": "polite" })))))));
-    }
-    parse(value) {
-        const [, p1, d1, p2, p3] = /(\w+)([^\w]+)(\w+)[^\w]+(\w+)/.exec(this.locale.formatStr) || [];
-        const formatParts = [p1, p2, p3];
-        const parts = value.split(d1).map(s => Number(s || 'x'));
-        let year = parts[formatParts.indexOf('YYYY') || formatParts.indexOf('YY')] || this.now.getFullYear();
-        const month = parts[formatParts.indexOf('MM')];
-        const day = parts[formatParts.indexOf('DD')];
-        if (!Number.isInteger(month) || !Number.isInteger(day)) {
-            return null;
-        }
-        else if (year < 100) {
-            year += year < 50 ? 2000 : 1900;
-        }
-        return new Date(year, month - 1, day);
+            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '48f7b239e8ccb0d56b4f7c80d8892b79c2908990', class: "picker-grid-days" }, dateGrid.map(day => {
+            const isStartDate = isSameDay(dateStart, day);
+            const isEndDate = isSameDay(dateEnd, day);
+            const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
+            const isToday = isSameDay(this.locale.now(), day);
+            return (index.h("cat-button", { class: {
+                    'cat-date-item': true,
+                    'date-other': !isSameMonth(this.viewDate, day),
+                    'date-today': isToday,
+                    'date-start': this.range && isStartDate,
+                    'date-range': this.range && isRange,
+                    'date-end': this.range && isEndDate,
+                    'date-focusable': this.canFocus(day),
+                    'date-disabled': !this.canClick(day)
+                }, size: this.size, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isStartDate || isEndDate ? 'filled' : isToday ? 'outlined' : 'text', a11yLabel: this.locale.toLocalStr(day), active: isStartDate || isEndDate || isRange, color: isStartDate || isEndDate || isToday ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.locale.toLocalISO(day) }, day.getDate()));
+        }))), index.h("div", { key: 'e6c30b78568d92d3a17936fdff4c7fec1ac4965f', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), !this.noHint && index.h("p", { class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: 'e31cabf38ed3545ddd4acc32c2540eb5706bc17c', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date) {
-        this.focusDate = clampDate(this.minDate, date, this.maxDate);
+        const [minDate, maxDate] = this.getMinMaxDate();
+        this.focusDate = clampDate(minDate, date, maxDate);
         this.viewDate = new Date(this.focusDate.getFullYear(), this.focusDate.getMonth());
         this.hostElement.shadowRoot
-            ?.querySelector(`[data-date="${this.toLocalISO(this.focusDate)}"]`)
+            ?.querySelector(`[data-date="${this.locale.toLocalISO(this.focusDate)}"]`)
             ?.doFocus();
     }
     navigate(direction, period) {
@@ -1651,20 +1758,6 @@ const CatDate = class {
             node.innerHTML = text;
         }
     }
-    onInputBlur(e) {
-        if (!this.input) {
-            return;
-        }
-        const oldValue = this.value;
-        const value = this.parse(this.input.value ?? '');
-        this.selectionDate = value ? clampDate(this.minDate, value, this.maxDate) : value;
-        this.value = this.selectionDate?.toISOString();
-        if (oldValue !== this.value) {
-            this.catChange.emit(this.value);
-        }
-        this.input.value = this.getInputValue();
-        this.catBlur.emit(e);
-    }
     dateGrid(year, month) {
         const firstDayOfWeek = new Date(year, month, 1).getDay();
         const daysInMonth = new Date(year, month + 1, 0).getDate();
@@ -1680,19 +1773,6 @@ const CatDate = class {
     getHeadline() {
         return `${this.locale.months.long[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}`;
     }
-    getInputValue() {
-        const format = new Intl.DateTimeFormat(this.language, { year: 'numeric', month: '2-digit', day: '2-digit' });
-        return this.selectionDate ? format.format(this.selectionDate) : '';
-    }
-    getA11yLabelDay(date) {
-        const format = new Intl.DateTimeFormat(this.language, {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            weekday: 'long'
-        });
-        return format.format(date);
-    }
     getWeekNumber(date, iso8601 = true) {
         const currentDate = new Date(date.getTime());
         const dayNum = iso8601 ? currentDate.getDay() || 7 : currentDate.getDay();
@@ -1701,34 +1781,46 @@ const CatDate = class {
         return Math.ceil(((+currentDate - +yearStart) / 86400000 + 1) / 7);
     }
     canFocus(date) {
-        const now = this.now;
-        const focused = this.focusedDate;
-        if (focused && isSameMonth(focused, this.viewDate)) {
-            return isSameMonth(focused, date) && isSameDay(focused, date);
+        const now = this.locale.now();
+        const [minDate] = this.getMinMaxDate();
+        const focusedDate = this.focusedDate;
+        const [startDate] = this.getValue();
+        if (focusedDate && isSameMonth(focusedDate, this.viewDate)) {
+            return isSameMonth(focusedDate, date) && isSameDay(focusedDate, date);
         }
-        else if (this.selectionDate && isSameMonth(this.selectionDate, this.viewDate)) {
-            return isSameMonth(this.selectionDate, date) && isSameDay(this.selectionDate, date);
+        else if (startDate && isSameMonth(startDate, this.viewDate)) {
+            return isSameMonth(startDate, date) && isSameDay(startDate, date);
         }
-        else if (isSameMonth(this.viewDate, now) && (!this.minDate || this.minDate <= now)) {
+        else if (isSameMonth(this.viewDate, now) && (!minDate || minDate <= now)) {
             return isSameMonth(this.viewDate, date) && isSameDay(now, date);
         }
-        const minDay = isSameMonth(date, this.minDate) ? this.minDate?.getDate() ?? 1 : 1;
+        const minDay = isSameMonth(date, minDate) ? minDate?.getDate() ?? 1 : 1;
         return isSameMonth(this.viewDate, date) && date.getDate() === minDay;
     }
     canClick(date) {
-        const min = this.minDate;
-        const max = this.maxDate;
-        return (!min || min <= date) && (!max || max >= date);
+        const [minDate, maxDate] = this.getMinMaxDate();
+        return (!minDate || minDate <= date) && (!maxDate || maxDate >= date);
     }
-    toLocalISO(date) {
-        const year = date.getFullYear();
-        const month = (date.getMonth() + 1).toString().padStart(2, '0');
-        const day = date.getDate().toString().padStart(2, '0');
-        return `${year}-${month}-${day}`;
+    getMinMaxDate() {
+        const minDate = this.locale.fromLocalISO(this.min);
+        const maxDate = this.locale.fromLocalISO(this.max);
+        return [minDate, maxDate];
+    }
+    getValue() {
+        if (this.range) {
+            const [startDate, endDate] = JSON.parse(this.value || '[]');
+            return [this.locale.fromLocalISO(startDate), this.locale.fromLocalISO(endDate)];
+        }
+        else {
+            return [this.locale.fromLocalISO(this.value), null];
+        }
+    }
+    toRangeValue(startDate, endDate) {
+        return JSON.stringify([startDate, endDate].map(date => (date ? this.locale.toLocalISO(date) : null)));
     }
     get hostElement() { return index.getElement(this); }
 };
-CatDate.style = CatDateStyle0;
+CatDateInline.style = CatDateInlineStyle0;
 
 var HOOKS = [
     "onChange",
@@ -6088,7 +6180,7 @@ const CatDatepickerFlat = class {
     }
     render() {
         return [
-            index.h("cat-input", { key: '30fb619a94e93a583bf7df28945917562c6b184f', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
+            index.h("cat-input", { key: 'bb983974c17139ee60d88877e398b1c46d672d37', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
                     e.stopPropagation();
                     this.value = e.detail || undefined;
                 }, onCatFocus: e => {
@@ -6098,7 +6190,7 @@ const CatDatepickerFlat = class {
                     e.stopPropagation();
                     this.catBlur.emit(e.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" })))),
-            index.h("div", { key: 'f28f001436363260ec7c9dff26a8f82475c98ac5', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
+            index.h("div", { key: 'c8112214544e0582a1196350a846ddeb063067a3', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
         ];
     }
     initDatepicker(input) {
@@ -6201,11 +6293,11 @@ const CatDatepickerInline = class {
         this.pickr = this.initDatepicker(this.input);
     }
     render() {
-        return (index.h(index.Host, { key: 'bb9ebb60420d1268751f6136e38d1aed5bc74602' }, index.h("div", { key: 'b84cc674ab3b677ceb646dee84b1b83d5d969746', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
+        return (index.h(index.Host, { key: '6f363a4a673603f0c39f5a24b31bb768e804abfc' }, index.h("div", { key: '2c56934aad4d60ea96a6a3c983ae9d1e39c82bde', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
                 'datepicker-wrapper': true,
                 'datepicker-disabled': this.disabled,
                 'datepicker-readonly': this.readonly
-            } }, index.h("input", { key: '6f7706220aa7465a907391e78f97a5e1ad91fdf0', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
+            } }, index.h("input", { key: '6885c1c919af468401dddda38045ab9a8dc26aaf', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
     }
     initDatepicker(input) {
         if (!input) {
@@ -7860,7 +7952,7 @@ const CatDropdown = class {
         }, timeTransitionS);
     }
     render() {
-        return (index.h(index.Host, { key: 'b9a95b9b2c0e084fe0036989f174ee1681ecfe96' }, index.h("slot", { key: '73d2e8b7dd4c67f95c6b9faa34142de00eb25c4e', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '6555cf3ab1b4f0cfcea0e9ba85221f3de5cede82', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: '70dab119fa43e67e1d17b558519028c0f9da60d4', name: "content" }))));
+        return (index.h(index.Host, { key: '5e8a36f00643aa9717333a38ef215b27d328c167' }, index.h("slot", { key: '86a79d3b71d98a57e78be7c94caf35bbf8dbdfdd', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '1367ba9d60feb7abb4ae5993ba0b5c48ee44e308', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: '816d07aa40e29aff294b1110370286f2b968fc46', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -7946,7 +8038,7 @@ const CatFormGroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'd9805ae9997123327fa6259d9e849dff68576b31', style: { '--label-size': this.labelSize } }, index.h("slot", { key: 'e7e254cf202b8ee8a219ec077e659fde18db3530', onSlotchange: this.onSlotChange.bind(this) })));
+        return (index.h(index.Host, { key: '6892a4f36f418d431b6006518c44bf2b58e70f70', style: { '--label-size': this.labelSize } }, index.h("slot", { key: '908b2720b504ce9dfb3a491aa3bbe092a3d2e0cf', onSlotchange: this.onSlotChange.bind(this) })));
     }
     onSlotChange() {
         this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker'));
@@ -7978,7 +8070,7 @@ const CatIcon = class {
         this.a11yLabel = undefined;
     }
     render() {
-        return (index.h("span", { key: 'ace2ec39a623d9c8168269a5b4c46c4efef2fbc7', innerHTML: this.iconSrc || (this.icon ? of.catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        return (index.h("span", { key: '66938702e645f5bc12ca9a4592af24ac46b40c52', innerHTML: this.iconSrc || (this.icon ? of.catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
                 icon: true,
                 [`icon-${this.size}`]: this.size !== 'inline'
             } }));
@@ -9659,19 +9751,19 @@ const CatInput = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'aab57f9704562874b2dee392630c473fc31a33cb', class: {
+        return (index.h("div", { key: '34152d1627e62e4852531f9afdb2b0abc3894a78', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal
-            } }, index.h("div", { key: 'f599b443389362d9eb3ee72d496d225ca2a8bf8d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, part: "label" }, index.h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, index.h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), index.h("div", { key: 'ddce0aaa854e32ae4b8a8686a3886089beac6300', class: "input-container" }, index.h("div", { key: '25eb9aa776ba2cee97fb2bf79bc52d5c44c54b55', class: "input-outer-wrapper" }, index.h("div", { key: '7cd420c3525b8e15a7c0f2d8405cdd70f2e5291c', class: {
+            } }, index.h("div", { key: '89c3e91d9d041a68389e776f38647aa6360e5ea5', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, part: "label" }, index.h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, index.h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), index.h("div", { key: 'ceed5e06d5bfb6eaf425c562422a6cb470c3dea4', class: "input-container" }, index.h("div", { key: 'bbd90f6b705d2e9213a45f5f7839370fce830c89', class: "input-outer-wrapper" }, index.h("div", { key: '7fa315fbb8421e0466d7bceba57c9f158d08c476', class: {
                 'input-wrapper': true,
                 'input-round': this.round,
                 'input-readonly': this.readonly,
                 'input-disabled': this.disabled,
                 'input-invalid': this.invalid
-            }, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: '7f0c24c572ddfb4a1f76457955b28c111c1b444a', class: "input-inner-wrapper" }, index.h("input", { key: 'fcef418a1eb7c5d54f47e239f8db0cf52f23d3f7', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, 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", onClick: () => this.doFocus() })), index.h("div", { key: 'd8db1f7ab01afe94166fc4f6a6d37a595941c0e5', class: "input-inner-wrapper" }, index.h("input", { key: 'af383fe0a04ca8a41e9d9595ee4f422cebb5d99d', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
                 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
                 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
-            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), 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))), index.h("slot", { key: '3c3ff6368c631ae0634a7d0b875cb0d6a69edcba', name: "addon" })), this.hasHint && (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.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), 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))), index.h("slot", { key: '5d318f9d6eeeebcef42b5d7abb000f0e51375303', name: "addon" })), this.hasHint && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -9749,9 +9841,9 @@ const CatPagination = class {
         this.iconNext = '$cat:pagination-right';
     }
     render() {
-        return (index.h("nav", { key: '113d4e757e003c8351efe53f8baeaffe28428c8f', role: "navigation" }, index.h("ol", { key: '15d86b0fd427abdd7f1af9ababb324806a746d05', class: {
+        return (index.h("nav", { key: 'ede4b30a483fb729428b8d2bfdd4d67b1b5f1022', role: "navigation" }, index.h("ol", { key: '04fd80b91e33c55a23d010e5fa108b10a08e2bdb', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, index.h("li", { key: 'b6e6dad6d903b65850cd33c15327386a61fde3d4' }, index.h("cat-button", { key: 'd32aa4a3af4aaae84b5d2de695deadf0852f4ae0', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: of.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", { key: '19567f748e4f3976576ea1c894c2524865d6201a' }, index.h("cat-button", { key: '6170034891849aef2e248a1f531d86806aa4f4c1', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: of.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
+            } }, index.h("li", { key: 'cd98373b4a9a69b25e9df8185b808561336c9a75' }, index.h("cat-button", { key: 'ec601998cd4ba8a2007e1f1dcecad86f36633095', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: of.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", { key: '8ff7654e0087ece5cb4f81205083ea8f13af7112' }, index.h("cat-button", { key: '3ca4cf8fa48d650472e20efc09cbed49b55d33bf', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: of.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
     get isFirst() {
         return this.page === 0;
@@ -9856,7 +9948,7 @@ const CatRadio = class {
         this.input.blur();
     }
     render() {
-        return (index.h(index.Host, { key: '9e3d983eeda3b42a67db73775cafcb9a5d98953a' }, index.h("label", { key: 'e2c5919edf0540000622a239b4acaa7704b2b3a8', 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", { key: '1f8d95c1728e910305c6ef827b6779b4642102d8', class: "radio" }, index.h("input", { key: 'd0217cd454023eb440ef4c2481899f30c15c340f', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: '83a85842c187adf508cba7497d9e2a545163967b', class: "circle" })), index.h("span", { key: 'de6ed4d4a62b894406ec53380ac4949a265fe74b', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), this.hasHint && (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" }) })))));
+        return (index.h(index.Host, { key: '1f5432c0800e82741e2786146b728403157eb874' }, index.h("label", { key: 'cac427f0f10635bd03a799d25ac0160b721cfcdb', 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", { key: '6a8598e54d46eb976717faf125c58a675b79ad99', class: "radio" }, index.h("input", { key: '7b5dea2ce070d83a1a1f16375d3d782f8b3d1459', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: 'e6f1802e164c2b74f84f413fd351ea6a9f10c9a2', class: "circle" })), index.h("span", { key: '95e951a221d6b36d980a6619fa501a409555e981', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), this.hasHint && (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" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -9947,7 +10039,7 @@ const CatRadioGroup = class {
         }
     }
     render() {
-        return (index.h("div", { key: '05f0e3dddf696ecc2de0ea7491011e9ce6cf7ce4', role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", { key: 'f67dc6e9f7e8410104626a1c5e54587d4cae51b0' })));
+        return (index.h("div", { key: '5608e54b1bb857a4068a6287b072bd71081d51d2', role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", { key: '8e62283745589e94e99650f7fe85afeea39fa253' })));
     }
     init() {
         this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
@@ -10036,13 +10128,13 @@ const CatScrollable = class {
     }
     render() {
         return [
-            index.h("div", { key: 'a665d0c5a252ffb60c451b47b19e58d720aa7cc5', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && index.h("div", { class: "shadow-top" }), !this.noShadowX && index.h("div", { class: "shadow-left" }), !this.noShadowX && index.h("div", { class: "shadow-right" }), !this.noShadowY && index.h("div", { class: "shadow-bottom" })),
-            index.h("div", { key: 'b5148d1b4d36da8f58dfd1a9f5ee4f8281e7bf48', ref: el => (this.scrollElement = el), class: {
+            index.h("div", { key: 'b8d4abf49b6747e516f23bc4e16bbc1b7b9e2efe', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && index.h("div", { class: "shadow-top" }), !this.noShadowX && index.h("div", { class: "shadow-left" }), !this.noShadowX && index.h("div", { class: "shadow-right" }), !this.noShadowY && index.h("div", { class: "shadow-bottom" })),
+            index.h("div", { key: '9552a4a4a86713effab40df3f95310dae5863f78', ref: el => (this.scrollElement = el), class: {
                     'scrollable-content': true,
                     'scroll-x': !this.noOverflowX,
                     'scroll-y': !this.noOverflowY,
                     'no-overscroll': this.noOverscroll
-                } }, index.h("slot", { key: '58770dc6389091b4fcd010b0ef867098bbdbd324' }))
+                } }, index.h("slot", { key: 'acc0afcb95539ad6db29c6a96b2673892f2d9153' }))
         ];
     }
     attachEmitter(from, emitter) {
@@ -10986,7 +11078,7 @@ const CatSelectTest = class {
         setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
     }
     render() {
-        return (index.h(index.Host, { key: '917d1993ffdeb3df253cb69c4f91670bae865ffe', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, index.h("cat-select", { key: '0783adb9958ab099ee05514ab1eff2c2e9c19a3d', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, index.h("span", { key: 'a022a3f75759761d9f8cc75855c15c8bd577ec6d', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { key: '6e5ff0f3f69a6b8eb812a73243de623afe6958aa', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: 'f1f365f238c40179536fed2fdecf9562e9a2313b', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: '3444b60c5c4e65e96288f0773e0a1fa1aa2e6418', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: '9de06f744b6b072184fd8b5d25f1ecd1e6377152', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), index.h("cat-select", { key: '64e4286713877e81dbd587a2b46a4836d3e6a003', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), index.h("cat-select", { key: 'd3a3435025715aa6b2cfb82ca7093ebfc6537038', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), index.h("cat-dropdown", { key: '24a8e325652f4fac91a7548d1c7db43930ae3dba', overflow: true }, index.h("cat-button", { key: 'fe655431da67831a02855510e864d65895efc20e', slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { key: '01fc39c99c6f2bc2eabda4c8a26ab6aa46ea49d3', slot: "content", style: { width: '400px' } }, index.h("cat-select", { key: '7bd02aadc9a84797f4868e9a236e9af7245a2bd7', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
+        return (index.h(index.Host, { key: 'fbbdfc05bd034597b84d235445b70c526ed17dd4', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, index.h("cat-select", { key: 'e88f94e3022868b3ec6ca75a704a45edac6dedc6', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, index.h("span", { key: 'a5e00768df01e4f91dfd2b4b3f62a998df32bf7d', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { key: '935aacbe810131079d95d61d9e6fd2efbec03d01', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: '0b8fbe7e2ec42acf7cbd01fd216d0909befd30a2', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: '509741cf8a8f6438649f2a4debe0829fd3b905eb', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: 'a42ff7c4b8f1686fa0cdbd5a202b4bff59f7e599', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), index.h("cat-select", { key: 'e29353e92663b785844080bf6ef6937348c80379', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), index.h("cat-select", { key: 'a53e0848faed0a98be3d2bc6e81c1e21c82cbc9c', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), index.h("cat-dropdown", { key: 'f6173b84ec5d84401dbc7190c6e09719c0412f26', overflow: true }, index.h("cat-button", { key: '4d45f4bd17867cb4d54078f503e8613441e04374', slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { key: '2736181440e085cf623c2c3c875edaab23f71a3e', slot: "content", style: { width: '400px' } }, index.h("cat-select", { key: '9fa27d270fc984bd22ef82de2e54e7ac952f71a2', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
     }
     get countryConnector() {
         return {
@@ -12242,7 +12334,7 @@ const CatSkeleton = class {
         this.lines = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'a19807a77a26996cffe07ac155ad7765618b5845' }, Array.from(Array(this.count)).map(() => (index.h("div", { style: this.style, class: {
+        return (index.h(index.Host, { key: '8f1e4584c050cc8b6d1341efd3d8b04ca7223a73' }, Array.from(Array(this.count)).map(() => (index.h("div", { style: this.style, class: {
                 skeleton: true,
                 [`skeleton-${this.effect}`]: Boolean(this.effect),
                 [`skeleton-${this.variant}`]: Boolean(this.variant),
@@ -12282,9 +12374,9 @@ const CatSpinner = class {
         this.a11yLabel = undefined;
     }
     render() {
-        return (index.h("span", { key: '9959df68cbff0d66f606eddd9ad4d28e6387016c', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+        return (index.h("span", { key: 'cf1110c7ae2c653c87f44f2668aa3bcc757ed0c9', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
                 [`spinner-${this.size}`]: this.size !== 'inline'
-            } }, index.h("svg", { key: '5f1f119ac83d334ef537e58a18631b064504de42', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, index.h("circle", { key: 'c86f44033ed4cd7b13e08332dd0219001a1aa05d', cx: "24", cy: "24", r: "21.5" }))));
+            } }, index.h("svg", { key: '22d1a1c15575274a75d4203ae9a1c945a199759d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, index.h("circle", { key: 'f067c870a5699603761b7d8d6e4a32354cef6f7e', cx: "24", cy: "24", r: "21.5" }))));
     }
 };
 CatSpinner.style = CatSpinnerStyle0;
@@ -12316,7 +12408,7 @@ const CatTab = class {
         this.catClick.emit(event);
     }
     render() {
-        return index.h(index.Host, { key: 'd82385eb808736eea3c76a3df8381b9d4e0d742e' });
+        return index.h(index.Host, { key: 'e0b1e0562a35130f4b0de08530eb66c9df5ec145' });
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -12380,7 +12472,7 @@ const CatTabs = class {
         this.activate(this.tabs[index]);
     }
     render() {
-        return (index.h(index.Host, { key: '94b84f077e41ac18206865152cabfc9f3a51ccc0' }, this.tabs.map((tab) => {
+        return (index.h(index.Host, { key: '05969fc6e983159aaad4a36ab07b6326c5c85589' }, this.tabs.map((tab) => {
             return (index.h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
                     'cat-tab': true,
                     'cat-tab-active': tab.id === this.activeTab,
@@ -12500,15 +12592,15 @@ const CatTextarea = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'cb67b2133a56d47e02cc099e0a52670d8b2ba808' }, index.h("div", { key: 'bd7af8f7626ea32983a2cd2595556722b9384384', class: {
+        return (index.h(index.Host, { key: '2fac5152cbeeb9d4a9c4dc0f9539bb1a1503c9e8' }, index.h("div", { key: '88d992d98f72a0862b3736ad102a0124363e17b6', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, index.h("div", { key: '58eaf7f6f077148933667818c80ba7c61f3f599c', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, part: "label" }, index.h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, index.h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), index.h("div", { key: '697555f611a053df4df7dfe12cbd7e6fdcb4f0a1', class: "textarea-container" }, index.h("div", { key: '85c1b4a93bf03b3b6046f310bbb841d312638d3b', class: {
+            } }, index.h("div", { key: 'ab23b2ebcc13b7511c4e951041817bb8b1952c0c', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, part: "label" }, index.h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, index.h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), index.h("div", { key: '30a02b82d605c5e416a63b8eef5205d41139ce6d', class: "textarea-container" }, index.h("div", { key: '32aad8e1e15134dad90e991cc3e471b06dcbc9fd', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, index.h("textarea", { key: '2646d5e59ea09e361c87ad1635d641c9ce2d1fb6', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (index.h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, index.h("textarea", { key: '96d5a02bfdb1c7feb85ce02380a59ff63a7d1760', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (index.h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -12713,7 +12805,7 @@ const CatTime = class {
         this.input?.clear();
     }
     render() {
-        return (index.h(index.Host, { key: '417fe04aff5d229b3f99595cd464ed1b35a64655' }, index.h("cat-input", { key: 'a240ad76627fcc5013d8e51e0728e0296dbb0e42', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: 'cf2026f70a32a5df5331b82d1d64cb4695a0b42e', slot: "label" }, this.hasSlottedLabel && index.h("slot", { name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: '46b4a5363823a48d5569f77bcbadbaf0ef93e7b1', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: 'cfad61c399b5b4a487b211976e61c3e33fb37a98', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: '2a158234c4cc55920105b326cdf31fbe02fedfb7', slot: "addon", placement: this.placement }, index.h("cat-button", { key: '1aa21b054ef608a4f1e9cc32312a762fa64d8b2d', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: 'dd604da9f2244c970ca62ca68385cc86d0b98bef', slot: "content", class: "cat-nav" }, index.h("ul", { key: '3c5e331defd7f192c27aab7085f5337a2eaf0fe7' }, this.timeArray().map(time => {
+        return (index.h(index.Host, { key: '899fb8f5f263ba560bacb99d111792e9219e057a' }, index.h("cat-input", { key: 'e2b84c644e265cdc166c7ec50cb873d79ddeb12e', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '097ee8e93a2d05d35051ddc1aa105b1e9ebf0528', slot: "label" }, this.hasSlottedLabel && index.h("slot", { name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: '5d526fe661331f8eb1a887ddc0eabc3f3338747a', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '28fcd51b6e297d552e121a01813c92c564cccbda', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: 'f93687883da3f3c32027edcd89d6989caad8e504', slot: "addon", placement: this.placement }, index.h("cat-button", { key: 'eae27c8538ff6564d6b5a735b30e8c2aac07751d', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: 'a334804d935c713bb95e3bb88fce40fa7f05724c', slot: "content", class: "cat-nav" }, index.h("ul", { key: '713181fc8597cf4b9486f2fb7aa63fb412180054' }, this.timeArray().map(time => {
             const isoTime = this.formatIso(time);
             const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
             return (index.h("li", null, index.h("cat-button", { class: {
@@ -12828,7 +12920,7 @@ const CatToggle = class {
         this.input.blur();
     }
     render() {
-        return (index.h(index.Host, { key: '1cc91400d302cd19fa92216ec3fdf45ae869b761' }, index.h("label", { key: '981ac74c7a9aa3324cab60067849e2ffff9d4158', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, index.h("input", { key: 'f4c1a4398f73d2c3da8fd26b360d4a4d94dae3c3', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: '4a8c4e21fcb48dc3f2260d5abfcf2351fa0eeb13', class: "toggle" }), index.h("span", { key: 'b911ffc5f29252efba3989e494eca1c5ec0fbd54', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), this.hasHint && (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" }) })))));
+        return (index.h(index.Host, { key: '08337e6aece1d072c3c4540e4c5e97562a0c1f4c' }, index.h("label", { key: '79b0b9d2d136125ba7f15be32a3a34da73488a2f', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, index.h("input", { key: '0c22754e817b0d6eab349583287c8d30f25f84ad', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: '7a08a4ec1fc79d18c16065697f672bf7f4e35908', class: "toggle" }), index.h("span", { key: 'b78eacbcb262452ba33972f2647dc69b01c1bd20', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), this.hasHint && (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" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -12915,12 +13007,12 @@ const CatTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f1bfba8c8ce1a2d43959b18b00627af819536428' }, index.h("slot", { key: '0366fe88ce8bd0382beed9c298dbd945cad70bec' }), index.h("div", { key: 'dd9f7cd786780cd64e3fa2670f516eda71d15351', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
+        return (index.h(index.Host, { key: '742d0c7f6203b8e685886f1c272562176b348fa9' }, index.h("slot", { key: '0e7bf66c6aadcf0b87fbbadf2d3e357ebb9b98c0' }), index.h("div", { key: '14eaa638d2f3170be57188d32841e22c98f1319b', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
                 tooltip: true,
                 'tooltip-hidden': this.inactive,
                 'tooltip-round': this.round,
                 [`tooltip-${this.size}`]: Boolean(this.size)
-            } }, index.h("slot", { key: '2a6f92d2cfc845849730792f08e65ffb70c03e5f', name: "content" }, index.h("p", { key: '23b8d57bcb92506d5c88a59261716158b0daa0ba' }, this.content)))));
+            } }, index.h("slot", { key: '724fac6b27719c0cb9d243aab8ab4485fa72fc43', name: "content" }, index.h("p", { key: '2d6c325c46035725ac8c81330038888eefeb0c89' }, this.content)))));
     }
     async update() {
         if (this.trigger && this.tooltip) {
@@ -13008,6 +13100,7 @@ exports.cat_button_group = CatButtonGroup;
 exports.cat_card = CatCard;
 exports.cat_checkbox = CatCheckbox;
 exports.cat_date = CatDate;
+exports.cat_date_inline = CatDateInline;
 exports.cat_datepicker = CatDatepickerFlat;
 exports.cat_datepicker_inline = CatDatepickerInline;
 exports.cat_dropdown = CatDropdown;
@@ -13029,4 +13122,4 @@ exports.cat_time = CatTime;
 exports.cat_toggle = CatToggle;
 exports.cat_tooltip = CatTooltip;
 
-//# sourceMappingURL=cat-alert_28.cjs.entry.js.map
+//# sourceMappingURL=cat-alert_29.cjs.entry.js.map