q2-tecton-elements 1.28.3 → 1.29.1

package/dist/components/index13.js

@@ -1,570 +1,72 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { o as overrideFocus, w as waitForNextPaint, n as nextPaint, a as isEventFromElement } from './index15.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './index8.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
+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{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))}: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)))))}:host(:focus){border:1px solid #33b4ff}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
 
-const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Q2Option = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.change = createEvent(this, "change", 7);
-    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) => {
-      event.stopPropagation();
-      const { activeIndex, customSearch, allOptions } = this;
-      const { key } = event;
-      let nextIndex;
-      switch (key) {
-        case ' ':
-          if (this.searchString) {
-            if (customSearch)
-              break;
-            this.searchOptions(key, true);
-            break;
-          }
-          else if (this.role === 'menu') {
-            this.activeIndex = 0;
-            this.openDropdownWithActiveElement(0);
-          }
-          else {
-            this.setDefaultActiveElement();
-          }
-          break;
-        case 'Enter':
-          if (this.role === 'menu') {
-            this.activeIndex = 0;
-            this.openDropdownWithActiveElement(0);
-          }
-          else {
-            this.setDefaultActiveElement();
-          }
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          this.activeIndex = 0;
-          nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);
-          if (nextIndex === -1)
-            break;
-          this.openDropdownWithActiveElement(nextIndex);
-          break;
-        case 'ArrowDown':
-          event.preventDefault();
-          this.activeIndex = 0;
-          nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(0);
-          if (nextIndex === -1)
-            break;
-          this.openDropdownWithActiveElement(nextIndex);
-          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 || 0) - 10, 0));
-          break;
-        case 'PageDown':
-          event.preventDefault();
-          this.openDropdownWithActiveElement(Math.min((activeIndex || 0) + 10, allOptions.length - 1));
-          break;
-        case 'Tab':
-          this.popoverState.emit({ open: false, action: 'close' });
-          break;
-        case 'Esc':
-        case 'Escape':
-          if (this.noSelect)
-            this.setActiveElement(null);
-          this.popoverState.emit({ open: false, action: 'close' });
-          break;
-        default:
-          if (customSearch)
-            break;
-          if (!key.match(/^[\w]$/))
-            break;
-          this.searchOptions(key, true);
-          break;
-      }
-    };
-    this.internalKeydownHandler = (event) => {
-      event.stopPropagation();
-      const { activeIndex, customSearch, allOptions } = this;
-      const { key, shiftKey } = event;
-      let newOption;
-      switch (key) {
-        case ' ':
-          if (this.searchString && !this.multiple) {
-            if (customSearch)
-              break;
-            this.searchOptions(key, false);
-            break;
-          }
-          event.preventDefault();
-          newOption = allOptions.find(element => element.active);
-          if (!newOption || newOption.disabled)
-            break;
-          this.selectOption(newOption);
-          break;
-        case 'Enter':
-          event.preventDefault();
-          newOption = allOptions.find(element => element.active);
-          if (!newOption || newOption.disabled)
-            break;
-          this.selectOption(newOption);
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          const isFirstOptionActive = activeIndex === 0;
-          if (isFirstOptionActive)
-            break;
-          if (activeIndex === undefined) {
-            this.setDefaultActiveElement();
-            break;
-          }
-          else {
-            const nextIndex = this.getNextVisibleIndex(-1);
-            if (nextIndex === -1)
-              break;
-            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
-            break;
-          }
-        case 'ArrowDown':
-          event.preventDefault();
-          const isLastOptionActive = activeIndex === allOptions.length - 1;
-          if (isLastOptionActive)
-            break;
-          if (activeIndex === undefined) {
-            this.setDefaultActiveElement();
-            break;
-          }
-          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 (shiftKey)
-            break;
-          if (this.multiple && this.role === 'listbox')
-            break;
-          newOption = allOptions.find(element => element.active);
-          if (!newOption || newOption.disabled)
-            return;
-          this.selectOption(newOption);
-          break;
-        case 'Esc':
-        case 'Escape':
-          if (this.noSelect)
-            this.setActiveElement(null);
-          this.popoverState.emit({ open: false, action: 'close' });
-          break;
-        default:
-          if (customSearch)
-            break;
-          if (!key.match(/^[\w]$/))
-            break;
-          this.searchOptions(key, false);
-          break;
-      }
-    };
-    /* tslint:enable:cyclomatic-complexity */
-    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;
-      const option = target.closest('q2-option');
-      this.selectOption(option);
-    };
-    this.role = 'listbox';
-    this.customSearch = undefined;
-    this.noSelect = undefined;
-    this.align = undefined;
-    this.selectedOptions = [];
-    this.multiple = undefined;
+    this.role = 'option';
+    this.display = undefined;
+    this.value = undefined;
     this.disabled = undefined;
