### Navigate Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example of a 'navigate' action type used in configuration.

```yaml
{ action: 'navigate', navigation_path: '/lovelace/0' }
```

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

### Assist Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example of an 'assist' action type used in configuration.

```yaml
{ action: 'assist', pipeline_id: 'last_used' }
```

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

### None Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example of a 'none' action type used in configuration.

```yaml
{ action: 'none' }
```

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

### Perform Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example of a 'perform-action' action type used in configuration.

```yaml
{ action: 'perform-action', perform_action: 'light.turn_on' }
```

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

### URL Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example of a 'url' action type used in configuration.

```yaml
{ action: 'url', url_path: 'example.com' }
```

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

### Repeat Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example of a 'repeat' action type used in configuration.

```yaml
{ action: 'repeat', repeat_delay: 100 }
```

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

### Selector Feature Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example configuration for a selector feature, demonstrating button-based options.

```yaml
{ type: 'selector', options: [...] }
```

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

### More Info Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/configuration.md

Example of configuring a 'more-info' action to display detailed information about an entity.

```yaml
tap_action:
  action: more-info
  target:
    entity_id: light.living_room
```

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

### Dropdown Feature Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example configuration for a dropdown feature, including options and their labels.

```yaml
{ type: 'dropdown', options: [{option: 'bright', label: 'Bright'}] }
```

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

### Eval Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example of an 'eval' action type used in configuration.

```yaml
{ action: 'eval', eval: 'console.log(this.value)' }
```

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

### Example with Confirmation

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/configuration.md

Demonstrates how to apply a confirmation dialog to a service call action, requiring user consent before execution.

```yaml
tap_action:
  action: perform-action
  perform_action: light.turn_off
  target:
    entity_id: light.living_room
  confirmation:
    text: Are you sure you want to turn off the light?
    exemptions:
      - user: some_user_id
```

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

### Toggle Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/configuration.md

Example of configuring a 'toggle' action, which is used to toggle the state of an entity.

```yaml
tap_action:
  action: toggle
  target:
    entity_id: light.living_room
```

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

### Input Feature Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example configuration for an input feature, specifying its type, range, and validation.

```yaml
{ type: 'input', thumb: 'number', range: [0, 100] }
```

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

### Toggle Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example of a 'toggle' action type used in API reference.

```yaml
{ action: 'toggle', target: { entity_id: 'light.living_room' } }
```

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

### More Info Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example of a 'more-info' action type used in API reference.

```yaml
{ action: 'more-info', target: { entity_id: 'light.living_room' } }
```

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

### Usage Example: Transparent Card with Custom Height

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-cards.md

Shows how to configure the custom-features-card to be transparent and set a custom height for its features, using a selector feature as an example.

```yaml
type: custom:custom-features-card
transparent: true
feature_height: 60
features:
  - type: custom:service-call
    entries:
      - type: selector
        entity_id: input_select.mode
        options:
          - option: auto
            icon: mdi:auto-mode
          - option: manual
            icon: mdi:hand-raise
```

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

### Dropdown Feature Configuration Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-feature-classes.md

Example YAML configuration for a dropdown feature. This is used to select an option from a list, with custom actions defined for each option.

```yaml
type: dropdown
entity_id: input_select.room_mode
value_attribute: state
icon: mdi:menu
label: Mode
thumb: md3-standard
options:
  - option: bright
    icon: mdi:brightness-high
    label: Bright
    tap_action:
      action: perform-action
      perform_action: input_select.select_option
      target:
        entity_id: input_select.room_mode
      data:
        option: bright
  - option: dim
    icon: mdi:brightness-4
    label: Dim
    tap_action:
      action: perform-action
      perform_action: input_select.select_option
      target:
        entity_id: input_select.room_mode
      data:
        option: dim
autofill_entity_id: true
styles: |
  :host {
    flex-basis: 150%;
  }
  .option {
    min-width: 0;
  }
```

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

### Spinbox Feature Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example configuration for a spinbox feature, defining its type, range, and step.

```yaml
{ type: 'spinbox', range: [15, 30], step: 0.5 }
```

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

### Toggle Feature Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example configuration for a toggle feature, specifying its type, checked icon, and thumb style.

```yaml
{ type: 'toggle', checked_icon: 'mdi:lightbulb', thumb: 'md3-switch' }
```

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

### IConfig Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/types.md

Example configuration for a custom service call feature row. Demonstrates setting type, styles, and defining entries with specific properties.

```typescript
{
  type: 'custom:service-call',
  styles: ':host { --feature-height: 50px; }',
  entries: [
    { type: 'button', icon: 'mdi:light-on', ... },
    { type: 'slider', range: [0, 100], ... }
  ]
}
```

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

