q2-tecton-elements 1.69.0 → 1.70.0

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

@@ -1,5 +1,5 @@
 import { Fragment, h, } from "@stencil/core";
-import { loc, overrideFocus, waitForNextPaint } from "../../utils";
+import { isEventFromElement, loc, overrideFocus, waitForNextPaint } from "../../utils";
 /**
  * @name Search
  * @category Forms
@@ -83,6 +83,7 @@ export class Q2Search {
          */
         this.showSelectedToggle = false;
         this.clearAll = () => {
+            this.clearSelectedDisplay();
             const { multiple } = this;
             this.value = '';
             this.selectedOptions = [];
@@ -101,7 +102,7 @@ export class Q2Search {
             this.tctInput.emit({ query: '' });
         };
         this.handleSelectionChanges = (detail) => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e;
             const { multiple } = this;
             if (multiple) {
                 const values = (_a = detail.values) !== null && _a !== void 0 ? _a : [];
@@ -123,6 +124,10 @@ export class Q2Search {
                 // Re-clicking the already-selected single-select option closes the popover
                 // with no state change and no `tctChange`.
                 if (value === this.value && value !== '') {
+                    const reSelected = this.optionElements.find(o => o.value === value);
+                    this.searchText = this.optionDisplayText(reSelected, value);
+                    this.isShowingSelectionDisplay = true;
+                    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).
                     (_d = this.innerInputField) === null || _d === void 0 ? void 0 : _d.focus();
@@ -131,12 +136,13 @@ export class Q2Search {
                 }
                 this.value = value;
                 const selected = this.optionElements.find(o => o.value === value);
-                const display = (selected === null || selected === void 0 ? void 0 : selected.display) ? loc(selected.display) : (_f = (_e = selected === null || selected === void 0 ? void 0 : selected.textContent) === null || _e === void 0 ? void 0 : _e.trim()) !== null && _f !== void 0 ? _f : value;
+                const display = this.optionDisplayText(selected, value);
                 this.searchText = display;
                 this.isShowingSelectionDisplay = true;
+                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.
-                (_g = this.innerInputField) === null || _g === void 0 ? void 0 : _g.focus();
+                (_e = this.innerInputField) === null || _e === void 0 ? void 0 : _e.focus();
                 this.closeDropdown();
                 this.tctChange.emit({
                     value,
@@ -154,6 +160,8 @@ export class Q2Search {
         this.inputInputHandler = (event) => {
             event.stopPropagation();
             const next = event.detail.value;
+            if (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.
@@ -208,6 +216,17 @@ export class Q2Search {
             event.stopPropagation();
             this.handleSelectionChanges(event.detail);
         };
+        this.onSelectedDisplayMousedown = (event) => {
+            var _a;
+            event.preventDefault();
+            event.stopPropagation();
+            this.isShowingSelectionDisplay = false;
+            this.clearSelectedDisplay();
+            if (this.value)
+                (_a = this.innerInputField) === null || _a === void 0 ? void 0 : _a.select();
+            if (!this.open)
+                this.openDropdown();
+        };
         this.onViewportResize = () => {
             if (!this.open || !this.popoverAlignment)
                 return;
@@ -248,19 +267,27 @@ export class Q2Search {
     // #endregion
     // #region Listeners
     onFocus(event) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
+        // Delegate programmatic focus from the host to the inner input
+        if (event && isEventFromElement(event, this.hostElement)) {
+            (_a = this.innerInputField) === null || _a === void 0 ? void 0 : _a.focus();
+        }
         // Ignore focus that originates inside the popover (e.g., tabbing into a slotted
         // popover-bottom action button). Without this gate, the focus event bubbles up and
         // re-opens a just-closed popover as the user is trying to leave it.
         const path = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : [];
-        const target = ((_a = path[0]) !== null && _a !== void 0 ? _a : event === null || event === void 0 ? void 0 : event.target);
-        if (target && ((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.contains(target)))
+        const target = ((_b = path[0]) !== null && _b !== void 0 ? _b : event === null || event === void 0 ? void 0 : event.target);
+        if (target && ((_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.contains(target)))
             return;
         this.inputFocused = true;
-        if (this.isShowingSelectionDisplay) {
+        // 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.
+        if (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 = false;
+            this.clearSelectedDisplay();
             if (this.multiple) {
                 // Multi-select always opens to a fresh search after a selection.
                 this.searchText = '';
@@ -268,7 +295,7 @@ export class Q2Search {
             else if (this.value) {
                 // Single-select: pre-select the displayed text so the next keystroke replaces it
                 // — typeahead pattern used by Material Autocomplete, Headless UI Combobox, etc.
-                (_c = this.innerInputField) === null || _c === void 0 ? void 0 : _c.select();
+                (_d = this.innerInputField) === null || _d === void 0 ? void 0 : _d.select();
             }
         }
         if (!this.open)
@@ -357,6 +384,7 @@ export class Q2Search {
      * Does not emit `tctChange`.
      */
     async reset() {
+        this.clearSelectedDisplay();
         this.value = '';
         this.selectedOptions = [];
         this.searchText = '';
@@ -473,6 +501,11 @@ export class Q2Search {
             return count > 1 ? `+${count - 1}` : null;
         return `${count}`;
     }
+    get firstSelectedOptionElement() {
+        var _a, _b;
+        const v = this.multiple ? (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a[0] : this.value;
+        return v ? (_b = this.optionElements.find(o => o.value === v)) !== null && _b !== void 0 ? _b : null : null;
+    }
     get innerInputContainer() {
         var _a, _b, _c;
         return (_c = (_b = (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-container')) !== null && _c !== void 0 ? _c : null;
@@ -509,6 +542,9 @@ export class Q2Search {
         const rowHeight = Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
         return this.minRows * rowHeight;
     }
+    get selectedDisplaySlot() {
+        return this.hostElement.querySelector('[slot="_selected-display"]');
+    }
     get visibleOptionElements() {
         return this.optionElements.filter(opt => !opt.hidden);
     }
@@ -542,12 +578,50 @@ export class Q2Search {
         const { multilineOptions } = this;
         this.optionElements.forEach(option => (option.multiline = multilineOptions));
     }
+    checkSelectedDisplay() {
+        var _a;
+        const { multilineOptions, isShowingSelectionDisplay, value, multiple, selectedOptions, firstSelectedOptionElement, } = this;
+        const hasNoValue = multiple ? !(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) : !value;
+        if (!multilineOptions || !isShowingSelectionDisplay || hasNoValue)
+            return this.clearSelectedDisplay();
+        if (!firstSelectedOptionElement || firstSelectedOptionElement.display)
+            return this.clearSelectedDisplay();
+        const child = firstSelectedOptionElement.firstElementChild;
+        if (!child)
+            return this.clearSelectedDisplay();
+        const selectionClone = child.cloneNode(true);
+        selectionClone.querySelectorAll('[hide-on-select]').forEach(el => el.remove());
+        let namedSlot = this.selectedDisplaySlot;
+        if (namedSlot) {
+            if (((_a = namedSlot.firstElementChild) === null || _a === void 0 ? void 0 : _a.outerHTML) !== selectionClone.outerHTML) {
+                namedSlot.replaceChildren(selectionClone);
+            }
+        }
+        else {
+            namedSlot = document.createElement('div');
+            namedSlot.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).
+            namedSlot.addEventListener('mousedown', this.onSelectedDisplayMousedown);
+            namedSlot.appendChild(selectionClone);
+            this.hostElement.appendChild(namedSlot);
+        }
+        return namedSlot;
+    }
     checkSelectedOptions() {
         const { multiple, selectedOptions, value } = this;
         this.optionElements.forEach(option => {
             option.selected = multiple ? selectedOptions.includes(option.value) : option.value === value;
         });
     }
+    clearSelectedDisplay() {
+        const slot = this.selectedDisplaySlot;
+        if (slot) {
+            slot.removeEventListener('mousedown', this.onSelectedDisplayMousedown);
+            slot.remove();
+        }
+        return null;
+    }
     closeDropdown() {
         if (!this.open)
             return;
@@ -574,8 +648,16 @@ export class Q2Search {
         this.open = true;
         this.tctOpen.emit();
     }
+    optionDisplayText(option, fallback = '') {
+        var _a, _b;
+        if (option === null || option === void 0 ? void 0 : option.display)
+            return loc(option.display);
+        if (this.multilineOptions)
+            return '';
+        return (_b = (_a = option === null || option === void 0 ? void 0 : option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : fallback;
+    }
     revertToSelectedDisplay() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         if (this.multiple) {
             // Preserve an in-progress query — user blurred without selecting and may resume.
             if (this.searchText)
@@ -589,7 +671,7 @@ export class Q2Search {
             // re-populated yet) — leave the query alone rather than blanking it.
             if (!selected)
                 return;
-            const display = selected.display ? loc(selected.display) : (_c = (_b = selected.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+            const display = this.optionDisplayText(selected);
             this.searchText = display;
             this.isShowingSelectionDisplay = true;
             return;
@@ -602,10 +684,16 @@ export class Q2Search {
         // Same guard: don't clobber an in-progress query when the matching option isn't in the DOM.
         if (!selected)
             return;
-        const display = selected.display ? loc(selected.display) : (_e = (_d = selected.textContent) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : '';
+        const display = selected.display
+            ? loc(selected.display)
+            : this.multilineOptions
+                ? ''
+                : (_c = (_b = selected.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
         this.isShowingSelectionDisplay = true;
-        if (this.searchText === display)
+        if (this.searchText === display) {
+            this.checkSelectedDisplay();
             return;
+        }
         this.searchText = display;
     }
     setCustomLabel() {
@@ -640,6 +728,11 @@ export class Q2Search {
     }
     // #endregion
     // #region Render Methods
+    renderCustomDisplay() {
+        if (!this.checkSelectedDisplay())
+            return null;
+        return (h("slot", { name: "_selected-display", slot: "custom-display" }));
+    }
     renderEmpty() {
         if (this.hasEmptySlot) {
             return h("slot", { name: "empty" });
@@ -669,9 +762,9 @@ export class Q2Search {
         return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: (_a = this.innerInputContainer) !== null && _a !== void 0 ? _a : undefined, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, align: useBlock ? undefined : this.popoverAlignment, block: useBlock }, h("div", { class: "popover-content", "data-loading": this.loading ? 'true' : 'false', "aria-busy": this.loading ? 'true' : null }, h("div", { class: "popover-top-container", hidden: !this.hasPopoverTop && !(this.multiple && this.showSelectedToggle), tabindex: "-1" }, h("slot", { name: "popover-top" }), !this.loading && this.renderMultiSelectHeader()), h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: this.optionListId, label: loc(this.listLabel), multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, showSelected: this.showSelected, customSearch: true, hidden: this.loading, onChange: (e) => e.stopPropagation(), onTctChange: this.onOptionListChange }, h("slot", null)), showEmpty && this.renderEmpty(), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" })), this.loading && (h("div", { class: "loading-overlay", "aria-hidden": "true" }, h("q2-loading", { type: "spinner" }))))));
     }
     render() {
-        return (h(Fragment, { key: '25d659528e22b848146b76d76f5bdb94da246d02' }, h("div", { key: '6a46b01c7d9598bbf887a1c579dd500588303ad6', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '22a8cbf8de37dfe302ca63904cc8fc22841018a6', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: 'e96361aec59e427a3a5b59d95b7c4aefd3b9d169', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
+        return (h(Fragment, { key: '0686476c153375c6c3cca61cdeaf1267c5ca6b20' }, h("div", { key: 'f5ed583b8da30b2222dd4a466a37e1c10b589fa7', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: 'f1172a06706ea799f6020d21610004450e051d9a', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '75675f105bd09279650e6aae6b869e0f3f99c270', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
                 (this.invalid && ['tecton.element.search.invalid']) ||
-                [], ariaExpanded: this.isInputOnlyMode ? undefined : `${this.open}`, ariaControls: this.isInputOnlyMode ? undefined : this.optionListId, ariaHaspopup: this.isInputOnlyMode ? undefined : 'listbox', hideMessages: true, _role: this.isInputOnlyMode ? undefined : 'combobox', onTctInput: this.inputInputHandler, onInput: (e) => e.stopImmediatePropagation(), onChange: (e) => e.stopPropagation(), onTctChange: (e) => e.stopPropagation(), badgeValue: this.badgeValue }), this.renderOptionsDropdown())));
+                [], 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())));
     }
     static get is() { return "q2-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,145 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const OPTIONS = `
+    <q2-option value="1" display="Apothecary"></q2-option>
+    <q2-option value="2" display="Borant"></q2-option>
+    <q2-option value="3" display="Valtay"></q2-option>
+`;
+const ERRORS = ['This field is required.', 'The value entered is invalid.'];
+const VARIANTS = [
+    {
+        name: 'default',
+        html: '<q2-search label="Search" placeholder="Type to search"></q2-search>',
+        states: ['resting', 'focus'],
+    },
+    {
+        name: 'clearable-with-value',
+        html: `<q2-search label="Search" clearable value="1">${OPTIONS}</q2-search>`,
+        states: ['resting'],
+    },
+    {
+        name: 'optional',
+        html: '<q2-search label="Search" optional placeholder="Type to search"></q2-search>',
+        states: ['resting'],
+    },
+    {
+        name: 'readonly',
+        html: `<q2-search label="Search" readonly value="1">${OPTIONS}</q2-search>`,
+        states: ['resting'],
+    },
+    {
+        name: 'disabled',
+        html: '<q2-search label="Search" disabled placeholder="Type to search"></q2-search>',
+        states: ['resting'],
+    },
+    {
+        name: 'errored',
+        html: '<q2-search label="Search" placeholder="Type to search"></q2-search>',
+        states: ['resting'],
+        setup: 'errors',
+    },
+    {
+        name: 'expanded',
+        html: `<q2-search label="Search">${OPTIONS}</q2-search>`,
+        states: ['expanded', 'expanded-option-hover', 'expanded-option-focus'],
+    },
+    {
+        name: 'loading',
+        html: '<q2-search label="Search" loading placeholder="Type to search"></q2-search>',
+        states: ['expanded'],
+    },
+    {
+        name: 'no-results',
+        html: '<q2-search label="Search"></q2-search>',
+        states: ['expanded'],
+    },
+    {
+        name: 'multiple',
+        html: `<q2-search label="Search" multiple filter>${OPTIONS}</q2-search>`,
+        states: ['expanded', 'expanded-option-hover', 'expanded-option-focus'],
+    },
+    {
+        name: 'multiple-show-selected-toggle',
+        html: `<q2-search label="Search" multiple filter show-selected-toggle>${OPTIONS}</q2-search>`,
+        states: ['expanded'],
+        setup: 'multiple-selected',
+    },
+];
+const applySetup = async (page, setup) => {
+    if (!setup)
+        return;
+    await page.evaluate(({ setup, errors }) => {
+        const el = document.querySelector('q2-search');
+        if (setup === 'errors')
+            el.errors = errors;
+        if (setup === 'multiple-selected')
+            el.selectedOptions = ['1'];
+    }, { setup, errors: ERRORS });
+};
+const openSearch = async (page, hasOptions) => {
+    await page.evaluate(() => {
+        const el = document.querySelector('q2-search');
+        return el.openPopover();
+    });
+    if (hasOptions) {
+        await page.locator('q2-option').first().waitFor({ state: 'visible' });
+    }
+    // Wait for the popover open transition (box-shadow, opacity) to fully settle.
+    await page.waitForTimeout(300);
+};
+const setup = (page, variant, theme) => setupPage(page, variant.html, { theme, setupLoc: true }).then(() => applySetup(page, variant.setup));
+const restingCase = (variant, theme) => {
+    test(`q2-search--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setup(page, variant, theme);
+        await expect(page).toHaveScreenshot(`q2-search--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-search--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setup(page, variant, theme);
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-search--${variant.name}--focus--${theme}.png`);
+    });
+};
+const expandedCase = (variant, theme) => {
+    const hasOptions = !variant.name.includes('loading') && !variant.name.includes('no-results');
+    test(`q2-search--${variant.name}--expanded — ${theme}`, async ({ page }) => {
+        await setup(page, variant, theme);
+        await openSearch(page, hasOptions);
+        await expect(page).toHaveScreenshot(`q2-search--${variant.name}--expanded--${theme}.png`);
+    });
+};
+const expandedOptionHoverCase = (variant, theme) => {
+    test(`q2-search--${variant.name}--expanded-option-hover — ${theme}`, async ({ page }) => {
+        await setup(page, variant, theme);
+        await openSearch(page, true);
+        await page.locator('q2-option[value="1"]').hover();
+        await expect(page).toHaveScreenshot(`q2-search--${variant.name}--expanded-option-hover--${theme}.png`);
+    });
+};
+// ArrowDown after open moves focus to the first option, triggering :focus-visible.
+const expandedOptionFocusCase = (variant, theme) => {
+    test(`q2-search--${variant.name}--expanded-option-focus — ${theme}`, async ({ page }) => {
+        await setup(page, variant, theme);
+        await openSearch(page, true);
+        await page.keyboard.press('ArrowDown');
+        await expect(page).toHaveScreenshot(`q2-search--${variant.name}--expanded-option-focus--${theme}.png`);
+    });
+};
+const CASE_MAP = {
+    resting: restingCase,
+    focus: focusCase,
+    expanded: expandedCase,
+    'expanded-option-hover': expandedOptionHoverCase,
+    'expanded-option-focus': expandedOptionFocusCase,
+};
+test.describe('q2-search — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            for (const state of variant.states) {
+                CASE_MAP[state](variant, theme);
+            }
+        }
+    }
+});

package/dist/collection/components/q2-section/q2-section.css

@@ -94,7 +94,7 @@ button {
 :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)));
+  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);

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

@@ -128,8 +128,8 @@ button {
  * @prop --tct-select-margin: (<length-percentage>+) Controls the outer margin of the select host.
  * @prop --tct-select-margin-top: (<length-percentage>) Controls the top margin of the select host when --tct-select-margin is not set.
  * @prop --tct-select-margin-bottom: (<length-percentage>) Controls the bottom margin of the select host when --tct-select-margin is not set.
- * @prop --tct-select-input-min-height?: (<length-percentage>) Controls the optional minimum height of the select input.
- * @prop --tct-select-input-max-height?: (<length-percentage>) Controls the optional maximum height of the select input.
+ * @prop --tct-select-input-min-height?: (<length-percentage>) Controls the optional minimum height of the select input. Use this to control the height of the select in the empty state, especially when using multiline-options with tall content.
+ * @prop --tct-select-input-max-height?: (<length-percentage>) Controls the optional maximum height of the select input. Use this to constrain the height when displaying multiline selected content.
  * @prop --tct-select-multi-select-option-background?: (<color>) Controls the optional background color of multi-select option chips in their default state.
  * @prop --tct-select-multi-select-option-color?: (<color>) Controls the optional text color of multi-select option chips in their default state.
  * @prop --tct-select-multi-select-option-active-background: (<color>) Controls the background color of multi-select option chips when active (checked).
@@ -161,6 +161,8 @@ button {
 ::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 {

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

@@ -82,6 +82,8 @@ export class Q2Select {
          * This property is only relevant for `multiple` (i.e., multi-select) implementations.
          */
         this.selectedOptions = [];
+        /** Determines whether to show a success state. The error state takes precedence when both are set. */
+        this.valid = false;
         this.addTouchEventListeners = () => {
             if (!isMobile() || !this.popoverElement)
                 return;
@@ -271,6 +273,22 @@ export class Q2Select {
                 return;
             this.open = open;
         };
+        this.onSelectedDisplayClick = (event) => {
+            // Stop click from bubbling to q2-input's onClick (which would toggle the dropdown)
+            event.stopPropagation();
+            if (this.open) {
+                this.focusInput();
+                return;
+            }
+            this.prioritizeSearch = this.searchable;
+            this.clearSelectedDisplay();
+            this.openDropdownWithoutActiveElement();
+            this.focusInput();
+        };
+        this.onSelectedDisplayMousedown = (event) => {
+            // Prevent focus shift away from the hidden input
+            event.preventDefault();
+        };
         this.removeTouchEventListeners = () => {
             if (!isMobile() || !this.popoverElement)
                 return;
@@ -495,6 +513,8 @@ export class Q2Select {
         }
         else {
             this.removeTouchEventListeners();
+            // Reset prioritizeSearch when dropdown closes to ensure selected display can be restored
+            this.prioritizeSearch = false;
         }
         this.scheduledAfterRender.push(async () => {
             await waitForNextPaint();
@@ -657,10 +677,16 @@ export class Q2Select {
             if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {
                 namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);
             }
+            namedSlot.removeEventListener('mousedown', this.onSelectedDisplayMousedown);
+            namedSlot.addEventListener('mousedown', this.onSelectedDisplayMousedown);
+            namedSlot.removeEventListener('click', this.onSelectedDisplayClick);
+            namedSlot.addEventListener('click', this.onSelectedDisplayClick);
         }
         else {
             namedSlot = document.createElement('div');
             namedSlot.slot = '_selected-display';
+            namedSlot.addEventListener('mousedown', this.onSelectedDisplayMousedown);
+            namedSlot.addEventListener('click', this.onSelectedDisplayClick);
             namedSlot.appendChild(selectionClone);
             this.hostElement.appendChild(namedSlot);
         }
@@ -690,8 +716,12 @@ export class Q2Select {
         mirrorEmit(this, ['input', 'tctInput'], { query: '' });
     }
     clearSelectedDisplay() {
-        var _a;
-        (_a = this.selectedDisplaySlot) === null || _a === void 0 ? void 0 : _a.remove();
+        const slot = this.selectedDisplaySlot;
+        if (slot) {
+            slot.removeEventListener('mousedown', this.onSelectedDisplayMousedown);
+            slot.removeEventListener('click', this.onSelectedDisplayClick);
+            slot.remove();
+        }
     }
     clearValue() {
         const { multiple } = this;
@@ -786,7 +816,7 @@ export class Q2Select {
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
-                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: e => e.stopImmediatePropagation(), onTctInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: e => e.stopPropagation(), onTctChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.renderOptionsDropdown()));
+                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, valid: this.valid, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: e => e.stopImmediatePropagation(), onTctInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: e => e.stopPropagation(), onTctChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.renderOptionsDropdown()));
     }
     renderVisibilityToggle() {
         var _a, _b;
@@ -797,7 +827,7 @@ export class Q2Select {
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'd83fb08f6af3a98edc661170f83d89af991275ec', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (h("click-elsewhere", { key: 'a08e10cf8bd4e2d3f210d36003417f2a1dec4b21', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     static get is() { return "q2-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1227,6 +1257,26 @@ export class Q2Select {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "valid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether to show a success state. The error state takes precedence when both are set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "valid",
+                "defaultValue": "false"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,

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

@@ -44,6 +44,11 @@ const VARIANTS = [
         states: ['resting'],
         setup: 'errors',
     },
+    {
+        name: 'valid',
+        html: `<q2-select label="My select" placeholder="Select an option" valid value="2">${OPTIONS}</q2-select>`,
+        states: ['resting'],
+    },
 ];
 const applySelectSetup = async (page, setup) => {
     if (!setup)

package/dist/collection/components/q2-stepper/q2-stepper.css

@@ -275,7 +275,7 @@ li {
 }
 
 .step-label {
-  color: var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));
+  color: var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, inherit)));
   font-size: var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));
   line-height: var(--tct-stepper-label-line-height, 1.5em);
   text-overflow: ellipsis;
@@ -290,7 +290,7 @@ li {
 }
 
 .step-description {
-  color: var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
+  color: var(--tct-stepper-description-color, var(--t-stepper-description-color, inherit));
   font-size: var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));
   text-overflow: ellipsis;
   overflow: hidden;

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

@@ -1,6 +1,7 @@
 import { h, Fragment, } from "@stencil/core";
 import { loc, overrideFocus, isEventFromElement, createGuid } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
+import sanitizeHTMLString from "../../utils/sanitize-html-string";
 /**
  * @name Stepper
  * @category Display
@@ -273,14 +274,14 @@ export class Q2Stepper {
         if (isPaneDisabled)
             stepClasses.push('pane-disabled');
         const disabled = isLocked || stepNumber > lastEnabledStep;
-        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-disabled": disabled ? 'true' : undefined, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isPaneDisabled && !disabled && this.onStepClick(ev, stepNumber) }, h(Fragment, null, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), labelId && (h("div", { class: "step-label", id: labelId, innerHTML: label })), labelId && descriptionId && (h("div", { class: "step-description", id: descriptionId, innerHTML: description })))), stepIndex ? h("div", { class: "step-divider" }) : ''));
+        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-disabled": disabled ? 'true' : undefined, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isPaneDisabled && !disabled && this.onStepClick(ev, stepNumber) }, h(Fragment, null, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), labelId && (h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(label) })), labelId && descriptionId && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) })))), stepIndex ? h("div", { class: "step-divider" }) : ''));
     }
     render() {
         const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (h(Fragment, { key: 'dd38d7922ef9b468399b57f4e1d656b2213d6b32' }, h("div", { key: '92dc67bc25e5a5275241b91ec6cb968202e91af8', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'ef83e893c3dfe020cb1c561c1b0619f364c7f08f' }, h("div", { key: '9cf06f95042064daa7564a9927cf3f1ff9a227be', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'd9c58f971a8b2fd545c09e698d57baf356c3947b', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '38c601f9fe74886e912e983b9b52e7c1e1a0694e', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'a53ac3dc6ebd84e3d221136868df0861bc6acf4f', type: "chevron-left" })), h("q2-btn", { key: '38363d0a8a2d9fa96a919bf08d243ddb42d65552', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '6da3f9a38d4b1bb375b25257634058c869f9478f', type: "chevron-right" })))), h("ul", { key: '2c5e3d0e0aebd5fa05ecce735232dd42d1aec470', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '21e4f4c96ebcef94c73a29f468c820c9d4c22a57', role: "list" }, h("slot", { key: '84d871317ccc4471f1d954d469047bc6f97399cf', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: 'c1e21a36e0b2f684f4520b0f75f78affd73359bd' }, h("div", { key: '3791e857d27aa3fea928f663268f21270d499023', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '19b689b2b56f52099f22f859264e33e16fd918bf' }, h("div", { key: '5b1b1e00034fa009c555924c2067fed6369740cb', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'b5de1b413f6c8ce006207926f26ae845594228eb', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '832a97c5619cadb1167f6e1e7ecd94ab4f5f3cb1', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '3e53b2b2f19bbba59a37016b9cdf1a302b030b63', type: "chevron-left" })), h("q2-btn", { key: 'ffacbb0d2f9c15a503221a2dbc4662ba6f3c3272', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '2c60dc5392c9c9eec99dd24b229bbd1fa5e9587f', type: "chevron-right" })))), h("ul", { key: '25806a72f9f0cda2e032a81dbaac9f808be385c9', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '622b3ed56e3f66adc33bf197b7874a7b9bf8667f', role: "list" }, h("slot", { key: '73c4321743596227054e317c271bcc044179363b', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-stepper"; }
     static get encapsulation() { return "shadow"; }