Stats

Preview Available in release assets

Present a small set of labelled measures with explicit units, qualifiers, and unavailable states in an intrinsic grid.

Stats in context

<section aria-labelledby="service-health-title">
  <h2 id="service-health-title">Service health</h2>
  <dl class="thin-stats">
    <div>
      <dt>Successful requests</dt>
      <dd>
        <data value="99.98">99.98%</data>
      </dd>
      <dd class="thin-stat-detail">over the last 30 days</dd>
    </div>
    <div>
      <dt>Median response time</dt>
      <dd>
        <data value="184">184 ms</data>
      </dd>
      <dd class="thin-stat-detail">12 ms faster than the previous period</dd>
    </div>
    <div data-state="unavailable">
      <dt>Region awaiting sufficient data with a deliberately long localized label</dt>
      <dd>Not enough data</dd>
      <dd class="thin-stat-detail">No value is inferred</dd>
    </div>
  </dl>
</section>

Show code

<section aria-labelledby="service-health-title">
  <h2 id="service-health-title">Service health</h2>
  <dl class="thin-stats">
    <div>
      <dt>Successful requests</dt>
      <dd>
        <data value="99.98">99.98%</data>
      </dd>
      <dd class="thin-stat-detail">over the last 30 days</dd>
    </div>
    <div>
      <dt>Median response time</dt>
      <dd>
        <data value="184">184 ms</data>
      </dd>
      <dd class="thin-stat-detail">12 ms faster than the previous period</dd>
    </div>
    <div data-state="unavailable">
      <dt>Region awaiting sufficient data with a deliberately long localized label</dt>
      <dd>Not enough data</dd>
      <dd class="thin-stat-detail">No value is inferred</dd>
    </div>
  </dl>
</section>

Anatomy

Labelled section
Description list
Stat group
Term
Primary value
Optional qualifier or evidence link

Variants and sizes

Compact measures
Values with qualifiers
Linked evidence
Unavailable value

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Narrow container
Wide container
Large values
Long localized labels
Unavailable data stated in text
Right-to-left content
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Stats are static content. Any evidence or drill-down destination remains an ordinary link with native keyboard and browser behavior.

Accessibility

Associate every measure with an explicit text label using a description list, include units and comparison direction in accessible text, and never rely on color or an arrow alone to communicate change.

Contract

COMPOSE

Basis

Native headings, lists, time, and table/content relationships; no APG widget

Evidence

tests/unit/library/content-patterns.test.ts

API

Use dl.thin-stats with direct div groups containing one dt and one or more dd elements. Use data for machine-readable numeric values, .thin-stat-detail for qualifiers, and data-state=unavailable only when the visible text also says why no value exists.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The description list preserves every label, value, unit, qualifier, and unavailable explanation without CSS or JavaScript.

Assets and dependencies

/components.css

Dependencies: None

Source: packages/ui/src/items/stats/style.ts