### Custom Feature Input Example Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-feature-classes.md

Example configuration for a custom text input feature. It specifies the type, entity, thumb, icon, label, and tap action for setting the input's value.

```yaml
type: input
entity_id: input_text.note
thumb: text
icon: mdi:pencil
label: Note
tap_action:
  action: perform-action
  perform_action: input_text.set_value
  target:
    entity_id: input_text.note
  data:
    value: '{{ value }}'
styles: |
  :host {
    flex-basis: 300%;
  }
```

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

### Example Row Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/configuration.md

Demonstrates a complete YAML configuration for a custom features row, including styling and individual feature entries like buttons and sliders.

```yaml
type: tile
entity: light.living_room
features:
  - type: custom:service-call
    styles: |
      :host {
        --feature-height: 50px;
        --feature-button-spacing: 8px;
        --feature-border-radius: 8px;
      }
    entries:
      - type: button
        icon: mdi:light-on
        label: On
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            entity_id: light.living_room
      
      - type: slider
        icon: mdi:brightness-4
        range: [0, 100]
        step: 1
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            entity_id: light.living_room
          data:
            brightness_pct: '{{ value | int }}'
```

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

### Button Feature Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example configuration for a button feature, specifying its type, icon, and thumbnail style.

```yaml
{ type: 'button', icon: 'mdi:light-on', thumb: 'md3-filled' }
```

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

### Usage Example: Simple Stack Layout

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-cards.md

Demonstrates a basic usage of custom-features-card to create a stack of service call features, including buttons and a slider.

```yaml
type: custom:custom-features-card
features:
  - type: custom:service-call
    entries:
      - type: button
        icon: mdi:light-on
        label: Light On
      - type: button
        icon: mdi:light-off
        label: Light Off
  
  - type: custom:service-call
    entries:
      - type: slider
        range: [0, 100]
        step: 1
```

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

### Fire DOM Event Action Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example of a 'fire-dom-event' action type used in configuration.

```yaml
{ action: 'fire-dom-event', event_type: 'll-custom' }
```

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

### Example Custom Features Card Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/configuration.md

A complete example of a custom features card configuration, setting transparency, feature height, and defining service call entries.

```yaml
type: custom:custom-features-card
transparent: true
feature_height: 50
features:
  - type: custom:service-call
    entries:
      - type: selector
        entity_id: input_select.room_preset
        options:
          - option: bright
            icon: mdi:brightness-high
            label: Bright
          - option: dim
            icon: mdi:brightness-low
            label: Dim
          - option: movie
            icon: mdi:movie
            label: Movie
```

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

### CustomFeatureToggle Configuration Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-feature-classes.md

Example configuration for a toggle feature. This snippet shows how to set up a toggle for a light entity, including custom icons, labels, and tap actions.

```yaml
type: toggle
entity_id: light.living_room
icon: mdi:light-on
checked_icon: mdi:lightbulb
unchecked_icon: mdi:lightbulb-outline
label: Light
thumb: md3-switch
tap_action:
  action: toggle
  target:
    entity_id: light.living_room
checked_values: ['on', 'true']
styles: |
  :host {
    --color: var(--feature-color);
  }
haptics: true
```

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

### Selector Feature Configuration Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-feature-classes.md

Example YAML configuration for a selector feature. This allows selection of an option, with options for auto-filling entity IDs and custom styling.

```yaml
type: selector
entity_id: input_select.theme
value_attribute: state
autofill_entity_id: true
options:
  - option: light
    icon: mdi:white-balance-sunny
    label: Light
    tap_action:
      action: perform-action
      perform_action: input_select.select_option
      target:
        entity_id: input_select.theme
      data:
        option: light
  - option: dark
    icon: mdi:moon-waning-crescent
    label: Dark
    tap_action:
      action: perform-action
      perform_action: input_select.select_option
      target:
        entity_id: input_select.theme
      data:
        option: dark
styles: |
  :host {
    --color: var(--blue-color);
    flex-basis: 200%;
  }
```

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

### Template Variable Examples

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/configuration.md

Illustrates how to use template variables like 'value', 'unit', and 'checked' to dynamically set labels, icons, and data.

```yaml
label: '{{ value }}{{ unit }}'
label: '{{ iif(checked, "On", "Off") }}'
label: '{{ (value / 60) | int }}:{{ (value % 60) | int }}'

icon: 'mdi:light-{{ iif(checked, "on", "off") }}'
icon: 'mdi:brightness-{{ (value / 10) | int }}'

data:
  brightness_pct: '{{ value | int }}'
  color_name: '{{ config.option }}'
```

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

### CustomFeatureButton Example Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-feature-classes.md

Example YAML configuration for a CustomFeatureButton. Use this to set up entity tracking, icons, labels, and various tap/hold actions.

```yaml
type: button
entity_id: light.living_room
icon: mdi:light-on
label: Light
tap_action:
  action: perform-action
  perform_action: light.toggle
  target:
    entity_id: light.living_room
double_tap_action:
  action: navigate
  navigation_path: /lovelace/lighting
hold_action:
  action: repeat
thumb: md3-filled
styles: |
  :host {
    --color: var(--blue-color);
  }
haptics: true
```

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

### Slider Feature Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example configuration for a slider feature, defining its type, range, and step.

```yaml
{ type: 'slider', range: [0, 100], step: 1 }
```

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

### Slider Configuration Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/errors.md

YAML configuration for a slider, illustrating how values outside the range are handled.

```yaml
type: slider
range: [0, 100]
# Value 150 becomes 100
# Value -50 becomes 0
```

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

### Light Control Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example configuration for a light control tile feature. Uses a button entry to trigger a service call for turning the light on.

```yaml
type: tile
entity: light.living_room
features:
  - type: custom:service-call
    entries:
      - type: button
        icon: mdi:lightbulb-on
        tap_action:
          action: perform-action
          perform_action: light.turn_on
```

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

### Package Version Logging

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/errors.md

Example log message indicating the package version, displayed at the info level in the browser console.

```log
%c CUSTOM-CARD-FEATURES-FOR-TILES-AND-MORE v4.9.4
```

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

### Room Selection Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example configuration for a room selection feature using a selector type. Displays options with icons and labels.

```yaml
type: selector
entity: input_select.room
options:
  - option: bedroom
    icon: mdi:bed
    label: Bedroom
```

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

### Temperature Control Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/INDEX.md

Example configuration for a temperature control spinbox feature. Allows setting temperature within a specified range and step.

```yaml
type: spinbox
entity: climate.living_room
range: [15, 30]
step: 0.5
tap_action:
  action: perform-action
  perform_action: climate.set_temperature
```

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

### getStubConfig Method

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-cards.md

Provides a default or stub configuration object for the custom-features-card, useful for initial setup or previews.

```typescript
static getStubConfig(): ICustomFeatureCardConfig
```

```typescript
{
  type: 'custom:custom-features-card',
  transparent: false,
  feature_height: 42,
  features: []
}
```

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

### Build Custom Features Bundle

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/README.md

Commands to install dependencies, build the minified bundle, perform type checking, linting, and build CSS modules for the custom-card-features project.

```bash
npm install

npm run build

npm run prelint

npm run lint

npm run build-css
```

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

### Slider Feature Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-feature-classes.md

Example configuration for a slider feature. This snippet demonstrates setting up a slider for controlling light brightness, including custom tooltip formatting and actions.

```yaml
type: slider
entity_id: light.living_room
value_attribute: brightness
icon: mdi:brightness-4
label: '{{ value }}{{ unit }}'
unit_of_measurement: '%'
range: [0, 100]
step: 1
thumb: md3-slider
tap_action:
  action: perform-action
  perform_action: light.turn_on
  target:
    entity_id: light.living_room
  data:
    brightness_pct: '{{ value | int }}'
ticks: true
styles: |
  :host {
    flex-basis: 200%;
    --color: var(--feature-color);
  }
  .tooltip {
    --tooltip-label: '{{ (value / 60) | int }}:{{ (value % 60) | int }}';
  }
```

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

### Styled Card Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-cards.md

Example of how to configure a custom card with specific styling, including background gradient and border-radius. The feature height and individual feature styles can also be set.

```yaml
type: custom:custom-features-card
styles: |
  ha-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
  }
feature_height: 50
features:
  - type: custom:service-call
    entries:
      - type: button
        icon: mdi:home
        label: Home
        styles: |
          :host {
            flex-basis: 100%;
          }
```

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

### Get Configuration Editor Element

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-cards.md

Returns the HTMLElement for the configuration editor, which is used by the Home Assistant UI to configure the component.

```typescript
static getConfigElement(): HTMLElement

// Example:
const editor = CustomFeaturesRow.getConfigElement();
// Returns: <custom-features-row-editor></custom-features-row-editor>
```

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

### Tile Card Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/README.md

Configures a tile card for an input select entity, specifying layout options and a default color. This example demonstrates setting up a grid layout and a base color for the tile.

```yaml
type: tile
entity: input_select.lounge_tv_listening_mode
color: green
layout_options:
  grid_columns: 4
  grid_rows: 3
styles: |-
  :host {
    --color: var(--red-color);
  }
```

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

