test(web): add Vitest+RTL tests for 15 design-system presentational components

Covers Badge, Divider, EmptyState, Numeric, PriceDelta, Signal, Skeleton,
StatusChip, Surface, StatCard, KpiCard, DensityToggle, Footer, MarketIndex,
CompactHeader — rendering, variants, props, a11y attributes, className merging.

All 1139 web tests pass. Zustand persist store mocked for DensityToggle to
avoid jsdom localStorage incompatibility.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/design-system/__tests__/price-delta.spec.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { PriceDelta } from '../price-delta';
+
+describe('PriceDelta', () => {
+  it('renders formatted positive value with default unit %', () => {
+    render(<PriceDelta value={3.14} />);
+    expect(screen.getByText('+3.14%')).toBeInTheDocument();
+  });
+
+  it('renders negative value', () => {
+    render(<PriceDelta value={-2.5} />);
+    expect(screen.getByText('-2.50%')).toBeInTheDocument();
+  });
+
+  it('renders zero value as neutral', () => {
+    render(<PriceDelta value={0} />);
+    // 0 is not > 0 so no "+" prefix
+    expect(screen.getByText('0.00%')).toBeInTheDocument();
+  });
+
+  it('renders with custom unit', () => {
+    render(<PriceDelta value={1.5} unit=" tr" precision={1} />);
+    expect(screen.getByText('+1.5 tr')).toBeInTheDocument();
+  });
+
+  it('hides icon when hideIcon=true', () => {
+    const { container } = render(<PriceDelta value={2} hideIcon />);
+    // With hideIcon, the ArrowUp/Down/Minus svg is not rendered
+    expect(container.querySelector('svg')).toBeNull();
+  });
+
+  it('renders icon svg by default', () => {
+    const { container } = render(<PriceDelta value={2} />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('has data-numeric attribute on root span', () => {
+    render(<PriceDelta data-testid="pd" value={1} />);
+    expect(screen.getByTestId('pd')).toHaveAttribute('data-numeric');
+  });
+
+  it('has font-mono class', () => {
+    render(<PriceDelta data-testid="pd" value={1} />);
+    expect(screen.getByTestId('pd')).toHaveClass('font-mono');
+  });
+
+  it('merges custom className', () => {
+    render(<PriceDelta data-testid="pd" value={1} className="extra" />);
+    expect(screen.getByTestId('pd')).toHaveClass('extra');
+  });
+
+  it('renders direction override independently of value sign', () => {
+    // Positive value with forced down direction still shows the down arrow
+    const { container } = render(<PriceDelta value={5} direction="down" />);
+    // Should still render an svg (ArrowDown)
+    expect(container.querySelector('svg')).toBeInTheDocument();
+    // Value text is formatted from the `value` prop
+    expect(screen.getByText('+5.00%')).toBeInTheDocument();
+  });
+});