component: Timeline
name: timeline
category: data-display
version: 1.0.0

ai:
  intent: "Chronological event logs and milestones"
  visual_role: "Vertical or horizontal axis with event nodes"
  density: "comfortable"
  preferred_when:
    - "Activity feeds and audit history"
    - "Delivery tracking and roadmap timelines"
  avoid_when:
    - "Tabular data grids (use Table)"

base:
  position: relative
  list-style: none
  margin: 0
  padding: 0
  display: flex
  flex-direction: column
  font-family: "{font.family.body}"

variants:
  vertical:
    flex-direction: column
  horizontal:
    flex-direction: row
    overflow-x: auto
  activity:
    flex-direction: column

sizes:
  sm:
    gap: "{space.4}"
  md:
    gap: "{space.6}"
  lg:
    gap: "{space.8}"

states:
  default:
    opacity: 1
  active:
    font-weight: 600
  completed:
    opacity: 1
  pending:
    opacity: 0.7

structure:
  base:
    native_class: qhr-timeline