q2-tecton-elements 1.28.3 → 1.29.0

package/dist/components/q2-data-table.js

@@ -0,0 +1,349 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { l as loc } from './index16.js';
+import { d as defineCustomElement$6 } from './index4.js';
+import { d as defineCustomElement$5 } from './index5.js';
+import { d as defineCustomElement$4 } from './index6.js';
+import { d as defineCustomElement$3 } from './index8.js';
+import { d as defineCustomElement$2 } from './index10.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}.container{--comp-cell-padding:var(--tct-table-cell-padding, var(--app-scale-3x, 15px));--comp-select-column-width:var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px));--comp-dropdown-column-width:var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px));--comp-expandable-row-control-column-width:var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px));overflow:auto}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-table-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px))}table{border-collapse:collapse;border-spacing:0;width:var(--tct-table-width);min-width:100%;background:var(--tct-table-background, var(--t-base, #ffffff));caption-side:var(--tct-table-caption-side, bottom)}thead{border-width:var(--tct-table-header-border-width, 0 0 2px 0);border-style:var(--tct-table-header-border-style, solid);border-color:var(--tct-table-header-border-color, var(--t-gray-9, #999999));background:var(--tct-table-header-background)}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}td,th{padding:var(--comp-cell-padding);text-align:start}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}th .header-content{font-weight:var(--tct-table-header-font-weight, 400)}th.sorted .header-content{font-weight:var(--tct-table-header-sorted-font-weight, 600)}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-table-header-content-gap, var(--app-scale-2x, 10px))}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-table-expandable-row-control-column-padding, 0 var(--app-scale-1x, 5px))}td.dropdown-column{padding:var(--tct-table-dropdown-column-padding, 0 var(--app-scale-1x, 5px))}tbody tr.expandable{cursor:pointer}tbody tr.expandable:hover{background:var(--tct-table-expandable-row-background, var(--t-gray-14, #f2f2f2))}:host([bordered]:not([bordered=false])) tbody tr{border-width:var(--tct-table-row-border-width, 0 0 1px 0);border-style:var(--tct-table-row-border-style, solid);border-color:var(--tct-table-row-border-color, var(--t-gray-9, #999999))}tbody.expandable-row.loading-row{background:var(--tct-table-loading-row-background, var(--t-base, #ffffff))}tbody.expandable-row.loading-row td{text-align:center}tbody.expandable-row.loading-row q2-loading{font-size:4em}tbody.expandable-row.open .toggle-expandable-row{transform:rotate(180deg)}caption{padding:var(--tct-table-caption-padding, var(--app-scale-2x, 10px));font-size:var(--tct-table-caption-font-size, inherit);font-weight:var(--tct-table-caption-font-weight, 600);text-align:var(--tct-table-caption-text-align, center);color:var(--tct-table-caption-color, inherit)}q2-checkbox{padding:0}";
+
+const Q2DataTable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.select = createEvent(this, "select", 7);
+    this.toggle = createEvent(this, "toggle", 7);
+    this.sort = createEvent(this, "sort", 7);
+    this.checkSlots = () => {
+      var _a, _b, _c, _d;
+      this.hasExpandableRows = !!((_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.querySelector(`[slot$="-expandable-content"]`)) !== null && _b !== void 0 ? _b : false);
+      this.hasDropdowns = !!((_d = (_c = this.hostElement) === null || _c === void 0 ? void 0 : _c.querySelector(`[slot$="-dropdown"]`)) !== null && _d !== void 0 ? _d : false);
+      // The booleans above may not change, event if the slot content
+      // So we increment this property to force a re-render and ensure proper rendering
+      this.checkSlotCount += 1;
+    };
+    /// Listeners ///
+    /// Event Handlers ///
+    this.onSort = (header) => {
+      const direction = header.sorted === 'ASC' ? 'DESC' : 'ASC';
+      const sortKey = header.key;
+      const sortEvent = this.sort.emit({ header, direction });
+      if (sortEvent.defaultPrevented)
+        return;
+      this.serializedHeaders = this.serializedHeaders.map(serializedHeader => {
+        const sorted = sortKey === serializedHeader.key ? direction : undefined;
+        return Object.assign(Object.assign({}, serializedHeader), { sorted });
+      });
+      this.serializedRows = this.sortRows(this.serializedRows, Object.assign(Object.assign({}, header), { sorted: direction }));
+    };
+    this.onSelectAllRows = (event) => {
+      event.stopPropagation();
+      const { checked } = event.detail;
+      const selectedRows = checked
+        ? this.serializedRows.map(row => (Object.assign(Object.assign({}, row), { selected: checked })))
+        : [];
+      const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });
+      if (selectEvent.defaultPrevented)
+        return;
+      this.serializedRows = this.serializedRows.map(row => {
+        row.selected = checked;
+        return row;
+      });
+      this.allRowsSelected = checked;
+    };
+    this.onSelectRow = (event, row) => {
+      event.stopPropagation();
+      const { selectMode, serializedRows, selectedRows: currentlySelectedRows } = this;
+      const { checked } = event.detail;
+      const selectedRow = Object.assign(Object.assign({}, row), { selected: checked });
+      let selectedRows;
+      if (selectMode === 'single') {
+        selectedRows = checked ? [selectedRow] : [];
+      }
+      else {
+        selectedRows = checked
+          ? [...currentlySelectedRows, selectedRow]
+          : currentlySelectedRows.filter(row => row.id !== selectedRow.id);
+      }
+      const allRowsSelected = selectedRows.length === serializedRows.length;
+      const selectEvent = this.select.emit({ row: selectedRow, rows: selectedRows, allSelected: allRowsSelected });
+      if (selectEvent.defaultPrevented)
+        return;
+      this.serializedRows = this.serializedRows.map(row => (row.id === selectedRow.id ? selectedRow : row));
+      this.allRowsSelected = allRowsSelected;
+    };
+    this.onToggleRow = (event, row) => {
+      event.stopPropagation();
+      const selectedRow = Object.assign(Object.assign({}, row), { open: !row.open });
+      const toggleEvent = this.toggle.emit({ row: selectedRow });
+      if (toggleEvent.defaultPrevented)
+        return;
+      this.serializedRows = this.serializedRows.map(row => {
+        if (row.id === selectedRow.id)
+          return selectedRow;
+        else
+          return Object.assign({}, row);
+      });
+    };
+    this.onControlContainerClick = (event) => {
+      event.stopPropagation();
+    };
+    this.density = undefined;
+    this.bordered = undefined;
+    this.shadowed = undefined;
+    this.selectable = undefined;
+    this.loading = undefined;
+    this.hideCaption = undefined;
+    this.caption = undefined;
+    this.selectMode = 'multiple';
+    this.headers = undefined;
+    this.rows = undefined;
+    this.serializedHeaders = [];
+    this.serializedRows = [];
+    this.hasExpandableRows = false;
+    this.hasDropdowns = false;
+    this.allRowsSelected = false;
+    this.checkSlotCount = 0;
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    this.headersHandler(this.headers);
+    this.rowsHandler(this.rows);
+  }
+  componentDidLoad() {
+    if (typeof MutationObserver !== 'undefined') {
+      const observer = new MutationObserver(() => this.checkSlots());
+      observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });
+      this.mutationObserver = observer;
+    }
+  }
+  disconnectedCallback() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+  }
+  /// Getters ///
+  get selectedRows() {
+    return this.serializedRows.filter(({ selected }) => selected);
+  }
+  get selectedRow() {
+    return this.selectedRows.find(({ selected }) => !!selected);
+  }
+  get numberOfColumns() {
+    var _a, _b;
+    return (((_b = (_a = this.serializedHeaders) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) +
+      (this.selectable ? 1 : 0) +
+      (this.hasExpandableRows ? 1 : 0) +
+      (this.hasDropdowns ? 1 : 0));
+  }
+  get mappedHeaders() {
+    return this.serializedHeaders.reduce((accum, header) => {
+      accum[header.key] = header;
+      return accum;
+    }, {});
+  }
+  /// Helpers ///
+  sortRows(rows, header) {
+    const { key, sorted } = header;
+    const direction = sorted || 'ASC';
+    const sortedRows = [...rows].sort((a, b) => {
+      const aValue = a.cells[key].value;
+      const bValue = b.cells[key].value;
+      if (aValue < bValue)
+        return direction === 'ASC' ? -1 : 1;
+      if (aValue > bValue)
+        return direction === 'ASC' ? 1 : -1;
+      return 0;
+    });
+    return sortedRows;
+  }
+  /// Watchers ///
+  headersHandler(headers = []) {
+    this.serializedHeaders = headers.map(header => {
+      const { title } = header;
+      let { key } = header;
+      // If no key is provided, generate one from the title
+      if (!key)
+        key = title.toLowerCase().replace(/\s/g, '-');
+      return Object.assign({ key }, header);
+    });
+  }
+  rowsHandler(rows = []) {
+    const { serializedHeaders, mappedHeaders } = this;
+    const defaultRow = {
+      id: null,
+      cells: {},
+      selected: false,
+      open: false,
+    };
+    const serializedRows = rows.map(({ id, cells, selected, open }) => {
+      const serializedCells = Object.entries(cells).reduce((accum, [cellKey, cellData]) => {
+        const header = mappedHeaders[cellKey] || {};
+        const { align, type = 'text' } = header;
+        const isBadge = 'type' in header && header.type === 'badge';
+        const defaultCell = {
+          value: '',
+          ariaLabel: undefined,
+          type,
+          align,
+          badgeStatus: isBadge ? header.badgeStatus : undefined,
+          badgeTheme: isBadge ? header.badgeTheme : undefined,
+        };
+        const result = typeof cellData === 'object'
+          ? Object.assign(Object.assign({}, defaultCell), cellData) : Object.assign(Object.assign({}, defaultCell), { value: cellData });
+        accum[cellKey] = result;
+        return accum;
+      }, {});
+      return Object.assign(Object.assign({}, defaultRow), { id, selected: !!selected, open: !!open, cells: serializedCells });
+    });
+    const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);
+    this.serializedRows = !!sortedHeader ? this.sortRows(serializedRows, sortedHeader) : serializedRows;
+    this.checkSlots();
+  }
+  /// DOM ///
+  render() {
+    const { caption } = this;
+    return (h("div", { class: "container" }, h("table", null, caption && h("caption", { class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderTableRows())));
+  }
+  renderTableColGroup() {
+    const { serializedHeaders: headers, selectable, hasExpandableRows, hasDropdowns } = this;
+    if (!headers.length)
+      return null;
+    return (h("colgroup", null, selectable && h("col", { class: "select-column" }), headers.map(({ width, backgroundColor }) => (h("col", { style: { width, backgroundColor } }))), hasExpandableRows && h("col", { class: "expandable-row-control-column" }), hasDropdowns && h("col", { class: "dropdown-column" })));
+  }
+  renderTableHeader() {
+    const { serializedHeaders: headers, selectable, selectMode, hasExpandableRows, hasDropdowns } = this;
+    if (!headers.length)
+      return null;
+    return (h("thead", null, h("tr", null, selectable && (h("th", null, selectMode === 'multiple' && (h("q2-checkbox", { label: loc('tecton.element.dataTable.selectAllRows'), "hide-label": true, onChange: this.onSelectAllRows, checked: this.allRowsSelected, disabled: this.loading, "test-id": "select-all-rows-control" })))), headers.map(header => {
+      const { align, sorted } = header;
+      const headerClasses = [];
+      if (align)
+        headerClasses.push(`align-${align}`);
+      if (!!sorted)
+        headerClasses.push('sorted');
+      return (h("th", { class: headerClasses.join(' '), id: `header-${header.key}` }, header.sortable ? (h("q2-btn", { onClick: () => this.onSort(header), "test-id": "sort-control", disabled: this.loading }, h("div", { class: "header-content", "aria-label": header.ariaLabel || undefined }, header.title, !!sorted ? (h("q2-icon", { class: `sorted-indicator direction-${sorted}`, type: "arrow-down", label: sorted === 'ASC'
+          ? loc('tecton.element.dataTable.sortedAscending')
+          : loc('tecton.element.dataTable.sortedDescending'), "test-id": "sorted-indicator" })) : (h("q2-icon", { class: `sorted-indicator`, type: "sort", label: loc('tecton.element.dataTable.clickToSort'), "test-id": "sorted-indicator" }))))) : (h("div", { class: "header-content", "aria-label": header.ariaLabel || undefined }, header.title))));
+    }), hasExpandableRows && (h("th", { id: "toggle" }, h("span", { class: "sr" }, loc('tecton.element.dataTable.toggleRow')))), hasDropdowns && (h("th", null, h("span", { class: "sr" }, loc('tecton.element.dataTable.dropdown')))))));
+  }
+  renderTableRows() {
+    const { serializedHeaders: headers, serializedRows: rows, selectable, selectMode, hasExpandableRows, hasDropdowns, numberOfColumns, loading, } = this;
+    if (loading) {
+      return (h("tbody", null, h("tr", { class: "loading-row" }, h("td", { colSpan: numberOfColumns }, h("q2-loading", { inline: true })))));
+    }
+    if (!rows.length)
+      return;
+    let isSelectDisabled = false;
+    let selectedRow;
+    if (selectMode === 'single') {
+      selectedRow = this.selectedRow;
+      isSelectDisabled = !!selectedRow;
+    }
+    return (h("tbody", null, rows.map(row => {
+      const cellSlotPrefix = `row-${row.id}-cell`;
+      const expandableRowName = `row-${row.id}-expandable-content`;
+      const dropdownCellName = `row-${row.id}-dropdown`;
+      const rowHasExpandableSlot = hasExpandableRows && !!this.hostElement.querySelector(`[slot="${expandableRowName}"]`);
+      const rowHasDropdownSlot = hasDropdowns && !!this.hostElement.querySelector(`[slot="${dropdownCellName}"]`);
+      const rowClasses = [];
+      if (rowHasExpandableSlot)
+        rowClasses.push('expandable');
+      if (row.open)
+        rowClasses.push('open');
+      return (h(Fragment, null, h("tr", { id: `row-${row.id}`, class: rowClasses.join(' '), onClick: rowHasExpandableSlot && (e => this.onToggleRow(e, row)) }, selectable && (h("td", { class: "select-column", onClick: this.onControlContainerClick }, h("q2-checkbox", { label: loc('tecton.element.dataTable.selectRow'), "hide-label": true, checked: row.selected, disabled: isSelectDisabled && row !== selectedRow, onChange: e => this.onSelectRow(e, row), "test-id": "select-row-control" }))), headers.map(({ key }) => {
+        const cell = row.cells[key];
+        const cellAlign = cell === null || cell === void 0 ? void 0 : cell.align;
+        const alignClass = cellAlign ? `align-${cellAlign}` : undefined;
+        return (h("td", { class: alignClass }, h("slot", { name: `${cellSlotPrefix}-${key}` }, this.renderCellContent(cell))));
+      }), hasExpandableRows && (h("td", { class: "expandable-row-control-column", onClick: this.onControlContainerClick }, rowHasExpandableSlot && (h("q2-btn", { onClick: e => this.onToggleRow(e, row), ariaExpanded: `${row.open}`, ariaControls: expandableRowName, ariaLabel: loc('tecton.element.dataTable.toggleRow'), "test-id": "expandable-row-control" }, h("q2-icon", { type: "chevron-down", class: "toggle-expandable-row" }))))), hasDropdowns && (h("td", { class: "dropdown-column", onClick: this.onControlContainerClick }, rowHasDropdownSlot && h("slot", { name: dropdownCellName })))), rowHasExpandableSlot && (h("tr", { id: expandableRowName, class: "expandable-row", hidden: !row.open, "aria-hidden": !row.open }, h("td", { colSpan: numberOfColumns, headers: "toggle" }, h("div", { class: "expandable-content" }, h("slot", { name: expandableRowName })))))));
+    })));
+  }
+  renderCellContent(cell) {
+    if (!cell)
+      return;
+    const { type, ariaLabel, value } = cell;
+    if (!value)
+      return;
+    switch (type) {
+      case 'badge':
+        const valueAsInt = typeof value === 'string' ? parseFloat(value) : value;
+        return (h("q2-badge", { "aria-label": ariaLabel, value: valueAsInt, theme: cell.badgeTheme, status: cell.badgeStatus, size: "large" }));
+      case 'icon':
+        const valueAsString = typeof value === 'string' ? value : `${value}`;
+        return (h("q2-icon", { label: ariaLabel, type: valueAsString }));
+      default:
+        return h("div", { "aria-label": ariaLabel }, value);
+    }
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "headers": ["headersHandler"],
+    "rows": ["rowsHandler"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-data-table", {
+    "density": [1537],
+    "bordered": [1540],
+    "shadowed": [1540],
+    "selectable": [1540],
+    "loading": [1540],
+    "hideCaption": [1540, "hide-caption"],
+    "caption": [1025],
+    "selectMode": [1025, "select-mode"],
+    "headers": [1040],
+    "rows": [1040],
+    "serializedHeaders": [32],
+    "serializedRows": [32],
+    "hasExpandableRows": [32],
+    "hasDropdowns": [32],
+    "allRowsSelected": [32],
+    "checkSlotCount": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-data-table", "q2-badge", "q2-btn", "q2-checkbox", "q2-icon", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-data-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2DataTable$1);
+      }
+      break;
+    case "q2-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "q2-checkbox":
+      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 Q2DataTable = Q2DataTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2DataTable, defineCustomElement };

package/dist/components/q2-dropdown-item.js

@@ -1,4 +1,4 @@
-import { Q as Q2DropdownItem$1, d as defineCustomElement$1 } from './index6.js';
+import { Q as Q2DropdownItem$1, d as defineCustomElement$1 } from './index7.js';
 
 const Q2DropdownItem = Q2DropdownItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-dropdown.js

@@ -1,11 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { b as handleRenamedProp, h as handleAriaLabel, a as isEventFromElement, o as overrideFocus, l as loc } from './index15.js';
+import { b as handleRenamedProp, h as handleAriaLabel, a as isEventFromElement, o as overrideFocus, l as loc } from './index16.js';
 import { d as defineCustomElement$7 } from './index2.js';
 import { d as defineCustomElement$6 } from './index5.js';
-import { d as defineCustomElement$5 } from './index6.js';
-import { d as defineCustomElement$4 } from './index7.js';
-import { d as defineCustomElement$3 } from './index9.js';
-import { d as defineCustomElement$2 } from './index14.js';
+import { d as defineCustomElement$5 } from './index7.js';
+import { d as defineCustomElement$4 } from './index8.js';
+import { d as defineCustomElement$3 } from './index10.js';
+import { d as defineCustomElement$2 } 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{display:inline-flex}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
 

package/dist/components/q2-editable-field.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, a as isEventFromElement } from './index15.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, a as isEventFromElement } from './index16.js';
 import { d as defineCustomElement$6 } from './index4.js';
 import { d as defineCustomElement$5 } from './index5.js';
-import { d as defineCustomElement$4 } from './index7.js';
-import { d as defineCustomElement$3 } from './index8.js';
-import { d as defineCustomElement$2 } from './index9.js';
+import { d as defineCustomElement$4 } from './index8.js';
+import { d as defineCustomElement$3 } from './index9.js';
+import { d as defineCustomElement$2 } from './index10.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-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";
 

package/dist/components/q2-icon.js

@@ -1,4 +1,4 @@
-import { Q as Q2Icon$1, d as defineCustomElement$1 } from './index7.js';
+import { Q as Q2Icon$1, d as defineCustomElement$1 } from './index8.js';
 
 const Q2Icon = Q2Icon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-input.js

@@ -1,4 +1,4 @@
-import { Q as Q2Input$1, d as defineCustomElement$1 } from './index8.js';
+import { Q as Q2Input$1, d as defineCustomElement$1 } from './index9.js';
 
 const Q2Input = Q2Input$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-loading.js

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

package/dist/components/q2-loc.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { l as loc } from './index15.js';
+import { l as loc } from './index16.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}";
 

package/dist/components/q2-message.js

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

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

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loc, o as overrideFocus } from './index15.js';
+import { l as loc, o as overrideFocus } from './index16.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';
+import { d as defineCustomElement$3 } from './index8.js';
+import { d as defineCustomElement$2 } from './index10.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))))}";
 

