Acceptable Range Pip

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

export const meta: CompendiumMeta = {
  id: 564,
  slug: 'acceptable-range-pip',
  name: 'Acceptable Range Pip',
  category: 'governance-risk',
  subcategory: 'thresholds',
  pillar: 'go',
  description: 'A small inline pip showing where a current value sits inside its acceptable lo–hi range.',
  spec: `## Intent
For dashboards that need a glanceable "is this in range?" indicator inline with text, this pip renders the answer in a few pixels — no chart needed.

## Acceptance Criteria
- [ ] Horizontal track with lo, hi tick marks
- [ ] Dot positioned at current value
- [ ] In-range / out-of-range tone via tokens
- [ ] Compact enough to inline next to a metric name

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

const rows = [
  { name: 'p95 latency',   lo: 100, hi: 300, val: 210, unit: 'ms' },
  { name: 'queue depth',   lo: 0,   hi: 50,  val: 62,  unit: '' },
  { name: 'error rate',    lo: 0,   hi: 2,   val: 0.4, unit: '%' },
];
function pct(lo: number, hi: number, v: number) {
  return Math.max(0, Math.min(100, ((v - lo) / (hi - lo)) * 100));
}
---

<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">Inline range pips</p>

  <ul class="space-y-2">
    {rows.map((r) => {
      const inRange = r.val - r.lo >= 0 && r.hi - r.val >= 0;
      const tone = inRange ? 'bg-success' : 'bg-danger';
      const p = pct(r.lo, r.hi, r.val);
      return (
        <li class="grid grid-cols-[7rem_1fr_3.5rem] items-center gap-2">
          <span class="font-mono text-[10px] uppercase tracking-widest truncate">{r.name}</span>
          <div class="relative h-2 border-2 border-black bg-paper">
            <span class="absolute inset-y-0 start-0 w-0.5 bg-ink opacity-60" aria-hidden="true"></span>
            <span class="absolute inset-y-0 end-0 w-0.5 bg-ink opacity-60" aria-hidden="true"></span>
            <span
              class:list={['absolute -top-1 -bottom-1 w-2 border-2 border-black', tone]}
              style={`left: calc(${p}% - 4px)`}
              aria-hidden="true"
            ></span>
          </div>
          <span class="font-mono text-[10px] tabular-nums text-end">{r.val}{r.unit}</span>
        </li>
      );
    })}
  </ul>

  <p class="mt-3 font-mono text-[9px] uppercase tracking-widest opacity-60 border-t-2 border-black pt-2">
    lo &middot; hi ticks define the acceptable window
  </p>
</div>