Waiting-On-Signal Chip

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

export const meta: CompendiumMeta = {
  id: 504,
  slug: 'waiting-on-signal-chip',
  name: 'Waiting-On-Signal Chip',
  category: 'maturity-process',
  subcategory: 'flow',
  pillar: 'de',
  description: 'Compact chip naming the specific signal a step is waiting on — explicit dependency, not a vague block.',
  spec: `## Intent
"Blocked" without a named signal is just frustration. This chip resolves the block to a precise event the team can watch, accelerate, or rewrite.

## Acceptance Criteria
- [ ] Chip with "WAITING ON" prefix + signal name
- [ ] Pulsing dot to indicate live subscription
- [ ] Negative: does NOT show an ETA (signal-driven, not scheduled)

## Constraints
- Pure CSS animation
- Reduced-motion friendly
- Theme-aware`,
  tags: ['badge', 'animated', 'reduced-motion', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 87, a11y: 'aa', themed: true, animated: true },
};

const signal = 'validate.passed';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <p class="font-mono text-[9px] uppercase tracking-widest opacity-60 mb-2">// step status</p>
  <span class="inline-flex items-center gap-2 border-4 border-black bg-paper px-2 py-1">
    <span class="relative inline-block w-2.5 h-2.5">
      <span class="absolute inset-0 bg-attention waiting-dot"></span>
    </span>
    <span class="font-mono text-[10px] uppercase tracking-widest font-black opacity-70">waiting on</span>
    <span class="font-mono text-[10px] uppercase tracking-widest font-black">{signal}</span>
  </span>
  <p class="mt-3 text-[11px] leading-snug opacity-80">
    The step is subscribed; arrival of the named signal advances flow.
  </p>
</div>
<style>
  [data-this-component] .waiting-dot { animation: waiting-pulse 1.6s ease-in-out infinite; }
  @keyframes waiting-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-this-component] .waiting-dot { animation: none; }
  }
</style>