q2-tecton-elements 1.67.0 → 1.67.1

package/dist/q2-tecton-elements/q2-btn_2.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2BtnCss","Q2Btn","constructor","hostRef","this","type","handleButtonSize","Number","size","handleDeprecationWarning","handleIcons","icon","Array","from","hostElement","querySelectorAll","reduce","acc","element","remove","hasIcon","hasLoc","querySelector","hasText","textContent","trim","hasIconLeft","firstElementChild","hasIconRight","lastElementChild","hasIconOnly","iconPosition","handleSlotChange","disconnectedCallback","primaryBtn","primaryBtnWrapper","componentWillLoad","handleAriaLabel","handleColor","componentDidLoad","overrideFocus","handleClick","event","loading","disabled","stopImmediatePropagation","tctClick","emit","focus","delegateFocus","isEventFromElement","ariaLabelObserver","sizeObserver","buttonAttributes","ariaExpanded","getAriaValueFromProp","ariaHasPopup","ariaLabel","composedAriaLabel","ariaSelected","ariaPressed","description","undefined","tabindex","tabIndex","buttonClasses","classes","push","intent","block","color","active","join","coinLabelClasses","baseText","label","hideLabel","loc","_tooltip","renderButton","badge","renderLoadingSpinner","isLoadingSpinnerInline","h","Fragment","ref","el","class","role","_role","hidden","modifiers","renderDefaultLabel","renderDefaultCoinSlot","renderCoinLabel","id","name","onSlotchange","render","q2LoadingCss","Q2Loading","customLoaderClass","dontUpdateScreenReaderLabel","liveRegionChangeIndicatorToggle","hasCustomLoader","hideFromScreenReaders","renderCustomLoaderContainer","screenReaderElement","renderHalfCircleSpinner","viewBox","cx","cy","r","renderSkeletonLoader","shape","skeletonShape","renderSpinner","cleanupLiveRegionDelay","handleType","setupLiveRegionDelay","componentDidUpdate","updateScreenReaderLabel","componentDidRender","loaderClone","customLoaderContainer","shadowRoot","_a","appendChild","onUpdateLoaders","customLoaderURL","fetchLoader","countsArray","counts","split","map","customLoaderElement","document","hostComputedStyles","window","getComputedStyle","loadingVariableURL","getPropertyValue","cssKeywords","Set","has","toLowerCase","url","replace","test","console","warn","isSkeletonType","loaderEventName","localizedLabel","modifiersSet","_b","skeletonShapes","call","checkForLoader","spriteContainer","getOrCreateSpriteContainer","hasAttribute","cloneLoaderNode","addEventListener","once","createElement","classList","add","dataset","clearTimeout","ariaLiveTimer","observer","disconnect","cloneNode","loaderExists","response","fetch","ok","Error","status","svgText","text","parser","DOMParser","svgDoc","parseFromString","svg","loaded","replaceWith","parentNode","replaceChild","dispatchEvent","CustomEvent","bubbles","error","TypeError","message","options","root","rootMargin","threshold","IntersectionObserver","entries","forEach","entry","isIntersecting","setTimeout","observe","renderLoader","loaderMap","default","spinner","skeleton","custom","loaderMapKey"],"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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2BtnCss","Q2Btn","constructor","hostRef","this","type","handleButtonSize","Number","size","handleDeprecationWarning","handleIcons","icon","Array","from","hostElement","querySelectorAll","reduce","acc","element","remove","hasIcon","hasLoc","querySelector","hasText","textContent","trim","hasIconLeft","firstElementChild","hasIconRight","lastElementChild","hasIconOnly","iconPosition","handleSlotChange","disconnectedCallback","primaryBtn","primaryBtnWrapper","componentWillLoad","handleAriaLabel","handleColor","componentDidLoad","overrideFocus","handleClick","event","loading","disabled","stopImmediatePropagation","tctClick","emit","_a","focus","delegateFocus","isEventFromElement","ariaLabelObserver","sizeObserver","buttonAttributes","ariaExpanded","getAriaValueFromProp","ariaHasPopup","ariaLabel","composedAriaLabel","ariaSelected","ariaPressed","description","undefined","tabindex","tabIndex","buttonClasses","classes","push","intent","block","color","active","join","coinLabelClasses","baseText","label","hideLabel","loc","_tooltip","renderButton","badge","renderLoadingSpinner","isLoadingSpinnerInline","h","Fragment","ref","el","class","role","_role","hidden","modifiers","renderDefaultLabel","renderDefaultCoinSlot","renderCoinLabel","id","name","onSlotchange","render","q2LoadingCss","Q2Loading","customLoaderClass","dontUpdateScreenReaderLabel","liveRegionChangeIndicatorToggle","hasCustomLoader","hideFromScreenReaders","renderCustomLoaderContainer","screenReaderElement","renderHalfCircleSpinner","viewBox","cx","cy","r","renderSkeletonLoader","shape","skeletonShape","renderSpinner","cleanupLiveRegionDelay","handleType","setupLiveRegionDelay","componentDidUpdate","updateScreenReaderLabel","componentDidRender","loaderClone","customLoaderContainer","shadowRoot","appendChild","onUpdateLoaders","customLoaderURL","fetchLoader","countsArray","counts","split","map","customLoaderElement","document","hostComputedStyles","window","getComputedStyle","loadingVariableURL","getPropertyValue","cssKeywords","Set","has","toLowerCase","url","replace","test","console","warn","isSkeletonType","loaderEventName","localizedLabel","modifiersSet","_b","skeletonShapes","call","checkForLoader","spriteContainer","getOrCreateSpriteContainer","hasAttribute","cloneLoaderNode","addEventListener","once","createElement","classList","add","dataset","clearTimeout","ariaLiveTimer","observer","disconnect","cloneNode","loaderExists","response","fetch","ok","Error","status","svgText","text","parser","DOMParser","svgDoc","parseFromString","svg","loaded","replaceWith","parentNode","replaceChild","dispatchEvent","CustomEvent","bubbles","error","TypeError","message","options","root","rootMargin","threshold","IntersectionObserver","entries","forEach","entry","isIntersecting","setTimeout","observe","renderLoader","loaderMap","default","spinner","skeleton","custom","loaderMapKey"],"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"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-calendar.entry.js

