Airbnb-style markers: pill variant (price label + nub) and dot variant
(no price). Verified = brand palette, unverified = neutral grey.
Active state inverts colours + scale-up. Pure CSS for map overlay use.
Keyboard accessible with role="button" and focus ring.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- New Checkbox atom wrapping MUI Checkbox (forwardRef, displayName)
- MuiCheckbox theme overrides: warm gold checked, focus ring, disabled muted
- Stories: Default, States, TermsAgreement, Checklist
- PaymentStep: now imports Checkbox from atom instead of MUI directly
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- MuiOutlinedInput: error border and focus ring now use copper
(ColorTextBrand #B0610F) instead of red (ColorFeedbackError #BC2F2F)
- MuiFormHelperText: error text colour overridden to copper
- MuiFormLabel: error state stays neutral text (D024 reinforcement)
- ToggleButtonGroup: error border changed from error.main to copper
palette.error.main remains red for non-form uses (destructive buttons,
system alerts). Form validation is now fully warm/copper end-to-end.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
MUI ToggleButtonGroup wrapper with FA brand tokens. Exclusive
single-select with fieldset/legend a11y, external label, helper/error
text. Selected state uses brand.50 bg + brand border. Supports
optional description text per option. Used in wizard for binary
choices (Myself/Someone else, Yes/No).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Thin MUI Collapse wrapper with unmountOnExit default. Used in the
arrangement wizard to reveal fields after a selection is made
(slide-down animation). Stories include interactive toggle and
wizard field-reveal pattern demo.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Formatting-only changes across all component and story files.
No logic or behaviour changes — only whitespace, line breaks, and trailing commas.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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>
Button:
- Add aria-busy={loading} for assistive technology
- Add visually-hidden "Loading" text for screen readers
- Mark CircularProgress as aria-hidden (decorative)
Card:
- Add tabIndex={0} and role="button" when interactive
- Fix Record<string, any> → Theme type for type safety
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- 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>
- Add lg tokens: height 32px, paddingX 16px, fontSize 14px, iconSize 16px
- Refactor component to use size map instead of ternary
- Update stories: Sizes now shows all three, CompleteMatrix includes large
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Reserve 2px border on all cards (transparent for elevated, coloured
for outlined) so selected state only changes colour, not width
- Add 150ms ease-in-out transitions for border-color and background-color
consistent with Button/Input interactive timing
- Remove borderWidth/borderStyle from selected sx (now handled by theme)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
