@editora/ui-core 0.1.25 → 0.2.1

package/dist/file-upload.esm.js

@@ -1,15 +1,15 @@
 import { E as I } from "./ElementBase-BeZT54Hj.mjs";
 const M = `
   :host {
-    --ui-file-upload-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-file-upload-border-color: var(--ui-color-line, 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-radius: calc(var(--ui-radius, 6px) + 2px);
     --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, #526175);
     --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, #15803d);
+    --ui-file-upload-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
+    --ui-file-upload-success: var(--ui-color-success-text, var(--ui-color-success, #15803d));
     display: block;
     inline-size: 100%;
     min-inline-size: 0;
@@ -75,10 +75,16 @@ const M = `
     box-sizing: border-box;
   }
 
+  :host(:not([disabled])) .surface:hover:not([data-dragging="true"]) {
+    border-color: var(--ui-color-line-strong, var(--ui-file-upload-border-color));
+    background: color-mix(in srgb, currentColor 2%, var(--ui-file-upload-bg));
+  }
+
   .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);
+    border-color: var(--ui-file-upload-focus);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-file-upload-focus);
+    outline-offset: -1px;
+    background: color-mix(in srgb, var(--ui-file-upload-focus) 6%, var(--ui-file-upload-bg));
   }
 
   :host([surface="dropzone"]) .surface {
@@ -86,16 +92,10 @@ const M = `
     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;
+    font: 500 14px/1.35 "Inter", "IBM Plex Sans", sans-serif;
   }
 
   .subline {
@@ -109,12 +109,24 @@ const M = `
     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;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    min-height: var(--ui-control-height-2, 32px);
+    padding: 0 12px;
+    /* A primary button: the theme's text colour on its fill (the tinted version was unreadable on amber). */
+    background: var(--ui-color-primary, #2563eb);
+    color: var(--ui-color-foreground-on-primary, #ffffff);
+    font: 500 14px/1 "Inter", "IBM Plex Sans", sans-serif;
     cursor: pointer;
+    transition: background-color 120ms ease;
+  }
+
+  .cta:hover {
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 88%, #000);
+  }
+
+  .cta:focus-visible {
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-color-primary, #2563eb));
+    outline-offset: var(--ui-ring-offset, 2px);
   }
 
   .list {
@@ -129,9 +141,9 @@ const M = `
     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);
+    border: 1px solid var(--ui-file-upload-border-color);
+    border-radius: var(--ui-file-upload-radius);
+    background: transparent;
   }
 
   .actions[hidden] {
@@ -166,15 +178,15 @@ const M = `
     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);
+    border: 1px solid var(--ui-file-upload-border-color);
+    border-radius: var(--ui-file-upload-radius);
+    background: transparent;
   }
 
   .preview {
     inline-size: 38px;
     block-size: 38px;
-    border-radius: 10px;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     background: color-mix(in srgb, var(--ui-file-upload-text) 8%, transparent);
     overflow: hidden;
     display: inline-grid;
@@ -231,12 +243,12 @@ const M = `
 
   .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%);
+    color: var(--ui-color-accent-text, 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%);
+    color: var(--ui-color-accent-text, color-mix(in srgb, var(--ui-color-primary, #2563eb) 84%, #0f172a 16%));
   }
 
   .status[data-state="success"] {
@@ -271,7 +283,16 @@ const M = `
   .progress-bar {
     block-size: 100%;
     border-radius: inherit;
-    background: color-mix(in srgb, var(--ui-file-upload-success) 74%, transparent);
+    background: var(--ui-color-primary, #2563eb);
+    transition: inline-size 200ms ease;
+  }
+
+  .progress-bar[data-state="success"] {
+    background: var(--ui-file-upload-success);
+  }
+
+  .progress-bar[data-state="error"] {
+    background: var(--ui-file-upload-danger);
   }
 
   .progress-text {
@@ -281,13 +302,24 @@ const M = `
   }
 
   .file-remove {
-    border: none;
-    border-radius: 999px;
-    padding: 6px 9px;
-    background: color-mix(in srgb, currentColor 8%, transparent);
+    border: 1px solid var(--ui-file-upload-border-color);
+    border-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
+    min-block-size: var(--ui-control-height-1, 24px);
+    padding: 0 8px;
+    background: transparent;
     color: inherit;
     cursor: pointer;
-    font: 600 11px/1 "Inter", sans-serif;
+    font: 500 12px/1 "Inter", sans-serif;
+    transition: background-color 120ms ease;
+  }
+
+  .file-remove:hover {
+    background: var(--ui-color-fill-hover, color-mix(in srgb, currentColor 8%, transparent));
+  }
+
+  .file-remove:focus-visible {
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-file-upload-focus));
+    outline-offset: var(--ui-ring-offset, 1px);
   }
 
   .file-remove[data-tone="danger"] {
@@ -295,8 +327,9 @@ const M = `
   }
 
   .file-remove[data-variant="primary"] {
+    border-color: transparent;
     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%);
+    color: var(--ui-color-accent-text, color-mix(in srgb, var(--ui-color-primary, #2563eb) 84%, #0f172a 16%));
   }
 
   .file-error {
@@ -322,6 +355,15 @@ const M = `
     display: none;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .surface,
+    .cta,
+    .file-remove,
+    .progress-bar {
+      transition: none !important;
+    }
+  }
+
   :host([disabled]) .surface,
   :host([disabled]) .file-remove,
   :host([disabled]) .cta {
@@ -341,10 +383,10 @@ function O(g, e) {
   if (!e.trim()) return !0;
   const t = e.split(",").map((a) => a.trim()).filter(Boolean);
   if (!t.length) return !0;
-  const i = g.name.toLowerCase(), s = (g.type || "").toLowerCase();
+  const i = g.name.toLowerCase(), r = (g.type || "").toLowerCase();
   return t.some((a) => {
-    const r = a.toLowerCase();
-    return r.startsWith(".") ? i.endsWith(r) : r.endsWith("/*") ? s.startsWith(r.slice(0, -1)) : s === r;
+    const s = a.toLowerCase();
+    return s.startsWith(".") ? i.endsWith(s) : s.endsWith("/*") ? r.startsWith(s.slice(0, -1)) : r === s;
   });
 }
 class W extends I {
@@ -390,20 +432,20 @@ class W extends I {
   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" });
+    this.cancelUpload(this._fileKey(t)), this._uploadState.delete(this._fileKey(t)), this._files = this._files.filter((i, r) => r !== 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";
+      const r = this._uploadState.get(this._fileKey(i));
+      return !r || r.state === "pending" || r.state === "error" || r.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 }]))
+      statuses: Object.fromEntries(Array.from(this._uploadState.entries()).map(([i, r]) => [i, { ...r }]))
     }), this._syncUi();
   }
   cancelUploads() {
@@ -470,32 +512,32 @@ class W extends I {
     this._applyFiles(e, t, !1);
   }
   _applyFiles(e, t, i) {
-    const s = this.hasAttribute("multiple"), a = i ? [] : s ? [...this._files] : [], r = [], n = [], m = this.getAttribute("accept") || "", _ = this._maxFiles(), v = this._maxSize(), x = new Set(a.map((o) => this._fileKey(o)));
-    e.forEach((o) => {
-      const b = this._fileKey(o);
+    const r = this.hasAttribute("multiple"), a = i ? [] : r ? [...this._files] : [], s = [], o = [], m = this.getAttribute("accept") || "", _ = this._maxFiles(), v = this._maxSize(), x = new Set(a.map((n) => this._fileKey(n)));
+    e.forEach((n) => {
+      const b = this._fileKey(n);
       if (!x.has(b)) {
-        if (!O(o, m)) {
-          n.push({ file: o, reason: "accept" });
+        if (!O(n, m)) {
+          o.push({ file: n, reason: "accept" });
           return;
         }
-        if (v != null && o.size > v) {
-          n.push({ file: o, reason: "max-size" });
+        if (v != null && n.size > v) {
+          o.push({ file: n, reason: "max-size" });
           return;
         }
-        if (_ != null && a.length + r.length >= _) {
-          n.push({ file: o, reason: "max-files" });
+        if (_ != null && a.length + s.length >= _) {
+          o.push({ file: n, reason: "max-files" });
           return;
         }
-        x.add(b), r.push(o);
+        x.add(b), s.push(n);
       }
-    }), i && (this.cancelUploads(), this._uploadState.clear()), this._files = [...a, ...r], !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);
+    }), i && (this.cancelUploads(), this._uploadState.clear()), this._files = [...a, ...s], !r && this._files.length > 1 && (this._files = [this._files[this._files.length - 1]]);
+    const w = new Set(this._files.map((n) => this._fileKey(n)));
+    Array.from(this._uploadState.keys()).forEach((n) => {
+      w.has(n) || this._uploadState.delete(n);
+    }), this._files.forEach((n) => {
+      const b = this._fileKey(n);
       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"), r.length && this.hasAttribute("upload-on-select") && this.uploadRequest && this.startUpload(), this._syncUi();
+    }), this._syncUi(), this._emit("change", { files: this.files, source: t }), o.length ? (this._emit("reject", { rejected: o, source: t }), this.setAttribute("data-error", o[0].reason === "accept" ? "One or more files do not match the accepted types" : o[0].reason === "max-size" ? "One or more files exceed the size limit" : "Too many files selected")) : this.removeAttribute("data-error"), s.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 }));
@@ -508,28 +550,28 @@ class W extends I {
   }
   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 a = (r) => {
-      const n = this._uploadState.get(i);
-      if (!n || n.state !== "uploading") return;
-      const m = Number.isFinite(r) ? Math.max(0, Math.min(100, r)) : 0;
-      this._uploadState.set(i, { ...n, progress: m }), this._emit("upload-progress", { file: e, fileKey: i, progress: m, requestId: t }), this._syncUi();
+    const i = this._fileKey(e), r = new AbortController();
+    this._uploadControllers.set(i, r), this._setUploadEntry(i, { state: "uploading", progress: 0 });
+    const a = (s) => {
+      const o = this._uploadState.get(i);
+      if (!o || o.state !== "uploading") return;
+      const m = Number.isFinite(s) ? Math.max(0, Math.min(100, s)) : 0;
+      this._uploadState.set(i, { ...o, progress: m }), this._emit("upload-progress", { file: e, fileKey: i, progress: m, requestId: t }), this._syncUi();
     };
     try {
-      const r = await this.uploadRequest({
+      const s = await this.uploadRequest({
         file: e,
         files: this.files,
-        signal: s.signal,
+        signal: r.signal,
         setProgress: a
       });
-      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: r }), this._emit("upload-success", { file: e, fileKey: i, requestId: t, result: r }));
-    } catch (r) {
-      if (s.signal.aborted)
+      r.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: s }), this._emit("upload-success", { file: e, fileKey: i, requestId: t, result: s }));
+    } catch (s) {
+      if (r.signal.aborted)
         this._uploadState.set(i, { state: "canceled", progress: null }), this._emit("upload-cancel", { file: e, fileKey: i, requestId: t });
       else {
-        const n = r instanceof Error ? r.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 });
+        const o = s instanceof Error ? s.message : "Upload failed";
+        this._uploadState.set(i, { state: "error", progress: null, error: o }), this._emit("upload-error", { file: e, fileKey: i, requestId: t, error: o });
       }
     } finally {
       this._uploadControllers.delete(i), this._syncUi();
@@ -541,8 +583,8 @@ class W extends I {
     try {
       const t = JSON.parse(e);
       return !t || typeof t != "object" || Array.isArray(t) ? {} : Object.fromEntries(
-        Object.entries(t).map(([i, s]) => {
-          const a = Number(s);
+        Object.entries(t).map(([i, r]) => {
+          const a = Number(r);
           return [i, Number.isFinite(a) ? Math.max(0, Math.min(100, a)) : 0];
         })
       );
@@ -565,16 +607,16 @@ class W extends I {
     }
   }
   _actionSummary() {
-    const e = this._files.map((a) => this._uploadState.get(this._fileKey(a)) || { state: "pending", progress: null }), t = e.filter((a) => a.state === "uploading").length, i = e.filter((a) => a.state === "error").length, s = e.filter((a) => a.state === "success").length;
+    const e = this._files.map((a) => this._uploadState.get(this._fileKey(a)) || { state: "pending", progress: null }), t = e.filter((a) => a.state === "uploading").length, i = e.filter((a) => a.state === "error").length, r = e.filter((a) => a.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 ? {
+    } : r > 0 && r === this._files.length ? {
       title: "Uploads complete",
-      subtitle: `${s} file${s === 1 ? "" : "s"} uploaded successfully`
+      subtitle: `${r} file${r === 1 ? "" : "s"} uploaded successfully`
     } : {
       title: "Ready to upload",
       subtitle: `${this._files.length} file${this._files.length === 1 ? "" : "s"} queued`
@@ -584,8 +626,8 @@ class W extends I {
     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;
+    const r = URL.createObjectURL(e);
+    return this._previewUrls.set(t, r), r;
   }
   _revokePreviewUrls(e = /* @__PURE__ */ new Set()) {
     this._previewUrls.forEach((t, i) => {
@@ -600,23 +642,23 @@ class W extends 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();
+    const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), i = this.hasAttribute("required"), r = this._disabled();
     this._inputEl.setAttribute("aria-label", e || (this.getAttribute("aria-label") || "").trim() || "Choose files");
-    const a = this.getAttribute("drop-label") || "Drag files here or browse from your device", r = this.getAttribute("button-text") || "Choose files", n = this.getAttribute("upload-button-text") || "Start upload", m = (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"), R = this.root.querySelector(".required"), $ = this.root.querySelector(".actions-title"), B = this.root.querySelector(".actions-subtitle"), k = this.root.querySelector(".actions-row");
-    v.hidden = !e, v.querySelector(".label-text").textContent = e, R.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` : a, 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 = r, 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 = !m, this._errorEl.textContent = m;
+    const a = this.getAttribute("drop-label") || "Drag files here or browse from your device", s = this.getAttribute("button-text") || "Choose files", o = this.getAttribute("upload-button-text") || "Start upload", m = (this.getAttribute("data-error") || "").trim(), _ = this._parseProgress(), v = this.root.querySelector(".label"), x = this.root.querySelector(".description"), w = this.root.querySelector(".meta"), n = this.root.querySelector(".headline"), b = this.root.querySelector(".subline"), D = this.root.querySelector(".cta"), R = this.root.querySelector(".required"), $ = this.root.querySelector(".actions-title"), B = this.root.querySelector(".actions-subtitle"), S = this.root.querySelector(".actions-row");
+    v.hidden = !e, v.querySelector(".label-text").textContent = e, R.hidden = !i, x.hidden = !t, x.textContent = t, w.hidden = !e && !t, n.textContent = this._files.length ? `${this._files.length} file${this._files.length === 1 ? "" : "s"} selected` : a, 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 = s, D.disabled = r, this._surfaceEl.setAttribute("data-dragging", this._dragging ? "true" : "false"), this._surfaceEl.setAttribute("aria-disabled", r ? "true" : "false"), this._inputEl.disabled = r, this._inputEl.multiple = this.hasAttribute("multiple"), this._inputEl.name = this.getAttribute("name") || "", this._inputEl.accept = this.getAttribute("accept") || "", this._errorEl.hidden = !m, this._errorEl.textContent = m;
     const L = !!this.uploadRequest && this._files.length > 0, N = this._actionSummary();
-    if (this._actionsEl.hidden = !L, $.textContent = N.title, B.textContent = N.subtitle, k.replaceChildren(), L) {
+    if (this._actionsEl.hidden = !L, $.textContent = N.title, B.textContent = N.subtitle, S.replaceChildren(), L) {
       const p = this._files.some((l) => {
         const h = this._uploadState.get(this._fileKey(l))?.state || "pending";
         return h === "pending" || h === "error" || h === "canceled";
       }), f = document.createElement("button");
-      if (f.type = "button", f.className = "file-remove", f.dataset.variant = "primary", f.textContent = this.uploading ? "Uploading…" : p ? n : "Upload complete", f.disabled = s || this.uploading || !p, f.addEventListener("click", (l) => {
+      if (f.type = "button", f.className = "file-remove", f.dataset.variant = "primary", f.textContent = this.uploading ? "Uploading…" : p ? o : "Upload complete", f.disabled = r || this.uploading || !p, f.addEventListener("click", (l) => {
         l.stopPropagation(), this.startUpload();
-      }), k.append(f), this.uploading) {
+      }), S.append(f), 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) => {
+        l.type = "button", l.className = "file-remove", l.dataset.tone = "danger", l.textContent = "Cancel uploads", l.disabled = r, l.addEventListener("click", (h) => {
           h.stopPropagation(), this.cancelUploads();
-        }), k.append(l);
+        }), S.append(l);
       }
     }
     const P = /* @__PURE__ */ new Set();
@@ -625,7 +667,7 @@ class W extends I {
       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");
+      const u = this._uploadState.get(h) || { state: "pending", progress: null }, y = document.createElement("div");
       y.className = "preview";
       const K = this._getPreviewUrl(p);
       if (K) {
@@ -633,35 +675,35 @@ class W extends I {
         d.src = K, d.alt = "", y.append(d);
       } else
         y.textContent = p.name.split(".").pop()?.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;
+      C.className = "file-text";
+      const A = document.createElement("div");
+      A.className = "file-name", A.textContent = p.name;
       const E = document.createElement("div");
       E.className = "file-meta", E.textContent = j(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) => {
+      U.className = "status", U.dataset.state = u.state, U.textContent = this._statusLabel(u.state), E.append(U), C.append(A, E);
+      const c = document.createElement("button");
+      c.type = "button", c.className = "file-remove", c.disabled = r, u.state === "uploading" ? (c.textContent = "Cancel", c.dataset.tone = "danger", c.addEventListener("click", (d) => {
         d.stopPropagation(), this.cancelUpload(h);
-      })) : c.state === "error" ? (u.textContent = "Retry", u.dataset.variant = "primary", u.addEventListener("click", (d) => {
+      })) : u.state === "error" ? (c.textContent = "Retry", c.dataset.variant = "primary", c.addEventListener("click", (d) => {
         d.stopPropagation(), this._uploadState.set(h, { state: "pending", progress: null }), this._syncUi(), this.startUpload();
-      })) : (u.textContent = "Remove", u.addEventListener("click", (d) => {
+      })) : (c.textContent = "Remove", c.addEventListener("click", (d) => {
         d.stopPropagation(), this.removeFile(f);
-      })), l.append(y, S, u);
-      const A = typeof c.progress == "number" ? c.progress : _[h] ?? _[p.name];
-      if (typeof A == "number") {
+      })), l.append(y, C, c);
+      const z = typeof u.progress == "number" ? u.progress : _[h] ?? _[p.name];
+      if (typeof z == "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);
+        F.className = "progress-track";
+        const k = document.createElement("div");
+        k.className = "progress-bar", k.dataset.state = u.state, k.style.inlineSize = `${z}%`, F.append(k);
         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) {
+        q.className = "progress-text", q.textContent = u.state === "success" ? "Upload complete" : u.state === "error" ? u.error || "Upload failed" : u.state === "canceled" ? "Upload canceled" : `Uploading ${Math.round(z)}%`, d.append(F, q), l.append(d);
+      } else if (u.state === "error" && u.error) {
         const d = document.createElement("div");
-        d.className = "file-error", d.textContent = c.error, l.append(d);
+        d.className = "file-error", d.textContent = u.error, l.append(d);
       }
       return l;
     })), this._revokePreviewUrls(P);
@@ -669,16 +711,16 @@ class W extends I {
   _registerWithForm() {
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const s = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), a = this.getAttribute("name");
-      s && typeof s.registerField == "function" && a && (this._formUnregister = s.registerField(a, {
+      const r = this.getRootNode().host?.closest?.("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: (r) => {
-          Array.isArray(r) && r.every((n) => n instanceof File) && this.setFiles(r);
+        setValue: (s) => {
+          Array.isArray(s) && s.every((o) => o instanceof File) && this.setFiles(s);
         },
         validate: async () => this.hasAttribute("required") && this._files.length === 0 ? { valid: !1, message: "At least one file is required" } : { valid: !0 },
-        setError: (r) => {
-          r ? this.setAttribute("data-error", r) : this.removeAttribute("data-error"), this._syncUi();
+        setError: (s) => {
+          s ? this.setAttribute("data-error", s) : this.removeAttribute("data-error"), this._syncUi();
         }
       }));
     } catch {

package/dist/flex.cjs.js

@@ -8,7 +8,7 @@
     --ui-flex-gap: 0px;
     --ui-flex-row-gap: var(--ui-flex-gap);
     --ui-flex-column-gap: var(--ui-flex-gap);
-    --ui-flex-color: var(--ui-color-text, inherit);
+    --ui-flex-color: inherit;
     color-scheme: light dark;
     display: var(--ui-flex-display);
     color: var(--ui-flex-color);
@@ -49,6 +49,6 @@
       --ui-flex-color: CanvasText;
     }
   }
-`;function x(i){if(!i)return null;const e=i.trim();if(!e.startsWith("{"))return null;try{const s=JSON.parse(e);return!s||typeof s!="object"?null:s}catch{return null}}function f(i){return v[i]||i}function d(i,e){switch(i){case"display":return{"--ui-flex-display":e};case"direction":return{"--ui-flex-direction":e};case"align":return{"--ui-flex-align":e};case"justify":return{"--ui-flex-justify":e};case"wrap":return{"--ui-flex-wrap":e};case"gap":return{"--ui-flex-gap":f(e)};case"rowgap":return{"--ui-flex-row-gap":f(e)};case"columngap":return{"--ui-flex-column-gap":f(e)};default:return{}}}class m extends h.ElementBase{constructor(){super(...arguments),this._lastClassname="",this._appliedInlineProps=new Set}static get observedAttributes(){return["classname","headless",...p]}_syncLegacyClassname(){const e=this.getAttribute("classname")||"";e!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(s=>{s&&this.classList.remove(s)}),e&&e.split(/\s+/).forEach(s=>{s&&this.classList.add(s)}),this._lastClassname=e)}_applyInlineStyles(){this._appliedInlineProps.forEach(e=>this.style.removeProperty(e)),this._appliedInlineProps.clear(),p.forEach(e=>{const s=this.getAttribute(e);if(!s||x(s))return;const o=d(e,s);Object.entries(o).forEach(([n,u])=>{this.style.setProperty(n,u),this._appliedInlineProps.add(n)})})}_buildResponsiveCss(){const e={},s={sm:{},md:{},lg:{},xl:{}};p.forEach(r=>{const l=this.getAttribute(r),t=x(l);if(!t)return;const a=(c,g)=>{Object.assign(c,d(r,g))};typeof t.initial=="string"&&a(e,t.initial),typeof t.sm=="string"&&a(s.sm,t.sm),typeof t.md=="string"&&a(s.md,t.md),typeof t.lg=="string"&&a(s.lg,t.lg),typeof t.xl=="string"&&a(s.xl,t.xl)});const o=(r,l)=>{const t=Object.entries(l);return t.length?`${r} { ${t.map(([a,c])=>`${a}: ${c};`).join(" ")} }`:""},n=[],u=o(":host",e);return u&&n.push(u),Object.keys(s).forEach(r=>{const l=o(":host",s[r]);l&&n.push(`@media (min-width: ${y[r]}) { ${l} }`)}),n.join(`
+`;function x(i){if(!i)return null;const e=i.trim();if(!e.startsWith("{"))return null;try{const s=JSON.parse(e);return!s||typeof s!="object"?null:s}catch{return null}}function f(i){return v[i]||i}function d(i,e){switch(i){case"display":return{"--ui-flex-display":e};case"direction":return{"--ui-flex-direction":e};case"align":return{"--ui-flex-align":e};case"justify":return{"--ui-flex-justify":e};case"wrap":return{"--ui-flex-wrap":e};case"gap":return{"--ui-flex-gap":f(e)};case"rowgap":return{"--ui-flex-row-gap":f(e)};case"columngap":return{"--ui-flex-column-gap":f(e)};default:return{}}}class m extends h.ElementBase{constructor(){super(...arguments),this._lastClassname="",this._appliedInlineProps=new Set}static get observedAttributes(){return["classname","headless",...p]}_syncLegacyClassname(){const e=this.getAttribute("classname")||"";e!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(s=>{s&&this.classList.remove(s)}),e&&e.split(/\s+/).forEach(s=>{s&&this.classList.add(s)}),this._lastClassname=e)}_applyInlineStyles(){this._appliedInlineProps.forEach(e=>this.style.removeProperty(e)),this._appliedInlineProps.clear(),p.forEach(e=>{const s=this.getAttribute(e);if(!s||x(s))return;const o=d(e,s);Object.entries(o).forEach(([a,u])=>{this.style.setProperty(a,u),this._appliedInlineProps.add(a)})})}_buildResponsiveCss(){const e={},s={sm:{},md:{},lg:{},xl:{}};p.forEach(r=>{const l=this.getAttribute(r),t=x(l);if(!t)return;const n=(c,g)=>{Object.assign(c,d(r,g))};typeof t.initial=="string"&&n(e,t.initial),typeof t.sm=="string"&&n(s.sm,t.sm),typeof t.md=="string"&&n(s.md,t.md),typeof t.lg=="string"&&n(s.lg,t.lg),typeof t.xl=="string"&&n(s.xl,t.xl)});const o=(r,l)=>{const t=Object.entries(l);return t.length?`${r} { ${t.map(([n,c])=>`${n}: ${c};`).join(" ")} }`:""},a=[],u=o(":host",e);return u&&a.push(u),Object.keys(s).forEach(r=>{const l=o(":host",s[r]);l&&a.push(`@media (min-width: ${y[r]}) { ${l} }`)}),a.join(`
 `)}render(){this._syncLegacyClassname(),this._applyInlineStyles();const e=this._buildResponsiveCss();this.setContent(`<style>${b}${e?`
 ${e}`:""}</style><slot></slot>`)}shouldRenderOnAttributeChange(e,s,o){return!0}}typeof customElements<"u"&&!customElements.get("ui-flex")&&customElements.define("ui-flex",m);exports.UIFlex=m;

package/dist/flex.esm.js

@@ -4,7 +4,7 @@ const h = {
   md: "var(--ui-breakpoint-md, 768px)",
   lg: "var(--ui-breakpoint-lg, 1024px)",
   xl: "var(--ui-breakpoint-xl, 1280px)"
-}, p = ["display", "direction", "align", "justify", "wrap", "gap", "rowgap", "columngap"], y = {
+}, c = ["display", "direction", "align", "justify", "wrap", "gap", "rowgap", "columngap"], y = {
   xs: "var(--ui-space-xs, 4px)",
   sm: "var(--ui-space-sm, 8px)",
   md: "var(--ui-space-md, 12px)",
@@ -20,7 +20,7 @@ const h = {
     --ui-flex-gap: 0px;
     --ui-flex-row-gap: var(--ui-flex-gap);
     --ui-flex-column-gap: var(--ui-flex-gap);
-    --ui-flex-color: var(--ui-color-text, inherit);
+    --ui-flex-color: inherit;
     color-scheme: light dark;
     display: var(--ui-flex-display);
     color: var(--ui-flex-color);
@@ -103,7 +103,7 @@ class b extends g {
     super(...arguments), this._lastClassname = "", this._appliedInlineProps = /* @__PURE__ */ new Set();
   }
   static get observedAttributes() {
-    return ["classname", "headless", ...p];
+    return ["classname", "headless", ...c];
   }
   _syncLegacyClassname() {
     const e = this.getAttribute("classname") || "";
@@ -114,7 +114,7 @@ class b extends g {
     }), this._lastClassname = e);
   }
   _applyInlineStyles() {
-    this._appliedInlineProps.forEach((e) => this.style.removeProperty(e)), this._appliedInlineProps.clear(), p.forEach((e) => {
+    this._appliedInlineProps.forEach((e) => this.style.removeProperty(e)), this._appliedInlineProps.clear(), c.forEach((e) => {
       const s = this.getAttribute(e);
       if (!s || x(s)) return;
       const o = d(e, s);
@@ -130,17 +130,17 @@ class b extends g {
       lg: {},
       xl: {}
     };
-    p.forEach((r) => {
+    c.forEach((r) => {
       const l = this.getAttribute(r), t = x(l);
       if (!t) return;
-      const a = (c, m) => {
-        Object.assign(c, d(r, m));
+      const a = (p, m) => {
+        Object.assign(p, d(r, m));
       };
       typeof t.initial == "string" && a(e, t.initial), typeof t.sm == "string" && a(s.sm, t.sm), typeof t.md == "string" && a(s.md, t.md), typeof t.lg == "string" && a(s.lg, t.lg), typeof t.xl == "string" && a(s.xl, t.xl);
     });
     const o = (r, l) => {
       const t = Object.entries(l);
-      return t.length ? `${r} { ${t.map(([a, c]) => `${a}: ${c};`).join(" ")} }` : "";
+      return t.length ? `${r} { ${t.map(([a, p]) => `${a}: ${p};`).join(" ")} }` : "";
     }, n = [], u = o(":host", e);
     return u && n.push(u), Object.keys(s).forEach((r) => {
       const l = o(":host", s[r]);