@editora/ui-core 0.1.25 → 0.2.0

package/dist/file-upload.cjs.js

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const $=require("./ElementBase-DxbvhLJs.js"),j=`
   :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);
@@ -74,10 +74,16 @@
     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 {
@@ -85,16 +91,10 @@
     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 {
@@ -108,12 +108,24 @@
     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 {
@@ -128,9 +140,9 @@
     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] {
@@ -165,15 +177,15 @@
     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;
@@ -230,12 +242,12 @@
 
   .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"] {
@@ -270,7 +282,16 @@
   .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 {
@@ -280,13 +301,24 @@
   }
 
   .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"] {
@@ -294,8 +326,9 @@
   }
 
   .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 {
@@ -321,13 +354,22 @@
     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 {
     cursor: not-allowed;
     opacity: 0.68;
   }
-`;function O(g){if(!Number.isFinite(g)||g<=0)return"0 B";const e=["B","KB","MB","GB"];let t=g,i=0;for(;t>=1024&&i<e.length-1;)t/=1024,i+=1;return`${t.toFixed(t>=10||i===0?0:1)} ${e[i]}`}function W(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();return t.some(a=>{const r=a.toLowerCase();return r.startsWith(".")?i.endsWith(r):r.endsWith("/*")?s.startsWith(r.slice(0,-1)):s===r})}class M extends $.ElementBase{constructor(){super(),this._files=[],this.uploadRequest=null,this._formUnregister=null,this._surfaceEl=null,this._inputEl=null,this._listEl=null,this._errorEl=null,this._actionsEl=null,this._dragging=!1,this._dragDepth=0,this._previewUrls=new Map,this._uploadState=new Map,this._uploadControllers=new Map,this._uploadSequence=0,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onInputChange=this._onInputChange.bind(this),this._onDragEnter=this._onDragEnter.bind(this),this._onDragLeave=this._onDragLeave.bind(this),this._onDragOver=this._onDragOver.bind(this),this._onDrop=this._onDrop.bind(this)}static get observedAttributes(){return["name","label","description","accept","multiple","disabled","required","max-files","max-size","button-text","drop-label","surface","data-error","progress","show-previews","upload-on-select","upload-button-text"]}get files(){return[...this._files]}get uploading(){return Array.from(this._uploadState.values()).some(e=>e.state==="uploading")}setFiles(e){this._applyFiles(e,"api",!0)}openPicker(){this._disabled()||this._inputEl?.click()}clearFiles(){this._files.length&&(this.cancelUploads(),this._files=[],this._uploadState.clear(),this._inputEl&&(this._inputEl.value=""),this._syncUi(),this._emit("change",{files:[],source:"clear"}),this._emit("clear",{}))}removeFile(e){if(this._disabled()||e<0||e>=this._files.length)return;const t=this._files[e];this.cancelUpload(this._fileKey(t)),this._uploadState.delete(this._fileKey(t)),this._files=this._files.filter((i,s)=>s!==e),this._syncUi(),this._emit("change",{files:this.files,source:"remove"})}async startUpload(){if(!this.uploadRequest||this._disabled())return;const e=this._files.filter(i=>{const s=this._uploadState.get(this._fileKey(i));return!s||s.state==="pending"||s.state==="error"||s.state==="canceled"});if(!e.length)return;const t=++this._uploadSequence;this._emit("upload-start",{files:e,requestId:t}),await Promise.all(e.map(i=>this._runUpload(i,t))),this._emit("upload-complete",{files:this.files,requestId:t,statuses:Object.fromEntries(Array.from(this._uploadState.entries()).map(([i,s])=>[i,{...s}]))}),this._syncUi()}cancelUploads(){Array.from(this._uploadControllers.keys()).forEach(e=>this.cancelUpload(e))}cancelUpload(e){const t=typeof e=="string"?e:this._fileKey(e),i=this._uploadControllers.get(t);i&&i.abort()}connectedCallback(){super.connectedCallback(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._revokePreviewUrls(),super.disconnectedCallback()}attributeChangedCallback(e,t,i){t!==i&&(e==="name"&&this.isConnected&&this._registerWithForm(),this._surfaceEl&&this._syncUi())}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+`;function O(g){if(!Number.isFinite(g)||g<=0)return"0 B";const e=["B","KB","MB","GB"];let t=g,i=0;for(;t>=1024&&i<e.length-1;)t/=1024,i+=1;return`${t.toFixed(t>=10||i===0?0:1)} ${e[i]}`}function W(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(),r=(g.type||"").toLowerCase();return t.some(a=>{const s=a.toLowerCase();return s.startsWith(".")?i.endsWith(s):s.endsWith("/*")?r.startsWith(s.slice(0,-1)):r===s})}class M extends $.ElementBase{constructor(){super(),this._files=[],this.uploadRequest=null,this._formUnregister=null,this._surfaceEl=null,this._inputEl=null,this._listEl=null,this._errorEl=null,this._actionsEl=null,this._dragging=!1,this._dragDepth=0,this._previewUrls=new Map,this._uploadState=new Map,this._uploadControllers=new Map,this._uploadSequence=0,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onInputChange=this._onInputChange.bind(this),this._onDragEnter=this._onDragEnter.bind(this),this._onDragLeave=this._onDragLeave.bind(this),this._onDragOver=this._onDragOver.bind(this),this._onDrop=this._onDrop.bind(this)}static get observedAttributes(){return["name","label","description","accept","multiple","disabled","required","max-files","max-size","button-text","drop-label","surface","data-error","progress","show-previews","upload-on-select","upload-button-text"]}get files(){return[...this._files]}get uploading(){return Array.from(this._uploadState.values()).some(e=>e.state==="uploading")}setFiles(e){this._applyFiles(e,"api",!0)}openPicker(){this._disabled()||this._inputEl?.click()}clearFiles(){this._files.length&&(this.cancelUploads(),this._files=[],this._uploadState.clear(),this._inputEl&&(this._inputEl.value=""),this._syncUi(),this._emit("change",{files:[],source:"clear"}),this._emit("clear",{}))}removeFile(e){if(this._disabled()||e<0||e>=this._files.length)return;const t=this._files[e];this.cancelUpload(this._fileKey(t)),this._uploadState.delete(this._fileKey(t)),this._files=this._files.filter((i,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 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,r])=>[i,{...r}]))}),this._syncUi()}cancelUploads(){Array.from(this._uploadControllers.keys()).forEach(e=>this.cancelUpload(e))}cancelUpload(e){const t=typeof e=="string"?e:this._fileKey(e),i=this._uploadControllers.get(t);i&&i.abort()}connectedCallback(){super.connectedCallback(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._revokePreviewUrls(),super.disconnectedCallback()}attributeChangedCallback(e,t,i){t!==i&&(e==="name"&&this.isConnected&&this._registerWithForm(),this._surfaceEl&&this._syncUi())}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
       <style>${j}</style>
       <div class="root">
         <div class="meta" hidden>
@@ -350,4 +392,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();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;
+    `),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 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(!W(n,m)){o.push({file:n,reason:"accept"});return}if(v!=null&&n.size>v){o.push({file:n,reason:"max-size"});return}if(_!=null&&a.length+s.length>=_){o.push({file:n,reason:"max-files"});return}x.add(b),s.push(n)}}),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}),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}))}_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),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 s=await this.uploadRequest({file:e,files:this.files,signal:r.signal,setProgress:a});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 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()}}_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,r])=>{const a=Number(r);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,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`}:r>0&&r===this._files.length?{title:"Uploads complete",subtitle:`${r} file${r===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 r=URL.createObjectURL(e);return this._previewUrls.set(t,r),r}_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"),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",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"),B=this.root.querySelector(".actions-title"),I=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,B.textContent=N.title,I.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?o:"Upload complete",f.disabled=r||this.uploading||!p,f.addEventListener("click",l=>{l.stopPropagation(),this.startUpload()}),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=r,l.addEventListener("click",h=>{h.stopPropagation(),this.cancelUploads()}),S.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 u=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 C=document.createElement("div");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=O(p.size);const U=document.createElement("span");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)})):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()})):(c.textContent="Remove",c.addEventListener("click",d=>{d.stopPropagation(),this.removeFile(f)})),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 F=document.createElement("div");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=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=u.error,l.append(d)}return l})),this._revokePreviewUrls(P)}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{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: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:s=>{s?this.setAttribute("data-error",s):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;