q2-tecton-elements 1.71.4 → 1.73.0

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

@@ -1,7 +1,7 @@
 import { h, Host, Fragment, } from "@stencil/core";
 import { createGuid, getAriaValueFromProp, renderLabel, loc, renderMessages, setMessageHeight, handleAriaLabel, overrideFocus, isEventFromElement, isMobile, hasSlotContent, nextPaint, } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
-import formatCurrency from "./formatting/currency";
+import formatCurrency, { currencyFormats } from "./formatting/currency";
 import formatPhoneNumber from "./formatting/phone";
 import formatSSN from "./formatting/ssn";
 import formatTIN from "./formatting/tin";
@@ -60,8 +60,6 @@ export class Q2Input {
         // #region State Properties
         this.checkSlotCount = 0;
         this.isSmall = false;
-        // #endregion
-        // #region Public Property API
         /**
          * Sets readonly to true on the input without adding the "read only" label.
          *
@@ -87,7 +85,7 @@ export class Q2Input {
         /**
          * Displays a toggle button at the end of the input field which shows or hides the actual value.
          * @info
-         * Only applicable when `type` is `text`, `password`, or `ssn`.
+         * Applicable when `type` is `text`, `password`, `ssn`, or `tin`, or when `visibleLastCount` is set.
          */
         this.showVisibilityToggle = false;
         /** Specifies the field's expected [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types), and provides the optimal keyboard on mobile devices. */
@@ -123,6 +121,7 @@ export class Q2Input {
                 mirrorEmit(this, ['clear', 'tctClear'], { source: 'input' });
             }
             this.setCursorPosition(cursorPosition);
+            this.scheduleVisibleLastScrollSync();
         };
         this.initMutationObserver = () => {
             if (!('MutationObserver' in window))
@@ -158,6 +157,7 @@ export class Q2Input {
         this.onInputClick = () => {
             if (this.shouldCursorStayAtEnd)
                 this.placeCursorAtEnd();
+            this.scheduleVisibleLastScrollSync();
         };
         this.onInputFocus = () => {
             if (this.inputField.tagName === 'INPUT') {
@@ -169,6 +169,7 @@ export class Q2Input {
                         this.setCursorPosition(this.calculateCursorPositionOnFocus());
                     }
                     this.isClickEvent = false;
+                    this.syncVisibleLastScroll();
                 });
             }
             this.hasFocus = true;
@@ -211,6 +212,9 @@ export class Q2Input {
                 this.handleDataInput(newFormattedValue);
             }
         };
+        this.onInputScroll = () => {
+            this.syncVisibleLastScroll();
+        };
         this.onMutationObserved = () => {
             // Updating checkSlotCount to force re-render when slot content changes
             this.checkSlotCount = this.checkSlotCount + 1;
@@ -223,8 +227,18 @@ export class Q2Input {
         };
         this.onToggleVisibility = () => {
             this.hostElement.dispatchEvent(new FocusEvent('focus'));
+            if (this.normalizedVisibleLastCount !== undefined) {
+                this.value = this.formattedValueObject.value;
+            }
             this.textHidden = !this.textHidden;
         };
+        this.syncVisibleLastScroll = () => {
+            var _a, _b;
+            if (!this.visibleLastContentRef)
+                return;
+            const scrollLeft = (_b = (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+            this.visibleLastContentRef.style.setProperty('--tct-input-visible-last-count-scroll-left', `${scrollLeft}px`);
+        };
         this.validateInput = () => {
             var _a, _b, _c;
             this.validity = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.validity;
@@ -268,6 +282,7 @@ export class Q2Input {
     componentDidRender() {
         this.scheduledAfterRender.forEach(fn => fn());
         this.scheduledAfterRender = [];
+        this.syncVisibleLastScroll();
     }
     // #endregion
     // #region Listeners
@@ -371,6 +386,16 @@ export class Q2Input {
     hintsObserver() {
         this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));
     }
+    textHiddenObserver() {
+        if (!this.textHidden) {
+            this.scheduledAfterRender.push(() => {
+                this.inputField.value = this.formattedValueObject.formattedValue;
+            });
+        }
+        else {
+            this.scheduleVisibleLastScrollSync();
+        }
+    }
     typeObserver() {
         this.formatAndUpdateValueFromProp();
     }
@@ -434,13 +459,34 @@ export class Q2Input {
         return this.iconLeft;
     }
     get computedType() {
-        if (['password', 'text', 'ssn'].includes(this.type) && this.textHidden) {
+        if (this.textHidden &&
+            (['password', 'text', 'ssn', 'tin'].includes(this.type) || this.normalizedVisibleLastCount !== undefined)) {
             return 'password';
         }
-        else {
-            return (this.type && inputTypeMap[this.type]) || 'text';
+        return (this.type && inputTypeMap[this.type]) || 'text';
+    }
+    get currencyCode() {
+        if (this.type !== 'currency')
+            return;
+        const formatModifier = this.formatModifier === undefined ? 'USD' : this.formatModifier || '';
+        const currencyCode = formatModifier.includes('-integer') ? formatModifier.split('-integer')[0] : formatModifier;
+        return currencyFormats[currencyCode] ? currencyCode : undefined;
+    }
+    get currencyDescription() {
+        const currencyCode = this.currencyCode;
+        if (!currencyCode)
+            return;
+        try {
+            const locale = document.documentElement.lang || 'en-US';
+            return new Intl.DisplayNames(locale, { type: 'currency' }).of(currencyCode) || currencyCode;
+        }
+        catch (_a) {
+            return currencyCode;
         }
     }
+    get currencyDescriptionId() {
+        return `${this.inputId}-currency-description`;
+    }
     get hasCustomDisplaySlot() {
         return hasSlotContent(this.hostElement, 'custom-display');
     }
@@ -457,7 +503,14 @@ export class Q2Input {
         return this.valid && !this.hasError;
     }
     get inputDescribedBy() {
-        return this.showMessages || this.hasError ? `${this.inputId}-description` : undefined;
+        const descriptions = [];
+        if (this.currencyDescription)
+            descriptions.push(this.currencyDescriptionId);
+        if (this._ariaDescription)
+            descriptions.push(`${this.inputId}-aria-description`);
+        if (this.showMessages || this.hasError)
+            descriptions.push(`${this.inputId}-description`);
+        return descriptions.length ? descriptions.join(' ') : undefined;
     }
     get inputField() {
         return this.hostElement.shadowRoot.querySelector('.input-field');
@@ -498,11 +551,44 @@ export class Q2Input {
         ];
         return maskedTypes.includes(this.type);
     }
+    get maskedDisplayParts() {
+        var _a, _b;
+        if (!this.textHidden)
+            return { maskedCharacters: [], visibleValue: '' };
+        const visibleCount = this.normalizedVisibleLastCount;
+        const value = (_b = (_a = this.formattedValueObject) === null || _a === void 0 ? void 0 : _a.formattedValue) !== null && _b !== void 0 ? _b : '';
+        if (visibleCount === undefined || !value)
+            return { maskedCharacters: [], visibleValue: '' };
+        const characters = Array.from(value);
+        if (visibleCount >= characters.length)
+            return { maskedCharacters: [], visibleValue: value };
+        const visibleStart = characters.length - visibleCount;
+        return {
+            maskedCharacters: characters.slice(0, visibleStart),
+            visibleValue: characters.slice(visibleStart).join(''),
+        };
+    }
+    get maskedDisplayValue() {
+        const { maskedCharacters, visibleValue } = this.maskedDisplayParts;
+        return `${'*'.repeat(maskedCharacters.length)}${visibleValue}`;
+    }
     get messages() {
         return ((this.errors && this.errors.length > 0 && this.errors) ||
             (this.hints && this.hints.length > 0 && this.hints) ||
             []);
     }
+    get normalizedVisibleLastCount() {
+        const unsupportedTypes = ['currency', 'password', 'date'];
+        if (unsupportedTypes.includes(this.type))
+            return;
+        const visibleLastCountProp = this.visibleLastCount;
+        if (visibleLastCountProp === undefined || visibleLastCountProp === null || visibleLastCountProp === '')
+            return;
+        const visibleLastCount = Number(visibleLastCountProp);
+        if (!Number.isFinite(visibleLastCount) || visibleLastCount < 0)
+            return;
+        return Math.floor(visibleLastCount);
+    }
     get shouldCursorStartAtEnd() {
         return this.type === 'currency';
     }
@@ -515,6 +601,10 @@ export class Q2Input {
     get showMessages() {
         return this.messages.length > 0 && !this.hideMessages;
     }
+    get showVisibilityToggleButton() {
+        return (this.showVisibilityToggle &&
+            (['password', 'text', 'ssn', 'tin'].includes(this.type) || this.normalizedVisibleLastCount !== undefined));
+    }
     get stringValue() {
         const notCoercable = Object.prototype.toString.call(this.value) === '[object Object]';
         return notCoercable ? '' : (this.value && String(this.value)) || '';
@@ -693,6 +783,11 @@ export class Q2Input {
         const { inputField } = this;
         inputField.selectionStart = inputField.selectionEnd = inputField.value.length;
     }
+    scheduleVisibleLastScrollSync() {
+        if (!this.maskedDisplayValue)
+            return;
+        nextPaint(this.syncVisibleLastScroll);
+    }
     setCursorPosition(cursorData) {
         if (this.canSetSelection && !cursorData.hasSelection) {
             const input = this.inputField;
@@ -724,7 +819,7 @@ export class Q2Input {
     }
     renderInputContainerDOM() {
         const { hasInputLeftSlot, hasInputRightSlot } = this;
-        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.hasValidState && this.type === 'currency' && (h("div", { class: "input-valid-icon-container", "test-id": "divIconValid" }, h("q2-icon", { type: "success", class: "icon-valid", "test-id": "iconValid" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), h("div", { class: "input-icons-container-right" }, h("q2-btn", { class: this.clearClasses.join(' '), label: loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onMouseDown: e => e.preventDefault(), onClick: this.onClearInput, onKeyDown: e => e.stopPropagation() }, h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasValidState && this.type !== 'currency' && (h("div", { class: "input-valid-icon-container", "test-id": "divIconValid" }, h("q2-icon", { type: "success", class: "icon-valid", "test-id": "iconValid" }))), this.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
+        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix", "aria-hidden": this.type === 'currency' ? 'true' : undefined }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.hasValidState && this.type === 'currency' && (h("div", { class: "input-valid-icon-container", "test-id": "divIconValid" }, h("q2-icon", { type: "success", class: "icon-valid", "test-id": "iconValid" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), h("div", { class: "input-icons-container-right" }, h("q2-btn", { class: this.clearClasses.join(' '), label: loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onMouseDown: e => e.preventDefault(), onClick: this.onClearInput, onKeyDown: e => e.stopPropagation() }, h("q2-icon", { type: "close", class: "icon-clear" })), this.showVisibilityToggleButton && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix", "aria-hidden": this.type === 'currency' ? 'true' : undefined }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasValidState && this.type !== 'currency' && (h("div", { class: "input-valid-icon-container", "test-id": "divIconValid" }, h("q2-icon", { type: "success", class: "icon-valid", "test-id": "iconValid" }))), this.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" })), this.currencyDescription && (h("span", { id: this.currencyDescriptionId, class: "sr" }, this.currencyDescription))));
     }
     renderPseudoInputDOM() {
         const showPlaceholder = !this.value && !!this.placeholder;
@@ -735,13 +830,16 @@ export class Q2Input {
         const { hasCustomDisplaySlot } = this;
         const inputClasses = ['input-field'];
         const { ariaOwns, ariaHaspopup, ariaActivedescendant, ariaExpanded } = this.ariaAttributes;
+        const { maskedCharacters, visibleValue } = this.maskedDisplayParts;
         if (hasCustomDisplaySlot)
             inputClasses.push('sr');
-        return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { ref: el => (this.inputRef = el), class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, maxlength: ['date', 'currency'].includes(this.type) ? undefined : this.maxlength || undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-activedescendant": ariaActivedescendant, "aria-expanded": ariaExpanded || undefined, role: this._role || undefined, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", readonly: this.readonly || this._preventEntry, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onMouseDown: this.onInputMousedown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode, pattern: this.pattern || undefined })));
+        if (this.maskedDisplayValue)
+            inputClasses.push('has-visible-last-count');
+        return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("div", { class: "standard-input-container" }, this.maskedDisplayValue && (h("span", { class: "visible-last-count-value", "aria-hidden": "true" }, h("span", { ref: el => (this.visibleLastContentRef = el), class: "visible-last-count-content" }, maskedCharacters.map(character => (h("span", { class: "visible-last-count-character", "data-character": character }, h("span", { class: "visible-last-count-mask" }, "*")))), h("span", { class: "visible-last-count-visible-value" }, visibleValue)))), h("input", { ref: el => (this.inputRef = el), class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, maxlength: ['date', 'currency'].includes(this.type) ? undefined : this.maxlength || undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-activedescendant": ariaActivedescendant, "aria-expanded": ariaExpanded || undefined, role: this._role || undefined, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", readonly: this.readonly || this._preventEntry, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onMouseDown: this.onInputMousedown, onInput: this.onInputInput, onScroll: this.onInputScroll, onPaste: this.onInputPaste, inputmode: this.inputMode, pattern: this.pattern || undefined }))));
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (h(Host, { key: '877bcbc79e4891cab10a027fd4d53cab9852779e', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '0150e85d50d8c69dc16a50fc900cdc78729fc6ec', class: this.wrapperClasses }, h("div", { key: '6fef0d2a694ef81a7967fd86365a64237ea29d96', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
+        return (h(Host, { key: '5cce451eef90d5ef5cef8020105b725d76265eeb', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '6c014e6884ceabb3a0ceb7d667d7a9496221419c', class: this.wrapperClasses }, this._ariaDescription && (h("span", { key: '0a4eba6052c45e24e6babcfa9abbe587c46484c4', id: `${this.inputId}-aria-description`, class: "sr" }, this._ariaDescription)), h("div", { key: 'd93a7a1e3b0f8638c23f2922429b458d5b249e9f', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
     }
     static get is() { return "q2-input"; }
     static get encapsulation() { return "shadow"; }
@@ -757,6 +855,28 @@ export class Q2Input {
     }
     static get properties() {
         return {
+            "_ariaDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": undefined
+                        }],
+                    "text": "Provides additional descriptive text for the native input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_aria-description"
+            },
             "_preventEntry": {
                 "type": "boolean",
                 "mutable": true,
@@ -1180,9 +1300,9 @@ export class Q2Input {
                 "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,
@@ -1295,6 +1415,9 @@ export class Q2Input {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }, {
                             "name": "localizable",
                             "text": undefined
                         }],
@@ -1526,7 +1649,7 @@ export class Q2Input {
                 "docs": {
                     "tags": [{
                             "name": "info",
-                            "text": "Only applicable when `type` is `text`, `password`, or `ssn`."
+                            "text": "Applicable when `type` is `text`, `password`, `ssn`, or `tin`, or when `visibleLastCount` is set."
                         }],
                     "text": "Displays a toggle button at the end of the input field which shows or hides the actual value."
                 },
@@ -1570,7 +1693,7 @@ export class Q2Input {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls visibility of the value when the type is `text`, `password`, or `ssn`.\nWhen the input type is `password`, it will default to `true`, hiding the text."
+                    "text": "Controls visibility of the value. When `visibleLastCount` is set, hidden values keep the specified number of\ntrailing characters visible.\nWhen the input type is `password`, it will default to `true`, hiding the text."
                 },
                 "getter": false,
                 "setter": false,
@@ -1666,6 +1789,25 @@ export class Q2Input {
                 "setter": false,
                 "reflect": false,
                 "attribute": "value"
+            },
+            "visibleLastCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the number of trailing characters that remain visible when the field value is masked by `textHidden`\nor the visibility toggle. The element's `value` and emitted event details remain unmasked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "visible-last-count"
             }
         };
     }
@@ -2008,6 +2150,9 @@ export class Q2Input {
             }, {
                 "propName": "hints",
                 "methodName": "hintsObserver"
+            }, {
+                "propName": "textHidden",
+                "methodName": "textHiddenObserver"
             }, {
                 "propName": "type",
                 "methodName": "typeObserver"

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

@@ -5,6 +5,18 @@ const HINTS = ['Save more than you spend.', 'Wear sunscreen.', 'Hug a panda.'];
 const ERRORS = ['This field is required.', 'The value entered is invalid.', 'The value offends me.'];
 const VARIANTS = [
     { name: 'default', html: '<q2-input label="My input" placeholder="Enter text here"></q2-input>' },
+    {
+        name: 'letter-spacing-override',
+        html: `<style>
+                q2-input {
+                    --tct-input-label-letter-spacing: initial;
+                    letter-spacing: 0.12em !important;
+                }
+            </style>
+            <div style="width: 220px">
+                <q2-input label="Account holder full legal name" placeholder="Enter a name" optional></q2-input>
+            </div>`,
+    },
     {
         name: 'type-credit-card',
         html: '<q2-input label="My input" placeholder="Enter text here" type="credit-card"></q2-input>',
@@ -21,6 +33,14 @@ const VARIANTS = [
         name: 'visibility-toggle',
         html: '<q2-input label="My input" placeholder="Enter text here" type="password" show-visibility-toggle="true" value="hunter2"></q2-input>',
     },
+    {
+        name: 'clearable',
+        html: '<q2-input label="My input" clearable value="Clearable value"></q2-input>',
+    },
+    {
+        name: 'visible-last-count',
+        html: '<q2-input label="Account number" type="numeric" visible-last-count="4" text-hidden show-visibility-toggle="true" value="1234567890"></q2-input>',
+    },
     {
         name: 'slotted',
         html: `<q2-input label="My input" placeholder="Enter text here" optional>
@@ -102,6 +122,21 @@ test.describe('q2-input — variants × themes', () => {
         }
     }
 });
+test.describe('q2-input — single messages', () => {
+    for (const property of ['hints', 'errors']) {
+        test(`q2-input--single-${property}--focus`, async ({ page }) => {
+            await setupPage(page, '<q2-input label="My input"></q2-input>', {
+                theme: 'default-2026',
+                setupLoc: true,
+            });
+            await page.locator('q2-input').evaluate((element, messageProperty) => {
+                element[messageProperty] = ['A single message.'];
+            }, property);
+            await page.locator('q2-input input').first().focus();
+            await expect(page).toHaveScreenshot(`q2-input--single-${property}--focus--default-2026.png`);
+        });
+    }
+});
 // 'optional' exercises --tct-input-font-size + --tct-input-label-font-size + --tct-input-label-optional-font-size.
 // 'visibility-toggle' exercises --tct-input-visibility-toggle-font-size.
 // New inline variants cover the remaining tokens:

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

@@ -245,7 +245,6 @@ button {
 .action {
   --tct-radio-label-hidden-columns: 18px;
   --tct-radio-label-margin-right: 0;
-  --tct-radio-margin: 0;
   align-items: var(--tct-item-action-align-items, center);
   display: flex;
   grid-row: 1;
@@ -261,6 +260,9 @@ button {
   --tct-icon-size: var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));
   --tct-btn-icon-padding: var(--tct-item-action-btn-icon-padding, 0);
 }
+.action ::slotted(q2-icon) {
+  --tct-icon-size: var(--const-px-18, 18px);
+}
 
 .body {
   color: var(--tct-item-body-color, inherit);

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

@@ -27,6 +27,21 @@ export class Q2Item {
         this.renderTrigger = 0;
         /** Controls the vertical alignment of the item decorator and single content slot. */
         this.verticalAlign = 'top';
+        this.handleKeydown = (event) => {
+            if (!this.clickable || event.target !== this.itemElement)
+                return;
+            if (event.key === 'Enter' || this.isSpaceKey(event)) {
+                event.preventDefault();
+            }
+        };
+        this.handleKeyup = (event) => {
+            if (!this.clickable || event.target !== this.itemElement)
+                return;
+            if (event.key === 'Enter' || this.isSpaceKey(event)) {
+                event.preventDefault();
+                this.itemElement.click();
+            }
+        };
     }
     // #endregion
     // #region Component Lifecycle Events
@@ -138,11 +153,14 @@ export class Q2Item {
         const contentSlotCount = [this.hasHeaderSlotContent, this.hasBodySlotContent, this.hasFooterSlotContent].filter(Boolean).length;
         return this.verticalAlign !== 'top' && contentSlotCount === 1;
     }
+    isSpaceKey(event) {
+        return event.code === 'Space' || event.key === ' ' || event.key === 'Space' || event.key === 'Spacebar';
+    }
     // #endregion
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: '24235dc76b675062e0edbc9ffea84598e82d67a3', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (h("div", { key: '9ed941f454d1948fb1a62f730eb87744b8be5fad', class: this.decoratorClasses }, h("slot", { key: '90edead9ce02a3c85687bd93e7865e962524654e', name: "decorator" }, h("slot", { key: '86940492d2fec1d9a90ea240f526b4dc162505af', name: "bullet" })))), h("div", { key: 'b59a55f029809e8ce20f6744a7fc4c5f9519510e', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '9c70de9396f7c07856e4f107081475a317b05146', class: "header" }, h("slot", { key: '275e7d844ae6c6d5e44067f96bcf9d4ccd54fe95', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '6d70457c273c01f2637618b4345ff8f0bb871ab3', class: "body" }, h("slot", { key: '0014ace81da43f6619280117d799848885fd4371', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '81cb41dd1e02030dfd2ef5d1eaec3931ce069480', class: this.actionClasses }, h("slot", { key: '74b48e8223f25e6169f5efc0b6beda2523a2a88b', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '28e282068bb76cebce130a61bc27ade04fcbd399', class: this.footerClasses }, h("slot", { key: '684f5086b8e7aa7649907788d9c6af38f4b0c2c5', name: "footer" })))));
+        return (h("div", { key: '42ea022dfbebe50fc94e275c95f83f7cc3bbc3fd', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, onKeyDown: this.handleKeydown, onKeyUp: this.handleKeyup }, this.hasDecoratorSlotContent && (h("div", { key: '5ea5749d40d3fe53b28278272160e093cab9a7f6', class: this.decoratorClasses }, h("slot", { key: 'f69f67d5fd71dc36fab1e9a7014dd05c89a4250f', name: "decorator" }, h("slot", { key: '12e97e5492803c40e7e56785f69e18e8d27aa099', name: "bullet" })))), h("div", { key: '6a58cdcfba08332b36317fa072be51f90a24b03b', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '557085b4064d2ef20db3cb0f91388feb5737f83a', class: "header" }, h("slot", { key: '455ae71c71174ff1591e7ce5e83c1c6104261e81', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'e003fa668b6640cebd7c0faaca2eb740a77944fc', class: "body" }, h("slot", { key: 'aa0d5b552db0d4e3ca1692c7798feade76e0e89d', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '7c606e2cb0593b03844e2ddb48cbd9c4225f4d8d', class: this.actionClasses }, h("slot", { key: '9fb61fea2a775d011c3185d403a19877e8b558ba', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '2cab76f4d546f73365dcc7e1a5ea773b933e355e', class: this.footerClasses }, h("slot", { key: 'c7b603097d0272199604ec53dce5c99caf37a3d5', name: "footer" })))));
     }
     static get is() { return "q2-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,8 +9,9 @@ const DROPDOWN_OPTIONS = `
     <q2-option value="fourth">Fourth</q2-option>
 `;
 const DROPDOWN_ACTION = `<q2-dropdown slot="action" type="icon" label="My dropdown" icon="options" popover-alignment="left" hide-label="">${DROPDOWN_OPTIONS}</q2-dropdown>`;
-const BUTTON_ACTION = `<q2-btn intent="workflow-primary" slot="action">Action</q2-btn>`;
-const ICON_BUTTON_ACTION = `<q2-btn slot="action" intent="workflow-primary"><q2-icon type="edit"></q2-icon></q2-btn>`;
+const BUTTON_ACTION = `<q2-btn intent="primary" slot="action">Action</q2-btn>`;
+const ICON_ACTION = `<q2-icon slot="action" type="options"></q2-icon>`;
+const ICON_BUTTON_ACTION = `<q2-btn slot="action" intent="primary"><q2-icon type="edit"></q2-icon></q2-btn>`;
 const CHECKBOX_ACTION = `<q2-checkbox label="Item checkbox" hide-label slot="action"></q2-checkbox>`;
 const PILL_ACTION = `<q2-pill label="Item pill" slot="action"></q2-pill>`;
 const AVATAR_DECORATOR = `<q2-avatar icon="home" slot="decorator"></q2-avatar>`;
@@ -46,6 +47,11 @@ const VARIANTS = [
         html: `<q2-item>${AVATAR_DECORATOR}${FULL_CONTENT}${ICON_BUTTON_ACTION}</q2-item>`,
         states: ['resting'],
     },
+    {
+        name: 'action-icon',
+        html: `<q2-item>${ICON_DECORATOR}${FULL_CONTENT}${ICON_ACTION}</q2-item>`,
+        states: ['resting'],
+    },
     {
         name: 'action-checkbox',
         html: `<q2-item>${AVATAR_DECORATOR}${FULL_CONTENT}${CHECKBOX_ACTION}</q2-item>`,

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

@@ -109,7 +109,7 @@ export class Q2Legend {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '32d4b5a9adfdd824fba84233dd1647236a80d2e7', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '2842a006e6aab9d478bf900e13e0f45c14ec4a67' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: '4072c6510e6d0820051d31eb2e031f05b6f4b71e', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'd823017f42f22efe3fdedbb1484b0a7f749022ae' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get is() { return "q2-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class Q2List {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '03d753b9d45921c1660ca81e92612dd742aeb694', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '43124c37dde7bf8079171325c1592f84a9b86d7b', class: this.headerClasses }, h("div", { key: '34005b2b72a15103698731b5bd0076c53410dc90', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'a6a1e1a921aec21da718cac10a1e4643578cc53f', name: "filter" }))), h("div", { key: '8031cab7c441c8dde9102af20ed34c106e83e2a2', role: "list" }, h("slot", { key: '4eacfb475f1f8f7d74210afb5c505282afb0ed13' }))));
+        return (h("div", { key: '83755626545a0f51c29343772b4ac3bfe3affb44', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'ac297dfd9016aa8c7e3ee7664cf82bfbdbb1a18c', class: this.headerClasses }, h("div", { key: 'bce3d15f585ce2ab6d1db0d1e17d95018dc237cd', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '373811d46b5adbc711017b816147c12008f142d4', name: "filter" }))), h("div", { key: '47818e442a69e5d3af55730b51c8aa2d73cc26b8', role: "list" }, h("slot", { key: 'b0061fb86511665ecf5217f817135bc1533608ae' }))));
     }
     static get is() { return "q2-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -132,7 +132,7 @@ button {
   display: grid;
   gap: var(--tct-message-gap, 8px);
   align-items: flex-start;
-  background: var(--comp-message-background, var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))));
+  background: var(--comp-message-background);
   color: var(--tct-message-font-color, var(--t-message-font-color, inherit));
   box-shadow: var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));
   border-radius: var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)));
@@ -204,7 +204,7 @@ button {
 :host([type=info]) {
   --comp-info-color: #0079c1;
   --comp-bar-color: var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)));
-  --comp-message-background: var(--tct-message-info-background, #e5f5ff);
+  --comp-message-background: var(--tct-message-info-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)));
 }
 :host(:not([type])) .message-icon,
 :host(:not([type])) .message-icon,
@@ -217,7 +217,7 @@ button {
 :host([type=success]) {
   --comp-success-color: #0e8a00;
   --comp-bar-color: var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)));
-  --comp-message-background: var(--tct-message-success-background, #e8ffe5);
+  --comp-message-background: var(--tct-message-success-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)));
 }
 :host([type=success]) .message-icon {
   --tct-icon-stroke-primary: var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));
@@ -227,7 +227,7 @@ button {
 :host([type=warning]) {
   --comp-warning-color: #c35500;
   --comp-bar-color: var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)));
-  --comp-message-background: var(--tct-message-warning-background, #ffe2cc);
+  --comp-message-background: var(--tct-message-warning-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)));
 }
 :host([type=warning]) .message-icon {
   --tct-icon-stroke-primary: var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));
@@ -238,7 +238,7 @@ button {
 :host([type=danger]) {
   --comp-error-color: #d20a0a;
   --comp-bar-color: var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)));
-  --comp-message-background: var(--tct-message-error-background, #fee7e7);
+  --comp-message-background: var(--tct-message-error-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)));
 }
 :host([type=error]) .message-icon,
 :host([type=error]) .message-icon,

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

@@ -66,7 +66,7 @@ export class Q2Message {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: 'e6d294a3ad21e83f33d2e0202e74b66b5d61984f', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: 'c8cad3b93d2d501513d951b0850bf920cfdd2dc8', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '48222cb290731c76a3f68b48c01fcaff5b0fea2a', class: "sr" }), h("div", { key: '2f67a189f90d66ec9478926984cb4e3f97808658', class: "sr message-label" }, messageLabel), h("div", { key: 'f41dd21efa6c822a436328bf4bbf756eec8714fd', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '5668fbb085bfc8403062710a60238ba71c05e7ab' }))));
+        return (h("div", { key: 'eb6b6c3d9ae10d3f87a9c7be63780f582216ded1', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: 'e2dc68dc1da013553997ee459dede038f773a5e6', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'cc73afe11cda6117a222a15f3977152e2d22228e', class: "sr" }), h("div", { key: 'e92d1fff9c917176b2aded0fc9198fe819e4496c', class: "sr message-label" }, messageLabel), h("div", { key: 'f5ee65aa207ccf68b7cb3abda8ffed78b39937f8', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '493608040edc25dbccfe63c2907a42dc43c023a9' }))));
     }
     static get is() { return "q2-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -114,7 +114,7 @@ export class Q2Meter {
     }
     render() {
         const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
-        return (h("div", { key: '108bd1850c02f17867f51e2a29657e579df01c33', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'baae6e4a58b2fac21ef6099d99402e4cffb03d32', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'dcf9cdf337a50fa4cf145985fbab513114b38019', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: 'f6214a063456893f3c6f2f014a9ba687ad5b0a81', class: "legends" }, h("div", { key: '1c624e80a27edb22cf39c4ca6345e07c945e48e5', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '63345961e4992b545d617ea5e1b423729fab94f5', class: "right" }, h("div", { key: '897ff512bf5037b17c51c70a5bf901cf516dbccc', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
+        return (h("div", { key: '046777b3fb3bbfe58ad5ff97878d9c37008dd68d', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: '8b4b84a18e9b91b72cf0b5135136f09e6327fa27', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: '85019eed37e6f346846e71bab7351460f5549bd0', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: 'c6f111962764a49032e645cab917f11ccc2b3cea', class: "legends" }, h("div", { key: 'c63885e8690d61355867a6d9dc64575dc43bd22b', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: 'fd33a6d780d62b72081006d2bc81bce5942cfac7', class: "right" }, h("div", { key: '02fa74993895707294400edf76cc9a4882c9b55d', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
     }
     static get is() { return "q2-meter"; }
     static get encapsulation() { return "shadow"; }