q2-tecton-elements 1.71.4 → 1.73.0

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)
@@ -398,8 +410,12 @@ export class Q2Select {
         this.inputKeydownHandler(event);
     }
     popoverStateChanged({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        if (this.open === open)
+            return;
+        this.open = open;
+        if (open)
+            return;
+        this.focusInput();
     }
     handleTctClick() {
         const { name, version } = getBrowserInfo();
@@ -509,14 +525,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 +738,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 +831,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 +850,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: 'c5ee7401b7dc4350fb01992e9a8a76e6700cb63c', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     static get is() { return "q2-select"; }
     static get encapsulation() { return "shadow"; }
@@ -940,9 +960,9 @@ export class Q2Select {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "Only use when a visible label is impractical."
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
                         }],
-                    "text": "Hide's the field's `<label>` element from view."
+                    "text": "Hides the field's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -1003,6 +1023,9 @@ export class Q2Select {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }, {
                             "name": "localizable",
                             "text": undefined
                         }],
@@ -1233,7 +1256,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/q2-stepper.js

@@ -295,7 +295,7 @@ export class Q2Stepper {
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (h(Fragment, { key: 'cd7a09546e4b74cf98f5e27dbcf0efce71e02781' }, h("div", { key: 'aaa383584217da20fdd01174f4b136dfef0128b7', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '6f7f38d768b274409606132cc62d36d48812f50c' }, h("div", { key: '98e26550803496a0edd0e7415b4ec9e16b501722', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '58102ecd26dd3f6b36d530f36ecc109b287b4faa', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: 'a475ba4a846ea5cf93a5ca46422a5473e0d266bd', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'b040f724a926e5c07a81438e3586e0eb7a3c063b', type: "chevron-left" })), h("q2-btn", { key: '119dbcd49ce282cbccd58be097f8833e22df4fb4', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'c656a9493134eb6a4ea0a008ee94829fc708ecfe', type: "chevron-right" })))), h("ul", { key: '09e1472989c7c2e6c40504072bca2790865e013a', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '0b25c172d585892aa9e286dac6080ce2bbb80e1a', role: "list" }, h("slot", { key: '507375368c8e89a94f8af0a44bf4951fd14d7466', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: 'c9839ff458e2d71fb66c42cb5b4ae394c7ffb9ff' }, h("div", { key: '51d8a914662c2794e16928c971ef995bca933776', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '0b1d1dd0c973d2266a468a8f81d0c9bdd2a430cc' }, h("div", { key: '87b9ae7e5ab260ee8743e78302017389941c3ead', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'a5d487517c497ae927a1fd05d7c4631aa00d76bf', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: 'fe008283e673c2b51acf1cc654ed1c844a6d33bf', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '7d83dfafb861da55085fa33a4aca620416849e27', type: "chevron-left" })), h("q2-btn", { key: 'c81adb720c387ddabb7eead010db863b0e295208', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'c0d5939662d35c18ea9c486a1dc8da243b779ea2', type: "chevron-right" })))), h("ul", { key: '07501b7abbe4e828686b87c057b79bae4059e826', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: 'df8d51e7b40ee1999b0a280fa8524559accfec9a', role: "list" }, h("slot", { key: 'a8ce54b65b8c7d8542e60811a7215fed12400e38', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-stepper"; }
     static get encapsulation() { return "shadow"; }

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: '6cbcc9f6363bf6f60ff2d999b9317e32691168da', role: "listitem" }, h(Fragment, { key: 'f9b8d56b05e6d26978feab6386849498f797cca6' }, h("div", { key: '383a77ce1848255574680375e7df122bf4468f95', role: "group", "aria-labelledby": "pane-label", tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '9b9cf0bd60e23d9860174c5525c3f688c70411f4' })), h("div", { key: '8f628fe11acfc7a8df7c84013a7eaca9d5a1327a', hidden: true }, h("span", { key: '6c03721fb71d8e3c5c48a6af80ae8723575e0205', id: "pane-label" }, h("slot", { key: 'da9a253e3399d0552478a29c743fc4a73f432ddf', name: "label", onSlotchange: () => this.contentChange.emit() }, label && loc(label))), h("slot", { key: 'd7229f76aedb1c96623fac655982b88d2769b9ae', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '7670d7b17b74732d0dd14198dd50560d005700d1', 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: '318ce778645240cfb969f39c7df5326691b6c5ed' }, h("ul", { key: '3af2a138e648b887b3d8f96cf2b06bb6f11d1159', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '628d3fb7485c7648d31b7a4935476a61cdfef7b4', role: "list" }, h("slot", { key: '9d616d4a7234dee7715a696d0a17d37914741b1a' }))));
     }
     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: 'ee34e7472208140fc2203e0494140778c0c16756' }, h("div", { key: '0909c642dd27cbc96f7a8ea25f5d7f712395ed19', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: 'fbba5735e98b065121f0b73ef926b6546aeab82c' }))));
     }
     static get is() { return "q2-surface"; }
     static get encapsulation() { return "shadow"; }

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

