Bubble Card v2.3.0-beta.5

Bubble Card 2

v2.3.0-beta.5

Hi everyone!

It took me a while, but I’m back with what I hope is the last v2.3.0 beta! 🤞

I’ve made a lot of improvements to the climate card, fixed many pop-up issues, and added some important bug fixes and optimizations. This release is very stable and should run even more smoothly on some setups. I really hope this is the one!

And a huge thank you to all the beta testers for your feedback and support on this major release!

Here are all the details:

---

💡 New Features

• New compact climate card design: The climate card now features a more compact design, removing the temperature sub-button.

  ⚠️ Important: If you have existing climate cards from the previous betas, open them individually in the editor to automatically remove the previous temperature sub-button. Don’t forget to save each card afterward.

  

• Full support for low/high target temperature: The climate card now fully supports entities with target_temp_low and target_temp_high attributes. #877 (Edit: There is still an issue)

  

• Dynamic color in heat/cool mode: In heat_cool mode, the climate card's color now changes dynamically to reflect whether it's heating or cooling. #863

✔️ Bug Fixes and Optimizations

• No actions on scroll: Actions are now correctly prevented from triggering when scrolling. #892 and #839

• Resolved scrolling issue: Fixed an issue that sometimes made scrolling impossible, particularly in the editor.

• Accent color variable for media player: Added the missing bubble-accent-color variable to the play/pause button in the media player.

• Updated climate CSS variables: The climate card CSS variables are now correct. #908 Thanks to @flobiwankenobi!

• Underscore removed in select lists: Removed underscores from select menu lists. #890

• Fixed pop-up display: Resolved issues where some pop-ups were not displaying at all, or only after leaving the editor or changing views. #821

• Additional pop-up fixes: Addressed other pop-up issues, including console errors. #840 and #791

• Cover control buttons: The open/close buttons for covers are now correctly disabled when they should be. #788

• Thermostat/Fan sliders: Fixed slider functionality for controlling climate and fan entities. #849, #838, and #768

• New pop-up background element: Introduced a new separated element for the pop-up background. #895

  ⚠️ Important: This is a breaking change for users with custom styles that are modifying the pop-up background.

  

---

I can't wait for your feedback as always!

Oh, and one more thing! 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.

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

🍻

Bubble Card v2.3.0-beta.4

Bubble Card 2

v2.3.0-beta.4

Hi everyone!

In this new beta, I focused mainly on bug fixes for the new climate card, but I also took some time to optimize the pop-ups, yes... again. They should feel even faster and smoother on some setups! Please also note that this release bring a small breaking change, here are all the details.

---

⚠️ Breaking change

• Pop-up blurred backdrop: The blurred backdrop behind the pop-ups is now disabled by default. This change improves performance, as the blur effect can slow down pop-ups on some devices. If you'd like to re-enable it, go to the editor, select the first pop-up on your view, and navigate to Styling options > Pop-up styling.

  

💡 New Features

• Climate card extended support (Experimental): The climate card now supports devices without a temperature attribute (like the Bosch BTH-RM230Z). If you have already created a card for this type of entity, delete it then create a new one. This is purely experimental, as I don’t have access to such a device for my tests. #877

✔️ Bug Fixes and Optimizations

• Climate card large layout: Resolved an issue with the "Large layout 2 rows" display in the climate card.
• Smoother pop-up animations: Enhanced pop-up animations for a more fluid experience on some setups.
• Faster and reliable pop-ups: Improved speed and reliability of pop-ups on some setups (Yes again).
• Unexpected shadows in pop-up corners: Fixed a the black shadows in the top left and right corners of the pop-up background. #879
• Missing point in displayed state: Added missing point • when "State" is hidden but "Attribute" and "Last changed" are visible. #872 Thank you @tiagof!
• Hold action: Hold action should now functioning as expected.
• Capitalization in selection lists: Fixed an issue where only the first letter in a select menu was capitalized. #869 and #866
• Climate card minus/plus buttons issue: The controls should now works correctly in all cases within the climate card.
• Climate slider error: Resolved the "expected float" error in the climate slider.
• Fan slider issue: Fixed a bug with the fan sliders, they were not working anymore. #838
• Climate card missing colors: Added the missing colors for "Dry" and "Heat/Cool" modes in the climate card. #863
• Pop-up dev console error: The Uncaught (in promise) TypeError: Cannot read properties of null (reading 'classList') appearing in the browser console should be now fixed. #791 and #837

---

I can't wait for your feedback as always!

Oh, and one more thing! 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.

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

🍻

Bubble Card v2.3.0-beta.3

Bubble Card 2

v2.3.0-beta.3

Hi everyone!

I’m so glad to finally be able to release this update! It’s a major one that took a lot of time and effort, and I’m really proud of the result!

This version brings a number of new features, including a highly requested new card that many of you have been waiting for! I’ve also fixed quite a few bugs and further optimized the code, so this version should consume even fewer resources on some setups. As always, I really hope everything works as expected 🤞

Here are all the details.

---

💡 New features

Climate card

A new experimental climate card is available! It’s still in testing but should work seamlessly. This card automatically changes color based on the selected modes. The temperature display and mode selection menu are sub-buttons that are added automatically when creating the card. You can then modify or remove these sub-buttons as you wish. #398

Select cards and sub-buttons now support attribute lists

Select cards and sub-buttons now support attribute lists for climate, light, and media player entities. If you notice any missing supported attributes, please report them. This option will only show if your entity is supported. #665

Media player blurred background

A new blurred background option for media player cards based on the media cover has been added, giving a cleaner and more modern look.

Toggle for disabling background color in sub-buttons

In the sub-buttons editor, you can now toggle to disable the background color based on the entity’s state.

✔️ Bug fixes and optimizations

• Global separator line background color variable: You can now globally adjust the separator line background color using the --bubble-line-background-color variable in your theme file.
• Back button issue: The back button issue has been resolved in some cases. #856
• Slider fixes: Sliders that were not working anymore are now fixed. #849 #838
• Fan sliders: Fan sliders are now set to 0 when turned off.
• Climate slider: Climate sliders now support expected float values. #768
• Scroll detection on hold actions: Hold actions will no longer trigger if a scroll action is detected. #843 by @brunosabot
• Minor CSS fixes: Various minor CSS adjustments have been made for improved visual consistency.
• Miscellaneous fixes: Several fixes and optimizations to improve overall performance.

---

I can't wait for your feedback as always!

Oh, and one more thing! 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.

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

🍻

Bubble Card v2.3.0-beta.2

Bubble Card 2

v2.3.0-beta.2

Hi everyone!

Here is a huge beta release with some new features, a lot of bug fixes, and major optimizations! I’ve also worked a lot on the editor, it should not freeze anymore on some setups/browsers 🤞

Here are all the details:

---

💡 New Features

• Slider live update: Added an option in the editor to revert to the slider previous behavior. In YAML you can add slider_live_update: true. #817

  

• Pop-up slide to close distance: You can now change the « Slide to close distance » in the pop-up editor. In YAML you can add slide_to_close_distance: 300, this is the distance that you need to slide (in pixels) to close a pop-up.

  

• Select border variable: You can now change the border CSS of a selected select card with the —bubble-select-border variable. #794

• Separator line color variable: You can now change the separator line background color with —bubble-line-background-color.

• Light color variable: You can now replace the light color variable with --bubble-light-color, for example on a slider button you can change it like this in your custom styles:


  ha-card {
    --bubble-light-color: var(--accent-color);
    --bubble-icon-background-color: var(--ha-card-background);
  }
  .bubble-range-fill {
    opacity: 1 !important;
  }

✔️ Bug Fixes and Optimizations

• Editor freezing issue: The editor is not freezing anymore on some setups/browsers. #799 #698
• Page initialization: Faster page initialization on some setups.
• CPU usage: Significantly lower CPU usage on some setups. #799 and maybe #711
• Pop-up background update: Pop-up background_update feature fixed, try this if you have an issue displaying a specific pop-up.
• Pop-up speed: Pop-ups are now faster (yes again) on some setups.
• Long term memory management: Better long term memory management. #799
• Event listeners for pop-ups: Better and lighter event listeners system for handling the pop-ups.
• Global event listeners for tap actions: Better and lighter global event listeners system for handling the tap actions.
• Select arrow background variable: Replaced the select arrow background variable with --bubble-select-arrow-background-color. #794
• Dropdown menus in pop-ups: Some dropdown menus from some custom cards were not appearing when placed inside of a pop-up, this is now fixed! #469 and #816
• Hold action optimization: The hold action is now automatically triggered after the delay.
• Safari slider button issue: Fixed an issue on Safari where slider buttons were flashing when a pop-up was opened.
• Media player icon issue: Fixed? Issue with Media Player Icon (z-index?) appearing in front of sticky moving card. #823
• Binary sensors icon: Fix: recover icon from binary_sensors. #828 by @brunosabot
• Google Wifi Online value: Fix: support Google Wifi Online value as active. #829 by @brunosabot
• Cover card icon variable: Fix icon variable in cover-card. #776 by @Muenchen-Michi
• Styling fixes: Some various styling fixes.

