Feature 05 task 2: Core UI primitives (#34)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>

web/src/ui/Chip.test.tsx

@@ -0,0 +1,26 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { Chip } from './Chip.tsx'
+
+describe('Chip', () => {
+  it('has no remove button unless onRemove is given', () => {
+    render(<Chip label="Beef tacos" />)
+    expect(screen.getByText('Beef tacos')).toBeInTheDocument()
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('exposes an accessible "Remove {label}" button that calls onRemove', () => {
+    const onRemove = vi.fn()
+    render(<Chip label="Beef tacos" onRemove={onRemove} />)
+    const remove = screen.getByRole('button', { name: 'Remove Beef tacos' })
+    expect(remove).toHaveAttribute('type', 'button')
+    fireEvent.click(remove)
+    expect(onRemove).toHaveBeenCalledOnce()
+  })
+
+  it('gives the remove button a ≥ 44 px hit area', () => {
+    render(<Chip label="Pizza night" onRemove={() => {}} />)
+    expectMinHitArea(screen.getByRole('button', { name: 'Remove Pizza night' }))
+  })
+})