q2-tecton-elements 1.55.4 → 1.55.6

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

@@ -130,7 +130,7 @@ const Q2Example = class {
             }, onClick: () => this.tctClick.emit(), role: "menu" }, index.h("slot", null))));
     }
     render() {
-        return index.h(index.Host, { key: 'a89b3080a47ebc5401317f5620c918ff2c34bac2', attribute: "navigation" }, this.renderMenuInner());
+        return index.h(index.Host, { key: '2a8810e8b8152257cb5f710570a7b60708f76bde', attribute: "navigation" }, this.renderMenuInner());
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -13,7 +13,7 @@ const Q2Checkbox = class {
         this.spacing = 'normal';
     }
     render() {
-        return (index.h("div", { key: '377fbc8245a6d6734536a37f3d733384801fd00b', class: "container" }, index.h("slot", { key: '73d1054f5ca1af44c78a4f85b1009143989a5530' })));
+        return (index.h("div", { key: 'caf601b969251105caec706267978caae64478c7', class: "container" }, index.h("slot", { key: '72983087473bc5c1eb88e0d610f54a414bad02d4' })));
     }
 };
 Q2Checkbox.style = Q2FormStyle0;

package/dist/cjs/q2-formatted-text.cjs.entry.js

@@ -55,7 +55,7 @@ const Q2FormattedText = class {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (index.h("div", { key: '29aac8ea5e737d01243d42d0a9790d18a11f768c', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: '613fe3f2d365edd4a2ffefd37ac2ec4f05220978' }, this.formattedValue)));
+        return (index.h("div", { key: '5361b448c2dcd9deb0b52e97c399fe70402739b6', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: '989054158a669360d1908cd9bd613078d3fcfcb2' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],

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

@@ -109,7 +109,7 @@ const Q2Item = class {
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (index.h("div", { key: '4afba65f3586f010f5e6f6faa72ab04d6ec79fb8', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (index.h("div", { key: '778ec58acfdc9a57662cb070028c5efbaced8056', class: this.bulletClasses }, index.h("slot", { key: '6429ec996adb7b400f7dbc37e66196394b2e4c5d', name: "bullet" }))), index.h("div", { key: '2a81129ad24d95857183c72813d60eb785ee1b2d', class: this.mainClasses }, this.hasHeaderSlotContent && (index.h("div", { key: '53315a1d62bc8ffc6f2f910e881659d61c670fbf', class: "header" }, index.h("slot", { key: 'a11063eda67cd353a7742397a4701c7939193d09', name: "header" }))), this.hasBodySlotContent && (index.h("div", { key: '903998a8a296b11c60ce105b6bb181badee3580c', class: "body" }, index.h("slot", { key: 'c47b8387918feea518d56b25d2f4770a1cae9c00', name: "body" })))), this.hasActionSlotContent && (index.h("div", { key: '7b44a3c72b6d8cca1b409b9a37764a317ba8acb7', class: this.actionClasses }, index.h("slot", { key: 'ea50fb238aeae9c96276cf53234cfe2bdea55b42', name: "action" }))), this.hasFooterSlotContent && (index.h("div", { key: '636e87198073af605443840a79ef2640ad7d4552', class: this.footerClasses }, index.h("slot", { key: '9b9112e049d8e6f2d5983ad499ad27ee6ec08b14', name: "footer" })))));
+        return (index.h("div", { key: 'bc07c660098ad5236aeb3a925541bb655272ad1d', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (index.h("div", { key: '9f4fc9b8d77c4ceebd1c1532288bf4f74b5ec619', class: this.bulletClasses }, index.h("slot", { key: 'b244c86afa4ce153a49eadf1ff0f975c7c22873f', name: "bullet" }))), index.h("div", { key: 'bd94e2e41171c738cc120bcac21e313d10a92d86', class: this.mainClasses }, this.hasHeaderSlotContent && (index.h("div", { key: 'a45a52eb18000754a27c9dfb5db34cd1ac7117d2', class: "header" }, index.h("slot", { key: '1caa04a58064ddadfe9838d6537e7c85860b2671', name: "header" }))), this.hasBodySlotContent && (index.h("div", { key: '5420a4bb0b8f79ddcbe7f83f35543c66a38a6eaf', class: "body" }, index.h("slot", { key: 'e21252069146947cdcfca63c42ebd9f5dabb4f64', name: "body" })))), this.hasActionSlotContent && (index.h("div", { key: 'cdb5a454b1017fd64fe535cc843dac0498220690', class: this.actionClasses }, index.h("slot", { key: 'e519a4e72b11096f941bc68d1f334afaecdf61a2', name: "action" }))), this.hasFooterSlotContent && (index.h("div", { key: 'c03d5bd27317087e8bbdf61a3b4a6ed489070ea6', class: this.footerClasses }, index.h("slot", { key: '010ef88185cc77bd471fdd1e5b0746ea77ecf5d0', name: "footer" })))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -238,7 +238,7 @@ const Q2List = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '815b7bb01cdd74d76d2390a9e969484189682c6b', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (index.h("div", { key: '3495d4aa9461d655f0c5bf5c67ce26b320324675', class: this.headerClasses }, index.h("div", { key: '9b5f21524fc50f41a38b7ff234cca04142e4783b', class: "label" }, this.label), this.hasFilterSlot && index.h("slot", { key: '4765b21b09161cad072e90f351e55d210c07a33c', name: "filter" }))), index.h("div", { key: '9157531d4ee7d3362fd23ae665dcc8f4ca28fd8d', role: "list" }, index.h("slot", { key: '6cfa2724ee61b1b2271d673b6b71113e7bfd06e7' }))));
+        return (index.h("div", { key: '647fd58f76aef5077994f9a23a1741d10fb5f256', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (index.h("div", { key: '463450b42ec44b2ac1f22ad6b620ecc98d6db8f8', class: this.headerClasses }, index.h("div", { key: '792da568158522281d8c204759f4cfb49a62f5cc', class: "label" }, this.label), this.hasFilterSlot && index.h("slot", { key: 'ae70aee4513869c1cdc77fafeb645b4fb0a1f272', name: "filter" }))), index.h("div", { key: '6d6be3031adf8dd8a491c7a945f350d50665cbed', role: "list" }, index.h("slot", { key: 'f81aa4bb6a4d5973bd84eb482782df5da9f0fb07' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -106,7 +106,7 @@ const Q2Legend = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("click-elsewhere", { key: '1253e1dba3334134aa16432ef4dd7e71a87d1420', onChange: () => this.onClickElsewhere(this) }, index.h("ul", { key: 'd9252af5543da55989ec69b18b4438624c39a90e' }, 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: '541be05761592ed685067cf99e9e5a9b7ce9f445', onChange: () => this.onClickElsewhere(this) }, index.h("ul", { key: '92fbbc5ae4d9ca2803645285c2faca4c9356a319' }, 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-message.cjs.entry.js

@@ -66,7 +66,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: 'e74bbda0808b5430f9f3533d5cfe32463c246fb7', 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 && index.h("div", { key: '11f8a2db8016024dc4cd51567a6e95a1eaea8e75', class: "sr" }), index.h("div", { key: 'e6c4f2f7aff57d19e0da9f5d6240f14ae881ddb8', class: "sr message-label" }, messageLabel), index.h("div", { key: 'e473b74d78048bc8c370f724356066e963b8667e', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: 'adcaf51ebf8a023b8b1d5a6556c79b3c2b64d8cc' }))));
+        return (index.h("div", { key: 'f4161e85adba8c023d8ad135c955a312e145ad9a', 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 && index.h("div", { key: '75a17b9f1d17e1c051e7ed986d1382f83da6747b', class: "sr" }), index.h("div", { key: '4d1761c6d6391d2f6ed982add6effc441f7284f3', class: "sr message-label" }, messageLabel), index.h("div", { key: '035a1040c019d8aa6eb6899e275469ab9edfc69d', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: '59187a716f498e899c6c5bf6c81aca27dbfb32c2' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -161,7 +161,7 @@ const Q2Modal = class {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (index.h("dialog", { key: '23605420f182cf36687c22f5d9a25512fe12aa1f', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, index.h("div", { key: 'e0bd45778d125c39028e9a7e999b36cdd920d471', class: interiorClasses }, this.title && (index.h("header", { key: '4658009b1bd010941c7d3128306ab44a1da80194' }, this.title && index.h("h2", { key: 'ec33e00aa837cd0033f3a5f84f292ee7fb59fb45', class: "title" }, this.title), !!this.closable && (index.h("q2-btn", { key: '19a02dda7a62729b20d79d7b380ac5225427a25b', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, index.h("q2-icon", { key: '513d17ba802c6681ec399e44fc07180568695cfb', type: "close" }))))), index.h("div", { key: 'd291afd421f5a4f4bcccb1e7762cf633f84ffce2', class: "content", ref: el => (this.contentElement = el) }, this.icon && (index.h("div", { key: '3e4256c22f6b1a0c4da33c6e950ad682115c0be8', class: "icon" }, index.h("q2-icon", { key: '9440c8af3d66157a1f66dbdbc15490e61d086ca8', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (index.h("div", { key: 'a6a8451fea0accc0ebf1236bce6581db59af53e8', class: "image" }, index.h("img", { key: 'a512e1803682e81187647ecddc8ac77d0d07240c', src: this.imageSrc }))), index$1.hasSlotContent(this.hostElement, 'content') && index.h("slot", { key: '128d28110b50319c978b96598f73b204a8b36c68', name: "content" }), this.description && index.h("p", { key: '498bc624e6187e76365d03e50ad7aeaed23c9a18', class: "description" }, this.description), this.customMarkup && (index.h("p", { key: '68c58bc1abbf26ed2729fd420b56db3e8b8cce10', class: "customMarkup", innerHTML: sanitizeHtmlString.sanitizeHTMLString(this.customMarkup) }))), index.h("footer", { key: '090a95b0eae17b929781cea8292cc531f67f0cb7' }, index.h("q2-action-group", { key: 'f2b72a7b97df9771be3eeb7d09d8baca6522a2f6', "full-width": true }, index.h("slot", { key: 'b6eca7b862e41fecd08516ade207a6d444c08ed3', name: "action" }))))));
+        return (index.h("dialog", { key: '14c7d74be95682be1c6523d495a2b35bcc247e4a', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, index.h("div", { key: '64d3d8d9e01f4e8fee2ae452714e4eedd2570e68', class: interiorClasses }, this.title && (index.h("header", { key: 'd36f931c9f7ae0f14817abb9a6dedee6257a5664' }, this.title && index.h("h2", { key: '39097ca1ee788258b9e349b8bc374b190ecaa8a5', class: "title" }, this.title), !!this.closable && (index.h("q2-btn", { key: 'd1c9a7bd159e4c7fdfa557efca9204593f27803d', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, index.h("q2-icon", { key: '6225815f507315357b545a3177727f9f3438bccf', type: "close" }))))), index.h("div", { key: '4988151b63997614a382f7241f60af147b120e88', class: "content", ref: el => (this.contentElement = el) }, this.icon && (index.h("div", { key: 'a54460f79a828bed7630108dd6f04ca1929dfbfb', class: "icon" }, index.h("q2-icon", { key: '3bd18a8787e40183f1d71ddd48e6ca207062588b', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (index.h("div", { key: '074f8bda9529d16d06630b4107a51e478a07d156', class: "image" }, index.h("img", { key: '608a63353a935f44dfe3c2b809f4f28b89c38b31', src: this.imageSrc }))), index$1.hasSlotContent(this.hostElement, 'content') && index.h("slot", { key: '4f23c254881c6840e05ac24b0ff712fd6e1f90df', name: "content" }), this.description && index.h("p", { key: 'af66d8b53f300ff96b68d59a4e47bf5fe5a535ea', class: "description" }, this.description), this.customMarkup && (index.h("p", { key: 'bae1c644d7e41fd6389cf40689afe3c62dada367', class: "customMarkup", innerHTML: sanitizeHtmlString.sanitizeHTMLString(this.customMarkup) }))), index.h("footer", { key: 'f5b4756a03b61a192074100ca8d0e2162a95ba58' }, index.h("q2-action-group", { key: '3586e0321e11e3a97ee2d640d55d71fc502ee50f', "full-width": true }, index.h("slot", { key: '3a66978962bfdafe16dc1948d3fd31f8088c0100', name: "action" }))))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -145,10 +145,10 @@ const Q2MonthPicker = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'ef6f597bba438aaab680e81a46ead6824194be0b', class: "month-container", onKeyDown: this.onMonthKeydown }, index.h("div", { key: '47704b17e8e57736008bef75949940f45d9904f4', class: "navigation" }, index.h("q2-btn", { key: 'b93c143037130d7e7045ac0b6f9c3c9998b8fb71', 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: '5a955a89a4d24dca59bd3edcecdb3a183c6ee266', class: "year" }, this.year), index.h("q2-icon", { key: 'b1edd309501caa293294d1768324672737d7486b', class: "year-icon off", type: "chevron-down" })), index.h("div", { key: '307a38769bc318dc2b60f0c71cb50699d23c0b74', class: "month-controller" }, index.h("div", { key: 'e4248e62e113e5984220ebdb065c682b1e049214', class: "cal-year-prev-next" }, index.h("q2-btn", { key: '05845d8ec8daf805acb89f34867a0d6bba84b35f', 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: 'e986148af0f9952a60910669e5b39280d31bc3bd', type: "arrow-left" })), index.h("q2-btn", { key: 'f1f05af3e9e4b570d738e91dbdbb6560e69c171b', 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: '0a4d0689881d13b43be98df62bd96b008c88b891', type: "arrow-right" }))))), index.h("div", { key: 'f80c97d98668100e9e086f5d665e881127ddd39d', 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: '83ddc501e823cf58e07784cae545a1a473ae263c', 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-optgroup.cjs.entry.js

@@ -53,7 +53,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'ac0997f3f9bd1b65dced4ac274c3f51a72b41858', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: 'a5b2c9d4c9e506f925fad95b272994516e8a6e39', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: 'bbbb697d598f71a7cf2ced1a59fbba713c9a7986', class: "q2-optgroup-options" }, index.h("slot", { key: '8e7fef13eb234ce7104fa4ce8227cf7792f4f9b6' }))));
+        return (index.h("div", { key: '6b13767a72d67ef3493dcf8d0a4d61fef6255590', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: 'bb613f288978e7ea2e26dbd541bfd1d436df4325', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: '523029610ca35f25407ee95e8cb58d5c619c03b8', class: "q2-optgroup-options" }, index.h("slot", { key: 'd278b4bbd2ffe6de40f2259ae3164798ab9c2523' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-option-list_2.cjs.entry.js

@@ -577,7 +577,7 @@ const Q2OptionList = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h(index.Host, { key: '608fc11b974c992855405ddd47cb340bde6be3dc' }, index.h("div", { key: 'a1cc689919b7099c559aa372adade9973aaad1d3', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { key: 'b68880e08145e4f055736b1e08d9e2da22cb10ef', class: "options", "aria-label": index$1.loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", { key: '3b0cf3b91296b54c060d0ab23b99dbe0630b6336' })))));
+        return (index.h(index.Host, { key: '5708785bddc01b545a3b2a94417ad415c6cba32e' }, index.h("div", { key: 'e6f36e235609824dae19e93edc14d8f8504eb860', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { key: 'cbdf42235da01a1fc10efcc0798edeb653fe26ae', class: "options", "aria-label": index$1.loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", { key: 'cec72b3912c96f09a12c171e4227efd29a9097c9' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -587,7 +587,7 @@ const Q2OptionList = class {
 };
 Q2OptionList.style = Q2OptionListStyle0;
 
-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 = class {
@@ -598,13 +598,15 @@ const Q2Popover = class {
          * 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) {
                 index$1.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') {
@@ -629,25 +631,42 @@ const Q2Popover = class {
             await index$1.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 === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth) || 0}px`);
-            containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);
-            containerElement.style.setProperty('--comp-pop-right', `${rootElementRect.width + rootElementRect.left - controlRight}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 index$1.waitForNextPaint();
@@ -664,7 +683,7 @@ const Q2Popover = class {
         };
         this.currentDirection = undefined;
         this.show = false;
-        this.align = undefined;
+        this.align = 'left';
         this.block = undefined;
         this.controlElement = undefined;
         this.direction = undefined;
@@ -677,9 +696,21 @@ const Q2Popover = class {
     // #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();
     }
@@ -706,7 +737,6 @@ const Q2Popover = class {
         this.handleMinHeight();
     }
     async openChanged(open) {
-        this.setRootElement();
         this.popoverStateChanged.emit({ open });
         if (open) {
             this.addViewportListeners();
@@ -715,7 +745,12 @@ const Q2Popover = class {
         else {
             this.removeViewportListeners();
             this.currentDirection = undefined;
-            this.show = false;
+            if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
+                this.show = false;
+            }
+            else {
+                this.containerElement.hidePopover();
+            }
             await index$1.waitForNextPaint();
             this.clearCSSProperties();
         }
@@ -738,6 +773,9 @@ const Q2Popover = class {
                 return undefined;
         }
     }
+    get supportsPopoverAPI() {
+        return Object.hasOwn(HTMLElement.prototype, 'popover');
+    }
     get validatedMaxHeight() {
         const { maxHeight } = this;
         return isNaN(maxHeight) ? undefined : maxHeight;
@@ -745,11 +783,10 @@ const Q2Popover = class {
     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');
@@ -820,72 +857,38 @@ const Q2Popover = class {
     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();
+            this.setPopoverAPICSSProperties();
+            this.containerElement.showPopover();
         }
     }
-    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;
-            }
-        }
-        // 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 (index.h("div", { key: '7f8b390b6a1e7fd2b17603fb803591fd1cb62ba4', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, index.h("div", { key: '878b6b01de37233ce5cd9f36b694fad89d599b3e', ref: el => (this.contentElement = el), class: "content" }, index.h("slot", { key: '83b9de3b4fe050d82d9473cc098bd599fe5c645b' }))));
+        return (index.h("div", { key: 'c9f03d67b77e8e5b62c0fc3ae0ed0d0da582c949', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "auto" }, index.h("div", { key: 'e462cdf2172862ffde761ff7dea6d7f8eedd4484', ref: el => (this.contentElement = el), class: "content" }, index.h("slot", { key: '013c872ef67663360a27e357188fbc75a63b5ad8' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {