q2-tecton-elements 1.56.2 → 1.56.3

package/dist/q2-tecton-elements/q2-option-list_2.entry.js

@@ -1,6 +1,6 @@
-import { r as t, c as e, h as i, H as s, g as o } from "./index-7a5365e2.js";
+import { r as t, c as i, h as e, H as s, g as o } from "./index-7a5365e2.js";
 
-import { n, l as r, o as a, i as c, w as h, v as l, h as p, x as d } from "./index-c215e8ef.js";
+import { n, l as r, o as a, i as h, w as c, v as l, h as p, x as d } from "./index-c215e8ef.js";
 
 function sanitizeRegexString(t) {
   return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -11,20 +11,20 @@ const u = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;bo
 const f = u;
 
 const b = class {
-  constructor(i) {
-    t(this, i);
-    this.change = e(this, "change", 7);
-    this.popoverState = e(this, "popoverState", 7);
-    this.ready = e(this, "ready", 3);
+  constructor(e) {
+    t(this, e);
+    this.change = i(this, "change", 7);
+    this.popoverState = i(this, "popoverState", 7);
+    this.ready = i(this, "ready", 3);
     this.keyStore = {
       queue: [],
       lastPressedAt: new Date
     };
     this.scheduledAfterRender = [];
     this.clickHandler = t => {
-      const e = t.target;
-      const i = e.closest("q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])");
-      this.selectOption(i);
+      const i = t.target;
+      const e = i.closest("q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])");
+      this.selectOption(e);
       if (this.multiple) return;
       this.popoverState.emit({
         open: false,
@@ -33,13 +33,13 @@ const b = class {
     };
     /* tslint:disable:cyclomatic-complexity */    this.externalKeydownHandler = t => {
       t.stopPropagation();
-      const {activeIndex: e, customSearch: i, allOptions: s} = this;
+      const {activeIndex: i, customSearch: e, allOptions: s} = this;
       const {key: o} = t;
       let r;
       switch (o) {
        case " ":
         if (this.searchString) {
-          if (i) break;
+          if (e) break;
           this.searchOptions(o, true);
           break;
         } else if (this.type === "menu") {
@@ -93,12 +93,12 @@ const b = class {
 
        case "PageUp":
         t.preventDefault();
-        this.openDropdownWithActiveElement(Math.max((e || 0) - 10, 0));
+        this.openDropdownWithActiveElement(Math.max((i || 0) - 10, 0));
         break;
 
        case "PageDown":
         t.preventDefault();
-        this.openDropdownWithActiveElement(Math.min((e || 0) + 10, s.length - 1));
+        this.openDropdownWithActiveElement(Math.min((i || 0) + 10, s.length - 1));
         break;
 
        case "Tab":
@@ -118,35 +118,35 @@ const b = class {
         break;
 
        default:
-        if (i) break;
+        if (e) break;
         if (!o.match(/^[\w]$/)) break;
         this.searchOptions(o, true);
         break;
       }
     };
     /* tslint:enable:cyclomatic-complexity */    this.focusoutHandler = t => {
-      const {relatedTarget: e} = t;
-      const i = this.allOptions.includes(e);
-      const s = !i && this.hostElement.contains(e);
-      if (i || s) {
+      const {relatedTarget: i} = t;
+      const e = this.allOptions.includes(i);
+      const s = !e && this.hostElement.contains(i);
+      if (e || s) {
         t.stopPropagation();
       }
     };
     this.internalKeydownHandler = t => {
       t.stopPropagation();
-      const {activeIndex: e, customSearch: i, allOptions: s, allVisibleOptions: o, multiple: n} = this;
+      const {activeIndex: i, customSearch: e, allOptions: s, allVisibleOptions: o, multiple: n} = this;
       const {key: r, shiftKey: a} = t;
-      let c;
+      let h;
       switch (r) {
        case " ":
         if (this.searchString && !this.multiple) {
-          if (i) break;
+          if (e) break;
           this.searchOptions(r, false);
           break;
         }
-        c = s.find((t => t.active));
-        if (!c || c.disabled) break;
-        this.selectOption(c);
+        h = s.find((t => t.active));
+        if (!h || h.disabled) break;
+        this.selectOption(h);
         if (n) break;
         this.hostElement.addEventListener("tctClick", (() => {
           this.popoverState.emit({
@@ -159,9 +159,9 @@ const b = class {
         break;
 
        case "Enter":
-        c = s.find((t => t.active));
-        if (!c || c.disabled) break;
-        this.selectOption(c);
+        h = s.find((t => t.active));
+        if (!h || h.disabled) break;
+        this.selectOption(h);
         if (n) break;
         this.hostElement.addEventListener("tctClick", (() => {
           this.popoverState.emit({
@@ -175,16 +175,16 @@ const b = class {
 
        case "ArrowUp":
         t.preventDefault();
-        const h = o[0];
-        const l = h.active;
+        const c = o[0];
+        const l = c.active;
         if (l) break;
-        if (e === undefined) {
+        if (i === undefined) {
           this.setDefaultActiveElement();
           break;
         } else {
           const t = this.getNextVisibleIndex(-1);
           if (t === -1) break;
-          this.adjustActiveOptionAndScroll(t - e);
+          this.adjustActiveOptionAndScroll(t - i);
           break;
         }
 
@@ -193,13 +193,13 @@ const b = class {
         const p = o[o.length - 1];
         const d = p.active;
         if (d) break;
-        if (e === undefined) {
+        if (i === undefined) {
           this.setDefaultActiveElement();
           break;
         } else {
           const t = this.getNextVisibleIndex(1);
           if (t === -1) break;
-          this.adjustActiveOptionAndScroll(t - e);
+          this.adjustActiveOptionAndScroll(t - i);
           break;
         }
 
@@ -215,12 +215,12 @@ const b = class {
 
        case "PageUp":
         t.preventDefault();
-        this.openDropdownWithActiveElement(Math.max(e - 10, 0));
+        this.openDropdownWithActiveElement(Math.max(i - 10, 0));
         break;
 
        case "PageDown":
         t.preventDefault();
-        this.openDropdownWithActiveElement(Math.min(e + 10, s.length - 1));
+        this.openDropdownWithActiveElement(Math.min(i + 10, s.length - 1));
         break;
 
        case "Tab":
@@ -233,9 +233,9 @@ const b = class {
           });
           break;
         }
-        c = s.find((t => t.active));
-        if (!c || c.disabled) return;
-        this.selectOption(c);
+        h = s.find((t => t.active));
+        if (!h || h.disabled) return;
+        this.selectOption(h);
         break;
 
        case "Esc":
@@ -248,37 +248,37 @@ const b = class {
         break;
 
        default:
-        if (i) break;
+        if (e) break;
         if (!r.match(/^[\w]$/)) break;
         this.searchOptions(r, false);
         break;
       }
     };
-    this.searchAndFocus = (t, e) => {
+    this.searchAndFocus = (t, i) => {
       // pseudo search in non-searchable select
       const reorder = () => {
         this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;
-        const t = this.allOptions.map(((t, e) => ({
+        const t = this.allOptions.map(((t, i) => ({
           element: t,
-          index: e
+          index: i
         })));
         return [ ...t.slice(this.pivotIndex), ...t.slice(0, this.pivotIndex) ];
       };
       const buildQueue = () => {
-        const e = new Date;
-        if (e.getTime() - this.keyStore.lastPressedAt.getTime() > 1e3) {
+        const i = new Date;
+        if (i.getTime() - this.keyStore.lastPressedAt.getTime() > 1e3) {
           // empty stored keys if delay > 1s
           this.keyStore.queue.length = 0;
         }
         if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== t) {
           this.keyStore.queue.push(t);
         }
-        this.keyStore.lastPressedAt = e;
+        this.keyStore.lastPressedAt = i;
       };
       const searchIndex = t => {
-        const e = this.keyStore.queue.join("");
-        const i = sanitizeRegexString(e);
-        return t.find((t => !t.element.disabled && t.element.display && (t.element.display.match(new RegExp(`^${i}`, "i")) || t.element.display.replace(/\s/g, "").match(new RegExp(`^${i}`, "i")))));
+        const i = this.keyStore.queue.join("");
+        const e = sanitizeRegexString(i);
+        return t.find((t => !t.element.disabled && t.element.display && (t.element.display.match(new RegExp(`^${e}`, "i")) || t.element.display.replace(/\s/g, "").match(new RegExp(`^${e}`, "i")))));
       };
       const setFocus = ({index: t}) => {
         if (this.multiple) {
@@ -286,7 +286,7 @@ const b = class {
           this.openDropdownWithActiveElement(t);
         } else {
           this.activeIndex = t;
-          if (e) {
+          if (i) {
             this.selectOption(this.allOptions[t]);
             this.popoverState.emit({
               open: false,
@@ -296,9 +296,9 @@ const b = class {
         }
       };
       buildQueue();
-      const i = searchIndex(reorder());
-      if (i) {
-        setFocus(i);
+      const e = searchIndex(reorder());
+      if (e) {
+        setFocus(e);
       }
     };
     this.hasOptions = undefined;
@@ -333,13 +333,13 @@ const b = class {
     t.stopPropagation();
   }
   delegateFocus(t) {
-    if (!c(t, this.hostElement)) return;
+    if (!h(t, this.hostElement)) return;
     this.popoverState.emit({
       open: true,
       action: "open"
     });
-    const {activeIndex: e} = this;
-    if (typeof e === "number" && e > -1) {
+    const {activeIndex: i} = this;
+    if (typeof i === "number" && i > -1) {
       this.setActiveOption();
       this.setFocusedOption();
     } else {
@@ -381,25 +381,25 @@ const b = class {
       this.showSelected = false;
       return;
     }
-    this.allOptions.forEach((e => {
-      if (!("_multiSelectHidden" in e)) return;
-      e._multiSelectHidden = t ? !e.selected : false;
+    this.allOptions.forEach((i => {
+      if (!("_multiSelectHidden" in i)) return;
+      i._multiSelectHidden = t ? !i.selected : false;
     }));
   }
   // #endregion
   // #region Local Methods
   get allContents() {
     const t = this.getRootSlot(this.hostElement);
-    const e = new Set([ "Q2-OPTGROUP", "Q2-OPTION", "Q2-DROPDOWN-ITEM" ]);
-    return t.filter((t => e.has(t.tagName)));
+    const i = new Set([ "Q2-OPTGROUP", "Q2-OPTION", "Q2-DROPDOWN-ITEM" ]);
+    return t.filter((t => i.has(t.tagName)));
   }
   get allOptions() {
     const t = this.allContents;
-    const extractOptions = t => t.reduce(((t, e) => {
-      if (e.tagName === "Q2-OPTION" || e.tagName === "Q2-DROPDOWN-ITEM") {
-        return e.separator ? t : [ ...t, e ];
-      } else if (e.tagName === "Q2-OPTGROUP") {
-        return [ ...t, ...extractOptions(Array.from(e.children)) ];
+    const extractOptions = t => t.reduce(((t, i) => {
+      if (i.tagName === "Q2-OPTION" || i.tagName === "Q2-DROPDOWN-ITEM") {
+        return i.separator ? t : [ ...t, i ];
+      } else if (i.tagName === "Q2-OPTGROUP") {
+        return [ ...t, ...extractOptions(Array.from(i.children)) ];
       } else {
         return t;
       }
@@ -418,22 +418,22 @@ const b = class {
   checkOptions() {
     const {type: t} = this;
     if (!t) return;
-    const e = t === "menu" ? "menuitem" : "option";
+    const i = t === "menu" ? "menuitem" : "option";
     this.allOptions.forEach((t => {
-      t.role = e;
+      t.role = i;
     }));
   }
   focusSelectedSibling(t) {
-    const {allVisibleOptions: e, allOptions: i} = this;
-    const s = e.length < 2;
+    const {allVisibleOptions: i, allOptions: e} = this;
+    const s = i.length < 2;
     if (s) {
       this.showSelected = false;
       return;
     }
-    const o = e.indexOf(t);
+    const o = i.indexOf(t);
     const n = o ? o - 1 : o + 1;
-    const r = e[n];
-    const a = i.indexOf(r);
+    const r = i[n];
+    const a = e.indexOf(r);
     this.activeIndex = a;
     this.setFocusedOption();
     this.scheduledAfterRender.push((() => {
@@ -443,29 +443,29 @@ const b = class {
   }
   getDefaultActiveIndex() {
     const {allOptions: t} = this;
-    const e = t.findIndex((t => "selected" in t && t.selected));
-    if (e > -1) return e;
-    const i = t.findIndex((t => !t.hidden));
+    const i = t.findIndex((t => "selected" in t && t.selected));
     if (i > -1) return i;
+    const e = t.findIndex((t => !t.hidden));
+    if (e > -1) return e;
     return 0;
   }
   getNextVisibleIndex(t) {
-    const {allVisibleOptions: e, allOptions: i, activeIndex: s} = this;
-    const o = i[s];
-    const n = e.indexOf(o);
+    const {allVisibleOptions: i, allOptions: e, activeIndex: s} = this;
+    const o = e[s];
+    const n = i.indexOf(o);
     let r = n + t;
     if (r < 0) {
-      r = e.length - 1;
-    } else if (r > e.length - 1) {
+      r = i.length - 1;
+    } else if (r > i.length - 1) {
       r = 0;
     }
-    const a = e[r];
-    return i.indexOf(a);
+    const a = i[r];
+    return e.indexOf(a);
   }
   getRootSlot(t) {
-    var e;
-    const i = t.querySelector("slot");
-    const s = (e = i === null || i === void 0 ? void 0 : i.assignedElements()) !== null && e !== void 0 ? e : Array.from(t.children);
+    var i;
+    const e = t.querySelector("slot");
+    const s = (i = e === null || e === void 0 ? void 0 : e.assignedElements()) !== null && i !== void 0 ? i : Array.from(t.children);
     const o = !!s.length && s[0].tagName === "SLOT";
     if (o) {
       return this.getRootSlot(s[0]);
@@ -479,7 +479,7 @@ const b = class {
       open: true,
       action: "open"
     });
-    await h();
+    await c();
     this.activeIndex = t;
     this.setActiveOption();
     this.setFocusedOption();
@@ -499,12 +499,12 @@ const b = class {
       block: "center"
     });
   }
-  searchOptions(t, e) {
+  searchOptions(t, i) {
     this.searchString = t;
-    this.searchAndFocus(t, e);
+    this.searchAndFocus(t, i);
   }
   selectOption(t) {
-    const {multiple: e, noSelect: i, showSelected: s} = this;
+    const {multiple: i, noSelect: e, showSelected: s} = this;
     if (!t || t.disabled || "disabledGroup" in t && t.disabledGroup) return;
     const o = t.value;
     const n = "display" in t && t.display ? t.display : t.innerText.trim();
@@ -513,19 +513,19 @@ const b = class {
       display: n
     };
     let a = [];
-    if (e) {
-      const {selectedOptions: e} = this;
-      const i = e.find((t => t.value === o));
-      if (i) {
-        a = e.filter((({value: t}) => t !== o));
+    if (i) {
+      const {selectedOptions: i} = this;
+      const e = i.find((t => t.value === o));
+      if (e) {
+        a = i.filter((({value: t}) => t !== o));
       } else {
-        a = [ ...e, r ];
+        a = [ ...i, r ];
       }
       if (s) this.focusSelectedSibling(t);
     } else {
       a = [ r ];
     }
-    if (i) this.setActiveElement(null); else this.selectedOptions = a;
+    if (e) this.setActiveElement(null); else this.selectedOptions = a;
     this.change.emit({
       value: o,
       values: a
@@ -533,31 +533,31 @@ const b = class {
   }
   setActiveOption() {
     const t = this.activeIndex;
-    this.allOptions.forEach(((e, i) => {
-      e.active = t === i;
+    this.allOptions.forEach(((i, e) => {
+      i.active = t === e;
     }));
   }
   setFocusedOption() {
     const t = this.allOptions[this.activeIndex];
     if (!t) return;
-    const e = l(t);
-    if (e) t.focus(); else n((() => t.focus()));
+    const i = l(t);
+    if (i) t.focus(); else n((() => t.focus()));
   }
   updateMultipleOptionAttrs() {
-    const {allOptions: t, selectedOptions: e} = this;
-    const i = e.map((({value: t}) => t));
+    const {allOptions: t, selectedOptions: i} = this;
+    const e = i.map((({value: t}) => t));
     if (this.noSelect) return;
     t.forEach((t => {
       if (!("selected" in t)) return;
-      t.selected = i.includes(t.value);
+      t.selected = e.includes(t.value);
     }));
   }
   updateSingleOptionAttrs() {
     var t;
-    const {allOptions: e, selectedOptions: i} = this;
-    const s = ((t = i[0]) === null || t === void 0 ? void 0 : t.value) || undefined;
+    const {allOptions: i, selectedOptions: e} = this;
+    const s = ((t = e[0]) === null || t === void 0 ? void 0 : t.value) || undefined;
     if (this.noSelect) return;
-    e.forEach((t => {
+    i.forEach((t => {
       if (!("selected" in t)) return;
       t.selected = t.value === s;
     }));
@@ -565,14 +565,14 @@ const b = class {
   // #endregion
   // #region Render Methods
   render() {
-    return i(s, {
+    return e(s, {
       key: "48bc63463e38e58f7f18e5b5b105e14689be640c"
-    }, i("div", {
+    }, e("div", {
       key: "26d143ad186b387274837d2141f9e5cd7cee6fb0",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
-    }, i("div", {
+    }, e("div", {
       key: "afecab7ca714392b609ccc57f4d920a4cc7f2c7e",
       class: "options",
       "aria-label": r("tecton.element.optionList.label", [ this.label ]),
@@ -580,7 +580,7 @@ const b = class {
       role: this.type || "listbox",
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
-    }, i("slot", {
+    }, e("slot", {
       key: "7ca042464b34eeb59ddd8c62bf44b29b39f3ccfb"
     }))));
   }
@@ -602,9 +602,9 @@ const w = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;bo
 const v = w;
 
 const m = class {
-  constructor(i) {
-    t(this, i);
-    this.popoverStateChanged = e(this, "popoverStateChanged", 7);
+  constructor(e) {
+    t(this, e);
+    this.popoverStateChanged = i(this, "popoverStateChanged", 7);
     /**
          * The number of pixels to leave between the popover and the edge of the viewport
          */    this.displayBuffer = 10;
@@ -615,30 +615,30 @@ const m = class {
       }
     };
     this.setAbsoluteCSSProperties = async () => {
-      const {controlElement: t, containerElement: e, currentDirection: i, align: s} = this;
+      const {controlElement: t, containerElement: i, currentDirection: e, align: s} = this;
       if (s === "right") {
-        e.style.setProperty("--comp-pop-right", "0");
-        e.style.setProperty("--comp-pop-left", "unset");
+        i.style.setProperty("--comp-pop-right", "0");
+        i.style.setProperty("--comp-pop-left", "unset");
       } else {
-        e.style.setProperty("--comp-pop-left", "0");
-        e.style.setProperty("--comp-pop-right", "unset");
+        i.style.setProperty("--comp-pop-left", "0");
+        i.style.setProperty("--comp-pop-right", "unset");
       }
       if (this.block) {
-        e.style.setProperty("--comp-pop-width", "100%");
+        i.style.setProperty("--comp-pop-width", "100%");
       }
-      if (i === "up") {
-        const i = getComputedStyle(t);
-        const s = parseInt(i.height || "0") + parseInt(i.borderTopWidth || "0") + parseInt(i.borderBottomWidth || "0");
-        e.style.setProperty("--comp-pop-bottom", `${s}px`);
+      if (e === "up") {
+        const e = getComputedStyle(t);
+        const s = parseInt(e.height || "0") + parseInt(e.borderTopWidth || "0") + parseInt(e.borderBottomWidth || "0");
+        i.style.setProperty("--comp-pop-bottom", `${s}px`);
       }
       // Wait for one paint to prevent layout thrashing
-            await h();
-      e.style.setProperty("--comp-pop-opacity", "1");
+            await c();
+      i.style.setProperty("--comp-pop-opacity", "1");
     };
     this.setFixedCSSProperties = async () => {
-      var t, e, i, s;
+      var t, i, e, s;
       const {controlElement: o, containerElement: n, currentDirection: r, rootElementRect: a} = this;
-      const {top: c, bottom: l, left: p, right: u} = (e = (t = o === null || o === void 0 ? void 0 : o.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(o)) !== null && e !== void 0 ? e : {
+      const {top: h, bottom: l, left: p, right: u} = (i = (t = o === null || o === void 0 ? void 0 : o.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(o)) !== null && i !== void 0 ? i : {
         top: 0,
         bottom: 0,
         left: 0,
@@ -650,9 +650,9 @@ const m = class {
       n.style.setProperty("--comp-pop-right", `${a.width + a.left - u}px`);
       if (r === "up") {
         if (d()) {
-          n.style.setProperty("--comp-pop-bottom", `${window.innerHeight - c}px`);
+          n.style.setProperty("--comp-pop-bottom", `${window.innerHeight - h}px`);
         } else {
-          n.style.setProperty("--comp-pop-bottom", `${window.innerHeight - c - ((i = window === null || window === void 0 ? void 0 : window.visualViewport.offsetTop) !== null && i !== void 0 ? i : 0)}px`);
+          n.style.setProperty("--comp-pop-bottom", `${window.innerHeight - h - ((e = window === null || window === void 0 ? void 0 : window.visualViewport.offsetTop) !== null && e !== void 0 ? e : 0)}px`);
         }
       }
       if (r === "down") {
@@ -663,7 +663,7 @@ const m = class {
         }
       }
       // Wait for one paint to prevent layout thrashing
-            await h();
+            await c();
       n.style.setProperty("--comp-pop-opacity", "1");
     };
     this.viewPortChanged = () => {
@@ -689,6 +689,10 @@ const m = class {
   // #region Component Lifecycle Events
   disconnectedCallback() {
     this.removeViewportListeners();
+    this.containerElement = null;
+    this.contentElement = null;
+    this.controlElement = null;
+    this.rootElementRect = null;
   }
   componentDidLoad() {
     this.handleMinHeight();
@@ -697,9 +701,9 @@ const m = class {
   // #endregion
   // #region Listeners
   popoverStateHandler(t) {
-    const {detail: {open: e}} = t;
-    if (e === this.open) return;
-    this.open = e;
+    const {detail: {open: i}} = t;
+    if (i === this.open) return;
+    this.open = i;
     t.stopPropagation();
   }
   // #endregion
@@ -727,17 +731,17 @@ const m = class {
       this.removeViewportListeners();
       this.currentDirection = undefined;
       this.show = false;
-      await h();
+      await c();
       this.clearCSSProperties();
     }
   }
   // #endregion
   // #region Local Methods
   get isModule() {
-    var t, e;
-    const i = window !== window.top;
-    const s = Object.keys((e = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions) !== null && e !== void 0 ? e : {}).length > 0;
-    return i && s;
+    var t, i;
+    const e = window !== window.top;
+    const s = Object.keys((i = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions) !== null && i !== void 0 ? i : {}).length > 0;
+    return e && s;
   }
   get providedDirection() {
     const {direction: t} = this;
@@ -763,7 +767,7 @@ const m = class {
       passive: true,
       capture: true
     });
-    (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.addEventListener("change", this.viewPortOrientationChanged);
+    (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.addEventListener("orientationchange", this.viewPortOrientationChanged);
     window.addEventListener("orientationchange", this.viewPortOrientationChanged);
     // #endregion
     }
@@ -777,12 +781,12 @@ const m = class {
     this.containerElement.style.removeProperty("--comp-pop-opacity");
   }
   async determinePopDirection() {
-    var t, e, i;
+    var t, i, e;
     const {containerElement: s, controlElement: o, providedDirection: n, displayBuffer: r} = this;
     if (s) s.style.maxHeight = null;
-    await h();
+    await c();
     const {isModule: a} = this;
-    const {top: c, bottom: l} = (e = (t = o === null || o === void 0 ? void 0 : o.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(o)) !== null && e !== void 0 ? e : {
+    const {top: h, bottom: l} = (i = (t = o === null || o === void 0 ? void 0 : o.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(o)) !== null && i !== void 0 ? i : {
       top: 0,
       bottom: 0
     };
@@ -790,18 +794,18 @@ const m = class {
     let d;
     let u;
     if (a) {
-      const {outletOffset: t = 0, innerHeight: e = window.innerHeight} = ((i = window.Tecton) === null || i === void 0 ? void 0 : i.platformDimensions) || {};
+      const {outletOffset: t = 0, innerHeight: i = window.innerHeight} = ((e = window.Tecton) === null || e === void 0 ? void 0 : e.platformDimensions) || {};
       const s = window.visualViewport.height - l;
-      const o = e - (t + l);
+      const o = i - (t + l);
       const n = s < o;
-      p = e;
+      p = i;
       // If the top of the module is below the top of the window we just use the controlTop
       // Otherwise we need to add the outletOffset to the controlTop
-            d = (t > 0 ? c : c + t) - r;
+            d = (t > 0 ? h : h + t) - r;
       u = n ? s - r : o - r;
     } else {
       p = window.visualViewport.height;
-      d = c - r;
+      d = h - r;
       u = p - l - r;
     }
     const f = d > u ? "up" : "down";
@@ -814,8 +818,8 @@ const m = class {
      case "up":
       if (b) {
         const t = this.validatedMaxHeight || d;
-        const e = Math.min(d, t);
-        s.style.setProperty("--comp-pop-max-height", `${e}px`);
+        const i = Math.min(d, t);
+        s.style.setProperty("--comp-pop-max-height", `${i}px`);
       }
       this.setDirectionAndShow("up");
       break;
@@ -823,8 +827,8 @@ const m = class {
      case "down":
       if (b) {
         const t = this.validatedMaxHeight || u;
-        const e = Math.min(u, t);
-        s.style.setProperty("--comp-pop-max-height", `${e}px`);
+        const i = Math.min(u, t);
+        s.style.setProperty("--comp-pop-max-height", `${i}px`);
       }
       this.setDirectionAndShow("down");
       break;
@@ -835,7 +839,9 @@ const m = class {
     window.removeEventListener("resize", this.viewPortOrientationChanged);
     visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener("resize", this.viewPortChanged);
     // #region remove when Popover API is supported in iOS
-        window.removeEventListener("scroll", this.viewPortChanged);
+        window.removeEventListener("scroll", this.viewPortChanged, {
+      capture: true
+    });
     (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.removeEventListener("orientationchange", this.viewPortOrientationChanged);
     window.removeEventListener("orientationchange", this.viewPortOrientationChanged);
     // #endregion
@@ -844,8 +850,8 @@ const m = class {
     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 e = this.open;
-    if (!e) return;
+        const i = this.open;
+    if (!i) return;
     this.currentDirection = t;
     this.show = true;
     if (this.mode === "legacy") {
@@ -857,16 +863,16 @@ const m = class {
   setRootElement() {
     let t = this.hostElement;
     while (t && t !== document.documentElement) {
-      const e = window.getComputedStyle(t);
+      const i = window.getComputedStyle(t);
       // Check if the element has any styles applied that create a new containg block
-            if (e.transform !== "none" || e.filter !== "none" || e.perspective !== "none" || e.containerType !== "normal" || [ "transform", "perspective", "filter" ].includes(e.willChange) || [ "layout", "paint", "strict", "content" ].includes(e.contain)) {
+            if (i.transform !== "none" || i.filter !== "none" || i.perspective !== "none" || i.containerType !== "normal" || [ "transform", "perspective", "filter" ].includes(i.willChange) || [ "layout", "paint", "strict", "content" ].includes(i.contain)) {
         this.rootElementRect = t.getBoundingClientRect();
         return;
       }
-      const i = t.getRootNode();
-      const s = typeof ShadowRoot !== "undefined" && i instanceof ShadowRoot && i.host instanceof HTMLElement;
+      const e = t.getRootNode();
+      const s = typeof ShadowRoot !== "undefined" && e instanceof ShadowRoot && e.host instanceof HTMLElement;
       if (s) {
-        t = i.host;
+        t = e.host;
       } else {
         t = t.parentElement;
       }
@@ -887,18 +893,18 @@ const m = class {
     const t = [ "container", this.currentDirection ];
     if (this.show) t.push("show");
     if (this.mode === "legacy") t.push("legacy");
-    return i("div", {
-      key: "446d034f2c109204dad72cf53e293b01beac7183",
+    return e("div", {
+      key: "c6811c849c6782e77a762a227192dd169b5b8a44",
       ref: t => this.containerElement = t,
       class: t.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1
-    }, i("div", {
-      key: "d972d4c7047be74731c64b4ae81358b39fed6ce1",
+    }, e("div", {
+      key: "21cd6d307e22fec14249c02b2976b2f542a11aa8",
       ref: t => this.contentElement = t,
       class: "content"
-    }, i("slot", {
-      key: "9b2b755f1d83418d1b367739416f6bc80c19ee0f"
+    }, e("slot", {
+      key: "20747824b57f94c6edee7bde429135f9a03b1bc5"
     })));
   }
   get hostElement() {