20221031.0 (#14248)

* Fix video size more info

* add comment

.github/workflows/demo.yaml

@@ -27,9 +27,7 @@ jobs:
       - name: Build Demo
         run: ./node_modules/.bin/gulp build-demo
       - name: Deploy to Netlify
-        uses: netlify/actions/cli@master
+        run: npx netlify-cli deploy --dir=demo/dist --prod
         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/release.yaml

@@ -75,7 +75,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2022.06.7
+        uses: home-assistant/wheels@2022.10.1
         with:
           abi: cp310
           tag: musllinux_1_2

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@v5.1.1
+        uses: actions/stale@v6.0.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.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

build-scripts/gulp/download_translations.js

@@ -1,17 +1,12 @@
-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);
 }
@@ -46,20 +41,12 @@ function checkHtml() {
   });
 }
 
-let taskName = "clean-downloaded-translations";
-gulp.task(taskName, function () {
-  return del([`${downloadDir}/**`]);
+// Backend translations do not currently pass HTML check so are excluded here for now
+gulp.task("check-translations-html", function () {
+  return gulp.src([`${inDirFrontend}/*.json`]).pipe(checkHtml());
 });
-tasks.push(taskName);
 
-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 () {
+gulp.task("check-all-files-exist", function () {
   const file = fs.readFileSync(srcMeta, { encoding });
   const meta = JSON.parse(file);
   Object.keys(meta).forEach((lang) => {
@@ -72,24 +59,8 @@ gulp.task(taskName, 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(
-  taskName,
-  gulp.series(
-    "check-translations-html",
-    "move-downloaded-translations",
-    "check-all-files-exist",
-    "clean-downloaded-translations"
-  )
+  "check-downloaded-translations",
+  gulp.series("check-translations-html", "check-all-files-exist")
 );
-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: "imperial",
+        units: "us_customary",
         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: "imperial",
+        units: "us_customary",
         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_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                   {
                     prefix: "Kitchen: ",
@@ -1206,7 +1206,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "32%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                   {
                     style: {
@@ -1215,7 +1215,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       left: "60%",
                     },
                     type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                   {
                     prefix: "Bathroom: ",
@@ -1225,7 +1225,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "77%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                 ],
                 type: "picture-elements",

demo/src/ha-demo.ts

@@ -20,6 +20,7 @@ import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";
+import { mockRecorder } from "./stubs/recorder";
 import { mockShoppingList } from "./stubs/shopping_list";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
@@ -45,6 +46,7 @@ class HaDemo extends HomeAssistantAppEl {
     mockAuth(hass);
     mockTranslations(hass);
     mockHistory(hass);
+    mockRecorder(hass);
     mockShoppingList(hass);
     mockSystemLog(hass);
     mockTemplate(hass);
@@ -61,12 +63,14 @@ 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",
@@ -74,12 +78,14 @@ 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",
       },
     ]);
 
@@ -116,3 +122,9 @@ class HaDemo extends HomeAssistantAppEl {
 }
 
 customElements.define("ha-demo", HaDemo);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-demo": HaDemo;
+  }
+}

demo/src/stubs/energy.ts

@@ -1,90 +1,101 @@
 import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
-import { EnergySolarForecasts } from "../../../src/data/energy";
+import {
+  EnergyInfo,
+  EnergyPreferences,
+  EnergySolarForecasts,
+  FossilEnergyConsumption,
+} from "../../../src/data/energy";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEnergy = (hass: MockHomeAssistant) => {
-  hass.mockWS("energy/get_prefs", () => ({
-    energy_sources: [
-      {
-        type: "grid",
-        flow_from: [
-          {
-            stat_energy_from: "sensor.energy_consumption_tarif_1",
-            stat_cost: "sensor.energy_consumption_tarif_1_cost",
-            entity_energy_from: "sensor.energy_consumption_tarif_1",
-            entity_energy_price: null,
-            number_energy_price: null,
-          },
-          {
-            stat_energy_from: "sensor.energy_consumption_tarif_2",
-            stat_cost: "sensor.energy_consumption_tarif_2_cost",
-            entity_energy_from: "sensor.energy_consumption_tarif_2",
-            entity_energy_price: null,
-            number_energy_price: null,
-          },
-        ],
-        flow_to: [
-          {
-            stat_energy_to: "sensor.energy_production_tarif_1",
-            stat_compensation: "sensor.energy_production_tarif_1_compensation",
-            entity_energy_to: "sensor.energy_production_tarif_1",
-            entity_energy_price: null,
-            number_energy_price: null,
-          },
-          {
-            stat_energy_to: "sensor.energy_production_tarif_2",
-            stat_compensation: "sensor.energy_production_tarif_2_compensation",
-            entity_energy_to: "sensor.energy_production_tarif_2",
-            entity_energy_price: null,
-            number_energy_price: null,
-          },
-        ],
-        cost_adjustment_day: 0,
-      },
-      {
-        type: "solar",
-        stat_energy_from: "sensor.solar_production",
-        config_entry_solar_forecast: ["solar_forecast"],
-      },
-      /* {
-        type: "battery",
-        stat_energy_from: "sensor.battery_output",
-        stat_energy_to: "sensor.battery_input",
-      }, */
-      {
-        type: "gas",
-        stat_energy_from: "sensor.energy_gas",
-        stat_cost: "sensor.energy_gas_cost",
-        entity_energy_from: "sensor.energy_gas",
-        entity_energy_price: null,
-        number_energy_price: null,
-      },
-    ],
-    device_consumption: [
-      {
-        stat_consumption: "sensor.energy_car",
-      },
-      {
-        stat_consumption: "sensor.energy_ac",
-      },
-      {
-        stat_consumption: "sensor.energy_washing_machine",
-      },
-      {
-        stat_consumption: "sensor.energy_dryer",
-      },
-      {
-        stat_consumption: "sensor.energy_heat_pump",
-      },
-      {
-        stat_consumption: "sensor.energy_boiler",
-      },
-    ],
-  }));
-  hass.mockWS("energy/info", () => ({ cost_sensors: [] }));
-  hass.mockWS("energy/fossil_energy_consumption", ({ period }) => ({
-    start: period === "month" ? 250 : period === "day" ? 10 : 2,
-  }));
+  hass.mockWS(
+    "energy/get_prefs",
+    (): EnergyPreferences => ({
+      energy_sources: [
+        {
+          type: "grid",
+          flow_from: [
+            {
+              stat_energy_from: "sensor.energy_consumption_tarif_1",
+              stat_cost: "sensor.energy_consumption_tarif_1_cost",
+              entity_energy_price: null,
+              number_energy_price: null,
+            },
+            {
+              stat_energy_from: "sensor.energy_consumption_tarif_2",
+              stat_cost: "sensor.energy_consumption_tarif_2_cost",
+              entity_energy_price: null,
+              number_energy_price: null,
+            },
+          ],
+          flow_to: [
+            {
+              stat_energy_to: "sensor.energy_production_tarif_1",
+              stat_compensation:
+                "sensor.energy_production_tarif_1_compensation",
+              entity_energy_price: null,
+              number_energy_price: null,
+            },
+            {
+              stat_energy_to: "sensor.energy_production_tarif_2",
+              stat_compensation:
+                "sensor.energy_production_tarif_2_compensation",
+              entity_energy_price: null,
+              number_energy_price: null,
+            },
+          ],
+          cost_adjustment_day: 0,
+        },
+        {
+          type: "solar",
+          stat_energy_from: "sensor.solar_production",
+          config_entry_solar_forecast: ["solar_forecast"],
+        },
+        /*         {
+          type: "battery",
+          stat_energy_from: "sensor.battery_output",
+          stat_energy_to: "sensor.battery_input",
+        }, */
+        {
+          type: "gas",
+          stat_energy_from: "sensor.energy_gas",
+          stat_cost: "sensor.energy_gas_cost",
+          entity_energy_price: null,
+          number_energy_price: null,
+        },
+      ],
+      device_consumption: [
+        {
+          stat_consumption: "sensor.energy_car",
+        },
+        {
+          stat_consumption: "sensor.energy_ac",
+        },
+        {
+          stat_consumption: "sensor.energy_washing_machine",
+        },
+        {
+          stat_consumption: "sensor.energy_dryer",
+        },
+        {
+          stat_consumption: "sensor.energy_heat_pump",
+        },
+        {
+          stat_consumption: "sensor.energy_boiler",
+        },
+      ],
+    })
+  );
+  hass.mockWS(
+    "energy/info",
+    (): EnergyInfo => ({ cost_sensors: {}, solar_forecast_domains: [] })
+  );
+  hass.mockWS(
+    "energy/fossil_energy_consumption",
+    ({ period }): FossilEnergyConsumption => ({
+      start: period === "month" ? 250 : period === "day" ? 10 : 2,
+    })
+  );
   const todayString = format(startOfToday(), "yyyy-MM-dd");
   const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
   hass.mockWS(

demo/src/stubs/history.ts

@@ -1,12 +1,4 @@
-import {
-  addDays,
-  addHours,
-  addMonths,
-  differenceInHours,
-  endOfDay,
-} from "date-fns/esm";
 import { HassEntity } from "home-assistant-js-websocket";
-import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 interface HistoryQueryParams {
@@ -72,331 +64,6 @@ const generateHistory = (state, deltas) => {
 
 const incrementalUnits = ["clients", "queries", "ads"];
 
-const generateMeanStatistics = (
-  id: string,
-  start: Date,
-  end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
-  initValue: number,
-  maxDiff: number
-) => {
-  const statistics: StatisticValue[] = [];
-  let currentDate = new Date(start);
-  currentDate.setMinutes(0, 0, 0);
-  let lastVal = initValue;
-  const now = new Date();
-  while (end > currentDate && currentDate < now) {
-    const delta = Math.random() * maxDiff;
-    const mean = lastVal + delta;
-    statistics.push({
-      statistic_id: id,
-      start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
-      mean,
-      min: mean - Math.random() * maxDiff,
-      max: mean + Math.random() * maxDiff,
-      last_reset: "1970-01-01T00:00:00+00:00",
-      state: mean,
-      sum: null,
-    });
-    lastVal = mean;
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
-  }
-  return statistics;
-};
-
-const generateSumStatistics = (
-  id: string,
-  start: Date,
-  end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
-  initValue: number,
-  maxDiff: number
-) => {
-  const statistics: StatisticValue[] = [];
-  let currentDate = new Date(start);
-  currentDate.setMinutes(0, 0, 0);
-  let sum = initValue;
-  const now = new Date();
-  while (end > currentDate && currentDate < now) {
-    const add = Math.random() * maxDiff;
-    sum += add;
-    statistics.push({
-      statistic_id: id,
-      start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
-      mean: null,
-      min: null,
-      max: null,
-      last_reset: "1970-01-01T00:00:00+00:00",
-      state: initValue + sum,
-      sum,
-    });
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
-  }
-  return statistics;
-};
-
-const generateCurvedStatistics = (
-  id: string,
-  start: Date,
-  end: Date,
-  _period: "5minute" | "hour" | "day" | "month" = "hour",
-  initValue: number,
-  maxDiff: number,
-  metered: boolean
-) => {
-  const statistics: StatisticValue[] = [];
-  let currentDate = new Date(start);
-  currentDate.setMinutes(0, 0, 0);
-  let sum = initValue;
-  const hours = differenceInHours(end, start) - 1;
-  let i = 0;
-  let half = false;
-  const now = new Date();
-  while (end > currentDate && currentDate < now) {
-    const add = Math.random() * maxDiff;
-    sum += i * add;
-    statistics.push({
-      statistic_id: id,
-      start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
-      mean: null,
-      min: null,
-      max: null,
-      last_reset: "1970-01-01T00:00:00+00:00",
-      state: initValue + sum,
-      sum: metered ? sum : null,
-    });
-    currentDate = addHours(currentDate, 1);
-    if (!half && i > hours / 2) {
-      half = true;
-    }
-    i += half ? -1 : 1;
-  }
-  return statistics;
-};
-
-const statisticsFunctions: Record<
-  string,
-  (
-    id: string,
-    start: Date,
-    end: Date,
-    period: "5minute" | "hour" | "day" | "month"
-  ) => StatisticValue[]
-> = {
-  "sensor.energy_consumption_tarif_1": (
-    id: string,
-    start: Date,
-    end: Date,
-    period = "hour"
-  ) => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
-    const morningLow = generateSumStatistics(
-      id,
-      start,
-      morningEnd,
-      period,
-      0,
-      0.7
-    );
-    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
-    const morningFinalVal = morningLow.length
-      ? morningLow[morningLow.length - 1].sum!
-      : 0;
-    const empty = generateSumStatistics(
-      id,
-      morningEnd,
-      eveningStart,
-      period,
-      morningFinalVal,
-      0
-    );
-    const eveningLow = generateSumStatistics(
-      id,
-      eveningStart,
-      end,
-      period,
-      morningFinalVal,
-      0.7
-    );
-    return [...morningLow, ...empty, ...eveningLow];
-  },
-  "sensor.energy_consumption_tarif_2": (
-    id: string,
-    start: Date,
-    end: Date,
-    period = "hour"
-  ) => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
-    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
-    const highTarif = generateSumStatistics(
-      id,
-      morningEnd,
-      eveningStart,
-      period,
-      0,
-      0.3
-    );
-    const highTarifFinalVal = highTarif.length
-      ? highTarif[highTarif.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
-    const evening = generateSumStatistics(
-      id,
-      eveningStart,
-      end,
-      period,
-      highTarifFinalVal,
-      0
-    );
-    return [...morning, ...highTarif, ...evening];
-  },
-  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
-    generateSumStatistics(id, start, end, period, 0, 0),
-  "sensor.energy_production_tarif_1_compensation": (
-    id,
-    start,
-    end,
-    period = "hour"
-  ) => generateSumStatistics(id, start, end, period, 0, 0),
-  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
-    const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
-    const dayEnd = new Date(endOfDay(productionEnd));
-    const production = generateCurvedStatistics(
-      id,
-      productionStart,
-      productionEnd,
-      period,
-      0,
-      0.15,
-      true
-    );
-    const productionFinalVal = production.length
-      ? production[production.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
-    const evening = generateSumStatistics(
-      id,
-      productionEnd,
-      dayEnd,
-      period,
-      productionFinalVal,
-      0
-    );
-    const rest = generateSumStatistics(
-      id,
-      dayEnd,
-      end,
-      period,
-      productionFinalVal,
-      1
-    );
-    return [...morning, ...production, ...evening, ...rest];
-  },
-  "sensor.solar_production": (id, start, end, period = "hour") => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
-    const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
-    const dayEnd = new Date(endOfDay(productionEnd));
-    const production = generateCurvedStatistics(
-      id,
-      productionStart,
-      productionEnd,
-      period,
-      0,
-      0.3,
-      true
-    );
-    const productionFinalVal = production.length
-      ? production[production.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
-    const evening = generateSumStatistics(
-      id,
-      productionEnd,
-      dayEnd,
-      period,
-      productionFinalVal,
-      0
-    );
-    const rest = generateSumStatistics(
-      id,
-      dayEnd,
-      end,
-      period,
-      productionFinalVal,
-      2
-    );
-    return [...morning, ...production, ...evening, ...rest];
-  },
-};
-
 export const mockHistory = (mockHass: MockHomeAssistant) => {
   mockHass.mockAPI(
     new RegExp("history/period/.+"),
@@ -466,43 +133,4 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
       return results;
     }
   );
-  mockHass.mockWS("recorder/get_statistics_metadata", () => []);
-  mockHass.mockWS("history/list_statistic_ids", () => []);
-  mockHass.mockWS(
-    "history/statistics_during_period",
-    ({ statistic_ids, start_time, end_time, period }, hass) => {
-      const start = new Date(start_time);
-      const end = end_time ? new Date(end_time) : new Date();
-
-      const statistics: Record<string, StatisticValue[]> = {};
-
-      statistic_ids.forEach((id: string) => {
-        if (id in statisticsFunctions) {
-          statistics[id] = statisticsFunctions[id](id, start, end, period);
-        } else {
-          const entityState = hass.states[id];
-          const state = entityState ? Number(entityState.state) : 1;
-          statistics[id] =
-            entityState && "last_reset" in entityState.attributes
-              ? generateSumStatistics(
-                  id,
-                  start,
-                  end,
-                  period,
-                  state,
-                  state * (state > 80 ? 0.01 : 0.05)
-                )
-              : generateMeanStatistics(
-                  id,
-                  start,
-                  end,
-                  period,
-                  state,
-                  state * (state > 80 ? 0.05 : 0.1)
-                );
-        }
-      });
-      return statistics;
-    }
-  );
 };

demo/src/stubs/recorder.ts

@@ -0,0 +1,385 @@
+import {
+  addDays,
+  addHours,
+  addMonths,
+  differenceInHours,
+  endOfDay,
+} from "date-fns";
+import {
+  Statistics,
+  StatisticsMetaData,
+  StatisticValue,
+} from "../../../src/data/recorder";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const generateMeanStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  period: "5minute" | "hour" | "day" | "month" = "hour",
+  initValue: number,
+  maxDiff: number
+): StatisticValue[] => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let lastVal = initValue;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const delta = Math.random() * maxDiff;
+    const mean = lastVal + delta;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
+      mean,
+      min: mean - Math.random() * maxDiff,
+      max: mean + Math.random() * maxDiff,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: mean,
+      sum: null,
+    });
+    lastVal = mean;
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
+  }
+  return statistics;
+};
+
+const generateSumStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  period: "5minute" | "hour" | "day" | "month" = "hour",
+  initValue: number,
+  maxDiff: number
+): StatisticValue[] => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let sum = initValue;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const add = Math.random() * maxDiff;
+    sum += add;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
+      mean: null,
+      min: null,
+      max: null,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: initValue + sum,
+      sum,
+    });
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
+  }
+  return statistics;
+};
+
+const generateCurvedStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  _period: "5minute" | "hour" | "day" | "month" = "hour",
+  initValue: number,
+  maxDiff: number,
+  metered: boolean
+): StatisticValue[] => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let sum = initValue;
+  const hours = differenceInHours(end, start) - 1;
+  let i = 0;
+  let half = false;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const add = Math.random() * maxDiff;
+    sum += i * add;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
+      mean: null,
+      min: null,
+      max: null,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: initValue + sum,
+      sum: metered ? sum : null,
+    });
+    currentDate = addHours(currentDate, 1);
+    if (!half && i > hours / 2) {
+      half = true;
+    }
+    i += half ? -1 : 1;
+  }
+  return statistics;
+};
+
+const statisticsFunctions: Record<
+  string,
+  (
+    id: string,
+    start: Date,
+    end: Date,
+    period: "5minute" | "hour" | "day" | "month"
+  ) => StatisticValue[]
+> = {
+  "sensor.energy_consumption_tarif_1": (
+    id: string,
+    start: Date,
+    end: Date,
+    period = "hour"
+  ) => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
+    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
+    const morningLow = generateSumStatistics(
+      id,
+      start,
+      morningEnd,
+      period,
+      0,
+      0.7
+    );
+    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
+    const morningFinalVal = morningLow.length
+      ? morningLow[morningLow.length - 1].sum!
+      : 0;
+    const empty = generateSumStatistics(
+      id,
+      morningEnd,
+      eveningStart,
+      period,
+      morningFinalVal,
+      0
+    );
+    const eveningLow = generateSumStatistics(
+      id,
+      eveningStart,
+      end,
+      period,
+      morningFinalVal,
+      0.7
+    );
+    return [...morningLow, ...empty, ...eveningLow];
+  },
+  "sensor.energy_consumption_tarif_2": (
+    id: string,
+    start: Date,
+    end: Date,
+    period = "hour"
+  ) => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
+    const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
+    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
+    const highTarif = generateSumStatistics(
+      id,
+      morningEnd,
+      eveningStart,
+      period,
+      0,
+      0.3
+    );
+    const highTarifFinalVal = highTarif.length
+      ? highTarif[highTarif.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
+    const evening = generateSumStatistics(
+      id,
+      eveningStart,
+      end,
+      period,
+      highTarifFinalVal,
+      0
+    );
+    return [...morning, ...highTarif, ...evening];
+  },
+  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
+    generateSumStatistics(id, start, end, period, 0, 0),
+  "sensor.energy_production_tarif_1_compensation": (
+    id,
+    start,
+    end,
+    period = "hour"
+  ) => generateSumStatistics(id, start, end, period, 0, 0),
+  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
+    const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
+    const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
+    const dayEnd = new Date(endOfDay(productionEnd));
+    const production = generateCurvedStatistics(
+      id,
+      productionStart,
+      productionEnd,
+      period,
+      0,
+      0.15,
+      true
+    );
+    const productionFinalVal = production.length
+      ? production[production.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(
+      id,
+      start,
+      productionStart,
+      period,
+      0,
+      0
+    );
+    const evening = generateSumStatistics(
+      id,
+      productionEnd,
+      dayEnd,
+      period,
+      productionFinalVal,
+      0
+    );
+    const rest = generateSumStatistics(
+      id,
+      dayEnd,
+      end,
+      period,
+      productionFinalVal,
+      1
+    );
+    return [...morning, ...production, ...evening, ...rest];
+  },
+  "sensor.solar_production": (id, start, end, period = "hour") => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
+    const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
+    const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
+    const dayEnd = new Date(endOfDay(productionEnd));
+    const production = generateCurvedStatistics(
+      id,
+      productionStart,
+      productionEnd,
+      period,
+      0,
+      0.3,
+      true
+    );
+    const productionFinalVal = production.length
+      ? production[production.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(
+      id,
+      start,
+      productionStart,
+      period,
+      0,
+      0
+    );
+    const evening = generateSumStatistics(
+      id,
+      productionEnd,
+      dayEnd,
+      period,
+      productionFinalVal,
+      0
+    );
+    const rest = generateSumStatistics(
+      id,
+      dayEnd,
+      end,
+      period,
+      productionFinalVal,
+      2
+    );
+    return [...morning, ...production, ...evening, ...rest];
+  },
+};
+export const mockRecorder = (mockHass: MockHomeAssistant) => {
+  mockHass.mockWS(
+    "recorder/get_statistics_metadata",
+    (): StatisticsMetaData[] => []
+  );
+  mockHass.mockWS(
+    "recorder/list_statistic_ids",
+    (): StatisticsMetaData[] => []
+  );
+  mockHass.mockWS(
+    "recorder/statistics_during_period",
+    ({ statistic_ids, start_time, end_time, period }, hass): Statistics => {
+      const start = new Date(start_time);
+      const end = end_time ? new Date(end_time) : new Date();
+
+      const statistics: Record<string, StatisticValue[]> = {};
+
+      statistic_ids.forEach((id: string) => {
+        if (id in statisticsFunctions) {
+          statistics[id] = statisticsFunctions[id](id, start, end, period);
+        } else {
+          const entityState = hass.states[id];
+          const state = entityState ? Number(entityState.state) : 1;
+          statistics[id] =
+            entityState && "last_reset" in entityState.attributes
+              ? generateSumStatistics(
+                  id,
+                  start,
+                  end,
+                  period,
+                  state,
+                  state * (state > 80 ? 0.01 : 0.05)
+                )
+              : generateMeanStatistics(
+                  id,
+                  start,
+                  end,
+                  period,
+                  state,
+                  state * (state > 80 ? 0.05 : 0.1)
+                );
+        }
+      });
+      return statistics;
+    }
+  );
+};

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