@@ -1291,11 +1291,11 @@ const y = class {
   }
   render() {
     return a("click-elsewhere", {
-      key: "b56461b08364576460861bfacee8da16e482d85b",
+      key: "0982135e2be03261bf81a48de77ef8d564cedb78",
       class: this.open ? "dropdown-open" : undefined,
       onChange: this.onClickElsewhere
     }, this.renderInputField(), a("q2-popover", {
-      key: "9bba51d05ce0752dd874361c7f3b9b82db86bc70",
+      key: "d18140e57015148d2e2bb86e00af20a5d8d8d69f",
       ref: t => this.popoverElement = t,
       id: "calendar-popover",
       controlElement: this.innerInputContainer,

package/dist/q2-tecton-elements/q2-card-image.entry.js

@@ -442,14 +442,14 @@ const n = class {
     }, this.renderCardContent()) : this.renderCardContent();
     const a = !!this.cardStatus && this.size === "large";
     return i(e, {
-      key: "d1592e6d7239707ec8608f9458bc0066bca5d407",
+      key: "3c71f0e8e6fd22ebf3a3e3b98f890767ced6060b",
       class: {
         [`${this.orientation}`]: true,
         "has-action": this.hasActionSlotContent,
         "has-banner": a
       }
     }, this.renderStatusBanner(), i("div", {
-      key: "e45f8f705256b70e527d5e95d3a13b7c9e1938e2",
+      key: "761c7a611ec3f8e0ffd7a5b51e2944f83876f5ae",
       class: "card-wrapper"
     }, t, this.renderAction()));
   }

package/dist/q2-tecton-elements/q2-carousel-pane.entry.js

@@ -100,7 +100,7 @@ const l = class {
   render() {
     const {label: e} = this;
     return t(r, {
-      key: "156420cbdaf48d8d1e6e14c05e745ff0df308a2a",
+      key: "6d221b15545378efa40b54864b2ebca1bcb1e983",
       class: this.generatePaneClass(this.currentPaneIndex),
       tabIndex: this.isActivePane ? 0 : -1,
       role: "group",
@@ -109,10 +109,10 @@ const l = class {
       "aria-label": e ? n(e) : n("tecton.element.carousel.itemDescription", [ (this.currentPaneIndex + 1).toString(), (this.siblingCount || 0).toString() ]),
       onClick: this.paneClicked
     }, t("article", {
-      key: "2f61bdfa9d9e4413941d0ca2f1edc9fc2cd48e8e",
+      key: "394965fb0a46501fcd33aa3acadb2eaae6a1accd",
       class: "q2-carousel-pane-main-content"
     }, t("slot", {
-      key: "d498b8a73ba1a668bb768891d37b2303db976012"
+      key: "a059daeb1c5192cec8594b6c9843828d6b833f12"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-carousel.entry.js

@@ -4819,7 +4819,7 @@ const D = 500;
     if (l && c === "bottom") v.push("evenly-space");
     if (l && c === "hug") v.push("center-space");
     return i(s, {
-      key: "56ecddd3c2bbad43dba7fdb949d539a937b3e5f0",
+      key: "7c8a2c87c41d8621971bff9a22ab8de2439276c5",
       id: `q2-carousel-${this.guid}`,
       class: "q2-carousel-instance"
     }, f ? this.renderInsufficientPanesDisplay() : i(n, null, e > 1 && i("div", {

package/dist/q2-tecton-elements/q2-chart-area.entry.js

@@ -260,10 +260,10 @@ const U = class {
   // #region Render Methods
   render() {
     return i("div", {
-      key: "81f8432837d66f500da8403dbc25727c44635a03",
+      key: "247b79eca7719feab470918648f223675483daf8",
       class: "container"
     }, i("div", {
-      key: "fcd3f4aa43d89467591140cbe211c7d5e35316fa",
+      key: "349272c0ece24581f05dcadb81d7a19dd71eaa2d",
       ref: t => this.chartContainer = t,
       class: "chart-container",
       role: "img",

package/dist/q2-tecton-elements/q2-chart-bar.entry.js

@@ -203,10 +203,10 @@ const U = class {
   // #region Render Methods
   render() {
     return s("div", {
-      key: "bea029d1b2ab1650f3a8dd60f64bd5640752632b",
+      key: "36a77a29d5e06363f2cd2267c298429cd2ef9864",
       class: "container"
     }, s("div", {
-      key: "1a240fcde7691730648aa698a3cb57b98cb1f95f",
+      key: "e7382ecf3ed8323ffbf1c57a78c870d7d7c4b718",
       ref: t => this.chartContainer = t,
       class: "chart-container",
       role: "img",

package/dist/q2-tecton-elements/q2-chart-donut.entry.js

@@ -4,12 +4,12 @@ import { o as a, i as r, l as s, g as o } from "./index-C4PILj1_.js";
 
 import { m as c } from "./mirror-emit-DUjY_ucm.js";
 
-import { u as d, o as l, W as h, j as u, H as p, X as v, Y as f, Z as g, _ as b, $ as m, a0 as x, d as y, c as w, m as I, i as S, g as k } from "./charting-BNYmzAlx.js";
+import { u as l, o as d, W as h, j as u, H as p, X as v, Y as f, Z as g, _ as b, $ as m, a0 as x, d as y, c as w, m as I, i as S, g as k } from "./charting-BNYmzAlx.js";
 
 import { T as C, a as z, L as A, b as U, S as D, c as T } from "./install-qbdIiszz.js";
 
 function install$4(t) {
-  d(l);
+  l(d);
   t.registerComponentModel(C);
   t.registerComponentView(z);
   /**
@@ -238,15 +238,15 @@ function install$3(t) {
 }
 
 function install$2(t) {
-  d(install$3);
+  l(install$3);
   t.registerComponentModel(D);
   t.registerComponentView(T);
   installScrollableLegendAction(t);
 }
 
 function install$1(t) {
-  d(install$3);
-  d(install$2);
+  l(install$3);
+  l(install$2);
 }
 
 /*
@@ -342,7 +342,7 @@ function install(t) {
 
 const $ = "*{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{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container:focus-visible{box-shadow:var(--tct-chart-donut-focus-visible-box-shadow, var(--const-double-focus-ring))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)));border-radius:50%}.center-card{height:100%;width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%}.center-card:is(button){cursor:pointer;background:var(--tct-chart-donut-button-background, transparent);border:0}.center-card:is(button):hover{background:var(--tct-chart-donut-button-hover-background, transparent)}.center-card:is(button):active{background:var(--tct-chart-donut-button-active-background, transparent)}.center-card:is(button):focus-visible{background:var(--tct-chart-donut-button-focus-background, transparent)}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
 
-d([ install$4, install$1, install, y, w, I ]);
+l([ install$4, install$1, install, y, w, I ]);
 
 const F = class {
   constructor(n) {
@@ -823,7 +823,7 @@ const F = class {
     const {isClickable: r} = this;
     const o = r ? "button" : "div";
     const c = this.displayValue(i);
-    const d = r ? {
+    const l = r ? {
       onKeyDown: this.onButtonKeyDown,
       onClick: this.onButtonClick,
       ref: t => this.centerButtonElement = t,
@@ -842,7 +842,7 @@ const F = class {
     }, s("tecton.element.chartDonut.button.description")), n(o, {
       class: "center-card",
       "test-id": "centerCard",
-      ...d
+      ...l
     }, !!t && n("q2-icon", {
       type: t,
       style: a && {
@@ -858,15 +858,15 @@ const F = class {
   }
   render() {
     return n("click-elsewhere", {
-      key: "473d5d1b512e2d4d9ad9e215ebf597aaad0854d2",
+      key: "e11f9f591cc6329f91d2017d556cabe0f3f797c9",
       onChange: this.onClickElsewhere
     }, n("figure", {
-      key: "aa22d00635231662d6b446066b9fdc33c2f8748d"
+      key: "af092b44df48422b76507f557ca6aa6508753de9"
     }, n("div", {
-      key: "71f74bf9dbc69de99a88204ccc51d4d5864dfbf3",
+      key: "4384fdcb1864496619ab0b097e71faa22eb3aeb5",
       class: "container"
     }, n("div", {
-      key: "9d2ff90b01d25ecd018a5e1a10dbac4726557ebb",
+      key: "99f261a2ba8952b598d28599c2b1848fcfdecf6c",
       ref: t => this.chartContainer = t,
       "aria-describedby": !this.isClickable ? "center-card-description" : undefined,
       class: "chart-container",
@@ -876,9 +876,9 @@ const F = class {
       tabIndex: !this.isClickable ? 0 : undefined,
       onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined
     }), this.renderCenterBlock()), this.showLegend && n("figcaption", {
-      key: "0795c3b57206c94c65ab1e81162dc9409426dbe9"
+      key: "4ead6e4332aeda66219d3a2c7ac15b0446442734"
     }, n("q2-legend", {
-      key: "58009cbd37d9ffaea2dd429b074f00b736eea866",
+      key: "53d5408e4beb519dd9af1a06603ca7f3cc597577",
       class: "legend",
       data: this.legendData,
       format: this.format,

package/dist/q2-tecton-elements/q2-checkbox-group.entry.js

@@ -127,23 +127,23 @@ const h = class {
     const t = this.label || this.optional || this.readonly;
     const e = t && !this.hideLabel || this.hasError;
     return r(o, {
-      key: "eaff44b5a38dc022c372e375ec153d42b4a52c7f"
+      key: "045db0eb9522964c61680474aaf53cf75c373804"
     }, e && r("div", {
-      key: "8252c6b3958656e3891709de3c54eb6a74247bf0",
+      key: "e372b876b16c4122c86c4f5573e403965a75b7d2",
       class: "label-row"
     }, t && !this.hideLabel && r("div", {
-      key: "7a9e381063cfc689f0828dfb926434a9c042121a",
+      key: "b188c3e6715a50a6cb8ba83f4140b2eef3ca688d",
       class: "group-legend"
     }, c(this)), this.hasError && r("q2-icon", {
-      key: "c6e3ffeab88703d7a39216400e9c56021e918dc6",
+      key: "192f18d69d85d38dc0be8116c207961c9e4dcd28",
       type: "error",
       "test-id": "iconError"
     })), r("fieldset", {
-      key: "671bef4db48e6181a3d1ac542b3c50495b6d1d70",
+      key: "9e66e81e0f6aa9bd54a857ebfccc851f9efa4f68",
       onChange: this.onInnerCheckboxChange,
       "aria-invalid": this.hasError ? `${this.hasError}` : undefined
     }, t && r("legend", {
-      key: "043796604c9300ba8c04d6d53c7a554ba87dc159",
+      key: "9bb04149f29a9727e3350f06feeda8a171e41ee0",
       class: "sr-only"
     }, c(this)), this.inputDom()));
   }

package/dist/q2-tecton-elements/q2-checkbox_2.entry.js

@@ -178,10 +178,10 @@ const f = class {
     const e = [ "label-text" ];
     if (this.hideLabel) e.push("sr");
     return o("div", {
-      key: "ef32fc123a8e6205ae9821781d4a74391d68761e",
+      key: "7997e4f646425502ef9c924581fcdeb8360be82e",
       class: "container"
     }, o("input", {
-      key: "4d2e8c0e0a938a27a7252479ed462f14c286363e",
+      key: "75006c1a654bd5ba93dc1971b06e081a4f123af0",
       ref: e => this.inputElement = e,
       "aria-describedby": this.description ? "description" : undefined,
       "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`,
@@ -195,26 +195,26 @@ const f = class {
       type: "checkbox",
       value: this.value
     }), o("label", {
-      key: "79b3f172df48a414ee1d612d73f1c3cbb89c6cc6",
+      key: "e187b2771f6d8bb20ea77f31fa8dded912b6f295",
       htmlFor: this._id,
       class: "label-control",
       "test-id": "checkboxButton",
       "aria-label": this.composedAriaLabel
     }, this.renderCheckboxSVG()), o("div", {
-      key: "16ed427817793e7660fc6912cef776c1e3428468",
+      key: "d0a189c6d027457baf0b29947d199087fb354467",
       class: e.join(" ")
     }, o("label", {
-      key: "cc58ac3186fc7052f11dafd92dc50837ebdf729d",
+      key: "15df8e10cae026b83d4ab973140cd7b6c71cc483",
       "test-id": "checkboxLabel",
       htmlFor: this._id,
       "aria-hidden": "true"
     }, o("div", {
-      key: "62bf345f92850ea1e4e9f8dae1e88c739ef71a91",
+      key: "e868eb6071d299662b7e7ff9581be1dfc192e607",
       class: "label-content"
     }, d(this.label), o("slot", {
-      key: "c334401be83f977cd1b53ddf5b64182d528c1106"
+      key: "5bbd14bb697961435495efda9f0fc81801e67992"
     })))), this.description && o("div", {
-      key: "2b71f3fb0ce8d4990319bc89a4b924ff4dd75018",
+      key: "2b4783d58e21419b5209a77a7717fcaaa1ff39c3",
       class: "description-text",
       "test-id": "checkboxDescription",
       id: "description"