q2-tecton-elements 1.21.2 → 1.22.0

package/dist/components/q2-loading-element.js

@@ -0,0 +1,52 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { a as atoms } from './shapes.js';
+
+const stylesCss = "q2-loading-element{display:block}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.skeleton-shape.circle{border-radius:50%;padding-top:100%}";
+
+const Q2Loading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.shape = undefined;
+    this.width = undefined;
+    this.height = undefined;
+    this.borderRadius = undefined;
+  }
+  get shapeMarkup() {
+    return atoms[this.shape]
+      ? atoms[this.shape]({
+        width: this.width,
+        height: this.height,
+        borderRadius: this.borderRadius,
+      })
+      : '';
+  }
+  render() {
+    return this.shapeMarkup;
+  }
+  static get style() { return stylesCss; }
+}, [0, "q2-loading-element", {
+    "shape": [513],
+    "width": [513],
+    "height": [513],
+    "borderRadius": [513, "border-radius"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-loading-element"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-loading-element":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Loading);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2LoadingElement = Q2Loading;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2LoadingElement, defineCustomElement };

package/dist/components/q2-loading.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Loading extends Components.Q2Loading, HTMLElement {}
+export const Q2Loading: {
+  prototype: Q2Loading;
+  new (): Q2Loading;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-loading.js

@@ -0,0 +1,6 @@
+import { Q as Q2Loading$1, d as defineCustomElement$1 } from './index9.js';
+
+const Q2Loading = Q2Loading$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Loading, defineCustomElement };

package/dist/components/q2-loc.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Loc extends Components.Q2Loc, HTMLElement {}
+export const Q2Loc: {
+  prototype: Q2Loc;
+  new (): Q2Loc;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-loc.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { l as loc } from './index13.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
+
+const Q2Loc$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.value = undefined;
+    this.substitutions = undefined;
+  }
+  render() {
+    return h("span", null, loc(this.value, this.substitutions));
+  }
+  static get style() { return stylesCss; }
+}, [1, "q2-loc", {
+    "value": [513],
+    "substitutions": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-loc"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-loc":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Loc$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Loc = Q2Loc$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Loc, defineCustomElement };

package/dist/components/q2-message.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Message extends Components.Q2Message, HTMLElement {}
+export const Q2Message: {
+  prototype: Q2Message;
+  new (): Q2Message;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-message.js

@@ -0,0 +1,6 @@
+import { Q as Q2Message$1, d as defineCustomElement$1 } from './index10.js';
+
+const Q2Message = Q2Message$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Message, defineCustomElement };

package/dist/components/q2-month-picker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2MonthPicker extends Components.Q2MonthPicker, HTMLElement {}
+export const Q2MonthPicker: {
+  prototype: Q2MonthPicker;
+  new (): Q2MonthPicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,189 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { l as loc, o as overrideFocus } from './index13.js';
+import { d as defineCustomElement$4 } from './index5.js';
+import { d as defineCustomElement$3 } from './index7.js';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const q2MonthPickerCss = "*{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}.month-container{--comp-month-primary-bg:var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-secondary-bg:var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background-color:var(--comp-month-secondary-bg);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background-color:var(--comp-month-primary-bg);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
+
+const Q2MonthPicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.viewChange = createEvent(this, "viewChange", 7);
+    this.toggleChange = createEvent(this, "toggleChange", 7);
+    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);
+    };
+    this.year = Number(new Date().toLocaleString('en-US', { year: 'numeric' }));
+    this.disabledMonths = undefined;
+    this.today = undefined;
+    this.selectedIndex = 0;
+    this.focusedIndex = 0;
+    this.showYearLayer = false;
+  }
+  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))));
+  }
+  get hostElement() { return this; }
+  static get style() { return q2MonthPickerCss; }
+}, [1, "q2-month-picker", {
+    "year": [1538],
+    "disabledMonths": [16],
+    "today": [1],
+    "selectedIndex": [32],
+    "focusedIndex": [32],
+    "showYearLayer": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-month-picker", "q2-btn", "q2-icon", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-month-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2MonthPicker$1);
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2MonthPicker = Q2MonthPicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2MonthPicker, defineCustomElement };

package/dist/components/q2-optgroup.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Optgroup extends Components.Q2Optgroup, HTMLElement {}
+export const Q2Optgroup: {
+  prototype: Q2Optgroup;
+  new (): Q2Optgroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-optgroup.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as createGuid, l as loc } from './index13.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.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:var(--comp-multi-select-header-height, 0);z-index:1}";
+
+const Q2Optgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.guid = createGuid();
+    this.setHidden = () => {
+      this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
+    };
+    this.disabled = false;
+    this.label = undefined;
+    this.hidden = false;
+  }
+  /// LIFECYCLE HOOKS ///
+  componentWillLoad() {
+    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;
+    });
+  }
+  render() {
+    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 {
+    "disabled": ["disabledWatcher"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-optgroup", {
+    "disabled": [516],
+    "label": [513],
+    "hidden": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-optgroup"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-optgroup":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Optgroup$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Optgroup = Q2Optgroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Optgroup, defineCustomElement };

package/dist/components/q2-option-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2OptionList extends Components.Q2OptionList, HTMLElement {}
+export const Q2OptionList: {
+  prototype: Q2OptionList;
+  new (): Q2OptionList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { Q as Q2OptionList$1, d as defineCustomElement$1 } from './index11.js';
+
+const Q2OptionList = Q2OptionList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2OptionList, defineCustomElement };

package/dist/components/q2-option.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Option extends Components.Q2Option, HTMLElement {}
+export const Q2Option: {
+  prototype: Q2Option;
+  new (): Q2Option;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-option.js

@@ -0,0 +1,81 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } 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}: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([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 Q2Option$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.role = 'option';
+    this.tabindex = '-1';
+    this.display = undefined;
+    this.value = undefined;
+    this.disabled = undefined;
+    this.optionId = undefined;
+    this.disabledGroup = undefined;
+    this.selected = undefined;
+    this.hidden = undefined;
+    this.multiline = undefined;
+    this.active = undefined;
+    this.noSelect = undefined;
+    this._multiSelectHidden = false;
+  }
+  componentWillLoad() {
+    this.handleDisplay();
+  }
+  handleDisplay() {
+    if (this.display || this.multiline)
+      return;
+    this.display = this.hostElement.textContent.trim();
+  }
+  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" }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "display": ["handleDisplay"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-option", {
+    "role": [513],
+    "tabindex": [513],
+    "display": [1025],
+    "value": [513],
+    "disabled": [516],
+    "optionId": [513, "option-id"],
+    "disabledGroup": [516, "disabled-group"],
+    "selected": [516],
+    "hidden": [516],
+    "multiline": [516],
+    "active": [516],
+    "noSelect": [516, "_no-select"],
+    "_multiSelectHidden": [516, "_multiselecthidden"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-option", "q2-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-option":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Option$1);
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Option = Q2Option$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Option, defineCustomElement };

package/dist/components/q2-pagination.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Pagination extends Components.Q2Pagination, HTMLElement {}
+export const Q2Pagination: {
+  prototype: Q2Pagination;
+  new (): Q2Pagination;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;