Above Threshold Badge

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

export const meta: CompendiumMeta = {
  id: 725,
  slug: 'above-threshold-badge',
  name: 'Above Threshold Badge',
  category: 'metrics-telemetry',
  subcategory: 'badges-and-deltas',
  pillar: 'de',
  description: 'Single-state "PASSING" stamp for when a metric is above its acceptance gate — the green light of governance.',
  spec: `## Intent
Where the threshold badge flips, this single-state badge is the explicit "yes, this passed" — used inline next to a gate name so the verdict is unmissable.

## Acceptance Criteria
- [ ] Bold uppercase "PASSING" wordmark
- [ ] Success token background, ink text
- [ ] Upward arrow paired with the verdict
- [ ] Negative: does NOT show a failing state

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

const value = 84;
const threshold = 60;
---

<div data-this-component class="w-full flex items-center justify-center p-4 overflow-hidden">
  <div class="inline-flex items-stretch border-4 border-black bg-success text-black shadow-[6px_6px_0_0_var(--color-ink)]">
    <div class="px-3 py-2 border-e-4 border-black flex items-center">
      <span class="font-black text-2xl leading-none">↑</span>
    </div>
    <div class="px-3 py-2 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">passing · {value}/{threshold}</span>
    </div>
  </div>
</div>