Threshold Badge

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

export const meta: CompendiumMeta = {
  id: 60,
  slug: 'threshold-badge',
  name: 'Threshold Badge',
  category: 'metrics-telemetry',
  subcategory: 'badges-and-deltas',
  pillar: 'de',
  description: 'A chunky "X / Y · ABOVE THRESHOLD" badge that shifts colour when the metric crosses its gate.',
  spec: `## Intent
Show a metric's status against a numeric gate as a single, glanceable badge. Colour flips between success and danger across the threshold.

## Acceptance Criteria
- [ ] Big value : threshold pair, mono numerals
- [ ] Status word (ABOVE / BELOW) with arrow
- [ ] Background flips by status
- [ ] Negative: does NOT render multiple states at once

## Constraints
- Theme-aware via tokens
- Pure markup, no JS`,
  tags: ['badge', 'stamp', 'real-content'],
  status: 'stable',
  health: { ics: 84, a11y: 'aa', themed: true, animated: false },
};

const value = 82;
const threshold = 60;
const above = value >= threshold;
const bg = above ? 'bg-success' : 'bg-danger';
const status = above ? 'ABOVE THRESHOLD' : 'BELOW THRESHOLD';
const arrow = above ? '↑' : '↓';
const inkClass = above ? 'text-black' : 'text-white';
---

<div class="w-full flex items-center justify-center p-4">
  <div class={`inline-flex items-stretch border-4 border-black shadow-[6px_6px_0_0_var(--color-ink)] ${bg} ${inkClass}`}>
    <div class="px-4 py-3 border-e-4 border-black flex items-baseline gap-1">
      <span class="font-black text-4xl tabular-nums leading-none">{value}</span>
      <span class="font-mono text-sm opacity-70">/</span>
      <span class="font-black text-xl tabular-nums opacity-80">{threshold}</span>
    </div>
    <div class="px-4 py-3 flex flex-col justify-center">
      <span class="font-mono text-[9px] uppercase tracking-widest opacity-70">ics gate</span>
      <span class="font-black text-[11px] uppercase tracking-widest mt-0.5 flex items-center gap-1">
        <span class="text-base leading-none">{arrow}</span>{status}
      </span>
    </div>
  </div>
</div>