Use format entity state helpers everywhere (#17757)

src/components/entity/ha-entity-state-picker.ts

@@ -1,11 +1,9 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, nothing } from "lit";
+import { LitElement, PropertyValues, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import { computeStateDisplay } from "../../common/entity/compute_state_display";
 import { getStates } from "../../common/entity/get_states";
-import { computeAttributeValueDisplay } from "../../common/entity/compute_attribute_display";
+import { HomeAssistant, ValueChangedEvent } from "../../types";
-import { ValueChangedEvent, HomeAssistant } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 
@@ -58,20 +56,9 @@ class HaEntityStatePicker extends LitElement {
           ? getStates(state, this.attribute).map((key) => ({
               value: key,
               label: !this.attribute
-                ? computeStateDisplay(
+                ? this.hass.formatEntityState(state, key)
-                    this.hass.localize,
+                : this.hass.formatEntityAttributeValue(
                     state,
-                    this.hass.locale,
-                    this.hass.config,
-                    this.hass.entities,
-                    key
-                  )
-                : computeAttributeValueDisplay(
-                    this.hass.localize,
-                    state,
-                    this.hass.locale,
-                    this.hass.config,
-                    this.hass.entities,
                     this.attribute,
                     key
                   ),

src/components/entity/ha-state-label-badge.ts

@@ -12,7 +12,6 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { arrayLiteralIncludes } from "../../common/array/literal-includes";
 import secondsToDuration from "../../common/datetime/seconds_to_duration";
-import { computeStateDisplay } from "../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
@@ -192,13 +191,7 @@ export class HaStateLabelBadge extends LitElement {
               this.hass!.locale,
               getNumberFormatOptions(entityState, entry)
             )
-          : computeStateDisplay(
+          : this.hass!.formatEntityState(entityState);
-              this.hass!.localize,
-              entityState,
-              this.hass!.locale,
-              this.hass!.config,
-              this.hass!.entities
-            );
     }
   }
 

src/components/ha-climate-state.ts

@@ -1,9 +1,14 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from "lit";
 import { customElement, property } from "lit/decorators";
-import { computeAttributeValueDisplay } from "../common/entity/compute_attribute_display";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { CLIMATE_PRESET_NONE, ClimateEntity } from "../data/climate";
-import { isUnavailableState } from "../data/entity";
+import { isUnavailableState, OFF } from "../data/entity";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-climate-state")
@@ -22,26 +27,24 @@ class HaClimateState extends LitElement {
                 ${this.stateObj.attributes.preset_mode &&
                 this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
                   ? html`-
-                    ${computeAttributeValueDisplay(
+                    ${this.hass.formatEntityAttributeValue(
-                      this.hass.localize,
                       this.stateObj,
-                      this.hass.locale,
-                      this.hass.config,
-                      this.hass.entities,
                       "preset_mode"
                     )}`
-                  : ""}
+                  : nothing}
               </span>
               <div class="unit">${this._computeTarget()}</div>`
           : this._localizeState()}
       </div>
 
       ${currentStatus && !isUnavailableState(this.stateObj.state)
-        ? html`<div class="current">
+        ? html`
-            ${this.hass.localize("ui.card.climate.currently")}:
+            <div class="current">
-            <div class="unit">${currentStatus}</div>
+              ${this.hass.localize("ui.card.climate.currently")}:
-          </div>`
+              <div class="unit">${currentStatus}</div>
-        : ""}`;
+            </div>
+          `
+        : nothing}`;
   }
 
   private _computeCurrentStatus(): string | undefined {
@@ -125,24 +128,17 @@ class HaClimateState extends LitElement {
       return this.hass.localize(`state.default.${this.stateObj.state}`);
     }
 
-    const stateString = computeStateDisplay(
+    const stateString = this.hass.formatEntityState(this.stateObj);
-      this.hass.localize,
-      this.stateObj,
-      this.hass.locale,
-      this.hass.config,
-      this.hass.entities
-    );
 
-    return this.stateObj.attributes.hvac_action
+    if (this.stateObj.attributes.hvac_action && this.stateObj.state !== OFF) {
-      ? `${computeAttributeValueDisplay(
+      const actionString = this.hass.formatEntityAttributeValue(
-          this.hass.localize,
+        this.stateObj,
-          this.stateObj,
+        "hvac_action"
-          this.hass.locale,
+      );
-          this.hass.config,
+      return `${actionString} (${stateString})`;
-          this.hass.entities,
+    }
-          "hvac_action"
+
-        )} (${stateString})`
+    return stateString;
-      : stateString;
   }
 
   static get styles(): CSSResultGroup {

src/components/ha-humidifier-state.ts

@@ -1,7 +1,5 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import { computeAttributeValueDisplay } from "../common/entity/compute_attribute_display";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { isUnavailableState, OFF } from "../data/entity";
 import { HumidifierEntity } from "../data/humidifier";
 import type { HomeAssistant } from "../types";
@@ -21,12 +19,8 @@ class HaHumidifierState extends LitElement {
                 ${this._localizeState()}
                 ${this.stateObj.attributes.mode
                   ? html`-
-                    ${computeAttributeValueDisplay(
+                    ${this.hass.formatEntityAttributeValue(
-                      this.hass.localize,
                       this.stateObj,
-                      this.hass.locale,
-                      this.hass.config,
-                      this.hass.entities,
                       "mode"
                     )}`
                   : ""}
@@ -78,24 +72,17 @@ class HaHumidifierState extends LitElement {
       return this.hass.localize(`state.default.${this.stateObj.state}`);
     }
 
-    const stateString = computeStateDisplay(
+    const stateString = this.hass.formatEntityState(this.stateObj);
-      this.hass.localize,
-      this.stateObj,
-      this.hass.locale,
-      this.hass.config,
-      this.hass.entities
-    );
 
-    return this.stateObj.attributes.action && this.stateObj.state !== OFF
+    if (this.stateObj.attributes.action && this.stateObj.state !== OFF) {
-      ? `${computeAttributeValueDisplay(
+      const actionString = this.hass.formatEntityAttributeValue(
-          this.hass.localize,
+        this.stateObj,
-          this.stateObj,
+        "action"
-          this.hass.locale,
+      );
-          this.hass.config,
+      return `${actionString} (${stateString})`;
-          this.hass.entities,
+    }
-          "action"
+
-        )} (${stateString})`
+    return stateString;
-      : stateString;
   }
 
   static get styles(): CSSResultGroup {

src/components/ha-water_heater-state.js

@@ -1,7 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { formatNumber } from "../common/number/format_number";
 import LocalizeMixin from "../mixins/localize-mixin";
 
@@ -84,12 +83,7 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
   }
 
   _localizeState(stateObj) {
-    return computeStateDisplay(
+    return this.hass.formatEntityState(stateObj);
-      this.hass.localize,
-      stateObj,
-      this.hass.locale,
-      this.hass.entities
-    );
   }
 }
 customElements.define("ha-water_heater-state", HaWaterHeaterState);

src/data/automation_i18n.ts

@@ -6,11 +6,7 @@ import {
   formatTimeWithSeconds,
 } from "../common/datetime/format_time";
 import secondsToDuration from "../common/datetime/seconds_to_duration";
-import {
+import { computeAttributeNameDisplay } from "../common/entity/compute_attribute_display";
-  computeAttributeNameDisplay,
-  computeAttributeValueDisplay,
-} from "../common/entity/compute_attribute_display";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { computeStateName } from "../common/entity/compute_state_name";
 import "../resources/intl-polyfill";
 import type { HomeAssistant } from "../types";
@@ -235,23 +231,14 @@ const tryDescribeTrigger = (
         for (const state of trigger.from.values()) {
           from.push(
             trigger.attribute
-              ? computeAttributeValueDisplay(
+              ? hass
-                  hass.localize,
+                  .formatEntityAttributeValue(
-                  stateObj,
+                    stateObj,
-                  hass.locale,
+                    trigger.attribute,
-                  hass.config,
+                    state
-                  hass.entities,
+                  )
-                  trigger.attribute,
+                  .toString()
-                  state
+              : hass.formatEntityState(stateObj, state)
-                ).toString()
-              : computeStateDisplay(
-                  hass.localize,
-                  stateObj,
-                  hass.locale,
-                  hass.config,
-                  hass.entities,
-                  state
-                )
           );
         }
         if (from.length !== 0) {
@@ -261,23 +248,16 @@ const tryDescribeTrigger = (
       } else {
         base += ` from ${
           trigger.attribute
-            ? computeAttributeValueDisplay(
+            ? hass
-                hass.localize,
+                .formatEntityAttributeValue(
-                stateObj,
+                  stateObj,
-                hass.locale,
+                  trigger.attribute,
-                hass.config,
+                  trigger.from
-                hass.entities,
+                )
-                trigger.attribute,
+                .toString()
-                trigger.from
+            : hass
-              ).toString()
+                .formatEntityState(stateObj, trigger.from.toString())
-            : computeStateDisplay(
+                .toString()
-                hass.localize,
-                stateObj,
-                hass.locale,
-                hass.config,
-                hass.entities,
-                trigger.from.toString()
-              ).toString()
         }`;
       }
     }
@@ -292,23 +272,14 @@ const tryDescribeTrigger = (
         for (const state of trigger.to.values()) {
           to.push(
             trigger.attribute
-              ? computeAttributeValueDisplay(
+              ? hass
-                  hass.localize,
+                  .formatEntityAttributeValue(
-                  stateObj,
+                    stateObj,
-                  hass.locale,
+                    trigger.attribute,
-                  hass.config,
+                    state
-                  hass.entities,
+                  )
-                  trigger.attribute,
+                  .toString()
-                  state
+              : hass.formatEntityState(stateObj, state).toString()
-                ).toString()
-              : computeStateDisplay(
-                  hass.localize,
-                  stateObj,
-                  hass.locale,
-                  hass.config,
-                  hass.entities,
-                  state
-                ).toString()
           );
         }
         if (to.length !== 0) {
@@ -318,23 +289,14 @@ const tryDescribeTrigger = (
       } else {
         base += ` to ${
           trigger.attribute
-            ? computeAttributeValueDisplay(
+            ? hass
-                hass.localize,
+                .formatEntityAttributeValue(
-                stateObj,
+                  stateObj,
-                hass.locale,
+                  trigger.attribute,
-                hass.config,
+                  trigger.to
-                hass.entities,
+                )
-                trigger.attribute,
+                .toString()
-                trigger.to
+            : hass.formatEntityState(stateObj, trigger.to.toString())
-              ).toString()
-            : computeStateDisplay(
-                hass.localize,
-                stateObj,
-                hass.locale,
-                hass.config,
-                hass.entities,
-                trigger.to.toString()
-              )
         }`;
       }
     }
@@ -822,45 +784,27 @@ const tryDescribeCondition = (
       for (const state of condition.state.values()) {
         states.push(
           condition.attribute
-            ? computeAttributeValueDisplay(
+            ? hass
-                hass.localize,
+                .formatEntityAttributeValue(
-                stateObj,
+                  stateObj,
-                hass.locale,
+                  condition.attribute,
-                hass.config,
+                  state
-                hass.entities,
+                )
-                condition.attribute,
+                .toString()
-                state
+            : hass.formatEntityState(stateObj, state)
-              ).toString()
-            : computeStateDisplay(
-                hass.localize,
-                stateObj,
-                hass.locale,
-                hass.config,
-                hass.entities,
-                state
-              )
         );
       }
     } else if (condition.state !== "") {
       states.push(
         condition.attribute
-          ? computeAttributeValueDisplay(
+          ? hass
-              hass.localize,
+              .formatEntityAttributeValue(
-              stateObj,
+                stateObj,
-              hass.locale,
+                condition.attribute,
-              hass.config,
+                condition.state
-              hass.entities,
+              )
-              condition.attribute,
+              .toString()
-              condition.state
+          : hass.formatEntityState(stateObj, condition.state.toString())
-            ).toString()
-          : computeStateDisplay(
-              hass.localize,
-              stateObj,
-              hass.locale,
-              hass.config,
-              hass.entities,
-              condition.state.toString()
-            )
       );
     }
 

src/data/logbook.ts

@@ -5,14 +5,12 @@ import {
   DOMAINS_WITH_DYNAMIC_PICTURE,
 } from "../common/const";
 import { computeDomain } from "../common/entity/compute_domain";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { autoCaseNoun } from "../common/translations/auto_case_noun";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HaEntityPickerEntityFilterFunc } from "../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../types";
 import { UNAVAILABLE, UNKNOWN } from "./entity";
-import { computeAttributeValueDisplay } from "../common/entity/compute_attribute_display";
 
 const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
 export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor", "zone"];
@@ -339,14 +337,9 @@ export const localizeStateMessage = (
 
       // TODO: This is not working yet, as we don't get historic attribute values
 
-      const event_type = computeAttributeValueDisplay(
+      const event_type = hass
-        hass!.localize,
+        .formatEntityAttributeValue(stateObj, "event_type")
-        stateObj,
+        ?.toString();
-        hass.locale,
-        hass.config,
-        hass.entities,
-        "event_type"
-      )?.toString();
 
       if (!event_type) {
         return localize(`${LOGBOOK_LOCALIZE_PATH}.detected_unknown_event`);
@@ -392,16 +385,7 @@ export const localizeStateMessage = (
   return hass.localize(
     `${LOGBOOK_LOCALIZE_PATH}.changed_to_state`,
     "state",
-    stateObj
+    stateObj ? hass.formatEntityState(stateObj, state) : state
-      ? computeStateDisplay(
-          localize,
-          stateObj,
-          hass.locale,
-          hass.config,
-          hass.entities,
-          state
-        )
-      : state
   );
 };
 

src/data/timer.ts

@@ -5,7 +5,6 @@ import {
 } from "home-assistant-js-websocket";
 import durationToSeconds from "../common/datetime/duration_to_seconds";
 import secondsToDuration from "../common/datetime/seconds_to_duration";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { HomeAssistant } from "../types";
 
 export type TimerEntity = HassEntityBase & {
@@ -90,25 +89,13 @@ export const computeDisplayTimer = (
   }
 
   if (stateObj.state === "idle" || timeRemaining === 0) {
-    return computeStateDisplay(
+    return hass.formatEntityState(stateObj);
-      hass.localize,
-      stateObj,
-      hass.locale,
-      hass.config,
-      hass.entities
-    );
   }
 
   let display = secondsToDuration(timeRemaining || 0);
 
   if (stateObj.state === "paused") {
-    display = `${display} (${computeStateDisplay(
+    display = `${display} (${hass.formatEntityState(stateObj)})`;
-      hass.localize,
-      stateObj,
-      hass.locale,
-      hass.config,
-      hass.entities
-    )})`;
   }
 
   return display;

src/dialogs/config-flow/previews/entity-preview-row.ts

@@ -1,7 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { isUnavailableState } from "../../../data/entity";
 import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../../../data/sensor";
@@ -35,13 +34,7 @@ class EntityPreviewRow extends LitElement {
                 capitalize
               ></hui-timestamp-display>
             `
-          : computeStateDisplay(
+          : this.hass.formatEntityState(stateObj)}
-              this.hass!.localize,
-              stateObj,
-              this.hass.locale,
-              this.hass.config,
-              this.hass.entities
-            )}
       </div>`;
   }
 

src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts

@@ -11,7 +11,6 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { UNIT_F } from "../../../../common/const";
-import { computeAttributeValueDisplay } from "../../../../common/entity/compute_attribute_display";
 import { stateActive } from "../../../../common/entity/state_active";
 import { stateColorCss } from "../../../../common/entity/state_color";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
@@ -162,14 +161,10 @@ export class HaMoreInfoClimateTemperature extends LitElement {
 
     const action = this.stateObj.attributes.hvac_action;
 
-    const actionLabel = computeAttributeValueDisplay(
+    const actionLabel = this.hass.formatEntityAttributeValue(
-      this.hass.localize,
       this.stateObj,
-      this.hass.locale,
-      this.hass.config,
-      this.hass.entities,
       "hvac_action"
-    ) as string;
+    );
 
     return html`
       <p class="label">

