### Copy Environment Example

Source: https://github.com/clooos/bubble-card/blob/main/DEVELOPERS.md

Copy the example environment file to create your local configuration. This file is ignored by git.

```bash
cp .env.example .env
```

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

### Install Dependencies

Source: https://github.com/clooos/bubble-card/blob/main/DEVELOPERS.md

Run this command in your terminal to install the necessary project dependencies.

```bash
npm install
```

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

### Complete Module Example with Editor and Code

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

A full example of a module definition including its name, version, description, editor schema, and the corresponding code section for styling.

```yaml
icon_container_color:
  name: 'Example: Customize the icon container color'
  version: v1.1
  creator: Clooos
  link: https://github.com/Clooos/Bubble-Card/discussions/1231
  unsupported:
    - horizontal-buttons-stack
    - separator
  description: |
    A list of predefined colors to customize the icon container color.
    Configure this module via the editor or in YAML, for example:
    <br><br>
    <code-block><pre>
    icon_container_color: 
        color: light-blue
    </pre></code-block>
  code: |
    .bubble-icon-container {
      opacity: 1 !important;
      background: var(--${this.config.icon_container_color?.color}-color) !important;
    }
  editor:
    - name: color
      label: Color
      selector:
        ui_color:
          include_none: true
```

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

### Example CalendarEntity Configuration

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/10-configuration-types.md

Provides an example of how to configure a calendar entity with a specific color.

```typescript
{
  entity: "calendar.main_calendar",
  color: "#ffb010"
}
```

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

### Select Card Configuration Example

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/7-card-other-types.md

Example of how to configure a select card to control an input_select entity, showing its current state and name.

```yaml
type: custom:bubble-card
card_type: select
entity: input_select.scenes
name: Scene Selection
icon: mdi:brightness-4
show_state: true
```

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

### Bubble Card Usage Example

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/1-main-api.md

A basic configuration example for the Bubble Card, demonstrating how to set it up as a button to control a light entity.

```yaml
type: custom:bubble-card
card_type: button
entity: light.living_room
name: Living Room Light
icon: mdi:lightbulb
button_type: switch
show_state: true
```

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

### Sub-buttons Card Usage Example - Fixed Footer Menu

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/7-card-other-types.md

Example showing a fixed footer menu configuration for the sub-buttons card. This setup is useful for persistent navigation or actions.

```yaml
type: custom:bubble-card
card_type: sub-buttons
footer_mode: true
footer_full_width: true
sub_button:
  bottom:
    - name: Home
      icon: mdi:home
      tap_action:
        action: navigate
        navigation_path: '#home'
    - name: Settings
      icon: mdi:cog
      tap_action:
        action: navigate
        navigation_path: '#settings'
```

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

### Sub-buttons Card Usage Example - Chips

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/7-card-other-types.md

Example demonstrating how to configure the sub-buttons card to display status chips. Ensure 'custom:bubble-card' is available and configured.

```yaml
type: custom:bubble-card
card_type: sub-buttons
hide_main_background: true
sub_button:
  main: []
  bottom:
    - name: Status Chips
      buttons_layout: inline
      group:
        - entity: person.home
          show_name: true
          fill_width: false
        - entity: sensor.temperature
          show_state: true
          fill_width: false
```

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

### Media Player Card Example

Source: https://github.com/clooos/bubble-card/blob/main/README.md

A comprehensive example of a media player card using Bubble Card. This configuration demonstrates various options for displaying media information, controlling playback, and customizing the appearance, including hiding specific buttons.

```yaml
type: custom:bubble-card
card_type: media-player
name: Media player
entity: media_player.your_media_player
show_state: true
show_last_updated: true
show_attribute: true
attribute: assumed_state
card_layout: large
scrolling_effect: false
show_icon: false
force_icon: true
show_name: false
show_last_changed: true
columns: 2
rows: 1
min_volume: 10
max_volume: 80
cover_background: true
tap_action:
  action: toggle
hide:
  play_pause_button: true
  volume_button: true
  previous_button: true
  next_button: true
  power_button: true
sub_button:
  - entity: media_player.salon_2
    icon: mdi:volume-high
    name: Volume level
    tap_action:
      action: more-info
    show_name: false
    show_state: false
    show_last_updated: false
    show_attribute: true
    show_background: false
    attribute: volume_level
```

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

