q2-tecton-elements 1.70.1 → 1.71.0

package/dist/collection/components/q2-btn/q2-btn.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-btn-border?: (*) Controls the optional border shorthand of the button.
  * @prop --tct-btn-border-radius: (<length-percentage>) Controls the corner radius of the button.
@@ -150,6 +194,9 @@ button {
  * @prop --tct-btn-font-size-small: (<length-percentage>) Controls the font size of the button when size is small.
  * @prop --tct-btn-font-size-medium: (<length-percentage>) Controls the font size of the button when size is medium.
  * @prop --tct-btn-font-size-large: (<length-percentage>) Controls the font size of the button when size is large.
+ * @prop --tct-btn-line-height-small: (<length-percentage>) Controls the line height of the button when size is small.
+ * @prop --tct-btn-line-height-medium: (<length-percentage>) Controls the line height of the button when size is medium.
+ * @prop --tct-btn-line-height-large: (<length-percentage>) Controls the line height of the button when size is large.
  * @prop --tct-btn-min-height-small?: (<length>) Controls the optional minimum height of the button when size is small.
  * @prop --tct-btn-min-height-medium?: (<length>) Controls the optional minimum height of the button when size is medium.
  * @prop --tct-btn-min-height-large?: (<length>) Controls the optional minimum height of the button when size is large.
@@ -510,6 +557,7 @@ button {
   transition-property: background, color, box-shadow, fill, border-color, border-width;
   outline: 0;
   min-height: var(--tct-btn-min-height, none);
+  letter-spacing: var(--tct-btn-letter-spacing, inherit);
 }
 button:disabled {
   opacity: var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
@@ -519,7 +567,6 @@ button.has-color, button.has-intent {
   font-size: var(--tct-btn-font-size, var(--t-btn-font-size, inherit));
   border-radius: var(--tct-btn-border-radius, var(--comp-border-radius));
   text-transform: var(--tct-btn-text-transform);
-  letter-spacing: var(--tct-btn-letter-spacing, inherit);
 }
 button.has-color:not(.has-size), button.has-intent:not(.has-size) {
   padding: var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
@@ -542,28 +589,31 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
 :host([size="4"]) button {
   padding: var(--tct-scale-6x, var(--app-scale-6x, 30px));
 }
-:host([size=small]) button:not(.intent-coin):not(.icon-only) {
-  padding: var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 0 15px));
-  font-size: var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px));
+:host([size=small]) button.has-intent:not(.intent-coin):not(.icon-only) {
+  padding: var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 6px 13px));
+  font-size: var(--tct-btn-font-size-small, var(--t-btn-font-size-small, var(--const-px-14, 14px)));
+  line-height: var(--tct-btn-line-height-small, var(--app-line-height, var(--const-px-14, 14px)));
   min-height: var(--tct-btn-min-height-small, 36px);
 }
-:host([size=small]) button:not(.intent-coin):not(.icon-only) ::slotted(q2-icon) {
+:host([size=small]) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon) {
   --tct-icon-size: var(--tct-btn-icon-size-small, 14px);
 }
-:host([size=medium]) button:not(.intent-coin):not(.icon-only) {
-  padding: var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 0 15px));
-  font-size: var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 14px));
+:host(:is(:not([size]), [size=medium])) button.has-intent:not(.intent-coin):not(.icon-only) {
+  padding: var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 10px 13px));
+  font-size: var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, var(--const-px-14, 14px)));
+  line-height: var(--tct-btn-line-height-medium, var(--app-line-height, var(--const-px-14, 14px)));
   min-height: var(--tct-btn-min-height-medium, 44px);
 }
-:host([size=medium]) button:not(.intent-coin):not(.icon-only) ::slotted(q2-icon) {
+:host(:is(:not([size]), [size=medium])) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon) {
   --tct-icon-size: var(--tct-btn-icon-size-medium, 16px);
 }
-:host([size=large]) button:not(.intent-coin):not(.icon-only) {
-  padding: var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 0 20px));
-  font-size: var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 14px));
+:host([size=large]) button.has-intent:not(.intent-coin):not(.icon-only) {
+  padding: var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 13px 18px));
+  font-size: var(--tct-btn-font-size-large, var(--t-btn-font-size-large, var(--const-px-14, 14px)));
+  line-height: var(--tct-btn-line-height-large, var(--app-line-height, var(--const-px-14, 14px)));
   min-height: var(--tct-btn-min-height-large, 50px);
 }
