Basic

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Basic" pattern (@codeatlasdev/ui demo #020, inputs/file-upload) in my app.

Call get_demo({ ids: ["#020"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Attachment and document upload areas that accept several files and cap their size.

Keep these library parts, with the props and tokens the demo uses:
- FileUpload from "@codeatlasdev/ui"

Behaviour to keep:
- `bind:files` with `let files = $state<File[]>([])`
- `multiple`
- `hint="PNG, JPG, PDF up to 10 MB"`
- `maxSize={10 * 1024 * 1024}`
- `{#if files.length > 0}` shows the selected file count with a plural `s`
- Wrapper `.wrap` has `max-width: 480px`

Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Library parts

• FileUpload @codeatlasdev/ui

How it is built

• `bind:files` with `let files = $state<File[]>([])`
• `multiple`
• `hint="PNG, JPG, PDF up to 10 MB"`
• `maxSize={10 * 1024 * 1024}`
• `{#if files.length > 0}` shows the selected file count with a plural `s`
• Wrapper `.wrap` has `max-width: 480px`

Related

• #021 Images only and disabled component/input
• #388 External trigger, no list component/input
• #054 Basic component/input
• #001 Full width component/input
• #002 With icons component/input
• #003 Loading component/input