q2-tecton-elements 1.69.0 → 1.69.1

package/dist/bundle-report.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-22T21:40:10",
+  "timestamp": "2026-07-14T17:34:27",
   "compiler": {
     "name": "node",
     "version": "24.10.0"
@@ -928,7 +928,7 @@
           "index-Bx4m6N0g.js",
           "mirror-emit-DUjY_ucm.js"
         ],
-        "originalByteSize": 20286
+        "originalByteSize": 20535
       },
       {
         "key": "q2-pill.entry",
@@ -998,7 +998,7 @@
           "index-Cqkz7Bnm.js",
           "index-Bx4m6N0g.js"
         ],
-        "originalByteSize": 40771
+        "originalByteSize": 41039
       },
       {
         "key": "q2-section.entry",
@@ -1774,7 +1774,7 @@
           "index-Bx4m6N0g.js",
           "mirror-emit-DUjY_ucm.js"
         ],
-        "originalByteSize": 20286
+        "originalByteSize": 20535
       },
       {
         "key": "q2-pill.entry",
@@ -1844,7 +1844,7 @@
           "index-Cqkz7Bnm.js",
           "index-Bx4m6N0g.js"
         ],
-        "originalByteSize": 40771
+        "originalByteSize": 41039
       },
       {
         "key": "q2-section.entry",
@@ -2622,7 +2622,7 @@
           "index-D2LFCsNP.js",
           "mirror-emit-kjeNv83f.js"
         ],
-        "originalByteSize": 20489
+        "originalByteSize": 20738
       },
       {
         "key": "q2-pill.entry",
@@ -2692,7 +2692,7 @@
           "index-DUaTw_1N.js",
           "index-D2LFCsNP.js"
         ],
