q2-tecton-elements 1.66.1 → 1.67.0

package/dist/q2-tecton-elements/{q2-option-list_2.entry.js → click-elsewhere_3.entry.js}

@@ -1,10 +1,97 @@
-import { r as t, c as e, h as i, H as o, g as s } from "./index-CGkHOjh1.js";
+import { r as t, c as e, g as i, h as o, H as s } from "./index-CGkHOjh1.js";
 
-import { b as n } from "./component-DVxzK3WH.js";
+import { m as n } from "./mirror-emit-DUjY_ucm.js";
 
-import { l as r, n as a, o as c, i as h, w as l, v as p, q as d, x as u, g as f } from "./index-B4WYBDS9.js";
+import { b as r } from "./component-DVxzK3WH.js";
 
-import { m as b } from "./mirror-emit-DUjY_ucm.js";
+import { l as a, n as h, o as c, i as p, w as l, v as d, q as u, x as f, g as m } from "./index-C4PILj1_.js";
+
+const b = class {
+  constructor(i) {
+    t(this, i);
+    this.change = e(this, "change", 7);
+    this.tctChange = e(this, "tctChange", 7);
+    // #region Own Properties
+        this.isCurrentlyFocused = false;
+    /**
+         * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them
+         */    this.mouseEventList = [ "mousedown", "dragstart", "touchstart" ];
+    this.mouseHandler = t => {
+      const e = this.shadowContains(this.findActiveElement());
+      const i = this.shadowContains(this.shadowEventTarget(t)) || this.originatesInSlots(t.target);
+      if (!i && (this.isCurrentlyFocused || e)) {
+        this.isCurrentlyFocused = false;
+        n(this, [ "change", "tctChange" ]);
+        return;
+      }
+      this.isCurrentlyFocused = i || e;
+    };
+    this.windowBlurHandler = () => {
+      this.isCurrentlyFocused = false;
+      n(this, [ "change", "tctChange" ]);
+    };
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  /* tslint:enable:no-empty */
+  connectedCallback() {
+    this.mouseEventList.forEach((t => {
+      document.addEventListener(t, this.mouseHandler);
+    }));
+    window.addEventListener("blur", this.windowBlurHandler);
+  }
+  disconnectedCallback() {
+    this.mouseEventList.forEach((t => {
+      document.removeEventListener(t, this.mouseHandler);
+    }));
+    window.removeEventListener("blur", this.windowBlurHandler);
+  }
+  /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */
+  /* tslint:disable:no-empty */  componentWillLoad() {}
+  // #endregion
+  // #region Local Methods
+  findActiveElement() {
+    let t = document.activeElement;
+    while (true) {
+      if (!t || !t.shadowRoot) {
+        return t;
+      }
+      t = t.shadowRoot.activeElement;
+    }
+  }
+  originatesInSlots(t) {
+    const e = this.hostElement.querySelectorAll("slot");
+    for (const i of Array.from(e)) {
+      const e = i && i.assignedNodes && i.assignedNodes() || this.hostElement.childNodes;
+      for (const i of Array.from(e)) {
+        if (i.contains(t)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  shadowContains(t) {
+    /**
+         * shadow-dom enabled version of Node.contains()
+         */
+    while (true) {
+      if (t === this.hostElement) {
+        return true;
+      }
+      if (!t) {
+        return false;
+      }
+      t = t.parentNode || t.host;
+    }
+  }
+  shadowEventTarget(t) {
+    return t.composedPath()[0] || t.target;
+  }
+  get hostElement() {
+    return i(this);
+  }
+};
 
 function sanitizeRegexString(t) {
   return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -24,7 +111,7 @@ const w = class {
       lastPressedAt: new Date
     };
     this.scheduledAfterRender = [];
-    /** Determines the label that is applied to the option list for accessibility purposes. */    this.label = r("tecton.element.optionList.label");
+    /** Determines the label that is applied to the option list for accessibility purposes. */    this.label = a("tecton.element.optionList.label");
     /** A list of the selected options on the element. */    this.selectedOptions = [];
     /** Translates to the role of the option list */    this.type = "listbox";
     this.clickHandler = t => {
@@ -56,7 +143,7 @@ const w = class {
           this.openDropdownWithActiveElement(0);
         } else {
           this.setDefaultActiveElement();
-          a((() => this.popoverState.emit({
+          h((() => this.popoverState.emit({
             open: true,
             action: "open"
           })));
@@ -69,7 +156,7 @@ const w = class {
           this.openDropdownWithActiveElement(0);
         } else {
           this.setDefaultActiveElement();
-          a((() => this.popoverState.emit({
+          h((() => this.popoverState.emit({
             open: true,
             action: "open"
           })));
@@ -145,7 +232,7 @@ const w = class {
       t.stopPropagation();
       const {activeIndex: e, customSearch: i, allOptions: o, allVisibleOptions: s, multiple: n} = this;
       const {key: r, shiftKey: a} = t;
-      let c;
+      let h;
       switch (r) {
        case " ":
         if (this.searchString && !this.multiple) {
@@ -153,9 +240,9 @@ const w = class {
           this.searchOptions(r, false);
           break;
         }
-        c = o.find((t => t.active));
-        if (!c || c.disabled) break;
-        this.selectOption(c);
+        h = o.find((t => t.active));
+        if (!h || h.disabled) break;
+        this.selectOption(h);
         if (n) break;
         this.hostElement.addEventListener("tctClick", (() => {
           this.popoverState.emit({
@@ -168,9 +255,9 @@ const w = class {
         break;
 
        case "Enter":
-        c = o.find((t => t.active));
-        if (!c || c.disabled) break;
-        this.selectOption(c);
+        h = o.find((t => t.active));
+        if (!h || h.disabled) break;
+        this.selectOption(h);
         if (n) break;
         this.hostElement.addEventListener("tctClick", (() => {
           this.popoverState.emit({
@@ -184,9 +271,9 @@ const w = class {
 
        case "ArrowUp":
         t.preventDefault();
-        const h = s[0];
-        const l = h.active;
-        if (l) break;
+        const c = s[0];
+        const p = c.active;
+        if (p) break;
         if (e === undefined) {
           this.setDefaultActiveElement();
           break;
@@ -199,8 +286,8 @@ const w = class {
 
        case "ArrowDown":
         t.preventDefault();
-        const p = s[s.length - 1];
-        const d = p.active;
+        const l = s[s.length - 1];
+        const d = l.active;
         if (d) break;
         if (e === undefined) {
           this.setDefaultActiveElement();
@@ -242,9 +329,9 @@ const w = class {
           });
           break;
         }
-        c = o.find((t => t.active));
-        if (!c || c.disabled) return;
-        this.selectOption(c);
+        h = o.find((t => t.active));
+        if (!h || h.disabled) return;
+        this.selectOption(h);
         break;
 
        case "Esc":
@@ -314,7 +401,7 @@ const w = class {
   // #endregion
   // #region Component Lifecycle Events
   componentWillLoad() {
-    n(this.hostElement, "q2-select, q2-dropdown, q2-pill, q2-popover, q2-action-sheet");
+    r(this.hostElement, "q2-select, q2-dropdown, q2-pill, q2-popover, q2-action-sheet");
     this.hasOptions = !!this.hostElement.querySelectorAll("q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])").length;
   }
   componentDidLoad() {
@@ -333,7 +420,7 @@ const w = class {
     t.stopPropagation();
   }
   delegateFocus(t) {
-    if (!h(t, this.hostElement)) return;
+    if (!p(t, this.hostElement)) return;
     this.popoverState.emit({
       open: true,
       action: "open"
@@ -510,28 +597,28 @@ const w = class {
     const {multiple: e, noSelect: i, showSelected: o} = this;
     if (!t || t.disabled || "disabledGroup" in t && t.disabledGroup) return;
     const s = t.value;
-    const n = "display" in t && t.display ? t.display : t.innerText.trim();
-    const r = {
+    const r = "display" in t && t.display ? t.display : t.innerText.trim();
+    const a = {
       value: s,
-      display: n
+      display: r
     };
-    let a = [];
+    let h = [];
     if (e) {
       const {selectedOptions: e} = this;
       const i = e.find((t => t.value === s));
       if (i) {
-        a = e.filter((({value: t}) => t !== s));
+        h = e.filter((({value: t}) => t !== s));
       } else {
-        a = [ ...e, r ];
+        h = [ ...e, a ];
       }
       if (o) this.focusSelectedSibling(t);
     } else {
-      a = [ r ];
+      h = [ a ];
     }
-    if (i) this.setActiveElement(null); else this.selectedOptions = a;
-    b(this, [ "change", "tctChange" ], {
+    if (i) this.setActiveElement(null); else this.selectedOptions = h;
+    n(this, [ "change", "tctChange" ], {
       value: s,
-      values: a
+      values: h
     });
   }
   setActiveOption() {
@@ -543,10 +630,10 @@ const w = class {
   setFocusedOption() {
     const t = this.allOptions[this.activeIndex];
     if (!t) return;
-    const e = p(t);
+    const e = d(t);
     if (e) t.focus({
       preventScroll: true
-    }); else a((() => t.focus({
+    }); else h((() => t.focus({
       preventScroll: true
     })));
   }
@@ -572,27 +659,27 @@ const w = class {
   // #endregion
   // #region Render Methods
   render() {
-    return i(o, {
-      key: "e92cb4ca414d54c1160d0fc5446381e1be73585d"
-    }, i("div", {
-      key: "46d5872826db9f911fb58ef4deef6eda47afca84",
+    return o(s, {
+      key: "05e3dbeb1ffe4910f7c3c922311f51e0e34a4771"
+    }, o("div", {
+      key: "152c7430207325f6d6bcb6b5253c61528f9338eb",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
-    }, i("div", {
-      key: "ea06f918d93721765575bd26ef14ea4a76750d76",
+    }, o("div", {
+      key: "d94b9d6fe8fe5221b44c59424351cd2fa4e2139b",
       class: "options",
-      "aria-label": r("tecton.element.optionList.label", [ this.label ]),
+      "aria-label": a("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": this.type === "menu" ? undefined : `${!!this.multiple}`,
       role: this.type || "listbox",
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
-    }, i("slot", {
-      key: "5c1b0d7a46852b3d42156a68a925c6192e6fff8d"
+    }, o("slot", {
+      key: "c655e10092d73bdeb985ee08776024c5dbd6fc96"
     }))));
   }
   get hostElement() {
-    return s(this);
+    return i(this);
   }
   static get watchers() {
     return {
@@ -604,9 +691,9 @@ const w = class {
 
 w.style = v;
 
-const m = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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:var(--tct-popover-padding, 0);overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);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 g = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:absolute;margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);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-3, 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.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}@media (prefers-reduced-motion: reduce){:popover-open.animating-open,:popover-open.animating-close,.show.animating-open,.show.animating-close{animation:none}}: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.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center 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 g = class {
+const k = class {
   constructor(i) {
     t(this, i);
     this.popoverStateChanged = e(this, "popoverStateChanged", 7);
@@ -617,20 +704,26 @@ const g = class {
     this.orientationChanged = false;
     // #endregion
     // #region State Properties
-        this.currentDirection = undefined;
+        this.animationState = "idle";
+    this.currentDirection = undefined;
     // remove `show` when we transitiong fully to Popover API and get rid of 'legacy' mode
         this.show = false;
     // #endregion
     // #region Public Property API
     /** Aligns the popover to the left or right side of the control element. */    this.align = "left";
+    /**
+         * Controls whether the popover is animated when opening/closing.
+         * Default is true (animated). Set to false to disable animations.
+         * Animation is also disabled if the user has enabled prefers-reduced-motion.
+         */    this.animated = true;
     this.mode = null;
     this.handleMinHeight = () => {
       if (this.minHeight) {
-        d(this, "minHeight", "prop");
+        u(this, "minHeight", "prop");
       }
     };
     this.handlePopoverToggleEvent = t => {
-      b(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
+      n(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
         open: t.newState === "open"
       });
     };
@@ -658,34 +751,35 @@ const g = class {
     this.setPopoverAPICSSProperties = async () => {
       var t, e, i;
       const {controlElement: o, containerElement: s, currentDirection: n, isModule: r, align: a} = this;
-      const {top: c, bottom: h, left: p, right: d} = (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: c, left: p, right: d} = (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 : {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0
       };
       const u = p;
-      const f = ((i = window === null || window === void 0 ? void 0 : window.visualViewport) === null || i === void 0 ? void 0 : i.width) - d;
+      const m = ((i = window === null || window === void 0 ? void 0 : window.visualViewport) === null || i === void 0 ? void 0 : i.width) - d;
       if (a === "right") {
-        s.style.setProperty("--comp-pop-right", `${f - window.scrollX}px`);
+        s.style.setProperty("--comp-pop-right", `${m - window.scrollX}px`);
         s.style.setProperty("--comp-pop-left", "unset");
       } else {
         s.style.setProperty("--comp-pop-left", `${u + window.scrollX}px`);
         s.style.setProperty("--comp-pop-right", "unset");
       }
       if (this.block) s.style.setProperty("--comp-pop-width", `${(o === null || o === void 0 ? void 0 : o.offsetWidth) || 0}px`);
+      const b = r && f(this.hostElement);
       if (n === "up") {
-        if (r) {
-          s.style.setProperty("--comp-pop-bottom", `${window.innerHeight - c}px`);
+        if (r && !b) {
+          s.style.setProperty("--comp-pop-bottom", `${window.innerHeight - h}px`);
         } else {
-          s.style.setProperty("--comp-pop-bottom", `${window.innerHeight - c - window.scrollY}px`);
+          s.style.setProperty("--comp-pop-bottom", `${window.innerHeight - h - window.scrollY}px`);
         }
       }
       if (n === "down") {
-        if (r) {
-          s.style.setProperty("--comp-pop-top", `${h}px`);
+        if (r && !b) {
+          s.style.setProperty("--comp-pop-top", `${c}px`);
         } else {
-          s.style.setProperty("--comp-pop-top", `${h + window.scrollY}px`);
+          s.style.setProperty("--comp-pop-top", `${c + window.scrollY}px`);
         }
       }
       // Wait for one paint to prevent layout thrashing
@@ -743,15 +837,31 @@ const g = class {
     this.handleMinHeight();
   }
   async openChanged(t) {
-    b(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
+    n(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
       open: t
     });
     if (t) {
+      this.animationState = "opening";
       this.addViewportListeners();
       this.determinePopDirection();
     } else {
+      this.animationState = "closing";
       this.removeViewportListeners();
+      // Wait for close animation to complete
+            if (this.animated) {
+        await new Promise((t => {
+          const handleAnimationEnd = () => {
+            this.containerElement.removeEventListener("animationend", handleAnimationEnd);
+            t();
+          };
+          this.containerElement.addEventListener("animationend", handleAnimationEnd);
+        }));
+      } else {
+        // No animation, proceed immediately
+        await l();
+      }
       this.currentDirection = undefined;
+      this.animationState = "idle";
       if (this.mode === "legacy" || !this.supportsPopoverAPI) {
         this.show = false;
       } else {
@@ -791,7 +901,7 @@ const g = class {
     var t;
     window.addEventListener("resize", this.viewPortOrientationChanged);
     visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener("resize", this.viewPortChanged);
-    if (u(this.hostElement) && !f()) {
+    if (f(this.hostElement) && !m()) {
       window.addEventListener("scroll", this.viewPortChanged, {
         passive: true,
         capture: true
@@ -815,40 +925,41 @@ const g = class {
     if (o) o.style.maxHeight = null;
     await l();
     const {isModule: a} = this;
-    const {top: c, bottom: h} = (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 : {
+    const {top: h, bottom: c} = (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
     };
     let p;
     let d;
     let u;
-    if (a) {
+    const m = a && f(this.hostElement);
+    if (a && !m) {
       const {outletOffset: t = 0, innerHeight: e = window.innerHeight, top: o = 0, bottom: s = 0} = ((i = window.Tecton) === null || i === void 0 ? void 0 : i.platformDimensions) || {};
-      const n = window.innerHeight - h;
+      const n = window.innerHeight - c;
       // controlElement position visually on the page
-            const a = t > 0 ? c : c + t - o;
-      const l = t + h - o;
+            const a = t > 0 ? h : h + t - o;
+      const p = t + c - o;
       // visual space around the controlElement
-            const p = a;
-      const f = e - s - l;
+            const l = a;
+      const f = e - s - p;
       // calculate space above and below controlElement
-            const b = n < f;
-      d = p - r;
-      u = b ? n - r : f - r;
+            const m = n < f;
+      d = l - r;
+      u = m ? n - r : f - r;
     } else {
       p = window.innerHeight;
-      d = c - r;
-      u = p - h - r;
+      d = h - r;
+      u = p - c - r;
     }
-    const f = d > u ? "up" : "down";
+    const b = 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 = !o.style.getPropertyValue("--comp-pop-max-height") || this.orientationChanged;
+        const v = !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;
-    switch (v) {
+    const w = this.currentDirection || n || b;
+    switch (w) {
      case "up":
-      if (b) {
+      if (v) {
         const t = this.validatedMaxHeight || d;
         const e = Math.min(d, t);
         o.style.setProperty("--comp-pop-max-height", `${e}px`);
@@ -857,7 +968,7 @@ const g = class {
       break;
 
      case "down":
-      if (b) {
+      if (v) {
         const t = this.validatedMaxHeight || u;
         const e = Math.min(u, t);
         o.style.setProperty("--comp-pop-max-height", `${e}px`);
@@ -894,26 +1005,29 @@ const g = class {
   // #region Render Methods
   render() {
     const t = [ "container", this.currentDirection, this.align ];
+    if (m()) t.push("mobile");
     if (this.show) t.push("show");
     if (this.block) t.push("block");
     if (this.mode === "legacy") t.push("legacy");
-    return i("div", {
-      key: "137f3efb3f680289e9ccd9822b251b1c375e7bce",
+    if (this.animated && this.animationState === "opening") t.push("animating-open");
+    if (this.animated && this.animationState === "closing") t.push("animating-close");
+    return o("div", {
+      key: "b5166478bf50c313679ce71b381e6fe305e03446",
       ref: t => this.containerElement = t,
       class: t.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1,
       popover: "manual"
-    }, i("div", {
-      key: "8e7b89067164fa4fe2f96a832d88d80a56970ce7",
+    }, o("div", {
+      key: "9e939ece2775d98418f726066c9e7b1e7dcb7fde",
       ref: t => this.contentElement = t,
       class: "content"
-    }, i("slot", {
-      key: "e59f22f0aad5feac408f769abe8ce0583823199d"
+    }, o("slot", {
+      key: "dc16dc214cf71f050e49057f6f35271bb141b692"
     })));
   }
   get hostElement() {
-    return s(this);
+    return i(this);
   }
   static get watchers() {
     return {
@@ -923,8 +1037,8 @@ const g = class {
   }
 };
 
-g.style = m;
+k.style = g;
 
-export { w as q2_option_list, g as q2_popover };
-//# sourceMappingURL=q2-option-list.q2-popover.entry.esm.js.map
-//# sourceMappingURL=q2-option-list_2.entry.js.map
+export { b as click_elsewhere, w as q2_option_list, k as q2_popover };
+//# sourceMappingURL=click-elsewhere.q2-option-list.q2-popover.entry.esm.js.map
+//# sourceMappingURL=click-elsewhere_3.entry.js.map