dcapslock
diff --git a/‎.gitignore‎
Lines changed: 1 addition & 0 deletions b/‎.gitignore‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎README.md‎
Lines changed: 67 additions & 18 deletions b/‎README.md‎
Lines changed: 67 additions & 18 deletions
diff --git a/‎src/action-handler.ts‎
Lines changed: 15 additions & 15 deletions b/‎src/action-handler.ts‎
Lines changed: 15 additions & 15 deletions
@@ -3,3 +3,4 @@
 /node_modules
 .rpt2_cache/
 /dist/**
+test-*.html
@@ -53,8 +53,9 @@ Lovelace Button card for your entities.
   - [Configuration with states](#configuration-with-states)
     - [Default behavior](#default-behavior)
     - [With Operator on state](#with-operator-on-state)
-    - [`tap_action` Navigate](#tap_action-navigate)
     - [blink](#blink)
+  - [`tap_action` Navigate](#tap_action-navigate)
+  - [`icon_*_action`](#icon__action)
   - [Play with width, height and icon size](#play-with-width-height-and-icon-size)
   - [Templates Support](#templates-support)
     - [Playing with label templates](#playing-with-label-templates)
@@ -71,6 +72,7 @@ Lovelace Button card for your entities.
 
 - works with any toggleable entity
 - 6 available actions on **tap** and/or **hold** and/or **double click**: `none`, `toggle`, `more-info`, `navigate`, `url`, `assist` and `call-service`
+- **icon tap action**: Separate action when clicking the icon specifically which takes precedence over main card actions.
 - state display (optional)
 - custom color (optional), or based on light rgb value/temperature
 - custom state definition with customizable color, icon and style (optional)
@@ -112,6 +114,9 @@ Lovelace Button card for your entities.
 | `tap_action` | object | optional | See [Action](#Action) | Define the type of action on click, if undefined, toggle will be used for domains that support toggle, or button press for input_button. |
 | `hold_action` | object | optional | See [Action](#Action) | Define the type of action on hold, if undefined, nothing happens. |
 | `double_tap_action` | object | optional | See [Action](#Action) | Define the type of action on double click, if undefined, nothing happens. |
+| `icon_tap_action` | object | optional | See [Action](#Action) | Define the type of action on icon click, if undefined, nothing happens. When configured, the icon becomes clickable separately from the card. See note in [icon\_\*\_action](#icon__action) |
+| `icon_hold_action` | object | optional | See [Action](#Action) | Define the type of action on icon hold, if undefined, nothing happens. When configured, the icon becomes holdable separately from the card. See note in [icon\_\*\_action](#icon__action) |
+| `icon_double_tap_action` | object | optional | See [Action](#Action) | Define the type of action on icon double click, if undefined, nothing happens. When configured, the icon becomes double-clickable separately from the card. See note in [icon\_\*\_action](#icon__action) |
 | `name` | string | optional | `Air conditioner` | Define an optional text to show below the icon. Supports templates, see [templates](#javascript-templates) |
 | `state_display` | string | optional | `On` | Override the way the state is displayed. Supports templates, see [templates](#javascript-templates) |
 | `label` | string | optional | Any string that you want | Display a label below the card. See [Layouts](#layout) for more information. Supports templates, see [templates](#javascript-templates) |
@@ -289,7 +294,9 @@ To enable compatibility with sections (meaning the card adjusts its size automat
 
 For users with heavily modified cards using `styles`, you might need to adjust your configuration once enabling `section_mode`.
 
-⚠️ While `section_mode` is enabled: using `aspect_ratio` or setting the card's `height` or `width` using CSS will probably the layout and is considered incompatible. There might be other incompatible options, if you find any, please update this documentation by submitting a PR.
+> [!IMPORTANT]
+>
+> While `section_mode` is enabled: using `aspect_ratio` or setting the card's `height` or `width` using CSS will probably break the layout and is considered incompatible. There might be other incompatible options, if you find any, please update this documentation by submitting a PR.
 
 ![section_mode_true](examples/section_mode.png)
 
@@ -1371,22 +1378,6 @@ The definition order matters, the first item to match will be the one selected.
           - opacity: 0.5
 ```
 
-#### `tap_action` Navigate
-
-Buttons can link to different views using the `navigate` action:
-
-```yaml
-- type: 'custom:button-card'
-  color_type: label-card
-  icon: mdi:home
-  name: Go To Home
-  tap_action:
-    action: navigate
-    navigation_path: /lovelace/0
-```
-
-The `navigation_path` also accepts any Home Assistant internal URL such as /dev-info or /hassio/dashboard for example.
-
 #### blink
 
 You can make the whole button blink:
@@ -1410,6 +1401,64 @@ You can make the whole button blink:
       icon: mdi:shield-check
 ```
 
+### `tap_action` Navigate
+
+Buttons can link to different views using the `navigate` action:
+
+```yaml
+- type: 'custom:button-card'
+  color_type: label-card
+  icon: mdi:home
+  name: Go To Home
+  tap_action:
+    action: navigate
+    navigation_path: /lovelace/0
+```
+
+The `navigation_path` also accepts any Home Assistant internal URL such as /dev-info or /hassio/dashboard for example.
+
+### `icon_*_action`
+
+You can configure a separate action for when clicking the icon specifically, while the card itself has a different action:
+
+```yaml
+- type: 'custom:button-card'
+  entity: light.living_room
+  name: Living Room Light
+  tap_action:
+    action: toggle
+  icon_tap_action:
+    action: more-info
+```
+
+> [!IMPORTANT]
+>
+> If any `icon_*_action` is defined, the icon will capture **all** the actions for its area. For eg. in the case below, clicking on the icon will not do anything unless you hold it. To execute `tap_action` you'll have to click outside of the icon area.
+
+```yaml
+type: 'custom:button-card'
+entity: light.living_room
+name: Living Room Light
+tap_action:
+  action: toggle
+icon_hold_action:
+  action: more-info
+```
+
+In this case, if you want to have the same action as the button also on the icon for `tap`, you'll have to define the `icon_tap_action` explicitely.
+
+```yaml
+type: 'custom:button-card'
+entity: light.living_room
+name: Living Room Light
+tap_action:
+  action: toggle
+icon_tap_action:
+  action: toggle
+icon_hold_action:
+  action: more-info
+```
+
 ### Play with width, height and icon size
 
 Through the `styles` you can specify the `width` and `height` of the card, and also the icon size through the main `size` option. Playing with icon size will growth the card unless a `height` is specified.
 
@@ -10,9 +10,9 @@ import { AttributePart, Directive, DirectiveParameters, directive } from 'lit-ht
 // @ts-ignore
 const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
 
-interface ActionHandler extends HTMLElement {
+interface ActionHandlerType extends HTMLElement {
   holdTime: number;
-  bind(element: Element, options): void;
+  bind(element: Element, options: ActionHandlerOptions): void;
 }
 
 export interface ActionHandlerDetail {
@@ -32,21 +32,21 @@ interface ActionHandlerElement extends HTMLElement {
     options: ActionHandlerOptions;
     start?: (ev: Event) => void;
     end?: (ev: Event) => void;
-    handleEnter?: (ev: KeyboardEvent) => void;
     handleTouchMove?: (ev: TouchEvent) => void;
+    handleKeyDown?: (ev: KeyboardEvent) => void;
   };
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'action-handler': ActionHandler;
+    'action-handler': ActionHandlerType;
   }
   interface HASSDomEvents {
     action: ActionHandlerDetail;
   }
 }
 
-class ActionHandler extends HTMLElement implements ActionHandler {
+class ActionHandlerType extends HTMLElement implements ActionHandlerType {
   public holdTime = 500;
 
   public ripple: Ripple;
@@ -103,7 +103,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     });
   }
 
-  public bind(element: ActionHandlerElement, options: ActionHandlerOptions): void {
+  public bind(element: ActionHandlerElement, options: ActionHandlerOptions = {}): void {
     if (element.actionHandler && deepEqual(options, element.actionHandler.options)) {
       return;
     }
@@ -116,7 +116,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       element.removeEventListener('mousedown', element.actionHandler.start!);
       element.removeEventListener('click', element.actionHandler.end!);
 
-      element.removeEventListener('keyup', element.actionHandler.handleEnter!);
+      element.removeEventListener('keydown', element.actionHandler.handleKeyDown!);
     } else {
       element.addEventListener('contextmenu', (ev: Event) => {
         const e = ev || window.event;
@@ -227,8 +227,8 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       }
     };
 
-    element.actionHandler.handleEnter = (ev: KeyboardEvent) => {
-      if (ev.keyCode !== 13) {
+    element.actionHandler.handleKeyDown = (ev: KeyboardEvent) => {
+      if (!['Enter', ' '].includes(ev.key)) {
         return;
       }
       (ev.currentTarget as ActionHandlerElement).actionHandler!.end!(ev);
@@ -246,7 +246,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     });
     element.addEventListener('click', element.actionHandler.end);
 
-    element.addEventListener('keyup', element.actionHandler.handleEnter);
+    element.addEventListener('keydown', element.actionHandler.handleKeyDown);
   }
 
   private startAnimation(x: number, y: number): void {
@@ -267,22 +267,22 @@ class ActionHandler extends HTMLElement implements ActionHandler {
   }
 }
 
-customElements.define('button-card-action-handler', ActionHandler);
+customElements.define('button-card-action-handler', ActionHandlerType);
 
-const getActionHandler = (): ActionHandler => {
+const getActionHandler = (): ActionHandlerType => {
   const body = document.body;
   if (body.querySelector('button-card-action-handler')) {
-    return body.querySelector('button-card-action-handler') as ActionHandler;
+    return body.querySelector('button-card-action-handler') as ActionHandlerType;
   }
 
   const actionhandler = document.createElement('button-card-action-handler');
   body.appendChild(actionhandler);
 
-  return actionhandler as ActionHandler;
+  return actionhandler as ActionHandlerType;
 };
 
 export const actionHandlerBind = (element: ActionHandlerElement, options?: ActionHandlerOptions) => {
-  const actionhandler: ActionHandler = getActionHandler();
+  const actionhandler: ActionHandlerType = getActionHandler();
   if (!actionhandler) {
     return;
   }