ICS Dimension Bar

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

export const meta: CompendiumMeta = {
  id: 323,
  slug: 'ics-dimension-bar',
  name: 'ICS Dimension Bar',
  category: 'specs-documents',
  subcategory: 'analysis-and-lint',
  pillar: 'do',
  description: 'A single-axis ICS bar — completeness, testability, unambiguity, or threat coverage — scored 0..100.',
  spec: `## Intent
The radar shows the whole; this bar shows one axis at a time. Useful in tight rows where a polygon would not fit, and for trending one dimension over many specs.

## Acceptance Criteria
- [ ] Dimension label rendered as caps mono
- [ ] Bar fills proportional to score
- [ ] Numeric readout in tabular-nums
- [ ] Negative: does NOT animate by default

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

const dim = { name: 'COMPLETENESS', score: 72, max: 100 };
const pct = Math.round((dim.score / dim.max) * 100);
const token = dim.score >= 75 ? 'success' : dim.score >= 50 ? 'do' : 'attention';
---

<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 mb-2">
    <span class="font-mono text-[10px] uppercase tracking-widest font-black">{dim.name}</span>
    <span class="font-black text-[14px] tabular-nums leading-none">{dim.score}<span class="font-mono text-[9px] opacity-60">/{dim.max}</span></span>
  </div>
  <div class="relative h-4 border-4 border-black bg-paper">
    <div class={`absolute inset-y-0 start-0 bg-${token}`} style={`width: ${pct}%`}></div>
  </div>
  <div class="mt-2 flex justify-between font-mono text-[9px] uppercase tracking-widest opacity-60">
    <span>0</span>
    <span>ICS axis</span>
    <span>100</span>
  </div>
</div>