{
  "name": "StatGroup",
  "source": "src/components/StatTile.tsx",
  "propsType": "StatGroupProps",
  "description": "StatGroup — a row of StatTiles.\n\nA `<dl>`: each tile is a term (the label) and its description (the figure),\nwhich is what a screen reader announces as a pair. The grid wraps on its own,\nso four tiles are one row on a desktop and two on a phone with no breakpoint\nin the caller's code.",
  "import": "import { StatGroup } from 'ionbase-ui';",
  "status": "stable",
  "since": "0.71.0",
  "summary": "A row of StatTiles, as a description list. Wraps on its own — no breakpoints in the caller's code.",
  "useWhen": [
    "two or more headline figures shown side by side"
  ],
  "useInstead": [
    {
      "when": "the figures are rows of records to compare field by field",
      "use": "Table"
    }
  ],
  "composition": {
    "order": [
      "StatGroup",
      "StatTile"
    ],
    "note": "StatGroup renders the <dl>; each StatTile renders a <dt> and a <dd> inside it. A StatTile outside a StatGroup is invalid HTML.",
    "example": "<StatGroup><StatTile label=\"Runs\" value=\"1.2k\" change={4.1} goodWhen=\"neutral\" /><StatTile label=\"Median run time\" value=\"38s\" change={-6.2} goodWhen=\"down\" /></StatGroup>"
  },
  "slots": {
    "children": {
      "accepts": [
        "StatTile"
      ],
      "note": "StatTiles only — the group is a <dl>, so anything else inside it is invalid"
    }
  },
  "a11y": {
    "guarantees": [
      "a <dl>, so each label is announced as the term for its figure"
    ],
    "notes": [
      "Give the group a heading or aria-label when the page has more than one, so a screen reader can tell them apart."
    ]
  },
  "antiPatterns": [
    {
      "dont": "adding media queries to change the column count",
      "why": "the grid already wraps by tile width; a breakpoint fights it"
    }
  ],
  "stylesheet": null,
  "tokens": [],
  "props": {
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "StatTile elements."
    }
  },
  "propCounts": {
    "own": 1,
    "aria": 0,
    "dom": 277,
    "other": 0
  }
}