@vaadin/upload 25.1.0-alpha1 → 25.1.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "25.1.0-alpha1",
+  "version": "25.1.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -34,23 +34,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.1.0-alpha1",
-    "@vaadin/button": "25.1.0-alpha1",
-    "@vaadin/component-base": "25.1.0-alpha1",
-    "@vaadin/progress-bar": "25.1.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha1",
+    "@vaadin/a11y-base": "25.1.0-alpha2",
+    "@vaadin/button": "25.1.0-alpha2",
+    "@vaadin/component-base": "25.1.0-alpha2",
+    "@vaadin/progress-bar": "25.1.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.1.0-alpha1",
-    "@vaadin/test-runner-commands": "25.1.0-alpha1",
+    "@vaadin/aura": "25.1.0-alpha2",
+    "@vaadin/chai-plugins": "25.1.0-alpha2",
+    "@vaadin/test-runner-commands": "25.1.0-alpha2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha2",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "c789cdd350bcd74b280268a83f5475ad7f2f65e1"
+  "gitHead": "dfeb6e14643ec923e5505ca645f7354c6dc170ec"
 }

package/src/styles/vaadin-upload-button-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export declare const uploadButtonStyles: CSSResult[];

package/src/styles/vaadin-upload-button-base-styles.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-base-styles.js';
+
+const uploadButton = css``;
+
+export const uploadButtonStyles = [buttonStyles, uploadButton];

package/src/styles/vaadin-upload-drop-zone-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export declare const uploadDropZoneStyles: CSSResult;

package/src/styles/vaadin-upload-drop-zone-base-styles.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const uploadDropZoneStyles = css`
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  :host([dragover])::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--vaadin-background-container);
+    opacity: 0.7;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+`;

package/src/styles/vaadin-upload-file-base-styles.js

@@ -8,7 +8,7 @@ import { css } from 'lit';
 
 export const uploadFileStyles = css`
   :host {
-    align-items: center;
+    align-items: baseline;
     display: grid;
     gap: var(--vaadin-upload-file-gap, var(--vaadin-gap-s));
     grid-template-columns: var(--vaadin-icon-size, 1lh) minmax(0, 1fr) auto;
@@ -32,8 +32,9 @@ export const uploadFileStyles = css`
 
   [part='done-icon']::before,
   [part='warning-icon']::before {
-    content: '';
-    display: inline-block;
+    content: '\\2003' / '';
+    display: inline-flex;
+    align-items: center;
     flex: none;
     height: var(--vaadin-icon-size, 1lh);
     width: var(--vaadin-icon-size, 1lh);
@@ -82,19 +83,25 @@ export const uploadFileStyles = css`
     line-height: var(--vaadin-upload-file-error-line-height, inherit);
   }
 
+  [part='commands'] {
+    display: flex;
+    align-items: center;
+    gap: var(--vaadin-gap-xs);
+    height: var(--vaadin-icon-size, 1lh);
+    align-self: center;
+  }
+
   button {
     background: var(--vaadin-upload-file-button-background, transparent);
-    border: var(--vaadin-upload-file-button-border-width, 1px) solid
-      var(--vaadin-upload-file-button-border-color, transparent);
+    border: var(--vaadin-upload-file-button-border-width, 0) solid
+      var(--vaadin-upload-file-button-border-color, var(--vaadin-border-color-secondary));
     border-radius: var(--vaadin-upload-file-button-border-radius, var(--vaadin-radius-m));
     color: var(--vaadin-upload-file-button-text-color, var(--vaadin-text-color));
     cursor: var(--vaadin-clickable-cursor);
     flex-shrink: 0;
     font: inherit;
-    padding: var(
-      --vaadin-upload-file-button-padding,
-      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
-    );
+    /* Ensure minimum click target (WCAG) */
+    padding: var(--vaadin-upload-file-button-padding, max(0px, (24px - var(--vaadin-icon-size, 1lh)) / 2));
   }
 
   button:focus-visible {
@@ -105,8 +112,9 @@ export const uploadFileStyles = css`
   [part='retry-button']::before,
   [part='remove-button']::before {
     background: currentColor;
-    content: '';
-    display: block;
+    content: '\\2003' / '';
+    display: flex;
+    align-items: center;
     height: var(--vaadin-icon-size, 1lh);
     width: var(--vaadin-icon-size, 1lh);
   }

package/src/vaadin-upload-button.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { UploadManager } from './vaadin-upload-manager.js';
+
+/**
+ * `<vaadin-upload-button>` is a button component for file uploads.
+ * When clicked, it opens a file picker dialog and calls addFiles
+ * on a linked UploadManager.
+ *
+ * ```html
+ * <vaadin-upload-button>Upload Files</vaadin-upload-button>
+ * ```
+ *
+ * The button must be linked to an UploadManager by setting the
+ * `manager` property:
+ *
+ * ```javascript
+ * const button = document.querySelector('vaadin-upload-button');
+ * button.manager = uploadManager;
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ----------|-------------
+ * `label`   | The label (text) inside the button.
+ * `prefix`  | A slot for content before the label (e.g. an icon).
+ * `suffix`  | A slot for content after the label (e.g. an icon).
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute          | Description
+ * -------------------|-------------
+ * `active`           | Set when the button is pressed down, either with mouse, touch or the keyboard
+ * `disabled`         | Set when the button is disabled
+ * `focus-ring`       | Set when the button is focused using the keyboard
+ * `focused`          | Set when the button is focused
+ * `has-tooltip`      | Set when the button has a slotted tooltip
+ * `max-files-reached`| Set when the manager has reached maxFiles
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                |
+ * :----------------------------------|
+ * | `--vaadin-button-background`     |
+ * | `--vaadin-button-border-color`   |
+ * | `--vaadin-button-border-radius`  |
+ * | `--vaadin-button-border-width`   |
+ * | `--vaadin-button-font-size`      |
+ * | `--vaadin-button-font-weight`    |
+ * | `--vaadin-button-gap`            |
+ * | `--vaadin-button-height`         |
+ * | `--vaadin-button-line-height`    |
+ * | `--vaadin-button-margin`         |
+ * | `--vaadin-button-padding`        |
+ * | `--vaadin-button-text-color`     |
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ */
+declare class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+  /**
+   * Reference to an UploadManager.
+   * When set, the button will automatically disable when maxFilesReached
+   * becomes true on the manager. The file picker will also use the manager's
+   * `accept` and `maxFiles` settings.
+   */
+  manager: UploadManager | null;
+
+  /**
+   * Capture attribute for mobile file input.
+   */
+  capture: string | undefined;
+
+  /**
+   * True when max files has been reached on the manager.
+   * The button will not open the file picker when this is true.
+   */
+  maxFilesReached: boolean;
+
+  /**
+   * Opens the file picker dialog.
+   */
+  openFilePicker(): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-upload-button': UploadButton;
+  }
+}
+
+export { UploadButton };

package/src/vaadin-upload-button.js

@@ -0,0 +1,288 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { uploadButtonStyles } from './styles/vaadin-upload-button-base-styles.js';
+import { UploadManager } from './vaadin-upload-manager.js';
+
+/**
+ * `<vaadin-upload-button>` is a button component for file uploads.
+ * When clicked, it opens a file picker dialog and calls addFiles
+ * on a linked UploadManager.
+ *
+ * ```html
+ * <vaadin-upload-button>Upload Files</vaadin-upload-button>
+ * ```
+ *
+ * The button must be linked to an UploadManager by setting the
+ * `manager` property:
+ *
+ * ```javascript
+ * const button = document.querySelector('vaadin-upload-button');
+ * button.manager = uploadManager;
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ----------|-------------
+ * `label`   | The label (text) inside the button.
+ * `prefix`  | A slot for content before the label (e.g. an icon).
+ * `suffix`  | A slot for content after the label (e.g. an icon).
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute      | Description
+ * ---------------|-------------
+ * `active`       | Set when the button is pressed down, either with mouse, touch or the keyboard
+ * `disabled`     | Set when the button is disabled
+ * `focus-ring`   | Set when the button is focused using the keyboard
+ * `focused`      | Set when the button is focused
+ * `has-tooltip`  | Set when the button has a slotted tooltip
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                |
+ * :----------------------------------|
+ * | `--vaadin-button-background`     |
+ * | `--vaadin-button-border-color`   |
+ * | `--vaadin-button-border-radius`  |
+ * | `--vaadin-button-border-width`   |
+ * | `--vaadin-button-font-size`      |
+ * | `--vaadin-button-font-weight`    |
+ * | `--vaadin-button-gap`            |
+ * | `--vaadin-button-height`         |
+ * | `--vaadin-button-line-height`    |
+ * | `--vaadin-button-margin`         |
+ * | `--vaadin-button-padding`        |
+ * | `--vaadin-button-text-color`     |
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ButtonMixin
+ * @mixes ElementMixin
+ * @mixes ThemableMixin
+ */
+class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-upload-button';
+  }
+
+  static get styles() {
+    return uploadButtonStyles;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Reference to an UploadManager.
+       * When set, the button will automatically disable when maxFilesReached
+       * becomes true on the manager.
+       * @type {Object | null}
+       */
+      manager: {
+        type: Object,
+        value: null,
+        observer: '__managerChanged',
+      },
+
+      /**
+       * Capture attribute for mobile file input.
+       * @type {string}
+       */
+      capture: {
+        type: String,
+      },
+
+      /**
+       * True when max files has been reached on the manager.
+       * @type {boolean}
+       */
+      maxFilesReached: {
+        type: Boolean,
+        value: false,
+        reflect: true,
+        attribute: 'max-files-reached',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.__syncFromManager = this.__syncFromManager.bind(this);
+    this.__explicitDisabled = false;
+  }
+
+  /**
+   * Whether the button is disabled.
+   * Returns true if either explicitly disabled or maxFilesReached is true.
+   * @type {boolean}
+   * @override
+   */
+  get disabled() {
+    return super.disabled;
+  }
+
+  set disabled(value) {
+    this.__explicitDisabled = Boolean(value);
+    // Set super.disabled to effective value - this triggers Lit's property system correctly
+    super.disabled = this.__explicitDisabled || this.maxFilesReached;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div class="vaadin-button-container">
+        <span part="prefix" aria-hidden="true">
+          <slot name="prefix"></slot>
+        </span>
+        <span part="label">
+          <slot></slot>
+        </span>
+        <span part="suffix" aria-hidden="true">
+          <slot name="suffix"></slot>
+        </span>
+      </div>
+      <slot name="tooltip"></slot>
+      <input id="fileInput" type="file" hidden @change=${this.__onFileInputChange} />
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // Add tooltip support
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+
+    // Open file picker on click
+    this.addEventListener('click', () => {
+      this.openFilePicker();
+    });
+  }
+
+  /** @protected */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // Clean up manager listener to prevent memory leaks
+    if (this.manager instanceof UploadManager) {
+      this.manager.removeEventListener('max-files-reached-changed', this.__syncFromManager);
+    }
+  }
+
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Re-attach manager listener when reconnected to DOM
+    if (this.manager instanceof UploadManager) {
+      this.manager.addEventListener('max-files-reached-changed', this.__syncFromManager);
+      this.__syncFromManager();
+    }
+  }
+
+  /**
+   * Opens the file picker dialog.
+   */
+  openFilePicker() {
+    if (this.disabled) {
+      return;
+    }
+
+    // Update file input attributes before opening
+    this.__updateFileInputAttributes();
+
+    this.$.fileInput.value = '';
+    this.$.fileInput.click();
+  }
+
+  /** @private */
+  __updateFileInputAttributes() {
+    const { fileInput } = this.$;
+
+    // Set accept attribute from manager
+    const accept = this.manager && this.manager.accept;
+    if (accept) {
+      fileInput.setAttribute('accept', accept);
+    } else {
+      fileInput.removeAttribute('accept');
+    }
+
+    // Set multiple attribute based on manager's maxFiles
+    const maxFiles = this.manager && this.manager.maxFiles != null ? this.manager.maxFiles : Infinity;
+    fileInput.multiple = maxFiles !== 1;
+
+    // Set capture attribute
+    if (this.capture) {
+      fileInput.setAttribute('capture', this.capture);
+    } else {
+      fileInput.removeAttribute('capture');
+    }
+  }
+
+  /** @private */
+  __onFileInputChange(event) {
+    const files = event.target.files;
+
+    // If we have a manager, call addFiles
+    if (this.manager instanceof UploadManager) {
+      this.manager.addFiles(files);
+    }
+  }
+
+  /** @private */
+  __managerChanged(manager, oldManager) {
+    // Remove listener from old manager
+    if (oldManager instanceof UploadManager) {
+      oldManager.removeEventListener('max-files-reached-changed', this.__syncFromManager);
+    }
+
+    // Add listener to new manager and sync state only when connected
+    if (this.isConnected && manager instanceof UploadManager) {
+      manager.addEventListener('max-files-reached-changed', this.__syncFromManager);
+      this.__syncFromManager();
+    } else if (this.isConnected) {
+      // No manager - reset state
+      this.__syncFromManager();
+    }
+  }
+
+  /** @private */
+  __syncFromManager() {
+    if (this.manager instanceof UploadManager) {
+      this.maxFilesReached = this.manager.maxFilesReached;
+    } else {
+      this.maxFilesReached = false;
+    }
+
+    // Sync effective disabled state
+    const effectiveDisabled = this.__explicitDisabled || this.maxFilesReached;
+    if (super.disabled !== effectiveDisabled) {
+      super.disabled = effectiveDisabled;
+    }
+  }
+
+  /** @override */
+  __shouldAllowFocusWhenDisabled() {
+    return window.Vaadin.featureFlags.accessibleDisabledButtons;
+  }
+}
+
+defineCustomElement(UploadButton);
+
+export { UploadButton };

package/src/vaadin-upload-drop-zone.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { UploadManager } from './vaadin-upload-manager.js';
+
+/**
+ * `<vaadin-upload-drop-zone>` is a Web Component that can be used as a drop zone
+ * for file uploads. When files are dropped on the drop zone, they are added to
+ * a linked UploadManager.
+ *
+ * ```html
+ * <vaadin-upload-drop-zone>
+ *   <p>Drop files here</p>
+ * </vaadin-upload-drop-zone>
+ * ```
+ *
+ * The drop zone must be linked to an UploadManager by setting the
+ * `manager` property:
+ *
+ * ```javascript
+ * const dropZone = document.querySelector('vaadin-upload-drop-zone');
+ * dropZone.manager = uploadManager;
+ * ```
+ *
+ * ### Styling
+ *
+ * The component has no styling by default. When files are dragged over,
+ * the `dragover` attribute is set and the component uses a hover effect.
+ * To override the hover effect, use `vaadin-upload-drop-zone[dragover]::after`
+ * selector to style the pseudo-element covering the drop zone during dragover.
+ *
+ * Attribute          | Description
+ * -------------------|--------------------------------------------
+ * `dragover`         | Set when files are being dragged over the element
+ * `disabled`         | Set when the drop zone is explicitly disabled
+ * `max-files-reached`| Set when the manager has reached maxFiles
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ */
+declare class UploadDropZone extends HTMLElement {
+  /**
+   * Reference to an UploadManager.
+   * When set, dropped files will be automatically added to the manager.
+   */
+  manager: UploadManager | null;
+
+  /**
+   * Whether the drop zone is disabled.
+   */
+  disabled: boolean;
+
+  /**
+   * True when max files has been reached on the manager.
+   * The drop zone will not accept files when this is true.
+   * @readonly
+   */
+  readonly maxFilesReached: boolean;
+}
+
+interface UploadDropZone extends ElementMixinClass, ThemableMixinClass {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-upload-drop-zone': UploadDropZone;
+  }
+}
+
+export { UploadDropZone };