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--padding-none, .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 (badgeColor, badgeLabel, badgeSize, children, className, headingLevel, isActive, subtitle, title, variant). The three badge* props set a PDS Badge beside the subtitle (shown when badgeLabel is set), typed from the Badge's own props (BadgeProps['color'] and so on), the way SectionMessage has badgeLabel; badgeColor defaults to info-muted and badgeSize to xs. variant is an optional override of the list's.
• MilestoneList: all (children, className, padding, subtitlePosition, variant). padding (none / standard) follows PDS's container padding scale; subtitlePosition is above / below / start, and above / below mirror ProgressBar's messagePosition. The list passes subtitlePosition and variant to its milestones through milestone-list-context.ts.
• Exported value arrays milestoneVariants, milestoneListPaddings and milestoneListSubtitlePositions (the unions are derived from them, as PDS does for tagColors), so stories can list the options.

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.

Story-only classes

For the stories, not part of the component (in milestone-list.stories.css, with the shared story code in milestone-story-shared.tsx and MilestoneVariantsExample.tsx): .milestone-example__canvas (room for the dots), .milestone-example__variants and .milestone-example__label (a card and a flat example one above the other), .milestone-example__slot (the slot placeholder's height) and .milestone-example__summary, .milestone-example__summary-row, .milestone-example__summary-row--total (the summary box, a placeholder for the screen's own body content).

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.