q2-tecton-elements 1.23.0 → 1.24.0

package/dist/components/index11.js

@@ -1,383 +1,72 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { o as overrideFocus, i as isEventFromElement } from './index13.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as createGuid, l as loc } from './index15.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
+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}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))));padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-multi-select-header-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 
-const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.change = createEvent(this, "change", 7);
-    this.popoverState = createEvent(this, "popoverState", 7);
-    this.scheduledAfterRender = [];
-    /// Event Handlers ///
-    /* tslint:disable:cyclomatic-complexity */
-    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.popoverState.emit({ 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;
-      }
-    };
-    /* 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;
-      if (target.localName !== 'q2-option' || target.disabled) {
-        return;
-      }
-      this.selectOption(target.value);
+    this.guid = createGuid();
+    this.setHidden = () => {
+      this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
     };
-    this.role = 'listbox';
-    this.direction = 'down';
-    this.customSearch = undefined;
-    this.noSelect = undefined;
-    this.align = undefined;
-    this.selectedOptions = [];
-    this.multiple = undefined;
-    this.disabled = undefined;
-    this.type = undefined;
-    this.hasOptions = undefined;
+    this.disabled = false;
+    this.label = undefined;
+    this.hidden = false;
   }
-  /// LifeCycle Hooks ///
+  /// LIFECYCLE HOOKS ///
   componentWillLoad() {
-    this.hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
-  }
-  componentDidLoad() {
-    overrideFocus(this.hostElement);
-    this.checkOptions();
-    this.selectedOptionsUpdated();
-  }
-  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.popoverState.emit({ 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);
+    const observer = new MutationObserver(this.setHidden);
+    observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
+    this.mutationObserver = observer;
+    // set initially
+    this.setHidden();
+    this.disabledWatcher(this.disabled);
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.mutationObserver = null;
+  }
+  get headerId() {
+    return `q2-optgroup-header-${this.guid}`;
+  }
+  get options() {
+    return Array.from(this.hostElement.querySelectorAll('q2-option'));
+  }
+  ///// OBSERVERS ///////
+  disabledWatcher(disabled) {
+    this.options.forEach(opt => {
+      opt.disabledGroup = !!disabled;
     });
   }
-  setActiveOption() {
-    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.popoverState.emit({ 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();
-    }
-  }
-  /// Listeners ///
-  delegateFocus(event) {
-    if (!isEventFromElement(event, this.hostElement))
-      return;
-    this.popoverState.emit({ open: true });
-    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) {
-    const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
-    if (keysThatTriggerOpen.includes(event.key)) {
-      this.popoverState.emit({ 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)))));
+    return (h("div", { class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { class: "q2-optgroup-options" }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
-    "selectedOptions": ["selectedOptionsUpdated"]
+    "disabled": ["disabledWatcher"]
   }; }
   static get style() { return stylesCss; }
-}, [1, "q2-option-list", {
-    "role": [513],
-    "direction": [513],
-    "customSearch": [516, "custom-search"],
-    "noSelect": [516, "no-select"],
-    "align": [513],
-    "selectedOptions": [1040],
-    "multiple": [516],
+}, [1, "q2-optgroup", {
     "disabled": [516],
-    "type": [1],
-    "hasOptions": [32],
-    "setDefaultActiveElement": [64],
-    "setActiveElement": [64],
-    "handleExternalKeydown": [64]
-  }, [[0, "focus", "delegateFocus"], [0, "click", "handleClick"]]]);
+    "label": [513],
+    "hidden": [32]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["q2-option-list"];
+  const components = ["q2-optgroup"];
   components.forEach(tagName => { switch (tagName) {
-    case "q2-option-list":
+    case "q2-optgroup":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2OptionList);
+        customElements.define(tagName, Q2Optgroup);
       }
       break;
   } });
 }
 defineCustomElement();
 
-export { Q2OptionList as Q, defineCustomElement as d };
+export { Q2Optgroup as Q, defineCustomElement as d };

package/dist/components/index12.js

@@ -1,127 +1,72 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './index7.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{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-flex;width:100%}.container{display:block;overflow:hidden;opacity:0;height:0;position:absolute;visibility:hidden;background-color:var(--tct-popover-background-color, var(--t-popover-background-color, var(--app-white, #ffffff)));color:var(--tct-popover-text-color, var(--t-popover-text-color, var(--t-text, #4d4d4d)));z-index:var(--tct-popover-z-index, var(--t-popover-z-index, 100));width:max-content;min-width:var(--tct-popover-min-width, var(--t-popover-min-width, 135px));box-shadow:var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));text-align:start;left:0;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));max-height:var(--comp-pop-max-height);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([block]) .container{left:unset;right:unset;width:100%}:host([align=right]) .container{right:0;text-align:end;left:unset}:host([open]) .container{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}.container.up{bottom:var(--comp-pop-offset)}click-elsewhere{position:relative;display:block}.content{height:auto}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--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 Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Q2Option = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.popoverStateChanged = createEvent(this, "popoverStateChanged", 7);
-    this.privateDirection = 'down';
-    this.direction = undefined;
-    this.align = undefined;
-    this.open = undefined;
-    this.block = undefined;
-    this.minHeight = undefined;
-    this.controlElement = undefined;
+    this.role = 'option';
+    this.display = undefined;
+    this.value = undefined;
+    this.disabled = undefined;
+    this.disabledGroup = undefined;
+    this.selected = undefined;
+    this.hidden = undefined;
+    this.multiline = undefined;
+    this.active = undefined;
+    this._multiSelectHidden = false;
   }
-  /// Lifecycle hooks ///
-  componentDidLoad() {
-    if (this.open)
-      this.determinePopDirection();
+  componentWillLoad() {
+    this.handleDisplay();
   }
-  componentWillRender() {
-    if (this.containerElement && this.containerElement && this.open)
-      this.determinePopDirection();
-  }
-  /// Methods ///
-  async toggle() {
-    this.open = !this.open;
-  }
-  /// Watchers ///
-  openChanged(open) {
-    this.popoverStateChanged.emit({ open });
-  }
-  /// Listeners ///
-  popoverStateHandler(event) {
-    const { detail: { open }, } = event;
-    if (open === this.open)
+  handleDisplay() {
+    if (this.display || this.multiline)
       return;
-    this.open = open;
-    event.stopPropagation();
-  }
-  /// Helpers ///
-  determinePopDirection() {
-    var _a, _b, _c, _d, _e;
-    const { containerElement, contentElement, direction, controlElement } = this;
-    if (containerElement)
-      containerElement.style.maxHeight = null;
-    if (direction) {
-      return (this.privateDirection = direction);
-    }
-    const contentHeight = contentElement.clientHeight;
-    const { top: topOffset, height } = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {
-      top: 0,
-      height: 0,
-    };
-    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) || 0;
-    const innerHeight = ((_e = (_d = window.Tecton) === null || _d === void 0 ? void 0 : _d.platformDimensions) === null || _e === void 0 ? void 0 : _e.innerHeight) || window.innerHeight;
-    const bottomOffset = scrollY + innerHeight - topOffset - height;
-    const canShowFullSizeBelow = bottomOffset > contentHeight;
-    const canShowFullSizeAbove = contentHeight <= topOffset;
-    // Prefer full size above or below
-    if (canShowFullSizeBelow) {
-      return (this.privateDirection = 'down');
-    }
-    else if (canShowFullSizeAbove || !this.minHeight) {
-      this.determinePopOffset();
-      return (this.privateDirection = 'up');
-    }
-    // If full size will not fit and minHeight is set, then make as tall as possible
-    const { minHeight = 150 } = this;
-    const displayBuffer = 5;
-    const canShowSmallBelow = bottomOffset >= minHeight + displayBuffer;
-    if (canShowSmallBelow) {
-      const maxBelowHeight = Math.max(bottomOffset - displayBuffer, minHeight);
-      containerElement.style.setProperty('--comp-pop-max-height', `${maxBelowHeight}px`);
-      return (this.privateDirection = 'down');
-    }
-    else {
-      const maxAboveHeight = Math.max(topOffset, minHeight);
-      containerElement.style.setProperty('--comp-pop-max-height', `${maxAboveHeight}px`);
-      this.determinePopOffset();
-      return (this.privateDirection = 'up');
-    }
+    this.display = this.hostElement.textContent.trim();
   }
-  determinePopOffset() {
-    var _a;
-    const { controlElement, containerElement } = this;
-    const dropdownHeight = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
-    containerElement.style.setProperty('--comp-pop-offset', `${dropdownHeight}px`);
-  }
-  /// DOM ///
   render() {
-    const containerClasses = ['container', this.privateDirection];
-    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))));
+    const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
+    const isDisabled = disabled || disabledGroup;
+    return (h(Host, { tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
-    "open": ["openChanged"]
+    "display": ["handleDisplay"]
   }; }
   static get style() { return stylesCss; }
-}, [1, "q2-popover", {
-    "direction": [513],
-    "align": [513],
-    "open": [1540],
-    "block": [516],
-    "minHeight": [2, "min-height"],
-    "controlElement": [16],
-    "toggle": [64]
-  }, [[0, "popoverState", "popoverStateHandler"]]]);
+}, [1, "q2-option", {
+    "role": [513],
+    "display": [1025],
+    "value": [513],
+    "disabled": [516],
+    "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-popover"];
+  const components = ["q2-option", "q2-icon"];
   components.forEach(tagName => { switch (tagName) {
-    case "q2-popover":
+    case "q2-option":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Option);
+      }
+      break;
+    case "q2-icon":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2Popover);
+        defineCustomElement$1();
       }
       break;
   } });
 }
 defineCustomElement();
 
-export { Q2Popover as Q, defineCustomElement as d };
+export { Q2Option as Q, defineCustomElement as d };