Custom and net-new: SuggestionCard

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-suggestion-card — An agent's proposed changes in chat, built on Panel, with before/after change rows.
  • Parts and modifiers: .pds-suggestion-card__actions, .pds-suggestion-card__body, .pds-suggestion-card__changes, .pds-suggestion-card__description, .pds-suggestion-card__footer, .pds-suggestion-card__result, .pds-suggestion-card__result-icon, .pds-suggestion-card__title
• .pds-suggestion-change — One before/after row of a suggestion (field label, old and new value).
  • Parts and modifiers: .pds-suggestion-change__field, .pds-suggestion-change__value, .pds-suggestion-change__value--after, .pds-suggestion-change__value--before, .pds-suggestion-change__value-label, .pds-suggestion-change__value-text, .pds-suggestion-change__values

Additions to existing PDS components

None.

Net-new props

All props of SuggestionCardProps and SuggestionChangeProps are new (net-new component).

Custom CSS variables

• --suggestion-card-actions-gap — set on .pds-suggestion-card
• --suggestion-card-gap — set on .pds-suggestion-card

Raw values kept on purpose

None.