### Protocol Navigation Error Logging

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/errors.md

Example log message for protocol detection in navigation paths, indicating that the 'url' action should be used instead.

```log
Protocol detected in navigation path. Use "url" action instead.
```

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

### Configuration Migration: Legacy vs. New

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-cards.md

Shows how the component handles legacy configurations automatically, converting them to the new preferred format. Both formats are accepted and normalized.

```yaml
# Legacy (auto-converted)
type: custom:service-call
buttons:
  - type: button

# New (preferred)
type: custom:custom-features-row
entries:
  - type: button
```

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

### Light Control with RGB and Brightness

Source: https://github.com/nerwyn/custom-card-features/blob/main/README.md

This snippet demonstrates controlling a light's color and brightness. It includes actions for turning the light on with specific RGB values and brightness, and turning it off.

```yaml
- entity_id: light.chandelier
            option: 254,11,255
            tap_action:
              action: perform-action
              perform_action: light.turn_on
              target:
                entity_id:
                  - light.chandelier
              data:
                rgb_color:
                  - 128
                  - 0
                  - 128
                brightness_pct: 100
            icon: mdi:checkbox-blank-circle
            styles: |-
              .icon {
                color: var(--purple-color);
              }
          - entity_id: light.chandelier
            tap_action:
              action: perform-action
              perform_action: light.turn_off
              target:
                entity_id:
                  - light.chandelier
              data: {}
            icon: mdi:checkbox-blank-circle-outline
            styles: ''
            option: 'null'
```

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

### Custom Feature Button Example

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-base-custom-feature.md

Example of a `CustomFeatureButton` subclass extending `BaseCustomFeature`. It demonstrates overriding `onClick` to fire a haptic event and send an action.

```typescript
@customElement('custom-feature-button')
export class CustomFeatureButton extends BaseCustomFeature {
  // Subclass handles specific rendering and event logic
  // Inherits all action handling from BaseCustomFeature
  
  async onClick(e: PointerEvent) {
    this.fireHapticEvent('light');
    await this.sendAction('tap_action');
  }
}
```

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

### Templatable Action Data and Target

Source: https://github.com/nerwyn/custom-card-features/blob/main/README.md

Demonstrates how to use YAML templating for the entire action data and target fields. This allows for dynamic configuration of actions based on conditions.

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

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

### getDeepKeys(obj)

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Gets all nested keys from an object using dot notation paths.

```APIDOC
## getDeepKeys(obj)

### Description
Gets all nested keys from an object using dot notation paths.

### Parameters
#### Path Parameters
- **obj** (any) - Required - The object to extract keys from.

### Returns
(string[]) - An array of strings, where each string is a dot notation path to a nested key.

### Example
```typescript
const obj = {
  name: 'John',
  user: {
    profile: {
      age: 30
    }
  }
};

getDeepKeys(obj)
// ['name', 'user.profile.age']
```
```

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

### Get All Deep Keys from Object

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Retrieves all nested keys from an object, returning them as dot-notation paths.

```typescript
import { getDeepKeys } from '../utils';

getDeepKeys(obj: any): string[]
```

```typescript
const obj = {
  name: 'John',
  user: {
    profile: {
      age: 30
    }
  }
};

getDeepKeys(obj)
// ['name', 'user.profile.age']
```

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

### Template Error Logging

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/errors.md

Example log message for template rendering failures, displayed at the error level in the browser console.

```log
Template rendering failed: [error message]
```

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

### Build Commands

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/overview.md

Common build and linting commands for the project. Use 'npm run build' to create the production bundle and 'npm run lint' to fix code style issues.

```bash
npm run build       # Build bundle + gzip
npm run lint        # ESLint with fixes
npm run build-css   # Build CSS modules
npm run prelint     # TypeScript check
```

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

### deepGet(obj, path)

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Gets nested object property using dot notation path. Returns undefined if the path does not exist.

```APIDOC
## deepGet(obj, path)

### Description
Gets nested object property using dot notation path.

### Parameters
#### Path Parameters
- **obj** (any) - Required - The object to retrieve the property from.
- **path** (string) - Required - The dot notation path to the desired property.

### Returns
(any) - The value of the nested property, or undefined if the path does not exist.

### Example
```typescript
const obj = { user: { profile: { name: 'John' } } };
deepGet(obj, 'user.profile.name') // 'John'
deepGet(obj, 'user.missing.path') // undefined
```
```

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

### Deep Get Object Property

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Retrieves a nested object property using a dot-notation path. Returns undefined if the path does not exist.

