Align entity registry buttons

.github/workflows/demo.yaml

@@ -27,7 +27,9 @@ jobs:
       - name: Build Demo
         run: ./node_modules/.bin/gulp build-demo
       - name: Deploy to Netlify
-        run: npx netlify-cli deploy --dir=demo/dist --prod
+        uses: netlify/actions/cli@master
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
+        with:
+          args: deploy --dir=demo/dist --prod

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@v6.0.1
+        uses: actions/stale@v5.1.1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

build-scripts/gulp/download_translations.js

@@ -1,12 +1,17 @@
+const del = require("del");
 const gulp = require("gulp");
 const fs = require("fs");
 const mapStream = require("map-stream");
 
 const inDirFrontend = "translations/frontend";
 const inDirBackend = "translations/backend";
+const downloadDir = "translations/downloads";
 const srcMeta = "src/translations/translationMetadata.json";
+
 const encoding = "utf8";
 
+const tasks = [];
+
 function hasHtml(data) {
   return /<[a-z][\s\S]*>/i.test(data);
 }
@@ -41,12 +46,20 @@ function checkHtml() {
   });
 }
 
-// Backend translations do not currently pass HTML check so are excluded here for now
+let taskName = "clean-downloaded-translations";
-gulp.task("check-translations-html", function () {
+gulp.task(taskName, function () {
-  return gulp.src([`${inDirFrontend}/*.json`]).pipe(checkHtml());
+  return del([`${downloadDir}/**`]);
 });
+tasks.push(taskName);
 
-gulp.task("check-all-files-exist", function () {
+taskName = "check-translations-html";
+gulp.task(taskName, function () {
+  return gulp.src(`${downloadDir}/*.json`).pipe(checkHtml());
+});
+tasks.push(taskName);
+
+taskName = "check-all-files-exist";
+gulp.task(taskName, function () {
   const file = fs.readFileSync(srcMeta, { encoding });
   const meta = JSON.parse(file);
   Object.keys(meta).forEach((lang) => {
@@ -59,8 +72,24 @@ gulp.task("check-all-files-exist", function () {
   });
   return Promise.resolve();
 });
+tasks.push(taskName);
 
+taskName = "move-downloaded-translations";
+gulp.task(taskName, function () {
+  return gulp.src(`${downloadDir}/*.json`).pipe(gulp.dest(inDirFrontend));
+});
+tasks.push(taskName);
+
+taskName = "check-downloaded-translations";
 gulp.task(
-  "check-downloaded-translations",
+  taskName,
-  gulp.series("check-translations-html", "check-all-files-exist")
+  gulp.series(
+    "check-translations-html",
+    "move-downloaded-translations",
+    "check-all-files-exist",
+    "clean-downloaded-translations"
+  )
 );
+tasks.push(taskName);
+
+module.exports = tasks;

demo/src/configs/arsaboo/entities.ts

@@ -508,7 +508,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         origin_addresses: ["XYZ"],
         status: "OK",
         mode: "driving",
-        units: "us_customary",
+        units: "imperial",
         duration_in_traffic: "41 mins",
         duration: "44 mins",
         distance: "34.3 mi",
@@ -527,7 +527,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         origin_addresses: ["XYZ"],
         status: "OK",
         mode: "driving",
-        units: "us_customary",
+        units: "imperial",
         duration_in_traffic: "37 mins",
         duration: "37 mins",
         distance: "30.2 mi",

demo/src/configs/jimpower/lovelace.ts

@@ -1196,7 +1196,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       left: "15%",
                     },
                     type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                   {
                     prefix: "Kitchen: ",
@@ -1206,7 +1206,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "32%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                   {
                     style: {
@@ -1215,7 +1215,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       left: "60%",
                     },
                     type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                   {
                     prefix: "Bathroom: ",
@@ -1225,7 +1225,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "77%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                 ],
                 type: "picture-elements",

demo/src/ha-demo.ts

@@ -20,7 +20,6 @@ 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";
@@ -46,7 +45,6 @@ class HaDemo extends HomeAssistantAppEl {
     mockAuth(hass);
     mockTranslations(hass);
     mockHistory(hass);
-    mockRecorder(hass);
     mockShoppingList(hass);
     mockSystemLog(hass);
     mockTemplate(hass);
@@ -63,14 +61,12 @@ class HaDemo extends HomeAssistantAppEl {
         area_id: null,
         disabled_by: null,
         entity_id: "sensor.co2_intensity",
-        id: "sensor.co2_intensity",
         name: null,
         icon: null,
         platform: "co2signal",
         hidden_by: null,
         entity_category: null,
         has_entity_name: false,
-        unique_id: "co2_intensity",
       },
       {
         config_entry_id: "co2signal",
@@ -78,14 +74,12 @@ class HaDemo extends HomeAssistantAppEl {
         area_id: null,
         disabled_by: null,
         entity_id: "sensor.grid_fossil_fuel_percentage",
-        id: "sensor.co2_intensity",
         name: null,
         icon: null,
         platform: "co2signal",
         hidden_by: null,
         entity_category: null,
         has_entity_name: false,
-        unique_id: "grid_fossil_fuel_percentage",
       },
     ]);
 
@@ -122,9 +116,3 @@ class HaDemo extends HomeAssistantAppEl {
 }
 
 customElements.define("ha-demo", HaDemo);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-demo": HaDemo;
-  }
-}

demo/src/stubs/energy.ts

@@ -1,101 +1,90 @@
 import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
-import {
+import { EnergySolarForecasts } from "../../../src/data/energy";
-  EnergyInfo,
-  EnergyPreferences,
-  EnergySolarForecasts,
-  FossilEnergyConsumption,
-} from "../../../src/data/energy";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEnergy = (hass: MockHomeAssistant) => {
-  hass.mockWS(
+  hass.mockWS("energy/get_prefs", () => ({
-    "energy/get_prefs",
+    energy_sources: [
-    (): EnergyPreferences => ({
+      {
-      energy_sources: [
+        type: "grid",
-        {
+        flow_from: [
-          type: "grid",
+          {
-          flow_from: [
+            stat_energy_from: "sensor.energy_consumption_tarif_1",
-            {
+            stat_cost: "sensor.energy_consumption_tarif_1_cost",
-              stat_energy_from: "sensor.energy_consumption_tarif_1",
+            entity_energy_from: "sensor.energy_consumption_tarif_1",
-              stat_cost: "sensor.energy_consumption_tarif_1_cost",
+            entity_energy_price: null,
-              entity_energy_price: null,
+            number_energy_price: null,
-              number_energy_price: null,
+          },
-            },
+          {
-            {
+            stat_energy_from: "sensor.energy_consumption_tarif_2",
-              stat_energy_from: "sensor.energy_consumption_tarif_2",
+            stat_cost: "sensor.energy_consumption_tarif_2_cost",
-              stat_cost: "sensor.energy_consumption_tarif_2_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_2",
-              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:
+            stat_compensation: "sensor.energy_production_tarif_1_compensation",
-                "sensor.energy_production_tarif_1_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_1",
-              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:
+            stat_compensation: "sensor.energy_production_tarif_2_compensation",
-                "sensor.energy_production_tarif_2_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_2",
-              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_price: null,
+        entity_energy_from: "sensor.energy_gas",
-          number_energy_price: null,
+        entity_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(
+  hass.mockWS("energy/info", () => ({ cost_sensors: [] }));
-    "energy/info",
+  hass.mockWS("energy/fossil_energy_consumption", ({ period }) => ({
-    (): EnergyInfo => ({ cost_sensors: {}, solar_forecast_domains: [] })
+    start: period === "month" ? 250 : period === "day" ? 10 : 2,
-  );
+  }));
-  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(

demo/src/stubs/history.ts

@@ -1,4 +1,12 @@
+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 {
@@ -64,6 +72,331 @@ 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/.+"),
@@ -133,4 +466,43 @@ 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;
+    }
+  );
 };

demo/src/stubs/recorder.ts

@@ -1,385 +0,0 @@
-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;
-    }
-  );
-};

gallery/src/pages/Text/remove-delete-add-create.markdown

@@ -1,56 +0,0 @@
----
-title: When to use remove, delete, add and create
-subtitle: The difference between remove/delete and add/create.
----
-
-# Remove vs Delete
-Remove and Delete are quite similar, but can be frustrating if used inconsistently.
-
-## Remove
-Take away and set aside, but kept in existence.
-
-For example:
-* Removing a user's permission
-* Removing a user from a group
-* Removing links between items
-* Removing a widget
-* Removing a link
-* Removing an item from a cart
-
-## Delete
-Erase, rendered nonexistent or nonrecoverable.
-
-For example:
-* Deleting a field
-* Deleting a value in a field
-* Deleting a task
-* Deleting a group
-* Deleting a permission
-* Deleting a calendar event
-
-# Add vs Create
-In most cases, Create can be paired with Delete, and Add can be paired with Remove.
-
-## Add
-An already-exisiting item.
-
-For example:
-* Adding a permission to a user
-* Adding a user to a group
-* Adding links between items
-* Adding a widget
-* Adding a link
-* Adding an item to a cart
-
-## Create
-Something made from scratch.
-
-For example:
-* Creating a new field
-* Creating a new value in a field
-* Creating a new task
-* Creating a new group
-* Creating a new permission
-* Creating a new calendar event
-
-Based on this is [UX magazine article](https://uxmag.com/articles/ui-copy-remove-vs-delete2-banner).

gallery/src/pages/automation/describe-condition.ts

@@ -36,7 +36,6 @@ 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" },
 ];

gallery/src/pages/automation/editor-action.ts

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html, css } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -47,8 +47,6 @@ 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() {
@@ -69,15 +67,6 @@ 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
@@ -92,7 +81,6 @@ class DemoHaAutomationEditorAction extends LitElement {
                     .hass=${this.hass}
                     .actions=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
-                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-action>
                 `
@@ -102,20 +90,6 @@ 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 {

gallery/src/pages/automation/editor-condition.ts

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html, css } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -83,8 +83,6 @@ 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() {
@@ -105,15 +103,6 @@ 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
@@ -128,7 +117,6 @@ class DemoHaAutomationEditorCondition extends LitElement {
                     .hass=${this.hass}
                     .conditions=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
-                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-condition>
                 `
@@ -138,20 +126,6 @@ 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 {

gallery/src/pages/automation/editor-trigger.ts

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html, css } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -107,8 +107,6 @@ 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() {
@@ -129,15 +127,6 @@ 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
@@ -152,7 +141,6 @@ class DemoHaAutomationEditorTrigger extends LitElement {
                     .hass=${this.hass}
                     .triggers=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
-                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-trigger>
                 `
@@ -162,20 +150,6 @@ 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 {

gallery/src/pages/brand/logo.markdown

@@ -2,6 +2,8 @@
 title: "Logo"
 ---
 
+![Using our logo](/images/using-our-logo.png)
+
 # Using our logo
 
 As a community, we are proud of our logo. Follow these guidelines to ensure it always looks its best. Our logo follows Google's material design spec and uses the blue interface color.

gallery/src/pages/components/dialogs.markdown

@@ -1,9 +1,9 @@
 ---
-title: Dialogs
+title: Dialgos
 subtitle: Dialogs provide important prompts in a user flow.
 ---
 
-# Material Design 3
+# Material Desing 3
 
 Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview). 
 

gallery/src/pages/components/ha-selector.ts

@@ -195,48 +195,6 @@ 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: {

gallery/src/pages/misc/integration-card.ts

@@ -191,12 +191,10 @@ const createEntityRegistryEntries = (
     hidden_by: null,
     entity_category: null,
     entity_id: "binary_sensor.updater",
-    id: "binary_sensor.updater",
     name: null,
     icon: null,
     platform: "updater",
     has_entity_name: false,
-    unique_id: "updater",
   },
 ];
 

gallery/src/pages/more-info/cover.ts

@@ -1,7 +1,16 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import { CoverEntityFeature } from "../../../../src/data/cover";
+import {
+  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 {
@@ -13,127 +22,113 @@ import "../../components/demo-more-infos";
 const ENTITIES = [
   getEntity("cover", "position_buttons", "on", {
     friendly_name: "Position Buttons",
-    supported_features:
+    supported_features: SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE,
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE,
   }),
   getEntity("cover", "position_slider_half", "on", {
     friendly_name: "Position Half-Open",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
     current_position: 50,
   }),
   getEntity("cover", "position_slider_open", "on", {
     friendly_name: "Position Open",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
     current_position: 100,
   }),
   getEntity("cover", "position_slider_closed", "on", {
     friendly_name: "Position Closed",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
     current_position: 0,
   }),
   getEntity("cover", "tilt_buttons", "on", {
     friendly_name: "Tilt Buttons",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT + SUPPORT_STOP_TILT + SUPPORT_CLOSE_TILT,
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
   }),
   getEntity("cover", "tilt_slider_half", "on", {
     friendly_name: "Tilt Half-Open",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 50,
   }),
   getEntity("cover", "tilt_slider_open", "on", {
     friendly_name: "Tilt Open",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 100,
   }),
   getEntity("cover", "tilt_slider_closed", "on", {
     friendly_name: "Tilt Closed",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 0,
   }),
   getEntity("cover", "position_slider_tilt_slider", "on", {
     friendly_name: "Both Sliders",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN +
-      CoverEntityFeature.STOP +
+      SUPPORT_STOP +
-      CoverEntityFeature.CLOSE +
+      SUPPORT_CLOSE +
-      CoverEntityFeature.SET_POSITION +
+      SUPPORT_SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_position: 30,
     current_tilt_position: 70,
   }),
   getEntity("cover", "position_tilt_slider", "on", {
     friendly_name: "Position & Tilt Slider",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN +
-      CoverEntityFeature.STOP +
+      SUPPORT_STOP +
-      CoverEntityFeature.CLOSE +
+      SUPPORT_CLOSE +
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 70,
   }),
   getEntity("cover", "position_slider_tilt", "on", {
     friendly_name: "Position Slider & Tilt",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN +
-      CoverEntityFeature.STOP +
+      SUPPORT_STOP +
-      CoverEntityFeature.CLOSE +
+      SUPPORT_CLOSE +
-      CoverEntityFeature.SET_POSITION +
+      SUPPORT_SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
+      SUPPORT_CLOSE_TILT,
     current_position: 30,
   }),
   getEntity("cover", "position_slider_only_tilt_slider", "on", {
     friendly_name: "Position Slider Only & Tilt Buttons",
     supported_features:
-      CoverEntityFeature.SET_POSITION +
+      SUPPORT_SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
+      SUPPORT_CLOSE_TILT,
     current_position: 30,
   }),
   getEntity("cover", "position_slider_only_tilt", "on", {
     friendly_name: "Position Slider Only & Tilt",
     supported_features:
-      CoverEntityFeature.SET_POSITION +
+      SUPPORT_SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_position: 30,
     current_tilt_position: 70,
   }),

gallery/src/pages/more-info/input-number.markdown

@@ -1,3 +0,0 @@
----
-title: Input Number
----

gallery/src/pages/more-info/input-number.ts

@@ -1,60 +0,0 @@
-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;
-  }
-}

gallery/src/pages/more-info/light.ts

@@ -1,7 +1,12 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import { LightColorMode, LightEntityFeature } from "../../../../src/data/light";
+import {
+  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 {
@@ -17,8 +22,8 @@ const ENTITIES = [
   getEntity("light", "kitchen_light", "on", {
     friendly_name: "Brightness Light",
     brightness: 200,
-    supported_color_modes: [LightColorMode.BRIGHTNESS],
+    supported_color_modes: [LightColorModes.BRIGHTNESS],
-    color_mode: LightColorMode.BRIGHTNESS,
+    color_mode: LightColorModes.BRIGHTNESS,
   }),
   getEntity("light", "color_temperature_light", "on", {
     friendly_name: "White Color Temperature Light",
@@ -27,10 +32,10 @@ const ENTITIES = [
     min_mireds: 30,
     max_mireds: 150,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
     ],
-    color_mode: LightColorMode.COLOR_TEMP,
+    color_mode: LightColorModes.COLOR_TEMP,
   }),
   getEntity("light", "color_hs_light", "on", {
     friendly_name: "Color HS Light",
@@ -39,16 +44,13 @@ const ENTITIES = [
     rgb_color: [30, 100, 255],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
-      LightColorMode.HS,
+      LightColorModes.HS,
     ],
-    color_mode: LightColorMode.HS,
+    color_mode: LightColorModes.HS,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgb_ct_light", "on", {
@@ -57,28 +59,22 @@ const ENTITIES = [
     color_temp: 75,
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
-      LightColorMode.RGB,
+      LightColorModes.RGB,
     ],
-    color_mode: LightColorMode.COLOR_TEMP,
+    color_mode: LightColorModes.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:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
+    supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB],
-      LightEntityFeature.FLASH +
+    color_mode: LightColorModes.RGB,
-      LightEntityFeature.TRANSITION,
-    supported_color_modes: [LightColorMode.BRIGHTNESS, LightColorMode.RGB],
-    color_mode: LightColorMode.RGB,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgbw_light", "on", {
@@ -87,16 +83,13 @@ const ENTITIES = [
     rgbw_color: [30, 100, 255, 125],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
-      LightColorMode.RGBW,
+      LightColorModes.RGBW,
     ],
-    color_mode: LightColorMode.RGBW,
+    color_mode: LightColorModes.RGBW,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgbww_light", "on", {
@@ -105,16 +98,13 @@ const ENTITIES = [
     rgbww_color: [30, 100, 255, 125, 10],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
-      LightColorMode.RGBWW,
+      LightColorModes.RGBWW,
     ],
-    color_mode: LightColorMode.RGBWW,
+    color_mode: LightColorModes.RGBWW,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_xy_light", "on", {
@@ -124,16 +114,13 @@ const ENTITIES = [
     rgb_color: [30, 100, 255],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
-      LightColorMode.XY,
+      LightColorModes.XY,
     ],
-    color_mode: LightColorMode.XY,
+    color_mode: LightColorModes.XY,
     effect_list: ["random", "colorloop"],
   }),
 ];

gallery/src/pages/more-info/update.ts

@@ -139,13 +139,6 @@ const ENTITIES = [
     title: undefined,
     friendly_name: "Installing without title",
   }),
-  getEntity("update", "update21", "on", {
-    ...base_attributes,
-    in_progress: true,
-    friendly_name: "Update with in_progress true and UPDATE_SUPPORT_PROGRESS",
-    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
-  }),
 ];
 
 @customElement("demo-more-info-update")

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -1024,13 +1024,10 @@ class HassioAddonInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize("dialog.uninstall_addon.title", {
+      title: this.addon.name,
-        name: this.addon.name,
+      text: "Are you sure you want to uninstall this add-on?",
-      }),
+      confirmText: "uninstall add-on",
-      text: this.supervisor.localize("dialog.uninstall_addon.text"),
+      dismissText: "no",
-      confirmText: this.supervisor.localize("dialog.uninstall_addon.uninstall"),
-      dismissText: this.supervisor.localize("common.cancel"),
-      destructive: true,
     });
 
     if (!confirmed) {

hassio/src/backups/hassio-backups.ts

@@ -119,7 +119,6 @@ export class HassioBackups extends LitElement {
     (narrow: boolean): DataTableColumnContainer => ({
       name: {
         title: this.supervisor.localize("backup.name"),
-        main: true,
         sortable: true,
         filterable: true,
         grows: true,

hassio/src/dialogs/suggestAddonRestart.ts

@@ -18,11 +18,9 @@ export const suggestAddonRestart = async (
   addon: HassioAddonDetails
 ): Promise<void> => {
   const confirmed = await showConfirmationDialog(element, {
-    title: supervisor.localize("dialog.restart_addon.title", {
+    title: supervisor.localize("common.restart_name", "name", addon.name),
-      name: addon.name,
-    }),
     text: supervisor.localize("dialog.restart_addon.text"),
-    confirmText: supervisor.localize("dialog.restart_addon.restart"),
+    confirmText: supervisor.localize("dialog.restart_addon.confirm_text"),
     dismissText: supervisor.localize("common.cancel"),
   });
   if (confirmed) {
@@ -30,9 +28,11 @@ export const suggestAddonRestart = async (
       await restartHassioAddon(hass, addon.slug);
     } catch (err: any) {
       showAlertDialog(element, {
-        title: supervisor.localize("common.failed_to_restart_name", {
+        title: supervisor.localize(
-          name: addon.name,
+          "common.failed_to_restart_name",
-        }),
+          "name",
+          addon.name
+        ),
         text: extractApiErrorMessage(err),
       });
     }

hassio/src/system/hassio-supervisor-info.ts

@@ -23,7 +23,6 @@ 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,
@@ -231,27 +230,36 @@ class HassioSupervisorInfo extends LitElement {
     button.progress = true;
 
     if (this.supervisor.supervisor.channel === "stable") {
-      showJoinBetaDialog(this, {
+      const confirmed = await showConfirmationDialog(this, {
-        join: async () => {
+        title: this.supervisor.localize("system.supervisor.warning"),
-          await this._setChannel("beta");
+        text: html`${this.supervisor.localize("system.supervisor.beta_warning")}
-          button.progress = false;
+          <br />
-        },
+          <b> ${this.supervisor.localize("system.supervisor.beta_backup")} </b>
-        cancel: () => {
+          <br /><br />
-          button.progress = false;
+          ${this.supervisor.localize("system.supervisor.beta_release_items")}
-        },
+          <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 {
-      await this._setChannel("stable");
-      button.progress = false;
-    }
-  }
 
-  private async _setChannel(
+      if (!confirmed) {
-    channel: SupervisorOptions["channel"]
+        button.progress = false;
-  ): Promise<void> {
+        return;
+      }
+    }
+
     try {
       const data: Partial<SupervisorOptions> = {
-        channel,
+        channel:
+          this.supervisor.supervisor.channel === "stable" ? "beta" : "stable",
       };
       await setSupervisorOption(this.hass, data);
       await this._reloadSupervisor();
@@ -262,6 +270,8 @@ class HassioSupervisorInfo extends LitElement {
         ),
         text: extractApiErrorMessage(err),
       });
+    } finally {
+      button.progress = false;
     }
   }
 

package.json

@@ -43,6 +43,7 @@
     "@formatjs/intl-numberformat": "^7.2.5",
     "@formatjs/intl-pluralrules": "^4.1.5",
     "@formatjs/intl-relativetimeformat": "^9.3.2",
+    "@formatjs/intl-utils": "^3.8.4",
     "@fullcalendar/common": "5.9.0",
     "@fullcalendar/core": "5.9.0",
     "@fullcalendar/daygrid": "5.9.0",
@@ -92,8 +93,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/combo-box": "^23.2.0",
+    "@vaadin/combo-box": "^23.1.5",
-    "@vaadin/vaadin-themable-mixin": "^23.2.0",
+    "@vaadin/vaadin-themable-mixin": "^23.1.5",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -110,7 +111,7 @@
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.2.3",
+    "hls.js": "^1.2.1",
     "home-assistant-js-websocket": "^8.0.0",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
@@ -137,7 +138,6 @@
     "vis-network": "^8.5.4",
     "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
-    "weekstart": "^1.1.0",
     "workbox-cacheable-response": "^6.4.2",
     "workbox-core": "^6.4.2",
     "workbox-expiration": "^6.4.2",
@@ -253,5 +253,5 @@
     "trailingComma": "es5",
     "arrowParens": "always"
   },
-  "packageManager": "yarn@3.2.3"
+  "packageManager": "yarn@3.2.0"
 }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20221021.0"
+version      = "20220816.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

script/core

@@ -46,14 +46,6 @@ 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"

script/translations_download

@@ -20,28 +20,24 @@ fi
 # Load token from file if not already in the environment
 [ -z "${LOKALISE_TOKEN-}" ] && LOKALISE_TOKEN="$(<.lokalise_token)"
 
-declare -A PROJECT_ID=( \
+PROJECT_ID="3420425759f6d6d241f598.13594006"
-    [frontend]="3420425759f6d6d241f598.13594006" \
+LOCAL_DIR="$(pwd)/translations/downloads"
-    [backend]="130246255a974bd3b5e8a1.51616605" \
+FILE_FORMAT=json
-    )
 
-for project in ${!PROJECT_ID[*]}; do
+mkdir -p ${LOCAL_DIR}
-LOCAL_DIR=`pwd`/translations/${project}
+
-rm -f ${LOCAL_DIR}/* || mkdir -p ${LOCAL_DIR}
+docker run \
-    docker run \
+     -v ${LOCAL_DIR}:/opt/dest/locale \
-        -v ${LOCAL_DIR}:/opt/dest/locale \
+     --rm \
-        --rm \
+     lokalise/lokalise-cli-2@sha256:f1860b26be22fa73b8c93bc5f8690f2afc867610a42de6fc27adc790e5d4425d lokalise2 \
-        lokalise/lokalise-cli-2@sha256:f1860b26be22fa73b8c93bc5f8690f2afc867610a42de6fc27adc790e5d4425d \
+     --token ${LOKALISE_TOKEN} \
-        lokalise2 \
+     --project-id ${PROJECT_ID} \
-            --token ${LOKALISE_TOKEN} \
+     file download \
-            --project-id ${PROJECT_ID[${project}]} \
+     --export-empty-as skip \
-            file download \
+     --format json \
-            --export-empty-as skip \
+     --json-unescaped-slashes=true \
-            --format json \
+     --replace-breaks=false \
-            --json-unescaped-slashes=true \
+     --original-filenames=false \
-            --replace-breaks=false \
+     --unzip-to /opt/dest
-            --original-filenames=false \
-            --unzip-to /opt/dest
-done
 
 ./node_modules/.bin/gulp check-downloaded-translations

src/common/color/compute-color.ts

@@ -1,44 +0,0 @@
-import { hex2rgb } from "./convert-color";
-
-export const THEME_COLORS = new Set(["primary", "accent", "disabled"]);
-
-export const COLORS = new Map([
-  ["red", "#f44336"],
-  ["pink", "#e91e63"],
-  ["purple", "#9b27b0"],
-  ["deep-purple", "#683ab7"],
-  ["indigo", "#3f51b5"],
-  ["blue", "#2194f3"],
-  ["light-blue", "#2196f3"],
-  ["cyan", "#03a8f4"],
-  ["teal", "#009688"],
-  ["green", "#4caf50"],
-  ["light-green", "#8bc34a"],
-  ["lime", "#ccdc39"],
-  ["yellow", "#ffeb3b"],
-  ["amber", "#ffc107"],
-  ["orange", "#ff9800"],
-  ["deep-orange", "#ff5722"],
-  ["brown", "#795548"],
-  ["grey", "#9e9e9e"],
-  ["blue-grey", "#607d8b"],
-  ["black", "#000000"],
-  ["white", "ffffff"],
-]);
-
-export function computeRgbColor(color: string): string {
-  if (THEME_COLORS.has(color)) {
-    return `var(--rgb-${color}-color)`;
-  }
-  if (COLORS.has(color)) {
-    return hex2rgb(COLORS.get(color)!).join(", ");
-  }
-  if (color.startsWith("#")) {
-    try {
-      return hex2rgb(color).join(", ");
-    } catch (err) {
-      return "";
-    }
-  }
-  return color;
-}

src/common/const.ts

@@ -6,7 +6,6 @@ import {
   mdiAlert,
   mdiAngleAcute,
   mdiAppleSafari,
-  mdiArrowLeftRight,
   mdiBell,
   mdiBookmark,
   mdiBrightness5,
@@ -26,6 +25,7 @@ import {
   mdiFlower,
   mdiFormatListBulleted,
   mdiFormTextbox,
+  mdiGasCylinder,
   mdiGauge,
   mdiGestureTapButton,
   mdiGoogleAssistant,
@@ -37,28 +37,23 @@ import {
   mdiLightningBolt,
   mdiMailbox,
   mdiMapMarkerRadius,
-  mdiMeterGas,
-  mdiMicrophoneMessage,
   mdiMolecule,
   mdiMoleculeCo,
   mdiMoleculeCo2,
   mdiPalette,
-  mdiProgressClock,
   mdiRayVertex,
   mdiRemote,
   mdiRobot,
   mdiRobotVacuum,
   mdiScriptText,
   mdiSineWave,
-  mdiSpeedometer,
+  mdiMicrophoneMessage,
   mdiThermometer,
   mdiThermostat,
   mdiTimerOutline,
   mdiVideo,
   mdiWaterPercent,
   mdiWeatherCloudy,
-  mdiWeatherPouring,
-  mdiWeight,
   mdiWhiteBalanceSunny,
   mdiWifi,
 } from "@mdi/js";
@@ -126,14 +121,11 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   carbon_monoxide: mdiMoleculeCo,
   current: mdiCurrentAc,
   date: mdiCalendar,
-  distance: mdiArrowLeftRight,
-  duration: mdiProgressClock,
   energy: mdiLightningBolt,
   frequency: mdiSineWave,
-  gas: mdiMeterGas,
+  gas: mdiGasCylinder,
   humidity: mdiWaterPercent,
   illuminance: mdiBrightness5,
-  moisture: mdiWaterPercent,
   monetary: mdiCash,
   nitrogen_dioxide: mdiMolecule,
   nitrogen_monoxide: mdiMolecule,
@@ -144,18 +136,14 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   pm25: mdiMolecule,
   power: mdiFlash,
   power_factor: mdiAngleAcute,
-  precipitation_intensity: mdiWeatherPouring,
   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. */

src/common/datetime/first_weekday.ts

@@ -1,29 +0,0 @@
-import { getWeekStartByLocale } from "weekstart";
-import { FrontendLocaleData, FirstWeekday } from "../../data/translation";
-
-export const weekdays = [
-  "sunday",
-  "monday",
-  "tuesday",
-  "wednesday",
-  "thursday",
-  "friday",
-  "saturday",
-] as const;
-
-export const firstWeekdayIndex = (locale: FrontendLocaleData): number => {
-  if (locale.first_weekday === FirstWeekday.language) {
-    // @ts-ignore
-    if ("weekInfo" in Intl.Locale.prototype) {
-      // @ts-ignore
-      return new Intl.Locale(locale.language).weekInfo.firstDay % 7;
-    }
-    return getWeekStartByLocale(locale.language) % 7;
-  }
-  return weekdays.indexOf(locale.first_weekday);
-};
-
-export const firstWeekday = (locale: FrontendLocaleData) => {
-  const index = firstWeekdayIndex(locale);
-  return weekdays[index];
-};

src/common/datetime/format_duration.ts

@@ -1,28 +0,0 @@
-import { HaDurationData } from "../../components/ha-duration-input";
-
-const leftPad = (num: number) => (num < 10 ? `0${num}` : num);
-
-export const formatDuration = (duration: HaDurationData) => {
-  const d = duration.days || 0;
-  const h = duration.hours || 0;
-  const m = duration.minutes || 0;
-  const s = duration.seconds || 0;
-  const ms = duration.milliseconds || 0;
-
-  if (d > 0) {
-    return `${d} day${d === 1 ? "" : "s"} ${h}:${leftPad(m)}:${leftPad(s)}`;
-  }
-  if (h > 0) {
-    return `${h}:${leftPad(m)}:${leftPad(s)}`;
-  }
-  if (m > 0) {
-    return `${m}:${leftPad(s)}`;
-  }
-  if (s > 0) {
-    return `${s} second${s === 1 ? "" : "s"}`;
-  }
-  if (ms > 0) {
-    return `${ms} millisecond${ms === 1 ? "" : "s"}`;
-  }
-  return null;
-};

src/common/datetime/relative_time.ts

@@ -1,7 +1,7 @@
+import { selectUnit } from "@formatjs/intl-utils";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
 import { polyfillsLoaded } from "../translations/localize";
-import { selectUnit } from "../util/select-unit";
 
 if (__BUILD__ === "latest" && polyfillsLoaded) {
   await polyfillsLoaded;

src/common/entity/compute_state_display.ts

@@ -2,18 +2,17 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import {
-  updateIsInstallingFromAttributes,
   UPDATE_SUPPORT_PROGRESS,
+  updateIsInstallingFromAttributes,
 } from "../../data/update";
-import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
 import { formatNumber, isNumericFromAttributes } from "../number/format_number";
-import { blankBeforePercent } from "../translations/blank_before_percent";
 import { LocalizeFunc } from "../translations/localize";
-import { computeDomain } from "./compute_domain";
 import { supportsFeatureFromAttributes } from "./supports-feature";
+import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
+import { computeDomain } from "./compute_domain";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
@@ -68,7 +67,7 @@ export const computeStateDisplayFromEntityAttributes = (
     const unit = !attributes.unit_of_measurement
       ? ""
       : attributes.unit_of_measurement === "%"
-      ? blankBeforePercent(locale) + "%"
+      ? "%"
       : ` ${attributes.unit_of_measurement}`;
     return `${formatNumber(state, locale)}${unit}`;
   }
@@ -169,8 +168,7 @@ export const computeStateDisplayFromEntityAttributes = (
     // When update is not available and there is no latest_version show "Unavailable"
     return state === "on"
       ? updateIsInstallingFromAttributes(attributes)
-        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS) &&
+        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS)
-          typeof attributes.in_progress === "number"
           ? localize("ui.card.update.installing_with_progress", {
               progress: attributes.in_progress,
             })

src/common/entity/feature_class_names.ts

@@ -1,14 +1,10 @@
 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: FeatureClassNames
+  classNames: { [feature: number]: string }
 ) => {
   if (!stateObj || !stateObj.attributes.supported_features) {
     return "";

src/common/entity/get_states.ts

@@ -37,7 +37,6 @@ 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: [
@@ -240,13 +239,10 @@ export const getStates = (
       }
       break;
     case "light":
-      if (attribute === "effect" && state.attributes.effect_list) {
+      if (attribute === "effect") {
         result.push(...state.attributes.effect_list);
-      } else if (
+      } else if (attribute === "color_mode") {
-        attribute === "color_mode" &&
+        result.push(...state.attributes.color_modes);
-        state.attributes.supported_color_modes
-      ) {
-        result.push(...state.attributes.supported_color_modes);
       }
       break;
     case "media_player":

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 (!isComponentLoaded(hass, "zwave_js") || !entries.length) {
+    if (!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: () => {
-          showConfigFlowDialog(element, {
+          fireEvent(element, "handler-picked", {
-            startFlowHandler: "zwave_js",
+            handler: "zwave_js",
           });
         },
       });
@@ -75,8 +75,8 @@ export const protocolIntegrationPicked = async (
           "ui.panel.config.integrations.config_flow.proceed"
         ),
         confirm: () => {
-          showConfigFlowDialog(element, {
+          fireEvent(element, "handler-picked", {
-            startFlowHandler: "zha",
+            handler: "zha",
           });
         },
       });

src/common/number/format_number.ts

@@ -34,7 +34,7 @@ export const numberFormatToLocale = (
  * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
  *
  * @param num The number to format
- * @param localeOptions The user-selected language and formatting, from `hass.locale`
+ * @param locale The user-selected language and number format, from `hass.locale`
  * @param options Intl.NumberFormatOptions to use
  */
 export const formatNumber = (

src/common/string/title-case.ts

@@ -1,4 +0,0 @@
-export const titleCase = (s) =>
-  s.replace(/^_*(.)|_+(.)/g, (_s, c, d) =>
-    c ? c.toUpperCase() : " " + d.toUpperCase()
-  );

src/common/translations/blank_before_percent.ts

@@ -1,18 +0,0 @@
-import { FrontendLocaleData } from "../../data/translation";
-
-// Logic based on https://en.wikipedia.org/wiki/Percent_sign#Form_and_spacing
-export const blankBeforePercent = (
-  localeOptions: FrontendLocaleData
-): string => {
-  switch (localeOptions.language) {
-    case "cz":
-    case "de":
-    case "fi":
-    case "fr":
-    case "sk":
-    case "sv":
-      return " ";
-    default:
-      return "";
-  }
-};

src/common/translations/localize.ts

@@ -22,7 +22,9 @@ export type LocalizeKeys =
   | `ui.components.selectors.file.${string}`
   | `ui.dialogs.entity_registry.editor.${string}`
   | `ui.dialogs.more_info_control.vacuum.${string}`
+  | `ui.dialogs.options_flow.loading.${string}`
   | `ui.dialogs.quick-bar.commands.${string}`
+  | `ui.dialogs.repair_flow.loading.${string}`
   | `ui.dialogs.unhealthy.reason.${string}`
   | `ui.dialogs.unsupported.reason.${string}`
   | `ui.panel.config.${string}.${"caption" | "description"}`
@@ -32,6 +34,7 @@ export type LocalizeKeys =
   | `ui.panel.config.energy.${string}`
   | `ui.panel.config.helpers.${string}`
   | `ui.panel.config.info.${string}`
+  | `ui.panel.config.integrations.${string}`
   | `ui.panel.config.logs.${string}`
   | `ui.panel.config.lovelace.${string}`
   | `ui.panel.config.network.${string}`
@@ -39,6 +42,7 @@ export type LocalizeKeys =
   | `ui.panel.config.url.${string}`
   | `ui.panel.config.zha.${string}`
   | `ui.panel.config.zwave_js.${string}`
+  | `ui.panel.developer-tools.tabs.${string}`
   | `ui.panel.lovelace.card.${string}`
   | `ui.panel.lovelace.editor.${string}`
   | `ui.panel.page-authorize.form.${string}`

src/common/util/select-unit.ts

@@ -1,97 +0,0 @@
-export type Unit =
-  | "second"
-  | "minute"
-  | "hour"
-  | "day"
-  | "week"
-  | "month"
-  | "quarter"
-  | "year";
-
-const MS_PER_SECOND = 1e3;
-const SECS_PER_MIN = 60;
-const SECS_PER_HOUR = SECS_PER_MIN * 60;
-const SECS_PER_DAY = SECS_PER_HOUR * 24;
-const SECS_PER_WEEK = SECS_PER_DAY * 7;
-
-// Adapted from https://github.com/formatjs/formatjs/blob/186cef62f980ec66252ee232f438a42d0b51b9f9/packages/intl-utils/src/diff.ts
-export function selectUnit(
-  from: Date | number,
-  to: Date | number = Date.now(),
-  thresholds: Partial<Thresholds> = {}
-): { value: number; unit: Unit } {
-  const resolvedThresholds: Thresholds = {
-    ...DEFAULT_THRESHOLDS,
-    ...(thresholds || {}),
-  };
-
-  const secs = (+from - +to) / MS_PER_SECOND;
-  if (Math.abs(secs) < resolvedThresholds.second) {
-    return {
-      value: Math.round(secs),
-      unit: "second",
-    };
-  }
-
-  const mins = secs / SECS_PER_MIN;
-  if (Math.abs(mins) < resolvedThresholds.minute) {
-    return {
-      value: Math.round(mins),
-      unit: "minute",
-    };
-  }
-
-  const hours = secs / SECS_PER_HOUR;
-  if (Math.abs(hours) < resolvedThresholds.hour) {
-    return {
-      value: Math.round(hours),
-      unit: "hour",
-    };
-  }
-
-  const days = secs / SECS_PER_DAY;
-  if (Math.abs(days) < resolvedThresholds.day) {
-    return {
-      value: Math.round(days),
-      unit: "day",
-    };
-  }
-
-  const weeks = secs / SECS_PER_WEEK;
-  if (Math.abs(weeks) < resolvedThresholds.week) {
-    return {
-      value: Math.round(weeks),
-      unit: "week",
-    };
-  }
-
-  const fromDate = new Date(from);
-  const toDate = new Date(to);
-  const years = fromDate.getFullYear() - toDate.getFullYear();
-  const months = years * 12 + fromDate.getMonth() - toDate.getMonth();
-  if (Math.round(Math.abs(months)) < resolvedThresholds.month) {
-    return {
-      value: Math.round(months),
-      unit: "month",
-    };
-  }
-
-  return {
-    value: Math.round(years),
-    unit: "year",
-  };
-}
-
-type Thresholds = Record<
-  "second" | "minute" | "hour" | "day" | "week" | "month",
-  number
->;
-
-export const DEFAULT_THRESHOLDS: Thresholds = {
-  second: 45, // seconds to minute
-  minute: 45, // minutes to hour
-  hour: 22, // hour to day
-  day: 5, // day to week
-  week: 4, // week to months
-  month: 11, // month to years
-};

src/components/chart/state-history-chart-timeline.ts

@@ -118,9 +118,101 @@ export class StateHistoryChartTimeline extends LitElement {
 
   public willUpdate(changedProps: PropertyValues) {
     if (!this.hasUpdated) {
-      this._createOptions();
+      const narrow = this.narrow;
+      this._chartOptions = {
+        maintainAspectRatio: false,
+        parsing: false,
+        animation: false,
+        scales: {
+          x: {
+            type: "timeline",
+            position: "bottom",
+            adapters: {
+              date: {
+                locale: this.hass.locale,
+              },
+            },
+            suggestedMin: this.startTime,
+            suggestedMax: this.endTime,
+            ticks: {
+              autoSkip: true,
+              maxRotation: 0,
+              sampleSize: 5,
+              autoSkipPadding: 20,
+              major: {
+                enabled: true,
+              },
+              font: (context) =>
+                context.tick && context.tick.major
+                  ? ({ weight: "bold" } as any)
+                  : {},
+            },
+            grid: {
+              offset: false,
+            },
+            time: {
+              tooltipFormat: "datetimeseconds",
+            },
+          },
+          y: {
+            type: "category",
+            barThickness: 20,
+            offset: true,
+            grid: {
+              display: false,
+              drawBorder: false,
+              drawTicks: false,
+            },
+            ticks: {
+              display:
+                this.chunked || !this.isSingleDevice || this.data.length !== 1,
+            },
+            afterSetDimensions: (y) => {
+              y.maxWidth = y.chart.width * 0.18;
+            },
+            afterFit: (scaleInstance) => {
+              if (this.chunked) {
+                // ensure all the chart labels are the same width
+                scaleInstance.width = narrow ? 105 : 185;
+              }
+            },
+            position: computeRTL(this.hass) ? "right" : "left",
+          },
+        },
+        plugins: {
+          tooltip: {
+            mode: "nearest",
+            callbacks: {
+              title: (context) =>
+                context![0].chart!.data!.labels![
+                  context[0].datasetIndex
+                ] as string,
+              beforeBody: (context) => context[0].dataset.label || "",
+              label: (item) => {
+                const d = item.dataset.data[item.dataIndex] as TimeLineData;
+                return [
+                  d.label || "",
+                  formatDateTimeWithSeconds(d.start, this.hass.locale),
+                  formatDateTimeWithSeconds(d.end, this.hass.locale),
+                ];
+              },
+              labelColor: (item) => ({
+                borderColor: (item.dataset.data[item.dataIndex] as TimeLineData)
+                  .color!,
+                backgroundColor: (
+                  item.dataset.data[item.dataIndex] as TimeLineData
+                ).color!,
+              }),
+            },
+          },
+          filler: {
+            propagate: true,
+          },
+        },
+        // @ts-expect-error
+        locale: numberFormatToLocale(this.hass.locale),
+      };
     }
-
     if (
       changedProps.has("data") ||
       this._chartTime <
@@ -130,107 +222,6 @@ export class StateHistoryChartTimeline extends LitElement {
       // so the X axis grows even if there is no new data
       this._generateData();
     }
-
-    if (changedProps.has("startTime") || changedProps.has("endTime")) {
-      this._createOptions();
-    }
-  }
-
-  private _createOptions() {
-    const narrow = this.narrow;
-    this._chartOptions = {
-      maintainAspectRatio: false,
-      parsing: false,
-      animation: false,
-      scales: {
-        x: {
-          type: "timeline",
-          position: "bottom",
-          adapters: {
-            date: {
-              locale: this.hass.locale,
-            },
-          },
-          suggestedMin: this.startTime,
-          suggestedMax: this.endTime,
-          ticks: {
-            autoSkip: true,
-            maxRotation: 0,
-            sampleSize: 5,
-            autoSkipPadding: 20,
-            major: {
-              enabled: true,
-            },
-            font: (context) =>
-              context.tick && context.tick.major
-                ? ({ weight: "bold" } as any)
-                : {},
-          },
-          grid: {
-            offset: false,
-          },
-          time: {
-            tooltipFormat: "datetimeseconds",
-          },
-        },
-        y: {
-          type: "category",
-          barThickness: 20,
-          offset: true,
-          grid: {
-            display: false,
-            drawBorder: false,
-            drawTicks: false,
-          },
-          ticks: {
-            display:
-              this.chunked || !this.isSingleDevice || this.data.length !== 1,
-          },
-          afterSetDimensions: (y) => {
-            y.maxWidth = y.chart.width * 0.18;
-          },
-          afterFit: (scaleInstance) => {
-            if (this.chunked) {
-              // ensure all the chart labels are the same width
-              scaleInstance.width = narrow ? 105 : 185;
-            }
-          },
-          position: computeRTL(this.hass) ? "right" : "left",
-        },
-      },
-      plugins: {
-        tooltip: {
-          mode: "nearest",
-          callbacks: {
-            title: (context) =>
-              context![0].chart!.data!.labels![
-                context[0].datasetIndex
-              ] as string,
-            beforeBody: (context) => context[0].dataset.label || "",
-            label: (item) => {
-              const d = item.dataset.data[item.dataIndex] as TimeLineData;
-              return [
-                d.label || "",
-                formatDateTimeWithSeconds(d.start, this.hass.locale),
-                formatDateTimeWithSeconds(d.end, this.hass.locale),
-              ];
-            },
-            labelColor: (item) => ({
-              borderColor: (item.dataset.data[item.dataIndex] as TimeLineData)
-                .color!,
-              backgroundColor: (
-                item.dataset.data[item.dataIndex] as TimeLineData
-              ).color!,
-            }),
-          },
-        },
-        filler: {
-          propagate: true,
-        },
-      },
-      // @ts-expect-error
-      locale: numberFormatToLocale(this.hass.locale),
-    };
   }
 
   private _generateData() {

src/components/chart/statistics-chart.ts

@@ -13,7 +13,6 @@ 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 {
@@ -21,38 +20,31 @@ import {
   numberFormatToLocale,
 } from "../../common/number/format_number";
 import {
-  getDisplayUnit,
+  getStatisticIds,
   getStatisticLabel,
-  getStatisticMetadata,
   Statistics,
   statisticsHaveType,
+  StatisticsMetaData,
   StatisticType,
-} from "../../data/recorder";
+} from "../../data/history";
 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<ExtendedStatisticType> = [
+  @property({ type: Array }) public statTypes: Array<StatisticType> = [
     "sum",
     "min",
     "mean",
@@ -199,28 +191,18 @@ class StatisticsChart extends LitElement {
     };
   }
 
-  private _getStatisticsMetaData = memoizeOne(
+  private async _getStatisticIds() {
-    async (statisticIds: string[] | undefined) => {
+    this.statisticIds = await getStatisticIds(this.hass);
-      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;
     }
 
-    const statisticsMetaData = await this._getStatisticsMetaData(
+    if (!this.statisticIds) {
-      Object.keys(this.statisticsData)
+      await this._getStatisticIds();
-    );
+    }
 
     let colorIndex = 0;
     const statisticsData = Object.values(this.statisticsData);
@@ -251,7 +233,9 @@ class StatisticsChart extends LitElement {
     const names = this.names || {};
     statisticsData.forEach((stats) => {
       const firstStat = stats[0];
-      const meta = statisticsMetaData?.[firstStat.statistic_id];
+      const meta = this.statisticIds!.find(
+        (stat) => stat.statistic_id === firstStat.statistic_id
+      );
       let name = names[firstStat.statistic_id];
       if (!name) {
         name = getStatisticLabel(this.hass, firstStat.statistic_id, meta);
@@ -259,11 +243,8 @@ class StatisticsChart extends LitElement {
 
       if (!this.unit) {
         if (unit === undefined) {
-          unit = getDisplayUnit(this.hass, firstStat.statistic_id, meta);
+          unit = meta?.display_unit_of_measurement;
-        } else if (
+        } else if (unit !== meta?.display_unit_of_measurement) {
-          unit !== getDisplayUnit(this.hass, firstStat.statistic_id, meta)
-        ) {
-          // Clear unit if not all statistics have same unit
           unit = null;
         }
       }
@@ -320,7 +301,7 @@ class StatisticsChart extends LitElement {
         : this.statTypes;
 
       sortedTypes.forEach((type) => {
-        if (statisticsHaveType(stats, statTypeMap[type])) {
+        if (statisticsHaveType(stats, type)) {
           const band = drawBands && (type === "min" || type === "max");
           statTypes.push(type);
           statDataSets.push({
@@ -348,6 +329,7 @@ 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);
@@ -359,11 +341,11 @@ class StatisticsChart extends LitElement {
         statTypes.forEach((type) => {
           let val: number | null;
           if (type === "sum") {
-            if (prevSum === null) {
+            if (initVal === null) {
-              val = 0;
+              initVal = val = stat.state || 0;
               prevSum = stat.sum;
             } else {
-              val = (stat.sum || 0) - prevSum;
+              val = initVal + ((stat.sum || 0) - prevSum!);
             }
           } else {
             val = stat[type];

src/components/data-table/ha-data-table.ts

@@ -69,7 +69,6 @@ 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";
@@ -407,7 +406,7 @@ export class HaDataTable extends LitElement {
           }
           return html`
             <div
-              role=${column.main ? "rowheader" : "cell"}
+              role="cell"
               class="mdc-data-table__cell ${classMap({
                 "mdc-data-table__cell--numeric": column.type === "numeric",
                 "mdc-data-table__cell--icon": column.type === "icon",

src/components/date-range-picker.ts

@@ -33,10 +33,6 @@ const Component = Vue.extend({
         return new Date();
       },
     },
-    firstDay: {
-      type: Number,
-      default: 1,
-    },
   },
   render(createElement) {
     // @ts-ignore
@@ -52,10 +48,6 @@ const Component = Vue.extend({
         disabled: this.disabled,
         // @ts-ignore
         ranges: this.ranges ? {} : false,
-        "locale-data": {
-          // @ts-ignore
-          firstDay: this.firstDay,
-        },
       },
       model: {
         value: {
@@ -111,14 +103,14 @@ class DateRangePickerElement extends WrappedElement {
           .daterangepicker {
             left: 0px !important;
             top: auto;
-            box-shadow: var(--ha-card-box-shadow, none);
             background-color: var(--card-background-color);
-            border-radius: var(--ha-card-border-radius, 16px);
+            border: none;
-            border-width: var(--ha-card-border-width, 1px);
+            border-radius: var(--ha-card-border-radius, 4px);
-            border-style: solid;
+            box-shadow: var(
-            border-color: var(
+              --ha-card-box-shadow,
-              --ha-card-border-color,
+              0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-              var(--divider-color, #e0e0e0)
+              0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+              0px 1px 3px 0px rgba(0, 0, 0, 0.12)
             );
             color: var(--primary-text-color);
             min-width: initial !important;

src/components/device/ha-device-picker.ts

@@ -221,14 +221,12 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     }
   );
 
-  public async open() {
+  public open() {
-    await this.updateComplete;
+    this.comboBox?.open();
-    await this.comboBox?.open();
   }
 
-  public async focus() {
+  public focus() {
-    await this.updateComplete;
+    this.comboBox?.focus();
-    await this.comboBox?.focus();
   }
 
   public hassSubscribe(): UnsubscribeFunc[] {
@@ -248,7 +246,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   protected updated(changedProps: PropertyValues) {
     if (
       (!this._init && this.devices && this.areas && this.entities) ||
-      (this._init && changedProps.has("_opened") && this._opened)
+      (changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
       (this.comboBox as any).items = this._getDevices(
@@ -264,6 +262,9 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
+    if (!this.devices || !this.areas || !this.entities) {
+      return html``;
+    }
     return html`
       <ha-combo-box
         .hass=${this.hass}

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

@@ -107,14 +107,16 @@ export class HaEntityPicker extends LitElement {
 
   @query("ha-combo-box", true) public comboBox!: HaComboBox;
 
-  public async open() {
+  public open() {
-    await this.updateComplete;
+    this.updateComplete.then(() => {
-    await this.comboBox?.open();
+      this.comboBox?.open();
+    });
   }
 
-  public async focus() {
+  public focus() {
-    await this.updateComplete;
+    this.updateComplete.then(() => {
-    await this.comboBox?.focus();
+      this.comboBox?.focus();
+    });
   }
 
   private _initedStates = false;
@@ -310,7 +312,6 @@ 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}

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

@@ -7,8 +7,6 @@ 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;
 
@@ -57,7 +55,7 @@ class HaEntityStatePicker extends LitElement {
                     this.hass.locale,
                     key
                   )
-                : formatAttributeValue(this.hass, key),
+                : key,
             }))
           : [];
     }
@@ -71,7 +69,16 @@ 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")}
@@ -88,28 +95,12 @@ 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>) {
-    ev.stopPropagation();
+    this.value = ev.detail.value;
-    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);
   }
 }
 

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

@@ -3,14 +3,10 @@ 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 {
+import { getStatisticIds, StatisticsMetaData } from "../../data/history";
-  getStatisticIds,
-  getStatisticLabel,
-  StatisticsMetaData,
-} from "../../data/recorder";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
@@ -43,14 +39,23 @@ export class HaStatisticPicker extends LitElement {
     type: Array,
     attribute: "include-statistics-unit-of-measurement",
   })
-  public includeStatisticsUnitOfMeasurement?: string | string[];
+  public includeStatisticsUnitOfMeasurement?: string[];
 
   /**
-   * Show only statistics with these unit classes.
+   * Show only statistics displayed with these units of measurements.
-   * @attr include-unit-class
+   * @type {Array}
+   * @attr include-display-unit-of-measurement
    */
-  @property({ attribute: "include-unit-class" })
+  @property({ type: Array, attribute: "include-display-unit-of-measurement" })
-  public includeUnitClass?: string | string[];
+  public includeDisplayUnitOfMeasurement?: 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.
@@ -92,8 +97,9 @@ export class HaStatisticPicker extends LitElement {
   private _getStatistics = memoizeOne(
     (
       statisticIds: StatisticsMetaData[],
-      includeStatisticsUnitOfMeasurement?: string | string[],
+      includeStatisticsUnitOfMeasurement?: string[],
-      includeUnitClass?: string | string[],
+      includeDisplayUnitOfMeasurement?: string[],
+      includeDeviceClasses?: string[],
       entitiesOnly?: boolean
     ): Array<{ id: string; name: string; state?: HassEntity }> => {
       if (!statisticIds.length) {
@@ -108,18 +114,17 @@ export class HaStatisticPicker extends LitElement {
       }
 
       if (includeStatisticsUnitOfMeasurement) {
-        const includeUnits: (string | null)[] = ensureArray(
-          includeStatisticsUnitOfMeasurement
-        );
         statisticIds = statisticIds.filter((meta) =>
-          includeUnits.includes(meta.statistics_unit_of_measurement)
+          includeStatisticsUnitOfMeasurement.includes(
+            meta.statistics_unit_of_measurement
+          )
         );
       }
-      if (includeUnitClass) {
+      if (includeDisplayUnitOfMeasurement) {
-        const includeUnitClasses: (string | null)[] =
-          ensureArray(includeUnitClass);
         statisticIds = statisticIds.filter((meta) =>
-          includeUnitClasses.includes(meta.unit_class)
+          includeDisplayUnitOfMeasurement.includes(
+            meta.display_unit_of_measurement
+          )
         );
       }
 
@@ -134,16 +139,23 @@ export class HaStatisticPicker extends LitElement {
           if (!entitiesOnly) {
             output.push({
               id: meta.statistic_id,
-              name: getStatisticLabel(this.hass, meta.statistic_id, meta),
+              name: meta.name || meta.statistic_id,
             });
           }
           return;
         }
-        output.push({
+        if (
-          id: meta.statistic_id,
+          !includeDeviceClasses ||
-          name: getStatisticLabel(this.hass, meta.statistic_id, meta),
+          includeDeviceClasses.includes(
-          state: entityState,
+            entityState!.attributes.device_class || ""
-        });
+          )
+        ) {
+          output.push({
+            id: meta.statistic_id,
+            name: computeStateName(entityState),
+            state: entityState,
+          });
+        }
       });
 
       if (!output.length) {
@@ -194,7 +206,8 @@ export class HaStatisticPicker extends LitElement {
         (this.comboBox as any).items = this._getStatistics(
           this.statisticIds!,
           this.includeStatisticsUnitOfMeasurement,
-          this.includeUnitClass,
+          this.includeDisplayUnitOfMeasurement,
+          this.includeDeviceClasses,
           this.entitiesOnly
         );
       } else {
@@ -202,7 +215,8 @@ export class HaStatisticPicker extends LitElement {
           (this.comboBox as any).items = this._getStatistics(
             this.statisticIds!,
             this.includeStatisticsUnitOfMeasurement,
-            this.includeUnitClass,
+            this.includeDisplayUnitOfMeasurement,
+            this.includeDeviceClasses,
             this.entitiesOnly
           );
         });

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

@@ -22,52 +22,11 @@ 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`
@@ -75,10 +34,8 @@ class HaStatisticsPicker extends LitElement {
             <ha-statistic-picker
               .curValue=${statisticId}
               .hass=${this.hass}
-              .includeStatisticsUnitOfMeasurement=${includeStatisticsUnitCurrent}
-              .includeUnitClass=${includeUnitClassCurrent}
               .value=${statisticId}
-              .statisticTypes=${includeStatisticTypesCurrent}
+              .statisticTypes=${this.statisticTypes}
               .statisticIds=${this.statisticIds}
               .label=${this.pickedStatisticLabel}
               @value-changed=${this._statisticChanged}
@@ -89,9 +46,6 @@ 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}

src/components/ha-area-picker.ts

@@ -116,14 +116,16 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
     ];
   }
 
-  public async open() {
+  public open() {
-    await this.updateComplete;
+    this.updateComplete.then(() => {
-    await this.comboBox?.open();
+      this.comboBox?.open();
+    });
   }
 
-  public async focus() {
+  public focus() {
-    await this.updateComplete;
+    this.updateComplete.then(() => {
-    await this.comboBox?.focus();
+      this.comboBox?.focus();
+    });
   }
 
   private _getAreas = memoizeOne(
@@ -288,7 +290,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
   protected updated(changedProps: PropertyValues) {
     if (
       (!this._init && this._devices && this._areas && this._entities) ||
-      (this._init && changedProps.has("_opened") && this._opened)
+      (changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
       (this.comboBox as any).items = this._getAreas(
@@ -306,6 +308,9 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
+    if (!this._devices || !this._areas || !this._entities) {
+      return html``;
+    }
     return html`
       <ha-combo-box
         .hass=${this.hass}

src/components/ha-base-time-input.ts

@@ -139,7 +139,7 @@ export class HaBaseTimeInput extends LitElement {
                 .value=${this.days.toFixed()}
                 .label=${this.dayLabel}
                 name="days"
-                @change=${this._valueChanged}
+                @input=${this._valueChanged}
                 @focusin=${this._onFocus}
                 no-spinner
                 .required=${this.required}
@@ -160,7 +160,7 @@ export class HaBaseTimeInput extends LitElement {
           .value=${this.hours.toFixed()}
           .label=${this.hourLabel}
           name="hours"
-          @change=${this._valueChanged}
+          @input=${this._valueChanged}
           @focusin=${this._onFocus}
           no-spinner
           .required=${this.required}
@@ -179,7 +179,7 @@ export class HaBaseTimeInput extends LitElement {
           inputmode="numeric"
           .value=${this._formatValue(this.minutes)}
           .label=${this.minLabel}
-          @change=${this._valueChanged}
+          @input=${this._valueChanged}
           @focusin=${this._onFocus}
           name="minutes"
           no-spinner
@@ -200,7 +200,7 @@ export class HaBaseTimeInput extends LitElement {
               inputmode="numeric"
               .value=${this._formatValue(this.seconds)}
               .label=${this.secLabel}
-              @change=${this._valueChanged}
+              @input=${this._valueChanged}
               @focusin=${this._onFocus}
               name="seconds"
               no-spinner
@@ -221,7 +221,7 @@ export class HaBaseTimeInput extends LitElement {
               type="number"
               .value=${this._formatValue(this.milliseconds, 3)}
               .label=${this.millisecLabel}
-              @change=${this._valueChanged}
+              @input=${this._valueChanged}
               @focusin=${this._onFocus}
               name="milliseconds"
               no-spinner

src/components/ha-camera-stream.ts

@@ -15,7 +15,6 @@ import {
   CAMERA_SUPPORT_STREAM,
   computeMJPEGStreamUrl,
   fetchStreamUrl,
-  fetchThumbnailUrlWithCache,
   STREAM_TYPE_HLS,
   STREAM_TYPE_WEB_RTC,
 } from "../data/camera";
@@ -38,9 +37,6 @@ 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;
@@ -55,14 +51,12 @@ 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._getPosterUrl();
+      this._forceMJPEG = undefined;
-      if (this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_HLS) {
+      this._url = undefined;
-        this._forceMJPEG = undefined;
+      this._getStreamUrl();
-        this._url = undefined;
-        this._getStreamUrl();
-      }
     }
   }
 
@@ -100,7 +94,6 @@ class HaCameraStream extends LitElement {
             .controls=${this.controls}
             .hass=${this.hass}
             .url=${this._url}
-            .posterUrl=${this._posterUrl}
           ></ha-hls-player>`
         : html``;
     }
@@ -112,7 +105,6 @@ class HaCameraStream extends LitElement {
         .controls=${this.controls}
         .hass=${this.hass}
         .entityid=${this.stateObj.entity_id}
-        .posterUrl=${this._posterUrl}
       ></ha-web-rtc-player>`;
     }
     return html``;
@@ -137,20 +129,6 @@ 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(

src/components/ha-card.ts

@@ -5,7 +5,7 @@ import { customElement, property } from "lit/decorators";
 export class HaCard extends LitElement {
   @property() public header?: string;
 
-  @property({ type: Boolean, reflect: true }) public raised = false;
+  @property({ type: Boolean, reflect: true }) public outlined = false;
 
   static get styles(): CSSResultGroup {
     return css`
@@ -14,14 +14,12 @@ export class HaCard extends LitElement {
           --ha-card-background,
           var(--card-background-color, white)
         );
-        box-shadow: var(--ha-card-box-shadow, none);
+        border-radius: var(--ha-card-border-radius, 4px);
-        box-sizing: border-box;
+        box-shadow: var(
-        border-radius: var(--ha-card-border-radius, 16px);
+          --ha-card-box-shadow,
-        border-width: var(--ha-card-border-width, 1px);
+          0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-        border-style: solid;
+          0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-        border-color: var(
+          0px 1px 3px 0px rgba(0, 0, 0, 0.12)
-          --ha-card-border-color,
-          var(--divider-color, #e0e0e0)
         );
         color: var(--primary-text-color);
         display: block;
@@ -29,13 +27,13 @@ export class HaCard extends LitElement {
         position: relative;
       }
 
-      :host([raised]) {
+      :host([outlined]) {
-        border: none;
+        box-shadow: none;
-        box-shadow: var(
+        border-width: var(--ha-card-border-width, 1px);
-          --ha-card-box-shadow,
+        border-style: solid;
-          0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+        border-color: var(
-          0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+          --ha-card-border-color,
-          0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+          var(--divider-color, #e0e0e0)
         );
       }
 

src/components/ha-combo-box.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-list/mwc-list-item";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
 import type {
   ComboBoxLight,
@@ -9,21 +8,14 @@ import type {
   ComboBoxLightValueChangedEvent,
 } from "@vaadin/combo-box/vaadin-combo-box-light";
 import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
 
 registerStyles(
   "vaadin-combo-box-item",
@@ -109,19 +101,18 @@ export class HaComboBox extends LitElement {
 
   @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 
-  @query("ha-textfield", true) private _inputElement!: HaTextField;
-
   private _overlayMutationObserver?: MutationObserver;
 
-  public async open() {
+  public open() {
-    await this.updateComplete;
+    this.updateComplete.then(() => {
-    this._comboBox?.open();
+      this._comboBox?.open();
+    });
   }
 
-  public async focus() {
+  public focus() {
-    await this.updateComplete;
+    this.updateComplete.then(() => {
-    await this._inputElement?.updateComplete;
+      this._comboBox?.inputElement?.focus();
-    this._inputElement?.focus();
+    });
   }
 
   public disconnectedCallback() {
@@ -234,13 +225,11 @@ export class HaComboBox extends LitElement {
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);
 
-    if (opened) {
+    if (
-      this.removeInertOnOverlay();
+      opened &&
-    }
+      "MutationObserver" in window &&
-  }
+      !this._overlayMutationObserver
-
+    ) {
-  private removeInertOnOverlay() {
-    if ("MutationObserver" in window && !this._overlayMutationObserver) {
       const overlay = document.querySelector<HTMLElement>(
         "vaadin-combo-box-overlay"
       );
@@ -279,16 +268,6 @@ 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 });
@@ -299,7 +278,7 @@ export class HaComboBox extends LitElement {
     const newValue = ev.detail.value;
 
     if (newValue !== this.value) {
-      fireEvent(this, "value-changed", { value: newValue || undefined });
+      fireEvent(this, "value-changed", { value: newValue });
     }
   }
 
@@ -311,7 +290,6 @@ export class HaComboBox extends LitElement {
       }
       vaadin-combo-box-light {
         position: relative;
-        --vaadin-combo-box-overlay-max-height: calc(45vh);
       }
       ha-textfield {
         width: 100%;

src/components/ha-config-entry-picker.ts

@@ -105,7 +105,7 @@ class HaConfigEntryPicker extends LitElement {
 
   private async _getConfigEntries() {
     getConfigEntries(this.hass, {
-      type: ["device", "hub", "service"],
+      type: "integration",
       domain: this.integration,
     }).then((configEntries) => {
       this._configEntries = configEntries

src/components/ha-cover-controls.ts

@@ -3,14 +3,15 @@ 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";
@@ -31,7 +32,7 @@ class HaCoverControls extends LitElement {
       <div class="state">
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.OPEN),
+            hidden: !supportsOpen(this.stateObj),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.open_cover"
@@ -43,7 +44,7 @@ class HaCoverControls extends LitElement {
         </ha-icon-button>
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.STOP),
+            hidden: !supportsStop(this.stateObj),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.stop_cover"
@@ -54,7 +55,7 @@ class HaCoverControls extends LitElement {
         ></ha-icon-button>
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.CLOSE),
+            hidden: !supportsClose(this.stateObj),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.close_cover"

src/components/ha-cover-tilt-controls.ts

@@ -2,12 +2,13 @@ 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";
@@ -26,10 +27,7 @@ class HaCoverTiltControls extends LitElement {
 
     return html` <ha-icon-button
         class=${classMap({
-          invisible: !supportsFeature(
+          invisible: !supportsOpenTilt(this.stateObj),
-            this.stateObj,
-            CoverEntityFeature.OPEN_TILT
-          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.open_tilt_cover"
@@ -40,10 +38,7 @@ class HaCoverTiltControls extends LitElement {
       ></ha-icon-button>
       <ha-icon-button
         class=${classMap({
-          invisible: !supportsFeature(
+          invisible: !supportsStopTilt(this.stateObj),
-            this.stateObj,
-            CoverEntityFeature.STOP_TILT
-          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.stop_cover"
@@ -54,10 +49,7 @@ class HaCoverTiltControls extends LitElement {
       ></ha-icon-button>
       <ha-icon-button
         class=${classMap({
-          invisible: !supportsFeature(
+          invisible: !supportsCloseTilt(this.stateObj),
-            this.stateObj,
-            CoverEntityFeature.CLOSE_TILT
-          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.close_tilt_cover"

src/components/ha-date-input.ts

@@ -2,7 +2,6 @@ import { mdiCalendar } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatDateNumeric } from "../common/datetime/format_date";
-import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
@@ -15,7 +14,6 @@ export interface datePickerDialogParams {
   min?: string;
   max?: string;
   locale?: string;
-  firstWeekday?: number;
   onChange: (value: string) => void;
 }
 
@@ -69,7 +67,6 @@ export class HaDateInput extends LitElement {
       value: this.value,
       onChange: (value) => this._valueChanged(value),
       locale: this.locale.language,
-      firstWeekday: firstWeekdayIndex(this.locale),
     });
   }
 

src/components/ha-date-range-picker.ts

@@ -14,7 +14,6 @@ import {
 import { customElement, property } from "lit/decorators";
 import { formatDateTime } from "../common/datetime/format_date_time";
 import { useAmPm } from "../common/datetime/use_am_pm";
-import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import { HomeAssistant } from "../types";
 import "./date-range-picker";
@@ -59,7 +58,6 @@ export class HaDateRangePicker extends LitElement {
         start-date=${this.startDate}
         end-date=${this.endDate}
         ?ranges=${this.ranges !== undefined}
-        first-day=${firstWeekdayIndex(this.hass.locale)}
       >
         <div slot="input" class="date-range-inputs">
           <ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
@@ -166,7 +164,7 @@ export class HaDateRangePicker extends LitElement {
       ha-textfield {
         display: inline-block;
         max-width: 250px;
-        min-width: 220px;
+        min-width: 200px;
       }
 
       ha-textfield:last-child {

src/components/ha-dialog-date-picker.ts

@@ -40,7 +40,6 @@ export class HaDialogDatePicker extends LitElement {
         .max=${this._params.max}
         .locale=${this._params.locale}
         @datepicker-value-updated=${this._valueChanged}
-        .firstDayOfWeek=${this._params.firstWeekday}
       ></app-datepicker>
       <mwc-button slot="secondaryAction" @click=${this._setToday}
         >today</mwc-button
@@ -57,8 +56,7 @@ export class HaDialogDatePicker extends LitElement {
   }
 
   private _setToday() {
-    // en-CA locale used for date format YYYY-MM-DD
+    this._value = new Date().toISOString().split("T")[0];
-    this._value = new Date().toLocaleDateString("en-CA");
   }
 
   private _setValue() {

src/components/ha-dialog.ts

@@ -55,7 +55,7 @@ export class HaDialog extends DialogBase {
         flex: var(--primary-action-button-flex, unset);
       }
       .mdc-dialog__container {
-        align-items: var(--vertical-align-dialog, center);
+        align-items: var(--vertial-align-dialog, center);
       }
       .mdc-dialog__title {
         padding: 24px 24px 0 24px;
@@ -91,7 +91,7 @@ export class HaDialog extends DialogBase {
       .header_button {
         position: absolute;
         right: 16px;
-        top: 14px;
+        top: 10px;
         text-decoration: none;
         color: inherit;
       }

src/components/ha-expansion-panel.ts

@@ -161,7 +161,7 @@ export class HaExpansionPanel extends LitElement {
           --ha-card-border-color,
           var(--divider-color, #e0e0e0)
         );
-        border-radius: var(--ha-card-border-radius, 16px);
+        border-radius: var(--ha-card-border-radius, 4px);
       }
 
       .summary-icon {

src/components/ha-form/ha-form-float.ts

@@ -26,7 +26,6 @@ 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 : ""}
@@ -56,11 +55,6 @@ 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)) {

src/components/ha-form/ha-form.ts

@@ -1,26 +1,34 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
 import "../ha-alert";
-import "../ha-selector/ha-selector";
 import "./ha-form-boolean";
 import "./ha-form-constant";
-import "./ha-form-float";
 import "./ha-form-grid";
+import "./ha-form-float";
 import "./ha-form-integer";
 import "./ha-form-multi_select";
 import "./ha-form-positive_time_period_dict";
 import "./ha-form-select";
 import "./ha-form-string";
-import { HaFormDataContainer, HaFormElement, HaFormSchema } from "./types";
+import { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types";
+import { HomeAssistant } from "../../types";
 
 const getValue = (obj, item) =>
   obj ? (!item.name ? obj : obj[item.name]) : null;
 
 const getError = (obj, item) => (obj && item.name ? obj[item.name] : null);
 
+let selectorImported = false;
+
 @customElement("ha-form")
 export class HaForm extends LitElement implements HaFormElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -55,6 +63,18 @@ export class HaForm extends LitElement implements HaFormElement {
     }
   }
 
+  willUpdate(changedProperties: PropertyValues) {
+    super.willUpdate(changedProperties);
+    if (
+      !selectorImported &&
+      changedProperties.has("schema") &&
+      this.schema?.some((item) => "selector" in item)
+    ) {
+      selectorImported = true;
+      import("../ha-selector/ha-selector");
+    }
+  }
+
   protected render(): TemplateResult {
     return html`
       <div class="root" part="root">

src/components/ha-formfield.ts

@@ -13,9 +13,6 @@ 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;

src/components/ha-gauge.ts

@@ -2,7 +2,6 @@ import { css, LitElement, PropertyValues, svg, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/number/format_number";
-import { blankBeforePercent } from "../common/translations/blank_before_percent";
 import { afterNextRender } from "../common/util/render-status";
 import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
@@ -134,11 +133,7 @@ export class Gauge extends LitElement {
               ? this._segment_label
               : this.valueText || formatNumber(this.value, this.locale)
           }${
-      this._segment_label
+      this._segment_label ? "" : this.label === "%" ? "%" : ` ${this.label}`
-        ? ""
-        : this.label === "%"
-        ? blankBeforePercent(this.locale) + "%"
-        : ` ${this.label}`
     }
         </text>
       </svg>`;

src/components/ha-hls-player.ts

@@ -23,8 +23,6 @@ class HaHLSPlayer extends LitElement {
 
   @property() public url!: string;
 
-  @property() public posterUrl!: string;
-
   @property({ type: Boolean, attribute: "controls" })
   public controls = false;
 
@@ -80,7 +78,6 @@ class HaHLSPlayer extends LitElement {
         : ""}
       ${!this._errorIsFatal
         ? html`<video
-            .poster=${this.posterUrl}
             ?autoplay=${this.autoPlay}
             .muted=${this.muted}
             ?playsinline=${this.playsInline}
@@ -168,7 +165,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!.fireMessage({
+    await this.hass!.auth.external!.sendMessage({
       type: "exoplayer/play_hls",
       payload: {
         url: new URL(url, window.location.href).toString(),

src/components/ha-icon-overflow-menu.ts

@@ -3,8 +3,6 @@ import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
 import "./ha-button-menu";
 import "./ha-icon-button";
@@ -17,9 +15,7 @@ export interface IconOverflowMenuItem {
   narrowOnly?: boolean;
   disabled?: boolean;
   tooltip?: string;
-  action: () => any;
+  onClick: CallableFunction;
-  warning?: boolean;
-  divider?: boolean;
 }
 
 @customElement("ha-icon-overflow-menu")
@@ -47,23 +43,19 @@ export class HaIconOverflowMenu extends LitElement {
                 slot="trigger"
               ></ha-icon-button>
 
-              ${this.items.map((item) =>
+              ${this.items.map(
-                item.divider
+                (item) => html`
-                  ? html`<li divider role="separator"></li>`
+                  <mwc-list-item
-                  : html`<mwc-list-item
+                    graphic="icon"
-                      graphic="icon"
+                    .disabled=${item.disabled}
-                      ?disabled=${item.disabled}
+                    @click=${item.action}
-                      @click=${item.action}
+                  >
-                      class=${classMap({ warning: Boolean(item.warning) })}
+                    <div slot="graphic">
-                    >
+                      <ha-svg-icon .path=${item.path}></ha-svg-icon>
-                      <div slot="graphic">
+                    </div>
-                        <ha-svg-icon
+                    ${item.label}
-                          class=${classMap({ warning: Boolean(item.warning) })}
+                  </mwc-list-item>
-                          .path=${item.path}
+                `
-                        ></ha-svg-icon>
-                      </div>
-                      ${item.label}
-                    </mwc-list-item> `
               )}
             </ha-button-menu>`
         : html`
@@ -71,8 +63,6 @@ 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">
@@ -83,7 +73,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> `
             )}
@@ -91,8 +81,7 @@ export class HaIconOverflowMenu extends LitElement {
     `;
   }
 
-  protected _handleIconOverflowMenuOpened(e) {
+  protected _handleIconOverflowMenuOpened() {
-    e.stopPropagation();
     // If this component is used inside a data table, the z-index of the row
     // needs to be increased. Otherwise the ha-button-menu would be displayed
     // underneath the next row in the table.
@@ -110,22 +99,12 @@ export class HaIconOverflowMenu extends LitElement {
   }
 
   static get styles() {
-    return [
+    return css`
-      haStyle,
+      :host {
-      css`
+        display: flex;
-        :host {
+        justify-content: flex-end;
-          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;
-        }
-      `,
-    ];
   }
 }
 

src/components/ha-icon-picker.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
@@ -14,7 +14,6 @@ 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
@@ -89,16 +88,15 @@ export class HaIconPicker extends LitElement {
 
   private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
     this._opened = ev.detail.value;
-    if (this._opened && !iconLoaded) {
+    if (this._opened && !iconItems.length) {
       const iconList = await import("../../build/mdi/iconList.json");
 
       iconItems = iconList.default.map((icon) => ({
         icon: `mdi:${icon.name}`,
         keywords: icon.keywords,
       }));
-      iconLoaded = true;
 
-      this.comboBox.filteredItems = iconItems;
+      (this.comboBox as any).filteredItems = iconItems;
 
       Object.keys(customIcons).forEach((iconSet) => {
         this._loadCustomIconItems(iconSet);
@@ -118,17 +116,13 @@ export class HaIconPicker extends LitElement {
         keywords: icon.keywords ?? [],
       }));
       iconItems.push(...customIconItems);
-      this.comboBox.filteredItems = iconItems;
+      (this.comboBox as any).filteredItems = iconItems;
     } catch (e) {
       // eslint-disable-next-line
       console.warn(`Unable to load icon list for ${iconsetPrefix} iconset`);
     }
   }
 
-  protected shouldUpdate(changedProps: PropertyValues) {
-    return !this._opened || changedProps.has("_opened");
-  }
-
   private _valueChanged(ev: PolymerChangedEvent<string>) {
     ev.stopPropagation();
     this._setValue(ev.detail.value);
@@ -167,12 +161,14 @@ export class HaIconPicker extends LitElement {
       filteredItems.push(...filteredItemsByKeywords);
 
       if (filteredItems.length > 0) {
-        this.comboBox.filteredItems = filteredItems;
+        (this.comboBox as any).filteredItems = filteredItems;
       } else {
-        this.comboBox.filteredItems = [{ icon: filterString, keywords: [] }];
+        (this.comboBox as any).filteredItems = [
+          { icon: filterString, keywords: [] },
+        ];
       }
     } else {
-      this.comboBox.filteredItems = iconItems;
+      (this.comboBox as any).filteredItems = iconItems;
     }
   }
 

src/components/ha-navigation-picker.ts

@@ -1,221 +0,0 @@
-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;
-  }
-}

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

@@ -1,47 +0,0 @@
-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;
-  }
-}

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

@@ -51,9 +51,8 @@ export class HaNumberSelector extends LitElement {
             `
           : ""}
         <ha-textfield
-          .inputMode=${(this.selector.number.step || 1) % 1 !== 0
+          inputMode="numeric"
-            ? "decimal"
+          pattern="[0-9]+([\\.][0-9]+)?"
-            : "numeric"}
           .label=${this.selector.number.mode !== "box" ? undefined : this.label}
           .placeholder=${this.placeholder}
           class=${classMap({ single: this.selector.number.mode === "box" })}

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

@@ -13,7 +13,6 @@ 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 {
@@ -41,7 +40,7 @@ export class HaSelectSelector extends LitElement {
     );
 
     if (!this.selector.select.custom_value && this._mode === "list") {
-      if (!this.selector.select.multiple) {
+      if (!this.selector.select.multiple || this.required) {
         return html`
           <div>
             ${this.label}
@@ -51,7 +50,7 @@ export class HaSelectSelector extends LitElement {
                   <ha-radio
                     .checked=${item.value === this.value}
                     .value=${item.value}
-                    .disabled=${item.disabled || this.disabled}
+                    .disabled=${this.disabled}
                     @change=${this._valueChanged}
                   ></ha-radio>
                 </ha-formfield>
@@ -64,14 +63,13 @@ export class HaSelectSelector extends LitElement {
 
       return html`
         <div>
-          ${this.label}
+          ${this.label}${options.map(
-          ${options.map(
             (item: SelectOption) => html`
               <ha-formfield .label=${item.label}>
                 <ha-checkbox
                   .checked=${this.value?.includes(item.value)}
                   .value=${item.value}
-                  .disabled=${item.disabled || this.disabled}
+                  .disabled=${this.disabled}
                   @change=${this._checkboxChanged}
                 ></ha-checkbox>
               </ha-formfield>
@@ -114,9 +112,7 @@ export class HaSelectSelector extends LitElement {
           .disabled=${this.disabled}
           .required=${this.required && !value.length}
           .value=${this._filter}
-          .items=${options.filter(
+          .items=${options.filter((item) => !this.value?.includes(item.value))}
-            (option) => !option.disabled && !value?.includes(option.value)
-          )}
           @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
         ></ha-combo-box>
@@ -140,7 +136,7 @@ export class HaSelectSelector extends LitElement {
           .helper=${this.helper}
           .disabled=${this.disabled}
           .required=${this.required}
-          .items=${options.filter((item) => !item.disabled)}
+          .items=${options}
           .value=${this.value}
           @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
@@ -161,9 +157,7 @@ export class HaSelectSelector extends LitElement {
       >
         ${options.map(
           (item: SelectOption) => html`
-            <mwc-list-item .value=${item.value} .disabled=${item.disabled}
+            <mwc-list-item .value=${item.value}>${item.label}</mwc-list-item>
-              >${item.label}</mwc-list-item
-            >
           `
         )}
       </ha-select>
@@ -291,9 +285,6 @@ export class HaSelectSelector extends LitElement {
     ha-formfield {
       display: block;
     }
-    mwc-list-item[disabled] {
-      --mdc-theme-text-primary-on-background: var(--disabled-text-color);
-    }
   `;
 }
 

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

@@ -39,7 +39,7 @@ export class HaTextSelector extends LitElement {
         .disabled=${this.disabled}
         @input=${this._handleChange}
         autocapitalize="none"
-        .autocomplete=${this.selector.text.autofill}
+        autocomplete="off"
         spellcheck="false"
         .required=${this.required}
         autogrow
@@ -59,7 +59,6 @@ export class HaTextSelector extends LitElement {
             html`<div style="width: 24px"></div>`
           : this.selector.text?.suffix}
         .required=${this.required}
-        .autocomplete=${this.selector.text.autofill}
       ></ha-textfield>
       ${this.selector.text?.type === "password"
         ? html`<ha-icon-button
@@ -99,13 +98,13 @@ export class HaTextSelector extends LitElement {
       }
       ha-icon-button {
         position: absolute;
-        top: 10px;
+        top: 16px;
-        right: 10px;
+        right: 16px;
-        --mdc-icon-button-size: 36px;
+        --mdc-icon-button-size: 24px;
         --mdc-icon-size: 20px;
         color: var(--secondary-text-color);
         inset-inline-start: initial;
-        inset-inline-end: 10px;
+        inset-inline-end: 16px;
         direction: var(--direction);
       }
     `;

src/components/ha-selector/ha-selector-ui-action.ts

@@ -1,43 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { UiActionSelector } from "../../data/selector";
-import { HomeAssistant } from "../../types";
-import "../../panels/lovelace/components/hui-action-editor";
-import { ActionConfig } from "../../data/lovelace";
-
-@customElement("ha-selector-ui-action")
-export class HaSelectorUiAction extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public selector!: UiActionSelector;
-
-  @property() public value?: ActionConfig;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  protected render() {
-    return html`
-      <hui-action-editor
-        .label=${this.label}
-        .hass=${this.hass}
-        .config=${this.value}
-        .actions=${this.selector["ui-action"].actions}
-        .tooltipText=${this.helper}
-        @value-changed=${this._valueChanged}
-      ></hui-action-editor>
-    `;
-  }
-
-  private _valueChanged(ev: CustomEvent) {
-    fireEvent(this, "value-changed", { value: ev.detail.value });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-ui-action": HaSelectorUiAction;
-  }
-}

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

@@ -1,39 +1,34 @@
-import { html, LitElement, PropertyValues } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import type { Selector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-
+import "./ha-selector-action";
-const LOAD_ELEMENTS = {
+import "./ha-selector-addon";
-  action: () => import("./ha-selector-action"),
+import "./ha-selector-area";
-  addon: () => import("./ha-selector-addon"),
+import "./ha-selector-attribute";
-  area: () => import("./ha-selector-area"),
+import "./ha-selector-boolean";
-  attribute: () => import("./ha-selector-attribute"),
+import "./ha-selector-color-rgb";
-  boolean: () => import("./ha-selector-boolean"),
+import "./ha-selector-config-entry";
-  "color-rgb": () => import("./ha-selector-color-rgb"),
+import "./ha-selector-date";
-  "config-entry": () => import("./ha-selector-config-entry"),
+import "./ha-selector-datetime";
-  date: () => import("./ha-selector-date"),
+import "./ha-selector-device";
-  datetime: () => import("./ha-selector-datetime"),
+import "./ha-selector-duration";
-  device: () => import("./ha-selector-device"),
+import "./ha-selector-entity";
-  duration: () => import("./ha-selector-duration"),
+import "./ha-selector-file";
-  entity: () => import("./ha-selector-entity"),
+import "./ha-selector-number";
-  file: () => import("./ha-selector-file"),
+import "./ha-selector-object";
-  navigation: () => import("./ha-selector-navigation"),
+import "./ha-selector-select";
-  number: () => import("./ha-selector-number"),
+import "./ha-selector-state";
-  object: () => import("./ha-selector-object"),
+import "./ha-selector-target";
-  select: () => import("./ha-selector-select"),
+import "./ha-selector-template";
-  state: () => import("./ha-selector-state"),
+import "./ha-selector-text";
-  target: () => import("./ha-selector-target"),
+import "./ha-selector-time";
-  template: () => import("./ha-selector-template"),
+import "./ha-selector-icon";
-  text: () => import("./ha-selector-text"),
+import "./ha-selector-media";
-  time: () => import("./ha-selector-time"),
+import "./ha-selector-theme";
-  icon: () => import("./ha-selector-icon"),
+import "./ha-selector-location";
-  media: () => import("./ha-selector-media"),
+import "./ha-selector-color-temp";
-  theme: () => import("./ha-selector-theme"),
-  location: () => import("./ha-selector-location"),
-  "color-temp": () => import("./ha-selector-color-temp"),
-  "ui-action": () => import("./ha-selector-ui-action"),
-};
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
@@ -63,12 +58,6 @@ export class HaSelector extends LitElement {
     return Object.keys(this.selector)[0];
   }
 
-  protected willUpdate(changedProps: PropertyValues) {
-    if (changedProps.has("selector") && this.selector) {
-      LOAD_ELEMENTS[this._type]?.();
-    }
-  }
-
   protected render() {
     return html`
       ${dynamicElement(`ha-selector-${this._type}`, {

src/components/ha-service-control.ts

@@ -55,14 +55,12 @@ export class HaServiceControl extends LitElement {
     data?: Record<string, any>;
   };
 
-  @property({ type: Boolean }) public disabled = false;
+  @state() private _value!: this["value"];
 
   @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;
@@ -229,7 +227,6 @@ 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">
@@ -276,7 +273,6 @@ 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
@@ -284,7 +280,6 @@ 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}
@@ -296,7 +291,6 @@ 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>`
@@ -317,18 +311,16 @@ 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=${this.disabled ||
+                    .disabled=${showOptional &&
-                    (showOptional &&
+                    !this._checkedKeys.has(dataField.key) &&
-                      !this._checkedKeys.has(dataField.key) &&
+                    (!this._value?.data ||
-                      (!this._value?.data ||
+                      this._value.data[dataField.key] === undefined)}
-                        this._value.data[dataField.key] === undefined))}
                     .hass=${this.hass}
                     .selector=${dataField.selector}
                     .key=${dataField.key}

src/components/ha-service-picker.ts

@@ -20,8 +20,6 @@ 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;
@@ -37,7 +35,6 @@ class HaServicePicker extends LitElement {
           this._filter
         )}
         .value=${this.value}
-        .disabled=${this.disabled}
         .renderer=${rowRenderer}
         item-value-path="service"
         item-label-path="name"

src/components/ha-sidebar.ts

@@ -221,15 +221,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   private _sortable?: SortableInstance;
 
   public hassSubscribe(): UnsubscribeFunc[] {
-    return this.hass.user?.is_admin
+    return [
-      ? [
+      subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
-          subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
+        this._issuesCount = repairs.issues.filter(
-            this._issuesCount = repairs.issues.filter(
+          (issue) => !issue.ignored
-              (issue) => !issue.ignored
+        ).length;
-            ).length;
+      }),
-          }),
+    ];
-        ]
-      : [];
   }
 
   protected render() {

src/components/ha-slider.js

@@ -35,8 +35,8 @@ export class HaSlider extends PaperSliderClass {
 
               bottom: calc(15px + var(--calculated-paper-slider-height)/2);
               left: 50%;
-              width: 2.6em;
+              width: 2.2em;
-              height: 2.6em;
+              height: 2.2em;
 
               -webkit-transform-origin: left bottom;
               transform-origin: left bottom;
@@ -55,9 +55,9 @@ export class HaSlider extends PaperSliderClass {
 
               bottom: calc(15px + var(--calculated-paper-slider-height)/2);
               left: 50%;
-              margin-left: -1.3em;
+              margin-left: -1.1em;
-              width: 2.6em;
+              width: 2.2em;
-              height: 2.5em;
+              height: 2.1em;
 
               -webkit-transform-origin: center bottom;
               transform-origin: center bottom;

src/components/ha-target-picker.ts

@@ -251,8 +251,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   private async _showPicker(ev) {
     this._addMode = ev.currentTarget.type;
     await this.updateComplete;
-    await this._inputElement?.focus();
+    setTimeout(() => {
-    await this._inputElement?.open();
+      this._inputElement?.open();
+      this._inputElement?.focus();
+    }, 0);
   }
 
   private _renderChip(

src/components/ha-textfield.ts

@@ -15,8 +15,6 @@ export class HaTextField extends TextFieldBase {
   // @ts-ignore
   @property({ type: Boolean }) public iconTrailing?: boolean;
 
-  @property() public autocomplete?: string;
-
   override updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     if (
@@ -29,13 +27,6 @@ export class HaTextField extends TextFieldBase {
       );
       this.reportValidity();
     }
-    if (changedProperties.has("autocomplete")) {
-      if (this.autocomplete) {
-        this.formElement.setAttribute("autocomplete", this.autocomplete);
-      } else {
-        this.formElement.removeAttribute("autocomplete");
-      }
-    }
   }
 
   protected override renderIcon(
@@ -91,16 +82,6 @@ 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);
       }
@@ -130,7 +111,7 @@ export class HaTextField extends TextFieldBase {
         inset-inline-end: initial !important;
         transform-origin: var(--float-start);
         direction: var(--direction);
-        text-align: var(--float-start);
+        transform-origin: var(--float-start);
       }
 
       .mdc-text-field--with-leading-icon.mdc-text-field--filled

src/components/ha-web-rtc-player.ts

@@ -7,9 +7,7 @@ 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";
 
@@ -36,8 +34,6 @@ 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
@@ -58,7 +54,6 @@ class HaWebRtcPlayer extends LitElement {
         .muted=${this.muted}
         ?playsinline=${this.playsInline}
         ?controls=${this.controls}
-        .poster=${this.posterUrl}
       ></video>
     `;
   }
@@ -88,8 +83,7 @@ class HaWebRtcPlayer extends LitElement {
   private async _startWebRtc(): Promise<void> {
     this._error = undefined;
 
-    const configuration = await this._fetchPeerConfiguration();
+    const peerConnection = new RTCPeerConnection();
-    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");
@@ -105,25 +99,12 @@ 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;
@@ -154,23 +135,6 @@ 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) => {

src/components/tile/ha-tile-icon.ts

@@ -1,54 +0,0 @@
-import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../ha-icon";
-import "../ha-svg-icon";
-
-@customElement("ha-tile-icon")
-export class HaTileIcon extends LitElement {
-  @property() public iconPath?: string;
-
-  @property() public icon?: string;
-
-  protected render(): TemplateResult {
-    return html`
-      <div class="shape">
-        ${this.icon
-          ? html`<ha-icon .icon=${this.icon}></ha-icon>`
-          : html`<ha-svg-icon .path=${this.iconPath}></ha-svg-icon>`}
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        --icon-color: rgb(var(--color));
-        --shape-color: rgba(var(--color), 0.2);
-        --mdc-icon-size: 24px;
-      }
-      .shape {
-        position: relative;
-        width: 40px;
-        height: 40px;
-        border-radius: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: var(--shape-color);
-        transition: background-color 180ms ease-in-out, color 180ms ease-in-out;
-      }
-      .shape ha-icon,
-      .shape ha-svg-icon {
-        display: flex;
-        color: var(--icon-color);
-        transition: color 180ms ease-in-out;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-tile-icon": HaTileIcon;
-  }
-}

src/components/tile/ha-tile-info.ts

@@ -1,59 +0,0 @@
-import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../ha-icon";
-import "../ha-svg-icon";
-
-@customElement("ha-tile-info")
-export class HaTileInfo extends LitElement {
-  @property() public primary?: string;
-
-  @property() public secondary?: string;
-
-  protected render(): TemplateResult {
-    return html`
-      <div class="info">
-        <span class="primary">${this.primary}</span>
-        ${this.secondary
-          ? html`<span class="secondary">${this.secondary}</span>`
-          : null}
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      .info {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-      span {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        width: 100%;
-      }
-      .primary {
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 20px;
-        letter-spacing: 0.1px;
-        color: var(--primary-text-color);
-      }
-      .secondary {
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 16px;
-        letter-spacing: 0.4px;
-        color: var(--secondary-text-color);
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-tile-info": HaTileInfo;
-  }
-}

src/components/trace/trace-tab-styles.ts

@@ -28,7 +28,7 @@ export const traceTabStyles = css`
   }
 
   .tabs > *.active {
-    border-bottom-color: var(--primary-color);
+    border-bottom-color: var(--accent-color);
   }
 
   .tabs > *:focus,

src/data/application_credential.ts

@@ -8,10 +8,6 @@ export interface ApplicationCredentialsConfig {
   integrations: Record<string, ApplicationCredentialsDomainConfig>;
 }
 
-export interface ApplicationCredentialsConfigEntry {
-  application_credentials_id?: string;
-}
-
 export interface ApplicationCredential {
   id: string;
   domain: string;
@@ -25,15 +21,6 @@ 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",

src/data/automation.ts

@@ -9,7 +9,6 @@ import { DeviceCondition, DeviceTrigger } from "./device_automation";
 import { Action, MODES } from "./script";
 
 export const AUTOMATION_DEFAULT_MODE: typeof MODES[number] = "single";
-export const AUTOMATION_DEFAULT_MAX = 10;
 
 export interface AutomationEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
@@ -311,37 +310,14 @@ export const deleteAutomation = (hass: HomeAssistant, id: string) =>
 
 let inititialAutomationEditorData: Partial<AutomationConfig> | undefined;
 
-export const fetchAutomationFileConfig = (hass: HomeAssistant, id: string) =>
+export const getAutomationConfig = (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;

src/data/automation_i18n.ts

@@ -1,15 +1,7 @@
-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";
 import type { HomeAssistant } from "../types";
 import { Condition, Trigger } from "./automation";
-import {
-  DeviceCondition,
-  DeviceTrigger,
-  localizeDeviceAutomationCondition,
-  localizeDeviceAutomationTrigger,
-} from "./device_automation";
 import { formatAttributeName } from "./entity_attributes";
 
 export const describeTrigger = (
@@ -60,37 +52,23 @@ export const describeTrigger = (
 
     base += ` ${entity} is`;
 
-    if (trigger.above !== undefined) {
+    if ("above" in trigger) {
       base += ` above ${trigger.above}`;
     }
 
-    if (trigger.below !== undefined && trigger.above !== undefined) {
+    if ("below" in trigger && "above" in trigger) {
       base += " and";
     }
 
-    if (trigger.below !== undefined) {
+    if ("below" in trigger) {
       base += ` below ${trigger.below}`;
     }
 
-    if (trigger.for) {
-      let duration: string | null;
-      if (typeof trigger.for === "number") {
-        duration = secondsToDuration(trigger.for);
-      } else if (typeof trigger.for === "string") {
-        duration = trigger.for;
-      } else {
-        duration = formatDuration(trigger.for);
-      }
-      if (duration) {
-        base += ` for ${duration}`;
-      }
-    }
-
     return base;
   }
 
   // State Trigger
-  if (trigger.platform === "state") {
+  if (trigger.platform === "state" && trigger.entity_id) {
     let base = "When";
     let entities = "";
 
@@ -111,17 +89,12 @@ export const describeTrigger = (
           } ${computeStateName(states[entity]) || entity}`;
         }
       }
-    } else if (trigger.entity_id) {
+    } else {
       entities = states[trigger.entity_id]
         ? computeStateName(states[trigger.entity_id])
         : trigger.entity_id;
     }
 
-    if (!entities) {
-      // no entity_id or empty array
-      entities = "something";
-    }
-
     base += ` ${entities} changes`;
 
     if (trigger.from) {
@@ -155,19 +128,17 @@ export const describeTrigger = (
       base += ` to ${to}`;
     }
 
-    if (trigger.for) {
+    if ("for" in trigger) {
-      let duration: string | null;
+      let duration: string;
       if (typeof trigger.for === "number") {
-        duration = secondsToDuration(trigger.for);
+        duration = `for ${secondsToDuration(trigger.for)!}`;
       } else if (typeof trigger.for === "string") {
-        duration = trigger.for;
+        duration = `for ${trigger.for}`;
       } else {
-        duration = formatDuration(trigger.for);
+        duration = `for ${JSON.stringify(trigger.for)}`;
       }
 
-      if (duration) {
+      base += ` for ${duration}`;
-        base += ` for ${duration}`;
-      }
     }
 
     return base;
@@ -202,16 +173,11 @@ export const describeTrigger = (
 
   // Time Trigger
   if (trigger.platform === "time" && trigger.at) {
-    const result = ensureArray(trigger.at).map((at) =>
+    const at = trigger.at.includes(".")
-      at.toString().includes(".")
+      ? hass.states[trigger.at] || trigger.at
-        ? `entity ${hass.states[at] ? computeStateName(hass.states[at]) : at}`
+      : trigger.at;
-        : at
-    );
 
-    const last = result.splice(-1, 1)[0];
+    return `When the time is equal to ${at}`;
-    return `When the time is equal to ${
-      result.length ? `${result.join(", ")} or ` : ""
-    }${last}`;
   }
 
   // Time Patter Trigger
@@ -314,7 +280,7 @@ export const describeTrigger = (
   }
   // MQTT Trigger
   if (trigger.platform === "mqtt") {
-    return "When an MQTT message has been received";
+    return "When a MQTT payload has been received";
   }
 
   // Template Trigger
@@ -326,25 +292,7 @@ export const describeTrigger = (
   if (trigger.platform === "webhook") {
     return "When a Webhook payload has been received";
   }
-
+  return `${trigger.platform || "Unknown"} trigger`;
-  if (trigger.platform === "device") {
-    if (!trigger.device_id) {
-      return "Device trigger";
-    }
-    const config = trigger as DeviceTrigger;
-    const localized = localizeDeviceAutomationTrigger(hass, config);
-    if (localized) {
-      return localized;
-    }
-    const stateObj = hass.states[config.entity_id as string];
-    return `${stateObj ? computeStateName(stateObj) : config.entity_id} ${
-      config.type
-    }`;
-  }
-
-  return `${
-    trigger.platform ? trigger.platform.replace(/_/g, " ") : "Unknown"
-  } trigger`;
 };
 
 export const describeCondition = (
@@ -356,64 +304,15 @@ export const describeCondition = (
     return condition.alias;
   }
 
-  if (!condition.condition) {
+  if (["or", "and", "not"].includes(condition.condition)) {
-    const shorthands: Array<"and" | "or" | "not"> = ["and", "or", "not"];
+    return `multiple conditions using "${condition.condition}"`;
-    for (const key of shorthands) {
-      if (!(key in condition)) {
-        continue;
-      }
-      if (ensureArray(condition[key])) {
-        condition = {
-          condition: key,
-          conditions: condition[key],
-        };
-      }
-    }
-  }
-
-  if (condition.condition === "or") {
-    const conditions = ensureArray(condition.conditions);
-
-    if (!conditions || conditions.length === 0) {
-      return "Test if any condition matches";
-    }
-    const count = conditions.length;
-    return `Test if any of ${count} condition${count === 1 ? "" : "s"} matches`;
-  }
-
-  if (condition.condition === "and") {
-    const conditions = ensureArray(condition.conditions);
-
-    if (!conditions || conditions.length === 0) {
-      return "Test if multiple conditions match";
-    }
-    const count = conditions.length;
-    return `Test if ${count} condition${count === 1 ? "" : "s"} match${
-      count === 1 ? "es" : ""
-    }`;
-  }
-
-  if (condition.condition === "not") {
-    const conditions = ensureArray(condition.conditions);
-
-    if (!conditions || conditions.length === 0) {
-      return "Test if no condition matches";
-    }
-    if (conditions.length === 1) {
-      return "Test if 1 condition does not match";
-    }
-    return `Test if none of ${conditions.length} conditions match`;
   }
 
   // State Condition
-  if (condition.condition === "state") {
+  if (condition.condition === "state" && condition.entity_id) {
     let base = "Confirm";
     const stateObj = hass.states[condition.entity_id];
-    const entity = stateObj
+    const entity = stateObj ? computeStateName(stateObj) : condition.entity_id;
-      ? computeStateName(stateObj)
-      : condition.entity_id
-      ? condition.entity_id
-      : "an entity";
 
     if ("attribute" in condition) {
       base += ` ${condition.attribute} from`;
@@ -429,28 +328,22 @@ export const describeCondition = (
             : ""
         } ${state}`;
       }
-    } else if (condition.state) {
+    } else {
       states = condition.state.toString();
     }
 
-    if (!states) {
-      states = "a state";
-    }
-
     base += ` ${entity} is ${states}`;
 
-    if (condition.for) {
+    if ("for" in condition) {
-      let duration: string | null;
+      let duration: string;
       if (typeof condition.for === "number") {
-        duration = secondsToDuration(condition.for);
+        duration = `for ${secondsToDuration(condition.for)!}`;
       } else if (typeof condition.for === "string") {
-        duration = condition.for;
+        duration = `for ${condition.for}`;
       } else {
-        duration = formatDuration(condition.for);
+        duration = `for ${JSON.stringify(condition.for)}`;
-      }
-      if (duration) {
-        base += ` for ${duration}`;
       }
+      base += ` for ${duration}`;
     }
 
     return base;
@@ -574,29 +467,5 @@ export const describeCondition = (
     }`;
   }
 
-  if (condition.condition === "device") {
+  return `${condition.condition} condition`;
-    if (!condition.device_id) {
-      return "Device condition";
-    }
-    const config = condition as DeviceCondition;
-    const localized = localizeDeviceAutomationCondition(hass, config);
-    if (localized) {
-      return localized;
-    }
-    const stateObj = hass.states[config.entity_id as string];
-    return `${stateObj ? computeStateName(stateObj) : config.entity_id} ${
-      config.type
-    }`;
-  }
-
-  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`;
 };

src/data/camera.ts

@@ -6,7 +6,6 @@ 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;
 
@@ -27,7 +26,6 @@ export interface CameraEntity extends HassEntityBase {
 
 export interface CameraPreferences {
   preload_stream: boolean;
-  orientation: number;
 }
 
 export interface CameraThumbnail {
@@ -111,13 +109,11 @@ 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>({

src/data/config_entries.ts

@@ -1,6 +1,4 @@
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
-import { IntegrationType } from "./integration";
 
 export interface ConfigEntry {
   entry_id: string;
@@ -46,38 +44,9 @@ 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?: IntegrationType[];
-    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?: {
+  filters?: { type?: "helper" | "integration"; domain?: string }
-    type?: IntegrationType[];
-    domain?: string;
-  }
 ): Promise<ConfigEntry[]> => {
   const params: any = {};
   if (filters) {