---

## ChartFrame
Responsive SVG chart shell: measures its width via
ResizeObserver, applies plot margins, and hands the drawable plot geometry
to a child snippet. The building block under every cartesian chart in the
family — use it directly only for fully custom marks.

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

### Examples
```svelte
<ChartFrame height={200} ariaLabel="Weekly revenue">
  {#snippet children({ innerWidth, innerHeight })}
    <!-- map your data onto innerWidth / innerHeight, then draw SVG marks -->
    <polyline points={pts} fill="none" class="stroke-primary" stroke-width="2" />
  {/snippet}
</ChartFrame>
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| ariaLabel | `string` | no |  | Accessible label for the chart image (role="img"). |
| children | `Snippet<[ChartPlot]>` | no |  | Renders the SVG plot content; receives the  geometry. |
| class | `string` | no |  | Extra classes merged onto the <figure> wrapper. |
| fallback | `Snippet` | no |  | Screen-reader fallback (e.g. a data table) rendered visually hidden. |
| height | `number` | no | 240 | Fixed SVG height in px. |
| legend | `Snippet` | no |  | Optional legend rendered (as HTML) below the SVG. |
| margin | `ChartMargin` | no |  | Plot margins; merged over the frame defaults. |
| slotClasses | `ChartSlotClasses` | no |  | Per-slot class overrides. |
| unstyled | `boolean` | no |  | Remove all default tv classes. |
| width | `number` | no |  | Fixed width in px. Omit for responsive width measured from the container (the common case); set it only for SSR-stable, non-responsive output. |

Inherited from:
- Omit<HTMLAttributes<HTMLElement>, 'children'> (omit-pattern)