q2-tecton-elements 1.72.0 → 1.73.0

package/dist/components/q2-pagination.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as n, transformTag as a } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as a, transformTag as n } from "@stencil/core/internal/client";
 
 import { n as s, o, i as r, a as c, l } from "./index2.js";
 
@@ -12,9 +12,9 @@ import { d as g } from "./q2-btn2.js";
 
 import { d as u } from "./q2-icon2.js";
 
-import { d as m } from "./q2-input2.js";
+import { d as f } from "./q2-input2.js";
 
-import { d as f } from "./q2-loading2.js";
+import { d as m } from "./q2-loading2.js";
 
 import { d as b } from "./q2-option2.js";
 
@@ -73,8 +73,8 @@ const x =  t(class extends e {
     var e;
     if (this.disabled) return;
     if (!r(t, this.hostElement)) return;
-    const {isFullViewHidden: i, containerElement: n, inputField: a} = this;
-    i ? null === (e = n.querySelector("q2-btn:not([disabled])")) || void 0 === e || e.focus() : a.focus();
+    const {isFullViewHidden: i, containerElement: a, inputField: n} = this;
+    i ? null === (e = a.querySelector("q2-btn:not([disabled])")) || void 0 === e || e.focus() : n.focus();
   }
   // #endregion
   // #region Public Methods API
@@ -196,8 +196,8 @@ const x =  t(class extends e {
     return (null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length) > 1;
   }
   get totalPages() {
-    const {pagesOnly: t, totalWithDefault: e, perPageWithDefault: i, pages: n} = this;
-    return t && n && !isNaN(parseInt("" + n)) ? n : Math.ceil(e / i);
+    const {pagesOnly: t, totalWithDefault: e, perPageWithDefault: i, pages: a} = this;
+    return t && a && !isNaN(parseInt("" + a)) ? a : Math.ceil(e / i);
   }
   get totalWithDefault() {
     return this.total || 0;
@@ -212,7 +212,7 @@ const x =  t(class extends e {
   renderPerPage() {
     const t = this.perPageIncrementsArray.sort(((t, e) => t - e));
     return (void 0 === this.perPage || isNaN(this.perPage)) && (this.perPage = t[0]), 
-    this.perPageIncrements = `[${t.join(",")}]`, n("q2-select", {
+    this.perPageIncrements = `[${t.join(",")}]`, a("q2-select", {
       ref: t => this.perPageSelect = t,
       onChange: t => t.stopImmediatePropagation(),
       onTctChange: t => {
@@ -220,14 +220,14 @@ const x =  t(class extends e {
       },
       value: this.perPageIncrementsArray.includes(this.perPage) ? "" + this.perPage : void 0,
       disabled: this.disabled
-    }, t.map((t => n("q2-option", {
+    }, t.map((t => a("q2-option", {
       value: "" + t,
       display: `${l("tecton.element.pagination.view")} ${t}`
     }, `${l("tecton.element.pagination.view")} ${t}`))));
   }
   render() {
     var t;
-    const {pagesOnly: e, recordsOnly: i, isFullViewHidden: a, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: c, currentRange: p, nextRange: h, prevRange: d, showPerPageSelect: g, disabled: u} = this, m = c < 2, f = c === o;
+    const {pagesOnly: e, recordsOnly: i, isFullViewHidden: n, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: c, currentRange: p, nextRange: h, prevRange: d, showPerPageSelect: g, disabled: u} = this, f = c < 2, m = c === o;
     let b = l("tecton.element.pagination.goToNext"), v = l("tecton.element.pagination.goToPrevious");
     return e ? (v = l("tecton.element.pagination.goToPages", {
       next: c - 1,
@@ -243,13 +243,13 @@ const x =  t(class extends e {
       range: h,
       recordType: s.toLowerCase(),
       total: r
-    })), n("nav", {
-      key: "c42b191eccb70b9e3c684843cebf9f6b06f3c3b3",
+    })), a("nav", {
+      key: "647c141a9df399b3764fdc90c5ae05f113e0019d",
       class: this.containerClasses.join(" "),
       ref: t => this.containerElement = t,
       "aria-label": l("tecton.element.pagination.title")
-    }, n("div", {
-      key: "eb03cdc19938adac4a5c44887fa7d9853c9b89ab",
+    }, a("div", {
+      key: "fd595002af27dd639391665573433783342d2aee",
       class: "description",
       "test-id": "description"
     }, e ? l("tecton.element.pagination.pages", {
@@ -259,48 +259,48 @@ const x =  t(class extends e {
       range: p,
       recordType: s.toLowerCase(),
       total: r.toLocaleString()
-    })), n("div", {
-      key: "0e9a0bcfa6545b08843423378066989cf96ad18e",
+    })), a("div", {
+      key: "da4c7137ed566532a9471a7b83a63c49c51c8e82",
       class: "controls"
-    }, n("div", {
-      key: "4ea3b0a64165885dfd1bd525527e2617e4f4d748",
+    }, a("div", {
+      key: "ef59aadb7b6cfb82707ffb1ee9e1626428a84801",
       class: "btn-group"
-    }, n("q2-btn", {
-      key: "72d72c7b974ecbca50c4259cca5028515786af5b",
+    }, a("q2-btn", {
+      key: "e5d551764bec56fed3dc34684c4ff2cdfadd95ea",
       ref: t => this.firstPageBtn = t,
       label: l("tecton.element.pagination.goToFirstPage"),
-      disabled: u || m,
-      hidden: a,
+      disabled: u || f,
+      hidden: n,
       onTctClick: () => this.handlePageChange(1),
       "test-id": "firstPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "26f5f8e8cf23a6d924b4a01796827fb62017809d",
+    }, a("q2-icon", {
+      key: "7423721c4c3082b8f0fdea5d6bde9fc62640fa24",
       type: "chevron-double-left"
-    })), n("q2-btn", {
-      key: "5f7845c5917137131cc6703bb59d90c842e32a7e",
+    })), a("q2-btn", {
+      key: "90b3544e9983fa652f225eda9d18d08883b31c39",
       ref: t => this.prevPageBtn = t,
       label: v,
-      disabled: u || m,
+      disabled: u || f,
       onTctClick: () => this.handlePageChange(c - 1),
       "test-id": "prevPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "e02ccf51de21789099e2b254019f962dbb5011dc",
+    }, a("q2-icon", {
+      key: "6535f2c3745421cbf1dd5750e3ab8d08288bc148",
       type: "chevron-left"
-    }))), n("div", {
-      key: "ca201f7a4382e7f3835093c4c3877f7e2a0b5150",
+    }))), a("div", {
+      key: "d4a581982a62f360e5b693a110a7d75eaf0ba24c",
       class: "input-display",
-      hidden: a
-    }, n("span", {
-      key: "c690830341a15c25e4ad5a2d2a524d876c9f7cdb",
+      hidden: n
+    }, a("span", {
+      key: "45a28afc71ee038d829cbe64550bf929210002a9",
       "aria-hidden": "true"
-    }, l("tecton.element.pagination.page")), n("div", {
-      key: "7d08062d6cd495d4025a82413b347ed87915cbce",
+    }, l("tecton.element.pagination.page")), a("div", {
+      key: "ba5df7f89aed5be2f882057d8cf344981e3f1127",
       class: "input-wrapper",
       onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
-    }, n("q2-input", {
-      key: "e30795721d66d75dd5f349ad4d6d3ffda6023820",
+    }, a("q2-input", {
+      key: "686c5c8891bd64a40ba9abe8436475bf3ef8fd38",
       ref: t => this.inputField = t,
       type: "number",
       value: "" + c,
@@ -316,39 +316,39 @@ const x =  t(class extends e {
       "test-id": "pageInput",
       current: "page",
       disabled: u
-    })), n("span", {
-      key: "e2f1e51306298ddf428fd4e9fa665b58b2535fc8",
+    })), a("span", {
+      key: "59853a0308d1f97b6722f40c29219d887842c54c",
       "aria-hidden": "true"
-    }, l("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), n("div", {
-      key: "c7a095aaa30743441c0c4d22f55e94801b3a823f",
+    }, l("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), a("div", {
+      key: "17fa28deff49d5a3a28b6d66b5639428a309057a",
       class: "btn-group"
-    }, n("q2-btn", {
-      key: "c52d8837ec35b128a9d3f9c87766ed770edc9600",
+    }, a("q2-btn", {
+      key: "0e5eca8dc228a8285015d5941d9c4e44af5e5353",
       ref: t => this.nextPageBtn = t,
       label: b,
-      disabled: u || f,
+      disabled: u || m,
       onTctClick: () => this.handlePageChange(c + 1),
       "test-id": "nextPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "d1d802bddb426070fa1ca92a7937b8405949f01c",
+    }, a("q2-icon", {
+      key: "9a42a4961ac7efd40c176145a39f0c63540daf14",
       type: "chevron-right"
-    })), n("q2-btn", {
-      key: "357f5bf5426e6c0004b737238a3c66697fc6a672",
+    })), a("q2-btn", {
+      key: "fe0c41536c25d7deffa26fdab4f91405e5b197d6",
       ref: t => this.lastPageBtn = t,
       label: "tecton.element.pagination.goToLastPage",
-      disabled: u || f,
-      hidden: a,
+      disabled: u || m,
+      hidden: n,
       onTctClick: () => this.handlePageChange(o),
       "test-id": "lastPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "1be92d6fa9252168baf63420271c8b8a77f41d92",
+    }, a("q2-icon", {
+      key: "5beccc87ad5ef95350cb21d969b15c0996911126",
       type: "chevron-double-right"
-    })))), n("div", {
-      key: "96ca4bc582b1dcb830bad146fbf1233f2549f256",
+    })))), a("div", {
+      key: "d60b56b2f8173ea2a6fcf3cf4fd1b5f2807fbc5c",
       class: "per-page",
-      hidden: a || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
+      hidden: n || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
     }, g && this.renderPerPage()));
   }
   get hostElement() {
@@ -420,47 +420,47 @@ const q = x, defineCustomElement = function() {
   [ "q2-pagination", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading", "q2-option", "q2-option-list", "q2-popover", "q2-select" ].forEach((t => {
     switch (t) {
      case "q2-pagination":
-      customElements.get(a(t)) || customElements.define(a(t), x);
+      customElements.get(n(t)) || customElements.define(n(t), x);
       break;
 
      case "click-elsewhere":
-      customElements.get(a(t)) || h();
+      customElements.get(n(t)) || h();
       break;
 
      case "q2-badge":
-      customElements.get(a(t)) || d();
+      customElements.get(n(t)) || d();
       break;
 
      case "q2-btn":
-      customElements.get(a(t)) || g();
+      customElements.get(n(t)) || g();
       break;
 
      case "q2-icon":
-      customElements.get(a(t)) || u();
+      customElements.get(n(t)) || u();
       break;
 
      case "q2-input":
-      customElements.get(a(t)) || m();
+      customElements.get(n(t)) || f();
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || f();
+      customElements.get(n(t)) || m();
       break;
 
      case "q2-option":
-      customElements.get(a(t)) || b();
+      customElements.get(n(t)) || b();
       break;
 
      case "q2-option-list":
-      customElements.get(a(t)) || v();
+      customElements.get(n(t)) || v();
       break;
 
      case "q2-popover":
-      customElements.get(a(t)) || y();
+      customElements.get(n(t)) || y();
       break;
 
      case "q2-select":
-      customElements.get(a(t)) || k();
+      customElements.get(n(t)) || k();
     }
   }));
 };

package/dist/components/q2-pill.js

@@ -183,7 +183,9 @@ const f =  t(class extends o {
     c(t, this.hostElement) && this.primaryBtn.focus();
   }
   async popoverStateHandler({detail: {open: t}}) {
-    this.open !== t && (this.open = t), t || this.setOptionListActiveElement(null);
+    var o;
+    this.open !== t && (this.open = t, t || (this.setOptionListActiveElement(null), 
+    null === (o = this.primaryBtn) || void 0 === o || o.focus()));
   }
   // #endregion
   // #region Public Methods API
@@ -292,19 +294,19 @@ const f =  t(class extends o {
   render() {
     const {optionCount: t, active: o, open: i} = this, {text: r, truncatedText: a} = this.buttonContent, n = [ "btn-wrapper" ];
     return (t || o) && n.push("has-icon"), t && n.push("has-options"), e("click-elsewhere", {
-      key: "5bbfce776dcd2ef3ac7097b37fd2df039d47c21f",
+      key: "8cba59cde3746d0397305512334eb56357e9e5d4",
       onChange: this.onClickElsewhere
     }, e("div", {
-      key: "9d8d7a4b6afb1d931d762a0e656509a2036180ba",
+      key: "391da54f9fd870e223765e6266291dff9775abe6",
       class: n.join(" ")
     }, e("div", {
-      key: "5bbf245bd78d2ed075b9a16cc46396528f20b823",
+      key: "06431fd76c0a9d30833756407c89ff59609bc3a3",
       class: "btn-height-wrapper",
       ref: t => this.primaryBtnWrapper = t,
       onClick: this.handleWrapperClick,
       tabIndex: -1
     }, e("button", {
-      key: "494b1555d332a62c8a2946da260a9bb5f26849d5",
+      key: "609557b9206c91511e78e26c990230e61f7e5c19",
       class: "btn-primary",
       "test-id": "btn-control",
       type: "button",
@@ -321,10 +323,10 @@ const f =  t(class extends o {
       "aria-pressed": t ? void 0 : "" + !!o,
       "aria-describedby": t ? "option-description" : void 0
     }, e("slot", {
-      key: "d26426863ec1dadfbf2049ca6b85dcdb28875858",
+      key: "e1f4c57b7526f714cf0242e101ec0f5c39ebafa5",
       name: "decorator"
     }), a)), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && e("q2-popover", {
-      key: "1b06b432ce4ab98a1d1d0b70acb7074849e94999",
+      key: "2777b45efbd94516a633ca4ff1e2d6a452ecbd81",
       ref: t => this.popoverElement = t,
       controlElement: this.primaryBtn,
       open: this.open,
@@ -334,20 +336,20 @@ const f =  t(class extends o {
       align: this.popoverAlignment,
       onFocusout: this.handleFocusOut
     }, e("div", {
-      key: "ea87e923fe84d94fc1f9a1b72b9fd1deef5cb5ad",
+      key: "54d2c1c8814be9265b4ed8092bd3360da76cc2b0",
       class: "popover-content"
     }, e("div", {
-      key: "53b50f438af20d4474b42511ee334391ff429fa0",
+      key: "fb95b6f0ab78119f0bf944fa67ec0bcf391088dc",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleSlotKeydown
     }, e("slot", {
-      key: "0996ca12d288c696601919df48ef6c8784bbf8d4",
+      key: "8e522c96fa1241e7c05fbc989d59f71ec2bc1d98",
       name: "popover-top"
     })), e("q2-option-list", {
-      key: "9faef4049f040e8c22b46107a7a618224cd0e82c",
+      key: "5e7a827ac08395399e0b04fa9074f5b6a3fa1c48",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -358,16 +360,16 @@ const f =  t(class extends o {
       onPopoverState: this.onPopoverState,
       label: l("tecton.element.optionList.label", [ this.optionListLabel ])
     }, e("slot", {
-      key: "8f54a5eb6670b9bffb2062eeb9815834b2aa8de7"
+      key: "4197780a058b3937ac748b53aef6afc5eabd8c7a"
     })), e("div", {
-      key: "1e61e07bb5c6bdcdfd68080cc606bb1a42f48d79",
+      key: "78992c83515dcfe6acbf7e09a5efced2d65c1903",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleSlotKeydown
     }, e("slot", {
-      key: "48a8d60e3eae7de823d1e55ab9153dedda9a739d",
+      key: "553f959ec8b866111b2e5c5f9090d8ddee5fd208",
       name: "popover-bottom"
     })))));
   }

package/dist/components/q2-popover2.js

@@ -1,10 +1,10 @@
-import { proxyCustomElement as o, HTMLElement as t, createEvent as i, h as e, transformTag as r } from "@stencil/core/internal/client";
+import { proxyCustomElement as o, HTMLElement as t, createEvent as i, h as e, transformTag as n } from "@stencil/core/internal/client";
 
-import { j as n, w as p, u as s, v as a, d as l } from "./index2.js";
+import { f as r, w as s, u as p, v as a, d as l } from "./index2.js";
 
-import { m as c } from "./mirror-emit.js";
+import { m as h } from "./mirror-emit.js";
 
-const h =  o(class extends t {
+const c =  o(class extends t {
   constructor(o) {
     super(), !1 !== o && this.__registerHost(), this.__attachShadow(), this.popoverStateChanged = i(this, "popoverStateChanged", 7), 
     this.tctPopoverStateChanged = i(this, "tctPopoverStateChanged", 7), 
@@ -12,6 +12,7 @@ const h =  o(class extends t {
          * The number of pixels to leave between the popover and the edge of the viewport
          */
     this.displayBuffer = 10, this.orientationChanged = !1, this.pendingAnimationResolve = null, 
+    this.platformScrollUnsubscribe = null, 
     // #endregion
     // #region State Properties
     this.animationState = "idle", this.currentDirection = void 0, 
@@ -20,10 +21,17 @@ const h =  o(class extends t {
     // #endregion
     // #region Public Property API
     /** Aligns the popover to the left or right side of the control element. */
-    this.align = "left", this.mode = null, this.handleMinHeight = () => {
-      this.minHeight && n(this, "minHeight", "prop");
+    this.align = "left", this.mode = null, this.handleInsideScroll = o => {
+      const {containerElement: t} = this;
+      t && (t.scrollHeight > t.clientHeight || o.preventDefault());
+    }, this.handleMinHeight = () => {
+      this.minHeight && r(this, "minHeight", "prop");
+    }, this.handleOutsideScroll = o => {
+      this.open && (o.composedPath().includes(this.hostElement) || (this.open = !1));
+    }, this.handlePlatformScroll = () => {
+      this.open && (this.open = !1);
     }, this.handlePopoverToggleEvent = o => {
-      c(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
+      h(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
         open: "open" === o.newState
       });
     }, this.setAbsoluteCSSProperties = async () => {
@@ -36,26 +44,26 @@ const h =  o(class extends t {
           t.style.setProperty("--comp-pop-bottom", `${e}px`);
         }
         // Wait for one paint to prevent layout thrashing
-                await p(), this.containerElement && t.style.setProperty("--comp-pop-opacity", "1");
+                await s(), this.containerElement && t.style.setProperty("--comp-pop-opacity", "1");
       }
     }, this.setPopoverAPICSSProperties = async () => {
       var o, t, i;
-      const {controlElement: e, containerElement: r, currentDirection: n, isModule: l, align: c} = this;
-      if (!r) return;
-      const {top: h, bottom: d, left: m, right: v} = null !== (t = null === (o = null == e ? void 0 : e.getBoundingClientRect) || void 0 === o ? void 0 : o.call(e)) && void 0 !== t ? t : {
+      const {controlElement: e, containerElement: n, currentDirection: r, isModule: l, align: h} = this;
+      if (!n) return;
+      const {top: c, bottom: d, left: m, right: v} = null !== (t = null === (o = null == e ? void 0 : e.getBoundingClientRect) || void 0 === o ? void 0 : o.call(e)) && void 0 !== t ? t : {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0
-      }, u = m, w = (null === (i = null === window || void 0 === window ? void 0 : window.visualViewport) || void 0 === i ? void 0 : i.width) - v, g = s(e), b = g ? 0 : window.scrollX, f = g ? 0 : window.scrollY;
-      r.style.setProperty("--comp-pop-position", g ? "fixed" : "absolute"), "right" === c ? (r.style.setProperty("--comp-pop-right", w - b + "px"), 
-      r.style.setProperty("--comp-pop-left", "unset")) : (r.style.setProperty("--comp-pop-left", `${u + b}px`), 
-      r.style.setProperty("--comp-pop-right", "unset")), this.block && r.style.setProperty("--comp-pop-width", `${(null == e ? void 0 : e.offsetWidth) || 0}px`);
+      }, u = m, w = (null === (i = null === window || void 0 === window ? void 0 : window.visualViewport) || void 0 === i ? void 0 : i.width) - v, b = p(e), g = b ? 0 : window.scrollX, f = b ? 0 : window.scrollY;
+      n.style.setProperty("--comp-pop-position", b ? "fixed" : "absolute"), "right" === h ? (n.style.setProperty("--comp-pop-right", w - g + "px"), 
+      n.style.setProperty("--comp-pop-left", "unset")) : (n.style.setProperty("--comp-pop-left", `${u + g}px`), 
+      n.style.setProperty("--comp-pop-right", "unset")), this.block && n.style.setProperty("--comp-pop-width", `${(null == e ? void 0 : e.offsetWidth) || 0}px`);
       const x = l && a(this.hostElement);
-      "up" === n && (l && !x ? r.style.setProperty("--comp-pop-top", `${h}px`) : r.style.setProperty("--comp-pop-top", `${h + f}px`)), 
-      "down" === n && (l && !x ? r.style.setProperty("--comp-pop-top", `${d}px`) : r.style.setProperty("--comp-pop-top", `${d + f}px`)), 
+      "up" === r && (l && !x ? n.style.setProperty("--comp-pop-top", `${c}px`) : n.style.setProperty("--comp-pop-top", `${c + f}px`)), 
+      "down" === r && (l && !x ? n.style.setProperty("--comp-pop-top", `${d}px`) : n.style.setProperty("--comp-pop-top", `${d + f}px`)), 
       // Wait for one paint to prevent layout thrashing
-      await p(), this.containerElement && r.style.setProperty("--comp-pop-opacity", "1");
+      await s(), this.containerElement && n.style.setProperty("--comp-pop-opacity", "1");
     }, this.viewPortChanged = () => {
       this.open && this.determinePopDirection();
     }, this.viewPortOrientationChanged = () => {
@@ -77,7 +85,7 @@ const h =  o(class extends t {
   componentDidLoad() {
     var o;
     this.handleMinHeight(), this.supportsPopoverAPI && (null === (o = this.containerElement) || void 0 === o || o.addEventListener("toggle", this.handlePopoverToggleEvent)), 
-    this.open && this.determinePopDirection();
+    this.open && (this.addViewportListeners(), this.determinePopDirection());
   }
   // #endregion
   // #region Listeners
@@ -101,7 +109,7 @@ const h =  o(class extends t {
   }
   async openChanged(o) {
     var t;
-    if (c(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
+    if (h(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
       open: o
     }), o) this.animationState = "opening", this.addViewportListeners(), this.determinePopDirection(); else {
       if (this.animationState = "closing", this.removeViewportListeners(), 
@@ -118,7 +126,7 @@ const h =  o(class extends t {
       if (!this.containerElement) return;
       if (this.open) return;
       this.currentDirection = void 0, this.animationState = "idle", "legacy" !== this.mode && this.supportsPopoverAPI ? null === (t = this.containerElement) || void 0 === t || t.hidePopover() : this.show = !1, 
-      await p(), this.clearCSSProperties();
+      await s(), this.clearCSSProperties();
     }
   }
   // #endregion
@@ -147,13 +155,21 @@ const h =  o(class extends t {
     return isNaN(o) ? void 0 : o;
   }
   addViewportListeners() {
-    var o;
-    window.addEventListener("resize", this.viewPortOrientationChanged), null === visualViewport || void 0 === visualViewport || visualViewport.addEventListener("resize", this.viewPortChanged), 
+    var o, t, i, e, n, r, s, p, h, c, d;
+    window.addEventListener("resize", this.viewPortOrientationChanged), null === (t = null === (o = window.visualViewport) || void 0 === o ? void 0 : o.addEventListener) || void 0 === t || t.call(o, "resize", this.viewPortChanged), 
     a(this.hostElement) && !l() && window.addEventListener("scroll", this.viewPortChanged, {
       passive: !0,
       capture: !0
-    }), null === (o = null === screen || void 0 === screen ? void 0 : screen.orientation) || void 0 === o || o.addEventListener("orientationchange", this.viewPortOrientationChanged), 
-    window.addEventListener("orientationchange", this.viewPortOrientationChanged);
+    }), null === (n = null === (e = null === (i = window.screen) || void 0 === i ? void 0 : i.orientation) || void 0 === e ? void 0 : e.addEventListener) || void 0 === n || n.call(e, "orientationchange", this.viewPortOrientationChanged), 
+    window.addEventListener("orientationchange", this.viewPortOrientationChanged), l() || window.addEventListener("scroll", this.handleOutsideScroll, {
+      passive: !0,
+      capture: !0
+    }), null === (r = this.containerElement) || void 0 === r || r.addEventListener("wheel", this.handleInsideScroll, {
+      passive: !1
+    }), null === (s = this.containerElement) || void 0 === s || s.addEventListener("touchmove", this.handleInsideScroll, {
+      passive: !1
+    }), null === (p = this.platformScrollUnsubscribe) || void 0 === p || p.call(this), 
+    this.platformScrollUnsubscribe = null !== (d = null === (c = null === (h = window.TectonElements) || void 0 === h ? void 0 : h.platformScrollChanged) || void 0 === c ? void 0 : c.call(h, this.handlePlatformScroll)) && void 0 !== d ? d : null;
   }
   clearCSSProperties() {
     this.containerElement && (this.containerElement.style.removeProperty("--comp-pop-max-height"), 
@@ -164,49 +180,54 @@ const h =  o(class extends t {
   }
   async determinePopDirection() {
     var o, t, i, e;
-    const {containerElement: r, controlElement: n, providedDirection: s, displayBuffer: l} = this;
-    if (r && (r.style.maxHeight = null), await p(), !this.containerElement) return;
-    const {isModule: c} = this, {top: h, bottom: d} = null !== (t = null === (o = null == n ? void 0 : n.getBoundingClientRect) || void 0 === o ? void 0 : o.call(n)) && void 0 !== t ? t : {
+    const {containerElement: n, controlElement: r, providedDirection: p, displayBuffer: l} = this;
+    if (n && (n.style.maxHeight = null), await s(), !this.containerElement) return;
+    const {isModule: h} = this, {top: c, bottom: d} = null !== (t = null === (o = null == r ? void 0 : r.getBoundingClientRect) || void 0 === o ? void 0 : o.call(r)) && void 0 !== t ? t : {
       top: 0,
       bottom: 0
     };
     let m, v, u;
-    const w = c && a(this.hostElement);
-    if (c && !w) {
-      const {outletOffset: o = 0, innerHeight: t = window.innerHeight, top: e = 0, bottom: r = 0} = (null === (i = window.Tecton) || void 0 === i ? void 0 : i.platformDimensions) || {}, n = window.innerHeight - d, p = t - r - (o + d - e);
-      v = (o > 0 ? h : h + o - e) - l, u = n < p ? n - l : p - l;
+    const w = h && a(this.hostElement);
+    if (h && !w) {
+      const {outletOffset: o = 0, innerHeight: t = window.innerHeight, top: e = 0, bottom: n = 0} = (null === (i = window.Tecton) || void 0 === i ? void 0 : i.platformDimensions) || {}, r = window.innerHeight - d, s = t - n - (o + d - e);
+      v = (o > 0 ? c : c + o - e) - l, u = r < s ? r - l : s - l;
     } else {
       const {height: o = window.innerHeight, offsetTop: t = 0} = null !== (e = window.visualViewport) && void 0 !== e ? e : {};
-      m = o, v = h - t - l, u = t + m - d - l;
+      m = o, v = c - t - l, u = t + m - d - l;
     }
-    const g = v > u ? "up" : "down", b = !(null == r ? void 0 : r.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
+    const b = v > u ? "up" : "down", g = !(null == n ? void 0 : n.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
     // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
         // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
     this.orientationChanged = !1;
-    switch (this.currentDirection || s || g) {
+    switch (this.currentDirection || p || b) {
      case "up":
-      if (b && r) {
+      if (g && n) {
         const o = this.validatedMaxHeight || v, t = Math.min(v, o);
-        r.style.setProperty("--comp-pop-max-height", `${t}px`);
+        n.style.setProperty("--comp-pop-max-height", `${t}px`);
       }
       this.setDirectionAndShow("up");
       break;
 
      case "down":
-      if (b && r) {
+      if (g && n) {
         const o = this.validatedMaxHeight || u, t = Math.min(u, o);
-        r.style.setProperty("--comp-pop-max-height", `${t}px`);
+        n.style.setProperty("--comp-pop-max-height", `${t}px`);
       }
       this.setDirectionAndShow("down");
     }
   }
   removeViewportListeners() {
-    var o;
-    window.removeEventListener("resize", this.viewPortOrientationChanged), null === visualViewport || void 0 === visualViewport || visualViewport.removeEventListener("resize", this.viewPortChanged), 
+    var o, t, i, e, n, r, s, p;
+    window.removeEventListener("resize", this.viewPortOrientationChanged), null === (t = null === (o = window.visualViewport) || void 0 === o ? void 0 : o.removeEventListener) || void 0 === t || t.call(o, "resize", this.viewPortChanged), 
     window.removeEventListener("scroll", this.viewPortChanged, {
       capture: !0
-    }), null === (o = null === screen || void 0 === screen ? void 0 : screen.orientation) || void 0 === o || o.removeEventListener("orientationchange", this.viewPortOrientationChanged), 
-    window.removeEventListener("orientationchange", this.viewPortOrientationChanged);
+    }), null === (n = null === (e = null === (i = window.screen) || void 0 === i ? void 0 : i.orientation) || void 0 === e ? void 0 : e.removeEventListener) || void 0 === n || n.call(e, "orientationchange", this.viewPortOrientationChanged), 
+    window.removeEventListener("orientationchange", this.viewPortOrientationChanged), 
+    window.removeEventListener("scroll", this.handleOutsideScroll, {
+      capture: !0
+    }), null === (r = this.containerElement) || void 0 === r || r.removeEventListener("wheel", this.handleInsideScroll), 
+    null === (s = this.containerElement) || void 0 === s || s.removeEventListener("touchmove", this.handleInsideScroll), 
+    null === (p = this.platformScrollUnsubscribe) || void 0 === p || p.call(this), this.platformScrollUnsubscribe = null;
   }
   setDirectionAndShow(o) {
     var t;
@@ -223,18 +244,18 @@ const h =  o(class extends t {
     return l() && o.push("mobile"), this.show && o.push("show"), this.block && o.push("block"), 
     "legacy" === this.mode && o.push("legacy"), "opening" === this.animationState && o.push("animating-open"), 
     "closing" === this.animationState && o.push("animating-close"), e("div", {
-      key: "680ad8a90ef98d3a8c2c1f5ba2284d7cdfc3d2a6",
+      key: "f608766723c6ae6737181318b5baf8b52ed7fc0f",
       ref: o => this.containerElement = o,
       class: o.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1,
       popover: "manual"
     }, e("div", {
-      key: "dfe4d6f72df0dfa029d9296e27ceb60a75131d83",
+      key: "477f1a209cf4abc984a82324d0c6fc07ede82160",
       ref: o => this.contentElement = o,
       class: "content"
     }, e("slot", {
-      key: "22144006d226160fe790d156255d54e24bcad8ce"
+      key: "5b48ff13907b952a2cdcffc1b6e271e4982c78ad"
     })));
   }
   get hostElement() {
@@ -251,7 +272,7 @@ const h =  o(class extends t {
     };
   }
   static get style() {
-    return '*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.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:var(--comp-pop-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, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);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)}: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:var(--comp-pop-top);bottom:unset;translate:0 calc(-100% - var(--app-scale-2x, 10px))}: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}';
+    return '*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.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:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;overscroll-behavior:contain;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);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)}: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:var(--comp-pop-top);bottom:unset;translate:0 calc(-100% - var(--app-scale-2x, 10px))}: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}';
   }
 }, [ 257, "q2-popover", {
   align: [ 513 ],
@@ -279,8 +300,8 @@ const h =  o(class extends t {
 function defineCustomElement() {
   if ("undefined" == typeof customElements) return;
   [ "q2-popover" ].forEach((o => {
-    if ("q2-popover" === o) customElements.get(r(o)) || customElements.define(r(o), h);
+    if ("q2-popover" === o) customElements.get(n(o)) || customElements.define(n(o), c);
   }));
 }
 
-export { h as Q, defineCustomElement as d }
+export { c as Q, defineCustomElement as d }