q2-tecton-elements 1.26.1 → 1.27.1

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

@@ -116,8 +116,8 @@ export class Q2Input {
     this.textHidden = undefined;
     this.badgeValue = undefined;
     this.badgeTheme = undefined;
-    this.ariaControls = undefined;
     this.role = undefined;
+    this.ariaControls = undefined;
     this.ariaOwns = undefined;
     this.ariaHaspopup = undefined;
     this.ariaExpanded = undefined;
@@ -362,7 +362,7 @@ export class Q2Input {
   }
   /* tslint:disable:cyclomatic-complexity */
   inputContainerDOM() {
-    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" })))));
+    return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, 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", "test-id": "iconError" }))), 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 */
@@ -889,7 +889,7 @@ export class Q2Input {
         "attribute": "badge-theme",
         "reflect": true
       },
-      "ariaControls": {
+      "role": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -903,10 +903,10 @@ export class Q2Input {
           "tags": [],
           "text": ""
         },
-        "attribute": "aria-controls",
+        "attribute": "role",
         "reflect": false
       },
-      "role": {
+      "ariaControls": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -920,7 +920,7 @@ export class Q2Input {
           "tags": [],
           "text": ""
         },
-        "attribute": "role",
+        "attribute": "aria-controls",
         "reflect": false
       },
       "ariaOwns": {

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

@@ -196,8 +196,12 @@ label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: block;
 }
 
+.custom-display-container {
+  max-width: 100%;
+}
 .has-custom-display .custom-display-container {
   --comp-default-padding: var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);
   padding: var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));

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

@@ -32,7 +32,7 @@ export class Q2Message {
     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))));
   }
   static get is() { return "q2-message"; }
   static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class Q2Option {
   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))));
   }
   static get is() { return "q2-option"; }
   static get encapsulation() { return "shadow"; }
@@ -50,8 +50,11 @@ export class Q2Option {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-option-list to set a role on the option"
         },
         "attribute": "role",
         "reflect": true,
@@ -119,8 +122,11 @@ export class Q2Option {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-radio-group to disable all options in the group"
         },
         "attribute": "disabled-group",
         "reflect": true
@@ -136,8 +142,11 @@ export class Q2Option {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-option-list to indicate the option is selected"
         },
         "attribute": "selected",
         "reflect": true
@@ -187,8 +196,11 @@ export class Q2Option {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-option-list to indicate the option is active"
         },
         "attribute": "active",
         "reflect": true

package/dist/collection/components/q2-option-list/index.js

