Expand Card

<div class="nuda-vt-expand">
  <div class="nuda-vt-expand__card" data-open="false">
    <span class="nuda-vt-expand__title">Card</span>
    <span class="nuda-vt-expand__body">Expanded detail panel content.</span>
  </div>
  <button type="button" class="nuda-vt-expand__btn">Toggle detail</button>
</div>

/* Expand Card
   A compact card grows into a detail panel. The shared view-transition-name lets
   the API interpolate the size change as a smooth morph (no layout animation).
   Customize: open/closed dimensions, --vt-accent */

.nuda-vt-expand__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #18181b;
  overflow: hidden;
  view-transition-name: vt-expand-card;
}

.nuda-vt-expand__card[data-open="false"] { width: 120px; height: 60px; padding: 12px 16px; }
.nuda-vt-expand__card[data-open="true"]  { width: 280px; height: 150px; padding: 16px; }

.nuda-vt-expand__title {
  --vt-accent: #e4ff54;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vt-accent);
}

.nuda-vt-expand__body {
  font-size: 0.8rem;
  color: #888;
  opacity: 0;
}

.nuda-vt-expand__card[data-open="true"] .nuda-vt-expand__body { opacity: 1; }

.nuda-vt-expand__btn {
  background: #e4ff54;
  color: #09090b;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

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

::view-transition-group(vt-expand-card) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(vt-expand-card) { animation: none; }
}

/* Expand Card — vanilla JS
   Toggles the card open/closed inside a view transition. */

(function () {
  document.querySelectorAll(".nuda-vt-expand").forEach(function (root) {
    var card = root.querySelector(".nuda-vt-expand__card");
    var btn = root.querySelector(".nuda-vt-expand__btn");

    function doSwap() {
      card.dataset.open = card.dataset.open === "true" ? "false" : "true";
    }

    btn.addEventListener("click", function () {
      if (!document.startViewTransition) { doSwap(); return; }
      document.startViewTransition(doSwap);
    });
  });
})();