docs(switch): additional demos showing FACE and cancellable events

Author: zeroedin

elements/pf-v6-switch/demo/cancelable-change.html

@@ -0,0 +1,22 @@
+---
+name: Cancelable change
+description: The change event is cancelable. Calling preventDefault() rejects the toggle and reverts the switch to its previous state.
+---
+<pf-v6-switch id="locked-switch" checked>Locked setting</pf-v6-switch>
+<p id="message">This switch cannot be toggled off.</p>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+
+  const sw = document.getElementById('locked-switch');
+  const message = document.getElementById('message');
+
+  sw.addEventListener('change', function(event) {
+    if (!sw.checked) {
+      event.preventDefault();
+      message.textContent = 'Toggle rejected — this setting is locked on.';
+    } else {
+      message.textContent = 'This switch cannot be toggled off.';
+    }
+  });
+</script>

elements/pf-v6-switch/demo/form-association.html

@@ -0,0 +1,27 @@
+---
+name: Form association
+description: A switch can participate in forms. It submits "on" when checked and is omitted when unchecked. Use the reset button to restore the initial state.
+---
+<form id="settings-form">
+  <pf-v6-switch name="notifications" checked>Notifications</pf-v6-switch>
+  <br><br>
+  <button type="submit">Submit</button>
+  <button type="reset">Reset</button>
+  <pre id="output"></pre>
+</form>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+
+  const form = document.getElementById('settings-form');
+  const output = document.getElementById('output');
+
+  form.addEventListener('submit', function(event) {
+    event.preventDefault();
+    const data = new FormData(form);
+    const entries = [...data.entries()];
+    output.textContent = entries.length
+        ? entries.map(([k, v]) => `${k}=${v}`).join('\n')
+        : '(no values submitted)';
+  });
+</script>