[Styling Module, JS Module, JS+Editor Module] Fan Speed Visual Card

[76cb]

Fan Speed Visual Center

Version: v1.3.2
Creator: 76cb

Fan Speed Visual Center adds speed-aware styling, animation, power controls, fan-mode controls, and configurable sub-button highlighting to a Bubble Card Button card.

The module can use a fan or climate entity as its primary control entity. Additional mode buttons can control fan, climate, select, and input_select entities.

Important

This module supports the Bubble Card Button card type. Supporting a climate entity does not mean that the Bubble Card Climate card type is supported.

Unsupported Bubble Card types:

• Cover
• Climate
• Horizontal buttons stack
• Media player
• Pop-up
• Select
• Separator

Features

• Controls fan and climate entities from a Bubble Card Button card.
• Percentage-based speed buttons for standard fan entities.
• Climate fan-mode controls through climate.set_fan_mode.
• Fan and climate preset controls.
• Supports external select and input_select entities for controls such as mode and timer options.
• Allows multiple mode/select buttons to be highlighted independently.
• Configurable Off/Power sub-button with Off-only or Toggle behavior.
• Optional main-icon power action while retaining Bubble Card's existing action by default.
• Per-speed and per-mode icon animation, including spin, reverse spin, pulse, wobble, and breeze effects.
• Three reusable active-style presets with per-button overrides.
• Optional direction controls for compatible fan entities.
• Automatic or manual sub-button mapping.
• Multiple sub-button layouts and sizing controls.
• Theme inheritance is the default for unconfigured card, icon, text, inactive-button, and opacity styling.
• Base card, main icon, and inactive sub-button styling continue to inherit Bubble Card, dashboard theme, and Bubble Neon values unless an override is selected.
• Backward-compatible configuration keys from v1.2 are retained.

Supported Entities and Actions

Entity	Power	Percentage	Fan mode	Preset	Option selection	Direction
fan	Yes	Yes	—	Yes	—	Yes, when supported
climate	Yes	No	Yes	Yes	—	No
select	—	—	—	—	Yes	—
input_select	—	—	—	—	Yes	—

Installation

Copy the complete module YAML from this repository into:

/www/bubble/bubble-modules.yaml

Restart Home Assistant or reload the frontend resources as required by your Bubble Card module installation, then add Fan Speed Visual Center to a Bubble Card Button card.

Basic Setup

1. Create a Bubble Card Button card.
2. Add the sub-buttons that the module will control.
3. Enable Fan Speed Visual Center in the card's Modules section.
4. Select a primary fan or climate entity under Control Entity.
5. Assign the Off/Power button number.
6. Configure percentage buttons for a normal fan, or configure Mode / Select Buttons for climate modes, presets, timers, and dropdown entities.
7. Leave color modes set to Use Bubble Card / theme when the existing dashboard theme should remain in control.

Note

Button numbers start at 1 and refer to the order of the existing Bubble Card sub-buttons. The module styles and attaches actions to those buttons; it does not create the sub-buttons itself.

Configuration Examples

Standard fan with percentage speeds

fan_speed_visual_center:
  fan_entity: fan.bedroom_fan
  control_mode: percentage
  off_target: 1
  power_button_mode: toggle
  speed_sub_button_start_index: 2
  speeds:
    - name: Low
      value: 25
      icon: mdi:fan-speed-1
    - name: Medium
      value: 50
      icon: mdi:fan-speed-2
    - name: High
      value: 100
      icon: mdi:fan-speed-3

Climate entity with fan-mode buttons

fan_speed_visual_center:
  fan_entity: climate.living_room
  control_mode: climate_fan_mode
  off_target: 1
  power_button_mode: toggle
  enable_presets: true
  preset_mappings:
    - label: Auto
      preset_value: auto
      action_type: climate_fan_mode
      sub_button_index: 2
      icon: mdi:fan-auto
      style_preset: low
    - label: Low
      preset_value: low
      action_type: climate_fan_mode
      sub_button_index: 3
      icon: mdi:fan-speed-1
      style_preset: medium
    - label: High
      preset_value: high
      action_type: climate_fan_mode
      sub_button_index: 4
      icon: mdi:fan-speed-3
      style_preset: high

Separate mode and timer dropdowns

Each mapping reads its own target entity, so the active mode and active timer can be highlighted simultaneously.

fan_speed_visual_center:
  fan_entity: fan.bedroom_fan
  enable_presets: true
  preset_mappings:
    - label: Sleep
      target_entity: select.bedroom_fan_mode
      preset_value: sleep
      action_type: select_option
      active_attribute: state
      sub_button_index: 5
      icon: mdi:weather-night
      affect_main_card: true
      style_preset: low
    - label: 2 Hours
      target_entity: select.bedroom_fan_timer
      preset_value: 2_hours
      action_type: select_option
      active_attribute: state
      sub_button_index: 6
      icon: mdi:timer-outline
      affect_main_card: false
      style_preset: medium

Main Icon Action

The main icon can be configured to:

• Use Bubble Card's existing action
• Toggle the primary entity on or off
• Turn the primary entity on
• Turn the primary entity off
• Perform no action

The default is Use Bubble Card action, so existing card behavior is preserved unless the module is explicitly told to replace it.

Theme Inheritance

Theme inheritance is now the default. When Use Bubble Card / theme is selected, the module does not set the corresponding CSS property.

This applies to:

• Card background
• Main icon background
• Main icon color
• Inactive sub-button background
• Inactive sub-button icon color
• Inactive sub-button text color
• Inactive sub-button opacity
• Per-mode button overrides

Select a preset, color wheel, custom CSS value, or JavaScript template only when the module should override the existing Bubble Card or dashboard theme.

Mode / Select Buttons

Mode / Select Buttons replace the narrower preset-only workflow from v1.2. Each mapping can:

• Target the primary control entity or a separate entity.
• Automatically infer the service from the target entity domain.
• Explicitly call a fan preset, climate fan mode, climate preset, select option, or input-select option.
• Read its active value from the entity state or a selected attribute.
• Use its own icon, style preset, colors, glow, and animation.
• Choose whether the active mapping may change the main card style and icon.

When several mappings are active, all matching sub-buttons can be highlighted. The first active mapping with Affect Main Card Style / Icon enabled controls the main card presentation.

Direction Controls

Direction controls are only attached when the primary entity is in the fan domain. This prevents the module from attempting to call fan.set_direction on a climate entity.

Upgrading from v1.2

The following configuration keys remain supported:

• fan_entity
• enable_presets
• preset_mappings
• preset_attribute
• Existing speed and style-preset settings

fan_entity remains the internal configuration key, but it may now reference either a fan or climate entity.

Existing saved v1.2 cards may retain explicit color modes such as preset. Change those fields to Use Bubble Card / theme when the card should inherit the current dashboard styling.

The former Presets editor section is now named Mode / Select Buttons. Existing preset mappings continue to work, while new mappings can target climate modes and external dropdown entities.

---

Complete module YAML

Copy the following module into your Bubble Card modules file:

  name: "Fan Speed Visual Center"
  version: "v1.3.2"
  creator: "76cb"
  link: "https://raw.githubusercontent.com/76cb/bubble-card-modules/main/fan_speed_visual_center/fan_speed_visual_center.yaml"
  supported:
    - button
  description: >
    Advanced Bubble Card module for Home Assistant fan and climate fan controls.
    Uses normal Bubble Card sub-buttons or the main icon for Off/Power, fan speed percentages,
    climate fan modes, fan/climate presets, select and input_select options/dropdowns, quick dropdown shortcuts,
    optional direction/oscillation, scalable button mapping, animation, and theme-aware
    active/inactive/off styling. Off is configured separately.

  editor:
    - type: expandable
      title: "Control Entity"
      icon: "mdi:fan"
      schema:
        - type: grid
          column_min_width: "220px"
          schema:
            - name: fan_entity
              label: "Fan or Climate Entity"
              description: "Primary entity controlled by the power button and main icon. The existing fan_entity key is retained for backward compatibility."
              selector:
                entity:
                  filter:
                    - domain: fan
                    - domain: climate
            - name: control_mode
              label: "Primary Speed Control"
              description: "Auto uses percentage controls for fan entities and Mode / Select Buttons for climate fan modes."
              default: "auto"
              selector:
                select:
                  mode: dropdown
                  options:
                    - label: "Auto"
                      value: "auto"
                    - label: "Fan percentage"
                      value: "percentage"
                    - label: "Climate fan mode"
                      value: "climate_fan_mode"

    - type: expandable
      title: "Button Mapping"
      icon: "mdi:gesture-tap-button"
      schema:
        - type: grid
          column_min_width: "220px"
          schema:
            - name: off_target_mode
              label: "Off / Power Target"
              description: "Use a Bubble Card sub-button, or bind Off / Power to the main icon without requiring a sub-button number."
              default: "sub_button"
              selector:
                select:
                  mode: dropdown
                  options:
                    - label: "Sub-button"
                      value: "sub_button"
                    - label: "Main icon"
                      value: "main_icon"
            - name: off_target
              label: "Off / Power Button Number"
              description: "Used only when Off / Power Target is Sub-button. Button numbers start at 1."
              default: 1
              selector:
                number:
                  min: 1
                  max: 20
                  step: 1
                  mode: box
            - name: speed_sub_button_start_index
              label: "First Speed Button Number"
              description: "The first sub-button used for speed controls. Speed 1 uses this number, Speed 2 uses the next number, and so on."
              default: 2
              selector:
                number:
                  min: 1
                  max: 20
                  step: 1
                  mode: box
            - name: auto_map_speed_buttons
              label: "Auto-map Speed Buttons"
              description: "Automatically map speeds in order based on the first speed button number. Individual speed Button Number values override this."
              default: true
              selector:
                boolean: {}
            - name: clear_all_sub_buttons
              label: "Reset All Sub-Buttons"
              description: "Reset all visible sub-buttons before applying active styles. Leave off unless old styling appears stuck."
              default: false
              selector:
                boolean: {}
            - name: sub_button_layout
              label: "Sub-Button Layout"
              default: "bubble_default"
              selector:
                select:
                  mode: dropdown
                  options:
                    - label: "Bubble Card default"
                      value: "bubble_default"
                    - label: "Control row"
                      value: "control_row"
                    - label: "Compact fill row"
                      value: "compact_fill_row"
                    - label: "Bottom control row"
                      value: "bottom_control_row"
            - name: hide_main_name_state
              label: "Hide Main Name/State"
              description: "Keeps the main icon visible, but hides the main name and state to make room for fan controls."
              default: false
              selector:
                boolean: {}
            - name: sub_button_min_width
              label: "Button Min Width"
              default: 48
              selector:
                number:
                  min: 24
                  max: 120
                  step: 1
                  mode: slider
                  unit_of_measurement: "px"
            - name: sub_button_max_width
              label: "Button Max Width"
              description: "Used by Compact fill row to keep buttons from becoming giant pills."
              default: 68
              selector:
                number:
                  min: 36
                  max: 140
                  step: 1
                  mode: slider
                  unit_of_measurement: "px"
            - name: sub_button_justify
              label: "Button Row Spacing"
              description: "Used by Compact fill row."
              default: "space-between"
              selector:
                select:
                  mode: dropdown
                  options:
                    - label: "Space between"
                      value: "space-between"
                    - label: "Center"
                      value: "center"
                    - label: "Start"
                      value: "flex-start"
                    - label: "End"
                      value: "flex-end"
            - name: sub_button_gap
              label: "Button Gap"
              default: 6
              selector:
                number:
                  min: 0
                  max: 24
                  step: 1
                  mode: slider
                  unit_of_measurement: "px"

    - type: expandable
      title: "Speeds"
      icon: "mdi:speedometer"
      schema:
        - name: speeds
          label: "Speed Buttons"
          description: "Percentage buttons for fan entities. Do not add Off. Climate fan modes and dropdown/select options belong in Mode / Select Buttons. Supports 2 to 10 speed buttons."
          selector:
            object:
              multiple: true
              label_field: name
              fields:
                name:
                  label: "Speed Name"
                  description: "User-facing speed name. Examples: Low, Medium, High, 1, 2, 3, Quiet, Sleep, Turbo."
                  selector:
                    text:
                      multiline: false
                value:
                  label: "Speed Percentage"
                  description: "The percentage sent to fan.set_percentage when this speed is tapped. Off is not valid here."
                  selector:
                    number:
                      min: 1
                      max: 100
                      step: 1
                      mode: slider
                      unit_of_measurement: "%"
                icon:
                  label: "Speed Icon"
                  description: "Icon for this speed's sub-button and optionally the main icon."
                  selector:
                    icon: {}
                sub_button_index:
                  label: "Button Number"
                  description: "Optional. Leave blank to auto-map this speed. If set, this speed uses this exact Bubble Card sub-button number."
                  selector:
                    number:
                      min: 1
                      max: 20
                      step: 1
                      mode: box
                style_preset:
                  label: "Style Preset"
                  description: "Optional active styling preset for this speed. If unset, the module assigns one automatically by speed order."
                  selector:
                    select:
                      mode: dropdown
                      options:
                        - label: "Auto"
                          value: "auto"
                        - label: "Style Preset 1"
                          value: "low"
                        - label: "Style Preset 2"
                          value: "medium"
                        - label: "Style Preset 3"
                          value: "high"
                animate_icon:
                  label: "Animate Main Icon"
                  default: true
                  selector:
                    boolean: {}
                spin_seconds:
                  label: "Spin Speed"
                  description: "Main icon spin speed when this speed is active. Lower numbers spin faster."
                  selector:
                    number:
                      min: 0.2
                      max: 8
                      step: 0.1
                      mode: slider
                      unit_of_measurement: "s"
                action_enabled:
                  label: "Enable Tap Action"
                  default: true
                  selector:
                    boolean: {}
                button_bg_override:
                  label: "Active Button Background Override"
                  description: "Optional CSS color for this speed's active button. Leave blank to use the selected Style Preset."
                  selector:
                    text: {}
                button_icon_override:
                  label: "Active Button Icon Override"
                  description: "Optional CSS color for this speed's active button icon."
                  selector:
                    text: {}
                button_text_override:
                  label: "Active Button Text Override"
                  description: "Optional CSS color for this speed's active button text."
                  selector:
                    text: {}
                glow_override:
                  label: "Glow Color Override"
                  description: "Optional CSS color for this speed's active glow."
                  selector:
                    text: {}

    - type: expandable
      title: "Main Icon / Animation"
      icon: "mdi:rotate-360"
      schema:
        - type: grid
          column_min_width: "220px"
          schema:
            - name: main_icon_behavior
              label: "Main Icon Behavior"
              description: "Keep card icon leaves the Bubble Card icon unchanged and only animates/colors it."
              default: "keep_card_icon"
              selector:
                select:
                  mode: dropdown
                  options:
                    - label: "Keep card icon"
                      value: "keep_card_icon"
                    - label: "Active speed icon"
                      value: "active_speed_icon"
                    - label: "On/Off icons"
                      value: "on_off_icon"
            - name: main_icon_action
              label: "Main Icon Tap Action"
              description: "Use the main icon container as the power control, or leave Bubble Card's configured icon action unchanged."
              default: "bubble_default"
              selector:
                select:
                  mode: dropdown
                  options:
                    - label: "Use Bubble Card action"
                      value: "bubble_default"
                    - label: "Toggle on/off"
                      value: "toggle"
                    - label: "Turn on"
                      value: "turn_on"
                    - label: "Turn off"
                      value: "turn_off"
                    - label: "No action"
                      value: "none"
            - name: main_on_icon
              label: "Main On Icon"
              default: "mdi:fan"
              selector:
                icon: {}
            - name: main_off_icon
              label: "Main Off Icon"
              default: "mdi:fan-off"
              selector:
                icon: {}
            - name: enable_off_icon
              label: "Use Off Icon"
              default: true
              selector:
                boolean: {}
            - name: off_icon
              label: "Legacy Off Icon"
              description: "Backward-compatible fallback for Main Off Icon."
              default: "mdi:fan-off"
              selector:
                icon: {}
            - name: enable_spin_animation
              label: "Spin Icon When Fan Is On"
              default: true
              selector:
                boolean: {}
            - name: default_spin_seconds
              label: "Default Spin Speed"
              description: "Used when an active speed does not define its own spin speed."
              default: 1.4
              selector:
                number:
                  min: 0.2
                  max: 8
                  step: 0.1
                  mode: slider
                  unit_of_measurement: "s"

    - type: expandable
      title: "Off / Power Button"
      icon: "mdi:power"
      schema:
        - type: grid
          column_min_width: "220px"
          schema:
            - name: off_name
              label: "Off / Power Label"
              default: "Off"
              selector:
                text: {}
            - name: off_button_icon
              label: "Off Button Icon"
              default: "mdi:power"
              selector:
                icon: {}
            - name: off_action_enabled
              label: "Enable Off / Power Action"
              default: true
              selector:
                boolean: {}
            - name: power_button_mode
              label: "Power Button Mode"
              default: "off_only"
              selector:
                select:
                  mode: dropdown
                  options:
                    - label: "Off only"
                      value: "off_only"
                    - label: "Toggle on/off"
                      value: "toggle"
            - name: power_button_on_icon
              label: "Power On Icon"
              default: "mdi:power-on"
              selector:
                icon: {}
            - name: power_button_off_icon
              label: "Power Off Icon"
              default: "mdi:power"
              selector:
                icon: {}

    - type: expandable
      title: "Inactive Sub-Buttons"
      icon: "mdi:gesture-tap-button"
      schema:
        - type: grid
          column_min_width: "220px"
          schema:
            - name: inactive_background_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"


            - name: inactive_background_theme
              label: "Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: inactive_icon_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: inactive_icon_theme
              label: "Icon Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: inactive_text_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: inactive_text_theme
              label: "Text Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true

            - name: inactive_opacity_mode
              label: "Inactive Opacity"
              description: "Use Bubble Card / theme leaves the existing opacity untouched."
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Custom opacity"
                      value: "custom"
            - name: inactive_opacity
              label: "Custom Inactive Opacity"
              default: 65
              selector:
                number:
                  min: 0
                  max: 100
                  step: 1
                  mode: slider
                  unit_of_measurement: "%"

        - type: grid
          column_min_width: "220px"
          schema:
            - name: inactive_background_wheel
              label: "Background Color wheel"
              selector:
                color_rgb: {}

            - name: inactive_icon_wheel
              label: "Icon Color wheel"
              selector:
                color_rgb: {}

            - name: inactive_text_wheel
              label: "Text Color wheel"
              selector:
                color_rgb: {}

        - type: grid
          column_min_width: "220px"
          schema:
            - name: inactive_background_manual
              label: "Background Custom value"
              default: "rgba(255,255,255,0.08)"
              selector:
                text: {}

            - name: inactive_background_template
              label: "JS template"
              selector:
                template: {}

            - name: inactive_icon_manual
              label: "Icon Custom value"
              selector:
                text: {}

            - name: inactive_icon_template
              label: "JS template"
              selector:
                template: {}

            - name: inactive_text_manual
              label: "Text Custom value"
              selector:
                text: {}

            - name: inactive_text_template
              label: "JS template"
              selector:
                template: {}

    - type: expandable
      title: "Off State Style"
      icon: "mdi:fan-off"
      schema:
        - type: grid
          column_min_width: "180px"
          schema:
            - name: off_target
              label: "Target Sub-Button"
              default: 1
              selector:
                number:
                  min: 1
                  max: 8
                  step: 1
                  mode: box

            - name: off_glow_enabled
              label: "Enable Glow"
              default: true
              selector:
                boolean: {}

            - name: off_glow_size
              label: "Glow Size"
              default: 14
              selector:
                number:
                  min: 0
                  max: 50
                  step: 1
                  mode: slider
                  unit_of_measurement: "px"

        - type: grid
          column_min_width: "220px"
          schema:
            - name: off_card_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"


            - name: off_card_theme
              label: "Card Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: off_icon_bg_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: off_icon_bg_theme
              label: "Main Icon Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: off_icon_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: off_icon_theme
              label: "Main Icon Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: off_button_bg_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: off_button_bg_theme
              label: "Active Button Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: off_button_icon_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: off_button_icon_theme
              label: "Active Button Icon Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: off_button_text_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: off_button_text_theme
              label: "Active Button Text Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: off_glow_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: off_glow_theme
              label: "Glow Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true

        - type: grid
          column_min_width: "220px"
          schema:
            - name: off_card_wheel
              label: "Card Background Color wheel"
              selector:
                color_rgb: {}

            - name: off_icon_bg_wheel
              label: "Main Icon Background Color wheel"
              selector:
                color_rgb: {}

            - name: off_icon_wheel
              label: "Main Icon Color wheel"
              selector:
                color_rgb: {}

            - name: off_button_bg_wheel
              label: "Active Button Background Color wheel"
              selector:
                color_rgb: {}

            - name: off_button_icon_wheel
              label: "Active Button Icon Color wheel"
              selector:
                color_rgb: {}

            - name: off_button_text_wheel
              label: "Active Button Text Color wheel"
              selector:
                color_rgb: {}

            - name: off_glow_wheel
              label: "Glow Color wheel"
              selector:
                color_rgb: {}

        - type: grid
          column_min_width: "220px"
          schema:
            - name: off_card_manual
              label: "Card Background Custom value"
              selector:
                text: {}

            - name: off_card_template
              label: "JS template"
              selector:
                template: {}

            - name: off_icon_bg_manual
              label: "Main Icon Background Custom value"
              selector:
                text: {}

            - name: off_icon_bg_template
              label: "JS template"
              selector:
                template: {}

            - name: off_icon_manual
              label: "Main Icon Custom value"
              selector:
                text: {}

            - name: off_icon_template
              label: "JS template"
              selector:
                template: {}

            - name: off_button_bg_manual
              label: "Active Button Background Custom value"
              default: "rgba(255,255,255,0.22)"
              selector:
                text: {}

            - name: off_button_bg_template
              label: "JS template"
              selector:
                template: {}

            - name: off_button_icon_manual
              label: "Active Button Icon Custom value"
              selector:
                text: {}

            - name: off_button_icon_template
              label: "JS template"
              selector:
                template: {}

            - name: off_button_text_manual
              label: "Active Button Text Custom value"
              selector:
                text: {}

            - name: off_button_text_template
              label: "JS template"
              selector:
                template: {}

            - name: off_glow_manual
              label: "Glow Custom value"
              default: "rgba(255,255,255,0.55)"
              selector:
                text: {}

            - name: off_glow_template
              label: "JS template"
              selector:
                template: {}

    - type: expandable
      title: "Style Preset 1"
      icon: "mdi:numeric-1-circle"
      schema:
        - type: grid
          column_min_width: "180px"
          schema:
            - name: low_glow_enabled
              label: "Enable Glow"
              default: true
              selector:
                boolean: {}

            - name: low_glow_size
              label: "Glow Size"
              default: 14
              selector:
                number:
                  min: 0
                  max: 50
                  step: 1
                  mode: slider
                  unit_of_measurement: "px"

        - type: grid
          column_min_width: "220px"
          schema:
            - name: low_card_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"


            - name: low_card_theme
              label: "Card Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: low_icon_bg_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: low_icon_bg_theme
              label: "Main Icon Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: low_icon_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: low_icon_theme
              label: "Main Icon Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: low_button_bg_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: low_button_bg_theme
              label: "Active Speed Button Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: low_button_icon_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: low_button_icon_theme
              label: "Active Speed Button Icon Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: low_button_text_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: low_button_text_theme
              label: "Active Speed Button Text Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: low_glow_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: low_glow_theme
              label: "Glow Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true

        - type: grid
          column_min_width: "220px"
          schema:
            - name: low_card_wheel
              label: "Card Background Color wheel"
              selector:
                color_rgb: {}

            - name: low_icon_bg_wheel
              label: "Main Icon Background Color wheel"
              selector:
                color_rgb: {}

            - name: low_icon_wheel
              label: "Main Icon Color wheel"
              selector:
                color_rgb: {}

            - name: low_button_bg_wheel
              label: "Active Speed Button Background Color wheel"
              selector:
                color_rgb: {}

            - name: low_button_icon_wheel
              label: "Active Speed Button Icon Color wheel"
              selector:
                color_rgb: {}

            - name: low_button_text_wheel
              label: "Active Speed Button Text Color wheel"
              selector:
                color_rgb: {}

            - name: low_glow_wheel
              label: "Glow Color wheel"
              selector:
                color_rgb: {}

        - type: grid
          column_min_width: "220px"
          schema:
            - name: low_card_manual
              label: "Card Background Custom value"
              selector:
                text: {}

            - name: low_card_template
              label: "JS template"
              selector:
                template: {}

            - name: low_icon_bg_manual
              label: "Main Icon Background Custom value"
              selector:
                text: {}

            - name: low_icon_bg_template
              label: "JS template"
              selector:
                template: {}

            - name: low_icon_manual
              label: "Main Icon Custom value"
              selector:
                text: {}

            - name: low_icon_template
              label: "JS template"
              selector:
                template: {}

            - name: low_button_bg_manual
              label: "Active Speed Button Background Custom value"
              default: "rgba(76,175,80,0.25)"
              selector:
                text: {}

            - name: low_button_bg_template
              label: "JS template"
              selector:
                template: {}

            - name: low_button_icon_manual
              label: "Active Speed Button Icon Custom value"
              selector:
                text: {}

            - name: low_button_icon_template
              label: "JS template"
              selector:
                template: {}

            - name: low_button_text_manual
              label: "Active Speed Button Text Custom value"
              selector:
                text: {}

            - name: low_button_text_template
              label: "JS template"
              selector:
                template: {}

            - name: low_glow_manual
              label: "Glow Custom value"
              default: "rgba(76,175,80,0.85)"
              selector:
                text: {}

            - name: low_glow_template
              label: "JS template"
              selector:
                template: {}

    - type: expandable
      title: "Style Preset 2"
      icon: "mdi:numeric-2-circle"
      schema:
        - type: grid
          column_min_width: "180px"
          schema:
            - name: medium_glow_enabled
              label: "Enable Glow"
              default: true
              selector:
                boolean: {}

            - name: medium_glow_size
              label: "Glow Size"
              default: 14
              selector:
                number:
                  min: 0
                  max: 50
                  step: 1
                  mode: slider
                  unit_of_measurement: "px"

        - type: grid
          column_min_width: "220px"
          schema:
            - name: medium_card_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"


            - name: medium_card_theme
              label: "Card Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: medium_icon_bg_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: medium_icon_bg_theme
              label: "Main Icon Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: medium_icon_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: medium_icon_theme
              label: "Main Icon Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: medium_button_bg_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: medium_button_bg_theme
              label: "Active Speed Button Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: medium_button_icon_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: medium_button_icon_theme
              label: "Active Speed Button Icon Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: medium_button_text_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: medium_button_text_theme
              label: "Active Speed Button Text Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: medium_glow_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: medium_glow_theme
              label: "Glow Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true

        - type: grid
          column_min_width: "220px"
          schema:
            - name: medium_card_wheel
              label: "Card Background Color wheel"
              selector:
                color_rgb: {}

            - name: medium_icon_bg_wheel
              label: "Main Icon Background Color wheel"
              selector:
                color_rgb: {}

            - name: medium_icon_wheel
              label: "Main Icon Color wheel"
              selector:
                color_rgb: {}

            - name: medium_button_bg_wheel
              label: "Active Speed Button Background Color wheel"
              selector:
                color_rgb: {}

            - name: medium_button_icon_wheel
              label: "Active Speed Button Icon Color wheel"
              selector:
                color_rgb: {}

            - name: medium_button_text_wheel
              label: "Active Speed Button Text Color wheel"
              selector:
                color_rgb: {}

            - name: medium_glow_wheel
              label: "Glow Color wheel"
              selector:
                color_rgb: {}

        - type: grid
          column_min_width: "220px"
          schema:
            - name: medium_card_manual
              label: "Card Background Custom value"
              selector:
                text: {}

            - name: medium_card_template
              label: "JS template"
              selector:
                template: {}

            - name: medium_icon_bg_manual
              label: "Main Icon Background Custom value"
              selector:
                text: {}

            - name: medium_icon_bg_template
              label: "JS template"
              selector:
                template: {}

            - name: medium_icon_manual
              label: "Main Icon Custom value"
              selector:
                text: {}

            - name: medium_icon_template
              label: "JS template"
              selector:
                template: {}

            - name: medium_button_bg_manual
              label: "Active Speed Button Background Custom value"
              default: "rgba(255,193,7,0.25)"
              selector:
                text: {}

            - name: medium_button_bg_template
              label: "JS template"
              selector:
                template: {}

            - name: medium_button_icon_manual
              label: "Active Speed Button Icon Custom value"
              selector:
                text: {}

            - name: medium_button_icon_template
              label: "JS template"
              selector:
                template: {}

            - name: medium_button_text_manual
              label: "Active Speed Button Text Custom value"
              selector:
                text: {}

            - name: medium_button_text_template
              label: "JS template"
              selector:
                template: {}

            - name: medium_glow_manual
              label: "Glow Custom value"
              default: "rgba(255,193,7,0.85)"
              selector:
                text: {}

            - name: medium_glow_template
              label: "JS template"
              selector:
                template: {}

    - type: expandable
      title: "Style Preset 3"
      icon: "mdi:numeric-3-circle"
      schema:
        - type: grid
          column_min_width: "180px"
          schema:
            - name: high_glow_enabled
              label: "Enable Glow"
              default: true
              selector:
                boolean: {}

            - name: high_glow_size
              label: "Glow Size"
              default: 14
              selector:
                number:
                  min: 0
                  max: 50
                  step: 1
                  mode: slider
                  unit_of_measurement: "px"

        - type: grid
          column_min_width: "220px"
          schema:
            - name: high_card_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"


            - name: high_card_theme
              label: "Card Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: high_icon_bg_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: high_icon_bg_theme
              label: "Main Icon Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: high_icon_mode
              label: "Color mode"
              default: "inherit"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: high_icon_theme
              label: "Main Icon Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: high_button_bg_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: high_button_bg_theme
              label: "Active Speed Button Background Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: high_button_icon_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: high_button_icon_theme
              label: "Active Speed Button Icon Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: high_button_text_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: high_button_text_theme
              label: "Active Speed Button Text Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true
            - name: high_glow_mode
              label: "Color mode"
              default: "preset"
              selector:
                select:
                  mode: dropdown
                  multiple: false
                  custom_value: false
                  options:
                    - label: "Use Bubble Card / theme"
                      value: "inherit"
                    - label: "Preset color"
                      value: "preset"
                    - label: "Color wheel"
                      value: "wheel"
                    - label: "Custom value"
                      value: "manual"
                    - label: "JS template"
                      value: "template"



            - name: high_glow_theme
              label: "Glow Color"
              selector:
                ui_color:
                  include_none: true
                  include_state: true

        - type: grid
          column_min_width: "220px"
          schema:
            - name: high_card_wheel
              label: "Card Background Color wheel"
              selector:
                color_rgb: {}

            - name: high_icon_bg_wheel
              label: "Main Icon Background Color wheel"
              selector:
                color_rgb: {}

            - name: high_icon_wheel
              label: "Main Icon Color wheel"
              selector:
                color_rgb: {}

            - name: high_button_bg_wheel
              label: "Active Speed Button Background Color wheel"
              selector:
                color_rgb: {}

            - name: high_button_icon_wheel
              label: "Active Speed Button Icon Color wheel"
              selector:
                color_rgb: {}

            - name: high_button_text_wheel
              label: "Active Speed Button Text Color wheel"
              selector:
                color_rgb: {}

            - name: high_glow_wheel
              label: "Glow Color wheel"
              selector:
                color_rgb: {}

        - type: grid
          column_min_width: "220px"
          schema:
            - name: high_card_manual
              label: "Card Background Custom value"
              selector:
                text: {}

            - name: high_card_template
              label: "JS template"
              selector:
                template: {}

            - name: high_icon_bg_manual
              label: "Main Icon Background Custom value"
              selector:
                text: {}

            - name: high_icon_bg_template
              label: "JS template"
              selector:
                template: {}

            - name: high_icon_manual
              label: "Main Icon Custom value"
              selector:
                text: {}

            - name: high_icon_template
              label: "JS template"
              selector:
                template: {}

            - name: high_button_bg_manual
              label: "Active Speed Button Background Custom value"
              default: "rgba(244,67,54,0.25)"
              selector:
                text: {}

            - name: high_button_bg_template
              label: "JS template"
              selector:
                template: {}

            - name: high_button_icon_manual
              label: "Active Speed Button Icon Custom value"
              selector:
                text: {}

            - name: high_button_icon_template
              label: "JS template"
              selector:
                template: {}

            - name: high_button_text_manual
              label: "Active Speed Button Text Custom value"
              selector:
                text: {}

            - name: high_button_text_template
              label: "JS template"
              selector:
                template: {}

            - name: high_glow_manual
              label: "Glow Custom value"
              default: "rgba(244,67,54,0.9)"
              selector:
                text: {}

            - name: high_glow_template
              label: "JS template"
              selector:
                template: {}

    - type: expandable
      title: "Direction"
      icon: "mdi:swap-horizontal"
      schema:
        - type: grid
          column_min_width: "220px"
          schema:
            - name: enable_direction
              label: "Enable Direction Button"
              default: false
              selector:
                boolean: {}
            - name: direction_sub_button_index
              label: "Direction Button Number"
              default: 5
              selector:
                number:
                  min: 1
                  max: 20
                  step: 1
                  mode: box
            - name: direction_button_icon
              label: "Direction Button Icon"
              default: "mdi:swap-horizontal"
              selector:
                icon: {}
            - name: direction_action_enabled
              label: "Enable Direction Tap Action"
              default: true
              selector:
                boolean: {}
            - name: highlight_direction_button
              label: "Highlight Direction Button"
              default: true
              selector:
                boolean: {}
            - name: direction_button_highlight_mode
              label: "Direction Highlight Mode"
              default: "always"
              selector:
                select:
                  mode: dropdown
                  options:
                    - label: "Always"
                      value: "always"
                    - label: "Reverse only"
                      value: "reverse_only"
                    - label: "Never"
                      value: "never"
            - name: direction_attribute
              label: "Direction Attribute"
              default: "direction"
              selector:
                text: {}
            - name: forward_value
              label: "Forward Value"
              default: "forward"
              selector:
                text: {}
            - name: reverse_value
              label: "Reverse Value"
              default: "reverse"
              selector:
                text: {}
            - name: reverse_direction_animation
              label: "Reverse Spin Animation"
              default: false
              selector:
                boolean: {}
            - name: forward_icon
              label: "Forward Icon"
              default: "mdi:fast-forward"
              selector:
                icon: {}
            - name: reverse_icon
              label: "Reverse Icon"
              default: "mdi:keyboard-tab-reverse"
              selector:
                icon: {}

    - type: expandable
      title: "Oscillation"
      icon: "mdi:arrow-oscillating"
      schema:
        - type: grid
          column_min_width: "220px"
          schema:
            - name: enable_oscillation
              label: "Enable Oscillation Button"
              description: "Fan-only helper for integrations that support fan.oscillate."
              default: false
              selector:
                boolean: {}
            - name: oscillation_sub_button_index
              label: "Oscillation Button Number"
              default: 6
              selector:
                number:
                  min: 1
                  max: 20
                  step: 1
                  mode: box
            - name: oscillation_button_icon
              label: "Oscillation Button Icon"
              default: "mdi:arrow-oscillating"
              selector:
                icon: {}
            - name: oscillation_action_enabled
              label: "Enable Oscillation Tap Action"
              default: true
              selector:
                boolean: {}
            - name: oscillation_attribute
              label: "Oscillation Attribute"
              description: "Attribute used to read whether oscillation is active. Most fan entities use oscillating."
              default: "oscillating"
              selector:
                text: {}
            - name: highlight_oscillation_button
              label: "Highlight When Oscillating"
              default: true
              selector:
                boolean: {}

    - type: expandable
      title: "Mode / Select Buttons"
      icon: "mdi:tune-variant"
      schema:
        - type: grid
          column_min_width: "220px"
          schema:
            - name: enable_presets
              label: "Enable Mode / Select Buttons"
              default: false
              selector:
                boolean: {}
            - name: preset_attribute
              label: "Default Active Attribute"
              description: "Legacy/default attribute for fan preset mappings. Individual mappings can override this. Use state for entity-state matching."
              default: "preset_mode"
              selector:
                text: {}
            - name: preset_turn_on_first
              label: "Turn On Before Preset"
              description: "Useful for fans that turn on to a normal speed before accepting a preset like Smart/Breeze."
              default: true
              selector:
                boolean: {}
            - name: preset_set_delay_ms
              label: "Preset Delay"
              description: "Delay between fan.turn_on and fan.set_preset_mode when the fan is off."
              default: 350
              selector:
                number:
                  min: 0
                  max: 2000
                  step: 50
                  mode: slider
                  unit_of_measurement: "ms"
            - name: mode_dropdown_entity
              label: "Mode Dropdown Entity"
              description: "Optional quick setup. Opens the native Home Assistant dropdown/more-info dialog on the selected sub-button and mirrors the current state. Use this for select/input_select mode helpers or a climate entity."
              selector:
                entity:
                  filter:
                    - domain: select
                    - domain: input_select
                    - domain: climate
                    - domain: fan
            - name: mode_dropdown_button
              label: "Mode Dropdown Button Number"
              description: "Sub-button number used by the quick Mode Dropdown Entity. Leave blank to use manual Mode / Select Button mappings instead."
              selector:
                number:
                  min: 1
                  max: 20
                  step: 1
                  mode: box
            - name: speed_dropdown_entity
              label: "Speed Dropdown Entity"
              description: "Optional quick setup for fans that expose speed as a select/input_select dropdown instead of percentage. Opens More Info and mirrors the current option."
              selector:
                entity:
                  filter:
                    - domain: select
                    - domain: input_select
                    - domain: fan
                    - domain: climate
            - name: speed_dropdown_button
              label: "Speed Dropdown Button Number"
              description: "Sub-button number used by the quick Speed Dropdown Entity. Leave blank if speeds are normal percentage buttons."
              selector:
                number:
                  min: 1
                  max: 20
                  step: 1
                  mode: box
        - name: preset_mappings
          label: "Mode / Select Buttons"
          description: "Map fan presets, climate fan modes/presets, select entities, or input_select helpers to existing Bubble Card sub-buttons. Use More info / dropdown for native Home Assistant option pickers."
          selector:
            object:
              multiple: true
              label_field: label
              fields:
                label:
                  label: "Button Label"
                  selector:
                    text: {}
                preset_value:
                  label: "Mode / Option Value"
                  description: "Required for set-option actions. Leave blank when Action Type is More info / dropdown."
                  selector:
                    text: {}
                target_entity:
                  label: "Target Entity"
                  description: "Optional. Defaults to the primary Fan or Climate Entity. Supports fan, climate, select, and input_select entities."
                  selector:
                    entity:
                      filter:
                        - domain: fan
                        - domain: climate
                        - domain: select
                        - domain: input_select
                action_type:
                  label: "Action Type"
                  description: "Auto chooses the action from the target entity domain."
                  default: "auto"
                  selector:
                    select:
                      mode: dropdown
                      options:
                        - label: "Auto"
                          value: "auto"
                        - label: "Fan preset mode"
                          value: "fan_preset"
                        - label: "Climate fan mode"
                          value: "climate_fan_mode"
                        - label: "Climate preset mode"
                          value: "climate_preset"
                        - label: "Select option"
                          value: "select_option"
                        - label: "Input select option"
                          value: "input_select_option"
                        - label: "Open dropdown / More Info"
                          value: "more_info"
                display_mode:
                  label: "Button Display"
                  description: "Fixed label shows Button Label. Mirror state shows the target entity state or active attribute, which works well for select/input_select dropdown buttons."
                  default: "fixed"
                  selector:
                    select:
                      mode: dropdown
                      options:
                        - label: "Fixed label"
                          value: "fixed"
                        - label: "Mirror state / attribute"
                          value: "mirror_state"
                active_attribute:
                  label: "Active Attribute"
                  description: "Optional. Auto uses preset_mode, fan_mode, or state based on Action Type. Enter state to compare the entity state directly."
                  selector:
                    text: {}
                affect_main_card:
                  label: "Affect Main Card Style / Icon"
                  description: "When active, this mapping may control the main card style, icon, and animation. The first active enabled mapping wins."
                  default: true
                  selector:
                    boolean: {}
                turn_on_first:
                  label: "Turn Target On First"
                  description: "Optional per-button override. Applies only to fan and climate targets."
                  selector:
                    boolean: {}
                icon:
                  label: "Button Icon"
                  description: "Icon used on the mapped sub-button."
                  selector:
                    icon: {}
                main_icon:
                  label: "Main Icon When Active"
                  description: "Optional. Replaces the main card icon while this preset is active."
                  selector:
                    icon: {}
                animation_mode:
                  label: "Main Icon Animation"
                  description: "Animation used on the main card icon while this preset is active."
                  default: "spin"
                  selector:
                    select:
                      mode: dropdown
                      options:
                        - label: "None"
                          value: "none"
                        - label: "Spin"
                          value: "spin"
                        - label: "Reverse Spin"
                          value: "reverse_spin"
                        - label: "Pulse"
                          value: "pulse"
                        - label: "Wobble"
                          value: "wobble"
                        - label: "Breeze"
                          value: "breeze"
                spin_seconds:
                  label: "Animation Speed"
                  description: "Lower numbers animate faster. Used only while this preset is active."
                  default: 1.8
                  selector:
                    number:
                      min: 0.2
                      max: 10
                      step: 0.1
                      mode: slider
                      unit_of_measurement: "s"
                sub_button_index:
                  label: "Button Number"
                  selector:
                    number:
                      min: 1
                      max: 20
                      step: 1
                      mode: box
                style_preset:
                  label: "Style Preset"
                  description: "Active styling preset for this preset button. Color controls below can override this preset for Breeze/Smart or other fan presets."
                  selector:
                    select:
                      mode: dropdown
                      options:
                        - label: "Style Preset 1"
                          value: "low"
                        - label: "Style Preset 2"
                          value: "medium"
                        - label: "Style Preset 3"
                          value: "high"
                button_bg_mode:
                  label: "Button Background Mode"
                  description: "Preset uses the selected Style Preset. Other modes override only this preset button."
                  default: "style_preset"
                  selector:
                    select:
                      mode: dropdown
                      options:
                        - label: "Use Style Preset"
                          value: "style_preset"
                        - label: "Use Bubble Card / theme"
                          value: "inherit"
                        - label: "Preset color"
                          value: "preset"
                        - label: "Color wheel"
                          value: "wheel"
                        - label: "Custom value"
                          value: "manual"
                        - label: "JS template"
                          value: "template"
                button_bg_theme:
                  label: "Button Background"
                  selector:
                    ui_color:
                      include_none: true
                      include_state: true
                button_bg_wheel:
                  label: "Button Background Color Wheel"
                  selector:
                    color_rgb: {}
                button_bg_manual:
                  label: "Button Background Custom Value"
                  description: "CSS color, for example rgba(0, 188, 212, 0.28)."
                  selector:
                    text: {}
                button_bg_template:
                  label: "Button Background JS Template"
                  description: "Return a CSS color. Available variables: hass, entity, state, pct, preset, currentPreset."
                  selector:
                    text:
                      multiline: true

                button_icon_mode:
                  label: "Button Icon Mode"
                  default: "style_preset"
                  selector:
                    select:
                      mode: dropdown
                      options:
                        - label: "Use Style Preset"
                          value: "style_preset"
                        - label: "Use Bubble Card / theme"
                          value: "inherit"
                        - label: "Preset color"
                          value: "preset"
                        - label: "Color wheel"
                          value: "wheel"
                        - label: "Custom value"
                          value: "manual"
                        - label: "JS template"
                          value: "template"
                button_icon_theme:
                  label: "Button Icon Color"
                  selector:
                    ui_color:
                      include_none: true
                      include_state: true
                button_icon_wheel:
                  label: "Button Icon Color Wheel"
                  selector:
                    color_rgb: {}
                button_icon_manual:
                  label: "Button Icon Custom Value"
                  selector:
                    text: {}
                button_icon_template:
                  label: "Button Icon JS Template"
                  description: "Return a CSS color. Available variables: hass, entity, state, pct, preset, currentPreset."
                  selector:
                    text:
                      multiline: true

                button_text_mode:
                  label: "Button Text Mode"
                  default: "style_preset"
                  selector:
                    select:
                      mode: dropdown
                      options:
                        - label: "Use Style Preset"
                          value: "style_preset"
                        - label: "Use Bubble Card / theme"
                          value: "inherit"
                        - label: "Preset color"
                          value: "preset"
                        - label: "Color wheel"
                          value: "wheel"
                        - label: "Custom value"
                          value: "manual"
                        - label: "JS template"
                          value: "template"
                button_text_theme:
                  label: "Button Text Color"
                  selector:
                    ui_color:
                      include_none: true
                      include_state: true
                button_text_wheel:
                  label: "Button Text Color Wheel"
                  selector:
                    color_rgb: {}
                button_text_manual:
                  label: "Button Text Custom Value"
                  selector:
                    text: {}
                button_text_template:
                  label: "Button Text JS Template"
                  description: "Return a CSS color. Available variables: hass, entity, state, pct, preset, currentPreset."
                  selector:
                    text:
                      multiline: true

                glow_mode:
                  label: "Glow Mode"
                  default: "style_preset"
                  selector:
                    select:
                      mode: dropdown
                      options:
                        - label: "Use Style Preset"
                          value: "style_preset"
                        - label: "Use Bubble Card / theme"
                          value: "inherit"
                        - label: "Preset color"
                          value: "preset"
                        - label: "Color wheel"
                          value: "wheel"
                        - label: "Custom value"
                          value: "manual"
                        - label: "JS template"
                          value: "template"
                glow_theme:
                  label: "Glow Color"
                  selector:
                    ui_color:
                      include_none: true
                      include_state: true
                glow_wheel:
                  label: "Glow Color Wheel"
                  selector:
                    color_rgb: {}
                glow_manual:
                  label: "Glow Custom Value"
                  selector:
                    text: {}
                glow_template:
                  label: "Glow JS Template"
                  description: "Return a CSS color. Available variables: hass, entity, state, pct, preset, currentPreset."
                  selector:
                    text:
                      multiline: true
                glow_enabled:
                  label: "Enable Button Glow"
                  default: true
                  selector:
                    boolean: {}
                glow_size:
                  label: "Button Glow Size"
                  default: 14
                  selector:
                    number:
                      min: 0
                      max: 40
                      step: 1
                      mode: slider
                      unit_of_measurement: "px"
                action_enabled:
                  label: "Enable Tap Action"
                  default: true
                  selector:
                    boolean: {}

    - type: expandable
      title: "Advanced"
      icon: "mdi:cog-outline"
      schema:
        - type: grid
          column_min_width: "220px"
          schema:
            - name: debug
              label: "Debug Logging"
              default: false
              selector:
                boolean: {}

  code: |
    ${(() => {
      const config = this.config.fan_speed_visual_center || {};
      // fan_entity is retained as the configuration key for backward compatibility,
      // but it may now reference either a fan or climate entity.
      const fanEntity = config.fan_entity || this.config.entity;
      const fan = fanEntity ? hass.states[fanEntity] : null;
      const controlDomain = String(fanEntity || "").split(".")[0];
      const controlMode = config.control_mode || "auto";

      const state = fan?.state || "off";
      const pct = Number(fan?.attributes?.percentage || 0);
      const hardOffStates = ["off", "unavailable", "unknown"];
      const baseIsOn = !!fan && !hardOffStates.includes(state);
      const percentageControlsEnabled = controlMode === "percentage" || (controlMode === "auto" && controlDomain === "fan");
      const debug = (...args) => { if (config.debug) console.debug("[fan_speed_visual_center]", ...args); };

      const clampNumber = (value, min, max) => {
        const n = Number(value);
        if (!Number.isFinite(n)) return null;
        return Math.min(max, Math.max(min, n));
      };

      const rgbToCss = (rgb) => {
        if (!Array.isArray(rgb)) return "";
        return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
      };

      const themeToCss = (value) => {
        if (!value || value === "none") return "";
        if (value === "state") return "var(--state-icon-active-color)";
        if (value === "transparent") return "transparent";
        const raw = String(value).trim();
        if (
          raw.startsWith("#") || raw.startsWith("rgb") || raw.startsWith("hsl") ||
          raw.startsWith("var(") || raw === "white" || raw === "black" || raw === "transparent"
        ) return raw;
        return `var(--${raw}-color, ${raw})`;
      };

      const templateToCss = (template, extra = {}) => {
        if (!template) return "";
        try {
          return Function("hass", "entity", "state", "pct", "activeSpeed", "styleKey", `return (${template});`)(hass, fan, state, pct, extra.activeSpeed, extra.styleKey) || "";
        } catch (e) {
          try {
            return Function("hass", "entity", "state", "pct", "activeSpeed", "styleKey", template)(hass, fan, state, pct, extra.activeSpeed, extra.styleKey) || "";
          } catch (err) {
            debug("Template color failed", err);
            return "";
          }
        }
      };

      const color = (base, fallback = "", extra = {}, defaultMode = "preset") => {
        const mode = config[`${base}_mode`] || defaultMode;
        if (mode === "inherit") return fallback;
        if (mode === "manual") return String(config[`${base}_manual`] || "").trim() || fallback;
        if (mode === "wheel") return rgbToCss(config[`${base}_wheel`]) || fallback;
        if (mode === "template") return String(templateToCss(config[`${base}_template`], extra)).trim() || fallback;
        return themeToCss(config[`${base}_theme`]) || fallback;
      };

      const objectTemplateToCss = (template, preset = {}) => {
        if (!template) return "";
        const mappingCurrentValue = getPresetContext(preset).currentValue;
        try {
          return Function("hass", "entity", "state", "pct", "preset", "currentPreset", `return (${template});`)(hass, fan, state, pct, preset, mappingCurrentValue) || "";
        } catch (e) {
          try {
            return Function("hass", "entity", "state", "pct", "preset", "currentPreset", template)(hass, fan, state, pct, preset, mappingCurrentValue) || "";
          } catch (err) {
            debug("Preset template color failed", err);
            return "";
          }
        }
      };

      const objectColor = (obj, base, fallback = "") => {
        if (!obj) return fallback;

        // Backward-compatible support for the older CSS-only override fields.
        const legacyKey = base === "button_bg" ? "button_bg_override"
          : base === "button_icon" ? "button_icon_override"
          : base === "button_text" ? "button_text_override"
          : base === "glow" ? "glow_override"
          : "";
        if (legacyKey && obj[legacyKey]) return String(obj[legacyKey]).trim() || fallback;

        const mode = obj[`${base}_mode`] || "style_preset";
        if (mode === "style_preset" || mode === "inherit") return fallback;
        if (mode === "preset") return themeToCss(obj[`${base}_theme`]) || fallback;
        if (mode === "manual") return String(obj[`${base}_manual`] || "").trim() || fallback;
        if (mode === "wheel") return rgbToCss(obj[`${base}_wheel`]) || fallback;
        if (mode === "template") return String(objectTemplateToCss(obj[`${base}_template`], obj)).trim() || fallback;
        return themeToCss(obj[`${base}_theme`]) || fallback;
      };

      const setVar = (name, value) => {
        if (value) card.style.setProperty(name, value);
        else card.style.removeProperty(name);
      };

      const setScopedVar = (name, value, className) => {
        setVar(name, value);
        card.classList.toggle(className, !!value);
      };

      const getConfiguredSpeeds = () => {
        const raw = Array.isArray(config.speeds) ? config.speeds : [];
        const speeds = [];
        raw.forEach((s, idx) => {
          const value = clampNumber(s?.value, 1, 100);
          if (value === null) {
            debug("Ignoring invalid speed entry because value is missing or invalid.", s);
            return;
          }
          speeds.push({
            ...s,
            index: speeds.length,
            value,
            name: String(s?.name || `Speed ${speeds.length + 1}`),
            icon: s?.icon || "mdi:fan",
            animate_icon: s?.animate_icon !== false,
            action_enabled: s?.action_enabled !== false,
          });
        });

        if (speeds.length > 0) return percentageControlsEnabled ? speeds.slice(0, 10).sort((a, b) => a.value - b.value) : [];
        if (!percentageControlsEnabled) return [];

        // Backward-compatible fallback for the original 3-speed fan config.
        const lowMax = Number(config.low_max ?? 40);
        const mediumMax = Number(config.medium_max ?? 80);
        return [
          { index: 0, name: "Speed 1", value: lowMax, icon: "mdi:fan-speed-1", animate_icon: true, action_enabled: true, style_preset: "low" },
          { index: 1, name: "Speed 2", value: mediumMax, icon: "mdi:fan-speed-2", animate_icon: true, action_enabled: true, style_preset: "medium" },
          { index: 2, name: "Speed 3", value: 100, icon: "mdi:fan-speed-3", animate_icon: true, action_enabled: true, style_preset: "high" },
        ];
      };

      const speeds = getConfiguredSpeeds();

      const normalizeStyleKey = (value) => {
        if (["low", "medium", "high"].includes(value)) return value;
        if (["preset_1", "style_1", "1"].includes(String(value))) return "low";
        if (["preset_2", "style_2", "2"].includes(String(value))) return "medium";
        if (["preset_3", "style_3", "3"].includes(String(value))) return "high";
        return "";
      };

      const buildQuickDropdownMapping = (kind, entity, button, label, icon) => {
        const buttonNumber = Number(button);
        if (!entity || !Number.isFinite(buttonNumber) || buttonNumber < 1) return null;
        return {
          label,
          target_entity: entity,
          action_type: "more_info",
          display_mode: "mirror_state",
          active_attribute: "state",
          affect_main_card: false,
          icon,
          sub_button_index: buttonNumber,
          __quick_dropdown: kind,
        };
      };

      const quickDropdownMappings = [
        buildQuickDropdownMapping("mode", config.mode_dropdown_entity, config.mode_dropdown_button, "Mode", "mdi:tune-variant"),
        buildQuickDropdownMapping("speed", config.speed_dropdown_entity, config.speed_dropdown_button, "Speed", "mdi:fan-speed-2"),
      ].filter(Boolean);

      const manualPresetMappings = config.enable_presets === true && Array.isArray(config.preset_mappings)
        ? config.preset_mappings
        : [];

      const presetMappings = [...quickDropdownMappings, ...manualPresetMappings].filter((mapping) => {
        if (!mapping) return false;
        const actionType = String(mapping.action_type || "auto");
        return actionType === "more_info" || (mapping.preset_value !== undefined && mapping.preset_value !== null && String(mapping.preset_value).trim() !== "");
      });

      const inferMappingActionType = (mapping, targetEntity) => {
        const explicit = String(mapping?.action_type || "auto");
        if (explicit !== "auto") return explicit;
        const domain = String(targetEntity || "").split(".")[0];
        if (domain === "climate") return "climate_fan_mode";
        if (domain === "select") return "select_option";
        if (domain === "input_select") return "input_select_option";
        return "fan_preset";
      };

      const defaultActiveAttribute = (mapping, actionType) => {
        const configured = String(mapping?.active_attribute || "").trim();
        if (configured) return configured;
        if (actionType === "more_info") return "state";
        if (actionType === "climate_fan_mode") return "fan_mode";
        if (actionType === "climate_preset" || actionType === "fan_preset") {
          return String(config.preset_attribute || "preset_mode");
        }
        return "state";
      };

      const getPresetContext = (mapping) => {
        const targetEntity = mapping?.target_entity || fanEntity;
        const target = targetEntity ? hass.states[targetEntity] : null;
        const actionType = inferMappingActionType(mapping, targetEntity);
        const activeAttribute = defaultActiveAttribute(mapping, actionType);
        const currentValue = activeAttribute === "state"
          ? String(target?.state || "")
          : String(target?.attributes?.[activeAttribute] ?? "");
        return { targetEntity, target, actionType, activeAttribute, currentValue };
      };

      const isPresetActive = (mapping) => {
        if (!mapping || mapping.preset_value === undefined || mapping.preset_value === null) return false;
        const { currentValue, actionType } = getPresetContext(mapping);
        if (actionType === "more_info") return false;
        return currentValue === String(mapping.preset_value);
      };

      const activePresetMappings = presetMappings.filter(isPresetActive);
      const controlPresetMatch = activePresetMappings.find((mapping) => {
        const ctx = getPresetContext(mapping);
        return ctx.targetEntity === fanEntity && ["fan_preset", "climate_fan_mode", "climate_preset"].includes(ctx.actionType);
      }) || null;
      const presetMatch = activePresetMappings.find((mapping) => mapping.affect_main_card !== false) || controlPresetMatch || null;
      const currentPreset = presetMatch ? getPresetContext(presetMatch).currentValue : "";

      const getActiveSpeed = () => {
        // Presets like Inovelli Smart/Breeze are exclusive active modes.
        // Do not also highlight a normal percentage speed while a configured preset is active.
        if (controlPresetMatch) return null;
        if (!baseIsOn || pct <= 0 || speeds.length === 0) return null;
        return speeds.reduce((best, s) => {
          if (!best) return s;
          const d = Math.abs(s.value - pct);
          const bd = Math.abs(best.value - pct);
          if (d < bd) return s;
          if (d === bd && s.value > best.value) return s;
          return best;
        }, null);
      };

      const activeSpeed = getActiveSpeed();

      const getStyleKeyForSpeed = (speed) => {
        const explicit = normalizeStyleKey(speed?.style_preset || speed?.style_bucket);
        if (explicit) return explicit;
        const count = Math.max(1, speeds.length);
        const position = speed ? speed.index / Math.max(1, count - 1) : 0;
        if (position <= 0.33) return "low";
        if (position <= 0.66) return "medium";
        return "high";
      };

      // A primary fan/climate mode mapping can keep the control visually active even
      // when that integration reports an off-like state while changing modes. External
      // select mappings never force the primary device on.
      const presetKeepsControlActive = !!controlPresetMatch && controlPresetMatch.treat_as_active !== false;
      const fanOff = hardOffStates.includes(state) && !presetKeepsControlActive;
      const activeStyleKey = fanOff
        ? "off"
        : (presetMatch
          ? (normalizeStyleKey(presetMatch.style_preset) || "medium")
          : (activeSpeed ? getStyleKeyForSpeed(activeSpeed) : "low"));

      const findMainIcon = () => card.querySelector(".bubble-icon") || card.querySelector(".bubble-icon-container ha-icon") || card.querySelector("ha-icon.bubble-icon");
      const setMainIcon = (iconName) => {
        const icon = findMainIcon();
        if (!icon || !iconName) return;
        try { icon.icon = iconName; icon.setAttribute("icon", iconName); } catch (e) {}
      };

      const setIconInButton = (button, iconName) => {
        if (!button || !iconName) return;
        const icon = button.querySelector("ha-icon");
        if (!icon) return;
        try { icon.icon = iconName; icon.setAttribute("icon", iconName); } catch (e) {}
      };

      const setTextInButton = (button, text) => {
        if (!button || text === undefined || text === null || text === "") return;
        const value = String(text);
        button.setAttribute("title", value);
        button.setAttribute("aria-label", value);
        const label = button.querySelector(".bubble-sub-button-name, .bubble-sub-button-name-container, .bubble-name, .name, span, p");
        if (label) label.textContent = value;
        button.style.setProperty("--fan-sub-button-dynamic-label", JSON.stringify(value));
        button.dataset.fanSpeedVisualLabel = value;
      };

      const getSubButton = (number) => {
        const n = Number(number);
        if (!Number.isFinite(n) || n < 1) return null;
        const direct = card.querySelector(`.bubble-sub-button-${n}`);
        if (direct) return direct;
        const buttons = Array.from(card.querySelectorAll(".bubble-sub-button"));
        return buttons[n - 1] || null;
      };

      const getSpeedButtonNumber = (speed) => {
        const explicit = Number(speed?.sub_button_index);
        if (Number.isFinite(explicit) && explicit >= 1) return explicit;
        if (config.auto_map_speed_buttons !== false) return Number(config.speed_sub_button_start_index ?? 2) + speed.index;
        return null;
      };

      const setColorOnElements = (elements, cssColor) => {
        elements.forEach((el) => {
          if (cssColor) {
            el.style.setProperty("color", cssColor, "important");
            el.style.setProperty("fill", cssColor, "important");
            el.style.setProperty("--primary-text-color", cssColor, "important");
            el.style.setProperty("--secondary-text-color", cssColor, "important");
          } else {
            el.style.removeProperty("color");
            el.style.removeProperty("fill");
            el.style.removeProperty("--primary-text-color");
            el.style.removeProperty("--secondary-text-color");
          }
        });
      };

      const styleButton = (button, { background = "", icon = "", text = "", opacity = "", glow = "" } = {}) => {
        if (!button) return;
        if (background) {
          button.style.setProperty("background", background, "important");
          button.style.setProperty("background-color", background, "important");
          button.style.setProperty("--bubble-sub-button-background-color", background, "important");
        } else {
          button.style.removeProperty("background");
          button.style.removeProperty("background-color");
          button.style.removeProperty("--bubble-sub-button-background-color");
        }
        if (opacity !== "") button.style.setProperty("opacity", String(opacity), "important");
        else button.style.removeProperty("opacity");
        if (glow !== "") button.style.setProperty("box-shadow", glow || "none", "important");
        else button.style.removeProperty("box-shadow");
        if (icon) button.style.setProperty("--fan-sub-button-icon-color", icon);
        else button.style.removeProperty("--fan-sub-button-icon-color");
        if (text) {
          button.style.setProperty("--fan-sub-button-text-color", text);
          button.style.setProperty("--primary-text-color", text, "important");
          button.style.setProperty("--secondary-text-color", text, "important");
        } else {
          button.style.removeProperty("--fan-sub-button-text-color");
          button.style.removeProperty("--primary-text-color");
          button.style.removeProperty("--secondary-text-color");
        }
        setColorOnElements(button.querySelectorAll("ha-icon, .bubble-sub-button-icon, .bubble-icon"), icon);
        setColorOnElements(button.querySelectorAll(".bubble-sub-button-name, .bubble-sub-button-name-container, .bubble-name, span, p"), text);
      };

      const detachAction = (button) => {
        if (!button || button.dataset?.fanSpeedVisualAction !== "true") return;
        button.onclick = button.__fanSpeedVisualPreviousOnclick || null;
        delete button.__fanSpeedVisualPreviousOnclick;
        delete button.dataset.fanSpeedVisualAction;
        button.style.removeProperty("cursor");
      };

      const attachAction = (button, fn, enabled = true) => {
        if (!button) return;
        detachAction(button);
        if (!enabled) return;
        button.__fanSpeedVisualPreviousOnclick = button.onclick || null;
        button.dataset.fanSpeedVisualAction = "true";
        button.style.setProperty("cursor", "pointer");
        button.onclick = (ev) => {
          ev.preventDefault();
          ev.stopPropagation();
          try { fn(); } catch (err) { debug("Action failed", err); }
        };
      };

      const callEntityService = (domain, service, entityId, data = {}) => {
        if (!domain || !service || !entityId || !hass?.callService) {
          debug("Skipping service call; missing domain, service, entity, or hass.callService", domain, service, entityId, data);
          return;
        }
        hass.callService(domain, service, { entity_id: entityId, ...data });
      };

      const callControlService = (service, data = {}) => {
        const domain = ["fan", "climate"].includes(controlDomain) ? controlDomain : "homeassistant";
        callEntityService(domain, service, fanEntity, data);
      };

      const callFanService = (service, data = {}) => {
        if (controlDomain !== "fan") {
          debug(`Ignoring fan.${service}; primary entity is ${controlDomain || "unknown"}.`);
          return;
        }
        callEntityService("fan", service, fanEntity, data);
      };

      const callMappedAction = (mapping) => {
        const ctx = getPresetContext(mapping);
        const value = mapping?.preset_value;
        if (ctx.actionType === "more_info") {
          const event = new Event("hass-more-info", { bubbles: true, composed: true });
          event.detail = { entityId: ctx.targetEntity };
          card.dispatchEvent(event);
          return;
        }
        const specs = {
          fan_preset: { domain: "fan", service: "set_preset_mode", field: "preset_mode" },
          climate_fan_mode: { domain: "climate", service: "set_fan_mode", field: "fan_mode" },
          climate_preset: { domain: "climate", service: "set_preset_mode", field: "preset_mode" },
          select_option: { domain: "select", service: "select_option", field: "option" },
          input_select_option: { domain: "input_select", service: "select_option", field: "option" },
        };
        const spec = specs[ctx.actionType];
        if (!spec) {
          debug("Unsupported mapping action type", ctx.actionType, mapping);
          return;
        }
        const execute = () => callEntityService(spec.domain, spec.service, ctx.targetEntity, { [spec.field]: value });
        const targetDomain = String(ctx.targetEntity || "").split(".")[0];
        const perButtonTurnOn = mapping?.turn_on_first;
        const shouldTurnOnFirst = ["fan", "climate"].includes(targetDomain)
          && (perButtonTurnOn === true || (perButtonTurnOn === undefined && config.preset_turn_on_first !== false))
          && hardOffStates.includes(String(ctx.target?.state || "off"));
        if (shouldTurnOnFirst) {
          callEntityService(targetDomain, "turn_on", ctx.targetEntity);
          const delay = Math.max(0, Number(config.preset_set_delay_ms ?? 350));
          window.setTimeout(execute, delay);
        } else {
          execute();
        }
      };

      card.classList.remove(
        "fan-speed-off", "fan-speed-active", "fan-style-low", "fan-style-medium", "fan-style-high",
        "fan-enable-glow", "fan-spin-enabled", "fan-spin-reverse",
        "fan-preset-pulse", "fan-preset-wobble", "fan-preset-breeze",
        "fan-layout-control-row", "fan-layout-compact-fill-row", "fan-layout-bottom-control-row", "fan-hide-main-name-state",
        "fan-custom-card-background", "fan-custom-icon-background", "fan-custom-icon-color",
        "fan-custom-inactive-background", "fan-custom-inactive-icon", "fan-custom-inactive-text", "fan-custom-inactive-opacity"
      );
      card.querySelectorAll('[data-fan-speed-visual-action="true"]').forEach(detachAction);
      card.classList.add(fanOff ? "fan-speed-off" : "fan-speed-active");
      if (activeSpeed) card.classList.add(`fan-style-${activeStyleKey}`);
      if (config.sub_button_layout === "control_row") card.classList.add("fan-layout-control-row");
      if (config.sub_button_layout === "compact_fill_row") card.classList.add("fan-layout-compact-fill-row");
      if (config.sub_button_layout === "bottom_control_row") card.classList.add("fan-layout-bottom-control-row");
      if (config.hide_main_name_state === true) card.classList.add("fan-hide-main-name-state");
      card.style.setProperty("--fan-sub-button-min-width", `${Number(config.sub_button_min_width ?? 48)}px`);
      card.style.setProperty("--fan-sub-button-max-width", `${Number(config.sub_button_max_width ?? 68)}px`);
      card.style.setProperty("--fan-sub-button-gap", `${Number(config.sub_button_gap ?? 6)}px`);
      card.style.setProperty("--fan-sub-button-justify", String(config.sub_button_justify || "space-between"));

      const inactiveBg = color("inactive_background", "", {}, "inherit");
      const inactiveIcon = color("inactive_icon", "", {}, "inherit");
      const inactiveText = color("inactive_text", "", {}, "inherit");
      const useInactiveOpacity = config.inactive_opacity_mode === "custom";
      const inactiveOpacity = useInactiveOpacity ? Number(config.inactive_opacity ?? 65) / 100 : "";
      setScopedVar("--fan-inactive-subbutton-background", inactiveBg, "fan-custom-inactive-background");
      setScopedVar("--fan-inactive-subbutton-icon-color", inactiveIcon, "fan-custom-inactive-icon");
      setScopedVar("--fan-inactive-subbutton-text-color", inactiveText, "fan-custom-inactive-text");
      setScopedVar("--fan-inactive-subbutton-opacity", inactiveOpacity, "fan-custom-inactive-opacity");

      const offUsesMainIcon = config.off_target_mode === "main_icon";
      const knownTargets = new Set();
      if (!offUsesMainIcon) knownTargets.add(Number(config.off_target ?? 1));
      speeds.forEach((s) => { const n = getSpeedButtonNumber(s); if (n) knownTargets.add(n); });
      if (config.enable_direction === true) knownTargets.add(Number(config.direction_sub_button_index ?? 5));
      if (config.enable_oscillation === true) knownTargets.add(Number(config.oscillation_sub_button_index ?? 6));
      presetMappings.forEach((p) => { if (Number(p?.sub_button_index)) knownTargets.add(Number(p.sub_button_index)); });

      const buttonsToReset = config.clear_all_sub_buttons === true
        ? Array.from(card.querySelectorAll(".bubble-sub-button"))
        : Array.from(knownTargets).map(getSubButton).filter(Boolean);
      buttonsToReset.forEach((button) => styleButton(button, { background: inactiveBg, icon: inactiveIcon, text: inactiveText, opacity: inactiveOpacity }));

      const styleActiveButton = (button, prefix, overrides = {}) => {
        if (!button) return;
        const bg = overrides.bg || color(`${prefix}_button_bg`, {
          off: "rgba(255,255,255,0.22)", low: "rgba(76,175,80,0.25)", medium: "rgba(255,193,7,0.25)", high: "rgba(244,67,54,0.25)"
        }[prefix] || "rgba(255,255,255,0.22)", { activeSpeed, styleKey: prefix });
        const icon = overrides.icon || color(`${prefix}_button_icon`, "", { activeSpeed, styleKey: prefix });
        const text = overrides.text || color(`${prefix}_button_text`, "", { activeSpeed, styleKey: prefix });
        const glowColor = overrides.glow || color(`${prefix}_glow`, {
          off: "rgba(255,255,255,0.55)", low: "rgba(76,175,80,0.85)", medium: "rgba(255,193,7,0.85)", high: "rgba(244,67,54,0.9)"
        }[prefix] || "", { activeSpeed, styleKey: prefix });
        const glowEnabled = overrides.glowEnabled !== undefined ? overrides.glowEnabled !== false : config[`${prefix}_glow_enabled`] !== false;
        const glowSize = Number(overrides.glowSize ?? config[`${prefix}_glow_size`] ?? 14);
        const glow = glowEnabled && glowColor && glowSize > 0 ? `0 0 ${glowSize}px ${glowColor}` : "none";
        if (glow !== "none") card.classList.add("fan-enable-glow");
        styleButton(button, { background: bg, icon: icon || inactiveIcon, text: text || inactiveText, opacity: 1, glow });
      };

      setScopedVar("--fan-card-background", color(`${activeStyleKey}_card`, "", { activeSpeed, styleKey: activeStyleKey }, "inherit"), "fan-custom-card-background");
      setScopedVar("--fan-icon-background", color(`${activeStyleKey}_icon_bg`, "", { activeSpeed, styleKey: activeStyleKey }, "inherit"), "fan-custom-icon-background");
      setScopedVar("--fan-icon-color", color(`${activeStyleKey}_icon`, "", { activeSpeed, styleKey: activeStyleKey }, "inherit"), "fan-custom-icon-color");

      const offButton = offUsesMainIcon ? null : getSubButton(Number(config.off_target ?? 1));
      const powerMode = config.power_button_mode || "off_only";
      const powerIcon = powerMode === "toggle"
        ? (fanOff ? (config.power_button_on_icon || "mdi:power-on") : (config.power_button_off_icon || config.off_button_icon || "mdi:power"))
        : (config.off_button_icon || config.power_button_off_icon || "mdi:power");
      setIconInButton(offButton, powerIcon);
      attachAction(offButton, () => {
        if (powerMode === "toggle" && fanOff) callControlService("turn_on");
        else callControlService("turn_off");
      }, config.off_action_enabled !== false);
      if (fanOff) styleActiveButton(offButton, "off");

      speeds.forEach((s) => {
        const btn = getSubButton(getSpeedButtonNumber(s));
        setIconInButton(btn, s.icon);
        attachAction(btn, () => callFanService("set_percentage", { percentage: s.value }), s.action_enabled !== false && percentageControlsEnabled);
        if (!presetMatch && activeSpeed && s === activeSpeed) {
          const key = getStyleKeyForSpeed(s);
          styleActiveButton(btn, key, {
            bg: String(s.button_bg_override || "").trim(),
            icon: String(s.button_icon_override || "").trim(),
            text: String(s.button_text_override || "").trim(),
            glow: String(s.glow_override || "").trim(),
          });
        }
      });

      const currentDirection = String(fan?.attributes?.[config.direction_attribute || "direction"] || "");
      const forwardValue = String(config.forward_value || "forward");
      const reverseValue = String(config.reverse_value || "reverse");
      const shouldHighlightDirection = () => {
        if (config.enable_direction !== true || config.highlight_direction_button === false) return false;
        const mode = config.direction_button_highlight_mode || "always";
        if (mode === "never") return false;
        if (mode === "reverse_only") return currentDirection === reverseValue;
        return true;
      };
      if (config.enable_direction === true) {
        const directionButton = getSubButton(Number(config.direction_sub_button_index ?? 5));
        const dirIcon = config.direction_button_icon || (currentDirection === reverseValue ? (config.reverse_icon || "mdi:keyboard-tab-reverse") : (config.forward_icon || "mdi:fast-forward")) || "mdi:swap-horizontal";
        setIconInButton(directionButton, dirIcon);
        attachAction(directionButton, () => {
          const next = currentDirection === forwardValue ? reverseValue : forwardValue;
          callFanService("set_direction", { direction: next });
        }, config.direction_action_enabled !== false && controlDomain === "fan");
        if (shouldHighlightDirection()) styleActiveButton(directionButton, fanOff ? "off" : activeStyleKey);
      }

      if (config.enable_oscillation === true) {
        const oscillationButton = getSubButton(Number(config.oscillation_sub_button_index ?? 6));
        const oscillationAttribute = config.oscillation_attribute || "oscillating";
        const oscillating = fan?.attributes?.[oscillationAttribute] === true || String(fan?.attributes?.[oscillationAttribute]).toLowerCase() === "true";
        setIconInButton(oscillationButton, config.oscillation_button_icon || "mdi:arrow-oscillating");
        attachAction(oscillationButton, () => callFanService("oscillate", { oscillating: !oscillating }), config.oscillation_action_enabled !== false && controlDomain === "fan");
        if (config.highlight_oscillation_button !== false && oscillating) styleActiveButton(oscillationButton, fanOff ? "off" : activeStyleKey);
      }

      presetMappings.forEach((preset) => {
        const btn = getSubButton(Number(preset?.sub_button_index));
        if (!btn) return;
        const presetContext = getPresetContext(preset);
        if (preset.icon) setIconInButton(btn, preset.icon);
        if (preset.display_mode === "mirror_state" || preset.action_type === "more_info") setTextInButton(btn, presetContext.currentValue || preset.label || preset.preset_value);
        attachAction(btn, () => callMappedAction(preset), preset.action_enabled !== false && (presetContext.actionType === "more_info" || !!preset.preset_value));
        if (isPresetActive(preset)) {
          const presetStyleKey = normalizeStyleKey(preset.style_preset) || (!fanOff ? activeStyleKey : "low") || "low";
          styleActiveButton(btn, presetStyleKey, {
            bg: objectColor(preset, "button_bg", ""),
            icon: objectColor(preset, "button_icon", ""),
            text: objectColor(preset, "button_text", ""),
            glow: objectColor(preset, "glow", ""),
            glowEnabled: preset.glow_enabled,
            glowSize: preset.glow_size,
          });
        }
      });

      // Main icon handling is intentionally conservative.
      // Bubble Card owns the configured card name/icon. This module must not
      // overwrite those values unless the user explicitly chooses an override mode.
      const mainBehavior = ({ active_speed: "active_speed_icon", on_off: "on_off_icon", card_icon: "keep_card_icon" }[config.main_icon_mode] || config.main_icon_behavior || "keep_card_icon");
      const mainOffIcon = config.main_off_icon || config.off_icon || "mdi:fan-off";
      const mainOnIcon = config.main_on_icon || "mdi:fan";
      const presetMainIcon = (presetMatch && config.preset_icon_overrides_main === true)
        ? (presetMatch.main_icon || presetMatch.icon || "")
        : "";

      if (!fanOff && presetMatch && presetMainIcon) {
        setMainIcon(presetMainIcon);
      } else if (mainBehavior === "active_speed_icon" && fanOff && config.enable_off_icon !== false) {
        setMainIcon(mainOffIcon);
        requestAnimationFrame(() => setMainIcon(mainOffIcon));
      } else if (mainBehavior === "active_speed_icon" && activeSpeed?.icon) {
        setMainIcon(activeSpeed.icon);
      } else if (mainBehavior === "on_off_icon") {
        const nextMainIcon = fanOff && config.enable_off_icon !== false ? mainOffIcon : mainOnIcon;
        setMainIcon(nextMainIcon);
        if (fanOff) requestAnimationFrame(() => setMainIcon(nextMainIcon));
      }
      // keep_card_icon: do nothing. Leave Bubble Card's selected icon alone.

      const mainIconTarget = card.querySelector(".bubble-icon-container") || findMainIcon();
      const mainIconAction = config.main_icon_action || "bubble_default";
      if (offUsesMainIcon && mainIconAction === "bubble_default") {
        attachAction(mainIconTarget, () => {
          if ((config.power_button_mode || "off_only") === "toggle" && fanOff) callControlService("turn_on");
          else callControlService("turn_off");
        }, config.off_action_enabled !== false);
      } else if (mainIconAction === "toggle") {
        attachAction(mainIconTarget, () => callControlService(fanOff ? "turn_on" : "turn_off"));
      } else if (mainIconAction === "turn_on" || mainIconAction === "turn_off") {
        attachAction(mainIconTarget, () => callControlService(mainIconAction));
      } else if (mainIconAction === "none") {
        attachAction(mainIconTarget, () => {});
      } else {
        detachAction(mainIconTarget);
      }

      const presetAnimationMode = presetMatch ? String(presetMatch.animation_mode || "spin") : "";
      const presetAnimationSeconds = Number(presetMatch?.spin_seconds ?? config.default_spin_seconds ?? 1.8);
      const speedShouldSpin = activeSpeed && activeSpeed.animate_icon !== false;
      const presetShouldAnimate = presetMatch && presetAnimationMode !== "none";
      const shouldAnimateMainIcon = config.enable_spin_animation !== false && !fanOff && (speedShouldSpin || presetShouldAnimate);

      if (shouldAnimateMainIcon) {
        if (presetShouldAnimate) {
          card.style.setProperty("--fan-spin-speed", `${presetAnimationSeconds}s`);
          if (presetAnimationMode === "pulse") {
            card.classList.add("fan-preset-pulse");
          } else if (presetAnimationMode === "wobble") {
            card.classList.add("fan-preset-wobble");
          } else if (presetAnimationMode === "breeze") {
            card.classList.add("fan-preset-breeze");
          } else {
            card.classList.add("fan-spin-enabled");
            if (presetAnimationMode === "reverse_spin") card.classList.add("fan-spin-reverse");
          }
        } else {
          const spinSeconds = Number(activeSpeed?.spin_seconds ?? config.default_spin_seconds ?? 1.4);
          card.style.setProperty("--fan-spin-speed", `${spinSeconds}s`);
          card.classList.add("fan-spin-enabled");
          if (config.reverse_direction_animation === true && currentDirection === reverseValue) card.classList.add("fan-spin-reverse");
        }
      } else {
        card.style.removeProperty("--fan-spin-speed");
      }

      return "";
    })()}

    /* Theme values are only overridden when the corresponding module color is set. */
    .fan-custom-card-background .bubble-button-card-container {
      background: var(--fan-card-background) !important;
      transition: background 0.25s ease, box-shadow 0.25s ease !important;
    }

    .fan-custom-icon-background .bubble-icon-container {
      background: var(--fan-icon-background) !important;
      transition: background 0.25s ease, box-shadow 0.25s ease !important;
    }

    .fan-custom-icon-color .bubble-icon,
    .fan-custom-icon-color .bubble-icon-container ha-icon {
      color: var(--fan-icon-color) !important;
      transition: color 0.25s ease, transform 0.25s ease !important;
    }

    .fan-custom-inactive-background .bubble-sub-button {
      background: var(--fan-inactive-subbutton-background) !important;
      background-color: var(--fan-inactive-subbutton-background) !important;
    }

    .fan-custom-inactive-opacity .bubble-sub-button {
      opacity: var(--fan-inactive-subbutton-opacity) !important;
    }

    .bubble-sub-button {
      transition: background 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease !important;
    }

    .fan-custom-inactive-icon .bubble-sub-button ha-icon,
    .fan-custom-inactive-icon .bubble-sub-button .bubble-sub-button-icon {
      color: var(--fan-sub-button-icon-color, var(--fan-inactive-subbutton-icon-color)) !important;
      fill: var(--fan-sub-button-icon-color, var(--fan-inactive-subbutton-icon-color)) !important;
    }

    .fan-custom-inactive-text .bubble-sub-button .bubble-sub-button-name,
    .fan-custom-inactive-text .bubble-sub-button .bubble-sub-button-name-container,
    .fan-custom-inactive-text .bubble-sub-button span,
    .fan-custom-inactive-text .bubble-sub-button p {
      color: var(--fan-sub-button-text-color, var(--fan-inactive-subbutton-text-color)) !important;
    }

    .bubble-sub-button[style*="--fan-sub-button-icon-color"] ha-icon,
    .bubble-sub-button[style*="--fan-sub-button-icon-color"] .bubble-sub-button-icon {
      color: var(--fan-sub-button-icon-color) !important;
      fill: var(--fan-sub-button-icon-color) !important;
    }

    .bubble-sub-button[style*="--fan-sub-button-text-color"] .bubble-sub-button-name,
    .bubble-sub-button[style*="--fan-sub-button-text-color"] .bubble-sub-button-name-container,
    .bubble-sub-button[style*="--fan-sub-button-text-color"] span,
    .bubble-sub-button[style*="--fan-sub-button-text-color"] p {
      color: var(--fan-sub-button-text-color) !important;
    }

    .bubble-sub-button[data-fan-speed-visual-label]:not(:has(.bubble-sub-button-name, .bubble-sub-button-name-container, .bubble-name, .name, span, p))::after {
      content: var(--fan-sub-button-dynamic-label) !important;
      font-size: 12px !important;
      line-height: 1 !important;
      margin-inline-start: 4px !important;
      color: var(--fan-sub-button-text-color, var(--primary-text-color)) !important;
      white-space: nowrap !important;
    }

    .fan-layout-control-row .bubble-sub-button-container,
    .fan-layout-control-row .bubble-sub-button-row,
    .fan-layout-control-row .bubble-sub-buttons-container {
      display: flex !important;
      gap: var(--fan-sub-button-gap, 6px) !important;
      overflow-x: auto !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
    }

    .fan-layout-control-row .bubble-sub-button {
      flex: 0 0 auto !important;
      min-width: var(--fan-sub-button-min-width, 48px) !important;
    }

    .fan-layout-compact-fill-row .bubble-sub-button-container,
    .fan-layout-compact-fill-row .bubble-sub-button-row,
    .fan-layout-compact-fill-row .bubble-sub-buttons-container {
      width: 100% !important;
      max-width: 100% !important;
      display: flex !important;
      justify-content: var(--fan-sub-button-justify, space-between) !important;
      gap: var(--fan-sub-button-gap, 6px) !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      overflow: visible !important;
      box-sizing: border-box !important;
    }

    .fan-layout-compact-fill-row .bubble-sub-button {
      flex: 0 1 var(--fan-sub-button-max-width, 68px) !important;
      width: var(--fan-sub-button-max-width, 68px) !important;
      max-width: var(--fan-sub-button-max-width, 68px) !important;
      min-width: var(--fan-sub-button-min-width, 42px) !important;
      box-sizing: border-box !important;
    }

    .fan-layout-compact-fill-row .bubble-sub-button .bubble-sub-button-name,
    .fan-layout-compact-fill-row .bubble-sub-button .bubble-sub-button-name-container,
    .fan-layout-compact-fill-row .bubble-sub-button span,
    .fan-layout-compact-fill-row .bubble-sub-button p {
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }


    .fan-layout-bottom-control-row .bubble-button-card-container {
      position: relative !important;
      min-height: 96px !important;
      padding-bottom: 48px !important;
      box-sizing: border-box !important;
    }

    .fan-layout-bottom-control-row .bubble-sub-button-container,
    .fan-layout-bottom-control-row .bubble-sub-button-row,
    .fan-layout-bottom-control-row .bubble-sub-buttons-container {
      position: absolute !important;
      left: 12px !important;
      right: 12px !important;
      bottom: 8px !important;
      width: auto !important;
      max-width: none !important;
      display: flex !important;
      justify-content: var(--fan-sub-button-justify, space-between) !important;
      gap: var(--fan-sub-button-gap, 6px) !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      overflow: visible !important;
      box-sizing: border-box !important;
      z-index: 2 !important;
    }

    .fan-layout-bottom-control-row .bubble-sub-button {
      flex: 1 1 0 !important;
      min-width: var(--fan-sub-button-min-width, 48px) !important;
      max-width: var(--fan-sub-button-max-width, 82px) !important;
      width: auto !important;
      box-sizing: border-box !important;
    }

    .fan-layout-bottom-control-row .bubble-sub-button .bubble-sub-button-name,
    .fan-layout-bottom-control-row .bubble-sub-button .bubble-sub-button-name-container,
    .fan-layout-bottom-control-row .bubble-sub-button span,
    .fan-layout-bottom-control-row .bubble-sub-button p {
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    .fan-hide-main-name-state .bubble-name,
    .fan-hide-main-name-state .bubble-state,
    .fan-hide-main-name-state .bubble-name-container {
      display: none !important;
    }

    @keyframes fan-speed-visual-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes fan-speed-visual-pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.12); opacity: 0.82; }
    }

    @keyframes fan-speed-visual-wobble {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-10deg); }
      75% { transform: rotate(10deg); }
    }

    @keyframes fan-speed-visual-breeze {
      0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
      25% { transform: translateX(-2px) rotate(-6deg) scale(1.03); }
      50% { transform: translateX(2px) rotate(6deg) scale(0.98); }
      75% { transform: translateX(-1px) rotate(-3deg) scale(1.02); }
    }

    .fan-spin-enabled .bubble-icon,
    .fan-spin-enabled .bubble-icon-container ha-icon {
      animation: fan-speed-visual-spin var(--fan-spin-speed, 1.5s) linear infinite !important;
      transform-origin: center center !important;
    }

    .fan-spin-enabled.fan-spin-reverse .bubble-icon,
    .fan-spin-enabled.fan-spin-reverse .bubble-icon-container ha-icon {
      animation-direction: reverse !important;
    }

    .fan-preset-pulse .bubble-icon,
    .fan-preset-pulse .bubble-icon-container ha-icon {
      animation: fan-speed-visual-pulse var(--fan-spin-speed, 1.8s) ease-in-out infinite !important;
      transform-origin: center center !important;
    }

    .fan-preset-wobble .bubble-icon,
    .fan-preset-wobble .bubble-icon-container ha-icon {
      animation: fan-speed-visual-wobble var(--fan-spin-speed, 1.8s) ease-in-out infinite !important;
      transform-origin: center center !important;
    }

    .fan-preset-breeze .bubble-icon,
    .fan-preset-breeze .bubble-icon-container ha-icon {
      animation: fan-speed-visual-breeze var(--fan-spin-speed, 2.8s) ease-in-out infinite !important;
      transform-origin: center center !important;
    }

