PDS proposals
← All proposals

Panel

The PDS v2 Panel (src/components/panels/Panel, branch v2.x) with one addition: the agentic-default, agentic-raised and agentic-sunken variants: each existing surface with the AI gradient as the border.

Extends a PDS componentOpen in Storybook

proposals/Panel/custom.md26 lines · View on GitHub

Custom and net-new: Panel

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

None.

Additions to existing PDS components

  • On .pds-panel: .pds-panel--agentic, .pds-panel--animated

Net-new props

  • isAnimated: shimmer, only with an agentic-* variant.
  • New variant values: agentic-default, agentic-raised, agentic-sunken.

Custom CSS variables

  • --bg-color — set on .pds-panel
  • --border-color — set on .pds-panel

Raw values kept on purpose

None. The @media (--pds-bp-m) custom media was replaced with the literal (min-width: 768px) because this repo has no postcss custom-media plugin; the port restores the token form.