q2-tecton-elements 1.67.2 → 1.68.0

package/dist/cjs/q2-avatar.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-avatar.entry.cjs.js","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"],"names":["h"],"mappings":"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"}
+{"version":3,"file":"q2-avatar.entry.cjs.js","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@import './variables';\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"],"names":["h"],"mappings":"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"}

package/dist/cjs/q2-badge.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 
 const q2BadgeCss = "*{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}:host{display:inline-block;line-height:0;--comp-badge-font-size:var(--app-font-size-small, 12px);--comp-badge-large-font-size:var(--app-font-size-medium, 14px);--comp-badge-background:var(--tct-badge-background, var(--t-a11y-gray-color-AAA, #6c6c6c));--comp-badge-color:var(--tct-badge-color, var(--t-base, #ffffff))}:host:host([status=info]){--comp-badge-background:var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));--comp-badge-color:var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff))}:host:host([status=alert]){--comp-badge-background:var(--tct-badge-alert-background, var(--const-stoplight-alert, #d20a0a));--comp-badge-color:var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff))}:host:host([status=warning]){--comp-badge-background:var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));--comp-badge-color:var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #ffffff))}:host:host([status=success]){--comp-badge-background:var(--tct-badge-success-background, var(--const-stoplight-success, #0e8a00));--comp-badge-color:var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff))}:host:host([theme=primary]){--comp-badge-background:var(--tct-badge-primary-background, var(--t-primary, #6a4a9e));--comp-badge-color:var(--tct-badge-primary-color, var(--t-primary-text, #ffffff))}:host:host([theme=secondary]){--comp-badge-background:var(--tct-badge-secondary-background, var(--t-secondary, #b3c2cc));--comp-badge-color:var(--tct-badge-secondary-color, var(--t-secondary-text, #141414))}:host:host([theme=tertiary]){--comp-badge-background:var(--tct-badge-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-badge-color:var(--tct-badge-tertiary-color, var(--t-tertiary-text, #141414))}.badge-container{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:var(--tct-badge-height, 16px);min-width:var(--tct-badge-min-width, 16px);text-align:center;padding:var(--tct-badge-padding, 0 5px);color:var(--comp-badge-color);background:var(--comp-badge-background);border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px));border:var(--tct-badge-border);backdrop-filter:var(--tct-badge-backdrop-filter)}.badge-container .badge-text{font-size:var(--comp-badge-font-size);line-height:var(--tct-badge-line-height, 14px)}.badge-container .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-font-size) !important}.badge-container.size-large{height:var(--tct-badge-large-height, 22px);min-width:var(--tct-badge-large-min-width, 22px);border-radius:var(--tct-badge-large-border-radius, 11px);padding:var(--tct-badge-large-padding, 0 6px)}.badge-container.size-large .badge-text{font-size:var(--comp-badge-large-font-size);line-height:var(--tct-badge-large-line-height, 20px)}.badge-container.size-large .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-large-font-size) !important}.empty-variant{min-width:unset;width:16px;height:16px;padding:0}.empty-variant.size-large{min-width:unset;width:22px;height:22px;padding:0}";
 