---

Screenshots

[DerHerzog7]

Does this only support 4 steps? We have 6 for our Tuya fans.

[76cb]

Hey @DerHerzog7 thanks for checking it out, right now it is hardcoded around 4 states, off, low, medium and high. I could create a user selectable number of speeds, but it would require me to refractor it, which I am not against doing if you wish to use it!

[DerHerzog7]

Yeh that would be awesome!

[DerHerzog7]

Yeh that would be awesome!

[Gerbildral]

For my Dyson fan i have 10 steps van 0% to 100%. i really like this card. it also has some presets and oscillating mode but those can be made with main sub buttons ofcourse.

[76cb]

Sure thing, I can get on refactoring it after the weekend :)

[76cb]

---

I updated it to support an unlimited number of fan speeds, but I have only been able to test it on mine that has low, med, high.

I also added support for modes, for example, mine supports breeze mode, the icon/its respective animation will also change with this.

Keep in mind, you will need to have the sub buttons created in the actual bubble card for them to work, I tried to have this auto add them, but it got messy, so for now this should work! Let me know if there are any issues and I will do my best to correct them.

I will add, I am at the "extent" of my knowledge with this, so any additional features/debugging will likely include the support of AI because I am by no means a dev professionally, I just do it as a hobby :) Hope you enjoy

[DerHerzog7]

I'm finally coming back to this - how do you actually need to set it up? Do you just need blank sub-button added to the card and the module does the rest? Should they be set as toggle, do nothing, call service etc?

[DerHerzog7]

Is there a reason why this is manual install and not available in the module store?

[ncmarket]

I agree, this should be placed in the Bubble module store, it is quite useful for those of us who are controlling fans in HA.

[76cb]

I am not sure why it isn't appearing in the store, other than I made some mistake I am sure. Let me try to figure out why. I will report back when it is! I am sorry about that, lmao.

[76cb]

It should be working now, if it doesn't show up at first, go the modules store and refresh the store modules :D

Thanks @DerHerzog7 and @ncmarket for pointing this out to me! I had to paste the entire yaml into this discussion post above, unbeknownst to me!

Let me know if you guys have any issues with it as you use it, its my first one so feedback is greatly appreciated!

[DerHerzog7]

No worries. Great work :)

[DerHerzog7]

Hey again

I've been mapping this out. It's a great module.

I'm finding it doesn't follow my theming though. Can you update it to bring across current dashboard theme by default?

[DerHerzog7]

Hi @76cb,

So as I'm building this out there are a few things I'm struggling to since (even with the use of AI).

Overall a great module. Really cool.

• I want the card colour to default to the themes default when the card is off. It seems to set it to transparent?
• I had to create a little module to restore the main icon background color from bubble neon (by Clooos) as it want picking up the default icon color when off
• ui is confusing. I figured it out now though. Could use some tidying up.
• for consistency, I use the main icon as the on off button. Module doesn't seem to allow this as an option. I just set the off button to a non existent sub button.
• I don't have preset options, but I do have two drop down select options for my fans. One sets the mode (normal, sleep, breeze) and the other the timer. I want to enable the same glow conditions and preset styles as on those as the reverse button. I tried using the preset button option but doesn't seem to work.

