q2-tecton-elements 1.55.3 → 1.55.4

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

@@ -256,7 +256,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: '81ad5cb26deb25850937b8cc9532c085c7ae7a7a', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '80e730df9072d5d807d21fa589bb743dfc3c47c1', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: 'e18f02a628ca1451833e97815e058fdc1517b7c5', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '8801238ba154a24bcd118cf509091db356b0a1d1', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -265,10 +265,10 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '4ac5c21e45e4d4aed43e01fd49a0f398cb2ffa0b', class: "btn-group" }, h("q2-btn", { key: '1f2a32ece3c921d9173e5d5958527d7c6e0e3910', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '11250e5b156691b6800475010416711941f60b95', type: "chevron-double-left" })), h("q2-btn", { key: 'af6e51286ec4017c92bf941a5b0aecfc5eb5e082', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '7090e6297c5983639e7113416101d1811e95d4c7', type: "chevron-left" }))), h("div", { key: 'e09c5ef5a837b14cdbd4a26f5acc71e47cfb6728', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '1dd05c355c04f568d17ccdfc927b570e8795c99f', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'a9e13e527bfe98e928a467c9c99e21cfadae182f', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '368f0f7ee7f23c45101362b0dacf9df0ee9cc41c', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => {
+            })), h("div", { key: '8a0cf0a8b262edaf0077a355c71879744f76430b', class: "btn-group" }, h("q2-btn", { key: 'f6f72d75981cbc97fe6fd7fd716f5d92bd16ca9d', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '0ff61de6fd143ea8ea28ff08f2c22b2c4514cd2f', type: "chevron-double-left" })), h("q2-btn", { key: '6c31fb1cfc557a89a3471bae25d09be52897cfb7', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '6d0a5e92eff20620045439a95f13683d45b21ee9', type: "chevron-left" }))), h("div", { key: '4e7ece9248a798b9cb885f2b2811dbe43c53cc04', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '00925990c7d99ec9052d50eae011df20c55c0b95', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '5f4100b75ac2b1145b9de2d61c4b20eb5f490108', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'fcccaf8f66e18aade799cdb031d4109f9844d71f', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page" })), h("span", { key: '29a9af7d27dc1f28387df6ef1dd052c2ce0c27ac', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '7cd9ea6486ef69c90bf03cac9f80fd575f78103a', class: "btn-group" }, h("q2-btn", { key: '138e654a3112debc75c12ab01cca93f9a768e7a9', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '2b6ab242a2f1d090c07675753c5b5a3f2b36ffe0', type: "chevron-right" })), h("q2-btn", { key: '35103fb040b0b9117c035a2808be49afaffaa9f2', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '47ee1ca35772437aad4319aa391b5623f3546500', type: "chevron-double-right" }))), h("div", { key: '639a79c43ddb8c2757ffb34b9f54da4e75323a80', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page" })), h("span", { key: 'e0fdad1c715b9769b9c553f94200309f51a86607', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'dbe11e2baf541ce460b6337af343a7dc3d118556', class: "btn-group" }, h("q2-btn", { key: '4ac8658d56c414ffa1ba221450aa14e3dfc8e0e7', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'e6cbc43459c891d1bc8f54b85c3574d45a5c998b', type: "chevron-right" })), h("q2-btn", { key: 'ddafd0e4f3b12898ca349bb2ba94c148cc830214', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '7c1f82c1535d8cdbe0de180e7c426de2759bf282', type: "chevron-double-right" }))), h("div", { key: 'f27168fdb16b48520a9a3134e6a3db4acd1fa551', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     static get is() { return "q2-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -342,7 +342,7 @@ export class Q2Pill {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: 'c6dfa2ec426f3a2e3f2623fa0f218045cf22bf65', onChange: this.onClickElsewhere }, h("div", { key: 'b06ee5e8fd7c66e535ae786bbc41b7bbb2f890f0', class: wrapperClassNames.join(' ') }, h("div", { key: '33cfc2f0ac6d50cde4ff3c4d301b81081018faa0', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'ce96d775d2cd1349ac8e982862bce850bfb7ff00', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: 'd7def68e55ecd39072d2b7a268459d01fa9f0715', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '962a7145528d951a7a56e51a8290e2a3d22fe469', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '35da2a4a0f9487329dd2f6599433278b842f5730', class: "popover-content" }, h("div", { key: '084bad243e6946269d3a4525bf98a6b717101a65', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '5f2e3b51085f841e816f5052f56a7ed89214e169', name: "popover-top" })), h("q2-option-list", { key: 'd176a943fd4a94ed519c42dcf1182931d02a8b13', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '34b6eb444aefb59b23c85d4354861135cf63919f' })), h("div", { key: 'b30d3f4dd110de4cc4ccc2887f9e936af5986db1', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '003d70ef29d638287629f4af176cf3d1852168be', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '5fe692c7573238a78296f886bd692b0844f895bd', onChange: this.onClickElsewhere }, h("div", { key: '8cddac8df3418aca8d04be122b9e6aa48bc74902', class: wrapperClassNames.join(' ') }, h("div", { key: 'e745b7a2898c15da468cb0b00046099def363414', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '522395fae2eee423a40ad74610472d8ce67c3e84', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '6e91c9098217a94765f2f2cc9420257c4d8ad3f5', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '3607af8a2bcf760f2b2a235302a4fd0e28a4561b', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '999b8fbfcd6b11ba0aeffc3a5875b6f0a21e955a', class: "popover-content" }, h("div", { key: '10bcc35df0240b11da8e5df19db854576fe8dcbd', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: 'f2ada769ff4352ed962ca937172a8697e3a5b96b', name: "popover-top" })), h("q2-option-list", { key: '9b62b035a72927fea994a792630596d84401d8bb', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '1867828a0d847460d0ee6cb55a31114de91e188a' })), h("div", { key: 'd25e55fcbc1322bb79a5f61d9f0a957df90c3173', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: 'cd358ea147bf56405752ec90fa54d21576ba64bc', name: "popover-bottom" })))))));
     }
     static get is() { return "q2-pill"; }
     static get encapsulation() { return "shadow"; }

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

@@ -295,7 +295,7 @@ export class Q2Popover {
             containerClasses.push('show');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (h("div", { key: 'dec077f6a9efa7573210773db9eca95d48fb527b', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: '4e7ad06454bddbc6443922b4dac5d27f50a8b2c8', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '9128e4469499778c779b32561547358e1f6bd747' }))));
+        return (h("div", { key: '7f8b390b6a1e7fd2b17603fb803591fd1cb62ba4', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: '878b6b01de37233ce5cd9f36b694fad89d599b3e', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '83b9de3b4fe050d82d9473cc098bd599fe5c645b' }))));
     }
     static get is() { return "q2-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class Q2Radio {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'ed4340f095788108ea8112d28a3c45dbc1f2e4c4', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '30011c8b29f8bdf48e978904052e02b920e602b9', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: '657078aca6278f6bbd8997a1992109aecd2ad8a6', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: '9b4cf7c9e1968f862509c760a0dfee5cb90c3ce1', viewBox: "0 0 18 18" }, h("circle", { key: '269619ffb0671e2f67dfa3da58b5da8264508586', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '9325caea79a38fe661db33ca62da9f075a06597f', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: 'fb674a98b4d028e35397da9ead2ab5083e8617fd', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '39a40ee6024f16b059ebad2675ee922a5c95324d' }))))));
+        return (h("div", { key: '5b311e2632f73503ee3e53c23f236be4860f8ce2', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '3d16a54bc6c2978a38da4693fa5a8d010e99d9ca', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: 'eebe718f16014fb72c48aea6278769b38d4a1688', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: '2dcb05d6c75756087c5798c99c65e87d5ebda3f4', viewBox: "0 0 18 18" }, h("circle", { key: 'b808fee3319881566dca584233ca1b284ce8f1a6', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '1abc2240fd5145a14586392be4e32bbff1bc16c3', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: 'e42cb0d2c93aa87291ad40fe2b4128ac910d3ee8', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: 'f850e0414cc02e68fc47840eff256762d8b91c54' }))))));
     }
     static get is() { return "q2-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -174,7 +174,7 @@ export class Q2RadioGroup {
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = (showLabel && !this.hideLabel) || hasError;
-        return (h(Fragment, { key: 'd1d5bc5ec6dd3fc33332fa49e64ccb1dac4b542e' }, showLabelRow && (h("div", { key: 'f2de38984a59682953612d73981a2de1afa1bc58', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '24d1a40c5ad7546e5901dd96e46a15e71d8ca4c3', class: "group-legend" }, renderLabel(this)), hasError && (h("q2-icon", { key: '24be48ddc9c8cc60fa356056da6c59224a358a59', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '48da393294f67ac8349606b563a122e0b6e70917', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && h("legend", { key: '544ba2b62bebcb501806527fec2354aaa70c3dd9', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: '39bfe432997a547e9f29aabc768adfb1da9fac4b' }, showLabelRow && (h("div", { key: '1db8455585e6c9e35a59f9c6c7ce4f4d42b6ebf7', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '1fe134c3173b2fdbf39640bc126540195bf53dbe', class: "group-legend" }, renderLabel(this)), hasError && (h("q2-icon", { key: 'd54e948759c7513c1fbe9cd7c348bdb3fe91eeb4', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '67e545eb448161a1dffc6f253c5f380ee8a229b3', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && h("legend", { key: 'b82a5b106cbd46552e3b5c85b74aea7c8350e786', class: "sr-only" }, renderLabel(this)), this.inputDom())));
     }
     static get is() { return "q2-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-relative-time/q2-relative-time.js

@@ -136,7 +136,7 @@ export class Q2RelativeTime {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: '9026e0194b08d067c04188fc4c7c9ffa05727fb6' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: 'a455dbdc3b6f4c6ed485ef33ec4569b8079faad5' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     static get is() { return "q2-relative-time"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-resize-observer/q2-resize-observer.js

@@ -72,7 +72,7 @@ export class Q2ResizeObserver {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: 'fa058a508d2397d7844acd6b67d4d2414c0822f1', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: 'a151697c5f85ba063588737fb0cb7b50d6082947', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-resize-observer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -184,9 +184,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '59a073f2fbbc37bb7e7f1c6823610e150fd1e256', class: "wrapper" }, h("header", { key: 'c02e2e531cb0ad833752f9254b95f6eb76d8b317', class: hasHeader ? 'has-header' : '' }, h("div", { key: '7d3b12f0640b7dd8b49bbca7ce710f6bb75325a2', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '7552c47106c63ce813145a13bf29e6fa4db74c58', class: "title" }, loc(this.label)), h("div", { key: '4823d86d58f2a214a31987b8892802d861388a5d', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'f70123a46f2077c23cb0a25c56e83d59e3432485', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '7330e6657cd6eeb8e448a04b2b3530e3843d1763', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '8a953908c20c980198ad77e66b41d5da3337ea28', type: "chevron-up" })))), h("div", { key: 'caa5b37b95099c0959b048f6d7f030c1e0bdf16f', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '5222957e3620819b8cf996c0fc286e46fff3bb4d', class: "wrapper" }, h("header", { key: 'bf81a872538c66fe3a05c0b5aa764ea44ab9c8a7', class: hasHeader ? 'has-header' : '' }, h("div", { key: '62062576c3a87c3dc1c9a81e962e4ed17b1d88e4', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'e271f9fb1ef49db1a92d5573508b80fe5a1f90b4', class: "title" }, loc(this.label)), h("div", { key: 'c551740a3a5c0b7cb1d641e0901d7f2513fb8113', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '28a448d66c616084273625c1aff12f9f0572f1a0', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '47d51785b31b5193c7dd9bf3b77e14bbc033841a', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: 'aaf00f646fb955ef54af0e9137683ca7798702cf', type: "chevron-up" })))), h("div", { key: 'a271132f91f52fb9b9fd6074d17dd06d49ac37bb', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: 'c4e83982d85944756eb7f9f379a3671ce7faee6b', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '336a133e83f81a21da1e3008b0b4f35ffe25a4a6', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '8b283ad5652d583666c9106e920e8854a2a706f1', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '53803361cff5de900da3e2669d564eda1d5bfb35', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -609,11 +609,11 @@ export class Q2Select {
     }
     render() {
         var _a;
-        return (h("click-elsewhere", { key: '74b318aa5e949451bb9e594ca15bbb899d5af833', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: '841ca38b6c5d5a2bce3da89119f2206157fa9dfc', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: 'd141c2482a503fff0977dd9e268927fceda5519b', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (h("click-elsewhere", { key: '2ef0c7239d7b33f9cce714e3cf0647ff9e947bde', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: '3c787cbd45aaf3e9a184cccec58ba8b61c5dba1c', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '8fefa7f567d571f4e3a80f5ba8274ecf60e5ab32', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
-                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: 'e2bc0e2346e8854a092aa6e6298079335f736f37', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: 'd7d6ce24fab1745448a8fbf9285fb1c67b2b7e6a', name: "q2-select-display" })), this.renderOptionsDropdown()));
+                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: '875be4ff0cf304bfe81ff8c29c4508bd47d0ff33', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '48e9f6f0e9e9cb26835a4c32f0e960ad162688b4', name: "q2-select-display" })), this.renderOptionsDropdown()));
     }
     static get is() { return "q2-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -245,7 +245,7 @@ export class Q2Stepper {
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (h(Fragment, { key: '21459e973c382d566ad74cfa1079bcede3bc4bb4' }, h("div", { key: 'fb74e21ddf7346d79668b47f926ed3cf3473d6ce', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '6b4ba9451964d04c22e162d3b06b4dd493e6acdc' }, h("div", { key: '317d4dd68f295878cf2b27508f882dbbf41c660d', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'ddb5edf2ba557d5a7d2b19d48f5c11fba7c9fecc', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '2c2d7a851f2e089b64d1884cc5109b6bed07138b', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '8752b1fa6b71189a513088998bad57e9cd372c02', type: "chevron-left" })), h("q2-btn", { key: '6299ffdbaee72154f91f75bad7fdecac49f1f491', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '9ddface0e855a5c6af58e6415ddc13a327a50e06', type: "chevron-right" })))), h("ul", { key: '18d55fe631add203b41784d7e10b60c6d587702a', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '29141e95496abf8d409ce8ccdc71010f8cb6efdd', role: "list" }, h("slot", { key: 'f4cace12ffe8239c98ea12daee44fa3ff1369354', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '6e2394578ce0afca6f8664baf75d7a62e292baea' }, h("div", { key: '77c6b861e4ba9869422e8d0c941cd6b04af3a03b', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '166afc15044285df0056d39e27f5bc475a8abf7e' }, h("div", { key: 'd79d172b808dac80bf32fd4419bde85b42083cc2', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '095ea5e0944710606263c6216d1bb88f4535e1ed', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: 'efefd1eced2e7e8f4d1f4e8744183307a066a4f5', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'a72bd965e27344f5ad8ba460f49922f98808d560', type: "chevron-left" })), h("q2-btn", { key: '27feb6ba412296483dd990658f4ccd0704456821', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '8ee4b6790296d9a82db9b1fdc2d420b3d5249a0f', type: "chevron-right" })))), h("ul", { key: 'a25d2c222123d68c7274376dc49a51249732d000', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: 'e1999ed9bff7ae2158a81029e0b9b1148b9d22c9', role: "list" }, h("slot", { key: '80e239e0484809834c7e096d7df50e68b4ff7c85', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,7 +64,7 @@ export class Q2StepperPane {
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (h(Host, { key: '5577f8962c2f65e0c80a626268d78b321aaeebad', role: "listitem" }, h(Fragment, { key: 'b555f074841b2dfd439f0428944d00ca4905844d' }, h("div", { key: '6f2cbfee6f87526b90a8f9db71d81c3f9411a307', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '633709be729c63190bbcf621d0e9078f750db2c0' })), h("div", { key: 'aaa34c1ca944fb104630f60afbd8405a841e552b', hidden: true }, h("slot", { key: '432bc5035bc265bb19bb3c493d1c3cdbcb939ac5', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: '24f3d22fd72773ae6edcbf12e6d14b34831385ee', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: 'd0024a07468337896f9c4f45059dce8de988f6ad', name: "children" }))));
+        return (h(Host, { key: '099f264e941e013c0533c52b4e573852a0ae6ea3', role: "listitem" }, h(Fragment, { key: '20d1d11ba4fcf3f915922d35095b151b94f16480' }, h("div", { key: 'cb3c1c97ac77d96ce0299138c067dd62df759636', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: 'fd87a5838f6011c1bb04386397899a45d8e9078e' })), h("div", { key: '1b0b6697f2fd732df2fef3f0c41b8b10a56c183e', hidden: true }, h("slot", { key: '168bd3a7e57a4fe43fec897c4e758b92dc505971', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: '2052ed532f9f27aa562b10502c88d1d583d1d73b', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '8e6532c40ef987227a81729029e1e1d00329210a', name: "children" }))));
     }
     static get is() { return "q2-stepper-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -201,7 +201,7 @@ export class Q2StepperPane {
                     "references": {
                         "IStepperPaneEvent": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
+                            "path": "/Users/kvanhouten/Documents/Work/tecton_extra/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
                             "id": "src/components/q2-stepper-pane/q2-stepper-pane.tsx::IStepperPaneEvent"
                         }
                     }
@@ -240,7 +240,7 @@ export class Q2StepperPane {
                     "references": {
                         "IStepperPaneEvent": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
+                            "path": "/Users/kvanhouten/Documents/Work/tecton_extra/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
                             "id": "src/components/q2-stepper-pane/q2-stepper-pane.tsx::IStepperPaneEvent"
                         }
                     }

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

@@ -285,7 +285,7 @@ export class Q2Textarea {
         ]))));
     }
     render() {
-        return (h("div", { key: '9e15d586cc11ac73ce92f35a0d1a05dc6101e064', class: this.wrapperClasses }, renderLabel(this), h("div", { key: 'f0836c51dbeba1895d11a5bd20bfbaf3b5d22ad8', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
+        return (h("div", { key: 'ece9138953ebdde47af2559b2f10c3edc8b73c91', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '34c8ce254d131b4c0aefa5ff772c00e0d4b495b6', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
     }
     static get is() { return "q2-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/q2-action-group2.js

@@ -111,7 +111,7 @@ const Q2ActionGroup = /*@__PURE__*/ proxyCustomElement(class Q2ActionGroup exten
         if (slottedTagName)
             containerClassNames.push(`has-${slottedTagName}`);
         containerClassNames.push(computedOrientation);
-        return (h("q2-resize-observer", { key: '9618803e7048e8d1cb8e9a5e359788a349429d10', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '5f9a2d2764a8d557cdb93e39efa4e2ba57a48c48', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: 'e7517805b6e83d5660465e944608240abe4c2eb2' }))));
+        return (h("q2-resize-observer", { key: 'ca77351335d6cd0b3b5ded817abe29ada02a9f23', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '95f25372105e6b871102df1fb108875e982d9143', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: 'b4fc4021ab008863aaa5fab15a87431c589f070a' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -224,7 +224,7 @@ const Q2ActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class Q2ActionSheet ext
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: 'd0af72ad1b1c131bef4f6661ff4226ca78c87a2a', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'ac49c7e7ef0c085a792779488f22b5919fe46cbc', class: interiorClasses }, showHeader && (h("header", { key: '2d558b392b3005d6e54a525263b703926499bd9c' }, h("div", { key: 'a1d06ac6d939eef0675920e7be4c80cc74e6411f', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '4e0de7d287daef9f7b804f0f0dcdaed087931ca3', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: 'bf9a5f21a3d90997ad556db316f3e9be074ce32d', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '554055dc7db18192dae5278b0db1e73013a9f44e' }, data.description), RenderContent && h(RenderContent, { key: '466462435bbfcd7fea7aa15fea8a014d1cd8370e', data: this.data }))));
+        return (h("dialog", { key: 'fcadd164e925d3f162da360c51fc2c58a752862e', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'b433f77c7ad9e0a96a567076c8629adb2dbf6dc8', class: interiorClasses }, showHeader && (h("header", { key: 'd6eada64c40e41f0de9b84af14272cab8eb36560' }, h("div", { key: 'ca1e8cab90a3affcc7e95ac2dbd4e8b46d9d7c81', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '00831d5aa1caacb9a7dff5cfac59f7dd3161712c', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '4cd522551cbe767ac76fdb6b2b91333b5a866009', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: 'f2f46a11d8b749d83ccd8b5344b917f7bad88464' }, data.description), RenderContent && h(RenderContent, { key: 'b708eb9b66bbe9cda2cacf144f75210859f32c06', data: this.data }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ActionSheetStyle0; }

package/dist/components/q2-avatar2.js

@@ -56,7 +56,7 @@ const Q2Avatar = /*@__PURE__*/ proxyCustomElement(class Q2Avatar extends HTMLEle
         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: 'e7fc18664e3c2dab8d49f02fca71af397542ec33' }, showImg && (h("img", { key: '34275fafae8eb89ab239322a991cacdec7c7c3f0', 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: '74286d05347fa35df27b25c3096d1e1c9f7be604', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: '4862379daa82e61f0e1e907b6070210b79246490', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '757d739f831a81811c72920c6994db4fb1838dfb', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '6888b2c395a5e85dfedbf348c1183c5de941d091', type: this.icon })))));
+        return (h("div", { key: '1d329487fd99584197298679c5509a741d8bbd05' }, showImg && (h("img", { key: 'c3707d989ee5c51247da10e9e4112ff44d274d0f', 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: '0b3521e7db6b93bb34b60ade469ca34322ffb273', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'ed394397c95e4c3ca580ba9b151f5151b18c17c8', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'cb5591d95fd07d284ed115568d5688a6b13b3562', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: 'fe4ba5b90b1258d81eab0328a09317504e209bae', type: this.icon })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/q2-calendar.js

@@ -1211,7 +1211,7 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class Q2Calendar extends H
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '76bda9101bf99ae49ab8f04be2d5743dc6b110a8', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '4e556602957d99a9e48127e647923f3e5719e950', ref: el => (this.popoverElement = el), 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: '25256a2e56cb178c647f96135c5cdd6f3577f874', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: 'c364f0a2c9d6d98ca2e3c01b93cea47e3b6ff39c', ref: el => (this.popoverElement = el), 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())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -99,12 +99,12 @@ const Q2CarouselPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2CarouselPane e
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '2aedd4957b29975f2a33168729e4764f9a5054f4', 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: 'd7aec99a66061fe4b10e7a27b776fd2217f99a59', 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: '1b1f852451f3f58f96b0e38a6051b49f83b9fb3c', class: "q2-carousel-pane-main-content" }, h("slot", { key: '00bec6dca522ec9ebea3285405ed3bf94eea65ae' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: 'a86077038f620f9a04dbd2f588ad58d696229271', class: "q2-carousel-pane-main-content" }, h("slot", { key: '12f82035ff518babb548e5a3c3421c1d7dd95006' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-carousel.js

@@ -5375,7 +5375,7 @@ const Q2Carousel$1 = /*@__PURE__*/ proxyCustomElement(class Q2Carousel extends H
         let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
         if (showNavigationArrows)
             paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
-        return (h(Host, { key: '67d25d2920d5a952d2940cfdd6afa21e66c68abe', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows && this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows && this.renderNextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, h("slot", null)))))));
+        return (h(Host, { key: '6a99de530270464ec3eac1a5648ca89f486a1462', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows && this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows && this.renderNextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, h("slot", null)))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -4206,7 +4206,7 @@ const Q2ChartArea$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartArea extends
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '30a28bc85debc198a9f18f255921135b894c1977', class: "container" }, h("div", { key: '2809c713137cc4469eff5a65c3680da8f9b83a37', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '74826328108685d56456624ee97ebcfb2b76a2c7', class: "container" }, h("div", { key: '303b2046ca5b453257276c2e8e23f36aa0123a7c', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -1412,7 +1412,7 @@ const Q2ChartBar$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartBar extends H
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '40fbc74d1ee54a918bdbdcd0cd21369576bb175c', class: "container" }, h("div", { key: '3646090b3d0f826a91f01afb0413fb674380b025', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: '3369c851ab7176a66a12694c94306780d621d764', class: "container" }, h("div", { key: 'e5a7f8e937704c9bdbc631c2151f0bd7a685155c', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -4512,7 +4512,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '46371f94c2bd94407b40585b73f0bb47c5e315f6', onChange: this.onClickElsewhere }, h("figure", { key: '9481cae2bb3c65f0c3a0ffb839bde2688808777d' }, h("div", { key: '13865b38e703c6deaf921d3bdf228f3b8fa42486', class: "container" }, h("div", { key: '7020e99dc26d9127e255b0609d6f8d9de2ad14a7', 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: '0fc4fa0da6f895a5f0d0fd044739652ccb0b87f1' }, h("q2-legend", { key: '1ab827762eb139944842075305f3b2628ec59d32', 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: '709c089a4d95f95c640c3ebf29332c0715240150', onChange: this.onClickElsewhere }, h("figure", { key: '7ed5b5f40d05cb432d92be4864de399a90639934' }, h("div", { key: '8ee828d53be204a1af25475f50c8d8ba602d5b9d', class: "container" }, h("div", { key: '28a8fd99895c1d8dfbfb5921b38f895118a5e9fa', 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: 'fd8aa14f4143013f0f0c21a843a39445477327b7' }, h("q2-legend", { key: '29b3b167b600b73034660e52c07a3582ffb50d4e', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@sten
 import { c as createGuid, r as renderLabel } from './index2.js';
 import { d as defineCustomElement$2 } from './q2-icon2.js';
 
-const q2CheckboxGroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}::slotted(q2-checkbox){--tct-checkbox-margin:var(--tct-checkbox-group-checkbox-margin, var(--app-scale-0x, 0));--tct-checkbox-padding:var(--tct-checkbox-group-checkbox-padding, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px))}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{margin:var(--app-scale-1x, 5px) 0;padding:var(--app-scale-1x, 5px);border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, 12px);font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";
+const q2CheckboxGroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px))}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{margin:var(--app-scale-1x, 5px) 0;padding:var(--app-scale-1x, 5px);border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, 12px);font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";
 const Q2CheckboxGroupStyle0 = q2CheckboxGroupCss;
 
 const Q2CheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2CheckboxGroup extends HTMLElement {
@@ -125,7 +125,7 @@ const Q2CheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2CheckboxGroup
     render() {
         const showLabel = this.label || this.optional || this.readonly;
         const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;
-        return (h(Fragment, { key: 'e2e313379cf001e419e0f4af7852e09f16931d28' }, showLabelRow && (h("div", { key: '65dce898067eaacb01fcdffa8aefa7faed0aa3d7', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '9c627891b5ca932a7ae6d7c519b387f339f3d3f0', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '940512e2c8b756743242356c8b189981a4f0b576', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '797c6e7b149685201dd3f8717a86674941801199', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: '817cf2050f2e7435782046802c7af359354f4d0f', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: '00973c7d6eeb78790062adc0829cb6c460ecd1cb' }, showLabelRow && (h("div", { key: '5f93745ca8658ce5b582f617030b1ba4e4297ffa', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '2310f38bfbb04b56182e94e1d475b148fbc9ce93', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: 'b226ad6a97bf3443fd871614cf4995397c128f7f', type: "error", "test-id": "iconError" })))), h("fieldset", { key: 'f51586e2b2a589e7ad15cb2d50a9cfd3dd380450', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: '46fb67c964042825fefabdcff5c7fbc8deb0c2a8', class: "sr-only" }, renderLabel(this)), this.inputDom())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"q2-checkbox-group.js","mappings":"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","names":["Q2CheckboxGroup"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-checkbox-group-margin: #{var-list(var-prefixer(checkbox-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(checkbox-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-checkbox-group-margin, --comp-default-checkbox-group-margin);\n}\n\n::slotted(q2-checkbox) {\n    --tct-checkbox-margin: #{var-list(--tct-checkbox-group-checkbox-margin, --app-scale-0x, 0)};\n    --tct-checkbox-padding: #{var-list(--tct-checkbox-group-checkbox-padding, --app-scale-2x, 10px)};\n}\n\nfieldset {\n    padding: var(--tct-checkbox-group-fieldset-padding, 0);\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    column-gap: var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.slot-container {\n    margin: var(--app-scale-1x, 5px) 0;\n    padding: var(--app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-checkbox-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-checkbox-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-checkbox-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(checkbox-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var(--tct-checkbox-group-label-optional-font-size, 12px);\n    font-weight: var(--tct-checkbox-group-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true })\n    value: object;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get inputId() {\n        return this._id;\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    inputDom() {\n        return (\n            <div class=\"slot-container\">\n                <slot />\n            </div>\n        );\n    }\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    updateValue() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {this.hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={this.hasError ? `${this.hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-checkbox-group.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,8hFAA8hF,CAAC;AAC1jF,8BAAe,kBAAkB;;MCepBA,iBAAe;;;;;;;QAGxB,QAAG,GAAW,kBAAkB,UAAU,EAAE,EAAE,CAAC;QA4J/C,0BAAqB,GAAG,CAAC,KAAkB;YACvC,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,MAAM,UAAU,GAAG,EAAE,CAAC;YACtB,UAAU,CAAC;gBACP,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK;oBAC/B,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;iBAC7C,CAAC,CAAC;gBACH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;aAChC,EAAE,CAAC,CAAC,CAAC;SACT,CAAC;QAEF,uBAAkB,GAAG;YACjB,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,cAAc,EAAE,CAAC;SACzB,CAAC;;;;;;;;;;;IApGF,oBAAoB;QAChB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACvB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;YACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;SAChC;KACJ;IAED,iBAAiB;QACb,IAAI,CAAC,cAAc,EAAE,CAAC;KACzB;IAED,gBAAgB;QACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC7B;;;IAMD,mBAAmB,CAAC,KAAkB;QAClC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;YACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;SAC7B;KACJ;;;;;;;;IAWD,QAAQ,CAAC,MAAyB;QAC9B,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;QACrE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK;YAC/B,IAAI,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC;gBAAE,KAAK,CAAC,KAAK,EAAE,CAAC;SACjD,CAAC,CAAC;KACN;;;IAMD,gBAAgB;QACZ,IAAI,CAAC,cAAc,EAAE,CAAC;KACzB;IAGD,gBAAgB;QACZ,IAAI,CAAC,cAAc,EAAE,CAAC;KACzB;IAGD,aAAa;QACT,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;;;IAKD,IAAI,gBAAgB;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAA4B,CAAC;KAClG;IAED,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,GAAG,CAAC;KACnB;IAED,IAAI,cAAc;QACd,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;KAC3B;IAED,QAAQ;QACJ,QACI,WAAK,KAAK,EAAC,gBAAgB,IACvB,eAAQ,CACN,EACR;KACL;IAmBD,cAAc;QACV,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ;YAClC,QAAQ,CAAC,aAAa,GAAG,aAAa,CAAC;SAC1C,CAAC,CAAC;KACN;IAED,cAAc;QACV,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;QACnC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ;YAClC,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;SACxC,CAAC,CAAC;KACN;IAED,WAAW;QACP,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK;YAC/B,IAAI,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;gBACjD,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;aAC3C;SACJ,CAAC,CAAC;KACN;;;IAKD,MAAM;QACF,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;QAC/D,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,QAAQ,CAAC;QACrE,QACI,EAAC,QAAQ,uDACJ,YAAY,KACT,4DAAK,KAAK,EAAC,WAAW,IACjB,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,4DAAK,KAAK,EAAC,cAAc,IAAE,WAAW,CAAC,IAAI,CAAC,CAAO,EACnF,IAAI,CAAC,QAAQ,KACV,gEACI,IAAI,EAAC,OAAO,aACJ,WAAW,GACZ,CACd,CACC,CACT,EACD,iEACI,QAAQ,EAAE,IAAI,CAAC,qBAAqB,kBACtB,IAAI,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,SAAS,IAE3D,SAAS,IAAI,+DAAQ,KAAK,EAAC,SAAS,IAAE,WAAW,CAAC,IAAI,CAAC,CAAU,EACjE,IAAI,CAAC,QAAQ,EAAE,CACT,CACJ,EACb;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2CheckboxGroup"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-checkbox-group-margin: #{var-list(var-prefixer(checkbox-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(checkbox-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-checkbox-group-margin, --comp-default-checkbox-group-margin);\n}\n\nfieldset {\n    padding: var(--tct-checkbox-group-fieldset-padding, 0);\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    column-gap: var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.slot-container {\n    margin: var(--app-scale-1x, 5px) 0;\n    padding: var(--app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-checkbox-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-checkbox-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-checkbox-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(checkbox-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var(--tct-checkbox-group-label-optional-font-size, 12px);\n    font-weight: var(--tct-checkbox-group-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true })\n    value: object;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get inputId() {\n        return this._id;\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    inputDom() {\n        return (\n            <div class=\"slot-container\">\n                <slot />\n            </div>\n        );\n    }\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    updateValue() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {this.hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={this.hasError ? `${this.hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-checkbox2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { c as createGuid, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index2.js';
 import { d as defineCustomElement$1 } from './q2-icon2.js';
 
-const q2CheckboxCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, var(--app-scale-5x, 25px)));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:\"svg\";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]:not([checked=false])) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color));stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{height:24px;width:38px;fill:transparent;border-radius:var(--app-border-radius-3, 12px);box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))}: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)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}";
+const q2CheckboxCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, 0px)) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, 0px));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:\"svg\";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]:not([checked=false])) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color));stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{height:24px;width:38px;fill:transparent;border-radius:var(--app-border-radius-3, 12px);box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))}: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)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}";
 const Q2CheckboxStyle0 = q2CheckboxCss;
 
 const Q2Checkbox = /*@__PURE__*/ proxyCustomElement(class Q2Checkbox extends HTMLElement {
@@ -106,7 +106,7 @@ const Q2Checkbox = /*@__PURE__*/ proxyCustomElement(class Q2Checkbox extends HTM
         const textLabelClasses = ['label-text'];
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (h("div", { key: '8cb9c126a850022c4e4305cbc62eaf036b41fc85', class: "container" }, h("input", { key: '3c7bc46662dfc50ce3da872ac082930018c6c1f0', 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: '7e79d168122d18aa644bfae0f63b5556a5c1f4cf', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.renderCheckboxSVG()), h("div", { key: 'f0fb5ebd65dfd865a6a2874b223a1104b5dd38df', class: textLabelClasses.join(' ') }, h("label", { key: 'e9451e5975f6e6be66c395ec2bd45bc8aa3e3407', "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", { key: '4f7d5eeaba7c621d0863cf18a45499eb692b1f9d' }))), this.description && (h("div", { key: '644d733eaaed63f83147e102735b08f7e50d6457', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+        return (h("div", { key: '579eccd325b8fb5b2336adb011aea200f8217b86', class: "container" }, h("input", { key: '1c87398cb9da8136dec2b0103941f848b3e9ef5e', 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: 'c24b63f7f594fa7601c0c3b9a942bb4e85186cfb', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.renderCheckboxSVG()), h("div", { key: 'b3d173fb63c8b7075769b42fa641fd4bc0bda63c', class: textLabelClasses.join(' ') }, h("label", { key: '6ab46bdd8f6e858a6066fbf11b410509d04f1d00', "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", { key: '4f812dbe26b6148955d34763c62938427b6a0a70' }))), this.description && (h("div", { key: '0ebd507482912f71edad0042a30a7582b040444e', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
     }
     get hostElement() { return this; }
     static get watchers() { return {