Spec Status Pill

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

export const meta: CompendiumMeta = {
  id: 282,
  slug: 'spec-status-pill',
  name: 'Spec Status Pill',
  category: 'specs-documents',
  subcategory: 'atoms',
  pillar: 'do',
  description: 'A four-state lifecycle chip — draft, review, in-progress, implemented — colour-mapped to framework semantics.',
  spec: `## Intent
A spec moves through draft → review → in-progress → implemented. This pill names the current state with a colour that survives both themes and a hard border so it reads as governance, not decoration.

## Acceptance Criteria
- [ ] Shows the active state with a token-driven fill
- [ ] Renders all four states stacked so the legend is visible
- [ ] Active row carries a 4px border, inactive rows are tonal
- [ ] Negative: does NOT use rounded shapes or gradients

## Constraints
- Pure markup, no JS
- Theme-aware via tokens
- Self-contained — no shared imports`,
  tags: ['badge', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 91, a11y: 'aa', themed: true, animated: false },
};

const states = [
  { key: 'draft',         label: 'DRAFT',         bg: 'bg-paper',     ink: 'text-black' },
  { key: 'review',        label: 'REVIEW',        bg: 'bg-attention', ink: 'text-paper' },
  { key: 'in-progress',   label: 'IN-PROGRESS',   bg: 'bg-co',        ink: 'text-black' },
  { key: 'implemented',   label: 'IMPLEMENTED',   bg: 'bg-success',   ink: 'text-black' },
];
const active = 'in-progress';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <p class="font-mono text-[9px] uppercase tracking-widest opacity-60 mb-2">spec lifecycle</p>
  <ul class="space-y-1.5">
    {states.map((s) => (
      <li class:list={[
        'flex items-center justify-between px-2 py-1.5 border-2 border-black font-mono text-[10px] uppercase tracking-widest',
        s.bg,
        s.ink,
        s.key === active ? 'border-4' : 'opacity-50',
      ]}>
        <span class="font-black">{s.label}</span>
        {s.key === active && <span class="font-black">&larr; HERE</span>}
      </li>
    ))}
  </ul>
</div>