20221010.0 (#14059 )

Update pyproject.toml
Fix Google Cloud enable/disable toggle (#14035 )
2025-08-18 05:39:26 +00:00 · 2022-10-10 09:23:02 +02:00 · 2022-10-10 09:22:06 +02:00 · 2022-10-07 14:20:39 +00:00 · 2022-10-06 17:36:53 +02:00 · 2022-10-06 16:51:53 +02:00
326 changed files with 15803 additions and 11982 deletions
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@v5.1.1
+        uses: actions/stale@v6.0.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
--- a/demo/src/ha-demo.ts
+++ b/demo/src/ha-demo.ts
@@ -20,6 +20,7 @@ import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";
 import { mockRecorder } from "./stubs/recorder";
 import { mockShoppingList } from "./stubs/shopping_list";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
@@ -45,6 +46,7 @@ class HaDemo extends HomeAssistantAppEl {
    mockAuth(hass);
    mockTranslations(hass);
    mockHistory(hass);
    mockRecorder(hass);
    mockShoppingList(hass);
    mockSystemLog(hass);
    mockTemplate(hass);
@@ -68,6 +70,7 @@ class HaDemo extends HomeAssistantAppEl {
        hidden_by: null,
        entity_category: null,
        has_entity_name: false,
        unique_id: "co2_intensity",
      },
      {
        config_entry_id: "co2signal",
@@ -82,6 +85,7 @@ class HaDemo extends HomeAssistantAppEl {
        hidden_by: null,
        entity_category: null,
        has_entity_name: false,
        unique_id: "grid_fossil_fuel_percentage",
      },
    ]);
@@ -118,3 +122,9 @@ class HaDemo extends HomeAssistantAppEl {
 }
 customElements.define("ha-demo", HaDemo);
 declare global {
  interface HTMLElementTagNameMap {
    "ha-demo": HaDemo;
  }
 }
--- a/demo/src/stubs/energy.ts
+++ b/demo/src/stubs/energy.ts
@@ -1,90 +1,101 @@
 import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
-import { EnergySolarForecasts } from "../../../src/data/energy";
+import {
  EnergyInfo,
  EnergyPreferences,
  EnergySolarForecasts,
  FossilEnergyConsumption,
 } from "../../../src/data/energy";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockEnergy = (hass: MockHomeAssistant) => {
-  hass.mockWS("energy/get_prefs", () => ({
+  hass.mockWS(
-    energy_sources: [
+    "energy/get_prefs",
-      {
+    (): EnergyPreferences => ({
-        type: "grid",
+      energy_sources: [
-        flow_from: [
+        {
-          {
+          type: "grid",
-            stat_energy_from: "sensor.energy_consumption_tarif_1",
+          flow_from: [
-            stat_cost: "sensor.energy_consumption_tarif_1_cost",
+            {
-            entity_energy_from: "sensor.energy_consumption_tarif_1",
+              stat_energy_from: "sensor.energy_consumption_tarif_1",
-            entity_energy_price: null,
+              stat_cost: "sensor.energy_consumption_tarif_1_cost",
-            number_energy_price: null,
+              entity_energy_price: null,
-          },
+              number_energy_price: null,
-          {
+            },
-            stat_energy_from: "sensor.energy_consumption_tarif_2",
+            {
-            stat_cost: "sensor.energy_consumption_tarif_2_cost",
+              stat_energy_from: "sensor.energy_consumption_tarif_2",
-            entity_energy_from: "sensor.energy_consumption_tarif_2",
+              stat_cost: "sensor.energy_consumption_tarif_2_cost",
-            entity_energy_price: null,
+              entity_energy_price: null,
-            number_energy_price: null,
+              number_energy_price: null,
-          },
+            },
-        ],
+          ],
-        flow_to: [
+          flow_to: [
-          {
+            {
-            stat_energy_to: "sensor.energy_production_tarif_1",
+              stat_energy_to: "sensor.energy_production_tarif_1",
-            stat_compensation: "sensor.energy_production_tarif_1_compensation",
+              stat_compensation:
-            entity_energy_to: "sensor.energy_production_tarif_1",
+                "sensor.energy_production_tarif_1_compensation",
-            entity_energy_price: null,
+              entity_energy_price: null,
-            number_energy_price: null,
+              number_energy_price: null,
-          },
+            },
-          {
+            {
-            stat_energy_to: "sensor.energy_production_tarif_2",
+              stat_energy_to: "sensor.energy_production_tarif_2",
-            stat_compensation: "sensor.energy_production_tarif_2_compensation",
+              stat_compensation:
-            entity_energy_to: "sensor.energy_production_tarif_2",
+                "sensor.energy_production_tarif_2_compensation",
-            entity_energy_price: null,
+              entity_energy_price: null,
-            number_energy_price: null,
+              number_energy_price: null,
-          },
+            },
-        ],
+          ],
-        cost_adjustment_day: 0,
+          cost_adjustment_day: 0,
-      },
+        },
-      {
+        {
-        type: "solar",
+          type: "solar",
-        stat_energy_from: "sensor.solar_production",
+          stat_energy_from: "sensor.solar_production",
-        config_entry_solar_forecast: ["solar_forecast"],
+          config_entry_solar_forecast: ["solar_forecast"],
-      },
+        },
-      /* {
+        /*         {
-        type: "battery",
+          type: "battery",
-        stat_energy_from: "sensor.battery_output",
+          stat_energy_from: "sensor.battery_output",
-        stat_energy_to: "sensor.battery_input",
+          stat_energy_to: "sensor.battery_input",
-      }, */
+        }, */
-      {
+        {
-        type: "gas",
+          type: "gas",
-        stat_energy_from: "sensor.energy_gas",
+          stat_energy_from: "sensor.energy_gas",
-        stat_cost: "sensor.energy_gas_cost",
+          stat_cost: "sensor.energy_gas_cost",
-        entity_energy_from: "sensor.energy_gas",
+          entity_energy_price: null,
-        entity_energy_price: null,
+          number_energy_price: null,
-        number_energy_price: null,
+        },
-      },
+      ],
-    ],
+      device_consumption: [
-    device_consumption: [
+        {
-      {
+          stat_consumption: "sensor.energy_car",
-        stat_consumption: "sensor.energy_car",
+        },
-      },
+        {
-      {
+          stat_consumption: "sensor.energy_ac",
-        stat_consumption: "sensor.energy_ac",
+        },
-      },
+        {
-      {
+          stat_consumption: "sensor.energy_washing_machine",
-        stat_consumption: "sensor.energy_washing_machine",
+        },
-      },
+        {
-      {
+          stat_consumption: "sensor.energy_dryer",
-        stat_consumption: "sensor.energy_dryer",
+        },
-      },
+        {
-      {
+          stat_consumption: "sensor.energy_heat_pump",
-        stat_consumption: "sensor.energy_heat_pump",
+        },
-      },
+        {
-      {
+          stat_consumption: "sensor.energy_boiler",
-        stat_consumption: "sensor.energy_boiler",
+        },
-      },
+      ],
-    ],
+    })
-  }));
+  );
-  hass.mockWS("energy/info", () => ({ cost_sensors: [] }));
+  hass.mockWS(
-  hass.mockWS("energy/fossil_energy_consumption", ({ period }) => ({
+    "energy/info",
-    start: period === "month" ? 250 : period === "day" ? 10 : 2,
+    (): EnergyInfo => ({ cost_sensors: {}, solar_forecast_domains: [] })
-  }));
+  );
  hass.mockWS(
    "energy/fossil_energy_consumption",
    ({ period }): FossilEnergyConsumption => ({
      start: period === "month" ? 250 : period === "day" ? 10 : 2,
    })
  );
  const todayString = format(startOfToday(), "yyyy-MM-dd");
  const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
  hass.mockWS(
--- a/demo/src/stubs/history.ts
+++ b/demo/src/stubs/history.ts
@@ -1,12 +1,4 @@
 import {
  addDays,
  addHours,
  addMonths,
  differenceInHours,
  endOfDay,
 } from "date-fns/esm";
 import { HassEntity } from "home-assistant-js-websocket";
 import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 interface HistoryQueryParams {
@@ -72,331 +64,6 @@ const generateHistory = (state, deltas) => {
 const incrementalUnits = ["clients", "queries", "ads"];
 const generateMeanStatistics = (
  id: string,
  start: Date,
  end: Date,
  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number
 ) => {
  const statistics: StatisticValue[] = [];
  let currentDate = new Date(start);
  currentDate.setMinutes(0, 0, 0);
  let lastVal = initValue;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
    const delta = Math.random() * maxDiff;
    const mean = lastVal + delta;
    statistics.push({
      statistic_id: id,
      start: currentDate.toISOString(),
      end: currentDate.toISOString(),
      mean,
      min: mean - Math.random() * maxDiff,
      max: mean + Math.random() * maxDiff,
      last_reset: "1970-01-01T00:00:00+00:00",
      state: mean,
      sum: null,
    });
    lastVal = mean;
    currentDate =
      period === "day"
        ? addDays(currentDate, 1)
        : period === "month"
        ? addMonths(currentDate, 1)
        : addHours(currentDate, 1);
  }
  return statistics;
 };
 const generateSumStatistics = (
  id: string,
  start: Date,
  end: Date,
  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number
 ) => {
  const statistics: StatisticValue[] = [];
  let currentDate = new Date(start);
  currentDate.setMinutes(0, 0, 0);
  let sum = initValue;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
    const add = Math.random() * maxDiff;
    sum += add;
    statistics.push({
      statistic_id: id,
      start: currentDate.toISOString(),
      end: currentDate.toISOString(),
      mean: null,
      min: null,
      max: null,
      last_reset: "1970-01-01T00:00:00+00:00",
      state: initValue + sum,
      sum,
    });
    currentDate =
      period === "day"
        ? addDays(currentDate, 1)
        : period === "month"
        ? addMonths(currentDate, 1)
        : addHours(currentDate, 1);
  }
  return statistics;
 };
 const generateCurvedStatistics = (
  id: string,
  start: Date,
  end: Date,
  _period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number,
  metered: boolean
 ) => {
  const statistics: StatisticValue[] = [];
  let currentDate = new Date(start);
  currentDate.setMinutes(0, 0, 0);
  let sum = initValue;
  const hours = differenceInHours(end, start) - 1;
  let i = 0;
  let half = false;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
    const add = Math.random() * maxDiff;
    sum += i * add;
    statistics.push({
      statistic_id: id,
      start: currentDate.toISOString(),
      end: currentDate.toISOString(),
      mean: null,
      min: null,
      max: null,
      last_reset: "1970-01-01T00:00:00+00:00",
      state: initValue + sum,
      sum: metered ? sum : null,
    });
    currentDate = addHours(currentDate, 1);
    if (!half && i > hours / 2) {
      half = true;
    }
    i += half ? -1 : 1;
  }
  return statistics;
 };
 const statisticsFunctions: Record<
  string,
  (
    id: string,
    start: Date,
    end: Date,
    period: "5minute" | "hour" | "day" | "month"
  ) => StatisticValue[]
 > = {
  "sensor.energy_consumption_tarif_1": (
    id: string,
    start: Date,
    end: Date,
    period = "hour"
  ) => {
    if (period !== "hour") {
      return generateSumStatistics(
        id,
        start,
        end,
        period,
        0,
        period === "day" ? 17 : 504
      );
    }
    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
    const morningLow = generateSumStatistics(
      id,
      start,
      morningEnd,
      period,
      0,
      0.7
    );
    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
    const morningFinalVal = morningLow.length
      ? morningLow[morningLow.length - 1].sum!
      : 0;
    const empty = generateSumStatistics(
      id,
      morningEnd,
      eveningStart,
      period,
      morningFinalVal,
      0
    );
    const eveningLow = generateSumStatistics(
      id,
      eveningStart,
      end,
      period,
      morningFinalVal,
      0.7
    );
    return [...morningLow, ...empty, ...eveningLow];
  },
  "sensor.energy_consumption_tarif_2": (
    id: string,
    start: Date,
    end: Date,
    period = "hour"
  ) => {
    if (period !== "hour") {
      return generateSumStatistics(
        id,
        start,
        end,
        period,
        0,
        period === "day" ? 17 : 504
      );
    }
    const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
    const highTarif = generateSumStatistics(
      id,
      morningEnd,
      eveningStart,
      period,
      0,
      0.3
    );
    const highTarifFinalVal = highTarif.length
      ? highTarif[highTarif.length - 1].sum!
      : 0;
    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
    const evening = generateSumStatistics(
      id,
      eveningStart,
      end,
      period,
      highTarifFinalVal,
      0
    );
    return [...morning, ...highTarif, ...evening];
  },
  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
    generateSumStatistics(id, start, end, period, 0, 0),
  "sensor.energy_production_tarif_1_compensation": (
    id,
    start,
    end,
    period = "hour"
  ) => generateSumStatistics(id, start, end, period, 0, 0),
  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
    if (period !== "hour") {
      return generateSumStatistics(
        id,
        start,
        end,
        period,
        0,
        period === "day" ? 17 : 504
      );
    }
    const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
    const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
    const dayEnd = new Date(endOfDay(productionEnd));
    const production = generateCurvedStatistics(
      id,
      productionStart,
      productionEnd,
      period,
      0,
      0.15,
      true
    );
    const productionFinalVal = production.length
      ? production[production.length - 1].sum!
      : 0;
    const morning = generateSumStatistics(
      id,
      start,
      productionStart,
      period,
      0,
      0
    );
    const evening = generateSumStatistics(
      id,
      productionEnd,
      dayEnd,
      period,
      productionFinalVal,
      0
    );
    const rest = generateSumStatistics(
      id,
      dayEnd,
      end,
      period,
      productionFinalVal,
      1
    );
    return [...morning, ...production, ...evening, ...rest];
  },
  "sensor.solar_production": (id, start, end, period = "hour") => {
    if (period !== "hour") {
      return generateSumStatistics(
        id,
        start,
        end,
        period,
        0,
        period === "day" ? 17 : 504
      );
    }
    const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
    const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
    const dayEnd = new Date(endOfDay(productionEnd));
    const production = generateCurvedStatistics(
      id,
      productionStart,
      productionEnd,
      period,
      0,
      0.3,
      true
    );
    const productionFinalVal = production.length
      ? production[production.length - 1].sum!
      : 0;
    const morning = generateSumStatistics(
      id,
      start,
      productionStart,
      period,
      0,
      0
    );
    const evening = generateSumStatistics(
      id,
      productionEnd,
      dayEnd,
      period,
      productionFinalVal,
      0
    );
    const rest = generateSumStatistics(
      id,
      dayEnd,
      end,
      period,
      productionFinalVal,
      2
    );
    return [...morning, ...production, ...evening, ...rest];
  },
 };
 export const mockHistory = (mockHass: MockHomeAssistant) => {
  mockHass.mockAPI(
    new RegExp("history/period/.+"),
@@ -466,43 +133,4 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
      return results;
    }
  );
  mockHass.mockWS("recorder/get_statistics_metadata", () => []);
  mockHass.mockWS("history/list_statistic_ids", () => []);
  mockHass.mockWS(
    "history/statistics_during_period",
    ({ statistic_ids, start_time, end_time, period }, hass) => {
      const start = new Date(start_time);
      const end = end_time ? new Date(end_time) : new Date();
      const statistics: Record<string, StatisticValue[]> = {};
      statistic_ids.forEach((id: string) => {
        if (id in statisticsFunctions) {
          statistics[id] = statisticsFunctions[id](id, start, end, period);
        } else {
          const entityState = hass.states[id];
          const state = entityState ? Number(entityState.state) : 1;
          statistics[id] =
            entityState && "last_reset" in entityState.attributes
              ? generateSumStatistics(
                  id,
                  start,
                  end,
                  period,
                  state,
                  state * (state > 80 ? 0.01 : 0.05)
                )
              : generateMeanStatistics(
                  id,
                  start,
                  end,
                  period,
                  state,
                  state * (state > 80 ? 0.05 : 0.1)
                );
        }
      });
      return statistics;
    }
  );
 };
--- a/demo/src/stubs/recorder.ts
+++ b/demo/src/stubs/recorder.ts
@@ -0,0 +1,385 @@
 import {
  addDays,
  addHours,
  addMonths,
  differenceInHours,
  endOfDay,
 } from "date-fns";
 import {
  Statistics,
  StatisticsMetaData,
  StatisticValue,
 } from "../../../src/data/recorder";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 const generateMeanStatistics = (
  id: string,
  start: Date,
  end: Date,
  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number
 ): StatisticValue[] => {
  const statistics: StatisticValue[] = [];
  let currentDate = new Date(start);
  currentDate.setMinutes(0, 0, 0);
  let lastVal = initValue;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
    const delta = Math.random() * maxDiff;
    const mean = lastVal + delta;
    statistics.push({
      statistic_id: id,
      start: currentDate.toISOString(),
      end: currentDate.toISOString(),
      mean,
      min: mean - Math.random() * maxDiff,
      max: mean + Math.random() * maxDiff,
      last_reset: "1970-01-01T00:00:00+00:00",
      state: mean,
      sum: null,
    });
    lastVal = mean;
    currentDate =
      period === "day"
        ? addDays(currentDate, 1)
        : period === "month"
        ? addMonths(currentDate, 1)
        : addHours(currentDate, 1);
  }
  return statistics;
 };
 const generateSumStatistics = (
  id: string,
  start: Date,
  end: Date,
  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number
 ): StatisticValue[] => {
  const statistics: StatisticValue[] = [];
  let currentDate = new Date(start);
  currentDate.setMinutes(0, 0, 0);
  let sum = initValue;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
    const add = Math.random() * maxDiff;
    sum += add;
    statistics.push({
      statistic_id: id,
      start: currentDate.toISOString(),
      end: currentDate.toISOString(),
      mean: null,
      min: null,
      max: null,
      last_reset: "1970-01-01T00:00:00+00:00",
      state: initValue + sum,
      sum,
    });
    currentDate =
      period === "day"
        ? addDays(currentDate, 1)
        : period === "month"
        ? addMonths(currentDate, 1)
        : addHours(currentDate, 1);
  }
  return statistics;
 };
 const generateCurvedStatistics = (
  id: string,
  start: Date,
  end: Date,
  _period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number,
  metered: boolean
 ): StatisticValue[] => {
  const statistics: StatisticValue[] = [];
  let currentDate = new Date(start);
  currentDate.setMinutes(0, 0, 0);
  let sum = initValue;
  const hours = differenceInHours(end, start) - 1;
  let i = 0;
  let half = false;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
    const add = Math.random() * maxDiff;
    sum += i * add;
    statistics.push({
      statistic_id: id,
      start: currentDate.toISOString(),
      end: currentDate.toISOString(),
      mean: null,
      min: null,
      max: null,
      last_reset: "1970-01-01T00:00:00+00:00",
      state: initValue + sum,
      sum: metered ? sum : null,
    });
    currentDate = addHours(currentDate, 1);
    if (!half && i > hours / 2) {
      half = true;
    }
    i += half ? -1 : 1;
  }
  return statistics;
 };
 const statisticsFunctions: Record<
  string,
  (
    id: string,
    start: Date,
    end: Date,
    period: "5minute" | "hour" | "day" | "month"
  ) => StatisticValue[]
 > = {
  "sensor.energy_consumption_tarif_1": (
    id: string,
    start: Date,
    end: Date,
    period = "hour"
  ) => {
    if (period !== "hour") {
      return generateSumStatistics(
        id,
        start,
        end,
        period,
        0,
        period === "day" ? 17 : 504
      );
    }
    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
    const morningLow = generateSumStatistics(
      id,
      start,
      morningEnd,
      period,
      0,
      0.7
    );
    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
    const morningFinalVal = morningLow.length
      ? morningLow[morningLow.length - 1].sum!
      : 0;
    const empty = generateSumStatistics(
      id,
      morningEnd,
      eveningStart,
      period,
      morningFinalVal,
      0
    );
    const eveningLow = generateSumStatistics(
      id,
      eveningStart,
      end,
      period,
      morningFinalVal,
      0.7
    );
    return [...morningLow, ...empty, ...eveningLow];
  },
  "sensor.energy_consumption_tarif_2": (
    id: string,
    start: Date,
    end: Date,
    period = "hour"
  ) => {
    if (period !== "hour") {
      return generateSumStatistics(
        id,
        start,
        end,
        period,
        0,
        period === "day" ? 17 : 504
      );
    }
    const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
    const highTarif = generateSumStatistics(
      id,
      morningEnd,
      eveningStart,
      period,
      0,
      0.3
    );
    const highTarifFinalVal = highTarif.length
      ? highTarif[highTarif.length - 1].sum!
      : 0;
    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
    const evening = generateSumStatistics(
      id,
      eveningStart,
      end,
      period,
      highTarifFinalVal,
      0
    );
    return [...morning, ...highTarif, ...evening];
  },
  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
    generateSumStatistics(id, start, end, period, 0, 0),
  "sensor.energy_production_tarif_1_compensation": (
    id,
    start,
    end,
    period = "hour"
  ) => generateSumStatistics(id, start, end, period, 0, 0),
  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
    if (period !== "hour") {
      return generateSumStatistics(
        id,
        start,
        end,
        period,
        0,
        period === "day" ? 17 : 504
      );
    }
    const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
    const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
    const dayEnd = new Date(endOfDay(productionEnd));
    const production = generateCurvedStatistics(
      id,
      productionStart,
      productionEnd,
      period,
      0,
      0.15,
      true
    );
    const productionFinalVal = production.length
      ? production[production.length - 1].sum!
      : 0;
    const morning = generateSumStatistics(
      id,
      start,
      productionStart,
      period,
      0,
      0
    );
    const evening = generateSumStatistics(
      id,
      productionEnd,
      dayEnd,
      period,
      productionFinalVal,
      0
    );
    const rest = generateSumStatistics(
      id,
      dayEnd,
      end,
      period,
      productionFinalVal,
      1
    );
    return [...morning, ...production, ...evening, ...rest];
  },
  "sensor.solar_production": (id, start, end, period = "hour") => {
    if (period !== "hour") {
      return generateSumStatistics(
        id,
        start,
        end,
        period,
        0,
        period === "day" ? 17 : 504
      );
    }
    const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
    const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
    const dayEnd = new Date(endOfDay(productionEnd));
    const production = generateCurvedStatistics(
      id,
      productionStart,
      productionEnd,
      period,
      0,
      0.3,
      true
    );
    const productionFinalVal = production.length
      ? production[production.length - 1].sum!
      : 0;
    const morning = generateSumStatistics(
      id,
      start,
      productionStart,
      period,
      0,
      0
    );
    const evening = generateSumStatistics(
      id,
      productionEnd,
      dayEnd,
      period,
      productionFinalVal,
      0
    );
    const rest = generateSumStatistics(
      id,
      dayEnd,
      end,
      period,
      productionFinalVal,
      2
    );
    return [...morning, ...production, ...evening, ...rest];
  },
 };
 export const mockRecorder = (mockHass: MockHomeAssistant) => {
  mockHass.mockWS(
    "recorder/get_statistics_metadata",
    (): StatisticsMetaData[] => []
  );
  mockHass.mockWS(
    "recorder/list_statistic_ids",
    (): StatisticsMetaData[] => []
  );
  mockHass.mockWS(
    "recorder/statistics_during_period",
    ({ statistic_ids, start_time, end_time, period }, hass): Statistics => {
      const start = new Date(start_time);
      const end = end_time ? new Date(end_time) : new Date();
      const statistics: Record<string, StatisticValue[]> = {};
      statistic_ids.forEach((id: string) => {
        if (id in statisticsFunctions) {
          statistics[id] = statisticsFunctions[id](id, start, end, period);
        } else {
          const entityState = hass.states[id];
          const state = entityState ? Number(entityState.state) : 1;
          statistics[id] =
            entityState && "last_reset" in entityState.attributes
              ? generateSumStatistics(
                  id,
                  start,
                  end,
                  period,
                  state,
                  state * (state > 80 ? 0.01 : 0.05)
                )
              : generateMeanStatistics(
                  id,
                  start,
                  end,
                  period,
                  state,
                  state * (state > 80 ? 0.05 : 0.1)
                );
        }
      });
      return statistics;
    }
  );
 };
--- a/gallery/src/pages/automation/describe-condition.ts
+++ b/gallery/src/pages/automation/describe-condition.ts
@@ -36,6 +36,7 @@ const conditions = [
  { condition: "sun", after: "sunset" },
  { condition: "sun", after: "sunrise", offset: "-01:00" },
  { condition: "zone", entity_id: "device_tracker.person", zone: "zone.home" },
  { condition: "trigger", id: "motion" },
  { condition: "time" },
  { condition: "template" },
 ];
