q2-tecton-elements 1.70.2 → 1.71.0

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

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-icon-size: (<length>) Controls the height and width of the icon.
  * @prop --tct-icon-stroke-primary: (<color>) Controls the primary stroke color of the icon paths.

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

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-input-margin: (<length-percentage>+) Controls the outer margin of the input host.
  * @prop --tct-input-margin-top: (<length-percentage>) Controls the top margin of the input host when --tct-input-margin is not set.
@@ -207,14 +229,14 @@ button {
   --comp-label-optional-margin: var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));
   margin: var(--comp-label-optional-margin);
   color: var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));
-  font-size: var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, 12px)));
+  font-size: var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, var(--const-px-12, 12px))));
   font-weight: var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));
   line-height: 1em;
 }
 
 .count-tag {
   color: var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));
-  font-size: var(--tct-input-count-font-size, var(--app-font-size-small, 12px));
+  font-size: var(--tct-input-count-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
   font-weight: var(--tct-input-count-font-weight, 400);
   text-align: right;
   width: var(--tct-input-count-width, auto);
@@ -258,7 +280,7 @@ button {
   --comp-input-border-width: var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)
       var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);
   --comp-input-border-color: var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));
-  --comp-input-prefix-clearance: calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));
+  --comp-input-prefix-clearance: calc(3 * var(--tct-input-prefix-font-size, var(--const-px-14, 14px)) + var(--tct-scale-1, 5px));
   --comp-input-icon-clearance: 34px;
   --comp-input-min-height: var(--tct-input-min-height, var(--t-input-min-height, 44px));
   --comp-input-max-height: var(--tct-input-max-height, var(--t-input-max-height));
@@ -469,7 +491,7 @@ button {
   --tct-btn-padding-inline: var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));
   --tct-btn-font-weight: var(--tct-input-visibility-toggle-font-weight, 400);
   color: var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));
