Quarantine Spec Toggle

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

export const meta: CompendiumMeta = {
  id: 524,
  slug: 'quarantine-spec-toggle',
  name: 'Quarantine Spec Toggle',
  category: 'governance-risk',
  subcategory: 'controls',
  pillar: 'go',
  description: 'A chunky toggle that walls a spec off from active composition until review clears it.',
  spec: `## Intent
Spec quarantine takes a single spec out of the active pool. Compositions that referenced it stall on a review gate. The toggle renders both states so operators can predict the effect before flipping.

## Acceptance Criteria
- [ ] Two-position toggle, current state rendered ON
- [ ] Spec id shown alongside
- [ ] Caption explains downstream effect
- [ ] Negative: does NOT delete the spec

## Constraints
- Pure CSS, no JS
- Tokens only, theme-aware`,
  tags: ['form-control', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 90, a11y: 'aa', themed: true, animated: false },
};

const spec = 'SPEC-038';
const on = true;
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <div class="flex items-baseline justify-between">
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">quarantine · spec</p>
    <p class="font-black text-[12px] uppercase tracking-widest">{spec}</p>
  </div>
  <div class="mt-3 flex items-center gap-3">
    <div class="relative w-16 h-8 border-4 border-black" style={`background-color: var(--color-${on ? 'danger' : 'paper'});`}>
      <div class="absolute top-0 bottom-0 w-7 border-4 border-black bg-paper" style={`${on ? 'right: -4px;' : 'left: -4px;'} box-shadow: 2px 2px 0 0 var(--color-ink);`}></div>
    </div>
    <span class="font-black text-[12px] uppercase tracking-widest">{on ? 'Quarantined' : 'Active'}</span>
  </div>
  <p class="mt-3 text-[11px] leading-snug opacity-80">Downstream compositions referencing this spec stall on a review gate until cleared.</p>
</div>