package/dist/cjs/q2-badge.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-badge.entry.cjs.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,itHAAitH;;MCSvtH,OAAO,GAAA,MAAA;;;;;;AAwChB;;;AAGG;AAEH,IAAA,MAAM,cAAc,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;;aACvC;YACH,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;;;;;AAO7D,IAAA,IAAI,YAAY,GAAA;AACZ,QAAA,MAAM,UAAU,GAAG,CAAC,iBAAiB,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;AACtE,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;AACxD,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG/B,IAAA,IAAI,SAAS,GAAA;AACT,QAAA,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,IAAI;AAC7C,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK;QACtB,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACtC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAErB,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,YAAA,KAAK,GAAGA,WAAG,CAAC,KAAK,CAAC;YAClB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;QAGtC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;YAC9C,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,iBAAiB,CAAC;;QAGhD,MAAM,SAAS,GAAG,SAAS,GAAG,iBAAiB,GAAG,CAAC;AACnD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC;AAC/C,QAAA,IAAI,QAAQ,GAAG,WAAW,EAAE;AACxB,YAAA,OAAO,WAAW,CAAC,cAAc,EAAE,GAAG,GAAG;;aACtC;AACH,YAAA,OAAO,QAAQ,CAAC,cAAc,EAAE;;;AAIxC,IAAA,IAAI,iBAAiB,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;;AAG7C,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE;;;;IAM9C,gBAAgB,GAAA;AACZ,QAAA,OAAOC,iBAAK,KAAK,EAAE,IAAI,CAAC,YAAY,GAAQ;;IAGhD,mBAAmB,GAAA;QACf,QACIA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EACzBA,OAAO,CAAA,OAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,OAAO,GAAGA,qBAAa,GAAG,IAAI,CAAC,SAAS,CAAS,CAC/E;;IAId,MAAM,GAAA;QACF,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE;;;;;;;;","names":["loc","h"],"sources":["src/components/q2-badge/q2-badge.scss?tag=q2-badge&encapsulation=shadow","src/components/q2-badge/q2-badge.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    line-height: 0;\n\n    --comp-badge-font-size: var(--app-font-size-small, 12px);\n    --comp-badge-large-font-size: var(--app-font-size-medium, 14px);\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-a11y-gray-color-AAA, #6c6c6c)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n\n    &:host([status='info']) {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n    }\n\n    &:host([status='alert']) {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #d20a0a)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n    }\n\n    &:host([status='warning']) {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #ffffff)};\n    }\n\n    &:host([status='success']) {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #0e8a00)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n    }\n\n    &:host([theme='primary']) {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #6a4a9e)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n    }\n\n    &:host([theme='secondary']) {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #141414)};\n    }\n\n    &:host([theme='tertiary']) {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.badge-container {\n    white-space: nowrap;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--tct-badge-height, 16px);\n    min-width: var(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var(--tct-badge-padding, unquote('0 5px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n    border: var(--tct-badge-border);\n    backdrop-filter: var(--tct-badge-backdrop-filter);\n    .badge-text {\n        font-size: var(--comp-badge-font-size);\n        line-height: var-list(--tct-badge-line-height, 14px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-font-size) !important;\n        }\n    }\n}\n\n.badge-container.size-large {\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n\n    .badge-text {\n        font-size: var(--comp-badge-large-font-size);\n        line-height: var-list(--tct-badge-large-line-height, 20px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-large-font-size) !important;\n        }\n    }\n}\n\n.empty-variant {\n    min-width: unset;\n    width: 16px;\n    height: 16px;\n    padding: 0;\n\n    &.size-large {\n        min-width: unset;\n        width: 22px;\n        height: 22px;\n        padding: 0;\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Method } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n/**\n * @name Badge\n * @category Display\n * @summary Use for displaying counts, statuses, or indicators on other elements.\n */\n@Component({ tag: 'q2-badge', shadow: true, styleUrl: 'q2-badge.scss' })\nexport class Q2Badge implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The number of characters to show. A maximum limit of 18 characters is acceptable. */\n    @Prop({ reflect: true })\n    maxLength: number | undefined;\n\n    /** The size of the badge. */\n    @Prop({ reflect: true })\n    size: 'default' | 'large' | undefined;\n\n    /** The stoplight color of the element when `theme` is not present. */\n    @Prop({ reflect: true })\n    status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    /**\n     * The color of the badge when in the active state.\n     * The `theme` has higher priority than `status`.\n     */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n\n    /**\n     * What to display in the badge. Negative numbers will be shown as positive.\n     * @info\n     * `q2-badge` also has limited support for slotted HTML elements.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    value: number | string;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.\n     * @testonly\n     */\n    @Method()\n    async getTextContent(): Promise<string> {\n        if (this.hasSlot) {\n            return this.hostElement.textContent.trim();\n        } else {\n            return this.hostElement.shadowRoot.textContent.trim();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeClasses(): string {\n        const badgeClass = ['badge-container'];\n        if (!this.badgeText && !this.hasSlot) badgeClass.push('empty-variant');\n        if (this.size === 'large') badgeClass.push('size-large');\n        return badgeClass.join(' ');\n    }\n\n    get badgeText(): string {\n        const { maxLength, computedMaxLength } = this;\n        let value = this.value;\n        let numValue = Math.abs(Number(value));\n        if (!value) return '';\n\n        if (typeof value === 'string') {\n            value = loc(value);\n            numValue = Math.abs(Number(value));\n        }\n\n        if (typeof value === 'string' && isNaN(numValue)) {\n            return value.substring(0, computedMaxLength);\n        }\n\n        const maxNumber = maxLength ? computedMaxLength : 2;\n        const maxNumValue = Math.pow(10, maxNumber) - 1;\n        if (numValue > maxNumValue) {\n            return maxNumValue.toLocaleString() + '+';\n        } else {\n            return numValue.toLocaleString();\n        }\n    }\n\n    get computedMaxLength(): number {\n        return Math.min(18, this.maxLength || 18);\n    }\n\n    get hasSlot(): boolean {\n        return !!this.hostElement.innerHTML.trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderEmptyBadge() {\n        return <div class={this.badgeClasses}></div>;\n    }\n\n    renderStandardBadge() {\n        return (\n            <div class={this.badgeClasses}>\n                <small class=\"badge-text\">{this.hasSlot ? <slot></slot> : this.badgeText}</small>\n            </div>\n        );\n    }\n\n    render() {\n        return !this.badgeText && !this.hasSlot ? this.renderEmptyBadge() : this.renderStandardBadge();\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-badge.entry.cjs.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,itHAAitH;;MCSvtH,OAAO,GAAA,MAAA;;;;;;AAwChB;;;AAGG;AAEH,IAAA,MAAM,cAAc,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;;aACvC;YACH,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;;;;;AAO7D,IAAA,IAAI,YAAY,GAAA;AACZ,QAAA,MAAM,UAAU,GAAG,CAAC,iBAAiB,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;AACtE,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;AACxD,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG/B,IAAA,IAAI,SAAS,GAAA;AACT,QAAA,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,IAAI;AAC7C,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK;QACtB,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACtC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAErB,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,YAAA,KAAK,GAAGA,WAAG,CAAC,KAAK,CAAC;YAClB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;QAGtC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;YAC9C,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,iBAAiB,CAAC;;QAGhD,MAAM,SAAS,GAAG,SAAS,GAAG,iBAAiB,GAAG,CAAC;AACnD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC;AAC/C,QAAA,IAAI,QAAQ,GAAG,WAAW,EAAE;AACxB,YAAA,OAAO,WAAW,CAAC,cAAc,EAAE,GAAG,GAAG;;aACtC;AACH,YAAA,OAAO,QAAQ,CAAC,cAAc,EAAE;;;AAIxC,IAAA,IAAI,iBAAiB,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;;AAG7C,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE;;;;IAM9C,gBAAgB,GAAA;AACZ,QAAA,OAAOC,iBAAK,KAAK,EAAE,IAAI,CAAC,YAAY,GAAQ;;IAGhD,mBAAmB,GAAA;QACf,QACIA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EACzBA,OAAO,CAAA,OAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,OAAO,GAAGA,qBAAa,GAAG,IAAI,CAAC,SAAS,CAAS,CAC/E;;IAId,MAAM,GAAA;QACF,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE;;;;;;;;","names":["loc","h"],"sources":["src/components/q2-badge/q2-badge.scss?tag=q2-badge&encapsulation=shadow","src/components/q2-badge/q2-badge.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: inline-block;\n    line-height: 0;\n\n    --comp-badge-font-size: var(--app-font-size-small, 12px);\n    --comp-badge-large-font-size: var(--app-font-size-medium, 14px);\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-a11y-gray-color-AAA, #6c6c6c)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n\n    &:host([status='info']) {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n    }\n\n    &:host([status='alert']) {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #d20a0a)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n    }\n\n    &:host([status='warning']) {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #ffffff)};\n    }\n\n    &:host([status='success']) {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #0e8a00)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n    }\n\n    &:host([theme='primary']) {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #6a4a9e)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n    }\n\n    &:host([theme='secondary']) {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #141414)};\n    }\n\n    &:host([theme='tertiary']) {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.badge-container {\n    white-space: nowrap;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--tct-badge-height, 16px);\n    min-width: var(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var(--tct-badge-padding, unquote('0 5px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n    border: var(--tct-badge-border);\n    backdrop-filter: var(--tct-badge-backdrop-filter);\n    .badge-text {\n        font-size: var(--comp-badge-font-size);\n        line-height: var-list(--tct-badge-line-height, 14px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-font-size) !important;\n        }\n    }\n}\n\n.badge-container.size-large {\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n\n    .badge-text {\n        font-size: var(--comp-badge-large-font-size);\n        line-height: var-list(--tct-badge-large-line-height, 20px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-large-font-size) !important;\n        }\n    }\n}\n\n.empty-variant {\n    min-width: unset;\n    width: 16px;\n    height: 16px;\n    padding: 0;\n\n    &.size-large {\n        min-width: unset;\n        width: 22px;\n        height: 22px;\n        padding: 0;\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Method } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n/**\n * @name Badge\n * @category Display\n * @summary Use for displaying counts, statuses, or indicators on other elements.\n */\n@Component({ tag: 'q2-badge', shadow: true, styleUrl: 'q2-badge.scss' })\nexport class Q2Badge implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The number of characters to show. A maximum limit of 18 characters is acceptable. */\n    @Prop({ reflect: true })\n    maxLength: number | undefined;\n\n    /** The size of the badge. */\n    @Prop({ reflect: true })\n    size: 'default' | 'large' | undefined;\n\n    /** The stoplight color of the element when `theme` is not present. */\n    @Prop({ reflect: true })\n    status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    /**\n     * The color of the badge when in the active state.\n     * The `theme` has higher priority than `status`.\n     */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n\n    /**\n     * What to display in the badge. Negative numbers will be shown as positive.\n     * @info\n     * `q2-badge` also has limited support for slotted HTML elements.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    value: number | string;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.\n     * @testonly\n     */\n    @Method()\n    async getTextContent(): Promise<string> {\n        if (this.hasSlot) {\n            return this.hostElement.textContent.trim();\n        } else {\n            return this.hostElement.shadowRoot.textContent.trim();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeClasses(): string {\n        const badgeClass = ['badge-container'];\n        if (!this.badgeText && !this.hasSlot) badgeClass.push('empty-variant');\n        if (this.size === 'large') badgeClass.push('size-large');\n        return badgeClass.join(' ');\n    }\n\n    get badgeText(): string {\n        const { maxLength, computedMaxLength } = this;\n        let value = this.value;\n        let numValue = Math.abs(Number(value));\n        if (!value) return '';\n\n        if (typeof value === 'string') {\n            value = loc(value);\n            numValue = Math.abs(Number(value));\n        }\n\n        if (typeof value === 'string' && isNaN(numValue)) {\n            return value.substring(0, computedMaxLength);\n        }\n\n        const maxNumber = maxLength ? computedMaxLength : 2;\n        const maxNumValue = Math.pow(10, maxNumber) - 1;\n        if (numValue > maxNumValue) {\n            return maxNumValue.toLocaleString() + '+';\n        } else {\n            return numValue.toLocaleString();\n        }\n    }\n\n    get computedMaxLength(): number {\n        return Math.min(18, this.maxLength || 18);\n    }\n\n    get hasSlot(): boolean {\n        return !!this.hostElement.innerHTML.trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderEmptyBadge() {\n        return <div class={this.badgeClasses}></div>;\n    }\n\n    renderStandardBadge() {\n        return (\n            <div class={this.badgeClasses}>\n                <small class=\"badge-text\">{this.hasSlot ? <slot></slot> : this.badgeText}</small>\n            </div>\n        );\n    }\n\n    render() {\n        return !this.badgeText && !this.hasSlot ? this.renderEmptyBadge() : this.renderStandardBadge();\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-badge.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-badge.entry.cjs.js","sources":["src/components/q2-badge/q2-badge.scss?tag=q2-badge&encapsulation=shadow","src/components/q2-badge/q2-badge.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    line-height: 0;\n\n    --comp-badge-font-size: var(--app-font-size-small, 12px);\n    --comp-badge-large-font-size: var(--app-font-size-medium, 14px);\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-a11y-gray-color-AAA, #6c6c6c)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n\n    &:host([status='info']) {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n    }\n\n    &:host([status='alert']) {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #d20a0a)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n    }\n\n    &:host([status='warning']) {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #ffffff)};\n    }\n\n    &:host([status='success']) {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #0e8a00)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n    }\n\n    &:host([theme='primary']) {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #6a4a9e)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n    }\n\n    &:host([theme='secondary']) {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #141414)};\n    }\n\n    &:host([theme='tertiary']) {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.badge-container {\n    white-space: nowrap;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--tct-badge-height, 16px);\n    min-width: var(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var(--tct-badge-padding, unquote('0 5px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n    border: var(--tct-badge-border);\n    backdrop-filter: var(--tct-badge-backdrop-filter);\n    .badge-text {\n        font-size: var(--comp-badge-font-size);\n        line-height: var-list(--tct-badge-line-height, 14px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-font-size) !important;\n        }\n    }\n}\n\n.badge-container.size-large {\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n\n    .badge-text {\n        font-size: var(--comp-badge-large-font-size);\n        line-height: var-list(--tct-badge-large-line-height, 20px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-large-font-size) !important;\n        }\n    }\n}\n\n.empty-variant {\n    min-width: unset;\n    width: 16px;\n    height: 16px;\n    padding: 0;\n\n    &.size-large {\n        min-width: unset;\n        width: 22px;\n        height: 22px;\n        padding: 0;\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Method } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n/**\n * @name Badge\n * @category Display\n * @summary Use for displaying counts, statuses, or indicators on other elements.\n */\n@Component({ tag: 'q2-badge', shadow: true, styleUrl: 'q2-badge.scss' })\nexport class Q2Badge implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The number of characters to show. A maximum limit of 18 characters is acceptable. */\n    @Prop({ reflect: true })\n    maxLength: number | undefined;\n\n    /** The size of the badge. */\n    @Prop({ reflect: true })\n    size: 'default' | 'large' | undefined;\n\n    /** The stoplight color of the element when `theme` is not present. */\n    @Prop({ reflect: true })\n    status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    /**\n     * The color of the badge when in the active state.\n     * The `theme` has higher priority than `status`.\n     */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n\n    /**\n     * What to display in the badge. Negative numbers will be shown as positive.\n     * @info\n     * `q2-badge` also has limited support for slotted HTML elements.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    value: number | string;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.\n     * @testonly\n     */\n    @Method()\n    async getTextContent(): Promise<string> {\n        if (this.hasSlot) {\n            return this.hostElement.textContent.trim();\n        } else {\n            return this.hostElement.shadowRoot.textContent.trim();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeClasses(): string {\n        const badgeClass = ['badge-container'];\n        if (!this.badgeText && !this.hasSlot) badgeClass.push('empty-variant');\n        if (this.size === 'large') badgeClass.push('size-large');\n        return badgeClass.join(' ');\n    }\n\n    get badgeText(): string {\n        const { maxLength, computedMaxLength } = this;\n        let value = this.value;\n        let numValue = Math.abs(Number(value));\n        if (!value) return '';\n\n        if (typeof value === 'string') {\n            value = loc(value);\n            numValue = Math.abs(Number(value));\n        }\n\n        if (typeof value === 'string' && isNaN(numValue)) {\n            return value.substring(0, computedMaxLength);\n        }\n\n        const maxNumber = maxLength ? computedMaxLength : 2;\n        const maxNumValue = Math.pow(10, maxNumber) - 1;\n        if (numValue > maxNumValue) {\n            return maxNumValue.toLocaleString() + '+';\n        } else {\n            return numValue.toLocaleString();\n        }\n    }\n\n    get computedMaxLength(): number {\n        return Math.min(18, this.maxLength || 18);\n    }\n\n    get hasSlot(): boolean {\n        return !!this.hostElement.innerHTML.trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderEmptyBadge() {\n        return <div class={this.badgeClasses}></div>;\n    }\n\n    renderStandardBadge() {\n        return (\n            <div class={this.badgeClasses}>\n                <small class=\"badge-text\">{this.hasSlot ? <slot></slot> : this.badgeText}</small>\n            </div>\n        );\n    }\n\n    render() {\n        return !this.badgeText && !this.hasSlot ? this.renderEmptyBadge() : this.renderStandardBadge();\n    }\n\n    // #endregion\n}\n"],"names":["loc","h"],"mappings":";;;;;AAAA,MAAM,UAAU,GAAG,itHAAitH;;MCSvtH,OAAO,GAAA,MAAA;;;;;;AAwChB;;;AAGG;AAEH,IAAA,MAAM,cAAc,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;;aACvC;YACH,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;;;;;AAO7D,IAAA,IAAI,YAAY,GAAA;AACZ,QAAA,MAAM,UAAU,GAAG,CAAC,iBAAiB,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;AACtE,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;AACxD,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG/B,IAAA,IAAI,SAAS,GAAA;AACT,QAAA,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,IAAI;AAC7C,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK;QACtB,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACtC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAErB,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,YAAA,KAAK,GAAGA,WAAG,CAAC,KAAK,CAAC;YAClB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;QAGtC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;YAC9C,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,iBAAiB,CAAC;;QAGhD,MAAM,SAAS,GAAG,SAAS,GAAG,iBAAiB,GAAG,CAAC;AACnD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC;AAC/C,QAAA,IAAI,QAAQ,GAAG,WAAW,EAAE;AACxB,YAAA,OAAO,WAAW,CAAC,cAAc,EAAE,GAAG,GAAG;;aACtC;AACH,YAAA,OAAO,QAAQ,CAAC,cAAc,EAAE;;;AAIxC,IAAA,IAAI,iBAAiB,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;;AAG7C,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE;;;;IAM9C,gBAAgB,GAAA;AACZ,QAAA,OAAOC,iBAAK,KAAK,EAAE,IAAI,CAAC,YAAY,GAAQ;;IAGhD,mBAAmB,GAAA;QACf,QACIA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EACzBA,OAAO,CAAA,OAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,OAAO,GAAGA,qBAAa,GAAG,IAAI,CAAC,SAAS,CAAS,CAC/E;;IAId,MAAM,GAAA;QACF,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE;;;;;;;;"}
+{"version":3,"file":"q2-badge.entry.cjs.js","sources":["src/components/q2-badge/q2-badge.scss?tag=q2-badge&encapsulation=shadow","src/components/q2-badge/q2-badge.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: inline-block;\n    line-height: 0;\n\n    --comp-badge-font-size: var(--app-font-size-small, 12px);\n    --comp-badge-large-font-size: var(--app-font-size-medium, 14px);\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-a11y-gray-color-AAA, #6c6c6c)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n\n    &:host([status='info']) {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n    }\n\n    &:host([status='alert']) {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #d20a0a)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n    }\n\n    &:host([status='warning']) {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #ffffff)};\n    }\n\n    &:host([status='success']) {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #0e8a00)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n    }\n\n    &:host([theme='primary']) {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #6a4a9e)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n    }\n\n    &:host([theme='secondary']) {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #141414)};\n    }\n\n    &:host([theme='tertiary']) {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.badge-container {\n    white-space: nowrap;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--tct-badge-height, 16px);\n    min-width: var(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var(--tct-badge-padding, unquote('0 5px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n    border: var(--tct-badge-border);\n    backdrop-filter: var(--tct-badge-backdrop-filter);\n    .badge-text {\n        font-size: var(--comp-badge-font-size);\n        line-height: var-list(--tct-badge-line-height, 14px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-font-size) !important;\n        }\n    }\n}\n\n.badge-container.size-large {\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n\n    .badge-text {\n        font-size: var(--comp-badge-large-font-size);\n        line-height: var-list(--tct-badge-large-line-height, 20px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-large-font-size) !important;\n        }\n    }\n}\n\n.empty-variant {\n    min-width: unset;\n    width: 16px;\n    height: 16px;\n    padding: 0;\n\n    &.size-large {\n        min-width: unset;\n        width: 22px;\n        height: 22px;\n        padding: 0;\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Method } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n/**\n * @name Badge\n * @category Display\n * @summary Use for displaying counts, statuses, or indicators on other elements.\n */\n@Component({ tag: 'q2-badge', shadow: true, styleUrl: 'q2-badge.scss' })\nexport class Q2Badge implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The number of characters to show. A maximum limit of 18 characters is acceptable. */\n    @Prop({ reflect: true })\n    maxLength: number | undefined;\n\n    /** The size of the badge. */\n    @Prop({ reflect: true })\n    size: 'default' | 'large' | undefined;\n\n    /** The stoplight color of the element when `theme` is not present. */\n    @Prop({ reflect: true })\n    status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    /**\n     * The color of the badge when in the active state.\n     * The `theme` has higher priority than `status`.\n     */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n\n    /**\n     * What to display in the badge. Negative numbers will be shown as positive.\n     * @info\n     * `q2-badge` also has limited support for slotted HTML elements.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    value: number | string;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.\n     * @testonly\n     */\n    @Method()\n    async getTextContent(): Promise<string> {\n        if (this.hasSlot) {\n            return this.hostElement.textContent.trim();\n        } else {\n            return this.hostElement.shadowRoot.textContent.trim();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeClasses(): string {\n        const badgeClass = ['badge-container'];\n        if (!this.badgeText && !this.hasSlot) badgeClass.push('empty-variant');\n        if (this.size === 'large') badgeClass.push('size-large');\n        return badgeClass.join(' ');\n    }\n\n    get badgeText(): string {\n        const { maxLength, computedMaxLength } = this;\n        let value = this.value;\n        let numValue = Math.abs(Number(value));\n        if (!value) return '';\n\n        if (typeof value === 'string') {\n            value = loc(value);\n            numValue = Math.abs(Number(value));\n        }\n\n        if (typeof value === 'string' && isNaN(numValue)) {\n            return value.substring(0, computedMaxLength);\n        }\n\n        const maxNumber = maxLength ? computedMaxLength : 2;\n        const maxNumValue = Math.pow(10, maxNumber) - 1;\n        if (numValue > maxNumValue) {\n            return maxNumValue.toLocaleString() + '+';\n        } else {\n            return numValue.toLocaleString();\n        }\n    }\n\n    get computedMaxLength(): number {\n        return Math.min(18, this.maxLength || 18);\n    }\n\n    get hasSlot(): boolean {\n        return !!this.hostElement.innerHTML.trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderEmptyBadge() {\n        return <div class={this.badgeClasses}></div>;\n    }\n\n    renderStandardBadge() {\n        return (\n            <div class={this.badgeClasses}>\n                <small class=\"badge-text\">{this.hasSlot ? <slot></slot> : this.badgeText}</small>\n            </div>\n        );\n    }\n\n    render() {\n        return !this.badgeText && !this.hasSlot ? this.renderEmptyBadge() : this.renderStandardBadge();\n    }\n\n    // #endregion\n}\n"],"names":["loc","h"],"mappings":";;;;;AAAA,MAAM,UAAU,GAAG,itHAAitH;;MCSvtH,OAAO,GAAA,MAAA;;;;;;AAwChB;;;AAGG;AAEH,IAAA,MAAM,cAAc,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;;aACvC;YACH,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;;;;;AAO7D,IAAA,IAAI,YAAY,GAAA;AACZ,QAAA,MAAM,UAAU,GAAG,CAAC,iBAAiB,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;AACtE,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;AACxD,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG/B,IAAA,IAAI,SAAS,GAAA;AACT,QAAA,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,IAAI;AAC7C,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK;QACtB,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACtC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAErB,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,YAAA,KAAK,GAAGA,WAAG,CAAC,KAAK,CAAC;YAClB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;QAGtC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;YAC9C,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,iBAAiB,CAAC;;QAGhD,MAAM,SAAS,GAAG,SAAS,GAAG,iBAAiB,GAAG,CAAC;AACnD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC;AAC/C,QAAA,IAAI,QAAQ,GAAG,WAAW,EAAE;AACxB,YAAA,OAAO,WAAW,CAAC,cAAc,EAAE,GAAG,GAAG;;aACtC;AACH,YAAA,OAAO,QAAQ,CAAC,cAAc,EAAE;;;AAIxC,IAAA,IAAI,iBAAiB,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;;AAG7C,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE;;;;IAM9C,gBAAgB,GAAA;AACZ,QAAA,OAAOC,iBAAK,KAAK,EAAE,IAAI,CAAC,YAAY,GAAQ;;IAGhD,mBAAmB,GAAA;QACf,QACIA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EACzBA,OAAO,CAAA,OAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,OAAO,GAAGA,qBAAa,GAAG,IAAI,CAAC,SAAS,CAAS,CAC/E;;IAId,MAAM,GAAA;QACF,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE;;;;;;;;"}

