From 1f658363c12cafbb45c6ba12fcc5fcfff17d0658 Mon Sep 17 00:00:00 2001
From: Barret Schloerke <barret@posit.co>
Date: Fri, 25 Sep 2026 14:27:19 -0400
Subject: [PATCH] fix(components): hover anywhere on a gallery card activates
 it

Hovering or focusing the title, arrow, or thumbnail now plays the preview GIF, lifts the card, fills the arrow, and darkens the title together. Previously the GIF and shadow only reacted to the thumbnail and the arrow only to the title/arrow.
---
 components/_partials/components-list.css | 17 +++++------------
 components/_partials/components-list.js  | 14 +++++++++-----
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/components/_partials/components-list.css b/components/_partials/components-list.css
index 51a3f177..fa9d2b30 100644
--- a/components/_partials/components-list.css
+++ b/components/_partials/components-list.css
@@ -47,8 +47,7 @@
   transition: box-shadow 180ms ease, transform 180ms ease;
 }
 
-.component-list-card:hover,
-.component-list-card:focus-visible {
+.component-list-column:is(:hover, :has(:focus-visible)) .component-list-card {
   box-shadow: 0 3px 7px rgba(29, 31, 33, 0.12),
     0 7px 18px rgba(29, 31, 33, 0.16);
   transform: translateY(-2px);
@@ -135,17 +134,12 @@ a .component-link-icon:after {
   transition: all 0.3s !important;
 }
 
-a:hover .component-link-icon:after,
-a.component-list-header-text:hover
-  ~ div.component-list-icon
-  p
-  a
-  i.component-link-icon:after {
+.component-list-column:is(:hover, :has(:focus-visible)) .component-link-icon:after {
   content: "\F133";
   font-family: "bootstrap-icons";
 }
 
-.component-list-header-text:hover {
+.component-list-column:is(:hover, :has(:focus-visible)) .component-list-header-text {
   color: #000000;
 }
 
@@ -154,9 +148,8 @@ a.component-list-header-text:hover
     transition: none;
   }
 
-  .component-list-card:hover,
-  .component-list-card:focus-visible {
-    transform: none;
+  .component-list-column .component-list-card {
+    transform: none !important;
   }
 }
 
diff --git a/components/_partials/components-list.js b/components/_partials/components-list.js
index 3aa1cd6c..57775091 100644
--- a/components/_partials/components-list.js
+++ b/components/_partials/components-list.js
@@ -95,16 +95,20 @@ document.querySelectorAll(".component-list-card").forEach((card) => {
     }
   };
 
-  card.addEventListener("pointerenter", (event) => {
+  // The whole column (title, arrow, and card) triggers the preview.
+  const column = card.closest(".component-list-column") ?? card;
+  column.addEventListener("pointerenter", (event) => {
     if (event.pointerType !== "touch") showAnimation();
   });
-  card.addEventListener("pointerleave", showPoster);
+  column.addEventListener("pointerleave", showPoster);
   // Keyboard focus only: Android Chrome also focuses a tapped link, which
   // would start downloading the GIF just as the page navigates away.
-  card.addEventListener("focus", () => {
-    if (card.matches(":focus-visible")) showAnimation();
+  column.addEventListener("focusin", (event) => {
+    if (event.target.matches(":focus-visible")) showAnimation();
+  });
+  column.addEventListener("focusout", (event) => {
+    if (!column.contains(event.relatedTarget)) showPoster();
   });
-  card.addEventListener("blur", showPoster);
   image.addEventListener("load", () => {
     if (blobUrl && image.src === blobUrl) card.classList.add("is-playing");
   });