q2-tecton-elements 1.11.4 → 1.12.1

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

@@ -0,0 +1,353 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-be8376c0.js';
+import { o as overrideFocus, i as isEventFromElement } from './index-fa32f694.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.content{margin-top:var(--tct-option-list-margin, var(--t-option-list-margin, var(--app-scale-1x, 5px)));position:absolute;height:0;opacity:0;visibility:hidden;background-color:var(--app-white);color:var(--t-font-color);z-index:100;width:max-content;min-width:var(--tct-option-list-min-width, var(--t-option-list-min-width, 135px));box-shadow:var(--app-shadow-1);overflow:hidden;text-align:start;transition:opacity var(--app-tween-1);border-radius:var(--tct-option-list-border-radius, var(--t-option-list-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}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host(:not([align=right])) .content{left:0}:host([align=right]) .content{right:0}:host([open]) .content{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([is-sizeable]) .content{display:block;height:auto}:host([alignment=right]) .content{left:unset;right:0}";
+
+const Q2OptionList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "change", 7);
+    this.optionListState = createEvent(this, "optionListState", 7);
+    this.role = 'listbox';
+    this.direction = 'down';
+    this.selectedOptions = [];
+    this.scheduledAfterRender = [];
+    /// Event Handlers ///
+    this.keydownHandler = (event, ignoreSelectionEvents) => {
+      event.stopPropagation();
+      const { activeIndex, customSearch, allOptions } = this;
+      const { key, shiftKey } = event;
+      let newOption;
+      switch (key) {
+        case ' ':
+        case 'Enter':
+          if (ignoreSelectionEvents) {
+            this.setDefaultActiveElement();
+            break;
+          }
+          event.preventDefault();
+          newOption = allOptions.find(element => element.active);
+          if (!newOption || newOption.disabled)
+            break;
+          this.selectOption(newOption.value);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          const isFirstOption = activeIndex === 0;
+          if (isFirstOption)
+            break;
+          if (activeIndex === undefined) {
+            this.setDefaultActiveElement();
+          }
+          else {
+            const nextIndex = this.getNextVisibleIndex(-1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          const isLastOption = activeIndex === allOptions.length - 1;
+          if (isLastOption)
+            break;
+          if (activeIndex === undefined) {
+            this.setDefaultActiveElement();
+          }
+          else {
+            const nextIndex = this.getNextVisibleIndex(1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(allOptions.length - 1);
+          break;
+        case 'PageUp':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));
+          break;
+        case 'PageDown':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.min(activeIndex + 10, allOptions.length - 1));
+          break;
+        case 'Tab':
+          if (ignoreSelectionEvents)
+            break;
+          if (shiftKey)
+            break;
+          newOption = allOptions.find(element => element.active);
+          if (!newOption || newOption.disabled)
+            return;
+          this.selectOption(newOption.value);
+          break;
+        case 'Esc':
+        case 'Escape':
+          if (this.noSelect)
+            this.setActiveElement(null);
+          this.open = false;
+          break;
+        default:
+          if (customSearch)
+            break;
+          if (!key.match(/^[A-Za-z0-9]$/))
+            break;
+          // search in non-searchable select: alpha-numeric only
+          this.searchAndFocus(key);
+          break;
+      }
+    };
+    this.focusoutHandler = (event) => {
+      const { relatedTarget } = event;
+      const isInDropdown = this.allOptions.includes(relatedTarget);
+      const isInLightDom = !isInDropdown && this.hostElement.contains(relatedTarget);
+      if (isInDropdown || isInLightDom) {
+        event.stopPropagation();
+      }
+    };
+    this.clickHandler = (event) => {
+      const target = event.target;
+      if (target.localName !== 'q2-option' || target.disabled) {
+        return;
+      }
+      this.selectOption(target.value);
+    };
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    this.hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+    this.checkOptions();
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  /// Getters ///
+  get allOptions() {
+    return this.getRootSlot(this.hostElement);
+  }
+  /// Helpers ///
+  checkOptions() {
+    const { noSelect, type, allOptions } = this;
+    if (!noSelect && !type)
+      return;
+    const optionRole = type === 'menu' ? 'menuitem' : 'option';
+    allOptions.forEach(option => {
+      if (noSelect)
+        option.noSelect = true;
+      if (type)
+        option.role = optionRole;
+    });
+  }
+  getRootSlot(element) {
+    var _a;
+    const slot = element.querySelector('slot');
+    const assignedElements = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedElements()) !== null && _a !== void 0 ? _a : Array.from(element.children);
+    const hasAnotherSlot = !!assignedElements.length && assignedElements[0].tagName === 'SLOT';
+    if (hasAnotherSlot) {
+      return this.getRootSlot(assignedElements[0]);
+    }
+    else {
+      return assignedElements;
+    }
+  }
+  scrollToActiveOption() {
+    const activeOption = this.allOptions[this.activeIndex];
+    activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
+  }
+  resizeIframe() {
+    var _a, _b;
+    return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  openDropdownWithActiveElement(activeIndex) {
+    if (this.disabled)
+      return;
+    this.activeIndex = activeIndex;
+    this.open = true;
+    this.setActiveOption();
+    this.setFocusedOption();
+    this.scheduledAfterRender.push(() => {
+      this.scrollToActiveOption();
+      this.resizeIframe();
+    });
+  }
+  getDefaultActiveIndex() {
+    const { allOptions } = this;
+    const firstSelected = allOptions.findIndex(element => element.selected);
+    if (firstSelected > -1)
+      return firstSelected;
+    const firstEnabled = allOptions.findIndex(element => !element.hidden);
+    if (firstEnabled > -1)
+      return firstEnabled;
+    return 0;
+  }
+  updateSingleOptionAttrs() {
+    var _a, _b;
+    const { allOptions, selectedOptions } = this;
+    const singleValue = (_b = (_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : undefined;
+    allOptions.forEach(element => {
+      element.selected = element.value === singleValue;
+    });
+  }
+  updateMultipleOptionAttrs() {
+    const { allOptions, selectedOptions } = this;
+    const selectedValues = selectedOptions.map(option => option.value);
+    allOptions.forEach(element => {
+      element.selected = selectedValues.includes(element.value);
+    });
+  }
+  setActiveOption() {
+    if (!this.open)
+      return;
+    const activeIndex = this.activeIndex;
+    this.allOptions.forEach((element, elementIndex) => {
+      element.active = activeIndex === elementIndex;
+    });
+  }
+  setFocusedOption() {
+    const option = this.allOptions[this.activeIndex];
+    if (!option)
+      return;
+    setTimeout(() => {
+      option.focus();
+    }, 25);
+  }
+  getNextVisibleIndex(direction) {
+    let index = this.activeIndex + direction;
+    while (index >= 0 && index <= this.allOptions.length - 1) {
+      const { display, visibility } = window.getComputedStyle(this.allOptions[index]);
+      if (display !== 'none' && visibility !== 'hidden') {
+        return index;
+      }
+      index = index + direction;
+    }
+    return -1;
+  }
+  selectOption(selectedValue) {
+    const option = this.allOptions.find(({ value }) => value === selectedValue);
+    const valueObject = {
+      value: selectedValue,
+      display: option.display || option.innerText.trim()
+    };
+    const { multiple, noSelect } = this;
+    let values;
+    if (multiple) {
+      const { selectedOptions = [] } = this;
+      const isAlreadySelected = !!selectedOptions.find(({ value }) => value === selectedValue);
+      if (isAlreadySelected) {
+        values = selectedOptions.filter(({ value }) => value !== selectedValue);
+      }
+      else {
+        values = [...selectedOptions, valueObject];
+      }
+    }
+    else {
+      values = [valueObject];
+    }
+    if (noSelect)
+      this.setActiveElement(null);
+    else
+      this.selectedOptions = values;
+    this.change.emit({ value: selectedValue, values });
+    if (multiple)
+      return;
+    this.open = false;
+  }
+  adjustActiveOptionAndScroll(numToAdd) {
+    this.activeIndex += numToAdd;
+    this.setActiveOption();
+    this.setFocusedOption();
+    this.scrollToActiveOption();
+  }
+  resetTimer() {
+    if (this.searchStringTimer) {
+      clearTimeout(this.searchStringTimer);
+    }
+    this.searchStringTimer = window.setTimeout(() => {
+      this.searchString = null;
+    }, 2000);
+  }
+  searchAndFocus(key) {
+    this.resetTimer();
+    let searchString = this.searchString ? `${this.searchString}${key}` : key;
+    searchString = searchString.replace(/[^0-9a-z]/gi, '');
+    this.searchString = searchString;
+    const searchRegEx = new RegExp(searchString, 'i');
+    const foundIndex = this.allOptions.findIndex(option => option.value === searchString || option.textContent.match(searchRegEx));
+    if (foundIndex === -1)
+      return;
+    this.setActiveElement(foundIndex);
+  }
+  /// Watchers ///
+  selectedOptionsUpdated() {
+    if (this.multiple) {
+      this.updateMultipleOptionAttrs();
+    }
+    else {
+      this.updateSingleOptionAttrs();
+    }
+  }
+  openChanged(newValue) {
+    this.optionListState.emit({ open: newValue });
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.open = true;
+    this.setDefaultActiveElement();
+  }
+  handleClick(event) {
+    event.stopPropagation();
+  }
+  /// Public Methods ///
+  toggle() {
+    const isOpen = !this.open;
+    this.open = isOpen;
+  }
+  setDefaultActiveElement() {
+    this.activeIndex = this.getDefaultActiveIndex();
+    this.setActiveOption();
+    this.setFocusedOption();
+  }
+  setActiveElement(index) {
+    this.activeIndex = index;
+    this.setActiveOption();
+    this.setFocusedOption();
+  }
+  handleExternalKeydown(event) {
+    const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
+    if (keysThatTriggerOpen.includes(event.key)) {
+      this.open = true;
+    }
+    const keysThatTriggerDefault = ['ArrowDown', 'ArrowUp'];
+    if (keysThatTriggerDefault.includes(event.key)) {
+      event.preventDefault();
+      this.setDefaultActiveElement();
+    }
+    else {
+      this.keydownHandler(event, true);
+    }
+  }
+  /// 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.keydownHandler, onClick: this.clickHandler }, h("slot", null)))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "selectedOptions": ["selectedOptionsUpdated"],
+    "open": ["openChanged"]
+  }; }
+};
+Q2OptionList.style = stylesCss;
+
+export { Q2OptionList as q2_option_list };

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

