q2-tecton-elements 1.12.0-alpha.0 → 1.13.0

package/dist/esm/q2-btn_2.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
-import { h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index-ec6660af.js';
-import { s as shapes } from './shapes-81c11dfe.js';
+import { r as registerInstance, h, g as getElement } from './index-dbfb3ecc.js';
+import { h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index-0ff8de52.js';
+import { s as shapes } from './shapes-cff4e1f0.js';
 
-const stylesCss$1 = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}:host{--comp-btn-primary-bg:var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));--comp-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-btn-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.19),\n      0 3px 3px rgba(0, 0, 0, 0.23);--comp-btn-neutral-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.24),\n      0 3px 3px rgba(0, 0, 0, 0.36);--comp-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, var(--t-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, var(--t-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-secondary-bg:var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));--comp-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, var(--t-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, var(--t-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-neutral-bg:var(--tct-btn-neutral-bg, transparent);--comp-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, var(--t-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, var(--t-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow)))}button{margin:var(--tct-scale-0, var(--app-scale-0, 0));padding:var(--tct-scale-0, var(--app-scale-0, 0));display:inline-block;width:100%;border:0;background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px))))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{background:var(--comp-btn-primary-bg);color:var(--comp-btn-primary-font-color);border-color:var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent));border-width:var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0));border-radius:var(--tct-btn-primary-border-radius, var(--t-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, var(--t-btn-primary-font-weight, 600));text-transform:var(--tct-btn-primary-text-transform, var(--t-btn-primary-text-transform, none));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--t-btn-primary-letter-spacing, normal))}:host([color=primary]) button:enabled:hover,:host([color=primary]) button:enabled:focus,:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:active{background:var(--tct-btn-primary-hover-bg, var(--t-btn-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-primary-hover-font-color, var(--t-btn-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-primary-hover-border-color, var(--t-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent))))}:host([color=primary]) button:hover:enabled,:host([color=primary]) button:active:enabled,:host([intent=workflow-primary]) button:hover:enabled,:host([intent=workflow-primary]) button:active:enabled{box-shadow:var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:focus,:host([intent=workflow-primary]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-primary-hover-box-shadow, 0 0 0 2px #33b4ff)))}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{background:var(--tct-btn-primary-disabled-bg, var(--t-btn-primary-disabled-bg, var(--comp-btn-primary-bg)));color:var(--tct-btn-primary-disabled-font-color, var(--t-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color)));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--t-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{background:var(--comp-btn-secondary-bg);color:var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent));border-width:var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0));border-radius:var(--tct-btn-secondary-border-radius, var(--t-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-secondary-box-shadow);font-weight:var(--tct-btn-secondary-font-weight, var(--t-btn-secondary-font-weight, 600));text-transform:var(--tct-btn-secondary-text-transform, var(--t-btn-secondary-text-transform, none));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--t-btn-secondary-letter-spacing, normal))}:host([color=secondary]) button:enabled:hover,:host([color=secondary]) button:enabled:focus,:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:active{background:var(--tct-btn-secondary-hover-bg, var(--t-btn-secondary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-hover-border-color, var(--t-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent))))}:host([color=secondary]) button:hover:enabled,:host([color=secondary]) button:active:enabled,:host([intent=workflow-secondary]) button:hover:enabled,:host([intent=workflow-secondary]) button:active:enabled{box-shadow:var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:focus,:host([intent=workflow-secondary]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-secondary-hover-box-shadow)))}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{background:var(--tct-btn-secondary-disabled-bg, var(--t-btn-secondary-disabled-bg, var(--comp-btn-secondary-bg)));color:var(--tct-btn-secondary-disabled-font-color, var(--t-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color)));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--t-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow)))}:host([intent=neutral]) button{background:var(--comp-btn-neutral-bg, var(--tct-btn-neutral-bg, var(--t-btn-neutral-bg, transparent)));color:var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-color:var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent));border-width:var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0));border-radius:var(--tct-btn-neutral-border-radius, var(--t-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-neutral-box-shadow);font-weight:var(--tct-btn-neutral-font-weight, var(--t-btn-neutral-font-weight, 600));text-transform:var(--tct-btn-neutral-text-transform, var(--t-btn-neutral-text-transform, none));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--t-btn-neutral-letter-spacing, normal))}:host([intent=neutral]) button:enabled:hover,:host([intent=neutral]) button:enabled:focus,:host([intent=neutral]) button:enabled:active{background:var(--tct-btn-neutral-hover-bg, var(--t-btn-neutral-hover-bg, transparent));color:var(--tct-btn-neutral-hover-font-color, var(--t-btn-neutral-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-neutral-hover-border-color, var(--t-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent))))}:host([intent=neutral]) button:hover:enabled,:host([intent=neutral]) button:active:enabled{box-shadow:var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-neutral-hover-box-shadow)))}:host([intent=neutral]) button:disabled{background:var(--tct-btn-neutral-disabled-bg, var(--t-btn-neutral-disabled-bg, var(--comp-btn-neutral-bg)));color:var(--tct-btn-neutral-disabled-font-color, var(--t-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color)));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow))}:host button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, 0))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct---btn-font-size, var(--t---btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));background-color:var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-bg)));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1, 5px)}:host([loading]) .icon-right div{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentColor;--tct-loading-secondary-color:currentColor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}";
+const stylesCss$1 = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}:host{--comp-btn-primary-bg:var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));--comp-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-btn-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.19),\n      0 3px 3px rgba(0, 0, 0, 0.23);--comp-btn-neutral-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.24),\n      0 3px 3px rgba(0, 0, 0, 0.36);--comp-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, var(--t-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, var(--t-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-secondary-bg:var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));--comp-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, var(--t-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, var(--t-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-neutral-bg:var(--tct-btn-neutral-bg, transparent);--comp-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, var(--t-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, var(--t-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow)))}button{margin:var(--tct-scale-0, var(--app-scale-0, 0));padding:var(--tct-scale-0, var(--app-scale-0, 0));display:inline-block;width:100%;border:0;background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px))))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{background:var(--comp-btn-primary-bg);color:var(--comp-btn-primary-font-color);border-color:var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent));border-width:var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0));border-radius:var(--tct-btn-primary-border-radius, var(--t-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, var(--t-btn-primary-font-weight, 600));text-transform:var(--tct-btn-primary-text-transform, var(--t-btn-primary-text-transform, none));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--t-btn-primary-letter-spacing, normal))}:host([color=primary]) button:enabled:hover,:host([color=primary]) button:enabled:focus,:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:active{background:var(--tct-btn-primary-hover-bg, var(--t-btn-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-primary-hover-font-color, var(--t-btn-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-primary-hover-border-color, var(--t-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent))))}:host([color=primary]) button:hover:enabled,:host([color=primary]) button:active:enabled,:host([intent=workflow-primary]) button:hover:enabled,:host([intent=workflow-primary]) button:active:enabled{box-shadow:var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:focus,:host([intent=workflow-primary]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-primary-hover-box-shadow, 0 0 0 2px #33b4ff)))}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{background:var(--tct-btn-primary-disabled-bg, var(--t-btn-primary-disabled-bg, var(--comp-btn-primary-bg)));color:var(--tct-btn-primary-disabled-font-color, var(--t-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color)));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--t-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{background:var(--comp-btn-secondary-bg);color:var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent));border-width:var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0));border-radius:var(--tct-btn-secondary-border-radius, var(--t-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-secondary-box-shadow);font-weight:var(--tct-btn-secondary-font-weight, var(--t-btn-secondary-font-weight, 600));text-transform:var(--tct-btn-secondary-text-transform, var(--t-btn-secondary-text-transform, none));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--t-btn-secondary-letter-spacing, normal))}:host([color=secondary]) button:enabled:hover,:host([color=secondary]) button:enabled:focus,:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:active{background:var(--tct-btn-secondary-hover-bg, var(--t-btn-secondary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-hover-border-color, var(--t-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent))))}:host([color=secondary]) button:hover:enabled,:host([color=secondary]) button:active:enabled,:host([intent=workflow-secondary]) button:hover:enabled,:host([intent=workflow-secondary]) button:active:enabled{box-shadow:var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:focus,:host([intent=workflow-secondary]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-secondary-hover-box-shadow)))}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{background:var(--tct-btn-secondary-disabled-bg, var(--t-btn-secondary-disabled-bg, var(--comp-btn-secondary-bg)));color:var(--tct-btn-secondary-disabled-font-color, var(--t-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color)));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--t-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow)))}:host([intent=neutral]) button{background:var(--comp-btn-neutral-bg, var(--tct-btn-neutral-bg, var(--t-btn-neutral-bg, transparent)));color:var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-color:var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent));border-width:var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0));border-radius:var(--tct-btn-neutral-border-radius, var(--t-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-neutral-box-shadow);font-weight:var(--tct-btn-neutral-font-weight, var(--t-btn-neutral-font-weight, 600));text-transform:var(--tct-btn-neutral-text-transform, var(--t-btn-neutral-text-transform, none));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--t-btn-neutral-letter-spacing, normal))}:host([intent=neutral]) button:enabled:hover,:host([intent=neutral]) button:enabled:focus,:host([intent=neutral]) button:enabled:active{background:var(--tct-btn-neutral-hover-bg, var(--t-btn-neutral-hover-bg, transparent));color:var(--tct-btn-neutral-hover-font-color, var(--t-btn-neutral-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-neutral-hover-border-color, var(--t-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent))))}:host([intent=neutral]) button:hover:enabled,:host([intent=neutral]) button:active:enabled{box-shadow:var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-neutral-hover-box-shadow)))}:host([intent=neutral]) button:disabled{background:var(--tct-btn-neutral-disabled-bg, var(--t-btn-neutral-disabled-bg, var(--comp-btn-neutral-bg)));color:var(--tct-btn-neutral-disabled-font-color, var(--t-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color)));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow))}:host button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, 0))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));background-color:var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-bg)));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1, 5px)}:host([loading]) .icon-right div{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentColor;--tct-loading-secondary-color:currentColor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}";
 
 const Q2Btn = class {
   constructor(hostRef) {
@@ -63,17 +63,17 @@ const Q2Btn = class {
     const { iconPosition, loading, badge, label, hideLabel } = this;
     const renderLoadingSpinner = iconPosition || loading;
     const isLoadingSpinnerInline = !iconPosition || badge;
-    return (h("button", { "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition && `icon-${iconPosition}` }, h("div", null, renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? (loc(label)) : (h("slot", { onSlotchange: this.handleSlotChange })))));
+    return (h("button", { "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition && `icon-${iconPosition}` }, h("div", null, renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? loc(label) : h("slot", { onSlotchange: this.handleSlotChange }))));
   }
   get buttonAttributes() {
     return {
-      ariaExpanded: this.ariaExpanded !== undefined ? `${!!this.ariaExpanded}` : undefined,
-      ariaHasPopup: this.ariaHasPopup ? `${this.ariaHasPopup}` : undefined,
+      ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded.toString() === 'true'}` : undefined,
+      ariaHasPopup: this.ariaHasPopup !== undefined ? `${this.ariaHasPopup.toString() === 'true'}` : undefined,
       ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,
-      ariaSelected: this.ariaSelected ? `${this.ariaSelected}` : undefined,
+      ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected.toString() === 'true'}` : undefined,
       disabled: this.disabled || false,
       type: this.type || 'button',
-      tabindex: this.tabIndex || undefined
+      tabindex: this.tabIndex || undefined,
     };
   }
   get hostElement() { return getElement(this); }
@@ -102,9 +102,9 @@ const Q2Loading = class {
     const loaderMap = {
       default: this.spinner,
       spinner: this.spinner,
-      skeleton: this.skeletonLoader
+      skeleton: this.skeletonLoader,
     };
-    return loaderMap[this.type] || loaderMap['default'];
+    return loaderMap[this.type] || loaderMap.default;
   }
   get modifiersSet() {
     if (this.type !== 'skeleton' || !this.modifiers) {
@@ -125,9 +125,9 @@ const Q2Loading = class {
   get spinnerShape() {
     const spinnerMap = {
       default: this.halfCircleSpinner,
-      'half-circle': this.halfCircleSpinner
+      'half-circle': this.halfCircleSpinner,
     };
-    return spinnerMap[this.type] || spinnerMap['default'];
+    return spinnerMap[this.type] || spinnerMap.default;
   }
   get localizedLabel() {
     return loc(this.label || 'tecton.element.loading.ariaLabel');

package/dist/esm/q2-calendar.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { l as loc, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-ec6660af.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dbfb3ecc.js';
+import { l as loc, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-0ff8de52.js';
 
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -2764,7 +2764,7 @@ function formatDateShort(value) {
     month: '2-digit',
     day: '2-digit',
     year: 'numeric',
-    timeZone: 'UTC'
+    timeZone: 'UTC',
   }).format(new Date(isoDate));
 }
 function formatDateLong(value) {
@@ -2774,7 +2774,7 @@ function formatDateLong(value) {
   return new Intl.DateTimeFormat('default', {
     month: 'short',
     day: 'numeric',
-    year: 'numeric'
+    year: 'numeric',
   }).format(date);
 }
 function convertMomentFormat(stringFormat) {
@@ -2794,7 +2794,7 @@ function stringToDate(date) {
     return undefined;
   }
   let result;
-  let dateParts = date.split(/[\/\-]/).map(part => part.padStart(2, '0'));
+  const dateParts = date.split(/[\/\-]/).map(part => part.padStart(2, '0'));
   const isIsoString = isString && date.length >= 24 && date[10] === 'T';
   const isCompleteDate = dateParts.length === 3;
   const isPartialDate = dateParts.length < 3;
@@ -2849,7 +2849,7 @@ function setupMonthYear(value = new Date()) {
   const monthIndex = Number(value.toISOString().split('-')[1]) - 1;
   return {
     monthIndex,
-    selectedYear: value.getFullYear()
+    selectedYear: value.getFullYear(),
   };
 }
 function validateInput(input = '', validDays = [], validDates = [], // white list
@@ -2893,14 +2893,10 @@ startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
     if (input.length >= 5 && !isAvailable) {
       isValid$1 = false;
       messageType = 'error';
-      if (!monthName || !date || !year) {
-        message = `${loc('tecton.element.calendar.hint.invalidDate')}: ${formatString}`;
-      }
-      else {
-        message = loc('tecton.element.calendar.hint.notAvailableDate', [
-          formatDateLong(inputDate)
-        ]);
-      }
+      const isInvalid = !monthName || !date || !year;
+      message = isInvalid
+        ? `${loc('tecton.element.calendar.hint.invalidDate')}: ${formatString}`
+        : loc('tecton.element.calendar.hint.notAvailableDate', [formatDateLong(inputDate)]);
     }
   }
   else {
@@ -2914,19 +2910,19 @@ startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
     message,
     inputDate,
     isAvailable,
-    calendarPosition
+    calendarPosition,
   };
 }
 function buildInputDate(input, assume) {
   const now = new Date();
-  let [month, day, year] = input.split('/');
+  const [month, day, year] = input.split('/');
   if (input.length === 10) {
     return new Date(input);
   }
   else if (month && day && Number(day) > 0) {
-    day = Number(day) < 10 ? `0${Number(day)}` : day;
-    year = !year || year.length < 4 ? assumeYear(month, day, assume) : year;
-    return new Date(`${month}/${day}/${year}`);
+    const twoDigitDay = Number(day) < 10 ? `0${Number(day)}` : day;
+    const fourDigitYear = !year || year.length < 4 ? assumeYear(month, day, assume) : year;
+    return new Date(`${month}/${twoDigitDay}/${fourDigitYear}`);
   }
   else if (month && day && Number(day) === 0) {
     return new Date(''); // invalid date: 09/0/2021
@@ -2963,6 +2959,12 @@ function handleMissingZeros(input) {
   }
   return input;
 }
+function reorderDateString(input) {
+  const dateParts = (input || '').split('-');
+  if (dateParts.length !== 3)
+    return '';
+  return `${dateParts[1]}/${dateParts[2]}/${dateParts[0]}`;
+}
 function firstDayOfWeekInMonth(month, year) {
   return new Date(year, month, 1, 1, 1, 1, 1).getDay();
 }
@@ -2974,7 +2976,7 @@ function getDays() {
     loc('tecton.element.calendar.days.short.Wednesday'),
     loc('tecton.element.calendar.days.short.Thursday'),
     loc('tecton.element.calendar.days.short.Friday'),
-    loc('tecton.element.calendar.days.short.Saturday')
+    loc('tecton.element.calendar.days.short.Saturday'),
   ];
 }
 function getDaysOfWeek() {
@@ -2985,7 +2987,7 @@ function getDaysOfWeek() {
     loc('tecton.element.calendar.days.Wednesday'),
     loc('tecton.element.calendar.days.Thursday'),
     loc('tecton.element.calendar.days.Friday'),
-    loc('tecton.element.calendar.days.Saturday')
+    loc('tecton.element.calendar.days.Saturday'),
   ];
 }
 function getMonths() {
@@ -3001,7 +3003,7 @@ function getMonths() {
     loc('tecton.element.calendar.months.September'),
     loc('tecton.element.calendar.months.October'),
     loc('tecton.element.calendar.months.November'),
-    loc('tecton.element.calendar.months.December')
+    loc('tecton.element.calendar.months.December'),
   ];
 }
 
@@ -3013,6 +3015,7 @@ function generateDatesFromMonthYear(month, year) {
   }, []);
 }
 function getValidDaysOfWeek(checksum = 127) {
+  /* tslint:disable:no-bitwise */
   const sunValid = checksum & 1;
   const monValid = checksum & 2;
   const tuesValid = checksum & 4;
@@ -3020,6 +3023,7 @@ function getValidDaysOfWeek(checksum = 127) {
   const thursValid = checksum & 16;
   const friValid = checksum & 32;
   const satValid = checksum & 64;
+  /* tslint:enable:no-bitwise */
   const ret = [];
   if (checksum <= 0)
     return ret;
@@ -3087,7 +3091,7 @@ function getDayState(dayInMonth, dateValidators, currentDate) {
   const isEndDate = isSameDay(dayInMonth, dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.endDate);
   return { isSelected, isToday, isStartDate, isEndDate };
 }
-function generateClassesForCalDay({ isInvalid, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate }) {
+function generateClassesForCalDay({ isInvalid, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate, }) {
   const classes = [];
   if (!isInvalid)
     classes.push('is-valid');
@@ -3121,7 +3125,7 @@ const emptyDate = {
   isSelected: false,
   isStartDate: false,
   isEndDate: false,
-  classList: ''
+  classList: '',
 };
 function addEmptyDates(from, to) {
   if (from === 7)
@@ -3158,7 +3162,7 @@ const Q2Calendar = class {
       }
     };
     this.openCalendar = () => {
-      if (!this.dropdownOpen) {
+      if (!this.readonly && !this.dropdownOpen) {
         this.selectedMonthYear = setupMonthYear(this.dateValue);
         this.dateList = this.buildDateList(this.selectedMonthYear);
         this.dropdownOpen = true;
@@ -3167,6 +3171,8 @@ const Q2Calendar = class {
       }
     };
     this.toggleCalendar = () => {
+      if (this.readonly)
+        return;
       this.dropdownOpen = !this.dropdownOpen;
       this.scheduledAfterRender.push(this.resizeIframe);
       if (this.dropdownOpen) {
@@ -3294,7 +3300,7 @@ const Q2Calendar = class {
       const newYear = removeTimezoneOffset(new Date(year, monthIndex));
       this.selectedMonthYear = {
         monthIndex: newYear.getMonth(),
-        selectedYear: newYear.getFullYear()
+        selectedYear: newYear.getFullYear(),
       };
       this.dateList = this.buildDateList(this.selectedMonthYear);
       this.scheduledAfterRender.push(() => this.checkActiveCellForBlankness());
@@ -3382,13 +3388,14 @@ const Q2Calendar = class {
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
   }
   connectedCallback() {
     this.selectedMonthYear = setupMonthYear(this.dateValue);
     this.dateList = this.buildDateList(this.selectedMonthYear);
+    if (this.value && this.isTypeable && !this.typedValue) {
+      this.typedValue = reorderDateString(this.value);
+    }
     this.validateDate();
   }
   componentWillLoad() {
@@ -3416,9 +3423,7 @@ const Q2Calendar = class {
   }
   get localizedErrors() {
     return ((Array.isArray(this.errors) &&
-      this.errors
-        .filter((error) => error)
-        .map((error) => error && loc(error))) ||
+      this.errors.filter((error) => error).map((error) => error && loc(error))) ||
       []);
   }
   get formattedValue() {
@@ -3433,7 +3438,7 @@ const Q2Calendar = class {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
-      timeZone: 'UTC'
+      timeZone: 'UTC',
     }).format(dateValue);
   }
   get computedPlaceholder() {
@@ -3455,9 +3460,7 @@ const Q2Calendar = class {
       if (isMoment)
         return value.toDate();
       // stringified moment value assigned in html template e.g.) handlebar
-      const isMomentString = typeof value === 'string' &&
-        value.split(' ').length === 6 &&
-        /GMT-\d{4}/g.test(value);
+      const isMomentString = typeof value === 'string' && value.split(' ').length === 6 && /GMT-\d{4}/g.test(value);
       if (isMomentString) {
         value = formatDateISO(value);
       }
@@ -3468,7 +3471,7 @@ const Q2Calendar = class {
     return {
       startDate: stringToDate(this.startDate),
       endDate: stringToDate(this.endDate),
-      cutOffTime: stringToDate(this.cutoffTime)
+      cutOffTime: stringToDate(this.cutoffTime),
     };
   }
   get isTypeable() {
@@ -3485,8 +3488,7 @@ const Q2Calendar = class {
   }
   defaultErrorHandler(event) {
     if (event.target === this.hostElement && !this.hostElement.onerror) {
-      if (Array.isArray(this.errors) &&
-        this.errors.includes('tecton.element.calendar.invalidDate')) {
+      if (Array.isArray(this.errors) && this.errors.includes('tecton.element.calendar.invalidDate')) {
         return;
       }
       this.errors = (this.errors || []).concat(['tecton.element.calendar.invalidDate']);
@@ -3500,8 +3502,7 @@ const Q2Calendar = class {
       this.onsuccess(event);
     }
     else {
-      if (Array.isArray(this.errors) &&
-        this.errors.includes('tecton.element.calendar.invalidDate')) {
+      if (Array.isArray(this.errors) && this.errors.includes('tecton.element.calendar.invalidDate')) {
         this.errors = this.errors.filter(x => x !== 'tecton.element.calendar.invalidDate');
       }
     }
@@ -3524,9 +3525,7 @@ const Q2Calendar = class {
       this.typedValue = newValueAsString;
     }
     else {
-      const dateValue = isMoment
-        ? newValue.toDate()
-        : stringToDate(newValue);
+      const dateValue = isMoment ? newValue.toDate() : stringToDate(newValue);
       this.inputField.value = formatDateShort(dateValue);
       this.selectedMonthYear = setupMonthYear(dateValue);
       this.dateList = this.buildDateList(this.selectedMonthYear);
@@ -3583,22 +3582,21 @@ const Q2Calendar = class {
         else {
           calculationDateList = this.buildDateList({
             monthIndex: month,
-            selectedYear: year
+            selectedYear: year,
           });
         }
         const dateValueDayOfMonth = (_c = dateValue === null || dateValue === void 0 ? void 0 : dateValue.getDate()) !== null && _c !== void 0 ? _c : undefined;
         const isDateValueInvalid = dateValueDayOfMonth
-          ? !calculationDateList.find(({ integer }) => integer === dateValueDayOfMonth)
-            .isValid
+          ? !calculationDateList.find(({ integer }) => integer === dateValueDayOfMonth).isValid
           : true;
         if (isDateValueInvalid) {
           this.error.emit({
             errors: [
               {
                 message: `Value passed is invalid: The date ${this.value} is not valid`,
-                errorCode: 'generalInvalid'
-              }
-            ]
+                errorCode: 'generalInvalid',
+              },
+            ],
           });
         }
         else {
@@ -3607,7 +3605,7 @@ const Q2Calendar = class {
       }
     }
     catch (error) {
-      console.log('Invalid moment value ', this.dateValue);
+      console.warn('Invalid moment value ', this.dateValue);
     }
   }
   focusInput() {
@@ -3616,16 +3614,12 @@ const Q2Calendar = class {
   }
   checkActiveCellForBlankness() {
     const activeElement = this.hostElement.shadowRoot.activeElement;
-    if (!activeElement ||
-      activeElement.tagName !== 'TD' ||
-      !activeElement.hasAttribute('aria-hidden'))
+    if (!activeElement || activeElement.tagName !== 'TD' || !activeElement.hasAttribute('aria-hidden'))
       return;
     const { calendarBody } = this;
     const calendarCells = Array.from(calendarBody.querySelectorAll('td'));
     const indexOfCell = Array.from(calendarCells).indexOf(activeElement);
-    const dayToFocus = indexOfCell < 15
-      ? 1
-      : calendarCells.filter(cell => !cell.hasAttribute('aria-hidden')).length;
+    const dayToFocus = indexOfCell < 15 ? 1 : calendarCells.filter(cell => !cell.hasAttribute('aria-hidden')).length;
     this.focusDay(this.generateDateFromDay(dayToFocus));
   }
   generateDateFromDay(day) {
@@ -3661,11 +3655,11 @@ const Q2Calendar = class {
     this.setHints({
       isValid: true,
       message: `${loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(inputDate)}`,
-      messageType: 'success'
+      messageType: 'success',
     });
   }
   calendarField() {
-    return (h("q2-input", { ref: el => (this.inputField = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: this.dropdownOpen, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
+    return (h("q2-input", { ref: el => (this.inputField = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.dropdownOpen}`, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
         (this.invalid && ['tecton.element.calendar.invalid']) ||
         [], onClick: this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, "icon-right": "calendar", "format-modifier": this.isTypeable ? this.formatModifier : '', pseudo: !this.isTypeable, type: "date", "hide-messages": true, "test-id": "inputAndCalendarToggle" }));
   }

package/dist/esm/q2-card.entry.js

@@ -0,0 +1,123 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-dbfb3ecc.js';
+import { a as isTouchDevice, o as overrideFocus, i as isEventFromElement } from './index-0ff8de52.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}button,a{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));position:relative;width:100%;text-align:start;cursor:pointer;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:solid;border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0}@media (hover: hover){button:hover,button:active,button:focus,a:hover,a:active,a:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)))}button:hover,a:hover{box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))))}button:active,a:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}}button.is-small,a.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}button.is-touch,a.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}button.has-avatar,a.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}button.has-avatar.is-touch,a.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.container{overflow:hidden;display:grid;gap:var(--tct-card-container-gap, var(--t-card-container-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));background:var(--comp-bar-color);height:100%}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
+
+const SUPPORTED_THEME_COLORS = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'accent-1',
+  'accent-2',
+  'accent-3',
+  'accent-4',
+  'accent-5',
+  'accent-6',
+  'accent-7',
+  'accent-8',
+  'accent-9',
+  'accent-10',
+  'accent-11',
+  'accent-12',
+];
+const STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];
+const Q2Card = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.click = createEvent(this, "click", 7);
+    this.isTouch = isTouchDevice();
+    this.isAutoTouch = false;
+    this.isAutoSmall = false;
+    this.handleClick = (event) => {
+      if (this.url)
+        return true;
+      event.preventDefault();
+      event.stopPropagation();
+      this.click.emit();
+    };
+  }
+  componentWillLoad() {
+    this.checkBar();
+  }
+  componentDidLoad() {
+    const { hostElement, clickableElement } = this;
+    hostElement.click = () => clickableElement.click();
+    overrideFocus(this.hostElement);
+    this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());
+    this.resizeObserver.observe(this.hostElement);
+  }
+  willDestroyElement() {
+    this.resizeObserver = null;
+  }
+  onHostElementFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.clickableElement.focus();
+  }
+  checkBar() {
+    const { bar } = this;
+    if (!bar)
+      return;
+    if (SUPPORTED_THEME_COLORS.includes(bar)) {
+      this.barColor = `var(--t-${bar})`;
+    }
+    else if (STOPLIGHT_COLORS.includes(bar)) {
+      this.barColor = `var(--const-stoplight-${bar})`;
+    }
+    else {
+      this.barColor = bar;
+    }
+  }
+  determineAutoTouch() {
+    if (this.hostElement.hasAttribute('is-touch'))
+      return;
+    this.isAutoTouch = isTouchDevice();
+  }
+  determineAutoSmall() {
+    var _a, _b;
+    if (this.hostElement.hasAttribute('is-small'))
+      return;
+    const { containerElement, avatarElement } = this;
+    const avatarWidth = (_a = avatarElement === null || avatarElement === void 0 ? void 0 : avatarElement.offsetWidth) !== null && _a !== void 0 ? _a : 0;
+    const containerWidth = (_b = containerElement === null || containerElement === void 0 ? void 0 : containerElement.offsetWidth) !== null && _b !== void 0 ? _b : 0;
+    const totalWidth = avatarWidth + containerWidth;
+    this.isAutoSmall = totalWidth < 350;
+  }
+  generateAvatar() {
+    const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;
+    if (avatarIcon) {
+      return (h("q2-icon", { type: avatarIcon, ref: e => (this.avatarElement = e), "test-id": "avatar" }));
+    }
+    else if (avatarName || avatarInitials || avatarSrc) {
+      return (h("q2-avatar", { name: avatarName, initials: avatarInitials, src: avatarSrc, ref: e => (this.avatarElement = e), "test-id": "avatar" }));
+    }
+  }
+  generateContent() {
+    return (h(Fragment, null, this.bar && (h("div", { class: "bar", "test-id": "bar", style: { '--comp-bar-color': this.barColor } })), this.generateAvatar(), h("div", { class: "container", "test-id": "contentContainer", ref: e => (this.containerElement = e) }, this.title && h("h3", { "test-id": "title" }, this.title), this.description && h("p", { "test-id": "description" }, this.description)), this.isTouch && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+  }
+  generateContainerClasses() {
+    const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch } = this;
+    const result = [];
+    const showSmall = isSmall || isAutoSmall;
+    const showTouch = isTouch || isAutoTouch;
+    const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;
+    if (showSmall)
+      result.push('is-small');
+    if (showTouch)
+      result.push('is-touch');
+    if (hasAvatar)
+      result.push('has-avatar');
+    return result.join(' ');
+  }
+  render() {
+    const { url } = this;
+    return !!url ? (h("a", { ref: e => (this.clickableElement = e), href: this.url, class: this.generateContainerClasses(), target: this.target, rel: "noopener noreferrer", "test-id": "clickableElement", onClick: this.handleClick }, this.generateContent())) : (h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "bar": ["checkBar"]
+  }; }
+};
+Q2Card.style = stylesCss;
+
+export { Q2Card as q2_card };

package/dist/esm/q2-carousel-pane.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-be8376c0.js';
-import { l as loc } from './index-ec6660af.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dbfb3ecc.js';
+import { l as loc } from './index-0ff8de52.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25));background-color:var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 1px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));min-height:10em}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));transition:var(--comp-carousel-pane-tween);background-color:var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--app-shadow-3, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)))}";
 
 const Q2Carousel = class {
   constructor(hostRef) {
@@ -16,7 +16,7 @@ const Q2Carousel = class {
       event.preventDefault();
       this.clickCarouselPane.emit({
         paneIndex: this.index,
-        pane: this.hostElement
+        pane: this.hostElement,
       });
     };
   }
@@ -57,7 +57,7 @@ const Q2Carousel = class {
         ? loc(label)
         : loc('tecton.element.carousel.itemDescription', [
           (this.currentPaneIndex + 1).toString(),
-          (this.siblingCount || 0).toString()
+          (this.siblingCount || 0).toString(),
         ]), onClick: this.paneClicked }, h("article", { class: "q2-carousel-pane-main-content" }, h("slot", null))));
   }
   get hostElement() { return getElement(this); }