@vaadin/upload 24.8.0-alpha8 → 25.0.0-alpha1

package/README.md

@@ -28,29 +28,6 @@ Once installed, import the component in your application:
 import '@vaadin/upload';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/upload/vaadin-upload.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/upload/theme/material/vaadin-upload.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/upload/theme/lumo/vaadin-upload.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/upload/src/vaadin-upload.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,24 +31,21 @@
     "Vaadin",
     "upload",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha8",
-    "@vaadin/button": "24.8.0-alpha8",
-    "@vaadin/component-base": "24.8.0-alpha8",
-    "@vaadin/progress-bar": "24.8.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-alpha1",
+    "@vaadin/button": "25.0.0-alpha1",
+    "@vaadin/component-base": "25.0.0-alpha1",
+    "@vaadin/progress-bar": "25.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha8",
-    "@vaadin/test-runner-commands": "24.8.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-alpha1",
+    "@vaadin/test-runner-commands": "25.0.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -56,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
+  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
 }

package/src/vaadin-upload-file-list.js

@@ -4,8 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-upload-file.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
 
@@ -18,28 +19,32 @@ import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
  * @mixes UploadFileListMixin
  * @private
  */
-class UploadFileList extends UploadFileListMixin(ThemableMixin(PolymerElement)) {
+class UploadFileList extends UploadFileListMixin(ThemableMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-upload-file-list';
   }
 
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
 
-        :host([hidden]) {
-          display: none !important;
-        }
+      :host([hidden]) {
+        display: none !important;
+      }
 
-        [part='list'] {
-          padding: 0;
-          margin: 0;
-          list-style-type: none;
-        }
-      </style>
+      [part='list'] {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
       <ul part="list">
         <slot></slot>
       </ul>

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

@@ -3,7 +3,6 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
 
@@ -70,7 +69,7 @@ export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCusto
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class UploadFile extends UploadFileMixin(ThemableMixin(ControllerMixin(HTMLElement))) {
+declare class UploadFile extends UploadFileMixin(ThemableMixin(HTMLElement)) {
   addEventListener<K extends keyof UploadFileEventMap>(
     type: K,
     listener: (this: UploadFile, ev: UploadFileEventMap[K]) => void,

package/src/vaadin-upload-file.js

@@ -5,15 +5,13 @@
  */
 import '@vaadin/progress-bar/src/vaadin-progress-bar.js';
 import './vaadin-upload-icons.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { html, LitElement, nothing } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
 import { uploadFileStyles } from './vaadin-upload-file-styles.js';
 
-registerStyles('vaadin-upload-file', uploadFileStyles, { moduleId: 'vaadin-upload-file-styles' });
-
 /**
  * `<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.
  *
@@ -52,22 +50,30 @@ registerStyles('vaadin-upload-file', uploadFileStyles, { moduleId: 'vaadin-uploa
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes UploadFileMixin
  * @mixes ThemableMixin
  */
-class UploadFile extends UploadFileMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
-  static get template() {
+class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-upload-file';
+  }
+
+  static get styles() {
+    return uploadFileStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div part="row">
         <div part="info">
-          <div part="done-icon" hidden$="[[!complete]]" aria-hidden="true"></div>
-          <div part="warning-icon" hidden$="[[!errorMessage]]" aria-hidden="true"></div>
+          <div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
+          <div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>
 
           <div part="meta">
-            <div part="name" id="name">[[fileName]]</div>
-            <div part="status" hidden$="[[!status]]" id="status">[[status]]</div>
-            <div part="error" id="error" hidden$="[[!errorMessage]]">[[errorMessage]]</div>
+            <div part="name" id="name">${this.fileName}</div>
+            <div part="status" ?hidden="${!this.status}" id="status">${this.status}</div>
+            <div part="error" id="error" ?hidden="${!this.errorMessage}">${this.errorMessage}</div>
           </div>
         </div>
         <div part="commands">
@@ -75,29 +81,29 @@ class UploadFile extends UploadFileMixin(ThemableMixin(ControllerMixin(PolymerEl
             type="button"
             part="start-button"
             file-event="file-start"
-            on-click="_fireFileEvent"
-            hidden$="[[!held]]"
-            disabled$="[[disabled]]"
-            aria-label$="[[i18n.file.start]]"
+            @click="${this._fireFileEvent}"
+            ?hidden="${!this.held}"
+            ?disabled="${this.disabled}"
+            aria-label="${this.i18n ? this.i18n.file.start : nothing}"
             aria-describedby="name"
           ></button>
           <button
             type="button"
             part="retry-button"
             file-event="file-retry"
-            on-click="_fireFileEvent"
-            hidden$="[[!errorMessage]]"
-            disabled$="[[disabled]]"
-            aria-label$="[[i18n.file.retry]]"
+            @click="${this._fireFileEvent}"
+            ?hidden="${!this.errorMessage}"
+            ?disabled="${this.disabled}"
+            aria-label="${this.i18n ? this.i18n.file.retry : nothing}"
             aria-describedby="name"
           ></button>
           <button
             type="button"
             part="remove-button"
             file-event="file-abort"
-            on-click="_fireFileEvent"
-            disabled$="[[disabled]]"
-            aria-label$="[[i18n.file.remove]]"
+            @click="${this._fireFileEvent}"
+            ?disabled="${this.disabled}"
+            aria-label="${this.i18n ? this.i18n.file.remove : nothing}"
             aria-describedby="name"
           ></button>
         </div>
@@ -107,10 +113,6 @@ class UploadFile extends UploadFileMixin(ThemableMixin(ControllerMixin(PolymerEl
     `;
   }
 
-  static get is() {
-    return 'vaadin-upload-file';
-  }
-
   /**
    * Fired when the retry button is pressed. It is listened by `vaadin-upload`
    * which will start a new upload process of this file.

package/src/vaadin-upload-icon.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -14,24 +14,27 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @extends HTMLElement
  * @private
  */
-class UploadIcon extends ThemableMixin(PolymerElement) {
+class UploadIcon extends ThemableMixin(LitElement) {
   static get is() {
     return 'vaadin-upload-icon';
   }
 
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-block;
-        }
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
 
-        :host([hidden]) {
-          display: none !important;
-        }
-      </style>
+      :host([hidden]) {
+        display: none !important;
+      }
     `;
   }
+
+  /** @protected */
+  render() {
+    return html``;
+  }
 }
 
 defineCustomElement(UploadIcon);

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
 
 export interface UploadFile extends File {
   uploadTarget: string;
@@ -25,47 +26,51 @@ export interface UploadFile extends File {
 }
 
 export interface UploadI18n {
-  dropFiles: {
-    one: string;
-    many: string;
+  dropFiles?: {
+    one?: string;
+    many?: string;
   };
-  addFiles: {
-    one: string;
-    many: string;
+  addFiles?: {
+    one?: string;
+    many?: string;
   };
-  error: {
-    tooManyFiles: string;
-    fileIsTooBig: string;
-    incorrectFileType: string;
+  error?: {
+    tooManyFiles?: string;
+    fileIsTooBig?: string;
+    incorrectFileType?: string;
   };
-  uploading: {
-    status: {
-      connecting: string;
-      stalled: string;
-      processing: string;
-      held: string;
+  uploading?: {
+    status?: {
+      connecting?: string;
+      stalled?: string;
+      processing?: string;
+      held?: string;
     };
-    remainingTime: {
-      prefix: string;
-      unknown: string;
+    remainingTime?: {
+      prefix?: string;
+      unknown?: string;
     };
-    error: {
-      serverUnavailable: string;
-      unexpectedServerError: string;
-      forbidden: string;
+    error?: {
+      serverUnavailable?: string;
+      unexpectedServerError?: string;
+      forbidden?: string;
     };
   };
-  units: {
-    size: string[];
+  units?: {
+    size?: string[];
     sizeBase?: number;
   };
+
   formatSize?(bytes: number): string;
+
   formatTime?(seconds: number, units: number[]): string;
 }
 
 export type UploadMethod = 'POST' | 'PUT';
 
-export declare function UploadMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<UploadMixinClass> & T;
+export declare function UploadMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<UploadMixinClass> & Constructor<I18nMixinClass<UploadI18n>> & T;
 
 export declare class UploadMixinClass {
   /**
@@ -190,9 +195,9 @@ export declare class UploadMixinClass {
   capture: string | null | undefined;
 
   /**
-   * The object used to localize this component.
-   * For changing the default localization, change the entire
-   * _i18n_ object or just the property you want to modify.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following JSON structure and default values:
    *