package/dist/components/q2-optgroup.js

@@ -1,4 +1,4 @@
-import { Q as Q2Optgroup$1, d as defineCustomElement$1 } from './index11.js';
+import { Q as Q2Optgroup$1, d as defineCustomElement$1 } from './index12.js';
 
 const Q2Optgroup = Q2Optgroup$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { Q as Q2OptionList$1, d as defineCustomElement$1 } from './index13.js';
+import { Q as Q2OptionList$1, d as defineCustomElement$1 } from './index14.js';
 
 const Q2OptionList = Q2OptionList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-option.js

@@ -1,4 +1,4 @@
-import { Q as Q2Option$1, d as defineCustomElement$1 } from './index12.js';
+import { Q as Q2Option$1, d as defineCustomElement$1 } from './index13.js';
 
 const Q2Option = Q2Option$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-pagination.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { n as nextPaint, o as overrideFocus, a as isEventFromElement, l as loc } from './index15.js';
+import { n as nextPaint, o as overrideFocus, a as isEventFromElement, l as loc } from './index16.js';
 import { d as defineCustomElement$6 } from './index4.js';
 import { d as defineCustomElement$5 } from './index5.js';
-import { d as defineCustomElement$4 } from './index7.js';
-import { d as defineCustomElement$3 } from './index8.js';
-import { d as defineCustomElement$2 } from './index9.js';
+import { d as defineCustomElement$4 } from './index8.js';
+import { d as defineCustomElement$3 } from './index9.js';
+import { d as defineCustomElement$2 } from './index10.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{text-align:right;display:block}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";
 

