filepond 5.0.0-beta.2 → 5.0.0-beta.21

package/esm/elements/FilePondInput/index.js

@@ -1,43 +1,44 @@
 /*!
-* FilePond v5.0.0-beta.2
+* FilePond v5.0.0-beta.21
 * Copyright (c) 2017-2026 Pqina B.V.
 * Released under the MIT License
 * https://filepond.com
 */
 import { createExtensionManager as P } from "../../core/extensionManager.js";
-import { createEntryTree as O } from "../../core/entryTree.js";
-import { setBooleanAttribute as l, getAttribute as u, setStringAttribute as o, getFileSizeAttributeValue as d, createStyleSheet as L, h as T, getAttributeFromElements as D, removeAttributes as q, addListener as a, dispatchCustomEvent as f } from "../../utils/dom.js";
-import { isFileEntry as S, isNumber as v, isString as m, isFile as p, isObject as y, isDataTransfer as A, isDirectoryEntry as R, isBlobOrFile as M, isCanvas as _, isSafari as j } from "../../utils/test.js";
-import { anyToInt as U } from "../../utils/number.js";
-import { stringReplaceVariables as E, statusToLabel as w, statusCodeToLocaleKey as B } from "../common/string.js";
-import { toCamelCase as G, getUniqueId as $ } from "../../utils/string.js";
-import { debounce as b } from "../../utils/debounce.js";
-import { copyFilePropsToObject as F } from "../../utils/file.js";
-import { Status as H } from "../../common/status.js";
-import { HTMLElementSafe as J } from "../../common/ssr.js";
-import { getFilenameFromURL as K } from "../../utils/url.js";
-import { arrayRemoveFalsy as W } from "../../utils/array.js";
-import X from "./index.css.js";
-import { supportsURLPattern as N } from "../../utils/support.js";
-function Q() {
-  return O({
+import { createEntryTree as B } from "../../core/entryTree.js";
+import { setBooleanAttribute as l, setStringAttribute as o, getAttribute as h, getFileSizeAttributeValue as p, createStyleSheet as M, h as f, setAttributes as T, getAttributeFromElements as E, addListener as q, dispatchCustomEvent as g } from "../../utils/dom.js";
+import { isFileEntry as w, isNumber as A, isString as c, isFile as b, isObject as y, isDataTransfer as I, isDirectoryEntry as R, isBlobOrFile as D, isCanvas as _ } from "../../utils/test.js";
+import { stringReplaceVariables as u, statusToLabel as j, statusCodeToLocaleKey as U } from "../common/string.js";
+import { toCamelCase as K } from "../../utils/string.js";
+import { debounce as x } from "../../utils/debounce.js";
+import { copyFilePropsToObject as V } from "../../utils/file.js";
+import { Status as $ } from "../../common/status.js";
+import { HTMLElementSafe as G } from "../../common/ssr.js";
+import { getFilenameFromURL as H } from "../../utils/url.js";
+import { arrayRemoveFalsy as S } from "../../utils/array.js";
+import J from "./index.css.js";
+function W(r) {
+  const { beforeInsertEntries: t } = r || {};
+  return B({
+    // allows limiting the total entries added
+    beforeInsertEntries: t,
     // formats the entry so all entries in the dataset follow the same data structure
-    beforeAddEntry(r) {
-      return k(r) ? I(r) : !1;
+    beforeOnboardEntry(e) {
+      return z(e) ? C(e) : !1;
     },
     // makes modifications to the props the entry is updated with
-    beforeUpdateEntryWithProps(r, t, e) {
-      if (S(r) && e && F(t.file, t), t.extension) {
-        const i = Object.values(
-          t.extension
+    beforeUpdateEntryWithProps(e, i, s) {
+      if (w(e) && s && V(i.file, i), i.extension) {
+        const d = Object.values(
+          i.extension
         );
-        for (const { status: s } of i)
-          s && (s.values = s.values ?? null, s.progress = v(s.progress) ? s.progress : null);
+        for (const { status: a } of d)
+          a && (a.values = a.values ?? null, a.progress = A(a.progress) ? a.progress : null);
       }
     }
   });
 }
-const x = [
+const F = [
   // customError
   "customError",
   // if accept is mismatched
@@ -49,12 +50,12 @@ const x = [
   // if is required and value is missing
   "valueMissing"
 ];
-function Y(r) {
-  return m(r) || M(r) || _(r) || A(r);
+function X(r) {
+  return c(r) || D(r) || _(r) || I(r);
 }
-function k(r) {
-  if (m(r) || S(r)) {
-    const t = m(r) ? K(r) ?? "" : r.name ?? (p(r?.src) ? r.src.name : "");
+function z(r) {
+  if (c(r) || w(r)) {
+    const t = c(r) ? H(r) ?? "" : r.name ?? (b(r?.src) ? r.src.name : "");
     return ![
       /\.git/,
       /thumbs\.db/,
@@ -66,24 +67,24 @@ function k(r) {
   }
   return !0;
 }
-function I(r) {
-  const t = Y(r) ? { src: r } : { ...r };
-  if (t.state = y(t.state) ? t.state : {}, t.extension = y(t.extension) ? t.extension : {}, t.origin = t.origin ?? "api", t.containerId = t.containerId ?? null, A(t.src))
+function C(r) {
+  const t = X(r) ? { src: r } : { ...r };
+  if (t.state = y(t.state) ? t.state : {}, t.extension = y(t.extension) ? t.extension : {}, t.origin = t.origin ?? "api", t.containerId = t.containerId ?? null, I(t.src))
     return t;
   if (t.path = t.path ?? t.src?.path ?? null, R(t)) {
     const { entries: i } = t;
-    return t.entries = i.filter(k).map(I), t;
+    return t.entries = i.filter(z).map(C), t;
   }
   const e = t;
-  return e.file = e.file ?? void 0, p(e.src) && (e.file = e.src), p(e.file) && F(e.file, e), e;
+  return e.file = e.file ?? void 0, b(e.src) && (e.file = e.src), b(e.file) && V(e.file, e), e;
 }
-function Z(r) {
-  return r.some((t) => Object.values(t.extension ?? {}).some(({ status: e }) => e ? v(e.progress) : !1));
+function N(r) {
+  return r.some((t) => Object.values(t.extension ?? {}).some(({ status: e }) => e ? A(e.progress) : !1));
 }
-function tt(r, t) {
+function Q(r, t) {
   const e = Array.isArray(t) ? t : [t], i = new FormData();
   for (const s of e) {
-    if (p(s)) {
+    if (b(s)) {
       i.append(r, s, s.name);
       continue;
     }
@@ -91,48 +92,60 @@ function tt(r, t) {
   }
   return i;
 }
-const et = ["required", "name"], g = ["disabled", "multiple", "accept"], it = ["disabled", "multiple", "required"];
-class Et extends J {
+const Y = ["required", "name", "id"], v = ["disabled", "accept", "capture", "webkitdirectory"], k = ["disabled", "required", "webkitdirectory"];
+class dt extends G {
   /** FilePond element shadowRoot */
-  #o;
+  #u;
+  /** Div element that wraps styleable children */
+  #n;
   /** FilePond element slot */
+  #a;
+  /** This Has a reference to the element form internals */
   #r;
+  /** Source input */
+  #o;
+  /** Browse button */
+  #s;
   /** FilePond extension manager reference */
-  #e;
+  #i;
   /** FilePond core instance reference */
   #t;
-  /** Source input */
-  #i = null;
-  #l = null;
   /** Locale object reference */
-  #n = null;
+  #e = void 0;
+  /** Key to use for the browse button label */
+  #c = "browse";
   /** Holds Names of extensions we've currently set up proxies for */
-  #h = [];
+  #m = [];
   /**
    * Holds default entries as set by developer to .entries, we use this so we can reset to initial
    * state when reset is clicked
    */
-  #c = null;
+  #p = null;
   /** Holds references to event subscriptions so we can more easily unsub */
-  #a = [];
+  #h = [];
   //#region getters and setters for <file-pond> custom element attributes
   /** Returns a reference to the shadow root element */
   get _root() {
-    return this.#o;
+    return this.#n;
   }
   /** Returns a reference to the slot element */
   get _slot() {
-    return this.#r;
+    return this.#a;
   }
   /** Attributes being observed for changes */
   static get observedAttributes() {
     return [
+      "animations",
       "value",
-      "multiple",
       "readonly",
       "required",
-      "animations",
+      "webkitdirectory",
+      "capture",
       "accept",
+      "nobrowse",
+      //
+      // apart from 'max-files' these are convenience attributes for validation extensions
+      //
       "min-files",
       "max-files",
       "min-size",
@@ -140,7 +153,10 @@ class Et extends J {
       "min-list-size",
       "max-list-size"
       //
-      // changes to `disabled` attribute are handled by `formDisabledCallback`
+      // the root doesn't have the 'multiple' attribute it uses 'min-files' / 'max-files'
+      //
+      //
+      // changes to 'disabled' attribute are handled by `formDisabledCallback`
       //
     ];
   }
@@ -150,24 +166,34 @@ class Et extends J {
       this.value = `${i}`;
       return;
     }
-    this.#d(t, i), this.#p(t, i);
-  }
-  /** Syncs file-pond interaction attributes to source input attributes */
-  #d(t, e) {
-    !this.#i || !g.includes(t) || (this.#i[t] = e);
+    this.#f(t, i), this.#b(t, i), this.#g(t, i);
   }
-  /** Looks up the extension(s) linked to this attribute and assigns the matched props */
-  #p(t, e) {
-    const i = G(t);
-    e = it.includes(t) && e === "" ? !0 : e, this.#e.propagateExtensionProperty(i, e);
+  /** Syncs attribute to internal element state */
+  #f(t, e) {
+    if (t === "nobrowse") {
+      c(e) ? this.#s.remove() : this.#a.prepend(this.#s);
+      return;
+    }
+    if (t === "max-files") {
+      const i = parseInt(e, 10);
+      this.#t.entries.length > i && (this.#t.entries = this.#t.entries.toSpliced(i)), this.#o.multiple = i > 1, this.#l(), this.checkValidity();
+      return;
+    }
   }
-  /** Sets the inner input element id */
-  set inputId(t) {
-    this.#i.id = t;
+  /** Syncs file-pond interaction attributes (attributes that impact file system file selection UX) to source input attributes */
+  #b(t, e) {
+    if (v.includes(t)) {
+      if (k.includes(t)) {
+        l(this.#o, t, e === !0 || e === "");
+        return;
+      }
+      o(this.#o, t, e);
+    }
   }
-  /** Returns the inner input element id */
-  get inputId() {
-    return this.#i.id;
+  /** Looks up the extension(s) linked to this attribute and assigns the matched props */
+  #g(t, e) {
+    const i = K(t);
+    e = k.includes(t) && e === "" ? !0 : e, this.#i.propagateExtensionProperty(i, e);
   }
   /** Disable the field and sets the disabled attribute */
   set disabled(t) {
@@ -175,15 +201,23 @@ class Et extends J {
   }
   /** Gets the field disabled state */
   get disabled() {
-    return !!u(this, "disabled");
+    return !!h(this, "disabled");
+  }
+  /** Set the field webkitdirectory state */
+  set webkitdirectory(t) {
+    l(this, "webkitdirectory", t);
+  }
+  /** Gets the field webkitdirectory state */
+  get webkitdirectory() {
+    return !!h(this, "webkitdirectory");
   }
   /** Toggle the field multiple state */
   set multiple(t) {
-    l(this, "multiple", t);
+    t && this.maxFiles === 1 && (this.maxFiles = 1 / 0), !t && this.maxFiles !== 1 && (this.maxFiles = 1);
   }
   /** Gets the field multiple state */
   get multiple() {
-    return !!u(this, "multiple");
+    return this.maxFiles !== 1;
   }
   /**
    * Set field as readonly. Only for situations where FilePond has initial files and those files
@@ -195,7 +229,7 @@ class Et extends J {
   }
   /** Gets the field readonly state */
   get readOnly() {
-    return !!u(this, "readonly");
+    return !!h(this, "readonly");
   }
   /** Set field as required */
   set required(t) {
@@ -203,7 +237,7 @@ class Et extends J {
   }
   /** Gets the field required state */
   get required() {
-    return !!u(this, "required");
+    return !!h(this, "required");
   }
   /** Accepted files setter https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept */
   set accept(t) {
@@ -211,14 +245,23 @@ class Et extends J {
   }
   /** Returns the current value of accept */
   get accept() {
-    return u(this, "accept");
+    return h(this, "accept");
   }
   /** Setting to toggle animations */
   set animations(t) {
     o(this, "animations", t);
   }
+  /** Returns the current animation mode */
   get animations() {
-    return u(this, "animations") ?? "auto";
+    return h(this, "animations") ?? "auto";
+  }
+  /** Toggle browse button */
+  set noBrowse(t) {
+    t ? l(this, "nobrowse", !0) : l(this, "nobrowse", !1);
+  }
+  /** Returns the current browse button state */
+  get noBrowse() {
+    return !this.#s.parentNode;
   }
   /** Min file size setter, accepts a number of bytes or a natural filesize string like 1MB */
   set minSize(t) {
@@ -226,7 +269,7 @@ class Et extends J {
   }
   /** Returns the currently set min file size */
   get minSize() {
-    return d(this, "min-size");
+    return p(this, "min-size");
   }
   /** Max file size setter, accepts a number of bytes or a natural filesize string like 1MB */
   set maxSize(t) {
@@ -234,7 +277,7 @@ class Et extends J {
   }
   /** Returns the currently set max file size */
   get maxSize() {
-    return d(this, "max-size");
+    return p(this, "max-size");
   }
   /** Min total file size setter, accepta a number of bytes or a natural filesize string like 1MB */
   set minListSize(t) {
@@ -242,7 +285,7 @@ class Et extends J {
   }
   /** Returns the currently set min total file size */
   get minListSize() {
-    return d(this, "min-list-size");
+    return p(this, "min-list-size");
   }
   /** Max total file size setter, accepts a number of bytes or a natural filesize string like 1MB */
   set maxListSize(t) {
@@ -250,7 +293,7 @@ class Et extends J {
   }
   /** Returns the currently set max total file size */
   get maxListSize() {
-    return d(this, "max-list-size");
+    return p(this, "max-list-size");
   }
   /** Min total entries setter, an integer, defaults to `0` */
   set minFiles(t) {
@@ -262,7 +305,7 @@ class Et extends J {
   }
   /** Max total entries setter, an integer, defaults to `Infinity` */
   set maxFiles(t) {
-    o(this, "max-files", t);
+    t === 1 / 0 ? this.removeAttribute("max-files") : o(this, "max-files", t);
   }
   /** Returns the currently set max total entries */
   get maxFiles() {
@@ -281,18 +324,26 @@ class Et extends J {
   }
   /** Sets the locale */
   set locale(t) {
-    this.#n = t, this.#e.propagateExtensionProperty("locale", t), this.checkValidity();
+    this.#e = t, this.#i.propagateExtensionProperty("locale", t), this.#l(), this.checkValidity();
   }
   /** Returns the current locale object, so it's easier to extend */
   get locale() {
-    return this.#n;
+    return this.#e;
   }
   /** Sets custom extensions to load */
   set extensions(t) {
-    this.#e.extensions = t;
+    this.#i.extensions = t;
+  }
+  /** Update worker url */
+  set workersURL(t) {
+    this.#i.propagateExtensionProperty("workersURL", t);
   }
   //#endregion
   //#region Element methods
+  /** Browse files */
+  browse() {
+    this.noBrowse || (this.#s.focus({ preventScroll: !0 }), this.#o.click());
+  }
   /** Listen for events */
   on(t, e) {
     return this.#t.on(t, e);
@@ -334,109 +385,110 @@ class Et extends J {
   constructor(t) {
     super();
     const { styles: e = [] } = t || {};
-    this.#o = this.attachShadow({ mode: "open" }), this.#o.adoptedStyleSheets = [X, ...e].map(L), this.#r = document.createElement("slot"), this.#o.append(this.#r), this.#s = this.attachInternals(), this.#t = Q(), this.#e = P(this.#t), this.#e.on("setExtensions", ({ extensionNames: i }) => {
-      this.#h.filter((s) => !i.includes(s)).forEach((s) => {
+    this.#u = this.attachShadow({ mode: "open", delegatesFocus: !0 }), this.#u.adoptedStyleSheets = [J, ...e].map(M), this.#n = f("div"), this.#n.tabIndex = -1, this.#u.append(this.#n), this.#a = f("slot"), this.#n.append(this.#a), this.#o = f("input", {
+      type: "file",
+      "aria-hidden": !0,
+      hidden: !0,
+      multiple: !0,
+      tabIndex: -1
+    }), this.#n.prepend(this.#o), this.#s = f("button", {
+      type: "button",
+      part: "browse-button"
+    }), this.#n.prepend(this.#s), this.#r = this.attachInternals(), this.#t = W({
+      // handles one or multiple files state
+      beforeInsertEntries: (i, s) => this.maxFiles < 1 / 0 && s.length + i.length > this.maxFiles ? i.toSpliced(this.maxFiles - s.length) : i
+    }), this.#i = P(this.#t), this.#i.on("setExtensions", ({ extensionNames: i }) => {
+      this.#m.filter((s) => !i.includes(s)).forEach((s) => {
         delete this[s];
       }), i.forEach((s) => {
         Object.defineProperty(this, s, {
           // getter / setter
-          set(h) {
-            this.#e.setExtensionProperties(s, h);
+          set(d) {
+            this.#i.setExtensionProperties(s, d);
           },
           get() {
-            return this.#e.getExtensionProperties(s);
+            return this.#i.getExtensionProperties(s);
           },
           // so we can delete this proxy later
           configurable: !0
         });
-      }), this.#h = i, this.checkValidity();
+      }), this.#m = i, this.checkValidity();
+    }), this.#t.on("updateEntries", (i) => {
+      this.locale && this.#l();
     });
   }
-  #m() {
-    const t = this.#r.assignedElements({ flatten: !0 }).filter((s) => s.matches('input[type="file"]'));
-    let e;
-    if (!t.length)
-      e = T("input", { type: "file" }), this.#l = e, this.append(e);
-    else {
-      for (const s of t)
-        if (s === this.#l && t.length > 1) {
-          this.#l = null, s.remove();
-          return;
-        }
-      e = t.at(-1);
+  setBrowseButtonLabelKey(t) {
+    this.#c = t, this.#l();
+  }
+  #l() {
+    const t = this.#t.entries.length, e = {
+      multiple: `${this.multiple}`,
+      //
+      name: t === 1 ? this.#t.entries[0].name || "untitled" : null,
+      count: t,
+      //
+      maxFiles: this.maxFiles,
+      maxFilesUnit: "unitFiles"
+    };
+    if (this.#e) {
+      const i = t === 0 ? "ariaNoEntries" : t === 1 ? "ariaSingleEntry" : "ariaMultipleEntries";
+      T(this.#s, {
+        // aria label is always base browse button
+        "aria-label": u(this.#e.browse, e, this.#e),
+        // aria description is always base browse button
+        "aria-description": S([
+          u(this.#e[i], e, this.#e),
+          this.#e.ariaRequired,
+          this.validationMessage
+        ]).join(", ")
+      });
     }
-    const i = [...et, ...g];
-    for (const s of i) {
-      const h = D(s, e, this);
-      h !== void 0 && (this[s] = h);
+    this.#s.innerHTML = u(
+      this.#e ? this.#e[this.#c] : this.#c,
+      e,
+      this.#e
+    );
+  }
+  #y() {
+    const t = this.#a.assignedElements({ flatten: !0 }).filter((i) => i.matches('input[type="file"]')), e = [...Y, ...v];
+    for (const i of e) {
+      const s = E(i, ...t, this);
+      s !== void 0 && (this[i] = s);
     }
-    q(e, i), this.#i = e;
-    for (const s of g)
-      this[s] !== void 0 && this.#d(s, this[s]);
-    this.#e.setExtensionProperties("FileInputSource", {
-      element: this.#i
-    }), !e.id && (this.inputId = `file-pond-${$()}`);
+    t.length && (this.multiple = !!E("multiple", ...t)), t.forEach((i) => i.remove());
   }
   /** Called each time the element is added to the document */
   connectedCallback() {
-    const t = (i) => {
-      this.#s?.setFormValue(
-        i.length > 0 ? tt(this.name ?? "filepond", i) : null
-      ), this.checkValidity(), f(this, "change");
+    this.#y();
+    const t = (e) => {
+      this.#r.setFormValue(
+        e.length > 0 ? Q(this.name ?? "filepond", e) : null
+      ), this.checkValidity(), g(this, "change");
     };
-    this.#e.setExtensionProperties("FileInputSource", {
+    this.#i.setExtensionProperties("FileInputSource", {
+      element: this.#o,
       resetFilesOnAdd: !0
-    }), this.#e.setExtensionProperties("ValueCallbackStore", {
+    }), this.#i.setExtensionProperties("ValueCallbackStore", {
       required: this.required,
       onChange: t
-    }), this.#m(), this.#f();
-    let e = null;
-    this.#a.push(
-      // this file input elements are handled correctly
-      a(this.#r, "slotchange", () => {
-        this.#m();
-      }),
-      // these two listeners toggle the dragging attribute to the file-pond element, we do this so we can move the file-pond element that is being interacted with to the front, so the dragged item also renders on top
-      a(this, "dragStart", () => {
-        l(this, "dragging", !0);
-      }),
-      a(this, "dragEnd", () => {
-        l(this, "dragging", !1);
-      }),
-      // set up enter/spacebar press when file-pond is activeElement
-      a(this, "keypress", (i) => {
-        i.target !== this || !/ | Enter/.test(i.key) || (i.stopPropagation(), i.preventDefault(), this.#i?.click());
-      }),
-      // set up browse file on click interaction
-      a(this, "pointerdown", (i) => {
-        e = i.target;
-      }),
-      a(this, "pointerup", (i) => {
-        e = i.target !== e, setTimeout(() => {
-          e = null;
-        }, 0);
-      }),
-      a(this, "click", (i) => {
-        if (e === !0)
-          return;
-        const s = document.elementFromPoint(i.x, i.y);
-        s !== this || s?.nodeName !== "FILE-POND-DROP-AREA" || this.#i?.click();
+    }), this.#E(), this.#h.push(
+      q(this, "click", (e) => {
+        const i = e.composedPath()[0];
+        i !== this && i !== this.#s && !this.#s.contains(i) || (e.stopPropagation(), e.preventDefault(), this.browse());
       }),
       // fire update events
       this.#t.on("update", () => {
-        f(this, "update");
+        g(this, "update");
       })
-    ), f(this, "connected");
+    ), g(this, "connected");
   }
   /** Called each time the element is removed from the document. */
   disconnectedCallback() {
-    this.#a.forEach((t) => t()), this.#a = [];
+    this.#h.forEach((t) => t()), this.#h = [];
   }
   //#region Form integration and validation
   /** This makes the element associateable with its parent form */
   static formAssociated = !0;
-  /** This Has a reference to the element form internals */
-  #s = null;
   /** Sets the current field name */
   set name(t) {
     o(this, "name", t);
@@ -447,7 +499,7 @@ class Et extends J {
   }
   /** Proxy for Element internals `form` getter */
   get form() {
-    return this.#s?.form ?? void 0;
+    return this.#r.form ?? void 0;
   }
   /**
    * Sets/Updates the value of the the entry manager
@@ -456,75 +508,84 @@ class Et extends J {
    */
   set value(t) {
     let e = [];
-    m(t) && (e = t.split(",").map((i) => i.trim()).map((i) => ({
+    c(t) && (e = t.split(",").map((i) => i.trim()).map((i) => ({
       src: i
-    }))), this.#c = e, this.entries = e;
+    }))), this.#p = e, this.entries = e;
   }
   /** Proxy for `entries` getter */
   get value() {
     return this.entries;
   }
   /** Sets up the field for validation */
-  #f() {
-    this.#a.push(
+  #E() {
+    this.#h.push(
       this.#t.on(
         "update",
-        b(() => this.checkValidity())
+        x(() => this.checkValidity())
       ),
-      this.#e.on(
+      this.#i.on(
         "update",
-        b(() => this.checkValidity())
+        x(() => this.checkValidity())
       )
-    ), this.checkValidity(), this.tabIndex = U(this.getAttribute("tabindex")) || 0;
+    ), this.checkValidity();
   }
   /** Validates the current state of the field */
   checkValidity() {
-    const { validationInvalidBusy: t = "", validationInvalidState: e = "" } = this.#n || {};
-    if (Z(this.entries)) {
-      if (this.#s?.validity.customError === !0)
+    const { validationInvalidBusy: t = "", validationInvalidState: e = "" } = this.#e || {};
+    if (N(this.entries)) {
+      if (this.#r.validity.customError === !0)
         return;
-      this.#u({ customError: !0 }, E(t));
+      this.#d({ customError: !0 }, u(t));
       return;
     }
-    const i = this.#e.getState(), s = {};
+    const i = this.#i.getState(), s = {};
     for (const { status: n } of Object.values(i)) {
-      if (!n || n.type !== H.Error)
+      if (!n || n.type !== $.Error)
         continue;
-      const { flag: c = "customError" } = n?.meta ?? {}, C = this.#n ? w(n, this.#n) : B(n.code);
-      s[c] = C ?? E(e);
+      const { flag: m = "customError" } = n?.meta ?? {}, L = this.#e ? j(
+        {
+          ...n,
+          values: {
+            // error state values
+            ...n.values,
+            // append input state
+            multiple: this.multiple
+          }
+        },
+        this.#e
+      ) : U(n.code);
+      s[m] = L ?? u(e);
     }
     if (Object.keys(s).length === 0)
-      return this.#u();
-    const z = W(x.map((n) => s[n])).at(
+      return this.#d();
+    const a = S(F.map((n) => s[n])).at(
       0
-    ), V = x.reduce(
-      (n, c) => (n[c] = !!s[c], n),
+    ), O = F.reduce(
+      (n, m) => (n[m] = !!s[m], n),
       {}
     );
-    return this.#u(V, z);
+    return this.#d(O, a);
   }
   /** Sets the validity state on the element internals. Returns `true` if valid, `false` if invalid */
-  #u(t, e) {
-    if (!t)
-      return this.#s?.setValidity({}), !0;
-    const i = j() && !N() ? this.#i : void 0;
-    return this.#s?.setValidity(t, e, i), !1;
+  #d(t, e) {
+    let i = !0;
+    return t ? (this.#r.setValidity(t, e, this.#n), i = !1) : this.#r.setValidity({}), this.#l(), i;
   }
   /** Proxy for element internals `reportValidity()` method */
   reportValidity() {
-    this.#s?.reportValidity();
+    this.#r.reportValidity();
   }
   /** Proxy for element internals `validity` getter */
   get validity() {
-    return this.#s?.validity;
+    return this.#r.validity;
   }
   /** Proxy for element internals `validationMessage` getter */
   get validationMessage() {
-    return this.#s?.validationMessage;
+    return this.#r.validationMessage;
   }
   /** Called when element or parent element (for example a `<fieldset>`) is set to disabled */
   formDisabledCallback(t) {
-    this.#e.propagateExtensionProperty("disabled", t), this.#i && (this.#i.disabled = t);
+    this.#i.propagateExtensionProperty("disabled", t), this.#o.disabled = t, this.#s.disabled = t;
   }
   /**
    * Called when user resets form. Resets field to initial state. The initial state is either
@@ -534,7 +595,7 @@ class Et extends J {
    * https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
    */
   formResetCallback() {
-    this.entries = this.#c ?? [];
+    this.entries = this.#p ?? [];
   }
   /** Called when user returns to form with back button */
   formStateRestoreCallback(t, e) {
@@ -542,6 +603,6 @@ class Et extends J {
   //#endregion
 }
 export {
-  Et as FilePondInputElement,
-  Q as createFilePondEntryTree
+  dt as FilePondInputElement,
+  W as createFilePondEntryTree
 };