Add docs for POS > PWC > Switch component (#3659)

Fixes [#21064](shop/issues-retail#21064)

### Background

Add documentation for the Switch component in the Point of Sale surface.

### Solution

This PR adds comprehensive documentation for the `Switch` component in the Point of Sale surface, including:

- Component description and usage guidelines
- Property and event definitions
- Default example showing basic usage with labels
- Event handling example demonstrating how to respond to toggle changes
- Accessibility best practices
- Supporting screenshots for visual reference

The documentation explains that the Switch component creates a toggle control for binary choices that take effect immediately, such as enabling notifications or toggling features.

### 🎩

- To be tophatted only by the App Platform Team, as the tophatting procedures for individual component additions are tricky at the moment

### Checklist

- [x] I have 🎩'd these changes
- [x] I have updated relevant documentation

---

![image.png](https://app.graphite.com/user-attachments/assets/944b18de-ed25-4431-b58e-572b7b8256d2.png)

![image.png](https://app.graphite.com/user-attachments/assets/18c53e93-c257-4183-85a4-db32bf39cabc.png)

![image.png](https://app.graphite.com/user-attachments/assets/a8a987fa-d2c7-46ef-8891-fb70703456e0.png)

Author: cappslock

packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/switch-default.png

@@ -0,0 +1,74 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Switch',
+  description:
+    'The `Switch` component creates a toggle control that allows merchants to turn an option on or off. Use switches for settings that take effect immediately, such as enabling notifications or toggling features.' +
+    "\n\nSwitches provide clear visual feedback about the current state and are ideal for binary choices that don't require confirmation.",
+  thumbnail: 'switch-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'Properties',
+      description:
+        'Configure the following properties on the `Switch` component.',
+      type: 'Switch',
+    },
+    {
+      title: 'Events',
+      description:
+        'The `Switch` component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).',
+      type: 'SwitchEvents',
+    },
+  ],
+  category: 'Polaris web components',
+  subCategory: 'Forms',
+  defaultExample: {
+    image: 'switch-default.png',
+    description:
+      'Toggle settings on or off using a `Switch` component. This example shows a basic switch with a label.',
+    codeblock: {
+      title: 'Create a toggle switch',
+      tabs: [
+        {
+          code: './examples/default.html',
+          language: 'html',
+        },
+      ],
+    },
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'accessibility',
+      title: 'Accessibility',
+      sectionContent: `
+- **Provide descriptive labels:** Use the \`label\` prop to clearly describe what the switch controls.
+- **Use accessibility labels when needed:** If the visual label doesn't provide enough context, use the \`accessibilityLabel\` prop to provide additional information for screen readers.
+- **Indicate disabled state:** When a switch is disabled, ensure the reason is communicated to users through surrounding context or helper text.
+`,
+    },
+  ],
+  related: [],
+  examples: {
+    description: 'Learn how to handle switch change events.',
+    examples: [
+      {
+        description:
+          'Subscribe to the `onChange` event to respond when merchants toggle the switch. This example shows how to handle state changes and capture the checked value in real time, enabling dynamic behavior based on the switch state.',
+        codeblock: {
+          title: 'Handle switch change events',
+          tabs: [
+            {
+              code: './examples/event-handling.html',
+              language: 'html',
+            },
+          ],
+        },
+      },
+    ],
+  },
+};
+
+export default data;

packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/switch-thumbnail.png

@@ -0,0 +1,2 @@
+<s-switch label="Option 1" />
+<s-switch label="Option 2" defaultChecked />

packages/ui-extensions/src/surfaces/point-of-sale/components/Switch/Switch.doc.ts

@@ -0,0 +1,5 @@
+<s-switch
+  label="Enable email notifications"
+  defaultChecked
+  onChange={(event) => console.log('Switch toggled:', event.currentTarget.checked)}
+/>