20250926.0 (#27213)

Author: piitaya

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250925.1"
+version      = "20250926.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/components/ha-selector/ha-selector-number.ts

@@ -82,12 +82,12 @@ export class HaNumberSelector extends LitElement {
                 labeled
                 .min=${this.selector.number!.min}
                 .max=${this.selector.number!.max}
-                .value=${this.value ?? ""}
+                .value=${this.value}
                 .step=${sliderStep}
                 .disabled=${this.disabled}
                 .required=${this.required}
                 @change=${this._handleSliderChange}
-                .ticks=${this.selector.number?.slider_ticks}
+                .withMarkers=${this.selector.number?.slider_ticks || false}
               >
               </ha-slider>
             `

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

@@ -48,10 +48,10 @@ class MoreInfoMediaPlayer extends LitElement {
 
   @property({ attribute: false }) public stateObj?: MediaPlayerEntity;
 
-  private _formateDuration(duration: number) {
+  private _formatDuration(duration: number) {
     const hours = Math.floor(duration / 3600);
     const minutes = Math.floor((duration % 3600) / 60);
-    const seconds = duration % 60;
+    const seconds = Math.floor(duration % 60);
     return formatDurationDigital(this.hass.locale, {
       hours,
       minutes,
@@ -260,12 +260,12 @@ class MoreInfoMediaPlayer extends LitElement {
     const controls = computeMediaControls(stateObj, true);
     const coverUrl = stateObj.attributes.entity_picture || "";
     const playerObj = new HassMediaPlayerEntity(this.hass, this.stateObj);
-    const position = Math.floor(playerObj.currentProgress) || 0;
-    const duration = stateObj.attributes.media_duration || 0;
-    const remaining = duration - position;
-    const durationFormated =
-      remaining > 0 ? this._formateDuration(remaining) : 0;
-    const postionFormated = this._formateDuration(position);
+
+    const position = Math.max(Math.floor(playerObj.currentProgress || 0), 0);
+    const duration = Math.max(stateObj.attributes.media_duration || 0, 0);
+    const remaining = Math.max(duration - position, 0);
+    const remainingFormatted = this._formatDuration(remaining);
+    const positionFormatted = this._formatDuration(position);
     const primaryTitle = playerObj.primaryTitle;
     const secondaryTitle = playerObj.secondaryTitle;
     const turnOn = controls?.find((c) => c.action === "turn_on");
@@ -323,11 +323,10 @@ class MoreInfoMediaPlayer extends LitElement {
                 @change=${this._handleMediaSeekChanged}
                 ?disabled=${!stateActive(stateObj) ||
                 !supportsFeature(stateObj, MediaPlayerEntityFeature.SEEK)}
-              ></ha-slider>
-              <div class="position-info-row">
-                <span class="position-time">${postionFormated}</span>
-                <span class="duration-time">${durationFormated}</span>
-              </div>
+              >
+                <span slot="reference">${positionFormatted}</span>
+                <span slot="reference">${remainingFormatted}</span>
+              </ha-slider>
             </div>
           `
         : nothing}
@@ -548,13 +547,8 @@ class MoreInfoMediaPlayer extends LitElement {
       flex-direction: column;
     }
 
-    .position-info-row {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+    .position-bar ha-slider::part(references) {
       color: var(--secondary-text-color);
-      padding: 0 8px;
-      font-size: var(--ha-font-size-s);
     }
 
     .media-info-row {

src/dialogs/tts-try/dialog-tts-try.ts

@@ -8,6 +8,7 @@ import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-textarea";
 import type { HaTextArea } from "../../components/ha-textarea";
 import { convertTextToSpeech } from "../../data/tts";
+import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import type { TTSTryDialogParams } from "./show-dialog-tts-try";
@@ -149,21 +150,24 @@ export class TTSTryDialog extends LitElement {
     });
   }
 
-  static styles = css`
-    ha-dialog {
-      --mdc-dialog-max-width: 500px;
-    }
-    ha-textarea,
-    ha-select {
-      width: 100%;
-    }
-    ha-select {
-      margin-top: 8px;
-    }
-    .loading {
-      height: 36px;
-    }
-  `;
+  static styles = [
+    haStyleDialog,
+    css`
+      ha-dialog {
+        --mdc-dialog-max-width: 500px;
+      }
+      ha-textarea,
+      ha-select {
+        width: 100%;
+      }
+      ha-select {
+        margin-top: 8px;
+      }
+      .loading {
+        height: 36px;
+      }
+    `,
+  ];
 }
 
 declare global {

src/panels/config/energy/ha-config-energy.ts

@@ -213,6 +213,7 @@ class HaConfigEnergy extends LitElement {
           this.hass.states[key],
         ])
       ),
+      issues: this._validationResult,
     };
     const json = JSON.stringify(data, null, 2);
     const blob = new Blob([json], { type: "application/json" });

src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts

@@ -1,30 +1,32 @@
+import { mdiWaterBoiler } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateColorCss } from "../../../common/entity/state_color";
-import "../../../components/ha-control-button";
-import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
-import "../../../components/ha-control-slider";
-import { UNAVAILABLE } from "../../../data/entity";
+import "../../../components/ha-control-select-menu";
+import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu";
+import "../../../components/ha-list-item";
 import type {
   OperationMode,
   WaterHeaterEntity,
 } from "../../../data/water_heater";
 import {
-  compareWaterHeaterOperationMode,
   computeOperationModeIcon,
+  compareWaterHeaterOperationMode,
 } from "../../../data/water_heater";