@@ -3,6 +3,56 @@ import { isEventFromElement, nextPaint, overrideFocus, waitForNextPaint } from '
 export class Q2OptionList {
   constructor() {
     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) => {
@@ -92,7 +142,7 @@ export class Q2OptionList {
       let newOption;
       switch (key) {
         case ' ':
-          if (this.searchString) {
+          if (this.searchString && !this.multiple) {
             if (customSearch)
               break;
             this.searchOptions(key, false);
@@ -162,6 +212,8 @@ export class Q2OptionList {
         case 'Tab':
           if (shiftKey)
             break;
+          if (this.multiple && this.role === 'listbox')
+            break;
           newOption = allOptions.find(element => element.active);
           if (!newOption || newOption.disabled)
             return;
@@ -408,19 +460,8 @@ export class Q2OptionList {
     }, 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/collection/components/q2-pagination/index.js

@@ -17,6 +17,20 @@ export class Q2Pagination {
       }
       this.change.emit({ page });
     };
+    this.checkSize = () => {
+      const { hostElement, containerElement } = this;
+      const isOverflowing = this.containerWidth > hostElement.clientWidth;
+      this.isSmall = isOverflowing;
+      if (isOverflowing)
+        return;
+      nextPaint(() => {
+        const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;
+        if (containerWidthHasNotChanged)
+          return;
+        this.containerWidth = containerElement.clientWidth;
+        this.checkSize();
+      });
+    };
     this.recordType = undefined;
     this.perPage = undefined;
     this.total = undefined;
@@ -32,12 +46,14 @@ export class Q2Pagination {
       return;
     this.containerWidth = this.containerElement.clientWidth;
     this.resizeObserver = new ResizeObserver(() => this.checkSize());
+    window.addEventListener('resize', this.checkSize);
     this.resizeObserver.observe(this.hostElement);
     overrideFocus(this.hostElement);
   }
   disconnectedCallback() {
     var _a;
     (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    window.removeEventListener('resize', this.checkSize);
   }
   onHostElementFocus(event) {
     var _a;
@@ -78,20 +94,6 @@ export class Q2Pagination {
       return pages;
     return Math.ceil(total / perPage);
   }
-  checkSize() {
-    const { hostElement, containerElement } = this;
-    const isOverflowing = this.containerWidth > hostElement.clientWidth;
-    this.isSmall = isOverflowing;
-    if (isOverflowing)
-      return;
-    nextPaint(() => {
-      const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;
-      if (containerWidthHasNotChanged)
-        return;
-      this.containerWidth = containerElement.clientWidth;
-      this.checkSize();
-    });
-  }
   ////////// OBSERVERS //////////
   render() {
     const { pagesOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange, } = this;

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

@@ -107,6 +107,11 @@ button {
   align-items: center;
 }
 
+q2-btn {
+  --tct-btn-border-radius: var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));
+  --tct-btn-border: var(--tct-pagination-btn-border, var(--t-pagination-btn-border));
+}
+
 q2-icon {
   --tct-icon-size: var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));
   color: var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)));

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

@@ -6,12 +6,30 @@ export class Q2Pill {
     var _a;
     this.scheduledAfterRender = [];
     /// Helpers ///
+    this.syncValueProperties = () => {
+      const { value, selectedOptions } = this;
+      if (!!(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length))
+        this.selectedOptionsChanged(selectedOptions);
+      else if (value)
+        this.valueChanged(value);
+    };
+    this.getOption = async (value) => {
+      if (this.optionList) {
+        const options = await this.optionList.getOptions();
+        return options.find(option => option.value === value);
+      }
+      else {
+        return this.hostElement.querySelector(`q2-option[value="${value}"]`);
+      }
+    };
     this.updateSelectedOptionElements = async () => {
       var _a;
       const { selectedOptions } = this;
       const selectedValues = selectedOptions.map(option => option.value);
       const options = await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
-      this.selectedOptionElements = options === null || options === void 0 ? void 0 : options.filter(option => selectedValues.includes(option.value));
+      if (this.hasOptions)
+        this.active = !!selectedValues.length;
+      this.selectedOptionElements = (options === null || options === void 0 ? void 0 : options.filter(option => selectedValues.includes(option.value))) || [];
     };
     this.determineHasOptions = () => {
       const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
@@ -19,6 +37,7 @@ export class Q2Pill {
     };
     this.clearSelectedOptions = () => {
       this.selectedOptions = [];
+      this.value = null;
       this.active = false;
       this.open = false;
       this.primaryBtn.focus();
@@ -51,9 +70,10 @@ export class Q2Pill {
       }
     };
     this.handleKeydown = async (event) => {
-      event.preventDefault();
-      if (!this.hasOptions || this.disabled)
+      const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';
+      if (!this.hasOptions || this.disabled || isTabMetaOrCtrl)
         return;
+      event.preventDefault();
       if (shouldShowActionSheet(this, event)) {
         this.executeActionSheet(event);
       }
@@ -61,6 +81,13 @@ export class Q2Pill {
         this.optionList.handleExternalKeydown(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)
+        return;
+      this.open = false;
+    };
     this.handleChange = event => {
       event.stopPropagation();
       if (!this.hasOptions)
@@ -75,7 +102,10 @@ export class Q2Pill {
       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.hoist = !!((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.useActionSheets);
@@ -101,6 +131,7 @@ export class Q2Pill {
   }
   componentDidLoad() {
     overrideFocus(this.hostElement);
+    this.syncValueProperties();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
@@ -130,12 +161,22 @@ export class Q2Pill {
     const result = await showActionSheetList(this, event);
     this.handleSelectionChanges(result);
   }
-  handleSelectionChanges(changeDetails) {
+  async handleSelectionChanges(changeDetails) {
+    const { multiple } = this;
     const { value = '', values = [] } = changeDetails;
-    const isActive = !!values.length;
+    const isActive = multiple ? !!values.length : !!value;
     if (!this.hostElement.onchange) {
-      this.selectedOptions = values;
-      this.active = isActive;
+      if (multiple) {
+        this.selectedOptions = values;
+        this.value = undefined;
+      }
+      else {
+        const selectedOption = await this.getOption(value);
+        this.selectedOptions = selectedOption
+          ? [{ value: selectedOption.value, display: selectedOption.display }]
+          : undefined;
+        this.value = selectedOption.value || undefined;
+      }
     }
     this.change.emit({
       value,
@@ -144,8 +185,35 @@ export class Q2Pill {
     });
   }
   /// Watchers ///
-  selectedOptionsWatcher() {
-    this.updateSelectedOptionElements();
+  async valueChanged(newValue) {
+    var _a, _b;
+    const { multiple, selectedOptions } = this;
+    const firstValue = (_b = (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+    if (multiple)
+      return;
+    if (newValue === firstValue)
+      this.updateSelectedOptionElements();
+    else {
+      const selectedOption = await this.getOption(newValue);
+      const { value, display } = selectedOption || { value: newValue, display: null };
+      this.selectedOptions = [{ value, display }];
+    }
+  }
+  selectedOptionsChanged(newValue) {
+    var _a, _b;
+    const { multiple } = this;
+    const firstValue = (_b = (_a = newValue === null || newValue === void 0 ? void 0 : newValue[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+    if (multiple) {
+      if (this.value)
+        this.value = null;
+      this.updateSelectedOptionElements();
+    }
+    else if (this.value === firstValue) {
+      this.updateSelectedOptionElements();
+    }
+    else {
+      this.value = firstValue;
+    }
   }
   /// Listeners ///
   delegateFocus(event) {
@@ -159,7 +227,6 @@ export class Q2Pill {
     if (open)
       return;
     this.optionList.setActiveElement(null);
-    this.primaryBtn.focus();
   }
   /// DOM ///
   generateIcon() {
@@ -176,7 +243,7 @@ export class Q2Pill {
       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", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, 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))))));
   }
   static get is() { return "q2-pill"; }
   static get encapsulation() { return "shadow"; }
@@ -314,7 +381,7 @@ export class Q2Pill {
       },
       "value": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -436,8 +503,11 @@ export class Q2Pill {
   static get elementRef() { return "hostElement"; }
   static get watchers() {
     return [{
+        "propName": "value",
+        "methodName": "valueChanged"
+      }, {
         "propName": "selectedOptions",
-        "methodName": "selectedOptionsWatcher"
+        "methodName": "selectedOptionsChanged"
       }];
   }
   static get listeners() {

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

@@ -51,6 +51,7 @@ export class Q2Popover {
         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;
@@ -84,9 +85,8 @@ export class Q2Popover {
     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();
@@ -105,13 +105,13 @@ export class Q2Popover {
     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);
@@ -120,11 +120,11 @@ export class Q2Popover {
     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';
     }
@@ -150,7 +150,7 @@ export class Q2Popover {
     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))));
   }
   static get is() { return "q2-popover"; }
   static get encapsulation() { return "shadow"; }

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

@@ -171,8 +171,11 @@ export class Q2Radio {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-radio-group to apply a name to all options in the group"
         },
         "attribute": "name",
         "reflect": true
@@ -188,8 +191,11 @@ export class Q2Radio {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-radio-group to disable all options in the group"
         },
         "attribute": "group-disabled",
         "reflect": false,
@@ -206,8 +212,11 @@ export class Q2Radio {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-radio-group to make all options in the group readonly"
         },
         "attribute": "group-readonly",
         "reflect": false,
@@ -224,8 +233,11 @@ export class Q2Radio {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Used by q2-radio-group to make the options display as tiles"
         },
         "attribute": "group-tile-layout",
         "reflect": false,

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

@@ -75,6 +75,7 @@ button {
   margin-bottom: var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));
 }
 .radio-container label[for] {
+  color: var(--tct-radio-label-color);
   font-weight: var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));
   align-items: center;
   cursor: pointer;
@@ -117,6 +118,7 @@ button {
   flex-wrap: wrap;
 }
 .radio-tile label[for] {
+  color: var(--tct-radio-label-color);
   align-items: center;
   border-radius: 3px;
   border: 2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));