q2-tecton-elements 1.67.0 → 1.67.2

package/dist/cjs/tecton-tab-pane.cjs.entry.js

@@ -55,9 +55,9 @@ const TectonTabPane = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '7001a993b32e67644b26c0af1bd594c6e0bb9fd3', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (index.h("div", { key: '1e2cac90e08e633e5dd23ca2b1e7378ab77c1c03' }, index.h("slot", { key: '99ab7a254419bc59b7ee19afde9ad1d332d437be', name: "loading-wrapper" }), index.h("iframe", { key: '996630a2030f32a1d43cb574461b5c105934cec6', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (index.h("div", { key: '58a67b201accff4cdb0cf19172f3a91a6c8effd5', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (index.h("div", { key: '14ea6040e9a7c5c019d982e3f9e84227f0144d19' }, index.h("slot", { key: '2f23163c833f14e5b787f35d7af3fe162a6d3fb7', name: "loading-wrapper" }), index.h("iframe", { key: '9bdaf2ad2df5d0a0763aae906c7227d7e05052b7', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (index.h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), index.h("div", { key: '4f8b8a32f0d6f1b5102745845ae83f04d913964d', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: '2bbda438ddd7355fedc37e04ec7707736ddb1f03' }))));
+        }))) : (''))), index.h("div", { key: '8aeea96ffde0dfb337dd84e0346951d075b4d233', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: 'c81c5ad3f2c93436284fe928be54b58836ff0fff' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/collection-manifest.json

@@ -1,14 +1,11 @@
 {
   "entries": [
     "components/q2-btn/q2-btn.js",
-    "components/q2-data-table/q2-data-table.js",
-    "components/q2-file-picker/q2-file-picker.js",
     "components/q2-grid/q2-grid.js",
     "components/q2-grid-area/q2-grid-area.js",
     "components/q2-badge/q2-badge.js",
     "components/q2-icon/q2-icon.js",
     "components/q2-option-list/q2-option-list.js",
-    "components/q2-stepper-pane/q2-stepper-pane.js",
     "components/q2-calendar/q2-calendar.js",
     "components/q2-carousel/q2-carousel.js",
     "components/q2-checkbox/q2-checkbox.js",
@@ -36,8 +33,10 @@
     "components/q2-chart-donut/q2-chart-donut.js",
     "components/q2-context/q2-context.js",
     "components/q2-currency/q2-currency.js",
+    "components/q2-data-table/q2-data-table.js",
     "components/q2-detail/q2-detail.js",
     "components/q2-example/q2-example.js",
+    "components/q2-file-picker/q2-file-picker.js",
     "components/q2-form/q2-form.js",
     "components/q2-formatted-text/q2-formatted-text.js",
     "components/q2-item/q2-item.js",
@@ -59,6 +58,7 @@
     "components/q2-section/q2-section.js",
     "components/q2-section-container/q2-section-container.js",
     "components/q2-stepper/q2-stepper.js",
+    "components/q2-stepper-pane/q2-stepper-pane.js",
     "components/q2-stepper-vertical/q2-stepper-vertical.js",
     "components/q2-tab-container/q2-tab-container.js",
     "components/q2-tab-pane/q2-tab-pane.js",

package/dist/collection/components/q2-action-group/q2-action-group.js

@@ -230,7 +230,7 @@ export class Q2ActionGroup {
                 containerClassNames.push(className);
         });
         this.handleFullWidth(!!fullWidth);
-        return (h("q2-resize-observer", { key: '1f234887657142b616d3c3a448c6bfe69deabb81', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '0298fbe6f835d81f3949dbc593e49f9127dc8869', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: '20a11efddeae42e71a0c08804176c2ce9f6ef017' }))));
+        return (h("q2-resize-observer", { key: '1a1059e17ce66a88a89440ba211f4623e2cf620b', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '5b8dd716ba59d27d5148e370131cb7051f69219b', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: '3fa28dd8e8c606c8fe1bd8bb073849975c098d1d' }))));
     }
     static get is() { return "q2-action-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-action-sheet/q2-action-sheet.js

@@ -208,7 +208,7 @@ export class Q2ActionSheet {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: '94fc384fe3294c65180803cba588b2a62a49134e', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '0a9f4c75b07a2fe561e470466eae7afee5cec939', class: interiorClasses }, showHeader && (h("header", { key: '1ae290edbfbfd146867a19b9a926bfd596cfe4e8' }, h("div", { key: 'e297191a3d9a4b351c8f3527174b6823e5bc9b1b', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '3b8caf287bbfb9d2faa3de15a987a30a4d6487eb', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '6b5d8c410bef11176960292f90d51f9176c62d1c', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '2fe29408f3a3af7ac25f3af9d6ae495ae113846c' }, data.description), RenderContent && h(RenderContent, { key: 'c1494556026b26cf295f322d885787698ed7e8c9', data: this.data }))));
+        return (h("dialog", { key: '7ef6d64d3f29d01edcc5ba09c6917e08eb27ed0d', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'a7da46ce286106d4a14edd50a2ed926b0adb7c84', class: interiorClasses }, showHeader && (h("header", { key: '8de945c05de298bf044cb01b872e2f0db17d9910' }, h("div", { key: 'b4ec8e173b7109456d927e3f3ceeb8e6e936243d', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'ccb610c96edec66abf9f5b353c973e8af9702472', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '1989ba1b179b5053719a78a1d4b9359734f23f36', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '13fc69d21bf48b27f22555630a25c7019ede5a2e' }, data.description), RenderContent && h(RenderContent, { key: 'ec78bb8ee37838b38c32405c4292b6836e5deb5f', data: this.data }))));
     }
     static get is() { return "q2-action-sheet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-avatar/q2-avatar.js

@@ -90,7 +90,7 @@ export class Q2Avatar {
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: '0b0763459eef36a6c1b732ffe072ddea6ad7068f', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: '4d2f13a0aeb738b77b9b4fd1e9295b39ee2902e0', class: "decorator" }, h("slot", { key: 'fdace597ad36d65c598ec8e769c60d7216b20d6c', name: "decorator" }))), showImg && (h("img", { key: '171f2a32c21251cab74c48906708c2519ecdccd9', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: 'bdbdbf84cdae92c7267a30f85ac705505843e8ba', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'ae24a23a880a1f39dd760e90f81e3923769ca518', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'f80ef047816ad7c16017e9f0c0f5d983f3a69011', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: 'b2e96f1431ef35b35811937b6008badd4c415f97', type: this.icon })))));
+        return (h("div", { key: '905b33762261d024a3fc93b855f41ad34cd3ebb9', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: '2f56e72f62c7dc93e46861fedcb23dbb3b9f356a', class: "decorator" }, h("slot", { key: '367d339e3cb1d7cb967588c9f16aaac43fb113ae', name: "decorator" }))), showImg && (h("img", { key: 'aa8d8377e42e1dfbf23f293a94f4098b5048ed7a', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '01b678b18936040e367c6ccb1e693109058ec65b', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: '00e6e13fff99f79ed2c1aef06706a46b8db39836', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '8b11436b66465ff1894129484bb245f80a36ffbe', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '4813df821c1e7d89b338885f791db2cd3bbf0e8b', type: this.icon })))));
     }
     static get is() { return "q2-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-btn/q2-btn.js

@@ -61,17 +61,19 @@ export class Q2Btn {
     // #endregion
     // #region Listeners
     handleClick(event) {
+        var _a;
         if (this.loading || this.disabled) {
             event.stopImmediatePropagation();
             return;
         }
         this.tctClick.emit();
-        this.primaryBtn.focus();
+        (_a = this.primaryBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     delegateFocus(event) {
+        var _a;
         if (!isEventFromElement(event, this.hostElement))
             return;
-        this.primaryBtn.focus();
+        (_a = this.primaryBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     // #endregion
     // #region Watchers

package/dist/collection/components/q2-btn/q2-btn.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-btn.js","sourceRoot":"","sources":["../../../../src/components/q2-btn/q2-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Fragment,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport {\n    getAriaValueFromProp,\n    handleAriaLabel,\n    handleColor,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    handleDeprecationWarning,\n} from 'src/utils';\n\n/**\n * @name Button\n * @category Forms\n * @summary Use for triggering actions including submit, save, cancel, or delete.\n * @slot coin-label - An optional slot to display a custom coin button label.\n */\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n    // #region Own Properties\n\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    iconPosition: 'left' | 'right' | 'only';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Role attribute for better semantic accessibility support\n     */\n    @Prop({ reflect: true })\n    _role: string;\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\n\n    /**\n     * Displays the component in an active state.\n     *\n     * @info\n     * Only intended for use with the `badge` property.\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    @Prop()\n    ariaControls: string;\n\n    @Prop()\n    ariaExpanded: string;\n\n    @Prop()\n    ariaHasPopup: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    @Prop()\n    ariaPressed: string;\n\n    @Prop()\n    ariaSelected: string;\n\n    /**\n     * Displays the component in a smaller, badge style.\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    badge: boolean;\n\n    /** The component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    color: string; // deprecated but need it to use utils/handleColor\n\n    @Prop()\n    description: string;\n\n    /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    fab: boolean;\n\n    /**\n     * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n     */\n    @Prop({ reflect: true, mutable: true })\n    intent:\n        | 'coin'\n        | 'neutral-text'\n        | 'neutral'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'workflow-primary'\n        | 'workflow-secondary';\n\n    /**\n     * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n     * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n    @Prop({ reflect: true })\n    loading: boolean;\n\n    /**\n     * Defines the size of q2-btn, it renders as default size if not provided.\n     */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    @Prop()\n    tabIndex: number;\n\n    /** The default behavior of the button. */\n    @Prop({ reflect: true })\n    type: string = 'button';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the button is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.primaryBtn = null;\n        this.primaryBtnWrapper = null;\n    }\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        this.handleButtonSize();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click', { capture: true })\n    handleClick(event: Event) {\n        if (this.loading || this.disabled) {\n            event.stopImmediatePropagation();\n            return;\n        }\n        this.tctClick.emit();\n        this.primaryBtn.focus();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('size')\n    sizeObserver() {\n        this.handleButtonSize();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n            ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n                'true',\n                'false',\n                'menu',\n                'listbox',\n                'tree',\n                'grid',\n                'dialog',\n            ]),\n            ariaLabel: this.composedAriaLabel,\n            ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n            ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n            description: this.description !== undefined ? this.description : undefined,\n            disabled: this.disabled || false,\n            type: this.type,\n            tabindex: this.tabIndex || this.tabIndex === 0 ? this.tabIndex : undefined,\n        };\n    }\n\n    get buttonClasses() {\n        const classes = [];\n        if (this.iconPosition) classes.push(`icon-${this.iconPosition}`);\n        if (this.intent === 'coin') classes.push('intent-coin');\n        if (!!this.block) classes.push('is-block');\n        if (!!this.color) classes.push('has-color');\n        if (!!this.intent) classes.push(`has-intent`);\n        if (!!this.size) classes.push('has-size');\n        if (!!this.active) classes.push('is-active');\n\n        return classes.join(' ');\n    }\n\n    get coinLabelClasses() {\n        const classes = ['coin-label'];\n        if (this.disabled) {\n            classes.push('disabled');\n        }\n\n        return classes.join(' ');\n    }\n\n    get composedAriaLabel(): string | undefined {\n        const baseText =\n            this.label && this.hideLabel\n                ? loc(this.label)\n                : this.label || this.hostElement.textContent.trim() || undefined;\n\n        if (!this._tooltip && !baseText) return undefined;\n        if (!this._tooltip) return this.hideLabel ? baseText : undefined;\n        if (!baseText) return this._tooltip;\n        return `${baseText} - ${this._tooltip}`;\n    }\n\n    handleButtonSize = () => {\n        if (Number(this.size) <= 4) {\n            handleDeprecationWarning(this, 'size', 'prop');\n        }\n    };\n\n    handleIcons = () => {\n        // Only allow one icon in the button\n        const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n            if (acc) element.remove();\n            else acc = element;\n            return acc;\n        }, null);\n\n        const hasIcon = !!icon;\n        const hasLoc = !!this.hostElement.querySelector('q2-loc');\n        const hasText = !!this.hostElement.textContent.trim();\n        const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n        const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n        const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n        let iconPosition;\n        if (hasIconOnly) iconPosition = 'only';\n        else if (hasIconLeft) iconPosition = 'left';\n        else if (hasIconRight) iconPosition = 'right';\n        this.iconPosition = iconPosition;\n    };\n\n    handleSlotChange = () => {\n        this.handleIcons();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderButton() {\n        const {\n            ariaExpanded,\n            ariaHasPopup,\n            ariaLabel,\n            ariaSelected,\n            ariaPressed,\n            description,\n            disabled,\n            type,\n            tabindex,\n        } = this.buttonAttributes;\n        const { iconPosition, loading, badge, hideLabel } = this;\n        const renderLoadingSpinner = iconPosition || loading;\n        const isLoadingSpinnerInline = !iconPosition || badge;\n        return (\n            <Fragment>\n                <button\n                    ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n                    aria-expanded={ariaExpanded}\n                    aria-haspopup={ariaHasPopup}\n                    aria-label={ariaLabel}\n                    aria-selected={ariaSelected}\n                    aria-pressed={ariaPressed}\n                    disabled={disabled}\n                    type={type}\n                    tabindex={tabindex}\n                    test-id=\"q2BtnInnerButton\"\n                    class={this.buttonClasses}\n                    aria-describedby={!!description ? 'hidden-description' : undefined}\n                    aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n                    role={this._role || undefined}\n                >\n                    <div class=\"slot-container\">\n                        {renderLoadingSpinner && (\n                            <q2-loading\n                                hidden={!loading}\n                                modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n                            />\n                        )}\n                        {this.renderDefaultLabel()}\n                        {this.renderDefaultCoinSlot()}\n                    </div>\n                </button>\n                {this.renderCoinLabel()}\n                {!!description && (\n                    <div\n                        id=\"hidden-description\"\n                        aria-hidden=\"true\"\n                        class=\"sr\"\n                    >\n                        {description}\n                    </div>\n                )}\n            </Fragment>\n        );\n    }\n\n    renderCoinLabel() {\n        if (this.intent !== 'coin' || this.hideLabel) return;\n        return (\n            <div\n                id=\"coin-label\"\n                class={this.coinLabelClasses}\n            >\n                {this.label ? (\n                    loc(this.label)\n                ) : (\n                    <slot\n                        name=\"coin-label\"\n                        onSlotchange={this.handleSlotChange}\n                    />\n                )}\n            </div>\n        );\n    }\n\n    renderDefaultCoinSlot() {\n        if (this.intent !== 'coin') return;\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    renderDefaultLabel() {\n        if (this.intent === 'coin') return;\n        if (!this.hideLabel && this.label) return loc(this.label);\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    render() {\n        return (this.size === 'small' && this.iconPosition !== 'only') || this.intent === 'coin' ? (\n            // wrap only for small sized and coin intent\n            <div\n                class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n                ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n                tabIndex={this.size === 'small' ? -1 : undefined}\n            >\n                {this.renderButton()}\n            </div>\n        ) : (\n            this.renderButton()\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-btn.js","sourceRoot":"","sources":["../../../../src/components/q2-btn/q2-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/q2-calendar/q2-calendar.js

@@ -799,7 +799,7 @@ export class Q2Calendar {
         return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, "aria-expanded": `${!!this.open}`, "aria-controls": "calendar-popover", hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'b56461b08364576460861bfacee8da16e482d85b', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '9bba51d05ce0752dd874361c7f3b9b82db86bc70', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
+        return (h("click-elsewhere", { key: '0982135e2be03261bf81a48de77ef8d564cedb78', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: 'd18140e57015148d2e2bb86e00af20a5d8d8d69f', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
     }
     static get is() { return "q2-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-calendar/q2-month-picker.js

@@ -134,10 +134,10 @@ export class Q2MonthPicker {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'a79408285992125baf4ab6771f6501d79a6245df', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '857185b3278ee9b9f346686e587a39250130e532', class: "navigation" }, h("q2-btn", { key: 'f698f8ea247ba18ecd40d22c74c4247fa300cf3d', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: 'c80017d8e2998167716488b46dd52cecfc47dcc5', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '7f14b1eac6019175522e7c5fc4b5b5b0b2967723', class: "navigation" }, h("q2-btn", { key: '4cc17ededea2f273f45b27e4ddee49cd6ac5b412', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: 'fc467f87579a2a1c90c72e22aa49715ed4130d22', class: "year" }, this.year), h("q2-icon", { key: '545d4a90b2c57ef0109475746f963a879c4d69d8', class: "year-icon off", type: "chevron-down" })), h("div", { key: '1b1c130e07944ab988e981f41b3351237a638f7e', class: "month-controller" }, h("div", { key: '5967309b329f2f0697a26a69d91dfb50b0a6d526', class: "cal-year-prev-next" }, h("q2-btn", { key: '23295dbba205dd04a809511501b49b74bd845f16', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '845a1a049fe80fd08470cbaf1b530bcf41734c39', type: "arrow-left" })), h("q2-btn", { key: '2074d486e8a0d00cee2ac874230ff2411444f669', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '97699d8fa0378afa468bbb71e8bce6ccb9e78423', type: "arrow-right" }))))), h("div", { key: 'f373f6a783137aca3691fdfdc70bea04d487b63e', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: 'b85641400c0c17171278735aa8e8b81f2497ac27', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '8165df4a38cfe5793689cb45bca424aaf6bcbf64', class: "year" }, this.year), h("q2-icon", { key: '827073a13b6d003b328a0fd8f8525b9b2a013ff2', class: "year-icon off", type: "chevron-down" })), h("div", { key: '5b46832d6adc2f00e5a7db0f43446b9c6b89ecad', class: "month-controller" }, h("div", { key: '8d25fa53c29f394461217255b6feb0ccd35ff884', class: "cal-year-prev-next" }, h("q2-btn", { key: '7c9b873b8111b50fe82d138e9f826c3cf3bbfff7', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '5b1f1906753a8b759c0b620deb49869834193035', type: "arrow-left" })), h("q2-btn", { key: 'dac82b2f5d88ecdc6d7fb0566fd4847615269949', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: 'db889911237e7655047f33e8e19b845de8203f57', type: "arrow-right" }))))), h("div", { key: '4a4740d1513e1f970ef2754a1a7ac24299e1683c', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '26ac01a5dc62b4c1f97701f19bd81e8d6569e9f1', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     static get is() { return "q2-month-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-card-image/q2-card-image.js

@@ -367,11 +367,11 @@ export class Q2CardImage {
     render() {
         const cardContent = this.clickable ? (h("q2-btn", { disabled: this.disabled, label: this.accessibilityLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
         const showBanner = !!this.cardStatus && this.size === 'large';
-        return (h(Host, { key: 'd1592e6d7239707ec8608f9458bc0066bca5d407', class: {
+        return (h(Host, { key: 'f8ff5ff3349340873c965ac61f4411575fea0e7a', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), h("div", { key: 'e45f8f705256b70e527d5e95d3a13b7c9e1938e2', class: "card-wrapper" }, cardContent, this.renderAction())));
+            } }, this.renderStatusBanner(), h("div", { key: 'e665a74e47232275906e499e02d513ea20cdd21b', class: "card-wrapper" }, cardContent, this.renderAction())));
     }
     static get is() { return "q2-card-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-carousel/q2-carousel.js

@@ -401,7 +401,7 @@ export class Q2Carousel {
             paginationWrapperClasses.push('evenly-space');
         if (showNavigationArrows && arrowPosition === 'hug')
             paginationWrapperClasses.push('center-space');
-        return (h(Host, { key: '56ecddd3c2bbad43dba7fdb949d539a937b3e5f0', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
+        return (h(Host, { key: '7c8a2c87c41d8621971bff9a22ab8de2439276c5', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&
             this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&

package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js

@@ -97,12 +97,12 @@ export class Q2CarouselPane {
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '156420cbdaf48d8d1e6e14c05e745ff0df308a2a', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (h(Host, { key: '82eb1502a11ae372d979f81043dc2defc4bb45ac', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: '2f61bdfa9d9e4413941d0ca2f1edc9fc2cd48e8e', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'd498b8a73ba1a668bb768891d37b2303db976012' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: '1d67b902248a3fec6cdca88199f3f206c9702188', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'd22aac4e2004baa840182c119751923c023dde29' }))));
     }
     static get is() { return "q2-carousel-pane"; }
     static get originalStyleUrls() {

package/dist/collection/components/q2-chart-area/q2-chart-area.js

@@ -252,7 +252,7 @@ export class Q2ChartArea {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '81f8432837d66f500da8403dbc25727c44635a03', class: "container" }, h("div", { key: 'fcd3f4aa43d89467591140cbe211c7d5e35316fa', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '37129ccaf8f459d8a600de7f0c4a2d28a0d8acc3', class: "container" }, h("div", { key: 'eb1e9f5290cc300f848721e093eac01efd5f52f6', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     static get is() { return "q2-chart-area"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-chart-bar/q2-chart-bar.js

@@ -189,7 +189,7 @@ export class Q2ChartBar {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'bea029d1b2ab1650f3a8dd60f64bd5640752632b', class: "container" }, h("div", { key: '1a240fcde7691730648aa698a3cb57b98cb1f95f', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: 'e0ef7177ebb56392ef550b5190a28d34bd93c1a2', class: "container" }, h("div", { key: '8be60d7c6c0ca570fb3515998a47862aa6a29676', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
     }
     static get is() { return "q2-chart-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-chart-donut/q2-chart-donut.js

@@ -520,7 +520,7 @@ export class Q2ChartDonut {
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '473d5d1b512e2d4d9ad9e215ebf597aaad0854d2', onChange: this.onClickElsewhere }, h("figure", { key: 'aa22d00635231662d6b446066b9fdc33c2f8748d' }, h("div", { key: '71f74bf9dbc69de99a88204ccc51d4d5864dfbf3', class: "container" }, h("div", { key: '9d2ff90b01d25ecd018a5e1a10dbac4726557ebb', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '0795c3b57206c94c65ab1e81162dc9409426dbe9' }, h("q2-legend", { key: '58009cbd37d9ffaea2dd429b074f00b736eea866', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: 'eb78727bb8c480478cde795c1e6bd744f988480f', onChange: this.onClickElsewhere }, h("figure", { key: '041df945c97ac0e291340123b54b3c0c14d2981e' }, h("div", { key: '550a9445398812293af981ff10d4109ed23657c9', class: "container" }, h("div", { key: '48d7a6a9639c4a3f19ec1534d08d456474a206d7', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '7764c5810953930a594449817e2906699346df6c' }, h("q2-legend", { key: '7674d2cfd8da31367f4e1b56d42f09b79f4ba99b', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     static get is() { return "q2-chart-donut"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-checkbox/q2-checkbox.css

@@ -106,9 +106,10 @@ button {
   --comp-checkbox-description-stroke-width: var(--tct-checkbox-description-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
   --comp-checkbox-description-focused-stroke-width: var(--tct-checkbox-description-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
   --comp-checkbox-description-hover-stroke-width: var(--tct-checkbox-description-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
+  --comp-checkbox-toggle-circle-fill-active: var(--tct-checkbox-toggle-active-fill, var(--tct-checkbox-toggle-active-color, var(--comp-checkbox-toggle-color)));
   display: grid;
   grid-template-areas: "svg label" "svg description";
-  align-items: center;
+  align-items: start;
   gap: var(--comp-checkbox-gap);
   grid-template-columns: var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap));
 }
@@ -429,6 +430,9 @@ label {
   -webkit-text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);
   text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);
 }
+:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-circle {
+  fill: var(--comp-checkbox-toggle-circle-fill-active);
+}
 :host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])) .toggle-track {
   box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);
   fill: var(--comp-checkbox-toggle-track-fill-error);

package/dist/collection/components/q2-checkbox/q2-checkbox.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
 /**
@@ -10,6 +10,9 @@ export class Q2Checkbox {
     constructor() {
         // #region Own Properties
         this._id = `checkbox-${createGuid()}`;
+        // #endregion
+        // #region State Properties
+        this.hasDescription = false;
         /** The state of the checkbox. This modifies the visual appearance of the element. */
         this.checked = false;
         /** Determines if the component should display in an errant state. */
@@ -32,12 +35,18 @@ export class Q2Checkbox {
     }
     // #endregion
     // #region Component Lifecycle Events
+    disconnectedCallback() {
+        var _a;
+        (_a = this.descriptionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     componentWillLoad() {
         handleAriaLabel(this);
+        this.checkForDescription();
     }
     componentDidLoad() {
         overrideFocus(this.hostElement);
         this.hostElement.click = () => this.inputElement.click();
+        this.setupDescriptionObserver();
     }
     // #endregion
     // #region Listeners
@@ -57,15 +66,27 @@ export class Q2Checkbox {
     }
     // #endregion
     // #region Local Methods
-    get composedAriaLabel() {
-        const baseText = loc(this.label) || undefined;
-        if (!this._tooltip && !baseText)
+    get ariaLabelledBy() {
+        const hasLabel = !!loc(this.label) ||
+            !!this.hostElement.querySelector('[slot="label"]') ||
+            Array.from(this.hostElement.childNodes).some(node => { var _a; return !(node instanceof HTMLElement && node.getAttribute('slot')) && !!((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()); });
+        if (!hasLabel && !this._tooltip)
             return undefined;
-        if (!this._tooltip)
-            return baseText;
-        if (!baseText)
-            return this._tooltip;
-        return `${baseText} - ${this._tooltip}`;
+        const ids = [];
+        if (hasLabel)
+            ids.push(this.labelId);
+        if (this._tooltip)
+            ids.push(this.tooltipId);
+        return ids.join(' ');
+    }
+    get labelId() {
+        return `label-${this._id}`;
+    }
+    get tooltipId() {
+        return `tooltip-${this._id}`;
+    }
+    checkForDescription() {
+        this.hasDescription = !!this.description || !!this.hostElement.querySelector('[slot="description"]');
     }
     handleChangeEvent(event) {
         if (this.readonly ||
@@ -78,6 +99,15 @@ export class Q2Checkbox {
         }
         this.checked = event.detail.checked;
     }
+    setupDescriptionObserver() {
+        this.descriptionObserver = new MutationObserver(() => {
+            this.checkForDescription();
+        });
+        this.descriptionObserver.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+        });
+    }
     // #endregion
     // #region Render Methods
     renderCheckboxSVG() {
@@ -102,7 +132,7 @@ export class Q2Checkbox {
         const textLabelClasses = ['label-text'];
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (h("div", { key: 'ef32fc123a8e6205ae9821781d4a74391d68761e', class: "container" }, h("input", { key: '4d2e8c0e0a938a27a7252479ed462f14c286363e', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '79b3f172df48a414ee1d612d73f1c3cbb89c6cc6', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-label": this.composedAriaLabel }, this.renderCheckboxSVG()), h("div", { key: '16ed427817793e7660fc6912cef776c1e3428468', class: textLabelClasses.join(' ') }, h("label", { key: 'cc58ac3186fc7052f11dafd92dc50837ebdf729d', "test-id": "checkboxLabel", htmlFor: this._id, "aria-hidden": "true" }, h("div", { key: '62bf345f92850ea1e4e9f8dae1e88c739ef71a91', class: "label-content" }, loc(this.label), h("slot", { key: 'c334401be83f977cd1b53ddf5b64182d528c1106' })))), this.description && (h("div", { key: '2b71f3fb0ce8d4990319bc89a4b924ff4dd75018', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+        return (h("div", { key: '85510401109c8178df2030f13f9ae5bf25a1712b', class: "container" }, h("input", { key: '04e5acd4a3261aa0878560985567547dd860c24a', ref: el => (this.inputElement = el), "aria-describedby": this.hasDescription ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, "aria-labelledby": this.ariaLabelledBy, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '57906a968d98516db9be351beca12e3b6e4e2f28', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-hidden": "true" }, this.renderCheckboxSVG()), h("div", { key: 'b28bc3f3f807318a4c9efa4942d7235ab05cfc19', class: textLabelClasses.join(' ') }, h("label", { key: '1606b6ac48fd7726f291a2c393d5988ddf35203f', "test-id": "checkboxLabel", htmlFor: this._id, id: this.labelId }, h("div", { key: '1de9ab5c373a5a8f0ed903897fd4ebac84816d83', class: "label-content" }, loc(this.label), h("slot", { key: '3e9bf0f5a40a7683281a2ecb00fb29109919a919' }), h("slot", { key: 'ba1f1b47cfb77fef629225625c8b5a0adc63c2aa', name: "label" })))), this._tooltip && (h("span", { key: '1d6f82a46450ba5c40d10a1d82b422a83417ce6c', id: this.tooltipId, class: "sr", "test-id": "checkboxTooltipText" }, this._tooltip)), this.hasDescription && (h("div", { key: '2055226d379a78b9569a2a2af59287f9170b4e7a', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description), h("slot", { key: '01549fb0ef8c939037eb0d0960905de58222b22d', name: "description" })))));
     }
     static get is() { return "q2-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -444,6 +474,11 @@ export class Q2Checkbox {
             }
         };
     }
+    static get states() {
+        return {
+            "hasDescription": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "change",

package/dist/collection/components/q2-checkbox/q2-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Checkbox\n * @category Forms\n * @summary Use as a single binary choice; nest within a Checkbox Group for grouped selection.\n */\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\n\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true })\n    alignment: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    groupDisabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true })\n    indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true })\n    type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @deprecated Use 'tctChange' instead\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; checked: boolean }>;\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string; checked: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get composedAriaLabel(): string | undefined {\n        const baseText = loc(this.label) || undefined;\n        if (!this._tooltip && !baseText) return undefined;\n        if (!this._tooltip) return baseText;\n        if (!baseText) return this._tooltip;\n        return `${baseText} - ${this._tooltip}`;\n    }\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.renderToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.renderCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    renderCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n                key={`checkmark-${this.checked}`}\n            />\n        );\n    }\n\n    renderToggleSVG() {\n        return (\n            <div class=\"toggle-svg-container\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 38 24\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"38\"\n                        height=\"24\"\n                        rx=\"12\"\n                    ></rect>\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 18 18\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <defs>\n                        {/* Mask for the X icon */}\n                        <mask\n                            id=\"xMask\"\n                            maskUnits=\"userSpaceOnUse\"\n                        >\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            ></rect>\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"6.5\"\n                                x2=\"11.5\"\n                                y2=\"11.5\"\n                                stroke=\"black\"\n                                stroke-width=\"2\"\n                            ></line>\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"11.5\"\n                                x2=\"11.5\"\n                                y2=\"6.5\"\n                                stroke=\"black\"\n                                stroke-width=\"2\"\n                            ></line>\n                        </mask>\n                        {/* Mask for the checkmark icon */}\n                        <mask id=\"checkMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <polyline\n                                class=\"toggle-icon\"\n                                points=\"6,8.5 8.5,11 12.5,6.5\"\n                                fill=\"none\"\n                            />\n                        </mask>\n                    </defs>\n                    <circle\n                        class=\"toggle-circle\"\n                        cx=\"9\"\n                        cy=\"9\"\n                        r=\"9\"\n                        mask=\"url(#xMask)\"\n                    ></circle>\n                </svg>\n            </div>\n        );\n    }\n\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                    aria-label={this.composedAriaLabel}\n                >\n                    {this.renderCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                        aria-hidden=\"true\"\n                    >\n                        <div class=\"label-content\">\n                            {loc(this.label)}\n                            <slot />\n                        </div>\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Listen,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Checkbox\n * @category Forms\n * @summary Use as a single binary choice; nest within a Checkbox Group for grouped selection.\n */\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-${createGuid()}`;\n    descriptionObserver: MutationObserver;\n    inputElement: HTMLInputElement;\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    hasDescription: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\n\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true })\n    alignment: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    groupDisabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true })\n    indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true })\n    type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @deprecated Use 'tctChange' instead\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; checked: boolean }>;\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string; checked: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.descriptionObserver?.disconnect();\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.checkForDescription();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n        this.setupDescriptionObserver();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get ariaLabelledBy(): string | undefined {\n        const hasLabel =\n            !!loc(this.label) ||\n            !!this.hostElement.querySelector('[slot=\"label\"]') ||\n            Array.from(this.hostElement.childNodes).some(\n                node => !(node instanceof HTMLElement && node.getAttribute('slot')) && !!node.textContent?.trim()\n            );\n        if (!hasLabel && !this._tooltip) return undefined;\n        const ids = [];\n        if (hasLabel) ids.push(this.labelId);\n        if (this._tooltip) ids.push(this.tooltipId);\n        return ids.join(' ');\n    }\n\n    get labelId(): string {\n        return `label-${this._id}`;\n    }\n\n    get tooltipId(): string {\n        return `tooltip-${this._id}`;\n    }\n\n    checkForDescription() {\n        this.hasDescription = !!this.description || !!this.hostElement.querySelector('[slot=\"description\"]');\n    }\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    setupDescriptionObserver() {\n        this.descriptionObserver = new MutationObserver(() => {\n            this.checkForDescription();\n        });\n\n        this.descriptionObserver.observe(this.hostElement, {\n            childList: true,\n            subtree: true,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.renderToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.renderCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    renderCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n                key={`checkmark-${this.checked}`}\n            />\n        );\n    }\n\n    renderToggleSVG() {\n        return (\n            <div class=\"toggle-svg-container\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 38 24\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"38\"\n                        height=\"24\"\n                        rx=\"12\"\n                    ></rect>\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 18 18\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <defs>\n                        {/* Mask for the X icon */}\n                        <mask\n                            id=\"xMask\"\n                            maskUnits=\"userSpaceOnUse\"\n                        >\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            ></rect>\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"6.5\"\n                                x2=\"11.5\"\n                                y2=\"11.5\"\n                                stroke=\"black\"\n                                stroke-width=\"2\"\n                            ></line>\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"11.5\"\n                                x2=\"11.5\"\n                                y2=\"6.5\"\n                                stroke=\"black\"\n                                stroke-width=\"2\"\n                            ></line>\n                        </mask>\n                        {/* Mask for the checkmark icon */}\n                        <mask id=\"checkMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <polyline\n                                class=\"toggle-icon\"\n                                points=\"6,8.5 8.5,11 12.5,6.5\"\n                                fill=\"none\"\n                            />\n                        </mask>\n                    </defs>\n                    <circle\n                        class=\"toggle-circle\"\n                        cx=\"9\"\n                        cy=\"9\"\n                        r=\"9\"\n                        mask=\"url(#xMask)\"\n                    ></circle>\n                </svg>\n            </div>\n        );\n    }\n\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.hasDescription ? 'description' : undefined}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                    aria-labelledby={this.ariaLabelledBy}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                    aria-hidden=\"true\"\n                >\n                    {this.renderCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                        id={this.labelId}\n                    >\n                        <div class=\"label-content\">\n                            {loc(this.label)}\n                            <slot />\n                            <slot name=\"label\" />\n                        </div>\n                    </label>\n                </div>\n                {this._tooltip && (\n                    <span\n                        id={this.tooltipId}\n                        class=\"sr\"\n                        test-id=\"checkboxTooltipText\"\n                    >\n                        {this._tooltip}\n                    </span>\n                )}\n                {this.hasDescription && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                        <slot name=\"description\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.js

@@ -120,7 +120,7 @@ export class Q2CheckboxGroup {
     render() {
         const showLabel = this.label || this.optional || this.readonly;
         const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;
-        return (h(Fragment, { key: 'eaff44b5a38dc022c372e375ec153d42b4a52c7f' }, showLabelRow && (h("div", { key: '8252c6b3958656e3891709de3c54eb6a74247bf0', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '7a9e381063cfc689f0828dfb926434a9c042121a', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: 'c6e3ffeab88703d7a39216400e9c56021e918dc6', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '671bef4db48e6181a3d1ac542b3c50495b6d1d70', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: '043796604c9300ba8c04d6d53c7a554ba87dc159', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: '4e9159cc489b8c2ed9adf3c8263355994364780e' }, showLabelRow && (h("div", { key: '85c21ddc03d2abaf4e78b1922dcf3705ec673fc9', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '071eb3359b048a5e7f89f7c525362e065707a8fe', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '76a591fb52671d43351322faa488608128320183', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '0bcc9a5419df7ab0bf2abfc6189983e6cf5bd779', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: 'c6a5f3ec8289091b6d113a36d2fed9b83a5c7088', class: "sr-only" }, renderLabel(this)), this.inputDom())));
     }
     static get is() { return "q2-checkbox-group"; }
     static get encapsulation() { return "shadow"; }