```typescript
import { deepGet } from '../utils';

deepGet(obj: any, path: string): any
```

```typescript
const obj = { user: { profile: { name: 'John' } } };
deepGet(obj, 'user.profile.name') // 'John'
deepGet(obj, 'user.missing.path') // undefined
```

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

### getConfigElement Method

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-cards.md

A static method that returns the HTMLElement for the card's configuration editor, used in the Home Assistant UI.

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

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

### Get Stub Configuration for CustomFeaturesRow

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-cards.md

Provides a default configuration object for new instances of CustomFeaturesRow. This is useful for generating initial configurations.

```typescript
static getStubConfig(): IConfig

// Example:
const stub = CustomFeaturesRow.getStubConfig();
// Returns: { type: 'custom:service-call', entries: [] }
```

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

### Custom Slider HTML Structure

Source: https://github.com/nerwyn/custom-card-features/blob/main/README.md

HTML structure for a custom slider component. This example shows a basic slider with ticks and an icon-label display.

```html
<custom-feature-slider>
  #shadow-root
  <div class="container on" part="container">
    <div class="background" part="background"></div>
    <input type="range" part="range" min="0" max="100" step="25" value="50" />
    <div part="thumb" class="thumb default">
      <div class="active"></div>
    </div>
    <div class="ticks">
      <div class="tick active" value="0">
      <div class="tick active" value="25">
      <div class="tick active" value="50">
      <div class="tick inactive" value="75">
      <div class="tick inactive" value="100">
    </div>
    <div class="icon-label">
      <ha-icon class="icon" part="icon"></ha-icon>
      <pre class="label" part="label"></pre>
    </div>
  </div>
  <div class="tooltip faded-out" part="tooltip">::after</div>
</custom-feature-slider>
```

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

### Button to Set Light to White (Color Temperature)

Source: https://github.com/nerwyn/custom-card-features/blob/main/README.md

This button action calls the light.turn_on service to set the light to a specific color temperature. It features conditional styling for white elements.

```yaml
- tap_action:
    action: call-service
    service: light.turn_on
    data:
      color_temp: 500
    target:
      entity_id: light.chandelier
option: 255,137,14
label: White
icon: mdi:alpha-w
entity_id: light.chandelier
type: button
value_attribute: state
styles: |-
  :host {
    flex-basis: 200%;
    --label-color: white;
    --color: white;
    {% if (state_attr(config.entity, "rgb_color") or []).join(',') == '255,137,14' %}
    --label-filter: invert(1);
    --icon-filter: invert(1);
    {% endif %}
  }
```

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

### Light Tile Configuration with Multiple Features

Source: https://github.com/nerwyn/custom-card-features/blob/main/README.md

This configuration defines a light tile with various interactive features. It includes a toggle for the main light, individual buttons for bulbs, a color selector, and brightness/temperature sliders. Use this for detailed control over a light entity.

```yaml
type: tile
layout_options:
  grid_columns: 4
  grid_rows: 5
entity: light.chandelier
vertical: false
icon_tap_action:
  action: perform-action
  perform_action: light.toggle
  target:
    entity_id: light.chandelier
  confirmation: true
features:
  - type: custom:service-call
    entries:
      - type: toggle
        tap_action:
          action: perform-action
          confirmation:
            text: >-
              Are you sure you want to turn the light {{ 'on' if checked else
              'off' }}?
            exemptions: []
          target:
            entity_id:
              - light.chandelier
          perform_action: light.turn_{{ 'on' if checked else 'off' }}
          data: |
            {% if checked %}
            kelvin: 2000
            {% endif %}
        icon: ''
        label: >-
          {{ value if checked else states(config.entity) }}{{ unit if checked
          else "" }}
        value_attribute: brightness
        unit_of_measurement: '%'
        autofill_entity_id: true
        entity_id: light.chandelier
        styles: |-
          :host {
            flex-basis: 400%;
          }
        haptics: true
        unchecked_icon: mdi:ceiling-light-outline
        checked_icon: mdi:ceiling-light
      - tap_action:
          action: call-service
          service: light.toggle
          target:
            entity_id: light.chandelier_bulb_1
        icon: mdi:lightbulb
        label: Bulb 1
        entity_id: light.chandelier
        type: button
        value_attribute: state
        styles: |-
          :host {
            --icon-color: orange;
          }
      - tap_action:
          action: call-service
          service: light.toggle
          target:
            entity_id: light.chandelier_bulb_2
        icon: mdi:lightbulb
        label: Bulb 2
        entity_id: light.chandelier
        type: button
        value_attribute: state
        styles: |-
          :host {
            --icon-color: yellow;
          }
      - tap_action:
          action: call-service
          service: light.toggle
          target:
            entity_id: light.chandelier_bulb_3
        icon: mdi:lightbulb
        label: Bulb 3
        entity_id: light.chandelier
        type: button
        value_attribute: state
        styles: |-
          :host {
            --icon-color: green;
          }
      - tap_action:
          action: call-service
          service: light.toggle
          target:
            entity_id: light.chandelier_bulb_4
        icon: mdi:lightbulb
        label: Bulb 4
        entity_id: light.chandelier
        type: button
        value_attribute: state
        styles: |-
          :host {
            --icon-color: blue;
          }
      - tap_action:
          action: call-service
          service: light.toggle
          target:
            entity_id: light.chandelier_bulb_5
        icon: mdi:lightbulb
        label: Bulb 5
        entity_id: light.chandelier
        type: button
        value_attribute: state
        styles: |-
          :host {
            --icon-color: purple;
          }
    styles: ''
  - type: custom:service-call
    entries:
      - type: selector
        entity_id: light.chandelier
        value_attribute: rgb_color
        options:
          - tap_action:
              action: call-service
              service: light.turn_on
              data:
                color_name: red
              target:
                entity_id: light.chandelier
              confirmation: true
            option: 255,0,0
            label: Red
            icon: mdi:alpha-r
            entity_id: light.chandelier
            type: button
            value_attribute: state
            styles: |
              :host {
                --label-color: red;
                --color: red;
                {% if (state_attr(config.entity, "rgb_color") or []).join(',') == '255,0,0' %}
                --label-filter: invert(1);
                {% endif %}
              }
          - tap_action:
              action: call-service
              service: light.turn_on
              data:
                color_name: green
              target:
                entity_id: light.chandelier
            option: 0,255,0
            label: Green
            icon: mdi:alpha-g
            entity_id: light.chandelier
            type: button
            value_attribute: state
            styles: |-
              :host {
                --label-color: green;
                --color: green;
                {% if (state_attr(config.entity, "rgb_color") or []).join(',') == '0,255,0' %}
                --label-filter: invert(1);
                {% endif %}

```

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

### CSS Variables for Theming

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Demonstrates using CSS variables for theming, allowing customization of colors and opacity.

```css
:host {
  --color: var(--feature-color);
  --opacity: 0.2;
}
```

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

### Number Input Range Validation Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/errors.md

Example configuration for number input validation, highlighting error states when the input is outside the specified range.

```yaml
type: input
thumb: number
range: [0, 100]
styles: |
  .background {
    border-color: var(--error-color);
  }
```

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

### Get Action Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-base-custom-feature.md

Retrieves the appropriate action configuration for a given action type. Use this to check for and access specific action settings before execution.

```typescript
const tapAction = this.getAction('tap_action');
if (tapAction) {
  await this.sendAction('tap_action');
}
```

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

### Action Confirmation Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/errors.md

YAML configuration for tap actions, demonstrating basic confirmation and custom confirmation messages with exemptions.

```yaml
tap_action:
  action: perform-action
  confirmation: true

# With custom message
tap_action:
  action: perform-action
  confirmation:
    text: Really turn off the light?
    exemptions:
      - user: admin_user_id
```

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

### Basic Service Call Feature

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/overview.md

Example of a custom service call feature for a tile card. Includes a button to turn on a light and a slider to control brightness.

```yaml
type: tile
entity: light.living_room
features:
  - type: custom:service-call
    entries:
      - type: button
        icon: mdi:lightbulb-on
        label: On
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            entity_id: light.living_room
      
      - type: slider
        range: [0, 100]
        step: 1
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            entity_id: light.living_room
          data:
            brightness_pct: '{{ value | int }}'
```

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

### Importing Deep Object Utilities

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Demonstrates how to import deep object manipulation functions like deepGet and deepSet.

```typescript
// Individual imports
import { deepGet, deepSet } from '../utils';
import { atLeastHaVersion } from '../utils';

// Or from index
import { deepGet, atLeastHaVersion } from '../utils';
```

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

### navigate

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-base-custom-feature.md

Navigates within Home Assistant by manipulating the browser's history using `window.history.pushState()` or `replaceState()`.

```APIDOC
## navigate(action)

### Description
Navigates within Home Assistant using `window.history.pushState()` or `replaceState()`.

### Method
`navigate(action: IAction): void`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
const action = {
  action: 'navigate',
  navigation_path: '/lovelace/0'
};
this.navigate(action);
```

### Response
#### Success Response
None

