Fix thermostat and humidifier card rendering when off (#19281)

* Fix thermostat and humidifier card rendering when off

* Fix action color

src/state-control/climate/ha-state-control-climate-temperature.ts

@@ -177,11 +177,20 @@ export class HaStateControlClimateTemperature extends LitElement {
 
     const action = this.stateObj.attributes.hvac_action;
 
+    const isTemperatureDisplayed =
+      (this.stateObj.attributes.current_temperature != null &&
+        this.showCurrentAsPrimary) ||
+      ((this._supportsTargetTemperature ||
+        this._supportsTargetTemperatureRange) &&
+        !this.showCurrentAsPrimary);
+
     return html`
       <p class="label">
-        ${action
+        ${action && action !== "off"
           ? this.hass.formatEntityAttributeValue(this.stateObj, "hvac_action")
-          : this.hass.formatEntityState(this.stateObj)}
+          : isTemperatureDisplayed
+            ? this.hass.formatEntityState(this.stateObj)
+            : nothing}
       </p>
     `;
   }
@@ -315,6 +324,14 @@ export class HaStateControlClimateTemperature extends LitElement {
       `;
     }
 
+    if (this.stateObj.state !== UNAVAILABLE) {
+      return html`
+        <p class="primary-state">
+          ${this.hass.formatEntityState(this.stateObj)}
+        </p>
+      `;
+    }
+
     return nothing;
   }
 
@@ -373,6 +390,14 @@ export class HaStateControlClimateTemperature extends LitElement {
     return html`<p class="label"></p>`;
   }
 
+  private _renderInfo() {
+    return html`
+      <div class="info">
+        ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
+      </div>
+    `;
+  }
+
   get _supportsTargetTemperature() {
     return (
       supportsFeature(this.stateObj, ClimateEntityFeature.TARGET_TEMPERATURE) &&
@@ -447,10 +472,7 @@ export class HaStateControlClimateTemperature extends LitElement {
             @value-changing=${this._valueChanging}
           >
           </ha-control-circular-slider>
-          <div class="info">
+          ${this._renderInfo()} ${this._renderTemperatureButtons("value")}
-            ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
-          </div>
-          ${this._renderTemperatureButtons("value")}
         </div>
       `;
     }
@@ -484,9 +506,7 @@ export class HaStateControlClimateTemperature extends LitElement {
             @high-changing=${this._valueChanging}
           >
           </ha-control-circular-slider>
-          <div class="info">
+          ${this._renderInfo()}
-            ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
-          </div>
           ${this._renderTemperatureButtons(this._selectTargetTemperature, true)}
         </div>
       `;
@@ -497,6 +517,7 @@ export class HaStateControlClimateTemperature extends LitElement {
         class="container${containerSizeClass}"
         style=${styleMap({
           "--state-color": stateColor,
+          "--action-color": actionColor,
         })}
       >
         <ha-control-circular-slider
@@ -510,9 +531,7 @@ export class HaStateControlClimateTemperature extends LitElement {
           .disabled=${!active}
         >
         </ha-control-circular-slider>
-        <div class="info">
+        ${this._renderInfo()}
-          ${this._renderLabel()} ${this._renderSecondary()}
-        </div>
       </div>
     `;
   }

src/state-control/humidifier/ha-state-control-humidifier-humidity.ts

@@ -105,11 +105,18 @@ export class HaStateControlHumidifierHumidity extends LitElement {
 
     const action = this.stateObj.attributes.action;
 
+    const isHumidityDisplayed =
+      (this.stateObj.attributes.current_humidity != null &&
+        this.showCurrentAsPrimary) ||
+      (this._targetHumidity != null && !this.showCurrentAsPrimary);
+
     return html`
       <p class="label">
-        ${action
+        ${action && action !== "off"
           ? this.hass.formatEntityAttributeValue(this.stateObj, "action")
-          : this.hass.formatEntityState(this.stateObj)}
+          : isHumidityDisplayed
+            ? this.hass.formatEntityState(this.stateObj)
+            : nothing}
       </p>
     `;
   }
@@ -144,6 +151,14 @@ export class HaStateControlHumidifierHumidity extends LitElement {
       return this._renderTarget(this._targetHumidity!, "big");
     }
 
+    if (this.stateObj.state !== UNAVAILABLE) {
+      return html`
+        <p class="primary-state">
+          ${this.hass.formatEntityState(this.stateObj)}
+        </p>
+      `;
+    }
+
     return nothing;
   }
 
@@ -225,6 +240,14 @@ export class HaStateControlHumidifierHumidity extends LitElement {
     `;
   }
 
+  private _renderInfo() {
+    return html`
+      <div class="info">
+        ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
+      </div>
+    `;
+  }
+
   protected render() {
     const stateColor = stateColorCss(this.stateObj);
     const active = stateActive(this.stateObj);
@@ -272,10 +295,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
             @value-changing=${this._valueChanging}
           >
           </ha-control-circular-slider>
-          <div class="info">
+          ${this._renderInfo()} ${this._renderButtons()}
-            ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
-          </div>
-          ${this._renderButtons()}
         </div>
       `;
     }
@@ -284,6 +304,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
       <div
         class="container${containerSizeClass}"
         style=${styleMap({
+          "--state-color": stateColor,
           "--action-color": actionColor,
         })}
       >
@@ -296,9 +317,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
           disabled
         >
         </ha-control-circular-slider>
-        <div class="info">
+        ${this._renderInfo()}
-          ${this._renderLabel()} ${this._renderSecondary()}
-        </div>
       </div>
     `;
   }

src/state-control/state-control-circular-slider-style.ts

@@ -54,7 +54,6 @@ export const stateControlCircularSliderStyle = css`
   .label.disabled {
     color: var(--secondary-text-color);
   }
-
   .buttons {
     position: absolute;
     bottom: 10px;
@@ -67,6 +66,9 @@ export const stateControlCircularSliderStyle = css`
     align-items: center;
     justify-content: center;
   }
+  .primary-state {
+    font-size: 36px;
+  }
 
   .buttons ha-outlined-icon-button {
     --md-outlined-icon-button-container-width: 48px;
@@ -77,6 +79,9 @@ export const stateControlCircularSliderStyle = css`
   .container.md ha-big-number {
     font-size: 44px;
   }
+  .container.md .state {
+    font-size: 30px;
+  }
   .container.md .info {
     margin-top: 12px;
     gap: 6px;
@@ -91,6 +96,9 @@ export const stateControlCircularSliderStyle = css`
   .container.sm ha-big-number {
     font-size: 32px;
   }
+  .container.sm .state {
+    font-size: 26px;
+  }
   .container.sm .info {
     margin-top: 12px;
     font-size: 14px;
@@ -107,6 +115,9 @@ export const stateControlCircularSliderStyle = css`
   .container.xs ha-big-number {
     font-size: 32px;
   }
+  .container.xs .state {
+    font-size: 16px;
+  }
   .container.xs .info {
     margin-top: 12px;
   }