q2-tecton-elements 1.72.0 → 1.73.1

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

@@ -92,7 +92,7 @@ export class Q2MutationObserver {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: 'e60ef36a762c6af123a91fe6c4def64179663098', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: '8e33d51e7485e5477d3cf98cde060dd87effc2f7', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-mutation-observer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,7 +55,7 @@ export class Q2Optgroup {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '4271765f1422cd33d73e1ed66b967994395bb4e1', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'f5efb564a7049f7e8d78c0b6fa5749e239ea5133', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '9f932967082554e86e8048bba66a1493258f6d06', class: "q2-optgroup-options" }, h("slot", { key: 'd58e647529d66c50b6e0c9a79705128f0ffdf806' }))));
+        return (h("div", { key: '829ae5ebec150734128c98343ddb8112de0ee21e', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '6683155f922a2d15349f885aabac0bf9ee6a4575', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'b974da306256b13283183fa03e4dc8bcc8be3f44', class: "q2-optgroup-options" }, h("slot", { key: '2f0035aad12309be2c5c4ea3125077cc704e65e4' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-option-list/q2-option-list.js

@@ -413,9 +413,32 @@ export class Q2OptionList {
             return;
         const optionRole = type === 'menu' ? 'menuitem' : 'option';
         this.allOptions.forEach(option => {
+            // iOS 26 bug: setting role="menuitem" on the q2-dropdown-item host prevents VoiceOver from announcing the option name.
+            if (type === 'menu' && option.tagName.toLowerCase() === 'q2-dropdown-item')
+                return;
             option.role = optionRole;
         });
     }
+    findScrollableAncestor(node) {
+        var _a, _b;
+        let current = node;
+        while (current) {
+            if (current instanceof HTMLElement && current !== node) {
+                const overflowY = getComputedStyle(current).overflowY;
+                // Skip html/body so page-level scroll isn't treated as our container.
+                if ((overflowY === 'auto' || overflowY === 'scroll') &&
+                    current !== document.documentElement &&
+                    current !== document.body) {
+                    return current;
+                }
+            }
+            const slot = current.assignedSlot;
+            const parent = current.parentNode;
+            const shadowHost = current.host;
+            current = (_b = (_a = slot !== null && slot !== void 0 ? slot : parent) !== null && _a !== void 0 ? _a : shadowHost) !== null && _b !== void 0 ? _b : null;
+        }
+        return null;
+    }
     focusSelectedSibling(option) {
         const { allVisibleOptions, allOptions } = this;
         const hasNoSiblings = allVisibleOptions.length < 2;
@@ -497,9 +520,18 @@ export class Q2OptionList {
         const activeOption = this.allOptions[this.activeIndex];
         if (!activeOption)
             return;
-        const { scrollX, scrollY } = window;
-        activeOption.scrollIntoView({ block: 'center' });
-        window.scrollTo(scrollX, scrollY);
+        // Do our own scroll math so `scrollIntoView` doesn't cascade to the parent window in an SDK iframe.
+        const container = this.findScrollableAncestor(activeOption);
+        if (container) {
+            if (container.scrollHeight > container.clientHeight) {
+                const optionRect = activeOption.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+                const optionCenter = optionRect.top - containerRect.top + optionRect.height / 2;
+                container.scrollTop += optionCenter - containerRect.height / 2;
+            }
+            return;
+        }
+        activeOption.scrollIntoView({ block: 'nearest' });
     }
     searchOptions(key, shouldSelect) {
         this.searchString = key;
@@ -583,7 +615,7 @@ export class Q2OptionList {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: 'ea6ef8ea9e667c6d1485212ea636b23725ce9043' }, h("div", { key: '6bc6ffec50a40b8b8ee4cf2b66388200eb3f0d32', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '28b5d0460ceca2f0b9a8fd4fa018f949d04154df', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '666147b2cd06490c883c8a01b11e9cfa209a19dd' })))));
+        return (h(Host, { key: '19cadb5668db33a912951df4ec0e81a74b2b78ce' }, h("div", { key: '1d5a8f310ee97bc2189b839ee3d87e08bf0fa269', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '24b1616962a9b544fb6215acc1e6edb4f12a5a03', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'eeb0342b7c319f5f5af95daa54dcaa732c3159d9' })))));
     }
     static get is() { return "q2-option-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -358,16 +358,16 @@ export class Q2Otp {
     renderSendCodeButton() {
         if (!this.isAwaitingSendCode)
             return;
-        return (h("q2-btn", { block: true, class: "send-code-button", disabled: this.disabled, intent: "workflow-primary", label: this.localizedSendCodeLabel, onClick: this.handleSendCodeClick, ref: el => (this.sendCodeRef = el) }));
+        return (h("q2-btn", { block: true, class: "send-code-button", disabled: this.disabled, intent: "primary", label: this.localizedSendCodeLabel, onClick: this.handleSendCodeClick, ref: el => (this.sendCodeRef = el) }));
     }
     renderSubmitArea() {
         if (this.isSuccess) {
             return (h("q2-btn", { block: true, class: "submit-button", intent: "neutral", onClick: this.handleSubmitClick }, h("q2-icon", { type: "checkmark" }), loc('Success')));
         }
-        return (h("q2-btn", { block: true, class: "submit-button", disabled: this.disabled || !this.isComplete, intent: "workflow-primary", label: this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel, loading: this.isVerifying, onClick: this.handleSubmitClick }));
+        return (h("q2-btn", { block: true, class: "submit-button", disabled: this.disabled || !this.isComplete, intent: "primary", label: this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel, loading: this.isVerifying, onClick: this.handleSubmitClick }));
     }
     render() {
-        return (h("div", { key: '80f709fb9ccac37057bc3da569e4aefa6675d864', "aria-busy": this.isVerifying ? 'true' : undefined, "aria-labelledby": this.label ? this.labelId : undefined, class: {
+        return (h("div", { key: '8f4ada9f194f1b0995995e946097b3e24a11f605', "aria-busy": this.isVerifying ? 'true' : undefined, "aria-labelledby": this.label ? this.labelId : undefined, class: {
                 'otp-container': true,
                 'has-focus': this.hasFocus,
                 'is-masked': this.masked,
@@ -375,7 +375,7 @@ export class Q2Otp {
                 'state-success': this.state === 'success',
                 'state-verifying': this.isVerifying,
                 [`length-${this.normalizedLength}`]: true,
-            }, role: "group" }, this.renderSendCodeButton(), h("div", { key: '1192f341199e8fbbd2c04c3fe58d69129888410c', class: { 'otp-content': true, 'send-code-hidden': this.state === 'ready' } }, this.renderLabel(), h("div", { key: 'f84aa0d243808206cf31e2900e633f5c5199b197', class: "otp-control-group" }, h("div", { key: '8e01108ff520da247f80bb2204b2620a477a652f', class: "fields-shell" }, h("div", { key: '7f942c6fb6be407f4c43cb2349614cf33c0ec62b', class: "fields-container" }, h("input", { key: '5c1df9b3ff79098f47f40f2ad14165e25a59e5d8', "aria-describedby": this.describedBy, "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-label": this.inputAriaLabel, autocomplete: "one-time-code", autofocus: this.autoFocus, class: "otp-hidden-input", disabled: this.disabled || this.isVerifying || this.isSuccess, inputmode: "numeric", maxLength: this.normalizedLength, onBlur: this.handleFocusOut, onFocus: this.handleFocusIn, onInput: this.handleInputEvent, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, pattern: "[0-9]*", ref: el => (this.inputRef = el), "test-id": "q2OtpInput", type: "text", value: this.value }), this.renderFields()), this.renderProcessingOverlay()), this.renderSubmitArea(), this.renderMessage()), this.renderHelperText())));
+            }, role: "group" }, this.renderSendCodeButton(), h("div", { key: '099e1ef5ccc09846faf9952772e61ff7644e5085', class: { 'otp-content': true, 'send-code-hidden': this.state === 'ready' } }, this.renderLabel(), h("div", { key: '5ad6ff061779de6562f523148459729d73bbf53a', class: "otp-control-group" }, h("div", { key: 'd60e93f2d79d0f4b0348a5b581647ece89e9973c', class: "fields-shell" }, h("div", { key: '55b515c8a04e664024dcc66e4d894dcb0ddd4ca4', class: "fields-container" }, h("input", { key: 'b8319da6e91ea06ff5632c72326460c0e532393d', "aria-describedby": this.describedBy, "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-label": this.inputAriaLabel, autocomplete: "one-time-code", autofocus: this.autoFocus, class: "otp-hidden-input", disabled: this.disabled || this.isVerifying || this.isSuccess, inputmode: "numeric", maxLength: this.normalizedLength, onBlur: this.handleFocusOut, onFocus: this.handleFocusIn, onInput: this.handleInputEvent, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, pattern: "[0-9]*", ref: el => (this.inputRef = el), "test-id": "q2OtpInput", type: "text", value: this.value }), this.renderFields()), this.renderProcessingOverlay()), this.renderSubmitArea(), this.renderMessage()), this.renderHelperText())));
     }
     static get is() { return "q2-otp"; }
     static get encapsulation() { return "shadow"; }

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: 'c42b191eccb70b9e3c684843cebf9f6b06f3c3b3', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'eb03cdc19938adac4a5c44887fa7d9853c9b89ab', 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: '0e9a0bcfa6545b08843423378066989cf96ad18e', class: "controls" }, h("div", { key: '4ea3b0a64165885dfd1bd525527e2617e4f4d748', class: "btn-group" }, h("q2-btn", { key: '72d72c7b974ecbca50c4259cca5028515786af5b', 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: '26f5f8e8cf23a6d924b4a01796827fb62017809d', type: "chevron-double-left" })), h("q2-btn", { key: '5f7845c5917137131cc6703bb59d90c842e32a7e', 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: 'e02ccf51de21789099e2b254019f962dbb5011dc', type: "chevron-left" }))), h("div", { key: 'ca201f7a4382e7f3835093c4c3877f7e2a0b5150', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'c690830341a15c25e4ad5a2d2a524d876c9f7cdb', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '7d08062d6cd495d4025a82413b347ed87915cbce', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'e30795721d66d75dd5f349ad4d6d3ffda6023820', 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: 'e2f1e51306298ddf428fd4e9fa665b58b2535fc8', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'c7a095aaa30743441c0c4d22f55e94801b3a823f', class: "btn-group" }, h("q2-btn", { key: 'c52d8837ec35b128a9d3f9c87766ed770edc9600', 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: 'd1d802bddb426070fa1ca92a7937b8405949f01c', type: "chevron-right" })), h("q2-btn", { key: '357f5bf5426e6c0004b737238a3c66697fc6a672', 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: '1be92d6fa9252168baf63420271c8b8a77f41d92', type: "chevron-double-right" })))), h("div", { key: '96ca4bc582b1dcb830bad146fbf1233f2549f256', 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

@@ -273,11 +273,14 @@ export class Q2Pill {
         this.primaryBtn.focus();
     }
     async popoverStateHandler({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        var _a;
+        if (this.open === open)
+            return;
+        this.open = open;
         if (open)
             return;
         this.setOptionListActiveElement(null);
+        (_a = this.primaryBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     // #endregion
     // #region Public Methods API
@@ -410,7 +413,7 @@ export class Q2Pill {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '5bbfce776dcd2ef3ac7097b37fd2df039d47c21f', onChange: this.onClickElsewhere }, h("div", { key: '9d8d7a4b6afb1d931d762a0e656509a2036180ba', class: wrapperClassNames.join(' ') }, h("div", { key: '5bbf245bd78d2ed075b9a16cc46396528f20b823', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '494b1555d332a62c8a2946da260a9bb5f26849d5', 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: 'd26426863ec1dadfbf2049ca6b85dcdb28875858', name: "decorator" }), truncatedText)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '1b06b432ce4ab98a1d1d0b70acb7074849e94999', 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: 'ea87e923fe84d94fc1f9a1b72b9fd1deef5cb5ad', class: "popover-content" }, h("div", { key: '53b50f438af20d4474b42511ee334391ff429fa0', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '0996ca12d288c696601919df48ef6c8784bbf8d4', name: "popover-top" })), h("q2-option-list", { key: '9faef4049f040e8c22b46107a7a618224cd0e82c', 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: '8f54a5eb6670b9bffb2062eeb9815834b2aa8de7' })), h("div", { key: '1e61e07bb5c6bdcdfd68080cc606bb1a42f48d79', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '48a8d60e3eae7de823d1e55ab9153dedda9a739d', 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-popover/q2-popover.css

@@ -142,6 +142,7 @@ button {
   margin: 0;
   padding: var(--tct-popover-padding, 0);
   overflow: auto;
+  overscroll-behavior: contain;
   background: var(--tct-popover-background, var(--app-white, #ffffff));
   backdrop-filter: var(--tct-popover-backdrop-filter, none);
   color: var(--tct-popover-font-color, inherit);

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

@@ -41,6 +41,7 @@ export class Q2Popover {
         this.displayBuffer = 10;
         this.orientationChanged = false;
         this.pendingAnimationResolve = null;
+        this.platformScrollUnsubscribe = null;
         // #endregion
         // #region State Properties
         this.animationState = 'idle';
@@ -52,11 +53,30 @@ export class Q2Popover {
         /** Aligns the popover to the left or right side of the control element. */
         this.align = 'left';
         this.mode = null;
+        this.handleInsideScroll = (event) => {
+            const { containerElement } = this;
+            if (!containerElement)
+                return;
+            if (containerElement.scrollHeight > containerElement.clientHeight)
+                return;
+            event.preventDefault();
+        };
         this.handleMinHeight = () => {
             if (this.minHeight) {
                 handleDeprecationWarning(this, 'minHeight', 'prop');
             }
         };
+        this.handleOutsideScroll = (event) => {
+            if (!this.open)
+                return;
+            if (event.composedPath().includes(this.hostElement))
+                return;
+            this.open = false;
+        };
+        this.handlePlatformScroll = () => {
+            if (this.open)
+                this.open = false;
+        };
         this.handlePopoverToggleEvent = (event) => {
             mirrorEmit(this, ['popoverStateChanged', 'tctPopoverStateChanged'], { open: event.newState === 'open' });
         };
@@ -171,8 +191,10 @@ export class Q2Popover {
         this.handleMinHeight();
         if (this.supportsPopoverAPI)
             (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.handlePopoverToggleEvent);
-        if (this.open)
+        if (this.open) {
+            this.addViewportListeners();
             this.determinePopDirection();
+        }
     }
     // #endregion
     // #region Listeners
@@ -265,14 +287,22 @@ export class Q2Popover {
         return isNaN(maxHeight) ? undefined : maxHeight;
     }
     addViewportListeners() {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         window.addEventListener('resize', this.viewPortOrientationChanged);
-        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.viewPortChanged);
+        (_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'resize', this.viewPortChanged);
         if (isInScrollableContainer(this.hostElement) && !isMobile()) {
             window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });
         }
-        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('orientationchange', this.viewPortOrientationChanged);
+        (_e = (_d = (_c = window.screen) === null || _c === void 0 ? void 0 : _c.orientation) === null || _d === void 0 ? void 0 : _d.addEventListener) === null || _e === void 0 ? void 0 : _e.call(_d, 'orientationchange', this.viewPortOrientationChanged);
         window.addEventListener('orientationchange', this.viewPortOrientationChanged);
+        if (!isMobile()) {
+            window.addEventListener('scroll', this.handleOutsideScroll, { passive: true, capture: true });
+        }
+        (_f = this.containerElement) === null || _f === void 0 ? void 0 : _f.addEventListener('wheel', this.handleInsideScroll, { passive: false });
+        (_g = this.containerElement) === null || _g === void 0 ? void 0 : _g.addEventListener('touchmove', this.handleInsideScroll, { passive: false });
+        (_h = this.platformScrollUnsubscribe) === null || _h === void 0 ? void 0 : _h.call(this);
+        this.platformScrollUnsubscribe =
+            (_l = (_k = (_j = window.TectonElements) === null || _j === void 0 ? void 0 : _j.platformScrollChanged) === null || _k === void 0 ? void 0 : _k.call(_j, this.handlePlatformScroll)) !== null && _l !== void 0 ? _l : null;
     }
     clearCSSProperties() {
         if (!this.containerElement)
@@ -353,12 +383,17 @@ export class Q2Popover {
         }
     }
     removeViewportListeners() {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         window.removeEventListener('resize', this.viewPortOrientationChanged);
-        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.viewPortChanged);
+        (_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'resize', this.viewPortChanged);
         window.removeEventListener('scroll', this.viewPortChanged, { capture: true });
-        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('orientationchange', this.viewPortOrientationChanged);
+        (_e = (_d = (_c = window.screen) === null || _c === void 0 ? void 0 : _c.orientation) === null || _d === void 0 ? void 0 : _d.removeEventListener) === null || _e === void 0 ? void 0 : _e.call(_d, 'orientationchange', this.viewPortOrientationChanged);
         window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
+        window.removeEventListener('scroll', this.handleOutsideScroll, { capture: true });
+        (_f = this.containerElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('wheel', this.handleInsideScroll);
+        (_g = this.containerElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('touchmove', this.handleInsideScroll);
+        (_h = this.platformScrollUnsubscribe) === null || _h === void 0 ? void 0 : _h.call(this);
+        this.platformScrollUnsubscribe = null;
     }
     setDirectionAndShow(direction) {
         var _a;
@@ -393,7 +428,7 @@ export class Q2Popover {
             containerClasses.push('animating-open');
         if (this.animationState === 'closing')
             containerClasses.push('animating-close');
-        return (h("div", { key: '680ad8a90ef98d3a8c2c1f5ba2284d7cdfc3d2a6', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: 'dfe4d6f72df0dfa029d9296e27ceb60a75131d83', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '22144006d226160fe790d156255d54e24bcad8ce' }))));
+        return (h("div", { key: 'f608766723c6ae6737181318b5baf8b52ed7fc0f', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: '477f1a209cf4abc984a82324d0c6fc07ede82160', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '5b48ff13907b952a2cdcffc1b6e271e4982c78ad' }))));
     }
     static get is() { return "q2-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -90,7 +90,7 @@ export class Q2Radio {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '8fbe0ad9c8b0712fd51dbac67baae6209ebf2532', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: 'a9322154f304963731fb3d6ee99632c06938f27f', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: '234f95d4c4656e4325a15853bacf888d7a4ae446', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("span", { key: 'ac98c34734a5e54b347cc2a48dc23d3ea2eb31ce', class: "radio-mark", "aria-hidden": "true" })), !this.hideLabel && (h("div", { key: '41dd2c195bc03dd8af8d5722e4aa2323cbeaab76', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '595014c6a32c2e98f7612dc51f0bd89579770988' }))))));
+        return (h("div", { key: '1aafcfbdb7d6e2863618d6741bc12491a109ec80', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '1989707753be2d6b8bc8c69098a5c9bf27af99b7', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: '93a6f7f8d718c8070c4d4d88c3b48905f518e166', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("span", { key: 'f351a1aef39845bbb1bbd360037d36486de27cd9', class: "radio-mark", "aria-hidden": "true" })), !this.hideLabel && (h("div", { key: 'c9cb25115cffc72dfbb52024b6343f16a0744fbc', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '8d63e148c83fb247b60b719d3de8627c327efaa4' }))))));
     }
     static get is() { return "q2-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -250,7 +250,7 @@ export class Q2Radio {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "Only use when a visible label is impractical."
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
                         }],
                     "text": "Hides the field's `<label>` element from view."
                 },
