{
  "docPath": "data-display/feature-list.tsx",
  "example": "import { FeatureList } from \"@godxjp/ui/data-display\";\n\n<FeatureList\n  items={[\n    { state: \"included\", label: \"SSO\", description: \"SAML と OIDC\" },\n    { state: \"limited\", label: \"API 呼び出し\", description: \"月 10,000 回まで\" },\n    { state: \"excluded\", label: \"監査ログのエクスポート\" },\n  ]}\n/>",
  "group": "data-display",
  "importPath": "@godxjp/ui/data-display",
  "name": "FeatureList",
  "props": [
    {
      "description": "The lines, in reading order. `state` drives the glyph, its mark colour and a localized sr-only word, so colour is never the only carrier (WCAG 1.4.1). `description` is a muted second line that WRAPS.",
      "name": "items",
      "required": true,
      "type": "{ state: \"included\" | \"excluded\" | \"limited\"; label: ReactNode; description?: ReactNode }[]"
    },
    {
      "description": "Root class. The rhythm and the glyph metric live in the --feature-list-* tokens, not here.",
      "name": "className",
      "type": "string"
    }
  ],
  "related": [
    "ListRow — a single-line entity row (session, token, passkey) with a trailing action; it truncates and it rules a line between rows.",
    "Timeline — the same glyph rail, but ordered in TIME, with a connector and done/current/pending.",
    "Descriptions — a term/value grid. A feature line has no value column; the state IS the value, and it is drawn.",
    "Legend — the key that says what a COLOUR means across other marks; a FeatureList makes statements of its own."
  ],
  "rules": [],
  "storyPath": "data-display/feature-list.tsx",
  "tagline": "A list of STATEMENTS, each with a leading state glyph (included ✓ / limited − / excluded ✗), an optional wrapping description, and the glyph aligned to the first text line.",
  "usage": [
    "DO import from `@godxjp/ui/data-display`: `import { FeatureList } from \"@godxjp/ui/data-display\";`",
    "DO put a quantity INSIDE the label — there is no prop for it, because `<Text tone=\"muted\" tabular>` in the label is already legal and already audit-clean.",
    "DO leave `excluded` lines un-emphasised. The component mutes the label and draws a plain ✗; a red cross per omission reads as a list of errors instead of a list of facts.",
    "DON'T hand-roll it as a `<ul className=\"flex flex-col gap-2\">` with an `mt-0.5` icon nudge — that is three ui-audit errors (no-utility-layout, no-utility-spacing ×2), and the 2px is below --space-1 so no token step spells it.",
    "DON'T reach for ListRow: it is a single-line ENTITY row with a divider between every row and a trailing action slot, and it truncates where a statement has to wrap.",
    "DON'T reach for Timeline: it is an ORDERED event rail with a connector line and done/current/pending statuses — that is time, not inclusion."
  ],
  "useCases": [
    "A pricing-plan card listing what the plan includes, what it limits and what it leaves out.",
    "A comparison surface where each tier repeats the same rows with different states.",
    "A submission review: which requirements the upload met, which it met partially, which it missed.",
    "A capability or compatibility list — supported / partially supported / unsupported."
  ]
}