q2-tecton-elements 1.51.1 → 1.51.3

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: 'd22180a2a528e72f2e44753b6a4641f51165552d', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '983b7140b4c87233e9110b4f6b951ab30d2eb516', class: "navigation" }, h("q2-btn", { key: 'ee79cfe4a3e38cd0b97307738700e94ad23c7e4b', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: '555dca80155124cd1233f73b36568402493ceab4', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '3f09186cd4e2311e381824ac7a1a48c016065a10', class: "navigation" }, h("q2-btn", { key: '00490d53e3fa767830e5f3efe729d8b67875fe66', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '839b8de5beabf7be05a58f7531826548bb68d3ba', class: "year" }, this.year), h("q2-icon", { key: '100c2dd1f43d29be9f51f5292973cb6dc727adcb', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'e3a62840e3510b9abf165a540f3db8a85ece6073', class: "month-controller" }, h("div", { key: '65bc9199498ad0dd401a561739dcf8101e22e9fe', class: "cal-year-prev-next" }, h("q2-btn", { key: '11586afd04c7f4952ea7e9c97b82c28003d1eb56', 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: '6c9cf0005614b5f6034e070c7cc1b237ea058eca', type: "arrow-left" })), h("q2-btn", { key: 'c40c6d29045e48d3d38bde0d24870672c8045226', 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: '66a04f751f9f85f146d915116d607e7a841e3a80', type: "arrow-right" }))))), h("div", { key: '7515edd4312fa9bbf81685e9cc9e8a2fcadcd8f0', 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: 'f75f8128ec48c01ee725dd1bc0dafdb0d01870fa', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: 'ee04c0467883a1b31ab6c93c5436d7ca6e34e91d', class: "year" }, this.year), h("q2-icon", { key: 'd1260a0e88eff0cb1f888216f75fbb54371949c7', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'a826ff901a64cad49e871de9655d1fb6f72cb3e9', class: "month-controller" }, h("div", { key: '54e8a3e89c4cfcc253086e3cb1e3ce90e61599a3', class: "cal-year-prev-next" }, h("q2-btn", { key: 'ffb19646ea021de3cc6df62b56c39e79578f7336', 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: 'cb06ce15c48c25b7bd4933ade991d4c93fba12d9', type: "arrow-left" })), h("q2-btn", { key: '8441268eaa3819b3b926cc9d7a5fe1daf9d161f9', 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: '3ede2b3b369b64afe251f709d9b073570d0a9191', type: "arrow-right" }))))), h("div", { key: 'ed3a7f57dab6582f2cdd43947f83595f12d87d6e', 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: '2947993eacb8aafa3ea1be73851c9a6e7eadc488', 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: '2c58c18d1f6d5b7886d12a0c5ae99975912fe41b', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '7852309fb1c677c76931f630b6f975379450f5d1', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '4481127fec8a882f0bfcaf3d2047ec2f9b4eb059', class: "q2-optgroup-options" }, h("slot", { key: '03425c1d351eb91b0956c03ef3584a978578db37' }))));
+        return (h("div", { key: '466b3bcee30f9380438897851de34e3d1ff1a1d5', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '95ce796d972e98470463d930af6b7732972b06f8', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '1d264ca1fac24bdbdcec0c2a3be33ac13ef6b5c2', class: "q2-optgroup-options" }, h("slot", { key: 'd4347778dab8b54deae81679f9dbd086416f775e' }))));
     }
     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: '31957c36e0836d1f4936d8af97beb51335b4c6b9', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: 'c5e9eac9b66bb975b303c1184b06fd71718096f7', type: "checkmark" }), h("div", { key: 'c0ea2c0acd37626d90ad07908f7697fe7c1edc1e', class: "content" }, h("slot", { key: '7b19d2f5977b67cace150e51956121011e28c138' }))));
