{
  "name": "CitationList",
  "source": "src/components/Citation.tsx",
  "propsType": "CitationListProps",
  "description": "The footer list. An `<ol>` so the numbering is structural rather than typed\ninto each row, and so a screen reader can say how many sources there are\nbefore the reader commits to hearing them.",
  "import": "import { CitationList } from 'ionbase-ui';",
  "status": "stable",
  "summary": "The footer list of sources, as an ordered list so the count and order are structural.",
  "useWhen": [
    "several claims cite sources and the reader should be able to see them all at once"
  ],
  "useInstead": [
    {
      "when": "there is one source and it belongs in the sentence",
      "use": "Link"
    },
    {
      "when": "it is tabular data with more than a source per row",
      "use": "Table"
    }
  ],
  "composition": {
    "order": [
      "CitationList",
      "CitationListItem"
    ],
    "example": "<CitationList><CitationListItem index={1} source=\"Q3 filing\" href=\"/q3\">Revenue rose 4%.</CitationListItem></CitationList>"
  },
  "slots": {
    "label": {
      "accepts": "text",
      "note": "rendered as plain text, not a heading element — it should not enter the document outline as a section"
    },
    "children": {
      "accepts": "CitationListItem"
    }
  },
  "a11y": {
    "guarantees": [
      "an <ol>, so a screen reader can say how many sources there are before the reader commits to hearing them",
      "list markers are hidden in CSS while the semantics stay, because the visible number must match the inline Citation's exactly"
    ]
  },
  "antiPatterns": [
    {
      "dont": "a <div> stack of sources",
      "why": "the count and the ordering are the useful part, and only a list carries them"
    },
    {
      "dont": "numbers that disagree with the inline markers",
      "why": "the marker is a promise about where to look"
    }
  ],
  "stylesheet": "src/styles/citation.css",
  "tokens": [
    "--border-focus",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-medium",
    "--font-weight-semibold",
    "--ion-duration-base",
    "--ion-ease-out",
    "--radius-xs",
    "--spacing-16",
    "--spacing-2",
    "--spacing-4",
    "--spacing-8",
    "--surface-primary-subtle",
    "--surface-primary-subtle-hover",
    "--text-link",
    "--text-tertiary",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    },
    "label": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Heading above the list. Rendered as plain text, not a heading element."
    }
  },
  "propCounts": {
    "own": 2,
    "aria": 0,
    "dom": 280,
    "other": 0
  }
}