q2-tecton-elements 1.48.0 → 1.48.1

package/dist/components/q2-chart-area.js

@@ -4176,7 +4176,7 @@ const Q2ChartArea$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartArea extends
         this.updateChart(this.chart);
     }
     render() {
-        return (h("div", { key: 'c9e469efcd0cb91b3116d1a5dae051c38b70657f', class: "container" }, h("div", { key: '22ea317a0f8506a9ccf1ac5f454a5e97cb3f7621', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '5ac722f85acf3a00828cfcd6bfb3d13cadc8d4ef', class: "container" }, h("div", { key: 'a39f5664712841ad70c1628c88b77500b694db63', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "areaChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-chart-bar.js

@@ -1395,7 +1395,7 @@ const Q2ChartBar$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartBar extends H
         this.updateChart(this.chart);
     }
     render() {
-        return (h("div", { key: '38e48c98140b0151cfe3efea85d8209e134bee61', class: "container" }, h("div", { key: '96ef6c96eba64a245da4e365c23033efac974557', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "barChartContainer" })));
+        return (h("div", { key: '1c7a900e24ad8c960c7e701e00d3218388e97f36', class: "container" }, h("div", { key: 'beb2ec288287a1ae437d9f355a8fd1fed577912d', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "barChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-chart-donut.js

@@ -4490,7 +4490,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
             } })), !!name && h("div", { class: "name" }, name), !!value && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '90996ed9349102c692239d46f08bb3d429a0ee05', onChange: this.onClickElsewhere }, h("figure", { key: 'a41baa8d48497d7ce330e0133bdffa01c0b7977f' }, h("div", { key: '1858aa966d6d46089226f988d077268228352de8', class: "container" }, h("div", { key: 'ef990082c127b145d9e54cb0ed0644c23bc2101d', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '7713de14eac9ad9ad0b89e0398247aa7335a9532' }, h("q2-legend", { key: '76f0364735a9c6fef7de7aaf991b2d429b92d737', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: '9e1a6cc98950bbe82cd87743c63e50ec555fdf2a', onChange: this.onClickElsewhere }, h("figure", { key: 'f06bb61b3730a5de80cceea9b422f500197dc5a2' }, h("div", { key: '6315a607888abfbbe7aa35d2deb8cc7b1d5d28ac', class: "container" }, h("div", { key: 'e8b47931947094eeee180777ef4bc457001101a0', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: 'c71999d6f95a69a86254e5aca87f518881035a9b' }, h("q2-legend", { key: '715bb8bfc7921b44c0989d56b846da6f58ef926c', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -110,7 +110,7 @@ const Q2CheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2CheckboxGroup
     }
     render() {
         const showLabel = this.label || this.optional || this.readonly;
-        return (h("div", { key: '6b4c836a5d3c97b6271a5feeac64dfe58b692b25' }, showLabel && !this.hideLabel && h("div", { key: '09840d56ff72f32cb1bf3fc9fce63e8565aa5ea7', class: "group-legend" }, labelDOM(this)), h("fieldset", { key: 'd7307cee9962d82e242547ab15d275832be3424f', class: `q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerCheckboxChange, "aria-invalid": `${this.hasError}` }, this.label || this.optional ? h("legend", { class: "sr-only" }, labelDOM(this)) : '', this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
+        return (h("div", { key: 'd0fa41150bdb303b163c5b8385108a9f175ce545' }, showLabel && !this.hideLabel && h("div", { key: 'f44bcb6210a8a4e54b163e31c955c03f7b10e6f6', class: "group-legend" }, labelDOM(this)), h("fieldset", { key: '356ef2a2f1501a1f6eecfe2419580c93a46ae7d9', class: `q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerCheckboxChange, "aria-invalid": `${this.hasError}` }, this.label || this.optional ? h("legend", { class: "sr-only" }, labelDOM(this)) : '', this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
     }
     inputDom() {
         return h("slot", null);

package/dist/components/q2-checkbox2.js

@@ -82,7 +82,7 @@ const Q2Checkbox = /*@__PURE__*/ proxyCustomElement(class Q2Checkbox extends HTM
         const textLabelClasses = ['label-text'];
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (h("div", { key: 'f71504e3c4a400cc2793d5db532637bb04989bb8', class: "container" }, h("input", { key: 'aa1fbc10ed45975184fa3b0e571c8d651fc548cc', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '57a9f3ad41317c6c1804179cd81caf11d18038a2', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { key: 'a36286a3e670e3de961b8a0191b4509caedbb78e', class: textLabelClasses.join(' ') }, h("label", { key: '7e0894a98ccbb7f1101384f0d256160a70db8c36', "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", { key: 'cc3171e6df7743d3e80757267a336b6e2b99020d' }))), this.description && (h("div", { key: 'cde56109f516026ee00ca00857897c5766cc0459', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+        return (h("div", { key: '72089fee38e591729f863d7b4e4f8f7ea0d7ca45', class: "container" }, h("input", { key: '5932e63f5cd0482363f02663a55228cd1a46621c', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '51f115702f745117273e4c47f34513907a53605a', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { key: '5957c85cd35366d76a8fa68d565be6767386488e', class: textLabelClasses.join(' ') }, h("label", { key: '6b8a89037d7cb5e93182dd132cb7f027e66ea068', "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", { key: '49ad6f1037e60eacba5bade1e73845cf2f211719' }))), this.description && (h("div", { key: 'd3f7d30481f2007c127b5913f1dc659ddd6affe7', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
     }
     generateCheckboxSVG() {
         if (this.type === 'favorite') {

package/dist/components/q2-currency.js

@@ -119,7 +119,7 @@ const Q2Currency$1 = /*@__PURE__*/ proxyCustomElement(class Q2Currency extends H
     /// DOM ///
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, } = this;
-        return (h("div", { key: 'd9b2f20577fe671cd6f6acb53878923bf3290efd', class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: '1037c60e29cc33818ec14448b2129881bc09e4ea' }, plusMinusSign), currencyIsFront && h("span", { key: '718b443ad761455137821deaaf2e6ceaa0fe3c7c', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '5d3c31b8698c0cf647fdeb2a4d7149dd4860ec45' }, amountCore), h("span", { key: '752dbb9d1d12255c3e5c6f49f3000973c8f026c7', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '9f13a2deadf0f9fd6dc2a6997599dd32766b6ebe', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
+        return (h("div", { key: 'b105b288c8b8af76225ae28b11e243ebaa5bdacd', class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: '496f3edfb86c0d5ec1ec4a0fdee792dcbe9ee312' }, plusMinusSign), currencyIsFront && h("span", { key: '45f5f1c7fc349582872e1271a127f63443615b38', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '49cad26e70ea2fc4b12bba9ddf32ae86b057521c' }, amountCore), h("span", { key: '3fd6d5c8070e9ac08efcb382421828025e8a10c4', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: 'a8623526722fad8080c59ab488e9f1557031de38', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
     }
     static get watchers() { return {
         "amount": ["propsUpdated"],

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

@@ -271,7 +271,7 @@ const Q2DataTable$1 = /*@__PURE__*/ proxyCustomElement(class Q2DataTable extends
     /// DOM ///
     render() {
         const { caption } = this;
-        return (h("div", { key: '30e25533bb3c08e39535399938c6612722b4f058', class: "container" }, h("table", { key: 'c961a20fb875484f83b8023b9c5b03e95aa03427' }, caption && h("caption", { key: 'e4ad3f9d2c5717914794479caaae1b1961aa92b9', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: '6b24acf2ae2ace0665910483d8c3b7b28ec40a42', class: "container" }, h("table", { key: '2820c1edc6e52afa271f0c6984bcaa23b1411edf' }, caption && h("caption", { key: '359508447bdc339c30c272a2e60cc4096d5099fe', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderTableColGroup() {
         const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;

package/dist/components/q2-detail.js

@@ -94,7 +94,7 @@ const Q2Detail$1 = /*@__PURE__*/ proxyCustomElement(class Q2Detail extends HTMLE
     // #endregion
     // #region Render methods
     render() {
-        return (h("div", { key: '2473cb27afe7744a1e5aac06df18bf5b5c7f2dbe', class: this.detailClasses }, this.hasLabel && (h("div", { key: '00bec97971994b9012d23e2cbf46b422a270c0d3', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'cc9b5aac087660022fd20043507859fa5eafcbfd', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: '6caa3ba4dc7fafd725fbbb191fa57c46ff9f52bc', class: this.detailClasses }, this.hasLabel && (h("div", { key: 'e8a0149d3c9fc8d1e24249b04b0390b52502c93b', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: '03d8271ffc92dd8a3b09600edf7e3fc97c539403', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     get hostElement() { return this; }
     static get style() { return Q2DetailStyle0; }

package/dist/components/q2-dropdown.js

@@ -294,7 +294,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
     /// DOM ///
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: 'f6f0b6c404fbb9040e08e6ec1a17a9ae7a6e10fd', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '7e7115046cbeb548012b55d5b7ba2dc1672f1e39', ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("q2-popover", { key: '0f74367791e5d8217ed62aa0b113c0548fd8a37b', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("div", { key: '5e5a5bbd0f48419738317750d320f4be0a5cbe11', onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown, role: "menu", "aria-label": loc(this.label) || undefined }, h("slot", { key: 'a8fabf9f2df4c37bb2fcb75b0d292a38043c2feb' })), this.open && (h("q2-btn", { key: '352beb299f771fa0e64812075c17c542e6815da1', class: "sr close-dropdown", onFocus: this.closeDropdown })))));
+        return (h("click-elsewhere", { key: 'ee94a1cfd8c7d1d10f6c59b6e964e5ca08ed2566', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'cb5d25d539e869a1079aa0aedc36151a49e39c42', ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("q2-popover", { key: '704f6139720944870d6f60164b61977cca22418d', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("div", { key: '57d3c360c8bcfa17b26b1603b4214756ecbb61c9', onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown, role: "menu", "aria-label": loc(this.label) || undefined }, h("slot", { key: 'e945ef8e264f4fb55fdf90a098116724101d238f' })), this.open && (h("q2-btn", { key: '602a41e4204dfaa039406ef2a82972dc18e9e0db', class: "sr close-dropdown", onFocus: this.closeDropdown })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -202,7 +202,7 @@ const Q2EditableField$1 = /*@__PURE__*/ proxyCustomElement(class Q2EditableField
         }
     }
     render() {
-        return (h("div", { key: 'cb9b4c1fefeea576703bba7ee15852249bcc5943' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: '68fd59070a833a79f6352fb62375f6d1388efe0b' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     generateEditStateDOM() {
         return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: this.hasHints ? this.hints : undefined, errors: this.hasErrors ? this.errors : undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));

package/dist/components/q2-input2.js

@@ -3450,7 +3450,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
     }
     /////// VIEW METHODS ///////
     render() {
-        return (h("div", { key: '19da6d9100793def6d020611d86f1b3ff16fcf0d', class: this.wrapperClasses }, h("div", { key: '8540412456ab7214b12f1728e0397da049bb49bd', class: "label-wrapper" }, labelDOM(this), this.countDOM()), this.inputContainerDOM(), messagesDOM(this)));
+        return (h("div", { key: 'ab401e37133bd42fc82e643f1d85ec4e104d497f', class: this.wrapperClasses }, h("div", { key: '63935b656d2d36c7c42ffd66d5b8662ac09bf906', class: "label-wrapper" }, labelDOM(this), this.countDOM()), this.inputContainerDOM(), messagesDOM(this)));
     }
     countDOM() {
         if (!this.showCount)

package/dist/components/q2-item.js

@@ -105,7 +105,7 @@ const Q2Item$1 = /*@__PURE__*/ proxyCustomElement(class Q2Item extends HTMLEleme
     // #region Render methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: 'ce737f24d1ef503c916c69cc05289e7a4515e2f5', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: 'a881a9cf8ba8f6476cb6d059feefc8372fdd3812', class: this.bulletClasses }, h("slot", { key: '65e691900697671c596f5dc7d6153fb61de2cf76', name: "bullet" }))), h("div", { key: 'fa160b4955d806674069e0be8bc58b873720d43e', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'abf0b9a23d1c8f0ed60d79979821feb7d8549970', class: "header" }, h("slot", { key: '02c2fff60bcd138da194417725f91c4a60f6536d', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '0152eb33c1e50b4d21f2f2d17e1a54f87a95cd9a', class: "body" }, h("slot", { key: '6f902b7116b90e67cd1c320a83dc0ced5d4d5307', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '82a7da347afd34c7a8d8cc2d806700d7fa911e88', class: this.actionClasses }, h("slot", { key: 'a863cbc215f1e3d67bc40b58e348281d0ab336e9', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '3258a9d72fa42ef630ab1dbad84d7248ba9a907c', class: this.footerClasses }, h("slot", { key: '6ddf529a02ed675990446ed5aff94212417eb21f', name: "footer" })))));
+        return (h("div", { key: 'f69b991449d96d104dc6c43b11e10df54a1527e7', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: 'baddf236e22f36ce876f58e782f22e01e60c13db', class: this.bulletClasses }, h("slot", { key: '279c943ce1fd95f7257680e79ea6d043540fba1a', name: "bullet" }))), h("div", { key: '8d6e754680517434dda6b268865a0c8c5f3294ec', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '6e3cfb19fb9fecae91525e065e3b99cfcd90b969', class: "header" }, h("slot", { key: '367c35a42e95350f5c606f3dab3738dbc7aa2287', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '6f155f0d3e4b06748dd4e130999be571df96d8f9', class: "body" }, h("slot", { key: 'c8158b2d6b8c5877756404dafe8421b3754f992a', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '3d9f72340d671442e25f2cd9c7cbe8ad9695b386', class: this.actionClasses }, h("slot", { key: 'c0e49f50574786b679531f7228a8126289da0cc5', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: 'c2bae2908f4c70d9fc11805176a27c23e2c3f3b9', class: this.footerClasses }, h("slot", { key: '3fdcf609c8729acc45549fca09ad090ad4f009a7', name: "footer" })))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ItemStyle0; }

package/dist/components/q2-legend2.js

@@ -103,7 +103,7 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
     // #endregion
     // #region Render methods
     render() {
-        return (h("click-elsewhere", { key: '8ee6971693e03e0823d3db40447389010de04fcf', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '3e61a3ce65430feeb44596680f8f042d83ac934e' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: 'd55155e36588eddb86941a8a85c68fd04c880ac1', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '25c948213b4d6645741ef22e013149ee63a19e21' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

package/dist/components/q2-list.js

@@ -71,7 +71,7 @@ const Q2List$1 = /*@__PURE__*/ proxyCustomElement(class Q2List extends HTMLEleme
     // #endregion
     // #region Render methods
     render() {
-        return (h("div", { key: '5cf0fbf1cf90821aad8380a082925050834930c5', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'e34cb030fc9a5ddd52f3b9668f5e4e6606a90ab3', class: this.headerClasses }, h("div", { key: '2c698cdc7359ba6404423c7f508b1f3583385de5', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '19e450240e0788440e61ea85bf729533c3dfef5f', name: "filter" }))), h("div", { key: '44c1a6503f9c80c01b3d58b48641272b580b0add', role: "list" }, h("slot", { key: '941440f0f21772302f0ac5ef70a42d4820cca063' }))));
+        return (h("div", { key: '4c5bdc8bf48c1f1dcbdada246bd021cfb4d52696', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '691bf182d8abf74b9469d96969ae4a975df68f87', class: this.headerClasses }, h("div", { key: '1a3a06cdfe9445b4bf7b4f77c41b47ccc61b64a4', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '9b7c05d747434e4cf24d123158edcb54517a2040', name: "filter" }))), h("div", { key: 'c7ba0cc52b865093eca667ed9003d52ebfa12f64', role: "list" }, h("slot", { key: '1b64bc65aca20e41fd50543df9b1217716a3becd' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ListStyle0; }

package/dist/components/q2-loc.js

@@ -13,7 +13,7 @@ const Q2Loc$1 = /*@__PURE__*/ proxyCustomElement(class Q2Loc extends HTMLElement
         this.value = undefined;
     }
     render() {
-        return h("span", { key: '207c331410df3dfa7963912368b2fab219a84a97' }, loc(this.value, this.substitutions));
+        return h("span", { key: 'a983e0108524632f36c67d59ca55046889e959a1' }, loc(this.value, this.substitutions));
     }
     static get style() { return Q2LocStyle0; }
 }, [1, "q2-loc", {

package/dist/components/q2-message2.js

@@ -44,7 +44,7 @@ const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLE
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: '48c08c15096e1787af65a9d847a191f5b7ee7100', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '4d673d2bdf92f56606ab1075d8af807992982a57', class: "sr" }), h("div", { key: 'c31396c4d2aaed7b2d6ee96e33697e7c14c814af', class: "sr message-label" }, messageLabel), h("div", { key: '9bedced6017fa3da2024ce713688e4b5b006f563', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'b3d452032ef55d3aca7ea63768f820a522241ba6' }))));
+        return (h("div", { key: '7803d7b21356ca0c70883387b8add4a6babd192c', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '18bc8892294dc16d5668a2c10b80e2b3c21bf94c', class: "sr" }), h("div", { key: '00c9adcd0ce6a0021baf03041443a12d3673908a', class: "sr message-label" }, messageLabel), h("div", { key: '6d697ed20f5ceef552d819f2b22212ee750f06a6', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '789fd82fdd39c79b1ca48f3e353c7ebd3abe82b7' }))));
     }
     messageIcon(type) {
         const iconMap = {

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

@@ -139,10 +139,10 @@ const Q2MonthPicker$1 = /*@__PURE__*/ proxyCustomElement(class Q2MonthPicker ext
         overrideFocus(this.hostElement);
     }
     render() {
-        return (h("div", { key: '9a58edaff34f92a675f9df129f843c21cb0d271d', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '0903f95ddacd18a43ca7219bc4cf610dd6386304', class: "navigation" }, h("q2-btn", { key: '54df6360507c598ab40592eb63e2412e8f571fb3', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: '39600ab8497f7c9763dbed6308cd2377168bdb63', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: 'd250c850de8a4e501a7136e32b72d55c81c95b39', class: "navigation" }, h("q2-btn", { key: '36caef4e3cde69d0666cedc50014604d17d8b450', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: 'bbb1a38a4e5a7a22a449700d2b9cb1ceadf52c29', class: "year" }, this.year), h("q2-icon", { key: 'eeccf64f25a569491e1a02f248e160e9ff8e769b', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'de47dff959e5f3459c716e2f5d54aa911007e97e', class: "month-controller" }, h("div", { key: '5f8fcd7cce3a14e3f4edb0b060ba72d429a44cea', class: "cal-year-prev-next" }, h("q2-btn", { key: '18482f30f6905d858f59f00a073622b3fe40d45c', 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", { key: '5daeea35c3a1af290bc65468f3f423b4765eb624', type: "arrow-left" })), h("q2-btn", { key: 'a2ea40ba55c61c7a80e50fc205e12940f40dd3e8', 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", { key: '05df41c89607c8efa7d645108c0ac6101a35f114', type: "arrow-right" }))))), h("div", { key: 'd46cba38180a70b7f1468fa34bafd6c04c5dd487', 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", { key: '24a1512f07d15a78ca900e6e5625fed2eda76ab7', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '2ba93fdffa23e3d6749206562cba9ac95e1b0654', class: "year" }, this.year), h("q2-icon", { key: 'b510bccf4b540e745dc00f05715c2cdd51e7b784', class: "year-icon off", type: "chevron-down" })), h("div", { key: '34f887c634adbd14b864efa5e6aede7548092690', class: "month-controller" }, h("div", { key: '9cda711f14d714201bf1c41f3568cda25fb213f4', class: "cal-year-prev-next" }, h("q2-btn", { key: '2c5a3b53cc659ea1829f65811d253f66ca98d7f7', 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", { key: '59105784727939d1683292686c7e4ad240e584bd', type: "arrow-left" })), h("q2-btn", { key: '8177788039df074a5dd64b158b78dd99dfca283b', 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", { key: '744017aa8f2b90d5b1e4ad41583fd61e290dfe78', type: "arrow-right" }))))), h("div", { key: 'd2d1223744da022129a5895def3608ff2680dd9d', 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", { key: '43e728ceda906af8a418f7c47a5e6214dacbdcf1', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return this; }
     static get style() { return Q2MonthPickerStyle0; }

package/dist/components/q2-optgroup2.js

@@ -43,7 +43,7 @@ const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class Q2Optgroup extends HTM
         });
     }
     render() {
-        return (h("div", { key: '22334d6ad4d588af06d33c426442c17e517bfdff', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '82470c713ed744c41ca8a1682d78e4795e83e125', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'd246db5839936be3b0ee56eec47e7a11aa0269ee', class: "q2-optgroup-options" }, h("slot", { key: '12442af1a98a84db8023dd7572ffa3d6fba34fdc' }))));
+        return (h("div", { key: '7296e98c4ba1bf5b7d43a7a41bd71674b6a29786', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '9f6acc6efc59b09550b809b2a47b2e8680ba8857', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'b2b13e828cf5974f021047dc08006d389518c7bc', class: "q2-optgroup-options" }, h("slot", { key: 'e0eb0eb5889abb67a65c514a4fd8054625fa3901' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -537,7 +537,7 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class Q2OptionList extends
     }
     /// DOM ///
     render() {
-        return (h(Host, { key: '2a470de268f16262aa675475fd2425bd50b4edad' }, h("div", { key: '549deb2fbe009ea6cef0444a4867710b4ad1abf6', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '0f5857df5db8f073ef28e2a6760d6d798ab3d1fd', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'cbee273a92302a2b8c9302d65444534a6c04b42f' })))));
+        return (h(Host, { key: '38a759a0589e0f90af160e0c5cd2bd21e29a44f1' }, h("div", { key: '0090c64f7fc14feb4dfece413f571da46417b40d', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '90a3fdd55f2a0823ee5b0654a25bb1c80278091e', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'de7bc5452f74aeed9c0c45f1228defbeef6a7bba' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-option2.js

@@ -59,7 +59,7 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: '4b5001e4870ee08cbd313e029bc2fa6b15503ced', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '652c794d376c56a8cdb116e8c9d37596dad6a4dd', type: "checkmark" }), h("div", { key: 'f39323dc5d9959daf61833a4cd8066bea83ea0c6', class: "content" }, h("slot", { key: '2107c286ec7b9ce7f94e4e3de3a0789217a56e45' }))));
+        return (h(Host, { key: 'f151dcc4f6c384ed57f161201e4f47130c9352bf', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '999146b64cc2827794339665aa3d4a91468bb07f', type: "checkmark" }), h("div", { key: '8fe4f1e3d064ce8b2b0c834ba3b2a5896a8f3d66', class: "content" }, h("slot", { key: '4c95a66a6b32b5b388a69fd235febcefda232772' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2OptionStyle0; }

package/dist/components/q2-pagination.js

@@ -187,7 +187,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 total,
             });
         }
-        return (h("nav", { key: '50343b3b19ac4d64966783eab66f5ce61dc1b94f', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '7ab3dafbf56de8ec12ac49b470fdb5a8d4df2f74', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '492ad7b6180eec733d0a21266b4f21b5f032e1a7', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '30c1287dccf3a2da6a32f17529075e4ce07ec3ed', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -196,7 +196,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'ccac7c6ba741c00ee29a273ff95d6f1376c82114', class: "btn-group" }, h("q2-btn", { key: '995f73fe6f8b7caba3f33b26d2951d6dfdb9c8ad', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '511c412f9b64ef9c255d3bb0c3036c508041ba1e', type: "chevron-double-left" })), h("q2-btn", { key: 'b31a58e9895d6bd0a290bc878bcc90e5d05573c4', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '237e92a052c98544f5e5d3655b76a87fcbae1ffc', type: "chevron-left" }))), h("div", { key: 'c5f5dbcf26d85bf38329ca342462c097a6fdfbf2', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '744fc7c5fd66aa050e336173677c0560597773a2', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '6a51a7881d8dc25f33e882cb801dfa49e66f5624', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '9fcd3d30b4c641e428f9088c5da31fe9236af065', 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", { key: '74fb4e9dc5fb522a2a8e4d6bb079de21a75e7b8e', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'af17aff0c838a045e151651ff58c3aeae37310a4', class: "btn-group" }, h("q2-btn", { key: '6241c7d80e88ebf31dba7ac2c013174415e78860', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'c101b0a222e94f3bef8a6e878c5d507bf15bf9a7', type: "chevron-right" })), h("q2-btn", { key: '91b74767914718048301eb21ac5ddf93ce7dca5e', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'b8ce5dfd5622c941602e6439fff5e0e75b639855', type: "chevron-double-right" }))), h("div", { key: '5897095710edb3fa0fc00eaf072de8d6e1cee844', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
+            })), h("div", { key: '1e255884140a5fbb7ba51cb8046727ab8cb602a5', class: "btn-group" }, h("q2-btn", { key: '48fc8c61b04e0005b98cbffbc3320e4dd4f0855e', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '9c454decc6feadc6bbd3f21044c7bebd46d5a55a', type: "chevron-double-left" })), h("q2-btn", { key: '9214aee00653c2417a284292c5df431bcf9cdceb', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '9761ca7c383a5ece9582fb07b30f0fb70eceba17', type: "chevron-left" }))), h("div", { key: 'd0749351d1ac3d1193a05a0f4b6f55860f98a220', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '2a160fdc5453904fcfb330b95ae548ab2df2a06a', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '250476d5c0e4e4bb90065764c4e27bb49bf79076', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '079e89b7938ae91ebf690d42a9ea0a6191decadc', 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", { key: 'f943840d83883da0908eed6cad0b0bbeeccee0a2', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '8aa10edcf80ce32fb0252c133f28304cfbb0ccc9', class: "btn-group" }, h("q2-btn", { key: '2b97474ae891322efd074dae86881b09dac6eb62', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '47b3882a0c232fbe6737e8633adf8f4a0ad27b8d', type: "chevron-right" })), h("q2-btn", { key: '40604303f9479091821ee3390681d22c3d4507d0', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'ecf929fe7b18bcd19c7e9045c82245d8c4764251', type: "chevron-double-right" }))), h("div", { key: '30c078a5b0224753dd5daaf0f83ca7efbe5fbaec', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-pill.js

@@ -266,7 +266,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: 'dcb3816548945254bc0f94439f91de299fcbffac', onChange: this.onClickElsewhere }, h("div", { key: '794452f573f49b54160b50f4423802b712e54655', class: wrapperClassNames.join(' ') }, h("div", { key: '00f931b80cfd9d2003a2e094e2963cc7d006f767', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '2c4bf905fd879d7178e084e0dcce1c47d5949fd6', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '4df639376c78dbec98e5ddf38a8dd440bd2403ac', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'f1feccaa07ab59adb5dda52dadc04300da3ebc12', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '637e3da2b231bc759d416bcf26ecd43b5ca17be3', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '6d5388276f4c328299f7990a1235ad26279852e3' }))))));
+        return (h("click-elsewhere", { key: 'ca6bd41d2351dc05ba4e0ed87b69e335a11a4fe3', onChange: this.onClickElsewhere }, h("div", { key: 'cd9186c0d5f5b32f19f9221a7ba7f495c4a5a3fd', class: wrapperClassNames.join(' ') }, h("div", { key: '14d3658c8abe24567f42ffb82082ef1073326aa2', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '2e64deb6bc1caaa4f3b831060103532886f2d8a6', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '42b583abcc318ab1027f7fb5a5cbd437291f8cb4', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '0c197bbe3f080cc5c8ef78df88d635848e7910e0', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'd1d84d56b201242986c8de169fce79e64dd978ab', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '4ed0fe54a2b3b2bc969bf2f2466633148ad20ad0' }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-popover2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { g as handleDeprecationWarning, w as waitForNextPaint } from './index2.js';
 
-const q2PopoverCss = "*{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 #0066cc)}: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}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 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}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
+const q2PopoverCss = "*{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 #0066cc)}: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}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}:popover-open,.show{position:absolute;margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 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}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
 const Q2PopoverStyle0 = q2PopoverCss;
 
 const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLElement {
@@ -14,7 +14,6 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
          * The number of pixels to leave between the popover and the edge of the viewport
          */
         this.displayBuffer = 10;
-        /** remove when Popover API is supported in iOS */
         this.orientationChanged = false;
         /// Helpers ///
         this.handleMinHeight = () => {
@@ -22,6 +21,9 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
                 handleDeprecationWarning(this, 'minHeight', 'prop');
             }
         };
+        this.handlePopoverToggleEvent = (event) => {
+            this.popoverStateChanged.emit({ open: event.newState === 'open' });
+        };
         this.viewPortChanged = () => {
             if (!this.open)
                 return;
@@ -31,25 +33,42 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
             this.orientationChanged = true;
             this.viewPortChanged();
         };
-        this.setFixedCSSProperties = async () => {
-            var _a, _b;
-            const { controlElement, containerElement, currentDirection, rootElementRect } = this;
+        this.setPopoverAPICSSProperties = async () => {
+            var _a, _b, _c, _d, _e, _f;
+            const { controlElement, containerElement, currentDirection, isModule, align } = this;
             const { top: controlTop, bottom: controlBottom, left: controlLeft, right: controlRight, } = (_b = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(controlElement)) !== null && _b !== void 0 ? _b : {
                 top: 0,
                 bottom: 0,
                 left: 0,
                 right: 0,
             };
-            const popoverLeft = controlLeft - rootElementRect.left;
+            const popoverLeft = controlLeft;
+            const popoverRight = ((_c = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _c === void 0 ? void 0 : _c.width) - controlRight;
+            if (align === 'right') {
+                containerElement.style.setProperty('--comp-pop-right', `${popoverRight - window.scrollX}px`);
+                containerElement.style.setProperty('--comp-pop-left', 'unset');
+            }
+            else {
+                containerElement.style.setProperty('--comp-pop-left', `${popoverLeft + window.scrollX}px`);
+                containerElement.style.setProperty('--comp-pop-right', 'unset');
+            }
             if (this.block)
-                containerElement.style.setProperty('--comp-pop-width', `${controlElement.offsetWidth || 0}px`);
-            containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);
-            containerElement.style.setProperty('--comp-pop-right', `${rootElementRect.width + rootElementRect.left - controlRight}px`);
+                containerElement.style.setProperty('--comp-pop-width', `${(controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth) || 0}px`);
             if (currentDirection === 'up') {
-                containerElement.style.setProperty('--comp-pop-bottom', `${rootElementRect.height + rootElementRect.top - controlTop}px`);
+                if (isModule) {
+                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);
+                }
+                else {
+                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop - ((_d = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) - window.scrollY}px`);
+                }
             }
             if (currentDirection === 'down') {
-                containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}px`);
+                if (isModule) {
+                    containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);
+                }
+                else {
+                    containerElement.style.setProperty('--comp-pop-top', `${controlBottom + ((_f = (_e = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _e === void 0 ? void 0 : _e.offsetTop) !== null && _f !== void 0 ? _f : 0) + window.scrollY}px`);
+                }
             }
             // Wait for one paint to prevent layout thrashing
             await waitForNextPaint();
@@ -80,7 +99,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
             containerElement.style.setProperty('--comp-pop-opacity', '1');
         };
         this.direction = undefined;
-        this.align = undefined;
+        this.align = 'left';
         this.open = undefined;
         this.block = undefined;
         this.controlElement = undefined;
@@ -90,13 +109,25 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         this.show = false;
     }
     /// Lifecycle hooks ///
+    componentWillLoad() {
+        if (!this.supportsPopoverAPI) {
+            console.warn('The Popover API is not supported in this browser. Please update your browser to the latest version. The component will use legacy mode.');
+            this.mode = 'legacy';
+        }
+    }
     componentDidLoad() {
         this.handleMinHeight();
+        if (this.supportsPopoverAPI)
+            this.containerElement.addEventListener('toggle', this.handlePopoverToggleEvent);
         if (this.open)
             this.determinePopDirection();
     }
     disconnectedCallback() {
         this.removeViewportListeners();
+        this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);
+        this.containerElement = null;
+        this.contentElement = null;
+        this.controlElement = null;
     }
     /// Methods ///
     async toggle() {
@@ -151,7 +182,12 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         else {
             this.removeViewportListeners();
             this.currentDirection = undefined;
-            this.show = false;
+            if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
+                this.show = false;
+            }
+            else {
+                this.containerElement.hidePopover();
+            }
             await waitForNextPaint();
             this.clearCSSProperties();
         }
@@ -168,7 +204,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         event.stopPropagation();
     }
     /// Getters ///
-    get actualDirection() {
+    get providedDirection() {
         const { direction } = this;
         switch (direction) {
             case 'up':
@@ -184,23 +220,29 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         const hasPlatformDimensions = Object.keys((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) !== null && _b !== void 0 ? _b : {}).length > 0;
         return isIframe && hasPlatformDimensions;
     }
+    get supportsPopoverAPI() {
+        return Object.hasOwn(HTMLElement.prototype, 'popover');
+    }
     addViewportListeners() {
         var _a;
         window.addEventListener('resize', this.viewPortOrientationChanged);
-        // #region remove when Popover API is supported in iOS
-        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });
-        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.viewPortOrientationChanged);
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.viewPortChanged);
+        window.addEventListener('scroll', this.viewPortChanged, {
+            passive: true,
+            capture: true,
+        });
+        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('orientationchange', this.viewPortOrientationChanged);
         window.addEventListener('orientationchange', this.viewPortOrientationChanged);
-        // #endregion
     }
     removeViewportListeners() {
         var _a;
         window.removeEventListener('resize', this.viewPortOrientationChanged);
-        // #region remove when Popover API is supported in iOS
-        window.removeEventListener('scroll', this.viewPortChanged);
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.viewPortChanged);
+        window.removeEventListener('scroll', this.viewPortChanged, {
+            capture: true,
+        });
         (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('orientationchange', this.viewPortOrientationChanged);
         window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
-        // #endregion
     }
     clearCSSProperties() {
         this.containerElement.style.removeProperty('--comp-pop-max-height');
@@ -219,17 +261,18 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         if (!isOpen)
             return;
         this.currentDirection = direction;
-        this.show = true;
-        if (this.mode === 'legacy') {
+        if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
+            this.show = true;
             this.setAbsoluteCSSProperties();
         }
         else {
-            this.setFixedCSSProperties();
+            this.setPopoverAPICSSProperties();
+            this.containerElement.showPopover();
         }
     }
     async determinePopDirection() {
         var _a, _b, _c;
-        const { containerElement, controlElement, actualDirection, displayBuffer } = this;
+        const { containerElement, controlElement, providedDirection, displayBuffer } = this;
         if (containerElement)
             containerElement.style.maxHeight = null;
         await waitForNextPaint();
@@ -264,7 +307,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         const shouldUpdateMaxHeight = !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;
         // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
         this.orientationChanged = false;
-        const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;
+        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;
         switch (currentOrDetermineDirection) {
             case 'up':
                 if (shouldUpdateMaxHeight) {
@@ -282,12 +325,14 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
     }
     /// DOM ///
     render() {
-        const containerClasses = ['container', this.currentDirection];
+        const containerClasses = ['container', this.currentDirection, this.align];
         if (this.show)
             containerClasses.push('show');
+        if (this.block)
+            containerClasses.push('block');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (h("div", { key: 'c520b4b578cc1febf85121901d4e5abd490b777a', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { key: 'c827ea0a3f5528fd03efb6879fc38bfabe3fbbf8', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '49038fed6866dc8f56e194127e96c0b9a4567f91' }))));
+        return (h("div", { key: '72de4e17657e0e9b7b3697ff7b1cdd8aa6c9c776', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "auto" }, h("div", { key: 'e1c29594d6106380473e38fd11ff9720db93d03e', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '35b98793008291b8b51780bb3167804365127b9e' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {