q2-tecton-elements 1.72.0 → 1.73.0

package/dist/collection/components/q2-date-picker/test/q2-date-picker-test.vr.js

@@ -0,0 +1,179 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const MOBILE_VIEWPORT = { width: 360, height: 800 };
+// Fixed dates keep the variants deterministic.
+const SINGLE_VALUE = '2026-06-15';
+const RANGE_START = '2026-06-10';
+const RANGE_END = '2026-06-20';
+const INVALID_RANGE_DATE = '2026-06-15';
+const RESTING_VARIANTS = [
+    { name: 'default', html: `<q2-date-picker></q2-date-picker>` },
+    {
+        name: 'single-value',
+        html: `<q2-date-picker label="Date" placeholder="Select a date" value="${SINGLE_VALUE}"></q2-date-picker>`,
+    },
+    {
+        name: 'custom-display-format',
+        html: `<q2-date-picker label="Date" placeholder="Select a date" value="${SINGLE_VALUE}" display-format="dddd, MMMM D, YYYY"></q2-date-picker>`,
+    },
+    {
+        name: 'range-value',
+        html: `<q2-date-picker mode="range" label="Date Range" placeholder="Select date range" range-start="${RANGE_START}" range-end="${RANGE_END}"></q2-date-picker>`,
+    },
+    {
+        name: 'single-typeable',
+        html: `<q2-date-picker mode="single-typeable" label="Date" placeholder="MM/DD/YYYY"></q2-date-picker>`,
+    },
+    {
+        name: 'range-typeable',
+        html: `<q2-date-picker mode="range-typeable" label="Date Range" placeholder="MM/DD/YYYY - MM/DD/YYYY"></q2-date-picker>`,
+    },
+    {
+        name: 'disabled',
+        html: `<q2-date-picker label="Date" placeholder="Select a date" disabled disabled-msg="Dates unavailable"></q2-date-picker>`,
+    },
+    {
+        name: 'readonly',
+        html: `<q2-date-picker label="Date" placeholder="Select a date" readonly value="${SINGLE_VALUE}"></q2-date-picker>`,
+    },
+    {
+        name: 'invalid',
+        html: `<q2-date-picker label="Date" placeholder="Select a date" invalid></q2-date-picker>`,
+    },
+    {
+        name: 'valid',
+        html: `<q2-date-picker label="Date" placeholder="Select a date" valid value="${SINGLE_VALUE}"></q2-date-picker>`,
+    },
+    {
+        name: 'optional',
+        html: `<q2-date-picker label="Date" placeholder="Select a date" optional></q2-date-picker>`,
+    },
+    {
+        name: 'clearable-value',
+        html: `<q2-date-picker label="Date" placeholder="Select a date" clearable value="${SINGLE_VALUE}"></q2-date-picker>`,
+    },
+    {
+        name: 'hide-label',
+        html: `<q2-date-picker label="Date" placeholder="Select a date" hide-label value="${SINGLE_VALUE}"></q2-date-picker>`,
+    },
+];
+const DEFAULT_HOVER_VARIANT = {
+    name: 'default',
+    html: `<q2-date-picker></q2-date-picker>`,
+};
+const DEFAULT_FOCUS_VARIANT = {
+    name: 'default',
+    html: `<q2-date-picker></q2-date-picker>`,
+};
+const EXPANDED_VARIANTS = [
+    {
+        name: 'expanded-single',
+        html: `<q2-date-picker label="Date" placeholder="Select a date" value="${SINGLE_VALUE}" popover-alignment="left"></q2-date-picker>`,
+    },
+    {
+        name: 'expanded-range',
+        html: `<q2-date-picker mode="range" label="Date Range" placeholder="Select date range" range-start="${RANGE_START}" range-end="${RANGE_END}" popover-alignment="left"></q2-date-picker>`,
+    },
+    {
+        name: 'expanded-up',
+        html: `<q2-date-picker style="margin-top: 450px" label="Date" placeholder="Select a date" value="${SINGLE_VALUE}" popover-alignment="left" popover-direction="up"></q2-date-picker>`,
+    },
+];
+const INVALID_RANGE_VARIANT = {
+    name: 'range-invalid-confirm',
+    html: `<q2-date-picker mode="range" label="Date Range" placeholder="Select date range" range-start="${RANGE_START}" range-end="${RANGE_END}" open></q2-date-picker>`,
+};
+const MOBILE_ACTION_SHEET_RANGE_VARIANT = {
+    name: 'action-sheet-range-mobile',
+    html: `<q2-date-picker _action-sheet mode="range" range-start="${RANGE_START}" range-end="${RANGE_END}"></q2-date-picker>`,
+};
+const restingCase = (variant, theme) => {
+    test(`q2-date-picker--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await expect(page).toHaveScreenshot(`q2-date-picker--${variant.name}--resting--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-date-picker--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await page.locator('q2-date-picker').hover();
+        await expect(page).toHaveScreenshot(`q2-date-picker--${variant.name}--hover--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-date-picker--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-date-picker--${variant.name}--focus--${theme}.png`);
+    });
+};
+// q2-popover renders its calendar before its opening animation completes. Wait
+// for the animation instead of relying on a visibility check alone.
+const waitForPopoverAnimation = async (page) => {
+    await page.locator('q2-popover .container').evaluate(async (element) => {
+        // A popover animation can be replaced while it is positioning itself. Its
+        // `finished` promise rejects when canceled, but that is still a settled
+        // visual state for this screenshot.
+        await Promise.allSettled(element.getAnimations({ subtree: true }).map(animation => animation.finished));
+        await new Promise(resolve => requestAnimationFrame(() => resolve()));
+    });
+};
+const expandedCase = (variant, theme) => {
+    test(`q2-date-picker--${variant.name}--expanded — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await page.locator('q2-date-picker').evaluate((el) => (el.open = true));
+        // Wait for the calendar panel inside the popover to render.
+        await page.locator('q2-date-calendar .cal-panel').waitFor({ state: 'visible' });
+        await waitForPopoverAnimation(page);
+        await expect(page).toHaveScreenshot(`q2-date-picker--${variant.name}--expanded--${theme}.png`);
+    });
+};
+const mobileActionSheetRangeCase = (theme) => {
+    test(`q2-date-picker--${MOBILE_ACTION_SHEET_RANGE_VARIANT.name}--resting — ${theme}`, async ({ page }) => {
+        await page.setViewportSize(MOBILE_VIEWPORT);
+        await setupPage(page, MOBILE_ACTION_SHEET_RANGE_VARIANT.html, { theme, setupLoc: true });
+        await expect(page).toHaveScreenshot(`q2-date-picker--${MOBILE_ACTION_SHEET_RANGE_VARIANT.name}--resting--${theme}.png`);
+    });
+};
+const invalidRangeCase = (variant, theme) => {
+    test(`q2-date-picker--${variant.name}--error — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await page.locator('q2-date-calendar .cal-panel').waitFor({ state: 'visible' });
+        await waitForPopoverAnimation(page);
+        await page.locator('q2-date-picker').evaluate((element, invalidDate) => {
+            element.invalidDates = [invalidDate];
+        }, INVALID_RANGE_DATE);
+        await expect(page.locator(`q2-date-calendar button[data-date="${INVALID_RANGE_DATE}"]`)).toHaveClass(/is-disabled/);
+        await page.locator('q2-date-calendar .cal-footer-actions q2-btn[intent="workflow-primary"] button').click();
+        const input = page.locator('q2-date-picker q2-input');
+        await expect(input).toHaveJSProperty('errors', ['Range includes unavailable dates.']);
+        await page.locator('q2-date-picker q2-popover .cal-panel').waitFor({ state: 'hidden' });
+        await input.locator('[test-id="iconError"]').waitFor({ state: 'visible' });
+        await expect(page).toHaveScreenshot(`q2-date-picker--${variant.name}--error--${theme}.png`);
+    });
+};
+test.describe('q2-date-picker — variants × themes', () => {
+    for (const variant of RESTING_VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    for (const theme of THEMES) {
+        hoverCase(DEFAULT_HOVER_VARIANT, theme);
+    }
+    for (const theme of THEMES) {
+        focusCase(DEFAULT_FOCUS_VARIANT, theme);
+    }
+    for (const variant of EXPANDED_VARIANTS) {
+        for (const theme of THEMES) {
+            expandedCase(variant, theme);
+        }
+    }
+    for (const theme of THEMES) {
+        invalidRangeCase(INVALID_RANGE_VARIANT, theme);
+    }
+    for (const theme of THEMES) {
+        mobileActionSheetRangeCase(theme);
+    }
+});

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

@@ -113,7 +113,7 @@ export class Q2Detail {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '0f3654772fe3929f6bf7294f454c774b495a6b62', class: this.detailClasses }, this.hasLabel && (h("div", { key: '3d0507462b8cb995a3f19dccd8bcede903a99800', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'bef3f201c69fdee763fc302aecc15a28fd9940be', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: '18da4ca97fe076c40a3d6ef95b73b570cee07649', class: this.detailClasses }, this.hasLabel && (h("div", { key: '7b88ffdd3e42abb1313d729874d198642a83e66d', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: '9eecdbf3aa2519da9508f1c210d3b3a9129824ce', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     static get is() { return "q2-detail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -252,7 +252,7 @@ export class Q2Dropdown {
         const custom = type === 'custom';
         let intent;
         if (allowedIntents.includes(type)) {
-            intent = type === 'neutral' ? type : `workflow-${type}`;
+            intent = type;
         }
         const active = this.open;
         const disabled = !!this.disabled;
@@ -364,7 +364,7 @@ export class Q2Dropdown {
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: 'b71837747b991c78e7ec76cc781dc46b69f15ceb', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '82fe12ed6bc51dd731cd1ff30d315f5bd795ef45', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: 'b4da967caa9cd12e397b5320c055b3a62b2926ec', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: 'f7a490170ad9429ead0d611adb78dd8272deaaa2', name: "popover-top" }), h("q2-option-list", { key: '87eafcc44a7b5deca4dabd6bc3a3ae04517a5917', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '394a44b4490f2b6aff52a8262c5ec3ecc54e9111' })), h("slot", { key: '6e84bdcae4daf64aded5fadcc185dbfab889626e', name: "popover-bottom" }))));
+        return (h("click-elsewhere", { key: '45129d88765c097736a818c203418921bc669d2f', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'cb76fe56a37af0909e06f267969c0f6605be318d', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: '73bb8792c03313ae6074299d431d913435e95707', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: '05fa5e37195ce747ac4e801e1decf55838d9c752', name: "popover-top" }), h("q2-option-list", { key: '534b2dfaf2616937933aa2377d1a647688c679c9', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '686b6b14ebc67aad7707e6dc0c0170b117afde4e' })), h("slot", { key: '43b916294d33ac547efc6eeed2b2fc1c87085ad3', name: "popover-bottom" }))));
     }
     static get is() { return "q2-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -557,9 +557,9 @@ export class Q2Dropdown {
                 "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 field's `<label>` element from view."
+                    "text": "Hides the dropdown's label text from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -618,7 +618,7 @@ export class Q2Dropdown {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "This property should not be used if the `type` is `icon`."
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
                         }, {
                             "name": "localizable",
                             "text": undefined

package/dist/collection/components/q2-editable-field/q2-editable-field.js

@@ -14,6 +14,8 @@ export class Q2EditableField {
         /**
          * The visible descriptor for the element.
          * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.
+         * @warning
+         * Required for screen reader compliance even when `hideLabel` is `true`.
          * @localizable
          */
         this.label = '';
@@ -25,11 +27,6 @@ export class Q2EditableField {
             queueMicrotask(() => {
                 if (this.isDefaultPrevented(emittedEvents))
                     return;
-                this.innerValue = undefined;
-                this.formattedValue = undefined;
-                this.inputElement.value = '';
-                this.inputElement.value = this.defaultValue;
-                this.inputElement.value = this.value;
                 this.editing = false;
             });
         };
@@ -167,6 +164,8 @@ export class Q2EditableField {
     observesEditing(newValue, oldValue) {
         if (newValue === oldValue)
             return;
+        if (!newValue)
+            this.discardDraft();
         this.scheduledAfterRender.push(this.hostElement.focus);
     }
     errorsObserver() {
@@ -194,6 +193,20 @@ export class Q2EditableField {
     get wrapperClass() {
         return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
     }
+    /**
+     * Drops the in-progress draft and re-syncs the input and the read state display from `value`.
+     *
+     * Runs whenever the field leaves the edit state, including when a consumer drives `editing` itself, so the
+     * read state never renders a discarded draft.
+     */
+    discardDraft() {
+        this.innerValue = undefined;
+        this.formattedValue = undefined;
+        // `q2-input` only drops its own draft when its `value` prop actually changes, so bounce through a
+        // throwaway value that is guaranteed to differ from `value` before restoring it.
+        this.inputElement.value = this.value === '' ? ' ' : '';
+        this.inputElement.value = this.value;
+    }
     emitChangeEvents(detail) {
         return [this.change.emit(detail), this.tctChange.emit(detail)];
     }
@@ -212,7 +225,7 @@ export class Q2EditableField {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '73dfc2198007dc7366243914bb055db3f8ebda3a' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: '38f7c5b55e8b6f0590c72ab81a4bb26c93506249' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     static get is() { return "q2-editable-field"; }
     static get encapsulation() { return "shadow"; }
@@ -358,8 +371,11 @@ export class Q2EditableField {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Hide's the field's `<label>` element from view."
+                    "tags": [{
+                            "name": "warning",
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
+                        }],
+                    "text": "Hides the field's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -395,6 +411,9 @@ export class Q2EditableField {
                 "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-example/q2-example.js

@@ -118,7 +118,7 @@ export class Q2Example {
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: '7878622b0f2a455617e109b9aa32290bffc00a92', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: 'e7adf64d703f0226f4ee5f5038ddbcda28b27ed2', attribute: "navigation" }, this.renderMenuInner());
     }
     static get is() { return "q2-example"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-file-picker/q2-file-picker.js

@@ -106,7 +106,7 @@ export class Q2FilePicker {
         // #region Render Methods
         this.render = () => {
             const { disabled } = this;
-            return (h("div", { class: "file-picker" }, (this.hasLabel || this.hasDescription) && (h("div", { class: "heading" }, this.hasLabel && (h("label", { class: "label", htmlFor: "file-field", "test-id": "label" }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescription && (h("div", { class: "description", id: "description", "test-id": "description" }, !!this.description ? (loc(this.description)) : this.hasDescriptionSlotContent ? (h("slot", { name: "description" })) : (''))))), (this.variant === 'browse-drop' && (h("div", { class: this.dropZoneClasses, onDragEnter: this.disableEvent, onDragLeave: this.dimDropZone, onDragOver: this.highlightDropZone, onDrop: this.grabDroppedFiles, ref: el => (this.dropZone = el !== null && el !== void 0 ? el : this.dropZone), "test-id": "drop-zone" }, (this.areFilesUploading && (h(Fragment, null, h("q2-loading", { class: "loading" }), h("p", { class: "drop-zone-text" }, loc('tecton.element.filePicker.uploadingEllipsis'))))) || (h(Fragment, null, h("q2-icon", { type: "upload" }), h("p", { class: "drop-zone-text" }, h("q2-link", { class: "browse-link", label: loc('tecton.element.filePicker.browse'), onTctClick: () => this.launchFileBrowser(), variant: "inline", "test-id": "browse-link", disabled: disabled, href: "javascript:void(0)" }), loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles]))))))) || (h("div", { class: "browse", "test-id": "browse" }, h("q2-btn", { block: this.isMobileViewport, disabled: disabled || this.areFilesUploading, intent: "workflow-primary", loading: this.areFilesUploading, onClick: () => this.launchFileBrowser(), size: this.actualButtonSize, "test-id": "browse-button" }, h("q2-icon", { type: "paperclip" }), h("span", null, loc('tecton.element.filePicker.attachFiles', [this.maxFiles]))))), h("input", { "aria-describedby": (!!this.description && 'description') || undefined, class: "sr", id: "file-field", onChange: this.grabSelectedFiles, ref: el => (this.browseButtonInput = el !== null && el !== void 0 ? el : this.browseButtonInput), type: "file", "test-id": "file-input", disabled: disabled, multiple: true, tabIndex: -1 }), h("div", { class: "file-list-container", onScroll: this.updateFileListGradient, ref: el => (this.fileListContainer = el !== null && el !== void 0 ? el : this.fileListContainer) }, h("q2-list", { class: "file-list", ref: el => (this.fileList = el !== null && el !== void 0 ? el : this.fileList) }, this.displayedFiles.map(file => (h("q2-item", { class: this.getFileItemClasses(file.file.name), key: file.file.name, onAnimationEnd: this.getAnimationendHandlerToRemoveFileItem(file.file.name) }, h("div", { slot: "decorator" }, file.status === 'invalid-type' ||
+            return (h("div", { class: "file-picker" }, (this.hasLabel || this.hasDescription) && (h("div", { class: "heading" }, this.hasLabel && (h("label", { class: "label", htmlFor: "file-field", "test-id": "label" }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescription && (h("div", { class: "description", id: "description", "test-id": "description" }, !!this.description ? (loc(this.description)) : this.hasDescriptionSlotContent ? (h("slot", { name: "description" })) : (''))))), (this.variant === 'browse-drop' && (h("div", { class: this.dropZoneClasses, onDragEnter: this.disableEvent, onDragLeave: this.dimDropZone, onDragOver: this.highlightDropZone, onDrop: this.grabDroppedFiles, ref: el => (this.dropZone = el !== null && el !== void 0 ? el : this.dropZone), "test-id": "drop-zone" }, (this.areFilesUploading && (h(Fragment, null, h("q2-loading", { class: "loading" }), h("p", { class: "drop-zone-text" }, loc('tecton.element.filePicker.uploadingEllipsis'))))) || (h(Fragment, null, h("q2-icon", { type: "upload" }), h("p", { class: "drop-zone-text" }, h("q2-link", { class: "browse-link", label: loc('tecton.element.filePicker.browse'), onTctClick: () => this.launchFileBrowser(), variant: "inline", "test-id": "browse-link", disabled: disabled, href: "javascript:void(0)" }), loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles]))))))) || (h("div", { class: "browse", "test-id": "browse" }, h("q2-btn", { block: this.isMobileViewport, disabled: disabled || this.areFilesUploading, intent: "primary", loading: this.areFilesUploading, onClick: () => this.launchFileBrowser(), size: this.actualButtonSize, "test-id": "browse-button" }, h("q2-icon", { type: "paperclip" }), h("span", null, loc('tecton.element.filePicker.attachFiles', [this.maxFiles]))))), h("input", { "aria-describedby": (!!this.description && 'description') || undefined, class: "sr", id: "file-field", onChange: this.grabSelectedFiles, ref: el => (this.browseButtonInput = el !== null && el !== void 0 ? el : this.browseButtonInput), type: "file", "test-id": "file-input", disabled: disabled, multiple: true, tabIndex: -1 }), h("div", { class: "file-list-container", onScroll: this.updateFileListGradient, ref: el => (this.fileListContainer = el !== null && el !== void 0 ? el : this.fileListContainer) }, h("q2-list", { class: "file-list", ref: el => (this.fileList = el !== null && el !== void 0 ? el : this.fileList) }, this.displayedFiles.map(file => (h("q2-item", { class: this.getFileItemClasses(file.file.name), key: file.file.name, onAnimationEnd: this.getAnimationendHandlerToRemoveFileItem(file.file.name) }, h("div", { slot: "decorator" }, file.status === 'invalid-type' ||
                 file.status === 'over-size-limit' ||
                 file.status === 'failed' ||
                 file.status === 'over-max-files-limit' ? (h("q2-icon", { class: "icon-error", type: "error" })) : file.status === 'in-progress' ? (h("q2-loading", { class: "file-item-loading", "hide-from-screen-readers": true })) : (h("q2-icon", { class: "icon-success", type: "success" }))), this.ellipsizeFileName === false ? (h("div", { slot: "header" }, file.file.name)) : (h("div", { class: "file-name-header", slot: "header" }, h("span", { class: "file-name-leading" }, file.file.name.slice(0, Math.ceil(file.file.name.length / 2))), h("span", { class: "file-name-trailing" }, h("bdo", { dir: "ltr" }, file.file.name.slice(Math.ceil(file.file.name.length / 2)))))), h("div", { class: "file-item-info", slot: "body" }, this.getFileItemStatusMessage(file)), h("div", { slot: "action" }, h("q2-btn", { class: "dismiss-button", intent: "neutral-text", "hide-label": "true", label: this.getFileItemButtonLabel(file), onClick: this.getClickHandlerToRemoveFileItem(file.file.name), disabled: disabled }, h("q2-icon", { type: "close" }))))))))));

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

@@ -13,7 +13,7 @@ export class Q2Form {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'b01b965b3fc436b4155245fa747e4c8922304114', class: "container" }, h("slot", { key: '039fd27f2a80825f14a6247eb330eac983638389' })));
+        return (h("div", { key: 'e4a4cee5eb8e69c9fe81423d3942a6299b4d1462', class: "container" }, h("slot", { key: '1d729b1c93148f0a12954688cd33266b24f40f67' })));
     }
     static get is() { return "q2-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-formatted-text/q2-formatted-text.js

@@ -71,7 +71,7 @@ export class Q2FormattedText {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: '9345b2829e7ac6dd1e5e308e1b840dcb298dbc0d', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '4687a60218658aeced2507ffd9f5eef6c5c9b40e' }, this.formattedValue)));
+        return (h("div", { key: 'bb6f08a7fd5801e7527624b766061019ce931ac5', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '44808806b71f4b3783fa38806789bbc91956bdcd' }, this.formattedValue)));
     }
     static get is() { return "q2-formatted-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -839,7 +839,7 @@ export class Q2Input {
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (h(Host, { key: 'aea772f2158fa032157fcbb26bb49a97dc2e5a1b', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '6b0cdf179216c359cb2db01176f563d77c19780e', class: this.wrapperClasses }, this._ariaDescription && (h("span", { key: '816be1dac83810f66ee0204a5be1a8421833e20b', id: `${this.inputId}-aria-description`, class: "sr" }, this._ariaDescription)), h("div", { key: '1e4fd3b4bbe5103b7bad2af07ebfecb36c3d1743', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
+        return (h(Host, { key: '5cce451eef90d5ef5cef8020105b725d76265eeb', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '6c014e6884ceabb3a0ceb7d667d7a9496221419c', class: this.wrapperClasses }, this._ariaDescription && (h("span", { key: '0a4eba6052c45e24e6babcfa9abbe587c46484c4', id: `${this.inputId}-aria-description`, class: "sr" }, this._ariaDescription)), h("div", { key: 'd93a7a1e3b0f8638c23f2922429b458d5b249e9f', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
     }
     static get is() { return "q2-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1300,9 +1300,9 @@ export class Q2Input {
                 "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 field's `<label>` element from view."
+                    "text": "Hides the field's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -1415,6 +1415,9 @@ export class Q2Input {
                 "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-item/q2-item.js

@@ -27,6 +27,21 @@ export class Q2Item {
         this.renderTrigger = 0;
         /** Controls the vertical alignment of the item decorator and single content slot. */
         this.verticalAlign = 'top';
+        this.handleKeydown = (event) => {
+            if (!this.clickable || event.target !== this.itemElement)
+                return;
+            if (event.key === 'Enter' || this.isSpaceKey(event)) {
+                event.preventDefault();
+            }
+        };
+        this.handleKeyup = (event) => {
+            if (!this.clickable || event.target !== this.itemElement)
+                return;
+            if (event.key === 'Enter' || this.isSpaceKey(event)) {
+                event.preventDefault();
+                this.itemElement.click();
+            }
+        };
     }
     // #endregion
     // #region Component Lifecycle Events
@@ -138,11 +153,14 @@ export class Q2Item {
         const contentSlotCount = [this.hasHeaderSlotContent, this.hasBodySlotContent, this.hasFooterSlotContent].filter(Boolean).length;
         return this.verticalAlign !== 'top' && contentSlotCount === 1;
     }
+    isSpaceKey(event) {
+        return event.code === 'Space' || event.key === ' ' || event.key === 'Space' || event.key === 'Spacebar';
+    }
     // #endregion
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: '24235dc76b675062e0edbc9ffea84598e82d67a3', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (h("div", { key: '9ed941f454d1948fb1a62f730eb87744b8be5fad', class: this.decoratorClasses }, h("slot", { key: '90edead9ce02a3c85687bd93e7865e962524654e', name: "decorator" }, h("slot", { key: '86940492d2fec1d9a90ea240f526b4dc162505af', name: "bullet" })))), h("div", { key: 'b59a55f029809e8ce20f6744a7fc4c5f9519510e', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '9c70de9396f7c07856e4f107081475a317b05146', class: "header" }, h("slot", { key: '275e7d844ae6c6d5e44067f96bcf9d4ccd54fe95', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '6d70457c273c01f2637618b4345ff8f0bb871ab3', class: "body" }, h("slot", { key: '0014ace81da43f6619280117d799848885fd4371', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '81cb41dd1e02030dfd2ef5d1eaec3931ce069480', class: this.actionClasses }, h("slot", { key: '74b48e8223f25e6169f5efc0b6beda2523a2a88b', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '28e282068bb76cebce130a61bc27ade04fcbd399', class: this.footerClasses }, h("slot", { key: '684f5086b8e7aa7649907788d9c6af38f4b0c2c5', name: "footer" })))));
+        return (h("div", { key: '42ea022dfbebe50fc94e275c95f83f7cc3bbc3fd', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, onKeyDown: this.handleKeydown, onKeyUp: this.handleKeyup }, this.hasDecoratorSlotContent && (h("div", { key: '5ea5749d40d3fe53b28278272160e093cab9a7f6', class: this.decoratorClasses }, h("slot", { key: 'f69f67d5fd71dc36fab1e9a7014dd05c89a4250f', name: "decorator" }, h("slot", { key: '12e97e5492803c40e7e56785f69e18e8d27aa099', name: "bullet" })))), h("div", { key: '6a58cdcfba08332b36317fa072be51f90a24b03b', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '557085b4064d2ef20db3cb0f91388feb5737f83a', class: "header" }, h("slot", { key: '455ae71c71174ff1591e7ce5e83c1c6104261e81', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'e003fa668b6640cebd7c0faaca2eb740a77944fc', class: "body" }, h("slot", { key: 'aa0d5b552db0d4e3ca1692c7798feade76e0e89d', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '7c606e2cb0593b03844e2ddb48cbd9c4225f4d8d', class: this.actionClasses }, h("slot", { key: '9fb61fea2a775d011c3185d403a19877e8b558ba', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '2cab76f4d546f73365dcc7e1a5ea773b933e355e', class: this.footerClasses }, h("slot", { key: 'c7b603097d0272199604ec53dce5c99caf37a3d5', name: "footer" })))));
     }
     static get is() { return "q2-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,9 +9,9 @@ const DROPDOWN_OPTIONS = `
     <q2-option value="fourth">Fourth</q2-option>
 `;
 const DROPDOWN_ACTION = `<q2-dropdown slot="action" type="icon" label="My dropdown" icon="options" popover-alignment="left" hide-label="">${DROPDOWN_OPTIONS}</q2-dropdown>`;
-const BUTTON_ACTION = `<q2-btn intent="workflow-primary" slot="action">Action</q2-btn>`;
+const BUTTON_ACTION = `<q2-btn intent="primary" slot="action">Action</q2-btn>`;
 const ICON_ACTION = `<q2-icon slot="action" type="options"></q2-icon>`;
-const ICON_BUTTON_ACTION = `<q2-btn slot="action" intent="workflow-primary"><q2-icon type="edit"></q2-icon></q2-btn>`;
+const ICON_BUTTON_ACTION = `<q2-btn slot="action" intent="primary"><q2-icon type="edit"></q2-icon></q2-btn>`;
 const CHECKBOX_ACTION = `<q2-checkbox label="Item checkbox" hide-label slot="action"></q2-checkbox>`;
 const PILL_ACTION = `<q2-pill label="Item pill" slot="action"></q2-pill>`;
 const AVATAR_DECORATOR = `<q2-avatar icon="home" slot="decorator"></q2-avatar>`;

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

@@ -109,7 +109,7 @@ export class Q2Legend {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '32d4b5a9adfdd824fba84233dd1647236a80d2e7', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '2842a006e6aab9d478bf900e13e0f45c14ec4a67' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: '4072c6510e6d0820051d31eb2e031f05b6f4b71e', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'd823017f42f22efe3fdedbb1484b0a7f749022ae' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get is() { return "q2-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class Q2List {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '03d753b9d45921c1660ca81e92612dd742aeb694', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '43124c37dde7bf8079171325c1592f84a9b86d7b', class: this.headerClasses }, h("div", { key: '34005b2b72a15103698731b5bd0076c53410dc90', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'a6a1e1a921aec21da718cac10a1e4643578cc53f', name: "filter" }))), h("div", { key: '8031cab7c441c8dde9102af20ed34c106e83e2a2', role: "list" }, h("slot", { key: '4eacfb475f1f8f7d74210afb5c505282afb0ed13' }))));
+        return (h("div", { key: '83755626545a0f51c29343772b4ac3bfe3affb44', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'ac297dfd9016aa8c7e3ee7664cf82bfbdbb1a18c', class: this.headerClasses }, h("div", { key: 'bce3d15f585ce2ab6d1db0d1e17d95018dc237cd', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '373811d46b5adbc711017b816147c12008f142d4', name: "filter" }))), h("div", { key: '47818e442a69e5d3af55730b51c8aa2d73cc26b8', role: "list" }, h("slot", { key: 'b0061fb86511665ecf5217f817135bc1533608ae' }))));
     }
     static get is() { return "q2-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class Q2Message {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: 'e6d294a3ad21e83f33d2e0202e74b66b5d61984f', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: 'c8cad3b93d2d501513d951b0850bf920cfdd2dc8', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '48222cb290731c76a3f68b48c01fcaff5b0fea2a', class: "sr" }), h("div", { key: '2f67a189f90d66ec9478926984cb4e3f97808658', class: "sr message-label" }, messageLabel), h("div", { key: 'f41dd21efa6c822a436328bf4bbf756eec8714fd', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '5668fbb085bfc8403062710a60238ba71c05e7ab' }))));
+        return (h("div", { key: 'eb6b6c3d9ae10d3f87a9c7be63780f582216ded1', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: 'e2dc68dc1da013553997ee459dede038f773a5e6', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'cc73afe11cda6117a222a15f3977152e2d22228e', class: "sr" }), h("div", { key: 'e92d1fff9c917176b2aded0fc9198fe819e4496c', class: "sr message-label" }, messageLabel), h("div", { key: 'f5ee65aa207ccf68b7cb3abda8ffed78b39937f8', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '493608040edc25dbccfe63c2907a42dc43c023a9' }))));
     }
     static get is() { return "q2-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -114,7 +114,7 @@ export class Q2Meter {
     }
     render() {
         const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
-        return (h("div", { key: '108bd1850c02f17867f51e2a29657e579df01c33', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'baae6e4a58b2fac21ef6099d99402e4cffb03d32', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'dcf9cdf337a50fa4cf145985fbab513114b38019', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: 'f6214a063456893f3c6f2f014a9ba687ad5b0a81', class: "legends" }, h("div", { key: '1c624e80a27edb22cf39c4ca6345e07c945e48e5', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '63345961e4992b545d617ea5e1b423729fab94f5', class: "right" }, h("div", { key: '897ff512bf5037b17c51c70a5bf901cf516dbccc', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
+        return (h("div", { key: '046777b3fb3bbfe58ad5ff97878d9c37008dd68d', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: '8b4b84a18e9b91b72cf0b5135136f09e6327fa27', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: '85019eed37e6f346846e71bab7351460f5549bd0', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: 'c6f111962764a49032e645cab917f11ccc2b3cea', class: "legends" }, h("div", { key: 'c63885e8690d61355867a6d9dc64575dc43bd22b', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: 'fd33a6d780d62b72081006d2bc81bce5942cfac7', class: "right" }, h("div", { key: '02fa74993895707294400edf76cc9a4882c9b55d', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
     }
     static get is() { return "q2-meter"; }
     static get encapsulation() { return "shadow"; }

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

@@ -177,7 +177,7 @@ export class Q2Modal {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: 'efa04c4cab9624ecc331124fbc54bba9b0b67f23', ref: el => (this.dialogElement = el), class: renderStatus, onCancel: this.onCancel, onClick: this.onClick }, h("div", { key: '81e9fa70f3c4a687fc543250d5d7c8c351968aba', class: interiorClasses }, this.title && (h("header", { key: '30eb57f4344a623ecbfa36a05f19cdbf2012cf55' }, this.title && h("h2", { key: 'a3d880ddf32ef43e2587c47152a28b0a861a60e4', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '90ae641a244ca09a2de917331d5669ceddef24e9', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '530d9b90eb044e7eb0b52cb877ee018e859014ec', type: "close" }))))), h("div", { key: 'a643bd41ea14bb6238bebaff18d608bb1116c4d5', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'e5d99acc00768c6f235a7108903d9992725c08f2', class: "icon" }, h("q2-icon", { key: '97ffba3484e2bf0901a1520a7a8e8099cc03c3ba', type: this.icon }))), this.imageSrc && (h("div", { key: '5426e6276902a70be2b6cf64849580587dfa6368', class: "image" }, h("img", { key: '00bb517674151bce32307c0cae70e1cae45da7a2', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '1ca0b130e835e24b3891d7ca2870105b538ba14d', name: "content" }), this.description && h("p", { key: '86d27f942231bff0754befb1abc2b1108f16f1ad', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'f25747c08a3c49fe8388f1528b70490e92ee01fb', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'd823aa857d2f003ac671d6cf93b1a0b63dabdaff' }, h("q2-action-group", { key: '31c7fa360c61861b26b26e38ffe241760f3c5cb9', "full-width": this.fullWidthButton }, h("slot", { key: '9988c2db9d3635d05c66c2b5e3ed6745a9bfaa1c', name: "action" }))))));
+        return (h("dialog", { key: '67c724b2e94aa823893cc3477ffa364bc07f3c91', ref: el => (this.dialogElement = el), class: renderStatus, onCancel: this.onCancel, onClick: this.onClick }, h("div", { key: '67b97fe323985b56db793d1cf939192bbfbd424e', class: interiorClasses }, this.title && (h("header", { key: 'ec0c82831007887e2baeddc50f2b8c0ec24b0d97' }, this.title && h("h2", { key: '10bbd7f9216ce221616acc4c77984aca582eba10', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '8f801bf013c9015c3ae50543067393b26941d3d4', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: 'b546a86894aa6b5dd3576a33eadfa63e21a13590', type: "close" }))))), h("div", { key: 'cdc674c3cee4bca6bda0c60ca2c9f08f83ab4440', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '8b8ffc983cecd2ddf1f912db7f00a6ed198a6b16', class: "icon" }, h("q2-icon", { key: 'cb3430c9216268ed7e8eeea85a83168b2d72ceb1', type: this.icon }))), this.imageSrc && (h("div", { key: 'eab34ebad157a6c81a0e24bc726505e3541eac05', class: "image" }, h("img", { key: 'cdf8e7a1c381a099d811241a410998e16405bda4', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '2674f81de64e3d6069e043f4c0a0db39d70f466a', name: "content" }), this.description && h("p", { key: '8dc2a0b031812a6e65012df8d78e5ff3373c117e', class: "description" }, this.description), this.customMarkup && (h("p", { key: '218d120d1109cff6a1aa79e5b76befbca0ca5857', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'ffc5c49fbaabde579fda002a25ac893e798c07de' }, h("q2-action-group", { key: '295cde61c6e9851aab36f3903f892a5775aca76c', "full-width": this.fullWidthButton }, h("slot", { key: 'e8ece0f36c2647515d82e3cd21b9c36faf731fd2', name: "action" }))))));
     }
     static get is() { return "q2-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,15 +2,15 @@ import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
 import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 const ACTIONS = `
-    <q2-btn slot="action" intent="workflow-primary" label="Submit"></q2-btn>
-    <q2-btn slot="action" intent="workflow-secondary" label="Cancel"></q2-btn>
+    <q2-btn slot="action" intent="primary" label="Submit"></q2-btn>
+    <q2-btn slot="action" intent="secondary" label="Cancel"></q2-btn>
 `;
 const MANY_ACTIONS = `
-    <q2-btn slot="action" intent="workflow-primary" label="Submit"></q2-btn>
-    <q2-btn slot="action" intent="workflow-secondary" label="Cancel"></q2-btn>
-    <q2-btn slot="action" intent="workflow-escape" label="Reset 1"></q2-btn>
-    <q2-btn slot="action" intent="workflow-escape" label="Reset 2"></q2-btn>
-    <q2-btn slot="action" intent="workflow-escape" label="Reset 3"></q2-btn>
+    <q2-btn slot="action" intent="primary" label="Submit"></q2-btn>
+    <q2-btn slot="action" intent="secondary" label="Cancel"></q2-btn>
+    <q2-btn slot="action" intent="escape" label="Reset 1"></q2-btn>
+    <q2-btn slot="action" intent="escape" label="Reset 2"></q2-btn>
+    <q2-btn slot="action" intent="escape" label="Reset 3"></q2-btn>
 `;
 const LONG_DESC = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula.';
 // Inline SVG data URL — stable across runs, no network dependency.

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"; }