### Condition Selector Example

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Demonstrates using the condition selector in module configuration and checking conditions in JavaScript using `checkConditionsMet`.

```yaml
# Module configuration example
my_module:
  element_to_show:
    condition:
      - condition: state
        entity_id: light.living_room
        state: 'on'
      - condition: numeric_state
        entity_id: sensor.temperature
        above: 20
```

```javascript
// In your module code
const elementConfig = this.config.my_module?.element_to_show;
if (!elementConfig?.condition || checkConditionsMet([].concat(elementConfig.condition), hass)) {
  // Show element when living room light is ON and temperature is above 20
}
```

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

### Bubble Card Action Configuration Examples

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/9-actions-styling.md

Demonstrates two methods for configuring tap, double-tap, and hold actions: direct specification on an element and via the `button_action` object.

```yaml
# Direct specification
type: custom:bubble-card
card_type: button
entity: light.kitchen
tap_action:
  action: toggle
double_tap_action:
  action: more-info
hold_action:
  action: more-info
```

```yaml
# Via button_action
button_action:
  tap_action:
    action: toggle
  double_tap_action:
    action: more-info
  hold_action:
    action: more-info
```

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

### Calendar Card Usage Example

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/7-card-other-types.md

A basic YAML configuration for a calendar card, specifying entities, display options, and limits.

```yaml
type: custom:bubble-card
card_type: calendar
entities:
  - entity: calendar.main_calendar
    color: '#ffb010'
days: 7
limit: 5
show_end: true
show_progress: true
```

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

### Custom Service Calls for Cover Control

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/6-card-cover.md

Example demonstrating how to specify custom service calls for opening, closing, and stopping a cover entity.

```yaml
type: custom:bubble-card
card_type: cover
entity: cover.garage_door
name: Garage Door
open_service: cover.open_cover
close_service: cover.close_cover
stop_service: cover.stop_cover
icon_open: mdi:garage-open
icon_close: mdi:garage
show_state: true
```

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

### Create a Select Card for Scenes

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Configure a select card to manage scene selections. This example shows how to display the entity name, an icon, and its current state.

```yaml
type: custom:bubble-card
card_type: select
name: Scene
entity: input_select.scenes
icon: mdi:brightness-4
show_state: true
```

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

### Separator Card Example

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Use this YAML configuration to create a separator card for a 'Covers' section in your pop-up. It includes a name and an icon.

```yaml
type: custom:bubble-card
card_type: separator
name: Covers
icon: mdi:window-shutter
```

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

### Horizontal Buttons Stack Card Usage Example

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/7-card-other-types.md

Example configuration for the horizontal-buttons-stack card. Buttons are defined with numbered keys, each requiring a '_link' property. Optional properties include '_name', '_icon', '_entity', and '_pir_sensor'.

```yaml
type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_name: Living Room
1_icon: mdi:sofa
1_link: '#living-room'
1_entity: light.living_room
1_pir_sensor: binary_sensor.motion_living
2_name: Kitchen
2_icon: mdi:fridge
2_link: '#kitchen'
2_entity: light.kitchen
2_pir_sensor: binary_sensor.motion_kitchen
```

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

### Climate Card with HVAC Modes Dropdown

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Example of a climate card configured with an HVAC modes dropdown menu. Ensure the 'climate.test_climate' entity is valid.

```yaml
type: custom:bubble-card
card_type: climate
entity: climate.test_climate
sub_button:
  - name: HVAC modes menu
    select_attribute: hvac_modes
    show_arrow: false
    state_background: false
```

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

### Complete Module Editor Schema Example

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

This schema defines a complete form with a color mode selector, a custom color picker, and an expandable section for advanced animation and opacity settings. It demonstrates the use of select, ui_color, boolean, and number selectors.

```yaml
editor:
  - name: color_mode
    label: "Color Mode"
    selector:
      select:
        options:
          - label: "Custom Color"
            value: "custom"
          - label: "Theme Color"
            value: "theme"
  - name: custom_color
    label: "Custom Color"
    selector:
      ui_color: {}
  - type: expandable
    title: "Advanced Settings"
    expanded: false
    schema:
      - name: animation
        label: "Animation"
        selector:
          boolean: {}
      - name: animation_speed
        label: "Animation Speed"
        selector:
          number:
            min: 1
            max: 10
            step: 0.1
      - name: opacity
        label: "Opacity"
        selector:
          number:
            min: 0
            max: 100
            unit_of_measurement: "%"
```

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

