Milestone

Problem

PDS has no pattern for a sequence of dated steps people read in order, for example the stages of an application process: a heading, a date line and a paragraph each, on one vertical line. The Timeline proposal is a log of events (one-line rows with a status icon, a label and a time), and cannot express it: no heading, no body, no card, and most of its props mean nothing here. Its rail also stops at the icons, where this line runs the full height of the list.

Proposal

Net-new, in two parts, in their own family so "timeline" keeps one meaning (the log).

• Milestone (the entry): a marker dot, a title, a subtitle in the secondary color and children for the body, on a Panel card or flat. isActive marks the one in focus (accent dot with a ring, aria-current='step'; the others are an empty circle). variant (card or flat) overrides the list's.
• MilestoneList (the list): an ol that owns the semantics, the spacing, the full-height line, whether milestones are on cards (variant: card or flat) and where the subtitle goes (subtitlePosition: below, or start at the left of the line).

Built on the local Panel for the card, default variant only for now. Timeline and Timeline Item are not changed. See decisions.md for how this came out of the Timeline proposal.

Source

Two screenshots from Erika (2026-10-22): two steps, "Organize your info" (Spring 2022) and "Pick your campus" (Summer 2022), each a card with a heading, a red date and a paragraph, on a grey line with a ringed dot; and the same with the date at the left of the line, beside the dot. The red is that site's brand color, not a PDS color.

Constraints

• Tokens only; light and dark. Reuse PDS Panel for the card; the dot takes the interactive link color.
• Semantics: ol with li; the title is a heading whose level the screen sets (headingLevel); the line and dots are decorative and hidden from assistive tech; the active milestone has aria-current='step'.
• The subtitle is a node formatted by the consumer (a date, a range, a stage); wrap a date in a time element for a machine-readable value.
• No content hardcoded; no inline styles; props alphabetical.
• Do not mix with Timeline Items in one list; the Timeline Usage page says which to use.

Open questions

• Other Panel variants for the card: not needed yet (Erika, 2026-10-22).
• Which project needs it, and how soon (docs/PRIORITY.md)?