q2-tecton-elements 1.69.1 → 1.70.0

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

@@ -0,0 +1,132 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const DROPDOWN_OPTIONS = `
+    <q2-option value="first">First</q2-option>
+    <q2-option value="second">Second</q2-option>
+    <q2-option separator></q2-option>
+    <q2-option value="third">Third</q2-option>
+    <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 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>`;
+const ICON_DECORATOR = `<q2-icon type="home" slot="decorator"></q2-icon>`;
+const FULL_CONTENT = `
+    <div slot="header">Header Text</div>
+    <div slot="body">Body Text</div>
+    <div slot="footer">Footer Text</div>
+`;
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-item>${AVATAR_DECORATOR}${FULL_CONTENT}${DROPDOWN_ACTION}</q2-item>`,
+        states: ['resting'],
+    },
+    {
+        name: 'decorator-icon',
+        html: `<q2-item>${ICON_DECORATOR}${FULL_CONTENT}${DROPDOWN_ACTION}</q2-item>`,
+        states: ['resting'],
+    },
+    {
+        name: 'no-decorator',
+        html: `<q2-item>${FULL_CONTENT}${DROPDOWN_ACTION}</q2-item>`,
+        states: ['resting'],
+    },
+    {
+        name: 'action-button',
+        html: `<q2-item>${AVATAR_DECORATOR}${FULL_CONTENT}${BUTTON_ACTION}</q2-item>`,
+        states: ['resting'],
+    },
+    {
+        name: 'action-icon-button',
+        html: `<q2-item>${AVATAR_DECORATOR}${FULL_CONTENT}${ICON_BUTTON_ACTION}</q2-item>`,
+        states: ['resting'],
+    },
+    {
+        name: 'action-checkbox',
+        html: `<q2-item>${AVATAR_DECORATOR}${FULL_CONTENT}${CHECKBOX_ACTION}</q2-item>`,
+        states: ['resting'],
+    },
+    {
+        name: 'action-pill',
+        html: `<q2-item>${AVATAR_DECORATOR}${FULL_CONTENT}${PILL_ACTION}</q2-item>`,
+        states: ['resting'],
+    },
+    {
+        name: 'no-action',
+        html: `<q2-item>${AVATAR_DECORATOR}${FULL_CONTENT}</q2-item>`,
+        states: ['resting'],
+    },
+    {
+        name: 'no-action-no-decorator',
+        html: `<q2-item>${FULL_CONTENT}</q2-item>`,
+        states: ['resting'],
+    },
+    {
+        name: 'clickable',
+        html: `<q2-item clickable>${AVATAR_DECORATOR}${FULL_CONTENT}${DROPDOWN_ACTION}</q2-item>`,
+        states: ['resting', 'hover', 'focus', 'active'],
+    },
+    {
+        name: 'vertical-align-center',
+        html: `<q2-item vertical-align="center">${AVATAR_DECORATOR}<div slot="header">Header Text</div></q2-item>`,
+        states: ['resting'],
+    },
+    {
+        name: 'vertical-align-bottom',
+        html: `<q2-item vertical-align="bottom">${AVATAR_DECORATOR}<div slot="header">Header Text</div></q2-item>`,
+        states: ['resting'],
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-item--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-item--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-item--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.locator('q2-item').hover();
+        await expect(page).toHaveScreenshot(`q2-item--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-item--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-item--${variant.name}--focus--${theme}.png`);
+    });
+};
+const activeCase = (variant, theme) => {
+    test(`q2-item--${variant.name}--active — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        const item = page.locator('q2-item');
+        const box = await item.boundingBox();
+        if (!box)
+            throw new Error('q2-item bounding box unavailable');
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.mouse.down();
+        await page.waitForTimeout(50);
+        await expect(page).toHaveScreenshot(`q2-item--${variant.name}--active--${theme}.png`);
+        await page.mouse.up();
+    });
+};
+test.describe('q2-item — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            if (variant.states.includes('resting'))
+                restingCase(variant, theme);
+            if (variant.states.includes('hover'))
+                hoverCase(variant, theme);
+            if (variant.states.includes('focus'))
+                focusCase(variant, theme);
+            if (variant.states.includes('active'))
+                activeCase(variant, theme);
+        }
+    }
+});

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