### Configure Home Assistant Path

Source: https://github.com/clooos/bubble-card/blob/main/DEVELOPERS.md

Set the HA_PATH variable in your .env file to point to your Home Assistant instance's www folder. Examples are provided for macOS/Linux and Windows.

```env
# macOS / Linux (Samba share mounted as a network volume)
HA_PATH=/Volumes/config/www

# Windows (Samba share mapped as a network drive)
# HA_PATH=\\homeassistant\config\www
```

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

### Apply Custom Animations

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/9-actions-styling.md

Add custom CSS animations to card elements. This example defines a 'pulse' animation and applies it to the card container.

```yaml
styles: |
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  
  .bubble-button-card-container {
    animation: pulse 2s infinite !important;
  }
```

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

### Example: Accessing Editor Schema Values in Module Code

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Illustrates how to access specific editor schema fields like 'color', 'size', and 'show_icon' within the module's code section, including providing default values.

```yaml
.bubble-icon-container {
  /* Access the "color" field */
  background: var(--${this.config.module_id?.color}-color) !important;
  
  /* Access the "size" field with a default value if undefined */
  --mdc-icon-size: ${this.config.module_id?.size || 24}px;
  
  /* Access the "show_icon" boolean field */
  display: ${this.config.module_id?.show_icon ? 'flex' : 'none'};
}
```

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

### Horizontal Buttons Stack Configuration

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Configure a horizontal buttons stack with multiple buttons, each having a name, icon, link, entity, and optional occupancy sensor for auto-ordering. This example demonstrates how to set up buttons for different rooms, allowing the stack to reorder based on motion detection.

```yaml
type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_name: Living room
1_icon: mdi:sofa
1_link: "#living-room"
1_entity: light.living_room
1_pir_sensor: binary_sensor.living_room_motion
2_name: Kitchen
2_icon: mdi:fridge
2_link: "#kitchen"
2_entity: light.kitchen
2_pir_sensor: binary_sensor.kitchen_motion
3_name: Dining room
3_icon: mdi:silverware-fork-knife
3_link: "#dining-room"
3_entity: light.dining_room
3_pir_sensor: binary_sensor.dining_room_motion
```

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

### Config Entry Selector Configuration

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Use the config entry selector to filter integrations by their domain, for example, 'zwave_js'. This helps in selecting specific integration configurations.

```yaml
- name: config_entry
  label: "Integration"
  selector:
    config_entry:
      domain: zwave_js
```

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

### Button Card with Sub-buttons for Vacuum Control

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Use this snippet to create a button card that displays vacuum status and provides sub-buttons for actions like returning to dock, pausing, and starting. The styles can be dynamically updated based on the vacuum's state or attributes.

```yaml
type: custom:bubble-card
card_type: button
button_type: switch
name: Vacuum
entity: vacuum.downstairs
icon: mdi:robot-vacuum
show_state: true
show_last_changed: true
tap_action:
  action: more-info
button_action:
  tap_action:
    action: more-info
sub_button:
  - name: Battery
    icon: mdi:battery
    show_name: false
    show_icon: true
    show_background: false
    show_attribute: true
    attribute: battery_level
  - name: Return to dock
    icon: mdi:home
    show_background: false
    tap_action:
      action: call-service
      service: vacuum.return_to_base
      target:
        entity_id: vacuum.downstairs
  - name: Pause
    icon: mdi:pause
    show_background: false
    tap_action:
      action: call-service
      service: vacuum.pause
      target:
        entity_id: vacuum.downstairs
  - name: Start
    icon: mdi:play
    tap_action:
      action: call-service
      service: vacuum.start
      target:
        entity_id: vacuum.downstairs
styles: >-
  .bubble-button-card-container {
    /* Change the background color when the vacuum get an error (optional), more details in the styles template section */
    background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important;
  }
  /* Change the first sub-button battery icon based on the battery_icon attribute, more details in the styles template section */
  ${subButtonIcon[0].setAttribute("icon", hass.states['vacuum.downstairs'].attributes.battery_icon)}
```

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

### CSS Variables for Theming

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/0-README.md

