20 Feb 15:04

Clooos

8b81ae6

Bubble Card v2.5.0-beta.7 Pre-release

Pre-release

Bubble Card 2

v2.5.0-beta.7

Here's a fast release to fix some more issues.

Fixed attributes evaluation:
Attributes like attribute: forecast[0].templow were not working anymore, this is now fixed! #1264
No dashboard/dashboard blinking:
I reverted a change made in v2.5.0-beta.6 that was not working as expected.

v2.5.0-beta.6

Hi everyone!

The beta is not over yet, but we should be really close this time! This release brings important improvements and fixes, especially for the new module system. Thank you again for all your feedback!

But that's not all! @MrBearPresident has finally added the ability to change the number of rows in a section view! The sub-buttons will also reorganize to make use of the newly available space! This is still just the first step, we plan to make even more use of that space in future releases!

💡 New features and enhancements

Section view enhancements:
Added the ability to change the number of rows in a section view. See details above. PR #1172 by @MrBearPresident, thank you again!

Improved attribute selector:
The attribute selector now correctly detects the entity at the same level. You can easily use it like this:

- name: entity
  label: "Entity"
  selector:
    entity: {}
- name: attribute
  label: "Attribute"
  selector:
    attribute: {}

Module migration update:
The style_templates key is now replaced by modules in your YAML configuration. This change is automatically migrated in the editor.
New checkConditionsMet support for modules:
Modules can now use the checkConditionsMet function, allowing advanced condition-based logic with the condition selector.
.is-on and .is-off classes:
Most cards now automatically receive .is-on and .is-off classes for easier custom styling.

✔️ Bug fixes and optimizations

Instant initialization of custom styles, templates, and modules:
Custom styles, templates, and modules now load instantly when the page is rendered.
Refactored modules editor code:
The modules editor code has been refactored for better efficiency and future maintenance.
Fixed incorrect card variable inside pop-up cards:
The card variable now works correctly for custom templates and modules inside pop-up cards. #1255
Fixed module value removal issue:
Removing a value from a module editor now correctly updates the configuration. #1244
Default module behavior fixed:
The Home Assistant default styling module is no longer disabled when another module is selected. You can still disable it manually.
Updated "Home Assistant default styling" module:
Enhanced consistency across more Home Assistant themes.
Updated "Customize the icon container color" module:
This module now uses a list of predefined colors instead of an RGB color picker. Breaking change: Previous RGB values are no longer supported.
Fixed the horizontal button stack gap:
The visual gap between horizontal button stacks and the card above is now bigger in section views.
Reverted actions behavior to v2.4.0:
This update reverts the action handling to its previous behavior. #1250
More custom style compatibility fixes:
Additional fixes to improve compatibility with previous custom styles. Special thanks to @brunosabot!

v2.5.0-beta.5

This beta should fixes the last issues! 🤞

Fixed pop-up behavior resetting scroll position:
The dashboard should now stay in place when opening a pop-up, like in the previous releases.
Fixed an indentation issue in the modules info box:
Code blocks are now indented correctly.

v2.5.0-beta.4

Thank you so much again for all your feedback!

Read this is you don't see any modifications after editing your /www/bubble/bubble-modules.yaml.

Added missing setup informations:
It seems that there was a missing step in the "How to use" the modules in the editor, and in the bubble-modules.yaml.

Add these lines in your configuration.yaml under homeassistant::
```
homeassistant:
  allowlist_external_dirs:
    - /config/www/bubble
    # Not needed if you already have this line:
    - /config/www
```
Now save and restart Home Assistant, then check if the warning in the Modules editor is gone.

v2.5.0-beta.3

This beta fixes the custom styles that weren’t working as expected in previous versions!

Fixed incompatibility issues with more custom styles:
The issue with custom styles disappearing or behaving oddly should be now resolved. If you had any problems with your custom styles in the previous betas, this update should fix them!

v2.5.0-beta.2

Here's the 100th release! 🎉 (Damn it's a beta...)

Fixed incompatibility issues with some custom styles:
This is the first feedback I got, fixing compatibility with some custom styles/templates. Like this one: [Example] Square Room Summery Cards #927.

v2.5.0-beta.1

Hi everyone!

Here we go with v2.5.0-beta.1! This 99th release brings a huge new feature along with numerous optimizations for an even smoother experience! I’ve literally spent all the time I could over the past few weeks on this version, not only because it was awesome to work on, but also because it’s amazing to see how this will push the project forward!

No more teasing! The biggest change in this release is the new Module feature, allowing you to finally manage custom styles and templates in a separate YAML file! But this new feature is so much more powerful than that, it lets you add actual features yourself in the Bubble Card editor, using all the default Home Assistant form options! I can't wait to see what you all will create with it!

Here's what the YAML looks like for this particular example, and notice how simple the editor part is!

icon_container_color:
    name: "Example: Customize the icon container color"
    version: "v1.0"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1231"

    unsupported:
        - horizontal-buttons-stack
        - separator

    description: |
        An RGB color picker to customize the icon container color.
        Configure this module via the editor or in YAML, for example:
        <br><br>
        <code-block><pre>
        icon_container_color:
            - 100
            - 150
            - 180
        </pre></code-block>

    code: |
        .bubble-icon-container {
          opacity: 1 !important;
          background-color: rgb(${this.config.icon_container_color}) !important;
        }

    editor:
      - label: "Color"
        selector:
            color_rgb: {}

That's why I've created a new discussions category where you can find and share them! I've already shared 4 of mine! In these discussions, you can for example find this one, it was highly requested and applies Home Assistant’s default styling to Bubble Card!

