@vonage/vivid 4.23.0 → 4.25.0

package/shared/definition24.js

@@ -1,10 +1,10 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
-import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 
-const styles = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-empty-state-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-dim: var(--vvd-empty-state-cta-dim, var(--vvd-color-cta-200));--_connotation-color-faint: var(--vvd-empty-state-cta-faint, var(--vvd-color-cta-50))}.base.connotation-success{--_connotation-color-firm-all: var(--vvd-empty-state-success-firm-all, var(--vvd-color-success-600));--_connotation-color-dim: var(--vvd-empty-state-success-dim, var(--vvd-color-success-200));--_connotation-color-faint: var(--vvd-empty-state-success-faint, var(--vvd-color-success-50))}.base.connotation-alert{--_connotation-color-firm-all: var(--vvd-empty-state-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-dim: var(--vvd-empty-state-alert-dim, var(--vvd-color-alert-200));--_connotation-color-faint: var(--vvd-empty-state-alert-faint, var(--vvd-color-alert-50))}.base.connotation-warning{--_connotation-color-firm-all: var(--vvd-empty-state-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-dim: var(--vvd-empty-state-warning-dim, var(--vvd-color-warning-200));--_connotation-color-faint: var(--vvd-empty-state-warning-faint, var(--vvd-color-warning-50))}.base.connotation-information{--_connotation-color-firm-all: var(--vvd-empty-state-information-firm-all, var(--vvd-color-information-600));--_connotation-color-dim: var(--vvd-empty-state-information-dim, var(--vvd-color-information-200));--_connotation-color-faint: var(--vvd-empty-state-information-faint, var(--vvd-color-information-50))}.base.connotation-announcement{--_connotation-color-firm-all: var(--vvd-empty-state-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-dim: var(--vvd-empty-state-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-faint: var(--vvd-empty-state-announcement-faint, var(--vvd-color-announcement-50))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all: var(--vvd-empty-state-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-dim: var(--vvd-empty-state-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-faint: var(--vvd-empty-state-accent-faint, var(--vvd-color-neutral-50))}.base{--_empty-state-icon-container: 120px;--_empty-state-icon-background: var(--_connotation-color-faint);--_empty-state-icon-font-size: 52px;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container)}.icon-decoration-outlined .icon-container{--_empty-state-icon-background: transparent;--_empty-state-icon-font-size: 40px;box-shadow:inset 0 0 0 21px var(--_connotation-color-faint)}.icon-container .icon{color:var(--_connotation-color-firm-all)}.icon-decoration-outlined .icon-container .icon{padding:19px;border:1px solid var(--_connotation-color-dim);border-radius:inherit}.content{display:flex;flex-direction:column;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);gap:8px;text-align:center}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
+const styles = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-empty-state-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-dim: var(--vvd-empty-state-cta-dim, var(--vvd-color-cta-200));--_connotation-color-faint: var(--vvd-empty-state-cta-faint, var(--vvd-color-cta-50))}.base.connotation-success{--_connotation-color-firm-all: var(--vvd-empty-state-success-firm-all, var(--vvd-color-success-600));--_connotation-color-dim: var(--vvd-empty-state-success-dim, var(--vvd-color-success-200));--_connotation-color-faint: var(--vvd-empty-state-success-faint, var(--vvd-color-success-50))}.base.connotation-alert{--_connotation-color-firm-all: var(--vvd-empty-state-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-dim: var(--vvd-empty-state-alert-dim, var(--vvd-color-alert-200));--_connotation-color-faint: var(--vvd-empty-state-alert-faint, var(--vvd-color-alert-50))}.base.connotation-warning{--_connotation-color-firm-all: var(--vvd-empty-state-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-dim: var(--vvd-empty-state-warning-dim, var(--vvd-color-warning-200));--_connotation-color-faint: var(--vvd-empty-state-warning-faint, var(--vvd-color-warning-50))}.base.connotation-information{--_connotation-color-firm-all: var(--vvd-empty-state-information-firm-all, var(--vvd-color-information-600));--_connotation-color-dim: var(--vvd-empty-state-information-dim, var(--vvd-color-information-200));--_connotation-color-faint: var(--vvd-empty-state-information-faint, var(--vvd-color-information-50))}.base.connotation-announcement{--_connotation-color-firm-all: var(--vvd-empty-state-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-dim: var(--vvd-empty-state-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-faint: var(--vvd-empty-state-announcement-faint, var(--vvd-color-announcement-50))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all: var(--vvd-empty-state-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-dim: var(--vvd-empty-state-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-faint: var(--vvd-empty-state-accent-faint, var(--vvd-color-neutral-50))}.base{--_empty-state-icon-container: 120px;--_empty-state-icon-background: var(--_connotation-color-faint);--_empty-state-icon-font-size: 52px;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px var(--_connotation-color-faint);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background: transparent;--_empty-state-icon-font-size: 40px}.icon-container .icon{padding:19px;border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all)}.content{display:flex;flex-direction:column;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);gap:8px;text-align:center}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -33,14 +33,9 @@ __decorateClass([
   observable
 ], EmptyState.prototype, "slottedActionItems");
 
-const getClasses = ({
-  connotation,
-  iconDecoration,
-  slottedActionItems
-}) => classNames(
+const getClasses = ({ connotation, slottedActionItems }) => classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
-  [`icon-decoration-${iconDecoration}`, Boolean(iconDecoration)],
   ["no-actions", slottedActionItems?.length === 0]
 );
 const EmptyStateTemplate = (context) => {

package/shared/definition25.js

@@ -1,5 +1,5 @@
 import { i as iconDefinition } from './definition28.js';
-import { a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { V as VividFoundationButton } from './button.js';
 import { d as delegateAria } from './delegates-aria.js';

package/shared/definition26.cjs

@@ -3,16 +3,17 @@
 const definition$1 = require('./definition28.cjs');
 const definition = require('./definition11.cjs');
 const vividElement = require('./vivid-element.cjs');
-const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
+const mixins = require('./mixins.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 const formAssociated = require('./form-associated.cjs');
+const withErrorText = require('./with-error-text.cjs');
+const formElement = require('./form-element.cjs');
 const localized = require('./localized.cjs');
-const formElements = require('./form-elements.cjs');
 const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-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;
 
@@ -2140,34 +2141,15 @@ function $3ed269f2f0fb224b$var$__guardMethod__(obj, methodName, transform) {
     else return undefined;
 }
 
-class _FilePicker extends vividElement.VividElement {
-}
-class FormAssociatedFilePicker extends formAssociated.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">
@@ -2182,13 +2164,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>`;
 };
-exports.FilePicker = class FilePicker extends delegatesAria.DelegatesAria(
-  localized.Localized(FormAssociatedFilePicker)
+class FilePicker extends mixins.WithFeedback(
+  withErrorText.WithErrorText(
+    formElement.FormElement(delegatesAria.DelegatesAria(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+  )
 ) {
   constructor() {
     super();
-    __privateAdd(this, _FilePicker_instances);
-    __privateAdd(this, _dropzone);
     this.singleFile = false;
     this.maxFileSize = 256;
     /**
@@ -2208,7 +2190,7 @@ exports.FilePicker = class FilePicker extends delegatesAria.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) {
@@ -2217,15 +2199,21 @@ exports.FilePicker = class FilePicker extends delegatesAria.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;
@@ -2234,13 +2222,14 @@ exports.FilePicker = class FilePicker extends delegatesAria.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.
@@ -2248,45 +2237,71 @@ exports.FilePicker = class FilePicker extends delegatesAria.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();
@@ -2296,7 +2311,7 @@ exports.FilePicker = class FilePicker extends delegatesAria.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,
@@ -2314,18 +2329,18 @@ exports.FilePicker = class FilePicker extends delegatesAria.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.
@@ -2346,126 +2361,104 @@ exports.FilePicker = class FilePicker extends delegatesAria.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([
   vividElement.attr({ attribute: "single-file", mode: "boolean" })
-], exports.FilePicker.prototype, "singleFile", 2);
+], FilePicker.prototype, "singleFile");
 __decorateClass([
   vividElement.attr({ attribute: "max-files" })
-], exports.FilePicker.prototype, "maxFiles", 2);
+], FilePicker.prototype, "maxFiles");
 __decorateClass([
   vividElement.attr({ mode: "fromView", attribute: "max-file-size" })
-], exports.FilePicker.prototype, "maxFileSize", 2);
+], FilePicker.prototype, "maxFileSize");
 __decorateClass([
   vividElement.attr
-], exports.FilePicker.prototype, "accept", 2);
+], FilePicker.prototype, "accept");
 __decorateClass([
   vividElement.attr
-], exports.FilePicker.prototype, "size", 2);
+], FilePicker.prototype, "size");
 __decorateClass([
   vividElement.attr({ attribute: "invalid-file-type-error" })
-], exports.FilePicker.prototype, "invalidFileTypeError", 2);
+], FilePicker.prototype, "invalidFileTypeError");
 __decorateClass([
   vividElement.attr({ attribute: "max-files-exceeded-error" })
-], exports.FilePicker.prototype, "maxFilesExceededError", 2);
+], FilePicker.prototype, "maxFilesExceededError");
 __decorateClass([
   vividElement.attr({ attribute: "file-too-big-error" })
-], exports.FilePicker.prototype, "fileTooBigError", 2);
-exports.FilePicker = __decorateClass([
-  formElements.errorText,
-  formElements.formElements
-], exports.FilePicker);
-applyMixinsWithObservables.applyMixinsWithObservables(exports.FilePicker, formElements.FormElementHelperText);
+], FilePicker.prototype, "fileTooBigError");
 
 const getClasses = ({ size }) => classNames.classNames("control", "dz-default", "dz-message", [
   `size-${size}`,
@@ -2482,18 +2475,21 @@ const FilePickerTemplate = (context) => {
     (x) => x.label,
     vividElement.html`<label>${(x) => x.label}</label>`
   )}
-			<div
-				${ref.ref("control")}
-				class="${getClasses}"
-				tabindex="0"
-				@keydown="${(x, c) => x.handleKeydown(c.event)}"
-				${delegatesAria.delegateAria({
+			<div class="control-wrapper">
+				<div
+					${ref.ref("control")}
+					class="${getClasses}"
+					tabindex="0"
+					@keydown="${(x, c) => x.handleKeydown(c.event)}"
+					aria-describedby="${(x) => x._feedbackDescribedBy}"
+					${delegatesAria.delegateAria({
     role: "button"
   })}
-			>
-				<slot class="main"></slot>
+				>
+					<slot class="main"></slot>
+				</div>
+				${(x) => x._getFeedbackTemplate(context)}
 			</div>
-			${formElements.getFeedbackTemplate(context)}
 			<div class="preview-list"></div>
 		</div>
 	`;
@@ -2501,9 +2497,9 @@ const FilePickerTemplate = (context) => {
 
 const filePickerDefinition = vividElement.defineVividComponent(
   "file-picker",
-  exports.FilePicker,
+  FilePicker,
   FilePickerTemplate,
-  [definition$1.iconDefinition, definition.buttonDefinition],
+  [definition$1.iconDefinition, definition.buttonDefinition, mixins.feedbackMessageDefinition],
   {
     styles,
     shadowOptions: {
@@ -2513,5 +2509,6 @@ const filePickerDefinition = vividElement.defineVividComponent(
 );
 const registerFilePicker = vividElement.createRegisterFunction(filePickerDefinition);
 
+exports.FilePicker = FilePicker;
 exports.filePickerDefinition = filePickerDefinition;
 exports.registerFilePicker = registerFilePicker;