Metric Badge Mini

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

export const meta: CompendiumMeta = {
  id: 721,
  slug: 'metric-badge-mini',
  name: 'Metric Badge Mini',
  category: 'metrics-telemetry',
  subcategory: 'badges-and-deltas',
  pillar: 'de',
  description: 'A compact chip pairing a metric label with its single current value — the smallest legible telemetry unit.',
  spec: `## Intent
A telemetry surface needs an atomic building block: one label, one number. This chip is the irreducible badge used everywhere a metric must fit inline.

## Acceptance Criteria
- [ ] Label segment (mono, uppercase) and value segment (black, tabular)
- [ ] Hard 4px border with offset shadow
- [ ] Renders inline-flex, hugging content width
- [ ] Negative: does NOT show a delta or status colour

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

const label = 'ICS';
const value = 82;
---

<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-paper 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-mono text-[10px] uppercase tracking-widest opacity-70">{label}</span>
    </div>
    <div class="px-3 py-2 flex items-baseline">
      <span class="font-black text-2xl tabular-nums leading-none">{value}</span>
    </div>
  </div>
</div>