q2-tecton-elements 1.67.1 → 1.67.2

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: '077f6e7ab0a5a6102cabf09ab4d80059759f24e4', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '43ee070fa56554f895e8d1ff86c81699cd69e3ef', class: interiorClasses }, showHeader && (h("header", { key: '6a846ed9be91c7d6f2892d8ed6d38327a9f8f15a' }, h("div", { key: 'f4a3b768f9ad448f05f4745d38f1598a4a3b3886', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '5e51264235990b96ad0ccdfe73d9dc0ac3d03267', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '8c049f7b79abddf1552dd265d4a9654b9e8aa9c1', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: 'bc3ab1f5cfe359ccad839f46eaf5b5eef5975322' }, data.description), RenderContent && h(RenderContent, { key: '5225ff71d47bc8ef4f4963246976b94420daf1b3', 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: 'bdce1116b87a48c861e7ba66e0dccd13829d3819', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: '461db5f2062faa3c4d7f43105c84c51aabc179d8', class: "decorator" }, h("slot", { key: '673a93a53a752514bce15687f5791682fdf3b0b7', name: "decorator" }))), showImg && (h("img", { key: 'fa881cb161c7f2bf64dabc1cf888d465e4698cb9', 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: '6d8707c833fed056813f81b9014e82584444fa54', 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: 'ae99c0b68abaa70e9517dee3dfe6dfdccdad13d6', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'df92213216e69c7d933fdfcd4ba1664cee793e14', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '373a344abc59c1e8ea07472d932d5417265582d3', 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-calendar/q2-month-picker.js

@@ -134,10 +134,10 @@ export class Q2MonthPicker {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'b7429b5ed21f7cda666f140a9a93ee643176979c', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '802900b16d0efa602df89edb22e174329736dca4', class: "navigation" }, h("q2-btn", { key: '0a318088ab2eb826620c056246599f5b7803c51e', 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: '02018f884cb7b48fb581597fc7d5a2a323497668', class: "year" }, this.year), h("q2-icon", { key: '9ab23a381d4fedb5aca2ecee19eb975d76ff4465', class: "year-icon off", type: "chevron-down" })), h("div", { key: '79dd4cd0864d051a4252c21ebbd697e0e75b0ec3', class: "month-controller" }, h("div", { key: 'd94ad2ebfc317206bfff5b16861c52507a168e09', class: "cal-year-prev-next" }, h("q2-btn", { key: '4d8b12fde9825bd5dca90012d42e73453f2cb777', 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: '428b2feb8854e145bdbc88bdd2c6a2c25a3a50ce', type: "arrow-left" })), h("q2-btn", { key: '2f7ef439402c9788ae002a199813387a370e0ed3', 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: '5931c20eac7a2268c6b945b336f44e143e9fe484', type: "arrow-right" }))))), h("div", { key: '9e18ae0e86a741201eb2a8c6ff04b9007899cbae', 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: '8dfee8bcf4ee9b4137c9c8644be7f38f5794bf4d', 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: '3c71f0e8e6fd22ebf3a3e3b98f890767ced6060b', class: {
+        return (h(Host, { key: 'f8ff5ff3349340873c965ac61f4411575fea0e7a', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), h("div", { key: '761c7a611ec3f8e0ffd7a5b51e2944f83876f5ae', 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-pane/q2-carousel-pane.js

@@ -97,12 +97,12 @@ export class Q2CarouselPane {
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '6d221b15545378efa40b54864b2ebca1bcb1e983', 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: '394965fb0a46501fcd33aa3acadb2eaae6a1accd', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'a059daeb1c5192cec8594b6c9843828d6b833f12' }))));
+                ]), 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: '247b79eca7719feab470918648f223675483daf8', class: "container" }, h("div", { key: '349272c0ece24581f05dcadb81d7a19dd71eaa2d', 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: '36a77a29d5e06363f2cd2267c298429cd2ef9864', class: "container" }, h("div", { key: 'e7382ecf3ed8323ffbf1c57a78c870d7d7c4b718', 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: 'e11f9f591cc6329f91d2017d556cabe0f3f797c9', onChange: this.onClickElsewhere }, h("figure", { key: 'af092b44df48422b76507f557ca6aa6508753de9' }, h("div", { key: '4384fdcb1864496619ab0b097e71faa22eb3aeb5', class: "container" }, h("div", { key: '99f261a2ba8952b598d28599c2b1848fcfdecf6c', 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: '4ead6e4332aeda66219d3a2c7ac15b0446442734' }, h("q2-legend", { key: '53d5408e4beb519dd9af1a06603ca7f3cc597577', 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: '7997e4f646425502ef9c924581fcdeb8360be82e', class: "container" }, h("input", { key: '75006c1a654bd5ba93dc1971b06e081a4f123af0', 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: 'e187b2771f6d8bb20ea77f31fa8dded912b6f295', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-label": this.composedAriaLabel }, this.renderCheckboxSVG()), h("div", { key: 'd0a189c6d027457baf0b29947d199087fb354467', class: textLabelClasses.join(' ') }, h("label", { key: '15df8e10cae026b83d4ab973140cd7b6c71cc483', "test-id": "checkboxLabel", htmlFor: this._id, "aria-hidden": "true" }, h("div", { key: 'e868eb6071d299662b7e7ff9581be1dfc192e607', class: "label-content" }, loc(this.label), h("slot", { key: '5bbd14bb697961435495efda9f0fc81801e67992' })))), this.description && (h("div", { key: '2b4783d58e21419b5209a77a7717fcaaa1ff39c3', 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":"AAAA,OAAO,EACH,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,kBAAkB,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAChG,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAE7C;;;;GAIG;AAEH,MAAM,OAAO,UAAU;IADvB;QAEI,yBAAyB;QAEzB,QAAG,GAAW,YAAY,UAAU,EAAE,EAAE,CAAC;QAUzC,aAAa;QACb,2BAA2B;QAG3B,mBAAc,GAAY,KAAK,CAAC;QAoBhC,qFAAqF;QAErF,YAAO,GAAY,KAAK,CAAC;QAoBzB,qEAAqE;QAErE,aAAQ,GAAY,KAAK,CAAC;QAsJ1B,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YAC5B,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC;YAC7E,IAAI,gBAAgB;gBAAE,OAAO;YAC7B,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,YAAY,gBAAgB,CAAC;gBAAE,OAAO;YACxD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAExC,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE;gBACtC,KAAK;gBACL,OAAO;aACV,CAAC,CAAC;YACH,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC9B,CAAC,CAAC;KAwNL;IA1TG,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,mBAAmB,0CAAE,UAAU,EAAE,CAAC;IAC3C,CAAC;IAED,iBAAiB;QACb,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAED,gBAAgB;QACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QACzD,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACpC,CAAC;IAED,aAAa;IACb,oBAAoB;IAGpB,oBAAoB,CAAC,KAAkB;QACnC,kEAAkE;QAClE,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,CAAC;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;IAC/D,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,iBAAiB;QACb,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,cAAc;QACd,MAAM,QAAQ,GACV,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;YACjB,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC;YAClD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,IAAI,CACxC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,CAAC,IAAI,YAAY,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,CAAA,EAAA,CACpG,CAAC;QACN,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,SAAS,CAAC;QAClD,MAAM,GAAG,GAAG,EAAE,CAAC;QACf,IAAI,QAAQ;YAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACrC,IAAI,IAAI,CAAC,QAAQ;YAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC5C,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC;IAED,IAAI,OAAO;QACP,OAAO,SAAS,IAAI,CAAC,GAAG,EAAE,CAAC;IAC/B,CAAC;IAED,IAAI,SAAS;QACT,OAAO,WAAW,IAAI,CAAC,GAAG,EAAE,CAAC;IACjC,CAAC;IAED,mBAAmB;QACf,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACzG,CAAC;IAED,iBAAiB,CAAC,KAAuD;QACrE,IACI,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,WAAW,CAAC,QAAQ;YACzB,KAAK,CAAC,gBAAgB;YACtB,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW;YACjC,CAAC,KAAK,CAAC,MAAM,EACf,CAAC;YACC,OAAO;QACX,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;IACxC,CAAC;IAkBD,wBAAwB;QACpB,IAAI,CAAC,mBAAmB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACjD,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YAC/C,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SAChB,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,iBAAiB;QACb,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC3B,OAAO,CACH,eACI,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,eAAe,GACvB,CACL,CAAC;QACN,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;QAClC,CAAC;QAED,OAAO,CACH,0BACgB,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,eAAe,EACrB,SAAS,EAAC,OAAO;YAEjB,YACI,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,GAAG,GACR;YACD,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,qBAAqB,EAAE,CACnE,CACT,CAAC;IACN,CAAC;IAED,qBAAqB;QACjB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,OAAO,CACH,YACI,KAAK,EAAC,kCAAkC,EACxC,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,GACT,CACL,CAAC;QACN,CAAC;QACD,OAAO,CACH,gBACI,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,oBAAoB,EAC3B,GAAG,EAAE,aAAa,IAAI,CAAC,OAAO,EAAE,GAClC,CACL,CAAC;IACN,CAAC;IAED,eAAe;QACX,OAAO,CACH,WAAK,KAAK,EAAC,sBAAsB;YAC7B,0BACgB,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,cAAc,aACZ,aAAa;gBAErB,YACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,IAAI,GACH,CACN;YACN,0BACgB,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,kBAAkB,aAChB,iBAAiB;gBAEzB;oBAEI,YACI,EAAE,EAAC,OAAO,EACV,SAAS,EAAC,gBAAgB;wBAE1B,YACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,OAAO,GACR;wBACR,YACI,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,MAAM,EAAC,OAAO,kBACD,GAAG,GACZ;wBACR,YACI,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,KAAK,EACR,MAAM,EAAC,OAAO,kBACD,GAAG,GACZ,CACL;oBAEP,YAAM,EAAE,EAAC,WAAW;wBAChB,YACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,OAAO,GACd;wBACF,gBACI,KAAK,EAAC,aAAa,EACnB,MAAM,EAAC,uBAAuB,EAC9B,IAAI,EAAC,MAAM,GACb,CACC,CACJ;gBACP,cACI,KAAK,EAAC,eAAe,EACrB,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACL,IAAI,EAAC,aAAa,GACZ,CACR,CACJ,CACT,CAAC;IACN,CAAC;IAED,MAAM;QACF,MAAM,gBAAgB,GAAG,CAAC,YAAY,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,SAAS;YAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,OAAO,CACH,4DAAK,KAAK,EAAC,WAAW;YAClB,8DACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,sBACjB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,kBACnD,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,qBACzD,IAAI,CAAC,cAAc,EACpC,OAAO,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,EACpD,KAAK,EAAC,IAAI,EACV,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,EACjD,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,aAClB,yBAAyB,EACjC,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB;YACF,8DACI,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,KAAK,EAAC,eAAe,aACb,gBAAgB,iBACZ,MAAM,IAEjB,IAAI,CAAC,iBAAiB,EAAE,CACrB;YACR,4DAAK,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC;gBAClC,yEACY,eAAe,EACvB,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,EAAE,EAAE,IAAI,CAAC,OAAO;oBAEhB,4DAAK,KAAK,EAAC,eAAe;wBACrB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;wBAChB,8DAAQ;wBACR,6DAAM,IAAI,EAAC,OAAO,GAAG,CACnB,CACF,CACN;YACL,IAAI,CAAC,QAAQ,IAAI,CACd,6DACI,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAC,IAAI,aACF,qBAAqB,IAE5B,IAAI,CAAC,QAAQ,CACX,CACV;YACA,IAAI,CAAC,cAAc,IAAI,CACpB,4DACI,KAAK,EAAC,kBAAkB,aAChB,qBAAqB,EAC7B,EAAE,EAAC,aAAa;gBAEf,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;gBACtB,6DAAM,IAAI,EAAC,aAAa,GAAG,CACzB,CACT,CACC,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","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: '045db0eb9522964c61680474aaf53cf75c373804' }, showLabelRow && (h("div", { key: 'e372b876b16c4122c86c4f5573e403965a75b7d2', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: 'b188c3e6715a50a6cb8ba83f4140b2eef3ca688d', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '192f18d69d85d38dc0be8116c207961c9e4dcd28', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '9e66e81e0f6aa9bd54a857ebfccc851f9efa4f68', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: '9bb04149f29a9727e3350f06feeda8a171e41ee0', 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"; }

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

@@ -129,7 +129,7 @@ export class Q2Context {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e5721a07d072dc6fa3db22edfd50c5787946ff9a', class: "context-wrapper" }, h("q2-item", { key: 'f7591f8009e1f28d3e0fffb57dc280bd53a5cafe', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '74215ffc70d4a19a00c921869391843539f28a6a', name: "decorator", slot: "decorator" })), h("div", { key: 'c1f51789a6cdbe7a12a055da39e2a3747639aff3', class: "context-body", slot: "body" }, h("slot", { key: 'a3d4fc206925aa9f23bba1d785b2df9b74cef2a5', name: "header" }), h("slot", { key: '5e4bd0a3f595c52b1a8d60ff2a06b4333919719f', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: '26891e4fd22716ff431df7c98814d3086fa7a48e', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: '6f5102f66edfa4bdc043e4907d09e22d70218b7d', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: 'a01f3f19278f94ec67fa21a34a5f8d26823a1000', class: "action-group", orientation: "horizontal" }, h("slot", { key: '86051221e06ac1c4b68bf31228f68724e67474e0', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: 'f12d517e123e1cc7ef3c85fb53e5d227a82f3132', name: "footer" })));
+        return (h("div", { key: '8bd2bf977388c552b749af93f1682eb5b491b241', class: "context-wrapper" }, h("q2-item", { key: '38c657ce812b32b18acd97cfac8aa50c8c904587', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '7816474bd52a207930abfd8cf6d37a7eab5348a3', name: "decorator", slot: "decorator" })), h("div", { key: 'e19e91cf7181beb57e1790313e46010208573017', class: "context-body", slot: "body" }, h("slot", { key: '9f7eee48cfe8993cea5f001e6096330fdff91f42', name: "header" }), h("slot", { key: 'a50f7afcaca2907254eac06b30edba31a96b248b', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: '00b35f4f191919c971a25f20c7771d787d52603a', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: 'db2ba58244c8040cd73e30c69abd0068f8573e42', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: 'c530b882cda2655633efaaf3088c878b96fa3ccb', class: "action-group", orientation: "horizontal" }, h("slot", { key: '3aff5167bf8d7707181af5874fffbf7f94485405', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: 'b47f8995b3f027dc726772c82edb6981ff4ae757', name: "footer" })));
     }
     static get is() { return "q2-context"; }
     static get encapsulation() { return "shadow"; }

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

@@ -141,7 +141,7 @@ export class Q2Currency {
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, signDisplay, isNegativeAmount, } = this;
-        return (h("div", { key: '53d88008437b187887c49fcfd41d7f9d8c6bb587', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: 'efce7009afdc9aa7d368f545a118806502801b28' }, '('), hasPlusMinusSign && h("span", { key: '452052007a26cfd879e4ded8540c9f825ebafb14' }, plusMinusSign), currencyIsFront && h("span", { key: '236e79e2e5612ee67d22f44947996d634056abcf', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: 'c69146375af1d37aac010be7fcd41da050c8802e' }, amountCore), h("span", { key: 'd9fe34e10fe29a0ccaee6a6d1fcea0f52aebd0b3', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '741effd6b2ef88b22e38638c100f6d29195ffcb3', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: 'ee2fd9317e37ac484e6bbc9d458e988d360abe2e' }, ')')));
+        return (h("div", { key: 'a600525cc214be0a670d8faa90c22583bb142a5a', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '40a2b4736c8afc5b7939391fe90600d79d584c66' }, '('), hasPlusMinusSign && h("span", { key: '6f5755d3e4681168e523c9549a0fa2ce60ad49fc' }, plusMinusSign), currencyIsFront && h("span", { key: '006b2ab6a62e7f1f5bf413ce767763d1c8b6fa57', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '96b0d7262fa2bcf8b9039fba828d937e88c0fc00' }, amountCore), h("span", { key: 'fa848c80fe88cff6de78a1386c4473413f0cda18', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '0a39e489c17f33846af1587603a2e9ae21bd5f78', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '9e088b3f70a82bb7bb0ab1d8a59e1eadd837178a' }, ')')));
     }
     static get is() { return "q2-currency"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-data-table/q2-data-table.js

@@ -398,7 +398,7 @@ export class Q2DataTable {
     // #region Render Methods
     render() {
         const { caption } = this;
-        return (h("div", { key: 'c60810b5cc26058b94829ee4f7942df9804403e9', class: "container" }, h("table", { key: '5fab9778577ef7b24955e3219a1bc054db6703f9' }, caption && h("caption", { key: 'daa8d4647859d4eeace2b9f4103bd73e5494b633', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: 'ee7b81a0e49d8be037696fb1e275f90fe5547f8b', class: "container" }, h("table", { key: 'a5ee5ad79d6ed0b5e911611f9e15fb2130c69894' }, caption && h("caption", { key: 'ba4ea123b1b9fe1bda5734dcd789889db8d992b9', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderCellContent(cell) {
         if (!cell)

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

@@ -107,7 +107,7 @@ export class Q2Detail {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'd92d66fcec6add5b649aa45fd11c5c778d5be0b3', class: this.detailClasses }, this.hasLabel && (h("div", { key: 'c4538e909b1c4ac9e298a9ec25240e56eba42cfd', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'f6ce65ea2ad6b1d6c64d0ff69a66bd1fa5aa868d', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: 'e9fe9f1d23de26052a90b499865c30908942d90e', class: this.detailClasses }, this.hasLabel && (h("div", { key: '74575c0c28fd5493cec9b04e4693f66812863946', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'd9bef4e29bfc54e6149d57322833f6184572b863', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     static get is() { return "q2-detail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -366,7 +366,7 @@ export class Q2Dropdown {
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: '23504511d2b87c3159647349f905de98de329db5', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'dc0b8de4939d8ac3414c470b329e775342a4879d', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: '25345315dc70726e152793271c446ed34a4fcc0c', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: '4c885f96ce096b0a1a2a743892531910c82cfa5c', name: "popover-top" }), h("q2-option-list", { key: 'c4a045130b22ce5e5c462811cb8980310b16d50e', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '9b5955c327df96213e10971fef01aadcc253a1d5' })), h("slot", { key: 'ac3d4f37bfdbef9239e389401cdfc4dfadf497dc', name: "popover-bottom" }))));
+        return (h("click-elsewhere", { key: 'b6e82a77840792da2ab918048abf38578ec4ccb3', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '5c26f1d198bd92ba61ac51080a3f8e2769d07b01', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: '4db48630a62011863293587a76a17448a503df9d', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: '20cf54aca49692025c64ca230433366e14a242df', name: "popover-top" }), h("q2-option-list", { key: 'f2f8b61de7682fda8b18ddee17995fbbe1529ff7', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '380049eda306cad1283f509977cfc32924f86d22' })), h("slot", { key: 'bc02de04e8e0ca08205425ced651183535a80c78', name: "popover-bottom" }))));
     }
     static get is() { return "q2-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-editable-field/q2-editable-field.js

@@ -206,7 +206,7 @@ export class Q2EditableField {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '2a71fc720f0f0ea686e34509d3a78a86a9100bd9' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: 'bd5759fc666e43c948cf4826e2075ba5566038cc' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     static get is() { return "q2-editable-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,7 @@ export class Q2Example {
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: 'dbe4a678c04f60cc08aabd47cc9fa3871265e0f0', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: '6ffb94ccdcae5f6a0762f80b2d022997345f5cc0', attribute: "navigation" }, this.renderMenuInner());
     }
     static get is() { return "q2-example"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class Q2Form {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '773e56276df2f42dd330167ffba2a9d08a90f2f7', class: "container" }, h("slot", { key: '4d92e4844684a5418edb39c18674042cba90ba58' })));
+        return (h("div", { key: '6720d1cf81a23420db41de84fce56398ff932018', class: "container" }, h("slot", { key: '48165fa24f2eb15d66fdfa63b6c122c0dc320714' })));
     }
     static get is() { return "q2-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-formatted-text/q2-formatted-text.js

@@ -71,7 +71,7 @@ export class Q2FormattedText {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: 'b9fc58891cbcec6ea19bc8c0b2514df003697f02', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '1b4e77284dc329065a281e7b2f2fce22e6cfc01a' }, this.formattedValue)));
+        return (h("div", { key: '0e3cb56f89a3ab403b45b411a4cd38ec267ed58b', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: 'a9bb42690d67bce14debcb99db50c63582c6ba63' }, this.formattedValue)));
     }
     static get is() { return "q2-formatted-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -722,7 +722,7 @@ export class Q2Input {
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (h(Host, { key: 'a52558bdbfb0af1b8c326d4b5b45995342864f1f', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: 'cdad28a61dab48bc95a2aeb4999882ab236cbaf0', class: this.wrapperClasses }, h("div", { key: '7e935a86fda4632f5caf3250d567da0b4f3dc467', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
+        return (h(Host, { key: '5cd0ac01d09732c81c59519cd04a998ff99e4dea', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '3907d95e0564a7e5f53148f6bdd02f0d51dcc8b6', class: this.wrapperClasses }, h("div", { key: '73857901c65827a40b17a56e8a1ac4d1d9c4faf7', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
     }
     static get is() { return "q2-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,7 +121,7 @@ export class Q2Item {
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: '9d9c2b041d9e1813b5df96ae96a4efc0a8573e1b', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (h("div", { key: 'e6af6612a3856a83c831be21de0c85148b3ad349', class: this.decoratorClasses }, h("slot", { key: '919dfa25724858eb1c81d0d9de9dc0e672be57f1', name: "decorator" }, h("slot", { key: 'ac57ea70bc6ba07e0ba931dbcccc7c7d0f70c293', name: "bullet" })))), h("div", { key: '62ff508897f031fab005787d56c10655903dec99', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'c5d3ef40bdf9c241705117864202d050d5a99646', class: "header" }, h("slot", { key: '3036d8dad872c9be20879c8128ecf3a3a443b305', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '4b95df71025cf46d4026cb42b6c5e06156cd5100', class: "body" }, h("slot", { key: '55a339bbf42143b034f69ac9cdc65f9b74d77b1e', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '2b1ba9dd4ea25d7f168389358563efd93a14b9fc', class: this.actionClasses }, h("slot", { key: '0aa65030b6db7c641ad346040eaa4835596d35e9', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: 'b2544bdff69493915f4b10789f2b609eaa2176ad', class: this.footerClasses }, h("slot", { key: 'b5417cf58a68cee1a2abdd0cb51a4d1973b1ae38', name: "footer" })))));
+        return (h("div", { key: '3bd899fe8e37940635740451ebcf07407103e5e8', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (h("div", { key: '57a84cb0e340658499cfc3283f65d425519fcfcb', class: this.decoratorClasses }, h("slot", { key: 'ef0b095c055d0ceed0fe18ecb4d1b2565f3bdb82', name: "decorator" }, h("slot", { key: 'ec695f3ab95be46331cec70b270a1f0434444fff', name: "bullet" })))), h("div", { key: '263e6a9ebe842c2430cb263fe8ea1e523f286a17', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '6340f074d8b489e37f21b57b89038f323e5a2533', class: "header" }, h("slot", { key: '2ec1a529cd639a520a4b873d2898b88470a2c16a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '1d38f6795a8ee607eb93e1ff31ddab54dcd41c79', class: "body" }, h("slot", { key: '73fe582085a453608301236160cd260474d338c5', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '0fd2164d9ab710b54655e325aa328d4e236a7bd7', class: this.actionClasses }, h("slot", { key: 'ce2cb3c08a76f136858a1e8ce2db30b822e17b82', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '700c9f3faa4dc6f5c0e22d18470614c028c6c8d5', class: this.footerClasses }, h("slot", { key: 'b3fe3d2477936abcf950c8a7565372456023462f', name: "footer" })))));
     }
     static get is() { return "q2-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -110,7 +110,7 @@ export class Q2Legend {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '4d2152f5506fd3c000cd13a10d7cb21191fd4a35', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '80a3258fc7fa73aadd20ad7eb0beeb5cee6f47f8' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: 'ab6f88f29a37f3b48c7bee9bc1263142d9376b3c', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'aa6443ae74f0d89965963195c479aab4f95fa667' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get is() { return "q2-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class Q2List {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'f4eef6a9600afff93d1c66833138eb88a81edba3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'a84cb093f8c32752c3b968fc346727e5128a0bf6', class: this.headerClasses }, h("div", { key: '9f0632191b686ad4eb2f7dac0c5fd6c0fbe3f345', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'f66033fc4039ed99278e0b7978de57bba6b73fb6', name: "filter" }))), h("div", { key: 'bd58bea54efd17e135f1894fe0ed43e3371abe3e', role: "list" }, h("slot", { key: '73df8c2367d93a4a2df07ff0bf3ecc2078e35a6a' }))));
+        return (h("div", { key: '5602927af6da7b334c38f7d2cc207633d6089f7c', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '23ae73b5b842f17d45f9f82b06db79e8ea5c1796', class: this.headerClasses }, h("div", { key: '428117b7ffeadbfe4a53d39bf95d16cae1c26148', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '3c5c29226478ba20fbe691b4265a2966b43f3fcb', name: "filter" }))), h("div", { key: '358b66a87ce56416c1dd42b8cc8a480996e2bdaf', role: "list" }, h("slot", { key: '8eabad8c7f15fac806588c651abf4ee400994d52' }))));
     }
     static get is() { return "q2-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class Q2Message {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: '18638881b4ef7a62a3681181d2a4339bcb76d0de', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: '891ef403fa0d485c83e585d5a3225e39c39b7123', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'fdef50ee27ac0da34438995a985310bcdaeb2338', class: "sr" }), h("div", { key: '111869893bfbea57491ac365247890444602a0c4', class: "sr message-label" }, messageLabel), h("div", { key: '44b73f49446eaada25bf4b05ac32e88c2bfd1cb2', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '09003ab82d44a89c00c06e42d916cd3f7fa930ed' }))));
+        return (h("div", { key: 'b65f9feaee320f96a3f745eb4231510eab67aba6', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: '66b9440bf994341ff365766a1241f56556fffe57', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '47269ca27bc9c952249f574ab98e45d026125228', class: "sr" }), h("div", { key: '63a91696622f38741d5d403fe81262e2d5458328', class: "sr message-label" }, messageLabel), h("div", { key: '544cecc85e943f0156b63489cc78a42bec02f7c9', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '36ff0e64df72018818fd8452e847c522ea4c4039' }))));
     }
     static get is() { return "q2-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -114,7 +114,7 @@ export class Q2Meter {
     }
     render() {
         const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
-        return (h("div", { key: '114be4db946db69c97b2a9980f8bcd4757653f95', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'dfc5eda2e024fa1c1d6ba204e8e2cfa68329a0a6', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'a54ca24a734890632c07f209ad35d30e2f3c9bc5', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: 'fa7cc14c41ba679ade93ed7d81cddd2d52bb0319', class: "legends" }, h("div", { key: '9327c024866ccc780916981b899c5e47d8bb61e4', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: 'a010c391768b966bfcefd828cd57bbca82414da4', class: "right" }, h("div", { key: 'eae86a6c446ce32bbc32c22724c9ac18362a4e10', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
+        return (h("div", { key: '656e8a53bbaf26529db53e535efcad7a22b9ee01', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: '25d53f9a1d387d4b839507239454484d9678061f', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'd5786b4e65ab5b262b82f107bb310ca27b34c4ed', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: '015cc474c3113ff248982d64656218a79744e09e', class: "legends" }, h("div", { key: '1af88cd2386058a8c20f3a82d0e40ffafffc4c38', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '22eb4ec7a86114f3f109e4adfb0acbcea9509de8', class: "right" }, h("div", { key: 'b9384865d0ef8c81569243b40ccf320efcd208ec', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
     }
     static get is() { return "q2-meter"; }
     static get encapsulation() { return "shadow"; }