Add Chip atom component

- Interactive tag for filtering, selection, and dismissible labels
- Wraps MUI Chip with FA tokens: 12 component tokens (height, padding, font, icon sizes)
- Two variants (filled/outlined) × two colours (default/primary) × two sizes (sm/md)
- Custom `selected` prop promotes to brand colour with warm bg (outlined)
- MUI theme overrides: soft tonal fills, branded outlines, hover/focus states
- 10 Storybook stories including interactive filter and removable tag demos
- Preflight passed all 5 checks

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

docs/memory/session-log.md

@@ -411,6 +411,51 @@ Each entry follows this structure:
 
 **Next steps:**
 - Review Badge in Storybook (large size was added per user request)
-- Build Chip atom (interactive tags — clickable, deletable, with icon support)
+- ~~Build Chip atom (interactive tags — clickable, deletable, with icon support)~~ ✓ Done
 - Consider running /audit or /critique on completed atoms to establish baseline scores
 - Begin PriceCard molecule once Chip is done (depends on Card + Badge + Typography + Button)
+
+### Session 2026-03-25j — Chip atom
+
+**Agent(s):** Claude Opus (via conversation)
+
+**Work completed:**
+- Created chip component tokens (`tokens/component/chip.json`): height, paddingX, fontSize, iconSize, deleteIconSize, iconGap, borderRadius for sm/md — 12 tokens total
+- Rebuilt token pipeline — 12 new chip tokens generated across CSS/JS/JSON outputs
+- Updated MUI theme (`src/theme/index.ts`) with MuiChip overrides:
+  - Pill-shaped borderRadius from token
+  - Two sizes: small (28px), medium (32px)
+  - Filled variant: neutral.200 bg for default, brand.200 bg for primary (soft/tonal, matching Badge and Button soft)
+  - Outlined variant: neutral.300 border for default, brand.400 border for primary
+  - Hover states per variant × colour
+  - Delete icon hover colour change
+  - Focus-visible outline (brand.500, 2px offset)
+- Created Chip component (`src/components/atoms/Chip/Chip.tsx`):
+  - Wraps MUI Chip with React.forwardRef
+  - Custom `selected` prop: promotes colour to primary, outlined selected gets brand border + warm bg
+  - Two variants: filled (tonal, default), outlined (border)
+  - Two colours: default (neutral), primary (brand)
+  - Interactive modes: clickable (via onClick), deletable (via onDelete), both, or static
+  - All MUI ChipProps passed through
+- Created barrel export (`src/components/atoms/Chip/index.ts`)
+- Created 10 Storybook stories: Default, Variants, Sizes, WithIcons, Clickable, Deletable, Selected, FilterChips (interactive toggle demo), RemovableTags (interactive dismiss demo), InServiceOption (realistic card composition), CompleteMatrix
+- Preflight passed all 5 checks
+
+**Decisions made:**
+- Chip uses MUI Chip wrapper (unlike Badge which uses raw Box) — MUI Chip provides built-in keyboard navigation, delete icon, and click handling that would be complex to reimplement
+- Chip defaults to `filled` variant with soft/tonal colours (matching Badge soft and Button soft patterns) — NOT MUI's default opaque fill
+- Only `default` and `primary` colours initially — secondary/error/etc. added when needed (YAGNI)
+- Selected state auto-promotes to primary colour unless colour is explicitly set — mirrors Card's selected brand treatment
+- No new design decision IDs needed — Chip follows established conventions
+
+**Component status at end of session:**
+- **Done (5):** Button, Typography, Input, Card, Badge
+- **Review (1):** Chip
+- **Planned (4 atoms):** IconButton, Icon, Avatar, Divider, Link
+- **Planned (5 molecules):** FormField, PriceCard, ServiceOption, SearchBar, StepIndicator
+- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
+
+**Next steps:**
+- User to review Chip in Storybook
+- Begin PriceCard molecule (depends on Card + Badge + Typography + Button + Chip)
+- Consider running /audit or /critique on completed atoms to establish baseline scores