<baht-stat>

Stat tile: label, one figure, an optional delta against a named period and an optional sparkline. The figure is never colored by a series hue — only the delta carries color, and it always ships an arrow and a worded direction so meaning never rides on color alone.

KPI row

<baht-stat label="In" value="45200" format="currency" delta="6" delta-label="vs August"></baht-stat>

<script>
  const el = document.querySelector('baht-stat');
  el.trend = [
    31000,
    33500,
    32200,
    35800,
    34100,
    36400
  ];
</script>

Spending: up is bad

<baht-stat label="Out" value="31480" format="currency" delta="18" delta-label="vs August" up-is-good="false"></baht-stat>

Hero figure

<baht-stat size="hero" label="Net this month" value="13720" format="currency" delta="9" delta-label="vs August"></baht-stat>

Props

Name	Type	Default	Description
`label`	`string`	`''`	Sentence-case caption above the figure
`value`	`number`	`0`	The figure
`format`	`ChartFormat`	`'number'`	number \| currency \| percent \| compact
`currency`	`string`	`'THB'`	ISO code; THB renders ฿
`delta`	`number \| null`	`null`	Change vs the previous period; null hides the row
`delta-kind`	`'abs' \| 'pct'`	`'pct'`	pct: 18 → "18%". abs: rendered with format
`delta-label`	`string`	`''`	What the delta is measured against; with no delta it renders alone as a muted caption
`up-is-good`	`boolean`	`true`	Is a rise good news? Spending tiles set false
`trend`	`number[]`	`[]`	Points drawn as a muted sparkline
`size`	`'md' \| 'hero'`	`'md'`	hero is the one 48px+ figure a view leads with
`icon`	`string \| undefined`	`—`	Icon name from the curated set (see icons.ts), shown in a chip before the label.