### D-Pad Navigation (Momentary Actions)

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-circlepad.md

Example demonstrating how to configure momentary actions for D-pad navigation, including start, repeat, and end actions with repeat delay.

```APIDOC
## D-Pad Navigation (Momentary Actions)

### Description
This example shows how to configure a circlepad for D-pad navigation using momentary actions. It defines actions for when a direction is pressed, held, and released, including a repeat interval for continuous actions.

### Configuration Example

```yaml
up:
  momentary_start_action:
    action: key
    key: up_down
  momentary_repeat_action:
    action: key
    key: up_repeat
    repeat_delay: 100
  momentary_end_action:
    action: key
    key: up_up
```

### Behavior Timeline
- **User presses up (0ms)**: `momentary_start_action` fires (`up_down`). Repeat interval starts (100ms).
- **100ms**: `momentary_repeat_action` fires (`up_repeat`).
- **200ms**: `momentary_repeat_action` fires again (`up_repeat`).
- **User releases (300ms)**: `momentary_end_action` fires (`up_up`). All timers are cleared.
```

--------------------------------

### Generic Remote Configuration Example

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Example configuration for the generic remote platform, defining a power button action. This can be used as a base for other remote actions.

```yaml
name: power
icon: mdi:power
tap_action:
  action: key
  key: power
  device: Generic Device
```

--------------------------------

### Example Universal Remote Card Configuration

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

An example YAML structure for configuring the Universal Remote Card, demonstrating row and button layouts.

```yaml
type: custom:universal-remote-card
rows:
  - - back
    - power
    - home
    - menu
  - - touchpad
    - - volume_buttons
  - - rewind
    - previous
    - play_pause
    - next
    - fast_forward
```

--------------------------------

### Example 1: Button Order and Repetition

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Demonstrates arranging buttons, including repeating them, in different rows. Useful for creating complex remote layouts.

```yaml
type: custom:universal-remote-card
remote_id: remote.google_chromecast
media_player_id: media_player.google_chromecast
title: Example 1
rows:
  - - power
  - - back
    - home
    - tv
    - netflix
  - - youtube
    - spotify
    - netflix
  - - touchpad
  - - slider
  - - channel_up
    - channel_down
    - info
  - - rewind
    - play
    - spotify
    - pause
    - fast_forward
```

--------------------------------

### Example 2: Dense Button Layout

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Shows a configuration with a high density of buttons across multiple rows. Suitable for remotes with many functions.

```yaml
type: custom:universal-remote-card
remote_id: remote.google_chromecast
title: Example 2
rows:
  - - power
    - channel_up
    - info
    - channel_down
  - - netflix
    - youtube
    - spotify
  - - volume_buttons
  - - dpad
  - - back
    - home
    - tv
  - - rewind
    - play
    - pause
    - fast_forward
```

--------------------------------

### Template Example for Dynamic Configuration

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/configuration.md

Demonstrates using Jinja2-like templating for dynamic button labels and actions based on configuration or context. Useful for creating adaptive interfaces.

```yaml
custom_actions:
  - name: dynamic_button
    label: "{{ config.device or 'Unknown' }}"
    tap_action:
      action: key
      key: "{{ config.platform == 'Android TV' ? 'power' : 'standby' }}"
      
elements:
  - type: slider
    name: brightness
    styles: "--icon-color: {{ value > 128 ? 'yellow' : 'gray' }}"
```

--------------------------------

### RemoteCirclepad Configuration Example

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-circlepad.md

This YAML configuration defines a remote-circlepad named 'dpad' for a media player. It includes tap actions for the center and each direction, along with momentary start, repeat, and end actions for the 'up' direction.

```yaml
type: remote-circlepad
name: dpad
entity_id: media_player.living_room

# Center tap
tap_action:
  action: key
  key: select

# Directional configs
up:
  tap_action:
    action: key
    key: up
  momentary_start_action:
    action: key
    key: up
  momentary_repeat_action:
    action: key
    key: up
    repeat_delay: 100
  momentary_end_action:
    action: key
    key: up_end

down:
  tap_action:
    action: key
    key: down
  # ... similar momentary actions

left:
  tap_action:
    action: key
    key: left
  # ... 

right:
  tap_action:
    action: key
    key: right
  # ...
```

--------------------------------

### Create and Configure Remote Touchpad

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-touchpad.md

Example of creating a remote-touchpad element, setting its configuration including tap, hold, and directional actions, and appending it to the document body.

```javascript
const touchpad = document.createElement('remote-touchpad');
touchpad.hass = hassInstance;
touchpad.config = {
  name: 'navigation',
  entity_id: 'remote.living_room',
  icon: 'mdi:touchpad',
  
  // Center tap
  tap_action: {
    action: 'key',
    key: 'select'
  },
  
  // Directional actions
  up: {
    tap_action: { action: 'key', key: 'up' },
    hold_action: { action: 'key', key: 'up' }
  },
  down: {
    tap_action: { action: 'key', key: 'down' }
  },
  left: {
    tap_action: { action: 'key', key: 'left' }
  },
  right: {
    tap_action: { action: 'key', key: 'right' }
  },
  
  // Multi-pointer
  multi_tap_action: {
    action: 'key',
    key: 'back'
  },
  
  // Drag (optional)
  drag_action: {
    action: 'none'  // Or implement custom drag handling
  }
};
document.body.appendChild(touchpad);
```

