q2-tecton-elements 1.50.1 → 1.50.2

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

@@ -223,7 +223,7 @@ const Q2ActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class Q2ActionSheet ext
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: 'c99b589b75c39372357eb770fa5372d659049ea9', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'eb9104dbb4b18b509acbbf3af0714242eacf8cc3', class: interiorClasses }, showHeader && (h("header", { key: 'fd2c1d17be91b019d619bf3ad02a8275e1845591' }, h("div", { key: '107f884557c370cfb762a9108ce25af68c72e518', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '539c266789fe661ab28b1070fbd7e38f4f0b5707', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: 'deb33ad52b81f09b7cbf9cbc156c6b439bc1ac99', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '76f62ec201aed93b7e00a3d9aeb130b69f7a804a' }, data.description), RenderContent && h(RenderContent, { key: '3afef7d044a72faa8a5a337671a3b579b6ea065d', data: this.data }))));
+        return (h("dialog", { key: '20991d60ddd183cc58ff722a4b4b64bac8128164', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'd4bd123b00f1ce75843c96f9b3ee75adede8c41b', class: interiorClasses }, showHeader && (h("header", { key: 'b44b88d65b40c727bbdbb0bd47917d6d671ab568' }, h("div", { key: 'eebd085dd5b58d36c822640f49e49dd043f2e540', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '292610d9557da7e3cb5ad43c3ea58ee247ab2ed9', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '3f5f532add94aeb5d47cdd9a8ec1b8c56bbd6306', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '44cddeb9154c3bca25c469dc17f26fa821e7b907' }, data.description), RenderContent && h(RenderContent, { key: 'daed34bea6a88ab64e1e3f6c46b19a719986b05a', data: this.data }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ActionSheetStyle0; }

package/dist/components/q2-avatar2.js

@@ -56,7 +56,7 @@ const Q2Avatar = /*@__PURE__*/ proxyCustomElement(class Q2Avatar extends HTMLEle
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: 'e3e33942b1e2792988f2b947e4085ce53dc341da' }, showImg && (h("img", { key: 'b472762873a44047304ed60148925e8b996f96a9', 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: '3a43054eb04c4ff8c8dd9be48bf95becf389c9fb', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: '12c82078a7b3a8b87e9f2265b3dc0d950c642bb3', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '157d78a0de480e216946cecb77b8925622a660e8', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '6f7b7dbe36dec6cedc21003a2da488ba1b7729f2', type: this.icon })))));
+        return (h("div", { key: 'eca418235f85a0e2754f41ba734589fb42ecd0fa' }, showImg && (h("img", { key: '8bf221680bfead75a073782ef28763aed71bab08', 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: '42b8f465ce56253993b9df9dc90cb3b2c7de09c1', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'f375c0d7f6159673d8ccb9cc15603b6560e9c2c1', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'ff9e79a51724013622d85f5319cb0241cc3d5923', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '994f5b13945a6a49e31b5c1d5e1591fe5e029554', type: this.icon })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -99,12 +99,12 @@ const Q2CarouselPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2CarouselPane e
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '329730e3bc9a85b711e75cba936f7e5c8eafc125', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (h(Host, { key: '318983a14b26694564ecf4529a7114cda73579e5', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: 'bf86f515d661156d9d5c31ccf5f11bb1dd9f83e9', class: "q2-carousel-pane-main-content" }, h("slot", { key: '9b5bbada350a80f9a75dee3d1b3a98476f43e416' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: '11938ea720c07a25ed4344b47d494778715e9677', class: "q2-carousel-pane-main-content" }, h("slot", { key: '037ea8007be94a7c3184fa4e5d86fb287d4b0098' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -4193,7 +4193,7 @@ const Q2ChartArea$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartArea extends
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '1d229092f2ed222a1b2e6910246d34dbd14c4cb6', class: "container" }, h("div", { key: 'dde535e1cd185ad11cf6801ce6e941217ecefe5e', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: 'd990473128ffe5deeadb45cc6b1dd2f9c0b64ad5', class: "container" }, h("div", { key: '9984d1d8621b53ceca30c953fbe4d47040135bbe', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

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

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

@@ -4496,7 +4496,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '696f2c528be4727613f055b7af2fdd691887a23d', onChange: this.onClickElsewhere }, h("figure", { key: '65ddd99c4568a92b4355ecb4ea2ed781d300cb10' }, h("div", { key: 'f60b832a32fc06b19ffcd44c0c72373ae921200c', class: "container" }, h("div", { key: 'b1cba2e57d2e36aea414db321a2efa7fd724cb66', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '9f7876b0d4f0642cf45ff4823149c5c3bccfa166' }, h("q2-legend", { key: 'b2ebec13e70c3e4af4527f5b12f76a9bda6fd965', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: '96054624526f33b6f7b402834b4c9b47bcd71246', onChange: this.onClickElsewhere }, h("figure", { key: 'ef39e5d751ed9e4f11980b6a98310126902e34f7' }, h("div", { key: '6dcca5ae5a1998bedfa09e82cdefd8e9170fabd5', class: "container" }, h("div", { key: '6c280aa60d136020363e818cd3926ad71963efc2', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: 'd45acb8a38df2507ccd238d6d7b592ca85334bcd' }, h("q2-legend", { key: '780b7bec6c1a443f4f62e71a1f6092f5d5a95cd5', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-currency.js

@@ -112,7 +112,7 @@ const Q2Currency$1 = /*@__PURE__*/ proxyCustomElement(class Q2Currency extends H
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, } = this;
-        return (h("div", { key: 'ed33172deafa3f61e799dffc372e7b9fd6a874e9', class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: 'af56566eac86d140a2d6593895c3393fbdaf805a' }, plusMinusSign), currencyIsFront && h("span", { key: '6ed73eab5877469f48eb44ab7dce6642304adeae', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '240303c419b898c255a00eac5e55a910ee1ac6d1' }, amountCore), h("span", { key: '83902dbf7399faf3afcd9bdaf165802f1c9e78d8', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '11fb3f1155b4273eb6bf9f13924ef98a51c18034', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
+        return (h("div", { key: '999d07e34a553a998f6fa948c4ba24e95bf6a7e5', class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: '1d0f5cdb3ed6c197911c4162b767e4cb574394f2' }, plusMinusSign), currencyIsFront && h("span", { key: 'd914dacefa8ab75f3f3a581f3c2c6bf4aad47268', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '828814f2ce77654e5f7f9a1d7929d289a870d75f' }, amountCore), h("span", { key: 'dad6075fa7cf320f9007c6130e45fbb8c3c56eef', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '450785a5bc2da9ad330645efcf6b39643ec860f7', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
     }
     static get watchers() { return {
         "amount": ["propsUpdated"],

package/dist/components/q2-detail.js

@@ -105,7 +105,7 @@ const Q2Detail$1 = /*@__PURE__*/ proxyCustomElement(class Q2Detail extends HTMLE
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e63b70f3c683aa7ba6630533fdd3c88dc4d02a08', class: this.detailClasses }, this.hasLabel && (h("div", { key: '303a45c6c57675b4eca47ed6ac21d0f8af317bc2', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: '15a26b4ce8152469c723600df1bf415a1f75924b', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: '1ef2ee4b05b070d2a518405f29b9a5c21b0e8f2e', class: this.detailClasses }, this.hasLabel && (h("div", { key: '73c1d678a8ad6e6e0fdc4404765fe425847226a3', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'fbc2c4ae3f25256743541c0538feddaeeaf75a3b', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     get hostElement() { return this; }
     static get style() { return Q2DetailStyle0; }

package/dist/components/q2-input2.js

@@ -3535,7 +3535,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '0492e29c88a0aed40cc7fc3becfda672632e20d8', class: this.wrapperClasses }, h("div", { key: 'dcb30995011ad0faf90613195a2877d524b5e1ba', class: "label-wrapper" }, labelDOM(this), this.countDOM()), this.inputContainerDOM(), messagesDOM(this)));
+        return (h("div", { key: '4918151fa9da30be7a3bf6d5ecd954db624443fb', class: this.wrapperClasses }, h("div", { key: '8fcc19f69afd2ef3cf9b82f4b803e3ce8d133b44', class: "label-wrapper" }, labelDOM(this), this.countDOM()), this.inputContainerDOM(), messagesDOM(this)));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-item.js

@@ -107,7 +107,7 @@ const Q2Item$1 = /*@__PURE__*/ proxyCustomElement(class Q2Item extends HTMLEleme
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: 'a9e39dca79c6270e4f14baaecdbdd4f8b0b4de16', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: 'fc04a26b529e4ce6d172e4302fc14b90e2a78f1f', class: this.bulletClasses }, h("slot", { key: 'f5bb4c3197d403d0343d39a3aa6a798534f2933b', name: "bullet" }))), h("div", { key: '347902661fedb516d8e4cc47809adc4ce82f3ff1', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '47e886c8cacffdea8f5c6f7dc312e3ece45ec3d2', class: "header" }, h("slot", { key: '9808e356fc03fece812883668c9446910e4c8a53', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '2c520f2cd16119ad5e115538591230f757d6a0d0', class: "body" }, h("slot", { key: '8f0095114ade8d453fae5152dd76d74eaf0500c4', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '3ee7d01e07550738d52b2efc4e0df2b476c30c62', class: this.actionClasses }, h("slot", { key: 'f7025303ec2ee733a387e18a97f0a14554a72ce6', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: 'ea36bbfe6e7b22042a21154c6b8091fb6dc5cd0b', class: this.footerClasses }, h("slot", { key: '81d318a12d21fbaa43ac92099719845081966f9e', name: "footer" })))));
+        return (h("div", { key: '0943905fcede3a827c07ca959234737ce1b1e85e', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '1e5aefb351ac74571e378826669ff0b221b42812', class: this.bulletClasses }, h("slot", { key: 'e9e45b1ff030115950b1ceee0cba82be20a63af5', name: "bullet" }))), h("div", { key: '26c771df0a26b0a42036b8f331a2c57e8ea71c2f', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'ca6181ecadfd53ddebde41ac430035c73182d6ab', class: "header" }, h("slot", { key: 'e462384dd3fdfd40e83d2f7ec8c4d3f09597a765', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '37dfb401047f7505aac80c660be2a41cc415bea2', class: "body" }, h("slot", { key: '890bc5d13e37daf995bad06526a4509fc00e324e', name: "body" })))), this.hasActionSlotContent && (h("div", { key: 'cef8152e2db5a29bc6922ecdacc15b8dc2700062', class: this.actionClasses }, h("slot", { key: '7af93ff164cb5c23002e982cfa25e445ad3bf49d', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: 'e42d3b636c56e83a458da6a38d954006dc1ca772', class: this.footerClasses }, h("slot", { key: 'd1772cb5c44dabf1e96a839c41ae4920939da9cb', name: "footer" })))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ItemStyle0; }

package/dist/components/q2-legend2.js

@@ -105,7 +105,7 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '6ef0467e7caa8b09d79a19a661ddc5b9e5bb4fe9', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '00820cd965766010dd29f00f2cc662e7c581f728' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: '61820f3e95aac1d5a34ca58ade60dfe0f70179bc', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'f4e478dd8b171e21ec06b5e840c6ea197d56f397' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

package/dist/components/q2-list.js

@@ -71,7 +71,7 @@ const Q2List$1 = /*@__PURE__*/ proxyCustomElement(class Q2List extends HTMLEleme
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '84641cf41b60e166bf90242102dc931b85ba039c', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'de36fee422a5b68e57eea21d7e4a79b8c25e4e40', class: this.headerClasses }, h("div", { key: '77ccdd3a53951b8553afd4b5743e13d863120505', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '1fc458fc36e6398cb69f00bd9423e04bd10a9407', name: "filter" }))), h("div", { key: '83b7fa5f2ed61ccb4a9f2e9f0b67592cc0ca1dd4', role: "list" }, h("slot", { key: '7217c6e48937d23cc5d37cfcbae4fbaf553a48ca' }))));
+        return (h("div", { key: '6e13a2d2528e39c9c311bcaad4ec67d1289a5157', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'c9e982989959e20b7ff0933c60da7829c3e399f1', class: this.headerClasses }, h("div", { key: '0e144c49465484a0af747893fff7a282a5d9553f', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '1cf186decc934a037a2f9da8ae0ca518b53bb1d4', name: "filter" }))), h("div", { key: '93e41618d246d0b1e1feb7e55837c31876305a33', role: "list" }, h("slot", { key: '7ff67728af4ff0311123adf5a32ee4d82f3414b1' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ListStyle0; }

package/dist/components/q2-loc.js

@@ -15,7 +15,7 @@ const Q2Loc$1 = /*@__PURE__*/ proxyCustomElement(class Q2Loc extends HTMLElement
     // #endregion
     // #region Render Methods
     render() {
-        return h("span", { key: 'b27e49dd804dd357eeea627ae4cb0fdb4596495b' }, loc(this.value, this.substitutions));
+        return h("span", { key: 'a460a2fec6b1dca127653a1981f1ad7d6930fcba' }, loc(this.value, this.substitutions));
     }
     static get style() { return Q2LocStyle0; }
 }, [1, "q2-loc", {

package/dist/components/q2-message2.js

@@ -65,7 +65,7 @@ const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLE
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: 'a1f3db0aeec9502c1db92acc0fcd8138c09d5581', 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" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'd12074a170737cc538030798fe98e09051ff9438', class: "sr" }), h("div", { key: 'd05b18b097c7e799c3a858ba2bba1712b8ffe7e4', class: "sr message-label" }, messageLabel), h("div", { key: 'eeaed400418f0bbc2598aefd8773912387d4ca5c', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '2392ce36a05043bc88e87003ecbc54a7d9239b61' }))));
+        return (h("div", { key: '6dac3cb7d62c5de2ccc23ae1f632a207f40d7d35', 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" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '9df1fab5f5a7584a71ba1ee534bb7e7ea095ab2e', class: "sr" }), h("div", { key: 'e10bddd7eab4b9837b74664eaad806da1e43ad29', class: "sr message-label" }, messageLabel), h("div", { key: '64fea3e873f98c24f9c96bd3a34873c739d34109', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '7b74a3757f077593c65b2d5eab27b8a638b3627a' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2MessageStyle0; }

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

@@ -146,10 +146,10 @@ const Q2MonthPicker$1 = /*@__PURE__*/ proxyCustomElement(class Q2MonthPicker ext
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '81330bd8327818f2afc2071bf88c3d4a9a25f1dd', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '3f46eb248acc1c8d4b80826d1d72a5d8795d6707', class: "navigation" }, h("q2-btn", { key: '07862558c87003e0cf53abd922976063c98297e9', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: '41559ba9825b5cc791d358015ca12289575c7c06', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '0434aeee3d06b2e37dd4fb2c8817ddd813237aa3', class: "navigation" }, h("q2-btn", { key: '068eb32831fa5e6eb1a5906349c4486e106171d9', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '87f7e1bfc22b297eed50c050b3449c0a7cfa7cbb', class: "year" }, this.year), h("q2-icon", { key: 'f0e95030a63a1016391177c52770b8bc7723654f', class: "year-icon off", type: "chevron-down" })), h("div", { key: '2dae852a2934e0701827607062091745b9157a93', class: "month-controller" }, h("div", { key: 'da9f25a7ba14e79c092f01c43834a5dd8eac3a9d', class: "cal-year-prev-next" }, h("q2-btn", { key: '3e556a869dc73e8b8b124827cde3ea38dd05ac8d', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '818784c3c4b9139f206b1512d39f6b159edc28f0', type: "arrow-left" })), h("q2-btn", { key: 'b59ea5592d98d9d351cba75b1ea083faeb4fe758', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '6e823542f44f2a1d26d3528d0c2f7aa49412c1a1', type: "arrow-right" }))))), h("div", { key: 'af3443ca09423f246bad3e00a261d047e8c9369b', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: 'ec7306ce48afb546b9f82a68c2ec7c2a592fd13c', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '0e69eeb8776e6f65032b8cc802ef3dd37e5e64ab', class: "year" }, this.year), h("q2-icon", { key: 'c154f33104bc543a8f9f7046f41a04b0964f0ffa', class: "year-icon off", type: "chevron-down" })), h("div", { key: '5ed6100df7e3cd3fa7e7d5d6cac4adbf6ebf9749', class: "month-controller" }, h("div", { key: '1b98c4cab4d4dd40d9cbfbbb4a7608b17ec2a81d', class: "cal-year-prev-next" }, h("q2-btn", { key: '5251c99a73d9d44459f035eb26aada0e34cbc0b2', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: 'df6ee5342abcc500bbaaf7075ee34abc622b7986', type: "arrow-left" })), h("q2-btn", { key: 'f894d9a2384e576d12218a5472ee53255ffe2379', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: 'f34197160be8eb32239d38677b28556feba10b77', type: "arrow-right" }))))), h("div", { key: '9e4a87b89d5b9c4e1c8ea0dec6dbb538679eae42', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '755fa5c2438b60c87b3e863e6577d8c75358af08', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return this; }
     static get style() { return Q2MonthPickerStyle0; }

package/dist/components/q2-optgroup2.js

@@ -50,7 +50,7 @@ const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class Q2Optgroup extends HTM
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'a814883de8b62bc48a1345fb94d6936e43ca3827', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '0186214c5c7c2a578591c257b905514e84173a3e', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'dbab9d660f63f6c370b127646467ae7f2e27a077', class: "q2-optgroup-options" }, h("slot", { key: 'a8c9a881869bf9da26223f75283b026d0ea7d277' }))));
+        return (h("div", { key: 'bf31cc7803e61f63f9e2e5438f53e4444cbcd052', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '37b84e178bb47cc9ef7be0aa9027266366080b4c', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '99215526f4608bdff86fa426afd2080a1fa83897', class: "q2-optgroup-options" }, h("slot", { key: 'a5d0c39acbd794d023004e272877bbc4768356f7' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-option2.js

@@ -65,7 +65,7 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: '7b4a32ea1eec13bfbeca88e038d052ba88b109a0', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '9fb687709d27e1ce24ced445d4f9d9e9c19a69e7', type: "checkmark" }), h("div", { key: '1fd40d00eaa09f012bba8afbe915cd53b1194cb6', class: "content" }, h("slot", { key: 'fa4756793e55a1152fdace4c80531d54a7e41bdc' }))));
+        return (h(Host, { key: '2af351acbd9f0bbc7be9026a0f2fbfea8fc9fdc9', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: 'bf432d87de8ce766e463c71142aba6f5964a31a9', type: "checkmark" }), h("div", { key: '7b220cbad16b536da8ad7d9c8164ad5475e383a8', class: "content" }, h("slot", { key: '1795e840992dfecd12223eae509d0afee9da0a29' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2OptionStyle0; }

package/dist/components/q2-pagination.js

@@ -192,7 +192,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 total,
             });
         }
-        return (h("nav", { key: 'e501aad97cfb7e43c4126bdd18902f0c1b1f77c6', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '268b28bc350d718b66ece79418564dd2235fea93', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '1df57094cf0b0f5f623f5e7f70607a94f80b0179', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '7850e209336bb4194a1ac821e89aa1effd9fcbd2', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -201,7 +201,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '8e27861cab2a435ede48ab2650033616b9d09d53', class: "btn-group" }, h("q2-btn", { key: '9cdd1187767349a5645d9463aedc56685ffe02bf', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: 'bb60151a25cf029fb4dec2aa5ae3596cf10d9fcf', type: "chevron-double-left" })), h("q2-btn", { key: '36d57ac9a5e65e7e19ce55dbac6d05d4975d733b', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'f2f7e0cadd9d9c5a8dee3f4d8b07b4a556457cbf', type: "chevron-left" }))), h("div", { key: 'bf92ddcd317f0422135b197216349f85463fa25f', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '22ebbb53459423fa8adb8730c0a4113161a905e8', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '15c79963fb6dc7d5065e914131b258a348689292', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '47050a9a458b5ef7bd21637f6e3cad0d395afe64', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: '0ff4acfb55fba8dee282afb378d2dc72b472cf4e', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'd9b8b4b6631df6d4520b68dcb516af262b2b9136', class: "btn-group" }, h("q2-btn", { key: 'b53b81c0613122be511d943624d6242fed3576a8', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'a09c849be760fb2f1ff91375ea13c94a2b593c88', type: "chevron-right" })), h("q2-btn", { key: '6d2f35af70859cd5c3b383d3b99a7462d5c15c17', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'a46d892e6acf87af73121feb0a132e9f4b379a0c', type: "chevron-double-right" }))), h("div", { key: '583cde036e73427c99b1187917b81b66ca3e2e7f', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
+            })), h("div", { key: '8372f893cc0afc69a9884ce27ce93a4c17cea4c4', class: "btn-group" }, h("q2-btn", { key: 'a5294bf62bb10443c2610f364f23a00879749a7a', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '37c168662f034c6ec374d5a7bbcb5ad8df70d6b1', type: "chevron-double-left" })), h("q2-btn", { key: '462d9242881f2602b148802b99dcf0bf533d99ec', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '9d9d67fed406efcd96e68c41c1d7b937195beb02', type: "chevron-left" }))), h("div", { key: '49fbe96cf1f76396919656f7079aac070a898704', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: 'bdd16190e2b4a4557747ca6212131f7d2d8f1805', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'fa1cc757c61f99d533718db6399130224afa4819', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '682c980dc4a21a06189f6ee644c86ad1c2078005', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: 'bf1aca5733c1e2112a2d79f2e5c05bd28caf0780', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '35741ecb6d4a2fb9496aa59e77dba4b66531ee7a', class: "btn-group" }, h("q2-btn", { key: '2c0800e1e72fa56670ffdd24f9a93f1160ceb639', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '3e9ec0a68a00f355e9a4177f9d1da59a23b6ff0d', type: "chevron-right" })), h("q2-btn", { key: '5f58b662719325e084ebf22e4c2361ec704ad319', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '04249b5dab29e6877efb0d8cb2733e3f19aeacb3', type: "chevron-double-right" }))), h("div", { key: 'd959447e636f6054ad2b7b281c87fb0aa35b869d', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-pill.js

@@ -327,7 +327,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: 'c13fc91239e60f6feb038acef719afdd6c6dee78', onChange: this.onClickElsewhere }, h("div", { key: 'a05c6dfa1b6be1c3c682a92510f74702170056da', class: wrapperClassNames.join(' ') }, h("div", { key: 'cfc60ca20a17198f112aa8dc391c102e1f5c4014', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '7db4fbe5c58c61eb40a62aa7ed08b978019d38c9', 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.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '9bfe0ffa3adf0f1303fc788ff1a851a03a4f4ad4', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '7f316ab503f416a7c24bee557de55ded46821cd3', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '1434a3c21edf2627085f614b59b0127b386e243d', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: 'bb360ea7e004a891d7980f7e4c3fff10d0fa3803' }))))));
+        return (h("click-elsewhere", { key: 'e499e8e01a57069f5c98b3fdd355c3fe63ef3a6d', onChange: this.onClickElsewhere }, h("div", { key: '9dea844fc636584953263dcb520ecffd7aa020d9', class: wrapperClassNames.join(' ') }, h("div", { key: 'bab6f8630840f79d5a6ed7450e16199de31576ad', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '9713e11ab717a8755ecd8cc477e3ca3162360c2e', 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.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: 'f9b66a3274646034cd33a4a1333155422e9d0ab1', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '381435a3b8c0a23cd78dc5c20d4569db6731a16e', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '1fadf7304e1c7edfff1448c3a8069f9e166a8ec9', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: 'd1ccc5ef00ac0afb2d48eb1cac5acfbdef897b39' }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-popover2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { j as handleDeprecationWarning, w as waitForNextPaint } from './index2.js';
 
-const q2PopoverCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
+const q2PopoverCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}:popover-open,.show{position:absolute;margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
 const Q2PopoverStyle0 = q2PopoverCss;
 
 const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLElement {
@@ -14,13 +14,15 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
          * The number of pixels to leave between the popover and the edge of the viewport
          */
         this.displayBuffer = 10;
-        /** remove when Popover API is supported in iOS */
         this.orientationChanged = false;
         this.handleMinHeight = () => {
             if (this.minHeight) {
                 handleDeprecationWarning(this, 'minHeight', 'prop');
             }
         };
+        this.handlePopoverToggleEvent = (event) => {
+            this.popoverStateChanged.emit({ open: event.newState === 'open' });
+        };
         this.setAbsoluteCSSProperties = async () => {
             const { controlElement, containerElement, currentDirection, align } = this;
             if (align === 'right') {
@@ -45,25 +47,42 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
             await waitForNextPaint();
             containerElement.style.setProperty('--comp-pop-opacity', '1');
         };
-        this.setFixedCSSProperties = async () => {
-            var _a, _b;
-            const { controlElement, containerElement, currentDirection, rootElementRect } = this;
+        this.setPopoverAPICSSProperties = async () => {
+            var _a, _b, _c, _d, _e, _f;
+            const { controlElement, containerElement, currentDirection, isModule, align } = this;
             const { top: controlTop, bottom: controlBottom, left: controlLeft, right: controlRight, } = (_b = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(controlElement)) !== null && _b !== void 0 ? _b : {
                 top: 0,
                 bottom: 0,
                 left: 0,
                 right: 0,
             };
-            const popoverLeft = controlLeft - rootElementRect.left;
+            const popoverLeft = controlLeft;
+            const popoverRight = ((_c = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _c === void 0 ? void 0 : _c.width) - controlRight;
+            if (align === 'right') {
+                containerElement.style.setProperty('--comp-pop-right', `${popoverRight - window.scrollX}px`);
+                containerElement.style.setProperty('--comp-pop-left', 'unset');
+            }
+            else {
+                containerElement.style.setProperty('--comp-pop-left', `${popoverLeft + window.scrollX}px`);
+                containerElement.style.setProperty('--comp-pop-right', 'unset');
+            }
             if (this.block)
-                containerElement.style.setProperty('--comp-pop-width', `${controlElement.offsetWidth || 0}px`);
-            containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);
-            containerElement.style.setProperty('--comp-pop-right', `${rootElementRect.width + rootElementRect.left - controlRight}px`);
+                containerElement.style.setProperty('--comp-pop-width', `${(controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth) || 0}px`);
             if (currentDirection === 'up') {
-                containerElement.style.setProperty('--comp-pop-bottom', `${rootElementRect.height + rootElementRect.top - controlTop}px`);
+                if (isModule) {
+                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);
+                }
+                else {
+                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop - ((_d = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) - window.scrollY}px`);
+                }
             }
             if (currentDirection === 'down') {
-                containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}px`);
+                if (isModule) {
+                    containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);
+                }
+                else {
+                    containerElement.style.setProperty('--comp-pop-top', `${controlBottom + ((_f = (_e = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _e === void 0 ? void 0 : _e.offsetTop) !== null && _f !== void 0 ? _f : 0) + window.scrollY}px`);
+                }
             }
             // Wait for one paint to prevent layout thrashing
             await waitForNextPaint();
@@ -80,7 +99,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         };
         this.currentDirection = undefined;
         this.show = false;
-        this.align = undefined;
+        this.align = 'left';
         this.block = undefined;
         this.controlElement = undefined;
         this.direction = undefined;
@@ -92,9 +111,21 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
     // #region Component Lifecycle Events
     disconnectedCallback() {
         this.removeViewportListeners();
+        this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);
+        this.containerElement = null;
+        this.contentElement = null;
+        this.controlElement = null;
+    }
+    componentWillLoad() {
+        if (!this.supportsPopoverAPI) {
+            console.warn('The Popover API is not supported in this browser. Please update your browser to the latest version. The component will use legacy mode.');
+            this.mode = 'legacy';
+        }
     }
     componentDidLoad() {
         this.handleMinHeight();
+        if (this.supportsPopoverAPI)
+            this.containerElement.addEventListener('toggle', this.handlePopoverToggleEvent);
         if (this.open)
             this.determinePopDirection();
     }
@@ -121,7 +152,6 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         this.handleMinHeight();
     }
     async openChanged(open) {
-        this.setRootElement();
         this.popoverStateChanged.emit({ open });
         if (open) {
             this.addViewportListeners();
@@ -130,14 +160,25 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         else {
             this.removeViewportListeners();
             this.currentDirection = undefined;
-            this.show = false;
+            if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
+                this.show = false;
+            }
+            else {
+                this.containerElement.hidePopover();
+            }
             await waitForNextPaint();
             this.clearCSSProperties();
         }
     }
     // #endregion
     // #region Local Methods
-    get actualDirection() {
+    get isModule() {
+        var _a, _b;
+        const isIframe = window !== window.top;
+        const hasPlatformDimensions = Object.keys((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) !== null && _b !== void 0 ? _b : {}).length > 0;
+        return isIframe && hasPlatformDimensions;
+    }
+    get providedDirection() {
         const { direction } = this;
         switch (direction) {
             case 'up':
@@ -147,20 +188,16 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
                 return undefined;
         }
     }
-    get isModule() {
-        var _a, _b;
-        const isIframe = window !== window.top;
-        const hasPlatformDimensions = Object.keys((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) !== null && _b !== void 0 ? _b : {}).length > 0;
-        return isIframe && hasPlatformDimensions;
+    get supportsPopoverAPI() {
+        return Object.hasOwn(HTMLElement.prototype, 'popover');
     }
     addViewportListeners() {
         var _a;
         window.addEventListener('resize', this.viewPortOrientationChanged);
-        // #region remove when Popover API is supported in iOS
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.viewPortChanged);
         window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });
-        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.viewPortOrientationChanged);
+        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('orientationchange', this.viewPortOrientationChanged);
         window.addEventListener('orientationchange', this.viewPortOrientationChanged);
-        // #endregion
     }
     clearCSSProperties() {
         this.containerElement.style.removeProperty('--comp-pop-max-height');
@@ -173,7 +210,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
     }
     async determinePopDirection() {
         var _a, _b, _c;
-        const { containerElement, controlElement, actualDirection, displayBuffer } = this;
+        const { containerElement, controlElement, providedDirection, displayBuffer } = this;
         if (containerElement)
             containerElement.style.maxHeight = null;
         await waitForNextPaint();
@@ -208,7 +245,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         const shouldUpdateMaxHeight = !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;
         // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
         this.orientationChanged = false;
-        const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;
+        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;
         switch (currentOrDetermineDirection) {
             case 'up':
                 if (shouldUpdateMaxHeight) {
@@ -227,72 +264,38 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
     removeViewportListeners() {
         var _a;
         window.removeEventListener('resize', this.viewPortOrientationChanged);
-        // #region remove when Popover API is supported in iOS
-        window.removeEventListener('scroll', this.viewPortChanged);
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.viewPortChanged);
+        window.removeEventListener('scroll', this.viewPortChanged, { capture: true });
         (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('orientationchange', this.viewPortOrientationChanged);
         window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
-        // #endregion
     }
     setDirectionAndShow(direction) {
-        this.setRootElement();
         // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the
         // popover can be closed between the time the popover is opened and the time the direction is determined
         const isOpen = this.open;
         if (!isOpen)
             return;
         this.currentDirection = direction;
-        this.show = true;
-        if (this.mode === 'legacy') {
+        if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
+            this.show = true;
             this.setAbsoluteCSSProperties();
         }
         else {
-            this.setFixedCSSProperties();
-        }
-    }
-    setRootElement() {
-        let currentElement = this.hostElement;
-        while (currentElement && currentElement !== document.documentElement) {
-            const computedStyle = window.getComputedStyle(currentElement);
-            // Check if the element has any styles applied that create a new containg block
-            if (computedStyle.transform !== 'none' ||
-                computedStyle.filter !== 'none' ||
-                computedStyle.perspective !== 'none' ||
-                computedStyle.containerType !== 'normal' ||
-                ['transform', 'perspective', 'filter'].includes(computedStyle.willChange) ||
-                ['layout', 'paint', 'strict', 'content'].includes(computedStyle.contain)) {
-                this.rootElementRect = currentElement.getBoundingClientRect();
-                return;
-            }
-            const rootNode = currentElement.getRootNode();
-            const isRootNodeWebComponent = typeof ShadowRoot !== 'undefined' &&
-                rootNode instanceof ShadowRoot &&
-                rootNode.host instanceof HTMLElement;
-            if (isRootNodeWebComponent) {
-                currentElement = rootNode.host;
-            }
-            else {
-                currentElement = currentElement.parentElement;
-            }
+            this.setPopoverAPICSSProperties();
+            this.containerElement.showPopover();
         }
-        // Return the document's bounding rect if no element is found
-        this.rootElementRect = {
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: window.visualViewport.height,
-            width: window.visualViewport.width,
-        };
     }
     // #endregion
     // #region Render Methods
     render() {
-        const containerClasses = ['container', this.currentDirection];
+        const containerClasses = ['container', this.currentDirection, this.align];
         if (this.show)
             containerClasses.push('show');
+        if (this.block)
+            containerClasses.push('block');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (h("div", { key: '570cccbfa3c4830d4b9d52c9564c5355ed357e4f', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { key: '7729d8f39d61e866de0cf3fe6d65fa8205af8a18', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '315ce34d31a84a0a0d6688982567d2267452161c' }))));
+        return (h("div", { key: 'eb76d88fa98c35c45bc0615e4fb476c8dae8e885', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "auto" }, h("div", { key: '34595cdb921b071b0082f90606343d9477ab0564', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '58fc86882022353bf7786cd002f4dc0dc1b4ffdf' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {