[feat]: Create <pf-v6-about-modal> element #2926

Summary

Create a <pf-v6-about-modal> web component implementing the PatternFly v6 About modal component.

Branded full-screen modal for displaying application version, copyright, and system information.

Prior Art

Notes

• Likely a wrapper/extension of pf-v6-modal with additional styles; explore that route before duplicating modal code
• Do not recreate TextContent/Text components - slot standard HTML tags instead

Requirements

• MUST implement PFv6 visual designs
• MUST provide end-user feature parity with @patternfly/react-core AboutModal
• MAY adjust element API to leverage web platform strengths
• SHOULD maintain CSS custom property theming compatibility
• SHOULD expose useful CSS shadow parts

Element-specific considerations

• Built on native <dialog> / pf-v6-modal via showModal()
• isOpen prop, onClose event
• Named slots: brand (logo image), content (version/info rows), default
• brandImageSrc / brandImageAlt props or brand slot
• productName prop or header slot
• backgroundImageSrc for decorative bg image (CSS custom property preferred)
• Close button with aria-label
• role="dialog", aria-labelledby pointing to product name heading
• Trap focus inside while open (native <dialog> handles this)
• Close on Escape (native <dialog> handles this)
• Content area: version rows as <dl> / <dt>/<dd> pairs recommended

Checklist

Implementation

• API per .claude/ADVICE.md
• CSS uses v6 tokens, logical properties, nesting
• @summary and JSDoc on element class

Demos

• Demos match patternfly.org naming/structure
• CSS custom properties match computed styles from patternfly.org (Chrome MCP)
• Visual parity verified via Chrome MCP

Tests

• Public API covered (attributes, properties, events, slots)
• a11ySnapshot assertions

Reviews

• /review-api passes
• /review-demos passes
• /review-a11y passes
• eslint and stylelint pass

Ship

• Add changeset
• PR targets staging/pfv6 (NOT main)