--------------------------------

### Example 4: Empty Button Spaces

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Demonstrates how to create empty, button-sized spaces within a row by using `null`. Useful for visual alignment and spacing.

```yaml
type: custom:universal-remote-card
rows:
  - - back
    - home
    - tv
  - - rewind
    - null
    - null
    - fast_forward
```

--------------------------------

### Button Pad (Tap-Based Actions)

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-circlepad.md

Example illustrating a button pad configuration using tap-based actions, including support for both quick taps and long holds.

```APIDOC
## Button Pad (Tap-Based Actions)

### Description
This example demonstrates configuring a circlepad to function as a button pad, where directions trigger distinct actions on tap and hold events.

### Configuration Example

```yaml
up:
  tap_action:
    action: key
    key: up
  hold_action:
    action: perform-action
    perform_action: light.turn_on
    target:
      entity_id: light.ceiling
```

### Behavior Timeline
- **User taps up quickly (50ms press)**: `tap_action` fires (e.g., `up` key).
- **User holds up (600ms press, 500ms hold threshold)**: `hold_action` fires (e.g., `light.turn_on` for `light.ceiling`). Repeat actions can also be configured if desired.
```

--------------------------------

### YAML Layout Definition Example

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/configuration.md

Demonstrates how to define the card's layout using nested arrays for rows and columns. Special shortcuts for common button groups are also shown.

```yaml
rows:
  - power
  - [up, down, left, right]
  - [volume_up, [next, previous], volume_down]

# Special shortcuts expand to predefined layouts:
# - 'volume_buttons': [volume_down, volume_mute, volume_up]
# - 'navigation_buttons': [up, down, left, center, right] in cross pattern
# - 'dpad': 9-button D-pad grid
# - 'numpad': 1-9 number pad
# - 'dialpad': Phone dial pad
# - 'xpad': Xbox-style buttons (Y, X, B, A)
# - 'npad': Nintendo-style buttons (X, Y, A, B)
```

--------------------------------

### Usage Example: Creating and Configuring a Remote Button

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-button.md

Demonstrates how to create a 'remote-button' element dynamically in JavaScript, set its 'hass' and 'config' properties, and append it to the document body.

```javascript
// In HTML
const button = document.createElement('remote-button');
button.hass = hassInstance;
button.config = {
  name: 'power',
  icon: 'mdi:power',
  tap_action: {
    action: 'key',
    key: 'power',
    remote_id: 'remote.living_room'
  },
  double_tap_action: {
    action: 'none'
  },
  hold_action: {
    action: 'key',
    key: 'power',
    remote_id: 'remote.living_room'
  }
};
document.body.appendChild(button);
```

--------------------------------

### Send Action Example

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/base-remote-element.md

Demonstrates how to send a specific action to the element. This method handles the retrieval, rendering, and execution of actions, including confirmation dialogs.

```typescript
await element.sendAction('tap_action');
```

--------------------------------

### RemoteButton onClick Behavior Example

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-button.md

Illustrates the timing and logic for single and double-tap actions based on user input and the double-tap window.

```typescript
// User taps → clickCount = 1 → starts 200ms timer
// User taps again within 200ms → clickCount = 2 → fires double_tap_action
// User does not tap again → timer expires → fires tap_action
```

--------------------------------

### Example 3: Minimalist Layout with Vertical Slider

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Illustrates a simplified remote layout featuring a vertical slider for volume control. Requires `media_player_id` for volume attribute.

```yaml
type: custom:universal-remote-card
remote_id: remote.google_chromecast
media_player_id: media_player.google_chromecast
title: Example 3
rows:
  - - power
    - netflix
    - youtube
    - spotify
  - - touchpad
    - slider
  - - back
    - home
custom_actions:
  - type: slider
    name: slider
    range:
      - 0
      - 1
    step: 0.01
    value_attribute: volume_level
    tap_action:
      action: perform-action
      perform_action: media_player.volume_set
      data:
        volume_level: '{{ value | float }}'
    vertical: true
    icon: mdi:volume-high
```

--------------------------------

### CSS Styling for Circlepad Parts

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-circlepad.md

Provides an example of how to style specific parts of the remote-circlepad component, such as the icon and label for the 'up' and 'down' directions.

```css
remote-circlepad #up::part(icon) {
  color: blue;
  font-weight: bold;
}

remote-circlepad #down::part(label) {
  font-size: 10px;
}
```

--------------------------------

### Momentary Button Actions Configuration

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Configure momentary start, end, and repeat actions for buttons. The momentary end action YAML is shown here for convenience.