I've already added some modules by default, so you can test them directly! But if you want to edit or add modules, first copy the bubble-modules.yaml file from /www/community/Bubble-Card/ (if installed via HACS) to /www/bubble/ (Create the folder if it doesn't exist).

Also, the editor received a big optimization pass, improving its performance and responsiveness, especially for complex dashboards with heavy pop-ups! I also finally improved the colors to match more themes!

Here's the full changelog:

💡 New features and enhancements

New Module system for custom styles and templates:
A new way to define and manage styles/templates within a single YAML file. More info above. #1081
Home Assistant theme-friendly module:
Added a module that automatically adapts to Home Assistant's default styling and themes. More info above. #1144
Direct testing of cards/templates in edit mode:
Cards/templates are now working normally in the editor.
New .bubble-container selector:
You can now target each card container in your custom styles with a single unified selector.
New --bubble-border CSS variable:
Allow more flexibility for styling borders in your Bubble Card setups.
Added a box to display template/modules errors in the editor:
This make debugging much easier as it not needed to open the browser console anymore.
Access to the this variable in custom templates/modules:
Expanding customization possibilities.

✔️ Bug fixes and optimizations

Custom styles and templates now apply instantly:
All custom styles are now applied instantly when the page load.
Fixed crash with spaces in attribute names:
Resolves an issue where attributes containing spaces was not working. PR #1229 by @sbwilson fixing #1082. Thank you so much!
Editor styling improvements:
Various enhancements for for better color contrasts. #1214
Fixed "Tap action on icon" issue:
Attempted fix for some tap actions problems. #990
Dashboard scrolling blocked issue:
The system that prevents dashboard scrolling when a pop-up is open has been improved. Sho...

Contributors

sbwilson, brunosabot, and MrBearPresident

Assets 2

20 Feb 10:25

Clooos

v2.5.0-beta.6

2469ae6

Bubble Card v2.5.0-beta.6 Pre-release

Pre-release

Bubble Card 2

v2.5.0-beta.6

Hi everyone!

The beta is not over yet, but we should be really close this time! This release brings important improvements and fixes, especially for the new module system. Thank you again for all your feedback!

💡 New features and enhancements

Section view enhancements:
Added the ability to change the number of rows in a section view. See details above. PR #1172 by @MrBearPresident, thank you again!

Improved attribute selector:
The attribute selector now correctly detects the entity at the same level. You can easily use it like this:

- name: entity
  label: "Entity"
  selector:
    entity: {}
- name: attribute
  label: "Attribute"
  selector:
    attribute: {}

Module migration update:
The style_templates key is now replaced by modules in your YAML configuration. This change is automatically migrated in the editor.
New checkConditionsMet support for modules:
Modules can now use the checkConditionsMet function, allowing advanced condition-based logic with the condition selector.
.is-on and .is-off classes:
Most cards now automatically receive .is-on and .is-off classes for easier custom styling.

✔️ Bug fixes and optimizations

Instant initialization of custom styles, templates, and modules:
Custom styles, templates, and modules now load instantly when the page is rendered.
Refactored modules editor code:
The modules editor code has been refactored for better efficiency and future maintenance.
Fixed incorrect card variable inside pop-up cards:
The card variable now works correctly for custom templates and modules inside pop-up cards. #1255
Fixed module value removal issue:
Removing a value from a module editor now correctly updates the configuration. #1244
Default module behavior fixed:
The Home Assistant default styling module is no longer disabled when another module is selected. You can still disable it manually.
Updated "Home Assistant default styling" module:
Enhanced consistency across more Home Assistant themes.
Updated "Customize the icon container color" module:
This module now uses a list of predefined colors instead of an RGB color picker. Breaking change: Previous RGB values are no longer supported.
Fixed the horizontal button stack gap:
The visual gap between horizontal button stacks and the card above is now bigger in section views.
Reverted actions behavior to v2.4.0:
This update reverts the action handling to its previous behavior. #1250
More custom style compatibility fixes:
Additional fixes to improve compatibility with previous custom styles. Special thanks to @brunosabot!

v2.5.0-beta.5

This beta should fixes the last issues! 🤞

Fixed pop-up behavior resetting scroll position:
The dashboard should now stay in place when opening a pop-up, like in the previous releases.
Fixed an indentation issue in the modules info box:
Code blocks are now indented correctly.

v2.5.0-beta.4

Thank you so much again for all your feedback!

Read this is you don't see any modifications after editing your /www/bubble/bubble-modules.yaml.

Added missing setup informations:
It seems that there was a missing step in the "How to use" the modules in the editor, and in the bubble-modules.yaml.

Add these lines in your configuration.yaml under homeassistant::
```
homeassistant:
  allowlist_external_dirs:
    - /config/www/bubble
    # Not needed if you already have this line:
    - /config/www
```
Now save and restart Home Assistant, then check if the warning in the Modules editor is gone.

v2.5.0-beta.3

This beta fixes the custom styles that weren’t working as expected in previous versions!

Fixed incompatibility issues with more custom styles:
The issue with custom styles disappearing or behaving oddly should be now resolved. If you had any problems with your custom styles in the previous betas, this update should fix them!

v2.5.0-beta.2

Here's the 100th release! 🎉 (Damn it's a beta...)

Fixed incompatibility issues with some custom styles:
This is the first feedback I got, fixing compatibility with some custom styles/templates. Like this one: [Example] Square Room Summery Cards #927.

v2.5.0-beta.1

Hi everyone!

Here's what the YAML looks like for this particular example, and notice how simple the editor part is!