---

I can't wait for your feedback as always!

Oh, and one more thing! 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.

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

🍻

Bubble Card v2.3.0-beta.1

Bubble Card 2

v2.3.0-beta.1

Hi everyone!

I took a few days off from development, but I'm back! This new beta release brings a highly requested feature, along with a few others.

Here are all the details:

---

Global CSS variables

You can now modify most of the styles directly in your theme file without needing custom styles! For example, here's my dashboard with less rounded borders and new background colors.

This was achievable with just a few lines added to my theme. Don’t forget to reload your theme using the frontend.reload_themes action, such as via Developer Tools.

I’ll be adding the full list to the documentation soon, but just like with custom styles, you can find all of them by checking the src/cards folder in this repository. In each card folder, you'll find a file named styles.ts. These files contain all the applied styles.

---

Sub-buttons support light color

If you have a sub-button with a light entity, it will now change its color based on the light’s color. I noticed many of you were achieving this with custom templates, no need for them anymore!

That "Power" sub-button now changes its color based on the light’s color. This pop-up is also modified by the new global variables, though the color harmony might not be the best…

---

I’ve also worked on improving the button slider, updates are now triggered only on release, making it easier to use!

This is still an early release, and I plan to fix more of the new issues you've all submitted.

Here’s the full changelog:

---

💡 New Features

• Global CSS variables: Added CSS variables for the most important values, allowing simple editing in themes.
• Sub-buttons color: Sub-buttons background color now changes based on light color.
• Select styling: It's now possible to modify the styles of a select card/sub-button with the new variables. #725

✔️ Bug Fixes and Optimizations

• Slider optimization: Button slider updates are now triggered only on release. #686 (Partial optimization for #764)
• Slider haptic feedback: Button slider haptic feedback is now triggered only on release.
• Cover attribute fix: Attributes with a value of "0" were not displayed, this is now fixed! #750
• Show name issue: Disabling the "Text Scrolling Effect" was breaking "Show Name", this is now fixed! #598
• Sub-view back button issue: The back button on sub-views stopped working after the v2.2.4 release, this is now fixed!

---

I can't wait for your feedback as always!

Oh, and one more thing! I have a small surprise for you all! 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.

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

🍻

Bubble Card v2.2.4

Bubble Card 2

v2.2.4

Hi everyone!

This new release fixes some more issues related to the pop-ups (again!), but also some others.

I also want to mention that I have been promising many new features to you all, sometimes saying they would be coming soon. I now realize that I may have overestimated myself but also my time, and my to-do list has become quite extensive 😅

I apologize for this, but I believe it is crucial to focus on stability before moving on to new things. I know you don’t hold it against me, but I wanted to let you know.

Thank you for your understanding and support!

Here is the full changelog:

---

✔️ Bug fixes and optimizations

• Pop-up fixes:
  • Fixed some issues with the pop-ups hash system when called from some cards. Should fix #742.
  • Opening Home Assistant pop-ups (like the more info panel) from a pop-up is not closing this one anymore. #731
  • Some more minor pop-up optimizations.
• Select card large layout: The select card large layout was not correct, this is now fixed. #743
• Horizontal buttons stack navigation: The horizontal buttons stack was not able to navigate to other views anymore after the v2.2.3 release, this is now fixed. #733

---

I can't wait for your feedback as always!

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

🍻

Bubble Card v2.2.3

Bubble Card 2

v2.2.3

Hi everyone!

Here is a new release mainly focused on the pop-ups (again), I've fixed a lot more issues and everything should now be truly stable! 🤞

I'm also glad to say that Bubble Card now supports the Google Cast service. This means that you can finally use it on the Google Nest Hub for example!

I really hope that everything is working now so that I can start working on some new features!

Here is the full changelog:

---

✔️ Bug fixes and optimizations

• Pop-up fixes:
  • Pop-ups are (finally) changing color accordingly when a theme changes (e.g., from dark to light). #627
  • Vertical stack titles are now hidden if set for a pop-up. #647
  • Heavy pop-ups are now closing faster on some setups.
  • Pop-up transitions are now smoother and more reliable on some setups.
  • Pop-up backdrop transitions are now smoother on some setups (if not, disable it, this feature can slow down transitions).
  • Pop-up auto-close timeout is now removing the hash from the URL correctly.
  • Added the missing haptic feedback on the pop-up close button.
  • Refactored the pop-up code even more to ensure stability.
