q2-tecton-elements 1.70.2 → 1.71.0

package/dist/collection/components/q2-modal/q2-modal.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-modal-background: (<color>) Controls the background color of the modal dialog.
  * @prop --tct-modal-color: (<color>) Controls the text color of the modal dialog.
@@ -192,7 +214,7 @@ dialog[open].is-closing::backdrop {
   border-radius: var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px));
 }
 .content .description {
-  font-size: var(--tct-modal-description-font-size, 14px);
+  font-size: var(--tct-modal-description-font-size, var(--const-px-14, 14px));
 }
 .content.more-gradient {
   -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);

package/dist/collection/components/q2-modal/test/q2-modal-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 ACTIONS = `
     <q2-btn slot="action" intent="workflow-primary" label="Submit"></q2-btn>
     <q2-btn slot="action" intent="workflow-secondary" label="Cancel"></q2-btn>
@@ -104,3 +104,14 @@ test.describe('q2-modal — variants × themes', () => {
         }
     }
 });
+test.describe(`q2-modal — scaled font size × themes`, () => {
+    if (BASIC_VARIANT) {
+        for (const theme of THEMES) {
+            test(`q2-modal--basic--open--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, BASIC_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX, setupLoc: true });
+                await openModal(page);
+                await expect(page).toHaveScreenshot(`q2-modal--basic--open--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-optgroup/q2-optgroup.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-optgroup-header-background: (<color>) Controls the background color of the optgroup header.
  * @prop --tct-optgroup-header-color?: (<color>) Controls the optional text color of the optgroup header.
@@ -84,7 +106,7 @@ button {
   --comp-header-padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));
   background: var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--t-base, #FFFFFF))));
   color: var(--tct-optgroup-header-color, inherit);
-  font-size: var(--tct-optgroup-header-font-size, 14px);
+  font-size: var(--tct-optgroup-header-font-size, var(--const-px-14, 14px));
   font-weight: var(--tct-optgroup-header-font-weight, 600);
   letter-spacing: var(--tct-optgroup-header-letter-spacing, inherit);
   position: var(--tct-optgroup-header-position, sticky);

package/dist/collection/components/q2-option/q2-option.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-option-active-background: (<color>) Controls the background color of the option in its active, focused, and hover states.
  * @prop --tct-option-active-color?: (<color>) Controls the optional text color of the option in its active, focused, and hover states.

package/dist/collection/components/q2-option-list/q2-option-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;
+    }
+  }
+}
 /**
  * @prop --tct-option-list-line-height: (<number> | <length-percentage>) Controls the line height of the option list container.
  */

package/dist/collection/components/q2-otp/q2-otp.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-otp-margin?: (<length-percentage>+) Controls the margin of the component host as a shorthand. Overrides --tct-otp-margin-top and --tct-otp-margin-bottom when set.
  * @prop --tct-otp-margin-top: (<length-percentage>) Controls the top margin of the component host.
@@ -119,9 +141,9 @@ button {
   --comp-otp-field-border-radius: var(--tct-otp-field-border-radius, var(--tct-border-radius-2, var(--app-border-radius-2, 8px)));
   --comp-otp-field-border-width: var(--tct-otp-field-border-width, 1px);
   --comp-otp-field-font-color: var(--tct-otp-field-font-color, var(--t-text, inherit));
-  --comp-otp-field-font-size: var(--tct-otp-field-font-size, var(--app-font-size, 16px));
+  --comp-otp-field-font-size: var(--tct-otp-field-font-size, var(--app-font-size, var(--const-px-16, 16px)));
   --comp-otp-field-masked-color: var(--tct-otp-field-masked-color, var(--tct-otp-field-font-color, var(--t-text, #1f1f1f)));
-  --comp-otp-field-masked-size: var(--tct-otp-field-masked-size, var(--tct-otp-field-masked-font-size, 8px));
+  --comp-otp-field-masked-size: var(--tct-otp-field-masked-size, var(--tct-otp-field-masked-font-size, var(--const-px-8, 8px)));
   --comp-otp-field-font-weight: var(--tct-otp-field-font-weight, 400);
   --comp-otp-field-focus-box-shadow: var(--tct-otp-field-focus-box-shadow, var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc));
   --comp-otp-field-error-border-color: var(--tct-otp-field-error-border-color, var(--const-stoplight-alert, #c30000));
@@ -132,7 +154,7 @@ button {
   --comp-otp-field-success-focus-box-shadow: var(--tct-otp-field-success-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-success-focus-ring-color));
   --comp-otp-field-disabled-opacity: var(--tct-otp-field-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
   --comp-otp-separator-color: var(--tct-otp-separator-color, var(--t-textA, var(--t-a11y-gray-color, #4d4d4d)));
-  --comp-otp-separator-font-size: var(--tct-otp-separator-font-size, 20px);
+  --comp-otp-separator-font-size: var(--tct-otp-separator-font-size, var(--const-px-20, 20px));
   --comp-otp-separator-font-weight: var(--tct-otp-separator-font-weight, 600);
   align-items: center;
   display: inline-flex;
@@ -156,7 +178,7 @@ button {
 
 .helper-text {
   color: var(--tct-otp-helper-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));
-  font-size: var(--tct-otp-helper-font-size, var(--app-font-size-small, 12px));
+  font-size: var(--tct-otp-helper-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
   text-align: center;
 }
 
@@ -211,6 +233,7 @@ button {
   caret-color: transparent;
   color: transparent;
   cursor: text;
+  /* stylelint-disable-next-line tecton/require-t-px-fallback */
   font-size: 16px;
   height: 100%;
   inset: 0;

package/dist/collection/components/q2-otp/test/q2-otp-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',
@@ -81,3 +81,14 @@ test.describe('q2-otp — variants × themes', () => {
         }
     }
 });
+const HELPER_TEXT = VARIANTS.find(v => v.name === 'helper-text');
+test.describe(`q2-otp — scaled font size × themes`, () => {
+    if (HELPER_TEXT) {
+        for (const theme of THEMES) {
+            test(`q2-otp--helper-text--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, HELPER_TEXT.html, { theme, fontSizePx: FONT_SCALE_PX, setupLoc: true });
+                await expect(page).toHaveScreenshot(`q2-otp--helper-text--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-pagination/q2-pagination.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-pagination-color?: (<color>) Controls the optional text color of the pagination container.
  * @prop --tct-pagination-font-size?: (<length-percentage>) Controls the optional font size of pagination text.

package/dist/collection/components/q2-pill/q2-pill.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-pill-margin: (<length-percentage>) Controls the trailing inline margin between sibling pills.
  * @prop --tct-pill-min-height: (<length>) Controls the minimum height of the pill (and its popover container).
@@ -81,6 +103,7 @@ button {
  * @prop --tct-pill-btn-color: (<color>) Controls the text color of the pill button in the default state.
  * @prop --tct-pill-btn-font-size: (<length-percentage>) Controls the font size of the pill button.
  * @prop --tct-pill-btn-font-weight: (<number>) Controls the font weight of the pill button.
+ * @prop --tct-pill-btn-letter-spacing?: (<length>) Controls the optional letter spacing of the pill button.
  * @prop --tct-pill-btn-tween: (*) Controls the transition timing of the pill button's interactive state changes.
  * @prop --tct-pill-btn-focus-box-shadow: (*) Controls the box shadow of the pill button when focused.
  * @prop --tct-pill-btn-focus-visible-box-shadow: (*) Controls the box shadow of the pill button when focused via keyboard.
@@ -117,6 +140,10 @@ button {
  * @prop --tct-pill-tertiary-active-hover-border-color: (<color>) Controls the border color of the pill button when active and theme is tertiary, on hover.
  * @prop --tct-pill-tertiary-active-box-shadow?: (*) Controls the optional box shadow of the pill button when active and theme is tertiary.
  * @prop --tct-pill-tertiary-active-backdrop-filter?: (*) Controls the optional backdrop-filter of the pill button when active and theme is tertiary.
+ * @prop --tct-pill-decorator-icon-primary-stroke: (<color>) Controls the primary stroke color of a q2-icon placed in the decorator slot.
+ * @prop --tct-pill-decorator-icon-secondary-stroke: (<color>) Controls the secondary stroke color of a q2-icon placed in the decorator slot.
+ * @prop --tct-pill-active-decorator-icon-primary-stroke: (<color>) Controls the primary stroke color of a q2-icon placed in the decorator slot when the pill is active.
+ * @prop --tct-pill-active-decorator-icon-secondary-stroke: (<color>) Controls the secondary stroke color of a q2-icon placed in the decorator slot when the pill is active.
  */
 :host {
   display: inline-block;
@@ -154,6 +181,7 @@ q2-popover,
   --comp-btn-backdrop-filter: var(--tct-pill-btn-backdrop-filter, none);
   --comp-hover-btn-background: var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));
   --comp-btn-padding: var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));
+  --comp-btn-letter-spacing: var(--tct-pill-btn-letter-spacing, inherit);
   --comp-btn-color: var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));
   --comp-active-btn-color: var(--tct-pill-active-btn-color, var(--comp-btn-background));
   --comp-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));
@@ -234,15 +262,23 @@ q2-popover,
   backdrop-filter: var(--comp-btn-backdrop-filter);
   border-width: var(--comp-pill-btn-border-width);
   border-color: var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));
+  letter-spacing: var(--comp-btn-letter-spacing);
   padding-inline: var(--comp-btn-padding);
   padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));
-  font-size: var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));
+  font-size: var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, var(--const-px-14, 14px))));
   font-weight: var(--tct-pill-btn-font-weight, 400);
   color: var(--comp-btn-color);
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: var(--app-scale-1x, 5px);
   width: 100%;
   text-align: start;
 }
+.btn-primary ::slotted(q2-icon[slot=decorator]) {
+  --tct-icon-size: 1em;
+  --tct-icon-stroke-primary: var(--tct-pill-decorator-icon-primary-stroke, var(--comp-btn-color));
+  --tct-icon-stroke-secondary: var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-btn-color));
+}
 .btn-primary:focus {
   box-shadow: var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring));
 }
@@ -278,6 +314,10 @@ q2-popover,
   background: var(--comp-hover-active-btn-background);
   border-color: var(--comp-hover-active-btn-border-color);
 }
+:host([active]:not([active=false])) .btn-primary ::slotted(q2-icon[slot=decorator]) {
+  --tct-icon-stroke-primary: var(--tct-pill-active-decorator-icon-primary-stroke, var(--tct-pill-decorator-icon-primary-stroke, var(--comp-active-btn-color)));
+  --tct-icon-stroke-secondary: var(--tct-pill-active-decorator-icon-secondary-stroke, var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-active-btn-color)));
+}
 
 .btn-close {
   background: transparent;

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

@@ -6,6 +6,7 @@ import { shouldShowActionSheet, showActionSheetList } from "../../utils/action-s
  * @name Pill
  * @category Display
  * @summary Use for displaying and removing active filters in data views.
+ * @slot decorator - An optional slot that supports an [Icon](https://tecton.q2developer.com/design-system/q2-icon) to be displayed before the pill label.
  * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.
  * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.
  */
@@ -54,6 +55,20 @@ export class Q2Pill {
             this.primaryBtn.focus();
             this.handleSelectionChanges(result);
         };
+        this.filterSlottedElements = () => {
+            if (!('HTMLSlotElement' in window))
+                return;
+            const slot = this.hostElement.shadowRoot.querySelector('slot[name="decorator"]');
+            const assignedElements = Array.from((slot === null || slot === void 0 ? void 0 : slot.assignedElements()) || []);
+            if (!assignedElements.length)
+                return;
+            const approvedElements = ['Q2-ICON'];
+            assignedElements.forEach((element, index) => {
+                if (!approvedElements.includes(element.tagName) || index > 0) {
+                    element.remove();
+                }
+            });
+        };
         this.getOption = async (value) => {
             if (this.optionList) {
                 const options = await this.getOptionListOptions();
@@ -178,6 +193,7 @@ export class Q2Pill {
             this.updateSlotState();
             this.determineOptionCount();
             this.updateSelectedOptionElements();
+            this.filterSlottedElements();
         };
         this.onPopoverState = (event) => {
             const { open, action } = event.detail;
@@ -238,6 +254,7 @@ export class Q2Pill {
     componentDidLoad() {
         overrideFocus(this.hostElement);
         this.syncValueProperties();
+        this.filterSlottedElements();
     }
     componentDidRender() {
         this.scheduledAfterRender.forEach(fn => fn());
@@ -393,7 +410,7 @@ export class Q2Pill {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: 'af7276f19b602f08f69bd1b7e0dc86108796db68', onChange: this.onClickElsewhere }, h("div", { key: '329da4b893e1988902269e58f95fb182d6e5991e', class: wrapperClassNames.join(' ') }, h("div", { key: 'd7c48db3fa02c71d2c9427600aa76435435cf213', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'cdbfab7954662c929566935b20d9bbc209d3ff2d', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, truncatedText)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'e41cd2f6024b51a11a2dcb509dad18fad4f0019d', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'e235761dfe3537b47fb80a72150d87e60091f47b', class: "popover-content" }, h("div", { key: 'c80a8dba5b832f3b1fbb286648289d3bc81e7c0a', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '44e011b6808a6c038cfb264c5a786f6512dfd1bc', name: "popover-top" })), h("q2-option-list", { key: '546d12c22227897acd089360a119262ab8d8d732', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: 'e115796433e08a2e346362bba8a852b37728f94d' })), h("div", { key: '92014390d384a3a5ff71aad12959ef7c5f91de17', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '1bff78f8808f83e1346ee0f482befae2ee16312f', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '5bbfce776dcd2ef3ac7097b37fd2df039d47c21f', onChange: this.onClickElsewhere }, h("div", { key: '9d8d7a4b6afb1d931d762a0e656509a2036180ba', class: wrapperClassNames.join(' ') }, h("div", { key: '5bbf245bd78d2ed075b9a16cc46396528f20b823', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '494b1555d332a62c8a2946da260a9bb5f26849d5', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, h("slot", { key: 'd26426863ec1dadfbf2049ca6b85dcdb28875858', name: "decorator" }), truncatedText)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '1b06b432ce4ab98a1d1d0b70acb7074849e94999', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'ea87e923fe84d94fc1f9a1b72b9fd1deef5cb5ad', class: "popover-content" }, h("div", { key: '53b50f438af20d4474b42511ee334391ff429fa0', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '0996ca12d288c696601919df48ef6c8784bbf8d4', name: "popover-top" })), h("q2-option-list", { key: '9faef4049f040e8c22b46107a7a618224cd0e82c', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '8f54a5eb6670b9bffb2062eeb9815834b2aa8de7' })), h("div", { key: '1e61e07bb5c6bdcdfd68080cc606bb1a42f48d79', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '48a8d60e3eae7de823d1e55ab9153dedda9a739d', name: "popover-bottom" })))))));
     }
     static get is() { return "q2-pill"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-pill/test/q2-pill-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 OPTIONS = `
     <q2-option value="1">Option 1</q2-option>
     <q2-option value="2">Option 2</q2-option>
@@ -50,6 +50,17 @@ const WITH_OPTIONS_VARIANTS = THEME_VALUES.map(t => ({
     name: `with-options-${t}`,
     html: `<q2-pill label="My pill" value="2"${themeAttr(t)}>${OPTIONS}</q2-pill>`,
 }));
+// Decorator variants — icon alone and icon with options present.
+const DECORATOR_VARIANTS = [
+    {
+        name: 'with-icon-decorator',
+        html: `<q2-pill label="My pill"><q2-icon slot="decorator" type="star"></q2-icon></q2-pill>`,
+    },
+    {
+        name: 'with-icon-decorator-and-options',
+        html: `<q2-pill label="My pill" value="2"><q2-icon slot="decorator" type="star"></q2-icon>${OPTIONS}</q2-pill>`,
+    },
+];
 const restingCase = (variant, theme) => {
     test(`q2-pill--${variant.name}--resting — ${theme}`, async ({ page }) => {
         await setupPage(page, variant.html, { theme });
@@ -106,4 +117,19 @@ test.describe('q2-pill — variants × themes', () => {
             closeBtnFocusCase(variant, theme);
         }
     }
+    for (const variant of DECORATOR_VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+// 'default' (inactive, no value) exercises --tct-pill-btn-font-size (button label text).
+const PILL_DEFAULT_VARIANT = VARIANTS.find(v => v.name === 'default');
+test.describe(`q2-pill — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-pill--default--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, PILL_DEFAULT_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await expect(page).toHaveScreenshot(`q2-pill--default--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
 });

package/dist/collection/components/q2-popover/q2-popover.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-popover-background: (<color>) Controls the background color of the popover.
  * @prop --tct-popover-font-color: (<color>) Controls the text color of the popover content.
@@ -154,13 +176,6 @@ button {
   animation-timing-function: var(--tct-popover-close-animation-timing-function, ease-in);
   animation-fill-mode: var(--tct-popover-close-animation-fill-mode, forwards);
 }
-@media (prefers-reduced-motion: reduce) {
-  :popover-open.animating-open, :popover-open.animating-close,
-  .show.animating-open,
-  .show.animating-close {
-    animation-duration: 0.01ms;
-  }
-}
 :popover-open.block,
 .show.block {
   right: unset;

package/dist/collection/components/q2-radio/q2-radio.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-radio-margin: (<length-percentage>+) Controls the outer margin of the radio container.
  * @prop --tct-radio-transition: (*) Controls the transition timing of radio state changes.
@@ -158,7 +180,7 @@ button {
 .radio-container label[for] {
   color: var(---comp-label-content-color);
   font-weight: var(---comp-label-content-font-weight);
-  font-size: var(--tct-radio-label-font-size, 14px);
+  font-size: var(--tct-radio-label-font-size, var(--const-px-14, 14px));
   align-items: start;
   cursor: pointer;
   margin-right: var(---comp-label-content-margin-right);
@@ -241,7 +263,7 @@ button {
   background: var(--tct-radio-background-fill, transparent);
   cursor: pointer;
   display: block;
-  font-size: var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, 14px));
+  font-size: var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, var(--const-px-14, 14px)));
   padding: 10px;
   position: relative;
   text-align: center;

package/dist/collection/components/q2-radio/test/q2-radio-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: 'unchecked',
@@ -70,3 +70,14 @@ test.describe('q2-radio — variants × themes', () => {
         }
     }
 });
+const UNCHECKED = VARIANTS.find(v => v.name === 'unchecked');
+test.describe(`q2-radio — scaled font size × themes`, () => {
+    if (UNCHECKED) {
+        for (const theme of THEMES) {
+            test(`q2-radio--unchecked--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, UNCHECKED.html, { theme, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-radio--unchecked--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-radio-group/q2-radio-group.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-radio-group-margin: (<length-percentage>+) Controls the outer margin of the radio-group host.
  * @prop --tct-radio-group-margin-top: (<length-percentage>) Controls the top margin of the radio-group host when --tct-radio-group-margin is not set.
@@ -134,7 +156,7 @@ legend.sr-only {
 .optional-tag {
   margin-left: var(--tct-radio-group-label-optional-margin-left, var(--app-scale-1x, 5px));
   color: var(--tct-radio-group-label-optional-color, var(--t-radio-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));
-  font-size: var(--tct-radio-group-label-optional-font-size, var(--t-radio-group-label-optional-font-size, 12px));
+  font-size: var(--tct-radio-group-label-optional-font-size, var(--t-radio-group-label-optional-font-size, var(--const-px-12, 12px)));
   font-weight: var(--tct-radio-group-label-optional-font-weight, var(--t-radio-group-label-optional-font-weight, 400));
 }
 

package/dist/collection/components/q2-radio-group/test/q2-radio-group-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 RADIOS = `
     <q2-radio value="1" label="Option 1"></q2-radio>
     <q2-radio value="2" label="Option 2"></q2-radio>
@@ -96,3 +96,13 @@ test.describe('q2-radio-group — variants × themes', () => {
         }
     }
 });
+// 'optional' exercises --tct-radio-group-label-optional-font-size (.optional-tag).
+const OPTIONAL_VARIANT = VARIANTS.find(v => v.name === 'optional');
+test.describe(`q2-radio-group — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-radio-group--optional--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, OPTIONAL_VARIANT.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await expect(page).toHaveScreenshot(`q2-radio-group--optional--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});