src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts

@@ -2,7 +2,6 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
-import { computeStateDisplay } from "../../../../common/entity/compute_state_display";
 import { stateActive } from "../../../../common/entity/state_active";
 import { stateColorCss } from "../../../../common/entity/state_color";
 import "../../../../components/ha-control-select";
@@ -12,12 +11,12 @@ import { UNAVAILABLE } from "../../../../data/entity";
 import {
   computeFanSpeedCount,
   computeFanSpeedIcon,
+  FAN_SPEED_COUNT_MAX_FOR_BUTTONS,
+  FAN_SPEEDS,
   FanEntity,
   fanPercentageToSpeed,
   FanSpeed,
   fanSpeedToPercentage,
-  FAN_SPEEDS,
-  FAN_SPEED_COUNT_MAX_FOR_BUTTONS,
 } from "../../../../data/fan";
 import { HomeAssistant } from "../../../../types";
 
@@ -68,14 +67,7 @@ export class HaMoreInfoFanSpeed extends LitElement {
 
   private _localizeSpeed(speed: FanSpeed) {
     if (speed === "on" || speed === "off") {
-      return computeStateDisplay(
+      return this.hass.formatEntityState(this.stateObj, speed);
-        this.hass.localize,
-        this.stateObj,
-        this.hass.locale,
-        this.hass.config,
-        this.hass.entities,
-        speed
-      );
     }
     return (
       this.hass.localize(`ui.dialogs.more_info_control.fan.speed.${speed}`) ||

src/dialogs/more-info/components/ha-more-info-state-header.ts

@@ -1,7 +1,5 @@
-import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import "../../../components/ha-absolute-time";
 import "../../../components/ha-relative-time";
 import { isUnavailableState } from "../../../data/entity";
@@ -20,30 +18,22 @@ export class HaMoreInfoStateHeader extends LitElement {
 
   @state() private _absoluteTime = false;
 
-  private _computeStateDisplay(stateObj: HassEntity): TemplateResult | string {
+  private _localizeState(): TemplateResult | string {
     if (
-      stateObj.attributes.device_class === SENSOR_DEVICE_CLASS_TIMESTAMP &&
+      this.stateObj.attributes.device_class === SENSOR_DEVICE_CLASS_TIMESTAMP &&
-      !isUnavailableState(stateObj.state)
+      !isUnavailableState(this.stateObj.state)
     ) {
       return html`
         <hui-timestamp-display
           .hass=${this.hass}
-          .ts=${new Date(stateObj.state)}
+          .ts=${new Date(this.stateObj.state)}
           format="relative"
           capitalize
         ></hui-timestamp-display>
       `;
     }
 
-    const stateDisplay = computeStateDisplay(
+    return this.hass.formatEntityState(this.stateObj);
-      this.hass!.localize,
-      stateObj,
-      this.hass!.locale,
-      this.hass!.config,
-      this.hass!.entities
-    );
-
-    return stateDisplay;
   }
 
   private _toggleAbsolute() {
@@ -51,8 +41,7 @@ export class HaMoreInfoStateHeader extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const stateDisplay =
+    const stateDisplay = this.stateOverride ?? this._localizeState();
-      this.stateOverride ?? this._computeStateDisplay(this.stateObj);
 
     return html`
       <p class="state">${stateDisplay}</p>

src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts

@@ -2,7 +2,6 @@ import { mdiMinus, mdiPlus } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import { computeAttributeValueDisplay } from "../../../../common/entity/compute_attribute_display";
 import { stateActive } from "../../../../common/entity/state_active";
 import { stateColorCss } from "../../../../common/entity/state_color";
 import { clamp } from "../../../../common/number/clamp";
@@ -92,14 +91,10 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
 
     const action = this.stateObj.attributes.action;
 
-    const actionLabel = computeAttributeValueDisplay(
+    const actionLabel = this.hass.formatEntityAttributeValue(
-      this.hass.localize,
       this.stateObj,
-      this.hass.locale,
-      this.hass.config,
-      this.hass.entities,
       "action"
-    ) as string;
+    );
 
     return html`
       <p class="label">

src/dialogs/more-info/controls/more-info-cover.ts

@@ -1,22 +1,21 @@
 import { mdiMenu, mdiSwapVertical } from "@mdi/js";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import "../../../components/ha-icon-button-group";
 import "../../../components/ha-icon-button-toggle";
 import {
-  computeCoverPositionStateDisplay,
   CoverEntity,
   CoverEntityFeature,
+  computeCoverPositionStateDisplay,
 } from "../../../data/cover";
 import type { HomeAssistant } from "../../../types";
 import "../components/cover/ha-more-info-cover-buttons";
@@ -83,12 +82,8 @@ class MoreInfoCover extends LitElement {
     const forcedState =
       liveValue != null ? (liveValue ? "open" : "closed") : undefined;
 
-    const stateDisplay = computeStateDisplay(
+    const stateDisplay = this.hass.formatEntityState(
-      this.hass.localize,
       this.stateObj!,
-      this.hass.locale,
-      this.hass.config,
-      this.hass.entities,
       forcedState
     );
 

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -10,11 +10,6 @@ import {
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
-import {
-  computeAttributeNameDisplay,
-  computeAttributeValueDisplay,
-} from "../../../common/entity/compute_attribute_display";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select-menu";
 import "../../../components/ha-list-item";
@@ -58,26 +53,21 @@ class MoreInfoHumidifier extends LitElement {
       HumidifierEntityFeature.MODES
     );
 
-    const currentHumidity = this.stateObj.attributes.current_humidity as number;
-
     return html`
       <div class="current">
-        ${currentHumidity != null
+        ${this.stateObj.attributes.current_humidity != null
           ? html`
               <div>
                 <p class="label">
-                  ${computeAttributeNameDisplay(
+                  ${this.hass.formatEntityAttributeName(
-                    this.hass.localize,
                     this.stateObj,
-                    this.hass.entities,
                     "current_humidity"
                   )}
                 </p>
                 <p class="value">
                   ${this.hass.formatEntityAttributeValue(
                     this.stateObj,
-                    "current_humidity",
+                    "current_humidity"
-                    currentHumidity
                   )}
                 </p>
               </div>
@@ -104,24 +94,10 @@ class MoreInfoHumidifier extends LitElement {
         >
           <ha-svg-icon slot="icon" .path=${mdiPower}></ha-svg-icon>
           <ha-list-item value="off">
-            ${computeStateDisplay(
+            ${this.hass.formatEntityState(this.stateObj, "off")}
-              this.hass.localize,
-              this.stateObj,
-              this.hass.locale,
-              this.hass.config,
-              this.hass.entities,
-              "off"
-            )}
           </ha-list-item>
           <ha-list-item value="on">
-            ${computeStateDisplay(
+            ${this.hass.formatEntityState(this.stateObj, "on")}
-              this.hass.localize,
-              this.stateObj,
-              this.hass.locale,
-              this.hass.config,
-              this.hass.entities,
-              "on"
-            )}
           </ha-list-item>
         </ha-control-select-menu>
 
@@ -144,12 +120,8 @@ class MoreInfoHumidifier extends LitElement {
                         slot="graphic"
                         .path=${computeHumidiferModeIcon(mode)}
                       ></ha-svg-icon>
-                      ${computeAttributeValueDisplay(
+                      ${this.hass.formatEntityAttributeValue(
-                        hass.localize,
                         stateObj!,
-                        hass.locale,
-                        hass.config,
-                        hass.entities,
                         "mode",
                         mode
                       )}

src/dialogs/more-info/controls/more-info-lawn_mower.ts

@@ -2,7 +2,6 @@ import { mdiHomeImportOutline, mdiPause, mdiPlay } from "@mdi/js";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
@@ -74,15 +73,7 @@ class MoreInfoLawnMower extends LitElement {
                 )}:
               </span>
               <span>
-                <strong>
+                <strong>${this.hass.formatEntityState(stateObj)}</strong>
-                  ${computeStateDisplay(
-                    this.hass.localize,
-                    stateObj,
-                    this.hass.locale,
-                    this.hass.config,
-                    this.hass.entities
-                  )}
-                </strong>
               </span>
             </div>
             ${this._renderBattery()}

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -9,24 +9,23 @@ import {
   mdiVolumeOff,
   mdiVolumePlus,
 } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
-import { computeAttributeValueDisplay } from "../../../common/entity/compute_attribute_display";
+import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
-import { stateActive } from "../../../common/entity/state_active";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-select";
 import "../../../components/ha-slider";
 import "../../../components/ha-svg-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
 import {
-  computeMediaControls,
-  handleMediaControlClick,
   MediaPickedEvent,
   MediaPlayerEntity,
   MediaPlayerEntityFeature,
+  computeMediaControls,
+  handleMediaControlClick,
   mediaPlayerPlayMedia,
 } from "../../../data/media-player";
 import { HomeAssistant } from "../../../types";
@@ -157,24 +156,20 @@ class MoreInfoMediaPlayer extends LitElement {
               >
                 ${stateObj.attributes.source_list!.map(
                   (source) => html`
-                    <mwc-list-item .value=${source}
+                    <mwc-list-item .value=${source}>
-                      >${computeAttributeValueDisplay(
+                      ${this.hass.formatEntityAttributeValue(
-                        this.hass.localize,
                         stateObj,
-                        this.hass.locale,
-                        this.hass.config,
-                        this.hass.entities,
                         "source",
                         source
-                      )}</mwc-list-item
+                      )}
-                    >
+                    </mwc-list-item>
                   `
                 )}
                 <ha-svg-icon .path=${mdiLoginVariant} slot="icon"></ha-svg-icon>
               </ha-select>
             </div>
           `
-        : ""}
+        : nothing}
       ${stateActive(stateObj) &&
       supportsFeature(stateObj, MediaPlayerEntityFeature.SELECT_SOUND_MODE) &&
       stateObj.attributes.sound_mode_list?.length
@@ -191,17 +186,13 @@ class MoreInfoMediaPlayer extends LitElement {
               >
                 ${stateObj.attributes.sound_mode_list.map(
                   (mode) => html`
-                    <mwc-list-item .value=${mode}
+                    <mwc-list-item .value=${mode}>
-                      >${computeAttributeValueDisplay(
+                      ${this.hass.formatEntityAttributeValue(
-                        this.hass.localize,
                         stateObj,
-                        this.hass.locale,
-                        this.hass.config,
-                        this.hass.entities,
                         "sound_mode",
                         mode
-                      )}</mwc-list-item
+                      )}
-                    >
+                    </mwc-list-item>
                   `
                 )}
                 <ha-svg-icon .path=${mdiMusicNote} slot="icon"></ha-svg-icon>

src/dialogs/more-info/controls/more-info-remote.ts

@@ -2,11 +2,10 @@ import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { computeAttributeValueDisplay } from "../../../common/entity/compute_attribute_display";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
-import { RemoteEntity, REMOTE_SUPPORT_ACTIVITY } from "../../../data/remote";
+import { REMOTE_SUPPORT_ACTIVITY, RemoteEntity } from "../../../data/remote";
 import { HomeAssistant } from "../../../types";
 
 const filterExtraAttributes = "activity_list,current_activity";
@@ -40,12 +39,8 @@ class MoreInfoRemote extends LitElement {
               ${stateObj.attributes.activity_list!.map(
                 (activity) => html`
                   <mwc-list-item .value=${activity}>
-                    ${computeAttributeValueDisplay(
+                    ${this.hass.formatEntityAttributeValue(
-                      this.hass.localize,
                       stateObj,
-                      this.hass.locale,
-                      this.hass.config,
-                      this.hass.entities,
                       "activity",
                       activity
                     )}
@@ -54,7 +49,7 @@ class MoreInfoRemote extends LitElement {
               )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
 
       <ha-attributes
         .hass=${this.hass}

src/dialogs/more-info/controls/more-info-vacuum.ts

@@ -13,8 +13,6 @@ import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
-import { computeAttributeValueDisplay } from "../../../common/entity/compute_attribute_display";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/entity/ha-battery-icon";
@@ -127,21 +125,8 @@ class MoreInfoVacuum extends LitElement {
                 <strong>
                   ${supportsFeature(stateObj, VacuumEntityFeature.STATUS) &&
                   stateObj.attributes.status
-                    ? computeAttributeValueDisplay(
+                    ? this.hass.formatEntityAttributeValue(stateObj, "status")
-                        this.hass.localize,
+                    : this.hass.formatEntityState(stateObj)}
-                        stateObj,
-                        this.hass.locale,
-                        this.hass.config,
-                        this.hass.entities,
-                        "status"
-                      )
-                    : computeStateDisplay(
-                        this.hass.localize,
-                        stateObj,
-                        this.hass.locale,
-                        this.hass.config,
-                        this.hass.entities
-                      )}
                 </strong>
               </span>
             </div>
@@ -197,12 +182,8 @@ class MoreInfoVacuum extends LitElement {
                   ${stateObj.attributes.fan_speed_list!.map(
                     (mode) => html`
                       <mwc-list-item .value=${mode}>
-                        ${computeAttributeValueDisplay(
+                        ${this.hass.formatEntityAttributeValue(
-                          this.hass.localize,
                           stateObj,
-                          this.hass.locale,
-                          this.hass.config,
-                          this.hass.entities,
                           "fan_speed",
                           mode
                         )}
@@ -215,12 +196,8 @@ class MoreInfoVacuum extends LitElement {
                 >
                   <span>
                     <ha-svg-icon .path=${mdiFan}></ha-svg-icon>
-                    ${computeAttributeValueDisplay(
+                    ${this.hass.formatEntityAttributeValue(
-                      this.hass.localize,
                       stateObj,
-                      this.hass.locale,
-                      this.hass.config,
-                      this.hass.entities,
                       "fan_speed"
                     )}
                   </span>

src/dialogs/notifications/configurator-notification-item.ts

@@ -2,7 +2,6 @@ import "@material/mwc-button";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import { computeStateDisplay } from "../../common/entity/compute_state_display";
 import { domainToName } from "../../data/integration";
 import { PersitentNotificationEntity } from "../../data/persistent_notification";
 import { HomeAssistant } from "../../types";
@@ -33,15 +32,9 @@ export class HuiConfiguratorNotificationItem extends LitElement {
           )}
         </div>
 
-        <mwc-button slot="actions" @click=${this._handleClick}
+        <mwc-button slot="actions" @click=${this._handleClick}>
-          >${computeStateDisplay(
+          ${this.hass.formatEntityState(this.notification)}
-            this.hass.localize,
+        </mwc-button>
-            this.notification,
-            this.hass.locale,
-            this.hass.config,
-            this.hass.entities
-          )}</mwc-button
-        >
       </notification-item-template>
     `;
   }

src/panels/lovelace/cards/hui-entity-card.ts

@@ -12,7 +12,6 @@ import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import {
@@ -176,13 +175,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
                     this.hass.entities[this._config.entity]
                   )
                 )
-              : computeStateDisplay(
+              : this.hass.formatEntityState(stateObj)}</span
-                  this.hass.localize,
-                  stateObj,
-                  this.hass.locale,
-                  this.hass.config,
-                  this.hass.entities
-                )}</span
           >${showUnit
             ? html`
                 <span class="measurement"

src/panels/lovelace/cards/hui-glance-card.ts

@@ -1,10 +1,10 @@
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -12,7 +12,6 @@ import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-card";
@@ -344,13 +343,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
                         capitalize
                       ></ha-relative-time>
                     `
-                  : computeStateDisplay(
+                  : this.hass!.formatEntityState(stateObj)}
-                      this.hass!.localize,
-                      stateObj,
-                      this.hass!.locale,
-                      this.hass!.config,
-                      this.hass!.entities
-                    )}
               </div>
             `
           : ""}

src/panels/lovelace/cards/hui-humidifier-card.ts

@@ -11,12 +11,10 @@ import {
   svg,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { computeAttributeValueDisplay } from "../../../common/entity/compute_attribute_display";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateColorCss } from "../../../common/entity/state_color";
 import { formatNumber } from "../../../common/number/format_number";
@@ -168,34 +166,13 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
           >
             ${
               stateObj.attributes.action
-                ? computeAttributeValueDisplay(
+                ? this.hass.formatEntityAttributeValue(stateObj, "action")
-                    this.hass.localize,
+                : this.hass.formatEntityState(stateObj)
-                    stateObj,
-                    this.hass.locale,
-                    this.hass.config,
-                    this.hass.entities,
-                    "action"
-                  )
-                : computeStateDisplay(
-                    this.hass.localize,
-                    stateObj,
-                    this.hass.locale,
-                    this.hass.config,
-                    this.hass.entities
-                  )
             }
             ${
               stateObj.state !== UNAVAILABLE && stateObj.attributes.mode
                 ? html`
-                    -
+                    - ${this.hass.formatEntityAttributeValue(stateObj, "mode")}
-                    ${computeAttributeValueDisplay(
-                      this.hass.localize,
-                      stateObj,
-                      this.hass.locale,
-                      this.hass.config,
-                      this.hass.entities,
-                      "mode"
-                    )}
                   `
                 : nothing
             }

src/panels/lovelace/cards/hui-light-card.ts

@@ -1,11 +1,11 @@
 import { mdiDotsVertical } from "@mdi/js";
 import "@thomasloven/round-slider";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -13,12 +13,12 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import { stateColorBrightness } from "../../../common/entity/state_color";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-state-icon";
-import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
+import { UNAVAILABLE, isUnavailableState } from "../../../data/entity";
 import { LightEntity, lightSupportsBrightness } from "../../../data/light";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
@@ -30,7 +30,6 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LightCardConfig } from "./types";
-import { stateColorBrightness } from "../../../common/entity/state_color";
 
 @customElement("hui-light-card")
 export class HuiLightCard extends LitElement implements LovelaceCard {
@@ -156,17 +155,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
           <div id="info" .title=${name}>
             ${isUnavailableState(stateObj.state)
-              ? html`
+              ? html` <div>${this.hass.formatEntityState(stateObj)}</div> `
-                  <div>
-                    ${computeStateDisplay(
-                      this.hass.localize,
-                      stateObj,
-                      this.hass.locale,
-                      this.hass.config,
-                      this.hass.entities
-                    )}
-                  </div>
-                `
               : html` <div class="brightness">%</div> `}
             ${name}
           </div>

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -1,20 +1,19 @@
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-card";
-import { computeImageUrl, ImageEntity } from "../../../data/image";
+import { ImageEntity, computeImageUrl } from "../../../data/image";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
@@ -120,13 +119,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     }
 
     const name = this._config.name || computeStateName(stateObj);
-    const entityState = computeStateDisplay(
+    const entityState = this.hass.formatEntityState(stateObj);
-      this.hass!.localize,
-      stateObj,
-      this.hass.locale,
-      this.hass.config,
-      this.hass.entities
-    );
 
     let footer: TemplateResult | string = "";
     if (this._config.show_name && this._config.show_state) {

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -13,7 +13,6 @@ import { ifDefined } from "lit/directives/if-defined";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
@@ -273,13 +272,9 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
           class=${classMap({
             "state-on": !STATES_OFF.has(stateObj.state),
           })}
-          title=${`${computeStateName(stateObj)} : ${computeStateDisplay(
+          title=${`${computeStateName(
-            this.hass!.localize,
+            stateObj
-            stateObj,
+          )} : ${this.hass.formatEntityState(stateObj)}`}
-            this.hass!.locale,
-            this.hass!.config,
-            this.hass!.entities
-          )}`}
         >
           <ha-state-icon
             .icon=${entityConf.icon}
@@ -297,13 +292,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
                         entityConf.attribute
                       ]}${entityConf.suffix}
                     `
-                  : computeStateDisplay(
+                  : this.hass.formatEntityState(stateObj)}
-                      this.hass!.localize,
-                      stateObj,
-                      this.hass!.locale,
-                      this.hass!.config,
-                      this.hass!.entities
-                    )}
               </div>
             `}
       </div>

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -11,12 +11,12 @@ import {
 import "@thomasloven/round-slider";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
+  css,
+  html,
+  nothing,
   svg,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -25,8 +25,6 @@ import { styleMap } from "lit/directives/style-map";
 import { UNIT_F } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { computeAttributeValueDisplay } from "../../../common/entity/compute_attribute_display";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateColorCss } from "../../../common/entity/state_color";
 import { formatNumber } from "../../../common/number/format_number";
@@ -34,10 +32,10 @@ import "../../../components/ha-card";
 import type { HaCard } from "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import {
-  ClimateEntity,
   CLIMATE_PRESET_NONE,
-  compareClimateHvacModes,
+  ClimateEntity,
   HvacMode,
+  compareClimateHvacModes,
 } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
@@ -207,21 +205,8 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           >
             ${
               stateObj.state !== UNAVAILABLE && stateObj.attributes.hvac_action
-                ? computeAttributeValueDisplay(
+                ? this.hass.formatEntityAttributeValue(stateObj, "hvac_action")
-                    this.hass.localize,
+                : this.hass.formatEntityState(stateObj)
-                    stateObj,
-                    this.hass.locale,
-                    this.hass.config,
-                    this.hass.entities,
-                    "hvac_action"
-                  )
-                : computeStateDisplay(
-                    this.hass.localize,
-                    stateObj,
-                    this.hass.locale,
-                    this.hass.config,
-                    this.hass.entities
-                  )
             }
             ${
               stateObj.state !== UNAVAILABLE &&
@@ -229,12 +214,8 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
               stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
                 ? html`
                     -
-                    ${computeAttributeValueDisplay(
+                    ${this.hass.formatEntityAttributeValue(
-                      this.hass.localize,
                       stateObj,
-                      this.hass.locale,
-                      this.hass.config,
-                      this.hass.entities,
                       "preset_mode"
                     )}
                   `

src/panels/lovelace/cards/hui-tile-card.ts

@@ -180,7 +180,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     }
   );
 
-  private _computeStateDisplay(stateObj: HassEntity): TemplateResult | string {
+  private _formatState(stateObj: HassEntity): TemplateResult | string {
     const domain = computeDomain(stateObj.entity_id);
 
     if (
@@ -308,7 +308,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
 
     const name = this._config.name || stateObj.attributes.friendly_name;
 
-    const stateDisplay = this._computeStateDisplay(stateObj);
+    const localizedState = this._formatState(stateObj);
 
     const active = stateActive(stateObj);
     const color = this._computeStateColor(stateObj, this._config.color);
@@ -381,7 +381,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             <ha-tile-info
               class="info"
               .primary=${name}
-              .secondary=${stateDisplay}
+              .secondary=${localizedState}
             ></ha-tile-info>
           </div>
         </div>

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -1,16 +1,16 @@
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { formatNumber } from "../../../common/number/format_number";
@@ -20,28 +20,27 @@ import "../../../components/ha-svg-icon";
 import { UNAVAILABLE } from "../../../data/entity";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import {
+  ForecastEvent,
+  WeatherEntity,
   getForecast,
   getSecondaryWeatherAttribute,
   getWeatherStateIcon,
   getWeatherUnit,
   getWind,
   subscribeForecast,
-  ForecastEvent,
   weatherAttrIcons,
-  WeatherEntity,
   weatherSVGStyles,
 } from "../../../data/weather";
+import { loadPolyfillIfNeeded } from "../../../resources/resize-observer.polyfill";
 import type { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import { loadPolyfillIfNeeded } from "../../../resources/resize-observer.polyfill";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import type { WeatherForecastCardConfig } from "./types";
-import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 
 @customElement("hui-weather-forecast-card")
 class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
@@ -265,13 +264,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                 <div class="info">
                   <div class="name-state">
                     <div class="state">
-                      ${computeStateDisplay(
+                      ${this.hass.formatEntityState(stateObj)}
-                        this.hass.localize,
-                        stateObj,
-                        this.hass.locale,
-                        this.hass.config,
-                        this.hass.entities
-                      )}
                     </div>
                     <div class="name" .title=${name}>${name}</div>
                   </div>

src/panels/lovelace/elements/hui-state-label-element.ts

@@ -1,14 +1,13 @@
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { computeTooltip } from "../common/compute-tooltip";
@@ -83,13 +82,7 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement {
         )}
       >
         ${this._config.prefix}${!this._config.attribute
-          ? computeStateDisplay(
+          ? this.hass.formatEntityState(stateObj)
-              this.hass.localize,
-              stateObj,
-              this.hass.locale,
-              this.hass.config,
-              this.hass.entities
-            )
           : stateObj.attributes[this._config.attribute]}${this._config.suffix}
       </div>
     `;

src/panels/lovelace/entity-rows/hui-event-entity-row.ts

@@ -1,14 +1,12 @@
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
-import { computeAttributeValueDisplay } from "../../../common/entity/compute_attribute_display";
 import { isUnavailableState } from "../../../data/entity";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
@@ -70,13 +68,7 @@ class HuiEventEntityRow extends LitElement implements LovelaceRow {
         >
           <div class="when">
             ${isUnavailableState(stateObj.state)
-              ? computeStateDisplay(
+              ? this.hass.formatEntityState(stateObj)
-                  this.hass!.localize,
-                  stateObj,
-                  this.hass.locale,
-                  this.hass.config,
-                  this.hass.entities
-                )
               : html`<hui-timestamp-display
                   .hass=${this.hass}
                   .ts=${new Date(stateObj.state)}
@@ -86,15 +78,8 @@ class HuiEventEntityRow extends LitElement implements LovelaceRow {
           </div>
           <div class="what">
             ${isUnavailableState(stateObj.state)
-              ? ``
+              ? nothing
-              : computeAttributeValueDisplay(
+              : this.hass.formatEntityAttributeValue(stateObj, "event_type")}
-                  this.hass!.localize,
-                  stateObj,
-                  this.hass.locale,
-                  this.hass.config,
-                  this.hass.entities,
-                  "event_type"
-                )}
           </div>
         </div>
       </hui-generic-entity-row>

src/panels/lovelace/entity-rows/hui-group-entity-row.ts

@@ -1,8 +1,7 @@
-import { html, LitElement, PropertyValues, nothing } from "lit";
+import { LitElement, PropertyValues, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import "../../../components/entity/ha-entity-toggle";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
@@ -66,13 +65,7 @@ class HuiGroupEntityRow extends LitElement implements LovelaceRow {
             `
           : html`
               <div class="text-content">
-                ${computeStateDisplay(
+                ${this.hass.formatEntityState(stateObj)}
-                  this.hass!.localize,
-                  stateObj,
-                  this.hass.locale,
-                  this.hass.config,
-                  this.hass.entities
-                )}
               </div>
             `}
       </hui-generic-entity-row>

src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts

@@ -1,22 +1,21 @@
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-slider";
 import "../../../components/ha-textfield";
 import { isUnavailableState } from "../../../data/entity";
 import { setValue } from "../../../data/input_text";
+import { loadPolyfillIfNeeded } from "../../../resources/resize-observer.polyfill";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import { loadPolyfillIfNeeded } from "../../../resources/resize-observer.polyfill";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { EntityConfig, LovelaceRow } from "./types";
@@ -97,14 +96,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
                   ignore-bar-touch
                 ></ha-slider>
                 <span class="state">
-                  ${computeStateDisplay(
+                  ${this.hass.formatEntityState(stateObj)}
-                    this.hass.localize,
-                    stateObj,
-                    this.hass.locale,
-                    this.hass.config,
-                    this.hass.entities,
-                    stateObj.state
-                  )}
                 </span>
               </div>
             `

src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts

@@ -13,31 +13,30 @@ import {
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
+import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
-import { stateActive } from "../../../common/entity/state_active";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-slider";
 import { isUnavailableState } from "../../../data/entity";
 import {
-  computeMediaDescription,
   ControlButton,
   MediaPlayerEntity,
   MediaPlayerEntityFeature,
+  computeMediaDescription,
 } from "../../../data/media-player";
+import { loadPolyfillIfNeeded } from "../../../resources/resize-observer.polyfill";
 import type { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import { loadPolyfillIfNeeded } from "../../../resources/resize-observer.polyfill";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { EntityConfig, LovelaceRow } from "./types";
@@ -191,13 +190,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
         .hass=${this.hass}
         .config=${this._config}
         .secondaryText=${mediaDescription ||
-        computeStateDisplay(
+        this.hass.formatEntityState(stateObj)}
-          this.hass.localize,
-          stateObj,
-          this.hass.locale,
-          this.hass.config,
-          this.hass.entities
-        )}
       >
         <div class="controls">
           ${supportsFeature(stateObj, MediaPlayerEntityFeature.TURN_ON) &&

src/panels/lovelace/entity-rows/hui-number-entity-row.ts

@@ -1,22 +1,21 @@
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-slider";
 import "../../../components/ha-textfield";
 import { UNAVAILABLE } from "../../../data/entity";
 import { setValue } from "../../../data/input_text";
+import { loadPolyfillIfNeeded } from "../../../resources/resize-observer.polyfill";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import { loadPolyfillIfNeeded } from "../../../resources/resize-observer.polyfill";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { EntityConfig, LovelaceRow } from "./types";
@@ -101,14 +100,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
                   ignore-bar-touch
                 ></ha-slider>
                 <span class="state">
-                  ${computeStateDisplay(
+                  ${this.hass.formatEntityState(stateObj)}
-                    this.hass.localize,
-                    stateObj,
-                    this.hass.locale,
-                    this.hass.config,
-                    this.hass.entities,
-                    stateObj.state
-                  )}
                 </span>
               </div>
             `

src/panels/lovelace/entity-rows/hui-select-entity-row.ts

@@ -1,15 +1,14 @@
 import "@material/mwc-list/mwc-list-item";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-select";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -77,14 +76,7 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
             ? stateObj.attributes.options.map(
                 (option) => html`
                   <mwc-list-item .value=${option}>
-                    ${computeStateDisplay(
+                    ${this.hass!.formatEntityState(stateObj, option)}
-                      this.hass!.localize,
-                      stateObj,
-                      this.hass!.locale,
-                      this.hass!.config,
-                      this.hass!.entities,
-                      option
-                    )}
                   </mwc-list-item>
                 `
               )

src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts

@@ -1,13 +1,12 @@
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { isUnavailableState } from "../../../data/entity";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../../../data/sensor";
@@ -79,13 +78,7 @@ class HuiSensorEntityRow extends LitElement implements LovelaceRow {
                   capitalize
                 ></hui-timestamp-display>
               `
-            : computeStateDisplay(
+            : this.hass.formatEntityState(stateObj)}
-                this.hass!.localize,
-                stateObj,
-                this.hass.locale,
-                this.hass.config,
-                this.hass.entities
-              )}
         </div>
       </hui-generic-entity-row>
     `;

src/panels/lovelace/entity-rows/hui-simple-entity-row.ts

@@ -1,13 +1,12 @@
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { HomeAssistant } from "../../../types";
 import { EntitiesCardEntityConfig } from "../cards/types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
@@ -49,13 +48,7 @@ class HuiSimpleEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        ${computeStateDisplay(
+        ${this.hass.formatEntityState(stateObj)}
-          this.hass!.localize,
-          stateObj,
-          this.hass.locale,
-          this.hass.config,
-          this.hass.entities
-        )}
       </hui-generic-entity-row>
     `;
   }

src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts

@@ -1,6 +1,5 @@
-import { html, LitElement, PropertyValues, nothing } from "lit";
+import { LitElement, PropertyValues, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import "../../../components/entity/ha-entity-toggle";
 import { isUnavailableState } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
@@ -61,13 +60,7 @@ class HuiToggleEntityRow extends LitElement implements LovelaceRow {
             `
           : html`
               <div class="text-content">
-                ${computeStateDisplay(
+                ${this.hass.formatEntityState(stateObj)}
-                  this.hass!.localize,
-                  stateObj,
-                  this.hass!.locale,
-                  this.hass.config,
-                  this.hass!.entities
-                )}
               </div>
             `}
       </hui-generic-entity-row>

src/panels/lovelace/tile-features/hui-fan-speed-tile-feature.ts

@@ -3,7 +3,6 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select";
@@ -13,13 +12,13 @@ import { UNAVAILABLE } from "../../../data/entity";
 import {
   computeFanSpeedCount,
   computeFanSpeedIcon,
+  FAN_SPEED_COUNT_MAX_FOR_BUTTONS,
+  FAN_SPEEDS,
   FanEntity,
   FanEntityFeature,
   fanPercentageToSpeed,
   FanSpeed,
   fanSpeedToPercentage,
-  FAN_SPEEDS,
-  FAN_SPEED_COUNT_MAX_FOR_BUTTONS,
 } from "../../../data/fan";
 import { HomeAssistant } from "../../../types";
 import { LovelaceTileFeature } from "../types";
@@ -55,14 +54,7 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
 
   private _localizeSpeed(speed: FanSpeed) {
     if (speed === "on" || speed === "off") {
-      return computeStateDisplay(
+      return this.hass!.formatEntityState(this.stateObj!, speed);
-        this.hass!.localize,
-        this.stateObj!,
-        this.hass!.locale,
-        this.hass!.config,
-        this.hass!.entities,
-        speed
-      );
     }
     return (
       this.hass!.localize(`ui.dialogs.more_info_control.fan.speed.${speed}`) ||

src/state-summary/state-card-alert.ts

@@ -1,11 +1,10 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
+import { stateActive } from "../common/entity/state_active";
 import { computeRTL } from "../common/util/compute_rtl";
 import "../components/entity/state-info";
 import { haStyle } from "../resources/styles";
-import { stateActive } from "../common/entity/state_active";
 import type { HomeAssistant } from "../types";
 
 @customElement("state-card-alert")
@@ -34,13 +33,7 @@ export class StateCardAlert extends LitElement {
                 .hass=${this.hass}
                 .stateObj=${this.stateObj}
               ></ha-entity-toggle>`
-            : computeStateDisplay(
+            : this.hass.formatEntityState(this.stateObj)}
-                this.hass!.localize,
-                this.stateObj,
-                this.hass.locale,
-                this.hass.config,
-                this.hass.entities
-              )}
         </div>
       </div>
     `;

src/state-summary/state-card-display.ts

@@ -3,7 +3,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { computeDomain } from "../common/entity/compute_domain";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { computeRTL } from "../common/util/compute_rtl";
 import "../components/entity/state-info";
 import { isUnavailableState } from "../data/entity";
@@ -48,13 +47,7 @@ export class StateCardDisplay extends LitElement {
                 format="datetime"
                 capitalize
               ></hui-timestamp-display>`
-            : computeStateDisplay(
+            : this.hass.formatEntityState(this.stateObj)}
-                this.hass!.localize,
-                this.stateObj,
-                this.hass.locale,
-                this.hass.config,
-                this.hass.entities
-              )}
         </div>
       </div>
     `;

src/state-summary/state-card-event.ts

@@ -3,10 +3,8 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../components/entity/ha-entity-toggle";
 import "../components/entity/state-info";
-import { HomeAssistant } from "../types";
-import { computeAttributeValueDisplay } from "../common/entity/compute_attribute_display";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
 
 @customElement("state-card-event")
 export class StateCardEvent extends LitElement {
@@ -26,23 +24,10 @@ export class StateCardEvent extends LitElement {
         ></state-info>
         <div class="container">
           <div class="event_type">
-            ${computeStateDisplay(
+            ${this.hass.formatEntityState(this.stateObj)}
-              this.hass!.localize,
-              this.stateObj,
-              this.hass.locale,
-              this.hass.config,
-              this.hass.entities
-            )}
           </div>
           <div class="event_data">
-            ${computeAttributeValueDisplay(
+            ${this.hass.formatEntityAttributeValue(this.stateObj, "event_type")}
-              this.hass!.localize,
-              this.stateObj,
-              this.hass.locale,
-              this.hass.config,
-              this.hass.entities,
-              "event_type"
-            )}
           </div>
         </div>
       </div>

src/state-summary/state-card-input_number.ts

@@ -1,16 +1,15 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import { debounce } from "../common/util/debounce";
+import "../components/entity/state-info";
 import "../components/ha-slider";
 import "../components/ha-textfield";
-import "../components/entity/state-info";
 import { isUnavailableState } from "../data/entity";
 import { setValue } from "../data/input_text";
-import { HomeAssistant } from "../types";
 import { loadPolyfillIfNeeded } from "../resources/resize-observer.polyfill";
+import { HomeAssistant } from "../types";
 
 @customElement("state-card-input_number")
 class StateCardInputNumber extends LitElement {
@@ -69,14 +68,7 @@ class StateCardInputNumber extends LitElement {
                 ignore-bar-touch
               ></ha-slider>
               <span class="state">
-                ${computeStateDisplay(
+                ${this.hass.formatEntityState(this.stateObj)}
-                  this.hass.localize,
-                  this.stateObj,
-                  this.hass.locale,
-                  this.hass.config,
-                  this.hass.entities,
-                  this.stateObj.state
-                )}
               </span>
             </div>
           `

src/state-summary/state-card-select.ts

@@ -1,14 +1,13 @@
 import "@material/mwc-list/mwc-list-item";
-import "../components/ha-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { computeStateName } from "../common/entity/compute_state_name";
 import "../components/entity/state-badge";
+import "../components/ha-select";
 import { UNAVAILABLE } from "../data/entity";
 import { SelectEntity, setSelectOption } from "../data/select";
 import type { HomeAssistant } from "../types";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
 
 @customElement("state-card-select")
 class StateCardSelect extends LitElement {
@@ -31,14 +30,7 @@ class StateCardSelect extends LitElement {
         ${this.stateObj.attributes.options.map(
           (option) => html`
             <mwc-list-item .value=${option}>
-              ${computeStateDisplay(
+              ${this.hass.formatEntityState(this.stateObj, option)}
-                this.hass.localize,
-                this.stateObj,
-                this.hass.locale,
-                this.hass.config,
-                this.hass.entities,
-                option
-              )}
             </mwc-list-item>
           `
         )}