-  font-size: var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, 12px));
+  font-size: var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
 }
 
 q2-icon {

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

@@ -76,6 +76,12 @@ export class Q2Input {
          * Will assign role to combobox when used inside q2-select and q2-calendar.
          */
         this._role = undefined;
+        /**
+         * Determines whether the input updates its value property as native input occurs.
+         *
+         * @private
+         */
+        this._updateValueOnInput = true;
         /** Indicates the field cannot be focused or interacted with. */
         this.disabled = false;
         /**
@@ -104,12 +110,15 @@ export class Q2Input {
             // when type=number: returns only valid decimal on input event, should not update itself (e.g. typing "1." )
             if (this.type !== 'number')
                 this.inputField.value = this.formattedValueObject.formattedValue;
-            mirrorEmit(this, ['input', 'tctInput'], {
+            const eventDetail = {
                 value: this.formattedValueObject.value,
                 formattedValue: this.formattedValueObject.fullyFormattedValue,
                 minFormattedLength: this.formattedValueObject.minFormattedLength,
                 ...(this.formattedValueObject.type && { type: this.formattedValueObject.type }),
-            });
+            };
+            if (this._updateValueOnInput)
+                this.value = eventDetail.value;
+            mirrorEmit(this, ['input', 'tctInput'], eventDetail);
             if (!this.formattedValueObject.value) {
                 mirrorEmit(this, ['clear', 'tctClear'], { source: 'input' });
             }
@@ -448,7 +457,7 @@ export class Q2Input {
         return this.valid && !this.hasError;
     }
     get inputDescribedBy() {
-        return this.showMessages ? `${this.inputId}-description` : undefined;
+        return this.showMessages || this.hasError ? `${this.inputId}-description` : undefined;
     }
     get inputField() {
         return this.hostElement.shadowRoot.querySelector('.input-field');
@@ -725,14 +734,14 @@ export class Q2Input {
     renderStandardInputDOM() {
         const { hasCustomDisplaySlot } = this;
         const inputClasses = ['input-field'];
-        const { ariaOwns, ariaHaspopup, ariaActivedescendant } = this.ariaAttributes;
+        const { ariaOwns, ariaHaspopup, ariaActivedescendant, ariaExpanded } = this.ariaAttributes;
         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, 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 })));
+        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 })));
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (h(Host, { key: 'edb58506d07e300340ece461b1788acfcbaf712a', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '10bcd4e4adb9614628958029aca0d7cb96593c31', class: this.wrapperClasses }, h("div", { key: 'bfad0e782b14bc1ab1c2fd01cacc79d76f82f6ab', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
+        return (h(Host, { key: '5255e58159b3c614913fec22cc38f8a31d5553bb', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '2dfaa5f10b49bb4ddbfe4c73467c9615559becd8', class: this.wrapperClasses }, h("div", { key: '7995fb27f33ebfa79ace1e7cd0e737d8bd466978', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
     }
     static get is() { return "q2-input"; }
     static get encapsulation() { return "shadow"; }
@@ -794,6 +803,29 @@ export class Q2Input {
                 "attribute": "_role",
                 "defaultValue": "undefined"
             },
+            "_updateValueOnInput": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": undefined
+                        }],
+                    "text": "Determines whether the input updates its value property as native input occurs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_update-value-on-input",
+                "defaultValue": "true"
+            },
             "ariaActivedescendant": {
                 "type": "string",
                 "mutable": false,
@@ -1626,7 +1658,7 @@ export class Q2Input {
                 "docs": {
                     "tags": [{
                             "name": "info",
-                            "text": "The visible value of formatted input fields may not match the element's `value` property.\nWhen setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic.\n`q2-input` does not change its own `value` outside of its default change event handler.\n\nIn `q2-input` where `type=\"currency\"`\n- element.value = 1234.56\n- visible value: $1,234.56"
+                            "text": "The visible value of formatted input fields may not match the element's `value` property.\nWhen setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic.\n`q2-input` updates its own `value` through its default input and change event handlers.\n\nIn `q2-input` where `type=\"currency\"`\n- element.value = 1234.56\n- visible value: $1,234.56"
                         }],
                     "text": "The value of the input field."
                 },

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

@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
-import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 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 = [
@@ -102,3 +102,38 @@ test.describe('q2-input — variants × themes', () => {
         }
     }
 });
+// '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:
+//   - maxlength + show-count: exercises --tct-input-count-font-size
+//   - icon-left: exercises --tct-input-icon-container-font-size
+//   - type=currency: exercises --tct-input-prefix-font-size (currency type auto-renders a prefix)
+const INPUT_FONT_SCALE_CASES = [
+    { name: 'optional', html: '<q2-input label="My input" placeholder="Enter text here" optional></q2-input>' },
+    {
+        name: 'visibility-toggle',
+        html: '<q2-input label="My input" placeholder="Enter text here" type="password" show-visibility-toggle="true" value="hunter2"></q2-input>',
+    },
+    {
+        name: 'with-count',
+        html: '<q2-input label="My input" placeholder="Enter text here" maxlength="50" show-count></q2-input>',
+    },
+    {
+        name: 'with-icon-left',
+        html: '<q2-input label="My input" placeholder="Enter text here" icon-left="star"></q2-input>',
+    },
+    {
+        name: 'type-currency-prefix',
+        html: '<q2-input label="My input" placeholder="Enter text here" type="currency" value="12.34"></q2-input>',
+    },
+];
+test.describe(`q2-input — scaled font size × themes`, () => {
+    for (const { name, html } of INPUT_FONT_SCALE_CASES) {
+        for (const theme of THEMES) {
+            test(`q2-input--${name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, html, { theme, setupLoc: true, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-input--${name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

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

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 * {
   box-sizing: border-box;
 }
@@ -132,6 +154,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-item-padding?: (<length-percentage>+) Controls the optional inner padding of the item grid.
  * @prop --tct-item-border?: (*) Controls the optional border shorthand applied to the item grid.
@@ -220,7 +264,7 @@ button {
 
 .body {
   color: var(--tct-item-body-color, inherit);
-  font-size: var(--tct-item-body-font-size, var(--app-font-size, 14px));
+  font-size: var(--tct-item-body-font-size, var(--app-font-size, var(--const-px-14, 14px)));
   font-weight: var(--tct-item-body-font-weight, 400);
   font-style: var(--tct-item-body-font-style, inherit);
 }
@@ -288,7 +332,7 @@ button {
 
 .header {
   color: var(--tct-item-header-color, inherit);
-  font-size: var(--tct-item-header-font-size, 16px);
+  font-size: var(--tct-item-header-font-size, var(--const-px-16, 16px));
   font-style: var(--tct-item-header-font-style, inherit);
   font-weight: var(--tct-item-header-font-weight, 600);
   line-height: var(--tct-item-header-line-height, 1.5);

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

@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
-import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 const DROPDOWN_OPTIONS = `
     <q2-option value="first">First</q2-option>
     <q2-option value="second">Second</q2-option>
@@ -130,3 +130,14 @@ test.describe('q2-item — variants × themes', () => {
         }
     }
 });
+// 'default' has both header and body slots, exercising
+// --tct-item-header-font-size and --tct-item-body-font-size.
+const DEFAULT_ITEM_VARIANT = VARIANTS.find(v => v.name === 'default');
+test.describe(`q2-item — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-item--default--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, DEFAULT_ITEM_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await expect(page).toHaveScreenshot(`q2-item--default--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

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

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-legend-item-gap: (<length-percentage>) Controls the column gap between elements within a legend item.
  * @prop --tct-legend-item-padding: (<length-percentage>+) Controls the inner padding of each legend item button.
@@ -127,7 +149,7 @@ ul {
   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));
+  font-size: var(--tct-legend-item-name-font-size, var(--app-font-size, var(--const-px-14, 14px)));
   font-weight: var(--tct-legend-item-name-font-weight, 600);
   line-height: var(--tct-legend-item-name-line-height, 1);
   text-align: left;
@@ -138,7 +160,7 @@ ul {
   display: inline-block;
   margin-left: auto;
   flex-grow: 0;
-  font-size: var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));
+  font-size: var(--tct-legend-item-value-font-size, var(--app-font-size, var(--const-px-14, 14px)));
   font-weight: var(--tct-legend-item-value-font-weight, 400);
   line-height: var(--tct-legend-item-value-line-height, 1);
   text-align: right;

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

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-link-color-inline: (<color>) Controls the text color of inline-style links.
  * @prop --tct-link-color-inline-active: (<color>) Controls the text color of inline-style links in the active state.

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

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 * {
   box-sizing: border-box;
 }
@@ -132,6 +154,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-list-header-min-height: (<length>) Controls the minimum height of the list header.
  * @prop --tct-list-header-padding: (<length-percentage>+) Controls the inner padding of the list header.
@@ -177,8 +221,8 @@ button {
 .header .label {
   width: 100%;
   height: var(--tct-list-label-height, 44px);
-  line-height: var(--tct-list-label-line-height, 44px);
-  font-size: var(--tct-list-label-font-size, var(--app-font-size, 14px));
+  line-height: var(--tct-list-label-line-height, var(--const-px-44, 44px));
+  font-size: var(--tct-list-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));
   font-weight: var(--tct-list-label-font-weight, 600);
   color: var(--tct-list-label-font-color, inherit);
 }

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

@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
-import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 const ITEMS = `
     <q2-item><span slot="header">Item one</span><span slot="body">Body content</span></q2-item>
     <q2-item><span slot="header">Item two</span><span slot="body">Body content</span></q2-item>
@@ -55,3 +55,14 @@ test.describe('q2-list — variants × themes', () => {
         }
     }
 });
+// 'with-label' exercises --tct-list-label-font-size and --tct-list-label-line-height
+// (both apply to the same .label element).
+const WITH_LABEL_VARIANT = VARIANTS.find(v => v.name === 'with-label');
+test.describe(`q2-list — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-list--with-label--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, WITH_LABEL_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await expect(page).toHaveScreenshot(`q2-list--with-label--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

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

@@ -66,6 +66,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 .flex {
   display: flex;
 }
@@ -113,6 +135,7 @@ button {
 }
 
 :host(:not([inline]):not([modifiers*=inline])) {
+  /* stylelint-disable-next-line tecton/require-t-px-fallback */
   font-size: var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)));
 }
 

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

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-message-background: (<color>) Controls the background color of the message container.
  * @prop --tct-message-font-color?: (<color>) Controls the optional text color of the message content.

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

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+}
 /**
  * @prop --tct-meter-bar-background-color: (<color>) Controls the background color of the meter track.
  * @prop --tct-meter-bar-border?: (*) Controls the optional border shorthand of the meter track.
@@ -133,16 +155,16 @@ button {
   --comp-meter-tick-visibility: visible;
 }
 .meter-container .label {
-  font-size: var(--tct-meter-label-font-size, 14px);
+  font-size: var(--tct-meter-label-font-size, var(--const-px-14, 14px));
   font-weight: var(--tct-meter-label-font-weight, 600);
   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-size: var(--tct-meter-description-font-size, var(--const-px-14, 14px));
   font-weight: var(--tct-meter-description-font-weight, 400);
   color: var(--tct-meter-description-color, inherit);
-  line-height: var(--tct-meter-description-line-height, 21px);
+  line-height: var(--tct-meter-description-line-height, var(--const-px-21, 21px));
   margin: var(--tct-meter-description-margin, 5px 0);
 }
 .meter-container .bar-container {

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

@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
-import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 // All variants set animated="false" to keep the loading shimmer out of the snapshot.
 const COMMON = `label="Balance" max-value="$1,000" max-label="Available" animated="false"`;
 const VARIANTS = [
@@ -75,3 +75,14 @@ test.describe('q2-meter — variants × themes', () => {
         }
     }
 });
+const WITH_DESCRIPTION = VARIANTS.find(v => v.name === 'with-description');
+test.describe(`q2-meter — scaled font size × themes`, () => {
+    if (WITH_DESCRIPTION) {
+        for (const theme of THEMES) {
+            test(`q2-meter--with-description--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, WITH_DESCRIPTION.html, { theme, fontSizePx: FONT_SCALE_PX, setupLoc: true });
+                await expect(page).toHaveScreenshot(`q2-meter--with-description--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});