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__/density-toggle.spec.tsx

@@ -0,0 +1,60 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { DensityToggle } from '../density-toggle';
+
+// Mock the zustand store to avoid localStorage/persist issues in jsdom
+const mockToggleDensity = vi.fn();
+let mockDensity = 'regular';
+
+vi.mock('@/lib/preferences-store', () => ({
+  usePreferencesStore: () => ({
+    get density() {
+      return mockDensity;
+    },
+    toggleDensity: mockToggleDensity,
+  }),
+}));
+
+describe('DensityToggle', () => {
+  beforeEach(() => {
+    mockDensity = 'regular';
+    mockToggleDensity.mockClear();
+  });
+
+  it('renders a button with role="switch"', () => {
+    render(<DensityToggle />);
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
+  it('has aria-checked="false" when density is regular', () => {
+    render(<DensityToggle />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('has aria-checked="true" when density is compact', () => {
+    mockDensity = 'compact';
+    render(<DensityToggle />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('calls toggleDensity on click', () => {
+    render(<DensityToggle />);
+    fireEvent.click(screen.getByRole('switch'));
+    expect(mockToggleDensity).toHaveBeenCalledOnce();
+  });
+
+  it('applies custom aria-label via label prop', () => {
+    render(<DensityToggle label="Toggle view" />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-label', 'Toggle view');
+  });
+
+  it('has a default aria-label', () => {
+    render(<DensityToggle />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-label');
+  });
+
+  it('merges custom className', () => {
+    render(<DensityToggle className="extra" />);
+    expect(screen.getByRole('switch')).toHaveClass('extra');
+  });
+});