-    this.showSelected = undefined;
-    this.type = undefined;
-    this.hasOptions = undefined;
+    this.disabledGroup = undefined;
+    this.selected = undefined;
+    this.hidden = undefined;
+    this.multiline = undefined;
+    this.active = undefined;
+    this._multiSelectHidden = false;
   }
-  /// LifeCycle Hooks ///
   componentWillLoad() {
-    this.hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
-  }
-  componentDidLoad() {
-    overrideFocus(this.hostElement);
-    this.checkOptions();
-    this.selectedOptionsUpdated();
-    this.ready.emit();
-  }
-  componentDidRender() {
-    this.scheduledAfterRender.forEach(fn => fn());
-    this.scheduledAfterRender = [];
-  }
-  /// Getters ///
-  get allContents() {
-    const rootSlot = this.getRootSlot(this.hostElement);
-    const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];
-    return rootSlot.filter(element => acceptedTags.includes(element.tagName));
-  }
-  get allOptions() {
-    const contents = this.allContents;
-    const extractOptions = (elements) => {
-      return elements.reduce((acc, element) => {
-        if (element.tagName === 'Q2-OPTGROUP') {
-          return [...acc, ...extractOptions(Array.from(element.children))];
-        }
-        else if (element.tagName === 'Q2-OPTION') {
-          return [...acc, element];
-        }
-        else {
-          return acc;
-        }
-      }, []);
-    };
-    return extractOptions(contents);
-  }
-  get allVisibleOptions() {
-    return this.allOptions.filter(option => !option.hidden && !option._multiSelectHidden && !option.disabled && !option.disabledGroup);
-  }
-  /// Helpers ///
-  async checkOptions() {
-    const { type } = this;
-    const options = await this.getOptions();
-    if (!type)
-      return;
-    const optionRole = type === 'menu' ? 'menuitem' : 'option';
-    options.forEach(option => {
-      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' });
-  }
-  async openDropdownWithActiveElement(activeIndex) {
-    if (this.disabled)
-      return;
-    this.activeIndex = activeIndex;
-    this.popoverState.emit({ open: true, action: 'open' });
-    await waitForNextPaint();
-    this.setActiveOption();
-    await waitForNextPaint();
-    this.setFocusedOption();
-    this.scrollToActiveOption();
-  }
-  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;
-    const { allOptions, selectedOptions } = this;
-    const selectedValue = ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) || undefined;
-    allOptions.forEach(element => {
-      element.selected = element.value === selectedValue;
-    });
-  }
-  updateMultipleOptionAttrs() {
-    const { allOptions, selectedOptions } = this;
-    const selectedValues = selectedOptions.map(({ value }) => value);
-    allOptions.forEach(element => {
-      element.selected = selectedValues.includes(element.value);
-    });
-  }
-  setActiveOption() {
-    const activeIndex = this.activeIndex;
-    this.allOptions.forEach((element, elementIndex) => {
-      element.active = activeIndex === elementIndex;
-    });
-  }
-  setFocusedOption() {
-    const option = this.allOptions[this.activeIndex];
-    if (!option)
-      return;
-    const isHostElementVisible = !!this.hostElement.offsetParent;
-    if (isHostElementVisible)
-      option.focus();
-    else
-      nextPaint(() => option.focus());
-  }
-  getNextVisibleIndex(direction) {
-    const { allVisibleOptions, allOptions, activeIndex } = this;
-    const activeOption = allOptions[activeIndex];
-    const visibleActiveOptionIndex = allVisibleOptions.indexOf(activeOption);
-    let nextVisibleOptionIndex = visibleActiveOptionIndex + direction;
-    if (nextVisibleOptionIndex < 0) {
-      nextVisibleOptionIndex = allVisibleOptions.length - 1;
-    }
-    else if (nextVisibleOptionIndex > allVisibleOptions.length - 1) {
-      nextVisibleOptionIndex = 0;
-    }
-    const nextVisibleOption = allVisibleOptions[nextVisibleOptionIndex];
-    return allOptions.indexOf(nextVisibleOption);
+    this.handleDisplay();
   }
