q2-tecton-elements 1.27.0 → 1.27.2

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

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, Fragment, } from '@stencil/core';
 import { isEventFromElement, loc, overrideFocus } from 'src/utils';
 import { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';
 export class Q2Tag {
@@ -6,9 +6,9 @@ export class Q2Tag {
     var _a;
     /// Getters ///
     /// Helpers
-    this.determineHasOptions = () => {
-      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
-      this.hasOptions = hasOptions;
+    this.determineOptionCount = () => {
+      const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;
+      this.optionCount = numberOfOptions;
     };
     /// Event Handlers ///
     this.onClickElsewhere = (event) => {
@@ -23,7 +23,7 @@ export class Q2Tag {
     };
     this.handleChange = event => {
       event.stopPropagation();
-      if (!this.hasOptions)
+      if (!this.optionCount)
         return;
       const { value } = event.detail;
       this.click.emit({ value });
@@ -36,7 +36,7 @@ export class Q2Tag {
         this.click.emit({ value });
       }
       else {
-        this.popoverElement.toggle();
+        await this.popoverElement.toggle();
       }
     };
     this.handleKeydown = async (event) => {
@@ -70,11 +70,13 @@ export class Q2Tag {
     this.theme = undefined;
     this.popoverMinHeight = 150;
     this.popoverDirection = undefined;
-    this.hasOptions = undefined;
+    this.popoverAlignment = 'right';
+    this.optionListLabel = 'options';
+    this.optionCount = undefined;
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
-    const observer = new MutationObserver(this.determineHasOptions);
+    const observer = new MutationObserver(this.determineOptionCount);
     observer.observe(this.hostElement, { childList: true, attributes: true });
     this.mutationObserver = observer;
   }
@@ -89,7 +91,7 @@ export class Q2Tag {
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    if (!this.hasOptions)
+    if (!this.optionCount)
       return;
     this.dropdownBtn.focus();
   }
@@ -101,12 +103,15 @@ export class Q2Tag {
     this.optionList.setActiveElement(null);
   }
   /// DOM ///
+  generateHiddenElement() {
+    return (h("div", { id: "option-description", class: "sr", "aria-hidden": "true" }, loc('tecton.element.optionList.optionCount', [this.optionCount])));
+  }
   render() {
-    const { hasOptions, open } = this;
-    const wrapperClassNames = ['tag-wrapper'];
-    if (hasOptions)
+    const { optionCount, open } = this;
+    const wrapperClassNames = ['tag'];
+    if (optionCount)
       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 }, this.optionCount ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", 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-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, h("div", { class: wrapperClassNames.join(' ') }, this.label), h("q2-icon", { type: "options" }))), this.generateHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.optionCount && (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", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", null)))))));
   }
   static get is() { return "q2-tag"; }
   static get encapsulation() { return "shadow"; }
@@ -225,12 +230,48 @@ export class Q2Tag {
         },
         "attribute": "popover-direction",
         "reflect": false
+      },
+      "popoverAlignment": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popover-alignment",
+        "reflect": false,
+        "defaultValue": "'right'"
+      },
+      "optionListLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "option-list-label",
+        "reflect": false,
+        "defaultValue": "'options'"
       }
     };
   }
   static get states() {
     return {
-      "hasOptions": {}
+      "optionCount": {}
     };
   }
   static get events() {

package/dist/collection/utils/action-sheet.js

@@ -6,7 +6,7 @@ export const shouldShowActionSheet = (component, event) => {
   const canShowActionSheet = !!((_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.showActionSheet);
   if (!canShowActionSheet)
     return false;
-  const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
+  const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', ' '];
   if (event) {
     const eventIsKeyboardEvent = event instanceof KeyboardEvent;
     const eventIsMouseEvent = event instanceof MouseEvent;

package/dist/components/action-sheet.js

@@ -6,7 +6,7 @@ const shouldShowActionSheet = (component, event) => {
   const canShowActionSheet = !!((_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.showActionSheet);
   if (!canShowActionSheet)
     return false;
-  const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
+  const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', ' '];
   if (event) {
     const eventIsKeyboardEvent = event instanceof KeyboardEvent;
     const eventIsMouseEvent = event instanceof MouseEvent;

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}";
 
@@ -77,21 +77,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':
@@ -221,7 +223,7 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         case 'Tab':
           if (shiftKey)
             break;
-          if (this.multiple && this.role === 'listbox')
+          if (this.multiple && this.type === 'listbox')
             break;
           newOption = allOptions.find(element => element.active);
           if (!newOption || newOption.disabled)
@@ -257,7 +259,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;
@@ -265,7 +266,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 ///
@@ -527,7 +529,7 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   /// DOM ///
   render() {
-    return (h(Host, null, h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { class: "options", role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", null)))));
+    return (h(Host, null, h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", null)))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
@@ -536,7 +538,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],
@@ -545,6 +546,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), max-height var(--app-tween-1, 0.2s ease);border-radius:var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));max-height:var(--comp-pop-max-height);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([block]) .container{left:unset;right:unset;width:100%;min-width:unset}:host([align=right]) .container{right:0;text-align:end;left:unset}.container :host([open]){display:block}:host([open]) .container.show{height:auto;overflow:auto;opacity:1;visibility:visible}.container.up{bottom:var(--comp-pop-offset)}click-elsewhere{position:relative;display:block}.content{height:auto}";
+const 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() {

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-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 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(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill, transparent));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));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() {

package/dist/components/q2-dropdown.js

@@ -108,6 +108,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.hideLabel = undefined;
     this.disabled = undefined;
     this.popDirection = undefined;
+    this.alignment = 'left';
     this.name = undefined;
     this.context = undefined;
     this.contextValue = undefined;
@@ -291,6 +292,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "hideLabel": [1540, "hide-label"],
     "disabled": [516],
     "popDirection": [513, "pop-direction"],
+    "alignment": [513],
     "name": [513],
     "context": [513],
     "contextValue": [513, "context-value"],

package/dist/components/q2-pill.js

@@ -35,16 +35,16 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.updateSelectedOptionElements = async () => {
       var _a;
-      const { selectedOptions } = this;
+      const { selectedOptions = [] } = this;
       const selectedValues = selectedOptions.map(option => option.value);
       const options = await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
-      if (this.hasOptions)
+      if (this.optionCount)
         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;
-      this.hasOptions = hasOptions;
+    this.determineOptionCount = () => {
+      const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;
+      this.optionCount = numberOfOptions;
     };
     this.clearSelectedOptions = () => {
       this.selectedOptions = [];
@@ -60,7 +60,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       event.stopPropagation();
       if (this.disabled)
         return;
-      if (this.hasOptions) {
+      if (this.optionCount) {
         if (shouldShowActionSheet(this)) {
           this.executeActionSheet(event);
         }
@@ -82,7 +82,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.handleKeydown = async (event) => {
       const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';
-      if (!this.hasOptions || this.disabled || isTabMetaOrCtrl)
+      if (!this.optionCount || this.disabled || isTabMetaOrCtrl)
         return;
       event.preventDefault();
       if (shouldShowActionSheet(this, event)) {
@@ -101,7 +101,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.handleChange = event => {
       event.stopPropagation();
-      if (!this.hasOptions)
+      if (!this.optionCount)
         return;
       this.handleSelectionChanges(event.detail);
     };
@@ -131,12 +131,14 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.selectedOptions = [];
     this.popoverMinHeight = 150;
     this.popoverDirection = undefined;
-    this.hasOptions = undefined;
+    this.popoverAlignment = 'right';
+    this.optionListLabel = undefined;
+    this.optionCount = undefined;
     this.selectedOptionElements = [];
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
-    const observer = new MutationObserver(this.determineHasOptions);
+    const observer = new MutationObserver(this.determineOptionCount);
     observer.observe(this.hostElement, { childList: true, attributes: true });
     this.mutationObserver = observer;
   }
@@ -154,8 +156,8 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /// Getters ///
   get buttonContent() {
-    const { label, selectedOptions, selectedOptionElements, hasOptions } = this;
-    if (!hasOptions || selectedOptionElements.length === 0)
+    const { label, selectedOptions, selectedOptionElements, optionCount } = this;
+    if (!optionCount || selectedOptionElements.length === 0)
       return label;
     else if (selectedOptionElements.length === 1)
       return selectedOptionElements[0].display;
@@ -185,8 +187,8 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         const selectedOption = await this.getOption(value);
         this.selectedOptions = selectedOption
           ? [{ value: selectedOption.value, display: selectedOption.display }]
-          : undefined;
-        this.value = selectedOption.value || undefined;
+          : [];
+        this.value = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || undefined;
       }
     }
     this.change.emit({
@@ -207,7 +209,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     else {
       const selectedOption = await this.getOption(newValue);
       const { value, display } = selectedOption || { value: newValue, display: null };
-      this.selectedOptions = [{ value, display }];
+      this.selectedOptions = value ? [{ value, display }] : [];
     }
   }
   selectedOptionsChanged(newValue) {
@@ -241,20 +243,23 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /// DOM ///
   generateIcon() {
-    const { hasOptions, active } = this;
-    const isButton = hasOptions && active;
+    const { optionCount, active } = this;
+    const isButton = optionCount && active;
     const TagName = isButton ? 'button' : 'div';
-    const iconName = isButton || !hasOptions ? 'close' : 'chevron-down';
+    const iconName = isButton || !optionCount ? 'close' : 'chevron-down';
     return (h(TagName, { class: "btn-close", onClick: isButton && this.clearSelectedOptions, disabled: isButton && this.disabled, "aria-label": isButton && loc('tecton.element.pill.clearSelection'), type: isButton && 'button' }, h("q2-icon", { type: iconName })));
   }
+  generateHiddenElement() {
+    return (h("div", { id: "option-description", class: "sr", "aria-hidden": "true" }, loc('tecton.element.optionList.optionCount', [this.optionCount])));
+  }
   render() {
-    const { hasOptions, active, open } = this;
+    const { optionCount, active, open } = this;
     const wrapperClassNames = ['btn-wrapper'];
-    if (hasOptions || active)
+    if (optionCount || active)
       wrapperClassNames.push('has-icon');
-    if (hasOptions)
+    if (optionCount)
       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, 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))))));
+    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, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": optionCount && 'option-list', "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount && (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(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", null))))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
@@ -275,7 +280,9 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "selectedOptions": [1040],
     "popoverMinHeight": [2, "popover-min-height"],
     "popoverDirection": [1, "popover-direction"],
-    "hasOptions": [32],
+    "popoverAlignment": [1025, "popover-alignment"],
+    "optionListLabel": [1, "option-list-label"],
+    "optionCount": [32],
     "selectedOptionElements": [32]
   }, [[0, "focus", "delegateFocus"], [0, "popoverStateChanged", "popoverStateHandler"]]]);
 function defineCustomElement$1() {

package/dist/components/q2-select.js

@@ -74,6 +74,9 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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) => {
@@ -473,10 +476,10 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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}`, 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()));
+        [], 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 }, 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())));
+    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;

package/dist/components/q2-tag.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { o as overrideFocus, a as isEventFromElement, l as loc } from './index15.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
 import { d as defineCustomElement$5 } from './index2.js';
@@ -17,9 +17,9 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a;
     /// Getters ///
     /// Helpers
-    this.determineHasOptions = () => {
-      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
-      this.hasOptions = hasOptions;
+    this.determineOptionCount = () => {
+      const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;
+      this.optionCount = numberOfOptions;
     };
     /// Event Handlers ///
     this.onClickElsewhere = (event) => {
@@ -34,7 +34,7 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.handleChange = event => {
       event.stopPropagation();
-      if (!this.hasOptions)
+      if (!this.optionCount)
         return;
       const { value } = event.detail;
       this.click.emit({ value });
@@ -47,7 +47,7 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.click.emit({ value });
       }
       else {
-        this.popoverElement.toggle();
+        await this.popoverElement.toggle();
       }
     };
     this.handleKeydown = async (event) => {
@@ -81,11 +81,13 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.theme = undefined;
     this.popoverMinHeight = 150;
     this.popoverDirection = undefined;
-    this.hasOptions = undefined;
+    this.popoverAlignment = 'right';
+    this.optionListLabel = 'options';
+    this.optionCount = undefined;
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
-    const observer = new MutationObserver(this.determineHasOptions);
+    const observer = new MutationObserver(this.determineOptionCount);
     observer.observe(this.hostElement, { childList: true, attributes: true });
     this.mutationObserver = observer;
   }
@@ -100,7 +102,7 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    if (!this.hasOptions)
+    if (!this.optionCount)
       return;
     this.dropdownBtn.focus();
   }
@@ -112,12 +114,15 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.optionList.setActiveElement(null);
   }
   /// DOM ///
+  generateHiddenElement() {
+    return (h("div", { id: "option-description", class: "sr", "aria-hidden": "true" }, loc('tecton.element.optionList.optionCount', [this.optionCount])));
+  }
   render() {
-    const { hasOptions, open } = this;
-    const wrapperClassNames = ['tag-wrapper'];
-    if (hasOptions)
+    const { optionCount, open } = this;
+    const wrapperClassNames = ['tag'];
+    if (optionCount)
       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 }, this.optionCount ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", 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-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, h("div", { class: wrapperClassNames.join(' ') }, this.label), h("q2-icon", { type: "options" }))), this.generateHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.optionCount && (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", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", null)))))));
   }
   get hostElement() { return this; }
   static get style() { return stylesCss; }
@@ -128,7 +133,9 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "theme": [513],
     "popoverMinHeight": [2, "popover-min-height"],
     "popoverDirection": [1, "popover-direction"],
-    "hasOptions": [32]
+    "popoverAlignment": [1025, "popover-alignment"],
+    "optionListLabel": [1, "option-list-label"],
+    "optionCount": [32]
   }, [[0, "focus", "delegateFocus"], [0, "popoverStateChanged", "popoverStateHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {