q2-tecton-elements 1.71.2 → 1.72.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: 'aea772f2158fa032157fcbb26bb49a97dc2e5a1b', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '6b0cdf179216c359cb2db01176f563d77c19780e', class: this.wrapperClasses }, this._ariaDescription && (h("span", { key: '816be1dac83810f66ee0204a5be1a8421833e20b', id: `${this.inputId}-aria-description`, class: "sr" }, this._ariaDescription)), h("div", { key: '1e4fd3b4bbe5103b7bad2af07ebfecb36c3d1743', 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,
@@ -1526,7 +1646,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 +1690,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 +1786,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 +2147,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/test/q2-item-test.vr.js

@@ -10,6 +10,7 @@ const DROPDOWN_OPTIONS = `
 `;
 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_ACTION = `<q2-icon slot="action" type="options"></q2-icon>`;
 const ICON_BUTTON_ACTION = `<q2-btn slot="action" intent="workflow-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>`;
@@ -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-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-modal/q2-modal.css

@@ -131,7 +131,7 @@ dialog {
   --comp-dialog-gap: var(--tct-modal-gap, var(--app-scale-2x, 10px));
   --comp-dialog-max-width: var(--tct-modal-max-width, 600px);
   --comp-dialog-max-height: var(--tct-modal-max-height, 100vh);
-  --comp-dialog-min-height: var(--tct-modal-min-height, 40vh);
+  --comp-dialog-min-height: var(--tct-modal-min-height, inherit);
   --comp-dialog-box-shadow: var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));
   position: fixed;
   top: 100%;
@@ -141,6 +141,7 @@ dialog {
   transition: transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));
   width: 100%;
   max-width: var(--comp-dialog-max-width);
+  max-height: var(--comp-dialog-max-height);
   border: 0;
   border-radius: var(--comp-border-radius);
   box-shadow: var(--comp-dialog-box-shadow);
@@ -222,11 +223,12 @@ dialog[open].is-closing::backdrop {
 }
 
 .interior {
+  box-sizing: border-box;
   display: grid;
   min-height: var(--comp-dialog-min-height);
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--comp-dialog-gap);
-  max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));
+  max-height: min(var(--comp-dialog-max-height), 100vh - 2 * var(--comp-dialog-padding));
   padding: var(--comp-dialog-padding);
 }
 .interior.is-list header,
@@ -263,4 +265,39 @@ header .btn-close {
   grid-area: close;
   width: var(--comp-close-button-size);
   height: var(--comp-close-button-size);
+}
+
+footer {
+  --tct-action-group-margin: var(--app-scale-2x, 10px) 0 0;
+  align-self: end;
+}
+
+@media screen and (max-height: 400px) {
+  .content {
+    -webkit-mask-image: none;
+    mask-image: none;
+    overflow-y: visible;
+  }
+  .interior {
+    grid-template-rows: auto auto auto;
+    overflow-y: auto;
+    --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
+    --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));
+    --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));
+    scrollbar-width: thin;
+    scrollbar-color: var(--comp-scrollbar-color) transparent;
+  }
+  .interior::-webkit-scrollbar {
+    width: var(--comp-scrollbar-size);
+    height: var(--comp-scrollbar-size);
+    margin: 5px;
+  }
+  .interior::-webkit-scrollbar-thumb {
+    background: var(--comp-scrollbar-color);
+    border-radius: var(--comp-scrollbar-border-radius);
+  }
+  .interior::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: var(--comp-scrollbar-border-radius);
+  }
 }