q2-tecton-elements 1.71.0 → 1.71.2

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-Cqkz7Bnm.js';
 import { c as createGuid, l as loc, g as isMobile, d as handleAriaLabel, o as overrideFocus, i as isEventFromElement, j as isRelatedTargetWithinHost, k as getBrowserInfo, w as waitForNextPaint } from './index-Cps4jSQM.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
-import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-B7adb3xs.js';
+import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-DuQ7VZ08.js';
 
 const q2SelectCss = () => `*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.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{--comp-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px);padding-top:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px));padding-bottom:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px))}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);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-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-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)}`;
 
@@ -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/action-sheet-DuQ7VZ08.js

@@ -0,0 +1,65 @@
+const shouldShowActionSheet = (e, n) => {
+  var t;
+  if (!("open" in document.createElement("dialog"))) return !1;
+  if (!!!(null === (t = window.TectonElements) || void 0 === t ? void 0 : t.showActionSheet)) return !1;
+  if (n) {
+    const e = n instanceof KeyboardEvent, t = n instanceof MouseEvent, i = e && [ "ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", "Enter", " " ].includes(n.key);
+    if (!(t && "click" === n.type || i)) return !1;
+  }
+  return !!e.hoist;
+}, parseOptions = e => {
+  const n = {
+    _hideSelectedBlock: !1,
+    disabled: !1,
+    separator: !1,
+    display: "",
+    hidden: !1,
+    multiline: !1,
+    value: "",
+    innerHTML: ""
+  }, t = Object.keys(n), i = {
+    disabled: !1,
+    label: "",
+    options: []
+  }, o = Object.keys(i);
+  return e.map((e => {
+    if ("Q2-OPTGROUP" === e.tagName) {
+      const n = e;
+      return o.reduce(((t, i) => {
+        if ("options" === i) {
+          const n = Array.from(e.children).filter((e => "Q2-OPTION" === e.tagName || "Q2-OPTGROUP" === e.tagName));
+          t[i] = parseOptions(n);
+        } else t[i] = n[i];
+        return t;
+      }), {
+        ...i
+      });
+    }
+    if ("Q2-OPTION" === e.tagName || "Q2-DROPDOWN-ITEM" === e.tagName) return t.reduce(((n, t) => (void 0 !== e[t] && (n[t] = e[t]), 
+    n)), {
+      ...n
+    });
+  }));
+}, showActionSheetList = async (e, n) => {
+  var t;
+  const i = await (async (e, n) => {
+    var t;
+    return {
+      appearance: "list",
+      title: e.label || "",
+      description: "",
+      event: n,
+      listProps: {
+        multiple: !!e.optionList.multiple,
+        selectedOptions: e.optionList.selectedOptions || [],
+        noSelect: !!e.optionList.noSelect
+      },
+      options: parseOptions(await e.optionList.getContents()),
+      // static html only
+      slotsHtml: await (null === (t = e._getSlotsHtml) || void 0 === t ? void 0 : t.call(e)) || []
+    };
+  })(e, n);
+  return null === (t = window.TectonElements) || void 0 === t ? void 0 : t.showActionSheet(i);
+};
+
+export { showActionSheetList as a, shouldShowActionSheet as s }

package/dist/q2-tecton-elements/click-elsewhere_3.entry.js