```yaml
momentary:
  start: "/api/remote/press?key=power"
  end: "/api/remote/release?key=power"
  repeat: "/api/remote/press?key=power"
```

--------------------------------

### RemoteTouchpad Swipe and Drag Examples

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-touchpad.md

Illustrates the behavior of swipe and drag actions on the RemoteTouchpad. Shows how directional actions are fired on swipes and how drag actions are fired repeatedly during sustained movement.

```typescript
// User swipes right 50px
  → direction = 'right'
  → Fires right tap_action
  → If right hold_action defined, starts repeat timer

// User slowly drags (drag action defined)
  → Fires drag_action repeatedly
  → Each fire with repeat_delay
```

--------------------------------

### Continuous Gesture Pad Configuration

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-circlepad.md

Configures a circlepad for continuous gestures, defining momentary start, repeat, and end actions for each direction using scripts.

```yaml
type: remote-circlepad
name: gestures

up:
  momentary_start_action:
    action: perform-action
    perform_action: script.gesture_up_start
  momentary_repeat_action:
    action: perform-action
    perform_action: script.gesture_up_hold
    repeat_delay: 200
  momentary_end_action:
    action: perform-action
    perform_action: script.gesture_up_end

down:
  # Similar momentary actions

left:
  # Similar momentary actions

right:
  # Similar momentary actions
```

--------------------------------

### Gamepad Layout with Custom Button Styles

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Configure a gamepad layout with a circlepad and custom-styled buttons (A, B, X, Y). This example demonstrates how to apply specific styles to individual buttons and the circlepad element.

```yaml
type: custom:universal-remote-card
remote_id: remote.google_chromecast
rows:
  - - l1
    - l2
    - l3
    - r3
    - r2
    - r1
  - - circlepad
    - xpad
  - - null
    - null
    - select
    - start
    - null
    - null
custom_actions:
  - type: button
    name: a
    tap_action:
      action: key
      key: BUTTON_A
    icon: mdi:alpha-a-circle
    styles: |-
      :host {
        padding: 0;
        margin: 0;
        --icon-size: 48px;
        --icon-color: #C1121C;
      }
  - type: button
    name: b
    tap_action:
      action: key
      key: BUTTON_B
    icon: mdi:alpha-b-circle
    styles: |-
      :host {
        padding: 0;
        margin: 0;
        --icon-size: 48px;
        --icon-color: #F7BA0B;
      }
  - type: button
    name: x
    tap_action:
      action: key
      key: BUTTON_X
    icon: mdi:alpha-x-circle
    styles: |-
      :host {
        padding: 0;
        margin: 0;
        --icon-size: 48px;
        --icon-color: #00387b;
      }
  - type: button
    name: 'y'
    tap_action:
      action: key
      key: BUTTON_Y
    icon: mdi:alpha-y-circle
    styles: |-
      :host {
        padding: 0;
        margin: 0;
        --icon-size: 48px;
        --icon-color: #007243;
      }
styles: |-
  #circlepad {
    width: 175px;
  }
  #circlepad::part(center) {
    visibility: hidden;
  }
  remote-button {
    background: var(--lovelace-background, var(--primary-background-color, #6f767d));;
    padding: 8px;
    margin: 4px;
    border-radius: 24px;
    --icon-size: 24px;
  }
```

--------------------------------

### Template Variable Access Example

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/utilities.md

Shows how to access various template variables within Nunjucks expressions for card configuration and dynamic rendering.

```nunjucks
{{ config.remote_id }}          {# Card config #}
{{ value }}                     {# Current entity value #}
{{ hold_secs }}                 {# Seconds held #}
{{ unit }}                      {# Unit of measurement #}
{{ initialX }}, {{ currentX }}  {# Pointer positions #}
{{ deltaX }}, {{ deltaY }}      {# Movement delta #}
{{ render(str) }}               {# Recursive render #}
```

--------------------------------

### Usage Example: Creating and Configuring a Remote Slider

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-slider.md

Demonstrates how to create a remote-slider element, set its configuration including HASS integration, and append it to the document body.

```typescript
const slider = document.createElement('remote-slider');
slider.hass = hassInstance;
slider.config = {
  name: 'volume',
  entity_id: 'media_player.living_room',
  range: [0, 100],
  step: 1,
  vertical: false,
  value_from_hass_delay: true,
  tap_action: {
    action: 'media_player.volume_set',
    target: { entity_id: 'media_player.living_room' },
    data: { volume_level: '{{ value / 100 }}' }
  }
};
document.body.appendChild(slider);
```

--------------------------------

### Path Types Example

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/utilities.md

Illustrates dot-notation for accessing nested properties and array elements in deep object paths.

```typescript
'config.entity_id'      // Nested property
'data.color.0'          // Array element
'target.entity_id.2'    // Nested array element
```

--------------------------------

### Get Configuration Editor Element

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Provides the custom element for the card's configuration UI, as required by Home Assistant's integration system.

```typescript
static getConfigElement(): HTMLElement
```

--------------------------------

### Full Universal Remote Card Configuration

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/configuration.md

An extensive configuration example for the Universal Remote Card, including title, platform, IDs, autofill, haptics, timing, custom actions, icons, and complex row layouts.

```yaml
type: custom:universal-remote-card
title: Living Room
platform: Fire TV
remote_id: remote.living_room
media_player_id: media_player.living_room
keyboard_id: remote.adb
config_entry_id: abc123xyz
device: living_room_device

autofill_entity_id: true
haptics: true
hold_time: 500
repeat_delay: 100
double_tap_window: 200

custom_actions:
  - name: netflix
    icon: mdi:netflix
    tap_action:
      action: source
      source: Netflix

custom_icons:
  - name: my_icon
    path: M10 10 L20 20

styles: |
  .row {
    gap: 12px;
  }
  remote-button {
    background: rgba(0,0,0,0.2);
  }
  #power::part(icon) {
    color: red;
  }

rows:
  - [back, power, home]
  - [touchpad]
  - [rewind, previous, play_pause, next, fast_forward]
  - [[volume_buttons], [navigation_buttons]]
```

--------------------------------

### Get Default Actions for Platform

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/utilities.md

Loads default key and source definitions for a given platform. Used by the card to populate element lookup. Returns a tuple of default keys and default sources.

```typescript
export function getDefaultActions(platform: Platform): [IElementConfig[], IElementConfig[]]
```

```typescript
const [keys, sources] = getDefaultActions('Android TV');
// keys = [{ name: 'power', icon: 'mdi:power', tap_action: {...} }, ...]
// sources = [{ name: 'netflix', icon: 'mdi:netflix', ... }, ...]

const element = keys.find(k => k.name === 'power');
// element.tap_action.key = 'power'
// element.tap_action.platform = 'Android TV'
```

--------------------------------

### RemoteButton onPointerDown Behavior Example

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-button.md

Describes scenarios for hold and momentary actions, including repeat modes and timing based on configuration properties like hold_time and repeat_delay.

```typescript
// User holds button for 500ms → fires hold_action
// Hold action set to 'repeat' → starts repeating tap_action every 100ms
```

--------------------------------

### Get Element Configuration by Name

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Illustrates how to retrieve the configuration for a specific element using its name. This method searches for custom actions and default keys/sources.

```typescript
const powerConfig = card.getElementConfig('power');
// Returns: { name: 'power', icon: 'mdi:power', tap_action: { action: 'key', key: 'power' }, ... }
```

--------------------------------

### RGB Remote Configuration with Broadlink

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Configure a remote for controlling TV RGB lights using a Broadlink RM4 Pro. This example defines a grid of buttons for color selection and basic controls like power and navigation. It also includes custom actions for specific colors and power states with associated icons and styles.

```yaml
type: custom:universal-remote-card
remote_id: remote.rm4_pro
title: TV RGB
rows:
  - - power
    - null
    - poweroff
  - - up
    - null
    - down
  - - red
    - green
    - dark_blue
  - - yellow
    - yellow_orange
    - orange
  - - orange_light
    - cyan
    - blue
  - - pink
    - green_light
    - white
custom_actions:
  - icon: mdi:circle
    tap_action:
      action: key
      key: red
    name: red
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: red;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: green
    name: green
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: green;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: dark_blue
    name: dark_blue
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: darkblue;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: yellow
    name: yellow
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: yellow;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: yellow_orange
    name: yellow_orange
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: goldenrod;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: orange
    name: orange
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: orange;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: orange_light
    name: orange_light
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: lightsalmon;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: cyan
    name: cyan
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: cyan;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: blue
    name: blue
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: blue;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: pink
    name: pink
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: magenta;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: green_light
    name: green_light
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: mediumseagreen;
      }
  - icon: mdi:circle
    tap_action:
      action: key
      key: white
    name: white
    type: button
    styles: |-
      :host {
        --icon-size: 42px;
        --icon-color: white;
      }
  - type: button
    name: power
    tap_action:
      action: key
      key: on
    icon: mdi:power
    styles: |-
      :host {
        --icon-color: green;
      }
  - icon: mdi:power
    tap_action:
      action: key
      key: off
    name: poweroff
    type: button
    styles: |-
      :host {
        --icon-color: red;
      }
  - type: button
    name: up
    tap_action:
      action: key
      key: brightness+
    hold_action:
      action: repeat
    icon: mdi:chevron-up
  - type: button
    name: down
    tap_action:
      action: key
      key: brightness-
    hold_action:
      action: repeat
    icon: mdi:chevron-down
platform: Generic Remote
```

--------------------------------

### source(action: IAction): void

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/base-remote-element.md

Selects a source/input on media devices. Platform-specific implementation.

```APIDOC
## source(action: IAction): void

### Description
Selects a source/input on media devices. Platform-specific implementation.

### Method Signature
`source(action: IAction): void`

### Parameters
#### Parameters
- **action** (IAction) - Yes - Action with source property

### Returns
`void`

### Platform Handling

| Platform | Method | Service Call |
|---|---|---|
| Kodi | `Addons.ExecuteAddon` | `kodi.call_method` |
| Fire TV, Apple TV, Roku, Samsung TV, LG webOS | `media_player.select_source` | — |
| Sony BRAVIA | `media_player.play_media` | media_content_type='app' |
| Yamaha YNCA | `media_player.play_media` | media_content_type='music' |
| Android TV | `remote.turn_on` | activity parameter |

### Example
```typescript
action = { action: 'source', source: 'Netflix', media_player_id: 'media_player.tv' };
element.source(action);
// Calls: hass.callService('media_player', 'select_source', ...)
```
```

--------------------------------

### Kodi Key Action

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Use this to send a key command to Kodi by specifying the method and command.

```yaml
{
  method: action.key
}
```

--------------------------------

### Key Files Structure

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/overview.md

Illustrates the directory and file organization of the Universal Remote Card project, highlighting the main component, helper classes, models, and utilities.

```tree
src/
├── universal-remote-card.ts          # Main card component
├── universal-remote-card-editor.ts   # Config UI component
├── classes/
│   ├── base-remote-element.ts        # Base class for all remote elements
│   ├── remote-button.ts              # Button implementation
│   ├── remote-slider.ts              # Slider implementation
│   ├── remote-touchpad.ts            # Touchpad implementation
│   ├── remote-circlepad.ts           # Circlepad implementation
│   ├── remote-dialog.ts              # Dialog container
│   └── dialogs/keyboards/            # Platform-specific keyboards
├── models/
│   ├── interfaces/                   # TypeScript interfaces
│   ├── maps/                         # Platform-specific default keys/sources
│   └── constants.ts                  # Configuration defaults
└── utils/
    ├── cardHelpers.ts                # Confirmation dialogs, actions
    ├── defaultActions.ts             # Platform key/source loading
    ├── deepKeys.ts                   # Deep object traversal
    └── styles.ts                     # CSS helpers
```

--------------------------------

### Create and Configure UniversalRemoteCard

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Demonstrates how to create an instance of the UniversalRemoteCard and set its configuration. This is typically done when initializing the card in a Home Assistant dashboard.

```typescript
const card = document.createElement('universal-remote-card');
card.setConfig({
  platform: 'Android TV',
  remote_id: 'remote.living_room',
  rows: [['power', 'home'], ['up', 'down']]
});
```

--------------------------------

### Android TV Source Action

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Use this to turn on an Android TV device by specifying the activity to launch.

```yaml
{
  activity: action.source
}
```

--------------------------------

### buildVolumeButtons

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Builds a trio of volume control buttons: volume down, volume mute, and volume up.

```APIDOC
## `buildVolumeButtons(): TemplateResult[]`

### Description

Builds volume control button trio: volume_down, volume_mute, volume_up.

### Parameters

#### Path Parameters

* None

#### Query Parameters

* None

#### Request Body

* None

### Returns

* `TemplateResult[]` - Array of three button templates

### Example

```typescript
// In layout: ['volume_buttons'] expands via buildElements() which calls this
const buttons = card.buildVolumeButtons();
// Returns 3 button templates
```
```

--------------------------------

### firstUpdated

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Lifecycle method called after the first render. It registers the `dialog-show` event listener for keyboard and search dialogs.

```APIDOC
## `firstUpdated()`

### Description
Called after first render. Registers `dialog-show` event listener for keyboard/search dialogs.

### Method Signature
```typescript
firstUpdated(): void
```
```

--------------------------------

### Window Integration

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Integrates the component with Home Assistant by adding it to the `window.customCards` array, enabling discovery and providing configuration suggestions.

```APIDOC
## Window Integration

The component adds itself to the `window.customCards` array for Home Assistant discovery:

```typescript
window.customCards.push({
  type: 'universal-remote-card',
  name: 'Universal Remote Card',
  description: 'Super customizable universal remote card',
  preview: true,
  documentationURL: 'https://github.com/Nerwyn/universal-remote-card',
  getEntitySuggestion: (hass, entityId) => { /* ... */ }
});
```

Implements `getEntitySuggestion()` to auto-populate config when card created from entity.
```

--------------------------------

### Get Directional Actions

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-touchpad.md

Retrieves action configuration based on the current swipe direction. Falls back to the main touchpad configuration if a direction-specific action is not defined.

```typescript
getDirectionActions(): IActions
```

--------------------------------

### getStubConfig

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Returns the minimal working configuration for a new Universal Remote Card. This is useful for initializing a card from scratch.