@@ -1,26 +1,18 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-be8376c0.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-be8376c0.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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{padding:0 var(--tct-scale-2, var(--app-scale-2, 10px));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px))) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background-color:var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))}q2-icon{grid-area:icon;--tct-icon-size:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px)))}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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{padding:0 var(--tct-scale-2, var(--app-scale-2, 10px));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px))) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background-color:var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))}q2-icon{grid-area:icon;--tct-icon-size:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px)))}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
 
 const Q2Option = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.click = createEvent(this, "click", 7);
     this.role = 'option';
     this.tabindex = '-1';
     this._multiSelectHidden = false;
-    this.onClick = (event) => {
-      event.stopImmediatePropagation();
-      const { disabled, disabledGroup } = this;
-      if (disabled || disabledGroup)
-        return;
-      this.click.emit();
-    };
   }
   render() {
     const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
     const isDisabled = disabled || disabledGroup;
-    return (h(Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content", onClick: this.onClick }, h("slot", null))));
+    return (h(Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
   }
   get hostElement() { return getElement(this); }
 };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { o as overrideFocus, i as isEventFromElement, l as loc, n as nextPaint } from './index-0e13a57f.js';
+import { o as overrideFocus, i as isEventFromElement, l as loc, n as nextPaint } from './index-fa32f694.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}";
 

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

@@ -0,0 +1,133 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-be8376c0.js';
+import { o as overrideFocus, l as loc, i as isEventFromElement } from './index-fa32f694.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px));--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-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-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, #61c4ff);--comp-btn-color:var(--t-secondary-text, #000000);--comp-active-btn-border-color:var(--t-secondary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-secondary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #21acff)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #61c4ff);--comp-btn-color:var(--t-tertiary-text, #000000);--comp-active-btn-border-color:var(--t-tertiary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-tertiary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-tertiary-l3, #21acff)}q2-option-list{position:absolute;left:0}.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-gray-9, #999999)));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-size-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)}: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;stroke:var(--comp-btn-color);--tct-icon-stroke-primary:var(--comp-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{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))))}";
+
+const Q2Pill = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "change", 7);
+    this.selectedOptions = [];
+    this.scheduledAfterRender = [];
+    /// Helpers
+    this.determineHasOptions = () => {
+      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
+      this.hasOptions = hasOptions;
+    };
+    this.clearSelectedOptions = () => {
+      this.selectedOptions = [];
+      this.active = false;
+      this.open = false;
+      this.primaryBtn.focus();
+      this.change.emit({ value: null, values: [], active: false });
+    };
+    /// Event Handlers ///
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      if (this.disabled)
+        return;
+      if (this.hasOptions) {
+        this.optionList.toggle();
+      }
+      else {
+        const { value, label } = this;
+        const isActive = (this.active = !this.active);
+        const values = isActive ? [{ value, display: label }] : [];
+        this.selectedOptions = values;
+        this.change.emit({
+          value: value,
+          values,
+          active: isActive
+        });
+      }
+    };
+    this.handleKeydown = (event) => {
+      if (!this.hasOptions || this.disabled)
+        return;
+      this.optionList.handleExternalKeydown(event);
+    };
+    this.handleChange = event => {
+      if (!this.hasOptions)
+        return;
+      const { value, values } = event.detail;
+      const isActive = !!values.length;
+      if (!this.hostElement.onchange) {
+        this.selectedOptions = values;
+        this.active = isActive;
+      }
+      this.change.emit({ value: value, values, active: isActive });
+    };
+    this.handleFocusout = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (Array.from(this.hostElement.children).includes(relatedTarget))
+        return;
+      if (relatedTarget && !(event.relatedTarget instanceof HTMLElement))
+        return;
+      if (relatedTarget && relatedTarget.closest('.btn-height-wrapper'))
+        return;
+      this.optionList.open = false;
+    };
+    this.handleWrapperClick = () => {
+      this.primaryBtn.focus();
+      this.primaryBtn.click();
+    };
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    const observer = new MutationObserver(this.determineHasOptions);
+    observer.observe(this.hostElement, { childList: true, attributes: true });
+    this.mutationObserver = observer;
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.mutationObserver = null;
+  }
+  /// Getters ///
+  get buttonContent() {
+    const { label, selectedOptions, hasOptions } = this;
+    if (!hasOptions || selectedOptions.length === 0)
+      return label;
+    else if (selectedOptions.length === 1)
+      return selectedOptions[0].display;
+    return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.primaryBtn.focus();
+  }
+  optionListStateEvent({ detail: { open } }) {
+    this.open = open;
+    if (!open)
+      this.primaryBtn.focus();
+  }
+  /// DOM ///
+  generateIcon() {
+    const { hasOptions, active } = this;
+    const isButton = hasOptions && active;
+    const TagName = isButton ? 'button' : 'div';
+    const iconName = isButton || !hasOptions ? '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 })));
+  }
+  render() {
+    const { hasOptions, active, open } = this;
+    let wrapperClassNames = ['btn-wrapper'];
+    if (hasOptions || active)
+      wrapperClassNames.push('has-icon');
+    if (hasOptions)
+      wrapperClassNames.push('has-options');
+    return (h(Fragment, null, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", type: "button", "test-id": "btn-control", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, onFocusout: this.handleFocusout, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": hasOptions && open ? 'true' : 'false' }, this.buttonContent, !hasOptions && active && (h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")")))), this.generateIcon()), this.hasOptions && (h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), open: this.open, onChange: this.handleChange, multiple: this.multiple, onFocusout: this.handleFocusout, selectedOptions: this.selectedOptions }, h("slot", null)))));
+  }
+  get hostElement() { return getElement(this); }
+};
+Q2Pill.style = stylesCss;
+
+export { Q2Pill as q2_pill };

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-be8376c0.js';
-import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-0e13a57f.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-fa32f694.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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-2, 10px))}fieldset{padding:0;margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, transparent, white)}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.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-1, 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))}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}.flexed.right{justify-content:right}";
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index-0e13a57f.js';
+import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index-fa32f694.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));display:block}:host .radio-container{margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}:host .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-1, 5px))}:host .radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}:host .radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}:host .radio-container input:focus+label svg{box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}:host .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)))}:host .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(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}:host .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)}:host .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)))}:host .radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}:host .radio-tile label[for]{align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));cursor:pointer;display:block;padding:1rem;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}:host .radio-tile input:focus+label{border-color:#0079c1;box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}:host .radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e));box-shadow:inset 0 0 0 2px #ffffff}:host .radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid #0079c1;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}:host input:disabled+label{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-0e13a57f.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-fa32f694.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}@keyframes expandVertical{0%{height:0}}@keyframes collapseVertical{100%{height:0}}:host{display:block;background-color:var(--tct-section-bg, var(--t-section-bg, var(--tct-white, var(--app-white, #ffffff))));color:var(--tct-section-font-color, var(--t-section-font-color, #2e2e2e));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, 3px));margin:var(--tct-scale-3, var(--app-scale-3, 15px))}@media screen and (max-width: 767px){:host{margin:var(--tct-scale-3, var(--app-scale-3, 15px)) 0}}.q2-section-wrapper{display:block;padding:var(--tct-scale-1, var(--app-scale-1, 5px)) 0}.q2-section-wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, inherit)}.q2-section-header{padding:0 var(--tct-scale-3, var(--app-scale-3, 15px));display:flex}.has-header .q2-section-header{min-height:44px}.q2-section-header-content{flex:1 1 100%;min-width:0;align-self:center}.collapsible .q2-section-header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.toggle-icon{transition:transform var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}.collapsed .toggle-icon{transform:rotate(180deg)}.q2-section-content-wrapper{height:auto}.q2-section-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-3, var(--app-scale-3, 15px))}.q2-section-content:focus{box-shadow:none}.expanded.animate .q2-section-content-wrapper{animation:expandVertical var(--tct-tween-2, var(--app-tween-2, 0.4s ease)) forwards}.collapsed .q2-section-content-wrapper{height:0;animation:collapseVertical 0s forwards;animation-duration:0;padding-top:0;visibility:hidden;overflow:hidden}.collapsed.animate .q2-section-content-wrapper{animation:collapseVertical var(--tct-tween-1, var(--app-tween-1, 0.2s ease)) forwards}.animate .q2-section-content-wrapper{overflow:hidden}";
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, s as setPopProperties, l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-0e13a57f.js';
+import { c as createGuid, s as setPopProperties, l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-fa32f694.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);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{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}.custom-display-content{position:absolute;bottom:0;left:calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);height:44px;width:calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 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-list(--tct-scale-3, --app-scale-3, 15px) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px))}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}.q2-element-dropdown.dropup{bottom:40px}";
 
