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

package/esm/elements/FilePondDefault/index.css.js

@@ -1,10 +1,10 @@
 /*!
-* 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
 */
-const r = ':host{--animate: 1;--default-color: CanvasText;--default-background-color: color-mix(in srgb, CanvasText 10%, Canvas 100%);--default-padding: 1em;--default-border-radius: 1.25em;--default-backdrop-filter: blur(20px) saturate(1.25);--default-accent-color: #007aff;--default-border: 1px solid color-mix(in srgb, CanvasText 10%, transparent);display:flex;flex-direction:column;gap:var(--default-padding)}:host slot{position:relative;isolation:isolate}:host([animations="never"]){--animate: 0}:host([disabled]){filter:grayscale(100%)}file-pond-drop-area{--border-radius: var(--default-border-radius);--border: var(--default-border)}file-pond-drop-indicator{--border-radius: var(--default-border-radius);--background-color: color-mix(in srgb, var(--default-color) 10%, transparent)}file-pond-entry-list{--entry-color: var(--default-color);--entry-background-color: var(--default-background-color);--entry-shadow: 0 1px 3px rgb(0 0 0 / .05);--entry-button-outline: 0 0 0 1.5px currentColor;--entry-border: 1px solid rgb(from CanvasText r g b / .025)}file-pond-entry-list[empty]{margin-top:calc(-1 * var(--default-padding))}file-pond-entry-list::part(list){display:flex;flex-direction:column;gap:calc(var(--default-padding) * .5)}file-pond-entry-list::part(entry-list-item-placeholder){min-height:1em}file-pond-entry-list::part(entry-list-item virtualized){background-color:var(--entry-background-color);border-radius:var(--entry-border-radius)}file-pond-entry-list::part(entry-list-item dragged){--entry-shadow: 0 3px 6px rgb(0 0 0 / .25)}file-pond-entry-list::part(entry-list-item selected){--entry-overlay-color: rgb(from var(--entry-accent-color) r g b / .25);--entry-border: 2px solid var(--entry-accent-color)}file-pond-entry-list::part(data-transfer-item){--entry-border-top: 0;--entry-border-right: 0;--entry-border-bottom: 0;--entry-border-left: 0;--entry-shadow: none}file-pond-entry-list::part(entry){display:grid;grid:min-content 1fr min-content / min-content 1fr min-content}file-pond-entry-list::part(entry-load-state){grid-row:1;grid-column:1;padding:var(--entry-padding)}file-pond-entry-list::part(entry-checkbox){grid-row:1;grid-column:1;padding:var(--entry-padding)}file-pond-entry-list::part(entry-checkbox checked){--input-background-color: var(--entry-accent-color)}file-pond-entry-list::part(entry-info){grid-row:1;grid-column:2;padding-top:var(--entry-padding);padding-bottom:var(--entry-padding)}file-pond-entry-list::part(entry-store-state){grid-row:1;grid-column:3;padding:var(--entry-padding)}file-pond-entry-list::part(entry-status){grid-row:2;grid-column:1 / 4}file-pond-entry-list::part(entry-media){grid-row:2;grid-column:1 / 4}file-pond-entry-list::part(media-controls){grid-row:2;grid-column:1 / 4;align-self:end;color:#fff;margin:.6125em;--btn-size: 1.25em;--btn-icon-stroke: 2.5;--btn-icon-size: .75em;--panel-border-radius: .25em;--panel-border-radius: calc(var(--entry-border-radius) - .3125em);--panel-background-color: rgb(0 0 0 / .35);--panel-backdrop-filter: var(--default-backdrop-filter)}file-pond-entry-list::part(entry-button){--btn-size: 1.5em;--btn-border-radius: calc(var(--entry-border-radius) - var(--entry-padding) * .625);--btn-background-color: color-mix(in srgb, var(--entry-color) 15%, transparent);--btn-icon-stroke: 2.5;box-shadow:0 0 0 0 transparent;transition:box-shadow var(--_150ms, 0) ease-in-out,background-color var(--_150ms, 0) ease-in-out}file-pond-entry-list::part(entry-button):hover{background-color:color-mix(in srgb,var(--entry-color) 25%,transparent);box-shadow:var(--entry-button-outline)}file-pond-entry-list::part(entry-button):focus-visible{box-shadow:var(--entry-button-outline)}file-pond-entry-list::part(media-button){--btn-border-radius: var(--panel-border-radius);transition:box-shadow var(--_150ms, 0) ease-in-out,background-color var(--_150ms, 0) ease-in-out}file-pond-entry-list::part(media-button):hover{background-color:color-mix(in srgb,currentColor 15%,transparent);box-shadow:var(--entry-button-outline)}file-pond-entry-list::part(media-button):focus-visible{box-shadow:var(--entry-button-outline)}:host([disabled]) file-pond-entry-list{--entry-overlay-color: rgb(from var(--entry-background-color) r g b / .5)}:host a{--font-size: .625;--inset: calc(var(--default-padding) / var(--font-size));--text-opacity: .5;--line-opacity: .2;position:absolute;z-index:-1;top:0;left:0;line-height:2;transform:translate(calc(var(--x, 0) * 1px),calc(var(--y, 0) * 1px)) translate(calc(-100% - var(--inset)));font-size:calc(var(--font-size) * 1em);color:rgb(from var(--default-color) r g b / var(--text-opacity));text-underline-offset:1px;text-decoration-color:rgb(from var(--default-color) r g b / var(--line-opacity));text-transform:lowercase;transition:color var(--_150ms) ease-in-out;-webkit-user-select:none;user-select:none}:host a:hover{--text-opacity: .75;--line-opacity: .25}::slotted(label){--width-px: calc(var(--width) * 1px);--center-px: calc((var(--width-px) - (2 * var(--default-padding))) * .5);display:inline-block;transform:translate(calc(var(--center-px) - 50%));align-self:flex-start;text-align:center;padding-top:var(--default-padding);padding-bottom:var(--default-padding);transition:opacity calc(.15s * var(--animate)) ease-in-out}:host([disabled]) ::slotted(label){opacity:.4;pointer-events:none!important}';
+const r = ':host{display:block;margin-top:.25em;margin-bottom:1.25em;--animate: 1;--outline: Highlight auto 1px;--default-color: CanvasText;--default-background-color: color-mix(in srgb, CanvasText 10%, Canvas 100%);--default-padding: 1em;--default-border-radius: 1.25em;--default-backdrop-filter: blur(20px) saturate(1.25);--default-accent-color: #007aff;--default-border: 1px solid color-mix(in srgb, CanvasText 10%, transparent)}@supports (outline: -webkit-focus-ring-color auto 1px){:host{--outline: -webkit-focus-ring-color auto 1px}}:host slot{position:relative;isolation:isolate}:host(:not([nodrop])){padding:var(--default-padding, 0)}:host(:not([nodrop]))>div{display:flex;flex-direction:column;gap:var(--default-padding)}:host([animations="never"]){--animate: 0}:host([disabled]){filter:grayscale(100%)}file-pond-drop-area{--border-radius: var(--default-border-radius);--border: var(--default-border)}file-pond-drop-indicator{--border-radius: var(--default-border-radius);--background-color: color-mix(in srgb, var(--default-color) 10%, transparent)}file-pond-entry-list{--entry-color: var(--default-color);--entry-background-color: var(--default-background-color);--entry-shadow: 0 1px 3px rgb(0 0 0 / .05);--entry-button-outline: 0 0 0 1.5px currentColor;--entry-border: 1px solid rgb(from CanvasText r g b / .025)}file-pond-entry-list[empty]{margin-top:calc(-1 * var(--default-padding))}file-pond-entry-list::part(list){display:flex;flex-direction:column;gap:calc(var(--default-padding) * .5)}file-pond-entry-list::part(entry-list-item-placeholder){min-height:1em}file-pond-entry-list::part(entry-list-item virtualized){background-color:var(--entry-background-color);border-radius:var(--entry-border-radius)}file-pond-entry-list::part(entry-list-item selected){--entry-overlay-color: rgb(from var(--entry-accent-color) r g b / .25);--entry-border: 2px solid var(--entry-accent-color)}file-pond-entry-list::part(entry-list-item){outline:none}file-pond-entry-list::part(entry-list-item):focus-visible{border-radius:var(--entry-border-radius);outline:var(--outline)}file-pond-entry-list::part(entry-list-item dragging){--entry-shadow: 0 3px 6px rgb(0 0 0 / .25)}file-pond-entry-list::part(data-transfer-item){--entry-border-top: 0;--entry-border-right: 0;--entry-border-bottom: 0;--entry-border-left: 0;--entry-shadow: none}file-pond-entry-list::part(entry){display:grid;grid:min-content minmax(0,1fr) min-content / min-content minmax(0,1fr) min-content}file-pond-entry-list::part(entry-load-state){grid-row:1;grid-column:1;padding:var(--entry-padding)}file-pond-entry-list::part(entry-checkbox){grid-row:1;grid-column:1;padding:var(--entry-padding)}file-pond-entry-list::part(entry-checkbox checked){--input-background-color: var(--entry-accent-color)}file-pond-entry-list::part(entry-info){grid-row:1;grid-column:2;padding-top:var(--entry-padding);padding-bottom:var(--entry-padding)}file-pond-entry-list::part(entry-store-state){grid-row:1;grid-column:3;padding:var(--entry-padding)}file-pond-entry-list::part(entry-status){grid-row:2;grid-column:1 / 4}file-pond-entry-list::part(entry-media){grid-row:2;grid-column:1 / 4}file-pond-entry-list::part(media-controls){grid-row:2;grid-column:1 / 4;align-self:end;color:#fff;margin:.6125em;--btn-size: 1.25em;--btn-icon-stroke: 2.5;--btn-icon-size: .75em;--panel-border-radius: .25em;--panel-border-radius: calc(var(--entry-border-radius) - .3125em);--panel-background-color: rgb(0 0 0 / .35);--panel-backdrop-filter: var(--default-backdrop-filter)}file-pond-entry-list::part(entry-button){--btn-size: 1.5em;--btn-border-radius: calc(var(--entry-border-radius) - var(--entry-padding) * .625);--btn-background-color: color-mix(in srgb, var(--entry-color) 15%, transparent);--btn-icon-stroke: 2.5;box-shadow:0 0 0 0 transparent;transition:box-shadow var(--_150ms, 0) ease-in-out,background-color var(--_150ms, 0) ease-in-out}file-pond-entry-list::part(entry-button-pile){--btn-border-radius: calc(var(--entry-border-radius) - var(--entry-padding) * .625);--btn-background-color: color-mix(in srgb, var(--entry-color) 15%, transparent)}file-pond-entry-list::part(entry-button):not(:disabled):hover{background-color:color-mix(in srgb,var(--entry-color) 25%,transparent);box-shadow:var(--entry-button-outline)}file-pond-entry-list::part(entry-button):focus-visible{outline:var(--outline)}file-pond-entry-list::part(media-button){--btn-border-radius: var(--panel-border-radius);transition:box-shadow var(--_150ms, 0) ease-in-out,background-color var(--_150ms, 0) ease-in-out}file-pond-entry-list::part(media-button-pile){--btn-border-radius: var(--panel-border-radius)}file-pond-entry-list::part(media-button):not(:disabled):hover{background-color:color-mix(in srgb,currentColor 15%,transparent);box-shadow:var(--entry-button-outline)}file-pond-entry-list::part(media-button):focus-visible{outline:-webkit-focus-ring-color auto 1px;outline:Highlight auto 1px}:host([disabled]) file-pond-entry-list{--entry-overlay-color: rgb(from var(--entry-background-color) r g b / .5)}:host([disabled]) button[part=browse-button]{pointer-events:none;color:light-dark(rgb(84,84,84),rgb(170,170,170))}:host a[part=attribution-link]{--font-size: .625;--text-opacity: .5;--line-opacity: .2;color:rgb(from var(--default-color) r g b / var(--text-opacity));font-size:calc(var(--font-size) * 1em);text-underline-offset:1px;text-decoration-color:rgb(from var(--default-color) r g b / var(--line-opacity));text-transform:lowercase;transition:color var(--_150ms) ease-in-out;-webkit-user-select:none;user-select:none}:host a[part=attribution-link]:hover{--text-opacity: .75;--line-opacity: .25}:host(:not([nodrop])) a[part=attribution-link]{--inset: calc(var(--default-padding) / var(--font-size));position:absolute;z-index:-1;top:0;left:0;line-height:2;transform:translate(calc(var(--width, 0) * 1px),calc(var(--height, 0) * 1px)) translate(calc(-100% - var(--inset)))}:host(:not([nodrop])) button[part=browse-button]{--width-px: calc(var(--width) * 1px);--center-px: calc((var(--width-px) - (2 * var(--default-padding))) * .5);display:inline-block;transform:translate(calc(var(--center-px) - 50%));align-self:flex-start;text-align:center;padding:var(--default-padding);transition:opacity calc(.15s * var(--animate)) ease-in-out;background:transparent;border:none;font-size:.875em}:host(:not([nodrop])) button[part=browse-button] u{cursor:pointer;text-decoration-color:color-mix(in srgb,currentColor 25%,transparent)}:host(:not([nodrop])) button[part=browse-button]:focus-visible{border-radius:calc(var(--default-border-radius) - var(--default-padding) * .75);outline:var(--outline);outline-offset:calc(-.875 * var(--default-padding))}:host([nodrop]) button[part=browse-button]{align-self:flex-start}';
 export {
   r as default
 };

