Count badge and removable tag

A <mark> inside a button is a count badge. A <button data-remove> inside a <mark> turns the chip into a tag the reader can take off.

Basic

<p style="display:flex;flex-wrap:wrap;gap:.75rem;align-items:center">
  <button>Inbox <mark>12</mark></button>
  <mark data-tone="info">rust <button data-remove aria-label="Remove rust">×</button></mark>
  <mark data-tone="go">macos <button data-remove aria-label="Remove macos">×</button></mark>
</p>

Each remove button needs its own label: an × on its own says nothing about what it removes.

Notes

• A badge inside a button or a summary takes the stop tone and drops back to 0.7rem, so a count reads as a count.
• s72.js gives every [data-remove] button the ghost variant and removes the nearest mark, li, [data-callout] or article.
• The same button dismisses a callout or a list row, so one attribute covers every removable thing.