@vielzeug/refine 2.2.5 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/carousel.cjs +1 -1
  2. package/dist/carousel.cjs.map +1 -1
  3. package/dist/carousel.js +1 -1
  4. package/dist/carousel.js.map +1 -1
  5. package/dist/chat-message.cjs +9 -9
  6. package/dist/chat-message.cjs.map +1 -1
  7. package/dist/chat-message.js +40 -37
  8. package/dist/chat-message.js.map +1 -1
  9. package/dist/command-palette.cjs +1 -1
  10. package/dist/command-palette.cjs.map +1 -1
  11. package/dist/command-palette.js +1 -1
  12. package/dist/command-palette.js.map +1 -1
  13. package/dist/core/announcer.cjs +1 -1
  14. package/dist/core/announcer.cjs.map +1 -1
  15. package/dist/core/announcer.d.ts +13 -3
  16. package/dist/core/announcer.d.ts.map +1 -1
  17. package/dist/core/announcer.js +16 -9
  18. package/dist/core/announcer.js.map +1 -1
  19. package/dist/custom-elements.json +4328 -4328
  20. package/dist/feedback/typing-indicator/typing-indicator.d.ts +2 -2
  21. package/dist/file-input.cjs +49 -49
  22. package/dist/file-input.cjs.map +1 -1
  23. package/dist/file-input.js +128 -127
  24. package/dist/file-input.js.map +1 -1
  25. package/dist/inputs/file-input/file-input-upload.cjs +1 -1
  26. package/dist/inputs/file-input/file-input-upload.cjs.map +1 -1
  27. package/dist/inputs/file-input/file-input-upload.d.ts +2 -0
  28. package/dist/inputs/file-input/file-input-upload.d.ts.map +1 -1
  29. package/dist/inputs/file-input/file-input-upload.js +5 -2
  30. package/dist/inputs/file-input/file-input-upload.js.map +1 -1
  31. package/dist/inputs/file-input/file-input.d.ts.map +1 -1
  32. package/dist/refine.cjs +62 -62
  33. package/dist/refine.cjs.map +1 -1
  34. package/dist/refine.iife.js +62 -62
  35. package/dist/refine.iife.js.map +1 -1
  36. package/dist/refine.js +62 -62
  37. package/dist/refine.js.map +1 -1
  38. package/dist/typing-indicator.cjs +1 -1
  39. package/dist/typing-indicator.cjs.map +1 -1
  40. package/dist/typing-indicator.js +8 -7
  41. package/dist/typing-indicator.js.map +1 -1
  42. package/package.json +4 -4
