@editora/ui-core 0.1.9 → 0.1.12

package/dist/file-upload.esm.js

@@ -0,0 +1,740 @@
+import { E as M } from "./ElementBase-909688f3.mjs";
+const j = `
+  :host {
+    --ui-file-upload-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-file-upload-border: 1px solid var(--ui-file-upload-border-color);
+    --ui-file-upload-radius: var(--ui-radius, 12px);
+    --ui-file-upload-bg: var(--ui-color-surface, #ffffff);
+    --ui-file-upload-text: var(--ui-color-text, #0f172a);
+    --ui-file-upload-muted: var(--ui-color-muted, #64748b);
+    --ui-file-upload-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-file-upload-danger: var(--ui-color-danger, #dc2626);
+    --ui-file-upload-success: var(--ui-color-success, #16a34a);
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--ui-file-upload-text);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color-scheme: light dark;
+  }
+
+  .root {
+    display: grid;
+    gap: 10px;
+    min-inline-size: 0;
+  }
+
+  .meta {
+    display: grid;
+    gap: 4px;
+  }
+
+  .label {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-file-upload-text);
+    font: 600 13px/1.35 "IBM Plex Sans", "Inter", sans-serif;
+  }
+
+  .required {
+    color: var(--ui-file-upload-danger);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description,
+  .error,
+  .hint {
+    margin: 0;
+    color: var(--ui-file-upload-muted);
+    font-size: 12px;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+
+  .error {
+    color: var(--ui-file-upload-danger);
+  }
+
+  .surface {
+    position: relative;
+    display: grid;
+    gap: 12px;
+    align-items: center;
+    justify-items: start;
+    min-inline-size: 0;
+    min-block-size: 72px;
+    padding: 14px 16px;
+    border: var(--ui-file-upload-border);
+    border-radius: var(--ui-file-upload-radius);
+    background: var(--ui-file-upload-bg);
+    transition: border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease, transform 170ms ease;
+    cursor: pointer;
+    box-sizing: border-box;
+  }
+
+  .surface[data-dragging="true"] {
+    border-color: color-mix(in srgb, var(--ui-file-upload-focus) 62%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-file-upload-focus) 18%, transparent);
+    transform: translateY(-1px);
+  }
+
+  :host([surface="dropzone"]) .surface {
+    border-style: dashed;
+    justify-items: center;
+    text-align: center;
+    min-block-size: 168px;
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-file-upload-bg) 94%, #ffffff 6%),
+        var(--ui-file-upload-bg)
+      );
+  }
+
+  .headline {
+    font: 600 14px/1.35 "Inter", "IBM Plex Sans", sans-serif;
+  }
+
+  .subline {
+    color: var(--ui-file-upload-muted);
+    font-size: 12px;
+    line-height: 1.45;
+  }
+
+  .cta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 999px;
+    padding: 8px 12px;
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, transparent);
+    color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
+    font: 600 12px/1 "Inter", "IBM Plex Sans", sans-serif;
+    cursor: pointer;
+  }
+
+  .list {
+    display: grid;
+    gap: 8px;
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 10px 12px;
+    border: 1px solid color-mix(in srgb, var(--ui-file-upload-border-color) 70%, transparent);
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--ui-file-upload-bg) 97%, transparent);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+
+  .actions-summary {
+    display: grid;
+    gap: 2px;
+    min-inline-size: 0;
+  }
+
+  .actions-title {
+    font: 600 12px/1.3 "Inter", "IBM Plex Sans", sans-serif;
+  }
+
+  .actions-subtitle {
+    color: var(--ui-file-upload-muted);
+    font-size: 11px;
+    line-height: 1.35;
+  }
+
+  .actions-row {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .file {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    gap: 10px;
+    align-items: center;
+    padding: 10px 12px;
+    border: 1px solid color-mix(in srgb, var(--ui-file-upload-border-color) 76%, transparent);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--ui-file-upload-bg) 94%, transparent);
+  }
+
+  .preview {
+    inline-size: 38px;
+    block-size: 38px;
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--ui-file-upload-text) 8%, transparent);
+    overflow: hidden;
+    display: inline-grid;
+    place-items: center;
+    color: var(--ui-file-upload-muted);
+    font: 700 10px/1 "Inter", sans-serif;
+  }
+
+  .preview img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .file-text {
+    min-inline-size: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .file-name {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  .file-meta {
+    color: var(--ui-file-upload-muted);
+    font-size: 11px;
+    white-space: nowrap;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .status {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: 22px;
+    padding: 0 9px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-file-upload-text) 8%, transparent);
+    color: var(--ui-file-upload-muted);
+    font: 600 10px/1 "Inter", sans-serif;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  .status[data-state="pending"] {
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, transparent);
+    color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
+  }
+
+  .status[data-state="uploading"] {
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 84%, #0f172a 16%);
+  }
+
+  .status[data-state="success"] {
+    background: color-mix(in srgb, var(--ui-file-upload-success) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-file-upload-success) 86%, #052e16 14%);
+  }
+
+  .status[data-state="error"] {
+    background: color-mix(in srgb, var(--ui-file-upload-danger) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-file-upload-danger) 88%, #450a0a 12%);
+  }
+
+  .status[data-state="canceled"] {
+    background: color-mix(in srgb, var(--ui-file-upload-text) 8%, transparent);
+    color: var(--ui-file-upload-muted);
+  }
+
+  .progress {
+    grid-column: 2 / 5;
+    display: grid;
+    gap: 4px;
+  }
+
+  .progress-track {
+    inline-size: 100%;
+    block-size: 6px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-file-upload-text) 10%, transparent);
+  }
+
+  .progress-bar {
+    block-size: 100%;
+    border-radius: inherit;
+    background: color-mix(in srgb, var(--ui-file-upload-success) 74%, transparent);
+  }
+
+  .progress-text {
+    color: var(--ui-file-upload-muted);
+    font-size: 11px;
+    line-height: 1.2;
+  }
+
+  .file-remove {
+    border: none;
+    border-radius: 999px;
+    padding: 6px 9px;
+    background: color-mix(in srgb, currentColor 8%, transparent);
+    color: inherit;
+    cursor: pointer;
+    font: 600 11px/1 "Inter", sans-serif;
+  }
+
+  .file-remove[data-tone="danger"] {
+    color: var(--ui-file-upload-danger);
+  }
+
+  .file-remove[data-variant="primary"] {
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, transparent);
+    color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 84%, #0f172a 16%);
+  }
+
+  .file-error {
+    grid-column: 2 / 5;
+    color: var(--ui-file-upload-danger);
+    font-size: 11px;
+    line-height: 1.35;
+  }
+
+  .input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .label[hidden],
+  .description[hidden],
+  .error[hidden],
+  .meta[hidden],
+  .list[hidden] {
+    display: none;
+  }
+
+  :host([disabled]) .surface,
+  :host([disabled]) .file-remove,
+  :host([disabled]) .cta {
+    cursor: not-allowed;
+    opacity: 0.68;
+  }
+`;
+function O(m) {
+  if (!Number.isFinite(m) || m <= 0)
+    return "0 B";
+  const e = ["B", "KB", "MB", "GB"];
+  let t = m, i = 0;
+  for (; t >= 1024 && i < e.length - 1; )
+    t /= 1024, i += 1;
+  return `${t.toFixed(t >= 10 || i === 0 ? 0 : 1)} ${e[i]}`;
+}
+function W(m, e) {
+  if (!e.trim())
+    return !0;
+  const t = e.split(",").map((r) => r.trim()).filter(Boolean);
+  if (!t.length)
+    return !0;
+  const i = m.name.toLowerCase(), s = (m.type || "").toLowerCase();
+  return t.some((r) => {
+    const a = r.toLowerCase();
+    return a.startsWith(".") ? i.endsWith(a) : a.endsWith("/*") ? s.startsWith(a.slice(0, -1)) : s === a;
+  });
+}
+class T extends M {
+  constructor() {
+    super(), this._files = [], this.uploadRequest = null, this._formUnregister = null, this._surfaceEl = null, this._inputEl = null, this._listEl = null, this._errorEl = null, this._actionsEl = null, this._dragging = !1, this._dragDepth = 0, this._previewUrls = /* @__PURE__ */ new Map(), this._uploadState = /* @__PURE__ */ new Map(), this._uploadControllers = /* @__PURE__ */ new Map(), this._uploadSequence = 0, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onInputChange = this._onInputChange.bind(this), this._onDragEnter = this._onDragEnter.bind(this), this._onDragLeave = this._onDragLeave.bind(this), this._onDragOver = this._onDragOver.bind(this), this._onDrop = this._onDrop.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "name",
+      "label",
+      "description",
+      "accept",
+      "multiple",
+      "disabled",
+      "required",
+      "max-files",
+      "max-size",
+      "button-text",
+      "drop-label",
+      "surface",
+      "data-error",
+      "progress",
+      "show-previews",
+      "upload-on-select",
+      "upload-button-text"
+    ];
+  }
+  get files() {
+    return [...this._files];
+  }
+  get uploading() {
+    return Array.from(this._uploadState.values()).some((e) => e.state === "uploading");
+  }
+  setFiles(e) {
+    this._applyFiles(e, "api", !0);
+  }
+  openPicker() {
+    var e;
+    this._disabled() || (e = this._inputEl) == null || e.click();
+  }
+  clearFiles() {
+    this._files.length && (this.cancelUploads(), this._files = [], this._uploadState.clear(), this._inputEl && (this._inputEl.value = ""), this._syncUi(), this._emit("change", { files: [], source: "clear" }), this._emit("clear", {}));
+  }
+  removeFile(e) {
+    if (this._disabled() || e < 0 || e >= this._files.length)
+      return;
+    const t = this._files[e];
+    this.cancelUpload(this._fileKey(t)), this._uploadState.delete(this._fileKey(t)), this._files = this._files.filter((i, s) => s !== e), this._syncUi(), this._emit("change", { files: this.files, source: "remove" });
+  }
+  async startUpload() {
+    if (!this.uploadRequest || this._disabled())
+      return;
+    const e = this._files.filter((i) => {
+      const s = this._uploadState.get(this._fileKey(i));
+      return !s || s.state === "pending" || s.state === "error" || s.state === "canceled";
+    });
+    if (!e.length)
+      return;
+    const t = ++this._uploadSequence;
+    this._emit("upload-start", { files: e, requestId: t }), await Promise.all(e.map((i) => this._runUpload(i, t))), this._emit("upload-complete", {
+      files: this.files,
+      requestId: t,
+      statuses: Object.fromEntries(Array.from(this._uploadState.entries()).map(([i, s]) => [i, { ...s }]))
+    }), this._syncUi();
+  }
+  cancelUploads() {
+    Array.from(this._uploadControllers.keys()).forEach((e) => this.cancelUpload(e));
+  }
+  cancelUpload(e) {
+    const t = typeof e == "string" ? e : this._fileKey(e), i = this._uploadControllers.get(t);
+    i && i.abort();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._registerWithForm();
+  }
+  disconnectedCallback() {
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null), this._revokePreviewUrls(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, t, i) {
+    t !== i && (e === "name" && this.isConnected && this._registerWithForm(), this._surfaceEl && this._syncUi());
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  render() {
+    var e, t, i, s, r, a, n;
+    this.setContent(`
+      <style>${j}</style>
+      <div class="root">
+        <div class="meta" hidden>
+          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
+          <div class="description" hidden></div>
+        </div>
+        <div class="surface" part="surface" tabindex="0" data-dragging="false">
+          <div class="headline"></div>
+          <div class="subline"></div>
+          <button class="cta" part="trigger" type="button"></button>
+          <input class="input" part="input" type="file" />
+        </div>
+        <div class="error" part="error" hidden></div>
+        <div class="actions" part="actions" hidden>
+          <div class="actions-summary">
+            <div class="actions-title"></div>
+            <div class="actions-subtitle"></div>
+          </div>
+          <div class="actions-row"></div>
+        </div>
+        <div class="list" part="list" hidden></div>
+      </div>
+    `), this._surfaceEl = this.root.querySelector(".surface"), this._inputEl = this.root.querySelector(".input"), this._listEl = this.root.querySelector(".list"), this._errorEl = this.root.querySelector(".error"), this._actionsEl = this.root.querySelector(".actions"), (e = this._surfaceEl) == null || e.addEventListener("click", this._onClick), (t = this._surfaceEl) == null || t.addEventListener("keydown", this._onKeyDown), (i = this._surfaceEl) == null || i.addEventListener("dragenter", this._onDragEnter), (s = this._surfaceEl) == null || s.addEventListener("dragleave", this._onDragLeave), (r = this._surfaceEl) == null || r.addEventListener("dragover", this._onDragOver), (a = this._surfaceEl) == null || a.addEventListener("drop", this._onDrop), (n = this._inputEl) == null || n.addEventListener("change", this._onInputChange), this._syncUi();
+  }
+  _disabled() {
+    return this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+  }
+  _maxFiles() {
+    const e = this.getAttribute("max-files");
+    if (!e)
+      return null;
+    const t = Number(e);
+    return Number.isFinite(t) && t > 0 ? Math.floor(t) : null;
+  }
+  _maxSize() {
+    const e = this.getAttribute("max-size");
+    if (!e)
+      return null;
+    const t = Number(e);
+    return Number.isFinite(t) && t > 0 ? t : null;
+  }
+  _appendFiles(e, t) {
+    this._applyFiles(e, t, !1);
+  }
+  _applyFiles(e, t, i) {
+    const s = this.hasAttribute("multiple"), r = i ? [] : s ? [...this._files] : [], a = [], n = [], f = this.getAttribute("accept") || "", _ = this._maxFiles(), v = this._maxSize(), x = new Set(r.map((o) => this._fileKey(o)));
+    e.forEach((o) => {
+      const b = this._fileKey(o);
+      if (!x.has(b)) {
+        if (!W(o, f)) {
+          n.push({ file: o, reason: "accept" });
+          return;
+        }
+        if (v != null && o.size > v) {
+          n.push({ file: o, reason: "max-size" });
+          return;
+        }
+        if (_ != null && r.length + a.length >= _) {
+          n.push({ file: o, reason: "max-files" });
+          return;
+        }
+        x.add(b), a.push(o);
+      }
+    }), i && (this.cancelUploads(), this._uploadState.clear()), this._files = [...r, ...a], !s && this._files.length > 1 && (this._files = [this._files[this._files.length - 1]]);
+    const w = new Set(this._files.map((o) => this._fileKey(o)));
+    Array.from(this._uploadState.keys()).forEach((o) => {
+      w.has(o) || this._uploadState.delete(o);
+    }), this._files.forEach((o) => {
+      const b = this._fileKey(o);
+      this._uploadState.has(b) || this._uploadState.set(b, { state: "pending", progress: null });
+    }), this._syncUi(), this._emit("change", { files: this.files, source: t }), n.length ? (this._emit("reject", { rejected: n, source: t }), this.setAttribute("data-error", n[0].reason === "accept" ? "One or more files do not match the accepted types" : n[0].reason === "max-size" ? "One or more files exceed the size limit" : "Too many files selected")) : this.removeAttribute("data-error"), a.length && this.hasAttribute("upload-on-select") && this.uploadRequest && this.startUpload(), this._syncUi();
+  }
+  _emit(e, t) {
+    this.dispatchEvent(new CustomEvent(e, { detail: t, bubbles: !0, composed: !0 }));
+  }
+  _fileKey(e) {
+    return `${e.name}::${e.size}::${e.lastModified}`;
+  }
+  _setUploadEntry(e, t) {
+    this._uploadState.set(e, t), this._syncUi();
+  }
+  async _runUpload(e, t) {
+    if (!this.uploadRequest)
+      return;
+    const i = this._fileKey(e), s = new AbortController();
+    this._uploadControllers.set(i, s), this._setUploadEntry(i, { state: "uploading", progress: 0 });
+    const r = (a) => {
+      const n = this._uploadState.get(i);
+      if (!n || n.state !== "uploading")
+        return;
+      const f = Number.isFinite(a) ? Math.max(0, Math.min(100, a)) : 0;
+      this._uploadState.set(i, { ...n, progress: f }), this._emit("upload-progress", { file: e, fileKey: i, progress: f, requestId: t }), this._syncUi();
+    };
+    try {
+      const a = await this.uploadRequest({
+        file: e,
+        files: this.files,
+        signal: s.signal,
+        setProgress: r
+      });
+      s.signal.aborted ? (this._uploadState.set(i, { state: "canceled", progress: null }), this._emit("upload-cancel", { file: e, fileKey: i, requestId: t })) : (this._uploadState.set(i, { state: "success", progress: 100, result: a }), this._emit("upload-success", { file: e, fileKey: i, requestId: t, result: a }));
+    } catch (a) {
+      if (s.signal.aborted)
+        this._uploadState.set(i, { state: "canceled", progress: null }), this._emit("upload-cancel", { file: e, fileKey: i, requestId: t });
+      else {
+        const n = a instanceof Error ? a.message : "Upload failed";
+        this._uploadState.set(i, { state: "error", progress: null, error: n }), this._emit("upload-error", { file: e, fileKey: i, requestId: t, error: n });
+      }
+    } finally {
+      this._uploadControllers.delete(i), this._syncUi();
+    }
+  }
+  _parseProgress() {
+    const e = this.getAttribute("progress");
+    if (!e)
+      return {};
+    try {
+      const t = JSON.parse(e);
+      return !t || typeof t != "object" || Array.isArray(t) ? {} : Object.fromEntries(
+        Object.entries(t).map(([i, s]) => {
+          const r = Number(s);
+          return [i, Number.isFinite(r) ? Math.max(0, Math.min(100, r)) : 0];
+        })
+      );
+    } catch {
+      return {};
+    }
+  }
+  _statusLabel(e) {
+    switch (e) {
+      case "uploading":
+        return "Uploading";
+      case "success":
+        return "Uploaded";
+      case "error":
+        return "Failed";
+      case "canceled":
+        return "Canceled";
+      default:
+        return "Pending";
+    }
+  }
+  _actionSummary() {
+    const e = this._files.map((r) => this._uploadState.get(this._fileKey(r)) || { state: "pending", progress: null }), t = e.filter((r) => r.state === "uploading").length, i = e.filter((r) => r.state === "error").length, s = e.filter((r) => r.state === "success").length;
+    return t > 0 ? {
+      title: "Upload in progress",
+      subtitle: `${t} file${t === 1 ? "" : "s"} still uploading`
+    } : i > 0 ? {
+      title: "Retry required",
+      subtitle: `${i} file${i === 1 ? "" : "s"} failed to upload`
+    } : s > 0 && s === this._files.length ? {
+      title: "Uploads complete",
+      subtitle: `${s} file${s === 1 ? "" : "s"} uploaded successfully`
+    } : {
+      title: "Ready to upload",
+      subtitle: `${this._files.length} file${this._files.length === 1 ? "" : "s"} queued`
+    };
+  }
+  _getPreviewUrl(e) {
+    if (!this.hasAttribute("show-previews") || typeof URL > "u" || typeof URL.createObjectURL != "function" || !e.type.startsWith("image/"))
+      return null;
+    const t = this._fileKey(e), i = this._previewUrls.get(t);
+    if (i)
+      return i;
+    const s = URL.createObjectURL(e);
+    return this._previewUrls.set(t, s), s;
+  }
+  _revokePreviewUrls(e = /* @__PURE__ */ new Set()) {
+    this._previewUrls.forEach((t, i) => {
+      if (!e.has(i)) {
+        try {
+          URL.revokeObjectURL(t);
+        } catch {
+        }
+        this._previewUrls.delete(i);
+      }
+    });
+  }
+  _syncUi() {
+    if (!this._surfaceEl || !this._inputEl || !this._listEl || !this._errorEl || !this._actionsEl)
+      return;
+    const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), i = this.hasAttribute("required"), s = this._disabled(), r = this.getAttribute("drop-label") || "Drag files here or browse from your device", a = this.getAttribute("button-text") || "Choose files", n = this.getAttribute("upload-button-text") || "Start upload", f = (this.getAttribute("data-error") || "").trim(), _ = this._parseProgress(), v = this.root.querySelector(".label"), x = this.root.querySelector(".description"), w = this.root.querySelector(".meta"), o = this.root.querySelector(".headline"), b = this.root.querySelector(".subline"), D = this.root.querySelector(".cta"), $ = this.root.querySelector(".required"), B = this.root.querySelector(".actions-title"), I = this.root.querySelector(".actions-subtitle"), k = this.root.querySelector(".actions-row");
+    v.hidden = !e, v.querySelector(".label-text").textContent = e, $.hidden = !i, x.hidden = !t, x.textContent = t, w.hidden = !e && !t, o.textContent = this._files.length ? `${this._files.length} file${this._files.length === 1 ? "" : "s"} selected` : r, b.textContent = this._files.length ? this._files.map((p) => p.name).join(", ") : this.getAttribute("accept") ? `Accepted: ${this.getAttribute("accept")}` : "Supports click, keyboard, and drag-and-drop upload", D.textContent = a, D.disabled = s, this._surfaceEl.setAttribute("data-dragging", this._dragging ? "true" : "false"), this._surfaceEl.setAttribute("aria-disabled", s ? "true" : "false"), this._inputEl.disabled = s, this._inputEl.multiple = this.hasAttribute("multiple"), this._inputEl.name = this.getAttribute("name") || "", this._inputEl.accept = this.getAttribute("accept") || "", this._errorEl.hidden = !f, this._errorEl.textContent = f;
+    const L = !!this.uploadRequest && this._files.length > 0, N = this._actionSummary();
+    if (this._actionsEl.hidden = !L, B.textContent = N.title, I.textContent = N.subtitle, k.replaceChildren(), L) {
+      const p = this._files.some((l) => {
+        var c;
+        const h = ((c = this._uploadState.get(this._fileKey(l))) == null ? void 0 : c.state) || "pending";
+        return h === "pending" || h === "error" || h === "canceled";
+      }), g = document.createElement("button");
+      if (g.type = "button", g.className = "file-remove", g.dataset.variant = "primary", g.textContent = this.uploading ? "Uploading…" : p ? n : "Upload complete", g.disabled = s || this.uploading || !p, g.addEventListener("click", (l) => {
+        l.stopPropagation(), this.startUpload();
+      }), k.append(g), this.uploading) {
+        const l = document.createElement("button");
+        l.type = "button", l.className = "file-remove", l.dataset.tone = "danger", l.textContent = "Cancel uploads", l.disabled = s, l.addEventListener("click", (h) => {
+          h.stopPropagation(), this.cancelUploads();
+        }), k.append(l);
+      }
+    }
+    const P = /* @__PURE__ */ new Set();
+    this._listEl.hidden = this._files.length === 0, this._listEl.replaceChildren(...this._files.map((p, g) => {
+      var R;
+      const l = document.createElement("div");
+      l.className = "file";
+      const h = this._fileKey(p);
+      P.add(h);
+      const c = this._uploadState.get(h) || { state: "pending", progress: null }, y = document.createElement("div");
+      y.className = "preview";
+      const K = this._getPreviewUrl(p);
+      if (K) {
+        const d = document.createElement("img");
+        d.src = K, d.alt = "", y.append(d);
+      } else
+        y.textContent = ((R = p.name.split(".").pop()) == null ? void 0 : R.slice(0, 4).toUpperCase()) || "FILE";
+      const S = document.createElement("div");
+      S.className = "file-text";
+      const C = document.createElement("div");
+      C.className = "file-name", C.textContent = p.name;
+      const E = document.createElement("div");
+      E.className = "file-meta", E.textContent = O(p.size);
+      const U = document.createElement("span");
+      U.className = "status", U.dataset.state = c.state, U.textContent = this._statusLabel(c.state), E.append(U), S.append(C, E);
+      const u = document.createElement("button");
+      u.type = "button", u.className = "file-remove", u.disabled = s, c.state === "uploading" ? (u.textContent = "Cancel", u.dataset.tone = "danger", u.addEventListener("click", (d) => {
+        d.stopPropagation(), this.cancelUpload(h);
+      })) : c.state === "error" ? (u.textContent = "Retry", u.dataset.variant = "primary", u.addEventListener("click", (d) => {
+        d.stopPropagation(), this._uploadState.set(h, { state: "pending", progress: null }), this._syncUi(), this.startUpload();
+      })) : (u.textContent = "Remove", u.addEventListener("click", (d) => {
+        d.stopPropagation(), this.removeFile(g);
+      })), l.append(y, S, u);
+      const A = typeof c.progress == "number" ? c.progress : _[h] ?? _[p.name];
+      if (typeof A == "number") {
+        const d = document.createElement("div");
+        d.className = "progress";
+        const z = document.createElement("div");
+        z.className = "progress-track";
+        const F = document.createElement("div");
+        F.className = "progress-bar", F.style.inlineSize = `${A}%`, z.append(F);
+        const q = document.createElement("div");
+        q.className = "progress-text", q.textContent = c.state === "success" ? "Upload complete" : c.state === "error" ? c.error || "Upload failed" : c.state === "canceled" ? "Upload canceled" : `Uploading ${Math.round(A)}%`, d.append(z, q), l.append(d);
+      } else if (c.state === "error" && c.error) {
+        const d = document.createElement("div");
+        d.className = "file-error", d.textContent = c.error, l.append(d);
+      }
+      return l;
+    })), this._revokePreviewUrls(P);
+  }
+  _registerWithForm() {
+    var e;
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null);
+    try {
+      const i = this.getRootNode().host, r = ((e = i == null ? void 0 : i.closest) == null ? void 0 : e.call(i, "ui-form")) || null || this.closest("ui-form"), a = this.getAttribute("name");
+      r && typeof r.registerField == "function" && a && (this._formUnregister = r.registerField(a, {
+        name: a,
+        getValue: () => this.files,
+        setValue: (n) => {
+          Array.isArray(n) && n.every((f) => f instanceof File) && this.setFiles(n);
+        },
+        validate: async () => this.hasAttribute("required") && this._files.length === 0 ? { valid: !1, message: "At least one file is required" } : { valid: !0 },
+        setError: (n) => {
+          n ? this.setAttribute("data-error", n) : this.removeAttribute("data-error"), this._syncUi();
+        }
+      }));
+    } catch {
+    }
+  }
+  _onClick(e) {
+    const t = e.target;
+    t != null && t.closest(".file-remove") || this.openPicker();
+  }
+  _onKeyDown(e) {
+    e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.openPicker());
+  }
+  _onInputChange() {
+    var t;
+    const e = Array.from(((t = this._inputEl) == null ? void 0 : t.files) || []);
+    e.length && (this._appendFiles(e, "picker"), this._inputEl && (this._inputEl.value = ""));
+  }
+  _onDragEnter(e) {
+    this._disabled() || (e.preventDefault(), this._dragDepth += 1, this._dragging = !0, this._syncUi());
+  }
+  _onDragLeave(e) {
+    if (!this._surfaceEl)
+      return;
+    const t = e.relatedTarget;
+    t && this._surfaceEl.contains(t) || (this._dragDepth = Math.max(0, this._dragDepth - 1), !(this._dragDepth > 0) && (this._dragging = !1, this._syncUi()));
+  }
+  _onDragOver(e) {
+    this._disabled() || e.preventDefault();
+  }
+  _onDrop(e) {
+    var i;
+    if (this._disabled())
+      return;
+    e.preventDefault(), this._dragDepth = 0, this._dragging = !1;
+    const t = Array.from(((i = e.dataTransfer) == null ? void 0 : i.files) || []);
+    t.length && this._appendFiles(t, "drop"), this._syncUi();
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-file-upload") && customElements.define("ui-file-upload", T);
+export {
+  T as UIFileUpload
+};