Threshold Zone Cell

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

export const meta: CompendiumMeta = {
  id: 562,
  slug: 'threshold-zone-cell',
  name: 'Threshold Zone Cell',
  category: 'governance-risk',
  subcategory: 'thresholds',
  pillar: 'go',
  description: 'A single coloured zone band — the atom of every traffic-light threshold chart.',
  spec: `## Intent
Most threshold displays decompose into stacked or adjacent zones. This atom is the one zone — labelled, bounded, and self-describing — that those displays compose from.

## Acceptance Criteria
- [ ] Solid zone fill via token (success / attention / danger)
- [ ] Range labels at zone start and end
- [ ] Verdict word centred
- [ ] Negative: does NOT animate — static reference

## Constraints
- Pure CSS, no SVG
- Theme-aware`,
  tags: ['real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 87, a11y: 'aa', themed: true, animated: false },
};

const zone = {
  label: 'Attention',
  lo: 40,
  hi: 70,
  tone: 'attention' as const,
};
const ink = zone.tone === 'attention' || zone.tone === 'danger' ? 'text-white' : 'text-black';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <p class="font-mono text-[10px] uppercase tracking-widest opacity-60 mb-2">Single zone · threshold cell</p>

  <div class:list={['border-4 border-black', `bg-${zone.tone}`, ink, 'px-4 py-6 flex flex-col items-center justify-center']}>
    <span class="font-black text-[18px] uppercase tracking-[0.14em] leading-none">{zone.label}</span>
    <span class="font-mono text-[10px] uppercase tracking-widest mt-2 opacity-90">{zone.lo} &rarr; {zone.hi}</span>
  </div>

  <div class="grid grid-cols-3 mt-2 font-mono text-[10px] uppercase tracking-widest">
    <span class="opacity-60">lo {zone.lo}</span>
    <span class="text-center opacity-60">width {zone.hi - zone.lo}</span>
    <span class="text-end opacity-60">hi {zone.hi}</span>
  </div>
</div>