icon_container_color:
    name: "Example: Customize the icon container color"
    version: "v1.0"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1231"

    unsupported:
        - horizontal-buttons-stack
        - separator

    description: |
        An RGB color picker to customize the icon container color.
        Configure this module via the editor or in YAML, for example:
        <br><br>
        <code-block><pre>
        icon_container_color:
            - 100
            - 150
            - 180
        </pre></code-block>

    code: |
        .bubble-icon-container {
          opacity: 1 !important;
          background-color: rgb(${this.config.icon_container_color}) !important;
        }

    editor:
      - label: "Color"
        selector:
            color_rgb: {}

Here's the full changelog:

💡 New features and enhancements

New Module system for custom styles and templates:
A new way to define and manage styles/templates within a single YAML file. More info above. #1081
Home Assistant theme-friendly module:
Added a module that automatically adapts to Home Assistant's default styling and themes. More info above. #1144
Direct testing of cards/templates in edit mode:
Cards/templates are now working normally in the editor.
New .bubble-container selector:
You can now target each card container in your custom styles with a single unified selector.
New --bubble-border CSS variable:
Allow more flexibility for styling borders in your Bubble Card setups.
Added a box to display template/modules errors in the editor:
This make debugging much easier as it not needed to open the browser console anymore.
Access to the this variable in custom templates/modules:
Expanding customization possibilities.

✔️ Bug fixes and optimizations

Custom styles and templates now apply instantly:
All custom styles are now applied instantly when the page load.
Fixed crash with spaces in attribute names:
Resolves an issue where attributes containing spaces was not working. PR #1229 by @sbwilson fixing #1082. Thank you so much!
Editor styling improvements:
Various enhancements for for better color contrasts. #1214
Fixed "Tap action on icon" issue:
Attempted fix for some tap actions problems. #990
Dashboard scrolling blocked issue:
The system that prevents dashboard scrolling when a pop-up is open has been improved. Should fix #913
Fixed the pop-up "slide from the header to close" on iOS:
Pop-up header swipe gesture now works correctly on iOS.
Missing borders in horizontal button stacks on newer iOS/macOS:
Resolves visual inconsistencies. #1124
Major Safari optimizations:
Improved performance and compatibi...

Contributors

sbwilson, brunosabot, and MrBearPresident

Assets 2

15 Feb 11:15

Clooos

v2.5.0-beta.5

c752f32

Bubble Card v2.5.0-beta.5 Pre-release

Pre-release

Bubble Card 2

v2.5.0-beta.5

This beta should fixes the last issues! 🤞

Fixed pop-up behavior resetting scroll position:
The dashboard should now stay in place when opening a pop-up, like in the previous releases.
Fixed an indentation issue in the modules info box:
Code blocks are now indented correctly.

v2.5.0-beta.4

Thank you so much again for all your feedback!

Read this is you don't see any modifications after editing your /www/bubble/bubble-modules.yaml.

Added missing setup informations:
It seems that there was a missing step in the "How to use" the modules in the editor, and in the bubble-modules.yaml.

Add these lines in your configuration.yaml under homeassistant::
```
homeassistant:
  allowlist_external_dirs:
    - /config/www/bubble
    # Not needed if you already have this line:
    - /config/www
```
Now save and restart Home Assistant, then check if the warning in the Modules editor is gone.

v2.5.0-beta.3

This beta fixes the custom styles that weren’t working as expected in previous versions!

Fixed incompatibility issues with more custom styles:
The issue with custom styles disappearing or behaving oddly should be now resolved. If you had any problems with your custom styles in the previous betas, this update should fix them!

v2.5.0-beta.2

Here's the 100th release! 🎉 (Damn it's a beta...)

Fixed incompatibility issues with some custom styles:
This is the first feedback I got, fixing compatibility with some custom styles/templates. Like this one: [Example] Square Room Summery Cards #927.

v2.5.0-beta.1

Hi everyone!

Here's what the YAML looks like for this particular example, and notice how simple the editor part is!

icon_container_color:
    name: "Example: Customize the icon container color"
    version: "v1.0"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1231"

    unsupported:
        - horizontal-buttons-stack
        - separator

    description: |
        An RGB color picker to customize the icon container color.
        Configure this module via the editor or in YAML, for example:
        <br><br>
        <code-block><pre>
        icon_container_color:
            - 100
            - 150
            - 180
        </pre></code-block>

    code: |
        .bubble-icon-container {
          opacity: 1 !important;
          background-color: rgb(${this.config.icon_container_color}) !important;
        }

    editor:
      - label: "Color"
        selector:
            color_rgb: {}

Here's the full changelog:

💡 New features and enhancements

New Module system for custom styles and templates:
A new way to define and manage styles/templates within a single YAML file. More info above. #1081
Home Assistant theme-friendly module:
Added a module that automatically adapts to Home Assistant's default styling and themes. More info above. #1144
Direct testing of cards/templates in edit mode:
Cards/templates are now working normally in the editor.
New .bubble-container selector:
You can now target each card container in your custom styles with a single unified selector.
New --bubble-border CSS variable:
Allow more flexibility for styling borders in your Bubble Card setups.
Added a box to display template/modules errors in the editor:
This make debugging much easier as it not needed to open the browser console anymore.
Access to the this variable in custom templates/modules:
Expanding customization possibilities.

✔️ Bug fixes and optimizations

Custom styles and templates now apply instantly:
All custom styles are now applied instantly when the page load.
Fixed crash with spaces in attribute names:
Resolves an issue where attributes containing spaces was not working. PR #1229 by @sbwilson fixing #1082. Thank you so much!
Editor styling improvements:
Various enhancements for for better color contrasts. #1214
Fixed "Tap action on icon" issue:
Attempted fix for some tap actions problems. #990
Dashboard scrolling blocked issue:
The system that prevents dashboard scrolling when a pop-up is open has been improved. Should fix #913
Fixed the pop-up "slide from the header to close" on iOS:
Pop-up header swipe gesture now works correctly on iOS.
Missing borders in horizontal button stacks on newer iOS/macOS:
Resolves visual inconsistencies. #1124
Major Safari optimizations:
Improved performance and compatibility for Safari on iOS and macOS.
Fixed a memory leak in text scrolling effect:
Boosting overall performance over time.
Greatly optimized editor performance for dashboards with many pop-ups:
Editing is now significantly faster on complex setups. Fixes #698
Refactored and improved the custom styles/templates system:
Better overall performance.
Editor code quality improvement:
Improved editor code structure for better maintenance. PR #1173 by @MrBearPresident. Thank you so much!
Custom templates with errors no longer break the card or the entire view
Finally!