+        return (h(Host, { key: '0571dd56a1a6bdfc80dafdb905aa13b8e7c4cbff', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '4edab639eaf0b2579defba20e5bbe12b420c993a', type: "checkmark" }), h("div", { key: 'dcdffb03959e6e4fda4c36ae695be521448a83ba', class: "content" }, h("slot", { key: '0cbf7d23bbc741264e94e1c34a71913d87d54f56' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2OptionStyle0; }

package/dist/components/q2-pagination.js

@@ -273,7 +273,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 total,
             });
         }
-        return (h("nav", { key: '417a7242c4873c1f2d4c12382f63f5e7534bda04', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '5234d2c6d9f2249788d52970f69be1a0d38ad52e', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '8c0dbed8d2d19f2023295bd40d826cd1b8253a5c', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'ad67c82ff77b38e03f00c5ed347e94fd199f5a07', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -282,7 +282,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'f1809000bd2d37a8eedad140329ef72ad326bb6b', class: "btn-group" }, h("q2-btn", { key: '62612892b86508d1a834f18e9c242812ac339a21', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '2ff44c03d569a60d28b411b233818e8a8ed09af6', type: "chevron-double-left" })), h("q2-btn", { key: 'e36a4f8c021fd18248f4fc864aff5f194f248095', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'd103f86c52b8ed6809552126de4d3b52cda6b724', type: "chevron-left" }))), h("div", { key: 'e6f515d392ddb8e4a97b6406e6c7ed09503c4f9f', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '1ad86adf8bd04f8c658b8035d6f4c878b7214e38', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '3d701869101717b2c4f73478e33013a923fd8f44', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '63cf49a1292cc983fba7214116b73d423cabc64c', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page" })), h("span", { key: '526fd412a6dd8312d6bcf7a5c8baff1257642e4a', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '069656ae8ee3523040eed22b8f2436fdde926358', class: "btn-group" }, h("q2-btn", { key: 'f215824b3c39eaf84cb6e974912ad2cd3e0ea71a', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'd6d32de9af991e629b00632514ed2a96be42b825', type: "chevron-right" })), h("q2-btn", { key: '74ad02e29e5fadb2bff39cee2d7c6d2f62139bb7', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '970487bac61e8ad48acc77ce34f67a16f2d57dda', type: "chevron-double-right" }))), h("div", { key: 'dbd712331f2f14a3db1c8a247d36d7457fedeb8e', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            })), h("div", { key: 'd5c979232baa0518541e79b1cc864f33dc49ff02', class: "btn-group" }, h("q2-btn", { key: 'cef629abc29a528b32ca755b11c085f1ffc46cdd', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '029c9a586ab2f3270b00422fc3b800f6638f44ee', type: "chevron-double-left" })), h("q2-btn", { key: '55212d112080244cf9eb0d8557aee19e3f97cc8b', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '7930ed4e89581b8f4c799a346688236ffacdba10', type: "chevron-left" }))), h("div", { key: 'eeaea625758658bb0d03240c268c5180a70d0e1b', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '4bae99ae5e804f9675877cd8c3e11f760d178e19', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'f25ab7fa7e0978b4f7a477e0ab84c8e5d755a9b1', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '08e49f61fe54e5fc4200a855c3f19b5a32d8d453', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page" })), h("span", { key: '09124ee64222d5bb29b96e0ca1f1b605812d2e9d', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '689a52f7549e0577cb4fb629d731cd5c116a7183', class: "btn-group" }, h("q2-btn", { key: '706927b54d84fc2313f69f8b943cc64327535e3a', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'bf57121e65a675313687368340b571d753a2dcd3', type: "chevron-right" })), h("q2-btn", { key: '20ba1d7019aee7f087653feff9212da4097801b1', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'f42fc0ff80b6b8a8cec9e879176b644520cb45a5', type: "chevron-double-right" }))), h("div", { key: 'ebd17ab21163f2f3c1db56a10f84d4c36693b77c', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-pill.js

@@ -348,7 +348,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: '02e7f5f616daeb2b0e40259c1c99ac142f86b553', onChange: this.onClickElsewhere }, h("div", { key: '13ece1982239e075de4911cc76c806b9f30dc84b', class: wrapperClassNames.join(' ') }, h("div", { key: 'afff34dc889240fbbf32cb2401359f51ce5feee4', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '5f9b91813e5f4006137534fe5fe1820adf35d2f6', 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: '084fb2e933da3e3f281a5480c74e917ebac38015', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '5fcab5d95192479ac7f0e2e911d51327044500ef', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("div", { key: 'b5d7756b724d76aa0cf487324c6790d7ca529293', class: "popover-content" }, h("div", { key: 'e191b41fcfa2a9f2fefc66dde961a24a867c73d8', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '8078c79efc74285ce9db259c28a1c6b2e957a09f', name: "popover-top" })), h("q2-option-list", { key: '1cd2a521a30af647a4ba5008f11d927209454061', 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: '432d785fe233aaf875a1b601522bb5189edf1b82' })), h("div", { key: '22d1406b38ae6f991c7253f5b10b70f7fa6744e7', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '7619b7dabfaae3dea23363d7769e350a7f2ed51f', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: 'bf12787a839b5ec97a14a2638b83534a3ccf610b', onChange: this.onClickElsewhere }, h("div", { key: 'b3c02f4d5400e6637e2848ff70ea0548469ce156', class: wrapperClassNames.join(' ') }, h("div", { key: 'a99df01a6e69f73fe9f21b4ed51113ae2a2ecfcc', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '2759471703efb53fe6132c36797e5f4d016b0108', 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: '8c0733bf2bae45288dbdf13801305043d0b7cd67', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '65af1d895e52ebec3000172ed59713190ec1c4cd', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("div", { key: '8cfde66d75fee798ee956921ba04aa9ed5643651', class: "popover-content" }, h("div", { key: '688cf13032c09f0f63fb39c58a0182e77f98ddeb', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: 'af6a97d9bba21ed908c876da0ad8851b9fcb286a', name: "popover-top" })), h("q2-option-list", { key: 'fb4c49c8b3936faabe1533973680bcf33e5d13da', 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: 'ce059f109de1eab4b3129916d14a365fd54f9802' })), h("div", { key: '2f388ecb604db14d4e419128703980e02dda3598', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '2881980ed3c258ccbd58509fb4b348d5dba0d978', name: "popover-bottom" })))))));
     }
     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 { k 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;
@@ -93,9 +112,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();
     }
