q2-tecton-elements 1.17.0 → 1.18.0

package/dist/collection/components/q2-calendar/q2-month-picker.js

@@ -0,0 +1,246 @@
+import { Component, Prop, Element, h, State, Event } from '@stencil/core';
+import { loc, overrideFocus } from 'src/utils';
+export class Q2MonthPicker {
+  constructor() {
+    this.year = Number(new Date().toLocaleString('en-US', { year: 'numeric' }));
+    this.selectedIndex = 0;
+    this.focusedIndex = 0;
+    this.showYearLayer = false;
+    this.scheduledAfterRender = [];
+    this.monthGrid = [
+      [0, 1, 2],
+      [3, 4, 5],
+      [6, 7, 8],
+      [9, 10, 11],
+    ];
+    this.months = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ].map(mon => ({
+      label: loc(`tecton.element.calendar.months.${mon}`),
+      abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),
+    }));
+    this.onMonthSelection = (event) => {
+      var _a, _b;
+      const targetElement = event.target.closest('.month-button');
+      if ((_a = targetElement === null || targetElement === void 0 ? void 0 : targetElement.dataset) === null || _a === void 0 ? void 0 : _a.index) {
+        this.selectMonth(Number((_b = targetElement === null || targetElement === void 0 ? void 0 : targetElement.dataset) === null || _b === void 0 ? void 0 : _b.index));
+      }
+    };
+    this.onMonthKeydown = (event) => {
+      if (event.key === 'Escape' || event.key === 'Esc') {
+        this.toggleChange.emit({ close: true });
+        return;
+      }
+      const monthIndex = event.target.dataset.index;
+      if (!monthIndex)
+        return;
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectMonth(Number(monthIndex));
+      }
+      else {
+        const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);
+        this.focusMonth(nextMonthIndex);
+      }
+    };
+    this.moveMonth = (grid, index, event) => {
+      const rows = grid.length;
+      const cols = grid[0].length;
+      const row = Math.floor(index / cols);
+      const col = index % cols;
+      const current = [row, col];
+      if (event.key === 'ArrowUp') {
+        event.stopPropagation();
+        event.preventDefault();
+        return grid[Math.max(0, current[0] - 1)][current[1]];
+      }
+      else if (event.key === 'ArrowDown') {
+        event.stopPropagation();
+        event.preventDefault();
+        return grid[Math.min(rows - 1, current[0] + 1)][current[1]];
+      }
+      else if (event.key === 'ArrowLeft') {
+        event.stopPropagation();
+        event.preventDefault();
+        return Math.max(0, index - 1);
+      }
+      else if (event.key === 'ArrowRight') {
+        event.stopPropagation();
+        event.preventDefault();
+        return Math.min(this.months.length - 1, index + 1);
+      }
+      else {
+        return grid[current[0]][current[1]];
+      }
+    };
+    this.focusMonth = (index) => {
+      const nextMonth = this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${index}"]`);
+      if (nextMonth) {
+        this.focusedIndex = index;
+        nextMonth.focus();
+      }
+    };
+    this.selectMonth = (index) => {
+      var _a, _b, _c;
+      this.selectedIndex = index;
+      this.focusedIndex = index;
+      const nextMonth = this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${index}"]`);
+      (_a = this.hostElement.shadowRoot
+        .querySelectorAll(`.month-button`)) === null || _a === void 0 ? void 0 : _a.forEach(el => el.classList.remove('active'));
+      nextMonth === null || nextMonth === void 0 ? void 0 : nextMonth.classList.add('active');
+      nextMonth === null || nextMonth === void 0 ? void 0 : nextMonth.focus();
+      const value = {
+        view: 'day',
+        monthIndex: index,
+        selectedYear: this.year,
+      };
+      (_c = (_b = this.hostElement).onchange) === null || _c === void 0 ? void 0 : _c.call(_b, new CustomEvent('click', {
+        bubbles: true,
+        detail: value,
+      }));
+      this.viewChange.emit(value);
+    };
+    this.selectYear = (year) => {
+      this.year = Math.max(1970, year);
+    };
+  }
+  componentDidRender() {
+    var _a;
+    (_a = this.scheduledAfterRender) === null || _a === void 0 ? void 0 : _a.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
+  render() {
+    return (h("div", { class: "month-container", onKeyDown: this.onMonthKeydown },
+      h("div", { class: "navigation" },
+        h("q2-btn", { class: "year-btn", onClick: () => this.viewChange.emit({
+            view: 'year',
+            selectedYear: this.year,
+          }) },
+          h("span", { class: "year" }, this.year),
+          h("q2-icon", { class: "year-icon off", type: "chevron-down" })),
+        h("div", { class: "month-controller" },
+          h("div", { class: "cal-year-prev-next" },
+            h("q2-btn", { label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) },
+              h("q2-icon", { type: "arrow-left" })),
+            h("q2-btn", { label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) },
+              h("q2-icon", { type: "arrow-right" }))))),
+      h("div", { class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" },
+        h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))),
+      this.today && (h("div", { class: "today-label" },
+        loc('tecton.element.calendar.today'),
+        ": ",
+        this.today))));
+  }
+  static get is() { return "q2-month-picker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["q2-month-picker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["q2-month-picker.css"]
+  }; }
+  static get properties() { return {
+    "year": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "year",
+      "reflect": true,
+      "defaultValue": "Number(\n        new Date().toLocaleString('en-US', { year: 'numeric' })\n    )"
+    },
+    "disabledMonths": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "today": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "today",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "selectedIndex": {},
+    "focusedIndex": {},
+    "showYearLayer": {}
+  }; }
+  static get events() { return [{
+      "method": "viewChange",
+      "name": "viewChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "toggleChange",
+      "name": "toggleChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/q2-option-list/index.js

@@ -86,7 +86,7 @@ export class Q2OptionList {
         case 'Escape':
           if (this.noSelect)
             this.setActiveElement(null);
-          this.open = false;
+          this.popoverState.emit({ open: false });
           break;
         default:
           if (customSearch)
@@ -168,7 +168,7 @@ export class Q2OptionList {
     if (this.disabled)
       return;
     this.activeIndex = activeIndex;
-    this.open = true;
+    this.popoverState.emit({ open: true });
     this.setActiveOption();
     this.setFocusedOption();
     this.scheduledAfterRender.push(() => {
@@ -202,8 +202,6 @@ export class Q2OptionList {
     });
   }
   setActiveOption() {
-    if (!this.open)
-      return;
     const activeIndex = this.activeIndex;
     this.allOptions.forEach((element, elementIndex) => {
       element.active = activeIndex === elementIndex;
@@ -256,7 +254,7 @@ export class Q2OptionList {
     this.change.emit({ value: selectedValue, values });
     if (multiple)
       return;
-    this.open = false;
+    this.popoverState.emit({ open: false });
   }
   adjustActiveOptionAndScroll(numToAdd) {
     this.activeIndex += numToAdd;
@@ -292,24 +290,17 @@ export class Q2OptionList {
       this.updateSingleOptionAttrs();
     }
   }
-  openChanged(newValue) {
-    this.optionListState.emit({ open: newValue });
-  }
   /// Listeners ///
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    this.open = true;
+    this.popoverState.emit({ open: true });
     this.setDefaultActiveElement();
   }
   handleClick(event) {
     event.stopPropagation();
   }
   /// Public Methods ///
-  async toggle() {
-    const isOpen = !this.open;
-    this.open = isOpen;
-  }
   async setDefaultActiveElement() {
     this.activeIndex = this.getDefaultActiveIndex();
     this.setActiveOption();
@@ -323,7 +314,7 @@ export class Q2OptionList {
   async handleExternalKeydown(event) {
     const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
     if (keysThatTriggerOpen.includes(event.key)) {
-      this.open = true;
+      this.popoverState.emit({ open: true });
     }
     const keysThatTriggerDefault = ['ArrowDown', 'ArrowUp'];
     if (keysThatTriggerDefault.includes(event.key)) {
@@ -386,23 +377,6 @@ export class Q2OptionList {
       "reflect": true,
       "defaultValue": "'down'"
     },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": true
-    },
     "customSearch": {
       "type": "boolean",
       "mutable": false,
@@ -549,8 +523,8 @@ export class Q2OptionList {
         }
       }
     }, {
-      "method": "optionListState",
-      "name": "optionListState",
+      "method": "popoverState",
+      "name": "popoverState",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -565,22 +539,6 @@ export class Q2OptionList {
       }
     }]; }
   static get methods() { return {
-    "toggle": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
     "setDefaultActiveElement": {
       "complexType": {
         "signature": "() => Promise<void>",
@@ -643,9 +601,6 @@ export class Q2OptionList {
   static get watchers() { return [{
       "propName": "selectedOptions",
       "methodName": "selectedOptionsUpdated"
-    }, {
-      "propName": "open",
-      "methodName": "openChanged"
     }]; }
   static get listeners() { return [{
       "name": "focus",

package/dist/collection/components/q2-option-list/styles.css

@@ -69,61 +69,13 @@ button {
   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 {
-  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, #ffffff);
-  color: var(--t-text, #4d4d4d);
-  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, 0 2px 4px rgba(0, 0, 0, 0.3));
-  overflow: hidden;
   text-align: start;
-  transition: opacity var(--app-tween-1, 0.2s ease);
-  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;
 }

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

@@ -101,9 +101,12 @@ export class Q2Pagination {
           total: total.toLocaleString(),
         })),
       h("div", { class: "btn-group" },
-        h("q2-btn", { label: "tecton.element.pagination.goToFirstPage", disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true },
+        h("q2-btn", { label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true },
           h("q2-icon", { type: "chevron-double-left" })),
-        h("q2-btn", { label: loc('tecton.element.pagination.goToPage', [page - 1]), disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true },
+        h("q2-btn", { label: loc('tecton.element.pagination.goToPages', {
+            next: page - 1,
+            total: totalPages,
+          }), disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true },
           h("q2-icon", { type: "chevron-left" }))),
       h("div", { class: "controls", hidden: isFullViewHidden, "test-id": "controls" },
         h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.page')),
@@ -111,7 +114,10 @@ export class Q2Pagination {
           h("q2-input", { type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })),
         h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))),
       h("div", { class: "btn-group" },
-        h("q2-btn", { label: loc('tecton.element.pagination.goToPage', [page + 1]), disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true },
+        h("q2-btn", { label: loc('tecton.element.pagination.goToPages', {
+            next: page + 1,
+            total: totalPages,
+          }), disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true },
           h("q2-icon", { type: "chevron-right" })),
         h("q2-btn", { label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true },
           h("q2-icon", { type: "chevron-double-right" })))));

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

@@ -1,5 +1,5 @@
-import { Component, State, Prop, h, Listen, Element, Fragment, Event, } from '@stencil/core';
-import { isEventFromElement, loc, overrideFocus } from 'src/utils';
+import { Component, State, Prop, h, Listen, Element, Event } from '@stencil/core';
+import { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';
 export class Q2Pill {
   constructor() {
     this.selectedOptions = [];
@@ -15,14 +15,15 @@ export class Q2Pill {
       this.open = false;
       this.primaryBtn.focus();
       this.change.emit({ value: null, values: [], active: false });
+      this.scheduledAfterRender.push(resizeIframe);
     };
     /// Event Handlers ///
-    this.handleClick = (event) => {
+    this.handleClick = async (event) => {
       event.stopPropagation();
       if (this.disabled)
         return;
       if (this.hasOptions) {
-        this.optionList.toggle();
+        await this.popoverElement.toggle();
       }
       else {
         const { value, label } = this;
@@ -42,6 +43,7 @@ export class Q2Pill {
       this.optionList.handleExternalKeydown(event);
     };
     this.handleChange = event => {
+      event.stopPropagation();
       if (!this.hasOptions)
         return;
       const { value, values } = event.detail;
@@ -52,20 +54,17 @@ export class Q2Pill {
       }
       this.change.emit({ 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();
     };
+    this.onClickElsewhere = (event) => {
+      const target = event.target;
+      if (target.localName === 'click-elsewhere') {
+        event.stopPropagation();
+        this.popoverElement.open = false;
+      }
+    };
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
@@ -106,9 +105,12 @@ export class Q2Pill {
       return;
     this.primaryBtn.focus();
   }
-  optionListStateEvent({ detail: { open } }) {
-    this.open = open;
-    if (!open)
+  popoverStateHandler({ detail: { open } }) {
+    if (this.open !== open)
+      this.open = open;
+    if (open)
+      this.optionList.focus();
+    else
       this.primaryBtn.focus();
   }
   /// DOM ///
@@ -127,18 +129,19 @@ export class Q2Pill {
       wrapperClassNames.push('has-icon');
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h(Fragment, null,
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere },
       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}`) || undefined, "aria-label": this.maxLength && this.buttonContent },
+        h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 },
+          h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent },
             this.truncatedButtonContent,
             !hasOptions && active && h("span", { class: "sr" },
               "(",
               loc('tecton.element.pill.active'),
               ")"))),
         this.generateIcon()),
-      this.hasOptions && (h("q2-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)))));
+      this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtnWrapper, open: this.open },
+        h("q2-option-list", { ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions },
+          h("slot", null))))));
   }
   static get is() { return "q2-pill"; }
   static get encapsulation() { return "shadow"; }
@@ -339,8 +342,8 @@ export class Q2Pill {
       "capture": false,
       "passive": false
     }, {
-      "name": "optionListState",
-      "method": "optionListStateEvent",
+      "name": "popoverStateChanged",
+      "method": "popoverStateHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/q2-pill/styles.css

@@ -68,16 +68,21 @@ button {
 :host {
   display: inline-block;
   position: relative;
+  line-height: 0;
 }
 
 :host(:not(:last-child)) {
   margin-inline-end: var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)));
 }
 
+q2-popover,
 .btn-wrapper {
   --comp-pill-min-height: var(--tct-pill-min-height, var(--t-pill-min-height, 44px));
-  --comp-pill-btn-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));
+}
+
+.btn-wrapper {
+  --comp-pill-btn-border-width: var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));
   --comp-close-size: 0px;
   --comp-btn-background: var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));
   --compt-hover-btn-background: var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));
@@ -118,11 +123,6 @@ button {
   --comp-hover-active-btn-border-color: var(--t-tertiary-l3, #eff8fd);
 }
 
-q2-option-list {
-  position: absolute;
-  left: 0;
-}
-
 .btn-height-wrapper {
   height: var(--comp-pill-min-height);
   display: flex;
@@ -228,4 +228,9 @@ div.btn-close {
 :host([active]) button.btn-close:focus, :host([active]) button.btn-close:hover {
   background: var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));
   border-color: var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))));
+}
+
+q2-popover {
+  position: relative;
+  top: calc((var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2 * -1);
 }