Remove blank before percent

src/cards/chips-card/chips/weather-chip.ts

@@ -95,7 +95,7 @@ export class WeatherChip extends LitElement implements LovelaceChip {
       >
         ${weatherIcon}
         ${displayLabels.length > 0
-          ? html`<span>${displayLabels.join(" / ")}</span>`
+          ? html`<span>${displayLabels.join(" ⸱ ")}</span>`
           : nothing}
       </mushroom-chip>
     `;

src/cards/climate-card/climate-card.ts

@@ -172,7 +172,7 @@ export class ClimateCard
         stateObj,
         "current_temperature"
       );
-      stateDisplay += ` - ${temperature}`;
+      stateDisplay += ` ⸱ ${temperature}`;
     }
     const rtl = computeRTL(this.hass);
 

src/cards/cover-card/cover-card.ts

@@ -12,7 +12,6 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
   CoverEntity,
   handleAction,
@@ -196,7 +195,12 @@ export class CoverCard
 
     let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.position) {
-      stateDisplay += ` - ${this.position}${blankBeforePercent(this.hass.locale)}%`;
+      const position = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "current_position",
+        this.position
+      );
+      stateDisplay += ` ⸱ ${position}`;
     }
 
     const rtl = computeRTL(this.hass);

src/cards/fan-card/fan-card.ts

@@ -13,7 +13,6 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
   handleAction,
   hasAction,
@@ -138,7 +137,12 @@ export class FanCard
 
     let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.percentage != null && stateObj.state === "on") {
-      stateDisplay = `${this.percentage}${blankBeforePercent(this.hass.locale)}%`;
+      const percentage = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "percentage",
+        this.percentage
+      );
+      stateDisplay = percentage;
     }
 
     const rtl = computeRTL(this.hass);

src/cards/humidifier-card/humidifier-card.ts

@@ -4,7 +4,6 @@ import { classMap } from "lit/directives/class-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
   handleAction,
   hasAction,
@@ -111,7 +110,12 @@ export class HumidifierCard
 
     let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.humidity) {
-      stateDisplay = `${this.humidity}${blankBeforePercent(this.hass.locale)}%`;
+      const humidity = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "current_humidity",
+        this.humidity
+      );
+      stateDisplay = humidity;
     }
 
     const rtl = computeRTL(this.hass);

src/cards/light-card/light-card.ts

@@ -12,7 +12,6 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
   handleAction,
   hasAction,
@@ -45,7 +44,6 @@ import "./controls/light-color-control";
 import "./controls/light-color-temp-control";
 import { LightCardConfig } from "./light-card-config";
 import {
-  getBrightness,
   getRGBColor,
   isColorLight,
   isColorSuperLight,
@@ -157,12 +155,12 @@ export class LightCard
     const stateObj = this._stateObj;
 
     if (!stateObj) return;
-    this.brightness = getBrightness(stateObj);
+    this.brightness = stateObj.attributes.brightness;
   }
 
   private onCurrentBrightnessChange(e: CustomEvent<{ value?: number }>): void {
     if (e.detail.value != null) {
-      this.brightness = e.detail.value;
+      this.brightness = (e.detail.value * 255) / 100;
     }
   }
 
@@ -197,7 +195,12 @@ export class LightCard
 
     let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.brightness != null) {
-      stateDisplay = `${this.brightness}${blankBeforePercent(this.hass.locale)}%`;
+      const brightness = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "brightness",
+        this.brightness
+      );
+      stateDisplay = brightness;
     }
 
     const rtl = computeRTL(this.hass);

src/cards/media-player-card/media-player-card.ts

@@ -11,7 +11,6 @@ import { classMap } from "lit/directives/class-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
   handleAction,
   hasAction,
@@ -45,7 +44,6 @@ import {
   computeMediaIcon,
   computeMediaNameDisplay,
   computeMediaStateDisplay,
-  getVolumeLevel,
 } from "./utils";
 
 type MediaPlayerCardControl = "media_control" | "volume_control";
@@ -137,13 +135,12 @@ export class MediaPlayerCard
     const stateObj = this._stateObj;
 
     if (!stateObj) return;
-    const volume = getVolumeLevel(stateObj);
-    this.volume = volume != null ? Math.round(volume) : volume;
+    this.volume = stateObj.attributes.volume_level;
   }
 
   private onCurrentVolumeChange(e: CustomEvent<{ value?: number }>): void {
     if (e.detail.value != null) {
-      this.volume = e.detail.value;
+      this.volume = e.detail.value / 100;
     }
   }
 
@@ -173,18 +170,22 @@ export class MediaPlayerCard
 
     const icon = computeMediaIcon(this._config, stateObj);
     const nameDisplay = computeMediaNameDisplay(this._config, stateObj);
-    const stateDisplay = computeMediaStateDisplay(
+    const appearance = computeAppearance(this._config);
+    const picture = computeEntityPicture(stateObj, appearance.icon_type);
+    let stateDisplay = computeMediaStateDisplay(
       this._config,
       stateObj,
       this.hass
     );
-    const appearance = computeAppearance(this._config);
-    const picture = computeEntityPicture(stateObj, appearance.icon_type);
 
-    const stateValue =
-      this.volume != null && this._config.show_volume_level
-        ? `${stateDisplay} - ${this.volume}${blankBeforePercent(this.hass.locale)}%`
-        : stateDisplay;
+    if (this.volume != null && this._config.show_volume_level) {
+      const volume = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "volume_level",
+        this.volume
+      );
+      stateDisplay += ` ⸱ ${volume}`;
+    }
 
     const rtl = computeRTL(this.hass);
 
@@ -216,7 +217,7 @@ export class MediaPlayerCard
               stateObj,
               appearance,
               nameDisplay,
-              stateValue
+              stateDisplay
             )};
           </mushroom-state-item>
           ${isControlVisible

src/ha/index.ts

@@ -8,7 +8,6 @@ export * from "./common/number/clamp";
 export * from "./common/number/format_number";
 export * from "./common/number/round";
 export * from "./common/structs/handle-errors";
-export * from "./common/translations/blank_before_percent";
 export * from "./common/translations/localize";
 export * from "./common/util/compute_rtl";
 export * from "./common/util/debounce";

src/ha/types.ts

@@ -224,7 +224,7 @@ export interface HomeAssistant {
   formatEntityAttributeValue(
     stateObj: HassEntity,
     attribute: string,
-    value?: string
+    value?: any
   ): string;
   formatEntityAttributeName(stateObj: HassEntity, attribute: string): string;
 }