Example of CSS variables used for theming Bubble Cards, allowing customization of background colors, border-radius, and accent colors.

```css
:root {
  --bubble-main-background-color: rgb(50,70,90);
  --bubble-button-border-radius: 8px;
  --bubble-accent-color: rgb(100,140,180);
}
```

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

### Sub-buttons Card with Chips Layout

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Configure the 'sub-buttons' card to display chips, ideal for menus or quick actions. Ensure 'hide_main_background' is true for a chip-like appearance. The 'buttons_layout' is set to 'inline' for this example.

```yaml
type: custom:bubble-card
card_type: sub-buttons
hide_main_background: true
sub_button:
  main: []
  bottom:
    - name: Chips
      buttons_layout: inline
      group:
        - entity: person.quentin
          show_name: true
          fill_width: false
        - entity: sensor.geraldine_presence
          show_name: true
          fill_width: false
        - entity: input_boolean.alarme
          fill_width: false
          name: Alarm
          show_name: true
          tap_action:
            action: toggle
        - entity: sensor.salle_de_bain_temperature
          fill_width: false
          show_state: true
          state_background: false
        - entity: input_select.test
          fill_width: false
          sub_button_type: select
          name: Scene
          icon: mdi:weather-sunny
          show_state: true
      justify_content: center
rows: 0.941
```

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

### Separator Card Configuration Example

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/7-card-other-types.md

Use the separator card to visually divide sections in your dashboard. It supports a name, icon, layout, height, custom styles, and sub-buttons.

```yaml
type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:lightbulb
```

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

### Advanced Horizontal Row of Sub-buttons

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Creates a horizontal row of sub-buttons with custom styling for layout and appearance. This example is often used as a dashboard header.

```yaml
type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Mute
    icon: mdi:volume-off
    tap_action:
      action: toggle
      service: input_boolean.toggle
    entity: input_boolean.silent_mode
  - name: Covers
    entity: cover.all_group
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#cover'
  - name: Shopping list
    icon: mdi:cart-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#shopping-list'
  - name: Security
    icon: mdi:video-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#security'
  - name: Settings
    icon: mdi:cog
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#configuration'
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: none;
    border: none;
  }
  .bubble-sub-button {
    height: 46px !important;
    width: 46px !important;
  }
  .bubble-sub-button-container {
    display: flex !important;
    width: 100%;
    justify-content: space-between !important;
  }
  .bubble-sub-button-icon {
    --mdc-icon-size: inherit !important;
  }
  .bubble-name-container {
    margin-right: 0px !important;
  }
```

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

### Build and Deploy Project

Source: https://github.com/clooos/bubble-card/blob/main/DEVELOPERS.md

Execute this command to build the production and development files for the project. Development files are deployed to the configured HA_PATH.

```bash
npm run dist
```

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

### Navigate to Pop-up Action

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/9-actions-styling.md

Use the `navigate` action with a hash path (e.g., `#kitchen`) to open a pop-up window. This is ideal for displaying contextual information or controls.

```yaml
tap_action:
  action: navigate
  navigation_path: '#kitchen'
```

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

### Sub-buttons Card Handler Function

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/7-card-other-types.md

The handler function for the sub-buttons card type. No specific setup is required beyond its definition.

```typescript
export function handleSubButtons(context): void
```

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

### Large Cover Card with Sub-buttons

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/6-card-cover.md

A large cover card example featuring a main cover entity and a sub-button for lock status.

```yaml
type: custom:bubble-card
card_type: cover
entity: cover.patio_door
card_layout: large
name: Patio Door
icon: mdi:door-sliding
show_state: true
show_name: true
main_buttons_position: bottom
main_buttons_full_width: true
sub_button:
  - name: Lock Status
    icon: mdi:lock
    entity: lock.patio_lock
    show_state: true
    show_background: false
```

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

### Basic Media Player Configuration

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/4-card-media-player.md

A simple media player card displaying the entity name, icon, and state.

```yaml
type: custom:bubble-card
card_type: media-player
entity: media_player.living_room
name: Living Room Speaker
icon: mdi:speaker
show_state: true
```

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

### Custom CSS Classes for Structure

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/0-README.md

Example of custom CSS classes used to define the structure and layout of elements within Bubble Cards.

