q2-tecton-elements 1.71.1 → 1.71.3

package/dist/bundle-report.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-24T16:29:18",
+  "timestamp": "2026-09-23T17:45:32",
   "compiler": {
     "name": "node",
     "version": "24.10.0"
@@ -1009,7 +1009,7 @@
           "index-Cqkz7Bnm.js",
           "index-Cps4jSQM.js"
         ],
-        "originalByteSize": 45662
+        "originalByteSize": 46300
       },
       {
         "key": "q2-section.entry",
@@ -1231,7 +1231,7 @@
           "mirror-emit-DUjY_ucm.js",
           "action-sheet-DuQ7VZ08.js"
         ],
-        "originalByteSize": 48151
+        "originalByteSize": 48249
       },
       {
         "key": "q2-tooltip.entry",
@@ -1870,7 +1870,7 @@
           "index-Cqkz7Bnm.js",
           "index-Cps4jSQM.js"
         ],
-        "originalByteSize": 45662
+        "originalByteSize": 46300
       },
       {
         "key": "q2-section.entry",
@@ -2092,7 +2092,7 @@
           "mirror-emit-DUjY_ucm.js",
           "action-sheet-DuQ7VZ08.js"
         ],
-        "originalByteSize": 48151
+        "originalByteSize": 48249
       },
       {
         "key": "q2-tooltip.entry",
@@ -2733,7 +2733,7 @@
           "index-DUaTw_1N.js",
           "index-SpDCZABA.js"
         ],
-        "originalByteSize": 45929
+        "originalByteSize": 46567
       },
       {
         "key": "q2-section.entry",
@@ -2955,7 +2955,7 @@
           "mirror-emit-kjeNv83f.js",
           "action-sheet-DUBlF_x3.js"
         ],
