// MetricStrip Component
// Horizontal row of equal KPI cells with right-border dividers
#let metric-strip(data) = {
let n = data.items.len()
let cols = (1fr,) * n
let padding = if data.compact { spacing-3 } else { spacing-4 }
block(
width: 100%,
fill: color-surface,
stroke: (paint: color-border, thickness: component-card-border-width),
radius: 10pt,
)[
#grid(
columns: cols,
gutter: 0pt,
..data.items.enumerate().map(((i, item)) => {
let accent = if item.accent_color != none { rgb(item.accent_color) }
else if item.status == "good" { color-ok }
else if item.status == "warn" { color-warn }
else if item.status == "bad" { color-bad }
else { color-primary }
block(
width: 100%,
inset: (x: padding, y: padding),
stroke: if i < n - 1 { (right: 0.5pt + color-border) } else { none },
)[
#label-text(item.label)
#v(spacing-2)
#stack(
dir: ltr,
spacing: 3pt,
text(size: if data.compact { font-size-sm } else { font-size-xl }, weight: "bold", fill: accent)[#item.value],
if item.unit != none [
#pad(top: 3pt)[#small-text(item.unit)]
],
)
]
})
)
]
}