q2-tecton-elements 1.73.0 → 1.73.1

package/dist/cjs/tecton-tab-pane.cjs.entry.js

@@ -57,9 +57,9 @@ const TectonTabPane = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'b55643965ef49af2e41a683686db00b97e1c90b7', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (index.h("div", { key: 'f04f1594eba66d962d9adbab48bf3559f658c650' }, index.h("slot", { key: '08804102412a6b57ac9b9db2002d1608f8b22c19', name: "loading-wrapper" }), index.h("iframe", { key: 'a2524435de8072fb27ebdcc9762a1f20367df098', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (index.h("div", { key: '313fa13779cd8ecb5439b1a96cb7aaf17f6c871b', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (index.h("div", { key: '5207414b205d1e9a25fb1455ca21ff7cc913a5fd' }, index.h("slot", { key: 'd883e909e38981f315bc1cab9ef57957a616c0d5', name: "loading-wrapper" }), index.h("iframe", { key: '2f0233d04d3c5be619cb54bfe637252a7ef42d77', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (index.h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), index.h("div", { key: '59e9d5ddbabadb0e66615d998403d267c259f937', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: '450c5724cf32ba05a2fc93b8adeba83b08e871e4' }))));
+        }))) : (''))), index.h("div", { key: 'ae5ee8d5a5a7d1b798f4111b33120d301b86a16b', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: 'cb1057d2b6cb467a25da1577610bfcc5b6300047' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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: '2a10f13b2ca606dab3563d026910d909e37ddcb0', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: 'e5deb3da74508a5731238724895ca9f1ab8b7a50', class: "decorator" }, h("slot", { key: '3cc01e88891a09f7917416a0acd0940e79decf26', name: "decorator" }))), showImg && (h("img", { key: 'cbed4e936072bca7bd23bd18b8679d0539c3fbd2', 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: 'f1876a7748d3806e21e48f3de7b70c6faea499ca', 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: 'a120d991968334f383efcb9d5ef920c7ee542880', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '598457dc937327172221fab317246d1085a57b02', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '578836c985252ea19c06d5499e6ad8f9c311e09f', 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);
+});

package/dist/collection/components/q2-input/formatting/phone-number-formats.js

@@ -412,7 +412,7 @@ export const phoneNumberFormats = {
         prefix: '+44 ',
     },
     IN: {
-        mask: '###### #####',
+        mask: '##### #####?',
         prefix: '+91 ',
     },
     IO: {

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

@@ -161,8 +161,8 @@ button {
 
 .message-content {
   flex: 1;
-  line-height: var(--comp-line-height);
   font-size: var(--tct-message-font-size, inherit);
+  line-height: max(1.2em, var(--comp-line-height));
 }
 
 ::slotted(ul) {

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

@@ -40,11 +40,20 @@ const VARIANTS = [
         name: 'long-content',
         html: `<q2-message type="info">${LONG_BODY}</q2-message>`,
     },
+    ...[200, 400].map(scale => ({
+        name: `font-scale-${scale}-percent`,
+        fontSizePx: (16 * scale) / 100,
+        html: '<q2-message type="error" style="--tct-message-font-size: 1rem; --tct-message-line-height: 20px">Please fill out all required fields. Read More</q2-message>',
+    })),
 ];
 const restingCase = (variant, theme) => {
     test(`q2-message--${variant.name}--resting — ${theme}`, async ({ page }) => {
-        await setupPage(page, variant.html, { theme, setupLoc: true });
-        await expect(page).toHaveScreenshot(`q2-message--${variant.name}--resting--${theme}.png`);
+        if (variant.fontSizePx)
+            await page.setViewportSize({ width: 375, height: 812 });
+        await setupPage(page, variant.html, { theme, setupLoc: true, fontSizePx: variant.fontSizePx });
+        await expect(page).toHaveScreenshot(`q2-message--${variant.name}--resting--${theme}.png`, {
+            fullPage: !!variant.fontSizePx,
+        });
     });
 };
 test.describe('q2-message — variants × themes', () => {

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

@@ -163,6 +163,23 @@ button {
   --tct-select-margin: 0;
   width: var(--tct-pagination-perpage-width, 60%);
 }
+.container.small {
+  flex-wrap: wrap;
+  row-gap: var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));
+  height: auto;
+  max-width: 100%;
+}
+.container.small .description {
+  flex-basis: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: center;
+  white-space: normal;
+  line-height: max(1.2em, var(--app-line-height, 1.428571429em));
+}
+.container.small .controls {
+  margin-inline: auto;
+}
 
 .controls {
   display: flex;

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

@@ -14,7 +14,9 @@ export class Q2Pagination {
         this.disabled = false;
         this.checkSize = () => {
             const { hostElement, containerElement } = this;
-            const isOverflowing = this.containerWidth > hostElement.clientWidth;
+            const fontSize = parseFloat(getComputedStyle(containerElement).fontSize);
+            // Reserve enough space for the full controls as the text grows.
+            const isOverflowing = this.containerWidth > hostElement.clientWidth || hostElement.clientWidth < fontSize * 42;
             this.isSmall = isOverflowing;
             nextPaint(() => {
                 const currentContainerWidth = containerElement.clientWidth;
@@ -69,7 +71,9 @@ export class Q2Pagination {
         }
     }
     componentDidLoad() {
+        var _a;
         this.containerWidth = this.containerElement.clientWidth;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.containerElement);
         overrideFocus(this.hostElement);
     }
     // #endregion
@@ -209,6 +213,8 @@ export class Q2Pagination {
         const classes = ['container'];
         if (this.stacked)
             classes.push('stacked');
+        if (this.isSmall)
+            classes.push('small');
         return classes;
     }
     get currentRange() {
@@ -312,7 +318,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: '647c141a9df399b3764fdc90c5ae05f113e0019d', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'fd595002af27dd639391665573433783342d2aee', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: 'a427944d7134621fe5c1cc469d554cf60ea69271', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'ab5e3a0dc0a8c3ab99c8d6754097c37ae1c10193', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -321,10 +327,10 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'da4c7137ed566532a9471a7b83a63c49c51c8e82', class: "controls" }, h("div", { key: 'ef59aadb7b6cfb82707ffb1ee9e1626428a84801', class: "btn-group" }, h("q2-btn", { key: 'e5d551764bec56fed3dc34684c4ff2cdfadd95ea', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '7423721c4c3082b8f0fdea5d6bde9fc62640fa24', type: "chevron-double-left" })), h("q2-btn", { key: '90b3544e9983fa652f225eda9d18d08883b31c39', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '6535f2c3745421cbf1dd5750e3ab8d08288bc148', type: "chevron-left" }))), h("div", { key: 'd4a581982a62f360e5b693a110a7d75eaf0ba24c', class: "input-display", hidden: isFullViewHidden }, h("span", { key: '45a28afc71ee038d829cbe64550bf929210002a9', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'ba5df7f89aed5be2f882057d8cf344981e3f1127', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '686c5c8891bd64a40ba9abe8436475bf3ef8fd38', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
+            })), h("div", { key: 'e84213e3dbeac1bb54fcd8244e486274869c5fa5', class: "controls" }, h("div", { key: 'f5a4cb3a4d467b2ce412afa2bb016e1843ccb364', class: "btn-group" }, h("q2-btn", { key: 'b4d315503de340e482ffb042d3cd4dbaff1aa3eb', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '8d437e9a6b00999eee091accd8581b84a2dbe4fe', type: "chevron-double-left" })), h("q2-btn", { key: 'bd91788b84cbe8a55fb7e7b53342a6c9a75e3694', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'bf9285d825da06e43e330b565ecf46f72a9ad930', type: "chevron-left" }))), h("div", { key: '76ce1e31814ec56e7d060200ee8a87c720c5fc1e', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'b1768b78ca08e2f76892823a165448c298d2a5b4', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '8909fdeaf8832ec6a104ffad86258d0d3034fbb3', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '96e0ce1764dc542fcac5a516b608b379bd1453a9', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '59853a0308d1f97b6722f40c29219d887842c54c', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '17fa28deff49d5a3a28b6d66b5639428a309057a', class: "btn-group" }, h("q2-btn", { key: '0e5eca8dc228a8285015d5941d9c4e44af5e5353', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '9a42a4961ac7efd40c176145a39f0c63540daf14', type: "chevron-right" })), h("q2-btn", { key: 'fe0c41536c25d7deffa26fdab4f91405e5b197d6', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '5beccc87ad5ef95350cb21d969b15c0996911126', type: "chevron-double-right" })))), h("div", { key: 'd60b56b2f8173ea2a6fcf3cf4fd1b5f2807fbc5c', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '3914f78404deab10b4173df5b16c205067c7e15e', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'b5b441d213d99d04b18c976628ba07142e00856f', class: "btn-group" }, h("q2-btn", { key: '3299b27a7d24045f2258288e86702a4b7e6d1e37', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'd63e7679e5087a1a03bb17fd0a7c24c0d07bdf87', type: "chevron-right" })), h("q2-btn", { key: 'f575528380b7d239db48f49353d71b88ba0e2d9e', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'c76d0fe0dff9095f893604fc41cd4d615075045e', type: "chevron-double-right" })))), h("div", { key: '71ad1c246e16a1c84318d7ccf75d50a37246af12', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     static get is() { return "q2-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -142,3 +142,42 @@ test.describe('q2-pagination — variants × themes', () => {
         }
     }
 });
