Element: #217 KPI cards with trend lines (charts/sparklines) What it shows: Four KPI cards, each with a value, a change percentage and a trend-coloured sparkline. When to use: Dashboard summary tiles where each headline number needs a small history line. Spec: - `kpis` has 4 items: Monthly Revenue `$112k`, Active Users `24.8k`, Churn Rate `2.3%`, Avg Session `4m 12s` - Each item has `label`, `value`, `change`, `trend` and 9 `data` values - `` - `` with each KPI in `` - `class:up={k.trend === 'up'}` and `class:down={k.trend === 'down'}` colour the change text Tags: sparkline, kpi, card, trend, dashboard, grid Needs: @codeatlasdev/ui@4.4.0 + echarts Components: Card, Grid, Stack, Flex, Sparkline Live demo: https://ui.codeatlas.com.br/docs/charts/sparklines#kpi-cards-with-trend-lines {#each kpis as k} {k.label} {k.value} {k.change}

{/each}