Re-Spec Trigger

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

export const meta: CompendiumMeta = {
  id: 15,
  slug: 'respec-trigger',
  name: 'Re-Spec Trigger',
  category: 'specs-documents',
  subcategory: 'lifecycle',
  pillar: 'go',
  description: 'A "when to re-spec" decision chip — a checklist of conditions that, if any fire, mean the spec must be re-opened.',
  spec: `## Intent
Re-spec rules are the GO pillar applied to the spec itself: at what point does today\'s truth stop being true? This component renders the trigger conditions as a checklist; any single fired condition flips the chip header from STABLE to RE-SPEC REQUIRED.

## Acceptance Criteria
- [ ] Header chip toggles colour based on any fired trigger
- [ ] At least 4 trigger conditions with state
- [ ] Mono-typography for condition ids
- [ ] Each fired condition visibly distinct
- [ ] Does NOT auto-trigger a re-spec — surfaces the signal only

## Constraints
- Static; could be hydrated
- Theme-aware`,
  tags: ['list', 'badge', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 100, a11y: 'aa', themed: true, animated: false },
};

const triggers = [
  { id: 'RX-01', fired: false, text: 'Acceptance criteria changed upstream' },
  { id: 'RX-02', fired: true,  text: 'p99 latency drift exceeds 20% over 30 days' },
  { id: 'RX-03', fired: false, text: 'New regulatory constraint applies' },
  { id: 'RX-04', fired: false, text: 'Downstream consumer added a hard dependency' },
  { id: 'RX-05', fired: true,  text: 'Failure mode FM-01 fired in production' },
];
const anyFired = triggers.some((t) => t.fired);
---

<section class="w-full bg-paper text-black border-4 border-black shadow-nb-sm">
  <header class:list={[
    'px-3 py-2 border-b-2 border-black flex items-baseline justify-between font-mono text-[10px] uppercase tracking-widest font-black',
    anyFired ? 'bg-attention text-white' : 'bg-success text-black',
  ]}>
    <span>{anyFired ? 'RE-SPEC REQUIRED' : 'STABLE'}</span>
    <span class="opacity-80">{triggers.filter((t) => t.fired).length}/{triggers.length} TRIGGERS</span>
  </header>
  <ul class="divide-y-2 divide-black">
    {triggers.map((t) => (
      <li class:list={['flex items-center gap-2 px-3 py-1.5 text-[10px] leading-snug', t.fired && 'bg-attention/10']}>
        <span class:list={[
          'inline-flex items-center justify-center w-4 h-4 border-2 border-black shrink-0 font-mono text-[9px] font-black',
          t.fired ? 'bg-attention text-white' : 'bg-paper text-black',
        ]}>{t.fired ? '!' : ''}</span>
        <span class="font-mono opacity-60 shrink-0 w-12">{t.id}</span>
        <span class:list={['flex-1', t.fired && 'font-black']}>{t.text}</span>
      </li>
    ))}
  </ul>
</section>