When to use

Fast vertical scanning of many KPIs side-by-side. Each row is one KPI: label · sparkline · value · Δ%. No view-mode toggle, no status pills, no prev row — built for "show me 5–10 KPIs at once with their trend shapes" rather than per-tile depth. Sparkline gets a filled area underneath the line for stronger visual weight than the Terminal grid version. If you want trend and dense numeric data per tile, pick Terminal grid; if you want trend behind a single hero number, pick Hero + supporting.

Container queries (not media queries)

The 4-col row layout (label · chart · value · delta) needs ~500px of min-content. Below that, columns overrun. .pa-kpi-spark-list declares container-type: inline-size so the same row markup adapts based on whichever card width it lives in:

• Default (≥640px): 4-col row.
• ≤640px: 2-row stack (label/value/delta on top, full-width chart below).
• ≤360px: 3-row stack (label, then chart, then value/delta side-by-side at the bottom).

A canonical card at 1200px stays 4-col while a 1×3 card at 400px stacks — both on the same page at the same viewport width. This is the right axis for a layout that lives in different surfaces at different sizes.

List-level modifiers

Two independently composable modifiers on .pa-kpi-spark-list:

• --chart-first: flips the mid-narrow 2-row collapsed layout from "value-above-chart" to "label / chart / value+delta", preserving the canonical L→R reading order when rotated 90°. The very-narrow ≤360px fallback always uses the 3-row layout regardless of modifier — neither variant has room for label+value+delta on one line at that width.
• --no-delta: drops the rightmost Δ% column. At wide widths the row shrinks from 4 cols to 3 (label · chart · value); at mid-narrow the top row becomes label value only; at very-narrow the bottom row becomes a single full-width value cell. The delta element is hidden via display: none so the markup can stay identical to default rows (the popover's <dl> still surfaces the delta on hover).

Composing both (--chart-first.--no-delta) at mid-narrow gives a clean 3-row single-column stack: label / chart / value.

Column track widths via SCSS variables

The four track widths are local SCSS variables in _kpi-sparkline-list.scss: $spark-col-label (minmax(14rem, 28%)), $spark-col-chart (minmax(10rem, 1fr)), $spark-col-value (minmax(8rem, 18%)), $spark-col-delta (minmax(7rem, 12%)). The default 4-col template and the --no-delta 3-col template both reference these, so changing one value updates both shapes in lock-step. Override in a theme by setting these variables before @importing the component.

Sparkline trend colours

Apply pa-kpi-spark-row--{up-strong | up | flat | down | down-strong} on the row to colour the sparkline (and trailing dot) via currentColor. The 5-step semantic palette comes from the shared --kpi-* tokens. Note these are direction-sentiment classes, not line-shape classes — "error rate dropping" uses --up despite the line going down, because the sentiment is positive.

Trailing dot

The chart SVG uses preserveAspectRatio="none" so the line stretches to fill arbitrary cell widths. As a side-effect, an SVG <circle> would render as an oval (X and Y scale factors differ at non-square aspect ratios). At init, JS converts each <circle> to an HTML .pa-kpi-spark-dot span sized in CSS pixels so it stays a true circle. Position is computed from the original cx/cy as viewBox-relative percentages so the dot lands at the same end-of-line spot.

Card structure

• pa-kpi-spark-list — page-namespace class on .pa-card. Declares container-type: inline-size for the layout collapse.
• pa-kpi-header — flex header with title + LIVE indicator.
• pa-kpi-live / pa-kpi-live__dot — LIVE pill + animated dot.
• pa-kpi-spark-list__body — applies padding: 0 so row dividers go edge-to-edge.
• pa-kpi-footer — flex footer caption.

List-level modifiers (composable)

• pa-kpi-spark-list--chart-first — flips the mid-narrow collapsed layout to "label / chart / value+delta".
• pa-kpi-spark-list--no-delta — drops the rightmost Δ% column; row template shrinks from 4 to 3 cols (with matching narrow-width adjustments). Independently composable with --chart-first.

Row structure

• pa-kpi-spark-row — single KPI row. Carries hover host for the popover.
• pa-kpi-spark-row--up-strong / --up / --flat / --down / --down-strong — sparkline-direction sentiment modifiers (set color on the chart so currentColor resolves the line + dot).

Row content

• pa-kpi-spark-row__label — uppercase mono caption.
• pa-kpi-spark-row__chart — chart wrapper (position: relative for the absolute-positioned dot).
• pa-kpi-spark-dot — HTML span replacing the SVG circle (CSS-pixel sized so it stays circular at any aspect ratio).
• pa-kpi-spark-row__value — focal value (right-aligned in the 4-col layout).
• pa-kpi-spark-row__num / pa-kpi-spark-row__unit — numeric + unit spans.
• pa-kpi-spark-row__delta — coloured Δ% (right-aligned).

Delta sentiment modifiers

• pa-kpi-spark-row__delta--very-positive — outlier positive (deeper green).
• pa-kpi-spark-row__delta--positive — ordinary positive.
• pa-kpi-spark-row__delta--neutral — no meaningful change.
• pa-kpi-spark-row__delta--negative — ordinary negative.
• pa-kpi-spark-row__delta--very-negative — outlier negative (deeper red).

Hover detail popover

• pa-kpi-detail — popover root (moved to <body> on init).
• pa-kpi-detail__title — uppercase mono header.
• pa-kpi-detail .pos / .neg / .warn — sentiment-coloured <dd> text.

Framework tokens used by this showcase

• --pa-very-positive / --pa-positive / --pa-neutral / --pa-negative / --pa-very-negative — 5-step semantic sentiment scale.
• --pa-warning — orange "off-target / approaching limit" signal.
• --pa-detail-bg / --pa-detail-text / --pa-detail-row-label / --pa-detail-title / --pa-detail-shadow — popover chrome.