StatsBand

import ui/theme.qwe use theme_cssuse ui/stats_band.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view StatsBandDemo() =    <div.demo-stack>        <StatsBand id="stats-band-demo" stats={[            { value: "12k", label: "Developers" },            { value: "99.99%", label: "Uptime", note: "last 90 days" },            { value: "< 1 ms", label: "To render a page" },            { value: "108", label: "Components", note: "and counting" },        ]}/>        <StatsBand tone="accent" columns={3} stats={[            { value: "4.9", label: "Average rating", note: "from 2,140 reviews" },            { value: "38", label: "Countries" },            { value: "2019", label: "Founded" },        ]}/>        <StatsBand tone="plain" stats={[{ value: "3", label: "People" }, { value: "1", label: "File" }, { value: "0", label: "Build steps" }]}/>    </div>

// StatsBand: a few big numbers across a band, each with what it counts under it.// For numbers that change, with deltas and trends, use Stat.////   <StatsBand stats={[//       { value: "12k", label: "Developers" },//       { value: "99.99%", label: "Uptime", note: "last 90 days" },//       { value: "< 1 ms", label: "To render a page" },//   ]}/>//   <StatsBand tone="accent" stats={numbers}/>//// stats: a list of { value, label, note? }: the number as it should read (format// it first), what it counts, and a quieter line under that. tone: "subtle"// (default, a tinted band), "accent" (filled with the accent colour), "outline"// (a bordered box) or "plain" (no band at all). columns: a fixed number; without// it, as many as fit at min pixels wide (160), which also fit a phone. It is a// <dl>, so screen readers read each number with its label.import ui/theme.qwe use ui_clslet stats_band_css = css`.ui-stats-band { display: grid; gap: 24px; margin: 0; padding: 36px 32px; border-radius: var(--ui-radius);  grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-stats-min, 160px), 100%), 1fr));  font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }.ui-stats-band-cols { grid-template-columns: repeat(var(--ui-stats-cols), minmax(0, 1fr)); }.ui-stats-band-subtle { background: var(--ui-subtle); }.ui-stats-band-accent { background: var(--ui-accent); color: var(--ui-accent-fg); }.ui-stats-band-outline { border: 1px solid var(--ui-border); background: var(--ui-surface); }.ui-stats-band-plain { padding: 0; }.ui-stats-band > div { display: grid; gap: 4px; justify-items: center; min-width: 0; text-align: center; }.ui-stats-band-value { margin: 0; font-size: clamp(30px, 4vw, 42px); font-weight: 750; line-height: 1.05; letter-spacing: -.02em;  font-variant-numeric: tabular-nums; }.ui-stats-band-label { margin: 0; font-weight: 500; }.ui-stats-band-note { margin: 0; font-size: 13px; color: var(--ui-muted); }.ui-stats-band-accent .ui-stats-band-note { color: inherit; opacity: .75; }@media (max-width: 640px) {  .ui-stats-band { gap: 20px; padding: 28px 20px; }  .ui-stats-band-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }}`view StatsBand(stats: list, tone: str = "subtle", columns: int? = null, min: int = 160, id: str? = null, class: str? = null) {    style global stats_band_css    <dl id={id} class={ui_cls(["ui-stats-band", `ui-stats-band-${tone}`, columns != null && "ui-stats-band-cols", class])}        style={columns != null ? `--ui-stats-cols: ${columns}` : `--ui-stats-min: ${min}px`}>        {for s in stats => <div>            <dd.ui-stats-band-value>{s.value}</dd>            <dt.ui-stats-band-label>{s.label}</dt>            {s.note != null && <dd.ui-stats-band-note>{s.note}</dd>}        </div>}    </dl>}