In-Progress State Pip

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

export const meta: CompendiumMeta = {
  id: 343,
  slug: 'in-progress-state-pip',
  name: 'In-Progress State Pip',
  category: 'specs-documents',
  subcategory: 'lifecycle',
  pillar: 'do',
  description: 'The IN-PROGRESS pip — spec is approved and currently being constructed by the CO pillar.',
  spec: `## Intent
Approved intent has crossed into execution. The pip names the construction phase so observers know code is moving against this spec right now. Uses the CO blue token to bridge DO → CO.

## Acceptance Criteria
- [ ] Renders a square pip labelled IN-PROGRESS
- [ ] Shows an embedded percentage of acceptance criteria met
- [ ] Uses the CO pillar token for the active accent
- [ ] Negative: does NOT animate by default

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

const pct = 62;
---

<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">// lifecycle pip</p>
  <div class="flex items-stretch gap-3">
    <div class="w-16 h-16 border-4 border-black bg-co text-black flex flex-col items-center justify-center shrink-0">
      <span class="font-black text-[16px] tabular-nums leading-none">{pct}%</span>
      <span class="font-mono text-[8px] uppercase tracking-widest mt-1">DONE</span>
    </div>
    <div class="min-w-0 flex-1 flex flex-col justify-center">
      <div class="font-mono text-[11px] font-black uppercase tracking-widest truncate">IN-PROGRESS</div>
      <div class="font-mono text-[9px] uppercase tracking-widest opacity-60 mt-1">SPEC-343 · 5/8 CRITERIA</div>
      <div class="w-full h-2 border-2 border-black mt-1 bg-paper">
        <div class="h-full bg-co" style={`width: ${pct}%`}></div>
      </div>
    </div>
  </div>
</div>