And maybe more…

This update brings Bubble Card closer to being the ultimate dashboard customization tool! As always, I’d love to hear your feedback, so don’t hesitate to share your thoughts and suggestions on the new Modules system!

Enjoy testing this beta, and thanks again for being part of this awesome community! 🍻

Tip

How to test this beta?

The easiest way is to click on the button below, or go to HACS, search for Bubble Card, and click on it. Then, click the three dots icon in the top-right corner and select "Redownload". You'll be able to choose the beta version under "Need a different version?". You can then change back to your previous version if needed.

ℹ️ Bubble Card news

I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are two videos so far, an introduction explaining the project and a first tutorial on how to create your first pop-up. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don't believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.

I have another announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced YAML configurations, custom styles, and templates. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons. It’s also a great way to learn about all the possibilities of Bubble Card custom styles and templates!

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

A...

Contributors

sbwilson and MrBearPresident

Assets 2

14 Feb 19:14

Clooos

v2.5.0-beta.4

642910d

Bubble Card v2.5.0-beta.4 Pre-release

Pre-release

Bubble Card 2

v2.5.0-beta.4

Thank you so much again for all your feedback!

Read this is you don't see any modifications after editing your /www/bubble/bubble-modules.yaml.

Added missing setup informations:
It seems that there was a missing step in the "How to use" the modules in the editor, and in the bubble-modules.yaml.

Add these lines in your configuration.yaml under homeassistant::
```
homeassistant:
  allowlist_external_dirs:
    - /config/www/bubble
    # Not needed if you already have this line:
    - /config/www
```
Now save and restart Home Assistant, then check if the warning in the Modules editor is gone.

v2.5.0-beta.3

This beta fixes the custom styles that weren’t working as expected in previous versions!

Fixed incompatibility issues with more custom styles:
The issue with custom styles disappearing or behaving oddly should be now resolved. If you had any problems with your custom styles in the previous betas, this update should fix them!

v2.5.0-beta.2

Here's the 100th release! 🎉 (Damn it's a beta...)

Fixed incompatibility issues with some custom styles:
This is the first feedback I got, fixing compatibility with some custom styles/templates. Like this one: [Example] Square Room Summery Cards #927.

v2.5.0-beta.1

Hi everyone!

Here's what the YAML looks like for this particular example, and notice how simple the editor part is!

icon_container_color:
    name: "Example: Customize the icon container color"
    version: "v1.0"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1231"

    unsupported:
        - horizontal-buttons-stack
        - separator

    description: |
        An RGB color picker to customize the icon container color.
        Configure this module via the editor or in YAML, for example:
        <br><br>
        <code-block><pre>
        icon_container_color:
            - 100
            - 150
            - 180
        </pre></code-block>

    code: |
        .bubble-icon-container {
          opacity: 1 !important;
          background-color: rgb(${this.config.icon_container_color}) !important;
        }

    editor:
      - label: "Color"
        selector:
            color_rgb: {}

Here's the full changelog:

💡 New features and enhancements

New Module system for custom styles and templates:
A new way to define and manage styles/templates within a single YAML file. More info above. #1081
Home Assistant theme-friendly module:
Added a module that automatically adapts to Home Assistant's default styling and themes. More info above. #1144
Direct testing of cards/templates in edit mode:
Cards/templates are now working normally in the editor.
New .bubble-container selector:
You can now target each card container in your custom styles with a single unified selector.
New --bubble-border CSS variable:
Allow more flexibility for styling borders in your Bubble Card setups.
Added a box to display template/modules errors in the editor:
This make debugging much easier as it not needed to open the browser console anymore.
Access to the this variable in custom templates/modules:
Expanding customization possibilities.

✔️ Bug fixes and optimizations

Custom styles and templates now apply instantly:
All custom styles are now applied instantly when the page load.
Fixed crash with spaces in attribute names:
Resolves an issue where attributes containing spaces was not working. PR #1229 by @sbwilson fixing #1082. Thank you so much!
Editor styling improvements:
Various enhancements for for better color contrasts. #1214
Fixed "Tap action on icon" issue:
Attempted fix for some tap actions problems. #990
Dashboard scrolling blocked issue:
The system that prevents dashboard scrolling when a pop-up is open has been improved. Should fix #913
Fixed the pop-up "slide from the header to close" on iOS:
Pop-up header swipe gesture now works correctly on iOS.
Missing borders in horizontal button stacks on newer iOS/macOS:
Resolves visual inconsistencies. #1124
Major Safari optimizations:
Improved performance and compatibility for Safari on iOS and macOS.
Fixed a memory leak in text scrolling effect:
Boosting overall performance over time.
Greatly optimized editor performance for dashboards with many pop-ups:
Editing is now significantly faster on complex setups. Fixes #698
Refactored and improved the custom styles/templates system:
Better overall performance.
Editor code quality improvement:
Improved editor code structure for better maintenance. PR #1173 by @MrBearPresident. Thank you so much!
Custom templates with errors no longer break the card or the entire view
Finally!

And maybe more…

Enjoy testing this beta, and thanks again for being part of this awesome community! 🍻

