Custom and net-new: Timeline

Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file.

Net-new components

• .pds-timeline — a list of events over time with an optional rail.
  • Parts and modifiers: .pds-timeline__entry, .pds-timeline__entry--joined, .pds-timeline--rail
• .pds-timeline-item — one event or piece of work: an optional icon (status or custom), a label, quiet secondary text, a time and optional expandable detail. Renamed from .pds-agent-step.
  • Parts and modifiers: .pds-timeline-item--agentic, .pds-timeline-item--error, .pds-timeline-item--has-time, .pds-timeline-item--pending, .pds-timeline-item--quiet, .pds-timeline-item__added, .pds-timeline-item__content, .pds-timeline-item__content--indented, .pds-timeline-item__detail, .pds-timeline-item__removed, .pds-timeline-item__row, .pds-timeline-item__secondary-text, .pds-timeline-item__status, .pds-timeline-item__time, .pds-timeline-item__toggle

Additions to existing PDS components

None.

Net-new props

• Timeline: all (children, className, hasRail, size).
• TimelineItem: all (children, className, detail, iconName, isAgentic, isQuiet, label, labelStrings, secondaryText, size, status, time, timeDateTime).

Custom CSS variables

• --timeline-gap — set on .pds-timeline; space between entries (also what the rail runs through).
• --timeline-item-status-color — set on .pds-timeline-item; color of the status icon, changed by --agentic, --error and --pending.
• --timeline-rail-color — set on .pds-timeline; color of the rail.

Raw values kept on purpose

None.