+test.describe('q2-pagination — mobile large font scale', () => {
+    for (const theme of ['standard', 'default-2026']) {
+        for (const scale of [200, 400]) {
+            test(`q2-pagination--mobile-font-scale-${scale}--${theme}`, async ({ page }) => {
+                await page.setViewportSize({ width: 375, height: 812 });
+                await setupPage(page, `<q2-pagination record-type="International account transactions" total="123456789" page="5000000" per-page="10"></q2-pagination>`, { theme, fontSizePx: (16 * scale) / 100, setupLoc: true });
+                await expect(page.locator('q2-pagination nav.container')).toHaveClass(/small/);
+                await page.locator('q2-pagination').evaluate(host => {
+                    host.style.lineHeight = '20px';
+                });
+                const layout = await page.locator('q2-pagination').evaluate(host => {
+                    const description = host.shadowRoot.querySelector('.description');
+                    const controls = host.shadowRoot.querySelector('.controls');
+                    const descriptionRect = description.getBoundingClientRect();
+                    const controlsRect = controls.getBoundingClientRect();
+                    const hostRect = host.getBoundingClientRect();
+                    const descriptionStyle = getComputedStyle(description);
+                    return {
+                        controlsBelowDescription: controlsRect.top >= descriptionRect.bottom,
+                        descriptionFits: description.scrollWidth <= description.clientWidth,
+                        controlsFit: controlsRect.right <= hostRect.right,
+                        descriptionWrapped: descriptionRect.height > parseFloat(descriptionStyle.lineHeight) * 1.5,
+                        lineHeightFitsFont: parseFloat(descriptionStyle.lineHeight) >= parseFloat(descriptionStyle.fontSize) * 1.2 - 1,
+                    };
+                });
+                await expect(page).toHaveScreenshot(`q2-pagination--mobile-font-scale-${scale}--${theme}.png`, {
+                    fullPage: true,
+                });
+                expect(layout).toEqual({
+                    controlsBelowDescription: true,
+                    descriptionFits: true,
+                    controlsFit: true,
+                    descriptionWrapped: true,
+                    lineHeightFitsFont: true,
+                });
+            });
+        }
+    }
+});

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