Tip

How to test this beta?

ℹ️ Bubble Card news

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.

[![Patreon Clooos](https://img.shields.io/badge/Patreon-Clooos-orange?logo=patreo...

Contributors

sbwilson and MrBearPresident

Assets 2

14 Feb 16:12

Clooos

v2.5.0-beta.3

148f342

Bubble Card v2.5.0-beta.3 Pre-release

Pre-release

Bubble Card 2

v2.5.0-beta.3

This beta fixes the custom styles that weren’t working as expected in previous versions!

Fixed incompatibility issues with more custom styles:
The issue with custom styles disappearing or behaving oddly should be now resolved. If you had any problems with your custom styles in the previous betas, this update should fix them!

v2.5.0-beta.2

Here's the 100th release! 🎉 (Damn it's a beta...)

Fixed incompatibility issues with some custom styles:
This is the first feedback I got, fixing compatibility with some custom styles/templates. Like this one: [Example] Square Room Summery Cards #927.

v2.5.0-beta.1

Hi everyone!

Here's what the YAML looks like for this particular example, and notice how simple the editor part is!

icon_container_color:
    name: "Example: Customize the icon container color"
    version: "v1.0"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1231"

    unsupported:
        - horizontal-buttons-stack
        - separator

    description: |
        An RGB color picker to customize the icon container color.
        Configure this module via the editor or in YAML, for example:
        <br><br>
        <code-block><pre>
        icon_container_color:
            - 100
            - 150
            - 180
        </pre></code-block>

    code: |
        .bubble-icon-container {
          opacity: 1 !important;
          background-color: rgb(${this.config.icon_container_color}) !important;
        }

    editor:
      - label: "Color"
        selector:
            color_rgb: {}

Here's the full changelog:

💡 New features and enhancements

New Module system for custom styles and templates:
A new way to define and manage styles/templates within a single YAML file. More info above. #1081
Home Assistant theme-friendly module:
Added a module that automatically adapts to Home Assistant's default styling and themes. More info above. #1144
Direct testing of cards/templates in edit mode:
Cards/templates are now working normally in the editor.
New .bubble-container selector:
You can now target each card container in your custom styles with a single unified selector.
New --bubble-border CSS variable:
Allow more flexibility for styling borders in your Bubble Card setups.
Added a box to display template/modules errors in the editor:
This make debugging much easier as it not needed to open the browser console anymore.
Access to the this variable in custom templates/modules:
Expanding customization possibilities.

✔️ Bug fixes and optimizations

Custom styles and templates now apply instantly:
All custom styles are now applied instantly when the page load.
Fixed crash with spaces in attribute names:
Resolves an issue where attributes containing spaces was not working. PR #1229 by @sbwilson fixing #1082. Thank you so much!
Editor styling improvements:
Various enhancements for for better color contrasts. #1214
Fixed "Tap action on icon" issue:
Attempted fix for some tap actions problems. #990
Dashboard scrolling blocked issue:
The system that prevents dashboard scrolling when a pop-up is open has been improved. Should fix #913
Fixed the pop-up "slide from the header to close" on iOS:
Pop-up header swipe gesture now works correctly on iOS.
Missing borders in horizontal button stacks on newer iOS/macOS:
Resolves visual inconsistencies. #1124
Major Safari optimizations:
Improved performance and compatibility for Safari on iOS and macOS.
Fixed a memory leak in text scrolling effect:
Boosting overall performance over time.
Greatly optimized editor performance for dashboards with many pop-ups:
Editing is now significantly faster on complex setups. Fixes #698
Refactored and improved the custom styles/templates system:
Better overall performance.
Editor code quality improvement:
Improved editor code structure for better maintenance. PR #1173 by @MrBearPresident. Thank you so much!
Custom templates with errors no longer break the card or the entire view
Finally!

And maybe more…

Enjoy testing this beta, and thanks again for being part of this awesome community! 🍻

Tip

How to test this beta?

ℹ️ Bubble Card news

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Thank you so much for being part of this amazing community, your support will always makes a huge difference! ❤️

I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!

And if you are interested I've opened a Subreddit for Bubble Card where I post my progress on the ...

Contributors

sbwilson and MrBearPresident

Assets 2

14 Feb 07:01

Clooos

v2.5.0-beta.2

b15cea9

Bubble Card v2.5.0-beta.2 Pre-release

Pre-release

Bubble Card 2

v2.5.0-beta.2

Here's the 100th release! 🎉 (Damn it's a beta...)

Fixed incompatibility issues with some custom styles:
This is the first feedback I got, fixing compatibility with some custom styles/templates. Like this one: [Example] Square Room Summery Cards #927.

v2.5.0-beta.1

Hi everyone!

Here's what the YAML looks like for this particular example, and notice how simple the editor part is!

icon_container_color:
    name: "Example: Customize the icon container color"
    version: "v1.0"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1231"

    unsupported:
        - horizontal-buttons-stack
        - separator

    description: |
        An RGB color picker to customize the icon container color.
        Configure this module via the editor or in YAML, for example:
        <br><br>
        <code-block><pre>
        icon_container_color:
            - 100
            - 150
            - 180
        </pre></code-block>

    code: |
        .bubble-icon-container {
          opacity: 1 !important;
          background-color: rgb(${this.config.icon_container_color}) !important;
        }

    editor:
      - label: "Color"
        selector:
            color_rgb: {}

Here's the full changelog:

💡 New features and enhancements

