Merge branch 'rc'

Adjust media player cover image sizes for smaller screens

.github/workflows/cast_deployment.yaml

@@ -42,7 +42,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=cast/dist --alias dev
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --alias dev
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -77,7 +77,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=cast/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/demo_deployment.yaml

@@ -43,7 +43,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -78,7 +78,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.github/workflows/design_deployment.yaml

@@ -35,7 +35,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.github/workflows/design_preview.yaml

@@ -40,7 +40,7 @@ jobs:
       - name: Deploy preview to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
             --json > deploy_output.json
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

package.json

@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.4.ha.3",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.0",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250925.1"
+version      = "20251001.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/components/ha-slider.ts

@@ -19,7 +19,7 @@ export class HaSlider extends Slider {
       Slider.styles,
       css`
         :host {
-          --wa-form-control-activated-color: var(--primary-color);
+          --wa-form-control-activated-color: var(--ha-control-color);
           --track-size: var(--ha-slider-track-size, 4px);
           --marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
           --marker-width: calc(var(--ha-slider-track-size, 4px) / 2);

src/dialogs/config-flow/step-flow-loading.ts

@@ -26,20 +26,21 @@ class StepFlowLoading extends LitElement {
       this.step
     );
     return html`
-      <div class="init-spinner">
+      <div class="content">
+        <ha-spinner size="large"></ha-spinner>
         ${description ? html`<div>${description}</div>` : ""}
-        <ha-spinner></ha-spinner>
       </div>
     `;
   }
 
   static styles = css`
-    .init-spinner {
+    .content {
+      margin-top: 0;
       padding: 50px 100px;
       text-align: center;
     }
     ha-spinner {
-      margin-top: 16px;
+      margin-bottom: 16px;
     }
   `;
 }

src/dialogs/config-flow/step-flow-progress.ts

@@ -34,7 +34,7 @@ class StepFlowProgress extends LitElement {
                 )}%</ha-progress-ring
               >
             `
-          : html` <ha-spinner size="large"></ha-spinner> `}
+          : html`<ha-spinner size="large"></ha-spinner>`}
         ${this.flowConfig.renderShowFormProgressDescription(
           this.hass,
           this.step
@@ -48,6 +48,7 @@ class StepFlowProgress extends LitElement {
       configFlowContentStyles,
       css`
         .content {
+          margin-top: 0;
           padding: 50px 100px;
           text-align: center;
         }

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,
@@ -258,14 +258,17 @@ class MoreInfoMediaPlayer extends LitElement {
 
     const stateObj = this.stateObj;
     const controls = computeMediaControls(stateObj, true);
-    const coverUrl = stateObj.attributes.entity_picture || "";
+    const coverUrl =
+      stateObj.attributes.entity_picture_local ||
+      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 position = Math.max(Math.floor(playerObj.currentProgress || 0), 0);
-    const remaining = duration - position;
+    const duration = Math.max(stateObj.attributes.media_duration || 0, 0);
-    const durationFormated =
+    const remaining = Math.max(duration - position, 0);
-      remaining > 0 ? this._formateDuration(remaining) : 0;
+    const remainingFormatted = this._formatDuration(remaining);
-    const postionFormated = this._formateDuration(position);
+    const positionFormatted = this._formatDuration(position);
     const primaryTitle = playerObj.primaryTitle;
     const secondaryTitle = playerObj.secondaryTitle;
     const turnOn = controls?.find((c) => c.action === "turn_on");
@@ -323,11 +326,10 @@ class MoreInfoMediaPlayer extends LitElement {
                 @change=${this._handleMediaSeekChanged}
                 ?disabled=${!stateActive(stateObj) ||
                 !supportsFeature(stateObj, MediaPlayerEntityFeature.SEEK)}
-              ></ha-slider>
+              >
-              <div class="position-info-row">
+                <span slot="reference">${positionFormatted}</span>
-                <span class="position-time">${postionFormated}</span>
+                <span slot="reference">${remainingFormatted}</span>
-                <span class="duration-time">${durationFormated}</span>
+              </ha-slider>
-              </div>
             </div>
           `
         : nothing}
@@ -477,6 +479,22 @@ class MoreInfoMediaPlayer extends LitElement {
       height: 320px;
     }
 
+    @media (max-height: 750px) {
+      .cover-container {
+        height: 120px;
+      }
+
+      .cover-image {
+        width: 100px;
+        height: 100px;
+      }
+
+      .cover-image--playing {
+        width: 120px;
+        height: 120px;
+      }
+    }
+
     .empty-cover {
       background-color: var(--secondary-background-color);
       font-size: 1.5em;
@@ -548,13 +566,8 @@ class MoreInfoMediaPlayer extends LitElement {
       flex-direction: column;
     }
 
-    .position-info-row {
+    .position-bar ha-slider::part(references) {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
       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,7 +150,9 @@ export class TTSTryDialog extends LitElement {
     });
   }
 
-  static styles = css`
+  static styles = [
+    haStyleDialog,
+    css`
       ha-dialog {
         --mdc-dialog-max-width: 500px;
       }
@@ -163,7 +166,8 @@ export class TTSTryDialog extends LitElement {
       .loading {
         height: 36px;
       }
-  `;
+    `,
+  ];
 }
 
 declare global {

src/panels/config/automation/ha-automation-editor.ts

@@ -1,5 +1,6 @@
 import { consume } from "@lit/context";
 import {
+  mdiAppleKeyboardCommand,
   mdiCog,
   mdiContentSave,
   mdiDebugStepOver,
@@ -87,6 +88,7 @@ import "./blueprint-automation-editor";
 import "./manual-automation-editor";
 import type { HaManualAutomationEditor } from "./manual-automation-editor";
 import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
+import { isMac } from "../../../util/is_mac";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -215,6 +217,10 @@ export class HaAutomationEditor extends UndoRedoMixin<
       : undefined;
 
     const useBlueprint = "use_blueprint" in this._config;
+    const shortcutIcon = isMac
+      ? html`<ha-svg-icon .path=${mdiAppleKeyboardCommand}></ha-svg-icon>`
+      : this.hass.localize("ui.panel.config.automation.editor.ctrl");
+
     return html`
       <hass-subpage
         .hass=${this.hass}
@@ -231,16 +237,35 @@ export class HaAutomationEditor extends UndoRedoMixin<
                 .path=${mdiUndo}
                 @click=${this.undo}
                 .disabled=${!this.canUndo}
+                id="button-undo"
               >
               </ha-icon-button>
+              <ha-tooltip placement="bottom" for="button-undo">
+                ${this.hass.localize("ui.common.undo")}
+                <span class="shortcut"
+                  >(
+                  <span>${shortcutIcon}</span>
+                  <span>+</span>
+                  <span>Z</span>)
+                </span>
+              </ha-tooltip>
               <ha-icon-button
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.redo")}
                 .path=${mdiRedo}
                 @click=${this.redo}
                 .disabled=${!this.canRedo}
+                id="button-redo"
               >
-              </ha-icon-button>`
+              </ha-icon-button>
+              <ha-tooltip placement="bottom" for="button-redo">
+                ${this.hass.localize("ui.common.redo")}
+                <span class="shortcut">
+                  (<span>${shortcutIcon}</span>
+                  <span>+</span>
+                  <span>Y</span>)
+                </span>
+              </ha-tooltip>`
           : nothing}
         ${this._config?.id && !this.narrow
           ? html`
@@ -1292,6 +1317,15 @@ export class HaAutomationEditor extends UndoRedoMixin<
         ha-fab.dirty {
           bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
         }
+        ha-tooltip ha-svg-icon {
+          width: 12px;
+        }
+        ha-tooltip .shortcut {
+          display: inline-flex;
+          flex-direction: row;
+          align-items: center;
+          gap: 2px;
+        }
       `,
     ];
   }

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/config/script/ha-script-editor.ts

@@ -1,5 +1,6 @@
 import { consume } from "@lit/context";
 import {
+  mdiAppleKeyboardCommand,
   mdiCog,
   mdiContentSave,
   mdiDebugStepOver,
@@ -75,6 +76,7 @@ import "./blueprint-script-editor";
 import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
 import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
+import { isMac } from "../../../util/is_mac";
 
 const baseEditorMixins = SubscribeMixin(
   PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
@@ -168,6 +170,10 @@ export class HaScriptEditor extends UndoRedoMixin<
       : undefined;
 
     const useBlueprint = "use_blueprint" in this._config;
+    const shortcutIcon = isMac
+      ? html`<ha-svg-icon .path=${mdiAppleKeyboardCommand}></ha-svg-icon>`
+      : this.hass.localize("ui.panel.config.automation.editor.ctrl");
+
     return html`
       <hass-subpage
         .hass=${this.hass}
@@ -184,16 +190,34 @@ export class HaScriptEditor extends UndoRedoMixin<
                 .path=${mdiUndo}
                 @click=${this.undo}
                 .disabled=${!this.canUndo}
+                id="button-undo"
               >
               </ha-icon-button>
+              <ha-tooltip placement="bottom" for="button-undo">
+                ${this.hass.localize("ui.common.undo")}
+                <span class="shortcut">
+                  (<span>${shortcutIcon}</span>
+                  <span>+</span>
+                  <span>Z</span>)
+                </span>
+              </ha-tooltip>
               <ha-icon-button
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.redo")}
                 .path=${mdiRedo}
                 @click=${this.redo}
                 .disabled=${!this.canRedo}
+                id="button-redo"
               >
-              </ha-icon-button>`
+              </ha-icon-button>
+              <ha-tooltip placement="bottom" for="button-redo">
+                ${this.hass.localize("ui.common.redo")}
+                <span class="shortcut">
+                  (<span>${shortcutIcon}</span>
+                  <span>+</span>
+                  <span>Y</span>)
+                </span>
+              </ha-tooltip>`
           : nothing}
         ${this.scriptId && !this.narrow
           ? html`
@@ -1233,6 +1257,15 @@ export class HaScriptEditor extends UndoRedoMixin<
           text-decoration: none;
           color: var(--primary-color);
         }
+        ha-tooltip ha-svg-icon {
+          width: 12px;
+        }
+        ha-tooltip .shortcut {
+          display: inline-flex;
+          flex-direction: row;
+          align-items: center;
+          gap: 2px;
+        }
       `,
     ];
   }

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 "../../../components/ha-control-select-menu";
-import { UNAVAILABLE } from "../../../data/entity";
+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/resources/polyfills/intl-polyfill.ts

@@ -14,7 +14,15 @@ import {
   polyfillTimeZoneData,
 } from "./locale-data-polyfill";
 
+let polyfilled = false;
+
+const _polyfillTimeZoneData = polyfillTimeZoneData;
+
 const polyfillIntl = async () => {
+  if (polyfilled) {
+    return;
+  }
+  polyfilled = true;
   const locale = getLocalLanguage();
   const polyfills: Promise<unknown>[] = [];
   if (shouldPolyfillGetCanonicalLocales()) {
@@ -26,7 +34,7 @@ const polyfillIntl = async () => {
   if (shouldPolyfillDateTimeFormat(locale)) {
     polyfills.push(
       import("@formatjs/intl-datetimeformat/polyfill-force").then(() =>
-        polyfillTimeZoneData()
+        _polyfillTimeZoneData()
       )
     );
   }
@@ -58,7 +66,7 @@ const polyfillIntl = async () => {
   if (polyfills.length === 0) {
     return;
   }
-  await Promise.all(polyfills).then(() =>
+  await Promise.allSettled(polyfills).then(() =>
     // Load the default language
     polyfillLocaleData(locale)
   );

src/resources/theme/color/color.globals.ts

@@ -273,6 +273,9 @@ export const colorStyles = css`
     --material-background-color: var(--card-background-color);
     --material-secondary-background-color: var(--secondary-background-color);
     --material-secondary-text-color: var(--secondary-text-color);
+
+    /* Color for Home Assistant input controls e.g. slider, radio buttons */
+    --ha-control-color: var(--primary-color);
   }
 `;
 

src/resources/theme/core.globals.ts

@@ -19,6 +19,32 @@ export const coreStyles = css`
     --ha-border-radius-pill: 9999px;
     --ha-border-radius-circle: 50%;
     --ha-border-radius-square: 0;
+<<<<<<< HEAD
+=======
+
+    /* Spacing */
+    --ha-space-0: 0px;
+    --ha-space-1: 4px;
+    --ha-space-2: 8px;
+    --ha-space-3: 12px;
+    --ha-space-4: 16px;
+    --ha-space-5: 20px;
+    --ha-space-6: 24px;
+    --ha-space-7: 28px;
+    --ha-space-8: 32px;
+    --ha-space-9: 36px;
+    --ha-space-10: 40px;
+    --ha-space-11: 44px;
+    --ha-space-12: 48px;
+    --ha-space-13: 52px;
+    --ha-space-14: 56px;
+    --ha-space-15: 60px;
+    --ha-space-16: 64px;
+    --ha-space-17: 68px;
+    --ha-space-18: 72px;
+    --ha-space-19: 76px;
+    --ha-space-20: 80px;
+>>>>>>> 994c1b575 (Fix intl polyfill loading (#27261))
   }
 `;
 

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",

yarn.lock

@@ -1351,10 +1351,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ctrl/tinycolor@npm:^4.1.0":
+"@ctrl/tinycolor@npm:4.1.0":
-  version: 4.2.0
+  version: 4.1.0
-  resolution: "@ctrl/tinycolor@npm:4.2.0"
+  resolution: "@ctrl/tinycolor@npm:4.1.0"
-  checksum: 10/1be14de7d7e8184c0bc5c8d7e3486cc8186e6702e8ca899c7239f328bb1df9a15d1575e2af7b4c6ba020727fa78f5a9f887555971f30a2890cece9e4253a9d3a
+  checksum: 10/e64569399139ef0abd2eb0ec9fb7267dfd7820f7ad7d4567a63e5fc35e5cfdcb8ecdb3bad65cb9244b47ba6c77bc51085826c00e981acf263a3221dc89343adc
   languageName: node
   linkType: hard
 
@@ -1940,11 +1940,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.3":
+"@home-assistant/webawesome@npm:3.0.0-beta.6.ha.0":
-  version: 3.0.0-beta.4.ha.3
+  version: 3.0.0-beta.6.ha.0
-  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.3"
+  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.6.ha.0"
   dependencies:
-    "@ctrl/tinycolor": "npm:^4.1.0"
+    "@ctrl/tinycolor": "npm:4.1.0"
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/react": "npm:^1.0.8"
     "@shoelace-style/animations": "npm:^1.2.0"
@@ -1953,8 +1953,7 @@ __metadata:
     lit: "npm:^3.2.1"
     nanoid: "npm:^5.1.5"
     qr-creator: "npm:^1.0.0"
-    style-observer: "npm:^0.0.7"
+  checksum: 10/ec9d74585b544e5755f7b2644a0d7f9318b5776bedf51430c8f8729918fddb6e54cce46acace674960383385362846cc4c0f2da5245fa622bce8c54733a31865
-  checksum: 10/b9241821ed471ccbad86b0ea4697a2d41395f05fdc26f46e5edbc7f6b5eeab5d248251ef702326312ded00d5bf850ce0dcdcf7cd5e2e542b9d9cb9a84f3726da
   languageName: node
   linkType: hard
 
@@ -9397,7 +9396,7 @@ __metadata:
     "@fullcalendar/list": "npm:6.1.19"
     "@fullcalendar/luxon3": "npm:6.1.19"
     "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.3"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.6.ha.0"
     "@lezer/highlight": "npm:1.2.1"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"
@@ -14003,13 +14002,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-observer@npm:^0.0.7":
-  version: 0.0.7
-  resolution: "style-observer@npm:0.0.7"
-  checksum: 10/bb57f98bae4463c1e1b57234f8ffe72ec0de27fb08b032c1919910129c210aacd1ddd615432b9453d491e10d3b719cf6c2a68a97165ca55d6fc9b86c0fca37fb
-  languageName: node
-  linkType: hard
-
 "style-observer@npm:^0.0.8":
   version: 0.0.8
   resolution: "style-observer@npm:0.0.8"