```css
.bubble-button-card-container { }
.bubble-icon-container { }
.bubble-name { }
.bubble-state { }
```

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

### Basic Styling Module

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Use this module to apply a basic theme, such as setting all card backgrounds to blue. This snippet defines a 'Blue Cards Theme' with a specific background color.

```yaml
blue_cards:
  name: "Blue Cards Theme"
  version: "1.0"
  creator: "Your Name"
  description: "Makes all cards backgrounds blue"
  code: |
    ha-card {
      --bubble-main-background-color: #007acc;
    }
```

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

### Sub-button Visibility by Template

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/8-sub-buttons.md

Control sub-button visibility using a template condition for more complex logic. This example uses an input boolean to determine visibility.

```yaml
sub_button:
  - entity: lock.front_door
    name: Lock
    visibility:
      - condition: template
        value_template: "{{ states('input_boolean.security_armed') == 'on' }}"
```

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

### Basic Pop-up with Button Header

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/3-card-pop-up.md

Demonstrates a standard pop-up card with a button header. This is suitable for most general use cases.

```yaml
type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
name: Kitchen
icon: mdi:fridge
entity: light.kitchen
button_type: switch
cards:
  - type: custom:bubble-card
    card_type: button
    entity: light.kitchen
  - type: custom:bubble-card
    card_type: button
    entity: light.kitchen_led
```

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

### Empty Column Card Usage Example

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/7-card-other-types.md

The empty-column card acts as a placeholder to balance layouts, particularly in horizontal stacks. It requires no specific configuration.

```yaml
type: horizontal-stack
cards:
  - type: custom:bubble-card
    card_type: button
    entity: light.kitchen
  - type: custom:bubble-card
    card_type: empty-column
```

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

### Navigate to Pop-up via Button Action

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/3-card-pop-up.md

Use this action to trigger a pop-up by navigating to a specific URL hash. Ensure the hash matches the pop-up's configured hash.

```yaml
button_action:
  tap_action:
    action: navigate
    navigation_path: '#kitchen'
```

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

### Show More Info Action

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/9-actions-styling.md

The `more-info` action opens the entity's information panel. This is useful for providing access to detailed controls and history.

```yaml
tap_action:
  action: more-info
```

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

### Add Bubble Card Resource

Source: https://github.com/clooos/bubble-card/blob/main/DEVELOPERS.md

Instructions for registering the Bubble Card JavaScript module as a dashboard resource in Home Assistant.

```bash
/local/bubble-card.js?v=1
```

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

### Commit Changes

Source: https://github.com/clooos/bubble-card/blob/main/DEVELOPERS.md

Stage all changes and create a commit with a descriptive message. Include source and distribution files as needed.

```bash
git add .
git commit -m "Your commit message"
```

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

### File Selector with Accept Option

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Use the file selector to choose files. The 'accept' option allows specifying comma-separated acceptable file extensions.

```yaml
- name: config_file
  label: "Configuration File"
  selector:
    file:
      accept: ".yaml,.json"
```

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

### Grid Layout Schema

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Organizes fields into a grid. Use 'column_min_width' for minimum column width and 'schema' for the fields within the grid.

```yaml
- type: grid
  name: appearance
  schema:
    - name: color
      label: "Color"
      selector:
        select:
          options:
            - label: "Red"
              value: "red"
            - label: "Blue"
              value: "blue"
    - name: size
      label: "Size"
      selector:
        number:
          min: 10
          max: 100
```

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

### Climate Card Handler Function

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/5-card-climate.md

The handler function for the Climate card. It takes a CardContext object and updates the DOM directly. No specific setup is required beyond having the CardContext available.

```typescript
export function handleClimate(context): void
```

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

### Conditional Styling Based on State

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/9-actions-styling.md

Dynamically change the background color of the card container based on the entity's state. This example uses JavaScript expressions within the `styles` parameter.

```yaml
type: custom:bubble-card
card_type: button
entity: sensor.temperature
styles: |
  .bubble-button-card-container {
    background: ${ 
      parseFloat(state) > 25 ? 'rgb(200, 100, 100)' :
      parseFloat(state) < 15 ? 'rgb(100, 100, 200)' :
      'rgb(100, 200, 100)'
    } !important;
  }
```

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

