fix: add KPI tile widget type to the dashboard (#26)

Adds a non-chart dashboard widget: a large value with its label, an
optional signed delta versus the previous period, and an optional
sparkline. Four tiles now sit above the charts, 3x1 each.

- KpiTile draws no surface of its own and fills the grid item's, styled
  from the --dialect-* token layer; the delta's up/down colors are new
  tokens rather than literals, so they follow the light/dark toggle.
- Value and delta share one row: stacking them costs a line the tile does
  not have at its default height of one grid cell.
- SparklineChart is a chrome-free line chart built on DialectTheme, so it
  shares the palette and font with the real charts.
- ApexCharts' sparkline.enabled drops the axes on the initial render but
  updateOptions (how the theme toggle recolors a chart) brings the y-axis
  labels back; they are hidden in CSS, which reaches the chart SVG since
  it renders into light DOM.

The registry registration the issue asks for is left out: #21 is blocked,
so there is no widget picker to register with yet. The tiles are wired
into DashboardView the same way the chart widgets are, and their values
come from the translation bundle until the data service (#20) lands.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0124BiJikbhbiEsNfJxdWM69

src/test/java/com/example/views/DashboardViewTest.java

@@ -4,6 +4,7 @@ import com.example.Application;
 import com.example.components.BarChart;
 import com.example.components.GridStackItem;
 import com.example.components.GridStackLayout;
+import com.example.components.KpiTile;
 import com.example.components.LineChart;
 import com.example.components.PieChart;
 import com.vaadin.browserless.SpringBrowserlessTest;
@@ -27,6 +28,9 @@ import static org.junit.jupiter.api.Assertions.assertTrue;
 @ViewPackages(classes = DashboardView.class)
 class DashboardViewTest extends SpringBrowserlessTest {
 
+    /** Four KPI tiles plus three charts and the hint card. */
+    private static final int DEFAULT_WIDGETS = 8;
+
     @Test
     void view_rendersGridWithDefaultWidgets() {
         navigate(DashboardView.class);
@@ -35,10 +39,42 @@ class DashboardViewTest extends SpringBrowserlessTest {
         assertNotNull(grid);
 
         List<GridStackItem.Position> layout = grid.getLayout();
-        assertEquals(4, layout.size(), "expected the four default widgets");
+        assertEquals(DEFAULT_WIDGETS, layout.size(), "expected the default widgets");
         assertTrue(layout.stream().allMatch(p -> p.w() > 0 && p.h() > 0));
     }
 
+    @Test
+    void kpiTiles_renderValueAndDelta() {
+        navigate(DashboardView.class);
+
+        List<KpiTile> tiles = $view(KpiTile.class).all();
+        assertEquals(4, tiles.size(), "expected the four KPI tiles");
+
+        KpiTile revenue = tiles.getFirst();
+        assertEquals(translate("kpi.revenueTotal"), revenue.getLabel());
+        assertEquals(translate("kpi.revenueTotal.value"), revenue.getValue());
+        // +12.4 — sign is explicit, decimal separator is the locale's.
+        assertTrue(revenue.getDeltaText().matches("\\+12[.,]4 %"),
+                "unexpected delta text: " + revenue.getDeltaText());
+
+        KpiTile orders = tiles.get(1);
+        assertTrue(orders.getDeltaText().startsWith("-"),
+                "a negative delta keeps its minus sign: " + orders.getDeltaText());
+        assertNotNull(orders.getSparkline(), "each tile carries a sparkline");
+    }
+
+    @Test
+    void kpiTiles_areOneRowHigh() {
+        navigate(DashboardView.class);
+
+        List<GridStackItem.Position> kpis = $view(GridStackLayout.class).first().getLayout()
+                .stream().filter(p -> p.id().startsWith("kpi-")).toList();
+
+        assertEquals(4, kpis.size());
+        assertTrue(kpis.stream().allMatch(p -> p.w() == 3 && p.h() == 1),
+                "KPI tiles default to a quarter row, one cell high");
+    }
+
     @Test
     void view_rendersTheThreeCharts() {
         navigate(DashboardView.class);
@@ -73,7 +109,7 @@ class DashboardViewTest extends SpringBrowserlessTest {
         clickCloseButton(first);
 
         List<GridStackItem.Position> layout = grid.getLayout();
-        assertEquals(3, layout.size());
+        assertEquals(DEFAULT_WIDGETS - 1, layout.size());
         assertFalse(layout.stream().anyMatch(p -> closedId.equals(p.id())),
                 "the closed widget must be gone from the layout");
     }
@@ -90,7 +126,7 @@ class DashboardViewTest extends SpringBrowserlessTest {
         item.close();
 
         assertEquals(1, fired[0]);
-        assertEquals(3, grid.getLayout().size());
+        assertEquals(DEFAULT_WIDGETS - 1, grid.getLayout().size());
     }
 
     @Test
@@ -114,8 +150,11 @@ class DashboardViewTest extends SpringBrowserlessTest {
     }
 
     private Button button(String translationKey) {
-        String caption = getCurrentView().getElement().getComponent()
+        return $view(Button.class).withText(translate(translationKey)).first();
+    }
+
+    private String translate(String translationKey) {
+        return getCurrentView().getElement().getComponent()
                 .orElseThrow().getTranslation(translationKey);
-        return $view(Button.class).withText(caption).first();
     }
 }