Threat Coverage Cell (STRIDE)

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

export const meta: CompendiumMeta = {
  id: 303,
  slug: 'threat-coverage-cell',
  name: 'Threat Coverage Cell (STRIDE)',
  category: 'specs-documents',
  subcategory: 'criteria-and-constraints',
  pillar: 'go',
  description: 'One STRIDE-axis cell — the threat category, the spec\'s coverage state, and the mitigation count.',
  spec: `## Intent
Render a single cell of a STRIDE coverage matrix. The cell encodes whether the threat axis is covered, partially covered, or out-of-scope — the unit of governance accounting.

## Acceptance Criteria
- [ ] STRIDE axis letter dominant
- [ ] Coverage state painted on background (covered / partial / oos)
- [ ] Mitigation count badge in the corner
- [ ] Negative: does NOT show a green "covered" if mitigations = 0
- [ ] Static render — no JS

## Constraints
- Token surfaces only
- Theme-aware`,
  tags: ['badge', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 90, a11y: 'aa', themed: true, animated: false },
};

const cell = { axis: 'T', label: 'Tampering', state: 'covered', mitigations: 4 };
const bg = cell.state === 'covered' ? 'bg-success' : cell.state === 'partial' ? 'bg-do' : 'bg-attention';
const fg = cell.state === 'oos' ? 'text-white' : 'text-black';
---

<div data-this-component class="w-full flex justify-center overflow-hidden p-2">
  <div class={`relative border-4 border-black ${bg} ${fg} w-32 h-32 flex flex-col`}>
    <span class="absolute top-1 end-1 font-mono text-[9px] uppercase tracking-widest font-black bg-ink text-paper px-1.5 py-0.5">{cell.mitigations} MIT</span>
    <div class="flex-1 flex items-center justify-center">
      <span class="font-black text-6xl leading-none">{cell.axis}</span>
    </div>
    <div class="border-t-2 border-black ps-2 pe-2 py-1 flex items-baseline justify-between">
      <span class="font-mono text-[9px] uppercase tracking-widest font-black">{cell.label}</span>
      <span class="font-mono text-[8px] uppercase tracking-widest opacity-80">{cell.state}</span>
    </div>
  </div>
</div>