@@ -17,8 +17,8 @@ export type OreTypingIndicatorProps = {
17
17
  * announced through the shared singleton live region (`core/announcer.ts`) rather than a
18
18
  * static `aria-live` element in the template. A live region populated in the same paint as
19
19
  * its own insertion is unreliable across browsers/screen readers; routing through the shared
20
- * announcer (pre-existing region, clear-then-set) is the same pattern already used for other
21
- * transient status messages across this package.
20
+ * announcer (pre-existing region, clear-then-set, document-scoped) is the same pattern
21
+ * already used for other transient status messages across this package.
22
22
  *
23
23
  * @element ore-typing-indicator
24
24
  *
@@ -1,34 +1,34 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/keyboard.cjs"),a=require("./core/ref-callback.cjs"),o=require("./shared/size-presets.cjs"),s=require("./inputs/file-input/file-input.css.cjs"),c=require("./inputs/file-input/file-input-upload.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple"),d=require("@vielzeug/dnd");var f=e=>e.type.startsWith(`image/`),p=`ore-file-input`;(0,l.define)(p,{formAssociated:!0,props:{accept:l.prop.string(),color:l.prop.string(),disabled:l.prop.bool(!1),error:l.prop.string(),gallery:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"max-files":l.prop.number(0),"max-size":l.prop.number(0),multiple:l.prop.bool(!1),name:l.prop.string(),ref:l.prop.data(),required:l.prop.bool(!1),size:l.prop.string(),upload:l.prop.data()},setup(e){let t=(0,l.useEmit)(),n=(0,u.signal)(!1),r=(0,u.signal)(null),o=(0,u.computed)(()=>!!e.disabled.value),s=(0,u.computed)(()=>e[`max-files`].value??0),p=(0,u.computed)(()=>e[`max-size`].value??0),m=c.createFileQueue({accept:e.accept,disabled:o,maxFiles:s,maxSize:p,multiple:(0,u.computed)(()=>!!e.multiple.value),onChange:(e,n)=>t(`change`,{files:e,originalEvent:n,value:e}),onRemove:(e,n,r)=>t(`remove`,{file:e,files:n,originalEvent:r,value:n}),onUploadError:(e,n)=>t(`upload-error`,{error:n,file:e}),onUploadProgress:(e,n,r)=>t(`upload-progress`,{file:e,loaded:n,total:r}),onUploadSuccess:e=>t(`upload-success`,{file:e}),upload:(0,u.computed)(()=>e.upload.value??void 0)});(0,l.onCleanup)(()=>m.dispose()),(0,l.useField)({disabled:o,toFormValue:t=>{if(t.length===0)return null;let n=e.name.value||`file`,r=new FormData;for(let e of t)r.append(n,e);return r},value:m.files});let h=(0,u.computed)(()=>!!e.error.value);(0,l.bind)({attr:{"drag-over":()=>n.value?!0:void 0,invalid:()=>h.value?!0:void 0,size:e.size}});let g=(0,l.createStableId)(`file-input`),_=`label-${g}`,v=`helper-${g}`,y=`error-${g}`,b=(0,l.ref)(),x=(0,l.ref)(),S=(0,u.computed)(()=>{let t=[];e.accept.value&&t.push(e.accept.value.split(`,`).map(e=>e.trim()).join(`, `));let n=p.value;n>0&&t.push(`max ${c.formatBytes(n)}`);let r=s.value;return r>0&&t.push(`up to ${r} file${r===1?``:`s`}`),t.join(` · `)});function C(e){r.value=e,x.value?.click()}let w=new Map;function T(e){let t=w.get(e);return t||(t=URL.createObjectURL(e),w.set(e,t)),t}function E(e){let t=new Set(e);for(let[e,n]of w)t.has(e)||(URL.revokeObjectURL(n),w.delete(e))}return(0,u.watch)(m.files,E),(0,l.onCleanup)(()=>{for(let e of w.values())URL.revokeObjectURL(e);w.clear()}),(0,l.onElement)(x,t=>a.bindRefCallback(e.ref,t)),(0,l.onMounted)(()=>{let e=x.value,t=b.value,a=!1,s=i.createInteraction({disabled:o,onPress:()=>{e.click()}});(0,l.onEvent)(e,`change`,e=>{let t=e.target,n=r.value;r.value=null,n&&t.files?.[0]?m.replaceFile(n,t.files[0],e):t.files?.length&&m.addFiles(Array.from(t.files),e),t.value=``}),(0,l.onEvent)(t,`click`,t=>{if(t.target!==e){if(a){a=!1;return}o.value||e.click()}}),(0,l.onEvent)(t,`keydown`,e=>{a=s.handleKeydown(e)&&e.key===`Enter`}),(0,u.watch)(o,e=>{let r=(0,d.createDropZone)({disabled:e,element:t,onDrop:e=>m.addFiles(e),onHoverChange:e=>{n.value=e}});return()=>r.dispose()},{immediate:!0})}),l.html`
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/keyboard.cjs"),a=require("./core/ref-callback.cjs"),o=require("./shared/size-presets.cjs"),s=require("./inputs/file-input/file-input.css.cjs"),c=require("./inputs/file-input/file-input-upload.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple"),d=require("@vielzeug/dnd");var f=e=>e.type.startsWith(`image/`),p=`ore-file-input`;(0,l.define)(p,{formAssociated:!0,props:{accept:l.prop.string(),color:l.prop.string(),disabled:l.prop.bool(!1),error:l.prop.string(),gallery:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"max-files":l.prop.number(0),"max-size":l.prop.number(0),multiple:l.prop.bool(!1),name:l.prop.string(),ref:l.prop.data(),required:l.prop.bool(!1),size:l.prop.string(),upload:l.prop.data()},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),r=(0,u.signal)(!1),o=(0,u.signal)(null),s=(0,u.computed)(()=>!!e.disabled.value),p=(0,u.computed)(()=>e[`max-files`].value??0),m=(0,u.computed)(()=>e[`max-size`].value??0),h=c.createFileQueue({accept:e.accept,disabled:s,document:t.ownerDocument,maxFiles:p,maxSize:m,multiple:(0,u.computed)(()=>!!e.multiple.value),onChange:(e,t)=>n(`change`,{files:e,originalEvent:t,value:e}),onRemove:(e,t,r)=>n(`remove`,{file:e,files:t,originalEvent:r,value:t}),onUploadError:(e,t)=>n(`upload-error`,{error:t,file:e}),onUploadProgress:(e,t,r)=>n(`upload-progress`,{file:e,loaded:t,total:r}),onUploadSuccess:e=>n(`upload-success`,{file:e}),upload:(0,u.computed)(()=>e.upload.value??void 0)});(0,l.onCleanup)(()=>h.dispose()),(0,l.useField)({disabled:s,toFormValue:t=>{if(t.length===0)return null;let n=e.name.value||`file`,r=new FormData;for(let e of t)r.append(n,e);return r},value:h.files});let g=(0,u.computed)(()=>!!e.error.value);(0,l.bind)({attr:{"drag-over":()=>r.value?!0:void 0,invalid:()=>g.value?!0:void 0,size:e.size}});let _=(0,l.createStableId)(`file-input`),v=`label-${_}`,y=`helper-${_}`,b=`error-${_}`,x=(0,l.ref)(),S=(0,l.ref)(),C=(0,u.computed)(()=>{let t=[];e.accept.value&&t.push(e.accept.value.split(`,`).map(e=>e.trim()).join(`, `));let n=m.value;n>0&&t.push(`max ${c.formatBytes(n)}`);let r=p.value;return r>0&&t.push(`up to ${r} file${r===1?``:`s`}`),t.join(` · `)});function w(e){o.value=e,S.value?.click()}let T=new Map;function E(e){let t=T.get(e);return t||(t=URL.createObjectURL(e),T.set(e,t)),t}function D(e){let t=new Set(e);for(let[e,n]of T)t.has(e)||(URL.revokeObjectURL(n),T.delete(e))}return(0,u.watch)(h.files,D),(0,l.onCleanup)(()=>{for(let e of T.values())URL.revokeObjectURL(e);T.clear()}),(0,l.onElement)(S,t=>a.bindRefCallback(e.ref,t)),(0,l.onMounted)(()=>{let e=S.value,t=x.value,n=!1,a=i.createInteraction({disabled:s,onPress:()=>{e.click()}});(0,l.onEvent)(e,`change`,e=>{let t=e.target,n=o.value;o.value=null,n&&t.files?.[0]?h.replaceFile(n,t.files[0],e):t.files?.length&&h.addFiles(Array.from(t.files),e),t.value=``}),(0,l.onEvent)(t,`click`,t=>{if(t.target!==e){if(n){n=!1;return}s.value||e.click()}}),(0,l.onEvent)(t,`keydown`,e=>{n=a.handleKeydown(e)&&e.key===`Enter`}),(0,u.watch)(s,e=>{let n=(0,d.createDropZone)({disabled:e,element:t,onDrop:e=>h.addFiles(e),onHoverChange:e=>{r.value=e}});return()=>n.dispose()},{immediate:!0})}),l.html`
2
2
  <div class="file-input-wrapper" part="wrapper">
3
- <label class="label-outside" id="${_}" part="label" ?hidden=${()=>!e.label.value}>
3
+ <label class="label-outside" id="${v}" part="label" ?hidden=${()=>!e.label.value}>
4
4
  ${e.label}
5
5
  </label>
6
6
  <div
7
7
  class="dropzone"
8
8
  part="dropzone"
9
- ref=${b}
9
+ ref=${x}
10
10
  role="button"
11
- tabindex="${()=>o.value?`-1`:`0`}"
12
- aria-disabled="${()=>String(o.value)}"
11
+ tabindex="${()=>s.value?`-1`:`0`}"
12
+ aria-disabled="${()=>String(s.value)}"
13
13
  aria-label="${()=>e.label.value?null:`File upload drop zone`}"
14
- aria-labelledby="${()=>e.label.value?_:null}"
15
- aria-describedby="${v}">
14
+ aria-labelledby="${()=>e.label.value?v:null}"
15
+ aria-describedby="${y}">
16
16
  <input
17
17
  type="file"
18
- ref=${x}
18
+ ref=${S}
19
19
  part="input"
20
- id="${g}"
20
+ id="${_}"
21
21
  accept="${e.accept}"
22
22
  ?multiple="${e.multiple}"
23
23
  ?required="${e.required}"
24
- ?disabled="${o}"
24
+ ?disabled="${s}"
25
25
  name="${e.name}"
26
26
  hidden
27
27
  inert
28
28
  tabindex="-1" />
29
29
  <div class="dropzone-content">
30
- <span class="dropzone-icon" aria-hidden="true" data-status="${()=>h.value?`error`:null}">
31
- ${()=>h.value?l.html`
30
+ <span class="dropzone-icon" aria-hidden="true" data-status="${()=>g.value?`error`:null}">
31
+ ${()=>g.value?l.html`
32
32
  <ore-icon name="alert-circle" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>
33
33
  `:l.html`
34
34
  <ore-icon name="upload" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>
@@ -37,16 +37,16 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
37
37
  <!-- Signal 01: the copy itself shifts on drag-entry (not just border/glow) — a
38
38
  static "Drop files here" during an active drag reads as if the drop target
39
39
  hasn't noticed the file yet. -->
40
- ${(0,l.when)(()=>n.value,()=>l.html`
40
+ ${(0,l.when)(()=>r.value,()=>l.html`
41
41
  <span class="dropzone-title dropzone-title-active">Release to upload</span>
42
42
  `)}
43
- ${(0,l.when)(()=>!n.value,()=>l.html`
43
+ ${(0,l.when)(()=>!r.value,()=>l.html`
44
44
  <span class="dropzone-title">
45
45
  Drop files here or
46
46
  <u>click to browse</u>
47
47
  </span>
48
48
  `)}
49
- <span class="dropzone-hint" ?hidden=${()=>!S.value}>${S}</span>
49
+ <span class="dropzone-hint" ?hidden=${()=>!C.value}>${C}</span>
50
50
  </div>
51
51
  </div>
52
52
  <ul
@@ -54,46 +54,46 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
54
54
  part="${()=>e.gallery.value?`gallery`:null}"
55
55
  role="list"
56
56
  aria-label="Selected files"
57
- ?hidden=${()=>m.files.value.length===0}>
58
- ${()=>m.files.value.map(t=>e.gallery.value?l.html`
59
- <li class="file-card" data-status=${()=>m.fileState(t).status}>
57
+ ?hidden=${()=>h.files.value.length===0}>
58
+ ${()=>h.files.value.map(t=>e.gallery.value?l.html`
59
+ <li class="file-card" data-status=${()=>h.fileState(t).status}>
60
60
  <span class="file-thumb-frame">
61
61
  ${f(t)?l.html`
62
62
  <img
63
63
  class="file-thumb"
64
64
  alt=""
65
- ref="${e=>{e&&(e.src=T(t))}}" />
65
+ ref="${e=>{e&&(e.src=E(t))}}" />
66
66
  `:l.html`
67
67
  <span class="file-thumb file-thumb-generic" aria-hidden="true">
68
68
  <ore-icon name="file" size="28" stroke-width="1.5" aria-hidden="true"></ore-icon>
69
69
  </span>
70
70
  `}
71
- ${(0,l.when)(()=>m.fileState(t).status===`success`,()=>l.html`
71
+ ${(0,l.when)(()=>h.fileState(t).status===`success`,()=>l.html`
72
72
  <span class="file-status-badge file-status-badge-success" aria-hidden="true">
73
73
  <ore-icon name="check" size="11" stroke-width="3" aria-hidden="true"></ore-icon>
74
74
  </span>
75
75
  `)}
76
- ${(0,l.when)(()=>m.fileState(t).status===`error`,()=>l.html`
76
+ ${(0,l.when)(()=>h.fileState(t).status===`error`,()=>l.html`
77
77
  <span class="file-status-badge file-status-badge-error" aria-hidden="true">
78
78
  <ore-icon name="alert-circle" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
79
79
  </span>
80
80
  `)}
81
81
  <span class="file-card-actions">
82
- ${(0,l.when)(()=>m.fileState(t).status===`error`,()=>l.html`
82
+ ${(0,l.when)(()=>h.fileState(t).status===`error`,()=>l.html`
83
83
  <button
84
84
  class="file-card-action"
85
85
  type="button"
86
86
  aria-label="${`Retry uploading ${t.name}`}"
87
- @click=${()=>m.retryUpload(t)}>
87
+ @click=${()=>h.retryUpload(t)}>
88
88
  <ore-icon name="refresh-cw" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
89
89
  </button>
90
90
  `)}
91
- ${(0,l.when)(()=>m.fileState(t).status===`success`&&!!e.multiple.value&&!!e.upload.value,()=>l.html`
91
+ ${(0,l.when)(()=>h.fileState(t).status===`success`&&!!e.multiple.value&&!!e.upload.value,()=>l.html`
92
92
  <button
93
93
  class="file-card-action"
94
94
  type="button"
95
95
  aria-label="${`Replace ${t.name}`}"
96
- @click=${()=>C(t)}>
96
+ @click=${()=>w(t)}>
97
97
  <ore-icon name="upload" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
98
98
  </button>
99
99
  `)}
@@ -101,66 +101,66 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
101
101
  class="file-card-action file-card-remove"
102
102
  type="button"
103
103
  aria-label="${`Remove ${t.name}`}"
104
- @click=${e=>m.removeFile(t,e)}>
104
+ @click=${e=>h.removeFile(t,e)}>
105
105
  <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
106
106
  </button>
107
107
  </span>
108
108
  </span>
109
109
  <span class="file-card-name" title="${t.name}">${t.name}</span>
110
- ${(0,l.when)(()=>m.fileState(t).status===`uploading`,()=>l.html`
110
+ ${(0,l.when)(()=>h.fileState(t).status===`uploading`,()=>l.html`
111
111
  <ore-progress
112
112
  type="linear"
113
113
  size="sm"
114
- value=${()=>m.uploadPercent(t)}
115
- label=${()=>`${m.uploadPercent(t)}%`}></ore-progress>
116
- <span class="file-progress-meta">${()=>m.uploadMetaText(t)}</span>
114
+ value=${()=>h.uploadPercent(t)}
115
+ label=${()=>`${h.uploadPercent(t)}%`}></ore-progress>
116
+ <span class="file-progress-meta">${()=>h.uploadMetaText(t)}</span>
117
117
  `)}
118
- ${(0,l.when)(()=>m.fileState(t).status===`error`,()=>l.html`
119
- <span class="file-error-text">${()=>m.fileState(t).error}</span>
118
+ ${(0,l.when)(()=>h.fileState(t).status===`error`,()=>l.html`
119
+ <span class="file-error-text">${()=>h.fileState(t).error}</span>
120
120
  `)}
121
121
  </li>
122
122
  `:l.html`
123
- <li class="file-item" data-status=${()=>m.fileState(t).status}>
123
+ <li class="file-item" data-status=${()=>h.fileState(t).status}>
124
124
  <span class="file-icon" aria-hidden="true">
125
125
  <ore-icon
126
- name=${()=>m.statusIconName(t)}
126
+ name=${()=>h.statusIconName(t)}
127
127
  size="18"
128
128
  stroke-width="1.75"
129
129
  aria-hidden="true"></ore-icon>
130
130
  </span>
131
131
  <span class="file-meta">
132
132
  <span class="file-name" title="${t.name}">${t.name}</span>
133
- ${(0,l.when)(()=>m.fileState(t).status===`uploading`,()=>l.html`
133
+ ${(0,l.when)(()=>h.fileState(t).status===`uploading`,()=>l.html`
134
134
  <ore-progress
135
135
  type="linear"
136
136
  size="sm"
137
- value=${()=>m.uploadPercent(t)}
138
- label=${()=>`${m.uploadPercent(t)}%`}></ore-progress>
139
- <span class="file-progress-meta">${()=>m.uploadMetaText(t)}</span>
137
+ value=${()=>h.uploadPercent(t)}
138
+ label=${()=>`${h.uploadPercent(t)}%`}></ore-progress>
139
+ <span class="file-progress-meta">${()=>h.uploadMetaText(t)}</span>
140
140
  `)}
141
- ${(0,l.when)(()=>m.fileState(t).status===`error`,()=>l.html`
142
- <span class="file-error-text">${()=>m.fileState(t).error}</span>
141
+ ${(0,l.when)(()=>h.fileState(t).status===`error`,()=>l.html`
142
+ <span class="file-error-text">${()=>h.fileState(t).error}</span>
143
143
  `)}
144
- ${(0,l.when)(()=>m.fileState(t).status===`idle`||m.fileState(t).status===`success`,()=>l.html`
144
+ ${(0,l.when)(()=>h.fileState(t).status===`idle`||h.fileState(t).status===`success`,()=>l.html`
145
145
  <span class="file-size">${c.formatBytes(t.size)}</span>
146
146
  `)}
147
147
  </span>
148
148
  <span class="file-actions">
149
- ${(0,l.when)(()=>m.fileState(t).status===`error`,()=>l.html`
149
+ ${(0,l.when)(()=>h.fileState(t).status===`error`,()=>l.html`
150
150
  <button
151
151
  class="file-action"
152
152
  type="button"
153
153
  aria-label="${`Retry uploading ${t.name}`}"
154
- @click=${()=>m.retryUpload(t)}>
154
+ @click=${()=>h.retryUpload(t)}>
155
155
  <ore-icon name="refresh-cw" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
156
156
  </button>
157
157
  `)}
158
- ${(0,l.when)(()=>m.fileState(t).status===`success`&&!!e.multiple.value&&!!e.upload.value,()=>l.html`
158
+ ${(0,l.when)(()=>h.fileState(t).status===`success`&&!!e.multiple.value&&!!e.upload.value,()=>l.html`
159
159
  <button
160
160
  class="file-action"
161
161
  type="button"
162
162
  aria-label="${`Replace ${t.name}`}"
163
- @click=${()=>C(t)}>
163
+ @click=${()=>w(t)}>
164
164
  <ore-icon name="upload" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
165
165
  </button>
166
166
  `)}
@@ -168,22 +168,22 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
168
168
  class="file-remove"
169
169
  type="button"
170
170
  aria-label="${`Remove ${t.name}`}"
171
- @click=${e=>m.removeFile(t,e)}>
171
+ @click=${e=>h.removeFile(t,e)}>
172
172
  <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
173
173
  </button>
174
174
  </span>
175
175
  </li>
176
176
  `)}
177
177
  </ul>
178
- <div class="helper-text" id="${v}" part="helper" ?hidden=${()=>h.value||!e.helper.value}>
178
+ <div class="helper-text" id="${y}" part="helper" ?hidden=${()=>g.value||!e.helper.value}>
179
179
  ${e.helper}
180
180
  </div>
181
181
  <div
182
182
  class="helper-text helper-text-error"
183
- id="${y}"
183
+ id="${b}"
184
184
  role="alert"
185
185
  part="error"
186
- ?hidden=${()=>!h.value}>
186
+ ?hidden=${()=>!g.value}>
187
187
  ${()=>e.error.value??``}
188
188
  </div>
189
189
  </div>
@@ -1 +1 @@
1
- {"version":3,"file":"file-input.cjs","names":[],"sources":["../src/inputs/file-input/file-input.ts"],"sourcesContent":["import { createDropZone } from '@vielzeug/dnd';\nimport {\n bind,\n createStableId,\n define,\n html,\n onCleanup,\n onElement,\n onEvent,\n onMounted,\n prop,\n ref,\n useEmit,\n useField,\n when,\n} from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { bindRefCallback, createInteraction } from '../../core';\nimport { FILE_INPUT_SIZE_PRESET } from '../../shared';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n disabledLoadingMixin,\n forcedColorsFocusMixin,\n reducedMotionMixin,\n roundedVariantMixin,\n sizeVariantMixin,\n} from '../../styles';\nimport componentStyles from './file-input.css?inline';\nimport { createFileQueue, type FileUploadFn, formatBytes } from './file-input-upload';\n\nexport type { FileUploadFn, FileUploadState, FileUploadStatus } from './file-input-upload';\n\nconst isImageFile = (file: File): boolean => file.type.startsWith('image/');\n\n/** File input component properties */\nexport type OreFileInputProps = {\n /** Accepted file types (comma-separated, e.g. '.jpg, .png, image/*') */\n accept?: string;\n /** Theme color tint */\n color?: string;\n /** Disabled state */\n disabled?: boolean;\n /** Error message text */\n error?: string;\n /**\n * Render selected files as a grid of image thumbnails/previews instead of the default\n * single-column list. Non-image files fall back to a generic file icon in the same grid.\n */\n gallery?: boolean;\n /** Helper text displayed below the input */\n helper?: string;\n /** Input label text */\n label?: string;\n /** Max number of files allowed (only used if multiple is true) */\n 'max-files'?: number;\n /** Max size of a single file in bytes */\n 'max-size'?: number;\n /** Allow multiple files selection */\n multiple?: boolean;\n /** Form field name */\n name?: string;\n /**\n * JS-only callback fired with the inner `<input type=\"file\">` element when it\n * mounts, and with `null` when it unmounts. Intended for composed components\n * that need imperative access to the raw element.\n * Set as a JS property: `bitFileInput.ref = (el) => { ... }`.\n */\n ref?: ((el: HTMLInputElement | null) => void) | null;\n /** Required field */\n required?: boolean;\n /** Field size preset */\n size?: string;\n /**\n * JS-only upload transport (see `FileUploadFn`). When set, every newly added file starts\n * uploading immediately and independently — progress/speed/ETA, retry-on-failure, and a\n * success confirmation card are all driven from here. Omit it to keep the component in its\n * original picker-only mode (select files, no upload lifecycle).\n * Set as a JS property: `fileInput.upload = async (file, { onProgress, signal }) => { ... }`.\n */\n upload?: FileUploadFn | null;\n};\n\n/** Events emitted by the file-input component */\nexport type OreFileInputEvents = {\n /** Emitted when files are added or removed */\n change: { files: File[]; originalEvent?: Event; value: File[] };\n /** Emitted when a specific file is removed */\n remove: { file: File; files: File[]; originalEvent?: Event; value: File[] };\n /** Emitted when `upload` rejects for a file (after a fresh attempt or a retry) */\n 'upload-error': { error: unknown; file: File };\n /** Emitted whenever `upload`'s `onProgress` reports new bytes for a file */\n 'upload-progress': { file: File; loaded: number; total: number };\n /** Emitted when `upload` resolves for a file */\n 'upload-success': { file: File };\n};\n\n/**\n * A file upload field with drag-and-drop support, built-in validation messaging, and — once a\n * `upload` transport is wired up — a full per-file upload lifecycle: live progress/speed/ETA,\n * retry-on-failure, a success confirmation card, and fully independent handling of concurrent\n * files (one failing never blocks or cancels the others). Picking files with no `upload` set\n * keeps the original, upload-free selection-only behavior.\n *\n * @element ore-file-input\n *\n * @attr {string} accept - Comma-separated file extensions or MIME types\n * @attr {boolean} multiple - Enable multiple files selection\n * @attr {boolean} gallery - Show selected files as an image thumbnail/preview grid\n * @attr {number} max-files - Max number of files allowed\n * @attr {number} max-size - Max size of each file in bytes\n * @attr {boolean} disabled - Disable interaction\n * @attr {string} error - Show an error state/message\n * @attr {string} helper - Provide helper context below the dropzone\n *\n * @fires change - detail: { files: File[], value: File[] }\n * @fires remove - detail: { file: File, files: File[] }\n * @fires upload-progress - detail: { file: File, loaded: number, total: number }\n * @fires upload-success - detail: { file: File }\n * @fires upload-error - detail: { file: File, error: unknown }\n *\n * @cssprop --file-input-bg - Dropzone background color\n * @cssprop --file-input-border-color - Dropzone border color\n * @cssprop --file-input-font-size - Font size\n * @cssprop --file-input-radius - Dropzone border radius\n * @cssprop --file-input-min-height - Minimum dropzone height\n * @cssprop --file-input-hover-bg - Dropzone background on hover (flat/ghost variants)\n * @cssprop --file-input-hover-border-color - Dropzone border on hover (flat/bordered variants)\n * @cssprop --file-input-focus-bg - Dropzone background when focused/drag-over (flat variant)\n * @cssprop --file-input-focus-border-color - Dropzone border when focused/drag-over (flat variant)\n * @cssprop --file-input-thumb-size - Gallery thumbnail width/height\n * @part wrapper - Root wrapper around the file input field\n * @part label - Visible label rendered above the dropzone\n * @part dropzone - Interactive drag-and-drop target\n * @part input - Native file input element\n * @part gallery - Gallery grid container (rendered instead of `file-list` when `gallery` is set)\n * @part helper - Helper text shown beneath the dropzone\n * @part error - Error message shown beneath the field\n * @example\n * ```html\n * <ore-file-input label=\"Upload files\" accept=\"image/*\" multiple />\n * <ore-file-input label=\"Photos\" accept=\"image/*\" multiple gallery />\n * <ore-file-input label=\"Resume\" accept=\".pdf,.doc,.docx\" max-size=\"5242880\" />\n * <ore-file-input variant=\"bordered\" color=\"primary\" />\n * ```\n * ```ts\n * // Wire up a real upload transport — progress/retry/success are then handled automatically.\n * // `XMLHttpRequest` is used here (not `fetch`) because it's the only browser API that reports\n * // upload progress; swap in whatever transport the app already uses.\n * const input = document.querySelector('ore-file-input');\n * input.upload = (file, { onProgress, signal, resumeFrom }) =>\n * new Promise((resolve, reject) => {\n * const xhr = new XMLHttpRequest();\n *\n * xhr.upload.addEventListener('progress', (e) => onProgress(resumeFrom + e.loaded, file.size));\n * xhr.addEventListener('load', () => (xhr.status < 400 ? resolve() : reject(new Error(xhr.statusText))));\n * xhr.addEventListener('error', () => reject(new Error('Network error')));\n * signal.addEventListener('abort', () => xhr.abort());\n *\n * xhr.open('PUT', '/uploads');\n * if (resumeFrom > 0) xhr.setRequestHeader('Content-Range', `bytes ${resumeFrom}-/${file.size}`);\n * xhr.send(file);\n * });\n * ```\n */\nexport const FILE_INPUT_TAG = 'ore-file-input' as const;\ndefine<OreFileInputProps>(FILE_INPUT_TAG, {\n formAssociated: true,\n props: {\n accept: prop.string(),\n color: prop.string(),\n disabled: prop.bool(false),\n error: prop.string(),\n gallery: prop.bool(false),\n helper: prop.string(),\n label: prop.string(),\n 'max-files': prop.number(0),\n 'max-size': prop.number(0),\n multiple: prop.bool(false),\n name: prop.string(),\n ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n required: prop.bool(false),\n size: prop.string(),\n upload: prop.data<FileUploadFn>(),\n },\n setup(props) {\n const emit = useEmit<OreFileInputEvents>();\n\n // ============================================\n // State\n // ============================================\n\n const isDragging = signal(false);\n // Set while a \"Replace\" action is waiting for the (shared) native file input's next\n // `change` — routes that selection into `queue.replaceFile()` instead of `queue.addFiles()`.\n const replaceTarget = signal<File | null>(null);\n\n const isDisabled = computed(() => Boolean(props.disabled.value));\n const maxFilesLimit = computed(() => props['max-files'].value ?? 0);\n const maxSizeLimit = computed(() => props['max-size'].value ?? 0);\n\n // File selection + the opt-in upload lifecycle (progress, retry, replace, per-file\n // isolation) live in `createFileQueue` — see file-input-upload.ts for why they're one unit.\n const queue = createFileQueue({\n accept: props.accept,\n disabled: isDisabled,\n maxFiles: maxFilesLimit,\n maxSize: maxSizeLimit,\n multiple: computed(() => Boolean(props.multiple.value)),\n onChange: (changedFiles, originalEvent) =>\n emit('change', { files: changedFiles, originalEvent, value: changedFiles }),\n onRemove: (file, remainingFiles, originalEvent) =>\n emit('remove', { file, files: remainingFiles, originalEvent, value: remainingFiles }),\n onUploadError: (file, error) => emit('upload-error', { error, file }),\n onUploadProgress: (file, loaded, total) => emit('upload-progress', { file, loaded, total }),\n onUploadSuccess: (file) => emit('upload-success', { file }),\n upload: computed(() => props.upload.value ?? undefined),\n });\n\n onCleanup(() => queue.dispose());\n\n // ============================================\n // Form Integration\n // ============================================\n\n useField({\n disabled: isDisabled,\n toFormValue: (fi: File[]) => {\n if (fi.length === 0) return null;\n\n const name = props.name.value || 'file';\n const fd = new FormData();\n\n for (const file of fi) fd.append(name, file);\n\n return fd;\n },\n value: queue.files,\n });\n\n // Sync host attributes for CSS selectors\n const isInvalid = computed(() => Boolean(props.error.value));\n\n bind({\n attr: {\n 'drag-over': () => (isDragging.value ? true : undefined),\n invalid: () => (isInvalid.value ? true : undefined),\n size: props.size,\n },\n });\n\n // ============================================\n // IDs\n // ============================================\n const fileInputId = createStableId('file-input');\n const labelId = `label-${fileInputId}`;\n const helperId = `helper-${fileInputId}`;\n const errorId = `error-${fileInputId}`;\n\n // ============================================\n // Refs\n // ============================================\n const dropzoneRef = ref<HTMLDivElement>();\n const inputRef = ref<HTMLInputElement>();\n const hintText = computed(() => {\n const parts: string[] = [];\n\n if (props.accept.value) {\n parts.push(\n props.accept.value\n .split(',')\n .map((s: string) => s.trim())\n .join(', '),\n );\n }\n\n const maxSize = maxSizeLimit.value;\n\n if (maxSize > 0) parts.push(`max ${formatBytes(maxSize)}`);\n\n const maxFiles = maxFilesLimit.value;\n\n if (maxFiles > 0) parts.push(`up to ${maxFiles} file${maxFiles !== 1 ? 's' : ''}`);\n\n return parts.join(' · ');\n });\n\n // ============================================\n // Replace (\"swap this one file\" — see file-input-upload.ts's `replaceFile`)\n // ============================================\n function beginReplace(file: File): void {\n replaceTarget.value = file;\n inputRef.value?.click();\n }\n\n // ============================================\n // Gallery Preview URLs\n // ============================================\n // Object URLs are created lazily (only while `gallery` is enabled) and revoked as soon\n // as their file is no longer selected, plus unconditionally on disconnect — otherwise\n // each preview leaks its backing blob for the life of the page.\n const previewUrls = new Map<File, string>();\n\n function getPreviewUrl(file: File): string {\n let url = previewUrls.get(file);\n\n if (!url) {\n url = URL.createObjectURL(file);\n previewUrls.set(file, url);\n }\n\n return url;\n }\n\n function revokeStalePreviewUrls(activeFiles: File[]): void {\n const keep = new Set(activeFiles);\n\n for (const [file, url] of previewUrls) {\n if (!keep.has(file)) {\n URL.revokeObjectURL(url);\n previewUrls.delete(file);\n }\n }\n }\n\n watch(queue.files, revokeStalePreviewUrls);\n\n onCleanup(() => {\n for (const url of previewUrls.values()) URL.revokeObjectURL(url);\n\n previewUrls.clear();\n });\n\n // ============================================\n // Mount\n // ============================================\n // ============================================\n // Template\n // ============================================\n onElement(inputRef, (inp) => bindRefCallback(props.ref, inp));\n\n onMounted(() => {\n const inp = inputRef.value!;\n const dz = dropzoneRef.value!;\n let skipNextClick = false;\n const pressControl = createInteraction({\n disabled: isDisabled,\n onPress: () => {\n inp.click();\n },\n });\n\n // Native input → add files, or — if a \"Replace\" action opened the picker — swap the one\n // file it targeted instead of appending a new entry.\n onEvent(inp, 'change', (e: Event) => {\n const input = e.target as HTMLInputElement;\n const target = replaceTarget.value;\n\n replaceTarget.value = null;\n\n if (target && input.files?.[0]) queue.replaceFile(target, input.files[0], e);\n else if (input.files?.length) queue.addFiles(Array.from(input.files), e);\n\n input.value = ''; // reset so the same file triggers change again\n });\n // Click dropzone → open file picker\n onEvent(dz, 'click', (e: MouseEvent) => {\n if (e.target === inp) return;\n\n if (skipNextClick) {\n skipNextClick = false;\n\n return;\n }\n\n if (!isDisabled.value) inp.click();\n });\n // Keyboard: Enter / Space → open picker\n onEvent(dz, 'keydown', (e: KeyboardEvent) => {\n skipNextClick = pressControl.handleKeydown(e) && e.key === 'Enter';\n });\n\n // `createDropZone` has no way to update `disabled` after creation — recreate the zone\n // whenever the prop changes instead of capturing a stale snapshot from this one `onMounted`\n // run. `watch`'s own returned cleanup (not a second `onCleanup`) disposes the current zone\n // both on the next toggle and on final teardown.\n watch(\n isDisabled,\n (disabled) => {\n const dropZone = createDropZone({\n disabled,\n element: dz,\n onDrop: (droppedFiles) => queue.addFiles(droppedFiles),\n onHoverChange: (hovered) => {\n isDragging.value = hovered;\n },\n });\n\n return () => dropZone.dispose();\n },\n { immediate: true },\n );\n });\n\n return html`\n <div class=\"file-input-wrapper\" part=\"wrapper\">\n <label class=\"label-outside\" id=\"${labelId}\" part=\"label\" ?hidden=${() => !props.label.value}>\n ${props.label}\n </label>\n <div\n class=\"dropzone\"\n part=\"dropzone\"\n ref=${dropzoneRef}\n role=\"button\"\n tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n aria-disabled=\"${() => String(isDisabled.value)}\"\n aria-label=\"${() => (!props.label.value ? 'File upload drop zone' : null)}\"\n aria-labelledby=\"${() => (props.label.value ? labelId : null)}\"\n aria-describedby=\"${helperId}\">\n <input\n type=\"file\"\n ref=${inputRef}\n part=\"input\"\n id=\"${fileInputId}\"\n accept=\"${props.accept}\"\n ?multiple=\"${props.multiple}\"\n ?required=\"${props.required}\"\n ?disabled=\"${isDisabled}\"\n name=\"${props.name}\"\n hidden\n inert\n tabindex=\"-1\" />\n <div class=\"dropzone-content\">\n <span class=\"dropzone-icon\" aria-hidden=\"true\" data-status=\"${() => (isInvalid.value ? 'error' : null)}\">\n ${() =>\n isInvalid.value\n ? html`\n <ore-icon name=\"alert-circle\" size=\"36\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n `\n : html`\n <ore-icon name=\"upload\" size=\"36\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n `}\n </span>\n <!-- Signal 01: the copy itself shifts on drag-entry (not just border/glow) — a\n static \"Drop files here\" during an active drag reads as if the drop target\n hasn't noticed the file yet. -->\n ${when(\n () => isDragging.value,\n () => html`\n <span class=\"dropzone-title dropzone-title-active\">Release to upload</span>\n `,\n )}\n ${when(\n () => !isDragging.value,\n () => html`\n <span class=\"dropzone-title\">\n Drop files here or\n <u>click to browse</u>\n </span>\n `,\n )}\n <span class=\"dropzone-hint\" ?hidden=${() => !hintText.value}>${hintText}</span>\n </div>\n </div>\n <ul\n class=\"${() => (props.gallery.value ? 'file-grid' : 'file-list')}\"\n part=\"${() => (props.gallery.value ? 'gallery' : null)}\"\n role=\"list\"\n aria-label=\"Selected files\"\n ?hidden=${() => queue.files.value.length === 0}>\n ${() =>\n queue.files.value.map((file: File) =>\n props.gallery.value\n ? html`\n <li class=\"file-card\" data-status=${() => queue.fileState(file).status}>\n <span class=\"file-thumb-frame\">\n ${\n // Decorative: the file name is already announced via the visible\n // `.file-card-name` caption below — repeating it as `alt` text would\n // duplicate it (and often trips redundant-alt checks, since real\n // filenames commonly contain words like \"photo\" or \"image\").\n isImageFile(file)\n ? // Object URLs use the `blob:` scheme, which ore's attribute-level\n // XSS guard blocks unconditionally on `src` (and other\n // URL-accepting attributes) — set it as a DOM property via `ref`\n // instead, bypassing that string-based check. Safe here: the value\n // comes from `URL.createObjectURL(file)` on a real `File` object we\n // control, never from untrusted text.\n html`\n <img\n class=\"file-thumb\"\n alt=\"\"\n ref=\"${(el: HTMLImageElement | null) => {\n if (el) el.src = getPreviewUrl(file);\n }}\" />\n `\n : html`\n <span class=\"file-thumb file-thumb-generic\" aria-hidden=\"true\">\n <ore-icon name=\"file\" size=\"28\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n </span>\n `\n }\n ${when(\n () => queue.fileState(file).status === 'success',\n () => html`\n <span class=\"file-status-badge file-status-badge-success\" aria-hidden=\"true\">\n <ore-icon name=\"check\" size=\"11\" stroke-width=\"3\" aria-hidden=\"true\"></ore-icon>\n </span>\n `,\n )}\n ${when(\n () => queue.fileState(file).status === 'error',\n () => html`\n <span class=\"file-status-badge file-status-badge-error\" aria-hidden=\"true\">\n <ore-icon name=\"alert-circle\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n </span>\n `,\n )}\n <span class=\"file-card-actions\">\n ${when(\n () => queue.fileState(file).status === 'error',\n () => html`\n <button\n class=\"file-card-action\"\n type=\"button\"\n aria-label=\"${`Retry uploading ${file.name}`}\"\n @click=${() => queue.retryUpload(file)}>\n <ore-icon name=\"refresh-cw\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n </button>\n `,\n )}\n ${when(\n () =>\n queue.fileState(file).status === 'success' &&\n Boolean(props.multiple.value) &&\n Boolean(props.upload.value),\n () => html`\n <button\n class=\"file-card-action\"\n type=\"button\"\n aria-label=\"${`Replace ${file.name}`}\"\n @click=${() => beginReplace(file)}>\n <ore-icon name=\"upload\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n </button>\n `,\n )}\n <button\n class=\"file-card-action file-card-remove\"\n type=\"button\"\n aria-label=\"${`Remove ${file.name}`}\"\n @click=${(e: Event) => queue.removeFile(file, e)}>\n <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n </button>\n </span>\n </span>\n <span class=\"file-card-name\" title=\"${file.name}\">${file.name}</span>\n ${when(\n () => queue.fileState(file).status === 'uploading',\n () => html`\n <ore-progress\n type=\"linear\"\n size=\"sm\"\n value=${() => queue.uploadPercent(file)}\n label=${() => `${queue.uploadPercent(file)}%`}></ore-progress>\n <span class=\"file-progress-meta\">${() => queue.uploadMetaText(file)}</span>\n `,\n )}\n ${when(\n () => queue.fileState(file).status === 'error',\n () => html`\n <span class=\"file-error-text\">${() => queue.fileState(file).error}</span>\n `,\n )}\n </li>\n `\n : html`\n <li class=\"file-item\" data-status=${() => queue.fileState(file).status}>\n <span class=\"file-icon\" aria-hidden=\"true\">\n <ore-icon\n name=${() => queue.statusIconName(file)}\n size=\"18\"\n stroke-width=\"1.75\"\n aria-hidden=\"true\"></ore-icon>\n </span>\n <span class=\"file-meta\">\n <span class=\"file-name\" title=\"${file.name}\">${file.name}</span>\n ${when(\n () => queue.fileState(file).status === 'uploading',\n () => html`\n <ore-progress\n type=\"linear\"\n size=\"sm\"\n value=${() => queue.uploadPercent(file)}\n label=${() => `${queue.uploadPercent(file)}%`}></ore-progress>\n <span class=\"file-progress-meta\">${() => queue.uploadMetaText(file)}</span>\n `,\n )}\n ${when(\n () => queue.fileState(file).status === 'error',\n () => html`\n <span class=\"file-error-text\">${() => queue.fileState(file).error}</span>\n `,\n )}\n ${when(\n () => queue.fileState(file).status === 'idle' || queue.fileState(file).status === 'success',\n () => html`\n <span class=\"file-size\">${formatBytes(file.size)}</span>\n `,\n )}\n </span>\n <span class=\"file-actions\">\n ${when(\n () => queue.fileState(file).status === 'error',\n () => html`\n <button\n class=\"file-action\"\n type=\"button\"\n aria-label=\"${`Retry uploading ${file.name}`}\"\n @click=${() => queue.retryUpload(file)}>\n <ore-icon name=\"refresh-cw\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n `,\n )}\n ${when(\n () =>\n queue.fileState(file).status === 'success' &&\n Boolean(props.multiple.value) &&\n Boolean(props.upload.value),\n () => html`\n <button\n class=\"file-action\"\n type=\"button\"\n aria-label=\"${`Replace ${file.name}`}\"\n @click=${() => beginReplace(file)}>\n <ore-icon name=\"upload\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n `,\n )}\n <button\n class=\"file-remove\"\n type=\"button\"\n aria-label=\"${`Remove ${file.name}`}\"\n @click=${(e: Event) => queue.removeFile(file, e)}>\n <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n </button>\n </span>\n </li>\n `,\n )}\n </ul>\n <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => isInvalid.value || !props.helper.value}>\n ${props.helper}\n </div>\n <div\n class=\"helper-text helper-text-error\"\n id=\"${errorId}\"\n role=\"alert\"\n part=\"error\"\n ?hidden=${() => !isInvalid.value}>\n ${() => props.error.value ?? ''}\n </div>\n </div>\n `;\n },\n shadow: { delegatesFocus: true },\n styles: [\n colorThemeMixin,\n coarsePointerMixin,\n reducedMotionMixin,\n roundedVariantMixin,\n disabledLoadingMixin,\n sizeVariantMixin(FILE_INPUT_SIZE_PRESET),\n forcedColorsFocusMixin('.dropzone'),\n componentStyles,\n ],\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"file-input.cjs","names":[],"sources":["../src/inputs/file-input/file-input.ts"],"sourcesContent":["import { createDropZone } from '@vielzeug/dnd';\nimport {\n bind,\n createStableId,\n define,\n getHost,\n html,\n onCleanup,\n onElement,\n onEvent,\n onMounted,\n prop,\n ref,\n useEmit,\n useField,\n when,\n} from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { bindRefCallback, createInteraction } from '../../core';\nimport { FILE_INPUT_SIZE_PRESET } from '../../shared';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n disabledLoadingMixin,\n forcedColorsFocusMixin,\n reducedMotionMixin,\n roundedVariantMixin,\n sizeVariantMixin,\n} from '../../styles';\nimport componentStyles from './file-input.css?inline';\nimport { createFileQueue, type FileUploadFn, formatBytes } from './file-input-upload';\n\nexport type { FileUploadFn, FileUploadState, FileUploadStatus } from './file-input-upload';\n\nconst isImageFile = (file: File): boolean => file.type.startsWith('image/');\n\n/** File input component properties */\nexport type OreFileInputProps = {\n /** Accepted file types (comma-separated, e.g. '.jpg, .png, image/*') */\n accept?: string;\n /** Theme color tint */\n color?: string;\n /** Disabled state */\n disabled?: boolean;\n /** Error message text */\n error?: string;\n /**\n * Render selected files as a grid of image thumbnails/previews instead of the default\n * single-column list. Non-image files fall back to a generic file icon in the same grid.\n */\n gallery?: boolean;\n /** Helper text displayed below the input */\n helper?: string;\n /** Input label text */\n label?: string;\n /** Max number of files allowed (only used if multiple is true) */\n 'max-files'?: number;\n /** Max size of a single file in bytes */\n 'max-size'?: number;\n /** Allow multiple files selection */\n multiple?: boolean;\n /** Form field name */\n name?: string;\n /**\n * JS-only callback fired with the inner `<input type=\"file\">` element when it\n * mounts, and with `null` when it unmounts. Intended for composed components\n * that need imperative access to the raw element.\n * Set as a JS property: `bitFileInput.ref = (el) => { ... }`.\n */\n ref?: ((el: HTMLInputElement | null) => void) | null;\n /** Required field */\n required?: boolean;\n /** Field size preset */\n size?: string;\n /**\n * JS-only upload transport (see `FileUploadFn`). When set, every newly added file starts\n * uploading immediately and independently — progress/speed/ETA, retry-on-failure, and a\n * success confirmation card are all driven from here. Omit it to keep the component in its\n * original picker-only mode (select files, no upload lifecycle).\n * Set as a JS property: `fileInput.upload = async (file, { onProgress, signal }) => { ... }`.\n */\n upload?: FileUploadFn | null;\n};\n\n/** Events emitted by the file-input component */\nexport type OreFileInputEvents = {\n /** Emitted when files are added or removed */\n change: { files: File[]; originalEvent?: Event; value: File[] };\n /** Emitted when a specific file is removed */\n remove: { file: File; files: File[]; originalEvent?: Event; value: File[] };\n /** Emitted when `upload` rejects for a file (after a fresh attempt or a retry) */\n 'upload-error': { error: unknown; file: File };\n /** Emitted whenever `upload`'s `onProgress` reports new bytes for a file */\n 'upload-progress': { file: File; loaded: number; total: number };\n /** Emitted when `upload` resolves for a file */\n 'upload-success': { file: File };\n};\n\n/**\n * A file upload field with drag-and-drop support, built-in validation messaging, and — once a\n * `upload` transport is wired up — a full per-file upload lifecycle: live progress/speed/ETA,\n * retry-on-failure, a success confirmation card, and fully independent handling of concurrent\n * files (one failing never blocks or cancels the others). Picking files with no `upload` set\n * keeps the original, upload-free selection-only behavior.\n *\n * @element ore-file-input\n *\n * @attr {string} accept - Comma-separated file extensions or MIME types\n * @attr {boolean} multiple - Enable multiple files selection\n * @attr {boolean} gallery - Show selected files as an image thumbnail/preview grid\n * @attr {number} max-files - Max number of files allowed\n * @attr {number} max-size - Max size of each file in bytes\n * @attr {boolean} disabled - Disable interaction\n * @attr {string} error - Show an error state/message\n * @attr {string} helper - Provide helper context below the dropzone\n *\n * @fires change - detail: { files: File[], value: File[] }\n * @fires remove - detail: { file: File, files: File[] }\n * @fires upload-progress - detail: { file: File, loaded: number, total: number }\n * @fires upload-success - detail: { file: File }\n * @fires upload-error - detail: { file: File, error: unknown }\n *\n * @cssprop --file-input-bg - Dropzone background color\n * @cssprop --file-input-border-color - Dropzone border color\n * @cssprop --file-input-font-size - Font size\n * @cssprop --file-input-radius - Dropzone border radius\n * @cssprop --file-input-min-height - Minimum dropzone height\n * @cssprop --file-input-hover-bg - Dropzone background on hover (flat/ghost variants)\n * @cssprop --file-input-hover-border-color - Dropzone border on hover (flat/bordered variants)\n * @cssprop --file-input-focus-bg - Dropzone background when focused/drag-over (flat variant)\n * @cssprop --file-input-focus-border-color - Dropzone border when focused/drag-over (flat variant)\n * @cssprop --file-input-thumb-size - Gallery thumbnail width/height\n * @part wrapper - Root wrapper around the file input field\n * @part label - Visible label rendered above the dropzone\n * @part dropzone - Interactive drag-and-drop target\n * @part input - Native file input element\n * @part gallery - Gallery grid container (rendered instead of `file-list` when `gallery` is set)\n * @part helper - Helper text shown beneath the dropzone\n * @part error - Error message shown beneath the field\n * @example\n * ```html\n * <ore-file-input label=\"Upload files\" accept=\"image/*\" multiple />\n * <ore-file-input label=\"Photos\" accept=\"image/*\" multiple gallery />\n * <ore-file-input label=\"Resume\" accept=\".pdf,.doc,.docx\" max-size=\"5242880\" />\n * <ore-file-input variant=\"bordered\" color=\"primary\" />\n * ```\n * ```ts\n * // Wire up a real upload transport — progress/retry/success are then handled automatically.\n * // `XMLHttpRequest` is used here (not `fetch`) because it's the only browser API that reports\n * // upload progress; swap in whatever transport the app already uses.\n * const input = document.querySelector('ore-file-input');\n * input.upload = (file, { onProgress, signal, resumeFrom }) =>\n * new Promise((resolve, reject) => {\n * const xhr = new XMLHttpRequest();\n *\n * xhr.upload.addEventListener('progress', (e) => onProgress(resumeFrom + e.loaded, file.size));\n * xhr.addEventListener('load', () => (xhr.status < 400 ? resolve() : reject(new Error(xhr.statusText))));\n * xhr.addEventListener('error', () => reject(new Error('Network error')));\n * signal.addEventListener('abort', () => xhr.abort());\n *\n * xhr.open('PUT', '/uploads');\n * if (resumeFrom > 0) xhr.setRequestHeader('Content-Range', `bytes ${resumeFrom}-/${file.size}`);\n * xhr.send(file);\n * });\n * ```\n */\nexport const FILE_INPUT_TAG = 'ore-file-input' as const;\ndefine<OreFileInputProps>(FILE_INPUT_TAG, {\n formAssociated: true,\n props: {\n accept: prop.string(),\n color: prop.string(),\n disabled: prop.bool(false),\n error: prop.string(),\n gallery: prop.bool(false),\n helper: prop.string(),\n label: prop.string(),\n 'max-files': prop.number(0),\n 'max-size': prop.number(0),\n multiple: prop.bool(false),\n name: prop.string(),\n ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n required: prop.bool(false),\n size: prop.string(),\n upload: prop.data<FileUploadFn>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreFileInputEvents>();\n\n // ============================================\n // State\n // ============================================\n\n const isDragging = signal(false);\n // Set while a \"Replace\" action is waiting for the (shared) native file input's next\n // `change` — routes that selection into `queue.replaceFile()` instead of `queue.addFiles()`.\n const replaceTarget = signal<File | null>(null);\n\n const isDisabled = computed(() => Boolean(props.disabled.value));\n const maxFilesLimit = computed(() => props['max-files'].value ?? 0);\n const maxSizeLimit = computed(() => props['max-size'].value ?? 0);\n\n // File selection + the opt-in upload lifecycle (progress, retry, replace, per-file\n // isolation) live in `createFileQueue` — see file-input-upload.ts for why they're one unit.\n const queue = createFileQueue({\n accept: props.accept,\n disabled: isDisabled,\n document: el.ownerDocument,\n maxFiles: maxFilesLimit,\n maxSize: maxSizeLimit,\n multiple: computed(() => Boolean(props.multiple.value)),\n onChange: (changedFiles, originalEvent) =>\n emit('change', { files: changedFiles, originalEvent, value: changedFiles }),\n onRemove: (file, remainingFiles, originalEvent) =>\n emit('remove', { file, files: remainingFiles, originalEvent, value: remainingFiles }),\n onUploadError: (file, error) => emit('upload-error', { error, file }),\n onUploadProgress: (file, loaded, total) => emit('upload-progress', { file, loaded, total }),\n onUploadSuccess: (file) => emit('upload-success', { file }),\n upload: computed(() => props.upload.value ?? undefined),\n });\n\n onCleanup(() => queue.dispose());\n\n // ============================================\n // Form Integration\n // ============================================\n\n useField({\n disabled: isDisabled,\n toFormValue: (fi: File[]) => {\n if (fi.length === 0) return null;\n\n const name = props.name.value || 'file';\n const fd = new FormData();\n\n for (const file of fi) fd.append(name, file);\n\n return fd;\n },\n value: queue.files,\n });\n\n // Sync host attributes for CSS selectors\n const isInvalid = computed(() => Boolean(props.error.value));\n\n bind({\n attr: {\n 'drag-over': () => (isDragging.value ? true : undefined),\n invalid: () => (isInvalid.value ? true : undefined),\n size: props.size,\n },\n });\n\n // ============================================\n // IDs\n // ============================================\n const fileInputId = createStableId('file-input');\n const labelId = `label-${fileInputId}`;\n const helperId = `helper-${fileInputId}`;\n const errorId = `error-${fileInputId}`;\n\n // ============================================\n // Refs\n // ============================================\n const dropzoneRef = ref<HTMLDivElement>();\n const inputRef = ref<HTMLInputElement>();\n const hintText = computed(() => {\n const parts: string[] = [];\n\n if (props.accept.value) {\n parts.push(\n props.accept.value\n .split(',')\n .map((s: string) => s.trim())\n .join(', '),\n );\n }\n\n const maxSize = maxSizeLimit.value;\n\n if (maxSize > 0) parts.push(`max ${formatBytes(maxSize)}`);\n\n const maxFiles = maxFilesLimit.value;\n\n if (maxFiles > 0) parts.push(`up to ${maxFiles} file${maxFiles !== 1 ? 's' : ''}`);\n\n return parts.join(' · ');\n });\n\n // ============================================\n // Replace (\"swap this one file\" — see file-input-upload.ts's `replaceFile`)\n // ============================================\n function beginReplace(file: File): void {\n replaceTarget.value = file;\n inputRef.value?.click();\n }\n\n // ============================================\n // Gallery Preview URLs\n // ============================================\n // Object URLs are created lazily (only while `gallery` is enabled) and revoked as soon\n // as their file is no longer selected, plus unconditionally on disconnect — otherwise\n // each preview leaks its backing blob for the life of the page.\n const previewUrls = new Map<File, string>();\n\n function getPreviewUrl(file: File): string {\n let url = previewUrls.get(file);\n\n if (!url) {\n url = URL.createObjectURL(file);\n previewUrls.set(file, url);\n }\n\n return url;\n }\n\n function revokeStalePreviewUrls(activeFiles: File[]): void {\n const keep = new Set(activeFiles);\n\n for (const [file, url] of previewUrls) {\n if (!keep.has(file)) {\n URL.revokeObjectURL(url);\n previewUrls.delete(file);\n }\n }\n }\n\n watch(queue.files, revokeStalePreviewUrls);\n\n onCleanup(() => {\n for (const url of previewUrls.values()) URL.revokeObjectURL(url);\n\n previewUrls.clear();\n });\n\n // ============================================\n // Mount\n // ============================================\n // ============================================\n // Template\n // ============================================\n onElement(inputRef, (inp) => bindRefCallback(props.ref, inp));\n\n onMounted(() => {\n const inp = inputRef.value!;\n const dz = dropzoneRef.value!;\n let skipNextClick = false;\n const pressControl = createInteraction({\n disabled: isDisabled,\n onPress: () => {\n inp.click();\n },\n });\n\n // Native input → add files, or — if a \"Replace\" action opened the picker — swap the one\n // file it targeted instead of appending a new entry.\n onEvent(inp, 'change', (e: Event) => {\n const input = e.target as HTMLInputElement;\n const target = replaceTarget.value;\n\n replaceTarget.value = null;\n\n if (target && input.files?.[0]) queue.replaceFile(target, input.files[0], e);\n else if (input.files?.length) queue.addFiles(Array.from(input.files), e);\n\n input.value = ''; // reset so the same file triggers change again\n });\n // Click dropzone → open file picker\n onEvent(dz, 'click', (e: MouseEvent) => {\n if (e.target === inp) return;\n\n if (skipNextClick) {\n skipNextClick = false;\n\n return;\n }\n\n if (!isDisabled.value) inp.click();\n });\n // Keyboard: Enter / Space → open picker\n onEvent(dz, 'keydown', (e: KeyboardEvent) => {\n skipNextClick = pressControl.handleKeydown(e) && e.key === 'Enter';\n });\n\n // `createDropZone` has no way to update `disabled` after creation — recreate the zone\n // whenever the prop changes instead of capturing a stale snapshot from this one `onMounted`\n // run. `watch`'s own returned cleanup (not a second `onCleanup`) disposes the current zone\n // both on the next toggle and on final teardown.\n watch(\n isDisabled,\n (disabled) => {\n const dropZone = createDropZone({\n disabled,\n element: dz,\n onDrop: (droppedFiles) => queue.addFiles(droppedFiles),\n onHoverChange: (hovered) => {\n isDragging.value = hovered;\n },\n });\n\n return () => dropZone.dispose();\n },\n { immediate: true },\n );\n });\n\n return html`\n <div class=\"file-input-wrapper\" part=\"wrapper\">\n <label class=\"label-outside\" id=\"${labelId}\" part=\"label\" ?hidden=${() => !props.label.value}>\n ${props.label}\n </label>\n <div\n class=\"dropzone\"\n part=\"dropzone\"\n ref=${dropzoneRef}\n role=\"button\"\n tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n aria-disabled=\"${() => String(isDisabled.value)}\"\n aria-label=\"${() => (!props.label.value ? 'File upload drop zone' : null)}\"\n aria-labelledby=\"${() => (props.label.value ? labelId : null)}\"\n aria-describedby=\"${helperId}\">\n <input\n type=\"file\"\n ref=${inputRef}\n part=\"input\"\n id=\"${fileInputId}\"\n accept=\"${props.accept}\"\n ?multiple=\"${props.multiple}\"\n ?required=\"${props.required}\"\n ?disabled=\"${isDisabled}\"\n name=\"${props.name}\"\n hidden\n inert\n tabindex=\"-1\" />\n <div class=\"dropzone-content\">\n <span class=\"dropzone-icon\" aria-hidden=\"true\" data-status=\"${() => (isInvalid.value ? 'error' : null)}\">\n ${() =>\n isInvalid.value\n ? html`\n <ore-icon name=\"alert-circle\" size=\"36\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n `\n : html`\n <ore-icon name=\"upload\" size=\"36\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n `}\n </span>\n <!-- Signal 01: the copy itself shifts on drag-entry (not just border/glow) — a\n static \"Drop files here\" during an active drag reads as if the drop target\n hasn't noticed the file yet. -->\n ${when(\n () => isDragging.value,\n () => html`\n <span class=\"dropzone-title dropzone-title-active\">Release to upload</span>\n `,\n )}\n ${when(\n () => !isDragging.value,\n () => html`\n <span class=\"dropzone-title\">\n Drop files here or\n <u>click to browse</u>\n </span>\n `,\n )}\n <span class=\"dropzone-hint\" ?hidden=${() => !hintText.value}>${hintText}</span>\n </div>\n </div>\n <ul\n class=\"${() => (props.gallery.value ? 'file-grid' : 'file-list')}\"\n part=\"${() => (props.gallery.value ? 'gallery' : null)}\"\n role=\"list\"\n aria-label=\"Selected files\"\n ?hidden=${() => queue.files.value.length === 0}>\n ${() =>\n queue.files.value.map((file: File) =>\n props.gallery.value\n ? html`\n <li class=\"file-card\" data-status=${() => queue.fileState(file).status}>\n <span class=\"file-thumb-frame\">\n ${\n // Decorative: the file name is already announced via the visible\n // `.file-card-name` caption below — repeating it as `alt` text would\n // duplicate it (and often trips redundant-alt checks, since real\n // filenames commonly contain words like \"photo\" or \"image\").\n isImageFile(file)\n ? // Object URLs use the `blob:` scheme, which ore's attribute-level\n // XSS guard blocks unconditionally on `src` (and other\n // URL-accepting attributes) — set it as a DOM property via `ref`\n // instead, bypassing that string-based check. Safe here: the value\n // comes from `URL.createObjectURL(file)` on a real `File` object we\n // control, never from untrusted text.\n html`\n <img\n class=\"file-thumb\"\n alt=\"\"\n ref=\"${(el: HTMLImageElement | null) => {\n if (el) el.src = getPreviewUrl(file);\n }}\" />\n `\n : html`\n <span class=\"file-thumb file-thumb-generic\" aria-hidden=\"true\">\n <ore-icon name=\"file\" size=\"28\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n </span>\n `\n }\n ${when(\n () => queue.fileState(file).status === 'success',\n () => html`\n <span class=\"file-status-badge file-status-badge-success\" aria-hidden=\"true\">\n <ore-icon name=\"check\" size=\"11\" stroke-width=\"3\" aria-hidden=\"true\"></ore-icon>\n </span>\n `,\n )}\n ${when(\n () => queue.fileState(file).status === 'error',\n () => html`\n <span class=\"file-status-badge file-status-badge-error\" aria-hidden=\"true\">\n <ore-icon name=\"alert-circle\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n </span>\n `,\n )}\n <span class=\"file-card-actions\">\n ${when(\n () => queue.fileState(file).status === 'error',\n () => html`\n <button\n class=\"file-card-action\"\n type=\"button\"\n aria-label=\"${`Retry uploading ${file.name}`}\"\n @click=${() => queue.retryUpload(file)}>\n <ore-icon name=\"refresh-cw\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n </button>\n `,\n )}\n ${when(\n () =>\n queue.fileState(file).status === 'success' &&\n Boolean(props.multiple.value) &&\n Boolean(props.upload.value),\n () => html`\n <button\n class=\"file-card-action\"\n type=\"button\"\n aria-label=\"${`Replace ${file.name}`}\"\n @click=${() => beginReplace(file)}>\n <ore-icon name=\"upload\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n </button>\n `,\n )}\n <button\n class=\"file-card-action file-card-remove\"\n type=\"button\"\n aria-label=\"${`Remove ${file.name}`}\"\n @click=${(e: Event) => queue.removeFile(file, e)}>\n <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n </button>\n </span>\n </span>\n <span class=\"file-card-name\" title=\"${file.name}\">${file.name}</span>\n ${when(\n () => queue.fileState(file).status === 'uploading',\n () => html`\n <ore-progress\n type=\"linear\"\n size=\"sm\"\n value=${() => queue.uploadPercent(file)}\n label=${() => `${queue.uploadPercent(file)}%`}></ore-progress>\n <span class=\"file-progress-meta\">${() => queue.uploadMetaText(file)}</span>\n `,\n )}\n ${when(\n () => queue.fileState(file).status === 'error',\n () => html`\n <span class=\"file-error-text\">${() => queue.fileState(file).error}</span>\n `,\n )}\n </li>\n `\n : html`\n <li class=\"file-item\" data-status=${() => queue.fileState(file).status}>\n <span class=\"file-icon\" aria-hidden=\"true\">\n <ore-icon\n name=${() => queue.statusIconName(file)}\n size=\"18\"\n stroke-width=\"1.75\"\n aria-hidden=\"true\"></ore-icon>\n </span>\n <span class=\"file-meta\">\n <span class=\"file-name\" title=\"${file.name}\">${file.name}</span>\n ${when(\n () => queue.fileState(file).status === 'uploading',\n () => html`\n <ore-progress\n type=\"linear\"\n size=\"sm\"\n value=${() => queue.uploadPercent(file)}\n label=${() => `${queue.uploadPercent(file)}%`}></ore-progress>\n <span class=\"file-progress-meta\">${() => queue.uploadMetaText(file)}</span>\n `,\n )}\n ${when(\n () => queue.fileState(file).status === 'error',\n () => html`\n <span class=\"file-error-text\">${() => queue.fileState(file).error}</span>\n `,\n )}\n ${when(\n () => queue.fileState(file).status === 'idle' || queue.fileState(file).status === 'success',\n () => html`\n <span class=\"file-size\">${formatBytes(file.size)}</span>\n `,\n )}\n </span>\n <span class=\"file-actions\">\n ${when(\n () => queue.fileState(file).status === 'error',\n () => html`\n <button\n class=\"file-action\"\n type=\"button\"\n aria-label=\"${`Retry uploading ${file.name}`}\"\n @click=${() => queue.retryUpload(file)}>\n <ore-icon name=\"refresh-cw\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n `,\n )}\n ${when(\n () =>\n queue.fileState(file).status === 'success' &&\n Boolean(props.multiple.value) &&\n Boolean(props.upload.value),\n () => html`\n <button\n class=\"file-action\"\n type=\"button\"\n aria-label=\"${`Replace ${file.name}`}\"\n @click=${() => beginReplace(file)}>\n <ore-icon name=\"upload\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n `,\n )}\n <button\n class=\"file-remove\"\n type=\"button\"\n aria-label=\"${`Remove ${file.name}`}\"\n @click=${(e: Event) => queue.removeFile(file, e)}>\n <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n </button>\n </span>\n </li>\n `,\n )}\n </ul>\n <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => isInvalid.value || !props.helper.value}>\n ${props.helper}\n </div>\n <div\n class=\"helper-text helper-text-error\"\n id=\"${errorId}\"\n role=\"alert\"\n part=\"error\"\n ?hidden=${() => !isInvalid.value}>\n ${() => props.error.value ?? ''}\n </div>\n </div>\n `;\n },\n shadow: { delegatesFocus: true },\n styles: [\n colorThemeMixin,\n coarsePointerMixin,\n reducedMotionMixin,\n roundedVariantMixin,\n disabledLoadingMixin,\n sizeVariantMixin(FILE_INPUT_SIZE_PRESET),\n forcedColorsFocusMixin('.dropzone'),\n componentStyles,\n ],\n});\n"],"mappings":"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"}