Summary line

The facts of what is loaded in one line that stays visible above the views of the playground: collections, brands, breakpoints, tokens, lint findings and output files. Each part with a target is a button that opens its view, so the summary is also the way in.

When to use

• Above Tabs whose views each explain one of the numbers: summaries first, details on request.
• Not for prose or for numbers without a view behind them; those are plain text parts or belong in the view.

Counts that open their view, outputs built

Light

• 3 collections
• 2 brands
• 3 breakpoints
• 42 tokens
• 0 lint findings
• 11 output files

Graphite

• 3 collections
• 2 brands
• 3 breakpoints
• 42 tokens
• 0 lint findings
• 11 output files

Story: /stories/summary-line/default/

Status counts: lint errors and a failed build

Light

• 3 collections
• 2 brands
• 3 breakpoints
• 42 tokens
• 3 errors
• build failed

Graphite

• 3 collections
• 2 brands
• 3 breakpoints
• 42 tokens
• 3 errors
• build failed

Story: /stories/summary-line/problems/

Reading the input, before the counts

Light

• Reading 6 files…

Graphite

• Reading 6 files…

Story: /stories/summary-line/reading/

Guidelines

• Mono meta type in fg-muted; parts that open a view are fg-default, underlined with a hairline border-strong rule that thickens on hover. Spaced apart with space-6, no separators to read out.
• Status counts (tone): the lint count and a failed build carry their status colour, the marker shape before the words and the words (and their underline) in status-*-text: 1 error, 2 warnings with the error square, warnings only with the ring, 0 lint findings with the pass dot, build failed with the square. The other counts stay plain.
• Count words in the CLI’s terms, with plurals (1 collection, 3 breakpoints); lint counts come from @dta/lint (1 error, 2 warnings, or 0 lint findings).
• A count that needs work first says what opens it instead of a number: the playground builds its outputs only when the Outputs view opens (the build loads lazily), so until then the part reads build outputs, and 11 output files once built. Both lead to the same view.
• Reading (reading): while the input waits to be read, one muted part says so in words, Reading 6 files…, as a polite status (role="status", the list aria-busy). The playground loads its analysis lazily, so a file chosen in the first moments can wait for it. The part is as tall as a button part, so the counts take its place without moving anything; no spinner and no motion, since it is usually a moment. If the analysis cannot load, the line says so as a plain part with the error tone: The analysis did not load. Reload the page to try again.
• It wraps on narrow screens and never scrolls sideways. Each button is at least 24 px tall.
• A list (ul) with an accessible name (“Summary”); a button opens its tab and moves focus there.
• Motion: a part whose text changes lights up briefly (Changed), also under reduced motion; the line is the view-transition part dta-summary, so it moves instead of jumping when something opens above it. See Motion.

Tokens used

Read from the component’s source:

--action-bg--border-strong--fg-default--fg-muted--font-mono--radius-full--space-1--space-2--space-6--status-error-marker--status-error-text--status-success-marker--status-success-text--status-warning-marker--status-warning-text--stroke-focus--stroke-hairline--stroke-ink--type-meta-line-height--type-meta-size