q2-tecton-elements 1.66.2 → 1.67.1

package/dist/components/q2-avatar2.js.map

@@ -1 +1 @@
-{"file":"q2-avatar2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    box-shadow: var(--tct-avatar-img-box-shadow, --tct-avatar-box-shadow, none);\n    border: var(--tct-avatar-border, none);\n    &.size-small {\n        height: var(--tct-avatar-img-small-size, 24px);\n        width: var(--tct-avatar-img-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-img-medium-size, --tct-avatar-img-height, 44px);\n        width: var-list(--tct-avatar-img-medium-size, --tct-avatar-img-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-img-large-size, 64px);\n        width: var(--tct-avatar-img-large-size, 64px);\n    }\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    backdrop-filter: var(--tct-avatar-backdrop-filter);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    box-shadow: var(--tct-avatar-box-shadow, none);\n    border: var(--tct-avatar-border, none);\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-medium-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-medium-size, --tct-avatar-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n    }\n}\n\n.size-small {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 30px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 24px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 20px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 15px);\n    }\n}\n.size-medium {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n    }\n}\n.size-large {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 90px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 72px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 60px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 45px);\n    }\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    box-shadow: var(--tct-avatar-fallback-box-shadow, --tct-avatar-box-shadow, none);\n    border: var(--tct-avatar-border, none);\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    &.size-small {\n        height: var(--tct-avatar-fallback-small-size, 24px);\n        width: var(--tct-avatar-fallback-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-fallback-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-fallback-size, --tct-avatar-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-fallback-large-size, 64px);\n        width: var(--tct-avatar-fallback-large-size, 64px);\n    }\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --tct-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --tct-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --tct-icon-size);\n    height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n/**\n * @name Avatar\n * @category Display\n * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.\n */\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={`${isLoaded ? 'avatar-img' : 'avatar-img-default'} size-${this.size}`}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${this.size} initials-size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class={`fallback size-${this.size}`}\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-avatar2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-wrapper {\n    position: relative;\n    border: 1px solid transparent;\n    padding: 1px;\n    border-radius: 100%;\n\n    .hover-ring {\n        display: flex;\n    }\n    &:hover {\n        border-color: var-list(\n            --tct-avatar-background,\n            --tct-avatar-bg,\n            --t-gray-8,\n            #9e9e9e\n        );\n    }\n\n    .decorator {\n        height: var(--app-scale-3x, 15px);\n        width: var(--app-scale-3x, 15px);\n        background-color: var-list(--tct-avatar-decorator-background-color, --t-base, #ffffff);\n        border-radius: 100%;\n        box-shadow: var-list(\n            --app-shadow-1,\n            #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n        );\n        position: absolute;\n        bottom: 0;\n        right: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        ::slotted(q2-icon) {\n            color: var-list(--tct-avatar-decorator-color, #000000);\n        }\n    }\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n        .decorator {\n            height: var(--app-scale-2x, 10px);\n            width: var(--app-scale-2x, 10px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--tct-avatar-decorator-small-icon-size, 8px);\n                width: var(--tct-avatar-decorator-small-icon-size, 8px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-size, --tct-avatar-width, 44px);\n        .decorator {\n            height: var(--app-scale-3x, 15px);\n            width: var(--app-scale-3x, 15px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--app-scale-2x, 10px);\n                width: var(--app-scale-2x, 10px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n        .decorator {\n            height: var(--app-scale-4x, 20px);\n            width: var(--app-scale-4x, 20px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: 14px;\n                width: 14px;\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n}\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    border: var(--tct-avatar-border, none);\n    height: 100%;\n    width: 100%;\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    backdrop-filter: var(--tct-avatar-backdrop-filter);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\n    height: 100%;\n    width: 100%;\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: 100%;\n    width: 100%;\n    border-radius: var-list(\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    border: var(--tct-avatar-border, none);\n    background: var-list(\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    q2-icon {\n        --tct-icon-size: #{var-list(--tct-avatar-icon-size, 65%)};\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-avatar-icon-stroke-primary,\n                currentcolor\n            )};\n        --tct-icon-stroke-secondary: #{var-list(\n                --tct-avatar-icon-stroke-secondary,\n                currentcolor\n            )};\n        --tct-icon-fill: #{var-list(--tct-avatar-icon-fill)};\n        color: var-list(--tct-avatar-icon-color, --tct-avatar-color, --t-base, #ffffff);\n        width: var-list(--tct-avatar-icon-size, --tct-icon-size);\n        height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n/**\n * @name Avatar\n * @category Display\n * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.\n *\n * @slot decorator - An optional affordance indicator to display in the top-right corner\n */\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Own Properties\n\n    private decoratorObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    hasDecorator: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.decoratorObserver) {\n            this.decoratorObserver.disconnect();\n        }\n    }\n\n    componentWillLoad() {\n        this.checkDecorator();\n    }\n\n    componentDidLoad() {\n        this.setupDecoratorObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    checkDecorator() {\n        const decoratorElements = Array.from(this.el.children).filter(\n            child => child.getAttribute('slot') === 'decorator'\n        );\n        this.hasDecorator = decoratorElements.length > 0;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    private setupDecoratorObserver() {\n        // Set up MutationObserver to watch for changes to the host element's children\n        this.decoratorObserver = new MutationObserver(() => {\n            this.checkDecorator();\n        });\n\n        // Observe changes to the host element's children (light DOM)\n        this.decoratorObserver.observe(this.el, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['slot'],\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div class={`avatar-wrapper size-${this.size}`}>\n                {this.hasDecorator && (\n                    <div class=\"decorator\">\n                        <slot name=\"decorator\" />\n                    </div>\n                )}\n\n                {showImg && (\n                    <img\n                        class={`${isLoaded ? 'avatar-img' : 'avatar-img-default'}`}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials initials-size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-btn2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@sten
 import { j as handleDeprecationWarning, h as handleAriaLabel, k as handleColor, o as overrideFocus, i as isEventFromElement, m as getAriaValueFromProp, l as loc } from './index2.js';
 import { d as defineCustomElement$1 } from './q2-loading2.js';
 
-const q2BtnCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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-visible{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}q2-loading{--tct-loading-primary-color:currentcolor;--tct-loading-secondary-color:currentcolor;--tct-loading-spinner-size:24px}.slot-container{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);pointer-events:none}:host([loading]) .icon-right .slot-container{flex-direction:row-reverse}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]:not([loading=false])) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}: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{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}: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);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;min-height:var(--tct-btn-min-height, none)}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}button.has-color,button.has-intent{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);letter-spacing:var(--tct-btn-letter-spacing, inherit)}button.has-color:not(.has-size),button.has-intent:not(.has-size){padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}button:not(.has-size):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size, 18px)}: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([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));min-height:var(--tct-btn-min-height-small, none)}:host([size=small]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-small, 16px)}: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));min-height:var(--tct-btn-min-height-medium, none)}:host([size=medium]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-medium, unset)}: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));min-height:var(--tct-btn-min-height-large, none)}:host([size=large]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-large, unset)}:host([color=primary]) button,:host([intent=workflow-primary]) button{backdrop-filter:var(--tct-btn-primary-backdrop-filter);--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:var(\n      --tct-btn-primary-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-primary-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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{backdrop-filter:var(--tct-btn-secondary-backdrop-filter);--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:var(\n      --tct-btn-secondary-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-secondary-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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{backdrop-filter:var(--tct-btn-destroy-backdrop-filter);--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:var(\n      --tct-btn-destroy-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-destroy-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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{backdrop-filter:var(--tct-btn-escape-backdrop-filter);--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:var(\n      --tct-btn-escape-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-escape-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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{backdrop-filter:var(--tct-btn-neutral-backdrop-filter);--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:var(\n      --tct-btn-neutral-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-neutral-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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{backdrop-filter:var(--tct-btn-neutral-text-backdrop-filter);--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:var(\n      --tct-btn-neutral-text-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-neutral-text-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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)))}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)));padding:var(--tct-btn-icon-padding, 0px)}button.icon-only ::slotted(q2-icon){--tct-icon-size:unset}button.icon-only.has-size{padding:var(--tct-btn-icon-padding, 0px)}button.icon-only.has-intent{padding:var(--tct-btn-icon-padding, 10px);border-radius:var(--tct-btn-icon-border-radius, var(--comp-border-radius))}button:not(.has-color):not(.has-intent):hover,button:not(.has-color):not(.has-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)))))))}button:not(.has-intent).is-active.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)))))))}button:not(.has-intent).icon-only:hover *,button:not(.has-intent).icon-only:focus *,button:not(.has-intent).is-active.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))))}button:not(.has-intent):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)}button:not(.has-intent):not(.icon-only):hover,button:not(.has-intent):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)))}button.intent-coin{--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-avatar-height:var(--tct-btn-coin-height, 44px);--tct-avatar-width:var(--tct-btn-coin-width, 44px);--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-text, #4d4d4d));--tct-icon-stroke-secondary:var(--tct-btn-coin-icon-stroke-secondary, var(--t-text, #4d4d4d));--tct-avatar-icon-stroke-primary:var(--tct-btn-coin-avatar-icon-stroke-primary, var(--t-text, #4d4d4d));--tct-avatar-icon-stroke-secondary:var(--tct-btn-coin-avatar-icon-stroke-secondary, var(--t-text, #4d4d4d));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-text, #4d4d4d));--tct-icon-stroke-width:var(--tct-btn-coin-icon-stroke-width, 1px);--tct-btn-padding:0;--tct-avatar-border:var(--tct-btn-coin-border, 0);--tct-avatar-fallback-border-radius:var(--tct-btn-coin-border-radius, 50%);--tct-btn-border-radius:var(--tct-btn-coin-border-radius, 50%);width:auto;backdrop-filter:var(--tct-btn-coin-backdrop-filter);box-shadow:var(--tct-btn-coin-box-shadow)}button.intent-coin:hover:not([disabled]),button.intent-coin:hover:focus:not(:active):not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff,\n      0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #ffffff));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-base, #ffffff));box-shadow:var(--tct-btn-coin-hover-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring)))}button.intent-coin:focus:not([disabled]){--const-double-focus-ring:0;box-shadow:var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, 0))}button.intent-coin:focus-visible:not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff,\n      0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));box-shadow:var(--tct-btn-coin-focus-visible-box-shadow, var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring))))}button.intent-coin:active:not([disabled]){box-shadow:none}.coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));max-width:100px;text-align:center;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}.coin-wrapper{--tct-avatar-display:block;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);flex-direction:column;width:var(--tct-btn-coin-container-width, 95px)}.coin-wrapper ::slotted(:not(q2-avatar,[slot=coin-label])){display:none}.coin-wrapper .coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));margin-top:var(--tct-btn-coin-gap, var(--app-scale-2x, 10px));max-width:100px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.coin-wrapper .coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}";
+const q2BtnCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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-visible{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}q2-loading{--tct-loading-primary-color:currentcolor;--tct-loading-secondary-color:currentcolor;--tct-loading-spinner-size:24px}.slot-container{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);pointer-events:none}:host([loading]) .icon-right .slot-container{flex-direction:row-reverse}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]:not([loading=false])) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}: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{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}: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);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;min-height:var(--tct-btn-min-height, none)}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}button.has-color,button.has-intent{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);letter-spacing:var(--tct-btn-letter-spacing, inherit)}button.has-color:not(.has-size),button.has-intent:not(.has-size){padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}button:not(.has-size):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size, 18px)}: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([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));min-height:var(--tct-btn-min-height-small, none)}:host([size=small]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-small, 16px)}: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));min-height:var(--tct-btn-min-height-medium, none)}:host([size=medium]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-medium, unset)}: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));min-height:var(--tct-btn-min-height-large, none)}:host([size=large]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-large, unset)}:host(:not([intent])) button:focus-visible{--comp-double-focus-ring-fallback:0 0 0 2px #ffffff, 0 0 0 4px #0066cc;box-shadow:var(--tct-btn-default-double-focus-visible-ring, var(--const-double-focus-ring, var(--comp-double-focus-ring-fallback)))}:host([color=primary]) button,:host([intent=workflow-primary]) button{backdrop-filter:var(--tct-btn-primary-backdrop-filter);--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:var(\n      --tct-btn-primary-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-primary-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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{backdrop-filter:var(--tct-btn-secondary-backdrop-filter);--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:var(\n      --tct-btn-secondary-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-secondary-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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{backdrop-filter:var(--tct-btn-destroy-backdrop-filter);--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:var(\n      --tct-btn-destroy-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-destroy-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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{backdrop-filter:var(--tct-btn-escape-backdrop-filter);--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:var(\n      --tct-btn-escape-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-escape-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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{backdrop-filter:var(--tct-btn-neutral-backdrop-filter);--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:var(\n      --tct-btn-neutral-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-neutral-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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{backdrop-filter:var(--tct-btn-neutral-text-backdrop-filter);--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:var(\n      --tct-btn-neutral-text-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  );--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:var(\n      --tct-btn-neutral-text-focus-visible-box-shadow,\n      0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n      0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n  );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)))}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));min-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)));padding:var(--tct-btn-icon-padding, 0px)}button.icon-only ::slotted(q2-icon){--tct-icon-size:unset}button.icon-only.has-size{padding:var(--tct-btn-icon-padding, 0px)}button.icon-only.has-intent{padding:var(--tct-btn-icon-padding, 10px);border-radius:var(--tct-btn-icon-border-radius, var(--comp-border-radius))}button:not(.has-color):not(.has-intent):hover,button:not(.has-color):not(.has-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)))))))}button:not(.has-intent).is-active.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)))))))}button:not(.has-intent).icon-only:hover *,button:not(.has-intent).icon-only:focus *,button:not(.has-intent).is-active.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))))}button:not(.has-intent):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)}button:not(.has-intent):not(.icon-only):hover,button:not(.has-intent):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)))}button.intent-coin{--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-avatar-height:var(--tct-btn-coin-height, 44px);--tct-avatar-width:var(--tct-btn-coin-width, 44px);--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-text, #4d4d4d));--tct-icon-stroke-secondary:var(--tct-btn-coin-icon-stroke-secondary, var(--t-text, #4d4d4d));--tct-avatar-icon-stroke-primary:var(--tct-btn-coin-avatar-icon-stroke-primary, var(--t-text, #4d4d4d));--tct-avatar-icon-stroke-secondary:var(--tct-btn-coin-avatar-icon-stroke-secondary, var(--t-text, #4d4d4d));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-text, #4d4d4d));--tct-icon-stroke-width:var(--tct-btn-coin-icon-stroke-width, 1px);--tct-btn-padding:0;--tct-avatar-border:var(--tct-btn-coin-border, 0);--tct-avatar-fallback-border-radius:var(--tct-btn-coin-border-radius, 50%);--tct-btn-border-radius:var(--tct-btn-coin-border-radius, 50%);width:auto;backdrop-filter:var(--tct-btn-coin-backdrop-filter);box-shadow:var(--tct-btn-coin-box-shadow)}button.intent-coin:hover:not([disabled]),button.intent-coin:hover:focus:not(:active):not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff,\n      0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));--tct-avatar-background:var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));--tct-avatar-fallback-background:var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #ffffff));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-base, #ffffff));box-shadow:var(--tct-btn-coin-hover-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring)))}button.intent-coin:focus:not([disabled]){--const-double-focus-ring:0;box-shadow:var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, 0))}button.intent-coin:focus-visible:not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff,\n      0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));box-shadow:var(--tct-btn-coin-focus-visible-box-shadow, var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring))))}button.intent-coin:focus:active:not([disabled]){--tct-avatar-background:var(--tct-btn-coin-active-background);--tct-avatar-fallback-background:var(--tct-btn-coin-active-background);box-shadow:none}.coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));max-width:100px;text-align:center;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}.coin-wrapper{--tct-avatar-display:block;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);flex-direction:column;width:var(--tct-btn-coin-container-width, 95px)}.coin-wrapper ::slotted(:not(q2-avatar,[slot=coin-label])){display:none}.coin-wrapper .coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));margin-top:var(--tct-btn-coin-gap, var(--app-scale-2x, 10px));max-width:100px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.coin-wrapper .coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}";
 
 const Q2Btn = /*@__PURE__*/ proxyCustomElement(class Q2Btn extends HTMLElement {
     constructor() {
@@ -63,17 +63,19 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class Q2Btn extends HTMLElement {
     // #endregion
     // #region Listeners
     handleClick(event) {
+        var _a;
         if (this.loading || this.disabled) {
             event.stopImmediatePropagation();
             return;
         }
         this.tctClick.emit();
-        this.primaryBtn.focus();
+        (_a = this.primaryBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     delegateFocus(event) {
+        var _a;
         if (!isEventFromElement(event, this.hostElement))
             return;
-        this.primaryBtn.focus();
+        (_a = this.primaryBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     // #endregion
     // #region Watchers
@@ -97,7 +99,7 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class Q2Btn extends HTMLElement {
                 'grid',
                 'dialog',
             ]),
-            ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,
+            ariaLabel: this.composedAriaLabel,
             ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),
             ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),
             description: this.description !== undefined ? this.description : undefined,
@@ -131,14 +133,26 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class Q2Btn extends HTMLElement {
         }
         return classes.join(' ');
     }
+    get composedAriaLabel() {
+        const baseText = this.label && this.hideLabel
+            ? loc(this.label)
+            : this.label || this.hostElement.textContent.trim() || undefined;
+        if (!this._tooltip && !baseText)
+            return undefined;
+        if (!this._tooltip)
+            return this.hideLabel ? baseText : undefined;
+        if (!baseText)
+            return this._tooltip;
+        return `${baseText} - ${this._tooltip}`;
+    }
     // #endregion
     // #region Render Methods
     renderButton() {
-        const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } = this.buttonAttributes;
-        const { iconPosition, loading, badge, label, hideLabel } = this;
+        const { ariaExpanded, ariaHasPopup, ariaLabel, ariaSelected, ariaPressed, description, disabled, type, tabindex, } = this.buttonAttributes;
+        const { iconPosition, loading, badge, hideLabel } = this;
         const renderLoadingSpinner = iconPosition || loading;
         const isLoadingSpinnerInline = !iconPosition || badge;
-        return (h(Fragment, null, h("button", { ref: el => (this.primaryBtn = el !== null && el !== void 0 ? el : this.primaryBtn), "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, "aria-pressed": ariaPressed, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: this.buttonClasses, "aria-describedby": !!description ? 'hidden-description' : undefined, "aria-labelledby": this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined, role: this._role || undefined }, h("div", { class: "slot-container" }, renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), this.renderDefaultLabel(), this.renderDefaultCoinSlot())), this.renderCoinLabel(), !!description && (h("div", { id: "hidden-description", "aria-hidden": "true", class: "sr" }, description))));
+        return (h(Fragment, null, h("button", { ref: el => (this.primaryBtn = el !== null && el !== void 0 ? el : this.primaryBtn), "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": ariaLabel, "aria-selected": ariaSelected, "aria-pressed": ariaPressed, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: this.buttonClasses, "aria-describedby": !!description ? 'hidden-description' : undefined, "aria-labelledby": this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined, role: this._role || undefined }, h("div", { class: "slot-container" }, renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), this.renderDefaultLabel(), this.renderDefaultCoinSlot())), this.renderCoinLabel(), !!description && (h("div", { id: "hidden-description", "aria-hidden": "true", class: "sr" }, description))));
     }
     renderCoinLabel() {
         if (this.intent !== 'coin' || this.hideLabel)
@@ -170,6 +184,7 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class Q2Btn extends HTMLElement {
     static get style() { return q2BtnCss; }
 }, [1, "q2-btn", {
         "_role": [513],
+        "_tooltip": [1],
         "active": [516],
         "ariaControls": [1, "aria-controls"],
         "ariaExpanded": [1, "aria-expanded"],

package/dist/components/q2-btn2.js.map

@@ -1 +1 @@
-{"file":"q2-btn2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-mixins';\n\nq2-loading {\n    --tct-loading-primary-color: currentcolor;\n    --tct-loading-secondary-color: currentcolor;\n    --tct-loading-spinner-size: 24px;\n}\n\n.slot-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var-list(--app-scale-1x, 5px);\n    pointer-events: none;\n\n    :host([loading]) .icon-right & {\n        flex-direction: row-reverse;\n    }\n}\n\n:host([loading]) ::slotted(q2-icon) {\n    display: none;\n}\n:host([loading]:not([loading='false'])) button {\n    pointer-events: none;\n}\n\n:host([block]) button,\n:host([block]) button.icon-only {\n    display: block;\n    width: 100%;\n}\n\n:host {\n    display: inline-block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([block]) {\n    display: block;\n    width: 100%;\n}\n\n::slotted(q2-icon) {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\n:host {\n    --comp-font-weight: 600;\n    --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 4px)};\n    --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n    --comp-background-alternative: #ebf8ff;\n\n    .btn-height-wrapper {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: var(--app-scale-1x, 5px);\n        &:active {\n            box-shadow: none;\n        }\n    }\n}\n\nbutton {\n    margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n    padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n    display: inline-block;\n    width: 100%;\n    hyphens: auto;\n    border: var(--tct-btn-border);\n    background: transparent;\n    box-shadow: none;\n    border-radius: 0;\n    font-weight: 400;\n    color: inherit;\n    cursor: pointer;\n    transition: var(--comp-btn-tween);\n    transition-property: background, color, box-shadow, fill, border-color, border-width;\n    outline: 0;\n    min-height: var(--tct-btn-min-height, none);\n\n    &:disabled {\n        opacity: var-list(var-prefixer(btn-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n\n    &.has-color,\n    &.has-intent {\n        font-size: var-list(var-prefixer(btn-font-size), inherit);\n        border-radius: var-list(--tct-btn-border-radius, --comp-border-radius);\n        text-transform: var(--tct-btn-text-transform);\n        letter-spacing: var(--tct-btn-letter-spacing, inherit);\n    }\n\n    &.has-color:not(.has-size),\n    &.has-intent:not(.has-size) {\n        padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n    }\n\n    &:not(.has-size) {\n        &:not(.icon-only) {\n            ::slotted(q2-icon) {\n                --tct-icon-size: var(--tct-btn-icon-size, 18px);\n            }\n        }\n    }\n\n    // #region Size\n\n    :host([size='1']) & {\n        padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    }\n    :host([size='2']) & {\n        padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n    }\n    :host([size='3']) & {\n        padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n    }\n    :host([size='4x']) & {\n        padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\n    }\n    :host([size='4']) & {\n        padding: var-list(--tct-scale-6x, --app-scale-6x, 30px);\n    }\n\n    :host([size='small']) & {\n        padding: var-list(var-prefixer(btn-padding-size-small), '4px 16px');\n        font-size: var-list(var-prefixer(btn-font-size-small), 14px);\n        min-height: var(--tct-btn-min-height-small, none);\n        &:not(.icon-only) {\n            ::slotted(q2-icon) {\n                --tct-icon-size: var(--tct-btn-icon-size-small, 16px);\n            }\n        }\n    }\n\n    :host([size='medium']) & {\n        padding: var-list(var-prefixer(btn-padding-size-medium), '12px 24px');\n        font-size: var-list(var-prefixer(btn-font-size-medium), 16px);\n        min-height: var(--tct-btn-min-height-medium, none);\n        &:not(.icon-only) {\n            ::slotted(q2-icon) {\n                --tct-icon-size: var(--tct-btn-icon-size-medium, unset);\n            }\n        }\n    }\n\n    :host([size='large']) & {\n        padding: var-list(var-prefixer(btn-padding-size-large), '16px 32px');\n        font-size: var-list(var-prefixer(btn-font-size-large), 20px);\n        min-height: var(--tct-btn-min-height-large, none);\n        &:not(.icon-only) {\n            ::slotted(q2-icon) {\n                --tct-icon-size: var(--tct-btn-icon-size-large, unset);\n            }\n        }\n    }\n\n    // #endregion\n    // #region Intent\n\n    :host([color='primary']) &,\n    :host([intent='workflow-primary']) & {\n        backdrop-filter: var(--tct-btn-primary-backdrop-filter);\n        --comp-background: #{var-list(\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        --comp-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-primary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        // different background for active\n        --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(primary, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(primary, focus-visible, --const-focus-color, --comp-font-color, null);\n        @include btn-intent(primary);\n        @include btn-icon-color(primary, --comp-font-color);\n    }\n\n    :host([color='secondary']) &,\n    :host([intent='workflow-secondary']) & {\n        backdrop-filter: var(--tct-btn-secondary-backdrop-filter);\n        --comp-background: #{var-list(\n                --tct-btn-secondary-background,\n                --tct-btn-secondary-bg,\n                --t-button-default-bg,\n                #cccccc\n            )};\n        --comp-hover-background: #{var-list(\n                --tct-btn-secondary-hover-background,\n                --tct-btn-secondary-hover-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-hover-font-color: var(--app-white, #ffffff);\n        --comp-box-shadow: #{var-list(--tct-btn-secondary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-secondary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        @include btn-ring(secondary, hover, --comp-hover-background, --app-white, null);\n        @include btn-ring(secondary, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(secondary, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(secondary, focus-visible, --const-focus-color, --app-white, null);\n        @include btn-intent(secondary);\n        @include btn-icon-color(secondary, --comp-font-color);\n    }\n\n    :host([intent='workflow-destroy']) & {\n        backdrop-filter: var(--tct-btn-destroy-backdrop-filter);\n        --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #d20a0a)};\n        --comp-font-color: #{var-list(--tct-btn-destroy-font-color, --app-white)};\n        --comp-box-shadow: #{var-list(--tct-btn-destroy-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-destroy-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        @include btn-ring(destroy, hover, --comp-background, --comp-font-color, null);\n        @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(destroy, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-font-color, null);\n        @include btn-intent(destroy);\n        @include btn-icon-color(destroy, --comp-font-color);\n    }\n\n    :host([intent='workflow-escape']) & {\n        backdrop-filter: var(--tct-btn-escape-backdrop-filter);\n        --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n        --comp-font-color: #{var-list(\n                --tct-btn-escape-font-color,\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-box-shadow: #{var-list(--tct-btn-escape-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-hover-box-shadow: #{var-list(--tct-btn-escape-hover-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-escape-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        // different background for hover/active/focus\n        --comp-hover-background: #{var-list(--tct-btn-escape-hover-background, --comp-background-alternative)};\n        --comp-active-background: #{var-list(--tct-btn-escape-active-background, --comp-background-alternative)};\n        --comp-focus-background: #{var-list(--tct-btn-escape-focus-background, --comp-background-alternative)};\n        @include btn-ring(escape, hover, --comp-font-color, --comp-background, null);\n        @include btn-ring(escape, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(escape, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(escape, focus-visible, --const-focus-color, --comp-background, null);\n        @include btn-intent(escape);\n        @include btn-icon-color(escape, --comp-font-color);\n    }\n\n    :host([intent='neutral']) & {\n        backdrop-filter: var(--tct-btn-neutral-backdrop-filter);\n        --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n        --comp-font-color: #{var-list(\n                --tct-btn-neutral-font-color,\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-box-shadow: #{var-list(--tct-btn-neutral-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-neutral-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        // use outline instead border: because on/off border makes the button shaking on hover/focus/active\n        --comp-border-width: 1px;\n        --comp-border-style: solid;\n        --comp-border-color: var(--comp-font-color);\n        @include btn-ring(neutral, hover, --comp-font-color, --app-white, null);\n        @include btn-ring(neutral, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral, focus-visible, --const-focus-color, --comp-background, null);\n        @include btn-intent(neutral);\n        @include btn-icon-color(neutral, --comp-font-color);\n    }\n\n    :host([intent='neutral-text']) & {\n        backdrop-filter: var(--tct-btn-neutral-text-backdrop-filter);\n        --comp-background: #{var-list(\n                --tct-btn-neutral-text-background,\n                --tct-btn-neutral-text-bg,\n                --app-white,\n                #ffffff\n            )};\n        --comp-font-color: #{var-list(\n                --tct-btn-neutral-text-font-color,\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);\n        --comp-hover-text-decoration: underline;\n        // different background for focus\n        --comp-focus-background: #{var-list(--tct-btn-neutral-text-focus-background, --comp-background-alternative)};\n        @include btn-ring(neutral-text, hover, --comp-font-color, --comp-background, null);\n        @include btn-ring(neutral-text, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral-text, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral-text, focus-visible, --const-focus-color, --app-white, null);\n        @include btn-intent(neutral-text);\n        @include btn-icon-color(neutral-text, --comp-font-color);\n    }\n\n    // #endregion\n    // #region Icon Only\n\n    &.icon-only {\n        width: var-list(var-prefixer(btn-icon-width), 44px);\n        height: var-list(var-prefixer(btn-icon-height), 44px);\n        border-radius: var-list(var-prefixer(btn-icon-border-radius), --tct-btn-border-radius, 0);\n        padding: var(--tct-btn-icon-padding, 0px);\n\n        ::slotted(q2-icon) {\n            --tct-icon-size: unset;\n        }\n\n        &.has-size {\n            padding: var(--tct-btn-icon-padding, 0px);\n        }\n\n        &.has-intent {\n            padding: var(--tct-btn-icon-padding, 10px);\n            border-radius: var-list(--tct-btn-icon-border-radius, --comp-border-radius);\n        }\n    }\n\n    &:not(.has-color):not(.has-intent),\n    &.icon-only {\n        &:hover,\n        &:focus {\n            background: var-list(\n                --tct-btn-icon-hover-background,\n                var-prefixer(btn-icon-hover-bg),\n                var-prefixer(gray-13),\n                --tct-gray-l3,\n                --app-gray-l3,\n                #f2f2f2\n            );\n        }\n    }\n\n    &:not(.has-intent).is-active.icon-only {\n        background-color: var-list(\n            --tct-btn-icon-active-background,\n            var-prefixer(btn-icon-active-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            #f2f2f2\n        );\n    }\n\n    &:not(.has-intent).icon-only:hover *,\n    &:not(.has-intent).icon-only:focus *,\n    &:not(.has-intent).is-active.icon-only * {\n        color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n    }\n\n    // #endregion\n    // #region Plain\n\n    &:not(.has-intent):not(.icon-only) {\n        height: var-list(--tct-btn-height, auto);\n        padding-inline: var-list(--tct-btn-padding-inline, 0);\n        font-weight: var-list(--tct-btn-font-weight);\n        border-radius: var-list(--tct-btn-border-radius, 0);\n\n        &:hover,\n        &:focus {\n            background: var(--tct-btn-hover-background);\n        }\n    }\n\n    // #endregion\n    // #region Badges (Deprecated)\n\n    :host([badge]) & {\n        padding: var-list(var-prefixer(btn-badge-padding), unquote('2px 5px'));\n        font-size: var-list(var-prefixer(btn-badge-font-size), var-prefixer(btn-font-size), inherit);\n        border-radius: var-list(\n            var-prefixer(btn-badge-border-radius),\n            --tct-border-radius-1,\n            --app-border-radius-1,\n            4px\n        );\n        background-color: var-list(--tct-btn-badge-background, var-prefixer(btn-badge-bg), transparent);\n        color: var-list(var-prefixer(btn-badge-font-color), inherit);\n\n        ::slotted(q2-icon) {\n            --tct-icon-size: 1em;\n        }\n    }\n\n    :host([badge]:hover) &:enabled {\n        background-color: var-list(\n            --tct-btn-badge-hover-background,\n            var-prefixer(btn-badge-hover-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            #f2f2f2\n        );\n        color: var-list(\n            var-prefixer(btn-badge-hover-font-color),\n            var-prefixer(gray-5),\n            --tct-gray-d2,\n            --app-gray-d2,\n            #404040\n        );\n    }\n\n    :host(.selected[badge]) &,\n    :host([active][badge]) & {\n        background-color: var-list(\n            --tct-btn-badge-active-background,\n            var-prefixer(btn-badge-active-bg),\n            --comp-btn-primary-background\n        );\n        color: var-list(var-prefixer(btn-badge-active-font-color), --comp-btn-primary-font-color);\n    }\n\n    // #endregion\n    // #region Intent Coin\n\n    &.intent-coin {\n        --tct-avatar-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n        --tct-avatar-height: #{var-list(--tct-btn-coin-height, 44px)};\n        --tct-avatar-width: #{var-list(--tct-btn-coin-width, 44px)};\n        --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n        --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-text, #4d4d4d)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-btn-coin-icon-stroke-secondary, --t-text, #4d4d4d)};\n        --tct-avatar-icon-stroke-primary: #{var-list(--tct-btn-coin-avatar-icon-stroke-primary, --t-text, #4d4d4d)};\n        --tct-avatar-icon-stroke-secondary: #{var-list(--tct-btn-coin-avatar-icon-stroke-secondary, --t-text, #4d4d4d)};\n        --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-text, #4d4d4d)};\n        --tct-icon-stroke-width: #{var-list(--tct-btn-coin-icon-stroke-width, 1px)};\n        --tct-btn-padding: 0;\n        --tct-avatar-border: #{var-list(--tct-btn-coin-border, 0)};\n        --tct-avatar-fallback-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n        --tct-btn-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n        width: auto;\n        backdrop-filter: var(--tct-btn-coin-backdrop-filter);\n        box-shadow: var(--tct-btn-coin-box-shadow);\n    }\n\n    &.intent-coin:hover:not([disabled]),\n    &.intent-coin:hover:focus:not(:active):not([disabled])\n    {\n        --const-double-focus-ring: 0 0 0 2px #ffffff,\n            0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n        --tct-avatar-background: #{var-list(--tct-btn-coin-background, --t-primary-l3, #957ac1)};\n        --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-background, --t-primary-l3, #957ac1)};\n        --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-base, #ffffff)};\n        --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-base, #ffffff)};\n        box-shadow: var-list(--tct-btn-coin-hover-box-shadow, --tct-btn-coin-box-shadow, --const-double-focus-ring);\n    }\n\n    &.intent-coin:focus:not([disabled]) {\n        --const-double-focus-ring: 0;\n        box-shadow: var-list(--tct-btn-coin-focus-box-shadow, --tct-btn-coin-box-shadow, 0);\n    }\n\n    &.intent-coin:focus-visible:not([disabled]) {\n        --const-double-focus-ring: 0 0 0 2px #ffffff,\n            0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n        box-shadow: var-list(\n            --tct-btn-coin-focus-visible-box-shadow,\n            --tct-btn-coin-focus-box-shadow,\n            --tct-btn-coin-box-shadow,\n            --const-double-focus-ring\n        );\n    }\n\n    &.intent-coin:active:not([disabled]) {\n        box-shadow: none;\n    }\n}\n\n.coin-label {\n    color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n    max-width: 100px;\n    text-align: center;\n    @include line-clamp(2);\n}\n\n.coin-label.disabled {\n    color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n    max-width: 100px;\n}\n\n.coin-wrapper {\n    --tct-avatar-display: block;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var-list(--app-scale-1x, 5px);\n    flex-direction: column;\n    width: var(--tct-btn-coin-container-width, 95px);\n\n    // only q2-avatar and coin-label slots are allowed for coin buttons\n    ::slotted(:not(q2-avatar, [slot='coin-label'])) {\n        display: none;\n    }\n\n    .coin-label {\n        color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n        font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n        margin-top: var-list(--tct-btn-coin-gap, --app-scale-2x, 10px);\n        max-width: 100px;\n        text-align: center;\n\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    .coin-label.disabled {\n        color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n        max-width: 100px;\n    }\n}\n// #endregion\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Fragment,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport {\n    getAriaValueFromProp,\n    handleAriaLabel,\n    handleColor,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    handleDeprecationWarning,\n} from 'src/utils';\n\n/**\n * @name Button\n * @category Forms\n * @summary Use for triggering actions including submit, save, cancel, or delete.\n * @slot coin-label - An optional slot to display a custom coin button label.\n */\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n    // #region Own Properties\n\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    iconPosition: 'left' | 'right' | 'only';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Role attribute for better semantic accessibility support\n     */\n    @Prop({ reflect: true })\n    _role: string;\n\n    /**\n     * Displays the component in an active state.\n     *\n     * @info\n     * Only intended for use with the `badge` property.\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    @Prop()\n    ariaControls: string;\n\n    @Prop()\n    ariaExpanded: string;\n\n    @Prop()\n    ariaHasPopup: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    @Prop()\n    ariaPressed: string;\n\n    @Prop()\n    ariaSelected: string;\n\n    /**\n     * Displays the component in a smaller, badge style.\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    badge: boolean;\n\n    /** The component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    color: string; // deprecated but need it to use utils/handleColor\n\n    @Prop()\n    description: string;\n\n    /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    fab: boolean;\n\n    /**\n     * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n     */\n    @Prop({ reflect: true, mutable: true })\n    intent:\n        | 'coin'\n        | 'neutral-text'\n        | 'neutral'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'workflow-primary'\n        | 'workflow-secondary';\n\n    /**\n     * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n     * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n    @Prop({ reflect: true })\n    loading: boolean;\n\n    /**\n     * Defines the size of q2-btn, it renders as default size if not provided.\n     */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    @Prop()\n    tabIndex: number;\n\n    /** The default behavior of the button. */\n    @Prop({ reflect: true })\n    type: string = 'button';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the button is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.primaryBtn = null;\n        this.primaryBtnWrapper = null;\n    }\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        this.handleButtonSize();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click', { capture: true })\n    handleClick(event: Event) {\n        if (this.loading || this.disabled) {\n            event.stopImmediatePropagation();\n            return;\n        }\n        this.tctClick.emit();\n        this.primaryBtn.focus();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('size')\n    sizeObserver() {\n        this.handleButtonSize();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n            ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n                'true',\n                'false',\n                'menu',\n                'listbox',\n                'tree',\n                'grid',\n                'dialog',\n            ]),\n            ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n            ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n            ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n            description: this.description !== undefined ? this.description : undefined,\n            disabled: this.disabled || false,\n            type: this.type,\n            tabindex: this.tabIndex || this.tabIndex === 0 ? this.tabIndex : undefined,\n        };\n    }\n\n    get buttonClasses() {\n        const classes = [];\n        if (this.iconPosition) classes.push(`icon-${this.iconPosition}`);\n        if (this.intent === 'coin') classes.push('intent-coin');\n        if (!!this.block) classes.push('is-block');\n        if (!!this.color) classes.push('has-color');\n        if (!!this.intent) classes.push(`has-intent`);\n        if (!!this.size) classes.push('has-size');\n        if (!!this.active) classes.push('is-active');\n\n        return classes.join(' ');\n    }\n\n    get coinLabelClasses() {\n        const classes = ['coin-label'];\n        if (this.disabled) {\n            classes.push('disabled');\n        }\n\n        return classes.join(' ');\n    }\n\n    handleButtonSize = () => {\n        if (Number(this.size) <= 4) {\n            handleDeprecationWarning(this, 'size', 'prop');\n        }\n    };\n\n    handleIcons = () => {\n        // Only allow one icon in the button\n        const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n            if (acc) element.remove();\n            else acc = element;\n            return acc;\n        }, null);\n\n        const hasIcon = !!icon;\n        const hasLoc = !!this.hostElement.querySelector('q2-loc');\n        const hasText = !!this.hostElement.textContent.trim();\n        const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n        const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n        const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n        let iconPosition;\n        if (hasIconOnly) iconPosition = 'only';\n        else if (hasIconLeft) iconPosition = 'left';\n        else if (hasIconRight) iconPosition = 'right';\n        this.iconPosition = iconPosition;\n    };\n\n    handleSlotChange = () => {\n        this.handleIcons();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderButton() {\n        const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n            this.buttonAttributes;\n        const { iconPosition, loading, badge, label, hideLabel } = this;\n        const renderLoadingSpinner = iconPosition || loading;\n        const isLoadingSpinnerInline = !iconPosition || badge;\n        return (\n            <Fragment>\n                <button\n                    ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n                    aria-expanded={ariaExpanded}\n                    aria-haspopup={ariaHasPopup}\n                    aria-label={hideLabel && loc(label)}\n                    aria-selected={ariaSelected}\n                    aria-pressed={ariaPressed}\n                    disabled={disabled}\n                    type={type}\n                    tabindex={tabindex}\n                    test-id=\"q2BtnInnerButton\"\n                    class={this.buttonClasses}\n                    aria-describedby={!!description ? 'hidden-description' : undefined}\n                    aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n                    role={this._role || undefined}\n                >\n                    <div class=\"slot-container\">\n                        {renderLoadingSpinner && (\n                            <q2-loading\n                                hidden={!loading}\n                                modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n                            />\n                        )}\n                        {this.renderDefaultLabel()}\n                        {this.renderDefaultCoinSlot()}\n                    </div>\n                </button>\n                {this.renderCoinLabel()}\n                {!!description && (\n                    <div\n                        id=\"hidden-description\"\n                        aria-hidden=\"true\"\n                        class=\"sr\"\n                    >\n                        {description}\n                    </div>\n                )}\n            </Fragment>\n        );\n    }\n\n    renderCoinLabel() {\n        if (this.intent !== 'coin' || this.hideLabel) return;\n        return (\n            <div\n                id=\"coin-label\"\n                class={this.coinLabelClasses}\n            >\n                {this.label ? (\n                    loc(this.label)\n                ) : (\n                    <slot\n                        name=\"coin-label\"\n                        onSlotchange={this.handleSlotChange}\n                    />\n                )}\n            </div>\n        );\n    }\n\n    renderDefaultCoinSlot() {\n        if (this.intent !== 'coin') return;\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    renderDefaultLabel() {\n        if (this.intent === 'coin') return;\n        if (!this.hideLabel && this.label) return loc(this.label);\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    render() {\n        return (this.size === 'small' && this.iconPosition !== 'only') || this.intent === 'coin' ? (\n            // wrap only for small sized and coin intent\n            <div\n                class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n                ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n                tabIndex={this.size === 'small' ? -1 : undefined}\n            >\n                {this.renderButton()}\n            </div>\n        ) : (\n            this.renderButton()\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-btn2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-mixins';\n\nq2-loading {\n    --tct-loading-primary-color: currentcolor;\n    --tct-loading-secondary-color: currentcolor;\n    --tct-loading-spinner-size: 24px;\n}\n\n.slot-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var-list(--app-scale-1x, 5px);\n    pointer-events: none;\n\n    :host([loading]) .icon-right & {\n        flex-direction: row-reverse;\n    }\n}\n\n:host([loading]) ::slotted(q2-icon) {\n    display: none;\n}\n:host([loading]:not([loading='false'])) button {\n    pointer-events: none;\n}\n\n:host([block]) button,\n:host([block]) button.icon-only {\n    display: block;\n    width: 100%;\n}\n\n:host {\n    display: inline-block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([block]) {\n    display: block;\n    width: 100%;\n}\n\n::slotted(q2-icon) {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\n:host {\n    --comp-font-weight: 600;\n    --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 4px)};\n    --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n    --comp-background-alternative: #ebf8ff;\n\n    .btn-height-wrapper {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: var(--app-scale-1x, 5px);\n        &:active {\n            box-shadow: none;\n        }\n    }\n}\n\nbutton {\n    margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n    padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n    display: inline-block;\n    width: 100%;\n    hyphens: auto;\n    border: var(--tct-btn-border);\n    background: transparent;\n    box-shadow: none;\n    border-radius: 0;\n    font-weight: 400;\n    color: inherit;\n    cursor: pointer;\n    transition: var(--comp-btn-tween);\n    transition-property: background, color, box-shadow, fill, border-color, border-width;\n    outline: 0;\n    min-height: var(--tct-btn-min-height, none);\n\n    &:disabled {\n        opacity: var-list(var-prefixer(btn-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n\n    &.has-color,\n    &.has-intent {\n        font-size: var-list(var-prefixer(btn-font-size), inherit);\n        border-radius: var-list(--tct-btn-border-radius, --comp-border-radius);\n        text-transform: var(--tct-btn-text-transform);\n        letter-spacing: var(--tct-btn-letter-spacing, inherit);\n    }\n\n    &.has-color:not(.has-size),\n    &.has-intent:not(.has-size) {\n        padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n    }\n\n    &:not(.has-size) {\n        &:not(.icon-only) {\n            ::slotted(q2-icon) {\n                --tct-icon-size: var(--tct-btn-icon-size, 18px);\n            }\n        }\n    }\n\n    // #region Size\n\n    :host([size='1']) & {\n        padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    }\n    :host([size='2']) & {\n        padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n    }\n    :host([size='3']) & {\n        padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n    }\n    :host([size='4x']) & {\n        padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\n    }\n    :host([size='4']) & {\n        padding: var-list(--tct-scale-6x, --app-scale-6x, 30px);\n    }\n\n    :host([size='small']) & {\n        padding: var-list(var-prefixer(btn-padding-size-small), '4px 16px');\n        font-size: var-list(var-prefixer(btn-font-size-small), 14px);\n        min-height: var(--tct-btn-min-height-small, none);\n        &:not(.icon-only) {\n            ::slotted(q2-icon) {\n                --tct-icon-size: var(--tct-btn-icon-size-small, 16px);\n            }\n        }\n    }\n\n    :host([size='medium']) & {\n        padding: var-list(var-prefixer(btn-padding-size-medium), '12px 24px');\n        font-size: var-list(var-prefixer(btn-font-size-medium), 16px);\n        min-height: var(--tct-btn-min-height-medium, none);\n        &:not(.icon-only) {\n            ::slotted(q2-icon) {\n                --tct-icon-size: var(--tct-btn-icon-size-medium, unset);\n            }\n        }\n    }\n\n    :host([size='large']) & {\n        padding: var-list(var-prefixer(btn-padding-size-large), '16px 32px');\n        font-size: var-list(var-prefixer(btn-font-size-large), 20px);\n        min-height: var(--tct-btn-min-height-large, none);\n        &:not(.icon-only) {\n            ::slotted(q2-icon) {\n                --tct-icon-size: var(--tct-btn-icon-size-large, unset);\n            }\n        }\n    }\n\n    // #endregion\n    // #region Intent\n\n    :host(:not([intent])) &:focus-visible {\n        --comp-double-focus-ring-fallback: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc;\n        box-shadow: var-list(--tct-btn-default-double-focus-visible-ring, --const-double-focus-ring, --comp-double-focus-ring-fallback);\n    }\n\n    :host([color='primary']) &,\n    :host([intent='workflow-primary']) & {\n        backdrop-filter: var(--tct-btn-primary-backdrop-filter);\n        --comp-background: #{var-list(\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        --comp-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-primary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        // different background for active\n        --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(primary, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(primary, focus-visible, --const-focus-color, --comp-font-color, null);\n        @include btn-intent(primary);\n        @include btn-icon-color(primary, --comp-font-color);\n    }\n\n    :host([color='secondary']) &,\n    :host([intent='workflow-secondary']) & {\n        backdrop-filter: var(--tct-btn-secondary-backdrop-filter);\n        --comp-background: #{var-list(\n                --tct-btn-secondary-background,\n                --tct-btn-secondary-bg,\n                --t-button-default-bg,\n                #cccccc\n            )};\n        --comp-hover-background: #{var-list(\n                --tct-btn-secondary-hover-background,\n                --tct-btn-secondary-hover-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-hover-font-color: var(--app-white, #ffffff);\n        --comp-box-shadow: #{var-list(--tct-btn-secondary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-secondary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        @include btn-ring(secondary, hover, --comp-hover-background, --app-white, null);\n        @include btn-ring(secondary, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(secondary, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(secondary, focus-visible, --const-focus-color, --app-white, null);\n        @include btn-intent(secondary);\n        @include btn-icon-color(secondary, --comp-font-color);\n    }\n\n    :host([intent='workflow-destroy']) & {\n        backdrop-filter: var(--tct-btn-destroy-backdrop-filter);\n        --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #d20a0a)};\n        --comp-font-color: #{var-list(--tct-btn-destroy-font-color, --app-white)};\n        --comp-box-shadow: #{var-list(--tct-btn-destroy-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-destroy-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        @include btn-ring(destroy, hover, --comp-background, --comp-font-color, null);\n        @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(destroy, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-font-color, null);\n        @include btn-intent(destroy);\n        @include btn-icon-color(destroy, --comp-font-color);\n    }\n\n    :host([intent='workflow-escape']) & {\n        backdrop-filter: var(--tct-btn-escape-backdrop-filter);\n        --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n        --comp-font-color: #{var-list(\n                --tct-btn-escape-font-color,\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-box-shadow: #{var-list(--tct-btn-escape-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-hover-box-shadow: #{var-list(--tct-btn-escape-hover-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-escape-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        // different background for hover/active/focus\n        --comp-hover-background: #{var-list(--tct-btn-escape-hover-background, --comp-background-alternative)};\n        --comp-active-background: #{var-list(--tct-btn-escape-active-background, --comp-background-alternative)};\n        --comp-focus-background: #{var-list(--tct-btn-escape-focus-background, --comp-background-alternative)};\n        @include btn-ring(escape, hover, --comp-font-color, --comp-background, null);\n        @include btn-ring(escape, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(escape, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(escape, focus-visible, --const-focus-color, --comp-background, null);\n        @include btn-intent(escape);\n        @include btn-icon-color(escape, --comp-font-color);\n    }\n\n    :host([intent='neutral']) & {\n        backdrop-filter: var(--tct-btn-neutral-backdrop-filter);\n        --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n        --comp-font-color: #{var-list(\n                --tct-btn-neutral-font-color,\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-box-shadow: #{var-list(--tct-btn-neutral-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-focus-box-shadow: #{var-list(--tct-btn-neutral-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n        // use outline instead border: because on/off border makes the button shaking on hover/focus/active\n        --comp-border-width: 1px;\n        --comp-border-style: solid;\n        --comp-border-color: var(--comp-font-color);\n        @include btn-ring(neutral, hover, --comp-font-color, --app-white, null);\n        @include btn-ring(neutral, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral, focus-visible, --const-focus-color, --comp-background, null);\n        @include btn-intent(neutral);\n        @include btn-icon-color(neutral, --comp-font-color);\n    }\n\n    :host([intent='neutral-text']) & {\n        backdrop-filter: var(--tct-btn-neutral-text-backdrop-filter);\n        --comp-background: #{var-list(\n                --tct-btn-neutral-text-background,\n                --tct-btn-neutral-text-bg,\n                --app-white,\n                #ffffff\n            )};\n        --comp-font-color: #{var-list(\n                --tct-btn-neutral-text-font-color,\n                --tct-btn-primary-background,\n                --tct-btn-primary-bg,\n                --t-a11y-active-gray-color-AA,\n                #404040\n            )};\n        --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);\n        --comp-hover-text-decoration: underline;\n        // different background for focus\n        --comp-focus-background: #{var-list(--tct-btn-neutral-text-focus-background, --comp-background-alternative)};\n        @include btn-ring(neutral-text, hover, --comp-font-color, --comp-background, null);\n        @include btn-ring(neutral-text, active, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral-text, disabled, transparent, transparent, --comp-box-shadow);\n        @include btn-ring(neutral-text, focus-visible, --const-focus-color, --app-white, null);\n        @include btn-intent(neutral-text);\n        @include btn-icon-color(neutral-text, --comp-font-color);\n    }\n\n    // #endregion\n    // #region Icon Only\n\n    &.icon-only {\n        width: var-list(var-prefixer(btn-icon-width), 44px);\n        height: var-list(var-prefixer(btn-icon-height), 44px);\n        min-height: var-list(var-prefixer(btn-icon-height), 44px);\n        border-radius: var-list(var-prefixer(btn-icon-border-radius), --tct-btn-border-radius, 0);\n        padding: var(--tct-btn-icon-padding, 0px);\n\n        ::slotted(q2-icon) {\n            --tct-icon-size: unset;\n        }\n\n        &.has-size {\n            padding: var(--tct-btn-icon-padding, 0px);\n        }\n\n        &.has-intent {\n            padding: var(--tct-btn-icon-padding, 10px);\n            border-radius: var-list(--tct-btn-icon-border-radius, --comp-border-radius);\n        }\n    }\n\n    &:not(.has-color):not(.has-intent),\n    &.icon-only {\n        &:hover,\n        &:focus {\n            background: var-list(\n                --tct-btn-icon-hover-background,\n                var-prefixer(btn-icon-hover-bg),\n                var-prefixer(gray-13),\n                --tct-gray-l3,\n                --app-gray-l3,\n                #f2f2f2\n            );\n        }\n    }\n\n    &:not(.has-intent).is-active.icon-only {\n        background-color: var-list(\n            --tct-btn-icon-active-background,\n            var-prefixer(btn-icon-active-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            #f2f2f2\n        );\n    }\n\n    &:not(.has-intent).icon-only:hover *,\n    &:not(.has-intent).icon-only:focus *,\n    &:not(.has-intent).is-active.icon-only * {\n        color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n    }\n\n    // #endregion\n    // #region Plain\n\n    &:not(.has-intent):not(.icon-only) {\n        height: var-list(--tct-btn-height, auto);\n        padding-inline: var-list(--tct-btn-padding-inline, 0);\n        font-weight: var-list(--tct-btn-font-weight);\n        border-radius: var-list(--tct-btn-border-radius, 0);\n\n        &:hover,\n        &:focus {\n            background: var(--tct-btn-hover-background);\n        }\n    }\n\n    // #endregion\n    // #region Badges (Deprecated)\n\n    :host([badge]) & {\n        padding: var-list(var-prefixer(btn-badge-padding), unquote('2px 5px'));\n        font-size: var-list(var-prefixer(btn-badge-font-size), var-prefixer(btn-font-size), inherit);\n        border-radius: var-list(\n            var-prefixer(btn-badge-border-radius),\n            --tct-border-radius-1,\n            --app-border-radius-1,\n            4px\n        );\n        background-color: var-list(--tct-btn-badge-background, var-prefixer(btn-badge-bg), transparent);\n        color: var-list(var-prefixer(btn-badge-font-color), inherit);\n\n        ::slotted(q2-icon) {\n            --tct-icon-size: 1em;\n        }\n    }\n\n    :host([badge]:hover) &:enabled {\n        background-color: var-list(\n            --tct-btn-badge-hover-background,\n            var-prefixer(btn-badge-hover-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            #f2f2f2\n        );\n        color: var-list(\n            var-prefixer(btn-badge-hover-font-color),\n            var-prefixer(gray-5),\n            --tct-gray-d2,\n            --app-gray-d2,\n            #404040\n        );\n    }\n\n    :host(.selected[badge]) &,\n    :host([active][badge]) & {\n        background-color: var-list(\n            --tct-btn-badge-active-background,\n            var-prefixer(btn-badge-active-bg),\n            --comp-btn-primary-background\n        );\n        color: var-list(var-prefixer(btn-badge-active-font-color), --comp-btn-primary-font-color);\n    }\n\n    // #endregion\n    // #region Intent Coin\n\n    &.intent-coin {\n        --tct-avatar-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n        --tct-avatar-height: #{var-list(--tct-btn-coin-height, 44px)};\n        --tct-avatar-width: #{var-list(--tct-btn-coin-width, 44px)};\n        --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n        --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-text, #4d4d4d)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-btn-coin-icon-stroke-secondary, --t-text, #4d4d4d)};\n        --tct-avatar-icon-stroke-primary: #{var-list(--tct-btn-coin-avatar-icon-stroke-primary, --t-text, #4d4d4d)};\n        --tct-avatar-icon-stroke-secondary: #{var-list(--tct-btn-coin-avatar-icon-stroke-secondary, --t-text, #4d4d4d)};\n        --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-text, #4d4d4d)};\n        --tct-icon-stroke-width: #{var-list(--tct-btn-coin-icon-stroke-width, 1px)};\n        --tct-btn-padding: 0;\n        --tct-avatar-border: #{var-list(--tct-btn-coin-border, 0)};\n        --tct-avatar-fallback-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n        --tct-btn-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n        width: auto;\n        backdrop-filter: var(--tct-btn-coin-backdrop-filter);\n        box-shadow: var(--tct-btn-coin-box-shadow);\n    }\n\n    &.intent-coin:hover:not([disabled]),\n    &.intent-coin:hover:focus:not(:active):not([disabled])\n    {\n        --const-double-focus-ring: 0 0 0 2px #ffffff,\n            0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n        --tct-avatar-background: #{var-list(--tct-btn-coin-hover-background, --tct-btn-coin-background, --t-primary-l3, #957ac1)};\n        --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-hover-background, --tct-btn-coin-background, --t-primary-l3, #957ac1)};\n        --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-base, #ffffff)};\n        --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-base, #ffffff)};\n        box-shadow: var-list(--tct-btn-coin-hover-box-shadow, --tct-btn-coin-box-shadow, --const-double-focus-ring);\n    }\n\n    &.intent-coin:focus:not([disabled]) {\n        --const-double-focus-ring: 0;\n        box-shadow: var-list(--tct-btn-coin-focus-box-shadow, --tct-btn-coin-box-shadow, 0);\n    }\n\n    &.intent-coin:focus-visible:not([disabled]) {\n        --const-double-focus-ring: 0 0 0 2px #ffffff,\n            0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n        box-shadow: var-list(\n            --tct-btn-coin-focus-visible-box-shadow,\n            --tct-btn-coin-focus-box-shadow,\n            --tct-btn-coin-box-shadow,\n            --const-double-focus-ring\n        );\n    }\n\n    &.intent-coin:focus:active:not([disabled]) {\n        --tct-avatar-background: var(--tct-btn-coin-active-background);\n        --tct-avatar-fallback-background: var(--tct-btn-coin-active-background);\n        box-shadow: none;\n    }\n}\n\n.coin-label {\n    color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n    max-width: 100px;\n    text-align: center;\n    @include line-clamp(2);\n}\n\n.coin-label.disabled {\n    color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n    max-width: 100px;\n}\n\n.coin-wrapper {\n    --tct-avatar-display: block;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var-list(--app-scale-1x, 5px);\n    flex-direction: column;\n    width: var(--tct-btn-coin-container-width, 95px);\n\n    // only q2-avatar and coin-label slots are allowed for coin buttons\n    ::slotted(:not(q2-avatar, [slot='coin-label'])) {\n        display: none;\n    }\n\n    .coin-label {\n        color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n        font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n        margin-top: var-list(--tct-btn-coin-gap, --app-scale-2x, 10px);\n        max-width: 100px;\n        text-align: center;\n\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    .coin-label.disabled {\n        color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n        max-width: 100px;\n    }\n}\n// #endregion\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Fragment,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport {\n    getAriaValueFromProp,\n    handleAriaLabel,\n    handleColor,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    handleDeprecationWarning,\n} from 'src/utils';\n\n/**\n * @name Button\n * @category Forms\n * @summary Use for triggering actions including submit, save, cancel, or delete.\n * @slot coin-label - An optional slot to display a custom coin button label.\n */\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n    // #region Own Properties\n\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    iconPosition: 'left' | 'right' | 'only';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Role attribute for better semantic accessibility support\n     */\n    @Prop({ reflect: true })\n    _role: string;\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\n\n    /**\n     * Displays the component in an active state.\n     *\n     * @info\n     * Only intended for use with the `badge` property.\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    @Prop()\n    ariaControls: string;\n\n    @Prop()\n    ariaExpanded: string;\n\n    @Prop()\n    ariaHasPopup: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    @Prop()\n    ariaPressed: string;\n\n    @Prop()\n    ariaSelected: string;\n\n    /**\n     * Displays the component in a smaller, badge style.\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    badge: boolean;\n\n    /** The component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    color: string; // deprecated but need it to use utils/handleColor\n\n    @Prop()\n    description: string;\n\n    /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    fab: boolean;\n\n    /**\n     * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n     */\n    @Prop({ reflect: true, mutable: true })\n    intent:\n        | 'coin'\n        | 'neutral-text'\n        | 'neutral'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'workflow-primary'\n        | 'workflow-secondary';\n\n    /**\n     * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n     * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n    @Prop({ reflect: true })\n    loading: boolean;\n\n    /**\n     * Defines the size of q2-btn, it renders as default size if not provided.\n     */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    @Prop()\n    tabIndex: number;\n\n    /** The default behavior of the button. */\n    @Prop({ reflect: true })\n    type: string = 'button';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the button is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.primaryBtn = null;\n        this.primaryBtnWrapper = null;\n    }\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        this.handleButtonSize();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click', { capture: true })\n    handleClick(event: Event) {\n        if (this.loading || this.disabled) {\n            event.stopImmediatePropagation();\n            return;\n        }\n        this.tctClick.emit();\n        this.primaryBtn?.focus();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn?.focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('size')\n    sizeObserver() {\n        this.handleButtonSize();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n            ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n                'true',\n                'false',\n                'menu',\n                'listbox',\n                'tree',\n                'grid',\n                'dialog',\n            ]),\n            ariaLabel: this.composedAriaLabel,\n            ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n            ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n            description: this.description !== undefined ? this.description : undefined,\n            disabled: this.disabled || false,\n            type: this.type,\n            tabindex: this.tabIndex || this.tabIndex === 0 ? this.tabIndex : undefined,\n        };\n    }\n\n    get buttonClasses() {\n        const classes = [];\n        if (this.iconPosition) classes.push(`icon-${this.iconPosition}`);\n        if (this.intent === 'coin') classes.push('intent-coin');\n        if (!!this.block) classes.push('is-block');\n        if (!!this.color) classes.push('has-color');\n        if (!!this.intent) classes.push(`has-intent`);\n        if (!!this.size) classes.push('has-size');\n        if (!!this.active) classes.push('is-active');\n\n        return classes.join(' ');\n    }\n\n    get coinLabelClasses() {\n        const classes = ['coin-label'];\n        if (this.disabled) {\n            classes.push('disabled');\n        }\n\n        return classes.join(' ');\n    }\n\n    get composedAriaLabel(): string | undefined {\n        const baseText =\n            this.label && this.hideLabel\n                ? loc(this.label)\n                : this.label || this.hostElement.textContent.trim() || undefined;\n\n        if (!this._tooltip && !baseText) return undefined;\n        if (!this._tooltip) return this.hideLabel ? baseText : undefined;\n        if (!baseText) return this._tooltip;\n        return `${baseText} - ${this._tooltip}`;\n    }\n\n    handleButtonSize = () => {\n        if (Number(this.size) <= 4) {\n            handleDeprecationWarning(this, 'size', 'prop');\n        }\n    };\n\n    handleIcons = () => {\n        // Only allow one icon in the button\n        const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n            if (acc) element.remove();\n            else acc = element;\n            return acc;\n        }, null);\n\n        const hasIcon = !!icon;\n        const hasLoc = !!this.hostElement.querySelector('q2-loc');\n        const hasText = !!this.hostElement.textContent.trim();\n        const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n        const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n        const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n        let iconPosition;\n        if (hasIconOnly) iconPosition = 'only';\n        else if (hasIconLeft) iconPosition = 'left';\n        else if (hasIconRight) iconPosition = 'right';\n        this.iconPosition = iconPosition;\n    };\n\n    handleSlotChange = () => {\n        this.handleIcons();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderButton() {\n        const {\n            ariaExpanded,\n            ariaHasPopup,\n            ariaLabel,\n            ariaSelected,\n            ariaPressed,\n            description,\n            disabled,\n            type,\n            tabindex,\n        } = this.buttonAttributes;\n        const { iconPosition, loading, badge, hideLabel } = this;\n        const renderLoadingSpinner = iconPosition || loading;\n        const isLoadingSpinnerInline = !iconPosition || badge;\n        return (\n            <Fragment>\n                <button\n                    ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n                    aria-expanded={ariaExpanded}\n                    aria-haspopup={ariaHasPopup}\n                    aria-label={ariaLabel}\n                    aria-selected={ariaSelected}\n                    aria-pressed={ariaPressed}\n                    disabled={disabled}\n                    type={type}\n                    tabindex={tabindex}\n                    test-id=\"q2BtnInnerButton\"\n                    class={this.buttonClasses}\n                    aria-describedby={!!description ? 'hidden-description' : undefined}\n                    aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n                    role={this._role || undefined}\n                >\n                    <div class=\"slot-container\">\n                        {renderLoadingSpinner && (\n                            <q2-loading\n                                hidden={!loading}\n                                modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n                            />\n                        )}\n                        {this.renderDefaultLabel()}\n                        {this.renderDefaultCoinSlot()}\n                    </div>\n                </button>\n                {this.renderCoinLabel()}\n                {!!description && (\n                    <div\n                        id=\"hidden-description\"\n                        aria-hidden=\"true\"\n                        class=\"sr\"\n                    >\n                        {description}\n                    </div>\n                )}\n            </Fragment>\n        );\n    }\n\n    renderCoinLabel() {\n        if (this.intent !== 'coin' || this.hideLabel) return;\n        return (\n            <div\n                id=\"coin-label\"\n                class={this.coinLabelClasses}\n            >\n                {this.label ? (\n                    loc(this.label)\n                ) : (\n                    <slot\n                        name=\"coin-label\"\n                        onSlotchange={this.handleSlotChange}\n                    />\n                )}\n            </div>\n        );\n    }\n\n    renderDefaultCoinSlot() {\n        if (this.intent !== 'coin') return;\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    renderDefaultLabel() {\n        if (this.intent === 'coin') return;\n        if (!this.hideLabel && this.label) return loc(this.label);\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    render() {\n        return (this.size === 'small' && this.iconPosition !== 'only') || this.intent === 'coin' ? (\n            // wrap only for small sized and coin intent\n            <div\n                class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n                ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n                tabIndex={this.size === 'small' ? -1 : undefined}\n            >\n                {this.renderButton()}\n            </div>\n        ) : (\n            this.renderButton()\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}