q2-tecton-elements 1.26.0 → 1.27.0

package/dist/esm/q2-option-list_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bb1c8c7f.js';
-import { o as overrideFocus, w as waitForNextPaint, n as nextPaint, a as isEventFromElement, r as resizeIframe } from './index-5040cd84.js';
+import { o as overrideFocus, w as waitForNextPaint, n as nextPaint, a as isEventFromElement, r as resizeIframe } from './index-a0cc60e3.js';
 
 const stylesCss$1 = "*{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}";
 
@@ -10,6 +10,56 @@ const Q2OptionList = class {
     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) => {
@@ -99,7 +149,7 @@ const Q2OptionList = class {
       let newOption;
       switch (key) {
         case ' ':
-          if (this.searchString) {
+          if (this.searchString && !this.multiple) {
             if (customSearch)
               break;
             this.searchOptions(key, false);
@@ -169,6 +219,8 @@ const Q2OptionList = class {
         case 'Tab':
           if (shiftKey)
             break;
+          if (this.multiple && this.role === 'listbox')
+            break;
           newOption = allOptions.find(element => element.active);
           if (!newOption || newOption.disabled)
             return;
@@ -415,19 +467,8 @@ const Q2OptionList = class {
     }, 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) {
@@ -549,6 +590,7 @@ const Q2Popover = class {
         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;
@@ -582,9 +624,8 @@ const Q2Popover = class {
     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();
@@ -603,13 +644,13 @@ const Q2Popover = class {
     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);
@@ -618,11 +659,11 @@ const Q2Popover = class {
     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';
     }
@@ -648,7 +689,7 @@ const Q2Popover = class {
     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 getElement(this); }
   static get watchers() { return {

package/dist/esm/q2-pagination.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-bb1c8c7f.js';
-import { o as overrideFocus, a as isEventFromElement, l as loc, n as nextPaint } from './index-5040cd84.js';
+import { n as nextPaint, o as overrideFocus, a as isEventFromElement, l as loc } from './index-a0cc60e3.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{text-align:right;display:block}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}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)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";
+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{text-align:right;display:block}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;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)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";
 
 const Q2Pagination = class {
   constructor(hostRef) {
@@ -22,6 +22,20 @@ const Q2Pagination = class {
       }
       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;
@@ -37,12 +51,14 @@ const Q2Pagination = class {
       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;
@@ -83,20 +99,6 @@ const Q2Pagination = class {
       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/esm/q2-pill.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-bb1c8c7f.js';
-import { r as resizeIframe, o as overrideFocus, l as loc, a as isEventFromElement } from './index-5040cd84.js';
+import { r as resizeIframe, o as overrideFocus, l as loc, a as isEventFromElement } from './index-a0cc60e3.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-a9597b32.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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--compt-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--t-primary-l5, #61c4ff);--comp-active-btn-color:var(--t-primary-text, #ffffff);--comp-active-btn-border-color:var(--t-primary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-primary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-primary-l3, #21acff)}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--t-secondary-l5, #d9e1e6);--comp-active-btn-color:var(--t-secondary-text, #141414);--comp-active-btn-border-color:var(--t-secondary-l5, #d9e1e6);--comp-hover-active-btn-background:var(--t-secondary-l3, #c9d5db);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #c9d5db)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #f4fafe);--comp-active-btn-color:var(--t-tertiary-text, #141414);--comp-active-btn-border-color:var(--t-tertiary-l5, #f4fafe);--comp-hover-active-btn-background:var(--t-tertiary-l3, #eff8fd);--comp-hover-active-btn-border-color:var(--t-tertiary-l3, #eff8fd)}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";
@@ -11,12 +11,30 @@ const Q2Pill = class {
     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;
@@ -24,6 +42,7 @@ const Q2Pill = class {
     };
     this.clearSelectedOptions = () => {
       this.selectedOptions = [];
+      this.value = null;
       this.active = false;
       this.open = false;
       this.primaryBtn.focus();
@@ -56,9 +75,10 @@ const Q2Pill = class {
       }
     };
     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);
       }
@@ -66,6 +86,13 @@ const Q2Pill = class {
         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)
@@ -80,7 +107,10 @@ const Q2Pill = class {
       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);
@@ -106,6 +136,7 @@ const Q2Pill = class {
   }
   componentDidLoad() {
     overrideFocus(this.hostElement);
+    this.syncValueProperties();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
@@ -135,12 +166,22 @@ const Q2Pill = class {
     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,
@@ -149,8 +190,35 @@ const Q2Pill = class {
     });
   }
   /// 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) {
@@ -164,7 +232,6 @@ const Q2Pill = class {
     if (open)
       return;
     this.optionList.setActiveElement(null);
-    this.primaryBtn.focus();
   }
   /// DOM ///
   generateIcon() {
@@ -181,11 +248,12 @@ const Q2Pill = class {
       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))))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {
-    "selectedOptions": ["selectedOptionsWatcher"]
+    "value": ["valueChanged"],
+    "selectedOptions": ["selectedOptionsChanged"]
   }; }
 };
 Q2Pill.style = stylesCss;

package/dist/esm/q2-radio-group.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-bb1c8c7f.js';
-import { c as createGuid, o as overrideFocus, a as isEventFromElement, l as loc } from './index-5040cd84.js';
+import { c as createGuid, o as overrideFocus, a as isEventFromElement, l as loc } from './index-a0cc60e3.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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}";
 

package/dist/esm/q2-radio.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-bb1c8c7f.js';
-import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index-5040cd84.js';
+import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index-a0cc60e3.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}.radio-container{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}.radio-container label[for]{font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494))}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:checked+label circle:nth-child(1){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));cursor:pointer;display:block;padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff)}.radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:inset 0 0 0 2px #ffffff}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
+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}.radio-container{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));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;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494))}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:checked+label circle:nth-child(1){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-tile{flex-basis:100px;flex-grow:0;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));cursor:pointer;display:block;padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff)}.radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:inset 0 0 0 2px #ffffff}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
 
 const Q2Radio = class {
   constructor(hostRef) {

package/dist/esm/q2-section.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-bb1c8c7f.js';
-import { r as resizeIframe, o as overrideFocus, a as isEventFromElement, n as nextPaint, l as loc } from './index-5040cd84.js';
+import { r as resizeIframe, o as overrideFocus, a as isEventFromElement, n as nextPaint, l as loc } from './index-a0cc60e3.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;background-color:var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff)))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)))}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";
 

package/dist/esm/q2-select.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-bb1c8c7f.js';
-import { h as handleAriaLabel, o as overrideFocus, l as loc, d as isRelatedTargetWithinHost, a as isEventFromElement, e as isHostLosingFocus } from './index-5040cd84.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, d as isRelatedTargetWithinHost, a as isEventFromElement, e as isHostLosingFocus } from './index-a0cc60e3.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-a9597b32.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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) 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);gap:var(--app-scale-2x, 10px);align-items:center}";
+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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{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-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: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)}";
 
 const Q2Select = class {
   constructor(hostRef) {
@@ -11,12 +11,10 @@ const Q2Select = class {
     this.input = createEvent(this, "input", 7);
     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 = () => {
@@ -69,14 +67,14 @@ const Q2Select = class {
       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) => {
@@ -131,6 +129,7 @@ const Q2Select = class {
     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;
@@ -354,7 +353,7 @@ const Q2Select = class {
     this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });
   }
   calculateMultiSelectSelectedDisplay() {
-    var _a;
+    var _a, _b, _c;
     const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;
     if (!firstSelectedValue)
       return '';
@@ -364,11 +363,15 @@ const Q2Select = class {
       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)
@@ -460,16 +463,18 @@ const Q2Select = class {
         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]))))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/q2-stepper-pane.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-bb1c8c7f.js';
-import { c as createGuid, n as nextPaint, l as loc } from './index-5040cd84.js';
+import { c as createGuid, n as nextPaint, l as loc } from './index-a0cc60e3.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;position:relative}";