Love your work!

[DerHerzog7]

Theme Inheritance

Theme inheritance is now the default behavior.

• Added Use Bubble Card / theme as a color mode.

• Card background, main icon, inactive button colors, and inactive opacity are only changed when explicitly configured.

• Removed blanket visual overrides from unconfigured elements.

• Bubble Neon and other dashboard theme styling should now remain intact while the device is off.

Main Icon Actions

Added configurable main icon actions:

• Use Bubble Card's configured action

• Toggle on/off

• Turn on

• Turn off

• No action

Climate Entity Support

The module now supports both fan and climate entities.

• The primary entity selector accepts fan or climate.

• Power actions automatically use the correct entity domain.

• Climate fan-mode mappings use climate.set_fan_mode.

• Climate preset mappings use climate.set_preset_mode.

• Percentage controls remain available for standard fan entities.

• Percentage, preset, direction, and power actions are now dispatched according to the capabilities of the selected entity.

Mode and Select Buttons

The previous Presets section has been reworked into Mode / Select Buttons.

• Each button can target the primary entity or a separate entity.

• Supports:

  • fan

  • climate

  • select

  • input_select

• Action types can be inferred automatically or selected manually.

• Each mapping reads its own entity state or attribute.

• Mode and timer dropdown buttons can be active and glow independently.