package/dist/components/q2-pill.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as resizeIframe, o as overrideFocus, l as loc, a as isEventFromElement } from './index15.js';
+import { r as resizeIframe, o as overrideFocus, l as loc, a as isEventFromElement } from './index16.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
 import { d as defineCustomElement$5 } from './index2.js';
-import { d as defineCustomElement$4 } from './index7.js';
-import { d as defineCustomElement$3 } from './index13.js';
-import { d as defineCustomElement$2 } from './index14.js';
+import { d as defineCustomElement$4 } from './index8.js';
+import { d as defineCustomElement$3 } from './index14.js';
+import { d as defineCustomElement$2 } 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{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-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)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--t-primary-l5, #61c4ff);--comp-active-btn-color:var(--t-primary-text, #ffffff);--comp-active-btn-border-color:var(--t-primary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-primary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-primary-l3, #21acff)}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--t-secondary-l5, #d9e1e6);--comp-active-btn-color:var(--t-secondary-text, #141414);--comp-active-btn-border-color:var(--t-secondary-l5, #d9e1e6);--comp-hover-active-btn-background:var(--t-secondary-l3, #c9d5db);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #c9d5db)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #f4fafe);--comp-active-btn-color:var(--t-tertiary-text, #141414);--comp-active-btn-border-color:var(--t-tertiary-l5, #f4fafe);--comp-hover-active-btn-background:var(--t-tertiary-l3, #eff8fd);--comp-hover-active-btn-border-color:var(--t-tertiary-l3, #eff8fd)}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";
 

