Drag-to-Resize Split Pane

<!-- Drag-to-Resize Split Pane — update aria-valuenow on the separator as
     the divider moves. Keyboard: focus the divider, Alt+ArrowLeft/ArrowRight
     resizes the panes. -->
<div class="nuda-dd2-split-resize" role="group" aria-label="Resizable panes" aria-describedby="dd2-split-resize-desc">
  <p id="dd2-split-resize-desc" class="nuda-dd2-split-resize__sr">Drag the divider to resize the panes, or focus it and press Alt plus Arrow Left or Arrow Right.</p>
  <div class="nuda-dd2-split-resize__pane nuda-dd2-split-resize__pane--a">
    <span>Files</span>
  </div>
  <div class="nuda-dd2-split-resize__divider" role="separator" aria-orientation="vertical" aria-valuenow="40" aria-valuemin="20" aria-valuemax="80" tabindex="0">
    <span class="nuda-dd2-split-resize__grip" aria-hidden="true"></span>
  </div>
  <div class="nuda-dd2-split-resize__pane nuda-dd2-split-resize__pane--b">
    <span>Preview</span>
  </div>
</div>

.nuda-dd2-split-resize {
  width: 220px;
  height: 100px;
  display: flex;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}

.nuda-dd2-split-resize__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.nuda-dd2-split-resize__pane {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141414;
  font: 600 10px ui-sans-serif,system-ui;
  color: #777;
  position: relative;
}

.nuda-dd2-split-resize__pane--a {
  flex: 0 0 42%;
  background: #161616;
}

.nuda-dd2-split-resize__pane--a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent,rgba(228,255,84,.08));
  transform: scaleX(1);
  transform-origin: right;
  animation: nuda-dd2-split-resize-sweep 3s ease-in-out infinite;
}

.nuda-dd2-split-resize__pane--b {
  color: #63636e;
}

.nuda-dd2-split-resize__divider {
  width: 10px;
  flex-shrink: 0;
  background: rgba(255,255,255,.04);
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
}

.nuda-dd2-split-resize__divider:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-dd2-split-resize__grip {
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: #e4ff54;
  animation: nuda-dd2-split-resize-grip 3s ease-in-out infinite;
}

@keyframes nuda-dd2-split-resize-grip {
  0%,100% {
    transform: translateX(0);
    box-shadow: 0 0 0 rgba(228,255,84,0);
  }
  50% {
    transform: translateX(3px);
    box-shadow: 0 0 10px 2px rgba(228,255,84,.5);
  }
}

@keyframes nuda-dd2-split-resize-sweep {
  0%,100% {
    transform: scaleX(.85);
  }
  50% {
    transform: scaleX(1.1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-dd2-split-resize__grip,.nuda-dd2-split-resize__pane--a::after {
    animation: none;
  }
}