Custom and net-new: Event Log

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

Net-new components

• .pds-event-log — a list of events over time with an optional rail.
  • Parts and modifiers: .pds-event-log__entry, .pds-event-log__entry--joined, .pds-event-log--rail
• .pds-event-log-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-event-log-item--agentic, .pds-event-log-item--error, .pds-event-log-item--has-time, .pds-event-log-item--pending, .pds-event-log-item--quiet, .pds-event-log-item__added, .pds-event-log-item__content, .pds-event-log-item__content--indented, .pds-event-log-item__detail, .pds-event-log-item__removed, .pds-event-log-item__row, .pds-event-log-item__secondary-text, .pds-event-log-item__status, .pds-event-log-item__time, .pds-event-log-item__toggle

Additions to existing PDS components

None.

Net-new props

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

Custom CSS variables

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

Raw values kept on purpose

None.