[zeroedin]

Summary

• Ports <pf-v5-card> to <pf-v6-card> and removes pf-v5-card
• Composition via slots (header, title, subtitle, actions, footer, expandable-content) plus one pf-v6-card-body sub-element
• Supports variant="secondary", size="compact|large", plain, glass, and full-height
• Selectable cards are form-associated (FACE): selected submits value (default on) under name and resets with the form
• selection="single" groups radios across shadow roots with roving tabindex and Arrow/Home/End
• Actionable cards render an <a> (href/target) or a shadow <button>; combinable with selectable
• Expandable cards own expanded state; expand, collapse, and change events are cancelable
• Accessible name falls back through accessible-label → title → header heading → header image alt
• All CSS uses --pf-v6-c-card--* design tokens
• 23 demos, 47 unit tests

Closes #2986

Intentional divergences from React

• React sub-components (CardHeader, CardTitle, CardBody, …) replaced by slots and pf-v6-card-body
• is* booleans renamed without the prefix (isSelectable → selectable, …)
• isCompact/isLarge replaced by one exclusive size enum
• selectableActions.variant → selection="single"; isHidden → hide-input
• onExpand/onChange callbacks → cancelable expand/collapse/change events
• hasNoOffset → card-level no-offset; to/isExternalLink → href/target
• selectableActionAriaLabelledby is not supported cross-root; use accessible-label
• component, OUIA props, innerRef, and prop spreading not implemented; slot a heading for document semantics
• Form association added (not in React)

Follow-up tasks

• Replace native <button> demo actions with <pf-v6-button> once it ships (PR feat(button)!: port to <pf-v6-button> #3157)
• Replace the native checkbox/radio control with <pf-v6-checkbox>/<pf-v6-radio> once they ship (PRs feat(checkbox): add pf-checkbox #2608, feat(radio): add pf-radio #2882); hide-input must hide the whole element

Test plan

• npm run test passes
• npm run lint and tspc -b elements pass
• Demos render at localhost:8000 with ?rendering=chromeless
• Visual parity with patternfly.org card demos
• Form submission and reset work for selectable cards; change is cancelable
• Single-selection groups expose one tab stop; Arrow/Home/End move selection
• Actionable cards navigate via href and ignore clicks on nested interactive content
• Expandable cards toggle via click, Enter, and Space; expand/collapse are cancelable
• prefers-reduced-motion disables the transition
• Dark mode colors correct when switching color scheme
• cem health score above 80%

[changeset-bot]

🦋 Changeset detected

Latest commit: 8eeb840

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@patternfly/elements	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

[github-actions]

✅ Commitlint tests passed!

More Info

{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "feat(card)!: add `<pf-v6-card>`"
}

[github-actions]

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	9757406
😎 Deploy Preview	https://deploy-preview-3167--patternfly-elements.netlify.app/

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

SSR Test Run for 9757406: Report