@editora/ui-core 0.1.9 → 0.1.10

package/dist/file-upload.cjs.js

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