feat(switch): port pf-v5-switch to pf-v6-switch element

[zeroedin]

Summary

• Removes <pf-v5-switch>
• Ports <pf-v5-switch> to <pf-v6-switch> web component for PatternFly v6
• Toggle control for on/off settings with role="switch" via ElementInternals
• Supports checked, disabled, reversed, show-check-icon, and accessible-label attributes
• Form-associated custom element (FACE): submits "on" when checked, omitted when unchecked, reverts on form reset
• Cancelable change event: call preventDefault() to reject a toggle and revert state
• Labels via default slot, accessible-label attribute, or external <label for="id">
• Keyboard: Space and Enter toggle the switch
• All CSS uses --pf-v6-c-switch--* design tokens with light-dark() hex fallbacks
• Demos: basic, checked-with-label, disabled, without-label, reversed-layout, nested-in-label, form-association, cancelable-change

Closes #3038

Intentional divergences from React

• label prop replaced by default slot (slotted text) or external <label for="id"> association
• isDisabled/isReversed/isChecked renamed to disabled/reversed/checked (no is- prefix per web component convention)
• hasCheckIcon renamed to show-check-icon (carried over from v5 for clarity)
• aria-label abstracted behind accessible-label attribute per ADVICE.md
• onChange callback replaced by cancelable change DOM event
• defaultChecked not implemented (React-only uncontrolled pattern; web components use the checked attribute directly)
• Form association added (not in React): submits "on" when checked, supports form reset to initial state
• Removed v5 data-state label toggling — React Switch uses a single static label, matching the WCAG APG switch pattern requirement that labels must not change on state change

Test plan

• npm run test passes
• Demos render correctly at localhost:8000 with ?rendering=chromeless
• Visual parity with patternfly.org switch demos
• Switch toggles on click, Space, and Enter
• Disabled switch does not toggle and shows disabled styling
• accessible-label sets accessible name without visible text
• External <label for="id"> associates correctly and toggles switch on click
• Nested <label> wrapping switch toggles on click (Firefox double-fire workaround active)
• Form submit includes "on" value when checked, omits when unchecked
• Form reset reverts switch to initial checked state
• preventDefault() on change event rejects toggle and reverts state
• show-check-icon displays check icon when checked
• reversed attribute reverses label/toggle layout
• Dark mode colors correct when switching color scheme

Assisted-By: Claude

Testing Instructions

Notes to Reviewers

[changeset-bot]

🦋 Changeset detected

Latest commit: c7bcc8f

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

[netlify]

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	9b668ab
😎 Deploy Preview	https://deploy-preview-3154--patternfly-elements.netlify.app/

---

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

[github-actions]

✅ Commitlint tests passed!

More Info

{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "feat(switch): port pf-v5-switch to pf-v6-switch element"
}

[github-actions]

SSR Test Run for fd01121: Report

[github-actions]

SSR Test Run for c766c61: Report

[github-actions]

SSR Test Run for da26acb: Report

[github-actions]

SSR Test Run for 4205205: Report

[github-actions]

SSR Test Run for 6e15247: Report

[github-actions]

SSR Test Run for f22413a: Report

[github-actions]

SSR Test Run for 0135d5a: Report

[github-actions]

SSR Test Run for 9b668ab: Report