package/dist/components/q2-popover.js

@@ -1,4 +1,4 @@
-import { Q as Q2Popover$1, d as defineCustomElement$1 } from './index14.js';
+import { Q as Q2Popover$1, d as defineCustomElement$1 } from './index15.js';
 
 const Q2Popover = Q2Popover$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-radio-group.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { d as createGuid, o as overrideFocus, a as isEventFromElement, l as loc } from './index15.js';
-import { d as defineCustomElement$2 } from './index7.js';
+import { d as createGuid, o as overrideFocus, a as isEventFromElement, l as loc } from './index16.js';
+import { d as defineCustomElement$2 } 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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}";
 

package/dist/components/q2-radio.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index15.js';
+import { d as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index16.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}.radio-container{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}.radio-container label[for]{color:var(--tct-radio-label-color);font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494))}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:checked+label circle:nth-child(1){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-color);align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));cursor:pointer;display:block;padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff)}.radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:inset 0 0 0 2px #ffffff}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
 

package/dist/components/q2-section.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as resizeIframe, o as overrideFocus, a as isEventFromElement, n as nextPaint, l as loc } from './index15.js';
+import { r as resizeIframe, o as overrideFocus, a as isEventFromElement, n as nextPaint, l as loc } from './index16.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';
+import { d as defineCustomElement$3 } from './index8.js';
+import { d as defineCustomElement$2 } from './index10.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;background-color:var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff)))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)))}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";
 