@@ -90,9 +90,8 @@ button {
 /**
  * @prop --tct-pill-margin: (<length-percentage>) Controls the trailing inline margin between sibling pills.
  * @prop --tct-pill-min-height: (<length>) Controls the minimum height of the pill (and its popover container).
- * @prop --tct-pill-max-width: (<length-percentage>) Controls the maximum width of the pill label when options are present.
+ * @prop --tct-pill-max-width: (<length-percentage>) Controls the maximum width of the pill button. Use font-scaling units to scale with text.
  * @prop --tct-pill-disabled-opacity: (<number>) Controls the opacity of the pill when disabled.
- * @prop --tct-pill-btn-height: (<length>) Controls the height of the pill button.
  * @prop --tct-pill-btn-padding-inline: (<length-percentage>+) Controls the inline padding of the pill button.
  * @prop --tct-pill-btn-border-radius: (<length-percentage>) Controls the corner radius of the pill button.
  * @prop --tct-pill-btn-border-width: (<length>+) Controls the border width of the pill button.
@@ -147,6 +146,7 @@ button {
  */
 :host {
   display: inline-block;
+  max-width: 100%;
   position: relative;
   line-height: 0;
 }
@@ -227,7 +227,7 @@ q2-popover,
 }
 
 .btn-height-wrapper {
-  height: var(--comp-pill-min-height);
+  min-height: var(--comp-pill-min-height);
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -242,7 +242,7 @@ q2-popover,
 .btn-close,
 .btn-primary {
   cursor: pointer;
-  height: var(--comp-pill-btn-height);
+  min-height: var(--comp-pill-btn-height);
   border-style: solid;
   border-radius: var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));
   transition-property: background, color, padding, width, opacity;
