---

## FileUpload
Drag-and-drop file upload with validation, image previews, progress tracking, and animated file list.
The root is a `region` landmark, named by an `aria-label` you pass or else the localized
"File upload" — give each one its own name when a page has two.

The focusable control is the visually hidden `<input type="file">`, not the dropzone. `id`,
`aria-labelledby`, `aria-describedby`, `aria-invalid` and `aria-required` land on it, so a
`<label for>` (as FormField renders) names it and a click on the label opens the file dialog;
every other attribute, `class` and `aria-label` included, stays on the root. Label it, through
FormField or `aria-labelledby`: without a label the browser names the input by its own button
text — in Chromium "Choose Files", or "Choose File" once `maxFiles` is 1 and `multiple` is off —
and the dropzone text is its description. The `title` it carries, the region's name, only
satisfies axe's WCAG `label` rule; axe's best-practice `label-title-only` still reports an
unlabelled one. While `maxFiles` is reached the dropzone is gone and the input leaves the tab
order, but stays the label's target.

**Import:** `import { FileUpload } from '@urbicon-ui/blocks';`

### Examples
```svelte
<FileUpload
  bind:files
  multiple
  maxFiles={5}
  maxFileSize={10 * 1024 * 1024}
  title="Drop files here or click to browse"
  description="PDF, DOCX, XLSX — max 10 MB per file"
/>
```

```svelte
<FileUpload
  bind:files
  accept={IMAGE_MIME_TYPES}
  multiple
  maxFiles={8}
  title="Upload images"
  description="PNG, JPG, WebP — max 5 MB"
  onFileReject={(rejections) => console.log('Rejected:', rejections)}
/>
```

### Variants
- intent: neutral, primary (default: neutral)
- size: lg, md, sm (default: md)
- disabled: false, true (default: false)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...FileUploadVariants | `VariantProps` | no |  | Styling variants from FileUploadVariants |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| accept | `string | string[]` | no |  | Accepted MIME types or file extensions (e.g. 'image/*', '.pdf'). |
| allowDrop | `boolean` | no | true | Enable drag-and-drop. |
| allowPaste | `boolean` | no | false | Enable paste from clipboard. |
| children | `Snippet` | no |  | Default slot for fully custom dropzone content. Its text becomes the file input's description, since the dropzone itself takes no focus. |
| class | `string` | no |  | Additional CSS class for the root element. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| description | `string` | no |  | Dropzone description text (accepted types, limits). |
| disabled | `boolean` | no |  | Disable all interaction. |
| dropzoneIcon | `Snippet` | no |  | Custom dropzone icon snippet. |
| file | `File | null` | no |  | Convenience binding for single-file uses. Two-way: - Reads as `files[0]?.file ?? null`. - Setting to a `File` replaces the current selection (object URLs are   revoked, no validation re-runs — assumes the caller already validated). - Setting to `null` clears the list.  Recommended when `maxFiles === 1` (e.g. logo / avatar uploads). Use `bind:files` instead when you need progress, errors, or status metadata. |
| fileItem | `Snippet<[FileItemContext]>` | no |  | Custom file item renderer. Receives file entry and remove callback. |
| files | `FileUploadFile[]` | no |  | Current file list. Supports two-way binding. |
| maxFiles | `number` | no |  | Maximum number of files. |
| maxFileSize | `number` | no |  | Maximum file size in bytes. |
| minFileSize | `number` | no |  | Minimum file size in bytes. |
| mint | `MintProp` | no | 'none' | Micro-interaction preset applied to the dropzone. Only applies while not disabled. |
| multiple | `boolean` | no |  | Allow selecting multiple files. |
| name | `string` | no |  | Shared `name` for native form submission. When set, the underlying `<input type="file">` carries the current file list — including files added via drag/drop, paste, or programmatic `bind:files`, not just files picked through the file dialog. Submits as a `File[]` under `{name}` in the FormData payload. |
| onFileAccept | `(files: FileUploadFile[]) => void` | no |  | Fires when valid files are accepted. |
| onFileReject | `(rejections: FileRejection[]) => void` | no |  | Fires when files are rejected by validation. |
| onFileRemove | `(file: FileUploadFile) => void` | no |  | Fires when a file is removed. |
| onFilesChange | `(files: FileUploadFile[]) => void` | no |  | Fires when the file list changes (add or remove). |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ FileUpload: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| preventDocumentDrop | `boolean` | no | true | Prevent browser navigation when files are dropped outside the zone. |
| required | `boolean` | no |  | Mark as required for form validation. |
| slotClasses | `Partial<Record<FileUploadSlots, string>>` | no |  | Per-slot class overrides. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| title | `string` | no |  | Dropzone title text. |
| unstyled | `boolean` | no |  | Remove the default variant classes. The control's own classes stay: `sr-only peer` on the file input hides it and relays its focus ring to the dropzone, and `relative` on the root keeps the input's focus scroll inside the scroller the upload sits in. |
| validate | `(file: File) => FileUploadError[] | null` | no |  | Custom validation function. Return errors array or null. |
| intent | `'neutral' | 'primary'` | no | neutral | Controls the color theme and semantic meaning of the FileUpload. Affects the overall appearance and user perception. Available options: neutral, primary. |
| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the FileUpload. Affects the component's physical footprint. Available options: lg, md, sm. |

