cnc-guard
A pass/fail line: a tick or a cross beside a description. For checklists of conditions — password rules, system checks, requirements met.
Quick start
Bind check to a boolean and give it a description. One guard is one
condition; a checklist is several stacked.
<cnc-guard $check="pw.length >= 8" description="At least eight characters"></cnc-guard>Usage guidance
Word the description as the RULE, not the failure. "At least eight characters" reads correctly with either icon beside it; "Password too short" reads as nonsense once the tick appears.
Remember there is no neutral state. A guard shows a cross before the user has typed anything, which reads as failure rather than "not yet" — where that matters, hide the list until the field has been touched.
Use it for conditions the user can ACT on. For a status that is merely informational,
cnc-badge
or cnc-alert carries the meaning better than a tick.