# XWUILegend The key of a chart, a map layer set or a status scheme: a list of marks (dot, square, line, dash, bar, ring or an icon) with their words, an optional figure and a second line. Turn `interactive` on and each entry becomes a toggle button that switches its series on and off. Colour comes from the XWUI hue tokens (`--xwui-hue-*`) or the role tones, never a literal, and a `pattern` (hatch, dots, cross) gives a filled mark a second cue so colour is never the only one. Replaces the `legend()` and `legendRow()` helpers every page kit re-implements and the roughly fifty `*__legend` classes; `XWUIGISLegend` stays map specific. ## Basic Usage ```example file: examples/BasicUsage.ts html: examples/BasicUsage.html title: Basic Usage description: A chart key: three series, each with its own mark shape and hue, one with a pattern twin. ``` ## Status Key ```example file: examples/StatusKey.ts html: examples/StatusKey.html title: Status Key description: A vertical key of status tones with a figure at the end of each row. ``` ## Toggle Series ```example file: examples/ToggleSeries.ts html: examples/ToggleSeries.html title: Toggle Series description: Chips that switch a chart series on and off. ``` ## Data `items[]`, in order. Entries without an `id` or a `label`, and repeated ids, are dropped. | Field | Default | What it does | | --- | --- | --- | | `id`, `label` | required | Stable id (reported by `toggle`), visible words and accessible name. | | `hue` | primary accent | A palette hue NAME (`teal`, `indigo`, `rose`: any `--xwui-hue-`, so a product may declare its own) or a role tone: `primary`, `success`, `warning`, `error`, `info`, `neutral`. A value that is not a plain identifier is ignored. | | `swatch` | config `swatch` | `dot`, `square`, `line`, `dash`, `bar`, `ring` or `icon`. | | `icon` | none | Icon name for `swatch: 'icon'`; without it the mark falls back to the config shape. | | `value` | none | A figure at the end of the row. A number is formatted (Western digits unless `numberingSystem` says otherwise); a string is shown as given (`'42%'`). | | `description` | none | A second, quieter line under the label. | | `pattern` | none | `hatch`, `dots` or `cross` over a filled mark (`dot`, `square`, `bar`). Strokes, rings and icons already differ by shape and take none. | | `off` | `false` | The series is off: hollow mark, struck-through label, and a text twin (plain legends) or `aria-pressed="false"` (interactive). | | `disabled` | `false` | Interactive only: shown, cannot be toggled. | ## Options | Option | Default | What it does | | --- | --- | --- | | `orientation` | `'horizontal'` | `'horizontal'` wraps onto further lines; `'vertical'` stacks, rows span the width so the figures line up at the end. | | `align` | `'start'` | Where entries sit on the main axis. Horizontal: `start`, `center`, `end`, `between` (spread). Vertical: `center` and `end` shrink the rows and place the column; `start` and `between` keep them full width. | | `size` | `'md'` | `'sm'`, `'md'`, `'lg'`: type size; the marks are em based and follow it. | | `variant` | `'plain'` | `'chips'` draws each entry as a pill. | | `interactive` | `false` | Entries become native `