q2-tecton-elements 1.70.2 → 1.71.0

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

@@ -49,8 +49,61 @@ export class Q2Carousel {
         this.label = 'tecton.element.carousel.ariaLabel';
         /** Display navigation arrow buttons as another way to navigate the carousel. */
         this.showNavigationArrows = false;
+        /**
+         * Rebuilt whenever a prop that feeds Swiper's static config (e.g. `loop`) changes,
+         * since Swiper reads its options only at construction time.
+         */
+        this.buildCarouselOptions = () => {
+            this.universalCarouselOptions = {
+                centeredSlides: true,
+                loop: this.loop !== false,
+                focusableElements: 'q2-btn, q2-dropdown, q2-item, q2-list, a, input, select, textarea, button, video, label, option',
+                autoplay: this.autoPlay,
+                modules: [Autoplay],
+                on: {
+                    realIndexChange: swiper => {
+                        // When peek mode pads the DOM with duplicates (3- or 4-pane carousels),
+                        // `swiper.realIndex` can point at a duplicate; map it back to the 0..paneCount-1
+                        // range so `this.index`, pagination dots, and emitted events stay logical.
+                        const logicalIndex = this.paneCount > 0 ? swiper.realIndex % this.paneCount : swiper.realIndex;
+                        this.index = logicalIndex + 1;
+                        this.updateCarouselPaneProps();
+                        const isPaginationFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
+                        const isCarouselFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);
+                        const isFocused = isPaginationFocused || isCarouselFocused;
+                        this.handleAriaLive(isFocused);
+                        mirrorEmit(this, ['change', 'tctChange'], { index: logicalIndex + 1 });
+                        if (isPaginationFocused) {
+                            this.paginationBtns[logicalIndex].focus({ preventScroll: true });
+                        }
+                        else if (isCarouselFocused)
+                            swiper.slides[swiper.activeIndex].focus({
+                                preventScroll: true,
+                            });
+                    },
+                    afterInit: swiper => {
+                        var _a;
+                        this.swiper = swiper;
+                        (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.addEventListener('popoverStateChanged', this.handlePopovers);
+                    },
+                    slideChangeTransitionEnd: () => {
+                        var _a;
+                        (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.addEventListener('popoverStateChanged', this.handlePopovers);
+                    },
+                    slideChangeTransitionStart: () => {
+                        var _a;
+                        (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.removeEventListener('popoverStateChanged', this.handlePopovers);
+                    },
+                },
+            };
+            this.fullWidthDisplayOptions = {
+                slidesPerView: 1,
+                spaceBetween: 100,
+                ...this.universalCarouselOptions,
+            };
+        };
         this.configureCarousel = (carouselWrapper, carouselOptions) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             // Disconnect observer to prevent infinite loop from Swiper's internal DOM changes (e.g. loop mode)
             (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
             if (!!this.swiper) {
@@ -65,11 +118,11 @@ export class Q2Carousel {
             // fires during construction and may overwrite this.index
             const targetIndex = this.realIndex;
             new Swiper(carouselWrapper, carouselOptions);
-            (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slideToLoop(targetIndex, 0);
+            this.slideToPane(targetIndex, 0);
             // Ensure popover listener is on the active pane after initial positioning
-            (_c = this.activePane) === null || _c === void 0 ? void 0 : _c.addEventListener('popoverStateChanged', this.handlePopovers);
+            (_b = this.activePane) === null || _b === void 0 ? void 0 : _b.addEventListener('popoverStateChanged', this.handlePopovers);
             if (this.autoPlayInProgress)
-                (_d = this.swiper) === null || _d === void 0 ? void 0 : _d.autoplay.start();
+                (_c = this.swiper) === null || _c === void 0 ? void 0 : _c.autoplay.start();
             this.managePaneHeightObserver();
             // Re-observe after Swiper's DOM changes have settled
             requestAnimationFrame(() => {
@@ -77,6 +130,15 @@ export class Q2Carousel {
                 (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, { childList: true, subtree: true });
             });
         };
+        this.getPaginationLabel = (index) => {
+            const pane = this.paneArray.find(pane => pane.index === index);
+            const paneLabel = (pane === null || pane === void 0 ? void 0 : pane.label) || (pane === null || pane === void 0 ? void 0 : pane.getAttribute('label'));
+            const itemDescription = loc('tecton.element.carousel.itemDescription', [
+                (index + 1).toString(),
+                this.paneCount.toString(),
+            ]);
+            return paneLabel ? `${loc(paneLabel)}, ${itemDescription}` : itemDescription;
+        };
         this.handleAutoPlayPause = (action) => {
             var _a;
             if (!this.autoPlay)
@@ -107,7 +169,7 @@ export class Q2Carousel {
             }
         };
         this.keydownHandler = (event) => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             switch (event.key) {
                 case 'ArrowRight':
                     event.preventDefault();
@@ -119,11 +181,11 @@ export class Q2Carousel {
                     break;
                 case 'Home':
                     event.preventDefault();
-                    (_c = this.swiper) === null || _c === void 0 ? void 0 : _c.slideToLoop(0);
+                    this.slideToPane(0);
                     break;
                 case 'End':
                     event.preventDefault();
-                    (_d = this.swiper) === null || _d === void 0 ? void 0 : _d.slideToLoop(this.paneCount - 1);
+                    this.slideToPane(this.paneCount - 1);
                     break;
             }
         };
@@ -177,6 +239,17 @@ export class Q2Carousel {
                 return;
             this.carouselWrapperWidth = this.carouselWrapper.clientWidth;
         };
+        /**
+         * Swiper's `slideToLoop` snaps by real (logical) index but only exists when loop mode is on.
+         * For non-looped carousels, `slideTo` targets the same logical index directly since the DOM
+         * has no duplicates.
+         */
+        this.slideToPane = (index, speed) => {
+            if (!this.swiper)
+                return;
+            const fn = this.loop !== false ? this.swiper.slideToLoop : this.swiper.slideTo;
+            speed === undefined ? fn.call(this.swiper, index) : fn.call(this.swiper, index, speed);
+        };
         /**
          * Swiper's loop mode needs enough DOM slides on both sides of a centered active slide. For
          * two-pane full-width carousels and 3 to 5 pane peek carousels, we double the pane set in the
@@ -185,11 +258,15 @@ export class Q2Carousel {
          * logical index changes are mapped back to the real-pane range via `modulo paneCount`.
          */
         this.syncPaneDuplicates = () => {
+            const existingDuplicates = Array.from(this.hostElement.querySelectorAll('q2-carousel-pane[data-q2-pane-duplicate]'));
+            existingDuplicates.forEach(node => node.remove());
+            // Duplicates only exist to satisfy Swiper's loop-mode minimum slide count.
+            // Non-looped carousels navigate their real panes directly.
+            if (this.loop === false)
+                return;
             const realPanes = this.paneArray;
             const realCount = realPanes.length;
             const needsDuplicates = realCount === 2 || (!this.useFullWidthPanes && realCount >= 3 && realCount <= 5);
-            const existingDuplicates = Array.from(this.hostElement.querySelectorAll('q2-carousel-pane[data-q2-pane-duplicate]'));
-            existingDuplicates.forEach(node => node.remove());
             if (!needsDuplicates || realCount === 0)
                 return;
             const parent = realPanes[0].parentElement;
@@ -271,7 +348,8 @@ export class Q2Carousel {
             return (h("div", { class: insufficientPanesContainerClasses.join(' ') }, h("div", { class: "insufficient-panes-icon-wrapper" }, h("q2-icon", { type: "warning" })), h("p", { class: "insufficient-panes-header" }, h("strong", null, loc('tecton.element.carousel.insufficientPanesMessageHeader'))), h("p", { class: "insufficient-panes-body" }, loc('tecton.element.carousel.insufficientPanesMessageBody'))));
         };
         this.renderNextNavBtn = () => {
-            return (h("div", { class: "next-btn" }, h("button", { type: "button", class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "aria-label": loc('tecton.element.carousel.nextItemLabel'), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideNext(); } }, h("q2-icon", { type: "arrow-right" }))));
+            const disabled = this.loop === false && this.realIndex >= this.paneCount - 1;
+            return (h("div", { class: "next-btn" }, h("q2-btn", { class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", intent: "workflow-primary", label: loc('tecton.element.carousel.nextItemLabel'), hideLabel: true, disabled: disabled || undefined, onTctClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideNext(); } }, h("q2-icon", { type: "arrow-right" }))));
         };
         this.renderPaginationArea = () => {
             const { useDynamicPaginationDots, realIndex, paneCount } = this;
@@ -290,14 +368,12 @@ export class Q2Carousel {
                 const isWithinTwoOfActive = Math.abs(index - realIndex) <= 2 && !isActive;
                 if (isWithinTwoOfActive)
                     btnClasses = [...btnClasses, 'active-adjacent'];
-                return (h("button", { type: "button", role: "tab", tabIndex: isActive ? undefined : -1, "aria-selected": `${isActive}`, class: btnClasses.join(' '), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideToLoop(index); }, onKeyDown: this.keydownHandler, "aria-label": loc('tecton.element.carousel.itemDescription', [
-                        (index + 1).toString(),
-                        paneCount.toString(),
-                    ]) }));
+                return (h("button", { type: "button", role: "tab", tabIndex: isActive ? undefined : -1, "aria-selected": `${isActive}`, class: btnClasses.join(' '), onClick: () => this.slideToPane(index), onKeyDown: this.keydownHandler, "aria-label": this.getPaginationLabel(index) }));
             })));
         };
         this.renderPrevNavBtn = () => {
-            return (h("div", { class: "prev-btn" }, h("button", { type: "button", class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "aria-label": loc('tecton.element.carousel.previousItemLabel'), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slidePrev(); } }, h("q2-icon", { type: "arrow-left" }))));
+            const disabled = this.loop === false && this.realIndex <= 0;
+            return (h("div", { class: "prev-btn" }, h("q2-btn", { class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", intent: "workflow-primary", label: loc('tecton.element.carousel.previousItemLabel'), hideLabel: true, disabled: disabled || undefined, onTctClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slidePrev(); } }, h("q2-icon", { type: "arrow-left" }))));
         };
     }
     // #endregion
@@ -324,53 +400,7 @@ export class Q2Carousel {
         if (!hasValidChildren(this.hostElement, 'q2-carousel-pane')) {
             filterChildren(this.hostElement, 'q2-carousel-pane');
         }
-        this.universalCarouselOptions = {
-            centeredSlides: true,
-            loop: true,
-            focusableElements: 'q2-btn, q2-dropdown, q2-item, q2-list, a, input, select, textarea, button, video, label, option',
-            autoplay: this.autoPlay,
-            modules: [Autoplay],
-            on: {
-                realIndexChange: swiper => {
-                    // When peek mode pads the DOM with duplicates (3- or 4-pane carousels),
-                    // `swiper.realIndex` can point at a duplicate; map it back to the 0..paneCount-1
-                    // range so `this.index`, pagination dots, and emitted events stay logical.
-                    const logicalIndex = this.paneCount > 0 ? swiper.realIndex % this.paneCount : swiper.realIndex;
-                    this.index = logicalIndex + 1;
-                    this.updateCarouselPaneProps();
-                    const isPaginationFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
-                    const isCarouselFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);
-                    const isFocused = isPaginationFocused || isCarouselFocused;
-                    this.handleAriaLive(isFocused);
-                    mirrorEmit(this, ['change', 'tctChange'], { index: logicalIndex + 1 });
-                    if (isPaginationFocused) {
-                        this.paginationBtns[logicalIndex].focus({ preventScroll: true });
-                    }
-                    else if (isCarouselFocused)
-                        swiper.slides[swiper.activeIndex].focus({
-                            preventScroll: true,
-                        });
-                },
-                afterInit: swiper => {
-                    var _a;
-                    this.swiper = swiper;
-                    (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.addEventListener('popoverStateChanged', this.handlePopovers);
-                },
-                slideChangeTransitionEnd: () => {
-                    var _a;
-                    (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.addEventListener('popoverStateChanged', this.handlePopovers);
-                },
-                slideChangeTransitionStart: () => {
-                    var _a;
-                    (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.removeEventListener('popoverStateChanged', this.handlePopovers);
-                },
-            },
-        };
-        this.fullWidthDisplayOptions = {
-            slidesPerView: 1,
-            spaceBetween: 100,
-            ...this.universalCarouselOptions,
-        };
+        this.buildCarouselOptions();
     }
     componentDidLoad() {
         this.setCarouselWrapperWidth();
@@ -385,8 +415,7 @@ export class Q2Carousel {
     // #endregion
     // #region Listeners
     carouselPaneClicked(event) {
-        var _a;
-        (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideToLoop(event.detail.paneIndex);
+        this.slideToPane(event.detail.paneIndex);
     }
     delegateFocus(event) {
         var _a, _b;
@@ -402,12 +431,12 @@ export class Q2Carousel {
      * @testOnly
      */
     async selectCarouselPane(index) {
-        var _a, _b, _c;
+        var _a, _b;
         if (index > this.paneCount)
             return;
         const actualIndex = index > 0 ? index - 1 : 0;
-        (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideToLoop(actualIndex);
-        const activeSlide = (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slides[(_c = this.swiper) === null || _c === void 0 ? void 0 : _c.activeIndex];
+        this.slideToPane(actualIndex);
+        const activeSlide = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slides[(_b = this.swiper) === null || _b === void 0 ? void 0 : _b.activeIndex];
         activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.focus({ preventScroll: true });
     }
     /**
@@ -441,6 +470,8 @@ export class Q2Carousel {
         this.revampCarousel();
     }
     revampCarousel() {
+        this.buildCarouselOptions();
+        this.syncPaneDuplicates();
         this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
     }
     indexChanged(newIndex) {
@@ -452,7 +483,7 @@ export class Q2Carousel {
         // to programmatically slide — otherwise the watcher fights our own realIndexChange mapping.
         const swiperLogicalIndex = this.paneCount > 0 ? this.swiper.realIndex % this.paneCount : this.swiper.realIndex;
         if (newIndex !== swiperLogicalIndex + 1) {
-            this.swiper.slideToLoop(this.realIndex);
+            this.slideToPane(this.realIndex);
         }
     }
     // #endregion
@@ -530,7 +561,7 @@ export class Q2Carousel {
             paginationWrapperClasses.push('evenly-space');
         if (showNavigationArrows && arrowPosition === 'hug')
             paginationWrapperClasses.push('center-space');
-        return (h(Host, { key: 'e99de21a2de9706b1ff5fcd8dd2349c99920198b', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
+        return (h(Host, { key: '2c623516b2b0ce7800440110cde323bdf065abc1', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&
             this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&
@@ -792,6 +823,25 @@ export class Q2Carousel {
                 "attribute": "label",
                 "defaultValue": "'tecton.element.carousel.ariaLabel'"
             },
+            "loop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables continuous looping so navigating past the last pane wraps to the first (and vice versa). Defaults to enabled; pass `false` to disable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "loop"
+            },
             "showNavigationArrows": {
                 "type": "boolean",
                 "mutable": false,
@@ -944,6 +994,9 @@ export class Q2Carousel {
             }, {
                 "propName": "autoPlay",
                 "methodName": "revampCarousel"
+            }, {
+                "propName": "loop",
+                "methodName": "revampCarousel"
             }, {
                 "propName": "index",
                 "methodName": "indexChanged"

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

@@ -50,6 +50,10 @@ const VARIANTS = [
         name: 'hide-pagination',
         html: carousel('hide-pagination show-navigation-arrows'),
     },
+    {
+        name: 'loop-disabled',
+        html: carousel('loop="false" show-navigation-arrows'),
+    },
 ];
 // Focus is exercised on the with-arrows variant, which has all three interactive
 // regions present: navigation arrows, pagination indicator (tablist), and the
@@ -82,10 +86,7 @@ const focusIndicatorCase = (variant, theme) => {
 const focusPaneCase = (variant, theme) => {
     test(`q2-carousel--${variant.name}--focus-pane — ${theme}`, async ({ page }) => {
         await setupPage(page, variant.html, { theme, setupLoc: true });
-        await page.keyboard.press('Tab');
-        await page.keyboard.press('Tab');
-        await page.keyboard.press('Tab');
-        await page.keyboard.press('Tab');
+        await page.locator('q2-carousel-pane.swiper-slide-active').focus();
         await expect(page).toHaveScreenshot(`q2-carousel--${variant.name}--focus-pane--${theme}.png`);
     });
 };

package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.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-pane-border-color: (<color>) Controls the border color of the carousel pane container.
  * @prop --tct-carousel-pane-border-radius: (<length-percentage>) Controls the corner radius of the carousel pane container.

package/dist/collection/components/q2-chart-area/q2-chart-area.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-area-chart-width?: (<length-percentage>) Controls the width of the area chart.
  * @prop --tct-area-chart-height?: (<length-percentage>) Controls the height of the area chart.

package/dist/collection/components/q2-chart-bar/q2-chart-bar.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-bar-chart-width?: (<length-percentage>) Controls the width of the bar chart.
  * @prop --tct-bar-chart-height?: (<length-percentage>) Controls the height of the bar chart.

package/dist/collection/components/q2-chart-donut/q2-chart-donut.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-chart-donut-text-color: (<color>) Controls the text color of the chart donut center card content.
  * @prop --tct-chart-donut-focus-visible-box-shadow: (*) Controls the box shadow of the chart container when focused via keyboard.
@@ -186,11 +208,11 @@ q2-icon {
 }
 
 .name {
-  font-size: var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px));
+  font-size: var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, var(--const-px-14, 14px)));
 }
 
 .value {
-  font-size: var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px));
+  font-size: var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, var(--const-px-21, 21px)));
 }
 
 figure {

package/dist/collection/components/q2-chart-donut/test/q2-chart-donut-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 SHORT_DATA = [
     { id: 'food', name: 'Food & Dining', value: 2796.59, icon: 'silverware' },
     { id: 'uncategorized', name: 'Uncategorized', value: 2702.52, icon: 'question' },
@@ -148,3 +148,15 @@ test.describe('q2-chart-donut — variants × themes', () => {
         }
     }
 });
+// 'with-summary' renders center-card name + value, exercising
+// --tct-chart-donut-name-font-size and --tct-chart-donut-value-font-size.
+const WITH_SUMMARY_VARIANT = VARIANTS.find(v => v.name === 'with-summary');
+test.describe(`q2-chart-donut — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-chart-donut--with-summary--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, WITH_SUMMARY_VARIANT.html, { theme, setupLoc: true, fontSizePx: FONT_SCALE_PX });
+            await setChartData(page, SHORT_DATA);
+            await expect(page).toHaveScreenshot(`q2-chart-donut--with-summary--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

package/dist/collection/components/q2-checkbox/q2-checkbox.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-checkbox-margin: (<length-percentage>+) Controls the outer margin of the checkbox host.
  * @prop --tct-checkbox-margin-top?: (<length-percentage>) Controls the optional top margin of the checkbox host when --tct-checkbox-margin is not set.
@@ -207,7 +229,7 @@ button {
   --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);
   --comp-checkbox-default-row-gap: 0;
   --comp-checkbox-default-gap: var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);
-  --comp-checkbox-label-line-height: var(--tct-checkbox-label-line-height, 24px);
+  --comp-checkbox-label-line-height: var(--tct-checkbox-label-line-height, var(--const-px-24, 24px));
   --comp-checkbox-tween: var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
   --comp-checkbox-toggle-width: var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));
   --comp-checkbox-toggle-track-fill: var(--tct-checkbox-toggle-track-fill, var(--tct-checkbox-toggle-track-color, transparent));

package/dist/collection/components/q2-checkbox/test/q2-checkbox-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-unchecked', html: `<q2-checkbox label="Option"></q2-checkbox>` },
     { name: 'default-checked', html: `<q2-checkbox label="Option" checked></q2-checkbox>` },
@@ -66,3 +66,13 @@ test.describe('q2-checkbox — variants × themes', () => {
         }
     }
 });
+// 'default-unchecked' exercises --tct-checkbox-label-line-height (label text line-height).
+const DEFAULT_UNCHECKED = VARIANTS.find(v => v.name === 'default-unchecked');
+test.describe(`q2-checkbox — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-checkbox--default-unchecked--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+            await setupPage(page, DEFAULT_UNCHECKED.html, { theme, fontSizePx: FONT_SCALE_PX });
+            await expect(page).toHaveScreenshot(`q2-checkbox--default-unchecked--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});

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

package/dist/collection/components/q2-checkbox-group/test/q2-checkbox-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 STANDARD_CHILDREN = `
     <q2-checkbox label="Option 1" value="opt-1"></q2-checkbox>
     <q2-checkbox label="Option 2" value="opt-2"></q2-checkbox>
@@ -58,3 +58,13 @@ test.describe('q2-checkbox-group — variants × themes', () => {
         }
     }
 });
+// 'optional' exercises --tct-checkbox-group-label-optional-font-size (.optional-tag).
+const OPTIONAL_VARIANT = VARIANTS.find(v => v.name === 'optional');
+test.describe(`q2-checkbox-group — scaled font size × themes`, () => {
+    for (const theme of THEMES) {
+        test(`q2-checkbox-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-checkbox-group--optional--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+        });
+    }
+});