Multi-Select Checklist

<!-- Multi-Select Checklist — toggle several commands before running them -->
<div class="nuda-cp2-multiselect" role="dialog" aria-label="Multi-select command palette">
  <ul class="nuda-cp2-multiselect__list" role="listbox" aria-multiselectable="true" aria-label="Select labels">
    <li class="nuda-cp2-multiselect__opt nuda-cp2-multiselect__opt--checked" role="option" aria-selected="true">
      <span class="nuda-cp2-multiselect__box" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
          <path class="nuda-cp2-multiselect__check" d="M5 13 L10 18 L19 7" />
        </svg>
      </span>
      Bug
    </li>
    <li class="nuda-cp2-multiselect__opt" role="option" aria-selected="false">
      <span class="nuda-cp2-multiselect__box" aria-hidden="true"></span>
      Feature
    </li>
    <li class="nuda-cp2-multiselect__opt nuda-cp2-multiselect__opt--checked" role="option" aria-selected="true">
      <span class="nuda-cp2-multiselect__box" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
          <path class="nuda-cp2-multiselect__check" d="M5 13 L10 18 L19 7" />
        </svg>
      </span>
      Urgent
    </li>
  </ul>
  <div class="nuda-cp2-multiselect__count" aria-live="polite">2 selected</div>
</div>

/* Multi-Select Checklist — click a row to toggle it and update the count. */

(function () {
  var list = document.querySelector('.nuda-cp2-multiselect__list');
  var count = document.querySelector('.nuda-cp2-multiselect__count');
  if (!list || !count) return;

  var CHECK_PATH = 'M5 13 L10 18 L19 7';

  list.addEventListener('click', function (e) {
    var opt = e.target.closest('.nuda-cp2-multiselect__opt');
    if (!opt) return;

    var checked = opt.classList.toggle('nuda-cp2-multiselect__opt--checked');
    opt.setAttribute('aria-selected', String(checked));

    var box = opt.querySelector('.nuda-cp2-multiselect__box');
    box.innerHTML = checked
      ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" ' +
        'stroke-linecap="round" stroke-linejoin="round"><path class="nuda-cp2-multiselect__check" ' +
        'd="' + CHECK_PATH + '"/></svg>'
      : '';

    var total = list.querySelectorAll('.nuda-cp2-multiselect__opt--checked').length;
    count.textContent = total + ' selected';
  });
})();

.nuda-cp2-multiselect {
  width: 290px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 40px -8px rgba(0,0,0,.6);
}

.nuda-cp2-multiselect__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nuda-cp2-multiselect__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font: 500 12px ui-sans-serif,system-ui;
  color: #cfcfcf;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}

.nuda-cp2-multiselect__opt:hover {
  background: rgba(255,255,255,.05);
}

.nuda-cp2-multiselect__opt--checked {
  color: #fafafa;
}

.nuda-cp2-multiselect__box {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  transition: background .2s,border-color .2s;
}

.nuda-cp2-multiselect__opt--checked .nuda-cp2-multiselect__box {
  background: #e4ff54;
  border-color: #e4ff54;
}

.nuda-cp2-multiselect__box svg {
  width: 11px;
  height: 11px;
}

.nuda-cp2-multiselect__check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: nuda-cp2-multiselect-draw .4s ease .1s forwards;
}

.nuda-cp2-multiselect__count {
  padding: 7px 12px;
  font: 600 10px ui-sans-serif,system-ui;
  color: #777;
  border-top: 1px solid rgba(255,255,255,.08);
}

@keyframes nuda-cp2-multiselect-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cp2-multiselect__check {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}