```APIDOC
## `static getStubConfig()`

### Description
Returns minimal working configuration. Used when creating a new card from scratch.

### Returns
`IConfig` - Default stub configuration

### Example Output
```yaml
type: custom:universal-remote-card
rows:
  - - back
    - power
    - home
    - menu
  - - touchpad
    - - volume_buttons
  - - rewind
    - previous
    - play_pause
    - next
    - fast_forward
```
```

--------------------------------

### Circlepad Layout Integration

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-circlepad.md

Demonstrates how to integrate the circlepad component within the layout of the universal-remote-card, showing different placement options.

```yaml
rows:
  - [power, circlepad, info]  # Inline with other elements
  - [circlepad]               # Full width
  - [[circlepad], buttons]    # In column with buttons
```

--------------------------------

### buildTouchpad

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Creates a touchpad element, returning a `<remote-touchpad>` component.

```APIDOC
## `buildTouchpad(elementName: string, actions: ITouchpadConfig): TemplateResult`

### Description

Creates a touchpad element. Returns `<remote-touchpad>` component.

### Parameters

#### Path Parameters

* None

#### Query Parameters

* None

#### Request Body

* None

### Parameters

* **elementName** (string) - Required - Element name for ID attribute
* **actions** (ITouchpadConfig) - Required - Touchpad configuration

### Returns

* `TemplateResult` - Lit HTML template
```

--------------------------------

### D-Pad Navigation Momentary Actions

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-circlepad.md

This YAML snippet configures momentary actions for the 'up' direction of a circlepad, demonstrating start, repeat, and end events with a specified repeat delay.

```yaml
up:
  momentary_start_action:
    action: key
    key: up_down
  momentary_repeat_action:
    action: key
    key: up_repeat
    repeat_delay: 100
  momentary_end_action:
    action: key
    key: up_up
```

--------------------------------

### Temporal Action Type Definition

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/types.md

Defines specific gesture patterns for actions, including taps, holds, and multi-pointer interactions. Momentary actions track the start and end of a press.

```typescript
type ActionType = 
  | 'tap_action'
  | 'hold_action'
  | 'double_tap_action'
  | 'multi_tap_action'
  | 'multi_hold_action'
  | 'multi_double_tap_action'
  | 'momentary_start_action'
  | 'momentary_repeat_action'
  | 'momentary_end_action'
  | 'drag_action'
  | 'multi_drag_action'
```

--------------------------------

### Deep Get Object Value

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/utilities.md

Reads a nested value from an object using a dot-notation path. Useful for accessing configuration or state data. Returns undefined if the path does not exist.

```typescript
export function deepGet(obj: object, path: string): any
```

```typescript
const obj = { data: { brightness: 255 } };
const value = deepGet(obj, 'data.brightness');
// value = 255

const missing = deepGet(obj, 'data.color');
// missing = undefined
```

--------------------------------

### getConfigElement

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Provides the configuration UI element for the universal remote card, as required by Home Assistant for card configuration.

```APIDOC
## `static getConfigElement()`

### Description
Returns the configuration UI element. Called by Home Assistant.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Method
- None (TypeScript static method)

### Endpoint
- None (TypeScript static method)

### Request Example
```typescript
const configElement = universalRemoteCard.getConfigElement();
```

### Response
#### Success Response
- `HTMLElement`: New `universal-remote-card-editor` element

#### Response Example
```html
// Returns an HTMLElement representing the card editor
```
```

--------------------------------

### Templating Action and Data Fields

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Demonstrates how to use YAML templating for the 'action' and 'data' fields, allowing dynamic command execution based on conditions.

```yaml
action: light.turn_{{ iif(checked, 'on', 'off') }}
data: |
  {% if value == 'off' %}
  brightness_pct: 100
  {% endif %}
```

--------------------------------

### Get Deep Object Keys

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/utilities.md

Recursively walks an object and returns an array of dot-notation paths to all primitive values. Used for deep template rendering. Supports array index notation.

```typescript
export function getDeepKeys(obj: object): string[]
```

```typescript
const obj = {
  action: 'perform-action',
  perform_action: 'light.turn_on',
  data: {
    brightness: 255,
    color: [255, 128, 0]
  },
  target: {
    entity_id: 'light.bedroom'
  }
};

const keys = getDeepKeys(obj);
// [
//   'action',
//   'perform_action',
//   'data.brightness',
//   'data.color.0',
//   'data.color.1',
//   'data.color.2',
//   'target.entity_id'
// ]
```

--------------------------------

### showDialog

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-dialog.md

Opens the keyboard dialog with the specified action configuration. This method is typically called via a 'dialog-show' event.

```APIDOC
## showDialog(config: IAction): void

### Description
Opens keyboard dialog with specified action configuration. Called via `dialog-show` event.

### Method
`showDialog(config: IAction): void`

### Parameters
#### Parameters
- **config** (IAction) - Required - Action configuration for keyboard

### Returns
`void`

### Behavior
1. Sets config from action
2. Sets open=true (makes dialog visible)
3. Delays 250ms, then sets fadedIn=true (triggers CSS fade-in)
4. Calls `showModal()` on dialog element
5. Registers popstate listener to close on browser back

### Example
```typescript
// When user taps keyboard action:
const action = {
  action: 'keyboard',
  keyboard_id: 'remote.adb',
  platform: 'Android TV'
};
dialog.showDialog(action);
// Dialog opens with Android TV keyboard
```
```

