@titan-design/react-ui 0.6.0 → 0.7.0

package/src/components/custom/Workout/SetStrip.test.tsx

@@ -0,0 +1,109 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SetStrip, velocityZoneColor, SET_STRIP_ZONES, type SetStripSet } from './SetStrip'
+
+describe('SetStrip', () => {
+  describe('velocityZoneColor', () => {
+    it('maps velocity ratios to their zone pins', () => {
+      expect(velocityZoneColor(0.4)).toBe(SET_STRIP_ZONES.slow)
+      expect(velocityZoneColor(0.6)).toBe(SET_STRIP_ZONES.moderate)
+      expect(velocityZoneColor(0.85)).toBe(SET_STRIP_ZONES.fast)
+      expect(velocityZoneColor(1.2)).toBe(SET_STRIP_ZONES.fastest)
+    })
+
+    it('uses the real titan ramp pins (not ad-hoc hexes)', () => {
+      expect(SET_STRIP_ZONES.slow).toBe('#D14343') // red 600
+      expect(SET_STRIP_ZONES.moderate).toBe('#FF7900') // orange 400
+      expect(SET_STRIP_ZONES.fast).toBe('#F9B415') // amber 300
+      expect(SET_STRIP_ZONES.fastest).toBe('#2ED573') // green 300
+    })
+  })
+
+  it('renders one bar per set', () => {
+    const sets: SetStripSet[] = [
+      { status: 'done', velocities: [1, 0.9] },
+      { status: 'done', velocities: [0.8] },
+    ]
+    render(<SetStrip sets={sets} />)
+    expect(screen.getAllByTestId('set-strip-set')).toHaveLength(2)
+  })
+
+  describe('set statuses', () => {
+    it('done: one colored fill segment per rep, no empties, no pulse', () => {
+      render(<SetStrip sets={[{ status: 'done', velocities: [1, 0.8, 0.6, 0.4] }]} />)
+      expect(screen.getAllByTestId('set-strip-fill')).toHaveLength(4)
+      expect(screen.queryByTestId('set-strip-empty')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('set-strip-pulse')).not.toBeInTheDocument()
+    })
+
+    it('active: performed reps pulse, the remainder is greyed', () => {
+      render(<SetStrip sets={[{ status: 'active', velocities: [0.9, 0.7, 0.5], planned: 8 }]} />)
+      expect(screen.getAllByTestId('set-strip-pulse')).toHaveLength(3)
+      expect(screen.getAllByTestId('set-strip-empty')).toHaveLength(5)
+    })
+
+    it('todo: a single grey bar, no fills or pulses', () => {
+      render(<SetStrip sets={[{ status: 'todo', planned: 10 }]} />)
+      expect(screen.getAllByTestId('set-strip-empty')).toHaveLength(1)
+      expect(screen.queryByTestId('set-strip-fill')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('set-strip-pulse')).not.toBeInTheDocument()
+    })
+  })
+
+  it('defaults to an 8px height and honors the height prop', () => {
+    const sets: SetStripSet[] = [{ status: 'todo', planned: 3 }]
+    const { rerender } = render(<SetStrip sets={sets} />)
+    expect(screen.getByTestId('set-strip')).toHaveStyle({ height: '8px' })
+    rerender(<SetStrip sets={sets} height={4} />)
+    expect(screen.getByTestId('set-strip')).toHaveStyle({ height: '4px' })
+  })
+
+  it('exposes a set-progress summary label', () => {
+    const sets: SetStripSet[] = [
+      { status: 'done', velocities: [1] },
+      { status: 'active', velocities: [0.9], planned: 3 },
+      { status: 'todo', planned: 3 },
+    ]
+    render(<SetStrip sets={sets} />)
+    expect(
+      screen.getByLabelText('Set progress: 1 done, 1 in progress, 1 upcoming')
+    ).toBeInTheDocument()
+  })
+
+  it('categorises set-type variants in the progress summary', () => {
+    // drop + myo read as done · a started range reads in progress · myo-upcoming reads upcoming
+    const sets: SetStripSet[] = [
+      { status: 'drop', subloads: [[0.8], [0.7]] },
+      { status: 'myo', activation: [0.75], clusters: [[0.6]] },
+      { status: 'range', floor: 15, max: 20, doneVels: [0.9, 0.85] },
+      { status: 'myo-upcoming', activationLen: 12 },
+    ]
+    render(<SetStrip sets={sets} />)
+    expect(
+      screen.getByLabelText('Set progress: 2 done, 1 in progress, 1 upcoming')
+    ).toBeInTheDocument()
+  })
+
+  it('renders one bar per set across mixed set-type variants', () => {
+    const sets: SetStripSet[] = [
+      { status: 'drop', subloads: [[0.8, 0.7], [0.6]] },
+      { status: 'range', floor: 3, max: 5, doneVels: [] },
+    ]
+    render(<SetStrip sets={sets} />)
+    expect(screen.getAllByTestId('set-strip-set')).toHaveLength(2)
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const sets: SetStripSet[] = [
+        { status: 'done', velocities: [1, 0.8] },
+        { status: 'active', velocities: [0.9], planned: 3 },
+        { status: 'todo', planned: 3 },
+      ]
+      const { container } = render(<SetStrip sets={sets} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/Workout/SetStrip.tsx

@@ -0,0 +1,71 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, type ViewProps } from 'react-native'
+import { SetBar, type SetStripSet } from './SetBar'
+
+// Re-exported so the per-set colour vocabulary stays importable from either the
+// molecule (SetStrip) or the atom (SetBar) it now lives in.
+export {
+  SET_STRIP_ZONES,
+  SET_STRIP_VARIABLE_COLOR,
+  velocityZoneColor,
+  SetBar,
+  type SetBarProps,
+} from './SetBar'
+export type { SetStripSet } from './SetBar'
+
+/** Gap between set bars — ~2× the (zero) rep gap, so sets read as discrete units. */
+const SET_STRIP_GAP = 5
+
+/** Collapse a set (flat or set-type) to its glance category for the progress summary. */
+function setCategory(set: SetStripSet): 'done' | 'active' | 'upcoming' {
+  switch (set.status) {
+    case 'done':
+    case 'drop':
+    case 'myo':
+      return 'done'
+    case 'active':
+      return 'active'
+    case 'range':
+      return set.doneVels.length > 0 ? 'active' : 'upcoming'
+    case 'todo':
+    case 'myo-upcoming':
+      return 'upcoming'
+  }
+}
+
+function describeSets(sets: SetStripSet[]): string {
+  const done = sets.filter((s) => setCategory(s) === 'done').length
+  const active = sets.filter((s) => setCategory(s) === 'active').length
+  const upcoming = sets.filter((s) => setCategory(s) === 'upcoming').length
+  return `Set progress: ${done} done, ${active} in progress, ${upcoming} upcoming`
+}
+
+export interface SetStripProps extends ViewProps {
+  /** Per-set performance data, in set order. */
+  sets: SetStripSet[]
+  /** Bar height in px. Default 8. */
+  height?: number
+  className?: string
+}
+
+/**
+ * The per-set segmented performance strip: one continuous {@link SetBar} per set
+ * (rep intensities as butted color segments, no rep gaps), sets separated by a
+ * fixed gap. Fills its container width. Colors are the real titan ramp pins.
+ */
+export function SetStrip({ sets, height = 8, className, ...props }: SetStripProps) {
+  return (
+    <View
+      className={className}
+      style={{ flexDirection: 'row', width: '100%', height, gap: SET_STRIP_GAP }}
+      accessibilityRole="image"
+      accessibilityLabel={describeSets(sets)}
+      testID="set-strip"
+      {...props}
+    >
+      {sets.map((set, i) => (
+        <SetBar key={i} set={set} height={height} />
+      ))}
+    </View>
+  )
+}

package/src/components/custom/Workout/SetTableHeader.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { SetTableHeader } from './SetTableHeader'
+
+/**
+ * 🚧 WIP / placeholder — `SetTableHeader` (exported as `SetTableHeader`; the generic
+ * `TableHeader` name is taken by the DataViz `Table`). The expanded-set-table column
+ * header row (SET · PREV · REPS · LOAD · RPE) whose widths mirror `SetRow`. Extracted
+ * from `ExerciseCard`; the column set / widths are provisional pending the responsive
+ * unification (TD-03.56).
+ */
+const meta: Meta<typeof SetTableHeader> = {
+  title: 'Workout/SetTableHeader',
+  component: SetTableHeader,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Atom.** The expanded-set-table column header row; per-column widths mirror ' +
+          '[SetRow](?path=/docs/workout-setrow--docs) so headers align over the rows. ' +
+          'Used-by ↑ [ExerciseCard](?path=/docs/workout-exercisecard--docs) (expanded), which ' +
+          'renders it with `showPrevious={false}`. ' +
+          'Column set / widths provisional pending TD-03.56 responsive unification.',
+      },
+    },
+  },
+  argTypes: {
+    unit: { control: 'select', options: ['lbs', 'kg'] },
+    showPrevious: { control: 'boolean' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 320, backgroundColor: '#131313' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof SetTableHeader>
+
+export const Lbs: Story = {
+  args: { unit: 'lbs' },
+}
+
+export const Kg: Story = {
+  args: { unit: 'kg' },
+  parameters: {
+    docs: { description: { story: 'The weight column reflects the `kg` unit.' } },
+  },
+}
+
+export const NoPrevious: Story = {
+  args: { unit: 'lbs', showPrevious: false },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'PREV dropped for rail density (`showPrevious={false}`); the column blanks to a flex ' +
+          'spacer so REPS/LOAD/RPE hold their positions. Pair with `SetRow`’s `showPrevious`.',
+      },
+    },
+  },
+}

package/src/components/custom/Workout/SetTableHeader.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SetTableHeader } from './SetTableHeader'
+
+describe('SetTableHeader', () => {
+  it('renders the five column labels with the lbs weight column by default', () => {
+    render(<SetTableHeader />)
+    const header = screen.getByTestId('table-header')
+    expect(header).toHaveTextContent('SET')
+    expect(header).toHaveTextContent('PREV')
+    expect(header).toHaveTextContent('REPS')
+    expect(header).toHaveTextContent('LBS')
+    expect(header).toHaveTextContent('RPE')
+  })
+
+  it('drops the PREV column when showPrevious is false', () => {
+    render(<SetTableHeader showPrevious={false} />)
+    const header = screen.getByTestId('table-header')
+    expect(header).not.toHaveTextContent('PREV')
+    // the other columns remain
+    expect(header).toHaveTextContent('SET')
+    expect(header).toHaveTextContent('REPS')
+    expect(header).toHaveTextContent('RPE')
+  })
+
+  it('shows the KG weight column when unit is kg', () => {
+    render(<SetTableHeader unit="kg" />)
+    const header = screen.getByTestId('table-header')
+    expect(header).toHaveTextContent('KG')
+    expect(header).not.toHaveTextContent('LBS')
+  })
+
+  it('honors a custom testID so a host card can keep its own', () => {
+    render(<SetTableHeader testID="exercise-card-column-headers" />)
+    expect(screen.getByTestId('exercise-card-column-headers')).toBeInTheDocument()
+    expect(screen.queryByTestId('table-header')).not.toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<SetTableHeader />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/Workout/SetTableHeader.tsx

@@ -0,0 +1,88 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text } from 'react-native'
+
+// One header column: its label and its fixed width (PREV is the lone flex column,
+// `undefined`). Order + widths mirror SetRow's cells so headers align over rows.
+type Column = { label: string; width: number | undefined }
+
+export interface SetTableHeaderProps {
+  /** Weight-column label: LBS / KG. Default lbs. */
+  unit?: 'lbs' | 'kg'
+  /** Show the PREV (previous-best) column. Default true; false drops it for rail density. */
+  showPrevious?: boolean
+  /** Overridable so a host card can keep its own testID. Default "table-header". */
+  testID?: string
+}
+
+// The previous-best column is the lone flex column (`undefined` width). When hidden
+// it is dropped entirely (not blanked to a spacer) and the four fixed columns
+// distribute across the full strip width via `justifyContent: space-between`.
+const PREV_COLUMN: Column = { label: 'PREV', width: undefined }
+
+/** Columns in order, with the weight column reflecting `unit`; PREV dropped when hidden. */
+function buildColumns(unit: 'lbs' | 'kg', showPrevious: boolean): Column[] {
+  return [
+    { label: 'SET', width: 36 },
+    ...(showPrevious ? [PREV_COLUMN] : []),
+    { label: 'REPS', width: 44 },
+    { label: unit.toUpperCase(), width: 56 },
+    { label: 'RPE', width: 36 },
+  ]
+}
+
+/**
+ * The expanded-set-table column-header row: SET · PREV · REPS · LOAD · RPE, with
+ * the weight column reflecting `unit`. `showPrevious={false}` drops PREV (rail
+ * density). Its per-column widths mirror {@link SetRow} so headers align over the
+ * rows. Extracted from {@link ExerciseCard}'s expanded state for reuse.
+ */
+export function SetTableHeader({
+  unit = 'lbs',
+  showPrevious = true,
+  testID = 'table-header',
+}: SetTableHeaderProps) {
+  const columns = buildColumns(unit, showPrevious)
+
+  return (
+    <View
+      className="flex-row"
+      style={{
+        paddingVertical: 8,
+        paddingHorizontal: 8,
+        paddingBottom: 4,
+        ...(showPrevious ? {} : { justifyContent: 'space-between' }),
+      }}
+      testID={testID}
+    >
+      {columns.map(({ label, width }) => {
+        const isFlex = width === undefined
+
+        return (
+          <View
+            key={label}
+            style={{
+              ...(isFlex ? { minWidth: 44 } : { width, flexShrink: 1 }),
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 8,
+            }}
+            {...(isFlex ? { className: 'flex-1' } : {})}
+          >
+            <Text
+              className="text-text-tertiary"
+              style={{
+                fontSize: 10,
+                fontWeight: '600',
+                fontFamily: 'Inter, sans-serif',
+                textTransform: 'uppercase',
+                letterSpacing: 0.8,
+              }}
+            >
+              {label}
+            </Text>
+          </View>
+        )
+      })}
+    </View>
+  )
+}

package/src/components/custom/Workout/SetsRepsLoad.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { SetsRepsLoad } from './SetsRepsLoad'
+
+/**
+ * `SetsRepsLoad` — the `sets × reps @ load` prescription line in the TempoDisplay
+ * visual language (Inter · 600 · letter-spacing 1 · value cells with muted
+ * separators).
+ */
+const meta: Meta<typeof SetsRepsLoad> = {
+  title: 'Workout/SetsRepsLoad',
+  component: SetsRepsLoad,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Atom.** The `sets × reps @ load` prescription line in the TempoDisplay visual ' +
+          'language. Composes [MetricCell](?path=/docs/workout-metriccell--docs) ' +
+          '(shared with [TempoDisplay](?path=/docs/workout-tempodisplay--docs)). ' +
+          'Used-by ↑ [ExerciseHeading](?path=/docs/workout-exerciseheading--docs).',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16, backgroundColor: '#131313' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof SetsRepsLoad>
+
+export const Default: Story = {
+  args: { sets: 5, reps: 8, load: 145, unit: 'lb' },
+}
+
+export const RepRange: Story = {
+  args: { sets: 3, reps: '15-20', load: 40, unit: 'lb' },
+}
+
+export const Kilograms: Story = {
+  args: { sets: 4, reps: 6, load: 84, unit: 'kg' },
+}

package/src/components/custom/Workout/SetsRepsLoad.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SetsRepsLoad } from './SetsRepsLoad'
+
+describe('SetsRepsLoad', () => {
+  it('renders the sets, reps and load values', () => {
+    render(<SetsRepsLoad sets={5} reps={8} load={145} />)
+    const line = screen.getByTestId('sets-reps-load')
+    expect(line).toHaveTextContent('5')
+    expect(line).toHaveTextContent('8')
+    expect(line).toHaveTextContent('145')
+  })
+
+  it('renders the × and @ separators', () => {
+    render(<SetsRepsLoad sets={3} reps={10} load={90} />)
+    const line = screen.getByTestId('sets-reps-load')
+    expect(line).toHaveTextContent('×')
+    expect(line).toHaveTextContent('@')
+  })
+
+  it('defaults the unit label to lb', () => {
+    render(<SetsRepsLoad sets={3} reps={10} load={90} />)
+    expect(screen.getByTestId('sets-reps-load')).toHaveTextContent('lb')
+  })
+
+  it('accepts a custom unit label', () => {
+    render(<SetsRepsLoad sets={3} reps={10} load={40} unit="kg" />)
+    expect(screen.getByTestId('sets-reps-load')).toHaveTextContent('kg')
+  })
+
+  it('supports rep ranges', () => {
+    render(<SetsRepsLoad sets={3} reps="15-20" load={40} />)
+    expect(screen.getByTestId('sets-reps-load')).toHaveTextContent('15-20')
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<SetsRepsLoad sets={5} reps={8} load={145} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/Workout/SetsRepsLoad.tsx

@@ -0,0 +1,52 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { MetricCell } from './metricText'
+
+const t = getSemanticColors('dark')
+
+const TIMES = '×' // × multiplication sign, padded by muted separators
+const AT = '@'
+
+export interface SetsRepsLoadProps extends ViewProps {
+  sets: number
+  reps: number | string
+  load: number
+  /** Displayed load unit label (e.g. "lb", "kg"). */
+  unit?: string
+  className?: string
+}
+
+/**
+ * The `sets × reps @ load` prescription line, in the TempoDisplay visual language
+ * (Inter · 600 · letter-spacing 1 · value cells with muted `×` / `@` separators).
+ * Shares the {@link MetricCell} primitive with TempoDisplay so the two stay in step.
+ */
+export function SetsRepsLoad({
+  sets,
+  reps,
+  load,
+  unit = 'lb',
+  className,
+  ...props
+}: SetsRepsLoadProps) {
+  const value = t['text-primary']
+  const sep = t['text-tertiary']
+
+  return (
+    <View
+      className={className}
+      style={{ flexDirection: 'row', alignItems: 'baseline' }}
+      accessibilityLabel={`${sets} sets of ${reps} reps at ${load} ${unit}`}
+      testID="sets-reps-load"
+      {...props}
+    >
+      <MetricCell color={value}>{sets}</MetricCell>
+      <MetricCell color={sep}>{` ${TIMES} `}</MetricCell>
+      <MetricCell color={value}>{reps}</MetricCell>
+      <MetricCell color={sep}>{` ${AT} `}</MetricCell>
+      <MetricCell color={value}>{load}</MetricCell>
+      <MetricCell color={sep}>{` ${unit}`}</MetricCell>
+    </View>
+  )
+}

package/src/components/custom/Workout/Sparkline.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Sparkline } from './Sparkline'
 
 const meta: Meta<typeof Sparkline> = {
-  title: 'Custom/Workout/Sparkline',
+  title: 'Workout/DataViz/Sparkline',
   component: Sparkline,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/Workout/StatusDot.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { StatusDot } from './StatusDot'
 
 const meta: Meta<typeof StatusDot> = {
-  title: 'Custom/Workout/StatusDot',
+  title: 'Components/Atoms/StatusDot',
   component: StatusDot,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/Workout/StatusPill.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { StatusPill } from './StatusPill'
+
+const meta: Meta<typeof StatusPill> = {
+  title: 'Workout/StatusPill',
+  component: StatusPill,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Auto-regulation verdict pill — a glowing status dot plus colored verdict text in a ' +
+          'tinted capsule. Composes `StatusDot`; tint, border, text, and dot all derive from the ' +
+          'same semantic status token (success / warning / error).',
+      },
+    },
+  },
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['productive', 'threshold', 'stop'],
+      description: 'Auto-regulation verdict',
+    },
+    label: {
+      control: 'text',
+      description: 'Overrides the default verdict text',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof StatusPill>
+
+export const Productive: Story = {
+  args: { status: 'productive' },
+}
+
+export const Threshold: Story = {
+  args: { status: 'threshold' },
+}
+
+export const Stop: Story = {
+  args: { status: 'stop' },
+}
+
+export const WithCustomLabel: Story = {
+  args: { status: 'stop', label: 'Stop · velocity loss 31%' },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={{ gap: 10, alignItems: 'flex-start' }}>
+      <StatusPill status="productive" label="Productive · in the band" />
+      <StatusPill status="threshold" label="Threshold · VL20 reached" />
+      <StatusPill status="stop" label="Stop · velocity loss 31%" />
+    </View>
+  ),
+}

package/src/components/custom/Workout/StatusPill.test.tsx

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { StatusPill, statusPillColor, type StatusPillStatus } from './StatusPill'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+
+const t = getSemanticColors('dark')
+
+const cases: Array<{
+  status: StatusPillStatus
+  token: 'status-success' | 'status-warning' | 'status-error'
+  label: string
+}> = [
+  { status: 'productive', token: 'status-success', label: 'Productive' },
+  { status: 'threshold', token: 'status-warning', label: 'Threshold' },
+  { status: 'stop', token: 'status-error', label: 'Stop' },
+]
+
+describe('StatusPill', () => {
+  it('renders the pill container', () => {
+    render(<StatusPill status="productive" />)
+    expect(screen.getByTestId('status-pill')).toBeInTheDocument()
+  })
+
+  it('composes a status dot', () => {
+    render(<StatusPill status="productive" />)
+    expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+  })
+
+  describe('per-status mapping', () => {
+    cases.forEach(({ status, token, label }) => {
+      it(`maps ${status} to the ${token} color and default label`, () => {
+        render(<StatusPill status={status} />)
+        const text = screen.getByTestId('status-pill-label')
+        expect(text).toHaveTextContent(label)
+        expect(text).toHaveStyle({ color: t[token] })
+      })
+
+      it(`tints the ${status} capsule from the ${token} token`, () => {
+        render(<StatusPill status={status} />)
+        expect(screen.getByTestId('status-pill')).toHaveStyle({
+          backgroundColor: alpha(t[token], 0.14),
+          borderTopColor: alpha(t[token], 0.4),
+        })
+      })
+    })
+  })
+
+  it('exposes the resolved color via statusPillColor', () => {
+    expect(statusPillColor('stop')).toBe(t['status-error'])
+  })
+
+  it('renders a custom label override', () => {
+    render(<StatusPill status="stop" label="Stop · velocity loss 31%" />)
+    expect(screen.getByText('Stop · velocity loss 31%')).toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(<StatusPill status="threshold" />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})