q2-tecton-elements 1.25.1 → 1.25.3

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

@@ -5,12 +5,10 @@ export class Q2Select {
   constructor() {
     var _a;
     this.scheduledAfterRender = [];
-    this.showSelectedOptions = (event) => {
-      event.stopPropagation();
+    this.showSelectedOptions = () => {
       this.showSelected = true;
     };
-    this.showAllOptions = (event) => {
-      event === null || event === void 0 ? void 0 : event.stopPropagation();
+    this.showAllOptions = () => {
       this.showSelected = false;
     };
     this.onMutationObserved = () => {
@@ -60,17 +58,20 @@ export class Q2Select {
         return;
       if (this.shouldClearSearchText(event))
         this.clearSearchText();
+      // Prevent click event from firing when spacebar is pressed
+      if (event.key === ' ')
+        event.preventDefault();
       this.optionList.handleExternalKeydown(event);
     };
     this.visibilityToggleKeyDown = (event) => {
-      const keysForOptionListToHandle = ['ArrowDown', 'ArrowUp'];
-      const keysThatTriggerClick = ['Enter', ' '];
       const key = event.key;
-      if (keysForOptionListToHandle.includes(key)) {
-        this.optionList.handleExternalKeydown(event);
-      }
-      else if (keysThatTriggerClick.includes(key)) {
-        event.target.dispatchEvent(new MouseEvent('click'));
+      const isShiftTab = key === 'Tab' && event.shiftKey;
+      const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);
+      if (isRadioControlKey)
+        event.stopPropagation();
+      if (isShiftTab) {
+        event.stopPropagation();
+        this.optionList.setDefaultActiveElement();
       }
     };
     this.inputClickHandler = async (event) => {
@@ -126,6 +127,7 @@ export class Q2Select {
     this.disabled = false;
     this.readonly = false;
     this.invalid = undefined;
+    this.listLabel = loc('tecton.element.select.listLabel');
     this.errors = undefined;
     this.multiple = false;
     this.minRows = 3;
@@ -187,7 +189,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() {
@@ -451,16 +456,18 @@ export class Q2Select {
         this.errors.length > 0 &&
         this.errors.map(error => loc(error))) ||
         (this.invalid && ['tecton.element.select.invalid']) ||
-        [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${!!this.open}`, ariaOwns: "option-list", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: showAsPseudo, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
+        [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", role: "combobox", pseudo: showAsPseudo, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
   }
   optionsDropdown() {
-    return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputField, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, onPopoverStateChanged: this.popoverStateChanged, block: true }, this.multiple ? this.visibilityToggle() : '', h("q2-option-list", { ref: el => (this.optionList = el), id: "option-list", "show-selected": this.showSelected, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null))));
+    return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputField, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, onPopoverStateChanged: this.popoverStateChanged, block: true }, h("div", { class: "popover-content", tabindex: "-1" }, h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, "aria-label": this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), this.multiple && this.visibilityToggle())));
   }
   visibilityToggle() {
     var _a, _b;
     const selectedOptionsCount = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     const { showSelected } = this;
-    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) }, h("span", null, loc('tecton.element.select.multiHeader.showing')), h("q2-btn", { class: showSelected ? '' : 'selected', badge: true, "aria-selected": !showSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')), h("q2-btn", { class: showSelected ? 'selected' : '', "aria-selected": showSelected || undefined, disabled: selectedOptionsCount === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [selectedOptionsCount]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))));
+    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) }, h("fieldset", null, h("legend", { "aria-label": loc('tecton.element.select.multiHeader.showing') }, loc('tecton.element.select.multiHeader.showing')), h("div", null, h("input", { class: "sr", type: "radio", id: "all", name: "viewDisplay", value: "all", checked: !showSelected, "aria-label": loc('tecton.element.select.multiHeader.allAriaLabel'), "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "all" }, loc('tecton.element.select.multiHeader.all'))), h("div", null, h("input", { class: "sr", type: "radio", id: "selected", disabled: selectedOptionsCount === 0, name: "viewDisplay", value: "selected", "aria-label": loc('tecton.element.select.multiHeader.selectedAriaLabel', [
+        selectedOptionsCount,
+      ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
   }
   static get is() { return "q2-select"; }
   static get encapsulation() { return "shadow"; }
@@ -613,6 +620,24 @@ export class Q2Select {
         "attribute": "invalid",
         "reflect": true
       },
+      "listLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "list-label",
+        "reflect": false,
+        "defaultValue": "loc('tecton.element.select.listLabel')"
+      },
       "errors": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/q2-select/styles.css

@@ -171,14 +171,52 @@ button {
   width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)));
 }
 
+.popover-content {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
 .multi-select-header {
-  padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));
+  padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));
   position: sticky;
   top: 0;
   z-index: 5;
   background: var(--app-white);
-  display: inline-grid;
-  grid-template-columns: repeat(3, auto);
+  display: flex;
   gap: var(--app-scale-2x, 10px);
   align-items: center;
+}
+.multi-select-header fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: flex;
+  gap: var(--app-scale-2x, 10px);
+}
+.multi-select-header legend {
+  padding: 0;
+  float: left;
+}
+.multi-select-header label {
+  cursor: pointer;
+  padding: var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));
+  font-size: var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));
+  border-radius: var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));
+  background-color: var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))));
+  color: var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))));
+}
+.multi-select-header label:hover {
+  background-color: var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2)))))));
+  color: var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040)))))));
+}
+.multi-select-header input:checked + label, .multi-select-header input:checked + label:enabled:hover {
+  background-color: var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e))));
+  color: var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))));
+}
+.multi-select-header input:disabled + label {
+  opacity: var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));
+  cursor: not-allowed;
+}
+.multi-select-header input:focus + label {
+  box-shadow: var(--const-double-focus-ring);
 }

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

@@ -99,7 +99,7 @@ export class Q2Tag {
     const wrapperClassNames = ['tag-wrapper'];
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h(Host, { role: "listitem" }, h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' '), onClick: e => e.stopPropagation() }, h("div", { class: "tag" }, this.label), this.hasOptions && (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false', "aria-label": loc('tecton.element.tag.viewOptions') }, h("q2-icon", { type: "options" }))))), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { id: "option-list", role: "menu", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", "no-select": true }, h("slot", null)))))));
+    return (h(Host, { role: "listitem" }, h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' '), onClick: e => e.stopPropagation() }, h("div", { class: "tag" }, this.label), this.hasOptions && (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false', "aria-label": loc('tecton.element.tag.viewOptions') }, h("q2-icon", { type: "options" }))))), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", "no-select": true }, h("slot", null)))))));
   }
   static get is() { return "q2-tag"; }
   static get encapsulation() { return "shadow"; }

package/dist/components/index12.js

@@ -30,7 +30,7 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
     const isDisabled = disabled || disabledGroup;
-    return (h(Host, { tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
+    return (h(Host, { tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get watchers() { return {

package/dist/components/index13.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { o as overrideFocus, w as waitForNextPaint, n as nextPaint, a as isEventFromElement } from './index15.js';
+import { n as nextPaint, l as loc, o as overrideFocus, w as waitForNextPaint, a as isEventFromElement } 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{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 
@@ -27,21 +27,23 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
             this.searchOptions(key, true);
             break;
           }
-          else if (this.role === 'menu') {
+          else if (this.type === 'menu') {
             this.activeIndex = 0;
             this.openDropdownWithActiveElement(0);
           }
           else {
             this.setDefaultActiveElement();
+            nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));
           }
           break;
         case 'Enter':
-          if (this.role === 'menu') {
+          if (this.type === 'menu') {
             this.activeIndex = 0;
             this.openDropdownWithActiveElement(0);
           }
           else {
             this.setDefaultActiveElement();
+            nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));
           }
           break;
         case 'ArrowUp':
@@ -171,6 +173,8 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         case 'Tab':
           if (shiftKey)
             break;
+          if (this.multiple && this.type === 'listbox')
+            break;
           newOption = allOptions.find(element => element.active);
           if (!newOption || newOption.disabled)
             return;
@@ -205,7 +209,6 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       const option = target.closest('q2-option');
       this.selectOption(option);
     };
-    this.role = 'listbox';
     this.customSearch = undefined;
     this.noSelect = undefined;
     this.align = undefined;
@@ -213,7 +216,8 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.multiple = undefined;
     this.disabled = undefined;
     this.showSelected = undefined;
-    this.type = undefined;
+    this.type = 'listbox';
+    this.label = loc('tecton.element.optionList.label');
     this.hasOptions = undefined;
   }
   /// LifeCycle Hooks ///
@@ -495,7 +499,6 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }; }
   static get style() { return stylesCss; }
 }, [1, "q2-option-list", {
-    "role": [513],
     "customSearch": [516, "custom-search"],
     "noSelect": [516, "no-select"],
     "align": [513],
@@ -504,6 +507,7 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "disabled": [516],
     "showSelected": [1540, "show-selected"],
     "type": [1],
+    "label": [1],
     "hasOptions": [32],
     "setDefaultActiveElement": [64],
     "setActiveElement": [64],

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}:host([open]) .container{visibility:visible}:host([open]) .container.show{height:auto;overflow:auto;opacity:1}.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

@@ -16,6 +16,7 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.ariaHasPopup = undefined;
     this.ariaControls = undefined;
     this.ariaSelected = undefined;
+    this.ariaPressed = undefined;
     this.label = undefined;
     this.hideLabel = undefined;
     this.ariaLabel = undefined;
@@ -80,19 +81,20 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.iconPosition = iconPosition;
   }
   render() {
-    const { ariaExpanded, ariaHasPopup, ariaSelected, disabled, type, tabindex } = this.buttonAttributes;
+    const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, disabled, type, tabindex } = this.buttonAttributes;
     const { iconPosition, loading, badge, label, hideLabel } = this;
     const renderLoadingSpinner = iconPosition || loading;
     const isLoadingSpinnerInline = !iconPosition || badge;
-    return (h("button", { "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition ? `icon-${iconPosition}` : '' }, h("div", null, renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? loc(label) : h("slot", { onSlotchange: this.handleSlotChange }))));
+    return (h("button", { "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, "aria-pressed": ariaPressed, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition ? `icon-${iconPosition}` : '' }, h("div", null, renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? loc(label) : h("slot", { onSlotchange: this.handleSlotChange }))));
   }
   get buttonAttributes() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     return {
       ariaExpanded: this.ariaExpanded !== undefined ? `${((_a = this.ariaExpanded) === null || _a === void 0 ? void 0 : _a.toString()) === 'true'}` : undefined,
       ariaHasPopup: this.ariaHasPopup !== undefined ? `${((_b = this.ariaHasPopup) === null || _b === void 0 ? void 0 : _b.toString()) === 'true'}` : undefined,
       ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,
       ariaSelected: this.ariaSelected !== undefined ? `${((_c = this.ariaSelected) === null || _c === void 0 ? void 0 : _c.toString()) === 'true'}` : undefined,
+      ariaPressed: this.ariaPressed !== undefined ? `${((_d = this.ariaPressed) === null || _d === void 0 ? void 0 : _d.toString()) === 'true'}` : undefined,
       disabled: this.disabled || false,
       type: this.type || 'button',
       tabindex: this.tabIndex || undefined,
@@ -108,6 +110,7 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "ariaHasPopup": [1, "aria-has-popup"],
     "ariaControls": [1, "aria-controls"],
     "ariaSelected": [1, "aria-selected"],
+    "ariaPressed": [1, "aria-pressed"],
     "label": [1537],
     "hideLabel": [1540, "hide-label"],
     "ariaLabel": [1537, "aria-label"],

package/dist/components/index8.js

@@ -2967,8 +2967,8 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.textHidden = undefined;
     this.badgeValue = undefined;
     this.badgeTheme = undefined;
-    this.ariaControls = undefined;
     this.role = undefined;
+    this.ariaControls = undefined;
     this.ariaOwns = undefined;
     this.ariaLabel = undefined;
     this.ariaHaspopup = undefined;
@@ -3232,7 +3232,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /* tslint:disable:cyclomatic-complexity */
   inputContainerDOM() {
-    return (h("div", { class: "input-container" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("span", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("q2-icon", { type: "error", class: "icon-error" }))), this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(), h("div", { class: "input-icons-container-right" }, this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" }))), ['password', 'text', 'ssn'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.iconRight && !this.formattedValueObject.suffix && (h("q2-icon", { type: this.iconRight, class: "icon-right" })), this.hasError && this.type !== 'currency' && (h("q2-icon", { type: "error", class: "icon-error" })))));
+    return (h("div", { class: "input-container", tabindex: -1 }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("span", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("q2-icon", { type: "error", class: "icon-error" }))), this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(), h("div", { class: "input-icons-container-right" }, this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" }))), ['password', 'text', 'ssn'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.iconRight && !this.formattedValueObject.suffix && (h("q2-icon", { type: this.iconRight, class: "icon-right" })), this.hasError && this.type !== 'currency' && (h("q2-icon", { type: "error", class: "icon-error" })))));
   }
   /* tslint:enable:cyclomatic-complexity */
   /* tslint:disable:cyclomatic-complexity */
@@ -3334,8 +3334,8 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "textHidden": [1540, "text-hidden"],
     "badgeValue": [513, "badge-value"],
     "badgeTheme": [513, "badge-theme"],
-    "ariaControls": [1, "aria-controls"],
     "role": [1],
+    "ariaControls": [1, "aria-controls"],
     "ariaOwns": [1, "aria-owns"],
     "ariaLabel": [1537, "aria-label"],
     "ariaHaspopup": [1, "aria-haspopup"],

package/dist/components/q2-pill.js

@@ -187,7 +187,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       wrapperClassNames.push('has-icon');
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { role: "menu", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements() }, h("slot", null))))));
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", role: "combobox", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements() }, h("slot", null))))));
   }
   get hostElement() { return this; }
   static get watchers() { return {