New Module system for custom styles and templates:
A new way to define and manage styles/templates within a single YAML file. More info above. #1081
Home Assistant theme-friendly module:
Added a module that automatically adapts to Home Assistant's default styling and themes. More info above. #1144
Direct testing of cards/templates in edit mode:
Cards/templates are now working normally in the editor.
New .bubble-container selector:
You can now target each card container in your custom styles with a single unified selector.
New --bubble-border CSS variable:
Allow more flexibility for styling borders in your Bubble Card setups.
Added a box to display template/modules errors in the editor:
This make debugging much easier as it not needed to open the browser console anymore.
Access to the this variable in custom templates/modules:
Expanding customization possibilities.

✔️ Bug fixes and optimizations

Custom styles and templates now apply instantly:
All custom styles are now applied instantly when the page load.
Fixed crash with spaces in attribute names:
Resolves an issue where attributes containing spaces was not working. PR #1229 by @sbwilson fixing #1082. Thank you so much!
Editor styling improvements:
Various enhancements for for better color contrasts. #1214
Fixed "Tap action on icon" issue:
Attempted fix for some tap actions problems. #990
Dashboard scrolling blocked issue:
The system that prevents dashboard scrolling when a pop-up is open has been improved. Should fix #913
Fixed the pop-up "slide from the header to close" on iOS:
Pop-up header swipe gesture now works correctly on iOS.
Missing borders in horizontal button stacks on newer iOS/macOS:
Resolves visual inconsistencies. #1124
Major Safari optimizations:
Improved performance and compatibility for Safari on iOS and macOS.
Fixed a memory leak in text scrolling effect:
Boosting overall performance over time.
Greatly optimized editor performance for dashboards with many pop-ups:
Editing is now significantly faster on complex setups. Fixes #698
Refactored and improved the custom styles/templates system:
Better overall performance.
Editor code quality improvement:
Improved editor code structure for better maintenance. PR #1173 by @MrBearPresident. Thank you so much!
Custom templates with errors no longer break the card or the entire view
Finally!

And maybe more…

Enjoy testing this beta, and thanks again for being part of this awesome community! 🍻

Tip

How to test this beta?

ℹ️ Bubble Card news

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Thank you so much for being part of this amazing community, your support will always makes a huge difference! ❤️

And if you are interested I've opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

🍻

Contributors

sbwilson and MrBearPresident

Assets 2

13 Feb 19:38

Clooos

v2.5.0-beta.1

8d936a6

Bubble Card v2.5.0-beta.1 Pre-release

Pre-release

Bubble Card 2

v2.5.0-beta.1

Hi everyone!

Here's what the YAML looks like for this particular example, and notice how simple the editor part is!

icon_container_color:
    name: "Example: Customize the icon container color"
    version: "v1.0"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1231"

    unsupported:
        - horizontal-buttons-stack
        - separator

    description: |
        An RGB color picker to customize the icon container color.
        Configure this module via the editor or in YAML, for example:
        <br><br>
        <code-block><pre>
        icon_container_color:
            - 100
            - 150
            - 180
        </pre></code-block>

    code: |
        .bubble-icon-container {
          opacity: 1 !important;
          background-color: rgb(${this.config.icon_container_color}) !important;
        }

    editor:
      - label: "Color"
        selector:
            color_rgb: {}

Here's the full changelog:

💡 New features and enhancements

New Module system for custom styles and templates:
A new way to define and manage styles/templates within a single YAML file. More info above. #1081
Home Assistant theme-friendly module:
Added a module that automatically adapts to Home Assistant's default styling and themes. More info above. #1144
Direct testing of cards/templates in edit mode:
Cards/templates are now working normally in the editor.
New .bubble-container selector:
You can now target each card container in your custom styles with a single unified selector.
New --bubble-border CSS variable:
Allow more flexibility for styling borders in your Bubble Card setups.
Added a box to display template/modules errors in the editor:
This make debugging much easier as it not needed to open the browser console anymore.
Access to the this variable in custom templates/modules:
Expanding customization possibilities.

✔️ Bug fixes and optimizations

Custom styles and templates now apply instantly:
All custom styles are now applied instantly when the page load.
Fixed crash with spaces in attribute names:
Resolves an issue where attributes containing spaces was not working. PR #1229 by @sbwilson fixing #1082. Thank you so much!
Editor styling improvements:
Various enhancements for for better color contrasts. #1214
Fixed "Tap action on icon" issue:
Attempted fix for some tap actions problems. #990
Dashboard scrolling blocked issue:
The system that prevents dashboard scrolling when a pop-up is open has been improved. Should fix #913
Fixed the pop-up "slide from the header to close" on iOS:
Pop-up header swipe gesture now works correctly on iOS.
Missing borders in horizontal button stacks on newer iOS/macOS:
Resolves visual inconsistencies. #1124
Major Safari optimizations:
Improved performance and compatibility for Safari on iOS and macOS.
Fixed a memory leak in text scrolling effect:
Boosting overall performance over time.
Greatly optimized editor performance for dashboards with many pop-ups:
Editing is now significantly faster on complex setups. Fixes #698
Refactored and improved the custom styles/templates system:
Better overall performance.
Editor code quality improvement:
Improved editor code structure for better maintenance. PR #1173 by @MrBearPresident. Thank you so much!
Custom templates with errors no longer break the card or the entire view
Finally!

And maybe more…

Enjoy testing this beta, and thanks again for being part of this awesome community! 🍻

Tip

How to test this beta?

ℹ️ Bubble Card news

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Thank you so much for being part of this amazing community, your support will always makes a huge difference! ❤️

And if you are interested I've opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

🍻

Contributors

sbwilson and MrBearPresident

Assets 2

28 Jan 14:17

Clooos

v2.4.0

671cd59

Bubble Card v2.4.0 Latest

Latest

Bubble Card 2

v2.4.0

Hi everyone!

I’m excited to share the brand new v2.4.0 with you! This release wouldn’t have happened without the amazing support from our community and contributors! A big thank you to everyone helping to grow and improve Bubble Card! 🍻

