Sticky Group Headers

<!-- Sticky Group Headers — headers pin to the top while the list scrolls -->
<div class="nuda-cp2-sticky-groups" role="dialog" aria-label="Grouped results">
  <div class="nuda-cp2-sticky-groups__scroll" role="listbox" aria-label="Grouped commands">
    <span class="nuda-cp2-sticky-groups__shadow" aria-hidden="true"></span>
    <div class="nuda-cp2-sticky-groups__group" role="group" aria-label="Files">
      <div class="nuda-cp2-sticky-groups__head">Files</div>
      <div class="nuda-cp2-sticky-groups__opt" role="option" aria-selected="false">index.tsx</div>
      <div class="nuda-cp2-sticky-groups__opt" role="option" aria-selected="false">App.tsx</div>
    </div>
    <div class="nuda-cp2-sticky-groups__group" role="group" aria-label="Actions">
      <div class="nuda-cp2-sticky-groups__head">Actions</div>
      <div class="nuda-cp2-sticky-groups__opt" role="option" aria-selected="true">Deploy to prod</div>
      <div class="nuda-cp2-sticky-groups__opt" role="option" aria-selected="false">Rollback</div>
    </div>
  </div>
</div>

.nuda-cp2-sticky-groups {
  width: 300px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
  animation: nuda-cp2-sticky-groups-in .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,.6);
}

.nuda-cp2-sticky-groups__scroll {
  position: relative;
  max-height: 170px;
  overflow-y: auto;
}

.nuda-cp2-sticky-groups__shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));
  z-index: 2;
  pointer-events: none;
}

.nuda-cp2-sticky-groups__group {
  padding: 0 6px;
}

.nuda-cp2-sticky-groups__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #161616;
  padding: 6px 6px;
  font: 700 10px ui-sans-serif,system-ui;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.nuda-cp2-sticky-groups__opt {
  padding: 7px 8px;
  font: 500 12px ui-sans-serif,system-ui;
  color: #cfcfcf;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s,color .15s;
}

.nuda-cp2-sticky-groups__opt:hover {
  background: rgba(255,255,255,.05);
  color: #fafafa;
}

.nuda-cp2-sticky-groups__opt[aria-selected="true"] {
  background: rgba(228,255,84,.1);
  color: #e4ff54;
}

@keyframes nuda-cp2-sticky-groups-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cp2-sticky-groups {
    animation: none !important;
  }
}