### Select Selector with Options

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Configure a select dropdown with predefined options. 'multiple' and 'custom_value' can be set to true to allow multiple selections or custom input.

```yaml
name: theme
label: "Theme"
selector:
  select:
    options:
      - label: "Light"
        value: "light"
      - label: "Dark"
        value: "dark"
      - label: "Auto"
        value: "auto"
    multiple: false
    custom_value: false
    mode: "dropdown"
```

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

### Object Selector with Grouped Fields

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Configure an object selector with grouped fields for a more organized UI. Fields within the same 'group' are rendered together under a collapsible section. This example groups 'background_color' and 'text_color' under 'Appearance'.

```yaml
- name: items
  label: "Items"
  selector:
    object:
      fields:
        name:
          label: "Name"
          selector:
            text: {}
        background_color:
          label: "Background color"
          group: "Appearance"
          group_icon: "mdi:palette"
          selector:
            ui_color: {}
        text_color:
          label: "Text color"
          group: "Appearance"
          selector:
            ui_color: {}
      multiple: true
```

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

### Target Selector Configuration

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Configure a target selector to filter entities by domain, such as 'light'. This allows users to select specific devices.

```yaml
- name: target
  label: "Target"
  selector:
    target:
      entity:
        domain: light
```

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

### Configure Media Player Card

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/0-README.md

Use this configuration for media player entities to show playback controls and cover art. Set `card_type` to `media-player` and `cover_background` to `true` for background cover art.

```yaml
type: custom:bubble-card
card_type: media-player
entity: media_player.spotify
cover_background: true
show_state: true
```

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

### Switch Button Configuration

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/2-card-button.md

Use this configuration for toggleable entities like lights, switches, or fans. It allows displaying the entity's state and uses a specified icon.

```yaml
type: custom:bubble-card
card_type: button
entity: light.kitchen
button_type: switch
name: Kitchen Light
icon: mdi:lightbulb
show_state: true
```

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

### Addon Selector Configuration

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Configure an addon selector to allow users to choose a specific add-on. You can filter by the add-on's name.

```yaml
- name: addon
  label: "Add-on"
  selector:
    addon: {}
```

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

### Advanced Button with Multiple Options

Source: https://github.com/clooos/bubble-card/blob/main/README.md

This snippet demonstrates a button with extensive configuration options, including state display, attribute showing, and custom tap actions. It's suitable for complex button interactions.

```yaml
type: custom:bubble-card
card_type: button
entity: light.your_light
button_type: switch
show_icon: true
force_icon: true
show_name: true
show_last_changed: true
show_state: true
show_last_updated: true
show_attribute: true
attribute: brightness
scrolling_effect: true
card_layout: large
button_action:
  tap_action:
    action: toggle
tap_action:
  action: more-info
sub_button:
  - entity: light.your_light
    icon: ''
    show_state: false
    show_attribute: true
    attribute: brightness
    show_icon: false
    show_background: false
    show_name: false
```

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

### Conditional Confirmation Action

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/9-actions-styling.md

Actions can be configured with a `confirmation` step to prompt the user before execution. This prevents accidental actions.

```yaml
tap_action:
  action: toggle
  confirmation:
    text: Turn off all lights?
    description: This will turn off every light
```

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

### Fit-content Pop-up with Bottom Offset

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/3-card-pop-up.md

Implements a pop-up that adjusts its size to fit its content, with an option to include a bottom offset. The header can be hidden for a cleaner look.

```yaml
type: custom:bubble-card
card_type: pop-up
hash: '#quick-actions'
popup_mode: fit-content
with_bottom_offset: true
show_header: false
cards:
  - type: custom:bubble-card
    card_type: sub-buttons
    hide_main_background: true
    sub_button:
      bottom:
        - name: Action 1
          icon: mdi:lightbulb
        - name: Action 2
          icon: mdi:fan
```

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

### Location Selector Configuration

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Set up a location selector to allow users to pick a location on a map. Options include enabling radius selection and setting a custom icon.

```yaml
- name: location
  label: "Location"
  selector:
    location:
      radius: true
      icon: "mdi:home"
```

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

### Configure Pop-up Dashboard with Nested Cards

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/0-README.md

Create a pop-up card that navigates to a specific hash and displays nested cards. The `cards` array allows embedding other Bubble Cards or standard Home Assistant cards.