-  focusSelectedSibling(option) {
-    const { allVisibleOptions, allOptions } = this;
-    const hasNoSiblings = allVisibleOptions.length < 2;
-    if (hasNoSiblings) {
-      this.showSelected = false;
+  handleDisplay() {
+    if (this.display || this.multiline)
       return;
-    }
-    const selectedOptionVisibleIndex = allVisibleOptions.indexOf(option);
-    const nextVisibleSiblingIndex = selectedOptionVisibleIndex
-      ? selectedOptionVisibleIndex - 1
-      : selectedOptionVisibleIndex + 1;
-    const nextVisibleSibling = allVisibleOptions[nextVisibleSiblingIndex];
-    const nextSiblingIndex = allOptions.indexOf(nextVisibleSibling);
-    this.activeIndex = nextSiblingIndex;
-    this.setFocusedOption();
-    this.scheduledAfterRender.push(() => {
-      option._multiSelectHidden = !option.selected;
-    });
+    this.display = this.hostElement.textContent.trim();
   }
-  selectOption(selectedOption) {
-    const { multiple, noSelect, showSelected } = this;
-    if (!selectedOption || selectedOption.disabled || selectedOption.disabledGroup)
-      return;
-    const selectedValue = selectedOption.value;
-    const valueObject = {
-      value: selectedValue,
-      display: selectedOption.display || selectedOption.innerText.trim(),
-    };
-    let values = [];
-    if (multiple) {
-      const { selectedOptions } = this;
-      const isAlreadySelected = selectedOptions.find(option => option.value === selectedValue);
-      if (isAlreadySelected) {
-        values = selectedOptions.filter(({ value }) => value !== selectedValue);
-      }
-      else {
-        values = [...selectedOptions, valueObject];
-      }
-      if (showSelected)
-        this.focusSelectedSibling(selectedOption);
-    }
-    else {
-      values = [valueObject];
-    }
-    if (noSelect)
-      this.setActiveElement(null);
-    else
-      this.selectedOptions = values;
-    this.change.emit({ value: selectedValue, values });
-    if (multiple)
-      return;
-    this.popoverState.emit({ open: false, action: 'select' });
-  }
-  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);
-  }
-  searchOptions(key, shouldSelect) {
-    this.searchString = key;
-    this.searchAndFocus(key, shouldSelect);
-  }
-  /// Watchers ///
-  showSelectedUpdated(showSelected) {
-    if (showSelected && this.selectedOptions.length === 0) {
-      this.showSelected = false;
-      return;
-    }
-    this.allOptions.forEach(option => (option._multiSelectHidden = showSelected ? !option.selected : false));
-  }
-  selectedOptionsUpdated() {
-    if (this.multiple) {
-      this.updateMultipleOptionAttrs();
-    }
-    else {
-      this.updateSingleOptionAttrs();
-    }
-  }
-  /// Listeners ///
-  delegateFocus(event) {
-    if (!isEventFromElement(event, this.hostElement))
-      return;
-    this.popoverState.emit({ open: true, action: 'open' });
-    const { activeIndex } = this;
-    if (typeof activeIndex === 'number' && activeIndex > -1) {
-      this.setActiveOption();
-      this.setFocusedOption();
-    }
-    else {
-      this.setDefaultActiveElement();
-    }
-  }
-  handleClick(event) {
-    event.stopPropagation();
-  }
-  /// Public Methods ///
-  async setDefaultActiveElement() {
-    this.activeIndex = this.getDefaultActiveIndex();
-    this.setActiveOption();
-    this.setFocusedOption();
-  }
-  async setActiveElement(index) {
-    this.activeIndex = index;
-    this.setActiveOption();
-    this.setFocusedOption();
-  }
-  async handleExternalKeydown(event) {
-    this.externalKeydownHandler(event);
-  }
-  async getContents() {
-    return this.allContents;
-  }
-  async getOptions() {
-    return this.allOptions;
-  }
-  /// DOM ///
   render() {
-    return (h(Host, null, h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { class: "options", role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", null)))));
+    const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
+    const isDisabled = disabled || disabledGroup;
+    return (h(Host, { tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
-    "showSelected": ["showSelectedUpdated"],
-    "selectedOptions": ["selectedOptionsUpdated"]
+    "display": ["handleDisplay"]
   }; }
   static get style() { return stylesCss; }
-}, [1, "q2-option-list", {
+}, [1, "q2-option", {
     "role": [513],
-    "customSearch": [516, "custom-search"],
-    "noSelect": [516, "no-select"],
-    "align": [513],
-    "selectedOptions": [1040],
-    "multiple": [516],
+    "display": [1025],
+    "value": [513],
     "disabled": [516],
-    "showSelected": [1540, "show-selected"],
-    "type": [1],
-    "hasOptions": [32],
-    "setDefaultActiveElement": [64],
-    "setActiveElement": [64],
-    "handleExternalKeydown": [64],
-    "getContents": [64],
-    "getOptions": [64]
-  }, [[0, "focus", "delegateFocus"], [0, "click", "handleClick"]]]);
+    "disabledGroup": [516, "disabled-group"],
+    "selected": [516],
+    "hidden": [516],
+    "multiline": [516],
+    "active": [516],
+    "_multiSelectHidden": [516, "_multiselecthidden"]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["q2-option-list"];
+  const components = ["q2-option", "q2-icon"];
   components.forEach(tagName => { switch (tagName) {
-    case "q2-option-list":
+    case "q2-option":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Option);
+      }
+      break;
+    case "q2-icon":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2OptionList);
+        defineCustomElement$1();
       }
       break;
   } });
 }
 defineCustomElement();
 
-export { Q2OptionList as Q, defineCustomElement as d };
+export { Q2Option as Q, defineCustomElement as d };