package/dist/components/q2-select.js

@@ -1,14 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, e as isRelatedTargetWithinHost, a as isEventFromElement, f as isHostLosingFocus } from './index15.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, e as isRelatedTargetWithinHost, a as isEventFromElement, f as isHostLosingFocus } from './index16.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
 import { d as defineCustomElement$9 } from './index2.js';
 import { d as defineCustomElement$8 } from './index4.js';
 import { d as defineCustomElement$7 } from './index5.js';
-import { d as defineCustomElement$6 } from './index7.js';
-import { d as defineCustomElement$5 } from './index8.js';
-import { d as defineCustomElement$4 } from './index9.js';
-import { d as defineCustomElement$3 } from './index13.js';
-import { d as defineCustomElement$2 } from './index14.js';
+import { d as defineCustomElement$6 } from './index8.js';
+import { d as defineCustomElement$5 } from './index9.js';
+import { d as defineCustomElement$4 } from './index10.js';
+import { d as defineCustomElement$3 } from './index14.js';
+import { d as defineCustomElement$2 } 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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.multi-select-header legend{padding:0;float:left}.multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background-color:var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.multi-select-header label:hover{background-color:var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040)))))))}.multi-select-header input:checked+label,.multi-select-header input:checked+label:enabled:hover{background-color:var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";
 

package/dist/components/q2-stepper-pane.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { d as createGuid, n as nextPaint, l as loc } from './index15.js';
+import { d as createGuid, n as nextPaint, l as loc } from './index16.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;position:relative}";