StatGroup

Purpose

A row of figures that read together: the criteria, the compliant ones, the non-compliant ones, the rate. A named list of Stats on the surface, the hairline between, so the figures line up and a screen reader counts them.

When to use, when not

Use it for three to five figures that summarise one thing, at the top of a page or a section. Not for one figure (Stat), not for figures that belong to different things.

Anatomy

1. A named list.
2. One Stat per item, on the surface, with the hairline.

Props

Props of StatGroup

Name	Type	Default	What it does
items	Item[]		The figures, in reading order.
label	string		The group's name, read before the figures: "Bilan de l'audit".
class?	string	''	Layout classes only.

States

Four figures of an audit, and two.

audit

The four figures of an audit; the tones follow the statuses, the labels say them.

Light

• 106 Critères évalués
• 82 Conformes
• 12 Non conformes
• 87,2 % Taux de conformité

Dark

• 106 Critères évalués
• 82 Conformes
• 12 Non conformes
• 87,2 % Taux de conformité

320 px, light

• 106 Critères évalués
• 82 Conformes
• 12 Non conformes
• 87,2 % Taux de conformité

320 px, dark

• 106 Critères évalués
• 82 Conformes
• 12 Non conformes
• 87,2 % Taux de conformité

216 px, light

• 106 Critères évalués
• 82 Conformes
• 12 Non conformes
• 87,2 % Taux de conformité

Forced colours, captured

two

Two figures fill the row; the grid adapts to the width.

Light

• 12 Pages auditées
• 9/12 Pages terminées

Dark

• 12 Pages auditées
• 9/12 Pages terminées

320 px, light

• 12 Pages auditées
• 9/12 Pages terminées

320 px, dark

• 12 Pages auditées
• 9/12 Pages terminées

216 px, light

• 12 Pages auditées
• 9/12 Pages terminées

Forced colours, captured

Accessibility contract

• Role and name: a list named by label; each item reads value then label.
• Keyboard, focus: none.
• Live regions: none.

Content rules

French. The label names the group (“Bilan de l’audit”); each item’s label says what the figure counts, and the tone follows the audit statuses where they apply.

Do and don’t

• Do keep the figures already formatted, with the French decimal comma.
• Do not colour a figure that is not a status count.

Examples

<StatGroup label="Bilan de l'audit" items={[{ id: 'c', value: String(compliant), label: 'Conformes', tone: 'success' }, …]} />

Surfaces

• App: the audited page’s figures, the comparison’s summary, the report’s site figures.
• Extension: the audit summary of the panel, when it is on Svelte.

Related

Stat, CardGrid.

Decisions

• 2026-09-24: the items are data and the cards draw their own outline, as CardGrid does, so an incomplete row stays clean.

Criteria held by construction

• 9.3, Dans chaque page web, chaque liste est-elle correctement structurée ?
  The figures are a list, named, so their count and rank are announced and they read as one group.
• 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
  A tone on a figure only confirms the label under it, which says what the figure counts.

Tokens it reads

• Colour: --rl-line, --rl-surface
• Spacing: --rl-space-4, --rl-space-5
• Layout: --rl-border