@vonage/vivid 4.23.0 → 4.25.0

package/shared/definition26.js

@@ -1,16 +1,17 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
-import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { a as WithFeedback, f as feedbackMessageDefinition } from './mixins.js';
 import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { F as FormAssociated } from './form-associated.js';
+import { W as WithErrorText } from './with-error-text.js';
+import { F as FormElement } from './form-element.js';
 import { L as Localized } from './localized.js';
-import { a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2138,34 +2139,15 @@ function $3ed269f2f0fb224b$var$__guardMethod__(obj, methodName, transform) {
     else return undefined;
 }
 
-class _FilePicker extends VividElement {
-}
-class FormAssociatedFilePicker extends FormAssociated(_FilePicker) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
 const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
 const generateFilePreviewTemplate = (buttonTag, iconTag, locale) => {
   return `<div class="dz-preview dz-file-preview">
@@ -2180,13 +2162,13 @@ const generateFilePreviewTemplate = (buttonTag, iconTag, locale) => {
   <${buttonTag} class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed" aria-label="${locale.filePicker.removeFileLabel}"></${buttonTag}>
 </div>`;
 };
-let FilePicker = class extends DelegatesAria(
-  Localized(FormAssociatedFilePicker)
+class FilePicker extends WithFeedback(
+  WithErrorText(
+    FormElement(DelegatesAria(Localized(FormAssociated(VividElement))))
+  )
 ) {
   constructor() {
     super();
-    __privateAdd(this, _FilePicker_instances);
-    __privateAdd(this, _dropzone);
     this.singleFile = false;
     this.maxFileSize = 256;
     /**
@@ -2206,7 +2188,7 @@ let FilePicker = class extends DelegatesAria(
      * Used internally to hold the tag that icon is registered at.
      */
     this.iconTag = "vwc-icon";
-    __privateAdd(this, _localizeErrorMessage, (file, message) => {
+    this.#localizeErrorMessage = (file, message) => {
       if (file.previewElement) {
         file.previewElement.classList.add("dz-error");
         if (typeof message !== "string" && message.error) {
@@ -2215,15 +2197,21 @@ let FilePicker = class extends DelegatesAria(
         for (const node of file.previewElement.querySelectorAll(
           "[data-dz-errormessage]"
         )) {
-          node.textContent = __privateMethod(this, _FilePicker_instances, formatNumbersInMessage_fn).call(this, message);
+          node.textContent = this.#formatNumbersInMessage(message);
         }
       }
-    });
-    __privateAdd(this, _localizeFileSizeNumberAndUnits, () => {
-      __privateGet(this, _dropzone).filesize = (size) => {
-        return __privateMethod(this, _FilePicker_instances, formatNumbersInMessage_fn).call(this, $3ed269f2f0fb224b$export$2e2bcd8739ae039.prototype.filesize.call(__privateGet(this, _dropzone), size));
+    };
+    this.#localizeFileSizeNumberAndUnits = () => {
+      this.#dropzone.filesize = (size) => {
+        return this.#formatNumbersInMessage(
+          $3ed269f2f0fb224b$export$2e2bcd8739ae039.prototype.filesize.call(this.#dropzone, size)
+        );
       };
-    });
+    };
+    /**
+     * @internal
+     */
+    this.proxy = document.createElement("input");
     this.setFormValue = (value, state) => {
       if (isFormAssociatedTryingToSetFormValueToFakePath(value)) {
         return;
@@ -2232,13 +2220,14 @@ let FilePicker = class extends DelegatesAria(
     };
     $3ed269f2f0fb224b$export$2e2bcd8739ae039.autoDiscover = false;
   }
+  #dropzone;
   /**
    * Files that have been added to the file picker and passed validation.
    *
    * @public
    */
   get files() {
-    return __privateGet(this, _dropzone)?.getAcceptedFiles() ?? [];
+    return this.#dropzone?.getAcceptedFiles() ?? [];
   }
   /**
    * Files that have been rejected by the file picker for failing validation.
@@ -2246,45 +2235,71 @@ let FilePicker = class extends DelegatesAria(
    * @public
    */
   get rejectedFiles() {
-    return __privateGet(this, _dropzone)?.getRejectedFiles() ?? [];
+    return this.#dropzone?.getRejectedFiles() ?? [];
+  }
+  #syncSingleFileState() {
+    if (this.singleFile) {
+      this.#dropzone?.hiddenFileInput?.removeAttribute("multiple");
+    } else {
+      this.#dropzone?.hiddenFileInput?.setAttribute("multiple", "multiple");
+    }
   }
   singleFileChanged() {
-    __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this);
+    this.#syncSingleFileState();
   }
   maxFilesChanged(_oldValue, newValue) {
-    if (!__privateGet(this, _dropzone)) {
+    if (!this.#dropzone) {
       return;
     }
-    __privateGet(this, _dropzone).options.maxFiles = newValue;
-    __privateMethod(this, _FilePicker_instances, updateHiddenFileInput_fn).call(this);
+    this.#dropzone.options.maxFiles = newValue;
+    this.#updateHiddenFileInput();
   }
   maxFileSizeChanged(_oldValue, newValue) {
-    if (!__privateGet(this, _dropzone)) {
+    if (!this.#dropzone) {
       return;
     }
-    __privateGet(this, _dropzone).options.maxFilesize = newValue;
+    this.#dropzone.options.maxFilesize = newValue;
   }
   acceptChanged(_oldValue, newValue) {
-    if (!__privateGet(this, _dropzone)) {
+    if (!this.#dropzone) {
       return;
     }
-    __privateGet(this, _dropzone).options.acceptedFiles = newValue;
+    this.#dropzone.options.acceptedFiles = newValue;
   }
   invalidFileTypeErrorChanged(_oldValue, newValue) {
-    if (__privateGet(this, _dropzone))
-      __privateGet(this, _dropzone).options.dictInvalidFileType = newValue || this.locale.filePicker.invalidFileTypeError;
+    if (this.#dropzone)
+      this.#dropzone.options.dictInvalidFileType = newValue || this.locale.filePicker.invalidFileTypeError;
   }
   maxFilesExceededErrorChanged(_oldValue, newValue) {
-    if (__privateGet(this, _dropzone))
-      __privateGet(this, _dropzone).options.dictMaxFilesExceeded = newValue || this.locale.filePicker.maxFilesExceededError;
+    if (this.#dropzone)
+      this.#dropzone.options.dictMaxFilesExceeded = newValue || this.locale.filePicker.maxFilesExceededError;
   }
   fileTooBigErrorChanged(_oldValue, newValue) {
-    if (__privateGet(this, _dropzone))
-      __privateGet(this, _dropzone).options.dictFileTooBig = newValue || this.locale.filePicker.fileTooBigError;
+    if (this.#dropzone)
+      this.#dropzone.options.dictFileTooBig = newValue || this.locale.filePicker.fileTooBigError;
   }
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
-    __privateMethod(this, _FilePicker_instances, updateFormValue_fn).call(this);
+    this.#updateFormValue();
+  }
+  #localizeErrorMessage;
+  #localizeFileSizeNumberAndUnits;
+  #addRemoveButtonToFilesPreview() {
+    this.#dropzone.on("addedfiles", (files) => {
+      for (const file of files) {
+        if (file.previewElement) {
+          const removeButton = file.previewElement.querySelector(
+            ".remove-btn"
+          );
+          removeButton.addEventListener("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.#dropzone.removeFile(file);
+          });
+        }
+      }
+      this.#handleFilesChanged();
+    });
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2294,7 +2309,7 @@ let FilePicker = class extends DelegatesAria(
     const previewList = this.shadowRoot.querySelector(
       ".preview-list"
     );
-    __privateSet(this, _dropzone, new $3ed269f2f0fb224b$export$2e2bcd8739ae039(control, {
+    this.#dropzone = new $3ed269f2f0fb224b$export$2e2bcd8739ae039(control, {
       url: "/",
       // dummy url, we do not use dropzone's upload functionality
       maxFiles: this.maxFiles ?? null,
@@ -2312,18 +2327,18 @@ let FilePicker = class extends DelegatesAria(
       dictInvalidFileType: this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError,
       dictMaxFilesExceeded: this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError,
       dictFileTooBig: this.fileTooBigError || this.locale.filePicker.fileTooBigError,
-      error: __privateGet(this, _localizeErrorMessage)
-    }));
-    __privateGet(this, _localizeFileSizeNumberAndUnits).call(this);
-    __privateMethod(this, _FilePicker_instances, addRemoveButtonToFilesPreview_fn).call(this);
-    __privateGet(this, _dropzone).on("removedfile", () => {
-      __privateMethod(this, _FilePicker_instances, handleFilesChanged_fn).call(this);
+      error: this.#localizeErrorMessage
+    });
+    this.#localizeFileSizeNumberAndUnits();
+    this.#addRemoveButtonToFilesPreview();
+    this.#dropzone.on("removedfile", () => {
+      this.#handleFilesChanged();
     });
-    __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this);
+    this.#syncSingleFileState();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    __privateGet(this, _dropzone).destroy();
+    this.#dropzone.destroy();
   }
   /**
    * Used internally to set the button tag.
@@ -2344,126 +2359,104 @@ let FilePicker = class extends DelegatesAria(
    */
   handleKeydown(e) {
     if (e.key === "Enter" || e.key === " ") {
-      __privateMethod(this, _FilePicker_instances, chooseFile_fn).call(this);
+      this.#chooseFile();
     }
     return true;
   }
-  validate() {
-    super.validate(this.control);
+  #chooseFile() {
+    if (this.#dropzone.hiddenFileInput) {
+      this.#dropzone.hiddenFileInput.click();
+    }
   }
-  formResetCallback() {
-    super.formResetCallback();
-    __privateGet(this, _dropzone).removeAllFiles();
+  #updateHiddenFileInput() {
+    this.#dropzone.hiddenFileInput.dispatchEvent(
+      new Event("change", { bubbles: false })
+    );
   }
-  /**
-   * Removes all files from the File Picker.
-   */
-  removeAllFiles() {
-    __privateGet(this, _dropzone)?.removeAllFiles();
+  #keepOnlyNewestFile() {
+    for (let i = 0; i < this.files.length - 1; i++) {
+      this.#dropzone.removeFile(this.files[i]);
+    }
   }
-};
-_dropzone = new WeakMap();
-_FilePicker_instances = new WeakSet();
-syncSingleFileState_fn = function() {
-  if (this.singleFile) {
-    __privateGet(this, _dropzone)?.hiddenFileInput?.removeAttribute("multiple");
-  } else {
-    __privateGet(this, _dropzone)?.hiddenFileInput?.setAttribute("multiple", "multiple");
+  #handleFilesChanged() {
+    if (this.singleFile && this.files.length >= 1) {
+      this.#keepOnlyNewestFile();
+    }
+    this.$emit("change");
+    this.#updateFormValue();
+    this.validate();
+    requestAnimationFrame(() => this.#syncSingleFileState());
   }
-};
-_localizeErrorMessage = new WeakMap();
-_localizeFileSizeNumberAndUnits = new WeakMap();
-addRemoveButtonToFilesPreview_fn = function() {
-  __privateGet(this, _dropzone).on("addedfiles", (files) => {
-    for (const file of files) {
-      if (file.previewElement) {
-        const removeButton = file.previewElement.querySelector(
-          ".remove-btn"
-        );
-        removeButton.addEventListener("click", (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          __privateGet(this, _dropzone).removeFile(file);
-        });
+  #updateFormValue() {
+    const files = this.files;
+    if (!this.name) {
+      this.setFormValue(null);
+    } else {
+      const formData = new FormData();
+      for (const file of files) {
+        formData.append(this.name, file);
       }
+      this.setFormValue(formData);
     }
-    __privateMethod(this, _FilePicker_instances, handleFilesChanged_fn).call(this);
-  });
-};
-chooseFile_fn = function() {
-  if (__privateGet(this, _dropzone).hiddenFileInput) {
-    __privateGet(this, _dropzone).hiddenFileInput.click();
+    this.#setValueToAFakePathLikeNativeInput();
   }
-};
-updateHiddenFileInput_fn = function() {
-  __privateGet(this, _dropzone).hiddenFileInput.dispatchEvent(
-    new Event("change", { bubbles: false })
-  );
-};
-keepOnlyNewestFile_fn = function() {
-  for (let i = 0; i < this.files.length - 1; i++) {
-    __privateGet(this, _dropzone).removeFile(this.files[i]);
+  #setValueToAFakePathLikeNativeInput() {
+    this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
   }
-};
-handleFilesChanged_fn = function() {
-  if (this.singleFile && this.files.length >= 1) {
-    __privateMethod(this, _FilePicker_instances, keepOnlyNewestFile_fn).call(this);
+  #getCustomValidationError() {
+    if (this.rejectedFiles.length > 0) {
+      return this.locale.filePicker.invalidFilesError;
+    }
+    return null;
   }
-  this.$emit("change");
-  __privateMethod(this, _FilePicker_instances, updateFormValue_fn).call(this);
-  requestAnimationFrame(() => __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this));
-};
-updateFormValue_fn = function() {
-  const files = this.files;
-  if (!this.name) {
-    this.setFormValue(null);
-  } else {
-    const formData = new FormData();
-    for (const file of files) {
-      formData.append(this.name, file);
-    }
-    this.setFormValue(formData);
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+  validate() {
+    if (this.proxy) {
+      this.proxy.setCustomValidity(this.#getCustomValidationError() ?? "");
+    }
+    super.validate(this.control);
   }
-  __privateMethod(this, _FilePicker_instances, setValueToAFakePathLikeNativeInput_fn).call(this);
-};
-setValueToAFakePathLikeNativeInput_fn = function() {
-  this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
-};
-formatNumbersInMessage_fn = function(message) {
-  if (this.locale.common.useCommaAsDecimalSeparator) {
-    return message.replace(/(\d+)\.(\d+)/g, "$1,$2");
+  formResetCallback() {
+    super.formResetCallback();
+    this.#dropzone.removeAllFiles();
   }
-  return message;
-};
+  #formatNumbersInMessage(message) {
+    if (this.locale.common.useCommaAsDecimalSeparator) {
+      return message.replace(/(\d+)\.(\d+)/g, "$1,$2");
+    }
+    return message;
+  }
+  /**
+   * Removes all files from the File Picker.
+   */
+  removeAllFiles() {
+    this.#dropzone?.removeAllFiles();
+  }
+}
 __decorateClass([
   attr({ attribute: "single-file", mode: "boolean" })
-], FilePicker.prototype, "singleFile", 2);
+], FilePicker.prototype, "singleFile");
 __decorateClass([
   attr({ attribute: "max-files" })
-], FilePicker.prototype, "maxFiles", 2);
+], FilePicker.prototype, "maxFiles");
 __decorateClass([
   attr({ mode: "fromView", attribute: "max-file-size" })
-], FilePicker.prototype, "maxFileSize", 2);
+], FilePicker.prototype, "maxFileSize");
 __decorateClass([
   attr
-], FilePicker.prototype, "accept", 2);
+], FilePicker.prototype, "accept");
 __decorateClass([
   attr
-], FilePicker.prototype, "size", 2);
+], FilePicker.prototype, "size");
 __decorateClass([
   attr({ attribute: "invalid-file-type-error" })
-], FilePicker.prototype, "invalidFileTypeError", 2);
+], FilePicker.prototype, "invalidFileTypeError");
 __decorateClass([
   attr({ attribute: "max-files-exceeded-error" })
-], FilePicker.prototype, "maxFilesExceededError", 2);
+], FilePicker.prototype, "maxFilesExceededError");
 __decorateClass([
   attr({ attribute: "file-too-big-error" })
-], FilePicker.prototype, "fileTooBigError", 2);
-FilePicker = __decorateClass([
-  errorText,
-  formElements
-], FilePicker);
-applyMixinsWithObservables(FilePicker, FormElementHelperText);
+], FilePicker.prototype, "fileTooBigError");
 
 const getClasses = ({ size }) => classNames("control", "dz-default", "dz-message", [
   `size-${size}`,
@@ -2480,18 +2473,21 @@ const FilePickerTemplate = (context) => {
     (x) => x.label,
     html`<label>${(x) => x.label}</label>`
   )}
-			<div
-				${ref("control")}
-				class="${getClasses}"
-				tabindex="0"
-				@keydown="${(x, c) => x.handleKeydown(c.event)}"
-				${delegateAria({
+			<div class="control-wrapper">
+				<div
+					${ref("control")}
+					class="${getClasses}"
+					tabindex="0"
+					@keydown="${(x, c) => x.handleKeydown(c.event)}"
+					aria-describedby="${(x) => x._feedbackDescribedBy}"
+					${delegateAria({
     role: "button"
   })}
-			>
-				<slot class="main"></slot>
+				>
+					<slot class="main"></slot>
+				</div>
+				${(x) => x._getFeedbackTemplate(context)}
 			</div>
-			${getFeedbackTemplate(context)}
 			<div class="preview-list"></div>
 		</div>
 	`;
@@ -2501,7 +2497,7 @@ const filePickerDefinition = defineVividComponent(
   "file-picker",
   FilePicker,
   FilePickerTemplate,
-  [iconDefinition, buttonDefinition],
+  [iconDefinition, buttonDefinition, feedbackMessageDefinition],
   {
     styles,
     shadowOptions: {

package/shared/definition27.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('./definition64.cjs');
+const definition = require('./definition65.cjs');
 const vividElement = require('./vivid-element.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');

package/shared/definition27.js

@@ -1,5 +1,5 @@
-import { E as Elevation, e as elevationDefinition } from './definition64.js';
-import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { E as Elevation, e as elevationDefinition } from './definition65.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition28.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
+const definition = require('./definition66.cjs');
 const _has = require('./_has.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
@@ -243,6 +244,9 @@ __decorateClass([
 __decorateClass([
   vividElement.observable
 ], Icon.prototype, "iconLoaded", 2);
+__decorateClass([
+  vividElement.attr
+], Icon.prototype, "label", 2);
 __decorateClass([
   vividElement.attr
 ], Icon.prototype, "name", 2);
@@ -255,24 +259,35 @@ const getClasses = ({ connotation, size }) => classNames.classNames(
   [`connotation-${connotation}`, Boolean(connotation)],
   [`size-${size}`, typeof size === "number"]
 );
-const iconTemplate = vividElement.html`
-	<figure class="${getClasses}" ?aria-busy="${(x) => !x.iconLoaded}">
-		<slot>
-			${when.when(
-  (x) => !x.iconLoaded,
-  vividElement.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
-)}
-			${when.when(
-  (x) => x.iconLoaded && x._svg,
-  (x) => vividElement.html`${x._svg}`
-)}
-		</slot>
-	</figure>
-`;
+const iconTemplate = (context) => {
+  const visuallyHiddenTag = context.tagFor(definition.VisuallyHidden);
+  const isDecorative = (x) => !x.label || x.label.trim().length === 0;
+  return vividElement.html`
+		<figure class="${getClasses}" ?aria-hidden="${(x) => isDecorative(x)}" ?aria-busy="${(x) => !x.iconLoaded}">
+			<slot>
+				${when.when(
+    (x) => !x.iconLoaded,
+    vividElement.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+  )}
+				${when.when(
+    (x) => x.iconLoaded && x._svg,
+    (x) => vividElement.html`${x._svg}`
+  )}
+			</slot>
+			<${visuallyHiddenTag} class="label">${(x) => x.label}</${visuallyHiddenTag}>
+		</figure>
+	`;
+};
 
-const iconDefinition = vividElement.defineVividComponent("icon", Icon, iconTemplate, [], {
-  styles
-});
+const iconDefinition = vividElement.defineVividComponent(
+  "icon",
+  Icon,
+  iconTemplate,
+  [definition.visuallyHiddenDefinition],
+  {
+    styles
+  }
+);
 const registerIcon = vividElement.createRegisterFunction(iconDefinition);
 
 exports.Icon = Icon;

package/shared/definition28.js

@@ -1,4 +1,5 @@
-import { V as VividElement, a as attr, o as observable, v as volatile, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VisuallyHidden, v as visuallyHiddenDefinition } from './definition66.js';
 import { _ as _curry1, a as _curry2, b as _has } from './_has.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
@@ -241,6 +242,9 @@ __decorateClass([
 __decorateClass([
   observable
 ], Icon.prototype, "iconLoaded", 2);
+__decorateClass([
+  attr
+], Icon.prototype, "label", 2);
 __decorateClass([
   attr
 ], Icon.prototype, "name", 2);
@@ -253,24 +257,35 @@ const getClasses = ({ connotation, size }) => classNames(
   [`connotation-${connotation}`, Boolean(connotation)],
   [`size-${size}`, typeof size === "number"]
 );
-const iconTemplate = html`
-	<figure class="${getClasses}" ?aria-busy="${(x) => !x.iconLoaded}">
-		<slot>
-			${when(
-  (x) => !x.iconLoaded,
-  html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
-)}
-			${when(
-  (x) => x.iconLoaded && x._svg,
-  (x) => html`${x._svg}`
-)}
-		</slot>
-	</figure>
-`;
+const iconTemplate = (context) => {
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
+  const isDecorative = (x) => !x.label || x.label.trim().length === 0;
+  return html`
+		<figure class="${getClasses}" ?aria-hidden="${(x) => isDecorative(x)}" ?aria-busy="${(x) => !x.iconLoaded}">
+			<slot>
+				${when(
+    (x) => !x.iconLoaded,
+    html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+  )}
+				${when(
+    (x) => x.iconLoaded && x._svg,
+    (x) => html`${x._svg}`
+  )}
+			</slot>
+			<${visuallyHiddenTag} class="label">${(x) => x.label}</${visuallyHiddenTag}>
+		</figure>
+	`;
+};
 
-const iconDefinition = defineVividComponent("icon", Icon, iconTemplate, [], {
-  styles
-});
+const iconDefinition = defineVividComponent(
+  "icon",
+  Icon,
+  iconTemplate,
+  [visuallyHiddenDefinition],
+  {
+    styles
+  }
+);
 const registerIcon = createRegisterFunction(iconDefinition);
 
 export { Icon as I, iconDefinition as i, memoizeWith as m, registerIcon as r };