@@ -272,9 +272,12 @@ q2-popover,
   align-items: center;
   gap: var(--app-scale-1x, 5px);
   width: 100%;
+  max-width: var(--tct-pill-max-width, var(--t-pill-max-width, calc(200 * var(--t-px-1, 1px))));
+  min-width: 0;
   text-align: start;
 }
 .btn-primary ::slotted(q2-icon[slot=decorator]) {
+  flex-shrink: 0;
   --tct-icon-size: 1em;
   --tct-icon-stroke-primary: var(--tct-pill-decorator-icon-primary-stroke, var(--comp-btn-color));
   --tct-icon-stroke-secondary: var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-btn-color));
@@ -291,12 +294,6 @@ q2-popover,
 .has-options .btn-primary, .has-icon .btn-primary {
   padding-right: calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size));
 }
-.has-options .btn-primary {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: var(--tct-pill-max-width, var(--t-pill-max-width, 200px));
-}
 :host([active]:not([active=false])) .btn-primary {
   background: var(--comp-active-btn-background);
   box-shadow: var(--comp-active-btn-box-shadow);
@@ -319,6 +316,13 @@ q2-popover,
   --tct-icon-stroke-secondary: var(--tct-pill-active-decorator-icon-secondary-stroke, var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-active-btn-color)));
 }
 
+.pill-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  min-width: 0;
+}
+
 .btn-close {
   background: transparent;
   border-color: transparent;

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

@@ -413,7 +413,7 @@ export class Q2Pill {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '8cba59cde3746d0397305512334eb56357e9e5d4', onChange: this.onClickElsewhere }, h("div", { key: '391da54f9fd870e223765e6266291dff9775abe6', class: wrapperClassNames.join(' ') }, h("div", { key: '06431fd76c0a9d30833756407c89ff59609bc3a3', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '609557b9206c91511e78e26c990230e61f7e5c19', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, h("slot", { key: 'e1f4c57b7526f714cf0242e101ec0f5c39ebafa5', name: "decorator" }), truncatedText)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '2777b45efbd94516a633ca4ff1e2d6a452ecbd81', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '54d2c1c8814be9265b4ed8092bd3360da76cc2b0', class: "popover-content" }, h("div", { key: 'fb95b6f0ab78119f0bf944fa67ec0bcf391088dc', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '8e522c96fa1241e7c05fbc989d59f71ec2bc1d98', name: "popover-top" })), h("q2-option-list", { key: '5e7a827ac08395399e0b04fa9074f5b6a3fa1c48', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '4197780a058b3937ac748b53aef6afc5eabd8c7a' })), h("div", { key: '78992c83515dcfe6acbf7e09a5efced2d65c1903', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '553f959ec8b866111b2e5c5f9090d8ddee5fd208', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '8cba59cde3746d0397305512334eb56357e9e5d4', onChange: this.onClickElsewhere }, h("div", { key: '391da54f9fd870e223765e6266291dff9775abe6', class: wrapperClassNames.join(' ') }, h("div", { key: '06431fd76c0a9d30833756407c89ff59609bc3a3', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '609557b9206c91511e78e26c990230e61f7e5c19', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, h("slot", { key: 'e1f4c57b7526f714cf0242e101ec0f5c39ebafa5', name: "decorator" }), h("span", { key: '98a770f6f4fabe04d886f66d57e76a4febb31353', class: "pill-label" }, truncatedText))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '30fb581a9eeb008262bbb3fc4a82537f1b78af28', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '6fc858b2064b78b2ccaafd35aefaa2e4c9e1ea07', class: "popover-content" }, h("div", { key: '75134f4a5d4296f6f69a70197bf1bd450c05a8e0', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, h("slot", { key: 'f570a1a19b97bd7eb4b2ae38975db95ff1153b00', name: "popover-top" })), h("q2-option-list", { key: 'aca9ff86903dcf5b4e5138541ac20dac68955fb7', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '89c5f3739c36206ceecb06245ba3052491b89898' })), h("div", { key: '8f98c6b4a59c2c0675b5648aed4a1110f0136d87', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '75ef6c235c31755e0a5b9905db16e02ff8c4eea3', name: "popover-bottom" })))))));
     }
     static get is() { return "q2-pill"; }
     static get encapsulation() { return "shadow"; }

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

