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

.changeset/swift-teams-notice.md

@@ -0,0 +1,20 @@
+---
+"@patternfly/elements": major
+---
+
+✨ Added `<pf-v6-switch>` replacing `<pf-v5-switch>`. Switch now follows
+PatternFly v6 design specs.
+
+```html
+<pf-v6-switch checked>Wi-Fi</pf-v6-switch>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-switch>` to `<pf-v6-switch>`
+- Removed `data-state="on|off"` label toggling — labels are now static, matching React and WCAG APG switch pattern
+- CSS custom properties renamed from `--pf-v5-c-switch--*` to `--pf-v6-c-switch--*`
+- Fixed form association (FACE): submits `"on"` when checked, reverts on form reset
+- ✨ Added cancelable `change` event: call `preventDefault()` to reject a toggle
+- ✨ Added external `<label for="id">` support
+- ✨ Added `reversed` attribute for reversed label/toggle layout

docs/framework-integration/react.md

@@ -130,7 +130,7 @@ tags:
 
   import { Button } from "@patternfly/elements/react/pf-v5-button/pf-v5-button.js";
   import { Card } from "@patternfly/elements/react/pf-v5-card/pf-v5-card.js";
-  import { Switch } from "@patternfly/elements/react/pf-v5-switch/pf-v5-switch.js";
+  import { Switch } from "@patternfly/elements/react/pf-v6-switch/pf-v6-switch.js";
   import { Popover } from "@patternfly/elements/react/pf-v5-popover/pf-v5-popover.js";
   import { Tooltip } from "@patternfly/elements/react/pf-v5-tooltip/pf-v5-tooltip.js";
 
@@ -160,7 +160,7 @@ tags:
 
   ### Switch
 
-  Now we have a card and a button component, let's add [`pf-v5-switch`][pf-v5-switch] 
+  Now we have a card and a button component, let's add [`pf-v6-switch`][pf-v6-switch] 
   web component in our app. We will enable/disable the decrement button by 
   clicking on the Switch button.
 
@@ -355,7 +355,7 @@ tags:
 [vite]: https://vitejs.dev/guide/#scaffolding-your-first-vite-project
 [pf-v5-button]: https://patternflyelements.org/components/button/
 [pf-v5-card]: https://patternflyelements.org/components/card/
-[pf-v5-switch]: https://patternflyelements.org/components/switch/
+[pf-v6-switch]: https://patternflyelements.org/components/switch/
 [pf-v5-tooltip]: https://patternflyelements.org/components/tooltip/
 [pf-v5-popover]: https://patternflyelements.org/components/popover/
 [inng]: https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363

elements/pf-v5-accordion/demo/bordered.html

@@ -1,7 +1,7 @@
 <article>
   <header>
     <h2>Bordered</h2>
-    <pf-v5-switch id="toggle-size" name="toggle-size"></pf-v5-switch>
+    <pf-v6-switch id="toggle-size" name="toggle-size"></pf-v6-switch>
     <label for="toggle-size" data-state="on">Size: Large</label>
     <label for="toggle-size" data-state="off">Size: Normal</label>
   </header>
@@ -57,7 +57,7 @@ <h3>Item five</h3>
 <script type="module">
   import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 
   const bordered = document.getElementById('bordered-example');
   const toggle = document.getElementById('toggle-size');

elements/pf-v5-accordion/test/pf-accordion.spec.ts

@@ -5,7 +5,7 @@ import { a11ySnapshot, querySnapshot } from '@patternfly/pfe-tools/test/a11y-sna
 
 // Import the element we're testing.
 import { PfV5Accordion, PfV5AccordionPanel, PfV5AccordionHeader } from '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
