Add Switch and Radio atom components

Switch:
- Wraps MUI Switch with FA brand tokens
- Bordered pill track (Figma Style One), brand.500 fill when active
- 4 component tokens: track width/height/borderRadius, thumb size
- Stories include interactive service add-ons demo

Radio:
- Wraps MUI Radio with FA brand tokens
- Brand.500 fill when selected, neutral.400 unchecked
- 2 component tokens: outer size, dot size
- Stories include card selection and payment method patterns

Also:
- Added ColourToggle and Slider to component registry (deferred)
- Updated token registry and session log

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/memory/component-registry.md

@@ -26,6 +26,10 @@ duplicates) and MUST update it after completing one.
 | Divider | planned | horizontal, vertical | | Visual separator |
 | Chip | review | filled, outlined × small, medium × clickable, deletable, selected × default, primary | chip.height/paddingX/fontSize/iconSize/deleteIconSize/iconGap/borderRadius, color.neutral.200-700, color.brand.200-700 | Interactive tag. Wraps MUI Chip with FA tokens. Selected state promotes to brand colour. Filled uses soft tonal bg (like Badge). |
 | Card | done | elevated, outlined × default, compact, none padding × interactive × selected | card.borderRadius/padding/shadow/border/background, color.surface.raised/subtle/warm, color.border.default/brand, shadow.md/lg | Content container. Elevated (shadow) or outlined (border). Interactive adds hover bg fill + shadow lift. Selected adds brand border + warm bg. Three padding presets. |
+| Switch | review | bordered style × checked, unchecked, disabled | switch.track.width/height/borderRadius, switch.thumb.size, color.interactive.*, color.neutral.400 | Toggle for add-ons/options. Wraps MUI Switch. Bordered pill, brand.500 fill when active. From Parsons 1.0 Figma Style One. |
+| Radio | review | checked, unchecked, disabled | radio.size/dotSize, color.interactive.*, color.neutral.400 | Single-select option. Wraps MUI Radio. Brand.500 fill when selected. From Parsons 1.0 Figma. |
+| ColourToggle | planned | inactive, hover, active, locked × single, two-colour × desktop, mobile | | Circular colour swatch picker for products. Custom component. Deferred until product detail organisms. |
+| Slider | planned | single, range × desktop, mobile | | Price range filter. Wraps MUI Slider. Deferred until search/filtering molecules. |
 | Link | planned | default, subtle | | Navigation text |
 
 ## Molecules

docs/memory/session-log.md

@@ -456,6 +456,46 @@ Each entry follows this structure:
 - **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
 
 **Next steps:**
-- User to review Chip in Storybook
+- ~~User to review Chip in Storybook~~ ✓ Approved
+- ~~Consider running /audit or /critique on completed atoms to establish baseline scores~~ ✓ Done
 - Begin PriceCard molecule (depends on Card + Badge + Typography + Button + Chip)
-- Consider running /audit or /critique on completed atoms to establish baseline scores
+
+### Session 2026-03-25k — Audit, P1 fixes, Switch + Radio atoms
+
+**Agent(s):** Claude Opus (via conversation)
+
+**Work completed:**
+- Ran /audit on all 5 completed atoms (Button, Typography, Input, Card, Badge)
+  - Average score: 18/20 (Excellent)
+  - 2 P1 issues identified and fixed, 7 P2s documented, 5 P3s noted
+- Fixed P1: Button loading state now announces to screen readers (aria-busy + visually-hidden text)
+- Fixed P1: Card interactive now has tabIndex={0} and role="button" for keyboard operability
+- Fixed P2: Card Record<string, any> → Theme type for type safety
+- Reviewed Parsons 1.0 Figma "Toggles" board (node 2322:42538) — identified 4 new atoms: Switch, Radio, ColourToggle, Slider
+- Added all 4 to component registry (ColourToggle and Slider deferred)
+- Created switch component tokens (`tokens/component/switch.json`): track width/height/borderRadius, thumb size — 4 tokens
+- Created radio component tokens (`tokens/component/radio.json`): size, dotSize — 2 tokens
+- Updated MUI theme with MuiSwitch overrides: bordered pill track, brand.500 active fill, focus-visible ring
+- Updated MUI theme with MuiRadio overrides: neutral.400 unchecked, brand.500 checked, hover states
+- Created Switch component — thin MUI wrapper with forwardRef
+- Created Radio component — thin MUI wrapper with forwardRef
+- Created Switch stories (4): Default, States, ServiceAddOns (interactive add-on toggle demo), WithLabels
+- Created Radio stories (5): Default, States, RadioGroup, CardSelection (interactive card + radio demo), PaymentMethod
+- Preflight passed all 5 checks
+
+**Decisions made:**
+- Switch implements Figma "Style One" (bordered pill) only — other styles deferred as variants if needed
+- Switch/Radio are ultra-thin wrappers — all styling via MUI theme overrides, no component-level sx
+- ColourToggle and Slider deferred until their consuming organisms are built
+
+**Component status at end of session:**
+- **Done (5):** Button, Typography, Input, Card, Badge
+- **Review (3):** Chip, Switch, Radio
+- **Planned (6 atoms):** IconButton, Icon, Avatar, Divider, ColourToggle, Slider, Link
+- **Planned (5 molecules):** FormField, PriceCard, ServiceOption, SearchBar, StepIndicator
+- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
+
+**Next steps:**
+- User to review Switch and Radio in Storybook
+- Begin PriceCard molecule
+- Address P2 audit issues in a future cleanup pass

docs/memory/token-registry.md

@@ -244,3 +244,23 @@ the correct token for any design property.
 | chip.deleteIconSize.md | 16px | Chip | Medium chip delete icon |
 | chip.iconGap.default | → spacing.1 (4px) | Chip | Icon-to-text gap |
 | chip.borderRadius.default | → borderRadius.full (9999px) | Chip | Pill shape |
+
+### Switch
+
+`tokens/component/switch.json`
+
+| Token path | Value / Reference | Used by | Description |
+|-----------|-----------|---------|-------------|
+| switch.track.width | 44px | Switch | Track width |
+| switch.track.height | 24px | Switch | Track height |
+| switch.track.borderRadius | → borderRadius.full (9999px) | Switch | Pill shape |
+| switch.thumb.size | 18px | Switch | Thumb diameter |
+
+### Radio
+
+`tokens/component/radio.json`
+
+| Token path | Value / Reference | Used by | Description |
+|-----------|-----------|---------|-------------|
+| radio.size.default | 20px | Radio | Outer circle size |
+| radio.dotSize.default | 10px | Radio | Inner selected dot size |