package/esm/elements/FilePondDefault/index.js

@@ -1,209 +1,248 @@
 /*!
-* 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 { FilePondInputElement as f } from "../FilePondInput/index.js";
-import { FilePondEntryListElement as m, getDefaultSpringOptions as l, getDefaultEntryAnimationOriginMap as b, getDefaultEntryAnimationProps as y } from "../FilePondEntryList/index.js";
-import { FilePondDropAreaElement as g } from "../FilePondDropArea/index.js";
-import { FilePondDropIndicatorElement as A } from "../FilePondDropIndicator/index.js";
-import { FileInputSource as E } from "../../extensions/file-input-source.js";
-import { DataTransferLoader as L } from "../../extensions/data-transfer-loader.js";
-import { ValueCallbackStore as P } from "../../extensions/value-callback-store.js";
-import { EntryListView as C } from "../../extensions/entry-list-view.js";
-import { hasDefinedTag as D, defineCustomElements as S, defineCustomElement as x, h as o, addListener as n, dispatchCustomEvent as p } from "../../utils/dom.js";
-import { isString as k } from "../../utils/test.js";
-import { assets as _ } from "../../assets/index.js";
-import w from "./index.css.js";
-import { createFilePondEntryList as F } from "../../templates/entry.js";
-function d(i = []) {
-  return [
-    E,
-    ...i,
-    L,
+import { FilePondInputElement as A } from "../FilePondInput/index.js";
+import { FilePondEntryListElement as E, getDefaultSpringOptions as h, getDefaultEntryAnimationOriginMap as x, getDefaultEntryAnimationProps as L } from "../FilePondEntryList/index.js";
+import { FilePondDropAreaElement as w } from "../FilePondDropArea/index.js";
+import { FilePondDropIndicatorElement as D } from "../FilePondDropIndicator/index.js";
+import { FileInputSource as P } from "../../extensions/file-input-source.js";
+import { DataTransferLoader as S } from "../../extensions/data-transfer-loader.js";
+import { ValueCallbackStore as C } from "../../extensions/value-callback-store.js";
+import { FileExtensionValidator as I } from "../../extensions/file-extension-validator.js";
+import { FileMimeTypeValidator as k } from "../../extensions/file-mime-type-validator.js";
+import { EntryListView as F } from "../../extensions/entry-list-view.js";
+import { hasDefinedTag as O, defineCustomElements as v, defineCustomElement as _, setBooleanAttribute as l, h as c, addListener as d, dispatchCustomEvent as b } from "../../utils/dom.js";
+import { isArray as y, isString as g } from "../../utils/test.js";
+import { assets as V } from "../../assets/index.js";
+import j from "./index.css.js";
+import { createFilePondEntryList as T } from "../../templates/entry.js";
+import { toCamelParts as B } from "../../utils/string.js";
+import { arrayInsertAtIndex as R } from "../../utils/array.js";
+import { warn as N } from "../../common/console.js";
+function f(o) {
+  return (y(o) ? o[0] : o).name;
+}
+function $(o) {
+  return y(o) ? o[2] : void 0;
+}
+function M(o = []) {
+  const t = { name: "Transform" };
+  let e = [
     P,
+    S,
+    I,
+    k,
+    // the default extension set doesn't have a Transform extension, so we create a slot so we can auto insert transform extensions there, the slot is removed when we return the extension set
+    t,
+    F,
     C
   ];
+  for (const r of o) {
+    let i = f(r), n = e.findIndex((u) => f(u) === i);
+    if (n > -1) {
+      e[n] = r;
+      continue;
+    }
+    let p, s = 1, a = $(r);
+    if (a ? (s = a.before ? 0 : 1, p = a.before || a.after) : p = B(i).pop(), n = e.findLastIndex(
+      (u) => f(u).endsWith(p)
+    ), n === -1) {
+      N(
+        `No valid insertion index found for extension "${i}", make sure its name ends with an extension types: "Source", "Loader", "Validator", "Transform", or "Store".`
+      );
+      continue;
+    }
+    e = R(
+      e,
+      n + s,
+      r
+    );
+  }
+  return e.filter((r) => r !== t);
 }
-const O = ["springDefaults", "animations"];
-let c;
-class v extends f {
-  #e = {};
-  /** Set to `true` to remove the attribution link */
-  #t;
+const q = ["springDefaults", "animations"];
+let m;
+class K extends A {
+  // Child components
+  #t = {};
+  /** Holds reference to attribution link element */
+  #e;
   /** Holds references to event subscriptions so we can more easily unsub */
   #r = [];
   /** Pass spring and animaton config to children */
   set springDefaults(t) {
-    Object.values(this.#e).forEach((e) => {
+    Object.values(this.#t).forEach((e) => {
       e.springDefaults = t;
     });
   }
   set animations(t) {
-    Object.values(this.#e).forEach((e) => {
+    Object.values(this.#t).forEach((e) => {
       e.animations = t;
     });
   }
   /** Wraps `createFilePondExtensionSet` so we always set the default extension set */
   set extensions(t) {
-    super.extensions = d(t);
+    super.extensions = M(t);
   }
   /** Set to false to hide credits */
   static get observedAttributes() {
-    return [...super.observedAttributes, "noattribution"];
+    return [...super.observedAttributes, "noattribution", "nodrop"];
   }
-  attributeChangedCallback(t, e, s) {
+  attributeChangedCallback(t, e, r) {
     if (t === "noattribution") {
-      this.#n(!k(s));
+      this.noAttribution = g(r);
+      return;
+    }
+    if (t === "nodrop") {
+      this.noDrop = g(r);
       return;
     }
-    super.attributeChangedCallback(t, e, s);
+    super.attributeChangedCallback(t, e, r);
   }
-  #n(t) {
-    this.#t && (t ? this._root.append(this.#t) : this.#t.remove());
+  /** Set to `true` to remove drop area */
+  set noDrop(t) {
+    l(this, "nodrop", t), t ? (this.#t.dropArea.remove(), this.#t.dropIndicator.remove(), Object.assign(this, {
+      EntryListView: {
+        drop: !1
+      }
+    })) : (this._root.prepend(this.#t.dropArea, this.#t.dropIndicator), Object.assign(this, {
+      EntryListView: {
+        drop: !0
+      }
+    })), this.setBrowseButtonLabelKey(t ? "browse" : "browseAndDrop");
   }
