Failure Modes (FMEA)

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

export const meta: CompendiumMeta = {
  id: 5,
  slug: 'failure-modes-list',
  name: 'Failure Modes (FMEA)',
  category: 'specs-documents',
  subcategory: 'analysis-and-lint',
  pillar: 'go',
  description: 'A numbered FMEA-style failure-modes list with 1–5 severity dots — the negative space of every DoCoDeGo spec.',
  spec: `## Intent
List the canonical failure modes of a spec, FMEA-style. Each entry carries an ordinal, a description, and a 1-5 severity rendered as solid dots. The component makes explicit what is most often left implicit: how this thing can break.

## Acceptance Criteria
- [ ] Numbered list (FM-01, FM-02, …)
- [ ] Severity rendered as 5 dots, filled per level
- [ ] At least 4 failure modes
- [ ] Mono-typography ordinals, sans body
- [ ] Does NOT require any client-side state

## Constraints
- Static; no JS
- Theme-aware via tokens`,
  tags: ['list', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 100, a11y: 'aa', themed: true, animated: false },
};

const modes = [
  { id: 'FM-01', sev: 5, text: 'Auth provider outage — no degraded path defined' },
  { id: 'FM-02', sev: 4, text: 'Clock skew on session expiry between regions' },
  { id: 'FM-03', sev: 3, text: 'Race: two concurrent logins from same identity' },
  { id: 'FM-04', sev: 2, text: 'Localised error string leaks server-side enum' },
  { id: 'FM-05', sev: 1, text: 'Stale OAuth state nonce kept in memory > 5 min' },
];
---

<section class="w-full bg-paper text-black border-4 border-black shadow-nb-sm">
  <header class="px-3 py-2 border-b-2 border-black flex items-baseline justify-between">
    <span class="font-mono text-[10px] uppercase tracking-widest font-black">FAILURE MODES &amp; EFFECTS</span>
    <span class="font-mono text-[9px] uppercase tracking-widest opacity-60">FMEA</span>
  </header>
  <ol class="divide-y-2 divide-black">
    {modes.map((m) => (
      <li class="flex items-center gap-2 px-3 py-2">
        <span class="font-mono text-[9px] uppercase tracking-widest opacity-60 shrink-0 w-12">{m.id}</span>
        <span class="flex-1 text-[11px] leading-snug">{m.text}</span>
        <span class="flex items-center gap-0.5 shrink-0" aria-label={`severity ${m.sev}/5`}>
          {[1,2,3,4,5].map((i) => (
            <span class:list={[
              'inline-block w-2 h-2 border border-black',
              i <= m.sev ? (m.sev >= 4 ? 'bg-attention' : m.sev === 3 ? 'bg-do' : 'bg-ink') : 'bg-paper',
            ]} />
          ))}
        </span>
      </li>
    ))}
  </ol>
</section>