npm - q2-tecton-elements - Versions diffs - 1.49.2 → 1.50.1 - Mend

q2-tecton-elements 1.49.2 → 1.50.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (703) hide show

package/dist/cjs/{q2-input.cjs.entry.js → q2-badge_7.cjs.entry.js} RENAMED Viewed

@@ -3,7 +3,910 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-14c3693c.js');
-const index$1 = require('./index-a93362ed.js');
+const index$1 = require('./index-64d8b839.js');
+const shapes = require('./shapes-be198cc0.js');
+const q2BadgeCss = "*{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 #0066cc)}: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}.badge-wrapper{--comp-badge-background:var(--tct-badge-background, var(--t-gray8, #61c4ff));--comp-badge-color:var(--tct-badge-color, var(--t-base, #ffffff));--comp-badge-border-style:var(--tct-badge-border-style, solid);--comp-badge-border-color:var(--tct-badge-border-color, var(--t-secondary-l1, #9a9898))}:host([status=info]) .badge-wrapper{--comp-badge-background:var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));--comp-badge-color:var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff));--comp-badge-border-color:var(--tct-badge-info-border-color, var(--const-stoplight-info-l1, #3a9bd6))}:host([status=alert]) .badge-wrapper{--comp-badge-background:var(--tct-badge-alert-background, var(--const-stoplight-alert, #d20a0a));--comp-badge-color:var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff));--comp-badge-border-color:var(--tct-badge-alert-border-color, var(--const-stoplight-alert-l1, #e42929))}:host([status=warning]) .badge-wrapper{--comp-badge-background:var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));--comp-badge-color:var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #423535));--comp-badge-border-color:var(--tct-badge-warning-border-color, var(--const-stoplight-warning-l1, #f9ce4c))}:host([status=success]) .badge-wrapper{--comp-badge-background:var(--tct-badge-success-background, var(--const-stoplight-success, #57fc45));--comp-badge-color:var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff));--comp-badge-border-color:var(--tct-badge-success-border-color, var(--const-stoplight-success-l1, #2eaa21))}:host([theme=primary]) .badge-wrapper{--comp-badge-background:var(--tct-badge-primary-background, var(--t-primary, #0079c2));--comp-badge-color:var(--tct-badge-primary-color, var(--t-primary-text, #ffffff));--comp-badge-border-color:var(--tct-badge-primary-border-color, var(--t-primary-l1, #3a9bd6))}:host([theme=secondary]) .badge-wrapper{--comp-badge-background:var(--tct-badge-secondary-background, var(--t-secondary, #b4c2cd));--comp-badge-color:var(--tct-badge-secondary-color, var(--t-secondary-text, #ffffff));--comp-badge-border-color:var(--tct-badge-secondary-border-color, var(--t-secondary-l1, #c6d1db))}:host([theme=tertiary]) .badge-wrapper{--comp-badge-background:var(--tct-badge-tertiary-background, var(--t-tertiary, #e9f5fc));--comp-badge-color:var(--tct-badge-tertiary-color, var(--t-tertiary-text, #000000));--comp-badge-border-color:var(--tct-badge-tertiary-border-color, var(--t-tertiary-l1, #f3f4f5))}.badge{font-size:var(--tct-badge-font-size, 10px);line-height:var(--tct-badge-line-height, 14px);height:var(--tct-badge-height, 16px);min-width:var(--tct-badge-min-width, 16px);text-align:center;padding:var(--tct-badge-padding, 0 4px);color:var(--comp-badge-color);background:var(--comp-badge-background);border-style:var(--comp-badge-border-style);border-color:var(--comp-badge-border-color);border-width:var(--tct-badge-border-width, var(--t-badge-border-width, 1px));border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px))}.badge.size-large{font-size:var(--tct-badge-large-font-size, 14px);line-height:var(--tct-badge-large-line-height, 20px);height:var(--tct-badge-large-height, 22px);min-width:var(--tct-badge-large-min-width, 22px);border-radius:var(--tct-badge-large-border-radius, 11px);padding:var(--tct-badge-large-padding, 0 6px)}.badge-wrapper{display:flex;align-items:center;justify-content:center}";
+const Q2BadgeStyle0 = q2BadgeCss;
+const Q2Badge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.maxLength = undefined;
+        this.size = undefined;
+        this.status = undefined;
+        this.theme = undefined;
+        this.value = 0;
+    }
+    // #endregion
+    // #region Local Methods
+    get badgeText() {
+        const maxValue = Math.pow(10, this.maxLength || 2) - 1;
+        let value = this.value || 0;
+        if (isNaN(value) || value <= 0) {
+            value = '';
+        }
+        else if (value <= maxValue) {
+            value = Number(value).toLocaleString();
+        }
+        else {
+            value = Number(maxValue).toLocaleString() + '+';
+        }
+        return value;
+    }
+    get hasSlot() {
+        return !!this.hostElement.innerHTML.trim();
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const badgeClass = ['badge'];
+        if (this.size === 'large')
+            badgeClass.push('size-large');
+        return !this.badgeText && !this.hasSlot ? (index.h(index.Fragment, null)) : (index.h("div", { class: "badge-wrapper" }, index.h("div", { class: badgeClass.join(' ') }, index.h("span", { class: "badge-text" }, this.hasSlot ? index.h("slot", null) : this.badgeText))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+Q2Badge.style = Q2BadgeStyle0;
+const q2BtnCss = "*{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 #0066cc)}: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 #0066cc)}: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;margin-block:-100px}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 4px));--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([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=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}: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([color]) button,:host([intent]) button{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-letter-spacing, var(--comp-letter-spacing))}: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, 14px))}: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-medium, var(--t-btn-font-size-medium, 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-large, var(--t-btn-font-size-large, 20px))}: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),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-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),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));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-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-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)));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-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-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)));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-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-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)));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),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-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),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));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-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-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)));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-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-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)));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-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-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)));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, #d20a0a));--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),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-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),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));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-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-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)));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-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-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)));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-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-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)));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),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-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),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));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-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-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)));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-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-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)));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-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-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)));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),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-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),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));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-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-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)));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),\n      0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-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),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color);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));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));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-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-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)));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-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-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)));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(:not([size])) 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)))}button :host(:not([color]):not([intent])):hover,button :host(:not([color]):not([intent])):focus,button.icon-only:hover,button.icon-only:focus{background: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(:not([intent])) button:not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}:host(:not([intent])) button:not(.icon-only):hover,:host(:not([intent])) button:not(.icon-only):focus{background:var(--tct-btn-hover-background)}: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, 4px))));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%}";
+const Q2BtnStyle0 = q2BtnCss;
+const Q2Btn = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.handleButtonSize = () => {
+            if (Number(this.size) <= 4) {
+                index$1.handleDeprecationWarning(this, 'size', 'prop');
+            }
+        };
+        this.handleIcons = () => {
+            // Only allow one icon in the button
+            const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
+                if (acc)
+                    element.remove();
+                else
+                    acc = element;
+                return acc;
+            }, null);
+            const hasIcon = !!icon;
+            const hasLoc = !!this.hostElement.querySelector('q2-loc');
+            const hasText = !!this.hostElement.textContent.trim();
+            const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
+            const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
+            const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
+            let iconPosition;
+            if (hasIconOnly)
+                iconPosition = 'only';
+            else if (hasIconLeft)
+                iconPosition = 'left';
+            else if (hasIconRight)
+                iconPosition = 'right';
+            this.iconPosition = iconPosition;
+        };
+        this.handleSlotChange = () => {
+            this.handleIcons();
+        };
+        // #endregion
+        // #region Render Methods
+        this.renderButton = () => {
+            const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } = this.buttonAttributes;
+            const { iconPosition, loading, badge, label, hideLabel } = this;
+            const renderLoadingSpinner = iconPosition || loading;
+            const isLoadingSpinnerInline = !iconPosition || badge;
+            return (index.h(index.Fragment, null, index.h("button", { ref: el => (this.primaryBtn = el !== null && el !== void 0 ? el : this.primaryBtn), "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && index$1.loc(label), "aria-selected": ariaSelected, "aria-pressed": ariaPressed, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition ? `icon-${iconPosition}` : '', "aria-describedby": !!description ? 'hidden-description' : undefined, role: this._role || undefined }, index.h("div", null, renderLoadingSpinner && (index.h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? index$1.loc(label) : index.h("slot", { onSlotchange: this.handleSlotChange }))), !!description && (index.h("div", { id: "hidden-description", "aria-hidden": "true", class: "sr" }, description))));
+        };
+        this.render = () => {
+            return this.size === 'small' ? (
+            // wrap only for small sized
+            index.h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el !== null && el !== void 0 ? el : this.primaryBtnWrapper), tabIndex: -1 }, this.renderButton())) : (this.renderButton());
+        };
+        this.iconPosition = undefined;
+        this._role = undefined;
+        this.active = undefined;
+        this.ariaControls = undefined;
+        this.ariaExpanded = undefined;
+        this.ariaHasPopup = undefined;
+        this.ariaLabel = undefined;
+        this.ariaPressed = undefined;
+        this.ariaSelected = undefined;
+        this.badge = undefined;
+        this.block = undefined;
+        this.color = undefined;
+        this.description = undefined;
+        this.disabled = undefined;
+        this.fab = undefined;
+        this.hideLabel = undefined;
+        this.intent = undefined;
+        this.label = undefined;
+        this.loading = undefined;
+        this.size = undefined;
+        this.tabIndex = undefined;
+        this.type = 'button';
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        this.handleIcons();
+        index$1.handleAriaLabel(this);
+        index$1.handleColor(this);
+    }
+    componentDidLoad() {
+        this.handleButtonSize();
+        index$1.overrideFocus(this.hostElement);
+    }
+    // #endregion
+    // #region Listeners
+    handleClick(event) {
+        if (this.loading || this.disabled) {
+            event.stopImmediatePropagation();
+        }
+        this.primaryBtn.focus();
+    }
+    delegateFocus(event) {
+        if (!index$1.isEventFromElement(event, this.hostElement))
+            return;
+        this.primaryBtn.focus();
+    }
+    // #endregion
+    // #region Watchers
+    ariaLabelObserver() {
+        index$1.handleAriaLabel(this);
+    }
+    sizeObserver() {
+        this.handleButtonSize();
+    }
+    // #endregion
+    // #region Local Methods
+    get buttonAttributes() {
+        return {
+            ariaExpanded: index$1.getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),
+            ariaHasPopup: index$1.getAriaValueFromProp(this.ariaHasPopup, [
+                'true',
+                'false',
+                'menu',
+                'listbox',
+                'tree',
+                'grid',
+                'dialog',
+            ]),
+            ariaLabel: this.label && this.hideLabel ? index$1.loc(this.label) : undefined,
+            ariaSelected: index$1.getAriaValueFromProp(this.ariaSelected, ['true', 'false']),
+            ariaPressed: index$1.getAriaValueFromProp(this.ariaPressed, ['true', 'false']),
+            description: this.description !== undefined ? this.description : undefined,
+            disabled: this.disabled || false,
+            type: this.type,
+            tabindex: this.tabIndex || undefined,
+        };
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "ariaLabel": ["ariaLabelObserver"],
+        "size": ["sizeObserver"]
+    }; }
+};
+Q2Btn.style = Q2BtnStyle0;
+const a11y = "standard";
+const add = "standard";
+const airplane = "standard";
+const ambulance = "standard";
+const android = "legacy";
+const apple = "standard";
+const arts = "standard";
+const atv = "standard";
+const backpack = "standard";
+const bank = "standard";
+const barchart = "standard";
+const bed = "standard";
+const bell = "standard";
+const bicycle = "standard";
+const boat = "standard";
+const box = "standard";
+const briefcase = "standard";
+const bug = "standard";
+const buildings = "standard";
+const calculator = "standard";
+const calendar = "standard";
+const camera = "standard";
+const car = "standard";
+const card = "cards";
+const cart = "standard";
+const cash = "standard";
+const certificate = "standard";
+const chat = "communication";
+const check = "standard";
+const checkmark = "standard";
+const clipboard = "standard";
+const close = "standard";
+const coins = "standard";
+const compass = "standard";
+const conversation = "standard";
+const copy = "standard";
+const coupon = "standard";
+const dashboard = "standard";
+const desktop = "system";
+const diploma = "standard";
+const divider = "standard";
+const document$1 = "standard";
+const download = "standard";
+const edit = "standard";
+const ellipsis = "standard";
+const error = "status";
+const factory = "standard";
+const failed = "standard";
+const filebox = "standard";
+const filter = "standard";
+const fingerprint = "standard";
+const flag = "standard";
+const gear = "standard";
+const gift = "standard";
+const government = "standard";
+const gps = "standard";
+const hand = "standard";
+const handshake = "standard";
+const headset = "standard";
+const health = "standard";
+const heart = "standard";
+const home = "standard";
+const inbox = "standard";
+const info = "status";
+const ios = "legacy";
+const key = "standard";
+const laptop = "system";
+const law = "standard";
+const leaf = "standard";
+const lightbulb = "standard";
+const linechart = "standard";
+const link = "standard";
+const list = "standard";
+const location = "standard";
+const lock = "standard";
+const logout = "standard";
+const loop = "standard";
+const mail = "standard";
+const math = "standard";
+const medal = "standard";
+const megaphone = "standard";
+const microscope = "standard";
+const mortgage = "standard";
+const motorcycle = "standard";
+const motorhome = "standard";
+const mountains = "standard";
+const movie = "standard";
+const music = "standard";
+const newspaper = "standard";
+const options = "standard";
+const palette = "standard";
+const paperclip = "standard";
+const pause = "standard";
+const paw = "standard";
+const people = "standard";
+const percent = "standard";
+const person = "standard";
+const phone = "mobile";
+const piechart = "standard";
+const play = "standard";
+const pricetag = "standard";
+const print = "standard";
+const prohibited = "standard";
+const question = "standard";
+const receipt = "standard";
+const refresh = "standard";
+const remove = "standard";
+const repeat = "standard";
+const revert = "legacy";
+const ribbon = "standard";
+const ring = "standard";
+const roadblock = "standard";
+const save = "standard";
+const school = "standard";
+const search = "standard";
+const section = "standard";
+const service = "standard";
+const shield = "standard";
+const sign = "standard";
+const silverware = "standard";
+const skip = "standard";
+const sort = "standard";
+const speedometer = "standard";
+const split = "standard";
+const star = "standard";
+const statements = "standard";
+const storefront = "standard";
+const success = "status";
+const tablet = "mobile";
+const target = "standard";
+const taxi = "standard";
+const time = "standard";
+const todo = "standard";
+const tools = "standard";
+const tractor = "standard";
+const transfer = "standard";
+const trash = "standard";
+const tree = "standard";
+const umbrella = "standard";
+const unlink = "standard";
+const upload = "standard";
+const virus = "standard";
+const wallet = "standard";
+const warning = "status";
+const watch = "standard";
+const world = "standard";
+const iconMap = {
+	a11y: a11y,
+	add: add,
+	airplane: airplane,
+	"alarm-clock": "standard",
+	ambulance: ambulance,
+	android: android,
+	apple: apple,
+	"arrow-down": "standard",
+	"arrow-left": "standard",
+	"arrow-right": "standard",
+	"arrow-up": "standard",
+	arts: arts,
+	atv: atv,
+	backpack: backpack,
+	bank: bank,
+	barchart: barchart,
+	"barchart-trend": "standard",
+	bed: bed,
+	bell: bell,
+	bicycle: bicycle,
+	boat: boat,
+	box: box,
+	"brand-autobooks-color": "brand",
+	"brand-autobooks-filled": "brand",
+	"brand-facebook-color": "brand",
+	"brand-facebook-filled": "brand",
+	"brand-instagram-color": "brand",
+	"brand-instagram-filled": "brand",
+	"brand-linkedin-color": "brand",
+	"brand-linkedin-filled": "brand",
+	"brand-messenger-color": "brand",
+	"brand-messenger-filled": "brand",
+	"brand-payrecs-color": "brand",
+	"brand-payrecs-filled": "brand",
+	"brand-snapchat-color": "brand",
+	"brand-snapchat-filled": "brand",
+	"brand-twitter-color": "brand",
+	"brand-twitter-filled": "brand",
+	"brand-vimeo-color": "brand",
+	"brand-vimeo-filled": "brand",
+	"brand-x-color": "brand",
+	"brand-x-filled": "brand",
+	"brand-youtube-color": "brand",
+	"brand-youtube-filled": "brand",
+	"brand-zelle-color": "brand",
+	"brand-zelle-filled": "brand",
+	"brand-zelle-name-color": "brand",
+	"brand-zelle-name-filled": "brand",
+	briefcase: briefcase,
+	"browser-chrome": "legacy",
+	"browser-chrome-color": "legacy",
+	"browser-chrome-filled": "legacy",
+	"browser-edge": "legacy",
+	"browser-edge-color": "legacy",
+	"browser-edge-filled": "legacy",
+	"browser-firefox": "legacy",
+	"browser-firefox-color": "legacy",
+	"browser-firefox-filled": "legacy",
+	"browser-ie": "legacy",
+	"browser-ie-color": "legacy",
+	"browser-ie-filled": "legacy",
+	"browser-opera": "legacy",
+	"browser-opera-color": "legacy",
+	"browser-opera-filled": "legacy",
+	"browser-safari": "legacy",
+	"browser-safari-color": "legacy",
+	"browser-safari-filled": "legacy",
+	"bubble-graph": "standard",
+	bug: bug,
+	buildings: buildings,
+	"buildings-2": "standard",
+	calculator: calculator,
+	calendar: calendar,
+	"calendar-confirm": "legacy",
+	"calendar-create": "standard",
+	"calendar-pay": "standard",
+	"calendar-remove": "standard",
+	"calendar-repeat": "standard",
+	"calendar-skip": "standard",
+	"calendar-time": "standard",
+	"call-color": "legacy",
+	"call-filled": "legacy",
+	camera: camera,
+	car: car,
+	"car-front": "standard",
+	card: card,
+	"card-add": "cards",
+	"card-amazon": "cards",
+	"card-amazon-color": "legacy",
+	"card-amex": "cards",
+	"card-amex-color": "legacy",
+	"card-applepay": "cards",
+	"card-applepay-color": "legacy",
+	"card-bitcoin": "cards",
+	"card-bitcoin-color": "legacy",
+	"card-dinersclub": "cards",
+	"card-dinersclub-color": "legacy",
+	"card-discover": "cards",
+	"card-discover-color": "legacy",
+	"card-edit": "cards",
+	"card-gift": "cards",
+	"card-googlepay": "cards",
+	"card-googlepay-color": "legacy",
+	"card-heart": "cards",
+	"card-in-hand": "cards",
+	"card-insert": "cards",
+	"card-jcb": "cards",
+	"card-jcb-color": "legacy",
+	"card-join": "cards",
+	"card-locked": "cards",
+	"card-maestro": "cards",
+	"card-maestro-color": "legacy",
+	"card-mastercard": "cards",
+	"card-mastercard-color": "legacy",
+	"card-more": "cards",
+	"card-paypal": "cards",
+	"card-paypal-color": "legacy",
+	"card-prohibited": "cards",
+	"card-remove": "cards",
+	"card-scissors": "cards",
+	"card-star": "cards",
+	"card-stripe": "cards",
+	"card-stripe-color": "legacy",
+	"card-success": "cards",
+	"card-unknown": "cards",
+	"card-update": "cards",
+	"card-visa": "cards",
+	"card-visa-color": "legacy",
+	cart: cart,
+	"cart-moving": "standard",
+	cash: cash,
+	"cash-bills": "standard",
+	"cash-coins": "standard",
+	"cash-in-hand": "standard",
+	"cash-register": "standard",
+	certificate: certificate,
+	chat: chat,
+	"chat-bubbles": "communication",
+	"chat-question": "communication",
+	"chat-round": "communication",
+	check: check,
+	"check-add": "standard",
+	"check-dollar": "standard",
+	"check-edit": "standard",
+	"check-remove": "standard",
+	"check-shield": "standard",
+	checkmark: checkmark,
+	"checkmark-outline": "standard",
+	"chevron-double-left": "standard",
+	"chevron-double-right": "standard",
+	"chevron-down": "standard",
+	"chevron-left": "standard",
+	"chevron-right": "standard",
+	"chevron-up": "standard",
+	clipboard: clipboard,
+	close: close,
+	coins: coins,
+	compass: compass,
+	conversation: conversation,
+	copy: copy,
+	coupon: coupon,
+	"credit-score": "standard",
+	"currency-dollar": "currencies",
+	"currency-dollar-circle": "currencies",
+	"currency-euro": "currencies",
+	"currency-pound": "currencies",
+	"currency-yen": "currencies",
+	dashboard: dashboard,
+	"delivery-truck": "standard",
+	desktop: desktop,
+	diploma: diploma,
+	divider: divider,
+	document: document$1,
+	"document-add": "standard",
+	"document-checklist": "standard",
+	"document-remove": "standard",
+	download: download,
+	"drag-handle": "standard",
+	edit: edit,
+	ellipsis: ellipsis,
+	error: error,
+	"error-filled": "status",
+	"external-link": "standard",
+	"eye-hide": "standard",
+	"eye-show": "standard",
+	"face-id": "standard",
+	factory: factory,
+	failed: failed,
+	filebox: filebox,
+	"filetype-csv": "filetypes",
+	"filetype-doc": "filetypes",
+	"filetype-docx": "filetypes",
+	"filetype-generic": "filetypes",
+	"filetype-gif": "filetypes",
+	"filetype-iso": "filetypes",
+	"filetype-jpg": "filetypes",
+	"filetype-otf": "filetypes",
+	"filetype-pdf": "filetypes",
+	"filetype-png": "filetypes",
+	"filetype-ppt": "filetypes",
+	"filetype-svg": "filetypes",
+	"filetype-txt": "filetypes",
+	"filetype-xls": "filetypes",
+	"filetype-xlsx": "filetypes",
+	"filetype-xml": "filetypes",
+	filter: filter,
+	fingerprint: fingerprint,
+	flag: flag,
+	gear: gear,
+	"gesture-hand": "gestures",
+	"gesture-scroll-horizontal": "gestures",
+	"gesture-scroll-vertical": "gestures",
+	"gesture-stretch": "gestures",
+	"gesture-swipe-down": "gestures",
+	"gesture-swipe-left": "gestures",
+	"gesture-swipe-right": "gestures",
+	"gesture-swipe-up": "gestures",
+	"gesture-tap": "gestures",
+	gift: gift,
+	"gold-bars": "standard",
+	government: government,
+	gps: gps,
+	"graduation-cap": "standard",
+	"grid-x2": "standard",
+	"grid-x3": "standard",
+	"hamburger-menu": "standard",
+	hand: hand,
+	"hand-with-coins": "standard",
+	"hand-with-key": "standard",
+	handshake: handshake,
+	headset: headset,
+	health: health,
+	heart: heart,
+	"heart-add": "standard",
+	"heart-remove": "standard",
+	home: home,
+	"home-chimney": "standard",
+	"home-gear": "standard",
+	"id-badge": "standard",
+	inbox: inbox,
+	"inbox-checked": "standard",
+	"inbox-full": "standard",
+	info: info,
+	"info-filled": "status",
+	ios: ios,
+	key: key,
+	laptop: laptop,
+	law: law,
+	leaf: leaf,
+	lightbulb: lightbulb,
+	linechart: linechart,
+	"linechart-trend": "standard",
+	link: link,
+	list: list,
+	location: location,
+	"location-base": "standard",
+	"location-prohibited": "standard",
+	lock: lock,
+	logout: logout,
+	loop: loop,
+	mail: mail,
+	math: math,
+	medal: medal,
+	megaphone: megaphone,
+	"message-forward": "standard",
+	"message-reply": "standard",
+	"message-response": "standard",
+	microscope: microscope,
+	"mobile-button": "mobile",
+	"mobile-edit": "mobile",
+	"mobile-fast-dollar": "standard",
+	"mobile-heart": "mobile",
+	"mobile-location": "mobile",
+	"mobile-lock": "mobile",
+	"mobile-remove": "mobile",
+	"mobile-rotate": "mobile",
+	"mobile-search": "mobile",
+	"mobile-settings": "mobile",
+	"mobile-time": "mobile",
+	"money-time": "standard",
+	mortgage: mortgage,
+	motorcycle: motorcycle,
+	motorhome: motorhome,
+	mountains: mountains,
+	movie: movie,
+	music: music,
+	"nest-egg": "standard",
+	newspaper: newspaper,
+	options: options,
+	"os-android": "legacy",
+	"os-android-color": "legacy",
+	"os-android-filled": "legacy",
+	"os-apple": "legacy",
+	"os-apple-color": "legacy",
+	"os-apple-filled": "legacy",
+	"os-windows": "legacy",
+	"os-windows-color": "legacy",
+	"os-windows-filled": "legacy",
+	palette: palette,
+	"paper-plane": "standard",
+	paperclip: paperclip,
+	pause: pause,
+	paw: paw,
+	people: people,
+	"people-group": "standard",
+	percent: percent,
+	person: person,
+	"person-add": "standard",
+	"person-lock": "standard",
+	"person-remove": "standard",
+	"person-settings": "standard",
+	"person-to-person": "standard",
+	"personal-care": "standard",
+	phone: phone,
+	piechart: piechart,
+	"piechart-expanded": "standard",
+	"piggy-bank": "standard",
+	play: play,
+	pricetag: pricetag,
+	"pricetag-blank": "standard",
+	"pricetag-time": "standard",
+	print: print,
+	prohibited: prohibited,
+	question: question,
+	receipt: receipt,
+	"receipt-list": "standard",
+	"receipt-list-top": "standard",
+	"receipt-top": "standard",
+	refresh: refresh,
+	remove: remove,
+	repeat: repeat,
+	"repeat-time": "standard",
+	revert: revert,
+	ribbon: ribbon,
+	ring: ring,
+	roadblock: roadblock,
+	"rss-color": "legacy",
+	"rss-filled": "legacy",
+	save: save,
+	school: school,
+	search: search,
+	section: section,
+	service: service,
+	shield: shield,
+	sign: sign,
+	"sign-closed": "standard",
+	"sign-open": "standard",
+	"sign-sale": "standard",
+	"sign-sold": "standard",
+	silverware: silverware,
+	skip: skip,
+	"sms-color": "legacy",
+	"sms-filled": "legacy",
+	sort: sort,
+	speedometer: speedometer,
+	split: split,
+	star: star,
+	"star-add": "standard",
+	"star-remove": "standard",
+	statements: statements,
+	"steering-wheel": "standard",
+	"stop-payment": "standard",
+	storefront: storefront,
+	"storefront-add": "standard",
+	"storefront-prohibited": "standard",
+	"storefront-remove": "standard",
+	"storefront-settings": "standard",
+	success: success,
+	"success-filled": "status",
+	tablet: tablet,
+	target: target,
+	taxi: taxi,
+	time: time,
+	todo: todo,
+	tools: tools,
+	tractor: tractor,
+	transfer: transfer,
+	"transfer-receive": "standard",
+	"transfer-send": "standard",
+	trash: trash,
+	tree: tree,
+	"truck-with-lock": "standard",
+	umbrella: umbrella,
+	unlink: unlink,
+	upload: upload,
+	"venmo-colored": "legacy",
+	"venmo-filled": "legacy",
+	virus: virus,
+	wallet: wallet,
+	warning: warning,
+	"warning-filled": "status",
+	watch: watch,
+	world: world,
+	"zoom-in": "standard",
+	"zoom-out": "standard"
+};
+const q2IconCss = "*{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 #0066cc)}: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;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round));transition:var(--tct-icon-transition, none)}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.fill-secondary{fill:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)));transition:var(--tct-icon-fill-transition, none)}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentcolor));transition:var(--tct-icon-stroke-primary-transition, none)}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a))}";
+const Q2IconStyle0 = q2IconCss;
+const Q2Icon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.iconClone = undefined;
+        this.inline = undefined;
+        this.label = undefined;
+        this.type = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        this.handleIcon();
+    }
+    componentDidRender() {
+        var _a, _b, _c, _d;
+        if (!this.iconClone)
+            return;
+        (_b = (_a = this.spriteGroup) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.remove();
+        const appendedClone = (_c = this.spriteGroup) === null || _c === void 0 ? void 0 : _c.appendChild(this.iconClone);
+        // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari
+        (_d = this.spriteUse) === null || _d === void 0 ? void 0 : _d.setAttribute('href', `#${appendedClone.id}`);
+    }
+    // #endregion
+    // #region Watchers
+    handleIcon() {
+        var _a, _b;
+        if (this.isCustom) {
+            this.setCustomSVGAttrs();
+        }
+        else if (this.type) {
+            this.fetchSprite();
+        }
+        else {
+            this.iconClone = null;
+            (_b = (_a = this.spriteGroup) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.remove();
+        }
+    }
+    // #endregion
+    // #region Local Methods
+    get iconCloneViewBox() {
+        var _a, _b;
+        return (_b = (_a = this.iconClone) === null || _a === void 0 ? void 0 : _a.getAttribute('viewBox')) !== null && _b !== void 0 ? _b : '0 0 24 24';
+    }
+    get isCustom() {
+        return this.type === 'custom';
+    }
+    get spriteElement() {
+        const { spriteId } = this;
+        if (!spriteId)
+            return;
+        return document.querySelector(`#${spriteId}`);
+    }
+    get spriteEventName() {
+        const { spriteFileName } = this;
+        if (!spriteFileName)
+            return;
+        return `tct-loaded-${spriteFileName}`;
+    }
+    get spriteFileName() {
+        if (this.isCustom)
+            return;
+        return iconMap[this.type];
+    }
+    get spriteId() {
+        const { spriteFileName } = this;
+        if (!spriteFileName)
+            return;
+        return `tecton-sprite-${spriteFileName}`;
+    }
+    checkForSprite() {
+        var _a;
+        const { spriteId, spriteEventName } = this;
+        const spriteContainer = this.getOrCreateSpriteContainer();
+        let spriteElement = document.querySelector(`#${spriteId}`);
+        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need
+        if ((_a = spriteElement === null || spriteElement === void 0 ? void 0 : spriteElement.hasAttribute('data-loaded')) !== null && _a !== void 0 ? _a : false) {
+            this.cloneSpriteNode();
+            return true;
+        }
+        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded
+        // We'll listen for the event that will be dispatched when the sprite is loaded
+        spriteContainer.addEventListener(spriteEventName, () => {
+            this.cloneSpriteNode();
+        }, { once: true });
+        // If the sprite element exists, we know it's being loaded and will be handled by the event listener
+        if (spriteElement)
+            return true;
+        // If sprite element does not exist, create a placeholder
+        // This will let other icons know the sprite is being loaded
+        spriteElement = document.createElement('div');
+        spriteElement.id = spriteId;
+        spriteContainer.appendChild(spriteElement);
+        return false;
+    }
+    cloneSpriteNode() {
+        const spriteContainer = this.getOrCreateSpriteContainer();
+        const spriteNode = spriteContainer.querySelector(`#tct-${this.type}`);
+        this.iconClone = spriteNode ? spriteNode.cloneNode(true) : undefined;
+    }
+    async fetchSprite() {
+        const { spriteFileName, spriteId, spriteEventName } = this;
+        const spriteExists = this.checkForSprite();
+        if (spriteExists)
+            return;
+        if (!spriteFileName)
+            return;
+        const spritePath = index.getAssetPath(`assets/${spriteFileName}.symbol.svg`);
+        const response = await fetch(spritePath);
+        const data = await response.text();
+        const wrappingDiv = document.createElement('div');
+        wrappingDiv.innerHTML = data;
+        const svg = wrappingDiv.querySelector('svg');
+        svg.id = spriteId;
+        svg.setAttribute('data-loaded', '');
+        let { spriteElement } = this;
+        if ((spriteElement === null || spriteElement === void 0 ? void 0 : spriteElement.tagName) === 'SVG')
+            return;
+        if (typeof spriteElement.replaceWith === 'function') {
+            spriteElement.replaceWith(svg);
+        }
+        else {
+            spriteElement.parentNode.replaceChild(svg, spriteElement);
+        }
+        spriteElement = document.querySelector(`#${spriteId}`);
+        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));
+    }
+    /**
+     * Checks for the sprite container element in the global DOM
+     * If it does not exist, it creates and appends it to the body
+     */
+    getOrCreateSpriteContainer() {
+        const spriteContainerId = 'tecton-sprites';
+        let spriteContainer = document.querySelector(`#${spriteContainerId}`);
+        if (spriteContainer)
+            return spriteContainer;
+        spriteContainer = document.createElement('div');
+        spriteContainer.id = spriteContainerId;
+        spriteContainer.style.display = 'none';
+        document.body.appendChild(spriteContainer);
+        return spriteContainer;
+    }
+    setCustomSVGAttrs() {
+        const innerSVG = this.hostElement.querySelector('svg');
+        if (!innerSVG)
+            return;
+        innerSVG.setAttribute('role', 'img');
+        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        const { label } = this;
+        if (label) {
+            const title = document.createElement('title');
+            const labelId = `label-${index$1.createGuid()}`;
+            title.id = labelId;
+            title.textContent = label;
+            innerSVG.appendChild(title);
+            innerSVG.setAttribute('aria-labelledby', labelId);
+        }
+        else {
+            innerSVG.setAttribute('aria-hidden', 'true');
+        }
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const { label, type } = this;
+        return this.isCustom ? (index.h("slot", null)) : (index.h("svg", { "aria-hidden": !!label ? undefined : 'true', role: !!label ? 'img' : undefined, "aria-labelledby": !!label ? 'label' : undefined, viewBox: this.iconCloneViewBox, xmlns: "http://www.w3.org/2000/svg" }, !!label && index.h("title", { id: "label" }, label), !!type && index.h("use", { ref: el => (this.spriteUse = el) }), index.h("g", { ref: el => (this.spriteGroup = el) })));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "type": ["handleIcon"]
+    }; }
+};
+Q2Icon.style = Q2IconStyle0;
 function formatNumber(val = '', options = {
     prefix: '',
@@ -3533,7 +4436,7 @@ const Q2Input = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'aabab7e28c8c4849d6b2ca6b3a59f446fbee9755', class: this.wrapperClasses }, index.h("div", { key: 'abdd8152d335850d9f75a9d15ec1ef661de43307', class: "label-wrapper" }, index$1.labelDOM(this), this.countDOM()), this.inputContainerDOM(), index$1.messagesDOM(this)));
+        return (index.h("div", { key: '0492e29c88a0aed40cc7fc3becfda672632e20d8', class: this.wrapperClasses }, index.h("div", { key: 'dcb30995011ad0faf90613195a2877d524b5e1ba', class: "label-wrapper" }, index$1.labelDOM(this), this.countDOM()), this.inputContainerDOM(), index$1.messagesDOM(this)));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -3549,6 +4452,384 @@ const Q2Input = class {
 };
 Q2Input.style = Q2InputStyle0;
