---

## DonutChart
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; a summary is generated when omitted. |
| class | `string` | no |  | Extra classes merged onto the wrapper. |
| 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 | ShowLegend property for the DonutChart component |
| showTotal | `boolean` | no | false | Show the summed total in the center hole. |
| size | `number` | no | 220 | Square SVG size in px. |
| slotClasses | `ChartSlotClasses` | no |  | Per-slot class overrides. |
| 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)