Stats Component

stats renders read-only totals, counts, and headline values. Templates resolve against the UI store, enclosing form values, and component variables (variables have highest precedence). Empty values render as an em dash; zero remains visible.

component: stats
name: orderTotals
props:
  variant: row
  size: md
  align: end
  items:
    - label: Weight
      value: "{{ orderSummary.totalWeight }}"
      unit: lb
      decimals: 2
    - label: Pieces
      value: "{{ orderSummary.totalPieces }}"

Prop	Type	Description
items	array	Values to render
items[].label	string or localized value	Short label for the value
items[].value	any/template	Displayed value
items[].unit	any/template	Muted unit shown after a non-empty value
items[].caption	string or localized value	Additional muted caption
items[].decimals	number	Maximum decimal places for numeric values
items[].emphasis	boolean	In list mode, bolds the item and separates it with a rule
items[].icon	string/template	In cards mode, a Tabler icon shown in a tinted tile
items[].color	primary, secondary, success, info, warning, or error	In cards mode, the icon-tile color; defaults to primary
variant	row, list, or cards	Horizontal stats (default), receipt-like label/value rows, or a responsive strip of equal cards
size	sm, md, or lg	Value/card density. For cards, md is the default and sm is about one third smaller; for row, lg places the label above the value
align	start or end	Alignment for row mode
className	string	Additional CSS classes

For grid totals, place a cards strip directly above the grid so the summary stays prominent and wraps on narrow screens:

- component: stats
  name: cartonTotals
  props:
    variant: cards
    items:
      - label: Cartons
        value: "{{ orderSummary.totalPieces }}"
        icon: tabler-package
      - label: Weight
        value: "{{ orderSummary.totalWeight }}"
        unit: lb
        icon: tabler-weight
        color: info
- component: dataGrid
  name: cartonsGrid
  # ...

row and list remain useful for compact summaries and card-header totals.