-:host([size=large]) button:not(.intent-coin):not(.icon-only) ::slotted(q2-icon) {
+:host([size=large]) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon) {
   --tct-icon-size: var(--tct-btn-icon-size-large, 18px);
 }
 :host(:not([intent])) button:focus-visible {
@@ -1177,7 +1227,7 @@ button.intent-coin:focus:active:not([disabled]) {
 
 .coin-label {
   color: var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));
-  font-size: var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));
+  font-size: var(--tct-btn-coin-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));
   max-width: 100px;
   text-align: center;
   text-overflow: ellipsis;
@@ -1206,7 +1256,7 @@ button.intent-coin:focus:active:not([disabled]) {
 }
 .coin-wrapper .coin-label {
   color: var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));
-  font-size: var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));
+  font-size: var(--tct-btn-coin-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));
   margin-top: var(--tct-btn-coin-gap, var(--app-scale-2x, 10px));
   max-width: 100px;
   text-align: center;

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

@@ -8,10 +8,6 @@ import { getAriaValueFromProp, handleAriaLabel, handleColor, isEventFromElement,
  */
 export class Q2Btn {
     constructor() {
-        /**
-         * Defines the size of q2-btn, it renders as default size if not provided.
-         */
-        this.size = 'medium';
         /** The default behavior of the button. */
         this.type = 'button';
         this.handleButtonSize = () => {
@@ -629,8 +625,7 @@ export class Q2Btn {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "size",
-                "defaultValue": "'medium'"
+                "attribute": "size"
             },
             "tabIndex": {
                 "type": "number",

package/dist/collection/components/q2-btn/test/q2-btn-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 INTENTS = [
     'workflow-primary',
     'workflow-secondary',
@@ -10,13 +10,25 @@ const INTENTS = [
     'neutral-text',
     'coin',
 ];
-const SIZES = ['small', 'medium', 'large'];
+const SIZES = ['small', 'medium', 'large', 'none'];
 const coinHtml = () => `<q2-btn intent="coin" label="My Button"><q2-avatar icon="star"></q2-avatar></q2-btn>`;
 const labelAndIconHtml = (intent) => intent === 'coin'
     ? coinHtml()
     : `<q2-btn intent="${intent}"><q2-icon type="edit"></q2-icon><span>My Button</span></q2-btn>`;
 const iconOnlyHtml = (intent) => intent === 'coin' ? coinHtml() : `<q2-btn intent="${intent}"><q2-icon type="edit"></q2-icon></q2-btn>`;
-const sizeHtml = (size) => `<q2-btn intent="workflow-primary" size="${size}"><q2-icon type="edit"></q2-icon><span>My Button</span></q2-btn>`;
+const sizeHtml = (intent, size) => {
+    const sizeAttr = size === 'none' ? '' : ` size="${size}"`;
+    return `<q2-btn intent="${intent}"${sizeAttr}><q2-icon type="edit"></q2-icon><span>My Button</span></q2-btn>`;
+};
+const plainHtml = () => `<q2-btn><q2-icon type="edit"></q2-icon><span>My Button</span></q2-btn>`;
+const SIZED_INTENTS = [
+    'workflow-primary',
+    'workflow-secondary',
+    'workflow-destroy',
+    'workflow-escape',
+    'neutral',
+    'neutral-text',
+];
 const restingCase = (name, html, theme) => {
     test(`${name} — ${theme}`, async ({ page }) => {
         await setupPage(page, html, { theme });
@@ -70,10 +82,37 @@ test.describe('q2-btn icon-only — intents × themes (resting)', () => {
         }
     }
 });
-test.describe('q2-btn workflow-primary — sizes × themes (resting)', () => {
-    for (const size of SIZES) {
+test.describe('q2-btn intents — sizes × themes (resting)', () => {
+    for (const intent of SIZED_INTENTS) {
+        for (const size of SIZES) {
+            for (const theme of THEMES) {
+                restingCase(`q2-btn--${intent}--size-${size}`, sizeHtml(intent, size), theme);
+            }
+        }
+    }
+});
+test.describe('q2-btn plain (no intent) — states × themes', () => {
+    for (const theme of THEMES) {
+        restingCase('q2-btn--plain--resting', plainHtml(), theme);
+        hoverCase('q2-btn--plain--hover', plainHtml(), theme);
+        focusCase('q2-btn--plain--focus', plainHtml(), theme);
+    }
+});
+// coin exercises --tct-btn-coin-label-font-size.
+// workflow-primary at each size exercises --tct-btn-font-size-small/medium/large.
+const BTN_FONT_SCALE_CASES = [
+    { name: 'coin', html: coinHtml() },
+    { name: 'workflow-primary--size-small', html: sizeHtml('workflow-primary', 'small') },
+    { name: 'workflow-primary--size-medium', html: sizeHtml('workflow-primary', 'medium') },
+    { name: 'workflow-primary--size-large', html: sizeHtml('workflow-primary', 'large') },
+];
+test.describe(`q2-btn — scaled font size × themes`, () => {
+    for (const { name, html } of BTN_FONT_SCALE_CASES) {
         for (const theme of THEMES) {
-            restingCase(`q2-btn--workflow-primary--size-${size}`, sizeHtml(size), theme);
+            test(`q2-btn--${name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, html, { theme, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-btn--${name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
         }
     }
 });

package/dist/collection/components/q2-calendar/q2-calendar.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-calendar-margin: (<length-percentage>+) Controls the outer margin of the calendar host.
  * @prop --tct-calendar-margin-top: (<length-percentage>) Controls the top margin of the calendar host when --tct-calendar-margin is not set.
@@ -143,7 +165,7 @@ q2-popover {
 
 .calendar-label {
   --comp-label-padding: var(--tct-calendar-label-padding, var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);
-  font-size: var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));
+  font-size: var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, var(--const-px-16, 16px)));
   flex: 1 1;
   flex-basis: calc(100% - var(--tct-btn-icon-width, 44px));
   margin: 0;
@@ -155,7 +177,7 @@ q2-popover {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, 16px));
+  font-size: var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, var(--const-px-16, 16px)));
   font-weight: var(--tct-calendar-month-font-weight, var(--t-calendar-month-font-weight, 600));
   text-align: center;
 }
@@ -222,7 +244,7 @@ td:focus-visible {
 .today-decorator {
   text-transform: uppercase;
   font-weight: 700;
-  font-size: var(--tct-calendar-today-decorator-font-size, 10px);
+  font-size: var(--tct-calendar-today-decorator-font-size, var(--const-px-10, 10px));
   height: 12px;
 }
 
@@ -231,7 +253,7 @@ td:focus-visible {
 }
 
 .calendar-disclaimer {
-  font-size: var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));
+  font-size: var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, var(--const-px-12, 12px)))));
   border-style: solid;
   border-width: var(--tct-calendar-disclaimer-border-width, var(--t-calendar-disclaimer-border-width, 1px 0 0 0));
   border-color: var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));

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

@@ -181,7 +181,7 @@ export class Q2Calendar {
             }
         };
         this.onInputClick = () => {
-            if (this.disabled)
+            if (this.disabled || this.readonly)
                 return;
             this.toggleCalendar();
         };
@@ -779,7 +779,7 @@ export class Q2Calendar {
     // #endregion
     // #region Render Methods
     renderCalendarDays() {
-        return (h("table", { role: "grid", "aria-labelledby": "table-label", ref: ref => (this.calendarTable = ref) }, h("thead", null, h("tr", null, [...Array(7).keys()].map(index => (h("th", { scope: "col", "aria-label": this.dayStrings[index] }, this.dayAbbrStrings[index]))))), h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm), "test-id": "calendarTableBody" }, this.currentWeeks.map(week => (h("tr", null, week.map(day => {
+        return (h("table", { role: "grid", "aria-labelledby": "table-label", ref: ref => (this.calendarTable = ref) }, h("caption", { class: "sr" }, loc('tecton.element.calendar.caption')), h("thead", null, h("tr", null, [...Array(7).keys()].map(index => (h("th", { scope: "col", "aria-label": this.dayStrings[index] }, this.dayAbbrStrings[index]))))), h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm), "test-id": "calendarTableBody" }, this.currentWeeks.map(week => (h("tr", null, week.map(day => {
             var _a;
             let ariaLabel = '';
             if (day.isToday)
@@ -800,11 +800,13 @@ export class Q2Calendar {
         return (h("q2-message", { class: "calendar-hint sr", ref: el => (this.hintMessageElement = el), type: this.hintMessageType }, this.hintMessage));
     }
     renderInputField() {
-        const { isTypeable } = this;
-        return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, valid: this.valid, "aria-expanded": `${!!this.open}`, "aria-controls": "calendar-popover", hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
+        const { isTypeable, label } = this;
+        return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, valid: this.valid, ariaExpanded: `${!!this.open}`, ariaControls: "calendar-popover", ariaHaspopup: "dialog", hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: loc('tecton.element.calendar.toggleAriaLabel', [
+                label ? loc(label) : loc('tecton.element.calendar.defaultLabel'),
+            ]), ariaExpanded: `${!!this.open}`, "hide-label": true, disabled: !!this.disabled || !!this.readonly }, h("q2-icon", { type: "calendar" })))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'b13259be3c0d64bff32654faf0c738a7a7450c4e', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '2e183cd962e7abc4186b93da7edd835e0db5504a', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
+        return (h("click-elsewhere", { key: 'e7bcb2f1aec6ca1149742b0b3edc0a7bbf9ce925', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: 'c80c5d1ecfb42a319bba294b20f519a2be6808e1', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
     }
     static get is() { return "q2-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-calendar/q2-month-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;
+    }
+  }
+}
 .month-container {
   --comp-month-primary-background: var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));
   --comp-month-primary-font-color: var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));

package/dist/collection/components/q2-calendar/test/q2-calendar-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";
 // Resting variants — input field in its default closed state.
 // Note: variants that show the calendar popover use a fixed value (2025-05-20) so
 // the rendered month/year is stable across runs. Resting variants without a value
@@ -169,3 +169,36 @@ test.describe('q2-calendar — variants × themes', () => {
         dayHoverCase(POPOVER_VARIANT, theme);
     }
 });
+// 'default' (resting, closed) exercises --tct-calendar-label-font-size.
+// POPOVER_VARIANT (open) exercises --tct-calendar-month-font-size.
+// disclaimer variant exercises --tct-calendar-disclaimer-font-size.
+const CALENDAR_DISCLAIMER_VARIANT = {
+    name: 'with-disclaimer',
+    html: `<q2-calendar label="My calendar" disclaimer="Rates subject to change."></q2-calendar>`,
+};
+test.describe(`q2-calendar — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-calendar--default--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, `<q2-calendar label="My calendar" placeholder="My date"></q2-calendar>`, {
+                theme,
+                setupLoc: true,
+                fontSizePx: FONT_SCALE_PX,
+            });
+            await expect(page).toHaveScreenshot(`q2-calendar--default--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+        test(`q2-calendar--popover--expanded-default--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await freezeClock(page);
+            await setupPage(page, POPOVER_VARIANT.html, { theme, setupLoc: true, fontSizePx: FONT_SCALE_PX });
+            await openPopoverViaKeyboard(page);
+            await expect(page).toHaveScreenshot(`q2-calendar--popover--expanded-default--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+        test(`q2-calendar--with-disclaimer--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, CALENDAR_DISCLAIMER_VARIANT.html, {
+                theme,
+                setupLoc: true,
+                fontSizePx: FONT_SCALE_PX,
+            });
+            await expect(page).toHaveScreenshot(`q2-calendar--with-disclaimer--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

package/dist/collection/components/q2-card/q2-card.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-card-background: (<color>) Controls the background color of the card container.
  * @prop --tct-card-backdrop-filter?: (*) Controls the optional backdrop-filter applied to the card container.
@@ -252,7 +274,7 @@ p {
 
 h3 {
   font-weight: var(--tct-card-font-weight, var(--t-card-font-weight, 600));
-  font-size: var(--tct-card-font-size, var(--t-card-font-size, 17px));
+  font-size: var(--tct-card-font-size, var(--t-card-font-size, var(--const-px-17, 17px)));
   line-height: var(--tct-card-title-line-height, var(--app-line-height, 1.428571429em));
   text-overflow: ellipsis;
   overflow: hidden;

package/dist/collection/components/q2-card/test/q2-card-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 your card description which can be up to two lines long.';
 const SHORT_DESC = 'This is your card description';
 const VARIANTS = [
@@ -69,3 +69,12 @@ test.describe('q2-card — variants × themes', () => {
         focusCase(DEFAULT_VARIANT, theme);
     }
 });
+// 'default' exercises --tct-card-font-size (card title h3).
+test.describe(`q2-card — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-card--default--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, DEFAULT_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await expect(page).toHaveScreenshot(`q2-card--default--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

package/dist/collection/components/q2-card-image/q2-card-image.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;
+    }
+  }
+}
 :host {
   /**
    * @prop --tct-card-image-base-blur: (<length>) Controls the blur radius applied to the base card image layer.
@@ -360,7 +382,7 @@ button {
 }
 
 .card-status-text {
-  font-size: 14px;
+  font-size: var(--const-px-14, 14px);
   font-family: var(--uux-app-fontFamily, OpenSans, Helvetica Neue, Helvetica, Arial, sans-serif);
   text-transform: uppercase;
   white-space: nowrap;

package/dist/collection/components/q2-card-image/test/q2-card-image-test.vr.js

@@ -2,7 +2,7 @@ import { readFileSync } from "fs";
 import { join } from "path";
 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";
 // Inline FI logo as a data URI so the test stays hermetic — `setContent` runs
 // against `about:blank`, so relative paths from the .html playground would not
 // resolve here.
@@ -149,3 +149,11 @@ test.describe('q2-card-image — variants × themes', () => {
         focusCase(CLICKABLE_VARIANT, theme);
     }
 });
+test.describe(`q2-card-image — font scale ${FONT_SCALE_PX}px × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-card-image--status-enabled--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, `<q2-card-image background="primary" card-status="enabled" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`, { theme, fontSizePx: FONT_SCALE_PX });
+            await expect(page).toHaveScreenshot(`q2-card-image--status-enabled--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

package/dist/collection/components/q2-carousel/q2-carousel.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-carousel-background: (<color>) Controls the background color of the insufficient-pane feedback container.
  * @prop --tct-carousel-gap: (<length-percentage>) Controls the gap between the carousel content row and the pagination row.
@@ -93,8 +115,6 @@ button {
  * @prop --tct-carousel-navigation-arrow-opacity: (<number>) Controls the opacity of the navigation arrows.
  * @prop --tct-carousel-arrow-background: (<color>) Controls the background color of the navigation arrow buttons.
  * @prop --tct-carousel-arrow-hover-background: (<color>) Controls the background color of the navigation arrow buttons on hover and focus.
- * @prop --tct-carousel-arrow-font-color: (<color>) Controls the color of the icon inside the navigation arrow buttons.
- * @prop --tct-carousel-btn-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the navigation arrow icon.
  * @prop --tct-carousel-autoplay-hover-background: (<color>) Controls the background color of the autoplay toggle button on hover and focus.
  * @prop --tct-carousel-autoplay-icon-color: (<color>) Controls the color of the autoplay toggle button icon.
  * @prop --tct-carousel-autoplay-icon-height: (<length>) Controls the height of the autoplay toggle button icon.
@@ -320,44 +340,14 @@ q2-carousel {
 }
 
 .q2-carousel-navigation-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: 44px;
-  height: 44px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  opacity: var(--tct-carousel-navigation-arrow-opacity, 1);
-  -webkit-tap-highlight-color: transparent;
-}
-.q2-carousel-navigation-button::before {
-  content: "";
-  position: absolute;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background-color: var(--tct-carousel-arrow-background, var(--t-primary, #6a4a9e));
-  transition: background-color var(--t-tween-time-in-2, 200ms) var(--t-tween-ease-inout, cubic-bezier(0.4, 0, 0.2, 1));
-}
-.q2-carousel-navigation-button:hover::before, .q2-carousel-navigation-button:focus-visible::before {
-  background-color: var(--tct-carousel-arrow-hover-background, var(--t-primary-d1, #5f438e));
-}
-.q2-carousel-navigation-button:focus-visible {
-  outline: none;
-  box-shadow: none;
-}
-.q2-carousel-navigation-button:focus-visible::before {
-  outline: 2px solid var(--const-focus-color, #1a73e8);
-  outline-offset: 2px;
-}
-.q2-carousel-navigation-button q2-icon {
-  position: relative;
+  --tct-btn-icon-width: 32px;
+  --tct-btn-icon-height: 32px;
+  --tct-btn-icon-border-radius: 50%;
+  --tct-btn-icon-padding: 0;
   --tct-icon-size: 16px;
-  --tct-icon-stroke-primary: var(--tct-carousel-arrow-font-color, var(--t-base, #ffffff));
-  --tct-icon-stroke-secondary: var(--tct-carousel-btn-icon-stroke-secondary, var(--app-gray, #747474));
+  --tct-btn-primary-background: var(--tct-carousel-arrow-background, var(--tct-carousel-indicator-active, var(--t-primary, #6a4a9e)));
+  --tct-btn-primary-hover-background: var(--tct-carousel-arrow-hover-background, var(--t-primary-d1, #5f438e));
+  opacity: var(--tct-carousel-navigation-arrow-opacity, 1);
 }
 
 .q2-carousel-autoplay-control {