AC Row (GIVEN/WHEN/THEN)

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

export const meta: CompendiumMeta = {
  id: 301,
  slug: 'ac-row',
  name: 'AC Row (GIVEN/WHEN/THEN)',
  category: 'specs-documents',
  subcategory: 'criteria-and-constraints',
  pillar: 'do',
  description: 'A single GIVEN / WHEN / THEN acceptance-criterion row with mono labels and a pass stamp on the right.',
  spec: `## Intent
Render one acceptance criterion in the canonical Gherkin shape so a reviewer can read its preconditions, trigger, and outcome on a single line — the unit of executable intent.

## Acceptance Criteria
- [ ] Three labelled segments (GIVEN, WHEN, THEN) separated by dividers
- [ ] Includes AC identifier on the start, status glyph on the end
- [ ] Negative: does NOT collapse below 11px font in dense table use
- [ ] Mono identifier, prose body
- [ ] Renders without JS

## Constraints
- Pure markup; tokens only
- Theme-aware; reads in light + dark
- Single row, no chrome around the row itself`,
  tags: ['real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 92, a11y: 'aa', themed: true, animated: false },
};

const row = {
  id: 'AC-07',
  given: 'a verified session',
  when: 'the user posts /checkout',
  then: 'tax is computed at the billing-address rate',
};
---

<div data-this-component class="w-full overflow-hidden">
  <div class="border-4 border-black bg-paper text-black p-2 flex items-stretch gap-2 text-[11px] leading-snug">
    <span class="font-mono text-[9px] uppercase tracking-widest opacity-70 self-center shrink-0 ps-1 pe-2 border-e-2 border-black">{row.id}</span>
    <div class="flex-1 flex flex-wrap items-baseline gap-x-2 gap-y-1 min-w-0">
      <span class="font-mono text-[9px] uppercase tracking-widest font-black bg-co text-black px-1.5 py-0.5">GIVEN</span>
      <span class="min-w-0">{row.given}</span>
      <span class="font-mono text-[9px] uppercase tracking-widest font-black bg-do text-black px-1.5 py-0.5">WHEN</span>
      <span class="min-w-0">{row.when}</span>
      <span class="font-mono text-[9px] uppercase tracking-widest font-black bg-go text-black px-1.5 py-0.5">THEN</span>
      <span class="min-w-0 font-medium">{row.then}</span>
    </div>
    <span class="self-center shrink-0 inline-flex items-center justify-center w-5 h-5 border-2 border-black bg-success text-black font-black text-[11px]">&check;</span>
  </div>
</div>