-        "originalByteSize": 48357
+        "originalByteSize": 48455
       },
       {
         "key": "q2-tooltip.entry",

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

@@ -15,6 +15,7 @@ const Q2Search = class {
         // #region Own Properties
         // Viewport edge buffer (px) — popover falls back to input-width when it would otherwise overflow.
         this.displayBuffer = 10;
+        this.optionFingerprint = '';
         this.popoverWidthWarned = false;
         // #endregion
         // #region State Properties
@@ -187,7 +188,7 @@ const Q2Search = class {
             }
         };
         this.onMutationObserved = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const root = this.hostElement.shadowRoot;
             if (!root)
                 return;
@@ -212,6 +213,14 @@ const Q2Search = class {
             this.checkSelectedOptions();
             if (this.multilineOptions)
                 this.applyMultilineOptions();
+            // Reset the option list's active index whenever the slotted option set changes so that
+            // the next ArrowDown/ArrowUp always starts from the first visible item rather than a
+            // stale position left over from a previous, different options list.
+            const fingerprint = this.optionElements.map(o => o.value).join('\x00');
+            if (fingerprint !== this.optionFingerprint) {
+                this.optionFingerprint = fingerprint;
+                (_d = this.optionList) === null || _d === void 0 ? void 0 : _d.setActiveElement(undefined);
+            }
         };
         this.onOptionListChange = (event) => {
             event.stopPropagation();
@@ -763,7 +772,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: '7639a6dccbd55360c35c03c357fd64552dd9d2ba' }, index.h("div", { key: 'bf893491af923c9c2dc404a137df754297bd3ad5', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("click-elsewhere", { key: '73e0045d7fc40c5d57fe26ed2993da24d5d42a04', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, index.h("q2-input", { key: '5328d7d706f2f8bf3e8433d90c32e51b6abf4122', 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: '78ce7b735d59271600debb18ab2f0f5cf315e465' }, index.h("div", { key: 'd3e9a713581842cc62969a0df9556733edf6e378', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("click-elsewhere", { key: '6912af1d8f31af8de7c7ffb28786756819c57afc', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, index.h("q2-input", { key: '95a5397765aab6d3279b3d81cc31215f235aefc2', 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.renderCustomDisplay()), this.renderOptionsDropdown())));
     }

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

@@ -363,6 +363,8 @@ const Q2Select = class {
     }
     onClearHandler(event) {
         var _a;
+        if (this.readonly || this.disabled)
+            return;
         // when multiple & searchable, it should not fire clearValue() if the type is `input` (cleared by key input) which is emitted from q2-input's handleDataInput
         if (this.multiple && this.searchable && ((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.source) === 'input')
             return;
@@ -807,7 +809,8 @@ const Q2Select = class {
     }
     renderSelectField() {
         var _a;
-        return (index.h(index.Fragment, null, index.h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && index$1.loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (index.h(index.Fragment, null, index.h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && index$1.loc(this.label)) || '', value: this.selectedDisplay, clearable: (!this.disabled && this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) ||
+                undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => index$1.loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
@@ -822,7 +825,7 @@ const Q2Select = class {
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), index.h("label", { htmlFor: "selected" }, index$1.loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (index.h("click-elsewhere", { key: 'a08e10cf8bd4e2d3f210d36003417f2a1dec4b21', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (index.h("click-elsewhere", { key: 'edb9951db5493781ee1f5da0ed5f6c03aff107e9', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -14,6 +14,7 @@ export class Q2Search {
         // #region Own Properties
         // Viewport edge buffer (px) — popover falls back to input-width when it would otherwise overflow.
         this.displayBuffer = 10;
+        this.optionFingerprint = '';
         this.popoverWidthWarned = false;
         // #endregion
         // #region State Properties
@@ -186,7 +187,7 @@ export class Q2Search {
             }
         };
         this.onMutationObserved = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const root = this.hostElement.shadowRoot;
             if (!root)
                 return;
@@ -211,6 +212,14 @@ export class Q2Search {
             this.checkSelectedOptions();
             if (this.multilineOptions)
                 this.applyMultilineOptions();
+            // Reset the option list's active index whenever the slotted option set changes so that
+            // the next ArrowDown/ArrowUp always starts from the first visible item rather than a
+            // stale position left over from a previous, different options list.
+            const fingerprint = this.optionElements.map(o => o.value).join('\x00');
+            if (fingerprint !== this.optionFingerprint) {
+                this.optionFingerprint = fingerprint;
+                (_d = this.optionList) === null || _d === void 0 ? void 0 : _d.setActiveElement(undefined);
+            }
         };
         this.onOptionListChange = (event) => {
             event.stopPropagation();
@@ -762,7 +771,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: '7639a6dccbd55360c35c03c357fd64552dd9d2ba' }, h("div", { key: 'bf893491af923c9c2dc404a137df754297bd3ad5', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '73e0045d7fc40c5d57fe26ed2993da24d5d42a04', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '5328d7d706f2f8bf3e8433d90c32e51b6abf4122', 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: '78ce7b735d59271600debb18ab2f0f5cf315e465' }, h("div", { key: 'd3e9a713581842cc62969a0df9556733edf6e378', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '6912af1d8f31af8de7c7ffb28786756819c57afc', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '95a5397765aab6d3279b3d81cc31215f235aefc2', 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.renderCustomDisplay()), this.renderOptionsDropdown())));
     }

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

@@ -361,6 +361,8 @@ export class Q2Select {
     }
     onClearHandler(event) {
         var _a;
+        if (this.readonly || this.disabled)
+            return;
         // when multiple & searchable, it should not fire clearValue() if the type is `input` (cleared by key input) which is emitted from q2-input's handleDataInput
         if (this.multiple && this.searchable && ((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.source) === 'input')
             return;
@@ -812,7 +814,8 @@ export class Q2Select {
     }
     renderSelectField() {
         var _a;
-        return (h(Fragment, null, h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (h(Fragment, null, h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (!this.disabled && this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) ||
+                undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
@@ -827,7 +830,7 @@ export class Q2Select {
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'a08e10cf8bd4e2d3f210d36003417f2a1dec4b21', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (h("click-elsewhere", { key: 'edb9951db5493781ee1f5da0ed5f6c03aff107e9', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     static get is() { return "q2-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/q2-search.js

@@ -25,7 +25,7 @@ const f =  t(class extends e {
     this.tctOpen = i(this, "tctOpen", 7), 
     // #region Own Properties
     // Viewport edge buffer (px) — popover falls back to input-width when it would otherwise overflow.
-    this.displayBuffer = 10, this.popoverWidthWarned = !1, 
+    this.displayBuffer = 10, this.optionFingerprint = "", this.popoverWidthWarned = !1, 
     // #endregion
     // #region State Properties
     this.hasEmptySlot = !1, this.hasOptions = !1, this.hasPopoverBottom = !1, this.hasPopoverTop = !1, 
@@ -158,15 +158,20 @@ const f =  t(class extends e {
     }, this.onClickElsewhere = t => {
       "click-elsewhere" === t.target.localName && (t.stopPropagation(), "#document-fragment" !== this.hostElement.getRootNode().nodeName && this.closeDropdown());
     }, this.onMutationObserved = () => {
-      var t, e, i;
-      const s = this.hostElement.shadowRoot;
-      if (!s) return;
-      const o = s.querySelector('slot[name="popover-top"]'), n = s.querySelector('slot[name="popover-bottom"]'), r = s.querySelector('slot[name="empty"]'), l = (null !== (t = null == o ? void 0 : o.assignedNodes().length) && void 0 !== t ? t : 0) > 0, a = (null !== (e = null == n ? void 0 : n.assignedNodes().length) && void 0 !== e ? e : 0) > 0, h = (null !== (i = null == r ? void 0 : r.assignedNodes().length) && void 0 !== i ? i : 0) > 0, c = this.optionElements.length > 0;
-      this.hasPopoverTop !== l && (this.hasPopoverTop = l), this.hasPopoverBottom !== a && (this.hasPopoverBottom = a), 
-      this.hasEmptySlot !== h && (this.hasEmptySlot = h), this.hasOptions !== c && (this.hasOptions = c), 
+      var t, e, i, s;
+      const o = this.hostElement.shadowRoot;
+      if (!o) return;
+      const n = o.querySelector('slot[name="popover-top"]'), r = o.querySelector('slot[name="popover-bottom"]'), l = o.querySelector('slot[name="empty"]'), a = (null !== (t = null == n ? void 0 : n.assignedNodes().length) && void 0 !== t ? t : 0) > 0, h = (null !== (e = null == r ? void 0 : r.assignedNodes().length) && void 0 !== e ? e : 0) > 0, c = (null !== (i = null == l ? void 0 : l.assignedNodes().length) && void 0 !== i ? i : 0) > 0, d = this.optionElements.length > 0;
+      this.hasPopoverTop !== a && (this.hasPopoverTop = a), this.hasPopoverBottom !== h && (this.hasPopoverBottom = h), 
+      this.hasEmptySlot !== c && (this.hasEmptySlot = c), this.hasOptions !== d && (this.hasOptions = d), 
       // If input-only mode just turned on while popover was open, close it.
       this.open && this.isInputOnlyMode && this.closeDropdown(), this.checkSelectedOptions(), 
       this.multilineOptions && this.applyMultilineOptions();
+      // Reset the option list's active index whenever the slotted option set changes so that
+      // the next ArrowDown/ArrowUp always starts from the first visible item rather than a
+      // stale position left over from a previous, different options list.
+      const p = this.optionElements.map((t => t.value)).join("\0");
+      p !== this.optionFingerprint && (this.optionFingerprint = p, null === (s = this.optionList) || void 0 === s || s.setActiveElement(void 0));
     }, this.onOptionListChange = t => {
       t.stopPropagation(), this.handleSelectionChanges(t.detail);
     }, this.onSelectedDisplayMousedown = t => {
@@ -613,20 +618,20 @@ const f =  t(class extends e {
   }
   render() {
     return s(o, {
-      key: "7639a6dccbd55360c35c03c357fd64552dd9d2ba"
+      key: "78ce7b735d59271600debb18ab2f0f5cf315e465"
     }, s("div", {
-      key: "bf893491af923c9c2dc404a137df754297bd3ad5",
+      key: "d3e9a713581842cc62969a0df9556733edf6e378",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), s("click-elsewhere", {
-      key: "73e0045d7fc40c5d57fe26ed2993da24d5d42a04",
+      key: "6912af1d8f31af8de7c7ffb28786756819c57afc",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.onClickElsewhere
     }, s("q2-input", {
-      key: "5328d7d706f2f8bf3e8433d90c32e51b6abf4122",
+      key: "95a5397765aab6d3279b3d81cc31215f235aefc2",
       ref: t => this.inputField = t,
       class: "q2-search-input",
       label: this.label && h(this.label) || "",

package/dist/components/q2-select2.js

@@ -228,9 +228,9 @@ const O =  t(class extends e {
   }
   onClearHandler(t) {
     var e;
+    this.readonly || this.disabled || this.multiple && this.searchable && "input" === (null === (e = null == t ? void 0 : t.detail) || void 0 === e ? void 0 : e.source) || this.clearValue();
     // when multiple & searchable, it should not fire clearValue() if the type is `input` (cleared by key input) which is emitted from q2-input's handleDataInput
-        this.multiple && this.searchable && "input" === (null === (e = null == t ? void 0 : t.detail) || void 0 === e ? void 0 : e.source) || this.clearValue();
-  }
+    }
   handleSelectedDisplay(t) {
     !this.multiple && this.value && this.value === t.detail.value && (this.inputField.value = t.detail.display);
   }
@@ -561,7 +561,7 @@ const O =  t(class extends e {
       class: "q2-select-input",
       label: this.label && n(this.label) || "",
       value: this.selectedDisplay,
-      clearable: this.clearable && (!!this.value || !!(null === (t = this.selectedOptions) || void 0 === t ? void 0 : t.length)) || void 0,
+      clearable: !this.disabled && this.clearable && (!!this.value || !!(null === (t = this.selectedOptions) || void 0 === t ? void 0 : t.length)) || void 0,
       errors: Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map((t => n(t))) || this.invalid && [ "tecton.element.select.invalid" ] || [],
       disabled: this.disabled,
       optional: this.optional,
@@ -633,7 +633,7 @@ const O =  t(class extends e {
   }
   render() {
     return s("click-elsewhere", {
-      key: "a08e10cf8bd4e2d3f210d36003417f2a1dec4b21",
+      key: "edb9951db5493781ee1f5da0ed5f6c03aff107e9",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.clickedElsewhere

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

@@ -13,6 +13,7 @@ const Q2Search = class {
         // #region Own Properties
         // Viewport edge buffer (px) — popover falls back to input-width when it would otherwise overflow.
         this.displayBuffer = 10;
+        this.optionFingerprint = '';
         this.popoverWidthWarned = false;
         // #endregion
         // #region State Properties
@@ -185,7 +186,7 @@ const Q2Search = class {
             }
         };
         this.onMutationObserved = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const root = this.hostElement.shadowRoot;
             if (!root)
                 return;
@@ -210,6 +211,14 @@ const Q2Search = class {
             this.checkSelectedOptions();
             if (this.multilineOptions)
                 this.applyMultilineOptions();
+            // Reset the option list's active index whenever the slotted option set changes so that
+            // the next ArrowDown/ArrowUp always starts from the first visible item rather than a
+            // stale position left over from a previous, different options list.
+            const fingerprint = this.optionElements.map(o => o.value).join('\x00');
+            if (fingerprint !== this.optionFingerprint) {
+                this.optionFingerprint = fingerprint;
+                (_d = this.optionList) === null || _d === void 0 ? void 0 : _d.setActiveElement(undefined);
+            }
         };
         this.onOptionListChange = (event) => {
             event.stopPropagation();
@@ -761,7 +770,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: '7639a6dccbd55360c35c03c357fd64552dd9d2ba' }, h("div", { key: 'bf893491af923c9c2dc404a137df754297bd3ad5', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '73e0045d7fc40c5d57fe26ed2993da24d5d42a04', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '5328d7d706f2f8bf3e8433d90c32e51b6abf4122', 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: '78ce7b735d59271600debb18ab2f0f5cf315e465' }, h("div", { key: 'd3e9a713581842cc62969a0df9556733edf6e378', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '6912af1d8f31af8de7c7ffb28786756819c57afc', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '95a5397765aab6d3279b3d81cc31215f235aefc2', 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.renderCustomDisplay()), this.renderOptionsDropdown())));
     }

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

@@ -361,6 +361,8 @@ const Q2Select = class {
     }
     onClearHandler(event) {
         var _a;
+        if (this.readonly || this.disabled)
+            return;
         // when multiple & searchable, it should not fire clearValue() if the type is `input` (cleared by key input) which is emitted from q2-input's handleDataInput
         if (this.multiple && this.searchable && ((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.source) === 'input')
             return;
@@ -805,7 +807,8 @@ const Q2Select = class {
     }
     renderSelectField() {
         var _a;
-        return (h(Fragment, null, h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (h(Fragment, null, h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (!this.disabled && this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) ||
+                undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
@@ -820,7 +823,7 @@ const Q2Select = class {
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'a08e10cf8bd4e2d3f210d36003417f2a1dec4b21', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (h("click-elsewhere", { key: 'edb9951db5493781ee1f5da0ed5f6c03aff107e9', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -8,7 +8,7 @@ const h = class {
     this.tctInput = i(this, "tctInput", 7), this.tctOpen = i(this, "tctOpen", 7), 
     // #region Own Properties
     // Viewport edge buffer (px) — popover falls back to input-width when it would otherwise overflow.
-    this.displayBuffer = 10, this.popoverWidthWarned = !1, 
+    this.displayBuffer = 10, this.optionFingerprint = "", this.popoverWidthWarned = !1, 
     // #endregion
     // #region State Properties
     this.hasEmptySlot = !1, this.hasOptions = !1, this.hasPopoverBottom = !1, this.hasPopoverTop = !1, 
@@ -141,15 +141,20 @@ const h = class {
     }, this.onClickElsewhere = t => {
       "click-elsewhere" === t.target.localName && (t.stopPropagation(), "#document-fragment" !== this.hostElement.getRootNode().nodeName && this.closeDropdown());
     }, this.onMutationObserved = () => {
-      var t, i, e;
-      const s = this.hostElement.shadowRoot;
-      if (!s) return;
-      const o = s.querySelector('slot[name="popover-top"]'), n = s.querySelector('slot[name="popover-bottom"]'), r = s.querySelector('slot[name="empty"]'), l = (null !== (t = null == o ? void 0 : o.assignedNodes().length) && void 0 !== t ? t : 0) > 0, a = (null !== (i = null == n ? void 0 : n.assignedNodes().length) && void 0 !== i ? i : 0) > 0, h = (null !== (e = null == r ? void 0 : r.assignedNodes().length) && void 0 !== e ? e : 0) > 0, d = this.optionElements.length > 0;
-      this.hasPopoverTop !== l && (this.hasPopoverTop = l), this.hasPopoverBottom !== a && (this.hasPopoverBottom = a), 
-      this.hasEmptySlot !== h && (this.hasEmptySlot = h), this.hasOptions !== d && (this.hasOptions = d), 
+      var t, i, e, s;
+      const o = this.hostElement.shadowRoot;
+      if (!o) return;
+      const n = o.querySelector('slot[name="popover-top"]'), r = o.querySelector('slot[name="popover-bottom"]'), l = o.querySelector('slot[name="empty"]'), a = (null !== (t = null == n ? void 0 : n.assignedNodes().length) && void 0 !== t ? t : 0) > 0, h = (null !== (i = null == r ? void 0 : r.assignedNodes().length) && void 0 !== i ? i : 0) > 0, c = (null !== (e = null == l ? void 0 : l.assignedNodes().length) && void 0 !== e ? e : 0) > 0, d = this.optionElements.length > 0;
+      this.hasPopoverTop !== a && (this.hasPopoverTop = a), this.hasPopoverBottom !== h && (this.hasPopoverBottom = h), 
+      this.hasEmptySlot !== c && (this.hasEmptySlot = c), this.hasOptions !== d && (this.hasOptions = d), 
       // If input-only mode just turned on while popover was open, close it.
       this.open && this.isInputOnlyMode && this.closeDropdown(), this.checkSelectedOptions(), 
       this.multilineOptions && this.applyMultilineOptions();
+      // Reset the option list's active index whenever the slotted option set changes so that
+      // the next ArrowDown/ArrowUp always starts from the first visible item rather than a
+      // stale position left over from a previous, different options list.
+      const p = this.optionElements.map((t => t.value)).join("\0");
+      p !== this.optionFingerprint && (this.optionFingerprint = p, null === (s = this.optionList) || void 0 === s || s.setActiveElement(void 0));
     }, this.onOptionListChange = t => {
       t.stopPropagation(), this.handleSelectionChanges(t.detail);
     }, this.onSelectedDisplayMousedown = t => {
@@ -404,13 +409,13 @@ const h = class {
     if (!a) return this.clearSelectedDisplay();
     const h = a.cloneNode(!0);
     h.querySelectorAll("[hide-on-select]").forEach((t => t.remove()));
-    let d = this.selectedDisplaySlot;
-    return d ? (null === (t = d.firstElementChild) || void 0 === t ? void 0 : t.outerHTML) !== h.outerHTML && d.replaceChildren(h) : (d = document.createElement("div"), 
-    d.slot = "_selected-display", 
+    let c = this.selectedDisplaySlot;
+    return c ? (null === (t = c.firstElementChild) || void 0 === t ? void 0 : t.outerHTML) !== h.outerHTML && c.replaceChildren(h) : (c = document.createElement("div"), 
+    c.slot = "_selected-display", 
     // Prevent the non-focusable overlay from blurring the hidden input when clicked.
     // Same pattern used by q2-input's clear button (onMouseDown preventDefault).
-    d.addEventListener("mousedown", this.onSelectedDisplayMousedown), d.appendChild(h), 
-    this.hostElement.appendChild(d)), d;
+    c.addEventListener("mousedown", this.onSelectedDisplayMousedown), c.appendChild(h), 
+    this.hostElement.appendChild(c)), c;
   }
   checkSelectedOptions() {
     const {multiple: t, selectedOptions: i, value: e} = this;
@@ -596,20 +601,20 @@ const h = class {
   }
   render() {
     return e(s, {
-      key: "7639a6dccbd55360c35c03c357fd64552dd9d2ba"
+      key: "78ce7b735d59271600debb18ab2f0f5cf315e465"
     }, e("div", {
-      key: "bf893491af923c9c2dc404a137df754297bd3ad5",
+      key: "d3e9a713581842cc62969a0df9556733edf6e378",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), e("click-elsewhere", {
-      key: "73e0045d7fc40c5d57fe26ed2993da24d5d42a04",
+      key: "6912af1d8f31af8de7c7ffb28786756819c57afc",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.onClickElsewhere
     }, e("q2-input", {
-      key: "5328d7d706f2f8bf3e8433d90c32e51b6abf4122",
+      key: "95a5397765aab6d3279b3d81cc31215f235aefc2",
       ref: t => this.inputField = t,
       class: "q2-search-input",
       label: this.label && a(this.label) || "",

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

@@ -212,9 +212,9 @@ const g = class {
   }
   onClearHandler(t) {
     var e;
+    this.readonly || this.disabled || this.multiple && this.searchable && "input" === (null === (e = null == t ? void 0 : t.detail) || void 0 === e ? void 0 : e.source) || this.clearValue();
     // when multiple & searchable, it should not fire clearValue() if the type is `input` (cleared by key input) which is emitted from q2-input's handleDataInput
-        this.multiple && this.searchable && "input" === (null === (e = null == t ? void 0 : t.detail) || void 0 === e ? void 0 : e.source) || this.clearValue();
-  }
+    }
   handleSelectedDisplay(t) {
     !this.multiple && this.value && this.value === t.detail.value && (this.inputField.value = t.detail.display);
   }
@@ -545,7 +545,7 @@ const g = class {
       class: "q2-select-input",
       label: this.label && n(this.label) || "",
       value: this.selectedDisplay,
-      clearable: this.clearable && (!!this.value || !!(null === (t = this.selectedOptions) || void 0 === t ? void 0 : t.length)) || void 0,
+      clearable: !this.disabled && this.clearable && (!!this.value || !!(null === (t = this.selectedOptions) || void 0 === t ? void 0 : t.length)) || void 0,
       errors: Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map((t => n(t))) || this.invalid && [ "tecton.element.select.invalid" ] || [],
       disabled: this.disabled,
       optional: this.optional,
@@ -617,7 +617,7 @@ const g = class {
   }
   render() {
     return i("click-elsewhere", {
-      key: "a08e10cf8bd4e2d3f210d36003417f2a1dec4b21",
+      key: "edb9951db5493781ee1f5da0ed5f6c03aff107e9",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.clickedElsewhere

package/dist/types/components/q2-search/q2-search.d.ts

@@ -15,6 +15,7 @@ export declare class Q2Search implements ComponentInterface {
     displayBuffer: number;
     inputField?: HTMLQ2InputElement;
     mutationObserver: MutationObserver;
+    optionFingerprint: string;
     optionList?: HTMLQ2OptionListElement;
     popoverElement?: HTMLQ2PopoverElement;
     popoverWidthWarned: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.71.1",
+    "version": "1.71.3",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -63,7 +63,7 @@
     },
     "dependencies": {
         "@stencil/core": "~4.43.0",
-        "q2-tecton-common": "1.71.1",
+        "q2-tecton-common": "1.71.3",
         "swiper": "^12.1.2"
     },
     "devDependencies": {
@@ -85,5 +85,5 @@
         "rollup-plugin-istanbul": "^5.0.0"
     },
     "packageManager": "pnpm@10.27.0",
-    "gitHead": "821c5df7c9fbd92b42c5cd88d7ef61c78a2a134a"
+    "gitHead": "95ba2af02915cbf9987a0d554efc7f8212ffe135"
 }