Validation Coverage Meter

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 483,
  slug: 'validation-coverage-meter',
  name: 'Validation Coverage Meter',
  category: 'maturity-process',
  subcategory: 'instruments',
  pillar: 'de',
  description: 'Half-circle gauge showing the percentage of shipped units covered by human validation.',
  spec: `## Intent
Throughput without coverage is just velocity towards drift. This gauge shows what share of composed units have actually passed human validation — the DE pillar's headline number.

## Acceptance Criteria
- [ ] 180-degree arc filled proportional to coverage percent
- [ ] Bands: danger (under 50), attention (50-79), success (80+)
- [ ] Large numeric percent in the dial
- [ ] Negative: does NOT require JS

## Constraints
- Pure SVG, no runtime
- Theme-aware via tokens`,
  tags: ['svg', 'gauge', 'animated', 'reduced-motion', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 90, a11y: 'aa', themed: true, animated: true },
};

const coverage = 72;
const pct = Math.max(0, Math.min(100, coverage));
const fill = coverage >= 80 ? 'var(--color-success)' : coverage >= 50 ? 'var(--color-attention)' : 'var(--color-danger)';
const band = coverage >= 80 ? 'HEALTHY' : coverage >= 50 ? 'WATCH' : 'CRITICAL';
const r = 90;
const total = Math.PI * r;
const dashOffset = total * (1 - pct / 100);
---

<div data-this-component class="w-full bg-paper text-ink border-4 border-ink p-4 flex flex-col items-center overflow-hidden">
  <svg viewBox="0 0 200 120" class="w-full max-w-[280px] block" role="img" aria-label={`Validation coverage ${pct} percent, ${band}`}>
    <path d="M 10 100 A 90 90 0 0 1 190 100" stroke="var(--color-ink)" stroke-width="14" fill="none" opacity="0.12" />
    <path
      d="M 10 100 A 90 90 0 0 1 190 100"
      stroke={fill}
      stroke-width="14"
      fill="none"
      stroke-dasharray={total}
      stroke-dashoffset={dashOffset}
      style="transition: stroke-dashoffset 800ms cubic-bezier(0.2,0,0.13,1.4)"
    />
    <text x="100" y="86" text-anchor="middle" font-family="Inter, sans-serif" font-weight="900" font-size="38" fill="var(--color-ink)">{pct}%</text>
    <text x="100" y="106" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="var(--color-ink)" opacity="0.6">target 80%</text>
  </svg>
  <div class="mt-1 flex items-baseline gap-2">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">coverage</span>
    <span class="font-black text-[11px] uppercase tracking-widest">{band}</span>
  </div>
</div>