Threshold Bar

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

export const meta: CompendiumMeta = {
  id: 42,
  slug: 'threshold-bar',
  name: 'Threshold Bar',
  category: 'governance-risk',
  subcategory: 'controls',
  pillar: 'go',
  description: 'A horizontal bar showing a metric pressed against its hard floor (e.g. "62 / 80 ICS minimum").',
  spec: `## Intent
Hard thresholds in DoCoDeGo are non-negotiable: an ICS of 62 doesn't ship just because it's close. This bar makes the gap unambiguous — you are EITHER over the line, or you are not.

## Acceptance Criteria
- [ ] Fill width = current value
- [ ] Threshold marker rendered as a notch
- [ ] Below-threshold values rendered in danger tone
- [ ] Big numeric readout + threshold label

## Constraints
- Theme-aware fill colours
- Threshold position calculated, not hard-pixel`,
  tags: ['gauge', 'chart', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 83, a11y: 'aa', themed: true, animated: false },
};

const value = 62;
const min   = 80;
const max   = 100;
const pass  = value >= min;
const fill  = pass ? 'bg-success' : 'bg-danger';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <div class="flex items-baseline justify-between">
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">ICS · spec quality</p>
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">min {min}</p>
  </div>

  <div class="mt-2 flex items-baseline gap-2">
    <span class="font-black text-4xl leading-none tabular-nums">{value}</span>
    <span class="font-mono text-xs opacity-60">/ {max}</span>
    <span class:list={['ms-auto px-2 py-0.5 border-2 border-black text-white font-black text-[10px] uppercase tracking-widest', fill]}>
      {pass ? 'Pass' : 'Block'}
    </span>
  </div>

  <div class="relative mt-3 h-8 border-4 border-black bg-paper overflow-hidden">
    <div class:list={['absolute inset-y-0 start-0', fill]} style={`width:${value}%`}></div>
    <div class="absolute -top-1 -bottom-1 w-1 bg-ink" style={`left:calc(${min}% - 2px)`} aria-hidden="true"></div>
  </div>
  <div class="relative h-3 mt-1">
    <span class="absolute font-mono text-[9px] uppercase tracking-widest" style={`left:calc(${min}% + 4px)`}>min {min}</span>
  </div>

  {!pass && (
    <p class="mt-2 font-mono text-[10px] uppercase tracking-widest text-danger">
      ↳ {min - value} points short — spec not eligible for composition
    </p>
  )}
</div>