q2-tecton-elements 1.55.5 → 1.55.6

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

@@ -1,4 +1,4 @@
-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 e, h as i, H as o, g as s } from "./index-7a5365e2.js";
 
 import { n, l as r, o as a, i as h, w as c, v as l, h as p } from "./index-f2a66217.js";
 
@@ -33,14 +33,14 @@ const f = class {
     };
     /* tslint:disable:cyclomatic-complexity */    this.externalKeydownHandler = t => {
       t.stopPropagation();
-      const {activeIndex: e, customSearch: i, allOptions: s} = this;
-      const {key: o} = t;
+      const {activeIndex: e, customSearch: i, allOptions: o} = this;
+      const {key: s} = t;
       let r;
-      switch (o) {
+      switch (s) {
        case " ":
         if (this.searchString) {
           if (i) break;
-          this.searchOptions(o, true);
+          this.searchOptions(s, true);
           break;
         } else if (this.type === "menu") {
           this.activeIndex = 0;
@@ -88,7 +88,7 @@ const f = class {
 
        case "End":
         t.preventDefault();
-        this.openDropdownWithActiveElement(s.length - 1);
+        this.openDropdownWithActiveElement(o.length - 1);
         break;
 
        case "PageUp":
@@ -98,7 +98,7 @@ const f = class {
 
        case "PageDown":
         t.preventDefault();
-        this.openDropdownWithActiveElement(Math.min((e || 0) + 10, s.length - 1));
+        this.openDropdownWithActiveElement(Math.min((e || 0) + 10, o.length - 1));
         break;
 
        case "Tab":
@@ -119,22 +119,22 @@ const f = class {
 
        default:
         if (i) break;
-        if (!o.match(/^[\w]$/)) break;
-        this.searchOptions(o, true);
+        if (!s.match(/^[\w]$/)) break;
+        this.searchOptions(s, 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 o = !i && this.hostElement.contains(e);
+      if (i || o) {
         t.stopPropagation();
       }
     };
     this.internalKeydownHandler = t => {
       t.stopPropagation();
-      const {activeIndex: e, customSearch: i, allOptions: s, allVisibleOptions: o, multiple: n} = this;
+      const {activeIndex: e, customSearch: i, allOptions: o, allVisibleOptions: s, multiple: n} = this;
       const {key: r, shiftKey: a} = t;
       let h;
       switch (r) {
@@ -144,7 +144,7 @@ const f = class {
           this.searchOptions(r, false);
           break;
         }
-        h = s.find((t => t.active));
+        h = o.find((t => t.active));
         if (!h || h.disabled) break;
         this.selectOption(h);
         if (n) break;
@@ -159,7 +159,7 @@ const f = class {
         break;
 
        case "Enter":
-        h = s.find((t => t.active));
+        h = o.find((t => t.active));
         if (!h || h.disabled) break;
         this.selectOption(h);
         if (n) break;
@@ -175,7 +175,7 @@ const f = class {
 
        case "ArrowUp":
         t.preventDefault();
-        const c = o[0];
+        const c = s[0];
         const l = c.active;
         if (l) break;
         if (e === undefined) {
@@ -190,7 +190,7 @@ const f = class {
 
        case "ArrowDown":
         t.preventDefault();
-        const p = o[o.length - 1];
+        const p = s[s.length - 1];
         const d = p.active;
         if (d) break;
         if (e === undefined) {
@@ -210,7 +210,7 @@ const f = class {
 
        case "End":
         t.preventDefault();
-        this.openDropdownWithActiveElement(s.length - 1);
+        this.openDropdownWithActiveElement(o.length - 1);
         break;
 
        case "PageUp":
@@ -220,7 +220,7 @@ const f = class {
 
        case "PageDown":
         t.preventDefault();
-        this.openDropdownWithActiveElement(Math.min(e + 10, s.length - 1));
+        this.openDropdownWithActiveElement(Math.min(e + 10, o.length - 1));
         break;
 
        case "Tab":
@@ -233,7 +233,7 @@ const f = class {
           });
           break;
         }
-        h = s.find((t => t.active));
+        h = o.find((t => t.active));
         if (!h || h.disabled) return;
         this.selectOption(h);
         break;
@@ -425,13 +425,13 @@ const f = class {
   }
   focusSelectedSibling(t) {
     const {allVisibleOptions: e, allOptions: i} = this;
-    const s = e.length < 2;
-    if (s) {
+    const o = e.length < 2;
+    if (o) {
       this.showSelected = false;
       return;
     }
-    const o = e.indexOf(t);
-    const n = o ? o - 1 : o + 1;
+    const s = e.indexOf(t);
+    const n = s ? s - 1 : s + 1;
     const r = e[n];
     const a = i.indexOf(r);
     this.activeIndex = a;
@@ -450,9 +450,9 @@ const f = class {
     return 0;
   }
   getNextVisibleIndex(t) {
-    const {allVisibleOptions: e, allOptions: i, activeIndex: s} = this;
-    const o = i[s];
-    const n = e.indexOf(o);
+    const {allVisibleOptions: e, allOptions: i, activeIndex: o} = this;
+    const s = i[o];
+    const n = e.indexOf(s);
     let r = n + t;
     if (r < 0) {
       r = e.length - 1;
@@ -465,12 +465,12 @@ const f = class {
   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);
-    const o = !!s.length && s[0].tagName === "SLOT";
-    if (o) {
-      return this.getRootSlot(s[0]);
+    const o = (e = i === null || i === void 0 ? void 0 : i.assignedElements()) !== null && e !== void 0 ? e : Array.from(t.children);
+    const s = !!o.length && o[0].tagName === "SLOT";
+    if (s) {
+      return this.getRootSlot(o[0]);
     } else {
-      return s;
+      return o;
     }
   }
   async openDropdownWithActiveElement(t) {
@@ -504,30 +504,30 @@ const f = class {
     this.searchAndFocus(t, e);
   }
   selectOption(t) {
-    const {multiple: e, noSelect: i, showSelected: s} = this;
+    const {multiple: e, noSelect: i, showSelected: o} = this;
     if (!t || t.disabled || "disabledGroup" in t && t.disabledGroup) return;
-    const o = t.value;
+    const s = t.value;
     const n = "display" in t && t.display ? t.display : t.innerText.trim();
     const r = {
-      value: o,
+      value: s,
       display: n
     };
     let a = [];
     if (e) {
       const {selectedOptions: e} = this;
-      const i = e.find((t => t.value === o));
+      const i = e.find((t => t.value === s));
       if (i) {
-        a = e.filter((({value: t}) => t !== o));
+        a = e.filter((({value: t}) => t !== s));
       } else {
         a = [ ...e, r ];
       }
-      if (s) this.focusSelectedSibling(t);
+      if (o) this.focusSelectedSibling(t);
     } else {
       a = [ r ];
     }
     if (i) this.setActiveElement(null); else this.selectedOptions = a;
     this.change.emit({
-      value: o,
+      value: s,
       values: a
     });
   }
@@ -555,17 +555,17 @@ const f = class {
   updateSingleOptionAttrs() {
     var t;
     const {allOptions: e, selectedOptions: i} = this;
-    const s = ((t = i[0]) === null || t === void 0 ? void 0 : t.value) || undefined;
+    const o = ((t = i[0]) === null || t === void 0 ? void 0 : t.value) || undefined;
     if (this.noSelect) return;
     e.forEach((t => {
       if (!("selected" in t)) return;
-      t.selected = t.value === s;
+      t.selected = t.value === o;
     }));
   }
   // #endregion
   // #region Render Methods
   render() {
-    return i(s, {
+    return i(o, {
       key: "5708785bddc01b545a3b2a94417ad415c6cba32e"
     }, i("div", {
       key: "e6f36e235609824dae19e93edc14d8f8504eb860",
@@ -585,7 +585,7 @@ const f = class {
     }))));
   }
   get hostElement() {
-    return o(this);
+    return s(this);
   }
   static get watchers() {
     return {
@@ -597,7 +597,7 @@ const f = class {
 
 f.style = u;
 
-const b = "*{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 b = "*{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 v = b;
 
@@ -608,15 +608,20 @@ const w = class {
     /**
          * The number of pixels to leave between the popover and the edge of the viewport
          */    this.displayBuffer = 10;
-    /** remove when Popover API is supported in iOS */    this.orientationChanged = false;
+    this.orientationChanged = false;
     this.handleMinHeight = () => {
       if (this.minHeight) {
         p(this, "minHeight", "prop");
       }
     };
+    this.handlePopoverToggleEvent = t => {
+      this.popoverStateChanged.emit({
+        open: t.newState === "open"
+      });
+    };
     this.setAbsoluteCSSProperties = async () => {
-      const {controlElement: t, containerElement: e, currentDirection: i, align: s} = this;
-      if (s === "right") {
+      const {controlElement: t, containerElement: e, currentDirection: i, align: o} = this;
+      if (o === "right") {
         e.style.setProperty("--comp-pop-right", "0");
         e.style.setProperty("--comp-pop-left", "unset");
       } else {
@@ -628,35 +633,49 @@ const w = class {
       }
       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`);
+        const o = parseInt(i.height || "0") + parseInt(i.borderTopWidth || "0") + parseInt(i.borderBottomWidth || "0");
+        e.style.setProperty("--comp-pop-bottom", `${o}px`);
       }
       // Wait for one paint to prevent layout thrashing
             await c();
       e.style.setProperty("--comp-pop-opacity", "1");
     };
-    this.setFixedCSSProperties = async () => {
-      var t, e;
-      const {controlElement: i, containerElement: s, currentDirection: o, rootElementRect: n} = this;
-      const {top: r, bottom: a, left: h, right: l} = (e = (t = i === null || i === void 0 ? void 0 : i.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(i)) !== null && e !== void 0 ? e : {
+    this.setPopoverAPICSSProperties = async () => {
+      var t, e, i, o, s, n;
+      const {controlElement: r, containerElement: a, currentDirection: h, isModule: l, align: p} = this;
+      const {top: d, bottom: u, left: f, right: b} = (e = (t = r === null || r === void 0 ? void 0 : r.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(r)) !== null && e !== void 0 ? e : {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0
       };
-      const p = h - n.left;
-      if (this.block) s.style.setProperty("--comp-pop-width", `${(i === null || i === void 0 ? void 0 : i.offsetWidth) || 0}px`);
-      s.style.setProperty("--comp-pop-left", `${p}px`);
-      s.style.setProperty("--comp-pop-right", `${n.width + n.left - l}px`);
-      if (o === "up") {
-        s.style.setProperty("--comp-pop-bottom", `${n.height + n.top - r}px`);
+      const v = f;
+      const w = ((i = window === null || window === void 0 ? void 0 : window.visualViewport) === null || i === void 0 ? void 0 : i.width) - b;
+      if (p === "right") {
+        a.style.setProperty("--comp-pop-right", `${w - window.scrollX}px`);
+        a.style.setProperty("--comp-pop-left", "unset");
+      } else {
+        a.style.setProperty("--comp-pop-left", `${v + window.scrollX}px`);
+        a.style.setProperty("--comp-pop-right", "unset");
       }
-      if (o === "down") {
-        s.style.setProperty("--comp-pop-top", `${a - n.top}px`);
+      if (this.block) a.style.setProperty("--comp-pop-width", `${(r === null || r === void 0 ? void 0 : r.offsetWidth) || 0}px`);
+      if (h === "up") {
+        if (l) {
+          a.style.setProperty("--comp-pop-bottom", `${window.innerHeight - d}px`);
+        } else {
+          a.style.setProperty("--comp-pop-bottom", `${window.innerHeight - d - ((o = window === null || window === void 0 ? void 0 : window.visualViewport) === null || o === void 0 ? void 0 : o.offsetTop) - window.scrollY}px`);
+        }
+      }
+      if (h === "down") {
+        if (l) {
+          a.style.setProperty("--comp-pop-top", `${u}px`);
+        } else {
+          a.style.setProperty("--comp-pop-top", `${u + ((n = (s = window === null || window === void 0 ? void 0 : window.visualViewport) === null || s === void 0 ? void 0 : s.offsetTop) !== null && n !== void 0 ? n : 0) + window.scrollY}px`);
+        }
       }
       // Wait for one paint to prevent layout thrashing
             await c();
-      s.style.setProperty("--comp-pop-opacity", "1");
+      a.style.setProperty("--comp-pop-opacity", "1");
     };
     this.viewPortChanged = () => {
       if (!this.open) return;
@@ -668,7 +687,7 @@ const w = class {
     };
     this.currentDirection = undefined;
     this.show = false;
-    this.align = undefined;
+    this.align = "left";
     this.block = undefined;
     this.controlElement = undefined;
     this.direction = undefined;
@@ -681,13 +700,20 @@ const w = class {
   // #region Component Lifecycle Events
   disconnectedCallback() {
     this.removeViewportListeners();
+    this.containerElement.removeEventListener("toggle", this.handlePopoverToggleEvent);
     this.containerElement = null;
     this.contentElement = null;
     this.controlElement = null;
-    this.rootElementRect = 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();
   }
   // #endregion
@@ -712,7 +738,6 @@ const w = class {
     this.handleMinHeight();
   }
   async openChanged(t) {
-    this.setRootElement();
     this.popoverStateChanged.emit({
       open: t
     });
@@ -722,7 +747,11 @@ const w = class {
     } else {
       this.removeViewportListeners();
       this.currentDirection = undefined;
-      this.show = false;
+      if (this.mode === "legacy" || !this.supportsPopoverAPI) {
+        this.show = false;
+      } else {
+        this.containerElement.hidePopover();
+      }
       await c();
       this.clearCSSProperties();
     }
@@ -732,8 +761,8 @@ const w = class {
   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;
+    const o = Object.keys((e = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions) !== null && e !== void 0 ? e : {}).length > 0;
+    return i && o;
   }
   get providedDirection() {
     const {direction: t} = this;
@@ -746,6 +775,9 @@ const w = class {
       return undefined;
     }
   }
+  get supportsPopoverAPI() {
+    return Object.hasOwn(HTMLElement.prototype, "popover");
+  }
   get validatedMaxHeight() {
     const {maxHeight: t} = this;
     return isNaN(t) ? undefined : t;
@@ -753,15 +785,14 @@ const w = class {
   addViewportListeners() {
     var t;
     window.addEventListener("resize", this.viewPortOrientationChanged);
-    // #region remove when Popover API is supported in iOS
-        window.addEventListener("scroll", this.viewPortChanged, {
+    visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener("resize", this.viewPortChanged);
+    window.addEventListener("scroll", this.viewPortChanged, {
       passive: true,
       capture: true
     });
     (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
-    }
+  }
   clearCSSProperties() {
     this.containerElement.style.removeProperty("--comp-pop-max-height");
     this.containerElement.style.removeProperty("--comp-pop-top");
@@ -773,11 +804,11 @@ const w = class {
   }
   async determinePopDirection() {
     var t, e, i;
-    const {containerElement: s, controlElement: o, providedDirection: n, displayBuffer: r} = this;
-    if (s) s.style.maxHeight = null;
+    const {containerElement: o, controlElement: s, providedDirection: n, displayBuffer: r} = this;
+    if (o) o.style.maxHeight = null;
     await c();
     const {isModule: a} = this;
-    const {top: h, 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} = (e = (t = s === null || s === void 0 ? void 0 : s.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(s)) !== null && e !== void 0 ? e : {
       top: 0,
       bottom: 0
     };
@@ -786,14 +817,14 @@ const w = class {
     let u;
     if (a) {
       const {outletOffset: t = 0, innerHeight: e = window.innerHeight} = ((i = window.Tecton) === null || i === void 0 ? void 0 : i.platformDimensions) || {};
-      const s = window.visualViewport.height - l;
-      const o = e - (t + l);
-      const n = s < o;
+      const o = window.visualViewport.height - l;
+      const s = e - (t + l);
+      const n = o < s;
       p = e;
       // 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 ? h : h + t) - r;
-      u = n ? s - r : o - r;
+      u = n ? o - r : s - r;
     } else {
       p = window.visualViewport.height;
       d = h - r;
@@ -801,7 +832,7 @@ const w = class {
     }
     const f = d > u ? "up" : "down";
     // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
-        const b = !s.style.getPropertyValue("--comp-pop-max-height") || this.orientationChanged;
+        const b = !o.style.getPropertyValue("--comp-pop-max-height") || this.orientationChanged;
     // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
         this.orientationChanged = false;
     const v = this.currentDirection || n || f;
@@ -810,7 +841,7 @@ const w = class {
       if (b) {
         const t = this.validatedMaxHeight || d;
         const e = Math.min(d, t);
-        s.style.setProperty("--comp-pop-max-height", `${e}px`);
+        o.style.setProperty("--comp-pop-max-height", `${e}px`);
       }
       this.setDirectionAndShow("up");
       break;
@@ -819,7 +850,7 @@ const w = class {
       if (b) {
         const t = this.validatedMaxHeight || u;
         const e = Math.min(u, t);
-        s.style.setProperty("--comp-pop-max-height", `${e}px`);
+        o.style.setProperty("--comp-pop-max-height", `${e}px`);
       }
       this.setDirectionAndShow("down");
       break;
@@ -828,77 +859,51 @@ const w = class {
   removeViewportListeners() {
     var t;
     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
     });
     (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
-    }
+  }
   setDirectionAndShow(t) {
-    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;
+    const e = this.open;
     if (!e) return;
     this.currentDirection = t;
-    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 t = this.hostElement;
-    while (t && t !== document.documentElement) {
-      const e = 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)) {
-        this.rootElementRect = t.getBoundingClientRect();
-        return;
-      }
-      const i = t.getRootNode();
-      const s = typeof ShadowRoot !== "undefined" && i instanceof ShadowRoot && i.host instanceof HTMLElement;
-      if (s) {
-        t = i.host;
-      } else {
-        t = t.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 t = [ "container", this.currentDirection ];
+    const t = [ "container", this.currentDirection, this.align ];
     if (this.show) t.push("show");
+    if (this.block) t.push("block");
     if (this.mode === "legacy") t.push("legacy");
     return i("div", {
-      key: "d32d4929d567609b450603228c6747cfaf60f42f",
+      key: "c9f03d67b77e8e5b62c0fc3ae0ed0d0da582c949",
       ref: t => this.containerElement = t,
       class: t.join(" "),
       "test-id": "outerContainer",
-      tabIndex: -1
+      tabIndex: -1,
+      popover: "auto"
     }, i("div", {
-      key: "bab899e8951dd534c21a09fbac84bae890bc932e",
+      key: "e462cdf2172862ffde761ff7dea6d7f8eedd4484",
       ref: t => this.contentElement = t,
       class: "content"
     }, i("slot", {
-      key: "6b222ff386edeaf985dee48074ba30e68a95964c"
+      key: "013c872ef67663360a27e357188fbc75a63b5ad8"
     })));
   }
   get hostElement() {
-    return o(this);
+    return s(this);
   }
   static get watchers() {
     return {