q2-tecton-elements 1.69.0 → 1.70.0

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 { o as n, i as r, w as l, l as a } from "./index-Cps4jSQM.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), 
@@ -68,6 +68,7 @@ const l = class {
          * results and only the selected options. Only applies to `multiple` (multi-select).
          */
     this.showSelectedToggle = !1, this.clearAll = () => {
+      this.clearSelectedDisplay();
       const {multiple: t} = this;
       this.value = "", this.selectedOptions = [], this.searchText = "", this.isShowingSelectionDisplay = !1, 
       this.showSelected = !1, 
@@ -81,9 +82,9 @@ const l = class {
         query: ""
       });
     }, this.handleSelectionChanges = t => {
-      var i, e, s, o, r, a, l;
-      const {multiple: h} = this;
-      if (h) {
+      var i, e, s, o, n;
+      const {multiple: r} = this;
+      if (r) {
         const s = (null !== (i = t.values) && void 0 !== i ? i : []).map((t => t.value)), o = null !== (e = t.value) && void 0 !== e ? e : "";
         this.selectedOptions = s, 
         // Preserve the in-progress query — the user may want to keep refining and pick more
@@ -97,16 +98,20 @@ const l = class {
         const i = null !== (s = t.value) && void 0 !== s ? s : "";
         // Re-clicking the already-selected single-select option closes the popover
         // with no state change and no `tctChange`.
-                if (i === this.value && "" !== i) 
-        // Focus before close so the focus event fires while open===true, which
-        // causes onFocus to skip openDropdown (it's already open at that point).
-        return null === (o = this.innerInputField) || void 0 === o || o.focus(), void this.closeDropdown();
+                if (i === this.value && "" !== i) {
+          const t = this.optionElements.find((t => t.value === i));
+          return this.searchText = this.optionDisplayText(t, i), this.isShowingSelectionDisplay = !0, 
+          this.checkSelectedDisplay(), 
+          // Focus before close so the focus event fires while open===true, which
+          // causes onFocus to skip openDropdown (it's already open at that point).
+          null === (o = this.innerInputField) || void 0 === o || o.focus(), void this.closeDropdown();
+        }
         this.value = i;
-        const e = this.optionElements.find((t => t.value === i)), h = (null == e ? void 0 : e.display) ? n(e.display) : null !== (a = null === (r = null == e ? void 0 : e.textContent) || void 0 === r ? void 0 : r.trim()) && void 0 !== a ? a : i;
-        this.searchText = h, this.isShowingSelectionDisplay = !0, 
+        const e = this.optionElements.find((t => t.value === i)), r = this.optionDisplayText(e, i);
+        this.searchText = r, this.isShowingSelectionDisplay = !0, this.checkSelectedDisplay(), 
         // Focus before close: the focus event fires while open===true so onFocus's
         // openDropdown call is a no-op, then closeDropdown brings us to closed+focused.
-        null === (l = this.innerInputField) || void 0 === l || l.focus(), this.closeDropdown(), 
+        null === (n = this.innerInputField) || void 0 === n || n.focus(), this.closeDropdown(), 
         this.tctChange.emit({
           value: i,
           selectedOptions: i ? [ i ] : [],
@@ -122,10 +127,11 @@ const l = class {
     }, this.inputInputHandler = t => {
       t.stopPropagation();
       const i = t.detail.value;
+      this.isShowingSelectionDisplay && this.clearSelectedDisplay(), 
       // Preserve `value` while the user types — they're searching, not deselecting.
       // `handleSelectionChanges` updates value if they pick a different option,
       // and `revertToSelectedDisplay` restores the display on blur.
-            this.searchText = i, this.isShowingSelectionDisplay = !1, this.open || this.openDropdown(), 
+      this.searchText = i, this.isShowingSelectionDisplay = !1, this.open || this.openDropdown(), 
       // Local filter applies the new query synchronously; we can announce the count now.
       // In async mode (filter=false) results land later — onLoadingChange handles the
       // 'Loading' announcement and the post-fetch count.
@@ -138,14 +144,19 @@ const l = class {
       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"]'), a = (null !== (t = null == o ? void 0 : o.assignedNodes().length) && void 0 !== t ? t : 0) > 0, l = (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, c = this.optionElements.length > 0;
-      this.hasPopoverTop !== a && (this.hasPopoverTop = a), this.hasPopoverBottom !== l && (this.hasPopoverBottom = l), 
+      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, 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), 
       // 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();
     }, this.onOptionListChange = t => {
       t.stopPropagation(), this.handleSelectionChanges(t.detail);
+    }, this.onSelectedDisplayMousedown = t => {
+      var i;
+      t.preventDefault(), t.stopPropagation(), this.isShowingSelectionDisplay = !1, this.clearSelectedDisplay(), 
+      this.value && (null === (i = this.innerInputField) || void 0 === i || i.select()), 
+      this.open || this.openDropdown();
     }, this.onViewportResize = () => {
       if (!this.open || !this.popoverAlignment) return;
       const t = this.getResolvedPopoverWidth();
@@ -170,26 +181,31 @@ const l = class {
     this.buildStructuredSelectedOptions(), this.applyMultilineOptions();
   }
   componentDidLoad() {
-    this.initMutationObserver(), r(this.hostElement), this.setCustomLabel();
+    this.initMutationObserver(), n(this.hostElement), this.setCustomLabel();
   }
   // #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 && r(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, 
-    this.isShowingSelectionDisplay && (
+        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, 
+    // Only switch away from the selection display when the user actively re-engages the
+    // field (popover is closed). During the post-selection focus that closes the popover,
+    // `open` is still true — clearing here would immediately discard the rich display.
+    this.isShowingSelectionDisplay && !this.open && (
     // Clear the flag before mutating searchText so the filter watcher runs against the
     // new query, not the stale "showing a selection" guard.
-    this.isShowingSelectionDisplay = !1, this.multiple ? 
+    this.isShowingSelectionDisplay = !1, this.clearSelectedDisplay(), this.multiple ? 
     // Multi-select always opens to a fresh search after a selection.
     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 +241,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
@@ -243,8 +259,9 @@ const l = class {
      * Emits `tctClose` as a side effect of closing the popover if it is open.
      * Does not emit `tctChange`.
      */  async reset() {
-    this.value = "", this.selectedOptions = [], this.searchText = "", this.isShowingSelectionDisplay = !1, 
-    this.showSelected = !1, this.closeDropdown(), this.tctInput.emit({
+    this.clearSelectedDisplay(), this.value = "", this.selectedOptions = [], this.searchText = "", 
+    this.isShowingSelectionDisplay = !1, this.showSelected = !1, this.closeDropdown(), 
+    this.tctInput.emit({
       query: ""
     });
   }
@@ -266,14 +283,14 @@ 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
   onLoadingChange(t) {
     // When loading turns on with the input focused but the popover was closed (because
     // input-only mode was active), open the popover so the spinner is visible.
-    t && this.inputFocused && !this.open && this.openDropdown(), t ? this.setStatusMessage(n("tecton.element.search.loading")) : this.open && this.announceResults();
+    t && this.inputFocused && !this.open && this.openDropdown(), t ? this.setStatusMessage(a("tecton.element.search.loading")) : this.open && this.announceResults();
   }
   onMultilineOptionsChange() {
     this.applyMultilineOptions();
@@ -319,6 +336,11 @@ const l = class {
     // total count (no selection display in the input to subtract from).
     this.isShowingSelectionDisplay ? e > 1 ? "+" + (e - 1) : null : `${e}`;
   }
+  get firstSelectedOptionElement() {
+    var t, i;
+    const e = this.multiple ? null === (t = this.selectedOptions) || void 0 === t ? void 0 : t[0] : this.value;
+    return e && null !== (i = this.optionElements.find((t => t.value === e))) && void 0 !== i ? i : null;
+  }
   get innerInputContainer() {
     var t, i, e;
     return null !== (e = null === (i = null === (t = this.inputField) || void 0 === t ? void 0 : t.shadowRoot) || void 0 === i ? void 0 : i.querySelector(".input-container")) && void 0 !== e ? e : null;
@@ -345,6 +367,9 @@ const l = class {
     const t = this.hostElement.querySelector("q2-option:not([hidden])"), i = t ? window.getComputedStyle(t).minHeight : null, e = i && /^([\d.]+)px$/.exec(i), s = e ? parseFloat(e[1]) : NaN, o = Number.isFinite(s) && s > 0 ? s : 44;
     return this.minRows * o;
   }
+  get selectedDisplaySlot() {
+    return this.hostElement.querySelector('[slot="_selected-display"]');
+  }
   get visibleOptionElements() {
     return this.optionElements.filter((t => !t.hidden));
   }
@@ -354,7 +379,7 @@ const l = class {
     this.inputFocused && t.push("is-focused"), t.join(" ");
   }
   announceResults() {
-    const t = this.visibleOptionElements.length, i = 0 === t ? n("tecton.element.search.noResults") : n("tecton.element.search.results", [ t ]);
+    const t = this.visibleOptionElements.length, i = 0 === t ? a("tecton.element.search.noResults") : a("tecton.element.search.results", [ t ]);
     this.setStatusMessage(i);
   }
   applyLocalFilter() {
@@ -370,12 +395,34 @@ const l = class {
     const {multilineOptions: t} = this;
     this.optionElements.forEach((i => i.multiline = t));
   }
+  checkSelectedDisplay() {
+    var t;
+    const {multilineOptions: i, isShowingSelectionDisplay: e, value: s, multiple: o, selectedOptions: n, firstSelectedOptionElement: r} = this, l = o ? !(null == n ? void 0 : n.length) : !s;
+    if (!i || !e || l) return this.clearSelectedDisplay();
+    if (!r || r.display) return this.clearSelectedDisplay();
+    const a = r.firstElementChild;
+    if (!a) return this.clearSelectedDisplay();
+    const h = a.cloneNode(!0);
+    h.querySelectorAll("[hide-on-select]").forEach((t => t.remove()));
+    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).
+    c.addEventListener("mousedown", this.onSelectedDisplayMousedown), c.appendChild(h), 
+    this.hostElement.appendChild(c)), c;
+  }
   checkSelectedOptions() {
     const {multiple: t, selectedOptions: i, value: e} = this;
     this.optionElements.forEach((s => {
       s.selected = t ? i.includes(s.value) : s.value === e;
     }));
   }
+  clearSelectedDisplay() {
+    const t = this.selectedDisplaySlot;
+    return t && (t.removeEventListener("mousedown", this.onSelectedDisplayMousedown), 
+    t.remove()), null;
+  }
   closeDropdown() {
     this.open && (this.open = !1, this.tctClose.emit());
   }
@@ -392,29 +439,33 @@ const l = class {
     this.readonly || this.disabled || this.open || this.isInputOnlyMode || (this.open = !0, 
     this.tctOpen.emit());
   }
+  optionDisplayText(t, i = "") {
+    var e, s;
+    return (null == t ? void 0 : t.display) ? a(t.display) : this.multilineOptions ? "" : null !== (s = null === (e = null == t ? void 0 : t.textContent) || void 0 === e ? void 0 : e.trim()) && void 0 !== s ? s : i;
+  }
   revertToSelectedDisplay() {
-    var t, i, e, s, o;
+    var t, i, e;
     if (this.multiple) {
       // Preserve an in-progress query — user blurred without selecting and may resume.
       if (this.searchText) return;
       // No in-progress query: show the first selection's display, paired with the badge.
-            const s = null === (t = this.selectedOptions) || void 0 === t ? void 0 : t[0];
-      if (!s) return;
-      const o = this.optionElements.find((t => t.value === s));
+            const i = null === (t = this.selectedOptions) || void 0 === t ? void 0 : t[0];
+      if (!i) return;
+      const e = this.optionElements.find((t => t.value === i));
       // No matching slotted option (typical with async-fetched options that haven't
       // re-populated yet) — leave the query alone rather than blanking it.
-            if (!o) return;
-      const r = o.display ? n(o.display) : null !== (e = null === (i = o.textContent) || void 0 === i ? void 0 : i.trim()) && void 0 !== e ? e : "";
-      return this.searchText = r, void (this.isShowingSelectionDisplay = !0);
+            if (!e) return;
+      const s = this.optionDisplayText(e);
+      return this.searchText = s, void (this.isShowingSelectionDisplay = !0);
     }
     // Single-select: if a value is set, snap the input back to its display.
     // If nothing is selected, leave any in-progress query alone.
         if (!this.value) return;
-    const r = this.optionElements.find((t => t.value === this.value));
+    const s = this.optionElements.find((t => t.value === this.value));
     // Same guard: don't clobber an in-progress query when the matching option isn't in the DOM.
-        if (!r) return;
-    const a = r.display ? n(r.display) : null !== (o = null === (s = r.textContent) || void 0 === s ? void 0 : s.trim()) && void 0 !== o ? o : "";
-    this.isShowingSelectionDisplay = !0, this.searchText !== a && (this.searchText = a);
+        if (!s) return;
+    const o = s.display ? a(s.display) : this.multilineOptions ? "" : null !== (e = null === (i = s.textContent) || void 0 === i ? void 0 : i.trim()) && void 0 !== e ? e : "";
+    this.isShowingSelectionDisplay = !0, this.searchText !== o ? this.searchText = o : this.checkSelectedDisplay();
   }
   setCustomLabel() {
     var t;
@@ -437,45 +488,51 @@ const l = class {
   }
   // #endregion
   // #region Render Methods
+  renderCustomDisplay() {
+    return this.checkSelectedDisplay() ? e("slot", {
+      name: "_selected-display",
+      slot: "custom-display"
+    }) : null;
+  }
   renderEmpty() {
     return this.hasEmptySlot ? e("slot", {
       name: "empty"
     }) : e("div", {
       class: "no-results"
-    }, n(this.noResultsMessage));
+    }, a(this.noResultsMessage));
   }
   renderMultiSelectHeader() {
     var t, i;
     if (!this.multiple || !this.showSelectedToggle) return null;
-    const s = null !== (i = null === (t = this.selectedOptions) || void 0 === t ? void 0 : t.length) && void 0 !== i ? i : 0, o = this.visibleOptionElements.length, {showSelected: r} = this;
+    const s = null !== (i = null === (t = this.selectedOptions) || void 0 === t ? void 0 : t.length) && void 0 !== i ? i : 0, o = this.visibleOptionElements.length, {showSelected: n} = this;
     return e("div", {
       class: "multi-select-header"
     }, e("fieldset", null, e("legend", {
-      "aria-label": n("tecton.element.search.multiHeader.showing")
-    }, n("tecton.element.search.multiHeader.showing")), e("div", null, e("input", {
+      "aria-label": a("tecton.element.search.multiHeader.showing")
+    }, a("tecton.element.search.multiHeader.showing")), e("div", null, e("input", {
       class: "sr",
       type: "radio",
       id: `${this.optionListId}-results`,
       name: `${this.optionListId}-view`,
       value: "results",
-      checked: !r,
-      "aria-label": n("tecton.element.search.multiHeader.resultsAriaLabel", [ o ]),
+      checked: !n,
+      "aria-label": a("tecton.element.search.multiHeader.resultsAriaLabel", [ o ]),
       onClick: this.showAllOptions
     }), e("label", {
       htmlFor: `${this.optionListId}-results`
-    }, n("tecton.element.search.multiHeader.results", [ o ]))), e("div", null, e("input", {
+    }, a("tecton.element.search.multiHeader.results", [ o ]))), e("div", null, e("input", {
       class: "sr",
       type: "radio",
       id: `${this.optionListId}-selected`,
       name: `${this.optionListId}-view`,
       value: "selected",
       disabled: 0 === s,
-      checked: r,
-      "aria-label": n("tecton.element.search.multiHeader.selectedAriaLabel", [ s ]),
+      checked: n,
+      "aria-label": a("tecton.element.search.multiHeader.selectedAriaLabel", [ s ]),
       onClick: this.showSelectedOptions
     }), e("label", {
       htmlFor: `${this.optionListId}-selected`
-    }, n("tecton.element.search.multiHeader.selected", [ s ])))));
+    }, a("tecton.element.search.multiHeader.selected", [ s ])))));
   }
   renderOptionsDropdown() {
     var t;
@@ -516,7 +573,7 @@ const l = class {
       ref: t => this.optionList = t,
       type: "listbox",
       id: this.optionListId,
-      label: n(this.listLabel),
+      label: a(this.listLabel),
       multiple: this.multiple,
       selectedOptions: this.structuredSelectedOptions,
       showSelected: this.showSelected,
@@ -539,32 +596,32 @@ const l = class {
   }
   render() {
     return e(s, {
-      key: "25d659528e22b848146b76d76f5bdb94da246d02"
+      key: "0686476c153375c6c3cca61cdeaf1267c5ca6b20"
     }, e("div", {
-      key: "6a46b01c7d9598bbf887a1c579dd500588303ad6",
+      key: "f5ed583b8da30b2222dd4a466a37e1c10b589fa7",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), e("click-elsewhere", {
-      key: "22a8cbf8de37dfe302ca63904cc8fc22841018a6",
+      key: "f1172a06706ea799f6020d21610004450e051d9a",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.onClickElsewhere
     }, e("q2-input", {
-      key: "e96361aec59e427a3a5b59d95b7c4aefd3b9d169",
+      key: "75675f105bd09279650e6aae6b869e0f3f99c270",
       ref: t => this.inputField = t,
       class: "q2-search-input",
-      label: this.label && n(this.label) || "",
+      label: this.label && a(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 ? n(this.placeholder) : void 0,
+      placeholder: this.placeholder ? a(this.placeholder) : void 0,
       hideLabel: this.hideLabel,
-      errors: Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map((t => n(t))) || this.invalid && [ "tecton.element.search.invalid" ] || [],
+      errors: Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map((t => a(t))) || this.invalid && [ "tecton.element.search.invalid" ] || [],
       ariaExpanded: this.isInputOnlyMode ? void 0 : `${this.open}`,
       ariaControls: this.isInputOnlyMode ? void 0 : this.optionListId,
       ariaHaspopup: this.isInputOnlyMode ? void 0 : "listbox",
@@ -575,7 +632,7 @@ const l = class {
       onChange: t => t.stopPropagation(),
       onTctChange: t => t.stopPropagation(),
       badgeValue: this.badgeValue
-    }), this.renderOptionsDropdown()));
+    }, this.renderCustomDisplay()), this.renderOptionsDropdown()));
   }
   get hostElement() {
     return o(this);
@@ -604,6 +661,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)))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.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/dist/q2-tecton-elements/q2-section.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, g as a } from "./index-Cqkz7Bnm.js";
 
-import { a as n, o as s, i as r, n as o, l as c } from "./index-Bx4m6N0g.js";
+import { a as n, o as s, i as r, n as o, l as c } from "./index-Cps4jSQM.js";
 
 import { m as d } from "./mirror-emit-DUjY_ucm.js";
 
@@ -188,6 +188,6 @@ const h = class {
   }
 };
 
-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}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, none);letter-spacing:var(--tct-section-title-letter-spacing, inherit)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}q2-btn{--tct-btn-icon-hover-background:var(--tct-section-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-section-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-section-btn-icon-stroke-secondary, var(--app-gray, #747474))}";
+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}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, inherit));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, none);letter-spacing:var(--tct-section-title-letter-spacing, inherit)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}q2-btn{--tct-btn-icon-hover-background:var(--tct-section-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-section-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-section-btn-icon-stroke-secondary, var(--app-gray, #747474))}";
 
 export { h as q2_section }

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

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, F as s, g as o } from "./index-Cqkz7Bnm.js";
 
-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 } from "./index-Bx4m6N0g.js";
+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 } from "./index-Cps4jSQM.js";
 
 import { m as v } from "./mirror-emit-DUjY_ucm.js";
 
