Custom and net-new: Milestone

Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file: each net-new class, custom CSS variable and raw value found in the code must appear here in backticks.

Net-new components

• .pds-milestone — one milestone in a Milestone List: a dot on the line, a title, a subtitle and a body, on a Panel card or flat.
  • Parts and modifiers: .pds-milestone--active, .pds-milestone--card, .pds-milestone__body, .pds-milestone__content, .pds-milestone__header, .pds-milestone__marker, .pds-milestone__subtitle, .pds-milestone__title
• .pds-milestone-list — a list of milestones hung off one full-height line, which owns the card setting they follow.
  • Parts and modifiers: .pds-milestone-list--subtitle-start, .pds-milestone-list__entry

Additions to existing PDS components

None. The card is the local Panel, used as it is.

Net-new props

• Milestone: all (children, className, headingLevel, isActive, subtitle, title, variant). variant is an optional override of the list's.
• MilestoneList: all (children, className, subtitlePosition, variant). The list passes variant to its milestones through milestone-list-context.ts.

Custom CSS variables

• --milestone-accent — set on .pds-milestone; the accent (interactive link color), used on the dot only.
• --milestone-dot-edge, --milestone-dot-fill, --milestone-dot-ring, --milestone-dot-shadow — set on .pds-milestone; the dot's look, changed by --active.
• --milestone-edge, --milestone-marker-size, --milestone-pad — set on .pds-milestone; the card's border width and padding (both zero when flat) and the dot's size, read to place the dot.
• --milestone-gap — set on .pds-milestone-list; space between milestones.
• --milestone-inset — set on .pds-milestone-list; space between the line and the cards, read by each dot to sit on the line.
• --milestone-list-line-color — set on .pds-milestone-list; color of the line, also the inactive dot's outline.
• --milestone-meta-width — set on .pds-milestone-list--subtitle-start; width of the subtitle gutter left of the line.

Raw values kept on purpose

The 480px media query in milestone.css and milestone-list.css, below which subtitlePosition='start' falls back to below the title. It is a phone-width cut-off, lower than the 768px of the local button CSS so the layout still shows in a narrow Storybook pane; the port picks the nearest breakpoint token.