Build a status badge component that translates a raw status code into a human-friendly label.
Render a <span> element with the class badge. The badge text is derived from a PUBLIC property named status, decorated with @api so a parent component (and the tests) can set it from outside: element.status = 'active'. The mapping is:
'draft'→Draft'active'→Active'closed'→Closed- anything else →
Unknown
The default value of status is 'draft', so the badge must show Draft on first render. Do not render the raw status value directly — compute the label through a getter so unknown values fall back to Unknown.
Examples:
Initial render (default status 'draft'):
<span class="badge">Draft</span>
Parent sets element.status = 'active':
<span class="badge">Active</span>
Parent sets element.status = 'closed':
<span class="badge">Closed</span>
Parent sets element.status = 'archived' (not in the map):
<span class="badge">Unknown</span>