Arrow Delta Pip

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

export const meta: CompendiumMeta = {
  id: 724,
  slug: 'arrow-delta-pip',
  name: 'Arrow Delta Pip',
  category: 'metrics-telemetry',
  subcategory: 'badges-and-deltas',
  pillar: 'de',
  description: 'A pure-glyph up/down/flat pip — direction without magnitude, for dense data tables.',
  spec: `## Intent
In data-dense rows the magnitude of a delta is read separately from the direction. This pip carries only direction, freeing the number column to stay numeric.

## Acceptance Criteria
- [ ] Three discrete states: up / down / flat
- [ ] Square chip, equal width regardless of glyph
- [ ] State colour: success / danger / neutral paper
- [ ] Negative: does NOT include a numeric value

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

const rows = [
  { label: 'COVERAGE',  dir: 'up'   as const },
  { label: 'LATENCY',   dir: 'down' as const },
  { label: 'DRIFT',     dir: 'flat' as const },
  { label: 'INCIDENTS', dir: 'down' as const },
];
const glyph = { up: '▲', down: '▼', flat: '■' } as const;
const bg = { up: 'bg-success text-black', down: 'bg-danger text-white', flat: 'bg-paper text-black' } as const;
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-3 grid grid-cols-2 gap-2 overflow-hidden">
  {rows.map((r) => (
    <div class="flex items-center gap-2 border-2 border-black px-2 py-1.5">
      <span class={`inline-flex items-center justify-center border-2 border-black w-6 h-6 font-black text-[11px] leading-none ${bg[r.dir]}`}>
        {glyph[r.dir]}
      </span>
      <span class="font-mono text-[9px] uppercase tracking-widest opacity-70 truncate">{r.label}</span>
    </div>
  ))}
</div>