This release brings some great enhancements and fixes! Special thanks to @MrBearPresident for the great work on improving the editor! It's now even sexier and easier to use!

More new features are in the works, including a new way to edit custom styles/templates within a single YAML file. You'll see, this will be amazing for editing and sharing your customizations! This should be coming very soon in a new beta, and I can't wait to get your feedback on it!

Here are the main highlights of this release:

💡 New features and enhancements

Rewritten editor action panel:
The action panel has been completely rewritten to leverage Home Assistant's default panel, improving compatibility and configuration in the editor! Finally! 🥳 PR #1076 by @MrBearPresident.
Editor dropdown improvements:
Entity and service names, along with icons, are now displayed in dropdown menus within the editor, making configurations easier. Fixes #1102. PR #1143 by @MrBearPresident
Live update mode for pop-up slider headers:
Sliders within pop-ups now support the "live update" mode in the editor. Fixes #1149. PR #1150 by @PhilPinsdorf.

✔️ Bug fixes and optimizations

Dwains Dashboard compatibility:
Added support for the Bubble Card editor within Dwains Dashboard. Fixes #1136.
Pop-up new trigger system issue:
Fixed an issue where an empty pop-up trigger caused the pop-up to open after every page reload. #1134.
Slider interaction fix:
Taps and clicks on sliders now properly update entities when live updates are enabled. Fixes #1132. PR #1140 by @controlaltnerd.
Horizontal button stack gradient issue:
Corrected the gradient color rendering at the bottom of the screen in the horizontal button stack. Fixes #1139.
CSS fixes for large 2-row layouts:
Resolved visual inconsistencies in the large 2-row layout. Fixes #1109.
Query Selector issue:
Addressed a regression from v2.3.4 where card.querySelector in bubble-state failed to turn off icons. Fixes #1141.
Code quality improvement:
Improved structure for easier maintenance. PR #1158, #1159, and #1160 by @RubenVerborgh.

Thank you for your continued support and contributions. Enjoy the update!

ℹ️ Bubble Card news

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Thank you so much for being part of this amazing community, your support will always makes a huge difference! ❤️

And if you are interested I've opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

🍻

Contributors

RubenVerborgh, PhilPinsdorf, and 2 other contributors

Assets 2

21 Jan 09:18

Clooos

v2.4.0-beta.1

10a736c

Bubble Card v2.4.0-beta.1 Pre-release

Pre-release

Bubble Card 2

v2.4.0-beta.1

Hi everyone!

I’m excited to share the brand new v2.4.0-beta.1 with you! This release wouldn’t have happened without the amazing support from our community and contributors! A big thank you to everyone helping to grow and improve Bubble Card! 🍻

This release brings some great enhancements and fixes, and should be even more stable than v2.3.4!

Special thanks to @MrBearPresident for the great work on improving the editor! It's now even sexier and easier to use!

Here are the main highlights of this release:

💡 New features and enhancements

Rewritten editor action panel:
The action panel has been completely rewritten to leverage Home Assistant's default panel, improving compatibility and configuration in the editor! Finally! 🥳 PR #1076 by @MrBearPresident.
Editor dropdown improvements:
Entity and service names, along with icons, are now displayed in dropdown menus within the editor, making configurations easier. Fixes #1102. PR #1143 by @MrBearPresident
Live update mode for pop-up slider headers:
Sliders within pop-ups now support the "live update" mode in the editor. Fixes #1149. PR #1150 by @PhilPinsdorf.

✔️ Bug fixes and optimizations

Dwains Dashboard compatibility:
Added support for the Bubble Card editor within Dwains Dashboard. Fixes #1136.
Pop-up new trigger issue:
Fixed an issue where an empty pop-up trigger caused the pop-up to open after every page reload. #1134.
Slider interaction fix:
Taps and clicks on sliders now properly update entities when live updates are enabled. Fixes #1132. PR #1140 by @controlaltnerd.
Horizontal button stack gradient issue:
Corrected the gradient color rendering at the bottom of the screen in the horizontal button stack. Fixes #1139.
CSS fixes for large 2-row layouts:
Resolved visual inconsistencies in the large 2-row layout. Fixes #1109.
Query Selector issue:
Addressed a regression from v2.3.4 where card.querySelector in bubble-state failed to turn off icons. Fixes #1141.
Code quality improvement:
Improved structure for easier maintenance. PR #1158, #1159, and #1160 by @RubenVerborgh.

As this is a beta release, your feedback is critical to ensuring the stability and usability of v2.4.0. Please report any issues or share your thoughts.

Some new features should come later as well 🤞

Thank you for your continued support and contributions. Enjoy the update! 🍻

Tip

How to test this beta?

ℹ️ Bubble Card news

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Thank you so much for being part of this amazing community, your support will always makes a huge difference! ❤️

And if you are interested I've opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

🍻

Contributors

RubenVerborgh, PhilPinsdorf, and 2 other contributors

Assets 2

14 Jan 15:06

Clooos

v2.3.4

14ede92

Bubble Card v2.3.4

Bubble Card 2

v2.3.4

Hi everyone, and Happy New Year! 🎉

I’m back after a little break, and I hope you’re all doing well!

First of all, I’d like to talk about the instability issues with the previous releases (v2.3.1 to v2.3.3). These versions were initially marked as the latest release on GitHub but were later moved to pre-release due to the issues they had. If you missed them, don’t worry, this changelog combines everything you might have missed if you’ve stayed on v2.3.0, along with some new fixes!

I also want to thank @MrBearPresident again for his valuable contributions to these releases!

As always, let me know if you encounter any issues or have feedback. Your input helps make these updates even better!

