q2-tecton-elements 1.70.2 → 1.71.0

package/dist/collection/components/q2-tab-container/q2-tab-container.js

@@ -18,18 +18,37 @@ export class Q2TabContainer {
         // #region State Properties
         this.hasLeft = false;
         this.hasRight = false;
+        this.isNarrowViewport = false;
         this.scrollEnabled = false;
-        this.showScrollLeft = false;
-        this.showScrollRight = false;
+        this.showScrollBack = false;
+        this.showScrollForward = false;
         /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */
         this.noPrint = false;
+        /**
+         * The orientation of the tab strip.
+         * - `horizontal` (default) — tabs run left-to-right above the panel content.
+         * - `vertical` — tabs stack top-to-bottom beside the panel content.
+         *
+         * @info
+         * Vertical orientation is intended for wider layouts (e.g. admin consoles).
+         * At viewports narrower than 768px, the component falls back to horizontal.
+         */
+        this.orientation = 'horizontal';
         this.checkScrollState = () => {
             if (!this.listElement)
                 return;
-            const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
-            this.scrollEnabled = scrollWidth > clientWidth;
-            this.showScrollLeft = scrollLeft > 0;
-            this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;
+            if (this.computedOrientation === 'vertical') {
+                const { scrollTop, scrollHeight, clientHeight } = this.listElement;
+                this.scrollEnabled = scrollHeight > clientHeight;
+                this.showScrollBack = scrollTop > 0;
+                this.showScrollForward = scrollHeight > Math.ceil(scrollTop) + clientHeight;
+            }
+            else {
+                const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+                this.scrollEnabled = scrollWidth > clientWidth;
+                this.showScrollBack = scrollLeft > 0;
+                this.showScrollForward = scrollWidth > Math.ceil(scrollLeft) + clientWidth;
+            }
         };
         this.moveToAdjacentTab = (value, direction) => {
             const index = this.tabs.map(({ value }) => value).indexOf(value);
@@ -58,23 +77,40 @@ export class Q2TabContainer {
             if (shouldFocus) {
                 focusedTab.focus({ preventScroll: true });
             }
-            const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;
-            this.listElement.scrollTo({
-                left,
-                behavior: 'smooth',
-            });
+            if (this.computedOrientation === 'vertical') {
+                const top = focusedTab.offsetTop - this.listElement.clientHeight / 2;
+                this.listElement.scrollTo({ top, behavior: 'smooth' });
+            }
+            else {
+                const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;
+                this.listElement.scrollTo({ left, behavior: 'smooth' });
+            }
         };
         this.onScrollBtnClick = (direction) => {
-            const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
-            const halfWidth = Math.floor(clientWidth / 2);
-            let scrollAmount = 0;
-            if (direction === 'left') {
-                scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));
+            if (this.computedOrientation === 'vertical') {
+                const { scrollTop, scrollHeight, clientHeight } = this.listElement;
+                const halfHeight = Math.floor(clientHeight / 2);
+                let scrollAmount = 0;
+                if (direction === 'back') {
+                    scrollAmount = -Math.min(halfHeight, Math.abs(scrollTop));
+                }
+                else {
+                    scrollAmount = Math.min(halfHeight, Math.abs(scrollHeight - scrollTop - clientHeight));
+                }
+                this.listElement.scrollBy({ top: scrollAmount, behavior: 'smooth' });
             }
             else {
-                scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));
+                const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+                const halfWidth = Math.floor(clientWidth / 2);
+                let scrollAmount = 0;
+                if (direction === 'back') {
+                    scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));
+                }
+                else {
+                    scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));
+                }
+                this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });
             }
