<!-- AUTO-GENERATED from the @riverty/web-components custom elements manifest. Do not edit by hand. -->

# r-illustration

An illustration component that renders SVG illustrations based on a provided name or slotted content.

Example:
```
<r-illustration name="empty-state" width="200px"></r-illustration>
<r-illustration name="success" theme="dark" width="300px"></r-illustration>
```

## class: `RIllustration`, `r-illustration`

### Fields

| Name               | Privacy | Type                          | Default                         | Description                                                                                                                                                                                                                                                                                          | Inherited From |
| ------------------ | ------- | ----------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `emptyImageTitle`  |         | `string`                      |                                 | Accessibility: title for the image representing the "failed-to-load" state.                                                                                                                                                                                                                          |                |
| `emptyMarkerTitle` |         | `string`                      |                                 | Accessibility: title for the marker representing the "failed-to-load" state.                                                                                                                                                                                                                         |                |
| `errorAlt`         |         | `string`                      |                                 | Accessible label (aria-label) for the error state. Pass an empty string to mark it decorative.<br>When unset, the icon falls back to `emptyImageTitle`; without that it stays decorative while<br>\`errorMessage` is rendered, and uses `'Unable to load image'` when there is no visible message. |                |
| `errorMessage`     |         | `string`                      | `'Failed to load illustration'` | Error message text to display when illustration fails to load                                                                                                                                                                                                                                        |                |
| `loadingAlt`       |         | `string`                      | `'Image is loading'`            | Accessible label (aria-label) for the loading state. Pass an empty string to mark it decorative.                                                                                                                                                                                                     |                |
| `maxWidth`         |         | `string`                      |                                 | Maximum width constraint for responsive behavior                                                                                                                                                                                                                                                     |                |
| `minWidth`         |         | `string`                      |                                 | Minimum width constraint for responsive behavior                                                                                                                                                                                                                                                     |                |
| `name`             |         | `string`                      |                                 | Name of illustration to select from the set                                                                                                                                                                                                                                                          |                |
| `svgDescription`   |         | `string`                      |                                 | Optional description element to be added inside the SVG for accessibility                                                                                                                                                                                                                            |                |
| `svgTitle`         |         | `string`                      |                                 | Optional title element to be added inside the SVG for accessibility                                                                                                                                                                                                                                  |                |
| `theme`            |         | `"auto" \| "dark" \| "light"` | `'auto'`                        | Theme mode for illustration rendering                                                                                                                                                                                                                                                                |                |
| `width`            |         | `string`                      | `'100%'`                        | Defines initial width of an illustration. Defaults to 100% (fills the container); the illustration content itself stays a fixed 342x176 and is centered within this width.                                                                                                                           |                |

### Methods

| Name         | Privacy | Description                                                                                                                                    | Parameters | Return          | Inherited From |
| ------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | --------------- | -------------- |
| `setLoading` |         | Sets the component into its loading state (skeleton).<br>The state is left when `name` is set or changed, which re-resolves the illustration. |            | `Promise<void>` |                |

### Events

| Name        | Type                | Description                                           | Inherited From |
| ----------- | ------------------- | ----------------------------------------------------- | -------------- |
| `rComplete` | `CustomEvent<void>` | Emitted when illustration completes loading           |                |
| `rFailed`   | `CustomEvent<void>` | Emitted when illustration fails to load               |                |
| `rLoading`  | `CustomEvent<void>` | Emitted when illustration starts loading from the CDN |                |

### Attributes

| Name                 | Field            | Inherited From |
| -------------------- | ---------------- | -------------- |
| `empty-image-title`  | emptyImageTitle  |                |
| `empty-marker-title` | emptyMarkerTitle |                |
| `error-alt`          | errorAlt         |                |
| `error-message`      | errorMessage     |                |
| `loading-alt`        | loadingAlt       |                |
| `max-width`          | maxWidth         |                |
| `min-width`          | minWidth         |                |
| `name`               | name             |                |
| `svg-description`    | svgDescription   |                |
| `svg-title`          | svgTitle         |                |
| `theme`              | theme            |                |
| `width`              | width            |                |

### Slots

| Name    | Description                                                        |
| ------- | ------------------------------------------------------------------ |
|         | Fallback content rendered when the illustration cannot be resolved |
| `error` | Content shown when the illustration fails to load                  |

<hr/>

## Exports

| Kind                        | Name             | Declaration   | Module | Package |
| --------------------------- | ---------------- | ------------- | ------ | ------- |
| `js`                        | `RIllustration`  | RIllustration |        |         |
| `custom-element-definition` | `r-illustration` | RIllustration |        |         |