q2-tecton-elements 1.72.0 → 1.73.1

package/dist/collection/components/q2-action-sheet/q2-action-sheet.js

@@ -1,4 +1,4 @@
-import { h, Fragment, } from "@stencil/core";
+import { h } from "@stencil/core";
 import { loc, waitForNextPaint } from "../../utils/index";
 import sanitizeHTMLString, { sanitizeActionSheetSlotHtml } from "../../utils/sanitize-html-string";
 import mirrorEmit from "../../utils/mirror-emit";
@@ -9,9 +9,13 @@ import mirrorEmit from "../../utils/mirror-emit";
  */
 export class Q2ActionSheet {
     constructor() {
+        // #region Own Properties
+        this.bodyOverflow = '';
         this.initialSelectedOptions = [];
         this.maxHeight = 0.75;
         this.minHeight = 0.2;
+        this.rootOverflow = '';
+        this.selectedDate = {};
         this.selectedOptions = { values: [], value: '' };
         // #endregion
         // #region State Properties
@@ -168,6 +172,26 @@ export class Q2ActionSheet {
                 return;
             this.onCancel(event);
         };
+        this.onDatePickerCancel = (event) => {
+            event.stopPropagation();
+            this.onCancel(event);
+        };
+        this.onDatePickerChange = (event) => {
+            event.stopPropagation();
+            this.selectedDate = event.detail;
+        };
+        this.onDatePickerClose = (event) => {
+            event.stopPropagation();
+            const detail = event.detail || undefined;
+            if (detail === null || detail === void 0 ? void 0 : detail.error) {
+                this.hide({ error: detail.error, type: 'confirm' });
+                return;
+            }
+            const hasSelection = this.selectedDate.value !== undefined ||
+                this.selectedDate.rangeStart !== undefined ||
+                this.selectedDate.rangeEnd !== undefined;
+            this.hide({ ...this.selectedDate, type: hasSelection ? 'confirm' : 'cancel' });
+        };
         this.onListChange = (event) => {
             this.selectedOptions = event.detail;
         };
@@ -187,16 +211,47 @@ export class Q2ActionSheet {
                 this.onListDone();
             }
         };
+        this.onViewportResize = () => {
+            requestAnimationFrame(() => this.updateDialogMinMaxHeight());
+        };
         // #endregion
         // #region Render Methods
+        this.renderDatePicker = ({ data }) => {
+            const props = data.datePickerProps;
+            return (h("div", { class: "content date-picker-content", ref: el => (this.contentElement = el) }, h("q2-date-picker", { _actionSheet: true, open: true, calendarLabel: props.calendarLabel, closeDelay: props.closeDelay, cutoffTime: props.cutoffTime, daysOfWeekChecksum: props.daysOfWeekChecksum, disclaimer: props.disclaimer, endDate: props.endDate, displayFormat: props.displayFormat, invalidDates: props.invalidDates, locale: props.locale, mode: props.mode, rangeEnd: props.rangeEnd, rangeStart: props.rangeStart, startDate: props.startDate, validDates: props.validDates, value: props.value, onTctCancel: this.onDatePickerCancel, onTctChange: this.onDatePickerChange, onTctClose: this.onDatePickerClose })));
+        };
         this.renderList = ({ data }) => {
             var _a;
             const { listProps, slotsHtml = [] } = data;
-            return (h(Fragment, null, slotsHtml
-                .filter(entry => entry.slot === 'top')
-                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) }))), h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, label: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.title) || this.title, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { ref: el => (this.doneButtonElement = el), "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), slotsHtml
-                .filter(entry => entry.slot === 'bottom')
-                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) })))));
+            let scrollTopSlots = false;
+            const slots = slotsHtml.map(entry => {
+                var _a;
+                const html = sanitizeActionSheetSlotHtml(entry.html);
+                const container = document.createElement('div');
+                container.innerHTML = html;
+                const marked = ((_a = container.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-action-sheet-scroll')) === true;
+                if (entry.slot === 'top' && marked)
+                    scrollTopSlots = true;
+                return {
+                    ...entry,
+                    html,
+                    scrolls: entry.slot === 'top' ? scrollTopSlots : marked,
+                };
+            });
+            // Bottom content joins the scroll area from the options through the last marker.
+            let scrollBottomSlots = false;
+            for (let index = slots.length - 1; index >= 0; index--) {
+                const entry = slots[index];
+                if (entry.slot !== 'bottom')
+                    continue;
+                if (entry.scrolls)
+                    scrollBottomSlots = true;
+                entry.scrolls = scrollBottomSlots;
+            }
+            const renderSlots = (position, scrolls) => slots
+                .filter(entry => entry.slot === position && entry.scrolls === scrolls)
+                .map(entry => (h("div", { class: "list-slot", innerHTML: entry.html })));
+            return (h("div", { class: "list-body" }, renderSlots('top', false), h("div", { class: "content", ref: el => (this.contentElement = el) }, renderSlots('top', true), h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, label: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.title) || this.title, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null)), renderSlots('bottom', true)), h("footer", null, listProps.multiple && (h("q2-btn", { ref: el => (this.doneButtonElement = el), "test-id": "btnDone", intent: "primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), renderSlots('bottom', false)));
         };
         this.renderMessage = ({ data }) => {
             return (h("q2-message", { type: data.type }, data.title && h("h2", null, data.title), data.description && h("p", null, data.description)));
@@ -210,6 +265,9 @@ export class Q2ActionSheet {
     disconnectedCallback() {
         this.dialogElement.removeEventListener('cancel', this.onCancel);
         this.dialogElement.removeEventListener('keydown', this.handleDialogKeydown, true);
+        window.removeEventListener('resize', this.onViewportResize);
+        if (this.dialogElement.open)
+            this.restorePageScroll();
     }
     componentDidLoad() {
         this.dialogElement.addEventListener('cancel', this.onCancel);
@@ -222,6 +280,8 @@ export class Q2ActionSheet {
     async hide(data = { value: '', values: [], type: 'confirm' }) {
         mirrorEmit(this, ['close', 'tctClose'], data);
         this.renderStatus = 'is-closing';
+        window.removeEventListener('resize', this.onViewportResize);
+        this.restorePageScroll();
         this.dialogElement.addEventListener('transitionend', () => {
             if (this.renderStatus !== 'is-closing')
                 return;
@@ -229,25 +289,38 @@ export class Q2ActionSheet {
             this.renderStatus = null;
             this.data = undefined;
             this.initialSelectedOptions = [];
+            this.selectedDate = {};
             this.selectedOptions = { values: [], value: '' };
             this.hidePostHook();
         }, { once: true });
     }
     async show() {
+        if (this.dialogElement.open)
+            return;
         this.showPreHook();
         await waitForNextPaint();
         this.updateDialogMinMaxHeight();
         this.storeInitialValues();
-        if (this.dialogElement.open)
-            return;
         this.dialogElement.showModal();
-        this.renderStatus = 'is-opening';
-        this.dialogElement.addEventListener('transitionend', () => {
-            if (this.renderStatus !== 'is-opening')
-                return;
-            this.renderStatus = 'is-open';
-            this.focusContent();
-        }, { once: true });
+        window.addEventListener('resize', this.onViewportResize);
+        this.bodyOverflow = document.body.style.overflow;
+        this.rootOverflow = document.documentElement.style.overflow;
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
+        try {
+            this.renderStatus = 'is-opening';
+            this.dialogElement.addEventListener('transitionend', () => {
+                if (this.renderStatus !== 'is-opening')
+                    return;
+                this.renderStatus = 'is-open';
+                this.focusContent();
+            }, { once: true });
+        }
+        catch (error) {
+            window.removeEventListener('resize', this.onViewportResize);
+            this.restorePageScroll();
+            throw error;
+        }
     }
     // #endregion
     // #region Local Methods
@@ -273,6 +346,10 @@ export class Q2ActionSheet {
             this.hostElement.innerHTML = null;
         }
     }
+    restorePageScroll() {
+        document.body.style.overflow = this.bodyOverflow;
+        document.documentElement.style.overflow = this.rootOverflow;
+    }
     showPreHook() {
         const { data } = this;
         if (!data)
@@ -298,12 +375,15 @@ export class Q2ActionSheet {
         this.dialogElement.style.setProperty('--comp-action-sheet-computed-max-height', `${Math.floor(windowHeight * this.maxHeight)}px`);
     }
     render() {
-        var _a;
         const { data } = this;
         const showHeader = (data === null || data === void 0 ? void 0 : data.title) || this.title || !this.hideClose;
+        const headerTitle = (data === null || data === void 0 ? void 0 : data.title) || this.title;
         const renderStatus = this.renderStatus || '';
         let RenderContent = null;
         switch (data === null || data === void 0 ? void 0 : data.appearance) {
+            case 'date-picker':
+                RenderContent = this.renderDatePicker;
+                break;
             case 'message':
                 RenderContent = this.renderMessage;
                 break;
@@ -316,7 +396,7 @@ export class Q2ActionSheet {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: '840635222baf3ed3f7193c550bb73675d0b466d4', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick, "aria-labelledby": showHeader ? 'title' : undefined }, h("div", { key: 'c09338fde8ba753281162bd75714e29e6a8cc936', class: interiorClasses }, showHeader && (h("header", { key: 'd3bb667204c262a28363b71ffe6fba8209454391' }, h("div", { key: '8981cf55df99b607a49660fd6ecfe8ef827c100e', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'b4d175a3e7d0382ae9e4630a4fe0f85403af5888', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '95624ea4bcb5a9897a2b09326de718205a32e346', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '4f599b2645c604bde96747af50f8d7344db60e11' }, data.description), RenderContent && h(RenderContent, { key: '0878d252923c4c3a8b82cc89f8a88fc3bace794d', data: this.data }))));
+        return (h("dialog", { key: 'a2594cad0378cf9bf045ed3ec1022afc58e34dbb', ref: el => (this.dialogElement = el), class: renderStatus, "aria-label": showHeader ? undefined : headerTitle, "aria-labelledby": showHeader ? 'title' : undefined, onClick: this.onClick }, h("div", { key: 'de6361cfa49ec69666b8b2c193dcc9cfc5ac4b0f', class: interiorClasses }, showHeader && (h("header", { key: 'c5a1ddd1f414027e3f75d2a7048c1ccd349cba78' }, h("div", { key: '3d4e7472f5c55ed96eec5ad8909d6ada7a5aa5b2', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'c5e4c952b308e2571a6e90017e4f8010b4a580fe', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '10383e6b8d6ab899648208bbada3c18f47fb5bd3', type: "close" }))))), data && 'description' in data && data.description && h("p", { key: 'a1de7256a6f497270866f076d7697226a8bea946' }, data.description), RenderContent && h(RenderContent, { key: '3f5a57d706b4066c036bb4710a612bd34268b78e', data: this.data }))));
     }
     static get is() { return "q2-action-sheet"; }
     static get encapsulation() { return "shadow"; }
@@ -337,7 +417,7 @@ export class Q2ActionSheet {
                 "mutable": true,
                 "complexType": {
                     "original": "ActionSheetData",
-                    "resolved": "{ appearance: \"list\"; title?: string; description?: string; event?: MouseEvent | KeyboardEvent; listProps: { multiple: boolean; selectedOptions: ActionSheetSelectedOption[]; noSelect: boolean; }; options: ActionSheetListDataOptions; slotsHtml?: ActionSheetStaticHtmlData[]; } | { appearance: \"message\"; type: \"info\" | \"success\" | \"warning\" | \"error\"; title?: string; description?: string; slotsHtml?: ActionSheetStaticHtmlData[]; }",
+                    "resolved": "{ appearance: \"date-picker\"; title?: string; datePickerProps: ActionSheetDatePickerProps; } | { appearance: \"list\"; title?: string; description?: string; event?: MouseEvent | KeyboardEvent; listProps: { multiple: boolean; selectedOptions: ActionSheetSelectedOption[]; noSelect: boolean; }; options: ActionSheetListDataOptions; slotsHtml?: ActionSheetStaticHtmlData[]; } | { appearance: \"message\"; type: \"info\" | \"success\" | \"warning\" | \"error\"; title?: string; description?: string; slotsHtml?: ActionSheetStaticHtmlData[]; }",
                     "references": {
                         "ActionSheetData": {
                             "location": "import",

package/dist/collection/components/q2-action-sheet/test/q2-action-sheet-test.vr.js

@@ -0,0 +1,124 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+// q2-action-sheet hosts stay hidden until show() runs, which makes setupPage's
+// `[stencil-hydrated]:visible` wait time out. Prepending any visible hydrated Stencil
+// element lets that wait resolve so we can call show(). Matches q2-modal's VR setup.
+const VISIBLE_HYDRATION_ANCHOR = `<q2-icon type="info"></q2-icon>`;
+for (const multiple of [false, true]) {
+    for (const landscape of [false, true]) {
+        const name = `mixed-slots-${multiple ? 'multi' : 'single'}-${landscape ? 'landscape' : 'portrait'}`;
+        test(name, async ({ page }) => {
+            await page.setViewportSize(landscape ? { width: 667, height: 375 } : { width: 375, height: 667 });
+            await setupPage(page, `${VISIBLE_HYDRATION_ANCHOR}<q2-action-sheet></q2-action-sheet>`, {
+                setupLoc: true,
+                fontSizePx: 24,
+            });
+            await page.locator('q2-action-sheet').evaluate(async (element, multiple) => {
+                await element.componentOnReady();
+                element.data = {
+                    appearance: 'list',
+                    title: 'Profile',
+                    listProps: { multiple, selectedOptions: [], noSelect: false },
+                    options: Array.from({ length: 30 }, (_, index) => ({
+                        value: `profile-${index}`,
+                        display: `Profile ${index + 1}`,
+                        innerHTML: `Profile ${index + 1}`,
+                        disabled: false,
+                        hidden: false,
+                        multiline: false,
+                        separator: false,
+                    })),
+                    slotsHtml: [
+                        { slot: 'top', html: '<div>Fixed top</div>' },
+                        { slot: 'top', html: '<div data-action-sheet-scroll>Alex Example</div>' },
+                        { slot: 'top', html: '<div>alex@example.com</div>' },
+                        { slot: 'bottom', html: '<div>Profile help</div>' },
+                        { slot: 'bottom', html: '<div data-action-sheet-scroll>Manage profiles</div>' },
+                        { slot: 'bottom', html: '<div>Fixed bottom</div>' },
+                    ],
+                };
+                await element.show();
+            }, multiple);
+            await expect(page.locator('q2-action-sheet dialog')).toHaveClass('is-open');
+            const content = page.locator('q2-action-sheet .list-body > .content');
+            await expect(content).toHaveCount(1);
+            // Opening moves focus from the dialog's close button to its options.
+            // Capture a defined focus and scroll state rather than either opening state.
+            const firstOption = page.locator('q2-action-sheet q2-option').first();
+            await expect(firstOption).toHaveAttribute('stencil-hydrated', '');
+            await firstOption.evaluate(element => element.focus({ preventScroll: true }));
+            await expect(firstOption).toBeFocused();
+            await content.evaluate(element => {
+                element.scrollTop = 0;
+            });
+            await expect(content).toHaveJSProperty('scrollTop', 0);
+            const movingSlots = content.locator('.list-slot');
+            const fixedSlots = page.locator('q2-action-sheet .list-body > .list-slot');
+            await expect(movingSlots).toHaveText([
+                'Alex Example',
+                'alex@example.com',
+                'Profile help',
+                'Manage profiles',
+            ]);
+            await expect(fixedSlots).toHaveText(['Fixed top', 'Fixed bottom']);
+            const fixedElements = page.locator('q2-action-sheet header, q2-action-sheet .list-body > .list-slot, q2-action-sheet footer');
+            const initialBounds = await Promise.all((await fixedElements.all()).map(element => element.boundingBox()));
+            const dimensions = await content.evaluate(element => ({
+                clientHeight: element.clientHeight,
+                scrollHeight: element.scrollHeight,
+            }));
+            expect(dimensions.clientHeight).toBeGreaterThan(0);
+            expect(dimensions.scrollHeight).toBeGreaterThan(dimensions.clientHeight);
+            const dialogBounds = await page.locator('q2-action-sheet dialog').boundingBox();
+            const contentBounds = await content.boundingBox();
+            expect(contentBounds.y).toBeGreaterThanOrEqual(dialogBounds.y);
+            expect(contentBounds.y + contentBounds.height).toBeLessThanOrEqual(dialogBounds.y + dialogBounds.height + 1);
+            await expect(firstOption).toBeFocused();
+            await expect(page).toHaveScreenshot(`q2-action-sheet--${name}.png`);
+            const lastOption = page.locator('q2-action-sheet q2-option').last();
+            await lastOption.scrollIntoViewIfNeeded();
+            await expect(lastOption).toBeInViewport({ ratio: 1 });
+            const optionBounds = await lastOption.boundingBox();
+            expect(optionBounds.y).toBeGreaterThanOrEqual(contentBounds.y - 1);
+            expect(optionBounds.y + optionBounds.height).toBeLessThanOrEqual(contentBounds.y + contentBounds.height + 1);
+            expect(await content.evaluate(element => element.scrollTop)).toBeGreaterThan(0);
+            await content.evaluate(element => {
+                element.scrollTop = element.scrollHeight;
+            });
+            await expect(movingSlots.last()).toBeInViewport({ ratio: 1 });
+            await expect(movingSlots.first()).not.toBeInViewport();
+            expect(await Promise.all((await fixedElements.all()).map(element => element.boundingBox()))).toEqual(initialBounds);
+            for (const element of await fixedSlots.all()) {
+                await expect(element).toBeInViewport({ ratio: 1 });
+            }
+            if (multiple) {
+                await expect(page.locator('q2-action-sheet [test-id="btnDone"]')).toBeInViewport({ ratio: 1 });
+            }
+            await expect(page.locator('q2-action-sheet [test-id="btnClose"]')).toBeInViewport({ ratio: 1 });
+            await expect(page).toHaveScreenshot(`q2-action-sheet--${name}--scrolled.png`);
+        });
+    }
+}
+for (const theme of THEMES) {
+    test(`q2-action-sheet--calendar-navigation-focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, '<q2-btn>Choose a date</q2-btn><q2-action-sheet></q2-action-sheet>', {
+            theme,
+            setupLoc: true,
+        });
+        await page.locator('q2-action-sheet').evaluate((element) => {
+            element.data = {
+                appearance: 'date-picker',
+                title: 'Choose a date',
+                datePickerProps: { mode: 'single', value: '2026-06-15' },
+            };
+        });
+        await page.locator('q2-action-sheet').evaluate((element) => element.show());
+        const navigation = page.locator('q2-date-picker .previousYear button');
+        await navigation.waitFor({ state: 'visible' });
+        await page.keyboard.press('Tab');
+        await navigation.focus();
+        await expect(navigation).toBeFocused();
+        await expect(page).toHaveScreenshot(`q2-action-sheet--calendar-navigation-focus--${theme}.png`);
+    });
+}

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

@@ -8,6 +8,7 @@ import { h } from "@stencil/core";
  */
 export class Q2Avatar {
     constructor() {
+        this.initialsFontScale = 1;
         // #endregion
         // #region State Properties
         this.badSrc = false;
@@ -29,9 +30,11 @@ export class Q2Avatar {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        var _a;
         if (this.decoratorObserver) {
             this.decoratorObserver.disconnect();
         }
+        (_a = this.initialsResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
         this.checkDecorator();
@@ -39,6 +42,20 @@ export class Q2Avatar {
     componentDidLoad() {
         this.setupDecoratorObserver();
     }
+    componentDidRender() {
+        var _a, _b, _c;
+        const text = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.avatar-initials text');
+        if (text !== this.observedInitialsText) {
+            (_b = this.initialsResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+            this.observedInitialsText = text;
+            this.initialsFontScale = 1;
+            if (text && typeof ResizeObserver === 'function') {
+                (_c = this.initialsResizeObserver) !== null && _c !== void 0 ? _c : (this.initialsResizeObserver = new ResizeObserver(() => this.fitInitials()));
+                this.initialsResizeObserver.observe(text);
+            }
+        }
+        this.fitInitials();
+    }
     // #endregion
     // #region Watchers
     srcDidUpdate() {
@@ -69,6 +86,22 @@ export class Q2Avatar {
         const decoratorElements = Array.from(this.el.children).filter(child => child.getAttribute('slot') === 'decorator');
         this.hasDecorator = decoratorElements.length > 0;
     }
+    fitInitials() {
+        const text = this.observedInitialsText;
+        if (!text)
+            return;
+        const { x, y, width, height } = text.getBBox();
+        const requiredHalfExtent = Math.max(50 - x, x + width - 50, 50 - y, y + height - 50);
+        const baseHalfExtent = requiredHalfExtent / this.initialsFontScale;
+        const scale = baseHalfExtent > 50 ? 48 / baseHalfExtent : 1;
+        if (Math.abs(scale - this.initialsFontScale) < 0.00001)
+            return;
+        this.initialsFontScale = scale;
+        if (scale === 1)
+            text.style.removeProperty('font-size');
+        else
+            text.style.fontSize = `calc(var(--tct-avatar-font-size, var(--const-px-40, 40px)) * ${scale})`;
+    }
     setupDecoratorObserver() {
         // Set up MutationObserver to watch for changes to the host element's children
         this.decoratorObserver = new MutationObserver(() => {
@@ -90,7 +123,7 @@ export class Q2Avatar {
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: 'bdce1116b87a48c861e7ba66e0dccd13829d3819', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: '461db5f2062faa3c4d7f43105c84c51aabc179d8', class: "decorator" }, h("slot", { key: '673a93a53a752514bce15687f5791682fdf3b0b7', name: "decorator" }))), showImg && (h("img", { key: 'fa881cb161c7f2bf64dabc1cf888d465e4698cb9', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '6d8707c833fed056813f81b9014e82584444fa54', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'ae99c0b68abaa70e9517dee3dfe6dfdccdad13d6', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'df92213216e69c7d933fdfcd4ba1664cee793e14', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '373a344abc59c1e8ea07472d932d5417265582d3', type: this.icon })))));
+        return (h("div", { key: 'd5a32129734a7923c61ecfbace6af0799051b8c9', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: 'a20e35425d03a0b45df79846b1613be993935bab', class: "decorator" }, h("slot", { key: '082a7d3022be63825ac0237b0f458eb3fc328737', name: "decorator" }))), showImg && (h("img", { key: 'bc092a5fe3996d53f89bc69146aceb2af53b571a', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '385335ea2b6d35d48179cbea4aa3ac3d99e56093', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'fb331a07ddc746787341e31febcf2a267f8f0e33', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'da7a75cc5e5b4e62eeaa63c399ed0dc6c869e99c', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '626219dd1528fa7e39d298856be8205f21a6708e', type: this.icon })))));
     }
     static get is() { return "q2-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,10 @@ import { test } from "@stencil/playwright";
 import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 // Inline 2x2 solid-blue PNG — keeps the image variant hermetic (no network).
 const IMAGE_DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVQI12NkYGD4z8DAwMTAwMDAAAALzAEFwQ7e7AAAAABJRU5ErkJggg==';
+const waitForInitialsToSettle = (page) => page.evaluate(async () => {
+    await document.fonts.ready;
+    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+});
 const VARIANTS = [
     {
         name: 'icon-small',
@@ -30,7 +34,7 @@ const VARIANTS = [
     },
     {
         name: 'initials-4',
-        html: `<q2-avatar initials="LSMA"></q2-avatar>`,
+        html: `<q2-avatar initials="WWWW"></q2-avatar>`,
     },
     {
         name: 'image',
@@ -48,7 +52,9 @@ const VARIANTS = [
 const restingCase = (variant, theme) => {
     test(`q2-avatar--${variant.name}--resting — ${theme}`, async ({ page }) => {
         await setupPage(page, variant.html, { theme });
-        await expect(page).toHaveScreenshot(`q2-avatar--${variant.name}--resting--${theme}.png`);
+        if (variant.name.startsWith('initials-'))
+            await waitForInitialsToSettle(page);
+        await expect(page).toHaveScreenshot(`q2-avatar--${variant.name}--resting--${theme}.png`, variant.name === 'initials-4' ? { maxDiffPixels: 50 } : undefined);
     });
 };
 test.describe('q2-avatar — variants × themes', () => {
@@ -59,14 +65,83 @@ test.describe('q2-avatar — variants × themes', () => {
     }
 });
 // Initials variants exercise --tct-avatar-font-size (SVG text element).
-const AVATAR_FONT_SCALE_VARIANTS = VARIANTS.filter(v => v.name === 'initials-1');
+const AVATAR_FONT_SCALE_VARIANTS = VARIANTS.filter(v => v.name.startsWith('initials-'));
 test.describe(`q2-avatar — scaled font size × themes`, () => {
     for (const variant of AVATAR_FONT_SCALE_VARIANTS) {
         for (const theme of THEMES) {
             test(`q2-avatar--${variant.name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
                 await setupPage(page, variant.html, { theme, fontSizePx: FONT_SCALE_PX });
-                await expect(page).toHaveScreenshot(`q2-avatar--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+                await waitForInitialsToSettle(page);
+                await expect(page).toHaveScreenshot(`q2-avatar--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`, variant.name === 'initials-4' ? { maxDiffPixels: 50 } : undefined);
             });
         }
     }
 });
+test.describe('q2-avatar — initials fit inside the circle', () => {
+    for (const theme of THEMES) {
+        test(`q2-avatar--initials-fit — ${theme}`, async ({ page }) => {
+            const html = ['small', 'medium', 'large']
+                .map(size => `<div style="display: flex; gap: 8px; margin-bottom: 16px">
+                        ${['E', 'ES', 'ESS', 'ESSS', 'LSMA', 'W', 'WW', 'WWW', 'WWWW']
+                .map(initials => `<q2-avatar size="${size}" initials="${initials}"></q2-avatar>`)
+                .join('')}
+                    </div>`)
+                .join('');
+            await setupPage(page, html, { theme, fontSizePx: FONT_SCALE_PX });
+            await expect
+                .poll(() => page.locator('q2-avatar text').evaluateAll(elements => elements.every(element => {
+                const { x, y, width, height } = element.getBBox();
+                return x >= 0 && x + width <= 100 && y >= 0 && y + height <= 100;
+            })))
+                .toBe(true);
+            const bounds = await page.locator('q2-avatar text').evaluateAll(elements => elements.map(element => {
+                const { x, y, width, height } = element.getBBox();
+                return {
+                    initials: element.textContent,
+                    x,
+                    y,
+                    right: x + width,
+                    bottom: y + height,
+                };
+            }));
+            for (const { initials, x, y, right, bottom } of bounds) {
+                expect(x, `${initials} left edge`).toBeGreaterThanOrEqual(-0.25);
+                expect(right, `${initials} right edge`).toBeLessThanOrEqual(100.25);
+                expect(y, `${initials} top edge`).toBeGreaterThanOrEqual(-0.25);
+                expect(bottom, `${initials} bottom edge`).toBeLessThanOrEqual(100.25);
+            }
+        });
+    }
+});
+test('q2-avatar — initials fit at font-32 root size', async ({ page }) => {
+    const html = ['small', 'medium', 'large']
+        .map(size => `<div style="display: flex; gap: 8px; margin-bottom: 16px">
+                ${['ES', 'ESS', 'LSM', 'LSMA', 'WWWW']
+        .map(initials => `<q2-avatar size="${size}" initials="${initials}"></q2-avatar>`)
+        .join('')}
+            </div>`)
+        .join('');
+    // Set the font size before hydration, as a browser preference would be.
+    await setupPage(page, `<style>html { font-size: 32px; --t-px-1: calc(1 / 16 * 1rem); }</style>${html}`, {
+        theme: 'standard',
+    });
+    expect(await page.evaluate(() => getComputedStyle(document.documentElement).fontSize)).toBe('32px');
+    const allInitialsFit = () => page.locator('q2-avatar text').evaluateAll(elements => elements.every(element => {
+        const { x, y, width, height } = element.getBBox();
+        return x >= 0 && x + width <= 100 && y >= 0 && y + height <= 100;
+    }));
+    await expect.poll(allInitialsFit).toBe(true);
+    const bounds = await page.locator('q2-avatar text').evaluateAll(elements => elements.map(element => {
+        const { x, y, width, height } = element.getBBox();
+        return { initials: element.textContent, x, y, right: x + width, bottom: y + height };
+    }));
+    for (const { initials, x, y, right, bottom } of bounds) {
+        expect(x, `${initials} left edge`).toBeGreaterThanOrEqual(0);
+        expect(right, `${initials} right edge`).toBeLessThanOrEqual(100);
+        expect(y, `${initials} top edge`).toBeGreaterThanOrEqual(0);
+        expect(bottom, `${initials} bottom edge`).toBeLessThanOrEqual(100);
+    }
+    // Also verify an already-rendered avatar refits when the font scale changes.
+    await page.evaluate(() => document.documentElement.style.setProperty('--t-px-1', '3px'));
+    await expect.poll(allInitialsFit).toBe(true);
+});