---

## DonutChart
**Stability:** beta — the API shape is settled and documented; behaviour-level fixes may still land as breaking changes in a minor.
Donut (or pie) chart for part-to-whole composition. Zero-
dependency SVG arcs on the design-token palette, dark-mode aware, with an
optional center total, legend, and a screen-reader data-table fallback. Set
`innerRadiusRatio={0}` for a full pie. Pairs with CompositionBar for the
linear equivalent.

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

### Examples
```svelte
<DonutChart
  data={[
    { label: 'Direct', value: 45 },
    { label: 'Referral', value: 30 },
    { label: 'Organic', value: 25 }
  ]}
  showTotal
/>
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| data | `DonutDatum[]` | yes |  | Slices; angle is each value's share of the total. |
| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| ariaLabel | `string` | no |  | Accessible label for the chart image, which also captions the data table. A plain `aria-label` does the same, and this prop wins over it; with neither, a summary in the active locale is generated. `aria-labelledby` outranks both for the image's name, and this prop then only captions the table. |
| class | `string` | no |  | Extra classes merged onto the 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. |
| formatValue | `(value: number) => string` | no |  | Format values for the center total, tooltips, and the data table. |
| innerRadiusRatio | `number` | no | 0.6 | Inner-hole radius as a fraction of the outer radius (0 = pie). |
| locale | `string` | no |  | BCP-47 locale for the default number formatter. |
| padAngle | `number` | no | 0 | Gap between slices in degrees. |
| preset | `string` | no |  | Apply a named preset registered on `<BlocksProvider>`. |
| showLegend | `boolean` | no | true | Show the legend. |
| showTotal | `boolean` | no | false | Show the summed total in the center hole. |
| size | `number` | no | 220 | Square SVG size in px. |
| slotClasses | `DonutChartSlotClasses` | 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. |
| totalLabel | `string` | no |  | Caption under the center total (e.g. "Total"). |
| unstyled | `boolean` | no |  | Remove all default tv classes. |

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

### Types
```ts
interface DonutDatum {
/** Slice label (legend + data table). */
  label: string;
  /**
   * Numeric value; the slice angle is its share of the total. A value at or
   * below zero draws no slice, adds nothing to the total and reads as 0 in the
   * data table.
   */
  value: number;
  /** Explicit color; defaults to the cycled categorical palette. */
  color?: string;
}
```

```ts
type DonutChartSlotClasses = Partial<Record<DonutChartSlot, string>>
```

```ts
type DonutChartSlot = (typeof DONUT_CHART_SLOTS)[number]
```