Freeze issue on some browsers + Various fixes

- [x] v3.0.0-beta.5/6 fails to render dashboard on some devices #1461 #1462 #1476
- [x] Light slider with hold to slide (default new behavior) are now limited to min 1%, to turn it off, just tap on the card. You can change that in the editor, or in YAML with `allow_light_slider_to_0: true`. #1295
- [x] Bubble backdrop color no longer works as expected #1294
- [x] Relative time formatting inconsistent with Home Assistant #1228
- [x] [3.0.0-beta.6] Slider doesnt work as expected, when entity step size is not 1 #1478
- [x] Slider does not update for brightness if adjusted outside of the card after being adjusted in the card #1367
- [x] Inconsistent and / or wrong color when using sub buttons on a slider #1448
- [x] All buttons are now hidden when a card’s entity is unavailable (like in a media player or cover card) #1453

Author: Clooos

src/bubble-card.js

@@ -13,11 +13,9 @@ import { handleMediaPlayer } from './cards/media-player/index.js';
 import { handleSelect } from './cards/select/index.js';
 import { handleClimate } from './cards/climate/index.js';
 import { preloadYAMLStyles } from './tools/style-processor.js';
-import { createBubbleDefaultColor, initBubbleColorThemeWatcher } from './tools/style.js';
+import { createBubbleDefaultColor } from './tools/style.js';
 import BubbleCardEditor from './editor/bubble-card-editor.js';
 
-let themeWatcherInitialized = false;
-
 class BubbleCard extends HTMLElement {
     editor = false;
     isConnected = false;
@@ -26,13 +24,7 @@ class BubbleCard extends HTMLElement {
     connectedCallback() {
         this.isConnected = true;
         preloadYAMLStyles(this);
-
-        if (!themeWatcherInitialized) {
-            initBubbleColorThemeWatcher();
-            themeWatcherInitialized = true;
-        } else {
-            createBubbleDefaultColor();
-        }
+        createBubbleDefaultColor();
 
         if (this._hass) {
             this.updateBubbleCard();

src/cards/pop-up/backdrop.css

@@ -1,6 +1,6 @@
 .bubble-backdrop {
   position: fixed;
-  background-color: var(--bubble-backdrop-background-color);
+  background-color: var(--bubble-backdrop-background-color, var(--bubble-default-backdrop-background-color));
   top: 0;
   left: 0;
   width: 100%;

src/cards/pop-up/create.js

@@ -20,7 +20,7 @@ function updateBackdropColor() {
     getComputedStyle(document.body).getPropertyValue('--ha-card-background') ||
     getComputedStyle(document.body).getPropertyValue('--card-background-color');
 
-  document.body.style.setProperty('--bubble-backdrop-background-color', convertToRGBA(themeColorBackground, 0.8, 0.6));
+  document.body.style.setProperty('--bubble-default-backdrop-background-color', convertToRGBA(themeColorBackground, 0.8, 0.6));
 }
 
 colorScheme.addEventListener('change', updateBackdropColor);

src/cards/pop-up/index.js

@@ -1,8 +1,6 @@
-import { changeEditor, changeIcon, changeLight, changeName, changeState, changeStatus, changeStyle, changeTriggered } from './changes.js';
+import { changeEditor, changeStyle, changeTriggered } from './changes.js';
 import { createHeader, createStructure, prepareStructure } from './create.js';
-import { configChanged } from "../../tools/utils.js";
 import { handleButton } from "../../cards/button/index.js";
-import { getButtonType } from "../../cards/button/helpers.js";
 
 export async function handlePopUp(context) {
   if (context.cardType !== "pop-up") {
@@ -15,18 +13,20 @@ export async function handlePopUp(context) {
       createHeader(context);
       createStructure(context);
   } else if (context.popUp && context.elements) {
-      if ((context.config.hash === location.hash || context.editor) || context.config !== context.previousConfig) {
+      if (context.config.hash === location.hash || context.editor) {
           if (context.config.entity || context.config.name) {
               handleButton(context, context.elements.header);
           }
 
-          changeStyle(context);
-
-          context.previousConfig = context.config;
+          requestAnimationFrame(() => {
+              changeStyle(context);
+          });
       }
 
       if (!context.editor) {
-          changeTriggered(context);
+          requestAnimationFrame(() => {
+              changeTriggered(context);
+          });
       }
 
       changeEditor(context);

src/components/base-card/styles.css

@@ -169,6 +169,10 @@ ha-card {
     cursor: not-allowed;
 }
 
+.is-unavailable .bubble-buttons-container {
+    display: none;
+}
+
 .is-unavailable {
     opacity: 0.5;
 }