<!-- AUTO-GENERATED by packages/components/bin/generate-skill-component-catalog.js. 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`                      | `'Failed to load illustration'`        | Accessibility: title for the image representing "failed-to-load" state    |                |
| `emptyMarkerTitle` |         | `string`                      | `'Failed to load illustration marker'` | Accessibility: title for the marker representing "failed-to-load" state   |                |
| `errorMessage`     |         | `string`                      | `'Failed to load illustration'`        | Error message text to display when illustration fails to load             |                |
| `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`                      | `'342px'`                              | Defines initial width of an illustration.                                 |                |

### Events

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

### Attributes

| Name                 | Field            | Inherited From |
| -------------------- | ---------------- | -------------- |
| `empty-image-title`  | emptyImageTitle  |                |
| `empty-marker-title` | emptyMarkerTitle |                |
| `error-message`      | errorMessage     |                |
| `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 |        |         |