-            this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });
         };
         this.onSlotChange = () => {
             this.checkScrollState();
@@ -92,11 +128,27 @@ export class Q2TabContainer {
         this.onTabKeyDown = (event) => {
             const value = event.target.dataset.value;
             switch (event.key) {
+                case 'ArrowDown':
+                    if (this.computedOrientation !== 'vertical')
+                        break;
+                    event.preventDefault();
+                    this.moveToAdjacentTab(value, 'next');
+                    break;
                 case 'ArrowRight':
+                    if (this.computedOrientation !== 'horizontal')
+                        break;
                     event.preventDefault();
                     this.moveToAdjacentTab(value, 'next');
                     break;
+                case 'ArrowUp':
+                    if (this.computedOrientation !== 'vertical')
+                        break;
+                    event.preventDefault();
+                    this.moveToAdjacentTab(value, 'prev');
+                    break;
                 case 'ArrowLeft':
+                    if (this.computedOrientation !== 'horizontal')
+                        break;
                     event.preventDefault();
                     this.moveToAdjacentTab(value, 'prev');
                     break;
@@ -152,6 +204,9 @@ export class Q2TabContainer {
         this.resizeObserver = null;
         (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
         this.mutationObserver = null;
+        if (this.narrowViewportMedia && this.narrowViewportListener) {
+            this.narrowViewportMedia.removeEventListener('change', this.narrowViewportListener);
+        }
     }
     componentWillLoad() {
         if (!hasValidChildren(this.hostElement, ['q2-tab-pane', 'tecton-tab-pane'])) {
@@ -161,6 +216,10 @@ export class Q2TabContainer {
         observer.observe(this.hostElement, { childList: true, attributes: true });
         this.mutationObserver = observer;
         this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+        if (typeof window !== 'undefined') {
+            this.narrowViewportMedia = window.matchMedia('(max-width: 767px)');
+            this.isNarrowViewport = this.narrowViewportMedia.matches;
+        }
         this.updateTabs();
     }
     componentDidLoad() {
@@ -169,6 +228,12 @@ export class Q2TabContainer {
         this.checkScrollState();
         overrideFocus(this.hostElement);
         this.scheduledAfterRender.push(() => this.determineTabMove());
+        if (this.narrowViewportMedia) {
+            this.narrowViewportListener = event => {
+                this.isNarrowViewport = event.matches;
+            };
+            this.narrowViewportMedia.addEventListener('change', this.narrowViewportListener);
+        }
     }
     componentDidRender() {
         this.scheduledAfterRender.forEach(fn => fn());
@@ -220,6 +285,9 @@ export class Q2TabContainer {
     }
     // #endregion
     // #region Local Methods
+    get computedOrientation() {
+        return this.isNarrowViewport ? 'horizontal' : this.orientation;
+    }
     get selectedTabValue() {
         return this.value || '';
     }
@@ -266,7 +334,8 @@ export class Q2TabContainer {
         return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
     }
     render() {
-        return (h(Fragment, { key: 'cfaf872008ad8687316955a725e7475d326b5ec2' }, h("div", { key: '8a61a84ecd4d1869fe53829ca908e99ec80b11be', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'a77950455f6f6f9138d1174fa4db38bcde498cb5' }, h("div", { key: 'b195f6a34a9ed2ecbdf1bacd2d51a76f0861574e', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'f625095c68ad1bedd07d34149d28c27f12b2954d', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '96c26c6447708d2fcf102e53e984f9a71bc2d9b1', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'feec85bd6bbbfeb99c520b6118c90190130d8dca', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '8dc406d9e144e0d025e14d8a2e30f6010febafd6', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '3a35b2d74d9f62f3934b667b2ceacf0e31ffb6f4', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '8ba591207287d3aa2d20e70ec72c03a755879ab0', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '83ab595967887ca3d2a584f85519f23e101d02ff', class: "tab-content" }, h("slot", { key: '6458a9e54b310f85129497478757111501fcb06f', onSlotchange: () => this.onSlotChange() }))));
+        const isVertical = this.computedOrientation === 'vertical';
+        return (h(Fragment, { key: '710b889bd81a28f6ba7c0deb43abe49a269baec4' }, h("div", { key: '444efee6412d2440c99bd1e9b123fe385f2453a5', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '56c9916fb99dd3434a8305721d03e85c0f5fb370' }, h("div", { key: 'c506eb6690b60194b50171ad5139cc65b4fabedd', class: "gradient-left", hidden: !this.showScrollBack }), h("div", { key: '7af01eb18190e0af6fb80364fb73dcf6145d979d', class: "gradient-right", hidden: !this.showScrollForward }), h("q2-btn", { key: '8cb5f49e48c119d32b196e3ecc7e8a018acc7aa0', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, h("q2-icon", { key: '65f3caea2251c7ce96861718df064f230ec6e02e', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), h("q2-btn", { key: '07b833fe0e6b3030255374e4dd323fc99379a293', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, h("q2-icon", { key: 'e446b55822239e657ab10c50694a9756ec8b030b', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), h("ul", { key: '20d4f371b80b2515b762e80b88574938783e9252', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist", "aria-orientation": this.computedOrientation }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '9eaba5d408629dc548a9c57428b801293f642172', class: "tab-content" }, h("slot", { key: '811737fa0e22c994299c9164a6401209e6ecf418', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-tab-container"; }
     static get encapsulation() { return "shadow"; }
@@ -343,6 +412,29 @@ export class Q2TabContainer {
                 "attribute": "no-print",
                 "defaultValue": "false"
             },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "Vertical orientation is intended for wider layouts (e.g. admin consoles).\nAt viewports narrower than 768px, the component falls back to horizontal."
+                        }],
+                    "text": "The orientation of the tab strip.\n- `horizontal` (default) \u2014 tabs run left-to-right above the panel content.\n- `vertical` \u2014 tabs stack top-to-bottom beside the panel content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -387,9 +479,10 @@ export class Q2TabContainer {
         return {
             "hasLeft": {},
             "hasRight": {},
+            "isNarrowViewport": {},
             "scrollEnabled": {},
-            "showScrollLeft": {},
-            "showScrollRight": {},
+            "showScrollBack": {},
+            "showScrollForward": {},
             "tabs": {}
         };
     }

package/dist/collection/components/q2-tab-container/test/q2-tab-container-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 PANES = (name) => `
     <q2-tab-pane name="${name}" value="1" label="Tab One"><p>Content one</p></q2-tab-pane>
     <q2-tab-pane name="${name}" value="2" label="Tab Two"><p>Content two</p></q2-tab-pane>
@@ -75,3 +75,26 @@ test.describe('q2-tab-container — variants × themes', () => {
         }
     }
 });
+const VERTICAL_HTML = `<q2-tab-container name="vertical-tabs" value="1" orientation="vertical">${PANES('vertical-tabs')}</q2-tab-container>`;
+test.describe('q2-tab-container — orientation-vertical × themes', () => {
+    for (const theme of THEMES) {
+        test(`q2-tab-container--orientation-vertical--resting — ${theme}`, async ({ page }) => {
+            await page.setViewportSize({ width: 900, height: 600 });
+            await setupPage(page, VERTICAL_HTML, { theme });
+            await expect(page).toHaveScreenshot(`q2-tab-container--orientation-vertical--resting--${theme}.png`);
+        });
+    }
+});
+// 'default-main' exercises --tct-tab-font-size (default tab button text).
+// 'type-section' exercises --tct-tab-section-font-size (section-style tab button text).
+const TAB_FONT_SCALE_VARIANTS = VARIANTS.filter(v => v.name === 'default-main' || v.name === 'type-section');
+test.describe(`q2-tab-container — scaled font size × themes`, () => {
+    for (const variant of TAB_FONT_SCALE_VARIANTS) {
+        for (const theme of THEMES) {
+            test(`q2-tab-container--${variant.name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, variant.html, { theme, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-tab-container--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-tab-pane/q2-tab-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;
+    }
+  }
+}
 .tab-pane[aria-hidden=true] {
   display: none;
 }

package/dist/collection/components/q2-tab-pane/q2-tab-pane.js

@@ -19,7 +19,7 @@ export class Q2TabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '19abb08e46c23ce0be03d7d07a1bbe4c22e99786', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '42a7a3ac8fe64661ba2027c0c967fcfe3b4d20e7' })));
+        return (h("div", { key: '1957cbeca0ca1f0b5f840701286ebeb6b69565ce', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '6772ac75d219ebc30209907468a9fb801cd5db0d' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tag/q2-tag.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-tag-background: (<color>) Controls the background color of the tag in its default state.
  * @prop --tct-tag-color: (<color>) Controls the text color of the tag in its default state.
@@ -114,7 +136,7 @@ button {
   border-width: var(--tct-tag-border-width, 0);
   border-style: var(--tct-tag-border-style, none);
   border-color: var(--comp-tag-border-color);
-  font-size: var(--tct-tag-font-size, 14px);
+  font-size: var(--tct-tag-font-size, var(--const-px-14, 14px));
   font-weight: var(--tct-tag-font-weight, inherit);
   position: relative;
 }
@@ -143,6 +165,7 @@ button {
   width: max-content;
   gap: 6px;
   height: var(--tct-tag-height, var(--t-tag-height, var(--app-scale-5x, 25px)));
+  /* stylelint-disable-next-line tecton/require-t-px-fallback */
   line-height: var(--tct-tag-height, var(--t-tag-height, var(--app-scale-5x, 25px)));
   padding-inline: var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-2x, 10px)));
 }
@@ -157,7 +180,7 @@ button {
 }
 .tag ::slotted(q2-badge[slot=decorator]) {
   --tct-badge-height: 1em;
-  --tct-badge-line-height: 25px;
+  --tct-badge-line-height: var(--const-px-25, 25px);
 }
 
 .tag.has-options {

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

@@ -194,7 +194,7 @@ export class Q2Tag {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: '8bf6d92e2f691ae8efeb0b1f24b460d193c069f1' }, h("click-elsewhere", { key: '9c6d2c96a64528a7831f5f1f019e81f5092b1347', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '2df0c2c782ec0908fe95f4c824fa4230beeb2e6d', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '8423b3877e1750ee12f5162b7fd2eb43a9552002', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '66ba933485bb28a9d140018c7ce6ce02e31ea668' })))))));
+        return (h(Host, { key: 'b7b199109ef756942f6cf76aff904a21ba406998' }, h("click-elsewhere", { key: 'f4a5ec911c582d480e5d7d91638d681ba6c054c8', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '046a9aae077ed9800b081ce70aa5d03f0d919cff', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '63899f97a13db69ed8776214ca6670e825663c5a', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '40fa7c27a8b27ae2c5f894bbe1ae6e51ab1b55f0' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tag/test/q2-tag-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>
@@ -80,3 +80,23 @@ test.describe('q2-tag — variants × themes', () => {
         }
     }
 });
+const FONT_SCALE_VARIANTS = [
+    {
+        name: 'default',
+        html: `<q2-tag label="My Tag"></q2-tag>`,
+    },
+    {
+        name: 'with-badge',
+        html: `<q2-tag label="My Tag"><q2-badge slot="decorator" value="TCT" theme="primary"></q2-badge></q2-tag>`,
+    },
+];
+test.describe(`q2-tag — font scale ${FONT_SCALE_PX}px × themes`, () => {
+    for (const variant of FONT_SCALE_VARIANTS) {
+        for (const theme of THEMES) {
+            test(`q2-tag--${variant.name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, variant.html, { theme, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-tag--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-textarea/q2-textarea.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-textarea-margin: (<length-percentage>+) Controls the outer margin of the textarea host.
  * @prop --tct-textarea-margin-top: (<length-percentage>) Controls the top margin of the textarea host when --tct-textarea-margin is not set.
@@ -190,7 +212,7 @@ label {
   --comp-label-optional-margin: var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));
   margin: var(--comp-label-optional-margin);
   color: var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));
-  font-size: var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));
+  font-size: var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, var(--const-px-12, 12px)));
   font-weight: var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400));
 }
 
@@ -353,7 +375,7 @@ q2-icon {
 
 .max-length {
   color: var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
-  font-size: var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));
+  font-size: var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, var(--const-px-12, 12px)))));
   position: absolute;
   right: 0;
 }

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

@@ -267,7 +267,7 @@ export class Q2Textarea {
     // #region Render Methods
     renderInput() {
         const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';
-        return (h("div", { class: "input-container" }, h("textarea", { id: this.inputId, class: textareaClasses, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? (h("q2-icon", { type: "error", class: "icon-error" })) : (''), this.showResize && (h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": loc('tecton.element.input.resize'), tabIndex: -1 }, h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
+        return (h("div", { class: "input-container" }, h("textarea", { id: this.inputId, class: textareaClasses, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? (h("q2-icon", { type: "error", class: "icon-error" })) : (''), this.showResize && (h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-hidden": "true", tabIndex: -1 }, h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
     }
     renderMaxLength() {
         var _a;
@@ -277,7 +277,7 @@ export class Q2Textarea {
         ]))));
     }
     render() {
-        return (h("div", { key: '1a53c8b1528031f5ccb957f2a2320f7a8a8f4607', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '1de221d01fd339d749b557d408acabdc06c07ecc', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
+        return (h("div", { key: '9b3eb74c84edd99af52a0ec71ba8b2fd8adbd1f2', class: this.wrapperClasses }, renderLabel(this), h("div", { key: 'a00772502ea6c1fde5af5bf4c12f0606a629252a', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
     }
     static get is() { return "q2-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-textarea/test/q2-textarea-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',
@@ -99,3 +99,18 @@ test.describe('q2-textarea — variants × themes', () => {
         }
     }
 });
+// 'optional' exercises --tct-textarea-font-size, --tct-textarea-label-font-size,
+// and --tct-textarea-label-optional-font-size.
+// 'with-maxlength' exercises --tct-textarea-max-length-font-size.
+const TEXTAREA_FONT_SCALE_VARIANTS = VARIANTS.filter(v => v.name === 'optional' || v.name === 'with-maxlength');
+test.describe(`q2-textarea — scaled font size × themes`, () => {
+    for (const variant of TEXTAREA_FONT_SCALE_VARIANTS) {
+        for (const theme of THEMES) {
+            test(`q2-textarea--${variant.name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, variant.html, { theme, fontSizePx: FONT_SCALE_PX });
+                await applySetup(page, variant.setup);
+                await expect(page).toHaveScreenshot(`q2-textarea--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-toast/q2-toast.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-toast-background: (<color>) Controls the background color of the toast container.
  * @prop --tct-toast-text: (<color>) Controls the primary text color of the toast.

package/dist/collection/components/q2-tooltip/q2-tooltip.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-tooltip-background: (<color>) Controls the background color of the tooltip bubble and arrow.
  * @prop --tct-tooltip-color: (<color>) Controls the text color of the tooltip bubble.
@@ -78,6 +100,7 @@ button {
  * @prop --tct-tooltip-position: (<length-percentage>) Controls the distance the tooltip bubble sits away from its target.
  * @prop --tct-tooltip-max-width: (<length-percentage>) Controls the maximum width of the tooltip bubble in multiline mode.
  * @prop --tct-tooltip-transition-duration: (<time>) Controls the show/hide transition duration of the tooltip.
+ * @prop --tct-tooltip-hover-delay: (<time>) Controls the delay before the tooltip appears on hover.
  * @prop --tct-tooltip-transition-delay: (<time>) Controls the show/hide transition delay of the tooltip.
  * @prop --tct-tooltip-transition-visible-duration: (<time>) Controls how long the tooltip remains visible after appearing via focus.
  */
@@ -105,7 +128,7 @@ button {
   position: relative;
 }
 .tooltip:hover {
-  --comp-delay: var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s));
+  --comp-delay: var(--tct-tooltip-hover-delay, var(--tct-tooltip-transition-delay, 1s));
 }
 :host([immediate]:not([immediate=false])) .tooltip:hover {
   --comp-delay: 0s;
@@ -126,7 +149,7 @@ button {
   z-index: 1;
   padding: var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));
   font-weight: var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));
-  font-size: var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));
+  font-size: var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, var(--const-px-12, 12px))));
   line-height: 1.5;
   color: var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));
   text-align: center;
@@ -166,7 +189,7 @@ button {
     opacity: 1;
   }
 }
-.tooltip.has-generic-focus:focus-within:before, .tooltip.has-generic-focus:focus-within:after {
+.tooltip.has-touch-click:before, .tooltip.has-touch-click:after {
   visibility: visible;
   opacity: 0;
   transition: none;
@@ -177,26 +200,11 @@ button {
   animation-duration: var(--comp-duration);
   animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));
 }
-.tooltip.has-generic-focus:hover:focus-within:before, .tooltip.has-generic-focus:hover:focus-within:after {
-  animation-name: tooltippedFade;
-  animation-direction: normal;
-  animation-delay: 0ms;
-}
-:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip.has-generic-focus:focus-within:before, :host([persist-on-hover]:not([persist-on-hover=false])) .tooltip.has-generic-focus:focus-within:after {
+.tooltip.has-touch-click:hover:before, .tooltip.has-touch-click:hover:after {
   animation-name: tooltippedFade;
   animation-direction: normal;
   animation-delay: 0ms;
 }
-.tooltip.has-generic-focus-out:before, .tooltip.has-generic-focus-out:after {
-  visibility: visible;
-  opacity: 0;
-  transition: none;
-  animation-timing-function: ease-in-out;
-  animation-fill-mode: forwards;
-  animation-name: tooltippedFade;
-  animation-direction: reverse;
-  animation-duration: var(--comp-duration);
-}
 .tooltip.dismissed:before, .tooltip.dismissed:after {
   visibility: hidden;
   opacity: 0;