Inherited from:
- Omit<FileUploadVariants, 'dragging' | 'invalid'> (omit-pattern)
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)

### Types
```ts
interface FileItemContext {
/** The file entry. */
  fileEntry: FileUploadFile;
  /** Remove this file from the list. */
  remove: () => void;
}
```

```ts
type FileUploadSlotName = FileUploadSlots
```

```ts
type MintProp = | MintName
  | { name: MintName; config?: MintConfig & Record<string, unknown> }
  | Array<MintName>
  | Array<MintName | { name: MintName; config?: MintConfig & Record<string, unknown> }>
```

```ts
interface FileIntakeRejection {
/** The rejected file. */
  file: File;
  /** Why it was rejected. */
  errors: FileIntakeError[];
}
```

```ts
interface FileIntakeError {
/** Machine-readable error code. */
  code: FileIntakeErrorCode;
  /** Human-readable error message. */
  message: string;
}
```

```ts
type FileIntakeErrorCode = | 'FILE_INVALID_TYPE'
  | 'FILE_TOO_LARGE'
  | 'FILE_TOO_SMALL'
  | 'TOO_MANY_FILES'
  | 'FILE_EXISTS'
  | 'CUSTOM'
```

```ts
interface FileIntakeEntry {
/** Unique identifier for this file entry. */
  id: string;
  /** The native File object. */
  file: File;
  /** Object URL for image previews (auto-generated, auto-revoked). */
  preview?: string;
  /** Upload progress 0–100. Undefined when not tracking. */
  progress?: number;
  /** Current lifecycle status. */
  status: FileIntakeStatus;
  /** Validation or upload errors. */
  errors: FileIntakeError[];
}
```

```ts
type FileIntakeStatus = 'pending' | 'uploading' | 'complete' | 'error'
```

```ts
type MintName = BuiltinMintName | 'none' | (string & {})
```

```ts
interface MintConfig {
/**
   * `hover` and `focus` hold the effect while the pointer/visible focus stays
   * on the element; `click` and `load` run it once.
   */
  trigger?: 'hover' | 'click' | 'focus' | 'load';
  /**
   * Effect duration in ms. Written as an inline per-effect custom property
   * (`--blocks-mint-<effect>-duration`), so the CSS transition/animation
   * actually runs at this speed; unset, the theme duration tokens apply.
   */
  duration?: number;
  /** Delay in ms before the effect applies. */
  delay?: number;
  /**
   * CSS easing for the effect (`--blocks-mint-<effect>-easing` inline);
   * unset, the per-effect theme default applies.
   */
  easing?: string;
  disabled?: boolean;
}
```

```ts
type SlotNames = keyof ReturnType<T> & string
```

```ts
type VariantProps = Omit<
  Exclude<Parameters<T>[0], undefined>,
  'class'
>
```

```ts
type BuiltinMintName = (typeof BUILTIN_MINT_NAMES)[number]
```

### Slots (slotClasses keys)
`root`, `dropzone`, `dropzoneIcon`, `dropzoneTitle`, `dropzoneDescription`, `fileList`, `fileItem`, `fileItemPreview`, `fileItemInfo`, `fileItemName`, `fileItemSize`, `fileItemProgress`, `fileItemRemoveButton`, `fileItemError`, `fileItemStatusIcon`