+  /** Returns current nodrop state */
+  get noDrop() {
+    return this.hasAttribute("nodrop");
+  }
+  /** Set to `true` to remove the attribution link */
   set noAttribution(t) {
-    t ? this.setAttribute("noattribution", "") : this.removeAttribute("noattribution");
+    t ? (l(this, "noattribution", !0), this.#e.remove()) : (l(this, "noattribution", !1), this._root.append(this.#e));
   }
+  /** Returns current noattribution state */
   get noAttribution() {
-    return !this.#t?.parentNode;
+    return !this.#e?.parentNode;
   }
   constructor() {
     super({
-      styles: [w]
-    });
-    const t = o("file-pond-entry-list", {
+      styles: [j]
+    }), this.setBrowseButtonLabelKey("browseAndDrop");
+    const t = c("file-pond-entry-list", {
       part: "entry-list"
-    }), e = o("file-pond-drop-area", {
+    }), e = c("file-pond-drop-area", {
       part: "drop-area"
-    }), s = o("file-pond-drop-indicator", {
+    }), r = c("file-pond-drop-indicator", {
       part: "drop-indicator"
     });
-    this.#e = {
+    this.#t = {
       entryList: t,
       dropArea: e,
-      dropIndicator: s
+      dropIndicator: r
     };
-    const a = /* @__PURE__ */ new Set(["virtualized", "dragged", "selected", "checked"]);
-    function h(r) {
-      if (!r || a.has(r))
+    const i = /* @__PURE__ */ new Set(["dragging", "virtualized", "selected", "checked"]);
+    function n(s) {
+      if (!s || i.has(s))
         return;
-      const u = Array.from(a.add(r)).join(",");
-      t.setAttribute("exportparts", u);
+      const a = Array.from(i.add(s)).join(",");
+      t.setAttribute("exportparts", a.replace(/ /g, ","));
     }
+    const p = m?.EntryListView?.template || T();
     Object.assign(this, {
       // add items view
-      extensions: d(this.extensions),
+      extensions: this.extensions,
       // show progress indicator for data transfers
       DataTransferLoader: {
         perceivedPerformance: !0
       },
       // set up items view extension
       EntryListView: {
+        // the element that the item list will be appended to
+        element: this.#t.entryList,
+        // the root element to use for dragging and dropping components, defaults to the list itself
+        dropRoot: this.#t.dropArea,
         // assets to use
-        assets: _,
+        assets: V,
+        // the nodes to render
+        template: p,
         // called before rendering a node, allows dynamically modifying a node or adding nodes
-        beforeRenderNode(r) {
-          return h(r.props?.part || r.attrs?.part), r;
+        beforeRenderNode(s) {
+          return n(s.props?.part || s.attrs?.part), s;
         },
         // animations
-        entryAnimationProps: y(),
-        entryAnimationOriginMap: b(),
-        springDefaults: l()
+        entryAnimationProps: L(),
+        entryAnimationOriginMap: x(),
+        springDefaults: h()
       }
-    }), this.springDefaults = l(), O.forEach((r) => {
-      this[r] = t[r];
-    }), this.#t = j({
+    }), this.springDefaults = h(), q.forEach((s) => {
+      this[s] = t[s];
+    }), this.#e = z({
       caption: "Powered by FilePond"
-    }), this._root.prepend(e, s), this._root.append(t), this.#t && !this.hasAttribute("noattribution") && this._root.append(this.#t), Object.assign(this, c);
-  }
-  #i() {
-    this._slot.assignedElements().filter((t) => t.tagName === "LABEL").forEach((t) => t.setAttribute("for", this.inputId));
+    }), Object.assign(this, m);
   }
   connectedCallback() {
-    if (super.connectedCallback(), Object.assign(this, {
-      EntryListView: {
-        // the element that the item list will be appended to
-        element: this.#e.entryList,
-        // the root element to use for dragging and dropping elements, defaults to the list itself
-        dropRoot: this.#e.dropArea,
-        // the template to render
-        template: F()
-      }
-    }), !this.querySelector("label")) {
-      const t = "dropAreaLabel";
-      this.append(
-        o("label", {
-          innerHTML: this.locale ? this.locale[t] : t
-        })
-      );
-    }
-    this.#i(), this.#r.push(
-      // label elements for attributes are synced with file input
-      n(this._slot, "slotchange", () => {
-        this.#i();
+    super.connectedCallback();
+    const { dropArea: t, dropIndicator: e, entryList: r } = this.#t;
+    this.hasAttribute("nodrop") || this._root.prepend(t, e), this._root.append(r), this.hasAttribute("noattribution") || this._root.append(this.#e), this.#r.push(
+      // route clicks on drop area to browse button
+      d(t, "click", () => {
+        this.browse();
       }),
-      // @ts-ignore
       // did compute target rect
-      n(this.#e.dropArea, "computerect", (t) => {
-        if (!t.detail)
+      d(t, "computerect", (i) => {
+        if (!i.detail)
           return;
-        const e = t.detail;
-        p(this, "computerect", { detail: e });
+        const n = i.detail;
+        b(this, "computerect", { detail: n });
       }),
-      // @ts-ignore
       // did update visual rect
-      n(this.#e.dropArea, "updaterect", (t) => {
-        if (!t.detail)
+      d(t, "updaterect", (i) => {
+        if (!i.detail)
           return;
-        const e = t.detail;
-        this._slot.style.setProperty("--width", e.width), this._slot.style.setProperty("--height", e.height), this.#t?.style.setProperty("--x", e.width), this.#t?.style.setProperty("--y", e.height), p(this, "updaterect", { detail: e });
+        const n = i.detail;
+        this._root.style.setProperty("--width", n.width), this._root.style.setProperty("--height", n.height), b(this, "updaterect", { detail: n });
       }),
       // link up placeholder position with drop indicator
-      n(this.#e.entryList, "updateplaceholder", (t) => {
-        this.#e.dropIndicator.indicatorRect = t.detail;
+      d(r, "updateplaceholder", (i) => {
+        e.indicatorRect = i.detail;
       }),
-      // prevent interaction with slot content and attribution link while dragging
-      n(this.#e.entryList, "dragentrystart", () => {
-        this._slot.inert = !0, this.#t && (this.#t.inert = !0);
+      // 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. Additionally they prevent interaction with slot content and attribution link while dragging
+      d(r, "dragentrystart", () => {
+        l(this, "dragging", !0), this._slot.inert = !0, this.#e.inert = !0;
       }),
-      // restore interaction with slot content and attribution link while dragging
-      n(this.#e.entryList, "dragentryend", () => {
-        this._slot.inert = !1, this.#t && (this.#t.inert = !1);
+      d(r, "dragentryend", () => {
+        l(this, "dragging", !1), this._slot.inert = !1, this.#e.inert = !1;
       })
     );
   }
   /** Called each time the element is removed from the document. */
   disconnectedCallback() {
-    super.disconnectedCallback(), Object.assign(this, {
-      EntryListView: {
-        element: null
-      }
-    }), this.#r.forEach((t) => t()), this.#r = [];
+    super.disconnectedCallback(), Object.values(this.#t).forEach((t) => t.remove()), this.#e.remove(), this.#r.forEach((t) => t()), this.#r = [];
   }
 }
-function j(i) {
-  const { caption: t = "" } = i || {};
-  if (t.length)
-    return o("a", {
-      textContent: t,
-      href: "https://filepond.com",
-      target: "_tab",
-      rel: "noopener noreferrer nofollow",
-      part: "attribution-link"
-    });
+function z(o) {
+  const { caption: t = "" } = o || {};
+  return c("a", {
+    textContent: t,
+    href: "https://filepond.com",
+    target: "_tab",
+    rel: "noopener noreferrer nofollow",
+    part: "attribution-link",
+    tabindex: "-1"
+  });
 }
-function J(i) {
+function pt(o) {
   const t = "file-pond";
-  return c = i, D(t) || (S({
-    [`${t}-entry-list`]: m,
-    [`${t}-drop-area`]: g,
-    [`${t}-drop-indicator`]: A
-  }), x(t, v)), Array.from(document.querySelectorAll(t));
+  return m = o, O(t) || (v({
+    [`${t}-entry-list`]: E,
+    [`${t}-drop-area`]: w,
+    [`${t}-drop-indicator`]: D
+  }), _(t, K)), Array.from(document.querySelectorAll(t));
 }
 export {
-  v as FilePondElement,
-  d as createFilePondExtensionSet,
-  J as defineFilePond
+  K as FilePondElement,
+  M as createFilePondExtensionSet,
+  pt as defineFilePond
 };

package/esm/elements/FilePondDropArea/index.css.js

@@ -1,5 +1,5 @@
 /*!
-* 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

package/esm/elements/FilePondDropArea/index.js

@@ -1,5 +1,5 @@
 /*!
-* 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

package/esm/elements/FilePondDropArea/index.svelte.js

@@ -1,59 +1,57 @@
 /*!
-* 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 { get as m } from "../../svelte/svelte/src/internal/client/runtime.js";
-import { push as R, pop as b } from "../../svelte/svelte/src/internal/client/context.js";
-import { child as k } from "../../svelte/svelte/src/internal/client/dom/operations.js";
-import { state as S, set as _ } from "../../svelte/svelte/src/internal/client/reactivity/sources.js";
-import { user_effect as r } from "../../svelte/svelte/src/internal/client/reactivity/effects.js";
-import { from_html as w, append as A } from "../../svelte/svelte/src/internal/client/dom/template.js";
+import { get as a } from "../../svelte/svelte/src/internal/client/runtime.js";
+import { push as b, pop as P } from "../../svelte/svelte/src/internal/client/context.js";
+import { child as S } from "../../svelte/svelte/src/internal/client/dom/operations.js";
+import { state as k, set as A } from "../../svelte/svelte/src/internal/client/reactivity/sources.js";
+import { user_effect as n } from "../../svelte/svelte/src/internal/client/reactivity/effects.js";
+import { from_html as _, append as w } from "../../svelte/svelte/src/internal/client/dom/template.js";
 import { user_derived as C } from "../../svelte/svelte/src/internal/client/reactivity/deriveds.js";
 import { if_block as D } from "../../svelte/svelte/src/internal/client/dom/blocks/if.js";
-import { attach as P } from "../../svelte/svelte/src/internal/client/dom/elements/attachments.js";
+import { attach as M } from "../../svelte/svelte/src/internal/client/dom/elements/attachments.js";
 import { prop as x } from "../../svelte/svelte/src/internal/client/reactivity/props.js";
 import { Spring as F } from "../../svelte/svelte/src/motion/spring.js";
 import { measurable as j } from "../attachments/measurable.js";
-import { createAnimationState as B } from "../common/animationPreference.svelte.js";
-import { rectFromBounds as E } from "../../utils/rect.js";
+import { computeAnimationPreference as B, getShouldReduceMotion as E, getGlobalPreventAnimations as G } from "../common/animationPreference.svelte.js";
+import { rectFromBounds as O } from "../../utils/rect.js";
 import "../components/ElementPane/index.js";
-import M from "../components/ElementPane/index.svelte.js";
-var O = w('<div class="root"><!></div>');
-function Y(u, o) {
-  R(o, !0);
-  let c = x(o, "animations", 3, "auto");
-  const i = { updateRect: (t) => {
+import U from "../components/ElementPane/index.svelte.js";
+var q = _('<div class="root"><!></div>');
+function tt(c, r) {
+  b(r, !0);
+  let u = x(r, "animations", 3, "auto");
+  const o = { updateRect: (t) => {
   }, computeRect: (t) => {
   } };
-  function f(t) {
-    i.updateRect = t;
+  function p(t) {
+    o.updateRect = t;
   }
   function s(t) {
-    i.computeRect = t;
+    o.computeRect = t;
   }
-  let n = S(void 0);
-  const p = B(c());
-  r(() => p.setPreference(c()));
-  const d = C(() => p.current), e = new F(void 0, { precision: 1 });
-  r(() => {
-    o.springDefaults && Object.assign(e, o.springDefaults);
-  }), r(() => {
-    e.set(m(n), { instant: !m(d) });
+  let i = k(void 0);
+  const f = G(), l = E(), d = C(() => B(u(), f.current, l.current)), e = new F(void 0, { precision: 1 });
+  n(() => {
+    r.springDefaults && Object.assign(e, r.springDefaults);
+  }), n(() => {
+    e.set(a(i), { instant: !a(d) });
   });
-  function l(t) {
-    _(n, E(t));
+  function g(t) {
+    A(i, O(t));
   }
-  r(() => {
-    i.computeRect(m(n));
-  }), r(() => {
-    i.updateRect(e.current);
+  n(() => {
+    o.computeRect(a(i));
+  }), n(() => {
+    o.updateRect(e.current);
   });
-  var h = { setUpdateRectCallback: f, setComputeRectCallback: s }, a = O(), g = k(a);
+  var h = { setUpdateRectCallback: p, setComputeRectCallback: s }, m = q(), v = S(m);
   {
-    var v = (t) => {
-      M(t, {
+    var R = (t) => {
+      U(t, {
         get width() {
           return e.current.width;
         },
@@ -62,12 +60,12 @@ function Y(u, o) {
         }
       });
     };
-    D(g, (t) => {
-      e.current && t(v);
+    D(v, (t) => {
+      e.current && t(R);
     });
   }
-  return P(a, () => j({ onmeasure: l })), A(u, a), b(h);
+  return M(m, () => j({ onmeasure: g })), w(c, m), P(h);
 }
 export {
-  Y as default
+  tt as default
 };

package/esm/elements/FilePondDropIndicator/index.css.js

@@ -1,5 +1,5 @@
 /*!
-* 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

package/esm/elements/FilePondDropIndicator/index.js

@@ -1,5 +1,5 @@
 /*!
-* 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