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

items is required. npx cxtms rejects an unknown variant, size or align, an item color outside the list above, and any item key not in this table, so a typo like colr fails validation instead of being silently ignored.

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.