Maturity Rung Pip

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

export const meta: CompendiumMeta = {
  id: 424,
  slug: 'maturity-rung-pip',
  name: 'Maturity Rung Pip',
  category: 'pillars-roles',
  subcategory: 'comparison',
  pillar: 'de',
  description: 'Tiny indicator showing a single maturity rung (1 of 4) — the atom of any maturity ladder visualisation.',
  spec: `## Intent
The maturity ladder has four canonical rungs (Augmented…Autonomous). This pip renders one rung — current level filled, prior levels hollow, future levels empty.

## Acceptance Criteria
- [ ] Four bars left-to-right, current rung emphasised
- [ ] Numeric rung label and canonical name shown
- [ ] Filled bars use pillar token, hollow bars keep border
- [ ] Negative: does NOT exceed four rungs

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

const rung = 3;
const names = ['Augmented', 'Collaborative', 'Orchestrated', 'Autonomous'];
const current = names[rung - 1];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-3 overflow-hidden">
  <div class="flex items-baseline justify-between mb-2 gap-2">
    <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 truncate">Maturity Rung</div>
    <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 shrink-0">Level {rung}/4</div>
  </div>
  <div class="grid grid-cols-4 gap-1">
    {[1, 2, 3, 4].map((n) => (
      <div class:list={[
        'h-6 border-2 border-black flex items-center justify-center font-black text-[10px]',
        n < rung ? 'bg-ink text-paper' : n === rung ? 'bg-de text-black' : 'bg-paper text-black opacity-50',
      ]}>{n}</div>
    ))}
  </div>
  <div class="mt-2 flex items-baseline justify-between gap-2">
    <span class="font-mono text-[9px] uppercase tracking-widest opacity-60">now</span>
    <span class="font-black text-[11px] uppercase tracking-widest truncate">{current}</span>
  </div>
</div>