q2-tecton-elements 1.71.1 → 1.72.0

package/dist/components/q2-stepper-pane.js

@@ -2,7 +2,7 @@ import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, Ho
 
 import { b as r } from "./component.js";
 
-import { c, n as h, l as d } from "./index2.js";
+import { c as d, n as c, l as h } from "./index2.js";
 
 import { m as l } from "./mirror-emit.js";
 
@@ -18,7 +18,7 @@ const p =  t(class extends e {
   // #endregion
   // #region Component Lifecycle Events
   connectedCallback() {
-    this.hostElement.id || (this.hostElement.id = "step-" + c());
+    this.hostElement.id || (this.hostElement.id = "step-" + d());
   }
   disconnectedCallback() {
     var t;
@@ -51,7 +51,7 @@ const p =  t(class extends e {
     });
   }
   checkForActiveChildren() {
-    this.showWithChildren && h((() => {
+    this.showWithChildren && c((() => {
       setTimeout((() => {
         this.isChildActive = !!this.hostElement.querySelector("[slot='children'] > q2-stepper-pane[is-active]");
       }));
@@ -75,25 +75,29 @@ const p =  t(class extends e {
     }, s(a, {
       key: "0241a9ad68973eea81c961070d6171dab3241f79"
     }, s("div", {
-      key: "25e9a406b8c0672eec836920706d44ed53906e1d",
-      "aria-label": t && d(t),
+      key: "6678cb4a7e65a3a4341ff552682c1011c588108b",
+      role: "group",
+      "aria-labelledby": "pane-label",
       tabindex: "0",
       hidden: !(e || this.isChildActive && this.showWithChildren)
     }, s("slot", {
-      key: "00f456ab21d2ecf58946de5df397bb3c81c2a749"
+      key: "0f8d339f894bdaa55bd5bdf94b1220da7a083dde"
     })), s("div", {
-      key: "bdac4c2caf9b9bf5a6280258475afa552e578e7e",
+      key: "51e3934ad791e45486360ab8c6509b68e3a15d9d",
       hidden: !0
+    }, s("span", {
+      key: "96fe08c826d87f86559fe2dbb586914b4065eb40",
+      id: "pane-label"
     }, s("slot", {
-      key: "2ede75ad70c10eda1f8c6de4556bccc9c66e8b97",
+      key: "b4cab1594ae047f032fbaa67f75167e31cc4cdf7",
       name: "label",
       onSlotchange: () => this.contentChange.emit()
-    }), s("slot", {
-      key: "990f2d44a0f9cb0437b63f3570a94874752a94da",
+    }, t && h(t))), s("slot", {
+      key: "473cf6b9bc3ef5995d11e46502db1321d59baa5e",
       name: "description",
       onSlotchange: () => this.contentChange.emit()
     })), s("slot", {
-      key: "1f12d65608f73a3737abb7f987cab300ec1c9856",
+      key: "76cb24680ed1ec8a49956f888accf3fd07da7fa0",
       name: "children"
     })));
   }

package/dist/components/q2-stepper-vertical.js

@@ -301,15 +301,15 @@ const v =  t(class extends e {
   }
   render() {
     return r(i, {
-      key: "eab8d8816aebfb5aa104a17b75dc0e8b4ed4ce68"
+      key: "9d40414e7b510493b0236568c4d6231eeacdbd80"
     }, r("ul", {
-      key: "f155624641313e8375e6ee448fed150ae0c62cf1",
+      key: "b3a444833439d59be874a2bf04833f8df0ff107f",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), r("div", {
-      key: "1ff078e00dcb1e4c861bc691ccc31ec5c1436fac",
+      key: "34f3841d0eb0c5fe96670ac3d5e87244682ace74",
       role: "list"
     }, r("slot", {
-      key: "adf07ae0725ccc7c1ce149052f2325e6bfc01677"
+      key: "e224e413162cb28eab4ec0e8b51367ed3b83fa0b"
     })));
   }
   get hostElement() {

package/dist/components/q2-surface.js

@@ -69,14 +69,14 @@ const n =  r(class extends a {
   // #region Render Methods
   render() {
     return t(o, {
-      key: "992667ac1d625dff77a01d06d058865f99d8d190"
+      key: "8dd96991bc74e2157dc256f21eb4953eaeffdd46"
     }, t("div", {
-      key: "d58162c346c58a2cc21a4334c08b6cc4a53ed2e0",
+      key: "a5b315fd3e6dd999cd704b3fd2c9de5ffb139033",
       class: "container",
       role: this.clickable ? "button" : void 0,
       tabIndex: this.clickable ? 0 : void 0
     }, t("slot", {
-      key: "b70930390799484c71da93d1f801ecc681d168c6"
+      key: "4897bfe06a95bf14eddf2bb964bf4a27ed96798a"
     })));
   }
   get hostElement() {

package/dist/components/q2-tab-container.js

@@ -2,9 +2,9 @@ import { proxyCustomElement as t, HTMLElement as a, createEvent as e, h as i, Fr
 
 import { c as n, l as s, o as c, i as l } from "./index2.js";
 
-import { m as b } from "./mirror-emit.js";
+import { m as d } from "./mirror-emit.js";
 
-import { h, f as d } from "./component.js";
+import { h as b, f as h } from "./component.js";
 
 import { d as v } from "./q2-badge2.js";
 
@@ -14,7 +14,7 @@ import { d as g } from "./q2-icon2.js";
 
 import { d as u } from "./q2-loading2.js";
 
-const m =  t(class extends a {
+const f =  t(class extends a {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = e(this, "change", 7), 
     this.settled = e(this, "settled", 7), this.tctChange = e(this, "tctChange", 7), 
@@ -103,7 +103,7 @@ const m =  t(class extends a {
       this.checkScrollState();
     }, this.onTabClick = t => {
       const a = t.target.closest('button[role="tab"]').dataset.value;
-      this.value === a || b(this, [ "change", "tctChange" ], {
+      this.value === a || d(this, [ "change", "tctChange" ], {
         value: a
       });
     }, this.onTabKeyDown = t => {
@@ -139,7 +139,7 @@ const m =  t(class extends a {
 
        case "Space":
        case "Enter":
-        t.preventDefault(), b(this, [ "change", "tctChange" ], {
+        t.preventDefault(), d(this, [ "change", "tctChange" ], {
           value: a
         });
       }
@@ -174,7 +174,7 @@ const m =  t(class extends a {
     this.narrowViewportMedia && this.narrowViewportListener && this.narrowViewportMedia.removeEventListener("change", this.narrowViewportListener);
   }
   componentWillLoad() {
-    h(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]) || d(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]);
+    b(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]) || h(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]);
     const t = new MutationObserver((() => this.updateTabs()));
     t.observe(this.hostElement, {
       childList: !0,
@@ -287,50 +287,50 @@ const m =  t(class extends a {
   render() {
     const t = "vertical" === this.computedOrientation;
     return i(r, {
-      key: "710b889bd81a28f6ba7c0deb43abe49a269baec4"
+      key: "684e234955e0d7f9b929a1e80e323ba62db4d066"
     }, i("div", {
-      key: "444efee6412d2440c99bd1e9b123fe385f2453a5",
+      key: "92ea060ada2cc956817f4eb9cb97d0f110c5032a",
       class: "tab-container"
     }, this.scrollEnabled && i(r, {
-      key: "56c9916fb99dd3434a8305721d03e85c0f5fb370"
+      key: "b43a4ff0510de5adfefde8f5184ab5f3f1d95563"
     }, i("div", {
-      key: "c506eb6690b60194b50171ad5139cc65b4fabedd",
+      key: "3daed974f567574741534b4c39c6fa0ddb1c7f58",
       class: "gradient-left",
       hidden: !this.showScrollBack
     }), i("div", {
-      key: "7af01eb18190e0af6fb80364fb73dcf6145d979d",
+      key: "36266d6970a75fff03e538c12951a530220b2756",
       class: "gradient-right",
       hidden: !this.showScrollForward
     }), i("q2-btn", {
-      key: "8cb5f49e48c119d32b196e3ecc7e8a018acc7aa0",
+      key: "7c5b35fee0bbd981520f55fe99fc53143be7376c",
       class: "btn-left",
       hidden: !this.showScrollBack,
       onTctClick: () => this.onScrollBtnClick("back")
     }, i("q2-icon", {
-      key: "65f3caea2251c7ce96861718df064f230ec6e02e",
+      key: "0759d5d77d603074acc21bd9a29e4db50f0474a2",
       type: t ? "chevron-up" : "chevron-left",
       label: t ? "scroll up" : "scroll left"
     })), i("q2-btn", {
-      key: "07b833fe0e6b3030255374e4dd323fc99379a293",
+      key: "419c43832886d9aae9b63eba545ffb8122f862b6",
       class: "btn-right",
       hidden: !this.showScrollForward,
       onTctClick: () => this.onScrollBtnClick("forward")
     }, i("q2-icon", {
-      key: "e446b55822239e657ab10c50694a9756ec8b030b",
+      key: "4148a86411c5859b0253da31439ff90ad78490b3",
       type: t ? "chevron-down" : "chevron-right",
       label: t ? "scroll down" : "scroll right"
     }))), i("ul", {
-      key: "20d4f371b80b2515b762e80b88574938783e9252",
+      key: "fdd72d9ba1d932497b5d7cd9e14d926fe1e92f72",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       class: this.noPrint ? "no-print" : null,
       role: "tablist",
       "aria-orientation": this.computedOrientation
     }, this.tabs.map(((t, a) => this.renderTab(t, a))))), i("div", {
-      key: "9eaba5d408629dc548a9c57428b801293f642172",
+      key: "e9d90030fcc43f17a43aa2e4a306e3489b4c4110",
       class: "tab-content"
     }, i("slot", {
-      key: "811737fa0e22c994299c9164a6401209e6ecf418",
+      key: "130ddf5f14ec801e09471b9cf4ab080e4bf5fc27",
       onSlotchange: () => this.onSlotChange()
     })));
   }
@@ -374,12 +374,12 @@ const m =  t(class extends a {
   } ]
 } ]);
 
-const f = m, defineCustomElement = function() {
+const m = f, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-tab-container", "q2-badge", "q2-btn", "q2-icon", "q2-loading" ].forEach((t => {
     switch (t) {
      case "q2-tab-container":
-      customElements.get(o(t)) || customElements.define(o(t), m);
+      customElements.get(o(t)) || customElements.define(o(t), f);
       break;
 
      case "q2-badge":
@@ -400,4 +400,4 @@ const f = m, defineCustomElement = function() {
   }));
 };
 
-export { f as Q2TabContainer, defineCustomElement }
+export { m as Q2TabContainer, defineCustomElement }

package/dist/components/q2-tab-pane.js

@@ -20,7 +20,7 @@ const r =  e(class extends t {
   // #region Render Methods
   render() {
     return i("div", {
-      key: "1957cbeca0ca1f0b5f840701286ebeb6b69565ce",
+      key: "2ff20db182ab3bf252df52bbcb7be2b39893d17c",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: "tab-pane" + (this.selected ? "" : " hidden"),
       role: "tabpanel",
@@ -28,7 +28,7 @@ const r =  e(class extends t {
       "aria-hidden": "" + !this.selected,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, i("slot", {
-      key: "6772ac75d219ebc30209907468a9fb801cd5db0d"
+      key: "871922c3065609934e6a6a8c62000c84551a612a"
     }));
   }
   get hostElement() {

package/dist/components/q2-tag2.js

@@ -151,9 +151,9 @@ const f =  t(class extends o {
     this.optionCount && o.push("has-options");
     const e = this.optionCount > 0;
     return r(i, {
-      key: "b7b199109ef756942f6cf76aff904a21ba406998"
+      key: "da6dc23ff4f250b18242a49db02eccc16210b043"
     }, r("click-elsewhere", {
-      key: "f4a5ec911c582d480e5d7d91638d681ba6c054c8",
+      key: "ee1da442ffd5aa53e55ae95f95b3ac51e2f5c71e",
       onChange: this.onClickElsewhere
     }, e ? r(a, null, r("button", {
       class: "tag-wrapper",
@@ -180,7 +180,7 @@ const f =  t(class extends o {
     }, r("slot", {
       name: "decorator"
     }), l(this.label))), e && r("q2-popover", {
-      key: "046a9aae077ed9800b081ce70aa5d03f0d919cff",
+      key: "578989b60b19f6f5e01c1cbc49a83e87fc74c5a9",
       ref: t => this.popoverElement = t,
       controlElement: this.dropdownBtn,
       open: this.open,
@@ -189,7 +189,7 @@ const f =  t(class extends o {
       direction: this.popoverDirection,
       align: this.popoverAlignment
     }, r("q2-option-list", {
-      key: "63899f97a13db69ed8776214ca6670e825663c5a",
+      key: "d21abcd1fe11241e14b4f411d9559c12c139c18a",
       id: "option-list",
       ref: t => this.optionList = t,
       onChange: this.handleChange,
@@ -198,7 +198,7 @@ const f =  t(class extends o {
       label: l("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": !0
     }, r("slot", {
-      key: "40fa7c27a8b27ae2c5f894bbe1ae6e51ab1b55f0"
+      key: "d46ec7dad47e40cec883205d6fb2424abcdd1038"
     })))));
   }
   get hostElement() {

package/dist/components/tecton-tab-pane.js

@@ -15,7 +15,8 @@ const a =  e(class extends t {
   }
   componentWillRender() {
     const e = this.hostElement.shadowRoot.querySelector(".loading-wrapper");
-    /* istanbul ignore next */    e && (e.style.minHeight = this.minHeight, e.hidden = !this.selected);
+    /* istanbul ignore next */    e && (e.querySelector(".q2-row") && (e.style.minHeight = this.minHeight), 
+    e.hidden = !this.selected);
   }
   componentDidRender() {
     const e = this.hostElement.shadowRoot.querySelector("form");
@@ -41,7 +42,7 @@ const a =  e(class extends t {
   // #region Render Methods
   render() {
     return n("div", {
-      key: "68c7250777ec0c700107df4997634d4aee8f8e91",
+      key: "6c0524ab1981900cc7a37803fd9426c6397049c4",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: "tab-pane" + (this.selected ? "" : " hidden"),
       role: "tabpanel",
@@ -49,12 +50,12 @@ const a =  e(class extends t {
       "aria-hidden": "" + !this.selected,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, this.selected && void 0 !== this.provided && !this.provided && n("div", {
-      key: "7b8c74b691fc1c599766900125e09afe79e53859"
+      key: "10cc2712e1ccefa6a9bb3b657830636da4d81980"
     }, n("slot", {
-      key: "bbf7c58bef21ab334059655e958e976b9bdf327e",
+      key: "cde7112d4035c6f118e9c50b0fe5d9d91c70ee7d",
       name: "loading-wrapper"
     }), n("iframe", {
-      key: "6a262f757dd78294fcf49242b337b02c13842ee8",
+      key: "851972991feb3b8f6c7f569e92ff2e624d94e221",
       hidden: !0,
       name: this.moduleId,
       scrolling: "no",
@@ -77,11 +78,11 @@ const a =  e(class extends t {
       value: e.value,
       name: e.key
     })))) : ""), n("div", {
-      key: "d9be64623c99011b7f30256d0abfaeab23f72c00",
+      key: "741c6f2c89dc15493f165428929f589425aa4d75",
       class: "slot-wrapper",
       hidden: this.selected && void 0 !== this.provided && !this.provided
     }, n("slot", {
-      key: "a1a3a9772b2875c7d4ab510e9014d99b6e036ad3"
+      key: "17100ec2dc0ea2d1e27628d36e9e6e1139f293a9"
     })));
   }
   get hostElement() {

package/dist/esm/click-elsewhere_3.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-Cqkz7Bnm.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 import { b as hasValidAncestor } from './component-DaQM9u3s.js';
-import { l as loc, n as nextPaint, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, q as handleDeprecationWarning, x as isInFixedPositionContext, y as isInScrollableContainer, g as isMobile } from './index-Cps4jSQM.js';
+import { l as loc, n as nextPaint, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, q as handleDeprecationWarning, x as isInFixedPositionContext, y as isInScrollableContainer, g as isMobile } from './index-DJw6Feh0.js';
 
 const ClickElsewhere = class {
     constructor(hostRef) {
@@ -693,7 +693,7 @@ const Q2OptionList = class {
 };
 Q2OptionList.style = q2OptionListCss();
 
-const q2PopoverCss = () => `*{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: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 q2PopoverCss = () => `*{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}`;
 
 const Q2Popover = class {
     constructor(hostRef) {
@@ -782,10 +782,10 @@ const Q2Popover = class {
             const isScrollableIframe = isModule && isInScrollableContainer(this.hostElement);
             if (currentDirection === 'up') {
                 if (isModule && !isScrollableIframe) {
-                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);
+                    containerElement.style.setProperty('--comp-pop-top', `${controlTop}px`);
                 }
                 else {
-                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop - scrollY}px`);
+                    containerElement.style.setProperty('--comp-pop-top', `${controlTop + scrollY}px`);
                 }
             }
             if (currentDirection === 'down') {
@@ -952,7 +952,7 @@ const Q2Popover = class {
         this.containerElement.style.removeProperty('--comp-pop-position');
     }
     async determinePopDirection() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const { containerElement, controlElement, providedDirection, displayBuffer } = this;
         if (containerElement)
             containerElement.style.maxHeight = null;
@@ -985,9 +985,10 @@ const Q2Popover = class {
                 : viewableSpaceBelow - displayBuffer;
         }
         else {
-            windowHeight = window.innerHeight;
-            maxSpaceAbove = controlTop - displayBuffer;
-            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;
+            const { height = window.innerHeight, offsetTop = 0 } = (_d = window.visualViewport) !== null && _d !== void 0 ? _d : {};
+            windowHeight = height;
+            maxSpaceAbove = controlTop - offsetTop - displayBuffer;
+            maxSpaceBelow = offsetTop + windowHeight - controlBottom - displayBuffer;
         }
         const directionWithMostSpace = maxSpaceAbove > maxSpaceBelow ? '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)
@@ -1055,7 +1056,7 @@ const Q2Popover = class {
             containerClasses.push('animating-open');
         if (this.animationState === 'closing')
             containerClasses.push('animating-close');
-        return (h("div", { key: '4fe0c06793144eb83fe53cfc568af81226f78345', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: 'ed5d7c9f5efba8b129d580e68ab6692849332cf4', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '4c5d5b9682014b2e94b153ca33a3e0c4dd58d6bb' }))));
+        return (h("div", { key: '680ad8a90ef98d3a8c2c1f5ba2284d7cdfc3d2a6', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: 'dfe4d6f72df0dfa029d9296e27ceb60a75131d83', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '22144006d226160fe790d156255d54e24bcad8ce' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/{index-Cps4jSQM.js → index-DJw6Feh0.js}

@@ -200,7 +200,7 @@ function renderLabel(target) {
     return (h("label", { htmlFor: target.inputId, class: labelClasses.join(' ') }, h("slot", { name: "label" }, label ? loc(label) : undefined, helpText)));
 }
 function hasSlotContent(target, slotName) {
-    return target.querySelector(`[slot="${slotName}"]`) !== null;
+    return Array.from(target.children).some(child => child.getAttribute('slot') === slotName);
 }
 function handleAriaLabel(target) {
     const { ariaLabel } = target;