Arrow Morph

<button class="nuda-icon-arrow" type="button" aria-label="Expand" aria-pressed="false">
  <svg class="nuda-icon-arrow__svg" viewBox="0 0 24 24" aria-hidden="true">
    <line     class="nuda-icon-arrow__shaft" x1="4" y1="12" x2="20" y2="12" />
    <polyline class="nuda-icon-arrow__head"  points="14 6 20 12 14 18" />
  </svg>
</button>

/* Arrow Morph
   The arrow flips 180deg between directions; shaft/head retune slightly for a
   spring feel. GPU-only: transform. Customize: --icon-accent */

.nuda-icon-arrow {
  --icon-accent: #e4ff54;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fafafa;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}

.nuda-icon-arrow:hover,
.nuda-icon-arrow:focus-visible {
  border-color: rgba(228, 255, 84, 0.4);
  outline: none;
}

.nuda-icon-arrow:focus-visible {
  box-shadow: 0 0 0 2px rgba(228, 255, 84, 0.5);
}

.nuda-icon-arrow[aria-pressed="true"] { color: var(--icon-accent); }

.nuda-icon-arrow__svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-origin: center;
  will-change: transform;
}

.nuda-icon-arrow[aria-pressed="true"] .nuda-icon-arrow__svg {
  transform: rotate(180deg);
}

.nuda-icon-arrow__shaft,
.nuda-icon-arrow__head {
  transition: transform 0.35s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-origin: center;
}

.nuda-icon-arrow[aria-pressed="true"] .nuda-icon-arrow__shaft { transform: scaleX(0.7); }
.nuda-icon-arrow[aria-pressed="true"] .nuda-icon-arrow__head  { transform: translateX(-2px); }

@media (prefers-reduced-motion: reduce) {
  .nuda-icon-arrow__svg,
  .nuda-icon-arrow__shaft,
  .nuda-icon-arrow__head { transition: none; }
}

/* Arrow Morph — vanilla JS
   Flips aria-pressed and label; CSS rotates the arrow. */

(function () {
  document.querySelectorAll(".nuda-icon-arrow").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var open = btn.getAttribute("aria-pressed") !== "true";
      btn.setAttribute("aria-pressed", String(open));
      btn.setAttribute("aria-label", open ? "Collapse" : "Expand");
    });
  });
})();