q2-tecton-elements 1.26.0 → 1.27.0

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 = () => {
@@ -63,14 +61,14 @@ export class Q2Select {
       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) => {
@@ -125,6 +123,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;
@@ -348,7 +347,7 @@ export class Q2Select {
     this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });
   }
   calculateMultiSelectSelectedDisplay() {
-    var _a;
+    var _a, _b, _c;
     const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;
     if (!firstSelectedValue)
       return '';
@@ -358,11 +357,15 @@ export class Q2Select {
       return this.searchText;
     if (multilineOptions)
       return '';
-    return (_a = firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.value) !== null && _a !== void 0 ? _a : firstSelectedValue;
+    return ((_c = (_b = (_a = firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.value) !== null && _c !== void 0 ? _c : firstSelectedValue);
   }
   calculateSingleSelectSelectedDisplay() {
+    var _a;
     const { firstSelectedOptionElement } = this;
-    return ((firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display) && loc(firstSelectedOptionElement.display)) || this.value || '';
+    return (((firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display) && loc(firstSelectedOptionElement.display)) ||
+      ((_a = firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
+      this.value ||
+      '');
   }
   openDropdownWithoutActiveElement() {
     if (this.readonly || this.disabled)
@@ -454,16 +457,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: 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()));
   }
   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), 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"; }
@@ -599,6 +604,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-stepper/index.js

@@ -236,8 +236,11 @@ export class Q2Stepper {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used to determine the number of steps in the stepper."
         },
         "attribute": "step-count",
         "reflect": false

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

@@ -107,8 +107,11 @@ export class Q2StepperPane {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-stepper and q2-stepper-vertical to determine which pane is active"
         },
         "attribute": "is-active",
         "reflect": true

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

@@ -77,8 +77,11 @@ export class Q2TabPane {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-tab-container to apply a name to all options in the group"
         },
         "attribute": "name",
         "reflect": true
@@ -94,8 +97,11 @@ export class Q2TabPane {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-tab-container to indicate the option is selected"
         },
         "attribute": "selected",
         "reflect": true
@@ -189,8 +195,11 @@ export class Q2TabPane {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-tab-container to indicate the pane's index"
         },
         "attribute": "index",
         "reflect": false
@@ -206,8 +215,11 @@ export class Q2TabPane {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-tab-container to apply a unique id to each tab pane"
         },
         "attribute": "guid",
         "reflect": false

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

@@ -15,7 +15,10 @@ export class Q2Tag {
       const target = event.target;
       if (target.localName === 'click-elsewhere') {
         event.stopPropagation();
-        this.popoverElement.open = false;
+        const { popoverElement } = this;
+        if (!popoverElement)
+          return;
+        popoverElement.open = false;
       }
     };
     this.handleChange = event => {
@@ -27,6 +30,7 @@ export class Q2Tag {
     };
     this.handleClick = async (event) => {
       event.stopPropagation();
+      this.popoverElement.controlElement = this.dropdownBtn;
       if (shouldShowActionSheet(this)) {
         const { value } = await showActionSheetList(this, event);
         this.click.emit({ value });
@@ -36,7 +40,11 @@ export class Q2Tag {
       }
     };
     this.handleKeydown = async (event) => {
+      const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';
+      if (isTabMetaOrCtrl)
+        return;
       event.preventDefault();
+      this.popoverElement.controlElement = this.dropdownBtn;
       if (shouldShowActionSheet(this, event)) {
         const { value } = await showActionSheetList(this, event);
         this.click.emit({ value });
@@ -45,7 +53,7 @@ export class Q2Tag {
         this.optionList.handleExternalKeydown(event);
       }
     };
-    this.handleButtonFocusout = (event) => {
+    this.handleButtonFocusout = async (event) => {
       var _a;
       const relatedTarget = event.relatedTarget;
       if ((_a = (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.tagName) === 'Q2-OPTION') !== null && _a !== void 0 ? _a : false)
@@ -91,7 +99,6 @@ export class Q2Tag {
     if (open)
       return;
     this.optionList.setActiveElement(null);
-    this.dropdownBtn.focus();
   }
   /// DOM ///
   render() {

package/dist/collection/utils/index.js

@@ -104,7 +104,7 @@ export function handleAriaLabel(target) {
 }
 export function messagesDOM(target) {
   const type = target.hasError ? 'danger' : 'info';
-  return (h("div", { class: "messages-container" }, h("q2-message", { appearance: "minimal", description: true, type: type }, h("ul", { id: target.inputDescribedBy }, target.messages.map(message => (h("li", null, loc(message))))))));
+  return (h("div", { class: "messages-container" }, h("q2-message", { appearance: "minimal", description: true, type: type, "test-id": "message" }, h("ul", { id: target.inputDescribedBy }, target.messages.map(message => (h("li", { "test-id": "messageListItem" }, loc(message))))))));
 }
 export function setMessageHeight(target) {
   const messageContainer = target.hostElement.shadowRoot.querySelector('.messages-container');

package/dist/components/index10.js

@@ -39,7 +39,7 @@ const Q2Message = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;
     const addDivForAriaLive = !isFirefox && this.presentToggle;
     const { description } = this;
-    return (h("div", { tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description ? undefined : 'all' }, this.appearance === 'standard' ? generateIcon(this.type) : '', addDivForAriaLive && h("div", { class: "sr" }), h("div", { class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", null))));
+    return (h("div", { tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? generateIcon(this.type) : '', addDivForAriaLive && h("div", { class: "sr" }), h("div", { class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get style() { return stylesCss; }

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

@@ -12,6 +12,56 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.popoverState = createEvent(this, "popoverState", 7);
     this.ready = createEvent(this, "ready", 3);
     this.scheduledAfterRender = [];
+    this.keyStore = {
+      queue: [],
+      lastPressedAt: new Date(),
+    };
+    this.searchAndFocus = (keyValue, shouldSelect) => {
+      // pseudo search in non-searchable select
+      const reorder = () => {
+        this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;
+        const list = this.allOptions.map((element, index) => ({ element, index }));
+        return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];
+      };
+      const buildQueue = () => {
+        const now = new Date();
+        if (now.getTime() - this.keyStore.lastPressedAt.getTime() > 1000) {
+          // empty stored keys if delay > 1s
+          this.keyStore.queue.length = 0;
+        }
+        if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== keyValue) {
+          this.keyStore.queue.push(keyValue);
+        }
+        this.keyStore.lastPressedAt = now;
+      };
+      const searchIndex = (list) => {
+        const keyStr = this.keyStore.queue.join('');
+        return list.find(v => {
+          return (!v.element.disabled &&
+            v.element.display &&
+            (v.element.display.match(new RegExp(`^${keyStr}`, 'i')) ||
+              v.element.display.replace(/\s/g, '').match(new RegExp(`^${keyStr}`, 'i'))));
+        });
+      };
+      const setFocus = ({ index }) => {
+        if (this.multiple) {
+          // multiple: should open to make sure that which options are selected
+          this.openDropdownWithActiveElement(index);
+        }
+        else {
+          this.activeIndex = index;
+          if (shouldSelect)
+            this.selectOption(this.allOptions[index]);
+          else
+            this.setActiveElement(index);
+        }
+      };
+      buildQueue();
+      const matched = searchIndex(reorder());
+      if (matched) {
+        setFocus(matched);
+      }
+    };
     /// Event Handlers ///
     /* tslint:disable:cyclomatic-complexity */
     this.externalKeydownHandler = (event) => {
@@ -101,7 +151,7 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       let newOption;
       switch (key) {
         case ' ':
-          if (this.searchString) {
+          if (this.searchString && !this.multiple) {
             if (customSearch)
               break;
             this.searchOptions(key, false);
@@ -171,6 +221,8 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         case 'Tab':
           if (shiftKey)
             break;
+          if (this.multiple && this.role === 'listbox')
+            break;
           newOption = allOptions.find(element => element.active);
           if (!newOption || newOption.disabled)
             return;
@@ -417,19 +469,8 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }, 2000);
   }
   searchOptions(key, shouldSelect) {
-    this.resetTimer();
-    let searchString = this.searchString ? `${this.searchString}${key}` : key;
-    searchString = searchString.replace(/[^\w\s]/gi, '');
-    this.searchString = searchString;
-    const searchRegEx = new RegExp(`^${searchString}`, 'i');
-    const { allOptions } = this;
-    const foundIndex = allOptions.findIndex(option => option.value === searchString || option.textContent.trim().match(searchRegEx));
-    if (foundIndex === -1)
-      return;
-    if (shouldSelect)
-      this.selectOption(this.allOptions[foundIndex]);
-    else
-      this.setActiveElement(foundIndex);
+    this.searchString = key;
+    this.searchAndFocus(key, shouldSelect);
   }
   /// Watchers ///
   showSelectedUpdated(showSelected) {

package/dist/components/index14.js

@@ -58,6 +58,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         if (this.open)
           return;
         this.currentDirection = undefined;
+        this.containerElement.style.removeProperty('display');
         this.containerElement.style.removeProperty('--comp-pop-max-height');
       }, { once: true });
       this.show = false;
@@ -91,9 +92,8 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const { containerElement, contentElement, direction, controlElement, currentDirection } = this;
     if (containerElement)
       containerElement.style.maxHeight = null;
-    // If direction defined, use it
-    if (direction)
-      return this.setDirectionAndShow(direction);
+    // If the direction is already set then use it, otherwise use the current direction
+    const currentOrStatedDirection = direction !== null && direction !== void 0 ? direction : currentDirection;
     // Set the container to block so we can get the height
     containerElement.style.setProperty('display', 'block');
     await waitForNextPaint();
@@ -112,13 +112,13 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const canShowFullSizeAbove = contentHeight <= topOffset;
     let determinedDirection;
     // Show the full-size popover below or above if it will fit
-    if (currentDirection === 'down' && canShowFullSizeBelow)
+    if (currentOrStatedDirection === 'down' && canShowFullSizeBelow)
       return this.setDirectionAndShow('down');
-    else if (currentDirection === 'up' && canShowFullSizeAbove)
+    else if (currentOrStatedDirection === 'up' && canShowFullSizeAbove)
       return this.setDirectionAndShow('up');
-    else if (currentDirection === undefined && canShowFullSizeBelow)
+    else if (currentOrStatedDirection === undefined && canShowFullSizeBelow)
       determinedDirection = 'down';
-    else if (currentDirection === undefined && canShowFullSizeAbove)
+    else if (currentOrStatedDirection === undefined && canShowFullSizeAbove)
       determinedDirection = 'up';
     if (determinedDirection)
       return this.setDirectionAndShow(determinedDirection);
@@ -127,11 +127,11 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const displayBuffer = 5;
     const canShowMinHeightBelow = bottomOffset >= minHeight + displayBuffer;
     let maxHeight;
-    if (currentDirection === 'down') {
+    if (currentOrStatedDirection === 'down') {
       maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
       determinedDirection = 'down';
     }
-    else if (currentDirection === 'up') {
+    else if (currentOrStatedDirection === 'up') {
       maxHeight = Math.max(topOffset - displayBuffer, minHeight);
       determinedDirection = 'up';
     }
@@ -157,7 +157,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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))));
+    return (h("div", { ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { ref: el => (this.contentElement = el), class: "content" }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get watchers() { return {

package/dist/components/index15.js

@@ -543,8 +543,8 @@ function handleAriaLabel(target) {
 function messagesDOM(target) {
   const type = target.hasError ? 'danger' : 'info';
   return (h("div", { class: "messages-container" },
-    h("q2-message", { appearance: "minimal", description: true, type: type },
-      h("ul", { id: target.inputDescribedBy }, target.messages.map(message => (h("li", null, loc(message))))))));
+    h("q2-message", { appearance: "minimal", description: true, type: type, "test-id": "message" },
+      h("ul", { id: target.inputDescribedBy }, target.messages.map(message => (h("li", { "test-id": "messageListItem" }, loc(message))))))));
 }
 function setMessageHeight(target) {
   const messageContainer = target.hostElement.shadowRoot.querySelector('.messages-container');

package/dist/components/index3.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { i as icons, d as defineCustomElement$1 } from './index7.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}.avatar-img{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-br, 50%);background-color:unset}.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-br, 50%);background-color:var(--tct-avatar-bg, #9e9e9e)}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background-color:var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 50px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-color, #ffffff);font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-br, var(--tct-avatar-img-br, 50%));background-color:var(--tct-avatar-fallback-bg, var(--tct-avatar-bg, #9e9e9e));display:flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-fallback-icon-size, 65%);--t-icon-fill:var(--tct-avatar-fallback-fill, transparent);--t-icon-stroke-primary:var(--tct-avatar-fallback-stroke-primary, currentcolor);--t-icon-stroke-secondary:var(--tct-avatar-fallback-stroke-secondary, currentcolor);color:var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff)));width:var(--t-icon-size);height:var(--t-icon-size)}";
+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}.avatar-img{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);background-color:unset}.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 50px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))));display:flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%);--t-icon-fill:var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill, transparent);--t-icon-stroke-primary:var-list(\n      --tct-avatar-icon-stroke-primary,\n      --tct-avatar-fallback-stroke-primary,\n      currentcolor\n  );--t-icon-stroke-secondary:var-list(\n      --tct-avatar-icon-stroke-secondary,\n      --tct-avatar-fallback-stroke-secondary,\n      currentcolor\n  );color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";
 
 const Q2Avatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {