.ctc-counter { display: flex; }
.ctc-counter-chip { display: inline-flex; align-items: center; padding: 0; background: #1f1f2e; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; font: 600 12px/1 system-ui, sans-serif; color: #f0eeff; }
.ctc-counter-chip button { width: 26px; height: 28px; background: transparent; border: 0; color: #c4b5fd; font: 700 14px/1 system-ui, sans-serif; cursor: pointer; transition: background 0.15s, color 0.15s; }
.ctc-counter-chip button:hover { background: rgba(124,108,255,0.18); color: #fff; }
.ctc-counter-label { padding: 0 6px 0 10px; }
.ctc-counter-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; margin-right: 4px; padding: 0 6px; background: rgba(124,108,255,0.22); color: #c4b5fd; border-radius: 999px; font: 700 11px/1 ui-monospace, monospace; } <div class="ctc-counter">
<span class="ctc-counter-chip" role="group" aria-label="Inbox count">
<button type="button" data-ctc-cnt="-1" aria-label="Decrement">−</button>
<span class="ctc-counter-label">Inbox</span>
<span class="ctc-counter-num" aria-live="polite" aria-valuenow="12">12</span>
<button type="button" data-ctc-cnt="+1" aria-label="Increment">+</button>
</span>
</div> (function () {
document.querySelectorAll('.ctc-counter-chip').forEach(function (chip) {
var num = chip.querySelector('.ctc-counter-num');
chip.querySelectorAll('[data-ctc-cnt]').forEach(function (btn) {
btn.addEventListener('click', function () {
var n = parseInt(num.textContent, 10) || 0;
var inc = parseInt(btn.getAttribute('data-ctc-cnt'), 10);
var v = Math.max(0, n + inc);
num.textContent = v;
num.setAttribute('aria-valuenow', v);
});
});
});
})(); Live preview Edit any tab — preview updates live Ready