# swc-upload-attachment

Shared upload attachment primitive with card and media types. Do not mix `type="card"` and `type="media"` in the same attachment strip.

## Attributes

| Name               | Type                | Default  | Description                                                                                                                       |
| ------------------ | ------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `type`             | `'card' \| 'media'` | `'card'` | Visual treatment type for this attachment.                                                                                        |
| `dismissible`      | `boolean`           | `false`  | When `true`, show a dismiss affordance and emit `swc-upload-attachment-dismiss` on click.                                         |
| `dismiss-label`    | `string`            | `''`     | Accessible label for the dismiss/remove attachment button. When unset, derives "Remove [file name].                               |
| `accessible-label` | `string`            | `''`     | Accessible name for the tile itself. When unset, derives from the `title` slot's text content (typically the file name and type). |

## Slots

| Name        | Description                                                                          |
| ----------- | ------------------------------------------------------------------------------------ |
| `thumbnail` | Shared visual slot for icon/thumbnail/preview image.                                 |
| `badge`     | Optional file-type badge rendered over `type="media"` previews (for example, "PDF"). |
| `title`     | Primary text label.                                                                  |
| `subtitle`  | Secondary text label.                                                                |
| `actions`   | Optional trailing actions.                                                           |

## Events

| Name                            | Description                                                                   |
| ------------------------------- | ----------------------------------------------------------------------------- |
| `swc-upload-attachment-dismiss` | Dispatched when the dismiss button is pressed. Detail: `{ attachment: this }` |

## CSS Custom Properties

| Name                                                 | Description                                                                                                               |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `--swc-upload-attachment-focus-indicator-color`      | Focus ring color for the tile and its dismiss button. Defaults to a dedicated ring color pending a matching design token. |
| `--swc-upload-attachment-card-min-block-size`        | Minimum block size of the surface for `type="card"`. Defaults to 72px.                                                    |
| `--swc-upload-attachment-card-thumbnail-inline-size` | Thumbnail inline size for `type="card"`. Defaults to 48px.                                                                |
| `--swc-upload-attachment-card-thumbnail-block-size`  | Thumbnail block size for `type="card"`. Defaults to 48px.                                                                 |
| `--swc-upload-attachment-preview-size`               | Inline and block size of the tile for `type="media"`. Defaults to 72px.                                                   |
| `--swc-upload-attachment-dismiss-visual-size`        | Rendered size of the dismiss button's circular hit area. Defaults to 20px.                                                |
| `--swc-upload-attachment-dismiss-icon-inline-size`   | Inline size of the dismiss icon. Defaults to 8px.                                                                         |
| `--swc-upload-attachment-dismiss-icon-block-size`    | Block size of the dismiss icon. Defaults to 8px.                                                                          |