Here's what’s new:

💡 New features

Conditional sub-button visibility:
Sub-buttons now support conditional visibility based on Home Assistant's conditional system, allowing more dynamic setups without the need to add templates. #787. Thanks to @MrBearPresident for the contribution! PR #995.

In YAML:
```
   visibility:
     # Show this sub-button only when motion is detected at the front door.
     - condition: state
       entity: binary_sensor.front_door_motion
       state: "on"
```
New pop-up trigger system:
Introduced a new trigger system in the pop-up editor, to allow more complex triggers. This new feature is based on the conditional system from @MrBearPresident, so thanks again to him for this great new possibility! #332

This is not a breaking change, existing triggers from previous versions will still work but can only be edited in YAML mode. If you switch to the new system, it will override previously added triggers.

In YAML:
```
   trigger:
     # Open this pop-up when motion is detected at the front door.
     - condition: state
       entity: binary_sensor.front_door_motion
       state: "on"
```
Box shadow variable:
You can now adjust the box shadow for your Bubble Cards, this can be done with the --bubble-box-shadow variable. PR #1009 by @flobiwankenobi.
Safety binary sensor icon:
Added a dedicated icon for safety binary sensors. PR #967 by @nexeck.
Pop-up grid gap variable:
You can now customize the spacing between items in pop-ups using the --bubble-pop-up-gap variable. The default value is 14px.
Accent color for lights:
You can now use the accent color in a light button/slider instead of the light color. To enable it, go to the editor or add use_accent_color: true in YAML. #692.

✔️ Bug fixes and optimizations

Instant .bubble-state and .bubble-name templating:
Templates using card.querySelector('.bubble-state').innerText or card.querySelector('.bubble-name').innerText are now rendered instantly when the page loads. #975.
Pop-up slide-to-close animation:
The animation for closing a pop-up by sliding from the header has been fixed.
Reset pop-up auto-close timer on interaction:
Interacting with a pop-up now resets the auto-close timer, ensuring the pop-up remains open as long as it’s actively used. Thanks to @samrenfrew for the contribution! PR #1071.
Horizontal button stack unstable order:
An issue causing an unstable order inside of the horizontal buttons stack has been fixed. #780. Thanks to @RazorClam for the contribution! PR #1137
Select options language fix:
Select card/sub-button options now correctly display in the default language. #1040.
Synced select sub-button states:
Select sub-button states are now properly synchronized when changed elsewhere in the interface. #1058.
Pop-up title is now hidden:
If a title is added to a pop-up (vertical stack) in the editor, it is now hidden. #1003. Thanks to @MrBearPresident for the contribution! PR #1089.
Fan modes issue:
I should have resolved an error when HVAC are in dry mode. #987.
Media player custom style issue:
Resolved an issue where modifying the background color in .bubble-media-player caused rounded corners to disappear. Thanks to @MrBearPresident for the contribution! PR #1015.
Entity picture issue:
Fixed an issue where some entity_picture URLs were not displayed.
Volume slider issue:
Closing the volume slider in a media player card now behaves as expected. #994 - PR #1001 by @MrBearPresident.

ℹ️ Bubble Card news

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Thank you so much for being part of this amazing community, your support will always makes a huge difference! ❤️

And if you are interested I've opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

🍻

Contributors

flobiwankenobi, nexeck, and 3 other contributors

Assets 2

Releases: Clooos/Bubble-Card

Bubble Card v2.5.0-beta.7

Bubble Card 2

v2.5.0-beta.7

v2.5.0-beta.6

💡 New features and enhancements

✔️ Bug fixes and optimizations

v2.5.0-beta.5

v2.5.0-beta.4

v2.5.0-beta.3

v2.5.0-beta.2

v2.5.0-beta.1

💡 New features and enhancements

✔️ Bug fixes and optimizations

Contributors

Bubble Card v2.5.0-beta.6

Bubble Card 2

v2.5.0-beta.6

💡 New features and enhancements

✔️ Bug fixes and optimizations

v2.5.0-beta.5

v2.5.0-beta.4

v2.5.0-beta.3

v2.5.0-beta.2

v2.5.0-beta.1

💡 New features and enhancements

✔️ Bug fixes and optimizations

Contributors

Bubble Card v2.5.0-beta.5

Bubble Card 2

v2.5.0-beta.5

v2.5.0-beta.4

v2.5.0-beta.3

v2.5.0-beta.2

v2.5.0-beta.1

💡 New features and enhancements

✔️ Bug fixes and optimizations

How to test this beta?

ℹ️ Bubble Card news

Contributors

Bubble Card v2.5.0-beta.4

Bubble Card 2

v2.5.0-beta.4

v2.5.0-beta.3

v2.5.0-beta.2

v2.5.0-beta.1

💡 New features and enhancements

✔️ Bug fixes and optimizations

How to test this beta?

ℹ️ Bubble Card news

Contributors

Bubble Card v2.5.0-beta.3

Bubble Card 2

v2.5.0-beta.3

v2.5.0-beta.2

v2.5.0-beta.1

💡 New features and enhancements

✔️ Bug fixes and optimizations

How to test this beta?

ℹ️ Bubble Card news

Contributors

Bubble Card v2.5.0-beta.2

Bubble Card 2

v2.5.0-beta.2

v2.5.0-beta.1

💡 New features and enhancements

✔️ Bug fixes and optimizations

How to test this beta?

ℹ️ Bubble Card news

Contributors

Bubble Card v2.5.0-beta.1

Bubble Card 2

v2.5.0-beta.1

💡 New features and enhancements

✔️ Bug fixes and optimizations

How to test this beta?

ℹ️ Bubble Card news

Contributors

Bubble Card v2.4.0

Bubble Card 2