q2-tecton-elements 1.53.1 → 1.53.3

package/dist/esm/q2-currency.entry.js

@@ -121,7 +121,7 @@ const Q2Currency = class {
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, } = this;
-        return (h("div", { key: 'a2427d807ba868ebff71438f4422e075205da869', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: '594c8cd84fd3226b2d8170ee9a05532f57bb0d6f' }, plusMinusSign), currencyIsFront && h("span", { key: 'f726da3911833f35f0fe5c5b68d9d341acf5af27', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '08644b7c1397237676dc00a81552ba7badefa38e' }, amountCore), h("span", { key: 'cab6f51a4af6067122f3c2994d79f0d9fb828c14', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '1f1265a8bf437499d0d613f47b7c2f357e22165c', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
+        return (h("div", { key: 'f1274f5d1555f1713d2993bacb8521c71a03977f', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: 'be619265417e9264b453a0523c074a30a954fa29' }, plusMinusSign), currencyIsFront && h("span", { key: '1309c643fffaa531a0199898b34ac290c9118d49', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '65ad17baf3c76891f22acd35c4de3c3b7d70d82a' }, amountCore), h("span", { key: '2122a260b4a10c4e070a9e7dd7918409cb3564cd', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '62c45c5ccba750bf9b382e45b8aa836469e755ce', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-data-table.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-7a5365e2.js';
-import { m as resizeIframe, l as loc } from './index-d18e2a20.js';
+import { m as resizeIframe, l as loc } from './index-99c46474.js';
 
 const q2DataTableCss = "*{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}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--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, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-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)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-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-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.striped:nth-child(even){background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped:nth-child(odd){background:var(--tct-data-table-row-odd-background, transparent)}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";
 const Q2DataTableStyle0 = q2DataTableCss;

package/dist/esm/q2-detail.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { e as hasSlotContent, l as loc } from './index-d18e2a20.js';
+import { e as hasSlotContent, l as loc } from './index-99c46474.js';
 
 const q2DetailCss = "*{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}:host{display:block}::slotted([slot]){display:flex;align-items:center;--tct-icon-size:var(--tct-detail-label-icon-size, 16px)}.detail{column-gap:var(--tct-detail-gap-column, var(--app-scale-1x, 5px));row-gap:var(--tct-detail-gap-row, 0px)}.detail-block{display:flex;width:100%}.detail-inline{display:flex}.detail-horizontal{align-items:var(--tct-detail-vertical-alignment, baseline);flex-direction:row}.detail-stacked{flex-direction:column}.detail-stacked-alignment-left{align-items:flex-start}.detail-stacked-alignment-right{align-items:flex-end}.label{flex:1;text-align:left;line-height:1.5;color:var(--tct-detail-label-font-color, #141430)}.label-size-xsmall{color:var(--tct-detail-label-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-label-xsmall-font-size, 14px)}.label-size-small{color:var(--tct-detail-label-small-font-color);font-size:var(--tct-detail-label-small-font-size, 14px)}.label-size-medium{color:var(--tct-detail-label-medium-font-color);font-size:var(--tct-detail-label-medium-font-size, 14px)}.label-size-large{color:var(--tct-detail-label-large-font-color);font-size:var(--tct-detail-label-large-font-size, 16px)}.label-size-xlarge{color:var(--tct-detail-label-xlarge-font-color);font-size:var(--tct-detail-label-xlarge-font-size, 18px)}.label-size-inline{font-size:var(--tct-detail-label-inline-font-size, 1em);color:inherit}.description{flex:1;display:flex;align-items:center;line-height:1.5;color:var(--tct-detail-description-font-color, #141430);column-gap:var(--tct-detail-description-gap-column, var(--app-scale-1x, 5px))}.description-alignment-right{justify-content:flex-end}.description-size-xsmall{color:var(--tct-detail-description-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-description-xsmall-font-size, 14px)}.description-size-small{color:var(--tct-detail-description-small-font-color);font-size:var(--tct-detail-description-small-font-size, 14px)}.description-size-medium{color:var(--tct-detail-description-medium-font-color);font-size:var(--tct-detail-description-medium-font-size, 24px)}.description-size-large{color:var(--tct-detail-description-large-font-color);font-size:var(--tct-detail-description-large-font-size, 28px)}.description-size-xlarge{color:var(--tct-detail-description-xlarge-font-color);font-size:var(--tct-detail-description-xlarge-font-size, 32px)}.description-size-inline{font-size:var(--tct-detail-description-inline-font-size, 1em);color:inherit}";
 const Q2DetailStyle0 = q2DetailCss;
@@ -103,7 +103,7 @@ const Q2Detail = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '279671eea96d480283a80f3de70e8a3057e153a0', class: this.detailClasses }, this.hasLabel && (h("div", { key: '561d1ede1db345e2a7979947e463ba45db33559e', 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: 'e8f20b79064d73157058cee3d73496bbd346531f', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: '811c54a224bbbefce94cbf397a29a4cb1f98ba2b', class: this.detailClasses }, this.hasLabel && (h("div", { key: 'b2c294eb4c1b5cd525351dc67c2dc58ed4b75b70', 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: '9d979c672eeefd21882fa676483cd8020e15dc7c', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-dropdown-item.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { l as loc, a as handleAriaLabel } from './index-d18e2a20.js';
+import { l as loc, a as handleAriaLabel } from './index-99c46474.js';
 
 const q2DropdownItemCss = "*{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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:44px;min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);flex:1;text-align:left;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, var(--comp-default-dropdown-item-padding)));background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))))}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}";
 const Q2DropdownItemStyle0 = q2DropdownItemCss;

package/dist/esm/q2-dropdown.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, F as Fragment, g as getElement } from './index-7a5365e2.js';
-import { w as waitForNextPaint, o as overrideFocus, i as isEventFromElement, j as handleRenamedProp, a as handleAriaLabel, l as loc } from './index-d18e2a20.js';
+import { w as waitForNextPaint, o as overrideFocus, i as isEventFromElement, j as handleRenamedProp, a as handleAriaLabel, l as loc } from './index-99c46474.js';
 
 const q2DropdownCss = "*{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}:host{display:inline-flex}:host([block]){display:block}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
 const Q2DropdownStyle0 = q2DropdownCss;
@@ -69,6 +69,7 @@ const Q2Dropdown = class {
             }
         };
         this.onToggleClick = () => {
+            this.popoverElement.controlElement = this.controlElement;
             if (this.open) {
                 this.closeDropdown();
             }
@@ -77,6 +78,7 @@ const Q2Dropdown = class {
             }
         };
         this.onToggleKeydown = async (event) => {
+            this.popoverElement.controlElement = this.controlElement;
             switch (event.key) {
                 case 'ArrowUp':
                     event.preventDefault();
@@ -366,7 +368,7 @@ const Q2Dropdown = class {
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: '8e1168806f48fde1b2c0f549f013b3313f4bb04b', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'bb9a31da210c6fa1afae6fbf1f0b8f98b6425ccd', 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.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (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: '7d5aa6bca5b4d6b494d556c49ec0c84e6e3f37b6', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("div", { key: 'b548e62ef46ca01018d742c443fc3aea42ab8875', onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown, role: "menu", "aria-label": loc(this.label) || undefined }, h("slot", { key: 'ef88abd2fd3d358b3f9e3464b4b5066bb373b31e' })))));
+        return (h("click-elsewhere", { key: 'e83fd5a2a75b1e963930da8eb75b967cb4f97eb3', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'ed6b0e6ca0785be6e4d35c1a02aec0e6e2d8ae4d', 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.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (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: '0cb61bd6326f75533e76d18d95e7c9e591abe160', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("div", { key: 'afb21f6a1a8ec020ca1a7c008bf9dea003b291fb', onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown, role: "menu", "aria-label": loc(this.label) || undefined }, h("slot", { key: 'ed769744aea9c93fd2caaabd0c3c9e21084382c5' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-dropdown.entry.js.map

@@ -1 +1 @@
-{"file":"q2-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\n    };\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    focusFirstItem = async () => {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n        if (!firstItem) return;\n        await waitForNextPaint();\n        firstItem.dispatchEvent(new FocusEvent('focus'));\n    };\n\n    focusLastItem = async () => {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        if (!lastItem) return;\n        await waitForNextPaint();\n        lastItem.dispatchEvent(new FocusEvent('focus'));\n    };\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (item.disabled || item.separator) return;\n        this.closeDropdown();\n        await waitForNextPaint();\n        this.focusToggle();\n    };\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        switch (event.key) {\n            case 'Escape':\n                this.closeDropdown();\n                this.focusToggle();\n                break;\n\n            case 'Tab':\n                this.closeDropdown();\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'prev');\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'next');\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        switch (event.key) {\n            case 'ArrowUp':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusLastItem();\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusFirstItem();\n                return;\n\n            case 'Escape':\n                event.preventDefault();\n                this.closeDropdown();\n                break;\n\n            case 'Tab':\n                if (this.open) this.closeDropdown();\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = function () {\n                            return window.TectonElements?.navigateTo?.(\n                                menuItemData.featureName,\n                                menuItemData.moduleName,\n                                queryParams\n                            );\n                        };\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = function () {\n                            return window.TectonElements?.showOverpanel?.(\n                                `${menuItemData.featureName}.${menuItemData.moduleName}`,\n                                queryParams,\n                                undefined,\n                                true\n                            );\n                        };\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                        role=\"menu\"\n                        aria-label={loc(this.label) || undefined}\n                    >\n                        <slot />\n                    </div>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\n    };\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    focusFirstItem = async () => {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n        if (!firstItem) return;\n        await waitForNextPaint();\n        firstItem.dispatchEvent(new FocusEvent('focus'));\n    };\n\n    focusLastItem = async () => {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        if (!lastItem) return;\n        await waitForNextPaint();\n        lastItem.dispatchEvent(new FocusEvent('focus'));\n    };\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (item.disabled || item.separator) return;\n        this.closeDropdown();\n        await waitForNextPaint();\n        this.focusToggle();\n    };\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        switch (event.key) {\n            case 'Escape':\n                this.closeDropdown();\n                this.focusToggle();\n                break;\n\n            case 'Tab':\n                this.closeDropdown();\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'prev');\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'next');\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    onToggleClick = () => {\n        this.popoverElement.controlElement = this.controlElement;\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        this.popoverElement.controlElement = this.controlElement;\n        switch (event.key) {\n            case 'ArrowUp':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusLastItem();\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusFirstItem();\n                return;\n\n            case 'Escape':\n                event.preventDefault();\n                this.closeDropdown();\n                break;\n\n            case 'Tab':\n                if (this.open) this.closeDropdown();\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = function () {\n                            return window.TectonElements?.navigateTo?.(\n                                menuItemData.featureName,\n                                menuItemData.moduleName,\n                                queryParams\n                            );\n                        };\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = function () {\n                            return window.TectonElements?.showOverpanel?.(\n                                `${menuItemData.featureName}.${menuItemData.moduleName}`,\n                                queryParams,\n                                undefined,\n                                true\n                            );\n                        };\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                        role=\"menu\"\n                        aria-label={loc(this.label) || undefined}\n                    >\n                        <slot />\n                    </div>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/esm/q2-editable-field.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
-import { a as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index-d18e2a20.js';
+import { a as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index-99c46474.js';
 
 const q2EditableFieldCss = "*{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}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}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}";
 const Q2EditableFieldStyle0 = q2EditableFieldCss;

package/dist/esm/q2-example.entry.js

@@ -126,7 +126,7 @@ const Q2Example = class {
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: 'e4df51465f7c14e0ff4ae2463613e73cc6100318', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: '2a8810e8b8152257cb5f710570a7b60708f76bde', attribute: "navigation" }, this.renderMenuInner());
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-file-picker.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-7a5365e2.js';
-import { l as loc, e as hasSlotContent } from './index-d18e2a20.js';
+import { l as loc, e as hasSlotContent } from './index-99c46474.js';
 
 const q2FilePickerCss = "*{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}*{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}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{display:block}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4D4D4D));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0D0D0D));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #E8F5FC));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #BEE1F6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0D0D0D));--tct-btn-padding:0;--tct-item-body-color:var(--tct-file-picker-file-item-size-color, var(--t-gray-6, #4D4D4D));--tct-item-body-font-size:var(--tct-file-picker-file-item-size-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-file-item-size-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-file-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-file-item-border-width, 1px) solid var(--tct-file-picker-file-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-file-item-name-color, var(--t-gray-1, #0D0D0D));--tct-item-header-font-size:var(--tct-file-picker-file-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-file-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-file-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px))}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:182px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0D0D0D));font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0D0D0D));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0D0D0D));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}";
 const Q2FilePickerStyle0 = q2FilePickerCss;

package/dist/esm/q2-formatted-text.entry.js

@@ -51,7 +51,7 @@ const Q2FormattedText = class {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: '1957c3f976bc87c24859d94c27e1baf35da8fc03', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '8dac0d558d205fc183d16c4aef922ab470eec6ab' }, this.formattedValue)));
+        return (h("div", { key: '0deb2247f66e39d44ab56bc889520cd67caf20dc', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '7b8bba7f894f439d4628329082dd41a3629b3f79' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],

package/dist/esm/q2-item_3.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement, c as createEvent } from './index-7a5365e2.js';
-import { o as overrideFocus, e as hasSlotContent } from './index-d18e2a20.js';
+import { o as overrideFocus, e as hasSlotContent } from './index-99c46474.js';
 
 const q2ItemCss = "*{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}*{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}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 const Q2ItemStyle0 = q2ItemCss;
@@ -105,7 +105,7 @@ const Q2Item = class {
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: '0829fd5b35d9479ab8a7dae744e8a09e90a1a128', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '6fba2ecbbe6fe30121f15cda9cc5026a5c5468c2', class: this.bulletClasses }, h("slot", { key: '9bd9880d99124c1102725b5ce6ca49ac1e229cf9', name: "bullet" }))), h("div", { key: '0c184236511ba043c91a009c93680858e34de545', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '2570b5fd60955dbbc97f5f3d941a5d653785fb0e', class: "header" }, h("slot", { key: 'a438cafe8aeded03ee814f736ae897852a9f1415', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '270585a7a4ca111aedd4baeab101c353814aa72c', class: "body" }, h("slot", { key: 'cc95afec425e06c0a9edccedb0420207ccab88a0', name: "body" })))), this.hasActionSlotContent && (h("div", { key: 'c6a32baa731bd79c57a625d615058442a5bc764a', class: this.actionClasses }, h("slot", { key: '2b3104f1e0b4eed5e605c5784468f608240a881b', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '0a989b6ec5ca51e55fb44d0e90f57fe792a6bf35', class: this.footerClasses }, h("slot", { key: '76ae62c0b433f78b187853da2cf40394f7ca315e', name: "footer" })))));
+        return (h("div", { key: '2511d34e01575fe19d4a9becdce7a44ccc8736e7', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '47595ae0c96465a0524c4b08f7c77997fa5ad012', class: this.bulletClasses }, h("slot", { key: '0e446493744bdc304336f20e5bab89864b430cec', name: "bullet" }))), h("div", { key: '061814832dc71b7bbe239cddb2e474f7ea91558c', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '9f27b6fa63241088951935cff169385ef23b55e4', class: "header" }, h("slot", { key: '9c99e37648c9c4c5a8b981aa16ec8a7b42a1887a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'e8a788366c10d06fef823b9be88c40fba65d4e71', class: "body" }, h("slot", { key: '617965a59d689b0679e920794ebf9a36848f4eab', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '38c6a30f60c6a8bc8c953ed4b74a3687a0ba03a1', class: this.actionClasses }, h("slot", { key: '76efb6ba1377adcb3fc850d8966ecc49b55896b5', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '9a9bf0234ebac99487797bc93afa6e73097f1e68', class: this.footerClasses }, h("slot", { key: '91abd31668cff2657ecf57ce8b9d6f63e8d375ae', name: "footer" })))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -233,7 +233,7 @@ const Q2List = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e4371faae59ae85dee324d6d6783a4b93c23f67f', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '59cc98b62d2581a66a9ed127189fb23364c49bff', class: this.headerClasses }, h("div", { key: '568b6fab57c7552d5a577d19bd31760f6d1aa461', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'd27e785788847cf1a422568383bfe5d986764b2b', name: "filter" }))), h("div", { key: '7a00add6911167d7a27008f10f5d44cfae5d80b2', role: "list" }, h("slot", { key: 'dd5a0290091b0f1cb00a14cde43bab36e87573d2' }))));
+        return (h("div", { key: 'a748db824284ab2660f437fa8687dd274247d61c', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '71e253d36bade6a67869db2562534728d51e4db3', class: this.headerClasses }, h("div", { key: '1cae46b23e094964fccbb404fc96c33d31485b16', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'e2697d250030f34b125df9a5af14f29d733e1c72', name: "filter" }))), h("div", { key: '9b2ab45f809fa53a00cfd2fa967402b09da70ffa', role: "list" }, h("slot", { key: '6ce5ba056277fca5a01cd7a94f832bc68ef16078' }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-legend.entry.js

@@ -102,7 +102,7 @@ const Q2Legend = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: 'b80e97d61b66d2a3950c0e680d8f6fdf0594391a', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '14dc772fa9b1608e415573e90d4c2780c12adef5' }, 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: '14c2b27428cc8a8e95bf8df62aac0c235bd65606', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'b597b625d0abb353d7752a9ca6ccedc9dc4eea6a' }, 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/esm/q2-loc.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { l as loc } from './index-d18e2a20.js';
+import { l as loc } from './index-99c46474.js';
 
 const q2LocCss = "*{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}:host{display:inline}";
 const Q2LocStyle0 = q2LocCss;
@@ -57,7 +57,7 @@ const Q2Loc = class {
     // #endregion
     // #region Render Methods
     render() {
-        return h("span", { key: '8774b0a4bfb39826f6d7be0640c7a0244ab22a09' }, this.displayValue);
+        return h("span", { key: 'c5b41696e6cc9c97491da8d5b8e2743ac1e37ca0' }, this.displayValue);
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-message.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { o as overrideFocus, i as isEventFromElement, n as nextPaint, u as isFirefox, l as loc } from './index-d18e2a20.js';
+import { o as overrideFocus, i as isEventFromElement, n as nextPaint, t as isFirefox, l as loc } from './index-99c46474.js';
 
 const q2MessageCss = "*{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}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
 const Q2MessageStyle0 = q2MessageCss;
@@ -62,7 +62,7 @@ const Q2Message = class {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: '862e4f7aa7ae624a695ce6727f72ed8759584173', 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: '84084e80aac97b4e4e33a2bcf348094cd88279fb', class: "sr" }), h("div", { key: '4a437099dce9df5657a7f5039a55f5b326d2ee58', class: "sr message-label" }, messageLabel), h("div", { key: '8bf021fb84aa6d4973546060acaddae5d059d351', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '1790d7a0df5758d13c8b76577a4703808cddc832' }))));
+        return (h("div", { key: '32df9337d60e4cde91b479f7ac2145b490c6e86f', 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: '8c85280a31471b39972eaf836eba26e46f8fa384', class: "sr" }), h("div", { key: '38197f54a04591a1b059fb84adeaa753e7d75b5a', class: "sr message-label" }, messageLabel), h("div", { key: '9cc59dd782ad77089f1e9bd9e19f03f6e2333752', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '10589fb202d11974e4a9eddd89646f88f1a38230' }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-month-picker.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
-import { l as loc, o as overrideFocus } from './index-d18e2a20.js';
+import { l as loc, o as overrideFocus } from './index-99c46474.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 #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}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, 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-primary-background:var(--tct-btn-secondary-background, 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:var(--comp-month-primary-background);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:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 const Q2MonthPickerStyle0 = q2MonthPickerCss;
@@ -141,10 +141,10 @@ const Q2MonthPicker = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'a25f142e55a4b9fa27dd0be8a50a965ba79bb544', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '14c16da95a5ff20603d87e8f5bec76037d2df0dc', class: "navigation" }, h("q2-btn", { key: 'f42fcd35aa88a0fd9455e2b10fa9f71d9e706727', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: '86262b17f3ec60dd3790c116fd54b60d38db54d6', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '618578dd17aff647bbd071f78429f206ba615808', class: "navigation" }, h("q2-btn", { key: '65a83ffac1aac5188ac8299fe6cee64eb0ddaae1', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '48482c7f65b28b1caa86d06d04f5c0294e4effb4', class: "year" }, this.year), h("q2-icon", { key: 'e0dea457dbbeb54609bc75d4b5215893853874bc', class: "year-icon off", type: "chevron-down" })), h("div", { key: '24b722a65945224c964e54944ad810da3ae077e3', class: "month-controller" }, h("div", { key: 'a101dbfe3b8e3a071e3b835eddc1b39455391ab5', class: "cal-year-prev-next" }, h("q2-btn", { key: '8895ef11b257dc13295939d0b8cd2ab933016cd2', 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: 'af38ef5e10c5754e4a0f57a3131e7c12b6792a89', type: "arrow-left" })), h("q2-btn", { key: '03a9b7c64770e77affe5eb60e165e46f63b6d6b6', 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: '951ecf4a0c546878351fef33efbfaa641c451c8e', type: "arrow-right" }))))), h("div", { key: '48084e3520d2ab0a3dd0f59387e4d4183d958679', 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: '5a18fa4aef615742b863fd96c3066964186b8f92', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: 'a45b4604f888d680db4dc17bd0e0e1d2eed3406d', class: "year" }, this.year), h("q2-icon", { key: 'cd08dc672c8ad200966339d1df0664ffc711c792', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'f42557dd4a8eeeb31bfc256a1508b91dc65d6a05', class: "month-controller" }, h("div", { key: '07ff15c4e7073551655b175a29a4251d02dac597', class: "cal-year-prev-next" }, h("q2-btn", { key: '969e197aba094a6c021f0917ed40da908630587f', 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: 'dbcaa8e8ddc32a3a2b376aa43236930617532dad', type: "arrow-left" })), h("q2-btn", { key: 'ad254449993df25e5da4ddb57ee7aba0d215ea59', 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: '52e12f42f7ace465672863a0e0ba4df917f7412d', type: "arrow-right" }))))), h("div", { key: 'bc1ee824c1ea7123c25f3e8b42adb8618a820d8a', 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: 'fce1f228472c32f7e72c9d4fa4c25db6996dc09d', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-optgroup.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { c as createGuid, l as loc } from './index-d18e2a20.js';
+import { c as createGuid, l as loc } from './index-99c46474.js';
 
 const q2OptgroupCss = "*{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}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 const Q2OptgroupStyle0 = q2OptgroupCss;
@@ -49,7 +49,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '306cf0d06e8664a616974421d45a3083235bc03b', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '738affcd788d0f9e2fdf548f4f14d6d98b8a1c7e', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'cff8fad7e158854df77ad3d9cb85ea578aa0edc5', class: "q2-optgroup-options" }, h("slot", { key: 'd5daf0a105b29ace1c1f0daf5b99ec6bc8fc684c' }))));
+        return (h("div", { key: '979cb6a0423ae7373853b897ae5b48ca6f84b095', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '7e62006e32a809308b63379465cc7549af2edd94', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '49a7dece0f48e25d8dcf9104ebd8706e14624ab7', class: "q2-optgroup-options" }, h("slot", { key: '0d3418b67fbc0c951561526abc81e91503d5b976' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-option-list.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7a5365e2.js';
-import { n as nextPaint, l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, x as isVisible } from './index-d18e2a20.js';
+import { n as nextPaint, l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible } from './index-99c46474.js';
 
 function sanitizeRegexString(regexString) {
     return regexString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

package/dist/esm/q2-option.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7a5365e2.js';
-import { v as getAllText, l as loc } from './index-d18e2a20.js';
+import { u as getAllText, l as loc } from './index-99c46474.js';
 
 const q2OptionCss = "*{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}:host{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
 const Q2OptionStyle0 = q2OptionCss;
@@ -76,7 +76,7 @@ const Q2Option = class {
     render() {
         const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: '70d5ca1da1b82a1406cdeb6f2db5e0f0ade4d727', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: loc(display) }, this.selected && h("q2-icon", { key: '2803339b76a90830b9db0ba482cbaf2a66c1e8a4', type: "checkmark" }), h("div", { key: '77ed1a226afe2f65c3e08d42e4f380e1e3a6e1f4', class: "content" }, h("slot", { key: '569d40708b0736d1ff693104fd7af7fe4842931c' }))));
+        return (h(Host, { key: '62738707723d6ca499dc9327f6a19bbdd87f9809', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: loc(display) }, this.selected && h("q2-icon", { key: '91c07952b37f7fd1161ebc6d957f6933b254e49d', type: "checkmark" }), h("div", { key: 'b137d1d1daa5f8f6e0e4f5bc68d3a3cba15252b8', class: "content" }, h("slot", { key: '3f549ccf534ad06f80d40ab199f14d4ab6edfd62' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-pagination.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
-import { n as nextPaint, o as overrideFocus, i as isEventFromElement, l as loc } from './index-d18e2a20.js';
+import { n as nextPaint, o as overrideFocus, i as isEventFromElement, l as loc } from './index-99c46474.js';
 
 const q2PaginationCss = "*{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}:host{display:flex;width:100%;justify-content:flex-end}:host([alignment=center]){justify-content:center}:host([alignment=left]){justify-content:flex-start}: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}q2-select{--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}";
 const Q2PaginationStyle0 = q2PaginationCss;
@@ -262,7 +262,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (h("nav", { key: '8a2e727916a9f0c54fc640102cde35c60db473a3', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '55ec9b43e1e2a79b941832fdfb3d6bb210406517', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: 'd91e1f0ba5a239c95fd16bda94ef1e614e3c49be', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'aeb52cf10ec37a0ed9459660b9dad1df86e06ca1', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -271,10 +271,10 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'ad29852acbfbfae252360365c02f9923479a7c86', class: "btn-group" }, h("q2-btn", { key: '12b4ab1d5b571b5b1e9245ef2d1c5d44f710e02f', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '296af593f598921c4e56fd7be4b8b8b1135e3536', type: "chevron-double-left" })), h("q2-btn", { key: '40eab0d80b0b2bdc1f8c5bd7d99b04b9dcb735e0', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '6b8e035c7cc586402d994c63ad51491bc7e19772', type: "chevron-left" }))), h("div", { key: '62beac888b094f0b37ee48e7e4ee4781bc050bd5', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '6e225fad678da3ecf42ed7ae8aa76e4ca979b65e', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '84290986cf2c3f9a143024a90e874c5c07ad4e6c', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '967423114bf9a5854114c125d942f5273fde5af4', ref: el => (this.inputField = el), 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 => {
+            })), h("div", { key: '24c8e8166dc90238960ae3afad0ff36eac4af66c', class: "btn-group" }, h("q2-btn", { key: '7be7b963cba6c9dd5b45bced73085ff495fd4130', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '7d58766f3d7307bcfb193d981c95895b58c2bbfb', type: "chevron-double-left" })), h("q2-btn", { key: 'b016eda2499b36b7fd82b84d39357dfa8c9f8719', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'd1bed177625bf672d109fbc8a127961818dd3364', type: "chevron-left" }))), h("div", { key: '62e7fb1e7379d54ace49f4f09f591cae2884479d', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: 'ff7ee6d921a0fe08ab4705714af8a1106eb1e174', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'e59bb32e696dfe162099f3efe19f95e7c76cad7b', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'ecc4215e2beefd4e099f57a421d0a732cb4e14dc', ref: el => (this.inputField = el), 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 => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page" })), h("span", { key: '52467f0a14e0a507bda83ba1b72b3bd4497cadfd', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '8b021224f60e3592a79b563eda8ad98cdb249656', class: "btn-group" }, h("q2-btn", { key: '82e8053bf38f73809a596fc1b210891b655c1196', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'df57f2118875655de3cb982efb599b69e7055262', type: "chevron-right" })), h("q2-btn", { key: '079c89d787894f7ee0df567c4353f8128a262ffe', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '471978bc526011e24176b82b04bee53608b06994', type: "chevron-double-right" }))), h("div", { key: '2a990aa01103daf8d47cdf35a506596a3d1f4453', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page" })), h("span", { key: 'cd543116816cfe374b02fa366d64cade2887b51a', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '98826e8fbbe89ea9c34208ec8066ab47a8a17550', class: "btn-group" }, h("q2-btn", { key: '5066ad089677456d90b660299b0260cc819c3e60', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'e3364523c842d9a345fd34c05cbcba87ae14da80', type: "chevron-right" })), h("q2-btn", { key: 'a920ed7346c5fcadbac7c244dc1cabddd8e22b36', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '49e610ac8459a60eac6ec771fbb3208a4a25ac34', type: "chevron-double-right" }))), h("div", { key: '07bbdd2c0ddef20d8a14152c5977376389246c15', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {