@vaadin/upload 24.6.0-alpha7 → 24.6.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "24.6.0-alpha7",
+  "version": "24.6.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -37,17 +37,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.6.0-alpha7",
-    "@vaadin/button": "24.6.0-alpha7",
-    "@vaadin/component-base": "24.6.0-alpha7",
-    "@vaadin/progress-bar": "24.6.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha7",
-    "@vaadin/vaadin-material-styles": "24.6.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha7",
+    "@vaadin/a11y-base": "24.6.0-alpha8",
+    "@vaadin/button": "24.6.0-alpha8",
+    "@vaadin/component-base": "24.6.0-alpha8",
+    "@vaadin/progress-bar": "24.6.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha8",
+    "@vaadin/vaadin-material-styles": "24.6.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha7",
+    "@vaadin/chai-plugins": "24.6.0-alpha8",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "675d6fe0a08b8cc63ac00140c63f28fc3f52e4ea"
+  "gitHead": "a11e1510c4caa08775b202714f5fc1198c22132a"
 }

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

@@ -51,6 +51,7 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LitElement))
             file-event="file-start"
             @click="${this._fireFileEvent}"
             ?hidden="${!this.held}"
+            ?disabled="${this.disabled}"
             aria-label="${this.i18n.file.start}"
             aria-describedby="name"
           ></button>
@@ -60,6 +61,7 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LitElement))
             file-event="file-retry"
             @click="${this._fireFileEvent}"
             ?hidden="${!this.errorMessage}"
+            ?disabled="${this.disabled}"
             aria-label="${this.i18n.file.retry}"
             aria-describedby="name"
           ></button>
@@ -68,6 +70,7 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LitElement))
             part="remove-button"
             file-event="file-abort"
             @click="${this._fireFileEvent}"
+            ?disabled="${this.disabled}"
             aria-label="${this.i18n.file.remove}"
             aria-describedby="name"
           ></button>

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

@@ -25,11 +25,20 @@ export const UploadFileListMixin = (superClass) =>
         i18n: {
           type: Object,
         },
+
+        /**
+         * If true, the user cannot interact with this element.
+         */
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
       };
     }
 
     static get observers() {
-      return ['__updateItems(items, i18n)'];
+      return ['__updateItems(items, i18n, disabled)'];
     }
 
     /** @private */