-import { PfV5Switch } from '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+import { PfV5Switch } from '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
@@ -1357,14 +1357,14 @@ describe('<pf-v5-accordion>', function() {
           <pf-v5-accordion>
             <pf-v5-accordion-header expanded id="header-1-1" data-index="0"></pf-v5-accordion-header>
             <pf-v5-accordion-panel id="panel-1-1" data-index="0">
-              <pf-v5-switch></pf-v5-switch>
+              <pf-v6-switch></pf-v6-switch>
               <input type="checkbox">
             </pf-v5-accordion-panel>
           </pf-v5-accordion>
         `);
       panels = document.querySelectorAll('pf-v5-accordion-panel');
       checkbox = element.querySelector('input')!;
-      pfswitch = element.querySelector('pf-v5-switch')!;
+      pfswitch = element.querySelector('pf-v6-switch')!;
       expect(checkbox).to.be.ok;
       expect(pfswitch).to.be.ok;
       [accordionPanelOne] = panels;

elements/pf-v5-button/demo/form-control.html

@@ -3,39 +3,39 @@ <h2>Nothing disabled</h2>
   <fieldset>
     <pf-v5-button>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset"></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button"></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset"></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button"></pf-v6-switch> </label>
 </form>
 
 <form>
   <h2>fieldset disabled</h2>
   <fieldset disabled>
     <pf-v5-button>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset" checked></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button"></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset" checked></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button"></pf-v6-switch> </label>
 </form>
 
 <form>
   <h2>Button disabled</h2>
   <fieldset>
     <pf-v5-button disabled>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset"></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button" checked></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset"></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button" checked></pf-v6-switch> </label>
 </form>
 
 <form>
   <h2>Both disabled</h2>
   <fieldset disabled>
     <pf-v5-button disabled>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset" checked></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button" checked></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset" checked></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button" checked></pf-v6-switch> </label>
 </form>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
 
   for (const form of document.querySelectorAll('form')) {

elements/pf-v5-card/demo/modifiers.html

@@ -1,21 +1,21 @@
 <section>
   <form id="card-settings">
-    <pf-v5-switch id="flat" data-attribute="flat"></pf-v5-switch>
+    <pf-v6-switch id="flat" data-attribute="flat"></pf-v6-switch>
     <label for="flat">Flat</label>
 
-    <pf-v5-switch id="rounded" data-attribute="rounded"></pf-v5-switch>
+    <pf-v6-switch id="rounded" data-attribute="rounded"></pf-v6-switch>
     <label for="rounded">Rounded</label>
 
-    <pf-v5-switch id="plain" data-attribute="plain"></pf-v5-switch>
+    <pf-v6-switch id="plain" data-attribute="plain"></pf-v6-switch>
     <label for="plain">Plain</label>
 
-    <pf-v5-switch id="full-height" data-attribute="full-height"></pf-v5-switch>
+    <pf-v6-switch id="full-height" data-attribute="full-height"></pf-v6-switch>
     <label for="full-height">Full Height</label>
 
-    <pf-v5-switch id="size-compact" data-attribute="size" data-value="compact"></pf-v5-switch>
+    <pf-v6-switch id="size-compact" data-attribute="size" data-value="compact"></pf-v6-switch>
     <label for="size-compact">Compact</label>
 
-    <pf-v5-switch id="size-large" data-attribute="size" data-value="large"></pf-v5-switch>
+    <pf-v6-switch id="size-large" data-attribute="size" data-value="large"></pf-v6-switch>
     <label for="size-large">Large</label>
   </form>
 
@@ -32,13 +32,13 @@ <h2 slot="header">Lightest card</h2>
 <script type="module">
   import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 
   const form = document.getElementById('card-settings');
   const card = document.querySelector('pf-v5-card');
 
   form.addEventListener('change', async function(event) {
-    await Promise.all(Array.from(document.querySelectorAll('pf-v5-switch'), x => x.updateComplete));
+    await Promise.all(Array.from(document.querySelectorAll('pf-v6-switch'), x => x.updateComplete));
     const { checked } = event.target;
     const { attribute, value } = event.target.dataset;
     switch (attribute) {

elements/pf-v5-dropdown/demo/custom-toggle.html

@@ -3,7 +3,7 @@
     <em>Note:</em> When using a custom toggle, you must slot in a <code>pf-v5-dropdown-menu</code>.
   </small>
   <span id="switch-group">
-    <pf-v5-switch id="disable-all"></pf-v5-switch>
+    <pf-v6-switch id="disable-all"></pf-v6-switch>
     <label for="disable-all"><span data-state="on">Enable</span><span data-state="off">Disable</span> all dropdowns</label>
   </span>
 </p>
@@ -113,7 +113,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-dropdown/pf-v5-dropdown.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   const sw = document.getElementById('disable-all')
   sw.addEventListener('click', function() {
     document.querySelectorAll('main pf-v5-dropdown').forEach(x => x.disabled = sw.checked);

elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html

@@ -2,7 +2,7 @@
   <header>
     <h2>Main title</h2>
 
-    <pf-v5-switch id="is-vertical" checked></pf-v5-switch>
+    <pf-v6-switch id="is-vertical" checked></pf-v6-switch>
     <label for="is-vertical" data-state="on">Vertical</label>
     <label for="is-vertical" data-state="off">Horizontal</label>
   </header>
@@ -142,12 +142,12 @@ <h2 id="heading-5">Heading 5</h2>
 </div>
 
 <script type="module">
-import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 import '@patternfly/elements/pf-v5-jump-links/pf-v5-jump-links.js';
 
 const main = document.getElementById('demo');
 const links = document.querySelector('pf-v5-jump-links');
-const swtch = document.querySelector('pf-v5-switch');
+const swtch = document.querySelector('pf-v6-switch');
 const media = matchMedia('(max-width: 600px)');
 
 function sumHeights(...elements) {
@@ -230,8 +230,8 @@ <h2 id="heading-5">Heading 5</h2>
 }
 
 
-pf-v5-switch + label,
-pf-v5-switch + label + label {
+pf-v6-switch + label,
+pf-v6-switch + label + label {
   margin-inline-start: 12px;
 }
 </style>

elements/pf-v5-progress-stepper/demo/alignment.html

@@ -1,7 +1,7 @@
 <form id="alignment">
   <h2>With alignment</h2>
-  <label><pf-v5-switch name="vertical"></pf-v5-switch> Vertical alignment</label>
-  <label><pf-v5-switch name="center"></pf-v5-switch> Center alignment</label>
+  <label><pf-v6-switch name="vertical"></pf-v6-switch> Vertical alignment</label>
+  <label><pf-v6-switch name="center"></pf-v6-switch> Center alignment</label>
   <pf-v5-progress-stepper name="progress">
     <pf-v5-progress-step description="This is the first thing to happen" variant="success">First Step</pf-v5-progress-step>
     <pf-v5-progress-step description="This is the second thing to happen" variant="info" current>Second Step</pf-v5-progress-step>
@@ -10,7 +10,7 @@ <h2>With alignment</h2>
 </form>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
 
   document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -21,7 +21,7 @@ <h2>With alignment</h2>
 
 <style>
   form,
-  label pf-v5-switch {
+  label pf-v6-switch {
     padding-inline: .5rem;
   }
 

elements/pf-v5-progress-stepper/demo/compact.html

@@ -1,7 +1,7 @@
 <form id="compact">
   <h2>Compact</h2>
-  <label><pf-v5-switch name="vertical"></pf-v5-switch> Vertical alignment</label>
-  <label><pf-v5-switch name="center"></pf-v5-switch> Center alignment</label>
+  <label><pf-v6-switch name="vertical"></pf-v6-switch> Vertical alignment</label>
+  <label><pf-v6-switch name="center"></pf-v6-switch> Center alignment</label>
   <pf-v5-progress-stepper name="progress" compact>
     <pf-v5-progress-step variant="success">First Step</pf-v5-progress-step>
     <pf-v5-progress-step variant="info" current>Second Step</pf-v5-progress-step>
@@ -10,7 +10,7 @@ <h2>Compact</h2>
 </form>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
 
   document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -21,7 +21,7 @@ <h2>Compact</h2>
 
 <style>
   form,
-  label pf-v5-switch {
+  label pf-v6-switch {
     padding-inline: .5rem;
   }
 

elements/pf-v5-progress-stepper/demo/info.html

@@ -9,7 +9,7 @@
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
 
   document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -20,7 +20,7 @@
 
 <style>
   form,
-  label pf-v5-switch {
+  label pf-v6-switch {
     padding-inline: .5rem;
   }