{
  "name": "TimelineItem",
  "source": "src/components/Timeline.tsx",
  "propsType": "TimelineItemProps",
  "import": "import { TimelineItem } from 'ionbase-ui';",
  "status": "stable",
  "summary": "One event in a Timeline: what happened, who did it, when — then the detail. An `<li>` with a decorative marker.",
  "useWhen": [
    "one event in a Timeline"
  ],
  "a11y": {
    "requires": [
      "a Timeline parent — an `<li>` outside a list is invalid",
      "a `title` in words: the icon is hidden, so it cannot be the only sign of what kind of event it was"
    ],
    "guarantees": [
      "the time is a `<time>` whose `dateTime` is the exact instant",
      "`timestampLabel` changes only the words shown, never the instant",
      "the separator between actor and time, the marker and the icon are hidden from assistive tech"
    ]
  },
  "antiPatterns": [
    {
      "dont": "title=\"purpose\" with the change as the detail",
      "do": "title=\"Changed the purpose\", and the old and new text as the detail",
      "why": "the title is what a screen reader hears first and what a person scans; a field name alone does not say what happened"
    }
  ],
  "stylesheet": "src/styles/timeline.css",
  "tokens": [
    "--border-default",
    "--border-strong",
    "--border-subtle",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-semibold",
    "--icon-secondary",
    "--icon-size-xs",
    "--ion-timeline-marker",
    "--radius-full",
    "--spacing-12",
    "--spacing-16",
    "--spacing-2",
    "--spacing-24",
    "--spacing-4",
    "--spacing-8",
    "--surface-default",
    "--text-default",
    "--text-secondary",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "title": {
      "type": "React.ReactNode",
      "required": true,
      "origin": "own",
      "description": "What happened, as a sentence in the reader's language: \"Paused the agent\"."
    },
    "actor": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Who did it — a person's name, \"System\", an agent."
    },
    "timestamp": {
      "type": "string | Date",
      "required": true,
      "origin": "own",
      "description": "When it happened. Rendered in a `<time>` whose `dateTime` is the exact\ninstant, whatever the label says."
    },
    "timestampLabel": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "The text shown for the time, in place of the default date and time —\n\"2 hours ago\", or a date the app formats itself."
    },
    "locale": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "Locale for the default label. Pass it when rendering on a server."
    },
    "timeZone": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "Time zone for the default label, e.g. \"Europe/Berlin\"."
    },
    "icon": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "A decorative mark in the dot, for the kind of event. Hidden from assistive tech."
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "More about it — what changed from what, a reason, a link to the record."
    }
  },
  "propCounts": {
    "own": 8,
    "aria": 0,
    "dom": 277,
    "other": 0
  }
}