@@ -125,6 +125,16 @@ test.describe('q2-pill — variants × themes', () => {
 });
 // 'default' (inactive, no value) exercises --tct-pill-btn-font-size (button label text).
 const PILL_DEFAULT_VARIANT = VARIANTS.find(v => v.name === 'default');
+const LONG_LABEL = 'ExtraordinarilyLongAccountDescription WithoutAnyAvailableSpace';
+const LONG_LABEL_VARIANTS = [
+    { name: 'long-label', html: `<q2-pill label="${LONG_LABEL}"></q2-pill>` },
+    { name: 'long-label-active', html: `<q2-pill label="${LONG_LABEL}" active></q2-pill>` },
+    {
+        name: 'long-label-decorator',
+        html: `<q2-pill label="${LONG_LABEL}"><q2-icon slot="decorator" type="star"></q2-icon></q2-pill>`,
+    },
+    { name: 'long-label-options', html: `<q2-pill label="${LONG_LABEL}">${OPTIONS}</q2-pill>` },
+];
 test.describe(`q2-pill — scaled font size × themes`, () => {
     for (const theme of THEMES) {
         test(`q2-pill--default--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
@@ -132,4 +142,19 @@ test.describe(`q2-pill — scaled font size × themes`, () => {
             await expect(page).toHaveScreenshot(`q2-pill--default--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
         });
     }
+    for (const variant of LONG_LABEL_VARIANTS) {
+        for (const theme of THEMES) {
+            test(`q2-pill--${variant.name}--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, `<div style="width: 180px">${variant.html}</div>`, {
+                    theme,
+                    fontSizePx: FONT_SCALE_PX,
+                });
+                const maxWidth = await page
+                    .locator('q2-pill .btn-primary')
+                    .evaluate(el => parseFloat(getComputedStyle(el).maxWidth));
+                expect(maxWidth).toBeCloseTo((200 * FONT_SCALE_PX) / 16, 0);
+                await expect(page).toHaveScreenshot(`q2-pill--${variant.name}--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
 });

package/dist/collection/components/q2-relative-time/q2-relative-time.js

@@ -153,7 +153,7 @@ export class Q2RelativeTime {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: 'c6d24ac6d794284c3f0ea654f1999ff6e201f8b1' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: 'e32fc9201354f10456368f47c0a7b6e50fd3eeb2' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     static get is() { return "q2-relative-time"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-resize-observer/q2-resize-observer.js

@@ -76,7 +76,7 @@ export class Q2ResizeObserver {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: 'cd3c22934ee46501f6ab1dc317ab702ba97150f3', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: '78ea06c9c3963fe4fe145d66c42b546432d10e95', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-resize-observer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -771,7 +771,7 @@ export class Q2Search {
         return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: (_a = this.innerInputContainer) !== null && _a !== void 0 ? _a : undefined, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, align: useBlock ? undefined : this.popoverAlignment, block: useBlock }, h("div", { class: "popover-content", "data-loading": this.loading ? 'true' : 'false', "aria-busy": this.loading ? 'true' : null }, h("div", { class: "popover-top-container", hidden: !this.hasPopoverTop && !(this.multiple && this.showSelectedToggle), tabindex: "-1" }, h("slot", { name: "popover-top" }), !this.loading && this.renderMultiSelectHeader()), h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: this.optionListId, label: loc(this.listLabel), multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, showSelected: this.showSelected, customSearch: true, hidden: this.loading, onChange: (e) => e.stopPropagation(), onTctChange: this.onOptionListChange }, h("slot", null)), showEmpty && this.renderEmpty(), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" })), this.loading && (h("div", { class: "loading-overlay", "aria-hidden": "true" }, h("q2-loading", { type: "spinner" }))))));
     }
     render() {
-        return (h(Fragment, { key: '282a0d7a6fc3199a2ae52a9a6f1c3ace8b58c00d' }, h("div", { key: 'b45c3a05cfb004bf7dfbf266af0e983c9740f7e6', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: '603d6b423bd6e2a6f3b90b85f13e744d157c7c61', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '267c12c340e038bb5d10133d59955b4067699fbf', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
+        return (h(Fragment, { key: '4b3787554c37521bc3467345cdd1d733cffba3a5' }, h("div", { key: '696caa142cffecf1e0d62afafd826dce37f75512', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: 'f8b493ec8f7da09fad48f9fa30f0e9be7fbaedf4', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '44e0ad4b7825ac319dd4277ccb93d4dd66acef12', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
                 (this.invalid && ['tecton.element.search.invalid']) ||
                 [], ariaExpanded: this.isInputOnlyMode ? undefined : `${this.open}`, ariaControls: this.isInputOnlyMode ? undefined : this.optionListId, ariaHaspopup: this.isInputOnlyMode ? undefined : 'listbox', hideMessages: true, _role: this.isInputOnlyMode ? undefined : 'combobox', onTctInput: this.inputInputHandler, onInput: (e) => e.stopImmediatePropagation(), onChange: (e) => e.stopPropagation(), onTctChange: (e) => e.stopPropagation(), badgeValue: this.badgeValue }, this.renderCustomDisplay()), this.renderOptionsDropdown())));
     }

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

@@ -186,9 +186,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '671c4611adeaff5c3e53d05a43955851d682c792', class: "wrapper" }, h("header", { key: 'fb724579804c9c3dd4da39bbc45d6df5cfad3815', class: hasHeader ? 'has-header' : '' }, h("div", { key: '76ad513b058264c1dbbeac7732120fea97586e1f', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '6717219e621e8b605e4cbc7fa4f1f84bd4b1f20a', class: "title" }, loc(this.label)), h("div", { key: '61acf1ce4b3281aed6f35571a62f4da58d692d10', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'acd5b6f6337700edf60fd03ce3d35a634eb2f97c', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '02543820b86cf3d8fd103e0384d283e130fc2212', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: 'fc7484a585f815948d1bed037948f21e777336f5', type: "chevron-up" })))), h("div", { key: 'f57ce6b9a2e8f8ca589274d496362f106148b499', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '5adb22a7e6cf098fa3cf2325c945c6aa1c20b2d5', class: "wrapper" }, h("header", { key: 'c04df6d07756c27374e4be85ad88848a0c1ac897', class: hasHeader ? 'has-header' : '' }, h("div", { key: '8cd09e8bf367a7510b91106b8ebd4f419faff861', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '195e1523e68c83e294bd92d617b8c4d44e679494', class: "title" }, loc(this.label)), h("div", { key: 'e493986ee113d44bf74b11116003939f3db24bd7', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '44f2dc2ca76acfd800a1435608a75bf6e3258d37', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'b2602555b9282c8149780f65d2fbaa65febc1f50', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '62728524b58cf5cf7aa2531df1218d3bf0b40b0a', type: "chevron-up" })))), h("div", { key: '13ef854a01937880007fb4021b1528c1b83fe937', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: 'e1473a0a5f86918df19119a62f99918e8f2203f2', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'f4f92ebdb06b45be6d70759b6b59caf31f816b04', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '866d8b0301a9c5979f5b3bd31086d25f73373709', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '36c97155aa106dc1587537066e031c7d6c032295', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -295,7 +295,7 @@ export class Q2Stepper {
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (h(Fragment, { key: 'c9839ff458e2d71fb66c42cb5b4ae394c7ffb9ff' }, h("div", { key: '51d8a914662c2794e16928c971ef995bca933776', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '0b1d1dd0c973d2266a468a8f81d0c9bdd2a430cc' }, h("div", { key: '87b9ae7e5ab260ee8743e78302017389941c3ead', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'a5d487517c497ae927a1fd05d7c4631aa00d76bf', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: 'fe008283e673c2b51acf1cc654ed1c844a6d33bf', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '7d83dfafb861da55085fa33a4aca620416849e27', type: "chevron-left" })), h("q2-btn", { key: 'c81adb720c387ddabb7eead010db863b0e295208', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'c0d5939662d35c18ea9c486a1dc8da243b779ea2', type: "chevron-right" })))), h("ul", { key: '07501b7abbe4e828686b87c057b79bae4059e826', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: 'df8d51e7b40ee1999b0a280fa8524559accfec9a', role: "list" }, h("slot", { key: 'a8ce54b65b8c7d8542e60811a7215fed12400e38', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '423f7d50f787abf21c14730ae9cd50cd3638b17b' }, h("div", { key: '2ffacd2f9792075956748eb6960975d9aeda28ad', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'da90a671295ce6702c3bc6f1ab71f671cda2c9c8' }, h("div", { key: '319c4a75dfafd7b03d3f7f13156f24bd1ca7b0c3', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '80a08dc979685d94f6cfe20d66787d06e7d46014', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '43a71cb3212ddbe37c6e7d7051850efd49ced456', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '19ee5abc690bba84016fb8c692a74b5c233aa426', type: "chevron-left" })), h("q2-btn", { key: 'f26bc502269a5d60308aba041a6d9a75efcf2573', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '7f35a54468433010427213e18d213b1c227413a6', type: "chevron-right" })))), h("ul", { key: '0bc4eed617263c7e4a6138c3a884f6a1b8bc2ca6', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '87945c612fcaa70164faa50d78bb63c9b290e3f2', role: "list" }, h("slot", { key: '4b55529f41b4731dc1424c8be4fcd941ff2c2f33', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,7 +73,7 @@ export class Q2StepperPane {
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (h(Host, { key: '6cbcc9f6363bf6f60ff2d999b9317e32691168da', role: "listitem" }, h(Fragment, { key: 'f9b8d56b05e6d26978feab6386849498f797cca6' }, h("div", { key: '383a77ce1848255574680375e7df122bf4468f95', role: "group", "aria-labelledby": "pane-label", tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '9b9cf0bd60e23d9860174c5525c3f688c70411f4' })), h("div", { key: '8f628fe11acfc7a8df7c84013a7eaca9d5a1327a', hidden: true }, h("span", { key: '6c03721fb71d8e3c5c48a6af80ae8723575e0205', id: "pane-label" }, h("slot", { key: 'da9a253e3399d0552478a29c743fc4a73f432ddf', name: "label", onSlotchange: () => this.contentChange.emit() }, label && loc(label))), h("slot", { key: 'd7229f76aedb1c96623fac655982b88d2769b9ae', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '7670d7b17b74732d0dd14198dd50560d005700d1', name: "children" }))));
+        return (h(Host, { key: '3929b6bdb716394892be2bcdd933864e43f0204e', role: "listitem" }, h(Fragment, { key: 'd913741a6b71aebef92be14fd7ee541a3d5568da' }, h("div", { key: '038d29ac861f70ad15350da7733b39eece30e538', role: "group", "aria-labelledby": "pane-label", tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '56f4c0d9edfe134886d46367f2c801348267b53d' })), h("div", { key: '88bf8a9e1a6124c39d9ac4ee8906f61ac026966a', hidden: true }, h("span", { key: 'db485a5e84ab67fe714f0861fcd05c4b0bd7722f', id: "pane-label" }, h("slot", { key: '940a9a3a8543fd4c64425db2b7ea7b9cf079c947', name: "label", onSlotchange: () => this.contentChange.emit() }, label && loc(label))), h("slot", { key: '74a78697ed1aa85fca66743023d303c7abea0116', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '4fb660b547a2da7dca37de9106b20b93b72aaf83', name: "children" }))));
     }
     static get is() { return "q2-stepper-pane"; }
     static get encapsulation() { return "shadow"; }