q2-tecton-elements 1.70.2 → 1.71.0

package/dist/collection/components/q2-currency/q2-currency.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-currency-color: (<color>) Controls the base text color of the currency value.
  * @prop --tct-currency-font-size?: (<length-percentage>) Controls the optional font size of the currency value.
@@ -146,7 +168,7 @@ button {
 
 .currency-small {
   color: var(--tct-currency-small-color, inherit);
-  font-size: var(--tct-currency-small-font-size, 24px);
+  font-size: var(--tct-currency-small-font-size, var(--const-px-24, 24px));
   font-weight: var(--tct-currency-small-font-weight, 600);
 }
 .currency-small .superscript {
@@ -158,7 +180,7 @@ button {
 
 .currency-medium {
   color: var(--tct-currency-medium-color, inherit);
-  font-size: var(--tct-currency-medium-font-size, 42px);
+  font-size: var(--tct-currency-medium-font-size, var(--const-px-42, 42px));
   font-weight: var(--tct-currency-medium-font-weight, 600);
 }
 .currency-medium .superscript {
@@ -170,7 +192,7 @@ button {
 
 .currency-large {
   color: var(--tct-currency-large-color, inherit);
-  font-size: var(--tct-currency-large-font-size, 70px);
+  font-size: var(--tct-currency-large-font-size, var(--const-px-70, 70px));
   font-weight: var(--tct-currency-large-font-weight, 700);
 }
 .currency-large .superscript {

package/dist/collection/components/q2-currency/test/q2-currency-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 VARIANTS = [
     {
         name: 'default-positive-inline',
@@ -76,3 +76,15 @@ test.describe('q2-currency — variants × themes', () => {
         }
     }
 });
+// Each size uses a distinct --const-px- value: small=24, medium=42, large=70.
+const CURRENCY_FONT_SCALE_VARIANTS = VARIANTS.filter(v => v.name === 'size-small' || v.name === 'size-medium' || v.name === 'size-large');
+test.describe(`q2-currency — scaled font size × themes`, () => {
+    for (const variant of CURRENCY_FONT_SCALE_VARIANTS) {
+        for (const theme of THEMES) {
+            test(`q2-currency--${variant.name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, variant.html, { theme, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-currency--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-data-table/q2-data-table.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-data-table-width?: (<length-percentage>) Controls the optional explicit width of the data table.
  * @prop --tct-data-table-layout: (<custom-ident>) Controls the table-layout algorithm of the data table.
@@ -240,7 +262,7 @@ th.vertical-align-bottom {
 
 th .header-content {
   font-weight: var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));
-  font-size: var(--tct-data-table-header-font-size, var(--app-font-size, 14px));
+  font-size: var(--tct-data-table-header-font-size, var(--app-font-size, var(--const-px-14, 14px)));
 }
 th.sorted .header-content {
   font-weight: var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600));
@@ -436,7 +458,7 @@ q2-checkbox {
   column-gap: var(--app-scale-2x);
 }
 .tag-table q2-tag {
-  --tct-tag-font-size: var(--app-font-size, 14px);
+  --tct-tag-font-size: var(--app-font-size, var(--const-px-14, 14px));
   --tct-tag-padding-inline: var(--app-scale-2x, 10px);
   --tct-tag-height: var(--app-scale-4x, 20px);
   --tct-tag-margin: 0;

package/dist/collection/components/q2-data-table/test/q2-data-table-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 HEADERS_JSON = JSON.stringify([
     { title: 'Day', key: 'day' },
     { title: 'Sales', key: 'sales', align: 'center' },
@@ -110,3 +110,13 @@ test.describe('q2-data-table — variants × themes', () => {
         focusCase(SELECTABLE_MULTIPLE_LEFT_VARIANT, theme);
     }
 });
+// 'default' renders column headers, exercising --tct-data-table-header-font-size.
+const DEFAULT_VARIANT = VARIANTS.find(v => v.name === 'default');
+test.describe(`q2-data-table — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-data-table--default--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, buildHtml(DEFAULT_VARIANT), { theme, setupLoc: true, fontSizePx: FONT_SCALE_PX });
+            await expect(page).toHaveScreenshot(`q2-data-table--default--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

package/dist/collection/components/q2-detail/q2-detail.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-detail-gap-column: (<length-percentage>) Controls the column gap between the detail label and description.
  * @prop --tct-detail-gap-row?: (<length-percentage>) Controls the optional row gap between detail items.
@@ -153,27 +175,27 @@ button {
 }
 .label-size-xsmall {
   color: var(--tct-detail-label-xsmall-font-color, var(--tct-detail-label-font-color, inherit));
-  font-size: var(--tct-detail-label-xsmall-font-size, 14px);
+  font-size: var(--tct-detail-label-xsmall-font-size, var(--const-px-14, 14px));
   font-weight: var(--tct-detail-label-xsmall-font-weight, 400);
 }
 .label-size-small {
   color: var(--tct-detail-label-small-font-color, var(--tct-detail-label-font-color, inherit));
-  font-size: var(--tct-detail-label-small-font-size, 14px);
+  font-size: var(--tct-detail-label-small-font-size, var(--const-px-14, 14px));
   font-weight: var(--tct-detail-label-small-font-weight, 400);
 }
 .label-size-medium {
   color: var(--tct-detail-label-medium-font-color, var(--tct-detail-label-font-color, inherit));
-  font-size: var(--tct-detail-label-medium-font-size, 14px);
+  font-size: var(--tct-detail-label-medium-font-size, var(--const-px-14, 14px));
   font-weight: var(--tct-detail-label-medium-font-weight, 400);
 }
 .label-size-large {
   color: var(--tct-detail-label-large-font-color, var(--tct-detail-label-font-color, inherit));
-  font-size: var(--tct-detail-label-large-font-size, 16px);
+  font-size: var(--tct-detail-label-large-font-size, var(--const-px-16, 16px));
   font-weight: var(--tct-detail-label-large-font-weight, 400);
 }
 .label-size-xlarge {
   color: var(--tct-detail-label-xlarge-font-color, var(--tct-detail-label-font-color, inherit));
-  font-size: var(--tct-detail-label-xlarge-font-size, 18px);
+  font-size: var(--tct-detail-label-xlarge-font-size, var(--const-px-18, 18px));
   font-weight: var(--tct-detail-label-xlarge-font-weight, 400);
 }
 .label-size-inline {
@@ -195,27 +217,27 @@ button {
 }
 .description-size-xsmall {
   color: var(--tct-detail-description-xsmall-font-color, var(--tct-detail-description-font-color, inherit));
-  font-size: var(--tct-detail-description-xsmall-font-size, 14px);
+  font-size: var(--tct-detail-description-xsmall-font-size, var(--const-px-14, 14px));
   font-weight: var(--tct-detail-description-xsmall-font-weight, 400);
 }
 .description-size-small {
   color: var(--tct-detail-description-small-font-color, var(--tct-detail-description-font-color, inherit));
-  font-size: var(--tct-detail-description-small-font-size, 14px);
+  font-size: var(--tct-detail-description-small-font-size, var(--const-px-14, 14px));
   font-weight: var(--tct-detail-description-small-font-weight, 400);
 }
 .description-size-medium {
   color: var(--tct-detail-description-medium-font-color, var(--tct-detail-description-font-color, inherit));
-  font-size: var(--tct-detail-description-medium-font-size, 24px);
+  font-size: var(--tct-detail-description-medium-font-size, var(--const-px-24, 24px));
   font-weight: var(--tct-detail-description-medium-font-weight, 600);
 }
 .description-size-large {
   color: var(--tct-detail-description-large-font-color, var(--tct-detail-description-font-color, inherit));
-  font-size: var(--tct-detail-description-large-font-size, 28px);
+  font-size: var(--tct-detail-description-large-font-size, var(--const-px-28, 28px));
   font-weight: var(--tct-detail-description-large-font-weight, 600);
 }
 .description-size-xlarge {
   color: var(--tct-detail-description-xlarge-font-color, var(--tct-detail-description-font-color, inherit));
-  font-size: var(--tct-detail-description-xlarge-font-size, 32px);
+  font-size: var(--tct-detail-description-xlarge-font-size, var(--const-px-32, 32px));
   font-weight: var(--tct-detail-description-xlarge-font-weight, 700);
 }
 .description-size-inline {

package/dist/collection/components/q2-dropdown/q2-dropdown.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-dropdown-content-padding?: (<length-percentage>+) Controls the optional padding around the dropdown popover content.
  * @prop --tct-dropdown-popover-top-slot-padding: (<length-percentage>+) Controls the inner padding of the dropdown's popover-top slot.

package/dist/collection/components/q2-dropdown-item/q2-dropdown-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;
+    }
+  }
+}
 /**
  * @prop --tct-dropdown-item-disabled-opacity: (<number>) Controls the opacity of the dropdown item when disabled.
  * @prop --tct-dropdown-item-focus-box-shadow: (*) Controls the box shadow applied to the focused dropdown item button when the item is not disabled.

package/dist/collection/components/q2-editable-field/q2-editable-field.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-editable-field-btn-hover-background: (<color>) Controls the background color of the editable field action buttons (begin, save, cancel) on hover.
  * @prop --tct-editable-field-btn-icon-stroke-primary: (<color>) Controls the primary stroke color of the editable field action button icons.

package/dist/collection/components/q2-editable-field/q2-editable-field.js

@@ -200,7 +200,7 @@ export class Q2EditableField {
         return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
     }
     generateEditStateDOM() {
-        return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: this.hasHints ? this.hints : undefined, errors: this.hasErrors ? this.errors : undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.inputInput, onTctChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
+        return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: this.hasHints ? this.hints : undefined, errors: this.hasErrors ? this.errors : undefined, type: this.type, disabled: this.disabled, _updateValueOnInput: false, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.inputInput, onTctChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
     }
     generateReadStateDOM() {
         if (this.persistentLabel && this.locLabel) {
@@ -211,7 +211,7 @@ export class Q2EditableField {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '8231300cc04b5b2dce65d3c39ef2e4c0bc892696' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: 'bd200b48458ec6c7cb6c6928a1758420dbca66e3' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     static get is() { return "q2-editable-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,4 +63,27 @@ button {
 
 .invisible {
   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;
+    }
+  }
 }

package/dist/collection/components/q2-file-picker/q2-file-picker.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-file-picker-margin: (<length-percentage>+) Controls the outer margin of the file picker host.
  * @prop --tct-file-picker-margin-top: (<length-percentage>) Controls the top margin of the file picker host when --tct-file-picker-margin is not set.
@@ -184,6 +228,7 @@ button {
  * @prop --tct-file-picker-item-close-btn-active-color: (<color>) Controls the color of the file item close button when active.
  * @prop --tct-file-picker-item-close-btn-hover-focus-ring-color: (<color>) Controls the focus ring color of the file item close button on hover and focus.
  * @prop --tct-file-picker-item-close-btn-border-radius: (<length-percentage>) Controls the corner radius of the file item close button.
+ * @prop --tct-file-picker-item-close-btn-size: (<length>) Controls the width and height of the file item close button.
  * @prop --tct-file-picker-list-max-height: (<length-percentage>) Controls the maximum height of the file list container before scrolling.
  * @prop --tct-file-picker-scrollbar-color: (<color>) Controls the scrollbar thumb color of the file list container.
  * @prop --tct-file-picker-loading-size: (<length>) Controls the font size driving the picker-level loading spinner.
@@ -229,7 +274,7 @@ button {
 .drop-zone-text {
   --tct-link-font-weight: var(--tct-file-picker-browse-link-font-weight, 700);
   color: var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));
-  font-size: var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));
+  font-size: var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
   font-weight: var(--tct-file-picker-browse-link-font-weight, 700);
   margin-bottom: 0;
   margin-top: var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px));
@@ -237,7 +282,7 @@ button {
 
 .description {
   color: var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));
-  font-size: var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));
+  font-size: var(--tct-file-picker-description-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
   font-weight: var(--tct-file-picker-description-font-weight, 400);
   text-align: var(--tct-file-picker-description-text-align, left);
 }
@@ -254,7 +299,7 @@ button {
   color: var(--tct-file-picker-drop-zone-color, #747474);
   display: flex;
   flex-direction: column;
-  font-size: var(--tct-file-picker-drop-zone-font-size, var(--app-font-size, 14px));
+  font-size: var(--tct-file-picker-drop-zone-font-size, var(--app-font-size, var(--const-px-14, 14px)));
   font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);
   height: var(--tct-file-picker-drop-zone-height, 150px);
   justify-content: center;
@@ -295,12 +340,12 @@ button {
   --tct-btn-neutral-text-hover-outer-ring-color: var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));
   --tct-btn-icon-padding: 0;
   --tct-icon-stroke-primary: var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));
-  --tct-item-body-font-size: var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));
+  --tct-item-body-font-size: var(--tct-file-picker-item-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
   --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);
   --tct-item-border-radius: var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));
   --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));
   --tct-item-header-color: var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));
-  --tct-item-header-font-size: var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));
+  --tct-item-header-font-size: var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
   --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);
   --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));
   text-align: left;
@@ -313,6 +358,7 @@ button {
 }
 
 .file-item-loading {
+  /* stylelint-disable-next-line tecton/require-t-px-fallback */
   font-size: var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));
   margin-bottom: calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);
   margin-left: calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2);
@@ -352,33 +398,34 @@ button {
 .label {
   color: var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));
   display: inline-block;
-  font-size: var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));
+  font-size: var(--tct-file-picker-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));
   font-weight: var(--tct-file-picker-label-font-weight, 600);
   text-align: var(--tct-file-picker-label-text-align, left);
 }
 
 .loading {
+  /* stylelint-disable-next-line tecton/require-t-px-fallback */
   font-size: var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px));
 }
 
 .loading-file {
   color: var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));
-  font-size: var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));
+  font-size: var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
   font-weight: var(--tct-file-picker-loading-file-font-weight, 400);
   margin: 0;
 }
 
 .loading-message {
   color: var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));
-  font-size: var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));
+  font-size: var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
   font-weight: var(--tct-file-picker-loading-message-font-weight, 700);
   margin-bottom: var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));
   margin-top: var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px));
 }
 
 .dismiss-button {
-  height: 30px;
-  width: 30px;
+  --tct-btn-icon-width: var(--tct-file-picker-item-close-btn-size, 30px);
+  --tct-btn-icon-height: var(--tct-file-picker-item-close-btn-size, 30px);
 }
 .dismiss-button:hover {
   --tct-icon-stroke-primary: var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d));

package/dist/collection/components/q2-file-picker/test/q2-file-picker-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 DESC = 'This is some description text for the file picker.';
 const VARIANTS = [
     {
@@ -89,3 +89,16 @@ test.describe('q2-file-picker — variants × themes', () => {
         focusCase(BROWSE_DROP_DEFAULT, theme);
     }
 });
+// browse-default: exercises drop-zone, label, description font sizes.
+// browse-drop-with-status-uploaded: exercises file item (item-font-size, item-name-font-size).
+const FILE_PICKER_FONT_SCALE_VARIANTS = [BROWSE_DEFAULT, BROWSE_DROP_DEFAULT].concat(VARIANTS.filter(v => v.name === 'browse-drop-with-status-uploaded'));
+test.describe(`q2-file-picker — scaled font size × themes`, () => {
+    for (const variant of FILE_PICKER_FONT_SCALE_VARIANTS) {
+        for (const theme of THEMES) {
+            test(`q2-file-picker--${variant.name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, buildContent(variant), { theme, setupLoc: true, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-file-picker--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-form/q2-form.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-form-spacing-none: (<length-percentage>+) Controls the margin applied to form input children when spacing is none.
  * @prop --tct-form-spacing-compact: (<length-percentage>+) Controls the margin applied to form input children when spacing is compact.

package/dist/collection/components/q2-formatted-text/q2-formatted-text.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-formatted-text-color?: (<color>) Controls the optional text color of the formatted text in its default size.
  * @prop --tct-formatted-text-font-size?: (<length-percentage>) Controls the optional font size of the formatted text in its default size.
@@ -91,18 +113,18 @@ button {
 
 .formatted-text-small {
   color: var(--tct-formatted-text-small-color, inherit);
-  font-size: var(--tct-formatted-text-small-font-size, 24px);
+  font-size: var(--tct-formatted-text-small-font-size, var(--const-px-24, 24px));
   font-weight: var(--tct-formatted-text-small-font-weight, 600);
 }
 
 .formatted-text-medium {
   color: var(--tct-formatted-text-medium-color, inherit);
-  font-size: var(--tct-formatted-text-medium-font-size, 42px);
+  font-size: var(--tct-formatted-text-medium-font-size, var(--const-px-42, 42px));
   font-weight: var(--tct-formatted-text-medium-font-weight, 600);
 }
 
 .formatted-text-large {
   color: var(--tct-formatted-text-large-color, inherit);
-  font-size: var(--tct-formatted-text-large-font-size, 70px);
+  font-size: var(--tct-formatted-text-large-font-size, var(--const-px-70, 70px));
   font-weight: var(--tct-formatted-text-large-font-weight, 700);
 }

package/dist/collection/components/q2-formatted-text/test/q2-formatted-text-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 VARIANTS = [
     {
         name: 'inline',
@@ -52,3 +52,15 @@ test.describe('q2-formatted-text — variants × themes', () => {
         }
     }
 });
+// Each size uses a distinct --const-px- value: small=24, medium=42, large=70.
+const FORMATTED_TEXT_FONT_SCALE_VARIANTS = VARIANTS.filter(v => v.name === 'size-small' || v.name === 'size-medium' || v.name === 'size-large');
+test.describe(`q2-formatted-text — scaled font size × themes`, () => {
+    for (const variant of FORMATTED_TEXT_FONT_SCALE_VARIANTS) {
+        for (const theme of THEMES) {
+            test(`q2-formatted-text--${variant.name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, variant.html, { theme, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-formatted-text--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});