q2-tecton-elements 1.35.2 → 1.37.0

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, F as Fragment, g as getElement } from './index-ebc7f269.js';
-import { p as handleDeprecationWarning, l as loc, h as handleAriaLabel, q as handleColor, o as overrideFocus, i as isEventFromElement } from './index-35ff2881.js';
+import { p as handleDeprecationWarning, l as loc, h as handleAriaLabel, q as handleColor, o as overrideFocus, i as isEventFromElement } from './index-74a659a5.js';
 import { s as shapes } from './shapes-9629efb2.js';
 
 const stylesCss$1 = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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%}::slotted(q2-icon){pointer-events:none}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{height:var(--comp-btn-min-height, 44px);cursor:pointer}:host .btn-height-wrapper:active{box-shadow:none}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border);border-radius:var(--tct-btn-border-radius);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-1x, 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-2x, 10px))))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 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([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 12px))}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 16px))}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 32px))}:host([color]) button,:host([intent]) button{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-primary-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-primary-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));outline-style:var(--tct-btn-primary-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-primary-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-primary-outline-color, var(--comp-outline-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-style:var(--tct-btn-primary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-style:var(--tct-btn-primary-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-style:var(--tct-btn-primary-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-style:var(--tct-btn-primary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-style:var(--tct-btn-primary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-style:var(--tct-btn-primary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-style:var(--tct-btn-primary-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentColor)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-secondary-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-secondary-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));outline-style:var(--tct-btn-secondary-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-secondary-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-secondary-outline-color, var(--comp-outline-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-style:var(--tct-btn-secondary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-style:var(--tct-btn-secondary-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-style:var(--tct-btn-secondary-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-style:var(--tct-btn-secondary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-style:var(--tct-btn-secondary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-style:var(--tct-btn-secondary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-style:var(--tct-btn-secondary-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentColor)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #c30000));--comp-font-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-destroy-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-destroy-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-destroy-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));outline-style:var(--tct-btn-destroy-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-destroy-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-destroy-outline-color, var(--comp-outline-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-style:var(--tct-btn-destroy-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-style:var(--tct-btn-destroy-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-style:var(--tct-btn-destroy-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-style:var(--tct-btn-destroy-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-style:var(--tct-btn-destroy-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-style:var(--tct-btn-destroy-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-style:var(--tct-btn-destroy-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){--t-text:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentColor)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-escape-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-escape-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-escape-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));outline-style:var(--tct-btn-escape-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-escape-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-escape-outline-color, var(--comp-outline-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-style:var(--tct-btn-escape-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-style:var(--tct-btn-escape-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-style:var(--tct-btn-escape-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-style:var(--tct-btn-escape-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-style:var(--tct-btn-escape-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-style:var(--tct-btn-escape-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-style:var(--tct-btn-escape-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){--t-text:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentColor)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-font-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-neutral-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-neutral-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));outline-style:var(--tct-btn-neutral-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-neutral-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-neutral-outline-color, var(--comp-outline-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-style:var(--tct-btn-neutral-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-style:var(--tct-btn-neutral-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-style:var(--tct-btn-neutral-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-style:var(--tct-btn-neutral-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-style:var(--tct-btn-neutral-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-style:var(--tct-btn-neutral-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-style:var(--tct-btn-neutral-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentColor)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-font-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-neutral-text-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-neutral-text-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-neutral-text-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));outline-style:var(--tct-btn-neutral-text-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-neutral-text-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-neutral-text-outline-color, var(--comp-outline-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-style:var(--tct-btn-neutral-text-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-style:var(--tct-btn-neutral-text-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-style:var(--tct-btn-neutral-text-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-style:var(--tct-btn-neutral-text-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-style:var(--tct-btn-neutral-text-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-style:var(--tct-btn-neutral-text-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-style:var(--tct-btn-neutral-text-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentColor)))}:host([color=primary][loading]) button,:host([intent=workflow-primary][loading]) button{--comp-background:var(--tct-btn-primary-loading-background, #0063a0)}:host([intent=workflow-escape][loading]) button{--comp-background:var(--tct-btn-escape-loading-background, var(--comp-background-alternative))}: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, var(--tct-btn-border-radius, 0)))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-background, 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-background, 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-background, 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-background, 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-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));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-1x, 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}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}";

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebc7f269.js';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, a as handleRenamedProp, w as waitForNextPaint } from './index-35ff2881.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, a as handleRenamedProp } from './index-74a659a5.js';
 
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -3349,6 +3349,49 @@ const Q2Calendar = class {
     if (this.open !== open)
       this.open = open;
   }
+  /// Methods ///
+  _togglePopover() {
+    const toggleElement = this.typeable ? this.btnCalendarToggle : this.innerInputField;
+    toggleElement === null || toggleElement === void 0 ? void 0 : toggleElement.click();
+    toggleElement === null || toggleElement === void 0 ? void 0 : toggleElement.focus();
+    toggleElement.dispatchEvent(new FocusEvent('focus'));
+  }
+  openPopover() {
+    if (this.open)
+      return;
+    this._togglePopover();
+  }
+  closePopover() {
+    if (!this.open)
+      return;
+    this._togglePopover();
+  }
+  async setValue(value) {
+    var _a;
+    const date = typeof value === 'string' ? stringToDate(value) : value;
+    if (!isValid(date))
+      return;
+    await this.openPopover();
+    await waitForNextPaint();
+    this.goToMonthYear(date.getMonth(), date.getFullYear());
+    await waitForNextPaint();
+    const tableCell = (_a = this.calendarTable) === null || _a === void 0 ? void 0 : _a.querySelector(`td[data-date="${formatDateISO(date)}"]`);
+    tableCell === null || tableCell === void 0 ? void 0 : tableCell.click();
+  }
+  async typeValue(value) {
+    if (!this.typeable)
+      return;
+    const date = typeof value === 'string' ? stringToDate(value) : value;
+    const formattedDate = formatDateShort(date);
+    if (!isValid(date))
+      return;
+    const { innerInputField, controlElement } = this;
+    innerInputField.focus();
+    innerInputField.dispatchEvent(new FocusEvent('focus'));
+    innerInputField.value = formattedDate;
+    innerInputField.dispatchEvent(new InputEvent('input'));
+    controlElement.dispatchEvent(new KeyboardEvent('keyup'));
+  }
   //////// Observers //////////
   popDirectionHandler() {
     handleRenamedProp(this, 'popDirection', 'popoverDirection');
@@ -3525,14 +3568,14 @@ const Q2Calendar = class {
   }
   inputField() {
     const { isTypeable } = this;
-    return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.open}`, hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : '', pseudo: !isTypeable, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle" }, isTypeable && (h("q2-btn", { slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
+    return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.open}`, hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : '', pseudo: !isTypeable, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle" }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
   }
   calendarPopover() {
     const { monthIndex, selectedYear } = this.selectedMonthYear;
     return (h("div", { class: "calendar-field-popup", onKeyUp: this.onPopupKeyup }, this.calendarLabel && h("p", { class: "calendar-label" }, loc(this.calendarLabel)), h("div", { class: "cal-month-heading" }, h("q2-btn", { label: loc('tecton.element.calendar.previousMonth'), "hide-label": true, ref: elm => (this.btnPrevMonth = elm), class: "cal-nav-btn prev-month", "test-id": "previousMonthButton", onClick: () => this.goToMonthYear(monthIndex - 1, selectedYear) }, h("q2-icon", { type: "chevron-left" })), h("span", { class: "cal-month-text" }, this.monthStrings[monthIndex]), h("q2-btn", { label: loc('tecton.element.calendar.nextMonth'), "hide-label": true, class: "cal-nav-btn next-month", ref: elm => (this.btnNextMonth = elm), "test-id": "nextMonthButton", onClick: () => this.goToMonthYear(monthIndex + 1, selectedYear) }, h("q2-icon", { type: "chevron-right" })), h("q2-btn", { label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", ref: elm => (this.btnPrevYear = elm), "test-id": "previousYearButton", onClick: () => this.goToMonthYear(monthIndex, selectedYear - 1) }, h("q2-icon", { type: "chevron-left" })), h("span", { class: "cal-year-text" }, this.selectedMonthYear.selectedYear), h("q2-btn", { label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", ref: elm => (this.btnNextYear = elm), "test-id": "nextYearButton", onClick: () => this.goToMonthYear(monthIndex, selectedYear + 1) }, h("q2-icon", { type: "chevron-right" }))), h("div", { class: "sr", "aria-live": "polite", id: "table-label" }, `${this.monthStrings[monthIndex]} ${selectedYear}`), this.calendarDays(), this.disclaimer && h("div", { class: "calendar-disclaimer" }, loc(this.disclaimer)), h("q2-btn", { class: "sr refocus-popup", onFocus: this.onRefocus })));
   }
   calendarDays() {
-    return (h("table", { role: "grid", "aria-labelledby": "table-label" }, h("thead", null, h("tr", null, [...Array(7).keys()].map(index => (h("th", { scope: "col", "aria-label": this.dayStrings[index] }, this.dayAbbrStrings[index]))))), h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm), "test-id": "calendarTableBody" }, this.currentWeeks.map(week => (h("tr", null, week.map(day => {
+    return (h("table", { role: "grid", "aria-labelledby": "table-label", ref: ref => (this.calendarTable = ref) }, h("thead", null, h("tr", null, [...Array(7).keys()].map(index => (h("th", { scope: "col", "aria-label": this.dayStrings[index] }, this.dayAbbrStrings[index]))))), h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm), "test-id": "calendarTableBody" }, this.currentWeeks.map(week => (h("tr", null, week.map(day => {
       var _a;
       let ariaLabel = '';
       if (day.isToday)