--- a/gallery/src/pages/automation/editor-action.ts
+++ b/gallery/src/pages/automation/editor-action.ts
@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -47,6 +47,8 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
 class DemoHaAutomationEditorAction extends LitElement {
  @state() private hass!: HomeAssistant;
  @state() private _disabled = false;
  private data: any = SCHEMAS.map((info) => info.actions);
  constructor() {
@@ -67,6 +69,15 @@ class DemoHaAutomationEditorAction extends LitElement {
      this.requestUpdate();
    };
    return html`
      <div class="options">
        <ha-formfield label="Disabled">
          <ha-switch
            .name=${"disabled"}
            .checked=${this._disabled}
            @change=${this._handleOptionChange}
          ></ha-switch>
        </ha-formfield>
      </div>
      ${SCHEMAS.map(
        (info, sampleIdx) => html`
          <demo-black-white-row
@@ -81,6 +92,7 @@ class DemoHaAutomationEditorAction extends LitElement {
                    .hass=${this.hass}
                    .actions=${this.data[sampleIdx]}
                    .sampleIdx=${sampleIdx}
                    .disabled=${this._disabled}
                    @value-changed=${valueChanged}
                  ></ha-automation-action>
                `
@@ -90,6 +102,20 @@ class DemoHaAutomationEditorAction extends LitElement {
      )}
    `;
  }
  private _handleOptionChange(ev) {
    this[`_${ev.target.name}`] = ev.target.checked;
  }
  static styles = css`
    .options {
      max-width: 800px;
      margin: 16px auto;
    }
    .options ha-formfield {
      margin-right: 16px;
    }
  `;
 }
 declare global {
--- a/gallery/src/pages/automation/editor-condition.ts
+++ b/gallery/src/pages/automation/editor-condition.ts
@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -83,6 +83,8 @@ const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
 class DemoHaAutomationEditorCondition extends LitElement {
  @state() private hass!: HomeAssistant;
  @state() private _disabled = false;
  private data: any = SCHEMAS.map((info) => info.conditions);
  constructor() {
@@ -103,6 +105,15 @@ class DemoHaAutomationEditorCondition extends LitElement {
      this.requestUpdate();
    };
    return html`
      <div class="options">
        <ha-formfield label="Disabled">
          <ha-switch
            .name=${"disabled"}
            .checked=${this._disabled}
            @change=${this._handleOptionChange}
          ></ha-switch>
        </ha-formfield>
      </div>
      ${SCHEMAS.map(
        (info, sampleIdx) => html`
          <demo-black-white-row
@@ -117,6 +128,7 @@ class DemoHaAutomationEditorCondition extends LitElement {
                    .hass=${this.hass}
                    .conditions=${this.data[sampleIdx]}
                    .sampleIdx=${sampleIdx}
                    .disabled=${this._disabled}
                    @value-changed=${valueChanged}
                  ></ha-automation-condition>
                `
@@ -126,6 +138,20 @@ class DemoHaAutomationEditorCondition extends LitElement {
      )}
    `;
  }
  private _handleOptionChange(ev) {
    this[`_${ev.target.name}`] = ev.target.checked;
  }
  static styles = css`
    .options {
      max-width: 800px;
      margin: 16px auto;
    }
    .options ha-formfield {
      margin-right: 16px;
    }
  `;
 }
 declare global {
--- a/gallery/src/pages/automation/editor-trigger.ts
+++ b/gallery/src/pages/automation/editor-trigger.ts
@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -107,6 +107,8 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
 class DemoHaAutomationEditorTrigger extends LitElement {
  @state() private hass!: HomeAssistant;
  @state() private _disabled = false;
  private data: any = SCHEMAS.map((info) => info.triggers);
  constructor() {
@@ -127,6 +129,15 @@ class DemoHaAutomationEditorTrigger extends LitElement {
      this.requestUpdate();
    };
    return html`
      <div class="options">
        <ha-formfield label="Disabled">
          <ha-switch
            .name=${"disabled"}
            .checked=${this._disabled}
            @change=${this._handleOptionChange}
          ></ha-switch>
        </ha-formfield>
      </div>
      ${SCHEMAS.map(
        (info, sampleIdx) => html`
          <demo-black-white-row
@@ -141,6 +152,7 @@ class DemoHaAutomationEditorTrigger extends LitElement {
                    .hass=${this.hass}
                    .triggers=${this.data[sampleIdx]}
                    .sampleIdx=${sampleIdx}
                    .disabled=${this._disabled}
                    @value-changed=${valueChanged}
                  ></ha-automation-trigger>
                `
@@ -150,6 +162,20 @@ class DemoHaAutomationEditorTrigger extends LitElement {
      )}
    `;
  }
  private _handleOptionChange(ev) {
    this[`_${ev.target.name}`] = ev.target.checked;
  }
  static styles = css`
    .options {
      max-width: 800px;
      margin: 16px auto;
    }
    .options ha-formfield {
      margin-right: 16px;
    }
  `;
 }
 declare global {
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -195,6 +195,48 @@ const SCHEMAS: {
          },
        },
      },
      select_disabled_list: {
        name: "Select disabled option",
        selector: {
          select: {
            options: [
              { label: "Option 1", value: "Option 1" },
              { label: "Option 2", value: "Option 2" },
              { label: "Option 3", value: "Option 3", disabled: true },
            ],
            mode: "list",
          },
        },
      },
      select_disabled_multiple: {
        name: "Select disabled option",
        selector: {
          select: {
            multiple: true,
            options: [
              { label: "Option 1", value: "Option 1" },
              { label: "Option 2", value: "Option 2" },
              { label: "Option 3", value: "Option 3", disabled: true },
            ],
            mode: "list",
          },
        },
      },
      select_disabled: {
        name: "Select disabled option",
        selector: {
          select: {
            options: [
              { label: "Option 1", value: "Option 1" },
              { label: "Option 2", value: "Option 2" },
              { label: "Option 3", value: "Option 3", disabled: true },
              { label: "Option 4", value: "Option 4", disabled: true },
              { label: "Option 5", value: "Option 5", disabled: true },
              { label: "Option 6", value: "Option 6" },
            ],
          },
        },
      },
      select_custom: {
        name: "Select (Custom)",
        selector: {
--- a/gallery/src/pages/misc/integration-card.ts
+++ b/gallery/src/pages/misc/integration-card.ts
@@ -196,6 +196,7 @@ const createEntityRegistryEntries = (
    icon: null,
    platform: "updater",
    has_entity_name: false,
    unique_id: "updater",
  },
 ];
--- a/gallery/src/pages/more-info/cover.ts
+++ b/gallery/src/pages/more-info/cover.ts
@@ -1,16 +1,7 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import {
+import { CoverEntityFeature } from "../../../../src/data/cover";
  SUPPORT_OPEN,
  SUPPORT_STOP,
  SUPPORT_CLOSE,
  SUPPORT_SET_POSITION,
  SUPPORT_OPEN_TILT,
  SUPPORT_STOP_TILT,
  SUPPORT_CLOSE_TILT,
  SUPPORT_SET_TILT_POSITION,
 } from "../../../../src/data/cover";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -22,113 +13,127 @@ import "../../components/demo-more-infos";
 const ENTITIES = [
  getEntity("cover", "position_buttons", "on", {
    friendly_name: "Position Buttons",
-    supported_features: SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE,
+    supported_features:
      CoverEntityFeature.OPEN +
      CoverEntityFeature.STOP +
      CoverEntityFeature.CLOSE,
  }),
  getEntity("cover", "position_slider_half", "on", {
    friendly_name: "Position Half-Open",
    supported_features:
-      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+      CoverEntityFeature.OPEN +
      CoverEntityFeature.STOP +
      CoverEntityFeature.CLOSE +
      CoverEntityFeature.SET_POSITION,
    current_position: 50,
  }),
  getEntity("cover", "position_slider_open", "on", {
    friendly_name: "Position Open",
    supported_features:
-      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+      CoverEntityFeature.OPEN +
      CoverEntityFeature.STOP +
      CoverEntityFeature.CLOSE +
      CoverEntityFeature.SET_POSITION,
    current_position: 100,
  }),
  getEntity("cover", "position_slider_closed", "on", {
    friendly_name: "Position Closed",
    supported_features:
-      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+      CoverEntityFeature.OPEN +
      CoverEntityFeature.STOP +
      CoverEntityFeature.CLOSE +
      CoverEntityFeature.SET_POSITION,
    current_position: 0,
  }),
  getEntity("cover", "tilt_buttons", "on", {
    friendly_name: "Tilt Buttons",
    supported_features:
-      SUPPORT_OPEN_TILT + SUPPORT_STOP_TILT + SUPPORT_CLOSE_TILT,
+      CoverEntityFeature.OPEN_TILT +
      CoverEntityFeature.STOP_TILT +
      CoverEntityFeature.CLOSE_TILT,
  }),
  getEntity("cover", "tilt_slider_half", "on", {
    friendly_name: "Tilt Half-Open",
    supported_features:
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
    current_tilt_position: 50,
  }),
  getEntity("cover", "tilt_slider_open", "on", {
    friendly_name: "Tilt Open",
    supported_features:
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
    current_tilt_position: 100,
  }),
  getEntity("cover", "tilt_slider_closed", "on", {
    friendly_name: "Tilt Closed",
    supported_features:
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
    current_tilt_position: 0,
  }),
  getEntity("cover", "position_slider_tilt_slider", "on", {
    friendly_name: "Both Sliders",
    supported_features:
-      SUPPORT_OPEN +
+      CoverEntityFeature.OPEN +
-      SUPPORT_STOP +
+      CoverEntityFeature.STOP +
-      SUPPORT_CLOSE +
+      CoverEntityFeature.CLOSE +
-      SUPPORT_SET_POSITION +
+      CoverEntityFeature.SET_POSITION +
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
    current_position: 30,
    current_tilt_position: 70,
  }),
  getEntity("cover", "position_tilt_slider", "on", {
    friendly_name: "Position & Tilt Slider",
    supported_features:
-      SUPPORT_OPEN +
+      CoverEntityFeature.OPEN +
-      SUPPORT_STOP +
+      CoverEntityFeature.STOP +
-      SUPPORT_CLOSE +
+      CoverEntityFeature.CLOSE +
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
    current_tilt_position: 70,
  }),
  getEntity("cover", "position_slider_tilt", "on", {
    friendly_name: "Position Slider & Tilt",
    supported_features:
-      SUPPORT_OPEN +
+      CoverEntityFeature.OPEN +
-      SUPPORT_STOP +
+      CoverEntityFeature.STOP +
-      SUPPORT_CLOSE +
+      CoverEntityFeature.CLOSE +
-      SUPPORT_SET_POSITION +
+      CoverEntityFeature.SET_POSITION +
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT,
+      CoverEntityFeature.CLOSE_TILT,
    current_position: 30,
  }),
  getEntity("cover", "position_slider_only_tilt_slider", "on", {
    friendly_name: "Position Slider Only & Tilt Buttons",
    supported_features:
-      SUPPORT_SET_POSITION +
+      CoverEntityFeature.SET_POSITION +
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT,
+      CoverEntityFeature.CLOSE_TILT,
    current_position: 30,
  }),
  getEntity("cover", "position_slider_only_tilt", "on", {
    friendly_name: "Position Slider Only & Tilt",
    supported_features:
-      SUPPORT_SET_POSITION +
+      CoverEntityFeature.SET_POSITION +
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
    current_position: 30,
    current_tilt_position: 70,
  }),
--- a/gallery/src/pages/more-info/input-number.markdown
+++ b/gallery/src/pages/more-info/input-number.markdown
@@ -0,0 +1,3 @@
 ---
 title: Input Number
 ---
--- a/gallery/src/pages/more-info/input-number.ts
+++ b/gallery/src/pages/more-info/input-number.ts
@@ -0,0 +1,60 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
  MockHomeAssistant,
  provideHass,
 } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 const ENTITIES = [
  getEntity("input_number", "box1", 0, {
    friendly_name: "Box1",
    min: 0,
    max: 100,
    step: 1,
    initial: 0,
    mode: "box",
    unit_of_measurement: "items",
  }),
  getEntity("input_number", "slider1", 0, {
    friendly_name: "Slider1",
    min: 0,
    max: 100,
    step: 1,
    initial: 0,
    mode: "slider",
    unit_of_measurement: "items",
  }),
 ];
@customElement("demo-more-info-input-number")
 class DemoMoreInfoInputNumber extends LitElement {
  @property() public hass!: MockHomeAssistant;
  @query("demo-more-infos") private _demoRoot!: HTMLElement;
  protected render(): TemplateResult {
    return html`
      <demo-more-infos
        .hass=${this.hass}
        .entities=${ENTITIES.map((ent) => ent.entityId)}
      ></demo-more-infos>
    `;
  }
  protected firstUpdated(changedProperties: PropertyValues) {
    super.firstUpdated(changedProperties);
    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
    hass.addEntities(ENTITIES);
  }
 }
 declare global {
  interface HTMLElementTagNameMap {
    "demo-more-info-input-number": DemoMoreInfoInputNumber;
  }
 }
--- a/gallery/src/pages/more-info/light.ts
+++ b/gallery/src/pages/more-info/light.ts
@@ -1,12 +1,7 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import {
+import { LightColorMode, LightEntityFeature } from "../../../../src/data/light";
  LightColorModes,
  SUPPORT_EFFECT,
  SUPPORT_FLASH,
  SUPPORT_TRANSITION,
 } from "../../../../src/data/light";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -22,8 +17,8 @@ const ENTITIES = [
  getEntity("light", "kitchen_light", "on", {
    friendly_name: "Brightness Light",
    brightness: 200,
-    supported_color_modes: [LightColorModes.BRIGHTNESS],
+    supported_color_modes: [LightColorMode.BRIGHTNESS],
-    color_mode: LightColorModes.BRIGHTNESS,
+    color_mode: LightColorMode.BRIGHTNESS,
  }),
  getEntity("light", "color_temperature_light", "on", {
    friendly_name: "White Color Temperature Light",
@@ -32,10 +27,10 @@ const ENTITIES = [
    min_mireds: 30,
    max_mireds: 150,
    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
    ],
-    color_mode: LightColorModes.COLOR_TEMP,
+    color_mode: LightColorMode.COLOR_TEMP,
  }),
  getEntity("light", "color_hs_light", "on", {
    friendly_name: "Color HS Light",
@@ -44,13 +39,16 @@ const ENTITIES = [
    rgb_color: [30, 100, 255],
    min_mireds: 30,
    max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
      LightEntityFeature.EFFECT +
      LightEntityFeature.FLASH +
      LightEntityFeature.TRANSITION,
    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
-      LightColorModes.HS,
+      LightColorMode.HS,
    ],
-    color_mode: LightColorModes.HS,
+    color_mode: LightColorMode.HS,
    effect_list: ["random", "colorloop"],
  }),
  getEntity("light", "color_rgb_ct_light", "on", {
@@ -59,22 +57,28 @@ const ENTITIES = [
    color_temp: 75,
    min_mireds: 30,
    max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
      LightEntityFeature.EFFECT +
      LightEntityFeature.FLASH +
      LightEntityFeature.TRANSITION,
    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
-      LightColorModes.RGB,
+      LightColorMode.RGB,
    ],
-    color_mode: LightColorModes.COLOR_TEMP,
+    color_mode: LightColorMode.COLOR_TEMP,
    effect_list: ["random", "colorloop"],
  }),
  getEntity("light", "color_RGB_light", "on", {
    friendly_name: "Color Effects Light",
    brightness: 255,
    rgb_color: [30, 100, 255],
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
-    supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB],
+      LightEntityFeature.EFFECT +
-    color_mode: LightColorModes.RGB,
+      LightEntityFeature.FLASH +
      LightEntityFeature.TRANSITION,
    supported_color_modes: [LightColorMode.BRIGHTNESS, LightColorMode.RGB],
    color_mode: LightColorMode.RGB,
    effect_list: ["random", "colorloop"],
  }),
  getEntity("light", "color_rgbw_light", "on", {
@@ -83,13 +87,16 @@ const ENTITIES = [
    rgbw_color: [30, 100, 255, 125],
    min_mireds: 30,
    max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
      LightEntityFeature.EFFECT +
      LightEntityFeature.FLASH +
      LightEntityFeature.TRANSITION,
    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
-      LightColorModes.RGBW,
+      LightColorMode.RGBW,
    ],
-    color_mode: LightColorModes.RGBW,
+    color_mode: LightColorMode.RGBW,
    effect_list: ["random", "colorloop"],
  }),
  getEntity("light", "color_rgbww_light", "on", {
@@ -98,13 +105,16 @@ const ENTITIES = [
    rgbww_color: [30, 100, 255, 125, 10],
    min_mireds: 30,
    max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
      LightEntityFeature.EFFECT +
      LightEntityFeature.FLASH +
      LightEntityFeature.TRANSITION,
    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
-      LightColorModes.RGBWW,
+      LightColorMode.RGBWW,
    ],
-    color_mode: LightColorModes.RGBWW,
+    color_mode: LightColorMode.RGBWW,
    effect_list: ["random", "colorloop"],
  }),
  getEntity("light", "color_xy_light", "on", {
@@ -114,13 +124,16 @@ const ENTITIES = [
    rgb_color: [30, 100, 255],
    min_mireds: 30,
    max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
      LightEntityFeature.EFFECT +
      LightEntityFeature.FLASH +
      LightEntityFeature.TRANSITION,
    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
-      LightColorModes.XY,
+      LightColorMode.XY,
    ],
-    color_mode: LightColorModes.XY,
+    color_mode: LightColorMode.XY,
    effect_list: ["random", "colorloop"],
  }),
 ];
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -1024,10 +1024,13 @@ class HassioAddonInfo extends LitElement {
    button.progress = true;
    const confirmed = await showConfirmationDialog(this, {
-      title: this.addon.name,
+      title: this.supervisor.localize("dialog.uninstall_addon.title", {
-      text: "Are you sure you want to uninstall this add-on?",
+        name: this.addon.name,
-      confirmText: "uninstall add-on",
+      }),
-      dismissText: "no",
+      text: this.supervisor.localize("dialog.uninstall_addon.text"),
      confirmText: this.supervisor.localize("dialog.uninstall_addon.uninstall"),
      dismissText: this.supervisor.localize("common.cancel"),
      destructive: true,
    });
    if (!confirmed) {
--- a/hassio/src/backups/hassio-backups.ts
+++ b/hassio/src/backups/hassio-backups.ts
@@ -119,6 +119,7 @@ export class HassioBackups extends LitElement {
    (narrow: boolean): DataTableColumnContainer => ({
      name: {
        title: this.supervisor.localize("backup.name"),
        main: true,
        sortable: true,
        filterable: true,
        grows: true,
--- a/hassio/src/dialogs/suggestAddonRestart.ts
+++ b/hassio/src/dialogs/suggestAddonRestart.ts
@@ -18,9 +18,11 @@ export const suggestAddonRestart = async (
  addon: HassioAddonDetails
 ): Promise<void> => {
  const confirmed = await showConfirmationDialog(element, {
-    title: supervisor.localize("common.restart_name", "name", addon.name),
+    title: supervisor.localize("dialog.restart_addon.title", {
      name: addon.name,
    }),
    text: supervisor.localize("dialog.restart_addon.text"),
-    confirmText: supervisor.localize("dialog.restart_addon.confirm_text"),
+    confirmText: supervisor.localize("dialog.restart_addon.restart"),
    dismissText: supervisor.localize("common.cancel"),
  });
  if (confirmed) {
@@ -28,11 +30,9 @@ export const suggestAddonRestart = async (
      await restartHassioAddon(hass, addon.slug);
    } catch (err: any) {
      showAlertDialog(element, {
-        title: supervisor.localize(
+        title: supervisor.localize("common.failed_to_restart_name", {
-          "common.failed_to_restart_name",
+          name: addon.name,
-          "name",
+        }),
          addon.name
        ),
        text: extractApiErrorMessage(err),
      });
    }
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -23,6 +23,7 @@ import {
  showAlertDialog,
  showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
 import { showJoinBetaDialog } from "../../../src/panels/config/core/updates/show-dialog-join-beta";
 import {
  UNHEALTHY_REASON_URL,
  UNSUPPORTED_REASON_URL,
@@ -230,36 +231,27 @@ class HassioSupervisorInfo extends LitElement {
    button.progress = true;
    if (this.supervisor.supervisor.channel === "stable") {
-      const confirmed = await showConfirmationDialog(this, {
+      showJoinBetaDialog(this, {
-        title: this.supervisor.localize("system.supervisor.warning"),
+        join: async () => {
-        text: html`${this.supervisor.localize("system.supervisor.beta_warning")}
+          await this._setChannel("beta");
-          <br />
+          button.progress = false;
-          <b> ${this.supervisor.localize("system.supervisor.beta_backup")} </b>
+        },
-          <br /><br />
+        cancel: () => {
-          ${this.supervisor.localize("system.supervisor.beta_release_items")}
+          button.progress = false;
-          <ul>
+        },
            <li>Home Assistant Core</li>
            <li>Home Assistant Supervisor</li>
            <li>Home Assistant Operating System</li>
          </ul>
          <br />
          ${this.supervisor.localize("system.supervisor.beta_join_confirm")}`,
        confirmText: this.supervisor.localize(
          "system.supervisor.join_beta_action"
        ),
        dismissText: this.supervisor.localize("common.cancel"),
      });
-
+    } else {
-      if (!confirmed) {
+      await this._setChannel("stable");
-        button.progress = false;
+      button.progress = false;
        return;
      }
    }
  }
  private async _setChannel(
    channel: SupervisorOptions["channel"]
  ): Promise<void> {
    try {
      const data: Partial<SupervisorOptions> = {
-        channel:
+        channel,
          this.supervisor.supervisor.channel === "stable" ? "beta" : "stable",
      };
      await setSupervisorOption(this.hass, data);
      await this._reloadSupervisor();
@@ -270,8 +262,6 @@ class HassioSupervisorInfo extends LitElement {
        ),
        text: extractApiErrorMessage(err),
      });
    } finally {
      button.progress = false;
    }
  }
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
    "deep-freeze": "^0.0.1",
    "fuse.js": "^6.0.0",
    "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.2.1",
+    "hls.js": "^1.2.3",
    "home-assistant-js-websocket": "^8.0.0",
    "idb-keyval": "^5.1.3",
    "intl-messageformat": "^9.9.1",
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 [project]
 name         = "home-assistant-frontend"
-version      = "20220905.0"
+version      = "20221010.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
--- a/script/core
+++ b/script/core
@@ -46,6 +46,14 @@ frontend:
 #   development_repo: ${WD}" >> "${WD}/config/configuration.yaml"
  fi
  if [ ! -z "${CODESPACES}" ]; then
  echo "
 http:
  use_x_forwarded_for: true
  trusted_proxies:
    - 127.0.0.1
 " >> "${WD}/config/configuration.yaml"
  fi
 fi
 hass -c "${WD}/config"
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -6,6 +6,7 @@ import {
  mdiAlert,
  mdiAngleAcute,
  mdiAppleSafari,
  mdiArrowLeftRight,
  mdiBell,
  mdiBookmark,
  mdiBrightness5,
@@ -25,7 +26,6 @@ import {
  mdiFlower,
  mdiFormatListBulleted,
  mdiFormTextbox,
  mdiGasCylinder,
  mdiGauge,
  mdiGestureTapButton,
  mdiGoogleAssistant,
@@ -37,23 +37,27 @@ import {
  mdiLightningBolt,
  mdiMailbox,
  mdiMapMarkerRadius,
  mdiMeterGas,
  mdiMicrophoneMessage,
  mdiMolecule,
  mdiMoleculeCo,
  mdiMoleculeCo2,
  mdiPalette,
  mdiProgressClock,
  mdiRayVertex,
  mdiRemote,
  mdiRobot,
  mdiRobotVacuum,
  mdiScriptText,
  mdiSineWave,
-  mdiMicrophoneMessage,
+  mdiSpeedometer,
  mdiThermometer,
  mdiThermostat,
  mdiTimerOutline,
  mdiVideo,
  mdiWaterPercent,
  mdiWeatherCloudy,
  mdiWeight,
  mdiWhiteBalanceSunny,
  mdiWifi,
 } from "@mdi/js";
@@ -121,9 +125,11 @@ export const FIXED_DEVICE_CLASS_ICONS = {
  carbon_monoxide: mdiMoleculeCo,
  current: mdiCurrentAc,
  date: mdiCalendar,
  distance: mdiArrowLeftRight,
  duration: mdiProgressClock,
  energy: mdiLightningBolt,
  frequency: mdiSineWave,
-  gas: mdiGasCylinder,
+  gas: mdiMeterGas,
  humidity: mdiWaterPercent,
  illuminance: mdiBrightness5,
  moisture: mdiWaterPercent,
@@ -140,11 +146,14 @@ export const FIXED_DEVICE_CLASS_ICONS = {
  pressure: mdiGauge,
  reactive_power: mdiFlash,
  signal_strength: mdiWifi,
  speed: mdiSpeedometer,
  sulphur_dioxide: mdiMolecule,
  temperature: mdiThermometer,
  timestamp: mdiClock,
  volatile_organic_compounds: mdiMolecule,
  voltage: mdiSineWave,
  // volume: TBD, => no well matching icon found
  weight: mdiWeight,
 };
 /** Domains that have a state card. */
--- a/src/common/entity/feature_class_names.ts
+++ b/src/common/entity/feature_class_names.ts
@@ -1,10 +1,14 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { supportsFeature } from "./supports-feature";
 export type FeatureClassNames<T extends number = number> = Partial<
  Record<T, string>
 >;
 // Expects classNames to be an object mapping feature-bit -> className
 export const featureClassNames = (
  stateObj: HassEntity,
-  classNames: { [feature: number]: string }
+  classNames: FeatureClassNames
 ) => {
  if (!stateObj || !stateObj.attributes.supported_features) {
    return "";
--- a/src/common/entity/get_states.ts
+++ b/src/common/entity/get_states.ts
@@ -37,6 +37,7 @@ const FIXED_DOMAIN_STATES = {
  siren: ["on", "off"],
  sun: ["above_horizon", "below_horizon"],
  switch: ["on", "off"],
  timer: ["active", "idle", "paused"],
  update: ["on", "off"],
  vacuum: ["cleaning", "docked", "error", "idle", "paused", "returning"],
  weather: [
@@ -239,10 +240,13 @@ export const getStates = (
      }
      break;
    case "light":
-      if (attribute === "effect") {
+      if (attribute === "effect" && state.attributes.effect_list) {
        result.push(...state.attributes.effect_list);
-      } else if (attribute === "color_mode") {
+      } else if (
-        result.push(...state.attributes.color_modes);
+        attribute === "color_mode" &&
        state.attributes.supported_color_modes
      ) {
        result.push(...state.attributes.supported_color_modes);
      }
      break;
    case "media_player":
--- a/src/common/integrations/protocolIntegrationPicked.ts
+++ b/src/common/integrations/protocolIntegrationPicked.ts
@@ -1,11 +1,11 @@
 import { html } from "lit";
 import { getConfigEntries } from "../../data/config_entries";
 import { showConfigFlowDialog } from "../../dialogs/config-flow/show-dialog-config-flow";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import { showZWaveJSAddNodeDialog } from "../../panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
 import type { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { isComponentLoaded } from "../config/is_component_loaded";
 import { fireEvent } from "../dom/fire_event";
 import { navigate } from "../navigate";
 export const protocolIntegrationPicked = async (
@@ -18,7 +18,7 @@ export const protocolIntegrationPicked = async (
      domain: "zwave_js",
    });
-    if (!entries.length) {
+    if (!isComponentLoaded(hass, "zwave_js") || !entries.length) {
      // If the component isn't loaded, ask them to load the integration first
      showConfirmationDialog(element, {
        text: hass.localize(
@@ -39,8 +39,8 @@ export const protocolIntegrationPicked = async (
          "ui.panel.config.integrations.config_flow.proceed"
        ),
        confirm: () => {
-          fireEvent(element, "handler-picked", {
+          showConfigFlowDialog(element, {
-            handler: "zwave_js",
+            startFlowHandler: "zwave_js",
          });
        },
      });
@@ -75,8 +75,8 @@ export const protocolIntegrationPicked = async (
          "ui.panel.config.integrations.config_flow.proceed"
        ),
        confirm: () => {
-          fireEvent(element, "handler-picked", {
+          showConfigFlowDialog(element, {
-            handler: "zha",
+            startFlowHandler: "zha",
          });
        },
      });
--- a/src/common/string/title-case.ts
+++ b/src/common/string/title-case.ts
@@ -0,0 +1,4 @@
 export const titleCase = (s) =>
  s.replace(/^_*(.)|_+(.)/g, (_s, c, d) =>
    c ? c.toUpperCase() : " " + d.toUpperCase()
  );
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -13,6 +13,7 @@ import {
  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import {
@@ -20,31 +21,38 @@ import {
  numberFormatToLocale,
 } from "../../common/number/format_number";
 import {
-  getStatisticIds,
+  getDisplayUnit,
  getStatisticLabel,
  getStatisticMetadata,
  Statistics,
  statisticsHaveType,
  StatisticsMetaData,
  StatisticType,
-} from "../../data/history";
+} from "../../data/recorder";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
 export type ExtendedStatisticType = StatisticType | "state";
 export const statTypeMap: Record<ExtendedStatisticType, StatisticType> = {
  mean: "mean",
  min: "min",
  max: "max",
  sum: "sum",
  state: "sum",
 };
@customElement("statistics-chart")
 class StatisticsChart extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
  @property({ attribute: false }) public statisticsData!: Statistics;
  @property({ type: Array }) public statisticIds?: StatisticsMetaData[];
  @property() public names: boolean | Record<string, string> = false;
  @property() public unit?: string;
  @property({ attribute: false }) public endTime?: Date;
-  @property({ type: Array }) public statTypes: Array<StatisticType> = [
+  @property({ type: Array }) public statTypes: Array<ExtendedStatisticType> = [
    "sum",
    "min",
    "mean",
@@ -191,18 +199,28 @@ class StatisticsChart extends LitElement {
    };
  }
-  private async _getStatisticIds() {
+  private _getStatisticsMetaData = memoizeOne(
-    this.statisticIds = await getStatisticIds(this.hass);
+    async (statisticIds: string[] | undefined) => {
-  }
+      const statsMetadataArray = await getStatisticMetadata(
        this.hass,
        statisticIds
      );
      const statisticsMetaData = {};
      statsMetadataArray.forEach((x) => {
        statisticsMetaData[x.statistic_id] = x;
      });
      return statisticsMetaData;
    }
  );
  private async _generateData() {
    if (!this.statisticsData) {
      return;
    }
-    if (!this.statisticIds) {
+    const statisticsMetaData = await this._getStatisticsMetaData(
-      await this._getStatisticIds();
+      Object.keys(this.statisticsData)
-    }
+    );
    let colorIndex = 0;
    const statisticsData = Object.values(this.statisticsData);
@@ -233,9 +251,7 @@ class StatisticsChart extends LitElement {
    const names = this.names || {};
    statisticsData.forEach((stats) => {
      const firstStat = stats[0];
-      const meta = this.statisticIds!.find(
+      const meta = statisticsMetaData?.[firstStat.statistic_id];
        (stat) => stat.statistic_id === firstStat.statistic_id
      );
      let name = names[firstStat.statistic_id];
      if (!name) {
        name = getStatisticLabel(this.hass, firstStat.statistic_id, meta);
@@ -243,8 +259,11 @@ class StatisticsChart extends LitElement {
      if (!this.unit) {
        if (unit === undefined) {
-          unit = meta?.display_unit_of_measurement;
+          unit = getDisplayUnit(this.hass, firstStat.statistic_id, meta);
-        } else if (unit !== meta?.display_unit_of_measurement) {
+        } else if (
          unit !== getDisplayUnit(this.hass, firstStat.statistic_id, meta)
        ) {
          // Clear unit if not all statistics have same unit
          unit = null;
        }
      }
@@ -301,7 +320,7 @@ class StatisticsChart extends LitElement {
        : this.statTypes;
      sortedTypes.forEach((type) => {
-        if (statisticsHaveType(stats, type)) {
+        if (statisticsHaveType(stats, statTypeMap[type])) {
          const band = drawBands && (type === "min" || type === "max");
          statTypes.push(type);
          statDataSets.push({
@@ -329,7 +348,6 @@ class StatisticsChart extends LitElement {
      let prevDate: Date | null = null;
      // Process chart data.
      let initVal: number | null = null;
      let prevSum: number | null = null;
      stats.forEach((stat) => {
        const date = new Date(stat.start);
@@ -341,11 +359,11 @@ class StatisticsChart extends LitElement {
        statTypes.forEach((type) => {
          let val: number | null;
          if (type === "sum") {
-            if (initVal === null) {
+            if (prevSum === null) {
-              initVal = val = stat.state || 0;
+              val = 0;
              prevSum = stat.sum;
            } else {
-              val = initVal + ((stat.sum || 0) - prevSum!);
+              val = (stat.sum || 0) - prevSum;
            }
          } else {
            val = stat[type];
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -69,6 +69,7 @@ export interface DataTableSortColumnData {
 }
 export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
  main?: boolean;
  title: TemplateResult | string;
  label?: TemplateResult | string;
  type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
@@ -406,7 +407,7 @@ export class HaDataTable extends LitElement {
          }
          return html`
            <div
-              role="cell"
+              role=${column.main ? "rowheader" : "cell"}
              class="mdc-data-table__cell ${classMap({
                "mdc-data-table__cell--numeric": column.type === "numeric",
                "mdc-data-table__cell--icon": column.type === "icon",
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -312,6 +312,7 @@ export class HaEntityPicker extends LitElement {
        .filteredItems=${this._states}
        .renderer=${rowRenderer}
        .required=${this.required}
        .disabled=${this.disabled}
        @opened-changed=${this._openedChanged}
        @value-changed=${this._valueChanged}
        @filter-changed=${this._filterChanged}
--- a/src/components/entity/ha-entity-state-picker.ts
+++ b/src/components/entity/ha-entity-state-picker.ts
@@ -7,6 +7,8 @@ import { getStates } from "../../common/entity/get_states";
 import { HomeAssistant } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 import { formatAttributeValue } from "../../data/entity_attributes";
 import { fireEvent } from "../../common/dom/fire_event";
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
@@ -55,7 +57,7 @@ class HaEntityStatePicker extends LitElement {
                    this.hass.locale,
                    key
                  )
-                : key,
+                : formatAttributeValue(this.hass, key),
            }))
          : [];
    }
@@ -69,16 +71,7 @@ class HaEntityStatePicker extends LitElement {
    return html`
      <ha-combo-box
        .hass=${this.hass}
-        .value=${this.value
+        .value=${this._value}
          ? this.entityId && this.hass.states[this.entityId]
            ? computeStateDisplay(
                this.hass.localize,
                this.hass.states[this.entityId],
                this.hass.locale,
                this.value
              )
            : this.value
          : ""}
        .autofocus=${this.autofocus}
        .label=${this.label ??
        this.hass.localize("ui.components.entity.entity-state-picker.state")}
@@ -95,12 +88,28 @@ class HaEntityStatePicker extends LitElement {
    `;
  }
  private get _value() {
    return this.value || "";
  }
  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
    this._opened = ev.detail.value;
  }
  private _valueChanged(ev: PolymerChangedEvent<string>) {
-    this.value = ev.detail.value;
+    ev.stopPropagation();
    const newValue = ev.detail.value;
    if (newValue !== this._value) {
      this._setValue(newValue);
    }
  }
  private _setValue(value: string) {
    this.value = value;
    setTimeout(() => {
      fireEvent(this, "value-changed", { value });
      fireEvent(this, "change");
    }, 0);
  }
 }
--- a/src/components/entity/ha-statistic-picker.ts
+++ b/src/components/entity/ha-statistic-picker.ts
@@ -3,10 +3,14 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { stringCompare } from "../../common/string/compare";
-import { getStatisticIds, StatisticsMetaData } from "../../data/history";
+import {
  getStatisticIds,
  getStatisticLabel,
  StatisticsMetaData,
 } from "../../data/recorder";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
@@ -39,23 +43,14 @@ export class HaStatisticPicker extends LitElement {
    type: Array,
    attribute: "include-statistics-unit-of-measurement",
  })
-  public includeStatisticsUnitOfMeasurement?: string[];
+  public includeStatisticsUnitOfMeasurement?: string | string[];
  /**
-   * Show only statistics displayed with these units of measurements.
+   * Show only statistics with these unit classes.
-   * @type {Array}
+   * @attr include-unit-class
   * @attr include-display-unit-of-measurement
   */
-  @property({ type: Array, attribute: "include-display-unit-of-measurement" })
+  @property({ attribute: "include-unit-class" })
-  public includeDisplayUnitOfMeasurement?: string[];
+  public includeUnitClass?: string | string[];
  /**
   * Show only statistics with these device classes.
   * @type {Array}
   * @attr include-device-classes
   */
  @property({ type: Array, attribute: "include-device-classes" })
  public includeDeviceClasses?: string[];
  /**
   * Show only statistics on entities.
@@ -97,9 +92,8 @@ export class HaStatisticPicker extends LitElement {
  private _getStatistics = memoizeOne(
    (
      statisticIds: StatisticsMetaData[],
-      includeStatisticsUnitOfMeasurement?: string[],
+      includeStatisticsUnitOfMeasurement?: string | string[],
-      includeDisplayUnitOfMeasurement?: string[],
+      includeUnitClass?: string | string[],
      includeDeviceClasses?: string[],
      entitiesOnly?: boolean
    ): Array<{ id: string; name: string; state?: HassEntity }> => {
      if (!statisticIds.length) {
@@ -114,17 +108,18 @@ export class HaStatisticPicker extends LitElement {
      }
      if (includeStatisticsUnitOfMeasurement) {
        const includeUnits: (string | null)[] = ensureArray(
          includeStatisticsUnitOfMeasurement
        );
        statisticIds = statisticIds.filter((meta) =>
-          includeStatisticsUnitOfMeasurement.includes(
+          includeUnits.includes(meta.statistics_unit_of_measurement)
            meta.statistics_unit_of_measurement
          )
        );
      }
-      if (includeDisplayUnitOfMeasurement) {
+      if (includeUnitClass) {
        const includeUnitClasses: (string | null)[] =
          ensureArray(includeUnitClass);
        statisticIds = statisticIds.filter((meta) =>
-          includeDisplayUnitOfMeasurement.includes(
+          includeUnitClasses.includes(meta.unit_class)
            meta.display_unit_of_measurement
          )
        );
      }
@@ -139,23 +134,16 @@ export class HaStatisticPicker extends LitElement {
          if (!entitiesOnly) {
            output.push({
              id: meta.statistic_id,
-              name: meta.name || meta.statistic_id,
+              name: getStatisticLabel(this.hass, meta.statistic_id, meta),
            });
          }
          return;
        }
-        if (
+        output.push({
-          !includeDeviceClasses ||
+          id: meta.statistic_id,
-          includeDeviceClasses.includes(
+          name: getStatisticLabel(this.hass, meta.statistic_id, meta),
-            entityState!.attributes.device_class || ""
+          state: entityState,
-          )
+        });
        ) {
          output.push({
            id: meta.statistic_id,
            name: computeStateName(entityState),
            state: entityState,
          });
        }
      });
      if (!output.length) {
@@ -206,8 +194,7 @@ export class HaStatisticPicker extends LitElement {
        (this.comboBox as any).items = this._getStatistics(
          this.statisticIds!,
          this.includeStatisticsUnitOfMeasurement,
-          this.includeDisplayUnitOfMeasurement,
+          this.includeUnitClass,
          this.includeDeviceClasses,
          this.entitiesOnly
        );
      } else {
@@ -215,8 +202,7 @@ export class HaStatisticPicker extends LitElement {
          (this.comboBox as any).items = this._getStatistics(
            this.statisticIds!,
            this.includeStatisticsUnitOfMeasurement,
-            this.includeDisplayUnitOfMeasurement,
+            this.includeUnitClass,
            this.includeDeviceClasses,
            this.entitiesOnly
          );
        });
--- a/src/components/entity/ha-statistics-picker.ts
+++ b/src/components/entity/ha-statistics-picker.ts
@@ -22,11 +22,52 @@ class HaStatisticsPicker extends LitElement {
  @property({ attribute: "pick-statistic-label" })
  public pickStatisticLabel?: string;
  /**
   * Show only statistics natively stored with these units of measurements.
   * @attr include-statistics-unit-of-measurement
   */
  @property({
    attribute: "include-statistics-unit-of-measurement",
  })
  public includeStatisticsUnitOfMeasurement?: string[] | string;
  /**
   * Show only statistics with these unit classes.
   * @attr include-unit-class
   */
  @property({ attribute: "include-unit-class" })
  public includeUnitClass?: string | string[];
  /**
   * Ignore filtering of statistics type and units when only a single statistic is selected.
   * @type {boolean}
   * @attr ignore-restrictions-on-first-statistic
   */
  @property({
    type: Boolean,
    attribute: "ignore-restrictions-on-first-statistic",
  })
  public ignoreRestrictionsOnFirstStatistic = false;
  protected render(): TemplateResult {
    if (!this.hass) {
      return html``;
    }
    const ignoreRestriction =
      this.ignoreRestrictionsOnFirstStatistic &&
      this._currentStatistics.length <= 1;
    const includeStatisticsUnitCurrent = ignoreRestriction
      ? undefined
      : this.includeStatisticsUnitOfMeasurement;
    const includeUnitClassCurrent = ignoreRestriction
      ? undefined
      : this.includeUnitClass;
    const includeStatisticTypesCurrent = ignoreRestriction
      ? undefined
      : this.statisticTypes;
    return html`
      ${this._currentStatistics.map(
        (statisticId) => html`
@@ -34,8 +75,10 @@ class HaStatisticsPicker extends LitElement {
            <ha-statistic-picker
              .curValue=${statisticId}
              .hass=${this.hass}
              .includeStatisticsUnitOfMeasurement=${includeStatisticsUnitCurrent}
              .includeUnitClass=${includeUnitClassCurrent}
              .value=${statisticId}
-              .statisticTypes=${this.statisticTypes}
+              .statisticTypes=${includeStatisticTypesCurrent}
              .statisticIds=${this.statisticIds}
              .label=${this.pickedStatisticLabel}
              @value-changed=${this._statisticChanged}
@@ -46,6 +89,9 @@ class HaStatisticsPicker extends LitElement {
      <div>
        <ha-statistic-picker
          .hass=${this.hass}
          .includeStatisticsUnitOfMeasurement=${this
            .includeStatisticsUnitOfMeasurement}
          .includeUnitClass=${this.includeUnitClass}
          .statisticTypes=${this.statisticTypes}
          .statisticIds=${this.statisticIds}
          .label=${this.pickStatisticLabel}
--- a/src/components/ha-camera-stream.ts
+++ b/src/components/ha-camera-stream.ts
@@ -15,6 +15,7 @@ import {
  CAMERA_SUPPORT_STREAM,
  computeMJPEGStreamUrl,
  fetchStreamUrl,
  fetchThumbnailUrlWithCache,
  STREAM_TYPE_HLS,
  STREAM_TYPE_WEB_RTC,
 } from "../data/camera";
@@ -37,6 +38,9 @@ class HaCameraStream extends LitElement {
  @property({ type: Boolean, attribute: "allow-exoplayer" })
  public allowExoPlayer = false;
  // Video background image before its loaded
  @state() private _posterUrl?: string;
  // We keep track if we should force MJPEG if there was a failure
  // to get the HLS stream url. This is reset if we change entities.
  @state() private _forceMJPEG?: string;
@@ -51,12 +55,14 @@ class HaCameraStream extends LitElement {
      !this._shouldRenderMJPEG &&
      this.stateObj &&
      (changedProps.get("stateObj") as CameraEntity | undefined)?.entity_id !==
-        this.stateObj.entity_id &&
+        this.stateObj.entity_id
      this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_HLS
    ) {
-      this._forceMJPEG = undefined;
+      this._getPosterUrl();
-      this._url = undefined;
+      if (this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_HLS) {
-      this._getStreamUrl();
+        this._forceMJPEG = undefined;
        this._url = undefined;
        this._getStreamUrl();
      }
    }
  }
@@ -94,6 +100,7 @@ class HaCameraStream extends LitElement {
            .controls=${this.controls}
            .hass=${this.hass}
            .url=${this._url}
            .posterUrl=${this._posterUrl}
          ></ha-hls-player>`
        : html``;
    }
@@ -105,6 +112,7 @@ class HaCameraStream extends LitElement {
        .controls=${this.controls}
        .hass=${this.hass}
        .entityid=${this.stateObj.entity_id}
        .posterUrl=${this._posterUrl}
      ></ha-web-rtc-player>`;
    }
    return html``;
@@ -129,6 +137,20 @@ class HaCameraStream extends LitElement {
    return !isComponentLoaded(this.hass!, "stream");
  }
  private async _getPosterUrl(): Promise<void> {
    try {
      this._posterUrl = await fetchThumbnailUrlWithCache(
        this.hass!,
        this.stateObj!.entity_id,
        this.clientWidth,
        this.clientHeight
      );
    } catch (err: any) {
      // poster url is optional
      this._posterUrl = undefined;
    }
  }
  private async _getStreamUrl(): Promise<void> {
    try {
      const { url } = await fetchStreamUrl(
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -8,7 +8,14 @@ import type {
  ComboBoxLightValueChangedEvent,
 } from "@vaadin/combo-box/vaadin-combo-box-light";
 import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
  css,
  CSSResultGroup,
  html,
  LitElement,
  PropertyValues,
  TemplateResult,
 } from "lit";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
@@ -225,11 +232,13 @@ export class HaComboBox extends LitElement {
    // @ts-ignore
    fireEvent(this, ev.type, ev.detail);
-    if (
+    if (opened) {
-      opened &&
+      this.removeInertOnOverlay();
-      "MutationObserver" in window &&
+    }
-      !this._overlayMutationObserver
+  }
-    ) {
+
  private removeInertOnOverlay() {
    if ("MutationObserver" in window && !this._overlayMutationObserver) {
      const overlay = document.querySelector<HTMLElement>(
        "vaadin-combo-box-overlay"
      );
@@ -268,6 +277,16 @@ export class HaComboBox extends LitElement {
    }
  }
  updated(changedProps: PropertyValues) {
    super.updated(changedProps);
    if (
      changedProps.has("filteredItems") ||
      (changedProps.has("items") && this.opened)
    ) {
      this.removeInertOnOverlay();
    }
  }
  private _filterChanged(ev: ComboBoxLightFilterChangedEvent) {
    // @ts-ignore
    fireEvent(this, ev.type, ev.detail, { composed: false });
@@ -278,7 +297,7 @@ export class HaComboBox extends LitElement {
    const newValue = ev.detail.value;
    if (newValue !== this.value) {
-      fireEvent(this, "value-changed", { value: newValue });
+      fireEvent(this, "value-changed", { value: newValue || undefined });
    }
  }
@@ -290,6 +309,7 @@ export class HaComboBox extends LitElement {
      }
      vaadin-combo-box-light {
        position: relative;
        --vaadin-combo-box-overlay-max-height: calc(45vh);
      }
      ha-textfield {
        width: 100%;
--- a/src/components/ha-cover-controls.ts
+++ b/src/components/ha-cover-controls.ts
@@ -3,15 +3,14 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
 import { supportsFeature } from "../common/entity/supports-feature";
 import {
  CoverEntity,
  CoverEntityFeature,
  isClosing,
  isFullyClosed,
  isFullyOpen,
  isOpening,
  supportsClose,
  supportsOpen,
  supportsStop,
 } from "../data/cover";
 import { UNAVAILABLE } from "../data/entity";
 import type { HomeAssistant } from "../types";
@@ -32,7 +31,7 @@ class HaCoverControls extends LitElement {
      <div class="state">
        <ha-icon-button
          class=${classMap({
-            hidden: !supportsOpen(this.stateObj),
+            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.OPEN),
          })}
          .label=${this.hass.localize(
            "ui.dialogs.more_info_control.cover.open_cover"
@@ -44,7 +43,7 @@ class HaCoverControls extends LitElement {
        </ha-icon-button>
        <ha-icon-button
          class=${classMap({
-            hidden: !supportsStop(this.stateObj),
+            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.STOP),
          })}
          .label=${this.hass.localize(
            "ui.dialogs.more_info_control.cover.stop_cover"
@@ -55,7 +54,7 @@ class HaCoverControls extends LitElement {
        ></ha-icon-button>
        <ha-icon-button
          class=${classMap({
-            hidden: !supportsClose(this.stateObj),
+            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.CLOSE),
          })}
          .label=${this.hass.localize(
            "ui.dialogs.more_info_control.cover.close_cover"
--- a/src/components/ha-cover-tilt-controls.ts
+++ b/src/components/ha-cover-tilt-controls.ts
@@ -2,13 +2,12 @@ import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { supportsFeature } from "../common/entity/supports-feature";
 import {
  CoverEntity,
  CoverEntityFeature,
  isFullyClosedTilt,
  isFullyOpenTilt,
  supportsCloseTilt,
  supportsOpenTilt,
  supportsStopTilt,
 } from "../data/cover";
 import { UNAVAILABLE } from "../data/entity";
 import { HomeAssistant } from "../types";
@@ -27,7 +26,10 @@ class HaCoverTiltControls extends LitElement {
    return html` <ha-icon-button
        class=${classMap({
-          invisible: !supportsOpenTilt(this.stateObj),
+          invisible: !supportsFeature(
            this.stateObj,
            CoverEntityFeature.OPEN_TILT
          ),
        })}
        .label=${this.hass.localize(
          "ui.dialogs.more_info_control.cover.open_tilt_cover"
@@ -38,7 +40,10 @@ class HaCoverTiltControls extends LitElement {
      ></ha-icon-button>
      <ha-icon-button
        class=${classMap({
-          invisible: !supportsStopTilt(this.stateObj),
+          invisible: !supportsFeature(
            this.stateObj,
            CoverEntityFeature.STOP_TILT
          ),
        })}
        .label=${this.hass.localize(
          "ui.dialogs.more_info_control.cover.stop_cover"
@@ -49,7 +54,10 @@ class HaCoverTiltControls extends LitElement {
      ></ha-icon-button>
      <ha-icon-button
        class=${classMap({
-          invisible: !supportsCloseTilt(this.stateObj),
+          invisible: !supportsFeature(
            this.stateObj,
            CoverEntityFeature.CLOSE_TILT
          ),
        })}
        .label=${this.hass.localize(
          "ui.dialogs.more_info_control.cover.close_tilt_cover"
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -91,7 +91,7 @@ export class HaDialog extends DialogBase {
      .header_button {
        position: absolute;
        right: 16px;
-        top: 10px;
+        top: 14px;
        text-decoration: none;
        color: inherit;
      }
--- a/src/components/ha-form/ha-form-float.ts
+++ b/src/components/ha-form/ha-form-float.ts
@@ -26,6 +26,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
  protected render(): TemplateResult {
    return html`
      <ha-textfield
        type="numeric"
        inputMode="decimal"
        .label=${this.label}
        .value=${this.data !== undefined ? this.data : ""}
@@ -55,6 +56,11 @@ export class HaFormFloat extends LitElement implements HaFormElement {
      return;
    }
    // Allow user to start typing a negative value
    if (rawValue === "-") {
      return;
    }
    if (rawValue !== "") {
      value = parseFloat(rawValue);
      if (isNaN(value)) {
--- a/src/components/ha-formfield.ts
+++ b/src/components/ha-formfield.ts
@@ -13,6 +13,9 @@ export class HaFormfield extends FormfieldBase {
      switch (input.tagName) {
        case "HA-CHECKBOX":
        case "HA-RADIO":
          if ((input as any).disabled) {
            break;
          }
          (input as any).checked = !(input as any).checked;
          fireEvent(input, "change");
          break;
--- a/src/components/ha-hls-player.ts
+++ b/src/components/ha-hls-player.ts
@@ -23,6 +23,8 @@ class HaHLSPlayer extends LitElement {
  @property() public url!: string;
  @property() public posterUrl!: string;
  @property({ type: Boolean, attribute: "controls" })
  public controls = false;
@@ -78,6 +80,7 @@ class HaHLSPlayer extends LitElement {
        : ""}
      ${!this._errorIsFatal
        ? html`<video
            .poster=${this.posterUrl}
            ?autoplay=${this.autoPlay}
            .muted=${this.muted}
            ?playsinline=${this.playsInline}
@@ -165,7 +168,7 @@ class HaHLSPlayer extends LitElement {
    window.addEventListener("resize", this._resizeExoPlayer);
    this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
    this._videoEl.style.visibility = "hidden";
-    await this.hass!.auth.external!.sendMessage({
+    await this.hass!.auth.external!.fireMessage({
      type: "exoplayer/play_hls",
      payload: {
        url: new URL(url, window.location.href).toString(),
--- a/src/components/ha-icon-overflow-menu.ts
+++ b/src/components/ha-icon-overflow-menu.ts
@@ -17,8 +17,9 @@ export interface IconOverflowMenuItem {
  narrowOnly?: boolean;
  disabled?: boolean;
  tooltip?: string;
-  onClick: CallableFunction;
+  action: () => any;
  warning?: boolean;
  divider?: boolean;
 }
@customElement("ha-icon-overflow-menu")
@@ -46,23 +47,23 @@ export class HaIconOverflowMenu extends LitElement {
                slot="trigger"
              ></ha-icon-button>
-              ${this.items.map(
+              ${this.items.map((item) =>
-                (item) => html`
+                item.divider
-                  <mwc-list-item
+                  ? html`<li divider role="separator"></li>`
-                    graphic="icon"
+                  : html`<mwc-list-item
-                    .disabled=${item.disabled}
+                      graphic="icon"
-                    @click=${item.action}
+                      ?disabled=${item.disabled}
-                    class=${classMap({ warning: Boolean(item.warning) })}
+                      @click=${item.action}
-                  >
+                      class=${classMap({ warning: Boolean(item.warning) })}
-                    <div slot="graphic">
+                    >
-                      <ha-svg-icon
+                      <div slot="graphic">
-                        class=${classMap({ warning: Boolean(item.warning) })}
+                        <ha-svg-icon
-                        .path=${item.path}
+                          class=${classMap({ warning: Boolean(item.warning) })}
-                      ></ha-svg-icon>
+                          .path=${item.path}
-                    </div>
+                        ></ha-svg-icon>
-                    ${item.label}
+                      </div>
-                  </mwc-list-item>
+                      ${item.label}
-                `
+                    </mwc-list-item> `
              )}
            </ha-button-menu>`
        : html`
@@ -70,6 +71,8 @@ export class HaIconOverflowMenu extends LitElement {
            ${this.items.map((item) =>
              item.narrowOnly
                ? ""
                : item.divider
                ? html`<div role="separator"></div>`
                : html`<div>
                    ${item.tooltip
                      ? html`<paper-tooltip animation-delay="0" position="left">
@@ -80,7 +83,7 @@ export class HaIconOverflowMenu extends LitElement {
                      @click=${item.action}
                      .label=${item.label}
                      .path=${item.path}
-                      .disabled=${item.disabled}
+                      ?disabled=${item.disabled}
                    ></ha-icon-button>
                  </div> `
            )}
@@ -114,6 +117,13 @@ export class HaIconOverflowMenu extends LitElement {
          display: flex;
          justify-content: flex-end;
        }
        li[role="separator"] {
          border-bottom-color: var(--divider-color);
        }
        div[role="separator"] {
          border-right: 1px solid var(--divider-color);
          width: 1px;
        }
      `,
    ];
  }
--- a/src/components/ha-icon-picker.ts
+++ b/src/components/ha-icon-picker.ts
@@ -14,6 +14,7 @@ type IconItem = {
  keywords: string[];
 };
 let iconItems: IconItem[] = [];
 let iconLoaded = false;
 // eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<IconItem> = (item) => html`<mwc-list-item
@@ -88,15 +89,16 @@ export class HaIconPicker extends LitElement {
  private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
    this._opened = ev.detail.value;
-    if (this._opened && !iconItems.length) {
+    if (this._opened && !iconLoaded) {
      const iconList = await import("../../build/mdi/iconList.json");
      iconItems = iconList.default.map((icon) => ({
        icon: `mdi:${icon.name}`,
        keywords: icon.keywords,
      }));
      iconLoaded = true;
-      (this.comboBox as any).filteredItems = iconItems;
+      this.comboBox.filteredItems = iconItems;
      Object.keys(customIcons).forEach((iconSet) => {
        this._loadCustomIconItems(iconSet);
@@ -116,7 +118,7 @@ export class HaIconPicker extends LitElement {
        keywords: icon.keywords ?? [],
      }));
      iconItems.push(...customIconItems);
-      (this.comboBox as any).filteredItems = iconItems;
+      this.comboBox.filteredItems = iconItems;
    } catch (e) {
      // eslint-disable-next-line
      console.warn(`Unable to load icon list for ${iconsetPrefix} iconset`);
@@ -165,14 +167,12 @@ export class HaIconPicker extends LitElement {
      filteredItems.push(...filteredItemsByKeywords);
      if (filteredItems.length > 0) {
-        (this.comboBox as any).filteredItems = filteredItems;
+        this.comboBox.filteredItems = filteredItems;
      } else {
-        (this.comboBox as any).filteredItems = [
+        this.comboBox.filteredItems = [{ icon: filterString, keywords: [] }];
          { icon: filterString, keywords: [] },
        ];
      }
    } else {
-      (this.comboBox as any).filteredItems = iconItems;
+      this.comboBox.filteredItems = iconItems;
    }
  }
--- a/src/components/ha-navigation-picker.ts
+++ b/src/components/ha-navigation-picker.ts
@@ -0,0 +1,221 @@
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { titleCase } from "../common/string/title-case";
 import {
  fetchConfig,
  LovelaceConfig,
  LovelaceViewConfig,
 } from "../data/lovelace";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant, PanelInfo } from "../types";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
 import "./ha-icon";
 type NavigationItem = {
  path: string;
  icon: string;
  title: string;
 };
 const DEFAULT_ITEMS: NavigationItem[] = [];
 // eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html`
  <mwc-list-item graphic="icon" .twoline=${!!item.title}>
    <ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
    <span>${item.title || item.path}</span>
    <span slot="secondary">${item.path}</span>
  </mwc-list-item>
 `;
 const createViewNavigationItem = (
  prefix: string,
  view: LovelaceViewConfig,
  index: number
 ) => ({
  path: `/${prefix}/${view.path ?? index}`,
  icon: view.icon ?? "mdi:view-compact",
  title: view.title ?? (view.path ? titleCase(view.path) : `${index}`),
 });
 const createPanelNavigationItem = (hass: HomeAssistant, panel: PanelInfo) => ({
  path: `/${panel.url_path}`,
  icon: panel.icon ?? "mdi:view-dashboard",
  title:
    panel.url_path === hass.defaultPanel
      ? hass.localize("panel.states")
      : hass.localize(`panel.${panel.title}`) ||
        panel.title ||
        (panel.url_path ? titleCase(panel.url_path) : ""),
 });
@customElement("ha-navigation-picker")
 export class HaNavigationPicker extends LitElement {
  @property() public hass?: HomeAssistant;
  @property() public label?: string;
  @property() public value?: string;
  @property() public helper?: string;
  @property({ type: Boolean }) public disabled = false;
  @property({ type: Boolean }) public required = false;
  @state() private _opened = false;
  private navigationItemsLoaded = false;
  private navigationItems: NavigationItem[] = DEFAULT_ITEMS;
  @query("ha-combo-box", true) private comboBox!: HaComboBox;
  protected render(): TemplateResult {
    return html`
      <ha-combo-box
        .hass=${this.hass}
        item-value-path="path"
        item-label-path="path"
        .value=${this._value}
        allow-custom-value
        .filteredItems=${this.navigationItems}
        .label=${this.label}
        .helper=${this.helper}
        .disabled=${this.disabled}
        .required=${this.required}
        .renderer=${rowRenderer}
        @opened-changed=${this._openedChanged}
        @value-changed=${this._valueChanged}
        @filter-changed=${this._filterChanged}
      >
      </ha-combo-box>
    `;
  }
  private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
    this._opened = ev.detail.value;
    if (this._opened && !this.navigationItemsLoaded) {
      this._loadNavigationItems();
    }
  }
  private async _loadNavigationItems() {
    this.navigationItemsLoaded = true;
    const panels = Object.entries(this.hass!.panels).map(([id, panel]) => ({
      id,
      ...panel,
    }));
    const lovelacePanels = panels.filter(
      (panel) => panel.component_name === "lovelace"
    );
    const viewConfigs = await Promise.all(
      lovelacePanels.map((panel) =>
        fetchConfig(
          this.hass!.connection,
          // path should be null to fetch default lovelace panel
          panel.url_path === "lovelace" ? null : panel.url_path,
          true
        )
          .then((config) => [panel.id, config] as [string, LovelaceConfig])
          .catch((_) => [panel.id, undefined] as [string, undefined])
      )
    );
    const panelViewConfig = new Map(viewConfigs);
    this.navigationItems = [];
    for (const panel of panels) {
      this.navigationItems.push(createPanelNavigationItem(this.hass!, panel));
      const config = panelViewConfig.get(panel.id);
      if (!config) continue;
      config.views.forEach((view, index) =>
        this.navigationItems.push(
          createViewNavigationItem(panel.url_path, view, index)
        )
      );
    }
    this.comboBox.filteredItems = this.navigationItems;
  }
  protected shouldUpdate(changedProps: PropertyValues) {
    return !this._opened || changedProps.has("_opened");
  }
  private _valueChanged(ev: PolymerChangedEvent<string>) {
    ev.stopPropagation();
    this._setValue(ev.detail.value);
  }
  private _setValue(value: string) {
    this.value = value;
    fireEvent(
      this,
      "value-changed",
      { value: this._value },
      {
        bubbles: false,
        composed: false,
      }
    );
  }
  private _filterChanged(ev: CustomEvent): void {
    const filterString = ev.detail.value.toLowerCase();
    const characterCount = filterString.length;
    if (characterCount >= 2) {
      const filteredItems: NavigationItem[] = [];
      this.navigationItems.forEach((item) => {
        if (
          item.path.toLowerCase().includes(filterString) ||
          item.title.toLowerCase().includes(filterString)
        ) {
          filteredItems.push(item);
        }
      });
      if (filteredItems.length > 0) {
        this.comboBox.filteredItems = filteredItems;
      } else {
        this.comboBox.filteredItems = [];
      }
    } else {
      this.comboBox.filteredItems = this.navigationItems;
    }
  }
  private get _value() {
    return this.value || "";
  }
  static get styles() {
    return css`
      ha-icon,
      ha-svg-icon {
        color: var(--primary-text-color);
        position: relative;
        bottom: 0px;
      }
      *[slot="prefix"] {
        margin-right: 8px;
      }
    `;
  }
 }
 declare global {
  interface HTMLElementTagNameMap {
    "ha-navigation-picker": HaNavigationPicker;
  }
 }
--- a/src/components/ha-selector/ha-selector-navigation.ts
+++ b/src/components/ha-selector/ha-selector-navigation.ts
@@ -0,0 +1,47 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { NavigationSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-navigation-picker";
@customElement("ha-selector-navigation")
 export class HaNavigationSelector extends LitElement {
  @property() public hass!: HomeAssistant;
  @property() public selector!: NavigationSelector;
  @property() public value?: string;
  @property() public label?: string;
  @property() public helper?: string;
  @property({ type: Boolean, reflect: true }) public disabled = false;
  @property({ type: Boolean }) public required = true;
  protected render() {
    return html`
      <ha-navigation-picker
        .hass=${this.hass}
        .label=${this.label}
        .value=${this.value}
        .required=${this.required}
        .disabled=${this.disabled}
        .helper=${this.helper}
        @value-changed=${this._valueChanged}
      ></ha-navigation-picker>
    `;
  }
  private _valueChanged(ev: CustomEvent) {
    fireEvent(this, "value-changed", { value: ev.detail.value });
  }
 }
 declare global {
  interface HTMLElementTagNameMap {
    "ha-selector-navigation": HaNavigationSelector;
  }
 }
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -51,8 +51,9 @@ export class HaNumberSelector extends LitElement {
            `
          : ""}
        <ha-textfield
-          inputMode="numeric"
+          .inputMode=${(this.selector.number.step || 1) % 1 !== 0
-          pattern="[0-9]+([\\.][0-9]+)?"
+            ? "decimal"
            : "numeric"}
          .label=${this.selector.number.mode !== "box" ? undefined : this.label}
          .placeholder=${this.placeholder}
          class=${classMap({ single: this.selector.number.mode === "box" })}
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -13,6 +13,7 @@ import type { HaComboBox } from "../ha-combo-box";
 import "../ha-formfield";
 import "../ha-radio";
 import "../ha-select";
 import "../ha-input-helper-text";
@customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -40,7 +41,7 @@ export class HaSelectSelector extends LitElement {
    );
    if (!this.selector.select.custom_value && this._mode === "list") {
-      if (!this.selector.select.multiple || this.required) {
+      if (!this.selector.select.multiple) {
        return html`
          <div>
            ${this.label}
@@ -50,7 +51,7 @@ export class HaSelectSelector extends LitElement {
                  <ha-radio
                    .checked=${item.value === this.value}
                    .value=${item.value}
-                    .disabled=${this.disabled}
+                    .disabled=${item.disabled || this.disabled}
                    @change=${this._valueChanged}
                  ></ha-radio>
                </ha-formfield>
@@ -63,13 +64,14 @@ export class HaSelectSelector extends LitElement {
      return html`
        <div>
-          ${this.label}${options.map(
+          ${this.label}
          ${options.map(
            (item: SelectOption) => html`
              <ha-formfield .label=${item.label}>
                <ha-checkbox
                  .checked=${this.value?.includes(item.value)}
                  .value=${item.value}
-                  .disabled=${this.disabled}
+                  .disabled=${item.disabled || this.disabled}
                  @change=${this._checkboxChanged}
                ></ha-checkbox>
              </ha-formfield>
@@ -112,7 +114,9 @@ export class HaSelectSelector extends LitElement {
          .disabled=${this.disabled}
          .required=${this.required && !value.length}
          .value=${this._filter}
-          .items=${options.filter((item) => !this.value?.includes(item.value))}
+          .items=${options.filter(
            (option) => !option.disabled && !value?.includes(option.value)
          )}
          @filter-changed=${this._filterChanged}
          @value-changed=${this._comboBoxValueChanged}
        ></ha-combo-box>
@@ -136,7 +140,7 @@ export class HaSelectSelector extends LitElement {
          .helper=${this.helper}
          .disabled=${this.disabled}
          .required=${this.required}
-          .items=${options}
+          .items=${options.filter((item) => !item.disabled)}
          .value=${this.value}
          @filter-changed=${this._filterChanged}
          @value-changed=${this._comboBoxValueChanged}
@@ -157,7 +161,9 @@ export class HaSelectSelector extends LitElement {
      >
        ${options.map(
          (item: SelectOption) => html`
-            <mwc-list-item .value=${item.value}>${item.label}</mwc-list-item>
+            <mwc-list-item .value=${item.value} .disabled=${item.disabled}
              >${item.label}</mwc-list-item
            >
          `
        )}
      </ha-select>
@@ -285,6 +291,9 @@ export class HaSelectSelector extends LitElement {
    ha-formfield {
      display: block;
    }
    mwc-list-item[disabled] {
      --mdc-theme-text-primary-on-background: var(--disabled-text-color);
    }
  `;
 }
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -98,13 +98,13 @@ export class HaTextSelector extends LitElement {
      }
      ha-icon-button {
        position: absolute;
-        top: 16px;
+        top: 10px;
-        right: 16px;
+        right: 10px;
-        --mdc-icon-button-size: 24px;
+        --mdc-icon-button-size: 36px;
        --mdc-icon-size: 20px;
        color: var(--secondary-text-color);
        inset-inline-start: initial;
-        inset-inline-end: 16px;
+        inset-inline-end: 10px;
        direction: var(--direction);
      }
    `;
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -16,6 +16,7 @@ import "./ha-selector-device";
 import "./ha-selector-duration";
 import "./ha-selector-entity";
 import "./ha-selector-file";
 import "./ha-selector-navigation";
 import "./ha-selector-number";
 import "./ha-selector-object";
 import "./ha-selector-select";
--- a/src/components/ha-service-control.ts
+++ b/src/components/ha-service-control.ts
@@ -55,12 +55,14 @@ export class HaServiceControl extends LitElement {
    data?: Record<string, any>;
  };
-  @state() private _value!: this["value"];
+  @property({ type: Boolean }) public disabled = false;
  @property({ reflect: true, type: Boolean }) public narrow!: boolean;
  @property({ type: Boolean }) public showAdvanced?: boolean;
  @state() private _value!: this["value"];
  @state() private _checkedKeys = new Set();
  @state() private _manifest?: IntegrationManifest;
@@ -227,6 +229,7 @@ export class HaServiceControl extends LitElement {
    return html`<ha-service-picker
        .hass=${this.hass}
        .value=${this._value?.service}
        .disabled=${this.disabled}
        @value-changed=${this._serviceChanged}
      ></ha-service-picker>
      <div class="description">
@@ -273,6 +276,7 @@ export class HaServiceControl extends LitElement {
              .selector=${serviceData.target
                ? { target: serviceData.target }
                : { target: {} }}
              .disabled=${this.disabled}
              @value-changed=${this._targetChanged}
              .value=${this._value?.target}
            ></ha-selector
@@ -280,6 +284,7 @@ export class HaServiceControl extends LitElement {
        : entityId
        ? html`<ha-entity-picker
            .hass=${this.hass}
            .disabled=${this.disabled}
            .value=${this._value?.data?.entity_id}
            .label=${entityId.description}
            @value-changed=${this._entityPicked}
@@ -291,6 +296,7 @@ export class HaServiceControl extends LitElement {
            .hass=${this.hass}
            .label=${this.hass.localize("ui.components.service-control.data")}
            .name=${"data"}
            .readOnly=${this.disabled}
            .defaultValue=${this._value?.data}
            @value-changed=${this._dataChanged}
          ></ha-yaml-editor>`
@@ -311,16 +317,18 @@ export class HaServiceControl extends LitElement {
                        .checked=${this._checkedKeys.has(dataField.key) ||
                        (this._value?.data &&
                          this._value.data[dataField.key] !== undefined)}
                        .disabled=${this.disabled}
                        @change=${this._checkboxChanged}
                        slot="prefix"
                      ></ha-checkbox>`}
                  <span slot="heading">${dataField.name || dataField.key}</span>
                  <span slot="description">${dataField?.description}</span>
                  <ha-selector
-                    .disabled=${showOptional &&
+                    .disabled=${this.disabled ||
-                    !this._checkedKeys.has(dataField.key) &&
+                    (showOptional &&
-                    (!this._value?.data ||
+                      !this._checkedKeys.has(dataField.key) &&
-                      this._value.data[dataField.key] === undefined)}
+                      (!this._value?.data ||
                        this._value.data[dataField.key] === undefined))}
                    .hass=${this.hass}
                    .selector=${dataField.selector}
                    .key=${dataField.key}
--- a/src/components/ha-service-picker.ts
+++ b/src/components/ha-service-picker.ts
@@ -20,6 +20,8 @@ const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
 class HaServicePicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
  @property({ type: Boolean }) public disabled = false;
  @property() public value?: string;
  @state() private _filter?: string;
@@ -35,6 +37,7 @@ class HaServicePicker extends LitElement {
          this._filter
        )}
        .value=${this.value}
        .disabled=${this.disabled}
        .renderer=${rowRenderer}
        item-value-path="service"
        item-label-path="name"
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -221,13 +221,15 @@ class HaSidebar extends SubscribeMixin(LitElement) {
  private _sortable?: SortableInstance;
  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
+    return this.hass.user?.is_admin
-      subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
+      ? [
-        this._issuesCount = repairs.issues.filter(
+          subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
-          (issue) => !issue.ignored
+            this._issuesCount = repairs.issues.filter(
-        ).length;
+              (issue) => !issue.ignored
-      }),
+            ).length;
-    ];
+          }),
        ]
      : [];
  }
  protected render() {
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -82,6 +82,16 @@ export class HaTextField extends TextFieldBase {
        direction: var(--direction);
      }
      .mdc-floating-label:not(.mdc-floating-label--float-above) {
        text-overflow: ellipsis;
        width: inherit;
        padding-right: 30px;
        padding-inline-end: 30px;
        padding-inline-start: initial;
        box-sizing: border-box;
        direction: var(--direction);
      }
      input {
        text-align: var(--text-field-text-align, start);
      }
@@ -111,7 +121,7 @@ export class HaTextField extends TextFieldBase {
        inset-inline-end: initial !important;
        transform-origin: var(--float-start);
        direction: var(--direction);
-        transform-origin: var(--float-start);
+        text-align: var(--float-start);
      }
      .mdc-text-field--with-leading-icon.mdc-text-field--filled
--- a/src/components/ha-web-rtc-player.ts
+++ b/src/components/ha-web-rtc-player.ts
@@ -7,7 +7,9 @@ import {
  TemplateResult,
 } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { handleWebRtcOffer, WebRtcAnswer } from "../data/camera";
 import { fetchWebRtcSettings } from "../data/rtsp_to_webrtc";
 import type { HomeAssistant } from "../types";
 import "./ha-alert";
@@ -34,6 +36,8 @@ class HaWebRtcPlayer extends LitElement {
  @property({ type: Boolean, attribute: "playsinline" })
  public playsInline = false;
  @property() public posterUrl!: string;
  @state() private _error?: string;
  // don't cache this, as we remove it on disconnects
@@ -54,6 +58,7 @@ class HaWebRtcPlayer extends LitElement {
        .muted=${this.muted}
        ?playsinline=${this.playsInline}
        ?controls=${this.controls}
        .poster=${this.posterUrl}
      ></video>
    `;
  }
@@ -83,7 +88,8 @@ class HaWebRtcPlayer extends LitElement {
  private async _startWebRtc(): Promise<void> {
    this._error = undefined;
-    const peerConnection = new RTCPeerConnection();
+    const configuration = await this._fetchPeerConfiguration();
    const peerConnection = new RTCPeerConnection(configuration);
    // Some cameras (such as nest) require a data channel to establish a stream
    // however, not used by any integrations.
    peerConnection.createDataChannel("dataSendChannel");
@@ -99,12 +105,25 @@ class HaWebRtcPlayer extends LitElement {
    );
    await peerConnection.setLocalDescription(offer);
    let candidates = ""; // Build an Offer SDP string with ice candidates
    const iceResolver = new Promise<void>((resolve) => {
      peerConnection.addEventListener("icecandidate", async (event) => {
        if (!event.candidate) {
          resolve(); // Gathering complete
          return;
        }
        candidates += `a=${event.candidate.candidate}\r\n`;
      });
    });
    await iceResolver;
    const offer_sdp = offer.sdp! + candidates;
    let webRtcAnswer: WebRtcAnswer;
    try {
      webRtcAnswer = await handleWebRtcOffer(
        this.hass,
        this.entityid,
-        offer.sdp!
+        offer_sdp
      );
    } catch (err: any) {
      this._error = "Failed to start WebRTC stream: " + err.message;
@@ -135,6 +154,23 @@ class HaWebRtcPlayer extends LitElement {
    this._peerConnection = peerConnection;
  }
  private async _fetchPeerConfiguration(): Promise<RTCConfiguration> {
    if (!isComponentLoaded(this.hass!, "rtsp_to_webrtc")) {
      return {};
    }
    const settings = await fetchWebRtcSettings(this.hass!);
    if (!settings || !settings.stun_server) {
      return {};
    }
    return {
      iceServers: [
        {
          urls: [`stun:${settings.stun_server!}`],
        },
      ],
    };
  }
  private _cleanUp() {
    if (this._remoteStream) {
      this._remoteStream.getTracks().forEach((track) => {
--- a/src/components/trace/trace-tab-styles.ts
+++ b/src/components/trace/trace-tab-styles.ts
@@ -28,7 +28,7 @@ export const traceTabStyles = css`
  }
  .tabs > *.active {
-    border-bottom-color: var(--accent-color);
+    border-bottom-color: var(--primary-color);
  }
  .tabs > *:focus,
--- a/src/data/application_credential.ts
+++ b/src/data/application_credential.ts
@@ -8,6 +8,10 @@ export interface ApplicationCredentialsConfig {
  integrations: Record<string, ApplicationCredentialsDomainConfig>;
 }
 export interface ApplicationCredentialsConfigEntry {
  application_credentials_id?: string;
 }
 export interface ApplicationCredential {
  id: string;
  domain: string;
@@ -21,6 +25,15 @@ export const fetchApplicationCredentialsConfig = async (hass: HomeAssistant) =>
    type: "application_credentials/config",
  });
 export const fetchApplicationCredentialsConfigEntry = async (
  hass: HomeAssistant,
  configEntryId: string
 ) =>
  hass.callWS<ApplicationCredentialsConfigEntry>({
    type: "application_credentials/config_entry",
    config_entry_id: configEntryId,
  });
 export const fetchApplicationCredentials = async (hass: HomeAssistant) =>
  hass.callWS<ApplicationCredential[]>({
    type: "application_credentials/list",
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -311,14 +311,37 @@ export const deleteAutomation = (hass: HomeAssistant, id: string) =>
 let inititialAutomationEditorData: Partial<AutomationConfig> | undefined;
-export const getAutomationConfig = (hass: HomeAssistant, id: string) =>
+export const fetchAutomationFileConfig = (hass: HomeAssistant, id: string) =>
  hass.callApi<AutomationConfig>("GET", `config/automation/config/${id}`);
 export const getAutomationStateConfig = (
  hass: HomeAssistant,
  entity_id: string
 ) =>
  hass.callWS<{ config: AutomationConfig }>({
    type: "automation/config",
    entity_id,
  });
 export const saveAutomationConfig = (
  hass: HomeAssistant,
  id: string,
  config: AutomationConfig
 ) => hass.callApi<void>("POST", `config/automation/config/${id}`, config);
 export const showAutomationEditor = (data?: Partial<AutomationConfig>) => {
  inititialAutomationEditorData = data;
  navigate("/config/automation/edit/new");
 };
 export const duplicateAutomation = (config: AutomationConfig) => {
  showAutomationEditor({
    ...config,
    id: undefined,
    alias: undefined,
  });
 };
 export const getAutomationEditorInitData = () => {
  const data = inititialAutomationEditorData;
  inititialAutomationEditorData = undefined;
--- a/src/data/automation_i18n.ts
+++ b/src/data/automation_i18n.ts
@@ -1,3 +1,4 @@
 import { formatDuration } from "../common/datetime/format_duration";
 import secondsToDuration from "../common/datetime/seconds_to_duration";
 import { ensureArray } from "../common/ensure-array";
 import { computeStateName } from "../common/entity/compute_state_name";
@@ -140,17 +141,19 @@ export const describeTrigger = (
      base += ` to ${to}`;
    }
-    if ("for" in trigger) {
+    if (trigger.for) {
-      let duration: string;
+      let duration: string | null;
      if (typeof trigger.for === "number") {
-        duration = `for ${secondsToDuration(trigger.for)!}`;
+        duration = secondsToDuration(trigger.for);
      } else if (typeof trigger.for === "string") {
-        duration = `for ${trigger.for}`;
+        duration = trigger.for;
      } else {
-        duration = `for ${JSON.stringify(trigger.for)}`;
+        duration = formatDuration(trigger.for);
      }
-      base += ` for ${duration}`;
+      if (duration) {
        base += ` for ${duration}`;
      }
    }
    return base;
@@ -186,7 +189,11 @@ export const describeTrigger = (
  // Time Trigger
  if (trigger.platform === "time" && trigger.at) {
    const at = trigger.at.includes(".")
-      ? hass.states[trigger.at] || trigger.at
+      ? `entity ${
          hass.states[trigger.at]
            ? computeStateName(hass.states[trigger.at])
            : trigger.at
        }`
      : trigger.at;
    return `When the time is equal to ${at}`;
@@ -565,6 +572,13 @@ export const describeCondition = (
    }`;
  }
  if (condition.condition === "trigger") {
    if (!condition.id) {
      return "Trigger condition";
    }
    return `When triggered by ${condition.id}`;
  }
  return `${
    condition.condition ? condition.condition.replace(/_/g, " ") : "Unknown"
  } condition`;
--- a/src/data/camera.ts
+++ b/src/data/camera.ts
@@ -6,6 +6,7 @@ import { timeCacheEntityPromiseFunc } from "../common/util/time-cache-entity-pro
 import { HomeAssistant } from "../types";
 import { getSignedPath } from "./auth";
 export const CAMERA_ORIENTATIONS = [1, 2, 3, 4, 6, 8];
 export const CAMERA_SUPPORT_ON_OFF = 1;
 export const CAMERA_SUPPORT_STREAM = 2;
@@ -26,6 +27,7 @@ export interface CameraEntity extends HassEntityBase {
 export interface CameraPreferences {
  preload_stream: boolean;
  orientation: number;
 }
 export interface CameraThumbnail {
@@ -109,11 +111,13 @@ export const fetchCameraPrefs = (hass: HomeAssistant, entityId: string) =>
    entity_id: entityId,
  });
 type ValueOf<T extends any[]> = T[number];
 export const updateCameraPrefs = (
  hass: HomeAssistant,
  entityId: string,
  prefs: {
    preload_stream?: boolean;
    orientation?: ValueOf<typeof CAMERA_ORIENTATIONS>;
  }
 ) =>
  hass.callWS<CameraPreferences>({
--- a/src/data/config_entries.ts
+++ b/src/data/config_entries.ts
@@ -1,3 +1,4 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 export interface ConfigEntry {
@@ -44,6 +45,29 @@ export const RECOVERABLE_STATES: ConfigEntry["state"][] = [
  "setup_retry",
 ];
 export interface ConfigEntryUpdate {
  // null means no update as is the current state
  type: null | "added" | "removed" | "updated";
  entry: ConfigEntry;
 }
 export const subscribeConfigEntries = (
  hass: HomeAssistant,
  callbackFunction: (message: ConfigEntryUpdate[]) => void,
  filters?: { type?: "helper" | "integration"; domain?: string }
 ): Promise<UnsubscribeFunc> => {
  const params: any = {
    type: "config_entries/subscribe",
  };
  if (filters && filters.type) {
    params.type_filter = filters.type;
  }
  return hass.connection.subscribeMessage<ConfigEntryUpdate[]>(
    (message) => callbackFunction(message),
    params
  );
 };
 export const getConfigEntries = (
  hass: HomeAssistant,
  filters?: { type?: "helper" | "integration"; domain?: string }
--- a/src/data/cover.ts
+++ b/src/data/cover.ts
@@ -4,46 +4,16 @@ import {
 } from "home-assistant-js-websocket";
 import { supportsFeature } from "../common/entity/supports-feature";
-export const SUPPORT_OPEN = 1;
+export const enum CoverEntityFeature {
-export const SUPPORT_CLOSE = 2;
+  OPEN = 1,
-export const SUPPORT_SET_POSITION = 4;
+  CLOSE = 2,
-export const SUPPORT_STOP = 8;
+  SET_POSITION = 4,
-export const SUPPORT_OPEN_TILT = 16;
+  STOP = 8,
-export const SUPPORT_CLOSE_TILT = 32;
+  OPEN_TILT = 16,
-export const SUPPORT_STOP_TILT = 64;
+  CLOSE_TILT = 32,
-export const SUPPORT_SET_TILT_POSITION = 128;
+  STOP_TILT = 64,
-
+  SET_TILT_POSITION = 128,
-export const FEATURE_CLASS_NAMES = {
+}
  4: "has-set_position",
  16: "has-open_tilt",
  32: "has-close_tilt",
  64: "has-stop_tilt",
  128: "has-set_tilt_position",
 };
 export const supportsOpen = (stateObj) =>
  supportsFeature(stateObj, SUPPORT_OPEN);
 export const supportsClose = (stateObj) =>
  supportsFeature(stateObj, SUPPORT_CLOSE);
 export const supportsSetPosition = (stateObj) =>
  supportsFeature(stateObj, SUPPORT_SET_POSITION);
 export const supportsStop = (stateObj) =>
  supportsFeature(stateObj, SUPPORT_STOP);
 export const supportsOpenTilt = (stateObj) =>
  supportsFeature(stateObj, SUPPORT_OPEN_TILT);
 export const supportsCloseTilt = (stateObj) =>
  supportsFeature(stateObj, SUPPORT_CLOSE_TILT);
 export const supportsStopTilt = (stateObj) =>
  supportsFeature(stateObj, SUPPORT_STOP_TILT);
 export const supportsSetTiltPosition = (stateObj) =>
  supportsFeature(stateObj, SUPPORT_SET_TILT_POSITION);
 export function isFullyOpen(stateObj: CoverEntity) {
  if (stateObj.attributes.current_position !== undefined) {
@@ -77,17 +47,19 @@ export function isClosing(stateObj: CoverEntity) {
 export function isTiltOnly(stateObj: CoverEntity) {
  const supportsCover =
-    supportsOpen(stateObj) || supportsClose(stateObj) || supportsStop(stateObj);
+    supportsFeature(stateObj, CoverEntityFeature.OPEN) ||
    supportsFeature(stateObj, CoverEntityFeature.CLOSE) ||
    supportsFeature(stateObj, CoverEntityFeature.STOP);
  const supportsTilt =
-    supportsOpenTilt(stateObj) ||
+    supportsFeature(stateObj, CoverEntityFeature.OPEN_TILT) ||
-    supportsCloseTilt(stateObj) ||
+    supportsFeature(stateObj, CoverEntityFeature.CLOSE_TILT) ||
-    supportsStopTilt(stateObj);
+    supportsFeature(stateObj, CoverEntityFeature.STOP_TILT);
  return supportsTilt && !supportsCover;
 }
 interface CoverEntityAttributes extends HassEntityAttributeBase {
-  current_position: number;
+  current_position?: number;
-  current_tilt_position: number;
+  current_tilt_position?: number;
 }
 export interface CoverEntity extends HassEntityBase {
--- a/src/data/energy.ts
+++ b/src/data/energy.ts
@@ -20,7 +20,8 @@ import {
  getStatisticMetadata,
  Statistics,
  StatisticsMetaData,
-} from "./history";
+  StatisticsUnitConfiguration,
 } from "./recorder";
 const energyCollectionKeys: (string | undefined)[] = [];
@@ -28,7 +29,6 @@ export const emptyFlowFromGridSourceEnergyPreference =
  (): FlowFromGridSourceEnergyPreference => ({
    stat_energy_from: "",
    stat_cost: null,
    entity_energy_from: null,
    entity_energy_price: null,
    number_energy_price: null,
  });
@@ -37,7 +37,6 @@ export const emptyFlowToGridSourceEnergyPreference =
  (): FlowToGridSourceEnergyPreference => ({
    stat_energy_to: "",
    stat_compensation: null,
    entity_energy_to: null,
    entity_energy_price: null,
    number_energy_price: null,
  });
@@ -67,7 +66,6 @@ export const emptyGasEnergyPreference = (): GasSourceTypeEnergyPreference => ({
  type: "gas",
  stat_energy_from: "",
  stat_cost: null,
  entity_energy_from: null,
  entity_energy_price: null,
  number_energy_price: null,
 });
@@ -92,7 +90,6 @@ export interface FlowFromGridSourceEnergyPreference {
  stat_cost: string | null;
  // Can be used to generate costs if stat_cost omitted
  entity_energy_from: string | null;
  entity_energy_price: string | null;
  number_energy_price: number | null;
 }
@@ -104,8 +101,7 @@ export interface FlowToGridSourceEnergyPreference {
  // $ meter
  stat_compensation: string | null;
-  // Can be used to generate costs if stat_cost omitted
+  // Can be used to generate costs if stat_compensation omitted
  entity_energy_to: string | null;
  entity_energy_price: string | null;
  number_energy_price: number | null;
 }
@@ -141,7 +137,6 @@ export interface GasSourceTypeEnergyPreference {
  stat_cost: string | null;
  // Can be used to generate costs if stat_cost omitted
  entity_energy_from: string | null;
  entity_energy_price: string | null;
  number_energy_price: number | null;
  unit_of_measurement?: string | null;
@@ -358,12 +353,19 @@ const getEnergyData = async (
  // Subtract 1 hour from start to get starting point data
  const startMinHour = addHours(start, -1);
  const lengthUnit = hass.config.unit_system.length || "";
  const units: StatisticsUnitConfiguration = {
    energy: "kWh",
    volume: lengthUnit === "km" ? "m³" : "ft³",
  };
  const stats = await fetchStatistics(
    hass!,
    startMinHour,
    end,
    statIDs,
-    period
+    period,
    units
  );
  let statsCompare;
@@ -385,7 +387,8 @@ const getEnergyData = async (
      compareStartMinHour,
      endCompare,
      statIDs,
-      period
+      period,
      units
    );
  }
@@ -597,20 +600,14 @@ export const getEnergySolarForecasts = (hass: HomeAssistant) =>
    type: "energy/solar_forecast",
  });
-export const ENERGY_GAS_VOLUME_UNITS = ["m³"];
+const energyGasUnitClass = ["volume", "energy"] as const;
-export const ENERGY_GAS_ENERGY_UNITS = ["kWh"];
+export type EnergyGasUnitClass = typeof energyGasUnitClass[number];
 export const ENERGY_GAS_UNITS = [
  ...ENERGY_GAS_VOLUME_UNITS,
  ...ENERGY_GAS_ENERGY_UNITS,
 ];
-export type EnergyGasUnit = "volume" | "energy";
+export const getEnergyGasUnitClass = (
 export const getEnergyGasUnitCategory = (
  prefs: EnergyPreferences,
  statisticsMetaData: Record<string, StatisticsMetaData> = {},
  excludeSource?: string
-): EnergyGasUnit | undefined => {
+): EnergyGasUnitClass | undefined => {
  for (const source of prefs.energy_sources) {
    if (source.type !== "gas") {
      continue;
@@ -619,29 +616,29 @@ export const getEnergyGasUnitCategory = (
      continue;
    }
    const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
-    if (statisticIdWithMeta) {
+    if (
-      return ENERGY_GAS_VOLUME_UNITS.includes(
+      energyGasUnitClass.includes(
-        statisticIdWithMeta.display_unit_of_measurement
+        statisticIdWithMeta?.unit_class as EnergyGasUnitClass
      )
-        ? "volume"
+    ) {
-        : "energy";
+      return statisticIdWithMeta.unit_class as EnergyGasUnitClass;
    }
  }
  return undefined;
 };
 export const getEnergyGasUnit = (
  hass: HomeAssistant,
  prefs: EnergyPreferences,
  statisticsMetaData: Record<string, StatisticsMetaData> = {}
 ): string | undefined => {
-  for (const source of prefs.energy_sources) {
+  const unitClass = getEnergyGasUnitClass(prefs, statisticsMetaData);
-    if (source.type !== "gas") {
+  if (unitClass === undefined) {
-      continue;
+    return undefined;
    }
    const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
    if (statisticIdWithMeta?.display_unit_of_measurement) {
      return statisticIdWithMeta.display_unit_of_measurement;
    }
  }
-  return undefined;
+  return unitClass === "energy"
    ? "kWh"
    : hass.config.unit_system.length === "km"
    ? "m³"
    : "ft³";
 };
--- a/src/data/entity_registry.ts
+++ b/src/data/entity_registry.ts
@@ -20,10 +20,10 @@ export interface EntityRegistryEntry {
  entity_category: "config" | "diagnostic" | null;
  has_entity_name: boolean;
  original_name?: string;
  unique_id: string;
 }
 export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
  unique_id: string;
  capabilities: Record<string, unknown>;
  original_icon?: string;
  device_class?: string;
@@ -61,7 +61,7 @@ export interface EntityRegistryEntryUpdateParams {
  hidden_by: string | null;
  new_entity_id?: string;
  options_domain?: string;
-  options?: SensorEntityOptions | WeatherEntityOptions;
+  options?: SensorEntityOptions | NumberEntityOptions | WeatherEntityOptions;
 }
 export const findBatteryEntity = (
@@ -93,7 +93,10 @@ export const computeEntityRegistryName = (
    return entry.name;
  }
  const state = hass.states[entry.entity_id];
-  return state ? computeStateName(state) : entry.entity_id;
+  if (state) {
    return computeStateName(state);
  }
  return entry.original_name ? entry.original_name : entry.entity_id;
 };
 export const getExtendedEntityRegistryEntry = (
--- a/src/data/history.ts
+++ b/src/data/history.ts
@@ -1,10 +1,7 @@
 import { HassEntities, HassEntity } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDisplayFromEntityAttributes } from "../common/entity/compute_state_display";
-import {
+import { computeStateNameFromEntityAttributes } from "../common/entity/compute_state_name";
  computeStateName,
  computeStateNameFromEntityAttributes,
 } from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import { FrontendLocaleData } from "./translation";
@@ -63,87 +60,6 @@ export interface HistoryResult {
  timeline: TimelineEntity[];
 }
 export type StatisticType = "sum" | "min" | "max" | "mean";
 export interface Statistics {
  [statisticId: string]: StatisticValue[];
 }
 export interface StatisticValue {
  statistic_id: string;
  start: string;
  end: string;
  last_reset: string | null;
  max: number | null;
  mean: number | null;
  min: number | null;
  sum: number | null;
  state: number | null;
 }
 export interface StatisticsMetaData {
  display_unit_of_measurement: string;
  statistics_unit_of_measurement: string;
  statistic_id: string;
  source: string;
  name?: string | null;
  has_sum: boolean;
  has_mean: boolean;
 }
 export type StatisticsValidationResult =
  | StatisticsValidationResultNoState
  | StatisticsValidationResultEntityNotRecorded
  | StatisticsValidationResultEntityNoLongerRecorded
  | StatisticsValidationResultUnsupportedStateClass
  | StatisticsValidationResultUnitsChanged
  | StatisticsValidationResultUnsupportedUnitMetadata
  | StatisticsValidationResultUnsupportedUnitState;
 export interface StatisticsValidationResultNoState {
  type: "no_state";
  data: { statistic_id: string };
 }
 export interface StatisticsValidationResultEntityNoLongerRecorded {
  type: "entity_no_longer_recorded";
  data: { statistic_id: string };
 }
 export interface StatisticsValidationResultEntityNotRecorded {
  type: "entity_not_recorded";
  data: { statistic_id: string };
 }
 export interface StatisticsValidationResultUnsupportedStateClass {
  type: "unsupported_state_class";
  data: { statistic_id: string; state_class: string };
 }
 export interface StatisticsValidationResultUnitsChanged {
  type: "units_changed";
  data: { statistic_id: string; state_unit: string; metadata_unit: string };
 }
 export interface StatisticsValidationResultUnsupportedUnitMetadata {
  type: "unsupported_unit_metadata";
  data: {
    statistic_id: string;
    device_class: string;
    metadata_unit: string;
    supported_unit: string;
  };
 }
 export interface StatisticsValidationResultUnsupportedUnitState {
  type: "unsupported_unit_state";
  data: { statistic_id: string; device_class: string; metadata_unit: string };
 }
 export interface StatisticsValidationResults {
  [statisticId: string]: StatisticsValidationResult[];
 }
 export interface HistoryStates {
  [entityId: string]: EntityHistoryState[];
 }
@@ -449,132 +365,3 @@ export const computeHistory = (
  return { line: unitStates, timeline: timelineDevices };
 };
 // Statistics
 export const getStatisticIds = (
  hass: HomeAssistant,
  statistic_type?: "mean" | "sum"
 ) =>
  hass.callWS<StatisticsMetaData[]>({
    type: "history/list_statistic_ids",
    statistic_type,
  });
 export const getStatisticMetadata = (
  hass: HomeAssistant,
  statistic_ids?: string[]
 ) =>
  hass.callWS<StatisticsMetaData[]>({
    type: "recorder/get_statistics_metadata",
    statistic_ids,
  });
 export const fetchStatistics = (
  hass: HomeAssistant,
  startTime: Date,
  endTime?: Date,
  statistic_ids?: string[],
  period: "5minute" | "hour" | "day" | "month" = "hour"
 ) =>
  hass.callWS<Statistics>({
    type: "history/statistics_during_period",
    start_time: startTime.toISOString(),
    end_time: endTime?.toISOString(),
    statistic_ids,
    period,
  });
 export const validateStatistics = (hass: HomeAssistant) =>
  hass.callWS<StatisticsValidationResults>({
    type: "recorder/validate_statistics",
  });
 export const updateStatisticsMetadata = (
  hass: HomeAssistant,
  statistic_id: string,
  unit_of_measurement: string | null
 ) =>
  hass.callWS<void>({
    type: "recorder/update_statistics_metadata",
    statistic_id,
    unit_of_measurement,
  });
 export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
  hass.callWS<void>({
    type: "recorder/clear_statistics",
    statistic_ids,
  });
 export const calculateStatisticSumGrowth = (
  values: StatisticValue[]
 ): number | null => {
  if (!values || values.length < 2) {
    return null;
  }
  const endSum = values[values.length - 1].sum;
  if (endSum === null) {
    return null;
  }
  const startSum = values[0].sum;
  if (startSum === null) {
    return endSum;
  }
  return endSum - startSum;
 };
 export const calculateStatisticsSumGrowth = (
  data: Statistics,
  stats: string[]
 ): number | null => {
  let totalGrowth: number | null = null;
  for (const stat of stats) {
    if (!(stat in data)) {
      continue;
    }
    const statGrowth = calculateStatisticSumGrowth(data[stat]);
    if (statGrowth === null) {
      continue;
    }
    if (totalGrowth === null) {
      totalGrowth = statGrowth;
    } else {
      totalGrowth += statGrowth;
    }
  }
  return totalGrowth;
 };
 export const statisticsHaveType = (
  stats: StatisticValue[],
  type: StatisticType
 ) => stats.some((stat) => stat[type] !== null);
 export const adjustStatisticsSum = (
  hass: HomeAssistant,
  statistic_id: string,
  start_time: string,
  adjustment: number
 ): Promise<void> =>
  hass.callWS({
    type: "recorder/adjust_sum_statistics",
    statistic_id,
    start_time,
    adjustment,
  });
 export const getStatisticLabel = (
  hass: HomeAssistant,
  statisticsId: string,
  statisticsMetaData: StatisticsMetaData | undefined
 ): string => {
  const entity = hass.states[statisticsId];
  if (entity) {
    return computeStateName(entity);
  }
  return statisticsMetaData?.name || statisticsId;
 };
--- a/src/data/integrations.ts
+++ b/src/data/integrations.ts
@@ -0,0 +1,37 @@
 import { HomeAssistant } from "../types";
 export type IotStandards = "zwave" | "zigbee" | "homekit" | "matter";
 export interface Integration {
  name?: string;
  config_flow?: boolean;
  integrations?: Integrations;
  iot_standards?: IotStandards[];
  is_built_in?: boolean;
  iot_class?: string;
 }
 export interface Integrations {
  [domain: string]: Integration;
 }
 export interface IntegrationDescriptions {
  core: {
    integration: Integrations;
    hardware: Integrations;
    helper: Integrations;
    translated_name: string[];
  };
  custom: {
    integration: Integrations;
    hardware: Integrations;
    helper: Integrations;
  };
 }
 export const getIntegrationDescriptions = (
  hass: HomeAssistant
 ): Promise<IntegrationDescriptions> =>
  hass.callWS<IntegrationDescriptions>({
    type: "integration/descriptions",
  });
--- a/src/data/light.ts
+++ b/src/data/light.ts
@@ -3,76 +3,83 @@ import {
  HassEntityBase,
 } from "home-assistant-js-websocket";
-export const enum LightColorModes {
+export const enum LightEntityFeature {
  EFFECT = 4,
  FLASH = 8,
  TRANSITION = 32,
 }
 export const enum LightColorMode {
  UNKNOWN = "unknown",
  ONOFF = "onoff",
  BRIGHTNESS = "brightness",
  COLOR_TEMP = "color_temp",
  WHITE = "white",
  HS = "hs",
  XY = "xy",
  RGB = "rgb",
  RGBW = "rgbw",
  RGBWW = "rgbww",
  WHITE = "white",
 }
 const modesSupportingColor = [
-  LightColorModes.HS,
+  LightColorMode.HS,
-  LightColorModes.XY,
+  LightColorMode.XY,
-  LightColorModes.RGB,
+  LightColorMode.RGB,
-  LightColorModes.RGBW,
+  LightColorMode.RGBW,
-  LightColorModes.RGBWW,
+  LightColorMode.RGBWW,
 ];
-const modesSupportingDimming = [
+const modesSupportingBrightness = [
  ...modesSupportingColor,
-  LightColorModes.COLOR_TEMP,
+  LightColorMode.COLOR_TEMP,
-  LightColorModes.BRIGHTNESS,
+  LightColorMode.BRIGHTNESS,
  LightColorMode.WHITE,
 ];
 export const SUPPORT_EFFECT = 4;
 export const SUPPORT_FLASH = 8;
 export const SUPPORT_TRANSITION = 32;
 export const lightSupportsColorMode = (
  entity: LightEntity,
-  mode: LightColorModes
+  mode: LightColorMode
-) => entity.attributes.supported_color_modes?.includes(mode);
+) => entity.attributes.supported_color_modes?.includes(mode) || false;
 export const lightIsInColorMode = (entity: LightEntity) =>
-  modesSupportingColor.includes(entity.attributes.color_mode);
+  (entity.attributes.color_mode &&
    modesSupportingColor.includes(entity.attributes.color_mode)) ||
  false;
 export const lightSupportsColor = (entity: LightEntity) =>
  entity.attributes.supported_color_modes?.some((mode) =>
    modesSupportingColor.includes(mode)
  );
-export const lightSupportsDimming = (entity: LightEntity) =>
+export const lightSupportsBrightness = (entity: LightEntity) =>
  entity.attributes.supported_color_modes?.some((mode) =>
-    modesSupportingDimming.includes(mode)
+    modesSupportingBrightness.includes(mode)
-  );
+  ) || false;
-export const getLightCurrentModeRgbColor = (entity: LightEntity): number[] =>
+export const getLightCurrentModeRgbColor = (
-  entity.attributes.color_mode === LightColorModes.RGBWW
+  entity: LightEntity
 ): number[] | undefined =>
  entity.attributes.color_mode === LightColorMode.RGBWW
    ? entity.attributes.rgbww_color
-    : entity.attributes.color_mode === LightColorModes.RGBW
+    : entity.attributes.color_mode === LightColorMode.RGBW
    ? entity.attributes.rgbw_color
    : entity.attributes.rgb_color;
 interface LightEntityAttributes extends HassEntityAttributeBase {
-  min_mireds: number;
+  min_mireds?: number;
-  max_mireds: number;
+  max_mireds?: number;
-  friendly_name: string;
+  brightness?: number;
-  brightness: number;
+  xy_color?: [number, number];
-  hs_color: [number, number];
+  hs_color?: [number, number];
-  rgb_color: [number, number, number];
+  color_temp?: number;
-  rgbw_color: [number, number, number, number];
+  rgb_color?: [number, number, number];
-  rgbww_color: [number, number, number, number, number];
+  rgbw_color?: [number, number, number, number];
-  color_temp: number;
+  rgbww_color?: [number, number, number, number, number];
  effect?: string;
-  effect_list: string[] | null;
+  effect_list?: string[] | null;
-  supported_color_modes: LightColorModes[];
+  supported_color_modes?: LightColorMode[];
-  color_mode: LightColorModes;
+  color_mode?: LightColorMode;
 }
 export interface LightEntity extends HassEntityBase {
--- a/src/data/lovelace.ts
+++ b/src/data/lovelace.ts
@@ -93,6 +93,8 @@ export interface LovelaceViewConfig {
  panel?: boolean;
  background?: string;
  visible?: boolean | ShowViewConfig[];
  subview?: boolean;
  back_path?: string;
 }
 export interface LovelaceViewElement extends HTMLElement {
--- a/src/data/recorder.ts
+++ b/src/data/recorder.ts
@@ -0,0 +1,252 @@
 import { computeStateName } from "../common/entity/compute_state_name";
 import { HomeAssistant } from "../types";
 export type StatisticType = "state" | "sum" | "min" | "max" | "mean";
 export interface Statistics {
  [statisticId: string]: StatisticValue[];
 }
 export interface StatisticValue {
  statistic_id: string;
  start: string;
  end: string;
  last_reset: string | null;
  max: number | null;
  mean: number | null;
  min: number | null;
  sum: number | null;
  state: number | null;
 }
 export interface StatisticsMetaData {
  statistics_unit_of_measurement: string | null;
  statistic_id: string;
  source: string;
  name?: string | null;
  has_sum: boolean;
  has_mean: boolean;
  unit_class: string | null;
 }
 export type StatisticsValidationResult =
  | StatisticsValidationResultNoState
  | StatisticsValidationResultEntityNotRecorded
  | StatisticsValidationResultEntityNoLongerRecorded
  | StatisticsValidationResultUnsupportedStateClass
  | StatisticsValidationResultUnitsChanged;
 export interface StatisticsValidationResultNoState {
  type: "no_state";
  data: { statistic_id: string };
 }
 export interface StatisticsValidationResultEntityNoLongerRecorded {
  type: "entity_no_longer_recorded";
  data: { statistic_id: string };
 }
 export interface StatisticsValidationResultEntityNotRecorded {
  type: "entity_not_recorded";
  data: { statistic_id: string };
 }
 export interface StatisticsValidationResultUnsupportedStateClass {
  type: "unsupported_state_class";
  data: { statistic_id: string; state_class: string };
 }
 export interface StatisticsValidationResultUnitsChanged {
  type: "units_changed";
  data: {
    statistic_id: string;
    state_unit: string;
    metadata_unit: string;
    supported_unit: string;
  };
 }
 export interface StatisticsUnitConfiguration {
  energy?: "Wh" | "kWh" | "MWh";
  power?: "W" | "kW";
  pressure?:
    | "Pa"
    | "hPa"
    | "kPa"
    | "bar"
    | "cbar"
    | "mbar"
    | "inHg"
    | "psi"
    | "mmHg";
  temperature?: "°C" | "°F" | "K";
  volume?: "ft³" | "m³";
 }
 export interface StatisticsValidationResults {
  [statisticId: string]: StatisticsValidationResult[];
 }
 export const getStatisticIds = (
  hass: HomeAssistant,
  statistic_type?: "mean" | "sum"
 ) =>
  hass.callWS<StatisticsMetaData[]>({
    type: "recorder/list_statistic_ids",
    statistic_type,
  });
 export const getStatisticMetadata = (
  hass: HomeAssistant,
  statistic_ids?: string[]
 ) =>
  hass.callWS<StatisticsMetaData[]>({
    type: "recorder/get_statistics_metadata",
    statistic_ids,
  });
 export const fetchStatistics = (
  hass: HomeAssistant,
  startTime: Date,
  endTime?: Date,
  statistic_ids?: string[],
  period: "5minute" | "hour" | "day" | "month" = "hour",
  units?: StatisticsUnitConfiguration
 ) =>
  hass.callWS<Statistics>({
    type: "recorder/statistics_during_period",
    start_time: startTime.toISOString(),
    end_time: endTime?.toISOString(),
    statistic_ids,
    period,
    units,
  });
 export const validateStatistics = (hass: HomeAssistant) =>
  hass.callWS<StatisticsValidationResults>({
    type: "recorder/validate_statistics",
  });
 export const updateStatisticsMetadata = (
  hass: HomeAssistant,
  statistic_id: string,
  unit_of_measurement: string | null
 ) =>
  hass.callWS<void>({
    type: "recorder/update_statistics_metadata",
    statistic_id,
    unit_of_measurement,
  });
 export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
  hass.callWS<void>({
    type: "recorder/clear_statistics",
    statistic_ids,
  });
 export const calculateStatisticSumGrowth = (
  values: StatisticValue[]
 ): number | null => {
  if (!values || values.length < 2) {
    return null;
  }
  const endSum = values[values.length - 1].sum;
  if (endSum === null) {
    return null;
  }
  const startSum = values[0].sum;
  if (startSum === null) {
    return endSum;
  }
  return endSum - startSum;
 };
 export const calculateStatisticsSumGrowth = (
  data: Statistics,
  stats: string[]
 ): number | null => {
  let totalGrowth: number | null = null;
  for (const stat of stats) {
    if (!(stat in data)) {
      continue;
    }
    const statGrowth = calculateStatisticSumGrowth(data[stat]);
    if (statGrowth === null) {
      continue;
    }
    if (totalGrowth === null) {
      totalGrowth = statGrowth;
    } else {
      totalGrowth += statGrowth;
    }
  }
  return totalGrowth;
 };
 export const statisticsHaveType = (
  stats: StatisticValue[],
  type: StatisticType
 ) => stats.some((stat) => stat[type] !== null);
 const mean_stat_types: readonly StatisticType[] = ["mean", "min", "max"];
 const sum_stat_types: readonly StatisticType[] = ["sum"];
 export const statisticsMetaHasType = (
  metadata: StatisticsMetaData,
  type: StatisticType
 ) => {
  if (mean_stat_types.includes(type) && metadata.has_mean) {
    return true;
  }
  if (sum_stat_types.includes(type) && metadata.has_sum) {
    return true;
  }
  return false;
 };
 export const adjustStatisticsSum = (
  hass: HomeAssistant,
  statistic_id: string,
  start_time: string,
  adjustment: number,
  adjustment_unit_of_measurement: string | null
 ): Promise<void> =>
  hass.callWS({
    type: "recorder/adjust_sum_statistics",
    statistic_id,
    start_time,
    adjustment,
    adjustment_unit_of_measurement,
  });
 export const getStatisticLabel = (
  hass: HomeAssistant,
  statisticsId: string,
  statisticsMetaData: StatisticsMetaData | undefined
 ): string => {
  const entity = hass.states[statisticsId];
  if (entity) {
    return computeStateName(entity);
  }
  return statisticsMetaData?.name || statisticsId;
 };
 export const getDisplayUnit = (
  hass: HomeAssistant,
  statisticsId: string | undefined,
  statisticsMetaData: StatisticsMetaData | undefined
 ): string | null | undefined => {
  let unit: string | undefined;
  if (statisticsId) {
    unit = hass.states[statisticsId]?.attributes.unit_of_measurement;
  }
  return unit === undefined
    ? statisticsMetaData?.statistics_unit_of_measurement
    : unit;
 };
 export const isExternalStatistic = (statisticsId: string): boolean =>
  statisticsId.includes(":");
--- a/src/data/rtsp_to_webrtc.ts
+++ b/src/data/rtsp_to_webrtc.ts
@@ -0,0 +1,10 @@
 import { HomeAssistant } from "../types";
 export interface WebRtcSettings {
  stun_server?: string;
 }
 export const fetchWebRtcSettings = async (hass: HomeAssistant) =>
  hass.callWS<WebRtcSettings>({
    type: "rtsp_to_webrtc/get_settings",
  });
--- a/src/data/scene.ts
+++ b/src/data/scene.ts
@@ -14,8 +14,11 @@ export const SCENE_IGNORED_DOMAINS = [
  "input_button",
  "persistent_notification",
  "person",
  "scene",
  "schedule",
  "sensor",
  "sun",
  "update",
  "weather",
  "zone",
 ];
--- a/src/data/script.ts
+++ b/src/data/script.ts
@@ -15,7 +15,6 @@ import {
  Describe,
  boolean,
 } from "superstruct";
 import { computeObjectId } from "../common/entity/compute_object_id";
 import { navigate } from "../common/navigate";
 import { HomeAssistant } from "../types";
 import {
@@ -278,9 +277,9 @@ export type ActionType = keyof ActionTypes;
 export const triggerScript = (
  hass: HomeAssistant,
-  entityId: string,
+  scriptId: string,
  variables?: Record<string, unknown>
-) => hass.callService("script", computeObjectId(entityId), variables);
+) => hass.callService("script", scriptId, variables);
 export const canRun = (state: ScriptEntity) => {
  if (state.state === "off") {
@@ -301,6 +300,15 @@ export const deleteScript = (hass: HomeAssistant, objectId: string) =>
 let inititialScriptEditorData: Partial<ScriptConfig> | undefined;
 export const fetchScriptFileConfig = (hass: HomeAssistant, objectId: string) =>
  hass.callApi<ScriptConfig>("GET", `config/script/config/${objectId}`);
 export const getScriptStateConfig = (hass: HomeAssistant, entity_id: string) =>
  hass.callWS<{ config: ScriptConfig }>({
    type: "script/config",
    entity_id,
  });
 export const showScriptEditor = (data?: Partial<ScriptConfig>) => {
  inititialScriptEditorData = data;
  navigate("/config/script/edit/new");
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -21,6 +21,7 @@ export type Selector =
  | IconSelector
  | LocationSelector
  | MediaSelector
  | NavigationSelector
  | NumberSelector
  | ObjectSelector
  | SelectSelector
@@ -171,6 +172,11 @@ export interface MediaSelectorValue {
  };
 }
 export interface NavigationSelector {
  // eslint-disable-next-line @typescript-eslint/ban-types
  navigation: {};
 }
 export interface NumberSelector {
  number: {
    min?: number;
@@ -189,6 +195,7 @@ export interface ObjectSelector {
 export interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
 }
 export interface SelectSelector {
--- a/src/data/supported_brands.ts
+++ b/src/data/supported_brands.ts
@@ -1,6 +1,13 @@
 import { SupportedBrandObj } from "../dialogs/config-flow/step-flow-pick-handler";
 import type { HomeAssistant } from "../types";
 export interface SupportedBrandObj {
  name: string;
  slug: string;
  is_add?: boolean;
  is_helper?: boolean;
  supported_flows: string[];
 }
 export type SupportedBrandHandler = Record<string, string>;
 export const getSupportedBrands = (hass: HomeAssistant) =>
--- a/src/data/zha.ts
+++ b/src/data/zha.ts
@@ -309,7 +309,7 @@ export const fetchCommandsForCluster = (
    cluster_type: clusterType,
  });
-export const fetchClustersForZhaNode = (
+export const fetchClustersForZhaDevice = (
  hass: HomeAssistant,
  ieeeAddress: string
 ): Promise<Cluster[]> =>
--- a/src/data/zwave_js.ts
+++ b/src/data/zwave_js.ts
@@ -85,6 +85,13 @@ enum Protocols {
  ZWaveLongRange = 1,
 }
 enum NodeType {
  Controller,
  /** @deprecated Use `NodeType["End Node"]` instead */
  "Routing End Node",
  "End Node" = 1,
 }
 export enum FirmwareUpdateStatus {
  Error_Timeout = -1,
  Error_Checksum = 0,
@@ -142,12 +149,12 @@ export interface ZWaveJSController {
  sdk_version: string;
  type: number;
  own_node_id: number;
-  is_secondary: boolean;
+  is_primary: boolean;
  is_using_home_id_from_other_network: boolean;
  is_sis_present: boolean;
  was_real_primary: boolean;
-  is_static_update_controller: boolean;
+  is_suc: boolean;
-  is_slave: boolean;
+  node_type: NodeType;
  firmware_version: string;
  manufacturer_id: number;
  product_id: number;
@@ -299,14 +306,19 @@ export interface ZWaveJSNodeStatusUpdatedMessage {
 export interface ZWaveJSNodeFirmwareUpdateProgressMessage {
  event: "firmware update progress";
  current_file: number;
  total_files: number;
  sent_fragments: number;
  total_fragments: number;
  progress: number;
 }
 export interface ZWaveJSNodeFirmwareUpdateFinishedMessage {
  event: "firmware update finished";
  status: FirmwareUpdateStatus;
-  wait_time: number;
+  success: boolean;
  wait_time?: number;
  reinterview: boolean;
 }
 export type ZWaveJSNodeFirmwareUpdateCapabilities =
--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
@@ -170,7 +170,6 @@ class DialogConfigEntrySystemOptions extends LitElement {
          ),
        });
      }
      this._params!.entryUpdated(result.config_entry);
      this.closeDialog();
    } catch (err: any) {
      this._error = err.message || "Unknown error";
--- a/src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts
@@ -5,7 +5,6 @@ import { IntegrationManifest } from "../../data/integration";
 export interface ConfigEntrySystemOptionsDialogParams {
  entry: ConfigEntry;
  manifest?: IntegrationManifest;
  entryUpdated(entry: ConfigEntry): void;
 }
 export const loadConfigEntrySystemOptionsDialog = () =>
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -18,9 +18,7 @@ import {
  AreaRegistryEntry,
  subscribeAreaRegistry,
 } from "../../data/area_registry";
 import { fetchConfigFlowInProgress } from "../../data/config_flow";
 import {
  DataEntryFlowProgress,
  DataEntryFlowStep,
  subscribeDataEntryFlowProgressed,
 } from "../../data/data_entry_flow";
@@ -28,14 +26,12 @@ import {
  DeviceRegistryEntry,
  subscribeDeviceRegistry,
 } from "../../data/device_registry";
 import { fetchIntegrationManifest } from "../../data/integration";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import {
  DataEntryFlowDialogParams,
  FlowHandlers,
  LoadingReason,
 } from "./show-dialog-data-entry-flow";
 import "./step-flow-abort";
@@ -44,8 +40,6 @@ import "./step-flow-external";
 import "./step-flow-form";
 import "./step-flow-loading";
 import "./step-flow-menu";
 import "./step-flow-pick-flow";
 import "./step-flow-pick-handler";
 import "./step-flow-progress";
 let instance = 0;
@@ -86,12 +80,8 @@ class DataEntryFlowDialog extends LitElement {
  @state() private _areas?: AreaRegistryEntry[];
  @state() private _handlers?: FlowHandlers;
  @state() private _handler?: string;
  @state() private _flowsInProgress?: DataEntryFlowProgress[];
  private _unsubAreas?: UnsubscribeFunc;
  private _unsubDevices?: UnsubscribeFunc;
@@ -102,15 +92,39 @@ class DataEntryFlowDialog extends LitElement {
    this._params = params;
    this._instance = instance++;
-    if (params.startFlowHandler) {
+    const curInstance = this._instance;
-      this._checkFlowsInProgress(params.startFlowHandler);
+    let step: DataEntryFlowStep;
      return;
    }
-    if (params.continueFlowId) {
+    if (params.startFlowHandler) {
      this._loading = "loading_flow";
      this._handler = params.startFlowHandler;
      try {
        step = await this._params!.flowConfig.createFlow(
          this.hass,
          params.startFlowHandler
        );
      } catch (err: any) {
        this.closeDialog();
        let message = err.message || err.body || "Unknown error";
        if (typeof message !== "string") {
          message = JSON.stringify(message);
        }
        showAlertDialog(this, {
          title: this.hass.localize(
            "ui.panel.config.integrations.config_flow.error"
          ),
          text: `${this.hass.localize(
            "ui.panel.config.integrations.config_flow.could_not_load"
          )}: ${message}`,
        });
        return;
      }
      // Happens if second showDialog called
      if (curInstance !== this._instance) {
        return;
      }
    } else if (params.continueFlowId) {
      this._loading = "loading_flow";
      const curInstance = this._instance;
      let step: DataEntryFlowStep;
      try {
        step = await params.flowConfig.fetchFlow(
          this.hass,
@@ -132,32 +146,17 @@ class DataEntryFlowDialog extends LitElement {
        });
        return;
      }
-
+    } else {
      // Happens if second showDialog called
      if (curInstance !== this._instance) {
        return;
      }
      this._processStep(step);
      this._loading = undefined;
      return;
    }
-    // Create a new config flow. Show picker
+    // Happens if second showDialog called
-    if (!params.flowConfig.getFlowHandlers) {
+    if (curInstance !== this._instance) {
-      throw new Error("No getFlowHandlers defined in flow config");
+      return;
    }
    this._step = null;
-    // We only load the handlers once
+    this._processStep(step);
-    if (this._handlers === undefined) {
+    this._loading = undefined;
      this._loading = "loading_handlers";
      try {
        this._handlers = await params.flowConfig.getFlowHandlers(this.hass);
      } finally {
        this._loading = undefined;
      }
    }
  }
  public closeDialog() {
@@ -185,7 +184,6 @@ class DataEntryFlowDialog extends LitElement {
    this._step = undefined;
    this._params = undefined;
    this._devices = undefined;
    this._flowsInProgress = undefined;
    this._handler = undefined;
    if (this._unsubAreas) {
      this._unsubAreas();
@@ -218,15 +216,12 @@ class DataEntryFlowDialog extends LitElement {
        hideActions
      >
        <div>
-          ${this._loading ||
+          ${this._loading || this._step === null
          (this._step === null &&
            this._handlers === undefined &&
            this._handler === undefined)
            ? html`
                <step-flow-loading
                  .flowConfig=${this._params.flowConfig}
                  .hass=${this.hass}
-                  .loadingReason=${this._loading || "loading_handlers"}
+                  .loadingReason=${this._loading}
                  .handler=${this._handler}
                  .step=${this._step}
                ></step-flow-loading>
@@ -273,24 +268,7 @@ class DataEntryFlowDialog extends LitElement {
                    dialogAction="close"
                  ></ha-icon-button>
                </div>
-                ${this._step === null
+                ${this._step.type === "form"
                  ? this._handler
                    ? html`<step-flow-pick-flow
                        .flowConfig=${this._params.flowConfig}
                        .hass=${this.hass}
                        .handler=${this._handler}
                        .flowsInProgress=${this._flowsInProgress}
                      ></step-flow-pick-flow>`
                    : // Show handler picker
                      html`
                        <step-flow-pick-handler
                          .hass=${this.hass}
                          .handlers=${this._handlers}
                          .initialFilter=${this._params.searchQuery}
                          @handler-picked=${this._handlerPicked}
                        ></step-flow-pick-handler>
                      `
                  : this._step.type === "form"
                  ? html`
                      <step-flow-form
                        .flowConfig=${this._params.flowConfig}
@@ -400,64 +378,6 @@ class DataEntryFlowDialog extends LitElement {
    });
  }
  private async _checkFlowsInProgress(handler: string) {
    this._loading = "loading_handlers";
    this._handler = handler;
    const flowsInProgress = (
      await fetchConfigFlowInProgress(this.hass.connection)
    ).filter((flow) => flow.handler === handler);
    if (!flowsInProgress.length) {
      // No flows in progress, create a new flow
      this._loading = "loading_flow";
      let step: DataEntryFlowStep;
      try {
        step = await this._params!.flowConfig.createFlow(this.hass, handler);
      } catch (err: any) {
        this.closeDialog();
        const message =
          err?.status_code === 404
            ? this.hass.localize(
                "ui.panel.config.integrations.config_flow.no_config_flow"
              )
            : `${this.hass.localize(
                "ui.panel.config.integrations.config_flow.could_not_load"
              )}: ${err?.body?.message || err?.message}`;
        showAlertDialog(this, {
          title: this.hass.localize(
            "ui.panel.config.integrations.config_flow.error"
          ),
          text: message,
        });
        return;
      } finally {
        this._handler = undefined;
      }
      this._processStep(step);
      if (this._params!.manifest === undefined) {
        try {
          this._params!.manifest = await fetchIntegrationManifest(
            this.hass,
            this._params?.domain || step.handler
          );
        } catch (_) {
          // No manifest
          this._params!.manifest = null;
        }
      }
    } else {
      this._step = null;
      this._flowsInProgress = flowsInProgress;
    }
    this._loading = undefined;
  }
  private _handlerPicked(ev) {
    this._checkFlowsInProgress(ev.detail.handler);
  }
  private async _processStep(
    step: DataEntryFlowStep | undefined | Promise<DataEntryFlowStep>
  ): Promise<void> {
--- a/src/dialogs/config-flow/show-dialog-config-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-config-flow.ts
@@ -3,11 +3,9 @@ import {
  createConfigFlow,
  deleteConfigFlow,
  fetchConfigFlow,
  getConfigFlowHandlers,
  handleConfigFlowStep,
 } from "../../data/config_flow";
 import { domainToName } from "../../data/integration";
 import { getSupportedBrands } from "../../data/supported_brands";
 import {
  DataEntryFlowDialogParams,
  loadDataEntryFlowDialog,
@@ -22,16 +20,6 @@ export const showConfigFlowDialog = (
 ): void =>
  showFlowDialog(element, dialogParams, {
    loadDevicesAndAreas: true,
    getFlowHandlers: async (hass) => {
      const [integrations, helpers, supportedBrands] = await Promise.all([
        getConfigFlowHandlers(hass, "integration"),
        getConfigFlowHandlers(hass, "helper"),
        getSupportedBrands(hass),
        hass.loadBackendTranslation("title", undefined, true),
      ]);
      return { integrations, helpers, supportedBrands };
    },
    createFlow: async (hass, handler) => {
      const [step] = await Promise.all([
        createConfigFlow(hass, handler),
--- a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
@@ -22,8 +22,6 @@ export interface FlowHandlers {
 export interface FlowConfig {
  loadDevicesAndAreas: boolean;
  getFlowHandlers?: (hass: HomeAssistant) => Promise<FlowHandlers>;
  createFlow(hass: HomeAssistant, handler: string): Promise<DataEntryFlowStep>;
  fetchFlow(hass: HomeAssistant, flowId: string): Promise<DataEntryFlowStep>;
--- a/src/dialogs/config-flow/step-flow-abort.ts
+++ b/src/dialogs/config-flow/step-flow-abort.ts
@@ -12,8 +12,6 @@ import { DataEntryFlowStepAbort } from "../../data/data_entry_flow";
 import { HomeAssistant } from "../../types";
 import { showAddApplicationCredentialDialog } from "../../panels/config/application_credentials/show-dialog-add-application-credential";
 import { configFlowContentStyles } from "./styles";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 import { domainToName } from "../../data/integration";
 import { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow";
 import { showConfigFlowDialog } from "./show-dialog-config-flow";
@@ -54,21 +52,11 @@ class StepFlowAbort extends LitElement {
  }
  private async _handleMissingCreds() {
    const confirm = await showConfirmationDialog(this, {
      title: this.hass.localize(
        "ui.panel.config.integrations.config_flow.missing_credentials",
        {
          integration: domainToName(this.hass.localize, this.domain),
        }
      ),
    });
    this._flowDone();
    if (!confirm) {
      return;
    }
    // Prompt to enter credentials and restart integration setup
    showAddApplicationCredentialDialog(this.params.dialogParentElement!, {
      selectedDomain: this.domain,
      manifest: this.params.manifest,
      applicationCredentialAddedCallback: () => {
        showConfigFlowDialog(this.params.dialogParentElement!, {
          dialogClosedCallback: this.params.dialogClosedCallback,
--- a/src/dialogs/config-flow/step-flow-pick-flow.ts
+++ b/src/dialogs/config-flow/step-flow-pick-flow.ts
@@ -1,130 +0,0 @@
 import "@polymer/paper-item";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-icon-next";
 import { localizeConfigFlowTitle } from "../../data/config_flow";
 import { DataEntryFlowProgress } from "../../data/data_entry_flow";
 import { domainToName } from "../../data/integration";
 import { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
@customElement("step-flow-pick-flow")
 class StepFlowPickFlow extends LitElement {
  public flowConfig!: FlowConfig;
  @property({ attribute: false }) public hass!: HomeAssistant;
  @property({ attribute: false })
  public flowsInProgress!: DataEntryFlowProgress[];
  @property() public handler!: string;
  protected render(): TemplateResult {
    return html`
      <h2>
        ${this.hass.localize(
          "ui.panel.config.integrations.config_flow.pick_flow_step.title"
        )}
      </h2>
      <div>
        ${this.flowsInProgress.map(
          (flow) => html` <paper-icon-item
            @click=${this._flowInProgressPicked}
            .flow=${flow}
          >
            <img
              slot="item-icon"
              loading="lazy"
              src=${brandsUrl({
                domain: flow.handler,
                type: "icon",
                useFallback: true,
                darkOptimized: this.hass.themes?.darkMode,
              })}
              referrerpolicy="no-referrer"
            />
            <paper-item-body>
              ${localizeConfigFlowTitle(this.hass.localize, flow)}
            </paper-item-body>
            <ha-icon-next></ha-icon-next>
          </paper-icon-item>`
        )}
        <paper-item @click=${this._startNewFlowPicked} .handler=${this.handler}>
          <paper-item-body>
            ${this.hass.localize(
              "ui.panel.config.integrations.config_flow.pick_flow_step.new_flow",
              "integration",
              domainToName(this.hass.localize, this.handler)
            )}
          </paper-item-body>
          <ha-icon-next></ha-icon-next>
        </paper-item>
      </div>
    `;
  }
  private _startNewFlowPicked(ev) {
    this._startFlow(ev.currentTarget.handler);
  }
  private _startFlow(handler: string) {
    fireEvent(this, "flow-update", {
      stepPromise: this.flowConfig.createFlow(this.hass, handler),
    });
  }
  private _flowInProgressPicked(ev) {
    const flow: DataEntryFlowProgress = ev.currentTarget.flow;
    fireEvent(this, "flow-update", {
      stepPromise: this.flowConfig.fetchFlow(this.hass, flow.flow_id),
    });
  }
  static get styles(): CSSResultGroup {
    return [
      configFlowContentStyles,
      css`
        img {
          width: 40px;
          height: 40px;
        }
        ha-icon-next {
          margin-right: 8px;
        }
        div {
          overflow: auto;
          max-height: 600px;
          margin: 16px 0;
        }
        h2 {
          padding-inline-end: 66px;
          direction: var(--direction);
        }
        @media all and (max-height: 900px) {
          div {
            max-height: calc(100vh - 134px);
          }
        }
        paper-icon-item,
        paper-item {
          cursor: pointer;
          margin-bottom: 4px;
        }
      `,
    ];
  }
 }
 declare global {
  interface HTMLElementTagNameMap {
    "step-flow-pick-flow": StepFlowPickFlow;
  }
 }
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -1,372 +0,0 @@
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import Fuse from "fuse.js";
 import {
  css,
  CSSResultGroup,
  html,
  LitElement,
  PropertyValues,
  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { protocolIntegrationPicked } from "../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { LocalizeFunc } from "../../common/translations/localize";
 import "../../components/ha-icon-next";
 import "../../components/search-input";
 import { domainToName } from "../../data/integration";
 import { haStyleScrollbar } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 import { FlowHandlers } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
 interface HandlerObj {
  name: string;
  slug: string;
  is_add?: boolean;
  is_helper?: boolean;
 }
 export interface SupportedBrandObj extends HandlerObj {
  supported_flows: string[];
 }
 declare global {
  // for fire event
  interface HASSDomEvents {
    "handler-picked": {
      handler: string;
    };
  }
 }
@customElement("step-flow-pick-handler")
 class StepFlowPickHandler extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
  @property({ attribute: false }) public handlers!: FlowHandlers;
  @property() public initialFilter?: string;
  @state() private _filter?: string;
  private _width?: number;
  private _height?: number;
  private _filterHandlers = memoizeOne(
    (
      h: FlowHandlers,
      filter?: string,
      _localize?: LocalizeFunc
    ): [(HandlerObj | SupportedBrandObj)[], HandlerObj[]] => {
      const integrations: (HandlerObj | SupportedBrandObj)[] =
        h.integrations.map((handler) => ({
          name: domainToName(this.hass.localize, handler),
          slug: handler,
        }));
      for (const [domain, domainBrands] of Object.entries(h.supportedBrands)) {
        for (const [slug, name] of Object.entries(domainBrands)) {
          integrations.push({
            slug,
            name,
            supported_flows: [domain],
          });
        }
      }
      if (filter) {
        const options: Fuse.IFuseOptions<HandlerObj> = {
          keys: ["name", "slug"],
          isCaseSensitive: false,
          minMatchCharLength: 2,
          threshold: 0.2,
        };
        const helpers: HandlerObj[] = h.helpers.map((handler) => ({
          name: domainToName(this.hass.localize, handler),
          slug: handler,
          is_helper: true,
        }));
        return [
          new Fuse(integrations, options)
            .search(filter)
            .map((result) => result.item),
          new Fuse(helpers, options)
            .search(filter)
            .map((result) => result.item),
        ];
      }
      return [
        integrations.sort((a, b) =>
          caseInsensitiveStringCompare(a.name, b.name)
        ),
        [],
      ];
    }
  );
  protected render(): TemplateResult {
    const [integrations, helpers] = this._getHandlers();
    const addDeviceRows: HandlerObj[] = ["zha", "zwave_js"]
      .filter((domain) => isComponentLoaded(this.hass, domain))
      .map((domain) => ({
        name: this.hass.localize(
          `ui.panel.config.integrations.add_${domain}_device`
        ),
        slug: domain,
        is_add: true,
      }))
      .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name));
    return html`
      <h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>
      <search-input
        .hass=${this.hass}
        autofocus
        .filter=${this._filter}
        @value-changed=${this._filterChanged}
        .label=${this.hass.localize("ui.panel.config.integrations.search")}
        @keypress=${this._maybeSubmit}
      ></search-input>
      <mwc-list
        style=${styleMap({
          width: `${this._width}px`,
          height: `${this._height}px`,
        })}
        class="ha-scrollbar"
      >
        ${addDeviceRows.length
          ? html`
              ${addDeviceRows.map((handler) => this._renderRow(handler))}
              <li divider padded class="divider" role="separator"></li>
            `
          : ""}
        ${integrations.length
          ? integrations.map((handler) => this._renderRow(handler))
          : html`
              <p>
                ${this.hass.localize(
                  "ui.panel.config.integrations.note_about_integrations"
                )}<br />
                ${this.hass.localize(
                  "ui.panel.config.integrations.note_about_website_reference"
                )}<a
                  href=${documentationUrl(
                    this.hass,
                    `/integrations/${
                      this._filter ? `#search/${this._filter}` : ""
                    }`
                  )}
                  target="_blank"
                  rel="noreferrer"
                  >${this.hass.localize(
                    "ui.panel.config.integrations.home_assistant_website"
                  )}</a
                >.
              </p>
            `}
        ${helpers.length
          ? html`
              <li divider padded class="divider" role="separator"></li>
              ${helpers.map((handler) => this._renderRow(handler))}
            `
          : ""}
      </mwc-list>
    `;
  }
  private _renderRow(handler: HandlerObj) {
    return html`
      <mwc-list-item
        graphic="medium"
        .hasMeta=${!handler.is_add}
        .handler=${handler}
        @click=${this._handlerPicked}
      >
        <img
          slot="graphic"
          loading="lazy"
          src=${brandsUrl({
            domain: handler.slug,
            type: "icon",
            useFallback: true,
            darkOptimized: this.hass.themes?.darkMode,
          })}
          referrerpolicy="no-referrer"
        />
        <span>${handler.name} ${handler.is_helper ? " (helper)" : ""}</span>
        ${handler.is_add ? "" : html`<ha-icon-next slot="meta"></ha-icon-next>`}
      </mwc-list-item>
    `;
  }
  public willUpdate(changedProps: PropertyValues): void {
    super.willUpdate(changedProps);
    if (this._filter === undefined && this.initialFilter !== undefined) {
      this._filter = this.initialFilter;
    }
    if (this.initialFilter !== undefined && this._filter === "") {
      this.initialFilter = undefined;
      this._filter = "";
      this._width = undefined;
      this._height = undefined;
    } else if (
      this.hasUpdated &&
      changedProps.has("_filter") &&
      (!this._width || !this._height)
    ) {
      // Store the width and height so that when we search, box doesn't jump
      const boundingRect =
        this.shadowRoot!.querySelector("mwc-list")!.getBoundingClientRect();
      this._width = boundingRect.width;
      this._height = boundingRect.height;
    }
  }
  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    setTimeout(
      () => this.shadowRoot!.querySelector("search-input")!.focus(),
      0
    );
  }
  private _getHandlers() {
    return this._filterHandlers(
      this.handlers,
      this._filter,
      this.hass.localize
    );
  }
  private async _filterChanged(e) {
    this._filter = e.detail.value;
  }
  private async _handlerPicked(ev) {
    const handler: HandlerObj | SupportedBrandObj = ev.currentTarget.handler;
    if (handler.is_add) {
      this._handleAddPicked(handler.slug);
      return;
    }
    if (handler.is_helper) {
      navigate(`/config/helpers/add?domain=${handler.slug}`);
      // This closes dialog.
      fireEvent(this, "flow-update");
      return;
    }
    if ("supported_flows" in handler) {
      const slug = handler.supported_flows[0];
      showConfirmationDialog(this, {
        text: this.hass.localize(
          "ui.panel.config.integrations.config_flow.supported_brand_flow",
          {
            supported_brand: handler.name,
            flow_domain_name: domainToName(this.hass.localize, slug),
          }
        ),
        confirm: () => {
          if (["zha", "zwave_js"].includes(slug)) {
            this._handleAddPicked(slug);
            return;
          }
          fireEvent(this, "handler-picked", {
            handler: slug,
          });
        },
      });
      return;
    }
    fireEvent(this, "handler-picked", {
      handler: handler.slug,
    });
  }
  private async _handleAddPicked(slug: string): Promise<void> {
    await protocolIntegrationPicked(this, this.hass, slug);
    // This closes dialog.
    fireEvent(this, "flow-update");
  }
  private _maybeSubmit(ev: KeyboardEvent) {
    if (ev.key !== "Enter") {
      return;
    }
    const handlers = this._getHandlers();
    if (handlers.length > 0) {
      fireEvent(this, "handler-picked", {
        handler: handlers[0][0].slug,
      });
    }
  }
  static get styles(): CSSResultGroup {
    return [
      configFlowContentStyles,
      haStyleScrollbar,
      css`
        img {
          width: 40px;
          height: 40px;
        }
        search-input {
          display: block;
          margin: 16px 16px 0;
        }
        ha-icon-next {
          margin-right: 8px;
        }
        mwc-list {
          overflow: auto;
          max-height: 600px;
        }
        .divider {
          border-bottom-color: var(--divider-color);
        }
        h2 {
          padding-inline-end: 66px;
          direction: var(--direction);
        }
        @media all and (max-height: 900px) {
          mwc-list {
            max-height: calc(100vh - 134px);
          }
        }
        p {
          text-align: center;
          padding: 16px;
          margin: 0;
        }
        p > a {
          color: var(--primary-color);
        }
      `,
    ];
  }
 }
 declare global {
  interface HTMLElementTagNameMap {
    "step-flow-pick-handler": StepFlowPickHandler;
  }
 }
--- a/src/dialogs/generic/dialog-box.ts
+++ b/src/dialogs/generic/dialog-box.ts
@@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
 import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
@@ -96,6 +97,9 @@ class DialogBox extends LitElement {
          @click=${this._confirm}
          ?dialogInitialFocus=${!this._params.prompt}
          slot="primaryAction"
          class=${classMap({
            destructive: this._params.destructive || false,
          })}
        >
          ${this._params.confirmText
            ? this._params.confirmText
@@ -153,6 +157,9 @@ class DialogBox extends LitElement {
      .secondary {
        color: var(--secondary-text-color);
      }
      .destructive {
        --mdc-theme-primary: var(--error-color);
      }
      ha-dialog {
        --mdc-dialog-heading-ink-color: var(--primary-text-color);
        --mdc-dialog-content-ink-color: var(--primary-text-color);
--- a/src/dialogs/generic/show-dialog-box.ts
+++ b/src/dialogs/generic/show-dialog-box.ts
@@ -16,6 +16,7 @@ export interface ConfirmationDialogParams extends BaseDialogBoxParams {
  dismissText?: string;
  confirm?: () => void;
  cancel?: () => void;
  destructive?: boolean;
 }
 export interface PromptDialogParams extends BaseDialogBoxParams {
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -377,12 +377,14 @@ class MoreInfoClimate extends LitElement {
  private _handlePresetmodeChanged(ev) {
    const newVal = ev.target.value || null;
-    this._callServiceHelper(
+    if (newVal) {
-      this.stateObj!.attributes.preset_mode,
+      this._callServiceHelper(
-      newVal,
+        this.stateObj!.attributes.preset_mode,
-      "set_preset_mode",
+        newVal,
-      { preset_mode: newVal }
+        "set_preset_mode",
-    );
+        { preset_mode: newVal }
      );
    }
  }
  private async _callServiceHelper(
--- a/src/dialogs/more-info/controls/more-info-cover.ts
+++ b/src/dialogs/more-info/controls/more-info-cover.ts
@@ -1,19 +1,29 @@
 import { css, CSSResult, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { attributeClassNames } from "../../../common/entity/attribute_class_names";
-import { featureClassNames } from "../../../common/entity/feature_class_names";
+import {
  FeatureClassNames,
  featureClassNames,
 } from "../../../common/entity/feature_class_names";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import "../../../components/ha-cover-tilt-controls";
 import "../../../components/ha-labeled-slider";
 import {
  CoverEntity,
-  FEATURE_CLASS_NAMES,
+  CoverEntityFeature,
  isTiltOnly,
  supportsSetPosition,
  supportsSetTiltPosition,
 } from "../../../data/cover";
 import { HomeAssistant } from "../../../types";
 export const FEATURE_CLASS_NAMES: FeatureClassNames<CoverEntityFeature> = {
  [CoverEntityFeature.SET_POSITION]: "has-set_position",
  [CoverEntityFeature.OPEN_TILT]: "has-open_tilt",
  [CoverEntityFeature.CLOSE_TILT]: "has-close_tilt",
  [CoverEntityFeature.STOP_TILT]: "has-stop_tilt",
  [CoverEntityFeature.SET_TILT_POSITION]: "has-set_tilt_position",
 };
@customElement("more-info-cover")
 class MoreInfoCover extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -34,13 +44,16 @@ class MoreInfoCover extends LitElement {
            .caption=${this.hass.localize("ui.card.cover.position")}
            pin=""
            .value=${this.stateObj.attributes.current_position}
-            .disabled=${!supportsSetPosition(this.stateObj)}
+            .disabled=${!supportsFeature(
              this.stateObj,
              CoverEntityFeature.SET_POSITION
            )}
            @change=${this._coverPositionSliderChanged}
          ></ha-labeled-slider>
        </div>
        <div class="tilt">
-          ${supportsSetTiltPosition(this.stateObj)
+          ${supportsFeature(this.stateObj, CoverEntityFeature.SET_TILT_POSITION)
            ? // Either render the labeled slider and put the tilt buttons into its slot
              // or (if tilt position is not supported and therefore no slider is shown)
              // render a title <div> (same style as for a labeled slider) and directly put
--- a/src/dialogs/more-info/controls/more-info-light.ts
+++ b/src/dialogs/more-info/controls/more-info-light.ts
@@ -20,13 +20,13 @@ import "../../../components/ha-labeled-slider";
 import "../../../components/ha-select";
 import {
  getLightCurrentModeRgbColor,
-  LightColorModes,
+  LightColorMode,
  LightEntity,
  LightEntityFeature,
  lightIsInColorMode,
  lightSupportsColor,
  lightSupportsColorMode,
-  lightSupportsDimming,
+  lightSupportsBrightness,
  SUPPORT_EFFECT,
 } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
@@ -56,7 +56,7 @@ class MoreInfoLight extends LitElement {
  @state() private _colorPickerColor?: [number, number, number];
-  @state() private _mode?: "color" | LightColorModes;
+  @state() private _mode?: "color" | LightColorMode;
  protected render(): TemplateResult {
    if (!this.hass || !this.stateObj) {
@@ -65,29 +65,29 @@ class MoreInfoLight extends LitElement {
    const supportsTemp = lightSupportsColorMode(
      this.stateObj,
-      LightColorModes.COLOR_TEMP
+      LightColorMode.COLOR_TEMP
    );
    const supportsWhite = lightSupportsColorMode(
      this.stateObj,
-      LightColorModes.WHITE
+      LightColorMode.WHITE
    );
    const supportsRgbww = lightSupportsColorMode(
      this.stateObj,
-      LightColorModes.RGBWW
+      LightColorMode.RGBWW
    );
    const supportsRgbw =
      !supportsRgbww &&
-      lightSupportsColorMode(this.stateObj, LightColorModes.RGBW);
+      lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
    const supportsColor =
      supportsRgbww || supportsRgbw || lightSupportsColor(this.stateObj);
    return html`
      <div class="content">
-        ${lightSupportsDimming(this.stateObj)
+        ${lightSupportsBrightness(this.stateObj)
          ? html`
              <ha-labeled-slider
                caption=${this.hass.localize("ui.card.light.brightness")}
@@ -113,7 +113,7 @@ class MoreInfoLight extends LitElement {
                : ""}
              ${supportsTemp &&
              ((!supportsColor && !supportsWhite) ||
-                this._mode === LightColorModes.COLOR_TEMP)
+                this._mode === LightColorMode.COLOR_TEMP)
                ? html`
                    <ha-labeled-slider
                      class="color_temp"
@@ -204,7 +204,7 @@ class MoreInfoLight extends LitElement {
                      : ""}
                  `
                : ""}
-              ${supportsFeature(this.stateObj, SUPPORT_EFFECT) &&
+              ${supportsFeature(this.stateObj, LightEntityFeature.EFFECT) &&
              this.stateObj!.attributes.effect_list?.length
                ? html`
                    <hr />
@@ -260,31 +260,31 @@ class MoreInfoLight extends LitElement {
      let brightnessAdjust = 100;
      this._brightnessAdjusted = undefined;
      if (
-        stateObj.attributes.color_mode === LightColorModes.RGB &&
+        stateObj.attributes.color_mode === LightColorMode.RGB &&
-        !lightSupportsColorMode(stateObj, LightColorModes.RGBWW) &&
+        !lightSupportsColorMode(stateObj, LightColorMode.RGBWW) &&
-        !lightSupportsColorMode(stateObj, LightColorModes.RGBW)
+        !lightSupportsColorMode(stateObj, LightColorMode.RGBW)
      ) {
-        const maxVal = Math.max(...stateObj.attributes.rgb_color);
+        const maxVal = Math.max(...stateObj.attributes.rgb_color!);
        if (maxVal < 255) {
          this._brightnessAdjusted = maxVal;
          brightnessAdjust = (this._brightnessAdjusted / 255) * 100;
        }
      }
      this._brightnessSliderValue = Math.round(
-        (stateObj.attributes.brightness * brightnessAdjust) / 255
+        ((stateObj.attributes.brightness || 0) * brightnessAdjust) / 255
      );
      this._ctSliderValue = stateObj.attributes.color_temp;
      this._wvSliderValue =
-        stateObj.attributes.color_mode === LightColorModes.RGBW
+        stateObj.attributes.color_mode === LightColorMode.RGBW
-          ? Math.round((stateObj.attributes.rgbw_color[3] * 100) / 255)
+          ? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
          : undefined;
      this._cwSliderValue =
-        stateObj.attributes.color_mode === LightColorModes.RGBWW
+        stateObj.attributes.color_mode === LightColorMode.RGBWW
-          ? Math.round((stateObj.attributes.rgbww_color[3] * 100) / 255)
+          ? Math.round((stateObj.attributes.rgbww_color![3] * 100) / 255)
          : undefined;
      this._wwSliderValue =
-        stateObj.attributes.color_mode === LightColorModes.RGBWW
+        stateObj.attributes.color_mode === LightColorMode.RGBWW
-          ? Math.round((stateObj.attributes.rgbww_color[4] * 100) / 255)
+          ? Math.round((stateObj.attributes.rgbww_color![4] * 100) / 255)
          : undefined;
      const currentRgbColor = getLightCurrentModeRgbColor(stateObj);
@@ -307,10 +307,10 @@ class MoreInfoLight extends LitElement {
    (supportsTemp: boolean, supportsWhite: boolean) => {
      const modes = [{ label: "Color", value: "color" }];
      if (supportsTemp) {
-        modes.push({ label: "Temperature", value: LightColorModes.COLOR_TEMP });
+        modes.push({ label: "Temperature", value: LightColorMode.COLOR_TEMP });
      }
      if (supportsWhite) {
-        modes.push({ label: "White", value: LightColorModes.WHITE });
+        modes.push({ label: "White", value: LightColorMode.WHITE });
      }
      return modes;
    }
@@ -342,7 +342,7 @@ class MoreInfoLight extends LitElement {
    this._brightnessSliderValue = bri;
-    if (this._mode === LightColorModes.WHITE) {
+    if (this._mode === LightColorMode.WHITE) {
      this.hass.callService("light", "turn_on", {
        entity_id: this.stateObj!.entity_id,
        white: Math.min(255, Math.round((bri * 255) / 100)),
@@ -486,7 +486,7 @@ class MoreInfoLight extends LitElement {
  }
  private _setRgbWColor(rgbColor: [number, number, number]) {
-    if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW)) {
+    if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW)) {
      const rgbww_color: [number, number, number, number, number] = this
        .stateObj!.attributes.rgbww_color
        ? [...this.stateObj!.attributes.rgbww_color]
@@ -495,7 +495,7 @@ class MoreInfoLight extends LitElement {
        entity_id: this.stateObj!.entity_id,
        rgbww_color: rgbColor.concat(rgbww_color.slice(3)),
      });
-    } else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)) {
+    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
      const rgbw_color: [number, number, number, number] = this.stateObj!
        .attributes.rgbw_color
        ? [...this.stateObj!.attributes.rgbw_color]
@@ -524,8 +524,8 @@ class MoreInfoLight extends LitElement {
    ];
    if (
-      lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW) ||
+      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW) ||
-      lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)
+      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)
    ) {
      this._setRgbWColor(
        this._colorBrightnessSliderValue
@@ -535,7 +535,7 @@ class MoreInfoLight extends LitElement {
            )
          : [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b]
      );
-    } else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGB)) {
+    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGB)) {
      const rgb_color: [number, number, number] = [
        ev.detail.rgb.r,
        ev.detail.rgb.g,
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -90,7 +90,7 @@ export class MoreInfoDialog extends LitElement {
    const stateObj = this.hass.states[entityId];
    const domain = computeDomain(entityId);
-    const name = stateObj ? computeStateName(stateObj) : entityId;
+    const name = (stateObj && computeStateName(stateObj)) || entityId;
    const tabs = this._getTabs(entityId, this.hass.user!.is_admin);
    return html`
--- a/src/external_app/external_app_entrypoint.ts
+++ b/src/external_app/external_app_entrypoint.ts
@@ -7,7 +7,7 @@ This is the entry point for providing external app stuff from app entrypoint.
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistantMain } from "../layouts/home-assistant-main";
-import type { EMExternalMessageCommands } from "./external_messaging";
+import type { EMIncomingMessageCommands } from "./external_messaging";
 export const attachExternalToApp = (hassMainEl: HomeAssistantMain) => {
  window.addEventListener("haptic", (ev) =>
@@ -24,7 +24,7 @@ export const attachExternalToApp = (hassMainEl: HomeAssistantMain) => {
 const handleExternalMessage = (
  hassMainEl: HomeAssistantMain,
-  msg: EMExternalMessageCommands
+  msg: EMIncomingMessageCommands
 ): boolean => {
  const bus = hassMainEl.hass.auth.external!;
--- a/src/external_app/external_messaging.ts
+++ b/src/external_app/external_messaging.ts
@@ -8,7 +8,6 @@ interface CommandInFlight {
 export interface EMMessage {
  id?: number;
  type: string;
  payload?: unknown;
 }
 interface EMError {
@@ -30,34 +29,120 @@ interface EMMessageResultError {
  error: EMError;
 }
-interface EMExternalMessageRestart {
+interface EMOutgoingMessageConfigGet extends EMMessage {
  type: "config/get";
 }
 interface EMOutgoingMessageMatterCommission extends EMMessage {
  type: "matter/commission";
 }
 type EMOutgoingMessageWithAnswer = {
  "config/get": {
    request: EMOutgoingMessageConfigGet;
    response: ExternalConfig;
  };
  "matter/commission": {
    request: EMOutgoingMessageMatterCommission;
    response: {
      code: string;
    };
  };
 };
 interface EMOutgoingMessageExoplayerPlayHLS extends EMMessage {
  type: "exoplayer/play_hls";
  payload: {
    url: string;
    muted: boolean;
  };
 }
 interface EMOutgoingMessageExoplayerResize extends EMMessage {
  type: "exoplayer/resize";
  payload: {
    left: number;
    top: number;
    right: number;
    bottom: number;
  };
 }
 interface EMOutgoingMessageExoplayerStop extends EMMessage {
  type: "exoplayer/stop";
 }
 interface EMOutgoingMessageThemeUpdate extends EMMessage {
  type: "theme-update";
 }
 interface EMOutgoingMessageHaptic extends EMMessage {
  type: "haptic";
  payload: { hapticType: string };
 }
 interface EMOutgoingMessageConnectionStatus extends EMMessage {
  type: "connection-status";
  payload: { event: string };
 }
 interface EMOutgoingMessageAppConfiguration extends EMMessage {
  type: "config_screen/show";
 }
 interface EMOutgoingMessageTagWrite extends EMMessage {
  type: "tag/write";
  payload: {
    name: string | null;
    tag: string;
  };
 }
 interface EMOutgoingMessageSidebarShow extends EMMessage {
  type: "sidebar/show";
 }
 type EMOutgoingMessageWithoutAnswer =
  | EMOutgoingMessageHaptic
  | EMOutgoingMessageConnectionStatus
  | EMOutgoingMessageAppConfiguration
  | EMOutgoingMessageTagWrite
  | EMOutgoingMessageSidebarShow
  | EMOutgoingMessageExoplayerPlayHLS
  | EMOutgoingMessageExoplayerResize
  | EMOutgoingMessageExoplayerStop
  | EMOutgoingMessageThemeUpdate
  | EMMessageResultSuccess
  | EMMessageResultError;
 interface EMIncomingMessageRestart {
  id: number;
  type: "command";
  command: "restart";
 }
-interface EMExternMessageShowNotifications {
+interface EMIncomingMessageShowNotifications {
  id: number;
  type: "command";
  command: "notifications/show";
 }
-export type EMExternalMessageCommands =
+export type EMIncomingMessageCommands =
-  | EMExternalMessageRestart
+  | EMIncomingMessageRestart
-  | EMExternMessageShowNotifications;
+  | EMIncomingMessageShowNotifications;
-type ExternalMessage =
+type EMIncomingMessage =
  | EMMessageResultSuccess
  | EMMessageResultError
-  | EMExternalMessageCommands;
+  | EMIncomingMessageCommands;
-type ExternalMessageHandler = (msg: EMExternalMessageCommands) => boolean;
+type EMIncomingMessageHandler = (msg: EMIncomingMessageCommands) => boolean;
 export interface ExternalConfig {
  hasSettingsScreen: boolean;
  hasSidebar: boolean;
  canWriteTag: boolean;
  hasExoPlayer: boolean;
  canCommissionMatter: boolean;
 }
 export class ExternalMessaging {
@@ -67,7 +152,7 @@ export class ExternalMessaging {
  public msgId = 0;
-  private _commandHandler?: ExternalMessageHandler;
+  private _commandHandler?: EMIncomingMessageHandler;
  public async attach() {
    window[CALLBACK_EXTERNAL_BUS] = (msg) => this.receiveMessage(msg);
@@ -77,12 +162,12 @@ export class ExternalMessaging {
        payload: { event: ev.detail },
      })
    );
-    this.config = await this.sendMessage<ExternalConfig>({
+    this.config = await this.sendMessage<"config/get">({
      type: "config/get",
    });
  }
-  public addCommandHandler(handler: ExternalMessageHandler) {
+  public addCommandHandler(handler: EMIncomingMessageHandler) {
    this._commandHandler = handler;
  }
@@ -90,31 +175,33 @@ export class ExternalMessaging {
   * Send message to external app that expects a response.
   * @param msg message to send
   */
-  public sendMessage<T>(msg: EMMessage): Promise<T> {
+  public sendMessage<T extends keyof EMOutgoingMessageWithAnswer>(
    msg: EMOutgoingMessageWithAnswer[T]["request"]
  ): Promise<EMOutgoingMessageWithAnswer[T]["response"]> {
    const msgId = ++this.msgId;
    msg.id = msgId;
-    this.fireMessage(msg);
+    this._sendExternal(msg);
-    return new Promise<T>((resolve, reject) => {
+    return new Promise<EMOutgoingMessageWithAnswer[T]["response"]>(
-      this.commands[msgId] = { resolve, reject };
+      (resolve, reject) => {
-    });
+        this.commands[msgId] = { resolve, reject };
      }
    );
  }
  /**
   * Send message to external app without expecting a response.
   * @param msg message to send
   */
-  public fireMessage(
+  public fireMessage(msg: EMOutgoingMessageWithoutAnswer) {
    msg: EMMessage | EMMessageResultSuccess | EMMessageResultError
  ) {
    if (!msg.id) {
      msg.id = ++this.msgId;
    }
    this._sendExternal(msg);
  }
-  public receiveMessage(msg: ExternalMessage) {
+  public receiveMessage(msg: EMIncomingMessage) {
    if (__DEV__) {
      // eslint-disable-next-line no-console
      console.log("Receiving message from external app", msg);
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -1,6 +1,15 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
  css,
  CSSResultGroup,
  html,
  LitElement,
  PropertyValues,
  TemplateResult,
 } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { computeRTL } from "../common/util/compute_rtl";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import { HomeAssistant } from "../types";
@@ -24,6 +33,17 @@ class HassSubpage extends LitElement {
  // @ts-ignore
  @restoreScroll(".content") private _savedScrollPos?: number;
  protected willUpdate(changedProps: PropertyValues): void {
    super.willUpdate(changedProps);
    if (!changedProps.has("hass")) {
      return;
    }
    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
    if (!oldHass || oldHass.locale !== this.hass.locale) {
      toggleAttribute(this, "rtl", computeRTL(this.hass));
    }
  }
  protected render(): TemplateResult {
    return html`
      <div class="toolbar">
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -375,3 +375,9 @@ export class HaTabsSubpageDataTable extends LitElement {
    `;
  }
 }
 declare global {
  interface HTMLElementTagNameMap {
    "hass-tabs-subpage-data-table": HaTabsSubpageDataTable;
  }
 }
--- a/src/onboarding/onboarding-create-user.ts
+++ b/src/onboarding/onboarding-create-user.ts
@@ -72,7 +72,9 @@ class OnboardingCreateUser extends LitElement {
        .disabled=${this._loading ||
        !this._newUser.name ||
        !this._newUser.username ||
-        !this._newUser.password}
+        !this._newUser.password ||
        !this._newUser.password_confirm ||
        this._newUser.password !== this._newUser.password_confirm}
      >
        ${this.localize("ui.panel.page-onboarding.user.create_account")}
      </mwc-button>
@@ -88,7 +90,8 @@ class OnboardingCreateUser extends LitElement {
        this._newUser.name &&
        this._newUser.username &&
        this._newUser.password &&
-        this._newUser.password_confirm
+        this._newUser.password_confirm &&
        this._newUser.password === this._newUser.password_confirm
      ) {
        this._submitForm(ev);
      }
--- a/src/panels/config/application_credentials/dialog-add-application-credential.ts
+++ b/src/panels/config/application_credentials/dialog-add-application-credential.ts
@@ -1,23 +1,26 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { mdiOpenInNew } from "@mdi/js";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-combo-box";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-markdown";
 import "../../../components/ha-textfield";
 import {
  fetchApplicationCredentialsConfig,
  createApplicationCredential,
  ApplicationCredentialsConfig,
  ApplicationCredential,
  ApplicationCredentialsConfig,
  createApplicationCredential,
  fetchApplicationCredentialsConfig,
 } from "../../../data/application_credential";
-import { domainToName } from "../../../data/integration";
+import { domainToName, IntegrationManifest } from "../../../data/integration";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential";
 interface Domain {
@@ -42,6 +45,8 @@ export class DialogAddApplicationCredential extends LitElement {
  @state() private _domain?: string;
  @state() private _manifest?: IntegrationManifest | null;
  @state() private _name?: string;
  @state() private _description?: string;
@@ -56,8 +61,8 @@ export class DialogAddApplicationCredential extends LitElement {
  public showDialog(params: AddApplicationCredentialDialogParams) {
    this._params = params;
-    this._domain =
+    this._domain = params.selectedDomain;
-      params.selectedDomain !== undefined ? params.selectedDomain : "";
+    this._manifest = params.manifest;
    this._name = "";
    this._description = "";
    this._clientId = "";
@@ -74,7 +79,7 @@ export class DialogAddApplicationCredential extends LitElement {
      name: domainToName(this.hass.localize, domain),
    }));
    await this.hass.loadBackendTranslation("application_credentials");
-    if (this._domain !== "") {
+    if (this._domain) {
      this._updateDescription();
    }
  }
@@ -83,6 +88,9 @@ export class DialogAddApplicationCredential extends LitElement {
    if (!this._params || !this._domains) {
      return html``;
    }
    const selectedDomainName = this._params.selectedDomain
      ? domainToName(this.hass.localize, this._domain!)
      : "";
    return html`
      <ha-dialog
        open
@@ -97,23 +105,76 @@ export class DialogAddApplicationCredential extends LitElement {
        )}
      >
        <div>
-          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+          ${this._error
-          <ha-combo-box
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert> `
-            name="domain"
+            : ""}
-            .hass=${this.hass}
+          ${this._params.selectedDomain && !this._description
-            .disabled=${!!this._params.selectedDomain}
+            ? html`<p>
-            .label=${this.hass.localize(
+                ${this.hass.localize(
-              "ui.panel.config.application_credentials.editor.domain"
+                  "ui.panel.config.application_credentials.editor.missing_credentials",
-            )}
+                  {
-            .value=${this._domain}
+                    integration: selectedDomainName,
-            .renderer=${rowRenderer}
+                  }
-            .items=${this._domains}
+                )}
-            item-id-path="id"
+                ${this._manifest?.is_built_in || this._manifest?.documentation
-            item-value-path="id"
+                  ? html`<a
-            item-label-path="name"
+                      href=${this._manifest.is_built_in
-            required
+                        ? documentationUrl(
-            @value-changed=${this._handleDomainPicked}
+                            this.hass,
-          ></ha-combo-box>
+                            `/integrations/${this._domain}`
                          )
                        : this._manifest.documentation}
                      target="_blank"
                      rel="noreferrer"
                    >
                      ${this.hass.localize(
                        "ui.panel.config.application_credentials.editor.missing_credentials_domain_link",
                        {
                          integration: selectedDomainName,
                        }
                      )}
                      <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
                    </a>`
                  : ""}
              </p>`
            : ""}
          ${!this._params.selectedDomain || !this._description
            ? html`<p>
                ${this.hass.localize(
                  "ui.panel.config.application_credentials.editor.description"
                )}
                <a
                  href=${documentationUrl(
                    this.hass!,
                    "/integrations/application_credentials"
                  )}
                  target="_blank"
                  rel="noreferrer"
                >
                  ${this.hass!.localize(
                    "ui.panel.config.application_credentials.editor.view_documentation"
                  )}
                  <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
                </a>
              </p>`
            : ""}
          ${this._params.selectedDomain
            ? ""
            : html`<ha-combo-box
                name="domain"
                .hass=${this.hass}
                .label=${this.hass.localize(
                  "ui.panel.config.application_credentials.editor.domain"
                )}
                .value=${this._domain}
                .renderer=${rowRenderer}
                .items=${this._domains}
                item-id-path="id"
                item-value-path="id"
                item-label-path="name"
                required
                @value-changed=${this._handleDomainPicked}
              ></ha-combo-box>`}
          ${this._description
            ? html`<ha-markdown
                breaks
@@ -143,6 +204,10 @@ export class DialogAddApplicationCredential extends LitElement {
            @input=${this._handleValueChanged}
            error-message=${this.hass.localize("ui.common.error_required")}
            dialogInitialFocus
            .helper=${this.hass.localize(
              "ui.panel.config.application_credentials.editor.client_id_helper"
            )}
            helperPersistent
          ></ha-textfield>
          <ha-textfield
            .label=${this.hass.localize(
@@ -154,6 +219,10 @@ export class DialogAddApplicationCredential extends LitElement {
            required
            @input=${this._handleValueChanged}
            error-message=${this.hass.localize("ui.common.error_required")}
            .helper=${this.hass.localize(
              "ui.panel.config.application_credentials.editor.client_secret_helper"
            )}
            helperPersistent
          ></ha-textfield>
        </div>
        ${this._loading
@@ -163,15 +232,18 @@ export class DialogAddApplicationCredential extends LitElement {
              </div>
            `
          : html`
              <mwc-button slot="primaryAction" @click=${this._abortDialog}>
                ${this.hass.localize("ui.common.cancel")}
              </mwc-button>
              <mwc-button
                slot="primaryAction"
                .disabled=${!this._domain ||
                !this._clientId ||
                !this._clientSecret}
-                @click=${this._createApplicationCredential}
+                @click=${this._addApplicationCredential}
              >
                ${this.hass.localize(
-                  "ui.panel.config.application_credentials.editor.create"
+                  "ui.panel.config.application_credentials.editor.add"
                )}
              </mwc-button>
            `}
@@ -191,7 +263,11 @@ export class DialogAddApplicationCredential extends LitElement {
    this._updateDescription();
  }
-  private _updateDescription() {
+  private async _updateDescription() {
    await this.hass.loadBackendTranslation(
      "application_credentials",
      this._domain
    );
    const info = this._config!.integrations[this._domain!];
    this._description = this.hass.localize(
      `component.${this._domain}.application_credentials.description`,
@@ -213,7 +289,7 @@ export class DialogAddApplicationCredential extends LitElement {
    this.closeDialog();
  }
-  private async _createApplicationCredential(ev) {
+  private async _addApplicationCredential(ev) {
    ev.preventDefault();
    if (!this._domain || !this._clientId || !this._clientSecret) {
      return;
@@ -260,6 +336,15 @@ export class DialogAddApplicationCredential extends LitElement {
          display: block;
          margin-bottom: 24px;
        }
        a {
          text-decoration: none;
        }
        a ha-svg-icon {
          --mdc-icon-size: 16px;
        }
        ha-markdown {
          margin-bottom: 16px;
        }
      `,
    ];
  }
--- a/src/panels/config/application_credentials/show-dialog-add-application-credential.ts
+++ b/src/panels/config/application_credentials/show-dialog-add-application-credential.ts
@@ -1,5 +1,6 @@
 import { fireEvent } from "../../../common/dom/fire_event";
 import { ApplicationCredential } from "../../../data/application_credential";
 import { IntegrationManifest } from "../../../data/integration";
 export interface AddApplicationCredentialDialogParams {
  applicationCredentialAddedCallback: (
@@ -7,6 +8,7 @@ export interface AddApplicationCredentialDialogParams {
  ) => void;
  dialogAbortedCallback?: () => void;
  selectedDomain?: string;
  manifest?: IntegrationManifest | null;
 }
 export const loadAddApplicationCredentialDialog = () =>
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/src/panels/config/areas/ha-config-area-page.ts
@@ -610,13 +610,15 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
        if (
          !(await showConfirmationDialog(this, {
            title: this.hass.localize(
-              "ui.panel.config.areas.delete.confirmation_title"
+              "ui.panel.config.areas.delete.confirmation_title",
              { name: entry!.name }
            ),
            text: this.hass.localize(
              "ui.panel.config.areas.delete.confirmation_text"
            ),
            dismissText: this.hass.localize("ui.common.cancel"),
            confirmText: this.hass.localize("ui.common.delete"),
            destructive: true,
          }))
        ) {
          return false;
@@ -637,21 +639,6 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
    return [
      haStyle,
      css`
        h1 {
          margin: 0;
          font-family: var(--paper-font-headline_-_font-family);
          -webkit-font-smoothing: var(
            --paper-font-headline_-_-webkit-font-smoothing
          );
          font-size: var(--paper-font-headline_-_font-size);
          font-weight: var(--paper-font-headline_-_font-weight);
          letter-spacing: var(--paper-font-headline_-_letter-spacing);
          line-height: var(--paper-font-headline_-_line-height);
          opacity: var(--dark-primary-opacity);
          display: flex;
          align-items: center;
        }
        h3 {
          margin: 0;
          padding: 0 16px;
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -100,6 +100,8 @@ export default class HaAutomationActionRow extends LitElement {
  @property({ type: Boolean }) public narrow = false;
  @property({ type: Boolean }) public disabled = false;
  @property({ type: Boolean }) public hideMenu = false;
  @property({ type: Boolean }) public reOrderMode = false;
@@ -179,7 +181,7 @@ export default class HaAutomationActionRow extends LitElement {
                    <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
                  </mwc-list-item>
-                  <mwc-list-item graphic="icon">
+                  <mwc-list-item graphic="icon" .disabled=${this.disabled}>
                    ${this.hass.localize(
                      "ui.panel.config.automation.editor.actions.rename"
                    )}
@@ -188,7 +190,7 @@ export default class HaAutomationActionRow extends LitElement {
                      .path=${mdiRenameBox}
                    ></ha-svg-icon>
                  </mwc-list-item>
-                  <mwc-list-item graphic="icon">
+                  <mwc-list-item graphic="icon" .disabled=${this.disabled}>
                    ${this.hass.localize(
                      "ui.panel.config.automation.editor.actions.duplicate"
                    )}
@@ -234,7 +236,7 @@ export default class HaAutomationActionRow extends LitElement {
                  <li divider role="separator"></li>
-                  <mwc-list-item graphic="icon">
+                  <mwc-list-item graphic="icon" .disabled=${this.disabled}>
                    ${this.action.enabled === false
                      ? this.hass.localize(
                          "ui.panel.config.automation.editor.actions.enable"
@@ -249,7 +251,11 @@ export default class HaAutomationActionRow extends LitElement {
                        : mdiStopCircleOutline}
                    ></ha-svg-icon>
                  </mwc-list-item>
-                  <mwc-list-item class="warning" graphic="icon">
+                  <mwc-list-item
                    class="warning"
                    graphic="icon"
                    .disabled=${this.disabled}
                  >
                    ${this.hass.localize(
                      "ui.panel.config.automation.editor.actions.delete"
                    )}
@@ -302,6 +308,7 @@ export default class HaAutomationActionRow extends LitElement {
                  <ha-yaml-editor
                    .hass=${this.hass}
                    .defaultValue=${this.action}
                    .readOnly=${this.disabled}
                    @value-changed=${this._onYamlChange}
                  ></ha-yaml-editor>
                `
@@ -312,6 +319,7 @@ export default class HaAutomationActionRow extends LitElement {
                      action: this.action,
                      narrow: this.narrow,
                      reOrderMode: this.reOrderMode,
                      disabled: this.disabled,
                    })}
                  </div>
                `}
@@ -404,11 +412,15 @@ export default class HaAutomationActionRow extends LitElement {
  private _onDelete() {
    showConfirmationDialog(this, {
      title: this.hass.localize(
        "ui.panel.config.automation.editor.actions.delete_confirm_title"
      ),
      text: this.hass.localize(
-        "ui.panel.config.automation.editor.actions.delete_confirm"
+        "ui.panel.config.automation.editor.actions.delete_confirm_text"
      ),
      dismissText: this.hass.localize("ui.common.cancel"),
      confirmText: this.hass.localize("ui.common.delete"),
      destructive: true,
      confirm: () => {
        fireEvent(this, "value-changed", { value: null });
      },
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -44,6 +44,8 @@ export default class HaAutomationAction extends LitElement {
  @property({ type: Boolean }) public narrow = false;
  @property({ type: Boolean }) public disabled = false;
  @property() public actions!: Action[];
  @property({ type: Boolean }) public reOrderMode = false;
@@ -65,6 +67,7 @@ export default class HaAutomationAction extends LitElement {
              .index=${idx}
              .action=${action}
              .narrow=${this.narrow}
              .disabled=${this.disabled}
              .hideMenu=${this.reOrderMode}
              .reOrderMode=${this.reOrderMode}
              @duplicate=${this._duplicateAction}
@@ -102,10 +105,15 @@ export default class HaAutomationAction extends LitElement {
          `
        )}
      </div>
-      <ha-button-menu fixed @action=${this._addAction}>
+      <ha-button-menu
        fixed
        @action=${this._addAction}
        .disabled=${this.disabled}
      >
        <mwc-button
          slot="trigger"
          outlined
          .disabled=${this.disabled}
          .label=${this.hass.localize(
            "ui.panel.config.automation.editor.actions.add"
          )}
--- a/src/panels/config/automation/action/types/ha-automation-action-activate_scene.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-activate_scene.ts
@@ -13,6 +13,8 @@ const includeDomains = ["scene"];
 export class HaSceneAction extends LitElement implements ActionElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
  @property({ type: Boolean }) public disabled = false;
  @property() public action!: SceneAction;
  public static get defaultConfig(): SceneAction {
@@ -41,6 +43,7 @@ export class HaSceneAction extends LitElement implements ActionElement {
          "ui.panel.config.automation.editor.actions.type.activate_scene.scene"
        )}
        .value=${scene}
        .disabled=${this.disabled}
        @value-changed=${this._entityPicked}
        .includeDomains=${includeDomains}
        allow-custom-entity
--- a/Show More
+++ b/Show More