Role Badge

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

export const meta: CompendiumMeta = {
  id: 21,
  slug: 'role-badge',
  name: 'Role Badge',
  category: 'pillars-roles',
  subcategory: 'role-identity',
  pillar: 'co',
  description: 'A single official nameplate: role, holder name and jurisdiction — the credential issued to a named human owner.',
  spec: `## Intent
Render a credential-style role badge that names ONE human holding ONE pillar role within a stated jurisdiction. Echoes ID-card / press-pass conventions.

## Acceptance Criteria
- [ ] Shows role title, holder name, and jurisdiction
- [ ] Includes credential number and issue date
- [ ] Carries pillar-coloured stripe identity
- [ ] Does not reveal PII beyond what the spec authorises

## Constraints
- Theme-aware via tokens
- No hex literals in brand-colour slots
- ≤ 150 lines body`,
  tags: ['badge', 'card', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 80, a11y: 'aa', themed: true, animated: false },
};

const badge = {
  role: 'Architect',
  pillar: 'CO',
  holder: 'M. Okafor',
  handle: '@composer',
  jurisdiction: 'Payments Platform',
  credNo: 'CRED-0291',
  issued: '2026-03-14',
};
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm relative overflow-hidden">
  <div class="bg-co border-b-4 border-black px-3 py-1.5 flex items-center justify-between gap-2">
    <div class="font-mono text-[9px] uppercase tracking-[0.3em] font-black truncate">Credential</div>
    <div class="font-mono text-[9px] uppercase tracking-[0.3em] shrink-0">{badge.credNo}</div>
  </div>

  <div class="grid grid-cols-[auto_1fr] gap-3 p-3 border-b-2 border-black border-dashed">
    <div class="w-14 h-14 border-4 border-black bg-co flex items-center justify-center font-black text-xl shrink-0">{badge.pillar}</div>
    <div class="min-w-0">
      <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60">Holder</div>
      <div class="font-black uppercase text-base leading-tight truncate">{badge.holder}</div>
      <div class="font-mono text-[10px] opacity-70 truncate">{badge.handle}</div>
    </div>
  </div>

  <div class="px-3 py-2 grid grid-cols-2 gap-x-3 gap-y-1 border-b-2 border-black">
    <div class="min-w-0">
      <div class="font-mono text-[8px] uppercase tracking-widest opacity-60">Role</div>
      <div class="font-black uppercase text-sm leading-tight truncate">{badge.role}</div>
    </div>
    <div class="min-w-0">
      <div class="font-mono text-[8px] uppercase tracking-widest opacity-60">Jurisdiction</div>
      <div class="font-black uppercase text-sm leading-tight truncate">{badge.jurisdiction}</div>
    </div>
  </div>

  <div class="px-3 py-1.5 flex items-center justify-between gap-2">
    <div class="font-mono text-[9px] uppercase tracking-widest opacity-60 truncate">Issued · {badge.issued}</div>
    <div class="rotate-[-4deg] text-co font-black text-[9px] tracking-[0.2em] border-2 border-co px-1.5 py-0.5 shrink-0">VALID</div>
  </div>
</article>