@@ -0,0 +1,56 @@
+---
+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,6 +36,7 @@ const conditions = [
   { condition: "sun", after: "sunset" },
   { condition: "sun", after: "sunrise", offset: "-01:00" },
   { condition: "zone", entity_id: "device_tracker.person", zone: "zone.home" },
+  { condition: "trigger", id: "motion" },
   { condition: "time" },
   { condition: "template" },
 ];

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

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -47,6 +47,8 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
 class DemoHaAutomationEditorAction extends LitElement {
   @state() private hass!: HomeAssistant;
 
+  @state() private _disabled = false;
+
   private data: any = SCHEMAS.map((info) => info.actions);
 
   constructor() {
@@ -67,6 +69,15 @@ class DemoHaAutomationEditorAction extends LitElement {
       this.requestUpdate();
     };
     return html`
+      <div class="options">
+        <ha-formfield label="Disabled">
+          <ha-switch
+            .name=${"disabled"}
+            .checked=${this._disabled}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
+      </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
           <demo-black-white-row
@@ -81,6 +92,7 @@ class DemoHaAutomationEditorAction extends LitElement {
                     .hass=${this.hass}
                     .actions=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
+                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-action>
                 `
@@ -90,6 +102,20 @@ class DemoHaAutomationEditorAction extends LitElement {
       )}
     `;
   }
+
+  private _handleOptionChange(ev) {
+    this[`_${ev.target.name}`] = ev.target.checked;
+  }
+
+  static styles = css`
+    .options {
+      max-width: 800px;
+      margin: 16px auto;
+    }
+    .options ha-formfield {
+      margin-right: 16px;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -83,6 +83,8 @@ const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
 class DemoHaAutomationEditorCondition extends LitElement {
   @state() private hass!: HomeAssistant;
 
+  @state() private _disabled = false;
+
   private data: any = SCHEMAS.map((info) => info.conditions);
 
   constructor() {
@@ -103,6 +105,15 @@ class DemoHaAutomationEditorCondition extends LitElement {
       this.requestUpdate();
     };
     return html`
+      <div class="options">
+        <ha-formfield label="Disabled">
+          <ha-switch
+            .name=${"disabled"}
+            .checked=${this._disabled}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
+      </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
           <demo-black-white-row
@@ -117,6 +128,7 @@ class DemoHaAutomationEditorCondition extends LitElement {
                     .hass=${this.hass}
                     .conditions=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
+                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-condition>
                 `
@@ -126,6 +138,20 @@ class DemoHaAutomationEditorCondition extends LitElement {
       )}
     `;
   }
+
+  private _handleOptionChange(ev) {
+    this[`_${ev.target.name}`] = ev.target.checked;
+  }
+
+  static styles = css`
+    .options {
+      max-width: 800px;
+      margin: 16px auto;
+    }
+    .options ha-formfield {
+      margin-right: 16px;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -107,6 +107,8 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
 class DemoHaAutomationEditorTrigger extends LitElement {
   @state() private hass!: HomeAssistant;
 
+  @state() private _disabled = false;
+
   private data: any = SCHEMAS.map((info) => info.triggers);
 
   constructor() {
@@ -127,6 +129,15 @@ class DemoHaAutomationEditorTrigger extends LitElement {
       this.requestUpdate();
     };
     return html`
+      <div class="options">
+        <ha-formfield label="Disabled">
+          <ha-switch
+            .name=${"disabled"}
+            .checked=${this._disabled}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
+      </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
           <demo-black-white-row
@@ -141,6 +152,7 @@ class DemoHaAutomationEditorTrigger extends LitElement {
                     .hass=${this.hass}
                     .triggers=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
+                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-trigger>
                 `
@@ -150,6 +162,20 @@ class DemoHaAutomationEditorTrigger extends LitElement {
       )}
     `;
   }
+
+  private _handleOptionChange(ev) {
+    this[`_${ev.target.name}`] = ev.target.checked;
+  }
+
+  static styles = css`
+    .options {
+      max-width: 800px;
+      margin: 16px auto;
+    }
+    .options ha-formfield {
+      margin-right: 16px;
+    }
+  `;
 }
 
 declare global {

gallery/src/pages/brand/logo.markdown

@@ -2,8 +2,6 @@
 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: Dialgos
+title: Dialogs
 subtitle: Dialogs provide important prompts in a user flow.
 ---
 
-# Material Desing 3
+# Material Design 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-bar-slider.markdown

@@ -0,0 +1,3 @@
+---
+title: Bar Sliders
+---

gallery/src/pages/components/ha-bar-slider.ts

@@ -0,0 +1,169 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { repeat } from "lit/directives/repeat";
+import "../../../../src/components/ha-bar-slider";
+import "../../../../src/components/ha-card";
+
+const sliders: {
+  id: string;
+  label: string;
+  mode?: "start" | "end" | "indicator";
+  class?: string;
+}[] = [
+  {
+    id: "slider-start",
+    label: "Slider (start mode)",
+    mode: "start",
+  },
+  {
+    id: "slider-end",
+    label: "Slider (end mode)",
+    mode: "end",
+  },
+  {
+    id: "slider-indicator",
+    label: "Slider (indicator mode)",
+    mode: "indicator",
+  },
+  {
+    id: "slider-start-custom",
+    label: "Slider (start mode) and custom style",
+    mode: "start",
+    class: "custom",
+  },
+  {
+    id: "slider-end-custom",
+    label: "Slider (end mode) and custom style",
+    mode: "end",
+    class: "custom",
+  },
+  {
+    id: "slider-indicator-custom",
+    label: "Slider (indicator mode) and custom style",
+    mode: "indicator",
+    class: "custom",
+  },
+];
+
+@customElement("demo-components-ha-bar-slider")
+export class DemoHaBarSlider extends LitElement {
+  @state() private value = 50;
+
+  @state() private sliderPosition?: number;
+
+  handleValueChanged(e: CustomEvent) {
+    this.value = e.detail.value as number;
+  }
+
+  handleSliderMoved(e: CustomEvent) {
+    this.sliderPosition = e.detail.value as number;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card>
+        <div class="card-content">
+          <p><b>Slider values</b></p>
+          <table>
+            <tbody>
+              <tr>
+                <td>position</td>
+                <td>${this.sliderPosition ?? "-"}</td>
+              </tr>
+              <tr>
+                <td>value</td>
+                <td>${this.value ?? "-"}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </ha-card>
+      ${repeat(sliders, (slider) => {
+        const { id, label, ...config } = slider;
+        return html`
+          <ha-card>
+            <div class="card-content">
+              <label id=${id}>${label}</label>
+              <pre>Config: ${JSON.stringify(config)}</pre>
+              <ha-bar-slider
+                .value=${this.value}
+                .mode=${config.mode}
+                class=${ifDefined(config.class)}
+                @value-changed=${this.handleValueChanged}
+                @slider-moved=${this.handleSliderMoved}
+                aria-labelledby=${id}
+              >
+              </ha-bar-slider>
+            </div>
+          </ha-card>
+        `;
+      })}
+      <ha-card>
+        <div class="card-content">
+          <p class="title"><b>Vertical</b></p>
+          <div class="vertical-sliders">
+            ${repeat(sliders, (slider) => {
+              const { id, label, ...config } = slider;
+              return html`
+                <ha-bar-slider
+                  .value=${this.value}
+                  .mode=${config.mode}
+                  vertical
+                  class=${ifDefined(config.class)}
+                  @value-changed=${this.handleValueChanged}
+                  @slider-moved=${this.handleSliderMoved}
+                  aria-label=${label}
+                >
+                </ha-bar-slider>
+              `;
+            })}
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      p {
+        margin: 0;
+      }
+      label {
+        font-weight: 600;
+      }
+      .custom {
+        --slider-bar-color: #ffcf4c;
+        --slider-bar-background: #ffcf4c64;
+        --slider-bar-thickness: 100px;
+        --slider-bar-border-radius: 24px;
+      }
+      .vertical-sliders {
+        height: 300px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      p.title {
+        margin-bottom: 12px;
+      }
+      .vertical-sliders > *:not(:last-child) {
+        margin-right: 4px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-bar-slider": DemoHaBarSlider;
+  }
+}

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

@@ -195,6 +195,48 @@ const SCHEMAS: {
           },
         },
       },
+      select_disabled_list: {
+        name: "Select disabled option",
+        selector: {
+          select: {
+            options: [
+              { label: "Option 1", value: "Option 1" },
+              { label: "Option 2", value: "Option 2" },
+              { label: "Option 3", value: "Option 3", disabled: true },
+            ],
+            mode: "list",
+          },
+        },
+      },
+      select_disabled_multiple: {
+        name: "Select disabled option",
+        selector: {
+          select: {
+            multiple: true,
+            options: [
+              { label: "Option 1", value: "Option 1" },
+              { label: "Option 2", value: "Option 2" },
+              { label: "Option 3", value: "Option 3", disabled: true },
+            ],
+            mode: "list",
+          },
+        },
+      },
+      select_disabled: {
+        name: "Select disabled option",
+        selector: {
+          select: {
+            options: [
+              { label: "Option 1", value: "Option 1" },
+              { label: "Option 2", value: "Option 2" },
+              { label: "Option 3", value: "Option 3", disabled: true },
+              { label: "Option 4", value: "Option 4", disabled: true },
+              { label: "Option 5", value: "Option 5", disabled: true },
+              { label: "Option 6", value: "Option 6" },
+            ],
+          },
+        },
+      },
       select_custom: {
         name: "Select (Custom)",
         selector: {

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

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

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

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

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

@@ -0,0 +1,60 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("input_number", "box1", 0, {
+    friendly_name: "Box1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "box",
+    unit_of_measurement: "items",
+  }),
+  getEntity("input_number", "slider1", 0, {
+    friendly_name: "Slider1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "slider",
+    unit_of_measurement: "items",
+  }),
+];
+
+@customElement("demo-more-info-input-number")
+class DemoMoreInfoInputNumber extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-input-number": DemoMoreInfoInputNumber;
+  }
+}

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

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

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

@@ -139,6 +139,13 @@ 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-store/hassio-addon-repository.ts

@@ -118,7 +118,7 @@ class HassioAddonRepositoryEl extends LitElement {
   }
 
   private _addonTapped(ev) {
-    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}?store=true`);
   }
 
   static get styles(): CSSResultGroup {

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

@@ -53,7 +53,13 @@ class HassioAddonDashboard extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @state() _error?: string;
+  @state() private _error?: string;
+
+  private _backPath = new URLSearchParams(window.parent.location.search).get(
+    "store"
+  )
+    ? "/hassio/store"
+    : "/hassio/dashboard";
 
   private _computeTail = memoizeOne((route: Route) => {
     const dividerPos = route.path.indexOf("/", 1);
@@ -119,6 +125,7 @@ class HassioAddonDashboard extends LitElement {
         .narrow=${this.narrow}
         .route=${route}
         .tabs=${addonTabs}
+        .backPath=${this._backPath}
         supervisor
       >
         <span slot="header">${this.addon.name}</span>

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

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

hassio/src/backups/hassio-backups.ts

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

hassio/src/dialogs/suggestAddonRestart.ts

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

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

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

package.json

@@ -43,7 +43,6 @@
     "@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",
@@ -93,8 +92,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/combo-box": "^23.1.5",
-    "@vaadin/vaadin-themable-mixin": "^23.1.5",
+    "@vaadin/combo-box": "^23.2.0",
+    "@vaadin/vaadin-themable-mixin": "^23.2.0",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -111,7 +110,8 @@
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.2.1",
+    "hammerjs": "^2.0.8",
+    "hls.js": "^1.2.3",
     "home-assistant-js-websocket": "^8.0.0",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
@@ -138,6 +138,7 @@
     "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",
@@ -169,6 +170,7 @@
     "@types/chromecast-caf-receiver": "5.0.12",
     "@types/chromecast-caf-sender": "^1.0.3",
     "@types/glob": "^7",
+    "@types/hammerjs": "^2.0.41",
     "@types/js-yaml": "^4",
     "@types/leaflet": "^1",
     "@types/leaflet-draw": "^1",
@@ -253,5 +255,5 @@
     "trailingComma": "es5",
     "arrowParens": "always"
   },
-  "packageManager": "yarn@3.2.0"
+  "packageManager": "yarn@3.2.3"
 }

pyproject.toml

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

script/core

@@ -46,6 +46,14 @@ frontend:
 #   development_repo: ${WD}" >> "${WD}/config/configuration.yaml"
   fi
 
+  if [ ! -z "${CODESPACES}" ]; then
+  echo "
+http:
+  use_x_forwarded_for: true
+  trusted_proxies:
+    - 127.0.0.1
+" >> "${WD}/config/configuration.yaml"
+  fi
 fi
 
 hass -c "${WD}/config"

script/translations_download

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

src/auth/ha-auth-flow.ts

@@ -15,7 +15,7 @@ import { computeInitialHaFormData } from "../components/ha-form/compute-initial-
 import "../components/ha-form/ha-form";
 import "../components/ha-formfield";
 import "../components/ha-markdown";
-import { AuthProvider } from "../data/auth";
+import { AuthProvider, autocompleteLoginFields } from "../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
@@ -204,7 +204,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
             : html``}
           <ha-form
             .data=${this._stepData}
-            .schema=${step.data_schema}
+            .schema=${autocompleteLoginFields(step.data_schema)}
             .error=${step.errors}
             .disabled=${this._submitting}
             .computeLabel=${this._computeLabelCallback(step)}

src/auth/ha-password-manager-polyfill.ts

@@ -3,6 +3,7 @@ import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HaFormSchema } from "../components/ha-form/types";
+import { autocompleteLoginFields } from "../data/auth";
 import type { DataEntryFlowStep } from "../data/data_entry_flow";
 
 declare global {
@@ -69,7 +70,9 @@ export class HaPasswordManagerPolyfill extends LitElement {
           aria-hidden="true"
           @submit=${this._handleSubmit}
         >
-          ${this.step.data_schema.map((input) => this.render_input(input))}
+          ${autocompleteLoginFields(this.step.data_schema).map((input) =>
+            this.render_input(input)
+          )}
           <input type="submit" />
           <style>
             ${this.styles}
@@ -91,6 +94,7 @@ export class HaPasswordManagerPolyfill extends LitElement {
         .id=${schema.name}
         .type=${inputType}
         .value=${this.stepData[schema.name] || ""}
+        .autocomplete=${schema.autocomplete}
         @input=${this._valueChanged}
       />
     `;

src/common/color/compute-color.ts

@@ -0,0 +1,42 @@
+import { hex2rgb } from "./convert-color";
+
+export const THEME_COLORS = new Set([
+  "primary",
+  "accent",
+  "disabled",
+  "red",
+  "pink",
+  "purple",
+  "deep-purple",
+  "indigo",
+  "blue",
+  "light-blue",
+  "cyan",
+  "teal",
+  "green",
+  "light-green",
+  "lime",
+  "yellow",
+  "amber",
+  "orange",
+  "deep-orange",
+  "brown",
+  "grey",
+  "blue-grey",
+  "black",
+  "white",
+]);
+
+export function computeRgbColor(color: string): string {
+  if (THEME_COLORS.has(color)) {
+    return `var(--rgb-${color}-color)`;
+  }
+  if (color.startsWith("#")) {
+    try {
+      return hex2rgb(color).join(", ");
+    } catch (err) {
+      return "";
+    }
+  }
+  return color;
+}

src/common/const.ts

@@ -6,12 +6,14 @@ import {
   mdiAlert,
   mdiAngleAcute,
   mdiAppleSafari,
+  mdiArrowLeftRight,
   mdiBell,
   mdiBookmark,
   mdiBrightness5,
   mdiBullhorn,
   mdiCalendar,
   mdiCalendarClock,
+  mdiCarCoolantLevel,
   mdiCash,
   mdiClock,
   mdiCloudUpload,
@@ -25,7 +27,6 @@ import {
   mdiFlower,
   mdiFormatListBulleted,
   mdiFormTextbox,
-  mdiGasCylinder,
   mdiGauge,
   mdiGestureTapButton,
   mdiGoogleAssistant,
@@ -37,23 +38,30 @@ import {
   mdiLightningBolt,
   mdiMailbox,
   mdiMapMarkerRadius,
+  mdiMeterGas,
+  mdiMicrophoneMessage,
   mdiMolecule,
   mdiMoleculeCo,
   mdiMoleculeCo2,
   mdiPalette,
+  mdiProgressClock,
   mdiRayVertex,
   mdiRemote,
   mdiRobot,
   mdiRobotVacuum,
   mdiScriptText,
   mdiSineWave,
-  mdiMicrophoneMessage,
+  mdiSpeedometer,
   mdiThermometer,
   mdiThermostat,
   mdiTimerOutline,
   mdiVideo,
+  mdiWater,
   mdiWaterPercent,
   mdiWeatherCloudy,
+  mdiWeatherPouring,
+  mdiWeatherWindy,
+  mdiWeight,
   mdiWhiteBalanceSunny,
   mdiWifi,
 } from "@mdi/js";
@@ -121,11 +129,14 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   carbon_monoxide: mdiMoleculeCo,
   current: mdiCurrentAc,
   date: mdiCalendar,
+  distance: mdiArrowLeftRight,
+  duration: mdiProgressClock,
   energy: mdiLightningBolt,
   frequency: mdiSineWave,
-  gas: mdiGasCylinder,
+  gas: mdiMeterGas,
   humidity: mdiWaterPercent,
   illuminance: mdiBrightness5,
+  moisture: mdiWaterPercent,
   monetary: mdiCash,
   nitrogen_dioxide: mdiMolecule,
   nitrogen_monoxide: mdiMolecule,
@@ -136,14 +147,20 @@ 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: mdiCarCoolantLevel,
+  water: mdiWater,
+  weight: mdiWeight,
+  wind_speed: mdiWeatherWindy,
 };
 
 /** Domains that have a state card. */

src/common/datetime/first_weekday.ts

@@ -0,0 +1,33 @@
+import { getWeekStartByLocale } from "weekstart";
+import { FrontendLocaleData, FirstWeekday } from "../../data/translation";
+
+export const weekdays = [
+  "sunday",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+] as const;
+
+type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+export const firstWeekdayIndex = (locale: FrontendLocaleData): WeekdayIndex => {
+  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) as WeekdayIndex;
+  }
+  return weekdays.includes(locale.first_weekday)
+    ? (weekdays.indexOf(locale.first_weekday) as WeekdayIndex)
+    : 1;
+};
+
+export const firstWeekday = (locale: FrontendLocaleData) => {
+  const index = firstWeekdayIndex(locale);
+  return weekdays[index];
+};

src/common/datetime/format_duration.ts

@@ -0,0 +1,28 @@
+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/color/alarm_control_panel_color.ts

@@ -0,0 +1,18 @@
+export const alarmControlPanelColor = (state?: string): string | undefined => {
+  switch (state) {
+    case "armed_away":
+    case "armed_vacation":
+    case "armed_home":
+    case "armed_night":
+    case "armed_custom_bypass":
+      return "alarm-armed";
+    case "pending":
+      return "alarm-pending";
+    case "triggered":
+      return "alarm-triggered";
+    case "disarmed":
+      return "alarm-disarmed";
+    default:
+      return undefined;
+  }
+};

src/common/entity/color/battery_color.ts

@@ -0,0 +1,15 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+export const batteryStateColor = (stateObj: HassEntity) => {
+  const value = Number(stateObj.state);
+  if (isNaN(value)) {
+    return "sensor-battery-unknown";
+  }
+  if (value >= 70) {
+    return "sensor-battery-high";
+  }
+  if (value >= 30) {
+    return "sensor-battery-medium";
+  }
+  return "sensor-battery-low";
+};

src/common/entity/color/binary_sensor_color.ts

@@ -0,0 +1,20 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+const NORMAL_DEVICE_CLASSES = new Set([
+  "battery_charging",
+  "connectivity",
+  "light",
+  "moving",
+  "plug",
+  "power",
+  "presence",
+  "running",
+]);
+
+export const binarySensorColor = (stateObj: HassEntity): string | undefined => {
+  const deviceClass = stateObj?.attributes.device_class;
+
+  return deviceClass && NORMAL_DEVICE_CLASSES.has(deviceClass)
+    ? "binary-sensor"
+    : "binary-sensor-danger";
+};

src/common/entity/color/climate_color.ts

@@ -0,0 +1,18 @@
+export const climateColor = (state: string): string | undefined => {
+  switch (state) {
+    case "auto":
+      return "climate-auto";
+    case "cool":
+      return "climate-cool";
+    case "dry":
+      return "climate-dry";
+    case "fan_only":
+      return "climate-fan-only";
+    case "heat":
+      return "climate-heat";
+    case "heat_cool":
+      return "climate-heat-cool";
+    default:
+      return undefined;
+  }
+};

src/common/entity/color/cover_color.ts

@@ -0,0 +1,10 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+const SECURE_DEVICE_CLASSES = new Set(["door", "gate", "garage", "window"]);
+
+export const coverColor = (stateObj?: HassEntity): string | undefined => {
+  const isSecure =
+    stateObj?.attributes.device_class &&
+    SECURE_DEVICE_CLASSES.has(stateObj.attributes.device_class);
+  return isSecure ? "cover-secure" : "cover";
+};

src/common/entity/color/lock_color.ts

@@ -0,0 +1,15 @@
+export const lockColor = (state?: string): string | undefined => {
+  switch (state) {
+    case "locked":
+      return "lock-locked";
+    case "unlocked":
+      return "lock-unlocked";
+    case "jammed":
+      return "lock-jammed";
+    case "locking":
+    case "unlocking":
+      return "lock-pending";
+    default:
+      return undefined;
+  }
+};

src/common/entity/color/sensor_color.ts

@@ -0,0 +1,32 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { batteryStateColor } from "./battery_color";
+
+export const sensorColor = (stateObj: HassEntity): string | undefined => {
+  const deviceClass = stateObj?.attributes.device_class;
+
+  if (deviceClass === "battery") {
+    return batteryStateColor(stateObj);
+  }
+
+  switch (deviceClass) {
+    case "apparent_power":
+    case "current":
+    case "energy":
+    case "gas":
+    case "power_factor":
+    case "power":
+    case "reactive_power":
+    case "voltage":
+      return "sensor-energy";
+    case "temperature":
+      return "sensor-temperature";
+    case "humidity":
+      return "sensor-humidity";
+    case "illuminance":
+      return "sensor-illuminance";
+    case "moisture":
+      return "sensor-moisture";
+  }
+
+  return "sensor";
+};

src/common/entity/compute_state_display.ts

@@ -2,17 +2,22 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import {
-  UPDATE_SUPPORT_PROGRESS,
   updateIsInstallingFromAttributes,
+  UPDATE_SUPPORT_PROGRESS,
 } 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 {
+  formatNumber,
+  getNumberFormatOptions,
+  isNumericFromAttributes,
+} from "../number/format_number";
+import { blankBeforePercent } from "../translations/blank_before_percent";
 import { LocalizeFunc } from "../translations/localize";
-import { supportsFeatureFromAttributes } from "./supports-feature";
-import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 import { computeDomain } from "./compute_domain";
+import { supportsFeatureFromAttributes } from "./supports-feature";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
@@ -67,9 +72,13 @@ export const computeStateDisplayFromEntityAttributes = (
     const unit = !attributes.unit_of_measurement
       ? ""
       : attributes.unit_of_measurement === "%"
-      ? "%"
+      ? blankBeforePercent(locale) + "%"
       : ` ${attributes.unit_of_measurement}`;
-    return `${formatNumber(state, locale)}${unit}`;
+    return `${formatNumber(
+      state,
+      locale,
+      getNumberFormatOptions({ state, attributes } as HassEntity)
+    )}${unit}`;
   }
 
   const domain = computeDomain(entityId);
@@ -142,7 +151,12 @@ export const computeStateDisplayFromEntityAttributes = (
     domain === "number" ||
     domain === "input_number"
   ) {
-    return formatNumber(state, locale);
+    // Format as an integer if the value and step are integers
+    return formatNumber(
+      state,
+      locale,
+      getNumberFormatOptions({ state, attributes } as HassEntity)
+    );
   }
 
   // state of button is a timestamp
@@ -168,7 +182,8 @@ 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/domain_icon.ts

@@ -25,6 +25,8 @@ import {
   mdiPackageUp,
   mdiPowerPlug,
   mdiPowerPlugOff,
+  mdiAudioVideo,
+  mdiAudioVideoOff,
   mdiRestart,
   mdiSpeaker,
   mdiSpeakerOff,
@@ -159,6 +161,13 @@ export const domainIconWithoutDefault = (
             default:
               return mdiTelevision;
           }
+        case "receiver":
+          switch (compareState) {
+            case "off":
+              return mdiAudioVideoOff;
+            default:
+              return mdiAudioVideo;
+          }
         default:
           switch (compareState) {
             case "playing":

src/common/entity/feature_class_names.ts

@@ -1,10 +1,14 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { supportsFeature } from "./supports-feature";
 
+export type FeatureClassNames<T extends number = number> = Partial<
+  Record<T, string>
+>;
+
 // Expects classNames to be an object mapping feature-bit -> className
 export const featureClassNames = (
   stateObj: HassEntity,
-  classNames: { [feature: number]: string }
+  classNames: FeatureClassNames
 ) => {
   if (!stateObj || !stateObj.attributes.supported_features) {
     return "";

src/common/entity/get_states.ts

@@ -37,6 +37,7 @@ const FIXED_DOMAIN_STATES = {
   siren: ["on", "off"],
   sun: ["above_horizon", "below_horizon"],
   switch: ["on", "off"],
+  timer: ["active", "idle", "paused"],
   update: ["on", "off"],
   vacuum: ["cleaning", "docked", "error", "idle", "paused", "returning"],
   weather: [
@@ -239,10 +240,13 @@ export const getStates = (
       }
       break;
     case "light":
-      if (attribute === "effect") {
+      if (attribute === "effect" && state.attributes.effect_list) {
         result.push(...state.attributes.effect_list);
-      } else if (attribute === "color_mode") {
-        result.push(...state.attributes.color_modes);
+      } else if (
+        attribute === "color_mode" &&
+        state.attributes.supported_color_modes
+      ) {
+        result.push(...state.attributes.supported_color_modes);
       }
       break;
     case "media_player":

src/common/entity/state_active.ts

@@ -0,0 +1,36 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { OFF_STATES } from "../../data/entity";
+import { computeDomain } from "./compute_domain";
+
+const NORMAL_UNKNOWN_DOMAIN = ["button", "input_button", "scene"];
+const NORMAL_OFF_DOMAIN = ["script"];
+
+export function stateActive(stateObj: HassEntity): boolean {
+  const domain = computeDomain(stateObj.entity_id);
+  const state = stateObj.state;
+
+  if (
+    OFF_STATES.includes(state) &&
+    !(NORMAL_UNKNOWN_DOMAIN.includes(domain) && state === "unknown") &&
+    !(NORMAL_OFF_DOMAIN.includes(domain) && state === "script")
+  ) {
+    return false;
+  }
+
+  // Custom cases
+  switch (domain) {
+    case "cover":
+      return state === "open" || state === "opening";
+    case "device_tracker":
+    case "person":
+      return state !== "not_home";
+    case "media-player":
+      return state !== "idle" && state !== "standby";
+    case "vacuum":
+      return state === "on" || state === "cleaning";
+    case "plant":
+      return state === "problem";
+    default:
+      return true;
+  }
+}

src/common/entity/state_color.ts

@@ -0,0 +1,76 @@
+/** Return an color representing a state. */
+import { HassEntity } from "home-assistant-js-websocket";
+import { UpdateEntity, updateIsInstalling } from "../../data/update";
+import { alarmControlPanelColor } from "./color/alarm_control_panel_color";
+import { binarySensorColor } from "./color/binary_sensor_color";
+import { climateColor } from "./color/climate_color";
+import { coverColor } from "./color/cover_color";
+import { lockColor } from "./color/lock_color";
+import { sensorColor } from "./color/sensor_color";
+import { computeDomain } from "./compute_domain";
+import { stateActive } from "./state_active";
+
+export const stateColorCss = (stateObj?: HassEntity) => {
+  if (!stateObj || !stateActive(stateObj)) {
+    return `var(--rgb-disabled-color)`;
+  }
+
+  const color = stateColor(stateObj);
+
+  if (color) {
+    return `var(--rgb-state-${color}-color)`;
+  }
+
+  return `var(--rgb-primary-color)`;
+};
+
+export const stateColor = (stateObj: HassEntity) => {
+  const state = stateObj.state;
+  const domain = computeDomain(stateObj.entity_id);
+
+  switch (domain) {
+    case "alarm_control_panel":
+      return alarmControlPanelColor(state);
+
+    case "binary_sensor":
+      return binarySensorColor(stateObj);
+
+    case "cover":
+      return coverColor(stateObj);
+
+    case "climate":
+      return climateColor(state);
+
+    case "lock":
+      return lockColor(state);
+
+    case "light":
+      return "light";
+
+    case "humidifier":
+      return "humidifier";
+
+    case "media_player":
+      return "media-player";
+
+    case "person":
+    case "device_tracker":
+      return "person";
+
+    case "sensor":
+      return sensorColor(stateObj);
+
+    case "vacuum":
+      return "vacuum";
+
+    case "sun":
+      return state === "above_horizon" ? "sun-day" : "sun-night";
+
+    case "update":
+      return updateIsInstalling(stateObj as UpdateEntity)
+        ? "update-installing"
+        : "update";
+  }
+
+  return undefined;
+};

src/common/integrations/protocolIntegrationPicked.ts

@@ -1,30 +1,50 @@
 import { html } from "lit";
 import { getConfigEntries } from "../../data/config_entries";
+import { domainToName } from "../../data/integration";
+import { getIntegrationDescriptions } from "../../data/integrations";
+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 (
   element: HTMLElement,
   hass: HomeAssistant,
-  slug: string
+  domain: string,
+  options?: { brand?: string; domain?: string }
 ) => {
-  if (slug === "zwave_js") {
+  if (options?.domain) {
+    const localize = await hass.loadBackendTranslation("title", options.domain);
+    options.domain = domainToName(localize, options.domain);
+  }
+
+  if (options?.brand) {
+    const integrationDescriptions = await getIntegrationDescriptions(hass);
+    options.brand =
+      integrationDescriptions.core.integration[options.brand]?.name ||
+      options.brand;
+  }
+
+  if (domain === "zwave_js") {
     const entries = await getConfigEntries(hass, {
-      domain: "zwave_js",
+      domain,
     });
 
-    if (!entries.length) {
+    if (!isComponentLoaded(hass, "zwave_js") || !entries.length) {
       // If the component isn't loaded, ask them to load the integration first
       showConfirmationDialog(element, {
+        title: hass.localize(
+          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee_title",
+          { integration: "Z-Wave" }
+        ),
         text: hass.localize(
           "ui.panel.config.integrations.config_flow.missing_zwave_zigbee",
           {
             integration: "Z-Wave",
+            brand: options?.brand || options?.domain || "Z-Wave",
             supported_hardware_link: html`<a
               href=${documentationUrl(hass, "/docs/z-wave/controllers")}
               target="_blank"
@@ -39,8 +59,8 @@ export const protocolIntegrationPicked = async (
           "ui.panel.config.integrations.config_flow.proceed"
         ),
         confirm: () => {
-          fireEvent(element, "handler-picked", {
-            handler: "zwave_js",
+          showConfigFlowDialog(element, {
+            startFlowHandler: "zwave_js",
           });
         },
       });
@@ -50,14 +70,23 @@ export const protocolIntegrationPicked = async (
     showZWaveJSAddNodeDialog(element, {
       entry_id: entries[0].entry_id,
     });
-  } else if (slug === "zha") {
-    // If the component isn't loaded, ask them to load the integration first
-    if (!isComponentLoaded(hass, "zha")) {
+  } else if (domain === "zha") {
+    const entries = await getConfigEntries(hass, {
+      domain,
+    });
+
+    if (!isComponentLoaded(hass, "zha") || !entries.length) {
+      // If the component isn't loaded, ask them to load the integration first
       showConfirmationDialog(element, {
+        title: hass.localize(
+          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee_title",
+          { integration: "Zigbee" }
+        ),
         text: hass.localize(
           "ui.panel.config.integrations.config_flow.missing_zwave_zigbee",
           {
             integration: "Zigbee",
+            brand: options?.brand || options?.domain || "Z-Wave",
             supported_hardware_link: html`<a
               href=${documentationUrl(
                 hass,
@@ -75,8 +104,8 @@ export const protocolIntegrationPicked = async (
           "ui.panel.config.integrations.config_flow.proceed"
         ),
         confirm: () => {
-          fireEvent(element, "handler-picked", {
-            handler: "zha",
+          showConfigFlowDialog(element, {
+            startFlowHandler: "zha",
           });
         },
       });

src/common/number/format_number.ts

@@ -1,4 +1,7 @@
-import { HassEntity } from "home-assistant-js-websocket";
+import {
+  HassEntity,
+  HassEntityAttributeBase,
+} from "home-assistant-js-websocket";
 import { FrontendLocaleData, NumberFormat } from "../../data/translation";
 import { round } from "./round";
 
@@ -9,9 +12,9 @@ import { round } from "./round";
 export const isNumericState = (stateObj: HassEntity): boolean =>
   isNumericFromAttributes(stateObj.attributes);
 
-export const isNumericFromAttributes = (attributes: {
-  [key: string]: any;
-}): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
+export const isNumericFromAttributes = (
+  attributes: HassEntityAttributeBase
+): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
 
 export const numberFormatToLocale = (
   localeOptions: FrontendLocaleData
@@ -34,7 +37,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 locale The user-selected language and number format, from `hass.locale`
+ * @param localeOptions The user-selected language and formatting, from `hass.locale`
  * @param options Intl.NumberFormatOptions to use
  */
 export const formatNumber = (
@@ -81,12 +84,29 @@ export const formatNumber = (
   }`;
 };
 
+/**
+ * Checks if the current entity state should be formatted as an integer based on the `state` and `step` attribute and returns the appropriate `Intl.NumberFormatOptions` object with `maximumFractionDigits` set
+ * @param entityState The state object of the entity
+ * @returns An `Intl.NumberFormatOptions` object with `maximumFractionDigits` set to 0, or `undefined`
+ */
+export const getNumberFormatOptions = (
+  entityState: HassEntity
+): Intl.NumberFormatOptions | undefined => {
+  if (
+    Number.isInteger(Number(entityState.attributes?.step)) &&
+    Number.isInteger(Number(entityState.state))
+  ) {
+    return { maximumFractionDigits: 0 };
+  }
+  return undefined;
+};
+
 /**
  * Generates default options for Intl.NumberFormat
  * @param num The number to be formatted
  * @param options The Intl.NumberFormatOptions that should be included in the returned options
  */
-const getDefaultFormatOptions = (
+export const getDefaultFormatOptions = (
   num: string | number,
   options?: Intl.NumberFormatOptions
 ): Intl.NumberFormatOptions => {
@@ -102,7 +122,8 @@ const getDefaultFormatOptions = (
   // Keep decimal trailing zeros if they are present in a string numeric value
   if (
     !options ||
-    (!options.minimumFractionDigits && !options.maximumFractionDigits)
+    (options.minimumFractionDigits === undefined &&
+      options.maximumFractionDigits === undefined)
   ) {
     const digits = num.indexOf(".") > -1 ? num.split(".")[1].length : 0;
     defaultOptions.minimumFractionDigits = digits;

src/common/string/title-case.ts

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

src/common/translations/blank_before_percent.ts

@@ -0,0 +1,18 @@
+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,9 +22,7 @@ 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"}`
@@ -34,7 +32,6 @@ 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}`
@@ -42,7 +39,6 @@ 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

@@ -0,0 +1,97 @@
+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/buttons/ha-call-service-button.js

@@ -14,6 +14,7 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
       <ha-progress-button
         id="progress"
         progress="[[progress]]"
+        disabled="[[disabled]]"
         on-click="buttonTapped"
         tabindex="0"
         ><slot></slot
@@ -48,6 +49,10 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
       confirmation: {
         type: String,
       },
+
+      disabled: {
+        type: Boolean,
+      },
     };
   }
 

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

@@ -118,101 +118,9 @@ export class StateHistoryChartTimeline extends LitElement {
 
   public willUpdate(changedProps: PropertyValues) {
     if (!this.hasUpdated) {
-      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),
-      };
+      this._createOptions();
     }
+
     if (
       changedProps.has("data") ||
       this._chartTime <
@@ -222,6 +130,107 @@ 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,6 +13,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import {
@@ -20,31 +21,38 @@ import {
   numberFormatToLocale,
 } from "../../common/number/format_number";
 import {
-  getStatisticIds,
+  getDisplayUnit,
   getStatisticLabel,
+  getStatisticMetadata,
   Statistics,
   statisticsHaveType,
-  StatisticsMetaData,
   StatisticType,
-} from "../../data/history";
+} from "../../data/recorder";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
 
+export type ExtendedStatisticType = StatisticType | "state";
+
+export const statTypeMap: Record<ExtendedStatisticType, StatisticType> = {
+  mean: "mean",
+  min: "min",
+  max: "max",
+  sum: "sum",
+  state: "sum",
+};
 @customElement("statistics-chart")
 class StatisticsChart extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public statisticsData!: Statistics;
 
-  @property({ type: Array }) public statisticIds?: StatisticsMetaData[];
-
   @property() public names: boolean | Record<string, string> = false;
 
   @property() public unit?: string;
 
   @property({ attribute: false }) public endTime?: Date;
 
-  @property({ type: Array }) public statTypes: Array<StatisticType> = [
+  @property({ type: Array }) public statTypes: Array<ExtendedStatisticType> = [
     "sum",
     "min",
     "mean",
@@ -191,18 +199,28 @@ class StatisticsChart extends LitElement {
     };
   }
 
-  private async _getStatisticIds() {
-    this.statisticIds = await getStatisticIds(this.hass);
-  }
+  private _getStatisticsMetaData = memoizeOne(
+    async (statisticIds: string[] | undefined) => {
+      const statsMetadataArray = await getStatisticMetadata(
+        this.hass,
+        statisticIds
+      );
+      const statisticsMetaData = {};
+      statsMetadataArray.forEach((x) => {
+        statisticsMetaData[x.statistic_id] = x;
+      });
+      return statisticsMetaData;
+    }
+  );
 
   private async _generateData() {
     if (!this.statisticsData) {
       return;
     }
 
-    if (!this.statisticIds) {
-      await this._getStatisticIds();
-    }
+    const statisticsMetaData = await this._getStatisticsMetaData(
+      Object.keys(this.statisticsData)
+    );
 
     let colorIndex = 0;
     const statisticsData = Object.values(this.statisticsData);
@@ -233,18 +251,19 @@ class StatisticsChart extends LitElement {
     const names = this.names || {};
     statisticsData.forEach((stats) => {
       const firstStat = stats[0];
-      const meta = this.statisticIds!.find(
-        (stat) => stat.statistic_id === firstStat.statistic_id
-      );
+      const meta = statisticsMetaData?.[firstStat.statistic_id];
       let name = names[firstStat.statistic_id];
-      if (!name) {
+      if (name === undefined) {
         name = getStatisticLabel(this.hass, firstStat.statistic_id, meta);
       }
 
       if (!this.unit) {
         if (unit === undefined) {
-          unit = meta?.display_unit_of_measurement;
-        } else if (unit !== meta?.display_unit_of_measurement) {
+          unit = getDisplayUnit(this.hass, firstStat.statistic_id, meta);
+        } else if (
+          unit !== getDisplayUnit(this.hass, firstStat.statistic_id, meta)
+        ) {
+          // Clear unit if not all statistics have same unit
           unit = null;
         }
       }
@@ -301,14 +320,18 @@ class StatisticsChart extends LitElement {
         : this.statTypes;
 
       sortedTypes.forEach((type) => {
-        if (statisticsHaveType(stats, type)) {
+        if (statisticsHaveType(stats, statTypeMap[type])) {
           const band = drawBands && (type === "min" || type === "max");
           statTypes.push(type);
           statDataSets.push({
-            label: `${name} (${this.hass.localize(
-              `ui.components.statistics_charts.statistic_types.${type}`
-            )})
-            `,
+            label: name
+              ? `${name} (${this.hass.localize(
+                  `ui.components.statistics_charts.statistic_types.${type}`
+                )})
+            `
+              : this.hass.localize(
+                  `ui.components.statistics_charts.statistic_types.${type}`
+                ),
             fill: drawBands
               ? type === "min"
                 ? "+1"
@@ -329,7 +352,6 @@ class StatisticsChart extends LitElement {
 
       let prevDate: Date | null = null;
       // Process chart data.
-      let initVal: number | null = null;
       let prevSum: number | null = null;
       stats.forEach((stat) => {
         const date = new Date(stat.start);
@@ -341,11 +363,11 @@ class StatisticsChart extends LitElement {
         statTypes.forEach((type) => {
           let val: number | null;
           if (type === "sum") {
-            if (initVal === null) {
-              initVal = val = stat.state || 0;
+            if (prevSum === null) {
+              val = 0;
               prevSum = stat.sum;
             } else {
-              val = initVal + ((stat.sum || 0) - prevSum!);
+              val = (stat.sum || 0) - prevSum;
             }
           } else {
             val = stat[type];

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

@@ -69,6 +69,7 @@ export interface DataTableSortColumnData {
 }
 
 export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
+  main?: boolean;
   title: TemplateResult | string;
   label?: TemplateResult | string;
   type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
@@ -406,7 +407,7 @@ export class HaDataTable extends LitElement {
           }
           return html`
             <div
-              role="cell"
+              role=${column.main ? "rowheader" : "cell"}
               class="mdc-data-table__cell ${classMap({
                 "mdc-data-table__cell--numeric": column.type === "numeric",
                 "mdc-data-table__cell--icon": column.type === "icon",
@@ -723,6 +724,11 @@ export class HaDataTable extends LitElement {
           width: 54px;
         }
 
+        .mdc-data-table__cell--icon img {
+          width: 24px;
+          height: 24px;
+        }
+
         .mdc-data-table__header-cell.mdc-data-table__header-cell--icon {
           text-align: center;
         }
@@ -739,6 +745,7 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__cell--icon:first-child ha-icon,
+        .mdc-data-table__cell--icon:first-child img,
         .mdc-data-table__cell--icon:first-child ha-state-icon,
         .mdc-data-table__cell--icon:first-child ha-svg-icon {
           margin-left: 8px;
@@ -747,7 +754,12 @@ export class HaDataTable extends LitElement {
         :host([dir="rtl"])
           .mdc-data-table__cell--icon:first-child
           ha-state-icon,
-        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-svg-icon {
+        :host([dir="rtl"])
+          .mdc-data-table__cell--icon:first-child
+          ha-svg-icon
+          :host([dir="rtl"])
+          .mdc-data-table__cell--icon:first-child
+          img {
           margin-left: auto;
           margin-right: 8px;
         }

src/components/date-range-picker.ts

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

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

@@ -221,12 +221,14 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     }
   );
 
-  public open() {
-    this.comboBox?.open();
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
   }
 
-  public focus() {
-    this.comboBox?.focus();
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
   }
 
   public hassSubscribe(): UnsubscribeFunc[] {
@@ -246,7 +248,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   protected updated(changedProps: PropertyValues) {
     if (
       (!this._init && this.devices && this.areas && this.entities) ||
-      (changedProps.has("_opened") && this._opened)
+      (this._init && changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
       (this.comboBox as any).items = this._getDevices(
@@ -262,9 +264,6 @@ 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,16 +107,14 @@ export class HaEntityPicker extends LitElement {
 
   @query("ha-combo-box", true) public comboBox!: HaComboBox;
 
-  public open() {
-    this.updateComplete.then(() => {
-      this.comboBox?.open();
-    });
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
   }
 
-  public focus() {
-    this.updateComplete.then(() => {
-      this.comboBox?.focus();
-    });
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
   }
 
   private _initedStates = false;
@@ -312,6 +310,7 @@ export class HaEntityPicker extends LitElement {
         .filteredItems=${this._states}
         .renderer=${rowRenderer}
         .required=${this.required}
+        .disabled=${this.disabled}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}

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

@@ -7,6 +7,8 @@ import { getStates } from "../../common/entity/get_states";
 import { HomeAssistant } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
+import { formatAttributeValue } from "../../data/entity_attributes";
+import { fireEvent } from "../../common/dom/fire_event";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
@@ -55,7 +57,7 @@ class HaEntityStatePicker extends LitElement {
                     this.hass.locale,
                     key
                   )
-                : key,
+                : formatAttributeValue(this.hass, key),
             }))
           : [];
     }
@@ -69,16 +71,7 @@ class HaEntityStatePicker extends LitElement {
     return html`
       <ha-combo-box
         .hass=${this.hass}
-        .value=${this.value
-          ? this.entityId && this.hass.states[this.entityId]
-            ? computeStateDisplay(
-                this.hass.localize,
-                this.hass.states[this.entityId],
-                this.hass.locale,
-                this.value
-              )
-            : this.value
-          : ""}
+        .value=${this._value}
         .autofocus=${this.autofocus}
         .label=${this.label ??
         this.hass.localize("ui.components.entity.entity-state-picker.state")}
@@ -95,12 +88,28 @@ class HaEntityStatePicker extends LitElement {
     `;
   }
 
+  private get _value() {
+    return this.value || "";
+  }
+
   private _openedChanged(ev: PolymerChangedEvent<boolean>) {
     this._opened = ev.detail.value;
   }
 
   private _valueChanged(ev: PolymerChangedEvent<string>) {
-    this.value = ev.detail.value;
+    ev.stopPropagation();
+    const newValue = ev.detail.value;
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
   }
 }
 

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

@@ -16,6 +16,7 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import {
   formatNumber,
+  getNumberFormatOptions,
   isNumericState,
 } from "../../common/number/format_number";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
@@ -149,7 +150,11 @@ export class HaStateLabelBadge extends LitElement {
           entityState.state === UNAVAILABLE
           ? "—"
           : isNumericState(entityState)
-          ? formatNumber(entityState.state, this.hass!.locale)
+          ? formatNumber(
+              entityState.state,
+              this.hass!.locale,
+              getNumberFormatOptions(entityState)
+            )
           : computeStateDisplay(
               this.hass!.localize,
               entityState,

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

@@ -3,10 +3,14 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { ensureArray } from "../../common/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import { computeStateName } from "../../common/entity/compute_state_name";
 import { stringCompare } from "../../common/string/compare";
-import { getStatisticIds, StatisticsMetaData } from "../../data/history";
+import {
+  getStatisticIds,
+  getStatisticLabel,
+  StatisticsMetaData,
+} from "../../data/recorder";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
@@ -39,23 +43,21 @@ export class HaStatisticPicker extends LitElement {
     type: Array,
     attribute: "include-statistics-unit-of-measurement",
   })
-  public includeStatisticsUnitOfMeasurement?: string[];
+  public includeStatisticsUnitOfMeasurement?: string | string[];
 
   /**
-   * Show only statistics displayed with these units of measurements.
-   * @type {Array}
-   * @attr include-display-unit-of-measurement
+   * Show only statistics with these unit classes.
+   * @attr include-unit-class
    */
-  @property({ type: Array, attribute: "include-display-unit-of-measurement" })
-  public includeDisplayUnitOfMeasurement?: string[];
+  @property({ attribute: "include-unit-class" })
+  public includeUnitClass?: string | string[];
 
   /**
    * Show only statistics with these device classes.
-   * @type {Array}
-   * @attr include-device-classes
+   * @attr include-device-class
    */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
+  @property({ attribute: "include-device-class" })
+  public includeDeviceClass?: string | string[];
 
   /**
    * Show only statistics on entities.
@@ -97,9 +99,9 @@ export class HaStatisticPicker extends LitElement {
   private _getStatistics = memoizeOne(
     (
       statisticIds: StatisticsMetaData[],
-      includeStatisticsUnitOfMeasurement?: string[],
-      includeDisplayUnitOfMeasurement?: string[],
-      includeDeviceClasses?: string[],
+      includeStatisticsUnitOfMeasurement?: string | string[],
+      includeUnitClass?: string | string[],
+      includeDeviceClass?: string | string[],
       entitiesOnly?: boolean
     ): Array<{ id: string; name: string; state?: HassEntity }> => {
       if (!statisticIds.length) {
@@ -114,19 +116,33 @@ export class HaStatisticPicker extends LitElement {
       }
 
       if (includeStatisticsUnitOfMeasurement) {
+        const includeUnits: (string | null)[] = ensureArray(
+          includeStatisticsUnitOfMeasurement
+        );
         statisticIds = statisticIds.filter((meta) =>
-          includeStatisticsUnitOfMeasurement.includes(
-            meta.statistics_unit_of_measurement
-          )
+          includeUnits.includes(meta.statistics_unit_of_measurement)
         );
       }
-      if (includeDisplayUnitOfMeasurement) {
+      if (includeUnitClass) {
+        const includeUnitClasses: (string | null)[] =
+          ensureArray(includeUnitClass);
         statisticIds = statisticIds.filter((meta) =>
-          includeDisplayUnitOfMeasurement.includes(
-            meta.display_unit_of_measurement
-          )
+          includeUnitClasses.includes(meta.unit_class)
         );
       }
+      if (includeDeviceClass) {
+        const includeDeviceClasses: (string | null)[] =
+          ensureArray(includeDeviceClass);
+        statisticIds = statisticIds.filter((meta) => {
+          const stateObj = this.hass.states[meta.statistic_id];
+          if (!stateObj) {
+            return true;
+          }
+          return includeDeviceClasses.includes(
+            stateObj.attributes.device_class || ""
+          );
+        });
+      }
 
       const output: Array<{
         id: string;
@@ -139,23 +155,16 @@ export class HaStatisticPicker extends LitElement {
           if (!entitiesOnly) {
             output.push({
               id: meta.statistic_id,
-              name: meta.name || meta.statistic_id,
+              name: getStatisticLabel(this.hass, meta.statistic_id, meta),
             });
           }
           return;
         }
-        if (
-          !includeDeviceClasses ||
-          includeDeviceClasses.includes(
-            entityState!.attributes.device_class || ""
-          )
-        ) {
-          output.push({
-            id: meta.statistic_id,
-            name: computeStateName(entityState),
-            state: entityState,
-          });
-        }
+        output.push({
+          id: meta.statistic_id,
+          name: getStatisticLabel(this.hass, meta.statistic_id, meta),
+          state: entityState,
+        });
       });
 
       if (!output.length) {
@@ -206,8 +215,8 @@ export class HaStatisticPicker extends LitElement {
         (this.comboBox as any).items = this._getStatistics(
           this.statisticIds!,
           this.includeStatisticsUnitOfMeasurement,
-          this.includeDisplayUnitOfMeasurement,
-          this.includeDeviceClasses,
+          this.includeUnitClass,
+          this.includeDeviceClass,
           this.entitiesOnly
         );
       } else {
@@ -215,8 +224,8 @@ export class HaStatisticPicker extends LitElement {
           (this.comboBox as any).items = this._getStatistics(
             this.statisticIds!,
             this.includeStatisticsUnitOfMeasurement,
-            this.includeDisplayUnitOfMeasurement,
-            this.includeDeviceClasses,
+            this.includeUnitClass,
+            this.includeDeviceClass,
             this.entitiesOnly
           );
         });

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

@@ -22,11 +22,59 @@ 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[];
+
+  /**
+   * Show only statistics with these device classes.
+   * @attr include-device-class
+   */
+  @property({ attribute: "include-device-class" })
+  public includeDeviceClass?: string | string[];
+
+  /**
+   * Ignore filtering of statistics type and units when only a single statistic is selected.
+   * @type {boolean}
+   * @attr ignore-restrictions-on-first-statistic
+   */
+  @property({
+    type: Boolean,
+    attribute: "ignore-restrictions-on-first-statistic",
+  })
+  public ignoreRestrictionsOnFirstStatistic = false;
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
     }
 
+    const ignoreRestriction =
+      this.ignoreRestrictionsOnFirstStatistic &&
+      this._currentStatistics.length <= 1;
+
+    const includeStatisticsUnitCurrent = ignoreRestriction
+      ? undefined
+      : this.includeStatisticsUnitOfMeasurement;
+    const includeUnitClassCurrent = ignoreRestriction
+      ? undefined
+      : this.includeUnitClass;
+    const includeStatisticTypesCurrent = ignoreRestriction
+      ? undefined
+      : this.statisticTypes;
+
     return html`
       ${this._currentStatistics.map(
         (statisticId) => html`
@@ -34,8 +82,10 @@ class HaStatisticsPicker extends LitElement {
             <ha-statistic-picker
               .curValue=${statisticId}
               .hass=${this.hass}
+              .includeStatisticsUnitOfMeasurement=${includeStatisticsUnitCurrent}
+              .includeUnitClass=${includeUnitClassCurrent}
               .value=${statisticId}
-              .statisticTypes=${this.statisticTypes}
+              .statisticTypes=${includeStatisticTypesCurrent}
               .statisticIds=${this.statisticIds}
               .label=${this.pickedStatisticLabel}
               @value-changed=${this._statisticChanged}
@@ -46,6 +96,10 @@ class HaStatisticsPicker extends LitElement {
       <div>
         <ha-statistic-picker
           .hass=${this.hass}
+          .includeStatisticsUnitOfMeasurement=${this
+            .includeStatisticsUnitOfMeasurement}
+          .includeUnitClass=${this.includeUnitClass}
+          .includeDeviceClass=${this.includeDeviceClass}
           .statisticTypes=${this.statisticTypes}
           .statisticIds=${this.statisticIds}
           .label=${this.pickStatisticLabel}

src/components/ha-area-picker.ts

@@ -116,16 +116,14 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
     ];
   }
 
-  public open() {
-    this.updateComplete.then(() => {
-      this.comboBox?.open();
-    });
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
   }
 
-  public focus() {
-    this.updateComplete.then(() => {
-      this.comboBox?.focus();
-    });
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
   }
 
   private _getAreas = memoizeOne(
@@ -290,7 +288,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
   protected updated(changedProps: PropertyValues) {
     if (
       (!this._init && this._devices && this._areas && this._entities) ||
-      (changedProps.has("_opened") && this._opened)
+      (this._init && changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
       (this.comboBox as any).items = this._getAreas(
@@ -308,9 +306,6 @@ 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-bar-slider.ts

@@ -0,0 +1,426 @@
+import "hammerjs";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
+import { fireEvent } from "../common/dom/fire_event";
+
+declare global {
+  interface HASSDomEvents {
+    "slider-moved": { value?: number };
+  }
+}
+
+const A11Y_KEY_CODES = new Set([
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowDown",
+  "PageUp",
+  "PageDown",
+  "Home",
+  "End",
+]);
+
+const getPercentageFromEvent = (e: HammerInput, vertical: boolean) => {
+  if (vertical) {
+    const y = e.center.y;
+    const offset = e.target.getBoundingClientRect().top;
+    const total = e.target.clientHeight;
+    return Math.max(Math.min(1, 1 - (y - offset) / total), 0);
+  }
+  const x = e.center.x;
+  const offset = e.target.getBoundingClientRect().left;
+  const total = e.target.clientWidth;
+  return Math.max(Math.min(1, (x - offset) / total), 0);
+};
+
+@customElement("ha-bar-slider")
+export class HaBarSlider extends LitElement {
+  @property({ type: Boolean })
+  public disabled = false;
+
+  @property()
+  public mode?: "start" | "end" | "indicator" = "start";
+
+  @property({ type: Boolean })
+  public vertical = false;
+
+  @property({ type: Number })
+  public value?: number;
+
+  @property({ type: Number })
+  public step = 1;
+
+  @property({ type: Number })
+  public min = 0;
+
+  @property({ type: Number })
+  public max = 100;
+
+  @property()
+  public label?: string;
+
+  private _mc?: HammerManager;
+
+  @property({ type: Boolean, reflect: true })
+  public pressed = false;
+
+  valueToPercentage(value: number) {
+    return (value - this.min) / (this.max - this.min);
+  }
+
+  percentageToValue(value: number) {
+    return (this.max - this.min) * value + this.min;
+  }
+
+  steppedValue(value: number) {
+    return Math.round(value / this.step) * this.step;
+  }
+
+  boundedValue(value: number) {
+    return Math.min(Math.max(value, this.min), this.max);
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    this.setupListeners();
+    this.setAttribute("role", "slider");
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (changedProps.has("value")) {
+      const valuenow = this.steppedValue(this.value ?? 0);
+      this.setAttribute("aria-valuenow", valuenow.toString());
+    }
+    if (changedProps.has("min")) {
+      this.setAttribute("aria-valuemin", this.min.toString());
+    }
+    if (changedProps.has("max")) {
+      this.setAttribute("aria-valuemax", this.max.toString());
+    }
+    if (changedProps.has("vertical")) {
+      const orientation = this.vertical ? "vertical" : "horizontal";
+      this.setAttribute("aria-orientation", orientation);
+    }
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setupListeners();
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.destroyListeners();
+  }
+
+  @query("#slider")
+  private slider;
+
+  setupListeners() {
+    if (this.slider && !this._mc) {
+      this._mc = new Hammer.Manager(this.slider, {
+        touchAction: this.vertical ? "pan-x" : "pan-y",
+      });
+      this._mc.add(
+        new Hammer.Pan({
+          threshold: 10,
+          direction: Hammer.DIRECTION_ALL,
+          enable: true,
+        })
+      );
+
+      this._mc.add(new Hammer.Tap({ event: "singletap" }));
+
+      let savedValue;
+      this._mc.on("panstart", () => {
+        if (this.disabled) return;
+        this.pressed = true;
+        savedValue = this.value;
+      });
+      this._mc.on("pancancel", () => {
+        if (this.disabled) return;
+        this.pressed = false;
+        this.value = savedValue;
+      });
+      this._mc.on("panmove", (e) => {
+        if (this.disabled) return;
+        const percentage = getPercentageFromEvent(e, this.vertical);
+        this.value = this.percentageToValue(percentage);
+        const value = this.steppedValue(this.value);
+        fireEvent(this, "slider-moved", { value });
+      });
+      this._mc.on("panend", (e) => {
+        if (this.disabled) return;
+        this.pressed = false;
+        const percentage = getPercentageFromEvent(e, this.vertical);
+        this.value = this.steppedValue(this.percentageToValue(percentage));
+        fireEvent(this, "slider-moved", { value: undefined });
+        fireEvent(this, "value-changed", { value: this.value });
+      });
+
+      this._mc.on("singletap", (e) => {
+        if (this.disabled) return;
+        const percentage = getPercentageFromEvent(e, this.vertical);
+        this.value = this.steppedValue(this.percentageToValue(percentage));
+        fireEvent(this, "value-changed", { value: this.value });
+      });
+
+      this.addEventListener("keydown", this._handleKeyDown);
+      this.addEventListener("keyup", this._handleKeyUp);
+    }
+  }
+
+  destroyListeners() {
+    if (this._mc) {
+      this._mc.destroy();
+      this._mc = undefined;
+    }
+    this.removeEventListener("keydown", this._handleKeyDown);
+    this.removeEventListener("keyup", this._handleKeyDown);
+  }
+
+  private get _tenPercentStep() {
+    return Math.max(this.step, (this.max - this.min) / 10);
+  }
+
+  _handleKeyDown(e: KeyboardEvent) {
+    if (!A11Y_KEY_CODES.has(e.code)) return;
+    e.preventDefault();
+    switch (e.code) {
+      case "ArrowRight":
+      case "ArrowUp":
+        this.value = this.boundedValue((this.value ?? 0) + this.step);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        this.value = this.boundedValue((this.value ?? 0) - this.step);
+        break;
+      case "PageUp":
+        this.value = this.steppedValue(
+          this.boundedValue((this.value ?? 0) + this._tenPercentStep)
+        );
+        break;
+      case "PageDown":
+        this.value = this.steppedValue(
+          this.boundedValue((this.value ?? 0) - this._tenPercentStep)
+        );
+        break;
+      case "Home":
+        this.value = this.min;
+        break;
+      case "End":
+        this.value = this.max;
+        break;
+    }
+    fireEvent(this, "slider-moved", { value: this.value });
+  }
+
+  _handleKeyUp(e: KeyboardEvent) {
+    if (!A11Y_KEY_CODES.has(e.code)) return;
+    e.preventDefault();
+    fireEvent(this, "value-changed", { value: this.value });
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div
+        id="slider"
+        class="slider"
+        style=${styleMap({
+          "--value": `${this.valueToPercentage(this.value ?? 0)}`,
+        })}
+      >
+        <div class="slider-track-background"></div>
+        ${this.mode === "indicator"
+          ? html`
+              <div
+                class=${classMap({
+                  "slider-track-indicator": true,
+                  vertical: this.vertical,
+                })}
+              ></div>
+            `
+          : html`
+              <div
+                class=${classMap({
+                  "slider-track-bar": true,
+                  vertical: this.vertical,
+                  [this.mode ?? "start"]: true,
+                })}
+              ></div>
+            `}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: block;
+        --slider-bar-color: rgb(var(--rgb-primary-color));
+        --slider-bar-background: rgba(var(--rgb-disabled-color), 0.2);
+        --slider-bar-thickness: 40px;
+        --slider-bar-border-radius: 12px;
+        height: var(--slider-bar-thickness);
+        width: 100%;
+      }
+      :host([vertical]) {
+        width: var(--slider-bar-thickness);
+        height: 100%;
+      }
+      .slider {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        border-radius: var(--slider-bar-border-radius);
+        transform: translateZ(0);
+        overflow: hidden;
+        cursor: pointer;
+      }
+      .slider * {
+        pointer-events: none;
+      }
+      .slider .slider-track-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background: var(--slider-bar-background);
+      }
+      .slider .slider-track-bar {
+        --border-radius: calc(var(--slider-bar-border-radius) / 2);
+        --handle-size: 4px;
+        --handle-margin: calc(var(--slider-bar-thickness) / 8);
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: var(--slider-bar-color);
+        transition: transform 180ms ease-in-out;
+      }
+      .slider .slider-track-bar::after {
+        display: block;
+        content: "";
+        position: absolute;
+        margin: auto;
+        border-radius: var(--handle-size);
+        background-color: white;
+      }
+      .slider .slider-track-bar {
+        top: 0;
+        left: 0;
+        transform: translate3d(calc((var(--value, 0) - 1) * 100%), 0, 0);
+        border-radius: 0 var(--border-radius) var(--border-radius) 0;
+      }
+      .slider .slider-track-bar:after {
+        top: 0;
+        bottom: 0;
+        right: var(--handle-margin);
+        height: 50%;
+        width: var(--handle-size);
+      }
+      .slider .slider-track-bar.end {
+        right: 0;
+        left: initial;
+        transform: translate3d(calc(var(--value, 0) * 100%), 0, 0);
+        border-radius: var(--border-radius) 0 0 var(--border-radius);
+      }
+      .slider .slider-track-bar.end::after {
+        right: initial;
+        left: var(--handle-margin);
+      }
+
+      .slider .slider-track-bar.vertical {
+        bottom: 0;
+        left: 0;
+        transform: translate3d(0, calc((1 - var(--value, 0)) * 100%), 0);
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
+      }
+      .slider .slider-track-bar.vertical:after {
+        top: var(--handle-margin);
+        right: 0;
+        left: 0;
+        bottom: initial;
+        width: 50%;
+        height: var(--handle-size);
+      }
+      .slider .slider-track-bar.vertical.end {
+        top: 0;
+        bottom: initial;
+        transform: translate3d(0, calc((0 - var(--value, 0)) * 100%), 0);
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+      }
+      .slider .slider-track-bar.vertical.end::after {
+        top: initial;
+        bottom: var(--handle-margin);
+      }
+
+      .slider .slider-track-indicator:after {
+        display: block;
+        content: "";
+        background-color: rgb(var(--rgb-secondary-text-color));
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        margin: auto;
+        border-radius: var(--handle-size);
+      }
+
+      .slider .slider-track-indicator {
+        --indicator-size: calc(var(--slider-bar-thickness) / 4);
+        --handle-size: 4px;
+        position: absolute;
+        background-color: white;
+        border-radius: var(--handle-size);
+        transition: left 180ms ease-in-out, bottom 180ms ease-in-out;
+        top: 0;
+        bottom: 0;
+        left: calc(var(--value, 0) * (100% - var(--indicator-size)));
+        width: var(--indicator-size);
+      }
+      .slider .slider-track-indicator:after {
+        height: 50%;
+        width: var(--handle-size);
+      }
+
+      .slider .slider-track-indicator.vertical {
+        top: initial;
+        right: 0;
+        left: 0;
+        bottom: calc(var(--value, 0) * (100% - var(--indicator-size)));
+        height: var(--indicator-size);
+        width: 100%;
+      }
+      .slider .slider-track-indicator.vertical:after {
+        height: var(--handle-size);
+        width: 50%;
+      }
+
+      :host([pressed]) .slider-track-bar,
+      :host([pressed]) .slider-track-indicator {
+        transition: none;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-bar-slider": HaBarSlider;
+  }
+}

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"
-                @input=${this._valueChanged}
+                @change=${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"
-          @input=${this._valueChanged}
+          @change=${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}
-          @input=${this._valueChanged}
+          @change=${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}
-              @input=${this._valueChanged}
+              @change=${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}
-              @input=${this._valueChanged}
+              @change=${this._valueChanged}
               @focusin=${this._onFocus}
               name="milliseconds"
               no-spinner

src/components/ha-camera-stream.ts

@@ -15,6 +15,7 @@ import {
   CAMERA_SUPPORT_STREAM,
   computeMJPEGStreamUrl,
   fetchStreamUrl,
+  fetchThumbnailUrlWithCache,
   STREAM_TYPE_HLS,
   STREAM_TYPE_WEB_RTC,
 } from "../data/camera";
@@ -23,7 +24,7 @@ import "./ha-hls-player";
 import "./ha-web-rtc-player";
 
 @customElement("ha-camera-stream")
-class HaCameraStream extends LitElement {
+export class HaCameraStream extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: CameraEntity;
@@ -37,6 +38,9 @@ class HaCameraStream extends LitElement {
   @property({ type: Boolean, attribute: "allow-exoplayer" })
   public allowExoPlayer = false;
 
+  // Video background image before its loaded
+  @state() private _posterUrl?: string;
+
   // We keep track if we should force MJPEG if there was a failure
   // to get the HLS stream url. This is reset if we change entities.
   @state() private _forceMJPEG?: string;
@@ -51,12 +55,14 @@ class HaCameraStream extends LitElement {
       !this._shouldRenderMJPEG &&
       this.stateObj &&
       (changedProps.get("stateObj") as CameraEntity | undefined)?.entity_id !==
-        this.stateObj.entity_id &&
-      this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_HLS
+        this.stateObj.entity_id
     ) {
-      this._forceMJPEG = undefined;
-      this._url = undefined;
-      this._getStreamUrl();
+      this._getPosterUrl();
+      if (this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_HLS) {
+        this._forceMJPEG = undefined;
+        this._url = undefined;
+        this._getStreamUrl();
+      }
     }
   }
 
@@ -75,7 +81,7 @@ class HaCameraStream extends LitElement {
       return html``;
     }
     if (__DEMO__ || this._shouldRenderMJPEG) {
-      return html` <img
+      return html`<img
         .src=${__DEMO__
           ? this.stateObj.attributes.entity_picture!
           : this._connected
@@ -94,6 +100,7 @@ class HaCameraStream extends LitElement {
             .controls=${this.controls}
             .hass=${this.hass}
             .url=${this._url}
+            .posterUrl=${this._posterUrl}
           ></ha-hls-player>`
         : html``;
     }
@@ -105,6 +112,7 @@ class HaCameraStream extends LitElement {
         .controls=${this.controls}
         .hass=${this.hass}
         .entityid=${this.stateObj.entity_id}
+        .posterUrl=${this._posterUrl}
       ></ha-web-rtc-player>`;
     }
     return html``;
@@ -129,6 +137,20 @@ class HaCameraStream extends LitElement {
     return !isComponentLoaded(this.hass!, "stream");
   }
 
+  private async _getPosterUrl(): Promise<void> {
+    try {
+      this._posterUrl = await fetchThumbnailUrlWithCache(
+        this.hass!,
+        this.stateObj!.entity_id,
+        this.clientWidth,
+        this.clientHeight
+      );
+    } catch (err: any) {
+      // poster url is optional
+      this._posterUrl = undefined;
+    }
+  }
+
   private async _getStreamUrl(): Promise<void> {
     try {
       const { url } = await fetchStreamUrl(

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

src/components/ha-combo-box.ts

@@ -1,5 +1,6 @@
 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,
@@ -8,14 +9,21 @@ import type {
   ComboBoxLightValueChangedEvent,
 } from "@vaadin/combo-box/vaadin-combo-box-light";
 import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
+import {
+  css,
+  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",
@@ -101,18 +109,19 @@ 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 open() {
-    this.updateComplete.then(() => {
-      this._comboBox?.open();
-    });
+  public async open() {
+    await this.updateComplete;
+    this._comboBox?.open();
   }
 
-  public focus() {
-    this.updateComplete.then(() => {
-      this._comboBox?.inputElement?.focus();
-    });
+  public async focus() {
+    await this.updateComplete;
+    await this._inputElement?.updateComplete;
+    this._inputElement?.focus();
   }
 
   public disconnectedCallback() {
@@ -225,11 +234,13 @@ export class HaComboBox extends LitElement {
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);
 
-    if (
-      opened &&
-      "MutationObserver" in window &&
-      !this._overlayMutationObserver
-    ) {
+    if (opened) {
+      this.removeInertOnOverlay();
+    }
+  }
+
+  private removeInertOnOverlay() {
+    if ("MutationObserver" in window && !this._overlayMutationObserver) {
       const overlay = document.querySelector<HTMLElement>(
         "vaadin-combo-box-overlay"
       );
@@ -268,6 +279,16 @@ export class HaComboBox extends LitElement {
     }
   }
 
+  updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (
+      changedProps.has("filteredItems") ||
+      (changedProps.has("items") && this.opened)
+    ) {
+      this.removeInertOnOverlay();
+    }
+  }
+
   private _filterChanged(ev: ComboBoxLightFilterChangedEvent) {
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail, { composed: false });
@@ -278,7 +299,7 @@ export class HaComboBox extends LitElement {
     const newValue = ev.detail.value;
 
     if (newValue !== this.value) {
-      fireEvent(this, "value-changed", { value: newValue });
+      fireEvent(this, "value-changed", { value: newValue || undefined });
     }
   }
 
@@ -290,6 +311,7 @@ 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: "integration",
+      type: ["device", "hub", "service"],
       domain: this.integration,
     }).then((configEntries) => {
       this._configEntries = configEntries

src/components/ha-cover-controls.ts

@@ -3,15 +3,14 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
+import { supportsFeature } from "../common/entity/supports-feature";
 import {
   CoverEntity,
+  CoverEntityFeature,
   isClosing,
   isFullyClosed,
   isFullyOpen,
   isOpening,
-  supportsClose,
-  supportsOpen,
-  supportsStop,
 } from "../data/cover";
 import { UNAVAILABLE } from "../data/entity";
 import type { HomeAssistant } from "../types";
@@ -32,7 +31,7 @@ class HaCoverControls extends LitElement {
       <div class="state">
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsOpen(this.stateObj),
+            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.OPEN),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.open_cover"
@@ -44,7 +43,7 @@ class HaCoverControls extends LitElement {
         </ha-icon-button>
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsStop(this.stateObj),
+            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.STOP),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.stop_cover"
@@ -55,7 +54,7 @@ class HaCoverControls extends LitElement {
         ></ha-icon-button>
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsClose(this.stateObj),
+            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.CLOSE),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.close_cover"

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

@@ -2,13 +2,12 @@ import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { supportsFeature } from "../common/entity/supports-feature";
 import {
   CoverEntity,
+  CoverEntityFeature,
   isFullyClosedTilt,
   isFullyOpenTilt,
-  supportsCloseTilt,
-  supportsOpenTilt,
-  supportsStopTilt,
 } from "../data/cover";
 import { UNAVAILABLE } from "../data/entity";
 import { HomeAssistant } from "../types";
@@ -27,7 +26,10 @@ class HaCoverTiltControls extends LitElement {
 
     return html` <ha-icon-button
         class=${classMap({
-          invisible: !supportsOpenTilt(this.stateObj),
+          invisible: !supportsFeature(
+            this.stateObj,
+            CoverEntityFeature.OPEN_TILT
+          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.open_tilt_cover"
@@ -38,7 +40,10 @@ class HaCoverTiltControls extends LitElement {
       ></ha-icon-button>
       <ha-icon-button
         class=${classMap({
-          invisible: !supportsStopTilt(this.stateObj),
+          invisible: !supportsFeature(
+            this.stateObj,
+            CoverEntityFeature.STOP_TILT
+          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.stop_cover"
@@ -49,7 +54,10 @@ class HaCoverTiltControls extends LitElement {
       ></ha-icon-button>
       <ha-icon-button
         class=${classMap({
-          invisible: !supportsCloseTilt(this.stateObj),
+          invisible: !supportsFeature(
+            this.stateObj,
+            CoverEntityFeature.CLOSE_TILT
+          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.close_tilt_cover"

src/components/ha-date-input.ts

@@ -2,6 +2,7 @@ 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";
@@ -14,6 +15,7 @@ export interface datePickerDialogParams {
   min?: string;
   max?: string;
   locale?: string;
+  firstWeekday?: number;
   onChange: (value: string) => void;
 }
 
@@ -67,6 +69,7 @@ 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,6 +14,7 @@ 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";
@@ -58,6 +59,7 @@ 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>
@@ -164,7 +166,7 @@ export class HaDateRangePicker extends LitElement {
       ha-textfield {
         display: inline-block;
         max-width: 250px;
-        min-width: 200px;
+        min-width: 220px;
       }
 
       ha-textfield:last-child {

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

@@ -40,6 +40,7 @@ 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
@@ -56,7 +57,8 @@ export class HaDialogDatePicker extends LitElement {
   }
 
   private _setToday() {
-    this._value = new Date().toISOString().split("T")[0];
+    // en-CA locale used for date format YYYY-MM-DD
+    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(--vertial-align-dialog, center);
+        align-items: var(--vertical-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: 10px;
+        top: 14px;
         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, 4px);
+        border-radius: var(--ha-card-border-radius, 12px);
       }
 
       .summary-icon {

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -39,11 +39,11 @@ export const computeInitialHaFormData = (
       const selector: Selector = field.selector;
 
       if ("device" in selector) {
-        data[field.name] = selector.device.multiple ? [] : "";
+        data[field.name] = selector.device?.multiple ? [] : "";
       } else if ("entity" in selector) {
-        data[field.name] = selector.entity.multiple ? [] : "";
+        data[field.name] = selector.entity?.multiple ? [] : "";
       } else if ("area" in selector) {
-        data[field.name] = selector.area.multiple ? [] : "";
+        data[field.name] = selector.area?.multiple ? [] : "";
       } else if ("boolean" in selector) {
         data[field.name] = false;
       } else if (
@@ -56,9 +56,9 @@ export const computeInitialHaFormData = (
       ) {
         data[field.name] = "";
       } else if ("number" in selector) {
-        data[field.name] = selector.number.min ?? 0;
+        data[field.name] = selector.number?.min ?? 0;
       } else if ("select" in selector) {
-        if (selector.select.options.length) {
+        if (selector.select?.options.length) {
           data[field.name] = selector.select.options[0][0];
         }
       } else if ("duration" in selector) {
@@ -75,7 +75,7 @@ export const computeInitialHaFormData = (
       } else if ("color_rgb" in selector) {
         data[field.name] = [0, 0, 0];
       } else if ("color_temp" in selector) {
-        data[field.name] = selector.color_temp.min_mireds ?? 153;
+        data[field.name] = selector.color_temp?.min_mireds ?? 153;
       } else if (
         "action" in selector ||
         "media" in selector ||

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

@@ -0,0 +1,87 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../../types";
+import "./ha-form";
+import type {
+  HaFormDataContainer,
+  HaFormElement,
+  HaFormExpandableSchema,
+  HaFormSchema,
+} from "./types";
+
+@customElement("ha-form-expandable")
+export class HaFormExpendable extends LitElement implements HaFormElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public data!: HaFormDataContainer;
+
+  @property({ attribute: false }) public schema!: HaFormExpandableSchema;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public computeLabel?: (
+    schema: HaFormSchema,
+    data?: HaFormDataContainer
+  ) => string;
+
+  @property() public computeHelper?: (schema: HaFormSchema) => string;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-expansion-panel outlined .expanded=${Boolean(this.schema.expanded)}>
+        <div
+          slot="header"
+          role="heading"
+          aria-level=${this.schema.headingLevel?.toString() ?? "3"}
+        >
+          ${this.schema.icon
+            ? html` <ha-icon .icon=${this.schema.icon}></ha-icon> `
+            : this.schema.iconPath
+            ? html` <ha-svg-icon .path=${this.schema.iconPath}></ha-svg-icon> `
+            : null}
+          ${this.schema.title}
+        </div>
+        <div class="content">
+          <ha-form
+            .hass=${this.hass}
+            .data=${this.data}
+            .schema=${this.schema.schema}
+            .disabled=${this.disabled}
+            .computeLabel=${this.computeLabel}
+            .computeHelper=${this.computeHelper}
+          ></ha-form>
+        </div>
+      </ha-expansion-panel>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex !important;
+        flex-direction: column;
+      }
+      :host ha-form {
+        display: block;
+      }
+      .content {
+        padding: 12px;
+      }
+      ha-expansion-panel {
+        display: block;
+        --expansion-panel-content-padding: 0;
+        border-radius: 6px;
+      }
+      ha-svg-icon,
+      ha-icon {
+        color: var(--secondary-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-form-expandable": HaFormExpendable;
+  }
+}

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

@@ -11,7 +11,9 @@ export class HaFormFloat extends LitElement implements HaFormElement {
 
   @property({ attribute: false }) public data!: HaFormFloatData;
 
-  @property() public label!: string;
+  @property() public label?: string;
+
+  @property() public helper?: string;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -26,8 +28,11 @@ export class HaFormFloat extends LitElement implements HaFormElement {
   protected render(): TemplateResult {
     return html`
       <ha-textfield
+        type="numeric"
         inputMode="decimal"
         .label=${this.label}
+        .helper=${this.helper}
+        helperPersistent
         .value=${this.data !== undefined ? this.data : ""}
         .disabled=${this.disabled}
         .required=${this.schema.required}
@@ -55,6 +60,11 @@ export class HaFormFloat extends LitElement implements HaFormElement {
       return;
     }
 
+    // Allow user to start typing a negative value
+    if (rawValue === "-") {
+      return;
+    }
+
     if (rawValue !== "") {
       value = parseFloat(rawValue);
       if (isNaN(value)) {

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

@@ -33,11 +33,6 @@ export class HaFormGrid extends LitElement implements HaFormElement {
 
   @property() public computeHelper?: (schema: HaFormSchema) => string;
 
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-    this.setAttribute("own-margin", "");
-  }
-
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
     if (changedProps.has("schema")) {
@@ -78,11 +73,11 @@ export class HaFormGrid extends LitElement implements HaFormElement {
           var(--form-grid-column-count, auto-fit),
           minmax(var(--form-grid-min-width, 200px), 1fr)
         );
-        grid-gap: 8px;
+        grid-column-gap: 8px;
+        grid-row-gap: 24px;
       }
       :host > ha-form {
         display: block;
-        margin-bottom: 24px;
       }
     `;
   }

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

@@ -21,6 +21,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @query("ha-textfield ha-slider") private _input?:
@@ -74,6 +76,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {
         type="number"
         inputMode="numeric"
         .label=${this.label}
+        .helper=${this.helper}
+        helperPersistent
         .value=${this.data !== undefined ? this.data : ""}
         .disabled=${this.disabled}
         .required=${this.schema.required}

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

@@ -19,7 +19,9 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   @property() public data!: HaFormSelectData;
 
-  @property() public label!: string;
+  @property() public label?: string;
+
+  @property() public helper?: string;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -41,6 +43,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
         .schema=${this.schema}
         .value=${this.data}
         .label=${this.label}
+        .helper=${this.helper}
         .disabled=${this.disabled}
         .required=${this.schema.required}
         .selector=${this._selectSchema(this.schema.options)}

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

@@ -60,6 +60,7 @@ export class HaFormString extends LitElement implements HaFormElement {
         .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
+        .autocomplete=${this.schema.autocomplete}
         .suffix=${isPassword
           ? // reserve some space for the icon.
             html`<div style="width: 24px"></div>`

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

@@ -1,34 +1,27 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, 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-grid";
 import "./ha-form-float";
+import "./ha-form-grid";
+import "./ha-form-expandable";
 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 { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types";
-import { HomeAssistant } from "../../types";
+import { HaFormDataContainer, HaFormElement, HaFormSchema } 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;
@@ -63,18 +56,6 @@ 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">
@@ -112,6 +93,7 @@ export class HaForm extends LitElement implements HaFormElement {
                   schema: item,
                   data: getValue(this.data, item),
                   label: this._computeLabel(item, this.data),
+                  helper: this._computeHelper(item),
                   disabled: this.disabled,
                   hass: this.hass,
                   computeLabel: this.computeLabel,
@@ -174,14 +156,10 @@ export class HaForm extends LitElement implements HaFormElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      .root {
-        margin-bottom: -24px;
-        overflow: clip visible;
-      }
       .root > * {
         display: block;
       }
-      .root > *:not([own-margin]) {
+      .root > *:not([own-margin]):not(:last-child) {
         margin-bottom: 24px;
       }
       ha-alert[own-margin] {

src/components/ha-form/types.ts

@@ -12,7 +12,8 @@ export type HaFormSchema =
   | HaFormMultiSelectSchema
   | HaFormTimeSchema
   | HaFormSelector
-  | HaFormGridSchema;
+  | HaFormGridSchema
+  | HaFormExpandableSchema;
 
 export interface HaFormBaseSchema {
   name: string;
@@ -34,6 +35,17 @@ export interface HaFormGridSchema extends HaFormBaseSchema {
   schema: readonly HaFormSchema[];
 }
 
+export interface HaFormExpandableSchema extends HaFormBaseSchema {
+  type: "expandable";
+  name: "";
+  title: string;
+  icon?: string;
+  iconPath?: string;
+  expanded?: boolean;
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  schema: readonly HaFormSchema[];
+}
+
 export interface HaFormSelector extends HaFormBaseSchema {
   type?: never;
   selector: Selector;
@@ -71,6 +83,7 @@ export interface HaFormFloatSchema extends HaFormBaseSchema {
 export interface HaFormStringSchema extends HaFormBaseSchema {
   type: "string";
   format?: string;
+  autocomplete?: string;
 }
 
 export interface HaFormBooleanSchema extends HaFormBaseSchema {
@@ -85,7 +98,9 @@ export interface HaFormTimeSchema extends HaFormBaseSchema {
 export type SchemaUnion<
   SchemaArray extends readonly HaFormSchema[],
   Schema = SchemaArray[number]
-> = Schema extends HaFormGridSchema ? SchemaUnion<Schema["schema"]> : Schema;
+> = Schema extends HaFormGridSchema | HaFormExpandableSchema
+  ? SchemaUnion<Schema["schema"]>
+  : Schema;
 
 export interface HaFormDataContainer {
   [key: string]: HaFormData;