{{! Badge (ADR 0034): a small label in a pill; an optional dot, an optional icon (an Icon element's glyph, requires icon). Circle (ADR 0118): the words around a ring (an SVG textPath, written by @ring) and an arrow, an icon or a few words in the middle; screen readers get the words once, as plain text. }}
<div {{@attrs}}>{{^circle}}<span class="sv-badge__pill">{{#dot}}<span class="sv-badge__dot" aria-hidden="true"></span>{{/dot}}{{#icon}}<span class="sv-badge__icon sv-icon__glyph sv-glyph-{{icon}}" aria-hidden="true"></span>{{/icon}}<span class="sv-badge__text"{{@edit text}}>{{text}}</span></span>{{/circle}}{{#circle}}{{#link.url}}<a class="sv-badge__circle" href="{{link.url}}"{{#link.newTab}} target="_blank" rel="noopener noreferrer"{{/link.newTab}}>{{/link.url}}{{^link.url}}<span class="sv-badge__circle">{{/link.url}}<svg class="sv-badge__ring" viewBox="0 0 120 120" aria-hidden="true" focusable="false"><path id="sv-{{@id}}-ring" fill="none" d="M15 60a45 45 0 1 1 90 0a45 45 0 1 1-90 0"/>{{@ring text}}</svg><span class="sv-badge__middle" aria-hidden="true">{{#midArrow}}<svg class="sv-badge__arrow" viewBox="0 0 24 24" focusable="false"><path d="M7 17 17 7M8 7h9v9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>{{/midArrow}}{{#midIcon}}<span class="sv-badge__icon sv-icon__glyph sv-glyph-{{icon}}"></span>{{/midIcon}}{{#midWords}}<span class="sv-badge__mid-words">{{middleText}}</span>{{/midWords}}</span><span class="sv-badge__label">{{text}}{{#midWords}} {{middleText}}{{/midWords}}</span>{{#link.url}}</a>{{/link.url}}{{^link.url}}</span>{{/link.url}}{{/circle}}</div>