q2-tecton-elements 1.71.2 → 1.72.0

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

@@ -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: '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" }))));
     }
     static get is() { return "q2-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,15 +21,26 @@ 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.innerValue = undefined;
+                this.formattedValue = undefined;
+                this.inputElement.value = '';
+                this.inputElement.value = this.defaultValue;
+                this.inputElement.value = this.value;
+                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 +69,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 +99,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;
@@ -199,6 +194,9 @@ export class Q2EditableField {
     get wrapperClass() {
         return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
     }
+    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 +206,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: '73dfc2198007dc7366243914bb055db3f8ebda3a' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     static get is() { return "q2-editable-field"; }
     static get encapsulation() { return "shadow"; }
@@ -530,7 +531,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 +567,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 +686,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-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;

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

@@ -24,6 +24,12 @@ export class Q2FilePicker {
          * The size of the browse button.
          */
         this.buttonSize = 'medium';
+        /**
+         * When `false`, the file name renders as-is and may wrap. Otherwise, long
+         * file names are middle-ellipsized so the beginning and end of the name
+         * remain visible.
+         */
+        this.ellipsizeFileName = true;
         /**
          * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or
          * 'jpg, png, pdf'). When using the attribute, provide a comma-separated
@@ -39,6 +45,10 @@ export class Q2FilePicker {
          * The maximum size (in bytes) of any file that can be selected.
          */
         this.maxFileSize = Infinity;
+        /**
+         * Shows a gradient at the bottom of the file list when more files are available below the visible area.
+         */
+        this.showGradient = true;
         /**
          * An array of `ValidFileStatus` objects representing the upload status of
          * files. Each `ValidFileStatus` object contains the following properties:
@@ -85,14 +95,21 @@ export class Q2FilePicker {
             this.disableEvent(e);
             this.isDropZoneHighlighted = true;
         };
+        this.updateFileListGradient = () => {
+            if (!this.fileListContainer)
+                return;
+            const { clientHeight, scrollHeight, scrollTop } = this.fileListContainer;
+            const hasMoreFiles = this.showGradient && scrollHeight > clientHeight && Math.ceil(scrollTop) + clientHeight < scrollHeight;
+            this.fileListContainer.classList.toggle('more-files', hasMoreFiles);
+        };
         // #endregion
         // #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", { 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" }, h("q2-list", { class: "file-list" }, 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: "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' ||
                 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" }))), h("div", { slot: "header" }, file.file.name), 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" }))))))))));
+                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" }))))))))));
         };
     }
     /**
@@ -116,7 +133,29 @@ export class Q2FilePicker {
         console.error('Setting the value of this component directly is not allowed.');
     }
     // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        var _a;
+        (_a = this.fileListResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    componentDidLoad() {
+        if (typeof ResizeObserver !== 'function')
+            return;
+        this.fileListResizeObserver = new ResizeObserver(this.updateFileListGradient);
+        this.observeFileListContent();
+    }
+    componentDidRender() {
+        this.observeFileListContent();
+        this.updateFileListGradient();
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(this.updateFileListGradient);
+        }
+    }
+    // #endregion
     // #region Watchers
+    updateGradientVisibility() {
+        this.updateFileListGradient();
+    }
     updateFileList(newValue) {
         newValue.forEach(statusItem => {
             const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);
@@ -166,6 +205,11 @@ export class Q2FilePicker {
     get hasLabelSlotContent() {
         return hasSlotContent(this.el, 'label');
     }
+    get isMobileViewport() {
+        return typeof window !== 'undefined' && window.matchMedia
+            ? window.matchMedia('(max-width: 479px)').matches
+            : false;
+    }
     buildFilesObject(filesToUpload) {
         const invalidFiles = [];
         invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));
@@ -300,6 +344,15 @@ export class Q2FilePicker {
     launchFileBrowser() {
         this.browseButtonInput.dispatchEvent(new MouseEvent('click'));
     }
+    observeFileListContent() {
+        if (!this.fileListResizeObserver || !this.fileList)
+            return;
+        this.fileListResizeObserver.disconnect();
+        this.fileListResizeObserver.observe(this.fileList);
+        this.fileList.querySelectorAll('q2-item').forEach(fileItem => {
+            this.fileListResizeObserver.observe(fileItem);
+        });
+    }
     static get is() { return "q2-file-picker"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
@@ -375,6 +428,26 @@ export class Q2FilePicker {
                 "reflect": true,
                 "attribute": "disabled"
             },
+            "ellipsizeFileName": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `false`, the file name renders as-is and may wrap. Otherwise, long\nfile names are middle-ellipsized so the beginning and end of the name\nremain visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "ellipsize-file-name",
+                "defaultValue": "true"
+            },
             "fileTypes": {
                 "type": "string",
                 "mutable": false,
@@ -457,6 +530,26 @@ export class Q2FilePicker {
                 "attribute": "max-file-size",
                 "defaultValue": "Infinity"
             },
+            "showGradient": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a gradient at the bottom of the file list when more files are available below the visible area."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-gradient",
+                "defaultValue": "true"
+            },
             "status": {
                 "type": "unknown",
                 "mutable": false,
@@ -571,6 +664,9 @@ export class Q2FilePicker {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "showGradient",
+                "methodName": "updateGradientVisibility"
+            }, {
                 "propName": "status",
                 "methodName": "updateFileList"
             }];

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

@@ -102,3 +102,25 @@ test.describe(`q2-file-picker — scaled font size × themes`, () => {
         }
     }
 });
+test('q2-file-picker--scrollable-file-list--resting — default-2026', async ({ page }) => {
+    await setupPage(page, '<q2-file-picker file-types="pdf" max-files="1"></q2-file-picker>', {
+        theme: 'default-2026',
+        setupLoc: true,
+    });
+    await page.evaluate(() => {
+        const filePicker = document.querySelector('q2-file-picker');
+        const input = filePicker.shadowRoot.querySelector('[test-id="file-input"]');
+        const files = new DataTransfer();
+        for (let index = 0; index < 6; index += 1) {
+            files.items.add(new File(['content'], `file-${index}.txt`, { type: 'text/plain' }));
+        }
+        input.files = files.files;
+        input.dispatchEvent(new Event('change'));
+    });
+    await expect(page.locator('.file-list-container.more-files')).toHaveCount(1);
+    await expect(page).toHaveScreenshot('q2-file-picker--scrollable-file-list--resting--default-2026.png');
+    await page.locator('q2-file-picker').evaluate((filePicker) => {
+        filePicker.showGradient = false;
+    });
+    await expect(page.locator('.file-list-container.more-files')).toHaveCount(0);
+});

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

@@ -167,6 +167,7 @@ button {
  * @prop --tct-input-count-width: (<length-percentage>) Controls the width of the character-count indicator.
  * @prop --tct-input-icon-stroke-primary: (<color>) Controls the primary stroke color of icons rendered inside the input.
  * @prop --tct-input-icon-stroke-secondary: (<color>) Controls the secondary stroke color of icons rendered inside the input.
+ * @prop --tct-input-icon-size: (<length>) Controls the size of icons rendered inside the input.
  * @prop --tct-input-icon-container-font-size?: (<length-percentage>) Controls the optional font size of content inside the input icon containers.
  * @prop --tct-input-icon-container-icon-min-width: (<length>) Controls the minimum width of icon slots inside the input icon containers.
  * @prop --tct-input-icon-container-empty-display: (<custom-ident>) Controls the display value of icon containers when empty.
@@ -194,6 +195,7 @@ button {
   display: block;
   margin: var(--tct-input-margin, var(--comp-default-input-margin));
   font-size: var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)));
+  letter-spacing: inherit;
 }
 
 :host([hidden]) {
@@ -210,7 +212,7 @@ button {
 }
 .field-container.is-small .btn-clear {
   --tct-btn-icon-width: 20px;
-  --tct-icon-size: 17px;
+  --tct-icon-size: var(--tct-input-icon-size, var(--const-px-18, 18px));
 }
 
 .input-label {
@@ -344,6 +346,58 @@ button {
   -webkit-text-fill-color: var(--tct-input-autofill-font-color, var(--t-text, inherit));
 }
 
+.standard-input-container {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+
+.visible-last-count-value {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding: var(--tct-input-padding, 0);
+  color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
+  font-weight: var(--tct-input-font-weight, var(--t-input-font-weight, 400));
+  font-family: var(--tct-input-visible-last-count-font-family, monospace);
+  letter-spacing: var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));
+  pointer-events: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.visible-last-count-content {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  transform: translateX(calc(var(--tct-input-visible-last-count-scroll-left, 0px) * -1));
+}
+
+.visible-last-count-character {
+  display: inline-grid;
+  flex: 0 0 auto;
+}
+.visible-last-count-character::before {
+  content: attr(data-character);
+  grid-area: 1/1;
+  visibility: hidden;
+}
+
+.visible-last-count-visible-value {
+  flex: 0 0 auto;
+}
+
+.visible-last-count-mask {
+  grid-area: 1/1;
+  justify-self: center;
+  transform: translateY(var(--tct-input-visible-last-count-mask-translate-y, 0));
+}
+
 .input-field {
   flex: 1;
   border: 0;
@@ -365,6 +419,14 @@ button {
   /* To remove up/down arrow in number field for webkit based browser */
   /* For Firefox */
 }
+.input-field.has-visible-last-count {
+  position: relative;
+  z-index: 1;
+  color: transparent;
+  caret-color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, auto)));
+  -webkit-text-fill-color: transparent;
+  font-family: var(--tct-input-visible-last-count-font-family, monospace);
+}
 .input-field:focus {
   outline: none;
   box-shadow: none;
@@ -441,6 +503,7 @@ button {
 
 .input-icons-container-left,
 .input-icons-container-right {
+  --tct-icon-size: var(--tct-input-icon-size, var(--const-px-18, 18px));
   --tct-btn-icon-hover-background: var(--tct-input-btn-hover-background);
   --tct-btn-hover-background: var(--tct-input-btn-hover-background);
   display: flex;
@@ -553,6 +616,9 @@ q2-icon {
   color: var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));
   border-radius: var(--tct-message-border-radius, var(--app-border-radius-1, inherit));
 }
+.messages-container li:only-child {
+  list-style: none;
+}
 
 .has-error label {
   color: var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))));