Summary

Create a <pf-v6-masthead> web component implementing the PatternFly v6 Masthead component.

Application header bar containing logo/branding, navigation toggle, and utility actions.

Prior Art

Requirements

• MUST implement PFv6 visual designs
• MUST provide end-user feature parity with @patternfly/react-core Masthead
• 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

• display prop: inline (logo/toggle side-by-side) vs stack (stacked)
• Sub-elements: MastheadMain, MastheadBrand, MastheadLogo, MastheadContent, MastheadToggle
• Consider named slots for each region: toggle, brand, content
• Nav toggle button: needs aria-label (e.g. "Global navigation"), aria-expanded, aria-controls
• Toggle controls sidebar visibility - coordinate with pf-v6-page isManagedSidebar
• MastheadLogo renders as <a> - slot or href prop

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)