#### Response Example
None provided.
```

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

### handleConfirmation(element, action)

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Shows a Home Assistant confirmation dialog if configured in the action. Returns a promise that resolves to a boolean indicating whether the action should proceed.

```APIDOC
## handleConfirmation(element, action)

### Description
Shows Home Assistant confirmation dialog if configured in action. Returns whether action should proceed.

### Parameters
#### Path Parameters
- **element** (BaseCustomFeature) - Required - The custom feature element.
- **action** (IAction) - Required - The action configuration.

### Returns
(Promise<boolean>) - A promise that resolves to true if the action should proceed, false otherwise.

### Example
```typescript
async sendAction(actionType: ActionType) {
  const action = this.getAction(actionType);
  if (!action || !(await handleConfirmation(this, action))) {
    return;
  }
  // Proceed with action execution
}
```
```

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

### Action Execution Pipeline

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/overview.md

Illustrates the sequence of operations when an action is triggered, from sending the action to its final dispatch based on type. Includes navigation, service calls, toggling, and event firing.

```mermaid
graph TD
    sendAction(sendAction(actionType))
        ↓
    getAction(getAction(actionType)) → retrieves from config
        ↓
    deepRenderTemplate() → renders all templates in action
        ↓
    handleConfirmation() → shows dialog if configured
        ↓
    Dispatch by action type:
      ├─ navigate → window.history.pushState
      ├─ url → window.open
      ├─ perform-action → hass.callService(domain, service, data, target)
      ├─ toggle → toggleSingle for each entity
      ├─ more-info → dispatch hass-more-info event
      ├─ assist → dispatch hass-action event
      ├─ fire-dom-event → window.dispatchEvent
      ├─ eval → new Function(this.eval)()
      ├─ repeat → nothing (hold-mode only)
      └─ none → nothing
```

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

### Template Label with Missing Entity State Handling

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/errors.md

YAML example showing how to handle missing entity states within a template label, providing a default value when the entity state is undefined.

```yaml
# Check in template
label: '{{ value if value else "N/A" }}'
```

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

### moreInfo

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-base-custom-feature.md

Opens the Home Assistant more-info dialog for a specified entity. If no target entity is provided, it defaults to the entity associated with the feature.

```APIDOC
## moreInfo(action)

### Description
Opens the Home Assistant more-info dialog for an entity.

### Method
`moreInfo(action: IAction): void`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
const action = {
  action: 'more-info',
  target: { entity_id: 'light.living_room' }
};
this.moreInfo(action);
```

### Response
#### Success Response
None

#### Response Example
None provided.
```

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

### atLeastHaVersion(version, major, minor)

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Checks if the provided Home Assistant version string is at least the specified major and minor version numbers.

```APIDOC
## atLeastHaVersion(version, major, minor)

### Description
Checks if Home Assistant version is at least specified version.

### Parameters
#### Path Parameters
- **version** (string) - Required - The version string to check (e.g., '2024.8.0').
- **major** (number) - Required - The major version number to compare against.
- **minor** (number) - Required - The minor version number to compare against.

### Returns
(boolean) - True if the version is greater than or equal to the specified major.minor, false otherwise.

### Example
```typescript
const version = this.hass.config.version;
if (atLeastHaVersion(version, 2024, 8)) {
  // Use 2024.8.0+ features
  this.classList.add('no-padding');
}
```
```

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

### assist(action)

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-base-custom-feature.md

Opens the Home Assistant Assist dialog. This method delegates the action to the `hassAction()` function.

```APIDOC
## assist(action)

### Description
Opens Home Assistant Assist dialog. Delegates to `hassAction()`.

### Parameters
- `action` (IAction) - Required - Action object to be passed to `hassAction()`.
```

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

### Importing External Libraries

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Shows how to import functions from external libraries like ha-nunjucks, js-yaml, and lit.

```typescript
// External libraries
import { hasTemplate, renderTemplate } from 'ha-nunjucks';
import { load as loadYAML } from 'js-yaml';
import { css, html } from 'lit';
```

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

### buildStyles(css)

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Wraps CSS rules in a Lit HTML `<style>` element, enabling dynamic style injection into components.

```APIDOC
## buildStyles(css)

### Description
Wraps CSS in a Lit `<style>` element for dynamic style injection.

### Method
buildStyles

### Parameters
#### Path Parameters
- **css** (string) - Required - The CSS string to be wrapped.

### Request Example
```json
{
  "example": "buildStyles(':host { --color: blue; }')"
}
```

### Response
#### Success Response (TemplateResult)
- Returns a Lit `TemplateResult` object representing a `<style>` element.

### Response Example
```json
{
  "example": "<style>\n  :host { --color: blue; }\n</style>"
}
```
```

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

