# XWUIStatGroup

A set of KPI figures (value over label) that lays itself out for the width it actually gets: one row when every figure fits, a balanced grid when they do not, label and value rows when a grid would strand a lone figure on a second line.

```ts
new XWUIStatGroup(host, {
    items: [
        { key: 'areas', label: 'Business areas', value: 12 },
        { key: 'pages', label: 'Pages', value: 1_284_500, delta: 4.2, deltaLabel: 'vs last month' },
        { key: 'sla', label: 'Within SLA', value: 0.987, valueType: 'percent' },
    ],
}, { variant: 'tiles', size: 'lg', ariaLabel: 'Platform figures' });
```

## Figures

Numbers are formatted here, so every host shows them the same way: grouped digits, compact from `compactFrom` up with the exact figure as the tooltip, percent and currency through `valueType`, a muted `total` after the value, a unit as `suffix`, a signed `delta` with a direction arrow, and a `badge` form for status words. A figure with no value shows the `placeholder`, or a skeleton while `loading`.

`href` renders the figure as a link and `selectable` renders it as a toggle button that emits `select`; the host owns the selection and answers with `setItems()` or `setValue()`.

## Digits and language: `numberingSystem`

`locale` picks the language and the number format. Which digits that locale uses is a separate choice, and engines disagree on it: `ar-SA` gives Arabic-Indic digits in some and Western digits in others. `numberingSystem` settles it for every figure, total, delta and tooltip:

```ts
new XWUIStatGroup(host, { items }, { locale: 'ar-SA', numberingSystem: 'latn' }); // 28,000 in Latin digits
new XWUIStatGroup(host, { items }, { locale: 'en-US', numberingSystem: 'arab' }); // Arabic-Indic digits
```

It takes a Unicode numbering system id (`latn`, `arab`, `arabext`, `deva`, ...). With no `locale` it applies to the runtime locale, and it wins over a `-u-nu-` extension already on `locale`. A value that is not a numbering system leaves the locale as it was. In HTML write `numbering-system="latn"`.

## Role and name

The root is `role="group"` and takes `ariaLabel` as its accessible name; `role` replaces the role (for example `list`) when the figures are better described that way. In HTML, write `role` as the plain platform attribute.

## What the view will not render

The `href` and `icon` strings become markup, so both are filtered:

- `href` renders only for `http`, `https`, `mailto`, `tel` and scheme-less targets (a relative path, `#fragment`, `?query`). A `javascript:`, `data:` or `vbscript:` target leaves the figure as a plain figure instead of a link that runs script on click.
- `icon` goes through the `trustedMarkupHtml` allowlist: an inline SVG or plain text (an emoji) renders; script, event-handler attributes and elements outside the SVG set are dropped. Pass your own markup, never user or model text.

```api
```