• Haptic feedback issue: Some haptic feedback was fired multiple times, this should now be fixed.
• Google Cast support: Finally fixed the Custom element doesn't exist error on Google Nest Hub! #345 and maybe #257

---

I can't wait for your feedback!

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

🍻

Bubble Card v2.2.2

Bubble Card 2

v2.2.2

Hi everyone!

I’ve worked on the pop-ups again! My goal for this release was to make them fully reliable, and to achieve that, I’ve fixed most of the new and old issues related to them. I’ve also refactored a lot of the code and have intensively tested them to ensure rock-solid stability. This one should be the one! I know, I’ve said that too many times… 🤞

I’ve also worked on some other issues. Here is the full changelog:

---

✔️ Bug fixes and optimizations

• Pop-up stability:
  • The pop-ups and the backdrop should be now fully reliable, and probably even faster too. #703
  • An opened pop-up with a trigger entity now persist after a refresh of the dashboard. #270
  • It was impossible to open a pop-up with a trigger entity by using the notify action, this is now fixed! #270 #422
  • Fixed for good an issue when multiple pop-ups have an auto-close value. #685
• Google Nest Hub support?: New attempt to fix the Custom element doesn't exist error on Google Nest Hub. #345 and maybe #257
• Climate slider fix: The slider button now supports climate entity temperature step. #715

---

I can't wait for your feedback!

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

🍻

Bubble Card v2.2.1

Bubble Card 2

v2.2.1

Hi everyone!

First of all, I’m really happy to see that the pop-ups seem to be much faster for everyone! This really made my day!

This new version fixes an issue I couldn’t miss, as four of you reported it on GitHub 🤓 The bug was related to sub-buttons triggering actions below them and was introduced in v2.2.0.

I also fixed an issue with the backdrop of the pop-ups, which wasn’t always showing/hiding correctly.

And while I was at it, I found another issue in the pop-ups code… and guess what? They’re even faster now… Especially when opening a pop-up for the first time. I tested it on my slowest device (Lenovo ThinkSmart View) and the difference is really noticeable compared to the previous version. I don’t think it can get any better now. And I love it!

Well that's all, see you next time everyone!

---

✔️ Bug fixes and optimizations

• Sub-button actions issue: More info above. And thank you guys. #701 #702 #704 #707
• Pop-up backdrop issue: More info above. #703
• Pop-up optimization (again?!): More info above.

---

I can't wait for your feedback!

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

🍻

Bubble Card v2.2.0

Bubble Card 2

v2.2.0

Hi everyone!

I’m finally able to release this new version that fixes the large layout issue in the section view since the new Home Assistant 2024.8 update. You will notice that the large layout is now shorter to fit the new changes.

But that’s not all!

There are no new features, but I’ve worked a lot on optimizations and fixes! The most noticeable improvement is the pop-ups, they were really slow in some cases and I can say that they are now much smoother magical on all devices and browsers! Opening a pop-up is now 5 to 10 times faster on some setups, and the overall CPU/RAM usage is now significantly lower too!

I really hope you will love this release!

And here is the full changelog:

---

✔️ Bug fixes and optimizations

• HA 2024.8 support: Fixed the large layout issue when used in a section view after the Home Assistant 2024.8 update. #688
• Pop-up optimizations: Pop-ups are now much smoother magical on all devices/browsers! (and even more than in the last beta!) #661
• Displayed states/attributes: Fixed and optimized the displayed states/attributes system, the order is now slightly different too.
• Templates: The entity variable was not defined, this is now fixed! It refers to the card entity.
• Layout issue: It was impossible to hide the name or the icon in a pop-up header, this is now fixed! #638
• Font size adjustments: I've reduced the card name font size by 1 pixel, they were a bit too big on the new layout.
• Pop-up header issue: The pop-up header was overlapping the UI in dashboard edit mode, this is now fixed! #666
• Pop-up timeout issue: Fixed an issue when multiple pop-ups have an auto-close value. #685
• Pop-up backdrop issue: It was impossible to change the backdrop blur in the editor, this is now fixed! Note: Setting it to 0 can improve pop-up performance on some setups.
• Pop-up templates: Templates in pop-up headers are now working correctly. #664
• Pop-up swipe to close issue: Closing a pop-up by swiping in it no longer results in moving the background. #699
• Tap action issue: Sub-buttons now work when all the actions are set to "No action" on the card icon. #691

---

I can't wait for your feedback!

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

🍻