Quality Selector

<!-- Quality Selector — native <details>/<summary>, no JS required to open/close -->
<details class="nuda-vp2-quality">
  <summary class="nuda-vp2-quality__btn" aria-label="Video quality, Auto, currently 1080p">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <rect x="2.5" y="5" width="19" height="13" rx="2" />
      <path d="M8 18 L16 18" />
    </svg>
    Auto
    <span class="nuda-vp2-quality__res">1080p</span>
  </summary>
  <ul class="nuda-vp2-quality__menu">
    <li><button class="nuda-vp2-quality__opt is-active" type="button" aria-current="true">Auto <span>1080p</span></button></li>
    <li><button class="nuda-vp2-quality__opt" type="button">2160p <span>4K</span></button></li>
    <li><button class="nuda-vp2-quality__opt" type="button">1080p</button></li>
    <li><button class="nuda-vp2-quality__opt" type="button">720p</button></li>
    <li><button class="nuda-vp2-quality__opt" type="button">480p</button></li>
  </ul>
</details>

.nuda-vp2-quality {
  position: relative;
  width: 150px;
  font: 600 10px ui-sans-serif,system-ui,sans-serif;
}

.nuda-vp2-quality__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: #fafafa;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.nuda-vp2-quality__btn::marker {
  content: "";
}

.nuda-vp2-quality__btn::-webkit-details-marker {
  display: none;
}

.nuda-vp2-quality__btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.nuda-vp2-quality__btn:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-vp2-quality__res {
  color: #e4ff54;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.nuda-vp2-quality__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  list-style: none;
  margin: 0;
  padding: 4px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  animation: _nuda-vp2qualitypop .18s ease both;
}

.nuda-vp2-quality__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: #cfcfcf;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease,color .15s ease;
}

.nuda-vp2-quality__opt:hover {
  background: rgba(255,255,255,.06);
  color: #fafafa;
}

.nuda-vp2-quality__opt:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: -2px;
}

.nuda-vp2-quality__opt.is-active {
  color: #e4ff54;
}

.nuda-vp2-quality__opt.is-active::after {
  content: "✓";
  margin-left: 6px;
}

@keyframes _nuda-vp2qualitypop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-vp2-quality__menu {
    animation: none;
  }
  .nuda-vp2-quality__opt {
    transition: none;
  }
}