<requirement-card>
Display-only card for one NFR ility row. Renders priority + rationale + optional conflict flag for status dashboards and ADR appendices.
Overview
The <requirement-card> component is a display-only tile for a single Non-Functional Requirement (ility) row — performance, security, accessibility, observability, and so on. It renders the chosen priority, a rationale, and an optional conflict flag for status dashboards, ADR appendices, and review surfaces.
The prioritization decision happens in <quality-target>. Use <requirement-card> downstream of that decision — in the documents that consume the choice. It is shadow-DOM encapsulated, with the ility name, an optional badge, the rationale, and any conflict note supplied through named slots.
Basic example
<requirement-card data-priority="critical"> <span slot="name">Performance</span> <span slot="badge">SLA</span> <p slot="rationale">Pages must paint LCP < 2.5s on 3G — a hard ad-network constraint.</p></requirement-card> <requirement-card data-priority="important"> <span slot="name">Accessibility</span> <p slot="rationale">WCAG 2.2 AA across all customer-facing flows.</p></requirement-card> <requirement-card data-priority="acceptable" data-conflict> <span slot="name">Internationalization</span> <p slot="rationale">English-only at launch; defer i18n to v2.</p> <p slot="conflicts">Conflicts with the marketing team's APAC-launch ask — needs an ADR.</p></requirement-card>How it works
The data-priority enum drives a :state(priority-*) hook, the default pill text, and the accent color. Add data-conflict to flag a drift or contradiction note; the card renders an emphasized border and exposes the conflicts slot. The card is inert by default — set tabindex="0" (or wrap it in an <a> / <button>) to make it activatable, at which point it emits requirement-card:click with { priority, hasConflict, originalEvent }.
Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
data-priority | "critical", "important", "acceptable", "not-relevant" | — | Drives :state(priority-*), default pill text, and accent color |
data-conflict | boolean | — | Flag a conflict / drift note; renders an emphasized border |
tabindex | number | — | Set to 0 to make the card directly focusable + activatable (otherwise wrap in <a>/<button>) |
Accessibility
Priority is conveyed by the pill's text label, not by accent color alone, so the critical / important / acceptable / not-relevant distinction survives for low-vision and color-blind readers. The card stays non-interactive (no spurious focus stop) until you opt in with tabindex or a wrapping <a> / <button>; when interactive it activates by mouse, keyboard, and touch alike. The conflict note is real slotted prose, so screen readers announce why a row is flagged rather than just seeing an emphasized border.
Related
<quality-target>— the polygon-as-UI surface that produces the priorities this card displays.<iron-triangle>— project-shape decision (scope / time / cost) that sets the capacity those priorities are spent against.<capacity-plan>— ledger view of the same capacity-versus-quality math.<score-card>— KPI tile (a different shape with a numeric value + change indicator).