Don't trigger card-wide actions on card controls

src/action-handler-directive.ts

@@ -1,11 +1,17 @@
 import { noChange } from 'lit';
-import { AttributePart, directive, Directive, DirectiveParameters } from 'lit/directive.js';
+import {
+  AttributePart,
+  directive,
+  Directive,
+  DirectiveParameters,
+} from 'lit/directive.js';
 
 import type {
   ActionHandlerDetail,
   ActionHandlerOptions,
 } from 'custom-card-helpers/dist/types.d.js';
 import { fireEvent } from 'custom-card-helpers';
+import { stopEventFromActivatingCardWideActions } from './common';
 
 interface ActionHandler extends HTMLElement {
   holdTime: number;
@@ -31,7 +37,6 @@ class ActionHandler extends HTMLElement implements ActionHandler {
   private dblClickTimeout?: number;
 
   public connectedCallback(): void {
-
     [
       'touchcancel',
       'mouseout',
@@ -89,12 +94,17 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     };
 
     const end = (ev: Event): void => {
+      // This will ensure only 1 actionHandler is invoked for a given interaction.
+      stopEventFromActivatingCardWideActions(ev);
+
       const options = element.actionHandlerOptions;
-      if (['touchend', 'touchcancel'].includes(ev.type) 
-          // This action handler by default relies on synthetic click events for
-          // touch devices, in order to ensure that embedded cards (e.g. WebRTC)
-          // can use stock click handlers. The exception is for hold events.
-          && !(options?.hasHold && this.held)) {
+      if (
+        ['touchend', 'touchcancel'].includes(ev.type) &&
+        // This action handler by default relies on synthetic click events for
+        // touch devices, in order to ensure that embedded cards (e.g. WebRTC)
+        // can use stock click handlers. The exception is for hold events.
+        !(options?.hasHold && this.held)
+      ) {
         return;
       }
       if (options?.hasHold) {