-        "originalByteSize": 41057
+        "originalByteSize": 41308
       },
       {
         "key": "q2-section.entry",

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

@@ -20,10 +20,14 @@ const Q2Pagination = class {
             const isOverflowing = this.containerWidth > hostElement.clientWidth;
             this.isSmall = isOverflowing;
             index$1.nextPaint(() => {
-                const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;
+                const currentContainerWidth = containerElement.clientWidth;
+                const measuredContainerWidth = this.isSmall
+                    ? Math.max(this.containerWidth || 0, currentContainerWidth)
+                    : currentContainerWidth;
+                const containerWidthHasNotChanged = this.containerWidth === measuredContainerWidth;
                 if (containerWidthHasNotChanged)
                     return;
-                this.containerWidth = containerElement.clientWidth;
+                this.containerWidth = measuredContainerWidth;
                 this.checkSize();
             });
         };
@@ -311,7 +315,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (index.h("nav", { key: '44e768f8882dcbc08f628b9942ba66c1f7842b84', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: '60463fcf15e3fbd2c32d4e6bac7c94ababaa8cc3', class: "description", "test-id": "description" }, pagesOnly
+        return (index.h("nav", { key: 'c42b191eccb70b9e3c684843cebf9f6b06f3c3b3', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: 'eb03cdc19938adac4a5c44887fa7d9853c9b89ab', class: "description", "test-id": "description" }, pagesOnly
             ? index$1.loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -320,10 +324,10 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), index.h("div", { key: 'f2b3e30c873402d5b3c6d1be75bc454905ee3907', class: "controls" }, index.h("div", { key: '27ceacad7bee51d922105769ef169ec20efeac27', class: "btn-group" }, index.h("q2-btn", { key: '087de40b9839abd37cb16ea96cee04f275bd3498', ref: el => (this.firstPageBtn = el), label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: '9b98c016c8e2f9710d553ad4299da98d7579aa49', type: "chevron-double-left" })), index.h("q2-btn", { key: '96f7cd1dc6812e99b80b6c389b80cf7e81aeea1a', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'c4281b260bbd4e18a67cc5d25cd2b95c901227cd', type: "chevron-left" }))), index.h("div", { key: 'c0577aea33951988049f07227dc3b82af0b16436', class: "input-display", hidden: isFullViewHidden }, index.h("span", { key: 'deeed14565939a19d1175039cb2904fbc607ad36', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: 'c0982185738f45065c3de709ea953a819b71b133', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: '8a10147b9b43fc54caf7395c4b00fa187d8ff009', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
+            })), index.h("div", { key: '0e9a0bcfa6545b08843423378066989cf96ad18e', class: "controls" }, index.h("div", { key: '4ea3b0a64165885dfd1bd525527e2617e4f4d748', class: "btn-group" }, index.h("q2-btn", { key: '72d72c7b974ecbca50c4259cca5028515786af5b', ref: el => (this.firstPageBtn = el), label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: '26f5f8e8cf23a6d924b4a01796827fb62017809d', type: "chevron-double-left" })), index.h("q2-btn", { key: '5f7845c5917137131cc6703bb59d90c842e32a7e', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'e02ccf51de21789099e2b254019f962dbb5011dc', type: "chevron-left" }))), index.h("div", { key: 'ca201f7a4382e7f3835093c4c3877f7e2a0b5150', class: "input-display", hidden: isFullViewHidden }, index.h("span", { key: 'c690830341a15c25e4ad5a2d2a524d876c9f7cdb', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: '7d08062d6cd495d4025a82413b347ed87915cbce', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: 'e30795721d66d75dd5f349ad4d6d3ffda6023820', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), index.h("span", { key: '0014d1f909792d2c7d61f2c5f6e93ff39f185e1e', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: '69dc4fb772315cf108faa073ffe3ddec25082f64', class: "btn-group" }, index.h("q2-btn", { key: '320d2e7ff7d94c29f48a06d137a2e5cb79edce36', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: '05965f4cc4d750df433b2c9a43c04ae2d789e0eb', type: "chevron-right" })), index.h("q2-btn", { key: 'fb41b8ac94c96082a8d58a8652952d656d3ebb8e', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'd2aed2aee8153ea88b708d8e1b3fdb52fe98f658', type: "chevron-double-right" })))), index.h("div", { key: '0d355f0c69796ee99ae517ee01d9cd40b91bce9e', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), index.h("span", { key: 'e2f1e51306298ddf428fd4e9fa665b58b2535fc8', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: 'c7a095aaa30743441c0c4d22f55e94801b3a823f', class: "btn-group" }, index.h("q2-btn", { key: 'c52d8837ec35b128a9d3f9c87766ed770edc9600', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'd1d802bddb426070fa1ca92a7937b8405949f01c', type: "chevron-right" })), index.h("q2-btn", { key: '357f5bf5426e6c0004b737238a3c66697fc6a672', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: '1be92d6fa9252168baf63420271c8b8a77f41d92', type: "chevron-double-right" })))), index.h("div", { key: '96ca4bc582b1dcb830bad146fbf1233f2549f256', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-search.cjs.entry.js

@@ -249,13 +249,17 @@ const Q2Search = class {
     // #endregion
     // #region Listeners
     onFocus(event) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
+        // Delegate programmatic focus from the host to the inner input
+        if (event && index$1.isEventFromElement(event, this.hostElement)) {
+            (_a = this.innerInputField) === null || _a === void 0 ? void 0 : _a.focus();
+        }
         // Ignore focus that originates inside the popover (e.g., tabbing into a slotted
         // popover-bottom action button). Without this gate, the focus event bubbles up and
         // re-opens a just-closed popover as the user is trying to leave it.
         const path = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : [];
-        const target = ((_a = path[0]) !== null && _a !== void 0 ? _a : event === null || event === void 0 ? void 0 : event.target);
-        if (target && ((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.contains(target)))
+        const target = ((_b = path[0]) !== null && _b !== void 0 ? _b : event === null || event === void 0 ? void 0 : event.target);
+        if (target && ((_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.contains(target)))
             return;
         this.inputFocused = true;
         if (this.isShowingSelectionDisplay) {
@@ -269,7 +273,7 @@ const Q2Search = class {
             else if (this.value) {
                 // Single-select: pre-select the displayed text so the next keystroke replaces it
                 // — typeahead pattern used by Material Autocomplete, Headless UI Combobox, etc.
-                (_c = this.innerInputField) === null || _c === void 0 ? void 0 : _c.select();
+                (_d = this.innerInputField) === null || _d === void 0 ? void 0 : _d.select();
             }
         }
         if (!this.open)
@@ -670,7 +674,7 @@ const Q2Search = class {
         return (index.h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: (_a = this.innerInputContainer) !== null && _a !== void 0 ? _a : undefined, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, align: useBlock ? undefined : this.popoverAlignment, block: useBlock }, index.h("div", { class: "popover-content", "data-loading": this.loading ? 'true' : 'false', "aria-busy": this.loading ? 'true' : null }, index.h("div", { class: "popover-top-container", hidden: !this.hasPopoverTop && !(this.multiple && this.showSelectedToggle), tabindex: "-1" }, index.h("slot", { name: "popover-top" }), !this.loading && this.renderMultiSelectHeader()), index.h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: this.optionListId, label: index$1.loc(this.listLabel), multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, showSelected: this.showSelected, customSearch: true, hidden: this.loading, onChange: (e) => e.stopPropagation(), onTctChange: this.onOptionListChange }, index.h("slot", null)), showEmpty && this.renderEmpty(), index.h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, index.h("slot", { name: "popover-bottom" })), this.loading && (index.h("div", { class: "loading-overlay", "aria-hidden": "true" }, index.h("q2-loading", { type: "spinner" }))))));
     }
     render() {
-        return (index.h(index.Fragment, { key: '25d659528e22b848146b76d76f5bdb94da246d02' }, index.h("div", { key: '6a46b01c7d9598bbf887a1c579dd500588303ad6', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("click-elsewhere", { key: '22a8cbf8de37dfe302ca63904cc8fc22841018a6', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, index.h("q2-input", { key: 'e96361aec59e427a3a5b59d95b7c4aefd3b9d169', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && index$1.loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? index$1.loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => index$1.loc(e))) ||
+        return (index.h(index.Fragment, { key: '918ec8192e1dca668611c06f30f002413d87abca' }, index.h("div", { key: 'a6b81bd23e5d7224986175fc02b21e2fd1433f04', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("click-elsewhere", { key: '7f83f9b669917b5430aedca1595aee0837edd4da', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, index.h("q2-input", { key: '7d8de986679460091123baa023a791dcdaecc58a', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && index$1.loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? index$1.loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => index$1.loc(e))) ||
                 (this.invalid && ['tecton.element.search.invalid']) ||
                 [], ariaExpanded: this.isInputOnlyMode ? undefined : `${this.open}`, ariaControls: this.isInputOnlyMode ? undefined : this.optionListId, ariaHaspopup: this.isInputOnlyMode ? undefined : 'listbox', hideMessages: true, _role: this.isInputOnlyMode ? undefined : 'combobox', onTctInput: this.inputInputHandler, onInput: (e) => e.stopImmediatePropagation(), onChange: (e) => e.stopPropagation(), onTctChange: (e) => e.stopPropagation(), badgeValue: this.badgeValue }), this.renderOptionsDropdown())));
     }

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

@@ -17,10 +17,14 @@ export class Q2Pagination {
             const isOverflowing = this.containerWidth > hostElement.clientWidth;
             this.isSmall = isOverflowing;
             nextPaint(() => {
-                const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;
+                const currentContainerWidth = containerElement.clientWidth;
+                const measuredContainerWidth = this.isSmall
+                    ? Math.max(this.containerWidth || 0, currentContainerWidth)
+                    : currentContainerWidth;
+                const containerWidthHasNotChanged = this.containerWidth === measuredContainerWidth;
                 if (containerWidthHasNotChanged)
                     return;
-                this.containerWidth = containerElement.clientWidth;
+                this.containerWidth = measuredContainerWidth;
                 this.checkSize();
             });
         };
@@ -308,7 +312,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: '44e768f8882dcbc08f628b9942ba66c1f7842b84', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '60463fcf15e3fbd2c32d4e6bac7c94ababaa8cc3', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: 'c42b191eccb70b9e3c684843cebf9f6b06f3c3b3', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'eb03cdc19938adac4a5c44887fa7d9853c9b89ab', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -317,10 +321,10 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'f2b3e30c873402d5b3c6d1be75bc454905ee3907', class: "controls" }, h("div", { key: '27ceacad7bee51d922105769ef169ec20efeac27', class: "btn-group" }, h("q2-btn", { key: '087de40b9839abd37cb16ea96cee04f275bd3498', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '9b98c016c8e2f9710d553ad4299da98d7579aa49', type: "chevron-double-left" })), h("q2-btn", { key: '96f7cd1dc6812e99b80b6c389b80cf7e81aeea1a', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'c4281b260bbd4e18a67cc5d25cd2b95c901227cd', type: "chevron-left" }))), h("div", { key: 'c0577aea33951988049f07227dc3b82af0b16436', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'deeed14565939a19d1175039cb2904fbc607ad36', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'c0982185738f45065c3de709ea953a819b71b133', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '8a10147b9b43fc54caf7395c4b00fa187d8ff009', 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.stopImmediatePropagation(), onTctChange: event => {
+            })), h("div", { key: '0e9a0bcfa6545b08843423378066989cf96ad18e', class: "controls" }, h("div", { key: '4ea3b0a64165885dfd1bd525527e2617e4f4d748', class: "btn-group" }, h("q2-btn", { key: '72d72c7b974ecbca50c4259cca5028515786af5b', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '26f5f8e8cf23a6d924b4a01796827fb62017809d', type: "chevron-double-left" })), h("q2-btn", { key: '5f7845c5917137131cc6703bb59d90c842e32a7e', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'e02ccf51de21789099e2b254019f962dbb5011dc', type: "chevron-left" }))), h("div", { key: 'ca201f7a4382e7f3835093c4c3877f7e2a0b5150', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'c690830341a15c25e4ad5a2d2a524d876c9f7cdb', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '7d08062d6cd495d4025a82413b347ed87915cbce', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'e30795721d66d75dd5f349ad4d6d3ffda6023820', 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.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '0014d1f909792d2c7d61f2c5f6e93ff39f185e1e', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '69dc4fb772315cf108faa073ffe3ddec25082f64', class: "btn-group" }, h("q2-btn", { key: '320d2e7ff7d94c29f48a06d137a2e5cb79edce36', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '05965f4cc4d750df433b2c9a43c04ae2d789e0eb', type: "chevron-right" })), h("q2-btn", { key: 'fb41b8ac94c96082a8d58a8652952d656d3ebb8e', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'd2aed2aee8153ea88b708d8e1b3fdb52fe98f658', type: "chevron-double-right" })))), h("div", { key: '0d355f0c69796ee99ae517ee01d9cd40b91bce9e', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: 'e2f1e51306298ddf428fd4e9fa665b58b2535fc8', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'c7a095aaa30743441c0c4d22f55e94801b3a823f', class: "btn-group" }, h("q2-btn", { key: 'c52d8837ec35b128a9d3f9c87766ed770edc9600', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'd1d802bddb426070fa1ca92a7937b8405949f01c', type: "chevron-right" })), h("q2-btn", { key: '357f5bf5426e6c0004b737238a3c66697fc6a672', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '1be92d6fa9252168baf63420271c8b8a77f41d92', type: "chevron-double-right" })))), h("div", { key: '96ca4bc582b1dcb830bad146fbf1233f2549f256', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     static get is() { return "q2-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-search/q2-search.js

@@ -1,5 +1,5 @@
 import { Fragment, h, } from "@stencil/core";
-import { loc, overrideFocus, waitForNextPaint } from "../../utils";
+import { isEventFromElement, loc, overrideFocus, waitForNextPaint } from "../../utils";
 /**
  * @name Search
  * @category Forms
@@ -248,13 +248,17 @@ export class Q2Search {
     // #endregion
     // #region Listeners
     onFocus(event) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
+        // Delegate programmatic focus from the host to the inner input
+        if (event && isEventFromElement(event, this.hostElement)) {
+            (_a = this.innerInputField) === null || _a === void 0 ? void 0 : _a.focus();
+        }
         // Ignore focus that originates inside the popover (e.g., tabbing into a slotted
         // popover-bottom action button). Without this gate, the focus event bubbles up and
         // re-opens a just-closed popover as the user is trying to leave it.
         const path = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : [];
-        const target = ((_a = path[0]) !== null && _a !== void 0 ? _a : event === null || event === void 0 ? void 0 : event.target);
-        if (target && ((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.contains(target)))
+        const target = ((_b = path[0]) !== null && _b !== void 0 ? _b : event === null || event === void 0 ? void 0 : event.target);
+        if (target && ((_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.contains(target)))
             return;
         this.inputFocused = true;
         if (this.isShowingSelectionDisplay) {
@@ -268,7 +272,7 @@ export class Q2Search {
             else if (this.value) {
                 // Single-select: pre-select the displayed text so the next keystroke replaces it
                 // — typeahead pattern used by Material Autocomplete, Headless UI Combobox, etc.
-                (_c = this.innerInputField) === null || _c === void 0 ? void 0 : _c.select();
+                (_d = this.innerInputField) === null || _d === void 0 ? void 0 : _d.select();
             }
         }
         if (!this.open)
@@ -669,7 +673,7 @@ export class Q2Search {
         return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: (_a = this.innerInputContainer) !== null && _a !== void 0 ? _a : undefined, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, align: useBlock ? undefined : this.popoverAlignment, block: useBlock }, h("div", { class: "popover-content", "data-loading": this.loading ? 'true' : 'false', "aria-busy": this.loading ? 'true' : null }, h("div", { class: "popover-top-container", hidden: !this.hasPopoverTop && !(this.multiple && this.showSelectedToggle), tabindex: "-1" }, h("slot", { name: "popover-top" }), !this.loading && this.renderMultiSelectHeader()), h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: this.optionListId, label: loc(this.listLabel), multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, showSelected: this.showSelected, customSearch: true, hidden: this.loading, onChange: (e) => e.stopPropagation(), onTctChange: this.onOptionListChange }, h("slot", null)), showEmpty && this.renderEmpty(), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" })), this.loading && (h("div", { class: "loading-overlay", "aria-hidden": "true" }, h("q2-loading", { type: "spinner" }))))));
     }
     render() {
-        return (h(Fragment, { key: '25d659528e22b848146b76d76f5bdb94da246d02' }, h("div", { key: '6a46b01c7d9598bbf887a1c579dd500588303ad6', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '22a8cbf8de37dfe302ca63904cc8fc22841018a6', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: 'e96361aec59e427a3a5b59d95b7c4aefd3b9d169', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
+        return (h(Fragment, { key: '918ec8192e1dca668611c06f30f002413d87abca' }, h("div", { key: 'a6b81bd23e5d7224986175fc02b21e2fd1433f04', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '7f83f9b669917b5430aedca1595aee0837edd4da', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '7d8de986679460091123baa023a791dcdaecc58a', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
                 (this.invalid && ['tecton.element.search.invalid']) ||
                 [], ariaExpanded: this.isInputOnlyMode ? undefined : `${this.open}`, ariaControls: this.isInputOnlyMode ? undefined : this.optionListId, ariaHaspopup: this.isInputOnlyMode ? undefined : 'listbox', hideMessages: true, _role: this.isInputOnlyMode ? undefined : 'combobox', onTctInput: this.inputInputHandler, onInput: (e) => e.stopImmediatePropagation(), onChange: (e) => e.stopPropagation(), onTctChange: (e) => e.stopPropagation(), badgeValue: this.badgeValue }), this.renderOptionsDropdown())));
     }

package/dist/components/q2-pagination.js

@@ -6,9 +6,9 @@ import { m as p } from "./mirror-emit.js";
 
 import { d as h } from "./click-elsewhere2.js";
 
-import { d } from "./q2-badge2.js";
+import { d as g } from "./q2-badge2.js";
 
-import { d as g } from "./q2-btn2.js";
+import { d } from "./q2-btn2.js";
 
 import { d as u } from "./q2-icon2.js";
 
@@ -34,7 +34,8 @@ const x =  t(class extends e {
     this.disabled = !1, this.checkSize = () => {
       const {hostElement: t, containerElement: e} = this, i = this.containerWidth > t.clientWidth;
       this.isSmall = i, s((() => {
-        this.containerWidth === e.clientWidth || (this.containerWidth = e.clientWidth, this.checkSize());
+        const t = e.clientWidth, i = this.isSmall ? Math.max(this.containerWidth || 0, t) : t;
+        this.containerWidth === i || (this.containerWidth = i, this.checkSize());
       }));
     }, this.handlePageChange = t => {
       if (this.disabled) return;
@@ -226,7 +227,7 @@ const x =  t(class extends e {
   }
   render() {
     var t;
-    const {pagesOnly: e, recordsOnly: i, isFullViewHidden: n, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: c, currentRange: p, nextRange: h, prevRange: d, showPerPageSelect: g, disabled: u} = this, f = c < 2, b = c === o;
+    const {pagesOnly: e, recordsOnly: i, isFullViewHidden: n, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: c, currentRange: p, nextRange: h, prevRange: g, showPerPageSelect: d, disabled: u} = this, f = c < 2, b = c === o;
     let m = l("tecton.element.pagination.goToNext"), v = l("tecton.element.pagination.goToPrevious");
     return e ? (v = l("tecton.element.pagination.goToPages", {
       next: c - 1,
@@ -235,7 +236,7 @@ const x =  t(class extends e {
       next: c + 1,
       total: o
     })) : i && (v = l("tecton.element.pagination.goToRecords", {
-      range: d,
+      range: g,
       recordType: s.toLowerCase(),
       total: r
     }), m = l("tecton.element.pagination.goToRecords", {
@@ -243,12 +244,12 @@ const x =  t(class extends e {
       recordType: s.toLowerCase(),
       total: r
     })), a("nav", {
-      key: "44e768f8882dcbc08f628b9942ba66c1f7842b84",
+      key: "c42b191eccb70b9e3c684843cebf9f6b06f3c3b3",
       class: this.containerClasses.join(" "),
       ref: t => this.containerElement = t,
       "aria-label": l("tecton.element.pagination.title")
     }, a("div", {
-      key: "60463fcf15e3fbd2c32d4e6bac7c94ababaa8cc3",
+      key: "eb03cdc19938adac4a5c44887fa7d9853c9b89ab",
       class: "description",
       "test-id": "description"
     }, e ? l("tecton.element.pagination.pages", {
@@ -259,13 +260,13 @@ const x =  t(class extends e {
       recordType: s.toLowerCase(),
       total: r.toLocaleString()
     })), a("div", {
-      key: "f2b3e30c873402d5b3c6d1be75bc454905ee3907",
+      key: "0e9a0bcfa6545b08843423378066989cf96ad18e",
       class: "controls"
     }, a("div", {
-      key: "27ceacad7bee51d922105769ef169ec20efeac27",
+      key: "4ea3b0a64165885dfd1bd525527e2617e4f4d748",
       class: "btn-group"
     }, a("q2-btn", {
-      key: "087de40b9839abd37cb16ea96cee04f275bd3498",
+      key: "72d72c7b974ecbca50c4259cca5028515786af5b",
       ref: t => this.firstPageBtn = t,
       label: l("tecton.element.pagination.goToFirstPage"),
       disabled: u || f,
@@ -274,10 +275,10 @@ const x =  t(class extends e {
       "test-id": "firstPageBtn",
       "hide-label": !0
     }, a("q2-icon", {
-      key: "9b98c016c8e2f9710d553ad4299da98d7579aa49",
+      key: "26f5f8e8cf23a6d924b4a01796827fb62017809d",
       type: "chevron-double-left"
     })), a("q2-btn", {
-      key: "96f7cd1dc6812e99b80b6c389b80cf7e81aeea1a",
+      key: "5f7845c5917137131cc6703bb59d90c842e32a7e",
       ref: t => this.prevPageBtn = t,
       label: v,
       disabled: u || f,
@@ -285,21 +286,21 @@ const x =  t(class extends e {
       "test-id": "prevPageBtn",
       "hide-label": !0
     }, a("q2-icon", {
-      key: "c4281b260bbd4e18a67cc5d25cd2b95c901227cd",
+      key: "e02ccf51de21789099e2b254019f962dbb5011dc",
       type: "chevron-left"
     }))), a("div", {
-      key: "c0577aea33951988049f07227dc3b82af0b16436",
+      key: "ca201f7a4382e7f3835093c4c3877f7e2a0b5150",
       class: "input-display",
       hidden: n
     }, a("span", {
-      key: "deeed14565939a19d1175039cb2904fbc607ad36",
+      key: "c690830341a15c25e4ad5a2d2a524d876c9f7cdb",
       "aria-hidden": "true"
     }, l("tecton.element.pagination.page")), a("div", {
-      key: "c0982185738f45065c3de709ea953a819b71b133",
+      key: "7d08062d6cd495d4025a82413b347ed87915cbce",
       class: "input-wrapper",
       onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
     }, a("q2-input", {
-      key: "8a10147b9b43fc54caf7395c4b00fa187d8ff009",
+      key: "e30795721d66d75dd5f349ad4d6d3ffda6023820",
       ref: t => this.inputField = t,
       type: "number",
       value: "" + c,
@@ -316,13 +317,13 @@ const x =  t(class extends e {
       current: "page",
       disabled: u
     })), a("span", {
-      key: "0014d1f909792d2c7d61f2c5f6e93ff39f185e1e",
+      key: "e2f1e51306298ddf428fd4e9fa665b58b2535fc8",
       "aria-hidden": "true"
     }, l("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), a("div", {
-      key: "69dc4fb772315cf108faa073ffe3ddec25082f64",
+      key: "c7a095aaa30743441c0c4d22f55e94801b3a823f",
       class: "btn-group"
     }, a("q2-btn", {
-      key: "320d2e7ff7d94c29f48a06d137a2e5cb79edce36",
+      key: "c52d8837ec35b128a9d3f9c87766ed770edc9600",
       ref: t => this.nextPageBtn = t,
       label: m,
       disabled: u || b,
@@ -330,10 +331,10 @@ const x =  t(class extends e {
       "test-id": "nextPageBtn",
       "hide-label": !0
     }, a("q2-icon", {
-      key: "05965f4cc4d750df433b2c9a43c04ae2d789e0eb",
+      key: "d1d802bddb426070fa1ca92a7937b8405949f01c",
       type: "chevron-right"
     })), a("q2-btn", {
-      key: "fb41b8ac94c96082a8d58a8652952d656d3ebb8e",
+      key: "357f5bf5426e6c0004b737238a3c66697fc6a672",
       ref: t => this.lastPageBtn = t,
       label: "tecton.element.pagination.goToLastPage",
       disabled: u || b,
@@ -342,13 +343,13 @@ const x =  t(class extends e {
       "test-id": "lastPageBtn",
       "hide-label": !0
     }, a("q2-icon", {
-      key: "d2aed2aee8153ea88b708d8e1b3fdb52fe98f658",
+      key: "1be92d6fa9252168baf63420271c8b8a77f41d92",
       type: "chevron-double-right"
     })))), a("div", {
-      key: "0d355f0c69796ee99ae517ee01d9cd40b91bce9e",
+      key: "96ca4bc582b1dcb830bad146fbf1233f2549f256",
       class: "per-page",
       hidden: n || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
-    }, g && this.renderPerPage()));
+    }, d && this.renderPerPage()));
   }
   get hostElement() {
     return this;
@@ -427,11 +428,11 @@ const q = x, defineCustomElement = function() {
       break;
 
      case "q2-badge":
-      customElements.get(n(t)) || d();
+      customElements.get(n(t)) || g();
       break;
 
      case "q2-btn":
-      customElements.get(n(t)) || g();
+      customElements.get(n(t)) || d();
       break;
 
      case "q2-icon":

package/dist/components/q2-search.js

@@ -1,24 +1,24 @@
 import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, Fragment as o, transformTag as n } from "@stencil/core/internal/client";
 
-import { l as r, o as l, w as a } from "./index2.js";
+import { l as r, o as l, i as a, w as h } from "./index2.js";
 
-import { d as h } from "./click-elsewhere2.js";
+import { d as c } from "./click-elsewhere2.js";
 
-import { d as c } from "./q2-badge2.js";
+import { d } from "./q2-badge2.js";
 
-import { d } from "./q2-btn2.js";
+import { d as p } from "./q2-btn2.js";
 
-import { d as p } from "./q2-icon2.js";
+import { d as u } from "./q2-icon2.js";
 
-import { d as u } from "./q2-input2.js";
+import { d as v } from "./q2-input2.js";
 
-import { d as v } from "./q2-loading2.js";
+import { d as m } from "./q2-loading2.js";
 
-import { d as m } from "./q2-option-list2.js";
+import { d as b } from "./q2-option-list2.js";
 
-import { d as b } from "./q2-popover2.js";
+import { d as g } from "./q2-popover2.js";
 
-const g =  t(class extends e {
+const f =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctChange = i(this, "tctChange", 7), 
     this.tctClose = i(this, "tctClose", 7), this.tctInput = i(this, "tctInput", 7), 
@@ -192,12 +192,14 @@ const g =  t(class extends e {
   // #endregion
   // #region Listeners
   onFocus(t) {
-    var e, i, s;
+    var e, i, s, o;
+    // Delegate programmatic focus from the host to the inner input
+        t && a(t, this.hostElement) && (null === (e = this.innerInputField) || void 0 === e || e.focus());
     // Ignore focus that originates inside the popover (e.g., tabbing into a slotted
     // popover-bottom action button). Without this gate, the focus event bubbles up and
     // re-opens a just-closed popover as the user is trying to leave it.
-        const o = null !== (e = ("function" == typeof (null == t ? void 0 : t.composedPath) ? t.composedPath() : [])[0]) && void 0 !== e ? e : null == t ? void 0 : t.target;
-    o && (null === (i = this.popoverElement) || void 0 === i ? void 0 : i.contains(o)) || (this.inputFocused = !0, 
+        const n = null !== (i = ("function" == typeof (null == t ? void 0 : t.composedPath) ? t.composedPath() : [])[0]) && void 0 !== i ? i : null == t ? void 0 : t.target;
+    n && (null === (s = this.popoverElement) || void 0 === s ? void 0 : s.contains(n)) || (this.inputFocused = !0, 
     this.isShowingSelectionDisplay && (
     // Clear the flag before mutating searchText so the filter watcher runs against the
     // new query, not the stale "showing a selection" guard.
@@ -206,7 +208,7 @@ const g =  t(class extends e {
     this.searchText = "" : this.value && (
     // Single-select: pre-select the displayed text so the next keystroke replaces it
     // — typeahead pattern used by Material Autocomplete, Headless UI Combobox, etc.
-    null === (s = this.innerInputField) || void 0 === s || s.select())), this.open || this.openDropdown());
+    null === (o = this.innerInputField) || void 0 === o || o.select())), this.open || this.openDropdown());
   }
   onFocusOut(t) {
     var e;
@@ -242,13 +244,13 @@ const g =  t(class extends e {
      * @testOnly
      */
   async closePopover() {
-    this.closeDropdown(), await a();
+    this.closeDropdown(), await h();
   }
   /**
      * Opens the popover.
      * @testOnly
      */  async openPopover() {
-    this.openDropdown(), await a();
+    this.openDropdown(), await h();
   }
   /**
      * Resets the search to its initial state: clears the input, the
@@ -283,7 +285,7 @@ const g =  t(class extends e {
     this.open || await this.openPopover(), i.forEach((t => {
       var e;
       null === (e = this.optionElements.find((e => e.value === t))) || void 0 === e || e.click();
-    })), e.closePopover && (await this.closePopover(), await a());
+    })), e.closePopover && (await this.closePopover(), await h());
   }
   // #endregion
   // #region Watchers
@@ -556,20 +558,20 @@ const g =  t(class extends e {
   }
   render() {
     return s(o, {
-      key: "25d659528e22b848146b76d76f5bdb94da246d02"
+      key: "918ec8192e1dca668611c06f30f002413d87abca"
     }, s("div", {
-      key: "6a46b01c7d9598bbf887a1c579dd500588303ad6",
+      key: "a6b81bd23e5d7224986175fc02b21e2fd1433f04",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), s("click-elsewhere", {
-      key: "22a8cbf8de37dfe302ca63904cc8fc22841018a6",
+      key: "7f83f9b669917b5430aedca1595aee0837edd4da",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.onClickElsewhere
     }, s("q2-input", {
-      key: "e96361aec59e427a3a5b59d95b7c4aefd3b9d169",
+      key: "7d8de986679460091123baa023a791dcdaecc58a",
       ref: t => this.inputField = t,
       class: "q2-search-input",
       label: this.label && r(this.label) || "",
@@ -682,46 +684,46 @@ const g =  t(class extends e {
   } ]
 } ]);
 
-const f = g, defineCustomElement = function() {
+const w = f, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-search", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading", "q2-option-list", "q2-popover" ].forEach((t => {
     switch (t) {
      case "q2-search":
-      customElements.get(n(t)) || customElements.define(n(t), g);
+      customElements.get(n(t)) || customElements.define(n(t), f);
       break;
 
      case "click-elsewhere":
-      customElements.get(n(t)) || h();
+      customElements.get(n(t)) || c();
       break;
 
      case "q2-badge":
-      customElements.get(n(t)) || c();
+      customElements.get(n(t)) || d();
       break;
 
      case "q2-btn":
-      customElements.get(n(t)) || d();
+      customElements.get(n(t)) || p();
       break;
 
      case "q2-icon":
-      customElements.get(n(t)) || p();
+      customElements.get(n(t)) || u();
       break;
 
      case "q2-input":
-      customElements.get(n(t)) || u();
+      customElements.get(n(t)) || v();
       break;
 
      case "q2-loading":
-      customElements.get(n(t)) || v();
+      customElements.get(n(t)) || m();
       break;
 
      case "q2-option-list":
-      customElements.get(n(t)) || m();
+      customElements.get(n(t)) || b();
       break;
 
      case "q2-popover":
-      customElements.get(n(t)) || b();
+      customElements.get(n(t)) || g();
     }
   }));
 };
 
-export { f as Q2Search, defineCustomElement }
+export { w as Q2Search, defineCustomElement }

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

@@ -18,10 +18,14 @@ const Q2Pagination = class {
             const isOverflowing = this.containerWidth > hostElement.clientWidth;
             this.isSmall = isOverflowing;
             nextPaint(() => {
-                const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;
+                const currentContainerWidth = containerElement.clientWidth;
+                const measuredContainerWidth = this.isSmall
+                    ? Math.max(this.containerWidth || 0, currentContainerWidth)
+                    : currentContainerWidth;
+                const containerWidthHasNotChanged = this.containerWidth === measuredContainerWidth;
                 if (containerWidthHasNotChanged)
                     return;
-                this.containerWidth = containerElement.clientWidth;
+                this.containerWidth = measuredContainerWidth;
                 this.checkSize();
             });
         };
@@ -309,7 +313,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (h("nav", { key: '44e768f8882dcbc08f628b9942ba66c1f7842b84', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '60463fcf15e3fbd2c32d4e6bac7c94ababaa8cc3', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: 'c42b191eccb70b9e3c684843cebf9f6b06f3c3b3', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'eb03cdc19938adac4a5c44887fa7d9853c9b89ab', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -318,10 +322,10 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'f2b3e30c873402d5b3c6d1be75bc454905ee3907', class: "controls" }, h("div", { key: '27ceacad7bee51d922105769ef169ec20efeac27', class: "btn-group" }, h("q2-btn", { key: '087de40b9839abd37cb16ea96cee04f275bd3498', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '9b98c016c8e2f9710d553ad4299da98d7579aa49', type: "chevron-double-left" })), h("q2-btn", { key: '96f7cd1dc6812e99b80b6c389b80cf7e81aeea1a', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'c4281b260bbd4e18a67cc5d25cd2b95c901227cd', type: "chevron-left" }))), h("div", { key: 'c0577aea33951988049f07227dc3b82af0b16436', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'deeed14565939a19d1175039cb2904fbc607ad36', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'c0982185738f45065c3de709ea953a819b71b133', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '8a10147b9b43fc54caf7395c4b00fa187d8ff009', 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.stopImmediatePropagation(), onTctChange: event => {
+            })), h("div", { key: '0e9a0bcfa6545b08843423378066989cf96ad18e', class: "controls" }, h("div", { key: '4ea3b0a64165885dfd1bd525527e2617e4f4d748', class: "btn-group" }, h("q2-btn", { key: '72d72c7b974ecbca50c4259cca5028515786af5b', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '26f5f8e8cf23a6d924b4a01796827fb62017809d', type: "chevron-double-left" })), h("q2-btn", { key: '5f7845c5917137131cc6703bb59d90c842e32a7e', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'e02ccf51de21789099e2b254019f962dbb5011dc', type: "chevron-left" }))), h("div", { key: 'ca201f7a4382e7f3835093c4c3877f7e2a0b5150', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'c690830341a15c25e4ad5a2d2a524d876c9f7cdb', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '7d08062d6cd495d4025a82413b347ed87915cbce', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'e30795721d66d75dd5f349ad4d6d3ffda6023820', 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.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '0014d1f909792d2c7d61f2c5f6e93ff39f185e1e', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '69dc4fb772315cf108faa073ffe3ddec25082f64', class: "btn-group" }, h("q2-btn", { key: '320d2e7ff7d94c29f48a06d137a2e5cb79edce36', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '05965f4cc4d750df433b2c9a43c04ae2d789e0eb', type: "chevron-right" })), h("q2-btn", { key: 'fb41b8ac94c96082a8d58a8652952d656d3ebb8e', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'd2aed2aee8153ea88b708d8e1b3fdb52fe98f658', type: "chevron-double-right" })))), h("div", { key: '0d355f0c69796ee99ae517ee01d9cd40b91bce9e', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: 'e2f1e51306298ddf428fd4e9fa665b58b2535fc8', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'c7a095aaa30743441c0c4d22f55e94801b3a823f', class: "btn-group" }, h("q2-btn", { key: 'c52d8837ec35b128a9d3f9c87766ed770edc9600', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'd1d802bddb426070fa1ca92a7937b8405949f01c', type: "chevron-right" })), h("q2-btn", { key: '357f5bf5426e6c0004b737238a3c66697fc6a672', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '1be92d6fa9252168baf63420271c8b8a77f41d92', type: "chevron-double-right" })))), h("div", { key: '96ca4bc582b1dcb830bad146fbf1233f2549f256', 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 {

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-Cqkz7Bnm.js';
-import { l as loc, o as overrideFocus, w as waitForNextPaint } from './index-Bx4m6N0g.js';
+import { l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint } from './index-Bx4m6N0g.js';
 
 const q2SearchCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin:var(--tct-search-margin, var(--tct-search-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-search-margin-bottom, var(--app-scale-5x, 25px)))}.q2-search-container{display:block;position:relative}.q2-search-input{margin:0;--tct-input-min-height:var(--tct-search-input-min-height, initial);--tct-input-max-height:var(--tct-search-input-max-height, none);--tct-input-horizontal-gap:var(--tct-search-input-horizontal-gap, var(--app-scale-2x, 10px));--tct-input-icon-container-icon-min-width:var(--tct-search-icon-min-width, fit-content)}.popover-content{display:flex;flex-direction:column}.popover-content[data-loading=true]{min-height:var(--tct-search-loading-popover-height, var(--app-scale-12x, 60px));position:relative}.popover-content[data-loading=true] .loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.popover-content[data-loading=true] .loading-overlay q2-loading{--tct-loading-spinner-size:var(--tct-search-loading-spinner-size, var(--app-scale-8x, 40px));width:1em;height:1em}.popover-top-container[hidden],.popover-bottom-container[hidden]{display:none}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-search-multi-select-header-padding, var(--app-scale-2x, 10px));background:var(--tct-search-multi-select-header-background, var(--t-base, #ffffff));display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-search-multi-select-option-padding, 2px 5px);font-size:var(--tct-search-multi-select-option-font-size, inherit);border-radius:var(--tct-search-multi-select-option-border-radius, var(--app-border-radius-1, 4px));background:var(--tct-search-multi-select-option-background, transparent);color:var(--tct-search-multi-select-option-font-color, inherit)}.popover-top-container .multi-select-header label:hover{background:var(--tct-search-multi-select-option-hover-background, var(--t-gray-14, #f2f2f2));color:var(--tct-search-multi-select-option-hover-font-color, var(--t-gray-5, #404040))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-search-multi-select-option-active-background, var(--t-gray-4, #333333));color:var(--tct-search-multi-select-option-active-font-color, var(--t-base, #ffffff))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-search-multi-select-option-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.popover-top-container .multi-select-header input:focus-visible+label{box-shadow:var(--const-double-focus-ring)}.no-results{padding:var(--tct-search-no-results-padding, var(--app-scale-3x, 15px));color:var(--tct-search-no-results-font-color, var(--t-textA, rgba(77, 77, 77, 0.77)));text-align:center}`;
 
@@ -247,13 +247,17 @@ const Q2Search = class {
     // #endregion
     // #region Listeners
     onFocus(event) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
+        // Delegate programmatic focus from the host to the inner input
+        if (event && isEventFromElement(event, this.hostElement)) {
+            (_a = this.innerInputField) === null || _a === void 0 ? void 0 : _a.focus();
+        }
         // Ignore focus that originates inside the popover (e.g., tabbing into a slotted
         // popover-bottom action button). Without this gate, the focus event bubbles up and
         // re-opens a just-closed popover as the user is trying to leave it.
         const path = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : [];
-        const target = ((_a = path[0]) !== null && _a !== void 0 ? _a : event === null || event === void 0 ? void 0 : event.target);
-        if (target && ((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.contains(target)))
+        const target = ((_b = path[0]) !== null && _b !== void 0 ? _b : event === null || event === void 0 ? void 0 : event.target);
+        if (target && ((_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.contains(target)))
             return;
         this.inputFocused = true;
         if (this.isShowingSelectionDisplay) {
@@ -267,7 +271,7 @@ const Q2Search = class {
             else if (this.value) {
                 // Single-select: pre-select the displayed text so the next keystroke replaces it
                 // — typeahead pattern used by Material Autocomplete, Headless UI Combobox, etc.
-                (_c = this.innerInputField) === null || _c === void 0 ? void 0 : _c.select();
+                (_d = this.innerInputField) === null || _d === void 0 ? void 0 : _d.select();
             }
         }
         if (!this.open)
@@ -668,7 +672,7 @@ const Q2Search = class {
         return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: (_a = this.innerInputContainer) !== null && _a !== void 0 ? _a : undefined, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, align: useBlock ? undefined : this.popoverAlignment, block: useBlock }, h("div", { class: "popover-content", "data-loading": this.loading ? 'true' : 'false', "aria-busy": this.loading ? 'true' : null }, h("div", { class: "popover-top-container", hidden: !this.hasPopoverTop && !(this.multiple && this.showSelectedToggle), tabindex: "-1" }, h("slot", { name: "popover-top" }), !this.loading && this.renderMultiSelectHeader()), h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: this.optionListId, label: loc(this.listLabel), multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, showSelected: this.showSelected, customSearch: true, hidden: this.loading, onChange: (e) => e.stopPropagation(), onTctChange: this.onOptionListChange }, h("slot", null)), showEmpty && this.renderEmpty(), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" })), this.loading && (h("div", { class: "loading-overlay", "aria-hidden": "true" }, h("q2-loading", { type: "spinner" }))))));
     }
     render() {
-        return (h(Fragment, { key: '25d659528e22b848146b76d76f5bdb94da246d02' }, h("div", { key: '6a46b01c7d9598bbf887a1c579dd500588303ad6', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '22a8cbf8de37dfe302ca63904cc8fc22841018a6', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: 'e96361aec59e427a3a5b59d95b7c4aefd3b9d169', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
+        return (h(Fragment, { key: '918ec8192e1dca668611c06f30f002413d87abca' }, h("div", { key: 'a6b81bd23e5d7224986175fc02b21e2fd1433f04', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '7f83f9b669917b5430aedca1595aee0837edd4da', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '7d8de986679460091123baa023a791dcdaecc58a', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
                 (this.invalid && ['tecton.element.search.invalid']) ||
                 [], ariaExpanded: this.isInputOnlyMode ? undefined : `${this.open}`, ariaControls: this.isInputOnlyMode ? undefined : this.optionListId, ariaHaspopup: this.isInputOnlyMode ? undefined : 'listbox', hideMessages: true, _role: this.isInputOnlyMode ? undefined : 'combobox', onTctInput: this.inputInputHandler, onInput: (e) => e.stopImmediatePropagation(), onChange: (e) => e.stopPropagation(), onTctChange: (e) => e.stopPropagation(), badgeValue: this.badgeValue }), this.renderOptionsDropdown())));
     }

package/dist/q2-tecton-elements/q2-pagination.entry.js

@@ -13,7 +13,8 @@ const l = class {
     this.disabled = !1, this.checkSize = () => {
       const {hostElement: t, containerElement: e} = this, i = this.containerWidth > t.clientWidth;
       this.isSmall = i, a((() => {
-        this.containerWidth === e.clientWidth || (this.containerWidth = e.clientWidth, this.checkSize());
+        const t = e.clientWidth, i = this.isSmall ? Math.max(this.containerWidth || 0, t) : t;
+        this.containerWidth === i || (this.containerWidth = i, this.checkSize());
       }));
     }, this.handlePageChange = t => {
       if (this.disabled) return;
@@ -205,7 +206,7 @@ const l = class {
   }
   render() {
     var t;
-    const {pagesOnly: e, recordsOnly: n, isFullViewHidden: a, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: h, currentRange: l, nextRange: p, prevRange: d, showPerPageSelect: g, disabled: u} = this, f = h < 2, b = h === o;
+    const {pagesOnly: e, recordsOnly: n, isFullViewHidden: a, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: h, currentRange: l, nextRange: p, prevRange: g, showPerPageSelect: d, disabled: u} = this, f = h < 2, b = h === o;
     let v = c("tecton.element.pagination.goToNext"), y = c("tecton.element.pagination.goToPrevious");
     return e ? (y = c("tecton.element.pagination.goToPages", {
       next: h - 1,
@@ -214,7 +215,7 @@ const l = class {
       next: h + 1,
       total: o
     })) : n && (y = c("tecton.element.pagination.goToRecords", {
-      range: d,
+      range: g,
       recordType: s.toLowerCase(),
       total: r
     }), v = c("tecton.element.pagination.goToRecords", {
@@ -222,12 +223,12 @@ const l = class {
       recordType: s.toLowerCase(),
       total: r
     })), i("nav", {
-      key: "44e768f8882dcbc08f628b9942ba66c1f7842b84",
+      key: "c42b191eccb70b9e3c684843cebf9f6b06f3c3b3",
       class: this.containerClasses.join(" "),
       ref: t => this.containerElement = t,
       "aria-label": c("tecton.element.pagination.title")
     }, i("div", {
-      key: "60463fcf15e3fbd2c32d4e6bac7c94ababaa8cc3",
+      key: "eb03cdc19938adac4a5c44887fa7d9853c9b89ab",
       class: "description",
       "test-id": "description"
     }, e ? c("tecton.element.pagination.pages", {
@@ -238,13 +239,13 @@ const l = class {
       recordType: s.toLowerCase(),
       total: r.toLocaleString()
     })), i("div", {
-      key: "f2b3e30c873402d5b3c6d1be75bc454905ee3907",
+      key: "0e9a0bcfa6545b08843423378066989cf96ad18e",
       class: "controls"
     }, i("div", {
-      key: "27ceacad7bee51d922105769ef169ec20efeac27",
+      key: "4ea3b0a64165885dfd1bd525527e2617e4f4d748",
       class: "btn-group"
     }, i("q2-btn", {
-      key: "087de40b9839abd37cb16ea96cee04f275bd3498",
+      key: "72d72c7b974ecbca50c4259cca5028515786af5b",
       ref: t => this.firstPageBtn = t,
       label: c("tecton.element.pagination.goToFirstPage"),
       disabled: u || f,
@@ -253,10 +254,10 @@ const l = class {
       "test-id": "firstPageBtn",
       "hide-label": !0
     }, i("q2-icon", {
-      key: "9b98c016c8e2f9710d553ad4299da98d7579aa49",
+      key: "26f5f8e8cf23a6d924b4a01796827fb62017809d",
       type: "chevron-double-left"
     })), i("q2-btn", {
-      key: "96f7cd1dc6812e99b80b6c389b80cf7e81aeea1a",
+      key: "5f7845c5917137131cc6703bb59d90c842e32a7e",
       ref: t => this.prevPageBtn = t,
       label: y,
       disabled: u || f,
@@ -264,21 +265,21 @@ const l = class {
       "test-id": "prevPageBtn",
       "hide-label": !0
     }, i("q2-icon", {
-      key: "c4281b260bbd4e18a67cc5d25cd2b95c901227cd",
+      key: "e02ccf51de21789099e2b254019f962dbb5011dc",
       type: "chevron-left"
     }))), i("div", {
-      key: "c0577aea33951988049f07227dc3b82af0b16436",
+      key: "ca201f7a4382e7f3835093c4c3877f7e2a0b5150",
       class: "input-display",
       hidden: a
     }, i("span", {
-      key: "deeed14565939a19d1175039cb2904fbc607ad36",
+      key: "c690830341a15c25e4ad5a2d2a524d876c9f7cdb",
       "aria-hidden": "true"
     }, c("tecton.element.pagination.page")), i("div", {
-      key: "c0982185738f45065c3de709ea953a819b71b133",
+      key: "7d08062d6cd495d4025a82413b347ed87915cbce",
       class: "input-wrapper",
       onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
     }, i("q2-input", {
-      key: "8a10147b9b43fc54caf7395c4b00fa187d8ff009",
+      key: "e30795721d66d75dd5f349ad4d6d3ffda6023820",
       ref: t => this.inputField = t,
       type: "number",
       value: `${h}`,
@@ -295,13 +296,13 @@ const l = class {
       current: "page",
       disabled: u
     })), i("span", {
-      key: "0014d1f909792d2c7d61f2c5f6e93ff39f185e1e",
+      key: "e2f1e51306298ddf428fd4e9fa665b58b2535fc8",
       "aria-hidden": "true"
     }, c("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), i("div", {
-      key: "69dc4fb772315cf108faa073ffe3ddec25082f64",
+      key: "c7a095aaa30743441c0c4d22f55e94801b3a823f",
       class: "btn-group"
     }, i("q2-btn", {
-      key: "320d2e7ff7d94c29f48a06d137a2e5cb79edce36",
+      key: "c52d8837ec35b128a9d3f9c87766ed770edc9600",
       ref: t => this.nextPageBtn = t,
       label: v,
       disabled: u || b,
@@ -309,10 +310,10 @@ const l = class {
       "test-id": "nextPageBtn",
       "hide-label": !0
     }, i("q2-icon", {
-      key: "05965f4cc4d750df433b2c9a43c04ae2d789e0eb",
+      key: "d1d802bddb426070fa1ca92a7937b8405949f01c",
       type: "chevron-right"
     })), i("q2-btn", {
-      key: "fb41b8ac94c96082a8d58a8652952d656d3ebb8e",
+      key: "357f5bf5426e6c0004b737238a3c66697fc6a672",
       ref: t => this.lastPageBtn = t,
       label: "tecton.element.pagination.goToLastPage",
       disabled: u || b,
@@ -321,13 +322,13 @@ const l = class {
       "test-id": "lastPageBtn",
       "hide-label": !0
     }, i("q2-icon", {
-      key: "d2aed2aee8153ea88b708d8e1b3fdb52fe98f658",
+      key: "1be92d6fa9252168baf63420271c8b8a77f41d92",
       type: "chevron-double-right"
     })))), i("div", {
-      key: "0d355f0c69796ee99ae517ee01d9cd40b91bce9e",
+      key: "96ca4bc582b1dcb830bad146fbf1233f2549f256",
       class: "per-page",
       hidden: a || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
-    }, g && this.renderPerPage()));
+    }, d && this.renderPerPage()));
   }
   get hostElement() {
     return n(this);

package/dist/q2-tecton-elements/q2-search.entry.js

@@ -1,8 +1,8 @@
 import { r as t, c as i, h as e, F as s, g as o } from "./index-Cqkz7Bnm.js";
 
-import { l as n, o as r, w as a } from "./index-Bx4m6N0g.js";
+import { l as n, o as r, i as a, w as l } from "./index-Bx4m6N0g.js";
 
-const l = class {
+const h = class {
   constructor(e) {
     t(this, e), this.tctChange = i(this, "tctChange", 7), this.tctClose = i(this, "tctClose", 7), 
     this.tctInput = i(this, "tctInput", 7), this.tctOpen = i(this, "tctOpen", 7), 
@@ -175,12 +175,14 @@ const l = class {
   // #endregion
   // #region Listeners
   onFocus(t) {
-    var i, e, s;
+    var i, e, s, o;
+    // Delegate programmatic focus from the host to the inner input
+        t && a(t, this.hostElement) && (null === (i = this.innerInputField) || void 0 === i || i.focus());
     // Ignore focus that originates inside the popover (e.g., tabbing into a slotted
     // popover-bottom action button). Without this gate, the focus event bubbles up and
     // re-opens a just-closed popover as the user is trying to leave it.
-        const o = null !== (i = ("function" == typeof (null == t ? void 0 : t.composedPath) ? t.composedPath() : [])[0]) && void 0 !== i ? i : null == t ? void 0 : t.target;
-    o && (null === (e = this.popoverElement) || void 0 === e ? void 0 : e.contains(o)) || (this.inputFocused = !0, 
+        const n = null !== (e = ("function" == typeof (null == t ? void 0 : t.composedPath) ? t.composedPath() : [])[0]) && void 0 !== e ? e : null == t ? void 0 : t.target;
+    n && (null === (s = this.popoverElement) || void 0 === s ? void 0 : s.contains(n)) || (this.inputFocused = !0, 
     this.isShowingSelectionDisplay && (
     // Clear the flag before mutating searchText so the filter watcher runs against the
     // new query, not the stale "showing a selection" guard.
@@ -189,7 +191,7 @@ const l = class {
     this.searchText = "" : this.value && (
     // Single-select: pre-select the displayed text so the next keystroke replaces it
     // — typeahead pattern used by Material Autocomplete, Headless UI Combobox, etc.
-    null === (s = this.innerInputField) || void 0 === s || s.select())), this.open || this.openDropdown());
+    null === (o = this.innerInputField) || void 0 === o || o.select())), this.open || this.openDropdown());
   }
   onFocusOut(t) {
     var i;
@@ -225,13 +227,13 @@ const l = class {
      * @testOnly
      */
   async closePopover() {
-    this.closeDropdown(), await a();
+    this.closeDropdown(), await l();
   }
   /**
      * Opens the popover.
      * @testOnly
      */  async openPopover() {
-    this.openDropdown(), await a();
+    this.openDropdown(), await l();
   }
   /**
      * Resets the search to its initial state: clears the input, the
@@ -266,7 +268,7 @@ const l = class {
     this.open || await this.openPopover(), e.forEach((t => {
       var i;
       null === (i = this.optionElements.find((i => i.value === t))) || void 0 === i || i.click();
-    })), i.closePopover && (await this.closePopover(), await a());
+    })), i.closePopover && (await this.closePopover(), await l());
   }
   // #endregion
   // #region Watchers
@@ -539,20 +541,20 @@ const l = class {
   }
   render() {
     return e(s, {
-      key: "25d659528e22b848146b76d76f5bdb94da246d02"
+      key: "918ec8192e1dca668611c06f30f002413d87abca"
     }, e("div", {
-      key: "6a46b01c7d9598bbf887a1c579dd500588303ad6",
+      key: "a6b81bd23e5d7224986175fc02b21e2fd1433f04",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), e("click-elsewhere", {
-      key: "22a8cbf8de37dfe302ca63904cc8fc22841018a6",
+      key: "7f83f9b669917b5430aedca1595aee0837edd4da",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.onClickElsewhere
     }, e("q2-input", {
-      key: "e96361aec59e427a3a5b59d95b7c4aefd3b9d169",
+      key: "7d8de986679460091123baa023a791dcdaecc58a",
       ref: t => this.inputField = t,
       class: "q2-search-input",
       label: this.label && n(this.label) || "",
@@ -604,6 +606,6 @@ const l = class {
   }
 };
 
-l.style = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin:var(--tct-search-margin, var(--tct-search-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-search-margin-bottom, var(--app-scale-5x, 25px)))}.q2-search-container{display:block;position:relative}.q2-search-input{margin:0;--tct-input-min-height:var(--tct-search-input-min-height, initial);--tct-input-max-height:var(--tct-search-input-max-height, none);--tct-input-horizontal-gap:var(--tct-search-input-horizontal-gap, var(--app-scale-2x, 10px));--tct-input-icon-container-icon-min-width:var(--tct-search-icon-min-width, fit-content)}.popover-content{display:flex;flex-direction:column}.popover-content[data-loading=true]{min-height:var(--tct-search-loading-popover-height, var(--app-scale-12x, 60px));position:relative}.popover-content[data-loading=true] .loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.popover-content[data-loading=true] .loading-overlay q2-loading{--tct-loading-spinner-size:var(--tct-search-loading-spinner-size, var(--app-scale-8x, 40px));width:1em;height:1em}.popover-top-container[hidden],.popover-bottom-container[hidden]{display:none}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-search-multi-select-header-padding, var(--app-scale-2x, 10px));background:var(--tct-search-multi-select-header-background, var(--t-base, #ffffff));display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-search-multi-select-option-padding, 2px 5px);font-size:var(--tct-search-multi-select-option-font-size, inherit);border-radius:var(--tct-search-multi-select-option-border-radius, var(--app-border-radius-1, 4px));background:var(--tct-search-multi-select-option-background, transparent);color:var(--tct-search-multi-select-option-font-color, inherit)}.popover-top-container .multi-select-header label:hover{background:var(--tct-search-multi-select-option-hover-background, var(--t-gray-14, #f2f2f2));color:var(--tct-search-multi-select-option-hover-font-color, var(--t-gray-5, #404040))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-search-multi-select-option-active-background, var(--t-gray-4, #333333));color:var(--tct-search-multi-select-option-active-font-color, var(--t-base, #ffffff))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-search-multi-select-option-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.popover-top-container .multi-select-header input:focus-visible+label{box-shadow:var(--const-double-focus-ring)}.no-results{padding:var(--tct-search-no-results-padding, var(--app-scale-3x, 15px));color:var(--tct-search-no-results-font-color, var(--t-textA, rgba(77, 77, 77, 0.77)));text-align:center}";
+h.style = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin:var(--tct-search-margin, var(--tct-search-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-search-margin-bottom, var(--app-scale-5x, 25px)))}.q2-search-container{display:block;position:relative}.q2-search-input{margin:0;--tct-input-min-height:var(--tct-search-input-min-height, initial);--tct-input-max-height:var(--tct-search-input-max-height, none);--tct-input-horizontal-gap:var(--tct-search-input-horizontal-gap, var(--app-scale-2x, 10px));--tct-input-icon-container-icon-min-width:var(--tct-search-icon-min-width, fit-content)}.popover-content{display:flex;flex-direction:column}.popover-content[data-loading=true]{min-height:var(--tct-search-loading-popover-height, var(--app-scale-12x, 60px));position:relative}.popover-content[data-loading=true] .loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.popover-content[data-loading=true] .loading-overlay q2-loading{--tct-loading-spinner-size:var(--tct-search-loading-spinner-size, var(--app-scale-8x, 40px));width:1em;height:1em}.popover-top-container[hidden],.popover-bottom-container[hidden]{display:none}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-search-multi-select-header-padding, var(--app-scale-2x, 10px));background:var(--tct-search-multi-select-header-background, var(--t-base, #ffffff));display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-search-multi-select-option-padding, 2px 5px);font-size:var(--tct-search-multi-select-option-font-size, inherit);border-radius:var(--tct-search-multi-select-option-border-radius, var(--app-border-radius-1, 4px));background:var(--tct-search-multi-select-option-background, transparent);color:var(--tct-search-multi-select-option-font-color, inherit)}.popover-top-container .multi-select-header label:hover{background:var(--tct-search-multi-select-option-hover-background, var(--t-gray-14, #f2f2f2));color:var(--tct-search-multi-select-option-hover-font-color, var(--t-gray-5, #404040))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-search-multi-select-option-active-background, var(--t-gray-4, #333333));color:var(--tct-search-multi-select-option-active-font-color, var(--t-base, #ffffff))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-search-multi-select-option-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.popover-top-container .multi-select-header input:focus-visible+label{box-shadow:var(--const-double-focus-ring)}.no-results{padding:var(--tct-search-no-results-padding, var(--app-scale-3x, 15px));color:var(--tct-search-no-results-font-color, var(--t-textA, rgba(77, 77, 77, 0.77)));text-align:center}";
 
-export { l as q2_search }
+export { h as q2_search }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.69.0",
+    "version": "1.69.1",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -55,7 +55,7 @@
     },
     "dependencies": {
         "@stencil/core": "~4.43.0",
-        "q2-tecton-common": "1.69.0",
+        "q2-tecton-common": "1.69.1",
         "swiper": "^12.1.2"
     },
     "devDependencies": {
@@ -77,5 +77,5 @@
         "rollup-plugin-istanbul": "^5.0.0"
     },
     "packageManager": "pnpm@10.27.0",
-    "gitHead": "cbac881c77dc0fe2635af57efffc091129e34c6f"
+    "gitHead": "17033b43f6a106d77f33ff8ae9bbc66097141b21"
 }