q2-tecton-elements 1.25.1 → 1.26.0

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

@@ -2,7 +2,7 @@ import { h, Fragment, } from '@stencil/core';
 import { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2RadioGroup {
   constructor() {
-    this.id = `radio-group-${createGuid()}`;
+    this._id = `radio-group-${createGuid()}`;
     this.onMutationObserved = () => {
       this.valueUpdated(this.value);
       this.nameUpdated();
@@ -33,8 +33,7 @@ export class Q2RadioGroup {
   /////// LIFECYCLE HOOK ///////
   componentWillLoad() {
     this.onMutationObserved();
-    if (this.tilelayout)
-      this.tileLayout = this.tilelayout;
+    this.handleDeprecatedTilelayout(this.tilelayout);
   }
   componentDidLoad() {
     const observer = new MutationObserver(this.onMutationObserved);
@@ -50,7 +49,7 @@ export class Q2RadioGroup {
   }
   nameUpdated() {
     this.radioElements.forEach(radio => {
-      radio.name = this.name || this.id;
+      radio.name = this.name || this._id;
     });
   }
   disabledUpdated() {
@@ -62,8 +61,11 @@ export class Q2RadioGroup {
     const readonly = this.readonly;
     this.radioElements.forEach(radio => (radio.groupReadonly = readonly));
   }
-  tilelayoutUpdated(tilelayout) {
+  handleDeprecatedTilelayout(tilelayout) {
+    if (typeof tilelayout !== 'boolean')
+      return;
     this.tileLayout = tilelayout;
+    this.tilelayout = undefined;
   }
   tileLayoutUpdated(tileLayout) {
     this.radioElements.forEach(radio => {
@@ -254,7 +256,7 @@ export class Q2RadioGroup {
       },
       "tileLayout": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -307,7 +309,7 @@ export class Q2RadioGroup {
       },
       "tilelayout": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -316,7 +318,10 @@ export class Q2RadioGroup {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
           "text": ""
         },
         "attribute": "tilelayout",
@@ -358,7 +363,7 @@ export class Q2RadioGroup {
         "methodName": "readonlyUpdated"
       }, {
         "propName": "tilelayout",
-        "methodName": "tilelayoutUpdated"
+        "methodName": "handleDeprecatedTilelayout"
       }, {
         "propName": "tileLayout",
         "methodName": "tileLayoutUpdated"

package/dist/collection/components/q2-select/index.js

@@ -121,7 +121,6 @@ export class Q2Select {
     this.label = undefined;
     this.hideLabel = undefined;
     this.value = undefined;
-    this.ariaLabel = undefined;
     this.selectedOptions = [];
     this.disabled = false;
     this.readonly = false;
@@ -135,6 +134,7 @@ export class Q2Select {
     this.optional = false;
     this.placeholder = undefined;
     this.hoist = !!((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.useActionSheets);
+    this.ariaLabel = undefined;
     this.open = false;
     this.showSelected = false;
     this.searchText = '';
@@ -187,7 +187,10 @@ export class Q2Select {
   get popoverMinHeight() {
     const { minRows } = this;
     const firstOption = this.hostElement.querySelector('q2-option:not([hidden])');
-    const minHeight = firstOption ? window.getComputedStyle(firstOption).minHeight : '44px';
+    let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;
+    // Safari doesn't return a min-height for non-visible items
+    if (!minHeight || minHeight === '0px')
+      minHeight = '44px';
     return minRows * parseInt(minHeight);
   }
   get selectedDisplay() {
@@ -527,23 +530,6 @@ export class Q2Select {
         "attribute": "value",
         "reflect": false
       },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "aria-label",
-        "reflect": true
-      },
       "selectedOptions": {
         "type": "unknown",
         "mutable": true,
@@ -769,6 +755,26 @@ export class Q2Select {
         "attribute": "hoist",
         "reflect": false,
         "defaultValue": "!!window.Tecton?.useActionSheets"
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
       }
     };
   }

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

@@ -19,11 +19,13 @@ export class Q2TabContainer {
       });
     };
     this.setTabs = () => {
-      this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription }) => ({
+      this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({
         label: (label && loc(label)) || '',
         value,
         badgeCount,
         badgeDescription,
+        badgeTheme,
+        badgeStatus,
       }));
     };
     this.onTabClick = (event) => {
@@ -214,7 +216,17 @@ export class Q2TabContainer {
     return (h("li", { role: "presentation" }, h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected))));
   }
   generateTabWithBadge(tab, isSelected) {
-    return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${tab.badgeDescription || loc('tecton.element.tab.pane.new')}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: isSelected ? 'primary' : undefined })));
+    let theme;
+    if (!tab.badgeStatus && isSelected)
+      theme = tab.badgeTheme || 'primary';
+    let description;
+    if (tab.badgeDescription)
+      description = loc(tab.badgeDescription);
+    else if (tab.badgeStatus)
+      description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);
+    else
+      description = loc('tecton.element.tab.pane.new');
+    return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
   }
   static get is() { return "q2-tab-container"; }
   static get encapsulation() { return "shadow"; }
@@ -251,8 +263,8 @@ export class Q2TabContainer {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'main' | 'section'",
+          "resolved": "\"main\" | \"section\"",
           "references": {}
         },
         "required": false,
@@ -285,8 +297,8 @@ export class Q2TabContainer {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'alt' | undefined",
+          "resolved": "\"alt\"",
           "references": {}
         },
         "required": false,

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

@@ -7,6 +7,8 @@ export class Q2TabPane {
     this.selected = undefined;
     this.badgeCount = undefined;
     this.badgeDescription = undefined;
+    this.badgeTheme = undefined;
+    this.badgeStatus = undefined;
     this.index = undefined;
     this.guid = undefined;
   }
@@ -132,6 +134,50 @@ export class Q2TabPane {
         "attribute": "badge-description",
         "reflect": true
       },
+      "badgeTheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Q2Badge['theme']",
+          "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+          "references": {
+            "Q2Badge": {
+              "location": "import",
+              "path": "../q2-badge"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "badge-theme",
+        "reflect": true
+      },
+      "badgeStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Q2Badge['status']",
+          "resolved": "\"alert\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "Q2Badge": {
+              "location": "import",
+              "path": "../q2-badge"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "badge-status",
+        "reflect": true
+      },
       "index": {
         "type": "number",
         "mutable": false,
@@ -190,6 +236,15 @@ export class Q2TabPane {
     return [{
         "propName": "badgeCount",
         "methodName": "badgeObserver"
+      }, {
+        "propName": "badgeDescription",
+        "methodName": "badgeObserver"
+      }, {
+        "propName": "badgeTheme",
+        "methodName": "badgeObserver"
+      }, {
+        "propName": "badgeStatus",
+        "methodName": "badgeObserver"
       }];
   }
 }

package/dist/collection/components/q2-tooltip/index.js

@@ -1,4 +1,5 @@
 import { h, Fragment } from '@stencil/core';
+import { isEventFromElement, overrideFocus } from 'src/utils';
 export class Q2Tooltip {
   constructor() {
     this.animationEndCount = 0;
@@ -7,9 +8,14 @@ export class Q2Tooltip {
     this.multiline = undefined;
     this.persistent = undefined;
     this.immediate = undefined;
+    this.focusable = false;
     this.position = 'n';
     this.focusClass = undefined;
   }
+  /// LifeCycle Hooks ///
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   /// Getters ///
   get shouldBeVisible() {
     if (this.persistent)
@@ -58,21 +64,30 @@ export class Q2Tooltip {
         break;
     }
   }
-  focusHandler() {
+  focusCaptureHandler() {
     this.checkFocusClass();
   }
+  focusHandler(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    if (!this.focusable)
+      return;
+    this.tooltipElement.focus();
+  }
   focusOutHandler() {
     if (this.shouldBeVisible)
       return;
     if (this.focusClass === 'has-generic-focus')
       this.focusClass = 'has-generic-focus-out';
+    else
+      this.focusClass = null;
   }
   render() {
     const { focusClass } = this;
     const classes = ['tooltip'];
     if (focusClass)
       classes.push(focusClass);
-    return this.label ? (h(Fragment, null, h("div", { ref: el => (this.tooltipElement = el), class: classes.join(' '), "aria-label": this.label, onAnimationEnd: () => this.animationEndHandler(), role: "tooltip" }, h("slot", null)))) : (h("slot", null));
+    return this.label ? (h(Fragment, null, h("div", { tabindex: this.focusable ? 0 : undefined, ref: el => (this.tooltipElement = el), class: classes.join(' '), "aria-label": this.label, onAnimationEnd: () => this.animationEndHandler(), role: "tooltip", "test-id": "tooltipContainer" }, h("slot", null)))) : (h("slot", null));
   }
   static get is() { return "q2-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -173,6 +188,24 @@ export class Q2Tooltip {
         "attribute": "immediate",
         "reflect": true
       },
+      "focusable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "focusable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "position": {
         "type": "string",
         "mutable": false,
@@ -208,10 +241,16 @@ export class Q2Tooltip {
         "passive": false
       }, {
         "name": "focus",
-        "method": "focusHandler",
+        "method": "focusCaptureHandler",
         "target": undefined,
         "capture": true,
         "passive": false
+      }, {
+        "name": "focus",
+        "method": "focusHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }, {
         "name": "focusout",
         "method": "focusOutHandler",

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

@@ -19,6 +19,8 @@ export class TectonTabPane {
     this.minHeight = undefined;
     this.badgeCount = undefined;
     this.badgeDescription = undefined;
+    this.badgeTheme = undefined;
+    this.badgeStatus = undefined;
     this.authPayload = undefined;
     this.showForm = undefined;
     this._showForm = undefined;
@@ -278,6 +280,50 @@ export class TectonTabPane {
         "attribute": "badge-description",
         "reflect": true
       },
+      "badgeTheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Q2Badge['theme']",
+          "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+          "references": {
+            "Q2Badge": {
+              "location": "import",
+              "path": "../q2-badge"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "badge-theme",
+        "reflect": true
+      },
+      "badgeStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Q2Badge['status']",
+          "resolved": "\"alert\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "Q2Badge": {
+              "location": "import",
+              "path": "../q2-badge"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "badge-status",
+        "reflect": true
+      },
       "authPayload": {
         "type": "unknown",
         "mutable": false,
@@ -340,6 +386,15 @@ export class TectonTabPane {
     return [{
         "propName": "badgeCount",
         "methodName": "badgeObserver"
+      }, {
+        "propName": "badgeDescription",
+        "methodName": "badgeObserver"
+      }, {
+        "propName": "badgeTheme",
+        "methodName": "badgeObserver"
+      }, {
+        "propName": "badgeStatus",
+        "methodName": "badgeObserver"
       }, {
         "propName": "selected",
         "methodName": "selectedObserver"

package/dist/components/index14.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { r as resizeIframe, w as waitForNextPaint } from './index15.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}:host{display:block;width:100%}:host([align=right]){display:block;position:absolute;right:0;text-align:end;left:unset}.container{display:none;overflow:hidden;opacity:0;height:0;position:absolute;top:var(--tct-popover-top, var(--t-popover-top, initial));visibility:hidden;background-color:var(--tct-popover-background-color, var(--t-popover-background-color, var(--app-white, #ffffff)));color:var(--tct-popover-text-color, var(--t-popover-text-color, var(--t-text, #4d4d4d)));z-index:var(--tct-popover-z-index, var(--t-popover-z-index, 100));width:max-content;min-width:var(--tct-popover-min-width, var(--t-popover-min-width, 135px));box-shadow:var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));text-align:start;left:0;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));max-height:var(--comp-pop-max-height);--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, 3px)));--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}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([block]) .container{left:unset;right:unset;width:100%;min-width:unset}:host([align=right]) .container{right:0;text-align:end;left:unset}.container :host([open]){display:block}:host([open]) .container.show{height:auto;overflow:auto;opacity:1;visibility:visible}.container.up{bottom:var(--comp-pop-offset)}click-elsewhere{position:relative;display:block}.content{height:auto}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}:host{display:block;width:100%}:host([align=right]){display:block;position:absolute;right:0;text-align:end;left:unset}.container{display:none;overflow:hidden;opacity:0;height:0;position:absolute;top:var(--tct-popover-top, var(--t-popover-top, initial));visibility:hidden;background-color:var(--tct-popover-background-color, var(--t-popover-background-color, var(--app-white, #ffffff)));color:var(--tct-popover-text-color, var(--t-popover-text-color, var(--t-text, #4d4d4d)));z-index:var(--tct-popover-z-index, var(--t-popover-z-index, 100));width:max-content;min-width:var(--tct-popover-min-width, var(--t-popover-min-width, 135px));box-shadow:var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));text-align:start;left:0;transition:opacity var(--app-tween-1, 0.2s ease), max-height var(--app-tween-1, 0.2s ease);border-radius:var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));max-height:var(--comp-pop-max-height);--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, 3px)));--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}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([block]) .container{left:unset;right:unset;width:100%;min-width:unset}:host([align=right]) .container{right:0;text-align:end;left:unset}.container :host([open]){display:block}:host([open]) .container.show{height:auto;overflow:auto;opacity:1;visibility:visible}.container.up{bottom:var(--comp-pop-offset)}click-elsewhere{position:relative;display:block}.content{height:auto}";
 
 const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -10,13 +10,19 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.popoverStateChanged = createEvent(this, "popoverStateChanged", 7);
     this.scheduledAfterRender = [];
+    /// Helpers ///
+    this.viewPortChanged = () => {
+      if (!this.open)
+        return;
+      this.determinePopDirection();
+    };
     this.direction = undefined;
     this.align = undefined;
     this.open = undefined;
     this.block = undefined;
     this.minHeight = undefined;
     this.controlElement = undefined;
-    this.privateDirection = 'down';
+    this.currentDirection = undefined;
     this.show = false;
   }
   /// Lifecycle hooks ///
@@ -30,6 +36,9 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.scheduledAfterRender = [];
     }, 25);
   }
+  disconnectedCallback() {
+    this.removeViewportListeners();
+  }
   /// Methods ///
   async toggle() {
     this.open = !this.open;
@@ -39,9 +48,18 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.popoverStateChanged.emit({ open });
     this.scheduledAfterRender.push(resizeIframe);
     if (open) {
+      this.addViewportListeners();
       this.determinePopDirection();
     }
     else {
+      this.removeViewportListeners();
+      // Reset currentDirection after close transition completes
+      this.containerElement.addEventListener('transitionend', () => {
+        if (this.open)
+          return;
+        this.currentDirection = undefined;
+        this.containerElement.style.removeProperty('--comp-pop-max-height');
+      }, { once: true });
       this.show = false;
     }
   }
@@ -53,17 +71,24 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.open = open;
     event.stopPropagation();
   }
+  addViewportListeners() {
+    // window.visualViewport.addEventListener('scroll', this.viewPortChanged);
+    window.visualViewport.addEventListener('resize', this.viewPortChanged);
+  }
+  removeViewportListeners() {
+    // window.visualViewport.removeEventListener('scroll', this.viewPortChanged);
+    window.visualViewport.removeEventListener('resize', this.viewPortChanged);
+  }
   async setDirectionAndShow(direction) {
     if (direction === 'up') {
       this.determinePopOffset();
     }
-    this.privateDirection = direction;
+    this.currentDirection = direction;
     this.show = true;
   }
-  /// Helpers ///
   async determinePopDirection() {
-    var _a, _b, _c, _d, _e;
-    const { containerElement, contentElement, direction, controlElement } = this;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { containerElement, contentElement, direction, controlElement, currentDirection } = this;
     if (containerElement)
       containerElement.style.maxHeight = null;
     // If direction defined, use it
@@ -78,32 +103,46 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       height: 0,
     };
     const contentHeight = contentElement.clientHeight;
-    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) || 0;
-    const innerHeight = ((_e = (_d = window.Tecton) === null || _d === void 0 ? void 0 : _d.platformDimensions) === null || _e === void 0 ? void 0 : _e.innerHeight) || window.innerHeight;
+    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) ||
+      ((_d = window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) || // Only Android Chrome provides this which we need when scrolled
+      0;
+    const innerHeight = ((_f = (_e = window.Tecton) === null || _e === void 0 ? void 0 : _e.platformDimensions) === null || _f === void 0 ? void 0 : _f.innerHeight) || ((_g = window.visualViewport) === null || _g === void 0 ? void 0 : _g.height) || window.innerHeight;
     const bottomOffset = scrollY + innerHeight - topOffset - height;
     const canShowFullSizeBelow = bottomOffset > contentHeight;
-    const canShowFullSizeAbove = contentHeight <= topOffset || !this.minHeight;
+    const canShowFullSizeAbove = contentHeight <= topOffset;
     let determinedDirection;
     // Show the full-size popover below or above if it will fit
-    if (canShowFullSizeBelow)
+    if (currentDirection === 'down' && canShowFullSizeBelow)
+      return this.setDirectionAndShow('down');
+    else if (currentDirection === 'up' && canShowFullSizeAbove)
+      return this.setDirectionAndShow('up');
+    else if (currentDirection === undefined && canShowFullSizeBelow)
       determinedDirection = 'down';
-    else if (canShowFullSizeAbove)
+    else if (currentDirection === undefined && canShowFullSizeAbove)
       determinedDirection = 'up';
     if (determinedDirection)
       return this.setDirectionAndShow(determinedDirection);
-    // If full size will not fit and minHeight is set, then make as tall as possible
+    // If full size will not fit then make it as tall as possible
     const { minHeight = 150 } = this;
     const displayBuffer = 5;
-    const canShowSmallBelow = bottomOffset >= minHeight + displayBuffer;
+    const canShowMinHeightBelow = bottomOffset >= minHeight + displayBuffer;
     let maxHeight;
-    if (canShowSmallBelow) {
+    if (currentDirection === 'down') {
       maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
       determinedDirection = 'down';
     }
-    else {
+    else if (currentDirection === 'up') {
       maxHeight = Math.max(topOffset - displayBuffer, minHeight);
       determinedDirection = 'up';
     }
+    else if (canShowMinHeightBelow) {
+      maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
+      determinedDirection = 'down';
+    }
+    else {
+      maxHeight = Math.max(topOffset - scrollY - displayBuffer, minHeight);
+      determinedDirection = 'up';
+    }
     containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
     return this.setDirectionAndShow(determinedDirection);
   }
@@ -115,7 +154,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /// DOM ///
   render() {
-    const containerClasses = ['container', this.privateDirection];
+    const containerClasses = ['container', this.currentDirection];
     if (this.show)
       containerClasses.push('show');
     return (h("div", { ref: el => (this.containerElement = el), class: containerClasses.join(' '), role: "menu" }, h("div", { ref: el => (this.contentElement = el), class: "content" }, h("slot", null))));
@@ -132,7 +171,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "block": [516],
     "minHeight": [2, "min-height"],
     "controlElement": [16],
-    "privateDirection": [32],
+    "currentDirection": [32],
     "show": [32],
     "toggle": [64]
   }, [[0, "popoverState", "popoverStateHandler"]]]);

package/dist/components/index5.js

@@ -18,17 +18,17 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.ariaSelected = undefined;
     this.label = undefined;
     this.hideLabel = undefined;
-    this.ariaLabel = undefined;
     this.tabIndex = undefined;
     this.intent = undefined;
-    this.color = undefined;
     this.disabled = undefined;
     this.type = undefined;
     this.loading = undefined;
     this.badge = undefined;
     this.active = undefined;
-    this.fab = undefined;
     this.block = undefined;
+    this.color = undefined;
+    this.fab = undefined;
+    this.ariaLabel = undefined;
     this.iconPosition = undefined;
   }
   ////////// LIFECYCLE HOOKS ////////
@@ -110,17 +110,17 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "ariaSelected": [1, "aria-selected"],
     "label": [1537],
     "hideLabel": [1540, "hide-label"],
-    "ariaLabel": [1537, "aria-label"],
     "tabIndex": [2, "tab-index"],
-    "intent": [513],
-    "color": [513],
+    "intent": [1537],
     "disabled": [516],
     "type": [513],
     "loading": [516],
     "badge": [516],
     "active": [516],
-    "fab": [516],
     "block": [516],
+    "color": [1537],
+    "fab": [516],
+    "ariaLabel": [1537, "aria-label"],
     "iconPosition": [32]
   }, [[2, "click", "disable"], [0, "focus", "delegateFocus"]]]);
 function defineCustomElement() {