@editora/ui-core 0.1.21 → 0.1.22

package/dist/field.esm.js

@@ -1,5 +1,5 @@
-import { E as A } from "./ElementBase-YlTLMsGk.mjs";
-const E = `
+import { E as $ } from "./ElementBase-YlTLMsGk.mjs";
+const N = `
   :host {
     --ui-field-gap: 8px;
     --ui-field-label-width: 192px;
@@ -7,8 +7,8 @@ const E = `
     --ui-field-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-field-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-field-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
-    --ui-field-description-color: var(--ui-color-muted, var(--ui-muted, #64748b));
-    --ui-field-error-color: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-field-description-color: var(--ui-color-muted, var(--ui-muted, #526175));
+    --ui-field-error-color: var(--ui-color-danger, var(--ui-error, #c81e1e));
     --ui-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-field-border: 1px solid var(--ui-field-border-color);
     --ui-field-shadow:
@@ -217,7 +217,7 @@ const E = `
 
   :host([tone="danger"]) {
     --ui-field-accent: #dc2626;
-    --ui-field-error-color: #dc2626;
+    --ui-field-error-color: #c81e1e;
   }
 
   :host([density="compact"]) {
@@ -372,29 +372,29 @@ const E = `
     }
   }
 `;
-function b(o) {
-  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function C(r) {
+  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function p(o) {
-  if (!o) return !1;
-  const e = o.assignedNodes({ flatten: !0 });
-  return e.length ? e.some((r) => r.nodeType === Node.TEXT_NODE ? !!r.textContent?.trim() : r.nodeType === Node.ELEMENT_NODE) : !1;
+function A(r) {
+  if (!r) return !1;
+  const t = r.assignedNodes({ flatten: !0 });
+  return t.length ? t.some((i) => i.nodeType === Node.TEXT_NODE ? !!i.textContent?.trim() : i.nodeType === Node.ELEMENT_NODE) : !1;
 }
-function f(o) {
-  if (o.hasAttribute("disabled") || o.getAttribute("aria-disabled") === "true" || o.getAttribute("tabindex") === "-1") return !1;
-  const e = window.getComputedStyle(o);
-  return !(e.display === "none" || e.visibility === "hidden");
+function x(r) {
+  if (r.hasAttribute("disabled") || r.getAttribute("aria-disabled") === "true" || r.getAttribute("tabindex") === "-1") return !1;
+  const t = window.getComputedStyle(r);
+  return !(t.display === "none" || t.visibility === "hidden");
 }
-function q(o) {
-  return !!o.closest(
+function D(r) {
+  return !!r.closest(
     'button, a, input, select, textarea, summary, [contenteditable=""], [contenteditable="true"], [role="button"]'
   );
 }
-function _(o) {
-  return Array.from(new Set(o.filter(Boolean)));
+function k(r) {
+  return Array.from(new Set(r.filter(Boolean)));
 }
-const S = 'ui-input, ui-textarea, ui-select, ui-combobox, input, textarea, select, button, [tabindex]:not([tabindex="-1"])';
-class k extends A {
+const _ = "data-ui-field-label", S = "data-ui-field-description", L = 'ui-input, ui-textarea, ui-select, ui-combobox, input, textarea, select, button, [tabindex]:not([tabindex="-1"])';
+class M extends $ {
   constructor() {
     super(), this._uid = Math.random().toString(36).slice(2, 9), this._controlCache = null, this._stateSyncQueued = !1, this._onRootClick = this._onRootClick.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
   }
@@ -422,25 +422,25 @@ class k extends A {
   disconnectedCallback() {
     this.root.removeEventListener("click", this._onRootClick), this.root.removeEventListener("slotchange", this._onSlotChange), super.disconnectedCallback();
   }
-  attributeChangedCallback(e, r, l) {
-    if (r !== l) {
-      if (e === "for" && this._invalidateControlCache(), e === "label-width") {
-        const i = this.getAttribute("label-width");
-        i ? this.style.setProperty("--ui-field-label-width", i) : this.style.removeProperty("--ui-field-label-width");
+  attributeChangedCallback(t, i, l) {
+    if (i !== l) {
+      if (t === "for" && this._invalidateControlCache(), t === "label-width") {
+        const o = this.getAttribute("label-width");
+        o ? this.style.setProperty("--ui-field-label-width", o) : this.style.removeProperty("--ui-field-label-width");
       }
-      if (e === "label" || e === "description" || e === "error" || e === "required" || e === "for") {
+      if (t === "label" || t === "description" || t === "error" || t === "required" || t === "for") {
         this.isConnected && this.requestRender();
         return;
       }
-      e === "invalid" && this._scheduleDerivedStateSync();
+      t === "invalid" && this._scheduleDerivedStateSync();
     }
   }
   _onSlotChange() {
     this._invalidateControlCache(), this._scheduleDerivedStateSync();
   }
-  _onRootClick(e) {
-    const r = e.target;
-    r && r.closest(".label") && (q(r) || this._focusControl());
+  _onRootClick(t) {
+    const i = t.target;
+    i && i.closest(".label") && (D(i) || this._focusControl());
   }
   _invalidateControlCache() {
     this._controlCache = null;
@@ -451,66 +451,75 @@ class k extends A {
     }));
   }
   _focusControl() {
-    const e = this._resolveControlElement();
-    if (e)
+    const t = this._resolveControlElement();
+    if (t)
       try {
-        e.focus({ preventScroll: !0 });
+        t.focus({ preventScroll: !0 });
       } catch {
-        e.focus();
+        t.focus();
       }
   }
   _resolveControlElement() {
-    if (this._controlCache && this._controlCache.isConnected && f(this._controlCache))
+    if (this._controlCache && this._controlCache.isConnected && x(this._controlCache))
       return this._controlCache;
-    const e = this.getAttribute("for");
-    if (e) {
-      const t = document.getElementById(e);
-      if (t instanceof HTMLElement && f(t))
-        return this._controlCache = t, t;
+    const t = this.getAttribute("for");
+    if (t) {
+      const e = document.getElementById(t);
+      if (e instanceof HTMLElement && x(e))
+        return this._controlCache = e, e;
     }
     const l = this.root.querySelector("slot:not([name])")?.assignedElements({ flatten: !0 }) || [];
-    for (const t of l) {
-      if (!(t instanceof HTMLElement)) continue;
-      if (f(t))
-        return this._controlCache = t, t;
-      const s = t.querySelector(S);
-      if (s && f(s))
-        return this._controlCache = s, s;
+    for (const e of l) {
+      if (!(e instanceof HTMLElement)) continue;
+      if (x(e))
+        return this._controlCache = e, e;
+      const a = e.querySelector(L);
+      if (a && x(a))
+        return this._controlCache = a, a;
     }
-    const i = this.querySelector(S);
-    return i && f(i) ? (this._controlCache = i, i) : null;
+    const o = this.querySelector(L);
+    return o && x(o) ? (this._controlCache = o, o) : null;
   }
   _syncDerivedState() {
-    const e = this.root.querySelector('slot[name="label"]'), r = this.root.querySelector('slot[name="actions"]'), l = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), t = (this.getAttribute("label") || "").trim(), s = (this.getAttribute("description") || "").trim(), h = (this.getAttribute("error") || "").trim(), n = !!t || p(e), c = p(r), d = !!s || p(l), u = !!h || p(i), C = n || c || d, a = n || c, g = this.root.querySelector(".meta"), v = this.root.querySelector(".label-row"), m = this.root.querySelector(".label"), x = this.root.querySelector(".actions"), y = this.root.querySelector(".description"), w = this.root.querySelector(".error");
-    g && (C ? g.removeAttribute("hidden") : g.setAttribute("hidden", "")), v && (a ? v.removeAttribute("hidden") : v.setAttribute("hidden", "")), m && (n ? m.removeAttribute("hidden") : m.setAttribute("hidden", "")), x && (c ? x.removeAttribute("hidden") : x.setAttribute("hidden", "")), y && (d ? y.removeAttribute("hidden") : y.setAttribute("hidden", "")), w && (u ? w.removeAttribute("hidden") : w.setAttribute("hidden", "")), this._syncControlA11y(n, d, u);
-  }
-  _syncControlA11y(e, r, l) {
-    const i = this._resolveControlElement();
-    if (!i) return;
-    const t = `${this._uid}-label`, s = `${this._uid}-description`, h = `${this._uid}-error`, n = (i.getAttribute("aria-labelledby") || "").split(/\s+/).filter((a) => a && a !== t);
-    !i.hasAttribute("aria-label") && e && n.push(t);
-    const c = _(n);
-    c.length ? i.setAttribute("aria-labelledby", c.join(" ")) : i.removeAttribute("aria-labelledby");
-    const d = (i.getAttribute("aria-describedby") || "").split(/\s+/).filter((a) => a && a !== s && a !== h);
-    r && d.push(s), l && d.push(h);
-    const u = _(d);
-    u.length ? i.setAttribute("aria-describedby", u.join(" ")) : i.removeAttribute("aria-describedby"), this.hasAttribute("invalid") || l ? i.setAttribute("aria-invalid", "true") : i.removeAttribute("aria-invalid"), this.hasAttribute("required") ? i.setAttribute("aria-required", "true") : i.removeAttribute("aria-required");
+    const t = this.root.querySelector('slot[name="label"]'), i = this.root.querySelector('slot[name="actions"]'), l = this.root.querySelector('slot[name="description"]'), o = this.root.querySelector('slot[name="error"]'), e = (this.getAttribute("label") || "").trim(), a = (this.getAttribute("description") || "").trim(), y = (this.getAttribute("error") || "").trim(), n = !!e || A(t), d = A(i), h = !!a || A(l), b = !!y || A(o), w = n || d || h, E = n || d, c = this.root.querySelector(".meta"), p = this.root.querySelector(".label-row"), g = this.root.querySelector(".label"), m = this.root.querySelector(".actions"), u = this.root.querySelector(".description"), v = this.root.querySelector(".error");
+    c && (w ? c.removeAttribute("hidden") : c.setAttribute("hidden", "")), p && (E ? p.removeAttribute("hidden") : p.setAttribute("hidden", "")), g && (n ? g.removeAttribute("hidden") : g.setAttribute("hidden", "")), m && (d ? m.removeAttribute("hidden") : m.setAttribute("hidden", "")), u && (h ? u.removeAttribute("hidden") : u.setAttribute("hidden", "")), v && (b ? v.removeAttribute("hidden") : v.setAttribute("hidden", ""));
+    const q = t ? t.assignedNodes({ flatten: !0 }).map((f) => f.textContent || "").join(" ") : "", s = (f) => f.replace(/\s+/g, " ").trim(), T = (f) => f ? f.assignedNodes({ flatten: !0 }).map((B) => B.textContent || "").join(" ") : "", I = h ? s(a || T(l)) : "", R = b ? s(y || T(o)) : "";
+    this._syncControlA11y(
+      n,
+      s(e || q),
+      [I, R].filter(Boolean).join(" "),
+      b
+    );
+  }
+  _syncControlA11y(t, i, l, o) {
+    const e = this._resolveControlElement();
+    if (!e) return;
+    const a = `${this._uid}-label`, y = `${this._uid}-description`, n = `${this._uid}-error`, d = (e.getAttribute("aria-labelledby") || "").split(/\s+/).filter((s) => s && s !== a), h = e.getRootNode(), b = d.some((s) => !!h.getElementById?.(s)), w = k(d);
+    w.length ? e.setAttribute("aria-labelledby", w.join(" ")) : e.removeAttribute("aria-labelledby");
+    const E = e.hasAttribute("aria-label") && !e.hasAttribute(_), c = e.labels, p = (e.getAttribute("label") || "").trim().length > 0, g = (e.textContent || "").trim().length > 0, m = b || E || p || g || !!(c && c.length > 0);
+    t && i && !m ? (e.setAttribute("aria-label", i), e.setAttribute(_, "")) : e.hasAttribute(_) && (e.removeAttribute("aria-label"), e.removeAttribute(_));
+    const u = k(
+      (e.getAttribute("aria-describedby") || "").split(/\s+/).filter((s) => s && s !== y && s !== n)
+    );
+    u.length ? e.setAttribute("aria-describedby", u.join(" ")) : e.removeAttribute("aria-describedby");
+    const v = e.hasAttribute("aria-description") && !e.hasAttribute(S);
+    l && !v ? (e.setAttribute("aria-description", l), e.setAttribute(S, "")) : e.hasAttribute(S) && (e.removeAttribute("aria-description"), e.removeAttribute(S)), this.hasAttribute("invalid") || o ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), this.hasAttribute("required") ? e.setAttribute("aria-required", "true") : e.removeAttribute("aria-required");
   }
   render() {
-    const e = this.getAttribute("label") || "", r = this.getAttribute("description") || "", l = this.getAttribute("error") || "", i = this.hasAttribute("required"), t = this.getAttribute("for") || "";
+    const t = this.getAttribute("label") || "", i = this.getAttribute("description") || "", l = this.getAttribute("error") || "", o = this.hasAttribute("required"), e = this.getAttribute("for") || "";
     this.setContent(`
-      <style>${E}</style>
+      <style>${N}</style>
       <div class="frame" part="field">
         <div class="meta" part="meta">
           <div class="label-row" part="top">
-            <label class="label" id="${this._uid}-label" ${t ? `for="${b(t)}"` : ""}>
-              <slot name="label">${b(e)}</slot>
-              ${i ? '<span class="required" aria-hidden="true">*</span>' : ""}
+            <label class="label" id="${this._uid}-label" ${e ? `for="${C(e)}"` : ""}>
+              <slot name="label">${C(t)}</slot>
+              ${o ? '<span class="required" aria-hidden="true">*</span>' : ""}
             </label>
             <div class="actions" part="actions"><slot name="actions"></slot></div>
           </div>
           <p class="description" id="${this._uid}-description" part="description">
-            <slot name="description">${b(r)}</slot>
+            <slot name="description">${C(i)}</slot>
           </p>
         </div>
 
@@ -519,17 +528,17 @@ class k extends A {
             <div class="control" part="control"><slot></slot></div>
           </div>
           <p class="error" id="${this._uid}-error" part="error" aria-live="polite">
-            <slot name="error">${b(l)}</slot>
+            <slot name="error">${C(l)}</slot>
           </p>
         </div>
       </div>
     `), this._invalidateControlCache(), this._scheduleDerivedStateSync();
   }
-  shouldRenderOnAttributeChange(e, r, l) {
-    return e === "label" || e === "description" || e === "error" || e === "required" || e === "for";
+  shouldRenderOnAttributeChange(t, i, l) {
+    return t === "label" || t === "description" || t === "error" || t === "required" || t === "for";
   }
 }
-typeof customElements < "u" && !customElements.get("ui-field") && customElements.define("ui-field", k);
+typeof customElements < "u" && !customElements.get("ui-field") && customElements.define("ui-field", M);
 export {
-  k as UIField
+  M as UIField
 };

package/dist/fieldset.cjs.js

@@ -4,8 +4,8 @@
     --ui-fieldset-radius: 16px;
     --ui-fieldset-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-fieldset-color: var(--ui-color-text, var(--ui-text, #0f172a));
-    --ui-fieldset-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
-    --ui-fieldset-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-fieldset-muted: var(--ui-color-muted, var(--ui-muted, #526175));
+    --ui-fieldset-error: var(--ui-color-danger, var(--ui-error, #c81e1e));
     --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
     --ui-fieldset-border: 1px solid var(--ui-fieldset-border-color);
     --ui-fieldset-shadow: none;
@@ -131,11 +131,11 @@
   }
 
   :host([tone="success"]) {
-    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 40%, transparent);
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-success, #15803d) 40%, transparent);
   }
 
   :host([tone="warning"]) {
-    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 40%, transparent);
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 40%, transparent);
   }
 
   :host([tone="danger"]),

package/dist/fieldset.esm.js

@@ -5,8 +5,8 @@ const S = `
     --ui-fieldset-radius: 16px;
     --ui-fieldset-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-fieldset-color: var(--ui-color-text, var(--ui-text, #0f172a));
-    --ui-fieldset-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
-    --ui-fieldset-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-fieldset-muted: var(--ui-color-muted, var(--ui-muted, #526175));
+    --ui-fieldset-error: var(--ui-color-danger, var(--ui-error, #c81e1e));
     --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
     --ui-fieldset-border: 1px solid var(--ui-fieldset-border-color);
     --ui-fieldset-shadow: none;
@@ -132,11 +132,11 @@ const S = `
   }
 
   :host([tone="success"]) {
-    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 40%, transparent);
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-success, #15803d) 40%, transparent);
   }
 
   :host([tone="warning"]) {
-    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 40%, transparent);
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 40%, transparent);
   }
 
   :host([tone="danger"]),

package/dist/file-upload.cjs.js

@@ -5,10 +5,10 @@
     --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-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, #16a34a);
+    --ui-file-upload-success: var(--ui-color-success, #15803d);
     display: block;
     inline-size: 100%;
     min-inline-size: 0;
@@ -350,4 +350,4 @@
         </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"),this._surfaceEl?.addEventListener("click",this._onClick),this._surfaceEl?.addEventListener("keydown",this._onKeyDown),this._surfaceEl?.addEventListener("dragenter",this._onDragEnter),this._surfaceEl?.addEventListener("dragleave",this._onDragLeave),this._surfaceEl?.addEventListener("dragover",this._onDragOver),this._surfaceEl?.addEventListener("drop",this._onDrop),this._inputEl?.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"),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);if(!x.has(b)){if(!W(o,m)){n.push({file:o,reason:"accept"});return}if(v!=null&&o.size>v){n.push({file:o,reason:"max-size"});return}if(_!=null&&a.length+r.length>=_){n.push({file:o,reason:"max-files"});return}x.add(b),r.push(o)}}),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);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()}_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 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()};try{const r=await this.uploadRequest({file:e,files:this.files,signal:s.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)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})}}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 a=Number(s);return[i,Number.isFinite(a)?Math.max(0,Math.min(100,a)):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(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;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=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(),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"),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,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 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=>{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=>{l.stopPropagation(),this.startUpload()}),k.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=>{h.stopPropagation(),this.cancelUploads()}),k.append(l)}}const P=new Set;this._listEl.hidden=this._files.length===0,this._listEl.replaceChildren(...this._files.map((p,f)=>{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=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;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(f)})),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(){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,{name:a,getValue:()=>this.files,setValue:r=>{Array.isArray(r)&&r.every(n=>n instanceof File)&&this.setFiles(r)},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()}}))}catch{}}_onClick(e){e.target?.closest(".file-remove")||this.openPicker()}_onKeyDown(e){e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.openPicker())}_onInputChange(){const e=Array.from(this._inputEl?.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){if(this._disabled())return;e.preventDefault(),this._dragDepth=0,this._dragging=!1;const t=Array.from(e.dataTransfer?.files||[]);t.length&&this._appendFiles(t,"drop"),this._syncUi()}}typeof customElements<"u"&&!customElements.get("ui-file-upload")&&customElements.define("ui-file-upload",M);exports.UIFileUpload=M;
+    `),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"),this._surfaceEl?.addEventListener("click",this._onClick),this._surfaceEl?.addEventListener("keydown",this._onKeyDown),this._surfaceEl?.addEventListener("dragenter",this._onDragEnter),this._surfaceEl?.addEventListener("dragleave",this._onDragLeave),this._surfaceEl?.addEventListener("dragover",this._onDragOver),this._surfaceEl?.addEventListener("drop",this._onDrop),this._inputEl?.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"),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);if(!x.has(b)){if(!W(o,m)){n.push({file:o,reason:"accept"});return}if(v!=null&&o.size>v){n.push({file:o,reason:"max-size"});return}if(_!=null&&a.length+r.length>=_){n.push({file:o,reason:"max-files"});return}x.add(b),r.push(o)}}),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);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()}_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 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()};try{const r=await this.uploadRequest({file:e,files:this.files,signal:s.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)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})}}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 a=Number(s);return[i,Number.isFinite(a)?Math.max(0,Math.min(100,a)):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(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;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=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();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"),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,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 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=>{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=>{l.stopPropagation(),this.startUpload()}),k.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=>{h.stopPropagation(),this.cancelUploads()}),k.append(l)}}const P=new Set;this._listEl.hidden=this._files.length===0,this._listEl.replaceChildren(...this._files.map((p,f)=>{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=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;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(f)})),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(){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,{name:a,getValue:()=>this.files,setValue:r=>{Array.isArray(r)&&r.every(n=>n instanceof File)&&this.setFiles(r)},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()}}))}catch{}}_onClick(e){e.target?.closest(".file-remove")||this.openPicker()}_onKeyDown(e){e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.openPicker())}_onInputChange(){const e=Array.from(this._inputEl?.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){if(this._disabled())return;e.preventDefault(),this._dragDepth=0,this._dragging=!1;const t=Array.from(e.dataTransfer?.files||[]);t.length&&this._appendFiles(t,"drop"),this._syncUi()}}typeof customElements<"u"&&!customElements.get("ui-file-upload")&&customElements.define("ui-file-upload",M);exports.UIFileUpload=M;

package/dist/file-upload.esm.js

@@ -6,10 +6,10 @@ const M = `
     --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-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, #16a34a);
+    --ui-file-upload-success: var(--ui-color-success, #15803d);
     display: block;
     inline-size: 100%;
     min-inline-size: 0;
@@ -600,7 +600,9 @@ 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(), 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");
+    const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), i = this.hasAttribute("required"), s = 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 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) {

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-EV6mVBUV.js"),d=require("./positioner-D_fqyx_j.js"),c=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./ElementBase-EV6mVBUV.js"),d=require("./positioner-D_fqyx_j.js"),b=`
   :host {
     position: fixed;
     inset: 0;
@@ -9,7 +9,7 @@
 
     --ui-floating-toolbar-bg: var(--ui-color-surface, #ffffff);
     --ui-floating-toolbar-color: var(--ui-color-text, #0f172a);
-    --ui-floating-toolbar-muted: var(--ui-color-muted, #64748b);
+    --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;
@@ -146,11 +146,11 @@
   }
 
   :host([tone="success"]) {
-    --ui-floating-toolbar-accent: var(--ui-color-success, #16a34a);
+    --ui-floating-toolbar-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-floating-toolbar-accent: var(--ui-color-warning, #d97706);
+    --ui-floating-toolbar-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -200,14 +200,14 @@
       transition: none !important;
     }
   }
-`;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>
-      <section class="panel" part="panel" role="toolbar" aria-orientation="horizontal" tabindex="-1">
+`;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>
+      <div class="panel" part="panel" role="toolbar" aria-orientation="horizontal" tabindex="-1">
         <div class="row row-toolbar" part="row-toolbar">
           <slot name="toolbar"></slot>
         </div>
         <div class="row row-default" part="row-default">
           <slot></slot>
         </div>
-      </section>
+      </div>
     `),this._panel=this.root.querySelector(".panel"),this._toolbarSlot=this.root.querySelector('slot[name="toolbar"]'),this._defaultSlot=this.root.querySelector("slot:not([name])"),this._panel?.removeEventListener("keydown",this._onPanelKeyDownBound),this._panel?.addEventListener("keydown",this._onPanelKeyDownBound),this._toolbarSlot?.removeEventListener("slotchange",this._onSlotChangeBound),this._defaultSlot?.removeEventListener("slotchange",this._onSlotChangeBound),this._toolbarSlot?.addEventListener("slotchange",this._onSlotChangeBound),this._defaultSlot?.addEventListener("slotchange",this._onSlotChangeBound),this._syncPanelA11y(),this._syncRowVisibility(),this._refreshObservers(),this._schedulePosition()}}typeof customElements<"u"&&!customElements.get("ui-floating-toolbar")&&customElements.define("ui-floating-toolbar",l);exports.UIFloatingToolbar=l;

package/dist/floating-toolbar.esm.js

@@ -11,7 +11,7 @@ const d = `
 
     --ui-floating-toolbar-bg: var(--ui-color-surface, #ffffff);
     --ui-floating-toolbar-color: var(--ui-color-text, #0f172a);
-    --ui-floating-toolbar-muted: var(--ui-color-muted, #64748b);
+    --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;
@@ -148,11 +148,11 @@ const d = `
   }
 
   :host([tone="success"]) {
-    --ui-floating-toolbar-accent: var(--ui-color-success, #16a34a);
+    --ui-floating-toolbar-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-floating-toolbar-accent: var(--ui-color-warning, #d97706);
+    --ui-floating-toolbar-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -203,7 +203,7 @@ const d = `
     }
   }
 `;
-function c(o, t) {
+function b(o, t) {
   if (o == null || o === "") return t;
   const e = Number(o);
   return Number.isFinite(e) ? e : t;
@@ -213,7 +213,7 @@ function a(o, t) {
   const e = o.trim().toLowerCase();
   return e !== "false" && e !== "0" && e !== "off";
 }
-function b(o) {
+function c(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 +414,12 @@ class m extends u {
       this._requestClose("anchor-missing");
       return;
     }
-    if (!b(this._anchor)) {
+    if (!c(this._anchor)) {
       this._requestClose("anchor-hidden");
       return;
     }
     if (!this._panel) return;
-    const t = Math.max(0, c(this.getAttribute("offset"), 8)), e = f(this.getAttribute("placement")), i = p(this.getAttribute("align")), r = g(e, i);
+    const t = Math.max(0, b(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,
@@ -488,14 +488,14 @@ class m extends u {
   render() {
     this.setContent(`
       <style>${d}</style>
-      <section class="panel" part="panel" role="toolbar" aria-orientation="horizontal" tabindex="-1">
+      <div class="panel" part="panel" role="toolbar" aria-orientation="horizontal" tabindex="-1">
         <div class="row row-toolbar" part="row-toolbar">
           <slot name="toolbar"></slot>
         </div>
         <div class="row row-default" part="row-default">
           <slot></slot>
         </div>
-      </section>
+      </div>
     `), this._panel = this.root.querySelector(".panel"), this._toolbarSlot = this.root.querySelector('slot[name="toolbar"]'), this._defaultSlot = this.root.querySelector("slot:not([name])"), this._panel?.removeEventListener("keydown", this._onPanelKeyDownBound), this._panel?.addEventListener("keydown", this._onPanelKeyDownBound), this._toolbarSlot?.removeEventListener("slotchange", this._onSlotChangeBound), this._defaultSlot?.removeEventListener("slotchange", this._onSlotChangeBound), this._toolbarSlot?.addEventListener("slotchange", this._onSlotChangeBound), this._defaultSlot?.addEventListener("slotchange", this._onSlotChangeBound), this._syncPanelA11y(), this._syncRowVisibility(), this._refreshObservers(), this._schedulePosition();
   }
 }