q2-tecton-elements 1.67.0 → 1.67.1

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

@@ -91,7 +91,7 @@ const Q2Grid = class {
             '--xl-justify-items': this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
             '--xl-align-items': this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
         };
-        return (index.h(index.Fragment, { key: '3fb3de0d4c9b17b30e9b513669b7d12edc702914' }, index.h("div", { key: 'be68db8fe15dd325f553d5f838cc91f5709f251b', style: q2GridStyles, class: "q2-grid" }, index.h("slot", { key: '5b9819228a885661846862a619b9a30792bc8ac0' }))));
+        return (index.h(index.Fragment, { key: 'ab38b4849ec0cdf8ab49d536bb440df6f21b93d7' }, index.h("div", { key: '0fd537b2867d871be69269d983234f9f6e47edeb', style: q2GridStyles, class: "q2-grid" }, index.h("slot", { key: 'd9d7b5d7bbcde66f0bcef49c2c31906e12536e90' }))));
     }
 };
 Q2Grid.style = q2GridCss;

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

@@ -3572,7 +3572,7 @@ const Q2Input = class {
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (index.h(index.Host, { key: 'fde8332c0098e6db906a3ae3aa6fb5bda3e5c183', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, index.h("div", { key: '258def8229372ba6486aeb04c59a3bbaa8a5b5f9', class: this.wrapperClasses }, index.h("div", { key: '37b18f4a5802f8fafaf234585fbf05270ab90778', class: "label-wrapper" }, index$1.renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), index$1.renderMessages(this))));
+        return (index.h(index.Host, { key: 'a52558bdbfb0af1b8c326d4b5b45995342864f1f', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, index.h("div", { key: 'cdad28a61dab48bc95a2aeb4999882ab236cbaf0', class: this.wrapperClasses }, index.h("div", { key: '7e935a86fda4632f5caf3250d567da0b4f3dc467', class: "label-wrapper" }, index$1.renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), index$1.renderMessages(this))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -107,7 +107,7 @@ const Q2Item = class {
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (index.h("div", { key: 'ca6b1f858b9857c47204acc08f686727ee8beeeb', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (index.h("div", { key: '230306123ce534b5d581d5d3c8ac43abc51e5b4e', class: this.decoratorClasses }, index.h("slot", { key: 'a4cf798e99caa5f158bcffcf88a7fa8655c26a83', name: "decorator" }, index.h("slot", { key: 'e2e97954c5d6b4eacbbd9a39c78296cb273daa06', name: "bullet" })))), index.h("div", { key: '482f65fea497fbca187cc77849584fd4f3a07aff', class: this.mainClasses }, this.hasHeaderSlotContent && (index.h("div", { key: '8863cc54ea1f757f0eafd879e15d9647b5a426e6', class: "header" }, index.h("slot", { key: '2977d0908edde16d5b3f2c0cddd3254cce20b68a', name: "header" }))), this.hasBodySlotContent && (index.h("div", { key: 'ba3e78a5001eb2fe8103b4320781dbc093d5e965', class: "body" }, index.h("slot", { key: '8c0d7c06c88ba2c3e338db99d99095552c40e787', name: "body" })))), this.hasActionSlotContent && (index.h("div", { key: '89ba277d280eb8b847252c9cecd556b6308d240d', class: this.actionClasses }, index.h("slot", { key: 'd690fc381d89367183832c70c48d0de1f263b5bc', name: "action" }))), this.hasFooterSlotContent && (index.h("div", { key: '5cda2ab77b732eb6449b6afe5944a4a68fb5ffb4', class: this.footerClasses }, index.h("slot", { key: 'ac4fbf27d7af6aa9b383096a415770c972efbade', name: "footer" })))));
+        return (index.h("div", { key: '9d9c2b041d9e1813b5df96ae96a4efc0a8573e1b', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (index.h("div", { key: 'e6af6612a3856a83c831be21de0c85148b3ad349', class: this.decoratorClasses }, index.h("slot", { key: '919dfa25724858eb1c81d0d9de9dc0e672be57f1', name: "decorator" }, index.h("slot", { key: 'ac57ea70bc6ba07e0ba931dbcccc7c7d0f70c293', name: "bullet" })))), index.h("div", { key: '62ff508897f031fab005787d56c10655903dec99', class: this.mainClasses }, this.hasHeaderSlotContent && (index.h("div", { key: 'c5d3ef40bdf9c241705117864202d050d5a99646', class: "header" }, index.h("slot", { key: '3036d8dad872c9be20879c8128ecf3a3a443b305', name: "header" }))), this.hasBodySlotContent && (index.h("div", { key: '4b95df71025cf46d4026cb42b6c5e06156cd5100', class: "body" }, index.h("slot", { key: '55a339bbf42143b034f69ac9cdc65f9b74d77b1e', name: "body" })))), this.hasActionSlotContent && (index.h("div", { key: '2b1ba9dd4ea25d7f168389358563efd93a14b9fc', class: this.actionClasses }, index.h("slot", { key: '0aa65030b6db7c641ad346040eaa4835596d35e9', name: "action" }))), this.hasFooterSlotContent && (index.h("div", { key: 'b2544bdff69493915f4b10789f2b609eaa2176ad', class: this.footerClasses }, index.h("slot", { key: 'b5417cf58a68cee1a2abdd0cb51a4d1973b1ae38', name: "footer" })))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -117,7 +117,7 @@ const Q2Legend = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("click-elsewhere", { key: '2edad285ad14be5cdee30e071d1e5e11337076f0', onChange: () => this.onClickElsewhere(this) }, index.h("ul", { key: '11104022e84eddd37155299b0833c71bc9a0582d' }, this.dataWithClasses.map(item => (index.h("li", { class: "item" }, index.h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, index.h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), index.h("span", { "test-id": "itemName", class: "item-name" }, item.name), index.h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (index.h("click-elsewhere", { key: '4d2152f5506fd3c000cd13a10d7cb21191fd4a35', onChange: () => this.onClickElsewhere(this) }, index.h("ul", { key: '80a3258fc7fa73aadd20ad7eb0beeb5cee6f47f8' }, this.dataWithClasses.map(item => (index.h("li", { class: "item" }, index.h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, index.h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), index.h("span", { "test-id": "itemName", class: "item-name" }, item.name), index.h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

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

@@ -138,7 +138,7 @@ const Q2List = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '627d68ebcba5f0d9dea1ab60481c380916c76ae5', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (index.h("div", { key: 'f5567987b84f12874e4a8c42b846f5785b99e2bb', class: this.headerClasses }, index.h("div", { key: '0664369f4d92be4486f8d672f62c0d3478c13c2a', class: "label" }, this.label), this.hasFilterSlot && index.h("slot", { key: 'faa8de8696790abc591632e5bc182228da532562', name: "filter" }))), index.h("div", { key: '60a4c2980ea5462df148e31251a59142e001b5f3', role: "list" }, index.h("slot", { key: '935730bc5de751dcd25111cdd4f9cb6b9d00f10b' }))));
+        return (index.h("div", { key: 'f4eef6a9600afff93d1c66833138eb88a81edba3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (index.h("div", { key: 'a84cb093f8c32752c3b968fc346727e5128a0bf6', class: this.headerClasses }, index.h("div", { key: '9f0632191b686ad4eb2f7dac0c5fd6c0fbe3f345', class: "label" }, this.label), this.hasFilterSlot && index.h("slot", { key: 'f66033fc4039ed99278e0b7978de57bba6b73fb6', name: "filter" }))), index.h("div", { key: 'bd58bea54efd17e135f1894fe0ed43e3371abe3e', role: "list" }, index.h("slot", { key: '73df8c2367d93a4a2df07ff0bf3ecc2078e35a6a' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -67,7 +67,7 @@ const Q2Message = class {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = index$1.loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (index.h("div", { key: 'aff2483085e25648ba989847f10c91250df281a9', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, index.h("div", { key: '6f416c44047bfce1f0f788edf7545a1d0da4b55c', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && index.h("div", { key: 'f144ac7da5821a8c7f5df44d2ed7b16ee35d025c', class: "sr" }), index.h("div", { key: 'ebff5b28951e94eaf1cb83d67b4376c3636f3143', class: "sr message-label" }, messageLabel), index.h("div", { key: '40f3902af3e4b79ee61c3f2dc0f63cd209694c83', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: '6843ae94d50f20f2599a92d5e31122498cee53a5' }))));
+        return (index.h("div", { key: '18638881b4ef7a62a3681181d2a4339bcb76d0de', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, index.h("div", { key: '891ef403fa0d485c83e585d5a3225e39c39b7123', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && index.h("div", { key: 'fdef50ee27ac0da34438995a985310bcdaeb2338', class: "sr" }), index.h("div", { key: '111869893bfbea57491ac365247890444602a0c4', class: "sr message-label" }, messageLabel), index.h("div", { key: '44b73f49446eaada25bf4b05ac32e88c2bfd1cb2', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: '09003ab82d44a89c00c06e42d916cd3f7fa930ed' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -115,7 +115,7 @@ const Q2Meter = class {
     }
     render() {
         const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
-        return (index.h("div", { key: '1fcdcdac6a15aa52ac302ec40bc5809ab39fdbe6', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (index.h("div", { key: 'a4cf43a802e84c0ceaf44c697511c206d0611906', class: "label", "aria-label": index$1.loc(this.label) }, index$1.loc(this.label))), this.description && (index.h("div", { key: '8b8bdbcc35dbc2de60063cbf871a4a34bbe7548b', class: "description", "aria-label": index$1.loc(this.description) }, index$1.loc(this.description))), this.renderBar(completed, suggested), index.h("div", { key: '624342cfe8f534af2396fe6190e24bfcaecdb0c2', class: "legends" }, index.h("div", { key: '835efacea1cc4d03092cecbbd6914d54b498fa5f', class: "left" }, this.completedValue || this.completedLabel ? (index.h("div", { class: "completed" }, index.h("div", { class: "dot" }), index.h("div", { class: "legend-label" }, this.completedValue, " ", index$1.loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (index.h("div", { class: "suggested" }, index.h("div", { class: "dot" }), index.h("div", { class: "legend-label" }, this.suggestedValue, " ", index$1.loc(this.suggestedLabel)))) : ('')), index.h("div", { key: '428535e8b751a3316bfb5b5ad19756d3fc09fcd0', class: "right" }, index.h("div", { key: 'f175ee347bcd84716c5e1971d657c4fbf7dcbbc1', class: "max" }, this.maxValue, " ", index$1.loc(this.maxLabel))))));
+        return (index.h("div", { key: '114be4db946db69c97b2a9980f8bcd4757653f95', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (index.h("div", { key: 'dfc5eda2e024fa1c1d6ba204e8e2cfa68329a0a6', class: "label", "aria-label": index$1.loc(this.label) }, index$1.loc(this.label))), this.description && (index.h("div", { key: 'a54ca24a734890632c07f209ad35d30e2f3c9bc5', class: "description", "aria-label": index$1.loc(this.description) }, index$1.loc(this.description))), this.renderBar(completed, suggested), index.h("div", { key: 'fa7cc14c41ba679ade93ed7d81cddd2d52bb0319', class: "legends" }, index.h("div", { key: '9327c024866ccc780916981b899c5e47d8bb61e4', class: "left" }, this.completedValue || this.completedLabel ? (index.h("div", { class: "completed" }, index.h("div", { class: "dot" }), index.h("div", { class: "legend-label" }, this.completedValue, " ", index$1.loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (index.h("div", { class: "suggested" }, index.h("div", { class: "dot" }), index.h("div", { class: "legend-label" }, this.suggestedValue, " ", index$1.loc(this.suggestedLabel)))) : ('')), index.h("div", { key: 'a010c391768b966bfcefd828cd57bbca82414da4', class: "right" }, index.h("div", { key: 'eae86a6c446ce32bbc32c22724c9ac18362a4e10', class: "max" }, this.maxValue, " ", index$1.loc(this.maxLabel))))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -139,7 +139,7 @@ const Q2Modal = class {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (index.h("dialog", { key: '2a1e01cc98af3b7dc4ec4492f3dbe2b61ff060ff', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, index.h("div", { key: '6e0c488f59516d53c2e34c80c4fed32f2963e76e', class: interiorClasses }, this.title && (index.h("header", { key: 'd97209894acdc0c907516395ec4ccb2dea5c93d3' }, this.title && index.h("h2", { key: '56cd50bf63c72417bb7d640eb64421fa65ed4006', class: "title" }, this.title), !!this.closable && (index.h("q2-btn", { key: 'e9832d75490902ccac63009208dc805183fc6fed', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, index.h("q2-icon", { key: '999e4cbad19c10f2938a00e105dc9655dadb4fa1', type: "close" }))))), index.h("div", { key: 'df57e3809860f06f08ccca9578612d5d204c4cde', class: "content", ref: el => (this.contentElement = el) }, this.icon && (index.h("div", { key: '56ea4df19dab180f4e8847e4b64e2a8784be2ee4', class: "icon" }, index.h("q2-icon", { key: '50cc9eb841424d1433a5afcac8416a604bc583d7', type: this.icon }))), this.imageSrc && (index.h("div", { key: '743af68df051cc939799d60ba061cdc0b5680212', class: "image" }, index.h("img", { key: 'ad69ea057cb66b80338a9d06601c39f1ae5aa3ac', src: this.imageSrc }))), index$1.hasSlotContent(this.hostElement, 'content') && index.h("slot", { key: 'ac45807fa0700265591bc194cf0b24cbc233d23b', name: "content" }), this.description && index.h("p", { key: 'adb8757efc3a2877ccf0eb4affd759158caa38d6', class: "description" }, this.description), this.customMarkup && (index.h("p", { key: '95f97089b1cf6c411f8e915808f6bf89fe396e0b', class: "customMarkup", innerHTML: sanitizeHtmlString.sanitizeHTMLString(this.customMarkup) }))), index.h("footer", { key: 'd41618d7da89c69d604cf762831a26b1a56901b4' }, index.h("q2-action-group", { key: '6a4d8f77c8c5e2b86b439d76d05b2280786da704', "full-width": true }, index.h("slot", { key: '87e723189a4c60e2ad0cabe567e6603a368e7c58', name: "action" }))))));
+        return (index.h("dialog", { key: '1bccb63a37166885ac3fe684141f8c8751569554', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, index.h("div", { key: '2e9005f0bd4f93aa0e4e4b5868fddc8e9b2ce267', class: interiorClasses }, this.title && (index.h("header", { key: '4dc2c5b20e6e766084a300a6b747ccd9bf482d74' }, this.title && index.h("h2", { key: 'c93f7a66309307761bc2a0b41b94cf17363dc877', class: "title" }, this.title), !!this.closable && (index.h("q2-btn", { key: 'aa3e5f3fa4f63055f36a8bfbc048f8262c29648b', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, index.h("q2-icon", { key: 'ab8c726d5d6522f2fc41ef8272bd704b27a31739', type: "close" }))))), index.h("div", { key: 'f259da2c00afb066a3aa30bc04641ee760591e37', class: "content", ref: el => (this.contentElement = el) }, this.icon && (index.h("div", { key: 'ecdf6189b3fa6021e6749f92e03fd89327859bb2', class: "icon" }, index.h("q2-icon", { key: '36b7977b295ceef5471e6b25ff42583bceed87d1', type: this.icon }))), this.imageSrc && (index.h("div", { key: 'ea9d269d8ced711dc47b8c358e324058a2b00f48', class: "image" }, index.h("img", { key: 'ecce6985f6f7de5f92f9c2d5f2773c5371735e40', src: this.imageSrc }))), index$1.hasSlotContent(this.hostElement, 'content') && index.h("slot", { key: '6d7f025c0f001d8b2b790bfadb7da9f8afc4b414', name: "content" }), this.description && index.h("p", { key: '1483ddcbdd4bc12c8d16649ee828335e9fc47c20', class: "description" }, this.description), this.customMarkup && (index.h("p", { key: 'dd6c85ec7f0496221e0dccde4da15ff0d237908d', class: "customMarkup", innerHTML: sanitizeHtmlString.sanitizeHTMLString(this.customMarkup) }))), index.h("footer", { key: '0a263f6a30c3210f02ea8f54717049d17b30e7d7' }, index.h("q2-action-group", { key: 'd040e253ed0fd0f38f06719131f006730d588858', "full-width": true }, index.h("slot", { key: '2b7326223c8dd79de652f8661af2253f19f74a27', name: "action" }))))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-month-picker.cjs.entry.js

@@ -142,10 +142,10 @@ const Q2MonthPicker = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'a79408285992125baf4ab6771f6501d79a6245df', class: "month-container", onKeyDown: this.onMonthKeydown }, index.h("div", { key: '857185b3278ee9b9f346686e587a39250130e532', class: "navigation" }, index.h("q2-btn", { key: 'f698f8ea247ba18ecd40d22c74c4247fa300cf3d', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (index.h("div", { key: 'b7429b5ed21f7cda666f140a9a93ee643176979c', class: "month-container", onKeyDown: this.onMonthKeydown }, index.h("div", { key: '802900b16d0efa602df89edb22e174329736dca4', class: "navigation" }, index.h("q2-btn", { key: '0a318088ab2eb826620c056246599f5b7803c51e', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, index.h("span", { key: 'fc467f87579a2a1c90c72e22aa49715ed4130d22', class: "year" }, this.year), index.h("q2-icon", { key: '545d4a90b2c57ef0109475746f963a879c4d69d8', class: "year-icon off", type: "chevron-down" })), index.h("div", { key: '1b1c130e07944ab988e981f41b3351237a638f7e', class: "month-controller" }, index.h("div", { key: '5967309b329f2f0697a26a69d91dfb50b0a6d526', class: "cal-year-prev-next" }, index.h("q2-btn", { key: '23295dbba205dd04a809511501b49b74bd845f16', label: index$1.loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, index.h("q2-icon", { key: '845a1a049fe80fd08470cbaf1b530bcf41734c39', type: "arrow-left" })), index.h("q2-btn", { key: '2074d486e8a0d00cee2ac874230ff2411444f669', label: index$1.loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, index.h("q2-icon", { key: '97699d8fa0378afa468bbb71e8bce6ccb9e78423', type: "arrow-right" }))))), index.h("div", { key: 'f373f6a783137aca3691fdfdc70bea04d487b63e', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index$1) => (index.h("div", { class: "month" }, index.h("span", { role: "button", class: "month-button", "data-index": index$1, "aria-label": month.label, tabindex: index$1 === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (index.h("div", { key: 'b85641400c0c17171278735aa8e8b81f2497ac27', class: "today-label" }, index$1.loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, index.h("span", { key: '02018f884cb7b48fb581597fc7d5a2a323497668', class: "year" }, this.year), index.h("q2-icon", { key: '9ab23a381d4fedb5aca2ecee19eb975d76ff4465', class: "year-icon off", type: "chevron-down" })), index.h("div", { key: '79dd4cd0864d051a4252c21ebbd697e0e75b0ec3', class: "month-controller" }, index.h("div", { key: 'd94ad2ebfc317206bfff5b16861c52507a168e09', class: "cal-year-prev-next" }, index.h("q2-btn", { key: '4d8b12fde9825bd5dca90012d42e73453f2cb777', label: index$1.loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, index.h("q2-icon", { key: '428b2feb8854e145bdbc88bdd2c6a2c25a3a50ce', type: "arrow-left" })), index.h("q2-btn", { key: '2f7ef439402c9788ae002a199813387a370e0ed3', label: index$1.loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, index.h("q2-icon", { key: '5931c20eac7a2268c6b945b336f44e143e9fe484', type: "arrow-right" }))))), index.h("div", { key: '9e18ae0e86a741201eb2a8c6ff04b9007899cbae', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index$1) => (index.h("div", { class: "month" }, index.h("span", { role: "button", class: "month-button", "data-index": index$1, "aria-label": month.label, tabindex: index$1 === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (index.h("div", { key: '8dfee8bcf4ee9b4137c9c8644be7f38f5794bf4d', class: "today-label" }, index$1.loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-mutation-observer.cjs.entry.js

@@ -92,7 +92,7 @@ const Q2MutationObserver = class {
     // #endregion
     // #region Render Methods
     render() {
-        return index.h("slot", { key: 'b383eb3c2f5d2983f3658f776bd52736b4b6f9a5', onSlotchange: this.handleSlotChange });
+        return index.h("slot", { key: 'a7a47f38488edeb403658d1ad7464e79ef254709', onSlotchange: this.handleSlotChange });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -56,7 +56,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '03ea146fc88b43ccd10050cffb20c95bcc64c565', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: '4738ff37a955e7d742a634ce7f043bdfc9f9720d', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: '5f387ec9d47194ee11415a3c91f01ea5b2107822', class: "q2-optgroup-options" }, index.h("slot", { key: '765abe9037d131fa65f5c4ace78de0282c2e17a1' }))));
+        return (index.h("div", { key: '1193ca6f02dab8603a148059edfd6b3f01e55556', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: '5731f04b1976e5e1f96ab37f577ead3889b80e8c', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: 'a52522a81176e91855514da0f051058c740ee4b6', class: "q2-optgroup-options" }, index.h("slot", { key: '8b0c0e1f18f3b8ca76cd3c00e28e5cef73457ca6' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -307,7 +307,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (index.h("nav", { key: 'f99b44d19603ae3981ef849748ef6163fc45919b', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: 'd1643de16462d1f16fc252eeed2e568e246648a1', class: "description", "test-id": "description" }, pagesOnly
+        return (index.h("nav", { key: '642369130b2d57d4e6a89927608636a4da87f11d', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: 'e988b3374cec5bb1a73dfbcc705899fb3a3474d6', class: "description", "test-id": "description" }, pagesOnly
             ? index$1.loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -316,10 +316,10 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), index.h("div", { key: '6ffec6ee2128172163a381f76d9e06fe82c7316b', class: "controls" }, index.h("div", { key: 'decc2ca51ad2365a07ffd112c1d1726e174b5d0c', class: "btn-group" }, index.h("q2-btn", { key: '7b85578c7595c4285c995c5e5359f6c441bdda51', ref: el => (this.firstPageBtn = el), label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: '550559c6d68876121fb3aaa87414e4adb11f4429', type: "chevron-double-left" })), index.h("q2-btn", { key: '6bf47805cabef90404a66317fc4bff10921818bd', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'cd7e55771f9de549a7729236df927274745825b9', type: "chevron-left" }))), index.h("div", { key: '730078a28d7d555bfed57381b972e54c8059a556', class: "input-display", hidden: isFullViewHidden }, index.h("span", { key: '35b93b8034569d72bf0670d73f7ce1ec0fef826e', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: 'd28c27c41044573a0fb1adf2b8a89ef582c5aa98', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: '28bf16274c57944a7a7132dd29a2e606d9f6c108', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
+            })), index.h("div", { key: '8ac5316082ab9fcc03fd6c605e56e31124f5d5dc', class: "controls" }, index.h("div", { key: 'c7e99c77f10d0d587d31af19b3bd39ba2d64aeb7', class: "btn-group" }, index.h("q2-btn", { key: 'ba7cc1e9b1eee9d0db75e7f653c74974e06435a6', ref: el => (this.firstPageBtn = el), label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: '90b82dd3b935af151d517c997086e5779e51bd3c', type: "chevron-double-left" })), index.h("q2-btn", { key: '179b59d1c5cebff1897d5e0a3e825e969da90719', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'b23b78e56fc5df453036c07c055f2bc7bf10da11', type: "chevron-left" }))), index.h("div", { key: '5ac4941af9479fe7c2644cfe56fb1bf3f4e2c968', class: "input-display", hidden: isFullViewHidden }, index.h("span", { key: 'f748874515ec184a25bc2f10f16f1031b4ed5583', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: '2e870838a5ca57ccfd80f648f8eaf6f895c950be', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: '3c765b872520ae12cf6d86789a5dfb56fe140d97', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), index.h("span", { key: '5fc845812367d39bf91826657da31f39436fc670', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: '73183db09f66cad393b33571260579720f2e8c12', class: "btn-group" }, index.h("q2-btn", { key: 'c3daf5fd49273bede94ce2a9994309d282f1bdbf', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: '427474ab8f77a0e314a687bb00d199858234f30d', type: "chevron-right" })), index.h("q2-btn", { key: '607732d95674f7620423817e7394ec4e88ac6e9b', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'ff871b93e2f4932eddde86761f126fb6937b43fb', type: "chevron-double-right" })))), index.h("div", { key: '506a9fd9aa1790d1a2efb7b8a744a8fc1d76a409', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), index.h("span", { key: '1fad0a391c7b5b2bac9439b7116674d43d205a95', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: '52dc5be6a7deae84418c2cfbf108b68451c3db5b', class: "btn-group" }, index.h("q2-btn", { key: 'b1aa2468c227ad4f251736eee6596a0525f620dd', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: '689bc3f2f90724c53ff67d9724d17cc303af716c', type: "chevron-right" })), index.h("q2-btn", { key: 'bb1bb9cbbbc58454e6f811fcaa5359d561d79042', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'd271e5fd48c58f95f0b8d2d45af6f48c335038e8', type: "chevron-double-right" })))), index.h("div", { key: 'cc2ac1c470e2034b242079c44ecf4435cb42548e', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -373,7 +373,7 @@ const Q2Pill = class {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (index.h("click-elsewhere", { key: '33f8d76b96617663d26ec896e9d389fcaa18e6e1', onChange: this.onClickElsewhere }, index.h("div", { key: '96e54e580f5f313a5f50049fe4a795fc444c1de5', class: wrapperClassNames.join(' ') }, index.h("div", { key: 'a5482940be97c882b54e4674f96f88344553e274', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, index.h("button", { key: 'd19714c018c3ba17433614432fc6225f84c2dbba', 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}${!optionCount && active ? ` ${index$1.loc('tecton.element.pill.active')}` : ''}`, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (index.h("q2-popover", { key: 'a321b1db273a1d401e932f35f05245e3d3199b88', 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 }, index.h("div", { key: 'e9fc516f6855ae2c9cc67dd46c041e736c4d552e', class: "popover-content" }, index.h("div", { key: '9cc43dbc66b7eb40f05d89278684a24f7f2b061f', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, index.h("slot", { key: 'b3d2ff22c4fc3293ebfa70db9f42c2940e149825', name: "popover-top" })), index.h("q2-option-list", { key: 'ebb64d5e7086c49c84b8da96669b5ad9eaa9b631', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]) }, index.h("slot", { key: 'a09461650fc5b4cd38cdc316eb546f877c0ee9d6' })), index.h("div", { key: 'f146e3181d0b35dbe28f46b9ab4d0aaf9691f9ef', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, index.h("slot", { key: '515c40d83c6de0758426ca430fcfbc35c5266cc3', name: "popover-bottom" })))))));
+        return (index.h("click-elsewhere", { key: 'e967de8b2086ebf86f51cc927c3430c07ad37636', onChange: this.onClickElsewhere }, index.h("div", { key: '38c871229f1f80d49b003d5c6f7895c335a9eed8', class: wrapperClassNames.join(' ') }, index.h("div", { key: '8dd9a60999c49de096f8f8f67adccffba0f9a80a', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, index.h("button", { key: '1d485d62c6acfaee927e1fa1aa0bc9401c7f2c98', 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}${!optionCount && active ? ` ${index$1.loc('tecton.element.pill.active')}` : ''}`, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (index.h("q2-popover", { key: '05ca8c8195186b220364ee67198d6210bbe34455', 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 }, index.h("div", { key: 'e1eb81bfc0489fd9450975eee632fb59830cce54', class: "popover-content" }, index.h("div", { key: 'a101a2d7f88fdb18f2a859737f1bca96742bad7e', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, index.h("slot", { key: '752c27b869d1dd91f5d369e7f1675554e48a4554', name: "popover-top" })), index.h("q2-option-list", { key: '2f70d1533c8733721326b02a47531a7feb47ab7e', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]) }, index.h("slot", { key: '5ffddd45ce88c535a5bb4481f34a74690cb8d46f' })), index.h("div", { key: '1c5ae3722ea7caace731239ac0d91d4fcbe7eb8b', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, index.h("slot", { key: 'afa0d457a65303d7a4e50fa9e633e9fa609922e8', name: "popover-bottom" })))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-radio-group.cjs.entry.js

@@ -180,7 +180,7 @@ const Q2RadioGroup = class {
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = (showLabel && !this.hideLabel) || hasError;
-        return (index.h(index.Fragment, { key: 'ccf42e615a57f7a10d1dbf83477abe2f3a09c318' }, showLabelRow && (index.h("div", { key: 'e1dc942fcf0fd1736b3527471507f952d0823705', class: "label-row" }, showLabel && !this.hideLabel && index.h("div", { key: '5c9f17f222c2b9724b774e2d1963f4a83288b320', class: "group-legend" }, index$1.renderLabel(this)), hasError && (index.h("q2-icon", { key: 'a78ce480598193b64922b11d37b62a29452dd08c', type: "error", "test-id": "iconError" })))), index.h("fieldset", { key: 'c90583a3df7d565c92b8a39089f38d2a70487389', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && index.h("legend", { key: '1f4a2f89ade2bb185ba10dc4edd64fbcfc689c05', class: "sr-only" }, index$1.renderLabel(this)), this.inputDom())));
+        return (index.h(index.Fragment, { key: '3fa5b7ba14cd74a3544ad38d40c74127126f0fc6' }, showLabelRow && (index.h("div", { key: '254b8a8ec9f21fccf2227966f56e366682957da8', class: "label-row" }, showLabel && !this.hideLabel && index.h("div", { key: 'f1176458f14bfc50adaab4a0d5342a7fcf58c6a4', class: "group-legend" }, index$1.renderLabel(this)), hasError && (index.h("q2-icon", { key: '7b829af0555cd13090459c5dc83ba22ce4cbe92c', type: "error", "test-id": "iconError" })))), index.h("fieldset", { key: '1eb9e6e18c1a5442d4582f23649b06d3864412b7', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && index.h("legend", { key: '2ee4c9b44c86077fbda3f9eef02da24546cb6ec6', class: "sr-only" }, index$1.renderLabel(this)), this.inputDom())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -93,7 +93,7 @@ const Q2Radio = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '1819bf1b409bdb257c590c95fd059f48e9ec2ebb', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, index.h("input", { key: 'a6ef43c7dbb5da2e42dc24bad503ce48dc537080', 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 ? index$1.loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), index.h("label", { key: '1da75f9e58a0b461d9bbab4bc09ed839a0364b11', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (index.h("svg", { key: 'a85fa6abe0998cf6f1e377f1242788c41aae034d', viewBox: "0 0 18 18" }, index.h("circle", { key: '3c0ce4521a486e2f4d8890b844ca960a3f732b66', class: "big-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), index.h("circle", { key: '95d480099459712896b5941542fef02002f1bd64', class: "small-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (index.h("div", { key: '3d217b5973322972a84dfafafb30055665840544', class: "label-content" }, (this.label && index$1.loc(this.label)) || '', index.h("slot", { key: '1ae3f23813fe800de5e7fa75e6ebfa33205c3961' }))))));
+        return (index.h("div", { key: '1c740c79651798b5aa532b48a8d35fbfb44e47a9', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, index.h("input", { key: '1e8f5b6100d8ad8c43a60afba569184f5ccd8530', 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 ? index$1.loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), index.h("label", { key: 'd86c5a574f853b570491bc9842996d9300b3a72c', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (index.h("svg", { key: '473eb06c9c4a1b7ebd8014642da157b2aa4a5d08', viewBox: "0 0 18 18" }, index.h("circle", { key: '0035db29b3d96bb1e322fd8aa7233554098be30a', class: "big-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), index.h("circle", { key: '6efda15f869a255325c8f09e9cf250a50627bd6d', class: "small-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (index.h("div", { key: '5def4a33beb0e6bd0e4327cdfb07d3fdabb4a72e', class: "label-content" }, (this.label && index$1.loc(this.label)) || '', index.h("slot", { key: 'f8ca1eac5a03d93e7019b5e5bd25456acf5a1230' }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-relative-time.cjs.entry.js

@@ -154,7 +154,7 @@ const Q2RelativeTime = class {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return index.h(index.Fragment, { key: 'e2c0439b5b2ef14d719309202959a650e1a8e7d5' }, shouldShow ? index.h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return index.h(index.Fragment, { key: '3a518920ff969cb0b60ca20ac780e11022803bef' }, shouldShow ? index.h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -188,9 +188,9 @@ const Q2Section = class {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (index.h("section", { key: '05ee53a9a05e1037c893f08ac5cf918c25b7f877', class: "wrapper" }, index.h("header", { key: '52678d55334407ef19cfae457e0e9fe277fb0bdd', class: hasHeader ? 'has-header' : '' }, index.h("div", { key: '76a3ade1875c6e64866ed5b50d005885c9108c61', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && index.h("h2", { key: '144199b22c9eb4d2b6c16c8890554f80939ac3f3', class: "title" }, index$1.loc(this.label)), index.h("div", { key: 'ce508b60dced7965b3e5a2c79999f8720176827e', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, index.h("slot", { key: '73e9cfcfc13fe1eb9ae4b12593ca620f103fd3dd', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (index.h("q2-btn", { key: 'd3d53f2d0740600a5178d93107db9ba684f29a44', label: index$1.loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, index.h("q2-icon", { key: '5c79651503d2222d92bdc8cc9b7811f75306a436', type: "chevron-up" })))), index.h("div", { key: '55fc425e4aea009b8102eb495069d9e191660045', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (index.h("section", { key: '3128e3974825bcd873c7713c20e1b4f004d02a30', class: "wrapper" }, index.h("header", { key: '1eb1fb74a992c76989a2a8baaa3bee68afa57138', class: hasHeader ? 'has-header' : '' }, index.h("div", { key: '9621ce7f0ccbfb97f522b5640d986371e0ed2d08', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && index.h("h2", { key: '9b4819672218286c3b0d11417933b6661a97c2af', class: "title" }, index$1.loc(this.label)), index.h("div", { key: '3ad3f55b3a554575b5b361ea565883860ce843b3', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, index.h("slot", { key: 'ada9ab542b0f37d627fd1086c92289ebb6ec9049', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (index.h("q2-btn", { key: 'dfd4ba0293689a3d603a1c1168e2f140c5307d60', label: index$1.loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, index.h("q2-icon", { key: '6c72dd59ead1dad5a54def864afa4d5d6ff7ce14', type: "chevron-up" })))), index.h("div", { key: '96434da7e59bf12b908a95aa4aa46fe59655da32', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, index.h("div", { key: 'cd773f58a51c95785062f37c7542d0742acf9ab9', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, index.h("slot", { key: 'e614cef7ec9036998dc509454c79439e3369b660', ref: (el) => (this.contentSlot = el) })))));
+            } }, index.h("div", { key: 'b6ef59a27be6c6b3c0cdc8b23eef7d7a80a0937e', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, index.h("slot", { key: 'bca7946799bfd50e1be14b24e4106df2a583b43b', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -792,7 +792,7 @@ const Q2Select = class {
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), index.h("label", { htmlFor: "selected" }, index$1.loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (index.h("click-elsewhere", { key: '3e4e224801ab3110490f94c49d6b1ff1e1f8f227', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (index.h("click-elsewhere", { key: 'c0da37dd6495f81c0e9fa7303ed3059f60521d96', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-stepper-pane.cjs.entry.js

@@ -75,7 +75,7 @@ const Q2StepperPane = class {
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (index.h(index.Host, { key: '69b27313eda3276e7041c2813b2a56a53efc104b', role: "listitem" }, index.h(index.Fragment, { key: 'c7c5d0fd3ad3dc8650832d6e2f32ff59ee28b1a6' }, index.h("div", { key: 'a07608df6dc48453a00b72e501d23f28b72ab5cb', "aria-label": label && index$1.loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, index.h("slot", { key: '68cef0c9131cf432fa9d48500f62fc88ebba198b' })), index.h("div", { key: '0b9f7a3e34565490acd91747b047f9802bf9ac49', hidden: true }, index.h("slot", { key: 'ca7f10c02501ba44b75640d6f6a67d1f4d5dcf92', name: "label", onSlotchange: () => this.contentChange.emit() }), index.h("slot", { key: 'f1cd0547c27b3f869fc245d6eba144cf85c3e17f', name: "description", onSlotchange: () => this.contentChange.emit() })), index.h("slot", { key: 'bf21a7e7f578f58649edfa9ebf34849385b712a4', name: "children" }))));
+        return (index.h(index.Host, { key: '3522e747efa7fceace61bfcbc8ebe875a122b68d', role: "listitem" }, index.h(index.Fragment, { key: '986e434647215ff29c168609a2154156fdbb69a1' }, index.h("div", { key: 'ed2fef05b366c5fd3d8f0b64db2ce4dceb3b6735', "aria-label": label && index$1.loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, index.h("slot", { key: '5b5333b64c2114e5fd7caada8818eb2ce793900f' })), index.h("div", { key: '6aeb4f8ebc8700ac3c363bd72023743eba58f841', hidden: true }, index.h("slot", { key: '7d3eaf00c409f597efbb934a8d356195fa239265', name: "label", onSlotchange: () => this.contentChange.emit() }), index.h("slot", { key: '258bf88e3a2c98734501a3d3e7b66e1735011f50', name: "description", onSlotchange: () => this.contentChange.emit() })), index.h("slot", { key: '4013f30dde148392690cdef431959a056af98873', name: "children" }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -281,7 +281,7 @@ const Q2Stepper = class {
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (index.h(index.Fragment, { key: 'b9bbe49ba3b47a4bcf32a8dc15e8731288f4eebd' }, index.h("div", { key: '1573c647f547aadef0b6cf393acfe61e431cf0da', class: containerClasses.join(' ') }, scrollEnabled && (index.h(index.Fragment, { key: '9d3a985448dd7e4439485fb3b8408871d67df6fc' }, index.h("div", { key: 'b8ed037c41fa19dcfeb2d30e0690c9838bf9f61a', class: "gradient-left", hidden: !showScrollLeft }), index.h("div", { key: 'ef91d66fd50ce2377c96999aea029da78cef8438', class: "gradient-right", hidden: !showScrollRight }), index.h("q2-btn", { key: 'd041a6e7aedabbb47de657cc690d3488cd408d2f', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: index$1.loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: '0a4b6a0b982f270dca51fbd61829708daf03ea79', type: "chevron-left" })), index.h("q2-btn", { key: 'a690d70cc826f0236d2501680850453d3160b636', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: index$1.loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: '0678d7423d4f3fc7529649b23f074fc1b17f6379', type: "chevron-right" })))), index.h("ul", { key: '623c1491f459cf7e1313d486f3a547d9c31f0bf6', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), index.h("div", { key: 'cce9355d3553bbefef2eb5cf303463777693ff76', role: "list" }, index.h("slot", { key: '7de13d3600c9b8093d77b55101f27bb2d7bb19a8', onSlotchange: () => this.onSlotChange() }))));
+        return (index.h(index.Fragment, { key: '921748b0e20ada57cac4f0b66ac9ed97d2355d26' }, index.h("div", { key: '3d5099613b5a5e825ade9a246dbec2068e04a7d8', class: containerClasses.join(' ') }, scrollEnabled && (index.h(index.Fragment, { key: '3842e7310fa0788566192e34fee1d1df20f48b52' }, index.h("div", { key: 'ad9d8ba937cc012dca25b8844e2ecea36be1e4c8', class: "gradient-left", hidden: !showScrollLeft }), index.h("div", { key: '4a17dcc015ac03d2b6c41d2493c7ae81196d850f', class: "gradient-right", hidden: !showScrollRight }), index.h("q2-btn", { key: 'b38a23630a4c0f330aa52d8b2cfc7643b3fa134c', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: index$1.loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: '043873f95eae37851127d03c61fd73c93abae581', type: "chevron-left" })), index.h("q2-btn", { key: 'b86849ccce00f6ddbdd25a64f345f98e6070dd19', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: index$1.loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: 'de9ea9fc186474cb0f3a57f6314aa1e78539a2cd', type: "chevron-right" })))), index.h("ul", { key: '10078d2a1382c4abee65f52c88ef3006cfdd0c19', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), index.h("div", { key: '96efdd3370c5fc3ed7f91d372a645063b9b6ad61', role: "list" }, index.h("slot", { key: '26bfea7637cd71eb704d626cd93c74c3df13c4ba', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -281,7 +281,7 @@ const Q2Textarea = class {
         ]))));
     }
     render() {
-        return (index.h("div", { key: 'a9b5fe04a27d30b849855d25b4ab470a6670827a', class: this.wrapperClasses }, index$1.renderLabel(this), index.h("div", { key: '73bb18321f257624ca7563572cee97d4d77a2879', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', index$1.renderMessages(this))));
+        return (index.h("div", { key: '1a53c8b1528031f5ccb957f2a2320f7a8a8f4607', class: this.wrapperClasses }, index$1.renderLabel(this), index.h("div", { key: '1de221d01fd339d749b557d408acabdc06c07ecc', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', index$1.renderMessages(this))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/collection-manifest.json

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

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

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

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

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

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

@@ -90,7 +90,7 @@ export class Q2Avatar {
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: '0b0763459eef36a6c1b732ffe072ddea6ad7068f', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: '4d2f13a0aeb738b77b9b4fd1e9295b39ee2902e0', class: "decorator" }, h("slot", { key: 'fdace597ad36d65c598ec8e769c60d7216b20d6c', name: "decorator" }))), showImg && (h("img", { key: '171f2a32c21251cab74c48906708c2519ecdccd9', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: 'bdbdbf84cdae92c7267a30f85ac705505843e8ba', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'ae24a23a880a1f39dd760e90f81e3923769ca518', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'f80ef047816ad7c16017e9f0c0f5d983f3a69011', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: 'b2e96f1431ef35b35811937b6008badd4c415f97', type: this.icon })))));
+        return (h("div", { key: 'bdce1116b87a48c861e7ba66e0dccd13829d3819', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: '461db5f2062faa3c4d7f43105c84c51aabc179d8', class: "decorator" }, h("slot", { key: '673a93a53a752514bce15687f5791682fdf3b0b7', name: "decorator" }))), showImg && (h("img", { key: 'fa881cb161c7f2bf64dabc1cf888d465e4698cb9', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '6d8707c833fed056813f81b9014e82584444fa54', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'ae99c0b68abaa70e9517dee3dfe6dfdccdad13d6', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'df92213216e69c7d933fdfcd4ba1664cee793e14', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '373a344abc59c1e8ea07472d932d5417265582d3', type: this.icon })))));
     }
     static get is() { return "q2-avatar"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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