@haiilo/catalyst 14.5.2 → 14.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/p-d3951c6a.entry.js +10 -0
- package/dist/catalyst/{p-0fec1fc5.entry.js.map → p-d3951c6a.entry.js.map} +1 -1
- package/dist/cjs/cat-alert_32.cjs.entry.js +8 -4
- package/dist/collection/components/cat-button/cat-button.css +14 -5
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +2 -0
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-menu/cat-menu.js +5 -3
- package/dist/collection/components/cat-menu/cat-menu.js.map +1 -1
- package/dist/components/cat-button2.js +1 -1
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-dropdown2.js +2 -0
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-menu2.js +5 -3
- package/dist/components/cat-menu2.js.map +1 -1
- package/dist/esm/cat-alert_32.entry.js +8 -4
- package/package.json +8 -4
- package/dist/catalyst/p-0fec1fc5.entry.js +0 -10
|
@@ -347,7 +347,7 @@ function findClosest(selector, element) {
|
|
|
347
347
|
return nextElement ? findClosest(selector, nextElement) : null;
|
|
348
348
|
}
|
|
349
349
|
|
|
350
|
-
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, #fff);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.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));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.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-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-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.5rem}.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.75rem}.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),:host(.cat-tab-more-button)::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,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-inline){display:inline}:host(.cat-inline) .cat-button{display:inline;padding:0}:host(.cat-inline) .cat-button-content{display:inline}";
|
|
350
|
+
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button>*{pointer-events:none}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:rgb(var(--outlined-bg));box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, rgb(var(--outlined-bg)));color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)))}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)))}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)))}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.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));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.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-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-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);--outlined-bg:var(--cat-primary-bg-outlined, 255, 255, 255);--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);--outlined-bg:var(--cat-secondary-bg-outlined, 255, 255, 255);--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);--outlined-bg:var(--cat-info-bg-outlined, 255, 255, 255);--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);--outlined-bg:var(--cat-success-bg-outlined, 255, 255, 255);--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);--outlined-bg:var(--cat-warning-bg-outlined, 255, 255, 255);--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);--outlined-bg:var(--cat-danger-bg-outlined, 255, 255, 255);--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.5rem}.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.75rem}.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),:host(.cat-tab-more-button)::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,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-inline){display:inline}:host(.cat-inline) .cat-button{display:inline;padding:0}:host(.cat-inline) .cat-button-content{display:inline}";
|
|
351
351
|
|
|
352
352
|
const CatButton = class {
|
|
353
353
|
constructor(hostRef) {
|
|
@@ -7863,6 +7863,8 @@ const CatDropdown = class {
|
|
|
7863
7863
|
return (!this.noAutoClose &&
|
|
7864
7864
|
// check if click was outside of the dropdown content
|
|
7865
7865
|
!event.composedPath().includes(this.content) &&
|
|
7866
|
+
// check if click was on trigger - this case is handled by trigger click listener
|
|
7867
|
+
!event.composedPath().includes(this.trigger) &&
|
|
7866
7868
|
// check if click was not on an element marked with data-dropdown-no-close
|
|
7867
7869
|
!event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')));
|
|
7868
7870
|
}
|
|
@@ -8350,7 +8352,9 @@ const CatMenu = class {
|
|
|
8350
8352
|
return;
|
|
8351
8353
|
}
|
|
8352
8354
|
requestAnimationFrame(() => {
|
|
8353
|
-
if (!this.isMenuItemInFocus()
|
|
8355
|
+
if (!this.isMenuItemInFocus() &&
|
|
8356
|
+
document.activeElement !== document.body &&
|
|
8357
|
+
document.activeElement !== this.hostElement) {
|
|
8354
8358
|
this.dropdown?.close(false);
|
|
8355
8359
|
}
|
|
8356
8360
|
});
|
|
@@ -8428,10 +8432,10 @@ const CatMenu = class {
|
|
|
8428
8432
|
this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
|
|
8429
8433
|
}
|
|
8430
8434
|
render() {
|
|
8431
|
-
return (index.h(index.Host, { key: '
|
|
8435
|
+
return (index.h(index.Host, { key: '7f6a8d695af0d7f30b7da9ba5558f0c6983e4315' }, index.h("cat-dropdown", { key: '722ec1a940599257082c2a7b586dd662e09aab39', ref: el => (this.dropdown = el), focusTrap: false, placement: this.placement, justify: this.justify, arrowNavigation: "none", noResize: this.noResize, overflow: this.overflow, delayedTriggerInit: this.delayedTriggerInit, onCatOpen: this.onMenuOpen, onCatClose: () => this.catClose.emit() }, index.h("cat-button", { key: 'a1562b313b53ae8a736f096e3717ee3de78b9862', slot: "trigger", part: "trigger", variant: this.triggerVariant, size: this.triggerSize, icon: this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined), iconOnly: this.triggerIconOnly ?? this.triggerLabel === undefined, color: this.triggerColor, a11yLabel: this.triggerA11yLabel ?? this.triggerLabel, class: this.triggerClass, testId: this.triggerTestId, nativeAttributes: {
|
|
8432
8436
|
...this.triggerNativeAttributes,
|
|
8433
8437
|
'aria-haspopup': 'menu'
|
|
8434
|
-
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && index.h("slot", { key: '
|
|
8438
|
+
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && index.h("slot", { key: 'f8cbc8e8841e4d9c2d28b38bae55bdbde2693a10', name: "trigger-label" }, this.triggerLabel)), index.h("nav", { key: 'bcd0eebb7e9bdbb23f2dbcfba7d6d13653789c06', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, index.h("ul", { key: '52ced18c6c0349795e1516090b33cd5c7bebb451' }, index.h("slot", { key: '3cedc5e3d1392fec9d49222165e9c96e7f40b0f2' }))))));
|
|
8435
8439
|
}
|
|
8436
8440
|
get hostElement() { return index.getElement(this); }
|
|
8437
8441
|
};
|
|
@@ -41,6 +41,9 @@
|
|
|
41
41
|
outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
|
|
42
42
|
outline-offset: 1px;
|
|
43
43
|
}
|
|
44
|
+
.cat-button > * {
|
|
45
|
+
pointer-events: none;
|
|
46
|
+
}
|
|
44
47
|
|
|
45
48
|
.cat-button-content {
|
|
46
49
|
display: flex;
|
|
@@ -112,8 +115,8 @@
|
|
|
112
115
|
}
|
|
113
116
|
|
|
114
117
|
.cat-button-outlined {
|
|
115
|
-
background-color:
|
|
116
|
-
box-shadow: inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%,
|
|
118
|
+
background-color: rgb(var(--outlined-bg));
|
|
119
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, rgb(var(--outlined-bg)));
|
|
117
120
|
color: rgb(var(--text));
|
|
118
121
|
}
|
|
119
122
|
.cat-button-outlined.cat-button-disabled {
|
|
@@ -121,13 +124,13 @@
|
|
|
121
124
|
--text: var(--cat-font-color-muted, 81, 92, 108);
|
|
122
125
|
}
|
|
123
126
|
.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
124
|
-
background-color: color-mix(in srgb, rgb(var(--base)) 10%,
|
|
127
|
+
background-color: color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)));
|
|
125
128
|
}
|
|
126
129
|
.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
127
|
-
background-color: color-mix(in srgb, rgb(var(--base)) 10%,
|
|
130
|
+
background-color: color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)));
|
|
128
131
|
}
|
|
129
132
|
.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
130
|
-
background-color: color-mix(in srgb, rgb(var(--base)) 10%,
|
|
133
|
+
background-color: color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)));
|
|
131
134
|
}
|
|
132
135
|
|
|
133
136
|
.cat-button-text {
|
|
@@ -165,6 +168,7 @@
|
|
|
165
168
|
--bg: var(--cat-primary-bg, 0, 129, 148);
|
|
166
169
|
--fill: var(--cat-primary-fill, 255, 255, 255);
|
|
167
170
|
--text: var(--cat-primary-text, 0, 129, 148);
|
|
171
|
+
--outlined-bg: var(--cat-primary-bg-outlined, 255, 255, 255);
|
|
168
172
|
--base: var(--cat-primary-text, 0, 129, 148);
|
|
169
173
|
}
|
|
170
174
|
.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
@@ -182,6 +186,7 @@
|
|
|
182
186
|
--bg: var(--cat-secondary-bg, 105, 118, 135);
|
|
183
187
|
--fill: var(--cat-secondary-fill, 255, 255, 255);
|
|
184
188
|
--text: var(--cat-secondary-text, 0, 0, 0);
|
|
189
|
+
--outlined-bg: var(--cat-secondary-bg-outlined, 255, 255, 255);
|
|
185
190
|
--base: var(--cat-secondary-bg, 105, 118, 135);
|
|
186
191
|
}
|
|
187
192
|
.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
@@ -199,6 +204,7 @@
|
|
|
199
204
|
--bg: var(--cat-info-bg, 0, 115, 230);
|
|
200
205
|
--fill: var(--cat-info-fill, 255, 255, 255);
|
|
201
206
|
--text: var(--cat-info-text, 0, 115, 230);
|
|
207
|
+
--outlined-bg: var(--cat-info-bg-outlined, 255, 255, 255);
|
|
202
208
|
--base: var(--cat-info-text, 0, 115, 230);
|
|
203
209
|
}
|
|
204
210
|
.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
@@ -216,6 +222,7 @@
|
|
|
216
222
|
--bg: var(--cat-success-bg, 0, 132, 88);
|
|
217
223
|
--fill: var(--cat-success-fill, 255, 255, 255);
|
|
218
224
|
--text: var(--cat-success-text, 0, 132, 88);
|
|
225
|
+
--outlined-bg: var(--cat-success-bg-outlined, 255, 255, 255);
|
|
219
226
|
--base: var(--cat-success-text, 0, 132, 88);
|
|
220
227
|
}
|
|
221
228
|
.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
@@ -233,6 +240,7 @@
|
|
|
233
240
|
--bg: var(--cat-warning-bg, 255, 206, 128);
|
|
234
241
|
--fill: var(--cat-warning-fill, 0, 0, 0);
|
|
235
242
|
--text: var(--cat-warning-text, 159, 97, 0);
|
|
243
|
+
--outlined-bg: var(--cat-warning-bg-outlined, 255, 255, 255);
|
|
236
244
|
--base: var(--cat-warning-text, 159, 97, 0);
|
|
237
245
|
}
|
|
238
246
|
.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
@@ -250,6 +258,7 @@
|
|
|
250
258
|
--bg: var(--cat-danger-bg, 217, 52, 13);
|
|
251
259
|
--fill: var(--cat-danger-fill, 255, 255, 255);
|
|
252
260
|
--text: var(--cat-danger-text, 217, 52, 13);
|
|
261
|
+
--outlined-bg: var(--cat-danger-bg-outlined, 255, 255, 255);
|
|
253
262
|
--base: var(--cat-danger-text, 217, 52, 13);
|
|
254
263
|
}
|
|
255
264
|
.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading) {
|
|
@@ -244,6 +244,8 @@ export class CatDropdown {
|
|
|
244
244
|
return (!this.noAutoClose &&
|
|
245
245
|
// check if click was outside of the dropdown content
|
|
246
246
|
!event.composedPath().includes(this.content) &&
|
|
247
|
+
// check if click was on trigger - this case is handled by trigger click listener
|
|
248
|
+
!event.composedPath().includes(this.trigger) &&
|
|
247
249
|
// check if click was not on an element marked with data-dropdown-no-close
|
|
248
250
|
!event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')));
|
|
249
251
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, shift, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport findFirstTabbableIncludeHidden from '../../utils/first-tabbable-with-visibility-hidden';\nimport { CatMenuItem } from '../cat-menu-item/cat-menu-item';\n\nlet nextUniqueId = 0;\nexport type DropdownPlacement = Placement;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private _isOpen: boolean | null = false;\n private cleanupFloatingUi?: () => void;\n private readonly tabbableOptions = { getShadowRoot: true };\n /**\n * Tracking the origin of opening the dropdown and specify if initial focus should be set.\n * Currently we set it only when the origin is keyboard.\n * We might not need to track this in future when focus-visible support is improved across browsers\n */\n private isFocusVisible = false;\n\n private readonly boundWindowClickListener: (event: MouseEvent) => void;\n private readonly boundWindowMousedownListener: (event: MouseEvent) => void;\n private readonly boundWindowTouchStartListener: (event: TouchEvent) => void;\n\n constructor() {\n this.boundWindowClickListener = this.windowClickListener.bind(this);\n this.boundWindowMousedownListener = this.windowMousedownListener.bind(this);\n this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n }\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * Make the dropdown match the width of the reference regardless of its\n * contents. Note that this only applies to the minimum width of the\n * dropdown. The maximum width is still limited by the viewport.\n */\n @Prop() justify = false;\n\n /**\n * Do not close the dropdown on outside clicks.\n */\n @Prop() noAutoClose = false;\n\n /**\n * Do not navigate focus inside the dropdown via vertical arrow keys.\n * @deprecated use cat-menu\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n * @deprecated\n * Using noInitialFocus property would be a bad practice from a11y perspective.\n * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n * hasInitialFocus should resolve the cause of the original problem instead.\n */\n @Prop() noInitialFocus = false;\n\n /**\n * Whether the dropdown is open.\n * @readonly\n */\n @Prop() get isOpen(): boolean {\n return this._isOpen ?? false;\n }\n\n /**\n * Trigger element will not receive focus when dropdown is closed.\n * Please use this property carefully, consider using cat-menu over using this property\n */\n @Prop() noReturnFocus = false;\n\n /**\n * Whether the dropdown trigger should be initialized only before first opening.\n * Can be useful when trigger is rendered dynamically.\n */\n @Prop() delayedTriggerInit = false;\n\n /**\n * Whether the focus should be trapped inside dropdown popup.\n * Use it only when the dropdown popup content has role dialog.\n * @internal\n */\n @Prop() focusTrap = true;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n if (!this.trigger && this.delayedTriggerInit) {\n this.isFocusVisible = this.isEventOriginFromKeyboard(event.detail);\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n !(event.target as unknown as CatMenuItem).subMenu &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n if (this.isOpen && event.key === 'Escape') {\n this.close();\n }\n }\n\n private windowClickListener(event: MouseEvent) {\n this.handleClickOutside(event);\n }\n\n private windowMousedownListener(event: MouseEvent) {\n this.handleClickOutside(event);\n }\n\n private windowTouchStartListener(event: TouchEvent) {\n this.handleClickOutside(event);\n }\n\n /**\n * Toggles the dropdown.\n */\n @Method()\n async toggle(): Promise<void> {\n this._isOpen ? this.close() : this.open();\n }\n\n /**\n * Opens the dropdown.\n * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n */\n @Method()\n async open(isFocusVisible?: boolean): Promise<void> {\n if (!this.trigger && this.delayedTriggerInit) {\n this.initTrigger();\n }\n\n if (this.isOpen === null || this.isOpen) {\n return; // busy or open\n }\n\n this._isOpen = null;\n this.content.style.display = 'block';\n this.isFocusVisible = isFocusVisible ?? this.isFocusVisible;\n\n const trigger = this.anchor || this.trigger;\n if (trigger) {\n this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));\n }\n // give CSS transition time to apply\n requestAnimationFrame(() => {\n this._isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n\n if (this.focusTrap) {\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: this.tabbableOptions,\n allowOutsideClick: true,\n clickOutsideDeactivates: event => this.shouldCloseByClickEvent(event),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => {\n return this.isFocusVisible ? undefined : false;\n }\n });\n this.trap.activate();\n } else {\n this.addListeners();\n this.catOpen.emit();\n }\n });\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async close(shouldReturnFocus = this.isFocusVisible): Promise<void> {\n if (!this._isOpen) {\n return; // busy or closed\n }\n\n this._isOpen = null;\n this.trap?.deactivate();\n this.trap = undefined;\n this.content.classList.remove('show');\n if (shouldReturnFocus) {\n this.trigger?.focus();\n }\n this.removeListeners();\n // give CSS transition time to apply\n setTimeout(() => {\n this._isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad() {\n this.initAnchor();\n if (!this.delayedTriggerInit) {\n this.initTrigger();\n }\n }\n\n disconnectedCallback() {\n this.trap?.deactivate();\n this.trap = undefined;\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private addListeners() {\n window.addEventListener('click', this.boundWindowClickListener);\n window.addEventListener('mousedown', this.boundWindowMousedownListener);\n window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n }\n\n private removeListeners() {\n window.removeEventListener('click', this.boundWindowClickListener);\n window.removeEventListener('mousedown', this.boundWindowMousedownListener);\n window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n }\n\n private handleClickOutside(event: MouseEvent | TouchEvent): void {\n if (this.shouldCloseByClickEvent(event)) {\n this.close();\n }\n }\n\n private shouldCloseByClickEvent(event: MouseEvent | TouchEvent): boolean {\n return (\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', (event: Event) => {\n this.isFocusVisible = this.isEventOriginFromKeyboard(event as UIEvent);\n this.toggle();\n });\n }\n\n private isEventOriginFromKeyboard(event: UIEvent): boolean {\n return event.detail === 0;\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n }\n\n private findTrigger() {\n let trigger: FocusableElement | undefined;\n let elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : (elem?.querySelector('[data-trigger]') ?? undefined);\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles\n // which stencil assigns to component in prehydration state\n if (!trigger) {\n elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = findFirstTabbableIncludeHidden(elem as HTMLElement);\n }\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement | undefined, justify = this.justify) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ rects, availableWidth, availableHeight, elements }) {\n if (justify) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxWidth: `${rects.reference.width}px`,\n maxHeight: `${availableHeight}px`\n });\n } else {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n }\n })\n ];\n const middleware = [offset(CatDropdown.OFFSET)];\n const flipMiddleware = flip({\n // Ensure we flip to the perpendicular axis if it doesn't fit\n // on narrow viewports.\n crossAxis: 'alignment',\n fallbackAxisSideDirection: 'end'\n });\n const shiftMiddleware = shift();\n\n // Prioritize flip over shift for edge-aligned placements only.\n if (this.placement.includes('-')) {\n middleware.push(flipMiddleware, shiftMiddleware);\n } else {\n middleware.push(shiftMiddleware, flipMiddleware);\n }\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [...middleware, ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, shift, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport findFirstTabbableIncludeHidden from '../../utils/first-tabbable-with-visibility-hidden';\nimport { CatMenuItem } from '../cat-menu-item/cat-menu-item';\n\nlet nextUniqueId = 0;\nexport type DropdownPlacement = Placement;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private _isOpen: boolean | null = false;\n private cleanupFloatingUi?: () => void;\n private readonly tabbableOptions = { getShadowRoot: true };\n /**\n * Tracking the origin of opening the dropdown and specify if initial focus should be set.\n * Currently we set it only when the origin is keyboard.\n * We might not need to track this in future when focus-visible support is improved across browsers\n */\n private isFocusVisible = false;\n\n private readonly boundWindowClickListener: (event: MouseEvent) => void;\n private readonly boundWindowMousedownListener: (event: MouseEvent) => void;\n private readonly boundWindowTouchStartListener: (event: TouchEvent) => void;\n\n constructor() {\n this.boundWindowClickListener = this.windowClickListener.bind(this);\n this.boundWindowMousedownListener = this.windowMousedownListener.bind(this);\n this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n }\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * Make the dropdown match the width of the reference regardless of its\n * contents. Note that this only applies to the minimum width of the\n * dropdown. The maximum width is still limited by the viewport.\n */\n @Prop() justify = false;\n\n /**\n * Do not close the dropdown on outside clicks.\n */\n @Prop() noAutoClose = false;\n\n /**\n * Do not navigate focus inside the dropdown via vertical arrow keys.\n * @deprecated use cat-menu\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n * @deprecated\n * Using noInitialFocus property would be a bad practice from a11y perspective.\n * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n * hasInitialFocus should resolve the cause of the original problem instead.\n */\n @Prop() noInitialFocus = false;\n\n /**\n * Whether the dropdown is open.\n * @readonly\n */\n @Prop() get isOpen(): boolean {\n return this._isOpen ?? false;\n }\n\n /**\n * Trigger element will not receive focus when dropdown is closed.\n * Please use this property carefully, consider using cat-menu over using this property\n */\n @Prop() noReturnFocus = false;\n\n /**\n * Whether the dropdown trigger should be initialized only before first opening.\n * Can be useful when trigger is rendered dynamically.\n */\n @Prop() delayedTriggerInit = false;\n\n /**\n * Whether the focus should be trapped inside dropdown popup.\n * Use it only when the dropdown popup content has role dialog.\n * @internal\n */\n @Prop() focusTrap = true;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n if (!this.trigger && this.delayedTriggerInit) {\n this.isFocusVisible = this.isEventOriginFromKeyboard(event.detail);\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n !(event.target as unknown as CatMenuItem).subMenu &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n if (this.isOpen && event.key === 'Escape') {\n this.close();\n }\n }\n\n private windowClickListener(event: MouseEvent) {\n this.handleClickOutside(event);\n }\n\n private windowMousedownListener(event: MouseEvent) {\n this.handleClickOutside(event);\n }\n\n private windowTouchStartListener(event: TouchEvent) {\n this.handleClickOutside(event);\n }\n\n /**\n * Toggles the dropdown.\n */\n @Method()\n async toggle(): Promise<void> {\n this._isOpen ? this.close() : this.open();\n }\n\n /**\n * Opens the dropdown.\n * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n */\n @Method()\n async open(isFocusVisible?: boolean): Promise<void> {\n if (!this.trigger && this.delayedTriggerInit) {\n this.initTrigger();\n }\n\n if (this.isOpen === null || this.isOpen) {\n return; // busy or open\n }\n\n this._isOpen = null;\n this.content.style.display = 'block';\n this.isFocusVisible = isFocusVisible ?? this.isFocusVisible;\n\n const trigger = this.anchor || this.trigger;\n if (trigger) {\n this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));\n }\n // give CSS transition time to apply\n requestAnimationFrame(() => {\n this._isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n\n if (this.focusTrap) {\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: this.tabbableOptions,\n allowOutsideClick: true,\n clickOutsideDeactivates: event => this.shouldCloseByClickEvent(event),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => {\n return this.isFocusVisible ? undefined : false;\n }\n });\n this.trap.activate();\n } else {\n this.addListeners();\n this.catOpen.emit();\n }\n });\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async close(shouldReturnFocus = this.isFocusVisible): Promise<void> {\n if (!this._isOpen) {\n return; // busy or closed\n }\n\n this._isOpen = null;\n this.trap?.deactivate();\n this.trap = undefined;\n this.content.classList.remove('show');\n if (shouldReturnFocus) {\n this.trigger?.focus();\n }\n this.removeListeners();\n // give CSS transition time to apply\n setTimeout(() => {\n this._isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad() {\n this.initAnchor();\n if (!this.delayedTriggerInit) {\n this.initTrigger();\n }\n }\n\n disconnectedCallback() {\n this.trap?.deactivate();\n this.trap = undefined;\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private addListeners() {\n window.addEventListener('click', this.boundWindowClickListener);\n window.addEventListener('mousedown', this.boundWindowMousedownListener);\n window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n }\n\n private removeListeners() {\n window.removeEventListener('click', this.boundWindowClickListener);\n window.removeEventListener('mousedown', this.boundWindowMousedownListener);\n window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n }\n\n private handleClickOutside(event: MouseEvent | TouchEvent): void {\n if (this.shouldCloseByClickEvent(event)) {\n this.close();\n }\n }\n\n private shouldCloseByClickEvent(event: MouseEvent | TouchEvent): boolean {\n return (\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was on trigger - this case is handled by trigger click listener\n !event.composedPath().includes(this.trigger as HTMLElement) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', (event: Event) => {\n this.isFocusVisible = this.isEventOriginFromKeyboard(event as UIEvent);\n this.toggle();\n });\n }\n\n private isEventOriginFromKeyboard(event: UIEvent): boolean {\n return event.detail === 0;\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n }\n\n private findTrigger() {\n let trigger: FocusableElement | undefined;\n let elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : (elem?.querySelector('[data-trigger]') ?? undefined);\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles\n // which stencil assigns to component in prehydration state\n if (!trigger) {\n elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = findFirstTabbableIncludeHidden(elem as HTMLElement);\n }\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement | undefined, justify = this.justify) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ rects, availableWidth, availableHeight, elements }) {\n if (justify) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxWidth: `${rects.reference.width}px`,\n maxHeight: `${availableHeight}px`\n });\n } else {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n }\n })\n ];\n const middleware = [offset(CatDropdown.OFFSET)];\n const flipMiddleware = flip({\n // Ensure we flip to the perpendicular axis if it doesn't fit\n // on narrow viewports.\n crossAxis: 'alignment',\n fallbackAxisSideDirection: 'end'\n });\n const shiftMiddleware = shift();\n\n // Prioritize flip over shift for edge-aligned placements only.\n if (this.placement.includes('-')) {\n middleware.push(flipMiddleware, shiftMiddleware);\n } else {\n middleware.push(shiftMiddleware, flipMiddleware);\n }\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [...middleware, ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}
|
|
@@ -73,7 +73,9 @@ export class CatMenu {
|
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
75
75
|
requestAnimationFrame(() => {
|
|
76
|
-
if (!this.isMenuItemInFocus()
|
|
76
|
+
if (!this.isMenuItemInFocus() &&
|
|
77
|
+
document.activeElement !== document.body &&
|
|
78
|
+
document.activeElement !== this.hostElement) {
|
|
77
79
|
this.dropdown?.close(false);
|
|
78
80
|
}
|
|
79
81
|
});
|
|
@@ -151,10 +153,10 @@ export class CatMenu {
|
|
|
151
153
|
this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
|
|
152
154
|
}
|
|
153
155
|
render() {
|
|
154
|
-
return (h(Host, { key: '
|
|
156
|
+
return (h(Host, { key: '7f6a8d695af0d7f30b7da9ba5558f0c6983e4315' }, h("cat-dropdown", { key: '722ec1a940599257082c2a7b586dd662e09aab39', ref: el => (this.dropdown = el), focusTrap: false, placement: this.placement, justify: this.justify, arrowNavigation: "none", noResize: this.noResize, overflow: this.overflow, delayedTriggerInit: this.delayedTriggerInit, onCatOpen: this.onMenuOpen, onCatClose: () => this.catClose.emit() }, h("cat-button", { key: 'a1562b313b53ae8a736f096e3717ee3de78b9862', slot: "trigger", part: "trigger", variant: this.triggerVariant, size: this.triggerSize, icon: this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined), iconOnly: this.triggerIconOnly ?? this.triggerLabel === undefined, color: this.triggerColor, a11yLabel: this.triggerA11yLabel ?? this.triggerLabel, class: this.triggerClass, testId: this.triggerTestId, nativeAttributes: {
|
|
155
157
|
...this.triggerNativeAttributes,
|
|
156
158
|
'aria-haspopup': 'menu'
|
|
157
|
-
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: '
|
|
159
|
+
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: 'f8cbc8e8841e4d9c2d28b38bae55bdbde2693a10', name: "trigger-label" }, this.triggerLabel)), h("nav", { key: 'bcd0eebb7e9bdbb23f2dbcfba7d6d13653789c06', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, h("ul", { key: '52ced18c6c0349795e1516090b33cd5c7bebb451' }, h("slot", { key: '3cedc5e3d1392fec9d49222165e9c96e7f40b0f2' }))))));
|
|
158
160
|
}
|
|
159
161
|
static get is() { return "cat-menu"; }
|
|
160
162
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-menu.js","sourceRoot":"","sources":["../../../src/components/cat-menu/cat-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\nimport { findClosest } from '../../utils/find-closest';\n\n/**\n * A menu component that provides a dropdown with a built-in configurable trigger button\n * and proper ARIA semantics and keyboard navigation for menu items.\n *\n * The trigger is always a cat-button with sensible defaults but fully configurable\n * through trigger-specific props.\n */\n@Component({\n tag: 'cat-menu',\n styleUrl: 'cat-menu.scss',\n shadow: true\n})\nexport class CatMenu {\n private dropdown?: HTMLCatDropdownElement;\n private catMenuItems: HTMLCatMenuItemElement[] = [];\n private mutationObserver?: MutationObserver;\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * The arrow key navigation direction for menu items.\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * The trigger button variant.\n */\n @Prop() triggerVariant: 'filled' | 'outlined' | 'text' = 'text';\n\n /**\n * The trigger button size.\n */\n @Prop() triggerSize: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * The trigger button icon.\n */\n @Prop() triggerIcon?: string;\n\n /**\n * Show only the icon in the trigger button.\n */\n @Prop() triggerIconOnly?: boolean | Breakpoint;\n\n /**\n * The trigger button label.\n */\n @Prop() triggerLabel?: string;\n\n /**\n * The color palette of the trigger button.\n */\n @Prop() triggerColor: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'secondary';\n\n /**\n * The trigger button accessibility label. If not set, falls back to triggerLabel.\n */\n @Prop() triggerA11yLabel?: string;\n\n /**\n * Additional CSS class for the trigger button.\n */\n @Prop() triggerClass?: string;\n\n /**\n * Test ID for the trigger button.\n */\n @Prop() triggerTestId?: string;\n\n /**\n * Native attributes for the trigger button.\n */\n @Prop() triggerNativeAttributes?: { [key: string]: string };\n\n /**\n * Disable the menu.\n */\n @Prop() disabled = false;\n\n /**\n * Make the dropdown match the width of the reference regardless of its\n * contents. Note that this only applies to the minimum width of the\n * dropdown. The maximum width is still limited by the viewport.\n */\n @Prop() justify = false;\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * Whether the dropdown trigger should be initialized only before first opening.\n * Can be useful when trigger is rendered dynamically.\n */\n @Prop() delayedTriggerInit = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the trigger button is clicked.\n */\n @Event() catTriggerClick!: EventEmitter<MouseEvent>;\n\n @Listen('focusout')\n onFocusOut(): void {\n if (!this.dropdown?.isOpen) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (!this.isMenuItemInFocus()) {\n this.dropdown?.close(false);\n }\n });\n }\n\n private getDeepActiveElement(): Element | null {\n let active: Element | null = document.activeElement;\n while (active?.shadowRoot?.activeElement) {\n active = active.shadowRoot.activeElement;\n }\n return active ? (findClosest('cat-menu-item', active) ?? active) : null;\n }\n\n @Listen('keydown', { target: 'document' })\n onDocumentKeydown(event: KeyboardEvent): void {\n const navigationKeys =\n this.arrowNavigation === 'horizontal'\n ? ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n : ['ArrowDown', 'ArrowUp', 'Home', 'End'];\n\n if (!this.dropdown?.isOpen || !navigationKeys.includes(event.key)) {\n return;\n }\n\n const targetElements = this.catMenuItems.filter(item => !item.disabled);\n if (!targetElements.length) {\n return;\n }\n const activeIdx = targetElements.findIndex(item => this.getDeepActiveElement() === item);\n\n let targetIdx: number;\n if (event.key === 'Home') {\n targetIdx = 0;\n } else if (event.key === 'End') {\n targetIdx = targetElements.length - 1;\n } else {\n const forwardKey = this.arrowNavigation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n const activeOff = event.key === forwardKey ? 1 : -1;\n targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n }\n\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n\n componentDidLoad(): void {\n this.syncMenuItems();\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-MENU-ITEM') && this.syncMenuItems()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n }\n\n disconnectedCallback(): void {\n this.mutationObserver?.disconnect();\n }\n\n /**\n * Opens the menu.\n */\n @Method()\n async open(): Promise<void> {\n await this.dropdown?.open();\n }\n\n /**\n * Closes the menu.\n */\n @Method()\n async close(): Promise<void> {\n await this.dropdown?.close();\n }\n\n /**\n * Toggles the menu.\n */\n @Method()\n async toggle(): Promise<void> {\n await this.dropdown?.toggle();\n }\n\n private onTriggerClick = (event: CustomEvent<MouseEvent>) => {\n this.catTriggerClick.emit(event.detail);\n };\n\n private onMenuOpen = (event: CustomEvent<FocusEvent>) => {\n this.catOpen.emit(event.detail);\n // Set focus to first non-disabled menu item when menu opens\n requestAnimationFrame(() => {\n if (!this.isMenuItemInFocus()) {\n const firstEnabledItem = this.catMenuItems.find(item => !item.disabled);\n firstEnabledItem?.doFocus();\n }\n });\n };\n\n private isMenuItemInFocus(): boolean {\n const activeElement = this.getDeepActiveElement();\n const isInMenu = activeElement && this.catMenuItems.some(item => activeElement === item);\n\n return !!(activeElement && isInMenu);\n }\n\n private syncMenuItems() {\n this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));\n }\n\n render() {\n return (\n <Host>\n <cat-dropdown\n ref={el => (this.dropdown = el)}\n focusTrap={false}\n placement={this.placement}\n justify={this.justify}\n arrowNavigation=\"none\"\n noResize={this.noResize}\n overflow={this.overflow}\n delayedTriggerInit={this.delayedTriggerInit}\n onCatOpen={this.onMenuOpen}\n onCatClose={() => this.catClose.emit()}\n >\n <cat-button\n slot=\"trigger\"\n part=\"trigger\"\n variant={this.triggerVariant}\n size={this.triggerSize}\n icon={this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined)}\n iconOnly={this.triggerIconOnly ?? this.triggerLabel === undefined}\n color={this.triggerColor}\n a11yLabel={this.triggerA11yLabel ?? this.triggerLabel}\n class={this.triggerClass}\n testId={this.triggerTestId}\n nativeAttributes={{\n ...this.triggerNativeAttributes,\n 'aria-haspopup': 'menu'\n }}\n disabled={this.disabled}\n onCatClick={this.onTriggerClick}\n >\n {!this.triggerIconOnly && <slot name=\"trigger-label\">{this.triggerLabel}</slot>}\n </cat-button>\n <nav role=\"menu\" slot=\"content\" class=\"cat-menu-list\" aria-orientation={this.arrowNavigation}>\n <ul>\n <slot></slot>\n </ul>\n </nav>\n </cat-dropdown>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-menu.js","sourceRoot":"","sources":["../../../src/components/cat-menu/cat-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\nimport { findClosest } from '../../utils/find-closest';\n\n/**\n * A menu component that provides a dropdown with a built-in configurable trigger button\n * and proper ARIA semantics and keyboard navigation for menu items.\n *\n * The trigger is always a cat-button with sensible defaults but fully configurable\n * through trigger-specific props.\n */\n@Component({\n tag: 'cat-menu',\n styleUrl: 'cat-menu.scss',\n shadow: true\n})\nexport class CatMenu {\n private dropdown?: HTMLCatDropdownElement;\n private catMenuItems: HTMLCatMenuItemElement[] = [];\n private mutationObserver?: MutationObserver;\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * The arrow key navigation direction for menu items.\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * The trigger button variant.\n */\n @Prop() triggerVariant: 'filled' | 'outlined' | 'text' = 'text';\n\n /**\n * The trigger button size.\n */\n @Prop() triggerSize: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * The trigger button icon.\n */\n @Prop() triggerIcon?: string;\n\n /**\n * Show only the icon in the trigger button.\n */\n @Prop() triggerIconOnly?: boolean | Breakpoint;\n\n /**\n * The trigger button label.\n */\n @Prop() triggerLabel?: string;\n\n /**\n * The color palette of the trigger button.\n */\n @Prop() triggerColor: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'secondary';\n\n /**\n * The trigger button accessibility label. If not set, falls back to triggerLabel.\n */\n @Prop() triggerA11yLabel?: string;\n\n /**\n * Additional CSS class for the trigger button.\n */\n @Prop() triggerClass?: string;\n\n /**\n * Test ID for the trigger button.\n */\n @Prop() triggerTestId?: string;\n\n /**\n * Native attributes for the trigger button.\n */\n @Prop() triggerNativeAttributes?: { [key: string]: string };\n\n /**\n * Disable the menu.\n */\n @Prop() disabled = false;\n\n /**\n * Make the dropdown match the width of the reference regardless of its\n * contents. Note that this only applies to the minimum width of the\n * dropdown. The maximum width is still limited by the viewport.\n */\n @Prop() justify = false;\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * Whether the dropdown trigger should be initialized only before first opening.\n * Can be useful when trigger is rendered dynamically.\n */\n @Prop() delayedTriggerInit = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the trigger button is clicked.\n */\n @Event() catTriggerClick!: EventEmitter<MouseEvent>;\n\n @Listen('focusout')\n onFocusOut(): void {\n if (!this.dropdown?.isOpen) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (\n !this.isMenuItemInFocus() &&\n document.activeElement !== document.body &&\n document.activeElement !== this.hostElement\n ) {\n this.dropdown?.close(false);\n }\n });\n }\n\n private getDeepActiveElement(): Element | null {\n let active: Element | null = document.activeElement;\n while (active?.shadowRoot?.activeElement) {\n active = active.shadowRoot.activeElement;\n }\n return active ? (findClosest('cat-menu-item', active) ?? active) : null;\n }\n\n @Listen('keydown', { target: 'document' })\n onDocumentKeydown(event: KeyboardEvent): void {\n const navigationKeys =\n this.arrowNavigation === 'horizontal'\n ? ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n : ['ArrowDown', 'ArrowUp', 'Home', 'End'];\n\n if (!this.dropdown?.isOpen || !navigationKeys.includes(event.key)) {\n return;\n }\n\n const targetElements = this.catMenuItems.filter(item => !item.disabled);\n if (!targetElements.length) {\n return;\n }\n const activeIdx = targetElements.findIndex(item => this.getDeepActiveElement() === item);\n\n let targetIdx: number;\n if (event.key === 'Home') {\n targetIdx = 0;\n } else if (event.key === 'End') {\n targetIdx = targetElements.length - 1;\n } else {\n const forwardKey = this.arrowNavigation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n const activeOff = event.key === forwardKey ? 1 : -1;\n targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n }\n\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n\n componentDidLoad(): void {\n this.syncMenuItems();\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-MENU-ITEM') && this.syncMenuItems()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n }\n\n disconnectedCallback(): void {\n this.mutationObserver?.disconnect();\n }\n\n /**\n * Opens the menu.\n */\n @Method()\n async open(): Promise<void> {\n await this.dropdown?.open();\n }\n\n /**\n * Closes the menu.\n */\n @Method()\n async close(): Promise<void> {\n await this.dropdown?.close();\n }\n\n /**\n * Toggles the menu.\n */\n @Method()\n async toggle(): Promise<void> {\n await this.dropdown?.toggle();\n }\n\n private onTriggerClick = (event: CustomEvent<MouseEvent>) => {\n this.catTriggerClick.emit(event.detail);\n };\n\n private onMenuOpen = (event: CustomEvent<FocusEvent>) => {\n this.catOpen.emit(event.detail);\n // Set focus to first non-disabled menu item when menu opens\n requestAnimationFrame(() => {\n if (!this.isMenuItemInFocus()) {\n const firstEnabledItem = this.catMenuItems.find(item => !item.disabled);\n firstEnabledItem?.doFocus();\n }\n });\n };\n\n private isMenuItemInFocus(): boolean {\n const activeElement = this.getDeepActiveElement();\n const isInMenu = activeElement && this.catMenuItems.some(item => activeElement === item);\n\n return !!(activeElement && isInMenu);\n }\n\n private syncMenuItems() {\n this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));\n }\n\n render() {\n return (\n <Host>\n <cat-dropdown\n ref={el => (this.dropdown = el)}\n focusTrap={false}\n placement={this.placement}\n justify={this.justify}\n arrowNavigation=\"none\"\n noResize={this.noResize}\n overflow={this.overflow}\n delayedTriggerInit={this.delayedTriggerInit}\n onCatOpen={this.onMenuOpen}\n onCatClose={() => this.catClose.emit()}\n >\n <cat-button\n slot=\"trigger\"\n part=\"trigger\"\n variant={this.triggerVariant}\n size={this.triggerSize}\n icon={this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined)}\n iconOnly={this.triggerIconOnly ?? this.triggerLabel === undefined}\n color={this.triggerColor}\n a11yLabel={this.triggerA11yLabel ?? this.triggerLabel}\n class={this.triggerClass}\n testId={this.triggerTestId}\n nativeAttributes={{\n ...this.triggerNativeAttributes,\n 'aria-haspopup': 'menu'\n }}\n disabled={this.disabled}\n onCatClick={this.onTriggerClick}\n >\n {!this.triggerIconOnly && <slot name=\"trigger-label\">{this.triggerLabel}</slot>}\n </cat-button>\n <nav role=\"menu\" slot=\"content\" class=\"cat-menu-list\" aria-orientation={this.arrowNavigation}>\n <ul>\n <slot></slot>\n </ul>\n </nav>\n </cat-dropdown>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -16,7 +16,7 @@ function findClosest(selector, element) {
|
|
|
16
16
|
return nextElement ? findClosest(selector, nextElement) : null;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, #fff);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.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));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.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-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-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.5rem}.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.75rem}.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),:host(.cat-tab-more-button)::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,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-inline){display:inline}:host(.cat-inline) .cat-button{display:inline;padding:0}:host(.cat-inline) .cat-button-content{display:inline}";
|
|
19
|
+
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button>*{pointer-events:none}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:rgb(var(--outlined-bg));box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, rgb(var(--outlined-bg)));color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)))}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)))}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)))}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.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));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.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-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-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);--outlined-bg:var(--cat-primary-bg-outlined, 255, 255, 255);--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);--outlined-bg:var(--cat-secondary-bg-outlined, 255, 255, 255);--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);--outlined-bg:var(--cat-info-bg-outlined, 255, 255, 255);--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);--outlined-bg:var(--cat-success-bg-outlined, 255, 255, 255);--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);--outlined-bg:var(--cat-warning-bg-outlined, 255, 255, 255);--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);--outlined-bg:var(--cat-danger-bg-outlined, 255, 255, 255);--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.5rem}.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.75rem}.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),:host(.cat-tab-more-button)::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,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-inline){display:inline}:host(.cat-inline) .cat-button{display:inline;padding:0}:host(.cat-inline) .cat-button-content{display:inline}";
|
|
20
20
|
|
|
21
21
|
const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLElement {
|
|
22
22
|
constructor(registerHost) {
|