Lint Severity Pip

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

export const meta: CompendiumMeta = {
  id: 322,
  slug: 'lint-severity-pip',
  name: 'Lint Severity Pip',
  category: 'specs-documents',
  subcategory: 'analysis-and-lint',
  pillar: 'do',
  description: 'Closed-set severity glyph — BLOCKER / IMPORTANT / NICE — the colour code of every lint finding.',
  spec: `## Intent
Severity is a closed set so dashboards can sort and filter without parsing free text. This pip carries the icon-and-label pair the framework uses everywhere a finding surfaces.

## Acceptance Criteria
- [ ] Three pips rendered side by side, all tiers visible
- [ ] Each tier uses a distinct token (danger / attention / do)
- [ ] Glyph + label legible without hover
- [ ] Negative: does NOT free-form the tier text

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

const tiers = [
  { label: 'BLOCKER',   glyph: '!',  token: 'danger',    ink: 'text-white' },
  { label: 'IMPORTANT', glyph: '*',  token: 'attention', ink: 'text-white' },
  { label: 'NICE',      glyph: '.',  token: 'do',        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">// severity scale</div>
  <div class="flex flex-wrap gap-2">
    {tiers.map((t) => (
      <span class={`inline-flex items-center gap-1.5 px-2 py-1 border-2 border-black bg-${t.token} ${t.ink} font-black text-[10px] uppercase tracking-widest`}>
        <span class="font-mono text-[12px] leading-none">{t.glyph}</span>
        <span>{t.label}</span>
      </span>
    ))}
  </div>
  <p class="mt-3 text-[11px] leading-snug font-medium opacity-80">
    Closed set. Every finding is exactly one tier.
  </p>
</div>