Stage Indicator

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

export const meta: CompendiumMeta = {
  id: 26,
  slug: 'stage-indicator',
  name: 'Stage Indicator',
  category: 'maturity-process',
  subcategory: 'indicators',
  pillar: 'de',
  description: 'Four-dot indicator showing where a team sits on the DoCoDeGo maturity ladder (Augmented → Autonomous).',
  spec: `## Intent
Compress the four-stage maturity model into a single instrument-strip readout: dots 1-2-3-4 with the active stage highlighted and labelled.

## Acceptance Criteria
- [ ] Four dots, sequentially numbered
- [ ] Active stage filled in pillar colour; prior stages ticked; future stages hollow
- [ ] Current stage name + audience legible below the strip

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

const stages = [
  { n: 1, name: 'Augmented',     who: 'Any team' },
  { n: 2, name: 'Collaborative', who: 'Growing team' },
  { n: 3, name: 'Orchestrated',  who: 'Multi-agent' },
  { n: 4, name: 'Autonomous',    who: 'Agent systems' },
];
const active = 2;
const current = stages[active - 1];
---

<div class="w-full bg-paper text-ink border-4 border-ink">
  <header class="flex items-baseline justify-between px-3 py-2 border-b-2 border-ink">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">// stage</span>
    <span class="font-mono text-[10px] uppercase tracking-widest">{active} / 4</span>
  </header>
  <div class="p-4">
    <ol class="flex items-center gap-0" aria-label="Maturity stages">
      {stages.map((s, i) => (
        <>
          <li class="relative flex flex-col items-center shrink-0">
            <div
              class:list={[
                'w-9 h-9 border-4 border-ink flex items-center justify-center font-black text-sm',
                s.n === active ? 'bg-de text-black' : s.n < active ? 'bg-ink text-paper' : 'bg-paper text-ink',
              ]}
              aria-current={s.n === active ? 'step' : undefined}
            >{s.n < active ? '✓' : s.n}</div>
          </li>
          {i < stages.length - 1 && (
            <li
              class:list={['h-1.5 flex-1 min-w-2', s.n < active ? 'bg-ink' : 'bg-ink/15']}
              aria-hidden="true"
            ></li>
          )}
        </>
      ))}
    </ol>
    <div class="mt-3 border-t-2 border-ink pt-2 flex items-baseline justify-between gap-2">
      <span class="font-black uppercase text-sm tracking-wide truncate">{current.name}</span>
      <span class="font-mono text-[10px] uppercase tracking-widest opacity-60 shrink-0">{current.who}</span>
    </div>
  </div>
</div>