package/dist/cjs/q2-btn.q2-loading.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-btn.q2-loading.entry.cjs.js","sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx","src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.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","@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([inline]),\n:host([modifiers*='inline']) {\n    display: inline-block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(:not([inline]):not([modifiers*='inline'])) {\n    font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n    height: 1em;\n    width: 1em;\n}\n\n#custom-loader-container {\n    min-height: 1em;\n    min-width: 1em;\n\n    svg {\n        display: block;\n    }\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Listen, Element, Watch, State } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\n\n/**\n * @name Loading\n * @category Feedback\n * @summary Use to indicate async operations or content loading in progress.\n */\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n    // #region Own Properties\n\n    ariaLiveTimer;\n    customLoaderClass = 'tct-loading-custom-loader';\n    dontUpdateScreenReaderLabel = false;\n    liveRegionChangeIndicatorToggle = false;\n    observer: IntersectionObserver;\n    screenReaderElement: 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    hasCustomLoader: boolean = false;\n\n    @State()\n    loaderClone: SVGElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /**\n     * Numeric adjustments are available for specific `type` and `shape` combinations.\n     * These may impact the number of items, columns, and/or rows that display.\n     *\n     * When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n     *\n     * When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n     * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n     *\n     * When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n     * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n     */\n    @Prop({ reflect: true })\n    counts: string;\n\n    /** Hides the loading element from screen readers. */\n    @Prop({ reflect: true })\n    hideFromScreenReaders: boolean = false;\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /**\n     * The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n     *\n     * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n     */\n    @Prop({ reflect: true })\n    modifiers: string;\n\n    /**\n     * The specific visual presentation of a loading element `type`.\n     * @snippet\n     * // when type=\"spinner\"\n     * type ShapeValues = \"half-circle\";\n     * // when type=\"skeleton\"\n     * type ShapeValues = \"circle | \"rectangle\" | \"text\" | \"table\" | \"field\" | \"form\" | \"detailed-item\" | \"label-value\";\n     */\n    @Prop({ reflect: true })\n    shape: string;\n\n    /** The type of loading element to display. */\n    @Prop({ reflect: true })\n    type: 'brand' | 'spinner' | 'skeleton';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.cleanupLiveRegionDelay();\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.handleType();\n    }\n\n    componentDidLoad(): void {\n        this.setupLiveRegionDelay();\n    }\n\n    componentDidUpdate(): void {\n        this.updateScreenReaderLabel();\n    }\n\n    componentDidRender(): void {\n        if (!this.loaderClone) return;\n        if (!this.hasCustomLoader) return;\n        const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');\n        customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)?.remove();\n        customLoaderContainer.appendChild(this.loaderClone);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('tctUpdateLoaders', { target: 'document' })\n    onUpdateLoaders() {\n        const { customLoaderURL } = this;\n        this.hasCustomLoader = !!customLoaderURL;\n        this.fetchLoader();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('type')\n    handleType() {\n        this.fetchLoader();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get countsArray(): number[] {\n        if (this.type !== 'skeleton' || !this.counts) {\n            return undefined;\n        }\n\n        return this.counts.split('x').map(Number);\n    }\n\n    get customLoaderElement() {\n        const { customLoaderURL, customLoaderClass } = this;\n        if (!customLoaderURL) return;\n        return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n    }\n\n    get customLoaderURL() {\n        const hostComputedStyles = window.getComputedStyle(this.hostElement);\n        const loadingVariableURL = hostComputedStyles.getPropertyValue(\n            `--tct-loading-custom-${this.type || 'spinner'}-url`\n        );\n        if (!loadingVariableURL) return;\n\n        const cssKeywords = new Set(['none', 'unset', 'initial', 'inherit', 'revert']);\n        if (cssKeywords.has(loadingVariableURL.trim().toLowerCase())) return;\n\n        const url = loadingVariableURL.trim().replace(/^url\\(['\"]?|['\"]?\\)$/g, '');\n        if (!/^https?:\\/\\//i.test(url)) {\n            console.warn(\n                `[q2-loading] Invalid customLoaderURL: \"${url}\".` +\n                    ` Only absolute URLs (http:// or https://) are supported.`\n            );\n            return;\n        }\n        return url;\n    }\n\n    get isSkeletonType() {\n        return this.type === 'skeleton';\n    }\n\n    get loaderEventName() {\n        const { type = 'spinner', isSkeletonType } = this;\n        if (isSkeletonType) return;\n        return `tct-loaded-${type}`;\n    }\n\n    get localizedLabel() {\n        return loc(this.label || this.ariaLabel || 'tecton.element.loading.ariaLabel');\n    }\n\n    get modifiersSet(): Set<string> {\n        if (this.type !== 'skeleton' || !this.modifiers) {\n            return undefined;\n        }\n\n        return new Set(this.modifiers.split('-'));\n    }\n\n    get skeletonShape() {\n        return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n    }\n\n    checkForLoader() {\n        const { loaderEventName, customLoaderClass } = this;\n        const spriteContainer = getOrCreateSpriteContainer();\n        let { customLoaderElement } = this;\n\n        // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (customLoaderElement?.hasAttribute('data-loaded')) {\n            this.cloneLoaderNode();\n            return true;\n        }\n\n        // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the element is loaded\n        spriteContainer.addEventListener(\n            loaderEventName,\n            () => {\n                this.cloneLoaderNode();\n            },\n            { once: true }\n        );\n\n        // If the loading element exists, we know it's being loaded and will be handled by the event listener\n        if (customLoaderElement) return true;\n\n        // If loading element does not exist, create a placeholder\n        // This will let other icons know the element is being loaded and prevent multiple fetches\n        customLoaderElement = document.createElement('div');\n        customLoaderElement.classList.add(customLoaderClass);\n        customLoaderElement.dataset.url = this.customLoaderURL;\n        spriteContainer.appendChild(customLoaderElement);\n        return false;\n    }\n\n    cleanupLiveRegionDelay() {\n        if (this.hideFromScreenReaders) return;\n\n        clearTimeout(this.ariaLiveTimer);\n        this.observer?.disconnect();\n        this.observer = null;\n    }\n\n    cloneLoaderNode() {\n        const { customLoaderElement } = this;\n        this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\n    }\n\n    async fetchLoader() {\n        const { isSkeletonType, customLoaderURL } = this;\n        this.hasCustomLoader = false;\n        if (isSkeletonType) {\n            return;\n        }\n\n        if (!customLoaderURL) return;\n        this.hasCustomLoader = true;\n\n        let { customLoaderElement } = this;\n        const loaderExists = this.checkForLoader();\n\n        if (loaderExists) return;\n\n        try {\n            const response = await fetch(customLoaderURL);\n\n            // Check for HTTP errors (including CORS issues that return error status)\n            if (!response.ok) {\n                throw new Error(\n                    `HTTP ${response.status}: Failed to fetch SVG. ` +\n                        `This may be due to incorrect URL, server error, or CORS restrictions.`\n                );\n            }\n\n            const svgText = await response.text();\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');\n            const svg = svgDoc.querySelector('svg');\n\n            if (!svg) throw new Error('No SVG found in the loaded content');\n\n            svg.dataset.loaded = '';\n            svg.dataset.url = customLoaderURL;\n            svg.classList.add(this.customLoaderClass);\n\n            customLoaderElement = this.customLoaderElement;\n            if (!customLoaderElement) return;\n            if (typeof customLoaderElement.replaceWith === 'function') {\n                customLoaderElement.replaceWith(svg);\n            } else {\n                customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);\n            }\n\n            svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));\n        } catch (error) {\n            // Provide more specific error messaging for common issues\n            if (error instanceof TypeError && error.message === 'Failed to fetch') {\n                console.error(\n                    `Failed to load custom loader from ${customLoaderURL}. ` +\n                        `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +\n                        `Ensure the server hosting the SVG includes proper CORS headers ` +\n                        `(Access-Control-Allow-Origin) or host the SVG on the same domain.`,\n                    error\n                );\n            } else {\n                console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);\n            }\n        }\n    }\n\n    setupLiveRegionDelay() {\n        if (this.hideFromScreenReaders) return;\n\n        // The screen reader element starts out empty and is then populated by the\n        // label text after a delay to ensure that it is announced by screen\n        // readers.\n        const options = {\n            root: null,\n            rootMargin: '0px',\n            threshold: [1],\n        };\n        this.observer = new IntersectionObserver(entries => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    clearTimeout(this.ariaLiveTimer);\n                    this.ariaLiveTimer = setTimeout(() => {\n                        if (this.screenReaderElement) {\n                            this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;\n                        }\n                        this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;\n                        this.dontUpdateScreenReaderLabel = false;\n                    }, 2000);\n                } else {\n                    clearTimeout(this.ariaLiveTimer);\n                    if (this.screenReaderElement) {\n                        this.screenReaderElement.textContent = '';\n                    }\n                    this.dontUpdateScreenReaderLabel = true;\n                }\n            });\n        }, options);\n        this.observer.observe(this.hostElement);\n    }\n\n    updateScreenReaderLabel() {\n        if (this.dontUpdateScreenReaderLabel) return;\n        if (!this.screenReaderElement) return;\n        this.screenReaderElement.textContent = this.localizedLabel;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderCustomLoaderContainer = () => {\n        return (\n            <div\n                id=\"custom-loader-container\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    renderHalfCircleSpinner = () => {\n        return (\n            <div\n                class=\"q2-loading-animation half-circle-spinner\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                <svg\n                    class=\"loader\"\n                    viewBox=\"0 0 50 50\"\n                    role=\"presentation\"\n                >\n                    <circle\n                        class=\"head\"\n                        cx=\"25\"\n                        cy=\"25\"\n                        r=\"20\"\n                    />\n                </svg>\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    get renderLoader() {\n        const loaderMap = {\n            default: this.renderSpinner,\n            spinner: this.renderSpinner,\n            skeleton: this.renderSkeletonLoader,\n            custom: this.renderCustomLoaderContainer,\n        };\n        const { type, hasCustomLoader } = this;\n        const loaderMapKey = hasCustomLoader ? 'custom' : type;\n\n        return loaderMap[loaderMapKey] || loaderMap.default;\n    }\n\n    renderSkeletonLoader = () => {\n        return (\n            <div\n                class=\"q2-loading-skeleton\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n                <div class=\"q2-loading-skeleton-shimmer\"></div>\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    renderSpinner = () => {\n        return this.renderHalfCircleSpinner();\n    };\n\n    render() {\n        return this.renderLoader();\n    }\n\n    // #endregion\n}\n"],"names":["handleDeprecationWarning","handleAriaLabel","handleColor","overrideFocus","isEventFromElement","getAriaValueFromProp","loc","h","Fragment","skeletonShapes","getOrCreateSpriteContainer"],"mappings":"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"}
+{"version":3,"file":"q2-btn.q2-loading.entry.cjs.js","sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx","src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-mixins';\n@import './variables';\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","@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: block;\n}\n\n:host([inline]),\n:host([modifiers*='inline']) {\n    display: inline-block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(:not([inline]):not([modifiers*='inline'])) {\n    font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n    height: 1em;\n    width: 1em;\n}\n\n#custom-loader-container {\n    min-height: 1em;\n    min-width: 1em;\n\n    svg {\n        display: block;\n    }\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Listen, Element, Watch, State } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\n\n/**\n * @name Loading\n * @category Feedback\n * @summary Use to indicate async operations or content loading in progress.\n */\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n    // #region Own Properties\n\n    ariaLiveTimer;\n    customLoaderClass = 'tct-loading-custom-loader';\n    dontUpdateScreenReaderLabel = false;\n    liveRegionChangeIndicatorToggle = false;\n    observer: IntersectionObserver;\n    screenReaderElement: 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    hasCustomLoader: boolean = false;\n\n    @State()\n    loaderClone: SVGElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /**\n     * Numeric adjustments are available for specific `type` and `shape` combinations.\n     * These may impact the number of items, columns, and/or rows that display.\n     *\n     * When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n     *\n     * When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n     * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n     *\n     * When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n     *\n     * 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n     * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n     */\n    @Prop({ reflect: true })\n    counts: string;\n\n    /** Hides the loading element from screen readers. */\n    @Prop({ reflect: true })\n    hideFromScreenReaders: boolean = false;\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /**\n     * The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n     *\n     * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n     */\n    @Prop({ reflect: true })\n    modifiers: string;\n\n    /**\n     * The specific visual presentation of a loading element `type`.\n     * @snippet\n     * // when type=\"spinner\"\n     * type ShapeValues = \"half-circle\";\n     * // when type=\"skeleton\"\n     * type ShapeValues = \"circle | \"rectangle\" | \"text\" | \"table\" | \"field\" | \"form\" | \"detailed-item\" | \"label-value\";\n     */\n    @Prop({ reflect: true })\n    shape: string;\n\n    /** The type of loading element to display. */\n    @Prop({ reflect: true })\n    type: 'brand' | 'spinner' | 'skeleton';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.cleanupLiveRegionDelay();\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.handleType();\n    }\n\n    componentDidLoad(): void {\n        this.setupLiveRegionDelay();\n    }\n\n    componentDidUpdate(): void {\n        this.updateScreenReaderLabel();\n    }\n\n    componentDidRender(): void {\n        if (!this.loaderClone) return;\n        if (!this.hasCustomLoader) return;\n        const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');\n        customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)?.remove();\n        customLoaderContainer.appendChild(this.loaderClone);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('tctUpdateLoaders', { target: 'document' })\n    onUpdateLoaders() {\n        const { customLoaderURL } = this;\n        this.hasCustomLoader = !!customLoaderURL;\n        this.fetchLoader();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('type')\n    handleType() {\n        this.fetchLoader();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get countsArray(): number[] {\n        if (this.type !== 'skeleton' || !this.counts) {\n            return undefined;\n        }\n\n        return this.counts.split('x').map(Number);\n    }\n\n    get customLoaderElement() {\n        const { customLoaderURL, customLoaderClass } = this;\n        if (!customLoaderURL) return;\n        return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n    }\n\n    get customLoaderURL() {\n        const hostComputedStyles = window.getComputedStyle(this.hostElement);\n        const loadingVariableURL = hostComputedStyles.getPropertyValue(\n            `--tct-loading-custom-${this.type || 'spinner'}-url`\n        );\n        if (!loadingVariableURL) return;\n\n        const cssKeywords = new Set(['none', 'unset', 'initial', 'inherit', 'revert']);\n        if (cssKeywords.has(loadingVariableURL.trim().toLowerCase())) return;\n\n        const url = loadingVariableURL.trim().replace(/^url\\(['\"]?|['\"]?\\)$/g, '');\n        if (!/^https?:\\/\\//i.test(url)) {\n            console.warn(\n                `[q2-loading] Invalid customLoaderURL: \"${url}\".` +\n                    ` Only absolute URLs (http:// or https://) are supported.`\n            );\n            return;\n        }\n        return url;\n    }\n\n    get isSkeletonType() {\n        return this.type === 'skeleton';\n    }\n\n    get loaderEventName() {\n        const { type = 'spinner', isSkeletonType } = this;\n        if (isSkeletonType) return;\n        return `tct-loaded-${type}`;\n    }\n\n    get localizedLabel() {\n        return loc(this.label || this.ariaLabel || 'tecton.element.loading.ariaLabel');\n    }\n\n    get modifiersSet(): Set<string> {\n        if (this.type !== 'skeleton' || !this.modifiers) {\n            return undefined;\n        }\n\n        return new Set(this.modifiers.split('-'));\n    }\n\n    get skeletonShape() {\n        return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n    }\n\n    checkForLoader() {\n        const { loaderEventName, customLoaderClass } = this;\n        const spriteContainer = getOrCreateSpriteContainer();\n        let { customLoaderElement } = this;\n\n        // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (customLoaderElement?.hasAttribute('data-loaded')) {\n            this.cloneLoaderNode();\n            return true;\n        }\n\n        // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the element is loaded\n        spriteContainer.addEventListener(\n            loaderEventName,\n            () => {\n                this.cloneLoaderNode();\n            },\n            { once: true }\n        );\n\n        // If the loading element exists, we know it's being loaded and will be handled by the event listener\n        if (customLoaderElement) return true;\n\n        // If loading element does not exist, create a placeholder\n        // This will let other icons know the element is being loaded and prevent multiple fetches\n        customLoaderElement = document.createElement('div');\n        customLoaderElement.classList.add(customLoaderClass);\n        customLoaderElement.dataset.url = this.customLoaderURL;\n        spriteContainer.appendChild(customLoaderElement);\n        return false;\n    }\n\n    cleanupLiveRegionDelay() {\n        if (this.hideFromScreenReaders) return;\n\n        clearTimeout(this.ariaLiveTimer);\n        this.observer?.disconnect();\n        this.observer = null;\n    }\n\n    cloneLoaderNode() {\n        const { customLoaderElement } = this;\n        this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\n    }\n\n    async fetchLoader() {\n        const { isSkeletonType, customLoaderURL } = this;\n        this.hasCustomLoader = false;\n        if (isSkeletonType) {\n            return;\n        }\n\n        if (!customLoaderURL) return;\n        this.hasCustomLoader = true;\n\n        let { customLoaderElement } = this;\n        const loaderExists = this.checkForLoader();\n\n        if (loaderExists) return;\n\n        try {\n            const response = await fetch(customLoaderURL);\n\n            // Check for HTTP errors (including CORS issues that return error status)\n            if (!response.ok) {\n                throw new Error(\n                    `HTTP ${response.status}: Failed to fetch SVG. ` +\n                        `This may be due to incorrect URL, server error, or CORS restrictions.`\n                );\n            }\n\n            const svgText = await response.text();\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');\n            const svg = svgDoc.querySelector('svg');\n\n            if (!svg) throw new Error('No SVG found in the loaded content');\n\n            svg.dataset.loaded = '';\n            svg.dataset.url = customLoaderURL;\n            svg.classList.add(this.customLoaderClass);\n\n            customLoaderElement = this.customLoaderElement;\n            if (!customLoaderElement) return;\n            if (typeof customLoaderElement.replaceWith === 'function') {\n                customLoaderElement.replaceWith(svg);\n            } else {\n                customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);\n            }\n\n            svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));\n        } catch (error) {\n            // Provide more specific error messaging for common issues\n            if (error instanceof TypeError && error.message === 'Failed to fetch') {\n                console.error(\n                    `Failed to load custom loader from ${customLoaderURL}. ` +\n                        `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +\n                        `Ensure the server hosting the SVG includes proper CORS headers ` +\n                        `(Access-Control-Allow-Origin) or host the SVG on the same domain.`,\n                    error\n                );\n            } else {\n                console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);\n            }\n        }\n    }\n\n    setupLiveRegionDelay() {\n        if (this.hideFromScreenReaders) return;\n\n        // The screen reader element starts out empty and is then populated by the\n        // label text after a delay to ensure that it is announced by screen\n        // readers.\n        const options = {\n            root: null,\n            rootMargin: '0px',\n            threshold: [1],\n        };\n        this.observer = new IntersectionObserver(entries => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    clearTimeout(this.ariaLiveTimer);\n                    this.ariaLiveTimer = setTimeout(() => {\n                        if (this.screenReaderElement) {\n                            this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;\n                        }\n                        this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;\n                        this.dontUpdateScreenReaderLabel = false;\n                    }, 2000);\n                } else {\n                    clearTimeout(this.ariaLiveTimer);\n                    if (this.screenReaderElement) {\n                        this.screenReaderElement.textContent = '';\n                    }\n                    this.dontUpdateScreenReaderLabel = true;\n                }\n            });\n        }, options);\n        this.observer.observe(this.hostElement);\n    }\n\n    updateScreenReaderLabel() {\n        if (this.dontUpdateScreenReaderLabel) return;\n        if (!this.screenReaderElement) return;\n        this.screenReaderElement.textContent = this.localizedLabel;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderCustomLoaderContainer = () => {\n        return (\n            <div\n                id=\"custom-loader-container\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    renderHalfCircleSpinner = () => {\n        return (\n            <div\n                class=\"q2-loading-animation half-circle-spinner\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                <svg\n                    class=\"loader\"\n                    viewBox=\"0 0 50 50\"\n                    role=\"presentation\"\n                >\n                    <circle\n                        class=\"head\"\n                        cx=\"25\"\n                        cy=\"25\"\n                        r=\"20\"\n                    />\n                </svg>\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    get renderLoader() {\n        const loaderMap = {\n            default: this.renderSpinner,\n            spinner: this.renderSpinner,\n            skeleton: this.renderSkeletonLoader,\n            custom: this.renderCustomLoaderContainer,\n        };\n        const { type, hasCustomLoader } = this;\n        const loaderMapKey = hasCustomLoader ? 'custom' : type;\n\n        return loaderMap[loaderMapKey] || loaderMap.default;\n    }\n\n    renderSkeletonLoader = () => {\n        return (\n            <div\n                class=\"q2-loading-skeleton\"\n                aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n                aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n                role={!this.hideFromScreenReaders ? 'status' : undefined}\n            >\n                {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n                <div class=\"q2-loading-skeleton-shimmer\"></div>\n                {!this.hideFromScreenReaders && (\n                    <div\n                        class=\"sr\"\n                        ref={el => (this.screenReaderElement = el)}\n                    ></div>\n                )}\n            </div>\n        );\n    };\n\n    renderSpinner = () => {\n        return this.renderHalfCircleSpinner();\n    };\n\n    render() {\n        return this.renderLoader();\n    }\n\n    // #endregion\n}\n"],"names":["handleDeprecationWarning","handleAriaLabel","handleColor","overrideFocus","isEventFromElement","getAriaValueFromProp","loc","h","Fragment","skeletonShapes","getOrCreateSpriteContainer"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 var shapes = require('./shapes-AGx9jMFH.js');
 var sprites = require('./sprites-DZZE7UFT.js');