@editora/ui-core 0.1.24 → 0.2.0

package/dist/file-upload.esm.js

@@ -1,9 +1,9 @@
 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);
@@ -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/floating-toolbar.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./ElementBase-DxbvhLJs.js"),d=require("./positioner-D_fqyx_j.js"),b=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./ElementBase-DxbvhLJs.js"),d=require("./positioner-DZ1FW6A9.js"),c=`
   :host {
     position: fixed;
     inset: 0;
@@ -7,14 +7,13 @@
     display: none;
     color-scheme: light dark;
 
-    --ui-floating-toolbar-bg: var(--ui-color-surface, #ffffff);
+    --ui-floating-toolbar-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-floating-toolbar-color: var(--ui-color-text, #0f172a);
     --ui-floating-toolbar-muted: var(--ui-color-muted, #526175);
     --ui-floating-toolbar-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-floating-toolbar-border: 1px solid var(--ui-floating-toolbar-border-color);
-    --ui-floating-toolbar-radius: 12px;
-    --ui-floating-toolbar-shadow:
-      none;
+    --ui-floating-toolbar-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-floating-toolbar-shadow: var(--shadow-5, 0 8px 24px rgba(15, 23, 42, 0.12));
     --ui-floating-toolbar-padding: 6px;
     --ui-floating-toolbar-gap: 6px;
     --ui-floating-toolbar-focus-ring: var(--ui-color-focus-ring, #2563eb);
@@ -200,8 +199,8 @@
       transition: none !important;
     }
   }
-`;function c(o,t){if(o==null||o==="")return t;const e=Number(o);return Number.isFinite(e)?e:t}function a(o,t){if(o==null)return t;const e=o.trim().toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function f(o){if(!document.body.contains(o))return!1;const t=window.getComputedStyle(o);return!(t.display==="none"||t.visibility==="hidden"||Number.parseFloat(t.opacity||"1")<=0)}function p(o){return o==="top"||o==="bottom"?o:"auto"}function g(o){return o==="start"||o==="end"?o:"center"}function _(o,t){const e=o==="top"?"top":"bottom";return t==="start"?`${e}-start`:t==="end"?`${e}-end`:e}function m(o){const t='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',e=[];return o.forEach(i=>{i instanceof HTMLElement&&(i.matches(t)&&e.push(i),e.push(...Array.from(i.querySelectorAll(t))))}),Array.from(new Set(e))}class l extends h.ElementBase{constructor(){super(...arguments),this._anchor=null,this._panel=null,this._toolbarSlot=null,this._defaultSlot=null,this._raf=null,this._resizeObserver=null,this._mutationObserver=null,this._positioner=null,this._positionerPlacement=null,this._positionerOffset=0,this._globalListenersBound=!1,this._isOpen=!1,this._closeReason="programmatic",this._onWindowChangeBound=this._onWindowChange.bind(this),this._onDocumentPointerDownBound=this._onDocumentPointerDown.bind(this),this._onDocumentKeyDownBound=this._onDocumentKeyDown.bind(this),this._onPanelKeyDownBound=this._onPanelKeyDown.bind(this),this._onSlotChangeBound=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","anchor-id","headless","disabled","placement","align","offset","close-on-outside","close-on-escape","aria-label","aria-labelledby","variant","density","shape","elevation","tone"]}connectedCallback(){super.connectedCallback(),this._syncAnchorFromAttribute(),this._syncOpenState(),this._schedulePosition()}disconnectedCallback(){this._unbindGlobalListeners(),this._teardownObservers(),this._positioner?.destroy(),this._positioner=null,this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="anchor-id"){this._syncAnchorFromAttribute(),this.hasAttribute("open")&&!this._anchor&&this._requestClose("anchor-missing"),this._schedulePosition();return}if(t==="open"){this._syncOpenState(),this._schedulePosition();return}if(t==="disabled"){this.hasAttribute("disabled")&&this.hasAttribute("open")&&this._requestClose("disabled");return}if(t==="headless"){this._syncOpenState(),this._schedulePosition();return}if(t==="aria-label"||t==="aria-labelledby"){this._syncPanelA11y();return}(t==="placement"||t==="align"||t==="offset")&&this._schedulePosition()}}showForAnchorId(t){if(this.hasAttribute("disabled")||!t)return;const e=document.getElementById(t);if(!e){this._requestClose("anchor-missing");return}this._anchor=e,this.setAttribute("anchor-id",t),this.openToolbar()}hide(){this.closeToolbar("programmatic")}openToolbar(){this.hasAttribute("disabled")||(this.hasAttribute("open")||this.setAttribute("open",""),this._schedulePosition())}closeToolbar(t="programmatic"){this.hasAttribute("open")&&(this._closeReason=t,this.removeAttribute("open"))}_syncOpenState(){const t=this.hasAttribute("open")&&!this.hasAttribute("headless")&&!this.hasAttribute("disabled");if(t===this._isOpen){t&&this._schedulePosition();return}if(this._isOpen=t,t){this._bindGlobalListeners(),this._ensureObservers(),this._dispatchOpenEvents(),this._schedulePosition();return}this._unbindGlobalListeners(),this._teardownObservers(),this._positioner?.destroy(),this._positioner=null,this._positionerPlacement=null,this._positionerOffset=0,this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),this._dispatchCloseEvents(this._closeReason),this._closeReason="programmatic"}_dispatchOpenEvents(){this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0}}))}_dispatchCloseEvents(t){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:t}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:t}}))}_requestClose(t){if(!this.hasAttribute("open"))return;const e=new CustomEvent("request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e);const i=new CustomEvent("ui-request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),!(e.defaultPrevented||i.defaultPrevented)&&this.closeToolbar(t)}_syncAnchorFromAttribute(){const t=this.getAttribute("anchor-id");if(!t){this._anchor=null;return}this._anchor=document.getElementById(t)}_schedulePosition(){!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled")||(this._raf!=null&&cancelAnimationFrame(this._raf),this._raf=requestAnimationFrame(()=>{this._raf=null,this._position()}))}_ensureObservers(){if(!(this._resizeObserver&&this._mutationObserver)){if(typeof ResizeObserver<"u"){if(this._resizeObserver=new ResizeObserver(()=>this._schedulePosition()),this._panel)try{this._resizeObserver.observe(this._panel)}catch{}if(this._anchor)try{this._resizeObserver.observe(this._anchor)}catch{}}if(typeof MutationObserver<"u"&&this._anchor){this._mutationObserver=new MutationObserver(()=>this._schedulePosition());try{this._mutationObserver.observe(this._anchor,{attributes:!0,childList:!1,subtree:!1})}catch{}}}}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null)}_refreshObservers(){this._isOpen&&(this._teardownObservers(),this._ensureObservers())}_bindGlobalListeners(){this._globalListenersBound||(window.addEventListener("scroll",this._onWindowChangeBound,{passive:!0,capture:!0}),window.addEventListener("resize",this._onWindowChangeBound),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(window.removeEventListener("scroll",this._onWindowChangeBound,!0),window.removeEventListener("resize",this._onWindowChangeBound),document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!1)}_position(){if(!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled"))return;if(!this._anchor){this._requestClose("anchor-missing");return}if(!f(this._anchor)){this._requestClose("anchor-hidden");return}if(!this._panel)return;const t=Math.max(0,c(this.getAttribute("offset"),8)),e=p(this.getAttribute("placement")),i=g(this.getAttribute("align")),r=_(e,i);if(!this._positioner||this._positionerPlacement!==r||this._positionerOffset!==t){this._positioner?.destroy(),this._positioner=d.createPositioner({anchor:this._anchor,floating:this._panel,placement:r,strategy:"fixed",offset:t,flip:!0,shift:!0,boundaryPadding:8,observeWindowResize:!1,observeScroll:!1,observeAncestorScroll:!1,observeAncestorResize:!1,observeLayoutShift:!1,observeAnchorResize:!1,observeFloatingResize:!1,onUpdate:s=>{const u=s.placement.startsWith("top")?"top":"bottom";this.style.setProperty("--ui-floating-toolbar-origin-x",i==="start"?"0%":i==="end"?"100%":"50%"),this._panel?.setAttribute("data-side",u)}}),this._positionerPlacement=r,this._positionerOffset=t;return}this._positioner?.update()}_onWindowChange(){this.hasAttribute("open")&&this._schedulePosition()}_onDocumentPointerDown(t){if(!this.hasAttribute("open")||!a(this.getAttribute("close-on-outside"),!0))return;const e=t.composedPath();e.includes(this)||this._anchor&&e.includes(this._anchor)||this._requestClose("outside")}_onDocumentKeyDown(t){this.hasAttribute("open")&&t.key==="Escape"&&a(this.getAttribute("close-on-escape"),!0)&&(t.preventDefault(),this._requestClose("escape"))}_onPanelKeyDown(t){if(!this._panel||!["ArrowRight","ArrowLeft","Home","End"].includes(t.key))return;const e=this._getFocusableItems();if(e.length===0)return;const i=document.activeElement,r=i?e.indexOf(i):-1;let n=r;t.key==="Home"?n=0:t.key==="End"?n=e.length-1:t.key==="ArrowRight"?n=r<0?0:(r+1)%e.length:t.key==="ArrowLeft"&&(n=r<0?e.length-1:(r-1+e.length)%e.length);const s=e[n];s&&(t.preventDefault(),s.focus())}_getFocusableItems(){const t=this._toolbarSlot?.assignedElements({flatten:!0})||[],e=this._defaultSlot?.assignedElements({flatten:!0})||[];return m([...t,...e])}_onSlotChange(){this._syncRowVisibility(),this._schedulePosition()}_syncRowVisibility(){const t=this.root.querySelector(".row-toolbar"),e=this.root.querySelector(".row-default");if(!t||!e)return;const i=(this._toolbarSlot?.assignedNodes({flatten:!0})||[]).some(n=>n.nodeType===Node.TEXT_NODE?!!n.textContent?.trim():n.nodeType===Node.ELEMENT_NODE),r=(this._defaultSlot?.assignedNodes({flatten:!0})||[]).some(n=>n.nodeType===Node.TEXT_NODE?!!n.textContent?.trim():n.nodeType===Node.ELEMENT_NODE);i?t.removeAttribute("hidden"):t.setAttribute("hidden",""),r?e.removeAttribute("hidden"):e.setAttribute("hidden","")}_syncPanelA11y(){if(!this._panel)return;const t=this.getAttribute("aria-labelledby"),e=this.getAttribute("aria-label")||(t?null:"Floating toolbar");t?this._panel.setAttribute("aria-labelledby",t):this._panel.removeAttribute("aria-labelledby"),e?this._panel.setAttribute("aria-label",e):this._panel.removeAttribute("aria-label")}render(){this.setContent(`
-      <style>${b}</style>
+`;function b(o,t){if(o==null||o==="")return t;const e=Number(o);return Number.isFinite(e)?e:t}function a(o,t){if(o==null)return t;const e=o.trim().toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function f(o){if(!document.body.contains(o))return!1;const t=window.getComputedStyle(o);return!(t.display==="none"||t.visibility==="hidden"||Number.parseFloat(t.opacity||"1")<=0)}function p(o){return o==="top"||o==="bottom"?o:"auto"}function g(o){return o==="start"||o==="end"?o:"center"}function _(o,t){const e=o==="top"?"top":"bottom";return t==="start"?`${e}-start`:t==="end"?`${e}-end`:e}function m(o){const t='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',e=[];return o.forEach(i=>{i instanceof HTMLElement&&(i.matches(t)&&e.push(i),e.push(...Array.from(i.querySelectorAll(t))))}),Array.from(new Set(e))}class l extends h.ElementBase{constructor(){super(...arguments),this._anchor=null,this._panel=null,this._toolbarSlot=null,this._defaultSlot=null,this._raf=null,this._resizeObserver=null,this._mutationObserver=null,this._positioner=null,this._positionerPlacement=null,this._positionerOffset=0,this._globalListenersBound=!1,this._isOpen=!1,this._closeReason="programmatic",this._onWindowChangeBound=this._onWindowChange.bind(this),this._onDocumentPointerDownBound=this._onDocumentPointerDown.bind(this),this._onDocumentKeyDownBound=this._onDocumentKeyDown.bind(this),this._onPanelKeyDownBound=this._onPanelKeyDown.bind(this),this._onSlotChangeBound=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","anchor-id","headless","disabled","placement","align","offset","close-on-outside","close-on-escape","aria-label","aria-labelledby","variant","density","shape","elevation","tone"]}connectedCallback(){super.connectedCallback(),this._syncAnchorFromAttribute(),this._syncOpenState(),this._schedulePosition()}disconnectedCallback(){this._unbindGlobalListeners(),this._teardownObservers(),this._positioner?.destroy(),this._positioner=null,this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="anchor-id"){this._syncAnchorFromAttribute(),this.hasAttribute("open")&&!this._anchor&&this._requestClose("anchor-missing"),this._schedulePosition();return}if(t==="open"){this._syncOpenState(),this._schedulePosition();return}if(t==="disabled"){this.hasAttribute("disabled")&&this.hasAttribute("open")&&this._requestClose("disabled");return}if(t==="headless"){this._syncOpenState(),this._schedulePosition();return}if(t==="aria-label"||t==="aria-labelledby"){this._syncPanelA11y();return}(t==="placement"||t==="align"||t==="offset")&&this._schedulePosition()}}showForAnchorId(t){if(this.hasAttribute("disabled")||!t)return;const e=document.getElementById(t);if(!e){this._requestClose("anchor-missing");return}this._anchor=e,this.setAttribute("anchor-id",t),this.openToolbar()}hide(){this.closeToolbar("programmatic")}openToolbar(){this.hasAttribute("disabled")||(this.hasAttribute("open")||this.setAttribute("open",""),this._schedulePosition())}closeToolbar(t="programmatic"){this.hasAttribute("open")&&(this._closeReason=t,this.removeAttribute("open"))}_syncOpenState(){const t=this.hasAttribute("open")&&!this.hasAttribute("headless")&&!this.hasAttribute("disabled");if(t===this._isOpen){t&&this._schedulePosition();return}if(this._isOpen=t,t){this._bindGlobalListeners(),this._ensureObservers(),this._dispatchOpenEvents(),this._schedulePosition();return}this._unbindGlobalListeners(),this._teardownObservers(),this._positioner?.destroy(),this._positioner=null,this._positionerPlacement=null,this._positionerOffset=0,this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),this._dispatchCloseEvents(this._closeReason),this._closeReason="programmatic"}_dispatchOpenEvents(){this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0}}))}_dispatchCloseEvents(t){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:t}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:t}}))}_requestClose(t){if(!this.hasAttribute("open"))return;const e=new CustomEvent("request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e);const i=new CustomEvent("ui-request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),!(e.defaultPrevented||i.defaultPrevented)&&this.closeToolbar(t)}_syncAnchorFromAttribute(){const t=this.getAttribute("anchor-id");if(!t){this._anchor=null;return}this._anchor=document.getElementById(t)}_schedulePosition(){!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled")||(this._raf!=null&&cancelAnimationFrame(this._raf),this._raf=requestAnimationFrame(()=>{this._raf=null,this._position()}))}_ensureObservers(){if(!(this._resizeObserver&&this._mutationObserver)){if(typeof ResizeObserver<"u"){if(this._resizeObserver=new ResizeObserver(()=>this._schedulePosition()),this._panel)try{this._resizeObserver.observe(this._panel)}catch{}if(this._anchor)try{this._resizeObserver.observe(this._anchor)}catch{}}if(typeof MutationObserver<"u"&&this._anchor){this._mutationObserver=new MutationObserver(()=>this._schedulePosition());try{this._mutationObserver.observe(this._anchor,{attributes:!0,childList:!1,subtree:!1})}catch{}}}}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null)}_refreshObservers(){this._isOpen&&(this._teardownObservers(),this._ensureObservers())}_bindGlobalListeners(){this._globalListenersBound||(window.addEventListener("scroll",this._onWindowChangeBound,{passive:!0,capture:!0}),window.addEventListener("resize",this._onWindowChangeBound),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(window.removeEventListener("scroll",this._onWindowChangeBound,!0),window.removeEventListener("resize",this._onWindowChangeBound),document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!1)}_position(){if(!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled"))return;if(!this._anchor){this._requestClose("anchor-missing");return}if(!f(this._anchor)){this._requestClose("anchor-hidden");return}if(!this._panel)return;const t=Math.max(0,b(this.getAttribute("offset"),8)),e=p(this.getAttribute("placement")),i=g(this.getAttribute("align")),r=_(e,i);if(!this._positioner||this._positionerPlacement!==r||this._positionerOffset!==t){this._positioner?.destroy(),this._positioner=d.createPositioner({anchor:this._anchor,floating:this._panel,placement:r,strategy:"fixed",offset:t,flip:!0,shift:!0,boundaryPadding:8,observeWindowResize:!1,observeScroll:!1,observeAncestorScroll:!1,observeAncestorResize:!1,observeLayoutShift:!1,observeAnchorResize:!1,observeFloatingResize:!1,onUpdate:s=>{const u=s.placement.startsWith("top")?"top":"bottom";this.style.setProperty("--ui-floating-toolbar-origin-x",i==="start"?"0%":i==="end"?"100%":"50%"),this._panel?.setAttribute("data-side",u)}}),this._positionerPlacement=r,this._positionerOffset=t;return}this._positioner?.update()}_onWindowChange(){this.hasAttribute("open")&&this._schedulePosition()}_onDocumentPointerDown(t){if(!this.hasAttribute("open")||!a(this.getAttribute("close-on-outside"),!0))return;const e=t.composedPath();e.includes(this)||this._anchor&&e.includes(this._anchor)||this._requestClose("outside")}_onDocumentKeyDown(t){this.hasAttribute("open")&&t.key==="Escape"&&a(this.getAttribute("close-on-escape"),!0)&&(t.preventDefault(),this._requestClose("escape"))}_onPanelKeyDown(t){if(!this._panel||!["ArrowRight","ArrowLeft","Home","End"].includes(t.key))return;const e=this._getFocusableItems();if(e.length===0)return;const i=document.activeElement,r=i?e.indexOf(i):-1;let n=r;t.key==="Home"?n=0:t.key==="End"?n=e.length-1:t.key==="ArrowRight"?n=r<0?0:(r+1)%e.length:t.key==="ArrowLeft"&&(n=r<0?e.length-1:(r-1+e.length)%e.length);const s=e[n];s&&(t.preventDefault(),s.focus())}_getFocusableItems(){const t=this._toolbarSlot?.assignedElements({flatten:!0})||[],e=this._defaultSlot?.assignedElements({flatten:!0})||[];return m([...t,...e])}_onSlotChange(){this._syncRowVisibility(),this._schedulePosition()}_syncRowVisibility(){const t=this.root.querySelector(".row-toolbar"),e=this.root.querySelector(".row-default");if(!t||!e)return;const i=(this._toolbarSlot?.assignedNodes({flatten:!0})||[]).some(n=>n.nodeType===Node.TEXT_NODE?!!n.textContent?.trim():n.nodeType===Node.ELEMENT_NODE),r=(this._defaultSlot?.assignedNodes({flatten:!0})||[]).some(n=>n.nodeType===Node.TEXT_NODE?!!n.textContent?.trim():n.nodeType===Node.ELEMENT_NODE);i?t.removeAttribute("hidden"):t.setAttribute("hidden",""),r?e.removeAttribute("hidden"):e.setAttribute("hidden","")}_syncPanelA11y(){if(!this._panel)return;const t=this.getAttribute("aria-labelledby"),e=this.getAttribute("aria-label")||(t?null:"Floating toolbar");t?this._panel.setAttribute("aria-labelledby",t):this._panel.removeAttribute("aria-labelledby"),e?this._panel.setAttribute("aria-label",e):this._panel.removeAttribute("aria-label")}render(){this.setContent(`
+      <style>${c}</style>
       <div class="panel" part="panel" role="toolbar" aria-orientation="horizontal" tabindex="-1">
         <div class="row row-toolbar" part="row-toolbar">
           <slot name="toolbar"></slot>

package/dist/floating-toolbar.esm.js

@@ -1,5 +1,5 @@
 import { E as u } from "./ElementBase-BeZT54Hj.mjs";
-import { e as h } from "./positioner-D0VGxtYU.mjs";
+import { e as h } from "./positioner-BE8Nbho2.mjs";
 const d = `
   :host {
     position: fixed;
@@ -9,14 +9,13 @@ const d = `
     display: none;
     color-scheme: light dark;
 
-    --ui-floating-toolbar-bg: var(--ui-color-surface, #ffffff);
+    --ui-floating-toolbar-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-floating-toolbar-color: var(--ui-color-text, #0f172a);
     --ui-floating-toolbar-muted: var(--ui-color-muted, #526175);
     --ui-floating-toolbar-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-floating-toolbar-border: 1px solid var(--ui-floating-toolbar-border-color);
-    --ui-floating-toolbar-radius: 12px;
-    --ui-floating-toolbar-shadow:
-      none;
+    --ui-floating-toolbar-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-floating-toolbar-shadow: var(--shadow-5, 0 8px 24px rgba(15, 23, 42, 0.12));
     --ui-floating-toolbar-padding: 6px;
     --ui-floating-toolbar-gap: 6px;
     --ui-floating-toolbar-focus-ring: var(--ui-color-focus-ring, #2563eb);
@@ -203,7 +202,7 @@ const d = `
     }
   }
 `;
-function b(o, t) {
+function c(o, t) {
   if (o == null || o === "") return t;
   const e = Number(o);
   return Number.isFinite(e) ? e : t;
@@ -213,7 +212,7 @@ function a(o, t) {
   const e = o.trim().toLowerCase();
   return e !== "false" && e !== "0" && e !== "off";
 }
-function c(o) {
+function b(o) {
   if (!document.body.contains(o)) return !1;
   const t = window.getComputedStyle(o);
   return !(t.display === "none" || t.visibility === "hidden" || Number.parseFloat(t.opacity || "1") <= 0);
@@ -414,12 +413,12 @@ class m extends u {
       this._requestClose("anchor-missing");
       return;
     }
-    if (!c(this._anchor)) {
+    if (!b(this._anchor)) {
       this._requestClose("anchor-hidden");
       return;
     }
     if (!this._panel) return;
-    const t = Math.max(0, b(this.getAttribute("offset"), 8)), e = f(this.getAttribute("placement")), i = p(this.getAttribute("align")), r = g(e, i);
+    const t = Math.max(0, c(this.getAttribute("offset"), 8)), e = f(this.getAttribute("placement")), i = p(this.getAttribute("align")), r = g(e, i);
     if (!this._positioner || this._positionerPlacement !== r || this._positionerOffset !== t) {
       this._positioner?.destroy(), this._positioner = h({
         anchor: this._anchor,