Obligation panel
Present unresolved work, evidence needs, and blocking status without making the design system authoritative.
Canonical sourcepatterns/obligation-panel.html
Behavior ownerApplication state
Runtime inside FormaNone
Example 1
Canonical
Canonical repository markup, namespaced only to keep examples independent.
View HTML
<aside class="ef-obligation-panel" aria-labelledby="ex1-obligation-panel-obligation-panel-title">
<header class="ef-obligation-panel__header">
<div>
<h2 id="ex1-obligation-panel-obligation-panel-title">3 obligations require attention</h2>
<p>These must be resolved before finalization.</p>
</div>
<span class="ef-obligation-panel__count" aria-hidden="true">3</span>
</header>
<ul class="ef-obligation-list">
<li class="ef-obligation" data-ef-severity="blocking">
<span class="ef-obligation__status">Blocking</span>
<div>
<strong>Reconcile unknown storage outcome</strong>
<p>Verify whether the report snapshot write completed before retrying.</p>
</div>
<a href="#ex1-obligation-panel-reconcile-storage">Review</a>
</li>
<li class="ef-obligation" data-ef-severity="warning">
<span class="ef-obligation__status">Required</span>
<div>
<strong>Rebuild stale aggregate</strong>
<p>The current aggregate does not include every accepted contribution.</p>
</div>
<a href="#ex1-obligation-panel-aggregate-health">Review</a>
</li>
<li class="ef-obligation" data-ef-severity="information">
<span class="ef-obligation__status">Evidence</span>
<div>
<strong>Supply publication evidence</strong>
<p>A required validation fixture has not yet been recorded.</p>
</div>
<a href="#ex1-obligation-panel-publication-evidence">Review</a>
</li>
</ul>
</aside>Example 2
Secondary surface
The same contract demonstrated on a secondary Forma surface.
View HTML
<aside class="ef-obligation-panel" aria-labelledby="ex2-obligation-panel-obligation-panel-title">
<header class="ef-obligation-panel__header">
<div>
<h2 id="ex2-obligation-panel-obligation-panel-title">3 obligations require attention</h2>
<p>These must be resolved before finalization.</p>
</div>
<span class="ef-obligation-panel__count" aria-hidden="true">3</span>
</header>
<ul class="ef-obligation-list">
<li class="ef-obligation" data-ef-severity="blocking">
<span class="ef-obligation__status">Blocking</span>
<div>
<strong>Reconcile unknown storage outcome</strong>
<p>Verify whether the report snapshot write completed before retrying.</p>
</div>
<a href="#ex2-obligation-panel-reconcile-storage">Review</a>
</li>
<li class="ef-obligation" data-ef-severity="warning">
<span class="ef-obligation__status">Required</span>
<div>
<strong>Rebuild stale aggregate</strong>
<p>The current aggregate does not include every accepted contribution.</p>
</div>
<a href="#ex2-obligation-panel-aggregate-health">Review</a>
</li>
<li class="ef-obligation" data-ef-severity="information">
<span class="ef-obligation__status">Evidence</span>
<div>
<strong>Supply publication evidence</strong>
<p>A required validation fixture has not yet been recorded.</p>
</div>
<a href="#ex2-obligation-panel-publication-evidence">Review</a>
</li>
</ul>
</aside>Example 3
Constrained layout
The canonical contract inside a narrow application region.
View HTML
<aside class="ef-obligation-panel" aria-labelledby="ex3-obligation-panel-obligation-panel-title">
<header class="ef-obligation-panel__header">
<div>
<h2 id="ex3-obligation-panel-obligation-panel-title">3 obligations require attention</h2>
<p>These must be resolved before finalization.</p>
</div>
<span class="ef-obligation-panel__count" aria-hidden="true">3</span>
</header>
<ul class="ef-obligation-list">
<li class="ef-obligation" data-ef-severity="blocking">
<span class="ef-obligation__status">Blocking</span>
<div>
<strong>Reconcile unknown storage outcome</strong>
<p>Verify whether the report snapshot write completed before retrying.</p>
</div>
<a href="#ex3-obligation-panel-reconcile-storage">Review</a>
</li>
<li class="ef-obligation" data-ef-severity="warning">
<span class="ef-obligation__status">Required</span>
<div>
<strong>Rebuild stale aggregate</strong>
<p>The current aggregate does not include every accepted contribution.</p>
</div>
<a href="#ex3-obligation-panel-aggregate-health">Review</a>
</li>
<li class="ef-obligation" data-ef-severity="information">
<span class="ef-obligation__status">Evidence</span>
<div>
<strong>Supply publication evidence</strong>
<p>A required validation fixture has not yet been recorded.</p>
</div>
<a href="#ex3-obligation-panel-publication-evidence">Review</a>
</li>
</ul>
</aside>