@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -2,6 +2,16 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { StatusDot } from './StatusDot'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp } from '../../../theme/tokens/primitives'
+import { hexToRgb } from '../../../theme/color-utils'
+import { resolveColor } from '../../../theme/resolve-color'
+
+/** The `rgba(r, g, b` prefix getGlowShadow emits for a token colour. */
+function glowRgb(hex: string): string {
+  const { r, g, b } = hexToRgb(hex)!
+  return `rgba(${r}, ${g}, ${b}`
+}
 
 describe('StatusDot', () => {
   it('renders a dot', () => {
@@ -50,6 +60,23 @@ describe('StatusDot', () => {
   })
 
   describe('solid variants', () => {
+    it.each([
+      ['success', 'status-success'],
+      ['warning', 'status-warning'],
+      ['error', 'status-error'],
+      ['neutral', 'text-tertiary'],
+    ] as const)('fills the %s dot from the %s token', (variant, token) => {
+      render(<StatusDot variant={variant} />)
+      expect(screen.getByTestId('status-dot')).toHaveStyle({
+        backgroundColor: resolveColor(token),
+      })
+    })
+
+    it('draws the glyph on a solid fill in text-inverse', () => {
+      render(<StatusDot variant="success" size="md" icon="check" />)
+      expect(screen.getByText('✓')).toHaveStyle({ color: resolveColor('text-inverse') })
+    })
+
     it('renders all solid variant types without error', () => {
       const { rerender } = render(<StatusDot variant="success" />)
       expect(screen.getByTestId('status-dot')).toBeInTheDocument()
@@ -84,6 +111,18 @@ describe('StatusDot', () => {
       expect(screen.getByLabelText('future status')).toBeInTheDocument()
     })
 
+    // The rim is a whole rung above the wash. Asserting both rules out the
+    // flattening that collapses a two-step ring onto one `-subtle`.
+    it.each([
+      ['on-track', 'status-success'],
+      ['deviation', 'status-warning'],
+    ] as const)('washes the %s ring with %s -subtle inside a -muted rim', (variant, role) => {
+      render(<StatusDot variant={variant} />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot).toHaveStyle({ backgroundColor: resolveColor(`${role}-subtle`) })
+      expect(dot.style.borderTopColor).toBe(resolveColor(`${role}-muted`))
+    })
+
     it('renders the future variant with a 1px dashed border', () => {
       render(<StatusDot variant="future" />)
       const dot = screen.getByTestId('status-dot')
@@ -103,19 +142,19 @@ describe('StatusDot', () => {
     it('applies a box-shadow when glow is set on a solid variant', () => {
       render(<StatusDot variant="success" glow />)
       const dot = screen.getByTestId('status-dot')
-      expect(dot.style.boxShadow).toContain('rgba(46,213,115,0.4)')
+      expect(dot.style.boxShadow).toContain(glowRgb(getSemanticColors('dark')['status-success']))
     })
 
     it('applies a box-shadow when glow is set on a ring variant', () => {
       render(<StatusDot variant="on-track" glow />)
       const dot = screen.getByTestId('status-dot')
-      expect(dot.style.boxShadow).toContain('rgba(46,213,115,0.4)')
+      expect(dot.style.boxShadow).toContain(glowRgb(getSemanticColors('dark')['status-success']))
     })
 
     it('applies a gray box-shadow when glow is set on the future variant', () => {
       render(<StatusDot variant="future" glow />)
       const dot = screen.getByTestId('status-dot')
-      expect(dot.style.boxShadow).toContain('rgba(107,114,128,0.4)')
+      expect(dot.style.boxShadow).toContain(glowRgb(greyRamp[500]))
     })
 
     it('does not apply a box-shadow when glow is not set', () => {
@@ -128,7 +167,7 @@ describe('StatusDot', () => {
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(
-        <StatusDot variant="success" size="md" icon="check" label="On track" />,
+        <StatusDot variant="success" size="md" icon="check" label="On track" />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -136,7 +175,7 @@ describe('StatusDot', () => {
 
     it('has no accessibility violations for ring variants', async () => {
       const { container } = render(
-        <StatusDot variant="on-track" size="md" icon="check" label="On track" />,
+        <StatusDot variant="on-track" size="md" icon="check" label="On track" />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()

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

@@ -1,9 +1,11 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { View, type ViewProps, type ViewStyle } from 'react-native'
+import { Typography } from '../Typography'
+import { resolveColor } from '../../../theme/resolve-color'
+import { semanticColorsDark } from '../../../theme/tokens/semantic'
 import { greyRamp } from '../../../theme/tokens/primitives'
-
-const t = getSemanticColors('dark')
+import { alpha } from '../../../utils/colors'
+import { getGlowShadow } from '../../../theme/elevation'
 
 export type StatusDotVariant =
   | 'success'
@@ -25,66 +27,91 @@ export interface StatusDotProps extends ViewProps {
   className?: string
 }
 
-const solidVariantColors: Record<string, string> = {
-  success: t['status-success'],
-  warning: t['status-warning'],
-  error: t['status-error'],
-  neutral: greyRamp[500],
-}
+type SolidVariant = 'success' | 'warning' | 'error' | 'neutral'
 
-const ringVariantStyles: Record<string, Record<string, unknown>> = {
-  'on-track': {
-    backgroundColor: 'rgba(46,213,115,0.15)',
-    borderWidth: 1,
-    borderColor: 'rgba(46,213,115,0.3)',
-  },
-  deviation: {
-    backgroundColor: 'rgba(245,158,11,0.15)',
-    borderWidth: 1,
-    borderColor: 'rgba(245,158,11,0.25)',
-  },
-  future: {
-    backgroundColor: 'rgba(107,114,128,0.1)',
-    borderWidth: 1,
-    borderStyle: 'dashed',
-    borderColor: 'rgba(107,114,128,0.2)',
-  },
-}
+/** Solid variants: a filled dot. `neutral` takes `text-tertiary`, as Indicator's `default` does. */
+const solidFillToken = {
+  success: 'status-success',
+  warning: 'status-warning',
+  error: 'status-error',
+  neutral: 'text-tertiary',
+} as const
+
+/** Ring variants: a `-subtle` wash inside a `-muted` rim, both off the same role. */
+const ringWashToken = {
+  'on-track': { fill: 'status-success-subtle', border: 'status-success-muted' },
+  deviation: { fill: 'status-warning-subtle', border: 'status-warning-muted' },
+} as const
 
-const glowStyles: Record<StatusDotVariant, Record<string, unknown>> = {
-  success: { boxShadow: '0 0 4px rgba(46,213,115,0.4)' },
-  warning: { boxShadow: '0 0 4px rgba(245,158,11,0.4)' },
-  error: { boxShadow: '0 0 4px rgba(239,68,68,0.4)' },
-  neutral: { boxShadow: '0 0 4px rgba(107,114,128,0.4)' },
-  'on-track': { boxShadow: '0 0 4px rgba(46,213,115,0.4)' },
-  deviation: { boxShadow: '0 0 4px rgba(245,158,11,0.4)' },
-  future: { boxShadow: '0 0 4px rgba(107,114,128,0.4)' },
+// The neutral ring has no wash rungs: `-subtle`/`-muted`/`-strong` were published for
+// the seven status and brand roles, and `text-tertiary` is not one of them. Derived
+// from the same ramp step the token resolves to, at the frozen alphas, rather than
+// mixed independently. FINDING for E3: the neutral role needs the wash ladder too.
+const FUTURE_FILL = alpha(greyRamp[500], 0.1)
+const FUTURE_BORDER = alpha(greyRamp[500], 0.2)
+
+/** Glyph colour: dark on a solid fill, the role's own colour inside a ring. */
+const glyphToken = {
+  success: 'text-inverse',
+  warning: 'text-inverse',
+  error: 'text-inverse',
+  neutral: 'text-inverse',
+  'on-track': 'status-success',
+  deviation: 'status-warning',
+  future: 'text-tertiary',
+} as const
+
+// Glow is EMPHASIS, not depth: one shared builder, one token colour per variant.
+// Literal hex (not `resolveColor`) because getGlowShadow does colour maths on it —
+// the same exception Indicator documents.
+const glowColors: Record<StatusDotVariant, string> = {
+  success: semanticColorsDark['status-success'],
+  warning: semanticColorsDark['status-warning'],
+  error: semanticColorsDark['status-error'],
+  neutral: greyRamp[500],
+  'on-track': semanticColorsDark['status-success'],
+  deviation: semanticColorsDark['status-warning'],
+  future: greyRamp[500],
 }
 
+const glowStyles: Record<StatusDotVariant, ViewStyle> = Object.fromEntries(
+  Object.entries(glowColors).map(([variant, color]) => [variant, getGlowShadow(color, 'subtle')])
+) as Record<StatusDotVariant, ViewStyle>
+
 const iconChars: Record<string, string> = {
   check: '\u2713',
   exclamation: '!',
   dash: '\u2014',
 }
 
-/** Color-matched icon colors: dark on solid bg, light on transparent bg */
-const iconColors: Record<StatusDotVariant, string> = {
-  success: '#0A5C52',
-  warning: '#6B4000',
-  error: '#5C1A1A',
-  neutral: greyRamp[200],
-  'on-track': t['status-success'],
-  deviation: t['status-warning'],
-  future: greyRamp[500],
-}
-
 const sizeDimensions = {
   sm: { size: 8, showIcon: false },
   md: { size: 18, showIcon: true },
 }
 
-function isSolidVariant(variant: StatusDotVariant): boolean {
-  return variant in solidVariantColors
+function isSolidVariant(variant: StatusDotVariant): variant is SolidVariant {
+  return variant in solidFillToken
+}
+
+/** The ring variants' wash + rim, resolved per theme. `future` adds the dashed rim. */
+function ringStyle(variant: StatusDotVariant): ViewStyle | undefined {
+  if (variant === 'future') {
+    return {
+      backgroundColor: FUTURE_FILL,
+      borderWidth: 1,
+      borderStyle: 'dashed',
+      borderColor: FUTURE_BORDER,
+    }
+  }
+  if (variant === 'on-track' || variant === 'deviation') {
+    const tokens = ringWashToken[variant]
+    return {
+      backgroundColor: resolveColor(tokens.fill),
+      borderWidth: 1,
+      borderColor: resolveColor(tokens.border),
+    }
+  }
+  return undefined
 }
 
 export function StatusDot({
@@ -98,7 +125,7 @@ export function StatusDot({
 }: StatusDotProps) {
   const config = sizeDimensions[size]
   const solid = isSolidVariant(variant)
-  const ring = ringVariantStyles[variant]
+  const ring = ringStyle(variant)
 
   const glowStyle = glow ? glowStyles[variant] : null
 
@@ -113,8 +140,8 @@ export function StatusDot({
           justifyContent: 'center',
           flexShrink: 0,
         },
-        solid ? { backgroundColor: solidVariantColors[variant] } : undefined,
-        ring ? (ring as Record<string, unknown>) : undefined,
+        solid ? { backgroundColor: resolveColor(solidFillToken[variant]) } : undefined,
+        ring,
         glowStyle ? (glowStyle as Record<string, unknown>) : undefined,
       ]}
       accessibilityRole="image"
@@ -122,17 +149,17 @@ export function StatusDot({
       testID="status-dot"
     >
       {config.showIcon && icon && (
-        <Text
-          style={{
-            fontSize: 11,
-            lineHeight: 11,
-            fontWeight: '900',
-            color: iconColors[variant],
-          }}
+        // The glyph was 11px/900, off the type scale (TOKENS.md §4); `boldLabel` is
+        // the 12px sans label step and `font-black` keeps the original weight.
+        <Typography
+          variant="boldLabel"
+          color="inherit"
+          className="font-black leading-none"
+          style={{ color: resolveColor(glyphToken[variant]) }}
           accessibilityElementsHidden
         >
           {iconChars[icon]}
-        </Text>
+        </Typography>
       )}
     </View>
   )
@@ -146,12 +173,15 @@ export function StatusDot({
         {...props}
       >
         <View accessibilityElementsHidden>{dot}</View>
-        <Text
-          style={{ fontSize: 12, lineHeight: 16, color: greyRamp[400] }}
+        {/* 12px/16 is `caption` at the 4-unit leading step; its colour is `text-secondary`. */}
+        <Typography
+          variant="caption"
+          color="secondary"
+          className="leading-4"
           accessibilityElementsHidden
         >
           {label}
-        </Text>
+        </Typography>
       </View>
     )
   }

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

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

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

@@ -2,10 +2,7 @@ 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')
+import { resolveColor } from '../../../theme/resolve-color'
 
 const cases: Array<{
   status: StatusPillStatus
@@ -30,25 +27,19 @@ describe('StatusPill', () => {
 
   describe('per-status mapping', () => {
     cases.forEach(({ status, token, label }) => {
-      it(`maps ${status} to the ${token} color and default label`, () => {
+      it(`renders the default ${status} label`, () => {
         render(<StatusPill status={status} />)
-        const text = screen.getByTestId('status-pill-label')
-        expect(text).toHaveTextContent(label)
-        expect(text).toHaveStyle({ color: t[token] })
+        expect(screen.getByText(label)).toBeInTheDocument()
       })
 
-      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(`resolves ${status} to the ${token} token`, () => {
+        expect(statusPillColor(status)).toBe(resolveColor(token))
       })
     })
   })
 
   it('exposes the resolved color via statusPillColor', () => {
-    expect(statusPillColor('stop')).toBe(t['status-error'])
+    expect(statusPillColor('stop')).toBe(resolveColor('status-error'))
   })
 
   it('renders a custom label override', () => {

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

@@ -1,11 +1,9 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { alpha } from '../../../utils/colors'
+import { View, type ViewProps } from 'react-native'
+import { resolveColor } from '../../../theme/resolve-color'
+import { Pill, type PillTone } from '../../ui/pill'
 import { StatusDot, type StatusDotVariant } from './StatusDot'
 
-const t = getSemanticColors('dark')
-
 /**
  * Auto-regulation verdict — the human-readable read-once summary of a set's
  * velocity-loss state.
@@ -29,6 +27,12 @@ const statusToken: Record<StatusPillStatus, 'status-success' | 'status-warning'
     stop: 'status-error',
   }
 
+const statusTone: Record<StatusPillStatus, PillTone> = {
+  productive: 'success',
+  threshold: 'warning',
+  stop: 'error',
+}
+
 const statusDotVariant: Record<StatusPillStatus, StatusDotVariant> = {
   productive: 'success',
   threshold: 'warning',
@@ -43,46 +47,31 @@ const defaultLabel: Record<StatusPillStatus, string> = {
 
 /** Resolved semantic color for a verdict status. */
 export function statusPillColor(status: StatusPillStatus): string {
-  return t[statusToken[status]]
+  return resolveColor(statusToken[status])
 }
 
 /**
- * Verdict pill: a glowing status dot + colored verdict text, in a tinted,
- * bordered capsule. Composes {@link StatusDot} for the dot so the glow/color
- * stays consistent with the atom. Tint and border are derived from the same
- * semantic token via `alpha()` — no per-status raw hex.
+ * Verdict pill: a glowing status dot + coloured verdict text in a tinted
+ * capsule. A `Pill` preset — tone, tint and border all come from the pill's
+ * semantic tone, so no per-status colour is computed here.
  */
-export function StatusPill({ status, label, className, style, ...props }: StatusPillProps) {
-  const color = statusPillColor(status)
-  const text = label ?? defaultLabel[status]
-
+export function StatusPill({ status, label, className, ...props }: StatusPillProps) {
   return (
-    <View
+    <Pill
       testID="status-pill"
-      className={className}
-      style={[
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 7,
-          alignSelf: 'flex-start',
-          paddingVertical: 7,
-          paddingHorizontal: 13,
-          borderRadius: 9,
-          backgroundColor: alpha(color, 0.14),
-          borderWidth: 1,
-          borderColor: alpha(color, 0.4),
-        },
-        style,
-      ]}
+      tone={statusTone[status]}
+      size="lg"
+      rounded={false}
+      className={['gap-2 px-3 py-1.5 rounded-lg', className].filter(Boolean).join(' ')}
+      textClassName="font-sans font-extrabold"
+      leading={
+        <View accessibilityElementsHidden>
+          <StatusDot variant={statusDotVariant[status]} glow />
+        </View>
+      }
       {...props}
     >
-      <View accessibilityElementsHidden>
-        <StatusDot variant={statusDotVariant[status]} glow />
-      </View>
-      <Text testID="status-pill-label" style={{ fontSize: 13, fontWeight: '800', color }}>
-        {text}
-      </Text>
-    </View>
+      {label ?? defaultLabel[status]}
+    </Pill>
   )
 }

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

@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { View, Text } from 'react-native'
 import { StrengthTrendChart } from './StrengthTrendChart'
 import type { StrengthTrendDataPoint } from './StrengthTrendChart'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const actual: StrengthTrendDataPoint[] = [
   { date: '2026-01-06', e1rm: 215, sessionLabel: 'Jan 6' },
@@ -32,12 +33,18 @@ const decline: StrengthTrendDataPoint[] = [
 ]
 
 const meta: Meta<typeof StrengthTrendChart> = {
-  title: 'Workout/DataViz/StrengthTrendChart',
+  title: 'Custom/Workout/DataViz/StrengthTrendChart',
   component: StrengthTrendChart,
   tags: ['autodocs'],
   argTypes: {
-    width: { control: { type: 'range', min: 160, max: 480, step: 10 }, description: 'Plot width in px' },
-    height: { control: { type: 'range', min: 100, max: 220, step: 10 }, description: 'Plot height in px (120-160 for compact)' },
+    width: {
+      control: { type: 'range', min: 160, max: 480, step: 10 },
+      description: 'Plot width in px',
+    },
+    height: {
+      control: { type: 'range', min: 100, max: 220, step: 10 },
+      description: 'Plot height in px (120-160 for compact)',
+    },
     unit: { control: 'inline-radio', options: ['lbs', 'kg'], description: 'Display unit' },
     animateOnMount: { control: 'boolean', description: 'Left-to-right draw animation on mount' },
   },
@@ -116,7 +123,7 @@ function InteractiveChart() {
         unit="lbs"
         onPointPress={setSelected}
       />
-      <Text style={{ marginTop: 12, fontSize: 12, color: '#9CA3AF' }}>
+      <Text style={{ marginTop: 12, fontSize: 12, color: greyRamp[400] }}>
         {selected
           ? `Tapped ${selected.sessionLabel ?? selected.date}: ${selected.e1rm} lbs`
           : 'Tap a point on the chart.'}

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

@@ -44,9 +44,7 @@ describe('StrengthTrendChart', () => {
     it('renders the actual line as connecting segments', () => {
       render(<StrengthTrendChart {...baseProps} />)
       // Two segments connect three points.
-      expect(
-        screen.getAllByTestId('strength-trend-chart-actual-segment'),
-      ).toHaveLength(2)
+      expect(screen.getAllByTestId('strength-trend-chart-actual-segment')).toHaveLength(2)
     })
 
     it('renders subtle horizontal gridlines', () => {
@@ -73,26 +71,20 @@ describe('StrengthTrendChart', () => {
   describe('projection and meso boundaries', () => {
     it('renders dashed projection segments when projection is provided', () => {
       render(<StrengthTrendChart {...baseProps} projection={projection} />)
-      expect(
-        screen.getAllByTestId('strength-trend-chart-projection-segment'),
-      ).toHaveLength(1)
+      expect(screen.getAllByTestId('strength-trend-chart-projection-segment')).toHaveLength(1)
     })
 
     it('omits projection segments when none provided', () => {
       render(<StrengthTrendChart {...baseProps} />)
       expect(
-        screen.queryByTestId('strength-trend-chart-projection-segment'),
+        screen.queryByTestId('strength-trend-chart-projection-segment')
       ).not.toBeInTheDocument()
     })
 
     it('renders a boundary marker and axis label per meso boundary', () => {
       render(<StrengthTrendChart {...baseProps} mesoBoundaries={mesoBoundaries} />)
-      expect(
-        screen.getAllByTestId('strength-trend-chart-meso-boundary'),
-      ).toHaveLength(2)
-      expect(
-        screen.getAllByTestId('strength-trend-chart-axis-label'),
-      ).toHaveLength(2)
+      expect(screen.getAllByTestId('strength-trend-chart-meso-boundary')).toHaveLength(2)
+      expect(screen.getAllByTestId('strength-trend-chart-axis-label')).toHaveLength(2)
     })
   })
 
@@ -112,7 +104,7 @@ describe('StrengthTrendChart', () => {
             { date: '2026-03-03', e1rm: 248 },
             { date: '2026-03-17', e1rm: 235 },
           ]}
-        />,
+        />
       )
       const pill = screen.getByTestId('strength-trend-chart-trend-pill')
       expect(pill.textContent?.startsWith('-')).toBe(true)
@@ -128,7 +120,7 @@ describe('StrengthTrendChart', () => {
             { date: '2026-03-20', e1rm: 250 },
           ]}
           mesoBoundaries={[{ date: '2026-03-01', label: 'Peak' }]}
-        />,
+        />
       )
       // Only one point falls in the current meso, so the pill must not report
       // the whole-series jump (+25%) under the "this meso" label.
@@ -142,16 +134,12 @@ describe('StrengthTrendChart', () => {
       const onPointPress = vi.fn()
       render(<StrengthTrendChart {...baseProps} onPointPress={onPointPress} />)
       fireEvent.click(screen.getAllByTestId('strength-trend-chart-point')[1])
-      expect(onPointPress).toHaveBeenCalledWith(
-        expect.objectContaining({ e1rm: 228 }),
-      )
+      expect(onPointPress).toHaveBeenCalledWith(expect.objectContaining({ e1rm: 228 }))
     })
 
     it('shows a tooltip with value and unit after a point is tapped', () => {
       render(<StrengthTrendChart {...baseProps} />)
-      expect(
-        screen.queryByTestId('strength-trend-chart-tooltip'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('strength-trend-chart-tooltip')).not.toBeInTheDocument()
       fireEvent.click(screen.getAllByTestId('strength-trend-chart-point')[2])
       const tooltip = screen.getByTestId('strength-trend-chart-tooltip')
       expect(tooltip).toHaveTextContent('244 lbs')
@@ -161,22 +149,14 @@ describe('StrengthTrendChart', () => {
   describe('empty state', () => {
     it('renders an empty placeholder when there is no data', () => {
       render(<StrengthTrendChart {...baseProps} data={[]} />)
-      expect(
-        screen.getByTestId('strength-trend-chart-empty'),
-      ).toBeInTheDocument()
-      expect(
-        screen.queryByTestId('strength-trend-chart-canvas'),
-      ).not.toBeInTheDocument()
+      expect(screen.getByTestId('strength-trend-chart-empty')).toBeInTheDocument()
+      expect(screen.queryByTestId('strength-trend-chart-canvas')).not.toBeInTheDocument()
     })
 
     it('shows the placeholder when data is empty even if a projection exists', () => {
       render(<StrengthTrendChart {...baseProps} data={[]} projection={projection} />)
-      expect(
-        screen.getByTestId('strength-trend-chart-empty'),
-      ).toBeInTheDocument()
-      expect(
-        screen.queryByTestId('strength-trend-chart-canvas'),
-      ).not.toBeInTheDocument()
+      expect(screen.getByTestId('strength-trend-chart-empty')).toBeInTheDocument()
+      expect(screen.queryByTestId('strength-trend-chart-canvas')).not.toBeInTheDocument()
     })
   })
 
@@ -191,9 +171,7 @@ describe('StrengthTrendChart', () => {
 
     it('labels the empty state accessibly', () => {
       render(<StrengthTrendChart {...baseProps} data={[]} />)
-      expect(
-        screen.getByLabelText('Strength trend chart, no data'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Strength trend chart, no data')).toBeInTheDocument()
     })
 
     it('has no accessibility violations', async () => {
@@ -209,7 +187,7 @@ describe('StrengthTrendChart', () => {
           mesoBoundaries={mesoBoundaries}
           onPointPress={vi.fn()}
           unit="kg"
-        />,
+        />
       )
       expect(await axe(container)).toHaveNoViolations()
     })