## `hb-uploader` — uploader

**Category:** utilities  
**Tags:** utilities, files

### What it does

Upload progress UI driven by `fetch_data` (`url`, `data`, optional `method`, `headers`): wraps `hb-dialog`, shows an indeterminate **Bulma** `progress` bar while starting, then fills `progress` from streamed upload bytes. Optional `upload_id` identifies the nested dialog; `title` slot labels the dialog. Forwards dialog `modalShow` and emits `uploadComplete` / `uploadError` when the request finishes or fails.

### Custom element

`hb-uploader`

### Attributes (snake_case; use string values in HTML)

- `id` (optional), `style` (optional): strings.
- `upload_id` (optional): string — dialog id (defaults from `id` + `_dialog` in component).
- `fetch_data` (optional): JSON string — `{ url: string; data: any; method?; headers? }`.

### Events

- `uploadError`: `{ completed: boolean; id: string; error: Error }`.
- `uploadComplete`: `{ completed: boolean; id: string }`.
- `modalShow`: forwarded from `hb-dialog` — `{ id: string; show: boolean }` (see dialog typings).

### Usage notes

- **Slot:** `title` — dialog title (default “Uploading”).
- Storybook arg names may say “download”; runtime events are **`uploadError`** / **`uploadComplete`**.
- **CSS vars** in docs reference Bulma semantic colors (`--bulma-*`) for progress and labels.

### Minimal HTML example

```html
<hb-uploader
  fetch_data='{"url":"https://api.example.com/upload","data":{},"method":"POST"}'
  upload_id="my-upload-dialog"
></hb-uploader>
```