• Added Affect Main Card to prevent a mapping from changing the main card style.

Action Handling Fixes

• Disabled module actions no longer consume the original Bubble Card click.

• Existing Bubble Card click handlers are restored when the module is no longer controlling an element.

• Direction controls are now limited to compatible fan entities.

• The module no longer attempts to call fan.set_direction on climate entities.

Backward Compatibility

Existing configuration keys have been retained, including:

• fan_entity

• enable_presets

• preset_mappings

It's not triggering the module update in the store. Possibly because the version number is the same?

[76cb]

I had to manually install it, it kept caching the 1.2 version from github every single time I would save it.

[DerHerzog7]

I had to manually install it, it kept caching the 1.2 version from github every single time I would save it.

Ah ok.

Looking good so far. Under button mapping, it still wants a sub button number even if you have assigned the power off to the main icon. Anyway to specify that to be main icon?

[DerHerzog7]

I had to manually install it, it kept caching the 1.2 version from github every single time I would save it.

Also I'm not really sure how you've implemented the preset options. Both my mode select and speed are in select drop downs, but when I assign those in the preset configuration nothing shows in the button? The styling blocks are confusing too - not sure which relates to what function?

[DerHerzog7]

Oh hang on - does it not support a drop down button? You have to assign each button to a specific option in the select option?
Could it support a drop down?