+const q2LoadingCss = "*{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 #0066cc)}: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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-gray-8, #808080)))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
+const Q2LoadingStyle0 = q2LoadingCss;
+const Q2Loading = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.halfCircleSpinner = () => {
+            return (index.h("div", { class: "q2-loading-animation half-circle-spinner", "aria-label": this.localizedLabel, role: "status", "aria-live": "polite" }, index.h("div", { class: "circle circle-1" }), index.h("div", { class: "circle circle-2" })));
+        };
+        this.skeletonLoader = () => {
+            return (index.h("div", { class: "q2-loading-skeleton", "aria-label": this.localizedLabel, role: "status", "aria-live": "polite" }, this.shape === 'custom' ? index.h("slot", null) : this.skeletonShape, index.h("div", { class: "q2-loading-skeleton-shimmer" })));
+        };
+        this.spinner = () => {
+            return this.halfCircleSpinner();
+        };
+        this.ariaLabel = undefined;
+        this.counts = undefined;
+        this.inline = undefined;
+        this.label = undefined;
+        this.modifiers = undefined;
+        this.shape = undefined;
+        this.type = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        index$1.handleAriaLabel(this);
+    }
+    // #endregion
+    // #region Watchers
+    ariaLabelObserver() {
+        index$1.handleAriaLabel(this);
+    }
+    // #endregion
+    // #region Local Methods
+    get countsArray() {
+        if (this.type !== 'skeleton' || !this.counts) {
+            return undefined;
+        }
+        return this.counts.split('x').map(Number);
+    }
+    get loader() {
+        const loaderMap = {
+            default: this.spinner,
+            spinner: this.spinner,
+            skeleton: this.skeletonLoader,
+        };
+        return loaderMap[this.type] || loaderMap.default;
+    }
+    get localizedLabel() {
+        return index$1.loc(this.label || 'tecton.element.loading.ariaLabel');
+    }
+    get modifiersSet() {
+        if (this.type !== 'skeleton' || !this.modifiers) {
+            return undefined;
+        }
+        return new Set(this.modifiers.split('-'));
+    }
+    get skeletonShape() {
+        var _a, _b;
+        return (_b = (_a = shapes.shapes[this.shape]) === null || _a === void 0 ? void 0 : _a.call(shapes.shapes, this.countsArray, this.modifiersSet)) !== null && _b !== void 0 ? _b : '';
+    }
+    get spinnerShape() {
+        const spinnerMap = {
+            default: this.halfCircleSpinner,
+            'half-circle': this.halfCircleSpinner,
+        };
+        return spinnerMap[this.type] || spinnerMap.default;
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return this.loader();
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "ariaLabel": ["ariaLabelObserver"]
+    }; }
+};
+Q2Loading.style = Q2LoadingStyle0;
+const q2TabContainerCss = "*{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 #0066cc)}: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:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, inherit);padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));background:var(--tct-tab-container-content-backgrond, none)}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";
+const Q2TabContainerStyle0 = q2TabContainerCss;
+const Q2TabContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.change = index.createEvent(this, "change", 7);
+        this.settled = index.createEvent(this, "settled", 7);
+        // #region Own Properties
+        this.guid = index$1.createGuid();
+        this.lastScrolled = new Date(null).getTime();
+        this.scheduledAfterRender = [];
+        this.checkScrollState = () => {
+            if (!this.listElement)
+                return;
+            const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+            this.scrollEnabled = scrollWidth > clientWidth;
+            this.showScrollLeft = scrollLeft > 0;
+            this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;
+        };
+        this.moveToAdjacentTab = (value, direction) => {
+            const index = this.tabs.map(({ value }) => value).indexOf(value);
+            let newIndex;
+            switch (direction) {
+                case 'next':
+                    newIndex = Math.min(index + 1, this.tabs.length - 1);
+                    break;
+                case 'prev':
+                    newIndex = Math.max(index - 1, 0);
+                    break;
+                case 'first':
+                    newIndex = 0;
+                    break;
+                case 'last':
+                    newIndex = this.tabs.length - 1;
+                    break;
+            }
+            if (index === newIndex)
+                return;
+            this.moveToTab(newIndex, true);
+        };
+        this.moveToTab = (index, shouldFocus = true) => {
+            const focusedValue = this.tabs[index].value;
+            const focusedTab = this.listElement.querySelector(`[data-value="${focusedValue}"]`);
+            if (shouldFocus) {
+                focusedTab.focus({ preventScroll: true });
+            }
+            const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;
+            this.listElement.scrollTo({
+                left,
+                behavior: 'smooth',
+            });
+            return focusedTab;
+        };
+        this.onScrollBtnClick = (direction) => {
+            const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+            const halfWidth = Math.floor(clientWidth / 2);
+            let scrollAmount = 0;
+            if (direction === 'left') {
+                scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));
+            }
+            else {
+                scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));
+            }
+            this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+        };
+        this.onSlotChange = () => {
+            this.checkScrollState();
+        };
+        this.onTabClick = (event) => {
+            const targetValue = event.target.closest('button[role="tab"]')
+                .dataset.value;
+            const isAlreadySelected = this.value === targetValue;
+            if (isAlreadySelected)
+                return;
+            this.change.emit({
+                value: targetValue,
+            });
+        };
+        this.onTabKeyDown = (event) => {
+            const value = event.target.dataset.value;
+            switch (event.key) {
+                case 'ArrowRight':
+                    event.preventDefault();
+                    this.moveToAdjacentTab(value, 'next');
+                    break;
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    this.moveToAdjacentTab(value, 'prev');
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.moveToAdjacentTab(value, 'first');
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.moveToAdjacentTab(value, 'last');
+                    break;
+                case 'Space':
+                case 'Enter':
+                    event.preventDefault();
+                    this.change.emit({ value });
+                    break;
+            }
+        };
+        this.setTabs = () => {
+            this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({
+                label: (label && index$1.loc(label)) || '',
+                value,
+                badgeCount,
+                badgeDescription,
+                badgeTheme,
+                badgeStatus,
+            }));
+        };
+        this.updateTabData = () => {
+            this.updateTabPaneProps();
+            this.setTabs();
+        };
+        this.updateTabPaneProps = () => {
+            this.tabPanes.forEach((tab, index) => {
+                tab.selected = tab.value === this.selectedTabValue;
+                tab.guid = this.guid;
+                tab.index = index;
+            });
+        };
+        this.hasLeft = false;
+        this.hasRight = false;
+        this.scrollEnabled = false;
+        this.showScrollLeft = false;
+        this.showScrollRight = false;
+        this.tabs = undefined;
+        this.color = undefined;
+        this.name = undefined;
+        this.noPrint = false;
+        this.type = undefined;
+        this.value = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+        this.mutationObserver.disconnect();
+        this.resizeObserver = null;
+        this.mutationObserver = null;
+    }
+    componentWillLoad() {
+        const observer = new MutationObserver(this.updateTabData);
+        observer.observe(this.hostElement, { childList: true, attributes: true });
+        this.mutationObserver = observer;
+        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+        this.updateTabData();
+    }
+    componentDidLoad() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.listElement);
+        this.checkScrollState();
+        index$1.overrideFocus(this.hostElement);
+        const index = this.tabs.findIndex(el => el.value === this.value);
+        this.scheduledAfterRender.push(() => {
+            const hasTabs = this.tabs.length > 0;
+            if (!hasTabs)
+                return;
+            const tab = this.moveToTab(Math.max(index, 0), false);
+            this.value = tab.dataset.value;
+        });
+    }
+    componentDidRender() {
+        this.scheduledAfterRender.forEach(fn => fn());
+        this.scheduledAfterRender = [];
+        this.settled.emit();
+    }
+    // #endregion
+    // #region Listeners
+    onBadge() {
+        this.setTabs();
+    }
+    defaultChangeHandler(event) {
+        if (event.target === this.hostElement && !this.hostElement.onchange) {
+            this.value = event.detail.value;
+        }
+    }
+    onFocus(event) {
+        if (!index$1.isEventFromElement(event, this.hostElement))
+            return;
+        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);
+        this.moveToTab(index, true);
+    }
+    onResize() {
+        this.checkScrollState();
+    }
+    // #endregion
+    // #region Watchers
+    nameObserver() {
+        this.updateTabData();
+    }
+    valueObserver() {
+        this.updateTabData();
+        this.scheduledAfterRender.push(this.resizeIframe);
+        const index = this.tabs.findIndex(el => el.value === this.value);
+        if (index > -1) {
+            this.scheduledAfterRender.push(() => this.moveToTab(index, false));
+        }
+    }
+    // #endregion
+    // #region Local Methods
+    get selectedTabValue() {
+        return this.value || this.tabPanes[0].value || '';
+    }
+    get tabList() {
+        return this.hostElement.shadowRoot.querySelector('.tab-list');
+    }
+    get tabPanes() {
+        const tabPanes = this.hostElement.querySelectorAll('q2-tab-pane, tecton-tab-pane');
+        if (tabPanes.length === 0) {
+            return [];
+        }
+        return Array.from(tabPanes).filter(pane => pane.name === this.name);
+    }
+    renderTab(tab, index$1) {
+        const { label, value } = tab;
+        const isSelected = this.selectedTabValue === value;
+        return (index.h("li", { role: "presentation" }, index.h("button", { id: `tab-${this.guid}-${index$1}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected))));
+    }
+    renderTabWithBadge(tab, isSelected) {
+        let theme;
+        if (!tab.badgeStatus && isSelected)
+            theme = tab.badgeTheme || 'primary';
+        let description;
+        if (tab.badgeDescription)
+            description = index$1.loc(tab.badgeDescription);
+        else if (tab.badgeStatus)
+            description = index$1.loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);
+        else
+            description = index$1.loc('tecton.element.tab.pane.new');
+        return (index.h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, index.h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
+    }
+    resizeIframe() {
+        var _a, _b;
+        return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return (index.h(index.Fragment, { key: '954e547c28e111602b692ef93f1ee9fb9e251868' }, index.h("div", { key: 'f90570014adec581a31bb3e6802b62a49c9b2a5c', class: "tab-container" }, this.scrollEnabled && (index.h(index.Fragment, { key: '575fe12d7c013d5ac07c11c757b7ffd76be475c5' }, index.h("div", { key: 'd876622c594f16def527ffb8d1c59dd2e0ee52e8', class: "gradient-left", hidden: !this.showScrollLeft }), index.h("div", { key: '3ef1dbca97496a3e591ace27a7e0fdad939f2811', class: "gradient-right", hidden: !this.showScrollRight }), index.h("q2-btn", { key: '08656cd93a31b74012d13121237b3629d590813d', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: '29c1174c97edb7e822940b32f25d5707d514b9d3', type: "chevron-left", label: "scroll left" })), index.h("q2-btn", { key: '11bb4300006e7aabf2a74fad1ef2714867b02bdc', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: '450000d5e7a7a471e62679760e8f885c3a557e34', type: "chevron-right", label: "scroll right" })))), index.h("ul", { key: 'd6db41c0f116a32d1d0899b29d22110f26d00a8f', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), index.h("div", { key: 'a39b20a57402a3721b2383826a50fcf3a3ace87b', class: "tab-content" }, index.h("slot", { key: '9d9d03cdcf27c09fb2dfc01066ea5691ab157a80', onSlotchange: () => this.onSlotChange() }))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "name": ["nameObserver"],
+        "value": ["valueObserver"]
+    }; }
+};
+Q2TabContainer.style = Q2TabContainerStyle0;
+const q2TabPaneCss = "*{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 #0066cc)}: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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
+const Q2TabPaneStyle0 = q2TabPaneCss;
+const Q2TabPane = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.badge = index.createEvent(this, "badge", 7);
+        this.badgeCount = undefined;
+        this.badgeDescription = undefined;
+        this.badgeStatus = undefined;
+        this.badgeTheme = undefined;
+        this.guid = undefined;
+        this.index = undefined;
+        this.label = undefined;
+        this.name = undefined;
+        this.selected = undefined;
+        this.value = undefined;
+    }
+    // #endregion
+    // #region Watchers
+    badgeObserver() {
+        this.badge.emit();
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return (index.h("div", { key: 'c21a87ba74c63595e124125cd91d317242ef0d4a', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, index.h("slot", { key: '305ded1dbb739e7c7115c49f952186b1fde76895' })));
+    }
+    static get watchers() { return {
+        "badgeCount": ["badgeObserver"],
+        "badgeDescription": ["badgeObserver"],
+        "badgeTheme": ["badgeObserver"],
+        "badgeStatus": ["badgeObserver"]
+    }; }
+};
+Q2TabPane.style = Q2TabPaneStyle0;
+exports.q2_badge = Q2Badge;
+exports.q2_btn = Q2Btn;
+exports.q2_icon = Q2Icon;
 exports.q2_input = Q2Input;
+exports.q2_loading = Q2Loading;
+exports.q2_tab_container = Q2TabContainer;
+exports.q2_tab_pane = Q2TabPane;
-//# sourceMappingURL=q2-input.cjs.entry.js.map
+//# sourceMappingURL=q2-badge_7.cjs.entry.js.map