q2-tecton-elements 1.71.2 → 1.72.0

package/dist/collection/components/q2-radio-group/test/q2-radio-group-test.vr.js

@@ -42,11 +42,38 @@ const VARIANTS = [
         html: `<q2-radio-group label="Hidden" name="g1" hide-label>${RADIOS}</q2-radio-group>`,
         states: ['resting'],
     },
+    {
+        name: 'horizontal',
+        html: `<q2-radio-group label="Group" name="g1" orientation="horizontal">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'horizontal-centered',
+        html: `<q2-radio-group label="Group" name="g1" orientation="horizontal" style="--tct-radio-group-horizontal-gap: 20px; --tct-radio-group-justify-content: center">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
+    {
+        name: 'horizontal-mobile',
+        html: `<q2-radio-group label="Group" name="g1" orientation="horizontal">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+        viewport: { width: 375, height: 600 },
+    },
+    {
+        name: 'vertical-with-separators',
+        html: `<q2-radio-group label="Group" name="g1" style="--tct-radio-group-separator-width: 4px; --tct-radio-min-height: 48px">${RADIOS}</q2-radio-group>`,
+        states: ['resting'],
+    },
     {
         name: 'tile-layout',
-        html: `<q2-radio-group label="Group" name="g1" tile-layout>${RADIOS}</q2-radio-group>`,
+        html: `<q2-radio-group label="Group" name="g1" tile-layout value="2">${RADIOS}</q2-radio-group>`,
         states: ['resting', 'hover', 'focus'],
     },
+    {
+        name: 'tile-layout-focus-last',
+        html: `<q2-radio-group label="Group" name="g1" tile-layout value="2">${RADIOS}</q2-radio-group>`,
+        states: ['focus'],
+        focusSteps: 2,
+    },
     {
         name: 'tile-layout-left',
         html: `<q2-radio-group label="Group" name="g1" tile-layout tile-alignment="left">${RADIOS}</q2-radio-group>`,
@@ -63,15 +90,24 @@ const VARIANTS = [
         states: ['resting'],
     },
 ];
+const waitForRadioGroup = async (page) => {
+    await page.locator('q2-radio-group[stencil-hydrated]').waitFor();
+    await expect(page.locator('q2-radio[stencil-hydrated]')).toHaveCount(3);
+    await page.evaluate(() => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))));
+};
 const restingCase = (variant, theme) => {
     test(`q2-radio-group--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        if (variant.viewport)
+            await page.setViewportSize(variant.viewport);
         await setupPage(page, variant.html, { theme });
+        await waitForRadioGroup(page);
         await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--resting--${theme}.png`);
     });
 };
 const hoverCase = (variant, theme) => {
     test(`q2-radio-group--${variant.name}--hover — ${theme}`, async ({ page }) => {
         await setupPage(page, variant.html, { theme });
+        await waitForRadioGroup(page);
         // Hover the first radio (a tile when tile-layout is active).
         await page.locator('q2-radio').first().hover();
         await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--hover--${theme}.png`);
@@ -79,8 +115,13 @@ const hoverCase = (variant, theme) => {
 };
 const focusCase = (variant, theme) => {
     test(`q2-radio-group--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        var _a;
         await setupPage(page, variant.html, { theme });
+        await waitForRadioGroup(page);
         await page.keyboard.press('Tab');
+        for (let step = 0; step < ((_a = variant.focusSteps) !== null && _a !== void 0 ? _a : 0); step++) {
+            await page.keyboard.press('ArrowRight');
+        }
         await expect(page).toHaveScreenshot(`q2-radio-group--${variant.name}--focus--${theme}.png`);
     });
 };
@@ -102,6 +143,7 @@ test.describe(`q2-radio-group — scaled font size × themes`, () => {
     for (const theme of THEMES) {
         test(`q2-radio-group--optional--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
             await setupPage(page, OPTIONAL_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await waitForRadioGroup(page);
             await expect(page).toHaveScreenshot(`q2-radio-group--optional--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
         });
     }

package/dist/collection/components/q2-relative-time/q2-relative-time.js

@@ -74,7 +74,7 @@ export class Q2RelativeTime {
             return;
         }
         const message = intlFormatDistance(new Date(dateObject), new Date(baseDateObject), {
-            locale,
+            locale: locale || document.documentElement.lang || 'en-US',
             localeMatcher: 'best fit',
             numeric: handleNumeric,
             style: messageFormat,
@@ -153,7 +153,7 @@ export class Q2RelativeTime {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: '48a6ad8165ea3380500edb280142a47e0a7a6848' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: '7bcf2e8d9cb391ea43664b9cf01ec6d474a1743e' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     static get is() { return "q2-relative-time"; }
     static get encapsulation() { return "shadow"; }

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

@@ -147,6 +147,7 @@ button {
 }
 
 /**
+ * @prop --tct-search-icon-size: (<length>) Controls the size of search input icons, including slotted icons and clear.
  * @prop --tct-search-margin?: (<length-percentage>+) Controls the margin of the component host as a shorthand. Overrides --tct-search-margin-top and --tct-search-margin-bottom when set.
  * @prop --tct-search-margin-top: (<length-percentage>) Controls the top margin of the component host.
  * @prop --tct-search-margin-bottom: (<length-percentage>) Controls the bottom margin of the component host.
@@ -187,6 +188,7 @@ button {
 }
 
 .q2-search-input {
+  --tct-input-icon-size: var(--tct-search-icon-size, var(--const-px-18, 18px));
   margin: 0;
   --tct-input-min-height: var(--tct-search-input-min-height, initial);
   --tct-input-max-height: var(--tct-search-input-max-height, none);

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

@@ -104,6 +104,7 @@ button {
  * @prop --tct-section-header-min-height: (<length>) Controls the minimum height of the section header when a header is present.
  * @prop --tct-section-title-margin?: (<length-percentage>+) Controls the optional outer margin of the section title.
  * @prop --tct-section-title-font-size: (<length-percentage>) Controls the font size of the section title.
+ * @prop --tct-section-icon-size: (<length>) Controls the size of the section expand/collapse icon.
  * @prop --tct-section-title-font-weight: (<number>) Controls the font weight of the section title.
  * @prop --tct-section-title-text-transform?: (<custom-ident>) Controls the optional text transform of the section title.
  * @prop --tct-section-title-letter-spacing?: (<length>) Controls the optional letter spacing of the section title.
@@ -182,6 +183,7 @@ header.has-header {
 }
 
 q2-icon {
+  --tct-icon-size: var(--tct-section-icon-size, var(--const-px-18, 18px));
   transition: transform var(--comp-tween);
 }
 :host(:not([expanded])) q2-icon, :host([expanded=false]) q2-icon {

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

@@ -1,5 +1,5 @@
 import { h, } from "@stencil/core";
-import { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from "../../utils/index";
+import { hasSlotContent, isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
 /**
  * @name Section
@@ -40,9 +40,9 @@ export class Q2Section {
             });
         };
         this.onHeaderSlotChange = () => {
-            const hasSlotContent = !!this.hostElement.querySelector('[slot="q2-section-header"]');
-            if (this.hasYieldedHeader !== hasSlotContent) {
-                this.hasYieldedHeader = !!hasSlotContent;
+            const hasHeader = hasSlotContent(this.hostElement, 'q2-section-header');
+            if (this.hasYieldedHeader !== hasHeader) {
+                this.hasYieldedHeader = hasHeader;
             }
         };
         this.onTransitionEnd = () => {
@@ -186,9 +186,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '5dbed551d8571ef48b81fe7fc40b0c56db2d685a', class: "wrapper" }, h("header", { key: 'dfc3bc20a49856a2fcdee6b5cae1626e32ff5416', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'b9073b701f1006f8048cac33b4cae9e44888c8e2', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'd701205c1808c6eaf2b7f3739c7488d934cf1cc0', class: "title" }, loc(this.label)), h("div", { key: '5428fcecafd6e84a884783c0cc1223cb91160f69', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'f7d873afc6f319c259e11db10e7cf2d3010ca3c6', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '6143342070b00156a36db039dee5e19a1a6cbe2f', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '297304e09f1b60c2a3e4d8146ff7b75f14d64e5c', type: "chevron-up" })))), h("div", { key: '3a78d8a8ffde28f5e006fd988f6d01463758c4c1', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '1614590b2058a69ebaee5a59455ec5c8bfa30bde', class: "wrapper" }, h("header", { key: 'e52e3037b59ac3443e812299114850dd6ed8810b', class: hasHeader ? 'has-header' : '' }, h("div", { key: '2066c8ff48cb4c6445068207533b3b6b808e9dd7', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'a159d8b6bc29e10711b603aef2ce6c1419f4b7ae', class: "title" }, loc(this.label)), h("div", { key: '829f24123711551a6e3792cb66a2759386d6bec8', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '22c2518c55bf5f6160917beea8ab2c523bf76169', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '950c09ccfad31453393a52cd21321338d53ac03b', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: 'a962ea4f0f5c0ba761d3c3eafd31a16f0338c8da', type: "chevron-up" })))), h("div", { key: '45a1762386b7bf88fcaa50c18c1ac059b93d2e59', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '0c7019101641ae7d05772a9ec4e8c16ca40e1112', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '49a17e0cd8279255eec0dc2d7344dc0fa260dc46', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '80508c39608fa4bf3d6f1911ff592f04e5115014', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'c88062ea0a59b62143e22c8492a8d06826a27a83', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -147,6 +147,7 @@ button {
 }
 
 /**
+ * @prop --tct-select-icon-size: (<length>) Controls the size of the select chevron and clear icons.
  * @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.
@@ -176,6 +177,8 @@ button {
 
 .q2-select-input {
   margin: 0;
+  letter-spacing: inherit;
+  --tct-input-icon-size: var(--tct-select-icon-size, var(--const-px-18, 18px));
   --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));
 }

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

@@ -17,6 +17,7 @@ export class Q2Select {
         this.guid = createGuid();
         this.isOrientationUpdate = false;
         this.lastTouchWasInPopover = false;
+        this.removingSelectedDisplay = false;
         this.scheduledAfterRender = [];
         // #endregion
         // #region State Properties
@@ -75,7 +76,12 @@ export class Q2Select {
          * Takes priority over `optional` if both are `true`.
          */
         this.readonly = false;
-        /** Enables search functionality. */
+        /**
+         * Enables search functionality.
+         * @warning
+         * `searchable` is not compatible with the `hoist` prop. The action sheet workflow used when `hoist` is `true` does not support in-list search filtering.
+         * If both are set, `searchable` has no effect while the action sheet is active.
+         */
         this.searchable = false;
         /**
          * Each item in this array should correspond to the value of a `q2-option` element.
@@ -183,9 +189,6 @@ export class Q2Select {
         this.inputInputHandler = (event) => {
             event.stopPropagation();
             const eventValue = event.detail.value;
-            const shouldClearValue = !!this.value;
-            if (shouldClearValue)
-                this.clearValue();
             if (!this.open)
                 this.openDropdownWithoutActiveElement();
             this.prioritizeSearch = true;
@@ -202,6 +205,8 @@ export class Q2Select {
                 return;
             // slots are incompatible with action sheet
             if (shouldShowActionSheet(this, event) && !hasSlot) {
+                event.preventDefault();
+                event.stopPropagation();
                 return this.executeActionSheet(event);
             }
             const keysForOptionListToHandle = [
@@ -274,16 +279,16 @@ export class Q2Select {
             this.open = open;
         };
         this.onSelectedDisplayClick = (event) => {
+            var _a, _b;
             // Stop click from bubbling to q2-input's onClick (which would toggle the dropdown)
             event.stopPropagation();
             if (this.open) {
-                this.focusInput();
+                (_a = this.innerInputField) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
             }
+            (_b = this.innerInputField) === null || _b === void 0 ? void 0 : _b.focus();
             this.prioritizeSearch = this.searchable;
-            this.clearSelectedDisplay();
             this.openDropdownWithoutActiveElement();
-            this.focusInput();
         };
         this.onSelectedDisplayMousedown = (event) => {
             // Prevent focus shift away from the hidden input
@@ -374,20 +379,27 @@ export class Q2Select {
         }
     }
     delegateFocus(event) {
-        var _a;
+        var _a, _b;
         // Always delegate focus from host to inner input (fixes programmatic focus)
         if (isEventFromElement(event, this.hostElement)) {
             (_a = this.innerInputField) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        // Manage display state for searchable selects (preserves existing behavior)
-        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);
-        this.prioritizeSearch = fromHost && this.searchable;
+        const fromOutside = isRelatedTargetWithinHost(event, this.hostElement);
+        const hasRobustSelectedDisplay = !!this.selectedDisplaySlot ||
+            (this.multilineOptions && !!this.firstSelectedOptionElement && !this.firstSelectedOptionElement.display);
+        this.prioritizeSearch = fromOutside && this.searchable && (this.multiple || hasRobustSelectedDisplay);
         if (this.prioritizeSearch) {
             this.clearSelectedDisplay();
         }
+        else if (fromOutside && this.searchable && !!this.value) {
+            (_b = this.innerInputField) === null || _b === void 0 ? void 0 : _b.select();
+        }
     }
     handleFocusout(event) {
         var _a;
+        // Removing the robust display while opening search can emit a focusout without a destination.
+        if (!event.relatedTarget && (this.removingSelectedDisplay || (this.open && this.prioritizeSearch)))
+            return;
         const relatedTarget = event.relatedTarget;
         const isLeavingHost = !((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) && !this.hostElement.contains(relatedTarget);
         if (isLeavingHost)
@@ -509,14 +521,14 @@ export class Q2Select {
             return;
         this.optionElements.forEach(element => (element.multiline = newValue));
     }
-    openChanged(isOpen) {
+    openChanged(isOpen, wasOpen) {
         if (isOpen) {
             this.addTouchEventListeners();
         }
         else {
             this.removeTouchEventListeners();
-            // Reset prioritizeSearch when dropdown closes to ensure selected display can be restored
-            this.prioritizeSearch = false;
+            if (wasOpen)
+                this.prioritizeSearch = false;
         }
         this.scheduledAfterRender.push(async () => {
             await waitForNextPaint();
@@ -722,7 +734,9 @@ export class Q2Select {
         if (slot) {
             slot.removeEventListener('mousedown', this.onSelectedDisplayMousedown);
             slot.removeEventListener('click', this.onSelectedDisplayClick);
+            this.removingSelectedDisplay = true;
             slot.remove();
+            setTimeout(() => (this.removingSelectedDisplay = false), 0);
         }
     }
     clearValue() {
@@ -813,13 +827,15 @@ export class Q2Select {
         return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popDirection, mode: this.popoverMode || undefined, block: true }, h("div", { class: "popover-content" }, h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: e => e.stopPropagation(), onTctChange: this.onOptionListChange }, h("slot", null)), h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, h("slot", { name: "popover-top" }), this.multiple && this.renderVisibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));
     }
     renderSelectField() {
-        var _a;
+        var _a, _b;
         return (h(Fragment, null, h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (!this.disabled && this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) ||
                 undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
-                [], 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()));
+                [], 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, _ariaDescription: this.multiple && ((_b = this.selectedOptions) === null || _b === void 0 ? void 0 : _b.length)
+                ? loc('tecton.element.select.selectionCount', [this.selectedOptions.length])
+                : 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;
@@ -830,7 +846,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: 'edb9951db5493781ee1f5da0ed5f6c03aff107e9', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (h("click-elsewhere", { key: '5c9a6d681aedcebfbadd6b1249f7bcd96c27809c', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     static get is() { return "q2-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1233,7 +1249,10 @@ export class Q2Select {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "warning",
+                            "text": "`searchable` is not compatible with the `hoist` prop. The action sheet workflow used when `hoist` is `true` does not support in-list search filtering.\nIf both are set, `searchable` has no effect while the action sheet is active."
+                        }],
                     "text": "Enables search functionality."
                 },
                 "getter": false,

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

@@ -18,6 +18,19 @@ const VARIANTS = [
         html: `<q2-select label="My select" placeholder="Select an option">${OPTIONS}</q2-select>`,
         states: ['resting', 'focus', 'expanded-option-hover', 'expanded-option-focus'],
     },
+    {
+        name: 'letter-spacing-override',
+        html: `<style>
+                q2-select {
+                    --tct-input-label-letter-spacing: initial;
+                    letter-spacing: 0.12em !important;
+                }
+            </style>
+            <div style="width: 220px">
+                <q2-select label="Account funding source selection" placeholder="Select an option">${OPTIONS}</q2-select>
+            </div>`,
+        states: ['resting'],
+    },
     {
         name: 'multiple',
         html: `<q2-select label="My select" placeholder="Select an option" multiple>${OPTIONS}</q2-select>`,

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

@@ -73,7 +73,7 @@ export class Q2StepperPane {
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (h(Host, { key: '7acf643f717380c37eb25334534afbca81ac8ab6', role: "listitem" }, h(Fragment, { key: '0241a9ad68973eea81c961070d6171dab3241f79' }, h("div", { key: '25e9a406b8c0672eec836920706d44ed53906e1d', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '00f456ab21d2ecf58946de5df397bb3c81c2a749' })), h("div", { key: 'bdac4c2caf9b9bf5a6280258475afa552e578e7e', hidden: true }, h("slot", { key: '2ede75ad70c10eda1f8c6de4556bccc9c66e8b97', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: '990f2d44a0f9cb0437b63f3570a94874752a94da', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '1f12d65608f73a3737abb7f987cab300ec1c9856', name: "children" }))));
+        return (h(Host, { key: '7acf643f717380c37eb25334534afbca81ac8ab6', role: "listitem" }, h(Fragment, { key: '0241a9ad68973eea81c961070d6171dab3241f79' }, h("div", { key: '6678cb4a7e65a3a4341ff552682c1011c588108b', role: "group", "aria-labelledby": "pane-label", tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '0f8d339f894bdaa55bd5bdf94b1220da7a083dde' })), h("div", { key: '51e3934ad791e45486360ab8c6509b68e3a15d9d', hidden: true }, h("span", { key: '96fe08c826d87f86559fe2dbb586914b4065eb40', id: "pane-label" }, h("slot", { key: 'b4cab1594ae047f032fbaa67f75167e31cc4cdf7', name: "label", onSlotchange: () => this.contentChange.emit() }, label && loc(label))), h("slot", { key: '473cf6b9bc3ef5995d11e46502db1321d59baa5e', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '76cb24680ed1ec8a49956f888accf3fd07da7fa0', name: "children" }))));
     }
     static get is() { return "q2-stepper-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -325,7 +325,7 @@ export class Q2StepperVertical {
         return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelledBy, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, label && (h(Fragment, null, h("span", { class: "sr-only", id: positionId }, positionLabel), h("span", { class: "sr-only", id: statusId }, statusLabel))), statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { "aria-hidden": "true", type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(stepLabel) }), description && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) }))))), this.renderSpacer(pane, isExpanded, isLastStep)));
     }
     render() {
-        return (h(Fragment, { key: 'eab8d8816aebfb5aa104a17b75dc0e8b4ed4ce68' }, h("ul", { key: 'f155624641313e8375e6ee448fed150ae0c62cf1', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '1ff078e00dcb1e4c861bc691ccc31ec5c1436fac', role: "list" }, h("slot", { key: 'adf07ae0725ccc7c1ce149052f2325e6bfc01677' }))));
+        return (h(Fragment, { key: '9d40414e7b510493b0236568c4d6231eeacdbd80' }, h("ul", { key: 'b3a444833439d59be874a2bf04833f8df0ff107f', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '34f3841d0eb0c5fe96670ac3d5e87244682ace74', role: "list" }, h("slot", { key: 'e224e413162cb28eab4ec0e8b51367ed3b83fa0b' }))));
     }
     static get is() { return "q2-stepper-vertical"; }
     static get encapsulation() { return "shadow"; }

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

@@ -84,7 +84,7 @@ export class Q2Surface {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '992667ac1d625dff77a01d06d058865f99d8d190' }, h("div", { key: 'd58162c346c58a2cc21a4334c08b6cc4a53ed2e0', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: 'b70930390799484c71da93d1f801ecc681d168c6' }))));
+        return (h(Host, { key: '8dd96991bc74e2157dc256f21eb4953eaeffdd46' }, h("div", { key: 'a5b315fd3e6dd999cd704b3fd2c9de5ffb139033', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: '4897bfe06a95bf14eddf2bb964bf4a27ed96798a' }))));
     }
     static get is() { return "q2-surface"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tab-container/q2-tab-container.js

@@ -335,7 +335,7 @@ export class Q2TabContainer {
     }
     render() {
         const isVertical = this.computedOrientation === 'vertical';
-        return (h(Fragment, { key: '710b889bd81a28f6ba7c0deb43abe49a269baec4' }, h("div", { key: '444efee6412d2440c99bd1e9b123fe385f2453a5', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '56c9916fb99dd3434a8305721d03e85c0f5fb370' }, h("div", { key: 'c506eb6690b60194b50171ad5139cc65b4fabedd', class: "gradient-left", hidden: !this.showScrollBack }), h("div", { key: '7af01eb18190e0af6fb80364fb73dcf6145d979d', class: "gradient-right", hidden: !this.showScrollForward }), h("q2-btn", { key: '8cb5f49e48c119d32b196e3ecc7e8a018acc7aa0', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, h("q2-icon", { key: '65f3caea2251c7ce96861718df064f230ec6e02e', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), h("q2-btn", { key: '07b833fe0e6b3030255374e4dd323fc99379a293', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, h("q2-icon", { key: 'e446b55822239e657ab10c50694a9756ec8b030b', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), h("ul", { key: '20d4f371b80b2515b762e80b88574938783e9252', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist", "aria-orientation": this.computedOrientation }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '9eaba5d408629dc548a9c57428b801293f642172', class: "tab-content" }, h("slot", { key: '811737fa0e22c994299c9164a6401209e6ecf418', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '684e234955e0d7f9b929a1e80e323ba62db4d066' }, h("div", { key: '92ea060ada2cc956817f4eb9cb97d0f110c5032a', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'b43a4ff0510de5adfefde8f5184ab5f3f1d95563' }, h("div", { key: '3daed974f567574741534b4c39c6fa0ddb1c7f58', class: "gradient-left", hidden: !this.showScrollBack }), h("div", { key: '36266d6970a75fff03e538c12951a530220b2756', class: "gradient-right", hidden: !this.showScrollForward }), h("q2-btn", { key: '7c5b35fee0bbd981520f55fe99fc53143be7376c', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, h("q2-icon", { key: '0759d5d77d603074acc21bd9a29e4db50f0474a2', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), h("q2-btn", { key: '419c43832886d9aae9b63eba545ffb8122f862b6', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, h("q2-icon", { key: '4148a86411c5859b0253da31439ff90ad78490b3', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), h("ul", { key: 'fdd72d9ba1d932497b5d7cd9e14d926fe1e92f72', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist", "aria-orientation": this.computedOrientation }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: 'e9d90030fcc43f17a43aa2e4a306e3489b4c4110', class: "tab-content" }, h("slot", { key: '130ddf5f14ec801e09471b9cf4ab080e4bf5fc27', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-tab-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tab-pane/q2-tab-pane.js

@@ -19,7 +19,7 @@ export class Q2TabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '1957cbeca0ca1f0b5f840701286ebeb6b69565ce', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '6772ac75d219ebc30209907468a9fb801cd5db0d' })));
+        return (h("div", { key: '2ff20db182ab3bf252df52bbcb7be2b39893d17c', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '871922c3065609934e6a6a8c62000c84551a612a' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -194,7 +194,7 @@ export class Q2Tag {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: 'b7b199109ef756942f6cf76aff904a21ba406998' }, h("click-elsewhere", { key: 'f4a5ec911c582d480e5d7d91638d681ba6c054c8', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '046a9aae077ed9800b081ce70aa5d03f0d919cff', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '63899f97a13db69ed8776214ca6670e825663c5a', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '40fa7c27a8b27ae2c5f894bbe1ae6e51ab1b55f0' })))))));
+        return (h(Host, { key: 'da6dc23ff4f250b18242a49db02eccc16210b043' }, h("click-elsewhere", { key: 'ee1da442ffd5aa53e55ae95f95b3ac51e2f5c71e', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '578989b60b19f6f5e01c1cbc49a83e87fc74c5a9', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'd21abcd1fe11241e14b4f411d9559c12c139c18a', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'd46ec7dad47e40cec883205d6fb2424abcdd1038' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js

@@ -17,7 +17,9 @@ export class TectonTabPane {
         const loadingWrapper = this.hostElement.shadowRoot.querySelector('.loading-wrapper');
         /* istanbul ignore next */
         if (loadingWrapper) {
-            loadingWrapper.style.minHeight = this.minHeight;
+            if (loadingWrapper.querySelector('.q2-row')) {
+                loadingWrapper.style.minHeight = this.minHeight;
+            }
             loadingWrapper.hidden = !this.selected;
         }
     }
@@ -49,9 +51,9 @@ export class TectonTabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '68c7250777ec0c700107df4997634d4aee8f8e91', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: '7b8c74b691fc1c599766900125e09afe79e53859' }, h("slot", { key: 'bbf7c58bef21ab334059655e958e976b9bdf327e', name: "loading-wrapper" }), h("iframe", { key: '6a262f757dd78294fcf49242b337b02c13842ee8', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (h("div", { key: '6c0524ab1981900cc7a37803fd9426c6397049c4', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: '10cc2712e1ccefa6a9bb3b657830636da4d81980' }, h("slot", { key: 'cde7112d4035c6f118e9c50b0fe5d9d91c70ee7d', name: "loading-wrapper" }), h("iframe", { key: '851972991feb3b8f6c7f569e92ff2e624d94e221', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), h("div", { key: 'd9be64623c99011b7f30256d0abfaeab23f72c00', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: 'a1a3a9772b2875c7d4ab510e9014d99b6e036ad3' }))));
+        }))) : (''))), h("div", { key: '741c6f2c89dc15493f165428929f589425aa4d75', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '17100ec2dc0ea2d1e27628d36e9e6e1139f293a9' }))));
     }
     static get is() { return "tecton-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/index.js

@@ -244,7 +244,7 @@ export function renderLabel(target) {
     return (h("label", { htmlFor: target.inputId, class: labelClasses.join(' ') }, h("slot", { name: "label" }, label ? loc(label) : undefined, helpText)));
 }
 export function hasSlotContent(target, slotName) {
-    return target.querySelector(`[slot="${slotName}"]`) !== null;
+    return Array.from(target.children).some(child => child.getAttribute('slot') === slotName);
 }
 export function handleAriaLabel(target) {
     const { ariaLabel } = target;

package/dist/collection/utils/test/vr-helpers.js

@@ -40,6 +40,7 @@ const getDefaultEnStrings = () => {
 const BASE_THEME_CSS_CONTENT = readFileSync(join(__dirname, '../../../', BASE_THEME_CSS), 'utf8');
 const UTILITIES_CSS_CONTENT = readFileSync(join(__dirname, '../../../', UTILITIES_CSS), 'utf8');
 export const setupPage = async (page, content, options = {}) => {
+    var _a;
     // Bootstrap localization BEFORE setContent so that any Stencil class-field initializers
     // that call loc() (e.g., q2-select's `listLabel: string = loc('tecton.element.select.listLabel')`)
     // see the shim during hydration. addInitScript runs on every new document before any page script.
@@ -92,15 +93,24 @@ export const setupPage = async (page, content, options = {}) => {
             };
         }, mergedStrings);
     }
-    await page.setContent(content);
+    // Inject --t-prefers-motion before any element is parsed so the @container style()
+    // query in host.scss matches from the very first component render, preventing the
+    // race where Stencil's microtask-scheduled render fires before the CSS variable is
+    // set and 0.4s transitions start at full speed.
+    const motion = (_a = options.motion) !== null && _a !== void 0 ? _a : 'reduced';
+    await page.setContent(`<style>body{--t-prefers-motion:"${motion}"!important}</style>${content}`);
     // `data-tecton-module` gates the rules in q2-tecton-utilities.css (focus rings,
     // normalize, etc.). Match the preview page's <body data-tecton-module>.
-    await page.evaluate(() => document.body.setAttribute('data-tecton-module', ''));
+    await page.evaluate(() => {
+        document.body.setAttribute('data-tecton-module', '');
+    });
     // Mirror q2-tecton-sdk's insertDefaultThemeTag: prepend theme + utilities to
     // <head> so they sit BEFORE the component-injected <style> tags Stencil emits.
     // addStyleTag would append, placing utilities last in the cascade — its
     // [data-tecton-module] *:focus-visible rule ties on specificity with component
     // focus rules, so document order decides, and appending makes utilities win.
+    // These arrive after Stencil's first render (evaluate runs in a new browser task),
+    // but the re-render is fast and the cascade position is what matters.
     await page.evaluate(({ baseTheme, utilities }) => {
         const head = document.head;
         const firstChild = head.firstChild;
@@ -121,4 +131,8 @@ export const setupPage = async (page, content, options = {}) => {
         });
     }
     await page.locator('[stencil-hydrated]').first().waitFor();
+    // Two rAFs after hydration: frame 1 lets microtask-batched nested renders finish
+    // (q2-btn inside q2-input/q2-calendar, q2-pill inside q2-list); frame 2 ensures
+    // the layout from those nested renders is committed before the screenshot.
+    await page.evaluate(() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
 };

package/dist/components/index2.js

@@ -170,7 +170,7 @@ function renderLabel(n) {
 }
 
 function hasSlotContent(e, n) {
-  return null !== e.querySelector(`[slot="${n}"]`);
+  return Array.from(e.children).some((e => e.getAttribute("slot") === n));
 }
 
 function handleAriaLabel(e) {