q2-tecton-elements 1.71.4 → 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.css

@@ -88,6 +88,7 @@ button {
   }
 }
 /**
+ * @prop --tct-dropdown-icon-size: (<length>) Controls the size of the dropdown icon.
  * @prop --tct-dropdown-content-padding?: (<length-percentage>+) Controls the optional padding around the dropdown popover content.
  * @prop --tct-dropdown-popover-top-slot-padding: (<length-percentage>+) Controls the inner padding of the dropdown's popover-top slot.
  * @prop --tct-dropdown-popover-bottom-slot-padding: (<length-percentage>+) Controls the inner padding of the dropdown's popover-bottom slot.
@@ -122,6 +123,7 @@ button {
 q2-icon {
   pointer-events: none;
   margin-block: -100px;
+  --tct-icon-size: var(--tct-dropdown-icon-size, var(--const-px-18, 18px));
 }
 
 click-elsewhere {

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: '27e7a560b21894fb10175be18c9cb07e37f59db3', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'b53dace27e75fdbcd87a1689470a1466ad9e07d3', 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: '4a15e7d6d8f474c8464e39e35437cd8edcc9487d', 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: '7854254650f81b8d5a229acbec55aa8beab36882', name: "popover-top" }), h("q2-option-list", { key: 'a38c9411306ad8d39456dce81bb50e9af13bf1f6', 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: '7472127d019366f76eff86cd744d050d197b25c1' })), h("slot", { key: '5af670e8f5ed273175100ddc9202c44e2c06f7b3', 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-dropdown/test/q2-dropdown-test.vr.js

@@ -0,0 +1,30 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    {
+        name: 'chevron',
+        html: `<q2-dropdown type="neutral" icon="chevron-down" label="Actions">
+            <q2-option value="view">View details</q2-option>
+        </q2-dropdown>`,
+    },
+    {
+        name: 'icon',
+        html: `<q2-dropdown type="icon" icon="options" label="More actions" hide-label>
+            <q2-option value="view">View details</q2-option>
+        </q2-dropdown>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-dropdown--${variant.name}--resting - ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme, setupLoc: true });
+        await expect(page).toHaveScreenshot(`q2-dropdown--${variant.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-dropdown - variants x themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});

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

@@ -88,6 +88,7 @@ button {
   }
 }
 /**
+ * @prop --tct-editable-field-icon-size: (<length>) Controls the size of edit, confirm, and cancel icons.
  * @prop --tct-editable-field-btn-hover-background: (<color>) Controls the background color of the editable field action buttons (begin, save, cancel) on hover.
  * @prop --tct-editable-field-btn-icon-stroke-primary: (<color>) Controls the primary stroke color of the editable field action button icons.
  * @prop --tct-editable-field-btn-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the editable field action button icons.
@@ -101,6 +102,7 @@ button {
 .q2-editable-field-wrapper .save-edit,
 .q2-editable-field-wrapper .cancel-edit {
   flex: 0 0 44px;
+  --tct-icon-size: var(--tct-editable-field-icon-size, var(--const-px-18, 18px));
   --tct-btn-icon-hover-background: var(--tct-editable-field-btn-hover-background, var(--app-gray-l3, #f2f2f2));
   --tct-icon-stroke-primary: var(--tct-editable-field-btn-icon-stroke-primary, var(--app-gray, #747474));
   --tct-icon-stroke-secondary: var(--tct-editable-field-btn-icon-stroke-secondary, var(--app-gray, #747474));

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 = '';
@@ -21,15 +23,21 @@ export class Q2EditableField {
         this.value = '';
         this.cancelClick = (event) => {
             event === null || event === void 0 ? void 0 : event.stopPropagation();
-            mirrorEmit(this, ['change', 'tctChange'], { editing: false, name: 'cancel' });
-            this.innerValue = undefined;
-            this.formattedValue = undefined;
-            this.inputElement.value = '';
-            this.inputElement.value = this.defaultValue;
+            const emittedEvents = this.emitChangeEvents({ editing: false, name: 'cancel' });
+            queueMicrotask(() => {
+                if (this.isDefaultPrevented(emittedEvents))
+                    return;
+                this.editing = false;
+            });
         };
         this.editClick = (event) => {
             event === null || event === void 0 ? void 0 : event.stopPropagation();
-            mirrorEmit(this, ['change', 'tctChange'], { editing: true, name: 'edit' });
+            const emittedEvents = this.emitChangeEvents({ editing: true, name: 'edit' });
+            queueMicrotask(() => {
+                if (this.isDefaultPrevented(emittedEvents))
+                    return;
+                this.editing = true;
+            });
         };
         this.inputChange = (e) => {
             e.stopPropagation();
@@ -58,11 +66,18 @@ export class Q2EditableField {
         this.saveClick = (event) => {
             event && event.stopPropagation();
             const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;
-            mirrorEmit(this, ['change', 'tctChange'], {
-                editing: false,
-                name: 'save',
-                value: this.innerValue || valueFromInputProp,
-                formattedValue: this.formattedValue || valueFromInputProp,
+            const value = this.innerValue || valueFromInputProp;
+            const formattedValue = this.formattedValue || valueFromInputProp;
+            const emittedEvents = this.emitChangeEvents({ editing: false, name: 'save', value, formattedValue });
+            queueMicrotask(() => {
+                if (this.isDefaultPrevented(emittedEvents))
+                    return;
+                if (this.hasErrors) {
+                    this.inputElement.focus();
+                    return;
+                }
+                this.value = value;
+                this.editing = false;
             });
         };
     }
@@ -81,29 +96,6 @@ export class Q2EditableField {
     }
     // #endregion
     // #region Listeners
-    onHostElementChange(event) {
-        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange)
-            return;
-        queueMicrotask(() => {
-            switch (event.detail.name) {
-                case 'save':
-                    if (this.hasErrors) {
-                        this.inputElement.focus();
-                        break;
-                    }
-                    this.value = event.detail.value;
-                    this.editing = event.detail.editing;
-                    break;
-                case 'cancel':
-                    this.inputElement.value = this.value;
-                    this.editing = event.detail.editing;
-                    break;
-                case 'edit':
-                    this.editing = event.detail.editing;
-                    break;
-            }
-        });
-    }
     delegateFocus(event) {
         if (!isEventFromElement(event, this.hostElement))
             return;
@@ -172,6 +164,8 @@ export class Q2EditableField {
     observesEditing(newValue, oldValue) {
         if (newValue === oldValue)
             return;
+        if (!newValue)
+            this.discardDraft();
         this.scheduledAfterRender.push(this.hostElement.focus);
     }
     errorsObserver() {
@@ -199,6 +193,23 @@ 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)];
+    }
     generateEditStateDOM() {
         return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: this.hasHints ? this.hints : undefined, errors: this.hasErrors ? this.errors : undefined, type: this.type, disabled: this.disabled, _updateValueOnInput: false, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.inputInput, onTctChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
     }
@@ -208,10 +219,13 @@ export class Q2EditableField {
         }
         return (h("div", { class: this.wrapperClass, hidden: this.editing }, h("div", { class: "text-wrapper" }, this.formattedValue || this.value), h("q2-btn", { ref: el => (this.editBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.editClick }, h("q2-icon", { type: "edit" }))));
     }
+    isDefaultPrevented(events) {
+        return this.hostElement.onchange != null || events.some(event => event.defaultPrevented);
+    }
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'bd200b48458ec6c7cb6c6928a1758420dbca66e3' }, 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"; }
@@ -357,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,
@@ -394,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
                         }],
@@ -530,7 +550,7 @@ export class Q2EditableField {
                             "name": "deprecated",
                             "text": "Use 'tctChange' instead"
                         }],
-                    "text": "Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n\nThe event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'."
+                    "text": "Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n\nThe event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n\nCall `event.preventDefault()` to prevent the default behavior (the component's internal `editing` and `value` updates)."
                 },
                 "complexType": {
                     "original": "{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }",
@@ -566,7 +586,7 @@ export class Q2EditableField {
                             "name": "info",
                             "text": "If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event."
                         }],
-                    "text": "Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n\nThe event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'."
+                    "text": "Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n\nThe event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n\nCall `event.preventDefault()` to prevent the default behavior (the component's internal `editing` and `value` updates)."
                 },
                 "complexType": {
                     "original": "{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }",
@@ -685,12 +705,6 @@ export class Q2EditableField {
     }
     static get listeners() {
         return [{
-                "name": "change",
-                "method": "onHostElementChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
                 "name": "focus",
                 "method": "delegateFocus",
                 "target": 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.css

@@ -230,6 +230,7 @@ button {
  * @prop --tct-file-picker-item-close-btn-border-radius: (<length-percentage>) Controls the corner radius of the file item close button.
  * @prop --tct-file-picker-item-close-btn-size: (<length>) Controls the width and height of the file item close button.
  * @prop --tct-file-picker-list-max-height: (<length-percentage>) Controls the maximum height of the file list container before scrolling.
+ * @prop --tct-file-picker-list-gradient-height: (<length-percentage>) Controls the height of the fade indicating more files are available below the visible list.
  * @prop --tct-file-picker-scrollbar-color: (<color>) Controls the scrollbar thumb color of the file list container.
  * @prop --tct-file-picker-loading-size: (<length>) Controls the font size driving the picker-level loading spinner.
  * @prop --tct-file-picker-loading-file-color: (<color>) Controls the text color of the loading-file message.
@@ -357,6 +358,28 @@ button {
   white-space: nowrap;
 }
 
+.file-name-header {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.file-name-leading {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-name-trailing {
+  direction: rtl;
+  flex: 0 0 auto;
+  max-width: 50%;
+  overflow: hidden;
+}
+
 .file-item-loading {
   /* stylelint-disable-next-line tecton/require-t-px-fallback */
   font-size: var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));
@@ -375,6 +398,10 @@ button {
   scrollbar-width: thin;
   scrollbar-color: var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent;
 }
+.file-list-container.more-files {
+  -webkit-mask-image: linear-gradient(to bottom, currentColor calc(100% - var(--tct-file-picker-list-gradient-height, var(--app-scale-12x, 60px))), transparent 100%);
+  mask-image: linear-gradient(to bottom, currentColor calc(100% - var(--tct-file-picker-list-gradient-height, var(--app-scale-12x, 60px))), transparent 100%);
+}
 
 .file-picker {
   display: flex;