Summary

Create a <pf-v6-form> web component implementing the PatternFly v6 Form component.

Form layout container providing consistent spacing, horizontal/vertical layout, and field-level organization.

Prior Art

Sub-components

• <pf-v6-form-group> - Groups a label, control, and helper text
• <pf-v6-form-field-group> - Groups related form fields with header

Design

• PF spec

Requirements

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

• isHorizontal: label/control side-by-side vs stacked
• isWidthLimited / maxWidth: constrain form width
• FormGroup: label, isRequired, fieldId, helperText, validated (success/warning/error/default)
• FormSection: titled group of form groups; title slot or prop
• FormFieldGroup: collapsible field group; FormFieldGroupHeader with title, description, actions
• ActionGroup: button row at form bottom
• FormHelperText with icon for validated states
• Native <form> element inside shadow DOM vs light DOM passthrough - evaluate carefully
• noValidate to disable browser built-in validation
• FormLabel: for attribute must pierce shadow DOM - use FACE ElementInternals label association or light DOM labels

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)