@@ -124,7 +124,7 @@ ul {
 }
 
 .item-name {
-  color: var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));
+  color: var(--tct-legend-item-name-font-color, inherit);
   display: inline-block;
   flex-grow: 1;
   font-size: var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));
@@ -134,7 +134,7 @@ ul {
 }
 
 .item-value {
-  color: var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));
+  color: var(--tct-legend-item-value-font-color, inherit);
   display: inline-block;
   margin-left: auto;
   flex-grow: 0;

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

@@ -180,7 +180,7 @@ button {
   line-height: var(--tct-list-label-line-height, 44px);
   font-size: var(--tct-list-label-font-size, var(--app-font-size, 14px));
   font-weight: var(--tct-list-label-font-weight, 600);
-  color: var(--tct-list-label-font-color, var(--t-text, #4d4d4d));
+  color: var(--tct-list-label-font-color, inherit);
 }
 
 slot:not([name]) {

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

@@ -1,3 +1,4 @@
+import sanitizeHTMLString from "../../utils/sanitize-html-string";
 import { loc } from "../../utils/index";
 /**
  * @name Localization
@@ -6,6 +7,13 @@ import { loc } from "../../utils/index";
  */
 export class Q2Loc {
     constructor() {
+        // #endregion
+        // #region Public Property API
+        /**
+         * When true, allows HTML tags in the localized string to be rendered as HTML.
+         * @warning Only use this with trusted localization strings, as it uses innerHTML and may expose XSS vulnerabilities. See the FAQ "Can I add HTML to my localization strings?" for usage guidance.
+         */
+        this.ignoreTag = false;
         this.initMutationObserver = () => {
             if (!('MutationObserver' in window))
                 return;
@@ -41,22 +49,55 @@ export class Q2Loc {
     componentDidLoad() {
         this.initMutationObserver();
     }
+    componentDidRender() {
+        if (this.ignoreTag) {
+            this.hostElement.innerHTML = sanitizeHTMLString(this.translatedValue);
+        }
+    }
     // #endregion
     // #region Local Methods
     get hostTextContent() {
         return this.hostElement.textContent.trim();
     }
     get translatedValue() {
-        return loc(this.value, this.substitutions);
+        return loc(this.value, this.substitutions, this.ignoreTag ? { ignoreTag: true } : undefined);
     }
     // #endregion
     // #region Render Methods
     render() {
+        if (this.ignoreTag) {
+            // When ignoreTag is true, render HTML content using innerHTML
+            // We need to do this in componentDidRender to ensure the host element exists
+            return null;
+        }
         return this.translatedValue;
     }
     static get is() { return "q2-loc"; }
     static get properties() {
         return {
+            "ignoreTag": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "warning",
+                            "text": "Only use this with trusted localization strings, as it uses innerHTML and may expose XSS vulnerabilities. See the FAQ \"Can I add HTML to my localization strings?\" for usage guidance."
+                        }],
+                    "text": "When true, allows HTML tags in the localized string to be rendered as HTML."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ignore-tag",
+                "defaultValue": "false"
+            },
             "substitutions": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -88,6 +88,10 @@ button {
  * @prop --tct-message-success-bar-color: (<color>) Controls the color of the status bar when the message type is success.
  * @prop --tct-message-warning-bar-color: (<color>) Controls the color of the status bar when the message type is warning.
  * @prop --tct-message-error-bar-color: (<color>) Controls the color of the status bar when the message type is error or danger.
+ * @prop --tct-message-info-background: (<color>) Controls the background color of the message container when the message type is info.
+ * @prop --tct-message-success-background: (<color>) Controls the background color of the message container when the message type is success.
+ * @prop --tct-message-warning-background: (<color>) Controls the background color of the message container when the message type is warning.
+ * @prop --tct-message-error-background: (<color>) Controls the background color of the message container when the message type is error or danger.
  */
 :host {
   display: block;

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

@@ -135,13 +135,13 @@ button {
 .meter-container .label {
   font-size: var(--tct-meter-label-font-size, 14px);
   font-weight: var(--tct-meter-label-font-weight, 600);
-  color: var(--tct-meter-label-color, var(--t-text, #4D4D4D));
+  color: var(--tct-meter-label-color, inherit);
   margin: var(--tct-meter-label-margin, 5px 0);
 }
 .meter-container .description {
   font-size: var(--tct-meter-description-font-size, 14px);
   font-weight: var(--tct-meter-description-font-weight, 400);
-  color: var(--tct-meter-description-color, #000000);
+  color: var(--tct-meter-description-color, inherit);
   line-height: var(--tct-meter-description-line-height, 21px);
   margin: var(--tct-meter-description-margin, 5px 0);
 }
@@ -230,7 +230,7 @@ button {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  color: var(--tct-meter-legend-label-color, var(--t-textA, #767676));
+  color: var(--tct-meter-legend-label-color, inherit);
   font-weight: var(--tct-meter-legend-font-weight, 400);
   margin: var(--tct-meter-legend-margin, 5px 0);
 }

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

@@ -103,7 +103,7 @@ dialog {
   --comp-close-button-size: var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));
   --comp-header-height: var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));
   --comp-dialog-background: var(--tct-modal-background, var(--t-base, #ffffff));
-  --comp-dialog-color: var(--tct-modal-color, var(--t-text, #4d4d4d));
+  --comp-dialog-color: var(--tct-modal-color, inherit);
   --comp-dialog-padding: var(--tct-modal-padding, var(--app-scale-3x, 15px));
   --comp-content-gradient-height: var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));
   --comp-dialog-gap: var(--tct-modal-gap, var(--app-scale-2x, 10px));

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

@@ -3,7 +3,7 @@ import { debounce, hasSlotContent, waitForNextPaint } from "../../utils/index";
 import sanitizeHTMLString from "../../utils/sanitize-html-string";
 /**
  * @name Modal
- * @category Display
+ * @category Platform
  * @summary Use for focused interactions that require user attention before continuing.
  * @slot content - A slot to display custom content in the modal body above the description.
  * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.
@@ -136,7 +136,7 @@ export class Q2Modal {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: 'f07045cb3a3e85c9ebb018aba4693f1b547da800', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '215739e96bf781f3c9d7b1e67250820ccf858b75', class: interiorClasses }, this.title && (h("header", { key: '77ce6f5b51a36f296fd110e3506c44ff94d72c48' }, this.title && h("h2", { key: 'fe6c7e59889383c6af5615093e66c3837dd24bc4', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '8da0a4c5499caffd385bbf78f2010f77f8c35785', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '3526408cfbc99d56d74e3167624049a86dded3a4', type: "close" }))))), h("div", { key: 'ce3c96886c1d28d78040401b3782892c5bda7399', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'e4bae20593b8877f9c713f5bf63e59574042735b', class: "icon" }, h("q2-icon", { key: '466a83589286d503c6a5a36ba1999a73df951c19', type: this.icon }))), this.imageSrc && (h("div", { key: '56a0e413b40319b7a40e79136575ee8849c339c6', class: "image" }, h("img", { key: '0d32cee3447aa42273a816c4cd8941d5df62b3b2', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '3687527d29977c662dd480e6fb9727f47eb3522a', name: "content" }), this.description && h("p", { key: '34b49f5bb615192deec83726391b66680541eb12', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'a44e20822b497cc95e2ad16430f3e3e27f1c164a', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'ae01296dc46f5502b1cdfa7b1949639df942c124' }, h("q2-action-group", { key: 'b89615558a7129659ce1574cc026c2bc4d728e8b', "full-width": true }, h("slot", { key: 'f12ed356d57b290222a5dab301c83a85fbdc9c34', name: "action" }))))));
+        return (h("dialog", { key: '92dc143e4337dbe56582ec8ef8f0568dd71e3e55', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '8528e0443f56c88b0e3454cc5b33e5307c93b4b3', class: interiorClasses }, this.title && (h("header", { key: '58082ec96ee55a2054ced1d14c71ca048a9af336' }, this.title && h("h2", { key: '8ac56ee9d3eb84056faaa748a9a2d69ef946eeeb', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '664890ce00ec76f4f4339f1b32579cfe95f8ad40', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '3c9349bf6456c8684ac87d3c6918820081e2657b', type: "close" }))))), h("div", { key: '76fa2465d4d60db5e0843274348b85eaf1a49ed6', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'd9d7ae8b43dae09abbaf3fcfec61fdf66ab0f619', class: "icon" }, h("q2-icon", { key: '3db0ae939a529933b79018a23b88a7d429658a9a', type: this.icon }))), this.imageSrc && (h("div", { key: 'bf295b4c233610b87b6f75557f4c4d439d757c96', class: "image" }, h("img", { key: 'ffcd4e115096ed4e48349ba28b00a261bdd78f7b', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '09342f081d5307fe109e247a6c2de7bca0fd6b0f', name: "content" }), this.description && h("p", { key: '892e4550e230f47e26e757b6f483c2bee0f424ce', class: "description" }, this.description), this.customMarkup && (h("p", { key: '625a6ee4350fe16c3589ebed630f86be8a420609', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '7663cc739e8fe908b9a916e1ddbc0a0364c8023f' }, h("q2-action-group", { key: 'a426f7228f0f4a7ae991fc65d221795279ec2530', "full-width": true }, h("slot", { key: 'f6862c2074f18f31a9775f2de07aaa3e8904ac76', name: "action" }))))));
     }
     static get is() { return "q2-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,6 +65,39 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-otp-margin?: (<length-percentage>+) Controls the margin of the component host as a shorthand. Overrides --tct-otp-margin-top and --tct-otp-margin-bottom when set.
+ * @prop --tct-otp-margin-top: (<length-percentage>) Controls the top margin of the component host.
+ * @prop --tct-otp-margin-bottom: (<length-percentage>) Controls the bottom margin of the component host.
+ * @prop --tct-otp-vertical-gap: (<length-percentage>) Controls the vertical spacing between the label, fields, helper text, and actions.
+ * @prop --tct-otp-field-gap: (<length-percentage>) Controls the horizontal spacing between individual OTP fields.
+ * @prop --tct-otp-field-background: (<color>) Controls the background color of each OTP input field.
+ * @prop --tct-otp-field-border-color: (<color>) Controls the border color of each OTP input field.
+ * @prop --tct-otp-field-border-radius: (<length-percentage>) Controls the corner radius of each OTP input field.
+ * @prop --tct-otp-field-border-width: (<length>) Controls the border width of each OTP input field.
+ * @prop --tct-otp-field-font-color: (<color>) Controls the text color inside each OTP input field.
+ * @prop --tct-otp-field-font-size: (<length-percentage>) Controls the font size of characters inside each OTP input field.
+ * @prop --tct-otp-field-font-weight: (<number>) Controls the font weight of characters inside each OTP input field.
+ * @prop --tct-otp-field-masked-color: (<color>) Controls the color of the mask dot shown when the field is in masked mode.
+ * @prop --tct-otp-field-masked-size: (<length>) Controls the diameter of the mask dot shown when the field is in masked mode.
+ * @prop --tct-otp-field-focus-border-color?: (<color>) Controls the border color of the active (focused) OTP field. Defaults to the regular field border color.
+ * @prop --tct-otp-field-focus-box-shadow: (*) Controls the box-shadow applied to the active (focused) OTP field.
+ * @prop --tct-otp-field-error-border-color: (<color>) Controls the border color of each OTP field when the component is in the error state.
+ * @prop --tct-otp-field-error-focus-ring-color: (<color>) Controls the focus ring color of the active field when the component is in the error state.
+ * @prop --tct-otp-field-error-focus-box-shadow: (*) Controls the box-shadow of the active field when the component is in the error state.
+ * @prop --tct-otp-field-success-border-color: (<color>) Controls the border color of each OTP field when the component is in the success state.
+ * @prop --tct-otp-field-success-focus-ring-color: (<color>) Controls the focus ring color of the active field when the component is in the success state.
+ * @prop --tct-otp-field-success-focus-box-shadow: (*) Controls the box-shadow of the active field when the component is in the success state.
+ * @prop --tct-otp-field-disabled-opacity: (<number>) Controls the opacity of each OTP field when the component is disabled.
+ * @prop --tct-otp-separator-color: (<color>) Controls the color of the separator character between field groups.
+ * @prop --tct-otp-separator-font-size: (<length-percentage>) Controls the font size of the separator character.
+ * @prop --tct-otp-separator-font-weight: (<number>) Controls the font weight of the separator character.
+ * @prop --tct-otp-helper-font-color: (<color>) Controls the color of the helper text below the fields.
+ * @prop --tct-otp-helper-font-size: (<length-percentage>) Controls the font size of the helper text below the fields.
+ * @prop --tct-otp-processing-overlay-background: (<color>) Controls the background of the overlay shown during processing.
+ * @prop --tct-otp-processing-spinner-size: (<length>) Controls the size of the spinner shown during processing.
+ * @prop --tct-otp-tween: (*) Controls the transition timing applied to field state changes.
+ */
 :host {
   display: flex;
   justify-content: center;

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

@@ -0,0 +1,83 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-otp label="Verification Code" submit-label="Verify"></q2-otp>`,
+        states: ['resting', 'focus'],
+    },
+    {
+        name: 'filled',
+        html: `<q2-otp label="Verification Code" submit-label="Verify" value="123456"></q2-otp>`,
+        states: ['resting'],
+    },
+    {
+        name: 'masked',
+        html: `<q2-otp label="Masked Code" submit-label="Verify" masked value="123456"></q2-otp>`,
+        states: ['resting'],
+    },
+    {
+        name: 'grouped-3-3',
+        html: `<q2-otp label="Verification Code" submit-label="Verify" length="[3,3]" value="123456"></q2-otp>`,
+        states: ['resting'],
+    },
+    {
+        name: 'length-4',
+        html: `<q2-otp label="Security Code" submit-label="Verify" length="4" value="1234"></q2-otp>`,
+        states: ['resting'],
+    },
+    {
+        name: 'helper-text',
+        html: `<q2-otp label="Verification Code" submit-label="Verify" helper-text="Codes refresh every 30 seconds" show-helper-text></q2-otp>`,
+        states: ['resting'],
+    },
+    {
+        name: 'state-error',
+        html: `<q2-otp label="Verification Code" submit-label="Verify" state="error" error-message="Invalid verification code." value="123456"></q2-otp>`,
+        states: ['resting'],
+    },
+    {
+        name: 'state-success',
+        html: `<q2-otp label="Verification Code" submit-label="Verify" state="success" success-message="Verification code accepted." value="123456"></q2-otp>`,
+        states: ['resting'],
+    },
+    {
+        name: 'state-verifying',
+        html: `<q2-otp label="Verification Code" submit-label="Verify" processing-label="Verifying" state="verifying" value="123456"></q2-otp>`,
+        states: ['resting'],
+    },
+    {
+        name: 'state-ready',
+        html: `<q2-otp label="Verification Code" submit-label="Verify" state="ready"></q2-otp>`,
+        states: ['resting', 'focus'],
+    },
+    {
+        name: 'disabled',
+        html: `<q2-otp label="Verification Code" submit-label="Verify" disabled value="123456"></q2-otp>`,
+        states: ['resting'],
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-otp--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await expect(page).toHaveScreenshot(`q2-otp--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-otp--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-otp--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-otp — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            if (variant.states.includes('resting'))
+                restingCase(variant, theme);
+            if (variant.states.includes('focus'))
+                focusCase(variant, theme);
+        }
+    }
+});

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

@@ -76,6 +76,7 @@ button {
  * @prop --tct-popover-padding?: (<length-percentage>+) Controls the optional inner padding of the popover.
  * @prop --tct-popover-margin-block?: (<length-percentage>+) Controls the optional block-axis margin of the popover.
  * @prop --tct-popover-min-width: (<length-percentage>) Controls the minimum width of the popover.
+ * @prop --tct-popover-width?: (<length-percentage>) Controls the optional width of the popover.
  * @prop --tct-popover-top: (<length-percentage>) Controls the top offset of the popover when opening downward.
  * @prop --tct-popover-z-index: (<integer>) Controls the z-index of the legacy popover element.
  * @prop --tct-popover-open-animation-duration: (<time>) Controls the duration of the popover open animation.
@@ -121,7 +122,7 @@ button {
   overflow: auto;
   background: var(--tct-popover-background, var(--app-white, #ffffff));
   backdrop-filter: var(--tct-popover-backdrop-filter, none);
-  color: var(--tct-popover-font-color, var(--t-text, #4d4d4d));
+  color: var(--tct-popover-font-color, inherit);
   min-width: var(--tct-popover-min-width, 135px);
   width: var(--tct-popover-width, auto);
   margin-block: var(--tct-popover-margin-block, 0);

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

@@ -76,6 +76,7 @@ button {
  * @prop --tct-radio-background-transition: (*) Controls the transition timing applied to the radio fill.
  * @prop --tct-radio-box-shadow?: (*) Controls the optional box shadow of the radio.
  * @prop --tct-radio-box-shadow-focus-visible: (*) Controls the box shadow of the radio when focused via keyboard.
+ * @prop --tct-radio-focus-box-shadow?: (*) Controls the optional box shadow of the radio on focus.
  * @prop --tct-radio-select-fill-default?: (<color>) Controls the optional inner-circle fill in the default state.
  * @prop --tct-radio-select-fill-checked: (<color>) Controls the inner-circle fill when the radio is checked.
  * @prop --tct-radio-checked-fill: (<color>) Controls the inner-circle fill when the radio is checked (legacy alias).
@@ -107,6 +108,7 @@ button {
  * @prop --tct-radio-label-gap: (<length-percentage>) Controls the gap between the radio circle and label content.
  * @prop --tct-radio-label-margin-right: (<length-percentage>) Controls the right margin of the radio label.
  * @prop --tct-radio-hidden-columns: (*) Controls the grid-template-columns when the label is visually hidden.
+ * @prop --tct-radio-label-hidden-columns?: (*) Controls the optional grid-template-columns when the label is visually hidden.
  * @prop --tct-radio-tile-border-radius: (<length-percentage>) Controls the corner radius of the radio tile.
  * @prop --tct-radio-tile-label-font-size: (<length-percentage>) Controls the font size of the radio tile label.
  * @prop --tct-radio-tile-checked-stroke-color: (<color>) Controls the border color of the radio tile when checked.

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

@@ -124,11 +124,41 @@ button {
   display: block;
 }
 
+/**
+ * @prop --tct-search-margin?: (<length-percentage>+) Controls the margin of the component host as a shorthand. Overrides --tct-search-margin-top and --tct-search-margin-bottom when set.
+ * @prop --tct-search-margin-top: (<length-percentage>) Controls the top margin of the component host.
+ * @prop --tct-search-margin-bottom: (<length-percentage>) Controls the bottom margin of the component host.
+ * @prop --tct-search-input-min-height?: (*) Controls the minimum height of the search input.
+ * @prop --tct-search-input-max-height?: (*) Controls the maximum height of the search input.
+ * @prop --tct-search-input-horizontal-gap: (<length-percentage>) Controls the horizontal gap between elements inside the search input.
+ * @prop --tct-search-icon-min-width?: (*) Controls the minimum width of the icon container in the search input.
+ * @prop --tct-search-loading-popover-height?: (<length-percentage>) Controls the minimum height of the popover while the component is in the loading state.
+ * @prop --tct-search-loading-spinner-size: (<length-percentage>) Controls the size of the loading spinner.
+ * @prop --tct-search-multi-select-header-padding: (<length-percentage>+) Controls the padding of the multi-select filter header.
+ * @prop --tct-search-multi-select-header-background: (<color>) Controls the background color of the multi-select filter header.
+ * @prop --tct-search-multi-select-option-padding: (<length-percentage>+) Controls the padding of each filter option label.
+ * @prop --tct-search-multi-select-option-font-size: (<length-percentage>) Controls the font size of each filter option label.
+ * @prop --tct-search-multi-select-option-border-radius: (<length-percentage>) Controls the corner radius of each filter option label.
+ * @prop --tct-search-multi-select-option-background: (<color>) Controls the default background color of each filter option label.
+ * @prop --tct-search-multi-select-option-font-color: (<color>) Controls the default text color of each filter option label.
+ * @prop --tct-search-multi-select-option-hover-background: (<color>) Controls the background color of a filter option label on hover.
+ * @prop --tct-search-multi-select-option-hover-font-color: (<color>) Controls the text color of a filter option label on hover.
+ * @prop --tct-search-multi-select-option-active-background: (<color>) Controls the background color of the selected filter option label.
+ * @prop --tct-search-multi-select-option-active-font-color: (<color>) Controls the text color of the selected filter option label.
+ * @prop --tct-search-multi-select-option-disabled-opacity: (<number>) Controls the opacity of a disabled filter option label.
+ * @prop --tct-search-no-results-padding: (<length-percentage>+) Controls the padding of the no-results message.
+ * @prop --tct-search-no-results-font-color: (<color>) Controls the text color of the no-results message.
+ */
 :host {
   display: block;
   margin: var(--tct-search-margin, var(--tct-search-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-search-margin-bottom, var(--app-scale-5x, 25px)));
 }
 
+::slotted([slot=_selected-display]) {
+  width: 100%;
+  min-height: var(--comp-selected-display-height, 44px);
+}
+
 .q2-search-container {
   display: block;
   position: relative;