fix(card): replaced the time-based click detection with a distance-based approach

.changeset/nice-jars-shop.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/card': minor
+---
+
+**Fixed**: On mobile Chrome (both Android and iOS), scrolling on `sp-card` components would inadvertently trigger click events. This was caused by the timing-based click detection (200ms threshold) in the pointer event handling, which could misinterpret quick scrolls as clicks. This issue did not affect Safari on mobile devices.

packages/card/src/Card.ts

@@ -186,21 +186,46 @@ export class Card extends LikeAnchor(
         }
     }
 
-    private handlePointerdown(event: Event): void {
+    /**
+     * Handles pointer down events on the card element.
+     * Implements a click detection system that distinguishes between clicks and drags
+     * based on duration and movement distance.
+     */
+    private handlePointerdown(event: PointerEvent): void {
         const path = event.composedPath();
         const hasAnchor = path.some(
             (el) => (el as HTMLElement).localName === 'a'
         );
         if (hasAnchor) return;
-        const start = +new Date();
-        const handleEnd = (): void => {
-            const end = +new Date();
-            if (end - start < 200) {
+        // Record the time and initial position of the pointerdown event
+        const startTime = event.timeStamp;
+        const startX = event.clientX;
+        const startY = event.clientY;
+
+        // Define the handler for when the pointer interaction ends
+        const handleEnd = (endEvent: PointerEvent): void => {
+            const endTime = event.timeStamp;
+            const endX = endEvent.clientX;
+            const endY = endEvent.clientY;
+
+            // Calculate time duration and movement distance of the pointer
+            const timeDelta = endTime - startTime;
+            const moveX = Math.abs(endX - startX);
+            const moveY = Math.abs(endY - startY);
+
+            // Consider the pointer interaction a "click" only if:
+            // - It was short (under 200ms)
+            // - It didn't move significantly (less than 10px in any direction)
+            const moved = moveX > 10 || moveY > 10;
+
+            if (timeDelta < 200 && !moved) {
                 this.click();
             }
+
             this.removeEventListener('pointerup', handleEnd);
             this.removeEventListener('pointercancel', handleEnd);
         };
+
         this.addEventListener('pointerup', handleEnd);
         this.addEventListener('pointercancel', handleEnd);
     }

packages/card/stories/card.stories.ts

@@ -20,6 +20,7 @@ import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/link/sp-link.js';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
 export default {
     component: 'sp-card',
@@ -342,7 +343,7 @@ export const smallQuiet = (args: StoryArgs): TemplateResult => {
     return html`
         <div>
             <sp-card
-                size=${args.size}
+                size=${ifDefined(args.size)}
                 ?horizontal=${args.horizontal}
                 heading="Card Heading"
                 subheading="JPG"
@@ -415,3 +416,25 @@ export const SlottedHeading = (args: StoryArgs): TemplateResult => {
         </sp-card>
     `;
 };
+
+export const ScrollTest = {
+    render: () => html`
+        <div class="scroll-container">
+            <div class="scroll-indicator">
+                <h3>Switch to mobile view to test touch behavior.</h3>
+                <p>
+                    In mobile view, verify that touch events work correctly and
+                    scrolling doesn't trigger unwanted clicks.
+                </p>
+            </div>
+            ${Array.from(
+                { length: 20 },
+                (_) => html`
+                    <div style="margin: 10px;">
+                        ${horizontalWithHREF({ horizontal: false })}
+                    </div>
+                `
+            )}
+        </div>
+    `,
+};