@@ -271,6 +271,9 @@ export class Q2Radio {
                 "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-radio-group/q2-radio-group.js

@@ -196,7 +196,7 @@ export class Q2RadioGroup {
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = (showLabel && !this.hideLabel) || hasError;
-        return (h(Fragment, { key: '25ec8b2089b54a5d968c3cfb99a1740c5dcbd0d0' }, showLabelRow && (h("div", { key: '1ff216a3e27dd4284dbb2f0300e25728f376df62', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '462c3833b83b524426ef2f937e0bf60c1cc841f7', class: "group-legend" }, renderLabel(this)), hasError && (h("q2-icon", { key: '249e09338abad9e55fa472bcc9807ce2297cd4c3', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '2085294bc3fc10c2f3cf20e6a1a0553cb0829e7d', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && h("legend", { key: 'ad2686c2e07d168a0cf1cbe0baf844121add6ecd', class: "sr-only" }, renderLabel(this)), h("q2-resize-observer", { key: 'e183977bae5484f38356b17b274d6e3125d4d603', onTctResize: this.handleResize, disabled: this.tileLayout || this.orientation !== 'horizontal' }, this.inputDom()))));
+        return (h(Fragment, { key: '0503a52d9cb4715cba418f445b708ad650aa5f1f' }, showLabelRow && (h("div", { key: '7236b03ea65a44bbfacf57944370236c9653d69c', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: 'fbede7f7cfbd2c0fe8364a77966009a2e14ede37', class: "group-legend" }, renderLabel(this)), hasError && (h("q2-icon", { key: 'b7d7456a6fd1e673d5799748a727db2babc3d2bf', type: "error", "test-id": "iconError" })))), h("fieldset", { key: 'cba87bdefb32eaa0cd6cc1760d874fd622146b5e', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && h("legend", { key: 'c4ff0e86435564ece7e468ecd7b0e373ae9fc078', class: "sr-only" }, renderLabel(this)), h("q2-resize-observer", { key: 'f3bfe6941b46da58433ed959017a4383c07ce16d', onTctResize: this.handleResize, disabled: this.tileLayout || this.orientation !== 'horizontal' }, this.inputDom()))));
     }
     static get is() { return "q2-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -265,9 +265,9 @@ export class Q2RadioGroup {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "Only use when a visible label is impractical."
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
                         }],
-                    "text": "Hide's the group's `<label>` element from view."
+                    "text": "Hides the group's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -286,6 +286,9 @@ export class Q2RadioGroup {
                 "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-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: '7bcf2e8d9cb391ea43664b9cf01ec6d474a1743e' }, 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: 'f5cc2cee6e979f047d3854d243ec3560ae5cb35d', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: '78ea06c9c3963fe4fe145d66c42b546432d10e95', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-resize-observer"; }
     static get encapsulation() { return "shadow"; }