Score Delta Mini

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

export const meta: CompendiumMeta = {
  id: 722,
  slug: 'score-delta-mini',
  name: 'Score Delta Mini',
  category: 'metrics-telemetry',
  subcategory: 'badges-and-deltas',
  pillar: 'de',
  description: 'A bare ±N indicator chip — the absolute minimum needed to communicate movement on a score.',
  spec: `## Intent
When space is too tight even for an arrow, a single signed integer in a coloured chip is enough to say "things got better" or "things got worse".

## Acceptance Criteria
- [ ] Signed integer with explicit + or − prefix
- [ ] Background flips between success / danger / paper by sign
- [ ] No reference label, no decimal — just the raw delta
- [ ] Negative: does NOT exceed two characters of magnitude in preview

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

const deltas = [4, -3, 0, 12];
const bgFor = (d: number) => d > 0 ? 'bg-success text-black' : d < 0 ? 'bg-danger text-white' : 'bg-paper text-black';
const fmt = (d: number) => d > 0 ? `+${d}` : d < 0 ? `${d}` : '±0';
---

<div data-this-component class="w-full flex items-center justify-center gap-2 p-4 overflow-hidden">
  {deltas.map((d) => (
    <span class={`inline-flex items-center border-4 border-black px-2.5 py-1.5 font-black text-base tabular-nums leading-none ${bgFor(d)}`}>
      {fmt(d)}
    </span>
  ))}
</div>