---

## ChartFrame
**Stability:** beta — the API shape is settled and documented; behaviour-level fixes may still land as breaking changes in a minor.
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"). A plain `aria-label` names it too, and this prop wins over it. `aria-labelledby` points the image at a visible caption and outranks both. |
| children | `Snippet<[ChartPlot]>` | no |  | Renders the SVG plot content; receives the `ChartPlot` geometry. |
| class | `string` | no |  | Extra classes merged onto the <figure> wrapper. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| 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. |
| preset | `string` | no |  | Apply a named preset registered on `<BlocksProvider>`. |
| slotClasses | `ChartFrameSlotClasses` | no |  | Per-slot class overrides. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| unstyled | `boolean` | no |  | Remove all default tv classes. |
| width | `number` | no |  | Width in px to draw the plot at instead of measuring the container (the common case). The server output is then final; the svg still spans its column, centring the drawing in a wider one and scaling it down in a narrower one. |

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

### Types
```ts
type ChartFrameSlotClasses = Partial<Record<ChartFrameSlot, string>>
```

```ts
interface ChartMargin {
top?: number;
  right?: number;
  bottom?: number;
  left?: number;
}
```

```ts
interface ChartPlot {
/** Full SVG width (px). */
  width: number;
  /** Full SVG height (px). */
  height: number;
  /** Drawable width inside the margins (px). */
  innerWidth: number;
  /** Drawable height inside the margins (px). */
  innerHeight: number;
  /** Resolved margins (all sides present). */
  margin: Required<ChartMargin>;
}
```

```ts
type ChartFrameSlot = (typeof CHART_FRAME_SLOTS)[number]
```