Tag

<p class="specimen-case-line">A run of three Tags in three colours.</p>
<span data-kit-region="tags"><span data-kit-role="tag" style="--kit-tag: #27ae60"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Regular</span></span><span data-kit-role="tag" style="--kit-tag: #8e44ad"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Wedding</span></span><span data-kit-role="tag" style="--kit-tag: #d35400"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Needs parking</span></span></span>
<p class="specimen-case-line">A Tag linking to its List.</p>
<span data-kit-region="tags"><a href="#role-tag" data-kit-role="tag" style="--kit-tag: #2980b9"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Charity</span></a></span>
<p class="specimen-case-line">A long name cut at its end.</p>
<span data-kit-region="tags"><span data-kit-role="tag" style="--kit-tag: #c0392b"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Harbourside Community Association Youth Theatre and Drama Club rehearsals</span></span></span>

<p class="specimen-case-line">A run past its count of three, folding the rest into its count.</p>
<span data-kit-region="tags"><span data-kit-role="tag" style="--kit-tag: #27ae60"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Regular</span></span><span data-kit-role="tag" style="--kit-tag: #8e44ad"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Wedding</span></span><span data-kit-role="tag" style="--kit-tag: #d35400"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Needs parking</span></span><button type="button" data-kit-role="subtle-action" popovertarget="role-tag-open-rest" aria-label="2 more tags"><span data-kit-region="label">+2</span></button><span id="role-tag-open-rest" data-kit-role="popover" popover="auto"><span role="list"><span role="listitem"><span data-kit-role="tag" style="--kit-tag: #2980b9"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Charity</span></span></span><span role="listitem"><span data-kit-role="tag" style="--kit-tag: #7f8c8d"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Kitchen</span></span></span></span></span></span>
<p class="specimen-case-line">A run whose count waits for the booking.</p>
<span data-kit-region="tags"><span data-kit-role="tag" style="--kit-tag: #27ae60"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Regular</span></span><span data-kit-role="tag" style="--kit-tag: #8e44ad"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Wedding</span></span><span data-kit-role="tag" style="--kit-tag: #d35400"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Needs parking</span></span><button type="button" data-kit-role="subtle-action" id="role-tag-open-inert-more" data-kit-state="inert" disabled aria-describedby="role-tag-open-inert-more-words" popovertarget="role-tag-open-inert-rest" aria-label="2 more tags"><span data-kit-region="label">+2</span></button><span id="role-tag-open-inert-rest" data-kit-role="popover" popover="auto"><span role="list"><span role="listitem"><span data-kit-role="tag" style="--kit-tag: #2980b9"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Charity</span></span></span><span role="listitem"><span data-kit-role="tag" style="--kit-tag: #7f8c8d"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Kitchen</span></span></span></span></span><span data-kit-region="words" id="role-tag-open-inert-more-words">More tags wait until the booking loads.</span></span>