Acceptance Criteria Checklist

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

export const meta: CompendiumMeta = {
  id: 3,
  slug: 'ac-checklist',
  name: 'Acceptance Criteria Checklist',
  category: 'specs-documents',
  subcategory: 'criteria-and-constraints',
  pillar: 'do',
  description: 'A spec\'s acceptance criteria, rendered as a court-filing-style checklist with passed, pending, and negative states.',
  spec: `## Intent
Render the acceptance criteria of a DoCoDeGo spec as a verifiable checklist. Each criterion has one of three states — PASSED, PENDING, or NEGATIVE (a "MUST NOT" clause) — and the visual must communicate which.

## Acceptance Criteria
- [ ] Renders at least 4 criteria with distinct state glyphs
- [ ] Includes a NEGATIVE criterion styled differently from positives
- [ ] Filed-and-dated header (spec id + AC count)
- [ ] Mono typography for criterion identifiers
- [ ] Does not require runtime hydration — pure server render

## Constraints
- No interactivity required; static document feel
- Theme-aware via tokens, no hex literals`,
  tags: ['list', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 100, a11y: 'aa', themed: true, animated: false },
};

const items = [
  { id: 'AC-01', state: 'pass',    text: 'Verified email creates a session' },
  { id: 'AC-02', state: 'pass',    text: 'Unverified email returns 401 within 200ms' },
  { id: 'AC-03', state: 'pending', text: 'Session expires after 24 hours of inactivity' },
  { id: 'AC-04', state: 'neg',     text: 'Does NOT log credentials to any sink' },
  { id: 'AC-05', state: 'pending', text: 'Rate-limit triggers at 10 attempts / minute' },
];
---

<section class="w-full bg-paper text-black border-4 border-black shadow-nb-sm">
  <header class="flex items-baseline justify-between px-3 py-2 border-b-2 border-black bg-ink text-paper">
    <span class="font-mono text-[10px] uppercase tracking-widest">SPEC-014 / AC</span>
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-80">5 CLAUSES</span>
  </header>
  <ul class="divide-y-2 divide-black">
    {items.map((it) => (
      <li class:list={[
        'flex items-start gap-2 px-3 py-2 text-[11px] leading-snug',
        it.state === 'neg' && 'bg-attention text-white',
      ]}>
        <span class:list={[
          'inline-flex items-center justify-center w-4 h-4 mt-0.5 border-2 border-black shrink-0 font-mono text-[9px] font-black text-black',
          it.state === 'pass'    && 'bg-success',
          it.state === 'pending' && 'bg-paper',
          it.state === 'neg'     && 'bg-paper',
        ]}>
          {it.state === 'pass' ? '✓' : it.state === 'neg' ? '✕' : ''}
        </span>
        <span class="font-mono text-[9px] uppercase tracking-widest opacity-70 shrink-0 mt-0.5">{it.id}</span>
        <span class:list={['flex-1', it.state === 'neg' && 'font-black uppercase']}>{it.text}</span>
      </li>
    ))}
  </ul>
  <footer class="px-3 py-1.5 border-t-2 border-black font-mono text-[9px] uppercase tracking-widest opacity-60">FILED 2026-05-21 // @platform</footer>
</section>