### url

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-base-custom-feature.md

Opens an external URL using `window.open()`. If a protocol (like `http://` or `https://`) is not specified, it will be automatically prepended.

```APIDOC
## url(action)

### Description
Opens an external URL using `window.open()`. Automatically adds `https://` if protocol not specified.

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

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
const action = {
  action: 'url',
  url_path: 'example.com'
};
this.url(action);
```

### Response
#### Success Response
None

#### Response Example
None provided.
```

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

### Render Home Assistant Templates

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/utilities.md

Use `renderTemplate` to process nunjucks templates with Home Assistant state and custom context. Set `strict` to true to throw errors on undefined variables.

```typescript
const hass = this.hass;

// Simple value
renderTemplate(hass, '{{ value }}', { value: 50 }) // '50'

// Conditional
renderTemplate(hass, '{{ iif(checked, "On", "Off") }}', { checked: true }) // 'On'

// Entity state
renderTemplate(hass, '{{ states("light.living_room") }}', hass) // 'on'

// With filters
renderTemplate(hass, '{{ value | int }}', { value: 50.5 }) // '50'
```

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

### Value Update Delay Configuration

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/errors.md

YAML configuration showing how to set the delay for value synchronization from Home Assistant to the custom feature.

```yaml
type: slider
value_from_hass_delay: 1000

# For faster sync
value_from_hass_delay: 500

# For slower sync
value_from_hass_delay: 2000
```

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

### renderTemplate(str, context)

Source: https://github.com/nerwyn/custom-card-features/blob/main/_autodocs/api-reference-base-custom-feature.md

Renders a Nunjucks template using the Home Assistant template engine. This is useful for dynamically generating values within the configuration.

```APIDOC
## renderTemplate(str, context)

### Description
Renders a nunjucks template using Home Assistant template engine. Used for dynamic values in config.

### Parameters
- `str` (string | number | boolean) - Required - The template string or a regular value.
- `context` (object) - Optional - An optional template context object.

### Returns
- Rendered value or the original value if no template is detected.

### Request Example
```typescript
const color = this.renderTemplate('{{ iif(checked, "red", "blue") }}');
const icon = this.renderTemplate('mdi:light-{{ iif(checked, "on", "off") }}');
```
```

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

### Light Control Button with Tap Actions

Source: https://github.com/nerwyn/custom-card-features/blob/main/README.md

Configures a button to control a light, with different actions for tap, double-tap, and hold. The button's color dynamically reflects the light's state.

```yaml
features:
  - type: custom:service-call
    entries:
      - type: button
        haptics: true
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            color_name: red
        double_tap_action:
          action: perform-action
          perform_action: light.turn_on
          xdouble_tap_window: 1000
          data:
            entity_id: light.sunroom_ceiling
            color_name: green
        hold_action:
          action: perform-action
          perform_action: light.turn_on
          xhold_time: 2000
          data:
            entity_id: light.sunroom_ceiling
            color_name: blue
        icon: mdi:power
        label: '{{ states(config.entity) }}'
        entity_id: light.sunroom_ceiling
        value_attribute: state
        styles: |-
          :host {
            {% if is_state(config.entity, "on") %}
            --color: rgb({{ state_attr(config.entity, "rgb_color") }});
            {% endif %};
          }
```

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

### XKCD Button with Dynamic URL and Momentary Actions

Source: https://github.com/nerwyn/custom-card-features/blob/main/README.md

Implements an XKCD button that opens a comic based on hold duration, using momentary button mode. It also includes a button to display the state float and log momentary action timings. This demonstrates advanced button interactions and dynamic URL generation.

```yaml
type: custom:service-call
    entries:
      - type: button
        entity_id: climate.downstairs_thermostat
        label: XKCD
        value_from_hass_delay: 5000
        momentary_end_action:
          action: url
          url_path: https://xkcd.com/{{ (1000 * hold_secs) | int }}
        value_attribute: state
      - type: button
        entity_id: sensor.cold_flu_index_today
        label: |-
          State Float
          {{ value }}
        value_attribute: state
        styles: ''
        icon: ''
        autofill_entity_id: false
        momentary_end_action:
          action: eval
          eval: >-
            const actionType = 'momentary_end_action'

            const message = `${actionType} - ${Math.floor(this.momentaryEnd -
            this.momentaryStart)}ms`

            console.log(message)

            const event = new Event('hass-notification', { bubbles: true,
            composed: true })

            event.detail = { message }

            this.dispatchEvent(event)
        momentary_start_action:
          action: eval
          eval: >-
            const actionType = 'momentary_start_action'
```