@@ -71,7 +71,9 @@ const g = class {
          * Each item in this array should correspond to the value of a `q2-option` element.
          * This property is only relevant for `multiple` (i.e., multi-select) implementations.
          */
-    this.selectedOptions = [], this.addTouchEventListeners = () => {
+    this.selectedOptions = [], 
+    /** Determines whether to show a success state. The error state takes precedence when both are set. */
+    this.valid = !1, this.addTouchEventListeners = () => {
       a() && this.popoverElement && this.popoverElement.addEventListener("touchmove", this.handleTouchMove, {
         passive: !0
       });
@@ -158,6 +160,13 @@ const g = class {
     }, this.onPopoverState = ({detail: {open: t, action: e}}) => {
       t && !this.searchText || ("select" !== e && this.optionList.setActiveElement(null), 
       this.inputField.focus()), this.open !== t && (this.open = t);
+    }, this.onSelectedDisplayClick = t => {
+      // Stop click from bubbling to q2-input's onClick (which would toggle the dropdown)
+      t.stopPropagation(), this.open || (this.prioritizeSearch = this.searchable, this.clearSelectedDisplay(), 
+      this.openDropdownWithoutActiveElement()), this.focusInput();
+    }, this.onSelectedDisplayMousedown = t => {
+      // Prevent focus shift away from the hidden input
+      t.preventDefault();
     }, this.removeTouchEventListeners = () => {
       a() && this.popoverElement && this.popoverElement.removeEventListener("touchmove", this.handleTouchMove);
     }, this.showAllOptions = () => {
@@ -303,7 +312,9 @@ const g = class {
     t !== e && this.optionElements.forEach((e => e.multiline = t));
   }
   openChanged(t) {
-    t ? this.addTouchEventListeners() : this.removeTouchEventListeners(), this.scheduledAfterRender.push((async () => {
+    t ? this.addTouchEventListeners() : (this.removeTouchEventListeners(), 
+    // Reset prioritizeSearch when dropdown closes to ensure selected display can be restored
+    this.prioritizeSearch = !1), this.scheduledAfterRender.push((async () => {
       await u();
       const {popoverTopContainer: e, popoverElement: i} = this, s = t && (null == e ? void 0 : e.offsetHeight) || 0;
       s ? i.style.setProperty("--comp-popover-top-container-height", `${s}px`) : i.style.removeProperty("--comp-popover-top-container-height");
@@ -398,9 +409,11 @@ const g = class {
         const r = l.firstElementChild.cloneNode(!0);
     if (r.querySelectorAll("[hide-on-select]").forEach((t => t.remove())), t) {
       const e = 0 === t.clientHeight ? "auto" : `${t.clientHeight}px`;
-      t.style.setProperty("--comp-selected-display-height", e), t.firstElementChild.outerHTML !== r.outerHTML && t.replaceChild(r, t.firstElementChild);
-    } else t = document.createElement("div"), t.slot = "_selected-display", t.appendChild(r), 
-    this.hostElement.appendChild(t);
+      t.style.setProperty("--comp-selected-display-height", e), t.firstElementChild.outerHTML !== r.outerHTML && t.replaceChild(r, t.firstElementChild), 
+      t.removeEventListener("mousedown", this.onSelectedDisplayMousedown), t.addEventListener("mousedown", this.onSelectedDisplayMousedown), 
+      t.removeEventListener("click", this.onSelectedDisplayClick), t.addEventListener("click", this.onSelectedDisplayClick);
+    } else t = document.createElement("div"), t.slot = "_selected-display", t.addEventListener("mousedown", this.onSelectedDisplayMousedown), 
+    t.addEventListener("click", this.onSelectedDisplayClick), t.appendChild(r), this.hostElement.appendChild(t);
     return t;
   }
   checkSelectedDisplayHeight() {
@@ -419,8 +432,9 @@ const g = class {
     }));
   }
   clearSelectedDisplay() {
-    var t;
-    null === (t = this.selectedDisplaySlot) || void 0 === t || t.remove();
+    const t = this.selectedDisplaySlot;
+    t && (t.removeEventListener("mousedown", this.onSelectedDisplayMousedown), t.removeEventListener("click", this.onSelectedDisplayClick), 
+    t.remove());
   }
   clearValue() {
     const {multiple: t} = this;
@@ -538,6 +552,7 @@ const g = class {
       readonly: !!this.readonly,
       placeholder: this.placeholder || void 0,
       hideLabel: this.hideLabel,
+      valid: this.valid,
       ariaExpanded: `${this.open}`,
       ariaControls: "option-list",
       ariaHaspopup: "listbox",
@@ -602,7 +617,7 @@ const g = class {
   }
   render() {
     return i("click-elsewhere", {
-      key: "d83fb08f6af3a98edc661170f83d89af991275ec",
+      key: "a08e10cf8bd4e2d3f210d36003417f2a1dec4b21",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.clickedElsewhere
@@ -637,6 +652,6 @@ const g = class {
   }
 };
 
-g.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{--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)}.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)}";
+g.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{--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)}";
 
 export { g as q2_select }

package/dist/q2-tecton-elements/q2-stepper-pane.entry.js

@@ -2,7 +2,7 @@ import { r as t, c as e, h as i, F as s, H as a, g as n } from "./index-Cqkz7Bnm
 
 import { b as o } from "./component-DaQM9u3s.js";
 
-import { c as h, n as d, l as c } from "./index-Bx4m6N0g.js";
+import { c as h, n as d, l as c } from "./index-Cps4jSQM.js";
 
 import { m as r } from "./mirror-emit-DUjY_ucm.js";