Audit Tag Chip

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

export const meta: CompendiumMeta = {
  id: 542,
  slug: 'audit-tag-chip',
  name: 'Audit Tag Chip',
  category: 'governance-risk',
  subcategory: 'audits-and-logs',
  pillar: 'go',
  description: 'Closed-set tag chips classifying audit entries — sign-off, waiver, kill, auto, override.',
  spec: `## Intent
Audit entries must be filterable by class. This atom enumerates the canonical chip palette so filter UIs and log rows share the same vocabulary.

## Acceptance Criteria
- [ ] Five chip variants rendered side by side
- [ ] Each chip is a uppercase token, 2px black border
- [ ] Closed set — no free-form labels
- [ ] Negative: does NOT use grey for any chip (theme-deaf)

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

const chips = [
  { label: 'SIGN',     token: 'success',   ink: 'text-black' },
  { label: 'WAIVE',    token: 'attention', ink: 'text-black' },
  { label: 'KILL',     token: 'danger',    ink: 'text-white' },
  { label: 'AUTO',     token: 'co',        ink: 'text-black' },
  { label: 'OVERRIDE', token: 'go',        ink: 'text-black' },
];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <div class="font-mono text-[10px] uppercase tracking-widest opacity-60 mb-3">// audit class chips</div>
  <div class="flex flex-wrap gap-2">
    {chips.map((c) => (
      <span class={`inline-block px-2 py-1 border-2 border-black bg-${c.token} ${c.ink} font-black text-[10px] uppercase tracking-widest`}>{c.label}</span>
    ))}
  </div>
  <p class="mt-3 text-[11px] leading-snug font-medium opacity-80">
    Every audit row carries exactly one chip from this closed set.
  </p>
</div>