--------------------------------

### Get Card Display Height

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Calculates and returns the card's height for Home Assistant's layout system. It counts the number of layout rows and adds one if a title is present.

```typescript
getCardSize(): number
```

--------------------------------

### url(action: IAction): void

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/base-remote-element.md

Opens an external URL. Prepends 'https://' if no protocol specified.

```APIDOC
## url(action: IAction): void

### Description
Opens an external URL. Prepends 'https://' if no protocol specified.

### Method Signature
`url(action: IAction): void`

### Parameters
#### Parameters
- **action** (IAction) - Yes - Action with url_path property

### Returns
`void`

### Example
```typescript
action = { action: 'url', url_path: 'www.example.com' };
element.url(action);
// Opens: https://www.example.com
```
```

--------------------------------

### buildButton

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Creates a button element from configuration. If the configuration is empty, it returns an empty div. Otherwise, it returns a `<remote-button>` component with its properties set.

```APIDOC
## `buildButton(elementName: string, actions: IButtonConfig): TemplateResult`

### Description

Creates a button element from configuration. If configuration is empty, returns empty div. Otherwise returns `<remote-button>` with id, title, hass, config, and custom icons properties set.

### Parameters

#### Path Parameters

* None

#### Query Parameters

* None

#### Request Body

* None

### Parameters

* **elementName** (string) - Required - Element name for ID attribute
* **actions** (IButtonConfig) - Required - Button configuration

### Returns

* `TemplateResult` - Lit HTML template

### Example

```typescript
const result = card.buildButton('power', { name: 'power', icon: 'mdi:power' });
// Returns: html`<remote-button id="power" title="Power" .hass=${hass} .config=${config} .icons=${customIcons}></remote-button>`
```
```

--------------------------------

### static get styles()

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-button.md

Provides the static styles for the remote button component. It combines parent styles with button-specific styling, defining layout, pointer handling, ripple animations, and focus states.

```APIDOC
## static get styles()

### Description
Combines parent styles with button-specific styling. Defines button layout, pointer handling, ripple animation, and focus states.

### Method
`CSSResult | CSSResult[]`

### Returns
`CSSResult | CSSResult[]`

### Key Styles
- Button is flex container, fills parent space
- Pointer-events: all (allows interaction)
- After pseudo-element for ripple effect
- Transition on ripple opacity (180ms ease-in-out)
```

--------------------------------

### buildLabel(label?: string)

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/base-remote-element.md

Creates a label element for displaying text. Returns an empty string if no label is provided.

```APIDOC
## buildLabel(label?: string)

### Description
Creates label element. Returns empty string if no label.

### Parameters
#### Path Parameters
- **label** (string) - Optional - Label text

### Method
TemplateResult

### Returns
TemplateResult - Empty or label element

### Example
```typescript
const result = element.buildLabel('Power');
// Returns: html`<pre class="label">Power</pre>`
```
```

--------------------------------

### Get Action with Fallback Logic

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/base-remote-element.md

Illustrates retrieving an action with built-in fallback mechanisms. It prioritizes specific actions like multi-hold over simpler ones like tap, ensuring a robust action handling.

```typescript
const action = element.getAction('multi_hold_action');
// Returns multi_hold_action if defined, otherwise hold_action, etc.
```

--------------------------------

### Denon/Marantz Receiver Touchpad Remote

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Configure a touchpad for a Denon/Marantz receiver, mapping directional inputs and tap actions to specific Denon AVR commands. This setup allows for precise control using a touchpad interface.

```yaml
type: custom:universal-remote-card
media_player_id: media_player.marantz_sr7013
autofill_entity_id: true
rows:
  - - touchpad
custom_actions:
  - type: touchpad
    name: touchpad
    tap_action:
      action: perform-action
      perform_action: denonavr.get_command
      data:
        command: /goform/formiPhoneAppDirect.xml?MNENT
    up:
      tap_action:
        action: perform-action
        perform_action: denonavr.get_command
        data:
          command: /goform/formiPhoneAppDirect.xml?MNCUP
      hold_action:
        action: repeat
    down:
      tap_action:
        action: perform-action
        perform_action: denonavr.get_command
        data:
          command: /goform/formiPhoneAppDirect.xml?MNCDN
      hold_action:
        action: repeat
    left:
      tap_action:
        action: perform-action
        perform_action: denonavr.get_command
        data:
          command: /goform/formiPhoneAppDirect.xml?MNCLT
      hold_action:
        action: repeat
    right:
      tap_action:
        action: perform-action
        perform_action: denonavr.get_command
        data:
          command: /goform/formiPhoneAppDirect.xml?MNCRT
      hold_action:
        action: repeat
    styles: |-
      toucharea {
        height: 200px;
      }
    double_tap_action:
      action: perform-action
      perform_action: denonavr.get_command
      data:
        command: /goform/formiPhoneAppDirect.xml?MNRTN
```