```yaml
type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
name: Kitchen
icon: mdi:fridge
entity: light.kitchen
cards:
  - type: custom:bubble-card
    card_type: button
    entity: light.kitchen
  - type: custom:bubble-card
    card_type: climate
    entity: climate.kitchen
```

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

### Open URL Action

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/9-actions-styling.md

The `url` action opens an external URL in a new browser tab. Ensure the URL is correctly formatted.

```yaml
tap_action:
  action: url
  url_path: https://www.google.com
```

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

### Date Selector Configuration

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Use the date selector to input a date, with options to set minimum and maximum date constraints.

```yaml
- name: event_date
  label: "Event Date"
  selector:
    date: {}
```

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

### Weather Button Card with Temperature and Forecast

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Create a button card to display weather information, including inside and outside temperatures, and today's and tomorrow's forecast. The styles can dynamically update sub-button icons based on weather conditions.

```yaml
type: custom:bubble-card
card_type: button
button_type: state
entity: weather.openweathermap
name: Weather
show_state: true
card_layout: large-2-rows
sub_button:
  - name: Home temperature
    icon: mdi:home-thermometer-outline
    entity: sensor.home_temperature
    show_state: true
    show_icon: true
    show_background: false
  - name: Outside temperature
    entity: sensor.outside_temperature
    show_state: true
    show_background: false
  - name: Today
    entity: sensor.home_realfeel_temperature_max_0d
    show_name: true
    show_state: true
    tap_action:
      action: more-info
  - name: Tomorrow
    entity: sensor.home_realfeel_temperature_max_1d
    show_name: true
    show_state: true
    show_background: false
styles: >-
  /* Change the third and fourth sub-button icon based on the forecast.condition attribute, more details in the styles template section */
  ${subButtonIcon[2].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast[0]?.condition))}
  ${subButtonIcon[3].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast[1]?.condition))}
```

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

### Media Selector Configuration

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

The media selector allows selection of media, with options to filter by media source or local media.

```yaml
- name: media
  label: "Media"
  selector:
    media: {}
```

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

### Navigate to View Action

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/9-actions-styling.md

The `navigate` action with a full path (e.g., `/lovelace/1`) allows navigation to a specific dashboard view or URL. This is used for changing the main dashboard content.

```yaml
tap_action:
  action: navigate
  navigation_path: /lovelace/1
```

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

### Apply Module to Card via YAML

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Use this YAML configuration to apply specific modules to an individual Bubble Card. Ensure the module IDs are correctly listed.

```yaml
type: custom:bubble-card
card_type: button
entity: light.example
modules:
  - module_id_1
  - module_id_2
```

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

### Button to Open Standalone Pop-up

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Creates a button that navigates to a specific pop-up using a hash in the navigation path. This is used to trigger the standalone pop-up format.

```yaml
type: custom:bubble-card
card_type: button
button_type: name
name: Kitchen
icon: mdi:fridge
button_action:
  tap_action:
    action: navigate
    navigation_path: '#kitchen'
```

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

### Device Selector Configuration

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Configure the device selector to choose a device, with filtering options for integration, manufacturer, model, and associated entity properties.

```yaml
- name: device
  label: "Device"
  selector:
    device:
      filter:
        integration: zwave
```

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

### Basic Roller Shade Configuration

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/6-card-cover.md

A simple configuration for a roller shade cover entity, showing essential properties like entity, name, and icons.

```yaml
type: custom:bubble-card
card_type: cover
entity: cover.kitchen
name: Kitchen Blind
icon: mdi:roller-shade
icon_open: mdi:roller-shade
icon_close: mdi:roller-shade-closed
show_state: true
```

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

### Media Player Card Configuration Interface

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/10-configuration-types.md

Defines the structure for a media player card configuration. Use this interface to specify how a media player entity should be displayed and controlled within the UI.

