q2-tecton-elements 1.72.0 → 1.73.1

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',
 ];
@@ -69,7 +61,7 @@ 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);
-            const settleAfterMs = intent === 'workflow-primary' && theme === 'default-2026' ? 125 : 50;
+            const settleAfterMs = intent === 'primary' && theme === 'default-2026' ? 125 : 50;
             activeCase(`q2-btn--${intent}--active`, labelAndIconHtml(intent), theme, settleAfterMs);
         }
     }
@@ -92,13 +84,13 @@ test.describe('q2-btn intents — sizes × themes (resting)', () => {
         }
     }
 });
-test.describe('q2-btn workflow-primary — updated states', () => {
+test.describe('q2-btn primary — updated states', () => {
     for (const size of SIZES) {
-        activeCase(`q2-btn--workflow-primary--size-${size}--active`, sizeHtml('workflow-primary', size), 'default-2026', 125);
+        activeCase(`q2-btn--primary--size-${size}--active`, sizeHtml('primary', size), 'default-2026', 125);
     }
-    restingCase('q2-btn--workflow-primary--disabled', '<q2-btn intent="workflow-primary" disabled><span>My Button</span></q2-btn>', 'default-2026');
+    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('workflow-primary'), {
+        await setupPage(page, labelAndIconHtml('primary'), {
             theme: 'default-2026',
             motion: 'normal',
         });
@@ -121,7 +113,7 @@ test.describe('q2-btn workflow-primary — updated states', () => {
         await page.mouse.up();
     });
     test('uses the proposed-primary keyboard focus contract', async ({ page }) => {
-        await setupPage(page, labelAndIconHtml('workflow-primary'), { theme: 'default-2026' });
+        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();
@@ -129,30 +121,16 @@ test.describe('q2-btn workflow-primary — updated states', () => {
         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('workflow-primary'), { theme: 'flat' });
+        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');
     });
-    for (const theme of ['flat', 'neo-brutalist']) {
-        test(`does not add a ${theme} pointer focus ring`, async ({ page }) => {
-            await setupPage(page, labelAndIconHtml('workflow-primary'), { 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('removes only the active scale for reduced motion', async ({ page }) => {
+    test('removes the active scale from intent buttons for reduced motion', async ({ page }) => {
         await page.emulateMedia({ reducedMotion: 'reduce' });
-        await setupPage(page, labelAndIconHtml('workflow-primary'), { theme: 'default-2026' });
+        await setupPage(page, labelAndIconHtml('secondary'), { theme: 'default-2026' });
         const host = page.locator('q2-btn');
         const button = host.locator('button');
         const box = await host.boundingBox();
@@ -161,11 +139,55 @@ test.describe('q2-btn workflow-primary — updated states', () => {
         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('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',
@@ -210,7 +232,7 @@ test.describe('q2-btn intents — consistent focus ring', () => {
         });
     }
     test('prefers the per-intent outer ring color', async ({ page }) => {
-        await setupPage(page, '<q2-btn intent="workflow-destroy" style="--tct-btn-destroy-focus-visible-outer-ring-color: #123456">My Button</q2-btn>', { theme: 'default-2026' });
+        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();
@@ -226,7 +248,7 @@ test.describe('q2-btn intents — consistent focus ring', () => {
         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="workflow-primary">My Button</q2-btn>', { theme: 'default-2026' });
+        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');
@@ -244,6 +266,40 @@ test.describe('q2-btn intents — consistent focus ring', () => {
         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);
@@ -252,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.js

@@ -371,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) {
@@ -808,7 +813,7 @@ export class Q2Calendar {
             ]), ariaExpanded: `${!!this.open}`, ariaHasPopup: "dialog", "hide-label": true, disabled: !!this.disabled || !!this.readonly }, h("q2-icon", { type: "calendar" })))));
     }
     render() {
-        return (h("click-elsewhere", { key: '89bfe4685021ec4fb3bf1abe1e1d5127c4712582', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '9508bb1a1d9d05b133df8e1842d1b9fd72f40937', 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"; }
@@ -1102,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,
@@ -1183,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

@@ -133,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`);
     });
 };

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

@@ -369,11 +369,11 @@ export class Q2CardImage {
     render() {
         const cardContent = this.clickable ? (h("q2-btn", { block: true, disabled: this.disabled, label: this.tctAriaLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
         const showBanner = !!this.cardStatus && this.size === 'large';
-        return (h(Host, { key: 'f9fef10f67ab8b4b5a7908afbe82db955bd6c6ed', class: {
+        return (h(Host, { key: '1210673a91d22bac5106d3807ec08179fb6cfd9f', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), h("div", { key: '2c14cd32230baa1ef4c4300d3d5485b24cce674e', class: "card-wrapper" }, cardContent, this.renderAction())));
+            } }, this.renderStatusBanner(), h("div", { key: 'b81dd3c1b02260e9ff1d7e7321d88a3c2d209f83', class: "card-wrapper" }, cardContent, this.renderAction())));
     }
     static get is() { return "q2-card-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -68,13 +68,14 @@ export class Q2Carousel {
                         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 focusSource = document.activeElement;
+                        const isPaginationFocused = !!focusSource.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 });
+                            this.pendingPaginationFocus = { index: logicalIndex, source: focusSource };
                         }
                         else if (isCarouselFocused)
                             swiper.slides[swiper.activeIndex].focus({
@@ -349,7 +350,7 @@ export class Q2Carousel {
         };
         this.renderNextNavBtn = () => {
             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" }))));
+            return (h("div", { class: "next-btn" }, h("q2-btn", { class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", intent: "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;
@@ -373,13 +374,14 @@ export class Q2Carousel {
         };
         this.renderPrevNavBtn = () => {
             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" }))));
+            return (h("div", { class: "prev-btn" }, h("q2-btn", { class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", intent: "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
     // #region Component Lifecycle Events
     disconnectedCallback() {
         var _a;
+        this.pendingPaginationFocus = undefined;
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
             this.mutationObserver = null;
@@ -412,6 +414,18 @@ export class Q2Carousel {
         this.mutationObserver = observer;
         overrideFocus(this.hostElement);
     }
+    componentDidRender() {
+        var _a;
+        const pendingFocus = this.pendingPaginationFocus;
+        this.pendingPaginationFocus = undefined;
+        if (!pendingFocus)
+            return;
+        const activeElement = document.activeElement;
+        if (activeElement !== pendingFocus.source && activeElement !== document.body)
+            return;
+        // Dynamic pagination hides distant dots until the new active index renders.
+        (_a = this.paginationBtns[pendingFocus.index]) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+    }
     // #endregion
     // #region Listeners
     carouselPaneClicked(event) {
@@ -561,7 +575,7 @@ export class Q2Carousel {
             paginationWrapperClasses.push('evenly-space');
         if (showNavigationArrows && arrowPosition === 'hug')
             paginationWrapperClasses.push('center-space');
-        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 &&
+        return (h(Host, { key: 'e0ebc5ae08102ced9a732ca59217cd3c2c501172', 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) &&

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

@@ -93,6 +93,11 @@ const focusIndicatorCase = (variant, theme) => {
         await setupPage(page, variant.html, { theme, setupLoc: true });
         await page.keyboard.press('Tab');
         await page.keyboard.press('Tab');
+        await expect(page.locator('.q2-carousel-page-indicator-0')).toBeFocused();
+        await page.keyboard.press('End');
+        await expect(page.locator('.q2-carousel-page-indicator-4')).toBeFocused();
+        await page.keyboard.press('Home');
+        await expect(page.locator('.q2-carousel-page-indicator-0')).toBeFocused();
         await expect(page).toHaveScreenshot(`q2-carousel--${variant.name}--focus-indicator--${theme}.png`);
     });
 };
@@ -103,6 +108,32 @@ const focusPaneCase = (variant, theme) => {
         await expect(page).toHaveScreenshot(`q2-carousel--${variant.name}--focus-pane--${theme}.png`);
     });
 };
+const focusDynamicIndicatorCase = (theme) => {
+    test(`q2-carousel--dynamic-pagination--focus-indicator — ${theme}`, async ({ page }) => {
+        const panes = Array.from({ length: 6 }, (_, index) => PANE(index + 1, 6)).join('');
+        await setupPage(page, `<q2-carousel auto-height>${panes}</q2-carousel>`, { theme, setupLoc: true });
+        await page.keyboard.press('Tab');
+        await expect(page.locator('.q2-carousel-page-indicator-0')).toBeFocused();
+        for (const [key, index] of [
+            ['End', 5],
+            ['Home', 0],
+            ['ArrowLeft', 5],
+            ['ArrowRight', 0],
+        ]) {
+            await page.keyboard.press(key);
+            const indicator = page.locator(`.q2-carousel-page-indicator-${index}`);
+            await expect(indicator).toBeFocused();
+            await expect(indicator).toHaveAttribute('aria-selected', 'true');
+            await expect(indicator).toBeVisible();
+            await expect(indicator).not.toHaveCSS('box-shadow', 'none');
+            await page.waitForFunction(() => {
+                const container = document.querySelector('.swiper');
+                return !container.swiper.animating;
+            });
+        }
+        await expect(page).toHaveScreenshot(`q2-carousel--dynamic-pagination--focus-indicator--${theme}.png`);
+    });
+};
 test.describe('q2-carousel — variants × themes', () => {
     for (const variant of VARIANTS) {
         for (const theme of THEMES) {
@@ -113,5 +144,6 @@ test.describe('q2-carousel — variants × themes', () => {
         focusArrowCase(FOCUS_VARIANT, theme);
         focusIndicatorCase(FOCUS_VARIANT, theme);
         focusPaneCase(FOCUS_VARIANT, theme);
+        focusDynamicIndicatorCase(theme);
     }
 });

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

@@ -97,12 +97,12 @@ export class Q2CarouselPane {
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '6d221b15545378efa40b54864b2ebca1bcb1e983', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (h(Host, { key: 'f4a4c10d9e66146fae74ee206bb466563ff70957', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: '394965fb0a46501fcd33aa3acadb2eaae6a1accd', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'a059daeb1c5192cec8594b6c9843828d6b833f12' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: '41030b6a419ccd15485eb0b8a04ba6171777f5e9', class: "q2-carousel-pane-main-content" }, h("slot", { key: '33850b8d35a3c134f014a6eb4638be25f7ab76c0' }))));
     }
     static get is() { return "q2-carousel-pane"; }
     static get originalStyleUrls() {

package/dist/collection/components/q2-chart-area/q2-chart-area.css

@@ -98,10 +98,21 @@ button {
 }
 
 .container {
+  position: relative;
   width: 100%;
   height: 100%;
 }
 
+.chart-keyboard-value {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: var(--app-scale-1x);
+  background: var(--t-base);
+  color: var(--t-text);
+  pointer-events: none;
+}
+
 .chart-container {
   width: 100%;
   height: 100%;