"Comparison gauges" KPI indicator. Each KPI is a goal-oriented progress bar — label · value on top, bar with a target tick in the middle, 0 · tgt scale below. Bar fill is value/target, capped at 100% (overshoots are
signalled by colour, not by overflowing the bar). Colours: --pa-positive for "on
track", --pa-warning for "off-target / approaching limit", --pa-neutral for "no strong sentiment".
Layout is a cell-min-driven auto-fit grid: cells stay at least --pa-kpi-gauge-cell-min wide (default 20rem), the grid fits as many
columns as the container allows, and the responsive cascade is intrinsic. max-2…max-6 modifiers cap the column count while still collapsing on narrow containers. The canonical card below uses gridLayout="max-3" for a deterministic 2-row layout.
Key Performance Indicators
LIVE- Current
- 88.1%
- Δ absolute
- −1.9pp
- Target
- 90.0%
- Current
- $859K
- Δ absolute
- −$41K
- Target
- $900K
- Current
- 23.8°C
- Δ absolute
- −1.2°C
- Target
- 25.0°C
- Current
- 84.5%
- Δ absolute
- +4.5pp
- Target
- 80.0%
- Current
- 0.27%
- Δ absolute
- −0.23pp
- Target
- 0.50%
- Current
- ¥11.7M
- Δ absolute
- −¥1.3M
- Target
- ¥13.0M
1×3 · .pa-col-1-3 columns
Three smaller cards side-by-side. Each card uses the default KpiGaugeList (no gridLayout modifier) — at ~400 px wide the cell-min threshold forces a single
column, so each card stacks its 2 gauges vertically.
- Current
- 88.1%
- Target
- 90.0%
- Current
- $859K
- Target
- $900K
- Current
- 23.8°C
- Target
- 25.0°C
- Current
- 84.5%
- Target
- 80.0%
- Current
- 0.27%
- Target
- 0.50%
- Current
- ¥11.7M
- Target
- ¥13.0M
2×3 stack · .pa-col-25 + .pa-col-45 (asymmetric, 30% empty)
Two page-grid columns: 25% wide on the left (narrow stress test — each gauge gets ~280–320 px),
45% on the right. Each holds three gauges with the default KpiGaugeList. Both cards
sit below the cell-min × 2 threshold, so the grid collapses to a single column inside both.
- Current
- 88.1%
- Target
- 90.0%
- Current
- 23.8°C
- Target
- 25.0°C
- Current
- 0.27%
- Target
- 0.50%
- Current
- $859K
- Target
- $900K
- Current
- 84.5%
- Target
- 80.0%
- Current
- ¥11.7M
- Target
- ¥13.0M
Usage Guide
When to use
Goal-oriented dashboards where every KPI has a defined target and "are we on/under/over?" is the question that matters most. The bar reads value/target as a percent; the target tick anchors the "100% = target" reference visually so under/over is immediately obvious. Colour reinforces the direction (green / orange / grey).
Tick position (tickPosition)
Default tick sits at 100% — the right edge of the bar's "0 → target" scale. Set tickPosition="80%" (or any percent) when the bar's scale runs wider than the target
and the target should sit inside the bar. The Server Capacity tile demonstrates this: bar
runs 0→100%, target at 80%, fill at 84.5% reads as "fill extends past tick" — more informative than
the default capped-at-100% pattern.
Variant colours
Bar fill colour is driven by the variant prop via the --pa-kpi-bar-color cascade var. Variants: positive (green), warning (orange,
"off-target / approaching limit"), negative (red), neutral (grey, no
strong sentiment). Host apps can override per-tile via class + a custom rule on --pa-kpi-bar-color.
Layout
Cell-min-driven auto-fit grid. The default KpiGaugeList packs as many columns as fit while keeping each cell at least --pa-kpi-gauge-cell-min wide (default 20rem). No @container queries — the responsive cascade is intrinsic to the grid template.
Override per instance via the cellMinWidth prop (e.g. cellMinWidth="24rem" for fewer, wider columns; "16rem" for more, narrower
ones).
Cap-at-N modifiers. gridLayout="max-2", "max-3", "max-4", "max-5", "max-6" each cap the column count at N
while still collapsing below the cell-min × N threshold (a ceiling, not a force).
Pick the cap so your item count divides into clean rows. gridLayout="2col" is a
separate deterministic modifier — exactly 2 columns regardless of cell-min or container width.
Hairline dividers. The inter-tile dividers are gap: 1px on the grid
over background: var(--pa-border-color), with each tile painting background: var(--pa-card-bg) on top. Only the gap shows through, giving
single-pixel hairlines on every interior boundary regardless of column count. Replaces the previous
per-tile border-right + border-bottom + nth-child suppression, which only
worked for the hardcoded 2-col layout. The card's outer border supplies the perimeter; the body
still uses padding: 0 so the dividers go edge-to-edge.
Hover detail popover
Cursor-anchored via Floating UI's computePosition + a virtual reference element built
from e.clientX/clientY. Same recipe as the other KPI showcases: position: fixed, pointer-events: none, popover moved to <body> on init to escape ancestor overflow: hidden.
Component Reference
KpiGaugeList props
titleText— card title in the header.isLive— show the LIVE pill with animated green dot.footerText— footer caption (plain string). Override via thefootersnippet.gridLayout— grid layout modifier:'2col'(deterministic 2 columns) /'max-2'/'max-3'/'max-4'/'max-5'/'max-6'(cap-at-N). Default omitted = cell-min-drivenauto-fit.cellMinWidth— CSS length applied as--pa-kpi-gauge-cell-minon the grid (default upstream20rem). Smaller → more columns at the same container width; larger → fewer.
KpiGauge props
variant— sentiment colour:positive/warning/negative/neutral.labelText— uppercase mono label.valueText/unit/prefix— focal value cell.barPercent— bar fill width 0–100 (no cap; overshoots are signalled by colour).tickPosition— target tick position (default"100%"; set to a smaller % for wider-scale bars).tickColor— tick colour override (default--pa-text-color-1).scaleStartText/scaleEndText— labels under the bar (default"0"+ target text).detailTitleText— popover title (setting this enables the auto-generated popover).previousValueText— "Previous" row in the auto-generated popover.targetText— "Target" row in the auto-generated popover (value only — label is added automatically).deltaAbsoluteText— "Δ absolute" row in the auto-generated popover.deltaAbsoluteVariant— sentiment override for the Δ absolute row (pos/neg/warn; defaults to sentiment derived fromvariant).