q2-tecton-elements 1.71.4 → 1.73.0

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

@@ -540,7 +540,10 @@ export class Q2Btn {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "warning",
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance. Use for icon-only buttons."
+                        }],
                     "text": "Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element."
                 },
                 "getter": false,
@@ -552,15 +555,15 @@ export class Q2Btn {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "| 'coin'\n        | 'neutral-text'\n        | 'neutral'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'workflow-primary'\n        | 'workflow-secondary'",
-                    "resolved": "\"coin\" | \"neutral\" | \"neutral-text\" | \"workflow-destroy\" | \"workflow-escape\" | \"workflow-primary\" | \"workflow-secondary\"",
+                    "original": "| 'coin'\n        | 'destroy'\n        | 'escape'\n        | 'neutral-text'\n        | 'neutral'\n        | 'primary'\n        | 'secondary'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'workflow-primary'\n        | 'workflow-secondary'",
+                    "resolved": "\"coin\" | \"destroy\" | \"escape\" | \"neutral\" | \"neutral-text\" | \"primary\" | \"secondary\" | \"workflow-destroy\" | \"workflow-escape\" | \"workflow-primary\" | \"workflow-secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates the role of the component in the workflow, which will apply appropriate styling to the component."
+                    "text": "Indicates the intended action type, which applies the appropriate styling.\nUse unprefixed values by default. The legacy `workflow-` prefix remains supported for backward compatibility."
                 },
                 "getter": false,
                 "setter": false,
@@ -579,6 +582,9 @@ export class Q2Btn {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }, {
                             "name": "localizable",
                             "text": undefined
                         }],

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

@@ -1,15 +1,7 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
 import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
-const INTENTS = [
-    'workflow-primary',
-    'workflow-secondary',
-    'workflow-destroy',
-    'workflow-escape',
-    'neutral',
-    'neutral-text',
-    'coin',
-];
+const INTENTS = ['primary', 'secondary', 'destroy', 'escape', 'neutral', 'neutral-text', 'coin'];
 const SIZES = ['small', 'medium', 'large', 'none'];
 const coinHtml = () => `<q2-btn intent="coin" label="My Button"><q2-avatar icon="star"></q2-avatar></q2-btn>`;
 const labelAndIconHtml = (intent) => intent === 'coin'
@@ -22,10 +14,10 @@ const sizeHtml = (intent, size) => {
 };
 const plainHtml = () => `<q2-btn><q2-icon type="edit"></q2-icon><span>My Button</span></q2-btn>`;
 const SIZED_INTENTS = [
-    'workflow-primary',
-    'workflow-secondary',
-    'workflow-destroy',
-    'workflow-escape',
+    'primary',
+    'secondary',
+    'destroy',
+    'escape',
     'neutral',
     'neutral-text',
 ];
@@ -49,7 +41,7 @@ const focusCase = (name, html, theme) => {
         await expect(page).toHaveScreenshot(`${name}--${theme}.png`);
     });
 };
-const activeCase = (name, html, theme) => {
+const activeCase = (name, html, theme, settleAfterMs = 50) => {
     test(`${name} — ${theme}`, async ({ page }) => {
         await setupPage(page, html, { theme });
         const btn = page.locator('q2-btn');
@@ -58,7 +50,7 @@ const activeCase = (name, html, theme) => {
             throw new Error('q2-btn bounding box unavailable');
         await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
         await page.mouse.down();
-        await page.waitForTimeout(50);
+        await page.waitForTimeout(settleAfterMs);
         await expect(page).toHaveScreenshot(`${name}--${theme}.png`);
         await page.mouse.up();
     });
@@ -69,7 +61,8 @@ test.describe('q2-btn label+icon — intents × states × themes', () => {
             restingCase(`q2-btn--${intent}--resting`, labelAndIconHtml(intent), theme);
             hoverCase(`q2-btn--${intent}--hover`, labelAndIconHtml(intent), theme);
             focusCase(`q2-btn--${intent}--focus`, labelAndIconHtml(intent), theme);
-            activeCase(`q2-btn--${intent}--active`, labelAndIconHtml(intent), theme);
+            const settleAfterMs = intent === 'primary' && theme === 'default-2026' ? 125 : 50;
+            activeCase(`q2-btn--${intent}--active`, labelAndIconHtml(intent), theme, settleAfterMs);
         }
     }
 });
@@ -91,6 +84,222 @@ test.describe('q2-btn intents — sizes × themes (resting)', () => {
         }
     }
 });
