Stat Card

KPI tile from the Orders overview — multi-line label, one big value, and an optional breakdown list of icon/label/value rows. The 6 Orders dashboard tiles are all tip-stat-card instances.

Selector: tip-stat-card

API

Name	Type	Default	Description
`label` (input, required)	`string`	—	Small muted heading (e.g. "Total Orders").
`sublabel` (input)	`string \| null`	`null`	Optional second label line.
`value` (input, required)	`string`	—	Headline figure; empty string renders as `—` (empty/dash state).
`variant` (input)	`StatCardVariant` = `'default' \| 'inverse' \| 'highlight'`	`'default'`	`inverse` = dark "Total" tile, `highlight` = amber tile; both restyle label/value/row colors.
`rows` (input)	`StatCardRow[]` = `{iconName?, label, value}[]`	`[]`	Breakdown rows under the value (e.g. "By carrier" / "By port").
`progress` (input)	`StatCardProgress \| null` = `{value?, segments?, color?, track?, height?}`	`null`	Forwarded 1:1 to an internal `tip-progress-bar`.
`loading` (input)	`boolean`	`false`	Renders label/value/row skeletons instead of content.
`[footnote]` (slot)	content	—	Free-form footnote area between the value and the progress bar (e.g. Orders' pickup-appointment breakdown).

Usage

<tip-stat-card
  [label]="card.label" [sublabel]="card.sublabel ?? null" [value]="card.value"
  [variant]="card.variant" [rows]="card.rows" [progress]="card.progress ?? null"
  [loading]="loading()"
>
  @if (card.footnote) { <div footnote>…</div> }
</tip-stat-card>

Notes

dark() (derived from variant() === 'inverse') is passed to every internal tip-skeleton so the shimmer stays visible on the dark tile.
The first rows entry gets a top divider (--border-hairline / --tip-ink-800 on inverse) only when variant === 'inverse' — a design detail specific to the dark "Total Orders" tile's breakdown list.
progress mirrors tip-progress-bar's own inputs — pass either value (single fill) or segments (multi-color), never both meaningfully at once.