@@ -122,7 +153,6 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         this.handleMinHeight();
     }
     async openChanged(open) {
-        this.setRootElement();
         this.popoverStateChanged.emit({ open });
         if (open) {
             this.addViewportListeners();
@@ -131,7 +161,12 @@ 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();
         }
@@ -154,18 +189,16 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
                 return undefined;
         }
     }
-    get validatedMaxHeight() {
-        const { maxHeight } = this;
-        return isNaN(maxHeight) ? undefined : maxHeight;
+    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');
@@ -217,17 +250,13 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         switch (currentOrDetermineDirection) {
             case 'up':
                 if (shouldUpdateMaxHeight) {
-                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceAbove;
-                    const maxHeight = Math.min(maxSpaceAbove, priorityMaxHeight);
-                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
+                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);
                 }
                 this.setDirectionAndShow('up');
                 break;
             case 'down':
                 if (shouldUpdateMaxHeight) {
-                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceBelow;
-                    const maxHeight = Math.min(maxSpaceBelow, priorityMaxHeight);
-                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
+                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);
                 }
                 this.setDirectionAndShow('down');
                 break;
@@ -236,72 +265,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();
+            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 (h("div", { key: '859d756319e8db9fc5e28f15c172a675c220f217', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { key: '6928f830953fe36fa76fbd8da81f6bde70689ffe', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '36be03972c41ec02cefff9b0aa61526e66a49084' }))));
+        return (h("div", { key: '25c64e3cebb5b2c332adc6f7d99be5f014ed5ce5', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "auto" }, h("div", { key: '29f0674224cab236bb4c71adb5695d2fce5f5470', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '3492361127d9dfc838e94cba14ceb5c12e123286' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-popover2.js.map

@@ -1 +1 @@
-{"file":"q2-popover2.js","mappings":"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","names":[],"sources":["src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n    display: none;\n}\n\n.show {\n    display: block;\n    position: fixed;\n    z-index: var-list(--tct-popover-z-index, 50);\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    background: var-list(--tct-popover-background, --app-white, #ffffff);\n    color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n    min-width: var-list(--tct-popover-min-width, 135px);\n    margin-block: var-list(--tct-popover-margin-block, 0);\n    box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\"));\n    border-width: var-list(--tct-popover-border-width, 0);\n    border-style: solid;\n    border-color: var-list(--tct-popover-border-color, transparent);\n    border-radius: var-list(--tct-popover-border-radius, 0);\n    // the following --comp variables are set via JS\n    max-height: var(--comp-pop-max-height);\n    left: var(--comp-pop-left);\n    opacity: var(--comp-pop-opacity, 0);\n\n    :host([block]) & {\n        right: unset;\n        width: var(--comp-pop-width);\n        min-width: var-list(--tct-popover-min-width, unset);\n    }\n\n    :host([align='left']) & {\n        left: var(--comp-pop-left);\n        right: unset;\n    }\n\n    :host([align='right']) & {\n        right: var(--comp-pop-right);\n        left: unset;\n    }\n\n    &.down {\n        top: var-list(--tct-popover-top, --comp-pop-top);\n        bottom: unset;\n    }\n\n    &.up {\n        top: unset;\n        bottom: var(--comp-pop-bottom);\n    }\n\n    &.legacy {\n        position: absolute;\n    }\n\n    @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n    /** remove when Popover API is supported in iOS */\n    orientationChanged: boolean = false;\n    rootElementRect: DOMRect;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    currentDirection: 'down' | 'up' = undefined;\n\n    // remove `show` when Popover API is supported in iOS\n    @State()\n    show: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Aligns the popover to the left or right side of the control element. */\n    @Prop({ reflect: true })\n    align: 'left' | 'right';\n\n    /** Indicates the popover will match the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** The element that controls the popover's behavior. */\n    @Prop()\n    controlElement: HTMLElement;\n\n    /**\n     * Force the direction of the popover when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ reflect: true })\n    direction: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    maxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    minHeight: number;\n\n    @Prop()\n    mode: 'legacy' = null;\n\n    /** Controls whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the popover is opened or closed.\n     */\n    @Event()\n    popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n    }\n\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.open) this.determinePopDirection();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    @Watch('open')\n    async openChanged(open: boolean) {\n        this.setRootElement();\n        this.popoverStateChanged.emit({ open });\n\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.show = false;\n            await waitForNextPaint();\n            this.clearCSSProperties();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    get providedDirection(): 'up' | 'down' | undefined {\n        const { direction } = this;\n        switch (direction) {\n            case 'up':\n            case 'down':\n                return direction;\n            default:\n                return undefined;\n        }\n    }\n\n    get validatedMaxHeight(): number | undefined {\n        const { maxHeight } = this;\n        return isNaN(maxHeight) ? undefined : maxHeight;\n    }\n\n    addViewportListeners() {\n        window.addEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n        screen?.orientation?.addEventListener('change', this.viewPortOrientationChanged);\n        window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n\n        // #endregion\n    }\n\n    clearCSSProperties() {\n        this.containerElement.style.removeProperty('--comp-pop-max-height');\n        this.containerElement.style.removeProperty('--comp-pop-top');\n        this.containerElement.style.removeProperty('--comp-pop-bottom');\n        this.containerElement.style.removeProperty('--comp-pop-left');\n        this.containerElement.style.removeProperty('--comp-pop-right');\n        this.containerElement.style.removeProperty('--comp-pop-width');\n        this.containerElement.style.removeProperty('--comp-pop-opacity');\n    }\n\n    async determinePopDirection() {\n        const { containerElement, controlElement, providedDirection, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n\n        if (isModule) {\n            const { outletOffset = 0, innerHeight = window.innerHeight } = window.Tecton?.platformDimensions || {};\n            const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            windowHeight = innerHeight;\n            // If the top of the module is below the top of the window we just use the controlTop\n            // Otherwise we need to add the outletOffset to the controlTop\n            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.visualViewport.height;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n        const shouldUpdateMaxHeight =\n            !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n        this.orientationChanged = false;\n        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;\n\n        switch (currentOrDetermineDirection) {\n            case 'up':\n                if (shouldUpdateMaxHeight) {\n                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceAbove;\n                    const maxHeight = Math.min(maxSpaceAbove, priorityMaxHeight);\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n                }\n                this.setDirectionAndShow('up');\n                break;\n            case 'down':\n                if (shouldUpdateMaxHeight) {\n                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceBelow;\n                    const maxHeight = Math.min(maxSpaceBelow, priorityMaxHeight);\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n                }\n                this.setDirectionAndShow('down');\n                break;\n            default:\n                break;\n        }\n    }\n\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\n    };\n\n    removeViewportListeners() {\n        window.removeEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.removeEventListener('scroll', this.viewPortChanged);\n        screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n\n        // #endregion\n    }\n\n    setAbsoluteCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, align } = this;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', '0');\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', '0');\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) {\n            containerElement.style.setProperty('--comp-pop-width', '100%');\n        }\n\n        if (currentDirection === 'up') {\n            const controlStyle = getComputedStyle(controlElement);\n            const controlSize =\n                parseInt(controlStyle.height || '0') +\n                parseInt(controlStyle.borderTopWidth || '0') +\n                parseInt(controlStyle.borderBottomWidth || '0');\n\n            containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setDirectionAndShow(direction: 'up' | 'down') {\n        this.setRootElement();\n        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n        // popover can be closed between the time the popover is opened and the time the direction is determined\n        const isOpen = this.open;\n        if (!isOpen) return;\n\n        this.currentDirection = direction;\n        this.show = true;\n        if (this.mode === 'legacy') {\n            this.setAbsoluteCSSProperties();\n        } else {\n            this.setFixedCSSProperties();\n        }\n    }\n\n    setFixedCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, rootElementRect } = this;\n        const {\n            top: controlTop,\n            bottom: controlBottom,\n            left: controlLeft,\n            right: controlRight,\n        } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n        };\n        const popoverLeft: number = controlLeft - rootElementRect.left;\n\n        if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement.offsetWidth || 0}px`);\n        containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);\n        containerElement.style.setProperty(\n            '--comp-pop-right',\n            `${rootElementRect.width + rootElementRect.left - controlRight}px`\n        );\n\n        if (currentDirection === 'up') {\n            containerElement.style.setProperty(\n                '--comp-pop-bottom',\n                `${rootElementRect.height + rootElementRect.top - controlTop}px`\n            );\n        }\n        if (currentDirection === 'down') {\n            containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setRootElement() {\n        let currentElement: HTMLElement = this.hostElement;\n\n        while (currentElement && currentElement !== document.documentElement) {\n            const computedStyle = window.getComputedStyle(currentElement);\n\n            // Check if the element has any styles applied that create a new containg block\n            if (\n                computedStyle.transform !== 'none' ||\n                computedStyle.filter !== 'none' ||\n                computedStyle.perspective !== 'none' ||\n                computedStyle.containerType !== 'normal' ||\n                ['transform', 'perspective', 'filter'].includes(computedStyle.willChange) ||\n                ['layout', 'paint', 'strict', 'content'].includes(computedStyle.contain)\n            ) {\n                this.rootElementRect = currentElement.getBoundingClientRect();\n                return;\n            }\n\n            const rootNode = currentElement.getRootNode();\n            const isRootNodeWebComponent =\n                typeof ShadowRoot !== 'undefined' &&\n                rootNode instanceof ShadowRoot &&\n                rootNode.host instanceof HTMLElement;\n            if (isRootNodeWebComponent) {\n                currentElement = rootNode.host;\n            } else {\n                currentElement = currentElement.parentElement;\n            }\n        }\n\n        // Return the document's bounding rect if no element is found\n        this.rootElementRect = {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n            height: window.visualViewport.height,\n            width: window.visualViewport.width,\n        } as DOMRect;\n    }\n\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    viewPortOrientationChanged = () => {\n        this.orientationChanged = true;\n        this.viewPortChanged();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\n        if (this.mode === 'legacy') containerClasses.push('legacy');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-popover2.js","mappings":"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","names":[],"sources":["src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.legacy {\n    &.container {\n        display: none;\n    }\n\n    &.show {\n        display: block;\n        z-index: var-list(--tct-popover-z-index, 50);\n    }\n}\n\n:popover-open,\n.show {\n    position: absolute;\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    background: var-list(--tct-popover-background, --app-white, #ffffff);\n    color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n    min-width: var-list(--tct-popover-min-width, 135px);\n    margin-block: var-list(--tct-popover-margin-block, 0);\n    box-shadow: var-list(\n        --tct-popover-box-shadow,\n        --app-shadow-1,\n        unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n    );\n    border-width: var-list(--tct-popover-border-width, 0);\n    border-style: solid;\n    border-color: var-list(--tct-popover-border-color, transparent);\n    border-radius: var-list(--tct-popover-border-radius, 0);\n    // the --comp variables are set via JS\n    max-height: var(--comp-pop-max-height);\n    left: var(--comp-pop-left);\n    opacity: var(--comp-pop-opacity, 0);\n\n    &.block {\n        right: unset;\n        width: var(--comp-pop-width);\n        min-width: var-list(--tct-popover-min-width, unset);\n    }\n\n    &.left {\n        left: var(--comp-pop-left);\n        right: unset;\n    }\n\n    &.right {\n        right: var(--comp-pop-right);\n        left: unset;\n    }\n\n    &.down {\n        top: var-list(--tct-popover-top, --comp-pop-top);\n        bottom: unset;\n    }\n\n    &.up {\n        top: unset;\n        bottom: var(--comp-pop-bottom);\n    }\n\n    @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n    orientationChanged: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    currentDirection: 'down' | 'up' = undefined;\n\n    // remove `show` when Popover API is supported in iOS\n    @State()\n    show: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Aligns the popover to the left or right side of the control element. */\n    @Prop({ reflect: true })\n    align: 'left' | 'right' = 'left';\n\n    /** Indicates the popover will match the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** The element that controls the popover's behavior. */\n    @Prop()\n    controlElement: HTMLElement;\n\n    /**\n     * Force the direction of the popover when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ reflect: true })\n    direction: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    maxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    minHeight: number;\n\n    @Prop()\n    mode: 'legacy' = null;\n\n    /** Controls whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the popover is opened or closed.\n     */\n    @Event()\n    popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n        this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);\n        this.containerElement = null;\n        this.contentElement = null;\n        this.controlElement = null;\n    }\n\n    componentWillLoad() {\n        if (!this.supportsPopoverAPI) {\n            console.warn(\n                'The Popover API is not supported in this browser. Please update your browser to the latest version. The component will use legacy mode.'\n            );\n            this.mode = 'legacy';\n        }\n    }\n\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.supportsPopoverAPI) this.containerElement.addEventListener('toggle', this.handlePopoverToggleEvent);\n        if (this.open) this.determinePopDirection();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    @Watch('open')\n    async openChanged(open: boolean) {\n        this.popoverStateChanged.emit({ open });\n\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            if (this.mode === 'legacy' || !this.supportsPopoverAPI) {\n                this.show = false;\n            } else {\n                this.containerElement.hidePopover();\n            }\n\n            await waitForNextPaint();\n            this.clearCSSProperties();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    get providedDirection(): 'up' | 'down' | undefined {\n        const { direction } = this;\n        switch (direction) {\n            case 'up':\n            case 'down':\n                return direction;\n            default:\n                return undefined;\n        }\n    }\n\n    get supportsPopoverAPI(): boolean {\n        return Object.hasOwn(HTMLElement.prototype, 'popover');\n    }\n\n    addViewportListeners() {\n        window.addEventListener('resize', this.viewPortOrientationChanged);\n        visualViewport?.addEventListener('resize', this.viewPortChanged);\n        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n        screen?.orientation?.addEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n    }\n\n    clearCSSProperties() {\n        this.containerElement.style.removeProperty('--comp-pop-max-height');\n        this.containerElement.style.removeProperty('--comp-pop-top');\n        this.containerElement.style.removeProperty('--comp-pop-bottom');\n        this.containerElement.style.removeProperty('--comp-pop-left');\n        this.containerElement.style.removeProperty('--comp-pop-right');\n        this.containerElement.style.removeProperty('--comp-pop-width');\n        this.containerElement.style.removeProperty('--comp-pop-opacity');\n    }\n\n    async determinePopDirection() {\n        const { containerElement, controlElement, providedDirection, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n\n        if (isModule) {\n            const { outletOffset = 0, innerHeight = window.innerHeight } = window.Tecton?.platformDimensions || {};\n            const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            windowHeight = innerHeight;\n            // If the top of the module is below the top of the window we just use the controlTop\n            // Otherwise we need to add the outletOffset to the controlTop\n            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.visualViewport.height;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n        const shouldUpdateMaxHeight =\n            !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n        this.orientationChanged = false;\n        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;\n\n        switch (currentOrDetermineDirection) {\n            case 'up':\n                if (shouldUpdateMaxHeight) {\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n                }\n                this.setDirectionAndShow('up');\n                break;\n            case 'down':\n                if (shouldUpdateMaxHeight) {\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n                }\n                this.setDirectionAndShow('down');\n                break;\n            default:\n                break;\n        }\n    }\n\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\n    };\n\n    handlePopoverToggleEvent = (event: ToggleEvent) => {\n        this.popoverStateChanged.emit({ open: event.newState === 'open' });\n    };\n\n    removeViewportListeners() {\n        window.removeEventListener('resize', this.viewPortOrientationChanged);\n        visualViewport?.removeEventListener('resize', this.viewPortChanged);\n        window.removeEventListener('scroll', this.viewPortChanged, { capture: true });\n        screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n    }\n\n    setAbsoluteCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, align } = this;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', '0');\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', '0');\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) {\n            containerElement.style.setProperty('--comp-pop-width', '100%');\n        }\n\n        if (currentDirection === 'up') {\n            const controlStyle = getComputedStyle(controlElement);\n            const controlSize =\n                parseInt(controlStyle.height || '0') +\n                parseInt(controlStyle.borderTopWidth || '0') +\n                parseInt(controlStyle.borderBottomWidth || '0');\n\n            containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setDirectionAndShow(direction: 'up' | 'down') {\n        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n        // popover can be closed between the time the popover is opened and the time the direction is determined\n        const isOpen = this.open;\n        if (!isOpen) return;\n\n        this.currentDirection = direction;\n        if (this.mode === 'legacy' || !this.supportsPopoverAPI) {\n            this.show = true;\n            this.setAbsoluteCSSProperties();\n        } else {\n            this.setPopoverAPICSSProperties();\n            this.containerElement.showPopover();\n        }\n    }\n\n    setPopoverAPICSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, isModule, align } = this;\n        const {\n            top: controlTop,\n            bottom: controlBottom,\n            left: controlLeft,\n            right: controlRight,\n        } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n        };\n\n        const popoverLeft: number = controlLeft;\n        const popoverRight: number = window?.visualViewport?.width - controlRight;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', `${popoverRight - window.scrollX}px`);\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', `${popoverLeft + window.scrollX}px`);\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement?.offsetWidth || 0}px`);\n\n        if (currentDirection === 'up') {\n            if (isModule) {\n                containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);\n            } else {\n                containerElement.style.setProperty(\n                    '--comp-pop-bottom',\n                    `${window.innerHeight - controlTop - window?.visualViewport?.offsetTop - window.scrollY}px`\n                );\n            }\n        }\n\n        if (currentDirection === 'down') {\n            if (isModule) {\n                containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);\n            } else {\n                containerElement.style.setProperty(\n                    '--comp-pop-top',\n                    `${controlBottom + (window?.visualViewport?.offsetTop ?? 0) + window.scrollY}px`\n                );\n            }\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    viewPortOrientationChanged = () => {\n        this.orientationChanged = true;\n        this.viewPortChanged();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const containerClasses = ['container', this.currentDirection, this.align];\n        if (this.show) containerClasses.push('show');\n        if (this.block) containerClasses.push('block');\n        if (this.mode === 'legacy') containerClasses.push('legacy');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n                tabIndex={-1}\n                popover=\"auto\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

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

@@ -143,7 +143,7 @@ const Q2RelativeTime$1 = /*@__PURE__*/ proxyCustomElement(class Q2RelativeTime e
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: 'bb2afb6a702c88e41eed0cad8ad263e7d7014406' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: 'ed93ac75ce8c58e36ac28a11b735c1f27bb9f36b' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-resize-observer2.js

@@ -80,7 +80,7 @@ const Q2ResizeObserver = /*@__PURE__*/ proxyCustomElement(class Q2ResizeObserver
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: 'e704a2aa1c38da509b0e366e03cd33397ffdbf5d', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: 'a2bc98bbab08717788bc3544753dfadec6d9529b', onSlotchange: this.handleSlotChange });
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-section.js

@@ -193,9 +193,9 @@ const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class Q2Section extends HTM
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '994cfe09abd1a9d8220ca4017cb4003ae1e2cf39', class: "wrapper" }, h("header", { key: '56a44ef98988748508c673bd3725887a1743a99b', class: hasHeader ? 'has-header' : '' }, h("div", { key: '03cc85008637fe3de375d223de79ac59c6b6ba64', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '69c2119b393e0b3f02392686ec49835273a9ebcb', class: "title" }, loc(this.label)), h("div", { key: '62a92b25033d9c9709a680b05becc2a48779197c', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'f5b2dbc68e33d01f31845bdbfb429e0a18a5e174', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '1983d339de073ca38b6879fca9d96fbe4648e533', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: 'de36065a7fdeb1c381184304e4ed679f27d4f771', type: "chevron-up" })))), h("div", { key: 'e681760db4a6551d03ded78c25ab24257b6eaf0b', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '8fb3af91211e857b5f3ce699a34ae924292c15ee', class: "wrapper" }, h("header", { key: '70cc58cc4ba81963966d940bac75170115d8b2df', class: hasHeader ? 'has-header' : '' }, h("div", { key: '75632d067c8add9849a03696f1b546293120f60a', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'a13c27bd7e4ad893415432247af331dbddbfecaf', class: "title" }, loc(this.label)), h("div", { key: 'f160d75cc07aeab01b0be94cb9e192bca82d51be', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '3b999cd695be9866b7eda78b44f105b5ba1a48c0', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '8cda7c3998eabc4ee9ba0c37067b6d6a3a1f136b', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '5c453c8498993b74b3b2df173b6641235527ecf8', type: "chevron-up" })))), h("div", { key: '8781154e86dc8689c50362694b3f9afd138cc1a7', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '004500e012e4eb718f7e018c20a0cc3590b9ebce', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'f83f550c26a3f36d2a72c777a9f904a3774e963f', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '6b4e808f97cf63aafd105e68c98fb8fd578dc0b4', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '8a0f4e65d9f135d03eaef60fe1d92518c2ea9c8a', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {