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/component-registry.md

@@ -24,7 +24,7 @@ duplicates) and MUST update it after completing one.
 | Icon | planned | various sizes | | Icon wrapper component |
 | Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation |
 | Divider | planned | horizontal, vertical | | Visual separator |
-| Chip | planned | filled, outlined × deletable, clickable | | Tags and filters |
+| 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. |
 | Link | planned | default, subtle | | Navigation text |
 

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

docs/memory/token-registry.md

@@ -225,3 +225,22 @@ the correct token for any design property.
 | badge.iconSize.md | 14px | Badge | Medium badge icon |
 | badge.iconGap.default | → spacing.1 (4px) | Badge | Icon-to-text gap |
 | badge.borderRadius.default | → borderRadius.full (9999px) | Badge | Pill shape |
+
+### Chip
+
+`tokens/component/chip.json`
+
+| Token path | Value / Reference | Used by | Description |
+|-----------|-----------|---------|-------------|
+| chip.height.sm | 28px | Chip | Small chip height |
+| chip.height.md | 32px | Chip | Medium chip height (default) |
+| chip.paddingX.sm | → spacing.2 (8px) | Chip | Small horizontal padding |
+| chip.paddingX.md | → spacing.3 (12px) | Chip | Medium horizontal padding |
+| chip.fontSize.sm | → fontSize.xs (12px) | Chip | Small chip text |
+| chip.fontSize.md | → fontSize.sm (14px) | Chip | Medium chip text |
+| chip.iconSize.sm | 16px | Chip | Small chip leading icon |
+| chip.iconSize.md | 18px | Chip | Medium chip leading icon |
+| chip.deleteIconSize.sm | 14px | Chip | Small chip delete icon |
+| 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 |