```typescript
interface MediaPlayerCardConfig extends CardConfig {
  card_type: 'media-player'
  entity: string  // Required
  
  // Display
  show_state?: boolean
  show_name?: boolean
  show_icon?: boolean
  show_last_changed?: boolean
  show_last_updated?: boolean
  show_attribute?: boolean
  attribute?: string
  scrolling_effect?: boolean
  force_icon?: boolean
  
  // Media controls
  min_volume?: number
  max_volume?: number
  cover_background?: boolean
  
  // Button control
  main_buttons_position?: 'default' | 'bottom'
  main_buttons_full_width?: boolean
  main_buttons_alignment?: Alignment
  
  // Button visibility
  hide?: {
    play_pause_button?: boolean
    volume_button?: boolean
    previous_button?: boolean
    next_button?: boolean
    power_button?: boolean
  }
  
  // Actions
  tap_action?: ActionObject
  double_tap_action?: ActionObject
  hold_action?: ActionObject
}

type Alignment = 'end' | 'center' | 'start' | 'space-between'
```

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

### Configure Weather Forecast Sensor

Source: https://github.com/clooos/bubble-card/blob/main/README.md

This YAML configuration sets up a template sensor to fetch daily weather forecasts. It uses a time pattern trigger to update the forecast data periodically.

```yaml
- trigger:
    - platform: time_pattern
      hours: /2
action:
  - service: weather.get_forecasts
    data:
      type: daily
    target:
      entity_id: weather.home
    response_variable: daily
sensor:
  - name: Weather Forecast Daily
    unique_id: weather_forecast_daily
    state: "{{ now().isoformat() }}"
    attributes:
      forecast: "{{ daily['weather.home'].forecast }}"
```

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

### Change Button and Icon Colors

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/9-actions-styling.md

Apply background colors to the main card container and icon container for a button card. Ensure you use `!important` to override default styles.

```yaml
type: custom:bubble-card
card_type: button
entity: light.kitchen
styles: |
  .bubble-button-card-container {
    background: rgba(200, 150, 100, 0.8) !important;
  }
  .bubble-icon-container {
    background: rgba(150, 100, 50, 0.8) !important;
  }
```

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

### Number Input Selector with Options

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Configure number inputs with minimum, maximum, step, and unit of measurement. The 'mode' option can switch between 'box' and 'slider'.

```yaml
name: opacity
label: "Opacity"
selector:
  number:
    min: 0
    max: 100
    step: 5
    unit_of_measurement: "%"
```

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

### Climate Card with Dual Setpoint

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/5-card-climate.md

Configures a climate card for dual setpoint control, allowing precise temperature adjustments. Specify min/max temperatures and the step for adjustments.

```yaml
type: custom:bubble-card
card_type: climate
entity: climate.zone_1
name: Zone 1
icon: mdi:hvac
show_state: true
step: 0.5
min_temp: 15
max_temp: 28
```

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

### Configure Light Brightness Slider

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/0-README.md

Use this configuration to display a light entity with a brightness slider. Ensure the entity is a light and set `light_slider_type` to `brightness`.

```yaml
type: custom:bubble-card
card_type: button
entity: light.kitchen
button_type: slider
light_slider_type: brightness
show_state: true
```

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

### Theme Selector Configuration

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Use the theme selector to choose a theme for a card, with an option to include the default theme.

```yaml
- name: card_theme
  label: "Card Theme"
  selector:
    theme: {}
```

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

### Standalone Pop-up Configuration

Source: https://github.com/clooos/bubble-card/blob/main/README.md

Defines a pop-up using the standalone format with nested cards. Use this to create complex pop-up UIs with custom content.

```yaml
type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
name: Kitchen
icon: mdi:fridge
entity: light.kitchen
cards:
  - type: custom:bubble-card
    card_type: button
    entity: light.kitchen
  # More cards...
```

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

### Datetime Selector Configuration

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Configure a datetime selector for inputting both date and time, with options for minimum and maximum datetime values.

```yaml
- name: event_datetime
  label: "Event Date and Time"
  selector:
    datetime: {}
```

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

### Time Selector Configuration

Source: https://github.com/clooos/bubble-card/blob/main/src/modules/editor-schema-docs.md

Configure a time selector for inputting time values. No additional options are available for this selector.

```yaml
- name: start_time
  label: "Start Time"
  selector:
    time: {}
```

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

### Dropdown/Select Sub-button Configuration

Source: https://github.com/clooos/bubble-card/blob/main/_autodocs/8-sub-buttons.md

Dropdown menu for selecting from entity attributes or options. Specify the attribute containing the list of options.

```yaml
sub_button:
  - entity: light.kitchen
    sub_button_type: select
    select_attribute: effect_list
    name: Effects
    show_state: true
```