+test.describe('q2-btn primary — updated states', () => {
+    for (const size of SIZES) {
+        activeCase(`q2-btn--primary--size-${size}--active`, sizeHtml('primary', size), 'default-2026', 125);
+    }
+    restingCase('q2-btn--primary--disabled', '<q2-btn intent="primary" disabled><span>My Button</span></q2-btn>', 'default-2026');
+    test('uses the proposed-primary pointer and active contract', async ({ page }) => {
+        await setupPage(page, labelAndIconHtml('primary'), {
+            theme: 'default-2026',
+            motion: 'normal',
+        });
+        const host = page.locator('q2-btn');
+        const button = host.locator('button');
+        await host.hover();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).backgroundColor)).toBe('rgb(94, 64, 139)');
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toBe('none');
+        await host.click();
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toBe('none');
+        const box = await host.boundingBox();
+        if (!box)
+            throw new Error('q2-btn bounding box unavailable');
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.mouse.down();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).backgroundColor)).toBe('rgb(82, 53, 120)');
+        expect(await button.evaluate(element => getComputedStyle(element).transform)).toBe('matrix(0.97, 0, 0, 0.97, 0, 0)');
+        await page.mouse.up();
+    });
+    test('uses the proposed-primary keyboard focus contract', async ({ page }) => {
+        await setupPage(page, labelAndIconHtml('primary'), { theme: 'default-2026' });
+        const button = page.locator('q2-btn').locator('button');
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(106, 74, 158)');
+    });
+    test('removes the Flat hover ring', async ({ page }) => {
+        await setupPage(page, labelAndIconHtml('primary'), { theme: 'flat' });
+        const host = page.locator('q2-btn');
+        const button = host.locator('button');
+        await host.hover();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toBe('none');
+    });
+    test('removes the active scale from intent buttons for reduced motion', async ({ page }) => {
+        await page.emulateMedia({ reducedMotion: 'reduce' });
+        await setupPage(page, labelAndIconHtml('secondary'), { theme: 'default-2026' });
+        const host = page.locator('q2-btn');
+        const button = host.locator('button');
+        const box = await host.boundingBox();
+        if (!box)
+            throw new Error('q2-btn bounding box unavailable');
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.mouse.down();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).transform)).toBe('none');
+        await page.mouse.up();
+    });
+});
+test.describe('q2-btn intents — active press treatment', () => {
+    for (const intent of INTENTS) {
+        test(`scales ${intent} while pressed`, async ({ page }) => {
+            await setupPage(page, labelAndIconHtml(intent), {
+                theme: 'default-2026',
+                motion: 'normal',
+            });
+            const host = page.locator('q2-btn');
+            const button = host.locator('button');
+            const box = await host.boundingBox();
+            if (!box)
+                throw new Error('q2-btn bounding box unavailable');
+            await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+            await page.mouse.down();
+            await page.waitForTimeout(125);
+            const scale = await button.evaluate(element => new DOMMatrixReadOnly(getComputedStyle(element).transform).a);
+            expect(scale).toBeGreaterThanOrEqual(0.97);
+            expect(scale).toBeLessThan(0.99);
+            await page.mouse.up();
+        });
+    }
+});
+test.describe('q2-btn — no-aesthetic fallbacks', () => {
+    test('adds the fallback shadow to primary', async ({ page }) => {
+        await setupPage(page, labelAndIconHtml('workflow-primary'));
+        const button = page.locator('q2-btn').locator('button');
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).not.toBe('none');
+    });
+    for (const intent of ['workflow-secondary', 'workflow-destroy', 'neutral', 'neutral-text']) {
+        test(`changes the ${intent} background while pressed`, async ({ page }) => {
+            await setupPage(page, labelAndIconHtml(intent), { motion: 'normal' });
+            const host = page.locator('q2-btn');
+            const button = host.locator('button');
+            const restingBackground = await button.evaluate(element => getComputedStyle(element).backgroundColor);
+            const box = await host.boundingBox();
+            if (!box)
+                throw new Error('q2-btn bounding box unavailable');
+            await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+            await page.mouse.down();
+            await page.waitForTimeout(125);
+            expect(await button.evaluate(element => getComputedStyle(element).backgroundColor)).not.toBe(restingBackground);
+            await page.mouse.up();
+        });
+    }
+});
+test.describe('q2-btn coin — updated hover state', () => {
+    for (const theme of [
+        'default-2026',
+        'flat',
+        'high-visibility',
+        'minimalist',
+        'neo-brutalist',
+        'standard',
+    ]) {
+        test(`does not add a ${theme} hover ring`, async ({ page }) => {
+            await setupPage(page, coinHtml(), { theme });
+            const host = page.locator('q2-btn');
+            const button = host.locator('button');
+            await host.hover();
+            expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toBe('none');
+        });
+    }
+});
+test.describe('q2-btn coin — theme focus color × aesthetics', () => {
+    for (const theme of THEMES) {
+        test(`uses the theme focus color in ${theme}`, async ({ page }) => {
+            await setupPage(page, coinHtml(), { theme });
+            await page.locator('html').evaluate(element => element.style.setProperty('--t-focus-color', '#123456'));
+            const button = page.locator('q2-btn').locator('button');
+            await page.keyboard.press('Tab');
+            await expect(button).toBeFocused();
+            await page.waitForTimeout(125);
+            expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(18, 52, 86)');
+        });
+    }
+});
+test.describe('q2-btn intents — consistent focus ring', () => {
+    for (const intent of INTENTS) {
+        test(`uses the theme focus color for ${intent}`, async ({ page }) => {
+            await setupPage(page, labelAndIconHtml(intent), { theme: 'default-2026' });
+            await page.locator('html').evaluate(element => element.style.setProperty('--t-focus-color', '#123456'));
+            const button = page.locator('q2-btn').locator('button');
+            await page.keyboard.press('Tab');
+            await expect(button).toBeFocused();
+            await page.waitForTimeout(125);
+            expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(18, 52, 86)');
+        });
+    }
+    test('prefers the per-intent outer ring color', async ({ page }) => {
+        await setupPage(page, '<q2-btn intent="destroy" style="--tct-btn-destroy-focus-visible-outer-ring-color: #123456">My Button</q2-btn>', { theme: 'default-2026' });
+        const button = page.locator('q2-btn').locator('button');
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(18, 52, 86)');
+    });
+    test('uses the theme focus color without an intent', async ({ page }) => {
+        await setupPage(page, plainHtml(), { theme: 'default-2026' });
+        const button = page.locator('q2-btn').locator('button');
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(106, 74, 158)');
+    });
+    test('falls back to the constant focus color when the theme token is unavailable', async ({ page }) => {
+        await setupPage(page, '<q2-btn intent="primary">My Button</q2-btn>', { theme: 'default-2026' });
+        await page.locator('html').evaluate(element => element.style.setProperty('--t-focus-color', 'initial'));
+        const button = page.locator('q2-btn').locator('button');
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(0, 102, 204)');
+    });
+    test('uses the constant focus color fallback for coin', async ({ page }) => {
+        await setupPage(page, coinHtml(), { theme: 'default-2026' });
+        await page.locator('html').evaluate(element => element.style.setProperty('--t-focus-color', 'initial'));
+        const button = page.locator('q2-btn').locator('button');
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(0, 102, 204)');
+    });
+});
+test.describe('q2-btn intents — pointer focus', () => {
+    for (const intent of INTENTS) {
+        for (const theme of THEMES) {
+            test(`does not add a focus ring to ${intent} in ${theme}`, async ({ page }) => {
+                await setupPage(page, labelAndIconHtml(intent), { theme });
+                const host = page.locator('q2-btn');
+                const button = host.locator('button');
+                await page.waitForTimeout(125);
+                const restingShadow = await button.evaluate(element => getComputedStyle(element).boxShadow);
+                await host.click();
+                await page.mouse.move(0, 0);
+                await page.waitForTimeout(125);
+                await expect(button).toBeFocused();
+                expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toBe(restingShadow);
+            });
+        }
+    }
+});
+test.describe('q2-btn icon-only — pointer focus', () => {
+    for (const theme of THEMES) {
+        test(`does not keep the hover background after a click in ${theme}`, async ({ page }) => {
+            await setupPage(page, '<q2-btn><q2-icon type="edit"></q2-icon></q2-btn>', { theme });
+            const host = page.locator('q2-btn');
+            const button = host.locator('button');
+            const restingBackground = await button.evaluate(element => getComputedStyle(element).backgroundColor);
+            await host.click();
+            await page.mouse.move(0, 0);
+            await expect(button).toBeFocused();
+            await expect
+                .poll(() => button.evaluate(element => getComputedStyle(element).backgroundColor))
+                .toBe(restingBackground);
+        });
+    }
+});
 test.describe('q2-btn plain (no intent) — states × themes', () => {
     for (const theme of THEMES) {
         restingCase('q2-btn--plain--resting', plainHtml(), theme);
@@ -99,12 +308,12 @@ test.describe('q2-btn plain (no intent) — states × themes', () => {
     }
 });
 // coin exercises --tct-btn-coin-label-font-size.
-// workflow-primary at each size exercises --tct-btn-font-size-small/medium/large.
+// primary at each size exercises --tct-btn-font-size-small/medium/large.
 const BTN_FONT_SCALE_CASES = [
     { name: 'coin', html: coinHtml() },
-    { name: 'workflow-primary--size-small', html: sizeHtml('workflow-primary', 'small') },
-    { name: 'workflow-primary--size-medium', html: sizeHtml('workflow-primary', 'medium') },
-    { name: 'workflow-primary--size-large', html: sizeHtml('workflow-primary', 'large') },
+    { name: 'primary--size-small', html: sizeHtml('primary', 'small') },
+    { name: 'primary--size-medium', html: sizeHtml('primary', 'medium') },
+    { name: 'primary--size-large', html: sizeHtml('primary', 'large') },
 ];
 test.describe(`q2-btn — scaled font size × themes`, () => {
     for (const { name, html } of BTN_FONT_SCALE_CASES) {

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

@@ -93,6 +93,7 @@ button {
  * @prop --tct-calendar-margin-bottom: (<length-percentage>) Controls the bottom margin of the calendar host when --tct-calendar-margin is not set.
  * @prop --tct-calendar-popover-padding: (<length-percentage>+) Controls the inner padding of the calendar popover.
  * @prop --tct-calendar-label-padding: (<length-percentage>+) Controls the inner padding of the calendar input label.
+ * @prop --tct-calendar-icon-size: (<length>) Controls the size of the calendar input icon.
  * @prop --tct-calendar-label-font-size: (<length-percentage>) Controls the font size of the calendar input label.
  * @prop --tct-calendar-month-font-size: (<length-percentage>) Controls the font size of the calendar month heading.
  * @prop --tct-calendar-month-font-weight: (<number>) Controls the font weight of the calendar month heading.
@@ -141,6 +142,8 @@ click-elsewhere {
 q2-input {
   margin: 0;
   cursor: pointer;
+  letter-spacing: inherit;
+  --tct-input-icon-size: var(--tct-calendar-icon-size, var(--const-px-18, 18px));
   --tct-input-btn-hover-background: var(--tct-calendar-btn-hover-background, var(--app-gray-l3, #f2f2f2));
   --tct-input-btn-icon-stroke-primary: var(--tct-calendar-btn-icon-stroke-primary, var(--app-gray, #747474));
   --tct-input-btn-icon-stroke-secondary: var(--tct-calendar-btn-icon-stroke-secondary, var(--app-gray, #747474));

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

@@ -351,6 +351,7 @@ export class Q2Calendar {
     }
     handleClear() {
         mirrorEmit(this, ['change', 'tctChange'], { value: null });
+        this.internalError = '';
         this.value = null;
         this.typedValue = '';
     }
@@ -370,8 +371,13 @@ export class Q2Calendar {
         this.controlElement.shadowRoot.querySelector('.input-field').focus();
     }
     popoverStateHandler({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        if (this.open === open)
+            return;
+        this.open = open;
+        if (open)
+            return;
+        const trigger = this.typeable ? this.btnCalendarToggle : this.innerInputField;
+        trigger === null || trigger === void 0 ? void 0 : trigger.focus();
     }
     defaultSuccessHandler(event) {
         if (event.target !== this.hostElement) {
@@ -496,6 +502,7 @@ export class Q2Calendar {
         // resetting by empty string
         if (newValue === '') {
             this.value = undefined;
+            this.internalError = '';
             this.setHints({ isValid: true, message: this.defaultHintMessage, messageType: 'info' });
             return;
         }
@@ -801,12 +808,12 @@ export class Q2Calendar {
     }
     renderInputField() {
         const { isTypeable, label } = this;
-        return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, valid: this.valid, ariaExpanded: `${!!this.open}`, ariaControls: "calendar-popover", ariaHaspopup: "dialog", hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: loc('tecton.element.calendar.toggleAriaLabel', [
+        return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, valid: this.valid, ariaExpanded: isTypeable ? undefined : `${!!this.open}`, ariaControls: isTypeable ? undefined : 'calendar-popover', ariaHaspopup: isTypeable ? undefined : 'dialog', hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", pseudo: !isTypeable, _role: isTypeable ? undefined : 'combobox', _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: loc('tecton.element.calendar.toggleAriaLabel', [
                 label ? loc(label) : loc('tecton.element.calendar.defaultLabel'),
-            ]), ariaExpanded: `${!!this.open}`, "hide-label": true, disabled: !!this.disabled || !!this.readonly }, h("q2-icon", { type: "calendar" })))));
+            ]), ariaExpanded: `${!!this.open}`, ariaHasPopup: "dialog", "hide-label": true, disabled: !!this.disabled || !!this.readonly }, h("q2-icon", { type: "calendar" })))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'e7bcb2f1aec6ca1149742b0b3edc0a7bbf9ce925', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: 'c80c5d1ecfb42a319bba294b20f519a2be6808e1', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
+        return (h("click-elsewhere", { key: '11162237137dc92ffc61d85ab9facb1e8844ac9f', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '00f6dbdec8323951b6e997b544d7581a3d70719c', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
     }
     static get is() { return "q2-calendar"; }
     static get encapsulation() { return "shadow"; }
@@ -1100,7 +1107,10 @@ export class Q2Calendar {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "warning",
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
+                        }],
                     "text": "Hide the input field's ` <label> ` element from view."
                 },
                 "getter": false,
@@ -1181,7 +1191,10 @@ export class Q2Calendar {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }],
                     "text": "The visible label for the `q2-calendar` input field."
                 },
                 "getter": false,

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

@@ -134,10 +134,10 @@ export class Q2MonthPicker {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'b7429b5ed21f7cda666f140a9a93ee643176979c', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '802900b16d0efa602df89edb22e174329736dca4', class: "navigation" }, h("q2-btn", { key: '0a318088ab2eb826620c056246599f5b7803c51e', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: '6e90b90e7720649681c2e95debe81d823095ccd0', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: 'd1b83fce67fec3beacb73004a02d566f77a5729f', class: "navigation" }, h("q2-btn", { key: '0772d6553ee3a75ca829755b3abc7d75ac0fa1aa', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '02018f884cb7b48fb581597fc7d5a2a323497668', class: "year" }, this.year), h("q2-icon", { key: '9ab23a381d4fedb5aca2ecee19eb975d76ff4465', class: "year-icon off", type: "chevron-down" })), h("div", { key: '79dd4cd0864d051a4252c21ebbd697e0e75b0ec3', class: "month-controller" }, h("div", { key: 'd94ad2ebfc317206bfff5b16861c52507a168e09', class: "cal-year-prev-next" }, h("q2-btn", { key: '4d8b12fde9825bd5dca90012d42e73453f2cb777', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '428b2feb8854e145bdbc88bdd2c6a2c25a3a50ce', type: "arrow-left" })), h("q2-btn", { key: '2f7ef439402c9788ae002a199813387a370e0ed3', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '5931c20eac7a2268c6b945b336f44e143e9fe484', type: "arrow-right" }))))), h("div", { key: '9e18ae0e86a741201eb2a8c6ff04b9007899cbae', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '8dfee8bcf4ee9b4137c9c8644be7f38f5794bf4d', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '689e2643923973447a38063260943bfaf98f673c', class: "year" }, this.year), h("q2-icon", { key: '590dcf2cf06e4980d70644b5be9e448cfe72abdc', class: "year-icon off", type: "chevron-down" })), h("div", { key: '3001ad6ece1c302809e27df855c921698b840c56', class: "month-controller" }, h("div", { key: '23397576c55f2f5ad32c248459ce986d38f25e5d', class: "cal-year-prev-next" }, h("q2-btn", { key: '8d38dd1bc2986e6c43b66c5cf3538adea921b259', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '55f8e258f83c0209b76efb3798478409ee246133', type: "arrow-left" })), h("q2-btn", { key: '578e4c4cd87cf3e25a09d55cb2c20ef0967d44bb', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: 'f2814f78597a04fca5617b3b59271d6c11221a5c', type: "arrow-right" }))))), h("div", { key: '7843d1db40f82116c3f82f544ad045a1f7dabadb', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '71675483d7a2d770ad8f76b3540d47c10ebb0325', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     static get is() { return "q2-month-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,6 +10,18 @@ const RESTING_VARIANTS = [
         name: 'default',
         html: `<q2-calendar label="My calendar" placeholder="My date"></q2-calendar>`,
     },
+    {
+        name: 'letter-spacing-override',
+        html: `<style>
+                q2-calendar {
+                    --tct-input-label-letter-spacing: initial;
+                    letter-spacing: 0.12em !important;
+                }
+            </style>
+            <div style="width: 220px">
+                <q2-calendar label="Scheduled transfer processing date" placeholder="My date" optional></q2-calendar>
+            </div>`,
+    },
     {
         name: 'typeable',
         html: `<q2-calendar label="My calendar" placeholder="My date" typeable></q2-calendar>`,
@@ -104,6 +116,9 @@ const openPopoverViaKeyboard = async (page) => {
     await page.keyboard.press('Tab');
     await page.keyboard.press(' ');
     await waitForDayCell(page, '2026-05-17');
+    // Two rAFs: nested q2-btn/q2-icon renders finish in the first frame; the second
+    // frame ensures the layout from those nested renders is committed before the screenshot.
+    await page.evaluate(() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
 };
 const expandedDefaultCase = (variant, theme) => {
     test(`q2-calendar--${variant.name}--expanded-default — ${theme}`, async ({ page }) => {
@@ -118,20 +133,10 @@ const dayKeyboardFocusCase = (variant, theme) => {
         await freezeClock(page);
         await setupPage(page, variant.html, { theme, setupLoc: true });
         await openPopoverViaKeyboard(page);
-        // Open with no value selected leaves all day cells tabindex=-1, so the
-        // keyboard focus is still on the input — pressing ArrowRight there is a
-        // no-op for the calendar grid. Programmatically focus today first so the
-        // calendarBody's onKeyDown handler is the one that receives ArrowRight.
-        await page.evaluate(() => {
-            var _a;
-            const cal = document.querySelector('q2-calendar');
-            const today = (_a = cal === null || cal === void 0 ? void 0 : cal.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('td[data-date="2026-05-17"]');
-            today === null || today === void 0 ? void 0 : today.focus();
-        });
+        // Opening and day navigation transfer focus after rendering and the next paint.
+        await expect(page.locator('q2-calendar td[data-date="2026-05-17"]')).toBeFocused();
         await page.keyboard.press('ArrowRight');
-        // Sub-pixel anti-aliasing on the focus ring border can drift between runs,
-        // particularly in themes with thicker borders (neo-brutalist) and
-        // translucent backdrops (glassmorphism).
+        await expect(page.locator('q2-calendar td[data-date="2026-05-18"]')).toBeFocused();
         await expect(page).toHaveScreenshot(`q2-calendar--${variant.name}--day-keyboard-focus--${theme}.png`);
     });
 };
@@ -147,8 +152,14 @@ const dayHoverCase = (variant, theme) => {
         // the rect manually. Also blur the input so the today cell's keyboard
         // focus ring isn't present in the snapshot.
         await page.evaluate(() => { var _a; return (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur(); });
-        await page.locator('td[data-date="2026-05-22"]').hover();
-        await page.waitForTimeout(50);
+        const hoveredDay = page.locator('td[data-date="2026-05-22"]');
+        await hoveredDay.hover();
+        await page.waitForFunction(() => {
+            var _a, _b;
+            const calendar = document.querySelector('q2-calendar');
+            return (_b = (_a = calendar === null || calendar === void 0 ? void 0 : calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('td[data-date="2026-05-22"]')) === null || _b === void 0 ? void 0 : _b.matches(':hover');
+        });
+        await page.evaluate(() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
         await expect(page).toHaveScreenshot(`q2-calendar--${variant.name}--day-hover--${theme}.png`);
     });
 };

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

@@ -24,6 +24,10 @@ const VARIANTS = [
         name: 'with-bar',
         html: `<q2-card title="Card Title" description="${DESC}" bar="primary" avatar-icon="document"></q2-card>`,
     },
+    {
+        name: 'with-action-icon',
+        html: `<q2-card><q2-item><q2-icon slot="decorator" type="document"></q2-icon><div slot="header">Card Title</div><div slot="body">${SHORT_DESC}</div><q2-icon slot="action" type="chevron-right"></q2-icon></q2-item></q2-card>`,
+    },
     {
         name: 'elevation-1',
         html: `<q2-card title="Card Title" description="${SHORT_DESC}" elevation="1" avatar-icon="document"></q2-card>`,