125Checklist

Things to verify. Real checkboxes, disabled in an article — the reader is reading, not filling a form, and an enabled checkbox promises persistence the page cannot deliver.

Use it for

Pre-flight checks before a deployment
A lesson task list, where dropping `disabled` makes it interactive with no other change

Not for

Ordered steps — that is Procedure
A form

Pre-deployment

All tests pass in the sandbox
Code coverage above 75%
Permission sets assigned in production
Rollback plan written down

markup

<ul class="ns-checklist">
  <li data-state="done"><i class="ph ph-check-circle ns-checklist__mark" aria-hidden="true"></i><span class="ns-checklist__text">All tests pass in the sandbox</span></li>
  <li data-state="done"><i class="ph ph-check-circle ns-checklist__mark" aria-hidden="true"></i><span class="ns-checklist__text">Code coverage above 75%</span></li>
  <li><i class="ph ph-circle ns-checklist__mark" aria-hidden="true"></i><span class="ns-checklist__text">Permission sets assigned in production</span></li>
  <li><i class="ph ph-circle ns-checklist__mark" aria-hidden="true"></i><span class="ns-checklist__text">Rollback plan written down</span></li>
</ul>

Accessibility contract

data-state drives both the mark and the muted text, so completion is not colour alone
In an article the marks are decorative and the text carries the meaning