@@ -105,8 +105,8 @@ const VARIANTS = [
         html: `<q2-surface border="default" inset="normal" radius="2">
             <p>Body copy above the action group.</p>
             <q2-action-group>
-                <q2-btn intent="workflow-primary">Confirm</q2-btn>
-                <q2-btn intent="workflow-secondary">Cancel</q2-btn>
+                <q2-btn intent="primary">Confirm</q2-btn>
+                <q2-btn intent="secondary">Cancel</q2-btn>
             </q2-action-group>
         </q2-surface>`,
         states: ['resting'],

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: '03d43399332adeda98bb8d9e20053a9c6d49fcce' }, h("div", { key: 'e0a8ef7f09a83f703a4b20f54c32522ddb1c5c50', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'ad75ef49a54bfe0f862e19123e2a4770e17bf4a2' }, h("div", { key: '0a699d7dff2af9e01eb0c9a4727c0aa586068d97', class: "gradient-left", hidden: !this.showScrollBack }), h("div", { key: '758388b43d96757cd402eac4c8c881b20853e8d2', class: "gradient-right", hidden: !this.showScrollForward }), h("q2-btn", { key: '0738c515ffc60c9fb82941ce1cb104924c3a85ef', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, h("q2-icon", { key: '95820c6bad13d98ad94e4722026b00e1fedb720e', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), h("q2-btn", { key: '2aabca6f28a8acffd6565870b56424c410f4ebae', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, h("q2-icon", { key: '94561888012314b3e3503c7f0b64444f3a7b7c96', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), h("ul", { key: 'd58936a795d74807740d291b93bb739d66fbbe24', 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: 'ccd952b3f0ef0e639e0f86957841ad548fe65eb5', class: "tab-content" }, h("slot", { key: '24deecd3894184e816d1d8c5e5257aab382ed055', 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: 'a1ca82c1b98634b33d0ded7c459e151bbcba82ab', 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: '4893e7153f387cfa726ba354cb53274d8f907b94' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -132,11 +132,14 @@ export class Q2Tag {
         this.dropdownBtn.focus();
     }
     popoverStateHandler({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        var _a;
+        if (this.open === open)
+            return;
+        this.open = open;
         if (open)
             return;
         this.optionList.setActiveElement(null);
+        (_a = this.dropdownBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     // #endregion
     // #region Public Methods API
@@ -194,7 +197,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: 'a18af83301ac8bf08d1638b05d4dd8795f11cd46' }, h("click-elsewhere", { key: '130d173a4bf53dd6eec1775944d910c630e704ae', 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: '07bf52f6b4d8c4bbf42e90e69ff9a9deec82810b', 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: 'eefdf7202c269194a9753e438b4c6060984ba33e', 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: '3067ac9beee239562c410d7dfe4af04c651ef8ae' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -277,7 +277,7 @@ export class Q2Textarea {
         ]))));
     }
     render() {
-        return (h("div", { key: '9b3eb74c84edd99af52a0ec71ba8b2fd8adbd1f2', class: this.wrapperClasses }, renderLabel(this), h("div", { key: 'a00772502ea6c1fde5af5bf4c12f0606a629252a', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
+        return (h("div", { key: '21a303feabd0c8fc09d9cc7f0de8b9b50081a56a', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '58b5be24312fe523d09efe176b1ecf42b884166a', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
     }
     static get is() { return "q2-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -364,9 +364,9 @@ export class Q2Textarea {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "Only use when a visible label is impractical."
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
                         }],
-                    "text": "Hide's the field's `<label>` element from view."
+                    "text": "Hides the field's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -427,6 +427,9 @@ export class Q2Textarea {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }, {
                             "name": "localizable",
                             "text": undefined
                         }],

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

@@ -1,7 +1,7 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
 import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
-const TRIGGER = `<q2-btn intent="workflow-primary"><span>Trigger</span></q2-btn>`;
+const TRIGGER = `<q2-btn intent="primary"><span>Trigger</span></q2-btn>`;
 // Pad the wrapper so the tooltip has room to render in any direction without clipping.
 const wrap = (inner) => `<div style="padding: 80px; display: inline-block;">${inner}</div>`;
 // Use `immediate` so hover doesn't have to wait through the 1s delay before the

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: 'b55643965ef49af2e41a683686db00b97e1c90b7', 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: 'f04f1594eba66d962d9adbab48bf3559f658c650' }, h("slot", { key: '08804102412a6b57ac9b9db2002d1608f8b22c19', name: "loading-wrapper" }), h("iframe", { key: 'a2524435de8072fb27ebdcc9762a1f20367df098', 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: '59e9d5ddbabadb0e66615d998403d267c259f937', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '450c5724cf32ba05a2fc93b8adeba83b08e871e4' }))));
     }
     static get is() { return "tecton-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/chart-keyboard.js

@@ -0,0 +1,76 @@
+import { loc } from "./index";
+/** Localized feedback shared by chart keyboard controls. */
+export function chartPointDescription(name, value, index, count) {
+    return loc('tecton.element.chart.pointDescription', [loc(name) || '', value, `${index + 1}`, `${count}`]);
+}
+/** Coordinates keyboard exploration with ECharts emphasis without changing chart data. */
+export function createChartKeyboardNavigation(options) {
+    let index = null;
+    let focused = false;
+    const clear = () => {
+        var _a;
+        if (index !== null) {
+            (_a = options.getChart()) === null || _a === void 0 ? void 0 : _a.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index });
+        }
+        index = null;
+        options.onChange(null);
+    };
+    const select = (next) => {
+        var _a;
+        if (!options.getData()[next] || next === index)
+            return;
+        clear();
+        index = next;
+        (_a = options.getChart()) === null || _a === void 0 ? void 0 : _a.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index });
+        options.onChange(index);
+    };
+    const order = () => { var _a, _b; return (_b = (_a = options.getOrder) === null || _a === void 0 ? void 0 : _a.call(options)) !== null && _b !== void 0 ? _b : options.getData().map((_, i) => i); };
+    return {
+        onFocus: () => {
+            focused = true;
+            select(order()[0]);
+        },
+        onBlur: () => {
+            focused = false;
+            clear();
+        },
+        onKeyDown: (event) => {
+            if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+                return;
+            const indices = order();
+            if (!indices.length)
+                return;
+            const position = index === null ? -1 : indices.indexOf(index);
+            let next;
+            switch (event.key) {
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    next = Math.min(position + 1, indices.length - 1);
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    next = Math.max(position - 1, 0);
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = indices.length - 1;
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    clear();
+                    return;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            select(indices[next]);
+        },
+        refresh: () => {
+            clear();
+            if (focused)
+                select(order()[0]);
+        },
+    };
+}