q2-tecton-elements 1.72.0 → 1.73.1

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 }

package/dist/components/q2-radio-group.js

@@ -161,26 +161,26 @@ const u =  t(class extends o {
   render() {
     const t = this.label || this.optional || this.readonly, {hasError: o} = this, r = t && !this.hideLabel || o;
     return e(i, {
-      key: "25ec8b2089b54a5d968c3cfb99a1740c5dcbd0d0"
+      key: "0503a52d9cb4715cba418f445b708ad650aa5f1f"
     }, r && e("div", {
-      key: "1ff216a3e27dd4284dbb2f0300e25728f376df62",
+      key: "7236b03ea65a44bbfacf57944370236c9653d69c",
       class: "label-row"
     }, t && !this.hideLabel && e("div", {
-      key: "462c3833b83b524426ef2f937e0bf60c1cc841f7",
+      key: "fbede7f7cfbd2c0fe8364a77966009a2e14ede37",
       class: "group-legend"
     }, l(this)), o && e("q2-icon", {
-      key: "249e09338abad9e55fa472bcc9807ce2297cd4c3",
+      key: "b7d7456a6fd1e673d5799748a727db2babc3d2bf",
       type: "error",
       "test-id": "iconError"
     })), e("fieldset", {
-      key: "2085294bc3fc10c2f3cf20e6a1a0553cb0829e7d",
+      key: "cba87bdefb32eaa0cd6cc1760d874fd622146b5e",
       onChange: this.onInnerRadioChange,
       "aria-invalid": o ? "" + o : void 0
     }, t && e("legend", {
-      key: "ad2686c2e07d168a0cf1cbe0baf844121add6ecd",
+      key: "c4ff0e86435564ece7e468ecd7b0e373ae9fc078",
       class: "sr-only"
     }, l(this)), e("q2-resize-observer", {
-      key: "e183977bae5484f38356b17b274d6e3125d4d603",
+      key: "f3bfe6941b46da58433ed959017a4383c07ce16d",
       onTctResize: this.handleResize,
       disabled: this.tileLayout || "horizontal" !== this.orientation
     }, this.inputDom())));

package/dist/components/q2-radio.js

@@ -72,10 +72,10 @@ const s =  r(class extends a {
   // #region Render Methods
   render() {
     return t("div", {
-      key: "8fbe0ad9c8b0712fd51dbac67baae6209ebf2532",
+      key: "1aafcfbdb7d6e2863618d6741bc12491a109ec80",
       class: this.groupTileLayout ? "radio-tile" : "radio-container"
     }, t("input", {
-      key: "a9322154f304963731fb3d6ee99632c06938f27f",
+      key: "1989707753be2d6b8bc8c69098a5c9bf27af99b7",
       ref: r => this.inputField = r,
       class: "sr",
       id: this._id,
@@ -88,19 +88,19 @@ const s =  r(class extends a {
       onChange: this.inputChange,
       "test-id": "q2RadioInnerRadioBox"
     }), t("label", {
-      key: "234f95d4c4656e4325a15853bacf888d7a4ae446",
+      key: "93a6f7f8d718c8070c4d4d88c3b48905f518e166",
       htmlFor: this._id,
       class: this.hideLabel ? "label-hidden" : void 0,
       "test-id": "radioButton"
     }, !this.groupTileLayout && t("span", {
-      key: "ac98c34734a5e54b347cc2a48dc23d3ea2eb31ce",
+      key: "f351a1aef39845bbb1bbd360037d36486de27cd9",
       class: "radio-mark",
       "aria-hidden": "true"
     }), !this.hideLabel && t("div", {
-      key: "41dd2c195bc03dd8af8d5722e4aa2323cbeaab76",
+      key: "c9cb25115cffc72dfbb52024b6343f16a0744fbc",
       class: "label-content"
     }, this.label && l(this.label) || "", t("slot", {
-      key: "595014c6a32c2e98f7612dc51f0bd89579770988"
+      key: "8d63e148c83fb247b60b719d3de8627c327efaa4"
     }))));
   }
   get hostElement() {

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

@@ -118,7 +118,7 @@ const r =  e(class extends t {
   render() {
     const {shouldShow: e, displayedMessage: t} = this;
     return i(s, {
-      key: "7bcf2e8d9cb391ea43664b9cf01ec6d474a1743e"
+      key: "e32fc9201354f10456368f47c0a7b6e50fd3eeb2"
     }, e ? i("time", {
       dateTime: t
     }, t) : null);

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

@@ -61,7 +61,7 @@ const o =  e(class extends t {
   // #region Render Methods
   render() {
     return n("slot", {
-      key: "f5cc2cee6e979f047d3854d243ec3560ae5cb35d",
+      key: "78ea06c9c3963fe4fe145d66c42b546432d10e95",
       onSlotchange: this.handleSlotChange
     });
   }

package/dist/components/q2-search.js

@@ -47,7 +47,7 @@ const f =  t(class extends e {
     /**
          * Hides the field's `<label>` element from view.
          * @warning
-         * Only use when a visible label is impractical.
+         * Hides the label visually. `label` text is still required for screenreader compliance.
          */
     this.hideLabel = !1, 
     /**
@@ -618,20 +618,20 @@ const f =  t(class extends e {
   }
   render() {
     return s(o, {
-      key: "78ce7b735d59271600debb18ab2f0f5cf315e465"
+      key: "4b3787554c37521bc3467345cdd1d733cffba3a5"
     }, s("div", {
-      key: "d3e9a713581842cc62969a0df9556733edf6e378",
+      key: "696caa142cffecf1e0d62afafd826dce37f75512",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), s("click-elsewhere", {
-      key: "6912af1d8f31af8de7c7ffb28786756819c57afc",
+      key: "f8b493ec8f7da09fad48f9fa30f0e9be7fbaedf4",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.onClickElsewhere
     }, s("q2-input", {
-      key: "95a5397765aab6d3279b3d81cc31215f235aefc2",
+      key: "44e0ad4b7825ac319dd4277ccb93d4dd66acef12",
       ref: t => this.inputField = t,
       class: "q2-search-input",
       label: this.label && h(this.label) || "",

package/dist/components/q2-section.js

@@ -8,9 +8,9 @@ import { d as l } from "./q2-btn2.js";
 
 import { d as b } from "./q2-icon2.js";
 
-import { d as m } from "./q2-loading2.js";
+import { d as f } from "./q2-loading2.js";
 
-const v =  t(class extends e {
+const m =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = i(this, "change", 7), 
     this.tctChange = i(this, "tctChange", 7), this.contentId = "content", this.titleId = "title", 
@@ -127,29 +127,29 @@ const v =  t(class extends e {
     i && (a ? e.push("is-closed") : s && e.push("is-transitioning"));
     const o = !this.hasYieldedHeader && !!this.label;
     return n("section", {
-      key: "1614590b2058a69ebaee5a59455ec5c8bfa30bde",
+      key: "5adb22a7e6cf098fa3cf2325c945c6aa1c20b2d5",
       class: "wrapper"
     }, n("header", {
-      key: "e52e3037b59ac3443e812299114850dd6ed8810b",
+      key: "c04df6d07756c27374e4be85ad88848a0c1ac897",
       class: t ? "has-header" : ""
     }, n("div", {
-      key: "2066c8ff48cb4c6445068207533b3b6b808e9dd7",
+      key: "8cd09e8bf367a7510b91106b8ebd4f419faff861",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, o && n("h2", {
-      key: "a159d8b6bc29e10711b603aef2ce6c1419f4b7ae",
+      key: "195e1523e68c83e294bd92d617b8c4d44e679494",
       class: "title"
     }, h(this.label)), n("div", {
-      key: "829f24123711551a6e3792cb66a2759386d6bec8",
+      key: "e493986ee113d44bf74b11116003939f3db24bd7",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, n("slot", {
-      key: "22c2518c55bf5f6160917beea8ab2c523bf76169",
+      key: "44f2dc2ca76acfd800a1435608a75bf6e3258d37",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && n("q2-btn", {
-      key: "950c09ccfad31453393a52cd21321338d53ac03b",
+      key: "b2602555b9282c8149780f65d2fbaa65febc1f50",
       label: h(this.label || "tecton.element.section.defaultToggleLabel"),
       ariaExpanded: "" + !!this.expanded,
       ariaControls: this.contentId,
@@ -157,10 +157,10 @@ const v =  t(class extends e {
       "hide-label": !0,
       onClick: this.onHeaderClick
     }, n("q2-icon", {
-      key: "a962ea4f0f5c0ba761d3c3eafd31a16f0338c8da",
+      key: "62728524b58cf5cf7aa2531df1218d3bf0b40b0a",
       type: "chevron-up"
     }))), n("div", {
-      key: "45a1762386b7bf88fcaa50c18c1ac059b93d2e59",
+      key: "13ef854a01937880007fb4021b1528c1b83fe937",
       class: e.join(" "),
       id: this.contentId,
       "aria-labelledby": this.titleId,
@@ -170,12 +170,12 @@ const v =  t(class extends e {
         height: this.contentHeight
       }
     }, n("div", {
-      key: "80508c39608fa4bf3d6f1911ff592f04e5115014",
+      key: "866d8b0301a9c5979f5b3bd31086d25f73373709",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, n("slot", {
-      key: "c88062ea0a59b62143e22c8492a8d06826a27a83",
+      key: "36c97155aa106dc1587537066e031c7d6c032295",
       ref: t => this.contentSlot = t
     }))));
   }
@@ -214,12 +214,12 @@ const v =  t(class extends e {
   } ]
 } ]);
 
-const f = v, defineCustomElement = function() {
+const v = m, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-section", "q2-btn", "q2-icon", "q2-loading" ].forEach((t => {
     switch (t) {
      case "q2-section":
-      customElements.get(a(t)) || customElements.define(a(t), v);
+      customElements.get(a(t)) || customElements.define(a(t), m);
       break;
 
      case "q2-btn":
@@ -231,9 +231,9 @@ const f = v, defineCustomElement = function() {
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || m();
+      customElements.get(a(t)) || f();
     }
   }));
 };
 
-export { f as Q2Section, defineCustomElement }
+export { v as Q2Section, defineCustomElement }

package/dist/components/q2-select2.js

@@ -258,7 +258,7 @@ const O =  t(class extends e {
     this.inputKeydownHandler(t);
   }
   popoverStateChanged({detail: {open: t}}) {
-    this.open !== t && (this.open = t);
+    this.open !== t && (this.open = t, t || this.focusInput());
   }
   handleTctClick() {
     const {name: t, version: e} = u(), i = Number(e.split(".")[0]);
@@ -640,7 +640,7 @@ const O =  t(class extends e {
   }
   render() {
     return s("click-elsewhere", {
-      key: "5c9a6d681aedcebfbadd6b1249f7bcd96c27809c",
+      key: "c5ee7401b7dc4350fb01992e9a8a76e6700cb63c",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.clickedElsewhere