@@ -45,7 +54,7 @@ export const UploadFileListMixin = (superClass) =>
      * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
      */
     requestContentUpdate() {
-      const { items, i18n } = this;
+      const { items, i18n, disabled } = this;
 
       render(
         html`
@@ -53,6 +62,7 @@ export const UploadFileListMixin = (superClass) =>
             (file) => html`
               <li>
                 <vaadin-upload-file
+                  .disabled="${disabled}"
                   .file="${file}"
                   .complete="${file.complete}"
                   .errorMessage="${file.error}"

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

@@ -19,6 +19,11 @@ export declare function UploadFileMixin<T extends Constructor<HTMLElement>>(
 ): Constructor<FocusMixinClass> & Constructor<UploadFileMixinClass> & T;
 
 export declare class UploadFileMixinClass {
+  /**
+   * If true, the user cannot interact with this element.
+   */
+  disabled: boolean;
+
   /**
    * True if uploading is completed, false otherwise.
    */

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

@@ -14,6 +14,15 @@ export const UploadFileMixin = (superClass) =>
   class UploadFileMixin extends FocusMixin(superClass) {
     static get properties() {
       return {
+        /**
+         * If true, the user cannot interact with this element.
+         */
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
         /**
          * True if uploading is completed, false otherwise.
          */
@@ -91,7 +100,6 @@ export const UploadFileMixin = (superClass) =>
         tabindex: {
           type: Number,
           value: 0,
-          reflectToAttribute: true,
         },
 
         /**
@@ -111,7 +119,7 @@ export const UploadFileMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['__updateProgress(_progress, progress, indeterminate)'];
+      return ['__updateTabindex(tabindex, disabled)', '__updateProgress(_progress, progress, indeterminate)'];
     }
 
     /** @protected */
@@ -154,11 +162,29 @@ export const UploadFileMixin = (superClass) =>
       return event.composedPath()[0] === this;
     }
 
+    /** @private */
+    __disabledChanged(disabled) {
+      if (disabled) {
+        this.removeAttribute('tabindex');
+      } else {
+        this.setAttribute('tabindex', this.tabindex);
+      }
+    }
+
     /** @private */
     _errorMessageChanged(errorMessage) {
       this.toggleAttribute('error', Boolean(errorMessage));
     }
 
+    /** @private */
+    __updateTabindex(tabindex, disabled) {
+      if (disabled) {
+        this.removeAttribute('tabindex');
+      } else {
+        this.setAttribute('tabindex', tabindex);
+      }
+    }
+
     /** @private */
     __updateProgress(progress, value, indeterminate) {
       if (progress) {

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

@@ -60,6 +60,7 @@ export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCusto
  *
  * Attribute        | Description
  * -----------------|-------------
+ * `disabled`       | Set when the element is disabled
  * `focus-ring`     | Set when the element is focused using the keyboard.
  * `focused`        | Set when the element is focused.
  * `error`          | An error has happened during uploading.

package/src/vaadin-upload-file.js

@@ -40,6 +40,7 @@ registerStyles('vaadin-upload-file', uploadFileStyles, { moduleId: 'vaadin-uploa
  *
  * Attribute        | Description
  * -----------------|-------------
+ * `disabled`       | Set when the element is disabled
  * `focus-ring`     | Set when the element is focused using the keyboard.
  * `focused`        | Set when the element is focused.
  * `error`          | An error has happened during uploading.
@@ -76,6 +77,7 @@ class UploadFile extends UploadFileMixin(ThemableMixin(ControllerMixin(PolymerEl
             file-event="file-start"
             on-click="_fireFileEvent"
             hidden$="[[!held]]"
+            disabled$="[[disabled]]"
             aria-label$="[[i18n.file.start]]"
             aria-describedby="name"
           ></button>
@@ -85,6 +87,7 @@ class UploadFile extends UploadFileMixin(ThemableMixin(ControllerMixin(PolymerEl
             file-event="file-retry"
             on-click="_fireFileEvent"
             hidden$="[[!errorMessage]]"
+            disabled$="[[disabled]]"
             aria-label$="[[i18n.file.retry]]"
             aria-describedby="name"
           ></button>
@@ -93,6 +96,7 @@ class UploadFile extends UploadFileMixin(ThemableMixin(ControllerMixin(PolymerEl
             part="remove-button"
             file-event="file-abort"
             on-click="_fireFileEvent"
+            disabled$="[[disabled]]"
             aria-label$="[[i18n.file.remove]]"
             aria-describedby="name"
           ></button>

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

@@ -68,6 +68,11 @@ export type UploadMethod = 'POST' | 'PUT';
 export declare function UploadMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<UploadMixinClass> & T;
 
 export declare class UploadMixinClass {
+  /**
+   * If true, the user cannot interact with this element.
+   */
+  disabled: boolean;
+
   /**
    * Define whether the element supports dropping files on it for uploading.
    * By default it's enabled in desktop and disabled in touch devices

package/src/vaadin-upload-mixin.js

@@ -67,6 +67,16 @@ export const UploadMixin = (superClass) =>
   class UploadMixin extends superClass {
     static get properties() {
       return {
+        /**
+         * If true, the user cannot interact with this element.
+         * @type {boolean}
+         */
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
         /**
          * Define whether the element supports dropping files on it for uploading.
          * By default it's enabled in desktop and disabled in touch devices
@@ -392,9 +402,9 @@ export const UploadMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__updateAddButton(_addButton, maxFiles, i18n, maxFilesReached)',
+        '__updateAddButton(_addButton, maxFiles, i18n, maxFilesReached, disabled)',
         '__updateDropLabel(_dropLabel, maxFiles, i18n)',
-        '__updateFileList(_fileList, files, i18n)',
+        '__updateFileList(_fileList, files, i18n, disabled)',
         '__updateMaxFilesReached(maxFiles, files)',
       ];
     }
@@ -512,9 +522,9 @@ export const UploadMixin = (superClass) =>
     }
 
     /** @private */
-    __updateAddButton(addButton, maxFiles, i18n, maxFilesReached) {
+    __updateAddButton(addButton, maxFiles, i18n, maxFilesReached, disabled) {
       if (addButton) {
-        addButton.disabled = maxFilesReached;
+        addButton.disabled = disabled || maxFilesReached;
 
         // Only update text content for the default button element
         if (addButton === this._addButtonController.defaultNode) {
@@ -532,10 +542,11 @@ export const UploadMixin = (superClass) =>
     }
 
     /** @private */
-    __updateFileList(list, files, i18n) {
+    __updateFileList(list, files, i18n, disabled) {
       if (list) {
         list.items = [...files];
         list.i18n = i18n;
+        list.disabled = disabled;
       }
     }
 
@@ -543,7 +554,7 @@ export const UploadMixin = (superClass) =>
     _onDragover(event) {
       event.preventDefault();
       if (!this.nodrop && !this._dragover) {
-        this._dragoverValid = !this.maxFilesReached;
+        this._dragoverValid = !this.maxFilesReached && !this.disabled;
         this._dragover = true;
       }
       event.dataTransfer.dropEffect = !this._dragoverValid || this.nodrop ? 'none' : 'copy';
@@ -559,7 +570,7 @@ export const UploadMixin = (superClass) =>
 
     /** @private */
     async _onDrop(event) {
-      if (!this.nodrop) {
+      if (!this.nodrop && !this.disabled) {
         event.preventDefault();
         this._dragover = this._dragoverValid = false;
 

package/src/vaadin-upload.d.ts

@@ -134,6 +134,7 @@ export interface UploadEventMap extends HTMLElementEventMap, UploadCustomEventMa
  *
  * Attribute | Description | Part name
  * ---|---|---
+ * `disabled` | Set when the element is disabled | `:host`
  * `nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`
  * `dragover` | A file is being dragged over the element | `:host`
  * `dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`

package/src/vaadin-upload.js

@@ -36,6 +36,7 @@ import { UploadMixin } from './vaadin-upload-mixin.js';
  *
  * Attribute | Description | Part name
  * ---|---|---
+ * `disabled` | Set when the element is disabled | `:host`
  * `nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`
  * `dragover` | A file is being dragged over the element | `:host`
  * `dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`

package/theme/lumo/vaadin-upload-styles.js

@@ -46,6 +46,7 @@ registerStyles(
       color: var(--lumo-primary-text-color);
     }
 
+    :host([disabled]) [part='drop-label'],
     :host([max-files-reached]) [part='drop-label'] {
       color: var(--lumo-disabled-text-color);
     }

package/theme/material/vaadin-upload-styles.js

@@ -45,6 +45,7 @@ registerStyles(
       color: var(--material-primary-text-color);
     }
 
+    :host([disabled]) [part='drop-label'],
     :host([max-files-reached]) [part='drop-label'] {
       color: var(--material-disabled-text-color);
     }
@@ -179,6 +180,10 @@ registerStyles(
       color: inherit;
     }
 
+    [part$='button'][disabled] {
+      color: var(--material-disabled-text-color);
+    }
+
     [part='done-icon']::before {
       content: var(--material-icons-check);
       color: var(--material-primary-text-color);
@@ -201,7 +206,7 @@ registerStyles(
       content: var(--material-icons-clear);
     }
 
-    [part$='button']::after {
+    [part$='button']:not([disabled])::after {
       position: absolute;
       content: '';
       top: 0;

package/web-types.json

@@ -1,15 +1,26 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "24.6.0-alpha7",
+  "version": "24.6.0-alpha8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-upload-file",
-          "description": "`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------\n`row`            | File container\n`info`           | Container for file status icon, file name, status and error messages\n`done-icon`      | File done status icon\n`warning-icon`   | File warning status icon\n`meta`           | Container for file name, status and error messages\n`name`           | File name\n`error`          | Error message, shown when error happens\n`status`         | Status message\n`commands`       | Container for file command buttons\n`start-button`   | Start file upload button\n`retry-button`   | Retry file upload button\n`remove-button`  | Remove file button\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|-------------\n`focus-ring`     | Set when the element is focused using the keyboard.\n`focused`        | Set when the element is focused.\n`error`          | An error has happened during uploading.\n`indeterminate`  | Uploading is in progress, but the progress value is unknown.\n`uploading`      | Uploading is in progress.\n`complete`       | Uploading has finished successfully.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------\n`row`            | File container\n`info`           | Container for file status icon, file name, status and error messages\n`done-icon`      | File done status icon\n`warning-icon`   | File warning status icon\n`meta`           | Container for file name, status and error messages\n`name`           | File name\n`error`          | Error message, shown when error happens\n`status`         | Status message\n`commands`       | Container for file command buttons\n`start-button`   | Start file upload button\n`retry-button`   | Retry file upload button\n`remove-button`  | Remove file button\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|-------------\n`disabled`       | Set when the element is disabled\n`focus-ring`     | Set when the element is focused using the keyboard.\n`focused`        | Set when the element is focused.\n`error`          | An error has happened during uploading.\n`indeterminate`  | Uploading is in progress, but the progress value is unknown.\n`uploading`      | Uploading is in progress.\n`complete`       | Uploading has finished successfully.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "complete",
               "description": "True if uploading is completed, false otherwise.",
@@ -112,6 +123,17 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "complete",
                 "description": "True if uploading is completed, false otherwise.",
@@ -241,8 +263,17 @@
         },
         {
           "name": "vaadin-upload",
-          "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```\n<vaadin-upload></vaadin-upload>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name          | Description\n-------------------|-------------------------------------\n`primary-buttons`  | Upload container\n`drop-label`       | Element wrapping drop label and icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n---|---|---\n`nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`\n`dragover` | A file is being dragged over the element | `:host`\n`dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`\n`max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```\n<vaadin-upload></vaadin-upload>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name          | Description\n-------------------|-------------------------------------\n`primary-buttons`  | Upload container\n`drop-label`       | Element wrapping drop label and icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n---|---|---\n`disabled` | Set when the element is disabled | `:host`\n`nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`\n`dragover` | A file is being dragged over the element | `:host`\n`dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`\n`max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "nodrop",
               "description": "Define whether the element supports dropping files on it for uploading.\nBy default it's enabled in desktop and disabled in touch devices\nbecause mobile devices do not support drag events in general. Setting\nit false means that drop is enabled even in touch-devices, and true\ndisables drop in all devices.",
@@ -358,6 +389,15 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
               {
                 "name": "nodrop",
                 "description": "Define whether the element supports dropping files on it for uploading.\nBy default it's enabled in desktop and disabled in touch devices\nbecause mobile devices do not support drag events in general. Setting\nit false means that drop is enabled even in touch-devices, and true\ndisables drop in all devices.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "24.6.0-alpha7",
+  "version": "24.6.0-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,9 +16,16 @@
       "elements": [
         {
           "name": "vaadin-upload-file",
-          "description": "`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------\n`row`            | File container\n`info`           | Container for file status icon, file name, status and error messages\n`done-icon`      | File done status icon\n`warning-icon`   | File warning status icon\n`meta`           | Container for file name, status and error messages\n`name`           | File name\n`error`          | Error message, shown when error happens\n`status`         | Status message\n`commands`       | Container for file command buttons\n`start-button`   | Start file upload button\n`retry-button`   | Retry file upload button\n`remove-button`  | Remove file button\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|-------------\n`focus-ring`     | Set when the element is focused using the keyboard.\n`focused`        | Set when the element is focused.\n`error`          | An error has happened during uploading.\n`indeterminate`  | Uploading is in progress, but the progress value is unknown.\n`uploading`      | Uploading is in progress.\n`complete`       | Uploading has finished successfully.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------\n`row`            | File container\n`info`           | Container for file status icon, file name, status and error messages\n`done-icon`      | File done status icon\n`warning-icon`   | File warning status icon\n`meta`           | Container for file name, status and error messages\n`name`           | File name\n`error`          | Error message, shown when error happens\n`status`         | Status message\n`commands`       | Container for file command buttons\n`start-button`   | Start file upload button\n`retry-button`   | Retry file upload button\n`remove-button`  | Remove file button\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|-------------\n`disabled`       | Set when the element is disabled\n`focus-ring`     | Set when the element is focused using the keyboard.\n`focused`        | Set when the element is focused.\n`error`          | An error has happened during uploading.\n`indeterminate`  | Uploading is in progress, but the progress value is unknown.\n`uploading`      | Uploading is in progress.\n`complete`       | Uploading has finished successfully.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?complete",
               "description": "True if uploading is completed, false otherwise.",
@@ -114,9 +121,16 @@
         },
         {
           "name": "vaadin-upload",
-          "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```\n<vaadin-upload></vaadin-upload>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name          | Description\n-------------------|-------------------------------------\n`primary-buttons`  | Upload container\n`drop-label`       | Element wrapping drop label and icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n---|---|---\n`nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`\n`dragover` | A file is being dragged over the element | `:host`\n`dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`\n`max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```\n<vaadin-upload></vaadin-upload>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name          | Description\n-------------------|-------------------------------------\n`primary-buttons`  | Upload container\n`drop-label`       | Element wrapping drop label and icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n---|---|---\n`disabled` | Set when the element is disabled | `:host`\n`nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`\n`dragover` | A file is being dragged over the element | `:host`\n`dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`\n`max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?nodrop",
               "description": "Define whether the element supports dropping files on it for uploading.\nBy default it's enabled in desktop and disabled in touch devices\nbecause mobile devices do not support drag events in general. Setting\nit false means that drop is enabled even in touch-devices, and true\ndisables drop in all devices.",