@@ -8,7 +8,7 @@ import { l as a, n as h, o as p, i as c, w as l, v as d, q as m, x as u, y as b,
 
 const f = class {
   constructor(o) {
-    t(this, o), this.change = i(this, "change", 7), this.tctChange = i(this, "tctChange", 7), 
+    t(this, o), this.change = i(this, "change", 7), this.tctChange = i(this, "tctChange", 5), 
     // #region Own Properties
     this.isCurrentlyFocused = !1, 
     /**

package/dist/q2-tecton-elements/q2-action-sheet.entry.js

@@ -34,7 +34,10 @@ const l = class {
     }, this.generateOption = t => {
       const o = document.createElement("q2-option"), {innerHTML: i, ...e} = t;
       return i && (o.innerHTML = n(i)), Object.entries(e).forEach((([t, i]) => {
-        void 0 !== i && ("boolean" == typeof i ? i && o.setAttribute(t, "") : o.setAttribute(t, i));
+        if (void 0 === i) return;
+        // Convert component prop names to HTML attributes, e.g. someLongPropertyName to some-long-property-name.
+                const e = t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+        "boolean" == typeof i ? i && o.setAttribute(e, "") : o.setAttribute(e, i);
       })), o;
     }, 
     /**
@@ -225,21 +228,21 @@ const l = class {
     }
     const r = `interior is-${(null == o ? void 0 : o.appearance) || "slot"}`;
     return i("dialog", {
-      key: "90b91ed23231e01c4a77cd4c22201f736942546f",
+      key: "840635222baf3ed3f7193c550bb73675d0b466d4",
       ref: t => this.dialogElement = t,
       class: a,
       onClick: this.onClick,
       "aria-labelledby": e ? "title" : void 0
     }, i("div", {
-      key: "3a3d57295f090bec2fa4a0f4166ad47c020d02f9",
+      key: "c09338fde8ba753281162bd75714e29e6a8cc936",
       class: r
     }, e && i("header", {
-      key: "d3c5e66fc04a501b2d57bc7ebb122e192343e30d"
+      key: "d3bb667204c262a28363b71ffe6fba8209454391"
     }, i("div", {
-      key: "238957b01b452902f627aca97f590479f53886f1",
+      key: "8981cf55df99b607a49660fd6ecfe8ef827c100e",
       id: "title"
     }, (null == o ? void 0 : o.title) || this.title), !this.hideClose && i("q2-btn", {
-      key: "cede4ee6deee3587043f01df525d12a1cd900a79",
+      key: "b4d175a3e7d0382ae9e4630a4fe0f85403af5888",
       ref: t => this.closeButtonElement = t,
       class: "btn-close",
       "test-id": "btnClose",
@@ -247,12 +250,12 @@ const l = class {
       label: "tecton.element.actionSheet.close",
       "hide-label": !0
     }, i("q2-icon", {
-      key: "82e254b4b6419ea49f6647241a70f5203eb76624",
+      key: "95624ea4bcb5a9897a2b09326de718205a32e346",
       type: "close"
     }))), (null === (t = this.data) || void 0 === t ? void 0 : t.description) && i("p", {
-      key: "78efd55feaad1979d540c49e94436e9da4c03cfe"
+      key: "4f599b2645c604bde96747af50f8d7344db60e11"
     }, o.description), s && i(s, {
-      key: "fdf02d887e3366d9fdc90dcecd5717c126a10873",
+      key: "0878d252923c4c3a8b82cc89f8a88fc3bace794d",
       data: this.data
     })));
   }

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

@@ -3005,7 +3005,7 @@ const N = {
   constructor(r) {
     t(this, r), this.change = e(this, "change", 7), this.clear = e(this, "clear", 7), 
     this.formatted = e(this, "formatted", 7), this.input = e(this, "input", 7), this.invalid = e(this, "invalid", 7), 
-    this.tctChange = e(this, "tctChange", 7), this.tctClear = e(this, "tctClear", 7), 
+    this.tctChange = e(this, "tctChange", 5), this.tctClear = e(this, "tctClear", 7), 
     this.tctFormatted = e(this, "tctFormatted", 7), this.tctInput = e(this, "tctInput", 7), 
     this.tctInvalid = e(this, "tctInvalid", 7), 
     // #region Own Properties
@@ -3627,15 +3627,15 @@ const N = {
   render() {
     const {ariaControls: t, ariaExpanded: a} = this.ariaAttributes;
     return r(o, {
-      key: "5255e58159b3c614913fec22cc38f8a31d5553bb",
+      key: "877bcbc79e4891cab10a027fd4d53cab9852779e",
       role: this._role,
       "aria-controls": t,
       "aria-expanded": a
     }, r("div", {
-      key: "2dfaa5f10b49bb4ddbfe4c73467c9615559becd8",
+      key: "0150e85d50d8c69dc16a50fc900cdc78729fc6ec",
       class: this.wrapperClasses
     }, r("div", {
-      key: "7995fb27f33ebfa79ace1e7cd0e737d8bd466978",
+      key: "6fef0d2a694ef81a7967fd86365a64237ea29d96",
       class: "label-wrapper"
     }, x(this), this.renderCountDOM()), this.renderInputContainerDOM(), v(this)));
   }

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

@@ -4,7 +4,7 @@ import { c as a, d as s, o as h, i as l, b as d, l as n, w as k } from "./index-
 
 import { m as b } from "./mirror-emit-DUjY_ucm.js";
 
-import { s as v, a as p } from "./action-sheet-B7adb3xs.js";
+import { s as v, a as p } from "./action-sheet-DuQ7VZ08.js";
 
 const f = class {
   constructor(o) {

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

@@ -1,6 +1,6 @@
 import { r as t, h as o, F as e, g as i } from "./index-Cqkz7Bnm.js";
 
-import { s as n, a as s } from "./action-sheet-B7adb3xs.js";
+import { s as n, a as s } from "./action-sheet-DuQ7VZ08.js";
 
 import { o as a, i as r, w as d, b as l, d as h, l as p } from "./index-Cps4jSQM.js";
 

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

@@ -4,7 +4,7 @@ import { a, o as r, i as n, w as c, l as s } from "./index-Cps4jSQM.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 
-import { a as p, s as d } from "./action-sheet-B7adb3xs.js";
+import { a as p, s as d } from "./action-sheet-DuQ7VZ08.js";
 
 const v = class {
   constructor(i) {

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

@@ -4,7 +4,7 @@ import { c as l, l as n, g as a, d as r, o as c, i as h, j as d, k as p, w as u
 
 import { m as v } from "./mirror-emit-DUjY_ucm.js";
 
-import { s as m, a as b } from "./action-sheet-B7adb3xs.js";
+import { s as m, a as b } from "./action-sheet-DuQ7VZ08.js";
 
 const g = class {
   constructor(i) {
@@ -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.0",
+    "version": "1.71.2",
     "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.0",
+        "q2-tecton-common": "1.71.2",
         "swiper": "^12.1.2"
     },
     "devDependencies": {
@@ -85,5 +85,5 @@
         "rollup-plugin-istanbul": "^5.0.0"
     },
     "packageManager": "pnpm@10.27.0",
-    "gitHead": "71a344c4d6495bf70c23db0f492f2717e63bda91"
+    "gitHead": "7f59041ab15cbd3707d1b874babe55287419a019"
 }

package/dist/q2-tecton-elements/action-sheet-B7adb3xs.js

@@ -1,64 +0,0 @@
-const shouldShowActionSheet = (n, e) => {
-  var t;
-  if (!("open" in document.createElement("dialog"))) return !1;
-  if (!!!(null === (t = window.TectonElements) || void 0 === t ? void 0 : t.showActionSheet)) return !1;
-  if (e) {
-    const n = e instanceof KeyboardEvent, t = e instanceof MouseEvent, i = n && [ "ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", "Enter", " " ].includes(e.key);
-    if (!(t && "click" === e.type || i)) return !1;
-  }
-  return !!n.hoist;
-}, parseOptions = n => {
-  const e = {
-    disabled: !1,
-    separator: !1,
-    display: "",
-    hidden: !1,
-    multiline: !1,
-    value: "",
-    innerHTML: ""
-  }, t = Object.keys(e), i = {
-    disabled: !1,
-    label: "",
-    options: []
-  }, o = Object.keys(i);
-  return n.map((n => {
-    if ("Q2-OPTGROUP" === n.tagName) {
-      const e = n;
-      return o.reduce(((t, i) => {
-        if ("options" === i) {
-          const e = Array.from(n.children).filter((n => "Q2-OPTION" === n.tagName || "Q2-OPTGROUP" === n.tagName));
-          t[i] = parseOptions(e);
-        } else t[i] = e[i];
-        return t;
-      }), {
-        ...i
-      });
-    }
-    if ("Q2-OPTION" === n.tagName || "Q2-DROPDOWN-ITEM" === n.tagName) return t.reduce(((e, t) => (void 0 !== n[t] && (e[t] = n[t]), 
-    e)), {
-      ...e
-    });
-  }));
-}, showActionSheetList = async (n, e) => {
-  var t;
-  const i = await (async (n, e) => {
-    var t;
-    return {
-      appearance: "list",
-      title: n.label || "",
-      description: "",
-      event: e,
-      listProps: {
-        multiple: !!n.optionList.multiple,
-        selectedOptions: n.optionList.selectedOptions || [],
-        noSelect: !!n.optionList.noSelect
-      },
-      options: parseOptions(await n.optionList.getContents()),
-      // static html only
-      slotsHtml: await (null === (t = n._getSlotsHtml) || void 0 === t ? void 0 : t.call(n)) || []
-    };
-  })(n, e);
-  return null === (t = window.TectonElements) || void 0 === t ? void 0 : t.showActionSheet(i);
-};
-
-export { showActionSheetList as a, shouldShowActionSheet as s }