+import { UNAVAILABLE } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
 import type {
-  LovelaceCardFeatureContext,
   WaterHeaterOperationModesCardFeatureConfig,
+  LovelaceCardFeatureContext,
 } from "./types";
 
 export const supportsWaterHeaterOperationModesCardFeature = (
@@ -52,6 +54,9 @@ class HuiWaterHeaterOperationModeCardFeature
 
   @state() _currentOperationMode?: OperationMode;
 
+  @query("ha-control-select-menu", true)
+  private _haSelect?: HaControlSelectMenu;
+
   private get _stateObj() {
     if (!this.hass || !this.context || !this.context.entity_id) {
       return undefined;
@@ -97,8 +102,23 @@ class HuiWaterHeaterOperationModeCardFeature
     }
   }
 
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (this._haSelect && changedProps.has("hass")) {
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (
+        this.hass &&
+        this.hass.formatEntityAttributeValue !==
+          oldHass?.formatEntityAttributeValue
+      ) {
+        this._haSelect.layoutOptions();
+      }
+    }
+  }
+
   private async _valueChanged(ev: CustomEvent) {
-    const mode = (ev.detail as any).value as OperationMode;
+    const mode =
+      (ev.detail as any).value ?? ((ev.target as any).value as OperationMode);
 
     if (mode === this._stateObj!.state) return;
 
@@ -143,9 +163,48 @@ class HuiWaterHeaterOperationModeCardFeature
     ).map<ControlSelectOption>((mode) => ({
       value: mode,
       label: this.hass!.formatEntityState(this._stateObj!, mode),
-      path: computeOperationModeIcon(mode as OperationMode),
+      icon: html`
+        <ha-svg-icon
+          slot="graphic"
+          .path=${computeOperationModeIcon(mode as OperationMode)}
+        ></ha-svg-icon>
+      `,
     }));
 
+    if (this._config.style === "dropdown") {
+      return html`
+        <ha-control-select-menu
+          show-arrow
+          hide-label
+          .label=${this.hass.localize("ui.card.water_heater.mode")}
+          .value=${this._currentOperationMode}
+          .disabled=${this._stateObj.state === UNAVAILABLE}
+          fixedMenuPosition
+          naturalMenuWidth
+          @selected=${this._valueChanged}
+          @closed=${stopPropagation}
+        >
+          ${this._currentOperationMode
+            ? html`
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${computeOperationModeIcon(this._currentOperationMode)}
+                ></ha-svg-icon>
+              `
+            : html`
+                <ha-svg-icon slot="icon" .path=${mdiWaterBoiler}></ha-svg-icon>
+              `}
+          ${options.map(
+            (option) => html`
+              <ha-list-item .value=${option.value} graphic="icon">
+                ${option.icon}${option.label}
+              </ha-list-item>
+            `
+          )}
+        </ha-control-select-menu>
+      `;
+    }
+
     return html`
       <ha-control-select
         .options=${options}

src/panels/lovelace/card-features/types.ts

@@ -140,6 +140,7 @@ export interface ToggleCardFeatureConfig {
 
 export interface WaterHeaterOperationModesCardFeatureConfig {
   type: "water-heater-operation-modes";
+  style?: "dropdown" | "icons";
   operation_modes?: OperationMode[];
 }
 

src/panels/lovelace/editor/config-elements/hui-water-heater-operation-modes-card-feature-editor.ts

@@ -16,6 +16,7 @@ import type {
 } from "../../card-features/types";
 import type { LovelaceCardFeatureEditor } from "../../types";
 import { compareWaterHeaterOperationMode } from "../../../../data/water_heater";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 type WaterHeaterOperationModesCardFeatureData =
   WaterHeaterOperationModesCardFeatureConfig & {
@@ -39,11 +40,27 @@ export class HuiWaterHeaterOperationModesCardFeatureEditor
 
   private _schema = memoizeOne(
     (
+      localize: LocalizeFunc,
       formatEntityState: FormatEntityStateFunc,
       stateObj: HassEntity | undefined,
       customizeModes: boolean
     ) =>
       [
+        {
+          name: "style",
+          selector: {
+            select: {
+              multiple: false,
+              mode: "list",
+              options: ["dropdown", "icons"].map((mode) => ({
+                value: mode,
+                label: localize(
+                  `ui.panel.lovelace.editor.features.types.water-heater-operation-modes.style_list.${mode}`
+                ),
+              })),
+            },
+          },
+        },
         {
           name: "customize_modes",
           selector: {
@@ -85,11 +102,13 @@ export class HuiWaterHeaterOperationModesCardFeatureEditor
       : undefined;
 
     const data: WaterHeaterOperationModesCardFeatureData = {
+      style: "icons",
       ...this._config,
       customize_modes: this._config.operation_modes !== undefined,
     };
 
     const schema = this._schema(
+      this.hass.localize,
       this.hass.formatEntityState,
       stateObj,
       data.customize_modes
@@ -131,6 +150,7 @@ export class HuiWaterHeaterOperationModesCardFeatureEditor
   ) => {
     switch (schema.name) {
       case "operation_modes":
+      case "style":
       case "customize_modes":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.features.types.water-heater-operation-modes.${schema.name}`

src/translations/en.json

@@ -8217,7 +8217,12 @@
               "water-heater-operation-modes": {
                 "label": "Water heater operation modes",
                 "operation_modes": "Operation modes",
-                "customize_modes": "Customize operation modes"
+                "customize_modes": "Customize operation modes",
+                "style": "[%key:ui::panel::lovelace::editor::features::types::climate-preset-modes::style%]",
+                "style_list": {
+                  "dropdown": "[%key:ui::panel::lovelace::editor::features::types::climate-preset-modes::style_list::dropdown%]",
+                  "icons": "[%key:ui::panel::lovelace::editor::features::types::climate-preset-modes::style_list::icons%]"
+                }
               },
               "lawn-mower-commands": {
                 "label": "Lawn mower commands",