@@ -18,6 +18,7 @@ const Q2Select = class {
     this.optional = false;
     this.dropdownOpen = false;
     this.onlyShowingSelected = false;
+    this.searchText = '';
     this.hasCustomDisplay = false;
     this.inputFocused = false;
     this.scheduledAfterRender = [];
@@ -238,10 +239,17 @@ const Q2Select = class {
     };
     this.inputInputHandler = (event) => {
       event.stopPropagation();
+      const inputValue = this.inputField.value;
+      const eventValue = event.detail.value;
+      const didChangeText = inputValue !== eventValue;
+      const shouldClearValue = !!this.value && didChangeText;
+      if (shouldClearValue) {
+        this.selectOption('');
+      }
       if (!this.dropdownOpen)
         this.openDropdownWithoutActiveElement();
-      this.searchText = event.detail.value;
-      this.input.emit({ query: event.detail.value });
+      this.searchText = eventValue;
+      this.input.emit({ query: eventValue });
     };
     this.inputFocusHandler = () => {
       this.inputFocused = true;
@@ -591,11 +599,12 @@ const Q2Select = class {
     }, 1000);
   }
   clickHandler(event) {
-    const target = event.target;
-    if (target.localName !== 'q2-option' || target.disabled) {
+    const selected = event.target.closest('q2-option');
+    if (!selected ||
+      (selected.hasAttribute('disabled') && selected.getAttribute('disabled') !== 'false')) {
       return;
     }
-    this.selectOption(target.value, true);
+    this.selectOption(selected.getAttribute('value'), true);
   }
   keydownHandler(event) {
     this.inputKeydownHandler(event);

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, l as loc } from './index-0e13a57f.js';
+import { c as createGuid, l as loc } from './index-fa32f694.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}";