--------------------------------

### Fire TV, Roku, LG webOS, Samsung TV, Apple TV Source Action

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Use this to select a source on various TV platforms by specifying the source name.

```yaml
{
  source: action.source
}
```

--------------------------------

### Volume Control with Remote Slider

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-slider.md

Configuration example for using the universal-remote-card's slider to control the volume of a media player. It specifies the entity, value attribute, range, step, and defines a tap action to set the volume.

```yaml
type: custom:universal-remote-card
rows:
  - type: slider
    name: volume
    entity_id: media_player.living_room
    value_attribute: volume_level
    range: [0, 1]
    step: 0.01
    value_from_hass_delay: true
    tap_action:
      action: perform-action
      perform_action: media_player.volume_set
      target:
        entity_id: media_player.living_room
      data:
        volume_level: "{{ value }}"
```

--------------------------------

### Kodi Source Action

Source: https://github.com/nerwyn/universal-remote-card/blob/main/README.md

Format for executing an addon on Kodi, using the source as the addon ID.

```yaml
{
  addonid: action.source,
  method: "Addons.ExecuteAddon"
}
```

--------------------------------

### buildNavButtons

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Builds a navigation button layout with up, left, center, right, and down buttons. It mirrors the left/right buttons if RTL mode is detected.

```APIDOC
## `buildNavButtons(): TemplateResult`

### Description

Builds navigation button layout: up at top, left/center/right in middle row, down at bottom. Mirrors left/right buttons if RTL mode detected.

### Parameters

#### Path Parameters

* None

#### Query Parameters

* None

#### Request Body

* None

### Returns

* `TemplateResult` - Lit HTML template
```

--------------------------------

### Game Controller Layout Configuration

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-circlepad.md

Sets up a circlepad to function as a game controller, mapping directional taps to specific game actions (e.g., 'y', 'a', 'x', 'b') and customizing icons.

```yaml
type: remote-circlepad
name: gamepad
styles: "background: rgba(0,0,0,0.3);"

up:
  icon: mdi:arrow-up
  tap_action:
    action: key
    key: y
  
down:
  icon: mdi:arrow-down
  tap_action:
    action: key
    key: a

left:
  icon: mdi:arrow-left
  tap_action:
    action: key
    key: x

right:
  icon: mdi:arrow-right
  tap_action:
    action: key
    key: b
```

--------------------------------

### Home Assistant Window Integration

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Adds the Universal Remote Card to the `window.customCards` array for Home Assistant discovery. Implements `getEntitySuggestion` for auto-populating configuration.

```typescript
window.customCards.push({
  type: 'universal-remote-card',
  name: 'Universal Remote Card',
  description: 'Super customizable universal remote card',
  preview: true,
  documentationURL: 'https://github.com/Nerwyn/universal-remote-card',
  getEntitySuggestion: (hass, entityId) => { /* ... */ }
});
```

--------------------------------

### buildCirclepad

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Creates a circlepad element, returning a `<remote-circlepad>` component.

```APIDOC
## `buildCirclepad(elementName: string, actions: ICirclepadConfig): TemplateResult`

### Description

Creates a circlepad element. Returns `<remote-circlepad>` component.

### Parameters

#### Path Parameters

* None

#### Query Parameters

* None

#### Request Body

* None

### Parameters

* **elementName** (string) - Required - Element name for ID attribute
* **actions** (ICirclepadConfig) - Required - Circlepad configuration

### Returns

* `TemplateResult` - Lit HTML template
```

--------------------------------

### Select Media Source

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/base-remote-element.md

Selects a source or input on media devices. The implementation is platform-specific. Use this to switch between inputs like Netflix or specific apps.

```typescript
action = { action: 'source', source: 'Netflix', media_player_id: 'media_player.tv' };
element.source(action);
// Calls: hass.callService('media_player', 'select_source', ...)
```

--------------------------------

### Build Touchpad Element

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/universal-remote-card.md

Creates a touchpad element. Returns a `<remote-touchpad>` component.

```typescript
buildTouchpad(elementName: string, actions: ITouchpadConfig): TemplateResult
```

--------------------------------

### showDialog Method

Source: https://github.com/nerwyn/universal-remote-card/blob/main/_autodocs/api-reference/remote-dialog.md

Opens the keyboard dialog with the specified action configuration. This method is called via a 'dialog-show' event.

```typescript
showDialog(config: IAction): void
```

```typescript
element.keyboard(action);
// Card listener routes to showDialog()
```

```typescript
// When user taps keyboard action:
const action = {
  action: 'keyboard',
  keyboard_id: 'remote.adb',
  platform: 'Android TV'
};
dialog.showDialog(action);
// Dialog opens with Android TV keyboard
```